:root { color-scheme: light; --navy:#071a33; --blue:#1769ff; --green:#09b978; --ink:#10233d; --muted:#637083; --line:#dfe6ef; --bg:#f4f7fb; --white:#fff; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
header { background:var(--navy); color:white; padding:34px max(5vw,24px); display:flex; justify-content:space-between; align-items:flex-start; gap:24px; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:4px; font-size:clamp(28px,4vw,42px); } h2 { margin-bottom:0; }
.subtitle { color:#b9c8dc; margin-bottom:0; }.eyebrow { color:#3981ff; font-size:11px; font-weight:800; letter-spacing:.12em; margin-bottom:6px; }
.environment { border:1px solid #38506f; border-radius:999px; padding:7px 12px; font-size:11px; font-weight:700; }
.header-actions { display:flex; align-items:center; gap:12px; }.header-actions #signed-user { color:#c4d0df; font-size:13px; }.secondary { background:transparent; border:1px solid #405675; padding:7px 12px; }
main { max-width:1180px; margin:0 auto; padding:28px 20px 60px; }.summary { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:20px; }
.summary article,.panel { background:white; border:1px solid var(--line); border-radius:16px; box-shadow:0 8px 24px rgba(12,35,65,.05); }
.summary article { padding:18px 20px; }.summary span { display:block; color:var(--muted); font-size:13px; }.summary strong { font-size:26px; }
.grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:20px; margin-bottom:20px; }.panel { padding:22px; min-width:0; }.panel-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.device-list { display:grid; gap:12px; }.device { border:1px solid var(--line); border-radius:12px; padding:15px; display:flex; justify-content:space-between; gap:16px; min-width:0; }.device > div { min-width:0; }.device strong,.device small { overflow-wrap:anywhere; }.device-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }.device-actions button { padding:7px 10px; font-size:12px; }
.device strong { display:block; }.device small { color:var(--muted); }.badge { align-self:center; border-radius:999px; padding:5px 9px; background:#edf3ff; color:#285cae; font-size:11px; font-weight:700; white-space:nowrap; }
.compact { margin-top:0; padding:8px 11px; font-size:12px; }.device-form { margin-bottom:16px; padding:15px; border:1px solid #cdddf2; border-radius:12px; background:#f8fbff; }.device-form[hidden] { display:none; }.form-heading { display:flex; justify-content:space-between; align-items:center; }.device-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.text-button { padding:4px; background:transparent; color:#23559a; }.device-form #device-form-message { min-height:20px; margin:0; font-size:13px; }
form { display:grid; gap:13px; min-width:0; } label { color:var(--muted); font-size:13px; font-weight:650; min-width:0; } input,select,textarea { width:100%; max-width:100%; min-width:0; margin-top:5px; border:1px solid #cdd7e4; border-radius:9px; padding:11px; background:white; color:var(--ink); font:inherit; } textarea { min-height:80px; resize:vertical; }
button { border:0; border-radius:9px; padding:12px 16px; background:var(--blue); color:white; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; } button:hover { filter:brightness(.95); } #form-message { min-height:22px; margin:0; font-size:13px; }
.authorization-note { margin:0; padding:10px 12px; border-radius:9px; background:#eef4ff; color:#345678; font-size:13px; }
.credential-result { margin-top:14px; border:1px solid #9ac4ff; background:#f0f6ff; border-radius:12px; padding:14px; }.credential-result p { margin:4px 0 10px; color:#45617f; font-size:13px; }.credential-result code { display:block; padding:10px; background:white; border:1px solid #d4e3f6; border-radius:8px; overflow-wrap:anywhere; user-select:all; }.secondary-light { margin-top:10px; background:white; color:#23559a; border:1px solid #b9cce4; }
.schedule-panel { margin-bottom:20px; }.schedule-panel form { grid-template-columns:1fr auto; align-items:end; }.time-fields { display:grid; grid-template-columns:repeat(2,minmax(120px,220px)); gap:14px; }.schedule-panel fieldset { grid-column:1 / -1; border:0; padding:0; margin:0; }.schedule-panel legend { color:var(--muted); font-size:13px; font-weight:650; margin-bottom:8px; }.days { display:flex; flex-wrap:wrap; gap:9px; }.days label { display:flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:#fafcff; }.days input { width:auto; margin:0; }.schedule-panel button { min-width:150px; }.schedule-panel #schedule-message { grid-column:1 / -1; }
.table-wrap { overflow:auto; } table { width:100%; border-collapse:collapse; } th,td { border-bottom:1px solid var(--line); padding:11px 9px; text-align:left; white-space:nowrap; } th { color:var(--muted); font-size:12px; } td:nth-child(3) { white-space:normal; min-width:220px; }
.status-active { color:#087a52; font-weight:700; }.status-expired { color:var(--muted); }
@media (max-width:760px) { header { display:block; }.environment { display:inline-block; margin-top:18px; }.summary,.grid { grid-template-columns:1fr; }.schedule-panel form { grid-template-columns:1fr; }.time-fields,.device-fields { grid-template-columns:1fr; }.schedule-panel button { width:100%; } }
.login-page { min-height:100vh; background:var(--navy); }.login-shell { max-width:900px; min-height:100vh; display:grid; grid-template-columns:1fr 420px; align-items:center; gap:70px; padding:30px; }.login-brand { color:white; }.login-brand p:last-child { color:#b9c8dc; }.login-card h2 { margin-bottom:22px; }.lab-hint { margin:16px 0 0; color:var(--muted); font-size:12px; }
@media (max-width:760px) { .login-shell { grid-template-columns:1fr; gap:20px; padding:24px; }.login-brand h1 { font-size:30px; }.header-actions { margin-top:18px; flex-wrap:wrap; } }