:where(.lk-pick){--lk-c:initial;--lk-carbon:initial;--lk-corners:initial;--lk-fold:initial;--lk-glass:initial;--lk-grille:initial;--lk-hole:initial;--lk-in-anim:initial;--lk-in-bg:initial;--lk-in-size:initial;--lk-rivets:initial;--lk-stroke:initial;--lk-stroke-g:initial;}
/* ============================================================
   STAFF OS — LOOK PREVIEWS (Guto + Hadi, 2026-10-01)
   ------------------------------------------------------------
   TEMPORARY. Sixteen material treatments for the whole app,switched by
   [data-look]. Loaded ONLY by the demo build (cloud/deploy-looks.sh),never by cloud/deploy.sh,so no option ever reaches the staff app.
   When Guto picks one,its values move into app/index.html and this folder
   is deleted in the same change.

   Round 3 rules (Guto): NO red-filled buttons in any look — a selected tab,a
   selected section or a main action shows itself by its LABEL (red, glowing),never by a red fill. The liquid rim is blood,never silver: red and black,several reds,movement you can see. Shift chips and calendar request tiles
   keep their red: that red is data (which shift),not decoration.

   SCOPE (2026-10-01): selectors are [data-look],not html[data-look],so a look
   applies to ANY element that carries the attribute — the gallery shows all of
   them on one page. On the live app only <html> carries it.

   HOW A LOOK IS WRITTEN: a look only sets the --lk-* values below. One shared
   set of rules turns them into every card,button,tab and tile,so a look is
   a palette of materials rather than a second stylesheet.
   ============================================================ */
@property --lm-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes lm-flow{to{--lm-a:360deg}}
@keyframes lk-sweep{from{background-position:-160% 0}to{background-position:260% 0}}
@keyframes lk-float{from{translate:0 0}to{translate:0 -3px}}
@keyframes lk-ekg{from{background-position:0 100%}to{background-position:-60px 100%}}

:root{
  --lk-in-ease:cubic-bezier(.23,1,.32,1);
  --lk-back:cubic-bezier(.34,1.45,.64,1);
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-hard:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* blood: the liquid every rim look draws from */
  --blood:#160203,var(--rc0,#5e0408) 8%,var(--rc1,#e4141b) 15%,#2a0204 24%,var(--rc2,#9b0a10) 34%,#050101 44%,
    var(--rc3,#c4121a) 55%,var(--rc4,#3d0306) 64%,var(--rc5,#ff2a31) 72%,#1c0203 82%,var(--rc6,#7d070c) 91%,#160203;
}

/* ---------- the press: every look ---------- */
:is(.btn,.tabs button,.pos-tabs button,.gf-pos .chk,.pk-b,.mn-b,.ins-sb,.line-btn,.lang-btn,.xbtn,.tg,.deck-card){
  transition:transform 280ms var(--lk-back),filter 160ms ease,box-shadow 200ms var(--lk-in-ease),
    background-color 200ms ease,color 200ms ease,border-color 200ms ease,text-shadow 200ms ease}
:is(.btn,.tabs button,.pos-tabs button,.gf-pos .chk,.pk-b,.mn-b,.ins-sb,.line-btn,.lang-btn,.xbtn,.tg,.deck-card):active:not(:disabled){
  transform:translateY(1px) scale(.96);transition-duration:110ms;transition-timing-function:var(--lk-in-ease)}
:is(.posgrp-h,.ins-ph,.cs-h){transition:transform 260ms var(--lk-back)}
:is(.posgrp-h,.ins-ph,.cs-h):active{transform:scale(.985);transition-duration:110ms}
.cal .day{transition:transform 280ms var(--lk-back),filter 160ms ease}
.cal .day:active:not(:disabled){transform:scale(.92);transition-duration:110ms}
.roster .chip{transition:transform 160ms var(--lk-in-ease)}
.roster td.cell.pick:active .chip{transform:scale(.92)}
@media (prefers-reduced-motion:reduce){
  :is(.btn,.tabs button,.pos-tabs button,.pk-b,.mn-b,.ins-sb,.cal .day,.posgrp-h,.ins-ph,.roster .chip){transition:none!important}
  :is(.btn,.tabs button,.pos-tabs button,.pk-b,.mn-b,.ins-sb,.cal .day,.posgrp-h,.ins-ph):active{transform:none!important}
  [data-look] :is(.tabs button.on,.pos-tabs button.on,.gf-pos .chk.on,.ins-sb.on,.deck-card.cur)::before,[data-look] :is(.tabs button.on,.pos-tabs button.on,.gf-pos .chk.on,.ins-sb.on,.deck-card.cur)::after{animation:none!important}
  [data-look] :is(.act-row .btn,.btn-primary){animation:none!important}
}

/* ---------- defaults every look starts from ---------- */
[data-look]{
  --lk-body:linear-gradient(170deg,#0e0e10,#070708);
  --lk-card:linear-gradient(180deg,#151517,#0b0b0d);
  --lk-card-bd:1px solid #2a2a2f;
  --lk-card-sh:0 1px 0 rgba(255,255,255,.06) inset,0 20px 40px -22px #000;
  --lk-card-blur:none;
  --lk-btn:linear-gradient(180deg,#232327,#111113);
  --lk-btn-bd:1px solid #2e2e33;
  --lk-btn-c:#cfcfd5;
  --lk-btn-sh:0 1px 0 rgba(255,255,255,.08) inset,0 3px 6px -2px #000;
  --lk-sel:linear-gradient(180deg,#1c1c1f,#0b0b0d);
  --lk-sel-bd:1px solid var(--rc7,#4a1418);
  --lk-sel-c:var(--rc8,#ff3e45);
  --lk-sel-glow:0 0 0.7px var(--rc9,rgba(255,120,125,0.54)),0 0 5.6px var(--rc10,rgba(228,20,27,0.48)),0 0 12.6px var(--rc11,rgba(228,20,27,0.24));
  --lk-sel-sh:0 1px 0 rgba(255,255,255,.06) inset,0 4px 10px -6px #000;
  --lk-sel-svg:drop-shadow(0 0 3px var(--rc12,rgba(228,20,27,.4)));
  --lk-btn-blur:none;
  --lk-tint:rgba(14,12,13,.42);
  --lk-tint-bd:1px solid rgba(255,255,255,.08);
  --lk-rim-on:none; --lk-rim:var(--blood); --lk-rim-w:1.5px; --lk-rim-speed:45s;
  --lk-in-on:none; --lk-in-speed:22s; --lk-in-op:1;
  --lk-in:var(--rc13,rgba(120,4,9,.0)),var(--rc14,rgba(150,6,12,.55)) 18%,rgba(20,1,2,.0) 34%,var(--rc15,rgba(110,4,8,.45)) 52%,
    rgba(0,0,0,0) 68%,var(--rc16,rgba(190,10,18,.4)) 84%,var(--rc17,rgba(120,4,9,0));
  --lk-tile:linear-gradient(180deg,#19191c,#0e0e10);
  --lk-tile-bd:1px solid #26262b;
  --lk-tile-sh:0 1px 0 rgba(255,255,255,.05) inset,0 2px 0 #000;
}

/* ---------- the shared rules that turn values into surfaces ---------- */
/* THE GROUND IS PINNED (bug, Guto 2026-10-01: "I could scroll a layer of the
   background"). It used to sit on <body>: iOS rubber-bands the page and the body
   box moved on its own,uncovering the old <html> colour while the fixed layers
   (chevrons, shield) stayed put. Now it is a FIXED layer,oversized 20vh each way
   like the chevron layer,under everything (z -1); <html> carries a matching dark
   base; and the page itself no longer bounces — the scrolling lists inside the
   app still do. */
html[data-look]{background:#050405;overscroll-behavior:none}
[data-look] body{background:transparent;overscroll-behavior:none}
[data-look] body::after{content:"";position:fixed;left:0;right:0;top:-20vh;height:140vh;
  z-index:-1;pointer-events:none;background:var(--lk-body)}
/* Under the iOS status bar (black-translucent, 2026-10-01): the top bar is
   see-through and UNblurred,so the strip under the clock is the crisp ground
   rather than a smeared band; 6px more air below the clock than the bare inset. */
[data-look] .topbar{background:linear-gradient(180deg,rgba(5,4,5,.55),rgba(5,4,5,.15));
  backdrop-filter:none;-webkit-backdrop-filter:none;padding-top:max(10px,calc(var(--sa-t) + 6px))}
[data-look] .glass{background:var(--lk-card);border:var(--lk-card-bd);box-shadow:var(--lk-card-sh);
  backdrop-filter:var(--lk-card-blur);-webkit-backdrop-filter:var(--lk-card-blur)}
/* never blur under the scrolling month,in any look */
[data-look] .card.glass:has(.roster-scroll){backdrop-filter:none;-webkit-backdrop-filter:none}
[data-look] :is(.btn,.tabs button,.pos-tabs button,.gf-pos .chk,.gf-head .xbtn,.mn-b,.ins-sb,.deck-card){
  background:var(--lk-btn);border:var(--lk-btn-bd);color:var(--lk-btn-c);box-shadow:var(--lk-btn-sh);
  backdrop-filter:var(--lk-btn-blur);-webkit-backdrop-filter:var(--lk-btn-blur)}
[data-look] :is(.tabs button.on,.pos-tabs button.on,.gf-pos .chk.on,.ins-sb.on,.deck-card.cur){
  position:relative;isolation:isolate;background:var(--lk-sel);border:var(--lk-sel-bd);
  color:var(--lk-sel-c);text-shadow:var(--lk-sel-glow);box-shadow:var(--lk-sel-sh);
  backdrop-filter:var(--lk-btn-blur);-webkit-backdrop-filter:var(--lk-btn-blur)}
[data-look] :is(.tabs button.on,.pos-tabs button.on,.gf-pos .chk.on,.ins-sb.on,.deck-card.cur) svg{filter:var(--lk-sel-svg)}
/* RED MEANS SELECTED — nothing else (Guto, 2026-10-02: "the full screen and
   venue calendar buttons don't have to be red; they are just buttons — the red
   ones should be the ones that are selected"). A main action (Publish, Submit,
   Venue calendar, Full view…) is an ordinary button with a brighter label. */
[data-look] .btn.btn-primary{color:var(--lk-pri-c,#f4f4f6);text-shadow:none}
[data-look] .btn-primary svg{filter:none}
/* …except Publish once the section's month is OUT: it is the live one,so it
   wears the selected red (Guto, 2026-10-02: "turns red, text 公開中") */
[data-look] .btn.btn-primary.is-live{color:var(--lk-sel-c);text-shadow:var(--lk-sel-glow);border:var(--lk-sel-bd);background:var(--lk-sel)}
[data-look] :is(.pos-tabs button.on,.gf-pos .chk.on) .dot{background:var(--lk-sel-c);border-color:var(--lk-sel-c);box-shadow:0 0 4px var(--rc18,rgba(228,20,27,.5))}
[data-look] .btn.btn-primary:disabled{color:#6f6f76;text-shadow:none}
/* the liquid rim */
[data-look] :is(.tabs button.on,.pos-tabs button.on,.gf-pos .chk.on,.ins-sb.on,.deck-card.cur)::before{
  content:var(--lk-rim-on);position:absolute;inset:calc(-1 * var(--lk-rim-w));border-radius:inherit;
  padding:var(--lk-rim-w);z-index:-1;pointer-events:none;
  background:var(--lk-rim-bg,conic-gradient(from var(--lm-a),var(--lk-rim)));background-size:var(--lk-rim-size,auto);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;animation:var(--lk-rim-anim,lm-flow) var(--lk-rim-speed) linear infinite}
/* the liquid inside (the slow movement under the label) */
[data-look] :is(.tabs button.on,.pos-tabs button.on,.gf-pos .chk.on,.ins-sb.on,.deck-card.cur)::after{
  content:var(--lk-in-on);position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  background:var(--lk-in-bg,conic-gradient(from var(--lm-a) at 50% 140%,var(--lk-in)));
  background-size:var(--lk-in-size,auto);background-repeat:var(--lk-in-rep,no-repeat);opacity:var(--lk-in-op);
  background-position:var(--lk-in-pos,0 0);
  animation:var(--lk-in-anim,lm-flow) var(--lk-in-speed) linear infinite}
[data-look] .btn-primary:disabled::before,[data-look] .btn-primary:disabled::after{animation-play-state:paused;opacity:.4}
/* calendar tiles that are NOT data (empty / confirmed): the look's material */
[data-look] .cal .day:not(.available):not(.preferred):not(.dark-x):not(.blank){
  background:var(--lk-tile);border:var(--lk-tile-bd);box-shadow:var(--lk-tile-sh)}
[data-look] .cal .day.fixed{border-color:rgba(255,255,255,.4)}

/* ---------- round 4 (Guto): fewer cards,see the shield through them ----------
   The big section cards dissolve — their contents float on the page,over the
   ghost shield. Only what NEEDS a surface keeps one: the roster grid (a dark,
   see-through plate so the month still reads as one object),small tiles like
   the KPIs (tinted, not solid),and sheets (dialogs must stay legible). */
[data-look] .glass:not(.sheet){background:var(--lk-tint);border:var(--lk-tint-bd);
  backdrop-filter:none;-webkit-backdrop-filter:none}
[data-look] .card.glass{background:none;border-color:transparent;box-shadow:none}
[data-look] .roster-scroll{background:rgba(10,9,10,.55);border:var(--lk-tint-bd);border-radius:12px}
[data-look] .sheet{background:var(--lk-card);border:var(--lk-card-bd)}
/* Free-standing main buttons drift,very slowly,out of step with each other.
   `translate`,not `transform`: the press scales with `transform`,and the two
   compose instead of one cancelling the other. */
[data-look] :is(.act-row .btn,.btn-primary){animation:lk-float 6.5s ease-in-out infinite alternate}
[data-look] .act-row .btn:nth-child(2){animation-duration:7.7s;animation-delay:-2.1s}

/* ================= 1 · BLOOD — the liquid rim,red and black ================= */
[data-look="blood"]{
  --lk-body:var(--noise),radial-gradient(1000px 600px at 50% -10%,var(--rc19,rgba(150,8,14,.12)),transparent 60%),linear-gradient(170deg,#0e0b0c,#060505);
  --lk-card:var(--noise) padding-box,linear-gradient(180deg,#161112,#0b0809) padding-box,
    linear-gradient(140deg,var(--rc20,#4a0609),#120203 30%,var(--rc21,#6e0a0f) 55%,#140203 78%,var(--rc22,#3a0507)) border-box;
  --lk-card-bd:1px solid transparent;
  --lk-card-sh:0 1px 0 var(--rc23,rgba(255,180,180,.05)) inset,0 2px 0 #000,0 22px 44px -22px #000;
  --lk-btn:linear-gradient(180deg,#221a1b,#100c0d 55%,#080606);
  --lk-btn-bd:1px solid #2b1c1e;
  --lk-sel:linear-gradient(180deg,#1a1011,#090606);
  --lk-sel-bd:2px solid transparent;
  --lk-rim-on:"";--lk-rim-w:2px;--lk-rim-speed:45s;
}

/* ================= 6 · VELVET — the VIP room: leather,stitching ================= */
[data-look="velvet"]{
  --lk-body:var(--noise),var(--noise),radial-gradient(900px 600px at 50% 120%,var(--rc24,rgba(120,8,12,.32)),transparent 60%),linear-gradient(180deg,#0f0b0c,#060505);
  --lk-card:var(--noise),var(--noise),radial-gradient(120% 80% at 30% 0%,#1d1517,#0d0a0b);
  --lk-card-bd:1px solid #2a1c1f;
  --lk-card-sh:0 1px 0 rgba(255,220,220,.06) inset,0 0 0 1px #000,0 20px 40px -20px #000;
  --lk-btn:var(--noise),linear-gradient(180deg,#2a1e21,#150f11);--lk-btn-bd:1px solid #3b2a2e;--lk-btn-c:#ead9db;
  --lk-sel:var(--noise),linear-gradient(180deg,#1c1214,#0d090a);--lk-sel-bd:1px dashed var(--rc25,rgba(255,90,96,.45));
  --lk-tile:var(--noise),linear-gradient(180deg,#1f1618,#120d0f);--lk-tile-bd:1px dashed var(--rc26,rgba(255,190,190,.12));
}
[data-look="velvet"] .glass:where(:not(.lk-pick:not([data-look="velvet"]) *)){position:relative}
[data-look="velvet"] :is(.card,.kpi).glass:where(:not(.lk-pick:not([data-look="velvet"]) *))::after{content:"";position:absolute;inset:6px;pointer-events:none;
  border:1px dashed var(--rc27,rgba(255,190,190,.10));border-radius:calc(var(--r-lg) - 5px)}

/* ================= 7 · NEON — the sign over the door ================= */
[data-look="neon"]{
  --lk-body:radial-gradient(700px 400px at 50% 0%,var(--rc28,rgba(228,20,27,.10)),transparent 65%),linear-gradient(180deg,#09090b,#040405);
  --lk-card:linear-gradient(180deg,#0e0e10,#09090a);--lk-card-bd:1px solid #1f1f23;
  --lk-card-sh:0 0 0 1px #000,0 20px 40px -22px #000;
  --lk-btn:#0c0c0e;--lk-btn-bd:1px solid #2a2a2f;--lk-btn-c:#9a9aa2;
  --lk-btn-sh:none;
  --lk-sel:#0c0b0c;--lk-sel-bd:1.5px solid var(--rc5,#ff2a31);
  --lk-sel-c:var(--rc29,#ffd6d8);
  --lk-sel-glow:0 0 1px rgba(255,255,255,.7),0 0 3px var(--rc30,rgba(255,58,65,.7)),0 0 8px var(--rc31,rgba(228,20,27,.32));
  --lk-sel-sh:0 0 4px var(--rc32,rgba(255,42,49,.45)),0 0 10px var(--rc33,rgba(228,20,27,.22)),inset 0 0 5px var(--rc34,rgba(228,20,27,.25));
}

/* ================= 8 · CARBON — race-car weave ================= */
[data-look="carbon"]{
  --lk-carbon:linear-gradient(27deg,#141414 5px,transparent 5px) 0 5px/20px 20px,
    linear-gradient(207deg,#141414 5px,transparent 5px) 10px 0/20px 20px,
    linear-gradient(27deg,#1f1f1f 5px,transparent 5px) 0 10px/20px 20px,
    linear-gradient(207deg,#1f1f1f 5px,transparent 5px) 10px 5px/20px 20px,
    linear-gradient(90deg,#191919 10px,transparent 10px) 0 0/20px 20px,
    linear-gradient(#1b1b1b 25%,#171717 25%,#171717 50%,transparent 50%,transparent 75%,#202020 75%,#202020) 0 0/20px 20px,#151515;
  --lk-body:linear-gradient(180deg,#0b0b0c,#060606);
  --lk-card:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.35)),var(--lk-carbon);
  --lk-card-bd:1px solid #262626;--lk-card-sh:0 1px 0 rgba(255,255,255,.08) inset,0 20px 40px -22px #000;
  --lk-btn:linear-gradient(180deg,#232323,#121212);--lk-btn-bd:1px solid #050505;--lk-btn-c:#d6d6d6;
  --lk-btn-sh:0 1px 0 rgba(255,255,255,.08) inset,0 2px 4px #000;
  --lk-sel:linear-gradient(0deg,var(--rc1,#e4141b) 0 2px,transparent 2px),linear-gradient(180deg,#1d1d1d,#0e0e0e);
  --lk-sel-bd:1px solid #050505;
  --lk-sel-sh:0 1px 0 rgba(255,255,255,.06) inset,0 6px 14px -8px var(--rc31,rgba(228,20,27,.32));
}

/* ================= 11 · LAVA — black rock,molten seams ================= */
[data-look="lava"]{
  --lk-body:var(--noise-hard),radial-gradient(900px 500px at 50% 110%,var(--rc35,rgba(170,10,16,.22)),transparent 60%),linear-gradient(180deg,#0d0a0a,#050404);
  --lk-card:var(--noise-hard) padding-box,radial-gradient(130% 60% at 50% 120%,var(--rc36,rgba(200,14,22,.16)),transparent 60%) padding-box,
    linear-gradient(180deg,#141011,#0a0808) padding-box,
    linear-gradient(120deg,#200304,var(--rc37,#b40d14) 18%,#1a0203 32%,var(--rc38,#6e070c) 58%,#120202 74%,var(--rc39,#d01019) 90%,#1a0203) border-box;
  --lk-card-bd:1px solid transparent;--lk-card-sh:0 0 18px -6px var(--rc40,rgba(200,14,22,.4)),0 22px 44px -22px #000;
  /* Round 6 (Guto): no liquid; the buttons are THICK DARK GLASS. What is behind
     shows through, blurred and dimmed; a lens highlight curves across the top,
     a caustic glints at the bottom, the edges catch light top and fall dark
     below — the depth of a slab, not a sheet. */
  --lk-glass:radial-gradient(120% 85% at 28% -18%,rgba(255,255,255,.16),rgba(255,255,255,.03) 48%,transparent 62%),
    radial-gradient(80% 60% at 78% 128%,rgba(255,255,255,.08),transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.28));
  --lk-btn:var(--lk-glass),rgba(16,12,13,.34);
  --lk-btn-bd:1px solid rgba(255,255,255,.11);--lk-btn-c:#e6e2e3;
  --lk-btn-blur:blur(9px) saturate(150%) brightness(.72);
  --lk-btn-sh:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.6),
    inset 0 10px 16px -12px rgba(255,255,255,.16),inset 0 -12px 18px -14px rgba(0,0,0,.75),
    0 10px 22px -12px rgba(0,0,0,.95),0 2px 4px -2px rgba(0,0,0,.8);
  --lk-sel:var(--lk-glass),radial-gradient(90% 70% at 50% 120%,var(--rc41,rgba(160,10,16,.22)),transparent 70%),rgba(14,9,10,.4);
  --lk-sel-bd:1px solid var(--rc42,rgba(255,110,115,.2));
  --lk-sel-c:var(--rc43,#f2333b);--lk-sel-glow:0 0 0.7px var(--rc44,rgba(255,110,115,0.3)),0 0 4.9px var(--rc45,rgba(228,20,27,0.25));
  --lk-sel-svg:drop-shadow(0 0 2.5px var(--rc31,rgba(228,20,27,.32)));
  --lk-sel-sh:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.6),
    inset 0 10px 16px -12px rgba(255,255,255,.14),inset 0 -12px 18px -14px rgba(0,0,0,.75),
    0 10px 22px -12px rgba(0,0,0,.95);
  --lk-rim-on:none;
}

/* ================= 14 · HUD — targeting corners ================= */
[data-look="hud"]{
  --lk-c:var(--rc1,#e4141b);
  --lk-corners:linear-gradient(var(--lk-c),var(--lk-c)) top left/14px 1.5px no-repeat,linear-gradient(var(--lk-c),var(--lk-c)) top left/1.5px 14px no-repeat,
    linear-gradient(var(--lk-c),var(--lk-c)) top right/14px 1.5px no-repeat,linear-gradient(var(--lk-c),var(--lk-c)) top right/1.5px 14px no-repeat,
    linear-gradient(var(--lk-c),var(--lk-c)) bottom left/14px 1.5px no-repeat,linear-gradient(var(--lk-c),var(--lk-c)) bottom left/1.5px 14px no-repeat,
    linear-gradient(var(--lk-c),var(--lk-c)) bottom right/14px 1.5px no-repeat,linear-gradient(var(--lk-c),var(--lk-c)) bottom right/1.5px 14px no-repeat;
  --lk-body:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px),linear-gradient(180deg,#0a0b0c,#050505);
  --lk-card:var(--lk-corners),linear-gradient(180deg,var(--rc46,rgba(228,20,27,.04)),transparent 40%),#0c0c0e;
  --lk-card-bd:1px solid rgba(255,255,255,.07);--lk-card-sh:none;
  --lk-btn:#0e0e10;--lk-btn-bd:1px solid rgba(255,255,255,.14);--lk-btn-c:#c4c4cb;--lk-btn-sh:none;
  --lk-sel:var(--lk-corners),var(--rc47,rgba(228,20,27,.08));--lk-sel-bd:1px solid var(--rc48,rgba(228,20,27,.35));--lk-sel-sh:none;
}
[data-look="hud"] :is(.btn,.tabs button,.pos-tabs button,.gf-pos .chk,.gf-head .xbtn,.mn-b,.ins-sb,.deck-card):where(:not(.lk-pick:not([data-look="hud"]) *)){border-radius:6px}
[data-look="hud"] .glass:where(:not(.lk-pick:not([data-look="hud"]) *)){border-radius:8px}

/* ================= 16 · LASER — a beam crosses whatever is selected ================= */
[data-look="laser"]{
  --lk-body:radial-gradient(800px 300px at 50% -5%,var(--rc28,rgba(228,20,27,.10)),transparent 70%),linear-gradient(180deg,#0a0a0b,#040404);
  --lk-card:linear-gradient(180deg,#121214,#09090a);--lk-card-bd:1px solid #232327;
  --lk-btn:linear-gradient(180deg,#1b1b1e,#0c0c0e);--lk-btn-bd:1px solid #2b2b30;
  --lk-sel:linear-gradient(180deg,#151315,#080708);--lk-sel-bd:1px solid var(--rc49,#3a1518);
  --lk-in-on:"";--lk-in-anim:lk-sweep;--lk-in-speed:5.5s;--lk-in-size:45% 100%;
  --lk-in-bg:linear-gradient(100deg,transparent 30%,var(--rc50,rgba(255,40,48,.0)) 38%,var(--rc51,rgba(255,40,48,.55)) 49%,var(--rc52,rgba(255,200,200,.7)) 50%,var(--rc51,rgba(255,40,48,.55)) 51%,transparent 62%);
}

/* ================= 18 · BLACKOUT — nothing but the red word ================= */
[data-look="blackout"]{
  --lk-body:#000;--lk-card:#000;--lk-card-bd:1px solid #1a1a1a;--lk-card-sh:none;
  --lk-btn:#000;--lk-btn-bd:1px solid #222;--lk-btn-c:#9c9c9c;--lk-btn-sh:none;
  --lk-sel:#000;--lk-sel-bd:1px solid #222;--lk-sel-c:var(--rc53,#ff2b32);--lk-sel-glow:none;--lk-sel-sh:none;--lk-sel-svg:none;
  --lk-tile:#000;--lk-tile-bd:1px solid #1c1c1c;--lk-tile-sh:none;
  --lk-tint:rgba(0,0,0,.5);--lk-tint-bd:1px solid #1a1a1a;
}

/* ================= 21 · SPEAKER — the grille on the stacks ================= */
[data-look="speaker"]{
  --lk-grille:radial-gradient(circle,rgba(0,0,0,.85) 1.3px,transparent 1.8px) 0 0/6px 6px;
  --lk-body:linear-gradient(180deg,#0d0d0f,#060607);
  --lk-btn:var(--lk-grille),linear-gradient(180deg,#232327,#121214);--lk-btn-bd:1px solid #2c2c31;
  --lk-sel:var(--lk-grille),linear-gradient(180deg,#1d1314,#0d0909);--lk-sel-bd:1px solid #3b1a1d;
  --lk-sel-c:var(--rc54,#ff3a41);--lk-sel-glow:0 0 1.4px var(--rc55,#ff6a70),0 0 5.6px var(--rc56,rgba(228,20,27,0.51));
  --lk-tile:var(--lk-grille),linear-gradient(180deg,#1a1a1d,#0e0e10);
  --lk-tint:rgba(14,14,16,.45);
}

/* ================= 22 · WINE — a slow burgundy liquid rim ================= */
[data-look="wine"]{
  --lk-body:var(--noise),radial-gradient(900px 600px at 50% -10%,var(--rc57,rgba(90,6,16,.22)),transparent 60%),linear-gradient(170deg,#0d0a0b,#050405);
  --lk-btn:linear-gradient(180deg,#1e1719,#0e0b0c);--lk-btn-bd:1px solid #2b1d21;
  --lk-sel:linear-gradient(180deg,#170e10,#080506);--lk-sel-bd:2.5px solid transparent;
  --lk-rim-on:"";--lk-rim-w:2.5px;--lk-rim-speed:60s;
  --lk-rim:#1a0206,var(--rc58,#4a0412) 12%,var(--rc59,#8c0b22) 22%,#26030a 34%,var(--rc60,#6a0718) 46%,#0d0103 58%,var(--rc61,#a3102a) 70%,var(--rc62,#3b0510) 82%,var(--rc63,#5c0615) 92%,#1a0206;
  --lk-tint:rgba(16,10,12,.42);
}

/* ================= 24 · ROPE — the red velvet rope at the door,twisting ================= */
[data-look="rope"]{
  --lk-body:var(--noise),radial-gradient(800px 500px at 50% 0%,var(--rc64,rgba(140,8,14,.12)),transparent 60%),linear-gradient(180deg,#0d0b0c,#060505);
  --lk-btn:linear-gradient(180deg,#1f1a1b,#0f0c0d);--lk-btn-bd:1px solid #2c2224;
  --lk-sel:linear-gradient(180deg,#160f10,#080606);--lk-sel-bd:3px solid transparent;
  --lk-rim-on:"";--lk-rim-w:3px;--lk-rim-speed:90s;
}
/* the twist: fine stripes turning round the ring (var(--lm-a) must resolve on
   the ring itself, so this one is written out rather than passed as a value) */
[data-look="rope"] :is(.tabs button.on,.pos-tabs button.on,.gf-pos .chk.on,.ins-sb.on,.deck-card.cur):where(:not(.lk-pick:not([data-look="rope"]) *))::before{
  background:repeating-conic-gradient(from var(--lm-a),var(--rc65,#4a0509) 0 5deg,var(--rc66,#b30f16) 5deg 10deg,#2a0305 10deg 13deg,
    var(--rc67,#7a080d) 13deg 18deg,#1a0203 18deg 21deg,var(--rc68,#d0141b) 21deg 26deg)}

/* ---------- round 5 (Guto): the full-screen grid wears the look too ---------- */
[data-look] .gridsheet{background:var(--lk-body)}
[data-look] .gf-head{background:rgba(10,9,10,.82);border-bottom:var(--lk-tint-bd)}
[data-look] .gridsheet .roster-scroll.rs-full{border:0;border-radius:0;background:rgba(8,7,8,.5)}

/* ---------- round 5 (Guto): no glowing red bar down the left of a card ----------
   The staff tiles (Home figures, My shifts cards) get a proper edge in the
   look's own material instead: a see-through fill inside a gradient border. */
/* the old ::before WAS that red bar — it is re-used as the edge ring,so every
   one of its bar properties is reset here */
[data-look]{--lk-edge:linear-gradient(140deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 40%,rgba(255,255,255,.12) 70%,rgba(255,255,255,.05))}
[data-look] .glass:is(.kpi,.shift-card){border:1px solid transparent;background:var(--lk-tint)}
/* a ring cut out with a mask: a gradient BORDER under a see-through fill would
   show through the whole tile,so the edge lives only on the 1px ring */
[data-look] .glass:is(.kpi,.shift-card)::before{content:"";position:absolute;inset:-1px;
  top:-1px;bottom:-1px;left:-1px;right:-1px;width:auto;height:auto;border-radius:inherit;padding:1px;
  box-shadow:none;pointer-events:none;background:var(--lk-edge);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
[data-look] .shift-card.cancelled::before{opacity:.45}
[data-look="lava"]{--lk-edge:linear-gradient(120deg,var(--rc22,#3a0507),var(--rc69,#a00c12) 18%,#1a0203 34%,var(--rc70,#6e080d) 56%,#140202 74%,var(--rc71,#b80e15) 90%,#2a0304)}
[data-look="blood"]{--lk-edge:linear-gradient(140deg,var(--rc20,#4a0609),#120203 30%,var(--rc21,#6e0a0f) 55%,#140203 78%,var(--rc22,#3a0507))}
[data-look="wine"]{--lk-edge:linear-gradient(140deg,var(--rc62,#3b0510),#120104 35%,var(--rc60,#6a0718) 60%,#1a0206)}
[data-look="rope"]{--lk-edge:linear-gradient(140deg,var(--rc72,#5a0609),#160203 35%,var(--rc73,#8a0a10) 60%,#1a0203)}

/* ---------- the menu is glass like everything else (Guto, 2026-10-02) ----------
   Pills like the manager's buttons,and the page stays faintly visible behind
   the menu — glass with nothing behind it has nothing to bend. */
[data-look] .deck-card{border-radius:999px;padding:12px 22px}
[data-look] .stage.decked{opacity:1;filter:blur(7px) brightness(.3);transform:scale(.985)}

/* LIQUID LOOKS (Guto): the liquid is flashy enough — the label is plain blood-
   red,no glow; nothing bleeds inward from the rim. */
[data-look="blood"],[data-look="wine"],[data-look="rope"]{
  --lk-sel-c:var(--rc74,#ee2c33);--lk-sel-glow:none;--lk-sel-svg:none;--lk-in-on:none}

/* =====================================================================
   27–50 · SHAPES AND NEW WORLDS (Guto, 2026-10-01: "make it 50 … include
   changing shapes of the button like Hanko, and explore different styles").
   Shapes live in their own rules (a shape is geometry, not a value): they touch
   the text buttons,tabs and section chips only — never the round close X or
   the month arrows,which must stay recognisable.
   ===================================================================== */

/* ---- 27 · CHAMFER — industrial cut corners ---- */
[data-look="chamfer"]{
  --lk-body:var(--noise-hard),linear-gradient(180deg,#121314,#08090a);
  --lk-btn:linear-gradient(180deg,#2b2d31,#18191c);--lk-btn-bd:0 solid transparent;--lk-btn-c:#d9dade;--lk-btn-sh:none;
  --lk-sel:linear-gradient(180deg,#221819,#120d0e);--lk-sel-bd:0 solid transparent;--lk-sel-sh:none;
  --lk-sel-glow:0 0 3.5px var(--rc75,rgba(228,20,27,0.33));
}
[data-look="chamfer"] :is(.btn,.tabs button,.pos-tabs button,.gf-pos .chk):where(:not(.lk-pick:not([data-look="chamfer"]) *)){border-radius:0;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}

/* ---- 28 · BLADE — slanted,fast ---- */
[data-look="blade"]{
  --lk-body:radial-gradient(700px 300px at 0% 0%,var(--rc47,rgba(228,20,27,.08)),transparent 60%),linear-gradient(160deg,#0f0f11,#050505);
  --lk-btn:linear-gradient(100deg,#25252a,#141416);--lk-btn-bd:0 solid transparent;--lk-btn-sh:none;
  --lk-sel:linear-gradient(100deg,#2a1214,#120809);--lk-sel-bd:0 solid transparent;--lk-sel-sh:none;--lk-sel-glow:0 0 4.2px var(--rc76,rgba(228,20,27,0.3));
}
[data-look="blade"] :is(.btn,.tabs button,.pos-tabs button,.gf-pos .chk):where(:not(.lk-pick:not([data-look="blade"]) *)){border-radius:0;padding-left:20px;padding-right:20px;font-style:italic;
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%)}

/* ---- 29 · TAG — the VIP tag on the bottle ---- */
[data-look="tag"]{
  --lk-hole:radial-gradient(circle at calc(100% - 17px) 50%,#050505 0 3px,rgba(255,255,255,.28) 3.5px 4.2px,transparent 4.8px);
  --lk-body:var(--noise),linear-gradient(180deg,#100e0e,#060505);
  --lk-btn:var(--lk-hole),linear-gradient(180deg,#26211f,#151211);--lk-btn-bd:0 solid transparent;--lk-btn-c:#e4ddd9;--lk-btn-sh:none;
  --lk-sel:var(--lk-hole),linear-gradient(180deg,#24120f,#120807);--lk-sel-bd:0 solid transparent;--lk-sel-sh:none;--lk-sel-glow:none;--lk-sel-c:var(--rc54,#ff3a41);
}
[data-look="tag"] :is(.btn,.tabs button,.pos-tabs button,.gf-pos .chk):where(:not(.lk-pick:not([data-look="tag"]) *)){border-radius:6px 0 0 6px;padding-right:32px;
  clip-path:polygon(0 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,0 100%)}

/* ---- 30 · TICKET — the entry stub ---- */
[data-look="ticket"]{
  --lk-body:var(--noise),linear-gradient(180deg,#0f0d0d,#060505);
  --lk-btn:repeating-linear-gradient(90deg,transparent 0 6px,rgba(255,255,255,.0) 6px),linear-gradient(180deg,#24201f,#141110);
  --lk-btn-bd:1px dashed rgba(255,255,255,.14);--lk-btn-sh:none;
  --lk-sel:linear-gradient(180deg,#211312,#100807);--lk-sel-bd:1px dashed var(--rc77,rgba(255,80,86,.45));--lk-sel-sh:none;--lk-sel-glow:0 0 2.8px var(--rc78,rgba(228,20,27,0.27));
}
[data-look="ticket"] :is(.btn,.tabs button,.pos-tabs button,.gf-pos .chk):where(:not(.lk-pick:not([data-look="ticket"]) *)){border-radius:5px;
  -webkit-mask:radial-gradient(circle at 0 50%,transparent 6px,#000 6.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 6px,#000 6.5px) right/51% 100% no-repeat;
  mask:radial-gradient(circle at 0 50%,transparent 6px,#000 6.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 6px,#000 6.5px) right/51% 100% no-repeat}

/* ---- 31 · OUTLINE — nothing but a thin line ---- */
[data-look="outline"]{
  --lk-body:linear-gradient(180deg,#0b0b0c,#050505);
  --lk-btn:transparent;--lk-btn-bd:1px solid rgba(255,255,255,.22);--lk-btn-c:#d4d4d8;--lk-btn-sh:none;
  --lk-sel:transparent;--lk-sel-bd:1px solid var(--rc1,#e4141b);--lk-sel-glow:none;--lk-sel-sh:none;--lk-sel-svg:none;
}

/* ---- 32 · UNDERLINE — words,and a line under the chosen one ---- */
[data-look="underline"]{
  --lk-body:linear-gradient(180deg,#0b0b0c,#050505);
  --lk-btn:transparent;--lk-btn-bd:0 solid transparent;--lk-btn-c:#a9a9b0;--lk-btn-sh:inset 0 -1px 0 rgba(255,255,255,.12);
  --lk-sel:transparent;--lk-sel-bd:0 solid transparent;--lk-sel-sh:inset 0 -2px 0 var(--rc1,#e4141b);--lk-sel-glow:none;--lk-sel-c:var(--rc54,#ff3a41);
}
[data-look="underline"] :is(.btn,.tabs button,.pos-tabs button,.gf-pos .chk):where(:not(.lk-pick:not([data-look="underline"]) *)){border-radius:0;padding-left:6px;padding-right:6px}

/* ---- OVERLINE — a line over the chosen one (Guto 2026-10-03: more like Underline) ---- */
[data-look="overline"]{
  --lk-body:linear-gradient(180deg,#0b0b0c,#050505);
  --lk-btn:transparent;--lk-btn-bd:0 solid transparent;--lk-btn-c:#a9a9b0;--lk-btn-sh:inset 0 1px 0 rgba(255,255,255,.12);
  --lk-sel:transparent;--lk-sel-bd:0 solid transparent;--lk-sel-sh:inset 0 2px 0 var(--rc1,#e4141b);--lk-sel-glow:none;--lk-sel-c:var(--rc54,#ff3a41);
}
[data-look="overline"] :is(.btn,.tabs button,.pos-tabs button,.gf-pos .chk):where(:not(.lk-pick:not([data-look="overline"]) *)){border-radius:0;padding-left:6px;padding-right:6px}

/* ---- DOUBLE LINE — a line above and below ---- */
[data-look="doubleline"]{
  --lk-body:linear-gradient(180deg,#0b0b0c,#050505);
  --lk-btn:transparent;--lk-btn-bd:0 solid transparent;--lk-btn-c:#a9a9b0;
  --lk-btn-sh:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(255,255,255,.12);
  --lk-sel:transparent;--lk-sel-bd:0 solid transparent;--lk-sel-sh:inset 0 2px 0 var(--rc1,#e4141b),inset 0 -2px 0 var(--rc1,#e4141b);--lk-sel-glow:none;--lk-sel-c:var(--rc54,#ff3a41);
}
[data-look="doubleline"] :is(.btn,.tabs button,.pos-tabs button,.gf-pos .chk):where(:not(.lk-pick:not([data-look="doubleline"]) *)){border-radius:0;padding-left:8px;padding-right:8px}

/* ---- BRACKETS — [ the label ] ---- */
[data-look="brackets"]{
  --lk-body:linear-gradient(180deg,#0b0b0c,#050505);
  --lk-btn:linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.2)) left top/1px 100% no-repeat,linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.2)) left top/8px 1px no-repeat,linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.2)) left bottom/8px 1px no-repeat,linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.2)) right top/1px 100% no-repeat,linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.2)) right top/8px 1px no-repeat,linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.2)) right bottom/8px 1px no-repeat,transparent;--lk-btn-bd:0 solid transparent;--lk-btn-c:#b4b4ba;--lk-btn-sh:none;
  --lk-sel:linear-gradient(var(--rc1,#e4141b),var(--rc1,#e4141b)) left top/2px 100% no-repeat,linear-gradient(var(--rc1,#e4141b),var(--rc1,#e4141b)) left top/8px 2px no-repeat,linear-gradient(var(--rc1,#e4141b),var(--rc1,#e4141b)) left bottom/8px 2px no-repeat,linear-gradient(var(--rc1,#e4141b),var(--rc1,#e4141b)) right top/2px 100% no-repeat,linear-gradient(var(--rc1,#e4141b),var(--rc1,#e4141b)) right top/8px 2px no-repeat,linear-gradient(var(--rc1,#e4141b),var(--rc1,#e4141b)) right bottom/8px 2px no-repeat,transparent;--lk-sel-bd:0 solid transparent;--lk-sel-sh:none;--lk-sel-glow:none;--lk-sel-c:var(--rc54,#ff3a41);
}
[data-look="brackets"] :is(.btn,.tabs button,.pos-tabs button,.gf-pos .chk):where(:not(.lk-pick:not([data-look="brackets"]) *)){border-radius:0;padding-left:12px;padding-right:12px}

/* ---- 33 · BRUTAL — hard edges,hard shadow (chosen here, on purpose) ---- */
[data-look="brutal"]{
  --lk-body:#0b0b0b;
  --lk-btn:#141414;--lk-btn-bd:2px solid #e9e9ec;--lk-btn-c:#f2f2f4;--lk-btn-sh:3px 3px 0 #3a3a3f;
  --lk-sel:#141414;--lk-sel-bd:2px solid #e9e9ec;--lk-sel-sh:3px 3px 0 var(--rc1,#e4141b);--lk-sel-glow:none;--lk-sel-c:var(--rc53,#ff2b32);--lk-sel-svg:none;
}
[data-look="brutal"] :is(.btn,.tabs button,.pos-tabs button,.gf-pos .chk):where(:not(.lk-pick:not([data-look="brutal"]) *)){border-radius:0;font-weight:800}
[data-look="brutal"] :is(.btn,.tabs button,.pos-tabs button,.gf-pos .chk):active:not(:disabled):where(:not(.lk-pick:not([data-look="brutal"]) *)){transform:translate(3px,3px)!important;box-shadow:0 0 0 #000!important}

/* ---- 34 · LEAF — one soft corner,one sharp ---- */
[data-look="leaf"]{
  --lk-btn:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.01)),rgba(18,16,17,.5);--lk-btn-bd:1px solid rgba(255,255,255,.12);
  --lk-btn-blur:blur(8px);
  --lk-sel:linear-gradient(135deg,var(--rc28,rgba(228,20,27,.10)),rgba(255,255,255,.01)),rgba(18,12,13,.5);--lk-sel-bd:1px solid var(--rc79,rgba(255,90,96,.3));
}
[data-look="leaf"] :is(.btn,.tabs button,.pos-tabs button,.gf-pos .chk):where(:not(.lk-pick:not([data-look="leaf"]) *)){border-radius:18px 3px 18px 3px}

/* ---- 38 · FROST — heavy frosted glass with grain ---- */
[data-look="frost"]{
  --lk-body:radial-gradient(600px 400px at 80% 10%,var(--rc80,rgba(228,20,27,.14)),transparent 60%),linear-gradient(180deg,#0e0e10,#060606);
  --lk-btn:var(--noise-hard),rgba(255,255,255,.06);--lk-btn-bd:1px solid rgba(255,255,255,.16);--lk-btn-c:#f0f0f3;
  --lk-btn-blur:blur(18px) saturate(140%);--lk-btn-sh:0 8px 18px -10px #000;
  --lk-sel:var(--noise-hard),var(--rc28,rgba(228,20,27,.10));--lk-sel-bd:1px solid var(--rc81,rgba(255,120,125,.3));
}
[data-look="frost"] :is(.btn,.tabs button,.pos-tabs button,.gf-pos .chk):where(:not(.lk-pick:not([data-look="frost"]) *)){border-radius:14px}

/* ---- 40 · BRUSH — ink strokes,no boxes ---- */
[data-look="brush"]{
  --lk-stroke:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C 25 3, 55 12, 80 6 S 112 5, 118 8 L 117 11 C 90 13, 60 8, 30 12 S 6 12, 3 12 Z' fill='%23e4141b'/%3E%3C/svg%3E");
  --lk-stroke-g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C 25 3, 55 12, 80 6 S 112 5, 118 8 L 117 11 C 90 13, 60 8, 30 12 S 6 12, 3 12 Z' fill='%23ffffff' fill-opacity='.12'/%3E%3C/svg%3E");
  --lk-body:var(--noise),linear-gradient(180deg,#0e0d0c,#060505);
  --lk-btn:var(--lk-stroke-g) center bottom 4px/86% 8px no-repeat,transparent;--lk-btn-bd:0 solid transparent;--lk-btn-sh:none;--lk-btn-c:#d8d4d0;
  --lk-sel:var(--lk-stroke) center bottom 4px/86% 8px no-repeat,transparent;--lk-sel-bd:0 solid transparent;--lk-sel-sh:none;--lk-sel-glow:none;--lk-sel-c:var(--rc54,#ff3a41);
}

/* ---- 41 · CATHEDRAL — arched windows,double frame ---- */
[data-look="cathedral"]{
  --lk-body:radial-gradient(700px 500px at 50% -10%,var(--rc19,rgba(150,8,14,.12)),transparent 60%),linear-gradient(180deg,#0d0b0c,#050404);
  --lk-btn:linear-gradient(180deg,#1f1b1c,#100e0e);--lk-btn-bd:3px double rgba(255,255,255,.22);--lk-btn-sh:none;
  --lk-sel:linear-gradient(180deg,#1f1112,#0e0707);--lk-sel-bd:3px double var(--rc82,rgba(255,80,86,.55));--lk-sel-sh:none;--lk-sel-glow:0 0 3.5px var(--rc76,rgba(228,20,27,0.3));
}
[data-look="cathedral"] :is(.btn,.tabs button,.pos-tabs button,.gf-pos .chk):where(:not(.lk-pick:not([data-look="cathedral"]) *)){border-radius:22px 22px 4px 4px}

/* ---- 42 · BUBBLE — round,glossy,playful ---- */
[data-look="bubble"]{
  --lk-btn:radial-gradient(90% 60% at 50% 12%,rgba(255,255,255,.22),transparent 60%),radial-gradient(120% 120% at 50% 100%,#1a1a1e,#0b0b0d);
  --lk-btn-bd:1px solid rgba(255,255,255,.14);--lk-btn-sh:0 10px 20px -8px #000,inset 0 -6px 10px -6px rgba(0,0,0,.8);
  --lk-sel:radial-gradient(90% 60% at 50% 12%,rgba(255,255,255,.18),transparent 60%),radial-gradient(120% 120% at 50% 100%,#2a1012,#0d0506);
  --lk-sel-bd:1px solid var(--rc83,rgba(255,90,96,.35));
}
[data-look="bubble"] :is(.btn,.tabs button,.pos-tabs button,.gf-pos .chk):where(:not(.lk-pick:not([data-look="bubble"]) *)){border-radius:999px;padding-left:20px;padding-right:20px}

/* ---- 43 · RIVET — bolted steel plates ---- */
[data-look="rivet"]{
  --lk-rivets:radial-gradient(circle at 7px 7px,#8a8a92 0 1.6px,#2a2a2e 2.2px,transparent 2.6px),radial-gradient(circle at calc(100% - 7px) 7px,#8a8a92 0 1.6px,#2a2a2e 2.2px,transparent 2.6px),
    radial-gradient(circle at 7px calc(100% - 7px),#8a8a92 0 1.6px,#2a2a2e 2.2px,transparent 2.6px),radial-gradient(circle at calc(100% - 7px) calc(100% - 7px),#8a8a92 0 1.6px,#2a2a2e 2.2px,transparent 2.6px);
  --lk-body:repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px),linear-gradient(180deg,#131416,#08090a);
  --lk-btn:var(--lk-rivets),linear-gradient(180deg,#2e2f34,#1a1b1e);--lk-btn-bd:1px solid #0a0a0b;--lk-btn-sh:0 1px 0 rgba(255,255,255,.12) inset,0 2px 3px #000;
  --lk-sel:var(--lk-rivets),linear-gradient(180deg,#24181a,#140e0f);--lk-sel-bd:1px solid #0a0a0b;
}
[data-look="rivet"] :is(.btn,.tabs button,.pos-tabs button,.gf-pos .chk):where(:not(.lk-pick:not([data-look="rivet"]) *)){border-radius:3px;padding-left:20px;padding-right:20px}

/* ---- 44 · STAMP — the hand stamp at the door ---- */
[data-look="stamp"]{
  --lk-body:var(--noise-hard),linear-gradient(180deg,#0f0e0e,#070606);
  --lk-btn:var(--noise-hard),#151414;--lk-btn-bd:1px solid #2c2a29;--lk-btn-sh:none;--lk-btn-c:#dad6d2;
  --lk-sel:var(--noise-hard),#130f0f;--lk-sel-bd:2px solid var(--rc84,rgba(228,20,27,.75));--lk-sel-sh:none;--lk-sel-glow:none;--lk-sel-c:var(--rc85,#e8141c);
}
[data-look="stamp"] :is(.btn,.tabs button,.pos-tabs button,.gf-pos .chk):where(:not(.lk-pick:not([data-look="stamp"]) *)){border-radius:7px;text-transform:uppercase;letter-spacing:.18em}
[data-look="stamp"] :is(.tabs button.on,.pos-tabs button.on,.gf-pos .chk.on,.ins-sb.on,.deck-card.cur):where(:not(.lk-pick:not([data-look="stamp"]) *)){rotate:-2.5deg}

/* ---- 45 · ORIGAMI — a folded corner ---- */
[data-look="origami"]{
  --lk-fold:linear-gradient(225deg,transparent 0 9px,rgba(255,255,255,.22) 9px 10px,transparent 10px);
  --lk-btn:var(--lk-fold),linear-gradient(180deg,#232327,#121214);--lk-btn-bd:0 solid transparent;--lk-btn-sh:0 6px 12px -8px #000;
  --lk-sel:var(--lk-fold),linear-gradient(180deg,#241416,#120a0b);--lk-sel-bd:0 solid transparent;
}
[data-look="origami"] :is(.btn,.tabs button,.pos-tabs button,.gf-pos .chk):where(:not(.lk-pick:not([data-look="origami"]) *)){border-radius:4px;clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,0 100%)}

/* ---- 46 · NOTCH — a bite out of the top,like the phone ---- */
[data-look="notch"]{
  --lk-btn:linear-gradient(180deg,#232327,#111113);--lk-btn-bd:0 solid transparent;--lk-btn-sh:none;
  --lk-sel:linear-gradient(180deg,#221315,#100809);--lk-sel-bd:0 solid transparent;--lk-sel-sh:none;
}
[data-look="notch"] :is(.btn,.tabs button,.pos-tabs button,.gf-pos .chk):where(:not(.lk-pick:not([data-look="notch"]) *)){border-radius:12px;
  -webkit-mask:radial-gradient(circle at 50% -2px,transparent 9px,#000 9.5px);mask:radial-gradient(circle at 50% -2px,transparent 9px,#000 9.5px)}

/* ================= the picker (demo only) ================= */
.lk-bar{position:fixed;left:50%;bottom:calc(10px + env(safe-area-inset-bottom));transform:translateX(-50%);
  z-index:9999;display:flex;align-items:center;gap:6px;padding:6px;border-radius:99px;
  background:rgba(12,12,14,.92);border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 30px rgba(0,0,0,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font:600 11px/1 Inter,system-ui,sans-serif;color:#fff;max-width:calc(100vw - 20px)}
.lk-bar button{min-width:44px;min-height:44px;border-radius:99px;border:1px solid rgba(255,255,255,.16);
  background:#1b1b1e;color:#fff;font:inherit;padding:0 12px;transition:transform 220ms var(--lk-back)}
.lk-bar button:active{transform:scale(.92);transition-duration:100ms}
.lk-bar .lk-name{min-width:104px;text-align:center;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.lk-bar .lk-name small{display:block;font-size:9px;color:#9a9aa2;letter-spacing:.1em;margin-top:3px}
.lk-bar .lk-role.on{color:var(--rc8,#ff3e45);border-color:var(--rc86,#5a1a1e);text-shadow:0 0 8px var(--rc87,rgba(228,20,27,.8))}

/* ================= the gallery (demo only, ?gallery) ================= */
.lk-gallery{position:fixed;inset:0;z-index:9998;overflow-y:auto;background:#050505;
  padding:calc(14px + env(safe-area-inset-top)) 12px calc(30px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
.lk-g-head{font:700 13px/1.2 Inter,system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin:0 4px 14px}
.lk-g-head small{display:block;font-size:10px;color:#8a8a92;letter-spacing:.14em;margin-top:5px}
.lk-g-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.lk-sw{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:14px;text-decoration:none;color:inherit;
  background:var(--lk-body);border:1px solid rgba(255,255,255,.08);overflow:hidden}
.lk-sw-h{font:700 12px/1.2 Inter,system-ui,sans-serif;color:#f2f2f4;letter-spacing:.06em}
.lk-sw-h b{color:var(--rc8,#ff3e45);margin-right:4px}
.lk-sw-h small{display:block;font-weight:500;font-size:10px;color:#9a9aa2;margin-top:3px;letter-spacing:.04em}
.lk-sw .tabs,.lk-sw .pos-tabs{overflow:visible;flex-wrap:nowrap;padding:2px}
.lk-sw .tabs button,.lk-sw .pos-tabs button{font-size:9.5px;padding:9px 12px;min-height:38px}
.lk-sw-r{display:flex;gap:8px;padding:2px}
.lk-sw-r .btn{font-size:9.5px;padding:9px 13px;min-height:38px;display:inline-flex;align-items:center}
.lk-sw .lk-sw-cal{display:grid;grid-template-columns:repeat(3,56px);gap:6px}
.lk-sw .lk-sw-cal .day{min-height:46px}
/* photo mode (?gallery=1&shot=1): a still,flat page so a headless browser can
   draw all of it — every running animation and the app underneath are layers it
   runs out of memory on */
.lk-shot *,.lk-shot *::before,.lk-shot *::after{animation:none!important;transition:none!important}
.lk-shot #app,.lk-shot .bg-mark,.lk-shot body::before,.lk-shot body::after{display:none!important}
.lk-shot .lk-gallery{position:static;overflow:visible;min-height:100vh}

/* accent re-colours of embedded drawings (accent.py) */
[data-acc="green"][data-look="brush"],[data-acc="green"] [data-look="brush"]{--lk-stroke:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C 25 3, 55 12, 80 6 S 112 5, 118 8 L 117 11 C 90 13, 60 8, 30 12 S 6 12, 3 12 Z' fill='%2312c26b'/%3E%3C/svg%3E")}
[data-acc="blue"][data-look="brush"],[data-acc="blue"] [data-look="brush"]{--lk-stroke:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C 25 3, 55 12, 80 6 S 112 5, 118 8 L 117 11 C 90 13, 60 8, 30 12 S 6 12, 3 12 Z' fill='%232f7bff'/%3E%3C/svg%3E")}
[data-acc="amber"][data-look="brush"],[data-acc="amber"] [data-look="brush"]{--lk-stroke:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C 25 3, 55 12, 80 6 S 112 5, 118 8 L 117 11 C 90 13, 60 8, 30 12 S 6 12, 3 12 Z' fill='%23ff963c'/%3E%3C/svg%3E")}
[data-acc="pink"][data-look="brush"],[data-acc="pink"] [data-look="brush"]{--lk-stroke:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C 25 3, 55 12, 80 6 S 112 5, 118 8 L 117 11 C 90 13, 60 8, 30 12 S 6 12, 3 12 Z' fill='%23ff2e88'/%3E%3C/svg%3E")}
[data-acc="purple"][data-look="brush"],[data-acc="purple"] [data-look="brush"]{--lk-stroke:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C 25 3, 55 12, 80 6 S 112 5, 118 8 L 117 11 C 90 13, 60 8, 30 12 S 6 12, 3 12 Z' fill='%238f45ff'/%3E%3C/svg%3E")}