:root {
  --bg: #f7f8fa; --panel: #ffffff; --ink: #0f172a; --muted: #64748b;
  --line: #e7e9ee; --line-2: #eef0f4;
  --brand: #2adac3; --brand-600: #1fc4ad; --brand-700: #169e8c; --brand-ink: #003b33;
  --accent: #3b5bdb; --accent-soft: rgba(59,91,219,0.10); --accent-700: #2f49b0;
  --sidebar: #001e44; --sidebar-line: rgba(255,255,255,0.08);
  --rail: 76px; --panel-w: 256px;
}
* { -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--ink); letter-spacing: -0.011em; }
.panel { background: var(--panel); border: 1px solid var(--line); }
.scroll-thin::-webkit-scrollbar { height: 8px; width: 8px; }
.scroll-thin::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 99px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }

/* ---- Sidebar ---- */
#sidebar { position: fixed; top:0; left:0; bottom:0; width: var(--panel-w); background: var(--sidebar); display:flex; flex-direction:column; z-index:40; transition: width .22s ease, transform .26s ease; }
body.nav-collapsed #sidebar { width: var(--rail); }
#shell { margin-left: var(--panel-w); transition: margin-left .22s ease; }
body.nav-collapsed #shell { margin-left: var(--rail); }
body.nav-collapsed .nav-label, body.nav-collapsed .brand-text, body.nav-collapsed .nav-badge,
body.nav-collapsed .nav-section, body.nav-collapsed .user-text, body.nav-collapsed .user-logout { display:none; }
body.nav-collapsed #sidebar .nav-item, body.nav-collapsed #sidebar .user-card { justify-content:center; }
body.nav-collapsed #sidebar .brand-row { justify-content:center; }
.nav-item { transition: background .15s ease, color .15s ease; color:#9fb3cf; }
.nav-item:hover { background: rgba(255,255,255,0.06); color:#fff; }
.nav-active { background: rgba(42,218,195,0.16); color:#fff; box-shadow: inset 2px 0 0 var(--brand); }
.nav-section { color:#5f7396; }

/* ---- Collapsed-rail tooltips (JS-driven, fixed so they can't be clipped) ---- */
#nav-tip {
  position: fixed; z-index: 80; left: 0; top: 0;
  background: #0b2a52; color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em;
  padding: 6px 10px; border-radius: 8px; white-space: nowrap;
  box-shadow: 0 8px 22px -8px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.08);
  opacity: 0; transform: translateX(-4px); pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
}
#nav-tip.show { opacity: 1; transform: translateX(0); }
#nav-tip::before {
  content: ""; position: absolute; right: 100%; top: 50%; transform: translateY(-50%);
  border: 6px solid transparent; border-right-color: #0b2a52;
}

.row-hover:hover { background: #fafbfc; }
.kpi { transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.kpi:hover { box-shadow: 0 12px 28px -20px rgba(15,23,42,0.4); border-color: #d8dde6; }
.btn-brand { background: var(--brand-600); color:#fff; }
.btn-brand:hover { background: var(--brand-700); }
.chip-brand { background: var(--brand); color: var(--brand-ink); }
@keyframes rise { from {opacity:0; transform: translateY(10px);} to {opacity:1; transform:translateY(0);} }
.rise { animation: rise .45s cubic-bezier(.2,.7,.2,1) both; }
@keyframes toast-in { from { opacity:0; transform: translateX(12px); } to { opacity:1; transform: translateX(0); } }
.toast-in { animation: toast-in .3s cubic-bezier(.2,.7,.2,1) both; }
.tnum { font-variant-numeric: tabular-nums; }
.label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight:600; color: var(--muted); }

/* ---- Form controls ---- */
.field-label { font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 6px; display:block; }
.req::after { content:" *"; color:#e11d48; font-weight:700; }
.ctrl { width:100%; height:42px; padding:0 12px; font-size:14px; color: var(--ink); background:#fff; border:1px solid var(--line); border-radius:10px; transition: border-color .15s ease, box-shadow .15s ease; }
textarea.ctrl { height:auto; padding:10px 12px; line-height:1.5; }
.ctrl::placeholder { color:#9aa6b6; }
.ctrl:hover { border-color:#d3d9e2; }
.ctrl:focus { outline:none; border-color: var(--brand-600); box-shadow: 0 0 0 3px rgba(42,218,195,0.18); }
select.ctrl { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:34px; }
.ctrl.is-invalid { border-color:#f43f5e; box-shadow: 0 0 0 3px rgba(244,63,94,0.12); }
.hint { font-size:12px; color: var(--muted); margin-top:6px; }
.error-text { font-size:12px; color:#e11d48; margin-top:6px; }
.section-head { display:flex; align-items:center; gap:10px; }
.section-icon { height:34px; width:34px; border-radius:9px; display:grid; place-items:center; }
.seg { display:flex; gap:6px; }
.seg input { display:none; }
.seg label { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:9px 8px; font-size:13px; font-weight:600; color:#475569; background:#fff; border:1px solid var(--line); border-radius:10px; cursor:pointer; transition: all .15s ease; }
.seg label svg { width:16px; height:16px; flex-shrink:0; }
.seg label:hover { border-color:#d3d9e2; }
.seg input:checked + label { background:#eef1f5; border-color:#aab4c2; color:#1f2a37; box-shadow: inset 0 0 0 1px #aab4c2; }
.input-prefix { position:relative; }
.input-prefix > span { position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:13px; color:var(--muted); font-weight:600; pointer-events:none; }
.input-prefix > input { padding-left:42px; }
.has-icon { position:relative; }
.has-icon > svg { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
.has-icon > input.ctrl { padding-right:38px; }

/* ---- Always-collapsible sections ---- */
.always-collapsible > .sec-body { display: none; }
.always-collapsible.open > .sec-body { display: grid; }
.always-collapsible .sec-toggle { cursor: pointer; }
.always-collapsible .sec-chevron { display: block; transition: transform .2s ease; }
.always-collapsible.open .sec-chevron { transform: rotate(180deg); }

/* ---- Fixed summary panel (desktop) ---- */
@media (min-width: 1024px) {
  .summary-col { width: 340px; flex: 0 0 340px; }
  .summary-fixed { position: sticky; top: 80px; max-height: calc(100vh - 88px); overflow-y: auto; }
  .summary-fixed::-webkit-scrollbar { width: 6px; }
  .summary-fixed::-webkit-scrollbar-thumb { background: #cdd3dd; border-radius: 99px; }
}

@media (max-width: 1023px) {
  #sidebar { width: var(--panel-w); transform: translateX(-100%); }
  body.nav-mobile-open #sidebar { transform: translateX(0); }
  body.nav-collapsed .nav-label, body.nav-collapsed .brand-text, body.nav-collapsed .nav-badge,
  body.nav-collapsed .nav-section, body.nav-collapsed .user-text, body.nav-collapsed .user-logout { display: revert; }
  #shell, body.nav-collapsed #shell { margin-left: 0; }
  #nav-tip { display: none; }
  .mobile-pad { padding: 1rem 1rem 7rem; }
  .panel { border-radius: 14px; }
  .collapsible > .sec-body { display: none; }
  .collapsible.open > .sec-body { display: block; }
  .sec-toggle { width: 100%; cursor: pointer; }
  .sec-chevron { transition: transform .2s ease; }
  .collapsible.open .sec-chevron { transform: rotate(180deg); }
  #mobileBar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: rgba(255,255,255,0.96); backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; box-shadow: 0 -8px 24px -16px rgba(15,23,42,0.3); }
}
@media (min-width: 1024px) {
  #mobileBar { display: none; }
  .sec-toggle { pointer-events: none; }
  .sec-chevron { display: none; }
  .collapsible > .sec-body { display: block !important; }
  .always-collapsible .sec-toggle { pointer-events: auto; }
  .always-collapsible .sec-chevron { display: block; }
  .always-collapsible > .sec-body { display: none !important; }
  .always-collapsible.open > .sec-body { display: grid !important; }
}