/* Onboarding (2026-10-09): the profile form, the intro carousel, the Training hub, coach marks, the member card, and
   the bits of More and the leaderboard that open them. Owner 2026-10-09, for Brandon: "an intro to the website/app
   once your role is picked ... carousel slideshow type thing" and "full tutorial boxes tailored to each individual
   role". Brandon 2026-10-08: "when you tap on their name, it shows state and eBay store link."
   Everything here builds on app.css (its colors, fonts, .card, .btn, .glow); nothing in app.css is overridden
   except where a rule says so. */

.ob-eyebrow{font:700 11px/1.3 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--cyan)}
.ob-ring{position:absolute;inset:-7px;border-radius:50%;padding:2px;pointer-events:none;
  background:conic-gradient(from 210deg,var(--cyan),var(--violet),var(--magenta),var(--cyan));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));
  filter:drop-shadow(0 0 8px rgba(34,228,255,.55));animation:spin 16s linear infinite}

/* ---- Finish your profile (welcome_profile.html) ----
   While something is missing every page sends the member back here (profile.py), so the tabs and the header would
   only bounce them back: body.gate drops them and the page stands alone. */
body.gate header.top,body.gate nav.tabbar{display:none}
body.gate{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
.pf{max-width:440px;margin:0 auto;padding:4px 0 8px;display:flex;flex-direction:column;align-items:center;text-align:center}
body.gate .pf{min-height:calc(100vh - 60px);justify-content:center}
.pf-badge{position:relative;width:92px;height:92px;margin:6px 0 18px;flex:0 0 auto}
.pf-badge img{width:100%;height:100%;border-radius:50%;display:block;box-shadow:0 0 44px rgba(139,92,255,.5),0 0 90px rgba(34,228,255,.16)}
.pf.edit .pf-badge{width:68px;height:68px;margin-bottom:12px}
.pf-title{font:600 clamp(22px,6.4vw,27px)/1.2 var(--display);letter-spacing:.02em;margin:8px 0}
.pf-why{color:var(--dim);margin:0 0 18px;max-width:360px;font-size:14.5px;line-height:1.5}
.pf .err{width:100%;text-align:left;display:flex;gap:10px;align-items:flex-start;margin:0 0 14px}
.pf .err svg{flex:0 0 auto;width:18px;height:18px;margin-top:1px;stroke:currentColor;fill:none;stroke-width:2}
.pf-card{width:100%;text-align:left;padding:4px 18px 20px}
.pf-opt{display:inline-block;margin-left:6px;padding:0 7px;border-radius:99px;border:1px solid var(--line);font-size:10px;letter-spacing:.1em;vertical-align:1px}
.pf-select,.pf-input{position:relative}
.pf-ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:var(--dim);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;pointer-events:none;transition:stroke .2s}
.pf-select select{-webkit-appearance:none;appearance:none;padding-left:42px;padding-right:40px;cursor:pointer;text-overflow:ellipsis}
.pf-select select:invalid{color:var(--dim)}
.pf-select option{color:var(--text);background:#0b0a17}
.pf-chev{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--dim);fill:none;stroke-width:2.2;pointer-events:none}
.pf-input input{padding-left:42px;padding-right:106px}
.pf-test{position:absolute;right:6px;top:50%;transform:translateY(-50%);height:36px;padding:0 12px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel2);color:var(--cyan);font:700 12.5px var(--body);cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.pf-test svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2}
.pf-test:disabled{opacity:.4;cursor:default}
.pf-select.ok .pf-ic{stroke:var(--cyan)}
.pf-input.ok .pf-ic{stroke:var(--good)}
.pf-warn{color:var(--warn);font-size:13px;margin:8px 2px 0}
.pf-how{margin:12px 0 0;padding:12px 12px 11px;border-radius:14px;background:rgba(34,228,255,.05);border:1px solid rgba(34,228,255,.18);font-size:13px}
.pf-how b{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin-bottom:9px;font-weight:700}
.pf-steps{display:flex;flex-direction:column;gap:7px;margin:0;padding:0;list-style:none}
.pf-steps span{display:inline-flex;align-items:center;gap:9px;font-weight:600;color:var(--text)}
.pf-steps i{width:20px;height:20px;border-radius:50%;background:var(--grad);color:#05040c;font:700 10.5px/20px var(--display);text-align:center;font-style:normal}
.pf-how small{display:block;margin-top:9px;font-size:12px}
.pf-note{color:var(--dim);font-size:12.5px;margin:14px 0 0;text-align:center}

/* Profile: the state and store card (profile.html) */
.sc{display:flex;flex-direction:column;gap:14px}
.sc-row{display:flex;gap:12px;align-items:center;min-width:0}
.sc-ic{flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(139,92,255,.12);border:1px solid var(--line)}
.sc-ic svg{width:18px;height:18px;stroke:var(--cyan);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sc-row>div{min-width:0;flex:1}
.sc-row small{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.sc-row b,.sc-row a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.sc-row .missing{color:var(--warn);font-weight:600}
.sc-acts{display:flex;gap:8px;flex-wrap:wrap;padding-top:2px}
.sc-acts .btn{flex:1 1 auto;text-align:center}

/* ---- the intro carousel (tour.html, tour.js) ----
   Full screen like a conversation: no header, no tab bar, and the window never scrolls. Slides sit side by side in
   one scroller that snaps; each slide scrolls on its own when it is taller than a small phone. */
html:has(body.tour){height:100%;overflow:hidden}
body.tour{height:100%;min-height:0;padding:0;overflow:hidden}
body.tour header.top,body.tour nav.tabbar{display:none}
body.tour main{position:fixed;inset:0;max-width:none;display:flex;flex-direction:column}
body.tour .flashes{display:none}
.tour{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.tour::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(80vw 50vh at 50% 30%,rgba(139,92,255,.16),transparent 70%),radial-gradient(50vw 40vh at 100% 100%,rgba(255,61,242,.08),transparent 70%)}
.t-top{flex:0 0 auto;width:100%;max-width:1080px;margin:0 auto;padding:calc(12px + env(safe-area-inset-top)) 16px 2px}
.t-seg{display:flex;gap:4px}
/* Each segment shows its own slice of the one gradient, so the filled bar reads as a single line. */
.t-seg i{flex:1;height:3px;border-radius:3px;background:rgba(143,137,189,.2);overflow:hidden;position:relative}
.t-seg i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--grad);
  background-size:calc(var(--n) * 100%) 100%;background-position:calc(var(--k) / max(var(--n) - 1, 1) * 100%) 0;
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.32,.72,0,1)}
.t-seg i.done::after,.t-seg i.on::after{transform:none}
.t-seg i.on{box-shadow:0 0 10px rgba(139,92,255,.75)}
.t-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;min-height:36px}
.t-brand{display:flex;align-items:center;gap:9px;font:600 12px var(--display);letter-spacing:.2em}
.t-brand img{width:28px;height:28px;border-radius:50%;box-shadow:0 0 14px rgba(139,92,255,.55)}
.t-skip{height:34px;padding:0 15px;border-radius:99px;border:1px solid var(--line);background:rgba(17,15,34,.75);color:var(--text);
  font:600 13px var(--body);cursor:pointer;transition:opacity .2s}
.t-skip.gone{opacity:0;pointer-events:none}
.t-track{flex:1 1 0;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;outline:none;-webkit-overflow-scrolling:touch}
.t-track::-webkit-scrollbar{display:none}
.t-slide{flex:0 0 100%;min-width:0;display:flex;overflow-y:auto;overscroll-behavior-y:contain;scroll-snap-align:center;scroll-snap-stop:always}
.t-in{margin:auto;width:100%;max-width:520px;padding:14px 22px 22px;display:flex;flex-direction:column;align-items:center;gap:22px}
.t-visual{width:100%;display:grid;place-items:center}
/* The frame has its final shape from the file's own size (--ar) before anything loads: no jump. */
.t-frame{--mh:min(42vh,440px);position:relative;width:min(100%,calc(var(--mh) * var(--ar)));aspect-ratio:var(--ar);border-radius:22px;overflow:hidden;
  background:radial-gradient(120% 90% at 18% 0%,rgba(139,92,255,.28),transparent 62%),#0b0a17;
  box-shadow:0 0 0 1px rgba(139,92,255,.38),0 24px 60px rgba(0,0,0,.55),0 0 54px rgba(139,92,255,.22)}
.t-frame img,.t-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:block}
.t-orb{position:relative;width:min(50vw,200px);aspect-ratio:1;display:grid;place-items:center;margin:8px 0 4px}
.t-orb::before{content:"";position:absolute;inset:-22%;border-radius:50%;
  background:radial-gradient(circle,rgba(139,92,255,.42),rgba(34,228,255,.1) 46%,transparent 70%)}
.o-core{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.2),transparent 32%),radial-gradient(circle at 50% 64%,#3a2287 0%,#1a1142 56%,#0b0920 100%);
  box-shadow:inset 0 0 40px rgba(34,228,255,.22),0 0 0 1px rgba(139,92,255,.5),0 0 60px rgba(139,92,255,.45)}
.o-emoji{position:relative;font:clamp(62px,21vw,90px)/1 system-ui,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
  filter:drop-shadow(0 0 18px rgba(139,92,255,.75));animation:orb-float 6s ease-in-out infinite}
@keyframes orb-float{50%{transform:translateY(-7px)}}
.t-copy{width:100%;display:flex;flex-direction:column;gap:10px}
.t-title{font:600 clamp(23px,6.4vw,31px)/1.2 var(--display);letter-spacing:.005em;text-transform:none;color:var(--text);margin:0}
.t-body{margin:0;color:#c9c4ee;font-size:16px;line-height:1.55;white-space:pre-line}
.t-bul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.t-bul li{position:relative;padding-left:22px;font-size:15px;line-height:1.45}
.t-bul li::before{content:"";position:absolute;left:2px;top:.48em;width:9px;height:9px;border-radius:50%;background:var(--grad);
  box-shadow:0 0 10px rgba(139,92,255,.75)}
.t-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:11px 16px;border-radius:14px;
  border:1px solid rgba(139,92,255,.55);background:rgba(139,92,255,.1);color:var(--text);font:700 14px var(--body)}
.t-cta svg{width:16px;height:16px;stroke:var(--cyan);fill:none;stroke-width:2.2}
.t-cta:active{background:rgba(139,92,255,.22)}
.t-end .t-copy{align-items:center;text-align:center}
.t-end .t-title{font-size:clamp(26px,7.4vw,36px)}
.t-end .t-cta{align-self:center;margin-top:12px}
button.t-cta{font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.t-nav{flex:0 0 auto;width:100%;max-width:560px;margin:0 auto;display:flex;gap:10px;padding:10px 16px calc(14px + env(safe-area-inset-bottom))}
.t-back,.t-next{height:52px;border-radius:16px;font:700 15px var(--body);cursor:pointer;-webkit-user-select:none;user-select:none}
.t-back{flex:0 0 32%;border:1px solid var(--line);background:rgba(11,10,23,.7);color:var(--text);transition:opacity .2s}
.t-back:disabled{opacity:0;pointer-events:none}
.t-next{flex:1;border:0;background:var(--grad);color:#05040c;box-shadow:0 8px 28px rgba(139,92,255,.4);transition:transform .08s ease}
.t-next:active{transform:translateY(1px)}
.t-next[hidden]{display:none}
/* The slide that arrives lifts its words in; the frame and the orb hold still. */
.t-slide.on .t-copy>*{animation:t-rise .5s cubic-bezier(.2,.8,.2,1) both}
.t-slide.on .t-copy>:nth-child(2){animation-delay:.04s}.t-slide.on .t-copy>:nth-child(3){animation-delay:.08s}
.t-slide.on .t-copy>:nth-child(4){animation-delay:.12s}.t-slide.on .t-copy>:nth-child(5){animation-delay:.16s}
@keyframes t-rise{from{opacity:.25;transform:translateY(10px)}}
/* A written slide with a picture (Nocty's face) on a phone under the biggest size: the picture takes less of the
   screen, so its three questions fit without scrolling inside the slide. The biggest phones keep the full picture. */
@media (max-width:899px) and (max-height:880px){.t-intro .t-frame{--mh:30vh}}
/* 700, not 620, since 2026-10-12: the slides say more now, and a small iPhone (667 tall) scrolled inside each one. */
@media (max-height:700px){
  .t-frame{--mh:34vh}.t-orb{width:min(36vw,140px)}.o-emoji{font-size:60px}.t-in{gap:16px;padding-top:6px}
  .t-body{font-size:15px}.t-bul li{font-size:14px}
}
/* A slide with four lines under it (Brandon's Your week and Get paid, 2026-10-12) gives its picture less room, so the
   words fit a phone without scrolling inside the slide. On a short phone the picture goes and the words stay. */
@media (max-width:899px){
  .t-dense .t-in{gap:14px}
  .t-dense .t-orb{width:min(32vw,124px)}
  .t-dense .o-emoji{font-size:54px}
  .t-dense .t-bul{gap:7px}
}
@media (max-width:899px) and (max-height:700px){
  .t-dense .t-visual{display:none}
  .t-dense .t-in{padding-top:20px}
}
@media (min-width:900px){
  .t-in{max-width:1040px;flex-direction:row;align-items:center;gap:56px;padding:24px 48px}
  .t-visual{flex:0 0 44%}
  .t-copy{flex:1;min-width:0}
  .t-frame{--mh:min(62vh,560px)}
  .t-orb{width:250px}
  .t-title{font-size:38px}
  .t-body{font-size:17px}
  .t-end .t-in{flex-direction:column;gap:24px}
  .t-nav{max-width:1040px;justify-content:flex-end;padding:12px 48px calc(28px + env(safe-area-inset-bottom))}
  .t-back,.t-next{flex:0 0 170px}
  .t-top{padding-left:48px;padding-right:48px}
}

/* ---- the Training hub (learn.html) ---- */
.ln-lede{margin:-2px 0 16px;font-size:14px}
.ln-hero{position:relative;display:flex;align-items:center;gap:14px;padding:16px;border-radius:20px;color:var(--text);overflow:hidden;
  border:1px solid transparent;
  background:radial-gradient(120% 160% at 0% 0%,rgba(34,228,255,.17),transparent 55%) padding-box,
    radial-gradient(120% 160% at 100% 100%,rgba(255,61,242,.17),transparent 55%) padding-box,
    linear-gradient(180deg,var(--panel2),var(--panel)) padding-box,var(--grad) border-box}
.ln-play{flex:0 0 auto;width:54px;height:54px;border-radius:50%;background:var(--grad);display:grid;place-items:center;
  box-shadow:0 0 26px rgba(139,92,255,.6)}
.ln-play svg{width:22px;height:22px;fill:#05040c;margin-left:3px}
.ln-hero-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ln-hero-t b{font:600 16px/1.25 var(--display)}
.ln-chev{flex:0 0 auto;width:18px;height:18px;stroke:var(--dim);fill:none;stroke-width:2}
.ln-guides{display:flex;flex-direction:column;gap:10px}
.ln-guide{display:flex;align-items:flex-start;gap:14px;padding:14px;border-radius:18px;border:1px solid var(--line);color:var(--text);
  background:linear-gradient(180deg,var(--panel2),var(--panel))}
.ln-gi{flex:0 0 auto;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:24px;
  background:radial-gradient(circle at 30% 25%,rgba(34,228,255,.22),transparent 60%),#18133a;border:1px solid rgba(139,92,255,.35);
  box-shadow:0 0 18px rgba(139,92,255,.2)}
.ln-gt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ln-gt b{font-weight:700;font-size:15.5px}
.ln-gt small{font-size:13px;line-height:1.45}
.ln-min{align-self:flex-start;margin-top:5px;padding:2px 9px;border-radius:99px;border:1px solid rgba(34,228,255,.3);color:var(--cyan);
  font:700 11px/1.5 var(--body);letter-spacing:.04em}
.ln-guide .ln-chev{margin-top:15px}
.ln-sheet{display:flex;align-items:center;gap:14px;margin-top:10px;padding:14px;border-radius:18px;color:var(--text);
  border:1px dashed rgba(61,255,176,.4);background:rgba(61,255,176,.04)}
.ln-si{flex:0 0 auto;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(61,255,176,.1);border:1px solid rgba(61,255,176,.3)}
.ln-si svg{width:22px;height:22px;stroke:var(--good);fill:none;stroke-width:1.8;stroke-linejoin:round}
.ln-st{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ln-st b{font-weight:700}.ln-st small{font-size:12.5px;line-height:1.45}
.ln-dl{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:11px;background:rgba(61,255,176,.12);
  color:var(--good);font:700 12.5px var(--body)}
.ln-dl svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4}
/* Photos and videos, in the order they were posted (Step 1, Step 2...), left to right. Each box takes its shape from
   the file's size before the file arrives, kept between 3:4 and 4:3 so a row stays even (learn.html). */
.ln-media{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px 10px;align-items:start}
@media (min-width:560px){.ln-media{grid-template-columns:repeat(3,1fr)}}
.ln-m{margin:0;min-width:0}
.ln-tile{position:relative;display:block;width:100%;aspect-ratio:var(--ar);border-radius:14px;overflow:hidden;border:1px solid var(--line);
  background:#0d0b1c;color:var(--text)}
.ln-tile img{width:100%;height:100%;object-fit:cover;display:block}
.ln-tile.vid{background:radial-gradient(120% 90% at 18% 0%,rgba(139,92,255,.32),transparent 62%),linear-gradient(160deg,#17123a,#0b0a17)}
.ln-tile.vid .vid-play{width:48px;height:48px}
.ln-tile.vid .vid-play svg{width:20px;height:20px}
.ln-tile .ln-kind{position:absolute;left:8px;bottom:8px;padding:2px 8px;border-radius:99px;background:rgba(4,4,10,.72);font:700 10.5px/1.6 var(--body);
  letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.ln-tile:active{opacity:.8}
.ln-cap{margin:7px 2px 1px;font-size:13px;line-height:1.38;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ln-from{display:block;margin:0 2px;font-size:12px;font-weight:600}
.ln-nocty{display:flex;align-items:center;gap:14px;margin-top:26px;padding:16px;border-radius:20px;color:var(--text);
  background:radial-gradient(100% 140% at 0% 50%,rgba(139,92,255,.24),transparent 60%),linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid rgba(139,92,255,.45)}
.ln-owl{position:relative;flex:0 0 auto;width:52px;height:52px}
.ln-owl img{width:100%;height:100%;border-radius:50%;display:block;box-shadow:0 0 22px rgba(139,92,255,.55)}
.ln-owl .ob-ring{inset:-5px}
.ln-nt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ln-nt b{font:600 16px var(--display)}.ln-nt small{font-size:13px;line-height:1.45}
.ln-ask{flex:0 0 auto;padding:9px 14px;border-radius:12px;background:var(--grad);color:#05040c;font:700 13px var(--body)}
.ln-hero,.ln-guide,.ln-sheet,.ln-nocty,.ln-tile{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.ln-hero:active,.ln-guide:active,.ln-sheet:active,.ln-nocty:active{filter:brightness(1.15)}
/* A photo or a video, full screen, from the Training hub. */
dialog.ln-lb{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(0,0,0,.95);color:var(--text);overflow:hidden}
dialog.ln-lb[open]{display:flex;flex-direction:column}
dialog.ln-lb::backdrop{background:rgba(0,0,0,.6)}
.ln-lb-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:calc(58px + env(safe-area-inset-top)) 10px 10px}
.ln-lb-stage img,.ln-lb-stage video{max-width:100%;max-height:100%;min-width:0;min-height:0;object-fit:contain;border-radius:10px;background:#000}
.ln-lb-x{position:absolute;top:calc(12px + env(safe-area-inset-top));right:14px;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:var(--panel);color:var(--text);font-size:18px;cursor:pointer}
.ln-lb-cap{flex:0 0 auto;margin:0;padding:10px 18px calc(16px + env(safe-area-inset-bottom));text-align:center;font-size:14px;color:#cfcaf5;max-height:30vh;overflow:auto}


/* ---- leaderboard: every row opens the member card ---- */
.lb [data-member],.lb-rest [data-member]{cursor:pointer;transition:transform .12s ease,background-color .12s ease}
.lb .row[data-member]:active{transform:scale(.985)}
.lr[data-member]:active{background:rgba(139,92,255,.14)}
.lb [data-member]:focus-visible,.lb-rest [data-member]:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@media (hover:hover){.lb .row[data-member]:not(.first):hover{border-color:rgba(139,92,255,.5)}.lr[data-member]:hover{background:rgba(139,92,255,.08)}}
.st-chip{display:inline-block;margin-left:7px;padding:0 6px;border-radius:6px;border:1px solid var(--line);font:600 10px/1.65 var(--body);
  letter-spacing:.08em;color:var(--dim);vertical-align:2px;-webkit-text-fill-color:var(--dim)}

/* ---- the member card (card.js): a sheet from the bottom on a phone, a card in the middle on a computer ---- */
dialog.mcard{padding:0;border:0;margin:auto 0 0;width:100%;max-width:100%;max-height:90vh;border-radius:26px 26px 0 0;color:var(--text);
  background:linear-gradient(180deg,#151231,#0b0a17 62%);overflow:hidden auto;overscroll-behavior:contain;
  box-shadow:0 -12px 50px rgba(0,0,0,.6),0 0 0 1px rgba(139,92,255,.35)}
dialog.mcard[open]{animation:mc-up .38s cubic-bezier(.32,.72,0,1)}
dialog.mcard::backdrop{background:rgba(3,3,10,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:mc-fade .25s ease}
dialog.mcard.closing{animation:mc-down .22s ease-in forwards}
dialog.mcard.closing::backdrop{animation:mc-fade .22s ease reverse forwards}
dialog.mcard:focus{outline:none}
@keyframes mc-up{from{transform:translateY(100%)}}
@keyframes mc-down{to{transform:translateY(100%)}}
@keyframes mc-fade{from{opacity:0}}
@keyframes mc-pop{from{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes mc-pop-out{to{opacity:0;transform:translateY(8px) scale(.97)}}
@media (min-width:641px){
  dialog.mcard{margin:auto;width:380px;border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(139,92,255,.4)}
  dialog.mcard[open]{animation:mc-pop .26s cubic-bezier(.2,.8,.2,1)}
  dialog.mcard.closing{animation:mc-pop-out .18s ease-in forwards}
  .mc-grab{visibility:hidden}
}
.mc-glow{position:absolute;left:0;right:0;top:0;height:150px;pointer-events:none;
  background:radial-gradient(55% 100% at 50% 0%,rgba(139,92,255,.42),transparent 72%),radial-gradient(40% 80% at 12% 0%,rgba(34,228,255,.22),transparent 72%),
    radial-gradient(40% 80% at 88% 0%,rgba(255,61,242,.22),transparent 72%)}
.mc-grab{display:block;width:40px;height:5px;border-radius:3px;background:rgba(143,137,189,.42);margin:9px auto 0;position:relative}
.mc-x{position:absolute;top:12px;right:12px;z-index:1;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:rgba(11,10,23,.7);
  color:var(--dim);display:grid;place-items:center;cursor:pointer}
.mc-x svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4}
.mc-body{position:relative;padding:14px 20px calc(22px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;text-align:center}
.mc-av{position:relative;width:96px;height:96px;margin-top:6px;flex:0 0 auto}
.mc-face{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;overflow:hidden;font:600 36px var(--display);
  background:linear-gradient(135deg,#1b2a55,#3a1d5c);box-shadow:0 0 0 2px #120f2a,0 0 0 4px rgba(139,92,255,.7),0 0 30px rgba(139,92,255,.45)}
.mc-face img{width:100%;height:100%;object-fit:cover}
.mc-dot{position:absolute;right:3px;bottom:5px;width:20px;height:20px;border-radius:50%;background:var(--good);border:3.5px solid #13102c;
  box-shadow:0 0 12px rgba(61,255,176,.7)}
.mc-name{font:600 21px/1.22 var(--display);letter-spacing:.01em;text-transform:none;color:var(--text);margin:14px 0 4px;overflow-wrap:anywhere}
.mc-sub{margin:0;font-size:13px;color:var(--dim)}
.mc-role{text-transform:capitalize}
.mc-live{color:var(--good)}
.mc-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:14px 0 2px}
.mc-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:99px;border:1px solid var(--line);
  background:rgba(17,15,34,.85);font:600 13px var(--body);color:var(--text);white-space:nowrap;flex:0 0 auto;max-width:100%}
.mc-chip.mc-rank{gap:5px}
.mc-chip svg{width:15px;height:15px;stroke:var(--cyan);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mc-chip.mc-rank b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.mc-store{display:flex!important;align-items:center;justify-content:center;gap:8px;margin-top:18px}
.mc-store svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4}
.mc-url{display:block;margin-top:7px;font-size:12px;color:var(--dim);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-none{width:100%;margin:18px 0 0;padding:13px;border-radius:14px;border:1px dashed var(--line);color:var(--dim);font-size:14px}
.mc-acts{display:flex;gap:8px;width:100%;margin-top:10px}
.mc-acts:empty{display:none}
.mc-acts button{flex:1;min-width:0;height:46px;border-radius:14px;border:1px solid var(--line);background:rgba(17,15,34,.85);color:var(--text);
  font:700 14px var(--body);display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;white-space:nowrap}
.mc-acts button svg{width:17px;height:17px;stroke:var(--cyan);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.mc-acts button:active{background:rgba(139,92,255,.18)}
.mc-acts button:disabled{opacity:.6}
.mc-edit{margin-top:14px;font-size:13.5px;font-weight:600}
.mc-foot{margin:14px 0 0;font-size:12px;color:var(--dim)}
.mc-err{margin:10px 0 0;color:#ffc3d2;font-size:13px}
.mc-skel{background:linear-gradient(90deg,rgba(34,28,67,.6),rgba(54,44,100,.7),rgba(34,28,67,.6));background-size:200% 100%;
  animation:mc-shimmer 1.2s linear infinite;border-radius:10px}
.mc-skel.face{border-radius:50%;position:absolute;inset:0}
.mc-skel.line{height:20px;width:58%;margin:16px auto 6px}
.mc-skel.line.short{height:13px;width:34%;margin:4px auto 0}
.mc-skel.sk-btn{height:48px;width:100%;margin:22px 0 0;border-radius:14px}
@keyframes mc-shimmer{to{background-position:-200% 0}}

/* ---- coach marks (coach.js): the page goes dark except for one rounded cutout, with a card that says what it is ----
   The cutout is one element with a huge shadow; a clear layer over the whole page takes the taps, so nothing under
   it can be pressed by accident while the tip is up. */
.coach{position:fixed;inset:0;z-index:70;pointer-events:none}
.coach-veil{position:absolute;inset:0;pointer-events:auto;touch-action:none}
.coach-spot{position:absolute;left:0;top:0;width:0;height:0;border-radius:16px;pointer-events:none;opacity:0;
  box-shadow:0 0 0 200vmax rgba(3,3,10,.74);transition:opacity .28s ease}
.coach-spot::before{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;background:var(--grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.coach-spot::after{content:"";position:absolute;inset:-2px;border-radius:inherit;
  box-shadow:0 0 22px 3px rgba(139,92,255,.55),0 0 46px 6px rgba(34,228,255,.18);animation:coach-pulse 2.4s ease-in-out infinite}
@keyframes coach-pulse{50%{opacity:.45}}
.coach.on .coach-spot{opacity:1}
.coach-spot.glide{transition:transform .42s cubic-bezier(.32,.72,0,1),width .42s cubic-bezier(.32,.72,0,1),height .42s cubic-bezier(.32,.72,0,1),
  border-radius .42s ease,opacity .28s ease}
.coach-tip{position:absolute;left:0;top:0;width:min(340px,calc(100vw - 24px));pointer-events:auto;touch-action:none;padding:14px 16px 14px;border-radius:18px;
  background:linear-gradient(180deg,#17143a,#0e0c22);box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 0 1px rgba(139,92,255,.45);
  opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease;visibility:hidden}
.coach-tip.on{opacity:1;transform:none;visibility:visible}
.coach-tip[data-side=above]{transform:translateY(-6px)}
.coach-tip[data-side=above].on{transform:none}
.coach-tip.nudge{animation:coach-nudge .32s ease}
@keyframes coach-nudge{25%{translate:-5px 0}75%{translate:5px 0}}
.coach-arrow{position:absolute;left:var(--ax,50%);width:14px;height:14px;margin-left:-7px;transform:rotate(45deg);background:#17143a;
  box-shadow:-1px -1px 0 rgba(139,92,255,.45)}
.coach-tip[data-side=below] .coach-arrow{top:-7px}
.coach-tip[data-side=above] .coach-arrow{bottom:-7px;background:#0e0c22;box-shadow:1px 1px 0 rgba(139,92,255,.45)}
.coach-tip[data-side=over] .coach-arrow{display:none}
.coach-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.coach-count{font:700 10.5px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)}
.coach-skip{background:none;border:0;padding:4px 0 4px 8px;color:var(--dim);font:600 13px var(--body);cursor:pointer}
.coach-title{display:block;font:600 16px/1.3 var(--display);color:var(--text)}
.coach-body{margin:6px 0 0;font-size:14.5px;line-height:1.5;color:#cfcaf5}
.coach-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.coach-foot button{height:40px;padding:0 16px;border-radius:12px;font:700 14px var(--body);cursor:pointer}
.coach-back{border:1px solid var(--line);background:transparent;color:var(--text)}
.coach-next{min-width:92px;border:0;background:var(--grad);color:#05040c;box-shadow:0 6px 20px rgba(139,92,255,.35)}
.coach-foot button:focus-visible,.coach-skip:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.coach.out{opacity:0;transition:opacity .24s ease}
.coach-safe{position:fixed;left:0;top:0;width:0;height:env(safe-area-inset-top,0px);visibility:hidden}
.coach-safe+.coach-safe{top:auto;bottom:0;height:env(safe-area-inset-bottom,0px)}

@media (prefers-reduced-motion:reduce){
  .ob-ring,.o-emoji,.coach-spot::after,.mc-skel{animation:none}
  .t-slide.on .t-copy>*{animation:none}
  .t-seg i::after,.coach-spot.glide,.coach-tip{transition:none}
  dialog.mcard[open],dialog.mcard.closing,dialog.mcard::backdrop{animation:none}
}


/* Noctura across the US (/map, Brandon 2026-10-09): the people in each lit state, under the map. */
.map-states{display:grid;gap:10px;margin-top:14px}
.map-state.picked{border-color:rgba(34,228,255,.55);box-shadow:0 0 0 1px rgba(34,228,255,.25)}
.ms-head{display:flex;align-items:center;gap:10px}
.ms-head img{border-radius:50%}
.ms-head b{flex:1}
.ms-head small{color:var(--dim)}
.ms-people{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ms-p{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;padding:7px 11px;border-radius:12px;border:1px solid var(--line);
  background:rgba(17,15,34,.75);color:var(--text);font:600 13.5px var(--body);cursor:pointer}
.ms-p small{color:var(--dim);font-weight:500;font-size:11.5px}
.ms-p:active{background:rgba(139,92,255,.16)}
.pt-back{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--panel2);margin-bottom:6px}
.pt-back svg{width:22px;height:22px;stroke:var(--text);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
body.in-app .pt-back{display:none}

/* Admin: the activity log and member page (activity.py, 2026-10-09). */
.act-filter .search{margin-bottom:8px}
.act-cats{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.act-cats::-webkit-scrollbar{display:none}
.act-cat{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:99px;border:1px solid var(--line);
  color:var(--dim);font:600 13px var(--body);background:rgba(17,15,34,.6)}
.act-cat.on{color:var(--text);border-color:rgba(139,92,255,.7);background:rgba(139,92,255,.16)}
.act-cat span{font-size:11px;color:var(--cyan)}
.act-who{font-size:14px;margin:8px 0 0}
.act-list{display:flex;flex-direction:column;margin-top:12px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(17,15,34,.55)}
.act-row{display:flex;gap:12px;padding:11px 14px;border-top:1px solid rgba(34,28,67,.7)}
.act-row:first-child{border-top:0}
.act-dot{flex:0 0 8px;height:8px;margin-top:7px;border-radius:50%;background:var(--dim)}
.c-auth .act-dot{background:var(--cyan)}
.c-members .act-dot{background:var(--violet)}
.c-sales .act-dot{background:var(--good)}
.c-payments .act-dot{background:var(--warn)}
.c-chat .act-dot{background:var(--bad)}
.c-admin .act-dot{background:var(--magenta)}
.act-main{min-width:0;flex:1}
.act-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;font-size:14.5px}
.act-name{font-weight:700;color:var(--text)}
.act-count{font:700 11px var(--body);color:var(--cyan);background:rgba(34,228,255,.1);border-radius:99px;padding:1px 7px}
.act-main small{display:block;margin-top:3px;font-size:12px}
.act-main small a{color:var(--cyan)}
.member-link{color:inherit}

/* The member card: their package status and last check-in (Brandon 2026-10-09). */
.mc-chip.mc-away{border-color:rgba(255,198,92,.45);color:#ffe1a6}
.mc-chip.mc-more{border-color:rgba(61,255,176,.45);color:#b8ffe3}
.mc-ci{margin:14px 0 4px;padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:rgba(17,15,34,.7);text-align:left}
.mc-ci-h{font:700 11.5px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);display:flex;justify-content:space-between}
.mc-ci-h span{letter-spacing:.02em;text-transform:none;font-weight:600}
.mc-ci-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:8px;margin-top:10px}
.mc-ci-g div{display:flex;flex-direction:column;gap:2px}
.mc-ci-g b{font:600 20px var(--display);color:var(--text)}
.mc-ci-g small{color:var(--dim);font-size:11.5px}
.mc-ci-n{margin:8px 0 0;font-size:13px;color:var(--text)}

/* The drawn team map on a galaxy (Brandon 2026-10-09, map.html). */
.galaxy-map{position:relative;border-radius:22px;overflow:hidden;border:1px solid rgba(139,92,255,.35);
  background:radial-gradient(55% 60% at 22% 30%,rgba(34,228,255,.18),transparent 70%),
    radial-gradient(50% 55% at 80% 70%,rgba(255,61,242,.2),transparent 70%),
    radial-gradient(70% 80% at 55% 45%,rgba(139,92,255,.22),transparent 75%),#05040d;
  box-shadow:0 0 40px rgba(139,92,255,.18),inset 0 0 60px rgba(4,4,10,.6)}
.galaxy-map svg{display:block;width:100%;height:auto}
.geo-stars circle{fill:#fff}
.geo-empty path{fill:rgba(12,10,28,.55);stroke:rgba(139,92,255,.35);stroke-width:.8}
.geo-state{cursor:pointer;outline:none}
.geo-state .geo-edge{stroke-width:1.6}
.geo-state:hover .geo-edge,.geo-state:focus-visible .geo-edge,.geo-state.picked .geo-edge{stroke-width:3}
.geo-tip{position:absolute;left:12px;bottom:10px;padding:5px 10px;border-radius:10px;background:rgba(4,4,10,.85);
  border:1px solid rgba(139,92,255,.45);font:600 13px var(--body);color:var(--text)}

/* Store Standardization (Brandon's guide, guide_standardization.html, 2026-10-09). */
.sg-eyebrow{margin:4px 0 2px;font:700 11.5px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.sg-lead{margin:6px 0 12px;font-size:15px;line-height:1.5}
.sg-jump{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:6px;scrollbar-width:none}
.sg-jump::-webkit-scrollbar{display:none}
.sg-jump a{flex:0 0 auto;padding:7px 12px;border-radius:99px;border:1px solid var(--line);background:rgba(17,15,34,.6);color:var(--text);font:600 13px var(--body)}
.sg-table{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(17,15,34,.6)}
.sg-table div{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:11px 14px;border-top:1px solid rgba(34,28,67,.7);font-size:14px}
.sg-table div:first-child{border-top:0}
.sg-table b{color:var(--cyan);font-weight:700}
@media (max-width:420px){.sg-table div{grid-template-columns:1fr;gap:3px}}
.sg-note{margin:12px 0;padding:12px 14px;border-radius:14px;border:1px solid rgba(139,92,255,.35);background:rgba(139,92,255,.08);font-size:14px;line-height:1.5}
.sg-part{display:inline-block;margin-right:6px;padding:2px 10px;border-radius:99px;background:var(--grad);color:#05040c;font:700 12px var(--body);letter-spacing:.06em;vertical-align:middle}
.sg-step{margin-bottom:10px}
.sg-step h3{margin:0 0 8px;font:600 16px var(--display);color:var(--text)}
.sg-step ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:14.5px;line-height:1.5}
.sg-step code,.sg-note code{font-size:12.5px;padding:1px 6px;border-radius:6px;background:rgba(34,228,255,.1);color:#bff7ff;white-space:normal}
.sg-ex{margin:10px 0 0;font-size:14px;color:var(--dim)}
.sg-ex b{color:var(--text)}
.sg-calc{margin-top:14px;padding:14px;border-radius:16px;border:1px solid rgba(34,228,255,.35);background:rgba(4,4,10,.5)}
.sg-calc-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sg-calc-row label{margin:0}
.sg-calc-row input{margin-top:4px}
.sg-toggles{grid-template-columns:1fr;gap:4px;margin-top:10px}
.sg-check{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:14px;color:var(--text)}
.sg-check input{width:auto;margin:0}
.sg-result{margin-top:12px;display:flex;flex-direction:column;gap:2px}
.sg-result small{color:var(--dim);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.sg-result b{font:700 30px var(--display);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sg-result span{font-size:12.5px}
.sg-prompt{position:relative;border:1px solid var(--line);border-radius:16px;background:#07060f;padding:14px}
.sg-prompt pre{margin:34px 0 0;white-space:pre-wrap;word-break:break-word;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text)}
.sg-copy{position:absolute;top:10px;right:10px}
.sg-checklist label{display:flex;gap:10px;align-items:flex-start;margin:0 0 10px;text-transform:none;letter-spacing:0;font-size:14.5px;color:var(--text)}
.sg-checklist input{width:auto;margin-top:3px}
.sg-never{margin-top:12px;border-color:rgba(255,92,134,.45);background:rgba(255,92,134,.07);font-size:14.5px;line-height:1.5}
/* The same guide as a walk-through (Brandon 2026-10-12: "I can't even understand it, it's like Morse code"): the rules
   as a numbered list of whole sentences, and each eBay policy as a list with one setting per line. */
.sg-rules{list-style:none;margin:0;padding:0;counter-reset:rule;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(17,15,34,.6)}
.sg-rules li{counter-increment:rule;position:relative;padding:13px 14px 13px 54px;border-top:1px solid rgba(34,28,67,.7)}
.sg-rules li:first-child{border-top:0}
.sg-rules li::before{content:counter(rule);position:absolute;left:14px;top:13px;width:28px;height:28px;border-radius:50%;
  background:var(--grad);color:#05040c;font:700 13px/28px var(--display);text-align:center}
.sg-rules b{display:block;font-size:15.5px;font-weight:700;line-height:1.35;color:var(--text)}
.sg-rules span{display:block;margin-top:3px;font-size:14px;line-height:1.5;color:var(--dim)}
.sg-step h3{display:flex;align-items:center;gap:10px}
.sg-step h3 i{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--grad);color:#05040c;
  font:700 12.5px/26px var(--display);font-style:normal;text-align:center}
.sg-do{margin:0;font-size:14.5px;line-height:1.5}
.sg-set{margin:10px 0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(4,4,10,.35)}
.sg-set div{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:10px;padding:10px 12px;border-top:1px solid rgba(34,28,67,.7);font-size:14px;line-height:1.45}
.sg-set div:first-child{border-top:0}
.sg-set dt{color:var(--dim)}
.sg-set dd{margin:0;font-weight:600;color:var(--text);overflow-wrap:anywhere}
.sg-set code{font-size:12.5px;padding:1px 6px;border-radius:6px;background:rgba(34,228,255,.1);color:#bff7ff;white-space:normal}
.sg-step .sg-calc{margin-top:0}
.sg-fold>summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;font:600 14.5px var(--body);color:var(--cyan);
  -webkit-user-select:none;user-select:none}
.sg-fold>summary::-webkit-details-marker{display:none}
.sg-fold>summary::before{content:"";flex:0 0 auto;width:7px;height:7px;border-right:2px solid var(--cyan);border-bottom:2px solid var(--cyan);
  transform:rotate(-45deg);transition:transform .15s ease}
.sg-fold[open]>summary::before{transform:rotate(45deg)}
.sg-step .sg-fold{margin-top:14px;padding-top:12px;border-top:1px solid rgba(34,28,67,.7)}
.sg-step .sg-fold ol{margin-top:10px}
.sg-move>summary{padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:rgba(17,15,34,.6);font-size:15px}
.sg-move[open]>summary{margin-bottom:10px}
.sg-h3{margin:22px 0 8px;font:600 15px var(--display);color:var(--text)}
.sg-sub{margin:14px 0 10px;padding-top:12px;border-top:1px solid rgba(34,28,67,.7);font:700 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.sg-next{display:block;margin-top:16px;text-align:center}
.sg-why{list-style:none;margin:12px 0;padding:0;display:flex;flex-direction:column;gap:7px}
.sg-why li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.45}
.sg-why li::before{content:"";position:absolute;left:2px;top:.48em;width:8px;height:8px;border-radius:50%;background:var(--grad)}

/* ---- A reseller's tool pages and the brand blacklist (toolkit.py, Brandon 2026-10-12: "interactive style sections
   like the rest of the app where it's more friendly for the user to tap and experience"). They use More's panels,
   rows and badges (app.css .mg .mr .tone-*). ---- */
.tk{display:flex;flex-direction:column}
.tk-hero{display:flex;align-items:center;gap:14px;margin:4px 0 12px;padding:16px;border-radius:20px;border:1px solid var(--line);
  background:radial-gradient(130% 170% at 0% 0%,var(--tw,rgba(139,92,255,.26)),transparent 60%),linear-gradient(180deg,var(--panel2),var(--panel))}
.tk-hero h1{margin:0;font:600 20px/1.22 var(--display)}
.tk-hero p{margin:5px 0 0;font-size:14px;line-height:1.45;color:#c9c4ee}
.tk-owl{flex:0 0 56px;height:56px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px rgba(139,92,255,.75),0 0 22px rgba(139,92,255,.55)}
.tk-owl img{display:block;width:100%;height:100%;object-fit:cover}
.tk-call{margin:0 0 4px;padding:14px 16px;border-radius:16px;border:1px solid transparent;
  background:linear-gradient(var(--panel2),var(--panel2)) padding-box,linear-gradient(120deg,var(--t1,#bda3ff),var(--t2,#7a4dff)) border-box;
  box-shadow:0 10px 30px -18px var(--tg,rgba(139,92,255,.6))}
.tk-call b{display:block;font:600 16px/1.3 var(--display);color:var(--text)}
.tk-call p{margin:6px 0 0;font-size:14.5px;line-height:1.5;color:#d8d3f5}
.tk-count{margin:12px 2px -6px;font-size:13px;font-weight:600;color:var(--cyan)}
.tk-foot{margin:12px 2px 0;font-size:13px}
.tk-item{cursor:default;padding-left:8px}
.tk-wrap+.tk-wrap{border-top:1px solid rgba(34,28,67,.95)}
.tk-tick{position:relative;flex:0 0 42px;height:42px;margin:0;display:grid;place-items:center;cursor:pointer}
.tk-tick input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.tk-tick i{width:26px;height:26px;border-radius:50%;border:2px solid rgba(143,137,189,.6);display:grid;place-items:center;
  transition:background-color .15s,border-color .15s,box-shadow .15s}
.tk-tick input:checked+i{border-color:transparent;background:var(--grad);box-shadow:0 0 14px rgba(139,92,255,.65)}
.tk-tick input:checked+i::after{content:"";width:10px;height:6px;border-left:2.4px solid #05040c;border-bottom:2.4px solid #05040c;
  transform:rotate(-45deg) translate(1px,-1px)}
.tk-tick input:focus-visible+i{outline:2px solid var(--cyan);outline-offset:2px}
.tk-item.got .mr-t b{color:var(--dim);text-decoration:line-through}
.tk-pill{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:99px;border:1px solid rgba(34,228,255,.5);
  background:rgba(34,228,255,.09);color:var(--text);font:700 12.5px var(--body)}
.tk-pill svg{width:13px;height:13px;fill:none;stroke:var(--cyan);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tk-pill:active{background:rgba(34,228,255,.2)}
.tk-pill.wide{margin-top:12px}
.tk-n{flex:0 0 42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--grad);color:#05040c;font:700 16px var(--display);
  box-shadow:0 6px 18px -5px rgba(139,92,255,.6)}
.tk-rules{list-style:none;margin:10px 0 12px;padding:0;display:flex;flex-direction:column;gap:7px}
.tk-rules li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.45}
.tk-rules li::before{content:"";position:absolute;left:2px;top:.48em;width:8px;height:8px;border-radius:50%;background:var(--grad)}
.tk-photos{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}
.tk-photos.grid{grid-template-columns:repeat(3,1fr);margin-top:0}
.tk-ph{position:relative;display:block;aspect-ratio:var(--ar,1);border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#0d0b1c}
.tk-photos.grid .tk-ph{aspect-ratio:1}
.tk-ph img{width:100%;height:100%;object-fit:cover;display:block}
.tk-ph:active{filter:brightness(1.15)}
.tk-play{position:absolute;inset:0;display:grid;place-items:center}
.tk-play svg{width:40px;height:40px;fill:none;stroke:var(--text);stroke-width:1.6}
.tk-card{margin-bottom:9px;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,rgba(19,16,40,.86),rgba(11,10,23,.86));transition:border-color .2s}
.tk-card[open]{border-color:rgba(139,92,255,.5)}
.tk-card summary{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}
.tk-card summary::-webkit-details-marker{display:none}
.tk-card summary b{flex:1;min-width:0;font-weight:600;font-size:15.5px;line-height:1.35}
.tk-mark,.tk-q{flex:0 0 40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:20px;
  background:linear-gradient(140deg,rgba(34,228,255,.2),rgba(139,92,255,.28));border:1px solid rgba(139,92,255,.4)}
.tk-q{background:var(--grad);border:0;color:#05040c;font:700 15px var(--display);box-shadow:0 6px 18px -5px rgba(139,92,255,.6)}
.tk-chev{flex:0 0 auto;display:grid;transition:transform .18s ease}
.tk-chev svg{width:16px;height:16px;fill:none;stroke:var(--dim);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tk-card[open] .tk-chev{transform:rotate(90deg)}
.tk-body{padding:0 14px 15px;font-size:14.5px;line-height:1.6;color:#dcd8f6}
.tk-body p{margin:0 0 10px}
.tk-body p:last-child{margin-bottom:0}
.tk-body b{color:var(--text)}
.tk-body a{font-weight:600}
.tk-admin{margin:18px 2px 0;font-size:12.5px;line-height:1.5}
.tk-add{margin:10px 0 2px;padding:14px;border:1px solid var(--line);border-radius:16px;background:rgba(17,15,34,.6)}
.tk-add label{margin:0 0 8px}
.tk-add-row{display:flex;gap:8px}
.tk-add-row input{flex:1;min-width:0;margin:0}
.tk-add-row .btn{flex:0 0 auto;padding:0 20px;font-size:14px;border-radius:12px}
.tk-add small{display:block;margin-top:9px;font-size:12.5px;line-height:1.45}
.tk-total{padding:1px 8px;border-radius:99px;background:rgba(139,92,255,.2);color:#d6c8ff;letter-spacing:0;font-size:11.5px}
.tk-search{margin:10px 0 0}
.tk-brand{cursor:default}
.tk-brand+.tk-brand::before{left:61px}
.tk-x{flex:0 0 34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,61,242,.12);border:1px solid rgba(255,61,242,.45)}
.tk-x svg{width:17px;height:17px;fill:none;stroke:#f08bff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tk-x.ok{background:rgba(34,228,255,.1);border-color:rgba(34,228,255,.45)}
.tk-x.ok svg{stroke:var(--cyan)}
.tk-rm{padding:7px 11px;border-radius:10px;border:1px solid var(--line);background:none;color:var(--dim);font:600 12.5px var(--body);cursor:pointer}
.tk-none{margin:12px 2px 0;font-size:14px}
/* The supply list's stars and its admin-only editor; the link rows and the copy button of the plainer pages. */
.tk-star{margin-right:5px;font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 6px rgba(139,92,255,.7))}
.tk-must{display:flex;align-items:flex-start;gap:2px;margin-top:10px!important;padding-top:10px;border-top:1px solid rgba(139,92,255,.3);
  font-weight:600;color:var(--text)!important}
.tk-must .tk-star{font-size:16px;line-height:1.35}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.tk-edit{padding:0 14px 0 58px}
.tk-edit summary{display:inline-flex;align-items:center;gap:6px;margin:-4px 0 10px;cursor:pointer;list-style:none;font:600 12.5px var(--body);color:var(--cyan)}
.tk-edit summary::-webkit-details-marker{display:none}
.tk-edit summary svg{width:13px;height:13px;fill:none;stroke:var(--cyan);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tk-edit form{display:flex;flex-direction:column;gap:10px;padding:2px 0 14px}
.tk-edit label{margin:0}
.tk-edit input:not([type=checkbox]),.tk-edit select{margin-top:4px}
.tk-edit .btn{align-self:flex-start}
.tk-rows{margin-bottom:9px}
.tk-under{padding:0 14px 12px}
.tk-n.sm svg{width:20px;height:20px;fill:none;stroke:#0b0718;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
button.tk-pill{cursor:pointer;-webkit-appearance:none;appearance:none}
.tk-add>input{margin:0}