/* =============================================================
   TronCode — 完全对标 cursor.com 设计系统
   ============================================================= */

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-size-adjust:100%; }

/* ── DESIGN TOKENS (light = default) ── */
:root {
  /* backgrounds */
  --bg:           #f7f7f4;
  --fg:           #26251e;

  /* fg tints */
  --fg-92:        rgba(38,37,30,.92);
  --fg-75:        rgba(38,37,30,.75);
  --fg-60:        rgba(38,37,30,.60);
  --fg-55:        rgba(38,37,30,.55);
  --fg-40:        rgba(38,37,30,.40);
  --fg-20:        rgba(38,37,30,.20);
  --fg-10:        rgba(38,37,30,.10);
  --fg-07:        rgba(38,37,30,.07);
  --fg-05:        rgba(38,37,30,.05);
  --fg-025:       rgba(38,37,30,.025);

  /* card layers */
  --card:         #f2f1ed;
  --card-01:      #f0efeb;
  --card-02:      #ebeae5;
  --card-03:      #e6e5e0;
  --card-04:      #e1e0db;
  --card-warm:    #f3ede6;

  /* brand accent */
  --accent:       #f54e00;

  /* border helpers */
  --border-01:    var(--fg-025);
  --border-02:    var(--fg-10);
  --border-03:    var(--fg-60);

  /* buttons */
  --btn-bg:       var(--fg);
  --btn-fg:       var(--bg);
  --btn-hover:    #3b3a33;

  /* type scale (mirrors cursor) */
  --text-2xl:     4.5rem;    /* hero */
  --text-xl:      3.25rem;
  --text-lg:      2.25rem;
  --text-md-lg:   1.625rem;
  --text-md:      1.375rem;
  --text-md-sm:   1.125rem;
  --text-base:    1rem;
  --text-sm:      .875rem;
  --text-xs:      .75rem;

  /* tracking */
  --track-2xl:    -.03em;
  --track-xl:     -.025em;
  --track-lg:     -.02em;
  --track-md-lg:  -.0125em;
  --track-md:     -.005em;
  --track-base:   .005em;
  --track-sm:     .01em;
  --track-wide:   .08em;

  /* leading */
  --lead-tight:   1.1;
  --lead-2xsnug:  1.15;
  --lead-xsnug:   1.2;
  --lead-snug+:   1.3;
  --lead-cozy:    1.4;
  --lead-normal:  1.5;
  --lead-relax:   1.625;

  /* radius */
  --r-pill: 9999px;
  --r-card: 4px;
  --r-btn:  9999px;

  /* layout */
  --header-h:   56px;
  --container:  1140px;
  --g:          calc(10rem/16);   /* 0.625rem grid unit */

  /* animation */
  --dur:        .14s;
  --ease-spring: cubic-bezier(.25,1,.5,1);

  --font-sans:  system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --font-mono:  ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}

/* Dark theme */
[data-theme="dark"] {
  --bg:      #14120b;
  --fg:      #edecec;
  --fg-92:   rgba(237,236,236,.92);
  --fg-75:   rgba(237,236,236,.75);
  --fg-60:   rgba(237,236,236,.60);
  --fg-55:   rgba(237,236,236,.55);
  --fg-40:   rgba(237,236,236,.40);
  --fg-20:   rgba(237,236,236,.20);
  --fg-10:   rgba(237,236,236,.10);
  --fg-07:   rgba(237,236,236,.07);
  --fg-05:   rgba(237,236,236,.05);
  --fg-025:  rgba(237,236,236,.025);
  --card:    #1b1913;
  --card-01: #1d1b15;
  --card-02: #201e18;
  --card-03: #26241e;
  --card-04: #2b2923;
  --btn-hover: #d7d6d5;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  line-height: var(--lead-normal);
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
img { max-width:100%; height:auto; display:block; }

/* ── HEADER ── */
.site-header {
  position: fixed; top:0; left:0; right:0; z-index:100;
  height: var(--header-h);
  background: var(--bg);
  border-bottom: 1px solid var(--border-01);
}

.header-grid {
  max-width: var(--container);
  margin: 0 auto;
  height: 100%;
  padding: 0 calc(var(--g)*2);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: calc(var(--g)*2);
}

/* Header left group (logo + product tabs) */
.header-left { display:flex; align-items:center; gap:1rem; }

/* Logo */
.header-logo { display:flex; align-items:center; flex-shrink:0; }
.header-logo img { height:24px; width:auto; max-width:none; }

/* Dark mode: header nav text */
[data-theme="dark"] .nav-link,
[data-theme="dark"] .nav-btn { color: rgba(255,255,255,.6); }
[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-btn:hover { color: #fff; }
[data-theme="dark"] .nav-toggle span { background: #fff; }

/* Center nav */
.header-nav { display:flex; justify-content:center; }
.nav-list { display:flex; align-items:center; list-style:none; gap:0; }

.nav-link, .nav-btn {
  display: inline-flex; align-items: center; gap: 3px;
  padding: calc(var(--g)*.5) calc(var(--g)*1.5);
  font-size: var(--text-sm); font-weight: 400;
  color: var(--fg-75);
  background: transparent; border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer; font-family: inherit;
  letter-spacing: var(--track-sm);
  line-height: var(--lead-normal);
  white-space: nowrap;
  transition: color var(--dur) var(--ease-spring),
              background var(--dur) var(--ease-spring);
  text-decoration: none;
}
.nav-link:hover, .nav-btn:hover {
  color: var(--accent); background: transparent;
}

/* Caret */
.nav-caret {
  display: inline-flex; align-items: center;
  font-size: .7rem; opacity: .6;
  transition: transform var(--dur) var(--ease-spring);
}
.nav-item:hover .nav-caret { transform: rotate(180deg); }

/* Dropdown */
.nav-item { position: relative; }
.nav-subnav {
  opacity: 0; visibility: hidden;
  transform: translateY(-.4rem);
  transition: opacity var(--dur) var(--ease-spring),
              transform var(--dur) var(--ease-spring),
              visibility 0s linear var(--dur);
  position: absolute; top: calc(100% + calc(var(--g)*.5));
  left: 50%; translate: -50% 0;
  background: var(--bg); border-radius: var(--r-card);
  padding: 4px;
  min-width: 180px;
  z-index: 200;
  /* card border via box-shadow */
  box-shadow: 0 0 0 1px var(--border-01), 0 4px 16px rgba(0,0,0,.06);
}
.nav-item:hover .nav-subnav {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.nav-subnav::before {
  content:''; position:absolute; top:-8px; left:0; right:0; height:8px;
}
.nav-subnav a {
  display:block; padding: .45rem .75rem;
  font-size: var(--text-sm); color: var(--fg-75);
  border-radius: calc(var(--r-card) - 1px);
  letter-spacing: var(--track-sm);
  transition: background var(--dur), color var(--dur);
}
.nav-subnav a:hover { background: var(--fg-05); color: var(--accent); }

/* Right side */
.header-right { display:flex; align-items:center; gap:.625rem; flex-shrink:0; }

.lang-sw { display:flex; align-items:center; gap:.25rem; }
.lang-sw a {
  font-size: var(--text-xs); color: var(--fg-40);
  padding: 2px 4px; border-radius: 4px;
  letter-spacing: var(--track-sm);
  transition: color var(--dur);
}
.lang-sw a.active, .lang-sw a:hover { color: var(--fg); }
.lang-sep { font-size: var(--text-xs); color: var(--fg-20); }

/* ── Theme switcher ── */
.theme-switcher { position: relative; }
.theme-btn {
  height: 28px;
  display: flex; align-items: center; gap: 5px;
  background: transparent; border: none;
  color: var(--fg-40); cursor: pointer;
  border-radius: var(--r-pill);
  transition: color var(--dur), background var(--dur);
  padding: 4px 8px;
  font-size: var(--text-xs);
  font-family: inherit;
  letter-spacing: var(--track-sm);
}
.theme-btn:hover { color: var(--fg-75); background: var(--fg-05); }
.theme-btn svg { flex-shrink: 0; }
.theme-icon { display: none; }
/* Show the correct icon for current mode */
.theme-btn[data-active="system"] .theme-icon-system,
.theme-btn[data-active="light"] .theme-icon-sun,
.theme-btn[data-active="dark"] .theme-icon-moon { display: block; }
.theme-label { white-space: nowrap; }

.theme-dropdown {
  position: absolute; bottom: calc(100% + 6px); right: 0;
  min-width: 155px;
  background: var(--bg);
  border: 1px solid var(--border-02);
  border-radius: var(--r-card);
  padding: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  opacity: 0; visibility: hidden;
  transform: translateY(4px);
  transition: opacity .15s, transform .15s, visibility 0s linear .15s;
  z-index: 200;
}
.theme-dropdown.open {
  opacity: 1; visibility: visible; transform: none;
  transition-delay: 0s;
}
.theme-option {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 6px 10px;
  font-size: var(--text-xs); font-family: inherit;
  color: var(--fg-60);
  background: transparent; border: none;
  border-radius: calc(var(--r-card) - 1px);
  cursor: pointer;
  transition: background var(--dur), color var(--dur);
  letter-spacing: var(--track-sm);
}
.theme-option:hover { background: var(--fg-05); color: var(--fg); }
.theme-option svg { flex-shrink: 0; color: var(--fg-40); }
.theme-check {
  margin-left: auto; font-size: 11px;
  color: var(--accent); font-weight: 600;
  display: none;
}

.footer-bottom-right {
  display: flex; align-items: center; gap: 1rem;
}

/* Primary button (pill) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: var(--r-pill);
  font-size: var(--text-base); font-weight: 400; font-family: inherit;
  padding: .89em 1.45em .91em;
  line-height: 1; cursor: pointer;
  transition: background var(--dur), border-color var(--dur), color var(--dur);
  text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); }

.btn--sm {
  font-size: var(--text-sm);
  padding: .45em .8em .46em;
}
.btn--xs {
  font-size: var(--text-xs);
  padding: .15em .5em;
}
.btn--ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--border-02);
}
.btn--ghost:hover { background: var(--card); border-color: var(--border-02); }

/* Mobile nav toggle */
.nav-toggle {
  display: none; flex-direction: column; gap: 4px;
  cursor: pointer; padding: 4px; background:none; border:none;
}
.nav-toggle span { width:20px; height:1.5px; background:var(--fg); border-radius:1px; transition:all .2s; }

/* ── HERO ── */
.hero {
  padding-top: calc(var(--header-h) + 5.5rem);
  padding-bottom: 1.5rem;
  text-align: center;
}
.hero-inner { max-width:780px; margin:0 auto; padding:0 calc(var(--g)*2); }

.hero-title {
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: var(--lead-tight);
  letter-spacing: var(--track-2xl);
  color: var(--fg);
  margin-bottom: 1.25rem;
}
@media (max-width:700px) {
  .hero-title { font-size: clamp(2.2rem, 10vw, 3.6rem); }
}

.hero-sub {
  font-size: var(--text-md-sm);
  line-height: var(--lead-cozy);
  letter-spacing: var(--track-md);
  color: var(--fg-55);
  max-width: 480px; margin: 0 auto 2.25rem;
}

.hero-actions {
  display: flex; align-items: center; justify-content: center;
  gap: .75rem; flex-wrap: wrap; margin-bottom: 3.5rem;
}


/* Hero IDE demo */
.hero-media {
  max-width: 1100px; margin: 0 auto; padding: 0 calc(var(--g)*2);
}

.ide-demo {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #1e1e1e;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 32px 80px rgba(0,0,0,.35);
  font-family: var(--font-mono);
}

/* ── Titlebar (macOS) ── */
.ide-titlebar {
  display: flex; align-items: center;
  height: 38px; padding: 0 12px;
  background: #323233;
  border-bottom: 1px solid rgba(255,255,255,.08);
  user-select: none;
  -webkit-app-region: drag;
}
.ide-dots { display: flex; gap: 8px; margin-right: 12px; }
.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot-red    { background: #ff5f57; }
.dot-yellow { background: #febc2e; }
.dot-green  { background: #28c840; }
.ide-title-text {
  flex: 1; text-align: center;
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.5);
  font-family: var(--font-sans);
}
.ide-titlebar-spacer { width: 60px; }

/* ── Body: 4-column (activity + sidebar + editor + chat) ── */
.ide-body {
  display: flex;
  height: 460px;
  font-size: 13px;
  line-height: 1.6;
}

/* ── Activity bar (far left icon strip) ── */
.ide-activitybar {
  width: 48px; flex-shrink: 0;
  background: #333333;
  border-right: 1px solid rgba(255,255,255,.06);
  display: flex; flex-direction: column;
  align-items: center;
  padding: 6px 0;
  justify-content: space-between;
}
.activity-icon {
  width: 48px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.4);
  cursor: pointer;
  position: relative;
  transition: color .12s;
}
.activity-icon:hover { color: rgba(255,255,255,.8); }
.activity-icon.active {
  color: #fff;
}
.activity-icon.active::before {
  content: '';
  position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 2px; background: #fff; border-radius: 0 2px 2px 0;
}
.activity-bottom {
  display: flex; flex-direction: column; align-items: center;
  margin-top: auto;
}

/* ── Sidebar: file explorer ── */
.ide-sidebar {
  width: 200px; flex-shrink: 0;
  background: #252526;
  border-right: 1px solid rgba(255,255,255,.06);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.ide-sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 6px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255,255,255,.45);
  font-family: var(--font-sans);
}
.sidebar-action {
  font-size: 14px; letter-spacing: 2px;
  color: rgba(255,255,255,.3);
  cursor: pointer;
}
.sidebar-action:hover { color: rgba(255,255,255,.6); }
.ide-sidebar-section { flex: 1; }
.sidebar-section-title {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 12px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .04em;
  color: rgba(255,255,255,.65);
  cursor: pointer;
  font-family: var(--font-sans);
}
.sidebar-section-title svg {
  flex-shrink: 0;
  color: rgba(255,255,255,.45);
}
.ide-tree { padding: 0 0 8px; }

.tree-folder {
  display: flex; align-items: center; gap: 4px;
  padding: 2px 8px 2px 16px;
  height: 22px;
  color: rgba(255,255,255,.75);
  cursor: pointer;
  transition: background .1s;
  font-size: 13px;
}
.tree-folder:hover { background: rgba(255,255,255,.05); }
.tree-folder.open { color: rgba(255,255,255,.85); }
.tree-icon {
  flex-shrink: 0;
  width: 16px; height: 16px;
  margin-right: 1px;
}

.tree-indent { padding-left: 12px; }

.tree-file {
  display: flex; align-items: center; gap: 4px;
  padding: 2px 8px 2px 16px;
  height: 22px;
  color: rgba(255,255,255,.55);
  cursor: pointer;
  transition: background .1s, color .1s;
  font-size: 13px;
}
.tree-file:hover { background: rgba(255,255,255,.05); color: rgba(255,255,255,.8); }
.tree-file.active {
  background: rgba(255,255,255,.08);
  color: #fff;
}

/* ── Center: code editor ── */
.ide-editor {
  flex: 1; display: flex; flex-direction: column;
  min-width: 0;
  background: #1e1e1e;
}
.ide-editor-tabs {
  display: flex;
  background: #252526;
  border-bottom: 1px solid rgba(255,255,255,.06);
  height: 35px;
}
.editor-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 0 14px;
  font-size: 13px;
  color: rgba(255,255,255,.4);
  border-right: 1px solid rgba(255,255,255,.05);
  cursor: pointer;
  transition: color .12s;
  white-space: nowrap;
  font-family: var(--font-sans);
}
.editor-tab:hover { color: rgba(255,255,255,.65); }
.editor-tab.active {
  color: #fff;
  background: #1e1e1e;
  border-bottom: 1px solid var(--accent);
  margin-bottom: -1px;
}
.tab-icon {
  flex-shrink: 0;
  width: 14px; height: 14px;
}

/* Breadcrumbs */
.ide-breadcrumbs {
  display: flex; align-items: center; gap: 2px;
  padding: 4px 16px;
  font-size: 12px;
  color: rgba(255,255,255,.4);
  background: #1e1e1e;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-family: var(--font-sans);
}
.bc-sep { margin: 0 2px; opacity: .4; }

/* Code area */
.ide-code {
  flex: 1; padding: 8px 0;
  font-size: 13px;
  line-height: 1.65;
  overflow: auto;
}
.code-line {
  display: flex; padding: 0 16px;
  white-space: pre;
  height: 21px;
  align-items: center;
}
.code-line:hover { background: rgba(255,255,255,.02); }

.ln {
  display: inline-block; width: 40px;
  text-align: right; margin-right: 20px;
  color: rgba(255,255,255,.2);
  user-select: none; flex-shrink: 0;
  font-size: 12px;
}

/* Syntax highlighting */
.kw   { color: #c586c0; }
.fn   { color: #dcdcaa; }
.str  { color: #ce9178; }
.tp   { color: #4ec9b0; }
.cm   { color: #6a9955; font-style: italic; }
.prop { color: #9cdcfe; }
.var  { color: #9cdcfe; }
.val  { color: #569cd6; }

/* AI-generated lines */
.code-ai {
  background: rgba(74,222,128,.05);
  border-left: 2px solid #4ade80;
}

/* ── Right: AI chat panel ── */
.ide-chat {
  width: 300px; flex-shrink: 0;
  background: #1e1e1e;
  border-left: 1px solid rgba(255,255,255,.06);
  display: flex; flex-direction: column;
}

.ide-chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px;
  height: 35px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.chat-model-select {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s;
}
.chat-model-select:hover { background: rgba(255,255,255,.06); }
.chat-model-name {
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.85);
  font-family: var(--font-sans);
}
.chat-model-caret {
  color: rgba(255,255,255,.35);
  flex-shrink: 0;
}
.chat-header-actions {
  display: flex; align-items: center; gap: 4px;
}
.chat-new-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  color: rgba(255,255,255,.4);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.chat-new-btn:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.7); }

.ide-chat-messages {
  flex: 1; padding: 12px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
}
.chat-msg {
  display: flex; gap: 8px; align-items: flex-start;
}
.chat-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.chat-avatar-user {
  background: rgba(147,197,253,.15);
  color: #93c5fd;
}
.chat-avatar-ai {
  background: linear-gradient(135deg, rgba(249,78,0,.2), rgba(249,78,0,.08));
  color: var(--accent);
}

.chat-bubble {
  font-size: 13px; line-height: 1.6;
  border-radius: 10px; padding: 8px 12px;
  max-width: 100%;
  font-family: var(--font-sans);
}
.chat-bubble-user {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
  border-top-left-radius: 2px;
}
.chat-bubble-ai {
  background: transparent;
  color: rgba(255,255,255,.7);
  padding: 4px 0;
  border-radius: 0;
}
.chat-bubble-ai code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: rgba(255,255,255,.08);
  padding: 1px 5px; border-radius: 3px;
  color: #86efac;
}
.chat-bubble-ai strong { color: rgba(255,255,255,.9); font-weight: 600; }
.chat-step {
  display: block;
  padding: 1px 0;
  color: rgba(255,255,255,.6);
}

/* AI content wrapper (bubble + changes card) */
.chat-ai-content {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 10px;
}

/* Changes card */
.chat-changes-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  overflow: hidden;
}
.chat-changes-header {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 10px;
  font-size: 12px; font-weight: 500;
  color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-family: var(--font-sans);
}
.chat-changes-header svg { flex-shrink: 0; color: rgba(255,255,255,.35); }
.chat-changes-count {
  margin-left: auto;
  font-size: 11px;
  color: rgba(255,255,255,.35);
}
.chat-changes-file {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 10px;
  font-size: 12px;
  color: rgba(255,255,255,.6);
  font-family: var(--font-sans);
}
.chat-changes-file svg { flex-shrink: 0; color: rgba(255,255,255,.3); }
.changes-filename {
  flex: 1;
  color: rgba(255,255,255,.7);
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.changes-lines {
  font-size: 11px; font-weight: 600;
  color: #4ade80;
  font-family: var(--font-mono);
}
.chat-changes-actions {
  display: flex; gap: 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.changes-action {
  flex: 1;
  text-align: center;
  padding: 5px 0;
  font-size: 11px; font-weight: 500;
  cursor: pointer;
  transition: background .12s;
  font-family: var(--font-sans);
}
.changes-accept {
  color: #4ade80;
  border-right: 1px solid rgba(255,255,255,.06);
}
.changes-accept:hover { background: rgba(74,222,128,.08); }
.changes-reject {
  color: rgba(255,255,255,.4);
}
.changes-reject:hover { background: rgba(255,255,255,.04); }

/* Chat input */
.ide-chat-input {
  padding: 8px 12px 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.chat-input-box {
  display: flex; flex-direction: column;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  transition: border-color .12s, background .12s;
  overflow: hidden;
}
.chat-input-box:hover {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
}
.chat-input-top {
  display: flex; align-items: center;
  padding: 10px 12px 4px;
}
.chat-input-hint {
  flex: 1;
  font-size: 13px;
  color: rgba(255,255,255,.3);
  font-family: var(--font-sans);
  line-height: 1.5;
  min-height: 20px;
}
.chat-input-attach {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  color: rgba(255,255,255,.25);
  cursor: pointer;
  border-radius: 5px;
  transition: color .12s, background .12s;
  flex-shrink: 0;
}
.chat-input-attach:hover {
  color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.06);
}
.chat-input-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px 8px;
}
.chat-input-tools {
  display: flex; align-items: center; gap: 2px;
}
.chat-tool-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 24px; padding: 0 7px;
  font-size: 12px; font-weight: 500;
  color: rgba(255,255,255,.35);
  border-radius: 5px;
  cursor: pointer;
  transition: color .12s, background .12s;
  font-family: var(--font-mono);
  letter-spacing: -.01em;
}
.chat-tool-btn:hover {
  color: rgba(255,255,255,.65);
  background: rgba(255,255,255,.06);
}
.chat-tool-model {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 500;
  gap: 3px;
  letter-spacing: 0;
}
.chat-tool-model svg { flex-shrink: 0; opacity: .5; }
.chat-input-send-wrap {
  display: flex; align-items: center; gap: 5px;
}
.chat-input-shortcut {
  font-size: 10px;
  color: rgba(255,255,255,.15);
  font-family: var(--font-mono);
  letter-spacing: -.02em;
}
.chat-input-send {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1);
  border: none; border-radius: 8px;
  color: rgba(255,255,255,.45);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.chat-input-send:hover {
  background: rgba(255,255,255,.18);
  color: rgba(255,255,255,.8);
}
.chat-input-send svg {
  flex-shrink: 0;
}

/* ── Status bar ── */
.ide-statusbar {
  display: flex; align-items: center; justify-content: space-between;
  height: 25px; padding: 0 10px;
  background: #323233;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: 12px;
  color: rgba(255,255,255,.45);
  font-family: var(--font-sans);
}
.status-left, .status-right {
  display: flex; align-items: center; gap: 0;
}
.status-item {
  display: flex; align-items: center; gap: 4px;
  padding: 0 8px;
  height: 25px;
  cursor: pointer;
  transition: background .1s;
  white-space: nowrap;
}
.status-item:hover { background: rgba(255,255,255,.06); }
.status-item svg { flex-shrink: 0; }

/* Dark theme overrides for demo (always dark) */
[data-theme="light"] .ide-demo,
[data-theme=""] .ide-demo {
  background: #1e1e1e;
}

/* Responsive */
@media(max-width:1000px){
  .ide-chat { display: none; }
  .ide-body { height: 380px; }
}
@media(max-width:700px){
  .ide-activitybar { display: none; }
  .ide-sidebar { display: none; }
  .ide-body { height: 320px; }
  .ide-code { font-size: 12px; }
  .code-line { padding: 0 8px; }
  .ide-breadcrumbs { display: none; }
}

/* ── TRUST ── */
.trust {
  padding: calc(var(--g)*4) calc(var(--g)*2);
  border-top: 1px solid var(--border-01);
  text-align: center;
}
.trust-label {
  font-size: var(--text-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--track-wide);
  color: var(--fg-40); margin-bottom: 1.5rem;
}
.trust-items { display:flex; flex-wrap:wrap; justify-content:center; gap:2.5rem; }
.trust-item { font-size: var(--text-sm); font-weight: 500; color: var(--fg-40); letter-spacing: .01em; }

/* ── SECTION BASE ── */
.section { padding: calc(var(--g)*8) calc(var(--g)*2); }
.section--sm { padding: calc(var(--g)*5) calc(var(--g)*2); }
.section--alt { background: var(--card); }
.section-divider { border-top: 1px solid var(--border-01); }

.wrap { max-width: var(--container); margin: 0 auto; }
.wrap--narrow { max-width: 700px; margin: 0 auto; }

.eyebrow {
  display: block;
  font-size: var(--text-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--track-wide);
  color: var(--accent); margin-bottom: .875rem;
}
.h2 {
  font-size: var(--text-lg); font-weight: 400;
  line-height: var(--lead-xsnug);
  letter-spacing: var(--track-lg);
  color: var(--fg); margin-bottom: .75rem;
}
.h3 {
  font-size: var(--text-md); font-weight: 400;
  line-height: var(--lead-snug+);
  letter-spacing: var(--track-md-lg);
  color: var(--fg); margin-bottom: .75rem;
}
.body-text {
  font-size: var(--text-sm); line-height: var(--lead-relax);
  letter-spacing: var(--track-sm); color: var(--fg-55);
}
.center { text-align: center; }
.center .body-text { max-width: 440px; margin-inline: auto; }

/* ── CARD COMPONENT ── */
.card {
  position: relative;
  background: var(--card);
  border-radius: var(--r-card);
  padding: calc(var(--g)*1.75);
}
.card::before {
  content:''; pointer-events:none;
  position:absolute; inset:0;
  border-radius: var(--r-card);
  border: 1px solid var(--border-01);
  z-index:1;
}

/* ── FEATURES GRID ── */
.features-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  border-radius: var(--r-card); overflow: hidden;
  box-shadow: 0 0 0 1px var(--border-01);
}
.feat-cell {
  background: var(--bg);
  padding: calc(var(--g)*2.5) calc(var(--g)*2);
  border-right: 1px solid var(--border-01);
  border-bottom: 1px solid var(--border-01);
  transition: background var(--dur);
}
.feat-cell:hover { background: var(--card-01); }
.feat-cell:nth-child(3n) { border-right: none; }
.feat-cell:nth-last-child(-n+3) { border-bottom: none; }

.feat-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin-bottom: 1.1rem;
}
.feat-name {
  font-size: var(--text-base); font-weight: 600;
  letter-spacing: var(--track-base); color: var(--fg);
  margin-bottom: .5rem;
}
.feat-desc {
  font-size: var(--text-sm); line-height: var(--lead-relax);
  letter-spacing: var(--track-sm); color: var(--fg-55);
}

/* ── SPLIT (2-col) ── */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: calc(var(--g)*6); align-items: center;
  max-width: var(--container); margin: 0 auto;
  padding: 0 calc(var(--g)*2);
}
.split.reverse .split-img { order: -1; }

.split-img { position: relative; }
.split-img img {
  width:100%; border-radius: var(--r-card);
  box-shadow: 0 4px 32px rgba(0,0,0,.07);
}
.split-img::before {
  content:''; pointer-events:none;
  position:absolute; inset:0;
  border-radius: var(--r-card);
  border: 1px solid var(--border-01); z-index:1;
}

/* ── MODES GRID ── */
.modes-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  box-shadow: 0 0 0 1px var(--border-01);
  border-radius: var(--r-card); overflow: hidden;
}
.mode-cell {
  background: var(--bg); padding: calc(var(--g)*2.5);
  border-right: 1px solid var(--border-01);
  border-bottom: 1px solid var(--border-01);
  transition: background var(--dur);
}
.mode-cell:nth-child(2n) { border-right: none; }
.mode-cell:nth-last-child(-n+2) { border-bottom: none; }
.mode-cell:hover { background: var(--card-01); }

.mode-icon { font-size:1.2rem; margin-bottom:.875rem; display:block; }
.mode-name { font-size: var(--text-sm); font-weight:600; color:var(--fg); margin-bottom:.35rem; letter-spacing:var(--track-base); }
.mode-desc { font-size: var(--text-sm); color:var(--fg-55); line-height:var(--lead-relax); letter-spacing:var(--track-sm); margin-bottom:.75rem; }
.mode-tags { display:flex; flex-wrap:wrap; gap:.3rem; }
.mode-tag {
  font-size: .68rem; font-weight:500; letter-spacing:.01em;
  padding:.12em .55em; border-radius: var(--r-pill);
  background: var(--fg-05); color: var(--fg-60);
  border: 1px solid var(--border-01);
}

/* ── DOWNLOAD ── */
.dl-hero { text-align:center; margin-bottom:calc(var(--g)*4); }
.dl-hero .body-text { max-width:420px; margin:.5rem auto 1.5rem; }

.platform-grid {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(340px,1fr));
  box-shadow: 0 0 0 1px var(--border-01);
  border-radius: var(--r-card); overflow: hidden;
}
.platform-card { background: var(--bg); }
.platform-head {
  display: flex; align-items: center; gap:.75rem;
  padding: calc(var(--g)*1.5);
  border-bottom: 1px solid var(--border-01);
}
.platform-head svg { color:var(--fg); flex-shrink:0; }
.plat-name { font-size:var(--text-sm); font-weight:600; color:var(--fg); letter-spacing:var(--track-base); }
.plat-req { font-size:var(--text-xs); color:var(--fg-40); margin-top:1px; letter-spacing:var(--track-sm); }

.dl-row {
  display:flex; align-items:center; justify-content:space-between;
  padding: calc(var(--g)*1.25) calc(var(--g)*1.5); gap:1rem;
  border-bottom: 1px solid var(--border-01);
}
.dl-row:last-child { border-bottom: none; }
.dl-row-title { font-size:var(--text-base); font-weight:500; color:var(--fg); letter-spacing:var(--track-base); }
.dl-row-desc { font-size:var(--text-sm); color:var(--fg-40); margin-top:1px; letter-spacing:var(--track-sm); }

.btn--dl {
  display: inline-flex; align-items: center; gap:5px;
  padding:.38em .9em;
  font-size:var(--text-xs); font-weight:500; font-family:inherit;
  color:var(--fg); background:var(--card);
  border: 1px solid var(--border-01);
  border-radius: var(--r-pill);
  cursor:pointer; white-space:nowrap;
  transition: background var(--dur), border-color var(--dur);
  text-decoration:none;
}
.btn--dl:hover { background: var(--card-02); }

/* Install guide */
.install-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  box-shadow:0 0 0 1px var(--border-01); border-radius:var(--r-card); overflow:hidden;
  margin-top:calc(var(--g)*3);
}
.install-cell { background:var(--bg); padding:calc(var(--g)*2); border-right:1px solid var(--border-01); }
.install-cell:last-child { border-right:none; }
.install-title { font-size:var(--text-sm); font-weight:600; color:var(--fg); display:flex; align-items:center; gap:.5rem; margin-bottom:.9rem; letter-spacing:var(--track-base); }
.install-steps { list-style:none; counter-reset:s; display:flex; flex-direction:column; gap:.5rem; }
.install-steps li { counter-increment:s; display:flex; align-items:flex-start; gap:.6rem; font-size:var(--text-sm); color:var(--fg-55); letter-spacing:var(--track-sm); }
.install-steps li::before { content:counter(s); display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--card); border:1px solid var(--border-01); font-size:.7rem; font-weight:600; color:var(--fg-60); flex-shrink:0; margin-top:1px; }

.sysreq-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  box-shadow:0 0 0 1px var(--border-01); border-radius:var(--r-card); overflow:hidden;
  margin-top:1rem;
}
.sysreq-cell { background:var(--card); padding:calc(var(--g)*1.75); border-right:1px solid var(--border-01); }
.sysreq-cell:last-child { border-right:none; }
.sysreq-cell h4 { font-size:var(--text-sm); font-weight:600; color:var(--fg); margin-bottom:.6rem; display:flex; align-items:center; gap:.4rem; letter-spacing:var(--track-base); }
.sysreq-cell ul { list-style:none; display:flex; flex-direction:column; gap:.3rem; }
.sysreq-cell li { font-size:var(--text-sm); color:var(--fg-55); padding-left:.875rem; position:relative; letter-spacing:var(--track-sm); }
.sysreq-cell li::before { content:'·'; position:absolute; left:0; color:var(--fg-40); }

/* ── DOCS GRID ── */
.docs-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  box-shadow:0 0 0 1px var(--border-01); border-radius:var(--r-card); overflow:hidden;
}
.doc-cell {
  background:var(--bg); padding:calc(var(--g)*2.5) calc(var(--g)*2);
  display:flex; flex-direction:column;
  border-right:1px solid var(--border-01);
  transition:background var(--dur);
}
.doc-cell:last-child { border-right:none; }
.doc-cell:hover { background:var(--card-01); }
.doc-icon { font-size:1.4rem; margin-bottom:1rem; }
.doc-name { font-size:var(--text-base); font-weight:600; color:var(--fg); margin-bottom:.4rem; letter-spacing:var(--track-base); }
.doc-desc { font-size:var(--text-sm); color:var(--fg-55); line-height:var(--lead-relax); letter-spacing:var(--track-sm); flex:1; margin-bottom:1rem; }
.doc-cta { font-size:var(--text-xs); font-weight:500; color:var(--accent); display:inline-flex; align-items:center; gap:3px; transition:gap var(--dur); letter-spacing:var(--track-sm); }
.doc-cell:hover .doc-cta { gap:6px; }

/* ── FAQ ── */
.faq-list {
  max-width:640px; margin:0 auto;
  box-shadow:0 0 0 1px var(--border-01); border-radius:var(--r-card); overflow:hidden;
}
.faq-item { border-bottom:1px solid var(--border-01); }
.faq-item:last-child { border-bottom:none; }
.faq-q {
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(var(--g)*1.5); gap:1rem; cursor:pointer;
  background:var(--bg); transition:background var(--dur);
}
.faq-q:hover { background:var(--card-01); }
.faq-q h3 { font-size:var(--text-base); font-weight:400; color:var(--fg); letter-spacing:var(--track-base); }
.faq-icon {
  width:20px; height:20px; border-radius:50%;
  border:1px solid var(--border-01);
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; color:var(--fg-60); flex-shrink:0;
  background: var(--card);
  transition:transform .25s var(--ease-spring);
}
.faq-item.open .faq-icon { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .28s ease; background:var(--bg); }
.faq-item.open .faq-a { max-height:200px; }
.faq-a p { padding: 0 calc(var(--g)*1.5) calc(var(--g)*1.5); font-size:var(--text-sm); color:var(--fg-55); line-height:var(--lead-relax); letter-spacing:var(--track-sm); }

/* ── FOOTER ── */
.footer { background:var(--bg); border-top:1px solid var(--border-01); padding:calc(var(--g)*5) calc(var(--g)*2) calc(var(--g)*3); }
.footer-inner { max-width:var(--container); margin:0 auto; }
.footer-top { display:grid; grid-template-columns:1.3fr repeat(4,1fr); gap:calc(var(--g)*2); margin-bottom:calc(var(--g)*4); }
.footer-logo img { height:20px; width:auto; margin-bottom:.75rem; }
.footer-tagline { font-size:var(--text-sm); color:var(--fg-40); line-height:1.6; letter-spacing:var(--track-sm); }
.footer-col-title { font-size:var(--text-sm); font-weight:600; text-transform:uppercase; letter-spacing:var(--track-wide); color:var(--fg); margin-bottom:.875rem; }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:.4rem; }
.footer-links a { font-size:var(--text-sm); color:var(--fg-55); letter-spacing:var(--track-sm); transition:color var(--dur); }
.footer-links a:hover { color:var(--fg); }
.footer-bottom { border-top:1px solid var(--border-01); padding-top:calc(var(--g)*2); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.footer-copy { font-size:var(--text-sm); color:var(--fg-40); letter-spacing:var(--track-sm); }
.footer-copy a { color:var(--fg-40); transition:color var(--dur); }
.footer-copy a:hover { color:var(--fg); }

/* ── ANIMATIONS ── */
@keyframes fadeSlideUp { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.reveal { opacity:0; transform:translateY(6px); transition:opacity .4s,transform .4s; }
.reveal.in { opacity:1; transform:none; }

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .header-nav{display:none}
  .nav-toggle{display:flex}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .feat-cell:nth-child(3n){border-right:1px solid var(--border-01)}
  .feat-cell:nth-child(2n){border-right:none}
  .docs-grid{grid-template-columns:1fr}
  .doc-cell{border-right:none;border-bottom:1px solid var(--border-01)}
  .doc-cell:last-child{border-bottom:none}
  .modes-grid{grid-template-columns:1fr}
  .mode-cell{border-right:none;border-bottom:1px solid var(--border-01)}
  .mode-cell:nth-child(2n){border-right:none}
  .mode-cell:last-child{border-bottom:none}
  .split{grid-template-columns:1fr;gap:calc(var(--g)*3)}
  .split.reverse .split-img{order:0}
  .footer-top{grid-template-columns:1fr 1fr}
}

@media(max-width:600px){
  .features-grid{grid-template-columns:1fr}
  .feat-cell{border-right:none}
  .feat-cell:nth-child(3n){border-right:none}
  .modes-grid{grid-template-columns:1fr}
  .mode-cell{border-right:none;border-bottom:1px solid var(--border-01)}
  .mode-cell:nth-child(2n){border-right:none}
  .mode-cell:nth-last-child(-n+2){border-bottom:1px solid var(--border-01)}
  .mode-cell:last-child{border-bottom:none}
  .footer-top{grid-template-columns:1fr}
  .section{padding:calc(var(--g)*5) calc(var(--g)*1.5)}
  .hero{padding-top:calc(var(--header-h)+3rem)}
  .hero-actions{flex-direction:column;align-items:center}
  .hero-title{font-size:clamp(2rem,9vw,3rem)}
}

/* =============================================================
   TRON CLI PAGE
   ============================================================= */

/* ── CLI Hero ── */
.cli-hero {
  padding-top: calc(var(--header-h) + 5rem);
  padding-bottom: 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
}
/* CLI page: dark header override only in dark mode */
[data-theme="dark"][data-page="tron-cli"] .site-header {
  background: #0c0b08;
  border-bottom-color: rgba(255,255,255,.06);
}
[data-theme="dark"][data-page="tron-cli"] .nav-link,
[data-theme="dark"][data-page="tron-cli"] .nav-btn {
  color: rgba(255,255,255,.55);
}
[data-theme="dark"][data-page="tron-cli"] .nav-link:hover,
[data-theme="dark"][data-page="tron-cli"] .nav-btn:hover {
  color: #fff;
}
[data-theme="dark"][data-page="tron-cli"] .nav-subnav {
  background: #1a1912;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 4px 16px rgba(0,0,0,.3);
}
[data-theme="dark"][data-page="tron-cli"] .nav-subnav a {
  color: rgba(255,255,255,.55);
}
[data-theme="dark"][data-page="tron-cli"] .nav-subnav a:hover {
  background: rgba(255,255,255,.06); color: #fff;
}
[data-theme="dark"][data-page="tron-cli"] .header-right .lang-sw a { color: rgba(255,255,255,.3); }
[data-theme="dark"][data-page="tron-cli"] .header-right .lang-sw a.active,
[data-theme="dark"][data-page="tron-cli"] .header-right .lang-sw a:hover { color: rgba(255,255,255,.8); }
[data-theme="dark"][data-page="tron-cli"] .header-right .lang-sep { color: rgba(255,255,255,.15); }
[data-theme="dark"][data-page="tron-cli"] .nav-toggle span { background: #fff; }

/* Dark mode hero overrides */
[data-theme="dark"] .cli-hero {
  background: #0c0b08;
  color: #fff;
}
.cli-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(245,78,0,.08), transparent);
  pointer-events: none;
}
[data-theme="dark"] .cli-hero::before {
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(245,78,0,.12), transparent);
}
.cli-hero-inner {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 calc(var(--g)*2);
}
.cli-hero-title {
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: var(--lead-tight);
  letter-spacing: var(--track-2xl);
  color: var(--fg);
  margin-bottom: 1.25rem;
}
@media (max-width:700px) {
  .cli-hero-title { font-size: clamp(2.2rem, 10vw, 3.6rem); }
}
.cli-hero-sub {
  font-size: var(--text-md-sm);
  line-height: var(--lead-cozy);
  letter-spacing: var(--track-md);
  color: var(--fg-55);
  max-width: 540px; margin: 0 auto 2.25rem;
}
.cli-hero-actions {
  display: flex; align-items: center; justify-content: center;
  gap: .75rem; flex-wrap: wrap; margin-bottom: 3rem;
}

/* Install command in hero */
.cli-hero-install { margin-bottom: 3rem; }
.cli-install-label {
  color: var(--fg-40);
  font-size: var(--text-xs);
  margin-bottom: .6rem;
  letter-spacing: var(--track-sm);
}
.cli-install-box {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--card);
  border: 1px solid var(--border-02);
  border-radius: 10px;
  padding: 10px 18px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg);
}
.cli-install-prompt { color: var(--fg-40); }
.cli-install-cmd { color: var(--fg-75); }
.cli-install-pipe { color: var(--fg-40); margin: 0 2px; }
.cli-install-bash { color: var(--fg-60); }
.cli-install-copy {
  background: none; border: none; cursor: pointer;
  color: var(--fg-40); padding: 2px 4px;
  border-radius: 4px; transition: color .15s;
  display: flex; align-items: center;
}
.cli-install-copy:hover { color: var(--fg-75); }
.cli-install-copy svg { width: 14px; height: 14px; }

/* ── TUI Demo ── */
.cli-demo-wrap {
  max-width: 860px; margin: 0 auto;
  border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 32px 80px rgba(0,0,0,.35);
  font-family: var(--font-mono);
}
[data-theme="light"] .cli-demo-wrap,
[data-theme=""] .cli-demo-wrap {
  box-shadow: 0 4px 32px rgba(0,0,0,.1), 0 32px 80px rgba(0,0,0,.08);
}
.cli-demo-titlebar {
  background: #323233;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 8px;
}
.cli-dot { width: 12px; height: 12px; border-radius: 50%; }
.cli-dot-red    { background: #ff5f57; }
.cli-dot-yellow { background: #febc2e; }
.cli-dot-green  { background: #28c840; }
.cli-demo-title {
  flex: 1; text-align: center;
  font-size: 12px; color: rgba(255,255,255,.25);
  margin-right: 36px;
}

.cli-demo-body {
  background: #141414;
  display: flex;
}
.cli-demo-main {
  flex: 1; padding: 1.25rem 1.5rem;
  font-size: 13px; line-height: 1.85;
  color: #d4d4d4; min-height: 240px; text-align: left;
}
.cli-demo-sidebar {
  width: 160px; flex-shrink: 0;
  border-left: 1px solid rgba(255,255,255,.06);
  padding: 1rem; font-size: 11px; color: #555;
}
.cds-title { color: #e8e8e8; font-size: 13px; font-weight: 500; margin-bottom: .875rem; }
.cds-label { color: #aaa; font-size: 11px; margin-bottom: 2px; }
.cds-val   { color: #666; font-size: 11px; line-height: 1.6; margin-bottom: .75rem; }

.dm-user  { color: #4fc3f7; font-size: 12px; font-weight: 600; margin-top: .5rem; }
.dm-ai    { color: var(--accent); font-size: 12px; font-weight: 600; }
.dm-body  { color: #d4d4d4; }
.dm-link  { color: #4fc3f7; }
.dm-bold  { color: #fff; font-weight: 600; }
.dm-code  { background: rgba(255,255,255,.08); padding: 1px 5px; border-radius: 3px; color: #e8c07d; }
.dm-tool  { color: #555; font-size: 12px; display: flex; gap: 6px; align-items: center; margin: 2px 0; }
.dm-check { color: #28c840; }
.dm-spin  { color: #4fc3f7; }

.cli-demo-status {
  background: #1e1e1e;
  border-top: 1px solid rgba(255,255,255,.05);
  padding: 5px 1.25rem;
  font-size: 12px; color: rgba(255,255,255,.45);
  display: flex; align-items: center; gap: 6px;
  text-align: left;
}
.cli-demo-input {
  background: #1a1a1a;
  border-top: 1px solid rgba(255,255,255,.04);
  padding: 8px 1.25rem;
  font-size: 13px; color: #555; text-align: left;
}
.cli-demo-footer {
  background: #111;
  border-top: 1px solid rgba(255,255,255,.05);
  padding: 4px 1.25rem;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: #555;
}
.cdf-left  { display: flex; gap: 1rem; }
.cdf-right { display: flex; align-items: center; gap: .75rem; }
.cdf-mode  { color: #e8e8e8; font-weight: 500; }
.cdf-model { color: #888; }
.cdf-path  { color: #555; }
.cdf-green { width: 7px; height: 7px; border-radius: 50%; background: #28c840; display: inline-block; margin-right: 3px; vertical-align: middle; }

.demo-cursor {
  display: inline-block; width: 8px; height: 14px;
  background: #e8e8e8; vertical-align: text-bottom;
  animation: blink2 1s step-end infinite;
}
@keyframes blink2 { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── OS Install Tabs ── */
.cli-os-tabs {
  display: inline-flex;
  background: var(--card);
  border-radius: 10px; padding: 4px; gap: 2px;
}
.cli-os-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 18px; border-radius: 7px;
  font-size: var(--text-sm); font-weight: 500;
  color: var(--fg-55); background: none;
  border: none; cursor: pointer;
  transition: all .15s; font-family: inherit;
}
.cli-os-tab.active {
  background: var(--bg); color: var(--fg);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.cli-os-tab:hover:not(.active) { color: var(--fg-75); }

.cli-os-panel { display: none; }
.cli-os-panel.active { display: block; }

.cli-install-cmd-block {
  max-width: 640px; margin: 0 auto;
  background: #0d0d14;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
}
.cli-install-cmd-bar {
  background: #1a1a2a;
  padding: 8px 14px;
  display: flex; align-items: center; gap: 8px;
}
.cli-install-cmd-label {
  flex: 1; text-align: center;
  font-size: 11px; color: rgba(255,255,255,.2);
  font-family: var(--font-mono);
}
.cli-install-cmd-body {
  padding: 1.25rem 1.5rem;
  display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
}
.cli-install-cmd-text {
  font-family: var(--font-mono);
  font-size: 14px; color: #e8e8f0;
  word-break: break-all; flex: 1;
}
.cli-install-cmd-text .prompt { color: #6b7280; margin-right: 6px; }
.cli-install-cmd-text .cmd-hl { color: #4fc3f7; }
.cli-install-cmd-text .pipe   { color: #6b7280; margin: 0 4px; }
.cli-install-cmd-text .bash-kw { color: #a8e6a3; }

.cli-install-copybtn {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.45); cursor: pointer;
  padding: 6px 12px; border-radius: 6px;
  font-size: var(--text-xs); font-family: inherit;
  transition: all .15s; flex-shrink: 0; white-space: nowrap;
}
.cli-install-copybtn:hover { background: rgba(255,255,255,.14); color: #fff; }
.cli-install-copybtn.copied { color: #a8e6a3; border-color: rgba(168,230,163,.3); }

.cli-install-note {
  margin-top: .875rem; font-size: var(--text-xs);
  color: var(--fg-40); text-align: center;
}
.cli-install-note a { color: var(--accent); }
.cli-install-note a:hover { text-decoration: underline; }

/* ── Workflow Steps ── */
.cli-steps-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  box-shadow: 0 0 0 1px var(--border-01);
  border-radius: var(--r-card); overflow: hidden;
}
.cli-step {
  background: var(--bg); padding: calc(var(--g)*2.5) calc(var(--g)*2);
  border-right: 1px solid var(--border-01);
}
.cli-step:nth-child(3n) { border-right: none; }
.cli-step-num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  color: var(--accent);
  background: rgba(245,78,0,.06);
  border: 1px solid rgba(245,78,0,.15);
  padding: 2px 8px; border-radius: 5px;
  margin-bottom: 1rem; letter-spacing: .05em;
}
.cli-step-title {
  font-size: var(--text-base); font-weight: 600;
  color: var(--fg); margin-bottom: .4rem;
  letter-spacing: var(--track-base);
}
.cli-step-desc {
  font-size: var(--text-sm); color: var(--fg-55);
  line-height: var(--lead-relax);
  letter-spacing: var(--track-sm); margin-bottom: 1rem;
}
.cli-step-code {
  background: var(--card);
  border: 1px solid var(--border-01);
  border-radius: 6px; padding: .75rem 1rem;
  font-family: var(--font-mono);
  font-size: 12px; color: var(--fg-75);
  line-height: 1.7;
}
.step-code-prompt::before { content: '$ '; color: var(--accent); }
.step-code-out { color: var(--fg-40); font-size: 11.5px; }

/* ── Comparison Table ── */
.cli-compare-wrap {
  max-width: 700px; margin: 0 auto;
  box-shadow: 0 0 0 1px var(--border-01);
  border-radius: var(--r-card); overflow: hidden;
}
.cli-compare-table {
  width: 100%; border-collapse: collapse;
  font-size: var(--text-sm);
}
.cli-compare-table th {
  padding: .875rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-02);
  font-size: var(--text-xs); font-weight: 600;
  color: var(--fg); letter-spacing: var(--track-sm);
  text-transform: uppercase;
}
.cli-compare-table th:not(:first-child) { text-align: center; }
.cli-compare-table td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border-01);
  color: var(--fg-60);
}
.cli-compare-table td:not(:first-child) { text-align: center; }
.cli-compare-table tr:last-child td { border-bottom: none; }
.col-highlight { background: var(--fg-025); }
.col-header-highlight { background: rgba(245,78,0,.04); }
.chk-yes { color: #16a34a; font-size: 16px; }
.chk-no  { color: var(--fg-20); font-size: 16px; }

/* ── Legal / text pages (terms, privacy, security) ── */
.legal-page {
  padding-top: calc(var(--header-h) + 4rem);
  padding-bottom: calc(var(--g)*6);
}
.legal-container {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 calc(var(--g)*2);
}
.legal-header {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-02);
}
.legal-header h1 {
  font-size: var(--text-xl);
  font-weight: 400;
  letter-spacing: var(--track-xl);
  color: var(--fg);
  margin-bottom: .5rem;
}
.legal-date {
  font-size: var(--text-sm);
  color: var(--fg-40);
}
.legal-intro {
  background: var(--card);
  border-left: 3px solid var(--accent);
  padding: 1.1rem 1.5rem;
  border-radius: 0 var(--r-card) var(--r-card) 0;
  margin-bottom: 2rem;
  font-size: var(--text-sm);
  color: var(--fg-55);
  line-height: var(--lead-relax);
}
.legal-body h2 {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--fg);
  margin: 2.5rem 0 1rem;
  border-bottom: 1px solid var(--border-01);
  padding-bottom: .5rem;
  letter-spacing: var(--track-md-lg);
}
.legal-body h3 {
  font-size: var(--text-md-sm);
  font-weight: 600;
  color: var(--fg-92);
  margin: 1.5rem 0 .75rem;
}
.legal-body p {
  font-size: var(--text-sm);
  color: var(--fg-55);
  line-height: var(--lead-relax);
  margin-bottom: 1rem;
}
.legal-body ol, .legal-body ul {
  font-size: var(--text-sm);
  color: var(--fg-55);
  line-height: var(--lead-relax);
  margin-bottom: 1rem;
  padding-left: 1.8rem;
}
.legal-body li { margin-bottom: .5rem; }
.legal-body a { color: var(--accent); }
.legal-body strong { color: var(--fg-92); font-weight: 600; }
.legal-body code {
  font-family: var(--font-mono);
  font-size: .9em;
  background: var(--card-02);
  padding: 1px 5px;
  border-radius: 3px;
}
.highlight-box {
  background: rgba(245,78,0,.04);
  border: 1px solid rgba(245,78,0,.12);
  border-radius: var(--r-card);
  padding: 1.1rem 1.5rem;
  margin: 1.5rem 0;
  font-size: var(--text-sm);
  color: var(--fg-60);
  line-height: var(--lead-relax);
}

/* ── Contact page ── */
.contact-hero {
  padding-top: calc(var(--header-h) + 5rem);
  padding-bottom: 2rem;
  text-align: center;
}
.contact-hero h1 {
  font-size: var(--text-xl);
  font-weight: 400;
  letter-spacing: var(--track-xl);
  color: var(--fg);
  margin-bottom: .75rem;
}
.contact-hero p {
  font-size: var(--text-md-sm);
  color: var(--fg-55);
  max-width: 540px;
  margin: 0 auto;
  line-height: var(--lead-relax);
}
.contact-form-wrap {
  max-width: 600px;
  margin: 2.5rem auto 0;
  padding: 0 calc(var(--g)*2) calc(var(--g)*6);
}
.type-selector {
  display: flex; gap: .75rem;
  margin-bottom: 1.5rem;
}
.type-option {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: .75rem;
  border: 1px solid var(--border-02);
  border-radius: var(--r-card);
  background: var(--bg);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--fg-55);
  font-family: inherit;
  transition: border-color var(--dur), background var(--dur), color var(--dur);
}
.type-option:hover { border-color: var(--fg-20); }
.type-option.active {
  border-color: var(--accent);
  background: rgba(245,78,0,.04);
  color: var(--fg);
}
.form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.form-group { margin-bottom: 1rem; }
.form-label {
  display: block;
  font-size: var(--text-sm); font-weight: 500;
  color: var(--fg-75); margin-bottom: .35rem;
}
.required { color: var(--accent); }
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: .6rem .85rem;
  border: 1px solid var(--border-02);
  border-radius: var(--r-card);
  background: var(--bg);
  color: var(--fg);
  font-size: var(--text-sm);
  font-family: inherit;
  transition: border-color var(--dur);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.form-textarea { min-height: 120px; resize: vertical; }
.form-submit {
  width: 100%;
  padding: .75rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: none;
  border-radius: var(--r-card);
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--dur);
}
.form-submit:hover { background: var(--btn-hover); }
.privacy-notice {
  margin-top: .75rem;
  font-size: var(--text-xs);
  color: var(--fg-40);
  line-height: var(--lead-relax);
}
.privacy-notice a { color: var(--accent); }
.form-message {
  padding: .6rem 1rem;
  border-radius: var(--r-card);
  font-size: var(--text-sm);
  margin-bottom: 1rem;
  display: none;
}
.form-message.success { display: block; background: rgba(74,222,128,.08); color: #16a34a; border: 1px solid rgba(74,222,128,.2); }
.form-message.error { display: block; background: rgba(239,68,68,.06); color: #dc2626; border: 1px solid rgba(239,68,68,.15); }
.hidden { display: none !important; }

@media(max-width:600px){
  .form-row { grid-template-columns: 1fr; }
}

/* ── Downloads page ── */
.dl-page-hero {
  padding-top: calc(var(--header-h) + 5rem);
  padding-bottom: 1rem;
  text-align: center;
}
.dl-product-header {
  display: flex; align-items: flex-start; gap: 1.25rem;
  margin-bottom: 2.5rem;
}
.dl-product-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--card);
  border-radius: 10px;
  color: var(--accent);
  flex-shrink: 0;
  border: 1px solid var(--border-01);
}
.dl-product-header .h2 { margin-bottom: 0; }
.dl-product-header .body-text { margin-top: .25rem; }
.dl-product-header .btn {
  margin-left: auto; flex-shrink: 0; align-self: center;
}
@media(max-width:700px){
  .dl-product-header { flex-direction: column; }
  .dl-product-header .btn { margin-left: 0; align-self: flex-start; }
}

/* ── CLI page responsive ── */
@media(max-width:900px){
  .cli-steps-grid { grid-template-columns: 1fr; }
  .cli-step { border-right: none; border-bottom: 1px solid var(--border-01); }
  .cli-step:last-child { border-bottom: none; }
  .cli-demo-sidebar { display: none; }
}
@media(max-width:600px){
  .cli-hero { padding-top: calc(var(--header-h) + 3rem); }
  .cli-hero-title { font-size: clamp(2rem,9vw,3rem); }
  .cli-hero-actions { flex-direction: column; align-items: center; }
  .cli-install-box { font-size: 11px; padding: 8px 12px; gap: 6px; }
  .cli-demo-wrap { border-radius: 6px; }
  .cli-demo-main { padding: 1rem; font-size: 12px; }
}

/* Mobile nav open */
.nav-open .header-nav{
  display:flex!important;
  position:fixed;top:var(--header-h);left:0;right:0;bottom:0;
  background:var(--bg);border-top:1px solid var(--border-01);
  flex-direction:column;justify-content:flex-start;padding:1rem;overflow-y:auto;z-index:99;
}
.nav-open .header-nav .nav-list{flex-direction:column;width:100%;gap:0}
.nav-open .header-nav .nav-link,.nav-open .header-nav .nav-btn{width:100%;padding:.85rem 1rem;font-size:var(--text-base);border-radius:var(--r-card)}


/* =====================================================================
     DOCS PAGES
     ===================================================================== */

/* ── Docs layout ── */
.docs-layout {
  display: flex;
  margin-top: var(--header-h);
  min-height: calc(100vh - var(--header-h));
}

/* ── Docs sidebar ── */
.docs-sidebar {
  width: 260px;
  flex-shrink: 0;
  position: fixed;
  top: var(--header-h);
  left: 0;
  bottom: 0;
  overflow-y: auto;
  background: var(--card-01);
  border-right: 1px solid var(--border-02);
  padding: 1.5rem 0;
}
.docs-sidebar::-webkit-scrollbar { width: 4px; }
.docs-sidebar::-webkit-scrollbar-track { background: transparent; }
.docs-sidebar::-webkit-scrollbar-thumb { background: var(--fg-20); border-radius: 2px; }

.docs-sidebar-section { margin-bottom: .25rem; }

.docs-sidebar-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-40);
  padding: .75rem 1.25rem .4rem;
}

.docs-sidebar-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 1.25rem;
  font-size: 13.5px;
  color: var(--fg-60);
  text-decoration: none;
  transition: all var(--dur) var(--ease-spring);
  position: relative;
}
.docs-sidebar-link:hover {
  color: var(--fg);
  background: var(--card-02);
}
.docs-sidebar-link.active {
  color: var(--accent);
  background: rgba(245,78,0,.06);
  font-weight: 500;
}
.docs-sidebar-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}

/* ── Docs main ── */
.docs-main {
  margin-left: 260px;
  margin-right: 220px;
  flex: 1;
  min-width: 0;
}

.docs-content {
  max-width: 780px;
  margin: 0 auto;
  padding: 3rem 2.5rem 6rem;
}

/* Breadcrumb */
.docs-breadcrumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 13px;
  color: var(--fg-40);
  margin-bottom: 2rem;
}
.docs-breadcrumb a {
  color: var(--fg-40);
  text-decoration: none;
  transition: color var(--dur);
}
.docs-breadcrumb a:hover { color: var(--accent); }
.docs-breadcrumb-sep { color: var(--fg-20); }

/* ── Docs content typography ── */
.docs-content h1 {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: var(--track-xl);
  color: var(--fg);
  margin-bottom: .75rem;
  line-height: var(--lead-tight);
}
.docs-content h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--fg);
  margin: 2.5rem 0 .875rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-02);
  letter-spacing: var(--track-lg);
  scroll-margin-top: 80px;
}
.docs-content h2:first-of-type { border-top: none; margin-top: 1.5rem; }
.docs-content h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--fg);
  margin: 1.75rem 0 .625rem;
  scroll-margin-top: 80px;
}
.docs-content h4 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--fg);
  margin: 1.25rem 0 .5rem;
  scroll-margin-top: 80px;
}
.docs-content p {
  color: var(--fg-75);
  margin-bottom: 1rem;
  line-height: var(--lead-relax);
}
.docs-content ul, .docs-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
  color: var(--fg-75);
}
.docs-content li {
  margin-bottom: .35rem;
  line-height: var(--lead-cozy);
}
.docs-content li strong { color: var(--fg); }
.docs-content a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur);
}
.docs-content a:hover { border-bottom-color: var(--accent); }
.docs-content strong { color: var(--fg); font-weight: 600; }

/* Inline code */
.docs-content code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--card-02);
  color: var(--accent);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-02);
}

/* Code blocks */
.docs-content pre {
  background: #1e1e2e;
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  margin: 1rem 0;
  border: 1px solid rgba(255,255,255,.06);
}
.docs-content pre code {
  background: none;
  color: #cdd6f4;
  border: none;
  font-size: 13.5px;
  padding: 0;
  line-height: 1.7;
}

/* Tables */
.docs-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 14px;
}
.docs-content th {
  padding: .75rem 1rem;
  text-align: left;
  background: var(--card-01);
  border: 1px solid var(--border-02);
  font-weight: 600;
  color: var(--fg);
  font-size: 13px;
}
.docs-content td {
  padding: .75rem 1rem;
  color: var(--fg-75);
  border: 1px solid var(--border-02);
  vertical-align: top;
}
.docs-content tr:nth-child(even) td { background: var(--card-01); }

/* ── Docs TOC ── */
.docs-toc {
  width: 220px;
  flex-shrink: 0;
  position: fixed;
  top: var(--header-h);
  right: 0;
  bottom: 0;
  overflow-y: auto;
  padding: 2rem 1.25rem 2rem .5rem;
}
.docs-toc-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-40);
  margin-bottom: .75rem;
}
.docs-toc-list { list-style: none; }
.docs-toc-item { margin-bottom: .1rem; }
.docs-toc-link {
  display: block;
  font-size: 13px;
  color: var(--fg-40);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all var(--dur);
  border-left: 2px solid transparent;
}
.docs-toc-link:hover { color: var(--fg); background: var(--card-01); }
.docs-toc-link.active { color: var(--accent); border-left-color: var(--accent); background: rgba(245,78,0,.06); }
.docs-toc-link-h3 { padding-left: 1.25rem; font-size: 12.5px; }

/* ── Docs callout ── */
.docs-callout {
  display: flex;
  gap: .75rem;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  margin: 1.5rem 0;
  border-left: 3px solid;
}
.docs-callout-warning {
  background: #fff8e6;
  border-color: #f59e0b;
}
.docs-callout-warning .docs-callout-text { color: #92400e; }
.docs-callout-info {
  background: #eff6ff;
  border-color: #3b82f6;
}
.docs-callout-info .docs-callout-text { color: #1d4ed8; }
.docs-callout-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.docs-callout-body { flex: 1; }
.docs-callout-text {
  font-size: 14px;
  line-height: var(--lead-cozy);
}
[data-theme="dark"] .docs-callout-warning { background: #2d1f00; border-color: #d97706; }
[data-theme="dark"] .docs-callout-warning .docs-callout-text { color: #fcd34d; }
[data-theme="dark"] .docs-callout-info { background: #1e2a3e; border-color: #3b82f6; }
[data-theme="dark"] .docs-callout-info .docs-callout-text { color: #93c5fd; }

/* ── Docs download buttons ── */
.docs-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #fff !important;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none !important;
  transition: all .2s;
  margin: .5rem .5rem .5rem 0;
  border: none;
  cursor: pointer;
}
.docs-dl-btn:hover { background: #d94400; transform: translateY(-1px); }
.docs-dl-btn-secondary {
  background: var(--card-01);
  color: var(--fg) !important;
  border: 1px solid var(--border-02);
}
.docs-dl-btn-secondary:hover { background: var(--card-02); transform: none; }

/* ── Docs terminal ── */
.docs-terminal {
  background: #13131f;
  border-radius: 10px;
  overflow: hidden;
  margin: 1.25rem 0;
  border: 1px solid rgba(255,255,255,.06);
}
.docs-terminal-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.docs-terminal-dot { width: 12px; height: 12px; border-radius: 50%; }
.docs-terminal-dot-red { background: #ff5f57; }
.docs-terminal-dot-yellow { background: #febc2e; }
.docs-terminal-dot-green { background: #28c840; }
.docs-terminal-title {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: rgba(205,214,244,.3);
}
.docs-terminal-body {
  padding: 1.25rem;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.8;
  color: #cdd6f4;
}
.docs-terminal-prompt::before { content: '$ '; color: #a6e3a1; }

/* ── Docs steps ── */
.docs-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 1.5rem 0;
  position: relative;
}
.docs-steps::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 32px;
  bottom: 32px;
  width: 1px;
  background: var(--border-02);
}
.docs-step { display: flex; gap: 1rem; padding: 0 0 1.5rem; }
.docs-step-number {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
}
.docs-step-body { flex: 1; padding-top: 5px; }
.docs-step-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: .5rem;
}

/* ── Docs code-block-wrap (header + copy) ── */
.docs-code-wrap {
  margin: 1.5rem 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  background: #1e1e2e;
}
.docs-code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem 1rem;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.docs-code-lang {
  font-size: 12px;
  font-weight: 500;
  color: rgba(205,214,244,.5);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.docs-code-copy {
  font-size: 12px;
  color: rgba(205,214,244,.4);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  transition: all var(--dur);
}
.docs-code-copy:hover { color: #cdd6f4; background: rgba(255,255,255,.08); }
.docs-code-wrap pre {
  margin: 0;
  border: none;
  border-radius: 0;
}
.docs-code-wrap pre code {
  background: none !important;
  padding: 0 !important;
  border: none !important;
  color: #cdd6f4 !important;
}

/* ── Docs product tabs (for IDE / CLI / API switching) ── */
.docs-product-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 1rem;
}
.docs-product-tab {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-60);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 6px;
  transition: all var(--dur);
  white-space: nowrap;
}
.docs-product-tab:hover { color: var(--fg); background: var(--card-01); }
.docs-product-tab.active {
  color: var(--accent);
  background: rgba(245,78,0,.06);
  font-weight: 600;
}

/* ── Docs OS tabs (API page) ── */
.docs-os-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-02);
  padding-bottom: 0;
}
.docs-os-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-60);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--dur);
  margin-bottom: -1px;
}
.docs-os-tab:hover { color: var(--fg); }
.docs-os-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.docs-os-tab svg { opacity: .6; }
.docs-os-tab.active svg { opacity: 1; }
.docs-os-content { display: none; }
.docs-os-content.active { display: block; }
.docs-code-copy.copied { color: #a6e3a1 !important; border-color: rgba(166,227,161,.3); }

/* ── TUI mock (docs embedded terminal UI preview) ── */
.tui-mock {
  background: #141414;
  border-radius: 10px;
  overflow: hidden;
  margin: 1.25rem 0;
  border: 1px solid rgba(255,255,255,.1);
  font-family: var(--font-mono);
  font-size: 13px;
  color: #e8e8e8;
}
.tui-layout { display: flex; min-height: 180px; }
.tui-main { flex: 1; padding: 1rem 1.25rem; line-height: 1.8; overflow: hidden; }
.tui-sidebar {
  width: 160px; flex-shrink: 0;
  border-left: 1px solid rgba(255,255,255,.08);
  padding: .75rem .875rem;
  font-size: 11.5px; color: #888;
}
.tui-sidebar-title { color: #e8e8e8; font-size: 13px; font-weight: 500; margin-bottom: .75rem; }
.tui-sidebar-section { margin-bottom: .875rem; }
.tui-sidebar-label { color: #e8e8e8; font-size: 11px; margin-bottom: .2rem; }
.tui-sidebar-value { color: #888; font-size: 11px; line-height: 1.6; }
.tui-status {
  background: #1e1e1e; border-top: 1px solid rgba(255,255,255,.06);
  padding: .35rem 1rem; display: flex; align-items: center; gap: .5rem;
  font-size: 12px; color: #aaa;
}
.tui-status-icon { color: #888; margin-right: 2px; }
.tui-status-mode { color: #e8e8e8; font-weight: 500; }
.tui-status-sep { color: #555; }
.tui-input-row { background: #1a1a1a; padding: .5rem 1rem; display: flex; align-items: center; }
.tui-cursor {
  display: inline-block; width: 8px; height: 14px;
  background: #e8e8e8; vertical-align: text-bottom;
  animation: tui-blink 1s step-end infinite;
}
@keyframes tui-blink { 0%,100%{opacity:1} 50%{opacity:0} }
.tui-footer {
  background: #111; border-top: 1px solid rgba(255,255,255,.06);
  padding: .3rem 1rem; display: flex; align-items: center;
  justify-content: space-between; font-size: 11.5px; color: #666;
}
.tui-footer-left { display: flex; align-items: center; gap: 1.25rem; }
.tui-footer-right { display: flex; align-items: center; gap: .75rem; }
.tui-footer-mode { color: #e8e8e8; font-weight: 500; }
.tui-footer-model { color: #aaa; }
.tui-footer-session { color: #777; }
.tui-footer-path { color: #666; }
.tui-dot-green {
  display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; background: #28c840;
  margin-right: 4px; vertical-align: middle;
}
.tui-version { color: #888; }
.tui-hint { color: #555; font-size: 11px; }
.tui-hint-key { color: #888; }
.tui-msg-user { color: #4fc3f7; margin-bottom: .25rem; }
.tui-msg-assistant { color: #a8e6a3; margin-bottom: .25rem; }
.tui-msg-body { color: #d4d4d4; padding-left: 0; margin-bottom: .75rem; }
.tui-msg-link { color: #4fc3f7; }
.tui-msg-bold { color: #fff; font-weight: 600; }
.tui-msg-code {
  background: rgba(255,255,255,.08); padding: 1px 5px;
  border-radius: 3px; color: #e8c07d; font-size: 12px;
}
.tui-tool {
  display: flex; align-items: center; gap: .5rem;
  color: #666; font-size: 12px; margin: .25rem 0;
}
.tui-tool-check { color: #28c840; }
.tui-tool-spin { color: #4fc3f7; }
.tui-cmd { color: #e8e8e8; }
.tui-select-item { padding: .2rem .75rem; color: #888; font-size: 12px; }
.tui-select-item.selected {
  background: rgba(79,195,247,.15); color: #4fc3f7;
  border-left: 2px solid #4fc3f7;
}
.tui-apikey-box { padding: .5rem 0; color: #4fc3f7; font-size: 13px; line-height: 1.9; }
.tui-kbd {
  display: inline-block; background: #2a2a2a;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 3px; padding: 0 6px;
  font-size: 11px; color: #ccc;
}
/* Override docs-content code style inside tui-mock */
.tui-mock code, .tui-mock .docs-content code {
  background: none; color: inherit; border: none; padding: 0;
  font-size: inherit; border-radius: 0;
}

/* ── Docs landing page ── */
.docs-landing-hero {
  background: var(--bg);
  padding: calc(var(--header-h) + 4rem) 0 3rem;
  text-align: center;
}
.docs-landing-hero h1 {
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: var(--track-xl);
  color: var(--fg);
  margin-bottom: .75rem;
}
.docs-landing-sub {
  font-size: var(--text-md-sm);
  color: var(--fg-60);
  max-width: 540px;
  margin: 0 auto;
  line-height: var(--lead-relax);
}
.docs-landing-cards {
  padding: 2rem 0 4rem;
}
.docs-landing-cards .wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.docs-landing-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border-01);
  border-radius: var(--r-card);
  padding: 2rem;
  text-decoration: none;
  transition: border-color var(--dur), box-shadow var(--dur);
}
.docs-landing-card:hover {
  border-color: var(--fg-20);
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.docs-landing-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--card-02);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  color: var(--accent);
}
.docs-landing-card h2 {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--fg);
  margin-bottom: .5rem;
  letter-spacing: var(--track-md);
}
.docs-landing-card p {
  font-size: var(--text-sm);
  color: var(--fg-60);
  line-height: var(--lead-cozy);
  flex: 1;
}
.docs-landing-card-arrow {
  font-size: 1.25rem;
  color: var(--accent);
  margin-top: 1rem;
  transition: transform var(--dur);
}
.docs-landing-card:hover .docs-landing-card-arrow { transform: translateX(4px); }

.docs-landing-quick {
  padding: 0 0 5rem;
}
.docs-landing-quick h3 {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--fg-40);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 1rem;
}
.docs-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
}
.docs-quick-link {
  display: block;
  padding: .625rem 1rem;
  font-size: var(--text-sm);
  color: var(--fg-60);
  text-decoration: none;
  border: 1px solid var(--border-01);
  border-radius: var(--r-card);
  transition: all var(--dur);
}
.docs-quick-link:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(245,78,0,.04);
}

@media(max-width:900px){
  .docs-landing-cards .wrap { grid-template-columns: 1fr; }
  .docs-quick-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Docs responsive ── */
@media(max-width:1100px){
  .docs-toc { display: none; }
  .docs-main { margin-right: 0; }
}
@media(max-width:768px){
  .docs-sidebar { display: none; }
  .docs-main { margin-left: 0; }
  .docs-content { padding: 2rem 1.25rem 4rem; }
  .docs-os-tabs { flex-wrap: wrap; }
}