/* ==========================================================================
   QUICKCHALLENGE 2.0 — BASE LAYER
   Reset · typography · layout primitives · utilities · states · motion
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scrollbar-gutter:stable; }
body{
  background:var(--bg); color:var(--tx-2);
  font-family:var(--font); font-size:var(--t-body); line-height:1.55;
  font-weight:400; letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; min-height:100vh;
}
img,svg{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:none; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
h1,h2,h3,h4,h5,h6,p{ font-weight:inherit; }
table{ border-collapse:collapse; width:100%; }
::selection{ background:var(--lime); color:var(--on-lime); }
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--lime); outline-offset:2px; border-radius:var(--r-xs); }

::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:#1d232d; border-radius:99px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:#2a323e; }

/* ---- typography -------------------------------------------------------- */
.t-display{ font-size:var(--t-display); line-height:1.02; letter-spacing:-.035em; font-weight:800; color:var(--tx-1); }
.t-display-2{ font-size:var(--t-display-2); line-height:1.06; letter-spacing:-.03em; font-weight:800; color:var(--tx-1); }
.t-h1{ font-size:var(--t-h1); line-height:1.18; letter-spacing:-.024em; font-weight:700; color:var(--tx-1); }
.t-h2{ font-size:var(--t-h2); line-height:1.25; letter-spacing:-.018em; font-weight:650; color:var(--tx-1); }
.t-h3{ font-size:var(--t-h3); line-height:1.3; letter-spacing:-.012em; font-weight:600; color:var(--tx-1); }
.t-body{ font-size:var(--t-body); line-height:1.55; }
.t-body-lg{ font-size:var(--t-body-lg); line-height:1.55; }
.t-sm{ font-size:var(--t-sm); line-height:1.5; }
.t-xs{ font-size:var(--t-xs); line-height:1.45; }

/* micro label — uppercase + tracked. The single loudest quiet element. */
.micro{
  font-size:var(--t-micro); font-weight:650; letter-spacing:.11em;
  text-transform:uppercase; color:var(--tx-3); line-height:1.2;
}
.micro-dim{ color:var(--tx-4); }
.micro-lime{ color:var(--lime); }

/* numerics — monospace, tabular, never in body copy */
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.num-xl{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:44px; font-weight:700; letter-spacing:-.045em; line-height:1; color:var(--tx-1); }
.num-lg{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:30px; font-weight:700; letter-spacing:-.035em; line-height:1; color:var(--tx-1); }
.num-md{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:20px; font-weight:600; letter-spacing:-.025em; line-height:1.1; color:var(--tx-1); }
.num-sm{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:14px; font-weight:500; letter-spacing:-.01em; }

.lead{ font-size:var(--t-body-lg); line-height:1.6; color:var(--tx-2); max-width:62ch; }
.muted{ color:var(--tx-3); }
.dim{ color:var(--tx-4); }
.faint{ color:var(--tx-5); }
.tx-1{ color:var(--tx-1); } .tx-2{ color:var(--tx-2); } .tx-3{ color:var(--tx-3); }
.lime-t{ color:var(--lime); }
.up-t{ color:var(--up); } .down-t{ color:var(--down); }
.b{ font-weight:650; } .sb{ font-weight:600; } .md{ font-weight:500; } .eb{ font-weight:800; }
.acc{ color:var(--lime); }
.center{ text-align:center; }
.right{ text-align:right; }
.nowrap{ white-space:nowrap; }
.ellipsis{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hide{ display:none !important; }

/* ---- layout primitives ------------------------------------------------- */
.shell{ width:100%; max-width:var(--shell); margin:0 auto; padding:0 var(--s6); }
.shell-mkt{ width:100%; max-width:var(--shell-mkt); margin:0 auto; padding:0 var(--s6); }
.shell-narrow{ width:100%; max-width:900px; margin:0 auto; padding:0 var(--s6); }
.stack{ display:flex; flex-direction:column; }
.row{ display:flex; align-items:center; }
.row-t{ display:flex; align-items:flex-start; }
.row-b{ display:flex; align-items:center; justify-content:space-between; }
.row-e{ display:flex; align-items:center; justify-content:flex-end; }
.grow{ flex:1 1 auto; min-width:0; }
.wrap{ flex-wrap:wrap; }
.gap-2{gap:2px}.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}
.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}.gap-24{gap:24px}.gap-32{gap:32px}.gap-40{gap:40px}
.mt-2{margin-top:2px}.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}
.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mt-40{margin-top:40px}.mt-56{margin-top:56px}.mt-80{margin-top:80px}
.mb-4{margin-bottom:4px}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}
.mb-24{margin-bottom:24px}.mb-32{margin-bottom:32px}.mb-40{margin-bottom:40px}
.ml-auto{margin-left:auto} .mr-auto{margin-right:auto}
.p-16{padding:16px}.p-20{padding:20px}.p-24{padding:24px}.p-32{padding:32px}

.section{ padding:var(--s11) 0; }
.section-tight{ padding:var(--s9) 0; }

/* ---- surfaces ---------------------------------------------------------- */
.panel{
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-lg); position:relative;
}
.panel-raised{
  background:var(--surface-3); border:1px solid var(--line-2);
  border-radius:var(--r-lg); box-shadow:var(--sh-1);
}
.panel-well{
  background:var(--surface-1); border:1px solid var(--line);
  border-radius:var(--r-md);
}
.panel-lime{ background:linear-gradient(180deg,var(--lime-05),var(--lime-04)); border-color:var(--line-lime); }
.panel-inv{ background:var(--surface-inv); border-radius:var(--r-lg); color:var(--on-inv); }

/* panel head — the standard header row of every panel */
.p-head{
  display:flex; align-items:center; gap:var(--s3);
  padding:14px var(--s5); border-bottom:1px solid var(--line);
  min-height:52px;
}
.p-head .grow{ min-width:0; }
.p-body{ padding:var(--s5); }
.p-foot{ padding:14px var(--s5); border-top:1px solid var(--line); }

/* dividers — used instead of nested cards */
.hr{ height:1px; background:var(--line); border:0; margin:var(--s5) 0; }
.hr-soft{ height:1px; background:var(--line-soft); border:0; }
.vr{ width:1px; background:var(--line); align-self:stretch; }

/* ---- background atmosphere (5% of the mix — restrained) ---------------- */
.bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 120% 80% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 120% 80% at 50% 0%, #000 20%, transparent 78%);
}
.bg-grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;
  background-image:var(--grain); background-size:180px 180px;
  mix-blend-mode:overlay;
}
.bg-glow{
  position:absolute; pointer-events:none; z-index:0;
  width:720px; height:520px; border-radius:50%;
  background:radial-gradient(closest-side, var(--lime-10), transparent 72%);
  filter:blur(20px);
}
.content{ position:relative; z-index:2; }

/* ---- utilities --------------------------------------------------------- */
.grid{ display:grid; gap:var(--s4); }
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.g-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.icon{ flex:none; color:currentColor; }
.i-14{width:14px;height:14px}.i-16{width:16px;height:16px}.i-18{width:18px;height:18px}.i-20{width:20px;height:20px}

/* skeleton / loading */
.skel{
  position:relative; overflow:hidden; background:var(--surface-3);
  border-radius:var(--r-sm); color:transparent !important;
}
.skel::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  animation:shimmer 1.4s var(--e-inout) infinite;
}
@keyframes shimmer{ from{transform:translateX(-100%)} to{transform:translateX(100%)} }
.spin{ animation:spin .9s linear infinite; transform-origin:center; }
@keyframes spin{ to{ transform:rotate(360deg) } }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ---- responsive base --------------------------------------------------- */
@media (max-width:1439px){
  :root{ --t-display:52px; --t-display-2:40px; --rail-w:232px; }
}
@media (max-width:1023px){
  :root{ --t-display:44px; --t-display-2:34px; --t-h1:26px; --s11:64px; --s10:48px; }
  .shell,.shell-mkt{ padding:0 var(--s5); }
  .g-6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  :root{ --t-display:36px; --t-display-2:28px; --t-h1:22px; --t-h2:19px; --nav-h:56px; --s9:36px; --s8:32px; }
  body{ font-size:var(--t-sm); }
  .shell,.shell-mkt,.shell-narrow{ padding:0 var(--s4); }
  .num-xl{font-size:34px} .num-lg{font-size:26px}
  .g-2,.g-3,.g-4,.g-5,.g-6{grid-template-columns:minmax(0,1fr)}
  .section{ padding:var(--s8) 0; }
}
@media (max-width:359px){
  :root{ --t-display:31px; }
  .shell,.shell-mkt{ padding:0 var(--s3); }
}

.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--lime); color:var(--on-lime);
  padding:10px 16px; border-radius:0 0 var(--r-sm) 0; font-weight:700; }
.skip:focus{ left:0; }
@media print{
  .qc-switcher,.nav,.rail,.tabbar,.mk-float,.btn{ display:none !important; }
  body{ background:#fff !important; } .panel,.mk{ box-shadow:none !important; }
}