:root{--brand:#6d4aff;--brand-dark:#5538d6;--brand-soft:#efeaff;--ink:#1d1b3a;--muted:#6b6a8a;--bg:#f5f4fc;--card:#fff;--line:#e8e6f5;--ok:#17a673;--warn:#f59e0b;--bad:#e5484d;--side:260px}
html,body{background:var(--bg);color:var(--ink);font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;font-size:.95rem}
a{color:var(--brand);text-decoration:none}a:hover{color:var(--brand-dark)}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--side);background:#fff;border-right:1px solid var(--line);overflow-y:auto;z-index:1040;padding:1rem .75rem 4rem;transition:transform .2s}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.25rem;color:var(--ink);padding:.25rem .5rem 1rem}
.brand-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#ff6b9a,#ffb347 55%,#6d4aff);display:inline-block}
.nav-group>button{width:100%;display:flex;align-items:center;gap:.7rem;border:0;background:none;color:var(--ink);padding:.6rem .75rem;border-radius:.7rem;text-align:left;font-weight:500}
.nav-group>button:hover,.nav-group.open>button{background:var(--brand-soft);color:var(--brand)}
.nav-group>button .chev{margin-left:auto;font-size:.7rem;transition:transform .2s}.nav-group.open>button .chev{transform:rotate(90deg)}
.nav-sub{list-style:none;margin:.1rem 0 .4rem 1.3rem;padding:0 0 0 .6rem;border-left:2px solid var(--brand-soft)}
.nav-sub a{display:block;padding:.28rem .6rem;border-radius:.5rem;color:var(--muted);font-size:.88rem}
.nav-sub a:hover,.nav-sub a.active{background:var(--brand-soft);color:var(--brand)}
.main{margin-left:var(--side);min-height:100vh}
.topbar{position:sticky;top:0;z-index:1030;background:rgba(245,244,252,.92);backdrop-filter:blur(6px);padding:.75rem 1.5rem;display:flex;gap:.75rem;align-items:center;border-bottom:1px solid var(--line)}
.topbar .search{flex:1;max-width:520px}
.topbar .search input{border-radius:.7rem 0 0 .7rem;border:1px solid var(--line)}.topbar .search button{border-radius:0 .7rem .7rem 0;background:#ff5c8a;border:0;color:#fff}
.content{padding:1.25rem 1.5rem 3rem}
.page-head{display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-end;justify-content:space-between;margin-bottom:1.1rem}
.page-head h1{font-size:1.65rem;font-weight:700;margin:0}.page-head .sub{color:var(--muted)}
.card-x{background:var(--card);border:1px solid var(--line);border-radius:1rem;box-shadow:0 1px 2px rgba(60,40,140,.04)}
.card-x>.hd{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.1rem .4rem;font-weight:650}
.card-x>.bd{padding:.5rem 1.1rem 1.1rem}
.kpi{display:flex;gap:.9rem;align-items:center;padding:1rem 1.1rem}
.kpi .ic{width:52px;height:52px;border-radius:.9rem;display:grid;place-items:center;font-size:1.5rem;background:var(--brand-soft);color:var(--brand)}
.kpi .v{font-size:1.7rem;font-weight:700;line-height:1.1}.kpi .l{color:var(--muted);font-size:.85rem}
.kpi.pink .ic{background:#ffe7ef;color:#e5487a}.kpi.teal .ic{background:#dcf7f6;color:#0e9aa7}.kpi.amber .ic{background:#fff0d9;color:#d98300}
.table-x{width:100%;border-collapse:separate;border-spacing:0}
.table-x th{background:#f7f6fd;color:var(--muted);font-weight:600;font-size:.8rem;padding:.6rem .8rem;border-bottom:1px solid var(--line);white-space:nowrap}
.table-x td{padding:.6rem .8rem;border-bottom:1px solid #f0eef9;vertical-align:middle}
.table-x tr:hover td{background:#fbfaff}
.btn-brand{background:var(--brand);border-color:var(--brand);color:#fff}.btn-brand:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}
.btn-soft{background:var(--brand-soft);color:var(--brand);border:0}.btn-soft:hover{background:#e2d9ff;color:var(--brand-dark)}
.badge-s{display:inline-block;padding:.2rem .6rem;border-radius:2rem;font-size:.76rem;font-weight:600;background:#eceaf8;color:#55537a;text-transform:capitalize;white-space:nowrap}
.badge-s.ok{background:#dcf5ea;color:#0d7a53}.badge-s.warn{background:#fff0d1;color:#9a6200}.badge-s.bad{background:#fde4e5;color:#b3262b}.badge-s.info{background:#e4ecff;color:#2c52b8}
.form-label{font-weight:600;font-size:.85rem}.req::after{content:" *";color:var(--bad)}
.form-control,.form-select{border-radius:.6rem;border-color:#dcd9ef}.form-control:focus,.form-select:focus{border-color:var(--brand);box-shadow:0 0 0 .2rem rgba(109,74,255,.15)}
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:1rem}.auth-card{width:min(420px,100%);padding:2rem}
.demo-note{font-size:.78rem;color:var(--muted)}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem}
.timeline{list-style:none;margin:0;padding:0}.timeline li{padding:.45rem 0 .45rem .9rem;border-left:2px solid var(--brand-soft);font-size:.88rem}
@media(max-width:991px){.sidebar{transform:translateX(-100%)}.sidebar.show{transform:none;box-shadow:0 0 40px rgba(0,0,0,.25)}.main{margin-left:0}.content{padding:1rem}}
@media print{.sidebar,.topbar,.no-print{display:none!important}.main{margin:0}.card-x{border:0;box-shadow:none}}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;z-index:2000;background:#fff;padding:.5rem}