/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --accent: #e8002d;
  --accent2: #ff6b00;
  --warn-color: #ff6b00;
  --alert-color: #e8002d;
  --text-hi: #ffffff;
  --text-mid: rgba(255,255,255,0.65);
  --text-lo: rgba(255,255,255,0.35);
  --bg-panel: #1a1a1a;
  --bg-card: #242424;
  --bg-secondary: #2e2e2e;
  --border: rgba(255,255,255,0.10);
  --border-hover: rgba(255,255,255,0.22);
  --text-primary: #f0f0ee;
  --text-secondary: #aaa9a3;
  --text-tertiary: #666660;
  --radius-md: 8px;
  --radius-lg: 12px;
}

html, body { height: 100%; font-family: 'Rajdhani', sans-serif; background: var(--bg-panel); }

/* ── Display Panel ── */
#display-panel {
  position: relative;
  width: 100%;
  height: 460px;
  overflow: hidden;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#display-panel.fullscreen {
  position: fixed;
  inset: 0;
  height: 100dvh !important;
  width: 100vw;
  z-index: 9999;
}

#bg-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.6s ease;
}

#bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.28) 40%, rgba(0,0,0,0.65) 100%);
}

/* ── Corner Brackets ── */
#corner-tl, #corner-bl, #corner-br { position: absolute; z-index: 3; width: 20px; height: 20px; opacity: 0.5; }
#corner-tl { top: 12px; left: 12px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); }
#corner-tr {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; z-index: 5;
  display: flex; align-items: flex-start; justify-content: flex-end;
}
#corner-tr::before {
  content: ''; position: absolute; top: 0; right: 0;
  width: 20px; height: 20px;
  border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); opacity: 0.5;
}
#corner-bl { bottom: 12px; left: 12px; border-bottom: 2px solid var(--accent); border-left: 2px solid var(--accent); }
#corner-br { bottom: 12px; right: 12px; border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent); }

/* ── Fullscreen button ── */
#fs-btn {
  background: none; border: none; cursor: pointer; padding: 2px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.6; transition: opacity 0.2s; position: relative; z-index: 4;
}
#fs-btn:hover { opacity: 1; }

/* ── Built by Budny watermark ── */
#fs-exit-hint {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 10; font-family: 'Rajdhani', sans-serif; font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255,255,255,0.3); background: rgba(0,0,0,0.4);
  padding: 4px 14px; border-radius: 2px;
  pointer-events: none; opacity: 0; transition: opacity 0.5s; white-space: nowrap;
}
#display-panel.fullscreen #fs-exit-hint { opacity: 1; }

/* ── Display Content ── */
#display-content {
  position: relative; z-index: 3; text-align: center;
  width: 100%; padding: 0 2rem; pointer-events: none;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
}

#session-badge {
  display: inline-block; font-family: 'Rajdhani', sans-serif;
  font-size: 15px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--text-hi); background: var(--accent);
  padding: 7px 26px; margin-bottom: 10px;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
  cursor: pointer; pointer-events: all;
  transition: opacity 0.15s;
}
#session-badge:hover { opacity: 0.82; }

/* ── Badge color controls ── */
.badge-text-btns { display: flex; gap: 6px; }
.badge-text-btn {
  width: 28px; height: 28px; border-radius: 4px;
  border: 0.5px solid var(--border-hover);
  font-size: 13px; font-weight: 700; font-family: 'Rajdhani', sans-serif;
  cursor: pointer; transition: all 0.15s;
}
.badge-text-btn.active { outline: 2px solid var(--accent); outline-offset: 2px; }

#session-name {
  font-family: 'Orbitron', monospace;
  font-size: clamp(20px, 4vw, 38px); font-weight: 700;
  color: var(--text-hi); letter-spacing: 0.05em;
  text-transform: uppercase; margin-bottom: 4px;
}

#session-start-time {
  font-family: 'Orbitron', monospace;
  font-size: clamp(13px, 2vw, 18px); font-weight: 400;
  color: var(--text-mid); letter-spacing: 0.12em;
  margin-bottom: 20px; min-height: 1em;
}

/* ── Countdown digits ── */
#countdown-wrap {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 4px; margin-bottom: 20px;
}

/* Sign block: visible only when showing '-', collapses to zero width when empty so digits stay centered */
.time-block-sign {
  min-width: 0;
  width: 0;
  overflow: visible;
  justify-content: flex-end;
  align-items: flex-end;
  padding-right: 2px;
}
.time-block-sign #cd-sign {
  display: block;
  white-space: nowrap;
  text-align: right;
  font-size: clamp(28px, 5vw, 52px);
  line-height: 1;
  padding-bottom: 16px; /* align with sep baseline */
}

.time-block { display: flex; flex-direction: column; align-items: center; min-width: 72px; }

.time-digits {
  font-family: 'Orbitron', monospace;
  font-size: clamp(38px, 7vw, 72px); font-weight: 900;
  color: var(--text-hi); line-height: 1; letter-spacing: -0.02em;
  transition: color 0.3s ease;
}

.time-digits.state-warn  { color: var(--warn-color); }
.time-digits.state-alert { color: var(--alert-color); animation: pulse 1s infinite; }
.time-digits.state-negative { color: var(--alert-color); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

.time-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-lo); margin-top: 4px;
}

.time-sep {
  font-family: 'Orbitron', monospace; font-size: clamp(32px, 6vw, 58px);
  font-weight: 900; color: var(--text-mid); line-height: 1;
  padding-bottom: 16px; animation: blink 1s step-end infinite;
}
.time-sep.negative { color: var(--alert-color); }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.2} }

/* ── Status row ── */
#status-row {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  font-size: 14px; color: var(--text-mid);
}
#current-time-display {
  font-family: 'Orbitron', monospace; font-size: 15px; color: var(--text-mid); letter-spacing: 0.08em;
}
.dot-sep { color: var(--accent); font-size: 18px; }

#status-pill {
  font-size: 11px; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; padding: 4px 14px; border-radius: 2px;
  color: var(--text-hi); background: rgba(26,127,75,0.25);
  border: 1px solid rgba(26,127,75,0.6); transition: all 0.4s;
}
#status-pill.state-warn    { background: rgba(255,107,0,0.2); border-color: rgba(255,107,0,0.6); color: #ff9040; }
#status-pill.state-alert   { background: rgba(232,0,45,0.3); border-color: rgba(232,0,45,0.9); color: #ff8080; }
#status-pill.state-negative{ background: rgba(232,0,45,0.12); border-color: rgba(232,0,45,0.35); color: var(--text-mid); }
#status-pill.state-ended   { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); color: var(--text-lo); }
#status-pill.state-waiting { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); color: var(--text-lo); }

/* ── Track Map Overlay ── behind content (z:2), overlay (z:1.5 via explicit), above bg-overlay */
#track-map-wrap {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#track-map-wrap.hidden { opacity: 0; pointer-events: none; }
#track-map-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: unset;
  border-radius: 4px;
}
/* Resize handles — hidden by default, visible on hover or during active resize */
#track-map-wrap .map-handle {
  position: absolute; width: 14px; height: 14px;
  background: var(--accent); border-radius: 2px;
  pointer-events: all; z-index: 7;
  opacity: 0;
  transition: opacity 0.15s ease;
}
#track-map-wrap:hover .map-handle,
#track-map-wrap.resizing .map-handle { opacity: 0.85; }
#track-map-wrap .map-handle.br { bottom: -7px; right: -7px; cursor: se-resize; }
#track-map-wrap .map-handle.bl { bottom: -7px; left: -7px;  cursor: sw-resize; }
#track-map-wrap .map-handle.tr { top: -7px;    right: -7px; cursor: ne-resize; }
#track-map-wrap .map-handle.tl { top: -7px;    left: -7px;  cursor: nw-resize; }
/* Drag target */
#track-map-drag {
  position: absolute; inset: 0;
  pointer-events: all; cursor: move;
}

/* Track map controls in panel */
.map-ctrl-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.map-ctrl-label { font-size: 12px; color: var(--text-secondary); min-width: 60px; }
.map-size-input {
  width: 72px; font-size: 13px; padding: 5px 8px; text-align: center;
  border-radius: var(--radius-md); border: 0.5px solid var(--border-hover);
  background: var(--bg-card); color: var(--text-primary); font-family: 'Rajdhani', sans-serif;
}
.map-toggle-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.toggle-switch {
  position: relative; width: 40px; height: 22px; flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0; background: var(--border-hover);
  border-radius: 22px; cursor: pointer; transition: background 0.2s;
}
.toggle-slider::before {
  content: ''; position: absolute; width: 16px; height: 16px;
  left: 3px; top: 3px; background: white; border-radius: 50%; transition: transform 0.2s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--accent); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }
.toggle-label { font-size: 13px; color: var(--text-primary); }

/* ── Fullscreen scaling ── */
#display-panel.fullscreen .time-digits        { font-size: clamp(60px, 12vw, 140px); }
#display-panel.fullscreen .time-block-sign #cd-sign { font-size: clamp(48px, 9vw, 110px); }
#display-panel.fullscreen .time-sep           { font-size: clamp(52px, 10vw, 120px); }
#display-panel.fullscreen #session-name       { font-size: clamp(26px, 5vw, 54px); }
#display-panel.fullscreen #session-badge      { font-size: 18px; padding: 9px 32px; }
#display-panel.fullscreen #session-start-time { font-size: clamp(16px, 2.5vw, 26px); margin-bottom: 28px; }
#display-panel.fullscreen .time-label         { font-size: 13px; }
#display-panel.fullscreen #current-time-display { font-size: 22px; }
#display-panel.fullscreen #status-pill        { font-size: 14px; padding: 6px 20px; }

/* ── Controls Panel ── */
#controls-panel { background: var(--bg-panel); }

/* ── Tab Bar ── */
#tab-bar {
  display: flex;
  border-bottom: 0.5px solid var(--border);
  background: var(--bg-panel);
  position: sticky; top: 0; z-index: 10;
}
.tab-btn {
  flex: 1; padding: 12px 4px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: none; border: none; cursor: pointer;
  color: var(--text-tertiary); font-family: 'Rajdhani', sans-serif;
  border-bottom: 2px solid transparent; margin-bottom: -0.5px;
  transition: color 0.15s, border-color 0.15s;
}
.tab-btn:hover  { color: var(--text-secondary); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Tab Panels ── */
.tab-panel { display: none; padding: 20px 20px; }
.tab-panel.active { display: block; }

.ctrl-section { margin-bottom: 16px; }
.ctrl-section:last-child { margin-bottom: 0; }

.section-title {
  font-size: 11px; font-weight: 600; color: var(--text-secondary);
  letter-spacing: 0.10em; text-transform: uppercase; margin-bottom: 10px;
}
.sub-label {
  font-size: 11px; color: var(--text-tertiary); letter-spacing: 0.06em;
  text-transform: uppercase; margin: 10px 0 6px;
}

.divider { height: 0.5px; background: var(--border); margin: 16px 0; }

/* ── Inputs ── */
.ctrl-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ctrl-label { font-size: 12px; font-weight: 500; color: var(--text-secondary); min-width: 96px; text-transform: uppercase; letter-spacing: 0.05em; }
.ctrl-label.wide { min-width: 130px; }

.ctrl-input {
  flex: 1; min-width: 140px; font-size: 14px; padding: 8px 10px;
  border-radius: var(--radius-md); border: 0.5px solid var(--border);
  background: var(--bg-card); color: var(--text-primary); font-family: 'Rajdhani', sans-serif;
  transition: border-color 0.15s;
}
.ctrl-input:focus { outline: none; border-color: var(--border-hover); }

input[type="text"], input[type="datetime-local"], input[type="number"], input[type="date"], input[type="time"] {
  font-family: 'Rajdhani', sans-serif; color: var(--text-primary);
  background: var(--bg-card); border: 0.5px solid var(--border);
  border-radius: var(--radius-md); padding: 7px 10px; font-size: 13px;
  transition: border-color 0.15s;
}
input:focus { outline: none; border-color: var(--border-hover); }

/* ── Buttons ── */
.ctrl-btn {
  font-size: 13px; font-weight: 500; padding: 7px 16px;
  border-radius: var(--radius-md); border: 0.5px solid var(--border-hover);
  background: var(--bg-card); color: var(--text-primary); cursor: pointer;
  font-family: 'Rajdhani', sans-serif; white-space: nowrap; transition: background 0.15s;
}
.ctrl-btn:hover { background: var(--bg-secondary); }
.ctrl-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.ctrl-btn.primary:hover { background: #c0001f; }
.ctrl-btn.success { background: #1a7f4b; color: #fff; border-color: #1a7f4b; }
.ctrl-btn.success:hover { background: #15603a; }
.ctrl-btn.share { background: #185fa5; color: #fff; border-color: #185fa5; }
.ctrl-btn.share:hover { background: #0c447c; }

/* ── Session table ── */
#sessions-table { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }

.session-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: var(--radius-md); border: 0.5px solid var(--border);
  background: var(--bg-card); cursor: pointer; transition: border-color 0.15s;
}
.session-row:hover { border-color: var(--border-hover); }
.session-row.is-active { border-color: var(--accent); }
.session-row.is-past { opacity: 0.45; }

.session-row-name {
  font-size: 13px; font-weight: 500; color: var(--text-primary);
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.session-row-time { font-size: 12px; color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; }
.session-row-actions { display: flex; gap: 4px; flex-shrink: 0; }

.icon-btn {
  background: none; border: none; cursor: pointer; padding: 3px 7px;
  border-radius: 5px; font-size: 14px; color: var(--text-secondary); transition: background 0.15s;
}
.icon-btn:hover { background: var(--bg-secondary); }
.icon-btn.del:hover { color: var(--accent); }

.session-edit-form {
  display: flex; flex-direction: column; gap: 6px; padding: 10px;
  border-radius: var(--radius-md); border: 1.5px solid var(--accent); background: var(--bg-card);
}
.session-edit-form input { width: 100%; }
.session-edit-actions { display: flex; gap: 6px; }

/* ── Add session form ── */
#add-session-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
#new-session-name { flex: 1; min-width: 120px; }
#new-session-time { min-width: 168px; }

/* ── Threshold row ── */
.thresh-row { flex-wrap: wrap; gap: 8px; }
.threshold-input { width: 66px; text-align: center; }
.thresh-unit { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.color-group { display: flex; align-items: center; gap: 6px; }
.color-label { font-size: 12px; color: var(--text-secondary); }
.color-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.color-swatches { display: flex; gap: 5px; }
.color-swatch {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; transition: border-color 0.15s; flex-shrink: 0;
}
.color-swatch.active { border-color: var(--text-primary); }

.saved-flash { font-size: 12px; color: #1a7f4b; opacity: 0; transition: opacity 0.4s; }

/* ── Background slots ── */
.bg-slots { display: flex; gap: 8px; flex-wrap: wrap; }
.bg-slot {
  width: 52px; height: 36px; border-radius: 6px; border: 2px solid transparent;
  background: var(--bg-secondary); cursor: pointer; display: flex; align-items: center;
  justify-content: center; font-size: 10px; color: var(--text-tertiary);
  transition: border-color 0.15s; background-size: cover; background-position: center;
}
.bg-slot.active { border-color: var(--accent); }
.bg-slot:hover { border-color: var(--border-hover); }

.hint-text { font-size: 12px; color: var(--text-tertiary); }

/* ── Presets ── */
.preset-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-btn {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; padding: 5px 12px;
  border-radius: var(--radius-md); border: 0.5px solid var(--border);
  background: var(--bg-card); color: var(--text-secondary); cursor: pointer;
  font-family: 'Rajdhani', sans-serif; transition: all 0.15s;
}
.chip-btn:hover { border-color: var(--border-hover); }
.chip-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Events list ── */
#events-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }

.event-card {
  border-radius: var(--radius-md); border: 0.5px solid var(--border);
  background: var(--bg-card); overflow: hidden;
}
.event-card-header {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer;
}
.event-card-header:hover { background: var(--bg-secondary); }
.event-card-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.event-bg-thumb {
  width: 44px; height: 30px; border-radius: 4px; object-fit: cover;
  flex-shrink: 0; border: 0.5px solid var(--border);
}
.event-bg-empty {
  width: 44px; height: 30px; border-radius: 4px; border: 0.5px solid var(--border);
  background: var(--bg-secondary); display: flex; align-items: center;
  justify-content: center; font-size: 10px; color: var(--text-tertiary); flex-shrink: 0;
}
.event-card-name { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.event-card-meta { font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }
.event-card-actions { display: flex; gap: 5px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }

.event-share-btn, .event-load-btn, .event-del-btn {
  font-size: 12px; font-weight: 500; padding: 5px 10px;
  border-radius: var(--radius-md); background: transparent; cursor: pointer;
  font-family: 'Rajdhani', sans-serif; transition: background 0.15s;
}
.event-share-btn { border: 0.5px solid #185fa5; color: #185fa5; }
.event-share-btn:hover { background: rgba(24,95,165,0.1); }
.event-load-btn { border: 0.5px solid #1a7f4b; color: #1a7f4b; }
.event-load-btn:hover { background: rgba(26,127,75,0.1); }
.event-del-btn { border: 0.5px solid var(--border-hover); color: var(--text-secondary); }
.event-del-btn:hover { border-color: var(--accent); color: var(--accent); }
/* ev-btn — used by JS renderEvents */
.ev-btn { font-size:12px; font-weight:500; padding:5px 10px; border-radius:var(--radius-md); background:transparent; cursor:pointer; font-family:'Rajdhani',sans-serif; transition:background 0.15s; }
.ev-btn.share { border:0.5px solid #185fa5; color:#185fa5; }
.ev-btn.share:hover { background:rgba(24,95,165,0.1); }
.ev-btn.load { border:0.5px solid #1a7f4b; color:#1a7f4b; }
.ev-btn.load:hover { background:rgba(26,127,75,0.1); }
.ev-btn.save { border:0.5px solid #185fa5; color:#185fa5; }
.ev-btn.save:hover { background:rgba(24,95,165,0.1); }
.ev-btn.del { border:0.5px solid var(--accent); color:var(--accent); }
.ev-btn.del:hover { background:rgba(232,0,45,0.08); }

.event-card-body { border-top: 0.5px solid var(--border); padding: 8px 12px; display: none; }
.event-card-body.open { display: block; }
.event-session-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.event-session-item {
  display: flex; justify-content: space-between; padding: 3px 0;
  font-size: 12px; color: var(--text-secondary);
  border-bottom: 0.5px solid var(--border);
}
.event-session-item:last-child { border-bottom: none; }

/* ── Import ── */
#save-event-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#save-event-name { flex: 1; min-width: 160px; }
.import-section { margin-top: 12px; }
.import-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Share Modal ── */
/* ── Generic modal base ── */
.modal-wrap {
  display: none; position: fixed; inset: 0; z-index: 99998;
  background: rgba(0,0,0,0.65); align-items: center; justify-content: center;
}
.modal-wrap.open { display: flex; }
.modal-box {
  background: var(--bg-card); border-radius: var(--radius-lg);
  border: 0.5px solid var(--border); padding: 24px;
  width: min(380px, 92vw);
}
.modal-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 18px; font-family: 'Rajdhani', sans-serif; letter-spacing: 0.04em; }
.modal-body { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.modal-field { display: flex; flex-direction: column; gap: 5px; }
.modal-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.08em; text-transform: uppercase; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

#share-modal-wrap {
  display: none; position: fixed; inset: 0; z-index: 99998;
  background: rgba(0,0,0,0.55); align-items: center; justify-content: center;
}
#share-modal-wrap.open { display: flex; }
#share-modal {
  background: var(--bg-card); border-radius: var(--radius-lg);
  border: 0.5px solid var(--border); padding: 24px;
  width: min(480px, 92vw); max-height: 90vh; overflow-y: auto;
}
#share-modal-title { font-size: 16px; font-weight: 500; color: var(--text-primary); margin-bottom: 4px; }
#share-modal-meta { font-size: 12px; color: var(--text-tertiary); margin-bottom: 16px; }
.share-option-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }
.share-desc { font-size: 12px; color: var(--text-tertiary); margin-bottom: 10px; line-height: 1.5; }
.share-divider { height: 0.5px; background: var(--border); margin: 16px 0; }
#share-url-box {
  width: 100%; font-size: 11px; padding: 9px 10px; border-radius: var(--radius-md);
  border: 0.5px solid var(--border); background: var(--bg-secondary);
  color: var(--text-secondary); font-family: monospace; resize: none; height: 64px;
  line-height: 1.5; display: block; margin-bottom: 10px;
}
#share-modal-actions { display: flex; gap: 8px; }

/* ── Toast ── */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  background: #1a7f4b; color: #fff; font-family: 'Rajdhani', sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
  padding: 9px 24px; border-radius: 4px; z-index: 999999;
  opacity: 0; transition: opacity 0.3s; pointer-events: none; white-space: nowrap;
}
.toast.show { opacity: 1; }
.toast.error   { background: #c0001f; }
.toast.info    { background: #185fa5; }
.toast.success { background: #1a7f4b; }
.toast.tmpl    { background: #7c3aed; }

/* ── Sessions header ── */
.sessions-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.sessions-header .section-title { margin-bottom:0; }

/* ── Danger button ── */
.ctrl-btn.danger { background:transparent; color:#c0001f; border-color:rgba(192,0,31,0.35); }
.ctrl-btn.danger:hover { background:rgba(232,0,45,0.07); }

/* ── Background image controls ── */
.bg-ctrl-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.bg-ctrl-label { font-size:12px; color:var(--text-secondary); min-width:60px; }
.bg-size-btns { display:flex; gap:5px; }
.size-btn {
  font-size:11px; font-weight:600; padding:4px 10px;
  border-radius:6px; border:0.5px solid var(--border-hover);
  background:var(--bg-card); color:var(--text-secondary);
  cursor:pointer; font-family:'Rajdhani',sans-serif; transition:all 0.15s;
}
.size-btn:hover, .size-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.bg-pos-grid { display:grid; grid-template-columns:repeat(3,28px); gap:3px; }
.pos-btn {
  width:28px; height:28px; border-radius:4px;
  border:0.5px solid var(--border-hover); background:var(--bg-card);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:11px; color:var(--text-secondary); transition:all 0.15s;
}
.pos-btn:hover, .pos-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.bg-opacity-row { display:flex; align-items:center; gap:8px; max-width:100%; }
#bg-opacity-slider { width: 80px; flex-shrink: 0; accent-color:var(--accent); }
#bg-opacity-val { font-size:12px; color:var(--text-secondary); min-width:32px; text-align:right; }

/* ── Templates ── */
#templates-list { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; min-height:24px; }
.tmpl-chip {
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:600; letter-spacing:0.03em;
  padding:5px 10px; border-radius:var(--radius-md);
  border:0.5px solid #8a5cf6; background:rgba(138,92,246,0.08);
  color:#8a5cf6; cursor:pointer; font-family:'Rajdhani',sans-serif; transition:all 0.15s;
}
.tmpl-chip:hover { background:rgba(138,92,246,0.18); }
.tmpl-chip-del {
  font-size:11px; opacity:0.6; line-height:1; padding:0 2px;
  background:none; border:none; cursor:pointer; color:inherit;
}
.tmpl-chip-del:hover { opacity:1; }
.ev-btn.tmpl { border:0.5px solid #8a5cf6; color:#8a5cf6; }
.ev-btn.tmpl:hover { background:rgba(138,92,246,0.1); }
.toast.tmpl { background:#7c3aed; }

  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--bg-card); border-top: 0.5px solid var(--border);
  padding: 14px 20px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; flex-wrap: wrap; z-index: 9000;
}
#install-text { font-size: 14px; font-weight: 500; color: var(--text-primary); }

/* ── Live Sync ── */
#sync-status-row { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.sync-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; transition:background 0.4s; }
.sync-dot-off      { background:var(--border-hover); }
.sync-dot-connecting{ background:#ff6b00; animation:pulse 1s infinite; }
.sync-dot-on       { background:#1a7f4b; }
.sync-dot-error    { background:#e8002d; }
.sync-status-text  { font-size:12px; font-weight:600; color:var(--text-secondary); letter-spacing:0.05em; }
.sync-last-updated { font-size:11px; color:var(--text-tertiary); margin-left:auto; }
.toast.sync        { background:#1a7f4b; }
.toast.sync-err    { background:#e8002d; }

/* ── Layers side-by-side grid ── */
.layers-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: start;
}
.layer-col { display: flex; flex-direction: column; min-width: 0; }
.layer-divider {
  width: 0.5px;
  background: var(--border);
  margin: 0 16px;
  align-self: stretch;
}
.sync-code-box {
  font-family: monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  word-break: break-all;
  background: var(--bg-secondary);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 4px;
  line-height: 1.6;
}
.sync-code-box:hover { background: var(--bg-card); }

/* ── Schedule Overlay ── */
#schedule-wrap {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  min-width: 120px;
  transition: opacity 0.3s ease;
}
#schedule-wrap.hidden { opacity: 0; pointer-events: none; }
#schedule-inner {
  background: rgba(0,0,0,0.62);
  border: 0.5px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  padding: 8px 10px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  width: 100%;
}
.sched-day {
  font-family: 'Rajdhani', sans-serif;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin-top: 6px; margin-bottom: 3px;
}
.sched-day:first-child { margin-top: 0; }
.sched-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; padding: 1px 0;
}
.sched-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.9); letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sched-time {
  font-family: 'Orbitron', monospace;
  font-size: 9px; color: rgba(255,255,255,0.55);
  white-space: nowrap; flex-shrink: 0;
}
.sched-row.past .sched-name {
  text-decoration: line-through;
  color: rgba(232,0,45,0.7);
}
.sched-row.past .sched-time {
  text-decoration: line-through;
  color: rgba(232,0,45,0.45);
}
.sched-row.active-session .sched-name { color: #fff; }

/* Schedule resize handles */
#schedule-wrap .sched-handle {
  position: absolute; width: 12px; height: 12px;
  background: rgba(255,255,255,0.5); border-radius: 2px;
  pointer-events: all; z-index: 6;
  opacity: 0; transition: opacity 0.15s ease;
}
#schedule-wrap:hover .sched-handle,
#schedule-wrap.resizing .sched-handle { opacity: 1; }
#schedule-wrap .sched-handle.br { bottom: -6px; right: -6px; cursor: se-resize; }
#schedule-wrap .sched-handle.bl { bottom: -6px; left: -6px;  cursor: sw-resize; }
#schedule-wrap .sched-handle.tr { top: -6px;    right: -6px; cursor: ne-resize; }
#schedule-wrap .sched-handle.tl { top: -6px;    left: -6px;  cursor: nw-resize; }
#schedule-drag {
  position: absolute; inset: 0;
  pointer-events: all; cursor: move; z-index: 5;
}

/* Fullscreen scale-up */
#display-panel.fullscreen #schedule-inner {
  padding: 10px 14px;
}
#display-panel.fullscreen .sched-day  { font-size: 11px; }
#display-panel.fullscreen .sched-name { font-size: 14px; }
#display-panel.fullscreen .sched-time { font-size: 11px; }

/* ── Display tab two-column layout ── */
.display-top-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding: 20px 20px 0;
  gap: 0;
}
.display-col { display: flex; flex-direction: column; min-width: 0; }

/* Compact threshold rows for the right column */
.thresh-compact-row {
  display: flex; align-items: center; gap: 5px;
  flex-wrap: wrap; margin-bottom: 7px;
}
.thresh-compact-label {
  font-size: 11px; font-weight: 600; color: var(--text-secondary);
  letter-spacing: 0.06em; text-transform: uppercase;
  min-width: 52px;
}

/* Remove top padding from tab-display since grid has its own */
#tab-display.tab-panel { padding: 0; }
/* The divider and layers below still need side padding */
#tab-display .divider { margin: 12px 20px; }
#tab-display .layers-grid { padding: 0 20px 20px; }

/* ── Update / Save event rows ── */
#update-event-row {
  padding: 10px 12px;
  background: var(--bg-secondary);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
}
.update-event-name {
  font-size: 13px; font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#save-event-row { display: flex; flex-direction: column; }
#save-event-row input { margin-bottom: 0; }

/* ══════════════════════════════════════
   ACCESS GATE
══════════════════════════════════════ */
#access-gate {
  position: fixed; inset: 0; z-index: 999999;
  background: #0a0a0a;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.4s ease;
}
#access-gate.unlocking { opacity: 0; pointer-events: none; }
#access-gate.hidden    { display: none; }

#access-gate-box {
  display: flex; flex-direction: column; align-items: center;
  width: min(320px, 88vw); gap: 0;
}

#access-gate-logo {
  font-family: 'Orbitron', monospace;
  font-size: 42px; font-weight: 900;
  color: #ffffff; letter-spacing: 0.12em;
  margin-bottom: 6px;
}

#access-gate-tagline {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.22em; text-transform: uppercase;
  margin-bottom: 40px;
}

#access-gate-form {
  display: flex; flex-direction: column; gap: 8px; width: 100%;
  margin-bottom: 10px;
}

#access-gate-form button {
  width: 100%;
}

#access-code-input,
#access-username-input {
  flex: 1; background: #1a1a1a;
  border: 0.5px solid rgba(255,255,255,0.15);
  border-radius: 6px; padding: 10px 14px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px; font-weight: 600;
  color: #f0f0ee; letter-spacing: 0.1em;
  outline: none; transition: border-color 0.15s;
}
#access-code-input:focus { border-color: rgba(255,255,255,0.35); }
#access-code-input.error { border-color: #e8002d; animation: gate-shake 0.35s ease; }

#access-code-btn {
  background: #e8002d; color: #fff;
  border: none; border-radius: 6px;
  padding: 10px 20px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; transition: background 0.15s;
}
#access-code-btn:hover { background: #c0001f; }

#access-gate-error {
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px; font-weight: 600;
  color: #e8002d; letter-spacing: 0.08em;
  min-height: 18px; text-align: center;
}

#access-gate-hint {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px; color: rgba(255,255,255,0.2);
  letter-spacing: 0.06em; margin-top: 24px;
  text-align: center;
}

@keyframes gate-shake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(5px); }
}

/* ══════════════════════════════════════
   UPDATE BANNER
══════════════════════════════════════ */
#update-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 99990;
  background: #1a7f4b;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; gap: 12px;
  font-family: 'Rajdhani', sans-serif;
  animation: slide-up 0.3s ease;
}
#update-banner-text {
  font-size: 13px; font-weight: 600;
  color: #fff; letter-spacing: 0.06em;
}
@keyframes slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ── Cloud file list ── */
.cloud-file-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0; border-bottom: 0.5px solid var(--border);
  gap: 8px;
}
.cloud-file-row:last-child { border-bottom: none; }