/* Sanguine Rust store-mode theme. Loaded AFTER style.css only when STORE_ONLY=1, so it
   overrides the legacy wiki chrome and restyles the shop/cart/account/admin pages to match
   the blood-moon storefront. Class names in templates are unchanged — this reskins them. */

:root{
  --blood:#c4161c; --blood-deep:#8b0000; --gold:#ffb020; --bone:#e8ddc9; --ink:#0d0709;
  --panel:rgba(24,20,22,.72); --panel-solid:#140d10; --line:rgba(232,221,201,.14);
  --disp:'Anton',Impact,sans-serif; --alt:'Oswald',sans-serif; --body-f:'Inter',system-ui,sans-serif;
}

body.storemode{
  background:var(--ink); color:var(--bone); font-family:var(--body-f);
  margin:0; line-height:1.5; overflow-x:hidden;
}

/* background layers (same look as the storefront, via static bg) */
.sbg{position:fixed;inset:-4vmax;background:url("/static/bg.jpg") center 40% / cover no-repeat;z-index:-3}
.sbg-glow{position:fixed;inset:0;z-index:-2;background:
  radial-gradient(60% 42% at 50% 30%, rgba(196,22,28,.25), transparent 70%),
  radial-gradient(120% 90% at 50% 40%, transparent 30%, rgba(0,0,0,.82) 100%),
  linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,.5) 40%, rgba(0,0,0,.94))}

/* header */
.sheader{position:sticky;top:0;z-index:20;backdrop-filter:blur(8px);
  background:linear-gradient(180deg,rgba(13,7,9,.88),rgba(13,7,9,.5));border-bottom:1px solid var(--line)}
.snav{max-width:1120px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:14px;height:60px}
.sbrand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--bone)}
.sbrand img{height:34px;width:auto;filter:drop-shadow(0 0 12px rgba(196,22,28,.5))}
.sbrand b{font-family:var(--disp);font-size:19px;letter-spacing:.12em;text-transform:uppercase;font-weight:400}
body.storemode .sbrand, body.storemode .sbrand b{color:var(--bone)}
body.storemode .snavlink{color:rgba(232,221,201,.7)}
body.storemode .snavlink:hover{color:var(--gold)}
body.storemode .sbtn{color:#fff}
body.storemode .sbtn.ghost{color:var(--bone)}
body.storemode .sbtn.ghost:hover{color:var(--gold)}
.sspacer{flex:1}
.snavlink{color:rgba(232,221,201,.7);text-decoration:none;font-family:var(--alt);font-weight:500;
  letter-spacing:.04em;font-size:13px;text-transform:uppercase}
.snavlink:hover{color:var(--gold)}
.sbtn{display:inline-flex;align-items:center;gap:.5em;border:1px solid rgba(255,176,32,.42);border-radius:4px;
  background:linear-gradient(180deg,var(--blood),var(--blood-deep));color:#fff;font-family:var(--alt);
  font-weight:600;letter-spacing:.07em;text-transform:uppercase;font-size:12px;padding:.55em .95em;
  cursor:pointer;text-decoration:none;transition:.16s}
.sbtn:hover{border-color:var(--gold);box-shadow:0 0 22px rgba(196,22,28,.5)}
.sbtn.ghost{background:linear-gradient(180deg,rgba(28,23,25,.85),rgba(13,7,9,.92));
  border-color:rgba(232,221,201,.26);color:var(--bone)}
.sbtn.ghost:hover{color:var(--gold)}
.sbtn.join{background:linear-gradient(180deg,#5865f2,#4450d4);border-color:rgba(255,255,255,.28)}
.sav{width:20px;height:20px;border-radius:50%;object-fit:cover}

/* layout */
.swrap{max-width:1120px;margin:0 auto;padding:28px 20px 40px;min-height:60vh}
.sfooter{text-align:center;padding:34px 0 28px;border-top:1px solid var(--line);
  color:rgba(232,221,201,.34);font-family:var(--alt);letter-spacing:.14em;text-transform:uppercase;font-size:12px}

/* typography */
body.storemode h1{font-family:var(--disp);font-weight:400;font-size:2.3rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--bone);margin:.2em 0 .4em}
body.storemode h2{font-family:var(--disp);font-weight:400;font-size:1.5rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--bone);margin:1em 0 .5em}
body.storemode h3{font-family:var(--alt);font-weight:600;font-size:1.02rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--bone)}
.swrap a{color:var(--gold)}
.swrap a:hover{color:#ffd27a}
body.storemode .muted{color:rgba(232,221,201,.55)}
body.storemode .tiny{font-size:11px}
body.storemode .hint{color:rgba(232,221,201,.5);font-size:12.5px}

/* flashes */
body.storemode .flash{background:linear-gradient(180deg,rgba(255,176,32,.12),rgba(196,22,28,.12));
  border:1px solid rgba(255,176,32,.4);border-radius:8px;padding:11px 14px;margin:0 0 14px;color:var(--bone)}
body.storemode .flash.warn{border-color:rgba(196,22,28,.6);
  background:linear-gradient(180deg,rgba(196,22,28,.16),rgba(139,0,0,.16))}

/* cards / shop grid */
body.storemode .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:880px){body.storemode .grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){body.storemode .grid{grid-template-columns:1fr}}
body.storemode .card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:18px;display:flex;flex-direction:column;box-shadow:0 16px 40px rgba(0,0,0,.45);overflow:hidden;transition:.16s}
body.storemode .card::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(to right,transparent,var(--blood),transparent);opacity:.6}
body.storemode .card:hover{transform:translateY(-3px);border-color:rgba(255,176,32,.4)}
body.storemode .card h2{font-size:1.3rem;margin:0}
body.storemode .card .blurb{font-size:13px;color:rgba(232,221,201,.66);flex:1;margin:.5em 0}
body.storemode .card .price{font-family:var(--disp);font-size:2rem;color:#fff;margin:6px 0 10px}
body.storemode .card .price small{font-size:.9rem;color:rgba(232,221,201,.55);font-family:var(--body-f)}
body.storemode .card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
body.storemode .tag{font-family:var(--alt);font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);background:var(--gold);padding:3px 8px;border-radius:20px}

/* buttons + forms */
body.storemode button,body.storemode .btn-buy,body.storemode .checkout{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;border:1px solid rgba(255,176,32,.42);
  border-radius:4px;background:linear-gradient(180deg,var(--blood),var(--blood-deep));color:#fff;
  font-family:var(--alt);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:13px;
  padding:.65em 1.15em;cursor:pointer;text-decoration:none;transition:.16s;width:100%}
body.storemode button:hover,body.storemode .btn-buy:hover,body.storemode .checkout:hover{
  border-color:var(--gold);box-shadow:0 0 24px rgba(196,22,28,.5)}
body.storemode button.danger{background:linear-gradient(180deg,#5b1114,#310a0c);border-color:rgba(196,22,28,.5)}
body.storemode button.link-inline{width:auto;background:none;border:none;box-shadow:none;color:var(--gold);
  padding:0;font-size:12px;letter-spacing:.04em}
body.storemode button.link-inline:hover{color:#ffd27a;box-shadow:none}
body.storemode input[type=text],body.storemode input[type=number],body.storemode input[type=password],
body.storemode input[type=email],body.storemode input[type=search],
body.storemode input:not([type]),
body.storemode textarea,body.storemode select{
  background:#0e0709;border:1px solid var(--line);border-radius:6px;color:var(--bone);
  padding:.55em .7em;font-family:var(--body-f);font-size:14px;width:100%;max-width:520px}
body.storemode input:focus,body.storemode textarea:focus{outline:none;border-color:rgba(255,176,32,.5)}
body.storemode label{font-family:var(--alt);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(232,221,201,.6)}

/* tables (cart, admin) */
body.storemode table{border-collapse:collapse;width:100%}
body.storemode .tbl th,body.storemode .cart-table th{font-family:var(--alt);font-size:11.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(232,221,201,.55);text-align:left;
  padding:9px 10px;border-bottom:1px solid rgba(232,221,201,.22)}
body.storemode .tbl td,body.storemode .cart-table td{padding:9px 10px;border-bottom:1px solid var(--line);font-size:13.5px}
body.storemode .tbl tr:hover td{background:rgba(232,221,201,.04)}
body.storemode .amt,body.storemode .r{text-align:right}
body.storemode .row-refunded td{color:rgba(232,221,201,.35);text-decoration:line-through}
body.storemode .row-bad td{background:rgba(196,22,28,.10)}

/* pills / status */
body.storemode .pill{display:inline-block;font-family:var(--alt);font-size:10.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;padding:2px 9px;border-radius:20px;
  border:1px solid var(--line);color:var(--bone)}
body.storemode .pill.completed{border-color:rgba(102,204,102,.5);color:#7fd97f}
body.storemode .pill.cancelled{border-color:rgba(196,22,28,.55);color:#ff7b7b}

/* misc store/account structures */
body.storemode .cart-total{display:flex;align-items:center;gap:16px;justify-content:flex-end;margin-top:16px}
body.storemode .cart-total .sum{font-family:var(--alt);font-weight:700;font-size:1.5rem;color:#fff;text-shadow:none;letter-spacing:.02em}
body.storemode .cart-total form,body.storemode .cart-total .checkout{width:auto}
body.storemode .recent-payments ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}
body.storemode .recent-payments li{display:flex;align-items:center;gap:10px;background:var(--panel);
  border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:13.5px}
body.storemode .recent-payments img{width:26px;height:26px;border-radius:50%}
body.storemode .recent-payments .who{color:var(--gold);font-weight:600}
body.storemode .stat{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 16px}
body.storemode .banner{border-radius:10px;padding:12px 16px;border:1px solid var(--line);background:var(--panel)}
body.storemode .banner.bad{border-color:rgba(196,22,28,.55);background:rgba(196,22,28,.10)}
body.storemode .idcard{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
body.storemode .idcard.linked{border-color:rgba(102,204,102,.4)}
body.storemode .danger-zone{border:1px solid rgba(196,22,28,.45);border-radius:10px;padding:14px 16px;
  background:rgba(196,22,28,.06);margin-top:18px}
body.storemode .crumb{font-family:var(--alt);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(232,221,201,.5)}
body.storemode section.hero p{color:rgba(232,221,201,.75);max-width:60ch}
body.storemode section.admin{background:transparent}
body.storemode code{background:#0e0709;border:1px solid var(--line);border-radius:4px;padding:1px 5px;
  font-size:12px;color:#ffd27a}


/* ---------- mobile ---------- */
@media (max-width:680px){
  .snav{flex-wrap:wrap;height:auto;padding:10px 12px;gap:8px 10px}
  .sbrand img{height:28px}
  .sbrand b{font-size:15px;letter-spacing:.08em}
  .sbtn{font-size:11px;padding:.5em .75em;letter-spacing:.04em}
  .snavlink{font-size:12px}
  .swrap{padding:20px 14px 34px}
  body.storemode h1{font-size:1.8rem}
  body.storemode .grid{grid-template-columns:1fr}
  body.storemode .tbl,body.storemode .cart-table{display:block;overflow-x:auto;white-space:nowrap}
  body.storemode .cart-total{flex-wrap:wrap;justify-content:flex-start}
  body.storemode input[type=text],body.storemode input[type=number],body.storemode input[type=email],
  body.storemode input:not([type]),body.storemode textarea,body.storemode select{max-width:100%}
}


/* ---------- admin tab bar ---------- */
.admintabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.admintabs a,.admintabs .on{display:inline-flex;align-items:center;padding:.55em 1.1em;border-radius:6px;
  font-family:var(--alt);font-weight:600;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;border:1px solid var(--line);transition:.15s}
.admintabs a{color:rgba(232,221,201,.7);background:linear-gradient(180deg,rgba(28,23,25,.75),rgba(13,7,9,.85))}
.admintabs a:hover{color:var(--gold);border-color:rgba(255,176,32,.45)}
.admintabs .on{color:#fff;background:linear-gradient(180deg,var(--blood),var(--blood-deep));
  border-color:rgba(255,176,32,.5)}

/* settings table polish */
body.storemode .tbl.kv td{vertical-align:middle;padding:12px 10px}
body.storemode .secretrow .eye{padding:.5em .8em;line-height:1}
body.storemode .tbl.kv input,body.storemode .tbl.kv select{max-width:none}


/* ---------- on-brand form controls ---------- */
body.storemode{color-scheme:dark}   /* native pickers & scrollbars render dark */

/* selects: kill the browser arrow, draw a gold chevron */
body.storemode select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-color:#0e0709;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffb020' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8em center;
  padding-right:2.4em;cursor:pointer}
body.storemode select:hover{border-color:rgba(255,176,32,.45)}

/* number inputs: hide the grey spinners */
body.storemode input[type=number]{-moz-appearance:textfield;appearance:textfield}
body.storemode input[type=number]::-webkit-inner-spin-button,
body.storemode input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* date/time picker: dark field, gold calendar icon */
body.storemode input[type=datetime-local]{
  background:#0e0709;border:1px solid var(--line);border-radius:6px;color:var(--bone);
  padding:.55em .7em;font-family:var(--body-f);font-size:14px}
body.storemode input[type=datetime-local]::-webkit-calendar-picker-indicator{
  filter:invert(72%) sepia(64%) saturate(1200%) hue-rotate(360deg) brightness(1.05);cursor:pointer}

/* checkboxes: blood accent, sensible size */
body.storemode input[type=checkbox]{accent-color:var(--blood);width:15px;height:15px;cursor:pointer}

/* file inputs: the browse button becomes a small themed button */
body.storemode input[type=file]{color:rgba(232,221,201,.6);font-size:13px}
body.storemode input[type=file]::file-selector-button{
  border:1px solid rgba(255,176,32,.42);border-radius:4px;
  background:linear-gradient(180deg,rgba(28,23,25,.85),rgba(13,7,9,.92));color:var(--bone);
  font-family:var(--alt);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:11.5px;
  padding:.5em .9em;margin-right:10px;cursor:pointer;transition:.15s;width:auto}
body.storemode input[type=file]::file-selector-button:hover{color:var(--gold);border-color:var(--gold)}


/* ---------- admin metric tiles ---------- */
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0 22px}
@media(max-width:900px){.statgrid{grid-template-columns:repeat(2,1fr)}}
.mstat{position:relative;display:flex;flex-direction:column;gap:2px;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:14px 16px 12px;overflow:hidden}
.mstat::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(to right,transparent,rgba(196,22,28,.7),transparent)}
.mstat .lbl{font-family:var(--alt);font-size:10.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(232,221,201,.55)}
.mstat .val{font-family:var(--disp);font-size:1.75rem;line-height:1.05;color:var(--bone)}
.mstat .sub{font-size:11px;color:rgba(232,221,201,.42)}
.mstat.net{border-color:rgba(255,176,32,.55)}
.mstat.net::before{background:linear-gradient(to right,transparent,var(--gold),transparent)}
.mstat.net .val{color:var(--gold)}
.mstat.warn{border-color:rgba(196,22,28,.6);background:rgba(196,22,28,.08)}
.mstat.warn .val{color:#ff7b7b}
.mstat.ok::before{background:linear-gradient(to right,transparent,rgba(102,204,102,.55),transparent)}
.mstat.ok .val{color:#8fd98f}
@media(max-width:680px){.statgrid{grid-template-columns:repeat(2,1fr)}}


.langdd{position:relative}
.langbtn{display:flex;align-items:center;gap:6px;background:rgba(13,7,9,.6);border:1px solid rgba(232,221,201,.14);border-radius:4px;color:rgba(232,221,201,.75);cursor:pointer;font-family:var(--alt,sans-serif);font-size:12px;letter-spacing:.06em;padding:.4em .7em}
.langbtn .chev{color:#ffb020;font-size:9px}
.langbtn:hover{border-color:#ffb020;color:#ffb020}
.langmenu{position:absolute;top:calc(100% + 8px);right:0;min-width:96px;background:#140d10;border:1px solid rgba(255,176,32,.35);border-radius:6px;box-shadow:0 16px 34px rgba(0,0,0,.6);overflow:hidden;z-index:40}
.langmenu a{display:block;padding:.5em .95em;color:rgba(232,221,201,.75);text-decoration:none;font-family:var(--alt,sans-serif);font-size:12px;letter-spacing:.06em}
.langmenu a:hover{background:linear-gradient(180deg,#c4161c,#8b0000);color:#fff}
.langmenu a.on{color:#ffb020}