.login-page{background:#f3f1eb;min-height:100vh;display:grid;place-items:center}.login-card{width:min(460px,92vw);background:white;border:1px solid #ddd;border-radius:20px;padding:32px;margin:30px auto}.login-card>img{width:160px;display:block;margin:0 auto 22px}.login-card h1{font-size:30px}.login-card label{display:block;margin:16px 0}.login-card input{width:100%;box-sizing:border-box}.login-card button{width:100%;margin:12px 0}.login-card #loginResult{min-height:24px}.account-list{display:grid;gap:12px}.account-row{border:1px solid #ddd;padding:16px;border-radius:12px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}.account-row strong{flex:1}.account-row button{padding:8px 12px}.account-secret{background:#fff4d0;border:1px solid #d4ae48;border-radius:12px;padding:16px;margin:16px 0;overflow-wrap:anywhere}.identity{flex-wrap:wrap}.identity input[readonly]{background:transparent;border:0}.account-identity{font-weight:600}

/* Header grows with its contents; navigation follows the actual height. */
body>header{height:auto;min-height:106px;gap:20px;flex-wrap:wrap;padding-top:16px;padding-bottom:16px}
body>header #brand{flex-shrink:0}
.identity{margin-left:auto;gap:16px;justify-content:flex-end;min-width:0}
.identity label{margin:0;gap:8px;white-space:nowrap}
.account-identity{font-size:14px;overflow-wrap:anywhere}
.identity-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
.identity-actions .avatar{width:42px;height:42px;font-size:12px;font-weight:700;flex-shrink:0}
.logout-button{background:transparent;border-color:transparent;color:var(--muted);padding:7px 9px;font-size:13px;font-weight:500;white-space:nowrap}
.logout-button:hover{background:#edf1f6;color:var(--ink)}
.admin-mode .logout-button{color:#dce5ef}
.admin-mode .logout-button:hover{background:#25364c;color:white}
.listen-link{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid #ccd6e8;border-radius:9px;padding:10px 15px;background:#eef3ff;color:#244aca;text-decoration:none;font-size:14px;font-weight:650;white-space:nowrap}
.listen-link:hover{background:#dde7ff;border-color:#a7b9e2}
.admin-mode .listen-link{background:#25364c;border-color:#52627a;color:white}
.admin-mode .listen-link:hover{background:#344c6e}
body>nav{flex-wrap:wrap}
@media(min-width:1050px){
 body.admin-mode{display:grid;grid-template-columns:218px minmax(0,1fr);grid-template-rows:auto auto auto 1fr auto;min-height:100vh}
 .admin-mode>header{grid-column:1/-1;grid-row:1}
 .admin-mode>.demo{grid-column:1/-1;grid-row:2}
 .admin-mode>nav{position:static;grid-column:1;grid-row:3/6;width:auto;min-height:0;align-content:start;justify-content:flex-start}
 .admin-mode>#adminBanner{grid-column:2;grid-row:3;margin:28px 32px 0;flex-wrap:wrap}
 .admin-mode>main{grid-column:2;grid-row:4;width:100%;min-width:0;margin:0;padding:28px 32px 55px}
 .admin-mode>footer{grid-column:2;grid-row:5;margin:0;padding-left:32px}
}
@media(max-width:1049px){body>header{gap:14px}.identity{flex-basis:100%;justify-content:flex-start;margin-left:0}body>header .listen-link{margin-left:auto}#adminBanner{flex-wrap:wrap}}
@media(max-width:750px){
 body>header{padding:14px 18px;min-height:0}header #brand span{font-size:10px}
 .identity{gap:10px;justify-content:space-between}.identity label{font-size:12px}.identity select{font-size:13px}
 .identity-actions .avatar{display:grid;width:36px;height:36px}.account-identity{flex-basis:100%;font-size:13px}
 .listen-link{padding:8px 11px;font-size:13px}.logout-button{padding:6px;font-size:12px}
 body>nav{gap:4px}body>nav button{padding:9px 10px}
}
.dashboard-hero{background:linear-gradient(120deg,#172333,#2c4561);color:white;border-radius:18px;padding:32px;display:flex;align-items:center;justify-content:space-between;gap:25px}.dashboard-hero .eyebrow{color:#f3b64b}.dashboard-hero h1{font-size:32px;max-width:590px;margin-bottom:12px}.dashboard-hero p:last-child{color:#d5dfeb;margin:0}.dashboard-live{display:inline-flex;align-items:center;gap:10px;color:white;border:1px solid #657b93;padding:13px 16px;border-radius:10px;text-decoration:none;white-space:nowrap;font-size:14px}.dashboard-live:hover{background:#ffffff12}.live-dot{width:8px;height:8px;border-radius:50%;background:#73d69b}.dashboard-period{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:20px 0}.dashboard-period>span{font-size:13px;color:var(--muted)}.dashboard-period>button{margin-left:auto;font-size:13px;padding:7px 12px}.dashboard-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:26px}.dashboard-stats>button,.dashboard-stats>div{background:white;border:1px solid var(--line);border-radius:12px;padding:22px;text-align:left;display:flex;flex-direction:column;gap:6px}.dashboard-stats>button:first-child{border-top:4px solid #318453}.dashboard-stats>button:nth-child(2){border-top:4px solid #d6a041}.dashboard-stats>button:nth-child(3){border-top:4px solid #6481ae}.dashboard-stats span{font-size:14px;font-weight:600;color:#596573}.dashboard-stats strong{font-size:38px;line-height:1.25}.dashboard-stats small{color:var(--muted);font-size:12px;font-weight:400}.dashboard-stats .dash-connection{font-size:20px;margin:auto 0}.dash-connection.connected{color:#237346}.dashboard-columns{display:grid;grid-template-columns:1fr 1fr;gap:24px}.dashboard-panel{border:1px solid var(--line);background:white;border-radius:14px;padding:24px;min-width:0}.dashboard-panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.dashboard-panel-title h2{font-size:19px;margin:0}.dashboard-panel-title>span{font-size:12px;background:#fff0d9;color:#885719;border-radius:6px;padding:4px 8px}.dashboard-panel-title>button{font-size:12px;padding:6px 9px}.dashboard-row{width:100%;border:0;border-top:1px solid #edf0f4;border-radius:0;padding:16px 0;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;background:white}.dashboard-row:hover{background:#f7f9fc}.dashboard-row strong{font-size:15px}.dashboard-row small{display:block;color:var(--muted);font-size:12px;font-weight:400;margin-top:5px}.dashboard-row .dash-episode{color:#344c6e}.dashboard-row .badge{align-self:center}.dashboard-empty{background:#edf7f0;padding:20px;border-radius:10px;color:#216344}.dashboard-empty p{margin:8px 0 0;font-size:14px}.dashboard-more{margin:14px 0 0}.dashboard-shortcut-title{margin:28px 0 16px;font-size:20px}.dashboard-shortcuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.dashboard-shortcuts button{text-align:left;padding:22px;display:flex;flex-direction:column;gap:6px;border-radius:12px}.dashboard-shortcuts button>span{font-size:27px;color:#536783}.dashboard-shortcuts strong{font-size:16px}.dashboard-shortcuts small{font-size:12px;color:var(--muted);font-weight:400}.admin-mode #dashboardNav{order:-2}.admin-mode #adminNav{order:0}
@media(max-width:1250px){.dashboard-stats,.dashboard-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-hero{align-items:start;flex-direction:column}.dashboard-columns{grid-template-columns:1fr}}
@media(max-width:600px){.dashboard-hero{padding:24px}.dashboard-hero h1{font-size:26px}.dashboard-stats{gap:10px}.dashboard-stats>button,.dashboard-stats>div{padding:16px}.dashboard-panel{padding:18px}.dashboard-row{align-items:start}.dashboard-row .badge{font-size:10px}.dashboard-period>button{margin-left:0}.dashboard-shortcuts button{padding:16px}.dashboard-shortcuts{gap:10px}.dashboard-panel-title{flex-wrap:wrap}}

/* Black administration palette. */
body.admin-mode{background:#f3f5f8}
.admin-mode>header,.admin-mode>nav{background:#080808}
.admin-mode>.demo{background:#202020;color:#ddd}
.admin-mode #brand span{border-color:#555}
.admin-mode .identity select,.admin-mode .listen-link{background:#202020;border-color:#555;color:#fff}
.admin-mode .listen-link:hover,.admin-mode .logout-button:hover{background:#333}
.admin-mode>nav .active{background:#303030;color:white}
.dashboard-hero{background:#080808}
.dashboard-live{border-color:#626262}
.dashboard-hero p:last-child{color:#d7d7d7}
.admin-mode .avatar{color:#080808}
.admin-mode .admin-tag{background:#080808}
.admin-mode #calendar th{background:#202020;border-color:#555}

.dashboard-hero .eyebrow{margin:0;font-size:16px;letter-spacing:1.4px}

.dashboard-shortcuts{margin-bottom:26px}.dashboard-shortcut-title{margin-top:0}

.dashboard-hero{flex-wrap:wrap}.admin-alarm{display:flex;align-items:center;gap:10px;background:#163724;border:1px solid #47895c;color:#d9f4e1;font-size:14px;padding:13px 16px;border-radius:10px;max-width:100%;text-align:left}.admin-alarm:disabled{opacity:1;cursor:default}.admin-alarm.alarm-danger{background:#a82929;border:2px solid #ffb1a6;color:white;box-shadow:0 0 0 4px #ff89751c}.admin-alarm.alarm-danger:hover{background:#c13535}.admin-alarm:focus-visible{outline-color:#fff}
/* Compact alert on the right of the control-room heading. */
.dashboard-hero .admin-alarm{margin-left:auto;padding:8px 12px;font-size:12px;border-width:1px;border-radius:8px;max-width:360px;box-shadow:none}
.dashboard-hero .dashboard-live{padding:9px 12px;font-size:13px}
@media(max-width:1250px){.dashboard-hero{flex-direction:row;align-items:center}.dashboard-hero>div:first-child{flex:1 1 260px}.dashboard-hero .admin-alarm{margin-left:auto}}
@media(max-width:600px){.dashboard-hero .admin-alarm{margin-left:auto;max-width:100%}.dashboard-hero .dashboard-live{margin-left:auto}}
.dashboard-hero .admin-alarm,.dashboard-hero .dashboard-live{min-height:40px;padding:9px 12px;line-height:20px;font-size:13px;align-self:center;box-sizing:border-box}

.dashboard-hero .control-room-actions{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-left:auto;flex:0 1 auto;min-width:0}
.dashboard-hero .control-room-actions .admin-alarm{margin:0;align-self:center}
.dashboard-hero .control-room-actions .dashboard-live{margin:0;align-self:center}
@media(max-width:1250px){.dashboard-hero .control-room-actions{flex:1 1 400px}}
@media(max-width:600px){.dashboard-hero .control-room-actions{flex-wrap:wrap;gap:10px}.dashboard-hero .control-room-actions .admin-alarm{margin:0}}
/* Control-room heading above a separate row of equal-height actions. */
.dashboard-hero{display:flex;flex-direction:column;align-items:stretch;gap:20px}
.dashboard-hero>div:first-child{flex:none}
.dashboard-hero .eyebrow{font-size:20px;line-height:1.35;letter-spacing:1.4px}
.dashboard-hero .control-room-actions{display:flex;flex:none;width:100%;margin:0;align-items:stretch;justify-content:space-between;gap:16px;flex-wrap:nowrap}
.dashboard-hero .control-room-actions .dashboard-live{order:0;margin:0;height:42px;min-height:42px;padding:0 14px;display:flex;align-items:center;align-self:stretch;line-height:18px;font-size:13px;flex-shrink:0}
.dashboard-hero .control-room-actions .admin-alarm{order:1;margin:0 0 0 auto;height:42px;min-height:42px;padding:0 14px;display:flex;align-items:center;align-self:stretch;line-height:18px;font-size:13px;max-width:440px;flex:0 1 auto}
@media(max-width:600px){.dashboard-hero .eyebrow{font-size:18px}.dashboard-hero .control-room-actions{flex-wrap:wrap}.dashboard-hero .control-room-actions .admin-alarm{margin-left:auto}}

#adminAlertDetails{margin-top:20px;border-left:4px solid #a82929}

/* Keep navigation readable at every screen width, including tablet widths. */
body>nav button{color:#202327;background:transparent}
body>nav button:hover{color:#17358f;background:#eaf0ff}
body>nav button.active{color:#17358f;background:#eaf0ff}
body.admin-mode>nav button{color:#f0f0f0;background:transparent}
body.admin-mode>nav button:hover{color:#fff;background:#292929}
body.admin-mode>nav button.active{color:#fff;background:#363636}
body>nav button:focus-visible{outline:3px solid #d79b35;outline-offset:2px}