/* ==========================================================================
   SoMeLAB — base primitives, shared by site, PWA and admin.
   Signatures: notched CTAs, bracket cards, segmented progress, mono readouts.
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:var(--font-b); font-size:var(--t-b); line-height:1.55;
  background:var(--bg0); color:var(--ink);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,video,canvas{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
svg{ flex:none; }
:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:var(--r-s); }
::selection{ background:color-mix(in oklab, var(--pf) 35%, transparent); }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:var(--line2); border-radius:99px; border:3px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-track{ background:transparent; }

/* --- type ------------------------------------------------------------------ */
h1,h2,h3,h4{ font-family:var(--font-d); font-weight:600; letter-spacing:-.02em; line-height:1.06; }
h1{ font-size:var(--t-2xl); letter-spacing:-.03em; }
h2{ font-size:var(--t-xl); }
h3{ font-size:var(--t-l); }
h4{ font-size:var(--t-m); }
.disp{ font-family:var(--font-d); font-weight:600; letter-spacing:-.02em; }
.mono{ font-family:var(--font-m); font-weight:500; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.kicker{
  font-family:var(--font-m); font-size:var(--t-xs); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--pf-ink);
  display:inline-flex; align-items:center; gap:8px;
}
.kicker::before{ content:''; width:18px; height:2px; background:var(--pf); }
.lead{ font-size:var(--t-m); color:var(--ink2); line-height:1.6; }
.mut{ color:var(--mut); } .faint{ color:var(--faint); } .ink2{ color:var(--ink2); }
.small{ font-size:var(--t-s); } .xs{ font-size:var(--t-xs); }
.strong{ font-weight:600; } .up{ color:var(--ok); } .down{ color:var(--bad); }
.balance{ text-wrap:balance; } .pretty{ text-wrap:pretty; }

/* --- layout ---------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.sec{ padding-block:var(--secy); position:relative; }
.row{ display:flex; align-items:center; gap:12px; }
.rowb{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.col{ display:flex; flex-direction:column; }
.grow{ flex:1; } .wrapf{ flex-wrap:wrap; }
.g4{gap:4px}.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}
.hide{ display:none !important; }

/* --- notched buttons (signature) ------------------------------------------- */
.btn{
  --h:46px;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:var(--h); padding-inline:22px;
  font-family:var(--font-d); font-weight:600; font-size:var(--t-b); letter-spacing:.01em;
  white-space:nowrap; isolation:isolate; overflow:hidden;
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  border-radius:var(--r-s);
  transition:transform var(--fast) var(--ease), filter var(--fast), background var(--fast), color var(--fast), box-shadow var(--mid);
  will-change:transform;
}
.btn:active{ transform:scale(.965); }
.btn svg{ width:17px; height:17px; }
.btn-pf{ background:var(--pf); color:#0B0C10; }
:root[data-pf="twitch"] .btn-pf,:root[data-pf="youtube"] .btn-pf{ color:#fff; }
.btn-pf:hover{ filter:brightness(1.12); box-shadow:0 6px 26px -8px var(--pf-glow); }
.btn-vp{ background:var(--vp); color:#1A0C04; }
.btn-vp:hover{ filter:brightness(1.1); box-shadow:0 6px 26px -8px color-mix(in oklab,var(--vp) 55%,transparent); }
.btn-ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line2); clip-path:none; }
.btn-ghost:hover{ background:var(--bg2); box-shadow:inset 0 0 0 1px var(--faint); }
.btn-soft{ background:var(--bg2); color:var(--ink); clip-path:none; }
.btn-soft:hover{ background:var(--bg3); }
.btn-danger{ background:var(--bad-soft); color:var(--bad); clip-path:none; }
.btn-danger:hover{ background:var(--bad); color:#fff; }
.btn-lg{ --h:56px; padding-inline:30px; font-size:var(--t-m); }
.btn-s{ --h:36px; padding-inline:14px; font-size:var(--t-s); }
.btn-xs{ --h:29px; padding-inline:10px; font-size:var(--t-xs); gap:6px; }
.btn-xs svg{ width:13px; height:13px; }
.btn-ico{ padding-inline:0; width:var(--h); }
.btn-block{ width:100%; }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.4; pointer-events:none; }
/* sheen sweep on primary CTAs */
.btn-pf::after,.btn-vp::after{
  content:''; position:absolute; inset:0; z-index:-0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 48%, transparent 62%);
  transform:translateX(-120%); transition:transform .6s var(--ease); pointer-events:none;
}
.btn-pf:hover::after,.btn-vp:hover::after{ transform:translateX(120%); }
:root[data-cta="rounded"] .btn{ clip-path:none; border-radius:var(--pill); }

/* --- bracket cards (signature) --------------------------------------------- */
.card{
  position:relative; background:var(--bg1); border:1px solid var(--line);
  border-radius:var(--r); padding:22px;
  transition:border-color var(--mid), transform var(--mid) var(--ease), box-shadow var(--mid);
}
.card-tight{ padding:16px; }

/* --- chips / badges --------------------------------------------------------- */
.chip{
  display:inline-flex; align-items:center; gap:7px; height:28px; padding-inline:11px;
  border-radius:var(--pill); background:var(--bg2); color:var(--ink2);
  font-size:var(--t-xs); font-weight:560; white-space:nowrap; border:1px solid transparent;
}
.chip svg{ width:13px; height:13px; }
.chip-line{ background:transparent; border-color:var(--line2); }
.chip-pf{ background:var(--pf-soft); color:var(--pf-ink); border-color:var(--pf-line); }
.chip-prem{ background:var(--prem-soft); color:var(--prem-ink); border-color:var(--prem-line); }
.badge{
  display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:var(--r-s);
  font-family:var(--font-m); font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.badge::before{ content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.badge-ok{ background:var(--ok-soft); color:var(--ok); }
.badge-bad{ background:var(--bad-soft); color:var(--bad); }
.badge-warn{ background:var(--warn-soft); color:var(--warn); }
.badge-info{ background:var(--info-soft); color:var(--info); }
.badge-mut{ background:var(--bg2); color:var(--mut); }
.badge-live::before{ animation:blink 1.4s infinite; }
@keyframes blink{ 50%{ opacity:.25 }}

/* --- forms ------------------------------------------------------------------ */
.field{ display:flex; flex-direction:column; gap:7px; }
.label{ font-size:var(--t-s); font-weight:560; color:var(--ink2); }
.hint{ font-size:var(--t-xs); color:var(--mut); display:flex; gap:6px; align-items:center; line-height:1.4; }
.hint svg{ width:13px; height:13px; flex:none; }
.input,.select,.textarea{
  width:100%; height:46px; padding:0 14px;
  background:var(--bg2); color:var(--ink);
  border:1px solid var(--line2); border-radius:var(--r-s);
  transition:border-color var(--fast), box-shadow var(--fast), background var(--fast);
}
.textarea{ height:auto; min-height:88px; padding:11px 14px; resize:vertical; line-height:1.5; }
.input:hover,.select:hover,.textarea:hover{ border-color:var(--faint); }
.input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--pf); box-shadow:0 0 0 3px color-mix(in oklab,var(--pf) 22%, transparent); }
.input::placeholder,.textarea::placeholder{ color:var(--faint); }
.select{
  appearance:none; padding-right:36px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23828B9C' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}

.switch{ position:relative; display:inline-flex; flex:none; width:42px; height:24px; cursor:pointer; }
.switch input{ position:absolute; inset:0; opacity:0; cursor:pointer; margin:0; }
.switch i{ width:100%; border-radius:99px; background:var(--bg3); transition:background var(--mid); position:relative; }
.switch i::after{
  content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:var(--ink2); transition:transform var(--mid) var(--snap), background var(--mid);
}
.switch input:checked + i{ background:var(--pf); }
.switch input:checked + i::after{ transform:translateX(18px); background:#fff; }
.switch input:focus-visible + i{ box-shadow:var(--ring); }

.seg{
  display:inline-flex; padding:3px; gap:2px; background:var(--bg2);
  border:1px solid var(--line); border-radius:var(--r-s);
}
.seg button{
  height:32px; padding-inline:13px; border-radius:calc(var(--r-s) - 3px);
  font-size:var(--t-s); font-weight:560; color:var(--mut); white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
  transition:color var(--fast), background var(--fast);
}
.seg button svg{ width:14px; height:14px; }
.seg button:hover{ color:var(--ink); }
.seg button[aria-selected="true"]{ background:var(--bg3); color:var(--ink); box-shadow:var(--sh1); }

/* --- quantity slider (signature) -------------------------------------------- */
.qty-slider{ position:relative; padding-top:6px; }
.range{
  -webkit-appearance:none; appearance:none; width:100%; height:34px; background:transparent; cursor:pointer; display:block;
}
.range::-webkit-slider-runnable-track{
  height:10px; border-radius:99px;
  background:linear-gradient(90deg, var(--pf) var(--fill,50%), var(--bg3) var(--fill,50%));
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5);
}
.range::-webkit-slider-thumb{
  -webkit-appearance:none; width:26px; height:26px; margin-top:-8px; border-radius:8px;
  background:var(--ink); border:3px solid var(--pf);
  box-shadow:0 2px 10px rgba(0,0,0,.6), 0 0 0 5px color-mix(in oklab, var(--pf) 18%, transparent);
  transition:transform var(--fast) var(--snap); cursor:grab;
}
.range:active::-webkit-slider-thumb{ transform:scale(1.18); cursor:grabbing; }
.range::-moz-range-track{ height:10px; border-radius:99px; background:var(--bg3); }
.range::-moz-range-progress{ height:10px; border-radius:99px; background:var(--pf); }
.range::-moz-range-thumb{ width:22px; height:22px; border-radius:8px; background:var(--ink); border:3px solid var(--pf); }
.qty-ticks{ display:flex; justify-content:space-between; margin-top:8px; }
.qty-ticks button{
  font-family:var(--font-m); font-size:var(--t-xs); font-weight:700; color:var(--mut);
  padding:4px 9px; border-radius:var(--r-s); transition:all var(--fast);
  border:1px solid transparent;
}
.qty-ticks button:hover{ color:var(--ink); background:var(--bg2); }
.qty-ticks button[aria-selected="true"]{ color:var(--pf-ink); border-color:var(--pf-line); background:var(--pf-softer); }

/* --- tier toggle: Standard / Premium (signature) ----------------------------- */
.tier{
  position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0;
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--r); padding:4px;
}
.tier .ind{
  position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px);
  border-radius:calc(var(--r) - 5px); background:var(--bg3);
  border:1px solid var(--line2);
  transition:transform var(--mid) var(--snap), background var(--mid), border-color var(--mid), box-shadow var(--mid);
}
.tier[data-tier="premium"] .ind{
  transform:translateX(100%);
  background:linear-gradient(160deg, color-mix(in oklab,var(--premium) 24%, var(--bg3)), var(--bg3) 70%);
  border-color:var(--prem-line);
  box-shadow:0 4px 20px -6px color-mix(in oklab, var(--premium) 40%, transparent);
}
.tier button{
  position:relative; z-index:1; padding:11px 8px 12px; text-align:center; border-radius:calc(var(--r) - 5px);
  transition:color var(--fast);
}
.tier .tname{ font-family:var(--font-d); font-weight:600; font-size:var(--t-b); display:flex; align-items:center; justify-content:center; gap:7px; color:var(--mut); transition:color var(--mid); }
.tier .tname svg{ width:14px; height:14px; }
.tier .tsub{ font-size:var(--t-xs); color:var(--faint); margin-top:2px; transition:color var(--mid); }
.tier button[aria-selected="true"] .tname{ color:var(--ink); }
.tier button[aria-selected="true"] .tsub{ color:var(--mut); }
.tier[data-tier="premium"] button[aria-selected="true"] .tname{ color:var(--prem-ink); }

/* --- segmented progress (signature) ------------------------------------------ */
.segbar{ position:relative; height:12px; border-radius:4px; background:var(--bg3); overflow:hidden; }
.segbar > i{
  display:block; height:100%; background:linear-gradient(90deg, var(--pf), color-mix(in oklab, var(--pf) 70%, #fff));
  transition:width var(--slow) var(--ease);
}
.segbar::after{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, transparent 0 9px, var(--bg0) 9px 12px);
  pointer-events:none;
}
.segbar-prem > i{ background:linear-gradient(90deg,var(--premium),color-mix(in oklab,var(--premium) 60%,#fff)); }

/* --- platform mark ------------------------------------------------------------ */
.pmk{
  width:34px; height:34px; border-radius:9px; flex:none; display:grid; place-items:center;
  background:var(--pc, var(--bg3)); color:#fff;
}
.pmk svg{ width:18px; height:18px; }
.pmk-s{ width:24px; height:24px; border-radius:7px; } .pmk-s svg{ width:13px; height:13px; }
.pmk-l{ width:48px; height:48px; border-radius:13px; } .pmk-l svg{ width:26px; height:26px; }
[data-pc="kick"] .pmk, .pmk[data-pc="kick"]{ color:#0B0C10; }

/* --- avatars / table / misc --------------------------------------------------- */
.av{
  width:36px; height:36px; border-radius:10px; flex:none; display:grid; place-items:center;
  background:var(--bg3); color:var(--ink2); font-family:var(--font-d); font-weight:600; font-size:var(--t-s);
}
.av-s{ width:28px; height:28px; font-size:11px; border-radius:8px; }
.av-l{ width:54px; height:54px; font-size:var(--t-m); border-radius:14px; }
.av-vp{ background:linear-gradient(140deg, var(--vp), color-mix(in oklab,var(--vp) 55%, #C0206A)); color:#fff; }

.table{ width:100%; border-collapse:collapse; font-size:var(--t-s); }
.table th{
  text-align:left; font-family:var(--font-m); font-weight:700; color:var(--mut); font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; padding:0 14px 10px; white-space:nowrap;
}
.table td{ padding:13px 14px; border-top:1px solid var(--line); vertical-align:middle; }
.table tbody tr{ transition:background var(--fast); }
.table tbody tr:hover{ background:var(--bg2); }
.table .right{ text-align:right; }

.divider{ height:1px; background:var(--line); border:0; }

/* toast */
.toasts{ position:fixed; z-index:900; bottom:22px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast{
  display:flex; align-items:center; gap:10px; background:var(--bg3); color:var(--ink);
  border:1px solid var(--line2); border-left:3px solid var(--pf);
  padding:11px 18px; border-radius:var(--r-s); font-size:var(--t-s); font-weight:520;
  box-shadow:var(--sh3); animation:toastIn .32s var(--snap);
}
.toast svg{ width:15px; height:15px; color:var(--pf-ink); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(14px) scale(.95); }}

/* reveal variants — not just fade-in */
.rv{ opacity:0; transition:opacity .65s var(--ease), transform .65s var(--ease), clip-path .65s var(--ease); }
.rv.in{ opacity:1; transform:none !important; clip-path:inset(0 0 0 0) !important; }
.rv-up{ transform:translateY(26px); }
.rv-pop{ transform:scale(.92); transition-timing-function:var(--snap); }

/* tilt targets (JS-driven) */
.tilt{ transform-style:preserve-3d; will-change:transform; transition:transform .35s var(--ease); }

@keyframes sk{ to{ background-position:-200% 0 }}