:root { --blue:#173e70; --blue-light:#355d8d; --border:#c9c9c9; --soft:#eeeeee; --text:#252525; --muted:#707070; }
* { box-sizing:border-box; }
html { min-width:320px; background:#fff; }
body { margin:0; color:var(--text); background:#fff; font-family:Arial, Helvetica, sans-serif; }
button, select, input { font:inherit; }
button { color:inherit; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.webcam-app { width:100%; height:100vh; min-height:620px; padding:15px 19px 12px; display:grid; grid-template-rows:42px minmax(0, 1fr) auto 60px; overflow:hidden; }
.page-title { height:34px; padding:0 12px; margin-bottom:8px; display:flex; align-items:center; justify-content:space-between; border:1px solid #d0d0d0; background:linear-gradient(#fff, #e8e8e8); box-shadow:inset 0 1px #fff; }
.page-title h1 { margin:0; font-size:20px; line-height:1; color:#171717; }
.connection { display:flex; align-items:center; gap:6px; color:#687168; font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
.connection i { width:7px; height:7px; border-radius:50%; background:#6da83d; box-shadow:0 0 0 2px #dcebd1; }
.connection.offline i { background:#b74337; box-shadow:0 0 0 2px #f2d8d5; }
.archive-layout { min-height:0; overflow:hidden; display:grid; grid-template-columns:235px minmax(0,1fr); gap:5px; }
.sidebar { min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:5px; }
.side-panel { border:1px solid var(--border); background:#fafafa; }
.side-panel h2 { height:36px; margin:0; padding:8px 12px; color:#fff; background:linear-gradient(var(--blue-light), var(--blue)); font-size:19px; line-height:20px; text-shadow:0 1px #112c4c; }
.side-panel h2 span { float:right; min-width:25px; padding:2px 6px; border-radius:10px; background:#fff2; font-size:11px; text-align:center; }
.calendar-panel { flex:0 0 auto; }
.calendar-widget { padding:7px 8px 9px; background:#fafafa; }
.calendar-navigation { height:28px; display:grid; grid-template-columns:28px 1fr 28px; align-items:center; gap:2px; }
.calendar-navigation strong { text-align:center; color:#2d3d50; font-size:13px; }
.calendar-navigation button { height:26px; padding:0; border:1px solid transparent; border-radius:3px; background:transparent; color:#315982; font-size:21px; line-height:20px; cursor:pointer; }
.calendar-navigation button:hover { border-color:#c1cbd6; background:#edf2f7; }
.calendar-weekdays,.calendar-days { display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; }
.calendar-weekdays { margin:4px 0 2px; color:#7a7a7a; font-size:9px; font-weight:bold; text-align:center; }
.calendar-days button,.calendar-spacer { min-width:0; aspect-ratio:1; }
.calendar-days button { position:relative; padding:0; border:1px solid transparent; border-radius:3px; background:transparent; color:#aaa; font-size:11px; cursor:default; }
.calendar-days button.has-recordings { color:#173e70; background:#e5edf6; font-weight:bold; cursor:pointer; }
.calendar-days button.has-recordings::after { content:""; position:absolute; left:50%; bottom:2px; width:3px; height:3px; margin-left:-1.5px; border-radius:50%; background:#315982; }
.calendar-days button.has-recordings:hover { border-color:#7e9cbc; }
.calendar-days button.selected { color:#fff; border-color:#173e70; background:#315982; }
.calendar-days button.selected::after { background:#fff; }
.calendar-days button:disabled { opacity:1; }
.images-panel { flex:1; min-height:0; display:flex; flex-direction:column; }
.time-list { flex:1; min-height:180px; overflow-y:auto; padding:4px 10px 10px; scrollbar-color:#b7b7b7 #f2f2f2; }
.time-list button { width:100%; min-height:20px; display:block; padding:1px 5px; border:0; border-radius:2px; background:transparent; text-align:left; color:#343434; font-size:14px; line-height:18px; cursor:pointer; font-variant-numeric:tabular-nums; }
.time-list button:hover { background:#e3eaf3; }
.time-list button.active { color:#fff; background:#315982; }
.empty-list { padding:12px 4px; color:#888; font-size:12px; }
.viewer-column { min-width:0; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
.viewer-frame { position:relative; flex:1 1 0; height:0; min-height:0; padding-top:45px; display:grid; place-items:center; overflow:hidden; border:1px solid var(--border); background:linear-gradient(#fff, #f0f0f0 44px, #111 45px); }
.viewer-frame > img { display:block; max-width:100%; max-height:calc(100vh - 168px); width:100%; height:100%; object-fit:contain; background:#111; }
.viewer-frame > img:not([src]) { display:none; }
.camera-overlay { position:absolute; z-index:2; top:45px; left:10px; right:10px; height:20px; display:flex; align-items:center; justify-content:space-between; padding:0 3px; color:#fff; background:#343735a8; font-family:"Courier New", monospace; font-size:14px; line-height:20px; text-shadow:1px 1px #000; pointer-events:none; }
.camera-overlay strong { letter-spacing:.03em; }
.empty-state { text-align:center; color:#777; }
.empty-state[hidden] { display:none; }
.empty-state span { display:block; font-size:42px; color:#aaa; }
.empty-state strong { display:block; margin:8px 0 5px; }
.empty-state p { margin:0; font-size:13px; }.empty-state code { color:#244d7a; }
.transport { position:relative; z-index:3; height:54px; flex:0 0 54px; margin-top:5px; display:grid; grid-template-columns:repeat(5, minmax(66px, 1fr)) minmax(210px, 2fr) 68px; border:1px solid #c4c4c4; background:linear-gradient(#eee, #c3c3c3 48%, #aaa 51%, #d5d5d5); }
.transport > button { position:relative; z-index:4; touch-action:manipulation; border:0; border-right:1px solid #c2c2c2; background:transparent; color:#777; font-weight:bold; font-size:17px; text-shadow:0 1px #eee; cursor:pointer; }
.transport > button:hover { color:#173e70; background:#ffffff42; }
.transport .play-button { font-size:22px; }
.speed-control { display:flex; align-items:center; justify-content:center; gap:8px; padding:0 16px; color:#777; border-right:1px solid #c2c2c2; }
.speed-control input { width:min(180px, 60%); accent-color:#4b6683; }
.speed-control b { font-size:13px; }.speed-control output { min-width:30px; color:#555; font-size:11px; font-weight:bold; }
.transport .fullscreen-button { border-right:0; font-size:20px; }
.storage-notice { margin-top:7px; padding:9px 12px; border:1px solid #c99053; background:#fff1d9; color:#744719; font-size:12px; }
.storage-notice[hidden] { display:none; }
.page-footer { position:relative; z-index:1; height:60px; min-height:60px; pointer-events:none; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; padding:10px 6% 0; color:#666; font-size:12px; }
.page-footer strong { color:#111; font-size:18px; }.page-footer strong span { color:#f18b22; font-size:11px; }.page-footer > span:last-child { text-align:right; }
.viewer-frame:fullscreen { padding-top:0; border:0; background:#000; }.viewer-frame:fullscreen > img { max-height:100vh; }.viewer-frame:fullscreen .camera-overlay { top:0; }
@media (max-width:900px) {
  .webcam-app { padding:10px; }
  .archive-layout { grid-template-columns:180px minmax(0,1fr); }
  .transport { grid-template-columns:repeat(5, 1fr) minmax(150px, 1.6fr); }.fullscreen-button { display:none; }
  .viewer-frame > img { max-height:calc(100vh - 150px); }
}
@media (max-width:650px) {
  .webcam-app { height:auto; min-height:100vh; grid-template-rows:42px auto auto 52px; overflow:visible; }
  .archive-layout { display:flex; flex-direction:column; }
  .sidebar { height:auto; overflow:visible; }.calendar-panel { height:max-content; }.images-panel { height:185px; flex:none; }
  .viewer-frame { min-height:250px; padding-top:0; aspect-ratio:16/10; }.viewer-frame > img { max-height:none; }
  .camera-overlay { top:0; font-size:10px; }.viewer-frame { background:#111; }
  .transport { height:auto; min-height:102px; grid-template-columns:repeat(5,1fr); grid-template-rows:50px 50px; }.speed-control { grid-column:1/6; grid-row:2; border-top:1px solid #bbb; border-right:0; }
  .page-footer { min-height:52px; grid-template-columns:1fr auto; padding-inline:2px; }.page-footer > span:last-child { display:none; }
}