/* ==========================================================================
   JD Mortal — "The Living World"
   Core: tokens, reset, world backdrop, shell, header, hero, sections, footer.
   Component groups are appended after this block.
   ========================================================================== */

:root{
  --void:#04090c;
  --deep:#08151b;
  --sur:#0b1a20;
  --glass:rgba(10,26,32,.62);
  --edge:rgba(120,220,220,.18);
  --edge-hi:rgba(120,220,220,.42);
  --cyan:#4fe0d0;
  --gold:#e8c98a;
  --rose:#ff8a9c;
  --amber:#ffc46b;
  --fg:#eaf6f5;
  --dim:#8fb0ae;
  --sans:"Segoe UI",system-ui,-apple-system,sans-serif;
  --display:"Trebuchet MS","Segoe UI",sans-serif;
  --mono:"Cascadia Mono",Consolas,ui-monospace,monospace;
  --page:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--void)}
body{
  margin:0;min-width:320px;
  background:var(--void);
  color:var(--fg);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
h1,h2,h3,h4,h5{margin:0;font-family:var(--display);line-height:1.14;text-wrap:balance}
ul,ol{margin:0;padding:0}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

.container{max-width:var(--page);margin:0 auto;padding:0 30px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;z-index:1000;top:12px;left:12px;padding:11px 18px;
  background:var(--cyan);color:#03201c;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:700;transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}

/* --- the world sits behind every page --------------------------------- */
.world{position:fixed;inset:-3%;z-index:0;overflow:hidden;pointer-events:none}
.world img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.world::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(85% 60% at 50% 6%,transparent,rgba(4,9,12,.55) 70%),
    linear-gradient(180deg,rgba(4,9,12,.74) 0%,rgba(4,9,12,.34) 30%,rgba(4,9,12,.94) 86%)}
/* Inner pages dim the world further so panels stay legible. */
.world--quiet::after{background:linear-gradient(180deg,rgba(4,9,12,.90),rgba(4,9,12,.97))}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.3;
  background-image:radial-gradient(circle at 30% 40%,rgba(255,255,255,.05) 0 1px,transparent 1px);
  background-size:3px 3px}
.page-shell{position:relative;z-index:2}

/* --- status strip ------------------------------------------------------ */
.status-strip{border-bottom:1px solid var(--edge);
  background:linear-gradient(180deg,rgba(4,9,12,.78),rgba(4,9,12,.35));
  backdrop-filter:blur(12px)}
.status-strip__inner{max-width:var(--page);margin:0 auto;padding:8px 30px;
  display:flex;flex-wrap:wrap;gap:24px;align-items:baseline;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.status-item{display:inline-flex;gap:8px;align-items:baseline}
.status-item strong{color:var(--fg);font-weight:700}
.status-item--time strong{font-family:var(--mono);letter-spacing:.04em}
.status-value{color:var(--fg)}
.status-value--preparing{color:var(--dim)}
.status-value--online,.status-value.is-online{color:var(--cyan)}
.status-value--online::before,.status-value.is-online::before{content:"";display:inline-block;
  width:6px;height:6px;border-radius:50%;background:var(--cyan);margin-right:7px;
  box-shadow:0 0 9px var(--cyan);animation:jd-breathe 2.4s infinite}
@keyframes jd-breathe{0%,100%{opacity:1}50%{opacity:.3}}

/* --- header ------------------------------------------------------------ */
.site-header{border-bottom:1px solid var(--edge);
  background:linear-gradient(180deg,rgba(4,9,12,.72),transparent);
  backdrop-filter:blur(14px);position:sticky;top:0;z-index:30}
.site-header__inner{max-width:var(--page);margin:0 auto;padding:15px 30px;
  display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center}
.brand{display:inline-flex;align-items:center;gap:12px}
.brand__seal{width:42px;height:42px;flex:none;display:grid;place-items:center;
  border:1px solid var(--edge-hi);color:var(--cyan);font-family:var(--display);
  font-size:14px;font-weight:700;letter-spacing:.08em;background:var(--glass)}
.brand__wordmark{display:block;line-height:1.15}
.brand__wordmark strong{display:block;font-family:var(--display);font-size:19px;
  font-weight:700;letter-spacing:.22em}
.brand__wordmark small{display:block;font-size:9px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--cyan);margin-top:3px}
.brand--compact .brand__wordmark strong{font-size:16px}

.menu-toggle{display:none;background:var(--glass);border:1px solid var(--edge);
  width:42px;height:38px;cursor:pointer;position:relative}
.menu-toggle span[aria-hidden]{position:absolute;left:11px;right:11px;top:50%;height:1px;
  background:var(--fg)}
.menu-toggle span[aria-hidden]::before,.menu-toggle span[aria-hidden]::after{
  content:"";position:absolute;left:0;right:0;height:1px;background:var(--fg)}
.menu-toggle span[aria-hidden]::before{top:-6px}
.menu-toggle span[aria-hidden]::after{top:6px}

.site-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:26px;list-style:none}
.site-nav a{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  padding:5px 0;border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.site-nav a:hover{color:var(--fg);border-color:var(--edge-hi)}
.site-nav a.is-active{color:var(--fg);border-color:var(--cyan)}
.header-actions{display:inline-flex;gap:12px;align-items:center;justify-self:end}

/* --- buttons ----------------------------------------------------------- */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;padding:14px 30px;border:1px solid transparent;cursor:pointer;
  transition:transform .18s,background .18s,border-color .18s,color .18s}
.button--primary{background:var(--cyan);color:#03201c;box-shadow:0 10px 30px rgba(79,224,208,.20)}
.button--primary:hover{transform:translateY(-2px)}
.button--secondary,.button--ghost{border-color:var(--edge-hi);color:var(--fg)}
.button--secondary:hover,.button--ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.button--dark{background:var(--gold);color:#1b1405}
.button--dark:hover{transform:translateY(-2px)}
.button--light{background:var(--glass);border-color:var(--edge);color:var(--fg)}
.button--full{width:100%}
.button--disabled,.button[disabled]{background:transparent;color:var(--dim);
  border:1px dashed var(--edge);cursor:not-allowed;box-shadow:none;transform:none}
.button-row{display:flex;flex-wrap:wrap;gap:13px;align-items:center}
.button-row--center{justify-content:center}

/* --- sections ---------------------------------------------------------- */
.section{padding:56px 0;border-bottom:1px solid var(--edge)}
.section--ink{background:linear-gradient(180deg,rgba(8,21,27,.55),transparent)}
.section-heading{max-width:64ch;margin-bottom:30px}
.section-heading h2{font-size:31px;font-weight:300;margin-bottom:10px}
.section-heading h2 b{font-weight:700;color:var(--gold)}
.section-heading p{font-size:14.5px;color:var(--dim);max-width:60ch}
.section-heading--center{margin-inline:auto;text-align:center}
.section-heading--left{margin-inline:0}

/* --- page hero (inner pages) ------------------------------------------- */
.page-hero{border-bottom:1px solid var(--edge);padding:48px 0 42px;
  background:linear-gradient(180deg,rgba(8,21,27,.6),transparent)}
.page-hero h1{font-size:clamp(30px,3.8vw,44px);font-weight:300;margin-bottom:12px}
.page-hero p{font-size:15.5px;color:var(--dim);max-width:58ch}

/* --- home: the world with beacons -------------------------------------- */
.home-hero{position:relative;min-height:min(78vh,720px);display:flex;flex-direction:column}
.home-hero__inner{position:relative;flex:1;max-width:var(--page);margin:0 auto;width:100%;
  padding:52px 30px 30px}
.home-hero__copy{max-width:540px}
.home-hero__copy h1{font-size:clamp(32px,4.4vw,54px);line-height:1.04;font-weight:300;
  margin-bottom:16px}
.home-hero__copy h1 span{display:block;font-weight:700;color:var(--gold)}
.home-hero__copy>p{color:var(--dim);font-size:15.5px;max-width:46ch;margin-bottom:24px}
.home-hero__cloud,.hero-scroll,.realm-art,.ink-ridge{display:none}

.beacon{position:absolute;width:15px;height:15px;padding:0;border:0;background:none;
  cursor:pointer;z-index:6}
.beacon::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 12px rgba(79,224,208,.9)}
.beacon::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(79,224,208,.55);animation:jd-ring 3s infinite}
.beacon[data-heat="hot"]::before{background:var(--rose);box-shadow:0 0 14px rgba(255,138,156,.9)}
.beacon[data-heat="hot"]::after{border-color:rgba(255,138,156,.6);animation-duration:1.7s}
.beacon[data-heat="calm"]::before{background:var(--gold);box-shadow:0 0 10px rgba(232,201,138,.7)}
.beacon[data-heat="calm"]::after{border-color:rgba(232,201,138,.4);animation-duration:4.4s}
@keyframes jd-ring{0%{transform:scale(.7);opacity:.9}80%{transform:scale(2.9);opacity:0}100%{opacity:0}}
.beacon:hover{z-index:9}
.beacon__tip{position:absolute;left:50%;bottom:26px;transform:translateX(-50%) translateY(6px);
  width:236px;padding:14px 16px;background:var(--glass);border:1px solid var(--edge-hi);
  backdrop-filter:blur(16px);opacity:0;pointer-events:none;text-align:left;
  transition:opacity .2s,transform .2s}
.beacon:hover .beacon__tip,.beacon:focus-visible .beacon__tip{opacity:1;
  transform:translateX(-50%) translateY(0)}
.beacon__tip .where{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:7px}
.beacon__tip h4{font-size:14.5px;font-weight:600;margin-bottom:5px}
.beacon__tip p{font-size:12px;color:var(--dim);line-height:1.5;margin-bottom:9px}
.beacon__tip .now{display:flex;justify-content:space-between;font-family:var(--mono);
  font-size:11px;border-top:1px solid var(--edge);padding-top:8px}
.beacon__tip .now b{color:var(--fg)}

/* the dock along the bottom of the world */
.hero-proof{border-top:1px solid var(--edge);
  background:linear-gradient(0deg,rgba(4,9,12,.86),rgba(4,9,12,.3));
  backdrop-filter:blur(16px);display:grid;grid-template-columns:repeat(4,1fr) auto}
.hero-proof span{position:relative;padding:17px 26px;display:block}
.hero-proof span+span::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;
  background:var(--edge)}
.hero-proof small{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin-bottom:5px}
.hero-proof strong{font-family:var(--mono);font-size:20px;font-variant-numeric:tabular-nums}
.hero-proof .go{display:flex;align-items:center;padding:0 26px}

/* --- slide-over detail panel ------------------------------------------- */
.jd-panel{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:92vw;z-index:60;
  background:linear-gradient(180deg,rgba(6,17,21,.97),rgba(4,9,12,.98));
  border-left:1px solid var(--edge-hi);transform:translateX(100%);overflow-y:auto;
  transition:transform .34s cubic-bezier(.2,.8,.25,1);box-shadow:-30px 0 80px rgba(0,0,0,.6)}
.jd-panel[data-open="true"]{transform:translateX(0)}
.jd-panel__h{display:flex;justify-content:space-between;align-items:center;padding:19px 22px;
  border-bottom:1px solid var(--edge);position:sticky;top:0;background:rgba(6,17,21,.96)}
.jd-panel__h h3{font-size:18px;font-weight:700;letter-spacing:.05em}
.jd-panel__x{background:none;border:1px solid var(--edge);color:var(--dim);width:32px;height:32px;
  cursor:pointer;font-size:16px;line-height:1}
.jd-panel__b{padding:20px 22px}
.jd-panel__b img{border:1px solid var(--edge);margin-bottom:15px}
.jd-panel__b h4{font-size:17px;margin-bottom:8px}
.jd-panel__b p{color:var(--dim);font-size:13.5px;line-height:1.65;margin-bottom:14px}
.jd-stat{display:flex;justify-content:space-between;padding:9px 0;
  border-bottom:1px solid rgba(120,220,220,.08);font-size:13px}
.jd-stat span{color:var(--dim);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}
.jd-stat b{font-family:var(--mono);color:var(--cyan);font-variant-numeric:tabular-nums}
.jd-scrim{position:fixed;inset:0;z-index:59;background:rgba(2,6,8,.6);opacity:0;
  pointer-events:none;transition:opacity .3s;backdrop-filter:blur(2px)}
.jd-scrim[data-open="true"]{opacity:1;pointer-events:auto}

/* --- final call to action ---------------------------------------------- */
.final-cta{padding:60px 0;border-bottom:1px solid var(--edge);text-align:center;
  background:linear-gradient(180deg,transparent,rgba(8,21,27,.6))}
.final-cta__inner{max-width:58ch;margin:0 auto}
.final-cta__inner h2{font-size:31px;font-weight:300;margin-bottom:12px}
.final-cta__inner p{font-size:15px;color:var(--dim);margin-bottom:24px}
.final-cta__ring{width:58px;height:58px;margin:0 auto 20px;border:1px solid var(--edge-hi);
  display:grid;place-items:center;color:var(--gold);font-family:var(--display);font-size:22px;
  background:var(--glass)}

/* --- footer ------------------------------------------------------------ */
.site-footer{border-top:1px solid var(--edge);padding:40px 0 26px;
  background:linear-gradient(180deg,transparent,rgba(8,21,27,.7))}
.site-footer__inner{max-width:var(--page);margin:0 auto;padding:0 30px;
  display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:34px}
.footer-brand strong{display:block;font-family:var(--display);font-size:19px;font-weight:700;
  letter-spacing:.2em;margin-bottom:11px}
.footer-brand p{font-size:13px;color:var(--dim);max-width:36ch;line-height:1.62}
.footer-column h5{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);
  margin-bottom:12px;font-family:var(--sans);font-weight:700}
.footer-column ul{list-style:none;font-size:13.5px}
.footer-column li{margin-bottom:8px;color:var(--dim)}
.footer-column a:hover{color:var(--fg)}
.site-footer__ornament{display:none}
.site-footer__bottom{max-width:var(--page);margin:24px auto 0;padding:16px 30px 0;
  border-top:1px solid var(--edge);display:flex;justify-content:space-between;flex-wrap:wrap;
  gap:12px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

/* --- world regions (home) ---------------------------------------------- */
.regions{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.region{position:relative;display:block;border:1px solid var(--edge);overflow:hidden;
  background:var(--sur);transition:border-color .18s,transform .18s}
.region:hover{border-color:var(--edge-hi);transform:translateY(-2px)}
.region img{width:100%;height:150px;object-fit:cover;opacity:.75}
.region__b{padding:15px 17px}
.region__b .where{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:6px}
.region__b h3{font-size:17px;font-weight:600;margin-bottom:5px}
.region__b p{font-size:12.5px;color:var(--dim);line-height:1.5}
.region__pop{position:absolute;top:12px;right:12px;font-family:var(--mono);font-size:11px;
  border:1px solid var(--edge-hi);background:rgba(4,9,12,.72);padding:3px 9px;color:var(--fg)}

.route-list{list-style:none;font-size:13.5px}
.route-list li{padding:8px 0;border-bottom:1px solid rgba(120,220,220,.07)}
.route_name{font-family:var(--mono);font-size:12.5px;color:var(--cyan)}
.vertical-script{writing-mode:vertical-rl;font-family:var(--display);font-size:24px;
  letter-spacing:.3em;color:var(--fg);opacity:.35}

@media(max-width:1000px){
  .site-header__inner{grid-template-columns:auto auto;justify-content:space-between}
  .menu-toggle{display:block}
  .site-nav{display:none;grid-column:1 / -1;flex-direction:column;align-items:flex-start;
    gap:0;width:100%}
  .site-nav[data-open="true"]{display:flex}
  .site-nav li{width:100%;border-top:1px solid var(--edge)}
  .site-nav a{display:block;padding:12px 0;border:0}
  .header-actions{justify-self:auto}
  .beacon{display:none}
  .hero-proof{grid-template-columns:repeat(2,1fr)}
  .hero-proof span+span::before{display:none}
  .regions{grid-template-columns:repeat(2,1fr)}
  .site-footer__inner{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .container,.status-strip__inner,.site-header__inner{padding-inline:20px}
  .regions,.site-footer__inner{grid-template-columns:1fr}
  .home-hero{min-height:0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* ===== header bar refinements ===== */

/* One bar, not three: brand, navigation, live state, entry. */
.site-header__inner{grid-template-columns:auto 1fr auto;gap:34px;padding:0 30px;min-height:66px}
.brand{gap:0}
.brand__wordmark strong{font-size:17px;letter-spacing:.26em;line-height:1}
.brand__wordmark small{font-size:8.5px;letter-spacing:.34em;margin-top:5px}

.site-nav{gap:0;justify-content:flex-start}
.site-nav li{display:block}
.site-nav a{display:block;padding:24px 15px;font-size:11.5px;letter-spacing:.15em;
  border-bottom:2px solid transparent;position:relative}
.site-nav a:hover{color:var(--fg);border-color:transparent;background:rgba(120,220,220,.05)}
.site-nav a.is-active{color:var(--cyan);border-color:var(--cyan);background:transparent}

.header-actions{gap:14px}
.realm-pill{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--edge);
  border-radius:40px;padding:6px 15px;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);background:var(--glass);white-space:nowrap}
.realm-pill i{width:6px;height:6px;border-radius:50%;background:var(--dim);flex:none}
.realm-pill b{font-family:var(--mono);font-size:11.5px;color:var(--fg);letter-spacing:0;
  font-variant-numeric:tabular-nums}
/* When the realm answers, the whole pill wakes up. */
.realm-pill:has(.status-value--online) i,.realm-pill:has(.is-online) i{background:var(--cyan);
  box-shadow:0 0 9px var(--cyan);animation:jd-breathe 2.4s infinite}
.realm-pill:has(.status-value--online),.realm-pill:has(.is-online){border-color:var(--edge-hi);
  color:var(--cyan)}
/* The pill carries the state, so the label needs no dot of its own here. */
.realm-pill .status-value::before{display:none}

.button--sm{padding:9px 20px;font-size:11px;letter-spacing:.16em;box-shadow:none}

@media(max-width:1180px){
  .site-nav a{padding:24px 11px;font-size:11px;letter-spacing:.1em}
  .site-header__inner{gap:20px}
  .realm-pill{display:none}
}
@media(max-width:1000px){
  .site-header__inner{grid-template-columns:auto 1fr;min-height:0;padding:12px 30px;
    align-items:center}
  .header-actions{order:2;justify-self:end}
  .menu-toggle{order:3;margin-left:10px}
  .site-nav{order:4;padding-bottom:8px}
  .site-nav a{padding:13px 0}
  .site-nav a.is-active{border-bottom-color:transparent;border-left:2px solid var(--cyan);
    padding-left:12px}
  .realm-pill{display:inline-flex}
}

/* ===== account dashboard ===== */

.module-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:34px}
.module-card{position:relative;display:block;background:var(--sur);border:1px solid var(--edge);
  padding:18px 20px 16px;transition:border-color .18s,transform .18s}
a.module-card:hover{border-color:var(--edge-hi);transform:translateY(-2px)}
.module-card h3{font-size:16px;font-weight:600;margin-bottom:7px}
.module-card p{font-size:12.5px;color:var(--dim);line-height:1.55;margin-bottom:12px}
.module-card--locked{border-style:dashed;background:transparent}
.module-card--locked h3{color:var(--dim)}
.module-card__state{display:inline-block;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--amber);border:1px solid rgba(255,196,107,.3);
  border-radius:40px;padding:2px 10px}

.auth-shell__intro ul{list-style:none;margin:18px 0 22px}
.auth-shell__intro li{position:relative;padding:9px 0 9px 22px;font-size:13.5px;
  color:var(--dim);line-height:1.6;border-bottom:1px solid rgba(120,220,220,.07)}
.auth-shell__intro li:last-child{border-bottom:0}
.auth-shell__intro li::before{content:"";position:absolute;left:0;top:1.25em;width:8px;height:1px;
  background:var(--cyan)}

@media(max-width:1000px){.module-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.module-grid{grid-template-columns:1fr}}

/* ===== beacon placement and small utilities ===== */

/* Positions live here rather than on the element: the Content-Security-Policy
   sets style-src-attr 'none', so an inline style attribute is dropped and every
   beacon would stack in the same corner. */
.beacon--peak{left:63%;top:38%}
.beacon--market{left:34%;top:58%}
.beacon--shrine{left:78%;top:64%}
.beacon--span{left:19%;top:33%}

.button-row--spaced{margin-top:24px}
.split-feature__copy h2{font-size:29px;font-weight:300;margin-bottom:12px}
.split-feature__copy .lede{color:var(--dim);margin-bottom:20px}

/* ===== account forms: safety list, checkbox, footnote ===== */

.register-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:start}
.register-layout aside h2{font-size:26px;font-weight:300;margin-bottom:18px}
.register-layout aside h2 b{font-weight:700;color:var(--gold)}

.safety-list{list-style:none}
.safety-list li{padding:14px 0;border-bottom:1px solid rgba(120,220,220,.08)}
.safety-list li:last-child{border-bottom:0}
.safety-list p{font-size:13.5px;color:var(--dim);line-height:1.62;margin:0}
.safety-list strong{display:block;font-family:var(--display);font-size:15px;font-weight:600;
  color:var(--fg);margin-bottom:4px}

.check-label{display:flex;align-items:flex-start;gap:11px;margin:6px 0 20px;
  font-size:13.5px;color:var(--dim);line-height:1.55;cursor:pointer}
.check-label input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;
  width:17px;height:17px;margin-top:2px;border:1px solid var(--edge-hi);background:var(--deep);
  cursor:pointer;position:relative}
.check-label input[type=checkbox]:checked{border-color:var(--cyan)}
.check-label input[type=checkbox]:checked::after{content:"";position:absolute;left:5px;top:1px;
  width:5px;height:10px;border:solid var(--cyan);border-width:0 2px 2px 0;transform:rotate(42deg)}

.form-footnote{font-size:12px;color:var(--dim);line-height:1.55;margin-top:14px}
.form-panel .eyebrow{margin-bottom:10px}
.form-panel h2{font-size:25px;font-weight:300;margin-bottom:12px}
.form-panel>p{font-size:14px;color:var(--dim);line-height:1.66;margin-bottom:16px}

@media(max-width:1000px){.register-layout{grid-template-columns:1fr;gap:28px}}

/* ===== single-purpose account pages (confirm, recovery) =====
   One centred card. These pages ask for exactly one thing, so a two-column
   layout leaves a dead half and squeezes the copy into a narrow gutter. */

.account-page{min-height:calc(100vh - 66px);display:flex;align-items:center;
  justify-content:center;padding:60px 30px}
.account-page__inner{width:100%;max-width:560px}
.account-card{background:var(--glass);backdrop-filter:blur(14px);
  border:1px solid var(--edge);padding:44px 44px 40px}
.account-card h1{font-size:30px;font-weight:300;line-height:1.14;margin-bottom:14px}
.account-card h2{font-size:17px;font-weight:600;margin-bottom:14px}
.account-card__lead{font-size:15px;color:var(--dim);line-height:1.66;margin-bottom:24px}
.account-card__note{font-size:12.5px;color:var(--dim);line-height:1.6;margin-top:14px}
.account-card .button-row{margin-top:4px}
.account-card__aside{margin-top:32px;padding-top:28px;border-top:1px solid var(--edge)}

.inline-form{display:flex;gap:10px;flex-wrap:wrap}
.inline-form input{flex:1 1 240px;min-width:0;background:var(--deep);
  border:1px solid var(--edge);color:var(--fg);font-family:var(--sans);font-size:14px;
  padding:13px 14px;transition:border-color .18s}
.inline-form input:focus{outline:none;border-color:var(--cyan)}
.inline-form input::placeholder{color:rgba(143,176,174,.55)}
.inline-form .button{flex:0 0 auto}

.account-page__foot{margin-top:22px;text-align:center;font-size:12px;color:var(--dim);
  letter-spacing:.02em}

@media(max-width:620px){
  .account-page{padding:34px 20px}
  .account-card{padding:30px 24px 28px}
  .account-card h1{font-size:25px}
  .inline-form .button{width:100%}
}

.stack-form{display:block;margin-bottom:4px}
.stack-form label{display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim);margin:0 0 8px}
.stack-form label + input{margin-bottom:18px}
.stack-form input{display:block;width:100%;background:var(--deep);border:1px solid var(--edge);
  color:var(--fg);font-family:var(--sans);font-size:14px;padding:13px 14px;
  transition:border-color .18s}
.stack-form input:focus{outline:none;border-color:var(--cyan)}
.stack-form .button{margin-top:6px}
.account-page__foot a{margin-left:4px}



/* ===== auth ===== */
/* ACCOUNT & FORMS
   auth-form · auth-shell · register-form · register-layout · form-panel · form-grid ·
   form-footnote · check-label · centered-action · security-grid · security-section ·
   safety-list · rule-list · rules-layout · integration-notice · data-note · ink-note ·
   support-banner
   ------------------------------------------------------------------------------- */

/* ============================================================
   AUTH SHELL — two-column frame: narrative intro + the form
   ============================================================ */

.auth-shell {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 0;
  align-items: stretch;
  max-width: 1120px;
  margin: 0 auto;
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--edge);
}

.auth-shell--narrow {
  max-width: 520px;
  grid-template-columns: 1fr;
}

.auth-shell__intro {
  padding: 54px 48px;
  border-right: 1px solid var(--edge);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.auth-shell__intro h1,
.auth-shell__intro h2 {
  font-family: var(--display);
  font-weight: 300;
  font-size: 34px;
  line-height: 1.16;
  color: var(--fg);
  margin: 0;
}

.auth-shell__intro h1 em,
.auth-shell__intro h2 em {
  font-style: normal;
  color: var(--gold);
}

.auth-shell__intro p {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--dim);
  margin: 0;
  max-width: 46ch;
}

.auth-shell__intro > span {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--cyan);
}

.auth-shell__form {
  padding: 54px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(4, 9, 12, .34);
}

/* ============================================================
   FORM PANEL — the standalone dark-glass card
   ============================================================ */

.form-panel {
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--edge);
  padding: 38px 40px 42px;
}

.form-panel--flat {
  background: var(--sur);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.form-panel--tight {
  padding: 26px 28px 30px;
}

.form-panel > h2,
.form-panel > h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0 0 8px;
}

.form-panel > p {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--dim);
  margin: 0 0 26px;
}

.form-panel hr {
  border: 0;
  border-top: 1px solid var(--edge);
  margin: 30px 0;
}

/* ============================================================
   AUTH / REGISTER FORMS — shared field grammar
   ============================================================ */

.auth-form,
.register-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.auth-form label,
.register-form label,
.form-grid label,
.form-panel label {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 9px;
}

.auth-form label .req,
.register-form label .req,
.form-grid label .req {
  color: var(--rose);
  margin-left: 4px;
}

.auth-form input,
.auth-form select,
.auth-form textarea,
.register-form input,
.register-form select,
.register-form textarea,
.form-grid input,
.form-grid select,
.form-grid textarea,
.form-panel input,
.form-panel select,
.form-panel textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--deep);
  border: 1px solid var(--edge);
  border-radius: 0;
  padding: 13px 14px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.4;
  color: var(--fg);
  transition: border-color .18s ease, background .18s ease;
}

.auth-form input[type="password"],
.register-form input[type="password"],
.form-grid input[type="password"],
.form-panel input[type="password"] {
  font-family: var(--mono);
  letter-spacing: .12em;
}

.auth-form textarea,
.register-form textarea,
.form-grid textarea,
.form-panel textarea {
  min-height: 118px;
  resize: vertical;
  line-height: 1.58;
}

.auth-form select,
.register-form select,
.form-grid select,
.form-panel select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  cursor: pointer;
}

.auth-form input::placeholder,
.register-form input::placeholder,
.form-grid input::placeholder,
.form-panel input::placeholder,
.auth-form textarea::placeholder,
.register-form textarea::placeholder,
.form-panel textarea::placeholder {
  color: rgba(143, 176, 174, .5);
}

.auth-form input:hover,
.register-form input:hover,
.form-grid input:hover,
.form-panel input:hover {
  border-color: rgba(120, 220, 220, .3);
}

.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus,
.register-form input:focus,
.register-form select:focus,
.register-form textarea:focus,
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus,
.form-panel input:focus,
.form-panel select:focus,
.form-panel textarea:focus {
  outline: none;
  border-color: var(--cyan);
  background: var(--void);
}

.auth-form :focus-visible,
.register-form :focus-visible,
.form-panel :focus-visible,
.form-grid :focus-visible,
.security-grid :focus-visible,
.support-banner :focus-visible,
.centered-action :focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.auth-form input:disabled,
.register-form input:disabled,
.form-panel input:disabled,
.form-grid input:disabled,
.form-panel select:disabled {
  color: var(--dim);
  border: 1px dashed var(--edge);
  background: transparent;
  cursor: not-allowed;
}

/* field hint / inline error under an input */
.auth-form small,
.register-form small,
.form-grid small,
.form-panel small {
  display: block;
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--dim);
  margin-top: 8px;
}

.auth-form small.is-error,
.register-form small.is-error,
.form-grid small.is-error {
  color: var(--rose);
}

/* buttons inside forms */
.auth-form button,
.register-form button,
.form-panel button,
.auth-form .btn,
.register-form .btn {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 14px 30px;
  border: 1px solid transparent;
  border-radius: 0;
  background: var(--cyan);
  color: #03201c;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.auth-form button:hover,
.register-form button:hover,
.form-panel button:hover {
  transform: translateY(-2px);
}

.auth-form button.is-secondary,
.register-form button.is-secondary,
.form-panel button.is-secondary {
  background: transparent;
  border: 1px solid var(--edge-hi);
  color: var(--fg);
}

.auth-form button.is-danger,
.register-form button.is-danger,
.form-panel button.is-danger {
  background: var(--rose);
  color: #2a0a11;
}

.auth-form button:disabled,
.register-form button:disabled,
.form-panel button:disabled {
  background: transparent;
  border: 1px dashed var(--edge);
  color: var(--dim);
  cursor: not-allowed;
  transform: none;
}

.auth-form button[type="submit"],
.register-form button[type="submit"] {
  width: 100%;
}

/* the row of small links under a login form */
.auth-form__aside {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: space-between;
  align-items: center;
  padding-top: 4px;
}

.auth-form__aside a,
.form-footnote a,
.auth-shell__intro a {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(79, 224, 208, .34);
}

.auth-form__aside a:hover,
.form-footnote a:hover {
  border-bottom-color: var(--cyan);
}

.auth-form__error,
.register-form__error {
  border-left: 3px solid var(--rose);
  background: rgba(255, 138, 156, .07);
  padding: 13px 16px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg);
}

.auth-form__ok,
.register-form__ok {
  border-left: 3px solid var(--cyan);
  background: rgba(79, 224, 208, .07);
  padding: 13px 16px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg);
}

/* ============================================================
   REGISTER LAYOUT — form beside the rules column
   ============================================================ */

.register-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
  gap: 26px;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}

.register-layout__side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ============================================================
   FORM GRID — two-up field rows
   ============================================================ */

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 24px;
  align-items: start;
}

.form-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-grid__wide {
  grid-column: 1 / -1;
}

.form-footnote {
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.62;
  color: var(--dim);
  margin: 0;
  padding-top: 4px;
}

.form-footnote--center {
  text-align: center;
}

.form-footnote code,
.form-footnote strong {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  font-weight: 400;
}

/* ============================================================
   CHECK LABEL — checkbox / radio consent rows
   ============================================================ */

.check-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: var(--dim);
  cursor: pointer;
  margin: 0;
}

.check-label input[type="checkbox"],
.check-label input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin: 1px 0 0;
  padding: 0;
  background: var(--deep);
  border: 1px solid var(--edge-hi);
  border-radius: 0;
  cursor: pointer;
  position: relative;
  transition: background .16s ease, border-color .16s ease;
}

.check-label input[type="radio"] {
  border-radius: 50%;
}

.check-label input[type="checkbox"]:checked,
.check-label input[type="radio"]:checked {
  background: var(--cyan);
  border-color: var(--cyan);
}

.check-label input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid #03201c;
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}

.check-label input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #03201c;
}

.check-label input:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.check-label a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(79, 224, 208, .34);
}

.check-label--strong {
  color: var(--fg);
}

/* ============================================================
   CENTERED ACTION — a lone CTA block
   ============================================================ */

.centered-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 30px 20px 6px;
}

.centered-action p {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--dim);
  margin: 0;
  max-width: 52ch;
}

.centered-action a,
.centered-action button {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 30px;
  border: 1px solid transparent;
  border-radius: 0;
  background: var(--cyan);
  color: #03201c;
  cursor: pointer;
  transition: transform .18s ease;
}

.centered-action a:hover,
.centered-action button:hover {
  transform: translateY(-2px);
}

.centered-action .is-secondary {
  background: transparent;
  border: 1px solid var(--edge-hi);
  color: var(--fg);
}

.centered-action .is-locked {
  background: transparent;
  border: 1px dashed var(--edge);
  color: var(--dim);
  cursor: not-allowed;
  transform: none;
}

/* ============================================================
   SECURITY — numbered assurances
   ============================================================ */

.security-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
}

.security-section > h2 {
  font-family: var(--display);
  font-weight: 300;
  font-size: 30px;
  line-height: 1.2;
  color: var(--fg);
  margin: 0;
}

.security-section > p {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--dim);
  margin: 0;
  max-width: 68ch;
}

.security-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
}

.security-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.security-grid__item {
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 30px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.security-grid__num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--cyan);
}

.security-grid__item h3,
.security-grid__title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}

.security-grid__item p {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--dim);
  margin: 0;
}

.security-grid__item strong {
  color: var(--gold);
  font-weight: 600;
}

/* ============================================================
   RULES / SAFETY — numbered prose
   ============================================================ */

.rules-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: 26px;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}

.rules-layout__side {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.rule-list,
.safety-list {
  list-style: none;
  counter-reset: ruleno;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rule-list > li,
.safety-list > li {
  counter-increment: ruleno;
  position: relative;
  padding: 18px 20px 20px 62px;
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--edge);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--dim);
}

.rule-list > li::before,
.safety-list > li::before {
  content: counter(ruleno, decimal-leading-zero);
  position: absolute;
  left: 20px;
  top: 19px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--cyan);
}

.rule-list > li strong,
.safety-list > li strong {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg);
  margin-bottom: 7px;
}

.rule-list > li em,
.safety-list > li em {
  font-style: normal;
  color: var(--gold);
}

.rule-list--hot > li::before {
  color: var(--rose);
}

.safety-list > li::before {
  color: var(--gold);
}

.rule-list a,
.safety-list a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(79, 224, 208, .34);
}

/* ============================================================
   NOTICES
   ============================================================ */

.integration-notice {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  border: 1px solid var(--edge);
  border-left: 3px solid var(--amber);
  background: rgba(255, 196, 107, .06);
  padding: 18px 22px 20px;
}

.integration-notice__mark {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid rgba(255, 196, 107, .38);
  border-radius: 40px;
  padding: 5px 12px;
  white-space: nowrap;
  margin-top: 1px;
}

.integration-notice__body {
  min-width: 0;
}

.integration-notice h3,
.integration-notice strong {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 7px;
}

.integration-notice p {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--dim);
  margin: 0;
}

.integration-notice a {
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 196, 107, .4);
}

.data-note {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  letter-spacing: .1em;
  line-height: 1.6;
  color: var(--dim);
  border-top: 1px solid var(--edge);
  padding-top: 12px;
  margin: 0;
}

.data-note--boxed {
  border: 1px solid var(--edge);
  background: var(--deep);
  padding: 12px 14px;
}

.data-note span {
  color: var(--cyan);
}

.ink-note {
  border: 1px solid var(--edge);
  border-left: 3px solid var(--cyan);
  background: rgba(79, 224, 208, .05);
  padding: 20px 24px 22px;
}

.ink-note h3,
.ink-note h4 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 9px;
}

.ink-note p {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.64;
  color: var(--dim);
  margin: 0 0 10px;
}

.ink-note p:last-child {
  margin-bottom: 0;
}

.ink-note strong {
  color: var(--fg);
  font-weight: 600;
}

.ink-note code {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--gold);
}

.ink-note--gold {
  border-left-color: var(--gold);
  background: rgba(232, 201, 138, .05);
}

.ink-note--gold h3,
.ink-note--gold h4 {
  color: var(--gold);
}

.ink-note ul {
  margin: 0;
  padding-left: 18px;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.64;
  color: var(--dim);
}

/* ============================================================
   SUPPORT BANNER — help / contact strip at the page foot
   ============================================================ */

.support-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--edge);
  border-top: 1px solid var(--edge-hi);
  padding: 26px 30px;
  max-width: 1180px;
  margin: 0 auto;
}

.support-banner__body {
  min-width: 0;
}

.support-banner h3,
.support-banner__title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 8px;
}

.support-banner p {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--dim);
  margin: 0;
  max-width: 64ch;
}

.support-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.support-banner a {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 30px;
  border: 1px solid var(--edge-hi);
  border-radius: 0;
  color: var(--fg);
  background: transparent;
  transition: transform .18s ease, border-color .18s ease;
}

.support-banner a:hover {
  transform: translateY(-2px);
  border-color: var(--cyan);
}

.support-banner a.is-primary {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #03201c;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1000px) {
  .auth-shell {
    grid-template-columns: 1fr;
  }

  .auth-shell__intro {
    border-right: 0;
    border-bottom: 1px solid var(--edge);
    padding: 40px 30px 34px;
  }

  .auth-shell__intro h1,
  .auth-shell__intro h2 {
    font-size: 27px;
  }

  .auth-shell__form {
    padding: 34px 30px 40px;
  }

  .register-layout,
  .rules-layout {
    grid-template-columns: 1fr;
  }

  .security-grid,
  .security-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-panel {
    padding: 30px 26px 34px;
  }

  .security-section > h2 {
    font-size: 25px;
  }

  .support-banner {
    padding: 24px 26px;
  }
}

@media (max-width: 620px) {
  .form-grid,
  .form-grid--three,
  .security-grid,
  .security-grid--two {
    grid-template-columns: 1fr;
  }

  .auth-shell__intro,
  .auth-shell__form {
    padding: 30px 22px;
  }

  .form-panel {
    padding: 24px 20px 28px;
  }

  .security-grid__item {
    padding: 24px 22px 26px;
  }

  .rule-list > li,
  .safety-list > li {
    padding: 16px 18px 18px 54px;
  }

  .rule-list > li::before,
  .safety-list > li::before {
    left: 18px;
  }

  .integration-notice {
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px 18px;
  }

  .support-banner__actions {
    width: 100%;
  }

  .support-banner a,
  .centered-action a,
  .centered-action button {
    flex: 1 1 100%;
    text-align: center;
    padding: 13px 20px;
  }

  .auth-form button,
  .register-form button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-form button,
  .register-form button,
  .form-panel button,
  .centered-action a,
  .centered-action button,
  .support-banner a,
  .auth-form input,
  .register-form input,
  .form-grid input,
  .form-panel input,
  .check-label input[type="checkbox"],
  .check-label input[type="radio"] {
    transition: none;
  }

  .auth-form button:hover,
  .register-form button:hover,
  .form-panel button:hover,
  .centered-action a:hover,
  .centered-action button:hover,
  .support-banner a:hover {
    transform: none;
  }
}


/* ===== boards ===== */
/* rankings & tables */
.rankings-shell{max-width:1200px;margin:0 auto;padding:40px 26px 90px;display:flex;flex-direction:column;gap:26px}
.rankings-shell__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--edge)}
.rankings-shell__title{font-family:var(--display);font-weight:300;font-size:clamp(28px,4vw,44px);letter-spacing:.02em;color:var(--fg);margin:0}
.rankings-shell__title em{font-style:normal;color:var(--gold)}
.rankings-shell__lede{font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--dim);margin:8px 0 0;max-width:56ch}
.rankings-shell__aside{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rankings-shell__grid{display:grid;grid-template-columns:2fr 1fr;gap:26px;align-items:start}

.ranking-tabs{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--edge);margin:0;padding:0;list-style:none}
.ranking-tabs__tab{appearance:none;background:transparent;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:13px 20px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);cursor:pointer;transition:color .18s ease,border-color .18s ease,background .18s ease}
.ranking-tabs__tab:hover{color:var(--fg);background:rgba(120,220,220,.04)}
.ranking-tabs__tab:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.ranking-tabs__tab--active{color:var(--cyan);border-bottom-color:var(--cyan)}
.ranking-tabs__tab--locked{color:var(--dim);border:1px dashed var(--edge);border-bottom-style:dashed;cursor:not-allowed}
.ranking-tabs__count{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:10px;letter-spacing:.06em;color:var(--dim);margin-left:9px}
.ranking-tabs--pinned{position:sticky;top:0;z-index:4;background:var(--glass);backdrop-filter:blur(14px)}

.ranking-board{background:var(--sur);border:1px solid var(--edge);display:flex;flex-direction:column;min-width:0}
.ranking-board--glass{background:var(--glass);backdrop-filter:blur(14px)}
.ranking-board--hot{border-color:rgba(255,138,156,.34)}
.ranking-board__head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 22px;border-bottom:1px solid var(--edge)}
.ranking-board__title{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--fg);margin:0}
.ranking-board__sub{display:block;font-family:var(--sans);font-size:11.5px;font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--dim);margin-top:6px}
.ranking-board__note{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:11px;color:var(--dim);letter-spacing:.02em}
.ranking-board__body{padding:0}
.ranking-board__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 22px;border-top:1px solid var(--edge);font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.ranking-board__link{color:var(--cyan);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .18s ease}
.ranking-board__link:hover{border-bottom-color:var(--cyan)}
.ranking-board__empty{padding:52px 22px;text-align:center;font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--dim)}

.board-table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:14px;line-height:1.55;color:var(--fg)}
.board-table th{padding:12px 18px;font-size:9.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);text-align:left;border-bottom:1px solid var(--edge);white-space:nowrap}
.board-table td{padding:14px 18px;border-bottom:1px solid rgba(120,220,220,.06);vertical-align:middle}
.board-table tbody tr{transition:background .16s ease}
.board-table tbody tr:hover{background:rgba(120,220,220,.04)}
.board-table tbody tr:last-child td{border-bottom:0}
.board-table__rank{width:64px;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:15px;color:var(--cyan);letter-spacing:.02em}
.board-table__name{font-weight:600;color:var(--fg)}
.board-table__meta{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:4px}
.board-table__num,.board-table th.board-table__num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--cyan);white-space:nowrap}
.board-table__hash{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--dim);word-break:break-all}
.board-table__faction{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.board-table__row--first .board-table__rank{color:var(--gold)}
.board-table__row--first .board-table__name{color:var(--gold)}
.board-table__row--first td{background:rgba(232,201,138,.05)}
.board-table__row--self{box-shadow:inset 2px 0 0 var(--cyan)}
.board-table__row--hot .board-table__num{color:var(--rose)}
.board-table__delta{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:11.5px;margin-left:8px;color:var(--dim)}
.board-table__delta--up{color:var(--cyan)}
.board-table__delta--down{color:var(--rose)}
.board-table__delta--flat{color:var(--dim)}
.board-table__wrap{width:100%;overflow-x:auto}

.snapshot-state{display:inline-flex;align-items:center;gap:9px;padding:6px 15px;border:1px solid var(--edge);border-radius:40px;background:rgba(10,26,32,.5);font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.snapshot-state__dot{width:7px;height:7px;border-radius:50%;background:var(--dim);flex:0 0 auto}
.snapshot-state__time{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:10.5px;letter-spacing:.04em;color:var(--dim)}
.snapshot-state--ready{color:var(--cyan);border-color:var(--edge-hi)}
.snapshot-state--ready .snapshot-state__dot{background:var(--cyan);box-shadow:0 0 0 0 rgba(79,224,208,.5);animation:snapshot-state-pulse 2.4s ease-out infinite}
.snapshot-state--quiet{color:var(--dim);border-color:var(--edge)}
.snapshot-state--quiet .snapshot-state__dot{background:var(--dim);opacity:.7}

@keyframes snapshot-state-pulse{0%{box-shadow:0 0 0 0 rgba(79,224,208,.45)}70%{box-shadow:0 0 0 7px rgba(79,224,208,0)}100%{box-shadow:0 0 0 0 rgba(79,224,208,0)}}

.stack{display:flex;flex-direction:column;gap:18px;min-width:0}
.stack--tight{gap:10px}
.stack--loose{gap:32px}
.stack--row{flex-direction:row;align-items:center;flex-wrap:wrap;gap:14px}

.state{display:inline-block;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.state--live{color:var(--rose)}
.state--open{color:var(--cyan)}
.state--warn{color:var(--amber)}
.state--locked{color:var(--dim);border:1px dashed var(--edge);padding:5px 12px;cursor:not-allowed}

.value{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:15px;color:var(--cyan);letter-spacing:.01em}
.value--lg{font-size:clamp(24px,3.4vw,34px);font-weight:300;letter-spacing:-.01em}
.value--gold{color:var(--gold)}
.value--hot{color:var(--rose)}
.value--muted{color:var(--dim)}
.value__unit{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-left:7px}
.value__label{display:block;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);margin-bottom:7px}

.competition{background:var(--sur);border:1px solid var(--edge);padding:22px;display:flex;flex-direction:column;gap:16px;min-width:0}
.competition--glass{background:var(--glass);backdrop-filter:blur(14px)}
.competition--live{border-color:rgba(255,138,156,.36)}
.competition__head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.competition__name{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:.03em;color:var(--fg);margin:0}
.competition__when{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--dim)}
.competition__desc{font-family:var(--sans);font-size:13.5px;line-height:1.62;color:var(--dim);margin:0}
.competition__metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:16px;padding-top:16px;border-top:1px solid var(--edge)}
.competition__prize{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.competition__actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:2px}
.competition__cta{display:inline-block;background:var(--cyan);color:#03201c;border:0;padding:14px 30px;font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .18s ease}
.competition__cta:hover{transform:translateY(-2px)}
.competition__cta--ghost{background:transparent;border:1px solid var(--edge-hi);color:var(--fg)}
.competition__cta--closed{background:transparent;border:1px dashed var(--edge);color:var(--dim);cursor:not-allowed;transform:none}
.competition__cta--closed:hover{transform:none}

@media(max-width:1000px){
.rankings-shell{padding:30px 18px 70px}
.rankings-shell__grid{grid-template-columns:1fr}
.rankings-shell__head{align-items:flex-start}
.ranking-tabs{flex-wrap:nowrap;overflow-x:auto}
.ranking-tabs__tab{padding:12px 16px;white-space:nowrap}
.board-table th,.board-table td{padding:12px 14px}
}

@media(max-width:620px){
.ranking-board__head{padding:14px 16px}
.ranking-board__foot{padding:12px 16px}
.competition{padding:18px}
.competition__metrics{grid-template-columns:1fr}
.board-table{display:block;font-size:13.5px}
.board-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.board-table tbody,.board-table tr,.board-table td{display:block;width:auto}
.board-table tbody tr{border:1px solid var(--edge);padding:14px 16px;margin:0 16px 14px}
.board-table tbody tr:first-child{margin-top:16px}
.board-table tbody tr:hover{background:transparent}
.board-table td{padding:6px 0;border-bottom:1px solid rgba(120,220,220,.06);display:flex;align-items:baseline;justify-content:space-between;gap:16px;text-align:right}
.board-table td:last-child,.board-table tbody tr:last-child td{border-bottom:0}
.board-table td::before{content:attr(data-label);flex:0 0 auto;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);text-align:left}
.board-table__rank{width:auto;font-size:16px}
.board-table__name{text-align:right}
.board-table__meta{display:inline-block;margin:4px 0 0}
.board-table__row--first td{background:transparent}
.board-table__row--first{border-color:rgba(232,201,138,.4)}
.board-table__row--self{box-shadow:inset 3px 0 0 var(--cyan)}
}

@media(prefers-reduced-motion:reduce){
.snapshot-state--ready .snapshot-state__dot{animation:none}
.ranking-tabs__tab,.board-table tbody tr,.ranking-board__link,.competition__cta{transition:none}
.competition__cta:hover{transform:none}
}


/* ===== content ===== */
/* news, guides, events */

.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--cyan);margin:0 0 18px}
.eyebrow::before{content:"";display:block;width:26px;height:1px;background:var(--cyan);flex:0 0 26px}
.eyebrow--gold{color:var(--gold)}
.eyebrow--gold::before{background:var(--gold)}
.eyebrow--rose{color:var(--rose)}
.eyebrow--rose::before{background:var(--rose)}
.eyebrow--bare::before{display:none}

.text-link{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);text-decoration:none;padding:2px 0;border-bottom:1px solid transparent;transition:color .18s ease,border-color .18s ease}
.text-link::after{content:"→";font-family:var(--mono);font-size:12px;letter-spacing:0;transform:translateX(0);transition:transform .18s ease}
.text-link:hover{border-bottom-color:var(--edge-hi)}
.text-link:hover::after{transform:translateX(5px)}
.text-link:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.text-link--gold{color:var(--gold)}
.text-link--dim{color:var(--dim)}
.text-link--dim:hover{color:var(--cyan)}

.article-list{position:relative;list-style:none;margin:0;padding:0 0 0 26px}
.article-list::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--edge)}
.article-list--flush{padding-left:0}
.article-list--flush::before{display:none}

.journal-entry{position:relative;display:grid;grid-template-columns:44px 1fr auto;align-items:baseline;gap:0 20px;padding:16px 14px 16px 12px;border-bottom:1px solid rgba(120,220,220,.06);text-decoration:none;color:inherit;transition:background .18s ease,transform .18s ease}
.journal-entry:last-child{border-bottom:0}
.journal-entry::before{content:"";position:absolute;left:-26px;top:26px;width:12px;height:1px;background:var(--edge)}
.article-list--flush .journal-entry::before{display:none}
.journal-entry:hover{background:rgba(120,220,220,.04);transform:translateX(2px)}
.journal-entry:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.journal-entry__number{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--cyan);letter-spacing:.04em}
.journal-entry__title{font-family:var(--display);font-size:15.5px;font-weight:600;color:var(--fg);line-height:1.45;margin:0}
.journal-entry__excerpt{font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--dim);margin:6px 0 0}
.journal-entry__state{justify-self:end;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.journal-entry__state--live{color:var(--rose)}
.journal-entry__state--new{color:var(--cyan)}
.journal-entry__state--soon{color:var(--amber)}
.journal-entry--muted .journal-entry__number,.journal-entry--muted .journal-entry__title{color:var(--dim)}

.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--edge);border:1px solid var(--edge);margin:0;padding:0;list-style:none}
.guide-grid--two{grid-template-columns:repeat(2,1fr)}
.guide-grid--four{grid-template-columns:repeat(4,1fr)}

.guide-card{display:flex;flex-direction:column;gap:12px;background:var(--sur);padding:24px 22px 26px;text-decoration:none;color:inherit;border:1px solid transparent;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.guide-card:hover{background:var(--deep);border-color:var(--edge-hi);transform:translateY(-3px)}
.guide-card:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.guide-card__top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:12px;border-bottom:1px solid var(--edge)}
.guide-card__kicker{font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.guide-card__meta{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:10.5px;letter-spacing:.08em;color:var(--dim)}
.guide-card__title{font-family:var(--display);font-size:17px;font-weight:600;line-height:1.35;color:var(--fg);margin:0}
.guide-card__body{font-family:var(--sans);font-size:13.5px;line-height:1.62;color:var(--dim);margin:0;flex:1 1 auto}
.guide-card__foot{display:flex;align-items:center;gap:12px;margin-top:4px}
.guide-card--locked{cursor:not-allowed;border:1px dashed var(--edge);color:var(--dim)}
.guide-card--locked .guide-card__title,.guide-card--locked .guide-card__kicker{color:var(--dim)}
.guide-card--locked:hover{background:var(--sur);border-color:var(--edge);transform:none}

.news-preview{display:block;margin:0}
.news-preview__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px}
.news-preview__title{font-family:var(--display);font-size:30px;font-weight:300;line-height:1.2;color:var(--fg);margin:0}
.news-preview__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.news-preview__cards--two{grid-template-columns:repeat(2,1fr)}
.news-preview__foot{margin-top:24px;display:flex;justify-content:flex-end}
.news-preview__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:56px 24px;background:var(--glass);backdrop-filter:blur(14px);border:1px dashed var(--edge);text-align:center;font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--dim)}
.news-preview__empty strong{display:block;font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.02em;color:var(--fg)}

.news-card{display:flex;flex-direction:column;gap:11px;background:var(--sur);border:1px solid var(--edge);padding:22px 20px 24px;text-decoration:none;color:inherit;transition:border-color .18s ease,transform .18s ease,background .18s ease}
.news-card:hover{border-color:var(--edge-hi);background:var(--deep);transform:translateY(-3px)}
.news-card:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.news-card--glass{background:var(--glass);backdrop-filter:blur(14px)}
.news-card--glass:hover{background:var(--glass)}
.news-card--feature{grid-column:span 2}
.news-card__meta{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.news-card__tag{font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--cyan)}
.news-card__tag--gold{color:var(--gold)}
.news-card__tag--rose{color:var(--rose)}
.news-card__title{font-family:var(--display);font-size:17px;font-weight:600;line-height:1.36;color:var(--fg);margin:0}
.news-card__excerpt{font-family:var(--sans);font-size:13.5px;line-height:1.62;color:var(--dim);margin:0;flex:1 1 auto}
.news-card__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:4px;padding-top:12px;border-top:1px solid rgba(120,220,220,.06)}

.event-list{display:flex;flex-direction:column;gap:12px;list-style:none;margin:0;padding:0}

.event-card{display:grid;grid-template-columns:88px 1fr auto;align-items:center;gap:0 22px;background:var(--sur);border:1px solid var(--edge);border-left:2px solid var(--edge-hi);padding:18px 22px;text-decoration:none;color:inherit;transition:border-color .18s ease,transform .18s ease,background .18s ease}
.event-card:hover{border-color:var(--edge-hi);background:var(--deep);transform:translateY(-2px)}
.event-card:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.event-card--glass{background:var(--glass);backdrop-filter:blur(14px)}
.event-card--glass:hover{background:var(--glass)}
.event-card--live{border-left-color:var(--rose)}
.event-card--soon{border-left-color:var(--amber)}
.event-card--locked{border:1px dashed var(--edge);border-left:2px dashed var(--edge);color:var(--dim);cursor:not-allowed}
.event-card--locked:hover{background:var(--sur);border-color:var(--edge);transform:none}
.event-card__when{display:flex;flex-direction:column;gap:3px;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--cyan);line-height:1.2}
.event-card__day{font-size:20px;letter-spacing:.02em}
.event-card__month{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.event-card__body{display:flex;flex-direction:column;gap:6px;min-width:0}
.event-card__title{font-family:var(--display);font-size:16px;font-weight:600;line-height:1.35;color:var(--fg);margin:0}
.event-card__note{font-family:var(--sans);font-size:13px;line-height:1.58;color:var(--dim);margin:0}
.event-card__timer{justify-self:end;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.06em;color:var(--amber);white-space:nowrap}
.event-card__status{display:inline-flex;align-items:center;gap:8px;justify-self:end;border-radius:40px;border:1px solid var(--edge);padding:5px 14px;font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.event-card__status--live{color:var(--rose);border-color:rgba(255,138,156,.42)}
.event-card__status--live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rose);animation:eventPulse 1.8s ease-in-out infinite}
.event-card__status--open{color:var(--cyan);border-color:var(--edge-hi)}
.event-card__status--soon{color:var(--amber);border-color:rgba(255,196,107,.4)}

@keyframes eventPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}

@media(max-width:1000px){
.guide-grid,.guide-grid--two,.guide-grid--four{grid-template-columns:repeat(2,1fr)}
.news-preview__cards,.news-preview__cards--two{grid-template-columns:1fr}
.news-card--feature{grid-column:auto}
.news-preview__title{font-size:25px}
.news-preview__head{flex-direction:column;align-items:flex-start;gap:12px}
}

@media(max-width:620px){
.guide-grid,.guide-grid--two,.guide-grid--four{grid-template-columns:1fr}
.article-list{padding-left:18px}
.journal-entry{grid-template-columns:34px 1fr;gap:0 14px;padding:14px 6px 14px 10px}
.journal-entry::before{left:-18px;top:22px;width:8px}
.journal-entry__state{grid-column:2;justify-self:start;margin-top:8px}
.event-card{grid-template-columns:64px 1fr;gap:0 16px;padding:16px 16px}
.event-card__timer,.event-card__status{grid-column:2;justify-self:start;margin-top:10px}
.event-card__day{font-size:17px}
.guide-card{padding:20px 18px 22px}
}

@media(prefers-reduced-motion:reduce){
.journal-entry,.guide-card,.news-card,.event-card,.text-link,.text-link::after{transition:none}
.journal-entry:hover,.guide-card:hover,.news-card:hover,.event-card:hover{transform:none}
.text-link:hover::after{transform:none}
.event-card__status--live::before{animation:none}
}


/* ===== download ===== */
/* download & install */

.download-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:34px;align-items:start}
.download-layout--stack{grid-template-columns:minmax(0,1fr)}
.download-layout__main{min-width:0;display:flex;flex-direction:column;gap:28px}
.download-layout__aside{min-width:0;display:flex;flex-direction:column;gap:20px}

.download-card{position:relative;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--edge);padding:32px 34px 34px;display:flex;flex-direction:column;gap:24px}
.download-card--solid{background:var(--sur);backdrop-filter:none;-webkit-backdrop-filter:none}
.download-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.download-card__eyebrow{font-family:var(--sans);font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--dim);margin:0 0 10px}
.download-card__title{font-family:var(--display);font-weight:300;font-size:34px;line-height:1.14;color:var(--fg);margin:0}
.download-card__title em{font-style:normal;color:var(--gold)}
.download-card__note{font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--dim);margin:0}
.download-card__meta{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 26px}
.download-card__meta dt{font-family:var(--sans);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);padding-top:3px}
.download-card__meta dd{margin:0;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px;line-height:1.5;color:var(--fg);min-width:0}
.download-card__meta dd.is-hash{word-break:break-all;font-size:12px;color:var(--cyan)}
.download-card__meta dd.is-live{color:var(--cyan)}
.download-card__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-top:4px}
.download-card__cta{display:inline-block;background:var(--cyan);color:#03201c;border:1px solid var(--cyan);padding:14px 30px;font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .18s ease}
.download-card__cta:hover{transform:translateY(-2px)}
.download-card__cta--alt{background:transparent;color:var(--fg);border:1px solid var(--edge-hi)}
.download-card__cta--locked{background:transparent;color:var(--dim);border:1px dashed var(--edge);cursor:not-allowed;transform:none}
.download-card__cta--locked:hover{transform:none}
.download-card__foot{display:flex;flex-wrap:wrap;gap:8px 20px;border-top:1px solid var(--edge);padding-top:18px;font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

.download-card__seal{flex:0 0 auto;width:60px;height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1px solid var(--gold);color:var(--gold);text-align:center}
.download-card__seal-mark{font-family:var(--display);font-weight:700;font-size:18px;line-height:1}
.download-card__seal-label{font-family:var(--sans);font-size:8px;letter-spacing:.2em;text-transform:uppercase}
.download-card__seal--muted{border-color:var(--edge);color:var(--dim)}

.install-steps{list-style:none;counter-reset:install;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.install-steps li{counter-increment:install;position:relative;padding:16px 0 16px 56px;border-bottom:1px solid rgba(120,220,220,.06);font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--fg)}
.install-steps li:last-child{border-bottom:0}
.install-steps li::before{content:counter(install,decimal-leading-zero);position:absolute;left:0;top:16px;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px;color:var(--cyan);letter-spacing:.04em}
.install-steps strong{display:block;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--fg);margin-bottom:6px}
.install-steps span{display:block;color:var(--dim);font-size:13.5px}
.install-steps code{font-family:var(--mono);font-size:12.5px;color:var(--cyan);background:var(--deep);border:1px solid var(--edge);padding:2px 7px}
.install-steps--compact li{padding:11px 0 11px 46px;font-size:13.5px}
.install-steps--compact li::before{top:11px}

.fact-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--edge);background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.fact-grid--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.fact-grid--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.fact-grid__cell{padding:22px 24px;border-left:1px solid var(--edge);display:flex;flex-direction:column;gap:9px;min-width:0}
.fact-grid__cell:first-child{border-left:0}
.fact-grid__label{font-family:var(--sans);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.fact-grid__value{font-family:var(--display);font-weight:300;font-size:30px;line-height:1;color:var(--fg);font-variant-numeric:tabular-nums;word-break:break-word}
.fact-grid__value--num{font-family:var(--mono);font-size:26px;color:var(--cyan)}
.fact-grid__value--gold{color:var(--gold)}
.fact-grid__value--hot{color:var(--rose)}
.fact-grid__foot{font-family:var(--sans);font-size:11px;line-height:1.5;color:var(--dim)}

.feature-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.feature-list li{position:relative;padding-left:26px;font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--dim)}
.feature-list li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border:1px solid var(--cyan);transform:rotate(45deg)}
.feature-list strong{color:var(--fg);font-weight:600}
.feature-list b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:400;color:var(--cyan)}
.feature-list--gold li::before{border-color:var(--gold)}
.feature-list--tight{gap:9px}
.feature-list--tight li{font-size:13.5px}

.split-feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:center;padding:38px 0;border-top:1px solid var(--edge)}
.split-feature:first-child{border-top:0}
.split-feature--flip .split-feature__copy{order:2}
.split-feature--flip .split-feature__visual{order:1}
.split-feature--panel{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--edge);padding:34px;gap:34px}

.split-feature__copy{min-width:0;display:flex;flex-direction:column;gap:16px}
.split-feature__kicker{font-family:var(--sans);font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--cyan)}
.split-feature__title{font-family:var(--display);font-weight:300;font-size:27px;line-height:1.2;color:var(--fg);margin:0}
.split-feature__title em{font-style:normal;color:var(--gold)}
.split-feature__text{font-family:var(--sans);font-size:14.5px;line-height:1.66;color:var(--dim);margin:0}
.split-feature__actions{display:flex;flex-wrap:wrap;gap:12px;padding-top:6px}

.split-feature__visual{min-width:0;position:relative;border:1px solid var(--edge);background:var(--deep);overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:250px}
.split-feature__visual img{display:block;width:100%;height:100%;max-width:100%;object-fit:cover}
.split-feature__visual figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px 16px;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--edge);font-family:var(--sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.split-feature__visual--gold{border-color:var(--edge-hi)}

.content-split{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:40px;align-items:start}
.content-split--wide{grid-template-columns:minmax(0,1fr) minmax(0,340px)}
.content-split__side{min-width:0;display:flex;flex-direction:column;gap:16px;position:sticky;top:96px}
.content-split__label{font-family:var(--sans);font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--dim)}
.content-split__heading{font-family:var(--display);font-weight:300;font-size:26px;line-height:1.2;color:var(--fg);margin:0}
.content-split__body{min-width:0;display:flex;flex-direction:column;gap:26px}

.starts{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 22px;border-top:1px solid var(--edge);padding-top:16px}
.starts__label{font-family:var(--sans);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--dim)}
.starts__value{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:15px;color:var(--cyan)}
.starts__value--soon{color:var(--amber)}
.starts__value--live{color:var(--rose)}
.starts__dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--rose);margin-right:8px;animation:starts-pulse 2.2s ease-in-out infinite}
.starts__note{font-family:var(--sans);font-size:12px;color:var(--dim)}

@keyframes starts-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}

@media (max-width:1000px){
.download-layout{grid-template-columns:minmax(0,1fr);gap:26px}
.split-feature{grid-template-columns:minmax(0,1fr);gap:26px;padding:30px 0}
.split-feature--flip .split-feature__copy,.split-feature--flip .split-feature__visual{order:0}
.content-split,.content-split--wide{grid-template-columns:minmax(0,1fr);gap:26px}
.content-split__side{position:static;top:auto}
.fact-grid,.fact-grid--three{grid-template-columns:repeat(2,minmax(0,1fr))}
.fact-grid__cell:nth-child(2n+1){border-left:0}
.fact-grid__cell:nth-child(n+3){border-top:1px solid var(--edge)}
.download-card{padding:26px 22px 28px}
.download-card__title{font-size:28px}
}

@media (max-width:620px){
.fact-grid,.fact-grid--three,.fact-grid--two{grid-template-columns:minmax(0,1fr)}
.fact-grid__cell{border-left:0;border-top:1px solid var(--edge)}
.fact-grid__cell:first-child{border-top:0}
.download-card__head{flex-direction:column;gap:18px}
.download-card__meta{grid-template-columns:minmax(0,1fr);gap:5px 0}
.download-card__meta dd{margin-bottom:9px}
.download-card__actions{flex-direction:column;align-items:stretch}
.download-card__cta{text-align:center}
.install-steps li{padding-left:42px}
.split-feature__visual{min-height:190px}
}

@media (prefers-reduced-motion:reduce){
.starts__dot{animation:none}
.download-card__cta{transition:none}
.download-card__cta:hover{transform:none}
}


/* ===== commerce ===== */
/* Account modules — wallet, stash, commerce, character tools */

.commerce-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:18px;margin:22px 0}

.commerce-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:20px 20px 22px;background:var(--sur);border:1px solid var(--edge);transition:border-color .2s ease,transform .2s ease}
.commerce-card:hover{border-color:var(--edge-hi);transform:translateY(-2px)}
.commerce-card__media{display:flex;align-items:center;justify-content:center;height:104px;background:var(--deep);border:1px solid var(--edge)}
.commerce-card__media img{max-width:72px;max-height:72px;display:block}
.commerce-card__name{font-family:var(--display);font-size:16px;font-weight:600;color:var(--fg);line-height:1.35;margin:0}
.commerce-card__tag{font-family:var(--sans);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--dim)}
.commerce-card__desc{font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--dim);margin:0}
.commerce-card__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;padding-top:14px;border-top:1px solid rgba(120,220,220,.06)}
.commerce-card__cost{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:19px;color:var(--rose)}
.commerce-card__cost-unit{font-family:var(--sans);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);margin-left:7px}
.commerce-card__buy{background:var(--cyan);color:#03201c;border:0;padding:14px 30px;font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:transform .18s ease}
.commerce-card__buy:hover{transform:translateY(-2px)}
.commerce-card--featured{border-color:rgba(232,201,138,.34)}
.commerce-card--featured .commerce-card__name{color:var(--gold)}
.commerce-card--locked{border:1px dashed var(--edge);background:var(--sur);cursor:not-allowed}
.commerce-card--locked:hover{transform:none;border-color:var(--edge)}
.commerce-card--locked .commerce-card__name,.commerce-card--locked .commerce-card__desc,.commerce-card--locked .commerce-card__cost{color:var(--dim)}
.commerce-card--locked .commerce-card__media{opacity:.4}
.commerce-card--locked .commerce-card__buy{background:transparent;border:1px dashed var(--edge);color:var(--dim);cursor:not-allowed}
.commerce-card--locked .commerce-card__buy:hover{transform:none}

.stash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;margin:18px 0}

.stash-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;padding:14px 12px 15px;background:var(--sur);border:1px solid var(--edge);cursor:pointer;transition:border-color .18s ease,background-color .18s ease}
.stash-card:hover{border-color:var(--edge-hi);background:rgba(120,220,220,.04)}
.stash-card__img{display:flex;align-items:center;justify-content:center;width:60px;height:60px;background:var(--deep);border:1px solid var(--edge)}
.stash-card__img img{max-width:46px;max-height:46px;display:block}
.stash-card__name{font-family:var(--sans);font-size:12.5px;line-height:1.45;color:var(--fg);text-align:center}
.stash-card__qty{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px;color:var(--cyan)}
.stash-card__grade{font-family:var(--sans);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.stash-card--selected{border-color:var(--cyan);background:rgba(79,224,208,.09)}
.stash-card--selected:hover{background:rgba(79,224,208,.13)}
.stash-card--bound .stash-card__grade{color:var(--gold)}
.stash-card--locked{border:1px dashed var(--edge);cursor:not-allowed}
.stash-card--locked:hover{border-color:var(--edge);background:var(--sur)}
.stash-card--locked .stash-card__name,.stash-card--locked .stash-card__qty{color:var(--dim)}
.stash-card--locked .stash-card__img{opacity:.4}
.stash-card--empty{border:1px dashed var(--edge);background:transparent;cursor:default;min-height:132px}
.stash-card--empty:hover{border-color:var(--edge);background:transparent}

.stash-card__select{position:absolute;top:8px;left:8px;width:15px;height:15px;background:var(--deep);border:1px solid var(--edge);appearance:none;-webkit-appearance:none;cursor:pointer;margin:0}
.stash-card__select:checked{background:var(--cyan);border-color:var(--cyan)}
.stash-card__select:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.stash-card__select:disabled{border-style:dashed;cursor:not-allowed}

.stash-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:0;padding:0;background:var(--sur);border:1px solid var(--edge);margin:18px 0}
.stash-toolbar__action{padding:13px 20px;background:transparent;border:0;border-right:1px solid var(--edge);font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--fg);cursor:pointer;transition:background-color .18s ease,color .18s ease}
.stash-toolbar__action:hover{background:rgba(120,220,220,.04);color:var(--cyan)}
.stash-toolbar__action:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.stash-toolbar__action--active{color:var(--cyan);background:rgba(120,220,220,.06)}
.stash-toolbar__action--hot{color:var(--rose)}
.stash-toolbar__action--hot:hover{color:var(--rose);background:rgba(255,138,156,.08)}
.stash-toolbar__action--locked,.stash-toolbar__action:disabled{color:var(--dim);cursor:not-allowed}
.stash-toolbar__action--locked:hover,.stash-toolbar__action:disabled:hover{background:transparent;color:var(--dim)}
.stash-toolbar__count{margin-left:auto;padding:13px 20px;border-left:1px solid var(--edge);border-right:0;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12px;color:var(--cyan)}
.stash-toolbar__label{padding:13px 20px;border-right:1px solid var(--edge);font-family:var(--sans);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}

.stash-destroy{padding:22px 22px 24px;background:var(--sur);border:1px solid rgba(255,138,156,.3);margin:18px 0}
.stash-destroy__title{font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:.02em;color:var(--rose);margin:0 0 8px}
.stash-destroy__warn{font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--dim);margin:0 0 16px}
.stash-destroy__target{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px;color:var(--fg)}
.stash-destroy__confirm{background:var(--rose);color:#2a0710;border:0;padding:14px 30px;font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:transform .18s ease}
.stash-destroy__confirm:hover{transform:translateY(-2px)}
.stash-destroy__cancel{background:transparent;color:var(--fg);border:1px solid var(--edge-hi);padding:14px 30px;font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;margin-left:10px}
.stash-destroy__input{width:100%;max-width:320px;padding:11px 13px;background:var(--deep);border:1px solid var(--edge);font-family:var(--mono);font-size:13px;color:var(--fg);margin-bottom:16px}
.stash-destroy__input:focus{border-color:var(--cyan);outline:none}
.stash-destroy--locked{border:1px dashed var(--edge)}
.stash-destroy--locked .stash-destroy__title{color:var(--dim)}

.stash-destroy__choices{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px;padding:0;list-style:none}
.stash-destroy__choices li{margin:0}
.stash-destroy__choices label{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;background:var(--deep);border:1px solid var(--edge);font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);cursor:pointer;transition:border-color .18s ease,color .18s ease}
.stash-destroy__choices label:hover{border-color:var(--edge-hi);color:var(--fg)}
.stash-destroy__choices input{accent-color:var(--rose);margin:0}
.stash-destroy__choices input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

.player-module{position:relative;padding:24px 24px 26px;background:var(--glass);backdrop-filter:blur(14px);border:1px solid var(--edge);margin-bottom:20px}
.player-module__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--edge);margin-bottom:18px}
.player-module__title{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--fg);margin:0}
.player-module__hint{font-family:var(--sans);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.player-module__body{font-family:var(--sans);font-size:14px;line-height:1.62;color:var(--dim)}
.player-module__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(120,220,220,.06)}
.player-module--locked{border:1px dashed var(--edge)}
.player-module--locked .player-module__title,.player-module--locked .player-module__body{color:var(--dim)}
.player-module__lock{display:inline-block;padding:4px 12px;border:1px solid rgba(255,196,107,.4);border-radius:40px;font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--amber)}

.module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin:22px 0}

.module-card{position:relative;display:flex;flex-direction:column;gap:11px;padding:22px;background:var(--sur);border:1px solid var(--edge);transition:border-color .2s ease,transform .2s ease}
.module-card:hover{border-color:var(--edge-hi);transform:translateY(-2px)}
.module-card__icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--deep);border:1px solid var(--edge);color:var(--cyan)}
.module-card__title{font-family:var(--display);font-size:16px;font-weight:600;color:var(--fg);margin:0}
.module-card__desc{font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--dim);margin:0}
.module-card__meta{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12px;color:var(--cyan)}
.module-card__lock{position:absolute;top:16px;right:16px;padding:4px 12px;border:1px solid rgba(255,196,107,.4);border-radius:40px;font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--amber)}
.module-card__action{margin-top:auto;padding-top:14px;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan)}
.module-card--locked{border:1px dashed var(--edge);cursor:not-allowed}
.module-card--locked:hover{transform:none;border-color:var(--edge)}
.module-card--locked .module-card__title,.module-card--locked .module-card__desc,.module-card--locked .module-card__meta,.module-card--locked .module-card__action{color:var(--dim)}
.module-card--locked .module-card__icon{color:var(--dim);border-style:dashed}

.wallet-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:22px 0}

.wallet-card{display:flex;flex-direction:column;gap:10px;padding:22px 22px 24px;background:var(--sur);border:1px solid var(--edge)}
.wallet-card__label{font-family:var(--sans);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}
.wallet-card__value{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:32px;line-height:1.1;color:var(--cyan)}
.wallet-card__unit{font-family:var(--sans);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);margin-left:9px}
.wallet-card__note{font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--dim);margin:0}
.wallet-card__delta{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12px;color:var(--cyan)}
.wallet-card__delta--spend{color:var(--rose)}
.wallet-card__action{margin-top:6px;align-self:flex-start;background:var(--cyan);color:#03201c;border:0;padding:14px 30px;font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:transform .18s ease}
.wallet-card__action:hover{transform:translateY(-2px)}
.wallet-card--gold{border-color:rgba(232,201,138,.3)}
.wallet-card--gold .wallet-card__value{color:var(--gold)}
.wallet-card--locked{border:1px dashed var(--edge)}
.wallet-card--locked .wallet-card__value,.wallet-card--locked .wallet-card__label{color:var(--dim)}
.wallet-card--locked .wallet-card__action{background:transparent;border:1px dashed var(--edge);color:var(--dim);cursor:not-allowed}
.wallet-card--locked .wallet-card__action:hover{transform:none}
.wallet-card__lock{align-self:flex-start;padding:4px 12px;border:1px solid rgba(255,196,107,.4);border-radius:40px;font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--amber)}

.balance-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid rgba(120,220,220,.06)}
.balance-row:hover{background:rgba(120,220,220,.04)}
.balance-row__name{font-family:var(--sans);font-size:13.5px;color:var(--fg)}
.balance-row__meta{font-family:var(--sans);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.balance-row__time{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12px;color:var(--dim)}
.balance-row__value{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:15px;color:var(--cyan);text-align:right;margin-left:auto}
.balance-row__value--cost{color:var(--rose)}
.balance-row__value--pending{color:var(--amber)}
.balance-row--total{border-bottom:0;border-top:1px solid var(--edge);padding-top:16px;margin-top:4px}
.balance-row--total .balance-row__name{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}
.balance-row--total .balance-row__value{font-size:19px;color:var(--gold)}
.balance-row--locked{border-bottom:1px dashed var(--edge)}
.balance-row--locked .balance-row__name,.balance-row--locked .balance-row__value{color:var(--dim)}

.commerce-card__buy:focus-visible,.stash-toolbar__count:focus-visible,.stash-destroy__confirm:focus-visible,.stash-destroy__cancel:focus-visible,.wallet-card__action:focus-visible,.stash-card:focus-visible,.module-card:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

@media(max-width:1000px){
.commerce-grid{grid-template-columns:1fr}
.module-grid{grid-template-columns:1fr}
.wallet-grid{grid-template-columns:1fr}
.stash-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
.player-module{padding:20px}
}

@media(max-width:620px){
.stash-grid{grid-template-columns:repeat(2,1fr);gap:10px}
.stash-toolbar{flex-direction:column;align-items:stretch}
.stash-toolbar__action,.stash-toolbar__label{border-right:0;border-bottom:1px solid var(--edge);text-align:left}
.stash-toolbar__count{margin-left:0;border-left:0;border-top:1px solid var(--edge)}
.wallet-card__value{font-size:27px}
.balance-row{flex-wrap:wrap;gap:6px}
.balance-row__value{font-size:14px}
.stash-destroy__cancel{margin-left:0;margin-top:10px}
.commerce-card__foot{flex-direction:column;align-items:flex-start}
.commerce-card__buy,.wallet-card__action,.stash-destroy__confirm,.stash-destroy__cancel{width:100%;padding:14px 20px}
}

@media(prefers-reduced-motion:reduce){
.commerce-card,.commerce-card:hover,.commerce-card__buy:hover,.module-card,.module-card:hover,.wallet-card__action:hover,.stash-destroy__confirm:hover,.stash-card{transition:none;transform:none}
}

/* ===== fit and finish ===== */

/* Measured on the live page: the eight navigation items needed 764px in a
   692px bar, so the header silently wrapped onto a second row on an ordinary
   desktop. The labels are not the problem — the tracking, size and gap were. */
.site-header__inner{gap:22px}
.site-nav{gap:13px}
.site-nav a{font-size:11px;letter-spacing:.02em}

/* The footer columns are lists; give each link its own line. */
.footer-column ul{margin:0;padding:0}
.footer-column a{display:block}

/* The header brand carries no seal, so the header zeroes the brand gap. The
   footer brand is a different shape and needs it back. */
.site-footer .brand{gap:12px}
.footer-brand .brand__wordmark strong{letter-spacing:.12em}

/* Items are shown with their picture, the way they look in the client. The
   frame is drawn by the container, so an item with no picture keeps the same
   footprint instead of collapsing the row. */
.item-badge{display:inline-flex;align-items:center;gap:10px;min-width:0}
.item-badge__icon{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;background:var(--deep);border:1px solid var(--edge);border-radius:2px}
.item-badge__icon img{width:36px;height:36px;display:block;image-rendering:auto}
.item-badge__name{font-family:var(--display);font-size:14px;line-height:1.3;color:var(--fg);overflow-wrap:anywhere}

/* Shop and Trader cards name the item in their own heading, so the card head
   carries the picture and the category on one line. */
.commerce-card__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.commerce-card__head small{margin:0;text-align:right}
.commerce-card--item h2{margin-top:0}

/* Prize lists read as rows of items rather than as bullet points. */
.prize-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.prize-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--edge)}
.prize-list li:last-child{border-bottom:0}
.prize-list__amount{flex:0 0 auto;font-family:var(--mono);font-size:13px;color:var(--dim)}

/* The stash card leads with the item, so its quantity heading sits tighter. */
.stash-card .item-badge{margin-bottom:2px}
.stash-card h2{margin:0}

/* The invite code is meant to be read off a screen and typed back in, so it is
   set large, monospaced and widely tracked rather than styled as a heading. */
.invite-card .invite-code{font-family:var(--mono);font-size:30px;letter-spacing:.22em;color:var(--gold);margin:6px 0 10px}
.invite-link{margin:0}
.invite-link code{display:block;overflow-x:auto;white-space:nowrap;padding:8px 10px;background:var(--deep);border:1px solid var(--edge);font-size:12px;color:var(--fg)}

/* "optional" beside a field label, so nobody thinks an invite code is needed. */
.label-note{font-weight:400;text-transform:none;letter-spacing:0;color:var(--dim);font-size:12px}

/* The people you invited: name, how far along they are, when they joined. */
.invited-list{display:flex;flex-direction:column;gap:0;border:1px solid var(--edge);background:var(--sur)}
.invited-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:16px;padding:11px 16px;border-bottom:1px solid var(--edge)}
.invited-row:last-child{border-bottom:0}
.invited-row strong{font-family:var(--display);font-size:15px;color:var(--fg)}
.invited-row span{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan)}
.invited-row time{font-family:var(--mono);font-size:12px;color:var(--dim)}
@media (max-width:560px){.invited-row{grid-template-columns:1fr auto;row-gap:4px}.invited-row time{grid-column:1/-1}}

/* A single news post or guide on its own page. Measured for reading, not for
   filling the width of a desktop monitor. */
.article{max-width:68ch;margin:0 auto}
.article p{font-size:16px;line-height:1.72;margin:0 0 18px}
.article__meta{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 26px;padding-bottom:14px;border-bottom:1px solid var(--edge)}
.article__meta time{font-family:var(--mono);font-size:12px;color:var(--dim)}

/* Information articles shown one after another on the Server page, rather than
   each on its own page: they are short and belong together. */
.article--stacked{max-width:68ch;margin:0 auto 40px}
.article--stacked:last-child{margin-bottom:0}
.article--stacked h2{margin:0 0 8px}
.article__lead{color:var(--dim);margin:0 0 18px}

/* Category headings inside the shop. The catalogue is 280 items across ten
   categories; without these it is one undifferentiated wall of cards. */
.shop-category{font-family:var(--display);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin:34px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--edge)}
.shop-category:first-of-type{margin-top:6px}
.commerce-card--item .commerce-card__head{justify-content:flex-start}

/* ===== the signed-in account area ===== */
/* Everything below fills gaps: classes the templates use that the sheet never
   answered, and tags (h2, p, dl, small, select) that the account templates emit
   bare where the sheet expected a BEM element class. Nothing here changes a
   rule the public pages depend on. */

/* The one wrapper every account module sits in had no rule at all, so headings,
   forms and cards floated straight on the world photograph with nothing to say
   where the module began or ended. "Paper" is the lit counterpart of the
   existing --ink wash, and it has to stay clearly BELOW --sur: composited over
   the inner-page ground, var(--glass) lands within a few levels of --sur
   itself, which would flatten every card standing on it. A weak wash keeps the
   cards reading as raised. No padding or layout of its own, so the public pages
   that also use it keep their spacing exactly as it is. */
.section--paper{background:linear-gradient(180deg,rgba(8,21,27,.45),transparent)}

/* The account section is the last thing before the footer, and its bottom
   hairline landed on the footer's top hairline as a doubled 2px rule. */
#main-content>.section:last-child{border-bottom:0}

/* --- empty states ------------------------------------------------------
   Nine modules show nothing but an empty state, and it had no rule, so the
   reader got a stray "JD", a browser-default bold heading pressed against it
   and a loose sentence. Both shapes the templates emit are answered here: the
   <article> with a seal, and the bare <p> - the latter now carries the class in
   the template rather than being matched as "any unclassed paragraph", which
   also caught the navigation button at the foot of four admin pages. Dashed,
   like every other empty or locked thing in this sheet. */
.narrow-state{
  display:block;
  margin:0 0 26px;
  padding:28px 26px 30px;
  background:transparent;
  border:1px dashed var(--edge);
  font-family:var(--sans);
  font-size:13.5px;
  line-height:1.62;
  color:var(--dim);
}
.narrow-state:last-child{margin-bottom:0}

article.narrow-state{display:flex;flex-direction:column;align-items:flex-start;gap:13px}

/* The seal is the same mark the header brand and the final call to action use,
   rather than two letters loose on a line. */
.narrow-state>span[aria-hidden]{
  display:grid;place-items:center;flex:0 0 auto;
  width:44px;height:44px;
  border:1px solid var(--edge-hi);
  background:var(--deep);
  font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.08em;
  color:var(--cyan);
}
.narrow-state h2{font-family:var(--display);font-size:17px;font-weight:600;color:var(--fg);margin:0}
.narrow-state p{font-size:13.5px;line-height:1.62;color:var(--dim);margin:0;max-width:58ch}
.narrow-state .button{margin-top:5px}

/* --- headings need room above them, not only below ---------------------
   .section-heading carries a bottom margin only, so every heading was closer to
   the block above it than to its own content: the banker's cyan button touched
   the next eyebrow, and amber notices touched the heading under them. Scoped to
   the account wrapper, and the eyebrow paragraph the public pages put directly
   above a heading is excluded so those pages do not gain a gap. */
.section--paper :is(p:not(.eyebrow),form,article,aside,ul,ol,div.commerce-grid,div.invited-list,div.stash-grid)+.section-heading{margin-top:46px}

/* Two status notices in a row met border to border and read as one divided box;
   the notice also sat flush against whatever followed it. */
.section--paper .integration-notice{margin-bottom:26px}

/* The notice body is a bare <span>, not the <p> the sheet styles, so the
   explanation rendered at full body size and full brightness — louder than the
   content it annotates. */
.integration-notice>span>span{
  display:block;
  font-family:var(--sans);font-size:13px;line-height:1.6;color:var(--dim);
}

/* --- the sign-in gate a stranger meets --------------------------------- */
/* On the signed-out module pages this is the entire page and none of it had a
   rule: the 入 seal sat alone on a line, the heading touched the paragraph, and
   the four reassurances were the only disc-bulleted list on the site. */
.locked-module{
  display:flex;align-items:flex-start;gap:28px;
  padding:38px 40px 40px;
  background:var(--glass);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--edge);
}
.locked-module__seal{
  flex:0 0 auto;display:grid;place-items:center;
  width:64px;height:64px;
  border:1px solid var(--edge-hi);
  background:var(--deep);
  font-family:var(--display);font-size:26px;line-height:1;
  color:var(--gold);
}
.locked-module>div{min-width:0}
.locked-module h2{font-size:25px;font-weight:300;color:var(--fg);margin:0 0 12px}
.locked-module>div>p{font-size:14.5px;line-height:1.66;color:var(--dim);max-width:60ch;margin:0 0 4px}

/* The reassurance list, in the same voice as the sign-in page's intro list:
   a hairline rule per line and a short cyan tick, never a disc marker. */
.locked-module__facts{list-style:none;margin:16px 0 24px;padding:0}
.locked-module__facts li{
  position:relative;padding:9px 0 9px 22px;
  font-size:13.5px;line-height:1.6;color:var(--dim);
  border-bottom:1px solid rgba(120,220,220,.07);
}
.locked-module__facts li:last-child{border-bottom:0}
.locked-module__facts li::before{content:"";position:absolute;left:0;top:1.25em;width:8px;height:1px;background:var(--cyan)}

/* --- the list of the other eighteen modules ----------------------------
   The sheet styles .route-list li; this nav has no <li> at all, just anchors
   emitted with no whitespace between them, so eighteen links ran together into
   one unbroken string. Made a grid of cells the way the guide grid is: one
   hairline background showing through a 1px gap. */
nav.route-list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));
  gap:1px;margin:0;padding:0;
  background:var(--edge);border:1px solid var(--edge);
}
nav.route-list a{
  display:block;padding:13px 16px;
  background:var(--sur);
  font-family:var(--sans);font-size:12.5px;line-height:1.4;color:var(--dim);
  transition:background .18s ease,color .18s ease;
}
nav.route-list a:hover{background:var(--deep);color:var(--fg)}
nav.route-list a[aria-current]{color:var(--cyan)}

/* --- shop and trader card interiors ------------------------------------
   The card shells were used but their contents are bare tags, so every one of
   the 280 cards was a bordered box full of browser defaults. These give the
   card back its hierarchy: kicker, name, description. Anything that already
   carries a class of its own (the invite code, the invite link) is left alone. */
.commerce-card>small{
  display:block;
  font-family:var(--sans);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--dim);
}
.commerce-card>h2:not([class]){
  font-family:var(--display);font-size:16px;font-weight:600;line-height:1.35;
  color:var(--fg);margin:0;
}
.commerce-card>p:not([class]){
  font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--dim);margin:0;
}
/* The one warning on the Gold page that must not read like body copy. Scoped to
   its own class: as ">p:not([class])>strong" it also turned "Paid.", "On hold."
   and every other bold lead-in on the donation page alarm-red. */
.commerce-card__warn strong{color:var(--rose)}

/* Bundle / Price / Max were a raw definition list: label on one line, value
   indented 40px on the next, six loose lines per card. Read as rows now, label
   left, figure right, and the list no longer pushes the card apart with its
   default 1em margins. */
.commerce-card dl{margin:0;display:flex;flex-direction:column}
.commerce-card dl>div{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px;
  padding:8px 0;border-bottom:1px solid rgba(120,220,220,.06);
}
.commerce-card dl>div:first-child{border-top:1px solid rgba(120,220,220,.06)}
.commerce-card dt{
  font-family:var(--sans);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--dim);
}
.commerce-card dd{
  margin:0 0 0 auto;text-align:right;
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px;color:var(--fg);
}

/* The card head carries the picture only; the card names the item underneath.
   This used to be done here with display:none, masking a Twig trap in
   _item.html.twig that made every card print its name twice. That is fixed at
   the source, so nothing is hidden - an item with no picture simply keeps its
   empty frame, and dashed says "no picture" rather than "broken". */

/* An item with no picture keeps its frame on purpose; dashed says "no picture"
   instead of showing a column of eight boxes that read as broken images. */
.item-badge__icon:empty{border-style:dashed;background:transparent}

/* A buy form inside a card is one short column; the page-level field rhythm of
   22px made every card taller than its own contents. */
.commerce-card .register-form{gap:14px}

/* One lottery in a grid built for four left the single card squeezed into the
   far-left quarter with 880px of empty darkness beside it. */
.commerce-grid:has(>.commerce-card:only-child){grid-template-columns:minmax(0,1fr);max-width:520px}

/* --- selects -----------------------------------------------------------
   The native arrow is removed by the field grammar and nothing was drawn in its
   place, so a dropdown looked exactly like a text input with 34px of dead space
   on the right. Two thin strokes, in the label colour. */
.register-form select,
.register-form select:focus,
.register-form select:disabled{
  background-image:
    linear-gradient(45deg,transparent 50%,var(--dim) 50%),
    linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% - 2px),calc(100% - 15px) calc(50% - 2px);
  background-size:5px 5px;
  background-repeat:no-repeat;
}
/* A disabled select kept the solid fill and solid border of a live field while
   the disabled button beside it went dashed and transparent. Only .form-panel
   was covered; the account modules use .register-form. */
.register-form select:disabled,
.auth-form select:disabled,
.form-grid select:disabled{
  color:var(--dim);
  border:1px dashed var(--edge);
  background-color:transparent;
  cursor:not-allowed;
}

/* --- a form standing on its own, outside a card ------------------------
   The banker's order form had no panel and no width limit, so a six-digit
   number field and its submit button each stretched the full 1180px while the
   heading above them was capped at 64ch. */
.section--paper>div.container>form.register-form:not(.form-grid){
  max-width:520px;
  margin:0 0 4px;
  padding:26px 28px 30px;
  background:var(--sur);
  border:1px solid var(--edge);
}
/* The field grammar makes every submit button full width, which is right inside
   a card and wrong for a form standing on its own. */
.section--paper>div.container>form.register-form:not(.form-grid) .button{align-self:flex-start;width:auto}

/* --- the hero's missing atmosphere -------------------------------------
   Every inner page ships an empty mist div; with no rule it was an in-flow
   zero-height element and the hero stayed a flat band. */
.page-hero{position:relative;overflow:hidden}
.page-hero__mist{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 140% at 50% 100%,var(--glass),transparent 62%);
}
.page-hero__content{position:relative;z-index:1}

/* --- footer column headings --------------------------------------------
   The templates emit <h2> where the sheet styles <h5>, so Play / Your account /
   Legal rendered as browser-default bold headings larger than anything near
   them, with no space above their link lists. */
.footer-column h2{
  font-family:var(--sans);font-size:10px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);
  margin:0 0 12px;
}

/* --- shop category jump links ------------------------------------------
   The shop's five category links are bare anchors inside .ranking-tabs, so the
   tab grammar (which lives on .ranking-tabs__tab) never reached them and the
   row read as a broken sentence. Only unclassed anchors are touched, so the
   rankings page keeps its own tabs. */
.ranking-tabs>a:not([class]){
  padding:13px 20px;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--dim);white-space:nowrap;
  transition:color .18s ease,border-color .18s ease,background .18s ease;
}
.ranking-tabs>a:not([class]):hover{color:var(--fg);background:rgba(120,220,220,.04)}
.ranking-tabs>a:not([class])[aria-current]{color:var(--cyan);border-bottom-color:var(--cyan)}

/* --- the stash, once a player actually owns something -------------------
   The stash capture is the empty state, so none of this is on screen yet, but
   the populated branch uses tags and wrappers the sheet does not answer. */

/* The tick box is a <label> wrapping a real checkbox, while the sheet styles
   that class as the input itself. Let the label stay the box and make the
   checkbox fill it invisibly, so the ticked state is visible again. */
label.stash-card__select{display:grid;place-items:center;padding:0}
label.stash-card__select input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  width:100%;height:100%;margin:0;padding:0;
  background:transparent;border:0;cursor:pointer;
}
label.stash-card__select:has(input:checked){background:var(--cyan);border-color:var(--cyan)}

/* The toolbar is built for __label / __action / __count children and gets a raw
   <label><select> and a button instead: with padding:0 and gap:0 they sat flush
   inside one bordered strip. */
.stash-toolbar>label{
  display:flex;align-items:center;gap:14px;flex:1 1 260px;min-width:0;
  margin:0;padding:0 0 0 20px;
  font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--dim);
}
.stash-toolbar>label>span{flex:0 0 auto}
.stash-toolbar select{
  flex:1 1 auto;min-width:0;align-self:stretch;
  border:0;border-left:1px solid var(--edge);border-radius:0;
  background:var(--deep);color:var(--fg);
  font-family:var(--sans);font-size:13px;padding:13px 16px;cursor:pointer;
}
.stash-toolbar select:disabled{color:var(--dim);cursor:not-allowed}
.stash-toolbar>.button{margin-left:auto;align-self:stretch}

/* The destroy panel is a <details>; its summary had no rule, so a rose-bordered
   box opened with a browser disclosure triangle and an unstyled label. */
.stash-destroy>summary{
  display:flex;align-items:center;gap:11px;cursor:pointer;list-style:none;
  font-family:var(--display);font-size:15px;font-weight:700;color:var(--rose);
}
.stash-destroy>summary::-webkit-details-marker{display:none}
.stash-destroy>summary::before{
  content:"";flex:0 0 auto;width:7px;height:7px;
  border:solid var(--rose);border-width:0 1px 1px 0;
  transform:rotate(-45deg);transition:transform .18s ease;
}
.stash-destroy[open]>summary::before{transform:rotate(45deg)}
.stash-destroy>p{margin:14px 0 16px;font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--dim)}

/* The lottery's twin disclosure. Every draw a player enters gets a "Check this
   draw" details inside its card, and styling one of the two disclosures in the
   account area and leaving the other on the browser default triangle is worse
   than styling neither. Same grammar, in the calm colour rather than the rose. */
.commerce-card details>summary{
  display:flex;align-items:center;gap:11px;cursor:pointer;list-style:none;
  font-family:var(--display);font-size:13.5px;font-weight:600;color:var(--cyan);
}
.commerce-card details>summary::-webkit-details-marker{display:none}
.commerce-card details>summary::before{
  content:"";flex:0 0 auto;width:6px;height:6px;
  border:solid var(--cyan);border-width:0 1px 1px 0;
  transform:rotate(-45deg);transition:transform .18s ease;
}
.commerce-card details[open]>summary::before{transform:rotate(45deg)}
/* The two digests are 64-character hexadecimal strings; without a break rule
   they push the card wider than its grid track. */
.commerce-card details code{
  display:block;font-family:var(--mono);font-size:10.5px;line-height:1.55;
  color:var(--dim);word-break:break-all;margin-top:8px;
}

/* A stash tile is a picture, a count and two short facts; without these the
   count and the facts print at body size in full brightness. */
.stash-card>h2{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px;font-weight:400;color:var(--cyan)}
.stash-card>small,
.stash-card>strong{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);text-align:center}
.stash-card>p{font-family:var(--sans);font-size:11.5px;line-height:1.5;color:var(--dim);text-align:center;margin:0}
.stash-card>time{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:10.5px;line-height:1.5;color:var(--dim);text-align:center}

/* Characters are rendered with the item-tile classes, whose tracks are 132px
   and whose card is centred and shows a hand cursor. A character line is four
   facts wide and is not clickable, so its own grid reads left and wide. */
.stash-grid[aria-label="Your characters"]{grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.stash-grid[aria-label="Your characters"] .stash-card{align-items:flex-start;gap:6px;padding:18px 20px 20px;cursor:default}
.stash-grid[aria-label="Your characters"] .stash-card:hover{border-color:var(--edge);background:var(--sur)}
.stash-grid[aria-label="Your characters"] .stash-card>h2{font-family:var(--display);font-size:16px;font-weight:600;color:var(--fg)}
.stash-grid[aria-label="Your characters"] .stash-card>small,
.stash-grid[aria-label="Your characters"] .stash-card>strong,
.stash-grid[aria-label="Your characters"] .stash-card>p,
.stash-grid[aria-label="Your characters"] .stash-card>time{text-align:left}

@media(max-width:1000px){
  .locked-module{padding:30px 28px 32px;gap:22px}
  .section--paper :is(p:not(.eyebrow),form,article,aside,ul,ol,div.commerce-grid,div.invited-list,div.stash-grid)+.section-heading{margin-top:38px}
  .stash-grid[aria-label="Your characters"]{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}

@media(max-width:620px){
  .locked-module{flex-direction:column;gap:20px;padding:26px 20px 28px}
  .locked-module__seal{width:52px;height:52px;font-size:22px}
  .locked-module h2{font-size:22px}
  .narrow-state,
  .section--paper>div.container>p:not([class]){padding:22px 18px 24px}
  .section--paper>div.container>form.register-form{padding:22px 18px 24px}
  .section--paper>div.container>form.register-form .button{align-self:stretch;width:100%}
  nav.route-list{grid-template-columns:minmax(0,1fr)}
  .commerce-card dd{margin-left:0}
  .stash-toolbar>label{flex:1 1 auto;padding:13px 16px;border-bottom:1px solid var(--edge)}
  .stash-toolbar select{border-left:0;border-top:1px solid var(--edge);width:100%}
  .stash-toolbar>.button{margin-left:0;width:100%}
  .stash-grid[aria-label="Your characters"]{grid-template-columns:minmax(0,1fr)}
}

/* --- the header's account controls --------------------------------------
   Signing out is a POST, so it is a form rather than a link; without this it
   became a block element and pushed the header actions onto two lines. */
.header-signout{display:inline-flex;margin:0}

/* ===== the last five unstyled classes on the public pages ===============
   The account area was the visible problem, but the same audit run against the
   rendered pages rather than the templates found five more classes with no rule
   at all. None of them is decorative: two carry the whole body of every legal
   page. */

/* --- legal pages -------------------------------------------------------
   `legal-copy` is the container the entire document sits in, and `legal-meta`
   the "last updated" line above it. With no rules, the terms, privacy and
   refund pages ran the full 1240px container width at body size with headings
   the same weight as the paragraphs - the least readable shape a long document
   can have. */
.legal-copy{max-width:74ch;padding-top:6px;padding-bottom:6px}
.legal-copy h2{
  font-family:var(--display);font-size:20px;font-weight:600;color:var(--fg);
  margin:38px 0 12px;padding-top:20px;border-top:1px solid var(--edge);
}
.legal-copy h2:first-of-type{margin-top:26px}
.legal-copy h3{font-family:var(--display);font-size:15.5px;font-weight:600;color:var(--fg);margin:24px 0 8px}
.legal-copy p{font-size:14.5px;line-height:1.72;color:var(--dim);margin:0 0 14px}
.legal-copy ul,
.legal-copy ol{margin:0 0 16px;padding-left:20px}
.legal-copy li{font-size:14.5px;line-height:1.68;color:var(--dim);margin-bottom:7px}
.legal-copy a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.legal-copy strong{color:var(--fg)}

/* The date line reads as a label, not as the first sentence of the document. */
.legal-meta{
  font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cyan);margin:0 0 8px;
}

/* --- the community page's six channel cards ----------------------------
   `guide-grid--three` was written for three cards and never given a rule, so
   the grid fell back to the base `guide-grid` tracks. It now holds six. */
.guide-grid--three{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}

/* --- numbered help steps -----------------------------------------------
   The same shape as `.install-steps`, which the download and guides pages use,
   and which this one was clearly meant to match. Written as its own rule rather
   than a second class on the element so the template does not have to change. */
.steps{list-style:none;counter-reset:step;display:grid;gap:20px;margin:0;padding:0}
.steps>li{position:relative;counter-increment:step;padding-left:46px}
.steps>li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:1px;
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;color:var(--cyan);
  border:1px solid var(--edge);
}
.steps>li h4{font-family:var(--display);font-size:15px;font-weight:600;color:var(--fg);margin:0 0 6px}
.steps>li p{font-size:13.5px;line-height:1.62;color:var(--dim);margin:0}

/* --- one framed picture on the Server page -----------------------------
   `plate` sits beside `split-feature__visual`, which already lays the figure
   out; this only adds the frame the name implies. */
.plate{border:1px solid var(--edge);background:var(--deep)}
.plate img{display:block;width:100%}

/* ===== the lottery, and the shop descriptions ============================ */

/* The page has always promised "every prize and its odds are published before
   you buy" and printed no probability anywhere - the numbers were loaded and
   never rendered. The odds sit at the end of the row, in the cyan the sheet
   uses for a figure that matters, so the eye can run down the column. */
.prize-list__odds{
  flex:0 0 auto;min-width:4.5em;text-align:right;
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:12.5px;color:var(--cyan);
}

/* The only draw on the realm is priced in a currency nothing here credits, so
   the ticket controls are off and this says why. Amber, like every other
   "not yet" on the site, rather than red - nothing is wrong, it is just shut. */
.prize-list__note{
  margin:2px 0 4px;padding:10px 12px;
  border-left:2px solid var(--amber);
  background:rgba(255,196,107,.06);
  font-size:12.5px;line-height:1.55;color:var(--dim);
}

/* Item descriptions carry real line breaks again now that the `rn` artefact is
   out of the catalogue - 145 of them do. Without this the browser collapses
   every one of those breaks and the text runs together exactly as before. */
.commerce-card>p:not([class]){white-space:pre-line}

/* ===== the page every new player has to get through ===================== */
/* Three rules were losing a specificity fight on /register, and between them
   they broke the form, its consent row and its heading. Registration is the one
   page a visitor cannot skip. */

/* `.register-form label` (0,1,1) outranked `.check-label` (0,1,0) on every
   shared property, so the terms row lost `display:flex` and rendered as a block
   of 10px uppercase letters with .22em tracking - a line of tiny shouted
   capitals. And `.register-form input` sets `display:block;width:100%`, which
   `.check-label input` never overrode, so the checkbox became a block on its
   own line with the sentence wrapped underneath it. */
.register-form label.check-label{
  display:flex;align-items:flex-start;gap:12px;
  font-family:var(--sans);font-size:13px;line-height:1.55;
  letter-spacing:0;text-transform:none;font-weight:400;color:var(--dim);
  cursor:pointer;margin:0;
}
.register-form label.check-label input[type="checkbox"]{
  display:inline-block;width:17px;min-width:17px;flex:0 0 17px;margin:1px 0 0;
}
.register-form label.check-label span{display:block}

/* `.form-panel > h2` (13px, uppercase, .26em) and `.form-panel h2` (25px,
   weight 300) have identical specificity, so the later micro-label rule won and
   the heading over the form rendered smaller than the body text beside it -
   while the sidebar's own heading sat at 26px. The panel's heading is the
   page's primary heading and reads like one again. */
.form-panel > h2{
  font-family:var(--display);font-size:25px;font-weight:300;
  letter-spacing:normal;text-transform:none;color:var(--fg);margin:0 0 12px;
}

/* `.form-grid` is two columns and each cell is meant to hold a whole field -
   `.form-grid__wide{grid-column:1/-1}` only makes sense that way. The template
   now wraps each caption with its input, so this keeps the pair together. */
.form-grid > .form-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.form-grid > .form-field > label{margin:0}

/* ===== the most-repeated layout fault on the site ======================= */

/* `.content-split` was `minmax(0,260px) minmax(0,1fr)` - narrow track first -
   and **all ten** pages that use it put the body first: the eyebrow, the
   heading, a four-to-six item list and the buttons. So on every one of them the
   text was crushed into 260px while the illustration or the two-line aside took
   the remaining 880. On the Server page six product descriptions and a 31px
   heading sat in a 260px gutter beside a 800px photograph.
   The track order now matches how every page actually uses it, and the sidebar
   gets the same 340px the `--wide` variant already chose for itself. */
.content-split{grid-template-columns:minmax(0,1fr) minmax(0,340px)}

/* `.rules-layout` is a two-column grid built for exactly two children - the
   main column and `.rules-layout__side`. The Rules section hands it four:
   eyebrow, heading, the rule list and a button row. Auto-placement put the
   heading "Four rules, and we mean them." in column two beside the tiny "Rules"
   eyebrow, and dropped the "Questions? Find us here" link into the sidebar.
   Anything that is not the side column now spans the main one, so the section
   reads top to bottom again. */
.rules-layout > *:not(.rules-layout__side){grid-column:1}

/* A card standing alone in a container had nothing capping its width, so the
   redeem page put a six-character code field and its submit button across the
   full 1180px column. The sheet already solves the same shape twice, for a
   lone commerce card and for a lone form; this is the third place it happens. */
.section--paper > div.container > article.commerce-card{max-width:520px}

/* The empty state that IS the Events page was built out of the status-pill
   component: `.snapshot-state` is a 40px-radius chip for text like "Updated 3m
   ago", and the template puts a heading, a 180-character paragraph and a 42px
   button inside it, all laid out in one nowrap row. Where that component is
   given real content, it stops being a chip. */
.event-list > .snapshot-state{
  display:block;padding:26px 24px 28px;border-radius:0;
  font-size:13.5px;letter-spacing:normal;text-transform:none;white-space:normal;
  text-align:left;
}
.event-list > .snapshot-state h3{
  font-family:var(--display);font-size:19px;font-weight:600;color:var(--fg);
  letter-spacing:normal;text-transform:none;margin:0 0 10px;
}
.event-list > .snapshot-state p{
  font-size:13.5px;line-height:1.62;color:var(--dim);
  letter-spacing:normal;text-transform:none;margin:0 0 18px;max-width:62ch;
}

/* `.text-link` is an 11px, weight-700, UPPERCASE, .18em-tracked inline-flex
   pill with an arrow after it. That is right for a call to action on its own
   line and wrong inside a sentence, where it reads "I have read the SERVER
   RULES -> and agree to them." Inside running copy it is simply a link. */
.check-label .text-link,
.auth-shell__intro .text-link,
.form-footnote .text-link,
.legal-copy .text-link{
  display:inline;font-family:inherit;font-size:inherit;font-weight:600;
  letter-spacing:inherit;text-transform:none;color:var(--cyan);
  text-decoration:underline;text-underline-offset:3px;
}
.check-label .text-link::after,
.auth-shell__intro .text-link::after,
.form-footnote .text-link::after,
.legal-copy .text-link::after{content:none}

/* ===== your characters ================================================== */

/* A character was drawn with the item-tile component: `.stash-grid` lays out
   132px squares and `.stash-card` centres its children, so a character name
   printed at the browser default 22.5px inside a 132px column, its facts came
   out at full brightness instead of the dim treatment every other card uses,
   and the tile offered a hand cursor and a hover highlight on something that
   is not clickable. A character line is four facts wide; it gets its own
   grammar. */
.character-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));
  gap:14px;margin:18px 0 0;
}
.character-card{
  display:flex;flex-direction:column;gap:7px;
  padding:18px 20px 20px;background:var(--sur);border:1px solid var(--edge);
}
.character-card > small{
  font-family:var(--sans);font-size:9.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
}
.character-card > h2{
  font-family:var(--display);font-size:18px;font-weight:600;color:var(--fg);margin:0;
}
.character-card > p{font-size:13px;line-height:1.55;color:var(--dim);margin:0}
.character-card > strong{
  font-family:var(--sans);font-size:9.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);
}
.character-card > time{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:11px;line-height:1.5;color:var(--dim);
}
/* Online is worth seeing at a glance. */
.character-card--online{border-color:var(--edge-hi)}
.character-card--online > small{color:var(--cyan)}

/* `.data-note` draws a hairline above itself to separate it from what came
   before. First in a section there is nothing before it, so the page opened on
   a rule floating across it with 56px of nothing above; and with margin:0 its
   bottom edge sat flush on the dashed empty state below. */
.section--paper > .container > .data-note:first-child{border-top:0;padding-top:0}
.data-note + .narrow-state,
.data-note + .character-grid,
.data-note + .stash-grid{margin-top:18px}

/* A `.text-link` inside a paragraph of running copy is a link, not a call to
   action. The pill treatment - 11px, weight 700, UPPERCASE, .18em tracking,
   inline-flex, with an arrow after it - belongs on its own line. Inside a
   sentence it reads "Ask on DISCORD -> and we will check it."
   Every place the templates do this is a <p> inside a list item or a label, so
   those are named rather than reaching for a blanket rule that would also
   flatten the deliberate ones in card footers. */
.feature-list li p .text-link,
.rule-list li p .text-link,
.locked-module__facts li .text-link,
.install-steps li p .text-link{
  display:inline;font-family:inherit;font-size:inherit;font-weight:600;
  letter-spacing:inherit;text-transform:none;color:var(--cyan);
  text-decoration:underline;text-underline-offset:3px;
}
.feature-list li p .text-link::after,
.rule-list li p .text-link::after,
.locked-module__facts li .text-link::after,
.install-steps li p .text-link::after{content:none}

/* ===== the sign-in page ================================================= */

/* `.auth-form` is a flex column with a single 22px gap, so the space fell
   between an input and the NEXT field's caption exactly as it did between a
   caption and its own input - every label looked as though it belonged to the
   field above it. The template pairs them now, the same wrapper /register uses;
   this is the wrapper. A negative margin was the first idea and would have
   misfired on every card form, where the label WRAPS its control rather than
   preceding it. */
.auth-form > .form-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.auth-form > .form-field > label{margin:0}

/* `.auth-shell__intro a` (0,1,1) outranks `.button--secondary` (0,1,0), so the
   one button inside that column rendered at 11.5px in cyan with a border-bottom
   - a link wearing a button's shape. A button in there is a button. */
.auth-shell__intro a.button{
  font-size:12.5px;color:var(--fg);border-bottom:0;text-decoration:none;
}
.auth-shell__intro a.button--secondary{color:var(--fg)}

/* The gold accent word exists as `.section-heading h2 b` and as
   `.auth-shell__intro h2 em`, and the sign-in headline uses <b> like every
   other heading on the site - so its accent silently did nothing. */
.auth-shell__intro h2 b{font-weight:700;color:var(--gold)}

/* ==========================================================================
   Administration — the operator's layer.

   The panel used to borrow the marketing layout: a full-width hero, prose
   paragraphs, one card per idea. That reads well for a visitor deciding whether
   to play and badly for someone who has to find an account, read its state and
   act on it. Everything here is denser, quieter and built around tables and
   forms rather than headlines.

   Every class is prefixed adm- so nothing can collide with the public site,
   which shares this bundle.
   ========================================================================== */

.adm{--adm-bg:#050c10;--adm-panel:#0a171d;--adm-panel-2:#0c1e25;--adm-line:rgba(120,220,220,.16);
  --adm-line-hi:rgba(120,220,220,.34);--adm-ink:#e9f4f3;--adm-dim:#8aa8a6;--adm-quiet:#6c8c8a;
  min-height:100vh;background:var(--adm-bg);color:var(--adm-ink);
  font-family:var(--sans);font-size:14px;line-height:1.5}
.adm *{box-sizing:border-box}
.adm a{color:inherit;text-decoration:none}

/* --- shell ------------------------------------------------------------- */
.adm__bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:18px;
  padding:0 20px;height:52px;background:#061116;border-bottom:1px solid var(--adm-line)}
.adm__mark{font-family:var(--display);font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:700;color:var(--cyan);white-space:nowrap}
.adm__mark span{display:block;font-size:9px;letter-spacing:.3em;color:var(--adm-quiet);font-weight:600}
.adm__bar-spacer{flex:1}
.adm__who{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--adm-dim)}
.adm__who b{color:var(--adm-ink);font-weight:600}
.adm__role{padding:3px 8px;border:1px solid var(--adm-line);border-radius:2px;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.adm__out{padding:6px 12px;border:1px solid var(--adm-line-hi);background:transparent;
  color:var(--adm-ink);font:inherit;font-size:12px;cursor:pointer;border-radius:2px}
.adm__out:hover{background:rgba(79,224,208,.1)}

.adm__body{display:grid;grid-template-columns:214px minmax(0,1fr);align-items:start}
.adm__nav{position:sticky;top:52px;height:calc(100vh - 52px);overflow-y:auto;
  padding:14px 10px;background:#061116;border-right:1px solid var(--adm-line)}
.adm__group{margin:0 0 16px;list-style:none}
.adm__group-title{padding:6px 10px;font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--adm-quiet)}
.adm__link{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 10px;border-radius:3px;color:var(--adm-dim);font-size:13px}
.adm__link:hover{background:rgba(79,224,208,.07);color:var(--adm-ink)}
.adm__link.is-on{background:rgba(79,224,208,.13);color:var(--adm-ink);
  box-shadow:inset 2px 0 0 var(--cyan)}
.adm__link-count{font-family:var(--mono);font-size:11px;color:var(--adm-quiet)}
.adm__main{padding:20px 24px 60px;min-width:0}

/* --- page head --------------------------------------------------------- */
.adm-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:0 0 18px}
.adm-head h1{font-size:20px;letter-spacing:.01em;margin:0}
.adm-head p{margin:4px 0 0;color:var(--adm-dim);font-size:13px;max-width:70ch}
.adm-head__actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* --- panels ------------------------------------------------------------ */
.adm-panel{background:var(--adm-panel);border:1px solid var(--adm-line);border-radius:4px;
  margin:0 0 16px;overflow:hidden}
.adm-panel__head{display:flex;align-items:center;gap:12px;padding:10px 14px;
  background:var(--adm-panel-2);border-bottom:1px solid var(--adm-line)}
.adm-panel__head h2{font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-family:var(--sans);font-weight:700;color:var(--adm-ink);margin:0}
.adm-panel__note{margin-left:auto;font-size:11px;color:var(--adm-quiet)}
.adm-panel__body{padding:14px}
.adm-panel__body--flush{padding:0}

/* --- statistics strip -------------------------------------------------- */
.adm-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 16px}
.adm-stat{padding:12px 14px;background:var(--adm-panel);border:1px solid var(--adm-line);border-radius:4px}
.adm-stat__n{font-family:var(--display);font-size:24px;line-height:1.1;color:var(--adm-ink)}
.adm-stat__n a{border-bottom:1px solid var(--adm-line-hi)}
.adm-stat__k{margin-top:3px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--adm-quiet)}
.adm-stat--warn .adm-stat__n{color:var(--amber)}
.adm-stat--bad .adm-stat__n{color:var(--rose)}

/* --- tables ------------------------------------------------------------ */
.adm-tablewrap{overflow-x:auto}
.adm-table{width:100%;border-collapse:collapse;font-size:13px}
.adm-table th{position:sticky;top:0;z-index:1;padding:8px 12px;text-align:left;
  background:var(--adm-panel-2);border-bottom:1px solid var(--adm-line);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--adm-quiet);font-weight:700;
  white-space:nowrap}
.adm-table td{padding:9px 12px;border-bottom:1px solid rgba(120,220,220,.08);vertical-align:top}
.adm-table tbody tr:hover{background:rgba(79,224,208,.05)}
.adm-table tbody tr:last-child td{border-bottom:0}
.adm-table__id,.adm-table td.num{font-family:var(--mono);font-size:12px;color:var(--adm-dim)}
.adm-table td.num{text-align:right}
.adm-table a.adm-link{color:var(--cyan);border-bottom:1px solid rgba(79,224,208,.35)}
.adm-table__empty{padding:28px 14px;text-align:center;color:var(--adm-quiet);font-size:13px}

/* --- chips ------------------------------------------------------------- */
.adm-chip{display:inline-block;padding:2px 8px;border-radius:2px;border:1px solid var(--adm-line);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--adm-dim);
  white-space:nowrap}
.adm-chip--ok{color:#7ee6c0;border-color:rgba(126,230,192,.4);background:rgba(126,230,192,.08)}
.adm-chip--warn{color:var(--amber);border-color:rgba(255,196,107,.4);background:rgba(255,196,107,.08)}
.adm-chip--bad{color:var(--rose);border-color:rgba(255,138,156,.4);background:rgba(255,138,156,.08)}
.adm-chip--off{color:var(--adm-quiet)}

/* --- forms ------------------------------------------------------------- */
.adm-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.adm-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.adm-field--grow{flex:1 1 220px}
.adm-field label,.adm-label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--adm-quiet)}
.adm-input,.adm-select,.adm-textarea{padding:8px 10px;background:#061318;color:var(--adm-ink);
  border:1px solid var(--adm-line);border-radius:3px;font:inherit;font-size:13px;min-width:0}
.adm-input:focus,.adm-select:focus,.adm-textarea:focus{outline:none;border-color:var(--cyan)}
.adm-textarea{min-height:74px;resize:vertical}
.adm-hint{font-size:11px;color:var(--adm-quiet)}

.adm-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:3px;
  border:1px solid var(--adm-line-hi);background:transparent;color:var(--adm-ink);
  font:inherit;font-size:12px;font-weight:600;letter-spacing:.04em;cursor:pointer;white-space:nowrap}
.adm-btn:hover{background:rgba(79,224,208,.1)}
.adm-btn--primary{background:var(--cyan);border-color:var(--cyan);color:#04211d}
.adm-btn--primary:hover{background:#63ecdc}
.adm-btn--danger{border-color:rgba(255,138,156,.5);color:var(--rose)}
.adm-btn--danger:hover{background:rgba(255,138,156,.12)}
.adm-btn--sm{padding:5px 10px;font-size:11px}
.adm-btn[disabled]{opacity:.4;cursor:not-allowed}

/* --- key/value detail -------------------------------------------------- */
.adm-kv{display:grid;grid-template-columns:minmax(120px,180px) minmax(0,1fr);gap:1px;
  background:var(--adm-line);border:1px solid var(--adm-line);border-radius:3px;overflow:hidden}
.adm-kv dt{padding:8px 12px;background:var(--adm-panel-2);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--adm-quiet)}
.adm-kv dd{padding:8px 12px;margin:0;background:var(--adm-panel);font-size:13px;word-break:break-word}
.adm-kv dd.mono{font-family:var(--mono);font-size:12px}

/* --- notices ----------------------------------------------------------- */
.adm-note{display:flex;gap:10px;padding:10px 12px;border-radius:3px;margin:0 0 14px;
  border:1px solid var(--adm-line);background:var(--adm-panel);font-size:13px}
.adm-note--ok{border-color:rgba(126,230,192,.4);background:rgba(126,230,192,.07)}
.adm-note--warn{border-color:rgba(255,196,107,.4);background:rgba(255,196,107,.07)}
.adm-note--bad{border-color:rgba(255,138,156,.4);background:rgba(255,138,156,.07)}
.adm-note b{display:block;margin-bottom:2px}

/* --- two column ---------------------------------------------------------*/
.adm-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;align-items:start}

/* --- narrow screens ------------------------------------------------------*/
@media (max-width:900px){
  .adm__body{grid-template-columns:1fr}
  .adm__nav{position:static;height:auto;border-right:0;border-bottom:1px solid var(--adm-line);
    display:flex;gap:6px;overflow-x:auto;padding:8px}
  .adm__group{display:flex;gap:6px;margin:0}
  .adm__group-title{display:none}
  .adm__link{white-space:nowrap}
  .adm__main{padding:14px}
}