:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #07111f; color: #edf4ff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 15% 0%, #173252 0, transparent 36rem), #07111f; }
a { color: #8fe7d6; }
button, input { font: inherit; }
button { cursor: pointer; }
.shell { width: min(1480px, 100%); margin: 0 auto; padding: 24px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 24px; }
.brand { display: flex; align-items: center; gap: 14px; }
.logo { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #8fe7d6; color: #06131f; font-weight: 900; box-shadow: 0 12px 40px #8fe7d633; }
h1 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.7rem); letter-spacing: -.03em; }
.eyebrow { margin: 0 0 3px; color: #91a7c2; font-size: .76rem; text-transform: uppercase; letter-spacing: .14em; }
.logout { border: 1px solid #2a3d55; background: #0d1b2c; color: #dce9f8; border-radius: 10px; padding: 9px 13px; }
.hero { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; margin-bottom: 18px; }
.panel { background: #0d1b2ce8; border: 1px solid #213651; border-radius: 18px; box-shadow: 0 18px 70px #0004; }
.status-panel { padding: 24px; }
.status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.pill { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 7px 11px; background: #15283e; color: #c3d3e6; font-size: .82rem; }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #758ba5; }
.pill.live::before { background: #63e6a8; box-shadow: 0 0 12px #63e6a8; }
.pill.off::before { background: #ffb86c; }
.phone { font-size: clamp(1.65rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: .02em; margin: 5px 0; }
.muted { color: #91a7c2; }
.notice { margin-top: 16px; border-left: 3px solid #8fe7d6; padding: 10px 12px; background: #10263a; color: #cfe1f3; border-radius: 0 10px 10px 0; }
.controls { padding: 20px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.controls form { margin: 0; }
.button { width: 100%; border: 0; border-radius: 11px; padding: 12px 14px; font-weight: 750; background: #8fe7d6; color: #06131f; }
.button.secondary { background: #20364f; color: #eef6ff; }
.button.danger { background: #3d202c; color: #ffccd8; border: 1px solid #71394a; }
.button:disabled { opacity: .5; cursor: not-allowed; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin: 28px 0 12px; }
.section-head h2 { margin: 0; font-size: 1.15rem; }
.week-nav { display: flex; align-items: center; gap: 8px; }
.week-nav a { text-decoration: none; border: 1px solid #2a3d55; border-radius: 9px; padding: 7px 10px; color: #dce9f8; }
.calendar { display: grid; grid-template-columns: repeat(7, minmax(170px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 8px; }
.day { min-height: 310px; padding: 14px; background: #0d1b2ce8; border: 1px solid #213651; border-radius: 15px; }
.day.today { border-color: #8fe7d6; box-shadow: inset 0 0 0 1px #8fe7d633; }
.day h3 { margin: 0; font-size: .94rem; }
.date { color: #91a7c2; font-size: .78rem; margin: 4px 0 12px; }
.hours { color: #6f849e; font-size: .73rem; margin-bottom: 12px; }
.empty { border: 1px dashed #2a3d55; color: #758ba5; border-radius: 10px; padding: 12px; font-size: .78rem; text-align: center; }
.appointment { background: linear-gradient(145deg, #153b43, #142a3e); border: 1px solid #327064; border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.appointment.cancelled { opacity: .6; border-color: #65404c; background: #2b1c28; }
.appointment strong { display: block; margin-bottom: 5px; }
.appointment small { display: block; color: #a8bdd4; line-height: 1.5; }
.reference { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #8fe7d6; }
.manage { min-width: 0; margin-top: 11px; display: grid; gap: 7px; }
.manage input { min-width: 0; max-width: 100%; width: 100%; border: 1px solid #37516e; background: #091827; color: #edf4ff; border-radius: 8px; padding: 7px 4px; font-size: .72rem; }
.manage-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.manage .mini { border: 0; border-radius: 8px; padding: 8px; background: #8fe7d6; color: #06131f; font-weight: 700; }
.manage .mini.danger { background: #4c2935; color: #ffd6df; }
.feed { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.event { padding: 13px 15px; background: #0d1b2c; border: 1px solid #213651; border-radius: 12px; }
.event time { color: #758ba5; font-size: .76rem; }
.event strong { display: block; margin-top: 4px; font-size: .9rem; }
.capture code { display: block; white-space: pre-wrap; word-break: break-word; color: #b9cce1; font-size: .72rem; }
.warning { border: 1px solid #5d482c; background: #2a2118; color: #ffe2b4; border-radius: 12px; padding: 13px; margin: 18px 0; }
.polling-status[hidden] { display: none; }
.login-page { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.login-card { width: min(440px, 100%); padding: 32px; background: #0d1b2cf2; border: 1px solid #253c58; border-radius: 20px; box-shadow: 0 24px 90px #0007; }
.login-card h1 { margin: 18px 0 6px; font-size: 1.8rem; }
.login-card label { display: block; margin-top: 16px; color: #c4d4e6; }
.login-card input { width: 100%; margin-top: 6px; padding: 12px; background: #071523; color: #edf4ff; border: 1px solid #35506d; border-radius: 10px; }
.login-card .button { margin-top: 22px; }
.error { color: #ffb9c8; }
@media (max-width: 820px) { .hero { grid-template-columns: 1fr; } .shell { padding: 15px; } .calendar { grid-template-columns: 1fr; overflow: visible; } .day { min-height: auto; } .topbar { align-items: flex-start; } .manage input { font-size: 1rem; padding: 8px; } }