:root {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --text: #1a1a1a;
  --muted: #6b7280;
  --visited: #c2c6cd;
  --accent: #2563eb;
  --border: #e5e7eb;
  --danger: #dc2626;
  --shadow-near: rgba(0, 0, 0, 0.10);
  --shadow-far:  rgba(0, 0, 0, 0.22);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115;
    --panel: #181b22;
    --text: #e6e8eb;
    --muted: #8b93a1;
    --visited: #4e5664;
    --accent: #60a5fa;
    --border: #2a2f3a;
    --danger: #f87171;
    --shadow-near: rgba(0, 0, 0, 0.45);
    --shadow-far:  rgba(0, 0, 0, 0.70);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, system-ui, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
}
.brand-logo { width: 24px; height: 24px; flex-shrink: 0; }
.topbar nav { margin-left: auto; display: flex; gap: 8px; }
.search { flex: 1; max-width: 400px; }
.search input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
}
.btn-ghost {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  font-size: 13px;
}
.btn-ghost:hover { background: var(--bg); }

main { padding: 20px; max-width: 1600px; margin: 0 auto; }

.dashboard {
  display: grid;
  grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.dashboard-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.dashboard .group { margin: 0; min-width: 0; }
.group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
/* Unnamed group: collapse the header entirely so the feed boxes hug the
   top of the column. The drag handle still appears in edit mode (see below)
   so the group remains grabbable. */
.group-head--unnamed {
  display: none;
}
body.edit-mode .group-head--unnamed {
  display: flex;
  min-height: 24px;
}
.dashboard .group h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0;
}
.group-drag-handle {
  display: none;
  cursor: grab;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  user-select: none;
}
.group-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- Edit mode (Cmd/Ctrl held) ---- */
body.edit-mode .group { cursor: grab; }
body.edit-mode .group:active { cursor: grabbing; }
body.edit-mode .group-head {
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
body.edit-mode .group-head h2 { color: var(--text); }
body.edit-mode .group-drag-handle { display: inline-block; }
body.edit-mode .group.dragging { opacity: 0.4; }
/* Keep empty columns droppable: a 0-height flex column has no hover area, so
   give every column a minimum height in edit mode and outline empty ones. */
body.edit-mode .dashboard-column { min-height: 140px; }
body.edit-mode .dashboard-column:not(:has(.group)) {
  border: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.edit-mode .dashboard-column:not(:has(.group))::before {
  content: "Drop a group here";
  color: var(--muted);
  font-size: 12px;
  pointer-events: none;
}
body.edit-mode .dashboard-column.drop-target {
  outline: 2px dashed var(--accent);
  outline-offset: 6px;
  border-radius: 12px;
}
/* Stop links/text selections inside feed boxes from interfering when in edit mode. */
body.edit-mode .feed-box { user-select: none; }
.feed-box {
  --tint: var(--panel);
  background: color-mix(in srgb, var(--tint) 5%, var(--panel));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  /* Soft, very-blurred shadow. Sibling feed-boxes painted later in source
     order naturally cover any portion of these shadows that would fall on
     another box's content, so the shadow only ever shows on the dashboard
     background (the gaps between boxes and around the edges). */
  box-shadow:
    0 4px 10px var(--shadow-near),
    0 24px 48px var(--shadow-far);
}
.feed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: -14px -16px 10px;
  padding: 8px 12px;
  border-radius: 10px 10px 0 0;
  background: color-mix(in srgb, var(--tint) 30%, #111);
}
.feed-title {
  font-weight: 600;
  color: #fff;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.feed-title:hover { color: #fff; text-decoration: underline; }
.favicon {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  flex-shrink: 0;
  object-fit: contain;
}
.err {
  color: var(--danger);
  font-weight: 700;
}
.entry-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.entry-list li {
  min-height: 39px;
  min-width: 0;
}
.entry-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  min-width: 0;
}
.entry-list a > span {
  flex: 1;
  min-width: 0;
}
/* Visited entry styling. We can't rely on CSS :visited alone — browsers
   restrict it heavily for privacy and the styling doesn't propagate to
   descendants — so app.js tracks clicked URLs in localStorage and tags
   the link with a `visited` class. The `:visited` rule is kept as a
   best-effort fallback for the first session. LVHA order: visited before
   hover so hovering a read entry still flips to the accent colour. */
.entry-list a:visited,
.entry-list a:visited > span,
.entry-list a.visited,
.entry-list a.visited > span { color: var(--visited); }
.entry-list a:hover,
.entry-list a:hover > span { color: var(--accent); text-decoration: none; }
.entry-thumb {
  width: 70px;
  height: 39px;
  flex-shrink: 0;
  border-radius: 4px;
  object-fit: cover;
  background: var(--bg);
}

/* Preview display mode: full-width hero image with the title underneath. */
.feed-box[data-display="preview"] .entry-list { gap: 14px; }
.feed-box[data-display="preview"] .entry-list li { min-height: 0; }
.feed-box[data-display="preview"] .entry-list a {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.feed-box[data-display="preview"] .entry-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 6px;
}
.meta {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.empty { color: var(--muted); font-style: italic; }
.empty-state { text-align: center; padding: 60px 20px; }

/* Manage page */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 20px;
}
.panel h2 { margin-top: 0; font-size: 16px; }
.group-list { list-style: none; padding: 0; margin: 0 0 12px; }
.group-list li { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.group-list form { display: inline-flex; gap: 4px; }
.inline-form, .stacked-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.stacked-form label { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); gap: 4px; }
input[type=text], input[type=url], input[type=number], input[type=search], select {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
}
button {
  padding: 6px 12px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
button:hover { opacity: 0.9; }
button.danger { background: var(--danger); }

.feeds-table {
  width: 100%;
  border-collapse: collapse;
}
.feeds-table th, .feeds-table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.feeds-table th { font-size: 11px; text-transform: uppercase; color: var(--muted); }
.feeds-table input[type=text], .feeds-table input[type=url] { width: 100%; }

/* Manage page: group panels with drag-and-drop feed rows */
.group-panels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.group-panel { margin-bottom: 0; min-width: 0; }
.group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.group-header .group-name {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  min-width: 0;
}
button.small { padding: 4px 8px; font-size: 12px; }

.feed-rows {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 36px;
}
.feed-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
}
.feed-row.dragging { opacity: 0.4; }
.feed-row.dirty-row { border-color: var(--accent); }
.drag-handle {
  cursor: grab;
  color: var(--muted);
  font-size: 16px;
  user-select: none;
  padding: 0 2px;
}
.feed-row:active .drag-handle { cursor: grabbing; }
.feed-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.feed-fields input[type="text"] { flex: 2 1 140px; min-width: 0; }
.feed-fields input[type="url"] { flex: 3 1 180px; min-width: 0; }
.feed-fields input[type="number"] { width: 56px; flex: 0 0 auto; }
.feed-meta { font-size: 11px; color: var(--muted); white-space: nowrap; }

.feed-rows-empty {
  font-style: italic;
  color: var(--muted);
  padding: 8px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  text-align: center;
}
.feed-rows:has(.feed-row) .feed-rows-empty { display: none; }

.feed-rows.drop-into {
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Bulk-edit form on the manage page */
.dirty {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.bulk-save-bar {
  position: sticky;
  bottom: 12px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin: 24px auto 12px;
  max-width: 1600px;
  padding: 12px 18px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.bulk-save-bar.dirty {
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
  border-color: var(--accent);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--accent) 35%, transparent);
}
.bulk-save-bar .bulk-save-hint {
  font-size: 12px;
  color: var(--muted);
}
.bulk-save-bar.dirty .bulk-save-hint {
  color: var(--accent);
  font-weight: 600;
}
button.bulk-save {
  font-weight: 600;
  padding: 8px 16px;
}
button.bulk-save:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Per-group "Add feed" disclosure */
.add-feed-disclosure { margin-top: 10px; }
.add-feed-toggle {
  cursor: pointer;
  font-size: 12px;
  color: var(--muted);
  padding: 6px 8px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  list-style: none;
  text-align: center;
  user-select: none;
}
.add-feed-toggle::-webkit-details-marker { display: none; }
.add-feed-toggle::marker { content: ""; }
.add-feed-toggle:hover { color: var(--text); border-color: var(--accent); }
.add-feed-disclosure[open] .add-feed-toggle {
  color: var(--text);
  border-style: solid;
  border-color: var(--accent);
  margin-bottom: 8px;
}
.add-feed-form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
}
.add-feed-form input[type="url"]    { flex: 2 1 200px; min-width: 0; }
.add-feed-form input[type="text"]   { flex: 1 1 120px; min-width: 0; }
.add-feed-form input[type="number"] { width: 56px; flex: 0 0 auto; }

.hint { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.hint kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
}

/* Discover (feed picker) page */
.discover-list { list-style: none; padding: 0; margin: 0; }
.discover-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.discover-list li:last-child { border-bottom: none; }
.discover-list form {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.discover-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.discover-meta code { font-size: 12px; color: var(--muted); word-break: break-all; }

/* Hover preview tooltip */
.preview-tooltip {
  position: absolute;
  z-index: 100;
  max-width: 360px;
  padding: 10px 12px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  font-size: 12px;
  line-height: 1.5;
  pointer-events: none;
}
.preview-tooltip[hidden] { display: none; }
.preview-tooltip .preview-image {
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 8px;
  background: var(--bg);
}
.preview-tooltip .preview-image[hidden] { display: none; }
.preview-tooltip .preview-meta {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
}
.preview-tooltip .preview-meta[hidden] { display: none; }
.preview-tooltip .preview-body[hidden] { display: none; }
.preview-tooltip .preview-meta:last-child { margin-bottom: 0; }