:root { color-scheme: light; font: 16px/1.5 system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; color: #172033; background: #eef2f7; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { position: sticky; top: 0; display:flex; flex-direction:column; width: 280px; height: 100vh; flex: 0 0 280px; overflow:hidden; padding: 24px 16px 14px; color: #f8fafc; background: #18253b; }
.brand { display: flex; flex-direction: column; gap: 2px; padding: 0 12px 28px; }
.brand span, .version { color: #94a3b8; font-size: .85rem; }
.navigation { display: grid; flex:1; align-content:start; min-height:0; overflow-y:auto; gap: 6px; }
.sidebar-footer { flex:0 0 auto; margin-top:12px; padding:12px; border-top:1px solid #334155; color:#94a3b8; font-size:.82rem; text-align:center; }
.nav-link, .nav-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 11px 12px; border: 0; border-radius: 7px; color: inherit; background: transparent; font: inherit; text-decoration: none; text-align: left; cursor: pointer; }
.nav-link:hover, .nav-toggle:hover, .nav-link.active { background: #29466f; }
.nav-panel { display: grid; gap: 4px; padding: 4px 0 4px 18px; }
.nav-panel[hidden] { display: none; }
.page-section[hidden] { display: none; }
.main-content { flex: 1; padding: 40px; }
header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.card { max-width: 980px; margin-top: 28px; padding: 24px; border-radius: 12px; background: #fff; box-shadow: 0 2px 12px #17203318; }
.login-page { display: grid; min-height: 100vh; place-items: center; padding: 24px; }
.login-card { width: min(100%, 420px); padding: 32px; border-radius: 14px; background: #fff; box-shadow: 0 8px 30px #17203320; }
.login-card .brand { padding: 0 0 24px; color: #172033; }
.login-card h1 { margin: 0 0 24px; }
.login-card form { display: grid; gap: 9px; }
.login-card input { width: 100%; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 7px; font: inherit; }
.checkbox { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .9rem; }
.checkbox input { width: auto; }
.form-note { margin: 5px 0 0; color: #64748b; font-size: .85rem; }
.login-button { margin-top: 9px; padding: 11px 14px; border: 0; border-radius: 7px; color: #fff; background: #29466f; font: inherit; font-weight: 700; cursor: pointer; }
.device-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; }
.revoke-button, .secondary-button, .primary-button { min-width: 112px; min-height: 38px; padding: 8px 14px; border-radius: 6px; font: inherit; font-weight: 600; line-height: 1.2; cursor: pointer; }
.revoke-button, .secondary-button, .primary-button, .login-button { display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.revoke-button { border: 1px solid #b91c1c; color: #b91c1c; background: #fff; }
.secondary-button { border: 1px solid #64748b; color: #334155; background: #fff; }
.primary-button { border: 1px solid #29466f; color: #fff; background: #29466f; }
.device-actions { display: flex; align-items: center; gap: 8px; }
.role-badge { display: inline-block; padding: 4px 9px; border-radius: 999px; color: #fff; background: #29466f; font-size: .8rem; font-weight: 700; }
.role-badge.readonly { color: #334155; background: #e2e8f0; }
.main-content label, .main-content select { display: block; margin-top: 12px; }
.main-content select { width: min(100%, 420px); padding: 9px; border: 1px solid #cbd5e1; border-radius: 7px; font: inherit; }
.management-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0 24px; }
.management-form input, .management-form select { width: 100%; margin: 0; padding: 9px; border: 1px solid #cbd5e1; border-radius: 7px; font: inherit; }
.management-form .login-button { margin: 0; }
.management-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid #e2e8f0; }
.management-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
@media (max-width: 760px) { .management-form { grid-template-columns: 1fr; } .management-row { grid-template-columns: 1fr; } .management-actions { justify-content: flex-start; } }
.section-heading, .list-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.section-heading h2, .section-heading p, .list-heading h3 { margin: 0; }
.section-heading p { margin-top: 4px; color: #64748b; }
.creation-panel { display: grid; grid-template-columns: 1fr; gap: 0; margin: 22px 0 30px; border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden; background: #fff; }
.creation-panel[hidden] { display: none; }
.form-heading { padding: 18px 20px; border-bottom: 1px solid #cbd5e1; background: #f1f5f9; }
.form-heading h3, .form-heading p { margin: 0; }
.form-heading p { margin-top: 3px; color: #64748b; font-size: .88rem; }
.field-group { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: center; gap: 18px; margin: 0 !important; padding: 14px 20px; border-bottom: 1px solid #e2e8f0; font-weight: 600; }
.field-group > span:first-child { padding-right: 10px; }
.field-group input, .field-group select { width: 100%; margin: 0; padding: 10px 11px; border: 1px solid #94a3b8; border-radius: 5px; background: #fff; font: inherit; font-weight: 400; }
.email-builder { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(180px, 1fr); align-items: center; gap: 10px; }
.email-builder b { color: #64748b; }
.password-tools { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: center; gap: 18px; font-weight: 400; color: #64748b; }
.password-tools .secondary-button { justify-self: start; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; background: #f8fafc; }
.form-actions > button { width: 144px; min-width: 144px; }
.list-heading { margin: 8px 0 4px; padding-bottom: 10px; border-bottom: 1px solid #e2e8f0; }
.list-heading span { color: #64748b; font-size: .9rem; }
.data-table-wrap { width: 100%; overflow-x: auto; border: 1px solid #cbd5e1; border-radius: 7px; }
.data-table { width: 100%; border-collapse: collapse; background: #fff; }
.data-table th, .data-table td { padding: 12px 14px; border-right: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; text-align: left; vertical-align: middle; }
.data-table th:last-child, .data-table td:last-child { border-right: 0; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table th { color: #334155; background: #f1f5f9; font-size: .84rem; font-weight: 700; text-transform: uppercase; letter-spacing: .025em; }
.data-table tbody tr:hover { background: #f8fafc; }
.table-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 10px; min-width: 126px; white-space: nowrap; }
.table-actions .revoke-button, .table-actions .secondary-button { width: 100%; min-width: 126px; min-height: 38px; padding: 7px 10px; }
@media (max-width: 760px) { .section-heading { align-items: flex-start; flex-direction: column; } .field-group, .password-tools { grid-template-columns: 1fr; gap: 7px; } .email-builder { grid-template-columns: 1fr; } .email-builder b { display: none; } .password-tools .secondary-button { justify-self: stretch; } }
dialog { width: min(92vw, 560px); border: 0; border-radius: 12px; padding: 0; box-shadow: 0 18px 60px #17203340; }
dialog::backdrop { background: #17203399; }
.dialog-form { display: grid; gap: 12px; padding: 26px; }
.dialog-form h2 { margin: 0 0 6px; }
.dialog-form label { margin: 0; }
.dialog-form input { width: 100%; padding: 9px; border: 1px solid #cbd5e1; border-radius: 7px; font: inherit; }
.dialog-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 4px; padding-top: 16px; border-top: 1px solid #e2e8f0; }
.dialog-actions > button { width: 100%; min-width: 0; }
.dialog-tool-button { width: 100%; min-width: 0; justify-self: stretch; }
.notification-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 20px 0 24px; padding: 18px; border: 1px solid #cbd5e1; border-radius: 7px; background: #f8fafc; }
.notification-form label { display: grid; gap: 5px; margin: 0; font-weight: 600; }
.notification-form input, .notification-form select { width: 100%; margin: 0; padding: 9px; border: 1px solid #94a3b8; border-radius: 5px; background: #fff; font: inherit; font-weight: 400; }
.notification-form textarea { width: 100%; resize: vertical; padding: 9px; border: 1px solid #94a3b8; border-radius: 5px; background:#fff; font:inherit; font-weight:400; }
.transfer-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:20px 0 10px; padding:20px; border:1px solid #cbd5e1; border-radius:7px; background:#f8fafc; }
.transfer-form label { display:grid; grid-template-rows:auto 44px; gap:7px; margin:0; font-weight:600; }
.transfer-form input, .transfer-form select { width:100%; height:44px; min-height:44px; margin:0; padding:9px 12px; border:1px solid #94a3b8; border-radius:5px; background:#fff; font:inherit; }
.transfer-form input[type="file"] { padding:5px 7px; }
.transfer-form input[type="file"]::file-selector-button { height:32px; margin-right:10px; padding:5px 12px; border:1px solid #64748b; border-radius:4px; color:#334155; background:#fff; font:inherit; cursor:pointer; }
.transfer-files, .upload-actions { grid-column:1/-1; }
.upload-actions { display:grid; grid-template-columns:minmax(220px,1fr) minmax(220px,1fr); align-items:center; gap:18px; }
.upload-actions button { width:100%; height:44px; margin:0; }
.upload-actions progress { width:100%; height:16px; }
@media(max-width:760px){.transfer-form,.upload-actions{grid-template-columns:1fr}.transfer-files,.upload-actions{grid-column:1}}
.notification-form button { align-self: end; width: 100%; }
.notification-form :disabled { color: #94a3b8; background: #e2e8f0; }
[data-notification-rules] .data-table th:last-child,
[data-notification-rules] .data-table td:last-child { width: 430px; }
[data-notification-rules] .table-actions { width: 100%; grid-template-columns: repeat(3, minmax(126px, 1fr)); gap: 12px; }
.service-details { display:grid; gap:18px; margin-top:22px; }
.service-detail-block { border:1px solid #cbd5e1; border-radius:7px; overflow:hidden; }
.service-detail-block h3 { margin:0; padding:12px 15px; background:#f1f5f9; }
.service-detail-block .data-table-wrap { border:0; border-radius:0; }
.service-detail-block .data-table td:first-child { font-weight:600; color:#334155; }
@media (max-width: 800px) { .notification-form { grid-template-columns: 1fr; } }
.backup-form { display:grid; gap:18px; margin:22px 0; }
.backup-form fieldset { display:grid; gap:10px; margin:0; padding:16px 18px; border:1px solid #cbd5e1; border-radius:7px; background:#f8fafc; }
.backup-form legend { padding:0 7px; font-weight:700; }
.backup-form label { display:flex; align-items:center; gap:9px; margin:0; }
.backup-form input[type="checkbox"] { width:18px; height:18px; margin:0; }
.backup-paths { display:grid!important; gap:7px!important; font-weight:600; }
.backup-paths textarea { width:100%; padding:10px 12px; border:1px solid #94a3b8; border-radius:5px; font:inherit; resize:vertical; }
.backup-time { display:grid!important; grid-template-columns:140px minmax(160px,280px); }
.backup-time input { min-height:42px; padding:8px 10px; border:1px solid #94a3b8; border-radius:5px; font:inherit; }
.weekday-grid { display:grid; grid-template-columns:repeat(4,minmax(130px,1fr)); gap:10px 18px; }
#backup h3 { margin-top:24px; }
@media(max-width:760px){.weekday-grid{grid-template-columns:repeat(2,minmax(120px,1fr))}.backup-time{grid-template-columns:1fr}}
.restore-form { display:grid; gap:14px; padding:18px; border:1px solid #cbd5e1; border-radius:7px; background:#f8fafc; }
.restore-form>label { display:grid; gap:6px; margin:0; font-weight:600; }
.restore-form select,.restore-form input[type="text"],.restore-form input:not([type]) { width:100%; min-height:42px; padding:9px 11px; border:1px solid #94a3b8; border-radius:5px; font:inherit; }
.restore-form fieldset { display:grid; grid-template-columns:repeat(2,minmax(180px,1fr)); gap:10px; border:1px solid #cbd5e1; border-radius:6px; }
.restore-form fieldset label { display:flex; gap:8px; align-items:center; margin:0; }
.restore-warning { padding:12px 14px; border-left:4px solid #b91c1c; color:#7f1d1d; background:#fef2f2; }
.restore-form>button { width:100%; }
.dashboard-page { max-width:1200px; margin-top:28px; }
.dashboard-page article { padding:20px; border:1px solid #d9e2ee; border-radius:12px; background:#fff; box-shadow:0 2px 10px #1720330c; }
.dashboard-health { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px; }
.dashboard-health h2,.dashboard-health p,.dashboard-page h3 { margin:0; }.dashboard-health p{margin-top:4px;color:#64748b}
.dashboard-kicker { color:#2563c5; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.health-ring { --score:0; display:grid; width:82px; height:82px; place-items:center; border-radius:50%; background:conic-gradient(#d99614 calc(var(--score)*1%),#e5e7eb 0); position:relative; }
.health-ring[data-health="ok"] { background:conic-gradient(#2ca66f calc(var(--score)*1%),#e5e7eb 0); }
.health-ring[data-health="critical"] { background:conic-gradient(#dc2626 calc(var(--score)*1%),#e5e7eb 0); }
.health-ring::before { content:""; position:absolute; inset:9px; border-radius:50%; background:#fff; }.health-ring strong{position:relative;font-size:1.35rem}
.health-facts { display:grid; grid-template-columns:repeat(2,minmax(130px,1fr)); gap:12px; }.health-facts div,.dashboard-detail-grid div{display:grid;gap:4px;padding:12px;border:1px solid #d9e2ee;border-radius:8px;background:#f8fafc}.health-facts span,.dashboard-detail-grid span{color:#64748b;font-size:.78rem}
.dashboard-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:14px; }.dashboard-summary h3{margin:3px 0 12px}.dashboard-summary dl{margin:0}.dashboard-summary dl div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid #e2e8f0}.dashboard-summary dl div:last-child{border:0}.dashboard-summary dt{color:#64748b;font-size:.78rem}.dashboard-summary dd{margin:0;font-size:.82rem;font-weight:700;text-align:right}
.dashboard-charts,.dashboard-lower { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:14px; }.dashboard-charts svg{display:block;width:100%;height:220px;margin-top:10px}.chart-grid{stroke:#dbe4ef;stroke-width:1}.chart-legend{display:flex;gap:22px;color:#64748b;font-size:.75rem}.chart-legend span::before{content:"";display:inline-block;width:14px;height:3px;margin-right:6px;vertical-align:middle}.chart-legend .blue::before{background:#3b82f6}.chart-legend .green::before{background:#2ca66f}.chart-legend .orange::before{background:#d99614}.chart-legend .red::before{background:#dc2626}
.dashboard-alert { display:grid;gap:2px;margin-top:10px;padding:11px 13px;border-left:3px solid #d99614;border-radius:7px;background:#f8fafc}.dashboard-alert.critical{border-color:#dc2626}.dashboard-alert.ok{border-color:#2ca66f}.dashboard-alert span{color:#64748b;font-size:.8rem}.dashboard-text-button{border:0;color:#2563c5;background:transparent;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer}.dashboard-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}.dashboard-actions button{padding:12px;border:1px solid #d9e2ee;border-radius:7px;background:#f8fafc;text-align:left;font-weight:700;cursor:pointer}.dashboard-wide{margin-top:14px}.dashboard-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}.dashboard-detail-grid .detail-wide{grid-column:1/-1}
.subconfiguration{margin-top:24px;padding:18px;border:1px solid #d9e2ee;border-radius:10px;background:#f8fafc}.subconfiguration h3{margin-top:0}.table-action-button{min-width:140px}
@media(max-width:1000px){.dashboard-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-health{grid-template-columns:auto 1fr}.health-facts{grid-column:1/-1;width:100%}}@media(max-width:760px){.dashboard-summary,.dashboard-charts,.dashboard-lower,.dashboard-detail-grid{grid-template-columns:1fr}.dashboard-detail-grid .detail-wide{grid-column:auto}.dashboard-actions{grid-template-columns:1fr}}