/* =========================================================================
   APP DASHBOARD — brand-aligned UI for the post-login surface
   Reuses every token from styles.css :root (clay/sage/dusk/butter/blush
   palette, Inter typography, --line, --cream, --shadow, --radius-*).
   ========================================================================= */
.app{display:grid;grid-template-columns:264px 1fr;min-height:100vh;background:var(--cream)}
.app *{box-sizing:border-box}

/* ── SIDEBAR ─────────────────────────────────────────────────────────── */
.app-side{position:sticky;top:0;height:100vh;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:22px 14px;z-index:40}
.app-brand{display:flex;align-items:center;gap:10px;padding:0 8px 18px;font-weight:700;font-size:18px;color:var(--ink);letter-spacing:-.028em;border-bottom:1px solid var(--line);margin-bottom:14px}
.app-brand .brand-logo-icon{width:32px;height:32px;flex:0 0 32px;filter:drop-shadow(0 4px 12px rgba(38,66,109,.18))}

.app-side nav{display:flex;flex-direction:column;gap:2px}
.app-side .nav-section-label{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:14px 12px 6px}

.app-nav-link{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:var(--ink-2);font-size:14px;font-weight:500;text-decoration:none;transition:background .15s ease,color .15s ease;letter-spacing:-.005em;cursor:pointer;border:none;background:transparent;width:100%;text-align:left;font-family:inherit;justify-content:flex-start}
.app-nav-link:hover{background:var(--cream-2);color:var(--ink)}
.app-nav-link.active{background:var(--clay-tint);color:var(--clay-deep);font-weight:600}
.app-nav-link.active svg{color:var(--clay-deep)}
.app-nav-link svg{width:18px;height:18px;flex-shrink:0;color:var(--muted);transition:color .15s ease}
.app-nav-link:hover svg{color:var(--ink-2)}
.app-nav-link .chev{margin-left:auto;width:14px;height:14px;color:var(--muted);transition:transform .2s ease}
.app-nav-link[aria-expanded="true"] .chev{transform:rotate(90deg)}

.app-nav-sub{display:none;flex-direction:column;gap:1px;margin:2px 0 6px 30px;padding-left:8px;border-left:1px solid var(--line)}
.app-nav-link[aria-expanded="true"] + .app-nav-sub{display:flex}
.app-nav-sub a{padding:7px 10px;font-size:13px;color:var(--muted);border-radius:8px;text-decoration:none;transition:.15s}
.app-nav-sub a:hover{background:var(--cream-2);color:var(--ink-2)}
.app-nav-sub a.active{color:var(--clay-deep);font-weight:600}

/* Sidebar footer — credit widget + buy CTA */
.app-side-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.credit-widget{background:linear-gradient(135deg,var(--clay-tint),var(--sand));border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:10px;position:relative;overflow:hidden}
.credit-widget::before{content:"";position:absolute;top:-30px;right:-20px;width:80px;height:80px;border-radius:50%;background:radial-gradient(closest-side,rgba(93,139,193,.18),transparent 70%);pointer-events:none}
.credit-widget .cw-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--clay-deep);font-weight:600;display:flex;align-items:center;gap:6px;margin-bottom:4px}
.credit-widget .cw-label svg{width:13px;height:13px}
.credit-widget .cw-num{font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1}
.credit-widget .cw-sub{font-size:12px;color:var(--muted);margin-top:4px}

/* ── MAIN ───────────────────────────────────────────────────────────── */
.app-main{display:flex;flex-direction:column;min-width:0}
.app-topbar{position:sticky;top:0;z-index:30;background:rgba(245,248,252,.85);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line);padding:18px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.app-page-title h1{font-size:24px;font-weight:700;color:var(--ink);letter-spacing:-.022em;margin:0;line-height:1.2}
.app-page-title p{font-size:13.5px;color:var(--muted);margin:2px 0 0;letter-spacing:-.005em}
.app-top-actions{display:flex;align-items:center;gap:14px}
.icon-btn{width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;cursor:pointer;color:var(--ink-2);position:relative;transition:.15s;text-decoration:none}
.icon-btn:hover{background:var(--cream-2);color:var(--ink);border-color:var(--line-strong)}
.icon-btn svg{width:18px;height:18px}
.icon-btn .dot{position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--blush);border:2px solid #fff}

.user-pill{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;background:#fff;border:1px solid var(--line);border-radius:999px;cursor:pointer;transition:.15s;text-decoration:none}
.user-pill:hover{background:var(--cream-2);border-color:var(--line-strong)}
.user-pill .ua{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--clay),var(--clay-deep));color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700}
.user-pill .ui{display:flex;flex-direction:column;line-height:1.2}
.user-pill .ui strong{font-size:13.5px;color:var(--ink);font-weight:600;letter-spacing:-.005em}
.user-pill .ui span{font-size:11.5px;color:var(--muted)}

/* ── CONTENT ─────────────────────────────────────────────────────────── */
.app-content{padding:28px 32px 60px;display:flex;flex-direction:column;gap:24px}
.app-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:0 1px 2px rgba(38,66,109,.04);transition:box-shadow .25s ease,transform .25s ease}
.app-card-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.app-card-head .h-ico{width:40px;height:40px;border-radius:12px;background:var(--clay-tint);color:var(--clay-deep);display:grid;place-items:center;flex-shrink:0}
.app-card-head .h-ico svg{width:20px;height:20px}
.app-card-head h2{font-size:18px;font-weight:700;color:var(--ink);margin:0;letter-spacing:-.018em;line-height:1.2}
.app-card-head p{font-size:13.5px;color:var(--muted);margin:2px 0 0}
.app-card-head .h-actions{margin-left:auto}

/* Stat cards row */
.stat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:8px}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.stat-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px -16px rgba(38,66,109,.16)}
.stat-card.clay   {background:linear-gradient(135deg,var(--clay-tint),#fff)}
.stat-card.sage   {background:linear-gradient(135deg,var(--sage-tint),#fff)}
.stat-card.dusk   {background:linear-gradient(135deg,var(--dusk-tint),#fff)}
.stat-card.butter {background:linear-gradient(135deg,var(--butter-tint),#fff)}
.stat-card.blush  {background:linear-gradient(135deg,var(--blush-tint),#fff)}
.stat-card .s-ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#fff;margin-bottom:14px}
.stat-card.clay   .s-ico{background:linear-gradient(135deg,var(--clay),var(--clay-deep))}
.stat-card.sage   .s-ico{background:linear-gradient(135deg,var(--sage),var(--sage-deep))}
.stat-card.dusk   .s-ico{background:linear-gradient(135deg,var(--dusk),var(--dusk-deep))}
.stat-card.butter .s-ico{background:linear-gradient(135deg,var(--butter),var(--butter-deep))}
.stat-card.blush  .s-ico{background:linear-gradient(135deg,var(--blush),var(--blush-deep))}
.stat-card .s-ico svg{width:18px;height:18px}
.stat-card .s-num{font-size:36px;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1;margin-bottom:6px}
.stat-card .s-label{font-size:14px;color:var(--ink-2);font-weight:600;letter-spacing:-.005em}
.stat-card .s-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.stat-card .s-trend{position:absolute;top:18px;right:18px;font-size:11.5px;padding:4px 9px;border-radius:999px;font-weight:600;letter-spacing:-.002em;display:inline-flex;align-items:center;gap:3px}
.stat-card .s-trend.up   {background:rgba(142,169,154,.18);color:var(--sage-deep)}
.stat-card .s-trend.down {background:rgba(198,144,151,.18);color:var(--blush-deep)}
.stat-card .s-trend svg{width:12px;height:12px}
.stat-card.promo .s-cta{margin-top:14px;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--butter-deep);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s ease}
.stat-card.promo .s-cta:hover{border-bottom-color:var(--butter-deep)}

/* Task counters row (lighter) */
.task-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.task-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;align-items:center;gap:14px;transition:transform .25s ease,box-shadow .25s ease}
.task-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px -10px rgba(38,66,109,.14)}
.task-card .t-ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex-shrink:0}
.task-card.completed .t-ico{background:var(--sage-tint);color:var(--sage-deep)}
.task-card.running   .t-ico{background:var(--clay-tint);color:var(--clay-deep)}
.task-card.pending   .t-ico{background:var(--butter-tint);color:var(--butter-deep)}
.task-card.failed    .t-ico{background:var(--blush-tint);color:var(--blush-deep)}
.task-card .t-num{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.022em;line-height:1}
.task-card .t-label{font-size:13px;color:var(--ink-2);font-weight:600;margin-top:2px}
.task-card .t-sub{font-size:11.5px;color:var(--muted);margin-top:1px}

/* Recent tasks table */
.tasks-table{width:100%;border-collapse:collapse;font-size:14px}
.tasks-table thead th{text-align:left;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:0 14px 12px;border-bottom:1px solid var(--line)}
.tasks-table tbody tr{transition:background .15s ease}
.tasks-table tbody tr:hover{background:var(--cream-2)}
.tasks-table tbody td{padding:14px;border-bottom:1px solid var(--line);color:var(--ink-2);letter-spacing:-.005em}
.tasks-table tbody tr:last-child td{border-bottom:none}
.tasks-table .t-name{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:500}
.tasks-table .t-name .ti{width:30px;height:30px;border-radius:8px;background:var(--cream-2);color:var(--clay-deep);display:grid;place-items:center;flex-shrink:0;border:1px solid var(--line)}
.tasks-table .t-name .ti svg{width:14px;height:14px}
.tasks-table .t-name .meta{display:flex;flex-direction:column;line-height:1.3}
.tasks-table .t-name .meta strong{font-size:13.5px;color:var(--ink);font-weight:600}
.tasks-table .t-name .meta span{font-size:12px;color:var(--muted)}
.tasks-table .t-rows{font-family:'JetBrains Mono','SF Mono',Menlo,monospace;font-size:13px;color:var(--ink-2);font-weight:500}

.pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:-.002em}
.pill::before{content:"";width:6px;height:6px;border-radius:50%}
.pill.completed{background:var(--sage-tint);color:var(--sage-deep)}
.pill.completed::before{background:var(--sage-deep)}
.pill.running{background:var(--clay-tint);color:var(--clay-deep)}
.pill.running::before{background:var(--clay-deep);animation:pulse 1.6s ease-in-out infinite}
.pill.pending{background:var(--butter-tint);color:var(--butter-deep)}
.pill.pending::before{background:var(--butter-deep)}
.pill.failed{background:var(--blush-tint);color:var(--blush-deep)}
.pill.failed::before{background:var(--blush-deep)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

.btn-icon{width:28px;height:28px;border-radius:8px;background:transparent;border:none;color:var(--muted);cursor:pointer;display:grid;place-items:center;transition:.15s}
.btn-icon:hover{background:var(--cream-2);color:var(--ink)}
.btn-icon svg{width:14px;height:14px}

.empty{color:var(--muted);font-size:13.5px;padding:36px 0;text-align:center}

/* ── HAMBURGER + DRAWER (mobile) ─────────────────────────────────────── */
.mob-menu-btn{display:none;width:40px;height:40px;border-radius:10px;background:#fff;border:1px solid var(--line);cursor:pointer;align-items:center;justify-content:center;color:var(--ink-2);transition:.15s;flex-shrink:0}
.mob-menu-btn:hover{background:var(--cream-2);color:var(--ink)}
.mob-menu-btn svg{width:20px;height:20px}
.app-backdrop{display:none;position:fixed;inset:0;background:rgba(22,34,54,.45);backdrop-filter:blur(2px);z-index:45;opacity:0;transition:opacity .25s ease}

/* ── Tablet (≤1024) ──────────────────────────────────────────────────── */
@media (max-width:1024px){
  .app{grid-template-columns:240px 1fr}
  .app-content{padding:24px 22px 50px}
  .app-topbar{padding:16px 22px}
  .stat-row{grid-template-columns:1fr 1fr;gap:14px}
  .stat-card.promo{grid-column:span 2}
}

/* ── Mobile: drawer pattern (≤820) ───────────────────────────────────── */
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .app-side{
    position:fixed;top:0;left:0;width:280px;max-width:84vw;height:100vh;
    transform:translateX(-100%);transition:transform .25s cubic-bezier(.4,0,.2,1);
    z-index:60;box-shadow:8px 0 32px -8px rgba(38,66,109,.18);overflow-y:auto;
    -webkit-overflow-scrolling:touch
  }
  body.app-nav-open .app-side{transform:translateX(0)}
  body.app-nav-open .app-backdrop{display:block;opacity:1}
  body.app-nav-open{overflow:hidden}

  .mob-menu-btn{display:inline-flex;width:44px;height:44px}
  .mob-menu-btn svg{width:22px;height:22px}
  .app-topbar{padding:20px 20px;gap:14px;min-height:74px}
  .app-page-title h1{font-size:24px;letter-spacing:-.024em}
  .app-page-title p{font-size:13.5px;margin-top:3px}
  .icon-btn{width:44px;height:44px}
  .icon-btn svg{width:20px;height:20px}
  .user-pill .ua{width:38px;height:38px;font-size:14px}
  .app-content{padding:18px 16px 40px;gap:18px}
  .app-card{padding:18px;border-radius:14px}
  .app-card-head{margin-bottom:14px;flex-wrap:wrap}
  .app-card-head .h-actions{margin-left:0;width:100%;margin-top:6px}
  .stat-row{grid-template-columns:1fr;gap:12px}
  .stat-card.promo{grid-column:auto}
  .stat-card{padding:18px}
  .stat-card .s-num{font-size:30px}
  .task-row{grid-template-columns:1fr 1fr;gap:10px}
  .task-card{padding:14px}
  .task-card .t-num{font-size:20px}

  /* User pill — collapse to avatar only on tablet/mobile */
  .user-pill{padding:0;border:none;background:transparent}
  .user-pill .ui{display:none}
  .user-pill .ua{box-shadow:0 2px 6px rgba(38,66,109,.16)}

  /* Recent tasks: convert table → stacked card list */
  .tasks-table{display:block}
  .tasks-table thead{display:none}
  .tasks-table tbody{display:flex;flex-direction:column;gap:10px}
  .tasks-table tbody tr{display:grid;grid-template-columns:1fr auto;gap:8px 12px;padding:14px;background:var(--cream);border:1px solid var(--line);border-radius:12px}
  .tasks-table tbody tr:hover{background:var(--cream-2)}
  .tasks-table tbody td{padding:0;border:none}
  .tasks-table tbody td:nth-child(1){grid-column:1 / -1}                /* task name spans full row */
  .tasks-table tbody td:nth-child(2){font-size:12px;color:var(--muted);grid-column:1}
  .tasks-table tbody td:nth-child(2)::before{content:"Service: ";color:var(--muted);font-weight:600}
  .tasks-table tbody td:nth-child(3){grid-column:2;justify-self:end;font-size:13px}
  .tasks-table tbody td:nth-child(3)::before{content:"Rows: ";color:var(--muted);font-weight:600}
  .tasks-table tbody td:nth-child(4){grid-column:1}
  .tasks-table tbody td:nth-child(5){grid-column:2;justify-self:end;font-size:12px;color:var(--muted)}
  .tasks-table tbody td:nth-child(6){grid-column:1 / -1;justify-self:end}
}

/* ── Small phone (≤480) ──────────────────────────────────────────────── */
@media (max-width:480px){
  .app-topbar{padding:12px 14px}
  .app-content{padding:14px 14px 36px;gap:14px}
  .app-card{padding:16px;border-radius:12px}
  .task-row{grid-template-columns:1fr;gap:10px}
  .icon-btn{width:38px;height:38px}
  .app-page-title h1{font-size:18px}
}

/* =========================================================================
   POLISH — sub-page component library
   Tasks · Profile · Billing · Credits · Services · Support · Referral
   ========================================================================= */

/* ── Shared helpers used across sub-pages ──────────────────────────── */
.muted-label{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;display:block}
.muted-line{font-size:13px;color:var(--muted);line-height:1.5;margin:0}
.half-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.half-row{grid-template-columns:1fr}}

/* "Plus" used inside primary-cta buttons */
.btn .plus{display:inline-block;font-weight:700;line-height:1;font-size:16px}

/* Danger button — used on Profile → delete account */
.btn-danger{background:var(--blush);color:#fff;border:1px solid var(--blush);padding:10px 18px;border-radius:12px;font-weight:600;font-size:14px;cursor:pointer;transition:.2s;font-family:inherit}
.btn-danger:hover{background:var(--blush-deep);border-color:var(--blush-deep)}

/* ── Toggle switches ───────────────────────────────────────────────── */
.switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch .slider{position:absolute;cursor:pointer;inset:0;background:var(--line-strong);border-radius:999px;transition:.25s}
.switch .slider::before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.25s;box-shadow:0 1px 3px rgba(38,66,109,.2)}
.switch input:checked + .slider{background:var(--clay)}
.switch input:checked + .slider::before{transform:translateX(18px)}
.switch input:focus-visible + .slider{box-shadow:0 0 0 3px var(--clay-tint)}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.toggle-row strong{display:block;font-size:14px;color:var(--ink);font-weight:600;letter-spacing:-.005em}
.toggle-row .muted{display:block;font-size:13px;color:var(--muted);margin-top:2px}

/* ── TASKS page ────────────────────────────────────────────────────── */
.filter-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.search-wrap{position:relative;flex:1;min-width:240px}
.search-wrap svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted)}
.search-in{padding-left:38px !important}
.chip-row{display:flex;gap:6px;flex-wrap:wrap}
.chip-btn{padding:8px 14px;border-radius:999px;background:var(--cream-2);border:1px solid var(--line);color:var(--ink-2);font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;transition:.15s}
.chip-btn:hover{background:#fff;border-color:var(--line-strong);color:var(--ink)}
.chip-btn.active{background:var(--clay-tint);color:var(--clay-deep);border-color:transparent;font-weight:600}
.chip-btn .cnum{display:inline-flex;align-items:center;justify-content:center;min-width:20px;padding:0 6px;height:18px;background:rgba(255,255,255,.6);border-radius:999px;font-size:11px;font-weight:600}
.chip-btn.active .cnum{background:rgba(38,66,109,.12);color:var(--clay-deep)}

.task-list{display:flex;flex-direction:column;gap:10px}
.task-row-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;transition:transform .25s ease,box-shadow .25s ease,border-color .2s ease}
.task-row-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px -16px rgba(38,66,109,.16);border-color:var(--line-strong)}
.trc-head{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.trc-head .ti{width:40px;height:40px;border-radius:10px;background:var(--cream-2);color:var(--clay-deep);display:grid;place-items:center;flex-shrink:0;border:1px solid var(--line)}
.trc-head .ti svg{width:18px;height:18px}
.trc-title{flex:1;min-width:0;line-height:1.35}
.trc-title strong{display:block;font-size:15px;color:var(--ink);font-weight:600;letter-spacing:-.012em;margin-bottom:2px}
.trc-title span{display:block;font-size:12.5px;color:var(--muted)}
.trc-meta{display:flex;flex-wrap:wrap;gap:18px;font-size:13px;color:var(--ink-2);padding-top:12px;border-top:1px dashed var(--line)}
.trc-meta strong{color:var(--ink);font-weight:600}
.trc-meta a{color:var(--clay-deep);font-weight:500;text-decoration:none;border-bottom:1px solid transparent;transition:.15s}
.trc-meta a:hover{border-bottom-color:var(--clay-deep)}

/* Progress bar (inline in trc-meta) */
.prog-wrap{display:inline-flex;align-items:center;gap:10px;flex:1;min-width:200px}
.prog{flex:1;height:6px;background:var(--cream-2);border-radius:999px;overflow:hidden;position:relative;border:1px solid var(--line)}
.prog-bar{height:100%;background:linear-gradient(90deg,var(--clay),var(--clay-deep));border-radius:999px;transition:width .4s ease;position:relative}
.prog-bar::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);animation:prog-shimmer 1.6s linear infinite}
@keyframes prog-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* Pagination */
.pagination{display:flex;align-items:center;justify-content:center;gap:14px;padding-top:8px}
.pagination button[disabled]{opacity:.5;pointer-events:none}
.page-meta{font-size:13px;color:var(--muted)}

/* ── PROFILE page ──────────────────────────────────────────────────── */
.profile-grid{display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:start}
.profile-aside{position:sticky;top:88px;text-align:center}
.profile-avatar{display:flex;flex-direction:column;align-items:center;gap:0;margin-bottom:18px}
.profile-avatar .ua-lg{width:96px;height:96px;border-radius:50%;background:linear-gradient(135deg,var(--clay),var(--clay-deep));color:#fff;display:grid;place-items:center;font-size:34px;font-weight:800;letter-spacing:-.02em;box-shadow:0 8px 24px -10px rgba(38,66,109,.3)}
.profile-aside h3{font-size:17px;color:var(--ink);font-weight:700;letter-spacing:-.018em;margin:0 0 4px}
.profile-aside .profile-sub{font-size:13px;color:var(--muted);margin:0 0 18px}
.profile-stat{list-style:none;padding:14px 0 0;margin:14px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px;text-align:left}
.profile-stat li{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted)}
.profile-stat li strong{color:var(--ink);font-weight:600}
.profile-forms{display:flex;flex-direction:column;gap:18px;min-width:0}
.notif-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
.notif-list li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.notif-list li:first-child{border-top:none}
.notif-list strong{display:block;font-size:14px;color:var(--ink);font-weight:600}
.notif-list .muted{display:block;font-size:13px;color:var(--muted);margin-top:2px}

.danger-card{border:1px solid rgba(198,144,151,.4)}
.danger-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0;border-top:1px solid var(--line)}
.danger-row:first-of-type{border-top:none;padding-top:0}
.danger-row strong{display:block;color:var(--ink);font-weight:600;font-size:14px;margin-bottom:2px}
.danger-row p{margin:0;font-size:13px;color:var(--muted);max-width:520px;line-height:1.5}

@media (max-width:980px){.profile-grid{grid-template-columns:1fr}.profile-aside{position:static}}

/* ── BILLING page ──────────────────────────────────────────────────── */
.bill-top{display:grid;grid-template-columns:1.2fr 1fr;gap:18px}
.balance-card{background:linear-gradient(135deg,var(--clay-tint),#fff);position:relative;overflow:hidden;border:1px solid var(--line)}
.balance-card::before{content:"";position:absolute;top:-40px;right:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(closest-side,rgba(93,139,193,.18),transparent 70%);pointer-events:none}
.balance-num{font-size:48px;font-weight:800;color:var(--ink);letter-spacing:-.034em;line-height:1;margin:8px 0 6px}
.balance-num strong{color:var(--clay-deep);font-weight:800}

.payment-card{display:flex;flex-direction:column}
.card-on-file{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--cream-2);border:1px solid var(--line);border-radius:12px}
.cof-brand{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px;letter-spacing:.06em;color:#fff;background:linear-gradient(135deg,var(--ink),var(--clay-deep));padding:8px 12px;border-radius:8px}
.cof-meta{display:flex;flex-direction:column;line-height:1.3}
.cof-meta strong{font-size:14px;color:var(--ink);font-family:'JetBrains Mono',monospace}
.cof-meta span{font-size:12.5px;color:var(--muted)}

@media (max-width:820px){.bill-top{grid-template-columns:1fr}}

/* ── CREDITS page — timeline ───────────────────────────────────────── */
.timeline{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0;position:relative}
.timeline::before{content:"";position:absolute;left:9px;top:14px;bottom:14px;width:1px;background:var(--line)}
.tl-item{display:flex;align-items:center;gap:14px;padding:14px 0;position:relative}
.tl-dot{width:18px;height:18px;border-radius:50%;flex-shrink:0;background:#fff;border:3px solid var(--clay);position:relative;z-index:1}
.tl-dot.up{border-color:var(--sage-deep);background:var(--sage-tint)}
.tl-dot.down{border-color:var(--clay);background:var(--clay-tint)}
.tl-body{flex:1;min-width:0}
.tl-body strong{display:block;color:var(--ink);font-size:14.5px;font-weight:600;letter-spacing:-.008em}
.tl-amt{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:14px;letter-spacing:-.005em;flex-shrink:0}
.tl-amt.up{color:var(--sage-deep)}
.tl-amt.down{color:var(--ink-2)}

/* ── SERVICES catalog ──────────────────────────────────────────────── */
.srv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.srv-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:24px;background:#fff;border:1px solid var(--line);border-radius:18px;text-decoration:none;color:inherit;transition:transform .25s ease,box-shadow .25s ease,border-color .2s ease;overflow:hidden}
.srv-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--clay);opacity:.7}
.srv-card.sage::before  {background:var(--sage)}
.srv-card.dusk::before  {background:var(--dusk)}
.srv-card.butter::before{background:var(--butter)}
.srv-card.blush::before {background:var(--blush)}
.srv-card:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 18px 36px -18px rgba(38,66,109,.22)}
.srv-card .srv-ico{width:46px;height:46px;border-radius:12px;background:var(--clay-tint);color:var(--clay-deep);display:grid;place-items:center;margin-bottom:6px}
.srv-card.sage   .srv-ico{background:var(--sage-tint);color:var(--sage-deep)}
.srv-card.dusk   .srv-ico{background:var(--dusk-tint);color:var(--dusk-deep)}
.srv-card.butter .srv-ico{background:var(--butter-tint);color:var(--butter-deep)}
.srv-card.blush  .srv-ico{background:var(--blush-tint);color:var(--blush-deep)}
.srv-card h3{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.018em;margin:0}
.srv-card p{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:0;flex:1}
.srv-foot{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--line);margin-top:8px}
.srv-arr{font-size:13px;font-weight:600;color:var(--clay-deep);letter-spacing:-.005em}
.srv-card:hover .srv-arr{transform:translateX(2px);transition:transform .2s ease}
@media (max-width:980px){.srv-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.srv-grid{grid-template-columns:1fr}}

/* ── SUPPORT page ──────────────────────────────────────────────────── */
.support-grid{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start}
.support-side{display:flex;flex-direction:column;gap:14px}
.support-side .app-card{padding:20px}
.file-drop{display:flex;align-items:center;gap:10px;padding:18px;background:var(--cream-2);border:1.5px dashed var(--line-strong);border-radius:12px;color:var(--muted);font-size:13px;cursor:pointer;transition:.2s}
.file-drop:hover{border-color:var(--clay);background:#fff;color:var(--clay-deep)}
.file-drop svg{flex-shrink:0;color:var(--clay-deep)}

@media (max-width:980px){.support-grid{grid-template-columns:1fr}}

/* ── REFERRAL page ─────────────────────────────────────────────────── */
.referral-hero{display:grid;grid-template-columns:1fr 200px;gap:24px;align-items:center;background:linear-gradient(135deg,var(--clay-tint),#fff);position:relative;overflow:hidden}
.ref-text h2{font-size:34px;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.1;margin:6px 0 12px}
.ref-text h2 strong{color:var(--clay-deep);font-weight:800}
.ref-text p{font-size:15px;color:var(--ink-2);max-width:520px;margin:0 0 18px;line-height:1.55}
.ref-link-row{display:flex;gap:8px;max-width:520px;margin-bottom:14px}
.ref-link-row .input{font-family:'JetBrains Mono',monospace;font-size:13px;background:#fff}
.ref-share{display:flex;align-items:center;gap:14px}
.ref-share a{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--ink-2);transition:.2s}
.ref-share a:hover{background:var(--clay-tint);color:var(--clay-deep);border-color:var(--clay)}
.ref-illus{display:flex;align-items:center;justify-content:center;position:relative}
.ref-blob{position:absolute;width:240px;height:240px;border-radius:50%;background:radial-gradient(closest-side,rgba(93,139,193,.16),transparent 70%);pointer-events:none;z-index:0}

@media (max-width:820px){.referral-hero{grid-template-columns:1fr}.ref-illus{display:none}.ref-text h2{font-size:28px}}
@media (max-width:480px){.ref-link-row{flex-direction:column}}

/* ── DASHBOARD HOME — sparkline + quick actions polish ─────────────── */
.usage-chart{position:relative;width:100%;height:140px;margin-top:14px}
.usage-chart svg{width:100%;height:100%;display:block}
.usage-chart .grid-line{stroke:var(--line);stroke-width:1;stroke-dasharray:2 4}
.usage-chart .area{fill:url(#usage-grad)}
.usage-chart .line{fill:none;stroke:var(--clay-deep);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.usage-chart .point{fill:#fff;stroke:var(--clay-deep);stroke-width:2}
.usage-chart .label{font-family:'JetBrains Mono',monospace;font-size:10px;fill:var(--muted)}
.usage-meta{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.usage-meta strong{color:var(--ink);font-weight:600}

.quick-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.qa-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;transition:.25s;position:relative;overflow:hidden}
.qa-card:hover{transform:translateY(-2px);border-color:var(--clay);box-shadow:0 8px 22px -12px rgba(38,66,109,.18)}
.qa-card .qa-ico{width:38px;height:38px;border-radius:10px;background:var(--clay-tint);color:var(--clay-deep);display:grid;place-items:center}
.qa-card.sage   .qa-ico{background:var(--sage-tint);color:var(--sage-deep)}
.qa-card.butter .qa-ico{background:var(--butter-tint);color:var(--butter-deep)}
.qa-card.dusk   .qa-ico{background:var(--dusk-tint);color:var(--dusk-deep)}
.qa-card .qa-ico svg{width:18px;height:18px}
.qa-card strong{font-size:14.5px;color:var(--ink);font-weight:600;letter-spacing:-.008em}
.qa-card span{font-size:12.5px;color:var(--muted);line-height:1.4}
@media (max-width:820px){.quick-actions{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.quick-actions{grid-template-columns:1fr}}

/* =========================================================================
   RUN WIZARD + TASK DETAIL — close the UX loop
   ========================================================================= */

/* ── Shared: app-level breadcrumb ──────────────────────────────────── */
.crumb-app{font-size:13px;color:var(--muted);letter-spacing:-.005em;margin:-4px 0 -4px}
.crumb-app a{color:var(--clay-deep);text-decoration:none;font-weight:500;border-bottom:1px solid transparent;transition:.2s}
.crumb-app a:hover{border-bottom-color:var(--clay-deep)}
.crumb-app strong{color:var(--ink);font-weight:600}

.lbl-hint{display:inline-block;margin-left:6px;font-weight:400;color:var(--muted);font-size:12px;letter-spacing:0;text-transform:none}

/* ── Run wizard ────────────────────────────────────────────────────── */
.run-stepper{list-style:none;padding:0;margin:0;display:flex;align-items:center;gap:0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 18px;flex-wrap:wrap;font-size:13px}
.run-stepper li{display:flex;align-items:center;gap:8px;color:var(--muted);font-weight:500;letter-spacing:-.005em}
.run-stepper li:not(:last-child)::after{content:"";flex-shrink:0;width:30px;height:1px;background:var(--line);margin:0 14px}
.run-stepper .step-dot{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--cream-2);border:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:700;flex-shrink:0}
.run-stepper li.done   {color:var(--sage-deep)}
.run-stepper li.done   .step-dot{background:var(--sage-tint);border-color:var(--sage);color:var(--sage-deep)}
.run-stepper li.active {color:var(--clay-deep);font-weight:600}
.run-stepper li.active .step-dot{background:var(--clay);border-color:var(--clay);color:#fff}
@media (max-width:640px){.run-stepper li:not(:last-child)::after{width:14px;margin:0 6px}.run-stepper{padding:12px 14px;font-size:12px}}

.run-grid{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
.run-aside{display:flex;flex-direction:column;gap:14px;position:sticky;top:88px}
.est-card{background:linear-gradient(135deg,var(--clay-tint),#fff);border:1px solid var(--line);position:relative;overflow:hidden}
.est-card::before{content:"";position:absolute;top:-30px;right:-30px;width:140px;height:140px;border-radius:50%;background:radial-gradient(closest-side,rgba(93,139,193,.16),transparent 70%);pointer-events:none}
.est-num{font-size:34px;font-weight:800;color:var(--ink);letter-spacing:-.028em;line-height:1;margin:8px 0 8px}
.est-num strong{color:var(--clay-deep);font-weight:800}
.est-meta{display:flex;flex-direction:column;gap:6px;padding:14px 0;margin:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.est-meta div{display:flex;justify-content:space-between;align-items:center}
.est-meta strong{color:var(--ink);font-weight:600;font-family:'JetBrains Mono',monospace;font-size:13px}

.tip-list{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:10px;font-size:13.5px;color:var(--ink-2);line-height:1.55}
.tip-list .tk{display:inline-block;color:var(--clay-deep);font-weight:600;margin-right:4px}

.sample-card{overflow:hidden}
.sample-card .json-prev{margin:8px 0 0;padding:14px;background:var(--ink);color:#cce0fa;border-radius:10px;font-family:'JetBrains Mono','SF Mono',Menlo,monospace;font-size:12px;line-height:1.6;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;max-width:100%;box-sizing:border-box;tab-size:2}
.sample-card .json-prev code{color:inherit;white-space:inherit;word-break:inherit;display:block;font-family:inherit}

.filter-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.fp{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13px;color:var(--ink-2);cursor:pointer;transition:.15s;user-select:none}
.fp:hover{background:var(--cream-2);border-color:var(--line-strong)}
.fp input{accent-color:var(--clay);width:14px;height:14px;margin:0}
.fp:has(input:checked){background:var(--clay-tint);border-color:var(--clay);color:var(--clay-deep);font-weight:500}

.col-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:6px}
.col-pick{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--cream);border:1px solid var(--line);border-radius:10px;font-size:13px;color:var(--ink-2);cursor:pointer;transition:.15s;user-select:none}
.col-pick:hover{background:#fff;border-color:var(--line-strong)}
.col-pick:has(input:checked){background:#fff;border-color:var(--clay);color:var(--ink)}
.col-pick input{accent-color:var(--clay);width:14px;height:14px;margin:0;flex-shrink:0}
.pro-tag{margin-left:auto;font-size:10.5px;background:var(--butter-tint);color:var(--butter-deep);padding:2px 7px;border-radius:999px;font-weight:600;letter-spacing:.02em}

@media (max-width:1024px){.col-grid{grid-template-columns:1fr 1fr}}
@media (max-width:980px){.run-grid{grid-template-columns:1fr}.run-aside{position:static}}
@media (max-width:480px){.col-grid{grid-template-columns:1fr}}

/* ── Task detail ───────────────────────────────────────────────────── */
.task-detail-head{padding:24px 26px}
.tdh-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px}
.tdh-id{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
.tdh-id .ti{width:46px;height:46px;border-radius:12px;background:var(--clay-tint);color:var(--clay-deep);display:grid;place-items:center;flex-shrink:0;border:1px solid var(--line)}
.tdh-id .ti svg{width:20px;height:20px}
.tdh-name{font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-.022em;margin:0;line-height:1.15}
.tdh-meta{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.tdh-meta strong{color:var(--ink-2);font-weight:600}
.tdh-meta code{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-2);background:var(--cream-2);padding:2px 6px;border-radius:4px}

.tdh-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tdh-stat{display:flex;flex-direction:column;gap:2px}
.tdh-stat span{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.tdh-stat strong{font-size:24px;color:var(--ink);font-weight:800;letter-spacing:-.02em;line-height:1}

.tdh-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tdh-actions .btn{display:inline-flex;align-items:center;gap:6px}

@media (max-width:640px){
  .tdh-stats{grid-template-columns:1fr 1fr}
  .tdh-name{font-size:18px}
  .tdh-stat strong{font-size:20px}
}

/* Tabs */
.td-tabs{display:flex;gap:4px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:4px;align-self:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch}
.td-tab{padding:10px 16px;border:none;background:transparent;font-family:inherit;font-size:14px;font-weight:500;color:var(--ink-2);cursor:pointer;border-radius:8px;transition:.15s;white-space:nowrap;letter-spacing:-.005em}
.td-tab:hover{background:var(--cream-2);color:var(--ink)}
.td-tab.active{background:var(--clay-tint);color:var(--clay-deep);font-weight:600}

/* Preview pane */
.td-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:12px}
.preview-table{margin:0}
.preview-table thead th{background:var(--cream-2);padding:10px 14px;border-bottom:1px solid var(--line)}
.preview-table tbody td{padding:12px 14px;font-size:13.5px}
.preview-table .rating{font-family:'JetBrains Mono',monospace;color:var(--butter-deep);font-weight:600}
.preview-table a{color:var(--clay-deep);text-decoration:none;border-bottom:1px solid transparent;transition:.2s}
.preview-table a:hover{border-bottom-color:var(--clay-deep)}
.td-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-top:16px}

/* Run log */
.run-log{background:var(--ink);color:#cce0fa;border-radius:12px;padding:16px 18px;font-family:'JetBrains Mono','SF Mono',Menlo,monospace;font-size:12.5px;line-height:1.7;overflow-x:auto}
.rl-line{display:grid;grid-template-columns:80px 90px 1fr;gap:14px;align-items:center;padding:4px 0}
.rl-time{color:#7f97b8;font-size:11.5px}
.rl-tag{display:inline-flex;align-items:center;justify-content:center;padding:1px 9px;border-radius:4px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;width:fit-content}
.rl-tag.info{background:rgba(93,139,193,.25);color:#a8c5e8}
.rl-tag.ok  {background:rgba(142,169,154,.28);color:#b3d6c0}
.rl-tag.warn{background:rgba(207,179,122,.25);color:#e7d29c}
.rl-tag.err {background:rgba(198,144,151,.28);color:#f1bdc4}
.rl-line code{color:#fff;background:rgba(255,255,255,.06);padding:1px 6px;border-radius:3px;font-size:11.5px}
@media (max-width:640px){.rl-line{grid-template-columns:1fr;gap:2px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08)}}

/* Settings (key/value) */
.kv-list{margin:0;display:flex;flex-direction:column;gap:0}
.kv-list > div{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:14px 0;border-bottom:1px solid var(--line)}
.kv-list > div:last-child{border-bottom:none}
.kv-list dt{font-size:12.5px;letter-spacing:.04em;color:var(--muted);font-weight:600;margin:0}
.kv-list dd{margin:0;font-size:14px;color:var(--ink);font-weight:500}
.kv-list code{font-family:'JetBrains Mono',monospace;font-size:13px;background:var(--cream-2);padding:2px 8px;border-radius:5px}
@media (max-width:640px){.kv-list > div{grid-template-columns:1fr;gap:2px}}

/* Destinations grid */
.dest-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.dest-card{display:flex;flex-direction:column;gap:6px;padding:18px;background:#fff;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:inherit;transition:.25s}
.dest-card:hover{transform:translateY(-2px);border-color:var(--clay);box-shadow:0 12px 24px -14px rgba(38,66,109,.18)}
.dest-card .dest-ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;margin-bottom:4px}
.dest-card .dest-ico svg{width:18px;height:18px}
.dest-card strong{font-size:14.5px;color:var(--ink);font-weight:600;letter-spacing:-.008em}
.dest-card span{font-size:12.5px;color:var(--muted)}
.dest-card.add-card{border:1.5px dashed var(--line-strong);background:var(--cream)}
.dest-card.add-card:hover{border-color:var(--clay);background:#fff}
.dest-card.add-card .dest-ico{background:var(--cream-2);color:var(--clay-deep)}
@media (max-width:820px){.dest-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.dest-grid{grid-template-columns:1fr}}

/* =========================================================================
   PHASE 2 — API · Schedules · Team · Onboarding
   ========================================================================= */

/* ── API & developers ───────────────────────────────────────────── */
.api-grid{display:flex;flex-direction:column;gap:18px}
.sdk-pane{margin-top:8px;max-height:280px;overflow-y:auto}

/* ── Schedules ──────────────────────────────────────────────────── */
.sch-card .sch-state{display:flex;flex-direction:column;line-height:1.2;align-items:flex-end;flex-shrink:0;gap:2px;margin:0 14px}
.sch-card .sch-state .next-fire{font-size:14px;color:var(--clay-deep);font-weight:600;letter-spacing:-.005em}
.sch-card.sch-paused{opacity:.72;background:var(--cream-2)}
@media (max-width:640px){.sch-card .sch-state{align-items:flex-start;margin:0}.sch-card .trc-head{flex-wrap:wrap}}

/* ── Team ───────────────────────────────────────────────────────── */
.team-grid{display:flex;flex-direction:column;gap:18px}
.team-plan .seat-bar{height:8px;background:var(--cream-2);border-radius:999px;overflow:hidden;border:1px solid var(--line);margin-top:6px}
.team-plan .seat-bar-fill{height:100%;background:linear-gradient(90deg,var(--clay),var(--clay-deep));border-radius:999px;transition:width .4s ease}
.team-plan .seat-meta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-top:14px;font-size:13px;color:var(--ink-2)}
.team-plan .seat-meta strong{color:var(--ink);font-weight:600}
.team-plan .seat-meta a{color:var(--clay-deep);font-weight:500;text-decoration:none;border-bottom:1px solid transparent;transition:.2s}
.team-plan .seat-meta a:hover{border-bottom-color:var(--clay-deep)}

.role-pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.role-pill.admin {background:var(--clay-tint);color:var(--clay-deep)}
.role-pill.editor{background:var(--sage-tint);color:var(--sage-deep)}
.role-pill.viewer{background:var(--cream-2);color:var(--muted);border:1px solid var(--line)}

.role-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:6px}
.role-card{padding:18px;background:var(--cream);border:1px solid var(--line);border-radius:12px}
.role-card h4{margin:0 0 10px;font-size:14px;font-weight:700;color:var(--ink);letter-spacing:.04em;text-transform:uppercase;padding-bottom:8px;border-bottom:1px solid var(--line)}
.role-card.admin  h4{color:var(--clay-deep)}
.role-card.editor h4{color:var(--sage-deep)}
.role-card.viewer h4{color:var(--ink-2)}
.role-card ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--ink-2);line-height:1.5}
.role-card li::before{content:"•";color:var(--clay);font-weight:700;margin-right:8px}
.role-card li em{font-style:normal;font-weight:600;color:var(--ink)}
@media (max-width:820px){.role-grid{grid-template-columns:1fr}}

/* ── Onboarding checklist (dashboard widget) ────────────────────── */
.onboard-card{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--clay-tint),#fff)}
.onboard-card::before{content:"";position:absolute;top:-30px;right:-30px;width:200px;height:200px;border-radius:50%;background:radial-gradient(closest-side,rgba(93,139,193,.16),transparent 70%);pointer-events:none}
.onboard-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;position:relative}
.onboard-head h2{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.02em;margin:0;line-height:1.2}
.onboard-head p{font-size:13.5px;color:var(--ink-2);margin:2px 0 0}
.onboard-head .ob-progress{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.onboard-head .ob-progress strong{font-size:14px;color:var(--clay-deep);font-weight:700}
.ob-bar{width:120px;height:6px;background:rgba(255,255,255,.6);border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.ob-bar-fill{height:100%;background:linear-gradient(90deg,var(--clay),var(--clay-deep));border-radius:999px;transition:width .4s ease}

.ob-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.ob-item{display:flex;align-items:center;gap:14px;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:12px;transition:.2s;text-decoration:none;color:inherit}
.ob-item:hover{border-color:var(--clay);transform:translateX(2px);box-shadow:0 4px 14px -8px rgba(38,66,109,.16)}
.ob-item.done{background:var(--cream-2);opacity:.7}
.ob-item.done:hover{transform:none}
.ob-check{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;border:2px solid var(--line);background:#fff;transition:.2s}
.ob-check svg{width:14px;height:14px;color:#fff;opacity:0;transition:.2s}
.ob-item.done .ob-check{background:var(--sage);border-color:var(--sage)}
.ob-item.done .ob-check svg{opacity:1}
.ob-item .ob-text{flex:1;min-width:0;line-height:1.3}
.ob-item .ob-text strong{display:block;font-size:14px;color:var(--ink);font-weight:600;letter-spacing:-.005em}
.ob-item.done .ob-text strong{text-decoration:line-through;color:var(--muted);text-decoration-color:var(--muted)}
.ob-item .ob-text span{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
.ob-item .ob-arr{color:var(--clay-deep);font-size:13px;font-weight:600;flex-shrink:0;opacity:0;transition:.2s}
.ob-item:hover .ob-arr{opacity:1}
.ob-item.done .ob-arr{display:none}
.ob-dismiss{position:absolute;top:14px;right:14px;background:transparent;border:none;color:var(--muted);cursor:pointer;padding:6px;border-radius:6px;transition:.15s;z-index:1}
.ob-dismiss:hover{background:rgba(38,66,109,.06);color:var(--ink-2)}
.ob-dismiss svg{width:16px;height:16px}

/* =========================================================================
   FULL PREVIEW PAGE
   ========================================================================= */
.preview-head{padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.preview-head .ph-info{display:flex;align-items:center;gap:14px;flex:1;min-width:280px}
.preview-head .ti{width:42px;height:42px;border-radius:12px;background:var(--clay-tint);color:var(--clay-deep);display:grid;place-items:center;flex-shrink:0;border:1px solid var(--line)}
.preview-head .ti svg{width:18px;height:18px}
.preview-head strong{display:block;font-size:16px;color:var(--ink);font-weight:700;letter-spacing:-.018em;line-height:1.2}
.preview-head span{font-size:12.5px;color:var(--muted);margin-top:2px;display:block}
.preview-head code{font-family:'JetBrains Mono',monospace;background:var(--cream-2);padding:2px 6px;border-radius:4px;font-size:11.5px}
.preview-head .ph-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.preview-toolbar{padding:18px 22px}
.pt-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pt-meta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.pt-meta strong{color:var(--ink);font-weight:600}
.pt-meta a{color:var(--clay-deep);font-weight:500;text-decoration:none;border-bottom:1px solid transparent;transition:.2s}
.pt-meta a:hover{border-bottom-color:var(--clay-deep)}

.col-toggle{position:relative}
.col-toggle .cnum{display:inline-flex;align-items:center;justify-content:center;min-width:18px;padding:0 5px;height:18px;background:var(--clay);color:#fff;border-radius:999px;font-size:10.5px;font-weight:700;margin-left:6px}
.col-toggle-pop{position:absolute;top:calc(100% + 6px);right:0;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px;box-shadow:0 12px 28px -12px rgba(38,66,109,.22);min-width:180px;z-index:30;display:flex;flex-direction:column;gap:2px}
.col-toggle-pop label{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:13.5px;color:var(--ink-2);cursor:pointer;transition:.15s}
.col-toggle-pop label:hover{background:var(--cream-2)}
.col-toggle-pop input{accent-color:var(--clay);width:14px;height:14px}

.preview-pane{padding:0;overflow:hidden}
.preview-pane .td-table-wrap{border:none;border-radius:0;overflow-x:auto}
.preview-pane th{cursor:pointer;user-select:none;position:sticky;top:0;background:var(--cream-2);z-index:2}
.preview-pane th:hover{background:var(--clay-tint);color:var(--clay-deep)}
.preview-pane th .sort-arr{display:inline-block;width:0;height:0;margin-left:6px;border-left:4px solid transparent;border-right:4px solid transparent;opacity:0;transition:.15s;vertical-align:middle}
.preview-pane th.sort-asc  .sort-arr{opacity:1;border-bottom:5px solid currentColor;border-top:none}
.preview-pane th.sort-desc .sort-arr{opacity:1;border-top:5px solid currentColor;border-bottom:none}

.empty-state{padding:64px 24px;text-align:center;color:var(--muted)}
.empty-state svg{color:var(--line-strong);margin:0 auto 14px;display:block}
.empty-state h3{font-size:17px;color:var(--ink);font-weight:600;margin:0 0 4px}
.empty-state p{font-size:14px;color:var(--muted);margin:0 0 18px}

.pagination-row{padding:16px 22px;border-top:1px solid var(--line)}
.pgn-btns{display:flex;align-items:center;gap:6px}
.pgn-pages{display:inline-flex;align-items:center;gap:2px;margin:0 4px}
.pgn-page{min-width:32px;height:32px;padding:0 9px;border-radius:8px;background:transparent;border:1px solid transparent;color:var(--ink-2);font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;transition:.15s}
.pgn-page:hover{background:var(--cream-2);color:var(--ink)}
.pgn-page.active{background:var(--clay-tint);color:var(--clay-deep);font-weight:700;border-color:transparent}
.pgn-dots{color:var(--muted);font-size:13px;padding:0 4px}

@media (max-width:640px){
  .preview-head{padding:14px 16px}
  .preview-toolbar{padding:14px 16px}
  .pt-meta{flex-direction:column;align-items:flex-start}
  .pagination-row{flex-direction:column;gap:10px;align-items:stretch}
  .pgn-btns{justify-content:center}
}

/* =========================================================================
   WAVE A POLISH — notifications inbox · templates · audit · toasts ·
   dark mode · keyboard shortcuts · animated counters · skeletons
   ========================================================================= */

/* ── Notifications inbox ──────────────────────────────────────────── */
.notif-grid{display:flex;flex-direction:column;gap:18px}
.notif-day{display:flex;flex-direction:column;gap:8px}
.notif-day .muted-label{padding:0 4px;margin-bottom:2px}
.notif-list-ux{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.notif-row{display:grid;grid-template-columns:8px 38px 1fr auto auto;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);transition:background .15s ease}
.notif-row:last-child{border-bottom:none}
.notif-row:hover{background:var(--cream-2)}
.notif-row .nf-dot{width:8px;height:8px;border-radius:50%;background:transparent}
.notif-row.unread .nf-dot{background:var(--clay)}
.notif-row.unread strong{color:var(--ink)}
.notif-row .nf-ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex-shrink:0}
.notif-row .nf-ico svg{width:18px;height:18px}
.notif-row .nf-body{min-width:0;line-height:1.35}
.notif-row .nf-body strong{display:block;font-size:14px;font-weight:600;color:var(--ink-2);letter-spacing:-.005em;margin-bottom:2px}
.notif-row.unread .nf-body strong{color:var(--ink);font-weight:700}
.notif-row .nf-body span{display:block;font-size:13px;color:var(--muted)}
.notif-row .nf-cta{font-size:13px;color:var(--clay-deep);font-weight:600;text-decoration:none;border-bottom:1px solid transparent;transition:.2s;flex-shrink:0;letter-spacing:-.005em}
.notif-row .nf-cta:hover{border-bottom-color:var(--clay-deep)}
.notif-row .nf-time{font-size:12px;color:var(--muted);font-family:'JetBrains Mono',monospace;flex-shrink:0;width:60px;text-align:right}
.notif-foot{text-align:center;padding-top:12px}
@media (max-width:640px){.notif-row{grid-template-columns:6px 32px 1fr;gap:10px;padding:12px 14px}.notif-row .nf-cta,.notif-row .nf-time{grid-column:2 / -1;font-size:12px}.notif-row .nf-cta{order:5}.notif-row .nf-time{order:4;text-align:left;width:auto}}

/* ── Templates gallery ────────────────────────────────────────────── */
.tpl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:6px}
.tpl-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:24px;background:#fff;border:1px solid var(--line);border-radius:18px;text-decoration:none;color:inherit;transition:transform .25s ease,box-shadow .25s ease,border-color .2s ease;overflow:hidden}
.tpl-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--clay);opacity:.85}
.tpl-card.sage::before  {background:var(--sage)}
.tpl-card.dusk::before  {background:var(--dusk)}
.tpl-card.butter::before{background:var(--butter)}
.tpl-card.blush::before {background:var(--blush)}
.tpl-card:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 18px 36px -18px rgba(38,66,109,.22)}
.tpl-badge{position:absolute;top:14px;right:14px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--butter-tint);color:var(--butter-deep);padding:3px 9px;border-radius:999px}
.tpl-ico{width:46px;height:46px;border-radius:12px;background:var(--clay-tint);color:var(--clay-deep);display:grid;place-items:center;margin-bottom:6px}
.tpl-card.sage   .tpl-ico{background:var(--sage-tint);color:var(--sage-deep)}
.tpl-card.dusk   .tpl-ico{background:var(--dusk-tint);color:var(--dusk-deep)}
.tpl-card.butter .tpl-ico{background:var(--butter-tint);color:var(--butter-deep)}
.tpl-card.blush  .tpl-ico{background:var(--blush-tint);color:var(--blush-deep)}
.tpl-card h3{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.018em;margin:0;line-height:1.25}
.tpl-card p{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:0;flex:1}
.tpl-meta{display:flex;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--muted);padding-top:12px;border-top:1px solid var(--line);margin-top:6px}
.tpl-meta strong{color:var(--ink-2);font-weight:600}
.tpl-foot{margin-top:14px;text-align:center;padding:14px;background:var(--cream-2);border-radius:12px}
.tpl-foot a{color:var(--clay-deep);font-weight:600;text-decoration:none;border-bottom:1px solid transparent;transition:.2s}
.tpl-foot a:hover{border-bottom-color:var(--clay-deep)}
@media (max-width:980px){.tpl-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.tpl-grid{grid-template-columns:1fr}}

/* ── Audit log ────────────────────────────────────────────────────── */
.audit-table tbody td{font-size:13px}
.audit-table thead th{background:var(--cream-2);padding:10px 14px}
.audit-tag{display:inline-block;padding:3px 9px;border-radius:6px;font-size:11.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.audit-tag.api      {background:var(--clay-tint);color:var(--clay-deep)}
.audit-tag.run      {background:var(--sage-tint);color:var(--sage-deep)}
.audit-tag.export   {background:var(--dusk-tint);color:var(--dusk-deep)}
.audit-tag.schedule {background:var(--butter-tint);color:var(--butter-deep)}
.audit-tag.billing  {background:var(--clay-tint);color:var(--clay-deep)}
.audit-tag.settings {background:var(--cream-2);color:var(--ink-2);border:1px solid var(--line)}
.audit-tag.invite   {background:var(--blush-tint);color:var(--blush-deep)}
.audit-tag.login    {background:var(--sage-tint);color:var(--sage-deep)}

/* ── Toast notifications (global) ─────────────────────────────────── */
.toast-stack{position:fixed;bottom:24px;right:24px;z-index:200;display:flex;flex-direction:column;gap:10px;pointer-events:none;max-width:380px}
.toast{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 28px -12px rgba(38,66,109,.22);font-size:14px;color:var(--ink);min-width:240px;pointer-events:auto;animation:toast-in .25s cubic-bezier(.4,1.6,.5,1)}
.toast .toast-ico{flex-shrink:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff}
.toast.success .toast-ico{background:var(--sage)}
.toast.error   .toast-ico{background:var(--blush)}
.toast.info    .toast-ico{background:var(--clay)}
.toast.warn    .toast-ico{background:var(--butter)}
.toast .toast-ico svg{width:14px;height:14px}
.toast strong{font-weight:600;letter-spacing:-.005em}
.toast .toast-x{margin-left:auto;background:transparent;border:none;color:var(--muted);cursor:pointer;padding:4px;border-radius:6px;display:grid;place-items:center}
.toast .toast-x:hover{background:var(--cream-2);color:var(--ink)}
.toast.removing{animation:toast-out .2s ease forwards}
@keyframes toast-in {from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes toast-out{to{opacity:0;transform:translateX(20px)}}
@media (max-width:640px){.toast-stack{left:14px;right:14px;bottom:14px;max-width:none}}

/* ── Animated number counters ─────────────────────────────────────── */
.counter{display:inline-block;font-variant-numeric:tabular-nums}

/* ── Skeleton loaders ─────────────────────────────────────────────── */
.skel{background:linear-gradient(90deg,var(--cream-2) 0%,#fff 50%,var(--cream-2) 100%);background-size:200% 100%;border-radius:6px;animation:skel-shine 1.4s linear infinite;color:transparent !important;pointer-events:none;user-select:none}
@keyframes skel-shine{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── Keyboard shortcuts cheat sheet ───────────────────────────────── */
.kbd-overlay{position:fixed;inset:0;background:rgba(22,34,54,.5);backdrop-filter:blur(4px);z-index:180;display:none;align-items:center;justify-content:center;padding:24px}
.kbd-overlay.show{display:flex;animation:fade-in .2s ease}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.kbd-card{background:#fff;border-radius:18px;border:1px solid var(--line);padding:32px;max-width:520px;width:100%;max-height:80vh;overflow-y:auto;box-shadow:0 32px 64px -24px rgba(38,66,109,.4)}
.kbd-card h3{margin:0 0 4px;font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.018em}
.kbd-card p{margin:0 0 22px;font-size:14px;color:var(--muted)}
.kbd-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.kbd-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:var(--cream-2);border-radius:8px;font-size:13px;color:var(--ink-2)}
.kbd{display:inline-flex;align-items:center;gap:3px}
.kbd kbd{display:inline-block;padding:3px 7px;border-radius:5px;background:#fff;border:1px solid var(--line);box-shadow:0 1px 0 var(--line);font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--ink);font-weight:600}

/* ── Sidebar collapse toggle ──────────────────────────────────────── */
.app.app-collapsed{grid-template-columns:72px 1fr}
.app.app-collapsed .app-side .app-brand span,
.app.app-collapsed .app-side .app-nav-link span:not(.cnum),
.app.app-collapsed .app-side .nav-section-label,
.app.app-collapsed .app-side .app-side-foot{display:none}
.app.app-collapsed .app-side .app-nav-link{justify-content:center;padding:10px}
.app.app-collapsed .app-side .app-brand{padding:0;justify-content:center;border-bottom:none;margin-bottom:14px}
@media (max-width:820px){.app.app-collapsed{grid-template-columns:1fr}}

/* ── Workspace switcher in topbar ─────────────────────────────────── */
.ws-switch{position:relative;margin-right:6px}
.ws-btn{display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;background:#fff;border:1px solid var(--line);border-radius:10px;cursor:pointer;font-family:inherit;font-size:13px;color:var(--ink);font-weight:600;transition:.15s}
.ws-btn:hover{background:var(--cream-2);border-color:var(--line-strong)}
.ws-btn .ws-av{width:24px;height:24px;border-radius:6px;background:linear-gradient(135deg,var(--clay),var(--clay-deep));color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700;flex-shrink:0}
.ws-btn .ws-chev{width:14px;height:14px;color:var(--muted);margin-left:2px}
.ws-pop{position:absolute;top:calc(100% + 6px);left:0;background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 12px 28px -12px rgba(38,66,109,.22);min-width:240px;z-index:50;display:none}
.ws-switch.open .ws-pop{display:block;animation:fade-in .15s ease}
.ws-pop .ws-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--ink);font-size:13.5px;font-weight:500;cursor:pointer;transition:.15s}
.ws-pop .ws-item:hover{background:var(--cream-2)}
.ws-pop .ws-item.active{background:var(--clay-tint);color:var(--clay-deep);font-weight:600}
.ws-pop .ws-item .ws-av{width:28px;height:28px;border-radius:7px;font-size:12px}
.ws-pop hr{margin:6px 0;border:none;border-top:1px solid var(--line)}
.ws-pop .ws-create{font-size:13px;color:var(--clay-deep);font-weight:600;display:flex;align-items:center;gap:6px;padding:8px 10px;border:none;background:transparent;cursor:pointer;width:100%;text-align:left;border-radius:8px;font-family:inherit}
.ws-pop .ws-create:hover{background:var(--cream-2)}

/* ── Right-rail context panel on task detail ──────────────────────── */
/* (Kept implicit; the existing .td-pane structure works. Future: add slide-in panel.) */

/* ── Confirm dialog ───────────────────────────────────────────────── */
.confirm-overlay{position:fixed;inset:0;background:rgba(22,34,54,.5);backdrop-filter:blur(4px);z-index:190;display:none;align-items:center;justify-content:center;padding:24px}
.confirm-overlay.show{display:flex;animation:fade-in .2s ease}
.confirm-card{background:#fff;border-radius:18px;border:1px solid var(--line);padding:28px;max-width:440px;width:100%;box-shadow:0 32px 64px -24px rgba(38,66,109,.4)}
.confirm-card .ico{width:48px;height:48px;border-radius:12px;background:var(--blush-tint);color:var(--blush-deep);display:grid;place-items:center;margin-bottom:14px}
.confirm-card h3{margin:0 0 6px;font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.018em}
.confirm-card p{margin:0 0 22px;font-size:14px;color:var(--ink-2);line-height:1.55}
.confirm-card .actions{display:flex;justify-content:flex-end;gap:10px}

/* =========================================================================
   WAVE B — empty states · confirm dialogs · activity feed · bulk actions ·
   dark mode · tooltips · cost-vs-API comparison
   ========================================================================= */

/* ── Empty states (when collection has no rows yet) ───────────────── */
.empty-card{padding:48px 32px;text-align:center;background:#fff;border:1px dashed var(--line-strong);border-radius:18px}
.empty-card .empty-illus{width:96px;height:96px;border-radius:50%;background:linear-gradient(135deg,var(--clay-tint),var(--sand));color:var(--clay-deep);display:grid;place-items:center;margin:0 auto 20px}
.empty-card .empty-illus svg{width:42px;height:42px}
.empty-card h3{font-size:19px;font-weight:700;color:var(--ink);margin:0 0 8px;letter-spacing:-.018em}
.empty-card p{font-size:14.5px;color:var(--ink-2);max-width:440px;margin:0 auto 22px;line-height:1.6}
.empty-card .empty-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ── Activity feed (real-time stream on dashboard) ────────────────── */
.activity-card{padding:0;overflow:hidden}
.activity-card-head{display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid var(--line)}
.activity-card-head h3{font-size:15px;font-weight:700;color:var(--ink);margin:0;letter-spacing:-.012em}
.activity-card-head .live-dot{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--sage-deep);font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-left:auto}
.activity-card-head .live-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sage);animation:pulse 1.6s ease-in-out infinite}
.activity-list{list-style:none;padding:0;margin:0;max-height:380px;overflow-y:auto}
.activity-list li{display:flex;align-items:center;gap:12px;padding:12px 22px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink-2);animation:fade-in .3s ease}
.activity-list li:last-child{border-bottom:none}
.activity-list .a-ico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;background:var(--cream-2);color:var(--clay-deep)}
.activity-list .a-ico.sage  {background:var(--sage-tint);color:var(--sage-deep)}
.activity-list .a-ico.butter{background:var(--butter-tint);color:var(--butter-deep)}
.activity-list .a-ico.dusk  {background:var(--dusk-tint);color:var(--dusk-deep)}
.activity-list .a-ico svg{width:14px;height:14px}
.activity-list strong{color:var(--ink);font-weight:600}
.activity-list .a-time{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted);flex-shrink:0}

/* ── Bulk action bar (tasks list) ─────────────────────────────────── */
.bulk-bar{position:sticky;top:74px;z-index:25;background:#fff;border:1px solid var(--clay);border-radius:12px;padding:10px 14px;display:none;align-items:center;gap:14px;box-shadow:0 8px 22px -10px rgba(38,66,109,.18);margin-bottom:14px;animation:fade-in .2s ease}
.bulk-bar.show{display:flex}
.bulk-bar .bulk-count{font-size:13.5px;color:var(--ink);font-weight:600}
.bulk-bar .bulk-count strong{color:var(--clay-deep)}
.bulk-bar .bulk-actions{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.row-checkbox{accent-color:var(--clay);width:16px;height:16px;cursor:pointer;flex-shrink:0}

/* ── Tooltip (hover ? icons next to form labels) ──────────────────── */
.tip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background:var(--cream-2);color:var(--muted);font-size:10px;font-weight:700;font-style:normal;cursor:help;border:1px solid var(--line);margin-left:6px;vertical-align:middle}
.tip:hover{background:var(--clay-tint);color:var(--clay-deep);border-color:var(--clay)}
.tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--ink);color:#fff;padding:8px 12px;border-radius:8px;font-size:12.5px;font-weight:500;letter-spacing:-.005em;white-space:nowrap;max-width:260px;white-space:normal;width:max-content;line-height:1.4;opacity:0;pointer-events:none;transition:.2s;z-index:30;box-shadow:0 8px 20px -8px rgba(0,0,0,.4)}
.tip:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
.tip::before{content:"";position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--ink);opacity:0;pointer-events:none;transition:.2s;z-index:30}
.tip:hover::before{opacity:1}

/* ── Recent searches dropdown ─────────────────────────────────────── */
.search-pop{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 12px 28px -12px rgba(38,66,109,.2);display:none;z-index:30;max-height:260px;overflow-y:auto}
.search-wrap.open .search-pop{display:block}
.search-pop .sp-label{font-size:10.5px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:8px 10px 4px}
.search-pop .sp-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13.5px;color:var(--ink-2)}
.search-pop .sp-item:hover{background:var(--cream-2);color:var(--ink)}
.search-pop .sp-item svg{width:14px;height:14px;color:var(--muted);flex-shrink:0}

/* ── Light / dark mode (marketing site footer toggle) ─────────────── */
.theme-toggle{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:transparent;border:1px solid var(--line);border-radius:999px;cursor:pointer;font-family:inherit;font-size:12.5px;color:var(--ink-2);font-weight:500;transition:.2s}
.theme-toggle:hover{background:var(--cream-2);color:var(--ink);border-color:var(--line-strong)}
.theme-toggle svg{width:14px;height:14px}

/* ── Compact stat strip on dashboard activity area ────────────────── */
.dash-row{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:start}
@media (max-width:980px){.dash-row{grid-template-columns:1fr}}

/* =========================================================================
   MOBILE BUG FIXES — comprehensive sweep
   ========================================================================= */

/* ── Topbar: too many items collide on small viewports ───────────────── */
@media (max-width:820px){
  .app-topbar{flex-wrap:wrap}
  /* Drop the workspace switcher text on tablet; keep avatar only */
  .ws-switch .ws-btn span:not(.ws-av){display:none}
  .ws-switch .ws-btn{padding:6px}
  .ws-switch .ws-btn .ws-chev{display:none}
  /* Workspace dropdown should anchor to right edge so it doesn't overflow */
  .ws-pop{left:auto;right:0;min-width:220px;max-width:calc(100vw - 32px)}
  /* Smaller gap so the row fits */
  .app-top-actions{gap:8px}
}
@media (max-width:480px){
  /* Stack title+subtitle and actions on extra-narrow phones */
  .app-topbar{padding:14px 14px;gap:10px;min-height:auto}
  .app-page-title{order:2;flex-basis:100%;margin-top:6px}
  .app-page-title h1{font-size:18px}
  .app-page-title p{font-size:12px;line-height:1.4}
  .mob-menu-btn{order:1}
  .app-top-actions{order:1;margin-left:auto}
  /* User pill becomes avatar-only (already does at 820px) */
}

/* ── Sticky CTA on dashboard pages: sit ABOVE the cookie banner & drawer ── */
.app .sticky-cta{display:none}   /* dashboard never shows the marketing sticky-cta */

/* ── Onboarding card on mobile ────────────────────────────────────────── */
@media (max-width:640px){
  .onboard-card{padding:18px}
  .onboard-head{flex-wrap:wrap;gap:12px;margin-bottom:14px}
  .onboard-head .h-ico{width:36px;height:36px;flex-shrink:0}
  .onboard-head h2{font-size:17px}
  .onboard-head p{font-size:12.5px}
  .onboard-head .ob-progress{margin-left:0;flex-basis:100%;align-items:flex-start;flex-direction:row;gap:10px;align-items:center}
  .ob-bar{flex:1}
  .ob-item{padding:12px 14px;gap:10px}
  .ob-item .ob-text strong{font-size:13.5px}
  .ob-item .ob-text span{font-size:12px}
  .ob-item .ob-arr{display:none}
  .ob-dismiss{top:10px;right:10px}
}

/* ── Quick actions row on small phones: keep readable ────────────────── */
@media (max-width:480px){
  .quick-actions{grid-template-columns:1fr;gap:10px}
  .qa-card{padding:14px;flex-direction:row;align-items:center;gap:12px}
  .qa-card .qa-ico{margin-bottom:0;flex-shrink:0;width:34px;height:34px}
  .qa-card strong{font-size:13.5px}
  .qa-card span{font-size:12px}
}

/* ── Filter rows (tasks, templates, schedules, audit) ────────────────── */
@media (max-width:820px){
  .filter-row{flex-direction:column;align-items:stretch;gap:10px}
  .filter-row .search-wrap{min-width:0;width:100%}
  .filter-row .chip-row{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:4px;margin:0 -2px;scrollbar-width:thin}
  .filter-row .chip-row::-webkit-scrollbar{height:3px}
  .filter-row .chip-row::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
  .filter-row > .btn,.filter-row > a.btn{width:100%;justify-content:center}
  .filter-row .chip-btn{flex-shrink:0}
}

/* ── App card heads (icon + title + actions) ─────────────────────────── */
@media (max-width:640px){
  .app-card-head{flex-wrap:wrap;gap:10px}
  .app-card-head .h-actions{margin-left:auto;flex-wrap:wrap}
  .app-card-head .h-actions .btn{font-size:13px;padding:8px 12px}
  .app-card-head .search-wrap{min-width:0 !important;width:100%}
}

/* ── Run wizard mobile polish ────────────────────────────────────────── */
@media (max-width:820px){
  .run-stepper{padding:10px 14px;gap:0;font-size:11.5px;flex-wrap:wrap}
  .run-stepper li:not(:last-child)::after{display:none}
  .run-stepper li{padding:4px 8px;flex:0 0 auto}
  .run-stepper li span:not(.step-dot){display:none}
  .run-stepper li.active span:not(.step-dot){display:inline}
  .run-grid{gap:14px}
}
@media (max-width:480px){
  .est-num{font-size:28px}
  .filter-pills{gap:6px}
  .fp{padding:7px 12px;font-size:12.5px}
  .col-grid{grid-template-columns:1fr;gap:6px}
  .col-pick{padding:9px 12px;font-size:12.5px}
}

/* ── Task detail header on mobile ────────────────────────────────────── */
@media (max-width:640px){
  .task-detail-head{padding:18px}
  .tdh-top{flex-direction:column;align-items:flex-start;gap:10px}
  .tdh-top .pill{align-self:flex-start}
  .tdh-id .ti{width:36px;height:36px;border-radius:10px}
  .tdh-id .ti svg{width:16px;height:16px}
  .tdh-name{font-size:17px}
  .tdh-meta{font-size:12px;gap:4px}
  .tdh-meta code{font-size:11px}
  .tdh-stats{grid-template-columns:1fr 1fr;gap:10px;padding:14px 0;margin-bottom:14px}
  .tdh-stat span{font-size:10.5px}
  .tdh-stat strong{font-size:18px}
  .tdh-actions{gap:6px}
  .tdh-actions .btn{font-size:12.5px;padding:7px 12px}
}

/* ── Tabs horizontal scroll fix ──────────────────────────────────────── */
@media (max-width:820px){
  .td-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;align-self:stretch}
  .td-tabs::-webkit-scrollbar{height:3px}
  .td-tab{flex-shrink:0;font-size:13px;padding:9px 14px}
}

/* ── Tables → stacked cards on mobile (universal) ────────────────────── */
@media (max-width:640px){
  /* Apply the existing tasks-table mobile pattern to ALL .tasks-table inside dashboard */
  .audit-table tbody tr,
  .preview-table tbody tr{
    display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:12px 14px;
    background:var(--cream);border:1px solid var(--line);border-radius:12px;margin-bottom:8px
  }
  .audit-table thead,
  .preview-table thead{display:none}
  .audit-table tbody,
  .preview-table tbody{display:flex;flex-direction:column}
  .audit-table tbody td,
  .preview-table tbody td{padding:0;border:none;font-size:12.5px}
  .audit-table tbody td:first-child{grid-column:1 / -1;font-weight:600}
}

/* ── Activity feed mobile timestamps ─────────────────────────────────── */
@media (max-width:640px){
  .activity-list li{padding:12px 16px;flex-wrap:wrap;gap:10px}
  .activity-list .a-ico{width:28px;height:28px}
  .activity-list .a-ico svg{width:13px;height:13px}
  .activity-list .a-time{flex-basis:100%;text-align:right;margin-left:38px;font-size:11px}
}

/* ── Notifications row mobile (already has rules; tighten) ───────────── */
@media (max-width:640px){
  .notif-list-ux{border-radius:12px}
  .notif-row{padding:12px 14px;align-items:flex-start}
  .notif-row .nf-ico{width:30px;height:30px;align-self:center}
  .notif-row .nf-ico svg{width:14px;height:14px}
  .notif-row .nf-body strong{font-size:13.5px}
  .notif-row .nf-body span{font-size:12.5px;line-height:1.4}
  .notif-row .nf-cta{font-size:12px}
}

/* ── Profile / Team / Referral grids stack at 980 (already do) ───────── */
@media (max-width:640px){
  .profile-aside{padding:18px}
  .profile-avatar .ua-lg{width:80px;height:80px;font-size:28px}
  .toggle-row{flex-wrap:wrap;gap:10px}
  .toggle-row strong{font-size:13.5px}
  .danger-row{flex-direction:column;align-items:flex-start;gap:10px}
  .danger-row .btn{width:100%;justify-content:center}
}

/* ── Templates gallery cards ─────────────────────────────────────────── */
@media (max-width:480px){
  .tpl-card{padding:18px}
  .tpl-card h3{font-size:15px}
  .tpl-card p{font-size:12.5px}
  .tpl-meta{font-size:11.5px}
  .tpl-badge{font-size:9.5px;padding:2px 7px}
}

/* ── Stat row at base: stack with full-width cards ───────────────────── */
@media (max-width:480px){
  .stat-card{padding:16px}
  .stat-card .s-num{font-size:26px}
  .stat-card .s-label{font-size:13px}
  .stat-card .s-trend{top:12px;right:12px;font-size:11px;padding:3px 8px}
  .stat-card .s-ico{width:34px;height:34px;margin-bottom:10px}
}

/* ── Toast stack: lift above sticky CTA / cookie banner on mobile ────── */
@media (max-width:640px){
  .toast-stack{bottom:calc(env(safe-area-inset-bottom,0px) + 14px);right:12px;left:12px}
}

/* ── Workspace popover full-width on tiny screens ────────────────────── */
@media (max-width:380px){
  .ws-pop{position:fixed;left:14px;right:14px;top:auto;bottom:14px;min-width:0}
}

/* ── Sidebar drawer width on very narrow phones ──────────────────────── */
@media (max-width:380px){
  .app-side{width:88vw;max-width:88vw}
}

/* ── Run wizard cost-estimate card stacks ────────────────────────────── */
@media (max-width:980px){
  .run-aside{position:static}
}

/* ── Bulk action bar on mobile ───────────────────────────────────────── */
@media (max-width:640px){
  .bulk-bar{position:static;flex-wrap:wrap;padding:10px 12px;gap:8px}
  .bulk-bar .bulk-actions{margin-left:0;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .bulk-bar .bulk-actions .btn{justify-content:center;font-size:12.5px;padding:8px 10px}
}

/* ── Calendar/services grid clamp ────────────────────────────────────── */
@media (max-width:640px){
  .srv-card{padding:18px}
  .srv-card h3{font-size:15px}
  .srv-card p{font-size:12.5px}
}

/* ── Schedules card sch-state on mobile ──────────────────────────────── */
@media (max-width:640px){
  .sch-card .sch-state{margin:0;align-items:flex-start;flex:1}
  .sch-card .trc-head{align-items:flex-start;gap:10px}
  .sch-card .trc-head .switch{align-self:flex-start;margin-top:4px}
}

/* ── Confirm dialog on mobile ────────────────────────────────────────── */
@media (max-width:480px){
  .confirm-card{padding:22px;border-radius:16px}
  .confirm-card .actions{flex-direction:column-reverse;gap:8px}
  .confirm-card .actions .btn{width:100%;justify-content:center}
}

/* ── Form grid half-row already collapses; tighten gap ───────────────── */
@media (max-width:480px){
  .form-grid{gap:10px}
  .input,.textarea{font-size:14px;padding:11px 13px}
  .field-label{font-size:12.5px}
}

/* =========================================================================
   APOLLO/ZOOMINFO POLISH PASS — dashboard side
   ========================================================================= */

/* ── Sticky topbar visually separates from content with a soft hairline ─ */
.app-topbar{box-shadow:0 1px 0 rgba(38,66,109,.04)}

/* ── Cards tighten gap to feel modern; subtle hover lift on .app-card ─── */
.app-card{transition:transform .22s ease,box-shadow .22s ease,border-color .2s ease}
.app-card:not(.preview-pane):not(.task-detail-head):not(.balance-card):not(.est-card):not(.onboard-card):hover{transform:translateY(-1px);box-shadow:0 8px 24px -16px rgba(38,66,109,.12)}

/* ── Sidebar nav active item gets a subtle left accent bar ─────────────── */
.app-nav-link{position:relative}
.app-nav-link.active::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--clay)}

/* ── Loading-state shimmer when [data-loading="true"] anywhere ────────── */
[data-loading="true"]{position:relative;color:transparent !important;user-select:none;pointer-events:none}
[data-loading="true"]::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--cream-2) 0%,#fff 50%,var(--cream-2) 100%);background-size:200% 100%;animation:skel-shine 1.4s linear infinite;border-radius:inherit}

/* ── Better empty-state copy in tables when JS hides everything ──────── */
.tasks-table tbody:empty::after{content:"No results — try a different search.";display:block;padding:48px 24px;text-align:center;color:var(--muted);font-size:14px}

/* ── Pulse animation on any 'Live' badge in cards ─────────────────────── */
.live-dot{position:relative}
.live-dot::after{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:var(--sage);animation:live-ping 1.6s ease-out infinite}
@keyframes live-ping{0%{box-shadow:0 0 0 0 rgba(142,169,154,.7)}70%{box-shadow:0 0 0 8px rgba(142,169,154,0)}100%{box-shadow:0 0 0 0 rgba(142,169,154,0)}}

/* ── Form field validation — green check / red ring ───────────────────── */
.input.is-valid{border-color:var(--sage);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a574a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");background-position:right 12px center;background-repeat:no-repeat;background-size:16px;padding-right:38px}
.input.is-invalid{border-color:var(--blush);box-shadow:0 0 0 3px rgba(198,144,151,.15)}

/* =========================================================================
   TIER 3 — onboarding tour, Cmd+K palette, bell preview, AI assistant,
   saved views, drag-drop CSV, tooltips
   ========================================================================= */

/* ── Onboarding tour ──────────────────────────────────────────────── */
.tour-overlay{position:fixed;inset:0;background:rgba(22,34,54,.55);backdrop-filter:blur(2px);z-index:300;animation:fade-in .25s ease}
.tour-spot{position:fixed;border-radius:14px;background:transparent;box-shadow:0 0 0 9999px rgba(22,34,54,.55),0 0 0 3px var(--clay),0 12px 24px -8px rgba(38,66,109,.3);transition:all .35s cubic-bezier(.4,0,.2,1);pointer-events:none}
.tour-popover{position:fixed;background:#fff;border-radius:14px;padding:20px;width:360px;max-width:calc(100vw - 40px);box-shadow:0 24px 56px -16px rgba(38,66,109,.4);z-index:301;animation:fade-in .25s ease .15s both}
.tour-popover .tour-step{font-size:11.5px;color:var(--muted);font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.tour-popover .tour-step strong{color:var(--clay-deep)}
.tour-popover h3{margin:0 0 6px;font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.018em}
.tour-popover p{margin:0 0 18px;font-size:14px;color:var(--ink-2);line-height:1.55}
.tour-popover .tour-actions{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tour-popover button[disabled]{opacity:.4;cursor:default}

/* ── Cmd+K palette ────────────────────────────────────────────────── */
.kmd-overlay{position:fixed;inset:0;background:rgba(22,34,54,.5);backdrop-filter:blur(6px);z-index:250;display:none;align-items:flex-start;justify-content:center;padding-top:16vh;opacity:0;transition:opacity .2s ease}
.kmd-overlay.show{display:flex;opacity:1}
.kmd{background:#fff;border-radius:18px;width:100%;max-width:640px;box-shadow:0 32px 64px -16px rgba(38,66,109,.4);overflow:hidden;animation:kmd-pop .3s cubic-bezier(.4,1.4,.5,1)}
@keyframes kmd-pop{from{opacity:0;transform:scale(.96) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}
.kmd-input{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line)}
.kmd-input svg{width:20px;height:20px;color:var(--muted);flex-shrink:0}
.kmd-input input{flex:1;border:none;outline:none;font-family:inherit;font-size:17px;color:var(--ink);background:transparent;letter-spacing:-.012em}
.kmd-input input::placeholder{color:var(--muted)}
.kmd-input kbd{font-family:'JetBrains Mono',monospace;font-size:11px;background:var(--cream-2);padding:3px 7px;border-radius:5px;color:var(--muted);border:1px solid var(--line)}
.kmd-results{max-height:50vh;overflow-y:auto;padding:8px}
.kmd-group{font-size:10.5px;color:var(--muted);font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:10px 14px 6px}
.kmd-item{display:flex;flex-direction:column;gap:1px;padding:10px 14px;border-radius:10px;text-decoration:none;color:var(--ink);transition:.12s;cursor:pointer}
.kmd-item:hover,.kmd-item.active{background:var(--clay-tint)}
.kmd-item.active{box-shadow:inset 3px 0 0 var(--clay)}
.kmd-item strong{font-size:14px;color:var(--ink);font-weight:600;letter-spacing:-.005em}
.kmd-item span{font-size:12.5px;color:var(--muted)}
.kmd-empty{padding:36px 24px;text-align:center;color:var(--muted);font-size:14px}
.kmd-foot{display:flex;gap:18px;padding:10px 18px;border-top:1px solid var(--line);background:var(--cream-2);font-size:11px;color:var(--muted)}
.kmd-foot kbd{font-family:'JetBrains Mono',monospace;background:#fff;padding:1px 5px;border-radius:4px;border:1px solid var(--line);margin:0 2px;color:var(--ink-2)}

/* ── Notifications dropdown preview from bell ─────────────────────── */
.nf-preview{position:absolute;top:calc(100% + 8px);right:0;width:380px;max-width:calc(100vw - 24px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -18px rgba(38,66,109,.3);display:none;z-index:120;overflow:hidden}
.nf-preview.show{display:block;animation:fade-in .2s ease}
.nf-preview-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.nf-preview-head strong{font-size:14px;color:var(--ink);font-weight:700}
.nf-preview-head a{font-size:13px;color:var(--clay-deep);font-weight:600;text-decoration:none}
.nf-preview-head a:hover{text-decoration:underline}
.nf-preview-list{list-style:none;padding:0;margin:0;max-height:380px;overflow-y:auto}
.nf-preview-list li{display:flex;align-items:flex-start;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line);font-size:13px;line-height:1.4;transition:background .12s}
.nf-preview-list li:hover{background:var(--cream-2)}
.nf-preview-list li:last-child{border-bottom:none}
.nf-preview-list li.unread{background:rgba(214,226,239,.3)}
.nf-preview-list li .ico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;background:var(--cream-2);color:var(--clay-deep)}
.nf-preview-list li .ico.sage  {background:var(--sage-tint);color:var(--sage-deep)}
.nf-preview-list li .ico.butter{background:var(--butter-tint);color:var(--butter-deep)}
.nf-preview-list li .ico.clay  {background:var(--clay-tint);color:var(--clay-deep)}
.nf-preview-list li .ico svg{width:14px;height:14px}
.nf-preview-list strong{display:block;color:var(--ink);font-weight:600;font-size:13px}
.nf-preview-list span{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.nf-preview-foot{padding:10px 18px;border-top:1px solid var(--line);text-align:center}
.nf-preview-foot button{background:transparent;border:none;color:var(--clay-deep);font-weight:600;font-size:13px;cursor:pointer;padding:4px 8px;border-radius:6px;font-family:inherit}
.nf-preview-foot button:hover{background:var(--cream-2)}

/* ── AI assistant ────────────────────────────────────────────────── */
.ai-fab{position:fixed;bottom:22px;right:22px;background:linear-gradient(135deg,var(--clay),var(--clay-deep));color:#fff;border:none;border-radius:999px;padding:13px 18px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:0 12px 28px -10px rgba(38,66,109,.45);z-index:115;transition:transform .25s ease,box-shadow .25s ease;letter-spacing:-.005em}
.ai-fab:hover{transform:translateY(-2px);box-shadow:0 18px 36px -12px rgba(38,66,109,.55)}
.ai-fab svg{width:18px;height:18px;animation:ai-spark 3s ease-in-out infinite}
.ai-fab.hide{transform:scale(0);opacity:0;pointer-events:none}
@keyframes ai-spark{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(15deg) scale(1.1)}}

.ai-panel{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:100vw;background:#fff;border-left:1px solid var(--line);box-shadow:-12px 0 36px -16px rgba(38,66,109,.3);z-index:118;transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
.ai-panel.show{transform:translateX(0)}
.ai-head{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--cream),#fff)}
.ai-head .ai-mark{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--clay),var(--clay-deep));color:#fff;display:grid;place-items:center;flex-shrink:0}
.ai-head .ai-mark svg{width:18px;height:18px}
.ai-head strong{display:block;font-size:14.5px;color:var(--ink);font-weight:700;line-height:1.2}
.ai-head span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.ai-head .ai-x{margin-left:auto;background:transparent;border:none;color:var(--muted);cursor:pointer;padding:6px;border-radius:6px;display:grid;place-items:center;transition:.15s}
.ai-head .ai-x:hover{background:var(--cream-2);color:var(--ink)}
.ai-head .ai-x svg{width:18px;height:18px}

.ai-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px}
.ai-msg{display:flex;animation:fade-in .25s ease}
.ai-msg-user{justify-content:flex-end}
.ai-msg-bot{justify-content:flex-start}
.ai-bubble{max-width:88%;padding:12px 16px;border-radius:14px;font-size:14px;line-height:1.55;color:var(--ink-2);letter-spacing:-.005em}
.ai-msg-user .ai-bubble{background:var(--clay);color:#fff;border-bottom-right-radius:4px}
.ai-msg-bot  .ai-bubble{background:var(--cream-2);color:var(--ink-2);border-bottom-left-radius:4px}
.ai-bubble a{color:var(--clay-deep);font-weight:600;border-bottom:1px solid transparent;transition:.2s}
.ai-bubble a:hover{border-bottom-color:var(--clay-deep)}
.ai-msg-user .ai-bubble a{color:#fff;border-color:rgba(255,255,255,.4)}

.ai-typing{display:inline-flex;gap:4px;padding:14px 16px}
.ai-typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:ai-bounce 1.4s ease-in-out infinite}
.ai-typing span:nth-child(2){animation-delay:.2s}
.ai-typing span:nth-child(3){animation-delay:.4s}
@keyframes ai-bounce{0%,80%,100%{opacity:.4;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}

.ai-suggest{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.ai-suggest button{background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 12px;text-align:left;font-family:inherit;font-size:13px;color:var(--ink-2);cursor:pointer;transition:.15s;letter-spacing:-.005em}
.ai-suggest button:hover{background:var(--clay-tint);color:var(--clay-deep);border-color:var(--clay)}

.ai-form{display:flex;align-items:center;gap:8px;padding:14px 16px;border-top:1px solid var(--line);background:#fff}
.ai-form input{flex:1;border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-family:inherit;font-size:14px;color:var(--ink);background:var(--cream);outline:none;transition:.15s}
.ai-form input:focus{border-color:var(--clay);background:#fff;box-shadow:0 0 0 3px var(--clay-tint)}
.ai-send{background:var(--clay);color:#fff;border:none;border-radius:10px;width:40px;height:40px;display:grid;place-items:center;cursor:pointer;transition:.15s;flex-shrink:0}
.ai-send:hover{background:var(--clay-deep)}
.ai-send svg{width:16px;height:16px}

@media (max-width:520px){
  .ai-panel{width:100vw}
  .ai-fab{bottom:14px;right:14px;padding:11px 14px;font-size:13px}
}

/* ── Saved views chip row (Tasks page) ────────────────────────────── */
.sv-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;padding:0 0 12px;border-bottom:1px dashed var(--line);align-items:center}
.sv-chip{padding:6px 13px;border-radius:999px;background:var(--cream-2);border:1px solid var(--line);color:var(--ink-2);font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:.15s;letter-spacing:-.005em}
.sv-chip:hover{background:#fff;border-color:var(--line-strong);color:var(--ink)}
.sv-chip.active{background:var(--clay);color:#fff;border-color:var(--clay);font-weight:600}
.sv-add{margin-left:auto;background:transparent;border:1px dashed var(--line-strong);border-radius:999px;padding:6px 13px;font-family:inherit;font-size:12.5px;color:var(--muted);cursor:pointer;transition:.15s;font-weight:500}
.sv-add:hover{border-color:var(--clay);color:var(--clay-deep);background:var(--clay-tint)}
@media (max-width:640px){.sv-add{margin-left:0;width:100%}}

/* ── Drag-anywhere CSV import ─────────────────────────────────────── */
.gdrop-overlay{position:fixed;inset:0;background:rgba(22,34,54,.6);backdrop-filter:blur(8px);z-index:280;display:none;align-items:center;justify-content:center;padding:24px;animation:fade-in .15s ease;pointer-events:none}
.gdrop-overlay.show{display:flex}
.gdrop-card{background:#fff;border:3px dashed var(--clay);border-radius:24px;padding:48px 56px;text-align:center;color:var(--ink);max-width:480px;animation:fade-in .25s ease}
.gdrop-card svg{color:var(--clay-deep);margin-bottom:14px}
.gdrop-card h3{margin:0 0 6px;font-size:22px;font-weight:700;letter-spacing:-.022em}
.gdrop-card p{margin:0;font-size:14.5px;color:var(--muted)}


/* ── Safety net: any json/code preview never breaks its container ───── */
.json-prev,.json-prev code,.json-prev pre{
  white-space:pre-wrap !important;
  word-break:break-word !important;
  overflow-wrap:anywhere !important;
  max-width:100%;
  box-sizing:border-box
}
/* Run wizard right-rail must respect its grid column */
.run-aside,.run-aside > *{min-width:0;max-width:100%}
.run-aside .app-card{overflow:hidden}