/* =========================================================
   YouTube Link Organizer — styles
   ========================================================= */

:root {
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sidebar-w: 252px;
  --sidebar-w-collapsed: 60px;
  --statusbar-h: 30px;
  --topbar-h: 60px;
  --card-w: 320px;
  --radius: 10px;
  --radius-sm: 7px;
  --shadow-pop: 0 10px 38px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.18);
  --speed: .16s;
}

/* ---------- THEME: DARK (default) ---------- */
[data-theme="dark"] {
  --bg:            oklch(0.18 0.006 260);
  --bg-sunken:     oklch(0.15 0.006 260);
  --bg-elevated:   oklch(0.22 0.007 260);
  --bg-hover:      oklch(0.27 0.008 260);
  --bg-active:     oklch(0.31 0.012 260);
  --border:        oklch(0.30 0.008 260);
  --border-soft:   oklch(0.25 0.007 260);
  --text:          oklch(0.95 0.004 260);
  --text-2:        oklch(0.72 0.008 260);
  --text-3:        oklch(0.56 0.008 260);
  --accent:        oklch(0.62 0.20 18);
  --accent-text:   oklch(0.99 0 0);
  --accent-soft:   oklch(0.40 0.12 18 / .22);
  --warn:          oklch(0.72 0.16 75);
  --ok:            oklch(0.72 0.15 155);
  --drop:          oklch(0.62 0.20 18 / .9);
  color-scheme: dark;
}

/* ---------- THEME: LIGHT ---------- */
[data-theme="light"] {
  --bg:            oklch(0.99 0.002 260);
  --bg-sunken:     oklch(0.965 0.003 260);
  --bg-elevated:   oklch(1 0 0);
  --bg-hover:      oklch(0.95 0.004 260);
  --bg-active:     oklch(0.92 0.006 260);
  --border:        oklch(0.89 0.005 260);
  --border-soft:   oklch(0.93 0.004 260);
  --text:          oklch(0.22 0.01 260);
  --text-2:        oklch(0.45 0.01 260);
  --text-3:        oklch(0.62 0.01 260);
  --accent:        oklch(0.58 0.21 18);
  --accent-text:   oklch(0.99 0 0);
  --accent-soft:   oklch(0.58 0.21 18 / .12);
  --warn:          oklch(0.60 0.15 65);
  --ok:            oklch(0.55 0.14 155);
  --drop:          oklch(0.58 0.21 18 / .85);
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; overflow-x: hidden; }
body {
  font-family: var(--font-ui);
  background: var(--bg-sunken);
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button { font-family: inherit; cursor: pointer; color: inherit; }
input, textarea { font-family: inherit; }
.mono { font-family: var(--font-mono); }
::selection { background: var(--accent-soft); }

/* scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: padding-box; }

/* =========================================================
   APP LAYOUT
   ========================================================= */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  transition: grid-template-columns var(--speed) ease;
}
.app.is-collapsed { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }

/* =========================================================
   SIDEBAR
   ========================================================= */
.sidebar {
  background: var(--bg);
  border-right: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  z-index: 40;
}
.sidebar__head {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--topbar-h); padding: 0 12px 0 16px; flex-shrink: 0;
}
.brand { display: flex; align-items: center; gap: 9px; overflow: hidden; }
.brand__mark {
  color: var(--accent); font-size: 15px; flex-shrink: 0;
  background: var(--accent-soft); width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center;
}
.brand__name { font-weight: 650; font-size: 14.5px; letter-spacing: -.01em; white-space: nowrap; }

.create-list-btn {
  margin: 4px 12px 8px; padding: 9px 12px;
  display: flex; align-items: center; gap: 9px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-size: 13.5px; font-weight: 550;
  transition: background var(--speed), border-color var(--speed);
}
.create-list-btn:hover { background: var(--bg-hover); border-color: var(--text-3); }
.create-list-btn svg { flex-shrink: 0; }

.sidebar__nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 8px 8px; }
.sidebar__msg { color: var(--text-3); font-size: 12.5px; padding: 12px 8px; text-align: center; }

.list-container { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.list-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 9px; border-radius: var(--radius-sm); cursor: pointer;
  color: var(--text-2); position: relative; user-select: none;
  transition: background var(--speed), color var(--speed);
}
.list-item:hover { background: var(--bg-hover); color: var(--text); }
.list-item.is-active { background: var(--bg-active); color: var(--text); font-weight: 550; }
.list-item.is-archived-open { box-shadow: inset 2px 0 0 var(--accent); }
.list-item.drop-target { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.list-item__emoji { font-size: 15px; flex-shrink: 0; width: 18px; text-align: center; }
.list-item__name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
.list-item__count { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.list-item__handle { display: none; color: var(--text-3); cursor: grab; flex-shrink: 0; }
.list-item__menu {
  opacity: 0; flex-shrink: 0; width: 22px; height: 22px; border-radius: 5px;
  display: grid; place-items: center; border: none; background: transparent; color: var(--text-2);
}
.list-item:hover .list-item__menu { opacity: 1; }
.list-item__menu:hover { background: var(--bg-active); color: var(--text); }
.app.reorder-lists .list-item__handle { display: block; }
.app.reorder-lists .list-item__menu, .app.reorder-lists .list-item__count { display: none; }
.sortable-ghost { opacity: .4; }

/* reorder mode banner */
.reorder-banner {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  padding: 7px 8px 7px 11px; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent);
  font-size: 12px; font-weight: 550;
}
.reorder-banner__txt { flex: 1; }
.reorder-banner__done {
  flex-shrink: 0; padding: 4px 12px; border-radius: 6px;
  background: var(--accent); color: var(--accent-text);
  font-size: 12px; font-weight: 600; border: none; cursor: pointer;
}
.reorder-banner__done:hover { filter: brightness(1.08); }
.sortable-chosen { background: var(--bg-active) !important; }

/* footer */
.sidebar__foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-top: 1px solid var(--border-soft); flex-shrink: 0; position: relative;
}
.settings-wrap, .user-wrap { position: relative; }

.signin-btn {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px;
  background: var(--accent); color: var(--accent-text); border: none;
  border-radius: var(--radius-sm); font-weight: 600; font-size: 13px;
}
.signin-btn:hover { filter: brightness(1.08); }
.user-chip {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--accent); color: var(--accent-text); display: grid; place-items: center;
  font-weight: 700; font-size: 13px; overflow: hidden; padding: 0;
}
.user-chip img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   COLLAPSED SIDEBAR
   ========================================================= */
.app.is-collapsed .brand__name,
.app.is-collapsed .create-list-btn span,
.app.is-collapsed .list-item__name,
.app.is-collapsed .list-item__count,
.app.is-collapsed .list-item__menu,
.app.is-collapsed .signin-btn span { display: none; }
.app.is-collapsed .brand { display: none; }
.app.is-collapsed .sidebar__head { padding: 0; justify-content: center; }
.app.is-collapsed #collapseBtn { display: grid; }
.app.is-collapsed #collapseBtn svg { transform: rotate(180deg); }
.app.is-collapsed .create-list-btn { justify-content: center; padding: 9px; margin: 4px 10px 8px; }
.app.is-collapsed .list-item { justify-content: center; padding: 9px 0; position: relative; }
.app.is-collapsed .signin-btn { padding: 8px; justify-content: center; }
.app.is-collapsed .sidebar__foot { flex-direction: column; gap: 10px; }

/* collapsed hover flyout labels (Obsidian-style) */
.app.is-collapsed .list-item::after {
  content: attr(data-name);
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(-4px);
  background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text);
  padding: 6px 11px; border-radius: 7px; white-space: nowrap; font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow-pop); opacity: 0; pointer-events: none; z-index: 120;
  transition: opacity .12s ease, transform .12s ease;
}
.app.is-collapsed .list-item:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
.expand-sidebar { display: none !important; }

/* =========================================================
   ICON BUTTONS / GENERIC BUTTONS
   ========================================================= */
.icon-btn {
  width: 32px; height: 32px; border: none; background: transparent; color: var(--text-2);
  border-radius: 7px; display: grid; place-items: center;
  transition: background var(--speed), color var(--speed); flex-shrink: 0;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text); }

.btn {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-size: 13.5px; font-weight: 550; transition: all var(--speed); white-space: nowrap;
}
.btn--primary { background: var(--accent); color: var(--accent-text); }
.btn--primary:hover { filter: brightness(1.08); }
.btn--ghost { background: var(--bg-elevated); border-color: var(--border); color: var(--text); }
.btn--ghost:hover { background: var(--bg-hover); }
.btn--danger { background: transparent; border-color: var(--accent); color: var(--accent); }
.btn--danger:hover { background: var(--accent); color: var(--accent-text); }
.btn--block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- split "Add" button: main action + caret reveals Note/Channel ---------- */
.split-add { display: inline-flex; align-items: stretch; flex-shrink: 0; }
.split-add__main { border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: 12px; }
.split-add__caret {
  position: relative; padding: 8px 8px;
  border-top-left-radius: 0; border-bottom-left-radius: 0;
}
/* hairline divider between the two halves */
.split-add__caret::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px;
  background: color-mix(in srgb, var(--accent-text) 30%, transparent);
}
.split-add__caret svg { transition: transform var(--speed); }
.split-add__caret[aria-expanded="true"] svg { transform: rotate(180deg); }

/* =========================================================
   POPOVERS
   ========================================================= */
.popover {
  position: absolute; background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: 6px;
  min-width: 200px; z-index: 200; animation: popIn .12s ease;
}
/* floating menus must sit above the full-page editor (z 500) — otherwise menus
   opened inside the editor (e.g. "Add a property") render hidden behind it. */
.popover.floating-popover { z-index: 1600; }
@keyframes popIn { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } }
.settings-menu { bottom: calc(100% + 8px); left: 0; }
.user-popover { bottom: calc(100% + 8px); right: 0; min-width: 220px; padding: 14px; }
.user-popover__name { font-weight: 650; margin-bottom: 2px; }
.user-popover__uid { font-size: 10.5px; color: var(--text-3); margin-bottom: 12px; word-break: break-all; }

.popover__item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 9px; border: none; background: transparent; border-radius: 6px;
  color: var(--text); font-size: 13px;
}
.popover__item:hover { background: var(--bg-hover); }
.popover__item.is-danger { color: var(--accent); }
.popover__ico { width: 17px; text-align: center; flex-shrink: 0; }
.popover__divider { height: 1px; background: var(--border-soft); margin: 5px 4px; }
.popover__slider { padding: 8px 9px; display: flex; align-items: center; gap: 9px; }
.popover__slider label { font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.popover__slider input { flex: 1; accent-color: var(--accent); }
.popover__slider .mono { font-size: 11px; color: var(--text-3); width: 26px; }
.popover__submenu-label { font-size: 11px; color: var(--text-3); padding: 6px 9px 3px; text-transform: uppercase; letter-spacing: .05em; }

input[type="range"] { accent-color: var(--accent); }

/* =========================================================
   MAIN / TOPBAR
   ========================================================= */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg-sunken); position: relative; }
.topbar {
  height: var(--topbar-h); flex-shrink: 0; display: flex; align-items: center; gap: 12px;
  padding: 0 18px; border-bottom: 1px solid var(--border-soft); background: var(--bg);
}
.hamburger { display: none; }
.topbar__title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topbar__emoji { font-size: 19px; }
.topbar__name { font-size: 17px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30vw; }
.badge {
  font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 20px;
  background: var(--accent-soft); color: var(--accent); text-transform: uppercase; letter-spacing: .04em;
}
.badge.is-archived { background: var(--warn); color: #000; }

.topbar__search {
  margin-left: auto; display: flex; align-items: center; gap: 8px; position: relative;
  background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 20px;
  padding: 0 12px; height: 36px; width: min(320px, 34vw); color: var(--text-3);
  transition: border-color var(--speed), width var(--speed);
}
.topbar__search:focus-within { border-color: var(--accent); color: var(--text-2); }
.topbar__search input { flex: 1; border: none; background: transparent; outline: none; color: var(--text); font-size: 13.5px; }
.search-clear { border: none; background: transparent; color: var(--text-3); font-size: 18px; line-height: 1; padding: 0 2px; }
.search-clear:hover { color: var(--text); }

.btn__label { }

/* =========================================================
   VIDEO GRID
   ========================================================= */
/* No top padding: the sticky view-bar (or the grid, when the bar is hidden)
   supplies the top spacing so nothing shows in a gap above the sticky bar. */
.grid-wrap { flex: 1; overflow-y: auto; padding: 0 22px calc(var(--statusbar-h) + 20px); }
#viewBar[hidden] ~ #videoGrid { padding-top: 20px; }
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr));
  gap: 20px 18px; align-content: start;
}

/* ---------- loading: skeleton cards + read-only preview ---------- */
/* Skeleton = a list opened for the first time in this session, data on its
   way. Its greys are mixed from the theme's TEXT colour, so they stand out
   from the background in every theme (dark or light, any colour family). */
.sk-card {
  --sk-base: color-mix(in oklab, var(--text) 9%, var(--bg-elevated));
  --sk-shine: color-mix(in oklab, var(--text) 17%, var(--bg-elevated));
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
}
.sk-thumb, .sk-avatar, .sk-line {
  background-color: var(--sk-base);
  background-image: linear-gradient(100deg, transparent 20%, var(--sk-shine) 50%, transparent 80%);
  background-size: 250% 100%; background-repeat: no-repeat;
  animation: sk-shimmer 1.35s ease-in-out infinite;
}
.sk-thumb { aspect-ratio: 16/9; }
.sk-body { display: flex; gap: 11px; padding: 11px 12px 14px; }
.sk-avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; margin-top: 1px; }
.sk-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.sk-line { height: 11px; border-radius: 6px; }
.sk-line--title { height: 13px; width: 88%; }
.sk-line--short { width: 55%; }
.sk-line--tiny { width: 35%; height: 9px; }
@keyframes sk-shimmer { from { background-position: 150% 0; } to { background-position: -150% 0; } }

/* ---------- view bar (group / sort / filter) ---------- */
.view-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 6;
  /* full-bleed horizontally, flush to the top — its own top padding is the
     breathing room, so the bar sticks cleanly with no gap above it. */
  margin: 0 -22px 16px; padding: 18px 22px 14px;
  background: var(--bg-sunken); border-bottom: 1px solid var(--border-soft);
}
.vb-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-2);
  font-size: 12.5px; font-weight: 550; transition: background var(--speed), border-color var(--speed), color var(--speed);
}
.vb-chip:hover { background: var(--bg-hover); color: var(--text); }
.vb-chip.is-active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.vb-reset { color: var(--text-3); }
.vb-reset:hover { color: var(--accent); }

/* ---------- grouped grid ---------- */
.video-grouped { display: flex; flex-direction: column; gap: 26px; }
.vgroup.group-hidden { display: none; }
.vgroup__head {
  display: flex; align-items: center; gap: 6px; margin-bottom: 14px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border-soft);
}
.vgroup__toggle { border: none; background: transparent; color: var(--text-2); width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; }
.vgroup__toggle:hover { background: var(--bg-hover); color: var(--text); }
.vgroup__chev { display: inline-block; transition: transform var(--speed); font-size: 13px; }
.vgroup.is-collapsed .vgroup__chev { transform: rotate(-90deg); }
.vgroup.is-collapsed .vgroup__body { display: none; }
.vgroup__handle {
  cursor: grab; color: var(--text-3); display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 6px; opacity: 0; transition: opacity var(--speed), background var(--speed);
}
.vgroup__head:hover .vgroup__handle { opacity: 1; }
.vgroup__handle:hover { background: var(--bg-hover); color: var(--text); }
.vgroup__handle:active { cursor: grabbing; }
.vgroup__handle svg { fill: currentColor; width: 16px; height: 16px; }
.vgroup__label { font-weight: 680; font-size: 15px; letter-spacing: -.01em; }
.vgroup__count {
  font-size: 12px; color: var(--text-3); background: var(--bg-elevated);
  border: 1px solid var(--border-soft); border-radius: 20px; padding: 1px 9px; font-weight: 600; margin-left: 2px;
}

/* ---------- channel card ---------- */
/* Mirrors a video card's proportions so channel + video cards are the same
   size in every row: a 16:9 "hero" (like the thumbnail) holds the avatar +
   name, and a short stats strip below matches the video's text body. The hero
   flex-grows to absorb any extra row height, so it never leaves a void. */
.vcard--channel { text-align: center; }
.vchan__banner {
  flex: 1 1 auto; aspect-ratio: 16 / 9; min-height: 140px; position: relative; cursor: pointer; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 30px 16px 16px;
  /* rich, theme-independent hero (like a channel-page banner) so the white
     avatar/name stay legible in both light and dark themes */
  background:
    radial-gradient(120% 95% at 50% 2%, color-mix(in srgb, var(--accent) 68%, transparent), transparent 58%),
    linear-gradient(150deg, #251b2e, #14111d 80%);
  background-size: cover; background-position: center;
}
/* scrim keeps text legible even when a real banner image is set inline */
.vchan__banner::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.42));
}
.vchan__tag {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(0,0,0,.5); color: #fff; font-size: 10.5px; font-weight: 650; letter-spacing: .02em;
  padding: 3px 9px 3px 7px; border-radius: 20px; backdrop-filter: blur(4px);
}
.vchan__tag svg { color: #ff4d4d; }
.vchan__hero {
  position: relative; z-index: 1; max-width: 100%;
  display: flex; flex-direction: column; align-items: center;
}
.vchan__avatar {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 3px solid rgba(255,255,255,.9); background: var(--bg-sunken);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.vchan__avatar.is-ph { display: grid; place-items: center; font-size: 26px; font-weight: 700; color: #fff; background: color-mix(in srgb, var(--accent) 26%, #1a1522); }
.vchan__name {
  font-weight: 700; font-size: 15.5px; line-height: 1.3; letter-spacing: -.01em;
  color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6);
  margin-top: 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vchan__handle { font-size: 12px; color: rgba(255,255,255,.85); text-shadow: 0 1px 3px rgba(0,0,0,.55); margin-top: 3px; }
.vchan__body {
  flex-shrink: 0; display: flex; justify-content: center; align-items: center;
  padding: 12px 16px 14px; cursor: pointer;
}
.vchan__stats {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  background: var(--bg-sunken); overflow: hidden;
}
.vchan__stat { padding: 6px 18px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.vchan__stat + .vchan__stat { border-left: 1px solid var(--border-soft); }
.vchan__stat-n { font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; }
.vchan__stat-l { font-size: 9.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); line-height: 1; }

.vcard {
  background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--radius);
  overflow: hidden; position: relative; transition: border-color var(--speed), box-shadow var(--speed), transform var(--speed);
  display: flex; flex-direction: column;
}
.vcard:hover { border-color: var(--border); box-shadow: 0 6px 22px rgba(0,0,0,.14); }
.vcard.dragging { opacity: .85; }
.vcard.hidden { display: none; }
.vcard__thumb { position: relative; aspect-ratio: 16/9; background: var(--bg-sunken); overflow: hidden; cursor: pointer; }
.vcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcard__dur {
  position: absolute; bottom: 7px; right: 7px; background: rgba(0,0,0,.82); color: #fff;
  font-size: 11.5px; font-weight: 600; padding: 1px 5px; border-radius: 4px; font-variant-numeric: tabular-nums;
}
.vcard__body { display: flex; gap: 11px; padding: 11px 12px 13px; }
.vcard__avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; background: var(--bg-hover); object-fit: cover; margin-top: 1px; }
.vcard__avatar.placeholder { display: grid; place-items: center; color: var(--text-3); font-weight: 700; font-size: 13px; }
.vcard__meta { min-width: 0; flex: 1; }
.vcard__title {
  font-size: 13.5px; font-weight: 600; line-height: 1.32; letter-spacing: -.005em; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px;
}
.vcard__channel { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcard__stats { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.vcard__actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; opacity: 0; transition: opacity var(--speed); }
.vcard:hover .vcard__actions { opacity: 1; }
.vcard__abtn {
  width: 30px; height: 30px; border-radius: 7px; border: none; background: rgba(0,0,0,.62);
  color: #fff; display: grid; place-items: center; backdrop-filter: blur(4px);
}
.vcard__abtn:hover { background: rgba(0,0,0,.85); }
.vcard__abtn.has-note { background: var(--accent); opacity: 1; }
.vcard__note-btn.has-note { opacity: 1; }
.vcard:not(:hover) .vcard__note-btn.has-note { opacity: 1; }
.vcard.has-note .vcard__actions { opacity: 1; }

.grid-empty { text-align: center; padding: 80px 20px; color: var(--text-3); }

/* =========================================================
   NOTE-ONLY CARDS (no video — pure note)
   ========================================================= */
.vcard--note .vcard__noteface {
  position: relative; aspect-ratio: 16/9; overflow: hidden; cursor: pointer;
  background:
    linear-gradient(150deg, var(--accent-soft), transparent 70%),
    var(--bg-sunken);
  border-bottom: 1px solid var(--border-soft);
  padding: 16px 16px 14px; display: flex; flex-direction: column;
}
.vcard--note .vcard__noteface::before {
  content: "“"; position: absolute; top: 2px; left: 12px;
  font-family: Georgia, "Times New Roman", serif; font-size: 64px; line-height: 1;
  color: var(--accent); opacity: .22; pointer-events: none;
}
.vcard__notetag {
  align-self: flex-start; font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); background: var(--bg);
  border: 1px solid var(--accent-soft); padding: 2px 7px; border-radius: 20px;
  position: relative; z-index: 1; margin-bottom: 8px;
}
.vcard__notebody {
  position: relative; z-index: 1; flex: 1; min-height: 0; overflow: hidden;
  font-size: 13px; line-height: 1.6; color: var(--text-2);
  white-space: pre-wrap; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  -webkit-mask-image: linear-gradient(180deg, #000 64%, transparent);
          mask-image: linear-gradient(180deg, #000 64%, transparent);
}
.vcard__notebody.is-empty { color: var(--text-3); font-style: italic; -webkit-mask-image: none; mask-image: none; }
.vcard--note .vcard__icon {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; margin-top: 1px;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
}
.vcard--note .vcard__notedate { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

.grid-empty { text-align: center; padding: 80px 20px; color: var(--text-3); }
.grid-empty__art { font-size: 42px; color: var(--accent); opacity: .5; margin-bottom: 12px; }
.grid-empty p { font-size: 14px; }
.grid-empty__hint { font-size: 12.5px; color: var(--text-3); margin-top: 6px; }

/* =========================================================
   STATUS BAR (VS Code style)
   ========================================================= */
.statusbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--statusbar-h);
  background: var(--accent); color: var(--accent-text);
  display: flex; align-items: center; font-size: 11.5px; z-index: 30;
}
.statusbar__chips { display: flex; align-items: center; gap: 0; overflow-x: auto; flex: 1; height: 100%; scrollbar-width: none; }
.statusbar__chips::-webkit-scrollbar { display: none; }
.status-chip {
  display: flex; align-items: center; gap: 5px; padding: 0 11px; height: 100%; white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.16); font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.status-chip__ico { opacity: .85; font-size: 11px; }
.status-chip__val { font-weight: 600; }
.statusbar__gear {
  border: none; background: transparent; color: var(--accent-text); width: var(--statusbar-h); height: 100%;
  display: grid; place-items: center; opacity: .85; flex-shrink: 0;
}
.statusbar__gear:hover { opacity: 1; background: rgba(255,255,255,.12); }

/* =========================================================
   MODALS (right-edge drawers)
   ========================================================= */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000;
  display: flex; justify-content: flex-end; animation: fadeIn .15s ease;
  overflow: hidden; /* clip the slide-in transform so the page never gains horizontal scroll */
}
.modal-overlay.confirm-layer { z-index: 1100; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: 460px; max-width: 92vw; height: 100%; background: var(--bg);
  display: flex; flex-direction: column; box-shadow: -8px 0 40px rgba(0,0,0,.3);
  animation: slideIn .22s cubic-bezier(.2,.8,.2,1);
}
.modal.modal--wide { width: 920px; }
.modal.modal--full { width: 100%; max-width: 100%; }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: none; } }
.modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--border-soft); flex-shrink: 0;
}
.modal__title { font-size: 16px; font-weight: 650; }
.modal__body { padding: 20px; overflow-y: auto; overflow-x: hidden; flex: 1; }
.modal__foot { padding: 14px 20px; border-top: 1px solid var(--border-soft); display: flex; gap: 10px; justify-content: flex-end; flex-shrink: 0; }

.modal-close { width: 30px; height: 30px; border-radius: 7px; border: none; background: transparent; color: var(--text-2); font-size: 20px; display: grid; place-items: center; }
.modal-close:hover { background: var(--bg-hover); color: var(--text); }

/* confirm dialog (centered) */
.confirm-layer { align-items: center; justify-content: center; }
.confirm {
  width: 380px; max-width: 90vw; background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-pop); animation: popIn .15s ease; height: auto;
}
.confirm__title { font-size: 16px; font-weight: 650; margin-bottom: 8px; }
.confirm__msg { font-size: 13.5px; color: var(--text-2); margin-bottom: 20px; line-height: 1.5; }
.confirm__actions { display: flex; gap: 10px; justify-content: flex-end; }

/* form fields */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12.5px; font-weight: 550; color: var(--text-2); margin-bottom: 6px; }
.field .hint { font-size: 11.5px; color: var(--text-3); margin-top: 5px; }
.input, .select, .textarea {
  width: 100%; padding: 9px 11px; background: var(--bg-sunken); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-size: 13.5px; outline: none; transition: border-color var(--speed);
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); }
.textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.checkbox-row { display: flex; align-items: center; gap: 8px; }
.checkbox-row input { width: 16px; height: 16px; accent-color: var(--accent); }
.checkbox-row label { margin: 0; font-size: 13px; color: var(--text); cursor: pointer; }

/* =========================================================
   TOASTS
   ========================================================= */
.toast-host { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 2000; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  background: var(--bg-elevated); border: 1px solid var(--border); border-left: 3px solid var(--text-3);
  border-radius: var(--radius-sm); padding: 11px 16px; font-size: 13px; font-weight: 500; color: var(--text);
  box-shadow: var(--shadow-pop); animation: toastIn .2s ease; max-width: 90vw;
}
.toast.is-success { border-left-color: var(--ok); }
.toast.is-error { border-left-color: var(--accent); }
.toast.is-info { border-left-color: var(--warn); }
.toast.leaving { animation: toastOut .2s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-10px); } }

/* =========================================================
   LOADING
   ========================================================= */
.loading-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 3000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; backdrop-filter: blur(2px); }
.spinner { width: 42px; height: 42px; border: 3px solid rgba(255,255,255,.18); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-overlay__msg { color: #fff; font-size: 13px; font-weight: 500; }

/* =========================================================
   WELCOME / SIGN-IN SCREEN
   ========================================================= */
.welcome {
  position: fixed; inset: 0; z-index: 1500;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; overflow-y: auto;
  background:
    radial-gradient(125% 90% at 50% -10%, var(--accent-soft), transparent 55%),
    var(--bg-sunken);
}
.welcome__loading { display: grid; place-items: center; }
.welcome__loading .spinner { border-color: var(--border); border-top-color: var(--accent); }

/* two states: boot spinner (default) → sign-in card (.is-ready) */
.welcome .welcome__card { display: none; }
.welcome.is-ready .welcome__loading { display: none; }
.welcome.is-ready .welcome__card { display: flex; }

.welcome__card {
  flex-direction: column; align-items: center; text-align: center;
  width: 100%; max-width: 440px;
  background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 18px;
  padding: 40px 34px 30px;
  box-shadow: 0 24px 70px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.16);
  animation: welcomeIn .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes welcomeIn { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }

.welcome__brand { display: flex; align-items: center; gap: 11px; margin-bottom: 26px; }
.welcome__mark {
  width: 40px; height: 40px; border-radius: 11px; background: var(--accent); color: var(--accent-text);
  display: grid; place-items: center; font-size: 19px; box-shadow: 0 6px 18px var(--accent-soft);
}
.welcome__wordmark { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }

.welcome__title { font-size: 23px; font-weight: 750; line-height: 1.25; letter-spacing: -.02em; margin-bottom: 12px; }
.welcome__subtitle { font-size: 13.5px; color: var(--text-2); line-height: 1.55; max-width: 360px; margin-bottom: 26px; }

.welcome__features {
  list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  width: 100%; margin-bottom: 28px; text-align: left;
}
.welcome__feature { display: flex; align-items: center; gap: 10px; min-width: 0; }
.welcome__feature-ico {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 16px;
  background: var(--bg-sunken); border: 1px solid var(--border-soft);
}
.welcome__feature div { display: flex; flex-direction: column; min-width: 0; }
.welcome__feature b { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.welcome__feature span { font-size: 11px; color: var(--text-3); }

/* Google sign-in button (standard white branding — works in both themes) */
.gbtn {
  position: relative; width: 100%;
  display: flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 18px;
  background: #fff; color: #1f1f1f;
  border: 1px solid #dadce0; border-radius: 10px;
  font-size: 14.5px; font-weight: 600;
  transition: box-shadow var(--speed), background var(--speed);
}
.gbtn:hover { background: #f8f9fa; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.gbtn:active { background: #f1f3f4; }
.gbtn:disabled { cursor: default; }
.gbtn__inner { display: inline-flex; align-items: center; gap: 11px; }
.gbtn__logo { flex-shrink: 0; }
.gbtn__spinner {
  display: none; position: absolute; width: 20px; height: 20px;
  border: 2.5px solid rgba(0,0,0,.18); border-top-color: #1f1f1f; border-radius: 50%;
  animation: spin .7s linear infinite;
}
.gbtn.is-loading .gbtn__inner { visibility: hidden; }
.gbtn.is-loading .gbtn__spinner { display: block; }

.welcome__fineprint { font-size: 11.5px; color: var(--text-3); margin-top: 16px; }

@media (max-width: 480px) {
  .welcome { padding: 16px; }
  .welcome__card { padding: 32px 22px 26px; border-radius: 16px; }
  .welcome__title { font-size: 20px; }
  .welcome__features { grid-template-columns: 1fr; gap: 10px; }
}

/* =========================================================
   MOBILE
   ========================================================= */
.mobile-backdrop { display: none; }
@media (max-width: 820px) {
  .app, .app.is-collapsed { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; width: 280px; transform: translateX(-100%);
    transition: transform .24s cubic-bezier(.2,.8,.2,1); box-shadow: 4px 0 30px rgba(0,0,0,.3);
  }
  .app.drawer-open .sidebar { transform: none; }
  .mobile-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 35; opacity: 0; pointer-events: none; transition: opacity .2s; }
  .app.drawer-open .mobile-backdrop { opacity: 1; pointer-events: auto; }
  .hamburger { display: grid; }
  #collapseBtn, .expand-sidebar { display: none !important; }
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar__name { max-width: 40vw; font-size: 15px; }
  .topbar__search { width: auto; flex: 1; min-width: 0; }
  .split-add__main .btn__label { display: none; }
  .split-add__main { padding: 8px 10px; }
  .grid-wrap { padding: 0 14px calc(var(--statusbar-h) + 14px); }
  #viewBar[hidden] ~ #videoGrid { padding-top: 14px; }
  .video-grid { grid-template-columns: 1fr; }
  .view-bar { margin: 0 -14px 12px; padding: 14px 14px 12px; }
  .modal { width: 100vw; }
}

/* =========================================================
   ANIMATION LAYER  (added — micro-interactions & motion)
   ========================================================= */
:root {
  --spring: cubic-bezier(.2, .9, .25, 1.05);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

/* smooth theme changes */
body { transition: background .45s var(--ease-out), color .45s var(--ease-out); }

/* ---- keyframes ---- */
@keyframes a-cardIn   { from { opacity:0; transform:translateY(16px) scale(.97);} to { opacity:1; transform:none; } }
@keyframes a-cardOut  { to   { opacity:0; transform:scale(.9); filter:blur(2px); } }
@keyframes a-listIn   { from { opacity:0; transform:translateX(-10px); } to { opacity:1; transform:none; } }
@keyframes a-riseIn   { from { opacity:0; transform:translateY(10px); }  to { opacity:1; transform:none; } }
@keyframes a-floatArt { 0%,100%{ transform:translateY(0) rotate(0);} 50%{ transform:translateY(-9px) rotate(-3deg);} }
@keyframes a-ripple   { to { transform:scale(2.4); opacity:0; } }
@keyframes a-pulseDot { 0%{box-shadow:0 0 0 0 var(--accent-soft);} 70%{box-shadow:0 0 0 7px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }
@keyframes a-markPulse{ 0%,100%{ transform:scale(1);} 45%{ transform:scale(1.12);} }
@keyframes a-pop      { 0%{transform:scale(.4);opacity:0;} 60%{transform:scale(1.12);} 100%{transform:scale(1);opacity:1;} }
@keyframes a-chipIn   { from{opacity:0;} to{opacity:1;} }

/* ---- app / brand ---- */
.app { animation: a-riseIn .4s var(--ease-out) both; }
.brand__mark { animation: a-markPulse 4.5s var(--ease-out) infinite; }

/* ---- sidebar list items: active accent bar + hover ---- */
/* entrance stagger only runs once (first paint) — gated behind .a-stagger,
   added by animations.js on the first render, so switching lists does NOT
   re-animate the whole sidebar. */
.list-container.a-stagger > .list-item { animation: a-listIn .38s var(--ease-out) both; }
.list-container.a-stagger > .list-item:nth-child(1){animation-delay:.03s}
.list-container.a-stagger > .list-item:nth-child(2){animation-delay:.07s}
.list-container.a-stagger > .list-item:nth-child(3){animation-delay:.11s}
.list-container.a-stagger > .list-item:nth-child(4){animation-delay:.15s}
.list-container.a-stagger > .list-item:nth-child(5){animation-delay:.19s}
.list-container.a-stagger > .list-item:nth-child(6){animation-delay:.23s}
.list-container.a-stagger > .list-item:nth-child(7){animation-delay:.27s}
.list-container.a-stagger > .list-item:nth-child(n+8){animation-delay:.30s}
.list-item:hover { transform: translateX(2px); }
.list-item::before {
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .22s var(--spring);
}
.list-item.is-active::before { transform:scaleX(1); }
.list-item__emoji { transition: transform var(--speed); }
.list-item:hover .list-item__emoji { transform: scale(1.16) rotate(-6deg); }
.create-list-btn:active { transform: scale(.97); }
.create-list-btn svg { transition: transform var(--speed); }
.create-list-btn:hover svg { transform: rotate(90deg); }
.user-chip { transition: transform var(--speed); }
.user-chip:hover { transform: scale(1.08); }

/* ---- buttons: press + ripple ---- */
.btn, .icon-btn, .vb-chip, .create-list-btn, .modal-close, .signin-btn { position: relative; overflow: hidden; }
.btn:active, .signin-btn:active { transform: scale(.96); }
.icon-btn:active { transform: scale(.9); }
.vb-chip:active { transform: scale(.95); }
.btn--primary:hover { box-shadow: 0 4px 16px var(--accent-soft); }
.a-ripple {
  position:absolute; border-radius:50%; background:rgba(255,255,255,.5);
  transform:scale(0); pointer-events:none; animation:a-ripple .6s var(--ease-out) forwards;
}
.a-ripple--dark { background: color-mix(in srgb, var(--text-3) 55%, transparent); }
.split-add__caret[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ---- topbar: search focus glow + active-list pop ---- */
.topbar__search:focus-within { box-shadow: 0 0 0 3px var(--accent-soft); }
.topbar__emoji.a-pop, .badge.a-pop { animation: a-pop .4s var(--spring); }

/* ---- video grid ---- */
/* Card stagger runs ONCE on the first grid paint (gated behind .a-stagger).
   On later renders (switching lists, data updates) animations.js adds .a-fade
   instead, so the grid gently fades as a whole rather than re-cascading every
   card each time you change lists. */
@keyframes a-gridFade { from { opacity:.35; } to { opacity:1; } }
.video-grid.a-fade { animation: a-gridFade .3s var(--ease-out); }
.video-grid.a-stagger > .vcard { animation: a-cardIn .5s var(--ease-out) both; will-change: transform; }
.video-grid.a-stagger > .vcard:nth-child(1){animation-delay:.02s}
.video-grid.a-stagger > .vcard:nth-child(2){animation-delay:.06s}
.video-grid.a-stagger > .vcard:nth-child(3){animation-delay:.10s}
.video-grid.a-stagger > .vcard:nth-child(4){animation-delay:.14s}
.video-grid.a-stagger > .vcard:nth-child(5){animation-delay:.18s}
.video-grid.a-stagger > .vcard:nth-child(6){animation-delay:.22s}
.video-grid.a-stagger > .vcard:nth-child(7){animation-delay:.26s}
.video-grid.a-stagger > .vcard:nth-child(8){animation-delay:.30s}
.video-grid.a-stagger > .vcard:nth-child(n+9){animation-delay:.34s}
.vcard { transition: border-color .2s, box-shadow .25s, transform .25s var(--ease-out); }
.vcard:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,.22); }
.vcard.a-removing { animation: a-cardOut .32s var(--ease-out) forwards; pointer-events:none; }
.vcard__thumb img, .vchan__avatar { transition: transform .5s var(--ease-out); }
.vcard:hover .vcard__thumb img { transform: scale(1.07); }
.vcard--channel:hover .vchan__avatar { transform: scale(1.06); }
.vcard__actions { transform: translateY(-4px); transition: opacity .22s, transform .22s var(--ease-out); }
.vcard:hover .vcard__actions, .vcard.has-note .vcard__actions { transform: none; }
.vcard__abtn { transition: background var(--speed), transform var(--speed); }
.vcard__abtn:hover { transform: scale(1.12); }
.vcard__abtn.has-note { animation: a-pulseDot 2.6s ease-out infinite; }

/* ---- view bar chips ---- */
.vb-chip.is-active { animation: a-pop .35s var(--spring); }

/* ---- empty state ---- */
.grid-empty { animation: a-riseIn .5s var(--ease-out) both; }
.grid-empty__art { display:inline-block; animation: a-floatArt 3.6s ease-in-out infinite; }
.grid-empty__hint { animation: a-riseIn .5s var(--ease-out) .12s both; }

/* ---- status bar: chip fade-in stagger + gear spin + hover ---- */
.status-chip { animation: a-chipIn .5s ease both; transition: background var(--speed); }
.status-chip:hover { background: rgba(255,255,255,.12); }
.status-chip:nth-child(1){animation-delay:.04s}.status-chip:nth-child(2){animation-delay:.10s}
.status-chip:nth-child(3){animation-delay:.16s}.status-chip:nth-child(4){animation-delay:.22s}
.status-chip:nth-child(5){animation-delay:.28s}.status-chip:nth-child(6){animation-delay:.34s}
.status-chip:nth-child(n+7){animation-delay:.40s}
.statusbar__gear { transition: opacity var(--speed), transform .35s var(--ease-out); }
.statusbar__gear:hover { transform: rotate(60deg); }

/* ---- popover / drawer / toast easing bumps ---- */
.popover { transform-origin: bottom left; }
.modal { animation: slideIn .28s var(--spring); }
.modal-overlay { backdrop-filter: blur(2px); }
.modal-close { transition: background var(--speed), color var(--speed), transform var(--speed); }
.modal-close:hover { transform: rotate(90deg); }
.modal__body .field { animation: a-riseIn .4s var(--ease-out) both; }
.modal__body .field:nth-child(2){animation-delay:.05s}
.modal__body .field:nth-child(3){animation-delay:.10s}
.toast { animation: toastIn .28s var(--spring); }

/* ---- welcome: feature stagger + hover lift ---- */
.welcome__mark { animation: a-markPulse 4s var(--ease-out) infinite; }
.welcome__feature { animation: a-riseIn .5s var(--ease-out) both; }
.welcome__feature:nth-child(1){animation-delay:.24s}.welcome__feature:nth-child(2){animation-delay:.31s}
.welcome__feature:nth-child(3){animation-delay:.38s}.welcome__feature:nth-child(4){animation-delay:.45s}
.welcome__feature-ico { transition: transform var(--speed); }
.welcome__feature:hover .welcome__feature-ico { transform: translateY(-3px) scale(1.06); }
.gbtn:active { transform: scale(.98); }

/* ---- respect reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  *:not(.spinner):not(.gbtn__spinner) {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .06s !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   CENTERED POPUP MODALS  (replaces the right-edge drawer)
   The JS markup is unchanged — only the presentation switches from a
   full-height side drawer to a centered, rounded dialog that scales in.
   ========================================================= */
@keyframes a-modalIn  { from { opacity:0; transform: translateY(14px) scale(.955); } to { opacity:1; transform:none; } }
@keyframes a-modalOut { to  { opacity:0; transform: translateY(8px) scale(.97); } }

.modal-overlay {
  justify-content: center;
  align-items: center;
  padding: 28px;
}
.modal-overlay.is-closing { animation: fadeIn .18s ease reverse forwards; }

.modal {
  width: 480px;
  max-width: 96vw;
  height: auto;
  max-height: 88vh;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.28);
  animation: a-modalIn .28s var(--spring);
  transform-origin: center center;
}
.modal.is-closing { animation: a-modalOut .18s var(--ease-out) forwards; }
.modal--wide { width: 880px; }
.modal--full { width: min(1120px, 96vw); height: 88vh; }

/* regular dialogs hug their content (no forced growth / phantom scrollbar);
   wide & full keep a filling, scrollable body. */
.modal:not(.modal--full):not(.modal--wide) .modal__body { flex: 0 1 auto; }
.modal:not(.modal--full):not(.modal--wide) .modal__body .field:last-child { margin-bottom: 0; }

/* head/body/foot: the head gets a subtle sunken tint so the dialog reads as a
   real card; body scrolls within max-height. */
.modal__head { background: var(--bg-elevated); }
.modal__body { background: var(--bg); }
.modal__foot { background: var(--bg-elevated); }

/* small screens: near-full-width sheet, still centered */
@media (max-width: 560px) {
  .modal-overlay { padding: 12px; align-items: flex-end; }
  .modal, .modal--wide, .modal--full {
    width: 100%; max-width: 100%; height: auto; max-height: 92vh;
    border-radius: 18px;
  }
  @keyframes a-modalIn { from { opacity:0; transform: translateY(24px); } to { opacity:1; transform:none; } }
}

/* =========================================================
   THEMES  — status bar gets its own tokens so each theme can keep it
   calm (a quiet footer) instead of a bright accent band.
   ========================================================= */
:root {
  --statusbar-bg: var(--accent);
  --statusbar-text: var(--accent-text);
  --statusbar-border: rgba(255,255,255,.16);
}

/* status bar now reads its own tokens */
.statusbar { background: var(--statusbar-bg); color: var(--statusbar-text); }
.status-chip { border-right: 1px solid var(--statusbar-border); }
.status-chip:hover { background: color-mix(in srgb, var(--statusbar-text) 10%, transparent); }
.statusbar__gear { color: var(--statusbar-text); }
.statusbar__gear:hover { background: color-mix(in srgb, var(--statusbar-text) 12%, transparent); }

/* --- classic themes keep the bright accent status bar (unchanged look) --- */
[data-theme="dark"]  { --statusbar-bg: var(--accent); --statusbar-text: var(--accent-text); --statusbar-border: rgba(255,255,255,.16); }
[data-theme="light"] { --statusbar-bg: var(--accent); --statusbar-text: var(--accent-text); --statusbar-border: rgba(255,255,255,.22); }

/* --- Midnight (deep indigo, calm bar) --- */
[data-theme="midnight"] {
  --bg:oklch(.19 .03 265); --bg-sunken:oklch(.16 .03 265); --bg-elevated:oklch(.23 .035 265);
  --bg-hover:oklch(.28 .04 265); --bg-active:oklch(.33 .05 265);
  --border:oklch(.34 .04 265); --border-soft:oklch(.27 .035 265);
  --text:oklch(.95 .01 265); --text-2:oklch(.74 .03 265); --text-3:oklch(.58 .03 265);
  --accent:oklch(.66 .16 265); --accent-text:oklch(.99 0 0); --accent-soft:oklch(.55 .14 265/.24);
  --warn:oklch(.75 .14 75); --ok:oklch(.75 .13 160); --drop:oklch(.66 .16 265/.9);
  --statusbar-bg:oklch(.23 .035 265); --statusbar-text:oklch(.80 .03 265); --statusbar-border:oklch(.31 .04 265);
  color-scheme:dark;
}
/* --- Graphite (neutral, teal accent) --- */
[data-theme="graphite"] {
  --bg:oklch(.20 0 0); --bg-sunken:oklch(.16 0 0); --bg-elevated:oklch(.24 0 0);
  --bg-hover:oklch(.29 0 0); --bg-active:oklch(.34 0 0);
  --border:oklch(.36 0 0); --border-soft:oklch(.28 0 0);
  --text:oklch(.96 0 0); --text-2:oklch(.74 0 0); --text-3:oklch(.58 0 0);
  --accent:oklch(.72 .12 190); --accent-text:oklch(.16 0 0); --accent-soft:oklch(.72 .12 190/.20);
  --warn:oklch(.75 .14 75); --ok:oklch(.75 .13 160); --drop:oklch(.72 .12 190/.9);
  --statusbar-bg:oklch(.24 0 0); --statusbar-text:oklch(.80 0 0); --statusbar-border:oklch(.33 0 0);
  color-scheme:dark;
}
/* --- Forest (calm green) --- */
[data-theme="forest"] {
  --bg:oklch(.19 .02 155); --bg-sunken:oklch(.16 .02 155); --bg-elevated:oklch(.23 .025 155);
  --bg-hover:oklch(.28 .03 155); --bg-active:oklch(.33 .04 155);
  --border:oklch(.34 .03 150); --border-soft:oklch(.27 .025 150);
  --text:oklch(.95 .01 150); --text-2:oklch(.74 .02 150); --text-3:oklch(.58 .02 150);
  --accent:oklch(.72 .14 150); --accent-text:oklch(.15 .02 150); --accent-soft:oklch(.60 .13 150/.22);
  --warn:oklch(.78 .14 80); --ok:oklch(.78 .14 155); --drop:oklch(.72 .14 150/.9);
  --statusbar-bg:oklch(.22 .03 155); --statusbar-text:oklch(.82 .03 150); --statusbar-border:oklch(.30 .03 150);
  color-scheme:dark;
}
/* --- Dusk (warm amber) --- */
[data-theme="dusk"] {
  --bg:oklch(.20 .015 40); --bg-sunken:oklch(.17 .015 40); --bg-elevated:oklch(.24 .02 40);
  --bg-hover:oklch(.29 .025 40); --bg-active:oklch(.34 .03 40);
  --border:oklch(.35 .025 40); --border-soft:oklch(.28 .02 40);
  --text:oklch(.96 .01 60); --text-2:oklch(.76 .02 50); --text-3:oklch(.60 .02 45);
  --accent:oklch(.76 .13 55); --accent-text:oklch(.18 .02 50); --accent-soft:oklch(.70 .12 55/.22);
  --warn:oklch(.80 .14 85); --ok:oklch(.76 .13 160); --drop:oklch(.76 .13 55/.9);
  --statusbar-bg:oklch(.24 .025 40); --statusbar-text:oklch(.82 .02 50); --statusbar-border:oklch(.32 .025 40);
  color-scheme:dark;
}
/* --- Dawn (soft warm light) --- */
[data-theme="dawn"] {
  --bg:oklch(.99 .008 70); --bg-sunken:oklch(.965 .01 70); --bg-elevated:oklch(1 0 0);
  --bg-hover:oklch(.95 .012 60); --bg-active:oklch(.92 .015 55);
  --border:oklch(.88 .012 60); --border-soft:oklch(.93 .01 65);
  --text:oklch(.28 .02 50); --text-2:oklch(.48 .02 50); --text-3:oklch(.64 .02 55);
  --accent:oklch(.62 .16 40); --accent-text:oklch(.99 0 0); --accent-soft:oklch(.62 .16 40/.12);
  --warn:oklch(.62 .14 65); --ok:oklch(.58 .13 155); --drop:oklch(.62 .16 40/.85);
  --statusbar-bg:oklch(.94 .012 60); --statusbar-text:oklch(.42 .02 50); --statusbar-border:oklch(.87 .015 60);
  color-scheme:light;
}
/* --- Mist (cool light) --- */
[data-theme="mist"] {
  --bg:oklch(.99 .004 250); --bg-sunken:oklch(.96 .006 250); --bg-elevated:oklch(1 0 0);
  --bg-hover:oklch(.95 .008 250); --bg-active:oklch(.92 .01 250);
  --border:oklch(.88 .008 250); --border-soft:oklch(.93 .006 250);
  --text:oklch(.26 .02 250); --text-2:oklch(.46 .02 250); --text-3:oklch(.62 .02 250);
  --accent:oklch(.58 .14 230); --accent-text:oklch(.99 0 0); --accent-soft:oklch(.58 .14 230/.12);
  --warn:oklch(.62 .14 65); --ok:oklch(.56 .13 160); --drop:oklch(.58 .14 230/.85);
  --statusbar-bg:oklch(.94 .008 250); --statusbar-text:oklch(.42 .02 250); --statusbar-border:oklch(.87 .008 250);
  color-scheme:light;
}

/* =========================================================
   THEME PICKER  (settings popover)
   ========================================================= */
.theme-picker {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 4px 9px 10px;
}
.theme-sw {
  position: relative; height: 46px; border-radius: 9px; overflow: hidden; padding: 0;
  border: 1.5px solid var(--border-soft); cursor: pointer;
  transition: transform var(--speed), border-color var(--speed), box-shadow var(--speed);
}
.theme-sw:hover { transform: translateY(-2px); border-color: var(--text-3); }
.theme-sw.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.theme-sw__row { display: flex; height: 100%; width: 100%; }
.theme-sw__bg { flex: 1; }
.theme-sw__accent { width: 12px; }
.theme-sw__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 9px; }
.theme-sw__check {
  position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); color: var(--accent-text); font-size: 10px; font-weight: 700;
  display: none; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.theme-sw.is-active .theme-sw__check { display: grid; animation: a-pop .3s var(--spring); }

/* Background tint toggle: when OFF (default) surfaces are neutral grey; when ON
   the active theme's hue tints the backgrounds. Driven by --tint (0/1) so a
   single attribute flips every surface via calc() on the chroma channel. */
:root { --tint: 0; }
[data-tint="on"] { --tint: 1; }

/* the toggle switch UI */
.tint-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 10px 10px; }
.tint-row__label { display:flex; flex-direction:column; gap:1px; }
.tint-row__label b { font-size:12.5px; font-weight:600; color:var(--text); }
.tint-row__label span { font-size:11px; color:var(--text-3); }
.tgl { position:relative; width:38px; height:22px; border-radius:20px; background:var(--bg-active); border:1px solid var(--border); flex-shrink:0; transition:background var(--speed), border-color var(--speed); }
.tgl::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--text-2); transition:transform .2s var(--spring), background var(--speed); }
.tgl.is-on { background:var(--accent); border-color:var(--accent); }
.tgl.is-on::after { transform:translateX(16px); background:var(--accent-text); }

/* =========================================================
   THEME FAMILIES × MODE  (family-<mode> — the applied data-theme)
   ========================================================= */
/* swatch now previews BOTH variants (dark|light split + accent bar) */
.theme-sw__split { position:absolute; inset:0; }
.theme-sw__accent { position:absolute; right:0; top:0; bottom:0; width:12px; }

/* Appearance mode segmented control */
.mode-seg { display:flex; gap:5px; padding:2px 9px 8px; }
.mode-seg button {
  flex:1; height:30px; border-radius:7px; border:1px solid var(--border);
  background:var(--bg-elevated); color:var(--text-2); font-size:12px; font-weight:550;
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  transition:background var(--speed), color var(--speed), border-color var(--speed), transform var(--speed);
}
.mode-seg button:hover { background:var(--bg-hover); color:var(--text); }
.mode-seg button:active { transform:scale(.96); }
.mode-seg button.is-active { background:var(--accent); color:var(--accent-text); border-color:var(--accent); }

/* ---- CLASSIC (keeps the bright accent status bar) ---- */
[data-theme="classic-dark"] {
  --bg:oklch(.18 .006 260); --bg-sunken:oklch(.15 .006 260); --bg-elevated:oklch(.22 .007 260);
  --bg-hover:oklch(.27 .008 260); --bg-active:oklch(.31 .012 260);
  --border:oklch(.30 .008 260); --border-soft:oklch(.25 .007 260);
  --text:oklch(.95 .004 260); --text-2:oklch(.72 .008 260); --text-3:oklch(.56 .008 260);
  --accent:oklch(.62 .20 18); --accent-text:oklch(.99 0 0); --accent-soft:oklch(.40 .12 18/.22);
  --warn:oklch(.72 .16 75); --ok:oklch(.72 .15 155); --drop:oklch(.62 .20 18/.9);
  --statusbar-bg:var(--accent); --statusbar-text:var(--accent-text); --statusbar-border:rgba(255,255,255,.16);
  color-scheme:dark;
}
[data-theme="classic-light"] {
  --bg:oklch(.99 .002 260); --bg-sunken:oklch(.965 .003 260); --bg-elevated:oklch(1 0 0);
  --bg-hover:oklch(.95 .004 260); --bg-active:oklch(.92 .006 260);
  --border:oklch(.89 .005 260); --border-soft:oklch(.93 .004 260);
  --text:oklch(.22 .01 260); --text-2:oklch(.45 .01 260); --text-3:oklch(.62 .01 260);
  --accent:oklch(.58 .21 18); --accent-text:oklch(.99 0 0); --accent-soft:oklch(.58 .21 18/.12);
  --warn:oklch(.60 .15 65); --ok:oklch(.55 .14 155); --drop:oklch(.58 .21 18/.85);
  --statusbar-bg:var(--accent); --statusbar-text:var(--accent-text); --statusbar-border:rgba(255,255,255,.22);
  color-scheme:light;
}

/* ---- RED PLUS (improved take on Classic red — richer accent, refined
   gradient status bar instead of a flat eye-searing band) ---- */
[data-theme="redplus-dark"] {
  --bg:oklch(.185 calc(.022 * var(--tint)) 20); --bg-sunken:oklch(.155 calc(.02 * var(--tint)) 20); --bg-elevated:oklch(.225 calc(.026 * var(--tint)) 20);
  --bg-hover:oklch(.275 calc(.032 * var(--tint)) 20); --bg-active:oklch(.32 calc(.04 * var(--tint)) 20);
  --border:oklch(.33 calc(.04 * var(--tint)) 20); --border-soft:oklch(.26 calc(.03 * var(--tint)) 20);
  --text:oklch(.96 .008 30); --text-2:oklch(.74 .02 25); --text-3:oklch(.58 .025 22);
  --accent:oklch(.64 .245 24); --accent-text:oklch(.99 0 0); --accent-soft:oklch(.58 .20 24/.24);
  --warn:oklch(.80 .15 80); --ok:oklch(.76 .14 158); --drop:oklch(.64 .245 24/.9);
  --statusbar-bg:linear-gradient(90deg, oklch(.24 .05 22), oklch(.30 .075 24)); --statusbar-text:oklch(.86 .03 25); --statusbar-border:oklch(.33 .055 22);
  color-scheme:dark;
}
[data-theme="redplus-light"] {
  --bg:oklch(.99 calc(.01 * var(--tint)) 25); --bg-sunken:oklch(.97 calc(.012 * var(--tint)) 25); --bg-elevated:oklch(1 calc(0 * var(--tint)) 0);
  --bg-hover:oklch(.955 calc(.016 * var(--tint)) 25); --bg-active:oklch(.925 calc(.022 * var(--tint)) 25);
  --border:oklch(.88 calc(.016 * var(--tint)) 25); --border-soft:oklch(.93 calc(.012 * var(--tint)) 25);
  --text:oklch(.26 .03 25); --text-2:oklch(.46 .04 25); --text-3:oklch(.62 .04 25);
  --accent:oklch(.58 .235 25); --accent-text:oklch(.99 0 0); --accent-soft:oklch(.58 .235 25/.12);
  --warn:oklch(.62 .15 70); --ok:oklch(.56 .14 158); --drop:oklch(.58 .235 25/.85);
  --statusbar-bg:oklch(.945 .022 25); --statusbar-text:oklch(.43 .05 25); --statusbar-border:oklch(.87 .024 25);
  color-scheme:light;
}

/* ---- INDIGO ---- */
[data-theme="indigo-dark"] {
  --bg:oklch(.185 calc(.04 * var(--tint)) 272); --bg-sunken:oklch(.155 calc(.04 * var(--tint)) 272); --bg-elevated:oklch(.225 calc(.05 * var(--tint)) 272);
  --bg-hover:oklch(.28 calc(.065 * var(--tint)) 272); --bg-active:oklch(.33 calc(.08 * var(--tint)) 272);
  --border:oklch(.35 calc(.07 * var(--tint)) 272); --border-soft:oklch(.27 calc(.05 * var(--tint)) 272);
  --text:oklch(.95 .015 275); --text-2:oklch(.75 .04 275); --text-3:oklch(.60 .05 275);
  --accent:oklch(.64 .21 274); --accent-text:oklch(.99 0 0); --accent-soft:oklch(.60 .19 274/.28);
  --warn:oklch(.78 .15 78); --ok:oklch(.76 .14 160); --drop:oklch(.64 .21 274/.9);
  --statusbar-bg:linear-gradient(90deg, oklch(.26 .06 272), oklch(.31 .09 274)); --statusbar-text:oklch(.86 .04 275); --statusbar-border:oklch(.34 .08 274);
  color-scheme:dark;
}
[data-theme="indigo-light"] {
  --bg:oklch(.985 calc(.012 * var(--tint)) 275); --bg-sunken:oklch(.965 calc(.016 * var(--tint)) 275); --bg-elevated:oklch(1 calc(0 * var(--tint)) 0);
  --bg-hover:oklch(.95 calc(.022 * var(--tint)) 275); --bg-active:oklch(.92 calc(.03 * var(--tint)) 275);
  --border:oklch(.88 calc(.022 * var(--tint)) 275); --border-soft:oklch(.93 calc(.016 * var(--tint)) 275);
  --text:oklch(.25 .05 275); --text-2:oklch(.46 .05 275); --text-3:oklch(.62 .05 275);
  --accent:oklch(.54 .22 275); --accent-text:oklch(.99 0 0); --accent-soft:oklch(.54 .22 275/.13);
  --warn:oklch(.62 .14 65); --ok:oklch(.56 .13 160); --drop:oklch(.54 .22 275/.85);
  --statusbar-bg:oklch(.945 .022 275); --statusbar-text:oklch(.42 .06 275); --statusbar-border:oklch(.87 .024 275);
  color-scheme:light;
}

/* ---- GRAPHITE (slate + electric teal) ---- */
[data-theme="graphite-dark"] {
  --bg:oklch(.195 calc(.012 * var(--tint)) 210); --bg-sunken:oklch(.16 calc(.012 * var(--tint)) 210); --bg-elevated:oklch(.235 calc(.014 * var(--tint)) 210);
  --bg-hover:oklch(.285 calc(.018 * var(--tint)) 205); --bg-active:oklch(.335 calc(.022 * var(--tint)) 205);
  --border:oklch(.355 calc(.02 * var(--tint)) 205); --border-soft:oklch(.275 calc(.015 * var(--tint)) 205);
  --text:oklch(.96 .006 210); --text-2:oklch(.75 .012 205); --text-3:oklch(.59 .015 205);
  --accent:oklch(.74 .16 195); --accent-text:oklch(.15 .02 210); --accent-soft:oklch(.68 .15 195/.24);
  --warn:oklch(.78 .15 78); --ok:oklch(.76 .14 160); --drop:oklch(.74 .16 195/.9);
  --statusbar-bg:linear-gradient(90deg, oklch(.235 .018 205), oklch(.29 .03 200)); --statusbar-text:oklch(.84 .02 205); --statusbar-border:oklch(.34 .022 205);
  color-scheme:dark;
}
[data-theme="graphite-light"] {
  --bg:oklch(.98 calc(.004 * var(--tint)) 200); --bg-sunken:oklch(.955 calc(.006 * var(--tint)) 200); --bg-elevated:oklch(1 calc(0 * var(--tint)) 0);
  --bg-hover:oklch(.94 calc(.008 * var(--tint)) 200); --bg-active:oklch(.91 calc(.01 * var(--tint)) 200);
  --border:oklch(.87 calc(.008 * var(--tint)) 200); --border-soft:oklch(.925 calc(.006 * var(--tint)) 200);
  --text:oklch(.24 .01 205); --text-2:oklch(.45 .012 205); --text-3:oklch(.60 .014 205);
  --accent:oklch(.56 .13 195); --accent-text:oklch(.99 0 0); --accent-soft:oklch(.56 .13 195/.14);
  --warn:oklch(.62 .14 65); --ok:oklch(.56 .13 160); --drop:oklch(.56 .13 195/.85);
  --statusbar-bg:oklch(.93 .008 200); --statusbar-text:oklch(.40 .012 205); --statusbar-border:oklch(.86 .008 200);
  color-scheme:light;
}

/* ---- FOREST (rich emerald) ---- */
[data-theme="forest-dark"] {
  --bg:oklch(.185 calc(.03 * var(--tint)) 158); --bg-sunken:oklch(.155 calc(.028 * var(--tint)) 158); --bg-elevated:oklch(.225 calc(.034 * var(--tint)) 158);
  --bg-hover:oklch(.28 calc(.045 * var(--tint)) 156); --bg-active:oklch(.33 calc(.055 * var(--tint)) 156);
  --border:oklch(.34 calc(.05 * var(--tint)) 154); --border-soft:oklch(.27 calc(.038 * var(--tint)) 154);
  --text:oklch(.95 .015 150); --text-2:oklch(.75 .03 150); --text-3:oklch(.59 .035 150);
  --accent:oklch(.73 .18 152); --accent-text:oklch(.14 .03 152); --accent-soft:oklch(.65 .17 152/.24);
  --warn:oklch(.80 .15 82); --ok:oklch(.79 .16 155); --drop:oklch(.73 .18 152/.9);
  --statusbar-bg:linear-gradient(90deg, oklch(.24 .045 156), oklch(.30 .07 152)); --statusbar-text:oklch(.86 .04 150); --statusbar-border:oklch(.33 .05 154);
  color-scheme:dark;
}
[data-theme="forest-light"] {
  --bg:oklch(.985 calc(.014 * var(--tint)) 150); --bg-sunken:oklch(.965 calc(.018 * var(--tint)) 150); --bg-elevated:oklch(1 calc(0 * var(--tint)) 0);
  --bg-hover:oklch(.95 calc(.024 * var(--tint)) 150); --bg-active:oklch(.92 calc(.03 * var(--tint)) 150);
  --border:oklch(.88 calc(.024 * var(--tint)) 150); --border-soft:oklch(.93 calc(.016 * var(--tint)) 150);
  --text:oklch(.26 .04 150); --text-2:oklch(.45 .045 150); --text-3:oklch(.60 .045 150);
  --accent:oklch(.53 .15 152); --accent-text:oklch(.99 0 0); --accent-soft:oklch(.53 .15 152/.14);
  --warn:oklch(.62 .14 65); --ok:oklch(.56 .13 160); --drop:oklch(.53 .15 152/.85);
  --statusbar-bg:oklch(.945 .024 150); --statusbar-text:oklch(.40 .045 150); --statusbar-border:oklch(.87 .024 150);
  color-scheme:light;
}

/* ---- AMBER (warm gold) ---- */
[data-theme="amber-dark"] {
  --bg:oklch(.195 calc(.022 * var(--tint)) 45); --bg-sunken:oklch(.165 calc(.02 * var(--tint)) 45); --bg-elevated:oklch(.235 calc(.026 * var(--tint)) 45);
  --bg-hover:oklch(.285 calc(.034 * var(--tint)) 48); --bg-active:oklch(.335 calc(.042 * var(--tint)) 48);
  --border:oklch(.35 calc(.038 * var(--tint)) 48); --border-soft:oklch(.28 calc(.028 * var(--tint)) 48);
  --text:oklch(.96 .015 65); --text-2:oklch(.77 .03 55); --text-3:oklch(.61 .035 50);
  --accent:oklch(.77 .17 62); --accent-text:oklch(.18 .03 55); --accent-soft:oklch(.72 .16 62/.24);
  --warn:oklch(.82 .16 88); --ok:oklch(.77 .14 160); --drop:oklch(.77 .17 62/.9);
  --statusbar-bg:linear-gradient(90deg, oklch(.26 .035 48), oklch(.32 .06 55)); --statusbar-text:oklch(.87 .04 58); --statusbar-border:oklch(.34 .04 50);
  color-scheme:dark;
}
[data-theme="amber-light"] {
  --bg:oklch(.99 calc(.016 * var(--tint)) 75); --bg-sunken:oklch(.97 calc(.02 * var(--tint)) 70); --bg-elevated:oklch(1 calc(0 * var(--tint)) 0);
  --bg-hover:oklch(.955 calc(.026 * var(--tint)) 65); --bg-active:oklch(.925 calc(.032 * var(--tint)) 60);
  --border:oklch(.88 calc(.026 * var(--tint)) 65); --border-soft:oklch(.93 calc(.018 * var(--tint)) 68);
  --text:oklch(.28 .04 55); --text-2:oklch(.47 .045 55); --text-3:oklch(.62 .045 58);
  --accent:oklch(.63 .17 58); --accent-text:oklch(.99 0 0); --accent-soft:oklch(.63 .17 58/.14);
  --warn:oklch(.62 .14 65); --ok:oklch(.56 .13 160); --drop:oklch(.63 .17 58/.85);
  --statusbar-bg:oklch(.95 .026 65); --statusbar-text:oklch(.43 .045 55); --statusbar-border:oklch(.87 .026 65);
  color-scheme:light;
}

/* ---- OCEAN (vivid azure) ---- */
[data-theme="ocean-dark"] {
  --bg:oklch(.185 calc(.035 * var(--tint)) 240); --bg-sunken:oklch(.155 calc(.032 * var(--tint)) 240); --bg-elevated:oklch(.225 calc(.04 * var(--tint)) 240);
  --bg-hover:oklch(.28 calc(.055 * var(--tint)) 238); --bg-active:oklch(.33 calc(.068 * var(--tint)) 238);
  --border:oklch(.34 calc(.06 * var(--tint)) 236); --border-soft:oklch(.27 calc(.045 * var(--tint)) 236);
  --text:oklch(.95 .015 235); --text-2:oklch(.75 .035 235); --text-3:oklch(.59 .04 235);
  --accent:oklch(.68 .18 242); --accent-text:oklch(.14 .03 240); --accent-soft:oklch(.62 .17 242/.24);
  --warn:oklch(.80 .15 80); --ok:oklch(.77 .14 160); --drop:oklch(.68 .18 242/.9);
  --statusbar-bg:linear-gradient(90deg, oklch(.24 .05 238), oklch(.30 .08 240)); --statusbar-text:oklch(.86 .04 235); --statusbar-border:oklch(.33 .06 238);
  color-scheme:dark;
}
[data-theme="ocean-light"] {
  --bg:oklch(.99 calc(.006 * var(--tint)) 250); --bg-sunken:oklch(.965 calc(.01 * var(--tint)) 250); --bg-elevated:oklch(1 calc(0 * var(--tint)) 0);
  --bg-hover:oklch(.95 calc(.016 * var(--tint)) 250); --bg-active:oklch(.92 calc(.022 * var(--tint)) 250);
  --border:oklch(.88 calc(.016 * var(--tint)) 250); --border-soft:oklch(.93 calc(.01 * var(--tint)) 250);
  --text:oklch(.26 .035 245); --text-2:oklch(.46 .04 245); --text-3:oklch(.62 .04 245);
  --accent:oklch(.54 .19 245); --accent-text:oklch(.99 0 0); --accent-soft:oklch(.54 .19 245/.13);
  --warn:oklch(.62 .14 65); --ok:oklch(.56 .13 160); --drop:oklch(.54 .19 245/.85);
  --statusbar-bg:oklch(.945 .016 250); --statusbar-text:oklch(.42 .04 245); --statusbar-border:oklch(.87 .016 250);
  color-scheme:light;
}

/* ---- VIOLET (electric purple) ---- */
[data-theme="violet-dark"] {
  --bg:oklch(.185 calc(.035 * var(--tint)) 305); --bg-sunken:oklch(.155 calc(.032 * var(--tint)) 305); --bg-elevated:oklch(.225 calc(.042 * var(--tint)) 305);
  --bg-hover:oklch(.28 calc(.055 * var(--tint)) 305); --bg-active:oklch(.33 calc(.07 * var(--tint)) 305);
  --border:oklch(.34 calc(.06 * var(--tint)) 305); --border-soft:oklch(.27 calc(.045 * var(--tint)) 305);
  --text:oklch(.95 .015 305); --text-2:oklch(.75 .035 305); --text-3:oklch(.60 .045 305);
  --accent:oklch(.66 .24 310); --accent-text:oklch(.99 0 0); --accent-soft:oklch(.62 .21 310/.26);
  --warn:oklch(.80 .15 80); --ok:oklch(.77 .14 160); --drop:oklch(.66 .24 310/.9);
  --statusbar-bg:linear-gradient(90deg, oklch(.25 .06 305), oklch(.31 .10 312)); --statusbar-text:oklch(.87 .04 305); --statusbar-border:oklch(.34 .07 308);
  color-scheme:dark;
}
[data-theme="violet-light"] {
  --bg:oklch(.985 calc(.012 * var(--tint)) 310); --bg-sunken:oklch(.965 calc(.016 * var(--tint)) 310); --bg-elevated:oklch(1 calc(0 * var(--tint)) 0);
  --bg-hover:oklch(.95 calc(.024 * var(--tint)) 310); --bg-active:oklch(.92 calc(.032 * var(--tint)) 310);
  --border:oklch(.88 calc(.024 * var(--tint)) 310); --border-soft:oklch(.93 calc(.016 * var(--tint)) 310);
  --text:oklch(.26 .045 310); --text-2:oklch(.46 .05 310); --text-3:oklch(.62 .05 310);
  --accent:oklch(.55 .23 312); --accent-text:oklch(.99 0 0); --accent-soft:oklch(.55 .23 312/.13);
  --warn:oklch(.62 .14 65); --ok:oklch(.56 .13 160); --drop:oklch(.55 .23 312/.85);
  --statusbar-bg:oklch(.945 .024 310); --statusbar-text:oklch(.42 .05 310); --statusbar-border:oklch(.87 .024 310);
  color-scheme:light;
}

/* =========================================================
   TOUCH SCREENS — no hover, so hover-only controls are always shown
   ========================================================= */
@media (hover: none), (pointer: coarse) {
  .vcard__actions { opacity: 1; transform: none; }
  .vcard__abtn { width: 34px; height: 34px; }          /* easier to tap */
  .list-item__menu { opacity: 1; width: 30px; height: 30px; }
  .vgroup__handle { opacity: 1; }
}

/* ---------- search with no results ---------- */
.search-empty { padding: 60px 20px; }
.search-empty p { margin-bottom: 14px; }

/* ---------- offline notice ---------- */
.offline-banner {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--statusbar-h) + 14px); z-index: 1500;
  display: flex; align-items: center; gap: 9px; max-width: calc(100vw - 32px);
  padding: 9px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 550;
  background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border);
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
}
.offline-banner__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex-shrink: 0; }

/* ---------- keyboard shortcuts dialog ---------- */
.kbd-list { display: flex; flex-direction: column; gap: 4px; }
.kbd-row { display: flex; align-items: center; gap: 14px; padding: 9px 4px; border-bottom: 1px solid var(--border-soft); }
.kbd-row:last-child { border-bottom: none; }
.kbd-row__keys { min-width: 130px; color: var(--text-3); font-size: 12px; }
.kbd-row__desc { font-size: 13px; color: var(--text-2); }
kbd {
  display: inline-block; min-width: 22px; padding: 2px 7px; border-radius: 6px; text-align: center;
  font-family: var(--font-mono, monospace); font-size: 12px; color: var(--text);
  background: var(--bg-sunken); border: 1px solid var(--border); border-bottom-width: 2px;
}