:root{--bg:#eef3f9;--surface:#fff;--surface2:#f4f8fc;--border:#9aa9bd;--text:#102235;--sub:#3e546e;--green:#1f8a43;--red:#c62828;--blue:#005fcc}*{box-sizing:border-box}body{color:var(--text);background:linear-gradient(180deg, #f8fbff 0%, var(--bg) 55%, #e7eef6 100%);min-height:100vh;margin:0;font-family:Noto Sans JP,sans-serif}.screen{grid-template-rows:auto auto minmax(0,1fr);gap:12px;height:100vh;padding:16px;display:grid;overflow:hidden}.header,.panel,.alert-banner{border:1px solid var(--border);background:var(--surface);border-radius:12px;box-shadow:0 2px 10px #10223514}.header{justify-content:space-between;align-items:center;padding:14px 16px;display:flex}.title{font-size:16px;font-weight:800}.subtitle{color:var(--sub);font-size:12px}.clock{font-family:JetBrains Mono,monospace;font-size:20px;font-weight:700}.alert-banner{padding:14px 16px}.alert-banner.danger{border-color:var(--red);background:#fff3f3;box-shadow:0 0 0 2px #c6282833}.alert-banner.safe{border-color:var(--green);background:#f1fbf4}.alert-stage{letter-spacing:.08em;color:var(--blue);font-size:12px}.alert-message{margin-top:4px;font-size:18px;font-weight:700}.alert-meta{color:var(--sub);margin-top:4px;font-size:12px}.main-grid{grid-template-columns:2fr 1fr;gap:12px;min-height:0;display:grid;overflow:hidden}.right-column{flex-direction:column;gap:12px;height:100%;min-height:0;display:flex}.panel{padding:12px}.panel-title{color:var(--sub);letter-spacing:.08em;margin-bottom:8px;font-size:12px}.camera-placeholder{aspect-ratio:16/9;border:1px solid var(--border);color:#40556f;background:linear-gradient(120deg,#dbe7f3,#ecf3fa);border-radius:8px;justify-content:center;align-items:center;font-family:JetBrains Mono,monospace;font-size:28px;display:flex}.camera-meta{color:var(--sub);margin-top:8px;font-size:12px}.camera-selector-wrapper{justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;display:flex}.camera-selector{gap:8px;display:flex}.camera-switch{border:1px solid var(--border);background:var(--surface2);color:var(--text);cursor:pointer;border-radius:8px;padding:6px 12px;font-size:12px;font-weight:700}.camera-switch.active{background:var(--blue);color:#fff;border-color:var(--blue)}.auto-update-button{border:1px solid var(--border);background:var(--surface2);color:var(--text);cursor:pointer;white-space:nowrap;border-radius:8px;padding:6px 12px;font-size:12px;font-weight:700}.auto-update-button.active{background:var(--green);color:#fff;border-color:var(--green)}.auto-update-button.paused{color:#d97706;background:#fff3e0;border-color:#d97706}.camera-image{aspect-ratio:16/9;object-fit:cover;border:1px solid var(--border);background:#f2f6fa;border-radius:8px;width:100%}.camera-controls{grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin-top:8px;display:grid}.camera-nav-button{border:1px solid var(--border);background:var(--surface2);color:var(--text);cursor:pointer;border-radius:8px;padding:6px 10px;font-size:12px}.camera-nav-button:disabled{opacity:.45;cursor:not-allowed}.camera-meta-inline{color:var(--sub);text-align:center;font-size:12px}.info-row{border-bottom:1px solid var(--border);justify-content:space-between;padding:8px 0;font-size:14px;display:flex}.stop-button,.login-card button{background:var(--green);color:#fff;cursor:pointer;border:none;border-radius:10px;width:100%;margin-top:12px;padding:14px;font-size:16px;font-weight:800}.stop-button:hover,.login-card button:hover{filter:brightness(1.05)}.action-message{color:var(--blue);font-size:12px}.log-list{flex:1;gap:4px;min-height:0;max-height:100%;display:grid;overflow-y:auto}.log-panel{flex-direction:column;flex:1;min-height:0;max-height:100%;display:flex;overflow:hidden}.info-panel{flex-shrink:0}.log-row{border-bottom:1px dashed var(--border);grid-template-columns:2fr 1fr 1fr 1fr;gap:6px;padding:4px 0;font-size:12px;display:grid}.log-row span{white-space:nowrap;text-align:center}.empty{color:var(--sub);font-size:12px}.login-screen{place-items:center;min-height:100vh;padding:20px;display:grid}.login-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;width:min(460px,100%);padding:20px;box-shadow:0 10px 22px #1022351f}.login-card h1{margin:0;font-size:20px}.login-card p{color:var(--sub);font-size:13px}.login-card form{gap:12px;display:grid}.login-card label{gap:6px;font-size:13px;display:grid}.login-card input{border:1px solid var(--border);background:var(--surface2);color:var(--text);border-radius:8px;padding:10px}.error{color:var(--red);margin:0}@media (width<=900px){.screen{height:auto;min-height:100vh;overflow:visible}.main-grid{grid-template-columns:1fr;overflow:visible}.log-panel{max-height:320px}.clock{font-size:16px}}