:root{--violet:#7865db;--violet-2:#9b8cf0;--ink:#30324a;--muted:#73758e;--bg:#f4f4fa;--panel:#fff;--line:#e4e3ef;--soft:#f0edff;--green:#36b8aa;--green2:#218d83;--lime:#c5f27c;--shadow:0 12px 30px rgba(59,52,112,.10)}
body{background:radial-gradient(circle at 20% 0,#e9e5ff 0,transparent 35%),#f4f4fa;color:var(--ink)}
.app{grid-template-columns:90px minmax(0,1fr)!important}.sidebar{width:90px;padding:18px 9px;background:linear-gradient(180deg,#5b558f,#6962a3 46%,#494676);border-right:0;align-items:center;overflow:visible}.brand{height:53px;padding:0 0 16px;margin:0 0 10px;border-color:rgba(255,255,255,.18);font-size:0}.brand .mark{width:38px;height:38px;border-radius:13px;background:linear-gradient(135deg,#c6f177,#e6ff94);font-size:21px;box-shadow:0 6px 14px rgba(26,35,67,.24)}.nav-label{display:none}.nav{width:100%;gap:8px;margin:3px 0 12px}.nav button{height:45px;justify-content:center;padding:0;border-radius:13px;color:#d8d5f3;font-size:0;position:relative}.nav button:hover{background:rgba(255,255,255,.14);color:#fff}.nav button.active{background:rgba(255,255,255,.95);color:var(--violet);box-shadow:0 7px 18px rgba(27,25,70,.21)}.nav button.active:before{display:none}.nav .ico{width:auto;font-size:22px;color:inherit}.nav-count{position:absolute;right:3px;top:3px;min-width:17px;padding:1px 4px;border:2px solid #625d9a;background:#fd8f9f;color:#fff;font-size:9px}.nav button.active .nav-count{background:#f68ba0;color:#fff}.sidebar-foot{margin-top:auto;padding:12px 0 0;border-color:rgba(255,255,255,.18)}.sidebar-foot .user{display:none}.avatar{width:37px;height:37px;background:linear-gradient(135deg,#fff,#dbd7ff);color:#5e5792;box-shadow:0 5px 12px rgba(32,29,76,.25)}
.topbar{height:80px;padding:0 30px;background:rgba(255,255,255,.8);border-bottom:1px solid var(--line);backdrop-filter:blur(16px);gap:12px}.global-search{max-width:none;width:min(760px,62vw);height:42px;background:#fff;border:1px solid #e1dff0;border-radius:22px;box-shadow:0 3px 10px rgba(77,70,131,.05);padding-left:19px;font-style:italic}.top-spacer{display:none}.circle-btn{width:40px;height:40px;border-color:#e3e1ee;border-radius:50%;background:#fff;color:#766fa5;box-shadow:0 3px 10px rgba(77,70,131,.05)}.primary{border-radius:22px;padding:11px 19px;background:linear-gradient(135deg,#36b9aa,#2ba799);box-shadow:0 8px 18px rgba(38,158,145,.22)}.primary:hover{background:linear-gradient(135deg,#25a99b,#238f84)}.content{max-width:1720px;padding:32px 38px 55px}.eyebrow{color:var(--violet);font-size:10px}.heading h1{font-size:31px;letter-spacing:-.7px}.heading p{color:var(--muted)}.date-chip{border:0;background:#edeaff;color:#615a9c;border-radius:20px;font-weight:700}
.metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.card{border:1px solid rgba(224,222,239,.9);border-radius:18px;box-shadow:var(--shadow)}.metric{padding:21px}.metric-top{color:#777890}.metric-icon{width:40px;height:40px;border-radius:14px;background:linear-gradient(135deg,#f0edff,#e2defd);color:var(--violet);display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1;padding:0;font-size:20px}.metric strong{font-size:30px;letter-spacing:-1px}.trend{color:var(--green2)}.trend.warn{color:#da697a}.dashboard-grid{grid-template-columns:1.5fr .85fr;gap:18px}.panel{padding:23px}.panel h2{font-size:16px}.link-btn{color:var(--violet)}.donut{background:conic-gradient(#7665dc 0 57%,#a79cf3 57% 76%,#45c2b1 76% 91%,#f4a579 91% 100%);box-shadow:inset 0 0 0 6px #f5f4fc}.donut:before{background:#fff}.bar{background:#f0eff6}.bar i{background:#7665dc}.alert{background:#f9f8fe;border:1px solid #eeedf6}.alert-icon{background:#eeeaff;color:#7665dc}.badge{background:#ece8ff;color:#625aa1}.activity{margin-top:18px}.event{border-left-color:#7463db;background:#faf9ff}.event strong{color:#3c3d55}
.inventory-toolbar{background:#fff;border:1px solid var(--line);padding:12px;border-radius:16px;box-shadow:0 5px 16px rgba(59,52,112,.05)}.search-box input,select,.filter-btn{border-color:#e2e0ec;border-radius:10px}.table-card{border-radius:18px}.table-meta{padding:18px 21px;background:linear-gradient(90deg,#fff,#faf9ff)}th{background:#f8f7fc;color:#77758d;padding:13px 18px}td{padding:16px 18px;border-color:#eeedf5}tbody tr:hover{background:#fbfaff}.device-icon{background:#eeeaff;color:#7160d0;border-radius:12px}.status.active{background:#e2f7f2;color:#218c82}.status.maint{background:#fff0e5;color:#c77335}.status.stock{background:#eceaff;color:#655db0}.status.risk{background:#ffe9ed;color:#c64b64}
.drawer{width:min(690px,95vw)}.drawer-head{background:linear-gradient(135deg,#58528a,#7565c8)}.hero-icon{background:linear-gradient(135deg,#d9ff94,#b8e670);color:#415632}.tabs button.active{color:#6759bd;border-color:#7565d4}.health{background:#f5f3ff}.health-score{border-color:#49bbab;color:#258c82}.modal{border-radius:22px}.form-field input,.form-field select{border-color:#e1dfeb;border-radius:10px}.secondary{border-color:#dfddea;border-radius:10px;color:#575671}.toast{background:#565087}
@media(max-width:760px){.app{grid-template-columns:1fr!important}.sidebar{width:250px;align-items:stretch}.sidebar .brand{font-size:20px}.sidebar .nav-label{display:block}.sidebar .nav button{justify-content:flex-start;font-size:13px;padding:0 12px}.sidebar .user{display:block}.topbar{padding:0 16px}.content{padding:22px 16px}.metrics{grid-template-columns:1fr 1fr}.dashboard-grid{grid-template-columns:1fr}.global-search{width:auto;flex:1}.hide-mobile{display:none}}

/* Shared icon geometry for every module, including dynamically rendered cards. */
.material-symbols-outlined{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;flex-shrink:0;line-height:1;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}
.metric-top{align-items:center;gap:12px;min-height:40px}
.metric-top>span:first-child{min-width:0}
.metric-icon,.alert-icon,.device-icon,.hero-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;padding:0;text-align:center}
.metric-icon{width:40px;height:40px;font-size:20px}
.alert-icon,.device-icon{width:38px;height:38px;font-size:20px}
.hero-icon{width:58px;height:58px;font-size:28px}
.nav .ico{width:24px;height:24px;flex:0 0 24px;font-size:22px}
.circle-btn,.drawer-close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:0}