/* ============================================================
   STAFF OS — LOOK PREVIEWS (Guto + Hadi, 2026-10-01)
   ------------------------------------------------------------
   TEMPORARY. Sixteen material treatments for the whole app, switched by
   html[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.

   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,#5e0408 8%,#e4141b 15%,#2a0204 24%,#9b0a10 34%,#050101 44%,
    #c4121a 55%,#3d0306 64%,#ff2a31 72%,#1c0203 82%,#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){
  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):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}
  html[data-look] :is(.btn-primary,.tabs button.on,.pos-tabs button.on,.gf-pos .chk.on)::before,
  html[data-look] :is(.btn-primary,.tabs button.on,.pos-tabs button.on,.gf-pos .chk.on)::after{animation:none!important}
  html[data-look] :is(.act-row .btn,.btn-primary){animation:none!important}
}

/* ---------- defaults every look starts from ---------- */
html[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 #4a1418;
  --lk-sel-c:#ff3e45;
  --lk-sel-glow:0 0 1px rgba(255,120,125,.9),0 0 8px rgba(228,20,27,.8),0 0 18px rgba(228,20,27,.4);
  --lk-sel-sh:0 1px 0 rgba(255,255,255,.06) inset,0 4px 10px -6px #000;
  --lk-sel-svg:drop-shadow(0 0 4px rgba(228,20,27,.75));
  --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:rgba(120,4,9,.0),rgba(150,6,12,.55) 18%,rgba(20,1,2,.0) 34%,rgba(110,4,8,.45) 52%,
    rgba(0,0,0,0) 68%,rgba(190,10,18,.4) 84%,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}
html[data-look] body{background:transparent;overscroll-behavior:none}
html[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. */
html[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))}
html[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 */
html[data-look] .card.glass:has(.roster-scroll){backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-look] :is(.btn,.tabs button,.pos-tabs button,.gf-pos .chk,.gf-head .xbtn,.mn-b,.ins-sb){
  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)}
html[data-look] :is(.btn-primary,.tabs button.on,.pos-tabs button.on,.gf-pos .chk.on){
  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)}
html[data-look] :is(.btn-primary,.tabs button.on,.pos-tabs button.on,.gf-pos .chk.on) svg{filter:var(--lk-sel-svg)}
html[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 8px rgba(228,20,27,.9)}
html[data-look] .btn-primary:disabled{color:#7d5658;text-shadow:none}
/* the liquid rim */
html[data-look] :is(.btn-primary,.tabs button.on,.pos-tabs button.on,.gf-pos .chk.on)::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) */
html[data-look] :is(.btn-primary,.tabs button.on,.pos-tabs button.on,.gf-pos .chk.on)::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);
  animation:var(--lk-in-anim,lm-flow) var(--lk-in-speed) linear infinite}
html[data-look] .btn-primary:disabled::before,html[data-look] .btn-primary:disabled::after{animation-play-state:paused;opacity:.4}
/* calendar tiles that are NOT data (empty / confirmed): the look's material */
html[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)}
html[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). */
html[data-look] .glass:not(.sheet){background:var(--lk-tint);border:var(--lk-tint-bd);
  backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-look] .card.glass{background:none;border-color:transparent;box-shadow:none}
html[data-look] .roster-scroll{background:rgba(10,9,10,.55);border:var(--lk-tint-bd);border-radius:12px}
html[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. */
html[data-look] :is(.act-row .btn,.btn-primary){animation:lk-float 6.5s ease-in-out infinite alternate}
html[data-look] .act-row .btn:nth-child(2){animation-duration:7.7s;animation-delay:-2.1s}



/* ================= 1 · BLOOD — the liquid rim, red and black ================= */
html[data-look="blood"]{
  --lk-body:var(--noise),radial-gradient(1000px 600px at 50% -10%,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,#4a0609,#120203 30%,#6e0a0f 55%,#140203 78%,#3a0507) border-box;
  --lk-card-bd:1px solid transparent;
  --lk-card-sh:0 1px 0 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;
}

/* ================= 2 · KEYCAP — black keys, red backlight ================= */
html[data-look="keycap"]{
  --lk-body:var(--noise),linear-gradient(180deg,#0d0b0c,#070606);
  --lk-card:var(--noise),linear-gradient(180deg,#151213,#0c0a0b);
  --lk-card-bd:1px solid #241b1d;
  --lk-card-sh:0 1px 0 rgba(255,255,255,.06) inset,0 6px 0 -1px #050405,0 24px 40px -20px #000;
  --lk-btn:linear-gradient(180deg,#2a2627,#171415);
  --lk-btn-bd:1px solid #3a3234;
  --lk-btn-sh:0 1px 0 rgba(255,255,255,.12) inset,0 4px 0 #050304,0 6px 10px -4px #000;
  --lk-sel:radial-gradient(90% 70% at 50% 100%,rgba(228,20,27,.28),transparent 70%),linear-gradient(180deg,#221d1e,#120f10);
  --lk-sel-bd:1px solid #3a2a2d;
  --lk-sel-sh:0 1px 0 rgba(255,255,255,.1) inset,0 4px 0 #050304,0 6px 16px -4px rgba(228,20,27,.35);
}
html[data-look="keycap"] :is(.btn,.tabs button,.pos-tabs button,.gf-pos .chk,.gf-head .xbtn,.mn-b,.ins-sb):active:not(:disabled){
  transform:translateY(3px) scale(.99);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 1px 0 #050304}

/* ================= 3 · STEEL — machined, brushed, red engraved ================= */
html[data-look="steel"]{
  --lk-body:repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px),linear-gradient(175deg,#141518,#08090a);
  --lk-card:repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 1px,rgba(0,0,0,.02) 1px 2px,transparent 2px 4px),linear-gradient(180deg,#1e1f23,#121316);
  --lk-card-bd:1px solid #2c2d32;
  --lk-card-sh:1px 1px 0 rgba(255,255,255,.08) inset,-1px -1px 0 rgba(0,0,0,.7) inset,0 18px 36px -20px #000,0 2px 0 #000;
  --lk-btn:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),linear-gradient(180deg,#45464d,#26272c 50%,#1a1b1f);
  --lk-btn-bd:1px solid #0a0a0b;--lk-btn-c:#e8e8ec;
  --lk-btn-sh:0 1px 0 rgba(255,255,255,.22) inset,0 -1px 0 rgba(0,0,0,.6) inset,0 2px 3px rgba(0,0,0,.8);
  --lk-sel:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),linear-gradient(180deg,#2c2d32,#141518);
  --lk-sel-bd:1px solid #0a0a0b;
  --lk-sel-sh:0 2px 4px rgba(0,0,0,.85) inset,0 1px 0 rgba(255,255,255,.07);
  --lk-sel-glow:0 0 6px rgba(228,20,27,.7),0 -1px 0 rgba(0,0,0,.8);
}

/* ================= 4 · OBSIDIAN — thick glass, red light behind ================= */
html[data-look="glass"]{
  --lk-body:radial-gradient(600px 420px at 85% 8%,rgba(228,20,27,.2),transparent 60%),radial-gradient(700px 500px at 0% 100%,rgba(228,20,27,.1),transparent 60%),linear-gradient(180deg,#0b0b0d,#050506);
  --lk-card:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 40%,rgba(255,255,255,.04));
  --lk-card-bd:1px solid rgba(255,255,255,.16);
  --lk-card-sh:0 1px 0 rgba(255,255,255,.28) inset,0 -1px 0 rgba(0,0,0,.4) inset,0 24px 48px -24px rgba(0,0,0,.9);
  --lk-card-blur:blur(18px) saturate(160%);
  --lk-btn:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.03));
  --lk-btn-bd:1px solid rgba(255,255,255,.2);--lk-btn-c:#f0f0f3;
  --lk-btn-sh:0 1px 0 rgba(255,255,255,.35) inset,0 6px 14px -8px rgba(0,0,0,.9);
  --lk-sel:radial-gradient(80% 90% at 50% 120%,rgba(228,20,27,.35),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02));
  --lk-sel-bd:1px solid rgba(255,140,145,.35);
  --lk-sel-sh:0 1px 0 rgba(255,255,255,.35) inset,0 10px 22px -10px rgba(228,20,27,.55);
}

/* ================= 5 · RELIEF — soft dark 3D, selected sinks in ================= */
html[data-look="soft"]{
  --lk-body:linear-gradient(180deg,#141416,#101012);
  --lk-card:#141416;--lk-card-bd:1px solid rgba(255,255,255,.035);
  --lk-card-sh:-6px -6px 14px rgba(255,255,255,.025),10px 12px 24px rgba(0,0,0,.85);
  --lk-btn:linear-gradient(145deg,#19191c,#111113);--lk-btn-bd:1px solid rgba(255,255,255,.04);--lk-btn-c:#d8d8dd;
  --lk-btn-sh:-3px -3px 7px rgba(255,255,255,.035),4px 5px 10px rgba(0,0,0,.85);
  --lk-sel:#121214;--lk-sel-bd:1px solid rgba(255,255,255,.03);
  --lk-sel-sh:inset 3px 3px 8px rgba(0,0,0,.9),inset -2px -2px 6px rgba(255,255,255,.035);
  --lk-tile:#141416;--lk-tile-bd:1px solid rgba(255,255,255,.03);
  --lk-tile-sh:-3px -3px 7px rgba(255,255,255,.03),4px 5px 9px rgba(0,0,0,.85);
}
html[data-look="soft"] :is(.btn,.tabs button,.pos-tabs button,.gf-pos .chk,.gf-head .xbtn,.mn-b,.ins-sb):active:not(:disabled){
  box-shadow:inset 3px 3px 7px rgba(0,0,0,.85),inset -2px -2px 6px rgba(255,255,255,.035)}

/* ================= 6 · VELVET — the VIP room: leather, stitching ================= */
html[data-look="velvet"]{
  --lk-body:var(--noise),var(--noise),radial-gradient(900px 600px at 50% 120%,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 rgba(255,90,96,.45);
  --lk-tile:var(--noise),linear-gradient(180deg,#1f1618,#120d0f);--lk-tile-bd:1px dashed rgba(255,190,190,.12);
}
html[data-look="velvet"] .glass{position:relative}
html[data-look="velvet"] :is(.card,.kpi).glass::after{content:"";position:absolute;inset:6px;pointer-events:none;
  border:1px dashed rgba(255,190,190,.10);border-radius:calc(var(--r-lg) - 5px)}

/* ================= 7 · NEON — the sign over the door ================= */
html[data-look="neon"]{
  --lk-body:radial-gradient(700px 400px at 50% 0%,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 #ff2a31;
  --lk-sel-c:#ffd6d8;
  --lk-sel-glow:0 0 2px #fff,0 0 6px #ff3a41,0 0 14px #e4141b,0 0 28px rgba(228,20,27,.8);
  --lk-sel-sh:0 0 8px rgba(255,42,49,.8),0 0 22px rgba(228,20,27,.5),inset 0 0 10px rgba(228,20,27,.45);
}

/* ================= 8 · CARBON — race-car weave ================= */
html[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,#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 rgba(228,20,27,.6);
}

/* ================= 9 · ONYX — polished black marble ================= */
html[data-look="onyx"]{
  --lk-veins:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.05) 31%,transparent 33%),
    linear-gradient(62deg,transparent 55%,rgba(255,255,255,.035) 56%,transparent 57.5%),
    linear-gradient(160deg,transparent 70%,rgba(228,20,27,.06) 71%,transparent 72.5%),
    radial-gradient(120% 90% at 20% 10%,#1b1a1c,#0a0a0b 70%);
  --lk-body:radial-gradient(120% 80% at 50% 0%,#121113,#060606);
  --lk-card:linear-gradient(180deg,rgba(255,255,255,.07),transparent 30%),var(--lk-veins);
  --lk-card-bd:1px solid #2a292c;--lk-card-sh:0 1px 0 rgba(255,255,255,.12) inset,0 22px 44px -22px #000;
  --lk-btn:linear-gradient(180deg,rgba(255,255,255,.1),transparent 45%),linear-gradient(115deg,#1c1b1e,#0b0b0c);
  --lk-btn-bd:1px solid #2e2d31;--lk-btn-c:#e2e1e5;
  --lk-sel:linear-gradient(180deg,rgba(255,255,255,.08),transparent 45%),linear-gradient(115deg,#181516,#0a0909);
  --lk-sel-bd:1px solid #3b1a1d;
}

/* ================= 10 · SMOKE — the room at 3am ================= */
html[data-look="smoke"]{
  --lk-body:radial-gradient(500px 300px at 15% 20%,rgba(160,160,170,.06),transparent 70%),
    radial-gradient(600px 380px at 85% 60%,rgba(160,160,170,.05),transparent 70%),
    radial-gradient(500px 400px at 40% 100%,rgba(228,20,27,.07),transparent 70%),linear-gradient(180deg,#0c0c0e,#060607);
  --lk-card:radial-gradient(140% 90% at 0% 0%,rgba(190,190,200,.07),transparent 55%),
    radial-gradient(120% 80% at 100% 100%,rgba(190,190,200,.05),transparent 60%),linear-gradient(180deg,#131315,#0b0b0c);
  --lk-card-bd:1px solid rgba(255,255,255,.07);--lk-card-sh:0 30px 60px -30px #000;
  --lk-btn:radial-gradient(100% 120% at 30% 0%,rgba(200,200,210,.10),transparent 60%),#121214;
  --lk-btn-bd:1px solid rgba(255,255,255,.08);--lk-btn-sh:0 8px 20px -12px #000;
  --lk-sel:radial-gradient(100% 140% at 50% 120%,rgba(228,20,27,.30),transparent 65%),#100e0f;
  --lk-sel-bd:1px solid rgba(255,80,86,.25);
  --lk-sel-glow:0 0 10px rgba(228,20,27,.9),0 0 26px rgba(228,20,27,.55),0 0 44px rgba(228,20,27,.3);
}

/* ================= 11 · LAVA — black rock, molten seams ================= */
html[data-look="lava"]{
  --lk-body:var(--noise-hard),radial-gradient(900px 500px at 50% 110%,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%,rgba(200,14,22,.16),transparent 60%) padding-box,
    linear-gradient(180deg,#141011,#0a0808) padding-box,
    linear-gradient(120deg,#200304,#b40d14 18%,#1a0203 32%,#6e070c 58%,#120202 74%,#d01019 90%,#1a0203) border-box;
  --lk-card-bd:1px solid transparent;--lk-card-sh:0 0 18px -6px 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%,rgba(160,10,16,.22),transparent 70%),rgba(14,9,10,.4);
  --lk-sel-bd:1px solid rgba(255,110,115,.2);
  --lk-sel-c:#f2333b;--lk-sel-glow:0 0 1px rgba(255,110,115,.5),0 0 7px rgba(228,20,27,.42);
  --lk-sel-svg:drop-shadow(0 0 3px rgba(228,20,27,.45));
  --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;
}

/* ================= 12 · VINYL — the record on the deck ================= */
html[data-look="vinyl"]{
  --lk-grooves:repeating-radial-gradient(circle at 50% -60%,rgba(255,255,255,.028) 0 1px,transparent 1px 3px);
  --lk-body:var(--lk-grooves),linear-gradient(180deg,#0b0b0c,#050506);
  --lk-card:conic-gradient(from 200deg at 50% -60%,transparent,rgba(255,255,255,.05) 8%,transparent 16%,transparent 50%,rgba(255,255,255,.04) 58%,transparent 66%),var(--lk-grooves),linear-gradient(180deg,#121214,#0a0a0b);
  --lk-card-bd:1px solid #232327;--lk-card-sh:0 1px 0 rgba(255,255,255,.07) inset,0 22px 44px -22px #000;
  --lk-btn:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.03) 0 1px,transparent 1px 2.5px),linear-gradient(180deg,#1d1d20,#0e0e10);
  --lk-btn-bd:1px solid #2a2a2f;
  --lk-sel:radial-gradient(circle at 50% 50%,rgba(228,20,27,.22) 0 30%,transparent 31%),repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.03) 0 1px,transparent 1px 2.5px),#0f0f11;
  --lk-sel-bd:1px solid #3a1417;
}

/* ================= 13 · PIANO — wet black lacquer ================= */
html[data-look="piano"]{
  --lk-body:linear-gradient(180deg,#0a0a0b,#030303);
  --lk-card:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02) 22%,transparent 23%),linear-gradient(180deg,#0f0f10,#050505);
  --lk-card-bd:1px solid #1c1c1e;
  --lk-card-sh:0 1px 0 rgba(255,255,255,.22) inset,0 -1px 0 rgba(255,255,255,.04) inset,0 26px 50px -24px #000;
  --lk-btn:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.04) 48%,transparent 50%),linear-gradient(180deg,#141416,#030303);
  --lk-btn-bd:1px solid #000;--lk-btn-c:#ededf0;
  --lk-btn-sh:0 1px 0 rgba(255,255,255,.3) inset,0 4px 10px -4px #000;
  --lk-sel:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 48%,transparent 50%),linear-gradient(180deg,#120808,#030202);
  --lk-sel-bd:1px solid #000;
  --lk-sel-sh:0 1px 0 rgba(255,255,255,.25) inset,0 4px 14px -4px rgba(228,20,27,.35);
}

/* ================= 14 · HUD — targeting corners ================= */
html[data-look="hud"]{
  --lk-c:#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,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),rgba(228,20,27,.08);--lk-sel-bd:1px solid rgba(228,20,27,.35);--lk-sel-sh:none;
}
html[data-look="hud"] :is(.btn,.tabs button,.pos-tabs button,.gf-pos .chk,.gf-head .xbtn,.mn-b,.ins-sb){border-radius:6px}
html[data-look="hud"] .glass{border-radius:8px}

/* ================= 15 · ASH — raw concrete, flat ================= */
html[data-look="ash"]{
  --lk-body:var(--noise-hard),linear-gradient(180deg,#151515,#0d0d0d);
  --lk-card:var(--noise-hard),linear-gradient(180deg,#1c1c1c,#161616);
  --lk-card-bd:1px solid #262626;--lk-card-sh:0 2px 0 #0a0a0a;
  --lk-btn:var(--noise-hard),#202020;--lk-btn-bd:1px solid #2c2c2c;--lk-btn-c:#d0d0d0;--lk-btn-sh:0 2px 0 #0b0b0b;
  --lk-sel:var(--noise-hard),#141414;--lk-sel-bd:1px solid #2c2c2c;
  --lk-sel-glow:none;--lk-sel-c:#ff3a41;
  --lk-sel-sh:0 2px 0 #0b0b0b,inset 0 -3px 0 #e4141b;
  --lk-tile:var(--noise-hard),#1b1b1b;--lk-tile-bd:1px solid #262626;--lk-tile-sh:0 2px 0 #0b0b0b;
}
html[data-look="ash"] :is(.btn,.tabs button,.pos-tabs button,.gf-pos .chk,.gf-head .xbtn,.mn-b,.ins-sb){border-radius:10px}

/* ================= 16 · LASER — a beam crosses whatever is selected ================= */
html[data-look="laser"]{
  --lk-body:radial-gradient(800px 300px at 50% -5%,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 #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%,rgba(255,40,48,.0) 38%,rgba(255,40,48,.55) 49%,rgba(255,200,200,.7) 50%,rgba(255,40,48,.55) 51%,transparent 62%);
}

/* ================= 17 · EMBER — coals under the label ================= */
html[data-look="ember"]{
  --lk-body:var(--noise),radial-gradient(900px 500px at 50% 115%,rgba(150,10,14,.18),transparent 60%),linear-gradient(180deg,#0e0c0c,#060505);
  --lk-btn:linear-gradient(180deg,#1f1a1a,#0f0c0c);--lk-btn-bd:1px solid #2c2222;
  --lk-sel:radial-gradient(70% 55% at 50% 118%,rgba(255,60,40,.42),rgba(150,10,14,.18) 55%,transparent 75%),linear-gradient(180deg,#1a1414,#0b0909);
  --lk-sel-bd:1px solid #3a1c1c;--lk-sel-c:#ff5a4f;
  --lk-sel-glow:0 0 6px rgba(255,70,50,.6);
  --lk-tint:rgba(20,13,13,.42);
}

/* ================= 18 · BLACKOUT — nothing but the red word ================= */
html[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:#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;
}

/* ================= 19 · GARNET — cut stone, light breaking on facets ================= */
html[data-look="garnet"]{
  --lk-body:radial-gradient(120% 70% at 50% 0%,#140d0f,#050404);
  --lk-btn:conic-gradient(from 210deg at 35% 30%,#2a2326,#121012 18%,#221c1f 32%,#0c0a0b 50%,#1d181a 68%,#100d0f 84%,#2a2326);
  --lk-btn-bd:1px solid #2e2528;--lk-btn-sh:0 1px 0 rgba(255,255,255,.1) inset,0 4px 10px -4px #000;
  --lk-sel:conic-gradient(from 210deg at 35% 30%,#2a1418,#120708 18%,#22100f 32%,#0a0405 50%,#2a0d10 68%,#100607 84%,#2a1418);
  --lk-sel-bd:1px solid #4a1a1f;--lk-sel-c:#ff4a52;--lk-sel-glow:0 0 4px rgba(228,20,27,.6);
  --lk-tile:conic-gradient(from 210deg at 35% 30%,#1f1a1c,#0e0c0d 25%,#191517,#0b0a0b 75%,#1f1a1c);
}

/* ================= 20 · RAIN — Tokyo window at night ================= */
html[data-look="rain"]{
  --lk-streaks:repeating-linear-gradient(103deg,rgba(255,255,255,.035) 0 1px,transparent 1px 13px),
    repeating-linear-gradient(98deg,rgba(255,255,255,.02) 0 1px,transparent 1px 29px);
  --lk-body:var(--lk-streaks),radial-gradient(600px 400px at 80% 10%,rgba(228,20,27,.12),transparent 65%),linear-gradient(180deg,#0b0c0e,#050506);
  --lk-btn:var(--lk-streaks),linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.015));
  --lk-btn-bd:1px solid rgba(255,255,255,.14);--lk-btn-c:#e2e3e8;
  --lk-sel:var(--lk-streaks),linear-gradient(180deg,rgba(228,20,27,.10),rgba(255,255,255,.01));
  --lk-sel-bd:1px solid rgba(255,90,96,.3);
  --lk-sel-glow:0 0 6px rgba(228,20,27,.7),0 7px 7px rgba(228,20,27,.28);
  --lk-tint:rgba(12,13,15,.4);--lk-tint-bd:1px solid rgba(255,255,255,.1);
}

/* ================= 21 · SPEAKER — the grille on the stacks ================= */
html[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:#ff3a41;--lk-sel-glow:0 0 2px #ff6a70,0 0 8px rgba(228,20,27,.85);
  --lk-tile:var(--lk-grille),linear-gradient(180deg,#1a1a1d,#0e0e10);
  --lk-tint:rgba(14,14,16,.45);
}

/* ================= 22 · WINE — a slow burgundy liquid rim ================= */
html[data-look="wine"]{
  --lk-body:var(--noise),radial-gradient(900px 600px at 50% -10%,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,#4a0412 12%,#8c0b22 22%,#26030a 34%,#6a0718 46%,#0d0103 58%,#a3102a 70%,#3b0510 82%,#5c0615 92%,#1a0206;
  --lk-tint:rgba(16,10,12,.42);
}

/* ================= 23 · HANKO — a red seal, the way Tokyo signs things ================= */
html[data-look="hanko"]{
  --lk-body:var(--noise),linear-gradient(180deg,#0e0d0c,#070706);
  --lk-btn:var(--noise),#151413;--lk-btn-bd:1px solid #2a2725;--lk-btn-c:#dcd8d4;--lk-btn-sh:none;
  --lk-sel:var(--noise),#120f0e;--lk-sel-bd:1.5px solid #d4141b;--lk-sel-c:#e8141c;
  --lk-sel-glow:none;--lk-sel-svg:none;--lk-sel-sh:inset 0 0 0 2px #120f0e,inset 0 0 0 3px rgba(212,20,27,.55);
  --lk-tile:var(--noise),#141312;--lk-tile-bd:1px solid #262321;--lk-tile-sh:none;
}
html[data-look="hanko"] :is(.btn,.tabs button,.pos-tabs button,.gf-pos .chk,.gf-head .xbtn,.mn-b,.ins-sb){border-radius:5px;letter-spacing:.14em}

/* ================= 24 · ROPE — the red velvet rope at the door, twisting ================= */
html[data-look="rope"]{
  --lk-body:var(--noise),radial-gradient(800px 500px at 50% 0%,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) */
html[data-look="rope"] :is(.btn-primary,.tabs button.on,.pos-tabs button.on,.gf-pos .chk.on)::before{
  background:repeating-conic-gradient(from var(--lm-a),#4a0509 0 5deg,#b30f16 5deg 10deg,#2a0305 10deg 13deg,
    #7a080d 13deg 18deg,#1a0203 18deg 21deg,#d0141b 21deg 26deg)}

/* ================= 25 · PULSE — a heartbeat line under what is selected ================= */
html[data-look="pulse"]{
  --lk-body:radial-gradient(700px 400px at 50% 100%,rgba(228,20,27,.08),transparent 65%),linear-gradient(180deg,#0b0b0c,#050505);
  --lk-btn:linear-gradient(180deg,#1c1c1f,#0d0d0f);--lk-btn-bd:1px solid #2a2a2f;
  --lk-sel:linear-gradient(180deg,#141213,#080708);--lk-sel-bd:1px solid #3a1518;--lk-sel-glow:0 0 5px rgba(228,20,27,.6);
  --lk-in-on:"";--lk-in-anim:lk-ekg;--lk-in-speed:2.6s;--lk-in-size:60px 70%;--lk-in-rep:repeat-x;--lk-in-op:.9;
  --lk-in-bg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M0 34h44l5-9 6 14 7-30 6 25 4-6h48' fill='none' stroke='%23e4141b' stroke-width='1.6' stroke-linejoin='round' stroke-opacity='.55'/%3E%3C/svg%3E");
}

/* ================= 26 · CRT — an old monitor in the DJ booth ================= */
html[data-look="crt"]{
  --lk-scan:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px);
  --lk-body:var(--lk-scan),radial-gradient(120% 90% at 50% 40%,#121214,#030303 80%);
  --lk-btn:var(--lk-scan),#141416;--lk-btn-bd:1px solid #26262b;--lk-btn-c:#d4d4da;--lk-btn-sh:none;
  --lk-sel:var(--lk-scan),#160d0e;--lk-sel-bd:1px solid #4a181c;--lk-sel-c:#ff3a41;
  --lk-sel-glow:-1.2px 0 rgba(255,0,20,.75),1.2px 0 rgba(120,0,10,.75),0 0 8px rgba(228,20,27,.55);
  --lk-tile:var(--lk-scan),#121214;
}

/* ---------- round 5 (Guto): the full-screen grid wears the look too ---------- */
html[data-look] .gridsheet{background:var(--lk-body)}
html[data-look] .gf-head{background:rgba(10,9,10,.82);border-bottom:var(--lk-tint-bd)}
html[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 */
html[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))}
html[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 */
html[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}
html[data-look] .shift-card.cancelled::before{opacity:.45}
html[data-look="lava"]{--lk-edge:linear-gradient(120deg,#3a0507,#a00c12 18%,#1a0203 34%,#6e080d 56%,#140202 74%,#b80e15 90%,#2a0304)}
html[data-look="blood"]{--lk-edge:linear-gradient(140deg,#4a0609,#120203 30%,#6e0a0f 55%,#140203 78%,#3a0507)}
html[data-look="wine"]{--lk-edge:linear-gradient(140deg,#3b0510,#120104 35%,#6a0718 60%,#1a0206)}
html[data-look="rope"]{--lk-edge:linear-gradient(140deg,#5a0609,#160203 35%,#8a0a10 60%,#1a0203)}

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

/* ================= 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:#ff3e45;border-color:#5a1a1e;text-shadow:0 0 8px rgba(228,20,27,.8)}