/* Website dashboard embedded 1:1 in the app Settings modal (scoped to #setPage). */
#setPage{--sans:"Plus Jakarta Sans",system-ui,sans-serif;--disp:"Plus Jakarta Sans",system-ui,sans-serif;--ink:#e2e3df;--body-c:#c2c4c0;--mut:#9d9e9a;--blue:#3d95ff;--blue-deep:#1f86f7;--ease:cubic-bezier(.22,1,.36,1);color:#e2e3df;font-family:var(--sans);}
@scope (#setPage) {
/* account.css — /account dashboard, styled after the light SaaS reference:
   soft gray canvas, white rounded panels, icon-chip stat tiles, quiet
   gray-pill nav with a blue upgrade card, clean table. Light-only page. */

[hidden]{ display:none !important; }

.account-dash-page{
  min-height:100vh; min-height:100dvh;
  padding:24px; box-sizing:border-box;
  display:flex; align-items:safe center; justify-content:center;
  color:#1c2430; font-family:var(--sans);
  background:transparent;  /* the .acct-bg layer below shows through */
}

/* ── Background canvas: same gradient + waves + flicker dot-grid as login ── */
.acct-bg{
  position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  background:linear-gradient(180deg,#5b86f0 0,#8fb1f6 9%,#d3e2fb 25%,#eef2f8 52%,#f2f5f9 78%,#eceff4 100%);
}
.acct-scene{
  position:absolute; top:0; left:0; width:100%; height:min(100%,1150px);
  object-fit:cover; object-position:center top; -webkit-user-drag:none; user-select:none;
  -webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 95%);
  mask-image:linear-gradient(180deg,#000 58%,transparent 95%);
}
/* dots hug the widget: dense around its centre, faded out well before the
   page edges so they surround/underlie the widget rather than fill the page */
.acct-grid{
  position:absolute; inset:0; width:100%; height:100%;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 78%,transparent 100%);
  mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 78%,transparent 100%);
}

/* ── App frame: floating widget on the canvas (sizes to content) ── */
.dash-frame{
  width:100%; max-width:1180px;
  height:min(720px, calc(100dvh - 48px));   /* fixed size — content scrolls inside */
  display:grid; grid-template-columns:236px 1fr;
  border-radius:20px; overflow:hidden; background:#fff;
  box-shadow:0 24px 60px -24px rgba(20,30,55,.4), 0 4px 16px rgba(20,30,55,.08);
}

/* ── Sidebar ────────────────────────────────────────────────────── */
.dash-side{
  display:flex; flex-direction:column;
  padding:16px 14px; border-right:1px solid #eef0f4; background:#fcfcfd;
  min-width:0;
}
.side-user{
  display:flex; align-items:center; gap:10px;
  padding:8px; border-radius:12px; border:1px solid transparent; background:transparent;
}
.side-user-av{
  flex:none; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--disp); font-weight:800; font-size:1rem; color:#fff; user-select:none;
}
.side-user-txt{ min-width:0; }
.side-user-txt b{ display:block; font-size:.8rem; font-weight:700; color:#1c2430; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.side-user-txt span{ display:block; font-size:.72rem; color:#8a93a3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.side-search{
  display:flex; align-items:center; gap:8px;
  margin:12px 2px 6px; padding:8px 10px; border-radius:10px;
  border:1px solid #eef0f4; background:#fff; color:#aab2c0;
}
.side-search svg{ width:14px; height:14px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.side-search input{ flex:1; min-width:0; border:0; outline:0; background:transparent; font-family:var(--sans); font-size:.8rem; color:#1c2430; }
.side-search input::placeholder{ color:#aab2c0; }

.dash-nav{ display:flex; flex-direction:column; gap:2px; margin-top:10px; }
.dash-nav-label{ font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#b3bac6; padding:14px 10px 5px; border-top:1px solid #eef0f4; margin-top:10px; }
.dash-nav-item{
  display:flex; align-items:center; gap:10px; width:100%;
  appearance:none; border:0; cursor:pointer; text-align:left; text-decoration:none;
  font-family:var(--disp); font-weight:600; font-size:.84rem; color:#6d7686;
  padding:.62em .75em; border-radius:10px; background:transparent;
  transition:background .15s, color .15s;
}
.dash-nav-item svg{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.dash-nav-item:hover{ background:#f1f3f7; color:#1c2430; }
.dash-nav-item.is-active{ background:#eef1f6; color:#1c2430; }
.dash-nav-item.is-active svg{ color:#3b8fff; }

/* blue upgrade card pinned at the bottom (reference's "Become Pro Access") */
.side-foot{ margin-top:auto; display:flex; flex-direction:column; gap:10px; padding-top:14px; }
.side-upgrade{
  border-radius:14px; padding:16px 15px 14px; color:#fff; text-align:center;
  background:linear-gradient(160deg,#3dcdff 0%,#3ba0ff 35%,#1f6fe0 100%);
  box-shadow:none;
}
/* Team plan variant — matches the purple Team badge */
.side-upgrade.is-team{
  background:linear-gradient(160deg,#8a63f2 0%,#7048e8 35%,#5a37c9 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,
             0 -8px 18px rgba(50,20,120,.3) inset,
             0 10px 24px -10px rgba(90,55,201,.55);
}
.side-upgrade h3{ font-family:var(--disp); font-weight:800; font-size:.92rem; margin:0 0 4px; }
.side-upgrade p{ font-size:.74rem; line-height:1.4; margin:0 0 12px; color:rgba(255,255,255,.85); }
.side-upgrade .btn{ width:100%; font-size:.8rem; padding:.6em 1em; border-radius:7px; background-image:linear-gradient(180deg,#fff,#e8eefb); color:#1f6fe0; box-shadow:0 1px 0 rgba(255,255,255,0) inset, 0 2px 6px rgba(10,30,70,.17); border:0; }
.side-upgrade.is-team .btn{ color:#5a37c9; }
.side-logout{
  appearance:none; cursor:pointer; width:100%;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--disp); font-weight:600; font-size:.82rem; color:#ffffff;
  background-image:linear-gradient(180deg,#b32121,#a82c2c); border:1px solid #8f1d1d;
  padding:.6em 1em; border-radius:10px;
  box-shadow:none;
  transition:filter .15s, background-image .15s, color .15s, box-shadow .15s;
}
.side-logout svg{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.side-logout:hover{ filter:brightness(1.06); }
.side-logout:active{ box-shadow:0 1px 2px rgba(90,12,12,.4) inset; }

/* ── Main column ────────────────────────────────────────────────── */
.dash-main{ display:flex; flex-direction:column; min-width:0; min-height:0; background:#f6f7f9; }

.dash-topbar{
  display:flex; align-items:center; gap:14px;
  padding:12px 22px; background:#fff; border-bottom:1px solid #eef0f4;
}
.top-search{ display:flex; align-items:center; gap:9px; flex:0 1 auto; color:#aab2c0; }
.top-search svg{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.top-search input{ flex:1; min-width:0; border:0; outline:0; background:transparent; font-family:var(--sans); font-size:.88rem; color:#1c2430; }
.top-search input::placeholder{ color:#aab2c0; }

.dash-content{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:20px 22px 34px; }
.dash-content::-webkit-scrollbar{ width:10px; }
.dash-content::-webkit-scrollbar-thumb{ background:#d7dce4; border-radius:8px; border:3px solid #f6f7f9; }
.dash-content::-webkit-scrollbar-thumb:hover{ background:#c4cbd6; }
.dash-content{ scrollbar-width:thin; scrollbar-color:#d7dce4 transparent; }
.dash-loading{ color:#8a93a3; padding:60px 4px; font-size:.92rem; }

.status-chip{ font-family:var(--disp); font-weight:700; font-size:.72rem; padding:.34em .8em; border-radius:8px; }
.status-chip.is-active{ color:#ffffff; background:#1e9e5a; }
.status-chip.is-free{ color:#6d7686; background:#eef0f4; }
.status-chip.is-warn{ color:#b07207; background:#fdf3dd; }

/* verify banner */
.dash-banner{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:0 0 16px; padding:12px 16px; border-radius:12px; font-size:.86rem; line-height:1.45;
  background:#fdf3dd; border:1px solid #f3dfae; color:#7a5a14;
}
.dash-banner button{ appearance:none; border:0; background:none; cursor:pointer; padding:0; font:inherit; font-weight:700; color:#1f6fe0; text-decoration:underline; }

/* panels */
.dash-panel{ display:none; }
.dash-panel.is-active{ display:block; animation:dashfade .34s var(--ease); }
/* leaving panel keeps display:block (still has .is-active) and fades out */
.dash-panel.is-leaving{ animation:dashfadeout .16s var(--ease) forwards; pointer-events:none; }
@keyframes dashfade{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes dashfadeout{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateY(-8px); } }
@media (prefers-reduced-motion:reduce){ .dash-panel.is-active, .dash-panel.is-leaving{ animation:none; } }

/* ── Stat tiles (label + big number) ────────────────────────────── */
.tile-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.tile{
  background:#fff; border:1px solid #eef0f4; border-radius:14px; padding:16px;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.tile:hover{ border-color:#dfe4ec; box-shadow:0 6px 18px -12px rgba(20,30,55,.35); }
.tile span{ display:block; font-size:.76rem; font-weight:600; color:#8a93a3; }
.tile b{ display:block; margin-top:4px; font-family:var(--disp); font-weight:800; font-size:1.25rem; letter-spacing:-.01em; color:#1c2430; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tile b.tile-fold{ font-size:1rem; }   /* the most-worked-on folder name — smaller so it reads on one line */

/* ── Overview (redesigned): plan hero + usage + connections + quick actions ── */
.ov{ display:flex; flex-direction:column; gap:14px; }
.ov-eyebrow{ display:block; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#b3bac6; margin-bottom:9px; }

/* Plan hero — brand-gradient centrepiece */
.ov-hero{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:26px;
  padding:22px 24px; border-radius:18px; color:#fff;
  background:linear-gradient(135deg,#2f7bf0 0%,#3f8dff 44%,#1f63e0 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.32) inset;
}
.ov-hero-glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 150% at 100% -10%, rgba(255,255,255,.30), transparent 55%),
    radial-gradient(90% 130% at -5% 120%, rgba(8,34,96,.42), transparent 60%);
}
.ov-hero-main{ position:relative; min-width:0; }
.ov-hero-eyebrow{ display:block; font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.72); margin-bottom:9px; }
.ov-hero-title{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ov-hero .ov-plan-name{ font-family:var(--disp); font-weight:800; font-size:2rem; line-height:1; letter-spacing:-.025em; color:#fff; margin:0; }
.ov-status{ backdrop-filter:saturate(1.1); }
.ov-status.is-active{ color:#2f7bf0; background:#ffffff; }   /* white chip on the blue plan hero (header card keeps green) */
.ov-status.is-free{ color:#eaf1ff; background:rgba(255,255,255,.18); }
.ov-status.is-warn{ color:#7a5a14; background:#ffe6a8; }
.ov-hero-sub{ position:relative; font-size:.85rem; line-height:1.45; color:rgba(255,255,255,.85); margin:9px 0 0; max-width:44ch; }
.ov-hero-meta{ display:flex; flex-wrap:wrap; gap:12px 30px; margin-top:17px; }
.ov-hero-fact{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.ov-hero-fact span{ font-size:.66rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.68); }
.ov-hero-fact b{ font-family:var(--disp); font-weight:700; font-size:.95rem; color:#fff; white-space:nowrap; }
.ov-hero-side{ position:relative; flex:none; display:flex; flex-direction:column; gap:9px; width:172px; }
.ov-hero-btn{
  appearance:none; cursor:pointer; width:100%; font-family:var(--disp); font-weight:700; font-size:.84rem;
  color:#1f63e0; background-image:linear-gradient(180deg,#fff,#eef3fe); border:0; padding:.72em 1em; border-radius:11px;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 6px 16px -6px rgba(8,34,96,.55); transition:filter .15s, transform .12s;
}
.ov-hero-btn:hover{ filter:brightness(1.03); }
.ov-hero-btn:active{ transform:translateY(1px); }
.ov-hero-btn2{
  appearance:none; cursor:pointer; width:100%; font-family:var(--disp); font-weight:600; font-size:.84rem;
  color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.4); padding:.7em 1em; border-radius:11px;
  transition:background .15s, border-color .15s;
}
.ov-hero-btn2:hover{ background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.6); }
.ov-hero-btn:focus-visible, .ov-hero-btn2:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* two-column body: usage + connections */
.ov-cols{ display:grid; grid-template-columns:1.5fr 1fr; gap:14px; align-items:stretch; }
.ov-cols .dash-card{ display:flex; flex-direction:column; }
/* columns are equal height; the spark chart GROWS to absorb any extra height so the
   usage card fills itself edge-to-edge (no blank band), link sits right under the meters */
.ov-usage .ov-link{ margin-top:0; }
/* the right column stacks two cards (Connections + App activity) to fill its height */
.ov-col{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.ov-col .dash-card + .dash-card{ margin-top:0; }
.ov-activity{ flex:1 1 auto; }
.ov-activity .ov-link{ margin-top:auto; }
/* compact inline stat row — keeps the card SHORT so the columns' natural heights match */
/* transparent, divided stat row — no filled boxes; hairline separators + roomy numbers use the full card width */
.ov-act-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:0; margin-bottom:14px; }
.ov-act-cell{ min-width:0; background:transparent; border:0; border-radius:0; padding:1px 16px; }
.ov-act-cell:first-child{ padding-left:2px; }
.ov-act-cell + .ov-act-cell{ border-left:1px solid #e9ebf0; }
.ov-act-cell span{ display:block; font-size:.68rem; font-weight:600; color:#8a93a3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ov-act-cell b{ display:block; margin-top:6px; font-family:var(--disp); font-weight:800; font-size:1.15rem; letter-spacing:-.01em; color:#1c2430; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ov-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.ov-card-head .ov-eyebrow{ margin-bottom:4px; }
.ov-card-head .dash-muted{ font-size:.8rem; }
.ov-conn-count{ font-family:var(--disp); font-weight:800; color:#1c2430; }
.ov-usage-total{ text-align:right; flex:none; line-height:1.05; }
.ov-usage-total b{ display:block; font-family:var(--disp); font-weight:800; font-size:1.35rem; letter-spacing:-.02em; color:#1c2430; }
.ov-usage-total span{ font-size:.68rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#9aa2b1; }
.ov-link{
  align-self:flex-start; margin-top:auto; padding-top:14px;
  appearance:none; border:0; background:none; cursor:pointer;
  font-family:var(--disp); font-weight:600; font-size:.8rem; color:#1f6fe0;
}
.ov-link:hover{ text-decoration:underline; }
.ov-link span{ transition:transform .15s var(--ease); display:inline-block; }
.ov-link:hover span{ transform:translateX(3px); }

/* ── Overview: "Explore Clodex" feature grid ── */
.ov-explore{ margin-top:26px; }
.ov-explore-head{ margin-bottom:13px; }
.ov-explore-head .ov-eyebrow{ margin-bottom:3px; }
.ov-explore-head .dash-muted{ font-size:.82rem; }
.ov-feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.ov-feat{
  appearance:none; text-align:left; cursor:pointer; font:inherit;
  display:flex; align-items:flex-start; gap:12px;
  background:#fff; border:1px solid #eef0f4; border-radius:13px; padding:15px 15px;
  transition:border-color .15s var(--ease), box-shadow .18s var(--ease), transform .15s var(--ease);
}
.ov-feat:hover{ border-color:#dfe4ec; box-shadow:0 8px 22px -14px rgba(20,30,55,.4); transform:translateY(-2px); }
.ov-feat:focus-visible{ outline:2px solid #2f7bf0; outline-offset:2px; }
/* icons: no chip/box, plain gray strokes that darken toward the text on hover */
.ov-feat-ic{ flex:none; display:flex; align-items:center; justify-content:center; margin-top:1px; color:#8a93a3; transition:color .15s var(--ease); }
.ov-feat-ic svg{ width:21px; height:21px; }
.ov-feat:hover .ov-feat-ic{ color:#1c2430; }
.ov-feat-tx{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.ov-feat-tx b{ font-family:var(--disp); font-weight:700; font-size:.9rem; color:#1c2430; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.ov-feat-tx span{ font-size:.79rem; line-height:1.4; color:#8a93a3; }
.ov-feat-tag{ font-family:var(--sans); font-size:.56rem; font-weight:700; letter-spacing:.05em; color:#8a6d2f; background:#fbf1dc; border:1px solid #f0e2c2; padding:.14em .45em; border-radius:5px; }
.ov-feat-go{ flex:none; align-self:center; color:#c2c9d4; font-size:1.05rem; transition:transform .15s var(--ease), color .15s var(--ease); }
.ov-feat:hover .ov-feat-go{ color:#8a93a3; transform:translateX(3px); }
@media (max-width:900px){ .ov-feat-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .ov-feat-grid{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){ .ov-feat, .ov-feat-go, .ov-feat:hover{ transition:none; transform:none; } }

/* mini activity bars — same data as the usage heatmap */
.ov-spark{ display:flex; align-items:flex-end; gap:4px; flex:1 1 auto; min-height:96px; margin:0 0 16px; box-sizing:border-box; padding:9px 11px; background:#f6f8fb; border:1px solid #eef0f4; border-radius:12px; }
.ov-bar{
  flex:1 1 0; min-width:0; border-radius:4px 4px 2px 2px;
  background:linear-gradient(180deg,#63a6ff,#2f7bf0); cursor:default;
  transition:filter .15s var(--ease), transform .12s var(--ease);
}
.ov-bar:hover{ filter:brightness(1.08); transform:scaleY(1.04); transform-origin:bottom; }
.ov-bar.is-empty{ background:#e2e7ef; }
.ov-meters{ display:flex; flex-direction:column; gap:14px; }

/* connected-service chips */
.ov-conn-list{ display:flex; flex-wrap:wrap; gap:8px; }
.ov-conn-chip{
  display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px;
  border-radius:12px; background:#f6f8fb; border:1px solid #eaedf3;
}
.ov-conn-chip img{ width:26px; height:26px; flex:none; -webkit-user-drag:none; user-select:none; }
.ov-conn-chip b{ font-family:var(--disp); font-weight:600; font-size:.8rem; color:#1c2430; }
.ov-conn-more{
  display:inline-flex; align-items:center; padding:7px 12px; border-radius:10px;
  background:#eef1f6; font-family:var(--disp); font-weight:700; font-size:.8rem; color:#6d7686;
}
.ov-conn-empty{ font-size:.82rem; line-height:1.5; margin:0; }
.ov-conn-add{
  align-self:flex-start; margin-top:14px; appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--disp); font-weight:600; font-size:.8rem; color:#1f6fe0;
  background:#eef4ff; border:1px dashed #b9d1fb; padding:.5em .9em; border-radius:10px;
  transition:background .15s, border-color .15s;
}
.ov-conn-add:hover{ background:#e2edff; border-color:#8fb6f7; }
.ov-conn-add span{ font-size:1.05em; line-height:0; }

/* quick actions */
.ov-quick{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.ov-quick-item{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer; appearance:none;
  background:#fff; border:1px solid #eef0f4; border-radius:14px; padding:15px 16px;
  font-family:var(--disp); font-weight:600; font-size:.86rem; color:#3a4250;
  transition:border-color .15s, box-shadow .15s, color .15s;
}
.ov-quick-item:hover{ border-color:#dfe4ec; box-shadow:0 6px 18px -12px rgba(20,30,55,.35); color:#1c2430; }
.ov-quick-item svg{ width:18px; height:18px; flex:none; fill:none; stroke:#8a93a3; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:stroke .15s; }
.ov-quick-item:hover svg{ stroke:#3b8fff; }
.ov-quick-item .ov-arrow{ margin-left:auto; color:#c2c9d4; font-weight:700; }

@media (max-width:820px){
  .ov-cols{ grid-template-columns:1fr; }
  .ov-quick{ grid-template-columns:1fr; }
  .ov-hero{ flex-direction:column; align-items:flex-start; gap:18px; }
  .ov-hero-side{ width:100%; flex-direction:row; }
  .ov-hero-btn, .ov-hero-btn2{ flex:1; }
}

/* ── Cards ──────────────────────────────────────────────────────── */
.dash-card{ background:#fff; border:1px solid #eef0f4; border-radius:14px; padding:18px 20px; }
.dash-card + .dash-card, .tile-grid + .dash-card, .dash-card + .tile-grid{ margin-top:14px; }
/* billing flow: subscription (#subView) → payment (#payCard) aren't adjacent cards, so give the gap explicitly */
#planChooser + #payCard{ margin-top:18px; }
.dash-card-h{ font-family:var(--disp); font-weight:700; font-size:.95rem; color:#1c2430; margin:0 0 3px; }
.dash-muted{ color:#8a93a3; font-size:.83rem; line-height:1.45; margin:0; }
.dash-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }

.dash-price{ display:flex; align-items:baseline; gap:8px; margin:10px 0 4px; }
.dash-price b{ font-family:var(--disp); font-weight:800; font-size:1.7rem; color:#1c2430; letter-spacing:-.02em; }
.dash-price span{ color:#8a93a3; font-size:.88rem; }
.dash-renew{ font-size:.83rem; color:#5d6675; margin:2px 0 0; }
.dash-renew b{ color:#1c2430; font-weight:600; }
.dash-card-actions{ display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; }
.dash-card-actions .btn{ font-size:.83rem; padding:.6em 1.05em; }

.btn-quiet{
  appearance:none; cursor:pointer; font-family:var(--disp); font-weight:600; font-size:.83rem;
  color:#5d6675; background:#fff; border:1px solid #e4e8ee; padding:.6em 1.05em; border-radius:10px;
  transition:background .15s, color .15s, border-color .15s;
}
.btn-quiet:hover{ background:#f1f3f7; color:#1c2430; }
.btn-danger{ color:#c23c3c; border-color:#f0d9d9; }
.btn-danger:hover{ background:#fbf0f0; color:#a32e2e; }

/* payment method row */
.dash-pay{ display:flex; align-items:center; gap:13px; margin:2px 0; }
/* payment card: card info + Update button sit vertically CENTERED on one line */
#payCard > .dash-row{ align-items:center; }
.dash-card-ic{ flex:none; width:44px; height:30px; border-radius:7px; background:linear-gradient(135deg,#2b2f3a,#171a22); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.56rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.dash-pay-txt b{ color:#1c2430; font-weight:600; font-size:.92rem; }
.dash-pay-txt span{ display:block; color:#8a93a3; font-size:.78rem; margin-top:2px; }

/* "Secured by Stripe" note */
.secured{ display:flex; align-items:center; gap:7px; margin-top:14px; font-size:.75rem; color:#8a93a3; }
.secured svg{ width:13px; height:13px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.secured b{ color:#5d6675; font-weight:700; }

/* ── Invoices table (reference's list style) ────────────────────── */
.inv-table{ width:100%; border-collapse:collapse; margin-top:8px; }
.inv-table th{
  text-align:left; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#b3bac6; padding:10px 8px; border-bottom:1px solid #eef0f4;
}
.inv-table td{ padding:12px 8px; border-bottom:1px solid #f3f5f8; font-size:.85rem; color:#1c2430; }
.inv-table tr:last-child td{ border-bottom:0; }
.inv-table td.inv-num{ color:#8a93a3; font-size:.8rem; }
.inv-status{ font-size:.72rem; font-weight:700; padding:.28em .7em; border-radius:8px; }
.inv-status.is-paid{ color:#ffffff; background:#1e9e5a; }
.inv-status.is-open{ color:#ffffff; background:#e0932a; }
.inv-status.is-void, .inv-status.is-draft{ color:#ffffff; background:#8a93a3; }
.inv-link{ font-weight:600; font-size:.8rem; color:#1f6fe0; text-decoration:none; }
.inv-link:hover{ text-decoration:underline; }

/* ── Plan chooser ───────────────────────────────────────────────── */
.dash-chooser-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.dash-back{ appearance:none; border:0; background:none; cursor:pointer; font-family:var(--disp); font-weight:600; font-size:.86rem; color:#6d7686; padding:.3em 0; }
.dash-back:hover{ color:#1c2430; }
.dash-billtoggle{ display:inline-flex; padding:3px; border-radius:999px; background:#eef0f4; }
.dash-billtoggle button{ appearance:none; border:0; cursor:pointer; background:transparent; font-family:var(--disp); font-weight:600; font-size:.78rem; color:#8a93a3; padding:.42em 1em; border-radius:999px; transition:color .15s, background .15s; }
.dash-billtoggle button.is-on{ color:#1c2430; background:#fff; box-shadow:0 1px 2px rgba(30,42,70,.12); }
.dash-save{ font-size:.68rem; font-weight:700; color:#1e9e5a; margin-left:5px; }

.dash-plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.dash-plan{ position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid #eef0f4; border-radius:14px; padding:18px; }
.dash-plan.is-current{ border-color:#3b8fff; box-shadow:0 0 0 1px #3b8fff; }
.dash-plan-name{ font-family:var(--disp); font-weight:700; font-size:1rem; color:#1c2430; margin:0; }
.dash-plan-price{ display:flex; align-items:baseline; gap:5px; margin:8px 0 2px; }
.dash-plan-price b{ font-family:var(--disp); font-weight:800; font-size:1.6rem; color:#1c2430; letter-spacing:-.02em; }
.dash-plan-price span{ color:#8a93a3; font-size:.8rem; }
.dash-plan-note{ font-size:.74rem; color:#8a93a3; min-height:1.1em; margin:0; }
.dash-plan-feats{ list-style:none; margin:13px 0 16px; padding:0; display:flex; flex-direction:column; gap:7px; }
.dash-plan-feats li{ position:relative; padding-left:21px; font-size:.8rem; color:#5d6675; line-height:1.35; }
.dash-plan-feats li::before{ content:""; position:absolute; left:0; top:.26em; width:13px; height:13px; border-radius:50%; background:#3b8fff; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat; }
.dash-plan-cta{ margin-top:auto; width:100%; font-size:.83rem; padding:.68em 1em; }
.dash-plan-cta.is-current{ cursor:default; color:#fff; background-image:linear-gradient(#9aa3b2,#828c9c 60%,#6f7989); box-shadow:rgba(255,255,255,.4) 0 1px 0 0 inset, rgba(40,50,70,.25) 0 2px 5px 0; }

/* ── Modals (our UI; Stripe's secure field mounts inside) ───────── */
.modal-veil{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(18,24,36,.45);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.modal{
  width:100%; max-width:440px; background:#fff; border-radius:16px;
  padding:22px; box-shadow:0 30px 80px -20px rgba(18,24,36,.45);
  animation:dashfade .24s var(--ease);
}
.modal h2{ font-family:var(--disp); font-weight:800; font-size:1.05rem; color:#1c2430; margin:0 0 4px; }
.modal p{ font-size:.85rem; color:#5d6675; line-height:1.5; margin:0 0 6px; }
.modal-actions{ display:flex; gap:9px; justify-content:flex-end; margin-top:18px; }
.modal-actions .btn{ font-size:.84rem; padding:.6em 1.1em; }
#pmElement{ margin:14px 0 2px; min-height:56px; }
.pm-err{ font-size:.8rem; color:#c23c3c; margin-top:8px; min-height:1em; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width:860px){
  .account-dash-page{ padding:0; }
  .dash-frame{ grid-template-columns:1fr; margin:0; height:auto; min-height:100dvh; border-radius:0; box-shadow:none; }
  .dash-content{ overflow-y:visible; }
  .dash-side{ flex-direction:row; align-items:center; gap:8px; border-right:0; border-bottom:1px solid #eef0f4; overflow-x:auto; padding:10px 14px; }
  .side-user{ border:0; padding:4px; }
  .side-user-txt, .side-search, .dash-nav-label{ display:none; }
  .dash-nav{ flex-direction:row; margin:0; }
  .dash-nav-item span{ display:none; }
  .side-foot{ margin:0 0 0 auto; flex-direction:row; padding:0; }
  .side-upgrade{ display:none; }
  .tile-grid{ grid-template-columns:1fr 1fr; }
  .dash-plans{ grid-template-columns:1fr; }
}

/* ── Real card-brand logo chip (payment method) ── */
.card-logo{ flex:none; width:46px; height:30px; border-radius:6px; background:#fff; border:1px solid #e4e8ee; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:3px; box-sizing:border-box; }
.card-logo svg{ width:100%; height:100%; display:block; }

/* subscription ending (cancelled, runs out at period end) */
.dash-renew.is-ending{ color:#a8571b; }
.dash-renew.is-ending b{ color:#8a3f0c; }

/* ── Account panel form ── */
/* one cohesive card: identity row (avatar + horizontal buttons) → divider → field grid */
.acc-identity{ display:flex; align-items:center; gap:18px; }
.acc-photo{ flex:none; width:72px; height:72px; border-radius:50%; background:#eef0f4 center/cover no-repeat;
  display:flex; align-items:center; justify-content:center; font-family:var(--disp); font-weight:800; font-size:1.85rem; color:#fff;
  user-select:none; }
.acc-photo-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:9px; min-width:0; }
.acc-photo-btns{ display:flex; flex-wrap:wrap; gap:9px; }
.acc-upload{ display:inline-flex; cursor:pointer; }
.acc-hint{ font-size:.76rem; color:#8a93a3; margin:0; line-height:1.4; }

/* profile-photo editor modal — ported from the website account dashboard (drag + zoom + transparency) */
.modal-veil{ position:fixed; inset:0; z-index:9500;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(10,12,16,.55); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
.modal-veil[hidden]{ display:none; }
.modal{ width:100%; max-width:400px; background:#fff; border-radius:16px; padding:22px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6); animation:setPop .2s cubic-bezier(.22,1,.36,1);
  font-family:"Plus Jakarta Sans",system-ui,sans-serif; }
.modal h2{ font-family:"Plus Jakarta Sans",system-ui,sans-serif; font-weight:800; font-size:1.05rem; color:#1c2430; margin:0 0 4px; }
.modal p{ font-size:.85rem; color:#5d6675; line-height:1.5; margin:0 0 6px; }
.modal-actions{ display:flex; gap:9px; justify-content:flex-end; margin-top:18px; }
/* the modal lives OUTSIDE #setPage, so the scoped .btn/.btn-blue don't reach it — define them here */
.modal-actions .btn{ appearance:none; cursor:pointer; font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  font-weight:600; font-size:.84rem; line-height:1; padding:.6em 1.1em; border-radius:9px; border:1px solid transparent; }
.modal-actions .btn-blue{ color:#fff; background-image:linear-gradient(180deg,#4b9bff,#2f7bf0); box-shadow:0 1px 0 rgba(255,255,255,.4) inset; }
.modal-actions .btn-blue:hover{ filter:brightness(1.05); }
.modal-actions .btn-blue:active{ box-shadow:none; }
.photo-editor{ text-align:left; }
.pe-stage{ position:relative; width:260px; height:260px; margin:16px auto 6px;
  border-radius:20px; overflow:hidden; cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none;
  background-color:#fff;
  background-image:linear-gradient(45deg,#e6e9ef 25%,transparent 25%),linear-gradient(-45deg,#e6e9ef 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e6e9ef 75%),linear-gradient(-45deg,transparent 75%,#e6e9ef 75%);
  background-size:18px 18px; background-position:0 0,0 9px,9px -9px,-9px 0; }
.pe-stage:active{ cursor:grabbing; }
.pe-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.pe-ring{ position:absolute; inset:0; pointer-events:none; border-radius:20px;
  box-shadow:inset 0 0 0 1px rgba(24,34,66,.12);
  background:radial-gradient(circle closest-side at 50% 50%, transparent 0 99.4%, rgba(0,0,0,.7) 100%); }
.pe-zoom{ display:flex; align-items:center; gap:11px; width:260px; margin:2px auto 6px; }
.pe-zbtn{ flex:none; width:30px; height:30px; border-radius:9px; cursor:pointer;
  border:1px solid #e4e8ee; background:#fff; color:#5d6675; font-size:1.15rem; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:background .14s, border-color .14s; }
.pe-zbtn:hover{ background:#f3f5f9; border-color:#d3d9e2; color:#1c2430; }
.pe-zoom input[type=range]{ flex:1; min-width:0; accent-color:#3b8fff; cursor:pointer; }

.acc-divider{ height:1px; background:#eef0f4; margin:18px 0 4px; }

/* two-column field grid fills the card width; email spans full width */
.acc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; margin-top:16px; }
.acc-grid .acc-field{ margin-top:0; min-width:0; }
.acc-field-wide{ grid-column:1 / -1; }
.acc-grid .acc-input, .acc-grid .acc-combo{ max-width:none; }
@media (max-width:640px){ .acc-grid{ grid-template-columns:1fr; } }

.acc-field{ margin-top:16px; }
.acc-label{ display:block; font-size:.8rem; font-weight:600; color:#5d6675; margin-bottom:6px; }
.acc-input{ width:100%; max-width:420px; box-sizing:border-box; height:44px; padding:0 13px; border-radius:10px;
  border:1px solid #e4e8ee; background:#fff; font-family:var(--sans); font-size:.9rem; color:#1c2430; transition:border-color .15s, box-shadow .15s; }
.acc-input:focus{ outline:0; border-color:#3b8fff; box-shadow:0 0 0 3px rgba(59,143,255,.16); }
.acc-input:disabled{ background:#f4f6f9; color:#8a93a3; }
/* Native select fallback (before JS enhances it): custom chevron, no chrome default */
.acc-select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238a93a3' stroke-width='1.8' stroke-linecap='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:34px; }

/* ── Custom language dropdown (fully styled — replaces the native popup) ── */
.acc-combo{ position:relative; width:100%; max-width:420px; border-radius:10px; }
.acc-combo.is-ready .acc-select{ display:none; }   /* hide native once JS enhances */

.acc-combo-btn{ width:100%; box-sizing:border-box; height:44px; padding:0 13px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1px solid #e4e8ee; border-radius:10px; background:#fff; cursor:pointer;
  font-family:var(--sans); font-size:.9rem; color:#1c2430; text-align:left;
  transition:border-color .15s, box-shadow .15s; }
.acc-combo-btn:hover{ border-color:#d3d9e2; }
.acc-combo-btn:focus-visible{ outline:0; border-color:#3b8fff; box-shadow:0 0 0 3px rgba(59,143,255,.16); }
.acc-combo.is-open .acc-combo-btn{ border-color:#3b8fff; box-shadow:0 0 0 3px rgba(59,143,255,.16); }
.acc-combo-value{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acc-combo-chev{ width:12px; height:8px; flex:none; color:#8a93a3;
  transition:transform .18s cubic-bezier(.22,1,.36,1), color .15s; }
.acc-combo.is-open .acc-combo-chev{ transform:rotate(180deg); color:#3b8fff; }

.acc-combo-list{ position:absolute; z-index:40; top:calc(100% + 6px); left:0; right:0;
  background:#fff; border:1px solid #e6eaf0; border-radius:12px; padding:5px;
  max-height:264px; overflow-y:auto; -webkit-overflow-scrolling:touch;
  box-shadow:0 1px 2px rgba(28,36,48,.06), 0 10px 22px rgba(28,36,48,.10), 0 26px 52px rgba(28,36,48,.10);
  transform-origin:top center; animation:accComboIn .14s cubic-bezier(.22,1,.36,1); }
.acc-combo-list.is-up{ transform-origin:bottom center; }
@keyframes accComboIn{ from{ opacity:0; transform:translateY(-6px) scale(.985); } to{ opacity:1; transform:none; } }
.acc-combo-list::-webkit-scrollbar{ width:11px; }
.acc-combo-list::-webkit-scrollbar-thumb{ background:#d7dde6; border-radius:20px; border:3px solid #fff; }
.acc-combo-list::-webkit-scrollbar-track{ background:transparent; }

.acc-combo-opt{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 11px; border-radius:8px; font-size:.9rem; color:#1c2430; cursor:pointer;
  user-select:none; -webkit-user-select:none; }
.acc-combo-opt-label{ white-space:nowrap; }   /* the LIST sizes to its longest option (position() widens it past the button when labels need it) */
.acc-combo-opt.is-active{ background:#f1f5fb; }
.acc-combo-opt.is-selected{ color:#2b6fd6; font-weight:600; }
.acc-combo-check{ width:16px; height:16px; flex:none; color:#3b8fff; opacity:0; }
.acc-combo-opt.is-selected .acc-combo-check{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .acc-combo-list{ animation:none; }
  .acc-combo-chev{ transition:none; }
}

/* ── Workspace: Connections ─────────────────────────────────────── */
.conn-head-main{ flex:1 1 auto; min-width:0; }
.conn-head-main .dash-muted{ max-width:60ch; }
/* Panel intro headers read as a page TITLE, not a boxed card: strip the container
   (bg/border/shadow) and align the text to the content's left edge so it sits like
   a heading above its sections. .conn-head-main is used ONLY by these intro cards. */
.dash-card:has(> .conn-head-main),
.dash-card:has(> .dash-row > .conn-head-main){
  background:transparent; border:0; box-shadow:none; border-radius:0;
  padding:0 2px 2px; margin-bottom:2px;
}
.dash-card:has(.conn-head-main) .dash-card-h{ font-size:1.28rem; letter-spacing:-.015em; margin-bottom:6px; }
.dash-card:has(.conn-head-main) .conn-head-main .dash-muted{ font-size:.86rem; }
/* count/status sits INLINE beside the title (a small pill) instead of floating far
   right in dead space now that the header has no box around it */
.dash-card-h .head-badge{
  display:inline-flex; align-items:baseline; gap:.3em; margin-left:.55em; vertical-align:middle;
  position:relative; top:-2px; font-size:.68rem; font-weight:600; letter-spacing:.01em; text-transform:none;
  color:#7b8494; background:rgba(140,152,170,.11); border:1px solid rgba(140,152,170,.18);
  padding:.3em .68em; border-radius:999px;
}
.dash-card-h .head-badge b{ font-family:var(--disp); font-weight:800; color:#39424f; }
.dash-card-h .head-pill{ margin-left:.55em; vertical-align:middle; position:relative; top:-2px; }
.conn-count{ flex:none; display:flex; flex-direction:column; align-items:flex-end; line-height:1.1; white-space:nowrap; }
.conn-count b{ font-family:var(--disp); font-weight:800; font-size:1.45rem; color:#1c2430; letter-spacing:-.02em; }
.conn-count span{ font-size:.72rem; color:#8a93a3; }

.conn-section{ margin-top:20px; }
.conn-section-head{ font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#b3bac6; margin:0 0 11px; padding-left:2px; }
.conn-empty{ padding:2px; }

/* Providers is a compact control surface, not a documentation page. Keep the
   section label and its one global control on the same line, then let each card
   show only identity, status, model and actions. */
.provider-section{ margin-top:18px; }
.provider-section + .provider-section{ margin-top:24px; padding-top:22px; border-top:1px solid #eef0f4; }
.provider-section-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 11px; }
.provider-section-head .conn-section-head{ margin:0; }
.provider-section-copy{ min-width:0; }
.provider-section-desc{ margin:4px 0 0; font-size:.76rem; line-height:1.35; }
#apImgEngineRow{ display:none; align-items:center; gap:8px; min-width:0; }
.provider-engine-label{ flex:none; font-size:.72rem; font-weight:600; color:#8a93a3; }
.provider-engine-combo{ width:180px; }
.provider-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.provider-card{ gap:14px; min-height:122px; }
.provider-session-card{ gap:8px; min-height:140px; }
.provider-image-card{ gap:8px; min-height:140px; }
.provider-plan{ margin:0; font-size:.8rem; line-height:1.35; color:#8a93a3; }
.provider-detail{ margin:0; font-size:.8rem; line-height:1.35; color:#8a93a3; }
.provider-billing-tag{ font-weight:600; }
.provider-card .conn-version{ color:#b3bac6; font-weight:600; }
.conn-foot.provider-actions-foot{ justify-content:flex-end; }
.conn-actions{ display:inline-flex; align-items:center; justify-content:flex-end; gap:7px; flex-wrap:wrap; }
.provider-api-foot{ min-height:34px; }
.provider-api-foot .ap-model{ flex:1; min-width:0; }
.provider-api-foot .ap-combo{ flex:1; width:auto; min-width:0; }

.conn-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.conn-card{
  display:flex; flex-direction:column; gap:12px;
  background:#fff; border:1px solid #eef0f4; border-radius:14px; padding:16px 17px;
  transition:border-color .15s, box-shadow .15s;
}
.conn-card.is-on{ border-color:rgba(220,231,251,.15); box-shadow:0 1px 0 rgba(31,111,224,.03); }
.conn-card-top{ display:flex; align-items:center; gap:12px; }
.conn-logo{
  flex:none; width:42px; height:42px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:#f6f7f9; border:1px solid #eef0f4;
  font-family:var(--disp); font-weight:800; font-size:1rem; color:#6d7686;
}
.conn-logo img{ width:22px; height:22px; display:block; -webkit-user-drag:none; user-select:none; }
.conn-name{ min-width:0; flex:1; }
.conn-name b{ display:block; font-family:var(--disp); font-weight:700; font-size:.9rem; color:#1c2430; }
.conn-name span{ display:block; font-size:.75rem; color:#8a93a3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conn-status{ flex:none; display:inline-flex; align-items:center; gap:5px; font-size:.68rem; font-weight:700; padding:.32em .62em; border-radius:999px; }
.conn-status .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.conn-status.is-on{ color:#1e9e5a; background:#e3f6ec; }
.conn-status.is-off{ color:#8a93a3; background:#eef0f4; }
.conn-desc{ font-size:.8rem; color:#5d6675; line-height:1.45; margin:0; }
.conn-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; }
.conn-meta{ font-size:.74rem; color:#8a93a3; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conn-btn{
  appearance:none; cursor:pointer; flex:none;
  font-family:var(--disp); font-weight:600; font-size:.78rem;
  padding:.5em .95em; border-radius:9px; border:1px solid transparent;
  transition:background .15s, color .15s, border-color .15s, filter .15s;
}
.conn-btn.connect{ color:#fff; background-image:linear-gradient(180deg,#4997f8,#2f7bf0); box-shadow:none; }
.conn-btn.connect:hover{ filter:brightness(1.05); }
.conn-btn.disconnect{ color:#5d6675; background:#fff; border-color:#e4e8ee; }
.conn-btn.disconnect:hover{ background:#fbf0f0; color:#c23c3c; border-color:#f0d9d9; }

/* update/install progress — a slim creeping bar under the card footer while npm / `claude update` runs */
.conn-prog{ width:100%; height:4px; border-radius:999px; background:rgba(127,134,147,.24); overflow:hidden; margin-top:10px; flex:none; }
.conn-prog-fill{ height:100%; width:0%; border-radius:999px; background:linear-gradient(90deg,#4997f8,#6aa6f0); transition:width .35s ease; }

/* ── Workspace: Usage ───────────────────────────────────────────── */
.usage-head{ margin-bottom:14px; }
.usage-pill{ font-family:var(--disp); font-weight:700; font-size:.76rem; color:#1f6fe0; background:#eaf1ff; border:1px solid #d7e5fd; padding:.42em .8em; border-radius:999px; white-space:nowrap; }
.usage-total{ text-align:right; }
.usage-total b{ display:block; font-family:var(--disp); font-weight:800; font-size:1.45rem; color:#1c2430; letter-spacing:-.02em; }
.usage-total span{ font-size:.73rem; color:#8a93a3; }

/* ── Contribution calendar (GitHub-style), driven by connections ── */
.usage-activity{
  --cal-c:#2f7bf0;                 /* recoloured per selected service in JS */
  --l0:#eef1f5;
  --l1:color-mix(in oklab, var(--cal-c) 20%, #eef1f5);
  --l2:color-mix(in oklab, var(--cal-c) 46%, #eef1f5);
  --l3:color-mix(in oklab, var(--cal-c) 72%, #eef1f5);
  --l4:var(--cal-c);
}
.usage-total b{ transition:color .3s var(--ease); }

/* service filter chips — the visible link to the Connections panel */
.cal-filters{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 16px; }
.cal-chip{
  display:inline-flex; align-items:center; gap:7px;
  font:inherit; font-size:.79rem; font-weight:600; color:#5d6675;
  background:#f6f8fb; border:1px solid #eaedf3; border-radius:999px;
  padding:.42em .82em; cursor:pointer;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
  -webkit-user-select:none; user-select:none;
}
.cal-chip:hover{ background:#eef2f8; }
.cal-chip img{ width:15px; height:15px; flex:none; -webkit-user-drag:none; }
.cal-chip .cal-chip-dot{ width:9px; height:9px; border-radius:3px; flex:none; background:#2f7bf0; }
.cal-chip.is-active{
  color:#1c2430; background:#fff; border-color:var(--cal-c,#2f7bf0);
  box-shadow:0 0 0 1px var(--cal-c,#2f7bf0), 0 3px 10px -5px color-mix(in oklab,var(--cal-c,#2f7bf0) 65%,transparent);
}
.cal-chip:focus-visible{ outline:2px solid var(--cal-c,#2f7bf0); outline-offset:2px; }

/* round "+" that links to Connections to add more services */
.cal-chip-add{
  width:28px; height:28px; padding:0; border-radius:999px;
  justify-content:center; color:#7b8494;
  border-style:dashed; border-color:#d2d9e4;
}
.cal-chip-add .cal-chip-plus{ font-size:1.05rem; font-weight:400; line-height:1; margin-top:-1px; }
.cal-chip-add:hover{
  background:#eef4ff; color:#2f7bf0;
  border-style:solid; border-color:#2f7bf0;
}

/* the grid itself */
.usage-cal{ margin:2px 0 2px; }
/* overflow:visible so a hovered cell's 1.32× scale can pop into the card's padding
   instead of the old overflow-x:auto spawning a phantom scrollbar at the edges. The
   grid uses fluid 1fr columns, so it always fits the width — it never needs to scroll. */
.cal-scroll{ overflow:visible; padding:2px 1px 4px; --cell-gap:4px; }
.cal-grid-area{
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  gap:5px 7px; width:100%;
}
.cal-months{ grid-column:2; grid-row:1; display:grid; grid-template-columns:repeat(var(--cols,30),minmax(0,1fr)); gap:var(--cell-gap); }
.cal-months span{ font-size:.7rem; color:#9aa2b1; white-space:nowrap; line-height:1; }
.cal-dow{ grid-column:1; grid-row:2; display:grid; grid-template-rows:repeat(7,1fr); gap:var(--cell-gap); }
.cal-dow span{ display:flex; align-items:center; font-size:.64rem; color:#9aa2b1; line-height:1; padding-right:3px; }
.cal-grid{ grid-column:2; grid-row:2; display:grid; grid-template-columns:repeat(var(--cols,30),minmax(0,1fr)); grid-template-rows:repeat(7,auto); grid-auto-flow:column; gap:var(--cell-gap); }
.cal-cell{
  width:auto; height:auto; aspect-ratio:1; border-radius:4px; background:var(--l0);
  outline:1px solid rgba(20,30,55,.05); outline-offset:-1px;
  transition:transform .12s var(--ease), background .3s var(--ease);
}
.cal-cell[data-level="1"]{ background:var(--l1); }
.cal-cell[data-level="2"]{ background:var(--l2); }
.cal-cell[data-level="3"]{ background:var(--l3); }
.cal-cell[data-level="4"]{ background:var(--l4); }
.cal-cell:hover{ transform:scale(1.32); outline-color:var(--cal-c,#2f7bf0); position:relative; z-index:1; }

/* footer: hint + Less→More legend */
.cal-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:14px; }
.cal-hint{ font-size:.76rem; color:#9aa2b1; }
.cal-hint b{ color:#5d6675; font-weight:700; }
.cal-hint-reset{ appearance:none; border:0; background:none; padding:0; font:inherit; font-size:.76rem; color:#1f6fe0; font-weight:700; cursor:pointer; text-decoration:underline; }
.cal-legend{ display:inline-flex; align-items:center; gap:7px; font-size:.72rem; color:#9aa2b1; }
.cal-legend-cells{ display:inline-flex; gap:3px; }
.cal-legend-cells i{ width:12px; height:12px; border-radius:3px; display:block; background:var(--l0); }
.cal-legend-cells i[data-level="1"]{ background:var(--l1); }
.cal-legend-cells i[data-level="2"]{ background:var(--l2); }
.cal-legend-cells i[data-level="3"]{ background:var(--l3); }
.cal-legend-cells i[data-level="4"]{ background:var(--l4); }

/* mini sparkline inside each connected service card — same daily data */

@media (prefers-reduced-motion:reduce){
  .cal-cell{ transition:background .3s var(--ease); }
  .cal-cell:hover{ transform:none; }
}
@media (max-width:520px){
  .cal-scroll{ --cell:13px; --cell-gap:3px; }
}

.meters{ display:flex; flex-direction:column; gap:16px; margin-top:14px; }
.meter-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:7px; }
.meter-top b{ font-family:var(--disp); font-weight:700; font-size:.85rem; color:#1c2430; }
.meter-top span{ font-size:.8rem; color:#8a93a3; }
.meter-top span em{ font-style:normal; font-weight:700; color:#5d6675; }
.meter-track{ height:8px; border-radius:999px; background:#eef0f4; overflow:hidden; }
.meter-fill{ height:100%; border-radius:999px; background:linear-gradient(90deg,#4b9bff,#2f7bf0); width:0; transition:width .6s var(--ease); }
.meter-fill.is-warn{ background:linear-gradient(90deg,#ffbe57,#f59f00); }
.meter-fill.is-full{ background:linear-gradient(90deg,#ff8080,#e74c4c); }
/* Unlimited: a calm full-width brand wash — there's no ceiling to fill toward. */
.meter-fill.is-unlimited{ background:linear-gradient(90deg,rgba(75,155,255,.28),rgba(47,123,240,.42)); }
.meter.is-unlimited .meter-top span em{ color:#2f7bf0; }

.usage-table .u-svc{ display:flex; align-items:center; gap:9px; }
.usage-table .u-svc img{ width:18px; height:18px; flex:none; -webkit-user-drag:none; }
.usage-table .u-svc b{ font-weight:600; font-size:.85rem; color:#1c2430; }
.usage-table tbody tr.u-row{ cursor:pointer; transition:background .15s var(--ease); }
.usage-table tbody tr.u-row:hover{ background:#f6f8fb; }
.usage-table tbody tr.u-row:hover .u-svc b{ color:#1f6fe0; }

@media (max-width:860px){
  .conn-grid{ grid-template-columns:1fr; }
}

@media (max-width:1100px){
  .provider-grid{ grid-template-columns:1fr; }
}

@media (max-width:620px){
  .provider-section-head-engine{ align-items:stretch; flex-direction:column; gap:10px; }
  #apImgEngineRow{ justify-content:space-between; }
  .provider-engine-combo{ flex:1; width:auto; }
  .provider-api-foot{ align-items:stretch; flex-direction:column; }
  .provider-api-foot .ap-model{ width:100%; }
  .provider-api-foot .ap-combo{ flex:1; width:auto; }
  .provider-actions-foot .conn-actions{ width:100%; }
}

/* ── Command palette (Stripe-style global search) ───────────────── */
.top-search{ padding:8px 12px; border:1px solid transparent; border-radius:10px; background:#f6f7f9;
  width:100%; max-width:560px; margin-inline:auto;
  transition:background .15s, border-color .15s, box-shadow .15s; }
.top-search:focus-within{ background:#fff; border-color:#cfe0fb; box-shadow:0 0 0 3px rgba(59,143,255,.14); color:#6d7686; }
.side-search{ transition:border-color .15s, box-shadow .15s; }
.side-search:focus-within{ border-color:#cfe0fb; box-shadow:0 0 0 3px rgba(59,143,255,.14); }

.cmd-panel{
  position:fixed; z-index:1200; box-sizing:border-box;
  background:#fff; border:1px solid #e6eaf0; border-radius:14px;
  padding:6px; overflow-y:auto; overscroll-behavior:contain;
  box-shadow:0 1px 2px rgba(28,36,48,.06), 0 14px 28px rgba(28,36,48,.12), 0 32px 64px rgba(28,36,48,.12);
  animation:cmdIn .14s cubic-bezier(.22,1,.36,1);
  scrollbar-width:thin; scrollbar-color:#d7dce4 transparent;
}
@keyframes cmdIn{ from{ opacity:0; transform:translateY(-6px) scale(.99); } to{ opacity:1; transform:none; } }
.cmd-panel::-webkit-scrollbar{ width:10px; }
.cmd-panel::-webkit-scrollbar-thumb{ background:#d7dce4; border-radius:8px; border:3px solid #fff; }

.cmd-head, .cmd-group{ font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#b3bac6; padding:9px 11px 4px; }
.cmd-group{ margin-top:2px; }

.cmd-item{ display:flex; align-items:center; gap:12px; padding:9px 11px; border-radius:10px; cursor:pointer;
  -webkit-user-select:none; user-select:none; }
.cmd-item.is-cursor{ background:#f1f5fd; }
.cmd-ic{ flex:none; width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:#f1f4f9; color:#5d6675; border:1px solid #eaedf3; transition:background .12s, color .12s, border-color .12s; }
.cmd-item.is-cursor .cmd-ic{ background:#e5eefb; color:#2f7bf0; border-color:#d3e3fb; }
.cmd-ic svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.cmd-txt{ min-width:0; flex:1; display:flex; flex-direction:column; gap:1px; }
.cmd-txt b{ font-family:var(--disp); font-weight:600; font-size:.86rem; color:#1c2430; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmd-txt b mark{ background:transparent; color:#1f6fe0; font-weight:800; }
.cmd-txt span{ font-size:.76rem; color:#8a93a3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmd-sect{ flex:none; font-size:.68rem; font-weight:700; color:#7d8698; background:#f1f4f9; border:1px solid #eaedf3;
  padding:.28em .6em; border-radius:7px; transition:background .12s, color .12s, border-color .12s; }
.cmd-item.is-cursor .cmd-sect{ color:#2f7bf0; background:#e9f1fe; border-color:#d3e3fb; }

.cmd-empty{ padding:22px 16px; text-align:center; }
.cmd-empty b{ display:block; font-family:var(--disp); font-weight:700; font-size:.86rem; color:#1c2430; margin-bottom:3px; }
.cmd-empty span{ font-size:.78rem; color:#8a93a3; }

.cmd-foot{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; padding:9px 12px 5px; margin-top:2px; border-top:1px solid #f0f2f6; }
.cmd-foot span{ display:inline-flex; align-items:center; gap:5px; font-size:.7rem; color:#9aa2b1; }
.cmd-foot kbd{ font-family:var(--disp); font-size:.66rem; color:#6d7686; background:#f4f6f9; border:1px solid #e4e8ee; border-bottom-width:2px;
  border-radius:5px; padding:1px 5px; min-width:13px; text-align:center; line-height:1.4; }

/* pulse-highlight the control a chosen result points at */
.cmd-flash{ animation:cmdFlash 1.6s var(--ease); }
@keyframes cmdFlash{
  0%{ box-shadow:0 0 0 0 rgba(59,143,255,.5); }
  14%{ box-shadow:0 0 0 4px rgba(59,143,255,.34); }
  100%{ box-shadow:0 0 0 8px rgba(59,143,255,0); }
}
@media (prefers-reduced-motion:reduce){
  .cmd-panel{ animation:none; }
  .cmd-flash{ animation:none; outline:2px solid rgba(59,143,255,.6); outline-offset:2px; }
}
@media (max-width:860px){
  .cmd-panel{ z-index:1200; }   /* sits above the sticky top row on mobile */
}

/* ── Profile photo editor (crop / zoom / pan, transparency-safe) ── */
.photo-editor{ text-align:left; }
.pe-stage{
  position:relative; width:260px; height:260px; margin:16px auto 6px;
  border-radius:20px; overflow:hidden; cursor:grab; touch-action:none;
  -webkit-user-select:none; user-select:none;
  background-color:#fff;
  background-image:
    linear-gradient(45deg,#e6e9ef 25%,transparent 25%),
    linear-gradient(-45deg,#e6e9ef 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#e6e9ef 75%),
    linear-gradient(-45deg,transparent 75%,#e6e9ef 75%);
  background-size:18px 18px;
  background-position:0 0,0 9px,9px -9px,-9px 0;
}
.pe-stage:active{ cursor:grabbing; }
.pe-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.pe-ring{
  position:absolute; inset:0; pointer-events:none; border-radius:20px;
  box-shadow:inset 0 0 0 1px rgba(24,34,66,.12);
  /* closest-side makes the aperture exactly the stage diameter, matching the saved circular avatar. */
  background:radial-gradient(circle closest-side at 50% 50%, transparent 0 99.4%, rgba(0,0,0,.7) 100%);
}
.pe-zoom{ display:flex; align-items:center; gap:11px; width:260px; margin:2px auto 6px; }
.pe-zbtn{
  flex:none; width:30px; height:30px; border-radius:9px; cursor:pointer;
  border:1px solid #e4e8ee; background:#fff; color:#5d6675;
  font-size:1.15rem; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:background .14s, border-color .14s;
}
.pe-zbtn:hover{ background:#f3f5f9; border-color:#d3d9e2; color:#1c2430; }
.pe-zoom input[type=range]{ flex:1; min-width:0; accent-color:#3b8fff; cursor:pointer; }

}

/* modal-context sizing (higher specificity than the scoped .dash-frame) */
#setPage .dash-frame{width:min(1120px,calc(100vw - 56px));height:min(660px,calc(100vh-110px));max-width:none;margin:0;}
#setPage .acct-bg,#setPage .acct-scene,#setPage .acct-grid{display:none!important;}

/* app-settings additions (scoped) */
@scope (#setPage) {
  .side-user-av{ background:radial-gradient(circle at 35% 30%,#8fb3ff,#3d95ff 72%); background-size:cover; background-position:center; }
  .dash-sidever{ padding:10px 8px 2px; font-size:10px; color:#b3bac6; }
  .dash-topbar{ justify-content:space-between; }
  .dash-topbar-title{ font-family:var(--disp); font-weight:700; font-size:1.05rem; color:#1c2430; }
  .sp-close{ flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:#8a93a3; background:#fff; border:1px solid #e4e8ee; cursor:pointer; transition:color .14s, background .14s; }
  .sp-close:hover{ color:#1c2430; background:#f1f3f7; }
  #mcpList{ display:flex; flex-direction:column; gap:12px; }
  .mcp-path{ font-family:ui-monospace,SFMono-Regular,monospace; font-size:.82em; color:#5d6675; background:#f1f3f7; border:1px solid #e6e9ef; border-radius:5px; padding:.08em .4em; }
  /* add-server form card */
  .mcp-add-card{ display:flex; flex-direction:column; gap:15px; }
  .mcp-add-card .acc-input{ max-width:none; }
  .mcp-add-card .acc-field:first-of-type{ margin-top:6px; }
  .mcp-add-foot{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .mcp-add-foot .btn{ flex:none; padding:.62em 1.3em; }
  .mcp-err{ font-size:.82rem; font-weight:600; color:#e5484d; }
  .exp-grid{ display:flex; flex-direction:column; gap:14px; }
  .exp-card{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; background:#fff; border:1px solid #eef0f4; border-radius:14px; padding:17px 18px; transition:border-color .15s; }
  /* brief ring when arrived-at from an Overview feature card */
  .exp-card.exp-flash{ animation:expFlash 1.6s var(--ease); }
  @keyframes expFlash{ 0%,100%{ box-shadow:0 0 0 0 rgba(47,123,240,0); } 15%,45%{ box-shadow:0 0 0 3px rgba(47,123,240,.35); border-color:rgba(47,123,240,.6); } }
  .exp-body{ min-width:0; }
  .exp-body b{ display:block; font-family:var(--disp); font-weight:700; font-size:.9rem; color:#1c2430; }
  .exp-body p{ margin:4px 0 0; font-size:.8rem; line-height:1.5; color:#8a93a3; max-width:58ch; }
  .exp-switch{ flex:none; width:42px; height:24px; border-radius:999px; border:1px solid #d3d9e2; background:#e9edf3; position:relative; cursor:pointer; padding:0; transition:background .16s, border-color .16s; }
  .exp-switch .ss-knob{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(20,30,55,.3); transition:transform .18s var(--ease); }
  .exp-switch[aria-checked="true"]{ background:linear-gradient(180deg,#4b9bff,#2f7bf0); border-color:#2f7bf0; }
  .exp-switch[aria-checked="true"] .ss-knob{ transform:translateX(18px); }
  .conn-btn.install{ color:#5d6675; background:#fff; border:1px solid #e4e8ee; }
  .conn-btn.install:hover{ background:#f1f3f7; }
  .conn-btn.cancelable{ color:#5d6675; background:#fff; border:1px solid #e4e8ee; }
  .conn-confirm{ display:inline-flex; align-items:center; gap:6px; font:600 .78rem var(--disp); color:#5d6675; }
  .conn-mini{ font:600 .74rem var(--disp); padding:.32em .6em; border-radius:7px; border:1px solid #e4e8ee; background:#fff; cursor:pointer; }
  .conn-mini.yes{ color:#c23c3c; border-color:#f0d9d9; }
  .conn-spin{ display:inline-block; width:11px; height:11px; border:2px solid rgba(0,0,0,.2); border-top-color:#5d6675; border-radius:50%; animation:mcpspin .7s linear infinite; margin-right:5px; vertical-align:-1px; }
}
@keyframes mcpspin{ to{ transform:rotate(360deg); } }

@scope (#setPage) {
  .conn-logo svg, .conn-logo .prov-mark-svg{ width:22px; height:22px; }
  /* server list — clean full-width cards, uniform with .conn-card */
  .mcp-item{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid #eef0f4; border-radius:14px; padding:15px 16px; transition:border-color .15s; }
  .mcp-item-mark{ flex:none; width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:#f6f7f9; border:1px solid #eef0f4; font:800 1rem var(--disp); color:#6d7686; }
  .mcp-item-body{ flex:1; min-width:0; }
  .mcp-item-head{ display:flex; align-items:center; gap:9px; }
  .mcp-item-head b{ font:700 .92rem var(--disp); color:#1c2430; }
  .mcp-badge{ flex:none; font:700 .6rem var(--disp); letter-spacing:.05em; text-transform:uppercase; color:#6d7686; background:#f1f3f7; border:1px solid #e6e9ef; padding:.3em .55em; border-radius:6px; }
  .mcp-item-spec{ display:block; margin-top:4px; font:400 .75rem ui-monospace,SFMono-Regular,monospace; color:#8a93a3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mcp-remove{ flex:none; appearance:none; cursor:pointer; font:600 .78rem var(--disp); color:#5d6675; background:#fff; border:1px solid #e4e8ee; padding:.5em .95em; border-radius:9px; transition:background .15s, color .15s, border-color .15s; }
  .mcp-remove:hover{ background:#fbf0f0; color:#c23c3c; border-color:#f0d9d9; }
  .mcp-remove:disabled{ opacity:.6; cursor:default; }
  /* empty state */
  .mcp-none{ display:flex; flex-direction:column; gap:3px; padding:22px; border:1px dashed #dfe4ec; border-radius:14px; text-align:center; }
  .mcp-none b{ font:700 .9rem var(--disp); color:#1c2430; }
  .mcp-none span{ font-size:.8rem; color:#8a93a3; }
  .conn-empty{ padding:2px; }
  .svc-entry{ display:flex; gap:8px; margin-top:12px; }
  .svc-input{ flex:1; min-width:0; box-sizing:border-box; height:38px; padding:0 12px; border-radius:10px; border:1px solid #e4e8ee; background:#fff; font:500 .85rem var(--sans); color:#1c2430; }
  .svc-input:focus{ outline:0; border-color:#3b8fff; box-shadow:0 0 0 3px rgba(59,143,255,.16); }
  .svc-cancel{ flex:none; cursor:pointer; font:600 .82rem var(--disp); color:#5d6675; background:#fff; border:1px solid #e4e8ee; padding:.5em 1em; border-radius:9px; }
  .svc-meta{ display:flex; align-items:center; gap:12px; margin-top:9px; flex-wrap:wrap; }
  /* image-gen provider cards: per-provider MODEL dropdown in the card foot */
  .ap-model{ display:inline-flex; align-items:center; gap:8px; }
  .ap-model-lab{ flex:none; color:inherit; }
  /* the model picker is the SAME custom listbox as the Language dropdown (.acc-combo), just compact +
     inline for the card foot — enhanceSelect() hides the native <select> and paints the styled button */
  .ap-combo{ position:relative; width:236px; max-width:none; border-radius:9px; }
  .ap-combo .acc-combo-btn{ height:34px; padding:0 11px; gap:8px; border-radius:9px; font:600 .8rem var(--disp); }
  .ap-combo .acc-combo-opt{ padding:8px 10px; font-size:.82rem; }
  /* pre-enhance fallback: if JS hasn't run yet, keep the native select tidy (no chrome chevron) */
  .ap-combo .acc-select{ width:100%; height:34px; font:600 .8rem var(--disp); border-radius:9px; }
  .svc-help{ font:600 .78rem var(--disp); color:#1f6fe0; cursor:pointer; text-decoration:none; }
  .svc-err{ font:600 .78rem var(--disp); color:#e5484d; }
  .svc-alt{ color:#1f6fe0; cursor:pointer; text-decoration:none; font-weight:600; }
  .svc-code{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:12px; padding:11px 13px; border-radius:10px; background:#eaf1ff; border:1px solid #d7e5fd; }
  .svc-code-txt{ font:500 .8rem var(--sans); color:#3a4250; }
  .svc-code-val{ font:800 1rem ui-monospace,SFMono-Regular,monospace; letter-spacing:2px; color:#1c2430; background:#fff; padding:.2em .5em; border-radius:6px; border:1px solid #d7e5fd; }
  .svc-code-copy{ cursor:pointer; font:600 .76rem var(--disp); color:#1f6fe0; background:#fff; border:1px solid #d7e5fd; padding:.35em .7em; border-radius:7px; }
}

/* The token-paste panel is rendered fresh when "or paste a token" is clicked, so it
   used to pop in instantly. Ease it open with a soft fade + slide (no overflow clip,
   so the input's focus ring stays intact). The meta row trails a hair for polish. */
@keyframes svcReveal{ from{ opacity:0; transform:translateY(-5px); } to{ opacity:1; transform:translateY(0); } }
.svc-entry, .svc-code{ animation:svcReveal .26s cubic-bezier(.22,1,.36,1) both; }
.svc-meta{ animation:svcReveal .26s cubic-bezier(.22,1,.36,1) both; animation-delay:.05s; }
@media (prefers-reduced-motion: reduce){ .svc-entry, .svc-meta, .svc-code{ animation:none; } }

@scope (#setPage) {
  /* brand-colour the connection/provider logos (marks use fill:currentColor) */
  .conn-card[data-conn="claude"] .conn-logo{ color:#d97757; }
  .conn-card[data-conn="codex"] .conn-logo{ color:#111; }
  /* API-provider cards carry the same real brand marks as the sign-in cards — colour them the same
     (Gemini's mark bakes its own brand gradient into the SVG, so it needs no colour rule here) */
  .conn-card[data-conn="anthropic_api"] .conn-logo{ color:#d97757; }
  .conn-card[data-conn="openai_api"] .conn-logo{ color:#111; }
  .conn-card[data-conn="github"] .conn-logo{ color:#181717; }
  .conn-card[data-conn="cloudflare"] .conn-logo{ color:#f38020; }
  .conn-card[data-conn="cloudflare_api"] .conn-logo{ color:#f38020; }
  .conn-card[data-conn="stripe"] .conn-logo{ color:#635bff; }
  .conn-card[data-conn="resend"] .conn-logo{ color:#111; }

  /* topbar search fills the width; overview connection chips carry brand-tinted SVG marks */
  .dash-topbar{ gap:12px; }
  .top-search{ flex:1 1 auto; }
  .ov-conn-chip svg{ width:24px; height:24px; }
  .ov-conn-chip[data-conn="github"]{ color:#181717; }
  .ov-conn-chip[data-conn="cloudflare"]{ color:#f38020; }
  .ov-conn-chip[data-conn="stripe"]{ color:#635bff; }
  .ov-conn-chip[data-conn="resend"]{ color:#111; }
  .ov-conn-chip[data-conn="claude"]{ color:#d97757; }
  .ov-conn-chip[data-conn="codex"]{ color:#111; }

  /* primary blue button used on Billing / Account panes (site markup: .btn.btn-blue) */
  .btn{ appearance:none; cursor:pointer; font-family:var(--disp); font-weight:600; font-size:.84rem; line-height:1; padding:.62em 1.1em; border-radius:9px; border:1px solid transparent; }
  .btn-blue{ color:#fff; background-image:linear-gradient(180deg,#4b9bff,#2f7bf0); box-shadow:0 1px 0 rgba(255,255,255,.4) inset; }
  .btn-blue:hover{ filter:brightness(1.05); }
  .btn-blue:active{ box-shadow:none; }

  /* Account-pane avatar: centre the fallback initial when there's no photo */
  .acc-photo{ display:flex; align-items:center; justify-content:center; font-family:var(--disp); font-weight:700; font-size:1.7rem; color:#8a93a3; }
  .inv-table td:last-child{ text-align:right; }

  /* usage table / calendar-chip logos (SVG marks in the service's own hue) */
  .u-logo{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; flex:none; }
  .u-logo svg{ width:17px; height:17px; }
  .u-logo-letter{ border-radius:5px; color:#fff; font:700 .66rem/1 var(--disp); }
  .cal-chip .u-logo{ width:16px; height:16px; margin-right:1px; }
  .cal-chip .u-logo svg{ width:14px; height:14px; }
}
@scope (#setPage) {
  /* lightweight toast for profile / billing actions */
  #setToastHost{ position:absolute; left:0; right:0; bottom:18px; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; z-index:40; }
  .set-toast{ pointer-events:auto; font-family:var(--disp); font-weight:600; font-size:.83rem; color:#fff; background:#1c2430; padding:.62em 1.05em; border-radius:10px; box-shadow:0 8px 24px rgba(16,24,40,.28); opacity:0; transform:translateY(8px); transition:opacity .22s, transform .22s; max-width:80%; }
  .set-toast.is-in{ opacity:1; transform:none; }
  .set-toast.is-err{ background:#b3261e; }
}

/* ══════════════════════════════════════════════════════════════════════
   IDE DARK-MODE THEME — recolours the whole settings dashboard to the
   IDE's warm dark-gray chassis. Surfaces/text/borders only; the blue plan
   hero and accent buttons keep their on-brand look. Appended last so it wins.
   Palette:  bg #1b1b1d · card #242427 · raised #2d2d31 · well #161618
             border #34343b · soft #2a2a2f · ink #e2e3df · dim #9d9e9a
   ══════════════════════════════════════════════════════════════════════ */
@scope (#setPage) {
  /* frame + regions */
  .dash-frame{ background:#1b1b1d; border:1px solid #000; box-shadow:0 26px 80px rgba(0,0,0,.62); }
  .dash-side{ background:#202022; border-right:1px solid #2a2a2f; }
  .dash-main{ background:#1b1b1d; }
  .dash-topbar{ background:#1b1b1d; border-bottom:1px solid #2a2a2f; }
  /* match the in-app / chat scrollbar (subtle gray) — the light #f6f7f9 border from
     the light-mode rule was showing as a near-white bar in dark mode */
  .dash-content::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.09); border:3px solid transparent; background-clip:padding-box; }
  .dash-content::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.16); background-clip:padding-box; }
  .dash-content{ scrollbar-color:rgba(255,255,255,.14) transparent; }
  .dash-card-h .head-badge{ color:#9aa0ab; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.1); }
  .dash-card-h .head-badge b{ color:#e2e3df; }
  .dash-nav-label, .dash-sidever{ color:#6d6e6b; }
  .dash-nav-label{ border-top-color:rgba(238,240,244,.07); }

  /* nav items */
  .dash-nav-item{ color:#9d9e9a; }
  .dash-nav-item:hover{ background:#2a2a2e; color:#e2e3df; }
  .dash-nav-item.is-active{ background:#2d2d31; color:#e2e3df; }

  /* primary text */
  .dash-card-h, .ov-plan-name, .dash-price b, .tile b, .side-user b, .conn-name b, .mcp-row-txt b,
  .usage-total b, .meter-top b, .inv-table td, .dash-renew b, .acc-input, .acc-label, .svc-code-val,
  .cmd-item b, .conn-confirm{ color:#e2e3df; }
  /* secondary / muted text */
  .dash-muted, .acc-hint, .dash-renew, .conn-desc, .conn-name span, .side-user span, .cal-hint,
  .cal-legend, .meter-top span, .tile span, .usage-total span, .inv-num, .conn-meta, .secured,
  .cmd-item span, .conn-status.is-off{ color:#9d9e9a; }
  .secured b, .dash-renew b{ color:#c2c4c0; }

  /* cards / panels / tiles / modals */
  .dash-card, .ov-hero-fact, .conn-card, .tile, .usage-activity, .dash-plan, .card-logo,
  .cmd-panel, .acc-combo-list, .modal, .ni-card{ background:#242427; border-color:#34343b; }
  .conn-card{ box-shadow:none; }
  .conn-card.is-on{ background:#242427; }
  .provider-section + .provider-section{ border-top-color:#2f2f36; }
  .provider-engine-label{ color:#9d9e9a; }
  .provider-plan{ color:#9d9e9a; }
  .provider-detail{ color:#9d9e9a; }
  .provider-card .conn-version{ color:#aeb3bc; }
  .dash-plan.is-current{ border-color:var(--blue); }

  /* topbar search */
  .top-search{ background:#161618; border:1px solid #2a2a2f; color:#8a8b88; }
  .top-search:focus-within{ background:#161618; border-color:rgba(61,149,255,.5); box-shadow:0 0 0 3px rgba(61,149,255,.16); color:#9d9e9a; }
  .top-search input{ color:#e2e3df; }
  .top-search input::placeholder{ color:#6d6e6b; }

  /* inputs / selects / combos */
  .acc-input, .acc-select, .svc-input{ background:#161618; border-color:#34343b; color:#e2e3df; }
  .acc-input::placeholder, .svc-input::placeholder{ color:#6d6e6b; }
  .acc-input:disabled{ color:#8a8b88; background:#1e1e20; }
  .acc-input:focus, .acc-select:focus, .svc-input:focus{ border-color:rgba(61,149,255,.55); box-shadow:0 0 0 3px rgba(61,149,255,.16); }
  .acc-combo{ background:#161618; border-color:#34343b; }
  .acc-combo-btn{ background:#161618; border-color:#34343b; color:#e2e3df; }
  .acc-combo-btn:hover{ border-color:#45454d; }
  .acc-combo-chev{ color:#9d9e9a; }
  .acc-combo-opt{ color:#c2c4c0; }
  .acc-combo-opt.is-active{ background:#2d2d31; color:#e2e3df; }
  .acc-combo-opt.is-selected{ color:#4698e6; }
  .acc-combo-list::-webkit-scrollbar-thumb{ background:#3a3a41; border-color:#242427; }

  /* quiet / secondary buttons */
  .btn-quiet{ background:#242427; border-color:#34343b; color:#c2c4c0; }
  .btn-quiet:hover{ background:#2d2d31; color:#e2e3df; }
  .btn-danger{ color:#e08b90; border-color:#4a2a2c; }
  .btn-danger:hover{ background:#2c2022; color:#f0a2a6; }
  /* Cancel-plan button — neutral treatment (scoped so other danger buttons keep the red) */
  #btnCancel{ color:#fff; background:#161619; border-color:rgba(255,255,255,.12); }
  #btnCancel:hover{ background:#1f1f22; color:#fff; }
  .acc-upload{ background:#242427; border-color:#34343b; color:#c2c4c0; }
  .acc-upload:hover{ background:#2d2d31; }
  .acc-divider{ background:#2f2f36; }
  .modal{ background:#1c1c1f; box-shadow:0 30px 80px -20px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.06); }
  .modal h2{ color:#e7e8e3; }
  .modal p{ color:#9d9e9a; }
  .pe-zbtn{ background:#242427; border-color:#34343b; color:#9d9e9a; }
  .pe-zbtn:hover{ background:#2d2d31; border-color:#3f3f47; color:#e2e3df; }
  .pe-ring{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); background:radial-gradient(circle closest-side at 50% 50%, transparent 0 99.4%, rgba(0,0,0,.7) 100%); }

  /* meters / spark / avatar well */
  .meter-track{ background:#161618; }
  .ov-bar.is-empty{ background:#34343b; }
  .acc-photo{ background-color:#2d2d31; color:#9d9e9a; }

  /* logo chips */
  .conn-logo, .ov-conn-chip{ background:#2d2d31; border-color:#34343b; }
  .card-logo{ background:#fff; border-color:#e4e8ee; }   /* brand plate stays white — Visa's navy wordmark is unreadable on a dark chip */
  .mcp-item-mark{ background:#2d2d31; border-color:#34343b; color:#c2c4c0; }

  /* calendar */
  .cal-cell[data-level="0"]{ background:#26262a; }
  .cal-legend-cells i[data-level="0"]{ background:#26262a; }
  .cal-chip{ background:#242427; border-color:#34343b; color:#c2c4c0; }
  .cal-chip:hover{ background:#2d2d31; }
  .cal-chip.is-active{ background:#2d2d31; color:#e2e3df; }
  .cal-chip-add{ color:#9d9e9a; }

  /* tables */
  .inv-table th{ color:#8a8b88; border-bottom-color:#34343b; }
  .inv-table td{ border-bottom-color:#2a2a2f; }
  .usage-table tbody tr.u-row:hover{ background:#2a2a2e; }
  .usage-pill{ background:#161618; border:1px solid #34343b; color:#c2c4c0; }

  /* MCP servers */
  .mcp-item{ background:#242427; border-color:#34343b; }
  .mcp-item-head b{ color:#e2e3df; }
  .mcp-badge{ background:#2d2d31; border-color:#3a3a41; color:#9d9e9a; }
  .mcp-item-spec{ color:#8a8b88; }
  .mcp-remove{ background:#242427; border-color:#34343b; color:#c2c4c0; }
  .mcp-remove:hover{ background:#2c2022; border-color:#4a2a2c; color:#f0a2a6; }
  .mcp-none{ border-color:#34343b; }
  .mcp-none b{ color:#e2e3df; }
  .mcp-path{ background:#161618; border-color:#34343b; color:#c2c4c0; }

  /* billing plan toggle + pay row */
  .dash-billtoggle{ background:#161618; border-color:#34343b; }
  .dash-billtoggle button{ color:#9d9e9a; }
  .dash-billtoggle button.is-on{ background:#2d2d31; color:#e2e3df; }
  .dash-pay-txt span{ color:#9d9e9a; }

  /* service entry / code panels */
  .svc-entry{ background:rgba(22,22,24,0); border-color:#34343b; }
  .svc-code{ background:#161618; border-color:#34343b; }
  .svc-help, .svc-alt{ color:#7fb0f2; }
  /* .ap-combo inherits the shared dark .acc-combo/.acc-combo-btn/.acc-combo-list rules — nothing extra needed */

  /* experimental toggles */
  .exp-card{ background:#242427; border-color:#34343b; }
  .exp-switch{ background:#34343b; }
  .exp-switch[aria-checked="true"]{ background:var(--blue); }
  .exp-switch .ss-knob{ background:#e2e3df; }

  /* close button */
  .sp-close{ background:#242427; border-color:#34343b; color:#9d9e9a; }
  .sp-close:hover{ background:#2d2d31; color:#e2e3df; }
}
@scope (#setPage) {
  /* dark-mode stray fixes: overview usage/spark/connection chips */
  .ov-spark{ background:#1a1a1c; border-color:#2a2a2f; }
  .ov-usage-total b, .ov-conn-count{ color:#e2e3df; }
  .ov-usage-total span, .ov-conn-plural, .ov-conns .dash-muted{ color:#9d9e9a; }
  .ov-conn-add{ background:#22262e; border-color:#2e3540; color:#7fb0f2; }
  .ov-conn-add:hover{ background:#28303a; }
  .ov-usage, .ov-conns, .ov-activity{ background:#242427; border-color:#34343b; }
  .ov-act-cell{ background:transparent; }
  .ov-act-cell + .ov-act-cell{ border-left-color:rgba(255,255,255,.09); }
  .ov-act-cell span{ color:#9d9e9a; }
  .ov-act-cell b{ color:#e7e8e3; }
  /* Explore feature cards */
  .ov-feat{ background:#242427; border-color:#34343b; }
  .ov-feat:hover{ border-color:#41434b; box-shadow:0 8px 22px -14px rgba(0,0,0,.6); }
  .ov-feat-tx b{ color:#e7e8e3; }
  .ov-feat-tx span{ color:#9d9e9a; }
  .ov-feat-ic{ color:#9aa2b1; }
  .ov-feat:hover .ov-feat-ic{ color:#fff; }
  .ov-feat-go{ color:#5a5b60; }
  .ov-feat:hover .ov-feat-go{ color:#9d9e9a; }
  .ov-feat-tag{ color:#e0b874; background:rgba(224,168,52,.12); border-color:rgba(224,168,52,.24); }
}
@scope (#setPage) {
  .dash-pay-txt b, .u-svc b{ color:#e2e3df; }
}
@scope (#setPage) {
  /* header count + near-black brand marks need lightening on dark chips */
  .conn-count b{ color:#e2e3df; }
  .conn-card[data-conn="github"] .conn-logo, .conn-card[data-conn="resend"] .conn-logo,
  .conn-card[data-conn="codex"] .conn-logo, .conn-card[data-conn="openai_api"] .conn-logo{ color:#e6e9ef; }
  .ov-conn-chip[data-conn="github"], .ov-conn-chip[data-conn="resend"], .ov-conn-chip[data-conn="codex"]{ color:#e6e9ef; }
}
@scope (#setPage) {
  .exp-body b{ color:#e2e3df; }
  .exp-body p{ color:#9d9e9a; }
}
@scope (#setPage) {
  /* active nav item → blue icon accent */
  .dash-nav-item.is-active svg{ color:#3d95ff; stroke:#3d95ff; }
}
@scope (#setPage) {
  /* meters — flat (non-skeuomorphic): plain groove, flat fill, no sheen or shadow */
  .meter-track{ height:8px; background:#161618; border:0; box-shadow:none; }
  .meter-fill{ background-image:none; background:#2f7bf0; box-shadow:none; }
  .meter-fill.is-warn{ background:#f59f00; }
  .meter-fill.is-full{ background:#e74c4c; }
  .meter-fill.is-unlimited{ background:rgba(47,123,240,.6); }
}
@scope (#setPage) {
  /* overview connection chips → white, semi-neumorphic (raised pill on the dark card) */
  .ov-conn-chip{
    background:#f1f1f1; border:1px solid rgba(0,0,0,.06);
    box-shadow:0 2px 6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 3px rgba(198,205,214,.45);
  }
  /* logos now sit on white, so the near-black brand marks go dark again */
  .ov-conn-chip[data-conn="github"]{ color:#121212; }
  .ov-conn-chip[data-conn="resend"], .ov-conn-chip[data-conn="codex"]{ color:#111; }
  /* "+ Connect a service" → solid blue button */
  .ov-conn-add{ background:#2175c5; border:1px solid transparent; color:#f7f7f7; }
  .ov-conn-add:hover{ background:#2a83db; }
  /* overview links → lighter blue */
  .ov-link{ color:#4698e6; }
}
@scope (#setPage) {
  /* command palette — IDE dark theme */
  .cmd-panel{ background:#242427; border-color:#34343b; box-shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 44px rgba(0,0,0,.55); scrollbar-color:#3a3b40 transparent; }
  .cmd-panel::-webkit-scrollbar-thumb{ background:#3a3b40; border:3px solid #242427; }
  .cmd-head, .cmd-group{ color:#6d6e6b; }
  .cmd-item.is-cursor{ background:#2d2d31; }
  .cmd-ic{ background:#161618; color:#9d9e9a; border-color:#34343b; }
  .cmd-item.is-cursor .cmd-ic{ background:rgba(61,149,255,.16); color:#5fa8ff; border-color:rgba(61,149,255,.35); }
  .cmd-txt b{ color:#e2e3df; }
  .cmd-txt b mark{ color:#6fb4ff; }
  .cmd-txt span{ color:#9d9e9a; }
  .cmd-sect{ color:#9d9e9a; background:#161618; border-color:#34343b; }
  .cmd-item.is-cursor .cmd-sect{ color:#5fa8ff; background:rgba(61,149,255,.14); border-color:rgba(61,149,255,.3); }
  .cmd-empty b{ color:#e2e3df; }
  .cmd-empty span{ color:#9d9e9a; }
  .cmd-foot{ border-top-color:#2a2a2f; }
  .cmd-foot span{ color:#8a8b88; }
  .cmd-foot kbd{ color:#c2c4c0; background:#161618; border-color:#34343b; }
}
@scope (#setPage) {
  /* connection-service logo boxes → white, semi-neumorphic (match the overview chips) */
  .conn-card[data-conn="github"] .conn-logo,
  .conn-card[data-conn="cloudflare"] .conn-logo,
  .conn-card[data-conn="cloudflare_api"] .conn-logo,
  .conn-card[data-conn="stripe"] .conn-logo,
  .conn-card[data-conn="resend"] .conn-logo{
    background:#f1f1f1; border:1px solid rgba(0,0,0,.06);
    box-shadow:0 2px 6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 3px rgba(198,205,214,.45);
  }
  /* dark brand marks read on the white boxes */
  .conn-card[data-conn="github"] .conn-logo{ color:#181717; }
  .conn-card[data-conn="resend"] .conn-logo{ color:#0a0a0a; }
}
@scope (#setPage) {
  /* Equal-height columns so neither side leaves dead space (the Usage spark grows to fill
     the left). Headers still line up — they sit at the top of each card regardless of height. */
  .ov-cols{ align-items:stretch; }
  .ov-conns{ justify-content:flex-start; }
  .ov-conns .ov-conn-list{ margin:2px 0; }
}
@scope (#setPage) {
  /* less padding from the top on the overview usage/connections cards */
  .ov-cols .dash-card{ padding-top:13px; }
  .ov-card-head{ margin-bottom:10px; }
}
@scope (#setPage) {
  /* The Connections card is a .dash-card right after the Usage .dash-card, so the
     stacked-card rule `.dash-card + .dash-card{ margin-top:14px }` was pushing it
     14px down inside its grid cell — the phantom gap above the CONNECTIONS header.
     They're side-by-side grid columns, not stacked, so kill that margin here. */
  .ov-cols .dash-card + .dash-card{ margin-top:0; }
}

/* ── App-update banner (Overview top): "Clodex vX is available" + Update ──
   Ghost/transparent treatment (user-tuned in the preview): no fill, hairline
   white border, white title + icon — an outline chip sitting on the panel. */
.ov-update{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px; margin-bottom:14px; border-radius:14px;
  background:transparent;
  border:1px solid rgba(255,255,255,.17);
}
.ov-up-ico{
  flex:none; width:40px; height:40px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; color:#fff; border:1px solid transparent;
}
.ov-up-ico svg{ width:19px; height:19px; }
.ov-up-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ov-up-txt b{ font-family:var(--disp); font-weight:700; font-size:.95rem; color:#fff; }
.ov-up-txt span{ font-size:.8rem; color:#8f8f8f; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ov-up-btn .ov-up-lab{ font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-weight:500; }
.ov-up-btn{
  flex:none; padding:9px 16px; border:0; border-radius:10px; cursor:pointer;
  background:#2f7bf0; color:#fff; font-weight:700; font-size:.84rem;
  transition:filter .14s, transform .12s;
}
.ov-up-btn:hover{ filter:brightness(1.06); }
.ov-up-btn:active{ transform:translateY(1px); }