:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Arial, sans-serif;
  color: #132543;
  background: #f5f7fb;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --navy: #10264d;
  --blue: #225ce5;
  --blue-dark: #174dbf;
  --sky: #ecf3ff;
  --text: #132543;
  --muted: #63758e;
  --line: #e1e8f2;
  --white: #ffffff;
  --red: #c83b47;
  --green: #207e67;
  --shadow: 0 12px 40px rgba(24, 44, 82, .055);
}
* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: #f5f7fb; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #81abff; outline-offset: 2px; }
a { color: var(--blue); }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.loading { display:flex; align-items:center; justify-content:center; gap:12px; color:var(--muted); min-height:100vh; }
.loader { display:inline-block; width:24px; height:24px; border:3px solid #dfe7f4; border-top-color:var(--blue); border-radius:50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.app-header { background:var(--white); border-bottom:1px solid var(--line); }
.header-inner { max-width:1140px; margin:auto; padding:17px 26px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:flex; align-items:center; gap:12px; min-width:0; }
.brand-icon { flex:none; width:42px; height:42px; background:var(--navy); border-radius:13px; color:white; display:grid; place-items:center; font-size:21px; font-weight:850; letter-spacing:-1px; }
.brand-name { display:block; font-size:16px; letter-spacing:-.4px; font-weight:800; color:var(--navy); line-height:1.15; }
.brand-label { display:block; margin-top:3px; color:var(--muted); font-size:12px; }
.header-note { font-size:12px; color:var(--muted); padding:8px 13px; background:#f4f7fb; border-radius:99px; display:flex; align-items:center; gap:8px; }
.header-note svg { width:14px; height:14px; }
.layout { max-width:1140px; margin:0 auto; padding:31px 26px 64px; display:grid; grid-template-columns:215px minmax(0,1fr); gap:30px; }
.sidebar { position:sticky; align-self:start; top:20px; padding:8px 0; }
.nav-list { display:flex; flex-direction:column; gap:5px; }
.nav-btn { border:0; background:transparent; color:#526581; width:100%; text-align:left; padding:14px 15px; display:flex; align-items:center; gap:11px; border-radius:12px; font-size:14px; font-weight:650; }
.nav-btn:hover { background:#eaf0fa; }
.nav-btn.active { color:var(--blue); background:#e6efff; }
.nav-btn svg, .bottom-btn svg { width:19px; height:19px; flex:none; }
.sidebar-small { color:#92a0b4; font-size:12px; padding:18px 13px 0; line-height:1.6; }
.main-content { min-width:0; }
.section-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:15px; margin-bottom:22px; }
.eyebrow { font-size:11px; text-transform:uppercase; letter-spacing:1.4px; color:#6387c5; font-weight:800; margin:0 0 7px; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(26px,3vw,34px); line-height:1.1; letter-spacing:-1.3px; color:var(--navy); margin:0 0 10px; }
h2 { font-size:19px; color:var(--navy); margin:0; letter-spacing:-.45px; }
h3 { font-size:15px; color:var(--navy); margin:0; }
.subtitle { font-size:14px; line-height:1.55; color:var(--muted); margin:0; }
.card { background:white; border:1px solid #e6ecf5; border-radius:19px; box-shadow:var(--shadow); padding:22px; }
.card + .card, .stack > * + * { margin-top:16px; }
.card-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; }
.card-head p { margin:5px 0 0; color:var(--muted); font-size:12px; }
.metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; margin-bottom:20px; }
.metric { padding:19px; background:white; border:1px solid #e6ecf5; border-radius:17px; box-shadow:var(--shadow); min-width:0; }
.metric-label { color:#71819a; font-size:12px; line-height:1.4; margin-bottom:9px; }
.metric-value { font-size:27px; font-weight:790; letter-spacing:-1px; color:var(--navy); white-space:nowrap; }
.metric-foot { margin-top:7px; font-size:11px; color:#8a9ab1; }
.primary-panel { color:white; background:linear-gradient(115deg,#10326f,#205de0 77%,#3677f9); border-radius:20px; padding:25px; display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:20px; box-shadow:0 15px 40px rgba(38,90,204,.16); }
.primary-panel h2 { color:#fff; font-size:22px; margin:0 0 7px; }
.primary-panel p { color:#deebff; font-size:13px; line-height:1.5; margin:0; max-width:390px; }
.actions { display:flex; gap:11px; flex-wrap:wrap; }
.btn { appearance:none; border:1px solid transparent; min-height:43px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 16px; border-radius:11px; font-size:13px; font-weight:750; line-height:1.1; text-align:center; }
.btn svg { width:17px; height:17px; flex:none; }
.btn.primary { color:white; background:var(--blue); border-color:var(--blue); }
.btn.primary:hover { background:var(--blue-dark); }
.btn.white { color:#153e9d; background:white; border-color:white; }
.btn.soft { color:var(--blue); background:var(--sky); border-color:#e3ecfe; }
.btn.outline { color:var(--navy); background:white; border-color:#d9e3f1; }
.btn.danger { color:var(--red); background:#fff4f4; border-color:#f5d2d4; }
.btn.text { min-height:31px; padding:6px 8px; color:var(--blue); background:transparent; }
.btn.small { min-height:32px; padding:7px 10px; font-size:12px; border-radius:9px; }
.btn.wide { width:100%; }
.icon-circle { display:grid; place-items:center; border-radius:12px; width:42px; height:42px; background:#edf3ff; color:var(--blue); flex:none; }
.icon-circle svg { width:21px; height:21px; }
.quick-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:13px; margin-bottom:20px; }
.quick-card { border:1px solid #e3eaf5; background:white; border-radius:16px; padding:15px 16px; display:flex; align-items:center; gap:13px; text-align:left; color:var(--navy); font-weight:750; box-shadow:var(--shadow); }
.quick-card:hover { border-color:#b3c8ed; }
.quick-card small { color:var(--muted); font-size:12px; font-weight:400; display:block; margin-top:3px; }
.inline-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.list { display:flex; flex-direction:column; gap:0; }
.item { padding:15px 0; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid #edf1f7; }
.item:last-child { border-bottom:none; padding-bottom:0; }
.item:first-child { padding-top:0; }
.item-main { min-width:0; flex:1; }
.item-title { font-size:14px; color:var(--navy); font-weight:750; line-height:1.4; overflow-wrap:anywhere; }
.item-info { margin-top:5px; color:var(--muted); font-size:12px; line-height:1.4; }
.item-value { font-size:17px; font-weight:790; letter-spacing:-.3px; white-space:nowrap; color:var(--navy); }
.item-actions { display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; margin-top:5px; }
.item-right { display:flex; flex-direction:column; align-items:flex-end; flex:none; }
.pill { border-radius:90px; padding:5px 9px; font-size:10px; font-weight:750; background:#eaf1ff; color:#2859bf; }
.pill.neutral { color:#53667f; background:#ecf0f5; }
.pill.warning { color:#99641d; background:#fff3df; }
.empty { text-align:center; padding:33px 15px; }
.empty-icon { width:57px; height:57px; border-radius:17px; background:#edf3ff; display:grid; place-items:center; color:var(--blue); margin:0 auto 14px; }
.empty-icon svg { width:26px; height:26px; }
.empty h3 { margin:0 0 7px; }
.empty p { color:var(--muted); font-size:13px; max-width:390px; margin:0 auto 17px; line-height:1.55; }
.alert { padding:13px 14px; border-radius:13px; display:flex; align-items:flex-start; gap:11px; font-size:12px; line-height:1.5; }
.alert svg { width:17px; height:17px; flex:none; }
.alert.info { color:#295693; background:#eef5ff; border:1px solid #dfebfb; }
.alert.warn { color:#79521d; background:#fff8ec; border:1px solid #f7e7ca; }
.alert + .card, .card + .alert { margin-top:14px; }
.field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.field[hidden] { display:none; }
.field label { font-size:12px; color:#405472; font-weight:700; }
.field input, .field select, .field textarea { width:100%; min-height:46px; background:#fff; border:1px solid #d8e1ed; color:#193353; border-radius:10px; padding:11px 12px; outline:none; font-size:14px; }
.field textarea { min-height:83px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color:#5c9cff; box-shadow:0 0 0 3px rgba(89,149,240,.12); }
.field input::placeholder, .field textarea::placeholder { color:#9aa9ba; }
.field small, .help { color:var(--muted); font-size:11px; line-height:1.45; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-row { margin-top:13px; }
.form-section { margin:17px 0 13px; font-size:12px; letter-spacing:.4px; color:#5f7698; font-weight:850; }
.check-row { display:flex; align-items:center; gap:10px; padding:11px 12px; background:#f5f8fd; border-radius:11px; font-size:13px; font-weight:650; }
.check-row input { width:18px; height:18px; accent-color:var(--blue); }
.modal-overlay { position:fixed; z-index:20; inset:0; background:rgba(8,23,50,.48); display:flex; align-items:center; justify-content:center; padding:18px; backdrop-filter:blur(3px); }
.modal { background:#fff; border-radius:22px; width:min(100%,625px); max-height:calc(100dvh - 35px); display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 90px rgba(3,15,39,.25); }
.modal-header { padding:20px 22px 15px; border-bottom:1px solid #ecf0f6; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.modal-header h2 { font-size:20px; }
.modal-header p { margin:5px 0 0; color:var(--muted); font-size:12px; }
.icon-button { width:34px; height:34px; border:0; border-radius:10px; display:grid; place-items:center; background:#f1f4f9; color:#465d7c; }
.icon-button svg { width:18px; height:18px; }
.modal-scroll { padding:19px 22px; overflow-y:auto; overscroll-behavior:contain; }
.modal-footer { display:flex; justify-content:flex-end; gap:9px; padding:14px 22px calc(15px + env(safe-area-inset-bottom)); border-top:1px solid #ecf0f6; background:#fff; }
.modal-footer .btn.primary { min-width:170px; }
.modal-summary { padding:13px; border-radius:11px; background:#eef5ff; display:flex; align-items:center; justify-content:space-between; color:var(--navy); margin-top:15px; }
.modal-summary strong { font-size:19px; }
.details { border:1px solid #e6eaf1; padding:13px; border-radius:11px; margin-top:14px; }
.details summary { cursor:pointer; font-size:12px; color:#43618b; font-weight:800; }
.details-content { margin-top:14px; }
.report-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; margin-bottom:15px; }
.report-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.report-figure { border:1px solid #e4ebf5; background:#f9fbff; padding:16px; border-radius:14px; }
.report-figure span { display:block; font-size:12px; color:var(--muted); }
.report-figure strong { display:block; font-size:23px; color:var(--navy); margin-top:7px; }
.mini-text { color:#6c7c92; font-size:11px; line-height:1.55; }
.disclaimer { padding:14px 16px; border-radius:13px; border-left:3px solid #7da7f5; background:#f3f7ff; color:#476287; font-size:12px; line-height:1.65; }
.settings-content { display:flex; flex-direction:column; gap:18px; }
.backup-info { font-size:12px; color:var(--muted); line-height:1.6; }
.bottom-nav { display:none; }
.toast { position:fixed; z-index:60; left:50%; transform:translateX(-50%); bottom:24px; padding:13px 18px; border-radius:12px; color:white; background:#1b355e; box-shadow:0 9px 30px #0e1a3140; font-size:13px; font-weight:650; opacity:0; pointer-events:none; transition:opacity .18s; max-width:calc(100% - 36px); text-align:center; }
.toast.show { opacity:1; }
.onboarding { max-width:680px; margin:30px auto 70px; padding:0 22px; }
.onboarding-hero { background:linear-gradient(125deg,#10264d,#1e52b3); border-radius:24px; padding:29px; color:#fff; margin:25px 0 18px; }
.onboarding-hero h1 { color:white; margin:12px 0; }
.onboarding-hero p { color:#d8e6ff; font-size:14px; line-height:1.6; margin:0; }
.onboarding .card { padding:27px; }
.onboarding-footer { margin-top:18px; }
.screen-error { max-width:580px; margin:60px auto; padding:22px; }
@media(max-width:920px) { .layout { grid-template-columns:175px minmax(0,1fr); gap:16px; padding:24px 18px 60px; } .sidebar { top:15px; } .nav-btn { padding:13px 9px; font-size:13px; } .primary-panel { padding:20px; } .metric { padding:15px; } .metric-value { font-size:23px; } }
@media(max-width:690px) {
  .header-inner { padding:12px 17px; }
  .brand-icon { width:37px; height:37px; border-radius:11px; font-size:19px; }
  .brand-name { font-size:15px; }
  .brand-label { font-size:10px; }
  .header-note { display:none; }
  .layout { display:block; padding:22px 16px calc(104px + env(safe-area-inset-bottom)); }
  .sidebar { display:none; }
  .section-intro { align-items:flex-start; margin-bottom:19px; }
  h1 { font-size:27px; }
  .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .metric { padding:15px 14px; border-radius:15px; }
  .metric:last-child { grid-column:1 / -1; }
  .metric-label { font-size:11px; }
  .metric-value { font-size:25px; }
  .metric-foot { font-size:10px; }
  .primary-panel { padding:22px; display:block; }
  .primary-panel h2 { font-size:21px; }
  .primary-panel .btn { margin-top:15px; width:100%; }
  .card { padding:17px; border-radius:16px; }
  .quick-grid { gap:10px; }
  .quick-card { padding:13px; gap:9px; font-size:13px; border-radius:14px; }
  .quick-card small { font-size:11px; }
  .icon-circle { width:36px; height:36px; border-radius:10px; }
  .item { padding:13px 0; }
  .item-title { font-size:13px; }
  .item-info { font-size:11px; }
  .item-value { font-size:15px; }
  .bottom-nav { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:10; justify-content:space-around; background:#fff; border-top:1px solid var(--line); padding:8px 6px calc(8px + env(safe-area-inset-bottom)); box-shadow:0 -8px 28px rgba(14,28,49,.04); }
  .bottom-btn { width:20%; background:transparent; border:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:10px; color:#78879e; padding:4px 1px; min-height:49px; }
  .bottom-btn.active { color:var(--blue); font-weight:800; }
  .bottom-btn svg { width:20px; height:20px; }
  .report-controls { grid-template-columns:1fr 1fr; }
  .report-controls > :first-child { grid-column:1/-1; }
  .report-grid { gap:9px; }
  .report-figure { padding:12px; }
  .report-figure strong { font-size:19px; }
  .modal-overlay { padding:0; align-items:flex-end; }
  .modal { border-radius:20px 20px 0 0; max-height:calc(96dvh - env(safe-area-inset-top)); width:100%; }
  .modal-header { padding:18px 18px 14px; }
  .modal-scroll { padding:17px 18px; }
  .modal-footer { padding:11px 18px calc(13px + env(safe-area-inset-bottom)); }
  .modal-footer .btn { flex:1; }
  .form-grid { gap:10px; }
  .field input, .field select, .field textarea { font-size:16px; }
  .onboarding { margin:0 auto 50px; padding:0 14px; }
  .onboarding-hero { margin:14px 0; padding:22px; }
  .onboarding .card { padding:18px; }
  .toast { bottom:calc(80px + env(safe-area-inset-bottom)); }
}
@media(prefers-reduced-motion:reduce) { html{scroll-behavior:auto} .loader{animation:none} .toast{transition:none} }