/* ─────────────────────────────────────────────────────────────
   veydex Hub — design tokens + global styles
   ───────────────────────────────────────────────────────────── */

:root {
  /* Type */
  --font-ui: "Manrope", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Light tokens (warm-neutral base, deep indigo accent) */
  --bg:        oklch(0.985 0.005 80);
  --bg-2:      oklch(0.972 0.007 80);
  --bg-3:      oklch(0.955 0.009 80);
  --surface:   oklch(1 0 0);
  --line:      oklch(0.918 0.008 80);
  --line-2:    oklch(0.86 0.01 80);

  --ink:       oklch(0.18 0.012 270);
  --ink-2:     oklch(0.36 0.012 270);
  --ink-3:     oklch(0.55 0.012 270);
  --ink-4:     oklch(0.72 0.01 80);

  --accent:    oklch(0.46 0.18 268);
  --accent-2:  oklch(0.55 0.16 268);
  --accent-soft: oklch(0.94 0.04 268);
  --accent-ink: oklch(0.30 0.18 268);

  --good:      oklch(0.62 0.13 165);
  --good-soft: oklch(0.95 0.04 165);
  --warn:      oklch(0.72 0.16 70);
  --warn-soft: oklch(0.96 0.05 75);
  --bad:       oklch(0.58 0.20 25);
  --bad-soft:  oklch(0.95 0.04 25);

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  --shadow-xs: 0 0 0 .5px oklch(0.18 0.012 270 / .06), 0 1px 2px oklch(0.18 0.012 270 / .04);
  --shadow-sm: 0 0 0 .5px oklch(0.18 0.012 270 / .08), 0 2px 6px oklch(0.18 0.012 270 / .06);
  --shadow-md: 0 0 0 .5px oklch(0.18 0.012 270 / .08), 0 8px 24px oklch(0.18 0.012 270 / .08);
  --shadow-lg: 0 0 0 .5px oklch(0.18 0.012 270 / .08), 0 22px 60px oklch(0.18 0.012 270 / .14);
}

/* ── Overlays ─────────────────────────────────────────────── */
.overlay{position:fixed;inset:0;background:oklch(0.18 0.012 270 / .42);backdrop-filter:blur(6px);z-index:80;display:flex;align-items:flex-start;justify-content:center;padding-top:96px;animation:overlay-in .12s ease-out}
.overlay-right{justify-content:flex-end;padding:0;align-items:stretch}
@keyframes overlay-in{from{opacity:0}to{opacity:1}}

.search{width:min(680px,calc(100vw - 48px));background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column;max-height:70vh}
.search-header{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line);color:var(--ink-3)}
.search-input{flex:1;border:0;outline:0;background:transparent;font:inherit;font-size:15px;color:var(--ink)}
.search-esc{font-size:10px;font-weight:600;color:var(--ink-3);border:1px solid var(--line);padding:2px 6px;border-radius:5px;font-family:var(--font-mono)}
.search-results{overflow:auto;flex:1;padding:6px}
.search-group{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:10px 12px 6px}
.search-item{display:flex;align-items:center;gap:10px;padding:8px 10px;width:100%;border:0;background:transparent;border-radius:8px;cursor:default;font:inherit;color:var(--ink);text-align:left}
.search-item:hover{background:var(--bg-2)}
.search-item-icon{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;flex-shrink:0}
.search-item-label{font-size:13px;font-weight:600}
.search-item-sub{font-size:11.5px;color:var(--ink-3);margin-left:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.search-foot{display:flex;gap:14px;padding:10px 16px;border-top:1px solid var(--line);background:var(--bg-2);font-size:11px;color:var(--ink-2);align-items:center}
.search-foot kbd{font-family:var(--font-mono);font-size:10px;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:1px 5px;margin-right:4px}

.drawer{width:min(420px,100vw);height:100vh;background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;animation:drawer-in .16s ease-out}
@keyframes drawer-in{from{transform:translateX(20px);opacity:.4}to{transform:translateX(0);opacity:1}}
.drawer-header{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.drawer-tabs{display:flex;gap:4px;padding:10px 16px;border-bottom:1px solid var(--line);font-size:12px}
.drawer-tabs button{border:0;background:transparent;color:var(--ink-3);padding:6px 10px;border-radius:6px;font:inherit;font-size:12px;font-weight:600;cursor:default}
.drawer-tabs button[data-active="true"]{background:var(--bg-3);color:var(--ink)}
.drawer-list{flex:1;overflow:auto;padding:6px}
.drawer-item{display:flex;align-items:flex-start;gap:10px;padding:12px;border-radius:8px;cursor:default}
.drawer-item:hover{background:var(--bg-2)}
.drawer-item[data-unread="true"]{background:color-mix(in oklab, var(--accent-soft) 50%, transparent)}

.inbox-row{display:flex;align-items:center;gap:14px;padding:14px 18px;width:100%;background:transparent;border:0;cursor:default;font:inherit;color:var(--ink)}
.inbox-row:hover{background:var(--bg-2)}

/* ── Mobile shell ─────────────────────────────────────────── */
.m-frame{width:390px;max-width:100vw;margin:24px auto;height:840px;max-height:calc(100vh - 48px);background:var(--bg);border:1px solid var(--line);border-radius:38px;box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column;position:relative}
.m-statusbar{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;font-size:14px;font-weight:600;color:var(--ink);flex-shrink:0}
.m-topbar{padding:6px 18px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);flex-shrink:0}
.m-content{flex:1;overflow:auto;background:var(--bg)}
.m-tabbar{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);background:var(--surface);padding:6px 4px 22px;flex-shrink:0}
.m-tab{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;color:var(--ink-3);font:inherit;font-size:10px;font-weight:600;cursor:default;border-radius:8px}
.m-tab[data-active="true"]{color:var(--accent)}
.m-tile:hover{background:var(--bg-2)}

[data-theme="dark"] {
  --bg:        oklch(0.16 0.008 270);
  --bg-2:      oklch(0.19 0.009 270);
  --bg-3:      oklch(0.22 0.01 270);
  --surface:   oklch(0.21 0.01 270);
  --line:      oklch(0.27 0.012 270);
  --line-2:    oklch(0.34 0.014 270);

  --ink:       oklch(0.97 0.008 80);
  --ink-2:     oklch(0.82 0.008 80);
  --ink-3:     oklch(0.62 0.01 80);
  --ink-4:     oklch(0.42 0.01 80);

  --accent:    oklch(0.72 0.18 268);
  --accent-2:  oklch(0.65 0.16 268);
  --accent-soft: oklch(0.32 0.10 268);
  --accent-ink: oklch(0.85 0.16 268);

  --good:      oklch(0.74 0.14 165);
  --good-soft: oklch(0.28 0.06 165);
  --warn:      oklch(0.80 0.15 70);
  --warn-soft: oklch(0.30 0.07 70);
  --bad:       oklch(0.70 0.18 25);
  --bad-soft:  oklch(0.30 0.08 25);

  --shadow-xs: 0 0 0 .5px oklch(1 0 0 / .04), 0 1px 2px oklch(0 0 0 / .3);
  --shadow-sm: 0 0 0 .5px oklch(1 0 0 / .05), 0 4px 12px oklch(0 0 0 / .35);
  --shadow-md: 0 0 0 .5px oklch(1 0 0 / .06), 0 12px 36px oklch(0 0 0 / .45);
  --shadow-lg: 0 0 0 .5px oklch(1 0 0 / .08), 0 28px 80px oklch(0 0 0 / .55);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  overflow: hidden;
}

#root { height: 100%; }

button {
  font: inherit; color: inherit;
  cursor: default; user-select: none;
}

input, textarea, select {
  font: inherit; color: inherit;
}

/* ── Utility classes ─────────────────────────── */
.mono { font-family: var(--font-mono); font-feature-settings: "ss01", "ss02"; }
.tnum { font-variant-numeric: tabular-nums; }

/* Striped image placeholder */
.placeholder {
  background:
    repeating-linear-gradient(
      135deg,
      oklch(from var(--ink) l c h / .04) 0 8px,
      transparent 8px 16px),
    var(--bg-2);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .04em; text-transform: uppercase;
}

/* ── App shell layout ────────────────────────── */
.app {
  display: grid;
  grid-template-columns: 248px 1fr;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
}
.app.mobile {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

/* Sidebar */
.sb {
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  min-width: 0;
}
.sb-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 18px 16px;
}
.sb-brand-mark {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--bg);
  display: grid; place-items: center;
  font-weight: 800; font-size: 14px;
  letter-spacing: -.02em;
  position: relative;
}
.sb-brand-wm {
  font-weight: 700; font-size: 15px;
  letter-spacing: -.02em;
}
.sb-brand-wm em {
  font-style: normal; color: var(--ink-3); font-weight: 500;
  margin-left: 4px; font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase;
}
.sb-workspace {
  margin: 0 12px 12px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex; align-items: center; gap: 10px;
  cursor: default;
}
.sb-workspace:hover { border-color: var(--line-2); }
.sb-ws-avatar {
  width: 26px; height: 26px; border-radius: 6px;
  background: linear-gradient(135deg, oklch(0.68 0.13 30), oklch(0.55 0.16 350));
  color: white;
  display: grid; place-items: center;
  font-weight: 700; font-size: 11px;
  flex-shrink: 0;
}
.sb-ws-text { min-width: 0; flex: 1; }
.sb-ws-name {
  font-weight: 600; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-ws-plan {
  font-size: 11px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-ws-chevron {
  width: 14px; height: 14px; color: var(--ink-4); flex-shrink: 0;
}

.sb-section {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
  padding: 14px 22px 6px;
  display: flex; align-items: center; justify-content: space-between;
}
.sb-section button {
  background: transparent; border: 0;
  color: var(--ink-3); padding: 2px; border-radius: 4px;
}
.sb-section button:hover { background: var(--bg-3); color: var(--ink); }

.sb-nav {
  display: flex; flex-direction: column; gap: 1px;
  padding: 0 8px;
}
.sb-item {
  display: flex; align-items: center; gap: 11px;
  padding: 7px 12px;
  border-radius: 7px;
  font-size: 13.5px; font-weight: 500;
  color: var(--ink-2);
  border: 0; background: transparent;
  text-align: left; width: 100%;
  position: relative;
}
.sb-item:hover { background: var(--bg-3); color: var(--ink); }
.sb-item[data-active="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-xs);
}
.sb-item-icon {
  width: 16px; height: 16px;
  display: grid; place-items: center;
  color: var(--ink-3);
  flex-shrink: 0;
}
.sb-item[data-active="true"] .sb-item-icon { color: var(--accent); }
.sb-item-count {
  margin-left: auto;
  font-size: 11px; font-weight: 600;
  background: var(--bg-3); color: var(--ink-3);
  padding: 2px 6px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.sb-item[data-active="true"] .sb-item-count {
  background: var(--accent-soft); color: var(--accent-ink);
}
.sb-item-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); margin-left: auto;
}

.sb-spacer { flex: 1; }

.sb-foot {
  margin: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--bg-3);
  border-radius: var(--radius);
}
.sb-foot-title { font-size: 12px; font-weight: 600; }
.sb-foot-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.4; }
.sb-foot-bar { margin-top: 10px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.sb-foot-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; }
.sb-foot-cta {
  margin-top: 10px; width: 100%;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--ink);
  padding: 6px;
  border-radius: 7px;
  font-size: 12px; font-weight: 600;
}
.sb-foot-cta:hover { background: var(--surface); }

/* Main column */
.main {
  display: grid;
  grid-template-rows: 56px 1fr;
  min-width: 0; min-height: 0;
  background: var(--bg);
}

/* Topbar */
.tb {
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.tb-bcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-3);
  min-width: 0;
}
.tb-bcrumb b { color: var(--ink); font-weight: 600; }
.tb-bcrumb svg { width: 12px; height: 12px; color: var(--ink-4); flex-shrink: 0; }

.tb-search {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px 6px 10px;
  width: 320px;
  color: var(--ink-3); font-size: 13px;
  cursor: text;
}
.tb-search:hover { border-color: var(--line-2); }
.tb-search-icon { width: 14px; height: 14px; }
.tb-search-text { flex: 1; }
.tb-search-kbd {
  font-family: var(--font-mono); font-size: 10.5px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--ink-3);
}

.tb-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--ink-2);
  position: relative;
}
.tb-btn:hover { background: var(--bg-2); color: var(--ink); }
.tb-btn svg { width: 16px; height: 16px; }
.tb-btn-badge {
  position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  border: 1.5px solid var(--bg);
}

.tb-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, oklch(0.6 0.16 25), oklch(0.55 0.14 290));
  color: white; display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  cursor: default;
  margin-left: 4px;
}

/* Content area */
.content {
  overflow: auto;
  background: var(--bg);
  min-width: 0; min-height: 0;
}

/* ── Reusable atoms ───────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px; font-weight: 600;
}
.btn:hover { background: var(--bg-2); }
.btn svg { width: 14px; height: 14px; }
.btn-primary {
  background: var(--ink); color: var(--bg);
  border-color: var(--ink);
}
.btn-primary:hover { background: oklch(from var(--ink) calc(l + .08) c h); }
.btn-accent {
  background: var(--accent); color: white;
  border-color: var(--accent);
}
.btn-accent:hover { background: var(--accent-2); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--bg-2); color: var(--ink); }
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 7px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.card-pad { padding: 18px; }
.card-pad-lg { padding: 22px; }
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.card-head h3 {
  margin: 0; font-size: 13px; font-weight: 600;
  letter-spacing: -.005em;
}

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: var(--bg-3); color: var(--ink-2);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.tag-good { background: var(--good-soft); color: var(--good); border-color: oklch(from var(--good) l c h / .25); }
.tag-warn { background: var(--warn-soft); color: oklch(from var(--warn) calc(l - .15) c h); border-color: oklch(from var(--warn) l c h / .3); }
.tag-bad  { background: var(--bad-soft);  color: var(--bad);  border-color: oklch(from var(--bad) l c h / .25); }
.tag-accent { background: var(--accent-soft); color: var(--accent-ink); border-color: oklch(from var(--accent) l c h / .25); }
.tag-dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

/* Pretty type */
h1, h2, h3, h4 { margin: 0; letter-spacing: -.015em; }
.t-display { font-size: 32px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.t-h1 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.t-h2 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.t-eyebrow {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3);
}
.t-muted { color: var(--ink-3); }
.t-mute2 { color: var(--ink-4); }

/* Scrollbar */
.content::-webkit-scrollbar,
.scrollbox::-webkit-scrollbar { width: 10px; height: 10px; }
.content::-webkit-scrollbar-thumb,
.scrollbox::-webkit-scrollbar-thumb {
  background: var(--line-2); border-radius: 6px;
  border: 2px solid var(--bg);
}
.content::-webkit-scrollbar-thumb:hover,
.scrollbox::-webkit-scrollbar-thumb:hover {
  background: var(--ink-4);
}

/* Misc */
.divider { height: 1px; background: var(--line); }
.row { display: flex; align-items: center; gap: 10px; }
.col { display: flex; flex-direction: column; gap: 10px; }
.grow { flex: 1; min-width: 0; }

/* Focus */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }


/* ─────────────────────────────────────────────────────────────
   veydex Hub — Signup / Onboarding
   ───────────────────────────────────────────────────────────── */

.signup-frame{
  min-height:100vh;
  background:
    radial-gradient(1100px 600px at 88% -8%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(900px 500px at -8% 110%, color-mix(in oklab, var(--accent-2) 14%, transparent), transparent 60%),
    var(--bg);
  color:var(--ink);
  display:flex;flex-direction:column;
  font-family:var(--font-ui);
  position:relative;
  isolation:isolate;
}
.signup-frame::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(transparent 95%, color-mix(in oklab, var(--ink) 4%, transparent) 95%) 0 0 / 100% 28px,
    linear-gradient(90deg, transparent 95%, color-mix(in oklab, var(--ink) 4%, transparent) 95%) 0 0 / 28px 100%;
  opacity:.4;mask:radial-gradient(70% 60% at 50% 30%, black 0%, transparent 90%);
  z-index:-1;
}

/* Top bar */
.signup-top{
  display:flex;align-items:center;gap:24px;
  padding:18px 36px;
  border-bottom:1px solid color-mix(in oklab, var(--line) 70%, transparent);
  background:color-mix(in oklab, var(--surface) 60%, transparent);
  backdrop-filter:saturate(120%) blur(6px);
}
.signup-stepper{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:520px;margin:0 auto;
}
.signup-bar{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:100%;
}
.signup-bar-seg{
  height:4px;border-radius:2px;background:var(--line);
  transition:background .3s, transform .3s;
  position:relative;overflow:hidden;
}
.signup-bar-seg[data-state="done"]{background:var(--accent)}
.signup-bar-seg[data-state="active"]{background:var(--line)}
.signup-bar-seg[data-state="active"]::after{
  content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));
  animation:su-fill 1.4s ease-out forwards;
}
@keyframes su-fill{from{transform:translateX(-100%)}to{transform:translateX(0)}}

/* Body */
.signup-body{
  flex:1;padding:60px 36px 80px;display:flex;justify-content:center;align-items:flex-start;
}
.signup-split{
  width:100%;max-width:1160px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:64px;
  align-items:flex-start;
}
.signup-narrow{width:100%;max-width:760px;margin:0 auto}
.signup-form{padding:6px 0}

/* Headings */
.signup-eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-ink);
  background:var(--accent-soft);
  padding:5px 10px;border-radius:999px;
  margin-bottom:18px;
}
[data-theme="dark"] .signup-eyebrow{color:oklch(0.85 0.1 268);background:color-mix(in oklab, var(--accent) 20%, transparent)}

/* Aside */
.signup-aside{position:sticky;top:80px}
.signup-aside-inner{display:flex;flex-direction:column;gap:24px}

/* Stacked workspace preview card */
.signup-card-stack{position:relative;height:340px;margin-top:6px}
.signup-card-back, .signup-card-mid, .signup-card-front{
  position:absolute;border-radius:18px;border:1px solid var(--line);
  background:var(--surface);box-shadow:var(--shadow-md);
}
.signup-card-back{
  inset:0 -22px 24px 22px;opacity:.55;transform:rotate(-3deg);
  background:linear-gradient(160deg, var(--bg-2), var(--surface));
}
.signup-card-mid{
  inset:8px 8px 16px 8px;opacity:.85;transform:rotate(1.2deg);
}
.signup-card-front{
  inset:18px 0 0 0;padding:22px;
  background:linear-gradient(160deg, var(--surface) 0%, color-mix(in oklab, var(--surface) 95%, var(--accent-soft) 5%) 100%);
}
.signup-ws-avatar{
  width:44px;height:44px;border-radius:12px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:white;display:grid;place-items:center;
  font-weight:800;font-size:15px;letter-spacing:-.02em;
  box-shadow:0 4px 14px color-mix(in oklab, var(--accent) 40%, transparent);
}
.signup-mini-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:12px 0;
  border-block:1px solid var(--line);margin-bottom:14px;
}
.signup-mini-list{display:flex;flex-direction:column;gap:6px}
.signup-mini-row{
  display:flex;align-items:center;gap:10px;
  padding:9px 11px;border-radius:9px;
  font-size:12.5px;color:var(--ink-2);
  background:var(--bg-2);border:1px solid var(--line);
}
.signup-mini-icon{
  width:22px;height:22px;border-radius:6px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-ink);
}

/* Trust bullets */
.signup-bullets{
  list-style:none;padding:18px 20px;margin:0;
  border:1px solid var(--line);border-radius:14px;
  background:color-mix(in oklab, var(--surface) 50%, transparent);
  display:flex;flex-direction:column;gap:10px;
}
.signup-bullets li{
  display:flex;align-items:center;gap:10px;
  font-size:12.5px;color:var(--ink-2);
}
.signup-bullets li svg{color:var(--good);flex-shrink:0}

/* Form atoms */
.su-field{display:flex;flex-direction:column;gap:6px}
.su-field-label{
  font-size:11px;font-weight:600;color:var(--ink-3);
  letter-spacing:.04em;text-transform:uppercase;
}
.su-field-wrap{position:relative;display:flex;align-items:center}
.su-field-icon{
  position:absolute;left:12px;display:grid;place-items:center;
  color:var(--ink-3);pointer-events:none;
}
.su-field-input{
  width:100%;padding:11px 13px;
  border:1px solid var(--line-2);border-radius:9px;
  background:var(--surface);color:var(--ink);
  font:inherit;font-size:14px;
  outline:none;transition:border .15s, box-shadow .15s;
}
.su-field-input[data-has-icon="true"]{padding-left:36px}
.su-field-input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent);
}
.su-field-hint{font-size:11.5px;color:var(--ink-3)}

.signup-field-label{
  font-size:11px;font-weight:600;color:var(--ink-3);
  letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px;
}

/* Range */
.su-range{
  width:100%;-webkit-appearance:none;appearance:none;
  height:6px;background:var(--bg-3);border-radius:3px;outline:none;
}
.su-range::-webkit-slider-runnable-track{
  height:6px;background:linear-gradient(to right, var(--accent) var(--p,50%), var(--bg-3) var(--p,50%));
  border-radius:3px;
}
.su-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:18px;height:18px;border-radius:50%;
  background:var(--surface);border:2px solid var(--accent);
  margin-top:-6px;cursor:pointer;
  box-shadow:0 2px 6px color-mix(in oklab, var(--accent) 30%, transparent);
  transition:transform .1s;
}
.su-range::-webkit-slider-thumb:hover{transform:scale(1.1)}
.su-range::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;
  background:var(--surface);border:2px solid var(--accent);cursor:pointer;
}

/* Stepper */
.su-stepper{
  display:flex;align-items:center;gap:8px;
  padding:6px;border:1px solid var(--line-2);border-radius:10px;
  background:var(--surface);width:fit-content;
}
.su-stepper-btn{
  width:30px;height:30px;border-radius:6px;
  background:var(--bg-2);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink-2);
  cursor:default;transition:background .12s;
}
.su-stepper-btn:hover{background:var(--bg-3)}
.su-stepper-val{
  display:flex;flex-direction:column;align-items:center;
  min-width:110px;padding:0 8px;line-height:1.1;gap:2px;
}

/* Industries */
.signup-industries{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
}
.signup-industry{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface);
  cursor:default;transition:all .12s;text-align:left;font:inherit;color:var(--ink);
}
.signup-industry:hover{border-color:var(--line-2);background:var(--bg-2)}
.signup-industry[data-active="true"]{
  border-color:var(--accent);
  background:color-mix(in oklab, var(--accent-soft) 50%, var(--surface));
  box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 12%, transparent);
}
.signup-industry-ic{
  width:36px;height:36px;border-radius:9px;
  background:var(--bg-2);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink-2);
  flex-shrink:0;
}
.signup-industry[data-active="true"] .signup-industry-ic{
  background:var(--accent);border-color:var(--accent);color:white;
}

/* Services */
.signup-services{
  display:flex;flex-direction:column;gap:10px;
}
.signup-service{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface);
  cursor:default;transition:all .12s;font:inherit;color:var(--ink);
  position:relative;
}
.signup-service:hover{border-color:var(--line-2);background:var(--bg-2)}
.signup-service[data-on="true"]{
  border-color:var(--accent);
  background:color-mix(in oklab, var(--accent-soft) 35%, var(--surface));
}
.signup-service-mark{
  width:40px;height:40px;border-radius:10px;color:white;
  display:grid;place-items:center;flex-shrink:0;
  box-shadow:0 4px 10px color-mix(in oklab, var(--accent) 18%, transparent);
}
.signup-service-check{
  width:22px;height:22px;border-radius:7px;
  border:1.5px solid var(--line-2);background:var(--surface);
  display:grid;place-items:center;color:white;flex-shrink:0;
  transition:all .12s;
}
.signup-service-check[data-on="true"]{
  background:var(--accent);border-color:var(--accent);
}

/* Pricing card */
.signup-pricing{
  padding:24px;border-radius:18px;
  border:1px solid var(--line);
  background:linear-gradient(160deg, var(--surface), color-mix(in oklab, var(--accent-soft) 30%, var(--surface)));
  box-shadow:var(--shadow-md);
}
.signup-pricing-eyebrow{
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:10px;
}
.signup-pricing-amount{
  display:flex;align-items:baseline;gap:6px;
  font-size:38px;font-weight:800;letter-spacing:-.03em;
  font-family:var(--font-ui);line-height:1;margin-bottom:6px;
}
.signup-pricing-rows{
  display:flex;flex-direction:column;
  padding:14px 0;border-block:1px solid color-mix(in oklab, var(--line) 80%, transparent);
  margin:14px 0;
}
.signup-pricing-row{
  display:flex;justify-content:space-between;align-items:center;
  font-size:12.5px;padding:6px 0;color:var(--ink-2);
}
.signup-pricing-foot{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:9px;
  background:color-mix(in oklab, var(--accent-soft) 60%, transparent);
  font-size:11.5px;color:var(--accent-ink);font-weight:500;
}
[data-theme="dark"] .signup-pricing-foot{color:oklch(0.85 0.1 268)}

/* Nav buttons */
.signup-nav{
  display:flex;align-items:center;gap:12px;
  margin-top:36px;padding-top:24px;
  border-top:1px solid var(--line);
}

/* Ready / provisioning step */
.signup-ready{text-align:center;padding:24px 0}
.signup-ready-ring{
  width:72px;height:72px;margin:0 auto;position:relative;
  filter:drop-shadow(0 4px 12px color-mix(in oklab, var(--accent) 30%, transparent));
}
.signup-ready-check{
  width:72px;height:72px;border-radius:50%;margin:0 auto;
  background:var(--good);color:white;display:grid;place-items:center;
  box-shadow:0 4px 18px color-mix(in oklab, var(--good) 40%, transparent);
  animation:su-pop .4s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes su-pop{
  from{transform:scale(.6);opacity:0}
  to{transform:scale(1);opacity:1}
}
.signup-ready-steps{
  display:flex;flex-direction:column;gap:8px;max-width:380px;margin:8px auto 0;text-align:left;
}
.signup-ready-step{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);
  font-size:13px;color:var(--ink-3);
  transition:all .2s;
}
.signup-ready-step[data-state="done"]{color:var(--ink);background:var(--bg-2)}
.signup-ready-step[data-state="active"]{
  color:var(--ink);
  border-color:var(--accent);
  background:color-mix(in oklab, var(--accent-soft) 40%, var(--surface));
  box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 12%, transparent);
}
.signup-ready-step-ic{
  width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;flex-shrink:0;
  background:var(--bg-3);color:var(--ink-3);
}
.signup-ready-step[data-state="done"] .signup-ready-step-ic{background:var(--good);color:white}
.signup-ready-step[data-state="active"] .signup-ready-step-ic{background:var(--accent);color:white}
.signup-spinner{
  width:11px;height:11px;border-radius:50%;
  border:2px solid color-mix(in oklab, white 50%, transparent);border-top-color:white;
  animation:su-spin .7s linear infinite;
}
@keyframes su-spin{to{transform:rotate(360deg)}}

/* Responsive */
@media (max-width: 900px){
  .signup-split{grid-template-columns:1fr;gap:32px}
  .signup-aside{position:static}
  .signup-card-stack{height:280px}
}


/* ─────────────────────────────────────────────────────────────
   Responsive desktop shell (compact between 760–1100px)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px){
  .app{grid-template-columns:200px 1fr}
  .sb-section{padding:12px 16px 4px}
  .sb-nav{padding:0 6px}
  .sb-workspace{margin:0 8px 8px}
  .sb-foot{margin:6px}
  .tb{padding:0 14px;gap:8px}
  .tb-search{width:auto;flex:1;min-width:0;max-width:220px}
  .tb-search-text{display:none}
  .tb-search-kbd{display:none}
  .content{padding-inline:16px !important}
}
@media (max-width: 900px){
  .app{grid-template-columns:64px 1fr}
  .sb-brand-wm{display:none}
  .sb-workspace{padding:6px;justify-content:center}
  .sb-ws-text,.sb-ws-chevron{display:none}
  .sb-section{font-size:0;padding:10px 0 4px;justify-content:center}
  .sb-section button{font-size:11px}
  .sb-item{justify-content:center;padding:9px 0}
  .sb-item span:not(.sb-item-icon):not(.sb-item-count):not(.sb-item-dot),
  .sb-item > :not(.sb-item-icon):not(.sb-item-count):not(.sb-item-dot){display:none}
  .sb-item-count,.sb-item-dot{position:absolute;top:4px;right:6px;font-size:9px;padding:1px 4px;margin:0}
  .sb-foot{display:none}
  .tb-bcrumb b + svg, .tb-bcrumb b + svg + *{}
  .tb-search{max-width:140px}
}

/* Home right-rail: stop fixed columns from overflowing in narrow desktops */
@media (max-width: 1100px){
  .home-grid{grid-template-columns:1fr !important}
  [data-home-rail]{display:contents}
}