:root{
    --bg:#eef3f9;
    --card:#ffffff;
    --ink:#1f2937;
    --muted:#64748b;
    --line:#d9e2ec;
    --primary:#143d63;
    --primary-2:#1f5f96;
    --accent:#eaf3ff;
    --accent-2:#d7ecff;
    --warning:#fff7d6;
    --warning-line:#f2cf63;
    --success:#e7f6ea;
    --success-line:#7cc28a;
    --danger:#fde8e8;
    --danger-line:#ea868f;
    --yellow:#fff7c2;
    --shadow:0 18px 50px rgba(15, 23, 42, .08);
    --radius:20px;
  }
  *{box-sizing:border-box}
  body{
    margin:0;
    font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
    background:linear-gradient(180deg,#f7fbff 0%, #eef3f9 22%, #edf2f7 100%);
    color:var(--ink);
  }
  .page{max-width:1520px;margin:0 auto;padding:26px 18px 48px}
  .hero{
    background:linear-gradient(135deg,#13385a 0%, #1d5d91 60%, #2575b8 100%);
    color:#fff;padding:28px;border-radius:24px;box-shadow:var(--shadow);margin-bottom:18px;position:relative;overflow:hidden;
  }
  .hero:after{
    content:'';position:absolute;right:-40px;top:-40px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.08)
  }
  .hero h1{margin:0 0 8px;font-size:30px;letter-spacing:.2px}
  .hero p{margin:0;max-width:980px;color:rgba(255,255,255,.9);line-height:1.55}
  .stack{display:grid;gap:18px}
  .card{
    background:var(--card);border:1px solid rgba(15,23,42,.06);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;
  }
  .card h2,.card h3{margin:0 0 8px;color:var(--primary)}
  .card .sub{color:var(--muted);font-size:13px;line-height:1.5;margin-bottom:14px}
  .row{display:flex;gap:14px;flex-wrap:wrap;align-items:end}
  .row > div{flex:1;min-width:180px}
  .grid-2{display:grid;grid-template-columns:1.05fr .95fr;gap:18px}
  .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .panel{
    border:1px solid var(--line);border-radius:18px;padding:18px;background:linear-gradient(180deg,#fff 0%, #fbfdff 100%);
  }
  .panel h4{margin:0 0 8px;color:#153c61;font-size:15px}
  .pill-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
  .pill{
    background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.16);padding:8px 12px;border-radius:999px;font-size:12px;color:#fff
  }
  label{display:block;margin:0 0 6px;font-size:12px;font-weight:700;color:#46566b;letter-spacing:.15px}
  input[type="text"],input[type="number"],input[type="date"],select{
    width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:14px;color:var(--ink);outline:none;transition:.18s ease;
  }
  input[readonly]{background:#f8fafc;color:#334155}
  input:focus,select:focus{border-color:#7ab7ef;box-shadow:0 0 0 4px rgba(59,130,246,.12)}
  input[type="file"]{
    width:100%;padding:12px;border:1.5px dashed #9db7d1;border-radius:14px;background:#f8fbff;color:#234;cursor:pointer
  }
  .button-bar{display:flex;gap:10px;flex-wrap:wrap}
  button{
    border:none;border-radius:13px;padding:12px 18px;font-size:14px;font-weight:800;cursor:pointer;transition:.18s ease;letter-spacing:.1px
  }
  button.primary{background:linear-gradient(135deg,#143d63,#256fa9);color:#fff}
  button.primary:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(27,79,126,.22)}
  button.secondary{background:#e8f3ff;color:#12466f}
  button.secondary:hover{background:#d8ecff}
  button.success{background:linear-gradient(135deg,#198754,#29a36a);color:#fff}
  button.success:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(25,135,84,.2)}
  button:disabled{opacity:.65;cursor:not-allowed;transform:none;box-shadow:none}
  .msg{padding:12px 14px;border-radius:14px;margin-top:12px;font-size:13px;line-height:1.5}
  .warn{background:var(--warning);border:1px solid var(--warning-line);color:#7a5a00}
  .err{background:var(--danger);border:1px solid var(--danger-line);color:#842029}
  .ok{background:var(--success);border:1px solid var(--success-line);color:#1d5e35}
  .badge{
    display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#e7f0fb;color:#184b79;font-size:12px;font-weight:800
  }
  .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:14px}
  .stat{
    background:linear-gradient(180deg,#fdfefe 0%, #f7fbff 100%);border:1px solid var(--line);border-radius:16px;padding:14px 16px
  }
  .stat .label{font-size:12px;color:var(--muted);margin-bottom:8px}
  .stat .value{font-size:24px;font-weight:800;color:#153c61}
  .toolbar{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin:12px 0 8px}
  .toolbar .left{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  .toolbar .note{font-size:12px;color:var(--muted)}
  .table-wrap{overflow:auto;border:1px solid var(--line);border-radius:18px;background:#fff}
  table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px}
  th,td{border-right:1px solid #e7edf4;border-bottom:1px solid #e7edf4;padding:8px 8px;text-align:right;vertical-align:middle;white-space:nowrap}
  th:first-child,td:first-child{border-left:1px solid #e7edf4}
  thead th{position:sticky;top:0;z-index:2;background:linear-gradient(180deg,#eaf4ff 0%, #daeaf9 100%);color:#153c61;font-weight:800;text-align:center}
  thead tr:first-child th{top:0}
  tbody tr:nth-child(odd){background:#fcfdff}
  tbody tr:hover{background:#f7fbff}
  td.left{text-align:left}
  td input{width:100%;min-width:88px;padding:7px 8px;border:1px solid #dbe5ef;border-radius:10px;font-size:12px;text-align:right;background:#fff}
  td input[type="date"]{min-width:132px;text-align:left}
  td input:focus{border-color:#8fc3f3;box-shadow:0 0 0 3px rgba(59,130,246,.1)}
  tfoot td{background:#edf8ef;font-weight:800;color:#124d2d}
  .igv-calc{font-weight:800;background:#f6fbff}
  .neg{color:#b42318}
  .pos{color:#0b7a31}
  .section-note{
    display:flex;gap:10px;flex-wrap:wrap;background:#f8fbff;border:1px solid #dbe9f7;border-radius:16px;padding:12px 14px;margin-bottom:14px;color:#46607a;font-size:12px;line-height:1.5
  }
  .mini-card{
    border:1px solid var(--line);border-radius:16px;padding:14px;background:#fff
  }
  .mini-card h5{margin:0 0 10px;color:#153c61;font-size:13px}
  .kv{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;margin-top:10px;font-size:13px}
  .kv strong{color:#153c61}
  .hint{font-size:12px;color:var(--muted);line-height:1.5;margin-top:8px}
  .balance-ok{display:inline-flex;align-items:center;gap:8px;background:#ecfdf3;color:#166534;border:1px solid #b7e6c5;padding:9px 12px;border-radius:999px;font-size:12px;font-weight:800}
  .balance-bad{display:inline-flex;align-items:center;gap:8px;background:#fff1f2;color:#be123c;border:1px solid #fecdd3;padding:9px 12px;border-radius:999px;font-size:12px;font-weight:800}
  .flash{animation:flash .4s ease-out}
  @keyframes flash{0%{background:#fff3a8}100%{background:transparent}}
  @media (max-width:1200px){
    .grid-2,.grid-3,.grid-4,.stats{grid-template-columns:1fr}
  }