@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800;900&family=Playfair+Display:ital,wght@1,600&display=swap');

:root{
  --acc-border:#4b2100; --acc-depth:#a25202; --acc-face:#fddc3f; --acc-rim:#ffffb6; --acc-text:#a25202; --acc-edge:1px 0 0 #fff;
  --dc-border:#00054d;  --dc-depth:#2e26be;  --dc-face:#4f46e5; --dc-rim:#8680ff;
  --bl-border:#00304d;  --bl-depth:#2674be;  --bl-face:#4697e5; --bl-rim:#80c1ff;
  --rd-border:#4a0d0d;  --rd-depth:#a11d24;  --rd-face:#ff4d52; --rd-rim:#ffc3c5;

  --wp-tint: rgba(0,0,0,.26);
  --bg:#0f1115; --panel-bg:#15171c; --card-bg:#1b1e25; --card-bd:#2a2e37;
  --card-depth:#3b414d;
  --surface-2:#23262f;
  --text:#ffffff; --text-dim:#9aa4b8;
  --maxw:1440px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ font-family:'Rubik',system-ui,-apple-system,sans-serif; margin:0; background:var(--bg); color:var(--text); overflow-x:hidden; font-weight:500; }
button,input,optgroup,select,textarea{ font-family:inherit; }
.txt-shadow-r{ text-shadow:1px 0 0 #fff; }

.pop-page{ min-height:100vh; }
.pop-page-wrapper{ position:relative; z-index:1; display:flex; flex-direction:column; min-height:100vh; }
/* Sticky footer: on short pages push the footer block to the bottom of the viewport */
.pop-page-wrapper > .seam-band,
.pop-page-wrapper > .site-footer{ margin-top:auto; }
.pop-page-wrapper > .seam-band + .site-footer{ margin-top:0; }

.btn3d{ --bh:42px; --rim:3px; --depth:4px; --bw:3px; --rad:12px; --fs:17px;
  display:inline-flex; border:var(--bw) solid var(--c-border); background:var(--c-depth); border-radius:var(--rad); padding:0 0 var(--depth) 0;
  box-shadow:0 7px 14px rgba(0,0,0,.4); cursor:pointer; transition:box-shadow .2s ease, padding .12s ease, filter .15s ease; }
.btn3d__face{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:8px;
  height:var(--bh); padding:0 16px; border-radius:calc(var(--rad) - var(--bw)); background:var(--c-face); box-shadow:inset 0 var(--rim) 0 var(--c-rim);
  color:var(--c-text); font-weight:900; font-size:var(--fs); text-transform:uppercase; letter-spacing:.4px; line-height:1; white-space:nowrap; text-shadow:var(--c-edge); }
.btn3d__face svg{ width:1.2em; height:1.2em; fill:currentColor; flex:none; }
.btn3d__face::after{ content:""; position:absolute; top:0; left:-130%; width:50%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform:skewX(-18deg); transition:left .6s ease; pointer-events:none; }

@keyframes btn-shake{ 0%{transform:scale(1) rotate(0)} 22%{transform:scale(1.05) rotate(-1.4deg)} 44%{transform:scale(1.05) rotate(1.1deg)} 66%{transform:scale(1.05) rotate(-.7deg)} 84%{transform:scale(1.05) rotate(.3deg)} 100%{transform:scale(1.05) rotate(0)} }
.btn3d:hover{ animation:btn-shake .5s cubic-bezier(.36,.07,.19,.97) forwards; padding-bottom:calc(var(--depth) + 7px); box-shadow:0 16px 26px rgba(0,0,0,.5), 0 6px 22px color-mix(in srgb, var(--c-face) 45%, transparent); filter:brightness(1.05); z-index:2; }
.btn3d:hover .btn3d__face::after{ left:160%; }
.btn3d:active{ filter:brightness(.97); }
.btn3d.sm{ --bh:40px; --rim:3px; --depth:3px; --bw:3px; --rad:11px; --fs:15px; }
.btn3d.lg{ --bh:54px; --rim:4px; --depth:5px; --bw:4px; --rad:15px; --fs:20px; }
.btn3d.full{ width:100%; } .btn3d.full .btn3d__face{ width:100%; }
.btn3d.icon .btn3d__face{ width:calc(var(--bh) + var(--depth)); padding:0; }
.btn3d.icon .btn3d__face svg{ width:42%; height:42%; }
.t-accent{ --c-border:var(--acc-border); --c-depth:var(--acc-depth); --c-face:var(--acc-face); --c-rim:var(--acc-rim); --c-text:var(--acc-text); --c-edge:var(--acc-edge); }
.t-dc { --c-border:var(--dc-border); --c-depth:var(--dc-depth); --c-face:var(--dc-face); --c-rim:var(--dc-rim); --c-text:#fff; --c-edge:0 1px 0 rgba(0,0,0,.28); }
.t-blue{ --c-border:var(--bl-border); --c-depth:var(--bl-depth); --c-face:var(--bl-face); --c-rim:var(--bl-rim); --c-text:#fff; --c-edge:0 1px 0 rgba(0,0,0,.3); }
.t-red { --c-border:var(--rd-border); --c-depth:var(--rd-depth); --c-face:var(--rd-face); --c-rim:var(--rd-rim); --c-text:#fff; --c-edge:0 1px 0 rgba(0,0,0,.3); }
.t-green{ --c-border:#0a5f2c; --c-depth:#11b455; --c-face:#2ee06d; --c-rim:#c6ffd9; --c-text:#053c1c; --c-edge:1px 0 0 rgba(255,255,255,.6); }

.wallpaper-stage{ position:fixed; inset:0; z-index:0; overflow:hidden; background:#0c1a2b; opacity:0; transform:rotate(4deg) scale(1.28); background-size:cover; background-position:center; }
.wallpaper{ position:absolute; inset:-10%; width:120%; height:120%; object-fit:cover; object-position:center center; transform-origin:center center; will-change:transform; }
.wallpaper-tint{ position:absolute; inset:0; background:var(--wp-tint); pointer-events:none; }
.is-reveal .wallpaper-stage{ animation:wp-reveal 1s cubic-bezier(.16,.84,.34,1) forwards; }
@keyframes wp-reveal{ 0%{opacity:0; transform:rotate(4deg) scale(1.28)} 55%{opacity:1} 100%{opacity:1; transform:rotate(0) scale(1)} }

.hero{ position:relative; z-index:1; width:100%; height:100vh; min-height:560px; }
.hero-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; will-change:transform,opacity; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; opacity:0; transform:translateY(16px) scale(.94); }
.is-reveal .hero-actions{ animation:actions-in .45s cubic-bezier(.18,1.25,.4,1) .05s forwards; }
@keyframes actions-in{ to{ opacity:1; transform:none; } }
.hero-logo{ width:min(46vw,400px); height:auto; opacity:0; transform:scale(.2) rotate(-12deg); filter:drop-shadow(0 14px 26px rgba(0,0,0,.45)); }
.is-intro .hero-logo{ animation:pop-in .85s cubic-bezier(.18,1.3,.4,1) forwards; }
@keyframes pop-in{ 0%{opacity:0; transform:scale(.2) rotate(-12deg)} 55%{opacity:1; transform:scale(1.12) rotate(4deg)} 72%{transform:scale(.96) rotate(-2deg)} 86%{transform:scale(1.03) rotate(1deg)} 100%{opacity:1; transform:scale(1) rotate(0)} }
.is-reveal .hero-logo{ opacity:1; animation:logo-sway 4s ease-in-out infinite; }
@keyframes logo-sway{ 0%,100%{transform:translateY(0) rotate(-2.6deg) scale(1)} 50%{transform:translateY(-12px) rotate(2.6deg) scale(1.025)} }
.scroll-cue{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; opacity:0; transition:opacity .35s ease; }
.is-reveal .scroll-cue{ animation:cue-in .6s ease .7s forwards; }
@keyframes cue-in{ to{ opacity:1; } }
.scroll-cue__mouse{ width:26px; height:42px; border:3px solid #fff; border-radius:14px; display:flex; justify-content:center; padding-top:6px; box-shadow:0 2px 10px rgba(0,0,0,.35); }
.scroll-cue__mouse span{ width:4px; height:8px; background:#fff; border-radius:2px; animation:wheel 1.4s ease-in-out infinite; }
@keyframes wheel{ 0%{opacity:0; transform:translateY(-3px)} 30%{opacity:1} 100%{opacity:0; transform:translateY(11px)} }
.scroll-cue__txt{ font-size:.8rem; font-weight:700; letter-spacing:2px; text-shadow:0 2px 6px rgba(0,0,0,.5); color:#fff; text-transform:uppercase; }
.rec-eyebrow, .dc-eyebrow, .slide__eyebrow{ text-transform:uppercase; }

.menu-toggle{ position:fixed; top:22px; right:22px; z-index:50; opacity:0; transform:translateY(-15px); pointer-events:none; transition:opacity .5s ease .5s, transform .5s ease .5s; }
.is-reveal .menu-toggle{ opacity:1; transform:none; pointer-events:auto; }
body.menu-open .menu-toggle{ opacity:0; pointer-events:none; transition-delay:0s; }

.menu-overlay{ position:fixed; inset:0; z-index:80; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; background:#101216; opacity:0; visibility:hidden; transform:scale(1.03); transition:opacity .35s ease, transform .35s ease, visibility .35s ease; }
.menu-overlay.open{ opacity:1; visibility:visible; transform:none; }
.menu-close{ position:absolute; top:22px; right:22px; }
.menu-ripples{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; z-index:0; }
.menu-ripple{ position:absolute; width:min(58vh,620px); aspect-ratio:1; border:2px solid color-mix(in srgb, var(--acc-face) 22%, transparent); border-radius:50%; opacity:0; }
.menu-overlay.open .menu-ripple{ animation:ripple 3.6s ease-out infinite; }
.menu-overlay.open .menu-ripple:nth-child(2){ animation-delay:1.2s; } .menu-overlay.open .menu-ripple:nth-child(3){ animation-delay:2.4s; }
@keyframes ripple{ 0%{transform:scale(.2); opacity:0} 18%{opacity:.5} 100%{transform:scale(1.5); opacity:0} }
.menu-nav{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:10px; }

.menu-nav a{ font-size:clamp(26px,4.4vw,46px); font-weight:900; text-transform:uppercase; letter-spacing:1px; color:#fff; text-decoration:none; line-height:1.05; transition:color .14s ease, transform .14s ease; will-change:transform; }
.menu-nav a:hover{ color:var(--acc-face); transform:scale(1.05); }

.menu-nav a span{ display:inline-block; opacity:0; transform:translateY(20px); transition:opacity .42s cubic-bezier(.18,1.05,.4,1), transform .42s cubic-bezier(.18,1.05,.4,1); }
.menu-overlay.open .menu-nav a span{ opacity:1; transform:none; }
.menu-overlay.open .menu-nav a:nth-child(1) span{transition-delay:.05s}.menu-overlay.open .menu-nav a:nth-child(2) span{transition-delay:.10s}.menu-overlay.open .menu-nav a:nth-child(3) span{transition-delay:.15s}.menu-overlay.open .menu-nav a:nth-child(4) span{transition-delay:.20s}.menu-overlay.open .menu-nav a:nth-child(5) span{transition-delay:.25s}.menu-overlay.open .menu-nav a:nth-child(6) span{transition-delay:.30s}.menu-overlay.open .menu-nav a:nth-child(7) span{transition-delay:.35s}
.menu-foot{ position:relative; z-index:1; display:flex; gap:14px; flex-wrap:wrap; justify-content:center; opacity:0; transform:translateY(16px); transition:opacity .4s ease .42s, transform .4s ease .42s; }
.menu-overlay.open .menu-foot{ opacity:1; transform:none; }

.reveal-panel{ position:relative; z-index:1; width:140%; margin-left:-20%; padding:8vw 4vw 56px; background:var(--panel-bg); border-top-left-radius:50% 8vw; border-top-right-radius:50% 8vw; }
.panel-inner{ max-width:min(var(--maxw), calc(100vw - 40px)); margin:0 auto; }

.slider-card{ border:4px solid var(--acc-border); background:var(--acc-depth); border-radius:24px; padding:0 0 8px; box-shadow:0 14px 28px rgba(0,0,0,.5); }
.slider-card__face{ position:relative; overflow:hidden; border-radius:20px; background:var(--acc-face); box-shadow:inset 0 5px 0 var(--acc-rim); }
.slides{ display:flex; transition:transform .5s cubic-bezier(.16,.84,.34,1); }
.slide{ flex:0 0 100%; display:flex; align-items:center; gap:4%; padding:32px 38px; color:var(--acc-text); }
.slide__text{ flex:1 1 0; min-width:0; }
.slide__eyebrow{ display:inline-block; font-size:.85rem; font-weight:800; letter-spacing:3px; opacity:.7; margin-bottom:8px; }
.slide__title{ margin:0 0 12px; font-size:clamp(1.6rem,3vw,2.6rem); font-weight:900; line-height:1.02; text-transform:uppercase; }
.slide__desc{ margin:0; font-size:1.05rem; font-weight:600; line-height:1.45; max-width:38ch; opacity:.9; }
.slide__media{ flex:0 0 46%; }
.slide__media img{ width:100%; aspect-ratio:16/7; object-fit:cover; display:block; border-radius:14px; border:5px solid #fff; box-shadow:0 10px 24px rgba(0,0,0,.25); }
a.slide, a.slide:hover, a.slide:focus, a.slide:active{ color:var(--acc-text); }
a.slide .slide__media img{ transition:none; }

.dots{ display:flex; justify-content:center; gap:10px; margin-top:18px; }
.dots button{ width:30px; height:9px; padding:0; border:none; border-radius:6px; background:rgba(128,128,128,.4); cursor:pointer; transition:background .25s ease, width .25s ease; }
.dots button.is-active{ background:var(--acc-face); width:42px; }

.content-grid{ display:grid; grid-template-columns:minmax(0,1fr) clamp(300px,28%,380px); gap:30px; align-items:start; margin-top:42px; }
.main-col{ min-width:0; }
.news-head h2{ margin:0 0 16px; font-size:1.6rem; font-weight:900; text-transform:uppercase; letter-spacing:.5px; }

.news-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.ncard{ position:relative; background:var(--card-bg); border:1px solid var(--card-bd); border-radius:16px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 5px 0 var(--card-depth), 0 14px 20px rgba(0,0,0,.4); transition:transform .18s ease, box-shadow .18s ease; }
.ncard:hover{ transform:translateY(-4px); box-shadow:0 9px 0 var(--card-depth), 0 20px 28px rgba(0,0,0,.5); }
.ncard__cover{ position:relative; aspect-ratio:16/10; background:center/cover no-repeat, linear-gradient(135deg,#2f3a63,#1a1f33); }

.cmeta{ position:absolute; top:10px; z-index:1; display:inline-flex; align-items:center; gap:5px; font-size:.76rem; font-weight:800; color:#fff;
  background:rgba(8,10,16,.66); padding:5px 9px; border-radius:9px; backdrop-filter:blur(3px); border:1px solid rgba(255,255,255,.12); }
.cmeta svg{ width:13px; height:13px; fill:var(--acc-face); }
.cmeta.date{ left:10px; } .cmeta.views{ right:10px; }
.ncard__body{ padding:15px 16px 16px; display:flex; flex-direction:column; gap:9px; flex:1; }
.ncard__title{ margin:0; font-size:1.1rem; font-weight:900; text-transform:uppercase; line-height:1.2; color:var(--text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.4em; }
.ncard__excerpt{ margin:0; color:var(--text-dim); font-size:.9rem; line-height:1.5; flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; min-height:4.5em; }
.ncard .btn3d{ margin-top:2px; }
.pager{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:22px; }
.pager__count{ font-weight:900; font-size:1rem; color:var(--text-dim); min-width:54px; text-align:center; }

body[data-news="list"] .news-cards{ grid-template-columns:minmax(0,1fr); gap:18px; }
body[data-news="list"] .ncard{ flex-direction:row; }
body[data-news="list"] .ncard__cover{ flex:0 0 46%; aspect-ratio:16/9; }
body[data-news="list"] .ncard__body{ justify-content:center; padding:20px 22px; }
body[data-news="list"] .ncard__title{ font-size:1.25rem; -webkit-line-clamp:2; min-height:auto; }
body[data-news="list"] .ncard__excerpt{ -webkit-line-clamp:3; min-height:auto; }

.sidebar{ position:sticky; top:20px; display:flex; flex-direction:column; gap:20px; }
.card3d{ background:var(--card-bg); border:1px solid var(--card-bd); border-radius:16px; padding:18px; box-shadow:0 5px 0 var(--card-depth), 0 14px 20px rgba(0,0,0,.4); }
.card3d__title{ margin:0 0 14px; font-size:1.05rem; font-weight:900; text-transform:uppercase; letter-spacing:.5px; color:var(--text); display:flex; align-items:center; gap:9px; }
.ic-y{ width:20px; height:20px; fill:var(--acc-face); flex:none; }

.card3d.topdonor{ position:relative; overflow:hidden; padding-bottom:0;
  background:linear-gradient(180deg, color-mix(in srgb, var(--acc-face) 14%, var(--card-bg)), var(--card-bg)); }
.topdonor__inner{ display:flex; align-items:flex-end; gap:8px; }
.topdonor__bust{ width:112px; height:auto; image-rendering:pixelated; display:block; align-self:flex-end; filter:drop-shadow(0 6px 10px rgba(0,0,0,.55)); }
.topdonor__info{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px; padding-bottom:22px; }
.topdonor__name{ font-size:1.25rem; font-weight:900; color:var(--text); line-height:1.1; }
.topdonor__amt{ font-size:1.1rem; font-weight:900; color:var(--acc-face); }

.topup{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.topup li{ position:relative; overflow:hidden; display:flex; align-items:center; gap:11px; background:var(--surface-2); border-radius:11px; padding:8px 11px; transition:transform .18s ease, background .18s ease; }
.topup li::after{ content:""; position:absolute; top:0; left:-130%; width:50%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.18), transparent); transform:skewX(-18deg); transition:left .6s ease; pointer-events:none; }
.topup li:hover{ transform:translateX(6px); background:color-mix(in srgb, var(--acc-face) 14%, var(--surface-2)); }
.topup li:hover::after{ left:160%; }
.topup__av{ width:34px; height:34px; flex:none; border-radius:8px; image-rendering:pixelated; background:#1b1e25; }
.topup__name{ font-weight:700; font-size:.95rem; color:var(--text); }
.topup__amt{ margin-left:auto; font-weight:900; color:var(--acc-face); }

.buys{ list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:9px; }
.buy{ position:relative; overflow:hidden; display:flex; align-items:center; gap:11px; background:var(--surface-2); border-radius:11px; padding:9px 11px; transition:transform .18s ease, background .18s ease; }
.buy::after{ content:""; position:absolute; top:0; left:-130%; width:50%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent); transform:skewX(-18deg); transition:left .6s ease; pointer-events:none; }
.buy:hover{ transform:translateX(6px); background:color-mix(in srgb, var(--acc-face) 12%, var(--surface-2)); }
.buy:hover::after{ left:160%; }
.buy__av{ width:34px; height:34px; flex:none; border-radius:8px; image-rendering:pixelated; }
.buy__info{ min-width:0; display:flex; flex-direction:column; }
.buy__name{ font-weight:800; font-size:.92rem; color:var(--text); }
.buy__item{ font-size:.84rem; font-weight:600; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.stats-band{ position:relative; z-index:1; overflow:hidden; }
.stats-band__grad{ position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(180deg, rgba(11,14,38,.45), rgba(11,14,38,.16) 45%, rgba(11,14,38,.5)); }
.stats-band::before{ content:""; position:absolute; left:50%; top:-1px; transform:translateX(-50%); width:180%; height:7vw; background:var(--panel-bg); z-index:2; pointer-events:none; border-bottom-left-radius:50% 100%; border-bottom-right-radius:50% 100%; }
.stats-band::after{ content:""; position:absolute; left:50%; bottom:-1px; transform:translateX(-50%); width:180%; height:11vw; background:var(--panel-bg); z-index:2; pointer-events:none; border-top-left-radius:50% 100%; border-top-right-radius:50% 100%; }
.stats-band__inner{ position:relative; z-index:3; max-width:var(--maxw); margin:0 auto; padding:12vw 5vw; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:clamp(38px,7vw,120px); }
.stat{ text-align:center; flex:0 0 auto; min-width:160px; }
.stat__num{ font-size:clamp(30px,4.4vw,52px); font-weight:900; color:var(--acc-face); text-shadow:0 3px 0 rgba(0,0,0,.45); line-height:1; }
.stat__label{ margin-top:8px; font-size:.95rem; font-weight:700; letter-spacing:.5px; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6); }

.discord-band{ position:relative; z-index:1; background:var(--panel-bg); padding:80px 5vw 60px; }
.discord-inner{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr); gap:30px; align-items:center; }
.dc-eyebrow{ display:inline-block; font-size:.85rem; font-weight:800; letter-spacing:3px; color:var(--acc-face); opacity:.85; margin-bottom:8px; }
.dc-title{ margin:0 0 14px; font-size:clamp(30px,4.6vw,52px); font-weight:900; text-transform:uppercase; letter-spacing:1px; color:var(--text); text-shadow:0 3px 12px rgba(0,0,0,.35); line-height:1; }
.discord-text p{ margin:0 0 8px; color:var(--text-dim); font-size:1.02rem; font-weight:500; max-width:560px; }
.discord-text .btn3d{ margin-top:16px; }
.discord-art{ display:grid; place-items:center; }
.discord-art img{ max-width:100%; max-height:250px; height:auto; filter:drop-shadow(0 18px 30px rgba(0,0,0,.5)); animation:dc-float 4.2s ease-in-out infinite; }
@keyframes dc-float{ 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-16px) rotate(2deg); } }
@media (prefers-reduced-motion:reduce){ .discord-art img{ animation:none; } }

.recruits{ position:relative; z-index:1; background:var(--panel-bg); padding:56px 5vw; }
.recruits__inner{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:48px; align-items:center; }

.rec-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; height:506px; overflow:hidden;
  -webkit-mask:linear-gradient(180deg, transparent, #000 17%, #000 83%, transparent);
          mask:linear-gradient(180deg, transparent, #000 17%, #000 83%, transparent); }
.rec-col{ min-width:0; }
.rec-track{ display:flex; flex-direction:column; gap:14px; animation:rec-up 24s linear infinite; will-change:transform; }
.rec-col:nth-child(2) .rec-track{ animation-duration:30s; animation-delay:-6s; }
.rec-col:nth-child(3) .rec-track{ animation-duration:20s; animation-delay:-3s; }
@keyframes rec-up{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
@media (prefers-reduced-motion:reduce){ .rec-track{ animation:none; } }
.rec-card{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 8px 12px; background:var(--card-bg); border:1px solid var(--card-bd); border-radius:14px; box-shadow:0 4px 0 var(--card-depth), 0 10px 16px rgba(0,0,0,.35); transition:transform .18s ease, border-color .18s; }
.rec-card:hover{ transform:translateY(-4px); border-color:var(--acc-face); }
.rec-skin{ height:104px; width:auto; image-rendering:pixelated; }
.rec-name{ font-weight:800; font-size:.82rem; color:var(--text); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.recruits__aside{ }
.rec-eyebrow{ display:inline-block; font-size:.85rem; font-weight:800; letter-spacing:3px; color:var(--acc-face); opacity:.85; margin-bottom:10px; }
.recruits__aside h2{ margin:0 0 14px; font-size:clamp(28px,3.6vw,44px); font-weight:900; text-transform:uppercase; letter-spacing:.5px; color:var(--text); line-height:1.05; }
.recruits__aside p{ margin:0 0 22px; color:var(--text-dim); font-size:1.05rem; line-height:1.6; max-width:46ch; }
.rec-cta{ display:flex; align-items:center; gap:12px; }

.seam-band{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; padding:40px 22px;
  background:linear-gradient(to bottom, var(--panel-bg) 0, var(--panel-bg) 50%, #0a0c10 50%, #0a0c10 100%); }
/* Inner pages: top half matches the page bg (content above), bottom half the footer — card sits on the seam. */
body:not(.pop-home) .seam-band{ background:linear-gradient(to bottom, var(--bg) 0, var(--bg) 50%, #0a0c10 50%, #0a0c10 100%); }

.site-footer{ position:relative; z-index:1; background:#0a0c10; padding:0 22px 44px; box-shadow:0 50vh 0 50vh #0a0c10; }

.foot-card{ position:relative; z-index:3; width:min(var(--maxw), calc(100% - 130px)); margin:0 auto;
  border:4px solid var(--acc-border); background:var(--acc-depth); border-radius:22px; padding:0 0 8px;
  box-shadow:0 22px 44px rgba(0,0,0,.62); }
.foot-card__logo{ position:absolute; left:-60px; top:50%; transform:translateY(-50%); width:120px; height:auto; z-index:4; pointer-events:none;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.6)); }
.foot-card__inner{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; min-height:56px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--acc-face) 82%, #fff), var(--acc-face)); border-radius:16px; box-shadow:inset 0 6px 0 var(--acc-rim); padding:14px 26px 14px 90px; }
.foot-card__left{ display:flex; align-items:center; gap:14px; cursor:pointer; border-radius:12px; padding:4px 8px; transition:filter .15s, transform .12s; }
.foot-card__left:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.foot-card__ip b{ display:block; font-size:20px; font-weight:900; color:var(--acc-text); text-transform:uppercase; letter-spacing:.3px; text-shadow:var(--acc-edge); line-height:1.1; }
.foot-card__ip small{ display:block; font-size:11.5px; font-weight:800; letter-spacing:.4px; margin-top:3px; color:color-mix(in srgb, var(--acc-text) 78%, transparent); }
.foot-card__soc{ margin-left:auto; display:flex; gap:10px; }
.foot-card__soc a{ width:42px; height:42px; border-radius:11px; background:rgba(0,0,0,.16); color:var(--acc-text); display:grid; place-items:center; transition:transform .12s, background .15s; }
.foot-card__soc a svg{ width:20px; height:20px; fill:currentColor; }
.foot-card__soc a:hover{ transform:translateY(-2px); background:rgba(0,0,0,.3); }

.foot-main{ width:min(var(--maxw), calc(100% - 130px)); margin:0 auto; padding:46px 0 0; }
.foot-grid{ display:flex; flex-wrap:wrap; gap:40px 54px; align-items:flex-start; }
.foot-cols{ display:contents; }
.foot-grid .fcol{ flex:1 1 175px; min-width:160px; }
.foot-grid .fcol--brand{ flex:1.4 1 300px; }
/* Preferences column stays compact — never grows to fill a wrapped row */
.foot-grid .fcol--prefs{ flex:0 1 200px; min-width:170px; max-width:220px; }
.fcol--brand{ display:block; }
/* Footer server-IP card (in the brand column) */
.foot-ipbox{ display:inline-flex; align-items:center; justify-content:space-between; gap:14px; margin-top:16px; padding:9px 9px 9px 16px; min-width:280px; max-width:100%; width:max-content; background:var(--surface-2); border:1px solid var(--card-bd); border-radius:14px; cursor:pointer; transition:border-color .15s ease, transform .12s ease; box-shadow:0 3px 0 var(--card-depth); }
.foot-ipbox:hover{ border-color:color-mix(in srgb, var(--acc-face) 55%, var(--card-bd)); transform:translateY(-1px); }
.foot-ipbox__info{ display:flex; flex-direction:column; gap:2px; min-width:0; text-align:left; }
.foot-ipbox__label{ font-size:.6rem; font-weight:800; letter-spacing:.9px; text-transform:uppercase; color:var(--text-dim); }
.foot-ipbox__ip{ font-size:1.02rem; font-weight:900; color:#fff; white-space:nowrap; }
.foot-ipbox__btn{ --bh:36px; --fs:12px; flex:none; }
.foot-ipbox__btn .btn3d__face{ gap:6px; }
.foot-ipbox__btn .btn3d__face svg{ width:1.05em; height:1.05em; }
.foot-ipbox__done{ display:none; }
.foot-ipbox.show-copied .foot-ipbox__copy{ display:none; }
.foot-ipbox.show-copied .foot-ipbox__done{ display:inline; }
.foot-logo{ width:84px; height:auto; flex:none; filter:drop-shadow(0 8px 16px rgba(0,0,0,.4)); }
.fcol h3.fbrand{ margin:0 0 12px; font-size:22px; font-weight:900; text-transform:uppercase; letter-spacing:.5px; color:#fff; }
.fcol h4{ margin:0 0 15px; font-size:15px; font-weight:900; text-transform:uppercase; letter-spacing:.6px; color:#fff; }
.fcol p{ margin:0 0 12px; color:var(--text-dim); font-size:14px; font-weight:500; line-height:1.65; max-width:46ch; }
.fcol__come{ color:var(--text-dim); } .fcol__come b{ color:var(--acc-face); }
.fpills{ display:flex; flex-wrap:wrap; gap:9px; }
.fpills.v-stack{ flex-direction:column; align-items:stretch; gap:8px; }
.fpill{ background:var(--surface-2); color:var(--text-dim); text-decoration:none; font-weight:700; font-size:13px; padding:9px 16px; border-radius:999px; border:1px solid var(--card-bd); transition:color .15s, background .15s, border-color .15s, transform .12s; }
.fpills.v-stack .fpill{ border-radius:11px; padding:10px 14px; text-align:left; }
.fpill:hover{ color:#fff; background:color-mix(in srgb, var(--acc-face) 16%, var(--surface-2)); border-color:var(--acc-face); transform:translateY(-2px); }
.foot-bottom{ max-width:var(--maxw); margin:38px auto 0; padding:22px 0 0; border-top:1px solid rgba(255,255,255,.09); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.foot-copy span{ display:block; font-size:13px; color:var(--text-dim); }
.foot-copy span.dim{ display:none; }
#powered_by_leaderos, #powered_by_leaderos a{ font-size:inherit; color:var(--text-dim); text-decoration:none; }
#powered_by_leaderos b, #powered_by_leaderos strong, #powered_by_leaderos a b, #powered_by_leaderos a strong{ color:#fff; font-weight:800; }
#powered_by_leaderos:hover, #powered_by_leaderos a:hover{ color:#fff; }
#powered_by_leaderos img{ height:12px; width:auto; vertical-align:middle; }

.foot-sign{ display:flex; gap:10px; flex-wrap:wrap; }
.foot-sign .sign{ font-size:12.5px; color:var(--text-dim); background:var(--surface-2); border:1px solid var(--card-bd); padding:8px 14px; border-radius:10px; text-decoration:none; transition:color .15s, background .15s, border-color .15s, transform .12s; }
.foot-sign .sign:hover{ color:#fff; background:color-mix(in srgb, var(--acc-face) 16%, var(--surface-2)); border-color:var(--acc-face); transform:translateY(-2px); }
.foot-sign .sign b{ color:#fff; font-weight:800; }
.foot-sign .kashi{ font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:600; color:#fff; font-size:14px; }

.foot-prefs{ display:flex; flex-direction:column; gap:10px; }
.pref{ position:relative; }
.pref__btn{ display:flex; align-items:center; gap:8px; width:100%; background:var(--surface-2); border:1px solid var(--card-bd); color:var(--text-dim); font-weight:700; font-size:13px; padding:9px 12px; border-radius:11px; cursor:pointer; text-decoration:none; transition:color .15s, background .15s, border-color .15s, transform .12s; }
.pref__btn:hover{ color:#fff; background:color-mix(in srgb, var(--acc-face) 16%, var(--surface-2)); border-color:var(--acc-face); transform:translateY(-2px); }
.pref__btn > svg:first-child{ width:17px; height:17px; fill:var(--acc-face); flex:none; display:none; }
.pref__label{ flex:1; text-align:left; white-space:nowrap; }
.pref__chev{ width:16px; height:16px; fill:var(--text-dim); flex:none; transition:transform .18s; }
.pref.open .pref__chev{ transform:rotate(180deg); }
.pref__menu{ position:absolute; top:calc(100% + 8px); left:0; min-width:100%; max-height:220px; overflow-y:auto; background:var(--card-bg); border:1px solid var(--card-bd); border-radius:12px; padding:6px; box-shadow:0 18px 44px rgba(0,0,0,.55); opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity .16s ease, transform .16s ease; z-index:20; }
.pref.open .pref__menu{ opacity:1; transform:none; pointer-events:auto; }
.pref__opt{ display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:9px; color:var(--text-dim); font-weight:600; font-size:13px; white-space:nowrap; cursor:pointer; transition:background .12s, color .12s; }
.pref__opt:hover{ background:color-mix(in srgb, var(--acc-face) 14%, var(--surface-2)); color:var(--text); }
.pref__opt[aria-selected="true"]{ color:var(--acc-face); background:color-mix(in srgb, var(--acc-face) 10%, var(--surface-2)); }
.pref__menu::-webkit-scrollbar{ width:9px; }
.pref__menu::-webkit-scrollbar-track{ background:transparent; }
.pref__menu::-webkit-scrollbar-thumb{ background:var(--card-bd); border-radius:8px; border:2px solid var(--card-bg); }
.pref__menu::-webkit-scrollbar-thumb:hover{ background:var(--acc-face); }

.user-wrap{ position:fixed; top:22px; right:calc(22px + 67px + 8px); z-index:56; opacity:0; transform:translateY(-15px); pointer-events:none; transition:opacity .5s ease .6s, transform .5s ease .6s; }
.is-reveal .user-wrap{ opacity:1; transform:none; pointer-events:auto; }
body.menu-open .user-wrap{ opacity:0 !important; pointer-events:none !important; }
.user-btn{ border:4px solid var(--acc-border); background:var(--acc-depth); border-radius:15px; padding:0 0 5px; box-shadow:0 7px 14px rgba(0,0,0,.4); cursor:pointer; transition:padding .12s ease, box-shadow .2s ease, filter .15s ease; }
.user-btn__face{ display:grid; place-items:center; width:54px; height:54px; border-radius:11px; background:var(--acc-face); color:var(--acc-text); box-shadow:inset 0 4px 0 var(--acc-rim); overflow:hidden; }
.user-head{ width:38px; height:38px; image-rendering:pixelated; box-shadow:0 0 0 2px #fff; border-radius:2px; }
.user-btn:hover{ padding-bottom:11px; box-shadow:0 15px 24px rgba(0,0,0,.5); filter:brightness(1.05); }
.user-btn:active{ filter:brightness(.97); }
.user-chip__chev{ display:none; }
.user-menu{ position:absolute; top:calc(100% + 12px); right:0; width:292px; background:var(--card-bg); border:1px solid var(--card-bd); border-radius:18px; padding:14px; box-shadow:0 26px 54px rgba(0,0,0,.64); opacity:0; transform:translateY(-10px) scale(.97); transform-origin:top right; pointer-events:none; transition:opacity .17s ease, transform .17s cubic-bezier(.18,.9,.3,1.2); }
.user-wrap.open .user-menu{ opacity:1; transform:none; pointer-events:auto; }

.um-head{ display:flex; align-items:center; gap:12px; padding:13px; border-radius:14px; background:linear-gradient(135deg, color-mix(in srgb, var(--acc-face) 24%, var(--surface-2)), var(--surface-2)); border:1px solid color-mix(in srgb, var(--acc-face) 26%, var(--card-bd)); }
.um-av{ width:46px !important; height:46px !important; border-radius:8px; image-rendering:pixelated; box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--acc-face); }
.um-id{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.um-name{ font-weight:900; font-size:1.06rem; color:var(--text); line-height:1; }
.um-role{ align-self:flex-start; font-size:.68rem; font-weight:900; letter-spacing:.6px; text-transform:uppercase; color:var(--acc-text); background:var(--acc-face); padding:2px 8px; border-radius:6px; }

.um-credit{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:12px 0; padding:11px 8px 11px 14px; border-radius:12px; background:var(--surface-2); border:1px solid var(--card-bd); }
.um-credit__info{ display:flex; flex-direction:column; }
.um-credit__info span{ font-size:.68rem; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--text-dim); }
.um-credit__info b{ font-size:1.2rem; font-weight:900; color:var(--acc-face); line-height:1.1; }
.um-topup{ flex:none; border:none; cursor:pointer; font-weight:900; font-size:.78rem; text-transform:uppercase; letter-spacing:.4px; color:var(--acc-text); background:var(--acc-face); padding:9px 14px; border-radius:10px; box-shadow:0 3px 0 var(--acc-depth); transition:transform .1s, filter .15s; }
.um-topup:hover,.um-topup:focus{ color:var(--acc-text); filter:none; transform:none; }
.um-topup:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--acc-depth); }

.um-list{ display:flex; flex-direction:column; gap:2px; margin-bottom:2px; }
.um-list a{ position:relative; display:flex; align-items:center; gap:13px; padding:11px 12px 11px 14px; border-radius:11px; color:var(--text-dim); font-weight:700; font-size:.93rem; text-decoration:none; overflow:hidden; transition:background .16s ease, color .16s ease, padding .16s ease; }
.um-list a svg{ width:19px; height:19px; fill:currentColor; flex:none; transition:transform .16s ease, color .16s ease; }
.um-list a::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:0; background:var(--acc-face); border-radius:0 3px 3px 0; transition:height .18s ease; }
.um-list a:hover{ background:color-mix(in srgb, var(--acc-face) 15%, var(--surface-2)); color:var(--text); padding-left:20px; }
.um-list a:hover svg{ color:var(--acc-face); transform:scale(1.12); }
.um-list a:hover::before{ height:56%; }
/* Discord unlink is a <button> inside a <form>; make it match the .um-list a items */
.um-list form{ display:contents; }
.um-list .btn-link{ position:relative; display:flex; align-items:center; gap:13px; width:100%; padding:11px 12px 11px 14px; border-radius:11px; color:var(--text-dim); font-weight:700; font-size:.93rem; line-height:1.25; text-align:left; overflow:hidden; transition:background .16s ease, color .16s ease, padding .16s ease; }
.um-list .btn-link svg{ width:19px; height:19px; fill:currentColor; flex:none; transition:transform .16s ease, color .16s ease; }
.um-list .btn-link:hover{ background:color-mix(in srgb, var(--acc-face) 15%, var(--surface-2)); color:var(--text); padding-left:20px; }
.um-list .btn-link:hover svg{ color:var(--acc-face); transform:scale(1.12); }

.um-logout{ margin-top:11px; }
.um-hint{ margin:12px 4px; font-size:.85rem; line-height:1.5; color:var(--text-dim); }

body.logged-out .only-in{ display:none; }
body.logged-in  .only-out{ display:none; }

.fab-wrap{ position:fixed; left:22px; bottom:22px; z-index:60; display:flex; flex-direction:column-reverse; align-items:flex-start; gap:14px; opacity:0; transform:translateY(15px); pointer-events:none; transition:opacity .5s ease .7s, transform .5s ease .7s; }
.is-reveal .fab-wrap{ opacity:1; transform:none; pointer-events:auto; }
.fab-panel{ display:none; width:264px; background:var(--card-bg); border:1px solid var(--card-bd); border-radius:16px; padding:16px; box-shadow:0 22px 44px rgba(0,0,0,.55); }
.fab-panel.open{ display:block; animation:fabpop .15s ease; }
@keyframes fabpop{ from{opacity:0; transform:translateY(8px) scale(.97)} to{opacity:1; transform:none} }
.fab-panel h4{ margin:0 0 10px; font-size:12px; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-dim); }
.fab-panel h4:not(:first-child){ margin-top:16px; }
.swatches{ display:flex; gap:10px; flex-wrap:wrap; }
.swatch{ width:34px; height:34px; border-radius:10px; border:2px solid rgba(0,0,0,.3); cursor:pointer; transition:transform .12s; }
.swatch:hover{ transform:translateY(-2px); } .swatch[data-active="true"]{ box-shadow:0 0 0 3px var(--text); }
.seg{ display:flex; gap:8px; } .seg button{ flex:1; padding:9px 6px; border-radius:10px; border:1px solid var(--card-bd); background:var(--surface-2); color:var(--text); font-weight:700; font-size:13px; cursor:pointer; transition:.12s; }
.seg button[data-active="true"]{ background:var(--acc-face); color:var(--acc-text); border-color:var(--acc-border); }

.ip-toast{ position:fixed; left:50%; bottom:30px; transform:translateX(-50%) translateY(20px) scale(.92); opacity:0; pointer-events:none; z-index:200; }
.ip-toast.show{ animation:toastpop 1.9s cubic-bezier(.16,.84,.34,1) forwards; }
@keyframes toastpop{ 0%{opacity:0; transform:translateX(-50%) translateY(20px) scale(.92)} 12%{opacity:1; transform:translateX(-50%) translateY(0) scale(1.04)} 22%{transform:translateX(-50%) translateY(0) scale(1)} 84%{opacity:1; transform:translateX(-50%) translateY(0) scale(1)} 100%{opacity:0; transform:translateX(-50%) translateY(-10px) scale(.98)} }
.copied{ animation:copiedpulse .45s ease; }
@keyframes copiedpulse{ 0%{filter:brightness(1)} 40%{filter:brightness(1.22)} 100%{filter:brightness(1)} }

.foot-card__ip{ position:relative; min-height:40px; }
.foot-card__copied{ display:none; color:var(--acc-text); font-weight:900; font-size:11.5px; letter-spacing:.4px; margin-top:3px; }
.foot-card__left.show-copied .foot-card__hint{ display:none !important; }
.foot-card__left.show-copied .foot-card__copied{ display:block !important; animation:copyFade .3s ease; }
@keyframes copyFade{ from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }

/* ── Nav Brand (top-left logo, shown in BOTH default & wide header modes) ── */
.nav-brand{ position:absolute; top:22px; left:24px; z-index:57; display:flex; align-items:center; opacity:0; transform:translateY(-15px); pointer-events:none; transition:opacity .5s ease .55s, transform .5s ease .55s; }
.is-reveal .nav-brand{ opacity:1; transform:none; pointer-events:auto; }
.nav-brand img{ height:52px; width:auto; max-width:220px; object-fit:contain; display:block; filter:drop-shadow(0 4px 12px rgba(0,0,0,.55)); transition:transform .16s ease; }
.nav-brand:hover img{ transform:translateY(-2px) scale(1.04); }
body.menu-open .nav-brand{ opacity:0 !important; pointer-events:none !important; }

/* ── Wide Header ── */
.wide-header{ display:none; position:absolute; top:0; left:0; right:0; z-index:55; padding:22px 24px; }
.wide-header__nav{ display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap; min-height:67px; }
.wide-header__nav a{ color:#fff; text-decoration:none; font-weight:900; font-size:clamp(13px,1.4vw,18px); text-transform:uppercase; letter-spacing:1px; display:inline-flex; align-items:center; gap:7px; transition:color .15s, transform .14s; white-space:nowrap; text-shadow:0 2px 8px rgba(0,0,0,.5); }
.wide-header__nav a svg{ width:1.1em; height:1.1em; fill:currentColor; flex:none; }
.wide-header__nav a i{ font-size:1.1em; flex:none; }
.wide-header__nav a:hover{ color:var(--acc-face); transform:translateY(-2px); }

/* Wide header dropdown (menu items with children) */
.wide-dd{ position:relative; display:inline-flex; }
.wide-dd__toggle{ cursor:pointer; }
.wide-dd__chev{ width:.85em; height:.85em; fill:currentColor; flex:none; transition:transform .18s ease; }
.wide-dd:hover .wide-dd__chev, .wide-dd:focus-within .wide-dd__chev{ transform:rotate(180deg); }
.wide-dd__menu{ position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(4px); min-width:200px; margin-top:10px; background:var(--card-bg); border:1px solid var(--card-bd); border-radius:12px; padding:6px; box-shadow:0 18px 44px rgba(0,0,0,.55); display:flex; flex-direction:column; gap:2px; opacity:0; pointer-events:none; transition:opacity .16s ease, transform .16s ease; z-index:60; }
.wide-dd__menu::before{ content:""; position:absolute; left:0; right:0; top:-12px; height:12px; }
.wide-dd:hover .wide-dd__menu, .wide-dd:focus-within .wide-dd__menu{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.wide-dd__menu a{ display:block; padding:9px 13px; border-radius:8px; font-size:14px; font-weight:700; letter-spacing:0; text-transform:none; text-shadow:none; color:var(--text-dim); white-space:nowrap; }
.wide-dd__menu a:hover{ background:color-mix(in srgb, var(--acc-face) 15%, var(--surface-2)); color:#fff; transform:none; }

/* Menu overlay — dropdown children as indented sub-links + group label */
.menu-nav__group{ display:block; color:var(--text-dim); font-weight:900; text-transform:uppercase; letter-spacing:1.5px; font-size:.8em; opacity:.7; margin-top:6px; }
.menu-nav__sub span{ font-size:.82em !important; opacity:.85; }

body[data-header="wide"] .wide-header{ display:block; opacity:0; transform:translateY(-15px); }
body[data-header="wide"].is-reveal .wide-header{ animation:headerIn .5s ease .5s forwards; }
@keyframes headerIn{ to{opacity:1; transform:none} }
/* Hamburger is a default-header-only element; wide mode uses the centered nav */
body[data-header="wide"] .menu-toggle{ display:none !important; }
body[data-header="wide"] .user-wrap{ right:22px; }

/* ===================== Spotlight hero (v2.1.0) — separate from the navbar/header setting ===================== */
/* z-index:3 (> reveal-panel) + overflow:visible so the big swaying logo can ride OVER the slider without being clipped */
.hero-spot{ position:relative; z-index:3; width:100%; min-height:clamp(460px,60vh,660px); display:flex; align-items:flex-end; }
/* only the wallpaper/tint/arc are clipped (keeps the ambient zoom inside the hero box) */
.hero-spot__media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
/* opening reveal (same feel as the classic hero wallpaper) then hands off to the slow ambient drift */
.hero-spot__bg{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; opacity:0; transform:rotate(3deg) scale(1.3); }
body[data-hero="spotlight"].is-reveal .hero-spot__bg{ animation:spot-reveal .95s cubic-bezier(.16,.84,.34,1) forwards, spot-amb 20s ease-in-out 1.05s infinite alternate; }
@keyframes spot-reveal{ 0%{opacity:0; transform:rotate(3deg) scale(1.3)} 55%{opacity:1} 100%{opacity:1; transform:rotate(0) scale(1.06)} }
@keyframes spot-amb{ 0%{transform:scale(1.06) translate(0,0)} 100%{transform:scale(1.13) translate(-1.5%,-2.4%)} }
/* Darker wallpaper + a very subtle accent-colour wash tied to the theme colour */
.hero-spot__tint{ position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 78% at 50% 8%, color-mix(in srgb, var(--acc-face) 12%, transparent), transparent 58%),
    linear-gradient(180deg, rgba(5,7,11,.66) 0%, rgba(5,7,11,.34) 40%, color-mix(in srgb, var(--panel-bg) 58%, transparent) 100%); }
.hero-spot__arc{ position:absolute; left:0; right:0; bottom:-1px; z-index:2; width:100%; height:clamp(78px,11vw,128px); display:block; }
.hero-spot__arc path{ fill:var(--panel-bg); }

/* width matches the slider/reveal-panel (.panel-inner) below so the two cards line up flush with the slider edges */
.hero-spot__inner{ position:relative; z-index:3; width:min(var(--maxw), 92vw); margin:0 auto;
  padding:0 0 clamp(18px,3vw,36px);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(14px,2.4vw,40px); }

/* big centered logo, sits over the wallpaper and dips onto the slider; pointer-events off so it never blocks the slider */
.hero-spot__logo-wrap{ display:flex; justify-content:center; pointer-events:none; transform:translateY(clamp(20px,4vw,56px)); }
.hero-spot__logo{ width:clamp(176px,23vw,330px); height:auto; display:block; filter:drop-shadow(0 20px 34px rgba(0,0,0,.62)); opacity:0; transform:scale(.5) rotate(-10deg); }
body[data-hero="spotlight"].is-reveal .hero-spot__logo{ animation:pop-in .8s cubic-bezier(.18,1.3,.4,1) .1s forwards, logo-sway 4s ease-in-out 1.1s infinite; }

/* action cards — 1:1 with our .btn3d 3D button style (uses the t-accent / t-dc colour vars) */
.spot-card{ --bw:3px; --depth:5px; --rim:4px; --rad:16px;
  justify-self:center; width:max-content; max-width:none; display:flex; text-decoration:none; cursor:pointer;
  border:var(--bw) solid var(--c-border); background:var(--c-depth); border-radius:var(--rad);
  padding:0 0 var(--depth) 0; box-shadow:0 9px 20px rgba(0,0,0,.45);
  transition:box-shadow .2s ease, padding .12s ease, filter .15s ease; opacity:0; }
.spot-card--play{ justify-self:start; }
.spot-card--dc{ justify-self:end; }
.spot-card__face{ position:relative; overflow:hidden; flex:1 1 auto; display:flex; align-items:center; gap:12px; min-width:0;
  padding:10px 18px 10px 11px; border-radius:calc(var(--rad) - var(--bw));
  background:var(--c-face); box-shadow:inset 0 var(--rim) 0 var(--c-rim); color:var(--c-text); text-shadow:var(--c-edge); }
.spot-card__face::after{ content:""; position:absolute; top:0; left:-130%; width:50%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform:skewX(-18deg); transition:left .6s ease; pointer-events:none; }
body[data-hero="spotlight"].is-reveal .spot-card{ animation:spot-card-in .5s cubic-bezier(.18,1.15,.4,1) forwards; }
body[data-hero="spotlight"].is-reveal .spot-card--play{ animation-delay:.32s; }
body[data-hero="spotlight"].is-reveal .spot-card--dc{ animation-delay:.42s; }
@keyframes spot-card-in{ from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none} }
.spot-card:hover{ animation:btn-shake .5s cubic-bezier(.36,.07,.19,.97) forwards; padding-bottom:calc(var(--depth) + 6px); box-shadow:0 16px 28px rgba(0,0,0,.5), 0 6px 22px color-mix(in srgb, var(--c-face) 45%, transparent); filter:brightness(1.04); z-index:5; }
.spot-card:hover .spot-card__face::after{ left:160%; }
.spot-card:active{ filter:brightness(.97); }
.spot-card__ic{ flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:11px; background:color-mix(in srgb, var(--c-text) 15%, transparent); color:var(--c-text); }
.spot-card__ic svg{ width:20px; height:20px; fill:currentColor; }
.spot-card__txt{ display:flex; flex-direction:column; gap:2px; min-width:0; text-align:left; }
.spot-card__title{ font-size:1.04rem; font-weight:900; color:var(--c-text); line-height:1.1; text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; }
.spot-card__sub{ font-size:.74rem; font-weight:800; color:var(--c-text); opacity:.8; line-height:1.15; white-space:nowrap; }
.spot-card__sub [data-online-count]{ font-weight:900; }

/* content panel starts right under the hero; the logo dips over its top on purpose */
body[data-hero="spotlight"] .reveal-panel{ width:100%; margin-left:0; margin-top:-1px; border-top-left-radius:0; border-top-right-radius:0; padding-top:clamp(26px,4vw,54px); }

/* Below 1080px there isn't enough room to flank the logo with full-width IP/DC cards,
   so stack them under the logo (full width, always fully visible, equal width). */
@media (max-width:1080px){
  .hero-spot__inner{ width:min(var(--maxw), calc(100vw - 40px));
    grid-template-columns:minmax(0,1fr); grid-template-areas:"logo" "play" "dc"; align-items:stretch; row-gap:12px; gap:12px; }
  .hero-spot__logo-wrap{ grid-area:logo; transform:none; margin-bottom:2px; }
  .spot-card{ grid-area:play; justify-self:stretch; width:auto !important; max-width:none; }
  .spot-card--dc{ grid-area:dc; justify-self:stretch; width:auto !important; max-width:none; }
}
@media (max-width:760px){
  .nav-brand{ display:none !important; }
  .hero-spot{ min-height:auto; padding-top:clamp(78px,19vw,104px); }
  .hero-spot__inner{ row-gap:11px; gap:11px; padding-bottom:18px; }
  .hero-spot__logo{ width:clamp(140px,34vw,205px); }
  .spot-card{ --depth:4px; --rad:14px; }
  .spot-card__face{ padding:8px 13px 8px 10px; gap:9px; }
  .spot-card__ic{ width:34px; height:34px; border-radius:9px; }
  .spot-card__ic svg{ width:17px; height:17px; }
  .spot-card__title{ font-size:.9rem; }
  .spot-card__sub{ font-size:.66rem; }
}
@media (prefers-reduced-motion:reduce){
  body[data-hero="spotlight"].is-reveal .hero-spot__bg{ animation:none; opacity:1; transform:scale(1.06); }
  body[data-hero="spotlight"].is-reveal .hero-spot__logo{ animation:none; opacity:1; transform:none; }
  body[data-hero="spotlight"].is-reveal .spot-card{ animation:none; opacity:1; transform:none; }
  .spot-card:hover{ animation:none; }
}


@media (prefers-reduced-motion:reduce){
  .is-intro .hero-logo,.is-reveal .hero-logo,.is-reveal .hero-actions,.is-reveal .wallpaper-stage,.scroll-cue__mouse span,.menu-overlay.open .menu-ripple,.btn3d:hover{ animation:none; }
  .hero-logo,.hero-actions{ opacity:1; transform:none; } .wallpaper-stage{ opacity:1; transform:none; } .scroll-cue{ opacity:1; }
  .btn3d:hover{ transform:scale(1.04); }
}

@media (max-width:1080px){
  .reveal-panel{ width:100%; margin-left:0; padding-left:20px; padding-right:20px; }
  .content-grid{ grid-template-columns:minmax(0,1fr); }
  .sidebar{ position:static; flex-direction:row; flex-wrap:wrap; }
  .card3d{ flex:1 1 280px; }
  .news-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .discord-inner{ grid-template-columns:minmax(0,1fr); } .discord-art{ order:-1; }
  .recruits__inner{ grid-template-columns:minmax(0,1fr); gap:30px; }
  .recruits__aside{ order:-1; text-align:center; }
  .recruits__aside p{ margin-left:auto; margin-right:auto; }
  .rec-cta{ justify-content:center; }
  .foot-grid .fcol{ flex:1 1 40%; }
  .foot-grid .fcol--brand{ flex:1 1 100%; }
  .foot-card{ width:min(var(--maxw), calc(100% - 40px)); }
  .foot-card__logo{ left:-30px; width:80px; }
  .foot-card__inner{ padding-left:60px; }
  .foot-main{ width:min(var(--maxw), calc(100% - 40px)); }
  .wide-header__nav{ gap:16px; }
  .wide-header__nav a{ font-size:clamp(11px,1.1vw,14px); }
}
@media (max-width:760px){
  .hero{ min-height:480px; }
  .hero-logo{ width:min(66vw, 280px); }
  .hero-actions{ flex-direction:column; align-items:center; gap:10px; width:100%; padding:0 20px; }
  .hero-actions .btn3d{ width:100%; max-width:280px; }
  .hero-actions .btn3d .btn3d__face{ width:100%; }
  .slide{ flex-direction:column; text-align:center; gap:20px; padding:24px 18px; }
  .slide__desc{ max-width:none; } .slide__media{ flex:none; width:100%; }
  .reveal-panel{ border-top-left-radius:50% 8vh; border-top-right-radius:50% 8vh; padding-top:16vw; }
  .news-cards{ grid-template-columns:minmax(0,1fr); }
  body[data-news="list"] .ncard{ flex-direction:column; } body[data-news="list"] .ncard__cover{ flex:none; }
  .stats-band__inner{ flex-direction:column; gap:34px; padding:20vw 6vw; }
  .stats-band::before,.stats-band::after{ height:13vw; }
  .rec-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); height:430px; }
  .foot-grid{ flex-direction:column; gap:26px; }
  .foot-grid .fcol--brand{ flex:1 1 100%; }
  .foot-cols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px 18px; }
  .foot-cols .fcol{ min-width:0; }
  .fcol--brand{ text-align:center; }
  .fcol--brand__txt{ text-align:center; }
  .fcol--brand__txt p{ margin-left:auto; margin-right:auto; }
  .foot-ipbox{ margin-left:auto; margin-right:auto; }
  .foot-card{ width:calc(100% - 24px); }
  .foot-card__logo{ display:none; }
  .foot-card__inner{ padding:14px 18px; flex-direction:column; text-align:center; gap:12px; }
  .foot-card__soc{ margin-left:0; justify-content:center; }
  .foot-main{ width:calc(100% - 24px); }
  .foot-bottom{ flex-direction:column; text-align:center; gap:12px; }
  .foot-sign{ justify-content:center; }
  .wide-header{ padding:12px 16px; }
  .wide-header__nav{ gap:10px; }
  .wide-header__nav a{ font-size:11px; }
  .menu-toggle{ top:16px; right:16px; }
  .user-wrap{ top:16px; right:calc(16px + 67px + 8px); }
  body[data-header="wide"] .user-wrap{ right:16px; }
  .nav-brand{ top:16px; left:16px; }
  .nav-brand img{ height:40px; max-width:150px; }
  .slider-card{ border-radius:16px; }
  .slider-card__face{ border-radius:12px; }
  .pager{ margin-top:16px; }
  .discord-band{ padding:50px 5vw; }
  .recruits{ padding:40px 5vw; }
  .seam-band{ padding:30px 16px; }
}
@media (max-width:480px){
  .wide-header__nav a{ font-size:10px; gap:4px; }
  .hero-logo{ width:min(78vw, 260px); }
  .hero-actions .btn3d{ --fs:15px; --bh:46px; }
  .foot-card__ip b{ font-size:15px; }
  .foot-card__ip small{ font-size:9.5px; }
  .stats-band__inner{ padding:24vw 4vw; }
  .rec-grid{ height:360px; }
  .slide__title{ font-size:clamp(1.2rem,5vw,1.6rem); }
  .slide__desc{ font-size:.9rem; }
  .news-head h2{ font-size:1.3rem; }
  .dc-title{ font-size:clamp(24px,6vw,36px); }
  .recruits__aside h2{ font-size:clamp(22px,5vw,32px); }
  .fab-wrap{ left:14px; bottom:14px; }
  .menu-toggle{ top:14px; right:14px; }
  .user-wrap{ top:14px; right:calc(14px + 67px + 6px); }
  body[data-header="wide"] .user-wrap{ right:14px; }
  .nav-brand{ top:14px; left:14px; }
  .nav-brand img{ height:34px; max-width:120px; }
}

/* ── Tabler JS compat - minimal classes for JS interactions ── */
.dropdown-menu{position:absolute;z-index:1000;display:none;min-width:10rem;padding:.25rem 0;margin:0;font-size:.875rem;color:var(--text);text-align:left;list-style:none;background-color:var(--card-bg);background-clip:padding-box;border:1px solid var(--card-bd);border-radius:.5rem;box-shadow:0 1rem 3rem rgba(0,0,0,.35)}
.dropdown-menu.show{display:block}
.dropdown-item{display:block;width:100%;padding:.4rem 1rem;clear:both;font-weight:400;color:var(--text-dim);text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0;font-size:.875rem;transition:background .15s,color .15s}
.dropdown-item:hover,.dropdown-item:focus{color:var(--text);background-color:var(--surface-2)}
.dropdown-item.active,.dropdown-item:active{color:var(--acc-face);background-color:color-mix(in srgb,var(--acc-face) 10%,var(--surface-2))}
.dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent}
.dropdown-menu-end{right:0;left:auto}
.dropdown-menu-arrow::before{content:"";position:absolute;top:-6px;right:12px;width:12px;height:12px;background:var(--card-bg);border-top:1px solid var(--card-bd);border-left:1px solid var(--card-bd);transform:rotate(45deg)}
.collapse:not(.show){display:none}
.collapsing{height:0;overflow:hidden;transition:height .35s ease}
.modal{position:fixed;top:0;left:0;z-index:1055;display:none;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;outline:0;background:rgba(0,0,0,.5)}
.modal.show{display:block}
.modal-dialog{position:relative;width:auto;margin:.5rem;pointer-events:none;max-width:500px;margin:1.75rem auto}
.modal-content{position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background-color:var(--card-bg);background-clip:padding-box;border:1px solid var(--card-bd);border-radius:.75rem;outline:0;box-shadow:0 1rem 3rem rgba(0,0,0,.35)}
.modal-header{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;padding:1rem 1rem;border-bottom:1px solid var(--card-bd)}
.modal-body{position:relative;flex:1 1 auto;padding:1rem}
.modal-backdrop{position:fixed;top:0;left:0;z-index:1050;width:100vw;height:100vh;background-color:#000}
.modal-backdrop.show{opacity:.5}
.fade{transition:opacity .15s linear}
.fade:not(.show){opacity:0}
.btn-close{box-sizing:content-box;width:1em;height:1em;padding:.25em;color:var(--text);background:transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;border:0;border-radius:.25rem;opacity:.5;cursor:pointer}
.btn-close:hover{opacity:1}
.navbar-collapse{flex-basis:100%;flex-grow:1;align-items:center}
.navbar-toggler{padding:.25rem .75rem;font-size:1.125rem;line-height:1;background-color:transparent;border:1px solid transparent;border-radius:.25rem;cursor:pointer}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.text-danger{color:#d63939!important}
.text-success{color:#2fb344!important}
.text-warning{color:#f76707!important}
.text-muted{color:var(--text-dim)!important}
.fw-bold,.fw-medium{font-weight:600!important}
.small{font-size:.875em!important}
.d-none{display:none!important}
.d-flex{display:flex!important}
.d-block{display:block!important}
.d-grid{display:grid!important}
.d-inline-flex{display:inline-flex!important}
.flex-column{flex-direction:column!important}
.align-items-center{align-items:center!important}
.justify-content-center{justify-content:center!important}
.justify-content-between{justify-content:space-between!important}
.gap-1{gap:.25rem!important}
.gap-2{gap:.5rem!important}
.gap-3{gap:1rem!important}

/* ─────────────────────────────────────────────────────────────
   Tailwind-style grid system (repeat(N, minmax(0,1fr)) → daralınca taşma yok)
   .grid  .grid-cols-{1..12}  .grid-cols-none
   .col-span-{1..12}  .col-span-full  .col-auto
   .gap-x-* .gap-y-*  .items-* .justify-items-* .place-items-center
   responsive: sm:640  md:768  lg:1024  xl:1280
   ───────────────────────────────────────────────────────────── */
.grid{display:grid}
.inline-grid{display:inline-grid}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}
.grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}
.grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}
.grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}
.grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}
.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
.grid-cols-none{grid-template-columns:none}
.col-auto{grid-column:auto}
.col-span-1{grid-column:span 1/span 1}
.col-span-2{grid-column:span 2/span 2}
.col-span-3{grid-column:span 3/span 3}
.col-span-4{grid-column:span 4/span 4}
.col-span-5{grid-column:span 5/span 5}
.col-span-6{grid-column:span 6/span 6}
.col-span-7{grid-column:span 7/span 7}
.col-span-8{grid-column:span 8/span 8}
.col-span-9{grid-column:span 9/span 9}
.col-span-10{grid-column:span 10/span 10}
.col-span-11{grid-column:span 11/span 11}
.col-span-12{grid-column:span 12/span 12}
.col-span-full{grid-column:1/-1}
.gap-x-1{column-gap:.25rem} .gap-y-1{row-gap:.25rem}
.gap-x-2{column-gap:.5rem}  .gap-y-2{row-gap:.5rem}
.gap-x-3{column-gap:1rem}   .gap-y-3{row-gap:1rem}
.gap-x-4{column-gap:1.5rem} .gap-y-4{row-gap:1.5rem}
.gap-x-6{column-gap:2rem}   .gap-y-6{row-gap:2rem}
.items-start{align-items:start} .items-center{align-items:center} .items-end{align-items:end} .items-stretch{align-items:stretch}
.justify-items-start{justify-items:start} .justify-items-center{justify-items:center} .justify-items-end{justify-items:end}
.place-items-center{place-items:center}
@media (min-width:640px){
  .sm\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sm\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
  .sm\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
  .sm\:col-span-1{grid-column:span 1/span 1}
  .sm\:col-span-2{grid-column:span 2/span 2}
  .sm\:col-span-3{grid-column:span 3/span 3}
  .sm\:col-span-4{grid-column:span 4/span 4}
  .sm\:col-span-6{grid-column:span 6/span 6}
  .sm\:col-span-full{grid-column:1/-1}
}
@media (min-width:768px){
  .md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .md\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
  .md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
  .md\:col-span-1{grid-column:span 1/span 1}
  .md\:col-span-2{grid-column:span 2/span 2}
  .md\:col-span-3{grid-column:span 3/span 3}
  .md\:col-span-4{grid-column:span 4/span 4}
  .md\:col-span-6{grid-column:span 6/span 6}
  .md\:col-span-8{grid-column:span 8/span 8}
  .md\:col-span-full{grid-column:1/-1}
}
@media (min-width:1024px){
  .lg\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
  .lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
  .lg\:col-span-1{grid-column:span 1/span 1}
  .lg\:col-span-2{grid-column:span 2/span 2}
  .lg\:col-span-3{grid-column:span 3/span 3}
  .lg\:col-span-4{grid-column:span 4/span 4}
  .lg\:col-span-6{grid-column:span 6/span 6}
  .lg\:col-span-8{grid-column:span 8/span 8}
  .lg\:col-span-9{grid-column:span 9/span 9}
  .lg\:col-span-full{grid-column:1/-1}
}
@media (min-width:1280px){
  .xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .xl\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .xl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
  .xl\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
  .xl\:col-span-3{grid-column:span 3/span 3}
  .xl\:col-span-4{grid-column:span 4/span 4}
  .xl\:col-span-6{grid-column:span 6/span 6}
  .xl\:col-span-8{grid-column:span 8/span 8}
  .xl\:col-span-full{grid-column:1/-1}
}
.w-100{width:100%!important}
.p-0{padding:0!important}
.p-4{padding:1.5rem!important}
.m-0{margin:0!important}
.mb-0{margin-bottom:0!important}
.mb-2{margin-bottom:.5rem!important}
.mb-3{margin-bottom:1rem!important}
.mb-4{margin-bottom:1.5rem!important}
.mt-1{margin-top:.25rem!important}
.mt-2{margin-top:.5rem!important}
.mt-3{margin-top:1rem!important}
.me-1{margin-right:.25rem!important}
.me-2{margin-right:.5rem!important}
.ms-1{margin-left:.25rem!important}
.ms-2{margin-left:.5rem!important}
.ps-2{padding-left:.5rem!important}
.pe-0{padding-right:0!important}
.pt-3{padding-top:1rem!important}
.pt-5{padding-top:3rem!important}
.pb-2{padding-bottom:.5rem!important}
.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}
.py-3{padding-top:1rem!important;padding-bottom:1rem!important}
.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}
.px-4{padding-left:1.5rem!important;padding-right:1.5rem!important}
.text-center{text-align:center!important}
.text-end{text-align:right!important}
.text-uppercase{text-transform:uppercase!important}
.rounded,.rounded-3{border-radius:.75rem!important}
.lh-1{line-height:1!important}
.no-underline,.no-underline:hover{text-decoration:none}
.border-input{border:1px solid var(--card-bd)!important}
.opacity-50{opacity:.5!important}
.opacity-60{opacity:.6!important}
.container{width:100%;padding-right:.75rem;padding-left:.75rem;margin-right:auto;margin-left:auto;max-width:var(--maxw)}
.container-xl{max-width:1140px;width:100%;padding-right:.75rem;padding-left:.75rem;margin-right:auto;margin-left:auto}
.container-tight{max-width:400px;width:100%;padding-right:.75rem;padding-left:.75rem;margin-right:auto;margin-left:auto}
.row{display:flex;flex-wrap:wrap;margin-right:-.75rem;margin-left:-.75rem}
.col,.col-md-2,.col-md-4,.col-md-5,.col-md-7,.col-md-8,.col-md-12{position:relative;width:100%;padding-right:.75rem;padding-left:.75rem}
.col-12{flex:0 0 100%;max-width:100%}
@media(min-width:768px){.col-md-2{flex:0 0 16.666%;max-width:16.666%}.col-md-4{flex:0 0 33.333%;max-width:33.333%}.col-md-5{flex:0 0 41.666%;max-width:41.666%}.col-md-7{flex:0 0 58.333%;max-width:58.333%}.col-md-8{flex:0 0 66.666%;max-width:66.666%}.col-md-12{flex:0 0 100%;max-width:100%}.col-md{flex-basis:0;flex-grow:1;max-width:100%}}
.g-0{margin-right:0;margin-left:0}.g-0>.col,.g-0>[class*="col-"]{padding-right:0;padding-left:0}
@media(min-width:768px){.d-md-none{display:none!important}.d-md-flex{display:flex!important}.text-md-start{text-align:left!important}}
@media(min-width:1200px){.d-xl-block{display:block!important}}
@media(min-width:992px){.d-lg-flex{display:flex!important}.d-lg-inline-block{display:inline-block!important}}
@media(max-width:767.98px){.d-none.d-sm-block{display:block!important}}
/* ── Tables — 1:1 abyss structure: header bg + horizontal row separators only, NO vertical lines, natural auto layout ── */
.table{width:100%;margin-bottom:1rem;color:var(--text);border-collapse:collapse;font-size:.875rem}
.table th{background:var(--surface-2);color:var(--text-dim);font-weight:800;padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--card-bd);text-transform:uppercase;letter-spacing:.4px;font-size:.72rem;white-space:nowrap}
.table th.text-center,.table td.text-center{text-align:center}
.table th.text-end,.table td.text-end{text-align:right}
.table td{padding:.75rem 1rem;border-bottom:1px solid color-mix(in srgb,var(--card-bd) 30%,transparent);vertical-align:middle;color:var(--text)}
.table tr:last-child td{border-bottom:none}
.table tbody tr{transition:background-color .14s ease}
.table tbody tr:hover td{background:color-mix(in srgb,var(--surface-2) 45%,transparent)}
.table-responsive,.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:var(--card-bg);background-clip:border-box;border:1px solid var(--card-bd);border-radius:.75rem;box-shadow:0 5px 0 var(--card-depth),0 14px 20px rgba(0,0,0,.4);margin-bottom:1rem}
.card-body{flex:1 1 auto;padding:1rem}
.card-header{padding:.75rem 1rem;margin-bottom:0;background-color:var(--surface-2);border-bottom:1px solid var(--card-bd);display:flex;align-items:center;border-radius:.75rem .75rem 0 0}
.card-title{margin-bottom:0;font-weight:800;font-size:1rem}
.card-hover{transition:transform .18s,box-shadow .18s}
.card-hover:hover{transform:translateY(-4px);box-shadow:0 9px 0 var(--card-depth),0 20px 28px rgba(0,0,0,.5)}
.card-img-right{width:100%;height:100%;object-fit:cover;border-radius:.75rem 0 0 .75rem}
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:600;line-height:1;border-radius:.5rem;padding:.5rem 1rem;font-size:.875rem;border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .15s;text-decoration:none}
.btn-primary{color:#fff;background-color:var(--acc-face);border-color:var(--acc-border)}
.btn-primary:hover{filter:brightness(1.1)}
.btn-transparent{background-color:transparent;border-color:transparent;color:var(--text)}
.btn-transparent:hover{background-color:var(--surface-2)}
.btn-light{background-color:var(--surface-2);border-color:var(--card-bd);color:var(--text-dim)}
.btn-light:hover{color:var(--text);background-color:color-mix(in srgb,var(--acc-face) 16%,var(--surface-2))}
.btn-link{background:none;border:none;color:var(--text-dim);padding:.5rem 1rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;font-weight:600;font-size:.875rem}
.btn-link:hover{color:var(--text)}
.btn-icon{width:2.25rem;height:2.25rem;padding:0}
.form-control,.form-select{display:block;width:100%;padding:.5rem .75rem;font-size:.875rem;font-weight:500;line-height:1.5;color:var(--text);background-color:var(--surface-2);background-clip:padding-box;border:1px solid var(--card-bd);appearance:none;border-radius:.5rem;transition:border-color .15s}
.form-control:focus,.form-select:focus{border-color:var(--acc-face);outline:0;box-shadow:0 0 0 .25rem color-mix(in srgb,var(--acc-face) 25%,transparent)}
/* Native <select> — dark styled with custom chevron + dark option list */
select.form-control,select.form-select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a9b2c3'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7rem center;background-size:20px;padding-right:2.3rem;cursor:pointer;
}
select.form-control option,select.form-select option{ background:#12141a; color:var(--text); padding:8px; }
/* Select2 — force the dark pop theme for ANY select2 theme variant (default / bootstrap4).
   The theme is initialised with theme:'bootstrap4', so styles scoped to --default alone never applied. */
[class*="select2-container--"] .select2-selection{ background:var(--surface-2)!important; border:1px solid var(--card-bd)!important; color:var(--text)!important; border-radius:.5rem!important; box-shadow:none!important; }
[class*="select2-container--"] .select2-selection--single{ height:auto!important; min-height:42px; padding:.5rem .7rem; }
[class*="select2-container--"] .select2-selection--single .select2-selection__rendered{ color:var(--text)!important; line-height:1.5!important; padding:0!important; }
[class*="select2-container--"] .select2-selection__placeholder{ color:var(--text-dim)!important; }
[class*="select2-container--"] .select2-selection--single .select2-selection__arrow{ height:100%!important; top:0!important; right:10px!important; }
[class*="select2-container--"] .select2-selection--single .select2-selection__arrow b{ border-color:var(--text-dim) transparent transparent!important; }
/* multiple select (e.g. ticket custom fields, applications) */
[class*="select2-container--"] .select2-selection--multiple{ min-height:42px!important; padding:.25rem .4rem!important; }
[class*="select2-container--"] .select2-selection--multiple .select2-selection__rendered{ padding:0!important; }
[class*="select2-container--"] .select2-selection--multiple .select2-selection__choice{ background:var(--acc-face)!important; color:var(--acc-text)!important; border:none!important; border-radius:.35rem!important; padding:2px 8px!important; margin:3px 4px 3px 0!important; font-weight:700; }
[class*="select2-container--"] .select2-selection--multiple .select2-selection__choice__remove{ color:var(--acc-text)!important; margin-right:5px; float:none!important; }
/* dropdown panel + results (select2 appends this to <body>) */
.select2-dropdown{ background:#12141a!important; border:1px solid var(--card-bd)!important; border-radius:.5rem!important; color:var(--text)!important; overflow:hidden; box-shadow:0 18px 44px rgba(0,0,0,.55)!important; }
[class*="select2-container--"] .select2-results__option{ color:var(--text)!important; background:transparent!important; padding:.55rem .75rem; }
[class*="select2-container--"] .select2-results__option--highlighted,
[class*="select2-container--"] .select2-results__option--highlighted[aria-selected],
[class*="select2-container--"] .select2-results__option[aria-selected="true"]{ background:var(--acc-face)!important; color:var(--acc-text)!important; }
[class*="select2-container--"] .select2-results__option[role="group"]{ color:var(--text-dim)!important; }
[class*="select2-container--"] .select2-search--dropdown .select2-search__field{ background:var(--surface-2)!important; color:var(--text)!important; border:1px solid var(--card-bd)!important; border-radius:.4rem; }
.form-label{display:inline-block;margin-bottom:.5rem;font-weight:600;font-size:.875rem}
.input-group{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%}
.input-group>.form-control{position:relative;flex:1 1 auto;width:1%;min-width:0}
/* Quantity spinners (cart/chest) — keep the number field wide enough to always read the value */
.input-group .form-control-sm{flex:1 1 auto;min-width:0;width:52px;font-weight:800;font-size:.95rem;text-align:center}
.input-group .btn-sm{flex:0 0 auto;padding-left:.55rem;padding-right:.55rem}
.input-group-text{display:flex;align-items:center;padding:.5rem .75rem;font-size:.875rem;font-weight:400;line-height:1.5;color:var(--text-dim);text-align:center;white-space:nowrap;background-color:var(--surface-2);border:1px solid var(--card-bd);border-radius:.5rem}
.alert{position:relative;padding:1rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.75rem;font-size:.9rem}
.alert-success{color:#2fb344;background-color:rgba(47,179,68,.1);border-color:rgba(47,179,68,.2)}
.alert-danger{color:#d63939;background-color:rgba(214,57,57,.1);border-color:rgba(214,57,57,.2)}
.alert-warning{color:#f76707;background-color:rgba(247,103,7,.1);border-color:rgba(247,103,7,.2)}
.alert-info{color:var(--acc-face);background-color:color-mix(in srgb,var(--acc-face) 10%,var(--card-bg));border-color:color-mix(in srgb,var(--acc-face) 20%,var(--card-bd))}
.pagination{display:flex;padding-left:0;list-style:none;gap:4px}
.page-item .page-link{position:relative;display:flex;align-items:center;justify-content:center;padding:.375rem .75rem;font-size:.875rem;font-weight:600;color:var(--text-dim);text-decoration:none;background-color:var(--surface-2);border:1px solid var(--card-bd);border-radius:.5rem;transition:color .15s,background-color .15s}
.page-item .page-link:hover{color:var(--text);background-color:color-mix(in srgb,var(--acc-face) 16%,var(--surface-2));border-color:var(--acc-face)}
.page-item.active .page-link{color:var(--acc-text);background-color:var(--acc-face);border-color:var(--acc-border)}
.page-link .icon{width:1rem;height:1rem;stroke:currentColor}
.breadcrumb{display:flex;flex-wrap:wrap;padding:0;margin-bottom:1rem;list-style:none;font-size:.875rem}
.breadcrumb-item+.breadcrumb-item::before{float:left;padding-right:.5rem;padding-left:.5rem;color:var(--text-dim);content:"/"}
.breadcrumb-item a{color:var(--text-dim);text-decoration:none;transition:color .15s}
.breadcrumb-item a:hover{color:var(--acc-face)}
.breadcrumb-item.active{color:var(--text)}
.page-title{font-weight:900;font-size:1.4rem;margin:0;text-transform:uppercase}
.widget-title{font-weight:800;font-size:.95rem;text-transform:uppercase;letter-spacing:.5px;margin-bottom:1rem}
.widget-link{display:block;padding:.35rem 0;color:var(--text-dim);text-decoration:none;font-size:.875rem;transition:color .15s}
.widget-link:hover{color:var(--acc-face)}
.widget ul{list-style:none;padding:0;margin:0}
.widget li{margin-bottom:.25rem}
.copyright-text{padding:1.5rem 0;border-top:1px solid var(--card-bd);font-size:.8rem;color:var(--text-dim);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem}
.fs-100{font-size:1rem!important}
.fs-3{font-size:1.125rem!important}
.section{padding:2rem 0}
.home-section{padding-top:1.5rem}
.sidebar-link{display:flex;align-items:center;padding:.625rem 1.5rem;color:var(--text-dim);text-decoration:none;font-size:.875rem;font-weight:500;transition:background .15s,color .15s}
.sidebar-link:hover,.sidebar-link.active{background:var(--surface-2);color:var(--text)}
.auth-layout{min-height:100vh}
.auth-logo{max-height:48px;width:auto}
.empty{text-align:center;padding:4rem 0}
.ck-content{font-size:.9rem;line-height:1.7;color:var(--text-dim)}
.ck-content h1,.ck-content h2,.ck-content h3,.ck-content h4{color:var(--text);margin-top:1rem;margin-bottom:.5rem;font-weight:800}
.ck-content a{color:var(--acc-face)}
.ck-content img{max-width:100%;border-radius:.5rem}
a{color:var(--acc-face);text-decoration:none}
a:hover{color:color-mix(in srgb,var(--acc-face) 80%,#fff)}
.avatar{width:2rem;height:2rem;border-radius:.5rem;object-fit:cover;image-rendering:pixelated}
.avatar-xs{width:1.5rem;height:1.5rem}
.avatar-sm{width:2rem;height:2rem}
.avatar-xl{width:5rem;height:5rem}
.lazyload{opacity:0;transition:opacity .4s ease;animation:lazyRevealFallback 0s linear 2.5s forwards}
@keyframes lazyRevealFallback{to{opacity:1}}
.lazyload.loaded,.lazyload.loading,.lazyload.error,.lazyloaded{opacity:1!important;animation:none}
.select2-container{z-index:1060}
.role__default{display:inline-block;font-size:.68rem;font-weight:900;letter-spacing:.6px;text-transform:uppercase;color:var(--acc-text);background:var(--acc-face);padding:2px 8px;border-radius:6px}

/* ══════════════════════════════════════════════════════════════
   PHASE 1 — Shared inner-page foundation (breadcrumb, profile card,
   alerts, auth layout, error layout, empty states)
   ══════════════════════════════════════════════════════════════ */

/* Inner pages have no hero: clear the fixed floating header/nav */
.pop-page-wrapper > .section:first-child,
.pop-page-wrapper > .container:first-child,
.pop-page-wrapper > .container-xl:first-child,
.pop-page-wrapper > .container-tight:first-child{ padding-top:clamp(92px,10vw,124px); }
body[data-header="wide"] .pop-page-wrapper > .section:first-child,
body[data-header="wide"] .pop-page-wrapper > .container:first-child,
body[data-header="wide"] .pop-page-wrapper > .container-xl:first-child,
body[data-header="wide"] .pop-page-wrapper > .container-tight:first-child{ padding-top:clamp(120px,12vw,156px); }

/* Breadcrumb — pop redesign (accent home chip + chevrons + active underline) */
.pop-breadcrumb{ margin-bottom:22px; }
.pop-crumbs{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:9px; margin-bottom:26px; max-width:100%; }
.pop-crumbs__link{ display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:.82rem; letter-spacing:.2px; color:var(--text-dim); text-decoration:none; line-height:1; white-space:nowrap; transition:color .16s ease, transform .12s ease; }
.pop-crumbs__link svg{ width:15px; height:15px; fill:currentColor; flex:none; }
.pop-crumbs__link:not(:first-child):hover{ color:var(--text); }
/* Home = 3D accent chip */
.pop-crumbs__link:first-child{ width:36px; height:36px; justify-content:center; border-radius:11px; color:var(--acc-text);
  background:linear-gradient(180deg, color-mix(in srgb, var(--acc-face) 88%, #fff), var(--acc-face));
  box-shadow:0 3px 0 var(--acc-depth), inset 0 2px 0 var(--acc-rim); }
.pop-crumbs__link:first-child span{ display:none; }
.pop-crumbs__link:first-child svg{ width:18px; height:18px; }
.pop-crumbs__link:first-child:hover{ transform:translateY(-2px); color:var(--acc-text); }
.pop-crumbs__link:first-child:active{ transform:translateY(1px); box-shadow:0 1px 0 var(--acc-depth), inset 0 2px 0 var(--acc-rim); }
/* Active (last) crumb */
.pop-crumbs__link.is-active{ position:relative; color:var(--text); font-weight:800; cursor:default; padding-bottom:5px; }
.pop-crumbs__link.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2.5px; border-radius:3px; background:var(--acc-face); box-shadow:0 0 10px color-mix(in srgb, var(--acc-face) 55%, transparent); }
.pop-crumbs__sep{ width:15px; height:15px; fill:var(--text-dim); opacity:.4; flex:none; }
@media (max-width:520px){
  .pop-crumbs{ gap:7px; }
  .pop-crumbs__link{ font-size:.76rem; }
}

/* Sidebar profile card */
.pop-profile-card{ padding:0; overflow:hidden; }
.pop-profile-card__head{ padding:26px 18px 18px; text-align:center; background:linear-gradient(160deg, color-mix(in srgb, var(--acc-face) 20%, var(--surface-2)), var(--surface-2)); border-bottom:1px solid var(--card-bd); }
.pop-profile-card__avatar{ width:80px !important; height:80px !important; border-radius:14px; image-rendering:pixelated; display:block; margin:0 auto 13px; box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--acc-face), 0 10px 22px rgba(0,0,0,.45); }
.pop-profile-card__name{ margin:0 0 9px; font-size:1.18rem; font-weight:900; color:var(--text); line-height:1.15; word-break:break-word; }
.pop-profile-card__roles{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.pop-profile-card__body{ padding:16px 14px 18px; }
.pop-profile-card__section{ margin:16px 6px 9px; font-size:.7rem; font-weight:900; letter-spacing:.7px; text-transform:uppercase; color:var(--text-dim); }
.pop-profile-card__body > .pop-profile-card__section:first-child{ margin-top:2px; }

/* ── Profile main page — banner header + info tiles ── */
.pop-prof{ position:relative; background:var(--card-bg); border:1px solid var(--card-bd); border-radius:18px; overflow:visible; margin-bottom:1rem; box-shadow:0 5px 0 var(--card-depth), 0 14px 24px rgba(0,0,0,.4); }
.pop-prof__banner{ height:96px; border-radius:18px 18px 0 0; overflow:hidden; background:linear-gradient(120deg, color-mix(in srgb, var(--acc-face) 38%, var(--surface-2)), var(--surface-2) 72%); position:relative; }
.pop-prof__banner::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 18% -10%, color-mix(in srgb, var(--acc-face) 32%, transparent), transparent 58%); }
.pop-prof__head{ display:flex; align-items:flex-end; gap:18px; padding:0 24px 18px; margin-top:-46px; position:relative; flex-wrap:wrap; }
.pop-prof__avatar{ flex:none; display:flex; align-items:flex-end; min-height:118px; }
.pop-prof__avatar-img{ height:120px !important; width:auto !important; max-width:140px; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 12px 18px rgba(0,0,0,.6)); }
.pop-prof__id{ flex:1 1 auto; padding-bottom:3px; min-width:170px; }
.pop-prof__name{ margin:0; font-size:1.5rem; font-weight:900; line-height:1.1; }
.pop-prof__roles{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.pop-prof__edit{ --bh:38px; --fs:13px; flex:none; margin-bottom:4px; width:auto; }
.pop-prof__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:8px 24px 24px; }
.pop-prof__tile{ display:flex; align-items:center; gap:13px; padding:13px 15px; background:var(--surface-2); border:1px solid var(--card-bd); border-radius:14px; transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.pop-prof__tile:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--acc-face) 55%, var(--card-bd)); box-shadow:0 8px 18px rgba(0,0,0,.28); }
.pop-prof__tile-ic{ flex:none; width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:color-mix(in srgb, var(--acc-face) 16%, var(--surface-2)); color:var(--acc-face); }
.pop-prof__tile-ic i{ font-size:21px; line-height:1; }
.pop-prof__tile-txt{ display:flex; flex-direction:column; min-width:0; gap:1px; }
.pop-prof__tile-txt span{ font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--text-dim); }
.pop-prof__tile-txt b{ font-size:.97rem; font-weight:800; color:var(--text); word-break:break-word; line-height:1.25; }
.pop-prof__tile--accent{ background:linear-gradient(135deg, color-mix(in srgb, var(--acc-face) 16%, var(--surface-2)), var(--surface-2)); border-color:color-mix(in srgb, var(--acc-face) 40%, var(--card-bd)); }
.pop-prof__tile--accent .pop-prof__tile-ic{ background:var(--acc-face); color:var(--acc-text); }
.pop-prof__tile--accent .pop-prof__tile-txt b{ color:var(--acc-face); font-size:1.08rem; }
@media (max-width:560px){
  .pop-prof__grid{ grid-template-columns:minmax(0,1fr); }
  .pop-prof__head{ justify-content:center; text-align:center; }
  .pop-prof__id{ text-align:center; }
  .pop-prof__roles{ justify-content:center; }
  .pop-prof__edit{ margin:2px auto 0; }
}

/* Pop alert (icon + message) */
.pop-alert{ display:flex; align-items:flex-start; gap:12px; padding:14px 16px; margin-bottom:18px; border:1px solid var(--card-bd); border-radius:14px; background:var(--card-bg); color:var(--text); font-size:.93rem; font-weight:600; line-height:1.55; box-shadow:0 3px 0 var(--card-depth); }
.pop-alert svg{ width:22px; height:22px; flex:none; margin-top:1px; }
.pop-alert a{ font-weight:800; text-decoration:underline; }
.pop-alert.t-green{ border-color:rgba(47,179,68,.42); background:rgba(47,179,68,.12); box-shadow:0 3px 0 rgba(47,179,68,.22); }
.pop-alert.t-green svg{ fill:#2fd27a; }
.pop-alert.t-red{ border-color:rgba(214,57,57,.42); background:rgba(214,57,57,.12); box-shadow:0 3px 0 rgba(214,57,57,.22); }
.pop-alert.t-red svg{ fill:#ff5f66; }
.pop-alert.t-accent{ border-color:color-mix(in srgb, var(--acc-face) 44%, transparent); background:color-mix(in srgb, var(--acc-face) 13%, var(--card-bg)); box-shadow:0 3px 0 color-mix(in srgb, var(--acc-face) 22%, transparent); }
.pop-alert.t-accent svg{ fill:var(--acc-face); }
.pop-alert.t-blue{ border-color:rgba(70,151,229,.42); background:rgba(70,151,229,.12); box-shadow:0 3px 0 rgba(70,151,229,.22); }
.pop-alert.t-blue svg{ fill:#66b0ff; }

/* ── Auth layout — split screen (form left, sliding wallpaper right) ── */
.pop-auth-body{ min-height:100vh; margin:0; background:var(--bg); overflow-x:hidden; }
.pop-auth-split{ display:flex; min-height:100vh; }
.pop-auth-left{ position:relative; flex:1 1 50%; display:flex; align-items:center; justify-content:center; padding:64px 24px 48px; min-height:100vh; animation:popAuthLeftIn .7s ease .1s both; }
@keyframes popAuthLeftIn{ from{ opacity:0; } to{ opacity:1; } }
.pop-auth-back{ position:absolute; top:26px; left:28px; z-index:5; display:inline-flex; align-items:center; gap:8px; padding:9px 16px 9px 12px; border-radius:12px; background:var(--card-bg); border:1px solid var(--card-bd); color:var(--text-dim); font-weight:800; font-size:.8rem; text-transform:uppercase; letter-spacing:.4px; box-shadow:0 3px 0 var(--card-depth); transition:transform .15s ease, color .15s ease, box-shadow .15s ease; }
.pop-auth-back svg{ width:18px; height:18px; transition:transform .15s ease; }
.pop-auth-back:hover{ color:var(--acc-face); transform:translateY(-1px); }
.pop-auth-back:hover svg{ transform:translateX(-3px); }
.pop-auth-back:active{ transform:translateY(1px); box-shadow:0 1px 0 var(--card-depth); }
.pop-auth-visual{ flex:1 1 50%; position:relative; background-color:#0a0c10; background-size:cover; background-position:center; will-change:transform; animation:popAuthVisualIn 1s cubic-bezier(.7,0,.18,1) both; }
.pop-auth-visual__tint{ position:absolute; inset:0; background:linear-gradient(120deg, rgba(9,11,15,.6) 0%, rgba(9,11,15,.12) 55%, rgba(9,11,15,.05) 100%); }
@keyframes popAuthVisualIn{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }

/* ── Auth success overlay (wallpaper slides over + gif) ── */
.pop-auth-success{ position:fixed; inset:0; z-index:2000; background-color:#0a0c10; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; transform:translateX(100%); visibility:hidden; }
.pop-auth-success.show{ visibility:visible; animation:popAuthCover .85s cubic-bezier(.7,0,.18,1) forwards; }
@keyframes popAuthCover{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }
.pop-auth-success__tint{ position:absolute; inset:0; background:linear-gradient(120deg, rgba(9,11,15,.74), rgba(9,11,15,.48)); }
.pop-auth-success__inner{ position:relative; z-index:1; text-align:center; opacity:0; }
.pop-auth-success.show .pop-auth-success__inner{ animation:popAuthSuccessPop .6s cubic-bezier(.18,1.3,.4,1) .6s forwards; }
@keyframes popAuthSuccessPop{ from{ opacity:0; transform:scale(.65); } to{ opacity:1; transform:scale(1); } }
.pop-auth-success__text{ font-size:clamp(1.6rem,4vw,2.5rem); font-weight:900; color:#fff; letter-spacing:.5px; text-shadow:0 4px 22px rgba(0,0,0,.65); }

/* Animated SVG success checkmark */
.pop-check-svg{ width:min(190px,52vw); height:auto; display:block; margin:0 auto 26px; }
.pop-check-svg__circle{ fill:none; stroke:var(--acc-face); stroke-width:6; stroke-linecap:round; stroke-dasharray:340; stroke-dashoffset:340; transform-origin:center; transform:rotate(-90deg); }
.pop-check-svg__check{ fill:none; stroke:var(--acc-face); stroke-width:9; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:90; stroke-dashoffset:90; }
.pop-auth-success.show .pop-check-svg__circle{ animation:popCheckDrawCircle .7s cubic-bezier(.65,0,.35,1) .75s forwards; }
.pop-auth-success.show .pop-check-svg__check{ animation:popCheckDrawTick .45s cubic-bezier(.65,0,.35,1) 1.35s forwards; }
@keyframes popCheckDrawCircle{ to{ stroke-dashoffset:0; } }
@keyframes popCheckDrawTick{ to{ stroke-dashoffset:0; } }

.pop-auth-container{ width:100%; max-width:452px; }
.pop-auth-logo{ text-align:center; margin-bottom:26px; }
.pop-auth-logo img{ max-height:66px; width:auto; filter:drop-shadow(0 10px 24px rgba(0,0,0,.55)); }
.pop-auth-card{ background:var(--card-bg); border:1px solid var(--card-bd); border-radius:22px; padding:32px 30px; box-shadow:0 8px 0 var(--card-depth), 0 34px 66px rgba(0,0,0,.6); }
.pop-auth-card h1,.pop-auth-card .auth-title{ margin:0 0 6px; font-size:1.55rem; font-weight:900; color:var(--text); line-height:1.15; }
.pop-auth-card .auth-subtitle,.pop-auth-card .text-muted{ margin:0 0 22px; font-size:.92rem; color:var(--text-dim); }
.pop-auth-footer{ text-align:center; margin-top:24px; font-size:.82rem; color:var(--text-dim); }
.pop-auth-footer a{ color:var(--text-dim); font-weight:700; }
.pop-auth-footer a:hover{ color:var(--acc-face); }

/* ── Error layout / empty state ── */
.pop-auth-overlay{ position:fixed; inset:0; z-index:0; background:linear-gradient(180deg, rgba(9,11,15,.82), rgba(9,11,15,.95)); }
.pop-error-body{ min-height:100vh; margin:0; background-color:var(--bg); background-size:cover; background-position:center; background-attachment:fixed; }
.pop-error-page{ position:relative; z-index:1; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:44px 20px; text-align:center; }
.pop-error-container{ width:100%; max-width:580px; }
.pop-error-actions{ margin-top:26px; display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.empty,.empty-img{ text-align:center; }
.empty-img{ margin:0 auto 6px; max-width:340px; }
.empty-img svg,.empty-img .img{ width:100%; height:auto; }
.empty-title{ font-size:clamp(1.5rem,4.5vw,2.1rem); font-weight:900; color:var(--text); margin:0 0 8px; }
.empty-subtitle{ color:var(--text-dim); font-size:1rem; margin:0 auto; max-width:440px; line-height:1.6; }
.empty-action{ margin-top:22px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }

/* Section title helper for inner pages */
.pop-page-head{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:22px; }
.pop-page-head__titles h1,.pop-page-head__titles .page-title{ margin:0; }
.pop-page-head__titles p{ margin:6px 0 0; color:var(--text-dim); font-size:.95rem; font-weight:500; }

/* ── Auth form internals (Phase 2) ── */
.pop-auth-badge{ width:66px; height:66px; margin:0 auto 18px; border-radius:19px; display:grid; place-items:center; background:var(--acc-face); color:var(--acc-text); border:3px solid var(--acc-border); box-shadow:0 6px 0 var(--acc-depth), 0 14px 26px rgba(0,0,0,.45); }
.pop-auth-badge svg{ width:32px; height:32px; fill:currentColor; }
.pop-auth-badge i{ font-size:30px; }
.pop-auth-title{ text-align:center; margin:0 0 6px; font-size:1.6rem; font-weight:900; color:var(--text); line-height:1.15; }
.pop-auth-subtitle{ text-align:center; margin:0 0 26px; color:var(--text-dim); font-size:.94rem; line-height:1.55; }
.pop-form-group{ margin-bottom:16px; }
.pop-form-group .form-label{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; font-weight:800; font-size:.78rem; text-transform:uppercase; letter-spacing:.5px; color:var(--text-dim); }
.pop-form-group .form-label a{ font-weight:700; text-transform:none; letter-spacing:0; font-size:.82rem; color:var(--acc-face); }
.pop-auth-card .form-control{ padding:12px 14px; font-size:.95rem; border-radius:12px; }
.pop-auth-card .input-group .form-control{ border-top-right-radius:0; border-bottom-right-radius:0; }
.pop-auth-card .input-group-text{ border-radius:0 12px 12px 0; border-left:0; padding:0 12px; }
.pop-auth-card .input-group-text a{ color:var(--text-dim); display:inline-flex; align-items:center; font-size:1.15rem; transition:color .15s; }
.pop-auth-card .input-group-text a:hover{ color:var(--acc-face); }
.pop-check{ display:flex; align-items:center; gap:9px; cursor:pointer; font-size:.9rem; color:var(--text-dim); font-weight:600; user-select:none; }
.pop-check input{ width:18px; height:18px; accent-color:var(--acc-face); cursor:pointer; flex:none; }
.pop-auth-submit{ margin-top:22px; }
.pop-divider{ display:flex; align-items:center; text-align:center; gap:14px; margin:22px 0; color:var(--text-dim); font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.6px; }
.pop-divider::before,.pop-divider::after{ content:""; flex:1; height:1px; background:var(--card-bd); }
.pop-auth-social{ display:flex; flex-direction:column; gap:10px; }
.pop-auth-social .btn3d__face img{ width:20px; height:20px; border-radius:4px; }
.pop-auth-switch{ text-align:center; margin-top:22px; padding-top:20px; border-top:1px solid var(--card-bd); color:var(--text-dim); font-size:.92rem; }
.pop-auth-switch a{ font-weight:800; color:var(--acc-face); }
.pop-auth-switch a:hover{ color:color-mix(in srgb, var(--acc-face) 80%, #fff); }
.pop-auth-note{ text-align:center; font-size:.9rem; line-height:1.6; color:var(--text-dim); margin:0 0 18px; }
.pop-auth-note strong{ color:var(--acc-face); font-weight:800; word-break:break-all; }
.pop-auth-key{ display:inline-block; padding:3px 10px; border-radius:8px; background:var(--surface-2); border:1px solid var(--card-bd); font-family:ui-monospace,Menlo,Consolas,monospace; color:var(--acc-face); font-weight:800; letter-spacing:.5px; }
.pop-tfa-qr{ display:inline-block; padding:12px; background:#fff; border-radius:16px; box-shadow:0 8px 22px rgba(0,0,0,.45); }
.pop-tfa-qr img{ display:block; width:186px; height:186px; }
.pop-auth-actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.pop-auth-actions > *{ flex:1 1 0; min-width:130px; }
.pop-narrow{ max-width:560px; margin:0 auto; }
.pop-narrow .card3d{ padding:36px 32px; }
.pop-narrow .pop-auth-badge{ margin-top:0; }
.pop-resend{ margin-top:10px; display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; color:var(--text-dim); font-size:.92rem; }
.pop-resend .btn-link{ color:var(--acc-face); font-weight:800; padding:0; }
.pop-resend .btn-link:hover{ color:color-mix(in srgb, var(--acc-face) 80%, #fff); }

@media (max-width:900px){
  .pop-auth-split{ display:block; }
  .pop-auth-visual{ display:none; }
  .pop-auth-left{ min-height:100vh; padding:40px 20px; }
}
@media (prefers-reduced-motion: reduce){
  .pop-auth-left,.pop-auth-visual{ animation:none; }
  .pop-auth-visual{ transform:none; }
  .pop-auth-success.show{ animation:none; transform:translateX(0); }
  .pop-auth-success.show .pop-auth-success__inner{ animation:none; opacity:1; transform:none; }
  .pop-auth-success.show .pop-check-svg__circle,.pop-auth-success.show .pop-check-svg__check{ animation:none; stroke-dashoffset:0; }
}

/* ══════════════════════════════════════════════════════════════
   PHASE 3 — Store + Credits (grid, buttons, product cards, badges,
   progress, spinner, form-check). Styles the LeaderOS store/credit
   markup in the pop aesthetic without touching the templates.
   ══════════════════════════════════════════════════════════════ */

/* Alpine cloak (cart page) */
[x-cloak]{ display:none !important; }

/* Extra grid columns used by store/credits pages */
.col-auto{ position:relative; flex:0 0 auto; width:auto; max-width:100%; padding-right:.75rem; padding-left:.75rem; }
.col{ position:relative; flex:1 0 0%; max-width:100%; padding-right:.75rem; padding-left:.75rem; }
.col-sm-6,.col-sm-12,.col-md-1,.col-md-3,.col-md-6,.col-md-9,.col-md-10,.col-md-11,.col-lg-3,.col-lg-4,.col-lg-6{ position:relative; width:100%; padding-right:.75rem; padding-left:.75rem; }
.row-gap-3{ row-gap:1rem; }
@media(min-width:576px){
  .col-sm-6{ flex:0 0 50%; max-width:50%; }
  .col-sm-12{ flex:0 0 100%; max-width:100%; }
}
@media(min-width:768px){
  .col-md-1{ flex:0 0 8.333%; max-width:8.333%; }
  .col-md-3{ flex:0 0 25%; max-width:25%; }
  .col-md-6{ flex:0 0 50%; max-width:50%; }
  .col-md-9{ flex:0 0 75%; max-width:75%; }
  .col-md-10{ flex:0 0 83.333%; max-width:83.333%; }
  .col-md-11{ flex:0 0 91.666%; max-width:91.666%; }
}
@media(min-width:992px){
  .col-lg-3{ flex:0 0 25%; max-width:25%; }
  .col-lg-4{ flex:0 0 33.333%; max-width:33.333%; }
  .col-lg-6{ flex:0 0 50%; max-width:50%; }
}

/* Buttons — pop 3D faces (match btn3d language, high-contrast, readable on hover) */
.btn-primary{ color:var(--acc-text); background:linear-gradient(180deg, color-mix(in srgb, var(--acc-face) 86%, #fff), var(--acc-face)); border-color:var(--acc-border); font-weight:800; text-shadow:var(--acc-edge); }
.btn-success{ color:#053c1c; background:linear-gradient(180deg,#4dee88,#2ee06d); border-color:#0a5f2c; font-weight:800; }
.btn-danger{ color:#fff; background:linear-gradient(180deg,#ff6b6b,var(--rd-face)); border-color:var(--rd-border); font-weight:800; text-shadow:0 1px 0 rgba(0,0,0,.25); }
.btn-info{ color:#fff; background:linear-gradient(180deg, color-mix(in srgb, var(--bl-face) 82%, #fff), var(--bl-face)); border-color:var(--bl-border); font-weight:800; text-shadow:0 1px 0 rgba(0,0,0,.25); }
.btn-warning{ color:#3a2600; background:linear-gradient(180deg,#f2a648,#e8912a); border-color:#8a4e00; font-weight:800; }
.btn-secondary{ color:var(--text); background:var(--surface-2); border-color:var(--card-bd); font-weight:700; }
.btn-dark{ color:#fff; background-color:#12141a; border-color:#000; font-weight:700; }
.btn-secondary:hover{ background:color-mix(in srgb,var(--acc-face) 16%,var(--surface-2)); border-color:var(--acc-face); color:var(--text); }
/* Hover keeps the SAME face/text colour — just brightens & lifts, so labels/icons stay readable */
.btn-primary:hover,.btn-success:hover,.btn-danger:hover,.btn-info:hover,.btn-warning:hover,.btn-dark:hover{
  filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.32); }
.btn-primary:hover{ color:var(--acc-text); }
.btn-success:hover{ color:#053c1c; }
.btn-danger:hover,.btn-info:hover,.btn-dark:hover{ color:#fff; }
.btn-warning:hover{ color:#3a2600; }
.btn-primary:active,.btn-success:active,.btn-danger:active,.btn-info:active,.btn-warning:active,.btn-dark:active{
  filter:brightness(.97); transform:translateY(1px); box-shadow:0 1px 4px rgba(0,0,0,.3); }
.btn.disabled,.btn:disabled{ opacity:.55; pointer-events:none; cursor:default; }
.btn-sm{ padding:.3rem .65rem; font-size:.78rem; border-radius:.5rem; font-weight:800; }
.btn-lg{ padding:.65rem 1.35rem; font-size:1rem; border-radius:.7rem; }
.btn-sm.btn-icon{ width:2rem; height:2rem; }
.btn-icon{ padding:0; }
.btn-icon .icon,.btn-icon i,.btn-icon .fa,.btn-icon svg{ line-height:1; color:inherit; }
/* form-submit-with-loader swaps an icon button's content for the "Loading..." text;
   let icon buttons grow to fit that text instead of overflowing / breaking the table */
.btn-icon:not(:has(i)):not(:has(svg)):not(:has(.fa)):not(:has(.icon)){ width:auto; min-width:2rem; padding-inline:.7rem; white-space:nowrap; gap:.4rem; }
/* Table action cells: keep buttons on one line with a small gap */
.table td.text-end{ white-space:nowrap; }
.table td.text-end form + .btn,
.table td.text-end .btn + .btn{ margin-left:.35rem; }

/* Badges — proper 3D pills with readable contrast (overrides text-white where it would break) */
/* Clean flat status pills (like the reference) — solid colour, high-contrast text, no gloss */
.badge{ display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:.42em .85em; font-size:.72rem; font-weight:800; line-height:1; letter-spacing:.2px; border-radius:999px; white-space:nowrap; text-shadow:none; box-shadow:none; }
.badge.bg-primary{ background:var(--acc-face)!important; color:var(--acc-text)!important; }
.badge.bg-success,.badge.bg-success.text-white{ background:#1fae5f!important; color:#fff!important; }
.badge.bg-danger,.badge.bg-danger.text-white{ background:var(--rd-face)!important; color:#fff!important; }
.badge.bg-warning,.badge.bg-warning.text-white{ background:#e8a52a!important; color:#3a2600!important; }
.badge.bg-info,.badge.bg-info.text-white{ background:var(--bl-face)!important; color:#fff!important; }
.badge.bg-secondary{ background:var(--surface-2)!important; color:var(--text)!important; box-shadow:inset 0 0 0 1px var(--card-bd); }

/* Contextual backgrounds / text */
.bg-primary{ background-color:var(--acc-face)!important; }
.bg-success{ background-color:#1ff074!important; color:#054a22; }
.bg-danger{ background-color:var(--rd-face)!important; }
.bg-warning{ background-color:#e8912a!important; }
.bg-info{ background-color:var(--bl-face)!important; }
.bg-secondary{ background-color:var(--surface-2)!important; }
.text-white{ color:#fff!important; }
.text-body{ color:var(--text)!important; }
.text-heading{ color:var(--text)!important; }
.text-decoration-line-through{ text-decoration:line-through!important; }
.fw-semibold{ font-weight:600!important; }
.opacity-75{ opacity:.75!important; }
.h-auto{ height:auto!important; }
.position-relative{ position:relative!important; }

/* Headings utility classes */
.h1{ font-size:2rem; } .h2{ font-size:1.5rem; } .h3{ font-size:1.3rem; }
.h4{ font-size:1.15rem; } .h5{ font-size:1rem; } .h6{ font-size:.9rem; }
.h1,.h2,.h3,.h4,.h5,.h6{ color:var(--text); font-weight:800; line-height:1.25; margin:0 0 .5rem; }
hr{ border:0; height:1px; background:var(--card-bd); margin:1.25rem 0; opacity:1; }

/* Table header polish */
.table thead th{ font-size:.72rem; text-transform:uppercase; letter-spacing:.4px; color:var(--text-dim); font-weight:800; text-align:left; }
.table td,.table th{ vertical-align:middle; text-align:left; }

/* Product cards */
.card-product{ position:relative; display:flex; flex-direction:column; height:100%; overflow:hidden; }
.card-product .card-body{ display:flex; flex-direction:column; flex:1 1 auto; }
.card-img-top{ width:100%; border-top-left-radius:.75rem; border-top-right-radius:.75rem; }
.card-product .card-img-top{ padding:20px 20px 0; object-fit:contain; max-height:210px; background:transparent; }
.store-card-img{ margin:0 auto; display:block; }
.card-product .price{ font-size:1.05rem; }
.price{ color:var(--acc-face); font-weight:900; font-size:1.1rem; }
.old-price{ color:var(--text-dim); text-decoration:line-through; font-size:.85rem; opacity:.75; margin-right:.15rem; }
.fs-lg{ font-size:1.05rem; }

/* Stock / discount badges over product card */
.stock{ position:absolute; top:12px; left:12px; z-index:3; padding:4px 10px; border-radius:8px; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.4px; box-shadow:0 3px 8px rgba(0,0,0,.35); }
.have-stock{ background:#e8912a; color:#3a2600; }
.stock-out{ background:var(--rd-face); color:#fff; }
.stock.bg-success{ color:#054a22; }
.discount{ position:absolute; top:12px; right:12px; z-index:3; background:var(--acc-face); color:var(--acc-text); font-weight:900; padding:4px 10px; border-radius:8px; font-size:.8rem; box-shadow:0 3px 0 var(--acc-depth); }
.discount-sm{ font-size:.7rem; padding:3px 8px; box-shadow:0 2px 0 var(--acc-depth); }

/* Whole-card click target */
.stretched-link::after{ content:""; position:absolute; inset:0; z-index:2; }

/* Progress bar (community goal) */
.progress{ display:flex; height:1rem; overflow:hidden; background:var(--surface-2); border-radius:10px; border:1px solid var(--card-bd); }
.progress-bar{ display:flex; align-items:center; justify-content:center; color:#054a22; background:#1ff074; font-weight:800; font-size:.78rem; transition:width .6s ease; }

/* Spinner */
.spinner-border{ display:inline-block; width:2rem; height:2rem; vertical-align:-.125em; border:.22em solid currentColor; border-right-color:transparent; border-radius:50%; color:var(--acc-face); animation:popSpin .75s linear infinite; }
.spinner-border-sm{ width:1rem; height:1rem; border-width:.18em; }
@keyframes popSpin{ to{ transform:rotate(360deg); } }

/* Checkbox / radio */
.form-check{ display:flex; align-items:flex-start; gap:8px; margin-bottom:.25rem; }
.form-check-input{ flex:none; width:18px; height:18px; margin-top:2px; accent-color:var(--acc-face); cursor:pointer; }
.form-check-label{ font-size:.9rem; color:var(--text-dim); cursor:pointer; }
.form-check-label a{ color:var(--acc-face); font-weight:700; }
.form-control-sm{ padding:.3rem .5rem; font-size:.8rem; border-radius:.4rem; }

/* Input group append (cart coupon) */
.input-group-append{ display:flex; }
.input-group>.form-control:not(:last-child),.input-group-append:not(:last-child) .btn{ border-top-right-radius:0; border-bottom-right-radius:0; }
.input-group-append .btn{ border-top-left-radius:0; border-bottom-left-radius:0; }

/* Icon sizing helpers */
.icon-sm{ font-size:.9rem; }
.featuredProductImage{ display:block; margin-bottom:.5rem; }

/* ── Phase 3 polish — pop feel for store/credits (CSS-only) ── */

/* Bigger inner-page hero title */
.pop-page-head .page-title{ font-size:clamp(1.7rem,3.2vw,2.3rem); letter-spacing:.5px; }
.pop-page-head + .row, .pop-page-head + .pop-store-strip{ margin-top:4px; }
.store-section, .credit-section, .page-section{ position:relative; z-index:1; }

/* Solid buttons get a tactile 3D depth + lift (matches btn3d language) */
.btn-primary,.btn-success,.btn-danger,.btn-info,.btn-warning,.btn-secondary{
  transition:background .15s,border-color .15s,color .15s,box-shadow .12s,filter .15s,transform .1s; }
.btn-primary{ box-shadow:inset 0 2px 0 var(--acc-rim), 0 3px 0 var(--acc-depth); }
.btn-success{ box-shadow:inset 0 2px 0 #c6ffd9, 0 3px 0 #0a5f2c; }
.btn-danger{ box-shadow:inset 0 2px 0 rgba(255,255,255,.32), 0 3px 0 var(--rd-border); }
.btn-info{ box-shadow:inset 0 2px 0 rgba(255,255,255,.3), 0 3px 0 var(--bl-border); }
.btn-warning{ box-shadow:inset 0 2px 0 rgba(255,255,255,.35), 0 3px 0 #8a4e00; }
.btn-secondary{ box-shadow:0 3px 0 #0d0f14; }
.btn-primary:not(.disabled):hover,.btn-success:not(.disabled):hover,.btn-danger:not(.disabled):hover,.btn-info:not(.disabled):hover,.btn-warning:not(.disabled):hover,.btn-secondary:not(.disabled):hover{ transform:translateY(-1px); filter:brightness(1.05); }
.btn-primary:not(.disabled):active,.btn-success:not(.disabled):active,.btn-danger:not(.disabled):active,.btn-info:not(.disabled):active,.btn-warning:not(.disabled):active,.btn-secondary:not(.disabled):active{ transform:translateY(2px); box-shadow:inset 0 2px 0 rgba(255,255,255,.2); }

/* Category tiles (store index / subcategories) */
a.card{ overflow:hidden; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
a.card .card-img-top{ aspect-ratio:16/10; width:100%; object-fit:cover; border-radius:.75rem .75rem 0 0; }
a.card .card-body{ text-align:center; padding:1rem .9rem; }
a.card .card-title{ margin:0; font-weight:900; text-transform:uppercase; letter-spacing:.4px; font-size:1.02rem; color:var(--text); transition:color .15s ease; line-height:1.2; }
a.card:hover{ transform:translateY(-5px); border-color:var(--acc-face); box-shadow:0 9px 0 var(--card-depth),0 22px 30px rgba(0,0,0,.5); }
a.card:hover .card-title{ color:var(--acc-face); }

/* Blog / news cards — anchor-wrapped image sizing (fixes broken huge related-post images) */
a.card-img-top{ display:block; overflow:hidden; border-radius:.75rem .75rem 0 0; }
a.card-img-top > img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; transition:transform .3s ease; }
.card-hover:hover a.card-img-top > img{ transform:scale(1.05); }
.news-section article.card{ height:100%; overflow:hidden; }
.news-section .card-body .fs-sm a{ color:var(--acc-face); font-weight:800; text-decoration:none; }
.news-section .card-body h2.h3{ font-size:1rem; line-height:1.35; margin:.4rem 0 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.news-section .card-body h2.h3 a{ color:var(--text); text-decoration:none; transition:color .15s ease; }
.news-section article.card:hover h2.h3 a{ color:var(--acc-face); }

/* Product card — cleaner title + price row */
.card-product h3{ color:var(--text); line-height:1.3; min-height:2.6em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-product .card-body > span:first-of-type{ display:block; margin-bottom:1rem; }
.card-product .mt-auto{ margin-top:auto; }

/* Order summary rows spacing */
#shoppingCartSummary .row,.credit-section .card-body form .row,.page-section .card-body form .row{ padding-top:.35rem; padding-bottom:.35rem; align-items:center; }
.card-header .card-title{ text-transform:uppercase; letter-spacing:.4px; }

/* Tier comparison table */
.vip-table .table{ margin-bottom:0; }
.vip-table thead th{ border-bottom:1px solid var(--card-bd); vertical-align:bottom; }
.vip-table .store-card-text .h3{ text-transform:uppercase; letter-spacing:.3px; }
.table-header{ font-weight:900 !important; text-transform:uppercase; letter-spacing:.5px; color:var(--text) !important; background:var(--surface-2) !important; }
[data-bs-theme=dark] .table-header{ background:var(--surface-2) !important; }

/* Info pills on product detail (duration / discount / stock) */
.page-section .rounded.fw-semibold,.credit-section .rounded.fw-semibold{ font-size:.74rem; text-transform:uppercase; letter-spacing:.4px; }

/* Featured products image */
.featuredProductImage{ image-rendering:auto; }

/* ── Missing bootstrap/tabler utilities used by store/credit/account markup ── */
.mb-1{ margin-bottom:.25rem!important; }
.mb-5{ margin-bottom:3rem!important; }
.mt-4{ margin-top:1.5rem!important; }
.mt-5{ margin-top:3rem!important; }
.mt-auto{ margin-top:auto!important; }
.mx-auto{ margin-left:auto!important; margin-right:auto!important; }
.ms-auto{ margin-left:auto!important; }
.me-auto{ margin-right:auto!important; }
.my-2{ margin-top:.5rem!important; margin-bottom:.5rem!important; }
.my-3{ margin-top:1rem!important; margin-bottom:1rem!important; }
.mx-3{ margin-left:1rem!important; margin-right:1rem!important; }
.pt-2{ padding-top:.5rem!important; }
.pt-4{ padding-top:1.5rem!important; }
.pb-3{ padding-bottom:1rem!important; }
.pb-4{ padding-bottom:1.5rem!important; }
.px-2{ padding-left:.5rem!important; padding-right:.5rem!important; }
.py-1{ padding-top:.25rem!important; padding-bottom:.25rem!important; }
.py-6{ padding-top:4rem!important; padding-bottom:4rem!important; }
.p-1{ padding:.25rem!important; }
.p-2{ padding:.5rem!important; }
.p-3{ padding:1rem!important; }
.g-3{ gap:1rem!important; }
.gap-4{ gap:1.5rem!important; }
.text-start{ text-align:left!important; }
.justify-content-end{ justify-content:flex-end!important; }
.justify-content-start{ justify-content:flex-start!important; }
.align-items-start{ align-items:flex-start!important; }
.align-items-end{ align-items:flex-end!important; }
.flex-wrap{ flex-wrap:wrap!important; }
.flex-fill{ flex:1 1 auto!important; }
.flex-grow-1{ flex-grow:1!important; }
.w-auto{ width:auto!important; }
.h-100{ height:100%!important; }
.fw-normal{ font-weight:400!important; }
.rounded-circle{ border-radius:50%!important; }
.border-0{ border:0!important; }
.text-decoration-none{ text-decoration:none!important; }

/* Table cell alignment (align-safe, per project convention) */
.table th.text-center,.table td.text-center{ text-align:center; }
.table th.text-start,.table td.text-start{ text-align:left; }
.table th.text-end,.table td.text-end{ text-align:right; }
.table td.text-start,.table th.text-start{ text-align:left; }

/* Tier comparison store cards (tiers.php) */
.store-card-img{ margin:0 auto; display:block; max-width:150px; height:auto; }
.store-card-text{ text-align:center; }
.store-card-text .h3,.store-card-text .price,.store-card-text .old-price{ display:inline-block; }
.store-card-button{ margin-top:.85rem; display:flex; flex-direction:column; align-items:center; gap:.35rem; }
.store-card-button .btn{ min-width:130px; }
.card-product.text-body{ background:transparent; border:0; box-shadow:none; margin:0; padding:12px 6px 16px; }
.vip-table td,.vip-table th{ white-space:nowrap; }
tr.sep td{ padding-top:.75rem; padding-bottom:.75rem; }

/* ══════════════════════════════════════════════════════════════
   STORE — redesigned category tiles + product cards + sidebar
   ══════════════════════════════════════════════════════════════ */

/* Two-column store layout: compact category sidebar + main content */
.pop-store{ display:grid; grid-template-columns:248px minmax(0,1fr); gap:26px; align-items:start; }
.pop-store__main{ min-width:0; }
.pop-store__aside{ position:sticky; top:96px; }
body[data-header="wide"] .pop-store__aside{ top:124px; }

.pop-catnav__brand{ display:flex; align-items:center; justify-content:center; margin-bottom:14px; padding:16px 14px; background:var(--card-bg); border:1px solid var(--card-bd); border-radius:16px; box-shadow:0 5px 0 var(--card-depth), 0 14px 20px rgba(0,0,0,.4); transition:transform .16s ease, border-color .16s ease; }
.pop-catnav__brand:hover{ transform:translateY(-3px); border-color:var(--acc-face);
  box-shadow:0 0 0 1px var(--acc-face), 0 10px 30px color-mix(in srgb, var(--acc-face) 20%, transparent), 0 18px 32px rgba(0,0,0,.5); }
.pop-catnav__brand img{ max-width:100%; max-height:60px; width:auto; height:auto; filter:drop-shadow(0 6px 12px rgba(0,0,0,.45)); }
.pop-catnav{ background:var(--card-bg); border:1px solid var(--card-bd); border-radius:16px; padding:12px; box-shadow:0 5px 0 var(--card-depth), 0 14px 20px rgba(0,0,0,.4); }
.pop-catnav__title{ display:flex; align-items:center; gap:8px; margin:6px 8px 12px; font-size:.72rem; font-weight:900; letter-spacing:.7px; text-transform:uppercase; color:var(--text-dim); }
.pop-catnav__title svg{ width:16px; height:16px; fill:var(--acc-face); }
.pop-catnav__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; }
.pop-catnav__link{ position:relative; display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:11px; color:var(--text-dim); font-weight:700; font-size:.9rem; text-decoration:none; overflow:hidden; transition:background .16s ease, color .16s ease, padding .16s ease; }
.pop-catnav__link::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:0; background:var(--acc-face); border-radius:0 3px 3px 0; transition:height .18s ease; }
.pop-catnav__ic{ width:30px; height:30px; flex:none; border-radius:8px; object-fit:cover; background:var(--surface-2); image-rendering:auto; }
.pop-catnav__link span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pop-catnav__link:hover{ background:color-mix(in srgb, var(--acc-face) 14%, var(--surface-2)); color:var(--text); padding-left:16px; }
.pop-catnav__link:hover::before{ height:56%; }
.pop-catnav__link.is-active{ background:color-mix(in srgb, var(--acc-face) 16%, var(--surface-2)); color:var(--text); }
.pop-catnav__link.is-active::before{ height:70%; }

/* Category tile card (image banner + accent title bar) — 3 per row, big */
.pop-cats{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; }
.pop-cat{ display:block; background:var(--card-bg); border:1px solid var(--card-bd); border-radius:18px; padding:14px; overflow:hidden; text-decoration:none;
  box-shadow:0 4px 0 var(--card-depth), 0 12px 22px rgba(0,0,0,.4); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.pop-cat:hover{ transform:translateY(-3px); border-color:var(--acc-face);
  box-shadow:0 0 0 1px var(--acc-face), 0 10px 30px color-mix(in srgb, var(--acc-face) 20%, transparent), 0 18px 32px rgba(0,0,0,.5); }
.pop-cat__media{ position:relative; border-radius:12px; overflow:hidden; aspect-ratio:16/9; background:linear-gradient(135deg,#2a3350,#171b28); }
.pop-cat__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.pop-cat:hover .pop-cat__media img{ transform:scale(1.05); }
.pop-cat__bar{ display:flex; align-items:center; gap:12px; margin-top:12px; padding:12px 12px 12px 16px; border-radius:12px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--acc-face) 82%, #fff), var(--acc-face)); box-shadow:inset 0 4px 0 var(--acc-rim), 0 3px 0 var(--acc-depth); }
.pop-cat__title{ flex:1; min-width:0; font-weight:900; font-size:1rem; text-transform:uppercase; letter-spacing:.4px; color:var(--acc-text); text-shadow:var(--acc-edge); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pop-cat__go{ flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:rgba(0,0,0,.16); color:var(--acc-text); transition:transform .16s ease, background .16s ease; }
.pop-cat__go svg{ width:16px; height:16px; fill:currentColor; }
.pop-cat:hover .pop-cat__go{ background:rgba(0,0,0,.3); transform:translateX(3px); }

/* Product card — rectangular, fixed layout, corner badges */
.pop-prods{ display:grid; grid-template-columns:repeat(auto-fill, minmax(224px,1fr)); gap:22px; }
.pop-prod{ position:relative; display:flex; flex-direction:column; background:var(--card-bg); border:1px solid var(--card-bd); border-radius:16px; overflow:hidden; text-align:center;
  box-shadow:0 4px 0 var(--card-depth), 0 12px 22px rgba(0,0,0,.4); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.pop-prod:hover{ transform:translateY(-3px); border-color:var(--acc-face);
  box-shadow:0 0 0 1px var(--acc-face), 0 10px 30px color-mix(in srgb, var(--acc-face) 20%, transparent), 0 18px 32px rgba(0,0,0,.5); }
/* Media — FIXED height so every card lines up regardless of image/discount */
.pop-prod__media{ position:relative; display:grid; place-items:center; height:186px; padding:26px 18px 8px; }
.pop-prod__media img{ width:auto; max-width:80%; max-height:124px; object-fit:contain; image-rendering:auto; filter:drop-shadow(0 10px 14px rgba(0,0,0,.45)); transition:transform .3s cubic-bezier(.2,.8,.3,1.2); }
.pop-prod:hover .pop-prod__media img{ transform:scale(1.08) rotate(-1.5deg); }
/* Discount / bonus — full-width 3D bar across the TOP of the card (overlay, no layout shift) */
.pop-prod__off{ position:absolute; top:0; left:0; right:0; z-index:3; padding:8px 12px; text-align:center; color:#fff; font-weight:900; font-size:.8rem; text-transform:uppercase; letter-spacing:.6px; text-shadow:0 1px 0 rgba(0,0,0,.35);
  background:linear-gradient(180deg, #ff7b7b, var(--rd-face)); box-shadow:inset 0 2px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.15), 0 3px 0 var(--rd-border); }
.pop-prod__off--bonus{ color:#04351c; text-shadow:0 1px 0 rgba(255,255,255,.25); background:linear-gradient(180deg,#4bf28e,#12b455); box-shadow:inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.12), 0 3px 0 #0a5f2c; }
/* Stock line — small, elegant, directly under the title; ALWAYS reserves its slot so prices never shift */
.pop-prod__stock{ min-height:1.25em; margin-top:5px; font-size:.78rem; font-weight:600; color:var(--text-dim); line-height:1.25; }
.pop-prod__stock.is-out{ color:#ff8f8f; font-weight:800; }
/* Body */
.pop-prod__body{ display:flex; flex-direction:column; flex:1; padding:0 14px 14px; }
.pop-prod__title{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em; margin:2px 0 0; font-weight:800; font-size:1rem; text-transform:uppercase; letter-spacing:.2px; color:var(--text); text-decoration:none; line-height:1.3; transition:color .15s ease; }
a.pop-prod__title:hover{ color:var(--acc-face); }
/* Price — FIXED slots so name/price/button share the SAME position on every card (discount or not) */
.pop-prod__price{ margin:8px 0 13px; }
.pop-prod__old{ display:block; min-height:1.15em; color:var(--rd-face); text-decoration:line-through; font-weight:900; font-size:.92rem; opacity:.8; line-height:1.15; }
.pop-prod__new{ display:block; color:#fff; font-weight:900; font-size:1.55rem; line-height:1.1; text-shadow:0 2px 0 rgba(0,0,0,.35); }
.pop-prod__foot{ margin-top:auto; }
.pop-prod__buy{ --bh:44px; --fs:14px; width:100%; }
.pop-prod__buy .btn3d__face svg{ width:1.15em; height:1.15em; }
.pop-prod__buy.is-disabled{ opacity:.5; pointer-events:none; filter:grayscale(.15); }
/* Generic disabled state for 3D buttons */
.btn3d.is-disabled{ opacity:.55; pointer-events:none; filter:grayscale(.2); }

/* ── VIP / Tier comparison card (tiers.php header cells) ── */
.pop-tier{ position:relative; display:flex; flex-direction:column; align-items:center; width:190px; max-width:210px; margin:0 auto; padding-top:14px; }
.pop-tier__off{ position:absolute; top:-4px; right:-4px; z-index:3; background:var(--acc-face); color:var(--acc-text); font-weight:900; font-size:.66rem; text-transform:uppercase; letter-spacing:.4px; padding:4px 9px; border-radius:999px; box-shadow:0 3px 0 var(--acc-depth); }
.pop-tier__media{ display:grid; place-items:center; height:120px; width:100%; }
.pop-tier__img{ max-width:120px; max-height:110px; width:auto; object-fit:contain; filter:drop-shadow(0 8px 12px rgba(0,0,0,.45)); }
.pop-tier__name{ margin-top:10px; font-size:1.1rem; font-weight:900; text-transform:uppercase; letter-spacing:.4px; color:var(--text); line-height:1.15; }
.pop-tier__price{ display:flex; flex-direction:column; align-items:center; gap:1px; margin:8px 0 4px; }
.pop-tier__old{ min-height:1.05em; color:var(--rd-face); text-decoration:line-through; font-weight:800; font-size:.9rem; opacity:.85; line-height:1.05; }
.pop-tier__new{ color:var(--acc-face); font-weight:900; font-size:1.5rem; line-height:1; }
.pop-tier__stock{ min-height:1.2em; margin:2px 0 10px; font-size:.74rem; font-weight:600; color:var(--text-dim); }
.pop-tier__stock.is-out{ color:#ff8f8f; font-weight:800; }
.pop-tier__btn{ width:100%; display:flex; justify-content:center; }
.pop-tier__btn .btn3d{ min-width:130px; }

/* ── CTA card (support / help pages) — foot-card style accent gradient ── */
.pop-cta{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px 24px; margin-bottom:1.25rem; padding:20px 24px; border-radius:16px; position:relative; overflow:hidden;
	background:linear-gradient(135deg, var(--acc-face), color-mix(in srgb, var(--acc-face) 62%, #000)); color:var(--acc-text);
	box-shadow:0 5px 0 var(--acc-depth), 0 16px 26px rgba(0,0,0,.4); }
.pop-cta::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 90% -30%, rgba(255,255,255,.22), transparent 55%); }
.pop-cta__text{ position:relative; z-index:1; min-width:200px; flex:1 1 320px; }
.pop-cta__title{ margin:0 0 4px; font-size:1.15rem; font-weight:900; color:var(--acc-text); text-shadow:var(--acc-edge); }
.pop-cta__sub{ margin:0; font-size:.9rem; line-height:1.5; color:color-mix(in srgb, var(--acc-text) 82%, transparent); font-weight:600; }
.pop-cta__actions{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:10px; }

/* ── Help center hero ── */
.pop-help-hero{ position:relative; overflow:hidden; border-radius:22px; border:1px solid var(--card-bd); text-align:center; padding:46px 24px 50px;
	background:linear-gradient(150deg, color-mix(in srgb, var(--acc-face) 22%, var(--surface-2)), var(--surface-2) 72%);
	box-shadow:0 6px 0 var(--card-depth), 0 18px 34px rgba(0,0,0,.45); }
.pop-help-hero::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 50% -20%, color-mix(in srgb, var(--acc-face) 26%, transparent), transparent 60%); }
.pop-help-hero__inner{ position:relative; z-index:1; max-width:640px; margin:0 auto; }
.pop-help-hero__eyebrow{ display:inline-flex; align-items:center; gap:7px; padding:6px 14px; border-radius:999px; background:color-mix(in srgb, var(--acc-face) 16%, var(--surface-2)); color:var(--acc-face); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.6px; margin-bottom:16px; }
.pop-help-hero__title{ margin:0 0 10px; font-size:2rem; font-weight:900; color:var(--text); line-height:1.12; }
.pop-help-hero__sub{ margin:0 auto 26px; max-width:500px; color:var(--text-dim); font-size:.98rem; line-height:1.6; }
.pop-help-search{ display:flex; align-items:center; gap:8px; max-width:520px; margin:0 auto; padding:7px 7px 7px 16px; background:var(--card-bg); border:1px solid var(--card-bd); border-radius:14px; box-shadow:0 3px 0 var(--card-depth); }
.pop-help-search__ic{ font-size:1.15rem; color:var(--text-dim); flex:none; }
.pop-help-search input{ flex:1 1 auto; min-width:0; background:transparent; border:0; outline:none; color:var(--text); font-size:.98rem; font-weight:600; }
.pop-help-search input::placeholder{ color:var(--text-dim); }
.pop-help-search__btn{ flex:none; }
@media (max-width:560px){
	.pop-cta{ flex-direction:column; align-items:flex-start; text-align:left; }
	.pop-help-hero__title{ font-size:1.6rem; }
	.pop-tier{ width:150px; }
}

@media (max-width:1080px){
  .pop-store{ grid-template-columns:minmax(0,1fr); }
  .pop-store__aside{ position:static; }
  .pop-catnav__brand{ display:none; }
  .pop-catnav__list{ flex-direction:row; flex-wrap:wrap; }
  .pop-catnav__link{ flex:1 1 160px; }
}
@media (max-width:900px){
  .pop-cats{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}
@media (max-width:560px){
  .pop-cats{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
  .pop-prods{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
  .pop-cat{ padding:8px; }
  .pop-cat__bar{ padding:9px 10px 9px 12px; }
  .pop-cat__title{ font-size:.82rem; }
  .pop-prod__media{ height:150px; padding:18px 12px 6px; }
  .pop-prod__new{ font-size:1.3rem; }
  .pop-prod__title{ font-size:.88rem; }
}