/* ============================================================
   GUNDAM TCG NEXUS — cockpit / mobile-suit HUD design system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Rajdhani:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  /* base gunmetal surfaces */
  --bg-0:#0a0d12;
  --bg-1:#0f141b;
  --bg-2:#161c26;
  --bg-3:#1e2733;
  --line:#2b3644;
  --line-bright:#3d4d61;

  /* HUD accents */
  --amber:#ffb020;
  --amber-dim:#8a5f13;
  --cyan:#3fe0d0;
  --cyan-dim:#1c6b64;
  --danger:#ff4d4d;
  --ok:#5be27c;

  /* card-color faction accents (mirrors real Gundam TCG card colors) */
  --c-blue:#3e8ef7;
  --c-white:#e9edf3;
  --c-green:#39c975;
  --c-red:#f0473e;
  --c-purple:#b06bf0;
  --c-none:#7c8896;

  --text-0:#eef2f6;
  --text-1:#aab6c4;
  --text-2:#6d7a89;

  --radius:2px;
  --font-display:'Chakra Petch', sans-serif;
  --font-body:'Rajdhani', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg-0);
  color:var(--text-0);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  min-height:100vh;
  position:relative;
}

/* atmospheric backdrop: grid + scanlines + vignette */
body::before{
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(63,224,208,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63,224,208,0.05) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, black 40%, transparent 100%);
}
body::after{
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% -10%, rgba(63,224,208,0.06), transparent 60%),
             radial-gradient(ellipse 100% 60% at 100% 100%, rgba(255,176,32,0.05), transparent 60%);
}

a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; letter-spacing:0.02em; margin:0;}

::selection{background:var(--amber); color:var(--bg-0);}

/* scrollbar */
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-track{background:var(--bg-1);}
::-webkit-scrollbar-thumb{background:var(--line-bright); border-radius:0;}
::-webkit-scrollbar-thumb:hover{background:var(--cyan-dim);}

/* ---------- layout shell ---------- */
.shell{position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column;}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(16px,4vw,40px);
  height:64px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(15,20,27,0.95), rgba(15,20,27,0.85));
  backdrop-filter:blur(6px);
  position:sticky; top:0; z-index:50;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:700;
  font-size:1.05rem; letter-spacing:0.06em; text-transform:uppercase;
}
.brand .mark{
  width:26px; height:26px; flex:none;
  background:var(--amber);
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  position:relative;
}
.brand .mark::after{
  content:''; position:absolute; inset:5px;
  background:var(--bg-0);
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.brand small{color:var(--cyan); font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.15em; display:block; font-weight:500;}

.navlinks{display:flex; gap:2px; align-items:center;}
.navlinks a{
  font-family:var(--font-display); font-size:0.8rem; letter-spacing:0.05em; text-transform:uppercase;
  padding:10px 16px; color:var(--text-1); border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s, background .15s;
}
.navlinks a:hover{color:var(--text-0); background:rgba(255,255,255,0.03);}
.navlinks a.active{color:var(--amber); border-bottom-color:var(--amber);}
.navlinks a.discord-link{color:#5865F2;}
.navlinks a.discord-link:hover{color:#7983f5; background:rgba(88,101,242,0.1);}

.nav-group{display:flex; align-items:center; gap:18px;}
.authbox{display:flex; align-items:center;}
.auth-user{display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:0.78rem; color:var(--text-1); cursor:pointer; position:relative; padding:6px 4px;}
.auth-user .avatar{width:26px; height:26px; border-radius:50%; background:var(--amber); color:#1a1300; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:0.75rem; flex:none;}
.auth-menu{position:absolute; top:calc(100% + 4px); right:0; background:var(--bg-2); border:1px solid var(--line-bright); min-width:160px; z-index:80; box-shadow:0 12px 28px rgba(0,0,0,0.5);}
.auth-menu button,.auth-menu a{display:block; width:100%; text-align:left; padding:10px 14px; background:none; border:none; color:var(--text-1); font-family:var(--font-mono); font-size:0.78rem; cursor:pointer; text-decoration:none; box-sizing:border-box;}
.auth-menu button:hover,.auth-menu a:hover{background:var(--bg-3); color:var(--text-0);}
.auth-sync-note{font-family:var(--font-mono); font-size:0.65rem; color:var(--text-2); padding:6px 14px 10px; border-top:1px solid var(--line);}
.navtoggle{display:none;}

main{flex:1; position:relative; z-index:1;}

.site-footer{border-top:1px solid var(--line);}
.footer-disclaimer{
  padding:16px clamp(16px,4vw,40px) 0;
  color:var(--text-2); font-size:0.74rem; font-family:var(--font-mono); line-height:1.6;
  max-width:1100px;
}
.footer-disclaimer strong{color:var(--text-1);}
.footer{
  padding:14px clamp(16px,4vw,40px) 22px;
  color:var(--text-2); font-size:0.78rem; font-family:var(--font-mono);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}
.footer-links{
  padding:0 clamp(16px,4vw,40px) 16px;
  display:flex; gap:16px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:0.76rem;
}
.footer-links a{color:var(--cyan);}
.footer-links a:hover{color:var(--text-0);}
.footer-links a.discord-link{color:#5865F2;}
.footer-links a.discord-link:hover{color:#7983f5;}

.callout{padding:10px 12px; border-left:3px solid var(--line-bright); background:var(--bg-2); font-size:0.83rem; margin-bottom:8px; color:var(--text-1);}
.callout.good{border-color:var(--ok);}
.callout.warn{border-color:var(--amber); color:var(--amber);}
.callout.info{border-color:var(--cyan);}

/* ---------- generic building blocks ---------- */
.container{max-width:1400px; margin:0 auto; padding:0 clamp(16px,4vw,40px);}

.eyebrow{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.25em; text-transform:uppercase;
  color:var(--cyan); display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.eyebrow::before{content:''; width:24px; height:1px; background:var(--cyan);}

.panel{
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border:1px solid var(--line);
  position:relative;
}
.panel::before{ /* corner bracket accents */
  content:''; position:absolute; top:-1px; left:-1px; width:14px; height:14px;
  border-top:2px solid var(--amber); border-left:2px solid var(--amber);
}
.panel::after{
  content:''; position:absolute; bottom:-1px; right:-1px; width:14px; height:14px;
  border-bottom:2px solid var(--cyan); border-right:2px solid var(--cyan);
}

.btn{
  font-family:var(--font-display); font-weight:600; font-size:0.82rem; letter-spacing:0.06em; text-transform:uppercase;
  padding:11px 22px; border:1px solid var(--line-bright); background:var(--bg-3); color:var(--text-0);
  cursor:pointer; clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition:all .15s; display:inline-flex; align-items:center; gap:8px;
}
.btn:hover{border-color:var(--cyan); color:var(--cyan); background:var(--bg-2);}
.btn.primary{background:var(--amber); border-color:var(--amber); color:#1a1300;}
.btn.primary:hover{background:#ffc04d; color:#1a1300;}
.btn.ghost{background:transparent;}
.btn.danger{border-color:var(--danger); color:var(--danger); background:transparent;}
.btn.danger:hover{background:rgba(255,77,77,0.1);}
.btn:disabled{opacity:0.35; cursor:not-allowed;}
.btn.sm{padding:7px 14px; font-size:0.72rem;}

input,select,textarea{
  font-family:var(--font-body); font-size:0.95rem; color:var(--text-0);
  background:var(--bg-1); border:1px solid var(--line-bright); padding:10px 12px; border-radius:var(--radius);
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan-dim);}
label{font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-1); display:block; margin-bottom:6px;}

.tag{
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.05em; text-transform:uppercase;
  padding:3px 8px; border:1px solid var(--line-bright); color:var(--text-1); display:inline-block;
}

/* faction color dot */
.dot{width:9px; height:9px; border-radius:50%; display:inline-block; flex:none;}

/* ---------- hero ---------- */
.hero{
  padding:80px clamp(16px,4vw,40px) 60px;
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center;
  max-width:1400px; margin:0 auto;
}
.hero h1{
  font-size:clamp(2.4rem, 5vw, 4.2rem); line-height:0.98; text-transform:uppercase;
  background:linear-gradient(180deg, var(--text-0) 60%, var(--text-1));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero h1 em{font-style:normal; color:var(--amber); -webkit-text-fill-color:var(--amber);}
.hero p.lead{color:var(--text-1); font-size:1.1rem; max-width:52ch; margin-top:18px;}
.hero .actions{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}

.hud-frame{
  aspect-ratio:3/4; border:1px solid var(--line-bright); position:relative; overflow:hidden;
  background:var(--bg-2);
  clip-path:polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
}
.hud-frame img{width:100%; height:100%; object-fit:cover; display:block;}
.hud-frame .scan{position:absolute; inset:0; background:repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0 2px, transparent 2px 4px); pointer-events:none; mix-blend-mode:overlay;}
.hud-frame .corner-label{position:absolute; top:10px; left:14px; font-family:var(--font-mono); font-size:0.65rem; color:var(--cyan); letter-spacing:0.1em;}

.stat-strip{display:flex; gap:0; border:1px solid var(--line); margin-top:60px;}
.stat-strip .stat{flex:1; padding:18px 20px; border-right:1px solid var(--line);}
.stat-strip .stat:last-child{border-right:none;}
.stat-strip .num{font-family:var(--font-display); font-size:1.8rem; color:var(--amber);}
.stat-strip .lbl{font-family:var(--font-mono); font-size:0.68rem; color:var(--text-2); text-transform:uppercase; letter-spacing:0.08em;}

.feature-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); margin:0 auto; max-width:1400px;}
.feature-card{background:var(--bg-1); padding:28px 24px; transition:background .15s;}
.feature-card:hover{background:var(--bg-2);}
.feature-card .icon{font-family:var(--font-mono); color:var(--cyan); font-size:0.75rem; letter-spacing:0.1em; margin-bottom:14px;}
.feature-card h3{font-size:1.1rem; margin-bottom:8px;}
.feature-card p{color:var(--text-1); font-size:0.88rem; margin:0 0 16px;}

/* ---------- page header (non-hero pages) ---------- */
.pagehead{padding:44px clamp(16px,4vw,40px) 28px; border-bottom:1px solid var(--line);}
.pagehead h1{font-size:clamp(1.8rem,3vw,2.6rem); text-transform:uppercase;}
.pagehead p{color:var(--text-1); margin-top:10px; max-width:70ch;}

/* ---------- card grid & card component ---------- */
.toolbar{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  padding:18px clamp(16px,4vw,40px); border-bottom:1px solid var(--line); background:var(--bg-1);
  position:sticky; top:64px; z-index:40;
}
.toolbar input[type=search]{flex:1; min-width:200px;}
.chip-row{display:flex; gap:6px; flex-wrap:wrap;}
.chip{
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.05em; text-transform:uppercase;
  padding:7px 12px; border:1px solid var(--line-bright); background:var(--bg-2); color:var(--text-1); cursor:pointer;
  display:flex; align-items:center; gap:6px; transition:all .12s;
}
.chip:hover{color:var(--text-0); border-color:var(--text-1);}
.chip.active{background:var(--amber); border-color:var(--amber); color:#1a1300;}
.result-count{font-family:var(--font-mono); font-size:0.75rem; color:var(--text-2); margin-left:auto; white-space:nowrap;}

.card-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(170px,1fr)); gap:16px;
  padding:24px clamp(16px,4vw,40px) 60px;
}
.gcard{
  background:var(--bg-2); border:1px solid var(--line); cursor:pointer; overflow:hidden;
  transition:transform .15s, border-color .15s, box-shadow .15s; position:relative;
}
.gcard:hover{transform:translateY(-3px); border-color:var(--cyan); box-shadow:0 8px 24px rgba(0,0,0,0.4);}
.gcard .imgwrap{aspect-ratio:63/88; background:var(--bg-3); overflow:hidden; position:relative;}
.gcard img{width:100%; height:100%; object-fit:cover; display:block;}
.price-badge{position:absolute; top:6px; right:6px; background:rgba(10,13,18,0.85); border:1px solid var(--line-bright); color:var(--ok); font-family:var(--font-mono); font-size:0.65rem; padding:2px 7px; z-index:2;}

/* image loading: skeleton shimmer until the real image paints, then crossfade in */
.lazy-img{opacity:0; transition:opacity .35s ease;}
.lazy-img.loaded{opacity:1;}
.imgwrap::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(100deg, var(--bg-3) 30%, var(--bg-2) 50%, var(--bg-3) 70%);
  background-size:200% 100%;
  animation:img-shimmer 1.4s ease-in-out infinite;
}
.imgwrap.img-loaded::before{display:none;}
@keyframes img-shimmer{
  0%{background-position:180% 0;}
  100%{background-position:-20% 0;}
}
.img-failed-label{
  position:relative; z-index:1; height:100%; width:100%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:14px; box-sizing:border-box;
  font-family:var(--font-mono); font-size:0.68rem; line-height:1.4; color:var(--text-2);
}
.gcard .colorbar{position:absolute; top:0; left:0; right:0; height:4px;}
.gcard .meta{padding:10px 10px 12px;}
.gcard .name{font-family:var(--font-display); font-size:0.85rem; font-weight:600; line-height:1.2; margin-bottom:6px; height:2.4em; overflow:hidden;}
.gcard .sub{display:flex; justify-content:space-between; align-items:center; font-family:var(--font-mono); font-size:0.65rem; color:var(--text-2); text-transform:uppercase;}
.gcard .owned-line{font-family:var(--font-mono); font-size:0.62rem; color:var(--ok); margin-top:4px; letter-spacing:0.03em;}
.gcard .qty-badge{position:absolute; top:6px; left:6px; background:var(--amber); color:#1a1300; font-family:var(--font-display); font-weight:700; font-size:0.7rem; padding:2px 7px; z-index:2; box-shadow:0 2px 8px rgba(0,0,0,0.4);}
.gcard .addbtn{position:absolute; bottom:0; left:0; right:0; background:var(--amber); color:#1a1300; text-align:center; font-family:var(--font-display); font-size:0.72rem; padding:7px; opacity:0; transform:translateY(100%); transition:all .15s; letter-spacing:0.05em; text-transform:uppercase;}
.gcard:hover .addbtn{opacity:1; transform:translateY(0);}
.gcard .qty-stepper{position:absolute; bottom:0; left:0; right:0; display:flex; align-items:stretch; background:rgba(10,13,18,0.92); border-top:1px solid var(--line-bright);}
.gcard .qty-stepper button{flex:none; width:28px; background:var(--bg-3); border:none; color:var(--text-0); font-family:var(--font-display); font-size:0.9rem; cursor:pointer; line-height:1;}
.gcard .qty-stepper button:hover:not(:disabled){background:var(--amber); color:#1a1300;}
.gcard .qty-stepper button:disabled{opacity:0.3; cursor:not-allowed;}
.gcard .qty-stepper span{flex:1; text-align:center; font-family:var(--font-mono); font-size:0.78rem; display:flex; align-items:center; justify-content:center; color:var(--amber);}
.qty-stepper{display:flex; align-items:stretch; border:1px solid var(--line-bright);}
.qty-stepper button{flex:none; width:32px; background:var(--bg-3); border:none; color:var(--text-0); font-family:var(--font-display); font-size:1rem; cursor:pointer;}
.qty-stepper button:hover{background:var(--amber); color:#1a1300;}
.qty-stepper span{flex:1; text-align:center; font-family:var(--font-mono); font-size:0.85rem; display:flex; align-items:center; justify-content:center;}

.empty-state{padding:80px 20px; text-align:center; color:var(--text-2);}
.empty-state .glyph{font-size:2.5rem; margin-bottom:14px; color:var(--line-bright);}

/* ---------- modal ---------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(6,8,11,0.82); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; z-index:200; padding:20px;
}
.modal{
  background:var(--bg-1); border:1px solid var(--line-bright); max-width:920px; width:100%;
  max-height:88vh; overflow:auto; display:grid; grid-template-columns:320px 1fr; position:relative;
}
.modal .close{position:absolute; top:10px; right:10px; background:var(--bg-3); border:1px solid var(--line-bright); color:var(--text-1); width:32px; height:32px; cursor:pointer; font-size:1rem; z-index:5;}
.modal .close:hover{color:var(--danger); border-color:var(--danger);}
.modal .art{background:var(--bg-3); position:relative; overflow:hidden;}
.modal .art img{width:100%; display:block;}
.modal .info{padding:26px;}
.modal .info h2{font-size:1.4rem; margin-bottom:4px;}
.modal .code{font-family:var(--font-mono); color:var(--cyan); font-size:0.78rem; margin-bottom:16px; display:block;}
.statgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); margin:16px 0; border:1px solid var(--line);}
.statgrid div{background:var(--bg-2); padding:10px 12px;}
.statgrid .k{font-family:var(--font-mono); font-size:0.62rem; color:var(--text-2); text-transform:uppercase; letter-spacing:0.06em;}
.statgrid .v{font-family:var(--font-display); font-size:1.15rem; margin-top:2px;}
.effect-box{background:var(--bg-2); border-left:2px solid var(--amber); padding:12px 14px; font-size:0.9rem; line-height:1.5; margin-top:14px; color:var(--text-1);}
.taglist{display:flex; gap:6px; flex-wrap:wrap; margin-top:14px;}

/* ---------- deck builder: sectioned zones, summary chips, filter chip rows ---------- */
.summary-chips{display:flex; flex-wrap:wrap; gap:6px;}
.summary-chip{font-family:var(--font-mono); font-size:0.68rem; padding:5px 10px; border:1px solid var(--line-bright); display:flex; align-items:center; gap:6px; color:var(--text-1);}
.summary-chip b{color:var(--text-0); font-family:var(--font-display);}
.summary-chip.over{border-color:var(--danger); color:var(--danger);}

.deck-section{margin-bottom:4px;}
.deck-section-head{display:flex; justify-content:space-between; align-items:center; padding:8px 10px; background:var(--bg-3); font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-1); cursor:pointer; user-select:none;}
.deck-section-head:hover{color:var(--text-0);}
.deck-section-head .chev{transition:transform .15s;}
.deck-section.collapsed .chev{transform:rotate(-90deg);}
.deck-section.collapsed .deck-section-body{display:none;}

.filter-chip-row{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
.filter-chip-row.collapsed-row{max-height:64px; overflow:hidden;}
.chip-more{font-family:var(--font-mono); font-size:0.68rem; color:var(--cyan); cursor:pointer; padding:7px 4px; text-decoration:underline;}

.icon-btn{background:var(--bg-3); border:1px solid var(--line-bright); color:var(--text-1); width:30px; height:30px; cursor:pointer; font-size:0.8rem;}
.icon-btn:hover{border-color:var(--cyan); color:var(--cyan);}

.import-modal .modal{grid-template-columns:1fr; max-width:560px;}
.import-modal textarea{width:100%; min-height:220px; font-family:var(--font-mono); font-size:0.82rem; resize:vertical;}

/* ---------- searchable multi-select dropdown (traits / pilot links) ---------- */
.combo{position:relative;}
.combo-input-wrap{display:flex; align-items:stretch; border:1px solid var(--line-bright); background:var(--bg-1);}
.combo-input-wrap input{flex:1; border:none; background:transparent; padding:9px 10px; font-size:0.85rem;}
.combo-input-wrap input:focus{outline:none; box-shadow:none;}
.combo-count{font-family:var(--font-mono); font-size:0.68rem; color:var(--amber); align-self:center; padding:0 6px; white-space:nowrap;}
.combo-toggle{flex:none; width:32px; background:var(--bg-3); border:none; border-left:1px solid var(--line-bright); color:var(--text-1); cursor:pointer; font-size:0.7rem;}
.combo-toggle:hover{color:var(--cyan);}
.combo-dropdown{
  position:absolute; top:calc(100% + 2px); left:0; right:0; z-index:60;
  background:var(--bg-2); border:1px solid var(--line-bright); max-height:260px; overflow:auto;
  box-shadow:0 12px 28px rgba(0,0,0,0.5);
}
.combo-option{display:flex; justify-content:space-between; gap:10px; padding:8px 10px; font-size:0.82rem; cursor:pointer; border-bottom:1px solid var(--line);}
.combo-option:hover{background:var(--bg-3);}
.combo-option.selected{background:rgba(255,176,32,0.12); color:var(--amber);}
.combo-option .n{color:var(--text-2); font-family:var(--font-mono); font-size:0.7rem;}
.combo-option.selected .n{color:var(--amber);}
.combo-empty{padding:14px; text-align:center; color:var(--text-2); font-size:0.8rem;}
.combo-pills{display:flex; flex-wrap:wrap; gap:5px; margin-top:6px;}
.combo-pill{
  display:flex; align-items:center; gap:6px; background:var(--amber); color:#1a1300;
  font-family:var(--font-mono); font-size:0.68rem; padding:3px 4px 3px 9px; letter-spacing:0.02em;
}
.combo-pill button{background:none; border:none; color:#1a1300; cursor:pointer; font-size:0.85rem; line-height:1; padding:2px;}

@media (max-width: 900px){
  .hero{grid-template-columns:1fr;}
  .feature-grid{grid-template-columns:repeat(2,1fr);}
  .modal{grid-template-columns:1fr;}
  .navlinks{position:fixed; top:64px; left:0; right:0; background:var(--bg-1); border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; display:none;}
  .navlinks.open{display:flex;}
  .navlinks a{padding:14px 20px; border-bottom:1px solid var(--line);}
  .navtoggle{display:block; background:none; border:1px solid var(--line-bright); color:var(--text-0); width:40px; height:36px; cursor:pointer;}
  .toolbar{position:static;}
}
@media (max-width: 560px){
  .feature-grid{grid-template-columns:1fr;}
  .stat-strip{flex-wrap:wrap;}
  .stat-strip .stat{flex:1 1 50%; border-bottom:1px solid var(--line);}
}