:root{--sidebar:#111827;--accent:#0d6efd;--surface:#fff;--muted:#6b7280;}
body{font-size:14px}
.bg-auth{background:linear-gradient(135deg,#0f172a,#1e3a8a);min-height:100vh}
.app-shell{display:flex;min-height:100vh}
.sidebar{width:280px;background:var(--sidebar);color:#fff;padding:24px 16px;position:sticky;top:0;height:100vh;overflow:auto}
.sidebar-brand{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.brand-mark{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#2563eb,#06b6d4);display:flex;align-items:center;justify-content:center;font-weight:700}
.brand-title{font-weight:700}
.sidebar-nav{display:flex;flex-direction:column;gap:6px}
.sidebar-nav a{padding:10px 12px;border-radius:12px;color:#cbd5e1;text-decoration:none}
.sidebar-nav a.active,.sidebar-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.main-panel{flex:1;min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;background:#fff;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:10}
.content-wrap{padding:24px}
.page-title{font-size:24px;font-weight:700}
.card-soft{border:0;border-radius:18px;box-shadow:0 10px 30px rgba(15,23,42,.06)}
.stats-card{padding:22px;border-radius:18px;color:#fff}
.stats-red{background:linear-gradient(135deg,#9f1239,#be123c)}
.stats-orange{background:linear-gradient(135deg,#8b6f2e,#b79b56)}
.stats-green{background:linear-gradient(135deg,#0f766e,#14b8a6)}
.stats-slate{background:linear-gradient(135deg,#334155,#475569)}
.table-wrap{background:#fff;border-radius:18px;padding:18px;box-shadow:0 8px 24px rgba(15,23,42,.05)}
.table th{white-space:nowrap}
.form-card{background:#fff;border-radius:18px;padding:22px;box-shadow:0 8px 24px rgba(15,23,42,.05)}
.auth-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.auth-card{max-width:980px;width:100%;background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 20px 70px rgba(0,0,0,.25)}
.auth-side{background:linear-gradient(135deg,#1d4ed8,#06b6d4);color:#fff;padding:42px}
.auth-form{padding:42px}
.kpi-mini{font-size:28px;font-weight:700}
.badge{padding:.5rem .7rem}
@media (max-width:991px){
    .sidebar{position:fixed;left:-100%;transition:.3s;z-index:1000}
    .app-shell{display:block}
    .main-panel{margin-left:0}
}

.service-type-color-preview{width:42px;height:42px;border-radius:12px;border:1px solid #e5e7eb;display:inline-block}
.icon-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:6px}
.icon-picker-item{border:1px solid #e5e7eb;background:#fff;border-radius:14px;padding:12px 10px;display:flex;flex-direction:column;align-items:center;gap:8px;transition:.2s}
.icon-picker-item i{font-size:1.35rem}
.icon-picker-item span{font-size:12px;color:#475569;line-height:1.2}
.icon-picker-item:hover{border-color:#93c5fd;background:#eff6ff}
.icon-picker-item.is-selected{border-color:#2563eb;background:#dbeafe;box-shadow:0 0 0 1px rgba(37,99,235,.2) inset}

.bg-light-subtle{background:#f8fafc !important}


.brand-logo{max-width:48px;max-height:48px;border-radius:12px;background:#fff;padding:6px;object-fit:contain}
.brand-mark-sm{width:34px;height:34px;border-radius:10px;font-size:12px}
.topbar-logo{max-height:38px;max-width:240px;object-fit:contain}
.topbar-app-title{font-weight:700;color:#0f172a;white-space:nowrap}
.top-nav-bar{background:#fff;border-bottom:1px solid #e5e7eb;padding:0 24px}
.top-nav-inner{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0}
.top-nav-inner a{padding:9px 12px;border-radius:12px;color:#475569;text-decoration:none;border:1px solid transparent}
.top-nav-inner a.active,.top-nav-inner a:hover{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}
.app-shell-top{display:block}
.app-shell-top .main-panel{width:100%}
.min-w-0{min-width:0}
@media (max-width:991px){
    .topbar{padding:16px}
    .top-nav-bar{padding:0 16px}
    .topbar-app-title{display:none}
}