:root{--accent:#5148df;--sidebar:#0b142b}
body.panel-mode{background:#f4f7fb;color:#1a2740;font-family:"Segoe UI",system-ui,sans-serif}
.panel-mode .topbar{position:fixed;inset:0 auto 0 0;width:232px;height:100vh;padding:25px 16px 20px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:20px;background:var(--sidebar);border:0;color:#fff;z-index:20;box-shadow:6px 0 28px #0b153015}
.panel-mode .brand{min-height:56px;gap:11px;letter-spacing:0;padding:0 5px}
.panel-mode .brand strong{font-size:15px;line-height:1.1;color:#fff;max-width:145px;overflow-wrap:anywhere}
.panel-mode .brand small{display:block;margin-top:5px;font-size:9px;letter-spacing:.13em;color:#93a7c8;max-width:145px;overflow-wrap:anywhere}
.panel-mode .mark{flex:none;width:37px;height:37px;border-radius:11px;color:white;background:var(--accent);box-shadow:0 6px 18px #0003;font-size:21px}
.panel-mode .identity{margin-top:auto;padding:14px 6px 0;border-top:1px solid #ffffff22;display:flex;flex-direction:column;align-items:stretch;gap:8px;font-size:12px;color:#c0cde4}
.panel-mode .identity #staff-name{overflow:hidden;text-overflow:ellipsis}
.panel-mode .identity .ghost{background:#ffffff16;color:white;text-align:left;padding:9px 12px}
.panel-mode main{margin:0 0 0 232px;max-width:none;min-height:100vh;padding:27px clamp(20px,2.4vw,42px) 70px}
.panel-mode .page-head{margin-bottom:25px;align-items:center}
.panel-mode .page-head h1{font-size:30px;letter-spacing:-.035em;line-height:1.1;margin:2px 0 4px;color:#17233b}
.panel-mode .page-head .muted{font-size:13px;color:#7b89a1}
.panel-mode .eyebrow{color:var(--accent);font-size:10px;letter-spacing:.16em;margin-bottom:4px}
.panel-mode .pill{color:#128b75;background:#e5f9f3;border-color:#d2eee6;border-radius:6px;font-size:10px}
.panel-mode .tabs{position:fixed;top:112px;left:13px;width:206px;display:grid;gap:4px;margin:0;padding:0;border:0;overflow:visible;z-index:21}
.panel-mode .tabs button{background:transparent;color:#a8b7d2;text-align:left;border-radius:8px;border:0;padding:12px 14px;font-size:13px;font-weight:600}
.panel-mode .tabs button:hover,.panel-mode .tabs button.selected{background:#ffffff14;color:#fff;border:0}
.panel-mode .tabs button.selected{box-shadow:inset 3px 0 var(--accent)}
.panel-mode .stats{grid-template-columns:repeat(2,minmax(0,165px));gap:10px;margin:0 0 22px}
.panel-mode .stat{border:1px solid #e1e8f2;background:#fff;border-radius:8px;padding:12px 16px;box-shadow:0 3px 12px #1c31500a}
.panel-mode .stat span{color:#8190a6;font-size:11px}.panel-mode .stat strong{color:#25334d;font-size:24px;margin:2px 0 0}
.panel-mode .section-head{margin-bottom:18px}.panel-mode .section-head h2{font-size:18px;color:#1e2b42}
.panel-mode .muted{color:#7c8aa0}.panel-mode .section-head .muted{font-size:12px}
.panel-mode button{background:var(--accent);color:#fff;border-radius:5px;box-shadow:none}
.panel-mode button.ghost,.panel-mode .icon-button{background:#eef1f8;color:#394763}
.panel-mode .customer-tools{display:grid;grid-template-columns:minmax(230px,1fr) 180px;gap:14px;background:#fff;border:1px solid #e2e9f3;padding:15px;margin:0 0 12px;border-radius:6px;box-shadow:0 5px 20px #1b31500a}
.panel-mode label{color:#69778e;font-size:11px;gap:5px}.panel-mode input,.panel-mode select{background:#fff;color:#23324c;border:1px solid #d9e1ec;border-radius:4px;min-height:38px;padding:8px 11px}
.panel-mode input::placeholder{color:#a2aec0}.panel-mode input:focus-visible,.panel-mode select:focus-visible,.panel-mode button:focus-visible{outline-color:var(--accent)}
.panel-mode .table-wrap{border:1px solid #e1e8f2;border-radius:6px;background:#fff;box-shadow:0 8px 28px #263c590b}
.panel-mode table{min-width:850px}.panel-mode th{background:#edf3fa;color:#718099;font-size:10px;letter-spacing:.08em}.panel-mode td{color:#33425a;font-size:12px}.panel-mode th,.panel-mode td{border-bottom:1px solid #e9eef5;padding:13px 12px}
.panel-mode td.customer-name{font-weight:700;color:#24324d}.panel-mode td.customer-name small{display:block;color:#8c98aa;font-weight:500;margin-top:3px}
.panel-mode td button{background:transparent;color:var(--accent);font-weight:700;padding:6px 8px}.panel-mode td button:hover{text-decoration:underline}
.panel-mode .status{border-radius:4px;background:#e9f8f1;color:#228a63}.panel-mode .status.off{background:#fff0ef;color:#bc5953}
.panel-mode .inline-form,.panel-mode .appearance-form{background:#fff;border:1px solid #e1e8f2;border-radius:6px;padding:19px;box-shadow:0 5px 20px #1b31500a}
.panel-mode .inline-form{margin:0 0 18px}.panel-mode .inline-form button{min-height:38px}
.panel-mode .assign-form{display:flex;gap:5px;min-width:205px}.panel-mode .assign-form input{width:140px;min-height:32px}.panel-mode .assign-form button{background:var(--accent);color:white}
.panel-mode .appearance-form{max-width:660px;display:grid;gap:20px}.panel-mode .appearance-form input[type=color]{height:52px;padding:5px;cursor:pointer}.panel-mode .appearance-form button{justify-self:start}
.panel-mode .account-form{background:#fff;padding:18px;border:1px solid #e1e8f2;border-radius:6px}
.panel-mode .notice{border-radius:5px}.panel-mode .permission-fields{border-color:#dce4ef}.panel-mode .check{color:#33425a}
dialog{background:#fff;color:#23314a;border:1px solid #dbe4f0;border-radius:10px;width:min(640px,calc(100vw - 28px));box-shadow:0 30px 100px #0b163955}
dialog .eyebrow{color:var(--accent)}dialog label{color:#56657d}dialog input,dialog select{background:#fff;color:#1e2e48;border:1px solid #d7e0ec;border-radius:5px}dialog .permission-fields{border-color:#dce4ef}dialog .check{color:#33425a}
dialog button{background:var(--accent);color:#fff;border-radius:5px}dialog button.ghost,dialog .icon-button{background:#edf1f8;color:#33425a}
#customer-dialog{width:min(790px,calc(100vw - 28px));padding:28px 30px}
#customer-dialog form{gap:17px}
#customer-dialog .dialog-head{padding-bottom:17px;border-bottom:1px solid #e2e7ee;margin-bottom:1px}
#customer-dialog .dialog-head h2{font-size:25px;letter-spacing:-.025em}
#customer-dialog label{font-size:12px;font-weight:700;color:#6d788b}
#customer-dialog input,#customer-dialog select{height:43px;font-size:13px;color:#202b3f}
#customer-dialog .activation-field{border:1px solid #dcdaf9;background:#f6f5ff;border-radius:6px;padding:15px 17px}
#customer-dialog .activation-field label{color:#403ab4}
#customer-dialog .activation-field input{margin-top:5px;background:#fff;font-size:17px;font-weight:700;letter-spacing:.12em;max-width:360px}
#customer-dialog .activation-field p{color:#6c6a92;font-size:12px;margin:8px 0 0}
#customer-dialog .optional{font-size:11px;font-weight:500;color:#8a88ad}
#customer-dialog .permission-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px 18px}
#customer-dialog .permission-fields .check{font-size:12px;color:#38455b}
#customer-dialog .dialog-actions{position:sticky;bottom:-28px;z-index:2;background:#fff;border-top:1px solid #e2e7ee;padding:15px 0 20px;margin-top:0;box-shadow:0 -7px 15px #ffffffed}
#device-dialog{width:min(590px,calc(100vw - 28px))}
#device-dialog .dialog-head{border-bottom:1px solid #e2e7ee;padding-bottom:14px}
#device-dialog #device-details{overflow-wrap:anywhere}
.panel-mode .inline-form .activation-date-field{min-width:175px}
.panel-mode #device-rows td:last-child{white-space:nowrap}
.panel-mode #device-rows .danger-action{color:#ba4a50}
.panel-mode #devices-tab>.muted.small{margin:-6px 0 15px}
#customer-dialog .activation-field .form-grid{margin-top:14px}
.form-error{background:#fff0ef;border:1px solid #f2c9c4;color:#a33b35;border-radius:5px;padding:10px 12px;margin:0;font-size:12px;line-height:1.4}
@media(max-width:900px){.panel-mode .topbar{width:190px}.panel-mode main{margin-left:190px}.panel-mode .tabs{width:166px}.panel-mode .stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.panel-mode .topbar{position:relative;inset:auto;width:auto;height:auto;padding:12px 16px;flex-direction:row;align-items:center;justify-content:space-between}.panel-mode .identity{margin:0;padding:0;border:0;flex-direction:row}.panel-mode .identity #staff-name{display:none}.panel-mode .tabs{position:static;width:auto;display:flex;overflow:auto;margin:0 0 20px;padding-bottom:6px}.panel-mode .tabs button{white-space:nowrap}.panel-mode main{margin-left:0;padding:18px 14px 50px}.panel-mode .page-head{align-items:flex-start}.panel-mode .customer-tools{grid-template-columns:1fr}.panel-mode .stats{margin-bottom:16px}}
@media(max-width:700px){#customer-dialog{padding:20px 16px}#customer-dialog .form-grid,#customer-dialog .permission-fields{grid-template-columns:1fr}#customer-dialog .dialog-actions{bottom:-20px}}