/* NS Viewport Studio — NS Design System Foundation v1.8.0
   Loaded last. Unifies shell, controls, themes, interaction states and premium visual rhythm. */

/* ═══════════════════════════════════════════════════════════════
   DOCUMENT SURFACE
═══════════════════════════════════════════════════════════════ */
body{background:
  radial-gradient(900px 520px at 8% -8%,color-mix(in srgb,var(--color-accent) 9%,transparent),transparent 72%),
  var(--color-canvas);color:var(--color-text-primary)}
body::selection{background:var(--color-selection)}

/* User-facing text must remain legible. Tiny labels are reserved for dense device chrome only. */
:where(.field-hint,.auth-submit-hint,.ax-metric-desc,.ax-value-card p,.stage-insight-card p,.pricing-insight-card p,.project-card p,.profile-section p){line-height:1.55}

/* ═══════════════════════════════════════════════════════════════
   THEME CONTROL + COMMAND PALETTE
═══════════════════════════════════════════════════════════════ */
.ns-theme-control{position:relative;display:inline-flex;align-items:center}
.ns-theme-button,.ns-command-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-width:42px;min-height:42px;padding:0 .72rem;border:1px solid var(--color-border-default);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--color-surface-raised) 90%,transparent);color:var(--color-text-secondary);box-shadow:var(--shadow-xs);transition:var(--transition-standard)}
.ns-theme-button:hover,.ns-command-button:hover{background:var(--color-surface-hover);border-color:var(--color-border-strong);color:var(--color-text-primary);transform:translateY(-1px)}
.ns-theme-button svg,.ns-command-button svg{width:17px;height:17px}
.ns-theme-label{font-size:var(--text-xs);font-weight:720;white-space:nowrap}
.ns-theme-menu{position:absolute;top:calc(100% + .55rem);right:0;z-index:1200;width:230px;padding:.45rem;border:1px solid var(--color-border-default);border-radius:var(--radius-md);background:var(--color-surface-overlay);box-shadow:var(--shadow-lg);transform-origin:top right;animation:scaleIn var(--duration-fast) var(--ease-emphasized)}
.ns-theme-menu[hidden]{display:none}
.ns-theme-option{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:.65rem;width:100%;min-height:48px;padding:.45rem .55rem;border-radius:var(--radius-sm);color:var(--color-text-secondary);text-align:left;transition:var(--transition-standard)}
.ns-theme-option:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}
.ns-theme-option[aria-checked="true"]{background:var(--color-accent-soft);color:var(--color-text-primary)}
.ns-theme-swatch{width:30px;height:30px;border:1px solid var(--color-border-default);border-radius:9px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.ns-theme-swatch.is-system{background:linear-gradient(135deg,#111824 0 50%,#fff 50%)}
.ns-theme-swatch.is-dark{background:#111824}
.ns-theme-swatch.is-light{background:#fff}
.ns-theme-swatch.is-contrast{background:linear-gradient(135deg,#000 0 50%,#ffe600 50%)}
.ns-theme-option strong{display:block;font-size:var(--text-sm);font-weight:760;color:inherit}
.ns-theme-option small{display:block;margin-top:.1rem;font-size:var(--text-xs);color:var(--color-text-muted)}
.ns-theme-check{width:16px;height:16px;color:var(--color-accent);opacity:0}
.ns-theme-option[aria-checked="true"] .ns-theme-check{opacity:1}

.ns-command-dialog{position:fixed;inset:0;z-index:1600;display:grid;place-items:start center;padding:clamp(72px,12vh,144px) 16px 32px;background:var(--color-backdrop);backdrop-filter:blur(12px)}
.ns-command-dialog[hidden]{display:none}
.ns-command-panel{width:min(680px,100%);overflow:hidden;border:1px solid var(--color-border-default);border-radius:var(--radius-xl);background:var(--color-surface-overlay);box-shadow:var(--shadow-lg);animation:scaleIn var(--duration-fast) var(--ease-emphasized)}
.ns-command-search{display:flex;align-items:center;gap:.75rem;padding:1rem 1.1rem;border-bottom:1px solid var(--color-border-subtle)}
.ns-command-search svg{width:20px;height:20px;color:var(--color-text-muted)}
.ns-command-search input{width:100%;border:0;background:transparent;color:var(--color-text-primary);font-size:var(--text-base);outline:0}
.ns-command-list{max-height:min(55vh,480px);overflow:auto;padding:.5rem}
.ns-command-group{padding:.5rem .6rem .35rem;font-size:var(--text-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted)}
.ns-command-item{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:.7rem;width:100%;min-height:52px;padding:.45rem .6rem;border-radius:var(--radius-sm);text-align:left;color:var(--color-text-secondary);transition:var(--transition-standard)}
.ns-command-item:hover,.ns-command-item.is-active{background:var(--color-accent-soft);color:var(--color-text-primary)}
.ns-command-item-icon{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--color-border-subtle);border-radius:10px;background:var(--color-surface-raised);color:var(--color-accent)}
.ns-command-item-icon svg{width:17px;height:17px}
.ns-command-item strong{display:block;font-size:var(--text-sm);font-weight:760;color:inherit}
.ns-command-item small{display:block;margin-top:.08rem;color:var(--color-text-muted);font-size:var(--text-xs)}
.ns-command-key{padding:.2rem .45rem;border:1px solid var(--color-border-default);border-radius:6px;background:var(--color-surface-inset);font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--color-text-muted)}
.ns-command-empty{padding:2rem;text-align:center;color:var(--color-text-muted)}
.ns-command-footer{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 1rem;border-top:1px solid var(--color-border-subtle);font-size:var(--text-xs);color:var(--color-text-muted)}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL SHELL
═══════════════════════════════════════════════════════════════ */
.bar{height:var(--bar-h);padding:0 clamp(12px,2vw,24px);gap:12px;background:color-mix(in srgb,var(--color-surface) 88%,transparent);border-bottom:1px solid var(--color-border-subtle);box-shadow:0 1px 0 rgba(255,255,255,.025),var(--shadow-xs);backdrop-filter:blur(22px) saturate(135%)}
.bar-logo{gap:.7rem;font-family:var(--font-display);font-size:var(--text-sm);font-weight:800;letter-spacing:var(--tracking-tight);color:var(--color-text-primary)}
.logo-gem{width:36px;height:36px;border-radius:12px;background:var(--gradient-brand);color:var(--color-accent-contrast);box-shadow:var(--shadow-accent),inset 0 1px 0 rgba(255,255,255,.42);font-size:var(--text-xs)}
.bar-right{gap:.45rem}
.url-bar{height:42px;max-width:680px;border-color:var(--color-border-default);border-radius:var(--radius-sm);background:var(--color-surface-inset);box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}
.url-bar:focus-within{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus)}
.url-bar input{font-size:var(--text-sm);color:var(--color-text-primary)}
.tbtn{min-height:40px;padding:0 .72rem;border:1px solid var(--color-border-default);border-radius:var(--radius-sm);background:var(--color-surface-raised);color:var(--color-text-secondary);font-size:var(--text-xs);font-weight:720;transition:var(--transition-standard)}
.tbtn:hover{border-color:var(--color-border-strong);background:var(--color-surface-hover);color:var(--color-text-primary);transform:translateY(-1px)}
.avatar{width:40px;height:40px;border:1px solid var(--color-accent-border);background:var(--color-accent-soft);color:var(--color-accent);box-shadow:none;font-weight:820}

.sidebar{width:var(--side-w);padding:.75rem .45rem;background:var(--color-canvas-subtle);border-right:1px solid var(--color-border-subtle);gap:.25rem}
.si{min-height:56px;border-radius:var(--radius-sm);color:var(--color-text-muted);transition:var(--transition-standard)}
.si:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}
.si.on{background:var(--color-accent-soft);color:var(--color-accent);box-shadow:inset 0 0 0 1px var(--color-accent-border)}
.si-icon{width:22px;height:22px;display:grid;place-items:center;font-size:0;color:currentColor}
.si-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.si-lbl{font-size:var(--text-2xs);font-weight:720;letter-spacing:.01em}
.si-sep{background:var(--color-border-subtle);margin:.35rem .55rem}

.page-full,.page-fixed{padding-top:var(--bar-h)}
.main-scroll{background:transparent}
.col-l{padding:clamp(28px,4vw,64px)}
.col-r,.lp,.rp{background:var(--color-canvas-subtle);border-color:var(--color-border-subtle)}
.cp{background:var(--color-canvas)}
.ps{padding:1rem 1.15rem;border-color:var(--color-border-subtle)}
.ps-title{font-size:var(--text-xs);font-weight:800;letter-spacing:.075em;color:var(--color-text-muted)}

/* ═══════════════════════════════════════════════════════════════
   SHARED COMPONENTS
═══════════════════════════════════════════════════════════════ */
.btn{min-height:var(--control-md);padding:0 1rem;border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:760;letter-spacing:-.01em;transition:var(--transition-standard)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary,.btn-p{background:var(--color-accent);color:var(--color-accent-contrast);border:1px solid color-mix(in srgb,var(--color-accent) 84%,#fff);box-shadow:var(--shadow-accent)}
.btn-primary:hover,.btn-p:hover{background:var(--color-accent-hover)}
.btn-g,.btn-ghost{border:1px solid var(--color-border-default);background:var(--color-surface-raised);color:var(--color-text-secondary)}
.btn-g:hover,.btn-ghost:hover{border-color:var(--color-border-strong);background:var(--color-surface-hover);color:var(--color-text-primary)}
.btn-d{border:1px solid color-mix(in srgb,var(--color-danger) 40%,var(--color-border-default));background:var(--color-danger-soft);color:var(--color-danger)}
.btn-sm{min-height:var(--control-sm);padding:0 .8rem}.btn-lg{min-height:var(--control-lg);padding:0 1.25rem;font-size:var(--text-md)}

.field-label,.field-lbl,.ax-field-label{font-size:var(--text-sm);font-weight:720;color:var(--color-text-secondary)}
.field-inp,.search-inp,.studio-select,.dim-inp{min-height:var(--control-md);border:1px solid var(--color-border-default);border-radius:var(--radius-sm);background:var(--color-surface-inset);color:var(--color-text-primary);font-size:var(--text-sm);transition:var(--transition-standard)}
.field-inp:hover,.search-inp:hover,.studio-select:hover,.dim-inp:hover{border-color:var(--color-border-strong)}
.field-inp:focus,.search-inp:focus,.studio-select:focus,.dim-inp:focus{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus)}
.field-hint{font-size:var(--text-xs);color:var(--color-text-muted)}
.field-err{font-size:var(--text-xs);color:var(--color-danger)}

.card,.fc,.prc,.project-card,.profile-section,.stage-insight-card,.pricing-insight-card,.detail-insight-card,.ref-card,.adv-card{border-color:var(--color-border-subtle);background:var(--color-surface);box-shadow:var(--shadow-xs);border-radius:var(--radius-lg)}
.card:hover,.fc:hover,.project-card:hover,.stage-insight-card:hover,.pricing-insight-card:hover{border-color:var(--color-border-default);box-shadow:var(--shadow-sm)}
.badge,.chip{border-radius:var(--radius-full);font-weight:740;letter-spacing:.01em}
.badge-blue,.chip-b{background:var(--color-accent-soft);color:var(--color-accent);border-color:var(--color-accent-border)}
.badge-green,.chip-g{background:var(--color-success-soft);color:var(--color-success)}
.badge-amber{background:var(--color-warning-soft);color:var(--color-warning)}

.modal-backdrop,.modal-overlay{background:var(--color-backdrop);backdrop-filter:blur(12px)}
.modal-card{border:1px solid var(--color-border-default);background:var(--color-surface-overlay);box-shadow:var(--shadow-lg);border-radius:var(--radius-xl)}
.toast{border:1px solid var(--color-border-default);background:var(--color-surface-overlay);color:var(--color-text-primary);box-shadow:var(--shadow-md);border-radius:var(--radius-md)}

/* The previous global prototype banner exposed internal implementation language on every page.
   Capability status is now shown contextually, not as a universal developer notice. */
.product-truth-banner{display:none!important}

/* ═══════════════════════════════════════════════════════════════
   STAGE / STUDIO / DATA-DENSE WORKSPACE
═══════════════════════════════════════════════════════════════ */
.stage-hero{margin:clamp(20px,3vw,36px) clamp(18px,3vw,42px) 0;padding:clamp(22px,3vw,34px);border:1px solid var(--color-border-subtle);border-radius:var(--radius-xl);background:linear-gradient(135deg,var(--color-surface),color-mix(in srgb,var(--color-accent) 5%,var(--color-surface)));box-shadow:var(--shadow-sm)}
.stage-hero h2{font-family:var(--font-display);font-size:clamp(1.75rem,3vw,2.5rem);letter-spacing:var(--tracking-tight)}
.stage-hero p{max-width:68ch;color:var(--color-text-secondary);font-size:var(--text-md)}
.stage-eyebrow,.stage-insight-kicker,.pricing-eyebrow,.insight-label,.plan-kicker{color:var(--color-accent);font-size:var(--text-xs);font-weight:800;letter-spacing:.075em}
.stage-action-primary,.stage-action-secondary{min-height:44px;border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:760;transition:var(--transition-standard)}
.stage-action-primary{background:var(--color-accent);color:var(--color-accent-contrast);box-shadow:var(--shadow-accent)}
.stage-action-secondary{border:1px solid var(--color-border-default);background:var(--color-surface-raised);color:var(--color-text-secondary)}
.stage-action-primary:hover,.stage-action-secondary:hover{transform:translateY(-1px)}
.stage-insight-grid{gap:12px;margin:16px clamp(18px,3vw,42px) 0}
.stage-insight-card{padding:18px;min-height:132px}
.stage-insight-card strong{font-size:var(--text-lg);color:var(--color-text-primary)}
.stage-insight-card p{font-size:var(--text-xs);color:var(--color-text-muted)}
.fbar{margin:16px clamp(18px,3vw,42px);padding:10px;border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-surface) 92%,transparent);box-shadow:var(--shadow-xs);backdrop-filter:blur(16px)}
.fsel,.dd,.preview-mode-toggle{min-height:40px;border-color:var(--color-border-default);background:var(--color-surface-raised);border-radius:var(--radius-sm);color:var(--color-text-secondary)}
.preview-mode-btn{min-height:34px;border-radius:9px;color:var(--color-text-muted)}
.preview-mode-btn.on{background:var(--color-accent-soft);color:var(--color-accent);box-shadow:inset 0 0 0 1px var(--color-accent-border)}
.live-pill{color:var(--color-success);background:var(--color-success-soft);border-color:color-mix(in srgb,var(--color-success) 35%,transparent)}
.dots-bg{opacity:.46}
.float{width:42px;height:42px;border:1px solid var(--color-border-default);border-radius:var(--radius-sm);background:var(--color-surface-overlay);color:var(--color-text-secondary);box-shadow:var(--shadow-sm);transition:var(--transition-standard)}
.float:hover{border-color:var(--color-border-strong);color:var(--color-text-primary);transform:translateY(-1px)}
.prev-lbl{border:1px solid var(--color-border-default);background:var(--color-surface-overlay);color:var(--color-text-secondary);border-radius:var(--radius-full);box-shadow:var(--shadow-sm)}
.acc{border-color:var(--color-border-subtle)}
.acc-h{min-height:44px;color:var(--color-text-secondary);font-size:var(--text-xs);font-weight:800;letter-spacing:.055em}
.acc-h:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}
.acc-row{min-height:42px}.acc-lbl{font-size:var(--text-sm);color:var(--color-text-secondary)}.acc-val{color:var(--color-text-primary)}
.orient-btn,.sz-pill{min-height:40px;border-color:var(--color-border-default);background:var(--color-surface-raised);color:var(--color-text-secondary)}
.orient-btn.on,.sz-pill.on{background:var(--color-accent-soft);border-color:var(--color-accent-border);color:var(--color-accent)}

/* ═══════════════════════════════════════════════════════════════
   AUTH / PUBLIC ENTRY EXPERIENCE
═══════════════════════════════════════════════════════════════ */
.auth-experience{
  --ax-ink:var(--color-text-primary);--ax-ink-soft:var(--color-text-secondary);--ax-ink-mute:var(--color-text-muted);--ax-ink-faint:var(--color-text-faint);
  --ax-line:var(--color-border-subtle);--ax-line-soft:var(--color-border-subtle);--ax-line-strong:var(--color-border-default);
  --ax-surface:color-mix(in srgb,var(--color-surface) 92%,transparent);--ax-surface-2:var(--color-surface-raised);--ax-glass:color-mix(in srgb,var(--color-surface) 80%,transparent);
  --ax-accent:var(--color-accent);--ax-accent-soft:var(--color-accent-hover);--ax-accent-2:var(--color-accent-secondary);--ax-accent-3:#9b8cff;--ax-gold:var(--color-warning);
  --ax-radius:var(--radius-lg);--ax-radius-lg:var(--radius-xl);--ax-radius-sm:var(--radius-sm);--ax-ease:var(--ease-standard);--ax-ease-out:var(--ease-emphasized);
  --ax-ring:var(--shadow-focus);--ax-shadow-soft:var(--shadow-sm);--ax-shadow-card:var(--shadow-md);--ax-shadow-float:var(--shadow-lg);--ax-nav-h:76px;--ax-display:var(--font-display);--ax-body:var(--font-sans)
}
body.auth-experience{background:var(--color-canvas);color:var(--color-text-primary)}
.ax-atmos::before{inset:-12% -8%;background:radial-gradient(44% 34% at 12% 0%,color-mix(in srgb,var(--color-accent) 18%,transparent),transparent 74%),radial-gradient(38% 32% at 92% 6%,color-mix(in srgb,var(--color-accent-secondary) 10%,transparent),transparent 72%);filter:blur(10px)}
.ax-atmos::after{opacity:.44;background-size:88px 88px}
.ax-grain{display:none}
.ax-nav{height:76px;padding:0 clamp(18px,3vw,42px);background:color-mix(in srgb,var(--color-canvas) 84%,transparent);border-bottom:1px solid var(--color-border-subtle);box-shadow:var(--shadow-xs);backdrop-filter:blur(22px) saturate(120%)}
.ax-nav::after{display:none}
.ax-brand{gap:11px}.ax-mark{width:38px;height:38px;border-radius:12px;background:var(--gradient-brand);box-shadow:var(--shadow-accent),inset 0 1px 0 rgba(255,255,255,.4)}
.ax-brand-name{font-size:17px;background:var(--gradient-brand-text);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.ax-brand-tag{font-size:9px;color:var(--color-text-muted);letter-spacing:1.55px}
.ax-nav-links{gap:2px}.ax-nav-link{min-height:42px;display:inline-flex;align-items:center;padding:0 13px;border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--color-text-secondary)}
.ax-nav-link:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}
.ax-nav-link.is-current{background:var(--color-accent-soft);color:var(--color-accent)}
.ax-lang{min-height:42px;padding:0 12px;border-color:var(--color-border-default);background:var(--color-surface-raised);color:var(--color-text-secondary)}
.ax-nav-cta{min-height:42px;padding:0 15px;border-radius:var(--radius-sm);background:var(--color-accent);color:var(--color-accent-contrast);box-shadow:var(--shadow-accent);font-size:var(--text-sm);font-weight:760}

.ax-shell{width:min(var(--content-max),100%);margin:0 auto;grid-template-columns:minmax(0,1fr) minmax(420px,500px);gap:clamp(32px,5vw,76px);padding:104px clamp(22px,4vw,64px) 70px;align-items:start;min-height:100vh}
.ax-story{padding:38px 0 0;min-width:0}.ax-story-inner{max-width:700px;margin:0}
.ax-eyebrow{margin-bottom:24px;padding:7px 12px 7px 8px;background:var(--color-accent-soft);border-color:var(--color-accent-border);box-shadow:none;color:var(--color-accent);font-size:var(--text-xs)}
.ax-eyebrow-tag{background:var(--color-accent);color:var(--color-accent-contrast);font-size:10px}
.ax-headline{max-width:760px;margin-bottom:24px;font-size:clamp(3.15rem,5.2vw,5.25rem);line-height:.99;font-weight:585;letter-spacing:-.052em;text-wrap:balance}
.ax-headline em{background:linear-gradient(115deg,var(--color-accent-hover),var(--color-accent-secondary));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:500}
.ax-sub{max-width:62ch;margin-bottom:26px;font-size:var(--text-lg);line-height:1.62;color:var(--color-text-secondary)}
.ax-hero-actions{margin-bottom:28px}.ax-hero-primary,.ax-hero-secondary{min-height:46px;padding:0 18px;border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:760}
.ax-hero-primary{background:var(--color-accent);color:var(--color-accent-contrast);box-shadow:var(--shadow-accent)}
.ax-hero-secondary{border-color:var(--color-border-default);background:var(--color-surface-raised);color:var(--color-text-secondary)}
.ax-metrics{margin-bottom:24px;border-color:var(--color-border-subtle);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-xs);backdrop-filter:none}
.ax-metric{padding:18px}.ax-metric-num{font-size:28px;background:none;color:var(--color-text-primary);-webkit-text-fill-color:currentColor}.ax-metric-label{font-size:var(--text-xs);color:var(--color-text-secondary);letter-spacing:.04em}.ax-metric-desc{font-size:var(--text-xs);color:var(--color-text-muted)}
.ax-proof-panel{margin-bottom:18px;border-color:var(--color-border-subtle);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-xs)}
.ax-proof-head p{font-size:var(--text-sm);color:var(--color-text-secondary)}
.ax-proof-kicker,.ax-showcase-title,.ax-value-kicker{font-size:var(--text-xs);color:var(--color-accent);letter-spacing:.07em}
.ax-proof-device-strip span,.ax-proof-row{border-color:var(--color-border-subtle);background:var(--color-surface-raised)}
.ax-value-grid{gap:10px;margin-bottom:24px}.ax-value-card{padding:16px;border-color:var(--color-border-subtle);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-xs)}.ax-value-card strong{font-size:var(--text-sm)}.ax-value-card p{font-size:var(--text-xs);color:var(--color-text-muted)}
.ax-showcase-head{margin-top:8px}.ax-showcase-hint{font-size:var(--text-xs);color:var(--color-text-muted)}
.ax-categories{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.ax-cat{min-height:158px;padding:16px;border-color:var(--color-border-subtle);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-xs)}.ax-cat:hover{border-color:var(--color-accent-border);background:var(--color-surface-hover);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.ax-cat-icon{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--color-border-subtle);border-radius:11px;background:var(--color-surface-raised);color:var(--color-accent);font-size:0}.ax-cat-icon svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ax-cat-name{font-size:var(--text-sm)}.ax-cat-count,.ax-cat-context,.ax-cat-link{font-size:var(--text-xs)}

.ax-auth-col{position:sticky;top:98px;padding:0;background:transparent;border:0;overflow:visible}
.ax-auth-card{width:100%;max-width:500px;margin:0;border:1px solid var(--color-border-default);border-radius:var(--radius-xl);background:color-mix(in srgb,var(--color-surface) 94%,transparent);box-shadow:var(--shadow-lg);backdrop-filter:blur(22px)}
.ax-auth-crown{padding:28px 28px 20px}.ax-auth-seal{width:46px;height:46px;border-radius:14px;background:var(--gradient-brand);box-shadow:var(--shadow-accent)}
.ax-auth-kicker{font-size:var(--text-xs);color:var(--color-accent);letter-spacing:.08em}.ax-auth-headline{font-size:clamp(1.65rem,3vw,2rem);letter-spacing:var(--tracking-tight)}.ax-auth-note{max-width:48ch;font-size:var(--text-sm);color:var(--color-text-secondary)}
.auth-tabs{margin:0 28px;padding:4px;border:1px solid var(--color-border-subtle);border-radius:var(--radius-sm);background:var(--color-surface-inset)}
.auth-tab{min-height:40px;border-radius:9px;font-size:var(--text-sm);font-weight:740;color:var(--color-text-muted)}.auth-tab.on{background:var(--color-surface-raised);color:var(--color-text-primary);box-shadow:var(--shadow-xs)}
.auth-feedback{margin:12px 28px 0;border-radius:var(--radius-sm);font-size:var(--text-sm)}
.auth-body{padding:20px 28px 26px}
.auth-panel-intro-premium{padding:14px 15px;border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background:var(--color-surface-raised)}
.auth-panel-intro-premium strong{font-size:var(--text-sm)}.auth-panel-intro-premium p{font-size:var(--text-xs);color:var(--color-text-muted)}
.auth-flow-guard{display:none}
.ax-social-shell{padding:16px;border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background:var(--color-surface-raised)}
.ax-social-head{margin-bottom:12px}.ax-social-eyebrow{font-size:var(--text-xs);color:var(--color-accent)}.ax-social-head strong{font-size:var(--text-sm)}.ax-social-privacy{font-size:var(--text-xs);color:var(--color-text-muted)}
.ax-social{gap:9px}.ax-social-btn{min-height:46px;border:1px solid var(--color-border-default);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text-secondary);box-shadow:none;font-size:var(--text-sm);font-weight:720;transition:var(--transition-standard)}.ax-social-btn:hover{border-color:var(--color-border-strong);background:var(--color-surface-hover);color:var(--color-text-primary);transform:translateY(-1px)}.ax-social-btn svg{width:18px;height:18px}
.ax-social-btn.is-coming-soon{opacity:.72;background:var(--color-surface-inset)}.ax-provider-badge{background:var(--color-warning-soft);color:var(--color-warning);border-color:color-mix(in srgb,var(--color-warning) 34%,transparent)}
.ax-coming-soon-note{font-size:var(--text-xs);line-height:1.5;color:var(--color-text-muted)}
.ax-social-more summary{min-height:42px;font-size:var(--text-xs);color:var(--color-text-secondary)}
.ax-divider{font-size:var(--text-xs);color:var(--color-text-muted)}
.ax-field{margin-bottom:16px}.ax-field-label{margin-bottom:7px}.ax-input-wrap{min-height:46px;border:1px solid var(--color-border-default);border-radius:var(--radius-sm);background:var(--color-surface-inset)}.ax-input-wrap:focus-within{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus)}
.field-inp{font-size:var(--text-sm)}.field-hint,.email-suggest-help{font-size:var(--text-xs)}
.ax-meta-row{gap:12px}.ax-check{font-size:var(--text-xs);color:var(--color-text-secondary)}.ax-forgot,.link-btn{font-size:var(--text-xs);color:var(--color-text-link)}
.ax-submit{min-height:48px;border-radius:var(--radius-sm);background:var(--color-accent);color:var(--color-accent-contrast);box-shadow:var(--shadow-accent);font-size:var(--text-sm);font-weight:800}.ax-submit:hover{background:var(--color-accent-hover);transform:translateY(-1px)}
.auth-submit-hint{font-size:var(--text-xs);color:var(--color-text-muted)}
.ax-secure-note{border-color:var(--color-border-subtle);background:var(--color-surface-raised);color:var(--color-text-muted);font-size:var(--text-xs)}
.auth-switch-note{font-size:var(--text-xs);color:var(--color-text-muted)}
.ax-advanced{margin:0 28px 24px;border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background:var(--color-surface-raised);overflow:hidden}
.ax-advanced>summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 14px;cursor:pointer;font-size:var(--text-sm);font-weight:740;color:var(--color-text-secondary);list-style:none}.ax-advanced>summary::-webkit-details-marker{display:none}.ax-advanced>summary::after{content:'+';font-size:20px;color:var(--color-text-muted)}.ax-advanced[open]>summary::after{content:'−'}
.ax-advanced-title{display:none}.ax-method-grid{padding:0 12px 12px;gap:8px}.ax-method{min-height:86px;border-color:var(--color-border-subtle);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text-secondary)}.ax-method:hover{border-color:var(--color-border-default);background:var(--color-surface-hover)}.ax-method-name{font-size:var(--text-xs)}.ax-method-desc,.ax-method-status{font-size:var(--text-2xs)}
.ax-auth-foot{margin:0 28px 28px;padding-top:18px;border-color:var(--color-border-subtle);font-size:var(--text-xs);color:var(--color-text-muted)}
.ax-page-footer{width:min(var(--content-max),calc(100% - 40px));margin:0 auto 28px;border-color:var(--color-border-subtle);background:var(--color-surface);box-shadow:var(--shadow-xs);border-radius:var(--radius-lg)}

/* Light-theme fixes for hard-coded legacy auth decoration */
:root[data-theme="light"] .auth-experience .ax-brand-name,:root[data-theme="system"] .auth-experience .ax-brand-name{background:var(--gradient-brand-text);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="light"] .ax-atmos::after{opacity:.25}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE + INPUT MODALITY
═══════════════════════════════════════════════════════════════ */
@media (hover:none){
  .btn,.tbtn,.ns-theme-button,.ns-command-button,.stage-action-primary,.stage-action-secondary,.ax-social-btn,.ax-submit{min-height:46px}
}
@media (max-width:1180px){
  .ax-shell{grid-template-columns:minmax(0,1fr) minmax(400px,460px);gap:34px;padding-inline:28px}
  .ax-categories{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ax-nav-links{display:none}
  .bar-right .tbtn span{display:none}
}
@media (max-width:900px){
  .ax-shell{display:block;padding:96px 20px 48px}.ax-story{padding-top:18px}.ax-story-inner{max-width:none}.ax-headline{font-size:clamp(2.7rem,9vw,4.4rem)}.ax-auth-col{position:relative;top:auto;margin-top:34px}.ax-auth-card{max-width:640px;margin:0 auto}.ax-categories{grid-template-columns:repeat(4,minmax(0,1fr))}
  .stage-insight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bar{padding-inline:10px}.url-bar{max-width:none}.bar-right{gap:.25rem}.tbtn{padding:0 .55rem}
}
@media (max-width:720px){
  :root{--bar-h:60px;--side-w:100%}
  .ns-theme-label{display:none}.ns-command-button{display:none}
  .ax-nav{height:68px;padding:0 14px}.ax-brand-tag,.ax-lang,.ax-nav-cta{display:none}.ax-brand-name{font-size:15px}
  .ax-shell{padding-top:84px}.ax-headline{font-size:clamp(2.55rem,12vw,3.65rem);letter-spacing:-.045em}.ax-sub{font-size:var(--text-base)}
  .ax-metrics{grid-template-columns:1fr}.ax-metric+.ax-metric::before{left:16px;right:16px;top:0;bottom:auto;width:auto;height:1px}.ax-value-grid{grid-template-columns:1fr 1fr}.ax-categories{grid-template-columns:1fr 1fr}
  .ax-auth-crown,.auth-body{padding-inline:20px}.auth-tabs,.auth-feedback,.ax-advanced,.ax-auth-foot{margin-inline:20px}.ax-social-primary{grid-template-columns:1fr}.ax-social-head{align-items:flex-start;gap:8px}.ax-social-privacy{display:none}
  .ax-page-footer{width:calc(100% - 24px);padding:18px;display:grid;gap:14px}.ax-page-footer-links{justify-content:flex-start;flex-wrap:wrap}
  .page-fixed{height:auto;min-height:100vh;overflow:visible;padding-bottom:72px}.sidebar{position:fixed;left:10px;right:10px;bottom:10px;top:auto;z-index:800;width:auto;height:58px;display:flex;align-items:center;justify-content:space-around;padding:5px;border:1px solid var(--color-border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);background:color-mix(in srgb,var(--color-surface-overlay) 94%,transparent);backdrop-filter:blur(18px)}.sidebar .si{flex:1;min-height:48px}.sidebar .si-sep{display:none}.sidebar .si-lbl{display:none}.with-sidebar{display:block;overflow:visible}.main-col{overflow:visible}.main-scroll{overflow:visible}.bar-logo{font-size:0}.bar-logo::after{content:'NS';font-size:var(--text-sm);font-weight:850}.bar-right .tbtn{display:none}.url-bar{height:40px;padding-inline:9px}.live-pill,.preview-mode-toggle{display:none}
  .stage-hero{margin-inline:14px}.stage-insight-grid,.fbar{margin-inline:14px}.stage-insight-grid{grid-template-columns:1fr}.stage-hero-actions{width:100%}.stage-action-primary,.stage-action-secondary{flex:1}
}
@media (max-width:430px){
  .ax-shell{padding-inline:14px}.ax-hero-actions{display:grid;grid-template-columns:1fr}.ax-hero-primary,.ax-hero-secondary{width:100%}.ax-value-grid,.ax-categories{grid-template-columns:1fr}.ax-cat{min-height:auto}.ax-auth-card{border-radius:var(--radius-lg)}.ax-auth-crown{padding-top:22px}.ax-auth-seal{width:42px;height:42px}.auth-tabs{grid-template-columns:1fr 1fr}.ax-method-grid{grid-template-columns:1fr 1fr}
  .ns-theme-menu{position:fixed;left:12px;right:12px;top:72px;width:auto}
}

@media (prefers-reduced-motion:reduce){
  .ax-atmos{display:none}.ax-headline,.ax-sub,.ax-eyebrow,.ax-metrics,.ax-hero-actions{animation:none!important}
}
@media (forced-colors:active){
  .logo-gem,.ax-mark,.ax-auth-seal,.btn-primary,.btn-p,.ax-submit,.ax-nav-cta,.stage-action-primary{background:ButtonFace;color:ButtonText;border:2px solid ButtonText;box-shadow:none}
  .u-g-text,.ax-brand-name,.ax-headline em{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}
}
.auth-trust-line{margin-top:.65rem;padding-top:.65rem;border-top:1px solid var(--color-border-subtle);font-size:var(--text-xs);color:var(--color-text-muted)}

/* ═══════════════════════════════════════════════════════════════
   LEGACY AUTH SPECIFICITY BRIDGE
   Keeps the semantic theme authoritative over older page selectors.
═══════════════════════════════════════════════════════════════ */
.auth-experience .auth-tabs{
  border-color:var(--color-border-subtle)!important;
  background:var(--color-surface-inset)!important;
  box-shadow:none!important;
}
.auth-experience .auth-tab{
  background:transparent!important;
  color:var(--color-text-muted)!important;
}
.auth-experience .auth-tab.on{
  background:var(--color-surface-raised)!important;
  color:var(--color-text-primary)!important;
  box-shadow:var(--shadow-xs)!important;
}
.auth-experience .ax-input-wrap{
  border-color:var(--color-border-default)!important;
  background:var(--color-surface-inset)!important;
  box-shadow:none!important;
}
.auth-experience .ax-input-wrap:focus-within{
  border-color:var(--color-border-focus)!important;
  background:var(--color-surface-raised)!important;
  box-shadow:var(--shadow-focus)!important;
}
.auth-experience .field-inp{
  border-color:transparent!important;
  background:transparent!important;
  color:var(--color-text-primary)!important;
  box-shadow:none!important;
}
.auth-experience .field-inp::placeholder{color:var(--color-text-faint)!important}
.auth-experience .field-inp:focus{
  border-color:transparent!important;
  background:transparent!important;
  box-shadow:none!important;
}
.auth-experience .ax-auth-foot{
  background:transparent!important;
  color:var(--color-text-muted)!important;
}
.auth-experience .ax-social-shell,
.auth-experience .auth-panel-intro-premium,
.auth-experience .ax-secure-note,
.auth-experience .ax-advanced{
  border-color:var(--color-border-subtle)!important;
  background:var(--color-surface-raised)!important;
}
.auth-experience .ax-social-btn,
.auth-experience .ax-method{
  border-color:var(--color-border-default)!important;
  background:var(--color-surface)!important;
  color:var(--color-text-secondary)!important;
}
.auth-experience .ax-social-btn:hover,
.auth-experience .ax-method:hover{
  border-color:var(--color-border-strong)!important;
  background:var(--color-surface-hover)!important;
  color:var(--color-text-primary)!important;
}
.auth-experience .ax-social-btn.is-coming-soon{
  background:var(--color-surface-inset)!important;
  color:var(--color-text-muted)!important;
}

@media (max-width:900px){
  .auth-experience .ax-shell{display:flex;flex-direction:column}
  .auth-experience .ax-auth-col{order:-1;margin:0 0 28px}
  .auth-experience .ax-story{order:2}
}