:root {
  --win-bg: #eef3f9;
  --win-panel: #ffffff;
  --win-panel-soft: #f7f9fc;
  --win-border: #d8e2ef;
  --win-border-strong: #c4d3e5;
  --win-text: #1f2a37;
  --win-text-soft: #5f6f82;
  --win-blue: #2b7cd3;
  --win-blue-soft: #e8f2ff;
  --win-yellow: #ffcf5a;
  --win-red: #ef5350;
  --win-shadow: 0 12px 30px rgba(36, 74, 124, 0.10);
  --win-shadow-soft: 0 6px 18px rgba(36, 74, 124, 0.08);
  --sidebar-width: 280px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background:
    radial-gradient(circle at top right, rgba(98, 167, 255, 0.16), transparent 26%),
    linear-gradient(180deg, #f5f8fc 0%, var(--win-bg) 100%);
  color: var(--win-text);
}
body { display: flex; min-height: 100vh; }
.sidebar {
  position: fixed; top: 0; left: 0;
  width: var(--sidebar-width); height: 100vh;
  background: linear-gradient(180deg, #fbfdff 0%, #f4f7fb 100%);
  border-right: 1px solid var(--win-border);
  padding: 12px; overflow-y: auto; z-index: 50;
}
.sidebar-shell {
  min-height: calc(100vh - 24px);
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: 24px;
  background: rgba(255,255,255,0.60);
  backdrop-filter: blur(10px);
  box-shadow: var(--win-shadow);
  padding: 16px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.window-dots { display:flex; gap:8px; padding:2px 2px 8px; }
.window-dots span { width:10px; height:10px; border-radius:50%; display:block; }
.window-dots span:nth-child(1){background:#f28b82;} .window-dots span:nth-child(2){background:#fbbc04;} .window-dots span:nth-child(3){background:#34a853;}
.brand { display:flex; align-items:center; gap:12px; padding:4px 6px 12px; }
.brand-mark { display:flex; gap:3px; transform: skewX(-28deg); margin-left:2px; }
.brand-mark span { width:10px; height:18px; border-radius:2px; display:block; background:linear-gradient(180deg, #6e7f94 0%, #39495d 100%); }
.brand-title { font-size:1.55rem; font-weight:800; letter-spacing:-0.02em; color:#2e3a49; }
.nav-group-title { font-size:11px; font-weight:700; letter-spacing:.10em; color:#8c9aae; padding:12px 8px 8px; text-transform:uppercase; }
.nav-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.nav-link, .nav-toggle {
  width:100%; border:0; background:transparent; color:var(--win-text);
  border-radius:12px; min-height:44px; padding:10px 12px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  text-decoration:none; font-size:.97rem; font-weight:600; cursor:pointer; transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.nav-link:hover, .nav-toggle:hover, .submenu a:hover { background:#eef4fb; }
.nav-link.active, .nav-toggle.active, .nav-item.open > .nav-toggle { background:#ffffff; box-shadow:var(--win-shadow-soft); border:1px solid rgba(205,220,238,.7); }
.nav-link-left, .nav-toggle-left, .submenu a { display:flex; align-items:center; gap:10px; }
.nav-link svg, .nav-toggle svg, .submenu a svg, .quick-action svg, .metric-icon svg { width:18px; height:18px; color:#5f6f82; flex:0 0 18px; }
.chevron { width:16px !important; height:16px !important; color:#8ea0b5 !important; transition:transform .18s ease; }
.nav-item.open .chevron { transform:rotate(180deg); }
.submenu { display:none; margin:6px 0 4px 34px; padding:0; border-left:1px solid #dde7f2; }
.nav-item.open .submenu { display:block; }
.submenu a { color:#445366; text-decoration:none; border-radius:10px; padding:10px 12px; margin:2px 0 2px 10px; font-size:.95rem; font-weight:500; }
.submenu a.active-sub { background:#eef3f8; font-weight:600; }
.sidebar-bottom { margin-top:auto; padding-top:10px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.btn, button, .btn-primary, .btn-secondary {
  border:0; border-radius:12px; padding:11px 12px; font-size:.94rem; font-weight:700; cursor:pointer;
  transition:transform .15s ease, opacity .15s ease, box-shadow .15s ease; box-shadow:var(--win-shadow-soft);
}
.btn:hover, button:hover { transform: translateY(-1px); }
.btn-primary, button.btn-primary { background:#3387e8; color:#fff; }
.btn-edit { background:#ffd766; color:#533c00; }
.btn-delete { background:#ef5350; color:#fff; }
.btn-secondary, button.btn-secondary { background:#e9f2ff; color:#245b96; }
.main { margin-left:var(--sidebar-width); width:calc(100% - var(--sidebar-width)); min-height:100vh; padding:28px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }
.topbar-left h1 { margin:0 0 6px; font-size:clamp(1.7rem,2.6vw,2.4rem); letter-spacing:-.03em; }
.topbar-left p { margin:0; color:var(--win-text-soft); font-size:.98rem; }
.topbar-actions { display:flex; gap:10px; flex-wrap:wrap; }
.quick-action {
  display:inline-flex; align-items:center; gap:10px; padding:11px 14px; border-radius:14px; border:1px solid var(--win-border);
  background:rgba(255,255,255,.82); color:var(--win-text); text-decoration:none; font-weight:600; box-shadow:var(--win-shadow-soft);
}
.quick-action.primary { background:linear-gradient(180deg,#3f94f4 0%,#2b7cd3 100%); color:#fff; border-color:transparent; }
.quick-action.primary svg { color:#fff; }
.panel, .hero-card, .metric-card, .chart-card {
  background:rgba(255,255,255,.80); border:1px solid rgba(216,226,239,.9); border-radius:var(--radius-lg); box-shadow:var(--win-shadow); backdrop-filter:blur(8px);
}
.panel { padding:20px; }
.page-panel { padding: 20px; }
.page-stack { display:grid; gap:18px; }
.section-card { background: rgba(255,255,255,.65); border:1px solid rgba(216,226,239,.9); border-radius:var(--radius-md); padding:16px; }
.form-section, .container, main.help-wrap, main { max-width: 100%; }
table { width:100%; border-collapse:collapse; background:#fff; border-radius:14px; overflow:hidden; }
thead th { text-align:left; font-size:.85rem; color:var(--win-text-soft); padding:12px 14px; border-bottom:1px solid var(--win-border); }
tbody td { padding:12px 14px; border-bottom:1px solid #e8eef6; vertical-align:top; }
tbody tr:hover { background:#f8fbff; }
input[type="text"], input[type="email"], input[type="date"], input[type="number"], input[type="search"], input[type="color"], select, textarea, .input, .select, .textarea {
  width:100%; min-height:42px; border:1px solid var(--win-border-strong); border-radius:10px; padding:10px 12px; background:#fff; color:var(--win-text);
}
textarea { min-height:110px; resize:vertical; }
.controls, .form-row, .row { display:flex; flex-wrap:wrap; gap:10px; align-items:end; }
.controls .field, .form-row > div { min-width: 180px; flex:1 1 180px; }
.pagination, .pager, .pager-bar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.alert.danger { color:#8c1d1d; background:#fff2f2; border:1px solid #f2c9c9; padding:12px 14px; border-radius:12px; }
.muted, .help, .panel-subtitle { color: var(--win-text-soft); }
.card, .kpi, .help-card, .callout, .help-toc, .step, .table-wrapper {
  background: rgba(255,255,255,.86) !important; border:1px solid var(--win-border) !important; border-radius:16px !important; box-shadow: var(--win-shadow-soft);
}
.table-wrapper { overflow:auto; }
.summary-grid, .metrics-grid { display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); }
.kpi .big { font-weight:800; font-size:1.35rem; color:var(--win-blue); }
.print-only { display:none; }
@media (max-width: 940px) {
  body { display:block; }
  .sidebar { position:relative; width:100%; height:auto; }
  .sidebar-shell { min-height:0; }
  .main { margin-left:0; width:100%; padding:20px; }
  .topbar { flex-direction:column; align-items:flex-start; }
}