:root {
  color-scheme: dark;
  --bg:#080b12; --glow:#1b1538; --topbar:#090c13cc;
  --panel-start:#131822; --panel-end:#0e121a; --surface:#0c1017; --surface-deep:#07090d;
  --control:#151a25; --line:#232a38; --event-line:#1c2330;
  --text:#f5f7fb; --control-text:#c8cdd8; --muted:#8992a5;
  --purple:#8b5cf6; --purple-soft:#a78bfa; --green:#39d98a; --orange:#fb923c; --shadow:#0004;
}
html[data-theme="light"] {
  color-scheme: light;
  --bg:#f6f7fb; --glow:#e9e2ff; --topbar:#ffffffd9;
  --panel-start:#fff; --panel-end:#fafbff; --surface:#f7f8fc; --surface-deep:#e9ecf3;
  --control:#fff; --line:#dde1ea; --event-line:#e2e5ec;
  --text:#171923; --control-text:#3f4655; --muted:#697386;
  --purple:#7c3aed; --purple-soft:#7450d4; --green:#15965c; --orange:#d96617; --shadow:#18213a14;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 70% -10%,var(--glow) 0,transparent 32%),var(--bg);color:var(--text);font:15px Inter,"Noto Sans TC",system-ui,sans-serif;min-height:100vh;transition:background-color .25s,color .25s}
.topbar{height:76px;padding:0 max(24px,calc((100% - 1180px)/2));display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);background:var(--topbar);backdrop-filter:blur(14px);position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto;order:0}.brand b{font-size:18px}.brand small{display:block;font-size:9px;letter-spacing:2.4px;color:var(--muted);margin-top:2px}
.logo{width:38px;height:38px;border-radius:50%;object-fit:cover;box-shadow:0 0 28px #8b5cf644}
.theme-toggle{order:1;display:flex;align-items:center;gap:8px;color:var(--control-text);background:var(--control);border:1px solid var(--line);border-radius:10px;padding:9px 12px;cursor:pointer;font:inherit;font-size:12px;transition:background .2s,border-color .2s,transform .2s}.theme-toggle:hover{border-color:var(--purple);transform:translateY(-1px)}.theme-toggle:focus-visible{outline:2px solid var(--purple);outline-offset:2px}.theme-icon::before{content:"☀";font-size:15px}html[data-theme="light"] .theme-icon::before{content:"☾"}
.connection,.live{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:12px}.connection{order:2}.connection i,.live i{width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 10px currentColor}.connection.online i,.live i{background:var(--green)}
main{max-width:1180px;margin:auto;padding:54px 24px 70px}.hero{display:flex;justify-content:space-between;align-items:end;margin-bottom:34px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:2px;color:var(--purple-soft);margin:0 0 9px}.hero h1{font-size:clamp(30px,5vw,48px);margin:0;line-height:1.1;letter-spacing:-1.8px}.hero h1 span{color:var(--purple-soft)}.sub{color:var(--muted);margin:15px 0 0}
.refresh,select{color:var(--control-text);background:var(--control);border:1px solid var(--line);border-radius:10px;padding:10px 15px;cursor:pointer}
.hero-actions{display:flex;gap:10px;align-items:center}
.settings{margin-top:18px;padding:22px}
.settings-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.settings-form .pet-form-actions{grid-column:1/-1}
.settings-checkbox{display:flex!important;flex-direction:row;align-items:center;gap:8px}
.settings-checkbox input{width:auto!important}
.legacy-settings{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.legacy-settings-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.legacy-settings-head h2{margin:0;font-size:20px}
.legacy-note,.legacy-settings-state{color:var(--muted);font-size:12px;line-height:1.55}.legacy-settings-state{padding:10px 12px;background:var(--surface);border:1px solid var(--event-line);border-radius:10px}
.legacy-tabs{display:flex;gap:7px;overflow-x:auto;padding:14px 0 10px;scrollbar-width:thin}.legacy-tabs[hidden]{display:none}.legacy-tabs button{flex:0 0 auto;color:var(--muted);background:var(--control);border:1px solid var(--line);border-radius:20px;padding:7px 12px;cursor:pointer;font:inherit;font-size:12px}.legacy-tabs button.active{border-color:var(--purple);color:var(--purple-soft)}
.legacy-settings-body{padding-top:8px}.legacy-form{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));display:grid;gap:12px}.legacy-form .pet-form-actions,.legacy-form .legacy-advanced,.legacy-form .legacy-confirm{grid-column:1/-1}.legacy-confirm{padding:10px;border:1px solid var(--orange)!important;border-radius:10px}
.legacy-advanced{border:1px solid var(--line);border-radius:10px;padding:10px 12px}.legacy-advanced summary{cursor:pointer;color:var(--control-text)}.legacy-advanced p{color:var(--muted);font-size:11px}.legacy-schedule{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.legacy-repeat{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}.legacy-repeat fieldset{border:1px solid var(--line);border-radius:10px;display:grid;gap:9px}.legacy-repeat legend{color:var(--purple-soft);font-size:12px}.legacy-repeat label{display:grid;gap:5px;color:var(--muted);font-size:11px}.legacy-repeat input,.legacy-danger-grid input{width:100%;color:var(--text);background:var(--control);border:1px solid var(--line);border-radius:8px;padding:9px;font:inherit}
.legacy-danger-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}.legacy-danger-grid>div{border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;gap:9px;align-content:start}.legacy-danger-grid p{margin:0;color:var(--muted);font-size:11px;line-height:1.5}
.legacy-ptz-controls{grid-column:1/-1;border-top:1px solid var(--line);padding-top:14px}.legacy-ptz-controls>p{color:var(--muted);font-size:11px}.ptz-pad{width:174px;display:grid;grid-template-columns:repeat(3,54px);gap:6px;margin-bottom:12px}.ptz-pad button{height:48px;border:1px solid var(--line);border-radius:10px;background:var(--control);color:var(--text);font-size:20px;cursor:pointer}.legacy-ptz-controls label{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px}.legacy-ptz-controls input{width:65px;color:var(--text);background:var(--control);border:1px solid var(--line);border-radius:8px;padding:8px}
.grid{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(260px,.9fr);gap:18px}.card{background:linear-gradient(145deg,var(--panel-start),var(--panel-end));border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 60px var(--shadow)}.camera{padding:20px}.cardhead{display:flex;align-items:center;justify-content:space-between}.cardhead h2{margin:0 0 16px;font-size:20px}.live{background:#143124;border:1px solid #255a3e;border-radius:20px;padding:6px 10px;color:#8be7b8}html[data-theme="light"] .live{background:#e8f8ef;border-color:#b9e6cd;color:#16784b}
.secondary-camera-grid{margin-top:18px;display:grid;grid-template-columns:minmax(0,2.1fr) minmax(260px,.9fr);gap:18px}.secondary-camera-grid[hidden]{display:none}.secondary-camera-grid .camera{grid-column:1}.secondary-camera-grid .frame{aspect-ratio:4/3}
.live.offline{background:#382323;border-color:#704040;color:#ffaaaa}html[data-theme="light"] .live.offline{background:#fff0f0;border-color:#efc0c0;color:#a92c2c}
.frame{aspect-ratio:16/9;background:var(--surface-deep);border-radius:12px;overflow:hidden;position:relative;display:grid;place-items:center}.frame img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}.frame img[hidden]{display:none}.frame .empty{position:absolute;text-align:center;padding:24px;color:var(--muted)}.frame span{position:absolute;bottom:12px;right:13px;z-index:2;background:#05070ab8;padding:5px 8px;border-radius:6px;font:11px ui-monospace;color:#d9dde6}
.stats{display:grid;gap:18px}.stat{padding:23px;display:flex;align-items:center;gap:17px}.stat .icon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:20px}.purple{color:#bc9fff;background:#281d43}.green{color:#62e3a4;background:#153526}.orange{color:#ffae71;background:#3c2518}html[data-theme="light"] .purple{color:#7044c7;background:#eee8fc}html[data-theme="light"] .green{color:#16784b;background:#e1f5e9}html[data-theme="light"] .orange{color:#b65513;background:#fff0e4}.stat small,.stat p{color:var(--muted)}.stat strong{display:block;font-size:25px;margin:4px 0}.stat p{margin:0;font-size:11px}
.enrollment{margin-top:18px;padding:22px}.enrollment-grid{display:grid;grid-template-columns:minmax(250px,.7fr) 1.3fr;gap:24px;border-top:1px solid var(--line);padding-top:18px}.pet-form{display:grid;gap:12px;align-content:start}.pet-form label{display:grid;gap:7px;color:var(--muted);font-size:12px}.pet-form input{width:100%;color:var(--text);background:var(--control);border:1px solid var(--line);border-radius:10px;padding:11px 12px;font:inherit}.pet-form select{width:100%}.pet-form button:disabled{opacity:.55;cursor:wait}.pet-form-actions{display:flex;gap:10px;flex-wrap:wrap}.ghost{color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:10px;padding:10px 15px;cursor:pointer;font:inherit}.ghost:hover{border-color:var(--purple);color:var(--text)}.enrollment-hint{margin:0 0 12px;color:var(--muted);font-size:12px}.pet-profiles{display:grid;gap:9px}.pet-profile{display:grid;grid-template-columns:54px 1fr auto;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--event-line);border-radius:12px;padding:8px}.pet-profile img,.pet-placeholder{width:54px;height:46px;border-radius:8px;object-fit:cover;background:var(--surface-deep)}.pet-placeholder{display:grid;place-items:center;color:var(--muted);font-size:9px}.pet-profile strong,.pet-profile small{display:block}.pet-profile small{color:var(--muted);font-size:11px;margin-top:3px}.pet-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-end}.pet-actions button{background:none;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:11px;padding:4px 8px;cursor:pointer;white-space:nowrap;font:inherit}.pet-actions button:hover{border-color:var(--purple);color:var(--text)}.pet-actions button.danger:hover{border-color:#e35b5b;color:#e35b5b}
.detect-prompt{margin-top:18px;padding:22px;border-color:var(--purple)}.detect-prompt .cardhead h2{margin:0;font-size:16px}
.detect-prompt-body{display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:20px}
.detect-prompt-zoom{position:relative;display:block;padding:0;border:none;background:none;cursor:zoom-in;border-radius:12px;overflow:hidden}
.detect-prompt-zoom img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--surface-deep)}
.detect-prompt-zoom span{position:absolute;bottom:8px;right:8px;background:#05070ab8;color:#fff;font-size:11px;padding:5px 9px;border-radius:6px}
.detect-prompt-panel{display:grid;gap:10px;align-content:start}.detect-prompt-label{margin:0;color:var(--muted);font-size:12px}
.detect-prompt-species-swap{justify-self:start;background:none;border:1px dashed var(--line);border-radius:20px;color:var(--muted);font-size:11px;padding:5px 12px;cursor:pointer;font:inherit}.detect-prompt-species-swap:hover{border-color:var(--purple);color:var(--purple-soft)}.detect-prompt-species-swap[hidden]{display:none}
.detect-prompt-choices{display:flex;flex-wrap:wrap;gap:8px}.detect-prompt-choices button{background:var(--control);border:1px solid var(--line);border-radius:20px;color:var(--text);padding:8px 16px;cursor:pointer;font:inherit}.detect-prompt-choices button:hover{border-color:var(--purple);color:var(--purple-soft)}
.detect-prompt-new{display:flex;gap:8px}.detect-prompt-new input{flex:1;color:var(--text);background:var(--control);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit}
.events{margin-top:18px;padding:22px}.events .cardhead{border-bottom:1px solid var(--line);padding-bottom:7px}.eventlist{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-top:18px}.event{width:100%;margin:0;display:block;background:var(--surface);border:1px solid var(--event-line);border-radius:13px;overflow:hidden;cursor:pointer;padding:0;text-align:left;font:inherit;color:inherit}.event:hover,.event:focus-visible{border-color:var(--purple)}.event img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--surface-deep)}.eventbody{padding:12px}.eventbody b{display:flex;justify-content:space-between}.eventbody b span{color:var(--purple-soft);font-size:12px}.eventbody p{margin:7px 0 0;color:var(--muted);font-size:11px}.empty{color:var(--muted);padding:30px;text-align:center;grid-column:1/-1}
.lightbox{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px}.lightbox[hidden]{display:none}.lightbox-backdrop{position:absolute;inset:0;background:#03050ac0;backdrop-filter:blur(4px)}
.lightbox-inner{position:relative;z-index:1;background:linear-gradient(145deg,var(--panel-start),var(--panel-end));border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 80px var(--shadow);max-width:min(720px,92vw);max-height:92vh;overflow:auto;display:grid;gap:0}
.lightbox-close{position:absolute;top:10px;right:10px;z-index:2;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--control);color:var(--text);cursor:pointer;font-size:14px}.lightbox-close:hover{border-color:var(--purple)}
.lightbox-media{background:var(--surface-deep);display:grid;place-items:center;max-height:60vh}.lightbox-media img,.lightbox-media video{width:100%;max-height:60vh;object-fit:contain;display:block}.lightbox-media img[hidden],.lightbox-media video[hidden]{display:none}
.lightbox-panel{padding:18px 20px;display:grid;gap:10px}.lightbox-meta{margin:0;color:var(--muted);font-size:12px}.lightbox-assign{display:grid;gap:6px;color:var(--muted);font-size:12px}.lightbox-assign select{width:100%}.lightbox-hint{margin:0;color:var(--muted);font-size:12px;min-height:1.4em}
.lightbox-warning{margin:0;color:var(--orange);font-size:12px;line-height:1.5;background:#3c251840;border:1px solid #6b3f1f;border-radius:8px;padding:9px 11px}html[data-theme="light"] .lightbox-warning{background:#fff4e8;border-color:#efc9a0;color:#a1560f}.lightbox-warning[hidden]{display:none}
.login-inner{max-width:min(360px,92vw)}.login-inner h2{margin:2px 0 0}#loginModal .lightbox-backdrop{cursor:default}
.lightbox-downloads{display:flex;gap:8px;flex-wrap:wrap}.lightbox-downloads a{font-size:12px;padding:8px 12px;text-decoration:none;display:inline-block}.lightbox-downloads a[hidden]{display:none}
.storage-info{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font-size:11px;line-height:1.6;word-break:break-all}
.pet-cover-button{padding:0;border:none;background:none;cursor:pointer;display:block}.pet-cover-button img,.pet-cover-button .pet-placeholder{transition:opacity .15s}.pet-cover-button:hover img,.pet-cover-button:hover .pet-placeholder{opacity:.8}
.pet-samples-link{background:none;border:none;color:inherit;font:inherit;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}.pet-samples-link:hover{color:var(--purple)}
.pet-gallery-inner{max-width:min(880px,92vw)}.pet-gallery-title{margin:0;font-size:16px}
.pet-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;max-height:60vh;overflow-y:auto}
.pet-gallery-item{margin:0;background:var(--surface);border:1px solid var(--event-line);border-radius:10px;overflow:hidden}
.pet-gallery-item img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.pet-gallery-item figcaption{padding:6px 8px;color:var(--muted);font-size:10px}
@media(max-width:800px){main{padding-top:34px}.hero{align-items:start}.hero .hero-actions{margin-top:5px}.grid,.secondary-camera-grid{grid-template-columns:1fr}.secondary-camera-grid .camera{grid-column:1}.stats{grid-template-columns:repeat(3,1fr)}.stat{padding:16px;display:block}.stat .icon{margin-bottom:12px}.eventlist{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.theme-label{display:none}.theme-toggle{padding:9px}.connection span{display:none}}
@media(max-width:520px){.hero{display:block}.hero-actions{margin-top:20px}.stats{grid-template-columns:1fr}.stat{display:flex}.eventlist{grid-template-columns:1fr}.enrollment-grid{grid-template-columns:1fr}.pet-profile{grid-template-columns:54px 1fr}.detect-prompt-body{grid-template-columns:1fr}.settings-form,.legacy-form{grid-template-columns:1fr}.legacy-settings-head{align-items:flex-start}.legacy-repeat,.legacy-danger-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){body,.theme-toggle{transition:none}}
.ghost.danger{border-color:#6b3f45;color:#e8909a}.ghost.danger:hover{border-color:#e35b5b;color:#ffb0b8}