:root {
  --bg: #0a0c12;
  --bg-2: #11141c;
  --panel: #161a24;
  --panel-2: #1d2230;
  --border: #242a3a;
  --border-soft: #1c2230;
  --text: #ecf0f7;
  --text-2: #b8bfd0;
  --muted: #7c849a;
  --muted-2: #4b5365;

  --accent: #2b9bff;
  --accent-2: #6fb8ff;
  --accent-glow: rgba(43,155,255,.20);

  --amber: #f59e0b;
  --amber-2: #fbbf24;
  --amber-glow: rgba(245,158,11,.20);

  --ok: #10b981;
  --ok-2: #34d399;
  --warn: #f59e0b;
  --danger: #f43f5e;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 20px 60px -20px rgba(0,0,0,.6);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.25);
  --transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background:
    radial-gradient(1000px 700px at 85% -200px, rgba(43,155,255,.10), transparent 60%),
    radial-gradient(800px 600px at -100px 110%, rgba(16,185,129,.05), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: "Inter", -apple-system, "SF Pro Display", system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1 {
  font-size: 28px; margin: 0 0 4px;
  font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.2;
}
h2 {
  font-size: 16px; margin: 36px 0 14px;
  font-weight: 600; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 8px;
  color: var(--text-2);
}
h2 i { width: 18px; height: 18px; color: var(--muted); }
h3 { font-size: 15px; margin: 0 0 2px; font-weight: 600; letter-spacing: -0.005em; }

p { margin: 0 0 8px; }

/* lucide icon defaults */
[data-lucide] {
  width: 16px; height: 16px;
  stroke-width: 2;
  flex-shrink: 0;
  vertical-align: -3px;
}
.inline-icon { width: 14px; height: 14px; vertical-align: -2px; opacity: .8; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.big-icon { width: 32px; height: 32px; stroke-width: 1.5; }

.muted    { color: var(--muted); }
.small    { font-size: 12.5px; }
.mono     { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; }
.center   { text-align: center; }
.ok       { color: var(--ok-2); }
.danger   { color: var(--danger); }
.pad-2    { padding: 28px !important; }

/* ─── sidebar nav ─── */
.brand-logo {
  width: 34px; height: 34px;
  object-fit: contain; border-radius: 9px; display: block;
}
.brand-logo.large { width: 64px; height: 64px; border-radius: 12px; }

.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 220px;
  display: flex; flex-direction: column;
  padding: 20px 14px 16px;
  background: rgba(11,13,18,.97);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-right: 1px solid var(--border-soft);
  z-index: 40;
  overflow: visible;   /* must stay visible so the hover tooltip can escape */
}
.sidebar .brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 18px; letter-spacing: -0.02em;
  color: var(--text);
  padding: 0 8px 18px;
}
.sidebar .brand:hover { color: var(--text); }

.sidebar-links {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1;
}
.sidebar-links a {
  color: var(--muted);
  padding: 9px 12px; border-radius: 10px;
  font-size: 14px; font-weight: 500;
  display: flex; align-items: center; gap: 11px;
  white-space: nowrap;
  transition: all var(--transition);
}
.sidebar-links a i { width: 17px; height: 17px; flex-shrink: 0; }
.sidebar-links a:hover { background: var(--panel); color: var(--text); }
.sidebar-links a.active { background: var(--accent-glow); color: var(--accent-2); }
.sidebar-links a.active i { color: var(--accent-2); }

.sidebar-footer {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 14px; margin-top: 8px;
  border-top: 1px solid var(--border-soft);
}
.sidebar-footer .status-pill { justify-content: center; }
.sidebar-footer .tz-select { width: 100%; }
.sidebar-logout {
  display: flex; align-items: center; gap: 11px;
  color: var(--muted);
  padding: 9px 12px; border-radius: 10px;
  font-size: 14px; font-weight: 500;
  transition: all var(--transition);
}
.sidebar-logout i { width: 17px; height: 17px; }
.sidebar-logout:hover { background: rgba(244,63,94,.10); color: var(--danger); }

.sidebar { transition: width 0.2s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); }

/* Collapse / expand tab — a small circular button on the sidebar's right edge */
.sidebar-toggle-tab {
  position: fixed;
  left: 207px;          /* sidebar width (220) minus ~half the button */
  top: 120px;           /* sit near the top, below the brand */
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 41;
  transition: left 0.25s ease, background 0.15s, color 0.15s,
              transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
/* lucide swaps <i> for <svg> at runtime — target both so the rotation
   actually sticks after the icon is replaced. */
.sidebar-toggle-tab i,
.sidebar-toggle-tab svg {
  width: 15px; height: 15px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-toggle-tab:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: scale(1.18);
  box-shadow: 0 0 14px var(--accent-glow);
}
body.sidebar-collapsed .sidebar-toggle-tab { left: 51px; }       /* 64 − ~half */
body.sidebar-collapsed .sidebar-toggle-tab i,
body.sidebar-collapsed .sidebar-toggle-tab svg {
  transform: rotate(180deg);
}

/* Stop the keyboard focus ring from appearing on sidebar links when modifier
   keys (Shift, etc.) trigger Chrome's :focus-visible heuristic on the
   previously-clicked link. */
.sidebar-links a:focus,
.sidebar-links a:focus-visible {
  outline: none;
}

/* Collapsed sidebar — hover an icon to see a tooltip with the page name. */
body.sidebar-collapsed .sidebar-links a { position: relative; }
body.sidebar-collapsed .sidebar-links a:hover::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  z-index: 50;
  box-shadow: var(--shadow-sm);
}
body.sidebar-collapsed .sidebar-links a:hover::before {
  content: "";
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: var(--panel-2);
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  z-index: 51;
}

/* Mobile top bar — hidden on desktop, shown when the sidebar collapses */
.mobile-topbar { display: none; }
.mobile-topbar .brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 16px; color: var(--text);
}

/* Top-right status pill — sits at the top of the page, scrolls away (not sticky) */
.topbar-right {
  /* absolute (old design): anchored to the top of the page so it scrolls
     away with the content instead of floating in the corner / following
     the viewport. */
  position: absolute; top: 18px; right: 28px;
  z-index: 36;
}

/* Authed pages: make room for the fixed sidebar */
body.has-sidebar { padding-left: 220px; transition: padding-left 0.2s ease; }

/* ─── collapsed sidebar (icon-only rail) ─── */
body.sidebar-collapsed.has-sidebar { padding-left: 64px; }
body.sidebar-collapsed .sidebar { width: 64px; padding-left: 8px; padding-right: 8px; }
body.sidebar-collapsed .sidebar .brand span,
body.sidebar-collapsed .sidebar-links a span,
body.sidebar-collapsed .sidebar-logout span,
body.sidebar-collapsed .tz-select { display: none; }
body.sidebar-collapsed .sidebar .brand,
body.sidebar-collapsed .sidebar-links a,
body.sidebar-collapsed .sidebar-logout {
  justify-content: center;
  padding-left: 0; padding-right: 0;
  gap: 0;
}

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
}
.icon-btn:hover { background: var(--panel); color: var(--text); }

/* timezone selector (visual-only, top nav) */
.tz-select {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 5px 8px; font-size: 12.5px; cursor: pointer;
  outline: none;
}
.tz-select:hover, .tz-select:focus { border-color: var(--accent); }

/* publish-time hint next to a time input */
.publish-hint { margin-left: 6px; white-space: nowrap; }

/* status pill */
.status-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
  background: var(--panel-2);
  border: 1px solid var(--border);
  letter-spacing: -0.005em;
  transition: all var(--transition);
}
.status-pill .status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--muted-2);
}
.status-pill.idle    { color: var(--muted); }
.status-pill.idle    .status-dot { background: var(--muted-2); }
.status-pill.running {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), #1668d6);
  border-color: transparent;
  box-shadow: 0 0 20px var(--accent-glow);
}
.status-pill.running .status-dot {
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,.6);
  animation: pulse 1.5s infinite;
}
.status-pill.paused  { color: #1a1a1a; background: var(--warn); border-color: transparent; }
.status-pill.paused  .status-dot { background: rgba(0,0,0,.4); }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.6); }
  70%  { box-shadow: 0 0 0 6px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* ─── layout ─── */
.container { max-width: 1180px; margin: 32px auto 80px; padding: 0 28px; }

.hero {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 28px;
}
.hero p { margin: 0; }
.hero .actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ─── range selector ─── */
.range-bar {
  display: flex; align-items: center;
  margin: 0 0 18px;
  position: relative;
}
.range-group {
  display: inline-flex; gap: 2px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  padding: 4px;
}
.range-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 13px; font-weight: 500;
  padding: 6px 14px; border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
  letter-spacing: -0.005em;
  display: inline-flex; align-items: center; gap: 5px;
}
.range-btn i { width: 13px; height: 13px; }
.range-btn:hover { color: var(--text); background: var(--panel-2); }
.range-btn.active {
  background: linear-gradient(135deg, var(--accent), #1668d6);
  color: #fff;
  box-shadow: 0 2px 8px -2px var(--accent-glow);
}

/* custom date popover */
.custom-popover {
  position: absolute;
  top: calc(100% + 6px); left: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow);
  min-width: 320px;
  opacity: 0; pointer-events: none;
  transform: translateY(-4px);
  transition: all var(--transition);
  z-index: 50;
}
.custom-popover.open {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
.custom-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.custom-row .field { margin: 0; }
.custom-row input[type=date] {
  width: 100%;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; font-size: 13px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  color-scheme: dark;   /* makes the native calendar picker icon dark-themed and visible */
}
.custom-row input[type=date]:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.custom-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* ─── avatars ─── */
.avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  flex-shrink: 0;
  display: block;
}
.avatar.medium { width: 56px; height: 56px; }
.avatar.large { width: 80px; height: 80px; }
.avatar.medium.fallback { font-size: 22px; }
.avatar.fallback {
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--accent-2);
  font-size: 16px;
  background: linear-gradient(135deg, rgba(43,155,255,.20), rgba(43,155,255,.05));
  border-color: rgba(43,155,255,.3);
  letter-spacing: 0;
}
.avatar.large.fallback { font-size: 32px; }

.account-identity {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.account-identity h3 { margin-bottom: 0; font-size: 16px; }
.account-identity .avatar { width: 38px; height: 38px; }
.account-identity .muted.small { font-size: 11px; }

.table-identity {
  display: flex; align-items: center; gap: 12px;
  min-width: 0;
}

.identity-row {
  display: flex; gap: 24px; align-items: flex-start;
}
.avatar-block {
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0;
}
.avatar-block .btn { cursor: pointer; }
.identity-fields { flex: 1; min-width: 0; }

/* ─── cards ─── */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent), var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 22px;
  transition: border-color var(--transition), transform var(--transition);
}
.card.no-pad { padding: 0; overflow: hidden; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px; margin-bottom: 8px;
}
.card.stat {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  /* Inherit the .card background (panel + faint 2% white overlay) so stat
     cards match the per-account model cards below — visually one family. */
}
/* Purple top accent bar — matches the ae-card / Earnings / AI Tools look */
.card.stat::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(135deg, #0e3a86, #1f86f0);
  opacity: 0.9;
}
.card.stat .stat-icon {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0e3a86, #1f86f0);
  border: none;
  border-radius: 10px;
  color: #fff;
  box-shadow: 0 4px 14px rgba(14,58,134,.32);
  flex-shrink: 0;
}
.card.stat .stat-icon i { width: 17px; height: 17px; color: #fff; stroke-width: 2.3; }
.card.stat .stat-icon.purple {
  background: linear-gradient(135deg, #0e3a86, #1f86f0);
  box-shadow: 0 4px 14px rgba(14,58,134,.32);
}
.card.stat .stat-icon.amber {
  background: linear-gradient(135deg, #92400e, #d97706);
  box-shadow: 0 4px 14px rgba(146,64,14,.4);
}
.card.stat .stat-icon.red {
  background: linear-gradient(135deg, #9f1239, #f43f5e);
  box-shadow: 0 4px 14px rgba(159,18,57,.32);
}
.card.stat .stat-icon.blue {
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
  box-shadow: 0 4px 14px rgba(30,58,138,.42);
}
.card.stat .stat-icon.green {
  background: linear-gradient(135deg, #047857, #10b981);
  box-shadow: 0 4px 14px rgba(4,120,87,.32);
}
.card.stat .big { font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.card.stat .lbl { color: var(--muted); font-size: 12.5px; margin-top: 6px; font-weight: 500; }

/* ─── accounts grid ─── */
.account-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 960px) {
  .account-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .account-grid { grid-template-columns: 1fr; }
}

/* ─── Compact account card (dashboard) ─── */
.card.account.compact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px 14px;
  height: 152px;
  text-decoration: none;
  color: inherit;
  position: relative;
  /* Darker than the wrapping ae-card + strong drop shadow → each model card
     visibly sits "above" the Accounts panel. */
  background: var(--bg-2);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.6),
    0 4px 8px rgba(0,0,0,0.5),
    0 1px 2px rgba(0,0,0,0.4);
  transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.card.account.compact:hover {
  border-color: var(--border);
  background: var(--panel);
  box-shadow:
    0 16px 32px rgba(0,0,0,0.7),
    0 6px 12px rgba(0,0,0,0.55),
    0 2px 4px rgba(0,0,0,0.4);
  transform: translateY(-2px);
}

/* Top row: avatar + name block */
.card.account.compact .account-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.card.account.compact .avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 48px; height: 48px;
}
.card.account.compact .avatar.medium {
  width: 48px; height: 48px;
  display: block;
}
.card.account.compact .status-dot {
  position: absolute;
  bottom: 0; right: 0;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2.5px solid var(--panel);
  background: var(--muted);
}
.card.account.compact .status-dot.status-ok   { background: var(--ok-2); box-shadow: 0 0 6px var(--ok); }
.card.account.compact .status-dot.status-fail { background: var(--danger); box-shadow: 0 0 6px rgba(244,63,94,.6); }
.card.account.compact .status-dot.status-idle { background: var(--muted); }

.card.account.compact .account-name-wrap {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.card.account.compact h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card.account.compact .paused-badge {
  font-size: 10.5px;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; border-radius: 999px;
  background: var(--amber-glow); color: var(--amber-2);
  margin-left: 4px;
}

/* Action buttons sit at the bottom of the card */
.card.account.compact .account-actions {
  display: flex;
  gap: 6px;
  margin-top: auto;   /* pin to bottom */
}
.card.account.compact .account-actions .btn.small {
  padding: 7px 10px;
}

/* @handle · last-run mini-meta line under the name */
.card.account.compact .account-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card.account.compact .account-meta-row .dot-sep { opacity: 0.5; }
.card.account.compact .last-run-mini.ok     { color: var(--ok-2); }
.card.account.compact .last-run-mini.danger { color: var(--danger); }
.card.account.compact .last-run-mini.muted  { color: var(--muted); }

/* "Edit" hint chip — bottom-right corner, subtle until hover */
.card.account.compact .card-edit-hint {
  position: absolute;
  bottom: 6px; right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  color: var(--muted);
  opacity: 0.5;
  pointer-events: none;
  transition: opacity var(--transition), color var(--transition);
}
.card.account.compact .card-edit-hint i {
  width: 11px; height: 11px;
}
.card.account.compact:hover .card-edit-hint {
  opacity: 1;
  color: var(--accent-2);
}
.account { display: flex; flex-direction: column; }
.account:hover {
  border-color: var(--border);
  transform: translateY(-1px);
}
.account-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.account-actions { display: flex; gap: 6px; }

.pill-group { margin: 10px 0 6px; }
.pill-label {
  font-size: 10.5px; color: var(--muted);
  margin-top: 8px; margin-bottom: 4px;
  display: flex; align-items: center; gap: 4px;
  text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600;
}
.pill-label:first-child { margin-top: 0; }
.pill-label i { width: 11px; height: 11px; }

.schedule-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.pill i { width: 11px; height: 11px; opacity: .7; }
.pill.time {
  color: var(--accent-2);
  border-color: rgba(43,155,255,.3);
  background: rgba(43,155,255,.06);
}
.pill.time.story {
  color: var(--amber-2);
  border-color: rgba(245,158,11,.3);
  background: rgba(245,158,11,.06);
}

.account-meta {
  display: grid; gap: 4px;
  font-size: 11.5px;
  padding: 8px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.account-meta > div {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--muted);
}
.account-meta b { color: var(--text-2); font-weight: 500; }
.account-meta span { font-variant-numeric: tabular-nums; }

.last-run {
  font-size: 12px; padding: 8px 0;
  display: flex; align-items: center; gap: 6px;
  color: var(--text-2);
}
.last-run.muted { color: var(--muted); }
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted-2);
  flex-shrink: 0;
}
.dot.ok     { background: var(--ok); box-shadow: 0 0 12px rgba(16,185,129,.6); }
.dot.danger { background: var(--danger); box-shadow: 0 0 12px rgba(244,63,94,.6); }
.dot.muted  { background: var(--muted-2); }

.account .link {
  font-size: 13px; color: var(--accent-2);
  margin-top: auto; padding-top: 6px;
  display: inline-flex; align-items: center; gap: 4px;
}
.account .link i { width: 14px; height: 14px; transition: transform var(--transition); }
.account .link:hover i { transform: translateX(2px); }

.account.add {
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 8px;
  border: 1.5px dashed var(--border);
  background: transparent;
  color: var(--muted);
  height: 152px;            /* match .card.account.compact */
  padding: 16px 18px 14px;
  border-radius: 14px;
  transition: all var(--transition);
}
.account.add:hover {
  border-color: var(--accent);
  color: var(--accent-2);
  background: rgba(43,155,255,.04);
  transform: translateY(-1px);
}
.account.add i { color: currentColor; }

/* ─── buttons ─── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 9px;
  padding: 8px 14px; font-size: 13.5px; font-weight: 500;
  cursor: pointer; transition: all var(--transition);
  font-family: inherit;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.btn:hover { border-color: var(--muted-2); background: var(--border-soft); }
.btn.primary {
  background: linear-gradient(135deg, var(--accent), #1668d6);
  border-color: transparent; color: #fff;
  box-shadow: 0 4px 18px -4px var(--accent-glow);
}
.btn.primary:hover { filter: brightness(1.1); box-shadow: 0 6px 22px -4px var(--accent-glow); }
.btn.amber {
  background: linear-gradient(135deg, #92400e, #d97706);
  border-color: transparent; color: #fff;
  box-shadow: 0 4px 18px -4px rgba(146,64,14,.5);
}
.btn.amber:hover { filter: brightness(1.12); }
.btn.blue {
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
  border-color: transparent; color: #fff;
  box-shadow: 0 4px 18px -4px rgba(30,58,138,.55);
}
.btn.blue:hover { filter: brightness(1.15); box-shadow: 0 6px 22px -4px rgba(30,58,138,.55); }
.btn.warn { background: var(--warn); border-color: var(--warn); color: #1a1a1a; }
.btn.warn:hover { filter: brightness(1.05); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.ghost { background: transparent; border-color: var(--border); }
.btn.ghost:hover { background: var(--panel-2); }
.btn.small { padding: 6px 11px; font-size: 12.5px; border-radius: 7px; }
.btn.small i { width: 14px; height: 14px; }
.btn.big { padding: 11px 22px; font-size: 14px; }
.btn.icon-only { padding: 7px; }
.btn.icon-only i { width: 15px; height: 15px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ─── tables ─── */
table.runs, table.accounts-table {
  width: 100%; border-collapse: collapse;
}
table th, table td {
  padding: 12px 18px; text-align: left;
  border-bottom: 1px solid var(--border-soft);
}
table th {
  background: var(--bg-2);
  font-weight: 600; color: var(--muted); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
table tr:last-child td { border-bottom: none; }
table tr:hover td { background: rgba(43,155,255,.025); }
table .actions-cell {
  display: flex; gap: 6px; justify-content: flex-end;
}

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px 3px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: -0.005em;
}
.badge i { width: 12px; height: 12px; }
.badge.ok     { background: rgba(16,185,129,.13);  color: var(--ok-2); }
.badge.danger { background: rgba(244,63,94,.13); color: var(--danger); }
.badge.muted  { background: var(--panel-2); color: var(--muted); }

/* ─── form sections ─── */
.card.section { margin-bottom: 16px; }
.section-title {
  margin: 0 0 18px;
  font-size: 14px; font-weight: 600;
  color: var(--text); letter-spacing: -0.005em;
  display: flex; align-items: center; gap: 8px;
}
.section-title i {
  width: 16px; height: 16px;
  color: var(--accent-2);
}

/* ─── forms ─── */
.edit-form, .acc-form { display: flex; flex-direction: column; gap: 0; }
.edit-form .field, .acc-form .field { margin-bottom: 16px; }
.edit-form .field:last-child, .acc-form .field:last-child { margin-bottom: 0; }
.edit-form label, .acc-form label {
  display: block; margin-bottom: 6px;
  font-weight: 500; font-size: 13px;
  color: var(--text-2);
  letter-spacing: -0.005em;
}
.edit-form input[type=text], .edit-form input[type=number],
.edit-form input[type=time], .edit-form input[type=password],
.edit-form textarea,
.acc-form select.folder-select,
.edit-form select.folder-select,
select.folder-select {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 36px 10px 13px;
  font-size: 13.5px;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238884a3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  transition: border-color var(--transition);
}
.acc-form select.folder-select:focus,
.edit-form select.folder-select:focus,
select.folder-select:focus {
  outline: none;
  border-color: var(--accent);
}
select.folder-select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.acc-form input[type=text], .acc-form input[type=number],
.acc-form input[type=time], .acc-form input[type=password],
.acc-form textarea {
  width: 100%;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 13px; font-size: 13.5px;
  font-family: inherit;
  transition: all var(--transition);
}
/* Safari/Chrome native time input dark theme */
.acc-form input[type=time], .edit-form input[type=time] {
  color-scheme: dark;
  font-variant-numeric: tabular-nums;
}
.edit-form input:focus, .edit-form textarea:focus,
.acc-form input:focus, .acc-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.edit-form input[disabled], .edit-form input[readonly],
.acc-form input[disabled], .acc-form input[readonly] {
  opacity: .55; cursor: not-allowed;
}
.edit-form textarea, .acc-form textarea {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  line-height: 1.6; font-size: 13px;
  resize: vertical;
  min-height: 90px;
}
.edit-form .grid-2, .acc-form .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.edit-form code, .acc-form code {
  background: var(--panel-2);
  padding: 1px 6px; border-radius: 4px;
  font-size: 12px;
}

/* ─── time list ─── */
.time-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.time-row {
  display: flex; gap: 8px; align-items: center;
}
.time-row input[type=time] { flex: 0 0 160px; font-variant-numeric: tabular-nums; }

/* ─── sticky save ─── */
.sticky-save {
  position: sticky; bottom: 0;
  background: linear-gradient(180deg, transparent, var(--bg) 60%);
  padding: 20px 0 0; margin-top: 4px;
  display: flex; justify-content: flex-end;
  z-index: 5;
}

/* ─── login ─── */
.login-card {
  max-width: 380px; margin: 100px auto;
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 32px;
  box-shadow: var(--shadow);
}
.login-brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 22px;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.login-brand i { width: 24px; height: 24px; color: var(--accent-2); filter: drop-shadow(0 0 12px var(--accent-glow)); }
.login-card p { margin-top: 0; color: var(--muted); }
.login-card form { display: flex; gap: 8px; margin-top: 22px; }
.login-card input {
  flex: 1;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px;
  font-family: inherit; font-size: 14px;
}
.login-card input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.login-card button {
  background: linear-gradient(135deg, var(--accent), #1668d6);
  border: none; color: #fff;
  border-radius: 8px;
  padding: 10px 18px; cursor: pointer;
  font-weight: 600; font-family: inherit;
}

/* ─── flash ─── */
.flash {
  padding: 12px 18px; margin: 16px 28px 0;
  border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 500;
  border: 1px solid transparent;
  display: flex; align-items: center; gap: 10px;
}
.flash i { width: 16px; height: 16px; flex-shrink: 0; }
.flash-success {
  background: rgba(16,185,129,.08);
  color: var(--ok-2);
  border-color: rgba(16,185,129,.25);
}
.flash-error {
  background: rgba(244,63,94,.08);
  color: var(--danger);
  border-color: rgba(244,63,94,.25);
}

/* ─── calendar ─── */
.cal-nav {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel); border: 1px solid var(--border-soft);
  border-radius: 11px; padding: 4px 4px 4px 8px;
}
.cal-month {
  padding: 0 8px;
  font-weight: 600; font-size: 14px;
  letter-spacing: -0.01em;
  min-width: 140px; text-align: center;
}
.cal-grid { background: var(--panel); }
.cal-header {
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: var(--bg-2);
  border-bottom: 1px solid var(--border-soft);
}
.cal-header > div {
  padding: 10px 12px;
  font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted);
}
.cal-days {
  display: grid; grid-template-columns: repeat(7, 1fr);
}
.cal-day {
  min-height: 110px;
  padding: 8px 10px;
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
}
.cal-day:nth-child(7n) { border-right: none; }
.cal-day.empty { background: var(--bg-2); }
.cal-day.past { opacity: .55; }
.cal-day.today {
  background: rgba(43,155,255,.04);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.cal-day.today .cal-day-num { color: var(--accent-2); font-weight: 700; }
.cal-day-num {
  font-size: 13px; font-weight: 500;
  color: var(--text-2);
}
.cal-runs { display: flex; flex-wrap: wrap; gap: 4px; }
.cal-pill {
  font-size: 10.5px; font-weight: 600;
  padding: 2px 6px; border-radius: 4px;
}
.cal-pill.ok     { background: rgba(16,185,129,.15); color: var(--ok-2); }
.cal-pill.danger { background: rgba(244,63,94,.15); color: var(--danger); }
.cal-schedule {
  display: flex; flex-direction: column; gap: 3px;
  margin-top: 2px;
}
.cal-event {
  font-size: 11px; font-weight: 500;
  padding: 2px 6px; border-radius: 4px;
  display: inline-flex; align-items: center; gap: 4px;
  font-variant-numeric: tabular-nums;
}
.cal-event i { width: 10px; height: 10px; }
.cal-event.post  { background: rgba(43,155,255,.10); color: var(--accent-2); }
.cal-event.story { background: rgba(245,158,11,.10); color: var(--amber-2); }
.cal-event-count {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.cal-event-more {
  display: inline-flex; align-items: center;
  margin-top: 2px;
  padding: 3px 8px;
  font-size: 11px; font-weight: 600;
  color: var(--accent-2);
  background: rgba(43,155,255,.08);
  border: 1px dashed rgba(43,155,255,.25);
  border-radius: 6px;
  cursor: pointer;
  letter-spacing: -0.005em;
}
.cal-event-more:hover {
  background: rgba(43,155,255,.16);
  border-color: rgba(43,155,255,.4);
}
.cal-day.clickable { cursor: pointer; }
.cal-day.clickable:hover { background: rgba(255,255,255,.02); }

/* Day-detail modal */
.day-detail-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 60px 20px 20px;
  overflow-y: auto;
  animation: fadeIn .15s;
}
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
.day-detail-modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 24px;
  width: 100%; max-width: 600px;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.day-detail-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
}
.day-detail-head h2 {
  margin: 0; font-size: 17px; font-weight: 700;
  letter-spacing: -0.01em;
}
.day-detail-section { margin-bottom: 20px; }
.day-detail-section:last-child { margin-bottom: 0; }
.day-detail-section h3 {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px; font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted);
}
.day-detail-section h3 i { width: 15px; height: 15px; color: var(--accent-2); }
.day-detail-section h3 .muted {
  margin-left: auto; font-size: 11.5px;
  font-weight: 500; text-transform: none; letter-spacing: 0;
}
.day-detail-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
}
.day-detail-row:last-child { border-bottom: none; }
.day-detail-time {
  flex-shrink: 0;
  background: var(--panel-2); color: var(--text);
  padding: 4px 9px; border-radius: 7px;
  font-size: 12.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--border-soft);
}
.day-detail-accounts {
  display: flex; flex-wrap: wrap; gap: 5px;
}
.day-detail-account {
  background: rgba(43,155,255,.10);
  color: var(--accent-2);
  border: 1px solid rgba(43,155,255,.20);
  padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500;
}

/* ─── thumbnails (recent runs) ─── */
.thumb-mini {
  width: 44px; height: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  display: block;
}
.thumb-mini.placeholder {
  display: flex; align-items: center; justify-content: center;
  color: var(--muted-2);
}
.thumb-mini.placeholder i { width: 18px; height: 18px; }

/* ─── calendar filters ─── */
.cal-filters {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.cal-filter-group { display: flex; align-items: center; gap: 8px; }
.cal-filter-label {
  font-size: 12.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.cal-select {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 10px; font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.cal-select:focus { outline:none; border-color: var(--accent); }
.cal-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; user-select: none;
}
.cal-toggle input { accent-color: var(--accent); }
.cal-toggle input:not(:checked) + .pill { opacity: 0.4; }

/* ─── modal ─── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition);
  z-index: 100;
}
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  width: 90%; max-width: 440px;
  box-shadow: var(--shadow);
  transform: scale(.96);
  transition: transform var(--transition);
}
.modal-backdrop.open .modal { transform: scale(1); }
.modal input[type=text] {
  width: 100%;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 12px; font-size: 14px;
  font-family: inherit;
}
.modal input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.modal .field { margin-bottom: 14px; }
.modal .field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; }

/* ─── account edit redesign ─── */

.acc-header {
  display: flex; align-items: center; gap: 18px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border-soft);
}
.acc-header-identity {
  display: flex; align-items: center; gap: 16px;
  flex: 1; min-width: 0;
}
.acc-header-identity h1 { margin: 0; font-size: 26px; line-height: 1.15; }
.acc-header-identity p   { margin: 2px 0 0; }

.avatar-block-mini {
  position: relative; flex-shrink: 0;
}
.avatar-upload-btn {
  position: absolute; bottom: 0; right: 0;
  width: 26px; height: 26px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  border: 2px solid var(--bg);
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  transition: all var(--transition);
}
.avatar-upload-btn:hover { filter: brightness(1.1); transform: scale(1.05); }
.avatar-upload-btn i { width: 12px; height: 12px; }

/* tabs */
.acc-tabs {
  display: flex; gap: 4px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 5px;
  margin-bottom: 18px;
}
.acc-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 13.5px; font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: all var(--transition);
  letter-spacing: -0.005em;
}
.acc-tab i { width: 15px; height: 15px; }
.acc-tab:hover { color: var(--text); background: var(--panel-2); }
.acc-tab.active {
  background: linear-gradient(135deg, var(--accent), #1668d6);
  color: #fff;
  box-shadow: 0 2px 10px -2px var(--accent-glow);
}

.acc-form { display: flex; flex-direction: column; gap: 0; }
.acc-panel { display: none; }
.acc-panel.active { display: block; }

/* section title with optional badge */
.section-title-mini {
  margin: 0 0 14px;
  font-size: 14px; font-weight: 600;
  color: var(--text);
  display: flex; align-items: center; gap: 8px;
  letter-spacing: -0.005em;
}
.section-title-mini i {
  width: 16px; height: 16px;
  color: var(--accent-2);
}
.pool-counter {
  margin-left: auto;
  font-size: 11.5px; font-weight: 500;
  color: var(--muted);
  background: var(--panel-2);
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--border-soft);
}

/* secret (password) field with reveal button */
.secret-field {
  position: relative;
  display: flex;
}
.secret-field input {
  flex: 1;
  padding-right: 42px !important;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px !important;
  letter-spacing: 0.5px;
}
.reveal-btn {
  position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  background: transparent;
  border: none;
  color: var(--muted);
  border-radius: 6px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.reveal-btn:hover { background: var(--panel-2); color: var(--text); }
.reveal-btn i { width: 16px; height: 16px; }

/* field label row with action button */
.field-label-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
  gap: 10px;
}
.field-label-row label { margin: 0; }

/* ─── settings rows (Stripe-style two-column layout) ─── */
.settings-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 22px 0 10px;
  padding: 0 2px;
  display: flex; align-items: center; gap: 8px;
}
.settings-section-title:first-child { margin-top: 4px; }
.settings-section-title .pool-counter { margin-left: auto; }

.settings-block {
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  overflow: hidden;
}
.settings-block + .settings-section-title { margin-top: 26px; }

.settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 24px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-soft);
  align-items: center;
}
.settings-row:last-child { border-bottom: none; }
.settings-row.stacked {
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: stretch;
}

.settings-label { min-width: 0; }
.settings-label-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  margin-bottom: 3px;
}
.settings-label-help {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.settings-control { min-width: 0; }
.settings-control > input,
.settings-control > textarea,
.settings-control > select,
.settings-control > .secret-field { width: 100%; }
.settings-control.narrow { max-width: 140px; justify-self: end; width: 100%; }
.settings-control.wide { width: 100%; }
.settings-row.stacked .settings-control.narrow {
  max-width: none; justify-self: stretch;
}

.field-actions-row {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px; flex-wrap: wrap;
  margin-bottom: 2px;
}
.field-actions-row .spacer { flex: 1; }

@media (max-width: 720px) {
  .settings-row {
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
  }
  .settings-control.narrow { max-width: none; justify-self: stretch; }
}

/* evolve details (collapsible) */
.evolve-details {
  background: linear-gradient(180deg, rgba(43,155,255,.06), rgba(43,155,255,.02));
  border: 1px solid rgba(43,155,255,.20);
  border-radius: 9px;
  margin-bottom: 14px;
  overflow: hidden;
}
.evolve-details > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  font-size: 12.5px; font-weight: 500;
  color: var(--text-2);
  display: flex; align-items: center; gap: 8px;
}
.evolve-details > summary::-webkit-details-marker { display: none; }
.evolve-details > summary > i { width: 14px; height: 14px; color: var(--accent-2); }
.evolve-details > summary > .muted { margin-left: auto; }
.evolve-details > summary::after {
  content: "›";
  margin-left: 4px;
  color: var(--muted);
  transition: transform var(--transition);
  font-size: 18px; line-height: 1;
}
.evolve-details[open] > summary::after { transform: rotate(90deg); }
.evolve-content {
  padding: 0 14px 12px;
  border-top: 1px solid rgba(43,155,255,.15);
  padding-top: 10px;
}

/* ─── recent changes panel (after auto-evolve) ─── */
.recent-changes {
  background: linear-gradient(180deg, rgba(43,155,255,.06), rgba(43,155,255,.02));
  border: 1px solid rgba(43,155,255,.25);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.recent-changes-header {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600;
  color: var(--accent-2);
  margin-bottom: 10px;
}
.recent-changes-header i { width: 14px; height: 14px; }
.recent-row {
  display: flex; gap: 10px; align-items: flex-start;
  margin-bottom: 8px;
}
.recent-row:last-child { margin-bottom: 0; }
.recent-label {
  font-size: 11.5px; font-weight: 600;
  padding: 3px 8px; border-radius: 999px;
  flex-shrink: 0; line-height: 1.4;
  letter-spacing: -0.005em;
}
.recent-label.new {
  background: rgba(16,185,129,.12);
  color: var(--ok-2);
  border: 1px solid rgba(16,185,129,.25);
}
.recent-label.removed {
  background: rgba(244,63,94,.10);
  color: var(--danger);
  border: 1px solid rgba(244,63,94,.25);
}
.recent-pills {
  display: flex; flex-wrap: wrap; gap: 5px;
  flex: 1;
}

/* ─── tooltips ─── */
[data-tooltip] { position: relative; }
[data-tooltip]::before,
[data-tooltip]::after {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 100;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  background: var(--panel-2);
  color: var(--text);
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  letter-spacing: -0.005em;
}
[data-tooltip]::before {
  content: "";
  bottom: calc(100% + 3px);
  border: 5px solid transparent;
  border-top-color: var(--border);
  width: 0; height: 0;
  padding: 0;
}
[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* In the topnav and at the top of any ae-card, flip tooltips BELOW the
   icon so they don't get clipped by the browser chrome / viewport edge. */
.topnav-right [data-tooltip]::after,
.ae-card-head [data-tooltip]::after {
  bottom: auto;
  top: calc(100% + 8px);
}
.topnav-right [data-tooltip]::before,
.ae-card-head [data-tooltip]::before {
  bottom: auto;
  top: calc(100% + 3px);
  border-top-color: transparent;
  border-bottom-color: var(--border);
}
.topnav-right [data-tooltip]:hover::before,
.topnav-right [data-tooltip]:hover::after {
  transform: translateX(-50%) translateY(0);
}

/* ─── mobile hamburger + helpers ─── */
.mobile-only { display: none !important; }
.desktop-only { display: inline-flex; }
.nav-toggle {
  display: inline-flex;
  background: var(--panel-2);
  border: 1px solid var(--border);
  width: 38px; height: 38px;
  border-radius: 9px;
  color: var(--text);
  cursor: pointer;
  align-items: center; justify-content: center;
  font-family: inherit;
  flex-shrink: 0;
  padding: 0;
}
.nav-toggle i { width: 20px; height: 20px; }
.nav-toggle:hover { background: var(--border-soft); }
.nav-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
  z-index: 38;
  opacity: 0;
  transition: opacity 0.2s;
}

/* ─── sidebar collapse → mobile drawer ─── */
@media (max-width: 880px) {
  body.has-sidebar,
  body.sidebar-collapsed.has-sidebar { padding-left: 0; }
  .mobile-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px;
    padding-top: calc(12px + env(safe-area-inset-top));
    background: var(--bg-2);
    border-bottom: 1px solid var(--border-soft);
    position: sticky; top: 0; z-index: 35;
  }
  /* On mobile the drawer is always full-width — ignore the collapsed state */
  .sidebar,
  body.sidebar-collapsed .sidebar {
    transform: translateX(-100%);
    width: 250px;
    padding-left: 14px; padding-right: 14px;
  }
  body.sidebar-collapsed .sidebar .brand span,
  body.sidebar-collapsed .sidebar-links a span,
  body.sidebar-collapsed .sidebar-logout span { display: inline; }
  body.sidebar-collapsed .sidebar .brand,
  body.sidebar-collapsed .sidebar-links a,
  body.sidebar-collapsed .sidebar-logout { justify-content: flex-start; gap: 11px; }
  body.sidebar-collapsed .tz-select { display: block; }
  .sidebar-toggle-tab { display: none; }   /* no collapse concept on mobile */
  body.nav-open .sidebar { transform: translateX(0); }
  body.nav-open .nav-overlay { display: block; opacity: 1; }
  /* Status pill clears the hamburger button */
  .topbar-right { top: 13px; right: 64px; }
}

/* ─── mobile ─── */
@media (max-width: 720px) {
  .mobile-only { display: flex !important; }
  .desktop-only { display: none !important; }

  /* status pill smaller on mobile */
  .status-pill {
    padding: 4px 10px 4px 8px;
    font-size: 11.5px;
  }
  .status-pill .status-text {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* layout */
  .container { padding: 0 14px; margin-top: 18px; margin-bottom: 60px; }
  .hero { flex-direction: column; align-items: stretch; gap: 14px; }
  .hero h1 { font-size: 24px; }
  .hero .actions { display: flex; flex-wrap: wrap; }
  .hero .actions .btn { flex: 1; justify-content: center; }
  h2 { font-size: 15px; margin-top: 24px; }
  .grid-2 { grid-template-columns: 1fr !important; }

  /* stat cards: 2x2 grid */
  .cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .card.stat { padding: 14px; gap: 12px; }
  .card.stat .stat-icon { width: 36px; height: 36px; }
  .card.stat .stat-icon i { width: 16px; height: 16px; }
  .card.stat .big { font-size: 20px; }
  .card.stat .lbl { font-size: 11.5px; margin-top: 3px; }

  /* range bar wraps + scrolls if needed */
  .range-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .range-group { flex-shrink: 0; }
  .range-btn { padding: 6px 10px; font-size: 12.5px; }
  .custom-popover {
    position: fixed;
    left: 14px; right: 14px;
    top: auto; bottom: 20px;
    min-width: 0;
  }
  .custom-row { grid-template-columns: 1fr 1fr; }

  /* account cards */
  .account-grid { grid-template-columns: 1fr; }
  .account .account-head { flex-wrap: wrap; }
  .account-actions { display: flex; gap: 8px; }
  .account-actions .btn.small { padding: 8px 12px; }
  .account-actions .btn.small i { width: 16px; height: 16px; }
  .account.add { height: 152px; }

  .avatar.medium { width: 48px; height: 48px; }
  .avatar.medium.fallback { font-size: 18px; }

  /* tables: horizontal scroll */
  .card.no-pad { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.runs, table.accounts-table { min-width: 580px; }
  table th, table td { padding: 10px 12px; font-size: 12.5px; }
  .thumb-mini { width: 40px; height: 40px; }

  /* form */
  .edit-form .card.section { padding: 16px; }
  .identity-row { flex-direction: column; align-items: center; gap: 16px; }
  .identity-row .identity-fields { width: 100%; }
  .sticky-save .btn { width: 100%; justify-content: center; }

  /* time picker rows */
  .time-row { gap: 6px; }
  .time-row input[type=time] { flex: 1; }

  /* calendar — compact */
  .cal-header > div { padding: 8px 4px; font-size: 10.5px; }
  .cal-day { min-height: 76px; padding: 4px 5px; }
  .cal-day-num { font-size: 11px; }
  .cal-event {
    font-size: 9.5px; padding: 1px 4px;
    overflow: hidden; white-space: nowrap;
  }
  .cal-event i { width: 8px; height: 8px; }
  .cal-pill { font-size: 9.5px; padding: 1px 4px; }
  .cal-filters { gap: 10px; }
  .cal-select { font-size: 13px; padding: 8px 10px; }

  /* tooltips off on mobile (hover doesn't exist) */
  [data-tooltip]:hover::before,
  [data-tooltip]:hover::after { display: none; }

  /* modal full-width */
  .modal { width: calc(100% - 28px); padding: 20px; }

  /* flash full-width */
  .flash { margin: 14px 14px 0; }

  /* hide thumbnail column on very small screens? — keep it for now, table scrolls */
}

/* ─── spenders page ─── */
.page-header {
  margin: 4px 0 18px;
}
.page-header h1 {
  font-size: 22px; font-weight: 700;
  margin: 0; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 10px;
}
.page-header h1 i { width: 22px; height: 22px; color: var(--accent-2); }
.page-sub {
  margin: 6px 0 0; color: var(--muted);
  font-size: 13px;
}

.spenders-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.spenders-filter {
  display: flex; align-items: center; gap: 8px;
}
.spenders-filter label {
  font-size: 12.5px; font-weight: 500; color: var(--muted);
}
.spenders-filter select {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 9px;
  padding: 8px 12px; font-size: 13.5px; font-weight: 500;
  cursor: pointer; min-width: 180px;
}
.spenders-meta {
  font-size: 12.5px; color: var(--muted);
}

.spenders-card { padding: 0; overflow: hidden; }
.spenders-table {
  width: 100%; border-collapse: collapse;
}
.spenders-table thead th {
  text-align: left; padding: 12px 16px;
  font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted);
  border-bottom: 1px solid var(--border-soft);
  background: var(--panel-2);
}
.spenders-table thead th.num { text-align: center; }
.spenders-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13.5px;
}
.spenders-table tbody tr:last-child td { border-bottom: none; }
@media (hover: hover) {
  .spenders-table tbody tr:hover { background: rgba(255,255,255,0.02); }
}
.spenders-table td.num { text-align: center; font-variant-numeric: tabular-nums; }
.spenders-table .handle-cell { font-weight: 600; }
.spenders-table .col-status { width: 24px; padding-right: 0; }

.dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
}
.dot-online { background: var(--ok-2, #10b981); box-shadow: 0 0 0 3px rgba(16,185,129,0.15); }
.dot-offline { background: var(--muted-2, #555); }

.gem-cell, .money-cell {
  white-space: nowrap;
}
.gem-amount {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.gem-icon {
  width: 13px; height: 13px;
  color: var(--accent-2);
  vertical-align: -2px;
  opacity: 0.85;
  margin-left: 5px;
}

.money-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 5px 11px;
  min-width: 100px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
}
.money-pill i {
  width: 13px; height: 13px;
  opacity: 0.9;
}
.money-lifetime {
  background: rgba(16, 185, 129, 0.10);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.22);
}
.money-balance {
  background: rgba(43, 155, 255, 0.10);
  color: #a8d3ff;
  border-color: rgba(43, 155, 255, 0.22);
}
.online-now {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600;
  color: var(--ok-2, #10b981);
}
.online-now::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok-2, #10b981);
  box-shadow: 0 0 6px rgba(16,185,129,0.6);
}
.rel-time {
  font-size: 12.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.empty-state {
  text-align: center; padding: 60px 20px;
  color: var(--muted);
}
.empty-state i { width: 40px; height: 40px; color: var(--accent-2); opacity: 0.5; }
.empty-state h3 { margin: 12px 0 6px; color: var(--text); font-weight: 600; }
.empty-state p { font-size: 13.5px; max-width: 460px; margin: 0 auto; }
.empty-state code {
  background: var(--panel-2); padding: 2px 6px; border-radius: 5px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px; color: var(--text);
}

/* ─── per-account pause ─── */
.card.account.is-paused {
  opacity: 0.7;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005)), var(--panel);
}
.card.account.is-paused .schedule-pills,
.card.account.is-paused .pill-label { opacity: 0.6; }
.paused-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--panel-2);
  color: var(--muted);
  border: 1px solid var(--border-soft);
  padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-left: 8px;
  vertical-align: middle;
}
.paused-badge i { width: 11px; height: 11px; }
.btn.small.ghost {
  background: rgba(148, 163, 184, 0.15);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.3);
}
.btn.small.ghost:hover {
  background: rgba(148, 163, 184, 0.25);
  color: #fff;
  border-color: rgba(148, 163, 184, 0.45);
}
/* When the account is paused, the toggle becomes a green "resume" */
.card.account.is-paused .btn.small.ghost {
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.35);
}
.card.account.is-paused .btn.small.ghost:hover {
  background: rgba(16, 185, 129, 0.28);
  color: #fff;
}

/* ─── master spenders page ─── */
.master-add-card {
  padding: 20px;
  margin-bottom: 16px;
}
.master-add-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr auto;
  gap: 10px;
  align-items: stretch;
}
.master-add-grid input {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 13px;
  font-size: 13.5px;
  font-family: inherit;
}
.master-add-grid input:focus {
  outline: none;
  border-color: var(--accent);
}
.master-add-grid .btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 16px;
}
.master-add-grid .btn i { width: 16px; height: 16px; }

.master-sync-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}

.pill-row {
  display: flex; flex-wrap: wrap; gap: 5px;
}
.pill-account {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500;
  background: var(--panel-2);
  color: var(--muted);
  border: 1px solid var(--border-soft);
}
.pill-account.ok {
  background: rgba(16,185,129,0.10);
  color: var(--ok-2, #10b981);
  border-color: rgba(16,185,129,0.22);
}
.pill-account i { width: 11px; height: 11px; }

@media (max-width: 720px) {
  .master-add-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── notifications page ─── */
.notif-intro {
  padding: 20px;
  margin-bottom: 18px;
}
.notif-intro-step {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 0;
  font-size: 13.5px;
}
.notif-intro-step:not(:last-child) {
  border-bottom: 1px solid var(--border-soft);
}
.notif-step-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  flex-shrink: 0;
}
.notif-intro code {
  background: var(--panel-2); padding: 2px 7px; border-radius: 5px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
}

.notif-discover-bar {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px; flex-wrap: wrap;
}

.discover-card {
  padding: 16px; margin-bottom: 22px;
}
.discover-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
.discover-row:last-child { border-bottom: none; }
.discover-info { flex: 1; min-width: 180px; }
.discover-name { font-weight: 600; font-size: 13.5px; }
.discover-add {
  display: flex; gap: 8px; align-items: center;
}
.discover-add input {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 12px; font-size: 13px;
  min-width: 160px;
}

.section-h2 {
  margin: 26px 0 12px;
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted);
}

.recipients-list {
  display: flex; flex-direction: column; gap: 14px;
}
.recipient-card {
  padding: 18px 20px;
  background: var(--bg-2);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.6),
    0 4px 8px rgba(0,0,0,0.5),
    0 1px 2px rgba(0,0,0,0.4);
  transition: opacity var(--transition), box-shadow var(--transition);
}
.recipient-card.is-disabled { opacity: 0.55; }
.recipient-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
}
.recipient-name {
  font-size: 15px; font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.recipient-card .mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.recipient-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
}

.alert-toggles-label {
  font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 10px;
}
.alert-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-auto-rows: 1fr;          /* every row the same height */
  gap: 8px;
}
/* Circle-toggle pill: whole row is the button, native checkbox hidden */
.alert-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  min-height: 46px; height: 100%;   /* uniform size across the grid */
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px; font-weight: 500;
  transition: all var(--transition);
  user-select: none;
}
.alert-toggle:hover { border-color: var(--border); }
.alert-toggle input[type="checkbox"] {
  position: absolute; opacity: 0;
  width: 0; height: 0; margin: 0; pointer-events: none;
}
/* The circle indicator */
.alert-toggle-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: transparent;
  flex-shrink: 0;
  position: relative;
  transition: all var(--transition);
}
.alert-toggle-dot::after {
  content: "";
  position: absolute; inset: 3px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform var(--transition);
}
.alert-toggle-label {
  display: flex; align-items: center; gap: 7px;
  color: var(--muted);
  flex: 1;
  transition: color var(--transition);
}
.alert-toggle-label i { width: 15px; height: 15px; }
/* Checked state */
.alert-toggle input[type="checkbox"]:checked ~ .alert-toggle-dot {
  border-color: var(--accent);
  background: var(--accent);
}
.alert-toggle input[type="checkbox"]:checked ~ .alert-toggle-dot::after {
  transform: scale(1);
}
.alert-toggle:has(input:checked) {
  border-color: rgba(43,155,255,.4);
  background: rgba(43,155,255,.07);
}
.alert-toggle:has(input:checked) .alert-toggle-label { color: var(--text); }

/* Per-type icon colours (replaces the old emojis, keeps the colour cue) */
.alert-toggle-icon { color: var(--muted); transition: color var(--transition); }
.alert-toggle[data-alert="new_message"]          .alert-toggle-icon { color: #60a5fa; }
.alert-toggle[data-alert="spender_online"]       .alert-toggle-icon { color: #34d399; }
.alert-toggle[data-alert="spender_spent"]        .alert-toggle-icon { color: #6fb8ff; }
.alert-toggle[data-alert="spender_balance_drop"] .alert-toggle-icon { color: #fbbf24; }
.alert-toggle[data-alert="whale_online"]         .alert-toggle-icon { color: #22d3ee; }
.alert-toggle[data-alert="account_failure"]      .alert-toggle-icon { color: #fb7185; }
.alert-toggle[data-alert="health"]               .alert-toggle-icon { color: #34d399; }
/* Dim the colour slightly when the toggle is off */
.alert-toggle:not(:has(input:checked)) .alert-toggle-icon { opacity: 0.5; }

.alert-save-row {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 12px; margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.save-status {
  font-size: 12.5px; font-weight: 500;
  color: var(--muted);
  transition: color var(--transition);
}
.save-status.dirty  { color: #fbbf24; }
.save-status.saving { color: var(--muted); }
.save-status.saved  { color: var(--ok-2, #10b981); }
.save-status.error  { color: var(--danger); }

.btn-sm {
  padding: 7px 14px;
  font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-sm i { width: 14px; height: 14px; }
.btn-sm:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.row-actions {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
}
.btn-mini {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border-soft); border-radius: 7px;
  padding: 6px 10px; font-size: 12px; font-weight: 500;
  cursor: pointer; transition: background var(--transition);
}
.btn-mini:hover { background: var(--panel); }
.btn-mini i { width: 13px; height: 13px; }
.btn-mini.btn-danger { color: var(--danger); }
.btn-mini.btn-danger:hover { background: rgba(244,63,94,0.1); }

.badge.ok {
  background: rgba(16,185,129,0.12);
  color: var(--ok-2, #10b981);
  border: 1px solid rgba(16,185,129,0.25);
}

/* ─── Custom confirm dialog ─── */
.dh-confirm-wrap {
  position: fixed; inset: 0; z-index: 250;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.18s;
  pointer-events: none;
}
.dh-confirm-wrap.show { opacity: 1; pointer-events: auto; }
.dh-confirm-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
}
.dh-confirm-modal {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 24px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 20px 50px rgba(0,0,0,.55);
  transform: scale(0.95) translateY(8px);
  transition: transform 0.22s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.dh-confirm-wrap.show .dh-confirm-modal {
  transform: scale(1) translateY(0);
}
.dh-confirm-title {
  font-size: 16px; font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.dh-confirm-message {
  font-size: 13.5px;
  color: var(--text-2, var(--muted));
  line-height: 1.5;
  margin-bottom: 20px;
}
.dh-confirm-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}
.dh-confirm-actions .btn {
  padding: 9px 16px;
  font-size: 13.5px;
}
.dh-confirm-actions .dh-cancel {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
}
.dh-confirm-actions .dh-cancel:hover {
  background: var(--panel);
}
.btn.btn-danger {
  background: linear-gradient(135deg, var(--danger, #f43f5e), #be123c);
  color: #fff;
  border: none;
}
.btn.btn-danger:hover { filter: brightness(1.1); }

/* ─── Toast notifications ─── */
.dh-toasts {
  position: fixed;
  top: 20px; right: 20px;
  z-index: 200;
  display: flex; flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: calc(100vw - 40px);
}
.dh-toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px 12px 16px;
  border-radius: 11px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent-2);
  color: var(--text);
  font-size: 13.5px; font-weight: 500;
  letter-spacing: -0.005em;
  box-shadow: 0 12px 32px -6px rgba(0,0,0,.5),
              0 6px 14px rgba(0,0,0,.25);
  min-width: 240px;
  max-width: 420px;
  opacity: 0;
  transform: translateX(20px) scale(0.97);
  transition: all 0.22s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.dh-toast.show {
  opacity: 1;
  transform: translateX(0) scale(1);
}
.dh-toast-msg {
  flex: 1;
  line-height: 1.4;
  word-break: break-word;
}
.dh-toast-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  margin-left: 4px;
  transition: color var(--transition);
}
.dh-toast-close:hover { color: var(--text); }

.dh-toast-success { border-left-color: var(--ok-2, #10b981); }
.dh-toast-error   { border-left-color: var(--danger, #f43f5e); }
.dh-toast-warning { border-left-color: #fbbf24; }
.dh-toast-info    { border-left-color: var(--accent-2); }

@media (max-width: 720px) {
  .dh-toasts {
    top: 10px; right: 10px; left: 10px;
  }
  .dh-toast { min-width: 0; max-width: none; }
}

/* ─── DazeHelper floating assistant ─── */
.dh-help {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 90;
}
.dh-help-btn {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #1668d6);
  color: #fff;
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 30px -6px rgba(43, 155, 255, 0.55),
              0 5px 14px rgba(0,0,0,0.35);
  transition: transform 0.15s, box-shadow 0.15s;
}
.dh-help-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 14px 36px -6px rgba(43, 155, 255, 0.65),
              0 7px 18px rgba(0,0,0,0.4);
}
.dh-help-btn.hidden { display: none; }
.dh-help-btn i { width: 32px; height: 32px; }

.dh-help-panel {
  position: absolute;
  right: 0; bottom: 0;
  width: 360px;
  max-width: calc(100vw - 32px);
  height: 520px;
  max-height: calc(100vh - 100px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateY(20px) scale(0.95);
  opacity: 0;
  pointer-events: none;
  transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dh-help-panel.open {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* Drag-over highlight when dropping a screenshot */
.dh-help-panel.dh-drag-over {
  outline: 2px dashed var(--accent-2);
  outline-offset: -8px;
}
.dh-help-panel.dh-drag-over::before {
  content: "Drop screenshot to attach";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(43, 155, 255, 0.18);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700;
  color: #fff;
  letter-spacing: -0.005em;
  pointer-events: none;
  border-radius: 14px;
}
.dh-help-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(43,155,255,0.10), transparent);
}
.dh-help-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700;
  letter-spacing: -0.005em;
}
.dh-help-title i {
  width: 17px; height: 17px;
  color: var(--accent-2);
}
.dh-help-close {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  width: 28px; height: 28px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
}
.dh-help-close i { width: 16px; height: 16px; }
.dh-help-close:hover { background: var(--panel-2); color: var(--text); }

.dh-help-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.dh-help-body::-webkit-scrollbar {
  width: 8px;
}
.dh-help-body::-webkit-scrollbar-track {
  background: transparent;
}
.dh-help-body::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.dh-help-body::-webkit-scrollbar-thumb:hover {
  background: var(--border-soft);
}
.dh-help-msg {
  padding: 10px 13px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 88%;
  letter-spacing: -0.005em;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.dh-help-msg.from-bot {
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.dh-help-msg.from-user {
  background: linear-gradient(135deg, var(--accent), #1668d6);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.dh-help-msg.dh-typing {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 14px 14px;
  min-height: 0;
}

/* New message slides up + fades in */
.dh-msg-enter {
  animation: dh-msg-in 0.28s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}
@keyframes dh-msg-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* When the AI response replaces the typing dots, a subtle pop */
.dh-msg-pop {
  animation: dh-msg-pop 0.32s ease-out;
}
@keyframes dh-msg-pop {
  0%   { transform: scale(0.92); opacity: 0.4; }
  60%  { transform: scale(1.015); opacity: 1; }
  100% { transform: scale(1); }
}

.dh-help-head-actions {
  display: flex; gap: 4px;
}

/* Flip tooltips to show BELOW for chat header buttons (panel edge clips top) */
.dh-help-head [data-tooltip]::before,
.dh-help-head [data-tooltip]::after {
  bottom: auto !important;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
}
.dh-help-head [data-tooltip]::before {
  top: calc(100% + 3px);
  border-top-color: transparent !important;
  border-bottom-color: var(--border);
}
.dh-help-head [data-tooltip]:hover::before,
.dh-help-head [data-tooltip]:hover::after {
  transform: translateX(-50%) translateY(0);
}
.dh-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--muted);
  animation: dh-bounce 1.2s infinite ease-in-out;
}
.dh-dot:nth-child(2) { animation-delay: 0.18s; }
.dh-dot:nth-child(3) { animation-delay: 0.36s; }

@keyframes dh-bounce {
  0%, 70%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  35% {
    transform: translateY(-5px);
    opacity: 1;
  }
}

.dh-help-form {
  display: flex; gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border-soft);
  background: var(--panel-2);
  align-items: center;
}
.dh-help-form input[type="text"] {
  flex: 1;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 13.5px;
  font-family: inherit;
}
.dh-help-form input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
}
.dh-help-send {
  background: linear-gradient(135deg, var(--accent), #1668d6);
  border: none;
  color: #fff;
  border-radius: 9px;
  width: 38px;
  height: 36px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dh-help-send i { width: 16px; height: 16px; }
.dh-help-send:hover { filter: brightness(1.1); }

.dh-help-attach-btn {
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 9px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition);
}
.dh-help-attach-btn:hover {
  background: var(--panel);
  color: var(--text);
  border-color: var(--accent);
}
.dh-help-attach-btn i { width: 16px; height: 16px; }

.dh-help-attach-preview {
  position: relative;
  margin: 10px 14px 0;
  padding: 8px;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 9px;
  display: flex; align-items: center; gap: 10px;
}
.dh-help-attach-preview[hidden] { display: none !important; }
.dh-help-attach-preview img {
  max-height: 60px;
  max-width: 90px;
  border-radius: 6px;
  object-fit: cover;
}
.dh-help-attach-preview::after {
  content: "Will be sent with your next message";
  font-size: 11.5px;
  color: var(--muted);
  flex: 1;
}
.dh-help-attach-remove {
  position: absolute;
  top: -6px; right: -6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--danger);
  border: 2px solid var(--panel);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.dh-help-attach-remove i { width: 12px; height: 12px; }

/* Image inside a user's message bubble */
.dh-msg-image {
  display: block;
  max-width: 100%;
  max-height: 240px;
  border-radius: 11px;
  object-fit: contain;
}
/* When the bubble has an image, drop the purple gradient — the image is the visual */
.dh-help-msg.from-user:has(.dh-msg-image) {
  background: transparent;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  max-width: 78%;
}
/* If there's also a text caption with the image, give it a subtle backdrop below */
.dh-help-msg.from-user:has(.dh-msg-image) > div:not(.dh-msg-image) {
  background: linear-gradient(135deg, var(--accent), #1668d6);
  color: #fff;
  padding: 8px 12px;
  border-radius: 0 0 11px 11px;
  margin-top: -1px;   /* seamless join */
  font-size: 13.5px;
}
.dh-help-msg.from-user:has(.dh-msg-image) .dh-msg-image:only-child,
.dh-help-msg.from-user:has(.dh-msg-image) .dh-msg-image:last-child:not(:only-child) {
  /* image at top: keep rounded top corners; flatten bottom if there's a caption */
}
.dh-help-msg.from-user:has(.dh-msg-image) .dh-msg-image:not(:last-child) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

@media (max-width: 720px) {
  .dh-help { right: 16px; bottom: 16px; }
  .dh-help-btn { width: 60px; height: 60px; }
  .dh-help-btn i { width: 28px; height: 28px; }
  .dh-help-panel {
    width: calc(100vw - 32px);
    height: 70vh;
  }
}

/* ─── extra small screens (under 380px) ─── */
@media (max-width: 380px) {
  .cards { grid-template-columns: 1fr; }
  .card.stat .big { font-size: 22px; }
  .topnav .brand span { display: none; }   /* show only lightning bolt on tiny screens */
}

/* ─── DEMO MODE banner ─────────────────────────────────────── */
.demo-banner {
  position: relative;
  z-index: 10000;
  background: linear-gradient(90deg, #2b9bff 0%, #6366f1 100%);
  color: #fff;
  padding: 8px 16px;
  font-size: 13px;
  text-align: center;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (max-width: 720px) {
  .demo-banner {
    font-size: 11.5px;
    padding: 6px 12px;
    line-height: 1.35;
  }
}
.demo-banner strong {
  letter-spacing: 0.08em;
  margin-right: 4px;
}
.demo-banner .demo-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 8px rgba(255,255,255,.8);
  animation: demo-pulse 2s ease-in-out infinite;
}
@keyframes demo-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* ─── Demo login form: stack fields vertically ─── */
.login-card form.demo-login {
  flex-direction: column;
  gap: 10px;
}
.login-card form.demo-login input,
.login-card form.demo-login button {
  width: 100%;
}

/* ─── AI generate modal inputs ─── */
.ai-voice-input,
#ai-count,
#ai-output {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  box-sizing: border-box;
  transition: border-color var(--transition);
}
.ai-voice-input,
#ai-output {
  resize: vertical;
  min-height: 80px;
}
#ai-count {
  max-width: 140px;
}
.ai-voice-input:focus,
#ai-count:focus,
#ai-output:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.ai-voice-input::placeholder,
#ai-output::placeholder { color: var(--muted-2); }

/* ─── Earnings page ─── */
.earnings-controls,
.exp-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.earnings-controls .chip,
.exp-controls .chip {
  display: inline-block;
  padding: 6px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  transition: all var(--transition);
}
.earnings-controls .chip:hover,
.exp-controls .chip:hover {
  background: var(--panel-2);
  color: var(--text);
}
.earnings-controls .chip.active,
.exp-controls .chip.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.earnings-controls .custom-range,
.exp-controls .custom-range {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: auto;
}
.earnings-controls .custom-range input[type="date"],
.exp-controls .custom-range input[type="date"] {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-size: 13px;
  color-scheme: dark;
}

/* Second row of expense controls — search + total */
.exp-controls-row2 {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin-bottom: 12px;
}
.earnings-table th.right,
.earnings-table td.right { text-align: center; }
/* Make the earnings card horizontally scrollable so the Refunds column
   never gets clipped on narrower screens. */
.card.no-pad:has(.earnings-table) { overflow-x: auto; }
.earnings-table { min-width: 760px; }
.earnings-table .mono {
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}
.earnings-table td.accent { color: var(--accent-2); }
.earnings-table td.ok     { color: var(--ok-2); }
.earnings-table td.danger { color: var(--danger); }
.earnings-table tfoot {
  background: var(--bg-2);
  border-top: 2px solid var(--border);
}
.earnings-table tfoot td {
  padding-top: 14px;
  padding-bottom: 14px;
  font-size: 16px;
}

/* ─── Section heading with a button on the right (e.g., Accounts) ─── */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.section-head h2 { margin: 0; }

/* ─── Spenders table: collapsible cards on mobile ─── */
@media (max-width: 720px) {
  .spenders-card { overflow: visible; padding: 6px; }
  .spenders-table, .spenders-table tbody { display: block; width: 100%; }
  .spenders-table thead { display: none; }

  .spenders-table tr {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    background: var(--bg-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    cursor: pointer;
  }
  /* No hover effect on touch devices — only on real pointers */
  @media (hover: hover) {
    .spenders-table tr:hover { background: var(--panel); }
  }

  /* Header row: dot · handle · balance · chevron */
  .spenders-table td.col-status {
    grid-row: 1; grid-column: 1;
    padding: 0; border: none;
    display: flex; align-items: center;
  }
  .spenders-table td.handle-cell {
    grid-row: 1; grid-column: 2;
    padding: 0; border: none;
    font-size: 15px; font-weight: 600;
    text-align: left;
  }
  .spenders-table td.handle-cell::before { display: none; }
  .spenders-table td.balance-cell {
    grid-row: 1; grid-column: 3;
    padding: 0; border: none;
    text-align: right;
    display: flex; align-items: center; justify-content: flex-end;
  }
  .spenders-table td.balance-cell::before { display: none; }
  .spenders-table td.balance-cell .money-pill {
    font-size: 12px;
    padding: 3px 8px;
  }
  .spenders-table tr::after {
    content: "›";
    grid-row: 1; grid-column: 4;
    color: var(--muted);
    font-size: 22px; line-height: 1;
    transform: rotate(90deg);
    transition: transform 0.2s;
    align-self: center;
  }
  .spenders-table tr.expanded::after { transform: rotate(-90deg); }

  /* Body cells: hidden until expanded */
  .spenders-table td:not(.col-status):not(.handle-cell):not(.balance-cell) {
    display: none;
    grid-column: 1 / -1;
    padding: 6px 0;
    border: none;
  }
  .spenders-table tr.expanded td:not(.col-status):not(.handle-cell):not(.balance-cell) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: right;
  }
  .spenders-table tr.expanded td:not(.col-status):not(.handle-cell):not(.balance-cell)::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
  }
  .spenders-table tr.expanded td:nth-child(3) {
    border-top: 1px solid var(--border-soft);
    padding-top: 10px;
    margin-top: 4px;
  }
}

/* ────────── CALENDAR ────────── */
.uppercase-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
}

/* Next-up hero card */
.cal-hero {
  margin-top: 18px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(43,155,255,.10), transparent 55%),
    linear-gradient(180deg, var(--panel), var(--panel-2));
  overflow: hidden;
}
.cal-hero-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 20px 22px;
}
.cal-hero-inner.empty { justify-content: center; padding: 28px; }
.cal-hero-left { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cal-hero-main { display: flex; align-items: center; gap: 12px; font-size: 17px; flex-wrap: wrap; }
.cal-hero-main b { font-weight: 600; }
.cal-hero-meta { line-height: 1.5; }
.cal-hero-right { flex-shrink: 0; }
.countdown {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  padding: 10px 16px;
  border-left: 1px solid var(--border-soft);
}
.countdown-num {
  font-size: 30px; font-weight: 700;
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}
.avatar.small  { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.avatar.tiny   { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }

/* Event-kind chips */
.event-kind {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.005em;
  border: 1px solid var(--border);
  background: var(--panel-2);
  white-space: nowrap;
}
.event-kind i { width: 12px; height: 12px; }
.event-kind.post  { color: #a8d3ff; border-color: rgba(43,155,255,.35); background: rgba(43,155,255,.08); }
.event-kind.story { color: #fda4af; border-color: rgba(244,63,94,.35);  background: rgba(244,63,94,.08); }

/* Summary stats grid */
.cal-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 760px) {
  .cal-summary-grid { grid-template-columns: repeat(2, 1fr); }
}
.cal-stat {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px 12px;
  transition: border-color var(--transition);
}
.cal-stat:hover { border-color: var(--border-soft); }
.cal-stat-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
}
.cal-stat-num {
  font-size: 28px; font-weight: 700; line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cal-stat.ok       { border-color: rgba(16,185,129,.28); }
.cal-stat.ok       .cal-stat-num { color: var(--ok-2); }
.cal-stat.danger   { border-color: rgba(244,63,94,.28); }
.cal-stat.danger   .cal-stat-num { color: var(--danger); }
.cal-stat.upcoming { border-color: rgba(43,155,255,.28); }
.cal-stat.upcoming .cal-stat-num { color: var(--accent-2); }

/* Avatar fallback for hero/cards */
.avatar.small.fallback,
.avatar.tiny.fallback {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; font-weight: 700; font-size: 11px;
}

/* Stat: subtle "X of Y" suffix */
.cal-stat-sub { font-size: 16px; font-weight: 500; }

/* Per-model schedule list */
.acc-schedule-list {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 18px;
}
.acc-schedule-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.6),
    0 4px 8px rgba(0,0,0,0.5),
    0 1px 2px rgba(0,0,0,0.4);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.acc-schedule-card[open] { border-color: rgba(43,155,255,.3); }
.acc-schedule-card > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1fr auto auto 16px;
  align-items: center; gap: 14px;
  user-select: none;
}
.acc-schedule-card > summary::-webkit-details-marker { display: none; }
.acc-schedule-card > summary:hover { background: rgba(255,255,255,.02); }
.acc-schedule-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.acc-schedule-name b { font-size: 14px; }
.acc-schedule-name .small { margin-top: 1px; }
.acc-schedule-counts { display: flex; gap: 6px; }
.acc-schedule-next { white-space: nowrap; }
.acc-schedule-chev {
  width: 16px; height: 16px; color: var(--muted);
  transition: transform .2s;
}
.acc-schedule-card[open] .acc-schedule-chev { transform: rotate(180deg); }

.acc-schedule-events { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-soft); }
.acc-schedule-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center; gap: 14px;
  padding: 10px 16px 10px 56px;
  border-top: 1px solid var(--border-soft);
}
.acc-schedule-row:first-child { border-top: 0; }
.acc-schedule-time { display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; }
.acc-schedule-empty { padding: 12px 16px; border-top: 1px solid var(--border-soft); }

@media (max-width: 640px) {
  .acc-schedule-card > summary {
    grid-template-columns: 1fr 16px;
    row-gap: 8px;
  }
  .acc-schedule-counts { grid-column: 1; }
  .acc-schedule-next   { grid-column: 1; }
  .acc-schedule-chev   { grid-column: 2; grid-row: 1; align-self: start; }
  .acc-schedule-row    { padding-left: 16px; }
}

/* Collapsible "Coming up" (legacy) */
.cal-details {
  margin-top: 18px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.cal-details > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  display: flex; align-items: center; gap: 10px;
  font-weight: 600;
  user-select: none;
}
.cal-details > summary::-webkit-details-marker { display: none; }
.cal-details > summary > i { width: 16px; height: 16px; color: var(--accent-2); }
.cal-details > summary > .muted { margin-left: auto; }
.cal-details > summary::after {
  content: "›"; margin-left: 6px;
  transition: transform .2s; color: var(--muted);
  font-size: 18px; line-height: 1;
}
.cal-details[open] > summary::after { transform: rotate(90deg); }

.timeline-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-soft); }
.timeline-row {
  display: grid;
  grid-template-columns: 120px auto 1fr;
  align-items: center; gap: 14px;
  padding: 11px 18px;
  border-top: 1px solid var(--border-soft);
}
.timeline-row:first-child { border-top: 0; }
.timeline-row:hover { background: rgba(255,255,255,.02); }
.timeline-time { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 13.5px; }
.timeline-time .small { display: block; margin-top: 1px; font-weight: 400; }
.timeline-acc { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.timeline-more { padding: 10px 18px; border-top: 1px solid var(--border-soft); text-align: center; }

@media (max-width: 640px) {
  .cal-hero-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .countdown { border-left: 0; border-top: 1px solid var(--border-soft); padding: 12px 0 0; align-items: flex-start; width: 100%; }
  .timeline-row { grid-template-columns: 80px 1fr; row-gap: 6px; }
  .timeline-acc  { grid-column: 1 / -1; }
}

/* ────────── ACCOUNT EDIT — Redesign ────────── */
.ae-card {
  /* Match .card so wrapper cards and stat cards share one shade. */
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent), var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 18px;
  overflow: hidden;
  transition: border-color var(--transition);
  position: relative;
}
.ae-card::before {
  /* Top accent bar — visible divider per section */
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--ae-accent, var(--accent));
  opacity: 0.9;
}
.ae-card:hover { border-color: var(--border-soft); }
.ae-card-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-soft);
  background:
    linear-gradient(90deg, var(--ae-accent-glow, rgba(43,155,255,.06)), transparent 60%),
    rgba(255,255,255,.015);
}
.ae-card-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ae-accent, var(--accent));
  box-shadow: 0 4px 14px var(--ae-accent-shadow, rgba(43,155,255,.32));
  flex-shrink: 0;
}
.ae-card-icon i { width: 17px; height: 17px; color: #fff; stroke-width: 2.3; }
.ae-card-head > h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }

/* All cards share the DazeHub purple accent — deeper/richer purple */
.ae-card {
  --ae-accent: linear-gradient(135deg, #0e3a86, #1f86f0);
  --ae-accent-glow: rgba(14,58,134,.10);
  --ae-accent-shadow: rgba(14,58,134,.38);
}

.ae-card-count {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11.5px; font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ae-card-actions { margin-left: auto; display: flex; gap: 8px; }
.ae-card-body { padding: 18px; }

/* Field layout */
.ae-field { display: block; margin-bottom: 16px; }
.ae-field:last-child { margin-bottom: 0; }
.ae-field-label {
  display: block;
  font-size: 13px; font-weight: 600;
  margin-bottom: 6px;
}
.ae-field-help {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}
.ae-field input[type=text],
.ae-field input[type=password],
.ae-field input[type=number],
.ae-field select {
  width: 100%;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 13.5px;
  transition: all var(--transition);
}

/* ── Tip menu rows ── */
.tip-section { margin-top: 6px; }
.tip-section + .tip-section { margin-top: 22px; }
.tip-section-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
  font-size: 13px; font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
}
.tip-section-head i { width: 14px; height: 14px; color: var(--muted); }
.tip-section-head .tip-section-count {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 8px;
  font-size: 11px; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.tip-rows { display: flex; flex-direction: column; gap: 8px; }
.tip-row {
  display: grid;
  grid-template-columns: 24px 1fr 110px auto;
  gap: 10px;
  align-items: start;
  padding: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color var(--transition);
}
.tip-move {
  display: flex; flex-direction: column; gap: 2px;
  align-self: start; padding-top: 2px;
  cursor: grab;
}
.tip-move:active { cursor: grabbing; }
.tip-row.tip-dragging {
  opacity: 0.4;
  border-color: var(--accent);
}
.tip-row.tip-drop-above {
  box-shadow: 0 -3px 0 0 var(--accent);
}
.tip-row.tip-drop-below {
  box-shadow: 0 3px 0 0 var(--accent);
}
.tip-move button {
  width: 22px; height: 22px;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 5px; color: var(--muted);
  cursor: pointer;
  transition: all var(--transition);
}
.tip-move button:hover:not(:disabled) {
  color: var(--text); border-color: var(--border-soft);
  background: var(--panel-2);
}
.tip-move button:disabled { opacity: 0.3; cursor: not-allowed; }
.tip-move i { width: 12px; height: 12px; }
.tip-price-wrap {
  display: flex; align-items: center; gap: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 8px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.tip-price-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(43,155,255,.15);
}
.tip-price-wrap i { width: 14px; height: 14px; color: var(--accent-2); flex-shrink: 0; }
/* Strip the standalone styling off the input — the wrapper owns the look now. */
.tip-row .tip-price {
  border: none !important;
  background: transparent !important;
  padding: 8px 0 !important;
  flex: 1; min-width: 0;
  box-shadow: none !important;
}
.tip-row:hover { border-color: var(--border-soft); }
.tip-row-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tip-row input[type=text],
.tip-row input[type=number],
.tip-row textarea {
  width: 100%;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.tip-row input[type=number] { text-align: right; }
.tip-row textarea { resize: vertical; min-height: 38px; line-height: 1.4; }
.tip-row input:focus,
.tip-row textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(43,155,255,.15);
}
.tip-row .tip-del { align-self: start; padding: 8px; }
.tip-row .tip-del i { color: var(--muted); }
.tip-row .tip-del:hover i { color: var(--danger); }
.tip-empty {
  padding: 14px;
  text-align: center;
  background: var(--bg-2);
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-size: 12.5px;
}
.tip-add-row { margin-top: 8px; }
.ae-field input:focus,
.ae-field select:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(43,155,255,.15);
}
.ae-field-input-suffix {
  display: flex; align-items: center; gap: 6px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding-right: 12px;
}
.ae-field-input-suffix input {
  background: transparent !important;
  border: 0 !important;
  padding: 10px 12px !important;
  flex: 1;
}
.ae-field-input-suffix > span { color: var(--muted); font-size: 12.5px; }
.ae-field-input-suffix.narrow { max-width: 160px; }
.ae-field-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.ae-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.ae-fields-row {
  display: flex; gap: 18px; flex-wrap: wrap;
}
@media (max-width: 640px) {
  .ae-fields-grid { grid-template-columns: 1fr; }
}

/* Editable pool — captions (vertical list) */
.ae-pool { margin-top: 10px; }
.ae-pool-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.ae-pool-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 8px 10px 8px 12px;
  font-size: 13.5px;
  transition: all var(--transition);
}
.ae-pool-item:hover { border-color: var(--accent); }
.ae-pool-text {
  flex: 1; min-width: 0;
  white-space: pre-wrap; word-break: break-word;
}

/* Captions + Hashtags — symmetric chip styling, grid-aligned */
.ae-pool-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}
.ae-pool-pills {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.ae-tag-pill,
.ae-caption-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 8px 9px 14px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--text);
  transition: all var(--transition);
  line-height: 1.2;
  min-width: 0;   /* allow text to ellipsize inside grid cell */
}
.ae-tag-pill:hover,
.ae-caption-chip:hover { border-color: var(--accent); }
.ae-tag-pill > :not(.ae-pool-x):not(.new-dot),
.ae-caption-chip-text {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 640px) {
  .ae-pool-chips { grid-template-columns: 1fr; }
  .ae-pool-pills { grid-template-columns: repeat(2, 1fr); }
}

/* "Recently added" highlight — small purple dot + tinted background */
.ae-tag-pill.is-new,
.ae-caption-chip.is-new {
  background: rgba(43,155,255,.10);
  border-color: rgba(43,155,255,.45);
}
.new-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 6px rgba(43,155,255,.6);
  flex-shrink: 0;
}

/* Remove button */
.ae-pool-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  border: 0; cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}
.ae-pool-x:hover { background: rgba(244,63,94,.15); color: var(--danger); }
.ae-pool-x i { width: 13px; height: 13px; }

/* Add input row */
.ae-pool-add {
  display: flex; gap: 8px; margin-top: 10px;
}
.ae-pool-input {
  flex: 1;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 13.5px;
  transition: all var(--transition);
}
.ae-pool-input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(43,155,255,.15); }

/* Compact evolve banner */
.ae-evolve-banner {
  background: linear-gradient(180deg, rgba(43,155,255,.06), rgba(43,155,255,.02));
  border: 1px solid rgba(43,155,255,.22);
  border-radius: 10px;
  margin-bottom: 14px;
  overflow: hidden;
}
.ae-evolve-banner > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  user-select: none;
}
.ae-evolve-banner > summary::-webkit-details-marker { display: none; }
.ae-evolve-banner > summary > i { width: 14px; height: 14px; color: var(--accent-2); }
.ae-evolve-banner > summary > .muted { margin-left: auto; }
.ae-evolve-banner > summary::after { content: "›"; margin-left: 6px; transition: transform .2s; color: var(--muted); font-size: 16px; }
.ae-evolve-banner[open] > summary::after { transform: rotate(90deg); }
.ae-evolve-banner .evolve-content { padding: 0 14px 12px; border-top: 1px solid rgba(43,155,255,.15); padding-top: 10px; }

/* Advanced collapsible */
.ae-advanced {
  background: var(--panel);
  border: 1px dashed var(--border);
  border-radius: 14px;
  margin-top: 10px;
  overflow: hidden;
}
.ae-advanced > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  display: flex; align-items: center; gap: 10px;
  font-weight: 600;
  user-select: none;
}
.ae-advanced > summary::-webkit-details-marker { display: none; }
.ae-advanced > summary > i { width: 16px; height: 16px; color: var(--muted); }
.ae-advanced > summary > .muted { margin-left: auto; font-weight: 400; }
.ae-advanced > summary::after { content: "›"; margin-left: 6px; transition: transform .2s; color: var(--muted); font-size: 18px; }
.ae-advanced[open] > summary::after { transform: rotate(90deg); }
.ae-advanced[open] > summary { border-bottom: 1px solid var(--border-soft); }
.ae-advanced-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 0; }
.ae-advanced-body .ae-card { margin-bottom: 12px; }
.ae-advanced-body .ae-card:last-child { margin-bottom: 0; }

/* ────────── TASKS BOARD ────────── */
.task-new-card {
  display: flex; gap: 10px; align-items: center;
  padding: 14px 16px;
  margin-top: 16px;
}
.task-new-card #task-title {
  flex: 1;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 14px;
}
.task-new-card #task-title:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(43,155,255,.15); }
.task-new-card #task-assignee {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 13.5px;
  cursor: pointer;
  min-width: 120px;
}

.tasks-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}
@media (max-width: 980px) { .tasks-board { grid-template-columns: 1fr; } }

.task-column {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 220px;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.6),
    0 4px 8px rgba(0,0,0,0.5),
    0 1px 2px rgba(0,0,0,0.4);
}
.task-col-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
}
.task-col-head h3 { margin: 0; font-size: 14.5px; font-weight: 700; }
.task-col-count {
  margin-left: auto;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11.5px; font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.task-dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
  animation: task-dot-pulse 1.8s ease-in-out infinite;
  /* All dots use the same negative delay so they're locked in sync */
  animation-delay: 0s;
}
.task-dot--todo     { background: #ef4444; --pulse-color: 239,68,68; }
.task-dot--ongoing  { background: #f59e0b; --pulse-color: 245,158,11; }
.task-dot--done     { background: #10b981; --pulse-color: 16,185,129; }
@keyframes task-dot-pulse {
  0%, 100% {
    box-shadow: 0 0 0   rgba(var(--pulse-color), 0.0),
                0 0 6px rgba(var(--pulse-color), 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 14px rgba(var(--pulse-color), 0.9),
                0 0 20px rgba(var(--pulse-color), 0.4);
    transform: scale(1.15);
  }
}

/* Column header gets a subtle status-tinted gradient */
.task-column[data-status="todo"]    .task-col-head { background: linear-gradient(90deg, rgba(239,68,68,.07), transparent 70%); }
.task-column[data-status="ongoing"] .task-col-head { background: linear-gradient(90deg, rgba(245,158,11,.07), transparent 70%); }
.task-column[data-status="done"]    .task-col-head { background: linear-gradient(90deg, rgba(16,185,129,.07), transparent 70%); }

/* Top border accent per column */
.task-column { position: relative; }
.task-column::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 3px; opacity: 0.9;
}
.task-column[data-status="todo"]::before    { background: linear-gradient(90deg, #ef4444, #f87171); }
.task-column[data-status="ongoing"]::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.task-column[data-status="done"]::before    { background: linear-gradient(90deg, #10b981, #34d399); }

/* Stats strip at the top */
.task-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 14px;
}
@media (max-width: 640px) { .task-stats { grid-template-columns: repeat(2, 1fr); } }
.task-stat {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
}
.task-stat-num {
  font-size: 22px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.task-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--muted);
}
.task-stat.todo    .task-stat-num { color: #ef4444; }
.task-stat.ongoing .task-stat-num { color: #f59e0b; }
.task-stat.done    .task-stat-num { color: #10b981; }
.task-stat.total   .task-stat-num { color: var(--accent-2); }

/* Smooth card add/remove animation */
.task-card {
  animation: task-card-in .22s ease-out;
}
@keyframes task-card-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.task-col-body {
  padding: 12px; display: flex; flex-direction: column; gap: 8px;
  min-height: 80px;
  transition: background var(--transition), box-shadow var(--transition);
}
/* Column highlights while a task is being dragged over it */
.task-col-body.drag-over {
  background: rgba(43,155,255,.07);
  box-shadow: inset 0 0 0 2px var(--accent);
  border-radius: 10px;
}
.task-empty {
  text-align: center; padding: 24px 12px;
  border: 1px dashed var(--border);
  border-radius: 9px;
}
/* Cap each column to the first 4 cards. The "Show more" button toggles
   .is-expanded on the parent body to reveal the rest. */
.task-col-body:not(.is-expanded) > .task-card:nth-of-type(n+5) {
  display: none;
}
.task-show-more {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 7px 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.task-show-more:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--panel);
}

/* Single task card */
.task-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  cursor: grab;
  transition: all var(--transition);
}
.task-card:active { cursor: grabbing; }
.task-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(43,155,255,.10);
}
/* The card currently being dragged */
.task-card.dragging {
  opacity: 0.45;
  cursor: grabbing;
  transform: scale(0.98);
}
.task-card-main { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.task-card-title {
  font-size: 13.5px;
  white-space: normal;
  word-break: break-word;
  min-width: 0;
}
.task-card-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* Status-specific tints. The left-edge stripe used to indicate status
   (todo=red, ongoing=amber, done=green) but that's now repurposed for
   priority — the column placement already makes status obvious. Ongoing
   keeps a subtle amber wash and done keeps the strikethrough/dimmed look. */
.task-card[data-status="ongoing"] { background: linear-gradient(90deg, rgba(245,158,11,.05), var(--panel-2) 30%); }
.task-card[data-status="done"]    { opacity: 0.85; }
.task-card[data-status="done"] .task-card-title { text-decoration: line-through; color: var(--muted); }

/* Priority left-edge stripe — High = red, Medium = amber, None = transparent
   (no stripe). Universal urgency colors so the meaning is obvious at a glance
   without legend. Bigger than the old status stripe (4px) so it reads as the
   card's defining attribute. */
.task-card                           { border-left: 4px solid transparent; }
.task-card[data-prio="high"]        { border-left-color: #ef4444; }
.task-card[data-prio="medium"]      { border-left-color: #f59e0b; }

/* Priority chip on the card — clickable, cycles None → High → Medium → None.
   None state shows a tiny flag outline (the action affordance); High/Medium
   show the textual label in their accent color so they're legible at a glance
   even on small previews. */
.task-prio {
  display: inline-flex; align-items: center; justify-content: center;
  height: 22px; min-width: 42px; padding: 0 8px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease, transform .08s ease;
  flex-shrink: 0;
}
.task-prio:hover  { color: var(--text); border-color: var(--accent); }
.task-prio:active { transform: scale(0.94); }
.task-prio i      { width: 12px; height: 12px; }
.task-prio--high {
  background: rgba(239, 68, 68, .14);
  border-color: rgba(239, 68, 68, .55);
  color: #fca5a5;
}
.task-prio--medium {
  background: rgba(245, 158, 11, .14);
  border-color: rgba(245, 158, 11, .55);
  color: #fcd34d;
}
.task-prio--none {
  background: rgba(16, 185, 129, .12);
  border-color: rgba(16, 185, 129, .45);
  color: #6ee7b7;
}

/* Priority dropdown in the New-task form — match the existing assignee select. */
.task-new-card #task-priority {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 13.5px;
  cursor: pointer;
  min-width: 130px;
}

/* Assignee badge */
.task-asg {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  font-size: 10.5px; font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.task-asg[data-asg="Lele"]    { background: linear-gradient(135deg, #6366f1, #2b9bff); }
.task-asg[data-asg="Ash"]     { background: linear-gradient(135deg, #ec4899, #f472b6); }
.task-asg[data-asg="Vitto"]   { background: linear-gradient(135deg, #06b6d4, #22d3ee); }
.task-asg[data-asg="Agent 1"] { background: linear-gradient(135deg, #6366f1, #2b9bff); }
.task-asg[data-asg="Agent 2"] { background: linear-gradient(135deg, #ec4899, #f472b6); }
.task-asg[data-asg="Agent 3"] { background: linear-gradient(135deg, #06b6d4, #22d3ee); }

/* Duration label */
.task-duration {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: rgba(43,155,255,.10);
  border: 1px solid rgba(43,155,255,.25);
  border-radius: 999px;
  padding: 2px 8px;
}
.task-card[data-status="done"] .task-duration {
  color: var(--ok-2);
  background: rgba(16,185,129,.10);
  border-color: rgba(16,185,129,.25);
}

/* Delete button */
.task-card-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 6px;
  background: transparent;
  border: 0; cursor: pointer;
  color: var(--muted);
  transition: all .15s;
}
.task-card-del:hover { color: var(--danger); background: rgba(244,63,94,.10); }
.task-card-del i { width: 14px; height: 14px; }

@media (max-width: 640px) {
  .task-new-card { flex-direction: column; align-items: stretch; }
  .task-new-card #task-assignee, .task-new-card .btn { width: 100%; }
}

/* ── Per-person stacked boards ── */
.person-board {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-top: 18px;
  overflow: hidden;
}
.person-board-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  background: linear-gradient(90deg, rgba(43,155,255,.08), transparent 60%);
  border-bottom: 1px solid var(--border-soft);
}
.person-board-head h2 {
  margin: 0;
  font-size: 16px; font-weight: 700;
  letter-spacing: -0.01em;
}
.person-board-count {
  margin-left: auto;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 11.5px; font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.person-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 14px; font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}
.person-badge[data-asg="Lele"]    { background: linear-gradient(135deg, #6366f1, #2b9bff); }
.person-badge[data-asg="Ash"]     { background: linear-gradient(135deg, #ec4899, #f472b6); }
.person-badge[data-asg="Vitto"]   { background: linear-gradient(135deg, #06b6d4, #22d3ee); }
.person-badge[data-asg="Agent 1"] { background: linear-gradient(135deg, #6366f1, #2b9bff); }
.person-badge[data-asg="Agent 2"] { background: linear-gradient(135deg, #ec4899, #f472b6); }
.person-badge[data-asg="Agent 3"] { background: linear-gradient(135deg, #06b6d4, #22d3ee); }

/* Adjust inner kanban inside a person-board */
.person-board .tasks-board {
  padding: 14px;
  margin-top: 0;
}
.person-board .task-column { min-height: 160px; }

/* "Anyone" badge — slim purple star, different from real people */
.task-asg.task-asg--anyone {
  background: linear-gradient(135deg, #1668d6, #6fb8ff);
  font-size: 12px;
}

/* Inline quick-add inside each person's To do column */
.task-col-quickadd {
  display: flex; align-items: center; gap: 6px;
  margin: 6px 12px 12px;
  padding: 8px 10px;
  background: var(--panel-2);
  border: 1px dashed var(--border);
  border-radius: 9px;
  transition: all var(--transition);
}
.task-col-quickadd:hover,
.task-col-quickadd:focus-within {
  border-style: solid;
  border-color: var(--accent);
  background: rgba(43,155,255,.05);
}
.task-col-quickadd > i {
  width: 14px; height: 14px;
  color: var(--muted);
  flex-shrink: 0;
}
.task-col-quickadd:focus-within > i { color: var(--accent-2); }
.task-quickadd-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text);
  font-size: 13px;
  padding: 2px 0;
}
.task-quickadd-input::placeholder { color: var(--muted); }

/* ════════════ KLING SECTION ════════════ */
.kling-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 12px;
  margin-top: 16px; font-size: 13.5px;
}
.kling-banner i { width: 18px; height: 18px; flex-shrink: 0; }
.kling-banner--warn {
  background: rgba(245,158,11,.10);
  border: 1px solid rgba(245,158,11,.30);
  color: #fbbf24;
}
.kling-banner code { background: rgba(0,0,0,.25); padding: 1px 5px; border-radius: 4px; }

/* Usage strip */
.kling-usage {
  display: flex; align-items: center; gap: 24px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  margin-top: 16px;
}
.kling-usage-label {
  text-transform: uppercase; letter-spacing: .06em;
  font-size: 10.5px; font-weight: 600; color: var(--muted);
  margin-bottom: 3px;
}
.kling-usage-val { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kling-usage-bar-wrap {
  flex: 1; height: 8px; border-radius: 999px;
  background: var(--panel-2); overflow: hidden;
}
.kling-usage-bar {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #2b9bff, #6fb8ff);
  transition: width .4s ease;
}

/* Compose two-column layout */
.kling-compose-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 900px) { .kling-compose-grid { grid-template-columns: 1fr; } }

/* Picker grids (character images, motion refs) */
.kling-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  max-height: 260px; overflow-y: auto;
  padding: 4px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.kling-picker-empty { grid-column: 1 / -1; padding: 16px; text-align: center; }
.kling-pick {
  position: relative;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg);
  padding: 0; aspect-ratio: 1;
  transition: border-color var(--transition);
}
.kling-pick:hover { border-color: var(--border-soft); }
.kling-pick.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(43,155,255,.25); }
.kling-pick img, .kling-pick video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.kling-pick-label {
  position: absolute; bottom: 3px; right: 3px;
  background: rgba(0,0,0,.7); color: #fff;
  font-size: 10px; font-weight: 600;
  padding: 1px 5px; border-radius: 4px;
}

/* Preview panel */
.kling-preview-block { margin-bottom: 16px; }
.kling-preview-block:last-child { margin-bottom: 0; }
.kling-preview-label { margin-bottom: 6px; }
.kling-preview-img, .kling-preview-video {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2);
  min-height: 140px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.kling-preview-img img, .kling-preview-video video {
  width: 100%; max-height: 280px; object-fit: contain; display: block;
}

/* Compose footer */
.kling-compose-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 8px;
  padding-top: 14px; border-top: 1px solid var(--border-soft);
}
.kling-cost { font-size: 13px; color: var(--muted); }
.kling-cost b { color: var(--accent-2); font-size: 15px; }

/* Job queue */
.kling-queue-list { display: flex; flex-direction: column; }
.kling-job {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border-top: 1px solid var(--border-soft);
}
.kling-job:first-child { border-top: 0; }
.kling-job-main { flex: 1; min-width: 0; }
.kling-job-title {
  font-size: 14.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kling-job-error { font-size: 12px; color: var(--danger); }
.kling-job-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* Status dot — small, sits in the top-left corner of the preview */
.kling-status-dot {
  width: 9px; height: 9px; border-radius: 50%;
  flex-shrink: 0;
}
.kling-status-dot.kling-status--queued     { background: #94a3b8; box-shadow: 0 0 7px rgba(148,163,184,.6); }
.kling-status-dot.kling-status--processing { background: #fbbf24; box-shadow: 0 0 7px rgba(245,158,11,.7); animation: pulse 1.6s infinite; }
.kling-status-dot.kling-status--done       { background: #34d399; box-shadow: 0 0 7px rgba(16,185,129,.7); }
.kling-status-dot.kling-status--failed     { background: #fb7185; box-shadow: 0 0 7px rgba(244,63,94,.7); }

/* Clickable video tile — used for both the output preview and the motion ref.
   Same sizing approach as the motion-library tiles: a width + 9:16 aspect-ratio. */
.kling-vid-tile {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  flex-shrink: 0;
  cursor: pointer;
  aspect-ratio: 9 / 16;
}
.kling-vid-output { width: 240px; }   /* same size as a Motion Library tile */
.kling-vid-motion { width: 175px; }   /* the reference video — a bit smaller */
.kling-vid-tile video,
.kling-vid-tile img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* In fullscreen, show the WHOLE 9:16 video (letterboxed) — never crop it. */
video:fullscreen,
video:-webkit-full-screen {
  object-fit: contain !important;
  width: 100% !important; height: 100% !important;
  background: #000;
}
.kling-vid-tile .kling-status-dot {
  position: absolute; top: 8px; left: 8px; z-index: 2;
}
.kling-vid-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.28);
  transition: background var(--transition);
}
.kling-vid-tile:hover .kling-vid-play { background: rgba(0,0,0,.48); }
.kling-vid-play i {
  width: 32px; height: 32px; color: #fff;
  filter: drop-shadow(0 1px 5px rgba(0,0,0,.7));
}
.kling-vid-motion .kling-vid-play i { width: 24px; height: 24px; }
.kling-vid-tile.playing .kling-vid-play { display: none; }
.kling-vid-tile.playing { cursor: default; }
/* Placeholder shown for queued / processing / failed jobs (no output yet) */
.kling-vid-tile.placeholder {
  background: var(--panel-2);
  border: 1px dashed var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: default;
}
.kling-job-preview-status {
  font-size: 12px; font-weight: 600; color: var(--muted);
  text-align: center; padding: 0 8px;
}

/* The two inputs that produced the job — character image + motion ref */
.kling-job-io {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.kling-io-thumb {
  width: 175px;                        /* the character image — same size as the motion ref */
  aspect-ratio: 9 / 16;
  border-radius: 9px;
  object-fit: cover;
  background: var(--panel-2);
  border: 1px solid var(--border);
  display: block;
}
.kling-io-thumb.empty { background: var(--panel-2); }
.kling-io-plus { width: 14px; height: 14px; color: var(--muted); flex-shrink: 0; }

/* Approve / flag — the good-vs-bad signal */
.kling-job-rate { display: flex; gap: 4px; flex-shrink: 0; }
.kling-rate-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  transition: all var(--transition);
}
.kling-rate-btn i { width: 15px; height: 15px; }
.kling-rate-btn:hover { color: var(--text); border-color: var(--border-soft); }
.kling-rate-btn.is-approved {
  background: rgba(16,185,129,.15); border-color: rgba(16,185,129,.5); color: #34d399;
}
.kling-rate-btn.is-flagged {
  background: rgba(244,63,94,.15); border-color: rgba(244,63,94,.5); color: #fb7185;
}

@media (max-width: 720px) {
  .kling-job { flex-wrap: wrap; gap: 10px; }
  .kling-job-main { flex-basis: 100%; order: 5; }
}

/* Upload row */
.kling-upload-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.kling-upload-row input[type=file] {
  flex: 1; min-width: 200px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 9px;
  padding: 8px 10px; font-size: 13px;
}
.kling-upload-row input[type=text] {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 9px;
  padding: 9px 12px; font-size: 13px; min-width: 180px;
}
.kling-search-input {
  width: 100%; margin-top: 16px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 9px;
  padding: 10px 12px; font-size: 13.5px;
}

/* Galleries */
.kling-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.kling-gallery--outputs {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.kling-gallery-item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.kling-gallery-item img, .kling-gallery-item video {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  background: var(--bg);
}
.kling-gallery--outputs .kling-gallery-item video { aspect-ratio: 16/9; }
.kling-gallery-meta {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; gap: 8px;
}
.kling-tags { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 10px 10px; }
.kling-output-pending {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; aspect-ratio: 16/9; background: var(--panel-2);
}
.kling-output-pending i { width: 26px; height: 26px; color: var(--muted); }

/* Filters */
.kling-filters { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.kling-filters select {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 9px;
  padding: 9px 12px; font-size: 13px; cursor: pointer;
}
/* Compact filter selects in the queue card header */
.kling-filters-select {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 10px; font-size: 12.5px; cursor: pointer;
  outline: none;
}
.kling-filters-select:hover, .kling-filters-select:focus { border-color: var(--accent); }

/* Kling — Batch / Single tabs */
.kling-tabs {
  display: inline-flex; gap: 2px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 2px;
}
.kling-tab {
  background: transparent; border: 0; cursor: pointer;
  color: var(--muted);
  font-size: 12.5px; font-weight: 600;
  padding: 6px 14px; border-radius: 7px;
  transition: all var(--transition);
}
.kling-tab:hover { color: var(--text); }
.kling-tab.active {
  background: var(--accent);
  color: #fff;
}
.kling-panel[hidden] { display: none; }

/* Kling — batch summary in the preview panel */
.kling-batch-summary {
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--panel-2);
  padding: 14px;
}
.kb-prev-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; min-height: 160px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 24px;
  background: var(--bg-2);
}
.kb-prev-empty > i { width: 32px; height: 32px; color: var(--accent-2); }
.kb-prev-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
  font-size: 14px; line-height: 1.4;
}
.kb-prev-head b { color: var(--text); }
.kb-prev-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px; max-height: 360px; overflow-y: auto;
  padding: 4px; background: var(--bg-2);
  border: 1px solid var(--border-soft); border-radius: 8px;
}
.kb-prev-tile {
  aspect-ratio: 9/16;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--border);
}
.kb-prev-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kling-batch-summary-text { font-size: 14px; line-height: 1.6; }
.kling-batch-summary-text b { color: var(--text); }

/* ════════════ KLING — fixes & polish ════════════ */

/* Kill white input/textarea backgrounds across all Kling pages */
.ae-field textarea,
.task-new-card input[type=text],
.kling-dropzone-actions input[type=text],
#kb-count, #kb-prompt, #k-prompt, #km-name, #km-tags,
#kj-status, #ki-status, #km-status {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 9px;
  font-family: inherit;
}
.ae-field textarea,
#kb-prompt, #k-prompt {
  width: 100%;
  padding: 10px 12px;
  font-size: 13.5px;
  resize: vertical;
}
.task-new-card input[type=text],
.kling-dropzone-actions input[type=text] {
  padding: 10px 12px;
  font-size: 13.5px;
}
.ae-field textarea:focus,
.task-new-card input[type=text]:focus,
.kling-dropzone-actions input[type=text]:focus,
#kb-count:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(43,155,255,.15);
}

/* Drag-and-drop upload zone */
.kling-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center;
  min-height: 150px;
  padding: 28px 20px;
  border: 2px dashed var(--border);
  border-radius: 12px;
  background: var(--panel-2);
  cursor: pointer;
  transition: all var(--transition);
}
.kling-dropzone:hover {
  border-color: var(--accent);
  background: rgba(43,155,255,.04);
}
.kling-dropzone.dragover {
  border-color: var(--accent);
  background: rgba(43,155,255,.10);
  transform: scale(1.01);
}
.kling-dropzone > i { width: 32px; height: 32px; color: var(--accent-2); }
.kling-dropzone-text { font-size: 14px; color: var(--muted); }
.kling-dropzone-text b { color: var(--text); }
.kling-dropzone-file {
  font-size: 12.5px; color: var(--muted);
  min-height: 16px;
}
.kling-dropzone-file.has-file {
  color: var(--accent-2); font-weight: 600;
}
.kling-dropzone-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px;
}
.kling-dropzone-actions input[type=text] { flex: 1; min-width: 200px; }

/* Model cards (grid on /kling/models) */
.kling-model-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition);
}
.kling-model-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.kling-model-link {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  text-decoration: none; color: inherit;
}
.kling-model-info h3 { margin: 0; font-size: 15px; font-weight: 600; }
.kling-model-info .small { margin-top: 2px; }
.kling-model-del {
  position: absolute; top: 12px; right: 12px;
}

/* Kling model-detail hero title with avatar */
.kling-detail-title { display: flex; align-items: center; gap: 14px; }
.kling-detail-title .avatar.large {
  width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
.kling-detail-title .avatar.large.fallback {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; font-weight: 700; font-size: 22px;
}

/* ════════════ CASH OUT (Earnings page) ════════════ */
.cashout-card { padding: 18px 20px; }
.cashout-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 4px;
}
.cashout-table { margin-top: 14px; }
/* Dark custom checkbox — native ones render light on macOS */
.cashout-table input[type=checkbox] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  background: var(--panel-2);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all var(--transition);
  vertical-align: middle;
}
.cashout-table input[type=checkbox]:hover:not(:disabled) { border-color: var(--accent); }
.cashout-table input[type=checkbox]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.cashout-table input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 1.5px;
  width: 4px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.cashout-table input[type=checkbox]:disabled { opacity: 0.35; cursor: not-allowed; }
.cashout-row-disabled { opacity: 0.5; }
.cashout-badge {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  border: 1px solid var(--border);
}
.cashout-badge i { width: 12px; height: 12px; margin-right: 3px; }
.cashout-badge.ok   { color: var(--ok-2);  background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.3); }
.cashout-badge.off  { color: var(--muted); background: var(--panel-2); }
.cashout-badge.warn { color: #fbbf24; background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.3); }
.cashout-badge.fail { color: var(--danger); background: rgba(244,63,94,.10); border-color: rgba(244,63,94,.3); }
.cashout-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 14px; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--border-soft);
}

/* Kling — multi-file upload progress */
.kling-upload-progress { margin-top: 14px; }
.kling-upload-bar-wrap {
  height: 8px; border-radius: 999px;
  background: var(--panel-2);
  overflow: hidden;
  margin-bottom: 8px;
}
.kling-upload-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #2b9bff, #6fb8ff);
  border-radius: 999px;
  transition: width .2s ease;
}
.kling-upload-log {
  list-style: none; margin: 8px 0 0; padding: 0;
  max-height: 160px; overflow-y: auto;
  font-size: 12.5px;
}
.kling-upload-log li {
  padding: 5px 0;
  border-top: 1px solid var(--border-soft);
  color: var(--danger);
}
.kling-upload-log li b { color: var(--text); }

/* Kling — storage usage strip */
.kling-storage {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  margin-top: 16px;
}
.kling-storage-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 10px;
  font-size: 13.5px;
}
.kling-storage-bar-wrap {
  height: 8px; border-radius: 999px;
  background: var(--panel-2); overflow: hidden;
}
.kling-storage-bar {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #2b9bff, #6fb8ff);
  transition: width .4s ease;
}
.kling-storage-bar.warn   { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.kling-storage-bar.danger { background: linear-gradient(90deg, #ef4444, #fb7185); }

/* Kling — count badge in page titles */
.kling-count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 11px;
  font-size: 14px; font-weight: 600;
  color: var(--accent-2);
  vertical-align: 3px;
  margin-left: 6px;
}

/* ── Kling — motion library poster tile (click to load video) ──
   The tile defines a true 9:16 box. The poster <img> and the swapped-in
   <video> both ABSOLUTELY fill it (inset:0) — this is the only reliable way
   to beat the older `.kling-gallery-item img,video { aspect-ratio: 1 }` rule
   above, which would otherwise squish the poster into a square. */
.kling-video-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #000;
  cursor: pointer;
  overflow: hidden;
  display: block;
}
.kling-gallery-item .kling-video-tile > img,
.kling-gallery-item .kling-video-tile > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;          /* kill the inherited square aspect-ratio */
  object-fit: cover;
  display: block;
  background: #000;
}
.kling-play-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.25);
  transition: background var(--transition);
  z-index: 2;
}
.kling-video-tile:hover .kling-play-overlay { background: rgba(0,0,0,.45); }
.kling-play-overlay i {
  width: 44px; height: 44px;
  color: #fff;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.6));
}

/* ──────────────── Photoshoot (Seedream) ──────────────── */
.ps-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 980px) { .ps-grid { grid-template-columns: 1fr; } }

.ps-compose h2, .ps-models h2, .ps-queue-card h2 { margin-top: 0; }

.ps-field { display: block; margin-bottom: 12px; }
.ps-field > span {
  display: block; font-size: 12px; color: var(--muted);
  margin-bottom: 5px; font-weight: 600;
}
.ps-field select, .ps-field input, .ps-field textarea {
  width: 100%; background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius-sm); padding: 9px 11px;
  font-size: 13px; font-family: inherit;
}
.ps-field textarea { resize: vertical; line-height: 1.5; }
.ps-row { display: flex; gap: 10px; }
.ps-field--sm { flex: 1; }

.ps-hint { font-size: 12px; color: var(--muted); margin: 4px 0 12px; }
.ps-hint a { color: var(--accent-2); }
.ps-ok { color: var(--ok-2) !important; }
.ps-warn { color: var(--amber-2) !important; }

/* Auto-describe drop zone */
.ps-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 22px 14px; cursor: pointer;
  background: var(--bg-2); border: 2px dashed var(--border);
  border-radius: var(--radius-sm); transition: border-color var(--transition), background var(--transition);
}
.ps-dropzone:hover { border-color: var(--accent); }
.ps-dropzone.is-over {
  border-color: var(--accent); background: var(--accent-glow);
}
.ps-dropzone i { width: 26px; height: 26px; color: var(--accent-2); }
.ps-dropzone-main { font-size: 13px; font-weight: 600; color: var(--text-2); }
.ps-dropzone-sub { font-size: 11.5px; color: var(--muted); }

/* Description library — compact thumbnail grid + detail panel */
.ps-pool-head {
  display: flex; align-items: center; gap: 8px; margin: 14px 0 7px;
}
.ps-pool-title { font-size: 12px; font-weight: 600; color: var(--muted); }
.ps-pool-count {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 8px; font-size: 11px;
  color: var(--text-2); font-variant-numeric: tabular-nums;
}
.ps-pool-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 6px; max-height: 248px; overflow-y: auto; padding: 2px;
  background: var(--bg-2); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.ps-pool-empty {
  grid-column: 1 / -1; font-size: 12px; text-align: center; padding: 24px 8px;
}
.ps-tile {
  position: relative; aspect-ratio: 2/3; padding: 0; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden; transition: border-color var(--transition);
}
.ps-tile:hover { border-color: var(--accent-2); }
.ps-tile.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ps-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-tile-badge {
  position: absolute; top: 4px; right: 4px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 2px var(--bg-2);
}
.ps-pool-detail {
  display: flex; gap: 11px; margin-top: 9px; padding: 10px;
  background: var(--panel-2); border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
}
.ps-detail-thumb {
  width: 84px; height: 126px; object-fit: cover; flex-shrink: 0;
  border-radius: 8px; border: 1px solid var(--border);
}
.ps-detail-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ps-detail-json {
  flex: 1; max-height: 150px; overflow: auto; margin: 0;
  background: var(--bg-2); border: 1px solid var(--border-soft);
  border-radius: 8px; padding: 8px;
  font-size: 11px; line-height: 1.45; color: var(--text-2);
  white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, monospace;
}
.ps-detail-actions { display: flex; gap: 6px; }

/* Dark scrollbars — the bright default ones look wrong on the dark theme */
.ps-pool-grid::-webkit-scrollbar,
.ps-detail-json::-webkit-scrollbar,
#ps-prompt::-webkit-scrollbar,
.ps-jobs::-webkit-scrollbar {
  width: 10px; height: 10px;
}
.ps-pool-grid::-webkit-scrollbar-track,
.ps-detail-json::-webkit-scrollbar-track,
#ps-prompt::-webkit-scrollbar-track,
.ps-jobs::-webkit-scrollbar-track {
  background: var(--bg); border-radius: 8px;
}
.ps-pool-grid::-webkit-scrollbar-thumb,
.ps-detail-json::-webkit-scrollbar-thumb,
#ps-prompt::-webkit-scrollbar-thumb,
.ps-jobs::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 8px; border: 2px solid var(--bg);
}
.ps-pool-grid::-webkit-scrollbar-thumb:hover,
.ps-detail-json::-webkit-scrollbar-thumb:hover,
#ps-prompt::-webkit-scrollbar-thumb:hover,
.ps-jobs::-webkit-scrollbar-thumb:hover {
  background: var(--muted-2);
}
.ps-pool-grid, .ps-detail-json, #ps-prompt { scrollbar-width: thin; scrollbar-color: var(--border) var(--bg); }

.ps-compose-actions {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px;
}
.ps-est { font-size: 13px; font-weight: 600; }
.ps-submit-msg { margin-top: 10px; font-size: 13px; }

.ps-models-head, .ps-queue-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.ps-models-actions { display: flex; gap: 6px; }
.ps-model-list { display: flex; flex-direction: column; gap: 8px; }
.ps-model-card {
  display: flex; align-items: center; gap: 11px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 11px;
  color: var(--text); transition: border-color var(--transition);
}
.ps-model-card:hover { border-color: var(--accent); color: var(--text); }
.ps-model-card > i[data-lucide] { width: 16px; height: 16px; color: var(--muted); margin-left: auto; }
.ps-model-avatar {
  width: 38px; height: 38px; border-radius: 50%; overflow: hidden;
  background: var(--accent-glow); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.ps-model-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ps-model-avatar span { color: var(--accent-2); font-weight: 700; }
.ps-model-name { font-weight: 600; font-size: 13px; }
.ps-model-sub { font-size: 11px; }

/* Queue — same row layout as the Kling queue (reuses .kling-job* classes) */
.ps-filters { display: flex; gap: 8px; }
.ps-jobs { display: flex; flex-direction: column; }

/* Output preview tile — click to open the lightbox */
.ps-img-tile {
  position: relative; width: 175px; aspect-ratio: 9 / 16;
  border-radius: 10px; overflow: hidden; background: #000;
  flex-shrink: 0; cursor: pointer;
}
.ps-img-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-img-tile .kling-status-dot { position: absolute; top: 8px; left: 8px; z-index: 2; }
.ps-img-tile:hover img { filter: brightness(1.08); }
.ps-img-tile.placeholder {
  background: var(--panel-2); border: 1px dashed var(--border);
  display: flex; align-items: center; justify-content: center; cursor: default;
}

/* Lightbox — full-size output view */
.ps-lightbox {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 8, 12, .9); cursor: zoom-out; padding: 32px;
}
.ps-lightbox[hidden] { display: none; }
.ps-lightbox img {
  max-width: 100%; max-height: 100%;
  border-radius: 10px; box-shadow: var(--shadow);
}

/* Model detail — 4 slots */
.ps-slot-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
@media (max-width: 900px) { .ps-slot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ps-slot-grid { grid-template-columns: 1fr; } }
.ps-slot { padding: 12px; }
.ps-slot-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ps-slot-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-glow); color: var(--accent-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.ps-slot-label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.ps-slot-body { aspect-ratio: 3/4; }
.ps-slot-img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
}
.ps-slot-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; height: 100%;
  border: 2px dashed var(--border); border-radius: var(--radius-sm);
  color: var(--muted); cursor: pointer; font-size: 12px;
  transition: border-color var(--transition), color var(--transition);
}
.ps-slot-empty:hover { border-color: var(--accent); color: var(--accent-2); }
.ps-slot-empty i { width: 28px; height: 28px; }
.ps-slot-tools { display: flex; gap: 6px; margin-top: 8px; }
.ps-slot-tools .btn { flex: 1; justify-content: center; }
.ps-slot-status { margin-top: 8px; font-size: 11px; color: var(--text-2); }

/* ──────────────── AI Tools tab switcher (Kling ⇄ Photoshoot) ──────────────── */
.aitools-tabs {
  display: flex; gap: 6px; margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.aitools-tab {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 18px; font-size: 14px; font-weight: 600;
  color: var(--muted); border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: color var(--transition), border-color var(--transition);
}
.aitools-tab:hover { color: var(--text-2); }
.aitools-tab i { width: 16px; height: 16px; }
.aitools-tab.active {
  color: var(--accent-2);
  border-bottom-color: var(--accent);
}

/* Auto-describe-from-motion toolbar */
.ps-pool-toolbar {
  display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap;
}
.ps-pool-toolbar input[type=number] {
  width: 58px; background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); border-radius: 8px; padding: 6px 8px; font-size: 13px;
}
.ps-motion-msg { font-size: 12px; }

/* Number-input spinners — dark-themed so the arrows aren't bright white */
.ae-card input[type=number],
.ps-pool-toolbar input[type=number],
.ps-field input[type=number] {
  color-scheme: dark;
}

/* Themed confirm modal */
.ps-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 8, 12, .72); backdrop-filter: blur(3px);
}
.ps-modal[hidden] { display: none; }
.ps-modal-box {
  width: 100%; max-width: 380px; margin: 16px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px;
}
.ps-modal-msg {
  margin: 0 0 18px; font-size: 14.5px; color: var(--text);
  line-height: 1.5;
}
.ps-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Reference-photo slot — drag-over highlight */
.ps-slot.is-drop {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 22px var(--accent-glow);
}
.ps-slot.is-drop .ps-slot-empty { border-color: var(--accent); color: var(--accent-2); }

.ps-pool-clear { margin-left: auto; }
.ps-pool-clear:hover { color: var(--danger); border-color: var(--danger); }

/* Earnings — per-model "Paid" circle marker */
.earn-check-col { width: 46px; }
.earn-check-cell { text-align: center; }
.earn-check {
  width: 22px; height: 22px; padding: 0;
  border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel-2); border: 1.5px solid var(--border);
  color: transparent; transition: all var(--transition);
}
.earn-check i { width: 13px; height: 13px; stroke-width: 3; }
.earn-check:hover { border-color: var(--ok); }
.earn-check.is-paid {
  background: var(--ok); border-color: var(--ok); color: #06281d;
}
.earn-check:disabled { opacity: .5; cursor: default; }
tr.is-paid { background: rgba(16, 185, 129, .055); }

/* Kling/Wan engine badge in the queue */
.kling-engine-badge {
  display: inline-block; vertical-align: middle;
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  padding: 1px 7px; border-radius: 999px; margin-left: 6px;
  text-transform: uppercase;
}
.kling-engine--kling { background: var(--accent-glow); color: var(--accent-2); }
.kling-engine--wan   { background: rgba(16,185,129,.16); color: var(--ok-2); }

/* Constrained-background toggle on character image tiles */
.ki-bg-toggle.is-on {
  background: rgba(245, 158, 11, .18);
  border-color: rgba(245, 158, 11, .55);
  color: var(--amber-2);
}
.ki-bg-toggle.is-on:hover { background: rgba(245, 158, 11, .28); }

/* Kling face-element card (model detail page) */
.ki-element-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ki-element-status {
  font-size: 12px; font-weight: 600; padding: 3px 10px;
  border-radius: 999px; background: var(--panel-2); color: var(--muted);
  border: 1px solid var(--border);
}
.ki-element-status--pending { background: rgba(245,158,11,.16); color: var(--amber-2); border-color: rgba(245,158,11,.45); }
.ki-element-status--ok      { background: rgba(16,185,129,.18); color: var(--ok-2); border-color: rgba(16,185,129,.45); }
.ki-element-status--fail    { background: rgba(244,63,94,.16); color: var(--danger); border-color: rgba(244,63,94,.45); }

/* ──────────────── Expenses tracker ──────────────── */
.expenses-add { padding: 14px 16px; margin-bottom: 14px; }
.exp-add-form {
  display: grid; gap: 10px; align-items: center;
  grid-template-columns: 150px 1fr 130px auto;
}
.exp-add-form input[type=date],
.exp-add-form input[type=text],
.exp-add-form input[type=number],
.exp-search {
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); border-radius: 9px; padding: 9px 11px;
  font-size: 13px; font-family: inherit;
  color-scheme: dark;     /* dark calendar picker + number spinner */
}
.exp-add-form input[type=date]::-webkit-calendar-picker-indicator {
  filter: invert(0.7) brightness(1.1);
  cursor: pointer;
}
.exp-add-form input:focus,
.exp-search:focus { outline: none; border-color: var(--accent); }
.exp-add-form button { white-space: nowrap; }
.exp-add-msg { margin-top: 10px; font-size: 12.5px; }
.exp-add-msg.ok   { color: var(--ok-2); }
.exp-add-msg.warn { color: var(--amber-2); }

.exp-controls {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.exp-search { flex: 1; min-width: 180px; padding: 8px 11px; }
.exp-total-wrap {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 999px;
}
.exp-total-wrap b { font-size: 15px; color: var(--ok-2); }

/* Layout: table on the left, chart panel on the right */
.exp-layout {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start;
}
.exp-chart-card { padding: 16px 18px; }
.exp-chart-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.exp-chart-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
.exp-chart-head .ae-card-icon { width: 28px; height: 28px; }
.exp-chart-head .ae-card-icon i { width: 14px; height: 14px; }

.exp-bars { display: flex; flex-direction: column; gap: 12px; }
.exp-bar {}
.exp-bar-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; margin-bottom: 4px;
}
.exp-bar-label {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1;
}
.exp-bar-val { font-size: 12.5px; font-weight: 700; color: var(--accent-2); font-variant-numeric: tabular-nums; }
.exp-bar-track {
  height: 7px; background: var(--bg-2); border-radius: 999px; overflow: hidden;
  border: 1px solid var(--border-soft);
}
.exp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #0e3a86, #2b9bff, #6fb8ff);
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.exp-bar-sub { margin-top: 3px; }

@media (max-width: 980px) {
  .exp-layout { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .exp-add-form { grid-template-columns: 1fr; }
}

/* Undo toast (Expenses page deletion) */
.exp-undo-toast {
  position: fixed; top: 20px; left: 50%;
  transform: translateX(-50%) translateY(-30px);
  background: var(--panel); border: 1px solid var(--border);
  color: var(--text); padding: 11px 16px; border-radius: 12px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: var(--shadow);
  z-index: 9999; opacity: 0;
  font-size: 13px; min-width: 280px; max-width: 460px;
  overflow: hidden;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.exp-undo-toast.show {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
.exp-undo-msg { flex: 1; }
.exp-undo-btn {
  background: var(--accent); border: 1px solid var(--accent); color: #fff;
  padding: 6px 12px; border-radius: 8px; cursor: pointer; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  font-family: inherit;
}
.exp-undo-btn:hover { filter: brightness(1.12); }
.exp-undo-btn i { width: 13px; height: 13px; }
.exp-undo-progress {
  position: absolute; bottom: 0; left: 0; height: 2px;
  background: var(--accent);
  animation: exp-undo-shrink 5s linear forwards;
}
@keyframes exp-undo-shrink { from { width: 100%; } to { width: 0%; } }

/* ──────────────── Avatar-grid model picker ──────────────── */
.model-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 10px;
  padding: 6px;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.model-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 6px;
  background: var(--panel-2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  appearance: none; -webkit-appearance: none;
  transition: border-color var(--transition), transform var(--transition),
              box-shadow var(--transition), background var(--transition);
}
.model-tile:hover {
  border-color: var(--accent-2);
  transform: translateY(-2px);
}
.model-tile.selected {
  border-color: var(--accent);
  background: rgba(43, 155, 255, .10);
  box-shadow: 0 0 0 1px var(--accent), 0 10px 22px -10px var(--accent-glow);
}
.model-tile img,
.model-tile-letter {
  width: 60px; height: 60px; border-radius: 50%;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.model-tile img { object-fit: cover; display: block; }
.model-tile-letter {
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-glow); color: var(--accent-2);
  font-size: 22px; font-weight: 700;
}
.model-tile-name {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  text-align: center; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.model-tile-meta { font-size: 10.5px; color: var(--muted); }

/* Dark scrollbar for the avatar-grid model picker + preview tile grid */
.model-picker::-webkit-scrollbar,
.kb-prev-grid::-webkit-scrollbar { width: 10px; }
.model-picker::-webkit-scrollbar-track,
.kb-prev-grid::-webkit-scrollbar-track {
  background: var(--bg); border-radius: 8px;
}
.model-picker::-webkit-scrollbar-thumb,
.kb-prev-grid::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 8px; border: 2px solid var(--bg);
}
.model-picker::-webkit-scrollbar-thumb:hover,
.kb-prev-grid::-webkit-scrollbar-thumb:hover {
  background: var(--muted-2);
}
.model-picker, .kb-prev-grid {
  scrollbar-width: thin;
  scrollbar-color: var(--border) var(--bg);
}

/* Description tile feedback signals — score pill + dimmed-bad state */
.ps-tile-score {
  position: absolute; bottom: 4px; left: 4px; right: 4px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  background: rgba(10,12,18,.78);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 10px; font-weight: 700; color: var(--text-2);
  pointer-events: none;
  backdrop-filter: blur(4px);
}
.ps-tile-score i { width: 10px; height: 10px; }
.ps-tile-score.is-good { color: var(--ok-2); border-color: rgba(16,185,129,.4); }
.ps-tile-score.is-bad  { color: var(--danger); border-color: rgba(244,63,94,.4); }
.ps-tile.is-bad { opacity: .55; }
.ps-tile.is-bad:hover { opacity: 1; }

.ps-detail-stats {
  font-size: 12.5px; padding: 6px 9px;
  background: var(--bg-2); border: 1px solid var(--border-soft);
  border-radius: 8px; margin-bottom: 6px;
}
.ps-detail-stats b { color: var(--text); }

/* ──────────────── Photoshoot Library + Outputs pages ──────────────── */
.lib-group { margin-bottom: 14px; }
.lib-model-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-glow); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.lib-model-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lib-model-avatar span { color: var(--accent-2); font-weight: 700; }
.lib-photo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.lib-photo {
  position: relative; aspect-ratio: 3/4;
  border-radius: 10px; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--border);
  display: block;
}
.lib-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-photo-slot {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(10,12,18,.92), transparent);
  color: var(--text); font-size: 11px; font-weight: 600;
  padding: 14px 8px 7px; text-align: center;
}

/* Outputs gallery */
.po-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}
.po-tile {
  position: relative; aspect-ratio: 9/16;
  border-radius: 10px; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--border);
  cursor: zoom-in;
}
.po-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.po-tile-badges {
  position: absolute; top: 6px; right: 6px;
  display: flex; flex-direction: column; gap: 4px;
}
.po-tile-dot {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,12,18,.78);
}
.po-tile-dot i { width: 12px; height: 12px; }
.po-tile-dot.is-approved { background: rgba(16,185,129,.85); color: #fff; }
.po-tile-dot.is-flagged  { background: rgba(244,63,94,.85); color: #fff; }
.po-tile-dot.is-pushed   { background: rgba(43,155,255,.85); color: #fff; }
.po-tile-meta {
  position: absolute; top: 6px; left: 6px;
  font-size: 10.5px; font-weight: 600; color: var(--text);
  background: rgba(10,12,18,.7); padding: 2px 7px; border-radius: 999px;
  backdrop-filter: blur(4px);
}
.po-tile-actions {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; gap: 3px; padding: 6px;
  background: linear-gradient(to top, rgba(10,12,18,.92), transparent);
  opacity: 0; transition: opacity var(--transition);
}
.po-tile:hover .po-tile-actions { opacity: 1; }
.po-tile-actions button,
.po-tile-actions a {
  flex: 1; background: rgba(29,34,48,.92); border: 1px solid var(--border);
  color: var(--text-2); border-radius: 6px; padding: 5px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none;
  appearance: none; -webkit-appearance: none;
}
.po-tile-actions button:hover,
.po-tile-actions a:hover { color: var(--text); border-color: var(--accent); }
.po-tile-actions button i,
.po-tile-actions a i { width: 13px; height: 13px; }
.po-tile-actions button:disabled { opacity: .45; cursor: default; }
.po-rate.is-on[data-rate="approved"] { color: var(--ok-2); border-color: var(--ok); }
.po-rate.is-on[data-rate="flagged"]  { color: var(--danger); border-color: var(--danger); }

/* ──────────────── Approved Videos page ──────────────── */
.kapp-group { margin-bottom: 14px; }
.kapp-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.kapp-tile {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.kapp-tile-vid {
  position: relative; aspect-ratio: 9/16;
  border-radius: 9px; overflow: hidden;
  background: #000; cursor: pointer;
}
.kapp-tile-vid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kapp-tile-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.25); transition: background var(--transition);
}
.kapp-tile-vid:hover .kapp-tile-play { background: rgba(0,0,0,.45); }
.kapp-tile-play i { width: 32px; height: 32px; color: #fff;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.6)); }

.kapp-tile-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.kapp-tile-actions { display: flex; gap: 6px; align-items: center; }
.kapp-tile-actions .btn { flex: 1; justify-content: center; }
.kapp-tile-actions .icon-only { flex: 0 0 auto; }
.kapp-upload.is-done {
  background: rgba(16,185,129,.18);
  border-color: rgba(16,185,129,.5);
  color: var(--ok-2);
}
.kapp-warn { color: var(--amber-2); display: inline-flex; align-items: center; gap: 4px; }
.kapp-warn i { width: 13px; height: 13px; }
.kapp-warn a { color: var(--accent-2); text-decoration: underline; }

/* ──────────────── Photoshoot description library page ──────────────── */
.plib-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.plib-tile {
  position: relative; aspect-ratio: 2/3;
  border-radius: 8px; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--border);
  cursor: pointer; transition: border-color var(--transition), transform var(--transition);
}
.plib-tile:hover { border-color: var(--accent-2); transform: translateY(-2px); }
.plib-tile.is-bad { opacity: .55; }
.plib-tile.is-bad:hover { opacity: 1; }
.plib-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Library detail modal */
.plib-modal {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,8,12,.86); backdrop-filter: blur(4px);
  padding: 24px;
}
.plib-modal[hidden] { display: none; }
.plib-modal-box {
  position: relative;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px;
  width: 100%; max-width: 880px; max-height: 90vh;
  overflow: auto; box-shadow: var(--shadow);
}
.plib-modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.plib-modal-close:hover { color: var(--text); border-color: var(--accent); }
.plib-modal-close i { width: 16px; height: 16px; }
.plib-modal-grid {
  display: grid; grid-template-columns: 240px 1fr; gap: 18px;
}
@media (max-width: 700px) { .plib-modal-grid { grid-template-columns: 1fr; } }
.plib-modal-thumb {
  width: 100%; aspect-ratio: 2/3; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--border);
}
.plib-modal-body { display: flex; flex-direction: column; gap: 12px; }
.plib-modal-stats {
  font-size: 13px; padding: 8px 10px;
  background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: 8px;
}
.plib-modal-stats b { color: var(--text); }
.plib-modal-json {
  margin: 0; max-height: 360px; overflow: auto;
  background: var(--bg-2); border: 1px solid var(--border-soft);
  border-radius: 8px; padding: 12px;
  font-size: 12px; line-height: 1.5; color: var(--text-2);
  white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, monospace;
}
.plib-modal-actions { display: flex; gap: 8px; }

/* ──────────────── Ingest page ──────────────── */
.ing-grid { display: flex; flex-direction: column; gap: 18px; }
.ing-route-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 720px) { .ing-route-row { grid-template-columns: 1fr; } }

.ing-drop {
  border: 2px dashed rgba(43,155,255,.35);
  border-radius: 14px;
  padding: 40px 22px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  background: rgba(43,155,255,.04);
}
.ing-drop:hover { border-color: rgba(43,155,255,.7); background: rgba(43,155,255,.08); }
.ing-drop.ing-drop-hot {
  border-color: #2b9bff;
  background: rgba(43,155,255,.14);
}
.ing-drop .ing-drop-icon { width: 38px; height: 38px; color: #6fb8ff; }
.ing-drop-title { font-size: 16px; font-weight: 600; margin: 12px 0 4px; }
.ing-drop-sub {
  font-size: 13px; color: var(--text-muted, #9aa3b2);
  max-width: 520px; margin: 0 auto 16px; line-height: 1.5;
}

.ing-summary { font-size: 12px; }

.ing-queue-empty {
  padding: 30px 8px; text-align: center;
  color: var(--text-muted, #9aa3b2); font-size: 14px;
}
.ing-table-wrap { overflow-x: clip; }
.ing-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ing-table th {
  text-align: left; font-weight: 600; font-size: 11px;
  color: var(--text-muted, #9aa3b2); text-transform: uppercase; letter-spacing: .04em;
  padding: 10px 10px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.ing-table td {
  padding: 12px 10px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  vertical-align: top;
}
.ing-file { font-weight: 500; word-break: break-all; }
.ing-route { color: var(--text-muted, #9aa3b2); font-size: 12px; }
.ing-size  { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-muted, #9aa3b2); }

.ing-kind {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; text-transform: capitalize;
  background: rgba(255,255,255,.06); color: #cbd5e1;
}
.ing-kind-video { background: rgba(96,165,250,.15); color: #93c5fd; }
.ing-kind-image { background: rgba(244,114,182,.15); color: #f9a8d4; }

.ing-pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
}
.ing-pill-wait { background: rgba(148,163,184,.18); color: #cbd5e1; }
.ing-pill-work { background: rgba(43,155,255,.22); color: #a8d3ff; }
.ing-pill-ok   { background: rgba(16,185,129,.20); color: #6ee7b7; }
.ing-pill-err  { background: rgba(244,63,94,.20);  color: #fda4af; }
.ing-pill-cancel { background: rgba(148,163,184,.18); color: #94a3b8; }
.ing-pill-pulse {
  position: relative;
  animation: ing-pulse 1.4s ease-in-out infinite;
}
.ing-pill-pulse::before {
  content: ""; display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; opacity: .85;
  margin-right: 6px; vertical-align: -1px;
  animation: ing-pulse-dot 1.4s ease-in-out infinite;
}
@keyframes ing-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}
@keyframes ing-pulse-dot {
  0%, 100% { transform: scale(1);   opacity: .9; }
  50%      { transform: scale(1.4); opacity: .4; }
}

/* Upload-in-flight progress widget (under the drop zone) */
.ing-up {
  margin-top: 16px;
  background: rgba(43,155,255,.06);
  border: 1px solid rgba(43,155,255,.30);
  border-radius: 12px;
  padding: 12px 14px;
}
.ing-up-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.ing-up-label { flex: 1; font-size: 13px; font-weight: 600; color: #e2e8f0; }
.ing-up-pct {
  font-size: 12px; font-weight: 700;
  color: #6fb8ff; font-variant-numeric: tabular-nums;
}
.ing-up-spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(43,155,255,.25);
  border-top-color: #6fb8ff;
  border-radius: 50%;
  animation: ing-spin .8s linear infinite;
}
@keyframes ing-spin { to { transform: rotate(360deg); } }
.ing-up-bar {
  height: 6px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
.ing-up-bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #6fb8ff, #2b9bff);
  transition: width .15s ease;
}
.ing-up-detail {
  margin-top: 6px; font-size: 11px;
  color: var(--text-muted, #9aa3b2);
  font-variant-numeric: tabular-nums;
}
.ing-err {
  font-size: 11px; color: #fda4af; margin-top: 6px;
  font-family: ui-monospace, monospace; word-break: break-word;
  max-width: 380px;
}
.ing-actions-cell { white-space: nowrap; text-align: right; }
.ing-act i { width: 14px; height: 14px; transition: color .12s ease; }
.ing-act {
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
}
.ing-act:hover {
  background: rgba(43,155,255,.14) !important;
  border-color: rgba(43,155,255,.55) !important;
}
.ing-act:hover i { color: #a8d3ff; }
.ing-act:active { transform: scale(0.94); }

/* Auto-organize: iOS-style toggle pill */
.ing-switch-row {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 16px; padding: 10px 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  cursor: pointer; user-select: none;
  transition: background .15s, border-color .15s;
}
.ing-switch-row:hover {
  background: rgba(43,155,255,.06);
  border-color: rgba(43,155,255,.30);
}
.ing-switch-row:has(input:checked) {
  background: rgba(43,155,255,.12);
  border-color: rgba(43,155,255,.55);
}
.ing-switch-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: #e2e8f0;
}
.ing-switch-label i { width: 15px; height: 15px; color: #6fb8ff; }
.ing-switch {
  position: relative; display: inline-block;
  width: 36px; height: 20px;
}
.ing-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.ing-switch-knob {
  position: absolute; inset: 0;
  background: rgba(255,255,255,.15);
  border-radius: 999px;
  transition: background .15s;
}
.ing-switch-knob::before {
  content: ""; position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform .15s ease;
}
.ing-switch input:checked + .ing-switch-knob { background: #2b9bff; }
.ing-switch input:checked + .ing-switch-knob::before { transform: translateX(16px); }

/* Account tile picker on /ingest — replaces the names-only <select>
   with a wrappable grid of avatar tiles. Click selects, mirroring the
   value into a hidden <select> so the rest of the upload flow is
   unchanged. */
.ing-account-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.ing-account-tile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  cursor: pointer;
  color: var(--text, #e8ecf3);
  font-size: 13px;
  transition: all .12s ease;
}
.ing-account-tile:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
}
.ing-account-tile.is-active {
  background: rgba(99,102,241,.18);
  border-color: rgba(99,102,241,.6);
  color: #c7d2fe;
}
.ing-account-tile-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(0,0,0,.3);
  flex: 0 0 30px;
  display: inline-flex; align-items: center; justify-content: center;
}
.ing-account-tile-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.ing-account-tile-letter {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px;
  color: #c7d2fe;
  background: rgba(99,102,241,.25);
}
.ing-account-tile-name { white-space: nowrap; }

/* Bulk-action toolbar — sits above the queue table, only visible when
   at least one row is checked. Mirrors the per-row action vocabulary. */
.ing-bulkbar {
  display: flex; align-items: center; gap: 8px;
  background: rgba(99,102,241,.10);
  border: 1px solid rgba(99,102,241,.22);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 13px;
}
/* CSS `display: flex` overrides the HTML `hidden` attribute, so we
   have to re-assert hiding here. Same trick for .ing-last-upload. */
.ing-bulkbar[hidden],
.ing-last-upload[hidden] { display: none !important; }
.ing-bulkbar-count { font-weight: 600; color: #c7d2fe; }
.ing-bulkbar-spacer { flex: 1; }
.ing-bulkbar .btn { padding: 6px 10px; font-size: 12px; }
.ing-bulkbar .btn i { width: 14px; height: 14px; margin-right: 4px; }
/* Kill the white default focus outline that looked like a bug. Keep
   keyboard accessibility via a soft purple :focus-visible state. */
.ing-bulkbar .btn:focus { outline: none; }
.ing-bulkbar .btn:focus-visible {
  outline: 2px solid rgba(99,102,241,.45);
  outline-offset: 1px;
}

/* Round-circle checkboxes (select-all + per-row), themed to match the
   DazeHub purple accents. Replaces the native browser square. */
.ing-th-select { width: 32px; padding-right: 4px; }
.ing-td-select { width: 32px; padding-right: 4px; text-align: center; }
input.ing-select,
#ing-select-all {
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.03);
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  transition: all .12s ease;
  flex: 0 0 18px;
}
input.ing-select:hover,
#ing-select-all:hover {
  border-color: rgba(99,102,241,.55);
  background: rgba(99,102,241,.10);
}
input.ing-select:checked,
#ing-select-all:checked {
  background: #6366f1;
  border-color: #6366f1;
}
input.ing-select:checked::after,
#ing-select-all:checked::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* Indeterminate state (header checkbox when only some rows are checked) */
#ing-select-all:indeterminate {
  background: #6366f1;
  border-color: #6366f1;
}
#ing-select-all:indeterminate::after {
  content: "";
  position: absolute;
  left: 3px; top: 6px;
  width: 8px; height: 2px;
  background: #fff;
  transform: none;
  border: 0;
}
input.ing-select:focus-visible,
#ing-select-all:focus-visible {
  outline: 2px solid rgba(99,102,241,.45);
  outline-offset: 1px;
}

/* Clickable thumbnail (done rows) + full-size preview modal.
   The modal element is created on-click and torn down on-close so the
   queue carries zero overhead until the user actually wants to preview. */
.ing-thumb-clickable { cursor: pointer; }
.ing-thumb-clickable:hover { outline: 2px solid rgba(99,102,241,.6); outline-offset: 1px; }
.ing-preview-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.85);
  z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.ing-preview-modal {
  position: relative;
  max-width: min(90vw, 1200px);
  max-height: 90vh;
  display: flex; align-items: center; justify-content: center;
}
.ing-preview-modal video,
.ing-preview-modal img {
  max-width: 100%;
  max-height: 90vh;
  display: block;
  border-radius: 8px;
  background: #000;
}
.ing-preview-close {
  position: absolute;
  top: -14px; right: -14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(20,22,28,.95);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.ing-preview-close:hover { background: rgba(40,42,48,.95); }
.ing-preview-close i { width: 18px; height: 18px; }

/* Queue pagination — "Show more" footer row */
.ing-showmore-row td.ing-showmore-cell {
  text-align: center;
  padding: 16px 8px;
  background: transparent;
}
.ing-showmore-row .btn { min-width: 200px; }

/* "Last upload" strip — sits above the queue table, shows the most
   recent drop's tally (new / dupes / unsupported / failed) distinct
   from the queue's running total. Dismissible. */
.ing-last-upload {
  display: flex; align-items: center; gap: 10px;
  background: rgba(99,102,241,.08);
  border: 1px solid rgba(99,102,241,.18);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13px;
}
.ing-last-upload-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(99,102,241,.18);
  color: #a5b4fc;
  flex: 0 0 auto;
}
.ing-last-upload-icon i { width: 16px; height: 16px; }
.ing-last-upload-text { flex: 1; }
.ing-last-upload-err { color: #fb7185; }
.ing-last-upload-time { font-size: 12px; flex: 0 0 auto; }
.ing-last-upload-dismiss {
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-muted, #9aa3b2);
  padding: 4px; border-radius: 6px;
}
.ing-last-upload-dismiss:hover {
  background: rgba(255,255,255,.06);
  color: var(--text, #e8ecf3);
}
.ing-last-upload-dismiss i { width: 14px; height: 14px; }

/* Ingest queue: approve / flag button states. Mirror Kling colors so
   the operator's mental model is consistent across the dashboard. */
.ing-act.is-approved {
  background: rgba(16,185,129,.15);
  border-color: rgba(16,185,129,.5);
  color: #34d399;
}
.ing-act.is-flagged {
  background: rgba(244,63,94,.15);
  border-color: rgba(244,63,94,.5);
  color: #fb7185;
}

/* Flag-correction picker modal */
.ing-flag-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(2px);
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.ing-flag-modal {
  background: var(--panel, #1a1d24);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 12px;
  padding: 24px;
  max-width: 560px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.ing-flag-modal h3 { margin: 0 0 8px; }
.ing-flag-modal p.muted { margin: 0 0 18px; font-size: 13px; }
.ing-flag-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.ing-flag-grid .btn { justify-content: flex-start; font-size: 13px; padding: 10px 12px; }
.ing-flag-cat:hover {
  background: rgba(99,102,241,.15);
  border-color: rgba(99,102,241,.5);
  color: #a5b4fc;
}
.ing-flag-actions { display: flex; justify-content: flex-end; }

/* Queue account filter dropdown */
.ing-filter {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text, #e8ecf3);
  border-radius: 8px;
  padding: 4px 24px 4px 10px;
  font-size: 12px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%239aa3b2' d='M5 6 0 0h10z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  cursor: pointer;
}
.ing-filter:hover { background-color: rgba(255,255,255,.07); }
.ing-filter:focus { outline: none; border-color: rgba(255,255,255,.18); }

/* Queue thumbnails */
.ing-th-thumb { width: 104px; }
.ing-td-thumb { width: 104px; padding-right: 8px; }
.ing-thumb {
  position: relative;
  width: 96px; height: 96px;
  border-radius: 10px; overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
.ing-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ing-thumb-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #64748b;
}
.ing-thumb-fallback i { width: 32px; height: 32px; }
.ing-thumb-play {
  position: absolute; right: 6px; bottom: 6px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(0,0,0,.65);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
}
.ing-thumb-play i { width: 14px; height: 14px; }

.ing-route-meta {
  margin-top: 4px; font-size: 11px;
  color: var(--text-muted, #9aa3b2);
  display: flex; align-items: center; gap: 6px;
}
.ing-route-pending { font-style: italic; }
.ing-conf {
  display: inline-block; padding: 1px 6px;
  border-radius: 999px; font-weight: 600; font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.ing-conf-hi  { background: rgba(16,185,129,.18); color: #6ee7b7; }
.ing-conf-mid { background: rgba(234,179,8,.18);  color: #fde68a; }
.ing-conf-lo  { background: rgba(244,63,94,.18);  color: #fda4af; }

/* ──────────────── Models page (chatter reference cards) ──────────────── */

/* Big stat card under the picker */
.md-card { margin-top: 16px; }
.md-card-head {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
}
.md-head-meta { flex: 1; min-width: 0; }
.md-head-meta h3 { margin: 0; font-size: 22px; font-weight: 700; }
.md-head-actions {
  display: flex; align-items: center; gap: 10px;
  margin-left: auto;
  flex-wrap: wrap;
}
.md-snap-age { white-space: nowrap; }

/* Big circular avatar in the header — matches dashboard card style */
.md-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, #0e3a86, #1f86f0);
  display: flex; align-items: center; justify-content: center;
}
.md-avatar img { width: 100%; height: 100%; object-fit: cover; }
.md-avatar-letter { font-size: 24px; font-weight: 700; color: #fff; }

/* Auto-pulled stats — grid of small key/value tiles */
.md-stats-grid, .md-body-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.md-stat {
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.md-stat-lbl {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.md-stat-val {
  font-size: 15px; font-weight: 600;
  color: var(--text);
  display: flex; align-items: center; gap: 6px;
}
/* Weight input lives inside a stat tile — make it look unbordered */
.md-stat-val input[type="number"] {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 15px; font-weight: 600;
  width: 56px;
  padding: 0;
  font-family: inherit;
}
.md-stat-val input[type="number"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(43,155,255,.35);
  border-radius: 4px;
}
.md-stat-val input[type="number"]::-webkit-outer-spin-button,
.md-stat-val input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.md-unit {
  font-size: 12.5px; color: var(--muted); font-weight: 500;
}

/* Section spacing inside the card body */
.md-section { margin-top: 16px; }
.md-section .ae-field-label { display: block; margin-bottom: 8px; }

.md-bio {
  margin: 0;
  font-size: 14px; line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
}

/* Chips for languages / interests / hashtags */
.md-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.md-chip {
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  color: var(--text);
  font-size: 12px; font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Story textarea — match the editor look used elsewhere */
.md-section textarea#md-story {
  width: 100%;
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  font-size: 14px; line-height: 1.5;
  font-family: inherit;
  resize: vertical;
  min-height: 160px;
}
.md-section textarea#md-story:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(43,155,255,.15);
}

/* Spin animation for the refresh button icon — reuses dashboard pattern */
.md-head-actions .spin { animation: md-refresh-spin 0.9s linear infinite; }
@keyframes md-refresh-spin { from {transform: rotate(0)} to {transform: rotate(360deg)} }

/* ════════════════════════════════════════════════════════════════════
   Fans / Spenders page — adapted from the Claude-design mockup.
   All rules scoped under .dh-fans so the new tri-accent palette
   (orchid · ember · cyan) doesn't bleed into the rest of the app.
   ════════════════════════════════════════════════════════════════════ */
.dh-fans {
  /* tri-accent palette (only live inside .dh-fans) */
  --fans-orchid:     #2b9bff;
  --fans-orchid-2:   #2b9bff;
  --fans-orchid-3:   #1668d6;
  --fans-orchid-glow: rgba(43,155,255,.20);
  --fans-ember:      #fb923c;
  --fans-ember-2:    #f97316;
  --fans-ember-3:    #c2410c;
  --fans-ember-glow: rgba(251,146,60,.20);
  --fans-cyan:       #67e8f9;
  --fans-cyan-2:     #22d3ee;
  --fans-cyan-3:     #0891b2;
  --fans-cyan-glow:  rgba(103,232,249,.18);
  --fans-gold:       #fbbf24;
  --fans-silver:     #cbd5e1;
  --fans-bronze:     #d97706;
  --fans-ok:         #34d399;
  --fans-danger:     #f87171;
}

.dh-fans .fans-page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 22px;
}
.dh-fans .fans-page-head h1 {
  font-size: 30px; line-height: 1.1; font-weight: 700;
  letter-spacing: -0.025em; margin: 0 0 4px;
}
.dh-fans .fans-page-head p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.dh-fans .fans-actions { display: flex; gap: 8px; flex-shrink: 0; }

.dh-fans .fans-eyebrow {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.dh-fans .fans-eyebrow.ember { color: var(--fans-ember); }

/* ── Podium ─────────────────────────────────────────────────────── */
.dh-fans .podium-wrap {
  background:
    radial-gradient(700px 350px at 50% -10%, rgba(251,146,60,.10), transparent 70%),
    var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 24px;
  padding: 28px 24px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}
.dh-fans .podium-wrap::before {
  content: ""; position: absolute; top: 0; left: 20%; right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--fans-ember), transparent);
  opacity: 0.4;
}
.dh-fans .podium-head { text-align: center; margin-bottom: 24px; }
.dh-fans .podium-head h2 {
  font-size: 26px; font-weight: 800;
  letter-spacing: -0.02em; margin: 0;
}
.dh-fans .podium-head p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }

.dh-fans .podium {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 18px;
  align-items: end;
  max-width: 760px;
  margin: 0 auto;
}
.dh-fans .podium-spot {
  display: flex; flex-direction: column; align-items: center;
  padding: 22px 16px 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 50%),
    var(--panel-2);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  position: relative;
  transition: transform 220ms cubic-bezier(.4,0,.2,1);
}
.dh-fans .podium-spot:hover { transform: translateY(-3px); }
.dh-fans .podium-spot.empty { opacity: 0.5; min-height: 180px; justify-content: center; }
.dh-fans .podium-rank {
  position: absolute; top: -16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: var(--bg-2);
  color: var(--text);
  border: 2px solid var(--bg);
}
.dh-fans .podium-spot.gold {
  background:
    linear-gradient(180deg, rgba(251,191,36,.12), transparent 60%),
    var(--panel-2);
  border-color: rgba(251,191,36,.25);
  box-shadow: 0 0 0 1px rgba(251,191,36,.10) inset, 0 30px 80px -40px rgba(251,191,36,.4);
}
.dh-fans .podium-spot.gold .podium-rank   { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #422006; }
.dh-fans .podium-spot.silver .podium-rank { background: linear-gradient(135deg, #e2e8f0, #94a3b8); color: #1e293b; }
.dh-fans .podium-spot.bronze .podium-rank { background: linear-gradient(135deg, #fcd34d, #b45309); color: #422006; }
.dh-fans .podium-spot.silver { border-color: rgba(203,213,225,.18); }
.dh-fans .podium-spot.bronze { border-color: rgba(217,119,6,.20); }

.dh-fans .podium-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  margin-bottom: 10px;
  background-color: var(--panel-2);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border-soft);
}
.dh-fans .podium-spot.gold .podium-avatar {
  width: 80px; height: 80px;
  box-shadow: 0 0 0 3px rgba(251,191,36,.25);
}
.dh-fans .p-handle {
  font-weight: 700; font-size: 14.5px;
  letter-spacing: -0.005em;
  margin-bottom: 2px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dh-fans .p-account {
  font-size: 11.5px; color: var(--muted);
  margin-bottom: 10px;
}
.dh-fans .p-amount {
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  color: var(--fans-ember);
}
.dh-fans .podium-spot.gold .p-amount { font-size: 28px; color: var(--fans-gold); }
.dh-fans .p-foot {
  display: flex; gap: 8px; margin-top: 10px;
  font-size: 10.5px; color: var(--muted);
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.dh-fans .podium-online {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--fans-cyan);
}
.dh-fans .podium-online-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--fans-cyan);
  box-shadow: 0 0 4px var(--fans-cyan-glow);
}

/* ── Tier badge ─────────────────────────────────────────────────── */
.dh-fans .tier {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 4px;
}
.dh-fans .tier i { width: 10px; height: 10px; }
.dh-fans .tier.whale   { background: rgba(43,155,255,.14); color: var(--fans-orchid); border: 1px solid rgba(43,155,255,.25); }
.dh-fans .tier.heavy   { background: rgba(251,146,60,.14);  color: var(--fans-ember);  border: 1px solid rgba(251,146,60,.25); }
.dh-fans .tier.regular { background: var(--panel-2);        color: var(--muted);       border: 1px solid var(--border-soft); }
.dh-fans .tier.cold    { background: rgba(103,232,249,.08); color: var(--fans-cyan-3); border: 1px solid rgba(103,232,249,.20); }

/* ── KPI row ────────────────────────────────────────────────────── */
.dh-fans .kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 22px;
}
.dh-fans .kpi {
  background: var(--panel);
  padding: 18px 22px;
  position: relative;
}
.dh-fans .kpi-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--muted);
}
.dh-fans .kpi-label i { width: 12px; height: 12px; }
.dh-fans .kpi-value {
  font-size: 30px; font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.05;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
.dh-fans .kpi-foot {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px;
  font-size: 12px; color: var(--muted);
}
.dh-fans .kpi.accent::before,
.dh-fans .kpi.accent-ember::before,
.dh-fans .kpi.accent-cyan::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
}
.dh-fans .kpi.accent::before       { background: linear-gradient(180deg, var(--fans-orchid), var(--fans-orchid-3)); box-shadow: 0 0 12px var(--fans-orchid-glow); }
.dh-fans .kpi.accent-ember::before { background: linear-gradient(180deg, var(--fans-ember),  var(--fans-ember-3));  box-shadow: 0 0 12px var(--fans-ember-glow); }
.dh-fans .kpi.accent-cyan::before  { background: linear-gradient(180deg, var(--fans-cyan),   var(--fans-cyan-3));   box-shadow: 0 0 12px var(--fans-cyan-glow); }

@media (max-width: 960px) {
  .dh-fans .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .dh-fans .podium { grid-template-columns: 1fr; max-width: 380px; }
}

/* ── Leaderboard panel ──────────────────────────────────────────── */
.dh-fans .fans-panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 200px),
    var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  overflow: hidden;
}
.dh-fans .fans-panel-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border-soft);
}
.dh-fans .ph-icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  color: var(--muted);
}
.dh-fans .ph-icon.ember {
  background: rgba(251,146,60,.13); border-color: rgba(251,146,60,.25);
  color: var(--fans-ember);
}
.dh-fans .ph-icon i { width: 16px; height: 16px; }
.dh-fans .fans-panel-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.dh-fans .ph-count {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: var(--panel-2); color: var(--muted);
  border: 1px solid var(--border-soft);
  font-variant-numeric: tabular-nums;
}
.dh-fans .ph-spacer { flex: 1; }

/* ── Toolbar ────────────────────────────────────────────────────── */
.dh-fans .fans-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
.dh-fans .fans-search {
  position: relative;
  flex: 1; max-width: 340px; min-width: 180px;
}
.dh-fans .fans-search i {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  color: var(--muted);
  pointer-events: none;
}
.dh-fans .fans-search input {
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  padding: 9px 13px 9px 38px;
  color: var(--text);
  font-family: inherit; font-size: 13px;
  width: 100%;
  transition: all 220ms cubic-bezier(.4,0,.2,1);
}
.dh-fans .fans-search input:focus {
  outline: none;
  border-color: var(--fans-orchid);
  box-shadow: 0 0 0 3px var(--fans-orchid-glow);
}
.dh-fans .fans-search input::placeholder { color: var(--muted); opacity: 0.7; }

.dh-fans .fans-toolbar .spacer { flex: 1; }
.dh-fans .filter-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px;
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  font-size: 12px; font-weight: 600;
  color: var(--muted);
  cursor: pointer; font-family: inherit;
  transition: all 220ms cubic-bezier(.4,0,.2,1);
}
.dh-fans .filter-chip:hover { border-color: var(--border); color: var(--text); }
.dh-fans .filter-chip i { width: 12px; height: 12px; }
.dh-fans .filter-chip .count {
  background: var(--panel-2);
  padding: 1px 6px; border-radius: 999px;
  font-size: 10.5px;
  margin-left: 1px;
  font-variant-numeric: tabular-nums;
}
.dh-fans .filter-chip.active {
  background: rgba(43,155,255,.10);
  border-color: rgba(43,155,255,.30);
  color: var(--fans-orchid);
}
.dh-fans .filter-chip.active .count { background: rgba(43,155,255,.18); color: var(--fans-orchid); }
.dh-fans .filter-chip .dot-cyan {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--fans-cyan);
  box-shadow: 0 0 6px var(--fans-cyan-glow);
}

.dh-fans .fans-acc-form { display: inline; }
.dh-fans .fans-acc-form select {
  appearance: none; -webkit-appearance: none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237c6f88' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")
    no-repeat right 12px center,
    var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  padding: 7px 32px 7px 12px;
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
  font-family: inherit;
}

/* ── Leaderboard table ──────────────────────────────────────────── */
.dh-fans .fans-table-wrap { overflow-x: auto; }
.dh-fans .fans-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.dh-fans .fans-table thead th {
  padding: 12px 22px;
  text-align: left;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--muted);
  background: var(--bg-2);
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
}
.dh-fans .fans-table tbody td {
  padding: 14px 22px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.dh-fans .fans-table tbody tr:last-child td { border-bottom: none; }
.dh-fans .fans-table tbody tr { transition: background 220ms cubic-bezier(.4,0,.2,1); }
.dh-fans .fans-table tbody tr:hover td { background: rgba(43,155,255,.04); }
.dh-fans .fans-table tbody tr.row-rank {
  background: linear-gradient(90deg, rgba(43,155,255,.04), transparent 40%);
}
.dh-fans .fans-table th.num, .dh-fans .fans-table td.num {
  text-align: right; font-variant-numeric: tabular-nums;
}
.dh-fans .fans-table th.center, .dh-fans .fans-table td.center { text-align: center; }

.dh-fans .rank-cell {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 600; font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: center;
  width: 56px;
}
.dh-fans .rank-cell.top { color: var(--fans-gold); }
.dh-fans .row-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: block;
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
}
.dh-fans .handle-wrap {
  display: flex; align-items: center; gap: 8px;
}
.dh-fans .handle-name { font-weight: 700; font-size: 13px; }

/* Inline spend bar — kept compact so two of these (Lifetime + Wallet) plus
   the rank / avatar / handle / creator / last-online columns all fit on a
   ~900px-wide content area without the last column getting clipped. */
.dh-fans .spend-bar {
  display: flex; align-items: center; gap: 8px;
  min-width: 130px; justify-content: flex-end;
}
.dh-fans .spend-bar .bar {
  flex: 1; max-width: 50px;
  height: 5px; border-radius: 3px;
  background: var(--panel-2); overflow: hidden;
}
.dh-fans .spend-bar .bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--fans-ember-3), var(--fans-ember));
  border-radius: 3px;
}
.dh-fans .spend-bar.green .bar > span {
  background: linear-gradient(90deg, var(--fans-ok), #6ee7b7);
}
.dh-fans .spend-bar .amt {
  font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 13px;
  white-space: nowrap; min-width: 76px;
  color: var(--text);
}
.dh-fans .spend-bar.muted .amt { color: var(--muted); font-weight: 500; }

.dh-fans .online-now {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--fans-cyan);
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;            /* keep "Online now" on one line */
}
/* The legacy global .online-now::before adds a GREEN dot via pseudo-element.
   Inside the Fans page we render our own cyan dot explicitly (<span class="dot-cyan">)
   so the inherited ::before would render a second, wrong-colored dot. Kill it. */
.dh-fans .online-now::before { content: none; display: none; }
/* The last-online cell sometimes gets squeezed when the spend-bar columns
   eat horizontal space — give it a floor so the dot + text always fit. */
.dh-fans .fans-table td:last-child { min-width: 130px; white-space: nowrap; }
.dh-fans .dot-cyan {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fans-cyan);
  box-shadow: 0 0 6px var(--fans-cyan-glow);
  display: inline-block;
  flex-shrink: 0;                 /* don't let flex collapse the dot to nothing */
}

.dh-fans .tbl-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px;
  border-top: 1px solid var(--border-soft);
  font-size: 12px; color: var(--muted);
  background: var(--bg-2);
}
.dh-fans .inline-icon { width: 13px; height: 13px; vertical-align: -2px; }

/* Refresh button spin (one-shot when manually clicked) */
.dh-fans .spin-once { animation: dh-spin-once 0.7s ease-out 1; }
@keyframes dh-spin-once {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}

/* ════════════════════════════════════════════════════════════════════
   Sidebar — new design (replaces the old .sidebar-links markup).
   Scoped local variables so the warm plum palette doesn't bleed into
   the rest of the app's cooler theme.
   ════════════════════════════════════════════════════════════════════ */
.sidebar {
  /* Local design tokens — only live inside the sidebar (and the topbar
     status pill below). Keeps the rest of the app on its existing palette. */
  --sb-orchid:      #2b9bff;
  --sb-orchid-3:    #1668d6;
  --sb-orchid-glow: rgba(43,155,255,.20);
  --sb-ember:       #fb923c;
  --sb-ember-glow:  rgba(251,146,60,.20);
  --sb-cyan:        #67e8f9;
  --sb-cyan-glow:   rgba(103,232,249,.18);
  --sb-bg:          #100c18;
  --sb-panel:       #1c1729;
  --sb-panel-2:     #251f37;
  --sb-border-soft: #241e36;
  --sb-text:        #f4ecdd;
  --sb-text-3:      #a497a9;
  --sb-muted:       #7c6f88;
  --sb-muted-2:     #4d4459;

  position: fixed; top: 0; left: 0; bottom: 0;
  width: 224px;
  padding: 24px 16px 18px;
  background:
    linear-gradient(180deg, rgba(43,155,255,.03), transparent 280px),
    rgba(12,9,18,.7);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter:         blur(20px) saturate(160%);
  border-right: 1px solid var(--sb-border-soft);
  display: flex; flex-direction: column;
  z-index: 40;
  /* Keep room for the rest of the page to the right */
  overflow-y: auto;
  scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }
/* Desktop only — on mobile (≤880px) the sidebar becomes an off-canvas drawer
   and the body must have no left padding (handled by the mobile media query).
   Scoped to min-width so this rule, which sits after that media query in the
   file, can't override the mobile reset and leave a 224px gap on phones. */
@media (min-width: 881px) {
  body.has-sidebar { padding-left: 224px; }
}

/* Brand wordmark — glyph removed, wordmark sized up */
.sidebar .brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px 24px;
  text-decoration: none;
  color: var(--sb-text);
}
.sidebar .brand .brand-logo { display: none; }   /* legacy raw <img> — hidden */
/* Brand logo recolored to the Hub gradient. The PNG is a transparent
   padlock outline; we use it as an alpha MASK and paint an orchid→purple
   gradient through it, so the lock takes on the brand color instead of the
   faint near-white strokes. mask-image URL is set inline in the markup
   (Jinja url_for) — here we only define geometry + the gradient fill. */
.sidebar .brand-logo-mask {
  width: 34px; height: 34px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #a8d3ff 0%, #2b9bff 45%, #1668d6 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  /* 150% zooms past the transparent padding baked into the 1024² PNG so the
     lock fills the box instead of floating tiny in the middle. */
  -webkit-mask-size: 150%;       mask-size: 150%;
  filter: drop-shadow(0 2px 6px rgba(43,155,255,.35));
}
.sidebar .brand-name {
  font-weight: 800; font-size: 22px;     /* up from 16px */
  letter-spacing: -0.025em;
  color: var(--sb-text);
}
.sidebar .brand-name span { color: var(--sb-orchid); }

/* Nav groups */
.sidebar .nav-group { margin-top: 14px; }
.sidebar .nav-group-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sb-muted-2);
  padding: 0 12px 8px;
}
.sidebar .nav {
  display: flex; flex-direction: column; gap: 2px;
}
.sidebar .nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--sb-text-3);
  font-size: 13.5px; font-weight: 500;
  text-decoration: none;
  transition: background 220ms cubic-bezier(.4,0,.2,1),
              color      220ms cubic-bezier(.4,0,.2,1);
  white-space: nowrap;
}
.sidebar .nav a:hover { background: var(--sb-panel); color: var(--sb-text); }
.sidebar .nav a > svg,
.sidebar .nav a > [data-lucide],
.sidebar .nav a > i {
  width: 16px; height: 16px; flex-shrink: 0;
}
.sidebar .nav a.active {
  color: var(--sb-text);
  background: linear-gradient(135deg, rgba(43,155,255,.22), rgba(43,155,255,.06));
  box-shadow: 0 0 0 1px rgba(43,155,255,.18) inset;
}
.sidebar .nav a.active::before {
  content: ""; width: 3px; height: 16px;
  background: var(--sb-orchid);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--sb-orchid-glow);
  margin-left: -4px;
  margin-right: 7px;
}
.sidebar .nav a.active > svg,
.sidebar .nav a.active > [data-lucide],
.sidebar .nav a.active > i { color: var(--sb-orchid); }

/* Badge counts (Fans 316, Tasks 4, Accounts 15) */
.sidebar .nav-count {
  margin-left: auto;
  font-size: 10.5px; font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--sb-panel-2);
  color: var(--sb-muted);
  font-variant-numeric: tabular-nums;
}
.sidebar .nav a.active .nav-count {
  background: rgba(43,155,255,.18);
  color: var(--sb-orchid);
}

/* Footer: operator card + logout */
.sidebar .sidebar-footer {
  margin-top: auto;     /* push to bottom whatever the content height */
  padding-top: 14px;
  border-top: 1px solid var(--sb-border-soft);
  display: flex; flex-direction: column; gap: 6px;
}
.sidebar .op-card {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--sb-panel);
  border: 1px solid var(--sb-border-soft);
}
.sidebar .op-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sb-orchid), var(--sb-ember));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; color: #fff;
  flex-shrink: 0;
}
.sidebar .op-name {
  font-size: 12.5px; font-weight: 600; color: var(--sb-text); line-height: 1.2;
}
.sidebar .op-role { font-size: 11px; color: var(--sb-muted); }

.sidebar .nav-item-logout {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: 9px;
  color: var(--sb-muted);
  font-size: 13.5px; font-weight: 500;
  text-decoration: none;
  transition: background 220ms cubic-bezier(.4,0,.2,1),
              color      220ms cubic-bezier(.4,0,.2,1);
}
.sidebar .nav-item-logout:hover { background: var(--sb-panel); color: var(--sb-text); }
.sidebar .nav-item-logout > i { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Top-right status pill (new design) ───────────────────────────── */
.topbar-right {
  position: absolute; top: 18px; right: 28px;
  z-index: 36;
  display: flex; gap: 8px; align-items: center;
}
.topbar-right .status-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px 6px 10px;
  border-radius: 999px;
  background: rgba(28,23,41,.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter:         blur(10px);
  border: 1px solid rgba(36,30,54,1);
  font-size: 12px; font-weight: 600;
  color: #a497a9;
  letter-spacing: -0.005em;
}
.topbar-right .status-pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4d4459;
  flex-shrink: 0;
}
.topbar-right .status-pill.live  { color: #67e8f9; border-color: rgba(103,232,249,.25); }
.topbar-right .status-pill.live .dot {
  background: #67e8f9;
  animation: sb-pill-pulse 1.5s infinite;
}
.topbar-right .status-pill.warn  { color: #fbbf24; border-color: rgba(251,191,36,.25); }
.topbar-right .status-pill.warn .dot { background: #fbbf24; }
.topbar-right .status-pill.danger { color: #f87171; border-color: rgba(248,113,113,.25); }
.topbar-right .status-pill.danger .dot { background: #f87171; }
@keyframes sb-pill-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(103,232,249,.7); }
  70%  { box-shadow: 0 0 0 8px rgba(103,232,249,0); }
  100% { box-shadow: 0 0 0 0 rgba(103,232,249,0); }
}

/* ── Collapsed state ───────────────────────────────────────────────
   Click the .sidebar-toggle-tab chevron to flip body.sidebar-collapsed.
   Sidebar shrinks to 64px, group labels + nav labels + op-card text
   + brand wordmark all hide. Tooltips appear on hover so you still
   know what each icon does. */
body.sidebar-collapsed.has-sidebar { padding-left: 64px; }
body.sidebar-collapsed .sidebar { width: 64px; padding-left: 8px; padding-right: 8px; }
/* Hide all text inside the collapsed sidebar */
body.sidebar-collapsed .sidebar .brand-name,
body.sidebar-collapsed .sidebar .nav-group-label,
body.sidebar-collapsed .sidebar .nav a span,
body.sidebar-collapsed .sidebar .nav-item-logout span,
body.sidebar-collapsed .sidebar .op-card > div,
body.sidebar-collapsed .sidebar .nav-count { display: none; }
/* The brand logo stays — it becomes the collapsed-mode icon. The old
   "hide every span in .brand" rule (line ~250) has higher specificity than
   a plain .brand-logo-mask selector, so we re-assert with .brand .brand-logo-mask
   (one extra class) to win the cascade and force it visible + centered. */
body.sidebar-collapsed .sidebar .brand .brand-logo-mask {
  display: block !important;
  width: 30px; height: 30px;
  margin: 0 auto;
}
/* Center the icons */
body.sidebar-collapsed .sidebar .brand,
body.sidebar-collapsed .sidebar .nav a,
body.sidebar-collapsed .sidebar .nav-item-logout {
  justify-content: center;
  padding-left: 10px; padding-right: 10px;
}
body.sidebar-collapsed .sidebar .op-card {
  padding: 6px; justify-content: center;
}
/* Drop the active-state ::before rail in collapsed mode — it visually
   overlaps the icon. The background tint alone signals active. */
body.sidebar-collapsed .sidebar .nav a.active::before { display: none; }
/* Hover tooltip for collapsed icons — shows the label as a pill to the
   right of the icon on hover. */
body.sidebar-collapsed .sidebar .nav a { position: relative; }
body.sidebar-collapsed .sidebar .nav a:hover::after {
  content: attr(title);
  position: absolute; left: 100%; top: 50%;
  transform: translateY(-50%); margin-left: 12px;
  background: var(--sb-panel);
  border: 1px solid var(--sb-border-soft);
  color: var(--sb-text);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12.5px; font-weight: 600;
  white-space: nowrap;
  z-index: 50;
  pointer-events: none;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.6);
}

/* Collapse chevron tab — keep the original circular button design from the
   pre-redesign sidebar (defined ~line 155). The new sidebar is 224px wide
   (was 220), so nudge the resting position by 4px to keep the button
   centered on the right edge. Hover styling and the collapsed-mode
   left:51px stay as defined upstream. */
.sidebar-toggle-tab { left: 211px; }    /* 224 − 13 (half the button) */

/* ════════════════════════════════════════════════════════════════════
   Mobile overrides for the redesigned sidebar + status pill.
   Placed at the very end so they win the cascade over the new top-level
   .sidebar / .topbar-right rules (which otherwise leak desktop layout
   onto phones — e.g. the 224px body gap and the corner pill position).
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  body.has-sidebar { padding-left: 0; }            /* no desktop sidebar gap */
  .sidebar { transform: translateX(-100%); width: 250px; }  /* off-canvas drawer */
  body.nav-open .sidebar { transform: translateX(0); }      /* hamburger opens it */
  .sidebar-toggle-tab { display: none !important; }         /* no collapse on mobile */
  /* status pill clears the hamburger button */
  .topbar-right { top: 13px; right: 64px; }
}

/* ════════════════════════════════════════════════════════════════════
   Insights — "Top performers on Slushy's feed" visual grid
   ════════════════════════════════════════════════════════════════════ */
.feedtop-filters { display: inline-flex; gap: 6px; }
.feedtop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.ft-card {
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .12s ease, border-color .12s ease;
}
.ft-card:hover { transform: translateY(-2px); border-color: var(--border); }
.ft-thumb {
  position: relative;
  aspect-ratio: 3 / 4;
  background: linear-gradient(135deg, #2a2140, #1b1530);
  overflow: hidden;
}
.ft-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* placeholder when there's no thumb (older pre-thumbnail samples) */
.ft-thumb.ft-noimg::after {
  content: "no preview";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase;
}
.ft-thumb.ft-noimg img { display: none; }
.ft-rank {
  position: absolute; top: 8px; left: 8px;
  background: rgba(0,0,0,.6); color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  backdrop-filter: blur(4px);
}
.ft-badge {
  position: absolute; top: 8px; right: 8px;
  background: rgba(0,0,0,.6); color: #fff;
  font-size: 10.5px; font-weight: 700;
  padding: 2px 6px; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 3px;
  backdrop-filter: blur(4px);
}
.ft-badge i { width: 12px; height: 12px; }
.ft-badge.ft-video { color: #fca5a5; }
.ft-badge.ft-photo { color: #93c5fd; }
.ft-views {
  position: absolute; bottom: 8px; left: 8px;
  background: rgba(0,0,0,.65); color: #fff;
  font-size: 12px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 4px;
  backdrop-filter: blur(4px);
  font-variant-numeric: tabular-nums;
}
.ft-views i { width: 12px; height: 12px; }
.ft-meta { padding: 10px 11px 12px; display: flex; flex-direction: column; gap: 5px; }
.ft-creator { font-size: 12.5px; font-weight: 700; color: var(--accent-2); }
.ft-caption {
  font-size: 12px; color: var(--text-2); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ft-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ft-tag {
  font-size: 10.5px; color: var(--accent-2);
  background: rgba(43,155,255,.10);
  border: 1px solid rgba(43,155,255,.20);
  padding: 1px 6px; border-radius: 999px;
}
.ft-stats { margin-top: 2px; }
.ft-date { display: inline-flex; align-items: center; gap: 4px; }
.ft-date i { width: 11px; height: 11px; }

/* Feed-top: clickable cards + play button + lightbox player */
.ft-thumb.ft-playable { cursor: pointer; }
.ft-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  color: #fff; transition: transform .12s ease, background .12s ease;
  pointer-events: none;
}
.ft-play i { width: 22px; height: 22px; margin-left: 2px; }
.ft-thumb.ft-playable:hover .ft-play { transform: translate(-50%,-50%) scale(1.12); background: rgba(43,155,255,.75); }

.ft-lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.85); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
}
.ft-lb-body { max-width: min(90vw, 520px); max-height: 88vh; display: flex; flex-direction: column; align-items: center; }
.ft-lb-body video, .ft-lb-body img {
  max-width: 100%; max-height: 84vh;
  border-radius: 12px; box-shadow: 0 24px 80px -20px rgba(0,0,0,.8);
  background: #000;
}
.ft-lb-loading { padding: 40px; font-size: 14px; }
.ft-lb-note {
  margin-top: 10px; font-size: 12px; color: var(--amber-2);
  background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.25);
  padding: 6px 12px; border-radius: 8px;
}
.ft-lb-close {
  position: fixed; top: 20px; right: 24px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: none; color: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  z-index: 201;
}
.ft-lb-close:hover { background: rgba(255,255,255,.22); }
.ft-lb-close i { width: 20px; height: 20px; }
.ft-import {
  margin-top: 8px; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 10px; border-radius: 8px;
  background: rgba(43,155,255,.12); border: 1px solid rgba(43,155,255,.30);
  color: var(--accent-2); font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: background .12s ease, border-color .12s ease;
}
.ft-import:hover { background: rgba(43,155,255,.22); border-color: rgba(43,155,255,.5); }
.ft-import:disabled { opacity: .7; cursor: default; }
.ft-import i { width: 13px; height: 13px; }
.ft-import--done { background: rgba(16,185,129,.14); border-color: rgba(16,185,129,.35); color: #6ee7b7; }

/* Photoshoot — "pick a video to describe" modal */
.ps-vidpick-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.7); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 28px;
}
/* The `display:flex` above overrides the HTML `hidden` attribute, which would
   otherwise keep the modal closed. Re-assert that hidden means hidden. */
.ps-vidpick-backdrop[hidden] { display: none; }
.ps-vidpick-modal {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 16px; padding: 20px; width: min(820px, 94vw);
  max-height: 86vh; display: flex; flex-direction: column;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.8);
}
.ps-vidpick-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.ps-vidpick-head h3 { margin: 0; font-size: 16px; }
.ps-vidpick-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px; overflow-y: auto; padding: 4px 2px; flex: 1;
}
.ps-vidpick-tile {
  position: relative; border-radius: 10px; overflow: hidden;
  border: 2px solid transparent; cursor: pointer; padding: 0; background: var(--bg-2);
  /* padding-bottom aspect hack (3:4 portrait) — reliable on <button>, where
     CSS `aspect-ratio` collapses the height to a thin strip. */
  height: 0; padding-bottom: 133%;
}
.ps-vidpick-tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ps-vidpick-noimg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 11px;
}
.ps-vidpick-tile.sel { border-color: var(--accent); }
.ps-vidpick-check {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--accent); color: #fff;
  display: none; align-items: center; justify-content: center;
}
.ps-vidpick-check i { width: 14px; height: 14px; }
.ps-vidpick-tile.sel .ps-vidpick-check { display: flex; }
.ps-vidpick-badge {
  position: absolute; top: 6px; left: 6px; background: rgba(43,155,255,.85);
  color: #fff; font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
}
.ps-vidpick-done {
  position: absolute; bottom: 6px; left: 6px; background: rgba(16,185,129,.85);
  color: #fff; font-size: 9.5px; font-weight: 600; padding: 1px 6px; border-radius: 999px;
}
.ps-vidpick-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); }