/* ============================================================
   L2Anons — "Realm Registry" design system
   Stone + antique bronze, condensed DIN type, gem status, sharp edges.
   Light (deep stone) + dark (ink stone). Loaded standalone per ported page.
   ============================================================ */
:root{
  /* Deep Stone (light) */
  --ground:#a4aa9d; --ground-2:#989e91; --panel:#c8cec2; --panel-2:#bec4b7;
  --line:#868e7f; --line-strong:#727a6b;
  --ink:#1f2624; --ink-2:#3c443e; --ink-3:#59615a;
  --bronze:#8a5a24; --bronze-2:#a5702f; --bronze-wash:rgba(138,90,36,0.10);
  --garnet:#96253a; --amber:#b06a1c; --jade:#2f6a4b; --steel:#69746f;
  --gem-glow:rgba(150,37,58,0.38);
  --on-bronze:#f4f1e8;
  --shadow:0 1px 0 rgba(255,255,255,0.4) inset, 0 1px 2px rgba(31,38,36,0.06);
  --header-h:60px;
  --f-display:'Oswald','Bahnschrift','DIN Alternate','Arial Narrow',sans-serif;
  --f-ui:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --f-data:'Consolas','Cascadia Mono','SF Mono',ui-monospace,Menlo,'DejaVu Sans Mono',monospace;
  /* aliases: legacy token names resolve to the registry palette */
  --bg:var(--ground);--bg-card:var(--panel);--bg-card-hover:var(--panel-2);--bg-header:var(--ground);
  --text:var(--ink);--text-secondary:var(--ink-2);--text-muted:var(--ink-3);--text-dim:var(--ink-3);
  --accent:var(--bronze);--accent-hover:var(--bronze-2);--accent-light:var(--bronze-wash);
  --border:var(--line);--border-light:var(--line);
  --radius:0px;--radius-sm:0px;--radius-xs:0px;--radius-full:0px;
  --gold:var(--bronze);--gold-dark:var(--bronze);--vip:var(--bronze);--vip-dark:var(--bronze);
}
:root[data-theme="dark"]{
  --ground:#12181a; --ground-2:#0d1214; --panel:#1a2124; --panel-2:#212b2e;
  --line:#2b3538; --line-strong:#3d4b4f;
  --ink:#e6eae3; --ink-2:#b3bcb6; --ink-3:#7f8a85;
  --bronze:#c99a58; --bronze-2:#e2b878; --bronze-wash:rgba(201,154,88,0.12);
  --garnet:#cf4a56; --amber:#d69a45; --jade:#5aa580; --steel:#8a938e;
  --gem-glow:rgba(207,74,86,0.45);
  --on-bronze:#12181a;
  --shadow:0 1px 0 rgba(255,255,255,0.04) inset, 0 2px 6px rgba(0,0,0,0.35);
}

*{box-sizing:border-box}
html{scrollbar-gutter:stable;overflow-y:scroll}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-ui);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;
  display:flex;flex-direction:column;position:relative;
  background-image:radial-gradient(circle at 50% -10%,var(--bronze-wash),transparent 60%);}
a{color:inherit;text-decoration:none}
.tnum{font-variant-numeric:tabular-nums}
.reg{width:100%;max-width:1180px;margin:0 auto;padding:0 26px}
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 26px}

/* ---- Header / masthead ---- */
.header{border-bottom:1px solid var(--line);background:var(--ground);position:sticky;top:0;z-index:100}
.header__inner{display:flex;align-items:center;gap:22px;height:auto;padding:16px 0}
.logo{display:flex;align-items:baseline;gap:11px;margin-right:auto;font-family:var(--f-display);
  font-size:26px;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:var(--ink)}
.logo__icon{color:var(--bronze);font-size:20px}
.nav{display:flex;gap:3px;align-items:center}
.nav__link{font-family:var(--f-ui);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--ink-2);padding:7px 12px;border:1px solid transparent;transition:color .18s,border-color .18s,background .18s}
.nav__link:hover{color:var(--ink);border-color:var(--line)}
.nav__link--active,.nav__link--login{color:var(--bronze);border-color:var(--bronze);background:var(--bronze-wash)}
.theme-toggle{background:none;border:1px solid var(--line);color:var(--ink-2);width:34px;height:34px;
  cursor:pointer;font-size:15px;display:grid;place-items:center;font-family:inherit;transition:border-color .18s,color .18s}
.theme-toggle:hover{border-color:var(--bronze);color:var(--bronze)}
.burger{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:6px}
.burger span{width:22px;height:2px;background:var(--ink-2)}
:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}

/* ---- Lead / grand opening ---- */
.reg-body{flex:1}
.lead{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;
  margin:22px 0;padding:26px 30px;background:var(--panel);
  border:1px solid var(--line-strong);box-shadow:var(--shadow);position:relative;overflow:hidden}
.lead::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 60%,var(--bronze-wash))}
.lead__eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--f-data);font-size:11px;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--bronze);margin-bottom:10px}
.lead__name{font-family:var(--f-display);font-size:54px;line-height:0.96;font-weight:600;
  letter-spacing:0.03em;text-transform:uppercase;margin:0 0 13px;text-wrap:balance}
.lead__tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.tag{font-family:var(--f-data);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-2);
  background:var(--ground-2);border:1px solid var(--line-strong);padding:4px 10px}
.tag--bronze{color:var(--bronze);border-color:var(--bronze);background:var(--bronze-wash)}
.enter{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-data);font-size:12px;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--on-bronze);background:var(--bronze);
  padding:11px 20px;border:1px solid var(--bronze);transition:background .18s,transform .12s}
.enter:hover{background:var(--bronze-2);transform:translateY(-1px)}
.countdown{text-align:right;min-width:250px}
.countdown__label{font-family:var(--f-data);font-size:10px;letter-spacing:0.24em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.clock{display:flex;gap:10px;justify-content:flex-end}
.clock__unit{display:flex;flex-direction:column;align-items:center;min-width:56px}
.clock__val{font-family:var(--f-data);font-size:36px;font-weight:600;line-height:1;color:var(--ink)}
.clock__unit--hot .clock__val{color:var(--garnet)}
.clock__cap{font-family:var(--f-data);font-size:9px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-3);margin-top:8px}
.clock__sep{font-family:var(--f-data);font-size:28px;color:var(--line-strong);margin-top:2px}

/* ---- Ticker (stats) ---- */
.ticker{display:flex;border:1px solid var(--line);overflow:hidden;margin-bottom:26px;background:var(--panel-2)}
.ticker__cell{flex:1;display:flex;align-items:center;gap:11px;padding:13px 18px;border-right:1px solid var(--line)}
.ticker__cell:last-child{border-right:0}
.ticker__n{font-family:var(--f-data);font-size:22px;font-weight:600;line-height:1;color:var(--ink)}
.ticker__lab{font-family:var(--f-data);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-3)}

/* ---- Console: registry + index rail ---- */
.console{display:grid;grid-template-columns:1fr 232px;gap:28px;align-items:start;padding-bottom:36px}
.category-grid{display:flex;flex-direction:column;gap:20px;min-width:0}
.category-col{min-width:0}
.category-col__header{display:flex;align-items:center;gap:12px;margin-bottom:9px}
.category-col__title{font-family:var(--f-display);font-size:15px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-2)}
.category-col__header::after{content:"";flex:1;height:1px;background:var(--line)}
.cat-rows{display:flex;flex-direction:column;gap:5px}

.server-row{display:grid;grid-template-columns:16px 1fr 98px 58px 128px;align-items:center;gap:14px;
  padding:10px 14px;background:var(--panel);border:1px solid var(--line);text-decoration:none;color:inherit;
  transition:border-color .16s,transform .12s,background .16s}
.server-row:hover{border-color:var(--bronze);transform:translateX(2px)}
.server-row--vip,.server-row--premium,.server-row--sovereign{border-color:var(--line-strong)}
/* VIP = fixed bronze. Premium/Sovereign fall back to bronze; the buyer-chosen
   accent class (appended later in the file) overrides the background. */
.server-row--vip,.server-row--premium,.server-row--sovereign{background:linear-gradient(90deg,var(--bronze-wash),var(--panel) 45%)}
.server-row--accent-blue{background:linear-gradient(90deg,#007eed1f,var(--panel) 45%)}
.server-row--accent-purple{background:linear-gradient(90deg,#5d00ed1f,var(--panel) 45%)}
.server-row--accent-red{background:linear-gradient(90deg,rgb(175 10 10 / 12%),var(--panel) 45%)}
/* Sovereign custom banner: image on the right, panel wash keeps left text legible */
.server-row--banner{background-size:cover;background-position:right center;background-repeat:no-repeat}
.server-row__name{font-size:14.5px;font-weight:600;color:var(--ink);white-space:nowrap;display:flex;align-items:center;gap:9px;min-width:0}
.server-row--premium .server-row__name,.server-row--vip .server-row__name,.server-row--sovereign .server-row__name{color:var(--bronze)}
.server-row__chronicle{font-family:var(--f-data);font-size:10.5px;letter-spacing:0.05em;text-transform:uppercase;
  color:var(--ink-2);background:var(--ground-2);border:1px solid var(--line-strong);padding:3px 8px;
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.server-row--premium .server-row__chronicle,.server-row--vip .server-row__chronicle,.server-row--sovereign .server-row__chronicle{background:var(--bronze-wash);border-color:var(--bronze);color:var(--bronze)}
.server-row__rate{font-family:var(--f-data);font-size:14px;font-weight:600;color:var(--ink);text-align:right}
.server-row__date{font-family:var(--f-data);font-size:11.5px;letter-spacing:0.03em;color:var(--ink-3);text-align:right;text-transform:uppercase;white-space:nowrap}
.server-row--premium .server-row__date,.server-row--vip .server-row__date{color:var(--ink-2)}

/* gem — status in form + colour */
.gem{width:11px;height:11px;transform:rotate(45deg);justify-self:center;flex:none}
.gem--today{background:var(--garnet);box-shadow:0 0 0 1px var(--garnet),0 0 9px var(--gem-glow)}
.gem--tomorrow{background:var(--amber);box-shadow:0 0 0 1px var(--amber)}
.gem--soon{background:transparent;border:1.5px solid var(--steel)}
.gem--opened{background:var(--jade);opacity:.55}
.seal{display:inline-block;transform:rotate(45deg);width:9px;height:9px;background:var(--bronze);
  box-shadow:0 0 0 2px var(--panel),0 0 0 3px var(--bronze);flex:none;margin:0 2px}

/* ad slot */
.plot,.cta-banner{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:13px;border:1px dashed var(--line-strong);
  font-family:var(--f-data);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-3);
  background:repeating-linear-gradient(135deg,transparent,transparent 8px,var(--bronze-wash) 8px,var(--bronze-wash) 9px);margin:6px 0}
.plot a,.cta-banner a{color:var(--bronze);border-bottom:1px solid var(--bronze)}
.no-results{grid-column:1/-1;text-align:center;padding:40px;color:var(--ink-3)}

/* ---- Index rail (filters) ---- */
.home-sidebar{position:sticky;top:calc(var(--header-h) + 16px);display:flex;flex-direction:column;gap:18px}
.side-panel{display:flex;flex-direction:column;gap:18px}
.side-panel__head{display:none}
.side-group{border:1px solid var(--line);background:var(--panel)}
.side-group__title{font-family:var(--f-data);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-3);
  padding:11px 13px;border-bottom:1px solid var(--line);background:var(--panel-2)}
.side-chips{padding:12px;display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.side-chips--rates{grid-template-columns:repeat(3,1fr)}
.filter-chip{font-family:var(--f-data);font-size:11.5px;color:var(--ink-2);background:var(--ground-2);
  border:1px solid var(--line-strong);padding:6px 8px;text-align:center;cursor:pointer;text-transform:uppercase;
  letter-spacing:0.04em;transition:color .16s,border-color .16s,background .16s}
.filter-chip:hover{color:var(--bronze);border-color:var(--bronze);background:var(--bronze-wash)}
.filter-chip--active{color:var(--on-bronze)!important;background:var(--bronze)!important;border-color:var(--bronze)!important}
.side-reset{display:block;width:100%;background:none;border:1px solid var(--line);color:var(--ink-2);
  font-family:var(--f-data);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;padding:9px;cursor:pointer;transition:all .16s}
.side-reset:hover{border-color:var(--bronze);color:var(--bronze)}
.legend{border:1px solid var(--line);background:var(--panel);padding:12px 13px;display:flex;flex-direction:column;gap:9px}
.legend__row{display:flex;align-items:center;gap:11px;font-family:var(--f-data);font-size:11px;letter-spacing:0.03em;text-transform:uppercase;color:var(--ink-2)}

/* ---- Footer ---- */
.footer{margin-top:auto;padding:0 0 32px}
.footer .container{border-top:1px solid var(--line);padding-top:22px}
.footer__row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.footer__brand{font-family:var(--f-display);letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-2);font-size:15px;display:flex;gap:8px;align-items:center}
.footer__links{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--f-data);font-size:11px;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-3)}
.footer__links a:hover{color:var(--bronze)}
.footer__soc{margin-left:auto;display:flex;gap:12px;font-size:15px;color:var(--ink-3)}
.footer__soc a:hover{color:var(--bronze)}
.footer__sep{display:none}
.footer__copy{margin-top:14px;font-family:var(--f-data);font-size:11px;color:var(--ink-3);letter-spacing:0.03em}

/* scroll-top */
.scroll-top{position:fixed;bottom:24px;right:24px;width:38px;height:38px;border:1px solid var(--line-strong);
  background:var(--panel);color:var(--ink-2);cursor:pointer;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .2s}
.scroll-top--visible{opacity:1;pointer-events:auto}
.scroll-top:hover{border-color:var(--bronze);color:var(--bronze)}

.hidden{display:none!important}

/* motion */
@media (prefers-reduced-motion:no-preference){
  .gem--today{animation:reg-pulse 2.4s ease-in-out infinite}
  @keyframes reg-pulse{0%,100%{box-shadow:0 0 0 1px var(--garnet),0 0 6px var(--gem-glow)}50%{box-shadow:0 0 0 1px var(--garnet),0 0 13px var(--gem-glow)}}
  .lead,.ticker{animation:reg-rise .5s cubic-bezier(.2,.7,.3,1) both}
  @keyframes reg-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

@media(max-width:900px){
  .console{grid-template-columns:1fr}
  .home-sidebar{position:static;flex-direction:row;flex-wrap:wrap}
  .side-panel{flex-direction:row;flex-wrap:wrap;flex:1}
  .side-group{flex:1;min-width:200px}
  .lead{grid-template-columns:1fr}
  .countdown{text-align:left}.clock{justify-content:flex-start}
  .nav{display:none}.burger{display:flex}
  .nav--open{display:flex;position:absolute;top:100%;right:26px;flex-direction:column;background:var(--panel);border:1px solid var(--line-strong);padding:8px}
}
@media(max-width:560px){
  .server-row{grid-template-columns:14px 1fr auto;gap:10px}
  .server-row__rate,.server-row__date{display:none}
  .ticker{flex-wrap:wrap}.ticker__cell{flex:1 1 50%;border-bottom:1px solid var(--line)}
  .lead__name{font-size:38px}
  .side-chips--rates{grid-template-columns:repeat(4,1fr)}
}

/* ============================================================
   Shared components (forms, buttons, page primitives, toplist,
   advertising, dashboard) — registry aesthetic, all pages.
   ============================================================ */
.page-hero{margin:26px 0 20px}
.page-hero__title{font-family:var(--f-display);font-size:40px;font-weight:600;letter-spacing:0.03em;text-transform:uppercase;margin:0 0 6px;text-wrap:balance}
.page-hero__title span{color:var(--bronze)}
.page-hero__desc{color:var(--ink-2);font-size:15px;margin:0;max-width:70ch}
.page-content{display:flex;flex-direction:column;gap:16px;padding-bottom:36px}
.page-section{border:1px solid var(--line);background:var(--panel);padding:20px 22px}
.page-section--accent{border-left:3px solid var(--bronze);background:linear-gradient(100deg,var(--bronze-wash),var(--panel) 55%)}
.page-section__title{font-family:var(--f-display);font-size:18px;letter-spacing:0.1em;text-transform:uppercase;margin:0 0 10px;color:var(--ink)}
.page-section p{color:var(--ink-2);margin:0 0 10px}
.page-section p:last-child{margin-bottom:0}
.page-contact-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--line);background:var(--panel-2);text-decoration:none;color:inherit;transition:border-color .16s}
.page-contact-row:hover{border-color:var(--bronze)}
.page-contact-row__text{font-family:var(--f-data);font-weight:600;color:var(--ink)}
.page-contact-row__sub{font-family:var(--f-data);font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:var(--ink-3)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--f-data);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;padding:10px 20px;border:1px solid var(--line-strong);background:var(--panel-2);color:var(--ink);cursor:pointer;transition:border-color .16s,background .16s,transform .12s;text-decoration:none}
.btn:hover{border-color:var(--bronze);transform:translateY(-1px)}
.btn--primary,.btn--gold{background:var(--bronze);border-color:var(--bronze);color:var(--on-bronze)}
.btn--primary:hover,.btn--gold:hover{background:var(--bronze-2)}
.btn--lg{padding:13px 26px;font-size:13px}
.btn--sm{padding:7px 14px;font-size:11px}

/* forms */
.page-form{border:1px solid var(--line);background:var(--panel);padding:24px;margin-bottom:24px}
.auth-form{max-width:440px;margin:0 auto}
.auth-alt{text-align:center;font-family:var(--f-data);font-size:12px;color:var(--ink-3);margin:16px 0 0}
.auth-alt a{color:var(--bronze)}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group--full{grid-column:1/-1}
.form-label{font-family:var(--f-data);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-2)}
.form-label .required,.required{color:var(--garnet)}
.form-input,.admin-input{width:100%;font-family:var(--f-ui);font-size:14px;padding:10px 12px;border:1px solid var(--line-strong);background:var(--ground);color:var(--ink);transition:border-color .16s}
.form-input:focus,.admin-input:focus{outline:none;border-color:var(--bronze)}
.form-textarea,textarea.form-input{min-height:100px;resize:vertical;font-family:var(--f-ui)}
.form__actions{display:flex;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap}
.form-error{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--garnet);background:rgba(150,37,58,0.08);color:var(--garnet);font-size:13px;margin-bottom:16px;font-weight:600}
.form-success{text-align:center;padding:30px 20px;border:1px solid var(--line-strong);background:var(--panel-2)}
.form-success__icon{font-size:40px;margin-bottom:8px}
.form-success__title{font-family:var(--f-display);font-size:24px;letter-spacing:0.05em;text-transform:uppercase;margin:0 0 8px}
.form-success__text{color:var(--ink-2);margin:0 0 18px}

/* toplist (servers.php) */
.toplist-head{margin:26px 0 18px}
.toplist-head__title{font-family:var(--f-display);font-size:34px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;margin:0 0 4px}
.toplist-head__title span{color:var(--bronze)}
.toplist-head__desc{font-size:13px;color:var(--ink-3);margin:0;font-family:var(--f-data)}
.premium-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.premium-slot{display:flex;flex-direction:column;gap:7px;padding:15px 16px;border:1px solid var(--line-strong);background:var(--panel);text-decoration:none;color:inherit;transition:transform .12s,border-color .16s}
.premium-slot:hover{transform:translateY(-2px);border-color:var(--bronze)}
.premium-slot--premium,.premium-slot--vip,.premium-slot--sovereign{background:linear-gradient(135deg,var(--bronze-wash),var(--panel) 70%)}
.premium-slot__badge{align-self:flex-start;font-family:var(--f-data);font-size:9px;font-weight:700;letter-spacing:0.12em;padding:3px 9px;color:var(--on-bronze);background:var(--bronze)}
.premium-slot__name{font-family:var(--f-display);font-size:20px;letter-spacing:0.03em;text-transform:uppercase;color:var(--bronze)}
.premium-slot__meta{display:flex;gap:8px;align-items:center}
.premium-slot__chronicle{font-family:var(--f-data);font-size:10px;text-transform:uppercase;letter-spacing:0.05em;color:var(--on-bronze);background:var(--bronze);padding:2px 8px}
.premium-slot__rate{font-family:var(--f-data);font-size:13px;font-weight:600;color:var(--ink-2)}
.premium-slot__date{font-family:var(--f-data);font-size:12px;color:var(--ink-3)}
.list-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line);background:var(--panel);margin-bottom:16px}
.list-filters__label{font-family:var(--f-data);font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:var(--ink-3)}
.list-filters__select,.list-filters__search{font-family:var(--f-data);font-size:13px;padding:8px 11px;border:1px solid var(--line-strong);background:var(--ground);color:var(--ink);height:36px}
.list-filters__search{flex:1;min-width:150px;font-family:var(--f-ui)}
.list-filters__btn{font-family:var(--f-data);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;padding:8px 20px;height:36px;border:1px solid var(--bronze);background:var(--bronze);color:var(--on-bronze);cursor:pointer}
.list-filters__reset{font-family:var(--f-data);font-size:11px;text-transform:uppercase;color:var(--ink-3)}
.toplist{display:flex;flex-direction:column;gap:5px}
.toplist-row{display:flex;align-items:center;gap:12px;padding:9px 14px;border:1px solid var(--line);background:var(--panel);text-decoration:none;color:inherit;transition:border-color .16s,transform .12s}
.toplist-row:hover{border-color:var(--bronze);transform:translateX(2px)}
.toplist-row--premium,.toplist-row--vip,.toplist-row--sovereign{border-color:var(--line-strong)}
.toplist-row--vip,.toplist-row--premium,.toplist-row--sovereign{background:linear-gradient(90deg,var(--bronze-wash),var(--panel) 45%)}
.toplist-row--accent-blue{background:linear-gradient(90deg,#007eed1f,var(--panel) 45%)}
.toplist-row--accent-purple{background:linear-gradient(90deg,#5d00ed1f,var(--panel) 45%)}
.toplist-row--accent-red{background:linear-gradient(90deg,rgb(175 10 10 / 12%),var(--panel) 45%)}
.toplist-row--banner{background-size:cover;background-position:right center;background-repeat:no-repeat}
.toplist-row__rank{width:26px;text-align:center;font-family:var(--f-data);font-size:13px;font-weight:600;color:var(--ink-3)}
.toplist-row--premium .toplist-row__rank,.toplist-row--vip .toplist-row__rank,.toplist-row--sovereign .toplist-row__rank{color:var(--bronze)}
.toplist-row__name{flex:1;min-width:0;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:8px}
.toplist-row--premium .toplist-row__name,.toplist-row--vip .toplist-row__name,.toplist-row--sovereign .toplist-row__name{color:var(--bronze)}
.toplist-row__tier{font-family:var(--f-data);font-size:8px;font-weight:700;letter-spacing:0.1em;padding:3px 8px;color:var(--on-bronze);background:var(--bronze)}
.toplist-row__chronicle{width:82px;text-align:center;font-family:var(--f-data);font-size:10px;text-transform:uppercase;color:var(--ink-2);background:var(--ground-2);border:1px solid var(--line-strong);padding:3px 0}
.toplist-row--premium .toplist-row__chronicle,.toplist-row--vip .toplist-row__chronicle{background:var(--bronze-wash);border-color:var(--bronze);color:var(--bronze)}
.toplist-row__rate{width:56px;text-align:center;font-family:var(--f-data);font-size:13px;font-weight:600}
.toplist-row__date{width:120px;text-align:center;font-family:var(--f-data);font-size:11px;color:var(--ink-3);text-transform:uppercase}
.toplist-row__arrow{color:var(--ink-3)}
.toplist-ad{display:flex;align-items:center;justify-content:center;padding:11px;border:1px dashed var(--line-strong);background:repeating-linear-gradient(135deg,transparent,transparent 8px,var(--bronze-wash) 8px,var(--bronze-wash) 9px)}
.toplist-ad img{max-width:100%;height:auto}
.toplist-ad--empty{font-family:var(--f-data);font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-3);text-decoration:none}
.toplist-ad--empty:hover{color:var(--bronze)}
.toplist-empty{text-align:center;padding:40px;color:var(--ink-3)}
.row-ico{font-size:11px;color:var(--bronze)}

/* advertising */
.buy-ads{border:1px solid var(--line);background:var(--panel);padding:20px 22px;margin-bottom:20px}
.ad-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.ad-slot{padding:14px;border:1px solid var(--line-strong);background:var(--panel-2);text-align:center}
.ad-slot--full{opacity:.5}
.ad-slot__name{font-family:var(--f-display);font-size:14px;letter-spacing:0.05em;text-transform:uppercase;margin-bottom:4px}
.ad-slot__price{font-family:var(--f-data);font-size:15px;font-weight:600;color:var(--bronze)}
.ad-slot__price span{font-size:11px;color:var(--ink-3)}
.ad-slot__avail{font-family:var(--f-data);font-size:11px;color:var(--jade);margin-top:5px;text-transform:uppercase}
.ad-slot--full .ad-slot__avail{color:var(--ink-3)}
.buy-note{padding:12px 15px;border:1px solid var(--line-strong);background:var(--panel-2);font-size:13px;color:var(--ink-2);margin-bottom:14px}
.buy-note--warn{border-color:var(--bronze);background:var(--bronze-wash);color:var(--bronze)}
.buy-note a{color:var(--bronze)}
.ad-form__actions{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ad-total{font-family:var(--f-data);font-size:14px;color:var(--ink-2)}
.ad-total strong{font-size:18px;color:var(--ink)}
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.price-card{padding:18px;border:1px solid var(--line-strong);background:var(--panel);text-align:center}
.price-card--premium,.price-card--vip,.ambassador-card{background:linear-gradient(135deg,var(--bronze-wash),var(--panel) 70%)}
.price-card__tag{display:inline-block;font-family:var(--f-data);font-size:10px;font-weight:700;letter-spacing:0.12em;padding:3px 10px;color:var(--on-bronze);background:var(--bronze);margin-bottom:10px}
.price-card__price{font-family:var(--f-display);font-size:22px;letter-spacing:0.03em;text-transform:uppercase;margin-bottom:8px}
.price-card__desc{font-size:12.5px;color:var(--ink-2)}

/* dashboard */
.dash-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:26px 0 18px;flex-wrap:wrap}
.dash-head__title{font-family:var(--f-display);font-size:28px;letter-spacing:0.04em;text-transform:uppercase;margin:0}
.dash-head__sub{font-family:var(--f-data);font-size:12px;color:var(--ink-3);margin:2px 0 0}
.dash-logout{background:var(--panel);border:1px solid var(--line-strong);color:var(--ink-2);padding:8px 18px;font-family:var(--f-data);font-size:12px;text-transform:uppercase;letter-spacing:0.08em}
.dash-logout:hover{border-color:var(--bronze);color:var(--bronze)}
.dash-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}
.dash-action{display:flex;flex-direction:column;gap:5px;padding:16px 18px;border:1px solid var(--line-strong);background:var(--panel);text-decoration:none;color:inherit;transition:border-color .16s,transform .12s}
.dash-action:hover{border-color:var(--bronze);transform:translateY(-2px)}
.dash-action__title{font-family:var(--f-display);font-size:16px;letter-spacing:0.05em;text-transform:uppercase}
.dash-action__desc{font-size:12.5px;color:var(--ink-2)}
.dash-section{margin-bottom:26px}
.dash-section__title{font-family:var(--f-display);font-size:17px;letter-spacing:0.08em;text-transform:uppercase;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.dash-section__title span{font-family:var(--f-data);font-size:12px;color:var(--ink-3);background:var(--panel-2);border:1px solid var(--line);padding:2px 9px}
.dash-empty{padding:22px;text-align:center;color:var(--ink-3);border:1px dashed var(--line-strong);background:var(--panel)}
.dash-table-wrap{overflow-x:auto;border:1px solid var(--line)}
.dash-table{width:100%;border-collapse:collapse;font-size:13px;background:var(--panel)}
.dash-table th{text-align:left;padding:10px 14px;font-family:var(--f-data);font-size:10px;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-3);border-bottom:1px solid var(--line)}
.dash-table td{padding:11px 14px;border-bottom:1px solid var(--line)}
.dash-table tr:last-child td{border-bottom:none}
.dash-link{color:var(--ink);font-weight:600}
.dash-link:hover{color:var(--bronze)}
.dash-badge{display:inline-block;font-family:var(--f-data);font-size:10px;text-transform:uppercase;letter-spacing:0.05em;padding:3px 9px;background:var(--panel-2);border:1px solid var(--line-strong);color:var(--ink-2)}
.dash-badge--pending{border-color:var(--amber);color:var(--amber)}
.dash-badge--today{border-color:var(--garnet);color:var(--garnet)}
.dash-pay{margin-left:8px;font-family:var(--f-data);font-size:11px;color:var(--bronze)}

/* ============================================================
   Ad banners — side rails, strips, hero, placeholders
   ============================================================ */
.ad-banner{display:flex;align-items:center;justify-content:center;overflow:hidden;text-decoration:none;border:1px solid var(--line-strong);background:var(--panel-2)}
.ad-banner img{display:block;max-width:100%;height:auto}
.ad-banner--empty{flex-direction:column;gap:4px;border-style:dashed;color:var(--ink-3);background:repeating-linear-gradient(135deg,transparent,transparent 8px,var(--bronze-wash) 8px,var(--bronze-wash) 9px);transition:color .16s,border-color .16s}
.ad-banner--empty:hover{color:var(--bronze);border-color:var(--bronze)}
.ad-banner__cta{font-family:var(--f-data);font-size:11px;letter-spacing:0.1em;text-transform:uppercase}
.ad-banner__size{font-family:var(--f-data);font-size:9px;color:var(--ink-3);letter-spacing:0.06em}

/* horizontal strips: top / in-content / bottom */
.ad-strip{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:16px 0}
.ad-strip .ad-banner--strip{flex:1 1 180px;min-height:64px;max-width:540px}
.ad-strip--top{margin:18px 0}
.ad-strip--incontent{margin:8px 0}
.ad-strip--bottom{margin:20px 0 8px}

/* ambassador hero */
.ad-hero{margin:18px 0}
.ad-hero .ad-banner--hero{width:100%;min-height:150px}

/* side skyscraper rails (wide screens only) */
/* banner rails stay fixed in view while scrolling. Two tiers per side:
   content-adjacent 300x600 skyscrapers, and full-height 300x1200 edge banners. */
.ad-rail{position:absolute;top:calc(var(--header-h) + 34px);display:none;flex-direction:column;gap:14px;width:300px;z-index:5}
.ad-rail--left{left:calc(50% - 905px)}
.ad-rail--right{right:calc(50% - 905px)}
.ad-rail--edge-left{left:24px}
.ad-rail--edge-right{right:24px}
.ad-rail .ad-banner--sky{width:300px;min-height:600px;flex-direction:column}
.ad-rail .ad-banner--tall{width:300px;min-height:600px;flex-direction:column}
@media(min-width:1812px){.ad-rail--left,.ad-rail--right{display:flex}}
@media(min-width:2500px){.ad-rail--edge-left,.ad-rail--edge-right{display:flex}}

/* ============================================================
   Homepage board: two-column sections (paid slots, lists)
   ============================================================ */
.board{display:flex;flex-direction:column;gap:24px;min-width:0}
.board-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;position:relative}
.board-col{min-width:0}
.board-col__head{font-family:var(--f-display);font-size:14px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-2);margin-bottom:9px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.board .cat-rows{display:flex;flex-direction:column;gap:5px}
/* denser rows for the narrower board columns */
.board .server-row{grid-template-columns:14px minmax(0,1fr) 68px 40px 92px;gap:8px;padding:8px 11px}
.board .server-row__name{display:flex;align-items:center;gap:6px;font-size:13.5px;min-width:0}
.board .server-row__name .seal{margin:0;flex:none}
.server-row__nametext{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.board .server-row__chronicle{width:72px;font-size:9.5px;padding:3px 4px}
.board .server-row__rate{width:42px;font-size:12.5px}
.board .server-row__date{width:96px;font-size:10px;overflow:hidden;text-overflow:ellipsis}
.board .no-results{grid-column:1/-1;text-align:center;padding:30px;color:var(--ink-3)}
.paid-slot-empty{display:flex;align-items:center;justify-content:center;padding:11px;border:1px dashed var(--line-strong);color:var(--ink-3);font-family:var(--f-data);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;text-decoration:none;background:repeating-linear-gradient(135deg,transparent,transparent 8px,var(--bronze-wash) 8px,var(--bronze-wash) 9px);transition:color .16s,border-color .16s}
.paid-slot-empty:hover{color:var(--bronze);border-color:var(--bronze)}
@media(max-width:760px){.board-row{grid-template-columns:1fr}}

/* submit form: datetime dual preview + hint */
.form-hint{font-size:12px;color:var(--ink-3);font-weight:400;text-transform:none;letter-spacing:0}
.open-preview{margin-top:8px;padding:9px 12px;border:1px solid var(--line);background:var(--panel-2);font-family:var(--f-data);font-size:12px;display:flex;flex-direction:column;gap:4px}
.open-preview__lab{display:inline-block;width:96px;color:var(--ink-3);text-transform:uppercase;letter-spacing:0.08em;font-size:10px}

/* ============================================================
   Hopzone-style sticky side rails (3-column shell)
   Rails stay pinned while scrolling the content, release at footer.
   ============================================================ */
.shell{display:flex;justify-content:center;align-items:flex-start;gap:clamp(14px,1.4vw,22px);width:100%;max-width:2500px;margin:0 auto;padding:0 16px}
.shell>.reg{flex:1 1 auto;min-width:0;max-width:1500px;margin:0;width:auto}
/* Side rails auto-scale with the viewport (clamp) and keep Hopzone's aspect
   ratios (wide 428x1223, skinny 215x805). Below 1200px they collapse and the
   board goes full width. */
.rail{flex:0 0 auto;display:none;align-self:stretch}
.rail__inner{position:sticky;top:calc(var(--header-h) + 16px);display:flex;flex-direction:column;gap:14px}
.rail--left .rail__inner{flex-direction:row;gap:clamp(8px,0.7vw,14px);align-items:flex-start}
.rail .ad-banner--sky{width:clamp(220px,16.7vw,428px);aspect-ratio:428/1223;min-height:0;flex-direction:column}
.rail .ad-banner--skinny{width:clamp(110px,8.4vw,215px);aspect-ratio:215/805;min-height:0;flex-direction:column}
@media(min-width:1200px){.rail{display:block}}

/* ============================================================
   Wallet / balance, top-ups, upgrades, sliders, pay pickers
   ============================================================ */
.nav__balance{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;margin-right:4px;
    font-family:var(--f-data,inherit);font-weight:700;font-size:13px;color:var(--bronze);
    border:1px solid var(--bronze);border-radius:var(--radius);text-decoration:none;line-height:1;background:var(--bronze-wash)}
.nav__balance:hover{background:var(--bronze);color:#fff}

.wallet-strip{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
    padding:18px 22px;margin:18px 0;background:linear-gradient(90deg,var(--bronze-wash),var(--panel) 60%);
    border:1px solid var(--line-strong);border-radius:var(--radius)}
.wallet-strip__lab{display:block;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-3)}
.wallet-strip__val{display:block;font-family:var(--f-data,inherit);font-size:30px;font-weight:700;color:var(--ink);line-height:1.1}
.wallet-strip__actions{display:flex;gap:8px;flex-wrap:wrap}

.wallet-card{max-width:860px;margin:0 auto;padding:26px 30px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}

/* Range slider */
.form-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;
    background:var(--line-strong);outline:none;margin:10px 0 2px}
.form-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;
    background:var(--bronze);border:2px solid var(--panel);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.form-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--bronze);border:2px solid var(--panel);cursor:pointer}
.range-scale{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3);font-family:var(--f-data,inherit)}

/* Top-up preset chips */
.topup-presets{display:flex;flex-wrap:wrap;gap:8px}
.topup-chip{padding:9px 16px;font-family:var(--f-data,inherit);font-weight:700;font-size:14px;
    background:var(--ground);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius);cursor:pointer}
.topup-chip:hover,.topup-chip.is-on{background:var(--bronze);border-color:var(--bronze);color:#fff}

/* Tier picker + pay picker (shared radio-card look) */
.tier-picker,.pay-picker{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.tier-opt,.pay-opt{flex:1 1 220px;position:relative;cursor:pointer}
.tier-opt input,.pay-opt input{position:absolute;opacity:0;inset:0;cursor:pointer}
.tier-opt__body,.pay-opt__body{display:block;padding:14px 16px;background:var(--ground);
    border:1.5px solid var(--line-strong);border-radius:var(--radius);transition:border-color .12s,background .12s}
.tier-opt input:checked+.tier-opt__body,.pay-opt input:checked+.pay-opt__body{border-color:var(--bronze);background:var(--bronze-wash)}
.tier-opt__name,.pay-opt__name{display:block;font-weight:700;font-size:15px;color:var(--ink)}
.tier-opt__price{display:block;font-family:var(--f-data,inherit);font-weight:700;color:var(--bronze);margin:2px 0}
.tier-opt__desc,.pay-opt__sub{display:block;font-size:12px;color:var(--ink-3);margin-top:3px}

/* Dashboard per-row actions */
.dash-row-actions{display:flex;gap:6px;white-space:nowrap}
.dash-mini{padding:4px 10px;font-size:12px;font-weight:600;border:1px solid var(--line-strong);
    border-radius:var(--radius);color:var(--ink-2);text-decoration:none;background:var(--ground)}
.dash-mini:hover{border-color:var(--bronze);color:var(--bronze)}
.dash-mini--gold{background:var(--bronze-wash);border-color:var(--bronze);color:var(--bronze)}
.dash-mini--gold:hover{background:var(--bronze);color:#fff}
.dash-badge--premium{background:var(--bronze-wash);color:var(--bronze);border:1px solid var(--bronze)}
.dash-badge--vip{background:var(--bronze);color:#fff}

/* Sovereign (4th) tier badge + tier-picker per-tier accents */
.dash-badge--sovereign{background:#96253a;color:#fff}
.tier-opt--vip input:checked+.tier-opt__body,.tier-opt--premium input:checked+.tier-opt__body,.tier-opt--sovereign input:checked+.tier-opt__body{border-color:var(--bronze);background:var(--bronze-wash)}
.tier-opt__price{color:var(--ink-2)}
/* VIP badge stays bronze (base). Premium/Sovereign badge takes the accent. */
.toplist-row__tier--blue{background:#2b7fd6;color:#fff}
.toplist-row__tier--purple{background:#6a2bd6;color:#fff}
.toplist-row__tier--red{background:#af0a0a;color:#fff}
/* Accent swatch picker */
.accent-picker{display:flex;gap:10px;flex-wrap:wrap}
.accent-swatch{position:relative;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
    padding:8px 14px;border:1.5px solid var(--line-strong);background:var(--ground)}
.accent-swatch input{position:absolute;opacity:0;inset:0;cursor:pointer}
.accent-swatch__dot{width:16px;height:16px;border-radius:50%;display:inline-block}
.accent-swatch__lab{font-size:13px;font-weight:600;color:var(--ink-2)}
.accent-swatch--blue .accent-swatch__dot{background:#2b7fd6}
.accent-swatch--purple .accent-swatch__dot{background:#6a2bd6}
.accent-swatch--red .accent-swatch__dot{background:#af0a0a}
.accent-swatch--blue input:checked~.accent-swatch__lab,.accent-swatch--blue:has(input:checked){border-color:#2b7fd6}
.accent-swatch--purple:has(input:checked){border-color:#6a2bd6}
.accent-swatch--red:has(input:checked){border-color:#af0a0a}
.accent-swatch:has(input:checked){background:var(--panel)}

/* ============================================================
   Ad-placement preview modal + site wireframe
   ============================================================ */
.modal-overlay{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.6);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto}
.modal-overlay[hidden]{display:none}
.modal{background:var(--ground);border:1px solid var(--line-strong);max-width:820px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal__head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal__title{font-family:var(--f-display);font-size:20px;letter-spacing:.04em;text-transform:uppercase;margin:0;color:var(--ink)}
.modal__close{background:none;border:none;font-size:26px;line-height:1;color:var(--ink-3);cursor:pointer;padding:0 4px}
.modal__close:hover{color:var(--bronze)}
.modal__sub{margin:0;padding:12px 20px 0;font-size:13px;color:var(--ink-2)}
.modal__foot{padding:16px 20px;display:flex;justify-content:flex-end;border-top:1px solid var(--line);margin-top:12px}
.wf-key{display:inline-block;padding:1px 7px;font-size:11px;font-weight:700;border:1px solid}
.wf-key--free{color:var(--jade);border-color:var(--jade);background:rgba(47,106,75,.14)}
.wf-key--full{color:var(--ink-3);border-color:var(--line-strong)}

/* Homepage layout schematic (fits the modal, no scroll) */
.wire{margin:16px 20px 4px;border:1px solid var(--line-strong);background:var(--panel-2);padding:8px;
    display:flex;flex-direction:column;height:430px}
.wire__bar{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:var(--ground);border:1px solid var(--line);margin-bottom:8px;flex:none}
.wire__logo{font-family:var(--f-display);font-size:14px;letter-spacing:.14em;color:var(--bronze)}
.wire__nav{font-size:10px;color:var(--ink-3)}
.wire__cols{flex:1;display:flex;gap:8px;min-height:0}
.wire__rail{display:flex;gap:6px;flex:0 0 116px}
.wire__rail--right{flex:0 0 66px}
.wire__rail--left .zone--left{flex:2}
.wire__rail--left .zone--left_edge{flex:1}
.wire__center{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.wire__center .zone--top{flex:0 0 40px}
.wire__center .zone--ambassador{flex:0 0 68px}
.wire__center .zone--bottom{flex:0 0 40px}
.wire__content{flex:1;min-height:0;border:1px dashed var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--ink-3)}
.wire__content-lab{font-family:var(--f-display);font-size:15px;letter-spacing:.28em;color:var(--ink-3)}
.wire__content .zone--incontent{flex:0 0 40px;width:72%}

.zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;cursor:pointer;
    border:1.5px solid var(--jade);background:rgba(47,106,75,.12);color:var(--ink);padding:5px 6px;font-family:inherit;min-width:0;overflow:hidden}
.zone--free:hover{background:rgba(47,106,75,.28);outline:2px solid var(--jade);outline-offset:-2px}
.zone--full{border-color:var(--line-strong);background:var(--ground-2);color:var(--ink-3);cursor:not-allowed;opacity:.7}
.zone__lab{font-size:11px;font-weight:700;line-height:1.1}
.zone__meta{font-family:var(--f-data);font-size:8.5px;color:var(--ink-3);line-height:1.15}
.zone__st{font-size:9.5px;font-weight:700}
.zone--free .zone__st{color:var(--jade)}
.zone--full .zone__st{color:var(--ink-3)}
/* Tall thin rails: drop the size line so the label + status fit */
.wire__rail .zone__meta{display:none}
.preview-open{margin-top:10px}
@media(max-width:640px){.wire{height:360px}.wire__rail{flex-basis:82px}.wire__rail--right{flex-basis:48px}.zone__meta{display:none}}

/* Homepage in advertising-preview mode: hide names, outline ad zones, highlight on hover */
.preview-mode .server-row__nametext,.preview-mode .lead__name{visibility:hidden}
.preview-mode [data-zone]{outline:2px dashed var(--bronze);outline-offset:-2px;transition:outline .1s,background .1s}
.preview-mode [data-zone].zone-hi{outline:3px solid var(--amber);background:var(--bronze-wash)}

/* ============================================================
   Chronicle checkbox grid (project submit) + L2J project cards
   ============================================================ */
.chk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 14px}
.chk{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2);cursor:pointer}
.chk input{width:15px;height:15px;accent-color:var(--bronze);cursor:pointer}
.chk--wide{padding:9px 12px;border:1px solid var(--line-strong);background:var(--ground)}

.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;margin:20px 0 40px}
.proj-card{display:flex;flex-direction:column;gap:11px;padding:18px 20px;background:var(--panel);border:1px solid var(--line-strong)}
.proj-card__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px}
.proj-card__name{font-family:var(--f-display);font-size:22px;font-weight:600;letter-spacing:0.03em;text-transform:uppercase;color:var(--ink)}
.proj-card__name:hover{color:var(--bronze)}
.proj-card__badges{display:flex;gap:6px;flex-wrap:wrap}
.proj-flag{font-family:var(--f-data);font-size:10px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;padding:3px 9px;border:1px solid}
.proj-flag--yes{color:var(--jade);border-color:var(--jade);background:rgba(47,106,75,.10)}
.proj-flag--sub{color:var(--bronze);border-color:var(--bronze);background:var(--bronze-wash)}
.proj-flag--no{color:var(--ink-3);border-color:var(--line-strong);background:transparent}
.proj-card__chronicles{display:flex;flex-wrap:wrap;gap:6px}
.proj-card__desc{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:0}
.proj-card__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;flex-wrap:wrap}
.proj-card__contact{font-family:var(--f-data);font-size:11px;color:var(--ink-3)}

/* Chronicle chip multi-select (project submit) */
.chip-select{display:flex;flex-wrap:wrap;gap:8px}
.chip-toggle{cursor:pointer}
.chip-toggle input{position:absolute;opacity:0;width:0;height:0}
.chip-toggle span{display:inline-block;font-family:var(--f-data);font-size:12px;letter-spacing:0.04em;text-transform:uppercase;
    padding:7px 13px;border:1.5px solid var(--line-strong);background:var(--ground);color:var(--ink-2);transition:all .12s}
.chip-toggle:hover span{border-color:var(--bronze);color:var(--ink)}
.chip-toggle input:checked+span{border-color:var(--bronze);background:var(--bronze);color:var(--on-bronze)}

/* Project card as a link */
.proj-card{color:inherit;transition:border-color .16s,transform .12s}
.proj-card:hover{border-color:var(--bronze);transform:translateY(-2px)}
.proj-card .enter{background:transparent;color:var(--bronze);border-color:transparent;padding:0}

/* Project details page */
.proj-detail{padding:20px 0 44px}
.proj-detail__back{display:inline-block;font-family:var(--f-data);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
.proj-detail__back:hover{color:var(--bronze)}
.proj-detail__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.proj-detail__name{font-family:var(--f-display);font-size:40px;line-height:1;font-weight:600;letter-spacing:0.03em;text-transform:uppercase;margin:0;color:var(--ink)}
.proj-detail__grid{display:grid;grid-template-columns:1fr 300px;gap:26px;align-items:start}
.proj-detail__block{margin-bottom:24px}
.proj-detail__label{font-family:var(--f-display);font-size:14px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-2);margin:0 0 10px}
.proj-detail__desc{font-size:15px;line-height:1.65;color:var(--ink-2);margin:0}
.proj-detail__aside{background:var(--panel);border:1px solid var(--line-strong);padding:18px 20px}
.proj-detail__facts{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.proj-fact{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.proj-fact:last-child{border-bottom:none;padding-bottom:0}
.proj-fact__k{font-family:var(--f-data);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-3)}
.proj-fact__v{font-weight:600;color:var(--ink);text-align:right}
.proj-detail__visit{width:100%;justify-content:center}
@media(max-width:720px){.proj-detail__grid{grid-template-columns:1fr}.proj-detail__name{font-size:30px}}

/* Grouped chronicle chip picker */
.chip-group{margin-bottom:14px}
.chip-group:last-child{margin-bottom:0}
.chip-group__label{font-family:var(--f-data);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--bronze);margin-bottom:7px}

/* SVG brand logo in the header */
.logo{align-items:center}
.logo-img{display:block;height:30px;width:auto}

/* Social login buttons */
.oauth-row{display:flex;flex-direction:column;gap:10px;max-width:420px;margin:0 auto 4px}
.oauth-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:11px 16px;
    font-family:var(--f-data);font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
    border:1.5px solid var(--line-strong);background:var(--panel);color:var(--ink);transition:border-color .15s,transform .12s}
.oauth-btn:hover{transform:translateY(-1px)}
.oauth-btn--google:hover{border-color:#4285F4}
.oauth-btn--discord:hover{border-color:#5865F2}
.oauth-btn__ico{width:18px;height:18px;flex:none;background-size:contain;background-repeat:no-repeat;background-position:center}
.oauth-btn__ico--google{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.1H42V20H24v8h11.3C33.7 32.7 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.9 1.2 8 3l5.7-5.7C34.3 6.1 29.4 4 24 4 13 4 4 13 4 24s9 20 20 20 20-9 20-20c0-1.3-.1-2.6-.4-3.9z'/%3E%3Cpath fill='%23FF3D00' d='M6.3 14.7l6.6 4.8C14.7 15.1 18.9 12 24 12c3.1 0 5.9 1.2 8 3l5.7-5.7C34.3 6.1 29.4 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-8l-6.5 5C9.5 39.6 16.2 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.1H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C41.4 35.4 44 30.1 44 24c0-1.3-.1-2.6-.4-3.9z'/%3E%3C/svg%3E")}
.oauth-btn__ico--discord{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 127 96'%3E%3Cpath fill='%235865F2' d='M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83 97.68 97.68 0 0 0-29.11 0A72.37 72.37 0 0 0 45.64 0a105.89 105.89 0 0 0-26.25 8.09C2.79 32.65-1.71 56.6.54 80.21a105.73 105.73 0 0 0 32.17 16.15 77.7 77.7 0 0 0 6.89-11.11 68.42 68.42 0 0 1-10.85-5.18c.91-.66 1.8-1.34 2.66-2a75.57 75.57 0 0 0 64.32 0c.87.71 1.76 1.39 2.66 2a68.68 68.68 0 0 1-10.87 5.19 77 77 0 0 0 6.89 11.1 105.25 105.25 0 0 0 32.19-16.14c2.64-27.38-4.51-51.11-18.9-72.15zM42.45 65.69C36.18 65.69 31 60 31 53s5-12.74 11.43-12.74S54 46 53.89 53s-5.05 12.69-11.44 12.69zm42.24 0C78.41 65.69 73.25 60 73.25 53s5-12.74 11.44-12.74S96.23 46 96.12 53s-5.04 12.69-11.43 12.69z'/%3E%3C/svg%3E")}
.oauth-sep{display:flex;align-items:center;gap:12px;max-width:420px;margin:14px auto;color:var(--ink-3);font-family:var(--f-data);font-size:11px;letter-spacing:0.12em;text-transform:uppercase}
.oauth-sep::before,.oauth-sep::after{content:"";flex:1;height:1px;background:var(--line)}

/* Nova Coins bonus ladder + summary */
.bonus-ladder{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:8px}
.bonus-tier{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;cursor:pointer;
    border:1.5px solid var(--line-strong);background:var(--panel);color:var(--ink);transition:border-color .15s,transform .12s}
.bonus-tier:hover{transform:translateY(-1px);border-color:var(--bronze)}
.bonus-tier.is-on{border-color:var(--bronze);background:color-mix(in srgb,var(--bronze) 12%,var(--panel))}
.bonus-tier__from{font-family:var(--f-data);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-3)}
.bonus-tier__pct{font-family:var(--f-display);font-size:20px;font-weight:700;color:var(--bronze)}
.coins-summary{margin:16px 0 4px;padding:14px 16px;border:1.5px solid var(--line-strong);background:var(--panel-2,var(--panel));text-align:center}
.coins-summary__main{font-family:var(--f-display);font-size:15px;letter-spacing:0.06em;text-transform:uppercase}
.coins-summary__main strong{font-size:24px;color:var(--bronze);margin-left:6px}
.coins-summary__sub{font-family:var(--f-data);font-size:12px;color:var(--ink-3);margin-top:4px}

/* Top filter bar (replaces the sidebar) */
.filter-bar{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:0 0 22px;padding:14px 16px;background:var(--panel);border:1px solid var(--line)}
.filter-bar__field{display:flex;flex-direction:column;gap:5px;flex:1;min-width:160px}
.filter-bar__lab{font-family:var(--f-data);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3)}
.filter-bar__select{width:100%}
.filter-bar__reset{flex:0 0 auto;margin:0;padding:10px 18px}
.console--full{grid-template-columns:1fr}
@media (max-width:640px){.filter-bar__field{min-width:100%}.filter-bar__reset{width:100%}}