/* ============================================================
   TERMINAL THEME / DESIGN SYSTEM — FutureTrack (v3)
   ------------------------------------------------------------
   10 professionally crafted terminal designs that all drive the
   SAME attendance engine (face recognition, PIN, clock-in/out,
   break, records). The engine lives in clocking.html + clocking.js;
   this file only styles and rearranges the shared presentation
   blocks (.tt-*) plus the existing .face-column / .action-column.

   A theme is selected by setting data-tt-theme="<name>" on <html>.
   Themes: biometric, minimal, orbit, glass, industrial,
           executive, colorblock, tabletos, facefirst, command

   Design language:
     - Each theme defines semantic tokens (--tt-*) on <html>.
     - Shared anatomy (panels, buttons, chips, titles) consumes
       tokens, so every theme stays internally consistent.
     - Each theme then arranges the same blocks into its own
       composition and applies its own material language.
   ============================================================ */

/* ---------- 0 · Shared tokens & motion ---------- */
html[data-tt-theme]{
  --tt-font-display:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --tt-font-body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --tt-font-mono:ui-monospace,'SF Mono','Cascadia Code',Menlo,Consolas,monospace;
  --tt-ease:cubic-bezier(.2,.7,.25,1);
  --tt-shift-fast:.15s;
  --tt-shift:.22s;
}

/* ---------- 1 · Shared foundation (any theme) ---------- */
/* All theme blocks hide by default; each design re-shows only
   the panels it needs via display + grid-area. */
html[data-tt-theme] .tt-side,
html[data-tt-theme] .tt-time,
html[data-tt-theme] .tt-status,
html[data-tt-theme] .tt-quick,
html[data-tt-theme] .tt-shift,
html[data-tt-theme] .tt-announce,
html[data-tt-theme] .tt-footer{display:none}
html[data-tt-theme] .kiosk-header{min-height:0;padding:0}
html[data-tt-theme] .brand,
html[data-tt-theme] .clock-block{display:none!important}
html[data-tt-theme] .security-card{display:none}
html[data-tt-theme] .workspace{justify-content:center;padding-bottom:0}
html[data-tt-theme] .kiosk-root:before,
html[data-tt-theme] .kiosk-root:after{display:none}

/* Non-idle engine states always own the whole hero card */
#employeeSelectState, #enrollSelectState, #pinState, #resultState{
  grid-column:1 / -1;
  grid-row:1 / -1;
  align-self:stretch;
  justify-self:stretch;
  z-index:6;
}

/* ---------- 2 · Shared anatomy ---------- */
html[data-tt-theme] .tt-q{
  border:0;cursor:pointer;
  font-family:var(--tt-font-body);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;min-height:86px;padding:12px 14px;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:transform var(--tt-shift-fast) var(--tt-ease),
             box-shadow var(--tt-shift) var(--tt-ease),
             background-color var(--tt-shift) var(--tt-ease),
             border-color var(--tt-shift) var(--tt-ease),
             color var(--tt-shift) var(--tt-ease);
}
html[data-tt-theme] .tt-q i{font-size:22px;line-height:1}
html[data-tt-theme] .tt-q span{font-weight:700;font-size:14px;line-height:1.05}
html[data-tt-theme] .tt-q:active{transform:translateY(1px) scale(.985)}

html[data-tt-theme] .tt-nav-btn,
html[data-tt-theme] .tt-help-btn,
html[data-tt-theme] .tt-settings-btn{
  border:0;cursor:pointer;font-family:var(--tt-font-body);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:background-color var(--tt-shift) var(--tt-ease),
             color var(--tt-shift) var(--tt-ease),
             border-color var(--tt-shift) var(--tt-ease),
             transform var(--tt-shift-fast) var(--tt-ease);
}
html[data-tt-theme] .tt-nav-btn:active,
html[data-tt-theme] .tt-help-btn:active,
html[data-tt-theme] .tt-settings-btn:active{transform:scale(.96)}

html[data-tt-theme] .tt-status-chip{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--tt-font-body);font-weight:600;
  border-radius:999px;padding:7px 13px;font-size:12px;line-height:1;
}
html[data-tt-theme] .tt-shift-title,
html[data-tt-theme] .tt-announce-title{
  font-family:var(--tt-font-display);
  font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:700;margin:0;
}
html[data-tt-theme] .tt-shift{display:flex;flex-direction:column;gap:6px}
html[data-tt-theme] .tt-shift-time{font-family:var(--tt-font-display);font-weight:600;margin:0}
html[data-tt-theme] .tt-shift-pos,
html[data-tt-theme] .tt-shift-dept{margin:0}
html[data-tt-theme] .tt-announce-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
html[data-tt-theme] .tt-announce-list li{font-family:var(--tt-font-body);font-size:12.5px;line-height:1.45}

/* The redesigned terminals never show the legacy right-hand
   action column (greeting / instruction / clock-in button /
   PIN shortcuts) — quick actions live in .tt-quick instead. */
html[data-tt-theme] .action-column{display:none!important}

/* Short-screen safety net: any theme degrades to scrollable
   before it clips. */
@media (max-height:540px){
  html[data-tt-theme] .kiosk-shell{padding:10px 16px}
  html[data-tt-theme] .hero-card{height:auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
  html[data-tt-theme] .scan-wrap{width:min(36vh,220px)}
}
/* ---------- 3 · Theme picker ---------- */
.tt-picker{
  position:fixed;inset:0;z-index:130;
  background:linear-gradient(160deg,rgba(4,9,20,.82),rgba(7,14,30,.72));
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
  display:grid;place-items:center;padding:18px;
}
.tt-picker-card{
  width:min(880px,96vw);max-height:92dvh;overflow:auto;
  background:#0c1424;border:1px solid rgba(148,179,255,.16);border-radius:24px;padding:24px;
  box-shadow:0 44px 120px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05);
}
.tt-picker-card::-webkit-scrollbar{width:8px}
.tt-picker-card::-webkit-scrollbar-thumb{background:rgba(148,179,255,.28);border-radius:4px}
.tt-picker-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tt-picker-head h3{font-family:var(--tt-font-display);font-size:20px;font-weight:700;margin:0;color:#eef3ff}
.tt-picker-close{
  width:38px;height:38px;border-radius:11px;border:1px solid rgba(148,179,255,.2);
  background:rgba(148,179,255,.06);color:#b9c9e8;font-size:15px;cursor:pointer;
  transition:background-color var(--tt-shift),color var(--tt-shift);
}
.tt-picker-close:hover{background:rgba(148,179,255,.14);color:#fff}
.tt-picker-sub{color:#93a5c8;font-size:13px;margin:6px 0 18px}
.tt-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
.tt-pick{
  position:relative;border:1px solid rgba(148,179,255,.14);border-radius:18px;
  overflow:hidden;cursor:pointer;background:#0b1220;color:#e8eefc;text-align:left;padding:0;
  transition:transform var(--tt-shift) var(--tt-ease),border-color var(--tt-shift),box-shadow var(--tt-shift);
}
.tt-pick:hover{transform:translateY(-3px);border-color:rgba(148,179,255,.42);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.tt-pick.active{border-color:#2f7bff;box-shadow:0 0 0 2px rgba(47,123,255,.42),0 18px 40px rgba(0,0,0,.35)}
.tt-pick-swatch{
  height:84px;display:grid;place-items:center;font-size:26px;color:#fff;position:relative;overflow:hidden;
}
.tt-pick-swatch::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 48%);
}
.tt-pick-swatch i{position:relative;z-index:2;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))}
.tt-pick-meta{padding:12px 14px 14px}
.tt-pick-name{font-family:var(--tt-font-display);font-weight:700;font-size:13.5px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.tt-check{color:transparent;transition:color var(--tt-shift)}
.tt-pick.active .tt-check{color:#3dd68c}
.tt-pick-desc{color:#8ea3c8;font-size:11px;line-height:1.4;margin-top:4px}

/* swatch art — mini terminal previews */
.tt-pick[data-theme="biometric"] .tt-pick-swatch{background:radial-gradient(circle at 78% 18%,#12294d,#050b18 68%);color:#7cc4ff}
.tt-pick[data-theme="minimal"] .tt-pick-swatch{background:linear-gradient(150deg,#ffffff,#e9eef6);color:#1a5cff}
.tt-pick[data-theme="orbit"] .tt-pick-swatch{background:radial-gradient(circle at 50% 44%,#10213f,#03070f 70%);color:#38bdf8}
.tt-pick[data-theme="glass"] .tt-pick-swatch{background:linear-gradient(140deg,#1b2b5a,#0b1130 55%,#241a50);color:#cfe0ff}
.tt-pick[data-theme="industrial"] .tt-pick-swatch{background:repeating-linear-gradient(45deg,#262a31,#1d2127 12px);color:#ffb24a}
.tt-pick[data-theme="executive"] .tt-pick-swatch{background:linear-gradient(155deg,#20242c,#0b0d11 70%);color:#d8b878}
.tt-pick[data-theme="colorblock"] .tt-pick-swatch{background:linear-gradient(135deg,#2f7bff 0 30%,#12d9a5 30% 55%,#ffb24a 55% 78%,#ff5c8a 78%);color:#fff}
.tt-pick[data-theme="tabletos"] .tt-pick-swatch{background:linear-gradient(165deg,#16213a,#0c1220 70%);color:#38bdf8}
.tt-pick[data-theme="facefirst"] .tt-pick-swatch{background:radial-gradient(circle at 50% 35%,#1d2f4e,#02040a 80%);color:#8fb4ff}
.tt-pick[data-theme="command"] .tt-pick-swatch{background:linear-gradient(175deg,#0e1626,#080d18 55%,#0c1016);color:#22d3ee}
/* ============================================================
   THEME 01 — BIOMETRIC  (default)
   Premium security terminal: left glass nav rail, centralized
   face scanner with corner brackets, right column holds the
   clock, live status, quick actions and the shift panel.
   Palette: deep navy + electric blue + mint success.
   ============================================================ */
html[data-tt-theme="biometric"]{
  --tt-bg:#060d1f;
  --tt-panel:rgba(15,28,54,.72);
  --tt-panel-2:rgba(10,20,42,.85);
  --tt-line:rgba(122,160,255,.18);
  --tt-line-strong:rgba(122,160,255,.42);
  --tt-text:#f2f6ff;
  --tt-muted:#96a8cd;
  --tt-accent:#2f7bfa;
  --tt-accent-2:#22c8ff;
  --tt-success:#1fd4a3;
  --tt-warn:#ffb454;
  --tt-danger:#ff6b81;
  --tt-radius:26px;
}
html[data-tt-theme="biometric"] .kiosk-root{
  background:
    radial-gradient(circle at 12% 12%,rgba(47,123,250,.14),transparent 34%),
    radial-gradient(circle at 88% 78%,rgba(31,212,163,.10),transparent 30%),
    linear-gradient(155deg,#050b1d 0%,#081128 52%,#04091a 100%);
}
html[data-tt-theme="biometric"] .kiosk-shell{padding:clamp(18px,2.4vw,34px) clamp(26px,3vw,44px)}
html[data-tt-theme="biometric"] .hero-card{
  width:min(1220px,96vw);height:calc(100dvh - 48px);min-height:560px;
  grid-template-columns:238px minmax(0,1fr) 320px;
  grid-template-rows:auto auto minmax(auto,1fr) auto;
  grid-template-areas:
    "side time     shift"
    "side status   shift"
    "side face     shift"
    "side quick    quick";
  gap:16px 26px;padding:26px 28px;border-radius:30px;
  border:1px solid var(--tt-line);
  background:linear-gradient(150deg,rgba(17,31,60,.68),rgba(7,14,32,.9));
  box-shadow:0 44px 110px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
html[data-tt-theme="biometric"] .tt-side{
  grid-area:side;display:flex;flex-direction:column;gap:10px;
  background:rgba(10,20,42,.55);border:1px solid var(--tt-line);
  border-radius:24px;padding:18px 14px;
}
html[data-tt-theme="biometric"] .tt-brand img{max-width:150px;height:auto;margin-bottom:8px}
html[data-tt-theme="biometric"] .tt-nav-links{display:flex;flex-direction:column;gap:6px;margin-top:8px}
html[data-tt-theme="biometric"] .tt-nav-btn{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:transparent;border:1px solid transparent;color:var(--tt-muted);
  font-size:14px;font-weight:600;padding:12px 14px;border-radius:14px;
}
html[data-tt-theme="biometric"] .tt-nav-btn i{width:20px;text-align:center;font-size:15px;color:var(--tt-muted)}
html[data-tt-theme="biometric"] .tt-nav-btn:hover{color:var(--tt-text);background:rgba(122,160,255,.08)}
html[data-tt-theme="biometric"] .tt-nav-btn.active{
  color:var(--tt-text);background:linear-gradient(135deg,rgba(47,123,250,.28),rgba(47,123,250,.06));
  border-color:rgba(47,123,250,.5);
}
html[data-tt-theme="biometric"] .tt-nav-btn.active i{color:var(--tt-accent-2)}
html[data-tt-theme="biometric"] .tt-side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px}
html[data-tt-theme="biometric"] .tt-help-btn{
  display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;
  background:rgba(47,123,250,.1);border:1px dashed rgba(47,123,250,.45);
  color:#c3d6ff;border-radius:14px;font-size:13px;font-weight:600;
}
html[data-tt-theme="biometric"] .tt-help-btn i{color:var(--tt-accent-2)}

html[data-tt-theme="biometric"] .tt-time{
  grid-area:time;display:flex;align-items:baseline;justify-content:flex-end;gap:14px;
}
html[data-tt-theme="biometric"] .tt-time-num{
  display:flex;align-items:baseline;font-family:var(--tt-font-display);
  font-weight:700;color:var(--tt-text);font-size:clamp(44px,4.4vw,64px);letter-spacing:-2px;
}
html[data-tt-theme="biometric"] .tt-time-colon{color:var(--tt-accent-2)}
html[data-tt-theme="biometric"] .tt-time-ap{font-size:.46em;color:var(--tt-accent-2);letter-spacing:0;margin-left:4px}
html[data-tt-theme="biometric"] .tt-time-date{color:var(--tt-muted);font-size:13px;text-align:right}

html[data-tt-theme="biometric"] .tt-status{
  grid-area:status;display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap;
}
html[data-tt-theme="biometric"] .tt-status-chip{background:rgba(47,123,250,.12);border:1px solid rgba(47,123,250,.35);color:#c3d6ff}
html[data-tt-theme="biometric"] .tt-status-chip i{color:var(--tt-success)}
html[data-tt-theme="biometric"] .tt-status-terminal{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:var(--tt-muted)}
html[data-tt-theme="biometric"] .tt-settings-btn{
  width:38px;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);color:var(--tt-muted);font-size:14px;
}
html[data-tt-theme="biometric"] .tt-settings-btn:hover{color:var(--tt-text);background:rgba(255,255,255,.08)}
html[data-tt-theme="biometric"] .face-column{grid-area:face;display:grid;place-items:center;position:relative}
html[data-tt-theme="biometric"] .scan-wrap{
  width:min(580px,40vw,60vh);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(122,160,255,.55);
  background:radial-gradient(circle,rgba(47,123,250,.20),rgba(6,13,31,.0) 72%);
  box-shadow:0 0 70px rgba(47,123,250,.28),inset 0 0 46px rgba(47,123,250,.12);
}
html[data-tt-theme="biometric"] #faceVideo,
html[data-tt-theme="biometric"] .camera-placeholder{border-radius:50%}
html[data-tt-theme="biometric"] .camera-placeholder{background:radial-gradient(circle at 50% 36%,#102348,#060d1f 74%)}
html[data-tt-theme="biometric"] .scan-corner{border-color:#22c8ff}
html[data-tt-theme="biometric"] #faceStatus{
  grid-area:face;align-self:end;display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:13px;font-weight:600;color:#c3d6ff;
}

html[data-tt-theme="biometric"] .tt-shift{
  grid-area:shift;display:flex;flex-direction:column;gap:8px;
  background:var(--tt-panel-2);border:1px solid var(--tt-line);
  border-radius:22px;padding:18px 18px;
}
html[data-tt-theme="biometric"] .tt-shift-title{color:var(--tt-accent-2)}
html[data-tt-theme="biometric"] .tt-shift-time{font-size:19px;color:var(--tt-text)}
html[data-tt-theme="biometric"] .tt-shift-pos,
html[data-tt-theme="biometric"] .tt-shift-dept{font-size:14px;color:var(--tt-muted)}

html[data-tt-theme="biometric"] .tt-quick{
  grid-area:quick;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-self:stretch;
}
html[data-tt-theme="biometric"] .tt-q{font-size:15px;color:var(--tt-text);border-radius:20px}
html[data-tt-theme="biometric"] .tt-q-in{
  background:linear-gradient(135deg,#3d86ff,#1f5ee8);
  box-shadow:0 16px 36px rgba(47,123,250,.4);border:1px solid rgba(140,180,255,.5);
}
html[data-tt-theme="biometric"] .tt-q-in:hover{box-shadow:0 18px 44px rgba(47,123,250,.52)}
html[data-tt-theme="biometric"] .tt-q-out{background:rgba(31,212,163,.12);border:1px solid rgba(31,212,163,.4);color:#a7f3da}
html[data-tt-theme="biometric"] .tt-q-out:hover{background:rgba(31,212,163,.2)}
html[data-tt-theme="biometric"] .tt-q-out i{color:var(--tt-success)}
html[data-tt-theme="biometric"] .tt-q-break{background:rgba(255,180,84,.1);border:1px solid rgba(255,180,84,.38);color:#ffe3c2}
html[data-tt-theme="biometric"] .tt-q-break i{color:var(--tt-warn)}
html[data-tt-theme="biometric"] .tt-q-break:hover{background:rgba(255,180,84,.18)}
html[data-tt-theme="biometric"] .tt-q-pin{background:rgba(140,96,255,.12);border:1px solid rgba(140,96,255,.42);color:#e4dcff}
html[data-tt-theme="biometric"] .tt-q-pin i{color:#b49bff}
html[data-tt-theme="biometric"] .tt-q-pin:hover{background:rgba(140,96,255,.2)}

html[data-tt-theme="biometric"] .tt-announce,.tt-footer{display:none}

/* Biometric — two stacked cards on the right rail (landscape).
   A "Clock & Status" card on top (clock, date, Online / Terminal 01)
   with Today's Shift below it, so the camera expands to fill the whole
   centre column. Portrait keeps its stacked rows so the clock stays
   visible on phones. */
@media (orientation:landscape){
  html[data-tt-theme="biometric"] .hero-card{
    grid-template-columns:238px minmax(0,1fr) 340px;
    grid-template-rows:auto minmax(0,1fr) auto;
    grid-template-areas:
      "side face   clock"
      "side face   shift"
      "side quick  quick";
  }
  /* Clock & Status card (top-right): clock + date at the top, status
     chips at the bottom, sharing one card shell so they read as ONE
     card. */
  html[data-tt-theme="biometric"] .tt-time{
    grid-area:clock;
    display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
    gap:4px;padding:18px 20px 92px;
    background:var(--tt-panel-2);border:1px solid var(--tt-line);border-radius:22px;
  }
  html[data-tt-theme="biometric"] .tt-time-num{font-size:clamp(34px,3.4vw,52px)}
  html[data-tt-theme="biometric"] .tt-time-date{text-align:left}
  html[data-tt-theme="biometric"] .tt-status{
    grid-area:clock;align-self:end;
    display:flex;align-items:center;gap:8px;justify-content:flex-start;flex-wrap:wrap;
    padding:12px 20px 16px;
    border-top:1px solid var(--tt-line);
  }
  html[data-tt-theme="biometric"] .tt-status-chip{white-space:nowrap}
  html[data-tt-theme="biometric"] .tt-status-terminal{flex:none}
  /* Today's Shift card (bottom-right) */
  html[data-tt-theme="biometric"] .tt-shift{
    grid-area:shift;justify-content:center;
    background:var(--tt-panel-2);border:1px solid var(--tt-line);
    border-radius:22px;padding:18px;
  }
}

/* biometric: portrait tablet */
@media (max-width:1024px) and (orientation:portrait){
  html[data-tt-theme="biometric"] .hero-card{
    height:auto;min-height:0;
    grid-template-columns:1fr;grid-template-rows:auto;
    grid-template-areas:"time" "status" "face" "quick" "shift";
    padding:20px 18px;gap:14px;
  }
  html[data-tt-theme="biometric"] .tt-side{display:none}
  html[data-tt-theme="biometric"] .tt-time{justify-content:center}
  html[data-tt-theme="biometric"] .tt-time-date{text-align:center}
  html[data-tt-theme="biometric"] .tt-status{justify-content:center}
  html[data-tt-theme="biometric"] .scan-wrap{width:min(86vw,60vh,600px)}
  html[data-tt-theme="biometric"] .tt-quick{grid-template-columns:1fr 1fr;align-self:auto}
}
/* ============================================================
   THEME 02 — MINIMAL WHITE
   Bright, corporate and calm. Near-white surfaces, ample
   whitespace, one confident blue accent. Ideal for lobbies
   and offices that prefer a light, airy feel.
   ============================================================ */
html[data-tt-theme="minimal"]{
  --tt-bg:#f3f6fb;
  --tt-bg-2:#ffffff;
  --tt-panel:#ffffff;
  --tt-panel-2:#eef2f8;
  --tt-line:#dbe4f0;
  --tt-line-strong:#c2d0e4;
  --tt-text:#0d1b34;
  --tt-muted:#5d6f8c;
  --tt-accent:#1a5cff;
  --tt-accent-2:#16a085;
  --tt-success:#12b886;
  --tt-warn:#f5a623;
  --tt-danger:#e5484d;
  --tt-radius:24px;
}
html[data-tt-theme="minimal"] .kiosk-root{
  background:
    radial-gradient(circle at 20% 10%,rgba(26,92,255,.06),transparent 40%),
    linear-gradient(160deg,#f7f9fd 0%,#eef2f8 100%);
}
html[data-tt-theme="minimal"] .kiosk-shell{padding:clamp(18px,2.2vw,32px) clamp(22px,2.6vw,40px)}
html[data-tt-theme="minimal"] .hero-card{
  width:min(1240px,96vw);height:calc(100dvh - 40px);min-height:560px;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  grid-template-rows:auto auto minmax(0,1fr) auto;
  grid-template-areas:
    "face time"
    "face status"
    "face shift"
    "face quick";
  gap:20px 40px;padding:32px 36px;border-radius:34px;
  border:1px solid rgba(194,208,228,.6);
  background:var(--tt-bg-2);
  box-shadow:0 30px 70px rgba(30,50,90,.10);
}
html[data-tt-theme="minimal"] .face-column{grid-area:face;display:grid;place-items:center}
html[data-tt-theme="minimal"] .scan-wrap{
  width:min(430px,40vw,42vh);aspect-ratio:1;border-radius:32px;
  border:1px solid #dbe4f0;background:#f8fafd;
  box-shadow:0 24px 60px rgba(30,50,90,.12);
}
html[data-tt-theme="minimal"] #faceVideo,
html[data-tt-theme="minimal"] .camera-placeholder{border-radius:26px}
html[data-tt-theme="minimal"] .camera-placeholder{background:linear-gradient(150deg,#eef3fa,#d9e4f2);color:#7c8aa8}
html[data-tt-theme="minimal"] .scan-corner{border-color:#1a5cff}
html[data-tt-theme="minimal"] .scan-glow{box-shadow:inset 0 -28px 55px rgba(26,92,255,.10)}
html[data-tt-theme="minimal"] #faceStatus{
  grid-area:face;align-self:end;display:flex;justify-content:center;gap:6px;
  font-size:13px;font-weight:600;color:var(--tt-muted);padding-bottom:4px;
}

html[data-tt-theme="minimal"] .tt-time{
  grid-area:time;display:flex;flex-direction:column;align-items:flex-end;gap:4px;
}
html[data-tt-theme="minimal"] .tt-time-num{
  display:flex;align-items:baseline;font-family:var(--tt-font-display);
  font-weight:700;color:var(--tt-text);font-size:clamp(56px,6.4vw,96px);letter-spacing:-3px;
}
html[data-tt-theme="minimal"] .tt-time-colon{color:#b9c6d9}
html[data-tt-theme="minimal"] .tt-time-ap{font-size:.4em;color:var(--tt-accent);margin-left:6px}
html[data-tt-theme="minimal"] .tt-time-date{color:var(--tt-muted);font-size:15px}

html[data-tt-theme="minimal"] .tt-status{
  grid-area:status;display:flex;gap:8px;align-items:center;justify-content:flex-end;
}
html[data-tt-theme="minimal"] .tt-status-chip{
  background:#fff;border:1px solid var(--tt-line);color:var(--tt-muted);
  box-shadow:0 6px 18px rgba(30,50,90,.06);
}
html[data-tt-theme="minimal"] .tt-status-chip i{color:var(--tt-success)}
html[data-tt-theme="minimal"] .tt-status-terminal{display:none}
html[data-tt-theme="minimal"] .tt-settings-btn{display:none}

html[data-tt-theme="minimal"] .tt-shift{
  grid-area:shift;display:flex;flex-direction:column;gap:8px;
  background:var(--tt-panel-2);border:1px solid var(--tt-line);
  border-radius:22px;padding:20px 22px;
}
html[data-tt-theme="minimal"] .tt-shift-title{color:var(--tt-accent)}
html[data-tt-theme="minimal"] .tt-shift-time{font-size:19px;color:var(--tt-text)}
html[data-tt-theme="minimal"] .tt-shift-pos,
html[data-tt-theme="minimal"] .tt-shift-dept{font-size:14px;color:#7c8aa8}

html[data-tt-theme="minimal"] .tt-quick{
  grid-area:quick;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-self:end;
}
html[data-tt-theme="minimal"] .tt-q{
  min-height:94px;border-radius:20px;flex-direction:row;gap:12px;
  font-size:16px;border:1px solid var(--tt-line);background:#fff;color:var(--tt-text);
  box-shadow:0 12px 30px rgba(30,50,90,.08);
}
html[data-tt-theme="minimal"] .tt-q i{font-size:24px}
html[data-tt-theme="minimal"] .tt-q-in{background:var(--tt-accent);border-color:var(--tt-accent);color:#fff}
html[data-tt-theme="minimal"] .tt-q-out i{color:var(--tt-success)}
html[data-tt-theme="minimal"] .tt-q-break i{color:var(--tt-warn)}
html[data-tt-theme="minimal"] .tt-q-pin i{color:#5b7bd4}
html[data-tt-theme="minimal"] .tt-announce,.tt-footer{display:none}

/* minimal: portrait tablet */
@media (max-width:1024px) and (orientation:portrait){
  html[data-tt-theme="minimal"] .hero-card{
    height:auto;min-height:0;
    grid-template-columns:1fr;grid-template-rows:auto;
    grid-template-areas:"time" "status" "face" "shift" "quick";
    padding:22px 20px;gap:16px;
  }
  html[data-tt-theme="minimal"] .tt-time{align-items:center;text-align:center}
  html[data-tt-theme="minimal"] .tt-status{grid-area:auto;margin:0;justify-content:center}
  html[data-tt-theme="minimal"] .scan-wrap{width:min(86vw,60vh,600px)}
  html[data-tt-theme="minimal"] .tt-quick{align-self:stretch}
}
/* ============================================================
   THEME 03 — BIOMETRIC ORBIT
   A circular control system: the scanner is dead-centre with
   concentric rings, quick actions orbit around it as pill
   buttons, and a precise clock crowns the scene. Sleek and
   high-tech, with a deep-space palette.
   ============================================================ */
html[data-tt-theme="orbit"]{
  --tt-bg:#03060f;
  --tt-panel:rgba(13,26,54,.6);
  --tt-panel-2:rgba(8,18,38,.8);
  --tt-line:rgba(90,140,255,.2);
  --tt-line-strong:rgba(120,180,255,.5);
  --tt-text:#e9f1ff;
  --tt-muted:#8aa0c8;
  --tt-accent:#2f7bfa;
  --tt-accent-2:#38bdf8;
  --tt-success:#22e0ae;
  --tt-warn:#ffc24a;
  --tt-danger:#ff6b81;
  --tt-radius:999px;
}
html[data-tt-theme="orbit"] .kiosk-root{
  background:
    radial-gradient(circle at 50% 42%,rgba(38,84,180,.20),transparent 46%),
    linear-gradient(160deg,#060d20 0%,#02040c 100%);
}
html[data-tt-theme="orbit"] .kiosk-shell{padding:clamp(16px,2vw,26px) clamp(22px,2.6vw,38px)}
html[data-tt-theme="orbit"] .hero-card{
  width:min(1180px,96vw);height:calc(100dvh - 36px);min-height:560px;
  grid-template-columns:minmax(0,1fr) 250px;
  grid-template-rows:auto auto minmax(auto,1fr) auto;
  grid-template-areas:
    "time   shift"
    "status shift"
    "face   shift"
    "quick  quick";
  gap:12px 24px;padding:22px 24px;border-radius:34px;
  border:1px solid rgba(90,140,255,.16);
  background:rgba(8,18,38,.32);
  box-shadow:0 40px 110px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}

html[data-tt-theme="orbit"] .tt-time{
  grid-area:time;display:flex;align-items:baseline;justify-content:center;gap:16px;
}
html[data-tt-theme="orbit"] .tt-time-num{
  display:flex;align-items:baseline;font-family:var(--tt-font-display);
  font-weight:700;color:var(--tt-text);font-size:clamp(52px,5.6vw,84px);letter-spacing:-2px;
  text-shadow:0 0 36px rgba(47,123,250,.5);
}
html[data-tt-theme="orbit"] .tt-time-colon{color:var(--tt-accent-2);animation:ttBlink 1s step-end infinite}
@keyframes ttBlink{50%{opacity:.25}}
html[data-tt-theme="orbit"] .tt-time-ap{font-size:.42em;color:var(--tt-accent-2);margin-left:6px}
html[data-tt-theme="orbit"] .tt-time-date{color:var(--tt-muted);font-size:14px;letter-spacing:.4px}

html[data-tt-theme="orbit"] .tt-status{
  grid-area:status;display:flex;justify-content:center;gap:8px;
}
html[data-tt-theme="orbit"] .tt-status-chip{background:rgba(47,123,250,.14);border:1px solid rgba(47,123,250,.4);color:#c9dbff}
html[data-tt-theme="orbit"] .tt-status-chip i{color:var(--tt-success)}
html[data-tt-theme="orbit"] .tt-status-terminal{display:none}
html[data-tt-theme="orbit"] .tt-settings-btn{width:38px;height:38px;border-radius:50%;border:1px solid rgba(120,180,255,.35);background:rgba(120,180,255,.08);color:var(--tt-muted);font-size:14px}
html[data-tt-theme="orbit"] .tt-settings-btn:hover{color:#fff;background:rgba(120,180,255,.18)}
html[data-tt-theme="orbit"] .face-column{grid-area:face;display:grid;place-items:center;position:relative}
html[data-tt-theme="orbit"] .scan-wrap{
  width:min(500px,42vw,54vh);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(120,180,255,.7);
  background:radial-gradient(circle,rgba(38,84,180,.24),transparent 70%);
  box-shadow:0 0 80px rgba(47,123,250,.4),inset 0 0 50px rgba(47,123,250,.16);
}
html[data-tt-theme="orbit"] .scan-wrap::before{
  content:'';position:absolute;inset:-18%;border-radius:50%;
  border:1px dashed rgba(56,189,248,.4);animation:ttSpin 20s linear infinite;
}
html[data-tt-theme="orbit"] .scan-wrap::after{
  content:'';position:absolute;inset:-36%;border-radius:50%;
  border:1px solid rgba(34,224,174,.18);
}
html[data-tt-theme="orbit"] .scan-wrap .scan-corner{display:none}
@keyframes ttSpin{to{transform:rotate(360deg)}}
html[data-tt-theme="orbit"] #faceVideo,
html[data-tt-theme="orbit"] .camera-placeholder{border-radius:50%}
html[data-tt-theme="orbit"] #faceStatus{
  grid-area:face;align-self:end;text-align:center;font-size:13px;font-weight:600;color:var(--tt-muted);
}

html[data-tt-theme="orbit"] .tt-shift{
  grid-area:shift;display:flex;flex-direction:column;gap:8px;justify-content:center;
  border-left:1px solid rgba(90,140,255,.2);padding-left:22px;
}
html[data-tt-theme="orbit"] .tt-shift-title{color:var(--tt-accent-2)}
html[data-tt-theme="orbit"] .tt-shift-time{font-size:18px;color:var(--tt-text)}
html[data-tt-theme="orbit"] .tt-shift-pos,
html[data-tt-theme="orbit"] .tt-shift-dept{font-size:14px;color:var(--tt-muted)}

html[data-tt-theme="orbit"] .tt-quick{
  grid-area:quick;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:center;
}
html[data-tt-theme="orbit"] .tt-q{
  width:100%;min-height:64px;border-radius:999px;flex-direction:row;gap:10px;
  font-size:14px;color:var(--tt-text);padding:10px 18px;
}
html[data-tt-theme="orbit"] .tt-q-in{background:linear-gradient(135deg,#3d86ff,#1f5ee8);border:1px solid rgba(140,180,255,.5);box-shadow:0 14px 36px rgba(47,123,250,.4)}
html[data-tt-theme="orbit"] .tt-q-out{background:rgba(34,224,174,.1);border:1px solid rgba(34,224,174,.4);color:#c9ffe9}
html[data-tt-theme="orbit"] .tt-q-out i{color:var(--tt-success)}
html[data-tt-theme="orbit"] .tt-q-break{background:rgba(255,194,74,.1);border:1px solid rgba(255,194,74,.4);color:#ffe8bf}
html[data-tt-theme="orbit"] .tt-q-break i{color:var(--tt-warn)}
html[data-tt-theme="orbit"] .tt-q-pin{background:rgba(140,96,255,.12);border:1px solid rgba(140,96,255,.42);color:#e4dcff}
html[data-tt-theme="orbit"] .tt-q-pin i{color:#b49bff}
html[data-tt-theme="orbit"] .tt-announce,.tt-footer{display:none}

/* orbit: portrait tablet */
@media (max-width:1024px) and (orientation:portrait){
  html[data-tt-theme="orbit"] .hero-card{
    height:auto;min-height:0;
    grid-template-columns:1fr;grid-template-rows:auto;
    grid-template-areas:"time" "status" "face" "quick" "shift";
    padding:18px;gap:12px;
  }
  html[data-tt-theme="orbit"] .tt-shift{border-left:0;border-top:1px solid rgba(90,140,255,.2);padding:14px 0 0}
  html[data-tt-theme="orbit"] .tt-quick{grid-template-columns:1fr 1fr}
  html[data-tt-theme="orbit"] .scan-wrap{width:min(72vw,54vh,540px)}
  /* Keep the concentric orbit rings inside the screen on narrow portrait:
     at this size the outer ring would extend past the viewport edges. */
  html[data-tt-theme="orbit"] .scan-wrap::before{inset:-10%}
  html[data-tt-theme="orbit"] .scan-wrap::after{inset:-18%}
}
/* ============================================================
   THEME 04 — SMART GLASS
   Frosted glassmorphism: layered blur, luminous gradient
   backdrop, thin translucent panels with inner highlights.
   Airy, modern and premium — perfect for modern lobbies.
   ============================================================ */
html[data-tt-theme="glass"]{
  --tt-panel:rgba(255,255,255,.08);
  --tt-panel-2:rgba(255,255,255,.05);
  --tt-line:rgba(255,255,255,.16);
  --tt-line-strong:rgba(255,255,255,.34);
  --tt-text:#f6f9ff;
  --tt-muted:#c4d2ea;
  --tt-accent:#5ad1ff;
  --tt-accent-2:#b18cff;
  --tt-success:#45e6b0;
  --tt-warn:#ffd166;
  --tt-danger:#ff7d8c;
  --tt-radius:28px;
}
html[data-tt-theme="glass"] .kiosk-root{
  background:
    radial-gradient(circle at 18% 20%,rgba(58,124,255,.42),transparent 44%),
    radial-gradient(circle at 82% 24%,rgba(177,140,255,.34),transparent 42%),
    radial-gradient(circle at 70% 84%,rgba(69,230,176,.30),transparent 42%),
    linear-gradient(150deg,#0c1430 0%,#121a3d 52%,#1a1240 100%);
}
html[data-tt-theme="glass"] .kiosk-shell{padding:clamp(18px,2.2vw,30px) clamp(22px,2.6vw,38px)}
html[data-tt-theme="glass"] .hero-card{
  width:min(1220px,96vw);height:calc(100dvh - 38px);min-height:560px;
  grid-template-columns:minmax(0,1fr) 330px;
  grid-template-rows:auto auto minmax(auto,1fr) auto;
  grid-template-areas:
    "time   status"
    "time   quick"
    "face   quick"
    "face   shift";
  gap:18px 26px;padding:28px 30px;border-radius:36px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.06);
  box-shadow:0 34px 90px rgba(4,8,20,.5),inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter:blur(26px) saturate(1.4);-webkit-backdrop-filter:blur(26px) saturate(1.4);
}

html[data-tt-theme="glass"] .tt-time{
  grid-area:time;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;
}
html[data-tt-theme="glass"] .tt-time-num{
  display:flex;align-items:baseline;font-family:var(--tt-font-display);
  font-weight:700;color:var(--tt-text);font-size:clamp(58px,6.4vw,92px);letter-spacing:-2px;
  text-shadow:0 6px 34px rgba(90,209,255,.35);
}
html[data-tt-theme="glass"] .tt-time-colon{color:var(--tt-accent)}
html[data-tt-theme="glass"] .tt-time-ap{font-size:.4em;color:var(--tt-accent);margin-left:6px}
html[data-tt-theme="glass"] .tt-time-date{color:var(--tt-muted);font-size:15px}

html[data-tt-theme="glass"] .tt-status{
  grid-area:status;display:flex;align-items:flex-start;justify-content:flex-end;gap:8px;
}
html[data-tt-theme="glass"] .tt-status-chip{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#e2ecff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
html[data-tt-theme="glass"] .tt-status-chip i{color:var(--tt-success)}
html[data-tt-theme="glass"] .tt-status-terminal{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:var(--tt-muted)}
html[data-tt-theme="glass"] .tt-settings-btn{
  width:40px;height:40px;border-radius:14px;border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.1);color:#dbe8ff;font-size:15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
html[data-tt-theme="glass"] .tt-settings-btn:hover{background:rgba(255,255,255,.18);color:#fff}

html[data-tt-theme="glass"] .face-column{grid-area:face;display:grid;place-items:center}
html[data-tt-theme="glass"] .scan-wrap{
  width:min(600px,42vw,60vh);aspect-ratio:1;border-radius:30px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.10);
  box-shadow:0 26px 70px rgba(4,8,20,.4),inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
html[data-tt-theme="glass"] #faceVideo,
html[data-tt-theme="glass"] .camera-placeholder{border-radius:24px}
html[data-tt-theme="glass"] .camera-placeholder{background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.04));color:#dbe8ff}
html[data-tt-theme="glass"] .scan-corner{border-color:rgba(90,209,255,.9)}
html[data-tt-theme="glass"] #faceStatus{
  grid-area:face;align-self:end;text-align:center;font-size:13px;font-weight:600;color:var(--tt-muted);
}
html[data-tt-theme="glass"] .tt-quick{
  grid-area:quick;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start;
}
html[data-tt-theme="glass"] .tt-q{
  min-height:88px;border-radius:24px;color:var(--tt-text);
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
html[data-tt-theme="glass"] .tt-q:hover{background:rgba(255,255,255,.14)}
html[data-tt-theme="glass"] .tt-q-in{background:linear-gradient(135deg,rgba(90,209,255,.42),rgba(47,123,250,.4));border-color:rgba(90,209,255,.5)}
html[data-tt-theme="glass"] .tt-q-out i{color:var(--tt-success)}
html[data-tt-theme="glass"] .tt-q-break i{color:var(--tt-warn)}
html[data-tt-theme="glass"] .tt-q-pin i{color:var(--tt-accent-2)}

html[data-tt-theme="glass"] .tt-shift{
  grid-area:shift;display:flex;flex-direction:column;gap:8px;
  border:1px solid rgba(255,255,255,.16);border-radius:24px;padding:18px 20px;
  background:rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
html[data-tt-theme="glass"] .tt-shift-title{color:var(--tt-accent)}
html[data-tt-theme="glass"] .tt-shift-time{font-size:18px;color:var(--tt-text)}
html[data-tt-theme="glass"] .tt-shift-pos,
html[data-tt-theme="glass"] .tt-shift-dept{font-size:14px;color:var(--tt-muted)}
html[data-tt-theme="glass"] .tt-announce,.tt-footer{display:none}

/* glass: portrait tablet */
@media (max-width:1024px) and (orientation:portrait){
  html[data-tt-theme="glass"] .hero-card{
    height:auto;min-height:0;
    grid-template-columns:1fr;grid-template-rows:auto;
    grid-template-areas:"time" "status" "face" "quick" "shift";
    padding:20px 18px;gap:14px;
  }
  html[data-tt-theme="glass"] .tt-status{justify-content:flex-start}
  html[data-tt-theme="glass"] .scan-wrap{width:min(86vw,60vh,600px)}
}
/* ============================================================
   THEME 05 — INDUSTRIAL
   Rugged factory & warehouse terminal. Saturated safety orange,
   technical grid lines, squared geometry and high-contrast
   typography. Built to be read at a glance on a busy floor.
   ============================================================ */
html[data-tt-theme="industrial"]{
  --tt-bg:#11141a;
  --tt-panel:#1a1f28;
  --tt-panel-2:#141820;
  --tt-line:#2a3140;
  --tt-line-strong:#ffb454;
  --tt-text:#f2f5f9;
  --tt-muted:#8b95a7;
  --tt-accent:#ff9a2e;
  --tt-accent-2:#ffca4a;
  --tt-success:#3dd68c;
  --tt-warn:#ffca4a;
  --tt-danger:#ff6b6b;
  --tt-radius:14px;
}
html[data-tt-theme="industrial"] .kiosk-root{
  background:
    linear-gradient(rgba(255,154,46,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,154,46,.05) 1px,transparent 1px),
    linear-gradient(150deg,#171b23 0%,#0e1117 100%);
  background-size:44px 44px,44px 44px,100% 100%;
}
html[data-tt-theme="industrial"] .kiosk-shell{padding:clamp(16px,2vw,28px) clamp(22px,2.6vw,38px)}
html[data-tt-theme="industrial"] .hero-card{
  width:min(1240px,97vw);height:calc(100dvh - 34px);min-height:560px;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  grid-template-rows:auto auto minmax(auto,1fr) auto;
  grid-template-areas:
    "time   time"
    "status status"
    "face   shift"
    "quick  quick";
  gap:14px 24px;padding:24px 26px;border-radius:22px;
  border:1px solid #2a3140;
  background:linear-gradient(160deg,#20262f 0%,#171b23 100%);
  box-shadow:0 30px 70px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05);
}
html[data-tt-theme="industrial"] .tt-time{
  grid-area:time;display:flex;align-items:baseline;justify-content:flex-start;gap:16px;
  border-bottom:2px solid #ff9a2e;padding-bottom:10px;
}
html[data-tt-theme="industrial"] .tt-time-num{
  display:flex;align-items:baseline;font-family:var(--tt-font-display);
  font-weight:900;color:var(--tt-text);font-size:clamp(52px,5.6vw,92px);letter-spacing:-2px;
}
html[data-tt-theme="industrial"] .tt-time-colon{color:var(--tt-accent)}
html[data-tt-theme="industrial"] .tt-time-ap{font-size:.42em;color:var(--tt-accent);margin-left:6px}
html[data-tt-theme="industrial"] .tt-time-date{color:var(--tt-muted);font-size:14px;font-family:var(--tt-font-mono)}
html[data-tt-theme="industrial"] .tt-status{grid-area:status;display:flex;gap:8px;justify-content:flex-end}
html[data-tt-theme="industrial"] .tt-status-chip{background:#141820;border:1px solid #ff9a2e;color:var(--tt-accent);font-family:var(--tt-font-mono)}
html[data-tt-theme="industrial"] .tt-status-chip i{color:var(--tt-success)}
html[data-tt-theme="industrial"] .tt-status-terminal{border-color:#2a3140;color:var(--tt-muted)}
html[data-tt-theme="industrial"] .tt-settings-btn{width:42px;height:42px;border-radius:10px;border:2px solid #ff9a2e;background:#141820;color:var(--tt-accent);font-size:15px}
html[data-tt-theme="industrial"] .tt-settings-btn:hover{background:#ff9a2e;color:#141820}

html[data-tt-theme="industrial"] .face-column{grid-area:face;display:grid;place-items:center}
html[data-tt-theme="industrial"] .scan-wrap{
  width:min(500px,34vw,58vh);aspect-ratio:1;border-radius:18px;
  border:4px solid #ff9a2e;background:#0b0e13;
  box-shadow:0 0 0 4px #11141a,0 0 0 5px rgba(255,154,46,.4);
}
html[data-tt-theme="industrial"] #faceVideo,
html[data-tt-theme="industrial"] .camera-placeholder{border-radius:12px}
html[data-tt-theme="industrial"] .camera-placeholder{background:radial-gradient(circle at 50% 34%,#21272f,#0b0e13 74%);color:#8b95a7}
html[data-tt-theme="industrial"] .scan-corner{border-color:#ff9a2e;border-width:4px}
html[data-tt-theme="industrial"] #faceStatus{
  grid-area:face;align-self:end;text-align:center;font-size:13px;font-weight:800;color:var(--tt-accent);
  font-family:var(--tt-font-mono);letter-spacing:1px;
}
html[data-tt-theme="industrial"] .tt-shift{
  grid-area:shift;display:flex;flex-direction:column;gap:8px;
  background:#141820;border:1px solid #2a3140;border-radius:16px;padding:20px 22px;
}
html[data-tt-theme="industrial"] .tt-shift-title{color:var(--tt-accent);font-family:var(--tt-font-mono)}
html[data-tt-theme="industrial"] .tt-shift-time{font-size:20px;color:var(--tt-text);font-family:var(--tt-font-mono)}
html[data-tt-theme="industrial"] .tt-shift-pos,
html[data-tt-theme="industrial"] .tt-shift-dept{font-size:14px;color:var(--tt-muted)}

html[data-tt-theme="industrial"] .tt-quick{
  grid-area:quick;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
html[data-tt-theme="industrial"] .tt-q{
  min-height:88px;border-radius:14px;font-size:16px;letter-spacing:.5px;
  flex-direction:row;gap:12px;border:2px solid #0b0e13;
}
html[data-tt-theme="industrial"] .tt-q i{font-size:26px}
html[data-tt-theme="industrial"] .tt-q-in{background:linear-gradient(160deg,#ffb454,#ff8a1a);color:#1a1208;box-shadow:0 8px 0 #7c430e}
html[data-tt-theme="industrial"] .tt-q-in:hover{transform:translateY(2px);box-shadow:0 6px 0 #7c430e}
html[data-tt-theme="industrial"] .tt-q-out{background:#262d39;color:var(--tt-text);box-shadow:0 8px 0 #101319}
html[data-tt-theme="industrial"] .tt-q-out:hover{transform:translateY(2px);box-shadow:0 6px 0 #101319}
html[data-tt-theme="industrial"] .tt-q-out i{color:var(--tt-success)}
html[data-tt-theme="industrial"] .tt-q-break{background:#262d39;color:var(--tt-text);box-shadow:0 8px 0 #101319}
html[data-tt-theme="industrial"] .tt-q-break:hover{transform:translateY(2px);box-shadow:0 6px 0 #101319}
html[data-tt-theme="industrial"] .tt-q-break i{color:var(--tt-warn)}
html[data-tt-theme="industrial"] .tt-q-pin{background:#262d39;color:var(--tt-text);box-shadow:0 8px 0 #101319}
html[data-tt-theme="industrial"] .tt-q-pin:hover{transform:translateY(2px);box-shadow:0 6px 0 #101319}
html[data-tt-theme="industrial"] .tt-q-pin i{color:#b49bff}
html[data-tt-theme="industrial"] .tt-announce,.tt-footer{display:none}

/* industrial: portrait tablet */
@media (max-width:1024px) and (orientation:portrait){
  html[data-tt-theme="industrial"] .hero-card{
    height:auto;min-height:0;
    grid-template-columns:1fr;grid-template-rows:auto;
    grid-template-areas:"time" "status" "face" "shift" "quick";
    padding:18px;gap:12px;
  }
  html[data-tt-theme="industrial"] .tt-status{grid-area:auto;justify-content:flex-start;margin-top:4px}
  html[data-tt-theme="industrial"] .scan-wrap{width:min(86vw,60vh,600px)}
  html[data-tt-theme="industrial"] .tt-quick{grid-template-columns:1fr 1fr}
}
/* ============================================================
   THEME 06 — EXECUTIVE
   Premium corporate reception. Charcoal and warm gold, refined
   serif-leaning display type, hairline borders and generous
   breathing room. Underscored, quiet and authoritative.
   ============================================================ */
html[data-tt-theme="executive"]{
  --tt-bg:#0e1116;
  --tt-panel:#161a22;
  --tt-panel-2:#12151c;
  --tt-line:rgba(216,184,120,.18);
  --tt-line-strong:#d8b878;
  --tt-text:#f4f1ea;
  --tt-muted:#a5a293;
  --tt-accent:#d8b878;
  --tt-accent-2:#c9a45c;
  --tt-success:#86c9a8;
  --tt-warn:#e0b060;
  --tt-danger:#e08a80;
  --tt-radius:18px;
}
html[data-tt-theme="executive"] .kiosk-root{
  background:
    radial-gradient(circle at 78% 18%,rgba(216,184,120,.08),transparent 40%),
    linear-gradient(155deg,#11141b 0%,#0a0d12 100%);
}
html[data-tt-theme="executive"] .kiosk-shell{padding:clamp(22px,2.8vw,40px) clamp(30px,4vw,58px)}
html[data-tt-theme="executive"] .hero-card{
  width:min(1220px,96vw);height:calc(100dvh - 44px);min-height:560px;
  grid-template-columns:minmax(0,1fr) 360px;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  grid-template-areas:
    "face   time"
    "face   status"
    "face   shift"
    "face   quick";
  gap:22px 44px;padding:34px 40px;border-radius:26px;
  border:1px solid rgba(216,184,120,.14);
  background:linear-gradient(160deg,rgba(22,26,34,.6),rgba(12,15,20,.9));
  box-shadow:0 44px 110px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-tt-theme="executive"] .face-column{grid-area:face;display:grid;place-items:center}
html[data-tt-theme="executive"] .scan-wrap{
  width:min(700px,46vw,62vh);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(216,184,120,.5);
  background:radial-gradient(circle,rgba(216,184,120,.08),rgba(10,13,18,.0) 70%);
  box-shadow:0 0 60px rgba(216,184,120,.15);
}
html[data-tt-theme="executive"] #faceVideo,
html[data-tt-theme="executive"] .camera-placeholder{border-radius:50%}
html[data-tt-theme="executive"] .camera-placeholder{background:radial-gradient(circle at 50% 36%,#252b36,#0e1116 74%);color:#a5a293}
html[data-tt-theme="executive"] .scan-line{background:linear-gradient(90deg,transparent,#d8b878,transparent);box-shadow:0 0 10px rgba(216,184,120,.6)}
html[data-tt-theme="executive"] .scan-corner{border-color:#d8b878}
html[data-tt-theme="executive"] #faceStatus{
  grid-area:face;align-self:end;text-align:center;font-size:13px;letter-spacing:.08em;font-weight:500;color:var(--tt-muted);
}

html[data-tt-theme="executive"] .tt-aside,.tt-side{display:none}
html[data-tt-theme="executive"] .tt-time{
  grid-area:time;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;gap:2px;
  border-bottom:1px solid rgba(216,184,120,.2);padding-bottom:14px;
}
html[data-tt-theme="executive"] .tt-time-num{
  display:flex;align-items:baseline;font-family:'Playfair Display',Georgia,var(--tt-font-display);
  font-weight:500;color:var(--tt-text);font-size:clamp(46px,4.8vw,72px);letter-spacing:-1px;
}
html[data-tt-theme="executive"] .tt-time-colon{color:var(--tt-accent)}
html[data-tt-theme="executive"] .tt-time-ap{font-size:.5em;color:var(--tt-accent);margin-left:8px}
html[data-tt-theme="executive"] .tt-time-date{color:var(--tt-muted);font-size:14px;letter-spacing:.06em}

html[data-tt-theme="executive"] .tt-status{
  grid-area:status;display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;
}
html[data-tt-theme="executive"] .tt-status-chip{background:transparent;border:1px solid rgba(216,184,120,.35);color:#cfc7b4}
html[data-tt-theme="executive"] .tt-status-chip i{color:var(--tt-success)}
html[data-tt-theme="executive"] .tt-status-terminal{border-color:rgba(255,255,255,.1);color:var(--tt-muted)}
html[data-tt-theme="executive"] .tt-settings-btn{width:40px;height:40px;border-radius:12px;border:1px solid rgba(216,184,120,.3);background:transparent;color:var(--tt-accent);font-size:15px}
html[data-tt-theme="executive"] .tt-settings-btn:hover{background:rgba(216,184,120,.1)}
html[data-tt-theme="executive"] .tt-shift{
  grid-area:shift;display:flex;flex-direction:column;gap:8px;
  border:1px solid rgba(216,184,120,.16);border-radius:20px;padding:20px 24px;
  background:rgba(22,26,34,.5);
}
html[data-tt-theme="executive"] .tt-shift-title{color:var(--tt-accent);letter-spacing:.22em}
html[data-tt-theme="executive"] .tt-shift-time{font-size:20px;color:var(--tt-text)}
html[data-tt-theme="executive"] .tt-shift-pos,
html[data-tt-theme="executive"] .tt-shift-dept{font-size:14px;color:var(--tt-muted)}

html[data-tt-theme="executive"] .tt-quick{
  grid-area:quick;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-self:end;
}
html[data-tt-theme="executive"] .tt-q{
  min-height:96px;border-radius:18px;flex-direction:row;gap:12px;font-size:15px;
  background:transparent;border:1px solid rgba(216,184,120,.3);color:var(--tt-text);
}
html[data-tt-theme="executive"] .tt-q:hover{border-color:var(--tt-line-strong);background:rgba(216,184,120,.06)}
html[data-tt-theme="executive"] .tt-q i{font-size:24px;color:var(--tt-accent)}
html[data-tt-theme="executive"] .tt-q-in{background:linear-gradient(160deg,#e5c985,#c9a45c);border-color:transparent;color:#1b1610}
html[data-tt-theme="executive"] .tt-q-in i{color:#1b1610}
html[data-tt-theme="executive"] .tt-q-out i{color:var(--tt-success)}
html[data-tt-theme="executive"] .tt-q-break i{color:var(--tt-warn)}
html[data-tt-theme="executive"] .tt-q-pin i{color:#b49bff}
html[data-tt-theme="executive"] .tt-announce,.tt-footer{display:none}

/* executive: portrait tablet */
@media (max-width:1024px) and (orientation:portrait){
  html[data-tt-theme="executive"] .hero-card{
    height:auto;min-height:0;
    grid-template-columns:1fr;grid-template-rows:auto;
    grid-template-areas:"time" "status" "face" "shift" "quick";
    padding:22px;gap:14px;
  }
  html[data-tt-theme="executive"] .tt-time,.tt-status{align-items:center;justify-content:center;text-align:center}
  html[data-tt-theme="executive"] .scan-wrap{width:min(88vw,62vh,620px)}
}
/* ============================================================
   THEME 07 — COLOR BLOCK
   Bold flat constructs. Saturated color fields separated by
   crisp gutters, oversized numerals and punchy icons. A
   confident, contemporary graphic-design aesthetic.
   ============================================================ */
html[data-tt-theme="colorblock"]{
  --tt-bg:#0e1018;
  --tt-panel:#171a24;
  --tt-panel-2:#1d202b;
  --tt-line:#262a36;
  --tt-line-strong:#ffffff;
  --tt-text:#ffffff;
  --tt-muted:#9aa1b5;
  --tt-accent:#3d7bff;
  --tt-accent-2:#ffd43b;
  --tt-success:#2fd6a8;
  --tt-warn:#ffd43b;
  --tt-danger:#ff5c8a;
  --tt-radius:22px;
}
html[data-tt-theme="colorblock"] .kiosk-root{background:#0e1018}
html[data-tt-theme="colorblock"] .kiosk-shell{padding:clamp(16px,2vw,26px) clamp(22px,2.6vw,36px)}
html[data-tt-theme="colorblock"] .hero-card{
  width:min(1280px,97vw);height:calc(100dvh - 32px);min-height:560px;
  grid-template-columns:minmax(0,1fr) 430px;
  grid-template-rows:auto minmax(auto,1fr) auto;
  grid-template-areas:
    "time   quick"
    "face   quick"
    "status quick";
  gap:18px 26px;padding:26px 28px;border-radius:28px;
  border:1px solid #262a36;background:#151822;
  box-shadow:0 34px 90px rgba(0,0,0,.5);
}
html[data-tt-theme="colorblock"] .tt-time{
  grid-area:time;display:flex;align-items:baseline;justify-content:flex-start;gap:16px;
}
html[data-tt-theme="colorblock"] .tt-time-num{
  display:flex;align-items:baseline;font-family:var(--tt-font-display);
  font-weight:800;color:var(--tt-text);font-size:clamp(52px,5.6vw,88px);letter-spacing:-3px;
}
html[data-tt-theme="colorblock"] .tt-time-colon{color:var(--tt-accent-2)}
html[data-tt-theme="colorblock"] .tt-time-ap{font-size:.42em;color:var(--tt-accent-2);margin-left:6px}
html[data-tt-theme="colorblock"] .tt-time-date{color:var(--tt-muted);font-size:14px}
html[data-tt-theme="colorblock"] .tt-status{
  grid-area:status;display:flex;align-items:center;gap:10px;
}
html[data-tt-theme="colorblock"] .tt-status-chip{background:#1d202b;border:1px solid #2c3140;color:#cdd3e1}
html[data-tt-theme="colorblock"] .tt-status-chip i{color:var(--tt-success)}
html[data-tt-theme="colorblock"] .tt-status-terminal{display:none}
html[data-tt-theme="colorblock"] .tt-settings-btn{width:42px;height:42px;border-radius:14px;border:1px solid #2c3140;background:#1d202b;color:#cdd3e1;font-size:15px}
html[data-tt-theme="colorblock"] .tt-settings-btn:hover{color:#fff;background:#262a36}

html[data-tt-theme="colorblock"] .face-column{grid-area:face;display:grid;place-items:center}
html[data-tt-theme="colorblock"] .scan-wrap{
  width:min(620px,44vw,62vh);aspect-ratio:1;border-radius:24px;
  border:2px solid #fff;background:#0e1018;
  box-shadow:14px 14px 0 rgba(255,255,255,.12);
}
html[data-tt-theme="colorblock"] #faceVideo,
html[data-tt-theme="colorblock"] .camera-placeholder{border-radius:18px}
html[data-tt-theme="colorblock"] .camera-placeholder{background:linear-gradient(150deg,#23263499,#10131b99);color:#fff}
html[data-tt-theme="colorblock"] .scan-corner{border-color:#fff;border-width:5px}
html[data-tt-theme="colorblock"] #faceStatus{
  grid-area:face;align-self:end;text-align:center;font-size:13px;font-weight:700;color:var(--tt-muted);
}

html[data-tt-theme="colorblock"] .tt-quick{
  grid-area:quick;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:0;overflow:hidden;border-radius:24px;
}
html[data-tt-theme="colorblock"] .tt-q{
  border-radius:0;min-height:120px;font-size:17px;flex-direction:row;justify-content:flex-start;gap:14px;padding:0 26px;color:#fff;box-shadow:none;
}
html[data-tt-theme="colorblock"] .tt-q i{font-size:30px}
html[data-tt-theme="colorblock"] .tt-q-in{background:#3d7bff}
html[data-tt-theme="colorblock"] .tt-q-out{background:#2fd6a8;color:#0c241c}
html[data-tt-theme="colorblock"] .tt-q-out i{color:#0c241c}
html[data-tt-theme="colorblock"] .tt-q-break{background:#ffd43b;color:#2a2105}
html[data-tt-theme="colorblock"] .tt-q-break i{color:#2a2105}
html[data-tt-theme="colorblock"] .tt-q-pin{background:#9c6bff}
html[data-tt-theme="colorblock"] .tt-q:hover{filter:brightness(1.12)}
html[data-tt-theme="colorblock"] .tt-shift,
html[data-tt-theme="colorblock"] .tt-announce,
html[data-tt-theme="colorblock"] .tt-side,
html[data-tt-theme="colorblock"] .tt-footer{display:none}

/* colorblock: portrait tablet */
@media (max-width:1024px) and (orientation:portrait){
  html[data-tt-theme="colorblock"] .hero-card{
    height:auto;min-height:0;
    grid-template-columns:1fr;grid-template-rows:auto;
    grid-template-areas:"time" "status" "face" "quick";
    padding:18px;gap:12px;
  }
  html[data-tt-theme="colorblock"] .scan-wrap{width:min(86vw,60vh,600px)}
  html[data-tt-theme="colorblock"] .tt-quick{grid-template-columns:1fr 1fr}
  html[data-tt-theme="colorblock"] .tt-q{min-height:96px}
}
/* ============================================================
   THEME 08 — TABLET OS
   A native tablet operating system. Status bar up top, an
   app-style scanner card in the centre, tidy 2x2 action tiles
   and a dock-like quick row. Familiar, friendly, purposeful.
   ============================================================ */
html[data-tt-theme="tabletos"]{
  --tt-bg:#0c1220;
  --tt-panel:#151d31;
  --tt-panel-2:#10182a;
  --tt-line:#223050;
  --tt-line-strong:#38bdf8;
  --tt-text:#edf3ff;
  --tt-muted:#8ba0c2;
  --tt-accent:#38bdf8;
  --tt-accent-2:#818cf8;
  --tt-success:#34d399;
  --tt-warn:#fbbf24;
  --tt-danger:#f87171;
  --tt-radius:22px;
}
html[data-tt-theme="tabletos"] .kiosk-root{
  background:
    radial-gradient(circle at 22% 14%,rgba(56,189,248,.08),transparent 46%),
    linear-gradient(165deg,#0e1526 0%,#0a0f1b 100%);
}
html[data-tt-theme="tabletos"] .kiosk-shell{padding:clamp(14px,1.8vw,24px) clamp(20px,2.4vw,34px)}
html[data-tt-theme="tabletos"] .hero-card{
  width:min(1180px,96vw);height:calc(100dvh - 28px);min-height:560px;
  grid-template-columns:minmax(0,1fr) 300px;
  grid-template-rows:auto auto minmax(auto,1fr) auto;
  grid-template-areas:
    "time   shift"
    "face   shift"
    "quick  quick"
    "status status";
  gap:14px 22px;padding:22px 24px;border-radius:30px;
  border:1px solid #223050;background:rgba(21,29,49,.7);
  box-shadow:0 34px 90px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
html[data-tt-theme="tabletos"] .tt-time{
  grid-area:time;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
html[data-tt-theme="tabletos"] .tt-time-num{
  display:flex;align-items:baseline;font-family:var(--tt-font-display);
  font-weight:700;color:var(--tt-text);font-size:clamp(34px,3.4vw,48px);letter-spacing:-1px;
}
html[data-tt-theme="tabletos"] .tt-time-colon{color:var(--tt-accent)}
html[data-tt-theme="tabletos"] .tt-time-ap{font-size:.5em;color:var(--tt-accent);margin-left:4px}
html[data-tt-theme="tabletos"] .tt-time-date{color:var(--tt-muted);font-size:14px}
html[data-tt-theme="tabletos"] .tt-status{grid-area:status;display:flex;align-items:center;justify-content:flex-end;gap:8px}
html[data-tt-theme="tabletos"] .tt-status-chip{background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.35);color:#cfe8ff}
html[data-tt-theme="tabletos"] .tt-status-chip i{color:var(--tt-success)}
html[data-tt-theme="tabletos"] .tt-status-terminal{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:var(--tt-muted)}
html[data-tt-theme="tabletos"] .tt-settings-btn{width:38px;height:38px;border-radius:50%;border:1px solid #223050;background:#151d31;color:var(--tt-muted);font-size:14px}
html[data-tt-theme="tabletos"] .tt-settings-btn:hover{color:#fff;background:#1d2842}

html[data-tt-theme="tabletos"] .face-column{grid-area:face;display:grid;place-items:center}
html[data-tt-theme="tabletos"] .scan-wrap{
  width:min(420px,34vw,46vh);aspect-ratio:1;border-radius:26px;
  border:1px solid #2a3a5c;background:#10182a;
  box-shadow:0 24px 60px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-tt-theme="tabletos"] #faceVideo,
html[data-tt-theme="tabletos"] .camera-placeholder{border-radius:20px}
html[data-tt-theme="tabletos"] .camera-placeholder{background:linear-gradient(150deg,#1b2740,#10182a);color:#8ba0c2}
html[data-tt-theme="tabletos"] .scan-corner{border-color:#38bdf8;border-width:4px;border-radius:0}
html[data-tt-theme="tabletos"] #faceStatus{
  grid-area:face;align-self:end;text-align:center;font-size:13px;font-weight:600;color:var(--tt-muted);
}

html[data-tt-theme="tabletos"] .tt-shift{
  grid-area:shift;display:flex;flex-direction:column;gap:8px;
  background:#151d31;border:1px solid #223050;border-radius:20px;padding:18px 20px;
}
html[data-tt-theme="tabletos"] .tt-shift-title{color:var(--tt-accent-2)}
html[data-tt-theme="tabletos"] .tt-shift-time{font-size:18px;color:var(--tt-text)}
html[data-tt-theme="tabletos"] .tt-shift-pos,
html[data-tt-theme="tabletos"] .tt-shift-dept{font-size:14px;color:var(--tt-muted)}

html[data-tt-theme="tabletos"] .tt-quick{
  grid-area:quick;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
html[data-tt-theme="tabletos"] .tt-q{
  min-height:78px;border-radius:20px;gap:8px;flex-direction:row;justify-content:center;
  background:rgba(255,255,255,.04);border:1px solid #223050;color:#dce7fa;box-shadow:0 10px 26px rgba(0,0,0,.28);
}
html[data-tt-theme="tabletos"] .tt-q i{font-size:22px;color:var(--tt-accent)}
html[data-tt-theme="tabletos"] .tt-q:hover{background:rgba(255,255,255,.08);transform:translateY(-2px)}
html[data-tt-theme="tabletos"] .tt-q-in{background:linear-gradient(160deg,#38bdf8,#2f6bff);border-color:transparent;color:#fff}
html[data-tt-theme="tabletos"] .tt-q-in i{color:#fff}
html[data-tt-theme="tabletos"] .tt-q-out i{color:var(--tt-success)}
html[data-tt-theme="tabletos"] .tt-q-break i{color:var(--tt-warn)}
html[data-tt-theme="tabletos"] .tt-q-pin i{color:var(--tt-accent-2)}
html[data-tt-theme="tabletos"] .tt-announce,.tt-footer,.tt-side{display:none}

/* tabletos: portrait tablet */
@media (max-width:1024px) and (orientation:portrait){
  html[data-tt-theme="tabletos"] .hero-card{
    height:auto;min-height:0;
    grid-template-columns:1fr;grid-template-rows:auto;
    grid-template-areas:"status" "time" "shift" "face" "quick";
    padding:18px;gap:12px;
  }
  html[data-tt-theme="tabletos"] .tt-time{justify-content:flex-start}
  html[data-tt-theme="tabletos"] .tt-status{grid-area:status;justify-content:flex-start}
  html[data-tt-theme="tabletos"] .scan-wrap{width:min(86vw,60vh,600px)}
  html[data-tt-theme="tabletos"] .tt-quick{grid-template-columns:1fr 1fr}
}
/* ============================================================
   THEME 09 — FACE FIRST
   Camera-dominant recognition. The face view takes the entire
   hero; a slim bottom dock holds the essentials. Perfect for
   self-service kiosks where the face is the whole experience.
   ============================================================ */
html[data-tt-theme="facefirst"]{
  --tt-bg:#04060b;
  --tt-panel:rgba(16,24,42,.78);
  --tt-panel-2:rgba(10,16,30,.8);
  --tt-line:rgba(120,160,255,.18);
  --tt-line-strong:rgba(120,180,255,.5);
  --tt-text:#f0f4ff;
  --tt-muted:#8ba1c8;
  --tt-accent:#4f8cff;
  --tt-accent-2:#38c6ff;
  --tt-success:#2fe0b2;
  --tt-warn:#ffc24a;
  --tt-danger:#ff6b81;
  --tt-radius:24px;
}
html[data-tt-theme="facefirst"] .kiosk-root{
  background:radial-gradient(circle at 50% 42%,#0a1226,#04060b 72%);
}
html[data-tt-theme="facefirst"] .kiosk-shell{padding:clamp(12px,1.4vw,20px) clamp(18px,2vw,28px)}
html[data-tt-theme="facefirst"] .hero-card{
  width:100%;height:calc(100dvh - 26px);min-height:540px;
  grid-template-columns:minmax(0,1fr) 300px;
  grid-template-rows:minmax(auto,1fr) auto;
  grid-template-areas:
    "face   side"
    "quick  side";
  gap:12px 20px;padding:0;border-radius:30px;
  border:1px solid rgba(120,160,255,.15);
  background:rgba(8,13,26,.6);
  box-shadow:0 34px 90px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-tt-theme="facefirst"] .face-column{
  grid-area:face;display:grid;place-items:center;
}
html[data-tt-theme="facefirst"] .scan-wrap{
  width:min(680px,50vw,66vh);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(120,180,255,.6);
  background:radial-gradient(circle,rgba(79,140,255,.16),transparent 68%);
  box-shadow:0 0 90px rgba(79,140,255,.3),inset 0 0 60px rgba(79,140,255,.1);
}
html[data-tt-theme="facefirst"] #faceVideo,
html[data-tt-theme="facefirst"] .camera-placeholder{border-radius:50%}
html[data-tt-theme="facefirst"] .camera-placeholder{background:radial-gradient(circle at 50% 34%,#14263f,#04060b 76%);color:#8ba1c8}
html[data-tt-theme="facefirst"] .scan-corner{border-color:#38c6ff}
html[data-tt-theme="facefirst"] .scan-corner.tl,.scan-corner.bl,.scan-corner.tr,.scan-corner.br{border-width:5px}
html[data-tt-theme="facefirst"] #faceStatus{
  grid-area:face;align-self:end;text-align:center;font-size:13px;font-weight:600;color:var(--tt-muted);padding-bottom:16px;
}

html[data-tt-theme="facefirst"] .tt-side{
  grid-area:side;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:16px 8px;
}
html[data-tt-theme="facefirst"] .tt-brand img{max-width:130px;height:auto;margin-bottom:6px}
html[data-tt-theme="facefirst"] .tt-nav-links{display:flex;flex-direction:column;gap:8px}
html[data-tt-theme="facefirst"] .tt-nav-btn{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  background:rgba(120,160,255,.05);border:1px solid rgba(120,160,255,.12);
  border-radius:16px;color:var(--tt-muted);font-size:14px;font-weight:600;
}
html[data-tt-theme="facefirst"] .tt-nav-btn:hover{background:rgba(120,160,255,.1);color:var(--tt-text)}
html[data-tt-theme="facefirst"] .tt-nav-btn.active{background:rgba(79,140,255,.2);border-color:rgba(79,140,255,.5);color:#fff}
html[data-tt-theme="facefirst"] .tt-nav-btn i{width:22px;text-align:center;font-size:16px}
html[data-tt-theme="facefirst"] .tt-side-foot{margin-top:auto}
html[data-tt-theme="facefirst"] .tt-help-btn{
  display:flex;align-items:center;gap:10px;width:100%;padding:13px 16px;
  background:transparent;border:1px dashed rgba(120,160,255,.35);border-radius:16px;
  color:var(--tt-muted);font-size:13px;font-weight:600;
}
html[data-tt-theme="facefirst"] .tt-help-btn i{color:var(--tt-accent-2)}

html[data-tt-theme="facefirst"] .tt-time{display:none}
html[data-tt-theme="facefirst"] .tt-status{display:none}

html[data-tt-theme="facefirst"] .tt-quick{
  grid-area:quick;display:flex;gap:12px;padding:0 6px 8px;
  gap:12px;align-items:center;gap:12px;
}
html[data-tt-theme="facefirst"] .tt-q{
  flex:1;min-height:74px;border-radius:20px;flex-direction:row;justify-content:center;gap:12px;font-size:16px;
  background:rgba(255,255,255,.04);border:1px solid rgba(120,160,255,.14);color:var(--tt-text);
}
html[data-tt-theme="facefirst"] .tt-q:hover{background:rgba(255,255,255,.08)}
html[data-tt-theme="facefirst"] .tt-q-in{background:linear-gradient(160deg,#4f8cff,#2f6bff);border-color:transparent;color:#fff}
html[data-tt-theme="facefirst"] .tt-q-out i{color:var(--tt-success)}
html[data-tt-theme="facefirst"] .tt-q-break i{color:var(--tt-warn)}
html[data-tt-theme="facefirst"] .tt-q-pin i{color:#b49bff}
html[data-tt-theme="facefirst"] .tt-shift{display:none}
html[data-tt-theme="facefirst"] .tt-announce,.tt-footer{display:none}

/* facefirst: portrait tablet */
@media (max-width:1024px) and (orientation:portrait){
  html[data-tt-theme="facefirst"] .hero-card{
    height:auto;min-height:0;
    grid-template-columns:1fr;grid-template-rows:auto;
    grid-template-areas:"face" "quick" "side";
    padding:16px;gap:12px;
  }
  html[data-tt-theme="facefirst"] .scan-wrap{width:min(86vw,60vh,600px)}
  html[data-tt-theme="facefirst"] .tt-quick{flex-wrap:wrap}
  html[data-tt-theme="facefirst"] .tt-q{flex:1 1 42%}
  html[data-tt-theme="facefirst"] .tt-side{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px;padding:0}
  html[data-tt-theme="facefirst"] .tt-nav-links,.tt-side-foot{flex-direction:row;flex-wrap:wrap;justify-content:center}
  html[data-tt-theme="facefirst"] .tt-brand{display:none}
}
/* ============================================================
   THEME 10 — COMMAND CENTER
   Information-rich operations grid: a technocratic cockpit
   with coordinated panels, telemetry chips and monospace
   accents. For control rooms and 24/7 operation floors.
   ============================================================ */
html[data-tt-theme="command"]{
  --tt-bg:#080b12;
  --tt-panel:#10141f;
  --tt-panel-2:#0c1018;
  --tt-line:#1f2836;
  --tt-line-strong:#22d3ee;
  --tt-text:#e9eef7;
  --tt-muted:#8b98ad;
  --tt-accent:#22d3ee;
  --tt-accent-2:#a78bfa;
  --tt-success:#34d399;
  --tt-warn:#fbbf24;
  --tt-danger:#f87171;
  --tt-radius:16px;
}
html[data-tt-theme="command"] .kiosk-root{
  background:
    radial-gradient(circle at 86% 12%,rgba(34,211,238,.10),transparent 42%),
    linear-gradient(160deg,#0b0f18 0%,#070a10 100%);
}
html[data-tt-theme="command"] .kiosk-shell{padding:clamp(16px,2vw,28px) clamp(22px,2.6vw,36px)}
html[data-tt-theme="command"] .hero-card{
  width:min(1240px,97vw);height:calc(100dvh - 32px);min-height:560px;
  grid-template-columns:minmax(0,1fr) 360px;
  grid-template-rows:auto minmax(auto,1fr) auto auto auto;
  grid-template-areas:
    "time    aside"
    "face    aside"
    "quick   aside"
    "announce aside"
    "status  aside";
  gap:14px 22px;padding:22px 24px;border-radius:24px;
  border:1px solid #1f2836;
  background:linear-gradient(170deg,rgba(16,20,31,.85),rgba(10,14,22,.95));
  box-shadow:0 34px 90px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-tt-theme="command"] .tt-time{
  grid-area:time;display:flex;align-items:baseline;justify-content:flex-start;gap:14px;
}
html[data-tt-theme="command"] .tt-time-num{
  display:flex;align-items:baseline;font-family:var(--tt-font-mono);
  font-weight:700;color:var(--tt-text);font-size:clamp(40px,4.2vw,64px);letter-spacing:-1px;
}
html[data-tt-theme="command"] .tt-time-colon{color:var(--tt-accent)}
html[data-tt-theme="command"] .tt-time-ap{font-size:.5em;color:var(--tt-accent);margin-left:4px}
html[data-tt-theme="command"] .tt-time-date{color:var(--tt-muted);font-size:13px;font-family:var(--tt-font-mono)}
html[data-tt-theme="command"] .tt-status{
  grid-area:status;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;
}
html[data-tt-theme="command"] .tt-status-chip{background:#10141f;border:1px solid #1f2836;color:#aeb9cc;font-family:var(--tt-font-mono);font-size:11.5px}
html[data-tt-theme="command"] .tt-status-chip i{color:var(--tt-success)}
html[data-tt-theme="command"] .tt-status-terminal{color:var(--tt-muted)}
html[data-tt-theme="command"] .tt-settings-btn{width:40px;height:40px;border-radius:12px;border:1px solid #1f2836;background:#10141f;color:var(--tt-muted);font-size:15px}
html[data-tt-theme="command"] .tt-settings-btn:hover{color:#fff;border-color:#22d3ee}

html[data-tt-theme="command"] .face-column{grid-area:face;display:grid;place-items:center}
html[data-tt-theme="command"] .scan-wrap{
  width:min(500px,36vw,56vh);aspect-ratio:1;border-radius:18px;
  border:1px solid #2a3649;background:#0c1018;
  box-shadow:0 0 0 1px rgba(34,211,238,.2),inset 0 0 44px rgba(34,211,238,.06);
}
html[data-tt-theme="command"] #faceVideo,
html[data-tt-theme="command"] .camera-placeholder{border-radius:12px}
html[data-tt-theme="command"] .camera-placeholder{background:linear-gradient(150deg,#1a2233,#0c1018);color:#8b98ad}
html[data-tt-theme="command"] .scan-corner{border-color:#22d3ee;border-width:3px}
html[data-tt-theme="command"] #faceStatus{
  grid-area:face;align-self:end;text-align:center;font-size:12.5px;font-family:var(--tt-font-mono);color:var(--tt-muted);
}

html[data-tt-theme="command"] .tt-side{display:none}
html[data-tt-theme="command"] .tt-aside,.tt-shift{
  grid-area:aside;display:flex;flex-direction:column;gap:10px;
}
html[data-tt-theme="command"] .tt-shift{
  background:#10141f;border:1px solid #1f2836;border-radius:18px;padding:20px 22px;
}
html[data-tt-theme="command"] .tt-shift-title{color:var(--tt-accent);font-family:var(--tt-font-mono)}
html[data-tt-theme="command"] .tt-shift-time{font-size:19px;color:var(--tt-text)}
html[data-tt-theme="command"] .tt-shift-pos,
html[data-tt-theme="command"] .tt-shift-dept{font-size:14px;color:var(--tt-muted)}
html[data-tt-theme="command"] .tt-quick{
  grid-area:quick;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
}
html[data-tt-theme="command"] .tt-q{
  min-height:74px;border-radius:14px;gap:8px;flex-direction:row;justify-content:flex-start;
  padding:0 16px;background:rgba(255,255,255,.03);border:1px solid #1f2836;color:#d6deeb;
}
html[data-tt-theme="command"] .tt-q i{font-size:20px;color:var(--tt-accent);width:22px;text-align:center}
html[data-tt-theme="command"] .tt-q:hover{background:rgba(34,211,238,.08);border-color:rgba(34,211,238,.4)}
html[data-tt-theme="command"] .tt-q-in{background:linear-gradient(160deg,#0891b2,#155e75);border-color:transparent;color:#fff}
html[data-tt-theme="command"] .tt-q-in i{color:#fff}
html[data-tt-theme="command"] .tt-q-out i{color:var(--tt-success)}
html[data-tt-theme="command"] .tt-q-break i{color:var(--tt-warn)}
html[data-tt-theme="command"] .tt-q-pin i{color:var(--tt-accent-2)}

html[data-tt-theme="command"] .tt-announce{
  grid-area:announce;display:flex;flex-direction:column;gap:8px;
  background:#10141f;border:1px solid #1f2836;border-radius:16px;padding:14px 18px;
}
html[data-tt-theme="command"] .tt-announce-title{color:var(--tt-accent);font-family:var(--tt-font-mono)}
html[data-tt-theme="command"] .tt-announce-list{flex-direction:row;flex-wrap:wrap;gap:6px}
html[data-tt-theme="command"] .tt-announce-list li{
  font-size:11.5px;color:#aeb9cc;background:rgba(255,255,255,.03);
  border:1px solid #1f2836;border-radius:8px;padding:6px 10px;font-family:var(--tt-font-mono);
}
html[data-tt-theme="command"] .tt-footer{display:none}

/* command: portrait tablet */
@media (max-width:1024px) and (orientation:portrait){
  html[data-tt-theme="command"] .hero-card{
    height:auto;min-height:0;
    grid-template-columns:1fr;grid-template-rows:auto;
    grid-template-areas:"time" "status" "face" "shift" "quick" "announce";
    padding:18px;gap:12px;
  }
  html[data-tt-theme="command"] .tt-status{grid-area:auto;justify-content:flex-start;margin-top:4px}
  html[data-tt-theme="command"] .scan-wrap{width:min(86vw,60vh,600px)}
  html[data-tt-theme="command"] .tt-quick{grid-template-columns:1fr 1fr}
}

/* ============================================================
   ACCESSIBILITY + MOTION PREFERENCES
   ============================================================ */
html[data-tt-theme] .tt-q:focus-visible,
html[data-tt-theme] .tt-nav-btn:focus-visible,
html[data-tt-theme] .tt-help-btn:focus-visible,
html[data-tt-theme] .tt-settings-btn:focus-visible,
html[data-tt-theme] .tt-pick:focus-visible,
html[data-tt-theme] .tt-picker-close:focus-visible{
  outline:3px solid #22c8ff;outline-offset:2px;
}
/* Portrait safety: content taller than the screen scrolls instead
   of clipping, regardless of which design is active. */
@media (max-width:1024px) and (orientation:portrait){
  html[data-tt-theme] .kiosk-root{overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important}
  html[data-tt-theme] .kiosk-shell{height:auto!important;min-height:100dvh!important}
}
@media (prefers-reduced-motion:reduce){
  html[data-tt-theme] *{animation:none!important;transition:none!important}
  html[data-tt-theme] .scan-line,
  html[data-tt-theme] .scan-glow{display:none!important}
}

/* ============================================================
   FIT-TO-SCREEN TERMINAL CARD
   ------------------------------------------------------------
   Applied after every theme block so it wins regardless of which
   design is active. Replaces each theme's fixed width cap
   (min(1220px,96vw) etc.) and rigid min-height with real viewport
   fitting:

     * the hero-card stretches to the FULL workspace (viewport
       minus the theme's own kiosk-shell padding) instead of
       floating in the middle with empty side bands;
     * on short screens the card fills the available height and
       scrolls internally rather than clipping its bottom edge.

   Every theme still supplies its own internal grid, typography,
   colours and layout — this only governs the card's outer box.
   ============================================================ */
html[data-tt-theme] .workspace{align-items:stretch}
html[data-tt-theme] .hero-card{
  width:auto;
  max-width:100%;
  height:100%;
  max-height:100%;
  min-height:0;
  margin:0;
  /* Capture cards are sized by the tiers below so content ALWAYS
     fits the card — it never scrolls and never clips. */
  overflow:hidden;
}

/* ============================================================
   PERFECT-FIT SIZING — every capture card fits the screen with
   NO scrolling and NO clipping.
   ------------------------------------------------------------
   Runs after all theme/media blocks. On screens where the full-size
   layout would not fit, these tiers shrink the capture circle and
   the surrounding chrome so the whole terminal resolves flush inside
   the kiosk shell. Targets:
     * short landscape kiosk monitors   (≤1000px tall)
     * very short landscape monitors    (≤640px tall)
     * phones + tablets in portrait     (stacked layout)
   ============================================================ */

/* ── Short landscape kiosk monitors ───────────────────────── */
@media (max-height:1000px) and (orientation:landscape){
  html[data-tt-theme] .hero-card{gap:12px!important}
  html[data-tt-theme] .tt-time-num{font-size:clamp(34px,4.4vw,56px)!important}
  html[data-tt-theme] .tt-q{min-height:72px!important}
  html[data-tt-theme] .tt-quick{gap:10px!important}
  html[data-tt-theme] .tt-shift{padding:12px 16px!important;gap:6px!important}
  /* Biometric two-card rail: compact Clock & Status card */
  html[data-tt-theme="biometric"] .tt-time{padding:12px 16px 60px!important}
  html[data-tt-theme="biometric"] .scan-wrap{width:min(320px,36vw,40vh)}
  html[data-tt-theme="minimal"] .scan-wrap{width:min(320px,36vw,40vh)}
  html[data-tt-theme="orbit"] .scan-wrap{width:min(280px,32vw,38vh)}
  html[data-tt-theme="glass"] .scan-wrap{width:min(300px,34vw,40vh)}
  html[data-tt-theme="industrial"] .scan-wrap{width:min(280px,30vw,40vh)}
  html[data-tt-theme="executive"] .scan-wrap{width:min(340px,40vw,44vh)}
  html[data-tt-theme="colorblock"] .scan-wrap{width:min(340px,40vw,44vh)}
  html[data-tt-theme="tabletos"] .scan-wrap{width:min(260px,32vw,38vh)}
  html[data-tt-theme="facefirst"] .scan-wrap{width:min(340px,42vw,46vh)}
  html[data-tt-theme="command"] .scan-wrap{width:min(280px,32vw,38vh)}
}
@media (max-height:640px) and (orientation:landscape){
  html[data-tt-theme] .hero-card{gap:8px!important}
  html[data-tt-theme] .tt-q{min-height:60px!important}
  html[data-tt-theme] .tt-time-num{font-size:clamp(26px,3.6vw,40px)!important}
  html[data-tt-theme] .tt-shift{padding:10px 12px!important}
  html[data-tt-theme="biometric"] .tt-time{padding:10px 14px 52px!important}
  html[data-tt-theme] .scan-wrap{width:min(200px,30vw,30vh)!important}
}

/* ── Portrait — phones + tablets (stacked layout fits flush) ── */
@media (orientation:portrait){
  html[data-tt-theme] .hero-card{gap:10px!important}
  html[data-tt-theme] .tt-time-num{font-size:clamp(26px,3.6vh,44px)!important}
  html[data-tt-theme] .tt-q{min-height:64px!important}
  html[data-tt-theme] .tt-quick{gap:8px!important}
  html[data-tt-theme] .tt-shift{padding:10px 12px!important;gap:4px!important}
  html[data-tt-theme] .tt-status-chip{font-size:11px!important;padding:5px 9px!important}
  html[data-tt-theme="biometric"] .scan-wrap,
  html[data-tt-theme="minimal"] .scan-wrap,
  html[data-tt-theme="glass"] .scan-wrap,
  html[data-tt-theme="industrial"] .scan-wrap,
  html[data-tt-theme="colorblock"] .scan-wrap,
  html[data-tt-theme="tabletos"] .scan-wrap,
  html[data-tt-theme="command"] .scan-wrap{width:min(72vw,42vh,440px)}
  html[data-tt-theme="orbit"] .scan-wrap{width:min(64vw,38vh,400px)}
  html[data-tt-theme="executive"] .scan-wrap{width:min(76vw,46vh,500px)}
  html[data-tt-theme="facefirst"] .scan-wrap{width:min(76vw,46vh,500px)}
}
@media (orientation:portrait) and (max-height:780px){
  /* On short portrait screens the secondary shift panel steps aside
     so the camera + clock-in essentials fit with zero scrolling. */
  html[data-tt-theme] .tt-shift{display:none!important}
}

/* ── Ultra-short safety net (restores scroll only where no
   fit is physically possible, e.g. 480px-tall windows/devices) ── */
@media (max-height:540px){
  html[data-tt-theme] .hero-card{height:auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important}
}
/* ============================================================
   THEME 11 — FUTURETRACK DARK
   Fixed 1536×1024 landscape tablet template. Deep navy/black
   business terminal: tablet bezel, left rail, centered hero,
   right status/time/quick-actions rail, lower shift card.
   Reference-driven. This template does NOT stack on portrait —
   the whole stage scales proportionally to fit instead.
   ============================================================ */
/* Shared shift-card wrappers stay invisible for every OTHER theme */
html[data-tt-theme] .tt-shift-item{display:contents}
html[data-tt-theme] .tt-shift-ico,html[data-tt-theme] .tt-shift-label{display:none}
html[data-tt-theme] .tt-hero{display:none}

html[data-tt-theme="futuretrack-dark"]{
  --tt-font-display:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --tt-font-body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --tt-bg:#020914;
  --tt-sidebar:#030b18;
  --tt-panel:#071426;
  --tt-panel-dark:#061120;
  --tt-border:#29415f;
  --tt-divider:#17263a;
  --tt-blue:#078cff;
  --tt-blue-bright:#00a4ff;
  --tt-blue-deep:#0753e5;
  --tt-green:#00e5a0;
  --tt-white:#f7f8fa;
  --tt-text-2:#c3c7d0;
  --tt-muted:#9ca9bb;
  --tt-radius:18px;
}
.tt-pick[data-theme="futuretrack-dark"] .tt-pick-swatch{background:linear-gradient(165deg,#08203a,#01060f 70%);color:#00a4ff}

/* stage: fills the viewport, centers the fixed tablet */
html[data-tt-theme="futuretrack-dark"] .kiosk-root{
  background:#05070b;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
/* tablet shell: 1536×1024 fixed canvas, black bezel, thin silver edge,
   very large outer corners, inset display */
html[data-tt-theme="futuretrack-dark"] .kiosk-shell{
  position:relative;z-index:2;flex:none;
  width:1536px;height:1024px;
  padding:30px 34px;
  display:flex;flex-direction:column;
  background:linear-gradient(158deg,#11151c 0%,#000204 46%,#0a0d13 100%);
  border-radius:82px;
  box-shadow:
    0 0 0 3px #aeb6c2,
    0 0 0 5px #3c4046,
    0 70px 140px rgba(0,0,0,.6),
    inset 0 0 0 2px rgba(255,255,255,.06);
  transform:scale(var(--tt-scale,1));
  transform-origin:center center;
  will-change:transform;
}
html[data-tt-theme="futuretrack-dark"] .kiosk-header{min-height:0;height:0;overflow:hidden}

/* inset screen/display area */
html[data-tt-theme="futuretrack-dark"] .workspace{
  flex:1 1 auto;min-height:0;
  width:100%;height:100%;padding:0;margin:0;
  align-items:stretch;justify-content:stretch;
  background:
    radial-gradient(1100px 700px at 76% -8%,rgba(7,140,255,.09),transparent 58%),
    radial-gradient(900px 620px at -8% 112%,rgba(0,229,160,.045),transparent 55%),
    var(--tt-bg);
  border-radius:54px;
  box-shadow:inset 0 0 0 1px rgba(41,65,95,.4),inset 0 0 110px rgba(0,26,70,.4);
  overflow:hidden;
}
html[data-tt-theme="futuretrack-dark"] .workspace{display:flex;flex-direction:column}

/* hero-card = the app layout grid inside the screen */
html[data-tt-theme="futuretrack-dark"] .hero-card{
  flex:1 1 auto;min-height:0;
  width:100%;height:100%;margin:0;padding:0;
  display:grid;
  grid-template-columns:245px minmax(0,1fr) 360px;
  grid-template-rows:auto auto 1fr auto auto auto;
  grid-template-areas:
    "side main   status"
    "side main   time"
    "side main   quick"
    "side main   announce"
    "side shift  shift"
    "side foot   foot";
  gap:0;
  border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;
  overflow:hidden;
}

/* ── Left rail ─────────────────────────────────────────────── */
html[data-tt-theme="futuretrack-dark"] .tt-side{
  grid-area:side;
  display:flex;flex-direction:column;gap:8px;
  background:linear-gradient(180deg,var(--tt-sidebar) 0%,#02070f 100%);
  border-right:1px solid var(--tt-divider);
  padding:0;min-height:0;
}
html[data-tt-theme="futuretrack-dark"] .tt-brand{display:none}
html[data-tt-theme="futuretrack-dark"] .tt-nav-links{
  display:flex;flex-direction:column;gap:4px;
  padding:132px 22px 0;
}
html[data-tt-theme="futuretrack-dark"] .tt-nav-btn{
  display:flex;align-items:center;gap:14px;width:100%;
  padding:15px 16px;margin:0;
  border-radius:12px;border:1px solid transparent;
  background:transparent;color:var(--tt-text-2);
  font-size:15px;font-weight:600;text-align:left;
  border-bottom:1px solid rgba(23,38,58,.55);
}
html[data-tt-theme="futuretrack-dark"] .tt-nav-btn i{width:22px;text-align:center;font-size:16px;color:#5d7392}
html[data-tt-theme="futuretrack-dark"] .tt-nav-btn span{flex:1}
html[data-tt-theme="futuretrack-dark"] .tt-nav-btn:hover{color:#fff;background:rgba(7,140,255,.06)}
html[data-tt-theme="futuretrack-dark"] .tt-nav-btn.active{
  background:linear-gradient(145deg,rgba(8,32,64,.92),rgba(3,12,26,.92));
  border:1px solid rgba(0,164,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 18px rgba(0,128,255,.16);
  color:#fff;
}
html[data-tt-theme="futuretrack-dark"] .tt-nav-btn.active i{color:var(--tt-blue-bright)}
/* Need Help? card (bottom-left) */
html[data-tt-theme="futuretrack-dark"] .tt-side-foot{margin-top:auto;padding:0 22px 26px}
html[data-tt-theme="futuretrack-dark"] .tt-help-btn{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:12px;row-gap:2px;align-items:center;
  width:100%;padding:13px 14px;border-radius:12px;
  background:transparent;border:1px solid rgba(41,65,95,.45);
  color:#e8ecf2;text-align:left;
}
html[data-tt-theme="futuretrack-dark"] .tt-help-btn i{grid-area:1/1/3/2;font-size:19px;color:var(--tt-blue)}
html[data-tt-theme="futuretrack-dark"] .tt-help-btn span{grid-area:1/2;font-size:14px;font-weight:600;color:#e8ecf2}
html[data-tt-theme="futuretrack-dark"] .tt-help-btn::after{grid-area:2/2;content:"Tap for assistance";font-size:11px;color:var(--tt-muted)}

/* ── Main hero (center, keeps the area below blank) ────────── */
html[data-tt-theme="futuretrack-dark"] .tt-hero{
  grid-area:main;position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;padding:236px 60px 0;min-width:0;
}
html[data-tt-theme="futuretrack-dark"] .tt-hero-eyebrow{
  margin:0;font-size:15px;font-weight:700;letter-spacing:5px;color:var(--tt-blue);
}
html[data-tt-theme="futuretrack-dark"] .tt-hero-title{
  margin:16px 0 0;font-family:var(--tt-font-display);font-weight:700;
  font-size:46px;letter-spacing:-1px;line-height:1.08;color:var(--tt-white);
}
html[data-tt-theme="futuretrack-dark"] .tt-hero-sub{
  margin:14px 0 0;font-size:17px;color:var(--tt-text-2);
}

/* ── Status + clock (upper-right) ──────────────────────────── */
html[data-tt-theme="futuretrack-dark"] .tt-status{
  grid-area:status;display:flex;align-items:center;justify-content:flex-end;gap:4px;
  padding:44px 44px 0 0;
}
html[data-tt-theme="futuretrack-dark"] .tt-status-chip{
  display:inline-flex;align-items:center;gap:7px;
  background:transparent;border:0;border-radius:0;
  color:var(--tt-text-2);font-size:12.5px;font-weight:600;letter-spacing:1.6px;line-height:1;
  padding:3px 0;text-transform:uppercase;
}
html[data-tt-theme="futuretrack-dark"] .tt-status-online{color:#eef2f7}
html[data-tt-theme="futuretrack-dark"] .tt-status-online i{color:var(--tt-green);font-size:13px}
html[data-tt-theme="futuretrack-dark"] .tt-status-online i::after{
  content:'';display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-left:7px;vertical-align:2px;background:var(--tt-green);
  box-shadow:0 0 9px rgba(0,229,160,.85);
}
html[data-tt-theme="futuretrack-dark"] .tt-status-terminal{
  color:#e8ecf2;padding-left:14px;margin-left:4px;
  border-left:1px solid var(--tt-divider);letter-spacing:1.4px;
}
html[data-tt-theme="futuretrack-dark"] .tt-settings-btn{
  width:34px;height:34px;margin-left:12px;border-radius:10px;
  background:transparent;border:1px solid rgba(41,65,95,.6);color:#7d94b0;font-size:14px;
  display:grid;place-items:center;
}
html[data-tt-theme="futuretrack-dark"] .tt-settings-btn:hover{color:#fff;border-color:var(--tt-blue);background:rgba(7,140,255,.08)}
html[data-tt-theme="futuretrack-dark"] .tt-time{
  grid-area:time;display:flex;flex-direction:column;align-items:flex-end;gap:3px;
  padding:10px 42px 0 0;
}
html[data-tt-theme="futuretrack-dark"] .tt-time-num{
  display:flex;align-items:baseline;font-family:var(--tt-font-display);font-weight:700;
  font-size:46px;letter-spacing:-1.5px;line-height:1;color:var(--tt-white);
}
html[data-tt-theme="futuretrack-dark"] .tt-time-colon{color:var(--tt-white)}
html[data-tt-theme="futuretrack-dark"] .tt-time-ap{font-size:.42em;color:var(--tt-blue-bright);font-weight:600;margin-left:7px}
html[data-tt-theme="futuretrack-dark"] .tt-time-date{font-size:14px;letter-spacing:.4px;color:var(--tt-muted)}

/* ── Quick Actions panel (right rail) ──────────────────────── */
html[data-tt-theme="futuretrack-dark"] .tt-quick{
  grid-area:quick;display:grid;align-self:start;justify-self:stretch;
  grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr 1fr;gap:12px;
  margin:0 42px 0 0;
  padding:20px 20px 22px;
  background:linear-gradient(165deg,rgba(10,26,48,.96),rgba(4,13,27,.96));
  border:1px solid rgba(58,87,120,.55);
  border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 14px 34px rgba(0,0,0,.28);
}
html[data-tt-theme="futuretrack-dark"] .tt-quick::before{
  content:'QUICK ACTIONS';
  grid-column:1 / -1;align-self:center;padding:2px 2px 4px;
  font-family:var(--tt-font-display);font-size:11px;font-weight:700;letter-spacing:2.8px;color:var(--tt-text-2);
}
html[data-tt-theme="futuretrack-dark"] .tt-q{
  display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;
  min-height:96px;padding:0 16px;border-radius:13px;
  background:linear-gradient(145deg,rgba(10,28,52,.98),rgba(4,15,29,.98));
  border:1px solid rgba(58,87,120,.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 12px 30px rgba(0,0,0,.18);
  color:#e8ecf2;
}
html[data-tt-theme="futuretrack-dark"] .tt-q i{font-size:20px;color:#6d8cb0;width:22px;text-align:center}
html[data-tt-theme="futuretrack-dark"] .tt-q span{font-size:13px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#e8ecf2;line-height:1.05}
html[data-tt-theme="futuretrack-dark"] .tt-q:hover{border-color:rgba(0,164,255,.6)}
html[data-tt-theme="futuretrack-dark"] .tt-q-in{
  background:linear-gradient(145deg,#119cff 0%,#0879fa 45%,#064bdc 100%);
  border:1px solid #30b7ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 18px rgba(0,128,255,.16);
}
html[data-tt-theme="futuretrack-dark"] .tt-q-in span,html[data-tt-theme="futuretrack-dark"] .tt-q-in i{color:#fff}

/* ── Announcements card ────────────────────────────────────── */
html[data-tt-theme="futuretrack-dark"] .tt-announce{
  grid-area:announce;display:block;align-self:stretch;justify-self:stretch;
  margin:0 42px 0 0;padding:16px 18px 18px;
  background:linear-gradient(165deg,rgba(10,26,48,.96),rgba(5,15,29,.96));
  border:1px solid rgba(58,87,120,.5);
  border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 10px 26px rgba(0,0,0,.2);
}
html[data-tt-theme="futuretrack-dark"] .tt-announce-title{
  display:flex;align-items:center;gap:12px;margin:0;
  font-family:var(--tt-font-display);font-size:13.5px;font-weight:700;letter-spacing:.9px;color:var(--tt-white);
}
html[data-tt-theme="futuretrack-dark"] .tt-announce-title i{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(145deg,#119cff,#064bdc);color:#fff;font-size:13px;
  box-shadow:0 4px 12px rgba(0,128,255,.35);
}
html[data-tt-theme="futuretrack-dark"] .tt-announce-title::after{
  content:'\f054';font-family:'Font Awesome 6 Free';font-weight:900;margin-left:auto;font-size:12px;color:#5d7392;
}
html[data-tt-theme="futuretrack-dark"] .tt-announce-list{display:none}
html[data-tt-theme="futuretrack-dark"] .tt-announce::after{
  content:'No new announcements';display:block;padding:13px 2px 0 42px;
  font-family:var(--tt-font-body);font-size:13px;color:var(--tt-muted);
}

/* ── TODAY'S SHIFT (lower centre, three sections) ──────────── */
html[data-tt-theme="futuretrack-dark"] .tt-shift{
  grid-area:shift;display:grid;align-self:stretch;
  grid-template-columns:auto minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;
  margin:0 42px 0 0;
  padding:15px 20px 15px 24px;
  background:linear-gradient(165deg,rgba(9,24,44,.96),rgba(4,13,27,.96));
  border:1px solid rgba(58,87,120,.55);
  border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 12px 30px rgba(0,0,0,.22);
}
html[data-tt-theme="futuretrack-dark"] .tt-shift-title{
  margin:0;padding-right:30px;align-self:center;white-space:nowrap;
  font-family:var(--tt-font-display);font-size:12px;font-weight:700;letter-spacing:2.6px;color:var(--tt-text-2);
}
html[data-tt-theme="futuretrack-dark"] .tt-shift-item{
  display:flex;flex-direction:column;justify-content:center;gap:4px;
  padding:4px 20px;border-left:1px solid var(--tt-divider);min-width:0;
}
html[data-tt-theme="futuretrack-dark"] .tt-shift-ico{display:block;font-size:14px;color:var(--tt-blue)}
html[data-tt-theme="futuretrack-dark"] .tt-shift-label{display:block;font-size:10.5px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--tt-muted)}
html[data-tt-theme="futuretrack-dark"] .tt-shift-time,
html[data-tt-theme="futuretrack-dark"] .tt-shift-pos,
html[data-tt-theme="futuretrack-dark"] .tt-shift-dept{
  margin:0;font-family:var(--tt-font-display);font-size:15.5px;font-weight:600;
  color:var(--tt-white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ── Footer (centre) ───────────────────────────────────────── */
html[data-tt-theme="futuretrack-dark"] .tt-footer{
  grid-area:foot;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 42px 12px 0;
  font-family:var(--tt-font-body);font-size:12.5px;font-weight:500;letter-spacing:.6px;color:var(--tt-muted);
}
html[data-tt-theme="futuretrack-dark"] .tt-footer i{font-size:11px;color:var(--tt-blue)}
html[data-tt-theme="futuretrack-dark"] .tt-footer .dot{color:var(--tt-blue)}

/* ── Camera layer: hidden until an active scan / permission
   prompt needs it, so the centre hero stays clean ─────────── */
html[data-tt-theme="futuretrack-dark"] .face-column{
  position:absolute;left:-9999px;top:0;width:320px;height:240px;
  opacity:0;pointer-events:none;overflow:hidden;z-index:0;
}
html[data-tt-theme="futuretrack-dark"] .hero-card:has(.face-overlay:not(.hidden)) .face-column{
  position:static;left:auto;grid-area:main;align-self:center;justify-self:center;
  width:min(480px,80%);height:auto;aspect-ratio:1;opacity:1;pointer-events:auto;z-index:6;
  display:grid;place-items:center;
}

/* ── Tier immunity ── the fixed-stage template ignores the
   fluid viewport degrade tiers (they are for the other themes)
   and always keeps its canonical 1536×1024 geometry. */
html[data-tt-theme="futuretrack-dark"] .kiosk-root{overflow:hidden!important}
html[data-tt-theme="futuretrack-dark"] .kiosk-shell{height:1024px!important;min-height:1024px!important;padding:30px 34px!important}
html[data-tt-theme="futuretrack-dark"] .hero-card{height:100%!important;min-height:0!important;max-height:none!important;overflow:hidden!important;gap:0!important}
html[data-tt-theme="futuretrack-dark"] .tt-time-num{font-size:46px!important}
html[data-tt-theme="futuretrack-dark"] .tt-q{min-height:96px!important}
html[data-tt-theme="futuretrack-dark"] .tt-quick{gap:12px!important}
html[data-tt-theme="futuretrack-dark"] .tt-shift{padding:15px 20px 15px 24px!important;gap:0!important;display:grid!important}
html[data-tt-theme="futuretrack-dark"] .tt-status-chip{font-size:12.5px!important;padding:3px 0!important;border-radius:0!important}