/* ==========================================================================
   JavaObf Design System
   VS Code inspired, premium technical SaaS aesthetic.
   ========================================================================== */

/* ---------- Tokens ------------------------------------------------------- */
:root {
  /* Surfaces */
  --bg-body:        #0a0d13;
  --bg-shell:       #0d121a;
  --bg-rail:        #080b11;
  --bg-panel:       #121823;
  --bg-panel-2:     #0d131c;
  --bg-panel-hover: #1a2130;
  --bg-input:       #0a0e17;
  --bg-elevated:    #1c2433;
  --bg-overlay:     rgba(6, 9, 13, 0.72);

  /* Lines */
  --line-strong:    #202838;
  --line:           #172030;
  --line-subtle:    #121a26;

  /* Text */
  --fg:             #e5ecf5;
  --fg-strong:      #f7faff;
  --fg-mute:        #8596ac;
  --fg-dim:         #5a6a80;
  --fg-invert:      #0a0d13;

  /* Accent (cool electric blue, no purple) */
  --acc:            #4fa6ff;
  --acc-2:          #2e85e4;
  --acc-soft:       rgba(79, 166, 255, 0.12);
  --acc-border:     rgba(79, 166, 255, 0.38);
  --acc-strong:     rgba(79, 166, 255, 0.65);

  /* Semantic */
  --ok:             #4fd6a0;
  --ok-soft:        rgba(79, 214, 160, 0.12);
  --ok-border:      rgba(79, 214, 160, 0.35);
  --warn:           #f0b65d;
  --warn-soft:      rgba(240, 182, 93, 0.12);
  --warn-border:    rgba(240, 182, 93, 0.35);
  --err:            #ff6b80;
  --err-soft:       rgba(255, 107, 128, 0.12);
  --err-border:     rgba(255, 107, 128, 0.35);
  --info:           #8b9eff;
  --info-soft:      rgba(139, 158, 255, 0.12);
  --magenta:        #d67bff;
  --magenta-soft:   rgba(214, 123, 255, 0.12);

  /* Typography */
  --font-sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-22: 22px;
  --fs-28: 28px;
  --fs-36: 36px;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* Elevation */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --sh-2: 0 4px 10px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
  --sh-3: 0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
  --sh-ring: 0 0 0 3px rgba(79, 166, 255, 0.15);

  /* Rail / layout */
  --rail-w: 236px;
  --rail-w-collapsed: 56px;
  --topbar-h: 46px;
  --statusbar-h: 26px;
}

/* ---------- Reset -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { color-scheme: dark; }

body {
  background: var(--bg-body);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: 1.5;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(79, 166, 255, 0.05), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(139, 158, 255, 0.035), transparent 55%);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg-strong);
}
h1 { font-size: var(--fs-22); }
h2 { font-size: var(--fs-18); }
h3 { font-size: var(--fs-16); }
h4 { font-size: var(--fs-14); }

p { margin: 0; }
a { color: var(--acc); text-decoration: none; }
a:hover { color: #7bbaff; }
code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }
pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: #cfd9e5;
}
small { font-size: var(--fs-12); color: var(--fg-mute); }
hr { border: none; border-top: 1px solid var(--line); margin: var(--sp-5) 0; }

::selection { background: rgba(79, 166, 255, 0.35); color: var(--fg-strong); }

/* ---------- Scrollbars --------------------------------------------------- */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #1e2736; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #2a3445; background-clip: padding-box; border: 2px solid transparent; }
*::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================================
   Shell layout (app view)
   ========================================================================== */
.app-shell {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr var(--statusbar-h);
  grid-template-areas:
    "rail topbar"
    "rail main"
    "rail status";
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.app-rail {
  grid-area: rail;
  background: var(--bg-rail);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.rail-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--fg-strong);
}
.rail-brand .logo {
  width: 30px; height: 30px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(79, 166, 255, 0.3), rgba(79, 166, 255, 0.08)),
    linear-gradient(180deg, #161d29, #0d131c);
  border: 1px solid rgba(79, 166, 255, 0.25);
  display: grid; place-items: center;
  color: var(--acc);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 16px rgba(79, 166, 255, 0.15);
  flex-shrink: 0;
}
.rail-brand .logo svg { width: 16px; height: 16px; }
.rail-brand .name {
  font-size: var(--fs-15);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.rail-brand .tag {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  background: var(--acc-soft);
  color: var(--acc);
  border: 1px solid var(--acc-border);
  margin-left: auto;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rail-nav {
  display: flex;
  flex-direction: column;
  padding: 6px 10px 10px;
  gap: 1px;
  overflow-y: auto;
  flex: 1;
}
.rail-section {
  padding: 18px 10px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.rail-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--r-md);
  color: var(--fg-mute);
  font-size: var(--fs-13);
  font-weight: 500;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  border: 1px solid transparent;
  position: relative;
  min-height: 32px;
}
.rail-link:hover {
  background: rgba(255, 255, 255, 0.035);
  color: var(--fg);
}
.rail-link.is-active {
  background: linear-gradient(180deg, rgba(79, 166, 255, 0.14), rgba(79, 166, 255, 0.04));
  color: var(--fg-strong);
  border-color: rgba(79, 166, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(79, 166, 255, 0.08);
}
.rail-link.is-active::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--acc);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 10px rgba(79, 166, 255, 0.6);
}
.rail-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.rail-link:hover svg { opacity: 0.95; }
.rail-link.is-active svg {
  opacity: 1;
  color: var(--acc);
}
.rail-link .badge {
  margin-left: auto;
  font-size: 10px;
  padding: 1px 6px;
}

.rail-footer {
  border-top: 1px solid var(--line);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.18));
}
.rail-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  color: var(--fg-mute);
  font-size: var(--fs-13);
  border: 1px solid transparent;
}
.rail-user:hover { background: rgba(255, 255, 255, 0.025); border-color: var(--line); color: var(--fg); }
.rail-user .avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2e3f5a, #1a2536);
  display: grid; place-items: center;
  color: var(--acc);
  font-weight: 700;
  border: 1px solid rgba(79, 166, 255, 0.2);
  font-size: var(--fs-12);
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.rail-user .email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Topbar */
.app-topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-6);
  border-bottom: 1px solid var(--line);
  background: rgba(10, 13, 19, 0.78);
  backdrop-filter: saturate(140%) blur(12px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.breadcrumb {
  display: flex; align-items: center; gap: var(--sp-2);
  color: var(--fg-mute);
  font-size: var(--fs-13);
  min-width: 0;
}
.breadcrumb a { color: var(--fg-mute); font-weight: 500; }
.breadcrumb a:hover { color: var(--fg); }
.breadcrumb .sep { color: var(--fg-dim); display: inline-flex; }
.breadcrumb .current { color: var(--fg-strong); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.topbar-actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }

/* Main */
.app-main {
  grid-area: main;
  padding: var(--sp-6) var(--sp-7);
  max-width: 1680px;
  width: 100%;
  margin: 0 auto;
}
.app-main.workspace-mode {
  max-width: none;
  padding: 0;
}

/* Status bar */
.app-statusbar {
  grid-area: status;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-5);
  font-size: 11.5px;
  color: var(--fg-mute);
  background: linear-gradient(180deg, #0b0f16, #080b11);
  border-top: 1px solid var(--line);
}
.status-item { display: inline-flex; align-items: center; gap: 6px; }
.status-item .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px rgba(79, 214, 160, 0.5); }
.status-item .dot.is-warn { background: var(--warn); box-shadow: 0 0 6px rgba(240, 182, 93, 0.5); }
.status-item .dot.is-err { background: var(--err); box-shadow: 0 0 6px rgba(255, 107, 128, 0.5); }
.status-spacer { flex: 1; }

/* ==========================================================================
   Unauthenticated / marketing layout
   ========================================================================== */
.marketing-shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  position: relative;
  z-index: 1;
}
.marketing-header {
  display: flex; align-items: center;
  padding: var(--sp-5) var(--sp-7);
  gap: var(--sp-5);
}
.marketing-header .brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--fg-strong); font-weight: 700; letter-spacing: 0.02em;
  font-size: var(--fs-16);
}
.marketing-header .brand .logo {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, rgba(79, 166, 255, 0.25), rgba(139, 158, 255, 0.15));
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  color: var(--acc);
}
.marketing-header nav { margin-left: auto; display: flex; gap: var(--sp-2); align-items: center; }
.marketing-footer {
  text-align: center;
  padding: var(--sp-5);
  color: var(--fg-dim);
  font-size: var(--fs-12);
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   Primitives
   ========================================================================== */

/* Buttons */
.btn, button, input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 13px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--fg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: var(--fs-13);
  font-weight: 500;
  line-height: 1.2;
  min-height: 32px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.06s ease, box-shadow 0.14s ease, color 0.14s ease;
  white-space: nowrap;
  position: relative;
}
.btn:hover, button:hover {
  background: var(--bg-panel-hover);
  border-color: #2d384b;
  color: var(--fg-strong);
}
.btn:active, button:active { transform: translateY(1px); }
.btn:focus-visible, button:focus-visible {
  outline: none;
  box-shadow: var(--sh-ring);
  border-color: var(--acc-border);
}
.btn[disabled], button[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.85; }
.btn:hover svg { opacity: 1; }

.btn.btn-primary, .button {
  background: linear-gradient(180deg, #5ab0ff 0%, #3a8fea 100%);
  color: #061322;
  border-color: #3387e8;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(51, 135, 232, 0.2);
}
.btn.btn-primary:hover, .button:hover {
  background: linear-gradient(180deg, #6dbbff 0%, #4798ef 100%);
  border-color: #4798ef;
  color: #061322;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 2px 8px rgba(71, 152, 239, 0.35), 0 0 0 1px rgba(71, 152, 239, 0.3);
}
.btn.btn-primary:focus-visible {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 3px rgba(79, 166, 255, 0.4);
}
.btn.btn-primary svg { opacity: 0.9; }

.btn.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--fg-mute);
}
.btn.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line);
  color: var(--fg);
}

.btn.btn-danger, .button.danger {
  background: linear-gradient(180deg, #ff7b90, #d64960);
  color: #1a0509;
  border-color: #d64960;
  font-weight: 600;
}
.btn.btn-danger:hover { background: linear-gradient(180deg, #ff8da0, #df5770); }

.btn.btn-sm { min-height: 26px; padding: 3px 10px; font-size: var(--fs-12); gap: 6px; }
.btn.btn-sm svg { width: 12px; height: 12px; }
.btn.btn-lg { min-height: 42px; padding: 10px 18px; font-size: var(--fs-14); }
.btn.btn-block { width: 100%; }
.btn.btn-icon { padding: 7px; min-width: 32px; }

.button.secondary {
  background: var(--bg-panel);
  color: var(--fg);
  border-color: var(--line-strong);
  font-weight: 500;
  box-shadow: none;
}
.button.secondary:hover { background: var(--bg-panel-hover); }

/* Split button pair */
.btn-split { display: inline-flex; }
.btn-split .btn { border-radius: 0; border-right-width: 0; }
.btn-split .btn:first-child { border-top-left-radius: var(--r-md); border-bottom-left-radius: var(--r-md); }
.btn-split .btn:last-child { border-top-right-radius: var(--r-md); border-bottom-right-radius: var(--r-md); border-right-width: 1px; }

/* Inputs */
input, textarea, select {
  width: 100%;
  background: var(--bg-input);
  color: var(--fg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 9px 12px;
  font-family: inherit;
  font-size: var(--fs-13);
  line-height: 1.4;
  min-height: 34px;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}
input::placeholder, textarea::placeholder { color: var(--fg-dim); }
input:hover:not(:focus), textarea:hover:not(:focus), select:hover:not(:focus) { border-color: #2d384b; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--acc-border);
  box-shadow: var(--sh-ring);
}
input[type="file"] {
  padding: 7px;
  background: var(--bg-panel-2);
  font-size: var(--fs-13);
  cursor: pointer;
}
input[type="file"]::file-selector-button {
  background: var(--bg-panel);
  border: 1px solid var(--line-strong);
  color: var(--fg);
  padding: 6px 12px;
  font-size: var(--fs-13);
  border-radius: var(--r-sm);
  margin-right: 10px;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--bg-panel-hover); }
input[type="checkbox"], input[type="radio"] {
  width: 15px; height: 15px; min-height: 0;
  accent-color: var(--acc);
  cursor: pointer;
}
textarea { min-height: 80px; resize: vertical; font-family: inherit; }

label {
  display: grid;
  gap: 6px;
  color: var(--fg-mute);
  font-size: var(--fs-13);
  font-weight: 500;
}
label .hint { color: var(--fg-dim); font-size: var(--fs-12); font-weight: 400; }

/* Inline form items */
.inline-form { display: inline-flex; }
.inline-form button { min-height: 28px; padding: 4px 10px; font-size: var(--fs-12); }

/* Check-row */
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--fs-13);
  color: var(--fg);
  font-weight: 500;
  cursor: pointer;
  line-height: 1.4;
}
.check-row input { margin-top: 2px; }
.check-row .check-text { display: grid; gap: 3px; flex: 1; }
.check-row .check-text small { color: var(--fg-mute); font-weight: 400; }
.check-row:has(input:checked) {
  border-color: var(--acc-border);
  background: var(--acc-soft);
}
.check-row input:disabled ~ .check-text { opacity: 0.5; }

/* Cards */
.card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  position: relative;
}
.card.flat { padding: 0; background: var(--bg-panel-2); overflow: hidden; }
.card.interactive { transition: border-color 0.14s ease, transform 0.05s ease, box-shadow 0.14s ease; }
.card.interactive:hover { border-color: #2c3649; box-shadow: var(--sh-2); }

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent);
}
.card-header h2, .card-header h3, .card-header h4 { margin: 0; font-size: var(--fs-13); font-weight: 600; color: var(--fg-strong); letter-spacing: 0.02em; text-transform: uppercase; }
.card-body { padding: var(--sp-5); }
.card-body.pad-sm { padding: var(--sp-3); }
.card-body.flush { padding: 0; }
.card-footer { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: var(--sp-3); }

/* Page headers */
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.page-header .page-title {
  display: grid;
  gap: 4px;
}
.page-header h1 {
  font-size: var(--fs-22);
  display: flex; align-items: center; gap: 10px;
  color: var(--fg-strong);
}
.page-header .page-description {
  color: var(--fg-mute);
  font-size: var(--fs-13);
}
.page-header .page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Grid */
.grid { display: grid; gap: var(--sp-4); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.stack { display: grid; gap: var(--sp-3); }
.stack.sm { gap: var(--sp-2); }
.stack.lg { gap: var(--sp-5); }

.row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.actions { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-top: var(--sp-3); }

.narrow { max-width: 440px; width: 100%; margin: 0 auto; }
.muted { color: var(--fg-mute); }
.dim { color: var(--fg-dim); }
.mono { font-family: var(--font-mono); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.spacer { flex: 1; }

/* Section titles */
.section-title {
  display: flex; align-items: center; gap: 10px;
  color: var(--fg-mute);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: var(--sp-6) 0 var(--sp-3);
}
.section-title::after { content: ""; flex: 1; border-bottom: 1px solid var(--line); }

/* Badges / chips */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--bg-panel-hover);
  color: var(--fg);
  border: 1px solid var(--line-strong);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.4;
  white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-mute); }
.badge.is-accent { background: var(--acc-soft); border-color: var(--acc-border); color: #b5d9ff; }
.badge.is-accent .dot { background: var(--acc); }
.badge.is-ok { background: var(--ok-soft); border-color: var(--ok-border); color: #a5e9c8; }
.badge.is-ok .dot { background: var(--ok); }
.badge.is-warn { background: var(--warn-soft); border-color: var(--warn-border); color: #f2d4a2; }
.badge.is-warn .dot { background: var(--warn); }
.badge.is-err { background: var(--err-soft); border-color: var(--err-border); color: #ffb2bf; }
.badge.is-err .dot { background: var(--err); }
.badge.is-info { background: var(--info-soft); border-color: rgba(139, 158, 255, 0.35); color: #c4cdff; }
.badge.is-info .dot { background: var(--info); }
.badge.is-magenta { background: var(--magenta-soft); border-color: rgba(214, 123, 255, 0.3); color: #e5b6ff; }
.badge.is-magenta .dot { background: var(--magenta); }

.kbd {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  background: var(--bg-panel-2);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-mute);
}

/* Flashes */
.flash-stack { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg-panel);
  font-size: var(--fs-13);
  line-height: 1.4;
}
.flash svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.flash-error { background: var(--err-soft); border-color: var(--err-border); color: #ffcdd4; }
.flash-error svg { color: var(--err); }
.flash-success { background: var(--ok-soft); border-color: var(--ok-border); color: #c2edd7; }
.flash-success svg { color: var(--ok); }

/* Tables */
.table-wrap {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-13);
}
.table th, .table td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--line-subtle);
}
.table th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-mute);
  background: var(--bg-panel-2);
  border-bottom-color: var(--line);
}
.table tbody tr:hover td { background: rgba(255, 255, 255, 0.015); }
.table tbody tr:last-child td { border-bottom: none; }
.table td.num { font-variant-numeric: tabular-nums; text-align: right; }
.table td.tight { width: 1%; white-space: nowrap; }
.table .td-sub { color: var(--fg-mute); font-size: var(--fs-12); }
.table .td-mono { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--fg-mute); }

.list { display: grid; gap: var(--sp-2); }
.list .card.list-item {
  padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  transition: border-color 0.14s ease, background 0.14s ease;
}
.list .card.list-item:hover { border-color: #2c3649; background: var(--bg-panel-hover); }

/* Plain list resets */
.plain-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1px;
  background: var(--line-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
}
.plain-list > li {
  padding: 10px 14px;
  background: var(--bg-panel);
  font-size: var(--fs-13);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.plain-list > li:only-child,
.plain-list > li:last-child { border-bottom: none; }
.plain-list.empty > li { color: var(--fg-mute); justify-content: center; }

/* Empty state */
.empty-state {
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
  display: grid;
  place-items: center;
  gap: var(--sp-3);
  color: var(--fg-mute);
}
.empty-state .empty-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-lg);
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--fg-dim);
}
.empty-state .empty-icon svg { width: 22px; height: 22px; }
.empty-state h3 { color: var(--fg-strong); }
.empty-state p { max-width: 380px; font-size: var(--fs-13); }

/* Metric tile */
.metric {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  display: grid;
  gap: 4px;
  position: relative;
  overflow: hidden;
}
.metric .metric-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-mute);
  display: flex; align-items: center; gap: 6px;
}
.metric .metric-label svg { width: 13px; height: 13px; opacity: 0.6; }
.metric .metric-value {
  font-size: var(--fs-22);
  font-weight: 600;
  color: var(--fg-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.metric .metric-sub { color: var(--fg-mute); font-size: var(--fs-12); }
.metric.accent::after {
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0; width: 3px;
  background: var(--acc);
  opacity: 0.6;
}

/* JSON block */
.code-block {
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 14px;
  overflow: auto;
  max-height: 420px;
  font-size: var(--fs-12);
  line-height: 1.5;
  color: #c7d4e4;
}
.code-block.jsonish { white-space: pre; }

details.collapsible {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0;
  overflow: hidden;
}
details.collapsible > summary {
  padding: 10px 14px;
  cursor: pointer;
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--fg);
  display: flex; align-items: center; gap: 8px;
  list-style: none;
}
details.collapsible > summary::-webkit-details-marker { display: none; }
details.collapsible > summary::before {
  content: "";
  width: 0; height: 0;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  border-left: 5px solid var(--fg-mute);
  transition: transform 0.14s ease;
}
details.collapsible[open] > summary::before { transform: rotate(90deg); }
details.collapsible[open] > summary { border-bottom: 1px solid var(--line); }
details.collapsible > *:not(summary) { padding: 12px 14px; }

/* Tabs */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-5);
  overflow-x: auto;
}
.tabs .tab {
  padding: 9px 14px;
  font-size: var(--fs-13);
  color: var(--fg-mute);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  background: transparent;
  border-top: none; border-left: none; border-right: none;
  border-radius: 0;
  min-height: 0;
  font-weight: 500;
  white-space: nowrap;
}
.tabs .tab:hover { color: var(--fg); background: transparent; }
.tabs .tab.is-active { color: var(--fg-strong); border-bottom-color: var(--acc); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* ==========================================================================
   Landing page
   ========================================================================== */
.hero {
  padding: var(--sp-9) var(--sp-7);
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--acc-soft);
  border: 1px solid var(--acc-border);
  color: #b5d9ff;
  font-size: var(--fs-12);
  font-weight: 500;
  margin-bottom: var(--sp-5);
}
.hero h1 {
  font-size: clamp(34px, 5.2vw, 54px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  background: linear-gradient(180deg, #f5f9ff 0%, #9bb5d0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: var(--sp-4);
}
.hero .lede {
  font-size: var(--fs-18);
  color: var(--fg-mute);
  max-width: 720px;
  margin: 0 auto var(--sp-6);
  line-height: 1.5;
}
.hero .hero-cta { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin-bottom: var(--sp-8); }
.hero .hero-cta .btn { padding: 12px 22px; min-height: 46px; font-size: var(--fs-14); }
.hero-preview {
  margin: 0 auto;
  max-width: 1000px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(79, 166, 255, 0.12), transparent 30%);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  overflow: hidden;
}
.hero-preview .preview-head {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px 12px;
}
.hero-preview .preview-head .traffic { display: flex; gap: 6px; }
.hero-preview .preview-head .traffic span { width: 10px; height: 10px; border-radius: 50%; background: #2a3240; }
.hero-preview .preview-head .bar { margin-left: 12px; flex: 1; height: 22px; border-radius: 6px; background: var(--bg-panel-2); border: 1px solid var(--line); display: grid; place-items: center; font-size: var(--fs-12); color: var(--fg-mute); }
.hero-preview .preview-body {
  min-height: 280px;
  border-radius: var(--r-md);
  background:
    linear-gradient(180deg, var(--bg-panel), var(--bg-panel-2));
  border: 1px solid var(--line);
  padding: 18px;
  display: grid;
  grid-template-columns: 200px 1fr 240px;
  gap: 12px;
}
.hero-preview .mock-col { background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px; display: grid; gap: 6px; }
.hero-preview .mock-line { height: 7px; border-radius: 4px; background: rgba(255,255,255,0.04); }
.hero-preview .mock-line.wide { background: rgba(79, 166, 255, 0.22); }
.hero-preview .mock-line.short { width: 50%; }
.hero-preview .mock-line.lg { height: 12px; }

.feature-grid {
  padding: var(--sp-8) var(--sp-7);
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.feature {
  padding: var(--sp-5);
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.feature .feat-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(79, 166, 255, 0.18), rgba(79, 166, 255, 0.05));
  border: 1px solid var(--acc-border);
  display: grid; place-items: center;
  color: var(--acc);
  margin-bottom: 14px;
}
.feature h3 { margin-bottom: 6px; }
.feature p { color: var(--fg-mute); font-size: var(--fs-13); line-height: 1.55; }

.workflow {
  padding: var(--sp-8) var(--sp-7);
  max-width: 1200px;
  margin: 0 auto;
}
.workflow-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-top: var(--sp-5); }
.workflow-step {
  padding: var(--sp-5);
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  position: relative;
}
.workflow-step .step-num {
  position: absolute; top: 12px; right: 12px;
  font-family: var(--font-mono);
  color: var(--fg-dim);
  font-size: var(--fs-12);
}
.workflow-step h4 { margin-bottom: 4px; }
.workflow-step p { color: var(--fg-mute); font-size: var(--fs-13); }

/* ==========================================================================
   Auth
   ========================================================================== */
.auth-wrap {
  display: grid;
  grid-template-columns: 1fr 480px;
  min-height: 100vh;
  background: var(--bg-body);
  position: relative;
  z-index: 1;
}
.auth-showcase {
  padding: var(--sp-8);
  display: flex; flex-direction: column;
  background:
    radial-gradient(700px 500px at 10% 0%, rgba(79, 166, 255, 0.12), transparent 55%),
    radial-gradient(500px 400px at 90% 100%, rgba(139, 158, 255, 0.08), transparent 55%),
    linear-gradient(180deg, #0a0d13, #070a10);
  border-right: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.auth-showcase .auth-brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--fg-strong); font-weight: 700; font-size: var(--fs-16);
}
.auth-showcase .auth-brand .logo {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, rgba(79, 166, 255, 0.25), rgba(139, 158, 255, 0.15));
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  color: var(--acc);
}
.auth-showcase .auth-tagline {
  margin-top: auto;
  display: grid; gap: var(--sp-4);
}
.auth-showcase h2 {
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #f5f9ff, #9bb5d0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.auth-showcase .auth-points { display: grid; gap: 12px; }
.auth-showcase .auth-point {
  display: flex; gap: 10px; align-items: flex-start;
  color: var(--fg-mute); font-size: var(--fs-14);
}
.auth-showcase .auth-point svg { color: var(--acc); width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; }
.auth-showcase .auth-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.6), transparent 70%);
}

.auth-panel {
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-8);
  background: var(--bg-body);
}
.auth-form {
  width: 100%;
  max-width: 360px;
  display: grid; gap: var(--sp-5);
}
.auth-form h1 { font-size: var(--fs-28); margin-bottom: 4px; }
.auth-form .auth-sub { color: var(--fg-mute); font-size: var(--fs-14); margin-bottom: 4px; }
.auth-form .auth-alt {
  margin-top: var(--sp-3);
  color: var(--fg-mute);
  font-size: var(--fs-13);
  text-align: center;
}
.auth-form .auth-alt a { color: var(--acc); font-weight: 500; }

/* ==========================================================================
   Projects / project detail
   ========================================================================== */
.license-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 12px 18px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-5);
}
.license-banner .b-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--acc-soft);
  border: 1px solid var(--acc-border);
  display: grid; place-items: center; color: var(--acc);
  flex-shrink: 0;
}
.license-banner .b-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.license-banner .b-text strong { color: var(--fg-strong); font-size: var(--fs-14); }
.license-banner .b-text small { color: var(--fg-mute); font-size: var(--fs-12); }
.license-banner.is-warn .b-icon { background: var(--warn-soft); border-color: var(--warn-border); color: var(--warn); }

.project-card {
  padding: 0;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  transition: border-color 0.14s ease, transform 0.08s ease, box-shadow 0.14s ease;
  color: var(--fg);
  min-height: 170px;
}
.project-card:hover { border-color: var(--acc-border); transform: translateY(-1px); box-shadow: var(--sh-2); }
.project-card .pc-head {
  padding: 14px 16px 10px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  border-bottom: 1px solid var(--line-subtle);
}
.project-card .pc-icon {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--bg-panel-2);
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  color: var(--acc);
  flex-shrink: 0;
}
.project-card h3 {
  font-size: var(--fs-14);
  margin-bottom: 2px;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.project-card .pc-desc {
  padding: 10px 16px;
  color: var(--fg-mute);
  font-size: var(--fs-13);
  line-height: 1.5;
  flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.project-card .pc-foot {
  padding: 10px 16px;
  border-top: 1px solid var(--line-subtle);
  display: flex; align-items: center; gap: 10px;
  color: var(--fg-mute);
  font-size: var(--fs-12);
}

/* Drop zone */
.drop-zone {
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  background: var(--bg-panel-2);
  display: grid; place-items: center; text-align: center; gap: 10px;
  transition: border-color 0.14s ease, background 0.14s ease;
  cursor: pointer;
}
.drop-zone:hover, .drop-zone.is-drag {
  border-color: var(--acc-border);
  background: var(--acc-soft);
}
.drop-zone .dz-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--bg-panel); border: 1px solid var(--line-strong);
  display: grid; place-items: center; color: var(--acc);
}
.drop-zone .dz-title { color: var(--fg-strong); font-weight: 600; font-size: var(--fs-14); }
.drop-zone .dz-sub { color: var(--fg-mute); font-size: var(--fs-12); }
.drop-zone input[type="file"] { display: none; }
.drop-zone .dz-file { color: var(--fg); font-family: var(--font-mono); font-size: var(--fs-12); }

/* ==========================================================================
   Workspace
   IDE-style docked layout. No more free-floating panels.
   ========================================================================== */
.workspace-shell {
  display: grid;
  gap: 0;
  padding: 0;
  margin: 0;
  background: var(--bg-shell);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* Toolbar above the grid */
.ws-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #121823, #0e131c);
  flex-wrap: wrap;
}
.ws-toolbar .ws-title {
  display: flex; align-items: center; gap: 10px;
  color: var(--fg-strong);
  font-weight: 600;
  font-size: var(--fs-13);
}
.ws-toolbar .ws-title svg { color: var(--acc); width: 15px; height: 15px; }
.ws-toolbar .ws-meta {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.ws-toolbar .ws-spacer { flex: 1; }
.ws-toolbar .ws-actions {
  display: flex; align-items: center; gap: 6px;
}

/* Main grid: 3 columns (explorer | center | inspector) */
.ws {
  display: grid;
  grid-template-columns: 260px 1fr 340px;
  grid-template-rows: 1fr 220px;
  grid-template-areas:
    "explorer center inspector"
    "explorer bottom  inspector";
  height: 720px;
  background: var(--bg-shell);
}
.workspace-canvas.is-embedded { height: auto; min-height: 0; border: none; }

/* Explorer (left) */
.ws-explorer {
  grid-area: explorer;
  border-right: 1px solid var(--line);
  background: var(--bg-panel-2);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ws-search {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.ws-search input {
  width: 100%;
  padding: 6px 10px 6px 30px;
  font-size: var(--fs-12);
  min-height: 28px;
  background: var(--bg-input);
}
.ws-search svg {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px; color: var(--fg-dim);
  pointer-events: none;
}
.ws-tree {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0 10px;
}
.ws-pkg {
  margin: 0;
}
.ws-pkg > summary {
  list-style: none;
  cursor: pointer;
  padding: 5px 10px 5px 22px;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--fg-mute);
  display: flex; align-items: center; gap: 6px;
  position: relative;
  user-select: none;
}
.ws-pkg > summary::-webkit-details-marker { display: none; }
.ws-pkg > summary::before {
  content: "";
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  border-left: 4.5px solid var(--fg-dim);
  transition: transform 0.14s ease;
  transform-origin: 25% 50%;
}
.ws-pkg[open] > summary::before { transform: translateY(-50%) rotate(90deg); }
.ws-pkg > summary:hover { background: rgba(255,255,255,0.025); color: var(--fg); }
.ws-pkg > summary .pkg-count {
  margin-left: auto;
  color: var(--fg-dim);
  font-size: 10.5px;
  font-family: var(--font-mono);
  background: var(--bg-panel);
  padding: 1px 6px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
}
.ws-pkg .ws-class {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 34px;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--fg);
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  min-height: 0;
  border-radius: 0;
  border-left: 2px solid transparent;
  line-height: 1.4;
}
.ws-pkg .ws-class:hover { background: rgba(255,255,255,0.03); color: var(--fg-strong); }
.ws-pkg .ws-class.is-selected {
  background: var(--acc-soft);
  color: var(--fg-strong);
  border-left-color: var(--acc);
}
.ws-pkg .ws-class .c-icon {
  width: 11px; height: 11px;
  flex-shrink: 0;
  color: var(--acc);
  opacity: 0.75;
}
.ws-pkg .ws-class.is-locked .c-icon { color: var(--ok); opacity: 1; }
.ws-pkg .ws-class .c-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.ws-pkg .ws-class .c-meta { color: var(--fg-dim); font-size: 10.5px; margin-left: auto; padding-left: 6px; }

/* Center: tabbed main view */
.ws-center {
  grid-area: center;
  display: flex; flex-direction: column;
  min-width: 0;
  background: var(--bg-shell);
}
.ws-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  background: var(--bg-panel-2);
  overflow-x: auto;
  min-height: 36px;
}
.ws-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--line);
  color: var(--fg-mute);
  font-size: var(--fs-13);
  font-weight: 500;
  cursor: pointer;
  min-height: 36px;
  border-radius: 0;
  position: relative;
  white-space: nowrap;
}
.ws-tab svg { width: 13px; height: 13px; opacity: 0.7; }
.ws-tab:hover { color: var(--fg); background: rgba(255,255,255,0.025); border-color: var(--line); }
.ws-tab.is-active {
  color: var(--fg-strong);
  background: var(--bg-shell);
}
.ws-tab.is-active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--acc);
  box-shadow: 0 0 8px rgba(79, 166, 255, 0.55);
}
.ws-tab.is-active svg { opacity: 1; color: var(--acc); }
.ws-tab .count {
  margin-left: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-dim);
  background: var(--bg-panel);
  padding: 1px 6px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
}
.ws-tab.is-active .count { color: var(--acc); border-color: var(--acc-border); background: var(--acc-soft); }

.ws-view {
  flex: 1;
  overflow: auto;
  padding: 14px;
  min-height: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(79, 166, 255, 0.03), transparent 40%),
    var(--bg-shell);
}
.ws-panel { display: none; }
.ws-panel.is-active { display: block; }

/* Overview */
.ws-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-content: start;
}
.ws-overview .card { padding: 0; }
.ws-over-title {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--fg-strong);
  word-break: break-all;
  margin-bottom: 4px;
}
.ws-over-sub {
  font-size: var(--fs-12);
  color: var(--fg-mute);
}
.ws-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.ws-metric {
  padding: 10px 12px;
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.ws-metric .ws-metric-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-mute);
  margin-bottom: 2px;
}
.ws-metric .ws-metric-value {
  font-size: var(--fs-18);
  font-weight: 600;
  color: var(--fg-strong);
  font-variant-numeric: tabular-nums;
}

/* Method list (Class Inspector) */
.ws-sub-section {
  margin-top: 14px;
}
.ws-sub-section h4 {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg-mute); margin-bottom: 6px;
  font-weight: 700;
  display: flex; align-items: center; gap: 6px;
}
.ws-sub-section h4 svg { width: 12px; height: 12px; opacity: 0.7; }
.ws-method-list { display: grid; gap: 2px; }
.ws-method {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: var(--fs-13);
  line-height: 1.4;
  text-align: left;
  min-height: 0;
  color: var(--fg);
}
.ws-method:hover { background: var(--bg-panel-hover); border-color: var(--line-strong); }
.ws-method.is-selected {
  border-color: var(--acc-border);
  background: var(--acc-soft);
  box-shadow: inset 0 0 0 1px var(--acc-border);
}
.ws-method .m-name {
  font-family: var(--font-mono);
  color: var(--fg-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
  flex: 0 0 auto;
  max-width: 50%;
}
.ws-method .m-desc {
  font-family: var(--font-mono);
  color: var(--fg-dim);
  font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.ws-field-list { display: grid; gap: 2px; }
.ws-field {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: left;
  min-height: 0;
  color: var(--fg);
}
.ws-field:hover { background: var(--bg-panel-hover); border-color: var(--line-strong); }
.ws-field.is-selected {
  border-color: rgba(79, 166, 255, 0.55);
  background: rgba(79, 166, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(79, 166, 255, 0.18);
}
.ws-field .f-name,
.ws-field .f-desc {
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-field .f-name { color: var(--fg-strong); max-width: 46%; }
.ws-field .f-desc { color: var(--fg-dim); font-size: 11.5px; flex: 1; min-width: 0; }
.ws-detail-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.ws-inline-reasons {
  margin-top: 8px;
  color: var(--fg);
  font-size: var(--fs-12);
  line-height: 1.5;
}

/* Call graph (center pane) */
.ws-graph-canvas {
  width: 100%;
  min-height: 420px;
  height: 100%;
  border-radius: var(--r-sm);
  background:
    radial-gradient(circle at 50% 50%, rgba(79, 166, 255, 0.04), transparent 60%),
    var(--bg-panel-2);
  border: 1px solid var(--line);
}
.graph-edge {
  stroke: rgba(143, 161, 181, 0.3);
  stroke-width: 1.2;
  transition: stroke 0.15s ease, stroke-width 0.15s ease, opacity 0.15s ease;
}
.graph-edge.is-hot { stroke: var(--acc); stroke-width: 1.6; opacity: 1; }
.graph-edge.is-dim { opacity: 0.2; }
.graph-node { cursor: pointer; }
.graph-node circle {
  transition: filter 0.14s ease, stroke-width 0.14s ease;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 1.5;
}
.graph-node:hover circle { filter: drop-shadow(0 0 8px rgba(79, 166, 255, 0.6)); }
.graph-node.is-selected circle {
  stroke: #ffffff;
  stroke-width: 2.5;
  filter: drop-shadow(0 0 12px rgba(79, 166, 255, 0.85));
}
.graph-node text {
  fill: var(--fg);
  font-size: 11px;
  font-family: var(--font-mono);
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(10, 13, 19, 0.85);
  stroke-width: 3;
}
.ws-graph-legend {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 6px 12px;
  margin-top: 10px;
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 11.5px;
  color: var(--fg-mute);
}
.ws-graph-legend .dot-mark {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block; margin-right: 5px; vertical-align: -1px;
  box-shadow: 0 0 6px currentColor;
}

/* CFG view */
.ws-cfg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.ws-cfg-head h5 {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-mute);
  font-weight: 700;
}
.ws-cfg-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ws-cfg-layout {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 12px;
}
.ws-cfg { display: grid; gap: 6px; }
.ws-cfg-node {
  padding: 8px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--bg-panel-2);
  cursor: pointer;
  font-size: var(--fs-13);
  transition: background 0.1s ease, border-color 0.1s ease, transform 0.06s ease;
}
.ws-cfg-node strong { display: block; font-family: var(--font-mono); font-size: var(--fs-13); color: var(--fg); }
.ws-cfg-node small { display: block; color: var(--fg-mute); font-family: var(--font-mono); font-size: 11px; margin-top: 2px; }
.ws-cfg-node:hover { border-color: var(--acc-border); background: var(--bg-panel-hover); }
.ws-cfg-node.is-selected {
  border-color: var(--acc);
  background: var(--acc-soft);
  box-shadow: inset 0 0 0 1px var(--acc-border);
}
.ws-block-instructions {
  margin-top: 10px;
  display: grid;
  gap: 4px;
}
.ws-block-ins {
  padding: 6px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--bg-panel-2);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 11.5px;
  word-break: break-word;
}
.ws-edge-group {
  margin-top: 12px;
  display: grid;
  gap: 6px;
}
.ws-edge-list {
  display: grid;
  gap: 4px;
}
.ws-edge {
  padding: 6px 8px;
  border-radius: var(--r-sm);
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  color: var(--fg-mute);
  font-family: var(--font-mono);
  font-size: 11.5px;
}
@media (max-width: 980px) {
  .ws-cfg-layout {
    grid-template-columns: 1fr;
  }
}

/* Strings view */
.ws-strings-filter {
  margin-bottom: 10px;
  display: flex; gap: 8px; align-items: center;
}
.ws-strings-filter input { flex: 1; }
.ws-strings {
  display: grid;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
}
.ws-string {
  padding: 5px 10px;
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: #a5e9c8;
  word-break: break-all;
}
.ws-string:hover { border-color: var(--acc-border); background: rgba(79, 166, 255, 0.04); }

/* Right inspector */
.ws-inspector {
  grid-area: inspector;
  border-left: 1px solid var(--line);
  background: var(--bg-panel-2);
  display: flex; flex-direction: column;
  min-height: 0;
}
.ws-ins-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  background: var(--bg-panel-2);
}
.ws-ins-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 6px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--fg-mute);
  font-size: var(--fs-12);
  font-weight: 600;
  cursor: pointer;
  min-height: 0;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ws-ins-tab svg { width: 13px; height: 13px; opacity: 0.7; }
.ws-ins-tab:hover { color: var(--fg); background: rgba(255,255,255,0.025); }
.ws-ins-tab.is-active {
  color: var(--fg-strong);
  border-bottom-color: var(--acc);
}
.ws-ins-tab.is-active svg { opacity: 1; color: var(--acc); }
.ws-ins-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  min-height: 0;
}
.ws-ins-panel { display: none; }
.ws-ins-panel.is-active { display: block; }

/* Locks list */
.ws-lock {
  display: grid; gap: 4px;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  background: var(--ok-soft);
  border: 1px solid var(--ok-border);
  border-left-width: 3px;
  margin-bottom: 6px;
}
.ws-lock .lock-sym {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: #c6f2dc;
  word-break: break-all;
  font-weight: 500;
}
.ws-lock .lock-reason {
  font-size: 11.5px;
  color: var(--fg-mute);
  line-height: 1.45;
}
.ws-lock .lock-kind {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ok);
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 2px;
}
.ws-lock .lock-kind::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 5px currentColor;
}
.ws-lock.is-soft {
  background: var(--acc-soft);
  border-color: var(--acc-border);
}
.ws-lock.is-soft .lock-sym { color: #c8e2ff; }
.ws-lock.is-soft .lock-kind { color: var(--acc); }

/* Xrefs / entrypoints list */
.ws-list { display: grid; gap: 4px; }
.ws-list-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--fs-12);
  cursor: pointer;
  text-align: left;
  min-height: 0;
  color: var(--fg);
}
.ws-list-item:hover { border-color: var(--acc-border); background: var(--bg-panel-hover); }
.ws-list-item .li-kind {
  width: 4px;
  align-self: stretch;
  border-radius: 2px;
  background: var(--acc);
  flex-shrink: 0;
}
.ws-list-item .li-body { min-width: 0; flex: 1; display: grid; gap: 2px; }
.ws-list-item .li-title {
  font-family: var(--font-mono);
  color: var(--fg-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-12);
}
.ws-list-item .li-meta {
  color: var(--fg-mute);
  font-size: 10.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ws-ins-subhead {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-mute);
}
.ws-ins-subhead + .ws-ins-subhead { margin-top: 14px; }

/* Rule editor */
.ws-rules { display: grid; gap: 8px; }
.ws-rule-ctx {
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--bg-panel);
  border: 1px solid var(--line);
  display: grid; gap: 3px;
  font-size: 11.5px;
}
.ws-rule-ctx .ctx-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg-dim); font-weight: 700;
}
.ws-rule-ctx .ctx-value { font-family: var(--font-mono); color: var(--fg); word-break: break-all; }
.ws-rule-ctx.is-empty .ctx-value { color: var(--fg-dim); font-style: italic; font-family: var(--font-sans); }

.ws-rule-btn {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--fg);
  font-size: var(--fs-12);
  font-weight: 500;
  cursor: pointer;
  min-height: 0;
  text-align: left;
  line-height: 1.3;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.ws-rule-btn:hover { background: var(--bg-panel-hover); border-color: var(--line-strong); }
.ws-rule-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ws-rule-btn .r-ico {
  width: 26px; height: 26px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
}
.ws-rule-btn .r-ico.lock { background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok-border); }
.ws-rule-btn .r-ico.skip { background: var(--info-soft); color: var(--info); border: 1px solid rgba(139, 158, 255, 0.35); }
.ws-rule-btn .r-ico.harden { background: var(--err-soft); color: var(--err); border: 1px solid var(--err-border); }
.ws-rule-btn .r-ico.relax { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-border); }
.ws-rule-btn .r-text { display: grid; gap: 2px; min-width: 0; }
.ws-rule-btn .r-text strong { font-weight: 600; color: var(--fg-strong); font-size: var(--fs-12); }
.ws-rule-btn .r-text small {
  color: var(--fg-mute);
  font-size: 10.5px;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Bottom pane */
.ws-bottom {
  grid-area: bottom;
  border-top: 1px solid var(--line);
  background: var(--bg-panel-2);
  display: flex; flex-direction: column;
  min-height: 0;
}
.ws-bottom-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  background: var(--bg-panel-2);
  min-height: 32px;
}
.ws-bottom-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--line);
  border-bottom: 2px solid transparent;
  color: var(--fg-mute);
  font-size: var(--fs-12);
  font-weight: 600;
  cursor: pointer;
  min-height: 32px;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ws-bottom-tab svg { width: 12px; height: 12px; opacity: 0.7; }
.ws-bottom-tab:hover { color: var(--fg); background: rgba(255,255,255,0.02); }
.ws-bottom-tab.is-active {
  color: var(--fg-strong);
  border-bottom-color: var(--acc);
}
.ws-bottom-tab.is-active svg { opacity: 1; color: var(--acc); }
.ws-bottom-body {
  flex: 1;
  overflow: auto;
  padding: 10px 14px;
  min-height: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: #cfd9e5;
}
.ws-bottom-panel { display: none; }
.ws-bottom-panel.is-active { display: block; }

.ws-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--fg-mute);
  font-size: var(--fs-13);
  display: grid;
  place-items: center;
  gap: 8px;
}
.ws-empty svg { width: 24px; height: 24px; opacity: 0.5; }

/* ==========================================================================
   Build detail
   ========================================================================== */
.build-hero {
  background: linear-gradient(180deg, var(--bg-panel), var(--bg-panel-2));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: grid; gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.build-hero .b-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.build-hero h1 { font-family: var(--font-mono); font-size: var(--fs-18); color: var(--fg-strong); }
.build-hero .b-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-subtle);
}
.build-hero .b-meta { display: grid; gap: 2px; }
.build-hero .b-meta .b-label {
  font-size: 11px;
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.build-hero .b-meta .b-val {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--fg);
  word-break: break-all;
}
.build-hero .b-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ==========================================================================
   Admin
   ========================================================================== */
.admin-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 10px 14px;
  background: var(--bg-panel);
  font-size: var(--fs-13);
}
.admin-row > div:first-child { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Plan card */
.plan-card {
  padding: var(--sp-5);
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  display: grid; gap: var(--sp-3);
  position: relative;
}
.plan-card.is-flagship {
  border-color: var(--acc-border);
  background:
    linear-gradient(180deg, rgba(79, 166, 255, 0.08), transparent 40%),
    var(--bg-panel);
}
.plan-card .plan-tag {
  position: absolute; top: 12px; right: 12px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--acc-soft); color: var(--acc); border: 1px solid var(--acc-border);
}
.plan-card h3 { font-size: var(--fs-16); }
.plan-card .price {
  display: flex; align-items: baseline; gap: 6px;
}
.plan-card .price .amount {
  font-size: var(--fs-28); font-weight: 700; color: var(--fg-strong); font-variant-numeric: tabular-nums;
}
.plan-card .price .per { color: var(--fg-mute); font-size: var(--fs-13); }
.plan-card ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 6px;
  font-size: var(--fs-13);
  color: var(--fg);
}
.plan-card ul li { display: flex; align-items: center; gap: 8px; }
.plan-card ul li::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  background: var(--ok-soft); border: 1px solid var(--ok-border);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%234fd6a0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat; background-position: center;
  flex-shrink: 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1280px) {
  .ws {
    grid-template-columns: 240px 1fr 300px;
  }
}
@media (max-width: 1180px) {
  .workflow-steps { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-preview .preview-body { grid-template-columns: 1fr; }
  .ws {
    grid-template-columns: 220px 1fr;
    grid-template-rows: 1fr 260px;
    grid-template-areas:
      "explorer center"
      "explorer bottom";
  }
  .ws-inspector { display: none; }
}
@media (max-width: 900px) {
  :root { --rail-w: 0px; }
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "main"
      "status";
  }
  .app-rail {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    width: 260px;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 50;
  }
  .app-rail.is-open { transform: translateX(0); box-shadow: 0 0 0 100vmax rgba(0,0,0,0.5); }
  .topbar-menu { display: inline-flex !important; }
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-showcase { display: none; }
  .feature-grid { grid-template-columns: 1fr; }
  .workflow-steps { grid-template-columns: 1fr; }
  .grid.two, .grid.three, .grid.four { grid-template-columns: 1fr; }
  .app-main { padding: var(--sp-4); }
  .ws {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "explorer"
      "center"
      "bottom";
    height: auto;
  }
  .ws-explorer { max-height: 240px; }
  .ws-center { min-height: 480px; }
  .ws-bottom { min-height: 220px; }
  .build-hero .b-top { flex-direction: column; }
}
.topbar-menu { display: none; }

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes gentle-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(79, 166, 255, 0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(79, 166, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(79, 166, 255, 0); }
}
@keyframes slide-in-bottom {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scan-line {
  0%   { transform: translateY(-100%); opacity: 0; }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}
@keyframes caret-blink {
  0%, 50%  { opacity: 1; }
  51%, 100% { opacity: 0; }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes grid-drift {
  from { background-position: 0 0; }
  to   { background-position: 60px 60px; }
}

/* ==========================================================================
   Landing page: immersive hero + interactive demo
   ========================================================================== */
.landing {
  position: relative;
  overflow: hidden;
}

/* ---- Animated hero backdrop ---- */
.landing-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.landing-bg .bg-grid {
  position: absolute;
  inset: -40px;
  background-image:
    linear-gradient(rgba(79, 166, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 166, 255, 0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(0, 0, 0, 0.9), transparent 70%);
  animation: grid-drift 20s linear infinite;
}
.landing-bg .bg-glow-a {
  position: absolute;
  top: -180px; left: 50%;
  width: 900px; height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(79, 166, 255, 0.22), transparent 60%);
  filter: blur(20px);
}
.landing-bg .bg-glow-b {
  position: absolute;
  top: 220px; right: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(139, 158, 255, 0.18), transparent 60%);
  filter: blur(30px);
}
.landing-bg .bg-glow-c {
  position: absolute;
  bottom: -200px; left: -100px;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(79, 214, 160, 0.1), transparent 65%);
  filter: blur(40px);
}

/* ---- Hero ---- */
.hero-v2 {
  position: relative;
  z-index: 2;
  padding: var(--sp-9) var(--sp-7) var(--sp-8);
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--sp-8);
  align-items: center;
}
.hero-copy {
  display: grid;
  gap: var(--sp-4);
  animation: fade-up 0.7s ease both;
}
.hero-copy .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(79, 166, 255, 0.16), rgba(79, 166, 255, 0.06));
  border: 1px solid var(--acc-border);
  color: #cbe3ff;
  font-size: var(--fs-12);
  font-weight: 500;
  width: fit-content;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 20px rgba(79, 166, 255, 0.12);
}
.hero-copy .eyebrow svg { color: var(--acc); }
.hero-copy .eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 8px var(--acc);
  animation: pulse-ring 2.4s ease-out infinite;
}
.hero-copy h1 {
  font-size: clamp(36px, 5.6vw, 60px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  background: linear-gradient(180deg, #f8faff 0%, #8faac7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-copy h1 .accent {
  display: inline-block;
  background: linear-gradient(180deg, #6cbeff 0%, #3e8ce2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
}
.hero-copy h1 .accent::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 4px;
  height: 10px;
  background: linear-gradient(90deg, transparent, rgba(79, 166, 255, 0.25), transparent);
  filter: blur(4px);
  z-index: -1;
}
.hero-copy .lede {
  font-size: var(--fs-18);
  color: var(--fg-mute);
  line-height: 1.55;
  max-width: 560px;
}
.hero-copy .cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.hero-copy .cta-row .btn-lg { padding: 13px 22px; min-height: 48px; font-size: var(--fs-14); font-weight: 600; }
.hero-copy .trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.hero-copy .trust-item {
  display: grid; gap: 2px;
}
.hero-copy .trust-item .v {
  font-family: var(--font-mono);
  font-size: var(--fs-18);
  font-weight: 700;
  color: var(--fg-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.hero-copy .trust-item .v .plus { color: var(--acc); margin-left: 1px; }
.hero-copy .trust-item .l {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--fg-dim);
  font-weight: 600;
}

/* ---- Hero showcase (right side) ---- */
.hero-showcase {
  position: relative;
  animation: fade-up 0.9s 0.1s ease both;
}
.hero-showcase .frame {
  position: relative;
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(79, 166, 255, 0.08), transparent 40%), var(--bg-panel);
  border: 1px solid var(--line);
  box-shadow:
    var(--sh-3),
    0 0 1px rgba(79, 166, 255, 0.2),
    0 40px 80px -30px rgba(79, 166, 255, 0.25);
  overflow: hidden;
}
.hero-showcase .frame::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(79, 166, 255, 0.4), rgba(139, 158, 255, 0.15) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.hero-showcase .frame-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(8, 11, 16, 0.5);
}
.hero-showcase .traffic { display: flex; gap: 6px; }
.hero-showcase .traffic span {
  width: 11px; height: 11px; border-radius: 50%;
  background: #2a3341;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.hero-showcase .traffic span:nth-child(1) { background: #ff6b6b; }
.hero-showcase .traffic span:nth-child(2) { background: #f5b94a; }
.hero-showcase .traffic span:nth-child(3) { background: #57d46b; }
.hero-showcase .addr {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-mute);
  padding: 4px 12px;
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  display: flex; align-items: center; gap: 6px;
}
.hero-showcase .addr::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 6px var(--ok);
}

/* Demo workspace (inside hero showcase) */
.demo-ws {
  display: grid;
  grid-template-columns: 130px 1fr 150px;
  grid-template-rows: 1fr 80px;
  grid-template-areas:
    "tree main right"
    "tree bottom bottom";
  height: 420px;
  background: var(--bg-shell);
  position: relative;
}
.demo-ws .demo-tree {
  grid-area: tree;
  border-right: 1px solid var(--line);
  background: var(--bg-panel-2);
  padding: 10px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  overflow: hidden;
}
.demo-ws .demo-tree .tree-head {
  padding: 0 12px 8px;
  font-size: 9.5px;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--font-sans);
  font-weight: 700;
}
.demo-ws .demo-pkg {
  padding: 3px 12px;
  color: var(--fg-mute);
  display: flex; align-items: center; gap: 5px;
}
.demo-ws .demo-pkg::before {
  content: "▸";
  font-size: 8px;
  color: var(--fg-dim);
}
.demo-ws .demo-pkg.open::before { content: "▾"; color: var(--acc); }
.demo-ws .demo-class {
  padding: 3px 12px 3px 26px;
  color: var(--fg);
  cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  border-left: 2px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.demo-ws .demo-class:hover { background: rgba(255, 255, 255, 0.03); }
.demo-ws .demo-class.is-active {
  background: var(--acc-soft);
  border-left-color: var(--acc);
  color: var(--fg-strong);
}
.demo-ws .demo-class .c-dot {
  width: 6px; height: 6px; border-radius: 2px;
  background: var(--acc);
  opacity: 0.7;
}
.demo-ws .demo-class.is-locked .c-dot { background: var(--ok); opacity: 1; }

.demo-ws .demo-main {
  grid-area: main;
  padding: 12px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  overflow: hidden;
}
.demo-ws .demo-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line);
}
.demo-ws .demo-tab {
  padding: 5px 10px;
  font-size: 11px;
  color: var(--fg-mute);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  min-height: 0;
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 0;
  font-weight: 500;
}
.demo-ws .demo-tab svg { width: 11px; height: 11px; opacity: 0.7; }
.demo-ws .demo-tab.is-active {
  color: var(--fg-strong);
  border-bottom-color: var(--acc);
}
.demo-ws .demo-tab.is-active svg { opacity: 1; color: var(--acc); }

.demo-ws .demo-view {
  position: relative;
  background: var(--bg-panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  overflow: hidden;
}
.demo-view .demo-view-panel { display: none; }
.demo-view .demo-view-panel.is-active { display: block; animation: fade-up 0.3s ease both; }

.demo-class-card {
  display: grid;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.demo-class-card .cls-name {
  font-size: 12px;
  color: var(--fg-strong);
  font-weight: 500;
  display: flex; align-items: center; gap: 6px;
}
.demo-class-card .cls-name::before {
  content: "class";
  font-size: 10px;
  color: #d67bff;
  margin-right: 4px;
}
.demo-class-card .cls-meta { color: var(--fg-mute); font-size: 10.5px; }
.demo-method-row {
  display: flex;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
}
.demo-method-row .m-name { color: #ffd580; }
.demo-method-row .m-desc { color: var(--fg-mute); }

/* Demo call graph */
.demo-graph { height: 100%; width: 100%; }
.demo-graph .node-g circle { transition: filter 0.25s ease, r 0.25s ease; }
.demo-graph .node-g.is-active circle { filter: drop-shadow(0 0 10px rgba(79, 166, 255, 0.85)); }
.demo-graph .edge { stroke: rgba(143, 161, 181, 0.25); stroke-width: 1.2; }
.demo-graph .edge.is-hot { stroke: var(--acc); stroke-width: 1.6; }

/* Demo CFG */
.demo-cfg { display: grid; gap: 6px; font-family: var(--font-mono); font-size: 11px; }
.demo-cfg-block {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.015);
  color: var(--fg);
  display: flex; justify-content: space-between;
  transition: all 0.25s ease;
}
.demo-cfg-block.is-active {
  border-color: var(--acc-border);
  background: var(--acc-soft);
  box-shadow: inset 0 0 0 1px var(--acc-border);
}
.demo-cfg-block .b-tag {
  color: var(--fg-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.demo-ws .demo-right {
  grid-area: right;
  border-left: 1px solid var(--line);
  background: var(--bg-panel-2);
  padding: 12px 12px 12px;
  overflow: hidden;
  display: grid;
  gap: 8px;
  align-content: start;
}
.demo-ws .demo-right h5 {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-mute);
  font-weight: 700;
  margin: 0;
}
.demo-lock {
  padding: 6px 8px;
  background: var(--ok-soft);
  border: 1px solid var(--ok-border);
  border-left-width: 2.5px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: #c6f2dc;
  word-break: break-all;
}
.demo-lock .sub {
  font-family: var(--font-sans);
  color: var(--fg-mute);
  font-size: 10px;
  margin-top: 2px;
  display: block;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.demo-lock.is-soft {
  background: var(--acc-soft);
  border-color: var(--acc-border);
  color: #c8e2ff;
}
.demo-rule {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 8px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 10.5px;
  color: var(--fg);
}
.demo-rule .r-chip {
  width: 20px; height: 20px;
  border-radius: 4px;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 10px;
  flex-shrink: 0;
}
.demo-rule .r-chip.lock { background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok-border); }
.demo-rule .r-chip.harden { background: var(--err-soft); color: var(--err); border: 1px solid var(--err-border); }

.demo-ws .demo-bottom {
  grid-area: bottom;
  border-top: 1px solid var(--line);
  background: var(--bg-panel-2);
  padding: 8px 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  overflow: hidden;
}
.demo-stat {
  padding: 6px 8px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  display: grid;
  gap: 1px;
}
.demo-stat .k {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  font-weight: 700;
}
.demo-stat .v {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--acc);
  font-weight: 600;
}

/* Tour highlight halo inside the demo */
.demo-highlight {
  position: absolute;
  pointer-events: none;
  border-radius: 10px;
  border: 2px solid var(--acc);
  box-shadow: 0 0 0 9999px rgba(5, 8, 12, 0.65), 0 0 30px rgba(79, 166, 255, 0.55);
  transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1), left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.35s cubic-bezier(0.4, 0, 0.2, 1), height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease;
  z-index: 50;
  opacity: 0;
}
.demo-highlight.is-on { opacity: 1; }

/* Tour popup */
.tour-popup {
  position: absolute;
  min-width: 260px;
  max-width: 320px;
  padding: 14px 16px 12px;
  background: linear-gradient(180deg, var(--bg-panel), var(--bg-panel-2));
  border: 1px solid var(--acc-border);
  border-radius: var(--r-md);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(79, 166, 255, 0.15), 0 0 32px rgba(79, 166, 255, 0.15);
  color: var(--fg);
  font-size: var(--fs-13);
  z-index: 60;
  animation: slide-in-bottom 0.22s ease both;
}
.tour-popup .pop-step {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--acc);
  font-weight: 700;
  margin-bottom: 6px;
}
.tour-popup .pop-step svg { width: 12px; height: 12px; }
.tour-popup h4 {
  font-size: var(--fs-15);
  margin-bottom: 5px;
  color: var(--fg-strong);
}
.tour-popup p {
  color: var(--fg-mute);
  font-size: var(--fs-13);
  line-height: 1.5;
  margin-bottom: 10px;
}
.tour-popup .pop-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tour-popup .pop-dots {
  display: inline-flex; gap: 5px;
}
.tour-popup .pop-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--line-strong);
  transition: background 0.15s ease, transform 0.15s ease;
}
.tour-popup .pop-dot.is-done { background: rgba(79, 166, 255, 0.5); }
.tour-popup .pop-dot.is-current {
  background: var(--acc);
  transform: scale(1.35);
  box-shadow: 0 0 8px var(--acc);
}
.tour-popup .pop-nav { display: flex; gap: 6px; }
.tour-popup .pop-nav .btn { min-height: 28px; padding: 4px 10px; font-size: var(--fs-12); }
.tour-popup::before {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  background: var(--bg-panel);
  border: 1px solid var(--acc-border);
  transform: rotate(45deg);
}
.tour-popup[data-arrow="top"]::before     { top: -6px; left: 30px; border-right: none; border-bottom: none; }
.tour-popup[data-arrow="bottom"]::before  { bottom: -6px; left: 30px; border-left: none; border-top: none; }
.tour-popup[data-arrow="left"]::before    { left: -6px; top: 28px; border-right: none; border-top: none; }
.tour-popup[data-arrow="right"]::before   { right: -6px; top: 28px; border-left: none; border-bottom: none; }

/* Tour CTA chip (start button inside showcase) */
.demo-cta-row {
  position: absolute;
  inset: auto 14px 14px 14px;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
  z-index: 5;
}
.demo-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  background: rgba(13, 18, 26, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: var(--fs-12);
  color: var(--fg);
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
  min-height: 0;
  font-weight: 500;
}
.demo-chip:hover {
  border-color: var(--acc-border);
  background: rgba(20, 28, 40, 0.9);
  color: var(--fg-strong);
}
.demo-chip.is-primary {
  background: linear-gradient(180deg, rgba(79, 166, 255, 0.25), rgba(79, 166, 255, 0.1));
  border-color: var(--acc-border);
  color: #cbe3ff;
  font-weight: 600;
  animation: pulse-ring 2.6s ease-out infinite;
}
.demo-chip svg { width: 12px; height: 12px; color: var(--acc); }

/* ---- Live stats strip ---- */
.trust-strip {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-7);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.trust-strip .t-cell {
  padding: 16px 22px;
  background: var(--bg-panel-2);
  display: grid;
  gap: 2px;
}
.trust-strip .t-cell .t-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-dim);
}
.trust-strip .t-cell .t-val {
  font-family: var(--font-mono);
  font-size: var(--fs-16);
  color: var(--fg-strong);
  display: flex; align-items: center; gap: 6px;
}
.trust-strip .t-cell .t-val svg { width: 14px; height: 14px; color: var(--acc); }

/* ---- Ecosystem chip row ---- */
.ecosystem-section {
  position: relative;
  z-index: 2;
  padding: var(--sp-8) var(--sp-7);
  max-width: 1240px;
  margin: 0 auto;
  text-align: center;
}
.ecosystem-section h3 {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-mute);
  margin-bottom: 14px;
}
.ecosystem-grid {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.eco-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--fg);
  font-weight: 500;
  font-size: var(--fs-13);
  transition: border-color 0.15s ease, transform 0.1s ease, background 0.15s ease;
}
.eco-chip:hover {
  border-color: var(--acc-border);
  transform: translateY(-1px);
  background: var(--bg-panel-hover);
  color: var(--fg-strong);
}
.eco-chip svg {
  width: 14px; height: 14px;
  color: var(--acc);
}

/* ---- Feature grid v2 ---- */
.feature-grid-v2 {
  position: relative;
  z-index: 2;
  padding: var(--sp-8) var(--sp-7) var(--sp-9);
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.feature-v2 {
  padding: var(--sp-5);
  background: linear-gradient(180deg, var(--bg-panel), rgba(18, 24, 35, 0.85));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.15s ease;
}
.feature-v2:hover {
  border-color: var(--acc-border);
  transform: translateY(-2px);
}
.feature-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(400px 200px at 0% 0%, rgba(79, 166, 255, 0.08), transparent 60%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.feature-v2:hover::before { opacity: 1; }
.feature-v2 .feat-icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(79, 166, 255, 0.22), rgba(79, 166, 255, 0.04));
  border: 1px solid rgba(79, 166, 255, 0.32);
  display: grid; place-items: center;
  color: var(--acc);
  margin-bottom: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 16px rgba(79, 166, 255, 0.12);
}
.feature-v2 h3 {
  font-size: var(--fs-16);
  margin-bottom: 6px;
  color: var(--fg-strong);
}
.feature-v2 p {
  color: var(--fg-mute);
  font-size: var(--fs-13);
  line-height: 1.6;
}
.feature-v2 .feat-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  font-size: 11px;
  color: var(--acc);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.feature-v2 .feat-tag svg { width: 11px; height: 11px; }

/* Workflow v2 */
.workflow-v2 {
  position: relative;
  z-index: 2;
  padding: var(--sp-8) var(--sp-7) var(--sp-9);
  max-width: 1280px;
  margin: 0 auto;
}
.workflow-v2 .wf-head {
  text-align: center;
  margin-bottom: var(--sp-7);
  display: grid; gap: 8px;
  justify-items: center;
}
.workflow-v2 .wf-head h2 {
  font-size: clamp(28px, 3.8vw, 42px);
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #f5f9ff, #9bb5d0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.workflow-v2 .wf-head p {
  color: var(--fg-mute);
  max-width: 640px;
}
.workflow-v2 .wf-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  position: relative;
}
.workflow-v2 .wf-steps::before {
  content: "";
  position: absolute;
  top: 32px;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--acc-border), transparent);
  z-index: 0;
}
.wf-step {
  position: relative;
  padding: var(--sp-5);
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  z-index: 1;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.wf-step:hover { border-color: var(--acc-border); transform: translateY(-1px); }
.wf-step .wf-num {
  position: absolute; top: -18px; left: var(--sp-5);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--bg-panel), var(--bg-panel-2));
  border: 1px solid var(--acc-border);
  display: grid; place-items: center;
  color: var(--acc);
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  box-shadow: 0 0 0 4px var(--bg-body), 0 0 20px rgba(79, 166, 255, 0.25);
}
.wf-step h4 { margin-top: 14px; margin-bottom: 6px; font-size: var(--fs-15); }
.wf-step p { color: var(--fg-mute); font-size: var(--fs-13); line-height: 1.55; }

/* Final CTA */
.cta-band {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto var(--sp-8);
  padding: var(--sp-8) var(--sp-7);
  text-align: center;
  background:
    radial-gradient(800px 300px at 50% 0%, rgba(79, 166, 255, 0.18), transparent 70%),
    linear-gradient(180deg, var(--bg-panel), var(--bg-panel-2));
  border: 1px solid var(--acc-border);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(79, 166, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 166, 255, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.7), transparent 70%);
  pointer-events: none;
}
.cta-band h2 {
  font-size: clamp(26px, 3.6vw, 38px);
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #f5f9ff, #9bb5d0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 10px;
}
.cta-band p {
  color: var(--fg-mute);
  font-size: var(--fs-15);
  max-width: 560px;
  margin: 0 auto var(--sp-5);
}
.cta-band .cta-actions { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

@media (max-width: 1040px) {
  .hero-v2 { grid-template-columns: 1fr; gap: var(--sp-6); }
  .hero-showcase .frame { max-width: 680px; margin: 0 auto; }
  .workflow-v2 .wf-steps { grid-template-columns: repeat(2, 1fr); }
  .workflow-v2 .wf-steps::before { display: none; }
  .feature-grid-v2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .hero-v2 { padding: var(--sp-7) var(--sp-4) var(--sp-6); }
  .demo-ws {
    grid-template-columns: 110px 1fr;
    grid-template-rows: 1fr 1fr 70px;
    grid-template-areas:
      "tree main"
      "tree right"
      "tree bottom";
    height: 520px;
  }
  .demo-ws .demo-right { border-left: none; border-top: 1px solid var(--line); }
  .demo-ws .demo-bottom { grid-template-columns: repeat(2, 1fr); }
  .feature-grid-v2 { grid-template-columns: 1fr; }
  .workflow-v2 .wf-steps { grid-template-columns: 1fr; }
  .trust-strip { grid-template-columns: 1fr 1fr; }
}