body { color: #172b3f; background: radial-gradient(circle at 90% -10%, rgba(24,166,106,.08), transparent 28rem), #f4f7fa; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button { min-height: 42px; border-radius: 10px; padding: 0 16px; font-weight: 700; transition: transform .16s ease, box-shadow .16s ease; }
button:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(16,42,67,.16); }
input, select, textarea { min-height: 44px; border-color: #d8e0e9; border-radius: 10px; padding: 10px 12px; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: #4e8cb9; box-shadow: 0 0 0 3px rgba(31,78,120,.11); }
.app-shell { grid-template-columns: 264px minmax(0,1fr); }
.app-shell.sidebar-collapsed { grid-template-columns: 82px minmax(0,1fr); }
.sidebar { padding: 22px 14px; background: radial-gradient(circle at 15% 5%, rgba(65,181,130,.18), transparent 14rem), linear-gradient(180deg,#0b2942,#071a2d); }
.sidebar-brand { min-height: 58px; padding: 0 40px 16px 8px; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 17px; }
.nav-tabs { gap: 4px; margin-top: 18px; }
.nav-section-label { display: block; margin: 17px 12px 6px; color: rgba(255,255,255,.42); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.nav-tabs button { gap: 12px; min-height: 43px; padding: 0 12px; border-radius: 9px; color: rgba(255,255,255,.74); font-size: 14px; font-weight: 600; }
.nav-tabs button::before { content: attr(data-icon); display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 25px; border-radius: 7px; color: rgba(255,255,255,.82); background: rgba(255,255,255,.07); font-size: 15px; }
.nav-tabs button.active { color: #fff; border-color: rgba(73,211,151,.25); background: rgba(24,166,106,.17); box-shadow: inset 3px 0 0 #4bd597; }
.sidebar-collapsed .nav-section-label { display: none; }
.sidebar-collapsed .nav-tabs button { font-size: 0; }
.sidebar-collapsed .nav-tabs button::before { content: attr(data-icon); font-size: 16px; }
.workspace { padding: 0 32px 42px; }
.topbar { position: sticky; top: 0; z-index: 10; min-height: 88px; margin: 0 -32px 28px; padding: 16px 32px; border-bottom: 1px solid rgba(218,226,234,.9); background: rgba(244,247,250,.88); backdrop-filter: blur(14px); }
.goal-banner { border-radius: 18px; background: radial-gradient(circle at 92% 40%,rgba(75,213,151,.2),transparent 18rem),linear-gradient(125deg,#0a2c47,#154d70); }
.kpi-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.kpi { min-height: 126px; padding: 19px; border-radius: 14px; box-shadow: 0 4px 18px rgba(15,23,42,.035); }
.panel { padding: 22px; border-radius: 16px; box-shadow: 0 1px 2px rgba(15,23,42,.04),0 12px 32px rgba(15,23,42,.06); }
.filter-bar { margin: 0 -4px 16px; padding: 13px; border-radius: 12px; background: #f7f9fb; }
.table-wrap { border: 1px solid #e7edf3; border-radius: 12px; }
th,td { padding: 13px 14px; }
.modal { border: 0; border-radius: 18px; box-shadow: 0 30px 100px rgba(7,26,45,.3); }
.modal::backdrop { background: rgba(5,19,32,.55); backdrop-filter: blur(3px); }
.form-rule-note { margin: 0; padding: 12px 14px; border: 1px solid #ccebdc; border-radius: 10px; color: #166344; background: #effaf5; font-size: 12px; line-height: 1.45; }

@media (max-width: 1120px) { .kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 820px) {
  .app-shell,.app-shell.sidebar-collapsed { display: block; }
  .sidebar { position: static; width: 100%; height: auto; padding: 10px 14px; }
  .sidebar-toggle,.nav-section-label { display: none; }
  .nav-tabs,.sidebar-collapsed .nav-tabs { display: flex; margin-top: 8px; overflow-x: auto; padding-bottom: 4px; }
  .nav-tabs button,.sidebar-collapsed .nav-tabs button { width: auto; min-width: max-content; padding: 0 11px; font-size: 12px; }
  .workspace { padding: 0 16px 28px; }
  .topbar { position: static; display: block; min-height: 0; margin: 0 -16px 22px; padding: 16px; }
  .topbar-controls { justify-content: flex-start; margin-top: 14px; }
  .view-stats,.kpi-grid,.dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .topbar-controls { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
  .topbar-controls label { min-width: 0; }
  .topbar-controls > button { grid-column: 1 / -1; }
}