/* ============================================================
   AstraXY Portal — "Glitch / Hacked Universe" Design System
   Author: generated for Berk • 2026-02-15
   ============================================================ */

@layer reset, base, components, utilities;

/* -----------------------------
   Reset
------------------------------*/
@layer reset {
  *,
  *::before,
  *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  body { margin: 0; }

  img, svg, video, canvas { display: block; max-width: 100%; }

  input, button, textarea, select { font: inherit; color: inherit; }

  a { color: inherit; text-decoration: none; }

  button { border: 0; background: transparent; cursor: pointer; }

  :focus:not(:focus-visible) { outline: none; }
  :focus-visible {
    outline: 2px solid color-mix(in oklab, var(--accent) 65%, white);
    outline-offset: 3px;
  }
}

/* -----------------------------
   Base
------------------------------*/
@layer base {
  :root{
    /* Core palette */
    --bg0: #05070f;
    --bg1: #090c18;
    --bg2: #0b1020;

    --text: #e8eefc;
    --muted: color-mix(in oklab, var(--text) 65%, transparent);

    --card: color-mix(in oklab, white 6%, transparent);
    --card2: color-mix(in oklab, white 9%, transparent);
    --stroke: color-mix(in oklab, white 18%, transparent);
    --stroke2: color-mix(in oklab, white 12%, transparent);

    --accent: #79ff6b;   /* Acid Green */
    --accent2: #35c6ff;  /* Cyan */
    --accent3: #7c5cff;  /* Violet */

    --danger: #ff3b5c;
    --ok: #19d38a;

    --radius: 20px;
    --radius2: 26px;

    --shadow: 0 26px 70px rgba(0,0,0,0.45);
    --shadow2: 0 14px 40px rgba(0,0,0,0.35);

    --blur: 14px;

    --container: 1160px;

    /* Fluid type scale */
    --step--1: clamp(0.80rem, 0.77rem + 0.20vw, 0.92rem);
    --step-0:  clamp(0.95rem, 0.90rem + 0.30vw, 1.05rem);
    --step-1:  clamp(1.10rem, 1.02rem + 0.55vw, 1.35rem);
    --step-2:  clamp(1.30rem, 1.15rem + 0.90vw, 1.85rem);
    --step-3:  clamp(1.65rem, 1.35rem + 1.60vw, 2.60rem);
    --step-4:  clamp(2.10rem, 1.65rem + 2.60vw, 3.70rem);

    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  }

  html, body { height: 100%; }

  body{
    font-family: var(--sans);
    color: var(--text);
    background:
      radial-gradient(1100px 700px at 18% 12%, color-mix(in oklab, var(--accent3) 30%, transparent), transparent 55%),
      radial-gradient(1000px 600px at 82% 86%, color-mix(in oklab, var(--accent2) 26%, transparent), transparent 60%),
      radial-gradient(900px 540px at 52% 45%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 60%),
      linear-gradient(180deg, var(--bg0), var(--bg2));
    min-height: 100vh;
    overflow-x: hidden;
  }

  /* Global ambience: scanlines + noise + vignette */
  body::before{
    content:"";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
      repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.040) 0px,
        rgba(255,255,255,0.015) 1px,
        rgba(0,0,0,0.0) 3px
      );
    opacity: 0.25;
    mix-blend-mode: overlay;
    z-index: 0;
  }

  body::after{
    content:"";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
      url("/assets/img/noise.png") 0 0 / 420px 420px repeat,
      radial-gradient(1200px 720px at 50% -10%, rgba(255,255,255,0.09), transparent 55%),
      radial-gradient(1200px 720px at 50% 110%, rgba(0,0,0,0.55), transparent 45%);
    opacity: 0.22;
    mix-blend-mode: overlay;
    z-index: 0;
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  }

  .container{
    width: min(var(--container), calc(100% - 32px));
    margin-inline: auto;
  }

  .sr-only{
    position:absolute !important;
    width:1px;height:1px;
    padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);
    white-space:nowrap;border:0;
  }

  /* Subtle text rendering */
  h1,h2,h3{ letter-spacing: -0.02em; }

  .kicker{
    font: 800 var(--step--1) / 1.1 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--accent2) 68%, var(--text));
  }

  .muted{ color: var(--muted); }

  .mono{ font-family: var(--mono); }

  .divider{
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--stroke), transparent);
    opacity: 0.9;
  }
}

/* -----------------------------
   Components
------------------------------*/
@layer components {
  /* Header */
  .site-header{
    position: sticky;
    top: 0;
    z-index: 30;
    backdrop-filter: blur(var(--blur));
    background: color-mix(in oklab, var(--bg2) 70%, transparent);
    border-bottom: 1px solid color-mix(in oklab, var(--stroke) 70%, transparent);
  }

  .header-inner{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 0;
  }

  .brand{
    display:flex;
    align-items:center;
    gap: 12px;
    min-width: 170px;
  }

  .brand-mark{
    width: 42px; height: 42px;
    border-radius: 14px;
    border: 1px solid color-mix(in oklab, var(--stroke) 85%, transparent);
    background:
      url("/assets/img/astraverse_logo_1024.png") center/contain no-repeat,
      radial-gradient(circle at 20% 25%, color-mix(in oklab, var(--accent) 30%, transparent), transparent 55%),
      radial-gradient(circle at 78% 78%, color-mix(in oklab, var(--accent2) 20%, transparent), transparent 60%),
      color-mix(in oklab, white 7%, transparent);
    box-shadow: 0 16px 42px rgba(0,0,0,0.35);
    flex: 0 0 auto;
  }

  .brand-text{
    display:flex; flex-direction: column;
    line-height: 1.05;
  }
  .brand-text b{
    font-size: 16px;
    font-weight: 950;
  }
  .brand-text b span{ color: var(--accent2); }
  .brand-text i{
    font-style: normal;
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.06em;
  }

  .top-nav{
    display:flex;
    gap: 10px;
    align-items:center;
    padding: 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--stroke2) 80%, transparent);
    background: color-mix(in oklab, black 35%, transparent);
  }

  .navlink{
    position: relative;
    display:inline-flex;
    align-items:center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 999px;
    color: color-mix(in oklab, var(--text) 85%, transparent);
    font-weight: 850;
    font-size: 13px;
    transition: transform 160ms ease, background 160ms ease, color 160ms ease;
  }
  .navlink:hover{
    background: color-mix(in oklab, var(--card2) 65%, transparent);
    transform: translateY(-1px);
  }
  .navlink[aria-current="page"]{
    background: linear-gradient(180deg,
      color-mix(in oklab, var(--accent2) 22%, transparent),
      color-mix(in oklab, var(--accent3) 14%, transparent)
    );
    border: 1px solid color-mix(in oklab, var(--accent2) 35%, transparent);
  }

  .header-actions{ display:flex; align-items:center; gap: 10px; }

  .chip{
    display:inline-flex; align-items:center; gap: 8px;
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--stroke2) 75%, transparent);
    background: color-mix(in oklab, black 38%, transparent);
    color: color-mix(in oklab, var(--text) 88%, transparent);
    font-weight: 850;
    font-size: 13px;
    transition: transform 160ms ease, background 160ms ease;
  }
  .chip:hover{ transform: translateY(-1px); background: color-mix(in oklab, var(--card2) 70%, transparent); }

  .menu-btn{
    display:none;
    width: 42px; height: 42px;
    border-radius: 14px;
    border: 1px solid color-mix(in oklab, var(--stroke2) 80%, transparent);
    background: color-mix(in oklab, black 35%, transparent);
  }

  @media (max-width: 980px){
    .top-nav{ display:none; }
    .menu-btn{ display:inline-grid; place-items:center; }
    .brand{ min-width: auto; }
  }

  /* Buttons */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 16px;
    border: 1px solid color-mix(in oklab, var(--stroke2) 80%, transparent);
    background: color-mix(in oklab, black 35%, transparent);
    color: var(--text);
    font-weight: 950;
    font-size: 14px;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
    box-shadow: 0 10px 24px rgba(0,0,0,0.20);
  }
  .btn:hover{ transform: translateY(-1px); background: color-mix(in oklab, var(--card2) 70%, transparent); }
  .btn:active{ transform: translateY(0px) scale(0.99); }

  .btn--primary{
    border-color: color-mix(in oklab, var(--accent2) 35%, transparent);
    background: linear-gradient(180deg,
      color-mix(in oklab, var(--accent2) 38%, transparent),
      color-mix(in oklab, var(--accent3) 26%, transparent)
    );
  }
  .btn--primary:hover{
    box-shadow: 0 18px 44px rgba(0,0,0,0.35);
    background: linear-gradient(180deg,
      color-mix(in oklab, var(--accent2) 44%, transparent),
      color-mix(in oklab, var(--accent3) 32%, transparent)
    );
  }

  .btn--accent{
    border-color: color-mix(in oklab, var(--accent) 40%, transparent);
    background: linear-gradient(180deg,
      color-mix(in oklab, var(--accent) 30%, transparent),
      color-mix(in oklab, var(--accent2) 18%, transparent)
    );
  }

  .btn--ghost{
    background: transparent;
    box-shadow: none;
  }

  /* Cards */
  .card{
    position: relative;
    z-index: 1;
    border-radius: var(--radius2);
    background: linear-gradient(180deg, color-mix(in oklab, white 9%, transparent), color-mix(in oklab, white 5%, transparent));
    border: 1px solid color-mix(in oklab, var(--stroke) 75%, transparent);
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  .card::before{
    content:"";
    position:absolute; inset:-2px;
    background:
      radial-gradient(600px 340px at 20% 15%, color-mix(in oklab, var(--accent3) 26%, transparent), transparent 60%),
      radial-gradient(540px 300px at 88% 92%, color-mix(in oklab, var(--accent2) 18%, transparent), transparent 65%);
    opacity: 0.55;
    z-index: 0;
    pointer-events:none;
  }

  .card::after{
    content:"";
    position:absolute; inset:0;
    background:
      repeating-linear-gradient(
        to right,
        rgba(255,255,255,0.05) 0px,
        rgba(255,255,255,0.02) 1px,
        transparent 6px
      );
    opacity: 0.06;
    z-index: 0;
    pointer-events:none;
  }

  .card > *{ position: relative; z-index: 1; }

  .panel{
    border-radius: var(--radius);
    border: 1px solid color-mix(in oklab, var(--stroke2) 70%, transparent);
    background: color-mix(in oklab, black 32%, transparent);
    box-shadow: var(--shadow2);
  }

  .glass{
    background: color-mix(in oklab, white 7%, transparent);
    border: 1px solid color-mix(in oklab, var(--stroke2) 75%, transparent);
    backdrop-filter: blur(var(--blur));
  }

  .badge{
    display:inline-flex;
    align-items:center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    font: 900 12px/1 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid color-mix(in oklab, var(--accent2) 35%, transparent);
    background: color-mix(in oklab, var(--accent2) 18%, transparent);
    color: color-mix(in oklab, white 85%, var(--accent2));
  }

  .badge--live{
    border-color: color-mix(in oklab, var(--accent) 40%, transparent);
    background: color-mix(in oklab, var(--accent) 18%, transparent);
  }

  /* Hero */
  .hero{
    padding: 26px 0 12px;
  }

  .hero-grid{
    display:grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 16px;
    align-items: stretch;
  }
  @media (max-width: 980px){
    .hero-grid{ grid-template-columns: 1fr; }
  }

  .hero-card{
    padding: 22px;
  }

  .hero-title{
    margin: 10px 0 10px;
    font-size: var(--step-4);
    line-height: 0.98;
    font-weight: 980;
  }

  .hero-sub{
    margin: 0;
    font-size: var(--step-0);
    line-height: 1.7;
    color: color-mix(in oklab, var(--text) 78%, transparent);
    max-width: 62ch;
  }

  .hero-cta{
    margin-top: 16px;
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items:center;
  }

  .hero-stats{
    margin-top: 18px;
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
  }
  @media (max-width: 520px){
    .hero-stats{ grid-template-columns: 1fr; }
  }

  .stat{
    padding: 12px 12px;
    border-radius: 18px;
    border: 1px solid color-mix(in oklab, var(--stroke2) 70%, transparent);
    background: color-mix(in oklab, black 35%, transparent);
  }
  .stat b{ display:block; font-weight: 950; }
  .stat span{ display:block; margin-top: 4px; font-size: 13px; color: var(--muted); }

  /* Visual frame */
  .hero-frame{
    position: relative;
    border-radius: var(--radius2);
    overflow:hidden;
    border: 1px solid color-mix(in oklab, var(--stroke) 70%, transparent);
    background:
      url("/assets/img/ui_frame_gold_blue_1414x2000.png") center/cover no-repeat;
    min-height: 420px;
  }
  .hero-frame::before{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(5,7,15,0.05), rgba(5,7,15,0.86));
  }
  .hero-frame::after{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(700px 420px at 70% 25%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 60%),
      radial-gradient(620px 420px at 18% 78%, color-mix(in oklab, var(--accent2) 16%, transparent), transparent 64%);
    opacity: 0.65;
    mix-blend-mode: screen;
  }
  .hero-frame-content{
    position: relative;
    z-index: 1;
    padding: 18px;
    display:flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 420px;
    gap: 10px;
  }

  .frame-line{
    font: 900 13px/1.4 var(--mono);
    letter-spacing: 0.08em;
    color: color-mix(in oklab, white 85%, transparent);
  }

  /* Glitch text */
  .glitch{
    position: relative;
    display:inline-block;
    text-shadow:
      0 0 18px color-mix(in oklab, var(--accent2) 35%, transparent),
      0 0 22px color-mix(in oklab, var(--accent) 22%, transparent);
  }
  .glitch::before,
  .glitch::after{
    content: attr(data-text);
    position:absolute;
    left:0; top:0;
    width:100%;
    overflow:hidden;
    clip-path: inset(0 0 0 0);
    opacity: 0.85;
    pointer-events:none;
  }
  .glitch::before{
    transform: translate(1.5px, 0);
    color: color-mix(in oklab, var(--accent2) 78%, white);
    animation: glitchShift 2.4s infinite linear alternate-reverse;
    mix-blend-mode: screen;
  }
  .glitch::after{
    transform: translate(-1.5px, 0);
    color: color-mix(in oklab, var(--accent) 72%, white);
    animation: glitchShift2 1.9s infinite linear alternate-reverse;
    mix-blend-mode: screen;
  }

  @keyframes glitchShift{
    0%{ clip-path: inset(0 0 88% 0); }
    10%{ clip-path: inset(12% 0 64% 0); }
    20%{ clip-path: inset(44% 0 38% 0); }
    30%{ clip-path: inset(72% 0 18% 0); transform: translate(2px, -1px); }
    40%{ clip-path: inset(14% 0 74% 0); }
    50%{ clip-path: inset(52% 0 28% 0); transform: translate(1px, 1px); }
    60%{ clip-path: inset(30% 0 52% 0); }
    70%{ clip-path: inset(76% 0 16% 0); transform: translate(2px, 0); }
    80%{ clip-path: inset(18% 0 70% 0); }
    90%{ clip-path: inset(58% 0 22% 0); transform: translate(0, 1px); }
    100%{ clip-path: inset(2% 0 86% 0); }
  }
  @keyframes glitchShift2{
    0%{ clip-path: inset(80% 0 6% 0); }
    15%{ clip-path: inset(38% 0 40% 0); }
    25%{ clip-path: inset(12% 0 72% 0); transform: translate(-2px, 1px); }
    45%{ clip-path: inset(66% 0 18% 0); }
    55%{ clip-path: inset(28% 0 56% 0); transform: translate(-1px, -1px); }
    75%{ clip-path: inset(52% 0 28% 0); }
    100%{ clip-path: inset(86% 0 4% 0); transform: translate(-2px, 0); }
  }

  /* Sections */
  .section{
    padding: 18px 0;
  }

  .section-head{
    display:flex;
    align-items:flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }

  .section-title{
    margin: 0;
    font-size: var(--step-2);
    font-weight: 950;
  }

  .section-actions{ display:flex; gap: 10px; flex-wrap: wrap; }

  /* Cards grid */
  .grid{
    display:grid;
    gap: 12px;
  }
  .grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (max-width: 980px){
    .grid--3, .grid--2 { grid-template-columns: 1fr; }
  }

  /* Poster card (Seasons) */
  .poster{
    display:grid;
    grid-template-columns: 160px 1fr;
    gap: 14px;
    padding: 14px;
    align-items: stretch;
  }
  @media (max-width: 640px){
    .poster{ grid-template-columns: 1fr; }
  }

  .poster-art{
    border-radius: 18px;
    border: 1px solid color-mix(in oklab, var(--stroke2) 70%, transparent);
    overflow:hidden;
    aspect-ratio: 3 / 4;
    background: color-mix(in oklab, black 35%, transparent);
  }
  .poster-art img{ width: 100%; height: 100%; object-fit: cover; }

  .poster-body{
    display:flex;
    flex-direction: column;
    gap: 10px;
    justify-content: space-between;
  }
  .poster-body h3{
    margin: 0;
    font-size: var(--step-1);
    font-weight: 950;
  }

  .poster-meta{
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
  }

  .poster-cta{ display:flex; gap: 10px; flex-wrap: wrap; align-items:center; }

  /* Faction cards */
  .faction{
    padding: 16px;
    transition: transform 180ms ease, box-shadow 180ms ease;
  }
  .faction:hover{ transform: translateY(-2px); box-shadow: 0 26px 70px rgba(0,0,0,0.55); }
  .faction h3{ margin: 6px 0 8px; font-size: 18px; }
  .faction p{ margin: 0; color: var(--muted); line-height: 1.6; }
  .sig{
    font: 900 12px/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.8;
  }
  .sig--w{ color: color-mix(in oklab, white 90%, var(--accent2)); }
  .sig--q{ color: color-mix(in oklab, white 90%, var(--accent)); }
  .sig--s{ color: color-mix(in oklab, white 90%, var(--accent3)); }

  /* Footer */
  .site-footer{
    padding: 26px 0 40px;
    color: color-mix(in oklab, var(--text) 72%, transparent);
  }

  .footer-grid{
    display:grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 14px;
    align-items:start;
  }
  @media (max-width: 980px){
    .footer-grid{ grid-template-columns: 1fr; }
  }

  .footer-links{
    display:flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .footer-links a{
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--stroke2) 70%, transparent);
    background: color-mix(in oklab, black 35%, transparent);
    font-weight: 850;
    font-size: 13px;
  }
  .footer-links a:hover{ background: color-mix(in oklab, var(--card2) 70%, transparent); }

  /* Mobile dock */
  .dock{
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    z-index: 40;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    display:none;
  }
  .dock-inner{
    width: min(var(--container), calc(100% - 16px));
    margin: 0 auto;
    border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--stroke) 70%, transparent);
    background: color-mix(in oklab, var(--bg2) 78%, transparent);
    backdrop-filter: blur(var(--blur));
    box-shadow: 0 26px 70px rgba(0,0,0,0.50);
    display:flex;
    justify-content: space-between;
    gap: 8px;
    padding: 8px;
  }
  .dock a{
    flex:1;
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    gap: 4px;
    padding: 10px 8px;
    border-radius: 999px;
    font: 900 11px/1 var(--mono);
    letter-spacing: 0.08em;
    color: color-mix(in oklab, var(--text) 72%, transparent);
  }
  .dock a svg{ width: 18px; height: 18px; opacity: 0.9; }
  .dock a[aria-current="page"]{
    background: linear-gradient(180deg,
      color-mix(in oklab, var(--accent2) 24%, transparent),
      color-mix(in oklab, var(--accent3) 14%, transparent)
    );
    border: 1px solid color-mix(in oklab, var(--accent2) 35%, transparent);
    color: var(--text);
  }

  @media (max-width: 980px){
    .dock{ display:block; }
    main{ padding-bottom: 92px; } /* room for dock */
  }

  /* Nav sheet (mobile) */
  .sheet{
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
  }
  .sheet[data-open="true"]{ display:block; }

  .sheet-backdrop{
    position:absolute; inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(6px);
  }

  .sheet-panel{
    position:absolute;
    left: 10px; right: 10px;
    bottom: 10px;
    border-radius: 28px;
    border: 1px solid color-mix(in oklab, var(--stroke) 70%, transparent);
    background: color-mix(in oklab, var(--bg2) 85%, transparent);
    backdrop-filter: blur(var(--blur));
    box-shadow: 0 26px 70px rgba(0,0,0,0.55);
    padding: 12px;
  }

  .sheet-head{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 10px 6px;
  }
  .sheet-head b{ font-weight: 950; letter-spacing: -0.01em; }
  .sheet-close{
    width: 42px; height: 42px;
    border-radius: 14px;
    border: 1px solid color-mix(in oklab, var(--stroke2) 70%, transparent);
    background: color-mix(in oklab, black 35%, transparent);
    display:grid; place-items:center;
  }

  .sheet-links{
    display:grid;
    gap: 8px;
    padding: 8px;
  }

  .sheet-links a{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px;
    border-radius: 18px;
    border: 1px solid color-mix(in oklab, var(--stroke2) 70%, transparent);
    background: color-mix(in oklab, black 30%, transparent);
    font-weight: 950;
  }
  .sheet-links a span{ color: var(--muted); font-weight: 850; }
  .sheet-links a:hover{ background: color-mix(in oklab, var(--card2) 70%, transparent); }

  /* Forms */
  .field{
    display:flex;
    flex-direction: column;
    gap: 6px;
  }
  .label{
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--text) 70%, transparent);
    font-family: var(--mono);
  }
  .input{
    height: 46px;
    border-radius: 16px;
    border: 1px solid color-mix(in oklab, var(--stroke2) 75%, transparent);
    background: color-mix(in oklab, black 35%, transparent);
    padding: 0 14px;
    outline: none;
    transition: box-shadow 160ms ease, border-color 160ms ease;
  }
  .input:focus{
    border-color: color-mix(in oklab, var(--accent2) 40%, transparent);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent2) 18%, transparent);
  }

  .msg{
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--muted);
    font-family: var(--mono);
  }
  .msg.ok{ color: color-mix(in oklab, var(--ok) 72%, white); }
  .msg.bad{ color: color-mix(in oklab, var(--danger) 78%, white); }

  /* Utility layout */
  .split{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  @media (max-width: 980px){
    .split{ grid-template-columns: 1fr; }
  }

  /* Tables */
  .table{
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
  }
  .table th, .table td{
    padding: 12px 10px;
    border-bottom: 1px solid color-mix(in oklab, var(--stroke2) 65%, transparent);
    text-align: left;
  }
  .table th{ color: color-mix(in oklab, var(--text) 82%, transparent); font-weight: 950; }
  .table td{ color: color-mix(in oklab, var(--text) 78%, transparent); }
}

/* -----------------------------
   Utilities
------------------------------*/
@layer utilities {
  .mt-0{ margin-top: 0 !important; }
  .mt-6{ margin-top: 6px !important; }
  .mt-10{ margin-top: 10px !important; }
  .mt-14{ margin-top: 14px !important; }
  .mt-18{ margin-top: 18px !important; }
  .mt-22{ margin-top: 22px !important; }
  .p-14{ padding: 14px !important; }
  .p-18{ padding: 18px !important; }
  .p-22{ padding: 22px !important; }
  .center{ display:grid; place-items:center; }
  .hide-desktop{ display:none; }
  @media (max-width: 980px){ .hide-mobile{ display:none !important; } .hide-desktop{ display:block; } }
}


/* -----------------------------
   Page-specific components (AI / Vault / Atlas)
------------------------------*/
@layer components {

  /* AI Chat */
  .chat-shell{
    display:grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .chat-log{
    height: min(62vh, 560px);
    overflow:auto;
    padding: 14px;
    border-radius: 24px;
    border: 1px solid color-mix(in oklab, var(--stroke) 70%, transparent);
    background: color-mix(in oklab, black 33%, transparent);
    box-shadow: var(--shadow2);
  }

  .chat-bubble{
    border-radius: 20px;
    border: 1px solid color-mix(in oklab, var(--stroke2) 70%, transparent);
    background: color-mix(in oklab, white 6%, transparent);
    padding: 12px 12px;
    margin-bottom: 10px;
  }
  .chat-bubble.me{
    background: linear-gradient(180deg,
      color-mix(in oklab, var(--accent2) 22%, transparent),
      color-mix(in oklab, var(--accent3) 10%, transparent)
    );
    border-color: color-mix(in oklab, var(--accent2) 35%, transparent);
  }
  .chat-bubble.astra{
    background: linear-gradient(180deg,
      color-mix(in oklab, var(--accent) 14%, transparent),
      color-mix(in oklab, white 4%, transparent)
    );
    border-color: color-mix(in oklab, var(--accent) 28%, transparent);
  }
  .chat-meta{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    font: 900 12px/1 var(--mono);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--text) 78%, transparent);
  }
  .chat-text{
    color: color-mix(in oklab, var(--text) 86%, transparent);
    line-height: 1.7;
    font-size: 14px;
  }
  .chat-typing .chat-text{ opacity: 0.75; }
  .chat-form{
    display:flex;
    gap: 10px;
    align-items:center;
    flex-wrap: wrap;
  }
  .chat-form .input{ flex: 1; min-width: 220px; }
  .chat-tools{
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items:center;
  }

  .select{
    height: 46px;
    border-radius: 16px;
    border: 1px solid color-mix(in oklab, var(--stroke2) 75%, transparent);
    background: color-mix(in oklab, black 35%, transparent);
    padding: 0 12px;
  }

  /* Vault */
  .vault-filters{
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items:center;
  }

  .tag-chips{
    display:flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  /* Atlas */
  .atlas-layout{
    display:grid;
    grid-template-columns: 0.9fr 1.5fr 0.8fr;
    gap: 12px;
    align-items:start;
  }
  @media (max-width: 980px){
    .atlas-layout{ grid-template-columns: 1fr; }
  }

  .atlas-list{
    display:grid;
    gap: 8px;
  }

  .atlas-item{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px;
    border-radius: 18px;
    border: 1px solid color-mix(in oklab, var(--stroke2) 70%, transparent);
    background: color-mix(in oklab, black 30%, transparent);
    font-weight: 950;
    text-align:left;
  }
  .atlas-item:hover{ background: color-mix(in oklab, var(--card2) 70%, transparent); }

  /* Modal sizing tweaks (reuse .sheet styles) */
  .modal-panel{
    max-width: 980px;
    margin: 0 auto;
  }
  .modal-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items:start;
  }
  @media (max-width: 980px){
    .modal-grid{ grid-template-columns: 1fr; }
  }

  textarea.codebox{
    width: 100%;
    min-height: 92px;
    resize: vertical;
    border-radius: 18px;
    border: 1px solid color-mix(in oklab, var(--stroke2) 70%, transparent);
    background: color-mix(in oklab, black 40%, transparent);
    padding: 12px 12px;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.5;
    color: color-mix(in oklab, var(--text) 86%, transparent);
  }

}