:root{
  --pink:#f8b4c8; --pink-soft:#fde7ee; --violet:#c3b1e1; --violet-soft:#efe9fb;
  --blue:#a8d5e5; --blue-soft:#e6f4f9; --mint:#b8e6cf; --peach:#ffd9b3;
  --ink:#3d3550; --muted:#8a83a0; --bg:#faf7fc; --card:#ffffff; --line:#efeaf6;
  --ok:#5cb98b; --warn:#e6b56a; --danger:#e58a9a; --info:#7fb8d4;
  --radius:18px; --shadow:0 6px 24px rgba(120,100,160,.10);
}
[data-theme="dark"]{ --ink:#eae6f5; --muted:#a79fc0; --bg:#191527; --card:#221d36; --line:#312a4a; --shadow:0 6px 24px rgba(0,0,0,.35); }
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Nunito',system-ui,Segoe UI,sans-serif;font-size:14.5px}
a{text-decoration:none}
.app{display:flex;min-height:100vh}
.sidebar{width:258px;flex:0 0 258px;background:linear-gradient(170deg,var(--pink-soft),var(--violet-soft) 55%,var(--blue-soft));border-right:1px solid var(--line);padding:18px 14px;position:sticky;top:0;height:100vh;overflow-y:auto;transition:.25s}
[data-theme="dark"] .sidebar{background:linear-gradient(170deg,#2a2140,#221d36)}
.brand{display:flex;gap:10px;align-items:center;font-weight:800;font-size:18px;margin-bottom:6px;color:var(--ink)}
.brand-badge{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--pink),var(--violet));display:grid;place-items:center;color:#fff;font-size:18px}
.brand small{display:block;font-size:10.5px;font-weight:600;color:var(--muted)}
.nav-title{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:16px 8px 6px;font-weight:800}
.nav-link{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;color:var(--ink);font-weight:600;margin-bottom:3px}
.nav-link:hover{background:rgba(255,255,255,.65)}
[data-theme="dark"] .nav-link:hover{background:rgba(255,255,255,.06)}
.nav-link.active{background:linear-gradient(135deg,var(--pink),var(--violet));color:#fff;box-shadow:var(--shadow)}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:12px 22px;display:flex;align-items:center;gap:12px}
.content{padding:22px;flex:1}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-header{border-bottom:1px solid var(--line);background:transparent;font-weight:800;border-radius:var(--radius) var(--radius) 0 0}
.kpi{cursor:pointer;transition:.18s;border:1px solid var(--line);border-radius:var(--radius);padding:16px;background:var(--card);box-shadow:var(--shadow)}
.kpi:hover{transform:translateY(-3px)}
.kpi .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:20px;color:#fff}
.kpi h3{font-size:26px;font-weight:800;margin:8px 0 0}
.kpi p{margin:0;color:var(--muted);font-size:12.5px;font-weight:700}
.bg-pink{background:linear-gradient(135deg,#f8b4c8,#f191ad)}
.bg-violet{background:linear-gradient(135deg,#c3b1e1,#a48ed4)}
.bg-blue{background:linear-gradient(135deg,#a8d5e5,#7fb8d4)}
.bg-mint{background:linear-gradient(135deg,#b8e6cf,#83cfab)}
.bg-peach{background:linear-gradient(135deg,#ffd9b3,#f5b877)}
.bg-rose{background:linear-gradient(135deg,#ffb3b3,#ef8383)}
.bg-lilac{background:linear-gradient(135deg,#d9c2f0,#b795e0)}
.badge-soft{padding:.32rem .6rem;border-radius:999px;font-size:11.5px;font-weight:800}
.b-success{background:#e4f6ec;color:#2f8a5f}.b-warning{background:#fdf1de;color:#a9762a}
.b-danger{background:#fde8ec;color:#b8465c}.b-info{background:#e4f2f9;color:#2f7595}
.b-secondary{background:#eeecf4;color:#6c6485}
.heatmap{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.hm-cell{aspect-ratio:1;border-radius:9px;background:#f2eef8;display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--muted);cursor:pointer}
[data-theme="dark"] .hm-cell{background:#2c2545}
.hm-1{background:#fde7ee;color:#b8465c}.hm-2{background:#fbc9d8;color:#8d3550}
.hm-3{background:#f8a8c0;color:#fff}.hm-4{background:#ef7fa4;color:#fff}.hm-5{background:#e2547f;color:#fff}
.drawer{position:fixed;top:0;right:-560px;width:min(560px,100%);height:100vh;background:var(--card);box-shadow:-8px 0 30px rgba(80,60,120,.18);transition:.3s;z-index:1080;overflow-y:auto}
.drawer.open{right:0}
.drawer-backdrop{position:fixed;inset:0;background:rgba(45,35,70,.35);z-index:1070;display:none}
.drawer-backdrop.open{display:block}
.table>:not(caption)>*>*{background:transparent;color:var(--ink);border-color:var(--line)}
.table thead th{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.form-control,.form-select{background:var(--card);border-color:var(--line);color:var(--ink);border-radius:12px}
.form-control:focus,.form-select:focus{border-color:var(--violet);box-shadow:0 0 0 .2rem rgba(195,177,225,.35);background:var(--card);color:var(--ink)}
.btn{border-radius:12px;font-weight:700}
.btn-primary{background:linear-gradient(135deg,var(--pink),var(--violet));border:none}
.btn-primary:hover{filter:brightness(.95)}
.btn-soft{background:var(--violet-soft);color:#6a4fa3;border:1px solid var(--line)}
.avatar{width:38px;height:38px;border-radius:12px;object-fit:cover;background:var(--violet-soft)}
.timeline{border-left:2px dashed var(--line);padding-left:16px;margin-left:6px}
.timeline .item{position:relative;padding-bottom:14px}
.timeline .item:before{content:'';position:absolute;left:-23px;top:4px;width:11px;height:11px;border-radius:50%;background:var(--pink)}
.print-only{display:none}
@media print{.sidebar,.topbar,.no-print{display:none!important}.content{padding:0}.print-only{display:block}}
@media (max-width:991px){.sidebar{position:fixed;left:-270px;z-index:1100}.sidebar.show{left:0}}