/* ══════════════════════════════════════════════════════════════
   MariSMM — WARRIOR design layer
   Values mirrored from the boostersmm.com reference stylesheet.
   Loaded LAST on every user + admin page so it wins over the
   per-page inline blocks that predate it.
   ══════════════════════════════════════════════════════════════ */

:root{
  --mc:#FF3350;--mc-hover:#FF5C72;--mc-t:rgba(255,51,80,.12);
  --acc:#FF7A3D;
  --grad:linear-gradient(120deg,#8E0A1C 0%,#FF3350 52%,#FF7A3D 100%);
  --grad-s:linear-gradient(120deg,#FF3350,#FF7A3D);
  --soft:rgba(255,74,99,.12);--line:rgba(255,74,99,.20);
  --main-bg:#0E0609;--second-bg:#0A0406;--card-bg:#180D11;--title-bg:#211217;
  --border:#2C1A20;--tc:#F7EBEE;--ts:#B09AA0;
  --rail:#120810;--rail-tc:#F7EBEE;--rail-ts:#B09AA0;--rail-line:#2C1A20;
  --r:14px;--rl:20px;
}
[data-theme="light"]{
  --mc:#D40C1C;--mc-hover:#F0303A;--mc-t:rgba(212,12,28,.09);
  --acc:#F0303A;
  --grad:linear-gradient(120deg,#96060F 0%,#D40C1C 52%,#F0303A 100%);
  --grad-s:linear-gradient(120deg,#D40C1C,#F0303A);
  --soft:rgba(212,12,28,.07);--line:rgba(212,12,28,.26);
  --main-bg:#FFF6F7;--second-bg:#FFEEF0;--card-bg:#FFFFFF;--title-bg:#FFEFF1;
  --border:#F6DDE1;--tc:#1A0A0D;--ts:#8A6A70;
  --rail:#FFFFFF;--rail-tc:#1A0A0D;--rail-ts:#8A6A70;--rail-line:#F6DDE1;
}

/* ── 1 · MENU BUTTON ─────────────────────────────────────────
   Reference draws an inline SVG, not a font glyph: the middle
   bar is short (M4 12h11) against full-width outer bars. fa-bars
   renders three equal lines, which is why the button read as
   "unchanged" after the previous CSS-only pass.              */
.hamburger-btn,.at-menu-btn{
  position:relative;
  width:38px;height:38px;flex:0 0 38px;
  display:flex;align-items:center;justify-content:center;
  padding:0;cursor:pointer;
  border:1.5px solid rgba(255,51,80,.42);
  border-radius:13px;
  background:var(--card-bg);background-image:none;
  color:var(--mc);
  box-shadow:0 4px 14px rgba(255,51,80,.14);
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .15s ease;
}
.hamburger-btn svg,.at-menu-btn svg{
  display:block;width:21px;height:21px;
  color:currentColor;stroke:currentColor;
  transition:transform .2s ease;
}
.hamburger-btn:hover,.at-menu-btn:hover{
  background:rgba(255,51,80,.14);
  border-color:rgba(255,51,80,.62);
  box-shadow:0 6px 18px rgba(255,51,80,.22);
}
.hamburger-btn:active,.at-menu-btn:active{
  transform:scale(.93);
  background:var(--grad);border-color:transparent;color:#fff;
}
.hamburger-btn.is-open,.at-menu-btn.is-open{
  background:var(--grad);border-color:transparent;color:#fff;
  box-shadow:0 6px 20px rgba(255,51,80,.32);
}
/* open/closed glyph swap is CSS-driven — the pages' JS only
   toggles .is-open, it must not rewrite the icon element */
.hamburger-btn .hb-x,.at-menu-btn .hb-x{display:none}
.hamburger-btn.is-open .hb-bars,.at-menu-btn.is-open .hb-bars{display:none}
.hamburger-btn.is-open .hb-x,.at-menu-btn.is-open .hb-x{display:block}
[data-theme="light"] .hamburger-btn,
[data-theme="light"] .at-menu-btn{
  background:#fff;border-color:rgba(212,12,28,.35);
  box-shadow:0 4px 14px rgba(212,12,28,.12);
}

/* ── 2 · CATEGORY / PLATFORM TILE ────────────────────────────
   Reference: 32x32 tile, 10px radius, brand glyph in --mc.   */
.cat-platform-badge,.dd-tile{
  width:32px;height:32px;flex:0 0 32px;
  border-radius:10px;
  background:var(--second-bg);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;margin-top:0;
}
.cat-platform-badge i,.dd-tile i{font-size:13px;line-height:1;color:var(--mc)}
.cat-platform-badge img,.dd-tile img{width:17px;height:17px;object-fit:contain;margin:0}
.cat-platform-badge.def i{color:var(--mc)}
.cat-platform-badge.fb i{color:#1877f2}
.cat-platform-badge.ig i{color:#e1306c}
.cat-platform-badge.tt i{color:#010101}
.cat-platform-badge.yt i{color:#ff0000}
.cat-platform-badge.tw i{color:#000}
.cat-platform-badge.li i{color:#0077b5}
.cat-platform-badge.sc i{color:#ff5500}
.cat-platform-badge.sp i{color:#1db954}
.cat-platform-badge.th i{color:#000}
.cat-platform-badge.tg i{color:#229ED9}
.cat-platform-badge.dc i{color:#5865f2}
[data-theme="dark"] .cat-platform-badge.tt i,
[data-theme="dark"] .cat-platform-badge.tw i,
[data-theme="dark"] .cat-platform-badge.th i{color:#fff}
.cat-platform-badge.tt{background:rgba(255,255,255,.06)}

/* ── 3 · SERVICE DROPDOWN ────────────────────────────────────
   Gradient header + scroll list, straight from the reference. */
.dd-head{
  display:flex;align-items:center;gap:10px;
  padding:13px 15px;
  background:var(--grad);color:#fff;
  border-radius:14px 14px 0 0;
}
.dd-head i{
  width:28px;height:28px;flex:0 0 28px;
  border-radius:9px;
  background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.34);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;
}
.dd-head span{font-size:13px;font-weight:800}
.dd-scroll{max-height:360px;overflow-y:auto;padding:8px}
.dd-scroll::-webkit-scrollbar{width:6px}
.dd-scroll::-webkit-scrollbar-thumb{background:var(--mc-t);border-radius:99px}
.dropdown-link{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:12px;cursor:pointer;
  color:var(--ts);text-decoration:none;
  font-size:12.8px;font-weight:700;line-height:1.35;
  border:1px solid transparent;transition:.15s;
}
.dropdown-link:hover{background:var(--second-bg);color:var(--mc);border-color:var(--border)}
.dropdown-link.on{background:var(--mc-t);color:var(--mc);border-color:var(--line)}
.dropdown-link .text{
  flex:1;min-width:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ── 4 · SERVICE META PILLS ──────────────────────────────────
   Average time / refill / non-drop, as the reference shows them. */
.svc-meta-tag{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;border-radius:8px;
  font-size:10.5px;font-weight:700;letter-spacing:.2px;
  background:var(--second-bg);color:var(--ts);
  border:1px solid var(--border);
}
.svc-meta-tag i{font-size:9px}
.svc-meta-tag.ok{background:rgba(34,197,94,.12);color:#22c55e;border-color:rgba(34,197,94,.28)}
.svc-meta-tag.off{background:rgba(255,255,255,.04);color:var(--ts);opacity:.75}

/* ── 5 · SHARED SURFACES ─────────────────────────────────────
   Scoped refinements only. Each page already ships a full bespoke
   design (.card alone is defined 8× and used 188×), so anything
   broad here would clobber it. These rules touch surfaces that are
   unique to a component and therefore safe to restyle globally. */

/* topbar — keep each page's own background (it carries the blur),
   add only the reference's crimson hairline + soft lift */
.topbar{
  border-bottom:1px solid var(--line,rgba(255,51,80,.18));
  box-shadow:0 1px 0 rgba(255,51,80,.06),0 10px 26px -18px rgba(0,0,0,.7);
}

/* drawer items — unique to the nav rail, safe to polish globally */
.drawer-item-inner{border-radius:12px;transition:background .18s,color .18s}
.drawer-item:hover .drawer-item-inner{background:var(--soft)}
.drawer-item:hover .drawer-item-label{color:var(--accent)}
.drawer-item.active-link .drawer-item-inner,
.drawer-item.active-link:hover .drawer-item-inner{
  background:var(--soft);
  border:1px solid var(--line);
}
.drawer-item-icon{
  border-radius:11px;
  background:var(--card2);
  border:1px solid var(--border);
  color:var(--accent);
  transition:background .18s,color .18s,transform .18s;
}
.drawer-item.active-link .drawer-item-icon,
.drawer-item:hover .drawer-item-icon{
  background:var(--grad);color:#fff;border-color:transparent;
}

/* drawer header balance pill — reference crimson chip */
.drawer-balance-pill{border-radius:99px}