/* ── Display Intensity System ───────────────────────────────────────
   Presets: dim | standard | bright
   Controls: panel/card background opacity, overlay brightness,
             text luminance. Camera feed always stays full brightness.
   ─────────────────────────────────────────────────────────────────── */
:root {
  --bg:          #050a0f;
  --bg2:         #0a1520;
  --surface:     #0f1e2e;
  --border:      #1a3a4a;
  --border2:     #25344f;
  --text:        #c8e8f0;
  --text2:       #94a3b8;
  --text3:       #4a7a8a;
  --text4:       #7aa8b8;
  --top-bg:      rgba(10,14,26,.96);
  --card-alpha:  1;
  --panel-blur:  18px;
  --overlay-dim: rgba(0,0,0,.72);
  --trans:       background 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}
[data-intensity="dim"] {
  --bg:          #020508;
  --bg2:         #060d14;
  --surface:     #0a1520;
  --border:      #102030;
  --border2:     #182838;
  --text:        #8ab0c0;
  --text2:       #506070;
  --text3:       #304050;
  --text4:       #4a7080;
  --top-bg:      rgba(4,8,14,.98);
  --overlay-dim: rgba(0,0,0,.86);
}
[data-intensity="bright"] {
  --bg:          #0d1f30;
  --bg2:         #162840;
  --surface:     #1e3550;
  --border:      #2a4d70;
  --border2:     #3a5d80;
  --text:        #e8f4ff;
  --text2:       #b0cce0;
  --text3:       #7090a8;
  --text4:       #90b8cc;
  --top-bg:      rgba(18,32,52,.95);
  --overlay-dim: rgba(0,0,0,.55);
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;overflow:hidden;transition:var(--trans)}

/* ── Intensity Toggle Button ── */
.intensity-btn{
  display:flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--border2);
  color:var(--text2);font-size:12px;font-weight:800;
  padding:8px 13px;border-radius:999px;cursor:pointer;
  letter-spacing:.04em;white-space:nowrap;transition:var(--trans);
  user-select:none;
}
.intensity-btn:hover{border-color:#2563eb;color:var(--text)}
.intensity-icon{font-size:15px;line-height:1}
.intensity-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase}

/* ── Intensity Row in Panel ── */
.intensity-row{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 14px;background:rgba(37,99,235,.06);
  border:1px solid rgba(37,99,235,.2);border-radius:12px;margin-bottom:12px;
}
.intensity-row label{font-size:12px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:8px}
.intensity-presets{display:flex;gap:6px}
.preset-btn{
  padding:6px 11px;border-radius:8px;border:1.5px solid var(--border);
  background:var(--surface);color:var(--text2);font-size:11px;font-weight:800;
  cursor:pointer;transition:var(--trans);letter-spacing:.04em;
}
.preset-btn.active,.preset-btn:hover{border-color:#2563eb;color:#60a5fa;background:rgba(37,99,235,.15)}

.top{min-height:74px;background:var(--top-bg);border-bottom:1px solid var(--border2);display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 22px;padding-top:calc(12px + env(safe-area-inset-top));backdrop-filter:blur(var(--panel-blur));transition:var(--trans)}
.brandrow{display:flex;align-items:center;gap:18px;min-width:0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:900;font-size:21px;color:#fff;white-space:nowrap}
.brand-mark{width:39px;height:39px;border-radius:12px;background:linear-gradient(135deg,#2563eb,#06b6d4);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 34px rgba(37,99,235,.28)}
.navlinks{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.navlinks a{color:var(--text2);text-decoration:none;font-size:13px;font-weight:700;padding:9px 12px;border-radius:9px;transition:var(--trans)}
.navlinks a:hover,.navlinks a.active{background:rgba(255,255,255,.07);color:#fff}
.status{font-family:monospace;font-size:12px;border:1px solid var(--border2);border-radius:999px;padding:8px 14px;color:var(--text2);white-space:nowrap;background:rgba(18,28,46,.5);transition:var(--trans)}
.status.off{color:var(--text3);border-color:var(--border)}
.status.on{color:#00ff88;border-color:#00ff88}
.status.alert{color:#ff3344;border-color:#ff3344;animation:pulse .7s infinite}
@keyframes pulse{50%{opacity:.45}}
.app{display:grid;grid-template-columns:1fr 390px;height:calc(100dvh - 74px)}
.camera{position:relative;background:#000;margin:14px;border-radius:14px;overflow:hidden;border:1px solid var(--border)}
#video,#canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#canvas{pointer-events:none}
#alertnessChart{position:relative;inset:auto;width:100%;height:60px;object-fit:initial}
.overlay{position:absolute;inset:0;display:grid;place-items:center;background:var(--overlay-dim);text-align:center;padding:20px;overflow-y:auto;transition:background 0.25s ease}
.overlay.hide{display:none}
.overlay h2{margin:0 0 10px;color:#fff}

/* Phone positioning guide */
.phone-guide{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin:16px 0}
.guide-step{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:100px}
.guide-icon{width:56px;height:56px;border-radius:14px;border:1.5px solid rgba(6,182,212,.4);background:rgba(6,182,212,.08);display:flex;align-items:center;justify-content:center;font-size:22px}
.guide-label{font-size:10px;color:var(--text3);font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:center}
.guide-arrow{font-size:18px;color:#2563eb;align-self:center;margin-top:-20px}

/* Calibration bar */
.cal-bar-wrap{width:100%;background:var(--border);border-radius:99px;height:8px;overflow:hidden;margin:8px 0 4px}
.cal-bar-fill{height:100%;background:linear-gradient(90deg,#2563eb,#06b6d4);border-radius:99px;width:0%;transition:width .3s ease}

/* Night mode toggle */
.night-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px;background:rgba(14,165,233,.06);border:1px solid rgba(14,165,233,.2);border-radius:12px;margin-bottom:12px}
.night-row label{font-size:12px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:8px}
.night-slider{display:flex;align-items:center;gap:8px}
.night-slider input[type=range]{width:80px;accent-color:#2563eb}
.night-val{font-size:11px;color:var(--text3);min-width:26px;text-align:right;font-weight:800}

/* Session timer */
.timer-card{background:linear-gradient(135deg,rgba(37,99,235,.1),rgba(6,182,212,.06));border:1px solid rgba(37,99,235,.25);border-radius:14px;padding:12px 14px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;transition:var(--trans)}
.timer-label{font-size:10px;text-transform:uppercase;letter-spacing:2px;color:var(--text3)}
.timer-value{font-size:22px;font-weight:900;color:#60a5fa;font-family:monospace}

.panel{background:var(--bg2);border-left:1px solid var(--border);padding:16px;overflow:auto;transition:var(--trans)}
.btn{width:100%;padding:15px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-weight:900;letter-spacing:1px;margin-bottom:12px;cursor:pointer;transition:var(--trans)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.primary{background:#00e5ff;color:#001014}
.btn.stop{background:rgba(255,51,68,.15);border-color:#ff3344;color:#ff3344;background-image:none}
.btn.stop:disabled{background:rgba(255,51,68,.08);background-image:none}
.btn.demo{background:rgba(245,158,11,.12);border-color:#f59e0b;color:#f8d695}
.state-card{background:linear-gradient(135deg,rgba(37,99,235,.14),rgba(6,182,212,.08));border-color:#2563eb}
.state-value{font-size:34px;line-height:1;font-weight:900;color:#00ff88;margin-top:8px}
.state-card.watch .state-value{color:#ffaa00}
.state-card.alert .state-value{color:#ff3344}
.state-card.noface .state-value{color:var(--text2)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:12px;max-width:100%;overflow:hidden;transition:var(--trans)}
.notice-card{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.35);color:#f8d695}
.privacy-card{background:rgba(14,165,233,.08);border-color:rgba(14,165,233,.35)}
.dev-tools{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px;margin-bottom:12px;transition:var(--trans)}
.dev-tools summary{cursor:pointer;color:var(--text2);font-weight:800}
.dev-tools .btn{margin-top:12px;margin-bottom:0}
.label{font-size:10px;text-transform:uppercase;letter-spacing:2px;color:var(--text3)}
.value{font-size:26px;font-weight:900;color:#fff;font-family:monospace}
.bar{height:10px;background:var(--border);border-radius:99px;overflow:hidden;margin-top:8px}
.fill{height:100%;width:0%;background:linear-gradient(90deg,#00ff88,#ffaa00,#ff3344);transition:width .15s}
.event{font-size:12px;border-bottom:1px solid var(--border);padding:9px 0;color:var(--text4)}
.alertScreen{position:absolute;inset:0;background:rgba(255,51,68,.72);display:none;place-items:center;z-index:4;text-align:center}
.alertScreen.show{display:grid}
.alertScreen h1{font-size:48px;color:#fff;margin:0}
.safe{color:#00ff88}.warn{color:#ffaa00}.danger{color:#ff3344}
.small{font-size:12px;color:var(--text4);line-height:1.5}
.report{white-space:pre-wrap;font-family:monospace;font-size:12px;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:12px;color:var(--text);display:none;max-width:100%;overflow-wrap:anywhere}
.metric-note{font-size:11px;color:var(--text3);margin-top:6px}
.hint{margin-top:14px;color:var(--text);font-size:13px;line-height:1.5}
.hint strong{color:#fff}
.gps.on{color:#00ff88}.gps.warn{color:#ffaa00}
.toggle{display:flex;gap:10px;align-items:flex-start;margin:10px 0}
.toggle input{margin-top:3px;transform:scale(1.15)}
.toggle b{color:#fff}
.sr{position:absolute;left:-9999px}

@media(max-width:820px){
  .top{align-items:flex-start;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top))}
  .brandrow{display:block}.brand{font-size:18px}.brand-mark{width:34px;height:34px}
  .navlinks{margin-top:8px;gap:4px}.navlinks a{font-size:12px;padding:7px 8px}
  .navlinks a:nth-child(n+3){display:none}
  .status{padding:7px 10px}
  .app{grid-template-columns:1fr;height:calc(100dvh - 88px)}
  .panel{position:absolute;bottom:0;left:0;right:0;height:48dvh;border-left:0;border-top:1px solid var(--border);overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(16px + env(safe-area-inset-bottom));z-index:10}
  .camera{height:52dvh;margin:10px}
  .value{font-size:22px}.state-value{font-size:30px}
}

/* ── New Feature Styles ────────────────────────────────────────── */
#alertnessChart{image-rendering:crisp-edges;}
#breakBanner{animation:breakPulse 2s ease-in-out infinite;}
@keyframes breakPulse{0%,100%{border-color:#ffaa00}50%{border-color:#ff6600}}
.tracking-badge{display:inline-flex;align-items:center;gap:4px;}

/* ── Screen / Background Warning Banner ── */
.screen-warning{
  background:rgba(255,180,0,.12);border:1.5px solid rgba(255,180,0,.5);
  border-radius:10px;padding:10px 14px;font-size:12px;line-height:1.5;
  color:#fbbf24;margin-bottom:10px;
}

/* ── Occulert Glass navigation layer ──────────────────────────────
   Monitoring information remains opaque and high contrast.
   Glass is reserved for navigation and setup controls.
   ───────────────────────────────────────────────────────────────── */
:root{
  --surface:#0e1a2b;
  --border:rgba(255,255,255,.1);
  --border2:rgba(255,255,255,.18);
  --top-bg:rgba(10,22,38,.64);
}
body{
  background:
    radial-gradient(circle at 92% 3%,rgba(63,126,255,.18),transparent 32rem),
    radial-gradient(circle at 0 72%,rgba(0,196,232,.09),transparent 26rem),
    var(--bg);
}
.top{
  position:relative;
  z-index:12;
  margin:10px 12px 0;
  min-height:74px;
  padding:10px 16px;
  padding-top:calc(10px + env(safe-area-inset-top));
  border:1px solid rgba(255,255,255,.18);
  border-radius:24px;
  background:var(--top-bg);
  -webkit-backdrop-filter:blur(28px) saturate(170%);
  backdrop-filter:blur(28px) saturate(170%);
  box-shadow:0 22px 64px rgba(0,6,18,.42),inset 0 1px 0 rgba(255,255,255,.12);
}
.brand-mark,.intensity-btn,.navlinks a,.preset-btn{
  border-color:rgba(255,255,255,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.brand-mark{background:linear-gradient(145deg,#4c8cff,#27bfe3)}
.app{height:calc(100dvh - 86px)}
.camera{border-radius:26px;border-color:rgba(255,255,255,.12);box-shadow:0 24px 60px rgba(0,0,0,.3)}
.panel{
  margin:10px 10px 10px 0;
  border:1px solid rgba(255,255,255,.1);
  border-radius:26px;
  background:rgba(8,18,31,.96);
  box-shadow:0 24px 60px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.035);
}
.card,.dev-tools,.timer-card,.night-row,.intensity-row{
  border-radius:18px;
  border-color:rgba(255,255,255,.1);
}
.card,.dev-tools{background:rgba(14,26,43,.96)}
.btn{min-height:50px;border-radius:17px}
.btn.primary{
  background:linear-gradient(145deg,#59dff5,#26bfdc);
  border-color:rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 26px rgba(0,185,220,.18);
}
.status{border-color:rgba(255,255,255,.14);background:rgba(14,26,43,.84)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.top{background:var(--bg2)}}
@media(prefers-contrast:more){
  .top{background:var(--bg2);border-color:rgba(255,255,255,.42);-webkit-backdrop-filter:none;backdrop-filter:none}
  .panel,.card,.dev-tools{border-color:rgba(255,255,255,.28)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media(max-width:820px){
  .top{margin:7px 8px 0;border-radius:21px}
  .app{height:calc(100dvh - 94px)}
  .camera{margin:8px;border-radius:22px}
  .panel{left:8px;right:8px;bottom:8px;margin:0;border:1px solid rgba(255,255,255,.12);border-radius:24px;height:47dvh}
}