:root{
  --bg:#f4f7fb;--bg2:#eef4fb;--panel:#ffffff;--panel2:#f8fbff;--line:#dbe7f5;
  --text:#102033;--muted:#667991;--blue:#2563eb;--cyan:#06b6d4;--green:#16a34a;
  --orange:#f59e0b;--red:#dc2626;--purple:#7c3aed;--dark:#0b1728;--radius:24px;
  --shadow:0 18px 45px rgba(15,32,55,.10);
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;background:radial-gradient(circle at top left,rgba(37,99,235,.10),transparent 28%),radial-gradient(circle at top right,rgba(6,182,212,.09),transparent 22%),linear-gradient(135deg,var(--bg),var(--bg2));color:var(--text)}
a{text-decoration:none;color:inherit}.app{display:flex;min-height:100vh}
.sidebar{width:300px;position:fixed;inset:0 auto 0 0;background:linear-gradient(180deg,#0b1728,#101e35 55%,#071120);color:white;padding:22px 18px;overflow-y:auto;scrollbar-width:none}.sidebar::-webkit-scrollbar{display:none}
.brand{display:flex;align-items:center;gap:14px;padding:8px 8px 22px;border-bottom:1px solid rgba(255,255,255,.10);margin-bottom:16px}
.logo{width:58px;height:58px;border-radius:20px;background:conic-gradient(from 180deg,#ef4444,#f59e0b,#22c55e,#2f80ff,#111827,#ef4444);display:grid;place-items:center;position:relative;box-shadow:0 0 32px rgba(37,99,235,.42);font-weight:900}
.logo:after{content:"";position:absolute;width:38px;height:38px;border-radius:14px;background:#071120cc}.logo span{z-index:1;position:relative}.brand h1{margin:0;font-size:19px;line-height:1}.brand small{color:#9fb4cf;font-size:12px}
.menu-title{margin:16px 10px 8px;color:#7790b3;text-transform:uppercase;letter-spacing:.13em;font-size:11px}.menu a{display:flex;align-items:center;gap:12px;padding:10px 12px;margin:2px 0;border-radius:17px;color:#d9e8ff;border:1px solid transparent;font-size:14px;transition:.2s}.menu a.active,.menu a:hover{background:linear-gradient(90deg,rgba(37,99,235,.38),rgba(6,182,212,.10));border-color:rgba(96,165,250,.24)}.menu i{width:36px;height:36px;display:grid;place-items:center;border-radius:14px;background:rgba(255,255,255,.06);color:#8fd3ff}
.content{margin-left:300px;width:calc(100% - 300px);padding:24px}.topbar{min-height:76px;border-radius:var(--radius);background:rgba(255,255,255,.85);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:space-between;padding:16px 22px;position:sticky;top:18px;z-index:10;gap:16px}.topbar h2{margin:0;font-size:20px}.topbar p{margin:5px 0 0;color:var(--muted);font-size:13px}
.profile{display:flex;align-items:center;gap:12px;padding:9px 12px;background:#f8fbff;border:1px solid var(--line);border-radius:18px}.avatar{width:40px;height:40px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--cyan));color:white;font-weight:900}
.hero,.grid{display:grid;grid-template-columns:1.16fr .84fr;gap:22px;margin-top:24px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:24px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:24px}
.card,.panel,.kpi,.module{background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.card{padding:34px;position:relative;overflow:hidden}.card:after{content:"";position:absolute;right:-90px;top:-90px;width:270px;height:270px;background:radial-gradient(circle,rgba(37,99,235,.14),transparent 70%)}
.badge,.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;font-size:12px;background:rgba(37,99,235,.08);border:1px solid rgba(37,99,235,.18);color:#1d4ed8;font-weight:700}.pill{background:#f8fbff;color:var(--muted);border-color:var(--line)}
.card h1{font-size:40px;line-height:1.05;margin:18px 0 14px}.card p,.module p{color:var(--muted);line-height:1.6}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn{border:0;border-radius:17px;padding:13px 18px;background:linear-gradient(135deg,var(--blue),var(--cyan));color:white;font-weight:800;cursor:pointer;display:inline-block}.btn.alt{background:white;border:1px solid var(--line);color:var(--text)}.btn.danger{background:linear-gradient(135deg,var(--red),#f97316)}
.kpi{padding:20px}.kpi i{font-size:24px;color:var(--blue)}.kpi label{display:block;color:var(--muted);font-size:13px;margin-top:12px}.kpi strong{display:block;font-size:28px;margin-top:7px}
.panel{padding:22px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.panel-head h3{margin:0;font-size:18px}
table{width:100%;border-collapse:collapse}th,td{padding:13px 10px;text-align:left;border-bottom:1px solid var(--line);font-size:13px}th{color:#6c7e93}td{color:#1f334a}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px}.green{background:var(--green)}.orange{background:var(--orange)}.red{background:var(--red)}.blue{background:var(--blue)}
.module{padding:20px;min-height:150px;position:relative;overflow:hidden}.module:after{content:"";position:absolute;right:-70px;bottom:-70px;width:130px;height:130px;border-radius:50%;background:rgba(37,99,235,.08)}.module i{font-size:27px;color:var(--blue)}.module h4{margin:14px 0 8px}
.chart{height:245px;border:1px solid var(--line);background:linear-gradient(180deg,#f8fbff,#edf5ff);border-radius:20px;padding:18px;display:flex;align-items:flex-end;gap:10px}.chart b{flex:1;border-radius:12px 12px 0 0;background:linear-gradient(180deg,var(--cyan),var(--blue));opacity:.9}
.map{height:360px;border:1px solid var(--line);border-radius:22px;background:radial-gradient(circle at 40% 35%,rgba(37,99,235,.17),transparent 18%),linear-gradient(135deg,#f9fcff,#eaf3ff);position:relative;overflow:hidden}.pin{position:absolute;width:18px;height:18px;border-radius:50%;background:var(--green);box-shadow:0 0 0 8px rgba(22,163,74,.15)}.pin.warn{background:var(--orange);box-shadow:0 0 0 8px rgba(245,158,11,.15)}
.ticket{padding:16px;border:1px solid var(--line);background:#f8fbff;border-radius:18px;margin-bottom:12px}.ticket h4{margin:0 0 6px}.ticket p{margin:0;color:var(--muted);font-size:13px}
.field label{display:block;color:var(--muted);font-size:12px;margin-bottom:7px}.field input,.field select,.field textarea{width:100%;background:white;border:1px solid var(--line);border-radius:15px;color:var(--text);padding:13px;outline:none}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.login-page{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:min(1120px,100%);display:grid;grid-template-columns:1fr .86fr;overflow:hidden;border:1px solid var(--line);border-radius:32px;background:white;box-shadow:var(--shadow)}.login-left{padding:46px;background:linear-gradient(135deg,#0b1728,#101e35);color:white}.login-left h1{font-size:44px;line-height:1;margin:22px 0}.login-left p{color:#b9c8dd;line-height:1.7}.login-form{padding:46px}
.footer{margin-top:28px;padding:20px;text-align:center;color:var(--muted);background:white;border:1px solid var(--line);border-radius:22px}.alert{padding:14px 16px;border-radius:16px;margin:16px 0;background:#ecfdf5;color:#166534;border:1px solid #bbf7d0}.alert.error{background:#fef2f2;color:#991b1b;border-color:#fecaca}
.modal{position:fixed;inset:0;background:rgba(2,6,23,.55);backdrop-filter:blur(8px);z-index:999;display:none;align-items:center;justify-content:center;padding:22px}.modal-card{width:min(850px,100%);max-height:90vh;overflow:auto;scrollbar-width:none;background:white;border:1px solid var(--line);border-radius:28px;box-shadow:0 28px 90px rgba(15,32,55,.26);padding:26px}.modal-card::-webkit-scrollbar{display:none}
@media(max-width:1100px){.sidebar{position:relative;width:100%;height:auto}.app{display:block}.content{margin-left:0;width:100%}.hero,.grid,.grid-2,.login-card{grid-template-columns:1fr}.grid-3,.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.grid-3,.grid-4,.form-grid{grid-template-columns:1fr}.card h1{font-size:30px}.topbar{align-items:flex-start;flex-direction:column}}