/*
 * UnlimitedModel.com — Landing page stylesheet (extracted from index.html).
 *
 * Single page stylesheet for the landing SPA (index.html): header/nav shell,
 * hero, pricing, features, models, docs-in-page, auth cards, 404, footer.
 * The dashboard/chat/keys/usage surface lives in user-dashboard.css, which
 * mirrors the admin design system (admin.css) as the shared reference.
 * Load order: tokens.css -> base.css -> app-shell.css -> landing.css ->
 * user-dashboard.css. No inline <style> blocks remain in index.html.
 */

/* Auth-state visibility: toggled by updateAuthUI() via classList. */
.is-hidden { display: none !important; }

/* Auth boot gate: the only thing visible until session/role resolves.
   Role unknown = null, never assumed to be a customer. */
.app-boot-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: #ffffff;
}
.app-boot-logo { width: 200px; height: auto; }
.app-boot-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid #e7e5e4;
  border-top-color: var(--accent, #1769d1);
  animation: app-boot-spin 0.8s linear infinite;
}
@keyframes app-boot-spin { to { transform: rotate(360deg); } }

/* Dashboard tabs: exactly ONE tab is visible at a time. All tabs start
   hidden in markup so slow JS never stacks every section down the page. */
.dashboard-tab { display: none; flex: 1 1 0%; min-height: 0; flex-direction: column; overflow: hidden auto; }
.dashboard-tab.is-visible { display: flex; }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.6; min-width: 320px; }
    a { color: var(--accent); text-decoration: none; }
    a:hover { color: var(--accent-hover); }

    ::selection { background: var(--accent-light); }
    ::-webkit-scrollbar { width: 8px; height: 8px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--border); }
    ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

    /* Container — one 1240px system; the 48px gutter is baked into the width
       (base.css/app-shell.css set a 1200px max-width + 24px padding, reset here). */
    .container { width: min(100% - 48px, var(--marketing-container, 1240px)); max-width: none; margin-inline: auto; padding-inline: 0; }
    .container-sm { width: min(100% - 48px, 900px); max-width: none; margin-inline: auto; padding-inline: 0; }

    /* ===========================================
       NAVIGATION - Premium Sticky Header
       =========================================== */
    
    /* Site Header - solid surface, token shadow on scroll (no blur) */
    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: var(--z-sticky, 200);
      background: rgba(255, 255, 255, 0.92);
      border-bottom: 1px solid var(--border-default, #e5e7eb);
      transition: background var(--transition-fast), box-shadow var(--transition-fast);
    }

    .site-header.scrolled {
      background: var(--bg-primary);
      box-shadow: var(--shadow-md);
      border-bottom-color: transparent;
    }

    /* Main Navigation — fixed 68px bar, no oversized empty header */
    .main-nav {
      padding: 0;
      transition: none;
    }

    .main-nav.scrolled {
      padding: 0;
    }

    .main-nav .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 1;
      height: 68px;
      gap: var(--space-6, 24px);
    }

    /* Logo */
    .nav-logo {
      display: flex;
      align-items: center;
      gap: var(--space-3, 12px);
      text-decoration: none;
      flex-shrink: 0;
    }

    .nav-logo-img,
    .nav-logo .nav-logo-img {
      height: 38px;
      width: auto;
    }

    /* Desktop Navigation Links */
    .nav-links {
      display: flex;
      align-items: center;
      gap: var(--space-1, 4px);
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .nav-link {
      padding: 8px 14px;
      color: var(--text-secondary, #475569);
      font-size: var(--text-base, 14px);
      font-weight: var(--font-medium, 500);
      text-decoration: none;
      border-radius: var(--radius-md, 8px);
      transition: color var(--transition-fast), background var(--transition-fast);
    }

    .nav-link:hover {
      color: var(--text-primary, #0f172a);
      background: var(--bg-hover, #f1f5f9);
    }

    .nav-link.active {
      color: var(--accent, #1659e8);
      background: var(--accent-light, rgba(22, 89, 232, 0.08));
    }

    .nav-link:focus-visible {
      outline: none;
      box-shadow: var(--focus-ring);
    }
    
    /* Nav Actions - CTA Buttons */
    .nav-actions {
      display: flex;
      align-items: center;
      gap: var(--space-3, 12px);
      flex-shrink: 0;
    }
    
    .nav-signin-btn {
      color: var(--text-secondary, #475569);
      background: transparent;
    }

    .nav-signin-btn:hover {
      color: var(--text-primary, #0f172a);
      background: var(--bg-hover, #f1f5f9);
    }

    /* Nav CTA buttons: the standard 38px control with readable labels */
    .nav-actions .btn-sm {
      min-height: 38px;
      padding: 0 14px;
      font-size: var(--text-sm, 13px);
      border-radius: var(--radius-control, 8px);
    }

    .nav-actions a.btn-primary,
    .nav-actions a.btn-primary * {
      color: #ffffff;
    }
    
    /* Mobile Hamburger Toggle */
    .nav-mobile-toggle {
      display: none;
      width: 44px;
      height: 44px;
      align-items: center;
      justify-content: center;
      background: var(--bg-surface, rgba(24,24,27,0.8));
      border: 1px solid var(--border-default, rgba(255,255,255,0.1));
      border-radius: var(--radius-md, 8px);
      color: var(--text-primary, #fafafa);
      cursor: pointer;
      transition: background var(--transition-fast), border-color var(--transition-fast);
    }
    
    .nav-mobile-toggle:hover {
      background: var(--bg-elevated, rgba(39,39,42,0.5));
      border-color: var(--border-strong, rgba(255,255,255,0.15));
    }
    
    .nav-mobile-toggle:focus-visible {
      outline: 2px solid var(--focus-ring-color, var(--accent));
      outline-offset: 2px;
    }
    
    /* Hamburger Icon */
    .hamburger-icon {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      width: 20px;
      height: 20px;
    }
    
    .hamburger-line {
      display: block;
      width: 100%;
      height: 2px;
      background: currentColor;
      border-radius: 2px;
      transition: transform var(--transition-fast), opacity var(--transition-fast);
    }
    
    /* Mobile Full Overlay Menu */
    .nav-mobile-menu {
      display: none;
      position: fixed;
      inset: 0;
      top: 69px;
      background: var(--bg-primary);
      z-index: var(--z-fixed, 300);
      padding: var(--space-6, 24px);
      flex-direction: column;
      gap: var(--space-2, 8px);
      animation: fade-in 0.2s var(--ease-out);
      overflow-y: auto;
    }
    
    .nav-mobile-menu.open {
      display: flex;
    }
    
    .nav-mobile-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--space-6, 24px);
      padding-bottom: var(--space-4, 16px);
      border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
    }
    
    .nav-mobile-close {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg-surface, rgba(24,24,27,0.8));
      border: 1px solid var(--border-default, rgba(255,255,255,0.1));
      border-radius: var(--radius-md, 8px);
      color: var(--text-primary, #fafafa);
      cursor: pointer;
      transition: background var(--transition-fast);
    }
    
    .nav-mobile-close:hover {
      background: var(--bg-elevated, rgba(39,39,42,0.5));
    }
    
    .nav-mobile-nav {
      flex: 1;
    }
    
    .nav-mobile-links {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: var(--space-2, 8px);
    }
    
    .nav-mobile-link {
      display: flex;
      align-items: center;
      gap: var(--space-3, 12px);
      padding: var(--space-4, 16px);
      color: var(--text-secondary, #a1a1aa);
      font-size: var(--text-lg, 16px);
      font-weight: var(--font-medium, 500);
      text-decoration: none;
      border-radius: var(--radius-lg, 12px);
      transition: color var(--transition-fast), background var(--transition-fast);
    }
    
    .nav-mobile-link:hover,
    .nav-mobile-link.active {
      color: var(--text-primary, #fafafa);
      background: var(--bg-elevated, rgba(39,39,42,0.5));
    }
    
    .nav-mobile-link svg {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
    }
    
    .nav-mobile-actions {
      display: flex;
      flex-direction: column;
      gap: var(--space-3, 12px);
      margin-top: var(--space-6, 24px);
      padding-top: var(--space-6, 24px);
      border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
    }
    
    .nav-mobile-actions .btn {
      width: 100%;
      justify-content: center;
    }
    
    /* Mobile Menu Backdrop */
    .nav-mobile-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: calc(var(--z-fixed, 300) - 1);
    }
    
    /* Header Spacer */
    .site-header-spacer {
      height: 69px;
    }
    
    /* Mobile Responsive */
    @media (max-width: 767px) {
      .nav-links {
        display: none;
      }
      
      .nav-actions {
        display: none;
      }
      
      .nav-mobile-toggle {
        display: flex;
      }
    }
    
    @keyframes fade-in {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    /* Buttons are owned by styles/components.css (one 38px control, 8px
       radius, 13px label). Marketing only adjusts the nav CTA row height. */

    /* Primary button labels are pinned white — never inherited blue. */
    .btn-primary,
    .btn-primary *,
    a.btn-primary,
    a.btn-primary * {
      color: var(--accent-text, #ffffff);
    }

    /* Section rhythm — one repeated vertical value: 96px desktop (var(--space-24)),
       64px tablet, 48px mobile. Spacing comes ONLY from this padding; adjacent
       .section blocks stack without extra margins. */
    .section { padding: var(--space-24, 96px) 0; }
    .section-header { text-align: center; max-width: 720px; margin: 0 auto 48px; }
    .section-header .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
      color: var(--accent);
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .section-header .eyebrow::before {
      content: '';
      width: 18px;
      height: 2px;
      border-radius: 2px;
      background: var(--accent);
    }
    .section-header h2 { font-size: clamp(30px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; margin-bottom: 14px; color: var(--text-primary); }
    .section-header p { font-size: 17px; color: var(--text-secondary); line-height: 1.6; }

    /* Feature Cards - clean white cards on brand-blue icon wells */
    .features-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .feature-card {
      background: var(--bg-primary);
      border: 1px solid var(--border-default, #e5e7eb);
      border-radius: var(--radius-card, 12px);
      padding: 28px 26px;
      transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
      position: relative;
      overflow: hidden;
    }
    .feature-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-lg);
      border-color: var(--border-strong, #cbd5e1);
    }
    .feature-icon {
      width: 44px;
      height: 44px;
      background: var(--accent-light);
      border-radius: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
      color: var(--accent);
    }
    .feature-icon svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; }
    .feature-icon .icon { width: 22px; height: 22px; }
    .feature-card h3 { font-size: 18px; font-weight: var(--font-semibold); margin-bottom: 8px; color: var(--text-primary); }
    .feature-card p { color: var(--text-secondary); font-size: 14.5px; line-height: 1.6; }

    /* Models Grid - tasteful catalog cards */
    .models-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
    .model-card { background: var(--bg-primary); border: 1px solid var(--border-default, #e5e7eb); border-radius: 12px; padding: 16px 18px; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
    .model-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
    .model-card .name { font-weight: 600; font-size: 15px; margin-bottom: 4px; color: var(--text-primary); }
    .model-card .tier { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); font-weight: 700; }
    .model-card .ctx { font-size: 12px; color: var(--text-muted); margin-top: 8px; }
    .models-more { margin-top: 36px; text-align: center; }

    /* Pricing Cards - Premium Design with Gradient Borders */
    .pricing-grid { 
      display: grid; 
      grid-template-columns: repeat(3, 1fr); 
      gap: 24px; 
      max-width: 1200px; 
      margin: 0 auto; 
      align-items: stretch; 
    }
    .plan-card { 
      background: var(--bg-surface); 
      border: 1px solid var(--border-subtle); 
      border-radius: var(--radius-xl); 
      padding: 28px 24px; 
      text-align: left; 
      transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); 
      position: relative; 
      display: flex; 
      flex-direction: column; 
      min-width: 0; 
      box-shadow: var(--shadow-sm);
    }
    .plan-card:hover { 
      transform: translateY(-4px); 
      box-shadow: var(--shadow-lg), var(--shadow-glow-sm); 
      border-color: var(--border-default);
    }
    
    /* Featured Card with solid accent border */
    .plan-card.featured { 
      border: 2px solid var(--accent);
      background: var(--bg-surface);
      padding: 27px 23px 23px;
      box-shadow: var(--shadow-lg);
    }
    .plan-card.featured:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-xl);
    }
    
    .plan-card-top { min-height: 155px; }
    .plan-badge-row { min-height: 27px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
    .plan-badge { 
      display: inline-flex; 
      align-items: center; 
      justify-content: center; 
      min-height: 25px; 
      padding: 4px 10px; 
      background: var(--success-bg); 
      color: var(--success); 
      font-size: 10px; 
      font-weight: 800; 
      letter-spacing: .025em; 
      border-radius: 999px; 
    }
    .plan-badge-accent { 
      background: var(--accent-light); 
      color: var(--accent); 
      border: 1px solid var(--border-default);
    }
    .plan-badge-warning { background: var(--warning-bg); color: var(--warning); }
    .plan-value-badge { background: var(--success-bg); color: var(--success); }
    .plan-name { font-size: 21px; line-height: 1.25; font-weight: 750; letter-spacing: -.015em; margin-bottom: 9px; }
    .plan-desc { color: var(--text-muted); font-size: 13px; line-height: 1.55; }
    .plan-price-block { padding: 18px 0 17px; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
    .plan-price-line { display: flex; align-items: flex-end; gap: 9px; min-width: 0; }
    .plan-price { font-size: clamp(38px, 4vw, 48px); line-height: 1; font-weight: 800; letter-spacing: -.04em; white-space: nowrap; color: var(--text-primary); }
    .plan-price sup { font-size: .48em; vertical-align: super; margin-right: 1px; }
    .plan-cadence { padding-bottom: 4px; color: var(--text-muted); font-size: 12px; font-weight: 600; line-height: 1.25; }
    .plan-equivalent { min-height: 20px; margin-top: 8px; color: var(--text-muted); font-size: 12px; }
    .plan-card .plan-price-old { color: var(--text-muted); font-size: 12px; text-decoration: line-through; min-height: 18px; margin-bottom: 4px; }
    .plan-card .plan-limits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 17px 0 10px; }
    .plan-limit { min-width: 0; padding: 9px 7px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-elevated); text-align: center; }
    .plan-limit strong { display: block; overflow: hidden; text-overflow: ellipsis; font-size: 14px; line-height: 1.2; }
    .plan-limit span { display: block; margin-top: 3px; color: var(--text-muted); font-size: 9px; line-height: 1.2; text-transform: uppercase; letter-spacing: .035em; }
    .plan-fair-use { color: var(--text-muted); font-size: 11px; line-height: 1.45; }
    .plan-features { list-style: none; margin: 17px 0 20px; padding-top: 16px; border-top: 1px solid var(--border-subtle); text-align: left; flex: 1; }
    .plan-features li { padding: 6px 0; font-size: 12px; line-height: 1.45; display: flex; align-items: flex-start; gap: 10px; }
    .plan-features li::before { content: '✓'; flex: 0 0 auto; color: var(--success); font-weight: 800; }
    .plan-features li.disabled { opacity: .4; }
    .plan-features li.disabled::before { content: '✗'; color: var(--text-muted); }
    .plan-ribbon { 
      position: absolute; 
      top: -14px; 
      right: 20px; 
      padding: 6px 16px; 
      border-radius: 999px; 
      background: var(--accent); 
      color: white; 
      box-shadow: var(--shadow-md); 
      font-size: 10px; 
      font-weight: 800; 
      letter-spacing: .06em; 
      text-transform: uppercase; 
      white-space: nowrap; 
    }
    .plan-card .plan-cta { 
      width: 100%; 
      justify-content: center; 
      margin-top: auto;
      padding: 14px 20px;
      border-radius: var(--radius-lg);
    }
    .plan-card.featured .plan-cta {
      background: var(--accent);
      box-shadow: var(--shadow-sm);
    }
    .plan-card.featured .plan-cta:hover {
      background: var(--accent-hover);
      box-shadow: var(--shadow-md);
    }
    .plan-card .plan-availability { min-height: 34px; color: var(--text-muted); font-size: 10px; line-height: 1.45; text-align: center; margin-top: 9px; }
    .pricing-loading { grid-column: 1 / -1; text-align: center; padding: 48px; color: var(--text-muted); }
    .pricing-intro { max-width: 790px; margin: -8px auto 32px; padding: 15px 18px; border: 1px solid var(--border-subtle); border-radius: var(--radius-card, 12px); background: var(--bg-primary); text-align: center; color: var(--text-muted); font-size: 14px; }
    .pricing-assurance { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; color: var(--text-muted); font-size: 13px; }
    .pricing-assurance span::before { content: '✓'; color: var(--success); font-weight: 800; margin-right: 6px; }
     .public-model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; max-height: 520px; overflow: auto; padding: 4px; }
     .public-model-item { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-card, 12px); background: var(--surface); transition: transform .2s, border-color .2s, box-shadow .2s; }
     .public-model-item:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow); }
     .public-model-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
     .public-model-name { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
     .public-model-meta { color: var(--text-muted); font-size: 12px; }
     .public-model-access { flex: 0 0 auto; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
     .public-model-access.free { color: var(--success); background: var(--success-bg); }
      .public-model-access.paid { color: var(--accent); background: var(--accent-light); }
     .public-model-copy { align-self: flex-start; border: 1px solid var(--border); background: transparent; color: var(--text); border-radius: 7px; padding: 5px 9px; font-size: 11px; cursor: pointer; }
     .public-model-copy:hover { border-color: var(--accent); color: var(--accent); }
     .docs-catalog-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 0 14px; }
     .docs-catalog-toolbar input, .docs-catalog-toolbar select { min-height: 40px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); padding: 8px 11px; font: inherit; font-size: 13px; }
     .docs-catalog-toolbar input { flex: 1 1 240px; min-width: 180px; }
     .docs-catalog-toolbar select { flex: 0 0 130px; }
     .docs-catalog-count { margin-left: auto; color: var(--text-muted); font-size: 12px; }
     .docs-model-empty { grid-column: 1 / -1; padding: 32px 18px; border: 1px dashed var(--border); border-radius: 12px; color: var(--text-muted); text-align: center; }

    /* FAQ */
    .faq-list { max-width: 720px; margin: 0 auto; }
    .faq-item { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; overflow: hidden; background: var(--surface); }
    .faq-item summary { padding: 20px 24px; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; list-style: none; }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after { content: '+'; font-size: 20px; color: var(--text-muted); }
    .faq-item[open] summary::after { content: '−'; }
    .faq-item p { padding: 0 24px 20px; color: var(--text-muted); font-size: 14px; line-height: 1.7; }

    /* Forms — controls are owned by styles/components.css (one 40px input). */
    .form-group { margin-bottom: 20px; }
    .form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-primary); }

    /* Auth Forms */
    .auth-container { min-height: calc(100vh - 80px); display: flex; align-items: center; justify-content: center; padding: var(--space-8, 32px) var(--space-4, 16px); background: var(--bg-surface); }
    .auth-card { background: var(--bg-primary, var(--surface)); border: 1px solid var(--border-subtle, var(--border)); border-radius: var(--radius-lg, 20px); padding: var(--space-8, 48px); width: 100%; max-width: 420px; box-shadow: var(--shadow-md, var(--shadow-lg)); }
    .auth-card h1,
    .auth-card h2 { font-size: var(--text-2xl, 24px); font-weight: 700; margin-bottom: var(--space-2, 8px); text-align: center; }
    .auth-card .subtitle { color: var(--text-secondary, var(--text-muted)); text-align: center; margin-bottom: var(--space-6, 32px); font-size: var(--text-sm, 14px); }
    .auth-card form { width: 100%; }
    .auth-card .btn { width: 100%; justify-content: center; margin-top: var(--space-2, 8px); }
    .auth-footer { text-align: center; margin-top: var(--space-6, 24px); font-size: var(--text-sm, 14px); color: var(--text-secondary, var(--text-muted)); }
    /* Links inside body copy must not rely on color alone (WCAG 1.4.1). */
    .auth-footer a { text-decoration: underline; text-underline-offset: 2px; }

    /* Tables */
    .table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow-x: auto; overflow-y: hidden; }
    table { width: 100%; border-collapse: collapse; }
    th, td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--border); }
    th { background: var(--surface-2); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
    tr:last-child td { border-bottom: none; }
    tr:hover td { background: var(--surface-2); }

    /* Badges — shape only; status colors come from the component library */
    .badge { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; }

    /* Alerts — shape only; variant colors come from the component library */
    .alert { padding: 16px 20px; border-radius: 12px; margin-bottom: 20px; font-size: 14px; }

    /* Footer - Premium Design */
    .site-footer {
      background: var(--bg-primary);
      border-top: 1px solid var(--border-subtle);
      padding: 64px 0 32px;
      margin-top: 0;
    }
    
    .footer-container {
      width: min(100% - 48px, var(--marketing-container, 1240px));
      margin-inline: auto;
    }
    
    /* Footer Main Grid */
    .footer-main {
      display: grid;
      grid-template-columns: 2fr repeat(4, 1fr);
      gap: 48px;
      padding-bottom: 48px;
      border-bottom: 1px solid var(--border-subtle);
    }
    
    /* Footer Brand Column */
    .footer-brand {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    
    .footer-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
    }
    
    .footer-logo .footer-logo-img,
    .footer-logo img {
      height: 34px;
      width: auto;
      display: block;
    }
    
    .footer-tagline {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.6;
      max-width: 280px;
    }
    
    /* Footer Social Links */
    .footer-social {
      display: flex;
      gap: 12px;
      margin-top: 8px;
    }
    
    .footer-social-link {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      color: var(--text-secondary);
      transition: all var(--transition-fast);
    }
    
    .footer-social-link:hover {
      background: var(--bg-elevated);
      border-color: var(--border-default);
      color: var(--text-primary);
      transform: translateY(-2px);
      box-shadow: var(--shadow-sm);
    }
    
    .footer-social-link:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }
    
    .footer-social-link svg {
      width: 20px;
      height: 20px;
      stroke: currentColor;
      stroke-width: 2;
      fill: none;
    }
    
    /* Footer Link Columns */
    .footer-links-column {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    
    .footer-links-title {
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    
    .footer-links-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .footer-links-list li {
      margin: 0;
    }
    
    .footer-link {
      font-size: 14px;
      color: var(--text-secondary);
      text-decoration: none;
      transition: color var(--transition-fast);
      display: inline-block;
      /* Comfortable tap target on touch devices without changing the
         visual rhythm of the column. */
      padding: 4px 0;
    }
    
    .footer-link:hover {
      color: var(--text-primary);
    }
    
    .footer-link:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
      border-radius: 2px;
    }
    
    /* Footer Bottom Bar */
    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 32px;
      flex-wrap: wrap;
      gap: 16px;
    }
    
    .footer-copyright {
      font-size: 14px;
      /* --text-muted (#98a2b3) fails WCAG AA on white at body size; the
         footer keeps the secondary tone which clears 4.5:1. */
      color: var(--text-secondary);
    }
    
    .footer-legal {
      display: flex;
      gap: 24px;
    }
    
    .footer-legal-link {
      font-size: 14px;
      /* Same AA contrast requirement as .footer-copyright. */
      color: var(--text-secondary);
      text-decoration: none;
      transition: color var(--transition-fast);
      display: inline-block;
      padding: 4px 0;
    }
    
    .footer-legal-link:hover {
      color: var(--text-secondary);
    }
    
    .footer-legal-link:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
      border-radius: 2px;
    }
    
    /* Footer Responsive */
    @media (max-width: 1024px) {
      .footer-main {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
      }
      
      .footer-brand {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 32px;
      }
      
      .footer-tagline {
        max-width: 400px;
      }
    }
    
    @media (max-width: 768px) {
      .site-footer {
        padding: 48px 0 24px;
      }
      
      .footer-main {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
      }
      
      .footer-brand {
        grid-column: 1 / -1;
        flex-direction: column;
        gap: 20px;
      }
      
      .footer-tagline {
        max-width: 100%;
      }
      
      .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
      }
      
      .footer-legal {
        flex-wrap: wrap;
        gap: 16px;
      }
    }
    
    @media (max-width: 480px) {
      .footer-main {
        grid-template-columns: 1fr;
        gap: 32px;
      }
      
      .footer-links-column {
        gap: 12px;
      }
    }
    
    /* Reduced Motion for Footer */
    @media (prefers-reduced-motion: reduce) {
      .footer-social-link:hover {
        transform: none;
      }
    }

    /* Pages */
    .page { display: none; }
    .page.active { display: block; }


    /* Responsive */
    @media (max-width: 768px) {
      nav ul { display: none; flex-direction: column; align-items: stretch; gap: 4px; position: absolute; top: calc(100% + 8px); left: 16px; right: 16px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); }
      nav.mobile-open ul { display: flex; }
      nav ul li, nav ul a, nav ul button { width: 100%; }
      nav ul a, nav ul button { display: flex; align-items: center; justify-content: flex-start; padding: 12px; }
      nav .mobile-menu { display: flex; }
      .hero { padding: 60px 0 80px; }
      .hero h1 { font-size: 36px; }
      .price-hero { padding: 40px 24px; }
      
      /* Mobile: Single column for pricing and features */
      .pricing-grid { grid-template-columns: 1fr; max-width: 400px; gap: 20px; }
      .features-grid { grid-template-columns: 1fr; gap: 16px; }
      .plan-card-top { min-height: 0; }
      .feature-card:hover { transform: translateY(-4px); }
    }

    /* Tablet: 2 columns */
    @media (min-width: 769px) and (max-width: 1199px) {
      .pricing-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
      .features-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    }

    /* Desktop: 3 columns */
    @media (min-width: 1024px) {
      .pricing-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
      .features-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
    }

    /* Mobile Menu */
     .mobile-menu { display: none; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); cursor: pointer; font-size: 22px; line-height: 1; align-items: center; justify-content: center; }
     .mobile-menu:focus-visible { outline: 3px solid var(--focus-ring-color); outline-offset: 2px; }

    /* Comparison Table */
    .comparison-table { width: 100%; margin: 0 auto; max-width: 860px; }
    .comparison-table th, .comparison-table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--border); }
    .comparison-table th { background: var(--surface-2); font-weight: 600; color: var(--text-secondary); }
    .comparison-table .check { color: #166534; font-weight: 700; }

    /* ===========================================
       MARKETING DESIGN SYSTEM — homepage sections
       (value strip, how-it-works, developer cards,
       pricing preview, landing FAQ, final CTA)
       =========================================== */

    /* Hero vertical rhythm — desktop only. Base hero padding lives in
       pages.css (owned elsewhere); this marketing layer pins the desktop
       band to 88–100px without touching that file. Tablet/mobile keep the
       pages.css values (64/56 and 56/48). */
    @media (min-width: 1024px) {
      .hero-section {
        padding-top: clamp(88px, 9vw, 100px);
        padding-bottom: clamp(88px, 8vw, 100px);
      }
    }

    /* Section background rhythm */
    .section-soft { background: var(--background-soft, #f8fafc); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
    .section-faint { background: #fafafa; }

    /* Value strip — product-value bar under the hero */
    .value-strip { background: #fafafa; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); padding: 26px 0; }
    .value-strip-inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 40px; }
    .value-item { display: inline-flex; align-items: center; gap: 9px; color: var(--text-secondary); font-size: 13.5px; font-weight: 600; }
    .value-item svg { width: 16px; height: 16px; color: var(--success); flex-shrink: 0; }

    /* How it works — numbered steps */
    .steps-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: step; }
    .step-card { background: var(--bg-primary); border: 1px solid var(--border-default, #e5e7eb); border-radius: var(--radius-card, 12px); padding: 28px 26px; }
    .step-number { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--accent-light); color: var(--accent); font-size: 15px; font-weight: 800; font-family: var(--font-mono); margin-bottom: 16px; }
    .step-card h3 { font-size: 18px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
    .step-card p { color: var(--text-secondary); font-size: 14.5px; line-height: 1.6; margin: 0; }

    /* Developer section — mini endpoint cards with light code */
    .dev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    /* Grid items default to min-width:auto, so a wide <pre> inside a card
       stretches the column past the viewport on phones. Let the card shrink
       and the code block scroll horizontally instead. */
    .dev-grid > * { min-width: 0; }
    .dev-card { background: var(--bg-primary); border: 1px solid var(--border-default, #e5e7eb); border-radius: var(--radius-card, 12px); padding: 24px; min-width: 0; }
    .dev-card h3 { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
    .dev-card > p { color: var(--text-secondary); font-size: 14px; line-height: 1.6; margin: 0 0 14px; }
    /* These snippets are one or two short lines: wrap them instead of
       creating a scroll region that keyboard users cannot reach. */
    .dev-card .docs-code { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; overflow: visible; }

    /* Pricing preview — light premium card (home-price-* JS keeps working) */
    .price-hero {
      background: var(--bg-primary);
      color: var(--text-primary);
      border: 1px solid var(--border-default, #e5e7eb);
      border-radius: var(--marketing-radius-lg, 16px);
      box-shadow: var(--shadow-lg);
      padding: clamp(36px, 5vw, 56px);
      text-align: center;
      margin: 0 auto;
      max-width: 640px;
      position: relative;
      overflow: hidden;
    }
    .price-hero-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 14px; }
    .price-hero-amount { font-size: clamp(52px, 8vw, 68px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; color: var(--text-primary); }
    .price-hero-amount sup { font-size: 0.42em; vertical-align: super; color: var(--text-secondary); }
    .price-hero-period { font-size: 15px; color: var(--text-secondary); margin-top: 10px; }
    .price-hero-features { display: flex; gap: 10px 24px; justify-content: center; flex-wrap: wrap; margin-top: 22px; font-size: 14px; font-weight: 500; color: var(--text-secondary); }
    .price-hero-cta { margin-top: 28px; }
    .price-hero-cta .btn-primary,
    .price-hero-cta .btn-primary * { color: #ffffff; }

    /* Landing FAQ — same accordion language as the FAQ page */
    .landing-faq { max-width: 760px; margin: 0 auto; }
    .landing-faq .faq-item { background: var(--bg-primary); }
    .landing-faq-more { margin-top: 28px; text-align: center; }
    .landing-faq-more a { color: var(--accent); font-weight: 600; font-size: 14.5px; }

    /* Final CTA — soft blue band, strong contrast */
    .final-cta { background: var(--accent-light); border-top: 1px solid rgba(22, 89, 232, 0.14); border-bottom: 1px solid rgba(22, 89, 232, 0.14); text-align: center; }
    .final-cta h2 { font-size: clamp(28px, 3.2vw, 38px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; color: var(--text-primary); margin: 0 0 12px; }
    /* --text-secondary on the tinted band lands under 4.5:1; the CTA body
       copy uses the primary tone so it clears AA on the accent tint. */
    .final-cta p { font-size: 17px; color: var(--text-primary); line-height: 1.6; max-width: 560px; margin: 0 auto 28px; }
    .final-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
    .final-cta .btn-outline { background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-strong, #cbd5e1); }
    .final-cta .btn-outline:hover:not(:disabled) { background: var(--bg-surface); border-color: var(--border-strong); }
    .final-cta .btn-primary,
    .final-cta .btn-primary * { color: #ffffff; }

    /* Community CTA — quiet card above the footer, Discord first */
    .community-cta { padding: 8px 0 56px; }
    .community-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      flex-wrap: wrap;
      padding: 28px 32px;
      background: var(--bg-surface);
      border: 1px solid var(--border);
      border-radius: 18px;
    }
    .community-copy { min-width: 0; }
    .community-card h2 { font-size: clamp(20px, 2.2vw, 24px); font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 6px; }
    .community-card p { font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); margin: 0; max-width: 520px; }
    .community-btn { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; }
    .community-btn svg { flex-shrink: 0; }
    /* Responsive for the marketing sections */
    @media (max-width: 767px) {
      .community-cta { padding: 4px 0 40px; }
      .community-card { padding: 22px 20px; }
      .community-btn { width: 100%; justify-content: center; }
    }
    @media (max-width: 1023px) {
      .section { padding: var(--space-16, 64px) 0; }
      .steps-grid, .dev-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
      .value-strip-inner { gap: 12px 28px; }
    }

    @media (max-width: 767px) {
      .section { padding: var(--space-12, 48px) 0; }
      .value-strip { padding: 20px 0; }
      .value-strip-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
      .steps-grid, .dev-grid { grid-template-columns: 1fr; gap: 16px; }
      .price-hero { padding: 32px 22px; }
      .final-cta-actions { flex-direction: column; align-items: stretch; }
      .final-cta-actions .btn { width: 100%; justify-content: center; }
    }

    /* Docs */
    .docs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 32px; }
    .docs-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 28px; }
    .docs-card h4 { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
    .docs-card p { color: var(--text-muted); font-size: 14px; margin-bottom: 16px; }
     .docs-code-wrap { position: relative; margin-top: 12px; }
     .docs-code { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-subtle); padding: 20px; border-radius: 12px; font-family: var(--font-mono); font-size: 13px; line-height: 1.55; overflow: auto; white-space: pre; margin: 0; min-height: 54px; }
     .docs-copy { position: absolute; top: 8px; right: 8px; padding: 6px 10px; border: 1px solid var(--border-default); border-radius: 7px; background: var(--bg-surface); color: var(--text-secondary); cursor: pointer; font: 600 12px inherit; }
     .docs-copy:hover { background: var(--bg-hover); color: var(--text-primary); }
     .docs-model-list { max-height: 320px; overflow: auto; }
     .docs-model-list code { display: block; padding: 4px 0; }
     .docs-model-list code + code { border-top: 1px solid var(--border-subtle); }
     .docs-wide { grid-column: 1 / -1; }
     .docs-inline-code { font-family: 'SF Mono', Consolas, monospace; background: var(--surface-2); padding: 2px 6px; border-radius: 5px; }
    .setup-note { background: var(--accent-light); border-left: 4px solid var(--accent); padding: 16px 20px; border-radius: 0 12px 12px 0; margin: 24px 0; font-size: 14px; }

  
/* ===========================================
   INLINE-STYLE REPLACEMENTS (zero style= attributes)
   =========================================== */
.is-inline-01 { background:white;color:var(--accent) }
.is-inline-02 { background: var(--surface-2); }
.is-inline-03 { text-align:center;margin-top:32px }
.is-inline-04 { text-align:center }
.is-inline-05 { font-size:clamp(28px,4vw,40px);margin-bottom:16px }
.is-inline-06 { font-size:18px;opacity:0.9;margin-bottom:32px }
.is-inline-07 { text-align:center;padding-bottom:60px }
.is-inline-08 { text-align:center;margin-top:28px;color:var(--text-muted) }
.is-inline-09 { margin-top:12px }
.is-inline-10 { display:none }
.is-inline-11 { display:none;margin-top:8px }
.is-inline-12 { font-weight:400;color:var(--text-muted) }
.is-inline-13 { font-size:12px;color:var(--text-muted);margin-bottom:8px;padding:0 4px }
.is-inline-14 { width:100% }
.is-inline-15 { color:var(--success) }
.is-inline-16 { width:18px;height:18px }
.is-inline-17 { font-size:13px;min-height:36px;padding:8px 16px }
.is-inline-18 { width:16px;height:16px }
.is-inline-19 { font-size:12px;color:var(--text-muted);align-self:flex-end }
.is-inline-20 { font-size:13px }
.is-inline-21 { font-size:20px;font-weight:700;margin-bottom:8px }
.is-inline-22 { color:var(--text-muted);margin-bottom:24px }
.is-inline-23 { padding: 0 0 24px 0; border: none; background: transparent; }
.is-inline-24 { display:none;margin-bottom:24px }
.is-inline-25 { display:flex;align-items:center;gap:12px;margin-bottom:16px }
.is-inline-26 { width:40px;height:40px;border-radius:10px;background:var(--success-bg);display:flex;align-items:center;justify-content:center;color:var(--success);flex-shrink:0 }
.is-inline-27 { width:22px;height:22px }
.is-inline-28 { font-size:16px;font-weight:600;color:var(--text-primary);margin:0 }
.is-inline-29 { font-size:13px;color:var(--text-muted);margin:4px 0 0 }
.is-inline-30 { background:var(--code-bg);border:1px solid var(--code-border);border-radius:12px;padding:16px 20px;margin-bottom:16px;position:relative }
.is-inline-31 { display:flex;align-items:center;gap:12px }
.is-inline-32 { font-family:var(--font-mono);font-size:14px;color:var(--code-fg);word-break:break-all;flex:1;background:transparent;padding:0 }
.is-inline-33 { flex-shrink:0;padding:8px 14px;border:1px solid var(--code-border);border-radius:8px;background:rgba(255,255,255,0.08);color:var(--sidebar-muted);cursor:pointer;font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:6px;transition:all var(--transition-fast) }
.is-inline-34 { width:14px;height:14px }
.is-inline-35 { display:flex;align-items:flex-start;gap:12px;padding:14px 16px;background:var(--warning-bg);border:1px solid var(--warning-border);border-radius:10px }
.is-inline-36 { width:18px;height:18px;color:var(--warning);flex-shrink:0;margin-top:1px }
.is-inline-37 { font-size:13px;font-weight:600;color:var(--text-primary);margin:0 0 2px }
.is-inline-38 { font-size:12px;color:var(--text-secondary);margin:0 }
.is-inline-39 { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px;flex-wrap:wrap;gap:16px }
.is-inline-40 { font-size:20px;font-weight:700;margin-bottom:4px }
.is-inline-41 { color:var(--text-muted);font-size:14px }
.is-inline-42 { display:flex;align-items:center;gap:8px }
.is-inline-43 { position:relative }
.is-inline-44 { font-size:11px;color:var(--text-muted);display:block;margin-bottom:4px }
.is-inline-45 { width:140px }
.is-inline-46 { color:var(--text-muted);margin-top:18px }
.is-inline-47 { margin-bottom:24px }
.is-inline-48 { display:flex;justify-content:space-between;align-items:center;margin-bottom:16px }
.is-inline-49 { font-size:15px;font-weight:600;margin:0 }
.is-inline-50 { min-height:240px;position:relative }
.is-inline-51 { text-align:center;padding:40px;color:var(--text-muted) }
.is-inline-52 { font-size:20px;font-weight:700;margin-bottom:24px }
.is-inline-53 { display:flex;justify-content:space-between;align-items:start;gap:16px;margin-bottom:24px;flex-wrap:wrap }
.is-inline-54 { color:var(--text-muted) }
.is-inline-55 { display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,1fr);gap:24px;align-items:start }
.is-inline-56 { padding:24px }
.is-inline-57 { display:none;margin-top:18px;border-top:1px solid var(--border);padding-top:18px }
.is-inline-58 { background:var(--surface);border-radius:16px;padding:32px;max-width:400px;width:90%;text-align:center;box-shadow:var(--shadow-lg) }
.is-inline-59 { width:64px;height:64px;margin:0 auto 20px;background:var(--warning-bg);border-radius:50%;display:flex;align-items:center;justify-content:center }
.is-inline-60 { font-size:20px;font-weight:600;margin-bottom:8px;color:var(--text-primary) }
.is-inline-61 { color:var(--text-muted);margin-bottom:24px;line-height:1.6 }
.is-inline-62 { width:100%;padding:12px 24px;background:var(--blue-500);color:white;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer }
.is-inline-63 { text-align:center;padding:40px }
.is-inline-64 { justify-content:center }
.is-inline-65 { width:80px }
.is-inline-66 { width:60px }
.is-inline-67 { display:flex;flex-direction:column;gap:16px }
.is-inline-68 { margin-top:4px;font-size:11px;opacity:0.8 }
.is-inline-69 { width:${promptPct}% }
.is-inline-70 { width:${completionPct}% }
.is-inline-71 { text-align:center;padding:60px 24px }
.is-inline-72 { width:48px;height:48px;margin-bottom:16px }
.is-inline-73 { width:24px;height:24px }
.is-inline-74 { font-size:14px }
.is-inline-75 { background:var(--danger-bg);color:var(--danger) }
.is-inline-76 { color:var(--danger) }
.is-inline-77 { margin-top:16px }
.is-inline-78 { width:48px;height:48px;background:var(--danger-bg);color:var(--danger);margin-bottom:16px }
.is-inline-79 { font-size:14px;color:var(--danger) }
.is-inline-80 { margin-top:8px }
.is-inline-81 { margin-bottom:20px }
.is-inline-82 { color:var(--text-muted);margin-bottom:14px }
.is-inline-83 { color:var(--text-muted);font-size:13px;margin-bottom:16px }
.is-inline-84 { border:none }
.is-inline-85 { padding:24px;color:var(--text-muted) }
.is-inline-86 { display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:24px }
.is-inline-87 { color:var(--text-secondary);margin-bottom:16px }
.is-inline-88 { display:flex;gap:12px;flex-wrap:wrap }
.is-inline-89 { flex:1;min-width:200px }
.is-inline-90 { font-family:var(--font-mono);font-size:13px }
.is-inline-91 { margin-top:12px;font-size:13px;color:var(--text-muted) }
.is-inline-92 { font-family:var(--font-mono) }
.is-inline-93 { color:var(--text-secondary) }
.is-inline-94 { width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius) }
.is-inline-95 { display:none;margin-bottom:12px }
.is-inline-96 { color:var(--text-muted);padding:24px;text-align:center }
.is-inline-97 { padding:20px;font-size:13px }
.is-inline-98 { font-size:12px;color:var(--text-muted);margin-top:4px }
.is-inline-99 { color:var(--text-muted);font-size:12px;margin:4px 0 14px }
.is-inline-100 { max-height:260px;overflow:auto }
.is-inline-101 { padding:10px 0;border-bottom:1px solid var(--border) }
.is-inline-102 { white-space:pre-wrap;margin-top:4px }
.is-inline-103 { margin-top:14px }
.is-inline-104 { color: var(--text-muted); cursor: default; }
.is-inline-105 { text-align:left;cursor:pointer }
.is-inline-106 { background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:48px 24px }
.is-inline-107 { font-size:15px;font-weight:500;color:var(--text-primary);margin:0 0 8px }
.is-inline-108 { display:inline-flex;align-items:center;gap:6px }
.is-inline-109 { width:100%;text-align:left;padding:8px 12px;border:none;background:none;border-radius:6px;cursor:pointer;font-size:13px;display:flex;align-items:center;gap:8px }
.is-inline-110 { height:1px;background:var(--border);margin:4px 0 }
.is-inline-111 { width:100%;text-align:left;padding:8px 12px;border:none;background:none;border-radius:6px;cursor:pointer;font-size:13px;color:var(--error);display:flex;align-items:center;gap:8px }
.is-inline-112 { background:var(--surface);border-radius:16px;padding:24px;width:360px;max-width:90vw;box-shadow:0 8px 32px rgba(0,0,0,0.2) }
.is-inline-113 { margin:0 0 16px;font-size:16px;font-weight:600 }
.is-inline-114 { display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto }
.is-inline-115 { width:100%;text-align:left;padding:12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);cursor:pointer;font-size:14px }
.is-inline-116 { margin-top:16px;display:flex;justify-content:flex-end;gap:8px }
.is-inline-117 { padding:10px 20px;border:1px solid var(--border);border-radius:8px;background:var(--surface);cursor:pointer }