/* ============================================================
   ModelTok — Unified Stylesheet
   All pages: index, thermx, legal, license, docs
   ============================================================ */

/* -----------------------------------------------------------
   1. Reset & CSS Variables
   ----------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #0a0a1a;
  --surface: #12122a;
  --border: #1e1e3a;
  --text: #e0e0f0;
  --dim: #8888aa;
  --accent: #4488ff;
  --green: #44ff88;
  --orange: #ff8844;
  --red: #ff4466;
}

[data-theme="light"] {
  --bg: #f5f5f8;
  --surface: #ffffff;
  --border: #e0e0e8;
  --text: #1a1a2e;
  --dim: #666680;
  --accent: #3366dd;
  --green: #22aa55;
  --orange: #dd6622;
  --red: #cc2244;
}

/* -----------------------------------------------------------
   2. Base Styles
   ----------------------------------------------------------- */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

body.page-legal { line-height: 1.7; }

/* -----------------------------------------------------------
   3. Layout / Container
   ----------------------------------------------------------- */
.container { max-width: 960px; margin: 0 auto; padding: 0 24px; }

body.page-home .container,
body.page-product .container { max-width: 880px; }

body.page-legal .container,
body.page-legal .nav-inner { max-width: 720px; }

body.page-license .container,
body.page-license .nav-inner { max-width: 640px; }

/* -----------------------------------------------------------
   4. Navigation
   ----------------------------------------------------------- */
nav { padding: 14px 0; border-bottom: 1px solid var(--border); }
nav .container { display: flex; align-items: center; justify-content: space-between; }
nav .nav-inner { margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; }

.logo { font-size: 20px; font-weight: 700; text-decoration: none; color: var(--text); }
.logo span { color: var(--accent); }

nav .links { display: flex; align-items: center; gap: 4px; }
nav .links a { color: var(--dim); text-decoration: none; margin-left: 16px; font-size: 13px; }
nav .links a:hover { color: var(--text); }
nav .links a.active-link { color: var(--accent); }

nav a.back { color: var(--dim); text-decoration: none; font-size: 13px; }
nav a.back:hover { color: var(--text); }

/* -----------------------------------------------------------
   5. Language & Theme Controls
   ----------------------------------------------------------- */
.lang-switch { display: flex; gap: 3px; margin-left: 16px; }
.lang-btn { padding: 2px 8px; border-radius: 3px; border: 1px solid var(--border); background: transparent; color: var(--dim); font-size: 11px; cursor: pointer; font-weight: 600; }
.lang-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.theme-btn { background: transparent; border: 1px solid var(--border); border-radius: 3px; padding: 2px 6px; cursor: pointer; font-size: 14px; margin-left: 12px; color: var(--text); }
.theme-btn:hover { border-color: var(--accent); }

/* -----------------------------------------------------------
   6. Footer
   ----------------------------------------------------------- */
footer { padding: 20px 0; border-top: 1px solid var(--border); text-align: center; color: var(--dim); font-size: 11px; }
footer a { color: var(--dim); text-decoration: none; margin: 0 8px; }
footer a:hover { color: var(--text); }

/* ============================================================
   7. Homepage (index.html)
   ============================================================ */
.hero { text-align: center; padding: 48px 0 32px; }
.hero h1 { font-size: 34px; font-weight: 700; margin-bottom: 10px; }
.hero p { font-size: 15px; color: var(--dim); max-width: 540px; margin: 0 auto; }

.products { padding: 32px 0; }
.products h2 { text-align: center; font-size: 22px; margin-bottom: 24px; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.product-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; transition: border-color 0.2s, transform 0.2s; text-decoration: none; color: inherit; display: block; }
.product-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.product-card-disabled { opacity: 0.4; cursor: default; }
.product-card-disabled:hover { border-color: var(--border); transform: none; }
.product-icon { font-size: 36px; margin-bottom: 10px; }
.product-card h3 { font-size: 19px; margin-bottom: 6px; }
.product-card .tagline { color: var(--dim); font-size: 13px; margin-bottom: 10px; line-height: 1.5; }
.product-platforms { display: flex; gap: 6px; margin-top: 8px; }
.platform-tag { font-size: 10px; color: var(--dim); background: rgba(255,255,255,0.05); padding: 2px 6px; border-radius: 3px; }
.product-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.product-price { font-size: 22px; font-weight: 700; }
.product-price span { font-size: 12px; color: var(--dim); font-weight: 400; }
.product-badge { padding: 3px 10px; border-radius: 10px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.badge-coming-soon { background: rgba(255,136,68,0.15); color: var(--orange); border: 1px solid rgba(255,136,68,0.3); }
.badge-available { background: rgba(68,255,136,0.15); color: var(--green); border: 1px solid rgba(68,255,136,0.3); }

.bottom-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 32px 0; border-top: 1px solid var(--border); }
.bottom-row h2 { font-size: 18px; margin-bottom: 10px; }
.bottom-row p { color: var(--dim); font-size: 13px; margin-bottom: 8px; }

.email-signup { display: flex; gap: 6px; margin-top: 12px; }
.email-signup input { flex: 1; padding: 9px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 13px; }
.email-signup input:focus { border-color: var(--accent); outline: none; }
.email-signup button { padding: 9px 18px; background: var(--accent); border: none; border-radius: 6px; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
.email-signup button:hover { background: #5599ff; }

/* ============================================================
   8. Product Page (thermx.html)
   ============================================================ */

/* Hero (product) */
body.page-product .hero { padding: 48px 0 40px; text-align: left; }
body.page-product .hero h1 { font-size: 36px; line-height: 1.15; margin-bottom: 0; }
body.page-product .hero h1 small { display: block; font-size: 16px; font-weight: 400; color: var(--dim); margin-top: 6px; }
body.page-product .hero p { max-width: none; margin: 0; }
.hero-top { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 16px; }
.hero-icon { font-size: 52px; flex-shrink: 0; }
.hero-tagline { font-size: 16px; color: var(--dim); max-width: 640px; margin-bottom: 32px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 11px 22px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: all 0.15s; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #5599ff; transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-outline { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-danger { background: transparent; color: var(--red); border: 1px solid var(--red); padding: 6px 14px; font-size: 12px; border-radius: 6px; cursor: pointer; }
.btn-danger:hover { background: rgba(255,68,102,0.1); }

.price-tag { font-size: 28px; font-weight: 700; margin-right: 4px; }
.price-tag small { font-size: 13px; font-weight: 400; color: var(--dim); }

.badge { display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.badge-soon { background: rgba(255,136,68,0.15); color: var(--orange); border: 1px solid rgba(255,136,68,0.3); }

.platforms { display: flex; gap: 6px; margin-top: 16px; }
.platform { font-size: 11px; color: var(--dim); background: var(--surface); border: 1px solid var(--border); padding: 3px 10px; border-radius: 4px; text-decoration: none; transition: border-color 0.15s, color 0.15s; cursor: pointer; }
.platform:hover { border-color: var(--accent); color: var(--accent); }

/* Sections */
.section { padding: 36px 0; border-top: 1px solid var(--border); }
.section h2 { font-size: 22px; font-weight: 700; margin-bottom: 20px; }
.section h3 { font-size: 15px; font-weight: 600; margin: 20px 0 8px; color: var(--text); }
.section p { font-size: 14px; color: var(--dim); margin-bottom: 10px; max-width: 680px; }

/* Feature grid */
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.features-mt { margin-top: 16px; }
.feature { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 20px; }
.feature-icon { font-size: 24px; margin-bottom: 8px; }
.feature h3 { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.feature p { font-size: 13px; color: var(--dim); margin: 0; max-width: none; }
.feature ul { list-style: none; padding: 0; margin: 6px 0 0; }
.feature ul li { font-size: 12px; color: var(--dim); padding: 2px 0; }
.feature ul li::before { content: '\2192\0020'; color: var(--accent); }

/* Specs table */
.specs { width: 100%; border-collapse: collapse; margin: 16px 0; }
.specs th, .specs td { text-align: left; padding: 8px 12px; font-size: 13px; border-bottom: 1px solid var(--border); }
.specs th { color: var(--dim); font-weight: 500; width: 180px; }
.specs td { color: var(--text); }

/* Materials list (product page) */
.material-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; margin: 12px 0; }
.material-item { font-size: 12px; color: var(--dim); padding: 5px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; display: flex; align-items: center; gap: 8px; }
.material-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

/* Standards */
.standards-list { list-style: none; padding: 0; }
.standards-list li { font-size: 13px; color: var(--dim); padding: 6px 0; border-bottom: 1px solid var(--border); }
.standards-list li strong { color: var(--text); font-weight: 600; }

/* Comparison table */
.compare { width: 100%; border-collapse: collapse; margin: 16px 0; }
.compare th, .compare td { text-align: center; padding: 8px 12px; font-size: 13px; border-bottom: 1px solid var(--border); }
.compare th:first-child, .compare td:first-child { text-align: left; }
.compare thead th { color: var(--dim); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; }
.compare .check { color: var(--green); }
.compare .cross { color: var(--red); opacity: 0.5; }
.compare .highlight-col { background: rgba(68,136,255,0.06); }

/* Downloads */
.downloads-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 20px; }
.download-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 20px; text-align: center; text-decoration: none; color: inherit; transition: border-color 0.15s, transform 0.15s; display: block; }
.download-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.download-card .dl-icon { font-size: 32px; margin-bottom: 8px; }
.download-card .dl-platform { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.download-card .dl-format { font-size: 12px; color: var(--dim); margin-bottom: 8px; }
.download-card .dl-size { font-size: 11px; color: var(--dim); }
.download-card .dl-btn { display: inline-block; margin-top: 10px; padding: 7px 16px; background: var(--accent); color: #fff; border-radius: 6px; font-size: 12px; font-weight: 600; }
.download-card:hover .dl-btn { background: #5599ff; }
.dl-version { text-align: center; margin-top: 16px; font-size: 12px; color: var(--dim); max-width: none; }

/* CTA */
.cta { text-align: center; padding: 48px 0; border-top: 1px solid var(--border); }
.cta h2 { font-size: 26px; margin-bottom: 8px; }
.cta p { color: var(--dim); font-size: 14px; margin-bottom: 20px; }

/* ============================================================
   9. Legal Pages (privacy, terms, refund)
   ============================================================ */
.legal-nav { display: flex; gap: 16px; margin: 32px 0; padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.legal-nav a { color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 600; }
.legal-nav a:hover { text-decoration: underline; }
.legal-nav a.active { color: var(--text); pointer-events: none; }

body.page-legal .content { padding: 40px 0 60px; }
body.page-legal .content h1 { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
body.page-legal .content .updated { color: var(--dim); font-size: 13px; margin-bottom: 32px; }
body.page-legal .content h2 { font-size: 18px; font-weight: 600; margin: 28px 0 10px; }
body.page-legal .content p,
body.page-legal .content li { font-size: 14px; color: var(--dim); margin-bottom: 10px; }
body.page-legal .content ul { padding-left: 20px; margin-bottom: 10px; }
body.page-legal .content a { color: var(--accent); text-decoration: none; }
body.page-legal .content a:hover { text-decoration: underline; }
body.page-legal .content .highlight { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px; margin: 16px 0; }
body.page-legal .content .highlight p { margin-bottom: 0; }

/* ============================================================
   10. License Management Page
   ============================================================ */
body.page-license .content { padding: 48px 0 60px; }
body.page-license h1 { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
body.page-license .subtitle { color: var(--dim); font-size: 14px; margin-bottom: 32px; }
body.page-license h2 { font-size: 18px; font-weight: 700; margin: 32px 0 16px; }

.key-form { display: flex; gap: 8px; margin-bottom: 32px; }
.key-input { flex: 1; padding: 11px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 14px; font-family: 'SF Mono', 'Fira Code', monospace; }
.key-input:focus { border-color: var(--accent); outline: none; }
.key-input::placeholder { color: var(--dim); font-family: inherit; }

.status { padding: 12px 16px; border-radius: 8px; margin-bottom: 24px; font-size: 13px; display: none; }
.status.error { display: block; background: rgba(255,68,102,0.1); border: 1px solid rgba(255,68,102,0.3); color: var(--red); }
.status.success { display: block; background: rgba(68,255,136,0.1); border: 1px solid rgba(68,255,136,0.3); color: var(--green); }
.status.loading { display: block; background: var(--surface); border: 1px solid var(--border); color: var(--dim); }

.license-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin-bottom: 24px; display: none; }
.license-card.visible { display: block; }
.license-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.license-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.license-status.valid { background: rgba(68,255,136,0.1); color: var(--green); }
.license-status.invalid { background: rgba(255,68,102,0.1); color: var(--red); }
.license-detail { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.license-detail:last-child { border-bottom: none; }
.license-label { color: var(--dim); }
.license-value { color: var(--text); font-weight: 500; }
.license-key-display { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; color: var(--accent); }

.instances-list { margin-top: 16px; }
.instances-desc { font-size: 13px; color: var(--dim); margin-bottom: 12px; }
.instance-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.instance-info { flex: 1; }
.instance-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.instance-id { font-size: 11px; color: var(--dim); font-family: monospace; }
.instance-date { font-size: 11px; color: var(--dim); margin-top: 2px; }
.no-instances { color: var(--dim); font-size: 13px; font-style: italic; padding: 16px 0; }

.help-section { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); }
.help-section h3 { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.help-section p { font-size: 13px; color: var(--dim); margin-bottom: 12px; }

/* ============================================================
   11. Docs Layout
   ============================================================ */
.docs-layout { display: grid; grid-template-columns: 220px 1fr; gap: 0; min-height: calc(100vh - 57px); }

.sidebar { border-right: 1px solid var(--border); padding: 24px 0; position: sticky; top: 0; height: calc(100vh - 57px); overflow-y: auto; }
.sidebar-section { margin-bottom: 20px; }
.sidebar-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--dim); padding: 0 20px; margin-bottom: 6px; }
.sidebar a { display: block; padding: 6px 20px; font-size: 13px; color: var(--dim); text-decoration: none; border-left: 2px solid transparent; transition: all 0.12s; }
.sidebar a:hover { color: var(--text); background: var(--surface); }
.sidebar a.active { color: var(--accent); border-left-color: var(--accent); background: var(--surface); }

/* ============================================================
   12. Docs Content Typography
   ============================================================ */
.docs-layout .content { padding: 40px 48px; max-width: 760px; }
.docs-layout .content h1 { font-size: 32px; font-weight: 700; margin-bottom: 8px; }
.docs-layout .content .subtitle { font-size: 16px; color: var(--dim); margin-bottom: 36px; }

/* For sub-pages with slightly different heading sizes */
body.page-docs h1 { font-size: 30px; font-weight: 700; margin-bottom: 8px; }
body.page-docs .subtitle { font-size: 15px; color: var(--dim); margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
body.page-docs h2 { font-size: 20px; font-weight: 700; margin: 36px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
body.page-docs h3 { font-size: 15px; font-weight: 600; margin: 24px 0 8px; color: var(--text); }
body.page-docs p { font-size: 14px; color: var(--dim); margin-bottom: 12px; line-height: 1.7; }
body.page-docs ul, body.page-docs ol { padding-left: 20px; margin-bottom: 12px; }
body.page-docs li { font-size: 14px; color: var(--dim); padding: 3px 0; }
body.page-docs strong { color: var(--text); font-weight: 600; }
body.page-docs code { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; background: var(--surface); border: 1px solid var(--border); padding: 1px 5px; border-radius: 3px; color: var(--accent); }

/* Docs index overrides */
.docs-layout .content h1 { font-size: 32px; }
.docs-layout .content .subtitle { font-size: 16px; margin-bottom: 36px; padding-bottom: 0; border-bottom: none; }
.docs-layout .content h2 { font-size: 20px; font-weight: 700; margin: 36px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.docs-layout .content p { font-size: 14px; color: var(--dim); margin-bottom: 12px; line-height: 1.7; }

/* Docs tables */
body.page-docs table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13px; }
body.page-docs th { text-align: left; padding: 8px 12px; color: var(--dim); font-weight: 600; border-bottom: 1px solid var(--border); font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; }
body.page-docs td { padding: 8px 12px; color: var(--text); border-bottom: 1px solid var(--border); }
body.page-docs td:first-child { color: var(--dim); font-weight: 500; }

/* ============================================================
   13. Docs Components
   ============================================================ */

/* Callout boxes */
.callout { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 6px; padding: 14px 16px; margin: 16px 0; }
.callout.tip { border-left-color: var(--green); }
.callout.warn { border-left-color: var(--orange); }
.callout-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent); margin-bottom: 4px; }
.callout.tip .callout-label { color: var(--green); }
.callout.warn .callout-label { color: var(--orange); }
.callout p { margin: 0; }

/* Nav footer (prev/next links in docs) */
.nav-footer { display: flex; justify-content: space-between; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); }
.nav-footer.end-only { justify-content: flex-end; }
.nav-link { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; text-decoration: none; color: var(--text); font-size: 13px; font-weight: 500; transition: border-color 0.15s; }
.nav-link:hover { border-color: var(--accent); color: var(--accent); }

/* Doc cards (docs index) */
.doc-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; }
.doc-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 20px; text-decoration: none; color: inherit; transition: border-color 0.15s, transform 0.15s; display: block; }
.doc-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.doc-card .card-icon { font-size: 24px; margin-bottom: 8px; }
.doc-card .card-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; color: var(--text); }
.doc-card .card-desc { font-size: 12px; color: var(--dim); }

/* Tool cards (geometry docs) */
.tool-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 20px 0; }
.tool-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px; }
.tool-key { display: inline-block; font-family: monospace; font-size: 13px; font-weight: 700; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; color: var(--accent); margin-bottom: 8px; }
.tool-name { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.tool-desc { font-size: 12px; color: var(--dim); }

/* Platform cards (getting-started docs) */
.platform-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 20px 0; }
.platform-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 18px; text-align: center; text-decoration: none; color: inherit; transition: border-color 0.15s; display: block; }
.platform-card:hover { border-color: var(--accent); }
.platform-card .pc-icon { font-size: 28px; margin-bottom: 8px; }
.platform-card .pc-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.platform-card .pc-format { font-size: 12px; color: var(--dim); margin-bottom: 10px; }
.platform-card .pc-btn { display: inline-block; padding: 6px 14px; background: var(--accent); color: #fff; border-radius: 5px; font-size: 12px; font-weight: 600; }

/* BC type cards (boundary-conditions docs) */
.bc-type { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px; margin: 10px 0; }
.bc-type-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.bc-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.bc-dot-convective { background: #4488ff; }
.bc-dot-fixed { background: #ff4466; }
.bc-dot-adiabatic { background: #666688; }
.bc-name { font-size: 14px; font-weight: 600; }
.bc-type p { margin: 0; }

/* Category badges (materials docs) */
.cat-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; text-transform: uppercase; }
.cat-solid { background: rgba(68,136,255,0.15); color: var(--accent); }
.cat-insulation { background: rgba(68,255,136,0.15); color: var(--green); }
.cat-glazing { background: rgba(68,200,255,0.15); color: #44ccff; }
.cat-gas { background: rgba(255,136,68,0.15); color: var(--orange); }

/* Mesh param rows (meshing docs) */
.param-row { display: flex; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.param-name { font-size: 13px; font-weight: 600; min-width: 140px; }
.param-range { font-size: 12px; color: var(--accent); font-family: monospace; min-width: 100px; }
.param-desc { font-size: 13px; color: var(--dim); }

/* Solver cards (solving docs) */
.solver-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; }
.solver-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 18px; }
.solver-card.gpu { border-color: rgba(68,136,255,0.4); }
.solver-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--dim); margin-bottom: 4px; }
.solver-name { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.solver-desc { font-size: 12px; color: var(--dim); margin-bottom: 10px; }
.solver-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { font-size: 10px; padding: 2px 7px; border-radius: 10px; border: 1px solid var(--border); color: var(--dim); }
.tag.gpu-tag { border-color: rgba(68,136,255,0.5); color: var(--accent); }

/* Result items (results docs) */
.result-item { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 18px 20px; margin: 10px 0; }
.result-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.result-icon { font-size: 20px; }
.result-title { font-size: 14px; font-weight: 700; }
.result-std { font-size: 11px; color: var(--accent); font-weight: 600; }
.result-item p { margin: 0; }

/* Sheet views (sheets docs) */
.scale-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 12px 0; }
.scale-chip { background: var(--surface); border: 1px solid var(--border); border-radius: 5px; padding: 6px; text-align: center; font-size: 12px; color: var(--dim); font-family: monospace; }
.scale-chip-wide { grid-column: span 2; }

.annotation-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.annotation-item { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 12px; }
.annotation-icon { font-size: 18px; margin-bottom: 4px; }
.annotation-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.annotation-desc { font-size: 11px; color: var(--dim); }

/* Keyboard shortcuts (keyboard-shortcuts docs) */
.shortcut-table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.shortcut-table th { text-align: left; padding: 8px 12px; color: var(--dim); font-weight: 600; border-bottom: 1px solid var(--border); font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; }
.shortcut-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.shortcut-table td:first-child { width: 200px; }
.shortcut-table td:last-child { color: var(--dim); font-size: 13px; }

kbd { display: inline-block; padding: 3px 8px; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; color: var(--text); box-shadow: 0 1px 0 var(--border); min-width: 24px; text-align: center; }
.plus { color: var(--dim); margin: 0 2px; font-size: 11px; }

/* ============================================================
   14. Utility Classes
   ============================================================ */
.hidden { display: none; }
.nav-actions { display: flex; align-items: center; }
.link-accent { color: var(--accent); }
.text-note { font-size: 12px; color: var(--dim); margin-top: 8px; }
.text-note-sm { font-size: 11px; color: var(--dim); margin-top: 8px; }
.text-center-mt { text-align: center; margin-top: 20px; }
.mb-4 { margin-bottom: 4px; }

/* Colored text for BC and mesh quality indicators */
.color-blue { color: #4488ff; }
.color-orange { color: #ff8844; }
.color-red { color: #ff4466; }
.color-gray { color: #666688; }
.color-green { color: #44ff88; }
.color-yellow { color: #ffcc44; }

/* ============================================================
   15. Responsive
   ============================================================ */
@media (max-width: 640px) {
  .bottom-row { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; }
  body.page-product .hero h1 { font-size: 28px; }
  .hero-top { flex-direction: column; gap: 8px; }
  .material-grid { grid-template-columns: 1fr 1fr; }
  .compare { font-size: 11px; }
  .compare th, .compare td { padding: 6px 6px; }
}

@media (max-width: 700px) {
  .docs-layout { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .docs-layout .content { padding: 24px 20px; }
  .doc-cards { grid-template-columns: 1fr; }
  .tool-cards { grid-template-columns: 1fr; }
  .platform-cards { grid-template-columns: 1fr; }
  .solver-cards { grid-template-columns: 1fr; }
  .annotation-list { grid-template-columns: 1fr; }
  .scale-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
  .key-form { flex-direction: column; }
  .instance-card { flex-direction: column; gap: 10px; align-items: flex-start; }
}