:root{color-scheme:dark;--bg:#080b10;--panel:#111721;--panel2:#171f2b;--line:#283344;--text:#eef4ff;--muted:#8f9bae;--accent:#4fd1c5;--danger:#fb7185;--ok:#4ade80;--warn:#facc15;--radius:16px;font-family:Inter,"Noto Sans Thai",system-ui,-apple-system,sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 15% 0,#142034 0,transparent 35%),var(--bg);color:var(--text);min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}.auth-page{display:grid;place-items:center;padding:24px}.auth-card{width:min(100%,430px);padding:36px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,rgba(23,31,43,.96),rgba(12,17,24,.98));box-shadow:0 28px 80px #0009}.brand-mark{display:grid;place-items:center;width:58px;height:58px;border:1px solid #4fd1c566;border-radius:16px;background:#4fd1c512;color:var(--accent);font-weight:900;letter-spacing:.08em}.eyebrow{margin:20px 0 6px;color:var(--accent);font-size:.72rem;font-weight:800;letter-spacing:.15em}.auth-card h1{font-size:clamp(1.7rem,6vw,2.35rem);margin:0 0 8px}.muted{color:var(--muted);line-height:1.65}.auth-card form{display:grid;gap:10px;margin-top:28px}.auth-card label{font-size:.88rem;font-weight:700}.auth-card input{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#090d13;color:var(--text);outline:none}.auth-card input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #4fd1c522}.auth-card button{padding:14px;border:0;border-radius:12px;background:var(--accent);color:#071110;font-weight:850;margin-top:8px}.security-note{margin:24px 0 0;text-align:center;color:var(--muted);font-size:.78rem}.alert{margin-top:18px;padding:12px;border:1px solid #fb718555;border-radius:10px;background:#fb718512;color:#fecdd3}.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 22px;border-bottom:1px solid var(--line);background:#0a0f16e8;backdrop-filter:blur(14px);position:sticky;top:0;z-index:20}.topbar .eyebrow{margin:0}.topbar h1{margin:2px 0 0;font-size:1.35rem}.header-actions{display:flex;align-items:center;gap:9px}.header-actions form{display:inline}.summary{font-size:.78rem;color:var(--muted);padding-right:7px}.ghost{border:1px solid var(--line);background:var(--panel);color:var(--text);padding:9px 12px;border-radius:10px;font-weight:700}.ghost:hover{border-color:#607087}.ghost.danger{color:#fda4af}.toolbar{display:flex;align-items:end;justify-content:space-between;gap:16px;padding:13px 22px;background:#0c1119;border-bottom:1px solid var(--line)}.toolbar label,.toolbar fieldset{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.8rem}.toolbar fieldset{padding:0;border:0}.toolbar legend{position:absolute;clip:rect(0,0,0,0)}select{min-width:160px;padding:8px 34px 8px 11px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--text)}.segmented{display:flex;padding:3px;border:1px solid var(--line);border-radius:10px;background:#080c12}.segmented button{border:0;border-radius:7px;padding:6px 10px;background:transparent;color:var(--muted);font-weight:800}.segmented button.active{background:var(--panel2);color:var(--accent)}.wall{display:grid;gap:10px;padding:12px;min-height:calc(100vh - 132px);align-content:start}.grid-1{grid-template-columns:1fr}.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-9{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-16{grid-template-columns:repeat(4,minmax(0,1fr))}.camera-card{min-width:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel);box-shadow:0 8px 30px #0004}.video-wrap{position:relative;aspect-ratio:16/9;background:#030507}.video-wrap video{width:100%;height:100%;display:block;object-fit:contain;background:#000}.video-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;place-content:center;align-items:center;gap:6px;text-align:center;color:var(--muted);background:linear-gradient(135deg,#0b1018,#080b10)}.camera-card.playing .video-placeholder{display:none}.pulse-dot{width:10px;height:10px;border-radius:50%;background:#64748b;box-shadow:0 0 0 6px #64748b1a}.camera-card.connecting .pulse-dot{background:var(--warn);animation:pulse 1.2s infinite}.camera-card.error .pulse-dot{background:var(--danger)}@keyframes pulse{50%{box-shadow:0 0 0 12px transparent}}.video-placeholder strong{color:#cbd5e1;font-size:.9rem}.video-placeholder small{font-size:.72rem}.tile-actions{position:absolute;right:8px;top:8px}.tile-actions button{display:grid;place-items:center;width:34px;height:34px;border:1px solid #ffffff22;border-radius:9px;background:#05070abb;color:white}.camera-card footer{display:flex;align-items:center;gap:12px;padding:10px 12px}.camera-card footer>div:first-child{display:flex;min-width:0;flex-direction:column;flex:1}.camera-name{font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.camera-branch{color:var(--muted);font-size:.7rem}.status{display:flex;align-items:center;gap:5px;white-space:nowrap}.status span{width:7px;height:7px;border-radius:50%;background:#64748b}.status b{font-size:.68rem;color:var(--muted)}.playing .status span{background:var(--ok)}.connecting .status span{background:var(--warn)}.error .status span{background:var(--danger)}.reconnect{display:none;border:0;border-radius:8px;padding:6px 8px;background:#263244;color:#dbeafe;font-size:.67rem}.error .reconnect{display:block}.empty-state{grid-column:1/-1;place-self:center;text-align:center;max-width:480px;padding:60px 25px;color:var(--muted)}.empty-state h2{color:var(--text);font-size:1.3rem}.empty-icon{display:grid;place-items:center;margin:auto;width:62px;height:62px;border-radius:50%;background:#172030;color:#64748b;font-size:1.3rem}.wall:fullscreen{overflow:auto;background:var(--bg)}@media(max-width:800px){.topbar{align-items:flex-start}.summary{display:none}.toolbar{align-items:stretch}.toolbar label{flex-direction:column;align-items:flex-start}.grid-9,.grid-16{grid-template-columns:repeat(2,minmax(0,1fr))}.camera-card footer{flex-wrap:wrap}}@media(max-width:560px){.topbar{padding:13px}.header-actions{gap:5px}.ghost{padding:8px;font-size:.75rem}.toolbar{padding:10px 13px;flex-direction:column}.toolbar label{width:100%}select{width:100%}.wall,.grid-4,.grid-9,.grid-16{grid-template-columns:1fr;padding:8px}.camera-card footer{gap:8px}.auth-card{padding:27px 22px}}