:root{--bg:#f4f7fb;--surface:#fff;--text:#172033;--muted:#667085;--line:#e5eaf1;--nav:#13243a;--nav2:#1d3553;--accent:#245fe5;--good:#16803a;--bad:#c92a2a;--warn:#b06a00;--shadow:0 10px 28px rgba(31,48,76,.08);--radius:17px}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}button,select{font:inherit}.shell{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,var(--nav),#0e1c2e);color:#fff;padding:22px 16px;display:flex;flex-direction:column;gap:18px;z-index:40}.brand{display:flex;gap:12px;align-items:center;padding:3px 8px 18px;border-bottom:1px solid rgba(255,255,255,.12)}.brand-mark{width:42px;height:42px;border-radius:12px;background:#fff;color:var(--nav);display:grid;place-items:center;font-weight:900}.brand h1{font-size:16px;margin:0}.brand small{color:#b8c5d5}.nav{display:flex;flex-direction:column;gap:6px}.nav-btn{border:0;border-radius:11px;background:transparent;color:#cbd6e4;text-align:left;padding:12px 13px;cursor:pointer;font-weight:600}.nav-btn span{display:inline-block;width:25px}.nav-btn:hover,.nav-btn.active{background:var(--nav2);color:#fff}.sidebar-foot{margin-top:auto;display:grid;gap:7px;color:#9cb0c7;font-size:12px}.qlik-status{border-radius:9px;padding:8px 10px;font-weight:700}.qlik-status.warn{background:#4c3b17;color:#ffe5a3}.qlik-status.live{background:#123d2b;color:#b8f5d4}.main{min-width:0}.topbar{min-height:72px;background:rgba(255,255,255,.95);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:12px 22px;position:sticky;top:0;z-index:30;backdrop-filter:blur(10px)}.topbar-title{min-width:205px}.topbar-title h2{font-size:18px;margin:0}.topbar-title p{margin:3px 0 0;font-size:12px;color:var(--muted)}.selection-summary{min-width:0;flex:1;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.actions{display:flex;gap:8px}.btn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 12px;cursor:pointer;font-weight:600;color:var(--text)}.btn:hover{background:#f8fafc}.content{padding:22px}.warning-box{background:#fff0f0;color:#8a1d1d;border:1px solid #efbbbb;border-radius:12px;padding:12px 14px;margin-bottom:16px}.hidden{display:none!important}.filters{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;margin-bottom:18px;display:none}.filters.open{display:block}.filter-grid{display:grid;grid-template-columns:repeat(6,minmax(140px,1fr));gap:10px}.filter-grid label{font-size:11px;font-weight:700;color:#596579;text-transform:uppercase;letter-spacing:.03em}.filter-grid select{width:100%;margin-top:6px;border:1px solid #d8dee8;border-radius:9px;padding:9px 10px;background:#fff;color:var(--text)}.screen{display:none}.screen.active{display:block}.page-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}.page-head h2{margin:0 0 5px;font-size:24px}.page-head p{margin:0;color:var(--muted)}.badge{background:#eaf0ff;color:#3156a1;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:700}.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;min-width:0}.kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(165px,1fr));gap:13px;margin-bottom:15px}.qlik-card{height:145px;padding:6px}.qlik-card>div,.qlik-card iframe{height:100%!important}.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-bottom:15px}.grid-wide{display:grid;grid-template-columns:1.45fr .55fr;gap:15px;margin-bottom:15px}.card-head{padding:15px 17px 0}.card-head h3{font-size:15px;margin:0}.card-head p{font-size:12px;color:var(--muted);margin:4px 0 0}.chart{height:330px;padding:7px 8px 12px}.chart.tall{height:500px}.chart.table{height:560px}.notice{margin-bottom:15px;border-radius:12px;border:1px solid #ecd391;background:#fff9e9;color:#70510a;padding:12px 14px;font-size:13px}.loading{position:fixed;inset:0;background:rgba(244,247,251,.94);z-index:100;display:flex;align-items:center;justify-content:center;transition:opacity .2s}.loading.hidden{opacity:0;pointer-events:none}.loading-box{background:#fff;border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow);padding:26px 34px;text-align:center;display:grid;gap:7px;min-width:280px}.loading-box small{color:var(--muted)}.spinner{width:38px;height:38px;border:4px solid #e6ebf3;border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 7px}@keyframes spin{to{transform:rotate(360deg)}}.mobile-menu{display:none}
@media(max-width:1250px){.kpi-grid{grid-template-columns:repeat(3,1fr)}.filter-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:900px){.shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-280px;width:260px;transition:left .2s}.sidebar.open{left:0}.mobile-menu{display:block}.topbar-title{display:none}.content{padding:15px}.kpi-grid,.grid-2,.grid-wide{grid-template-columns:1fr}.filter-grid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.filter-grid{grid-template-columns:1fr}.actions{gap:5px}.btn{padding:8px}}