:root { --navy:#12334a; --navy-dark:#0c283b; --teal:#168c8c; --teal-dark:#117575; --bg:#edf2f5; --line:#d3dfe5; --text:#263946; --muted:#71818b; --white:#fff; --danger:#b64646; --warning:#b97e12; --success:#197c57; }
* { box-sizing:border-box; } body { margin:0; color:var(--text); background:var(--bg); font:14px/1.45 Arial, Helvetica, sans-serif; } button,input,select { font:inherit; } h1,h2,p { margin-top:0; } h1 { margin-bottom:2px; font-size:23px; font-weight:600; } h2 { margin-bottom:10px; font-size:17px; font-weight:600; } small,.muted { color:var(--muted); } .app-shell { min-height:100vh; display:flex; }
.sidebar { z-index:5; width:240px; flex:0 0 240px; min-height:100vh; color:#e7f0f3; background:var(--navy-dark); transition:width .2s,flex-basis .2s; overflow:hidden; } .sidebar-logo { height:78px; display:flex; align-items:center; gap:12px; padding:15px 19px; border-bottom:1px solid #24465a; } .brand-mark { display:inline-grid; place-items:center; width:36px; height:36px; flex:0 0 36px; border:2px solid #54c1bb; color:#fff; font-weight:bold; font-size:12px; } .sidebar-title { color:#fff; line-height:1.05; font-size:17px; font-weight:bold; } nav { padding:13px 9px; } .nav-item { min-height:43px; display:flex; align-items:center; gap:13px; margin-bottom:3px; padding:9px 11px; color:#d3e0e5; text-decoration:none; border-left:3px solid transparent; white-space:nowrap; } .nav-item:hover { background:#173d54; color:#fff; } .nav-item.active { color:#fff; border-left-color:#54c1bb; background:#1a5969; } .nav-icon { width:19px; height:19px; } .sidebar-footer { position:fixed; bottom:0; width:240px; min-height:61px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 14px 10px 19px; border-top:1px solid #24465a; background:var(--navy-dark); transition:width .2s; white-space:nowrap; }.sidebar-footer span { overflow:hidden; text-overflow:ellipsis; }.sidebar-footer form { margin:0; }
.sidebar.collapsed { width:67px; flex-basis:67px; }.sidebar.collapsed .sidebar-title,.sidebar.collapsed .nav-item span:last-child,.sidebar.collapsed .sidebar-footer>span { display:none; }.sidebar.collapsed .sidebar-logo { padding:15px; }.sidebar.collapsed .nav-item { justify-content:center; padding:9px; }.sidebar.collapsed .sidebar-footer { width:67px; justify-content:center; padding:10px; }
.main { min-width:0; flex:1; padding:0 28px 34px; }.topbar { min-height:78px; display:flex; align-items:center; gap:14px; margin:0 -28px 25px; padding:14px 28px; border-bottom:1px solid var(--line); background:#f8fafb; }.topbar p { margin:0; color:var(--muted); }.topbar .update-chip { margin-left:auto; }.icon-button { display:inline-grid; place-items:center; width:35px; height:35px; border:0; color:var(--navy); background:transparent; cursor:pointer; }.icon-button:hover { background:#e1ebef; }.update-chip { display:inline-flex; align-items:center; gap:7px; border:1px solid #e1bd62; background:#fff8e9; color:#8a5c09; padding:8px 10px; cursor:pointer; border-radius:4px; }
.panel { background:var(--white); border:1px solid var(--line); border-radius:6px; padding:20px; box-shadow:0 1px 2px rgba(25,54,69,.04); }.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:14px; }.panel-heading h2 { margin:0; }.welcome-panel { max-width:820px; }.empty-state { min-height:260px; display:grid; place-content:center; justify-items:center; text-align:center; color:var(--muted); }.empty-state svg { width:46px; height:46px; margin-bottom:14px; color:var(--teal); }.empty-state h2 { color:var(--text); }.content-grid { display:grid; align-items:start; gap:20px; }.users-grid { grid-template-columns:minmax(0,1fr) 340px; }.config-grid { grid-template-columns:minmax(0,1fr) minmax(260px,.65fr); }.form-panel label,.login-form label { display:block; margin:12px 0 5px; color:#42535e; font-weight:600; }.form-control { width:100%; min-height:38px; padding:8px 10px; border:1px solid #bfcdd5; border-radius:4px; background:#fff; color:var(--text); outline:none; }.form-control:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(22,140,140,.14); }.btn { display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:8px 14px; margin-top:17px; border:1px solid transparent; border-radius:4px; cursor:pointer; font-weight:600; }.btn-primary { color:#fff; background:var(--teal); }.btn-primary:hover { background:var(--teal-dark); }.btn-secondary { color:#3e525f; border-color:#bfcdd5; background:#fff; margin-left:7px; }.btn-full { width:100%; }.notice { margin:0 0 18px; padding:11px 13px; border:1px solid; border-radius:4px; }.notice-success { color:#176747; border-color:#9bd2bd; background:#effaf4; }.notice-danger { color:#963535; border-color:#e4aaaa; background:#fff3f3; }.notice-warning { color:#80550a; border-color:#eacb82; background:#fff9e9; }.badge { display:inline-block; padding:3px 7px; border-radius:3px; color:#526570; background:#e7edf0; font-size:12px; white-space:nowrap; }.badge-success { color:#176747; background:#dff2e8; }.badge-warning { color:#80550a; background:#fff0c5; }.badge-dark { color:#fff; background:var(--navy); }.badge-muted { color:#5c6870; background:#e5e7e8; }.table-wrap { overflow:auto; }.table { width:100%; border-collapse:collapse; white-space:nowrap; }.table th { padding:10px 11px; color:#fff; background:var(--navy); text-align:left; font-size:12px; font-weight:600; }.table td { padding:10px 11px; border-bottom:1px solid #e3eaed; }.table td small { display:block; margin-top:2px; }.migration-list { padding-left:20px; color:#52636e; }.migration-list li { margin:5px 0; }
.modal-backdrop { position:fixed; z-index:10; inset:0; display:none; place-items:center; padding:20px; background:rgba(9,29,42,.48); }.modal-backdrop.open { display:grid; }.modal { position:relative; width:min(480px,100%); padding:28px; border-radius:6px; background:#fff; box-shadow:0 12px 35px rgba(0,0,0,.25); }.modal h2 { margin-top:13px; }.modal-icon { display:inline-flex; color:var(--teal); }.modal-icon svg { width:28px; height:28px; }.modal-close { position:absolute; top:9px; right:9px; }.modal form { margin-top:18px; }
.login-body { min-height:100vh; background:var(--bg); }.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(280px,1fr) 420px; }.login-brand { display:grid; align-content:center; justify-items:center; padding:40px; color:#eaf5f5; background:var(--navy-dark); }.login-brand .brand-mark { width:62px; height:62px; font-size:18px; }.login-brand h1 { margin:18px 0 3px; font-size:30px; }.login-brand p { color:#a8c4cb; }.login-form { align-self:center; width:min(350px,calc(100% - 40px)); margin:auto; padding:26px; background:#fff; border:1px solid var(--line); border-radius:6px; }.login-form h2 { margin-bottom:4px; font-size:22px; }
@media (max-width:800px) { .sidebar { width:67px; flex-basis:67px; }.sidebar .sidebar-title,.sidebar .nav-item span:last-child,.sidebar .sidebar-footer>span { display:none; }.sidebar .sidebar-logo { padding:15px; }.sidebar .nav-item { justify-content:center; padding:9px; }.sidebar-footer { width:67px; justify-content:center; padding:10px; }.main { padding:0 14px 25px; }.topbar { margin:0 -14px 18px; padding:12px 14px; }.users-grid,.config-grid { grid-template-columns:1fr; }.update-chip { font-size:0; padding:8px; }.update-chip svg { width:18px; height:18px; }.login-shell { grid-template-columns:1fr; }.login-brand { min-height:31vh; align-content:end; padding:25px; }.login-form { margin:28px auto; } }