:root{
  --okkam-orange:#ff5a1f;
  --okkam-orange-2:#ff7a3a;
  --okkam-bg:#f2f3f6;
  --okkam-card:#ffffff;
  --okkam-text:#1f2937;
  --okkam-muted:#6b7280;
  --okkam-border:#e5e7eb;
  --okkam-shadow: 0 18px 45px rgba(17,24,39,.18);
  --radius:14px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 60% 30%, #ffffff 0%, #f3f4f6 35%, #e9ecf3 100%);
  color: var(--okkam-text);
}
a{color:inherit; text-decoration:none}
a:hover{opacity:.9}
.lk-shell{display:flex; min-height:100vh;}
.sidebar{
  width:260px;
  background: linear-gradient(180deg, var(--okkam-orange) 0%, #ff6a2b 45%, #ff5a1f 100%);
  color:#fff;
  padding:18px 16px;
  position:sticky;
  top:0;
  height:100vh;
  box-shadow: 0 10px 35px rgba(255,90,31,.35);
}
.brand{ padding:8px 10px 18px 10px; }
.brand-logo{
  width: 180px;     /* подгони под свой логотип */
  height: auto;
  display: block;
}
.brand{font-weight:800; letter-spacing:.08em; font-size:32px; padding:8px 10px 18px 10px;}
.nav{margin-top:6px; display:flex; flex-direction:column; gap:6px;}
.nav a{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; color:#fff; opacity:.92;}
.nav a:hover{background: rgba(255,255,255,.12)}
.nav a.active{background: rgba(0,0,0,.14); opacity:1}
.nav-section{margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.22);}
.sidebar-footer{
  position:absolute; left:16px; right:16px; bottom:18px;
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px; border-radius:12px; background: rgba(0,0,0,.12);
}
.main{flex:1; padding:26px 28px;}
.topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
.page-title{font-size:34px; font-weight:800;}
.top-actions{display:flex; gap:10px; align-items:center;}
.icon-btn{
  width:42px; height:42px; display:inline-flex; justify-content:center; align-items:center;
  border-radius:14px; background: rgba(255,255,255,.65);
  border:1px solid rgba(229,231,235,.9);
  box-shadow: 0 8px 24px rgba(17,24,39,.08);
}
.badge{position:relative;}
.badge::after{
  content: attr(data-badge);
  position:absolute; top:-6px; right:-6px;
  width:18px; height:18px; border-radius:999px;
  background:#ff3b30; color:#fff; font-size:11px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid #fff;
}
.avatar{
  width:44px; height:44px; border-radius:999px;
  background: rgba(255,90,31,.15);
  border:1px solid rgba(255,90,31,.35);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color: var(--okkam-orange);
}
.panel{
  background: rgba(255,255,255,.72);
  border:1px solid rgba(229,231,235,.9);
  border-radius: var(--radius);
  box-shadow: var(--okkam-shadow);
  backdrop-filter: blur(10px);
  padding:16px;
}
.panel + .panel{margin-top:14px}
.filters{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.select, .input{
  padding:10px 12px; border-radius:12px;
  border:1px solid rgba(229,231,235,.95);
  background: rgba(255,255,255,.75);
  min-height:42px;
}
.btn{
  padding:10px 14px; border-radius:12px;
  border:0; cursor:pointer; font-weight:700; min-height:42px;
}
.btn-orange{background: var(--okkam-orange); color:#fff; box-shadow: 0 14px 30px rgba(255,90,31,.28);}
.btn-orange:hover{filter:brightness(.98)}
.btn-soft{background: rgba(255,255,255,.85); border:1px solid rgba(229,231,235,.95);}
.grid-2{display:grid; grid-template-columns: 1.25fr .95fr; gap:14px;}
.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px;}
@media (max-width: 1100px){ .grid-2,.grid-3{grid-template-columns:1fr} .main{padding:18px} .sidebar{position:relative; height:auto}}
.card-title{font-weight:800; font-size:20px; margin:0 0 10px 0;}
.muted{color:var(--okkam-muted)}
.kpi-box{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px; border-radius: var(--radius);
  background: rgba(255,255,255,.72);
  border:1px solid rgba(229,231,235,.95);
}
.kpi-value{font-size:34px; font-weight:900;}
.kpi-sub{color:var(--okkam-muted); margin-top:4px}
.table{
  width:100%; border-collapse:separate; border-spacing:0;
  overflow:hidden; border-radius: 14px;
  border:1px solid rgba(229,231,235,.95);
  background: rgba(255,255,255,.72);
}
.table th,.table td{padding:14px 14px; border-bottom:1px solid rgba(229,231,235,.9); text-align:left;}
.table th{color:#6b7280; font-weight:800; background: rgba(243,244,246,.65);}
.table tr:last-child td{border-bottom:0}
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px; border-radius:12px;
  font-weight:800; font-size:13px; white-space:nowrap;
}
.pill-orange{background: rgba(255,90,31,.18); color: var(--okkam-orange); border:1px solid rgba(255,90,31,.25)}
.pill-green{background: rgba(34,197,94,.18); color:#16a34a; border:1px solid rgba(34,197,94,.25)}
.pill-red{background: rgba(239,68,68,.16); color:#ef4444; border:1px solid rgba(239,68,68,.25)}
.pill-gray{background: rgba(107,114,128,.16); color:#6b7280; border:1px solid rgba(107,114,128,.22)}
.progress{width:160px; height:14px; background: rgba(107,114,128,.18); border-radius:999px; overflow:hidden;}
.progress>div{height:100%; width:35%; background: linear-gradient(90deg, var(--okkam-orange), var(--okkam-orange-2));}
.flash{padding:12px 14px; border-radius:12px; margin-bottom:12px; border:1px solid rgba(229,231,235,.95); background: rgba(255,255,255,.75);}
.flash.error{border-color: rgba(239,68,68,.35)}
.flash.ok{border-color: rgba(34,197,94,.35)}