/* ---------- Tokens ----------
     Deliberately single-theme: a night, AI-concierge look (Away AI–style —
     near-black ground, violet glow, glass cards) rather than a ledger/paper one.
     All three theme selectors below carry the same values on purpose, so neither
     the OS preference nor the in-app toggle dilutes the look. */
  :root{
    --bg:#0A0912;
    --bg-elevated:#151321;
    --bg-sunken:#0D0B17;
    --text:#F5F3FC;
    --text-muted:rgba(245,243,252,0.62);
    --text-faint:rgba(245,243,252,0.40);
    --border:rgba(245,243,252,0.10);
    --border-strong:rgba(245,243,252,0.20);
    --accent:#8C7CF6;
    --accent-strong:#B3A6FF;
    --accent-soft:rgba(140,124,246,0.16);
    --accent-2:#E17BD0;
    --positive:#3DDC91;
    --positive-bg:rgba(61,220,145,0.12);
    --negative:#FB7185;
    --negative-bg:rgba(251,113,133,0.12);
    --warning:#FBBF5C;
    --warning-bg:rgba(251,191,92,0.13);

    --rail-bg:#060509;
    --rail-bg-elevated:#151321;
    --rail-text:#F5F3FC;
    --rail-text-muted:rgba(245,243,252,0.55);
    --rail-border:rgba(245,243,252,0.08);
    --rail-accent:#8C7CF6;

    --font-display:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    --font-mono:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

    --radius:16px;
    --radius-sm:10px;
  }
  @media (prefers-color-scheme: light){
    :root{
      --bg:#0A0912; --bg-elevated:#151321; --bg-sunken:#0D0B17;
      --text:#F5F3FC; --text-muted:rgba(245,243,252,0.62); --text-faint:rgba(245,243,252,0.40);
      --border:rgba(245,243,252,0.10); --border-strong:rgba(245,243,252,0.20);
      --accent:#8C7CF6; --accent-strong:#B3A6FF; --accent-soft:rgba(140,124,246,0.16); --accent-2:#E17BD0;
      --positive:#3DDC91; --positive-bg:rgba(61,220,145,0.12);
      --negative:#FB7185; --negative-bg:rgba(251,113,133,0.12);
      --warning:#FBBF5C; --warning-bg:rgba(251,191,92,0.13);
    }
  }
  :root[data-theme="dark"], :root[data-theme="light"]{
    --bg:#0A0912; --bg-elevated:#151321; --bg-sunken:#0D0B17;
    --text:#F5F3FC; --text-muted:rgba(245,243,252,0.62); --text-faint:rgba(245,243,252,0.40);
    --border:rgba(245,243,252,0.10); --border-strong:rgba(245,243,252,0.20);
    --accent:#8C7CF6; --accent-strong:#B3A6FF; --accent-soft:rgba(140,124,246,0.16); --accent-2:#E17BD0;
    --positive:#3DDC91; --positive-bg:rgba(61,220,145,0.12);
    --negative:#FB7185; --negative-bg:rgba(251,113,133,0.12);
    --warning:#FBBF5C; --warning-bg:rgba(251,191,92,0.13);
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg); color:var(--text);
    font-family:var(--font-body); font-size:14px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
    position:relative;
  }
  body::before{
    content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(ellipse 900px 560px at 18% -8%, rgba(140,124,246,0.22), transparent 60%),
      radial-gradient(ellipse 700px 500px at 100% 10%, rgba(225,123,208,0.10), transparent 60%);
  }
  .shell{position:relative; z-index:1;}
  h1,h2,h3{font-family:var(--font-display); text-wrap:balance; margin:0;}
  a{color:var(--accent-strong);}
  button{font-family:inherit;}
  :focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}

  /* ---------- Shell ---------- */
  .shell{display:flex; min-height:100vh; animation:shellFadeIn 0.5s cubic-bezier(.16,1,.3,1) both;}
  @keyframes shellFadeIn{
    from{opacity:0; transform:translateY(10px);}
    to{opacity:1; transform:translateY(0);}
  }
  @media (prefers-reduced-motion: reduce){
    .shell{animation:none;}
  }
  .rail{
    width:236px; flex:none; background:var(--rail-bg); color:var(--rail-text);
    display:flex; flex-direction:column; padding:22px 16px 18px;
    border-right:1px solid var(--rail-border);
  }
  .brand{padding:2px 6px 18px; border-bottom:1px solid var(--rail-border); margin-bottom:16px;}
  .brand .mark{
    display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display);
    font-size:19px; font-weight:800; letter-spacing:-0.01em;
  }
  .brand .mark svg{flex:none;}
  .brand .brandtext{
    background:linear-gradient(90deg, var(--accent-strong), var(--accent-2));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .brand .tag{font-size:11.5px; color:var(--rail-text-muted); margin-top:7px; line-height:1.45;}
  .brand .brandby{display:flex; align-items:center; gap:6px; margin-top:8px; font-size:10.5px; color:var(--rail-text-muted);}
  .brand .brandby-logo{flex:none; color:var(--rail-text); opacity:0.92;}

  .navtoggle{
    display:none; flex:none; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:999px; padding:0;
    background:var(--rail-bg-elevated); border:1px solid var(--rail-border);
    color:var(--rail-text); cursor:pointer;
  }
  .navtoggle-close{display:none;}
  .rail.open .navtoggle-open{display:none;}
  .rail.open .navtoggle-close{display:block;}

  .rail-body{display:flex; flex-direction:column; flex:1; min-height:0;}

  .loantype{margin-bottom:18px;}
  .loantype label{
    display:block; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--rail-text-muted); margin-bottom:6px; padding:0 2px;
  }
  .loantype select{
    width:100%; background:var(--rail-bg-elevated); color:var(--rail-text);
    border:1px solid var(--rail-border); border-radius:var(--radius-sm);
    padding:9px 10px; font-size:13.5px; font-family:inherit; appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0 L5 6 L10 0' fill='none' stroke='%238C7CF6' stroke-width='1.3'/></svg>");
    background-repeat:no-repeat; background-position:right 10px center;
  }

  nav.navrail{display:flex; flex-direction:column; gap:3px; flex:1;}
  .navrail button{
    display:flex; align-items:center; gap:10px; text-align:left;
    background:transparent; border:none; color:var(--rail-text-muted);
    padding:9px 12px; border-radius:999px; cursor:pointer; font-size:13.5px;
  }
  .navrail button svg{flex:none; opacity:0.75;}
  .navrail button:hover{background:rgba(245,243,252,0.06); color:var(--rail-text);}
  .navrail button.active{
    background:linear-gradient(90deg, var(--accent), #6E5AE6); color:#fff;
    font-weight:600; box-shadow:0 4px 16px rgba(140,124,246,0.28);
  }
  .navrail button.active svg{opacity:1;}
  .navrail .sep{height:1px; background:var(--rail-border); margin:10px 8px;}

  .rail-foot{font-size:10.5px; color:var(--rail-text-muted); padding:12px 6px 0; border-top:1px solid var(--rail-border); margin-top:14px; line-height:1.5;}

  .main{flex:1; min-width:0; padding:34px 40px 60px; max-width:1080px;}
  .view{display:none;}
  .view.active{display:block;}

  .viewhead{margin-bottom:24px; max-width:640px;}
  .viewhead h1{font-size:27px; font-weight:800; letter-spacing:-0.01em; margin-bottom:10px; color:var(--text);}
  .viewhead p{color:var(--text-muted); font-size:14px; margin:0;}
  .eyebrow{
    font-size:27px; line-height:1.2; letter-spacing:-0.01em; font-weight:800; font-family:var(--font-display);
    background:linear-gradient(90deg, var(--accent-strong), var(--accent-2));
    -webkit-background-clip:text; background-clip:text; color:transparent;
    margin-bottom:0; display:block;
  }

  /* ---------- Cards / layout ---------- */
  .card{
    background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius);
    padding:18px 20px;
  }
  .card + .card{margin-top:16px;}
  .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
  @media (max-width:820px){ .grid-2, .grid-3{grid-template-columns:1fr;} }

  .card h3{font-size:11px; text-transform:uppercase; letter-spacing:0.07em; color:var(--text-muted); font-weight:600; font-family:var(--font-body); margin-bottom:14px;}

  .field{margin-bottom:13px;}
  .field:last-child{margin-bottom:0;}
  .field label{display:flex; justify-content:space-between; font-size:12.5px; color:var(--text-muted); margin-bottom:5px;}
  .field label .val{color:var(--text); font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
  .field input[type="number"], .field input[type="text"], .field select{
    width:100%; padding:8px 10px; border:1px solid var(--border-strong); border-radius:var(--radius-sm);
    background:var(--bg); color:var(--text); font-size:13.5px; font-family:var(--font-mono);
  }
  .field select{font-family:var(--font-body);}
  .field input[type="range"]{width:100%; accent-color:var(--accent);}
  .row2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .radiorow{display:flex; gap:8px; flex-wrap:wrap;}
  .radiorow label{
    display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text);
    border:1px solid var(--border-strong); border-radius:999px; padding:6px 12px; cursor:pointer;
  }
  .radiorow input{accent-color:var(--accent);}
  .pillrow{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px;}
  .pill{
    border:1px solid var(--border-strong); background:transparent; color:var(--text-muted);
    border-radius:999px; padding:5px 11px; font-size:12px; cursor:pointer;
  }
  .pill.active{background:linear-gradient(90deg, var(--accent), #6E5AE6); border-color:transparent; color:#fff; font-weight:600;}
  .pill.locked{cursor:not-allowed; opacity:0.55; display:inline-flex; align-items:center; gap:5px;}
  .pill.locked:hover{opacity:0.55;}
  .pill.locked svg{width:11px; height:11px; flex:none;}

  /* ---------- Stat tiles ---------- */
  .stats{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:16px;}
  @media (max-width:900px){ .stats{grid-template-columns:repeat(2,1fr);} }
  .stat{background:var(--bg-elevated); padding:14px 16px;}
  .stat .label{font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-faint); margin-bottom:8px;}
  .stat .value{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:19px; font-weight:600; letter-spacing:-0.01em;}
  .stat .sub{font-size:11px; color:var(--text-faint); margin-top:4px;}
  .stat.positive .value{color:var(--positive);}
  .stat.negative .value{color:var(--negative);}

  /* ---------- Verdict banner ---------- */
  .banner{
    border-radius:var(--radius-sm); padding:14px 18px; margin-bottom:16px;
    background:var(--bg-elevated); border:1px solid var(--border); border-left:3px solid;
    font-size:13.5px; display:flex; gap:12px; align-items:flex-start; color:var(--text);
  }
  .banner.good{border-left-color:var(--positive);}
  .banner.bad{border-left-color:var(--negative);}
  .banner.info{border-left-color:var(--accent);}
  .banner strong{display:block; margin-bottom:2px; font-family:var(--font-display); font-size:14.5px; font-weight:700;}
  .banner.good strong{color:var(--positive);}
  .banner.bad strong{color:var(--negative);}
  .banner.info strong{color:var(--accent-strong);}
  .banner .icon{flex:none; margin-top:1px;}

  /* ---------- Tables ---------- */
  .tablewrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius);}
  table{width:100%; border-collapse:collapse; font-size:13px; min-width:640px;}
  thead th{
    text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted);
    padding:10px 14px; background:var(--bg-sunken); border-bottom:1px solid var(--border); white-space:nowrap;
  }
  tbody td{padding:11px 14px; border-bottom:1px solid var(--border); vertical-align:top;}
  tbody tr:last-child td{border-bottom:none;}
  td.num, th.num{text-align:right; font-family:var(--font-mono); font-variant-numeric:tabular-nums; white-space:nowrap;}
  td.bankname{font-weight:600; white-space:nowrap;}
  .prosconslist{margin:0; padding:0; list-style:none; font-size:12.3px; color:var(--text-muted); max-width:220px;}
  .prosconslist li{padding-left:13px; position:relative; margin-bottom:3px;}
  .prosconslist.pros li::before{content:"+"; position:absolute; left:0; color:var(--positive); font-weight:700;}
  .prosconslist.cons li::before{content:"–"; position:absolute; left:0; color:var(--negative); font-weight:700;}

  /* ---------- Bars ---------- */
  .barchart{margin-top:6px;}
  .barrow{display:grid; grid-template-columns:96px 1fr 110px; align-items:center; gap:10px; margin-bottom:10px; font-size:12.5px;}
  .barrow .barname{color:var(--text-muted);}
  .bartrack{height:20px; background:var(--bg-sunken); border-radius:4px; overflow:hidden; display:flex;}
  .barfill{height:100%;}
  .barrow .barval{font-family:var(--font-mono); text-align:right; font-variant-numeric:tabular-nums;}

  .stackbar{height:26px; border-radius:5px; overflow:hidden; display:flex; border:1px solid var(--border);}
  .stackseg.principal{background:var(--text-faint);}
  .stackseg.growth{background:var(--accent);}
  .legend{display:flex; gap:16px; margin-top:8px; font-size:12px; color:var(--text-muted);}
  .legend span{display:inline-flex; align-items:center; gap:6px;}
  .legend i{width:9px; height:9px; border-radius:2px; display:inline-block;}

  /* ---------- Misc ---------- */
  .btn{
    background:linear-gradient(90deg, var(--accent), #6E5AE6); color:#fff; border:none; border-radius:999px;
    padding:10px 20px; font-size:13.5px; font-weight:700; cursor:pointer;
  }
  .btn:hover{filter:brightness(1.08);}
  .btn.secondary{background:transparent; border:1px solid var(--border-strong); color:var(--text);}
  .btn.secondary.active{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-strong);}
  .hint{font-size:11.5px; color:var(--text-faint); margin-top:4px;}
  .toggle2{display:flex; border:1px solid var(--border-strong); border-radius:999px; overflow:hidden; width:fit-content; margin-bottom:14px; padding:2px;}
  .toggle2 button{border:none; background:transparent; padding:7px 14px; font-size:12.5px; color:var(--text-muted); cursor:pointer; border-radius:999px;}
  .toggle2 button.active{background:linear-gradient(90deg, var(--accent), #6E5AE6); color:#fff; font-weight:600;}
  .footnote{margin-top:34px; padding-top:16px; border-top:1px solid var(--border); font-size:11.5px; color:var(--text-faint); line-height:1.7;}
  .footnote a{color:var(--text-muted);}
  .kv{display:flex; justify-content:space-between; font-size:13px; padding:7px 0; border-bottom:1px dashed var(--border);}
  .kv:last-child{border-bottom:none;}
  .kv .k{color:var(--text-muted);}
  .kv .v{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:600;}
  .callout-list{margin:0; padding:0; list-style:none;}
  .callout-list li{padding:12px 0; border-bottom:1px solid var(--border);}
  .callout-list li:last-child{border-bottom:none;}
  .callout-list .name{font-weight:600; font-size:13.5px;}
  .callout-list .range{font-family:var(--font-mono); color:var(--accent-strong); font-size:12.5px; float:right;}
  .callout-list .desc{color:var(--text-muted); font-size:12.5px; margin-top:3px; max-width:520px;}
  .roadmap-item{display:grid; grid-template-columns:190px 1fr; gap:16px; padding:14px 0; border-bottom:1px solid var(--border);}
  .roadmap-item:last-child{border-bottom:none;}
  .roadmap-item .rt{font-family:var(--font-display); font-size:14.5px;}
  .roadmap-item .rd{color:var(--text-muted); font-size:13px;}
  @media (max-width:700px){ .roadmap-item{grid-template-columns:1fr;} }

  /* ---------- Bank Comparison: edit tools ---------- */
  .banks-toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px;}
  .banks-actions{display:flex; gap:8px; flex-wrap:wrap;}
  .banks-actions .btn{padding:8px 14px; font-size:12.5px;}
  .bulk-textarea{
    width:100%; min-height:220px; background:var(--bg-sunken); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
    color:var(--text); font-family:var(--font-mono); font-size:12px; padding:12px; resize:vertical; line-height:1.5;
  }
  .edit-cell input[type="text"], .edit-cell input[type="number"]{
    width:100%; padding:6px 8px; margin-bottom:4px; border:1px solid var(--border-strong); border-radius:6px;
    background:var(--bg); color:var(--text); font-size:12.5px; font-family:var(--font-mono);
  }
  .edit-cell input:last-child{margin-bottom:0;}
  .edit-rate-row{display:flex; align-items:center; gap:4px;}
  .edit-rate-row input{width:60px;}
  .edit-rate-row span{color:var(--text-faint); font-size:12px;}
  .removeRowBtn{
    background:var(--negative-bg); border:1px solid rgba(251,113,133,0.4); color:var(--negative);
    border-radius:6px; padding:4px 9px; font-size:11.5px; cursor:pointer; white-space:nowrap;
  }
  .cibil-badge{
    display:inline-block; font-family:var(--font-body); font-weight:600; font-size:9.5px; letter-spacing:0.03em;
    text-transform:uppercase; padding:2px 7px; border-radius:999px; vertical-align:middle;
    background:var(--positive-bg); color:var(--positive); border:1px solid rgba(61,220,145,0.35);
  }

  /* ---------- Intro: chat + analysing (phone-frame) ---------- */
  #introRoot{
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    padding:32px 16px; position:relative; z-index:1;
  }
  .phoneframe{
    width:100%; max-width:400px; height:min(844px, 92vh); background:var(--bg-elevated);
    border-radius:36px; border:1px solid var(--border-strong); overflow:hidden;
    display:flex; flex-direction:column; box-shadow:0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(245,243,252,0.04);
    position:relative;
    animation:introPop 0.6s cubic-bezier(.16,1,.3,1) both;
  }
  @keyframes introPop{
    from{opacity:0; transform:translateY(18px) scale(.97);}
    to{opacity:1; transform:translateY(0) scale(1);}
  }
  @media (prefers-reduced-motion: reduce){
    .phoneframe{animation:none;}
  }
  .statusbar{
    display:flex; justify-content:space-between; align-items:center; padding:14px 22px 6px;
    font-size:12px; font-weight:600; color:var(--text); flex:none;
  }
  .statusbar .sb-icons{display:flex; align-items:center; gap:5px; opacity:0.85;}
  .introscreen{display:none; flex:1; min-height:0; flex-direction:column; padding:6px 18px 16px;}
  .introscreen.active{display:flex;}
  .skiplink{
    align-self:flex-end; background:none; border:none; color:var(--text-faint); font-size:11.5px;
    cursor:pointer; padding:4px 2px; margin-bottom:4px;
  }
  .skiplink:hover{color:var(--text-muted);}
  .intro-banner{
    background:var(--accent-soft); border:1px solid rgba(140,124,246,0.28); border-radius:12px;
    padding:9px 13px; font-size:12.5px; color:var(--accent-strong); font-weight:600; margin-bottom:12px;
  }
  .chatlog{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:2px 2px 8px;}
  .msg{max-width:82%; padding:10px 13px; border-radius:15px; font-size:13px; line-height:1.45;}
  .msg.bot{align-self:flex-start; background:var(--bg-sunken); border:1px solid var(--border); color:var(--text); border-bottom-left-radius:4px;}
  .msg.user{align-self:flex-end; background:linear-gradient(135deg, var(--accent), #6E5AE6); color:#fff; font-weight:600; border-bottom-right-radius:4px;}
  .chat-quickreplies{display:flex; flex-wrap:wrap; gap:7px; padding:0 2px;}
  .chat-quickreplies .pill{padding:8px 14px; font-size:13px;}
  .chatbar{
    display:flex; align-items:center; gap:8px; margin-top:10px; padding:8px 8px 8px 14px;
    background:var(--bg-sunken); border:1px solid var(--border-strong); border-radius:999px; flex:none;
  }
  .chatbar input{
    flex:1; background:none; border:none; color:var(--text); font-size:13px; font-family:inherit; min-width:0;
  }
  .chatbar input:focus, .chatbar input:focus-visible{outline:none;}
  .chatbar:focus-within{border-color:var(--accent);}
  .chatbar input::placeholder{color:var(--text-faint);}
  .chatbar input:disabled{color:var(--text-faint);}
  .chatbar button{
    flex:none; width:32px; height:32px; border-radius:999px; border:none; cursor:pointer;
    background:linear-gradient(135deg, var(--accent), #6E5AE6); color:#fff; font-size:14px;
    display:flex; align-items:center; justify-content:center;
  }
  .chatbar button:disabled{opacity:0.35; cursor:default;}

  .analyze-head{display:flex; align-items:center; justify-content:space-between; padding:8px 2px 4px; font-size:13.5px; font-weight:700; color:var(--text); flex:none;}
  .analyze-head .backdot{width:26px; height:26px; border-radius:999px; background:var(--bg-sunken); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:13px;}
  .analyze-head .skipbtn{background:none; border:none; color:var(--accent-strong); font-size:12px; font-weight:600; cursor:pointer;}
  .gaugewrap{position:relative; width:172px; height:172px; margin:18px auto 4px;}
  .gaugewrap svg{width:100%; height:100%; transform:rotate(-90deg);}
  .gaugewrap .gtrack{fill:none; stroke:var(--border); stroke-width:9;}
  .gaugewrap .gfill{fill:none; stroke:url(#gaugeGrad); stroke-width:9; stroke-linecap:round; transition:stroke-dashoffset 0.2s linear;}
  .gaugepct{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:800; color:var(--text); font-family:var(--font-display);}
  .gaugesub{text-align:center; font-size:11.5px; color:var(--text-faint); margin-bottom:16px;}
  .checklist{list-style:none; margin:0; padding:0; overflow-y:auto; flex:1; min-height:0;}
  .checklist li{padding:9px 2px; opacity:0.4; transition:opacity 0.3s;}
  .checklist li.done{opacity:0.55;}
  .checklist li.active{opacity:1;}
  .checklist .ctitle{font-size:13px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:7px;}
  .checklist li.done .ctitle::before{content:"✓"; color:var(--positive); font-weight:800;}
  .checklist li.active .ctitle::before{content:""; width:7px; height:7px; border-radius:999px; background:var(--accent); flex:none; box-shadow:0 0 0 3px var(--accent-soft);}
  .checklist li:not(.done):not(.active) .ctitle::before{content:""; width:7px; height:7px; border-radius:999px; background:var(--border-strong); flex:none;}
  .checklist .csub{font-size:11.5px; color:var(--text-faint); margin:3px 0 0 14px;}
  .checklist .cbadges{display:flex; flex-wrap:wrap; gap:5px; margin:6px 0 0 14px;}
  .checklist .cbadges span{font-size:10.5px; padding:3px 8px; border-radius:999px; background:var(--bg-sunken); border:1px solid var(--border); color:var(--text-muted);}
  .analyze-complete{flex:none; text-align:center; padding:26px 6px 6px;}
  .analyze-complete h2{font-size:21px; font-weight:800; color:var(--text); margin-bottom:8px;}
  .analyze-complete .savingsnum{
    font-size:30px; font-weight:800; font-family:var(--font-display);
    background:linear-gradient(90deg, var(--accent-strong), var(--accent-2));
    -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:6px;
  }
  .analyze-complete p{font-size:12.5px; color:var(--text-muted); margin:0 0 18px; line-height:1.5;}
  .analyze-complete .btn{width:100%; padding:13px; font-size:14px;}
  .signupgate{display:flex; flex-direction:column; gap:9px; text-align:left;}
  .signupnote{font-size:13px; font-weight:700; color:var(--text); margin:0 0 2px; text-align:center;}
  .signupinput{
    width:100%; background:var(--bg-sunken); border:1px solid var(--border-strong); border-radius:999px;
    padding:11px 17px; font-size:13.5px; color:var(--text); font-family:inherit;
  }
  .signupinput::placeholder{color:var(--text-faint);}
  .signupinput:focus{outline:none; border-color:var(--accent);}
  .signuperr{font-size:11.5px; color:#F17878; margin:-2px 0 0;}
  .signupprivacy{font-size:10.5px; color:var(--text-faint); text-align:center; margin:0;}
  .signupgate .btn:disabled{opacity:0.6; cursor:default;}

  /* ---------- BT: hero gain banner + circular scenario rings ---------- */
  .hero-gain{
    background:
      radial-gradient(ellipse 480px 200px at 15% 15%, rgba(140,124,246,0.22), transparent 65%),
      radial-gradient(ellipse 420px 200px at 100% 100%, rgba(225,123,208,0.14), transparent 65%),
      var(--bg-elevated);
    border:1px solid rgba(140,124,246,0.35); border-radius:var(--radius);
    padding:22px 26px; margin-bottom:16px;
    display:flex; align-items:flex-start; justify-content:space-between; gap:22px; flex-wrap:wrap;
  }
  .hero-gain .hg-label{font-size:11px; text-transform:uppercase; letter-spacing:0.07em; color:var(--text-muted); font-weight:600; margin-bottom:7px;}
  .hero-gain .hg-amount{
    font-family:var(--font-display); font-weight:800; font-size:38px; letter-spacing:-0.01em; line-height:1;
    background:linear-gradient(90deg, var(--accent-strong), var(--accent-2));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .hero-gain .hg-sub{font-size:12.5px; color:var(--text-muted); margin-top:8px; max-width:460px; line-height:1.55;}
  .hero-gain .hg-alt{
    margin-top:14px; padding-top:14px; border-top:1px solid rgba(140,124,246,0.25);
    font-size:12.5px; color:var(--text-muted); max-width:460px; line-height:1.6;
  }
  .hero-gain .hg-alt strong{color:var(--text);}
  .hg-seehow{
    display:inline-block; margin-top:8px; background:linear-gradient(90deg, var(--accent), #6E5AE6);
    color:#fff; border:none; border-radius:999px; padding:7px 15px; font-size:12px; font-weight:700;
    cursor:pointer; white-space:nowrap;
  }
  .hg-seehow:hover{filter:brightness(1.08);}
  .hero-gain .hg-tag{
    flex:none; font-size:12.5px; font-weight:600; padding:9px 16px; border-radius:999px;
    background:var(--accent-soft); border:1px solid rgba(140,124,246,0.35); color:var(--accent-strong); white-space:nowrap;
  }

  .scenario-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
  @media (max-width:820px){ .scenario-grid{grid-template-columns:1fr;} }
  .scenario-card{
    background:var(--bg-sunken); border:1px solid var(--border); border-radius:var(--radius);
    padding:20px 14px; text-align:center;
  }
  .scenario-card.hero{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 14px 34px rgba(140,124,246,0.22);}
  .scenario-ring{position:relative; width:136px; height:136px; margin:0 auto 14px;}
  .scenario-ring svg{width:100%; height:100%; transform:rotate(-90deg);}
  .scenario-ring .strack{fill:none; stroke:var(--border); stroke-width:8;}
  .scenario-ring .sfill{fill:none; stroke:url(#ringGrad); stroke-width:8; stroke-linecap:round; transition:stroke-dashoffset 0.4s ease;}
  .scenario-amt{
    position:absolute; inset:14px; display:flex; align-items:center; justify-content:center; text-align:center;
    font-family:var(--font-display); font-weight:800; font-size:16px; line-height:1.15; color:var(--text); padding:0 4px;
  }
  .scenario-card.hero .scenario-amt{color:var(--accent-strong);}
  .scenario-name{font-weight:700; font-size:13.5px; color:var(--text); margin-bottom:3px;}
  .scenario-sub{font-size:11.5px; color:var(--text-muted); margin-bottom:8px; min-height:15px;}
  .scenario-breakdown{font-size:11px; color:var(--text-faint); line-height:1.5;}

  /* ---------- Mobile shell: rail collapses into a top bar + drawer ---------- */
  @media (max-width:780px){
    .shell{flex-direction:column; min-height:auto;}
    .rail{
      width:100%; flex:none; flex-direction:column;
      padding:12px 16px; border-right:none; border-bottom:1px solid var(--rail-border);
      position:sticky; top:0; z-index:30;
    }
    .brand{
      display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
      gap:2px 10px; padding:0; border-bottom:none; margin-bottom:0;
    }
    .brand .mark{flex:none;}
    .brand .brandby, .brand .tag{
      flex-basis:100%; display:none; margin-top:6px;
    }
    .rail.open .brand .brandby{display:flex;}
    .rail.open .brand .tag{display:block;}

    .navtoggle{display:flex;}

    .rail-body{
      display:none; margin-top:14px; flex:none;
      max-height:calc(100vh - 76px); overflow-y:auto;
    }
    .rail.open .rail-body{display:flex; flex-direction:column;}

    .loantype{margin-bottom:14px;}
    .navrail{flex:none; gap:2px;}
    .navrail button{padding:11px 12px; font-size:14.5px;}
    .rail-foot{margin-top:16px;}

    .main{padding:18px 14px 44px; max-width:none;}
    .viewhead{margin-bottom:18px;}
    .viewhead h1{font-size:21px;}
    .eyebrow{font-size:21px;}
    .card{padding:15px 16px;}
    .card + .card{margin-top:12px;}
    .row2{grid-template-columns:1fr; gap:12px;}
    .stats{grid-template-columns:repeat(2,1fr);}
    .stat{padding:12px 14px;}
    .stat .value{font-size:17px;}
    .hero-gain{padding:18px 16px; gap:16px;}
    .hero-gain .hg-amount{font-size:28px;}
    .banks-toolbar{align-items:stretch;}
    .banks-actions{width:100%;}
    .banks-actions .btn{flex:1;}

    /* Real inputs need >=16px font-size, or iOS Safari zooms in on focus */
    .field input[type="number"], .field input[type="text"], .field select,
    .loantype select, .bulk-textarea, .chatbar input{
      font-size:16px;
    }
  }