@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#07111f;--side:#081421;--surface:#101f30;--surface-2:#15263a;--surface-3:#1a2c42;--border:#25374b;--text:#f1f5fa;--muted:#90a0b4;--accent:#6c7eff;--green:#26d190;--yellow:#eab84d;--red:#f27879;--blue:#59b7f6;--shadow:0 20px 60px #02081255}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:'DM Sans',Arial,sans-serif;background:var(--bg);color:var(--text)}body{font-size:14px}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}input,select,textarea{color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:10px 12px;outline:none;width:100%}input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px #6c7eff22}textarea{resize:vertical;min-height:84px}label{display:grid;gap:7px;color:#c3d0df;font-size:12px;font-weight:700}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:Manrope,Arial,sans-serif;letter-spacing:-.035em}small,.muted{color:var(--muted)}a{color:var(--accent)}[hidden]{display:none!important}.eyebrow{font-size:10px;letter-spacing:.16em;font-weight:800;color:#8397b0;margin-bottom:8px}.btn{border:1px solid var(--border);background:var(--surface-2);color:var(--text);padding:10px 14px;border-radius:9px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.15s}.btn:hover:not(:disabled){border-color:#7388a2;transform:translateY(-1px)}.btn.primary{background:#6376f5;border-color:#7385ff;color:#fff;box-shadow:0 8px 24px #4c5dcd33}.btn.primary:hover{background:#7486ff}.btn.green{background:#1d785b;border-color:#269970}.btn.red{background:#6d313b;border-color:#a34350}.btn.ghost{background:transparent}.btn.small{padding:7px 10px;font-size:12px}.btn.wide{width:100%;justify-content:space-between}.btn-row{display:flex;gap:8px;flex-wrap:wrap}.form-error{color:var(--red);min-height:20px;font-size:12px}.brand-mark{width:36px;height:36px;background:linear-gradient(135deg,#5367ed,#7386ff);border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:16px;font-family:Manrope;font-weight:800;letter-spacing:-.08em;color:#fff;box-shadow:0 9px 22px #5367ed40}.brand-mark span{font-size:11px;align-self:flex-end;margin-bottom:7px}.brand-mark.large{width:55px;height:55px;font-size:25px;border-radius:16px}.brand-mark.large span{font-size:16px;margin-bottom:10px}.pulse{width:7px;height:7px;display:inline-block;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px #26d19022}
.login-screen{min-height:100vh;display:grid;grid-template-columns:minmax(400px,1.05fr) minmax(400px,.95fr);background:#0b1727}.login-art{padding:clamp(45px,8vw,130px);display:flex;flex-direction:column;justify-content:center;background:radial-gradient(circle at 78% 22%,#3d54b652,transparent 32%),linear-gradient(145deg,#0a1b31,#06101e);border-right:1px solid var(--border)}.login-art .eyebrow{margin-top:65px;color:#9dacff}.login-art h1{font-size:clamp(42px,5vw,76px);line-height:1.1;margin:0 0 20px}.login-art h1 em{font-style:normal;color:#8e9bff}.login-art>p:not(.eyebrow){font-size:17px;max-width:470px;color:#9fb2c8;line-height:1.7}.login-art-footer{display:flex;align-items:center;gap:10px;font-size:11px;color:#98abc0;font-weight:800;letter-spacing:.12em;margin-top:90px}.login-card{max-width:420px;width:calc(100% - 60px);align-self:center;justify-self:center;padding:38px;background:#111f31;border:1px solid #2b3c54;border-radius:18px;box-shadow:var(--shadow);display:grid;gap:19px}.login-card-icon{font-size:30px;color:var(--accent);background:#7386ff22;border:1px solid #7386ff44;border-radius:12px;width:48px;height:48px;text-align:center}.login-card h2{font-size:27px;margin:-12px 0 -17px}.login-card .muted{margin:0 0 6px}.login-card small{font-size:11px;text-align:center;line-height:1.5}
.app-shell{min-height:100vh;display:grid;grid-template-columns:236px minmax(0,1fr)}.sidebar{height:100vh;position:sticky;top:0;background:linear-gradient(180deg,#091726,#091521);border-right:1px solid #1d3045;padding:20px 12px;display:flex;flex-direction:column;z-index:30}.brand{display:flex;gap:10px;align-items:center;padding:2px 8px 24px}.brand strong{display:block;font-family:Manrope;font-size:15px}.brand small{display:block;font-size:8px;letter-spacing:.14em;margin-top:3px;color:#8c9eb2}.workspace-tag{display:flex;align-items:center;gap:10px;background:#122439;border:1px solid #20364f;border-radius:10px;padding:11px;margin:0 6px 28px}.workspace-tag>div{flex:1}.workspace-tag b{display:block;font-size:10px;letter-spacing:.08em}.workspace-tag small{font-size:10px}.sidebar nav{overflow-y:auto;flex:1}.nav-label{color:#687e98;font-size:9px;letter-spacing:.13em;font-weight:900;margin:22px 12px 8px}.nav-button{display:flex;align-items:center;gap:12px;width:100%;border:1px solid transparent;border-radius:9px;background:none;color:#a7b9cd;padding:11px 12px;text-align:left;font-size:12px;font-weight:700;margin:3px 0}.nav-button:hover{background:#112439;color:#fff}.nav-button.active{background:linear-gradient(90deg,#6174f144,#6174f10e);color:#fff;border-color:#6679f144;box-shadow:inset 3px 0 #7587ff}.nav-icon{font-size:16px;width:20px;text-align:center;color:#9eafff}.sidebar-bottom{border-top:1px solid #203147;padding:18px 8px 0}.sidebar-status{display:flex;align-items:center;gap:10px;margin-bottom:16px}.sidebar-status b{display:block;font-size:11px}.sidebar-status small{font-size:10px}.theme-button{width:100%;border:1px solid var(--border);border-radius:8px;background:#102237;color:#aebfd1;text-align:left;padding:10px;font-size:12px}.main-column{min-width:0}.topbar{height:70px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #203147;background:#0a1727cc;backdrop-filter:blur(14px);padding:0 28px;position:sticky;top:0;z-index:20}.crumb{color:#8294aa;font-size:12px}.crumb span{margin:0 9px;color:#4c6078}.crumb b{color:#d9e4f1}.top-right{display:flex;align-items:center;gap:15px}.demo-label{font-size:9px;font-weight:900;letter-spacing:.12em;color:#e2b269;background:#e2b26918;border:1px solid #e2b26935;padding:6px 8px;border-radius:6px}.icon-button{border:1px solid var(--border);background:#122237;color:#adbed3;border-radius:8px;width:31px;height:31px;font-size:18px;line-height:1}.user-chip{display:flex;align-items:center;gap:8px}.user-chip>span{width:32px;height:32px;border-radius:8px;background:#596fc4;display:grid;place-items:center;font-size:11px;font-weight:800}.user-chip b,.user-chip small{display:block;font-size:10px}.user-chip small{text-transform:uppercase;font-size:9px}.menu-button{display:none}.content{max-width:1560px;margin:auto;padding:30px}.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:24px}.page-head h1{font-size:28px;margin:0 0 6px}.page-head p{color:var(--muted);font-size:13px;margin:0}.page-actions{display:flex;gap:8px}.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:20px}.kpi{background:linear-gradient(145deg,#122339,#0e1c2c);border:1px solid #26394f;border-radius:13px;padding:19px;min-height:122px;position:relative}.kpi small{font-size:11px;font-weight:700}.kpi strong{display:block;font-family:Manrope;font-size:32px;letter-spacing:-.05em;margin-top:12px}.kpi .kpi-icon{position:absolute;right:17px;top:16px;color:#8f9fff;background:#7184ff22;border-radius:9px;width:34px;height:34px;display:grid;place-items:center;font-size:17px}.kpi.good .kpi-icon{color:var(--green);background:#26d19022}.kpi.warn .kpi-icon{color:var(--yellow);background:#eab84d22}.kpi.danger .kpi-icon{color:var(--red);background:#f2787922}.split-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,.85fr);gap:18px}.panel{background:#101f30;border:1px solid #26394f;border-radius:13px;overflow:hidden;margin-bottom:18px}.panel-head{padding:18px 20px;border-bottom:1px solid #25384e;display:flex;justify-content:space-between;align-items:center;gap:12px}.panel-head h2{font-size:15px;margin:0}.panel-head p{font-size:11px;color:var(--muted);margin:4px 0 0}.panel-body{padding:20px}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;min-width:620px}.table th{text-align:left;color:#788da6;font-size:10px;letter-spacing:.06em;text-transform:uppercase;background:#132439;padding:13px 17px}.table td{border-top:1px solid #24364b;padding:13px 17px;font-size:12px;color:#c8d5e4}.table tr:hover td{background:#15283d}.table .primary-cell{font-weight:800;color:#f2f6fc}.table button.link{color:#aebaff;background:none;border:0;padding:0;text-align:left;font-weight:800}.table button.link:hover{text-decoration:underline}.status{display:inline-flex;align-items:center;gap:7px;border-radius:99px;padding:5px 9px;font-size:10px;font-weight:800;background:#64758b22;color:#aebfd2}.status::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}.status.running,.status.done{background:#26d19020;color:#44e1a5}.status.paused,.status.delivered{background:#eab84d1f;color:#efc767}.status.draining,.status.pending{background:#67a9ee22;color:#7bbfff}.status.offline,.status.failed,.status.expired{background:#f278791d;color:#f69b9d}.status.uncertain{background:#eab84d1f;color:#efc767}.empty{padding:44px 22px;text-align:center;color:var(--muted)}.empty-icon{font-size:30px;color:#6175f0;margin-bottom:8px}.pair-card{background:linear-gradient(145deg,#303c80,#202e60);border:1px solid #6677d280;border-radius:13px;padding:23px;margin-bottom:18px}.pair-card .eyebrow{color:#bcc5ff}.pair-card h2{font-size:20px;margin:0 0 7px}.pair-card p{color:#c8d2fb;font-size:12px;line-height:1.6;max-width:350px}.pair-card .btn{background:#eef2ff;color:#2e3c80;border-color:#fff}.feed-item{display:flex;gap:11px;padding:13px 20px;border-top:1px solid #24364b}.feed-item:first-child{border:0}.feed-icon{width:31px;height:31px;display:grid;place-items:center;flex:none;background:#6d80ff22;color:#aab7ff;border-radius:8px}.feed-item b{display:block;font-size:11px}.feed-item small{display:block;font-size:10px;margin-top:3px}.feed-item time{margin-left:auto;color:#72859a;font-size:10px;white-space:nowrap}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.form-grid .span-2{grid-column:1/-1}.form-actions{display:flex;gap:9px;margin-top:18px}.field-hint{font-size:11px;color:var(--muted);line-height:1.5;margin:6px 0 0}.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.detail-stat{background:#14263a;border:1px solid #263a51;border-radius:9px;padding:14px}.detail-stat small{display:block;font-size:10px}.detail-stat b{display:block;font-size:16px;margin-top:7px}.command-actions{display:flex;gap:8px;flex-wrap:wrap}.code-box{font-family:ui-monospace,monospace;font-size:28px;letter-spacing:.15em;text-align:center;background:#172943;border:1px dashed #7284e6;color:#dce2ff;border-radius:10px;padding:19px;margin:16px 0}.permissions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.checkbox-row{display:flex;align-items:center;gap:8px;background:#15283c;border:1px solid #26394f;border-radius:9px;padding:10px;color:#cdd9e7}.checkbox-row input{width:auto}.toast-root{position:fixed;right:20px;bottom:20px;z-index:90;display:grid;gap:8px}.toast{background:#192e44;border:1px solid #486282;border-radius:10px;padding:12px 16px;box-shadow:var(--shadow);max-width:360px;font-size:12px}.toast.error{border-color:#b65a65;color:#ffc2c3}.modal-backdrop{position:fixed;inset:0;z-index:80;background:#020812aa;display:grid;place-items:center;padding:20px}.modal{background:#122237;border:1px solid #3a4f68;border-radius:15px;max-width:580px;width:100%;max-height:90vh;overflow:auto;box-shadow:var(--shadow)}.modal-head{padding:20px 23px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between}.modal-head h2{margin:0;font-size:19px}.modal #modalBody{padding:22px}.modal .form-grid{gap:14px}.notice{padding:12px 14px;border:1px solid #9f813a88;background:#a47e2520;border-radius:9px;color:#efd59b;font-size:11px;line-height:1.6;margin:12px 0}.device-name{display:flex;align-items:center;gap:10px}.device-icon{width:33px;height:33px;background:#667cf52b;border:1px solid #7c8fff44;display:grid;place-items:center;border-radius:8px;color:#9eaeff;font-size:16px}.toggle-line{display:flex;align-items:center;gap:9px}.toggle-line input{width:auto}.break{overflow-wrap:anywhere}
body.light{--bg:#f4f7fb;--side:#edf2f9;--surface:#fff;--surface-2:#f5f8fc;--surface-3:#edf3fa;--border:#dce5f0;--text:#1d2d42;--muted:#6e8198;--shadow:0 20px 50px #20324b22}body.light .sidebar{background:#edf3fa;border-color:#dae3ef}body.light .workspace-tag,body.light .kpi,body.light .panel,body.light .login-card{background:#fff}body.light .topbar{background:#ffffffdc;border-color:#e2eaf3}body.light .nav-button{color:#435770}body.light .nav-button.active{color:#334bcc}body.light .table th{background:#f4f7fb}body.light .table td{color:#40536b;border-color:#e7edf4}body.light .table tr:hover td{background:#f7faff}body.light .panel-head{border-color:#e6edf4}body.light .modal{background:#fff}body.light .detail-stat,body.light .checkbox-row{background:#f6f9fc}body.light .sidebar-status b{color:#253a52}body.light .pair-card{color:#fff}body.light .pair-card h2{color:#fff}
@media(max-width:1120px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.split-grid{grid-template-columns:1fr}}@media(max-width:760px){.login-screen{grid-template-columns:1fr}.login-art{display:none}.app-shell{display:block}.sidebar{position:fixed;left:0;top:0;width:236px;transform:translateX(-105%);transition:transform .2s}.sidebar.open{transform:translateX(0)}.topbar{padding:0 14px}.menu-button{display:block;background:none;border:0;color:var(--text);font-size:19px}.crumb{display:none}.demo-label{display:none}.content{padding:18px 12px}.page-head{flex-direction:column}.kpi-grid{grid-template-columns:repeat(2,1fr)}.form-grid,.detail-grid,.permissions{grid-template-columns:1fr}.form-grid .span-2{grid-column:auto}}
.brand-logo{display:block;object-fit:contain;background:#fff;border-radius:9px;padding:8px}.login-logo{width:min(390px,100%);height:auto}.sidebar-logo{width:100%;height:auto;max-height:74px}.brand{display:block;padding:2px 8px 20px}.brand small{font-size:9px;text-align:center;margin-top:8px}.login-art .eyebrow{margin-top:38px}.split-grid,.form-grid,.permissions{grid-template-columns:1fr}.form-grid .span-2{grid-column:auto}.action-list{display:grid;gap:10px}.action-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:14px 16px;min-height:72px}.action-row strong{display:block;font-size:13px}.action-row p{margin:5px 0 0;color:var(--muted);font-size:11px;line-height:1.5}.action-row .btn{min-width:150px}.account-card{border:1px solid var(--border);border-radius:11px;margin-bottom:16px;overflow:hidden}.account-head{padding:16px;background:var(--surface-2);display:flex;align-items:center;justify-content:space-between;gap:12px}.account-head strong{font-size:15px}.account-head small{display:block;margin-top:4px}.account-actions{padding:12px;display:grid;gap:9px}.account-actions .action-row{background:var(--surface)}.role-row{margin-bottom:10px}.role-row:last-child,.account-card:last-child{margin-bottom:0}@media(max-width:600px){.action-row{grid-template-columns:1fr}.action-row .btn{width:100%}.account-head{align-items:flex-start}.login-logo{width:100%}}
.detail-grid{grid-template-columns:repeat(4,minmax(0,1fr))}@media(max-width:900px){.detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.detail-grid{grid-template-columns:1fr}}