/* ============================================================
   CS2 COMMUNITY — PREMIUM TEMPLATE
   00. Tokens          08. Forum categories   (forumbit_depth1_cat)
   01. Reset/base      09. News column        (news_panel)
   02. Primitives      10. Right panel        (member_panel/server_panel)
   03. Header          11. Stat bar + footer  (footer)
   04. Search          12. Customizer
   05. Sub-nav         13. Loader/skeleton
   06. Hero            14. Responsive
   07. Quick actions
   ============================================================ */

/* ---------- 00. TOKENS ---------- */
:root{
  --bg:#0b0d10;
  --panel:#12151a;
  --card:#161a20;
  --raise:#1c2129;
  --line:#252b34;
  --line-soft:#1e232b;

  --accent:#ff7b1c;          /* CS2 orange */
  --accent-hover:#ff9440;
  --accent-rgb:255,123,28;
  --ember:#e0490f;
  --blue:#4aa3ff;
  --success:#5ecb6a;
  --warning:#ffc857;
  --danger:#ff5c5c;

  --text:#f2f4f7;
  --muted:#8a94a3;

  --font-display:'Barlow Condensed',system-ui,sans-serif;  /* stencil-ish caps */
  --font-body:'Inter',system-ui,sans-serif;

  --fs:15px;
  --radius:10px;
  --radius-sm:8px;
  --site-width:100%;     /* Fluid = 100% of viewport, Boxed = 80% */
  --site-cap:1720px;     /* hard ceiling so lines never get too long */
  --container:min(var(--site-width), var(--site-cap));
  --gap:18px;
  --row-pad:16px 20px;


  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 14px 30px -16px rgba(0,0,0,.8);
  --shadow-3:0 30px 64px -26px rgba(0,0,0,.9);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.3s;

  --header-h:76px;
}
html[data-density="compact"]{ --gap:12px; --row-pad:11px 16px; }
html[data-width="fluid"]{ --site-width:100%; }
html[data-width="boxed"]{ --site-width:80%; }
html[data-shadows="off"]{ --shadow-1:none; --shadow-2:none; --shadow-3:none; }
html[data-theme="light"]{
  --bg:#eef0f4; --panel:#ffffff; --card:#ffffff; --raise:#f2f4f8;
  --line:#dde1e8; --line-soft:#e6e9ee;
  --text:#0b0d10; --muted:#5b6472;
  --shadow-2:0 14px 30px -20px rgba(11,13,16,.35);
  --shadow-3:0 30px 64px -32px rgba(11,13,16,.35);
}
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{
  animation:none!important;transition:none!important;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}

/* ---------- 01. RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:var(--fs);scroll-behavior:smooth;}
html[data-smooth="off"]{scroll-behavior:auto;}
body{
  font-family:var(--font-body);background:var(--bg);color:var(--text);
  line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.05;letter-spacing:.01em;text-transform:uppercase;}
a{color:inherit;text-decoration:none;}
button,input{font:inherit;color:inherit;background:none;border:0;}
button{cursor:pointer;}
img{display:block;max-width:100%;}
ul{list-style:none;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:5px;}

/* Custom scrollbars — themed, follow dark/light + accent on hover */
*{scrollbar-width:thin;scrollbar-color:var(--line) var(--bg);}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-corner{background:var(--bg);}
::-webkit-scrollbar-thumb{
  background:var(--line);
  border-radius:9999px;
  border:2px solid var(--bg);
  transition:background var(--dur) var(--ease);
}
::-webkit-scrollbar-thumb:hover{background:var(--accent);}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.skip-link{position:fixed;top:-100px;left:16px;z-index:200;background:var(--accent);color:#0b0d10;font-weight:700;padding:10px 16px;border-radius:var(--radius-sm);transition:top .2s var(--ease);}
.skip-link:focus{top:16px;}

/* ---------- 02. PRIMITIVES ---------- */
.btn{
  --btn-bg:var(--raise);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:var(--radius-sm);
  font-weight:700;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;
  background:var(--btn-bg);border:1px solid var(--line);
  overflow:hidden;isolation:isolate;transform:translateZ(0);box-shadow:var(--shadow-1);
  transition:transform var(--dur) var(--ease-out),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.btn svg{width:17px;height:17px;}
.btn:hover{transform:translateY(-2px);border-color:#3a424e;box-shadow:var(--shadow-2);}
.btn:active{transform:translateY(0) scale(.985);}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,var(--ember),var(--accent));
  transform:translateX(-101%);transition:transform .5s var(--ease-out);}
.btn--primary{--btn-bg:linear-gradient(100deg,var(--ember),var(--accent));border-color:transparent;color:#fff;
  box-shadow:0 10px 26px -12px rgba(var(--accent-rgb),.7);}
.btn--primary:hover{box-shadow:0 16px 36px -14px rgba(var(--accent-rgb),.85);}
.btn--ghost:hover::before{transform:translateX(0);}
.btn--ghost:hover{color:#fff;border-color:transparent;}
.btn--full{width:100%;}
.btn--sm{padding:9px 15px;font-size:.76rem;}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.32);transform:scale(0);animation:ripple .6s var(--ease-out) forwards;pointer-events:none;}
@keyframes ripple{to{transform:scale(2.6);opacity:0;}}

.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:5px;
  font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:var(--raise);border:1px solid var(--line);color:var(--muted);}
.badge--accent{background:rgba(var(--accent-rgb),.12);border-color:rgba(var(--accent-rgb),.4);color:var(--accent-hover);}
.dot{width:8px;height:8px;border-radius:50%;background:var(--success);animation:pulse 2.4s infinite;}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(94,203,106,0);}100%{box-shadow:0 0 0 0 rgba(94,203,106,0);}}

.card{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);box-shadow:var(--shadow-2);}
/* Angled corner — the CS2 signature cut */
.cut{clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);}

.panel-head{display:flex;align-items:center;gap:10px;padding:15px 20px;border-bottom:1px solid var(--line-soft);}
.panel-head h2{font-size:1.02rem;letter-spacing:.06em;color:var(--accent);}
.panel-head .link{margin-left:auto;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:5px;transition:color var(--dur) var(--ease),gap var(--dur) var(--ease);}
.panel-head .link:hover{color:var(--accent);gap:9px;}
.panel-head .link svg{width:12px;height:12px;}

.reveal{opacity:0;transform:translateY(22px);filter:blur(5px);
  transition:opacity .65s var(--ease-out),transform .65s var(--ease-out),filter .65s var(--ease-out);}
.reveal[data-anim="right"]{transform:translateX(26px);}
.reveal[data-anim="zoom"]{transform:scale(.95);}
.reveal.is-in{opacity:1;transform:none;filter:none;}

/* ---------- 03. HEADER ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--ember),var(--accent),var(--warning));transition:width .1s linear;}
.site-header{
  position:sticky;top:0;z-index:100;height:var(--header-h);
  background:var(--panel);border-bottom:1px solid var(--line);
  transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
html[data-sticky="off"] .site-header{position:relative;}
.site-header.is-stuck{box-shadow:var(--shadow-2);
  background:rgba(18,21,26,.82);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);}
html[data-theme="light"] .site-header.is-stuck{background:rgba(255,255,255,.85);}
html[data-blur="off"] .site-header.is-stuck{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--panel);}
.header-inner{display:flex;align-items:center;gap:24px;height:100%;width:100%;max-width:var(--container);margin-inline:auto;padding:0 22px;transition:max-width var(--dur) var(--ease);}

.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.brand-mark{position:relative;width:46px;height:46px;flex-shrink:0;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--ember),#8f2a06);color:#fff;
  font-family:var(--font-display);font-size:1.4rem;font-weight:700;letter-spacing:-.02em;
  box-shadow:0 8px 20px -10px rgba(var(--accent-rgb),.9);
  transition:transform var(--dur) var(--ease-out);}
.brand:hover .brand-mark{transform:rotate(-5deg) scale(1.05);}
.brand-text{font-family:var(--font-display);font-size:1.35rem;line-height:1;letter-spacing:.02em;white-space:nowrap;}
.brand-text small{display:block;font-family:var(--font-body);font-size:.58rem;font-weight:700;
  letter-spacing:.34em;color:var(--muted);margin-top:3px;}

.nav{display:flex;align-items:center;gap:2px;margin-right:auto;}
.nav-link{position:relative;display:flex;align-items:center;gap:6px;padding:12px 15px;
  font-weight:700;font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  transition:color var(--dur) var(--ease);}
.nav-link:hover,.nav-link[aria-expanded="true"]{color:var(--text);}
.nav-link::after{content:"";position:absolute;left:15px;right:15px;bottom:0;height:3px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out);}
.nav-link:hover::after{transform:scaleX(1);}
.nav-link.is-active{color:var(--text);}
.nav-link.is-active::after{transform:scaleX(1);}
.nav-link .chev{width:13px;height:13px;transition:transform var(--dur) var(--ease);}
.nav-link[aria-expanded="true"] .chev{transform:rotate(180deg);}

.has-mega{position:relative;}
.mega{position:absolute;top:calc(100% + 12px);left:50%;translate:-50% 0;width:min(640px,80vw);padding:18px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-3);
  display:grid;grid-template-columns:1fr 1fr;gap:6px;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease-out),visibility var(--dur);}
.mega.is-open{opacity:1;visibility:visible;transform:none;}
.mega-item{display:flex;gap:12px;padding:12px;border-radius:var(--radius-sm);
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease-out);}
.mega-item:hover{background:var(--raise);transform:translateX(4px);}
.mega-ico{width:36px;height:36px;flex:0 0 36px;border-radius:9px;display:grid;place-items:center;background:var(--raise);color:var(--accent);}
.mega-item:hover .mega-ico{background:rgba(var(--accent-rgb),.14);}
.mega-ico svg{width:17px;height:17px;}
.mega-item strong{display:block;font-size:.88rem;font-weight:700;}
.mega-item span{font-size:.76rem;color:var(--muted);}

.header-tools{display:flex;align-items:center;gap:8px;}
.search-trigger{display:flex;align-items:center;gap:10px;width:280px;height:44px;padding:0 14px;
  border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--bg);color:var(--muted);font-size:.85rem;
  transition:border-color var(--dur) var(--ease);}
.search-trigger:hover{border-color:var(--accent);}
.search-trigger svg{width:17px;height:17px;flex-shrink:0;}
.search-trigger kbd{margin-left:auto;padding:2px 7px;border-radius:4px;font-size:.68rem;font-family:var(--font-body);
  background:var(--raise);border:1px solid var(--line);}
.icon-btn{position:relative;width:44px;height:44px;border-radius:var(--radius-sm);display:grid;place-items:center;
  border:1px solid var(--line);background:var(--bg);color:var(--muted);
  transition:transform var(--dur) var(--ease-out),color var(--dur) var(--ease),border-color var(--dur) var(--ease);}
.icon-btn svg{width:19px;height:19px;}
.icon-btn:hover{color:var(--text);border-color:var(--accent);transform:translateY(-2px);}
.icon-btn .count{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:99px;
  background:var(--accent);color:#0b0d10;font-size:.64rem;font-weight:800;display:grid;place-items:center;border:2px solid var(--panel);}

.pop{position:relative;}
.pop-panel{position:absolute;top:calc(100% + 12px);right:0;width:320px;z-index:110;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-3);overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(-10px);transform-origin:top right;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease-out),visibility var(--dur);}
.pop-panel.is-open{opacity:1;visibility:visible;transform:none;}
.pop-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--line-soft);}
.pop-head h3{font-size:.92rem;letter-spacing:.06em;}
.pop-head button{font-size:.72rem;font-weight:700;color:var(--accent);}
.pop-head button:hover{text-decoration:underline;}
.pop-list{max-height:340px;overflow-y:auto;}
.pop-row{display:flex;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line-soft);transition:background var(--dur) var(--ease);}
.pop-row:hover{background:var(--raise);}
.pop-row.is-unread{background:rgba(var(--accent-rgb),.06);}
.pop-row .av{width:36px;height:36px;border-radius:8px;flex-shrink:0;}
.pop-row p{font-size:.82rem;line-height:1.4;}
.pop-row time{font-size:.7rem;color:var(--muted);}
.pop-foot{padding:12px;text-align:center;}
.pop-foot a{font-size:.76rem;font-weight:700;color:var(--accent);}
.menu-row{display:flex;align-items:center;gap:11px;padding:11px 18px;font-size:.86rem;font-weight:500;
  transition:background var(--dur) var(--ease),padding-left var(--dur) var(--ease-out);}
.menu-row svg{width:17px;height:17px;color:var(--muted);}
.menu-row:hover{background:var(--raise);padding-left:24px;}
.menu-row--danger{color:var(--danger);border-top:1px solid var(--line-soft);}
.menu-row--danger svg{color:var(--danger);}
.pop-profile{display:flex;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line-soft);background:var(--raise);}
.pop-profile img{width:44px;height:44px;border-radius:10px;}
.pop-profile strong{display:block;font-weight:700;}
.pop-profile span{font-size:.74rem;color:var(--accent);font-weight:600;}
.burger{display:none;}

/* ---------- 04. SEARCH OVERLAY ---------- */
.search-overlay{position:fixed;inset:0;z-index:150;display:grid;place-items:start center;padding-top:12vh;
  background:rgba(4,6,8,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease),visibility var(--dur);}
.search-overlay.is-open{opacity:1;visibility:visible;}
.search-box{width:min(680px,92vw);background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-3);overflow:hidden;transform:translateY(-24px);transition:transform .4s var(--ease-out);}
.search-overlay.is-open .search-box{transform:none;}
.search-field{display:flex;align-items:center;gap:13px;padding:19px 22px;border-bottom:1px solid var(--line-soft);}
.search-field svg{width:21px;height:21px;color:var(--muted);flex-shrink:0;}
.search-field input{flex:1;font-size:1.02rem;font-weight:600;}
.search-field input::placeholder{color:var(--muted);font-weight:400;}
.search-field kbd{padding:4px 9px;border-radius:5px;font-size:.7rem;background:var(--raise);border:1px solid var(--line);color:var(--muted);}
.search-group{padding:15px 22px;}
.search-group h4{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:9px;font-weight:800;}
.search-sug{display:flex;align-items:center;gap:11px;padding:10px 12px;margin-inline:-12px;border-radius:var(--radius-sm);
  font-size:.87rem;transition:background var(--dur) var(--ease);}
.search-sug:hover{background:var(--raise);}
.search-sug svg{width:16px;height:16px;color:var(--accent);}
.search-sug small{margin-left:auto;color:var(--muted);font-size:.72rem;}
.chips{display:flex;flex-wrap:wrap;gap:7px;}
.chip{padding:7px 12px;border-radius:5px;background:var(--raise);border:1px solid var(--line);
  font-size:.76rem;font-weight:600;color:var(--muted);transition:all var(--dur) var(--ease);}
.chip:hover{color:#fff;border-color:var(--accent);background:rgba(var(--accent-rgb),.12);}

/* ---------- 05. LEFT RAIL  (MyBB: sidebar_rail) ---------- */
.layout{display:block;}

/* ---------- 05. SUB-NAV  (MyBB: header_subnav) ---------- */
/* The old left rail, laid flat under the header. Sticks below it on scroll. */
.subnav{
  position:sticky;top:var(--header-h);z-index:97;
  background:var(--panel);border-bottom:1px solid var(--line);
  transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
html[data-sticky="off"] .subnav{position:relative;}
.subnav.is-stuck{box-shadow:var(--shadow-2);
  background:rgba(18,21,26,.86);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);}
html[data-theme="light"] .subnav.is-stuck{background:rgba(255,255,255,.88);}
html[data-blur="off"] .subnav.is-stuck{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--panel);}

.subnav-inner{display:flex;align-items:center;gap:4px;height:54px;width:100%;max-width:var(--container);margin-inline:auto;padding:0 22px;transition:max-width var(--dur) var(--ease);
  overflow-x:auto;overflow-y:visible;scrollbar-width:none;}
.subnav-inner::-webkit-scrollbar{display:none;}

.snav{
  position:relative;display:flex;align-items:center;gap:9px;flex-shrink:0;
  padding:9px 14px;border-radius:var(--radius-sm);
  font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.snav svg:first-child{width:17px;height:17px;flex-shrink:0;}
.snav .chev{width:12px;height:12px;opacity:.6;transition:transform var(--dur) var(--ease);}
.snav:hover{color:var(--text);background:var(--raise);}
.snav[aria-expanded="true"]{color:var(--text);background:var(--raise);}
.snav[aria-expanded="true"] .chev{transform:rotate(180deg);}
/* Active gets the accent underline, mirroring the header nav */
.snav.is-active{color:var(--accent);}
.snav.is-active::after{content:"";position:absolute;left:14px;right:14px;bottom:-9px;height:3px;
  background:var(--accent);border-radius:3px 3px 0 0;
  animation:snavIn .4s var(--ease-out);}
@keyframes snavIn{from{transform:scaleX(0);}to{transform:scaleX(1);}}

/* Subnav "icons only" mode — hide labels, keep the icons */
html[data-subnav="icons"] .snav{padding:9px 12px;gap:0;}
html[data-subnav="icons"] .snav span,
html[data-subnav="icons"] .snav .chev,
html[data-subnav="icons"] .promo-pill span{display:none;}
html[data-subnav="icons"] .snav.is-active::after{left:8px;right:8px;}
html[data-subnav="icons"] .promo-pill{padding:9px 11px;}
/* Give the icon-only items a tooltip on hover */
html[data-subnav="icons"] .snav{position:relative;}

.subnav-sep{width:1px;height:22px;background:var(--line);margin:0 8px;flex-shrink:0;}
.subnav-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0;padding-left:12px;}

/* Quick connect — now a dropdown in the sub-nav */
.qc-panel{
  position:absolute;top:calc(100% + 10px);left:0;width:300px;z-index:110;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-3);overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease-out),visibility var(--dur);
}
.qc-panel.is-open{opacity:1;visibility:visible;transform:none;}
.qc-panel .pop-head{padding:13px 16px;}
.qc{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line-soft);
  font-size:.8rem;transition:background var(--dur) var(--ease),padding-left var(--dur) var(--ease-out);}
.qc:last-child{border-bottom:0;}
.qc:hover{background:var(--raise);padding-left:21px;}
.qc svg{width:15px;height:15px;color:var(--muted);flex-shrink:0;}
.qc span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qc b{margin-left:auto;font-size:.75rem;font-weight:700;color:var(--accent);white-space:nowrap;}

/* Premium — compact pill on the right of the sub-nav */
.promo-pill{display:flex;align-items:center;gap:9px;padding:8px 15px;border-radius:99px;
  border:1px solid rgba(255,200,87,.35);background:linear-gradient(100deg,rgba(255,200,87,.14),transparent);
  font-weight:800;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--warning);
  white-space:nowrap;transition:transform var(--dur) var(--ease-out),background var(--dur) var(--ease);}
.promo-pill svg{width:16px;height:16px;animation:hover 3.6s var(--ease) infinite alternate;}
.promo-pill:hover{transform:translateY(-2px);background:linear-gradient(100deg,rgba(255,200,87,.24),transparent);}
@keyframes hover{to{transform:translateY(-4px);}}

/* ---------- 06. HERO  (MyBB: header_welcomeblock) ---------- */
.page{width:100%;max-width:var(--container);margin-inline:auto;padding:var(--gap);display:flex;flex-direction:column;gap:var(--gap);min-width:0;transition:max-width var(--dur) var(--ease);}
.hero{position:relative;min-height:340px;display:flex;align-items:center;overflow:hidden;isolation:isolate;
  border:1px solid var(--line-soft);border-radius:var(--radius);}
.hero-media{position:absolute;inset:-6% 0;z-index:-3;will-change:transform;}
.hero-layer{position:absolute;inset:0;}
/* Smoke + dust battlefield backdrop */
.hero-smoke{
  background:
    radial-gradient(700px 320px at 72% 40%, rgba(120,128,140,.30), transparent 68%),
    radial-gradient(520px 260px at 88% 62%, rgba(90,98,110,.24), transparent 70%),
    radial-gradient(600px 300px at 55% 30%, rgba(70,76,86,.28), transparent 70%),
    linear-gradient(115deg,#0b0d10 0%,#141820 42%,#242a33 70%,#0e1116 100%);
  animation:smokeDrift 26s var(--ease) infinite alternate;
}
@keyframes smokeDrift{to{transform:scale(1.06) translateX(-2%);}}
/* Orange slash — the CS2 diagonal */
.hero-slash{
  background:
    linear-gradient(104deg,transparent 58%,rgba(var(--accent-rgb),.85) 58% 61.4%,transparent 61.4%),
    linear-gradient(104deg,transparent 63%,rgba(var(--accent-rgb),.42) 63% 65%,transparent 65%),
    linear-gradient(104deg,transparent 67.5%,rgba(255,180,90,.22) 67.5% 68.6%,transparent 68.6%);
  mix-blend-mode:screen;
}
/* Ember glow behind the slash */
.hero-fire{position:absolute;right:16%;top:52%;width:420px;height:280px;translate:0 -50%;z-index:-3;
  background:radial-gradient(circle,rgba(255,110,20,.55),rgba(224,73,15,.18) 45%,transparent 72%);
  filter:blur(20px);animation:pulseFire 7s var(--ease) infinite alternate;}
@keyframes pulseFire{to{transform:translateY(-50%) scale(1.12);opacity:.75;}}
/* Sparks */
.sparks{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.sparks span{position:absolute;bottom:-8px;width:2px;height:2px;border-radius:50%;
  background:#ffb066;box-shadow:0 0 8px rgba(255,140,40,.95);animation:rise linear infinite;}
@keyframes rise{
  0%{transform:translateY(0) translateX(0);opacity:0;}
  12%{opacity:1;}
  100%{transform:translateY(-360px) translateX(50px);opacity:0;}
}
/* Grid + grade */
.hero-grid{background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:52px 52px;
  -webkit-mask-image:radial-gradient(600px 300px at 30% 50%,#000,transparent);
  mask-image:radial-gradient(600px 300px at 30% 50%,#000,transparent);}
.hero-grade{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,var(--card) 2%,rgba(22,26,32,.9) 26%,rgba(22,26,32,.35) 48%,transparent 72%);}
html[data-theme="light"] .hero-grade{background:linear-gradient(90deg,#fff 2%,rgba(255,255,255,.9) 26%,rgba(255,255,255,.3) 50%,transparent 74%);}

.hero-inner{position:relative;padding:52px 44px;max-width:600px;}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;padding:5px 12px;border-radius:5px;
  background:rgba(11,13,16,.6);border:1px solid var(--line);
  font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;}
.hero h1{font-size:clamp(2.1rem,4.4vw,3.5rem);letter-spacing:.005em;line-height:.98;
  text-shadow:0 16px 44px rgba(0,0,0,.6);}
.hero h1 em{font-style:normal;color:var(--accent);}
.hero .sub{margin-top:12px;font-size:.78rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);}
.hero p{margin-top:12px;font-size:.98rem;color:#b9c1cc;max-width:400px;}
html[data-theme="light"] .hero p{color:var(--muted);}
.hero-cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px;}

/* ---------- 07. QUICK ACTIONS ---------- */
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--gap);}
.qa{position:relative;display:flex;align-items:center;gap:13px;padding:16px;overflow:hidden;
  background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);box-shadow:var(--shadow-2);
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease);}
.qa::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1px;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(var(--accent-rgb),.35),transparent 45%);
  opacity:0;transition:opacity var(--dur) var(--ease);
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;}
.qa:hover{transform:translateY(-4px);box-shadow:var(--shadow-3);}
.qa:hover::after{opacity:1;}
.qa-ico{width:44px;height:44px;flex:0 0 44px;border-radius:10px;display:grid;place-items:center;
  background:var(--raise);color:var(--accent);
  transition:transform .5s var(--ease-out),background var(--dur) var(--ease);}
.qa-ico svg{width:21px;height:21px;}
.qa:hover .qa-ico{transform:rotate(-8deg) scale(1.08);background:rgba(var(--accent-rgb),.14);}
.qa[data-tone="blue"] .qa-ico{color:var(--blue);}
.qa[data-tone="gold"] .qa-ico{color:var(--warning);}
.qa[data-tone="green"] .qa-ico{color:var(--success);}
.qa strong{display:block;font-size:.86rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;}
.qa span{font-size:.76rem;color:var(--muted);}

/* ---------- 08. FORUM + NEWS grid ---------- */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--gap);align-items:start;}
.col{display:flex;flex-direction:column;gap:var(--gap);min-width:0;}
.col--right{position:sticky;top:calc(var(--header-h) + var(--gap));}
/* Sidebar hidden — main column takes the full width */
html[data-sidebar="off"] .cols{grid-template-columns:minmax(0,1fr);}
html[data-sidebar="off"] .col--right{display:none;}
/* Forum icons toggle */
html[data-forumicons="off"] .frow-ico{display:none;}
html[data-forumicons="off"] .frow{grid-template-columns:minmax(0,1fr) 66px 66px minmax(0,210px);}
/* Header banner toggle */
html[data-banner="off"] .hero{display:none;}

/* MyBB: forumbit_depth1_cat */
.cat{overflow:hidden;}
.cat-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s var(--ease-out),opacity .3s var(--ease);}
.cat-body > div{overflow:hidden;}
.cat.is-collapsed .cat-body{grid-template-rows:0fr;opacity:0;}
.collapse-btn{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;color:var(--muted);
  border:1px solid var(--line);transition:all var(--dur) var(--ease);}
.collapse-btn:hover{color:var(--text);background:var(--raise);}
.collapse-btn svg{width:14px;height:14px;transition:transform var(--dur) var(--ease-out);}
.cat.is-collapsed .collapse-btn svg{transform:rotate(-90deg);}

/* MyBB: forumbit_depth2_forum */
.frow{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) 66px 66px minmax(0,210px);
  align-items:center;gap:14px;padding:var(--row-pad);border-bottom:1px solid var(--line-soft);
  transition:transform var(--dur) var(--ease-out),background var(--dur) var(--ease);}
.frow:last-child{border-bottom:0;}
.frow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);
  transform:scaleY(0);transition:transform .35s var(--ease-out);}
.frow:hover{background:var(--raise);transform:translateX(3px);}
.frow:hover::before{transform:scaleY(1);}
.frow-ico{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;
  background:var(--raise);border:1px solid var(--line);color:var(--accent);
  transition:transform .45s var(--ease-out);}
.frow:hover .frow-ico{transform:scale(1.06) rotate(-5deg);}
.frow-ico svg{width:20px;height:20px;}
.frow-ico[data-unread="1"]{border-color:rgba(var(--accent-rgb),.5);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.1);}
.frow-title{font-size:.98rem;font-weight:700;letter-spacing:.05em;display:flex;align-items:center;gap:8px;}
.frow-title a::after{content:"";position:absolute;inset:0;}
.frow-title .dot{width:6px;height:6px;background:var(--accent);animation:none;}
.frow-desc{font-family:var(--font-body);font-size:.78rem;font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted);margin-top:2px;}
.frow-num{text-align:center;}
.frow-num b{display:block;font-family:var(--font-display);font-size:1.05rem;}
.frow-num span{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.frow-last{display:flex;gap:10px;align-items:center;min-width:0;}
.frow-last img{width:36px;height:36px;border-radius:9px;flex-shrink:0;}
.frow-last .t{font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.frow-last .m{font-size:.72rem;color:var(--muted);}
.frow-last .m a{color:var(--accent-hover);font-weight:600;position:relative;z-index:1;}
.frow-last .m a:hover{text-decoration:underline;}

/* ---------- 09. NEWS  (MyBB: news_panel) ---------- */
.news-hero{position:relative;display:block;height:140px;overflow:hidden;border-bottom:1px solid var(--line-soft);}
.news-hero .bg{position:absolute;inset:0;
  background:
    radial-gradient(400px 180px at 70% 80%,rgba(var(--accent-rgb),.4),transparent 70%),
    linear-gradient(160deg,#3a3126,#231d18 55%,#0f1216);
  transform:scale(1.04);transition:transform 1.1s var(--ease-out);}
.news-hero:hover .bg{transform:scale(1.12);}
.news-hero .dust{position:absolute;inset:0;
  background-image:radial-gradient(1px 1px at 20px 30px,rgba(255,200,150,.4),transparent),
    radial-gradient(1px 1px at 70px 80px,rgba(255,180,120,.3),transparent);
  background-size:110px 110px;}
.news-hero .cap{position:absolute;left:18px;bottom:16px;}
.news-hero .cap small{display:block;font-size:.66rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:#cfd5dd;}
.news-hero .cap b{font-family:var(--font-display);font-size:1.5rem;text-transform:uppercase;color:var(--accent);}
.news-lead{padding:16px 18px;border-bottom:1px solid var(--line-soft);}
.news-lead p{font-size:.85rem;color:var(--muted);}
.news-lead a{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-size:.76rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent);transition:gap var(--dur) var(--ease);}
.news-lead a:hover{gap:11px;}
.news-lead a svg{width:14px;height:14px;}
.nrow{display:flex;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line-soft);transition:background var(--dur) var(--ease);}
.nrow:last-child{border-bottom:0;}
.nrow:hover{background:var(--raise);}
.nrow .thumb{width:80px;height:56px;flex-shrink:0;border-radius:8px;
  background:linear-gradient(140deg,var(--raise),#0f1216);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--muted);}
.nrow .thumb svg{width:20px;height:20px;}
.nrow strong{display:block;font-size:.86rem;font-weight:700;}
.nrow p{font-size:.76rem;color:var(--muted);}
.nrow time{font-size:.7rem;color:var(--muted);}

/* ---------- 10. RIGHT PANEL ---------- */
/* MyBB: member_panel */
.me{display:flex;gap:14px;align-items:center;padding:18px 20px;}
.me-av{position:relative;flex-shrink:0;}
.me-av img{width:64px;height:64px;border-radius:50%;border:2px solid var(--accent);}
.me-av .ring{position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(var(--accent-rgb),.3);}
.me-av .on{position:absolute;bottom:2px;right:2px;width:13px;height:13px;border-radius:50%;
  background:var(--success);border:2px solid var(--card);}
.me .hi{font-size:.8rem;color:var(--muted);}
.me h3{font-size:1.15rem;color:var(--accent);}
.me .rank{font-size:.8rem;color:var(--muted);}
.me-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);}
.me-stats div{padding:14px 8px;text-align:center;border-right:1px solid var(--line-soft);}
.me-stats div:last-child{border-right:0;}
.me-stats b{display:block;font-family:var(--font-display);font-size:1.25rem;}
.me-stats span{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.me-foot{padding:16px 20px;}

/* MyBB: server_panel */
.srv{display:flex;align-items:center;gap:12px;padding:11px 20px;border-bottom:1px solid var(--line-soft);
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease-out);}
.srv:last-child{border-bottom:0;}
.srv:hover{background:var(--raise);transform:translateX(3px);}
.srv-map{width:42px;height:42px;flex-shrink:0;border-radius:8px;border:1px solid var(--line);
  display:grid;place-items:center;font-family:var(--font-display);font-size:.72rem;color:var(--accent);
  background:linear-gradient(140deg,var(--raise),#0e1116);}
.srv-info{min-width:0;flex:1;}
.srv-info strong{display:block;font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.srv-info span{font-size:.73rem;color:var(--muted);}
.srv-right{display:flex;align-items:center;gap:9px;flex-shrink:0;}
.srv-right b{font-size:.8rem;font-weight:700;color:var(--success);white-space:nowrap;}
.srv-right b i{font-style:normal;color:var(--muted);font-weight:400;}
/* Signal bars */
.sig{display:flex;align-items:flex-end;gap:2px;height:14px;}
.sig i{width:3px;border-radius:1px;background:var(--line);}
.sig i:nth-child(1){height:5px;}.sig i:nth-child(2){height:8px;}
.sig i:nth-child(3){height:11px;}.sig i:nth-child(4){height:14px;}
.sig[data-level="4"] i,.sig[data-level="3"] i:nth-child(-n+3),
.sig[data-level="2"] i:nth-child(-n+2),.sig[data-level="1"] i:nth-child(1){background:var(--success);}

/* Server status + sparkline */
.status-head{display:flex;align-items:center;gap:10px;padding:15px 20px;border-bottom:1px solid var(--line-soft);}
.status-head h2{font-size:1.02rem;letter-spacing:.06em;}
.status-head .ok{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:.72rem;color:var(--muted);}
.status-body{display:flex;align-items:center;gap:16px;padding:18px 20px;}
.status-body .n{flex-shrink:0;}
.status-body .n span{display:block;font-size:.64rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.status-body .n b{font-family:var(--font-display);font-size:2rem;color:var(--accent);line-height:1.1;}
.status-body .n small{display:block;font-size:.7rem;color:var(--muted);margin-top:6px;}
.spark{flex:1;height:56px;min-width:0;}
.spark path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1000;stroke-dashoffset:1000;}
.spark.is-in path{animation:draw 1.8s var(--ease-out) forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}
.spark .fill{fill:rgba(var(--accent-rgb),.12);stroke:none;opacity:0;transition:opacity .6s .8s var(--ease);}
.spark.is-in .fill{opacity:1;}

/* Rankings */
.rank-row{display:flex;align-items:center;gap:11px;padding:10px 20px;border-bottom:1px solid var(--line-soft);
  transition:background var(--dur) var(--ease);}
.rank-row:last-child{border-bottom:0;}
.rank-row:hover{background:var(--raise);}
.rank-row .rk{width:16px;font-family:var(--font-display);font-size:.9rem;color:var(--muted);}
.rank-row:nth-of-type(1) .rk{color:var(--warning);}
.rank-row img{width:30px;height:30px;border-radius:50%;}
.rank-row a{font-size:.85rem;font-weight:600;}
.rank-row a:hover{color:var(--accent);}
.rank-row b{margin-left:auto;font-family:var(--font-display);font-size:.95rem;}

/* ---------- 11. STAT BAR + FOOTER ---------- */
.statbar{display:grid;grid-template-columns:repeat(4,1fr) auto;align-items:center;gap:20px;
  padding:20px 24px;background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);}
.sb{display:flex;align-items:center;gap:12px;}
.sb-ico{width:40px;height:40px;flex-shrink:0;border-radius:9px;display:grid;place-items:center;
  background:var(--raise);color:var(--accent);}
.sb-ico svg{width:19px;height:19px;}
.sb b{display:block;font-family:var(--font-display);font-size:1.35rem;line-height:1.1;}
.sb span{font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.sb-social{display:flex;align-items:center;gap:14px;}
.sb-social > span{font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.socials{display:flex;gap:8px;}
.socials a{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--muted);
  transition:transform var(--dur) var(--ease-out),color var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease);}
.socials a svg{width:17px;height:17px;}
.socials a:hover{transform:translateY(-3px);color:#fff;border-color:var(--accent);background:rgba(var(--accent-rgb),.14);}

.site-footer{position:relative;overflow:hidden;background:var(--panel);border-top:1px solid var(--line);margin-top:var(--gap);}
.footer-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(800px 220px at 50% 100%,rgba(var(--accent-rgb),.14),transparent 70%);
  animation:glowShift 12s var(--ease) infinite alternate;}
@keyframes glowShift{to{transform:translateX(7%) scale(1.1);}}
.footer-top{position:relative;display:grid;grid-template-columns:1.5fr 1fr 1fr 1.5fr;gap:40px;padding:50px 24px 36px;
  max-width:var(--container);margin-inline:auto;}
.footer-brand p{font-size:.85rem;color:var(--muted);margin:14px 0 18px;max-width:270px;}
.footer-col h3{font-size:.9rem;letter-spacing:.1em;margin-bottom:14px;}
.footer-col li + li{margin-top:9px;}
.footer-col a{font-size:.85rem;color:var(--muted);display:inline-block;
  transition:color var(--dur) var(--ease),padding-left var(--dur) var(--ease-out);}
.footer-col a:hover{color:var(--accent);padding-left:5px;}
.newsletter p{font-size:.85rem;color:var(--muted);}
.newsletter form{display:flex;gap:8px;margin-top:12px;}
.newsletter input{flex:1;padding:12px 14px;border-radius:var(--radius-sm);background:var(--bg);
  border:1px solid var(--line);font-size:.85rem;transition:border-color var(--dur) var(--ease);}
.newsletter input:focus{border-color:var(--accent);outline:none;}
.newsletter small{display:block;margin-top:9px;font-size:.73rem;color:var(--muted);}
.footer-bottom{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:18px 24px;border-top:1px solid var(--line-soft);font-size:.79rem;color:var(--muted);
  max-width:var(--container);margin-inline:auto;}
.footer-bottom nav{display:flex;gap:18px;}
.footer-bottom a:hover{color:var(--accent);}

/* ---------- 12. CUSTOMIZER ---------- */
.fab{position:fixed;right:20px;bottom:20px;z-index:130;width:50px;height:50px;border-radius:12px;
  display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,var(--ember),var(--accent));
  box-shadow:0 14px 32px -12px rgba(var(--accent-rgb),.8);transition:transform var(--dur) var(--ease-out);}
.fab svg{width:22px;height:22px;animation:spin 9s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.fab:hover{transform:scale(1.08) rotate(6deg);}
.to-top{position:fixed;right:20px;bottom:82px;z-index:130;width:50px;height:50px;border-radius:12px;
  display:grid;place-items:center;background:var(--card);border:1px solid var(--line);color:var(--muted);
  box-shadow:var(--shadow-2);opacity:0;visibility:hidden;transform:translateY(12px);
  transition:all var(--dur) var(--ease-out);}
.to-top svg{width:19px;height:19px;}
.to-top.is-on{opacity:1;visibility:visible;transform:none;}
.to-top:hover{color:var(--text);border-color:var(--accent);transform:translateY(-3px);}
html[data-totop="off"] .to-top{display:none;}
.cz-backdrop{position:fixed;inset:0;z-index:139;background:rgba(4,6,8,.62);
  opacity:0;visibility:hidden;transition:all var(--dur) var(--ease);}
.cz-backdrop.is-open{opacity:1;visibility:visible;}
.customizer{position:fixed;top:0;right:0;bottom:0;z-index:140;width:350px;max-width:92vw;
  background:var(--card);border-left:1px solid var(--line);box-shadow:var(--shadow-3);
  display:flex;flex-direction:column;transform:translateX(102%);transition:transform .42s var(--ease-out);}
.customizer.is-open{transform:none;}
.cz-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line-soft);}
.cz-head h2{font-size:1.05rem;letter-spacing:.08em;}
.cz-body{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:24px;}
.cz-group h3{font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin-bottom:11px;font-family:var(--font-body);}
.seg{display:grid;grid-auto-flow:column;gap:4px;padding:4px;border-radius:9px;background:var(--bg);border:1px solid var(--line);}
.seg button{padding:9px 6px;border-radius:6px;font-size:.75rem;font-weight:700;color:var(--muted);
  transition:all var(--dur) var(--ease);}
.seg button:hover{color:var(--text);}
.seg button[aria-pressed="true"]{background:var(--raise);color:var(--accent);}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;
  border-bottom:1px solid var(--line-soft);font-size:.85rem;}
.toggle:last-child{border-bottom:0;}
.toggle small{display:block;line-height:1.35;margin-top:2px;}
.switch{position:relative;width:42px;height:23px;border-radius:99px;background:var(--bg);
  border:1px solid var(--line);flex-shrink:0;transition:all var(--dur) var(--ease);}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;
  background:var(--muted);transition:transform var(--dur) var(--ease-out),background var(--dur) var(--ease);}
.switch[aria-checked="true"]{background:rgba(var(--accent-rgb),.22);border-color:var(--accent);}
.switch[aria-checked="true"]::after{transform:translateX(19px);background:var(--accent);}
.swatches{display:flex;gap:8px;flex-wrap:wrap;}
.swatch{width:34px;height:34px;border-radius:8px;border:2px solid transparent;
  transition:transform var(--dur) var(--ease-out),border-color var(--dur) var(--ease);}
.swatch:hover{transform:scale(1.1);}
.swatch[aria-pressed="true"]{border-color:var(--text);}
.range{display:flex;align-items:center;gap:12px;}
.range input[type=range]{flex:1;-webkit-appearance:none;height:5px;border-radius:99px;background:var(--bg);border:1px solid var(--line);}
.range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--accent);cursor:pointer;box-shadow:0 0 0 4px rgba(var(--accent-rgb),.18);}
.range input[type=range]::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:var(--accent);cursor:pointer;}
.range output{font-size:.77rem;font-weight:700;color:var(--muted);min-width:46px;text-align:right;}
.cz-foot{padding:16px 20px;border-top:1px solid var(--line-soft);}

/* ---------- 12b. PREMIUM MODAL ---------- */
.modal-backdrop{position:fixed;inset:0;z-index:160;display:grid;place-items:center;padding:20px;
  background:rgba(4,6,8,.74);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease),visibility var(--dur);}
.modal-backdrop.is-open{opacity:1;visibility:visible;}
.modal{width:min(560px,100%);max-height:90vh;overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-3);
  transform:translateY(20px) scale(.97);transition:transform .42s var(--ease-out);}
.modal-backdrop.is-open .modal{transform:none;}
.modal-hero{position:relative;overflow:hidden;padding:28px 26px 24px;border-bottom:1px solid var(--line-soft);
  background:
    radial-gradient(420px 180px at 80% -20%,rgba(255,200,87,.2),transparent 70%),
    linear-gradient(160deg,rgba(var(--accent-rgb),.14),transparent 60%);}
.modal-hero .spark-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;
  background:linear-gradient(140deg,var(--ember),var(--accent));color:#fff;
  box-shadow:0 12px 28px -12px rgba(var(--accent-rgb),.8);}
.modal-hero .spark-ico svg{width:26px;height:26px;}
.modal-hero h2{font-size:1.6rem;letter-spacing:.02em;}
.modal-hero p{font-size:.9rem;color:var(--muted);margin-top:6px;max-width:400px;}
.modal-close{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--bg);color:var(--muted);transition:all var(--dur) var(--ease);}
.modal-close svg{width:18px;height:18px;}
.modal-close:hover{color:var(--text);border-color:var(--accent);transform:rotate(90deg);}
.modal-body{padding:24px 26px;}
.perk{display:flex;gap:13px;padding:13px 0;border-bottom:1px solid var(--line-soft);}
.perk:last-child{border-bottom:0;}
.perk-ico{width:38px;height:38px;flex-shrink:0;border-radius:10px;display:grid;place-items:center;
  background:var(--raise);color:var(--accent);}
.perk-ico svg{width:19px;height:19px;}
.perk strong{display:block;font-size:.92rem;font-weight:700;}
.perk span{font-size:.8rem;color:var(--muted);}
.modal-price{display:flex;align-items:baseline;gap:8px;margin:20px 0 4px;}
.modal-price b{font-family:var(--font-display);font-size:2.2rem;color:var(--accent);}
.modal-price span{font-size:.85rem;color:var(--muted);}
.modal-foot{display:flex;gap:10px;padding:20px 26px;border-top:1px solid var(--line-soft);}
.modal-foot .btn{flex:1;}

/* ---------- 13. LOADER ---------- */
.loader{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:var(--bg);
  transition:opacity .6s var(--ease),visibility .6s;}
.loader.is-done{opacity:0;visibility:hidden;}
.loader-mark{font-family:var(--font-display);font-size:2.2rem;letter-spacing:.22em;text-transform:uppercase;
  background:linear-gradient(100deg,var(--ember),var(--accent),var(--warning),var(--ember));
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 2.2s linear infinite;}
@keyframes shimmer{to{background-position:300% 0;}}
.loader-bar{width:190px;height:3px;border-radius:99px;background:var(--raise);margin-top:18px;overflow:hidden;}
.loader-bar i{display:block;height:100%;width:38%;border-radius:99px;background:var(--accent);
  animation:load 1.1s var(--ease) infinite;}
@keyframes load{0%{transform:translateX(-110%);}100%{transform:translateX(320%);}}

/* ---------- 13b. X-MAS DECORATIONS + SNOW ---------- */
/* Garland strung under the header */
.garland{position:fixed;top:var(--header-h);left:0;right:0;height:34px;z-index:98;pointer-events:none;display:none;}
html[data-xmas="on"] .garland{display:block;}
.garland svg{width:100%;height:100%;}
.garland .wire{fill:none;stroke:#2f5c3a;stroke-width:2;}
.garland .bulb{transform-origin:center top;animation:twinkle 2.4s ease-in-out infinite;}
.garland .bulb:nth-child(3n){animation-delay:.5s;}
.garland .bulb:nth-child(3n+1){animation-delay:1.1s;}
@keyframes twinkle{50%{opacity:.35;}}
/* Santa hat on the brand mark */
.xmas-hat{position:absolute;top:-13px;left:-9px;width:30px;height:30px;display:none;
  transform:rotate(-18deg);pointer-events:none;}
html[data-xmas="on"] .xmas-hat{display:block;}
/* Snow caps along the top edge of every card */
html[data-xmas="on"] .card{position:relative;}
html[data-xmas="on"] .card::before{
  content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:7px;pointer-events:none;
  border-radius:var(--radius) var(--radius) 0 0;
  background:
    radial-gradient(8px 7px at 12px 0,#fff 96%,transparent),
    radial-gradient(10px 8px at 44px 1px,#fff 96%,transparent),
    radial-gradient(7px 6px at 78px 0,#fff 96%,transparent),
    radial-gradient(11px 8px at 118px 1px,#fff 96%,transparent),
    radial-gradient(8px 6px at 156px 0,#fff 96%,transparent),
    linear-gradient(#fff,#fff);
  background-repeat:repeat-x;background-size:186px 8px;
  opacity:.9;
}
/* Full-page snow */
.snow{position:fixed;inset:0;z-index:95;pointer-events:none;overflow:hidden;display:none;}
html[data-snow="on"] .snow{display:block;}
.snow i{position:absolute;top:-5vh;border-radius:50%;background:#fff;
  filter:blur(.4px);animation:fall linear infinite;}
@keyframes fall{
  0%{transform:translateY(0) translateX(0);opacity:0;}
  8%{opacity:1;}
  92%{opacity:1;}
  100%{transform:translateY(108vh) translateX(70px);opacity:0;}
}

/* ---------- 14. RESPONSIVE ---------- */
@media (max-width:1600px){
  .cols{grid-template-columns:minmax(0,1fr) 330px;}
}
@media (max-width:1280px){
  .nav{display:none;}
  .burger{display:grid;}
  .cols,html[data-sidebar="off"] .cols{grid-template-columns:minmax(0,1fr);}
  .col--right{position:static;order:2;}
  .col--main{order:1;}
  .search-trigger{width:200px;}
  .footer-top{grid-template-columns:1fr 1fr;}
  .statbar{grid-template-columns:repeat(2,1fr);row-gap:18px;}
  .sb-social{grid-column:1 / -1;}
}
@media (max-width:900px){
  .search-trigger{display:none;}
  .hero-inner{padding:40px 26px;}
  .frow{grid-template-columns:44px minmax(0,1fr);grid-template-areas:"i t" ". n" ". l";row-gap:11px;}
  html[data-forumicons="off"] .frow{grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "n" "l";}
  .frow-ico{grid-area:i;} .frow-main{grid-area:t;}
  .frow-nums{grid-area:n;display:flex;gap:22px;}
  .frow-num{text-align:left;}
  .frow-last{grid-area:l;}
}
@media (min-width:901px){ .frow-nums{display:contents;} }
@media (max-width:640px){
  :root{--header-h:66px;}
  .page{padding:12px;}
  .quick{grid-template-columns:1fr 1fr;}
  .footer-top{grid-template-columns:1fr;}
  .statbar{grid-template-columns:1fr;}
  .hero h1{font-size:2rem;}
  .hero-cta .btn{flex:1;}
  .user-chip span{display:none;}
}