@font-face {
  font-family: "VT323";
  src: url(/assets/fonts/vt323.woff2) format("woff2");
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--glass-pane);
  color: var(--glass-ink);
  font-family: "VT323", ui-monospace, Menlo, monospace;
  overflow: hidden;
}
#game { width: 100vw; height: 100vh; }
#game canvas { image-rendering: pixelated; }

input[type="date"] { color-scheme: dark; cursor: pointer; }

select { color-scheme: dark; }
input[type="date"]::-webkit-calendar-picker-indicator {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; padding: 0; margin-left: 4px;
  opacity: .7;
  
  pointer-events: none;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges' fill='%23e8b465'><rect x='4' y='1' width='2' height='3'/><rect x='10' y='1' width='2' height='3'/><rect x='2' y='3' width='12' height='3'/><rect x='2' y='6' width='1' height='8'/><rect x='13' y='6' width='1' height='8'/><rect x='2' y='13' width='12' height='1'/><rect x='4' y='8' width='2' height='2'/><rect x='7' y='8' width='2' height='2'/><rect x='10' y='8' width='2' height='2'/><rect x='4' y='11' width='2' height='1'/><rect x='7' y='11' width='2' height='1'/></svg>") center / contain no-repeat;
}

input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

input[type="date"]:focus::-webkit-datetime-edit-year-field,
input[type="date"]:focus::-webkit-datetime-edit-month-field,
input[type="date"]:focus::-webkit-datetime-edit-day-field {
  background-color: transparent; color: inherit;
}

.overlay {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 22px;
  padding: 40px 24px;
  font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--glass-ink);
  
  background:
    radial-gradient(120% 90% at 50% 118%, rgba(244, 191, 140, 0.16) 0%, rgba(244, 191, 140, 0) 60%),
    radial-gradient(80% 60% at 18% 8%, rgba(110, 160, 210, 0.16) 0%, rgba(110, 160, 210, 0) 65%),
    linear-gradient(#0a0f13 0%, #0d151b 46%, #131c22 100%);
  z-index: 10;
}
.overlay.hidden { display: none; }
.overlay h1 {
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 200;
  letter-spacing: 0.3em;
  text-indent: 0.3em;           
  color: var(--glass-ink);
  margin: 0;
}
.overlay .title-sub {
  margin-top: -14px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.42em; text-indent: 0.42em;
  color: var(--glass-muted);
  text-transform: uppercase;
}
.overlay p { font-size: 15px; color: var(--glass-muted); margin: 0; }
.overlay p.title-foot {
  position: absolute; bottom: 20px;
  font-size: 12px; letter-spacing: 0.08em; color: var(--glass-muted);
}
#picker-error { color: var(--glass-danger); min-height: 1.3em; text-align: center; }

#picker-buttons {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px; max-width: 940px;
}

.char-card {
  font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  width: 122px; padding: 20px 12px 16px;
  color: var(--glass-ink);
  background: rgba(20, 29, 35, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 12px 30px -16px rgba(0, 0, 0, 0.9);
  cursor: pointer;
  transition:
    transform 0.14s ease-out,
    border-color 0.14s ease-out,
    background 0.14s ease-out,
    box-shadow 0.14s ease-out;
}
.char-card:hover {
  background: rgba(30, 42, 50, 0.62);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 18px 34px -16px rgba(0, 0, 0, 0.95);
}
.char-card:focus-visible { outline: 2px solid var(--glass-accent); outline-offset: 3px; }

.mono {
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 25px; font-weight: 600; letter-spacing: 0.04em;
  color: #fff;
  background:
    radial-gradient(120% 120% at 30% 22%, color-mix(in srgb, var(--accent) 92%, white) 0%, var(--accent) 55%,
      color-mix(in srgb, var(--accent) 62%, black) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 10px 22px -10px var(--accent);
  transition: box-shadow 0.14s ease-out, transform 0.14s ease-out;
}
.char-card:hover .mono {
  transform: scale(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.2),
    0 14px 30px -10px var(--accent);
}
.char-card .name { font-size: 16px; font-weight: 600; letter-spacing: 0.02em; }

.char-note {
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  color: var(--glass-success);
  background: rgba(64, 150, 105, 0.16);
  border: 1px solid rgba(120, 200, 160, 0.28);
}
.char-card.remembered { border-color: rgba(120, 200, 160, 0.34); }

.visitor-wrap { flex: 0 0 100%; display: flex; justify-content: center; margin-top: 2px; }
.visitor-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 14px 11px 12px;
  background: rgba(16, 22, 27, 0.42);
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.visitor-bar .mono {
  width: 38px; height: 38px; font-size: 16px; color: var(--glass-secondary);
  background: radial-gradient(120% 120% at 30% 22%, #4a5a63 0%, #33424a 60%, #222d34 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.visitor-bar .name { font-size: 14px; font-weight: 600; color: #cbd7dc; }
.visitor-note {
  font-size: 11px; line-height: 1.4; color: #64777f; max-width: 168px;
}
.visitor-name {
  font: inherit; font-size: 13px;
  width: 132px; box-sizing: border-box; text-align: center;
  padding: 7px 8px;
  color: var(--glass-ink);
  background: rgba(8, 12, 15, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 9px;
}
.visitor-name::placeholder { color: #647882; }
.visitor-name:focus { outline: none; border-color: rgba(242, 194, 116, 0.6); }

.pin-go, .visitor-go {
  font: inherit; font-size: 14px; font-weight: 600;
  width: 100%; box-sizing: border-box;
  padding: 9px 18px;
  color: #12181c;
  background: linear-gradient(#f6cf8c, #e9b463);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 9px;
  cursor: pointer;
  transition: filter 0.12s ease-out, transform 0.06s ease-out;
}
.pin-go:hover, .visitor-go:hover { filter: brightness(1.08); }
.pin-go:active, .visitor-go:active { transform: translateY(1px); }
.pin-go:disabled { opacity: 0.4; cursor: default; filter: none; }

.visitor-go { width: auto; flex: none; }

#pin-card {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: 268px; padding: 26px 26px 20px;
  background: rgba(20, 29, 35, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 22px 50px -22px rgba(0, 0, 0, 0.95);
}
#pin-card .name { font-size: 18px; font-weight: 600; color: var(--glass-ink); }
.pin-field { display: flex; flex-direction: column; align-items: stretch; gap: 5px; width: 100%; }
.pin-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--glass-muted);
}
.pin-input {
  font: inherit; font-size: 24px;
  width: 100%; box-sizing: border-box;
  text-align: center; letter-spacing: 0.42em; text-indent: 0.42em;
  padding: 8px 0;
  color: var(--glass-ink);
  background: rgba(8, 12, 15, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 10px;
}
.pin-input:focus { outline: none; border-color: rgba(242, 194, 116, 0.65); }
#pin-error { font-size: 13px; color: var(--glass-danger); min-height: 1.3em; text-align: center; }
#pin-links { display: flex; gap: 16px; }
.pin-link {
  font: inherit; font-size: 12px;
  background: none; border: none; padding: 0;
  color: var(--glass-muted); cursor: pointer;
}
.pin-link:hover { color: var(--glass-accent); }
.pin-note { font-size: 11px; line-height: 1.5; color: var(--glass-muted); text-align: center; }

#hud {
  position: fixed; top: 12px; left: 12px;
  width: min(340px, 60vw);
  display: flex; flex-direction: column; gap: 2px;
  font-size: 18px;
  line-height: 1.15;
  background: rgba(43, 35, 32, 0.92);
  border: 2px solid var(--glass-line);
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px var(--glass-field), 3px 3px 0 rgba(26, 21, 18, 0.6);
  padding: 7px 12px;
  z-index: 5;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
#hud.hidden { display: none; }

#hud.dim { opacity: 0.3; }
#hud-status { color: var(--glass-success); }
#hud-distance { color: var(--glass-secondary); }
#hud-coffee { color: var(--glass-accent); }
#hud-coffee:empty { display: none; }
#hud-beer { color: var(--glass-accent); }
#hud-beer:empty { display: none; }
#hud-hint { color: var(--glass-muted); font-size: 15px; }

#hud-discord { font-size: 15px; pointer-events: auto; }
#hud-discord:empty { display: none; }
#hud-discord a { color: var(--glass-accent); cursor: pointer; text-decoration: underline; }
#hud-discord .linked { color: var(--glass-success); }

#hud-screen { font-size: 15px; pointer-events: auto; display: flex; flex-direction: column; gap: 2px; }
#hud-screen:empty { display: none; }
#hud-screen a { color: var(--glass-accent); cursor: pointer; text-decoration: underline; }
#hud-screen .sharing { color: var(--glass-accent); }
#hud-screen .watching { color: var(--glass-success); }

#hud-projects {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 4px; padding-top: 5px;
  border-top: 1px solid var(--glass-hover);
  pointer-events: auto;
}
#hud-projects.hidden { display: none; }
.hud-project-row { display: flex; align-items: center; gap: 6px; font-size: 16px; }
.hud-project-name { color: var(--glass-ink); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-project-elapsed { color: var(--glass-accent); }
.hud-project-btn {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: var(--glass-line);
  color: var(--glass-ink);
  border: 2px solid var(--glass-line);
  border-radius: 3px;
  padding: 0;
  cursor: pointer;
}
.hud-project-btn svg { width: 11px; height: 11px; fill: currentColor; }
.hud-project-btn:hover { background: var(--glass-hover); border-color: var(--glass-accent); }
.hud-project-btn.danger { border-color: var(--glass-danger); color: var(--glass-danger); }
.hud-project-btn.danger:hover { background: #4a2e28; }

#hint {
  position: fixed;
  bottom: 30px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 5;
  pointer-events: none;
}
#hint.hidden { display: none; }
.hint-pop {
  font-size: 20px;
  color: var(--glass-ink);
  background: rgba(43, 35, 32, 0.94);
  border: 2px solid var(--glass-line);
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px var(--glass-field), 3px 3px 0 rgba(26, 21, 18, 0.6);
  padding: 6px 18px;
}

#hint a.hint-link {
  pointer-events: auto; cursor: pointer;
  color: #cfe0f2; text-decoration: none;
  background: #4b5b8c; border: 1px solid #6b7db3; border-radius: 3px;
  padding: 0 8px;
}
#hint a.hint-link:hover { background: #5d6ea6; }

#feedback {
  position: fixed; bottom: 12px; right: 12px;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  font: inherit;
  color: var(--glass-muted);
  background: rgba(43, 35, 32, 0.92);
  border: 2px solid var(--glass-line);
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px var(--glass-field), 3px 3px 0 rgba(26, 21, 18, 0.6);
  padding: 0;
  cursor: pointer;
  z-index: 6;
}
#feedback.hidden { display: none; }
#feedback:hover { color: var(--glass-accent); border-color: var(--glass-accent); }
#feedback svg { width: 18px; height: 18px; fill: currentColor; }

#xp {
  position: fixed; top: 12px; right: 12px;
  width: min(268px, 46vw);
  background: rgba(43, 35, 32, 0.92);
  border: 2px solid var(--glass-line);
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px var(--glass-field), 3px 3px 0 rgba(26, 21, 18, 0.6);
  padding: 7px 10px 8px;
  z-index: 5;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
#xp.hidden { display: none; }
#xp.dim { opacity: 0.35; }
#xp-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; font-size: 18px; line-height: 1.1;
}
#xp-level { color: var(--glass-accent); letter-spacing: 0.5px; }
#xp-into { font-size: 13px; color: var(--glass-secondary); font-family: var(--sans); }

#xp-bar {
  height: 9px; margin: 5px 0 2px;
  background: var(--glass-field);
  border: 1px solid #6b563f;
  border-radius: 2px;
  overflow: hidden;
}
#xp-fill {
  height: 100%; width: 0;
  background: var(--glass-accent);
  transition: width 420ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
#xp-quests { margin-top: 6px; }
#xp.folded #xp-quests { display: none; }
.xp-group {
  font-size: 13px; color: var(--glass-muted); font-family: var(--sans);
  text-transform: uppercase; letter-spacing: 0.6px;
  margin: 5px 0 2px;
}
.xp-quest {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 15px; line-height: 1.2; margin-bottom: 3px;
}
.xp-quest.done { opacity: 0.45; }
.xp-quest-worth {
  margin-left: auto; flex: none;
  font-family: var(--sans); font-size: 12px; color: #7fb069;
}
.xp-quest.done .xp-quest-worth { color: var(--glass-muted); }
.xp-quest-text { min-width: 0; }
.xp-quest-detail {
  display: block; font-size: 12px; color: var(--glass-muted);
  font-family: var(--sans); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#xp-fold {
  pointer-events: auto; cursor: pointer;
  background: none; border: 0; padding: 0;
  color: var(--glass-muted); font-family: inherit; font-size: 15px;
}
#xp-fold:hover { color: var(--glass-accent); }

#xp-all {
  pointer-events: auto; cursor: pointer;
  display: block; width: 100%; margin-top: 6px;
  background: none; border: 0; padding: 3px 0 0;
  border-top: 1px solid var(--glass-line);
  color: var(--glass-muted); font-family: inherit; font-size: 15px; text-align: left;
}
#xp-all:hover { color: var(--glass-accent); }

#xp.folded #xp-all { display: none; }

#worklist { z-index: 25; }
#worklist .modal-panel { width: min(560px, 92vw); max-height: 82vh; display: flex; flex-direction: column; }
#worklist h2 { font-size: 24px; color: var(--glass-accent); letter-spacing: 1px; }
.worklist-note { font-size: 16px; color: var(--glass-muted); margin: 2px 0 10px; }
#worklist-body { overflow-y: auto; flex: 1; min-height: 0; }
.worklist-empty { font-size: 17px; color: var(--glass-muted); padding: 10px 0; }
#celebration {
  position: fixed;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(400px, 92vw);
  background: var(--glass-pane);
  border: 3px solid var(--glass-line);
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px var(--glass-field), 4px 4px 0 var(--glass-field);
  padding: 12px 16px 14px;
  z-index: 8; 
  animation: celebration-in 260ms ease-out;
}
#celebration.hidden { display: none; }
@keyframes celebration-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% - 12px)); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}
.celebration-head {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 8px;
}
.celebration-title {
  font-size: 22px; color: var(--glass-accent); letter-spacing: 1px;
  margin-right: auto;
}

.celebration-close {
  font: inherit; font-size: 18px; line-height: 1;
  background: none; border: none; color: var(--glass-muted);
  cursor: pointer; padding: 0 2px;
}
.celebration-close:hover { color: var(--glass-accent); }
.celebration-event {
  display: flex; gap: 8px;
  font-size: 17px; color: var(--glass-ink);
  margin-bottom: 6px;
}
.celebration-event-emoji { font-size: 16px; }
.celebration-event-detail { display: block; font-size: 15px; color: var(--glass-muted); }
.celebration-more { font-size: 15px; color: var(--glass-muted); margin-bottom: 6px; }

.celebration-ask { border-top: 2px solid var(--glass-line); margin-top: 10px; padding-top: 10px; }
.celebration-ask p { font-size: 17px; color: var(--glass-secondary); margin-bottom: 8px; }
.celebration-ask-row { display: flex; align-items: center; gap: 6px; }
.celebration-ask select {
  font: inherit; font-size: 17px; padding: 3px 6px;
  background: var(--glass-field); color: var(--glass-ink);
  border: 2px solid var(--glass-hover); border-radius: 3px;
}
.celebration-ask select:focus { outline: none; border-color: var(--glass-accent); }
.celebration-ask-note { font-size: 14px; color: var(--glass-muted); margin-top: 6px; }
.celebration-ask .tracker-btn { margin-left: auto; }

#confetti {
  position: fixed; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 7;
}

#confetti i {
  position: absolute;
  top: -12px;
  width: 8px; height: 8px;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(102vh); opacity: 0.6; }
}

#levelup {
  position: fixed;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(380px, 92vw);
  padding: 16px 20px 18px;
  text-align: center;
  z-index: 30;
  
  animation: levelup-in 320ms cubic-bezier(0.2, 1.35, 0.4, 1);
}
#levelup.hidden { display: none; }
@keyframes levelup-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.82); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.levelup-eyebrow {
  font-size: 15px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--glass-muted);
}
.levelup-level {
  font-size: 46px; line-height: 1.05; letter-spacing: 2px;
  color: var(--glass-accent);
  text-shadow: 0 0 16px rgba(232, 180, 101, 0.35);
  margin: 2px 0 12px;
}

.levelup-bar {
  height: 8px; background: var(--glass-field);
  border: 2px solid var(--glass-line); border-radius: 2px;
  overflow: hidden;
}
.levelup-fill {
  height: 100%; width: 0; background: var(--glass-accent);
  transition: width 500ms ease-out;
}
.levelup-stats { display: flex; gap: 8px; margin: 10px 0 12px; }
.levelup-stat { flex: 1; }
.levelup-stat b { display: block; font-size: 19px; color: var(--glass-ink); }
.levelup-stat span { font-size: 14px; color: var(--glass-muted); }
.levelup-next {
  display: flex; gap: 10px; justify-content: space-between; align-items: baseline;
  text-align: left; font-size: 16px; color: var(--glass-secondary);
  border-top: 2px solid var(--glass-line);
  padding-top: 10px; margin-bottom: 12px;
}
.levelup-next b { color: var(--glass-accent); white-space: nowrap; }
.levelup-ok { width: 100%; font-size: 18px; }

#beerhaze {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: var(--beer, 0);
  backdrop-filter: hue-rotate(var(--beer-hue, 0deg)) saturate(var(--beer-sat, 1))
    blur(var(--beer-blur, 0px));
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(120, 70, 20, calc(var(--beer, 0) * 0.30)) 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  #beerhaze { backdrop-filter: saturate(var(--beer-sat, 1)); }
}

#vignette {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(
    ellipse at center,
    transparent 52%,
    rgba(26, 15, 8, 0.38) 100%
  );
}
#hint b {
  font-weight: 400;
  color: var(--glass-pane);
  background: var(--glass-accent);
  border-radius: 3px;
  padding: 0 7px;
  margin-right: 2px;
}

#tracker { z-index: 20; }

#reports { z-index: 24; padding: 0; gap: 0; }
#reports-panel {
  width: min(1240px, 96vw); height: 92vh;
  display: flex; flex-direction: column;
  background: linear-gradient(var(--glass-pane), var(--glass-field) 60%);
  border: 1px solid var(--glass-line);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
#reports-header {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--glass-hover);
  flex: 0 0 auto;
}
#reports-header h2 {
  font-size: 21px; color: var(--glass-accent); letter-spacing: 1px; margin: 0; flex: 1;
}

#reports-popout { text-decoration: none; font-size: 15px; }
#reports-frame {
  flex: 1 1 auto; width: 100%; border: 0; background: var(--glass-pane);
}

#screenview {
  position: fixed; inset: 0; z-index: 24;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12, 9, 7, 0.72);
  font-family: "VT323", ui-monospace, Menlo, monospace;
}
#screenview.hidden { display: none; }
#screenview-frame {
  width: min(1400px, 94vw); height: 90vh;
  display: flex; flex-direction: column;
  background: linear-gradient(var(--glass-pane), var(--glass-field) 60%);
  border: 1px solid var(--glass-line);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
#screenview-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--glass-hover);
  flex: 0 0 auto;
}
#screenview-title { font-size: 20px; color: var(--glass-accent); letter-spacing: 1px; flex: 1; }
#screenview-stage {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  background: #0c0907;
}
#screenview-video { width: 100%; height: 100%; object-fit: contain; }
#screenview-note {
  position: absolute; color: var(--glass-muted); font-size: 20px;
}
#screenview-note:empty { display: none; }
#screenview .tracker-btn.hidden { display: none; }

#screenview-audionote { color: var(--glass-muted); font-size: 15px; cursor: help; }
#screenview-audionote.hidden { display: none; }

#screenview.small {
  align-items: flex-end; justify-content: flex-end;
  background: none; pointer-events: none;
  padding: 0 14px 64px 0;
}
#screenview.small #screenview-frame {
  width: 320px; height: 200px;
  pointer-events: auto; cursor: pointer;
}
#screenview.small #screenview-head { padding: 4px 8px; }
#screenview.small #screenview-title { font-size: 16px; }
#tracker-panel {
  width: min(640px, 90vw);
  max-height: 80vh;
  display: flex; flex-direction: column;
  background: var(--glass-pane);
  border: 3px solid var(--glass-line);
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px var(--glass-field), 4px 4px 0 var(--glass-field);
  padding: 18px 22px;
  overflow: hidden;
}
#tracker-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px;
}
#tracker-header h2 { font-size: 30px; font-weight: 400; letter-spacing: 2px; color: var(--glass-accent); }
#tracker-header-right { display: flex; align-items: baseline; gap: 14px; }

#tracker-reports { text-decoration: none; }
.tracker-hint { font-size: 16px; color: var(--glass-muted); cursor: pointer; }

#tracker-scroll { flex: 1; min-height: 120px; overflow-y: auto; }
#tracker-folders { display: flex; flex-direction: column; gap: 10px; }
.tracker-empty { color: var(--glass-secondary); font-size: 18px; }

#tracker-hero {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--glass-line);
}
.tracker-hero-right { text-align: right; }
.tracker-hero-lab {
  font-size: 13px; color: var(--glass-muted);
  text-transform: uppercase; letter-spacing: 1.5px;
  margin-bottom: 3px;
}
.tracker-hero-fig { font-size: 38px; color: var(--glass-accent); line-height: 0.95; }
.tracker-hero-fig-sm { font-size: 21px; color: var(--glass-secondary); line-height: 1; }

.tracker-section-label {
  font-size: 13px; color: var(--glass-muted);
  text-transform: uppercase; letter-spacing: 1.5px;
  margin-bottom: 6px;
}

#tracker-now { margin-bottom: 14px; }
#tracker-now.hidden { display: none; }
#tracker-now-list { display: flex; flex-direction: column; gap: 6px; }
.tracker-now-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--glass-row);
  border: 1px solid var(--glass-accent);
  border-radius: 3px;
  padding: 6px 10px;
}
.tracker-now-row.paused { border-color: var(--glass-hover); }
.tracker-now-dot { color: var(--glass-success); font-size: 15px; flex-shrink: 0; }
.tracker-now-row.paused .tracker-now-dot { color: var(--glass-muted); }

.tracker-now-name { font-size: 18px; color: var(--glass-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; cursor: default; }
.tracker-now-breadcrumb { flex: 1; font-size: 13px; color: var(--glass-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tracker-now-elapsed { font-size: 21px; color: var(--glass-accent); white-space: nowrap; flex-shrink: 0; }

#tracker-search-row { display: flex; gap: 8px; margin-bottom: 10px; }
#tracker-search { flex: 1; }
#tracker-search-clear.hidden { display: none; }
#tracker-search-results { display: flex; flex-direction: column; gap: 8px; }
.tracker-result-crumb { font-size: 13px; color: var(--glass-muted); margin-bottom: 2px; }

#tracker-footer {
  display: flex; align-items: stretch; gap: 10px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--glass-line);
}
#tracker-footer > .tracker-btn {
  flex: 1;
  font-size: 17px;
  padding: 8px 12px;
  display: flex; align-items: center; justify-content: center;
}

#tracker-recent { margin-bottom: 14px; }
#tracker-recent.hidden { display: none; }
#tracker-recent-list { display: flex; flex-direction: column; gap: 6px; }
.tracker-recent-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--glass-row);
  border: 1px solid var(--glass-line);
  border-radius: 3px;
  padding: 5px 10px;
}
.tracker-recent-name { font-size: 17px; color: var(--glass-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; cursor: default; }
.tracker-recent-breadcrumb { flex: 1; font-size: 13px; color: var(--glass-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tracker-recent-elapsed { font-size: 15px; color: var(--glass-accent); white-space: nowrap; flex-shrink: 0; }

.tracker-total { font-size: 15px; color: var(--glass-secondary); margin-right: 4px; }

.tracker-folder {
  background: var(--glass-row);
  border: 2px solid var(--glass-hover);
  border-radius: 3px;
  padding: 8px 12px;
}
.tracker-folder-header { display: flex; align-items: center; gap: 8px; }
.tracker-caret { cursor: pointer; color: var(--glass-secondary); width: 14px; }
.tracker-folder-name { flex: 1; font-size: 22px; cursor: pointer; }
.tracker-add-row { display: flex; gap: 8px; margin: 8px 0; }
.tracker-categories { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; margin-left: 18px; }

.tracker-category {
  background: var(--glass-row);
  border: 2px solid var(--glass-line);
  border-radius: 3px;
  padding: 6px 10px;
}
.tracker-category-header { display: flex; align-items: center; gap: 8px; }
.tracker-category-name { flex: 1; font-size: 19px; cursor: pointer; color: var(--glass-ink); }
.tracker-projects { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; margin-left: 18px; }

.tracker-project {
  background: var(--glass-pane);
  border: 1px solid var(--glass-hover);
  border-radius: 3px;
  padding: 6px 10px;
}
.tracker-project.completed { opacity: 0.6; }
.tracker-project.voided { opacity: 0.72; border-style: dashed; }
.tracker-project-top { display: flex; align-items: center; gap: 10px; }

.tracker-project-name {
  flex: 1; min-width: 0; font-size: 20px; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tracker-project-name:hover { color: var(--glass-accent); }
.tracker-badge { font-size: 15px; color: var(--glass-success); }
.tracker-void-badge { color: var(--glass-muted); }
.tracker-elapsed { font-size: 18px; color: var(--glass-accent); min-width: 70px; text-align: right; }

.tracker-time { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.tracker-sitting { font-size: 21px; color: var(--glass-accent); line-height: 1; }
.tracker-sitting.idle { color: var(--glass-muted); }
.tracker-total-line { font-size: 13px; color: var(--glass-muted); white-space: nowrap; }
.tracker-total-num { color: var(--glass-secondary); }

.tracker-controls { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; align-items: center; }
.tracker-controls .tracker-btn { font-size: 13px; padding: 1px 8px; }

.tracker-controls-bin { margin-left: auto; }
.tracker-details {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--glass-hover);
  font-size: 16px; color: var(--glass-secondary);
  display: flex; flex-direction: column; gap: 2px;
}
.tracker-details .tracker-section-label { margin-top: 8px; }
.tracker-void-note {
  padding: 8px 10px; margin-bottom: 4px;
  border-left: 3px solid var(--glass-muted);
  background: var(--glass-row); color: var(--glass-secondary);
}

#tracker input {
  font: inherit;
  background: var(--glass-field);
  color: var(--glass-ink);
  border: 2px solid var(--glass-hover);
  border-radius: 3px;
  padding: 4px 8px;
  font-size: 17px;
}
.tracker-btn {
  font: inherit;
  font-size: 15px;
  background: var(--glass-line);
  color: var(--glass-ink);
  border: 2px solid var(--glass-line);
  border-radius: 3px;
  padding: 3px 10px;
  cursor: pointer;
}
.tracker-btn:hover { background: var(--glass-hover); border-color: var(--glass-accent); }
.tracker-btn-danger { border-color: var(--glass-danger); color: var(--glass-danger); }
.tracker-btn-danger:hover { background: #4a2e28; }

.tracker-done-toggle {
  font: inherit; font-size: 15px; text-align: left;
  background: transparent; color: var(--glass-muted);
  border: none; padding: 4px 0 1px; cursor: pointer;
}
.tracker-done-toggle:hover { color: var(--glass-secondary); }
.tracker-done-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }

.tracker-pill {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 26px; height: 24px;
  font: inherit;
  background: var(--glass-line); color: var(--glass-ink);
  border: 2px solid var(--glass-line); border-radius: 3px;
  padding: 0; cursor: pointer;
}
.tracker-pill svg { width: 11px; height: 11px; fill: currentColor; }
.tracker-pill:hover { background: var(--glass-hover); border-color: var(--glass-accent); }
.tracker-pill.danger { border-color: var(--glass-danger); color: var(--glass-danger); }
.tracker-pill.danger:hover { background: #4a2e28; }

.tracker-delete-btn {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 22px; height: 22px;
  background: transparent;
  border: none;
  color: var(--glass-muted);
  padding: 0;
  cursor: pointer;
}
.tracker-delete-btn svg { width: 13px; height: 13px; fill: currentColor; }
.tracker-delete-btn:hover:not(:disabled) { color: var(--glass-danger); }
.tracker-delete-btn:disabled { color: var(--glass-line); cursor: not-allowed; }

.tracker-rename-btn { color: var(--glass-muted); }
.tracker-rename-btn:hover { color: var(--glass-accent); }

.tracker-rename-input {
  flex: 1; min-width: 0;
  font: inherit; font-size: 19px;
  background: var(--glass-field); color: var(--glass-ink);
  border: 2px solid var(--glass-accent); border-radius: 3px;
  padding: 1px 6px; outline: none;
}

.tracker-detail-breakdown { color: var(--glass-muted); }

#chat {
  position: fixed; bottom: 12px; left: 12px;
  width: min(340px, 60vw);
  display: flex; flex-direction: column;
  background: rgba(43, 35, 32, 0.92);
  border: 2px solid var(--glass-line);
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px var(--glass-field), 3px 3px 0 rgba(26, 21, 18, 0.6);
  z-index: 6;
  transition: opacity 0.6s ease;
}

#chat.dim { opacity: 0.3; }
#chat.hidden { display: none; }

#chat-channel {
  font: inherit;
  font-size: 14px; letter-spacing: 1px;
  color: var(--glass-muted);
  padding: 5px 12px 3px;
  border: none; border-bottom: 1px solid var(--glass-hover);
  background: none;
  text-align: left; width: 100%;
  display: flex; align-items: center; gap: 6px;
  cursor: pointer;
}
#chat-channel:hover:not(:disabled) { color: var(--glass-accent); }

#chat-channel:disabled { cursor: default; }
#chat-channel .chat-caret { margin-left: auto; font-size: 12px; opacity: 0.7; }

#chat.meeting #chat-channel { color: var(--glass-accent); }

.chat-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--glass-danger); flex: none;
}

#chat-menu {
  position: absolute; left: 0; right: 0; bottom: 100%;
  margin-bottom: 4px;
  z-index: 2;
  display: flex; flex-direction: column;
  background: linear-gradient(var(--glass-pane), var(--glass-pane));
  border: 2px solid var(--glass-line); border-radius: 4px;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.5);
  padding: 4px;
  max-height: 46vh; overflow-y: auto;
}
#chat-menu.hidden { display: none; }
.chat-menu-row {
  font: inherit; font-size: 16px;
  color: var(--glass-ink); background: none; border: none;
  text-align: left; padding: 4px 8px; border-radius: 3px;
  display: flex; align-items: center; gap: 7px;
  cursor: pointer;
}
.chat-menu-row:hover { background: #3a2e22; color: var(--glass-ink); }
.chat-menu-row.current { color: var(--glass-accent); }
.chat-menu-row .chat-menu-note {
  margin-left: auto; font-size: 13px; color: var(--glass-muted);
}
.chat-menu-head {
  font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--glass-muted); padding: 6px 8px 2px;
}
#chat-log {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 34vh; min-height: 46px;
  overflow-y: auto;
  padding: 6px 12px;
  font-size: 17px; line-height: 1.2;
}
#chat-log:empty::before {
  content: "No messages yet.";
  color: var(--glass-muted); font-size: 15px;
}
.chat-msg { color: var(--glass-ink); word-wrap: break-word; overflow-wrap: anywhere; }
.chat-msg .chat-name { color: var(--glass-success); }
.chat-msg.mine .chat-name { color: var(--glass-accent); }
.chat-msg .chat-src {
  font-size: 12px; color: var(--glass-accent);
  border: 1px solid #3f5c78; border-radius: 3px;
  padding: 0 4px; margin-right: 4px;
}

.chat-note {
  font-size: 14px; color: var(--glass-muted);
  padding-left: 2px;
}

.chat-att-img { display: block; margin: 3px 0 2px; }
.chat-att-img img {
  display: block; max-width: 200px; max-height: 130px;
  border: 1px solid var(--glass-hover); border-radius: 3px;
}
.chat-att-file {
  display: block; margin: 2px 0;
  color: var(--glass-accent); font-size: 15px;
  text-decoration: underline;
}
#chat-input {
  font: inherit; font-size: 17px;
  background: var(--glass-field);
  color: var(--glass-ink);
  border: none;
  border-top: 1px solid var(--glass-hover);
  border-radius: 0 0 2px 2px;
  padding: 6px 12px;
  outline: none;
}
#chat-input::placeholder { color: var(--glass-muted); }

#stop-classify { z-index: 25; }

#complete-confirm { z-index: 25; }

#project-delete-confirm { z-index: 25; }
#project-delete-summary { color: var(--glass-secondary); font-size: 16px; margin-bottom: 8px; }
#project-delete-note { color: var(--glass-muted); font-size: 14px; }
#project-void-reason-row { display: grid; gap: 6px; margin: 16px 0 4px; color: var(--glass-secondary); font-size: 13px; }
#project-void-reason-row.hidden { display: none; }
#project-void-reason {
  width: 100%; box-sizing: border-box; padding: 9px 10px;
  border: 1px solid var(--glass-line); border-radius: 8px;
  background: var(--glass-field); color: var(--glass-ink); font: inherit;
}
#complete-summary { color: var(--glass-secondary); font-size: 16px; margin-bottom: 8px; }
#complete-lines { margin: 8px 0 12px; border-top: 1px solid var(--glass-line); }
.complete-line {
  display: flex; align-items: baseline; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--glass-line);
  font-size: 15px; color: var(--glass-ink);
}
.complete-line .cl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.complete-line .cl-unit { color: var(--glass-muted); font-size: 13px; white-space: nowrap; }
.complete-line .cl-amount { font-weight: 600; color: var(--glass-accent); white-space: nowrap; }
.complete-line.cl-total { border-bottom: 0; color: var(--glass-secondary); }
.complete-line.cl-total .cl-amount { font-size: 17px; }
#complete-note { color: var(--glass-muted); font-size: 13px; margin-bottom: 10px; }

#complete-bill.hidden { display: none; }
.modal-panel {
  width: min(420px, 90vw);
  background: var(--glass-pane);
  border: 3px solid var(--glass-line);
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px var(--glass-field), 4px 4px 0 var(--glass-field);
  padding: 20px 24px;
}
.modal-panel h2 { font-size: 26px; font-weight: 400; letter-spacing: 1px; color: var(--glass-accent); margin-bottom: 6px; }
#stop-classify-summary, #log-manual-summary { color: var(--glass-secondary); font-size: 17px; margin-bottom: 10px; }
.stop-classify-adjust-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 16px; color: var(--glass-secondary);
  margin-bottom: 8px;
}
.stop-classify-adjust-row:last-of-type { margin-bottom: 16px; }

.stop-classify-adjust-row label { margin-right: auto; }
#catchup-date-label { font-size: 15px; color: var(--glass-muted); }

.stop-classify-hhmm {
  font: inherit; font-size: 18px;
  
  width: 112px; text-align: center; letter-spacing: 2px;
  background: var(--glass-field);
  color: var(--glass-ink);
  border: 2px solid var(--glass-hover);
  border-radius: 3px;
  padding: 4px 8px;
  outline: none;
  flex: none;
}
.stop-classify-hhmm:focus { border-color: var(--glass-accent); }
.stop-classify-hhmm::placeholder { color: var(--glass-muted); }

.modal-note-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.modal-note-row.hidden { display: none; }
.modal-note-row label { font-size: 17px; color: var(--glass-secondary); }
.modal-note {
  font: inherit; font-size: 18px; padding: 5px 9px; width: 100%;
  background: var(--glass-pane); color: var(--glass-ink);
  border: 2px solid var(--glass-muted); border-radius: 4px;
}
.modal-note:focus { outline: none; border-color: var(--glass-accent); }
.modal-note-optional { font-size: 14px; color: var(--glass-muted); margin-left: 4px; }
.modal-note-hint { font-size: 14px; color: var(--glass-muted); }
.modal-note-hint.error { color: var(--glass-danger, #e07a5f); }
.modal-extra-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.modal-extra-row label { font-size: 17px; color: var(--glass-secondary); }
.modal-extra-inputs { display: flex; gap: 8px; }
.modal-extra-inputs .modal-note { flex: 1; min-width: 0; }
.modal-extra-time {
  width: 74px; flex: none; text-align: center; font-variant-numeric: tabular-nums;
  font: inherit; font-size: 18px; padding: 5px 6px;
  background: var(--glass-pane); color: var(--glass-ink);
  border: 2px solid var(--glass-muted); border-radius: 4px;
}
.modal-extra-time:focus { outline: none; border-color: var(--glass-accent); }
.modal-extra-time::placeholder { color: var(--glass-muted); }
.modal-subhead { font-size: 15px; font-weight: 600; color: var(--glass-secondary); margin-bottom: 6px; }
.modal-note::placeholder { color: var(--glass-muted); }
.modal-slider { width: 100%; accent-color: var(--glass-accent); margin-bottom: 10px; }
.modal-split-labels { display: flex; justify-content: space-between; font-size: 16px; margin-bottom: 18px; }
.modal-split-active { color: var(--glass-success); }
.modal-split-passive { color: var(--glass-secondary); }
.modal-actions { display: flex; justify-content: space-between; align-items: center; }
.modal-actions-right { display: flex; gap: 8px; }
.modal-textarea {
  font: inherit; font-size: 18px; padding: 5px 9px; width: 100%; resize: vertical;
  background: var(--glass-field); color: var(--glass-ink);
  border: 2px solid var(--glass-hover); border-radius: 3px;
}
.modal-textarea:focus { outline: none; border-color: var(--glass-accent); }
.modal-textarea::placeholder { color: var(--glass-muted); }

#daily-catchup { z-index: 25; }
#daily-catchup .modal-panel { width: min(560px, 92vw); }
.catchup-intro { color: var(--glass-secondary); font-size: 16px; margin-bottom: 12px; }
.catchup-slider-label { display: block; font-size: 16px; color: var(--glass-secondary); margin-bottom: 4px; }
.catchup-label {
  font-size: 13px; color: var(--glass-muted);
  text-transform: uppercase; letter-spacing: 1.5px;
  margin: 14px 0 6px;
}
#catchup-search {
  font: inherit; font-size: 16px; padding: 5px 9px; width: 100%;
  background: var(--glass-field); color: var(--glass-ink);
  border: 2px solid var(--glass-hover); border-radius: 3px; outline: none;
  margin-bottom: 8px;
}
#catchup-search:focus { border-color: var(--glass-accent); }
#catchup-search::placeholder { color: var(--glass-muted); }
#catchup-picker-list {
  max-height: 160px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--glass-line); border-radius: 3px;
  padding: 4px;
}
.catchup-pick-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px; border-radius: 3px; cursor: pointer;
}
.catchup-pick-row:hover { background: var(--glass-row); }
.catchup-pick-row input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--glass-accent); flex: none; }
.catchup-pick-name { flex: 1; font-size: 16px; color: var(--glass-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catchup-pick-breadcrumb { font-size: 13px; color: var(--glass-muted); flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catchup-add-row { display: flex; justify-content: flex-end; margin-top: 6px; }
#catchup-entries {
  max-height: 220px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
}
.catchup-entry-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--glass-row); border: 1px solid var(--glass-line); border-radius: 3px;
  padding: 5px 8px;
}
.catchup-entry-name { flex: 1; font-size: 16px; color: var(--glass-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catchup-entry-breadcrumb { font-size: 12px; color: var(--glass-muted); flex: none; max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catchup-hhmm {
  font: inherit; font-size: 16px; letter-spacing: 1px; text-align: center;
  width: 64px; flex: none;
  background: var(--glass-field); color: var(--glass-ink);
  border: 2px solid var(--glass-hover); border-radius: 3px;
  padding: 3px 4px; outline: none;
}
.catchup-hhmm:focus { border-color: var(--glass-accent); }
.catchup-percent-wrap { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--glass-secondary); flex: none; }
.catchup-percent {
  font: inherit; font-size: 16px; text-align: center;
  width: 34px; flex: none;
  background: var(--glass-field); color: var(--glass-ink);
  border: 2px solid var(--glass-hover); border-radius: 3px;
  padding: 3px 2px; outline: none;
}
.catchup-percent:focus { border-color: var(--glass-accent); }
#catchup-error { color: var(--glass-danger); font-size: 15px; min-height: 18px; margin: 8px 0 0; }
#daily-catchup-confirm:disabled { opacity: 0.5; cursor: not-allowed; }

#board { z-index: 20; }

#ticket-form { z-index: 26; }

#ticket-confirm { z-index: 27; }
#ticket-confirm-text { font-size: 18px; color: var(--glass-secondary); }
#board-panel {
  width: min(620px, 90vw);
  max-height: 80vh;
  display: flex; flex-direction: column;
  background: var(--glass-pane);
  border: 3px solid var(--glass-line);
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px var(--glass-field), 4px 4px 0 var(--glass-field);
  padding: 18px 22px;
  overflow: hidden;
}

#desk-panel {
  width: min(680px, 92vw);
  max-height: 84vh;
  display: flex; flex-direction: column;
  background: var(--glass-pane);
  border: 3px solid var(--glass-line);
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px var(--glass-field), 4px 4px 0 var(--glass-field);
  padding: 18px 22px;
  overflow: hidden;
}
#desk-header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 4px;
}
#desk-header h2 { font-size: 30px; font-weight: 400; letter-spacing: 2px; color: var(--glass-accent); }
#desk-date { font-size: 17px; color: var(--glass-muted); letter-spacing: 1px; }

#desk-clock {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  border: 2px solid var(--glass-line); border-radius: 3px;
  background: var(--glass-field);
  padding: 10px 14px; margin: 10px 0 14px;
}
#desk-clock-state { min-width: 0; }
#desk-clock-line { font-size: 19px; color: var(--glass-ink); }
#desk-clock-sub { font-size: 16px; color: var(--glass-muted); margin-top: 2px; }
#desk-clock-sub b { color: var(--glass-secondary); font-weight: 400; }
.desk-running { display: block; font-size: 16px; color: var(--glass-secondary); margin-top: 3px; }
.desk-running .desk-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--glass-success); margin-right: 7px; vertical-align: middle;
}
.desk-running.paused .desk-dot { background: var(--glass-muted); }

.desk-running .hud-project-btn {
  display: inline-flex; vertical-align: middle;
  margin-left: 7px; margin-top: -2px;
}

.desk-section { margin-bottom: 6px; }
.desk-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 15px; letter-spacing: 2px; color: var(--glass-muted);
  border-bottom: 1px solid var(--glass-row); padding-bottom: 4px; margin-bottom: 8px;
}
.desk-section-count { color: var(--glass-muted); letter-spacing: 0; }
#desk-scroll { overflow-y: auto; flex: 1; min-height: 0; }

#desk-today .desk-section-head { color: #7fa8b8; border-bottom-color: var(--glass-selected); }
#desk-calendar-body { font-size: 17px; color: var(--glass-muted); padding: 2px 0 10px; }
#desk-calendar-body a { color: var(--glass-accent); }

.desk-meeting {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 2px; border-bottom: 1px solid var(--glass-field);
}
.desk-meeting:last-child { border-bottom: 0; }
.desk-meeting-time {
  flex: none; width: 58px; font-size: 15px; color: #7fa8b8;
  font-variant-numeric: tabular-nums;
}
.desk-meeting-dot {
  flex: none; width: 6px; height: 6px; border-radius: 50%; background: #7fa8b8;
}
.desk-meeting-title {
  flex: 1; min-width: 0; font-size: 17px; color: var(--glass-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.desk-meeting-len { flex: none; font-size: 14px; color: var(--glass-muted); }
.desk-meeting-join {
  flex: none; font-size: 14px; color: #7fa8b8; text-decoration: none;
  border: 1px solid var(--glass-selected); border-radius: 2px; padding: 0 5px;
}
.desk-meeting-join:hover { color: var(--glass-ink); border-color: #7fa8b8; }

.desk-cal-error { font-size: 15px; color: var(--glass-danger); padding: 2px 0 4px; }

.desk-line {
  display: flex; align-items: baseline; gap: 10px;
  padding: 5px 2px; border-bottom: 1px solid var(--glass-field);
}
.desk-line:last-child { border-bottom: 0; }
.desk-mark { flex-shrink: 0; width: 14px; text-align: center; color: var(--glass-line); font-size: 15px; }
.desk-line.job .desk-mark { color: var(--glass-accent); }
.desk-line.todo .desk-mark { color: var(--glass-muted); }
.desk-title {
  flex: 1; min-width: 0; font-size: 18px; color: var(--glass-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.desk-note { flex-shrink: 0; font-size: 15px; color: var(--glass-muted); }

.desk-note.over { color: var(--glass-danger); }
.desk-tag {
  flex-shrink: 0; font-size: 13px; letter-spacing: 1px;
  color: var(--glass-muted); border: 1px solid var(--glass-row); border-radius: 2px; padding: 0 4px;
}
.desk-line .tracker-btn { flex-shrink: 0; font-size: 14px; padding: 2px 10px; }
.desk-empty { font-size: 17px; color: var(--glass-muted); padding: 8px 0; }

#desk-today.hidden { display: none; }
#desk-ongoing-section.hidden { display: none; }

.desk-extra {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--glass-row);
}
.desk-extra:not(.hidden) ~ .desk-extra {
  margin-top: 6px; padding-top: 0; border-top: 0;
}

#desk-ongoing .desk-title { color: var(--glass-secondary); font-size: 17px; }
#desk-ongoing .desk-mark { color: var(--glass-muted); }

#desk-sofar-section.hidden { display: none; }
#desk-sofar .desk-title { color: var(--glass-secondary); font-size: 17px; }
#desk-sofar .desk-mark { color: var(--glass-muted); }

.desk-open-head {
  font-size: 15px; letter-spacing: 2px; color: var(--glass-muted);
  margin: 12px 0 6px; padding-top: 8px; border-top: 1px solid var(--glass-row);
}

.desk-bucket-head {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 15px; letter-spacing: 2px; color: var(--glass-muted);
  margin: 12px 0 4px; padding-bottom: 3px; border-bottom: 1px solid var(--glass-row);
}
.desk-bucket-head:first-child { margin-top: 2px; }
.desk-bucket-head.overdue { color: var(--glass-danger); border-bottom-color: #5c3428; }
.desk-bucket-head.today { color: var(--glass-accent); border-bottom-color: var(--glass-line); }
.desk-bucket-count { font-size: 14px; color: var(--glass-muted); }

.desk-count-late { color: var(--glass-danger); }

.desk-due {
  flex-shrink: 0; font-size: 14px; color: var(--glass-muted);
  border: 1px solid var(--glass-row); border-radius: 2px; padding: 0 5px;
}
.desk-due.late { color: var(--glass-danger); border-color: #5c3428; }

button.desk-due { font: inherit; cursor: pointer; background: transparent; }
button.desk-due:hover { color: var(--glass-ink); border-color: var(--glass-accent); }
button.desk-due:focus-visible { outline: 2px solid var(--glass-accent); outline-offset: 1px; }

.desk-due.unset { color: var(--glass-muted); border-style: dashed; }
.desk-due.unset:hover { color: var(--glass-accent); }

.desk-due-menu {
  position: fixed; z-index: 40; display: flex; flex-direction: column; gap: 2px;
  background: var(--glass-field); border: 1px solid var(--glass-row); border-radius: 4px; padding: 5px;
  box-shadow: 0 8px 20px rgba(0,0,0,.55);
}
.desk-due-item {
  font: inherit; font-size: 16px; text-align: left; cursor: pointer;
  background: transparent; color: var(--glass-ink); border: 0; border-radius: 3px; padding: 3px 10px;
}
.desk-due-item:hover { background: var(--glass-row); color: var(--glass-accent); }
.desk-due-item.quiet { color: var(--glass-muted); }
.desk-due-item:focus-visible { outline: 2px solid var(--glass-accent); outline-offset: -2px; }
.desk-due-pick {
  font: inherit; font-size: 15px; background: var(--glass-pane); color: var(--glass-ink);
  border: 1px solid var(--glass-row); border-radius: 3px; padding: 2px 6px; margin: 2px 0;
}

.desk-due-sep { border-top: 1px solid var(--glass-row); margin: 3px 0; }
.desk-due-item.danger:hover { background: var(--glass-row); color: var(--glass-danger); }
.desk-due-item[disabled] { color: var(--glass-muted); cursor: not-allowed; }
.desk-due-item[disabled]:hover { background: transparent; color: var(--glass-muted); }
.desk-due-rename {
  font: inherit; font-size: 15px; background: var(--glass-pane); color: var(--glass-ink);
  border: 1px solid var(--glass-row); border-radius: 3px; padding: 2px 6px; margin: 2px 0;
  width: 240px;
}
.desk-due-rename:focus { border-color: var(--glass-accent); outline: none; }
.desk-blocked { color: #e0a35f; border-color: #5c4628; }
.desk-line.task .desk-mark { color: var(--glass-accent); }

.desk-line.bucket-overdue .desk-mark { color: var(--glass-danger); }
.desk-line.bucket-today .desk-mark { color: var(--glass-accent); }
.desk-line.bucket-week .desk-mark,
.desk-line.bucket-later .desk-mark,
.desk-line.bucket-undated .desk-mark { color: var(--glass-line); }

.desk-check {
  appearance: none; -webkit-appearance: none;
  flex-shrink: 0; align-self: center; width: 20px; height: 20px; margin: 0;
  background: var(--glass-field); border: 1px solid var(--glass-row); border-radius: 3px;
  cursor: pointer; position: relative;
}
.desk-check:hover { border-color: var(--glass-accent); }

.desk-check::after {
  content: ""; position: absolute; left: 5px; top: 2px;
  width: 7px; height: 11px; opacity: 0.18;
  border-right: 2px solid var(--glass-accent); border-bottom: 2px solid var(--glass-accent);
  transform: rotate(40deg);
}
.desk-check:hover::after { opacity: 0.5; }

#desk-add {
  display: flex; gap: 6px; align-items: center;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--glass-row);
}
#desk-add select, #desk-add input {
  font: inherit; font-size: 16px; background: var(--glass-field); color: var(--glass-ink);
  border: 1px solid var(--glass-row); border-radius: 3px; padding: 3px 6px;
}

#desk-add-name { flex: 1; min-width: 0; }
#desk-add-project { max-width: 190px; }
#desk-add select:focus, #desk-add input:focus { outline: none; border-color: var(--glass-accent); }

#desk-add-parsed { font-size: 14px; color: var(--glass-muted); min-height: 0; padding-top: 4px; }
#desk-add-parsed:empty { display: none; }
#desk-add-error { font-size: 15px; color: var(--glass-danger); min-height: 0; padding-top: 4px; }
#desk-add-error:empty { display: none; }

#desk-add.hidden { display: none; }
#desk-add-project.hidden, #desk-add-due.hidden, #desk-add-who.hidden { display: none; }
#desk-add-who { max-width: 104px; }
#desk-waiting-section.hidden { display: none; }

#desk-add-kinds { display: flex; gap: 5px; margin-top: 12px; }
.desk-kind {
  font: inherit; font-size: 16px; letter-spacing: 1px;
  background: transparent; color: var(--glass-muted);
  border: 1px solid var(--glass-row); border-radius: 3px; padding: 1px 11px; cursor: pointer;
}
.desk-kind:hover { color: var(--glass-ink); }
.desk-kind.on { background: var(--glass-row); color: var(--glass-accent); border-color: var(--glass-line); }
.desk-kind:focus-visible { outline: 2px solid var(--glass-accent); outline-offset: 1px; }
#desk-add { border-top: 0; margin-top: 6px; padding-top: 0; }

.desk-fold {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  font: inherit; font-size: 15px; color: var(--glass-muted); cursor: pointer;
  background: transparent; border: 0; border-top: 1px solid var(--glass-row);
  margin-top: 14px; padding: 9px 2px 0; text-align: left;
}
.desk-fold:hover { color: var(--glass-ink); }
.desk-fold:focus-visible { outline: 2px solid var(--glass-accent); outline-offset: 2px; }
.desk-fold-count { font-size: 14px; color: var(--glass-muted); }

.desk-bucket-head.quiet { color: var(--glass-muted); font-size: 14px; letter-spacing: 1.5px; }

.desk-who {
  flex-shrink: 0; font-size: 13px; letter-spacing: 1px; color: var(--glass-accent);
  border: 1px solid var(--glass-line); border-radius: 2px; padding: 0 5px;
}

.desk-crumb {
  flex-shrink: 1; min-width: 0; font-size: 14px; color: var(--glass-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

#desk-waiting { display: flex; flex-wrap: wrap; gap: 6px; }
.desk-tal {
  flex: 1; min-width: 92px; display: flex; flex-direction: column; gap: 1px;
  background: var(--glass-field); border: 1px solid var(--glass-row); border-radius: 3px; padding: 5px 9px;
}
.desk-tal-n { font-size: 20px; color: var(--glass-ink); font-variant-numeric: tabular-nums; }
.desk-tal-n.accent { color: var(--glass-accent); }
.desk-tal-cap { font-size: 13px; color: var(--glass-muted); }

.desk-tal-open { font: inherit; text-align: left; cursor: pointer; }
.desk-tal-open:hover { border-color: var(--glass-accent); }
.desk-tal-open:focus-visible { outline: 2px solid var(--glass-accent); outline-offset: 1px; }

#tracker .desk-check { padding: 0; width: 20px; height: 20px; }
.tracker-task-due {
  flex-shrink: 0; font-size: 13px; color: var(--glass-muted);
  border: 1px solid var(--glass-row); border-radius: 2px; padding: 0 5px;
}
.tracker-task-due.late { color: var(--glass-danger); border-color: #5c3428; }
.tracker-task-who {
  flex-shrink: 0; font-size: 13px; letter-spacing: 1px; color: var(--glass-accent);
  border: 1px solid var(--glass-line); border-radius: 2px; padding: 0 5px; text-transform: uppercase;
}
.tracker-add-task-due { flex: none; width: 132px; }
.tracker-add-task-line { flex: none; max-width: 150px; }
.tracker-empty-note { font-size: 15px; color: var(--glass-muted); padding: 3px 2px 5px; }
#board-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
}
#board-header h2 { font-size: 30px; font-weight: 400; letter-spacing: 2px; color: var(--glass-accent); }
#board-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.board-tab {
  font: inherit; font-size: 16px; flex: 1;
  background: var(--glass-row); color: var(--glass-secondary);
  border: 2px solid var(--glass-line); border-radius: 3px;
  padding: 4px 0; cursor: pointer;
}
.board-tab:hover:not(:disabled) { border-color: var(--glass-accent); color: var(--glass-ink); }
.board-tab.active { background: var(--glass-hover); color: var(--glass-accent); border-color: var(--glass-accent); }

.board-tab:disabled { opacity: 0.35; cursor: not-allowed; }
#board-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
#board-count { font-size: 17px; color: var(--glass-secondary); }
#board-list { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.board-empty { color: var(--glass-secondary); font-size: 18px; }

.board-scope { align-self: flex-start; margin-top: 16px; }
.board-group-label {
  font-size: 13px; color: var(--glass-muted);
  text-transform: uppercase; letter-spacing: 1.5px;
  margin-top: 6px;
}
.board-group-label:first-child { margin-top: 0; }

.board-subgroup-label {
  font-size: 11px; color: var(--glass-muted);
  text-transform: uppercase; letter-spacing: 1px;
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid rgba(191, 174, 148, 0.15);
}

.board-ticket {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--glass-row); border: 2px solid var(--glass-line); border-radius: 3px;
  padding: 7px 10px; text-align: left;
  font: inherit; color: var(--glass-ink); width: 100%;
}
.board-ticket:hover { border-color: var(--glass-accent); }
.board-ticket.done { opacity: 0.55; }
.board-ticket-body {
  display: flex; align-items: flex-start; gap: 10px;
  flex: 1 1 auto; min-width: 0;
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}

.board-ticket .board-check {
  align-self: center; margin: 0 0 0 4px;
  width: 22px; height: 22px;
}
.board-check::before {
  content: ""; position: absolute; left: 6px; top: 3px;
  width: 5px; height: 10px; border: solid var(--glass-line);
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.board-check:hover::before { border-color: var(--glass-muted); }
.board-check:checked::before { display: none; }
.board-check:checked::after { left: 6px; top: 3px; width: 5px; height: 10px; }
.board-check:disabled { cursor: not-allowed; opacity: 0.35; }
.board-check:disabled:hover { border-color: var(--glass-line); }
.board-check:disabled:hover::before { border-color: var(--glass-line); }
#board-notice {
  font-size: 15px; color: var(--glass-danger);
  border: 1px solid #6b4436; border-radius: 3px;
  background: #3a2620; padding: 4px 8px;
}
#board-notice.hidden { display: none; }

#arcade {
  z-index: 22;
  background:
    radial-gradient(ellipse at center, #171633 0%, #07060f 72%);
}
#arcade-panel {
  
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 12px;
  background: linear-gradient(#16152b, #0e0d1c);
  border: 3px solid #3b3a6b;
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 2px #07060f,
    0 0 0 1px #5a58a0,
    0 0 46px rgba(62, 232, 240, 0.16),
    6px 6px 0 #07060f;
  padding: 16px 26px 20px;
  max-width: 97vw;
}
#arcade-header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; width: 100%;
}
#arcade-header h2 {
  font-size: 30px; color: #3ee8f0; letter-spacing: 2px;
  text-shadow: 0 0 14px rgba(62, 232, 240, 0.5);
}
#arcade-close { color: #7a78a8; }
#arcade-record { font-size: 17px; color: #b9b6e8; text-align: center; }

#arcade-canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border: 2px solid #07060f;
  border-radius: 3px;
  background: #0b0a14;
  display: block;
  cursor: crosshair;
  box-shadow: 0 0 0 1px #3b3a6b, 0 0 34px rgba(62, 232, 240, 0.13);
}
#arcade-canvas.hidden { display: none; }
#arcade-foot {
  display: flex; justify-content: space-between; gap: 24px;
  width: 100%; font-size: 16px; color: #7a78a8;
}
#arcade-score { color: #ffce3d; }

#arcade-message {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  border: 2px solid #5a58a0; border-radius: 4px;
  background: rgba(14, 13, 28, 0.96);
  box-shadow: 0 0 44px rgba(0, 0, 0, 0.7), 0 0 0 1px #07060f;
  padding: 18px 34px; min-width: 300px;
}
#arcade-message.hidden { display: none; }
#arcade-message b {
  font-size: 25px; color: #ffce3d; letter-spacing: 1px;
  text-shadow: 0 0 16px rgba(255, 206, 61, 0.45);
}
#arcade-message span { font-size: 17px; color: #b9b6e8; }
#arcade-message .tracker-btn {
  border-color: #5a58a0; color: #3ee8f0;
}

.arcade-again-row { display: flex; gap: 10px; }

#arcade-modes { display: flex; gap: 12px; }
.arcade-mode {
  font-family: inherit; font-size: 17px; cursor: pointer;
  background: #1f1e3a; color: #b9b6e8;
  border: 2px solid #3b3a6b; border-radius: 4px;
  padding: 6px 18px;
}
.arcade-mode:hover { border-color: #3ee8f0; color: #f2f0ff; }
.arcade-mode.on {
  background: #2b2a52; border-color: #3ee8f0; color: #3ee8f0;
}
#arcade-modes.hidden { display: none; }

#arcade-lobby {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: min(640px, 90vw); padding: 28px 12px; text-align: center;
}
#arcade-lobby.hidden { display: none; }
#arcade-lobby > b { font-size: 26px; color: #ffce3d; }
#arcade-lobby > span { font-size: 17px; color: #b9b6e8; }
#arcade-lobby .arcade-none { color: #7a78a8; }
.arcade-invite { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.arcade-invite .tracker-btn { font-size: 18px; }
.arcade-invite .tracker-btn:disabled { opacity: 0.5; cursor: default; }

#challenge {
  position: fixed;
  bottom: 132px; left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px;
  background: linear-gradient(180deg, #2a2114 0%, var(--glass-field) 100%);
  border: 1px solid #6f5a33;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
  font-family: "VT323", monospace;
  font-size: 21px;
  color: var(--glass-ink);
}
#challenge.hidden { display: none; }
#challenge .challenge-actions { display: flex; gap: 8px; }

#arcade-scores {
  display: flex; flex-direction: column; gap: 2px;
  width: min(640px, 90vw);
}
#arcade-scores.hidden { display: none; }

.score-row {
  display: grid; grid-template-columns: 1fr 220px 1fr;
  align-items: center; gap: 12px;
  padding: 11px 12px; border-bottom: 1px solid #26254a;
}
.score-row.empty { opacity: 0.5; }
.score-game { font-size: 19px; color: #b9b6e8; letter-spacing: 0.4px; }
.score-figure { text-align: center; white-space: nowrap; }
.score-figure b {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 26px; font-weight: 700; color: #3ee8f0;
  font-variant-numeric: tabular-nums; letter-spacing: -0.5px;
}
.score-holder { text-align: right; white-space: nowrap; }
.score-holder b { font-size: 28px; color: #ffce3d; display: block; line-height: 1; }
.score-holder span { font-size: 13px; color: #7a78a8; }

.score-figure b.none, .score-holder b.none { color: #56548a; font-size: 20px; font-weight: 400; }
.score-holder b.none { font-family: inherit; }
.score-wins {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px;
  padding: 16px 12px 2px;
}
.score-wins b { font-size: 17px; color: #b9b6e8; width: 100%; letter-spacing: 0.4px; }
.score-wins span { font-size: 17px; color: #f2f0ff; }
.score-wins span i {
  font-style: normal; font-family: system-ui, -apple-system, sans-serif;
  font-weight: 700; color: #ffce3d;
}
.score-wins span.none { color: #56548a; }

.chip-group { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font: inherit; font-size: 17px; cursor: pointer;
  background: var(--glass-pane); color: var(--glass-secondary);
  border: 2px solid var(--glass-line); border-radius: 3px; padding: 2px 9px;
}
.chip:hover { border-color: var(--glass-muted); }
.chip.on { background: var(--glass-accent); border-color: var(--glass-accent); color: var(--glass-row); }
.chip:focus-visible { outline: 2px solid var(--glass-accent); outline-offset: 1px; }

.tracker-who {
  font: inherit; cursor: pointer; flex: 0 0 auto;
  display: flex; align-items: center; gap: 2px;
  background: none; border: 0; padding: 0 2px;
}

.tracker-who-dot {
  width: 15px; height: 15px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1;
  background: var(--glass-line); color: #e0d3bd;
  border: 1px solid #6a5540;
  margin-left: -4px;
}
.tracker-who-dot:first-child { margin-left: 0; }

.tracker-who-more { font-size: 13px; color: var(--glass-muted); margin-left: 1px; }

.tracker-who-dot.mine { background: var(--glass-accent); border-color: var(--glass-accent); color: var(--glass-row); }

.tracker-who.open {
  color: var(--glass-muted); font-size: 16px;
  border: 1px dashed var(--glass-line); border-radius: 50%;
  width: 17px; height: 17px; justify-content: center; padding: 0;
}
.tracker-who.open:hover { color: var(--glass-accent); border-color: var(--glass-muted); }
.tracker-who:hover .tracker-who-dot { border-color: var(--glass-muted); }

.tracker-pace-flag {
  font: inherit; font-size: 14px; line-height: 1;
  cursor: pointer; flex: 0 0 auto;
  background: none; border: 0; padding: 0 2px;
  color: var(--glass-danger);
}
.tracker-pace-flag:hover { color: #f09a80; }
.tracker-pace {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 15px; color: var(--glass-secondary);
  border-left: 2px solid var(--glass-line);
  padding: 2px 0 2px 8px;
  margin-bottom: 8px;
}
.tracker-pace.under { color: var(--glass-danger); border-left-color: var(--glass-danger); }
.tracker-pace.quiet { color: var(--glass-muted); }
.tracker-pace-note { font-size: 14px; color: var(--glass-muted); }

.field-note { font-size: 15px; color: var(--glass-muted); }
.field-note.hidden { display: none; }
.board-ticket-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.board-ticket-title { font-size: 20px; line-height: 1.1; }
.board-ticket-meta { font-size: 15px; color: var(--glass-muted); }
.board-ticket-desc {
  font-size: 15px; color: var(--glass-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.board-tag {
  font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
  border: 1px solid var(--glass-muted); border-radius: 3px;
  padding: 0 5px; color: var(--glass-secondary); flex: none;
}
.board-tag-bug { border-color: var(--glass-danger); color: var(--glass-danger); }
.board-tag-request { border-color: #7fa8c9; color: #7fa8c9; }
.board-tag-idea { border-color: var(--glass-accent); color: var(--glass-accent); }
.board-prio-high { color: var(--glass-danger); }

#ticket-form-delete.hidden { display: none; }
#board-bar.hidden, #board-list.hidden, #board-todo.hidden { display: none; }

#board-todo { display: flex; flex-direction: column; min-height: 0; }
#board-todo-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
#board-todo-count { font-size: 17px; color: var(--glass-secondary); flex: none; }
#board-todo-new { display: flex; gap: 8px; }
#board-todo-folder-input {
  font: inherit; font-size: 17px; width: 190px;
  background: var(--glass-field); color: var(--glass-ink);
  border: 2px solid var(--glass-hover); border-radius: 3px; padding: 3px 8px;
}
#board-todo-folder-input:focus { outline: none; border-color: var(--glass-accent); }
#board-todo-folder-input::placeholder { color: var(--glass-muted); }
#board-todo-lists { overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.todo-folder {
  background: var(--glass-row); border: 2px solid var(--glass-line); border-radius: 3px;
  padding: 8px 10px; display: flex; flex-direction: column; gap: 3px;
}
.todo-folder-head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.todo-folder-name {
  font: inherit; font-size: 21px; color: var(--glass-accent);
  background: none; border: none; padding: 0; cursor: pointer; text-align: left;
}
.todo-folder-name:hover { text-decoration: underline; }
.todo-folder-count { font-size: 15px; color: var(--glass-muted); flex: 1 1 auto; }

.todo-folder { --todo-indent: 46px; }

.todo-item { display: flex; align-items: center; gap: 8px; padding: 1px 0; user-select: none; }
.todo-item .todo-inline-edit { user-select: text; }

.todo-item[draggable="true"] { cursor: grab; }
.todo-item[draggable="true"]:active { cursor: grabbing; }
.todo-item.dragged { opacity: 0.35; }
.todo-grip { flex: none; width: 14px; height: 14px; color: #4e4132; }
.todo-item:hover .todo-grip { color: var(--glass-muted); }
.todo-grip svg { width: 14px; height: 14px; fill: currentColor; display: block; }

.todo-band {
  font-size: 14px; letter-spacing: 2px; text-transform: uppercase;
  margin-top: 5px; color: var(--glass-muted);
}
.todo-band-high { color: var(--glass-danger); }
.todo-band-medium { color: var(--glass-accent); }
.todo-band-hidden, .todo-band-solo { display: none; }
#board-todo-lists.dragging .todo-band-hidden,
#board-todo-lists.dragging .todo-band-solo { display: block; }

#board-todo-lists.dragging .todo-band-items:empty {
  min-height: 20px; border: 1px dashed var(--glass-line); border-radius: 3px;
}

#board-todo-lists.dragging .todo-band-section { padding-bottom: 2px; }

.todo-drop-line {
  height: 2px; background: var(--glass-accent); margin: 1px 0;
  box-shadow: 0 0 4px rgba(232, 180, 101, 0.6);
}

.todo-check {
  appearance: none; -webkit-appearance: none; margin: 0; position: relative;
  width: 16px; height: 16px; flex: none; cursor: pointer;
  background: var(--glass-pane); border: 2px solid var(--glass-line); border-radius: 2px;
}
.todo-check:hover { border-color: var(--glass-muted); }
.todo-check:checked { background: var(--glass-accent); border-color: var(--glass-accent); }
.todo-check:checked::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px; border: solid var(--glass-row);
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.todo-check:focus-visible { outline: 2px solid var(--glass-accent); outline-offset: 1px; }
.todo-priority {
  font: inherit; font-size: 14px; flex: none; cursor: pointer;
  background: var(--glass-pane); color: var(--glass-accent);
  border: 1px solid var(--glass-line); border-radius: 3px; padding: 0 2px;
}
.todo-priority:focus { outline: none; border-color: var(--glass-accent); }
.todo-priority.prio-high { color: var(--glass-danger); }
.todo-priority.prio-low { color: var(--glass-muted); }
.todo-text {
  font: inherit; font-size: 18px; color: var(--glass-ink); flex: 1 1 auto;
  background: none; border: none; padding: 0; cursor: text; text-align: left;
}
.todo-item.done .todo-text { color: var(--glass-muted); text-decoration: line-through; }
.todo-inline-edit {
  font: inherit; font-size: 18px; flex: 1 1 auto;
  background: var(--glass-field); color: var(--glass-ink);
  border: 2px solid var(--glass-accent); border-radius: 3px; padding: 1px 6px;
}
.todo-inline-edit:focus { outline: none; }
.todo-add-row {
  display: flex; align-items: center; gap: 8px;
  margin-left: var(--todo-indent, 23px); margin-top: 4px;
}
.todo-add-row .todo-add { flex: 1 1 auto; margin: 0; }
.todo-add {
  font: inherit; font-size: 18px; margin-top: 4px; margin-left: var(--todo-indent, 23px);
  background: transparent; color: var(--glass-ink);
  border: none; border-bottom: 1px dashed var(--glass-line); padding: 2px 0;
}
.todo-add:focus { outline: none; border-bottom-color: var(--glass-accent); }
.todo-add::placeholder { color: var(--glass-muted); }

.todo-icon-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--glass-muted); display: flex; align-items: center; flex: none;
}
.todo-icon-btn svg { width: 12px; height: 12px; fill: currentColor; }
.todo-icon-btn:hover:not(:disabled) { color: var(--glass-danger); }
.todo-icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.todo-del { visibility: hidden; }
.todo-item:hover .todo-del, .todo-folder-head .todo-del { visibility: visible; }
.todo-done-toggle {
  font: inherit; font-size: 15px; color: var(--glass-muted);
  background: none; border: none; padding: 2px 0; cursor: pointer;
  align-self: flex-start; margin-left: var(--todo-indent, 23px);
}
.todo-done-toggle:hover { color: var(--glass-accent); }
#stop-classify-confirm-group { display: flex; gap: 8px; }

#log-manual { z-index: 25; }
#log-manual-date, #catchup-date {
  font: inherit; font-size: 18px;
  background: var(--glass-field);
  color: var(--glass-ink);
  border: 2px solid var(--glass-hover);
  border-radius: 3px;
  padding: 4px 8px;
  outline: none;
  
}
#log-manual-date:focus, #catchup-date:focus { border-color: var(--glass-accent); }
#log-manual-error { color: var(--glass-danger); font-size: 15px; min-height: 18px; margin-bottom: 6px; }

#log-manual-split.hidden { display: none; }

.tracker-manual-label { color: var(--glass-muted); font-size: 14px; margin-top: 6px; }
.tracker-manual-line { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--glass-secondary); }
.tracker-manual-line .tracker-delete-btn { padding: 0 2px; }
.tracker-manual-line .tracker-btn { font-size: 13px; padding: 1px 7px; }
.tracker-manual-tag { font-size: 12px; color: var(--glass-muted); }

.tracker-lines-alloc { color: var(--glass-accent); margin-left: 8px; cursor: help; }

.tracker-task-assignment { display: block; max-width: 100%; white-space: normal; text-align: left; margin: 0 0 8px 26px; font-size: 12px; }
.tracker-task-assignment.unassigned { color: var(--glass-accent); }
.tracker-task-billing { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tracker-task-billing select { min-width: 0; max-width: 100%; flex: 1; }
.tracker-lines { margin-bottom: 8px; }
.tracker-line-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; color: var(--glass-ink);
  padding: 3px 0;
}

.tracker-line-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  cursor: pointer;
}
.tracker-line-name:hover { color: #fff; }

.tracker-line-price {
  font-family: inherit; font-size: 13px;
  background: var(--glass-row); color: var(--glass-accent);
  border: 1px solid var(--glass-line); border-radius: 3px;
  padding: 1px 7px; cursor: pointer;
}
.tracker-line-price:hover { border-color: var(--glass-muted); }
.tracker-line-price.locked { color: var(--glass-muted); cursor: not-allowed; }
.tracker-line-price-edit { display: flex; align-items: center; gap: 4px; }
.tracker-line-price-edit select {
  font-family: inherit; font-size: 13px;
  background: var(--glass-field); color: var(--glass-ink);
  border: 1px solid var(--glass-line); border-radius: 3px; padding: 1px 4px;
}
.tracker-line-amount { width: 74px; font-size: 13px; padding: 1px 5px; }

.tracker-line-time {
  font-size: 13px; color: var(--glass-muted); white-space: nowrap;
  flex: 0 0 auto; min-width: 58px; text-align: right;
}
.tracker-line-control {
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  flex: 0 0 auto; min-width: 58px;
}
.tracker-line-row .tracker-btn { font-size: 13px; padding: 1px 7px; }
.tracker-add-line { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.tracker-add-line .tracker-input { flex: 1; font-size: 14px; padding: 2px 6px; }

.tracker-add-line-btn { font-size: 13px; padding: 1px 8px; }

.tracker-line-details {
  margin: 2px 0 8px 12px; padding-left: 10px;
  border-left: 2px solid var(--glass-row);
}

.tracker-task-time {
  display: flex; flex-direction: column; align-items: flex-end; gap: 0;
  flex: 0 0 auto; min-width: 72px; text-align: right;
}
.tracker-task-today { font-size: 15px; color: var(--glass-accent); line-height: 1.15; }
.tracker-task-today.idle { color: var(--glass-muted); }
.tracker-task-all { font-size: 11px; color: var(--glass-muted); white-space: nowrap; }

.tracker-task-tag {
  font-size: 14px; color: var(--glass-accent); background: var(--glass-row);
  border-radius: 3px; padding: 0 6px;
}

.tracker-all-details { margin-top: 8px; border-top: 1px solid var(--glass-row); padding-top: 6px; }

#project-salary { z-index: 26; }
#project-salary-preview { min-height: 20px; }
#project-salary-preview.on { color: var(--glass-accent); }
#project-salary select { min-width: 150px; }

.tracker-salary {
  display: flex; flex-direction: column; gap: 2px;
  margin: 0 0 8px; padding: 6px 0 6px 10px;
  border-left: 2px solid var(--glass-muted);
  font-size: 15px; color: var(--glass-secondary);
}
.tracker-salary b { color: var(--glass-accent); font-weight: normal; }
.tracker-salary-head { color: var(--glass-muted); font-size: 14px; }
.tracker-salary-note { font-size: 14px; color: var(--glass-muted); }
#project-billing { z-index: 26; }
.modal-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.modal-field label { font-size: 17px; color: var(--glass-secondary); }

.modal-field.hidden { display: none; }

.modal-field input[type="text"], .modal-field input[type="date"], .modal-field select {
  font: inherit; font-size: 18px; padding: 5px 9px; width: 100%;
  background: var(--glass-pane); color: var(--glass-ink);
  border: 2px solid var(--glass-muted); border-radius: 4px;
}
.modal-field input[type="text"]:focus, .modal-field input[type="date"]:focus,
.modal-field select:focus { outline: none; border-color: var(--glass-accent); }
.modal-field input::placeholder { color: var(--glass-muted); }
.modal-check {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 18px; color: var(--glass-ink); margin-bottom: 12px;
}
.modal-check input { width: 15px; height: 15px; accent-color: var(--glass-accent); }

#project-billing-fields.hidden { display: none; }

#project-billing-newclient { margin-top: 2px; }
#project-billing-newclient.hidden { display: none; }
#project-billing-newclient input[type="text"] { flex: 1 1 auto; width: auto; text-align: left; }
#project-billing-number { width: 140px; letter-spacing: 1px; }
.modal-field .modal-hint { font-size: 14px; color: var(--glass-muted); }

.modal-row { display: flex; align-items: center; gap: 8px; }
.modal-row select { flex: 1 1 auto; }
.modal-row input[type="text"] { width: 90px; text-align: right; flex: none; }
.modal-row .modal-hint { flex: none; }

.modal-slider-hint { font-size: 14px; color: var(--glass-muted); margin: -4px 0 12px; }
#project-billing-error { color: var(--glass-danger); font-size: 15px; min-height: 18px; margin-bottom: 6px; }

#project-billing-lines-note.off { display: none; }
#project-billing-lines-note.warn { color: var(--glass-accent); }

.tracker-invoice-tag {
  font: inherit; font-size: 14px; color: var(--glass-success);
  background: none; border: 1px solid #4a5a4c;
  border-radius: 3px; padding: 0 6px; white-space: nowrap; cursor: pointer;
}
.tracker-invoice-tag:hover { border-color: var(--glass-success); color: #c7e0ca; }

.tracker-invoice-tag.off { color: var(--glass-muted); border-color: #4a3f36; }
.tracker-invoice-tag.off:hover { color: var(--glass-secondary); border-color: var(--glass-muted); }

.tracker-seg-note { font-size: 13px; color: var(--glass-muted); font-style: italic; }
.tracker-seg-extra { font-size: 13px; color: var(--glass-accent); font-weight: 600; }

#hud, #xp, #chat, .hint-pop, #feedback {
  background: linear-gradient(rgba(32, 25, 19, 0.95), rgba(23, 18, 13, 0.95));
  border: 2px solid var(--glass-line);
  border-radius: 4px;
  box-shadow:
    inset 0 2px 0 rgba(255, 228, 180, 0.09),
    inset 0 0 0 1px rgba(0, 0, 0, 0.45),
    0 4px 0 rgba(0, 0, 0, 0.26),
    0 7px 16px rgba(0, 0, 0, 0.35);
}

#tracker-panel, #board-panel, .modal-panel, #celebration, #levelup {
  background: linear-gradient(var(--glass-pane), var(--glass-pane));
  border: 2px solid var(--glass-line);
  border-radius: 5px;
  box-shadow:
    inset 0 2px 0 rgba(255, 228, 180, 0.08),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    0 8px 0 rgba(0, 0, 0, 0.25),
    0 14px 30px rgba(0, 0, 0, 0.45);
}

#hud-title {
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--glass-accent);
  padding-bottom: 3px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--glass-line);
}
#chat-channel {
  color: var(--glass-accent);
  text-transform: uppercase;
  letter-spacing: 2px;
  border-bottom: 1px solid var(--glass-line);
}
#tracker-header, #board-header { border-bottom: 1px solid var(--glass-line); padding-bottom: 8px; }

.tracker-btn, .hud-project-btn, .board-tab {
  background: linear-gradient(var(--glass-row), var(--glass-row));
  border-color: var(--glass-line);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 228, 180, 0.14);
  transition: transform 0.06s ease-out;
}
.tracker-btn:hover, .hud-project-btn:hover {
  background: linear-gradient(var(--glass-hover), var(--glass-row));
  border-color: var(--glass-accent);
  transform: translateY(-1px);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 228, 180, 0.14);
}
.tracker-btn:active, .hud-project-btn:active {
  transform: translateY(1px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(0, 0, 0, 0.15);
}

.tracker-btn-danger { border-color: var(--glass-danger); }

#hint b {
  display: inline-block;
  min-width: 24px;
  text-align: center;
  color: #2a1d10;
  background: linear-gradient(#f4cd8b, #dfa658);
  border-radius: 3px;
  padding: 0 6px;
  margin-right: 3px;
  box-shadow: 0 3px 0 #a87a3e, inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}
.hint-pop { padding: 6px 18px 8px; } 

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--glass-line);
  border-radius: 5px;
  border: 2px solid var(--glass-pane);
}
*::-webkit-scrollbar-thumb:hover { background: var(--glass-line); }
*::-webkit-scrollbar-track { background: transparent; }

.music-linkrow { display: flex; gap: 8px; align-items: center; }
.music-linkbox {
  flex: 1; min-width: 0;
  background: var(--glass-pane); color: var(--glass-ink);
  border: 1px solid var(--glass-row); border-radius: 3px;
  padding: 6px 8px; font: inherit; font-size: 15px;
}
.music-linkbox:focus { outline: none; border-color: var(--glass-accent); }
.music-linkbox::placeholder { color: var(--glass-muted); }

#music-queue { margin: 2px 0 10px; }
#music-queue:empty { display: none; }
.music-track {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-bottom: 1px solid var(--glass-row);
}
.music-track:last-child { border-bottom: 0; }
.music-track-num { color: var(--glass-muted); font-size: 12px; min-width: 16px; }
.music-track-title {
  flex: 1; min-width: 0; color: var(--glass-secondary); font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.music-track.playing .music-track-title { color: var(--glass-accent); }
.music-track-by { color: var(--glass-muted); font-size: 12px; white-space: nowrap; }
.music-track-drop {
  background: none; border: 0; cursor: pointer;
  color: var(--glass-muted); font: inherit; font-size: 13px; padding: 2px 4px;
}
.music-track-drop:hover { color: var(--glass-danger); }

#music-video {
  position: fixed; left: -10000px; top: 0;
  width: 320px; height: 180px; z-index: 23;
}
#music-video iframe { width: 100%; height: 100%; border: 0; display: block; }

.music-panel {
  width: min(560px, 92vw);
  max-height: 86vh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #2a2119 0%, var(--glass-field) 100%);
  border: 1px solid var(--glass-row);
  border-radius: 4px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,220,160,0.10);
  padding: 18px 20px 16px;
}
#music-header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--glass-row);
  padding-bottom: 10px; margin-bottom: 12px;
}
#music-header h2 {
  margin: 0; font-size: 24px; font-weight: 400;
  color: var(--glass-accent); letter-spacing: 0.5px; text-transform: uppercase;
}
#music-now {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px; margin-bottom: 12px; min-height: 18px;
}
#music-now.music-on { color: var(--glass-accent); }
#music-now.music-off { color: var(--glass-muted); }
#music-stations {
  display: flex; flex-direction: column; gap: 6px;
  overflow-y: auto; padding-right: 4px;
}
.music-station {
  text-align: left; cursor: pointer;
  background: var(--glass-pane); border: 1px solid var(--glass-row); border-radius: 3px;
  padding: 8px 11px; color: #d8c9ae;
  font-family: inherit; font-size: 17px;
  transition: background 0.12s, border-color 0.12s, transform 0.06s;
}
.music-station:hover { background: #2f251b; border-color: #6f5a3f; transform: translateY(-1px); }
.music-station:active { transform: translateY(0); }
.music-station.playing { border-color: var(--glass-accent); background: #33271a; }
.music-station-name { color: #f0e3c8; }
.music-station.playing .music-station-name { color: var(--glass-accent); }
.music-station.playing .music-station-name::after { content: "  ♫ playing"; font-size: 12px; color: var(--glass-accent); }
.music-station-blurb {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px; color: var(--glass-muted); margin-top: 2px;
}
#music-footer { border-top: 1px solid var(--glass-row); margin-top: 14px; padding-top: 12px; }
.music-row {
  display: flex; align-items: center; gap: 10px;
  color: var(--glass-secondary); font-size: 17px; margin-bottom: 8px;
}
.music-row input[type="range"] { flex: 1; accent-color: var(--glass-accent); }
#music-note {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px; color: var(--glass-muted); min-height: 15px; margin-top: 2px;
}

#tv-now {
  font-size: 18px; margin-bottom: 8px; min-height: 22px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#tv-now.music-on { color: var(--glass-accent); }
#tv-now.music-off { color: var(--glass-muted); }
#tv-channels {
  display: flex; flex-direction: column; gap: 6px;
  overflow-y: auto; min-height: 0;
}
#tv-queue { margin: 2px 0 10px; }
#tv-queue:empty { display: none; }

#tv-video-slot { display: none; }
#tv-video-slot.on {
  display: block; aspect-ratio: 16 / 9; margin: 10px 0 8px;
  border: 1px solid var(--glass-row); border-radius: 3px; background: #0d0b09;
}
#tv-video {
  position: fixed; left: -10000px; top: 0;
  width: 480px; height: 270px; z-index: 23; background: #000;
}
#tv-video-frame { width: 100%; height: 100%; }
#tv-video iframe { width: 100%; height: 100%; border: 0; display: block; }

#tv-video video {
  width: 100%; height: 100%; display: block;
  object-fit: contain; background: #000;
}

#tv-video-shield {
  position: absolute; inset: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

#tv-video.inworld {
  pointer-events: none;
  z-index: 2;
  border: 0;
}
#tv-video.inworld #tv-video-shield { pointer-events: none; }

#tv-video.inworld.behind { z-index: -1; }

#world-tags { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
#world-tags canvas {
  position: absolute;
  
  image-rendering: pixelated;
}

#tv-video:fullscreen { width: 100vw; height: 100vh; }
#tv-video:fullscreen #tv-video-frame { width: 100%; height: 100%; }

#tv-video-bar { display: none; }
#tv-video.fs #tv-video-bar {
  display: flex; align-items: center; gap: 12px;
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 60%);
  opacity: 0; transition: opacity 180ms ease; pointer-events: none;
}
#tv-video.fs #tv-video-bar.on { opacity: 1; pointer-events: auto; }
#tv-fs-now {
  flex: 1; min-width: 0; color: var(--glass-ink); font-size: 15px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.tv-controls { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }

.tv-controls.hidden { display: none; }
.tv-controls-note {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px; color: var(--glass-muted);
}

#tv-cc.on, #tv-fs-cc.on { border-color: var(--glass-accent); color: var(--glass-accent); }