@charset "utf-8";
/* =========================================================================
   BACKBENCH — STICKER CLUB
   A collectible skin. Seven hundred credits, and the back row comes alive.
   -------------------------------------------------------------------------
   There are no characters pasted onto the screens. A mascot in the corner of
   a working screen is a sticker somebody stuck on your homework — it was in
   the way, and it made the app look like a toy rather than a thing you paid
   for. So the personality is carried entirely by MATERIAL instead:

     · vinyl      every surface has a gloss along its top edge and a coloured
                  rim under it, the way a die-cut sticker catches light
     · print      a halftone field over the whole page, because this identity
                  is printed, not rendered
     · the blue   the wordmark is white letters on a blue keyline. Every
                  display heading in this theme carries the same offset, so
                  the type IS the logo
     · enamel     anything that is on or yours is a glossy yellow capsule with
                  a hard black keyline, like a pin on a bag

   The layout does not move by one pixel. A student came for their attendance
   maths; a theme that makes the maths harder to read is a theme that failed,
   however good it looks in a screenshot.
   ========================================================================= */

/* ---- 1 · tokens ------------------------------------------------------- */
:root[data-theme="sticker"]{
  color-scheme:dark;

  --bg:#06060A;  --bg-2:#101017;  --bg-3:#191922;  --bg-4:#23242F;
  --line:#25262F;  --line-2:#3A3B49;
  --edge:rgba(255,255,255,.08);
  --tx:#FAF7F0;  --tx-2:#ADAAB6;  --tx-3:#78757F;
  --glass:rgba(10,10,16,.88);
  --rail-bg:#08080D;  --rail-line:#1E1F28;

  /* the two that are the brand, straight off the mark */
  --blu:#2D7FFF;  --blu-2:#67A9FF;  --blu-deep:#0A47B0;
  --yel:#FFC400;  --yel-2:#FFE070;  --yel-deep:#D89600;

  /* six subject inks, in sticker colours. No purple — the brief is explicit,
     and purple against black is the one hue that reads as a gaming skin. */
  --ink-1:#2FD46B;   /* green    */
  --ink-2:#2D7FFF;   /* blue     */
  --ink-3:#FF4F86;   /* coral    */
  --ink-4:#FFC400;   /* yellow   */
  --ink-5:#3FE0E8;   /* sky      */
  --ink-6:#FF7A2F;   /* tangerine*/

  --ok:#2FD46B;   --ok-bg:rgba(47,212,107,.13);
  --warn:#FFC400; --warn-bg:rgba(255,196,0,.13);
  --bad:#FF4F86;  --bad-bg:rgba(255,79,134,.13);

  --mark-1:rgba(255,196,0,.30); --mark-2:rgba(255,79,134,.24);
  --mark-3:rgba(45,127,255,.30); --mark-4:rgba(47,212,107,.24);

  --solid:#FAF7F0;  --solid-tx:#08080C;
  --rule:rgba(255,255,255,.03);
  --grain:.05;
  --fibre:0;
  --aurora:0;

  --accent:#2D7FFF;  --accent-2:#FFC400;

  --key:#06060A;                   /* the keyline black */
  --r:18px; --r-sm:12px; --r-lg:28px;

  /* vinyl: a highlight along the top, a shadow under, a blue rim below that */
  --vinyl:inset 0 1px 0 rgba(255,255,255,.085),
          inset 0 -1px 0 rgba(0,0,0,.6),
          0 1px 2px rgba(0,0,0,.6),
          0 18px 34px -22px rgba(0,0,0,.95);
  --sh:var(--vinyl);
  --sh-lg:inset 0 1px 0 rgba(255,255,255,.1),
          0 2px 8px rgba(0,0,0,.6),
          0 46px 84px -38px rgba(0,0,0,.97);
}

/* ---- 1b · the sideways guard -----------------------------------------
   Belt and braces. `clip` rather than `hidden`, because `hidden` on the root
   turns it into a scroll container and every sticky header in the app stops
   sticking. This costs nothing and means a stray shadow, sweep or particle
   can never hand a student a page that slides left. */
:root[data-theme="sticker"],
:root[data-theme="sticker"] body{overflow-x:clip}

/* ---- 2 · the page it is printed on ------------------------------------
   Four soft washes for depth and a halftone over the lot. The dots are one
   repeating radial gradient — no image, no request, and at three percent
   they are felt rather than seen. */
:root[data-theme="sticker"] .bg-paper{
  opacity:1;
  background:
    radial-gradient(112% 62% at 8% -12%,rgba(45,127,255,.20),transparent 58%),
    radial-gradient(86% 54% at 98% 2%,rgba(255,196,0,.11),transparent 56%),
    radial-gradient(80% 58% at 86% 102%,rgba(255,79,134,.09),transparent 58%),
    radial-gradient(70% 48% at 2% 98%,rgba(47,212,107,.07),transparent 58%)}
:root[data-theme="sticker"] .bg-paper::after{
  content:"";position:absolute;inset:0;opacity:.055;box-shadow:none;
  background-image:radial-gradient(rgba(255,255,255,.9) .8px,transparent .9px);
  background-size:5px 5px}
:root[data-theme="sticker"] .bg-aurora{display:none}

/* ---- 3 · the type is the logo -----------------------------------------
   White letters, blue keyline behind them, offset down and right. That is
   the wordmark, and putting it on the headings is what makes a screen of
   attendance percentages unmistakably this app. In em, so it holds at every
   size, and never on body copy — a paragraph with a shadow is unreadable. */
:root[data-theme="sticker"] .dsp{
  letter-spacing:-.045em;
  text-shadow:.032em .038em 0 rgba(45,127,255,.62),
              .062em .076em 0 rgba(10,71,176,.34)}
:root[data-theme="sticker"] .d4,
:root[data-theme="sticker"] .brand-t b{text-shadow:none}
:root[data-theme="sticker"] .dsp .mark,
:root[data-theme="sticker"] .d1 .mark,
:root[data-theme="sticker"] .d2 .mark{
  background:linear-gradient(transparent 56%,var(--mark-1) 56%,var(--mark-1) 95%,transparent 95%);
  padding:0 .06em;border-radius:3px}
:root[data-theme="sticker"] .lab{color:var(--tx-3);letter-spacing:.17em;font-weight:700}
:root[data-theme="sticker"] .lead{color:var(--tx-2)}
/* the mono figures are the loud thing on a screen, so they get the yellow */
:root[data-theme="sticker"] .tile b,
:root[data-theme="sticker"] .kpi b,
:root[data-theme="sticker"] .wl-big .mono,
:root[data-theme="sticker"] .bal-n{
  color:var(--yel);text-shadow:0 0 22px rgba(255,196,0,.28)}

/* a section heading is underlined with the same blue, tapering out */
:root[data-theme="sticker"] .sec-h::after{
  height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(45,127,255,.55),transparent 78%)}
:root[data-theme="sticker"] .sec-h .dsp{position:relative}
:root[data-theme="sticker"] .sec-h .dsp::after{
  content:"";display:block;height:4px;margin-top:6px;width:min(100%,54px);
  border-radius:3px;
  background:linear-gradient(90deg,var(--yel),var(--yel-deep));
  box-shadow:0 1px 0 rgba(0,0,0,.6),0 0 14px -2px rgba(255,196,0,.55)}

/* ---- 4 · vinyl ---------------------------------------------------------
   Every card is a piece of dark vinyl: a hairline of light along the top, a
   blue rim under the bottom, and a gloss that runs across the top third. It
   is three shadows and a gradient, so it costs nothing and it is the reason
   the theme reads as a material rather than a palette. */
:root[data-theme="sticker"] .card{
  position:relative;overflow:hidden;
  background:linear-gradient(176deg,#16161F 0%,#101017 46%,#0C0C12 100%);
  border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--vinyl),0 0 0 1px rgba(45,127,255,.05),
             0 2px 0 -1px rgba(45,127,255,.22);
  transition:box-shadow .3s var(--ease),border-color .25s var(--ease),
             transform .3s var(--pop)}
:root[data-theme="sticker"] .card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:42%;
  pointer-events:none;border-radius:var(--r) var(--r) 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.055),transparent)}
:root[data-theme="sticker"] .card:hover{
  border-color:var(--line-2);
  box-shadow:var(--vinyl),0 0 0 1px rgba(45,127,255,.12),
             0 3px 0 -1px rgba(45,127,255,.5),
             0 22px 40px -24px rgba(45,127,255,.28)}

/* the one card per screen that carries the whole theme */
:root[data-theme="sticker"] .hero,
:root[data-theme="sticker"] .bal-hero,
:root[data-theme="sticker"] .wl-hero{
  /* .hero is a bare layout grid in every other theme — no background, no
     border, no corner. This theme turns it into a card, so it has to be
     given the corner and the padding as well, or it comes out as a slab
     with four square edges while everything under it is rounded.

     position and overflow are not optional either: the sweep below is a
     pseudo-element that travels to translateX(120%), and unclipped that is
     270 pixels of page hanging off the right-hand side on a phone. */
  position:relative;overflow:hidden;
  border-radius:var(--r-lg);
  padding:clamp(14px,2vw,22px);
  border:1px solid rgba(45,127,255,.3);
  background:linear-gradient(162deg,#171A28 0%,#0E1018 52%,#0A0A10 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),
             0 3px 0 -1px var(--blu),
             0 34px 60px -30px rgba(45,127,255,.34),
             0 30px 60px -34px rgba(0,0,0,.95)}
/* light moving across it, slowly, once every nine seconds */
:root[data-theme="sticker"] .hero::after,
:root[data-theme="sticker"] .wl-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(104deg,transparent 34%,rgba(255,255,255,.07) 46%,
             rgba(45,127,255,.09) 52%,transparent 64%);
  transform:translateX(-120%);animation:skSweep 9s var(--ease) infinite}
@keyframes skSweep{40%,100%{transform:translateX(120%)}}

/* ---- 5 · enamel --------------------------------------------------------
   The one loud shape in the theme, and it means exactly one thing: this is
   on, or this is yours. Glossy yellow, black keyline, hard bottom edge. */
:root[data-theme="sticker"] .btn{
  border:1px solid var(--line-2);border-radius:13px;font-weight:700;
  background:linear-gradient(180deg,#22222D,#16161E);color:var(--tx);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 2px 0 -1px rgba(0,0,0,.8),
             0 8px 16px -10px rgba(0,0,0,.9);
  transition:transform .16s var(--pop),box-shadow .16s var(--ease),
             border-color .16s var(--ease),filter .16s}
:root[data-theme="sticker"] .btn:hover{
  border-color:var(--tx-3);transform:translateY(-2px);filter:brightness(1.12)}
:root[data-theme="sticker"] .btn:active{
  transform:translateY(1px) scale(.965);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.65)}

:root[data-theme="sticker"] .btn-p{
  border:1.5px solid var(--key);color:#0B1020;
  background:linear-gradient(180deg,var(--blu-2) 0%,var(--blu) 46%,#1361DD 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),
             inset 0 -2px 0 rgba(0,0,0,.28),
             0 4px 0 -1px rgba(6,6,10,.85),
             0 16px 26px -14px rgba(45,127,255,.6)}
:root[data-theme="sticker"] .btn-p:hover{filter:brightness(1.08)}
:root[data-theme="sticker"] .btn-p:active{
  transform:translateY(3px) scale(.975);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.4),0 1px 0 -1px rgba(6,6,10,.85)}
:root[data-theme="sticker"] .btn-bad{
  border:1.5px solid var(--key);color:#2A0512;
  background:linear-gradient(180deg,#FF87AC,#FF4F86 48%,#DE2A63);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 0 -1px rgba(6,6,10,.85)}
:root[data-theme="sticker"] .btn-q{background:none;border-style:dashed}
:root[data-theme="sticker"] .btn-ai{
  border:1px dashed var(--blu);color:var(--blu-2);background:rgba(45,127,255,.07)}
:root[data-theme="sticker"] .btn[disabled]{
  opacity:1;background:#121219;color:var(--tx-3);
  border:1px dashed var(--line-2);box-shadow:none}

/* a pin: glossy, keylined, and it never means "information" */
:root[data-theme="sticker"] .pill{
  border:1.5px solid var(--key);color:#0B0B10;font-weight:800;padding:3px 11px;
  background:linear-gradient(180deg,#FFFDF8,#D9D5CB);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 0 -1px rgba(6,6,10,.8)}
:root[data-theme="sticker"] .pill-ok{
  background:linear-gradient(180deg,#7DF0AC,#2FD46B 52%,#16A94E)}
:root[data-theme="sticker"] .pill-warn{
  background:linear-gradient(180deg,var(--yel-2),var(--yel) 52%,var(--yel-deep))}
:root[data-theme="sticker"] .pill-bad{
  background:linear-gradient(180deg,#FF9BBD,#FF4F86 52%,#DE2A63);color:#2A0512}

:root[data-theme="sticker"] .chip{
  border:1px solid var(--line-2);border-radius:100px;font-weight:650;
  background:linear-gradient(180deg,#1C1C25,#141419)}
:root[data-theme="sticker"] .chip[aria-pressed="true"]{
  border:1.5px solid var(--key);color:#1A1203;
  background:linear-gradient(180deg,var(--yel-2),var(--yel) 54%,var(--yel-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 0 -1px rgba(6,6,10,.8)}
:root[data-theme="sticker"] .seg{
  background:#0D0D13;border:1px solid var(--line);padding:4px;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.55)}
:root[data-theme="sticker"] .seg button[aria-pressed="true"]{
  color:#0B0B10;font-weight:800;
  background:linear-gradient(180deg,#FFFDF8,#DBD7CD);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 0 -1px rgba(6,6,10,.75)}

/* ---- 6 · getting around ----------------------------------------------- */
:root[data-theme="sticker"] .rail{
  border-right:1px solid var(--rail-line);
  background:linear-gradient(180deg,#0A0A11,#07070C)}
:root[data-theme="sticker"] .rail::after{
  content:"";position:absolute;right:0;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,rgba(45,127,255,.55),transparent 42%)}
:root[data-theme="sticker"] .nav-g{color:var(--tx-3)}
:root[data-theme="sticker"] .nav-ind{
  border-radius:13px;border:1.5px solid var(--key);
  background:linear-gradient(180deg,var(--yel-2),var(--yel) 52%,var(--yel-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 3px 0 -1px rgba(6,6,10,.85),
             0 12px 24px -12px rgba(255,196,0,.5)}
:root[data-theme="sticker"] .nv[aria-current="page"],
:root[data-theme="sticker"] .nv[aria-current="page"] .nv-i{color:#1A1203}
:root[data-theme="sticker"] .nv[aria-current="page"]{font-weight:800}
:root[data-theme="sticker"] .nv .nv-i{stroke-width:2}
:root[data-theme="sticker"] .nv[aria-current="page"] .nv-n{
  background:rgba(26,18,3,.22);color:#1A1203;font-weight:800}

:root[data-theme="sticker"] .mtop{
  background:var(--glass);border-bottom:1px solid var(--line)}
/* a hairline of moving light under the header. It is the only thing in the
   theme that never stops, which is what makes the app feel plugged in. */
:root[data-theme="sticker"] .mtop::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent,var(--blu) 22%,var(--yel) 50%,
             var(--blu) 78%,transparent);
  background-size:220% 100%;opacity:.75;animation:skRun 11s linear infinite}
@keyframes skRun{to{background-position:220% 0}}

:root[data-theme="sticker"] .tabs{
  background:var(--glass);border-top:1px solid var(--line)}
:root[data-theme="sticker"] .tb svg{stroke-width:2}
:root[data-theme="sticker"] .tab-ind{
  border:1.5px solid var(--key);
  background:linear-gradient(180deg,var(--yel-2),var(--yel) 52%,var(--yel-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 0 -1px rgba(6,6,10,.8)}
:root[data-theme="sticker"] .tb[aria-current="page"]{color:#1A1203}
:root[data-theme="sticker"] .tb[aria-current="page"] svg{stroke-width:2.4}
:root[data-theme="sticker"] .tb[aria-current="page"]::before{display:none}

/* ---- 7 · fields -------------------------------------------------------- */
:root[data-theme="sticker"] .inp,
:root[data-theme="sticker"] select.inp,
:root[data-theme="sticker"] textarea.inp{
  background:#0B0B11;border:1px solid var(--line-2);border-radius:13px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6)}
:root[data-theme="sticker"] .inp:focus{
  border-color:var(--blu);background:#0D0D14;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.5),0 0 0 3px rgba(45,127,255,.28)}
:root[data-theme="sticker"] :focus-visible{outline-color:var(--yel)}
:root[data-theme="sticker"] ::selection{background:rgba(45,127,255,.4)}

/* ---- 8 · the quieter parts -------------------------------------------- */
:root[data-theme="sticker"] .empty{
  border:2px dashed var(--line-2);border-radius:var(--r-lg);
  background:
    radial-gradient(70% 60% at 50% 0,rgba(45,127,255,.07),transparent 70%)}
:root[data-theme="sticker"] .note{
  border:1px solid var(--line-2);border-left:4px solid var(--blu);
  border-radius:13px;background:linear-gradient(180deg,#191921,#121218)}
:root[data-theme="sticker"] .toast{
  border:1.5px solid var(--key);color:#0B0B10;font-weight:750;border-radius:14px;
  background:linear-gradient(180deg,#FFFDF8,#DCD8CE);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 0 -1px rgba(6,6,10,.8),
             0 28px 46px -22px rgba(0,0,0,.95)}
:root[data-theme="sticker"] .toast svg{stroke:#0B0B10}

:root[data-theme="sticker"] .meter,
:root[data-theme="sticker"] .wl-bar,
:root[data-theme="sticker"] .blitz-bar,
:root[data-theme="sticker"] .cram-min-bar{
  background:#0A0A10;border:1px solid var(--line-2);border-radius:100px;
  overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,.7)}
:root[data-theme="sticker"] .meter>*,
:root[data-theme="sticker"] .wl-bar>*{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
:root[data-theme="sticker"] .ring circle:last-child{stroke-linecap:round}

:root[data-theme="sticker"] dialog{
  background:linear-gradient(180deg,#14141C,#0C0C12);
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),
             0 3px 0 -1px rgba(45,127,255,.35),
             0 56px 96px -42px rgba(0,0,0,.98)}
:root[data-theme="sticker"] dialog::backdrop{
  background:rgba(3,3,6,.76);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px)}

/* ---- 9 · the mark ------------------------------------------------------
   Die-cut, so no plate behind it. It drifts by two pixels over six seconds,
   which is the difference between a logo and a sticker somebody pressed on
   with their thumb. */
:root[data-theme="sticker"] .brand-m{
  background:none;box-shadow:none;border-radius:0;width:40px;height:40px}
:root[data-theme="sticker"] .brand-m svg{display:none}
:root[data-theme="sticker"] .brand-m img.sk-brand{
  width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.7));
  animation:skFloat 6s var(--ease) infinite}
@keyframes skFloat{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-2.5px) rotate(-1.6deg)}}
:root[data-theme="sticker"] .brand-t b{letter-spacing:-.04em}
:root[data-theme="sticker"] .brand-t i{color:var(--yel);opacity:.95}

/* ---- 10 · the credit token --------------------------------------------
   A balance is a number until it has an edge. */
.sk-coin{display:inline-grid;place-items:center;width:.86em;height:.86em;flex:none;
  margin-right:.24em;vertical-align:.02em;
  border-radius:50%;position:relative;overflow:hidden;
  background:radial-gradient(circle at 34% 26%,#FFEFA8,#FFC400 54%,#B87E00);
  box-shadow:0 0 0 .04em #06060A,0 0 0 .09em rgba(255,224,112,.42),
             inset 0 -2px 3px rgba(120,66,0,.55),
             inset 0 2px 2px rgba(255,255,255,.6)}
.sk-coin svg{width:60%;height:60%;fill:#6E4300;stroke:none}
.sk-coin::after{content:"";position:absolute;inset:0;
  background:linear-gradient(104deg,transparent 38%,rgba(255,255,255,.8) 48%,transparent 58%);
  transform:translateX(-120%)}
.sk-coin.sk-shine::after{animation:skShine 1s var(--ease)}
@keyframes skShine{to{transform:translateX(120%)}}

/* ---- 11 · the collectible ---------------------------------------------
   The shop window. Styled outside the theme block on purpose: it has to look
   like itself in Paper and Ink too, where nobody has bought it yet. */
.sk-pack{position:relative;display:grid;gap:18px;align-items:center;
  grid-template-columns:210px minmax(0,1fr);
  padding:16px;border-radius:24px;overflow:hidden;
  border:1px solid rgba(45,127,255,.3);
  background:linear-gradient(158deg,#15182A 0%,#0C0D15 58%,#08080D 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),
             0 3px 0 -1px rgba(45,127,255,.45),
             0 28px 52px -28px rgba(45,127,255,.3);
  transition:transform .32s var(--pop),box-shadow .32s var(--ease)}
.sk-pack:hover{transform:translateY(-4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),
             0 5px 0 -1px var(--blu,#2D7FFF),
             0 38px 62px -28px rgba(45,127,255,.45)}
.sk-pack-art{position:relative;height:150px;border-radius:17px;overflow:hidden;
  display:grid;place-items:center;
  background:
    radial-gradient(78% 74% at 50% 14%,rgba(45,127,255,.35),transparent 72%),
    linear-gradient(170deg,#191C2E,#08080E);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.sk-pack-art::before{content:"";position:absolute;inset:0;opacity:.09;
  background-image:radial-gradient(#fff .8px,transparent .9px);background-size:5px 5px}
.sk-pack-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(104deg,transparent 36%,rgba(255,255,255,.16) 48%,transparent 60%);
  transform:translateX(-120%);animation:skShine 4.5s var(--ease) infinite}
.sk-pack-art img{position:relative;z-index:1;width:74%;height:auto;display:block;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.75))}

.sk-pack-tx{min-width:0;display:flex;flex-direction:column;gap:7px}
.sk-pack h3{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-size:1.2rem;letter-spacing:-.035em;margin:0;color:#FAF7F0;
  text-shadow:.03em .036em 0 rgba(45,127,255,.7)}
.sk-pack p{margin:0;font-size:.86rem;color:#ADAAB6;line-height:1.5;max-width:52ch}
.sk-pack-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}
.sk-price{display:inline-flex;align-items:center;gap:8px;font-weight:800;
  font-family:"JetBrains Mono",monospace;font-size:.94rem;color:#FFC400}
.sk-rare{position:absolute;top:12px;right:-34px;rotate:34deg;width:128px;z-index:3;
  text-align:center;font-size:.58rem;font-weight:800;letter-spacing:.17em;
  padding:5px 0;color:#1A1203;
  background:linear-gradient(180deg,#FFE070,#FFC400 54%,#D89600);
  box-shadow:0 3px 10px rgba(0,0,0,.6)}
.sk-owned{background:linear-gradient(180deg,#7DF0AC,#2FD46B 54%,#16A94E);color:#04230F}

@media (max-width:620px){
  .sk-pack{grid-template-columns:1fr}
  .sk-pack-art{height:132px}
}

/* ---- 12 · opening it --------------------------------------------------
   Seven hundred credits is most of a term of actually helping people. It
   does not get a toast. A sealed foil pack, a peel, the mark underneath. */
.sk-open{position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  padding:20px;opacity:0;transition:opacity .45s var(--ease);
  background:
    radial-gradient(70% 60% at 50% 34%,rgba(45,127,255,.22),transparent 70%),
    rgba(3,3,6,.93);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.sk-open.on{opacity:1}
.sk-open-in{position:relative;width:min(440px,92vw);text-align:center}
.sk-stage{display:grid;min-height:min(430px,60vh);align-items:center}
.sk-stage>*{grid-area:1/1;justify-self:center;align-self:center}
.sk-reveal{visibility:hidden;width:100%}
.sk-open.go .sk-reveal{visibility:visible}

.sk-foil{position:relative;width:min(268px,70vw);aspect-ratio:3/4;border-radius:26px;
  overflow:hidden;transform-origin:50% 86%;
  background:linear-gradient(152deg,#1B2033 0%,#0A0A12 48%,#1B2033 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),
             0 3px 0 -1px rgba(45,127,255,.5),
             0 44px 76px -32px rgba(0,0,0,.96)}
.sk-foil::before{content:"";position:absolute;inset:0;opacity:.1;
  background-image:radial-gradient(#fff .8px,transparent .9px);background-size:5px 5px}
.sk-foil::after{content:"";position:absolute;inset:0;
  background:linear-gradient(112deg,transparent 30%,rgba(255,255,255,.34) 45%,
             rgba(45,127,255,.3) 53%,transparent 68%);
  transform:translateX(-120%);animation:skShine 2.6s var(--ease) infinite}
.sk-foil b{position:absolute;left:0;right:0;top:41%;font-size:.78rem;
  letter-spacing:.34em;font-weight:800;color:#8B94AD}
.sk-foil i{position:absolute;left:0;right:0;top:32%;font-style:normal;
  font-size:.58rem;letter-spacing:.3em;font-weight:800;color:#6B748C}
.sk-open.go .sk-foil{animation:skPop .76s var(--pop) .26s forwards}
@keyframes skPop{
  32%{transform:scale(1.05) rotate(-1.4deg)}
  100%{transform:scale(.6) translateY(-44px) rotate(2deg);opacity:0}}

/* the tear strip. A white sheet wiping off a dark pack was a flash of
   nothing; a perforated top that actually comes away is the beat everybody
   already knows from opening a packet. */
.sk-tear{position:absolute;left:-2px;right:-2px;top:-2px;height:23%;z-index:2;
  border-radius:26px 26px 3px 3px;
  background:linear-gradient(180deg,#2C3552,#161B2C);
  border-bottom:2px dashed rgba(255,255,255,.3);
  box-shadow:0 6px 14px -6px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.14);
  display:grid;place-items:center;
  font-size:.56rem;letter-spacing:.34em;font-weight:800;color:#7E88A6}
.sk-open.go .sk-tear{animation:skTear .52s var(--ease) forwards}
@keyframes skTear{
  to{transform:translateY(-130%) rotate(-7deg);opacity:0}}

.sk-mark-out{display:grid;place-items:center;min-height:180px;margin-bottom:10px}
.sk-mark-out img{width:clamp(150px,44vw,196px);height:auto;opacity:0;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.75))}
.sk-open.go .sk-mark-out img{animation:skLand .72s var(--pop) .72s forwards}
@keyframes skLand{
  from{opacity:0;transform:translateY(30px) scale(.44) rotate(-12deg)}
  70%{opacity:1}
  to{opacity:1;transform:none}}

.sk-open-t{opacity:0}
.sk-open.go .sk-open-t{animation:skUp .6s var(--ease) 1.2s forwards}
@keyframes skUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.sk-open-t h2{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-size:clamp(1.45rem,5.6vw,1.95rem);letter-spacing:-.04em;margin:0 0 6px;
  color:#FAF7F0;text-shadow:.032em .038em 0 rgba(45,127,255,.7)}
.sk-open-t p{margin:0 0 18px;color:#ADAAB6;font-size:.94rem}

/* the confetti a completed thing throws.
   It lives inside one clipped layer rather than loose on the body: a fixed
   element that flies past the right edge still counts towards the page's
   scrollable width on a phone, and a button near the edge threw pieces two
   hundred pixels into nowhere. */
.sk-conf{position:fixed;inset:0;z-index:320;pointer-events:none;overflow:hidden;
  contain:strict}
.sk-burst{position:absolute;width:10px;height:10px;
  border-radius:3px;animation:skBurst .8s var(--ease) forwards}
@keyframes skBurst{
  from{opacity:1;transform:translate(0,0) scale(1) rotate(0)}
  to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3) rotate(var(--rz))}}

/* ---- 13 · the splash --------------------------------------------------
   Once per launch, under a second. A splash you sit through twice is a bug. */
.sk-splash{position:fixed;inset:0;z-index:290;display:grid;place-items:center;
  gap:18px;grid-auto-flow:row;pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% 46%,rgba(45,127,255,.22),transparent 70%),#06060A;
  animation:skFade .42s var(--ease) .68s forwards}
.sk-splash img{width:min(250px,58vw);animation:skLandNow .55s var(--pop) both;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.75))}
@keyframes skLandNow{
  from{opacity:0;transform:scale(.6) rotate(-9deg)}
  to{opacity:1;transform:none}}
@keyframes skFade{to{opacity:0;visibility:hidden}}

/* ---- 14 · motion ------------------------------------------------------ */
:root[data-theme="sticker"] .view.on{animation:skPage .4s var(--ease)}
@keyframes skPage{
  from{opacity:0;transform:translateY(10px) scale(.994);filter:blur(3px)}
  to{opacity:1;transform:none;filter:none}}

@media (prefers-reduced-motion:reduce){
  .sk-splash{display:none}
  :root[data-theme="sticker"] .view.on{animation:none}
  :root[data-theme="sticker"] .mtop::after,
  :root[data-theme="sticker"] .hero::after,
  :root[data-theme="sticker"] .wl-hero::after,
  :root[data-theme="sticker"] .brand-m img.sk-brand,
  .sk-foil::after,.sk-pack-art::after,.sk-coin::after{animation:none}
  .sk-open.go .sk-mark-out img,.sk-open.go .sk-open-t{
    animation:none;opacity:1;transform:none}
}

/* ---- 15 · smaller screens ---------------------------------------------
   Nothing reflows. The theme owns colour, edges and light — not layout. */
@media (max-width:760px){
  :root[data-theme="sticker"] .brand-m{width:34px;height:34px}
  :root[data-theme="sticker"] .dsp{
    text-shadow:.028em .032em 0 rgba(45,127,255,.6)}
}


/* =========================================================================
   STICKER CLUB — the parts that make it a different app
   -------------------------------------------------------------------------
   Everything below is shape and light. No layout value changes, so a screen
   still measures the same in this theme as in Ink; it just does not look
   remotely like it.
   ========================================================================= */

/* ---- softer, rounder, chunkier -----------------------------------------
   The single biggest tell between two dark themes is the corner. Ink is a
   16px app. This one is a 22px app, with a keyline you can actually see. */
:root[data-theme="sticker"]{--r:22px; --r-sm:14px; --r-lg:30px}
:root[data-theme="sticker"] .card{border-width:1.5px}

/* the greeting sits inside the card now, so its accent bar comes off the
   edge and becomes a proper stripe */
:root[data-theme="sticker"] .hero-l{padding-left:20px}
:root[data-theme="sticker"] .hero-l::before{
  width:5px;border-radius:5px;
  background:linear-gradient(180deg,var(--yel),var(--blu));
  box-shadow:0 0 16px -2px rgba(255,196,0,.55)}

/* ---- the stat strip becomes four separate chips ------------------------
   One divided slab is a table. Four cut-out chips, each with its own
   coloured top edge, is a dashboard — and it is the row a student's eye
   lands on first, so it is worth the difference. */
:root[data-theme="sticker"] .strip{
  border:0;background:none;box-shadow:none;overflow:visible;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,152px),1fr))}
:root[data-theme="sticker"] .strip-i{
  border:1.5px solid var(--line);border-radius:var(--r);
  background:linear-gradient(176deg,#16161F,#0D0D13);
  box-shadow:var(--vinyl);position:relative;overflow:hidden;
  transition:transform .26s var(--pop),box-shadow .26s var(--ease),
             border-color .2s var(--ease)}
:root[data-theme="sticker"] .strip-i::before{
  content:"";position:absolute;left:14px;right:14px;top:0;height:3px;border-radius:0 0 3px 3px;
  background:var(--blu);opacity:.85}
:root[data-theme="sticker"] .strip-i:nth-child(2)::before{background:var(--yel)}
:root[data-theme="sticker"] .strip-i:nth-child(3)::before{background:var(--ink-3)}
:root[data-theme="sticker"] .strip-i:nth-child(4)::before{background:var(--ink-1)}
:root[data-theme="sticker"] .strip-i:hover{
  background:linear-gradient(176deg,#1A1A25,#101017);border-color:var(--line-2)}
@media (hover:hover){
  :root[data-theme="sticker"] .strip-i:hover{transform:translateY(-3px)}
}

/* ---- the week strip ----------------------------------------------------- */
:root[data-theme="sticker"] .wk-b{
  border-radius:12px;background:#0C0C12;border:1.5px solid var(--line)}
:root[data-theme="sticker"] .wk-b i{border-radius:10px}
:root[data-theme="sticker"] .wk-d.now .wk-b{
  border-color:var(--blu);box-shadow:0 0 16px -4px rgba(45,127,255,.7)}
:root[data-theme="sticker"] .wk-d.now span{color:var(--blu-2)}

/* ---- subject rows ------------------------------------------------------- */
:root[data-theme="sticker"] .pl{border-width:1.5px;border-radius:var(--r-sm)}
@media (hover:hover){
  :root[data-theme="sticker"] .pl:hover{
    border-color:var(--blu);box-shadow:0 10px 22px -14px rgba(45,127,255,.6)}
}
/* the dot beside a subject gets its own halo, so the six inks read as six
   things rather than six specks */
:root[data-theme="sticker"] .dot{box-shadow:0 0 0 3px color-mix(in srgb,currentColor 18%,transparent)}

/* ---- the level ring ----------------------------------------------------- */
:root[data-theme="sticker"] .ring circle:last-child{
  filter:drop-shadow(0 0 5px color-mix(in srgb,currentColor 65%,transparent))}

/* ---- Circle, in this theme ---------------------------------------------- */
:root[data-theme="sticker"] .cp{
  border-width:1.5px;
  background:linear-gradient(176deg,#16161F,#101017);box-shadow:var(--vinyl)}
@media (hover:hover){
  :root[data-theme="sticker"] .cp:hover{
    border-color:var(--blu);box-shadow:var(--vinyl),0 14px 28px -18px rgba(45,127,255,.55)}
}
:root[data-theme="sticker"] .cp-b.on{color:var(--yel);background:rgba(255,196,0,.14)}
:root[data-theme="sticker"] .cp-av{background:var(--blu);color:#04101F;font-weight:800}

/* ---- the store, in this theme ------------------------------------------- */
:root[data-theme="sticker"] .st{border-width:1.5px;box-shadow:var(--vinyl)}
:root[data-theme="sticker"] .st-art{
  background:
    radial-gradient(84% 76% at 50% 6%,rgba(45,127,255,.34),transparent 72%),
    linear-gradient(170deg,#191C2C,#08080E);
  border-bottom:1.5px solid var(--line)}
:root[data-theme="sticker"] .st-art::after{
  content:"";position:absolute;inset:0;opacity:.08;
  background-image:radial-gradient(#fff .8px,transparent .9px);background-size:5px 5px}
:root[data-theme="sticker"] .st-go{
  border:1.5px solid var(--key);color:#1A1203;
  background:linear-gradient(180deg,var(--yel-2),var(--yel) 54%,var(--yel-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 0 -1px rgba(6,6,10,.8)}

/* ---- the theme chooser, in this theme ------------------------------------ */
:root[data-theme="sticker"] .th{border-width:1.5px}
:root[data-theme="sticker"] .th[aria-pressed="true"]{
  border-color:var(--yel);box-shadow:0 0 0 1px var(--yel),0 10px 24px -14px rgba(255,196,0,.5)}
:root[data-theme="sticker"] .th-on{
  background:linear-gradient(180deg,var(--yel-2),var(--yel) 54%,var(--yel-deep));
  color:#1A1203;box-shadow:0 0 0 1.5px var(--key)}

/* ---- "soon", in this theme ---------------------------------------------- */
:root[data-theme="sticker"] .soon{
  border:1.5px dashed rgba(45,127,255,.45);border-radius:var(--r-lg);
  background:linear-gradient(170deg,#12141F,#0A0A10)}
:root[data-theme="sticker"] .soon-tag{
  background:linear-gradient(180deg,var(--yel-2),var(--yel) 54%,var(--yel-deep));
  color:#1A1203}
:root[data-theme="sticker"] .soon-row span{
  border:1.5px solid var(--line-2);color:var(--tx-2);
  background:rgba(255,255,255,.02)}