/* Sticker UI (Adrian 26.10.2026) – one look for every menu, built like the candy-sticker icons (js/icons.js):
   ink contour, two flat candy tones, a hard drop, a small white glint. Prototype + rules: unendlicher-turm/docs/social/ui-identity
   (sticker_ui_quelle.html, palette.png). Palette: navy ground, muted orange for everything you press, gold only for rewards / „you“,
   white stickers for side buttons; the bottom bar keeps four soft colours. Green/red only as tiny status signs.
   This file sits on top of hud.css / site.css / tower.css and the menus' own styles (board, lab, shop, session, the inline CSS of
   tasks.js, mainjob.js, social.js, wheel.js). Every rule starts with html.st body so it wins over the original rule it restyles. */
:root {
  --st-ink: #161a3a; --st-nv: #232b58; --st-nv2: #2f386b; --st-nv0: #181f45; --st-tx: #c3cbe6;
  --st-acc: #f2a15e; --st-acc2: #cf7b3f; --st-gold: #f6cd5a; --st-gold2: #d99a2e;
  --st-blue: #7fb6ea; --st-blue2: #4d80c4; --st-teal: #6ccbb0; --st-teal2: #36977f; --st-pink: #e996bd; --st-pink2: #bd6590;
  --st-b1: 2.5px; --st-b2: 2.1px; --st-b3: 1.75px;   /* contour: windows, buttons/cards, chips */
}

/* ---------- bottom bar: four soft candy pills with an ink contour ---------- */
html.st body .g-bar { background: var(--st-nv0); border: var(--st-b1) solid var(--st-ink); box-shadow: 0 5px 0 var(--st-ink), 0 14px 30px rgba(2, 4, 22, 0.45); }
html.st body .g-bar .g-mebtn, html.st body .g-bar .g-mebtn.search { --st-a: var(--st-blue); --st-b: var(--st-blue2); }
html.st body .g-bar .g-meetslot .meet:not(.open) { --st-a: var(--st-teal); --st-b: var(--st-teal2); }
html.st body .g-bar .g-emobtn { --st-a: var(--st-pink); --st-b: var(--st-pink2); }
html.st body .g-bar .g-jobbtn, html.st body .g-bar .g-jobbtn.has, html.st body .g-bar .g-edbtn { --st-a: var(--st-acc); --st-b: var(--st-acc2); }
html.st body .g-bar :is(.g-mebtn, .g-edbtn, .g-jobbtn, .g-emobtn, .g-meetslot .meet:not(.open)),
html.st body .g-bar :is(.g-mebtn, .g-edbtn, .g-jobbtn, .g-emobtn):is(:hover, .open, .on) {
  background: linear-gradient(180deg, var(--st-a) 0 54%, var(--st-b) 54% 100%); border: var(--st-b2) solid var(--st-ink);
  box-shadow: 0 3.5px 0 var(--st-ink); text-shadow: none; filter: none;
}
html.st body .g-bar :is(.g-mebtn, .g-edbtn, .g-jobbtn, .g-emobtn)::before, html.st body .g-bar .g-meetslot .meet:not(.open) .meet-h::before {
  left: 12px; right: auto; top: 4px; width: 28%; max-width: 38px; height: 6px; border-radius: 9px; background: rgba(255, 255, 255, 0.45); z-index: 0; }
html.st body .g-bar :is(.g-mebtn, .g-edbtn, .g-jobbtn, .g-emobtn)::after, html.st body .g-bar .g-meetslot .meet:not(.open) .meet-h::after { display: none; }
html.st body .g-bar :is(.g-mebtn .lbl, .g-jobbtn b, .g-emobtn span, .g-edbtn span, .g-meetslot .meet:not(.open) .meet-h b) {
  color: #fff; -webkit-text-stroke: 2.7px var(--st-ink); paint-order: stroke fill; text-shadow: 0 1.5px 0 var(--st-ink); }
@media (max-width: 759px) { html.st body .g-bar :is(.g-mebtn, .g-mebtn.search, .g-jobbtn, .g-emobtn) { padding-left: 3px; padding-right: 3px; gap: 4px; } }   /* the thicker contour cost the labels 2 px */
html.st body .g-bar :is(.g-mebtn, .g-edbtn, .g-jobbtn, .g-emobtn, .g-meetslot .meet:not(.open)):active { transform: translateY(3px); box-shadow: 0 0.5px 0 var(--st-ink); }
html.st body .g-bar :is(.g-mebtn .n, .g-jobbtn .ji, .g-meetslot .meet:not(.open) .meet-pin, .g-emobtn i) { background: none; border: 0; box-shadow: none; }
html.st body .g-bar :is(.g-mebtn, .g-emobtn, .g-jobbtn) > svg, html.st body .g-bar .g-meetslot .meet:not(.open) .meet-pin svg { filter: drop-shadow(0 1.5px 0 var(--st-ink)); }
html.st body .g-bar .g-meetslot .meet.spin { box-shadow: 0 0 0 3px #fff, 0 3.5px 0 var(--st-ink), 0 0 18px 4px rgba(255, 255, 255, 0.35); }
html.st body .g-bar :is(.g-chatdot, .g-tkdot, .g-mebtn .bdg) { border: var(--st-b3) solid var(--st-ink); box-shadow: 0 2px 0 var(--st-ink); }

/* ---------- top left: clock free-standing, the live box (followers · online · R&D) one sticker card ---------- */
html.st body #hud.ipanel, html.st body .hud.hud-top { background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
html.st body :is(.itime b, .hud-clock b) { color: #fff; -webkit-text-stroke: 3px var(--st-ink); paint-order: stroke fill; text-shadow: 0 2px 0 var(--st-ink); }
html.st body :is(.itime span, .itime em, .hud-clock span, .hud-clock em) { color: var(--st-gold); -webkit-text-stroke: 2px var(--st-ink); paint-order: stroke fill; }
html.st body :is(.ilive, .hud.hud-online) { background: var(--st-nv); border: var(--st-b2) solid var(--st-ink); box-shadow: 0 3.5px 0 var(--st-ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
html.st body .rdb-bar { height: 9px; background: var(--st-nv0); border: 1.5px solid var(--st-ink); box-sizing: border-box; }
html.st body .rdb-bar i, html.st body .rdb-bar b, html.st body .rdb-bar > * { background: linear-gradient(180deg, var(--st-acc) 0 54%, var(--st-acc2) 54%); }

/* ---------- top right: notice board + flame as white stickers, the account chip as a sticker pill ---------- */
html.st body .acct-board, html.st body .acct-flame .fl-btn { background: linear-gradient(180deg, #fff 0 54%, #dbe3f8 54%); border: var(--st-b2) solid var(--st-ink); box-shadow: 0 3.5px 0 var(--st-ink); }
html.st body .acct-flame { background: none; border: 0; box-shadow: none; }
html.st body .acct-chip { background: var(--st-nv); border: var(--st-b2) solid var(--st-ink); box-shadow: 0 3.5px 0 var(--st-ink); color: #fff; }
html.st body .acct-chip:hover, html.st body #acct.open .acct-chip { background: var(--st-nv2); border-color: var(--st-ink); }
html.st body .acct-av { border: var(--st-b2) solid var(--st-ink); box-shadow: 0 2px 0 var(--st-ink); }

/* ---------- round side buttons (view, help) ---------- */
html.st body .g-round { background: linear-gradient(180deg, #3a4690 0 54%, #283270 54%); border: var(--st-b2) solid var(--st-ink); box-shadow: 0 3.5px 0 var(--st-ink); }
html.st body .g-round.on { background: linear-gradient(180deg, var(--st-acc) 0 54%, var(--st-acc2) 54%); }
html.st body .g-help { background: linear-gradient(180deg, #3a4690 0 54%, #283270 54%); border: var(--st-b2) solid var(--st-ink); box-shadow: 0 3.5px 0 var(--st-ink); }

/* ---------- every window: one shell ---------- */
html.st body :is(.g-pop, .g-emomenu, .g-sheet, .nb-panel, .lb-panel, .so-card, .tkg-box, .wh, .acct-menu, .intro-card, .tk, .ts-panel, .ts-sheet) {
  background: var(--st-nv); border: var(--st-b1) solid var(--st-ink); border-radius: 26px; box-shadow: 0 5px 0 var(--st-ink), 0 18px 34px rgba(0, 0, 0, 0.45); }
html.st body :is(.g-pop, .g-emomenu)::after { background: var(--st-nv); border-right: var(--st-b1) solid var(--st-ink); border-bottom: var(--st-b1) solid var(--st-ink); }
/* window head: muted orange band with a darker lip, title white with an ink contour */
html.st body :is(.g-sh-h, .nb-head, .lb-top, .so-top, .ts-top) {
  background: linear-gradient(180deg, var(--st-acc) 0 calc(100% - 7px), var(--st-acc2) calc(100% - 7px)); border-bottom: var(--st-b1) solid var(--st-ink); color: var(--st-ink); }
html.st body :is(.g-sh-h > b, .nb-head h2, .lb-top h2, .so-top h2, .so-top b, .g-emohead b, .wh h3, .acct-name) {
  color: #fff; -webkit-text-stroke: 3.5px var(--st-ink); paint-order: stroke fill; text-shadow: 0 2px 0 var(--st-ink); font-family: 'Lilita One', 'Arial Black', sans-serif; font-weight: 400; letter-spacing: 0.02em; }
html.st body :is(.nb-head p, .lb-top p, .so-top p, .so-top small) { color: var(--st-ink); opacity: 0.85; }
/* close: round white sticker */
html.st body :is(.g-sh-h .x, .nb-x, .lb-x, .so-x, .ts-x, .mj-x, .intro-card .x) {
  background: #fff; color: var(--st-ink); border: var(--st-b2) solid var(--st-ink); box-shadow: 0 3px 0 var(--st-ink); border-radius: 50%; }
/* tabs */
html.st body :is(.g-tabs, .meet-tabs, .nb-tabs, .ts-tabs, .so-tabs) { background: var(--st-nv0); border: var(--st-b2) solid var(--st-ink); border-radius: 999px; box-shadow: none; }
html.st body .g-tabs { margin: 10px 12px 0; padding: 4px; }
html.st body .so-tabs { margin: 0 16px 10px; padding: 4px; }
html.st body :is(.g-tabs button, .meet-tabs button, .nb-tab, .ts-tabs button, .so-tabs button) { background: transparent; border: 2px solid transparent; color: #9aa6d6; box-shadow: none; }
html.st body :is(.g-tabs button.on, .meet-tabs button.on, .nb-tab.on, .nb-tab[aria-selected="true"], .ts-tabs button.on, .so-tabs button.on) {
  background: linear-gradient(180deg, var(--st-acc) 0 54%, var(--st-acc2) 54%); border-color: var(--st-ink); box-shadow: 0 2px 0 var(--st-ink);
  color: #fff; -webkit-text-stroke: 2.4px var(--st-ink); paint-order: stroke fill; }
/* the main button everywhere */
html.st body :is(.btn, .lb-go, .mj-go, .g-emogo, .g-show, .ts-buy) {   /* .ts-buy: Shop + Rucksack (Kaufen, Use now) – vorher eigenes Gold (Adrian 26.10.) */
  background: linear-gradient(180deg, var(--st-acc) 0 54%, var(--st-acc2) 54%); color: #fff; border: var(--st-b2) solid var(--st-ink); box-shadow: 0 3.5px 0 var(--st-ink);
  -webkit-text-stroke: 2.7px var(--st-ink); paint-order: stroke fill; text-shadow: 0 1.5px 0 var(--st-ink); }
html.st body .btn.white, html.st body .g-xact { background: linear-gradient(180deg, #fff 0 54%, #dbe3f8 54%); color: var(--st-ink); -webkit-text-stroke: 0; text-shadow: none; border: var(--st-b2) solid var(--st-ink); box-shadow: 0 3.5px 0 var(--st-ink); }
html.st body .btn.ghost { background: var(--st-nv0); -webkit-text-stroke: 0; text-shadow: none; box-shadow: none; }
html.st body :is(.btn, .lb-go, .mj-go, .g-show, .g-xact):active { transform: translateY(3px); box-shadow: 0 0.5px 0 var(--st-ink); }

/* ---------- Jobs (js/tasks.js, js/mainjob.js): was a yellow sheet – head band, white titles ---------- */
html.st body .tk { padding-top: 0; overflow-x: hidden; }
html.st body .tk-top { margin: 0 -10px 12px; padding: 12px 12px 14px 16px; background: linear-gradient(180deg, var(--st-acc) 0 calc(100% - 7px), var(--st-acc2) calc(100% - 7px)); border-bottom: var(--st-b1) solid var(--st-ink); position: sticky; top: 0; z-index: 2; }
html.st body .tk-top h3 { color: #fff; -webkit-text-stroke: 3.5px var(--st-ink); paint-order: stroke fill; text-shadow: 0 2px 0 var(--st-ink); font-size: 26px; }
html.st body .tk-top small { color: var(--st-ink); opacity: 0.85; }
html.st body .tk-top .x { background: #fff; color: var(--st-ink); border: var(--st-b2) solid var(--st-ink); box-shadow: 0 3px 0 var(--st-ink); width: 36px; height: 36px; box-sizing: border-box; }
html.st body .tk-h b { color: #fff; -webkit-text-stroke: 2.7px var(--st-ink); paint-order: stroke fill; text-shadow: 0 1.5px 0 var(--st-ink); }
html.st body .tk-h small { color: var(--st-gold); }
html.st body :is(.tk-card, .tk-gh, .tk-lab, .mj-card, .mj-me) { border: var(--st-b2) solid var(--st-ink); box-shadow: 0 3.5px 0 var(--st-ink); }
html.st body .mj-card { background: linear-gradient(180deg, var(--st-acc) 0 54%, var(--st-acc2) 54%); }
html.st body .mj-card .mj-go, html.st body .mj-card button { -webkit-text-stroke: 0; }
html.st body .tk-toast { background: var(--st-nv); color: #fff; border: var(--st-b2) solid var(--st-ink); box-shadow: 0 3.5px 0 var(--st-ink); }
html.st body .mj-sheet { background: var(--st-nv); color: #fff; border: var(--st-b1) solid var(--st-ink); box-shadow: 0 5px 0 var(--st-ink); }
/* ---------- R&D Lab + Your level (css/lab.css): white cards -> navy cards ---------- */
html.st body .lb-top { color: var(--st-ink); }
html.st body .lb-card { border: var(--st-b2) solid var(--st-ink); box-shadow: 0 3.5px 0 var(--st-ink); }
html.st body .lb-h h3 { color: var(--st-gold); }
html.st body .lb-body { color: #fff; }
html.st body .lb-panel a, html.st body .tk a { color: var(--st-acc); }

/* ---------- light-theme leftovers flipped for the dark windows (generated from tasks.js, mainjob.js, lab.css by a script; edit by hand if a colour looks wrong) ---------- */
html.st body .tk-h b { color:#fff; }
html.st body .tk-h small { color:var(--st-tx); }
html.st body .tk-card { background:var(--st-nv2); }
html.st body .tk-job .ic { background:var(--st-nv2); }
html.st body .tk-job small { color:var(--st-tx); }
html.st body .tk-pk { background:var(--st-nv2); }
html.st body .tk-pk span { color:var(--st-tx); }
html.st body .tk-lad .seg i { background:var(--st-nv2); }
html.st body .tk-lad .seg i.part { background:var(--st-nv2); }
html.st body .tk-soon span { background:var(--st-nv2); color:var(--st-tx); }
html.st body .tk-row:hover { background:var(--st-nv2); }
html.st body .tk-row .bx { background:var(--st-nv2); }
html.st body .tk-row small { color:var(--st-tx); }
html.st body .tk-row small.hot { color:var(--st-tx); }
html.st body .tk-row .rw { color:#fff; }
html.st body .tk-row.mine { background:var(--st-nv2); }
html.st body .tk-note { color:var(--st-tx); }
html.st body .tk-note a { color:var(--st-tx); }
html.st body .tk-feed p b { color:#fff; }
html.st body .tk-msg { color:var(--st-tx); }
html.st body .tk-msg.bad { color:var(--st-tx); }
html.st body .fz button.on i { background:var(--st-nv0); }
html.st body .tk-gh .z em { background:var(--st-nv2); color:#fff; }
html.st body .lb-panel { --ink:#fff; --soft:var(--st-tx); --card:var(--st-nv2); }
html.st body .lb-card { background:var(--st-nv2); }
html.st body .lb-meta { background:var(--st-nv2); }
html.st body .lb-body p { color:#fff; }
html.st body .lb-bar { background:var(--st-nv2); }
html.st body .lb-facts span { background:var(--st-nv2); }
html.st body .lb-warn { background:var(--st-nv2); }
html.st body .lb-badge { color:#fff; }
html.st body .lb-areas li { background:var(--st-nv2); }
html.st body .lb-st span { background:var(--st-nv2); }
html.st body .lb-list li { background:var(--st-nv2); }
html.st body .lb-top10.all .lb-meta { background:var(--st-nv2); color:var(--st-tx); }
html.st body .lb-rank li { background:var(--st-nv2); }
html.st body .lb-rank li.r1 { background:var(--st-nv2); }
html.st body .lb-rank li.r2 { background:var(--st-nv2); }
html.st body .lb-rank li.r3 { background:var(--st-nv2); }
html.st body .lb-rk { background:var(--st-nv2); }
html.st body .acct-lvl .bd { color:#fff; }
html.st body .lb-part { background:var(--st-nv2); }
html.st body .lb-part.done { background:var(--st-nv2); }
html.st body .lb-part.now { background:var(--st-nv2); }
html.st body .lb-part.now small { color:var(--st-tx); }
html.st body .lb-st span.done { background:var(--st-nv2); }
html.st body .lb-st span.now { background:var(--st-nv2); }
html.st body .lb-st span.now small { color:var(--st-tx); }

/* ---------- inside view panels (tower.html): map, legend, view settings ---------- */
html.st body .ipanel:not(#hud) { background: var(--st-nv); border: var(--st-b2) solid var(--st-ink); box-shadow: 0 3.5px 0 var(--st-ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
html.st body .seg { background: var(--st-nv0); border: var(--st-b2) solid var(--st-ink); }
html.st body :is(.seg button.on, .ichip.on) { background: #fff; color: var(--st-ink); border: var(--st-b3) solid var(--st-ink); box-shadow: 0 2px 0 var(--st-ink); }
html.st body .ichip { border: var(--st-b3) solid var(--st-ink); background: var(--st-nv0); }

/* ---------- profile menu (js/session.js): Level, R&D, Friends, Inventory as sticker cards ---------- */
html.st body .acct-top { background: var(--st-nv); border-bottom: var(--st-b2) solid var(--st-ink); }
html.st body .acct-lvl button { background: var(--st-nv2); border: var(--st-b2) solid var(--st-ink); box-shadow: 0 3px 0 var(--st-ink); }
html.st body .acct-lvl button:hover { background: #38427a; }
html.st body .acct-lvl .bd { background: #fff; border: var(--st-b2) solid var(--st-ink); box-shadow: 0 2px 0 var(--st-ink); color: var(--st-ink); }
html.st body .acct-lvl .bd.lab, html.st body .acct-lvl .bd.fr { background: #fff; color: var(--st-ink); box-shadow: 0 2px 0 var(--st-ink); }
html.st body .acct-lvl .mini { background: var(--st-nv0); border: 1.5px solid var(--st-ink); height: 7px; box-sizing: border-box; }
html.st body .acct-lvl .mini i, html.st body .acct-lvl .mini.lab i { background: linear-gradient(180deg, var(--st-acc) 0 54%, var(--st-acc2) 54%); }
html.st body .acct-row:hover { background: var(--st-nv2); }
html.st body .acct-bal { background: var(--st-nv0); border: var(--st-b2) solid var(--st-ink); }

/* ---------- Move wheel (js/meet.js): white stickers with the coloured place icons, home blue, names on navy chips ---------- */
html.st body .mw .mw-it .c { background: linear-gradient(180deg, #fff 0 54%, #dbe3f8 54%); border: var(--st-b1) solid var(--st-ink); box-shadow: 0 3.5px 0 var(--st-ink); }
html.st body .mw .mw-home .c { background: linear-gradient(180deg, var(--st-blue) 0 54%, var(--st-blue2) 54%); border: var(--st-b1) solid var(--st-ink); box-shadow: 0 3.5px 0 var(--st-ink); }
html.st body .mw :is(.mw-it.on, .mw-home.on) .c { box-shadow: 0 0 0 4px var(--st-gold), 0 3.5px 0 var(--st-ink), 0 0 22px rgba(246, 205, 90, 0.5); }
html.st body .mw :is(.mw-it b, .mw-home b) { background: var(--st-nv); border: var(--st-b3) solid var(--st-ink); box-shadow: 0 2px 0 var(--st-ink); text-shadow: none; }
html.st body .mw .n { border: var(--st-b3) solid var(--st-ink); box-shadow: 0 2px 0 var(--st-ink); }
html.st body .mw .you { background: var(--st-gold); border: 1.5px solid var(--st-ink); }
html.st body .mw-ar { background: var(--st-nv); border: var(--st-b2) solid var(--st-ink); box-shadow: 0 3px 0 var(--st-ink); }
html.st body .mw-ring { border-color: rgba(255, 255, 255, 0.12); }

/* ---------- bottom bar: the pill whose menu is open gets a white ring (Adrian 26.10.) ---------- */
html.st body .g-bar :is(.g-mebtn, .g-emobtn, .g-edbtn, .g-jobbtn, .g-meetslot .meet:not(.open))[aria-expanded="true"] {   /* same :is() list as the pill rule above, so it outranks it */
  box-shadow: 0 0 0 3px #fff, 0 3.5px 0 var(--st-ink), 0 0 18px 4px rgba(255, 255, 255, 0.35); }
html.st body .g-bar .g-mebtn .lbm { color: #fff; -webkit-text-stroke: 2.7px var(--st-ink); paint-order: stroke fill; text-shadow: 0 1.5px 0 var(--st-ink); }

/* ---------- your card (Me / Find me, #gPop .g-card) ---------- */
html.st body .g-apt { background: linear-gradient(180deg, var(--st-acc) 0 54%, var(--st-acc2) 54%); border: var(--st-b2) solid var(--st-ink); box-shadow: 0 3px 0 var(--st-ink); color: #fff; }
html.st body .g-apt b { -webkit-text-stroke: 3px var(--st-ink); paint-order: stroke fill; }
html.st body .g-apt small { color: var(--st-ink); opacity: 1; }
html.st body .g-id > div b { color: #fff; }
html.st body .g-st { background: var(--st-nv0); border: var(--st-b3) solid var(--st-ink); }
html.st body .g-st.lit { background: var(--st-nv0); border-color: var(--st-gold); }
html.st body .g-ibtn { background: var(--st-nv2); border: var(--st-b2) solid var(--st-ink); box-shadow: 0 3px 0 var(--st-ink); }
html.st body .g-jobrow { background: linear-gradient(180deg, var(--st-gold) 0 54%, var(--st-gold2) 54%); border: var(--st-b2) solid var(--st-ink); box-shadow: 0 3.5px 0 var(--st-ink); color: #fff; -webkit-text-stroke: 2.7px var(--st-ink); paint-order: stroke fill; text-shadow: none; }
html.st body .g-jobrow .jt small, html.st body .g-jobrow .go { color: var(--st-ink); -webkit-text-stroke: 0; }
html.st body .g-jobrow .go { background: rgba(255, 255, 255, 0.55); border: 1.5px solid var(--st-ink); }
html.st body .g-jobrow .ji { background: #fff; border: var(--st-b2) solid var(--st-ink); box-shadow: 0 2px 0 var(--st-ink); }
/* Level-System (26.10.2026): Zeile „Title“ der eigenen Karte – Navy statt Gold, damit der farbige Titel lesbar bleibt (js/hud.js renderTitleBtn) */
html.st body .g-jobrow.g-titlerow { background: linear-gradient(180deg, var(--st-nv2) 0 54%, var(--st-nv) 54%); -webkit-text-stroke: 0; }
html.st body .g-jobrow.g-titlerow .jt small { color: var(--st-tx); }
html.st body .g-jobrow.g-titlerow .car { font-style: normal; color: var(--st-tx); font: 900 18px/1 'Inter Tight', system-ui; margin-right: 4px; }
html.st body .g-edrow a { background: linear-gradient(180deg, #fff 0 54%, #dbe3f8 54%); color: var(--st-ink); border: var(--st-b2) solid var(--st-ink); box-shadow: 0 3.5px 0 var(--st-ink); text-shadow: none; }
html.st body .g-edrow a:hover { color: var(--st-ink); filter: none; }
html.st body .g-edrow a::before { left: 12px; right: auto; top: 4px; width: 26%; height: 5px; border-radius: 9px; background: rgba(255, 255, 255, 0.8); }
html.st body .g-edrow a::after { display: none; }
html.st body .g-edrow svg { filter: none; }
html.st body .g-show.alt { background: var(--st-nv2); border: var(--st-b2) solid var(--st-ink); -webkit-text-stroke: 0; text-shadow: none; }
html.st body .g-xact.on { background: linear-gradient(180deg, var(--st-acc) 0 54%, var(--st-acc2) 54%); color: #fff; }
html.st body .g-visit { background: var(--st-nv0); border: var(--st-b3) solid var(--st-ink); }
html.st body .g-visit b { color: var(--st-gold); }
html.st body .lc-menu { background: var(--st-nv); border: var(--st-b1) solid var(--st-ink); box-shadow: 0 5px 0 var(--st-ink); }

/* ---------- Jobs list text (Adrian 26.10.: „schwarzer Text auf blauem Grund“) + the job sheets ---------- */
html.st body .tk { color: #fff; }
html.st body .tk-row { border-bottom-color: rgba(255, 255, 255, 0.08); color: #fff; }
html.st body .mj-dim { background: rgba(6, 9, 36, 0.55); }
html.st body .mj-sheet { border-radius: 26px; }

/* ---------- profile menu: never cut off – rounded at the bottom like at the top, scrolls when it is longer than the screen ---------- */
html.st body .acct-menu { max-height: calc(100dvh - 96px - env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }

/* ---------- Main Job page inside Jobs (js/mainjob.js .mj-top): same head band as Jobs ---------- */
html.st body .mj-top { margin: 0 -10px 12px; padding: 12px 12px 14px; background: linear-gradient(180deg, var(--st-acc) 0 calc(100% - 7px), var(--st-acc2) calc(100% - 7px)); border-bottom: var(--st-b1) solid var(--st-ink); position: sticky; top: 0; z-index: 2; }
html.st body .mj-top h3 { color: #fff; -webkit-text-stroke: 3.5px var(--st-ink); paint-order: stroke fill; text-shadow: 0 2px 0 var(--st-ink); font-size: 26px; }
html.st body :is(.mj-top .back, .mj-top .x) { background: #fff; border: var(--st-b2) solid var(--st-ink); box-shadow: 0 3px 0 var(--st-ink); width: 36px; height: 36px; box-sizing: border-box; }

/* ---------- Your level (lab.js levelCard): areas as darker tiles inside the card, gold badge with ink ---------- */
html.st body .lb-areas li { background: var(--st-nv0); border: var(--st-b3) solid var(--st-ink); opacity: 0.7; }
html.st body .lb-areas li.on { opacity: 1; box-shadow: inset 0 0 0 2px var(--st-acc); }
html.st body .lb-meta { background: var(--st-nv0); border: var(--st-b3) solid var(--st-ink); color: var(--st-gold); }
html.st body .lb-badge { background: linear-gradient(180deg, var(--st-gold) 0 54%, var(--st-gold2) 54%); border: var(--st-b2) solid var(--st-ink); box-shadow: 0 3px 0 var(--st-ink); color: #fff; -webkit-text-stroke: 3px var(--st-ink); paint-order: stroke fill; }
html.st body .lb-bar { background: var(--st-nv0); border: 1.5px solid var(--st-ink); box-sizing: border-box; height: 12px; }
html.st body .lb-bar i { background: linear-gradient(180deg, var(--st-acc) 0 54%, var(--st-acc2) 54%); }
html.st body .lb-bar.big { box-shadow: none; height: 18px; }
html.st body .lb-bar.big i { background: linear-gradient(180deg, var(--st-gold) 0 54%, var(--st-gold2) 54%); }
html.st body .lb-lvl b { color: #fff; }

/* ---------- streak flame: closed a white sticker, open it grows into a soft orange pill (as before, new look) ---------- */
html.st body .acct-flame.open { background: linear-gradient(180deg, var(--st-acc) 0 54%, var(--st-acc2) 54%); border: var(--st-b2) solid var(--st-ink); box-shadow: 0 3.5px 0 var(--st-ink); }
html.st body .acct-flame.open .fl-btn { box-shadow: none; border-color: var(--st-ink); }
html.st body .acct-flame .fl-txt b { color: #fff; -webkit-text-stroke: 2.7px var(--st-ink); paint-order: stroke fill; text-shadow: 0 1.5px 0 var(--st-ink); }
html.st body .acct-flame .fl-txt small { color: var(--st-ink); }
html.st body .acct-flame .fl-txt a { color: var(--st-ink); }
html.st body .acct-flame .fl-claim { background: linear-gradient(180deg, #fff 0 54%, #dbe3f8 54%); color: var(--st-ink); border: var(--st-b2) solid var(--st-ink); box-shadow: 0 2.5px 0 var(--st-ink); }

/* ---------- Move wheel: the dashed ring ends above the bottom bar (Adrian 26.10.: it ran through the pills) ---------- */
html.st body .mw-ring { clip-path: inset(0 0 calc(100% - 236px) 0); }
@media (min-width: 760px) { html.st body .mw-ring { clip-path: inset(0 0 calc(100% - 258px) 0); } }

/* ---------- Main Job list + job detail sheet (js/mainjob.js) – were dark texts for the cream sheet (Adrian 26.10.) ---------- */
html.st body .mj-jb b, html.st body .mj-jb .pay { color: #fff; }
html.st body .mj-jb small, html.st body .mj-jb .pay small, html.st body .mj-key, html.st body .mj-note { color: var(--st-tx); }
html.st body .mj-jb .slots .cnt { color: var(--st-gold); }
html.st body .mj-jb .pill.wait { background: var(--st-nv0); color: var(--st-gold); border: var(--st-b3) solid var(--st-ink); }
html.st body .mj-jb .pill.mine { border: var(--st-b3) solid var(--st-ink); }
html.st body .mj-jb .pill.apply, html.st body .mj-sheet .ok, html.st body .mj-go { border: var(--st-b2) solid var(--st-ink); box-shadow: 0 3px 0 var(--st-ink); }
html.st body .mj-sheet p { color: var(--st-tx); }
html.st body .mj-sheet .ar { color: var(--st-acc); }
html.st body .mj-sheet .cost div { background: var(--st-nv0); color: #fff; border: var(--st-b3) solid var(--st-ink); }
html.st body .mj-sheet .cost s { color: #8f9ac6; }
html.st body .mj-sheet .cost .warn { background: rgba(255, 106, 77, 0.14); color: #ffb3a6; }
html.st body .mj-sheet .ghost { border: var(--st-b2) solid var(--st-ink); box-shadow: 0 3px 0 var(--st-ink); }
html.st body .mj-sheet b, html.st body .mj-sheet h3, html.st body .mj-sheet h4 { color: #fff; }

/* ---------- your main job (js/mainjob.js .mj-me) in the sticker look; Stop as a round-ended pill (Adrian 26.10.) ---------- */
html.st body .mj-x { width: 42px; height: 42px; flex: none; padding: 0; border-radius: 50%; box-sizing: border-box; display: grid; place-items: center; font-size: 0; line-height: 0; color: transparent; background: linear-gradient(180deg, #fff 0 54%, #dbe3f8 54%); }   /* round: a stop square instead of the word (aria-label stays) */
html.st body .mj-x { position: relative; }
html.st body .mj-x::before { content: ''; position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 3px; background: var(--st-ink); }   /* centred on its own – the hidden word must not push it */
html.st body .mj-me { background: var(--st-nv2); border: var(--st-b2) solid var(--st-ink); box-shadow: 0 3.5px 0 var(--st-ink); border-radius: 22px; }
html.st body .mj-me .av { border: var(--st-b2) solid var(--st-ink); box-shadow: 0 3px 0 var(--st-ink); box-sizing: border-box; }
html.st body :is(.mj-me .hd b, .mj-jb b) { color: #fff; -webkit-text-stroke: 3px var(--st-ink); paint-order: stroke fill; text-shadow: 0 1.5px 0 var(--st-ink); }
html.st body .mj-jb b { font-family: 'Lilita One', 'Arial Black', sans-serif; font-weight: 400; font-size: 16px; letter-spacing: 0.02em; -webkit-text-stroke-width: 2.7px; }
html.st body .mj-me .hd small { color: var(--st-tx); }
html.st body .mj-me .mj-tag { background: var(--st-nv0); border: var(--st-b3) solid var(--st-ink); color: #fff; }
html.st body .mj-me .sal { background: var(--st-nv0); border: var(--st-b2) solid var(--st-ink); box-shadow: none; }
html.st body .mj-me .sal span, html.st body .mj-me .sal b small { color: var(--st-tx); }
html.st body .mj-me .sal b { color: var(--st-gold); -webkit-text-stroke: 3px var(--st-ink); paint-order: stroke fill; }
html.st body .mj-me .sal b small { -webkit-text-stroke: 0; }
html.st body .mj-me .seg i { background: var(--st-nv2); border: 1.5px solid var(--st-ink); box-sizing: border-box; }
html.st body .mj-me .seg i.on { background: linear-gradient(180deg, var(--st-acc) 0 54%, var(--st-acc2) 54%); }
html.st body .mj-me .seg i.part { background: linear-gradient(90deg, var(--st-acc) var(--p), var(--st-nv2) var(--p)); }
html.st body .mj-me .stats div { background: var(--st-nv0); border: var(--st-b2) solid var(--st-ink); box-shadow: 0 2.5px 0 var(--st-ink); }
html.st body .mj-me .stats b { color: #fff; -webkit-text-stroke: 2.7px var(--st-ink); paint-order: stroke fill; }
html.st body .mj-me .stats span, html.st body .mj-me .rules div { color: var(--st-tx); }
html.st body .mj-me .rules em { background: #fff; border: var(--st-b3) solid var(--st-ink); box-shadow: 0 2px 0 var(--st-ink); }
html.st body .mj-me .fit { color: var(--st-tx); }
html.st body .mj-me .fit button { background: var(--st-nv0); color: #c3cbe6; border: var(--st-b3) solid var(--st-ink); }
html.st body .mj-me .fit button.on { background: #fff; color: var(--st-ink); box-shadow: 0 2px 0 var(--st-ink); }
html.st body .mj-me .acts .ghost { background: var(--st-nv0); border: var(--st-b2) solid var(--st-ink); box-shadow: 0 3px 0 var(--st-ink); color: #ffb3a6; box-sizing: border-box; line-height: 34px; }
html.st body .mj-me.none { background: var(--st-nv0); }
html.st body .mj-me .sal .top { gap: 10px; align-items: center; }
html.st body .mj-me .sal .top > span { white-space: nowrap; }
html.st body .mj-me .sal b { text-align: right; }
html.st body .mj-me .sal b small { display: block; margin-top: 3px; }

/* ---------- rule (Adrian 26.10.): every white display text / heading gets the ink contour ---------- */
html.st body :is(.ilive b, .hud-online b, .lb-floor b, .g-help i, .g-find-l b, .nb-day b, .nb-prize b, .nb-task b, .nb-bbtn, .tk-lad .nm, .tk-row .rw, .mj-jb .pay, .mj-tt b, .mj-task.done b,
  .mw-it b, .mw-home b, .lb-body h4, .lb-row b, .lb-pts, .g-emohead b, .tkg-h b, .so-card h3, .so-card h4, .wh .win b, .acct-lvl b, .acct-row > span, .nb-fcard h3, .nb-fcard b) {
  color: #fff; -webkit-text-stroke: 2.6px var(--st-ink); paint-order: stroke fill; text-shadow: 0 1.5px 0 var(--st-ink); }
html.st body .lb-pts small { -webkit-text-stroke: 0; text-shadow: none; }