:root{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#172033;background:#f6f7f9;font-synthesis:none
}
*{box-sizing:border-box}
body{margin:0;background:#f6f7f9;color:#172033}
button,input,select{font:inherit}
button{cursor:pointer}
a{color:inherit}
.app{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:0 0 44px}
.topbar{height:68px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e5e7eb}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:750;font-size:15px}
.brand-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#172033;color:white;font-size:11px;letter-spacing:.04em}
.checked{font-size:12px;color:#7b8494}
.intro{padding:48px 0 28px;max-width:680px}
.eyebrow,.label{display:block;margin:0 0 8px;color:#7b8494;font-size:10px;font-weight:750;letter-spacing:.12em}
.intro h1{margin:0;font-size:clamp(32px,5vw,52px);line-height:1.04;letter-spacing:-.045em}
.intro>p:last-child{margin:14px 0 0;color:#657083;font-size:15px;line-height:1.6}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 1px 2px rgba(15,23,42,.025)}
.alert{margin-bottom:16px;padding:13px 16px;border:1px solid #fecaca;border-radius:12px;background:#fff1f2;color:#9f1239;font-size:13px}
.controls{display:grid;grid-template-columns:1fr 1.15fr 1.2fr;gap:14px;padding:16px;margin-bottom:18px}
.controls label,.basis{display:flex;flex-direction:column;gap:7px}
.controls label>span,.basis>span{font-size:11px;font-weight:700;color:#6b7280}
select,.amount-box{width:100%;height:46px;border:1px solid #dfe3e8;border-radius:11px;background:#fff}
select{padding:0 12px;color:#172033;font-weight:650}
.amount-box{display:flex;align-items:center;overflow:hidden}
.amount-box input{min-width:0;flex:1;height:100%;border:0;outline:0;padding:0 12px;font-size:16px;font-weight:700;color:#172033}
.amount-box strong{padding:0 13px;color:#697386;font-size:11px}
.segmented{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;background:#f0f2f5;border-radius:11px;height:46px}
.segmented button{border:0;border-radius:8px;background:transparent;color:#687386;font-size:11px;font-weight:700}
.segmented button.active{background:#fff;color:#172033;box-shadow:0 1px 3px rgba(15,23,42,.09)}
.segmented.compact{width:112px;height:36px}
.loading{padding:22px;text-align:center;color:#687386;font-size:13px}
.summary-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;margin-bottom:18px}
.result-card,.reference-card{padding:22px}
.best-line{display:flex;align-items:center;gap:10px}
.best-line h2{margin:0;font-size:22px;letter-spacing:-.02em}
.pill{padding:4px 7px;border-radius:999px;background:#ecfdf5;color:#047857;font-size:9px;font-weight:750}
.result{display:block;margin-top:22px;font-size:clamp(30px,5vw,44px);line-height:1;letter-spacing:-.045em}
.muted{color:#7b8494;font-size:11px}
.saving{margin-top:18px;padding-top:14px;border-top:1px solid #eef0f2;font-size:12px;color:#4b5563}
.saving strong{color:#047857}
.reference-card>div{display:flex;align-items:baseline;gap:8px;margin-top:20px}
.reference-rate{font-size:34px;letter-spacing:-.035em}
.reference-card #currencyPair{font-size:11px;color:#7b8494}
.chart-card{padding:22px;margin-bottom:18px;overflow:hidden}
.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.section-head h2{margin:0;font-size:20px;letter-spacing:-.02em}
.legend{display:flex;gap:12px;overflow-x:auto;padding:18px 0 8px;scrollbar-width:none}
.legend::-webkit-scrollbar{display:none}
.legend-item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;color:#596477;font-size:10px;font-weight:650}
.legend-dot{width:8px;height:8px;border-radius:50%;background:var(--series-color)}
.chart{position:relative;width:100%;height:360px;margin-top:4px;touch-action:none}
.chart svg{display:block;width:100%;height:100%;overflow:visible}
.grid-line{stroke:#edf0f3;stroke-width:1}
.axis-label{fill:#8a93a3;font-size:10px}
.series-line{fill:none;stroke:var(--series-color);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.latest-dot{fill:#fff;stroke:var(--series-color);stroke-width:2;vector-effect:non-scaling-stroke}
.crosshair{stroke:#9aa3b1;stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke;pointer-events:none}
.capture{fill:transparent;cursor:crosshair}
.tooltip{position:absolute;top:18px;z-index:4;width:220px;padding:10px 11px;border-radius:11px;background:#172033;color:#fff;box-shadow:0 10px 30px rgba(15,23,42,.22);pointer-events:none;transform:translateX(-50%)}
.tooltip-time{padding-bottom:7px;margin-bottom:5px;border-bottom:1px solid rgba(255,255,255,.12);color:#aeb7c5;font-size:9px}
.tooltip-row{display:flex;justify-content:space-between;gap:12px;padding:3px 0;font-size:10px}
.tooltip-row span{display:flex;align-items:center;gap:6px;color:#d7dce4}
.tooltip-row i{width:7px;height:7px;border-radius:50%;background:var(--series-color)}
.tooltip-row strong{font-variant-numeric:tabular-nums}
.chart-help{margin:8px 0 0;color:#8a93a3;font-size:10px}
.table-card{padding:22px}
.table-scroll{overflow-x:auto;margin:14px -6px 0}
table{width:100%;border-collapse:collapse;min-width:690px}
th,td{padding:13px 10px;border-bottom:1px solid #eef0f2;text-align:left;font-size:11px;vertical-align:middle}
th{color:#8a93a3;font-size:9px;letter-spacing:.05em;text-transform:uppercase}
td strong{font-variant-numeric:tabular-nums}
.bank{display:flex;align-items:center;gap:9px}
.bank-badge{display:grid;place-items:center;width:34px;height:30px;border-radius:8px;background:#f3f5f7;color:#4b5563;font-size:8px;font-weight:800}
.bank small{display:block;margin-top:2px;color:#8a93a3;font-size:9px}
.best-row{background:#fbfefc}
.best-chip{display:inline-block;margin-left:5px;padding:2px 5px;border-radius:999px;background:#dcfce7;color:#047857;font-size:7px;font-weight:800}
.status-live{color:#047857;font-weight:700}
.ref{color:#475569;font-size:10px;text-decoration:none}
.ref:hover{text-decoration:underline}
.footnote{display:flex;justify-content:space-between;gap:18px;padding:14px 4px;color:#8a93a3;font-size:10px}
@media(max-width:760px){
  .app{width:min(100% - 20px,1120px)}
  .topbar{height:58px}.checked{max-width:48%;text-align:right;font-size:10px}
  .intro{padding:34px 2px 22px}.intro>p:last-child{font-size:13px}
  .controls{grid-template-columns:1fr;padding:13px;gap:11px}
  .summary-grid{grid-template-columns:1fr;gap:12px}
  .result-card,.reference-card,.chart-card,.table-card{padding:16px;border-radius:14px}
  .chart{height:280px;margin-left:-4px;width:calc(100% + 8px)}
  .chart-card .section-head{align-items:center}
  .legend{padding-top:14px}
  .tooltip{width:190px;top:12px;padding:9px}
  .axis-label{font-size:9px}
  .footnote{flex-direction:column;gap:5px}
}
@media(max-width:420px){
  .intro h1{font-size:34px}
  .section-head h2{font-size:18px}
  .result{font-size:32px}
  .chart{height:250px}
  .segmented.compact{width:98px}
}
/* Best-rate hierarchy + daily aligned chart */
.result-card{position:relative;border-color:#ccebdc;background:linear-gradient(180deg,#ffffff 0%,#fbfffd 100%)}
.result-card:before{content:"TOP 3";position:absolute;top:18px;right:18px;padding:5px 8px;border-radius:999px;background:#dcfce7;color:#047857;font-size:8px;font-weight:850;letter-spacing:.08em}
.legend-best{padding:5px 8px;border-radius:999px;background:#ecfdf5;color:#065f46}
.legend-best b{margin-left:3px;font-size:7px;letter-spacing:.05em}
.day-guide{stroke:#f4f5f7;stroke-width:1;vector-effect:non-scaling-stroke}
.series-line.dim-series{opacity:.48;stroke-width:1.6}
.series-line.best-series{opacity:1;stroke-width:3.2}
.history-dot{fill:#fff;stroke:var(--series-color);stroke-width:1.8;vector-effect:non-scaling-stroke}
.history-dot.best-dot{stroke-width:2.8}
.best-end-label{fill:#047857;font-size:9px;font-weight:800}
.tooltip-best{background:rgba(16,185,129,.13);margin:1px -5px;padding:4px 5px;border-radius:6px}
.tooltip-best b{font-size:7px;color:#86efac;margin-left:4px}
.rank{display:inline-grid;place-items:center;min-width:31px;height:25px;padding:0 6px;border-radius:999px;background:#f3f4f6;color:#64748b;font-size:9px;font-weight:800}
.rank-best{background:#dcfce7;color:#047857}
.best-row td{border-top:1px solid #d1fae5;border-bottom-color:#d1fae5}
.best-row .bank-badge{background:#dcfce7;color:#047857}
@media(max-width:760px){
  .result-card:before{top:13px;right:13px}
  .best-end-label{display:none}
}

.top-three{display:grid;gap:8px}
.top-bank-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 11px;border:1px solid #edf0f2;border-radius:11px;background:#fff}
.top-bank-best{border-color:#bbf7d0;background:#f0fdf4}
.top-rank{display:grid;place-items:center;width:30px;height:25px;border-radius:999px;background:#f3f4f6;color:#64748b;font-size:9px;font-weight:850}
.top-bank-best .top-rank{background:#dcfce7;color:#047857}
.top-bank-name{min-width:0;display:flex;flex-direction:column;gap:2px}
.top-bank-name strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#172033;font-size:12px}
.top-bank-name small{color:#8a93a3;font-size:9px;font-variant-numeric:tabular-nums}
.top-bank-diff{color:#b45309;font-size:12px;font-variant-numeric:tabular-nums}
.top-bank-best .top-bank-diff{color:#047857}
.top3-note{margin-top:10px;color:#64748b;font-size:10px}
.top3-note strong{color:#047857}
@media(max-width:420px){
  .top-bank-row{grid-template-columns:30px minmax(0,1fr) auto;gap:8px;padding:9px}
  .top-bank-diff{font-size:11px}
}

/* Hourly chart + assumed-rate state */
.hour-guide{stroke:#f4f5f7;stroke-width:1;vector-effect:non-scaling-stroke}
.legend-item{gap:5px}
.legend-rank{font-size:8px;font-weight:850;color:#94a3b8;min-width:18px}
.assumed-chip{font-style:normal;font-size:7px;font-weight:750;color:#b45309;background:#fff7ed;border:1px solid #fed7aa;border-radius:999px;padding:2px 5px}
.history-dot.actual-dot{fill:#fff}
.history-dot.assumed-dot{fill:#fff;stroke-dasharray:2 2;stroke-width:2.4}
.tooltip-row{grid-template-columns:minmax(0,1fr) auto;column-gap:12px}
.tooltip-row small{grid-column:1 / -1;color:#94a3b8;font-size:8px;margin-top:1px}
.tooltip-row em{font-style:normal;color:#fbbf24;font-size:8px;font-weight:750}

/* Cleaner trend chart */
.legend{flex-wrap:wrap;overflow:visible;gap:8px;padding:14px 0 8px}
.legend-item{border:1px solid #edf0f2;border-radius:999px;background:#fff;padding:6px 9px;gap:5px}
.legend-item.legend-best{border-color:#bbf7d0;background:#ecfdf5}
.legend-name{max-width:150px;overflow:hidden;text-overflow:ellipsis}
.legend-rank{font-size:9px;min-width:auto}
.legend-toggle{border:1px solid #dfe3e8;border-radius:999px;background:#f8fafc;color:#64748b;padding:6px 10px;font-size:9px;font-weight:800}
.legend-toggle:hover{background:#f1f5f9}
.assumed-chip{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;font-size:10px}
.series-line{stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:opacity .18s ease}
.series-line.dim-series{opacity:.34;stroke-width:1.7}
.series-line.best-series{opacity:1;stroke-width:3.4}
.history-dot{fill:#fff;stroke:var(--series-color);stroke-width:2.1}
.history-dot.assumed-dot{stroke-dasharray:3 2}
.hour-guide{stroke:#f1f3f5}
.best-end-label{font-size:9px}
@media(max-width:760px){
  .legend{flex-wrap:nowrap;overflow-x:auto;padding-bottom:10px}
  .legend-name{max-width:115px}
}

/* Buy / sell selector */
.trade-switch{padding:14px 16px;margin-bottom:14px;animation:fadeUp .46s ease both}
.trade-options{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.trade-options button{display:flex;align-items:center;gap:11px;min-height:62px;padding:10px 12px;border:1px solid #dfe3e8;border-radius:12px;background:#fff;text-align:left;color:#475569;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease}
.trade-options button:hover{transform:translateY(-1px);border-color:#cbd5e1;box-shadow:0 5px 14px rgba(15,23,42,.05)}
.trade-options button.active{border-color:#86efac;background:#f0fdf4;box-shadow:0 0 0 2px rgba(34,197,94,.08)}
.trade-options strong{display:block;color:#172033;font-size:12px}
.trade-options small{display:block;margin-top:3px;color:#8490a3;font-size:9px}
.trade-icon{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:9px;background:#f3f5f7;font-weight:900;color:#64748b;transition:transform .18s ease,background .18s ease,color .18s ease}
.trade-options button.active .trade-icon{background:#dcfce7;color:#047857;transform:scale(1.04)}

/* Simple motion */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes softRefresh{0%{opacity:.72;transform:translateY(2px)}100%{opacity:1;transform:translateY(0)}}
@keyframes lineReveal{from{opacity:0}to{opacity:1}}
.intro{animation:fadeUp .42s ease both}
.controls{animation:fadeUp .5s .04s ease both}
#dashboard>.summary-grid{animation:fadeUp .42s ease both}
#dashboard>.chart-card{animation:fadeUp .46s .035s ease both}
#dashboard>.table-card{animation:fadeUp .5s .07s ease both}
.data-refresh .result-card,.data-refresh .reference-card,.data-refresh .chart-card,.data-refresh .table-card{animation:softRefresh .26s ease both}
.series-line{animation:lineReveal .32s ease both}
.segmented button,.legend-toggle,.top-bank-row{transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.segmented button:active,.legend-toggle:active{transform:scale(.97)}
.top-bank-row:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(15,23,42,.035)}

@media(max-width:760px){
  .trade-switch{padding:12px}
  .trade-options{grid-template-columns:1fr}
  .trade-options button{min-height:58px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Fluid trend refinement */
.series-line{filter:drop-shadow(0 1px 0 rgba(255,255,255,.45))}
.series-line.dim-series{opacity:.42}
.series-line.best-series{stroke-width:3.5}
.chart{isolation:isolate}
.spread-label{fill:#94a3b8;font-size:8px;font-weight:700;letter-spacing:.02em}
.legend-item{transition:opacity .18s ease,transform .18s ease,background .18s ease,border-color .18s ease}
.legend-item:hover{transform:translateY(-1px)}

/* FX-style comparison chart */
.chart-card{overflow:visible}
.legend{display:flex;align-items:center;justify-content:space-between;gap:12px;overflow:visible;flex-wrap:wrap}
.chart-key{display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:#748094;font-size:9px;font-weight:700}
.chart-key span{display:inline-flex;align-items:center;gap:6px}
.key-swatch{display:inline-block;width:18px;height:3px;border-radius:999px}
.key-band{height:8px;background:rgba(37,99,235,.10);border:1px solid rgba(37,99,235,.13)}
.key-best{background:#2563eb}
.key-bot{background:#94a3b8}
.spread-band{fill:rgba(37,99,235,.055);stroke:none}
.series-line{fill:none;stroke:var(--series-color);vector-effect:non-scaling-stroke}
.series-line.compare-series{stroke-width:1.7;opacity:.5}
.series-line.best-series{stroke-width:3;opacity:1}
.series-line.bot-series{stroke:#94a3b8;stroke-width:1.5;stroke-dasharray:5 5;opacity:.8}
.latest-dot{fill:#fff;stroke:var(--series-color);stroke-width:2;vector-effect:non-scaling-stroke}
.bot-series + .latest-dot{stroke:#94a3b8}
.end-label-name{fill:#64748b;font-size:8px;font-weight:750}
.end-label-name.end-best{fill:#1d4ed8}
.end-label-rate{fill:#94a3b8;font-size:7px;font-weight:650}
.fx-tooltip{width:245px}
.tooltip-divider{height:1px;background:rgba(255,255,255,.12);margin:5px 0}
.tooltip-worst span{color:#fecaca}
.tooltip-bot span{color:#cbd5e1}
@media(max-width:760px){
  .chart-card{overflow:hidden}
  .legend{align-items:flex-start}
  .chart-key{gap:9px}
  .end-label-group{display:none}
}

/* Actual bank update markers */
.update-dot{fill:#fff;stroke:var(--series-color);stroke-width:1.8;vector-effect:non-scaling-stroke}
.update-dot.changed-dot{stroke-width:2.6}
.update-dot.best-update-dot{stroke-width:2.8}
.update-dot.changed-dot.best-update-dot{stroke-width:3.2}
.fx-tooltip .tooltip-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px}
.fx-tooltip .tooltip-row small{grid-column:1/-1;color:#94a3b8;font-size:8px;margin:1px 0 2px 13px}

/* Range control: three real columns */
.segmented.compact{width:168px;height:38px;grid-template-columns:repeat(3,1fr)}
.segmented.compact button{min-width:0}
.segmented.compact button.active{color:#0f172a;box-shadow:0 1px 4px rgba(15,23,42,.14)}
@media(max-width:420px){.segmented.compact{width:150px}}

/* Consistent bank symbols */
.bank-symbol{display:inline-grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:11px;background:#eef2f7;color:#334155;border:1px solid rgba(15,23,42,.06);font-size:8px;font-weight:900;letter-spacing:-.02em}
.bank-symbol-small{flex-basis:24px;width:24px;height:24px;border-radius:7px;font-size:6.5px}
.bank-symbol-bbl{background:#eaf2ff;color:#0756a6}
.bank-symbol-kbank{background:#eaf8ef;color:#138f45}
.bank-symbol-scb{background:#f2ebff;color:#5f259f}
.bank-symbol-ktb{background:#eaf6ff;color:#0b7dc2}
.bank-symbol-bay{background:#fff7dd;color:#8a6800}
.bank-symbol-ttb{background:#eef2ff;color:#2447a8}
.bank-symbol-uobt{background:#edf3ff;color:#234aa3}
.bank-symbol-cimb{background:#fff0f0;color:#b42318}
.bank-symbol-icbct{background:#fff1f1;color:#c41e3a}
.bank-symbol-hsbc{background:#fff0f0;color:#d71920}
.bank-symbol-exim{background:#eef9f4;color:#08765b}
.bank-symbol-gsb{background:#fff0f7;color:#b51f68}
.bank-symbol-boct{background:#fff0f0;color:#b0121b}
.bank-symbol-ibank{background:#edf9f6;color:#0d7766}
.bank-symbol-iob{background:#fff5ec;color:#b45309}
.bank-symbol-db{background:#edf2ff;color:#1f4aa8}
.bank-symbol-citi{background:#eef4ff;color:#1558a6}
.bank-symbol-kkp{background:#fff4e8;color:#a65b00}
.bank-symbol-bot{background:#f1f5f9;color:#475569}

/* Top 3 now includes symbol column */
.top-bank-row{grid-template-columns:34px 28px minmax(0,1fr) auto}
.top-bank-row .bank-symbol-small{width:26px;height:26px;flex-basis:26px}

/* BOT is an indicator, not a ranked bank */
.bot-indicator-key{padding:5px 8px;border:1px dashed #cbd5e1;border-radius:999px;background:#f8fafc}
.bot-indicator-key b{font-size:8px;color:#475569;letter-spacing:.05em}
.bot-indicator-key small{font-size:7px;color:#94a3b8}
.end-label-name.end-bot{fill:#64748b;font-weight:900}
.tooltip-bot{background:rgba(148,163,184,.08);margin:2px -5px;padding:5px;border-radius:7px}
.bot-mini{display:inline-grid;place-items:center;padding:2px 5px;border:1px dashed #94a3b8;border-radius:5px;color:#cbd5e1;font-size:7px;font-weight:900}

/* Official bank icons */
.bank-icon-wrap{display:inline-grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:11px;background:#fff;border:1px solid #e5e7eb;box-shadow:0 1px 2px rgba(15,23,42,.04);overflow:hidden}
.bank-icon-small{flex-basis:24px;width:24px;height:24px;border-radius:7px}
.bank-icon{display:block;width:72%;height:72%;object-fit:contain}
.bank-icon-small .bank-icon{width:76%;height:76%}

/* Collision-free professional chart label rail */
.label-connector{fill:none;stroke:var(--series-color);stroke-width:1;opacity:.38;vector-effect:non-scaling-stroke}
.label-connector.bot-connector{stroke:#94a3b8;stroke-dasharray:3 3;opacity:.7}
.rail-label-name{fill:#475569;font-size:8px;font-weight:800;letter-spacing:.01em}
.rail-label-rate{fill:#94a3b8;font-size:7px;font-weight:700}
.rail-best .rail-label-name{fill:#1d4ed8}
.rail-best .rail-label-rate{fill:#2563eb}
.rail-bot .rail-label-name{fill:#64748b;font-weight:900}
.rail-bot .rail-label-rate{fill:#94a3b8}
.end-label-group{display:none}

/* Reduce visual competition in focused view */
.series-line.compare-series{opacity:.42}
.series-line.best-series{stroke-width:3.2}
.spread-band{fill:rgba(37,99,235,.045)}
@media(max-width:760px){
  .bank-icon-wrap{width:32px;height:32px;flex-basis:32px}
  .bank-icon-small{width:22px;height:22px;flex-basis:22px}
  .rail-label{display:none}
  .label-connector{display:none}
}


/* 2026-09-30 UX clarity pass */
.intro-compact{padding:30px 0 18px;max-width:760px}
.intro-compact h1{font-size:clamp(30px,4.3vw,46px)}
.decision-card{padding:16px;margin-bottom:16px}
.sentence-controls{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:12px;margin-top:13px;padding-top:13px;border-top:1px solid #eef0f2}
.sentence-piece{display:flex;flex-direction:column;gap:7px}
.sentence-piece>span{font-size:11px;font-weight:700;color:#6b7280}
.scenario-line{margin:11px 2px 0;color:#475569;font-size:12px;font-weight:650}
.result-card-wide{padding:24px;margin-bottom:12px;border-color:#b7e7cf;background:linear-gradient(180deg,#fff 0%,#fbfffd 100%)}
.result-card-wide:before{content:none}
.result-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.result-copy{margin:9px 0 0;color:#596477;font-size:12px;line-height:1.55}
.freshness-badge{padding:6px 9px;border-radius:999px;font-size:9px;font-weight:800;white-space:nowrap}
.freshness-fresh{background:#ecfdf5;color:#047857}
.freshness-aging{background:#fff7ed;color:#b45309}
.freshness-stale{background:#fff1f2;color:#be123c}
.savings-headline{margin-top:12px;padding:10px 12px;border-radius:10px;background:#f8fafc;color:#475569;font-size:12px}
.savings-headline strong{color:#047857}
.result-actions{display:flex;gap:8px;margin-top:14px}
.soft-button{border:1px solid #dfe3e8;border-radius:9px;background:#fff;color:#475569;padding:8px 11px;font-size:10px;font-weight:750;cursor:pointer}
.soft-button:hover{background:#f8fafc}
.benchmark-strip{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:12px 16px;margin-bottom:16px}
.benchmark-strip>div{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.benchmark-strip .label{width:100%;margin-bottom:0}
.benchmark-rate{font-size:23px;letter-spacing:-.025em}
.direction-note{margin:5px 0 0;color:#047857;font-size:10px;font-weight:800}
.stale-notice{margin:12px 0 6px;padding:9px 11px;border:1px solid #fed7aa;border-radius:10px;background:#fff7ed;color:#9a3412;font-size:10px}
.stale-row{background:#fffdfb;opacity:.78}
.status-fresh{color:#047857;font-weight:750}
.status-aging{color:#b45309;font-weight:750}
.status-stale{color:#be123c;font-weight:750}
.freshness-text{font-weight:750}
.save-best{color:#047857}
.source-link{display:inline-grid;place-items:center;width:28px;height:28px;border:1px solid #e5e7eb;border-radius:8px;text-decoration:none}
.source-link:hover{background:#f8fafc;text-decoration:none}
.table-card table{min-width:820px}
.summary-grid{display:block;margin-bottom:0}
.reference-card{display:none}
@media(max-width:760px){
  .intro-compact{padding:24px 2px 15px}
  .decision-card{padding:12px}
  .sentence-controls{grid-template-columns:1fr}
  .trade-options{grid-template-columns:1fr}
  .result-card-wide{padding:16px}
  .result-head{flex-direction:column;gap:8px}
  .benchmark-strip{align-items:flex-start;flex-direction:column;gap:6px}
  .result-actions{flex-wrap:wrap}
  .result-actions .soft-button{flex:1}
}


/* ======================================================================
   Retro form theme — inspired by utilitarian old-school web forms
   ====================================================================== */
:root{
  --retro-bg:#f4f4ef;
  --retro-paper:#fff;
  --retro-ink:#111;
  --retro-muted:#5e5e5e;
  --retro-blue:#2f80ed;
  --retro-blue-dark:#1768c5;
  --retro-green:#1f9d55;
  --retro-yellow:#fff4b8;
  --retro-red:#cf2e2e;
  --retro-border:#111;
  --retro-shadow:3px 3px 0 #111;
}
*{box-sizing:border-box}
body{background:var(--retro-bg);color:var(--retro-ink);font-family:Arial,Helvetica,sans-serif}
.app{width:min(1180px,calc(100% - 32px));margin:0 auto}
.topbar{height:58px;border-bottom:2px solid #111;background:transparent}
.brand{color:#111;font-weight:700;text-decoration:none}
.brand-mark{width:30px;height:30px;border:2px solid #111;border-radius:3px;background:#111;color:#fff;box-shadow:2px 2px 0 #a9a9a9}
.checked{color:#555;font-size:12px}
.intro,.intro-compact{animation:none;padding:26px 0 20px;max-width:none}
.retro-hero h1{margin:0 0 8px;font-size:clamp(30px,4.2vw,50px);line-height:1;letter-spacing:-.04em}
.hero-sub{margin:0 0 18px;color:#555;font-size:14px}
.eyebrow,.label{color:#555;font-size:10px;font-weight:700;letter-spacing:.12em}

.card,.sentence-builder{
  background:var(--retro-paper);
  border:2px solid var(--retro-border);
  border-radius:2px;
  box-shadow:var(--retro-shadow);
}
.sentence-builder{padding:18px;margin-top:16px}
.sentence-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:18px;line-height:1.4}
.sentence-text{white-space:nowrap}
.retro-select,.retro-amount{
  height:38px;
  border:2px solid #111;
  border-radius:0;
  background:#fff;
  color:#111;
  box-shadow:none;
  font:700 14px Arial,Helvetica,sans-serif;
}
.retro-select{padding:0 30px 0 9px}
.role-select{min-width:175px}
.action-select{min-width:82px}
.currency-select{min-width:195px}
.retro-amount{display:flex;align-items:center;min-width:180px;overflow:hidden}
.retro-amount input{width:118px;height:100%;border:0;outline:0;padding:0 9px;font:700 15px Arial,Helvetica,sans-serif;background:#fff}
.retro-amount strong{padding:0 9px;border-left:1px solid #111;font-size:11px}
.retro-primary{
  min-height:38px;
  padding:0 18px;
  border:2px solid #111;
  border-radius:0;
  background:var(--retro-blue);
  color:#fff;
  box-shadow:var(--retro-shadow);
  font:700 13px Arial,Helvetica,sans-serif;
  cursor:pointer;
}
.retro-primary:hover{background:var(--retro-blue-dark)}
.retro-primary:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #111}
.retro-radio-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:15px;padding-top:13px;border-top:1px solid #777}
.radio-label{font-size:12px;font-weight:700}
.retro-radio{
  display:inline-flex;align-items:center;gap:7px;
  padding:0;border:0;background:transparent;color:#111;
  font:14px Arial,Helvetica,sans-serif;cursor:pointer
}
.radio-dot{width:13px;height:13px;border:2px solid #111;border-radius:50%;background:#fff;position:relative}
.retro-radio.active .radio-dot:after{content:"";position:absolute;inset:2px;border-radius:50%;background:#111}
.scenario-line{margin:11px 0 0;color:#444;font-size:12px;font-weight:400}

.loading,.alert{border:2px solid #111;border-radius:0;box-shadow:2px 2px 0 #111}
.alert{background:#fff0f0;color:#111}
.result-card-wide,.benchmark-strip,.chart-card,.table-card{border:2px solid #111;border-radius:2px;box-shadow:var(--retro-shadow);background:#fff}
.result-card-wide{padding:22px;margin-bottom:16px}
.result-card-wide:before{content:none}
.result-head{align-items:flex-start}
.best-line h2{font-size:24px;color:#111}
.result{font-size:clamp(34px,5vw,52px);color:#111}
.result-copy{color:#444}
.pill,.freshness-badge,.best-chip,.rank,.top-rank{
  border:1px solid #111!important;
  border-radius:999px!important;
  box-shadow:none!important;
}
.freshness-fresh{background:#d8f6df;color:#111}
.freshness-aging{background:#fff0ae;color:#111}
.freshness-stale{background:#ffd6d6;color:#111}
.savings-headline{border:1px solid #111;border-radius:0;background:#f7f7f2;color:#111}
.savings-headline strong{color:#111}
.soft-button,.legend-toggle{
  border:2px solid #111!important;
  border-radius:0!important;
  background:#fff!important;
  color:#111!important;
  box-shadow:2px 2px 0 #111;
  font-weight:700;
}
.soft-button:hover,.legend-toggle:hover{background:#eaf3ff!important}
.soft-button:active,.legend-toggle:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #111}
.benchmark-strip{padding:12px 16px}
.benchmark-rate{font-size:24px}
.top-three{gap:9px}
.top-bank-row{
  border:1px solid #111;
  border-radius:0;
  background:#fff;
  box-shadow:none;
}
.top-bank-row:hover{transform:none;box-shadow:none}
.top-bank-best{background:#e8f5ff;border-width:2px}
.top-bank-name strong,.top-bank-diff{color:#111}
.top-bank-best .top-bank-diff{color:#111}

.segmented,.segmented.compact{background:#ecece7;border:1px solid #111;border-radius:0;padding:2px;box-shadow:none}
.segmented button{border-radius:0;color:#111;font-weight:700}
.segmented button.active{background:#fff;border:1px solid #111;box-shadow:none;color:#111}
.direction-note{color:#111}
.legend-item,.bot-indicator-key{
  border:1px solid #111;
  border-radius:0;
  background:#fff;
}
.chart{background:#fff;border-top:1px solid #999}
.grid-line,.hour-guide{stroke:#deded8}
.axis-label{fill:#555}
.tooltip{background:#111;border:2px solid #111;border-radius:0;box-shadow:3px 3px 0 #777}
.spread-band{fill:rgba(47,128,237,.08)}
.table-scroll{border-top:2px solid #111}
table{border-collapse:collapse}
th{background:#efefe9;color:#111;border-bottom:2px solid #111}
th,td{border-right:1px solid #b9b9b2;border-bottom:1px solid #c9c9c2}
th:last-child,td:last-child{border-right:0}
.best-row{background:#e8f5ff}
.stale-row{background:#f6f2e9;opacity:.75}
.bank-icon-wrap{border:1px solid #111;border-radius:2px;box-shadow:none}
.source-link{border:1px solid #111;border-radius:0;background:#fff;color:#111}
.source-link:hover{background:#eaf3ff}
.stale-notice{border:2px solid #111;border-radius:0;background:#fff4b8;color:#111}
.footnote{color:#555}
.chart-card,.table-card{padding:20px}
.section-head h2{color:#111}

@media(max-width:900px){
  .sentence-line{font-size:16px}
  .role-select,.currency-select{min-width:150px}
}
@media(max-width:760px){
  .app{width:min(100% - 18px,1180px)}
  .topbar{height:54px}
  .intro,.intro-compact{padding:20px 0 14px}
  .retro-hero h1{font-size:34px}
  .sentence-builder{padding:14px}
  .sentence-line{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .sentence-text{display:none}
  .retro-select,.retro-amount,.retro-primary{width:100%;min-width:0}
  .retro-amount input{width:100%;flex:1}
  .retro-primary{grid-column:1/-1}
  .retro-radio-row{gap:12px}
  .result-card-wide,.chart-card,.table-card{padding:14px}
  .benchmark-strip{align-items:flex-start}
}
@media(max-width:460px){
  .sentence-line{grid-template-columns:1fr}
  .retro-primary{grid-column:auto}
  .retro-radio-row{align-items:flex-start;flex-direction:column;gap:9px}
}

/* Verification-aware freshness + resilient bank logos */
.bank-icon-wrap{position:relative}
.bank-icon-fallback{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:8px;font-weight:900;letter-spacing:-.02em;color:#111;background:#fff;
}
.bank-icon-small .bank-icon-fallback{font-size:6.5px}
.bank-icon{position:relative;z-index:1;background:#fff}
.freshness-text.freshness-fresh,.status-fresh{color:#176b3a}
.freshness-text.freshness-aging,.status-aging{color:#9a5b00}
.freshness-text.freshness-stale,.status-stale{color:#b42318}


/* 2026-09-30 compact dashboard iteration */
.retro-hero{padding-bottom:14px}
.sentence-builder{padding:14px 16px;margin-top:14px}
.sentence-line{gap:9px}
.builder-secondary{
  display:grid;
  grid-template-columns:auto minmax(220px,1fr) auto;
  align-items:center;
  gap:16px;
  margin-top:12px;
  padding-top:11px;
  border-top:1px solid #777;
}
.reverse-mode{display:flex;align-items:center;gap:0;white-space:nowrap}
.reverse-side,.reverse-button{
  min-height:32px;
  border:1px solid #111;
  background:#fff;
  color:#111;
  font:700 11px Arial,Helvetica,sans-serif;
  cursor:pointer;
}
.reverse-side{padding:0 12px}
.reverse-side.active{background:#e8f2ff;box-shadow:inset 0 -2px 0 #2f80ed}
.reverse-button{width:38px;border-left:0;border-right:0;font-size:17px;font-weight:400}
.reverse-button:hover{background:#eef6ff}
.reverse-mode .radio-label{margin-right:9px}
.builder-secondary .scenario-line{margin:0;padding-left:14px;border-left:1px solid #aaa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quick-best{
  display:flex;align-items:baseline;gap:7px;
  padding:7px 10px;border:1px solid #111;background:#eef6ff;
  white-space:nowrap;
}
.quick-best span{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.quick-best strong{font-size:11px}
.quick-best b{font-size:13px;color:#0a58ca}

.compact-dashboard{
  display:grid;
  grid-template-columns:minmax(330px,1.05fr) minmax(220px,.72fr) minmax(430px,1.45fr);
  gap:12px;
  align-items:stretch;
  margin-bottom:14px;
}
.compact-dashboard>.card{margin:0;min-width:0}
.compact-result-card,.benchmark-card,.compact-chart-card{padding:14px!important}
.compact-card-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.best-choice{display:flex;align-items:center;gap:10px;padding:10px;border:2px solid #2f80ed;background:#f5f9ff}
.best-bank-icon .bank-icon-wrap{width:42px;height:42px;flex-basis:42px}
.best-bank-main{min-width:0}
.choice-indicator{
  display:inline-block;margin-bottom:2px;
  padding:2px 5px;border:1px solid #111;background:#dcecff;
  font-size:7px;font-weight:900;letter-spacing:.08em;
}
.compact-result-card .best-line{display:flex;align-items:center;gap:7px;min-width:0}
.compact-result-card .best-line h2{margin:0;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.compact-result-card .pill{font-size:7px;padding:2px 5px}
.best-result-row{
  display:grid;grid-template-columns:1.35fr .85fr;gap:0;
  margin-top:10px;border:1px solid #111;background:#fff;
}
.best-total,.best-rate-metric{padding:9px 10px}
.best-rate-metric{border-left:1px solid #111}
.best-total>span,.best-rate-metric>span{display:block;font-size:8px;font-weight:800;letter-spacing:.08em;color:#555}
.compact-result-card .result{
  display:block;margin:2px 0 0;
  font-size:clamp(26px,2.4vw,36px);line-height:1;color:#111;
}
.best-total small{display:block;margin-top:3px;color:#555;font-size:9px}
.best-rate-metric strong{display:block;margin-top:7px;font-size:17px}
.compact-result-card .savings-headline{
  display:flex;justify-content:space-between;gap:8px;align-items:center;
  margin-top:8px;padding:7px 9px;font-size:9px;
}
.compact-result-card .savings-headline strong{font-size:13px;color:#08783f}
.compact-note{display:flex;gap:7px;align-items:center;margin-top:7px;color:#555;font-size:9px}
.compact-note strong{color:#111}
.compact-result-card .result-actions{margin-top:8px}
.compact-result-card .soft-button{padding:6px 9px;font-size:9px}

.benchmark-card{display:flex;flex-direction:column}
.benchmark-main{margin-top:6px;padding:12px 10px;border:1px solid #111;background:#f6f6f2}
.benchmark-main .benchmark-rate{display:block;font-size:30px;line-height:1}
.benchmark-main span{display:block;margin-top:5px;font-size:10px;color:#555}
.benchmark-card .muted{margin-top:auto;padding-top:9px;font-size:9px;line-height:1.45}

.compact-chart-card .section-head{align-items:flex-start;margin-bottom:0}
.compact-chart-card .section-head h2{font-size:15px;margin-top:3px}
.compact-chart-card .direction-note{font-size:8px;margin-top:2px}
.compact-chart-card .segmented.compact{width:126px;height:30px}
.compact-chart-card .segmented.compact button{font-size:9px}
.compact-chart-card .legend{padding:5px 0 2px;gap:4px}
.compact-chart-card .chart-key{font-size:7px;gap:7px}
.compact-chart-card .legend-toggle{padding:3px 6px;font-size:7px}
.compact-chart-card .chart{height:210px;margin-top:0;border-top:0}
.compact-chart-card .chart-help{display:none}

.compact-table-card{padding:14px!important}
.compact-table-card .section-head{margin-bottom:8px}
.compact-table-card .section-head h2{font-size:20px}
.compact-table-card .stale-notice{margin:6px 0 8px;padding:7px 9px}
.compact-table-card th,.compact-table-card td{padding:9px 8px}

@media(max-width:1050px){
  .compact-dashboard{grid-template-columns:1fr .72fr}
  .compact-chart-card{grid-column:1/-1}
  .compact-chart-card .chart{height:240px}
  .builder-secondary{grid-template-columns:1fr auto}
  .builder-secondary .scenario-line{grid-column:1/2}
  .quick-best{grid-column:2/3;grid-row:1/3}
}
@media(max-width:760px){
  .builder-secondary{display:flex;flex-direction:column;align-items:stretch;gap:8px}
  .builder-secondary .scenario-line{border-left:0;padding-left:0;white-space:normal}
  .reverse-mode{width:100%}
  .reverse-mode .radio-label{display:none}
  .reverse-side{flex:1}
  .quick-best{justify-content:space-between}
  .compact-dashboard{grid-template-columns:1fr}
  .compact-chart-card{grid-column:auto}
  .best-result-row{grid-template-columns:1fr 1fr}
  .compact-chart-card .chart{height:230px}
}
@media(max-width:460px){
  .best-result-row{grid-template-columns:1fr}
  .best-rate-metric{border-left:0;border-top:1px solid #111}
}


/* ======================================================================
   2026-09-30 v3: real one-line builder + answer strip + full-width chart
   ====================================================================== */
.app{width:min(1420px,calc(100% - 28px))}
.retro-hero{padding:22px 0 14px}
.retro-hero h1{font-size:clamp(38px,4.2vw,62px);margin-bottom:6px}
.hero-sub{margin-bottom:14px}

.sentence-builder-v3{padding:14px 16px}
.sentence-line-v3{
  display:grid!important;
  grid-template-columns:auto minmax(150px,1.15fr) auto 88px minmax(190px,1.25fr) minmax(360px,1.9fr) 105px;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap!important;
  font-size:17px;
}
.sentence-line-v3 .retro-select{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:40px;
}
.sentence-line-v3 .sentence-text{display:block!important;white-space:nowrap}
.sentence-line-v3 .retro-primary{width:100%;height:40px;min-height:40px;padding:0 12px}
.role-select,.action-select,.currency-select{min-width:0!important}

.exchange-pair{
  display:grid;
  grid-template-columns:minmax(150px,1fr) 42px minmax(160px,1fr);
  align-items:stretch;
  min-width:0;
}
.exchange-box{
  height:40px;
  border:2px solid #111;
  background:#fff;
  display:flex;
  align-items:center;
  min-width:0;
}
.exchange-box input{
  width:100%;
  min-width:0;
  height:100%;
  border:0;
  outline:0;
  padding:0 10px;
  background:transparent;
  color:#111;
  font:700 15px Arial,Helvetica,sans-serif;
}
.exchange-box>span{
  flex:1;
  min-width:0;
  padding:0 10px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:15px;
  font-weight:800;
}
.exchange-box strong{
  flex:0 0 auto;
  padding:0 9px;
  border-left:1px solid #777;
  font-size:10px;
}
.exchange-output{background:#f1f6ff}
.exchange-reverse{
  height:40px;
  border:2px solid #111;
  border-left:0;
  border-right:0;
  background:#fff;
  font-size:20px;
  cursor:pointer;
}
.exchange-reverse:hover{background:#dfeeff}
.exchange-reverse:active{background:#cfe3ff}
.exchange-pair.is-thb-input .exchange-input{background:#f1f6ff}
.exchange-pair.is-thb-input .exchange-output{background:#fff}

.scenario-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:11px;
  padding-top:9px;
  border-top:1px solid #888;
}
.scenario-row .scenario-line{margin:0;font-size:11px}
.scenario-hint{color:#666;font-size:10px;white-space:nowrap}

.answer-strip{
  display:grid;
  grid-template-columns:minmax(260px,1.25fr) minmax(230px,1fr) minmax(150px,.65fr) minmax(150px,.65fr) auto auto;
  align-items:stretch;
  gap:0;
  margin:0 0 14px;
  padding:0!important;
  overflow:hidden;
}
.answer-strip>div{padding:13px 14px;border-right:1px solid #aaa}
.answer-bank{
  display:grid;
  grid-template-columns:auto auto 1fr;
  grid-template-rows:auto 1fr;
  align-items:center;
  gap:4px 10px;
  background:#eef6ff;
}
.answer-kicker{
  grid-column:1/-1;
  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
  color:#174ea6;
}
.answer-bank-icon .bank-icon-wrap{width:38px;height:38px;flex-basis:38px}
.answer-bank-copy{min-width:0}
.answer-bank-copy strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:16px;
}
.answer-verified{display:block;margin-top:2px;color:#555;font-size:9px}
.answer-total,.answer-rate,.answer-saving{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.answer-total>span,.answer-rate>span,.answer-saving>span{
  font-size:8px;
  font-weight:900;
  letter-spacing:.09em;
  color:#555;
}
.answer-total strong{
  display:block;
  margin-top:2px;
  font-size:clamp(27px,2.3vw,38px);
  line-height:1;
}
.answer-total small{margin-top:4px;color:#555;font-size:9px}
.answer-rate strong{margin-top:5px;font-size:16px}
.answer-saving strong{margin-top:5px;font-size:16px;color:#08783f}
.answer-meta{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:7px;
  min-width:150px;
}
.answer-meta .freshness-badge{align-self:flex-start;font-size:8px;padding:4px 6px}
.bot-inline{font-size:9px;color:#555;white-space:nowrap}
.answer-compare-button{
  align-self:center;
  margin:0 12px;
  padding:8px 10px!important;
  white-space:nowrap;
}

.full-chart-card{
  width:100%;
  padding:16px!important;
  margin-bottom:14px!important;
}
.full-chart-card .section-head{margin-bottom:3px}
.full-chart-card .section-head h2{font-size:18px}
.full-chart-card .chart{height:330px!important;margin-top:2px}
.full-chart-card .legend{padding:6px 0 4px}
.full-chart-card .chart-help{margin-top:5px}

.compact-table-card{margin-bottom:14px}

@media(max-width:1180px){
  .sentence-line-v3{
    grid-template-columns:auto minmax(145px,1fr) auto 82px minmax(165px,1fr);
  }
  .sentence-line-v3 .exchange-pair{grid-column:1/5}
  .sentence-line-v3 .retro-primary{grid-column:5/6}
  .answer-strip{
    grid-template-columns:minmax(250px,1.3fr) minmax(220px,1fr) minmax(140px,.7fr) minmax(140px,.7fr);
  }
  .answer-meta{border-top:1px solid #aaa}
  .answer-compare-button{margin:9px 12px;align-self:center}
}
@media(max-width:900px){
  .sentence-line-v3{
    grid-template-columns:auto minmax(160px,1fr) auto 90px;
  }
  .sentence-line-v3 .currency-select{grid-column:1/3}
  .sentence-line-v3 .exchange-pair{grid-column:3/5}
  .sentence-line-v3 .retro-primary{grid-column:4/5}
  .answer-strip{grid-template-columns:1fr 1fr}
  .answer-strip>div{border-bottom:1px solid #aaa}
  .answer-bank{grid-column:1/-1}
  .answer-meta{border-right:1px solid #aaa}
  .answer-compare-button{justify-self:stretch}
}
@media(max-width:760px){
  .app{width:min(100% - 16px,1420px)}
  .retro-hero h1{font-size:36px}
  .sentence-line-v3{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}
  .sentence-line-v3 .sentence-text{display:none!important}
  .sentence-line-v3 .role-select,
  .sentence-line-v3 .action-select,
  .sentence-line-v3 .currency-select,
  .sentence-line-v3 .exchange-pair,
  .sentence-line-v3 .retro-primary{grid-column:auto}
  .sentence-line-v3 .currency-select{grid-column:1/-1}
  .sentence-line-v3 .exchange-pair{grid-column:1/-1}
  .sentence-line-v3 .retro-primary{grid-column:1/-1}
  .scenario-row{align-items:flex-start;flex-direction:column;gap:5px}
  .scenario-hint{white-space:normal}
  .answer-strip{grid-template-columns:1fr}
  .answer-bank{grid-column:auto}
  .answer-strip>div{border-right:0}
  .answer-meta{border-right:0}
  .answer-compare-button{margin:10px}
  .full-chart-card .chart{height:280px!important}
}

/* 2026-09-30 simplified intent builder */
.sentence-line-v3{
  grid-template-columns:auto minmax(150px,.85fr) auto minmax(210px,1.15fr) minmax(390px,1.9fr) 126px!important;
}
.sentence-line-v3 .action-select{min-width:150px!important}
.sentence-line-v3 .currency-select{min-width:210px!important}
.sentence-line-v3 .retro-primary{white-space:nowrap}
.scenario-row{justify-content:flex-start}
.scenario-hint{margin-left:auto}

@media(max-width:1180px){
  .sentence-line-v3{
    grid-template-columns:auto minmax(150px,.8fr) auto minmax(190px,1fr)!important;
  }
  .sentence-line-v3 .exchange-pair{grid-column:1/4}
  .sentence-line-v3 .retro-primary{grid-column:4/5}
}
@media(max-width:900px){
  .sentence-line-v3{grid-template-columns:auto minmax(170px,1fr) auto minmax(180px,1fr)!important}
  .sentence-line-v3 .currency-select{grid-column:auto!important}
  .sentence-line-v3 .exchange-pair{grid-column:1/4!important}
  .sentence-line-v3 .retro-primary{grid-column:4/5!important}
}
@media(max-width:760px){
  .sentence-line-v3{grid-template-columns:1fr 1fr!important}
  .sentence-line-v3 .action-select,
  .sentence-line-v3 .currency-select{grid-column:auto!important}
  .sentence-line-v3 .exchange-pair,
  .sentence-line-v3 .retro-primary{grid-column:1/-1!important}
}

/* Keep the chart focused on plotted lines; the spread band no longer controls y-scale. */
.full-chart-card .chart{min-height:330px}


/* ======================================================================
   2026-09-30 polish: clear input/output affordance + unified type scale
   ====================================================================== */
:root{
  --type-micro:11px;
  --type-small:13px;
  --type-body:15px;
  --type-control:15px;
  --type-subhead:18px;
  --type-title:24px;
  --type-hero:clamp(42px,4.5vw,68px);
}

body{font-size:var(--type-body);line-height:1.35}
.brand{font-size:var(--type-body)}
.checked{font-size:var(--type-small)}
.eyebrow,.label{font-size:var(--type-micro);letter-spacing:.11em}
.retro-hero h1{
  font-size:var(--type-hero)!important;
  line-height:.98;
  letter-spacing:-.045em;
}
.hero-highlight{
  position:relative;
  display:inline-block;
  z-index:0;
}
.hero-highlight:after{
  content:"";
  position:absolute;
  left:-2%;
  right:-2%;
  bottom:.06em;
  height:.18em;
  background:#ffb52e;
  z-index:-1;
  transform:rotate(-1.2deg);
  border-radius:999px;
}
.hero-sub{font-size:var(--type-body);color:#4d4d4d}

.sentence-line-v3{font-size:var(--type-subhead)!important}
.sentence-line-v3 .retro-select,
.exchange-box input,
.retro-primary{
  font-size:var(--type-control)!important;
}
.exchange-box strong,
.exchange-output strong{font-size:var(--type-micro)!important}
.scenario-row .scenario-line,
.scenario-hint{font-size:var(--type-small)!important}

/* Only the editable amount looks like an input. The calculated side is plain text. */
.exchange-pair{
  grid-template-columns:minmax(155px,1fr) 46px minmax(170px,1fr)!important;
  align-items:center!important;
  column-gap:0;
}
.exchange-input{
  background:#fff!important;
  border:2px solid #111!important;
  box-shadow:none!important;
}
.exchange-reverse{
  height:40px;
  width:46px;
  border:2px solid #111!important;
  margin:0 8px;
  background:#fff!important;
  box-shadow:2px 2px 0 #111;
  border-radius:0;
}
.exchange-reverse:hover{background:#dfeeff!important}
.exchange-reverse:active{
  transform:translate(1px,1px);
  box-shadow:1px 1px 0 #111;
}
.exchange-output{
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:6px;
  padding:0 4px;
  color:#111;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  white-space:nowrap;
}
.exchange-output>span#convertedAmount{
  font-size:var(--type-subhead)!important;
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
}
.exchange-output strong{
  border:0!important;
  padding:0!important;
  color:#555;
  font-weight:800;
}
.exchange-approx{
  color:#777;
  font-size:var(--type-body);
  font-weight:700;
}

/* Answer strip typography: one consistent hierarchy instead of many tiny sizes. */
.answer-kicker,
.answer-total>span,
.answer-rate>span,
.answer-saving>span{
  font-size:var(--type-micro)!important;
}
.answer-bank-copy strong{font-size:var(--type-subhead)!important}
.answer-verified,
.answer-total small,
.bot-inline,
.answer-meta .freshness-badge{font-size:var(--type-micro)!important}
.answer-total strong{font-size:clamp(28px,2.4vw,38px)!important}
.answer-rate strong,
.answer-saving strong{font-size:var(--type-subhead)!important}
.answer-compare-button{font-size:var(--type-small)!important}

/* Chart typography */
.full-chart-card .section-head h2{font-size:var(--type-title)!important}
.direction-note{font-size:var(--type-small)!important}
.chart-key,
.legend-toggle,
.bot-indicator-key b,
.bot-indicator-key small{font-size:var(--type-micro)!important}
.axis-label{font-size:9px}
.rail-label-name{font-size:9px}
.rail-label-rate{font-size:8px}
.chart-help{font-size:var(--type-micro)!important}

/* Table typography */
.compact-table-card .section-head h2{font-size:var(--type-title)!important}
table{font-size:var(--type-small)}
th{font-size:var(--type-micro);letter-spacing:.05em}
.bank strong{font-size:var(--type-small)}
.bank small,.muted,.stale-notice{font-size:var(--type-micro)!important}
.rank,.best-chip{font-size:var(--type-micro)!important}
.source-link{font-size:var(--type-body)}

@media(max-width:760px){
  .retro-hero h1{font-size:42px!important}
  .sentence-line-v3{font-size:var(--type-body)!important}
  .exchange-output>span#convertedAmount{font-size:var(--type-body)!important}
}
\n
/* 2026-09-30 chart + bank logo cleanup */
.bank-icon-wrap{
  width:38px!important;
  height:32px!important;
  flex:0 0 38px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden;
}
.bank-icon-small{
  width:24px!important;
  height:22px!important;
  flex-basis:24px!important;
}
.bank-icon{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  background:transparent!important;
}
.bank-icon-fallback{
  border:1px solid #111;
  background:#fff;
  font-size:8px!important;
}
.bank-icon-exim{
  width:48px!important;
  flex-basis:48px!important;
}
.bank-icon-exim.bank-icon-small{
  width:30px!important;
  flex-basis:30px!important;
}
.bank-icon-icbct .bank-icon,
.bank-icon-gsb .bank-icon,
.bank-icon-lh .bank-icon{width:94%!important;height:94%!important}
.bank-icon-exim .bank-icon{width:100%!important;height:84%!important}
.answer-bank-icon .bank-icon-wrap{
  width:44px!important;
  height:38px!important;
  flex-basis:44px!important;
}

.full-chart-card .legend{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  border-bottom:1px solid #bbb;
  padding:7px 0 9px!important;
}
.chart-series-legend{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.chart-series-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 7px;
  border:1px solid #bbb;
  background:#fff;
  font-size:11px;
  line-height:1;
}
.chart-series-chip b{font-size:11px}
.chart-series-chip small{font-size:10px;color:#555}
.chart-series-chip em{font-size:9px;color:#777;font-style:normal}
.chart-series-dot,.tooltip-series-dot{
  display:inline-block;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--series-color);
  flex:0 0 auto;
}
.chart-bot-chip .chart-series-dot{
  width:14px;
  height:0;
  border-radius:0;
  border-top:2px dashed #94a3b8;
  background:transparent;
}
.tooltip-series-dot{width:7px;height:7px;margin-right:5px}

.spread-band,.label-connector,.rail-label{display:none!important}
.full-chart-card .chart{
  height:340px!important;
  margin-top:6px;
}
.series-line.compare-series{opacity:.72}
.series-line.best-series{stroke-width:3}
.series-line.bot-series{stroke-width:1.6;opacity:.8}
.grid-line{stroke:#d7d7d0}
.hour-guide{stroke:#e7e7e2}
.axis-label{fill:#555;font-size:10px}

@media(max-width:760px){
  .full-chart-card .chart{height:285px!important}
  .chart-series-chip{padding:3px 5px}
  .chart-series-chip b{font-size:10px}
  .chart-series-chip small{font-size:9px}
}

/* 2026-09-30 bank logo square enforcement + marker alignment */
.bank-icon-wrap{
  position:relative!important;
  width:34px!important;
  height:34px!important;
  flex:0 0 34px!important;
  aspect-ratio:1/1!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  border:1px solid #111!important;
  background:#fff!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.bank-icon-small{
  width:24px!important;
  height:24px!important;
  flex-basis:24px!important;
}
.answer-bank-icon .bank-icon-wrap{
  width:40px!important;
  height:40px!important;
  flex-basis:40px!important;
}
.bank-icon{
  position:relative!important;
  z-index:2!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  padding:4px!important;
  background:#fff!important;
  display:block!important;
}
.bank-icon-exim,
.bank-icon-exim.bank-icon-small{
  width:34px!important;
  height:34px!important;
  flex-basis:34px!important;
}
.bank-icon-exim.bank-icon-small{
  width:24px!important;
  height:24px!important;
  flex-basis:24px!important;
}
.bank-icon-exim .bank-icon{padding:5px!important}
.bank-icon-fallback{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  opacity:0!important;
  display:grid!important;
  place-items:center!important;
  background:#fff!important;
  color:#111!important;
  font-size:8px!important;
  font-weight:900!important;
}
.bank-icon-fallback-visible{opacity:1!important}

/* Exact chart geometry: solid points centered on their rate line. */
.chart svg{
  width:100%;
  height:100%;
  display:block;
}
.update-dot,
.latest-dot{
  fill:var(--series-color)!important;
  stroke:#fff!important;
  stroke-width:1.7!important;
  vector-effect:non-scaling-stroke;
}
.update-dot.changed-dot,
.update-dot.best-update-dot,
.update-dot.changed-dot.best-update-dot{
  stroke-width:2!important;
}
.series-line{
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* 2026-09-30 bilingual TH/EN toggle */
.top-actions{display:flex;align-items:center;gap:10px}
.language-toggle{
  min-width:42px;height:30px;padding:0 9px;
  border:2px solid #111;background:#fff;color:#111;
  box-shadow:2px 2px 0 #111;border-radius:0;
  font:800 12px Arial,Helvetica,sans-serif;cursor:pointer;
}
.language-toggle:hover{background:#e8f2ff}
.language-toggle:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #111}
html[lang="th"] body{font-family:Arial,"Noto Sans Thai","Tahoma",sans-serif}
html[lang="th"] .retro-hero h1{letter-spacing:-.025em}
html[lang="th"] .eyebrow{letter-spacing:.08em}
html[lang="th"] .sentence-line-v3{font-size:17px!important}
html[lang="th"] .retro-select,
html[lang="th"] .retro-primary{font-weight:700}
@media(max-width:760px){
  .top-actions{gap:7px}
  .language-toggle{min-width:40px;height:28px}
}


/* 2026-09-30 Your Banks */
.bank-scope-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:10px;padding-top:10px;border-top:1px solid #aaa;
}
.bank-scope-label{font-size:var(--type-small);font-weight:800}
.bank-scope-switch{
  display:inline-flex;border:1px solid #111;background:#eee;
}
.bank-scope-switch button{
  min-height:32px;padding:0 12px;border:0;border-right:1px solid #111;
  background:#eee;color:#111;font:700 var(--type-small) Arial,Helvetica,sans-serif;cursor:pointer;
}
.bank-scope-switch button:last-child{border-right:0}
.bank-scope-switch button.active{background:#fff;box-shadow:inset 0 -3px 0 #2f80ed}
.manage-banks-button{
  display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 10px;
  border:1px solid #111;background:#fff;color:#111;cursor:pointer;
  font:700 var(--type-small) Arial,Helvetica,sans-serif;
}
.manage-banks-button:hover{background:#eef6ff}
.manage-banks-button strong{
  min-width:20px;height:20px;padding:0 5px;display:grid;place-items:center;
  border:1px solid #111;background:#eef6ff;font-size:10px;
}
.bank-picker{
  margin-top:10px;padding:12px;border:2px solid #111;background:#fff;
  box-shadow:3px 3px 0 #111;
}
.bank-picker-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.bank-picker-head>div{display:flex;flex-direction:column;gap:2px}
.bank-picker-head strong{font-size:var(--type-subhead)}
.bank-picker-head span{font-size:var(--type-small);color:#555}
.bank-picker-close{
  width:30px;height:30px;border:1px solid #111;background:#fff;font-size:20px;line-height:1;cursor:pointer;
}
.bank-picker-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;
  max-height:260px;overflow:auto;padding:1px;
}
.bank-choice{
  min-width:0;display:grid;grid-template-columns:auto 24px 1fr;align-items:center;gap:7px;
  padding:7px;border:1px solid #bbb;background:#fafafa;cursor:pointer;
}
.bank-choice:has(input:checked){border:2px solid #2f80ed;background:#eef6ff;padding:6px}
.bank-choice input{width:16px;height:16px;margin:0;accent-color:#2f80ed}
.bank-choice>span{min-width:0}
.bank-choice strong{display:block;font-size:var(--type-small);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bank-choice small{display:block;color:#777;font-size:var(--type-micro)}
.bank-choice .bank-icon-wrap{width:24px!important;height:24px!important;flex-basis:24px!important}
.bank-picker-actions{
  display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid #bbb;
}
.bank-picker-link{
  min-height:32px;padding:0 9px;border:1px solid #111;background:#fff;color:#111;
  font:700 var(--type-small) Arial,Helvetica,sans-serif;cursor:pointer;
}
.bank-picker-done{width:auto!important;min-width:90px!important;height:34px!important}
.bank-picker-message{
  margin:9px 0 0;padding:7px 9px;border:1px solid #111;background:#fff4b8;
  font-size:var(--type-small);font-weight:700;
}
@media(max-width:900px){
  .bank-picker-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .bank-scope-row{align-items:stretch}
  .bank-scope-label{width:100%}
  .bank-scope-switch{flex:1}
  .bank-scope-switch button{flex:1;padding:0 8px}
  .manage-banks-button{width:100%;justify-content:space-between}
  .bank-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:320px}
}
@media(max-width:430px){
  .bank-picker-grid{grid-template-columns:1fr}
}


/* 2026-09-30 Your Banks v2 — fewer controls, dropdown-like flow */
.bank-scope-row{
  gap:8px!important;
  align-items:center!important;
}
.bank-scope-switch{
  display:inline-flex!important;
  border:1px solid #111!important;
  background:#eee!important;
}
.bank-scope-switch button{
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  min-height:34px!important;
  padding:0 13px!important;
}
.bank-scope-switch button.active{
  background:#fff!important;
  box-shadow:inset 0 -3px 0 #2f80ed!important;
}
.bank-scope-switch #myBanksCount{
  min-width:18px;
  height:18px;
  padding:0 4px;
  display:grid;
  place-items:center;
  border:1px solid #111;
  background:#fff;
  font-size:9px;
  line-height:1;
}
.bank-scope-switch button.active #myBanksCount{background:#eef6ff}
.bank-scope-caret{
  font-size:10px;
  transform-origin:center;
  transition:transform .12s ease;
}
#myBanksButton[aria-expanded="true"] .bank-scope-caret{transform:rotate(180deg)}
.manage-banks-button{display:none!important}

.bank-picker{
  margin-top:8px!important;
  padding:10px!important;
  box-shadow:2px 2px 0 #111!important;
}
.bank-picker-head{margin-bottom:8px!important}
.bank-picker-head strong{font-size:var(--type-body)!important}
.bank-picker-head span{font-size:var(--type-small)!important}
.bank-picker-close{display:none!important}
.bank-picker-grid{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:6px!important;
  max-height:220px!important;
}
.bank-choice{
  grid-template-columns:auto 24px minmax(0,1fr)!important;
  gap:7px!important;
  min-height:48px!important;
  padding:6px 7px!important;
  background:#fff!important;
}
.bank-choice:has(input:checked){
  padding:5px 6px!important;
  background:#eef6ff!important;
}
.bank-choice strong{
  font-size:12px!important;
  line-height:1.2!important;
}
.bank-choice small{display:none!important}
.bank-picker-actions{
  justify-content:space-between!important;
  margin-top:8px!important;
  padding-top:8px!important;
}
.bank-picker-link{display:none!important}
.bank-picker-selection-summary{
  color:#555;
  font-size:var(--type-small);
}
.bank-picker-done{
  min-width:86px!important;
  height:32px!important;
  min-height:32px!important;
  padding:0 12px!important;
  font-size:var(--type-small)!important;
}
.bank-picker-message{display:none!important}

@media(max-width:1180px){
  .bank-picker-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(max-width:900px){
  .bank-picker-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:760px){
  .bank-scope-row{display:block!important}
  .bank-scope-label{display:block;margin-bottom:6px}
  .bank-scope-switch{width:100%!important}
  .bank-scope-switch button{flex:1!important;justify-content:center!important;padding:0 8px!important}
  .bank-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-height:300px!important}
}
@media(max-width:430px){
  .bank-picker-grid{grid-template-columns:1fr!important}
}


/* 2026-09-30 historical insights */
.insights-grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);
  gap:12px;
  margin:0 0 14px;
}
.insight-card{padding:16px!important;margin:0!important}
.insight-card-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px
}
.insight-card-head h2{margin:3px 0 0;font-size:var(--type-title);line-height:1.1}
.insight-scope{
  padding:4px 7px;border:1px solid #111;background:#f2f2ed;
  font-size:var(--type-micro);font-weight:800;white-space:nowrap
}
.winner-share-list{display:grid;gap:8px}
.winner-share-row{display:grid;gap:4px}
.winner-share-label{
  display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:7px;
  font-size:var(--type-small)
}
.winner-share-label strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.winner-share-label>span:last-child{font-weight:800}
.winner-other-dot{
  width:24px;height:24px;display:grid;place-items:center;border:1px solid #111;background:#fff;font-weight:900
}
.winner-share-track{height:8px;border:1px solid #111;background:#eee;overflow:hidden}
.winner-share-track i{display:block;height:100%;background:#2f80ed}
.insight-metrics{
  display:grid;grid-template-columns:repeat(3,1fr);
  margin-top:14px;border:1px solid #111
}
.insight-metrics>div{padding:10px;border-right:1px solid #111;min-width:0}
.insight-metrics>div:last-child{border-right:0}
.insight-metrics span{display:block;color:#555;font-size:var(--type-micro);font-weight:800}
.insight-metrics strong{
  display:block;margin-top:4px;font-size:var(--type-small);line-height:1.25;
  white-space:normal
}
.insight-note{margin:9px 0 0;color:#666;font-size:var(--type-micro);line-height:1.4}

.position-current{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding:10px 0 12px;border-bottom:1px solid #bbb
}
.position-current span{font-size:var(--type-small);color:#555;font-weight:800}
.position-current strong{font-size:var(--type-subhead)}
.range-copy{display:flex;justify-content:space-between;gap:12px;margin-top:13px;font-size:var(--type-small)}
.range-copy span{color:#555;font-weight:800}
.position-track{
  position:relative;height:24px;margin:8px 4px 0
}
.position-track-line{
  position:absolute;left:0;right:0;top:11px;height:3px;background:#111
}
.position-marker{
  position:absolute;top:4px;width:17px;height:17px;border-radius:50%;
  border:3px solid #111;background:#ffb52e;transform:translateX(-50%);
  transition:left .2s ease
}
.position-scale{display:flex;justify-content:space-between;color:#777;font-size:var(--type-micro)}
.position-percentile{
  margin:14px 0 0;padding:10px;border:2px solid #111;background:#eef6ff;
  font-size:var(--type-body);font-weight:800;line-height:1.35
}
@media(max-width:900px){
  .insights-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .insight-metrics{grid-template-columns:1fr}
  .insight-metrics>div{border-right:0;border-bottom:1px solid #111}
  .insight-metrics>div:last-child{border-bottom:0}
}


/* ======================================================================
   2026-09-30 density pass — more breathing room, less visual noise
   ====================================================================== */
.app{
  width:min(1380px,calc(100% - 48px))!important;
  padding-bottom:56px!important;
}
.topbar{margin-bottom:0}
.retro-hero{padding:32px 0 20px!important}
.hero-sub{margin-bottom:20px!important}

/* Preserve the retro character on the interaction surface, soften data cards. */
.sentence-builder{
  padding:20px!important;
  margin-top:18px!important;
}
#dashboard{
  display:flex;
  flex-direction:column;
  gap:24px;
}
#dashboard>.card,
#dashboard>.insights-grid{
  margin:0!important;
}
.card{
  border-width:1px!important;
  box-shadow:2px 2px 0 rgba(17,17,17,.82)!important;
}
.answer-strip{
  border-width:1px!important;
  margin:0!important;
}
.answer-strip>div{
  padding:17px 18px!important;
  border-right:1px solid #c8c8c0!important;
}
.answer-bank{padding-left:18px!important}
.answer-bank-copy strong{font-size:19px!important}
.answer-total strong{font-size:clamp(30px,2.6vw,40px)!important}
.answer-meta{min-width:140px!important}
.answer-meta .freshness-badge{
  border:0!important;
  padding:3px 0!important;
  background:transparent!important;
}
.answer-compare-button{margin:0 16px!important}

/* Chart gets visual priority and more breathing room. */
.full-chart-card{
  padding:22px 24px!important;
  margin:0!important;
}
.full-chart-card .section-head{margin-bottom:10px!important}
.full-chart-card .legend{
  margin-top:8px!important;
  padding:8px 0 12px!important;
  border-bottom:1px solid #d7d7cf!important;
}
.full-chart-card .chart{
  height:360px!important;
  margin-top:12px!important;
}
.chart-series-chip{
  border-color:#d2d2ca!important;
  padding:5px 8px!important;
}
.chart-help{
  margin-top:10px!important;
  line-height:1.45!important;
}

/* Hollow circles on the rate line, with a small core on the latest point. */
.update-dot,
.latest-dot{
  fill:#fff!important;
  stroke:var(--series-color)!important;
  stroke-width:2.4!important;
  vector-effect:non-scaling-stroke;
}
.update-dot.changed-dot,
.update-dot.best-update-dot,
.update-dot.changed-dot.best-update-dot{
  stroke-width:2.8!important;
}
.latest-dot{
  stroke-width:3!important;
  filter:drop-shadow(0 0 1px rgba(255,255,255,.9));
}
.latest-core{
  fill:var(--series-color)!important;
  stroke:#fff!important;
  stroke-width:.8!important;
  vector-effect:non-scaling-stroke;
}
.assumed-dot{stroke-dasharray:2 1}

/* Insight cards: clearer hierarchy, less boxed-in feeling. */
.insights-grid{
  gap:20px!important;
  margin:0!important;
}
.insight-card{
  padding:22px!important;
  box-shadow:2px 2px 0 rgba(17,17,17,.72)!important;
}
.insight-card-head{margin-bottom:16px!important}
.insight-card-head h2{font-size:22px!important}
.winner-share-list{gap:11px!important}
.winner-share-track{
  height:7px!important;
  border-color:#bcbcb4!important;
}
.insight-metrics{
  margin-top:18px!important;
  border:0!important;
  border-top:1px solid #c8c8c0!important;
}
.insight-metrics>div{
  padding:14px 14px 4px!important;
  border-right:1px solid #d8d8d0!important;
}
.insight-metrics>div:first-child{padding-left:0!important}
.insight-metrics>div:last-child{padding-right:0!important;border-right:0!important}
.insight-note{margin-top:12px!important}
.position-current{padding:8px 0 16px!important}
.position-track{margin-top:14px!important}
.position-percentile{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:12px;
  margin-top:18px!important;
  padding:12px 14px!important;
  border-width:1px!important;
  background:#f4f8ff!important;
}
.position-percentile strong{
  font-size:28px;
  line-height:1;
  color:#174ea6;
}
.position-percentile span{
  font-size:12px;
  line-height:1.35;
  font-weight:700;
}

/* Table: remove spreadsheet-like vertical grid, keep row scanning easy. */
.compact-table-card{
  padding:22px 24px!important;
  margin:0!important;
}
.compact-table-card .section-head{margin-bottom:14px!important}
.table-scroll{margin:10px 0 0!important}
table{border-collapse:separate!important;border-spacing:0!important}
th,td{
  padding:12px 10px!important;
  border-right:0!important;
  border-left:0!important;
  border-bottom:1px solid #deded7!important;
}
thead th{
  border-top:1px solid #c8c8c0!important;
  border-bottom:1px solid #bdbdb5!important;
  background:#f5f5f0!important;
}
tbody tr{background:#fff}
tbody tr:hover{background:#f8fbff!important}
.best-row{background:#eef7ff!important}
.bank{gap:11px!important}
.bank small{margin-top:4px!important}
.best-chip{
  border:0!important;
  padding:2px 5px!important;
}
.status-fresh,.status-aging,.status-stale{
  font-weight:750;
  white-space:nowrap;
}
.source-link{
  display:grid!important;
  place-items:center!important;
  width:30px!important;
  height:30px!important;
  border:1px solid #aaa!important;
  text-decoration:none!important;
}

/* Alerts should inform, not dominate. */
.stale-notice{
  margin:0 0 10px!important;
  padding:8px 10px!important;
  border-width:1px!important;
  line-height:1.4!important;
}

/* Footnote separated from the main decision surface. */
.footnote{
  padding:2px 4px 0!important;
  margin-top:0!important;
}

/* Mobile keeps the spacing benefit without becoming too tall. */
@media(max-width:760px){
  .app{width:min(100% - 20px,1380px)!important}
  #dashboard{gap:16px}
  .sentence-builder{padding:14px!important}
  .answer-strip>div{padding:14px!important}
  .full-chart-card,
  .compact-table-card,
  .insight-card{padding:16px!important}
  .full-chart-card .chart{height:300px!important}
  .insights-grid{gap:14px!important}
  .position-percentile{grid-template-columns:1fr!important;gap:5px}
}


/* ======================================================================
   2026-09-30 content-density pass — fewer text layers, stronger hierarchy
   ====================================================================== */
:root{
  --ux-support:11px;
  --ux-body:14px;
  --ux-data:18px;
  --ux-section:22px;
}

/* Four-level type hierarchy */
.section-head h2,
.insight-card-head h2,
.compact-table-card .section-head h2{
  font-size:var(--ux-section)!important;
  line-height:1.12!important;
  letter-spacing:-.015em;
}
.direction-note,
.chart-help,
.insight-note,
.muted,
.footnote,
.scenario-line,
.scenario-hint{
  font-size:var(--ux-support)!important;
  line-height:1.45!important;
  font-weight:400!important;
  color:#666!important;
}
.answer-rate strong,
.answer-saving strong,
.position-current strong{
  font-size:var(--ux-data)!important;
}

/* Best result: Bank + amount dominate, supporting copy disappears. */
.answer-verified,
#resultContext{display:none!important}
.answer-kicker{
  font-size:10px!important;
  margin-bottom:2px;
}
.answer-bank-copy strong{font-size:20px!important;line-height:1.15!important}
.answer-total>span,
.answer-rate>span,
.answer-saving>span{
  font-size:10px!important;
  color:#666!important;
  letter-spacing:.06em!important;
}
.answer-total strong{
  font-size:clamp(32px,2.8vw,42px)!important;
  line-height:1!important;
}
.answer-meta{
  justify-content:center!important;
  gap:5px!important;
}
.answer-meta .freshness-badge,
.bot-inline{
  font-size:10px!important;
  line-height:1.3!important;
}

/* Chart: one heading, one short cue, then data. */
.full-chart-card .section-head{align-items:flex-start!important}
.full-chart-card .section-head>div:first-child{display:grid;gap:4px}
.full-chart-card .section-head h2{margin:0!important}
.direction-note{margin:0!important}
.chart-help{margin-top:8px!important}
.chart-series-chip{font-size:10px!important}
.chart-series-chip b{font-size:10px!important}
.chart-series-chip small,.chart-series-chip em{font-size:9px!important}

/* Historical insights: remove redundant label stacks. */
.insight-card-head h2{margin:0!important}
.insight-scope{
  font-size:10px!important;
  border-color:#c8c8c0!important;
  background:#f7f7f2!important;
}
.insight-metrics span{
  font-size:10px!important;
  font-weight:700!important;
  color:#777!important;
}
.insight-metrics strong{
  font-size:14px!important;
  margin-top:5px!important;
}
.insight-note{margin-top:10px!important}

/* Current position becomes a visual card, not a paragraph stack. */
.current-position-card .position-current{
  display:block!important;
  border-bottom:0!important;
  padding:2px 0 8px!important;
}
.current-position-card .position-current strong{
  display:block;
  font-size:30px!important;
  line-height:1;
  letter-spacing:-.025em;
}
.range-copy{display:none!important}
.position-track{margin-top:16px!important}
.position-scale{
  font-size:10px!important;
  color:#777!important;
}
.position-percentile{
  grid-template-columns:72px 1fr!important;
  gap:10px!important;
  border:0!important;
  border-left:4px solid #2f80ed!important;
  background:#f5f8ff!important;
  padding:10px 12px!important;
}
.position-percentile strong{font-size:30px!important}
.position-percentile span{
  font-size:11px!important;
  line-height:1.35!important;
  font-weight:600!important;
}
.current-position-card>.insight-note:last-child{
  font-size:10px!important;
  color:#777!important;
}

/* Table: one line per bank; BEST/STALE are the only status badges. */
.compact-table-card .section-head{
  align-items:center!important;
  margin-bottom:12px!important;
}
.compact-table-card .section-head h2{margin:0!important}
.compact-table-card .section-head .muted{
  max-width:320px;
  text-align:right;
}
.bank strong{
  display:flex!important;
  align-items:center;
  gap:6px;
  font-size:13px!important;
  line-height:1.2!important;
}
.best-chip,
.table-stale-chip{
  display:inline-flex;
  align-items:center;
  min-height:18px;
  padding:2px 5px!important;
  border:0!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:900!important;
  white-space:nowrap;
}
.best-chip{background:#d9f8e6!important;color:#08783f!important}
.table-stale-chip{background:#ffe4e4!important;color:#a32121!important}
.freshness-text{display:none!important}
.status-fresh,
.status-aging,
.status-stale{
  font-size:11px!important;
  font-weight:650!important;
}
th{
  font-size:10px!important;
  font-weight:800!important;
  color:#666!important;
}
td{
  font-size:12px!important;
}
td>strong{font-size:12px!important}
.stale-notice{
  font-size:11px!important;
  color:#665400!important;
}

/* Let sections breathe without creating more copy. */
.full-chart-card,
.insight-card,
.compact-table-card{padding-top:24px!important;padding-bottom:24px!important}
#dashboard{gap:26px!important}

@media(max-width:760px){
  .answer-total strong{font-size:32px!important}
  .current-position-card .position-current strong{font-size:26px!important}
  .compact-table-card .section-head{align-items:flex-start!important}
  .compact-table-card .section-head .muted{text-align:left;max-width:none}
  #dashboard{gap:18px!important}
}


/* ======================================================================
   2026-10-01 True Transfer Cost
   ====================================================================== */
.true-cost-bar{
  display:grid;
  grid-template-columns:minmax(210px,1fr) auto minmax(220px,auto) auto;
  align-items:center;
  gap:12px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid #888;
}
.true-cost-title{display:flex;flex-direction:column;gap:2px;min-width:0}
.true-cost-title strong{font-size:12px}
.true-cost-title span{color:#666;font-size:9px;line-height:1.35}
.fee-mode-switch{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-width:210px;
  height:34px;
  padding:2px;
  border:1px solid #111;
  background:#ecece7;
}
.fee-mode-switch button{
  border:0;
  background:transparent;
  color:#111;
  padding:0 10px;
  font:700 10px Arial,Helvetica,sans-serif;
  white-space:nowrap;
}
.fee-mode-switch button.active{border:1px solid #111;background:#fff}
.charge-type-wrap{display:flex;align-items:center;gap:7px;white-space:nowrap}
.charge-type-wrap>span{color:#555;font-size:9px;font-weight:700}
.fee-select{
  width:auto;
  min-width:160px;
  height:34px;
  padding:0 26px 0 8px;
  border:1px solid #111;
  border-radius:0;
  background:#fff;
  color:#111;
  font:700 10px Arial,Helvetica,sans-serif;
}
.fee-coverage{
  padding:6px 8px;
  border:1px solid #111;
  background:#f7f7f2;
  color:#444;
  font-size:9px;
  font-weight:700;
  white-space:nowrap;
}
.true-cost-notice{
  margin:-2px 0 14px;
  padding:9px 11px;
  border:1px solid #111;
  background:#fff7cf;
  color:#222;
  font-size:10px;
  line-height:1.45;
}
.answer-strip{
  grid-template-columns:minmax(240px,1.2fr) minmax(215px,1fr) minmax(145px,.62fr) minmax(165px,.72fr) minmax(145px,.62fr) auto auto;
}
.answer-fee{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.answer-fee>span{
  font-size:8px;
  font-weight:900;
  letter-spacing:.09em;
  color:#555;
}
.answer-fee strong{margin-top:5px;font-size:16px}
.answer-fee small{
  display:block;
  margin-top:3px;
  max-width:220px;
  color:#666;
  font-size:8px;
  line-height:1.25;
}
.fee-cell{white-space:nowrap}
.fee-unranked-row{background:#faf9f5}
.fee-unranked-row .rank{opacity:.5}
.fee-partial-chip,.fee-missing-chip{
  display:inline-block;
  margin-left:5px;
  padding:2px 5px;
  border:1px solid #111;
  border-radius:999px;
  font-size:7px;
  font-weight:800;
  white-space:nowrap;
}
.fee-partial-chip{background:#fff1b8}
.fee-missing-chip{background:#f1f1ed;color:#555}
.compact-table-card table{min-width:980px}

@media(max-width:1180px){
  .true-cost-bar{grid-template-columns:1fr auto auto}
  .fee-coverage{grid-column:1/-1;justify-self:start}
  .answer-strip{grid-template-columns:minmax(235px,1.25fr) minmax(210px,1fr) minmax(145px,.7fr) minmax(165px,.8fr)}
  .answer-saving{border-top:1px solid #aaa}
}
@media(max-width:900px){
  .true-cost-bar{grid-template-columns:1fr 1fr}
  .true-cost-title{grid-column:1/-1}
  .fee-mode-switch{min-width:0;width:100%}
  .charge-type-wrap{justify-content:flex-end}
  .fee-coverage{grid-column:1/-1}
  .answer-strip{grid-template-columns:1fr 1fr}
  .answer-fee{border-right:1px solid #aaa}
}
@media(max-width:760px){
  .true-cost-bar{display:flex;flex-direction:column;align-items:stretch;gap:8px}
  .true-cost-title{gap:3px}
  .fee-mode-switch{width:100%}
  .charge-type-wrap{justify-content:space-between}
  .fee-select{min-width:150px}
  .fee-coverage{align-self:flex-start}
  .answer-strip{grid-template-columns:1fr}
  .answer-fee{border-right:0}
  .true-cost-notice{font-size:9px}
}


/* ======================================================================
   2026-10-01 Progressive disclosure — simple first, details on demand
   ====================================================================== */

/* Advanced transfer settings stay out of the primary task flow. */
.advanced-options{
  margin-top:10px;
  border-top:1px solid #aaa;
}
.advanced-options>summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:38px;
  padding:8px 2px 0;
  list-style:none;
  cursor:pointer;
  color:#333;
  font-size:11px;
  font-weight:800;
}
.advanced-options>summary::-webkit-details-marker{display:none}
.advanced-options>summary:before{
  content:"+";
  display:inline-grid;
  place-items:center;
  flex:0 0 20px;
  width:20px;
  height:20px;
  border:1px solid #111;
  background:#fff;
  font-size:14px;
  line-height:1;
}
.advanced-options[open]>summary:before{content:"−"}
.advanced-options>summary>span{margin-right:auto}
.advanced-options>summary small{
  color:#666;
  font-size:9px;
  font-weight:600;
  text-align:right;
}
.advanced-options-body{
  margin-top:9px;
  padding:12px;
  border:1px solid #aaa;
  background:#f8f8f4;
}
.advanced-options .true-cost-bar{
  margin:0;
  padding:0 0 12px;
  border-top:0;
  border-bottom:1px solid #bbb;
}
.advanced-options .bank-scope-row{
  margin-top:12px;
}
.advanced-options .fee-coverage{
  background:#fff;
  border-color:#aaa;
  color:#666;
}
.charge-type-wrap[hidden]{display:none!important}

/* Primary answer is intentionally short. */
.answer-strip{
  grid-template-columns:minmax(250px,1.25fr) minmax(230px,1fr) minmax(160px,.72fr) minmax(150px,.68fr) auto!important;
}
.answer-strip>div:last-of-type{border-right:0}
.answer-compare-button{
  margin:0 12px!important;
  align-self:center;
}
.answer-details{
  margin:-3px 0 14px;
  border:0;
}
.answer-details>summary,
.history-details>summary{
  width:max-content;
  max-width:100%;
  list-style:none;
  cursor:pointer;
  color:#444;
  font-size:10px;
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:3px;
}
.answer-details>summary::-webkit-details-marker,
.history-details>summary::-webkit-details-marker{display:none}
.answer-details>summary:after,
.history-details>summary:after{content:" ▾";text-decoration:none}
.answer-details[open]>summary:after,
.history-details[open]>summary:after{content:" ▴"}
.answer-details-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  margin-top:9px;
  border:1px solid #aaa;
  background:#fff;
}
.answer-detail-item{
  min-width:0;
  padding:10px 12px;
  border-right:1px solid #ccc;
}
.answer-detail-item:last-child{border-right:0}
.answer-detail-item>span{
  display:block;
  margin-bottom:4px;
  color:#666;
  font-size:9px;
  font-weight:700;
}
.answer-detail-item>strong{
  display:block;
  color:#111;
  font-size:12px;
}
.answer-detail-item small{
  display:block;
  margin-top:3px;
  color:#666;
  font-size:8px;
  line-height:1.35;
}
.answer-details .true-cost-notice{
  margin:0;
  border-top:0;
  border-width:1px;
  background:#fff9dc;
}

/* Historical analytics become an optional power-user section. */
.history-details{
  margin:0;
}
.history-details>summary{
  margin:0 0 2px 2px;
}
.history-details[open]>summary{margin-bottom:12px}
.history-details .insights-grid{
  margin:0!important;
}

/* Default comparison table: rank, bank, rate, total, details. */
.compact-table-card table{
  min-width:680px!important;
}
.row-details-button{
  border:0;
  background:transparent;
  color:#333;
  padding:5px 0;
  font-size:10px;
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:3px;
  white-space:nowrap;
}
.row-details-button:hover{color:#1768c5}
.bank-detail-row[hidden]{display:none!important}
.bank-detail-row td{
  padding:0!important;
  border-bottom:1px solid #aaa!important;
  background:#f8f8f4!important;
}
.bank-detail-panel{
  display:grid;
  grid-template-columns:repeat(4,minmax(120px,1fr));
  gap:0;
  padding:10px 12px;
}
.bank-detail-panel>div{
  min-width:0;
  padding:6px 10px;
  border-right:1px solid #d1d1ca;
}
.bank-detail-panel>div:nth-child(4),
.bank-detail-panel>div:last-child{border-right:0}
.bank-detail-panel span{
  display:block;
  margin-bottom:4px;
  color:#777;
  font-size:9px;
  font-weight:700;
}
.bank-detail-panel strong,
.detail-source-link{
  color:#111;
  font-size:11px;
  line-height:1.4;
  overflow-wrap:anywhere;
}
.bank-detail-wide{grid-column:span 3}
.detail-source-link{
  display:inline-block;
  font-weight:800;
  text-underline-offset:3px;
}
.fee-unranked-row{background:#fff!important}
.fee-partial-chip,.fee-missing-chip{display:none!important}

/* Keep supporting copy quiet. */
#tableHint{max-width:340px}
.footnote{font-size:9px!important}

@media(max-width:1180px){
  .answer-strip{
    grid-template-columns:minmax(240px,1.25fr) minmax(210px,1fr) minmax(145px,.7fr) minmax(145px,.7fr)!important;
  }
  .answer-compare-button{
    grid-column:1/-1;
    justify-self:start;
    margin:10px 12px!important;
  }
}
@media(max-width:900px){
  .advanced-options .true-cost-bar{grid-template-columns:1fr 1fr}
  .answer-strip{grid-template-columns:1fr 1fr!important}
  .answer-bank{grid-column:1/-1}
  .answer-details-grid{grid-template-columns:1fr}
  .answer-detail-item{border-right:0;border-bottom:1px solid #ccc}
  .answer-detail-item:last-child{border-bottom:0}
  .bank-detail-panel{grid-template-columns:1fr 1fr}
  .bank-detail-wide{grid-column:1/-1}
  .bank-detail-panel>div{border-right:0;border-bottom:1px solid #ddd}
}
@media(max-width:760px){
  .advanced-options>summary{align-items:flex-start}
  .advanced-options>summary small{max-width:52%}
  .advanced-options-body{padding:10px}
  .advanced-options .true-cost-bar{display:flex}
  .answer-strip{grid-template-columns:1fr!important}
  .answer-bank{grid-column:auto}
  .answer-compare-button{grid-column:auto;justify-self:stretch}
  .answer-details>summary,
  .history-details>summary{font-size:11px}
  .bank-detail-panel{grid-template-columns:1fr}
  .bank-detail-wide{grid-column:auto}
}


/* ======================================================================
   2026-10-01 Consumer hierarchy pass
   Goal: glanceable first, power features on demand.
   ====================================================================== */
:root{
  --ux-support:13px;
  --ux-body:16px;
  --ux-data:20px;
  --ux-section:26px;
}
body{font-size:var(--ux-body)!important;line-height:1.45!important}
.app{width:min(1180px,calc(100% - 32px))!important}
.topbar{height:64px!important}
.brand{font-size:15px!important}
.checked,.language-toggle{font-size:13px!important}
.retro-hero{padding:30px 0 18px!important}
.retro-hero h1{font-size:clamp(44px,5vw,66px)!important}
.hero-sub{font-size:15px!important;line-height:1.5!important;max-width:700px}
.eyebrow{font-size:12px!important}
.sentence-builder{padding:18px!important;margin-top:18px!important}
.sentence-line-v3{font-size:16px!important}
.retro-select,
.exchange-box input,
.exchange-box>span,
.retro-primary{font-size:15px!important}
.retro-select,.exchange-box,.exchange-reverse,.sentence-line-v3 .retro-primary{height:46px!important}
.scenario-line,.scenario-hint{font-size:12px!important}

/* Advanced options should feel like a small drawer, not another full dashboard. */
.advanced-options>summary{
  min-height:44px!important;
  padding-top:10px!important;
  font-size:13px!important;
}
.advanced-options>summary small{font-size:12px!important}
.advanced-options-body{
  width:min(760px,100%);
  margin-top:10px!important;
  padding:16px!important;
  background:#fff!important;
  box-shadow:2px 2px 0 rgba(17,17,17,.35);
}
.advanced-options .true-cost-bar{
  grid-template-columns:minmax(180px,1fr) minmax(250px,auto)!important;
  gap:12px 16px!important;
  align-items:end!important;
}
.advanced-options .true-cost-title strong{font-size:14px!important}
.advanced-options .true-cost-title span{font-size:12px!important;line-height:1.4!important}
.advanced-options .fee-mode-switch{height:42px!important;min-width:250px!important}
.advanced-options .fee-mode-switch button{font-size:12px!important}
.advanced-options .charge-type-wrap{
  grid-column:1/-1;
  justify-content:flex-start!important;
  white-space:normal!important;
}
.advanced-options .charge-type-wrap>span{font-size:12px!important;min-width:220px}
.advanced-options .fee-select{height:40px!important;min-width:300px!important;font-size:12px!important}
.advanced-options .fee-coverage{
  grid-column:1/-1!important;
  justify-self:start!important;
  font-size:11px!important;
  padding:5px 7px!important;
  border:0!important;
  background:#f3f3ee!important;
}
.advanced-options .bank-scope-row{font-size:13px!important}
.bank-scope-label{font-size:12px!important}
.bank-scope-switch button{font-size:12px!important}

/* Primary answer: the bank and money are the dominant objects. */
.answer-strip{
  grid-template-columns:minmax(250px,1.25fr) minmax(250px,1.1fr) minmax(165px,.72fr) minmax(170px,.72fr) auto!important;
  min-height:132px;
}
.answer-strip>div{padding:18px!important}
.answer-kicker{font-size:12px!important}
.answer-bank-copy strong{font-size:24px!important}
.answer-bank-icon .bank-icon-wrap{width:46px!important;height:46px!important;flex-basis:46px!important}
.answer-total>span,.answer-rate>span,.answer-saving>span{
  font-size:12px!important;
  letter-spacing:.04em!important;
}
.answer-total strong{
  margin-top:5px!important;
  font-size:clamp(40px,4vw,50px)!important;
}
.answer-rate strong,.answer-saving strong{font-size:19px!important}
.answer-compare-button{
  min-width:128px;
  min-height:42px;
  font-size:12px!important;
  margin:0 14px!important;
}
.answer-details{margin:0 0 8px!important}
.answer-details>summary,.history-details>summary{
  font-size:13px!important;
  text-underline-offset:4px!important;
}
.answer-details-grid{max-width:760px}
.answer-detail-item>span{font-size:11px!important}
.answer-detail-item>strong{font-size:14px!important}
.answer-detail-item small{font-size:11px!important}

/* Section hierarchy */
#dashboard{gap:20px!important}
.section-head h2,
.insight-card-head h2,
.compact-table-card .section-head h2{
  font-size:var(--ux-section)!important;
  line-height:1.15!important;
}
.compact-table-card,
.full-chart-card,
.insight-card{padding:24px!important}
.compact-table-card .section-head{
  align-items:flex-start!important;
  margin-bottom:14px!important;
}
.compact-table-card .section-head>div{display:grid;gap:5px}
.compact-table-card .section-head .muted{
  max-width:none!important;
  text-align:left!important;
  font-size:13px!important;
}

/* Bank comparison: Top 5 first; click the whole row. */
.compact-table-card table{min-width:650px!important}
th{
  padding:11px 12px!important;
  font-size:12px!important;
  letter-spacing:.02em!important;
}
td{
  padding:14px 12px!important;
  font-size:14px!important;
}
td>strong{font-size:14px!important}
.bank strong{font-size:15px!important}
.bank-icon-wrap{width:38px!important;height:38px!important;flex-basis:38px!important}
.rank{min-width:34px!important;height:28px!important;font-size:11px!important}
.bank-main-row{
  cursor:pointer;
  transition:background .14s ease;
}
.bank-main-row:hover{background:#f3f7fc!important}
.bank-main-row:focus-visible{outline:2px solid #2f80ed;outline-offset:-2px}
.row-expand-head{width:42px}
.row-chevron{
  width:42px;
  text-align:center!important;
  font-size:20px!important;
  font-weight:800;
  color:#555;
}
.best-chip{font-size:10px!important;min-height:20px!important}
.table-footer{
  display:flex;
  justify-content:center;
  padding-top:14px;
}
.table-toggle{
  min-height:42px;
  padding:0 18px;
  border:1px solid #111;
  background:#fff;
  color:#111;
  box-shadow:2px 2px 0 #111;
  font-size:13px;
  font-weight:800;
}
.table-toggle:hover{background:#eef6ff}
.table-toggle:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #111}
.bank-detail-panel{font-size:13px!important;padding:12px 14px!important}
.bank-detail-panel span{font-size:11px!important}
.bank-detail-panel strong,.detail-source-link{font-size:13px!important}

/* Chart is secondary to the decision table, but remains easy to read. */
.full-chart-card .section-head h2{font-size:26px!important}
.direction-note{font-size:13px!important}
.full-chart-card .chart{height:300px!important}
.axis-label{font-size:12px!important}
.chart-series-chip{
  min-height:34px;
  padding:7px 9px!important;
  font-size:12px!important;
}
.chart-series-chip b{font-size:12px!important}
.chart-series-chip small,.chart-series-chip em{font-size:11px!important}
.legend-toggle{
  min-height:34px;
  padding:6px 10px!important;
  font-size:11px!important;
}
.chart-help-details{margin-top:9px}
.chart-help-details>summary{
  width:max-content;
  list-style:none;
  cursor:pointer;
  color:#555;
  font-size:12px;
  font-weight:750;
}
.chart-help-details>summary::-webkit-details-marker{display:none}
.chart-help-details .chart-help{
  margin:7px 0 0!important;
  font-size:12px!important;
  line-height:1.45!important;
}

/* Historical analytics are deliberately tertiary. */
.history-details{padding-top:2px}
.history-details[open]>summary{margin-bottom:14px!important}
.insight-card-head h2{font-size:22px!important}
.insight-metrics span,.insight-note,.position-scale{font-size:12px!important}
.insight-metrics strong{font-size:15px!important}

/* Footer remains available without competing with decisions. */
.footnote{font-size:11px!important;line-height:1.5!important}

/* Reduce secondary border weight while keeping the retro language. */
.answer-details-grid,
.advanced-options-body,
.bank-detail-row td{border-color:#b8b8b0!important}
.compact-table-card th,.compact-table-card td{border-bottom-color:#d8d8d1!important}

@media(max-width:1100px){
  .app{width:min(100% - 24px,1180px)!important}
  .answer-strip{
    grid-template-columns:1.2fr 1fr .75fr .75fr!important;
  }
  .answer-compare-button{grid-column:1/-1;justify-self:start;margin:10px 14px!important}
}
@media(max-width:820px){
  :root{--ux-body:15px;--ux-section:23px}
  .sentence-line-v3{grid-template-columns:1fr 1fr!important}
  .sentence-line-v3 .action-select,
  .sentence-line-v3 .currency-select{grid-column:auto!important}
  .sentence-line-v3 .exchange-pair,
  .sentence-line-v3 .retro-primary{grid-column:1/-1!important}
  .answer-strip{grid-template-columns:1fr 1fr!important}
  .answer-bank{grid-column:1/-1}
  .full-chart-card .chart{height:280px!important}
}
@media(max-width:620px){
  .app{width:min(100% - 16px,1180px)!important}
  .topbar{height:56px!important}
  .retro-hero{padding-top:22px!important}
  .retro-hero h1{font-size:38px!important}
  .hero-sub{font-size:14px!important}
  .sentence-builder{padding:14px!important}
  .sentence-line-v3{grid-template-columns:1fr!important}
  .sentence-line-v3 .action-select,
  .sentence-line-v3 .currency-select,
  .sentence-line-v3 .exchange-pair,
  .sentence-line-v3 .retro-primary{grid-column:1/-1!important}
  .advanced-options-body{width:100%}
  .advanced-options .true-cost-bar{display:flex!important}
  .advanced-options .fee-select{min-width:0!important;width:100%!important}
  .advanced-options .charge-type-wrap{align-items:stretch!important}
  .answer-strip{grid-template-columns:1fr!important}
  .answer-bank{grid-column:auto}
  .answer-total strong{font-size:38px!important}
  .compact-table-card,
  .full-chart-card,
  .insight-card{padding:16px!important}
  .compact-table-card table{min-width:560px!important}
  th{font-size:11px!important}
  td,td>strong{font-size:13px!important}
  .full-chart-card .chart{height:250px!important}
  .chart-series-chip{font-size:11px!important}
}


/* ======================================================================
   2026-10-01 Mobile-first interaction pass
   Desktop keeps the existing hierarchy. Mobile becomes a dedicated flow.
   ====================================================================== */
.advanced-backdrop,
.advanced-sheet-head,
.advanced-sheet-done{display:none}

@media(max-width:760px){
  html{scroll-padding-top:12px}
  body.mobile-sheet-open{overflow:hidden}

  /* Shell / header */
  .app{width:calc(100% - 24px)!important;padding-bottom:28px!important}
  .topbar{height:54px!important}
  .brand{gap:8px!important;font-size:13px!important}
  .brand-mark{width:28px!important;height:28px!important;font-size:9px!important}
  .top-actions{gap:7px!important}
  .checked{max-width:150px!important;font-size:10px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .language-toggle{min-width:42px;min-height:36px;font-size:12px!important}

  /* Compact hero */
  .retro-hero{padding:22px 0 12px!important}
  .eyebrow{margin-bottom:7px!important;font-size:10px!important}
  .retro-hero h1{
    max-width:360px;
    margin-bottom:8px!important;
    font-size:clamp(34px,10.5vw,42px)!important;
    line-height:.98!important;
    letter-spacing:-.045em!important;
  }
  .hero-sub{max-width:330px;margin-bottom:13px!important;font-size:14px!important;line-height:1.4!important}

  /* Calculator becomes a vertical mobile task */
  .sentence-builder{
    margin-top:12px!important;
    padding:14px!important;
    border-width:1.5px!important;
    box-shadow:2px 2px 0 #111!important;
  }
  .sentence-line-v3{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    align-items:stretch!important;
  }
  .sentence-text{
    margin-top:4px;
    color:#5f5f5f;
    font-size:12px!important;
    font-weight:700;
  }
  .sentence-line-v3 .retro-select{
    grid-column:1/-1!important;
    width:100%!important;
    height:48px!important;
    padding:0 12px!important;
    font-size:15px!important;
  }
  .exchange-pair{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 48px!important;
    gap:8px!important;
    width:100%!important;
    margin-top:3px;
  }
  .exchange-input{
    grid-column:1!important;
    grid-row:1!important;
    height:50px!important;
  }
  .exchange-input input{font-size:20px!important;font-weight:800!important}
  .exchange-input strong{font-size:12px!important}
  .exchange-reverse{
    grid-column:2!important;
    grid-row:1!important;
    width:48px!important;
    min-width:48px!important;
    height:50px!important;
    padding:0!important;
    font-size:20px!important;
  }
  .exchange-output{
    grid-column:1/-1!important;
    grid-row:2!important;
    display:flex!important;
    align-items:baseline!important;
    justify-content:flex-start!important;
    gap:6px!important;
    min-height:58px!important;
    padding:11px 13px!important;
    border:1px solid #bbb!important;
    background:#f7f7f2!important;
    white-space:nowrap;
  }
  .exchange-output #convertedAmount{font-size:27px!important;font-weight:900!important;letter-spacing:-.025em}
  .exchange-output #convertedUnit{font-size:12px!important}
  .exchange-approx{font-size:15px!important;color:#777!important}
  .sentence-line-v3 .retro-primary{
    grid-column:1/-1!important;
    width:100%!important;
    height:50px!important;
    margin-top:3px!important;
    font-size:15px!important;
  }
  .scenario-row{display:none!important}

  /* More options opens as a real mobile bottom sheet */
  .advanced-options{
    margin-top:8px!important;
    border-top:1px solid #ccc!important;
  }
  .advanced-options>summary{
    min-height:44px!important;
    padding:7px 0 0!important;
    font-size:13px!important;
    touch-action:manipulation;
  }
  .advanced-options>summary small{max-width:56%!important;font-size:11px!important;line-height:1.35}
  .advanced-options[open] .advanced-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:90;
    width:100%;
    height:100%;
    padding:0;
    border:0;
    background:rgba(0,0,0,.36);
  }
  .advanced-options[open] .advanced-options-body{
    position:fixed!important;
    left:0;
    right:0;
    bottom:0;
    z-index:100;
    width:100%!important;
    max-height:min(82dvh,680px);
    margin:0!important;
    padding:0 16px max(16px,env(safe-area-inset-bottom))!important;
    overflow-y:auto;
    overscroll-behavior:contain;
    border:2px solid #111!important;
    border-bottom:0!important;
    border-radius:14px 14px 0 0!important;
    background:#fff!important;
    box-shadow:0 -12px 42px rgba(0,0,0,.22)!important;
  }
  .advanced-sheet-head{
    position:sticky;
    top:0;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:58px;
    margin:0 -16px 14px;
    padding:0 16px;
    border-bottom:1px solid #d8d8d2;
    background:#fff;
  }
  .advanced-sheet-head strong{font-size:18px}
  .advanced-sheet-close{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border:1px solid #111;
    background:#fff;
    font-size:24px;
    line-height:1;
  }
  .advanced-options .true-cost-bar{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:12px!important;
    padding:0 0 16px!important;
    border-bottom:1px solid #ddd!important;
  }
  .advanced-options .true-cost-title{gap:4px!important}
  .advanced-options .true-cost-title strong{font-size:15px!important}
  .advanced-options .true-cost-title span{font-size:12px!important}
  .advanced-options .fee-mode-switch{
    width:100%!important;
    min-width:0!important;
    height:46px!important;
  }
  .advanced-options .fee-mode-switch button{font-size:13px!important}
  .advanced-options .charge-type-wrap{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:7px!important;
  }
  .advanced-options .charge-type-wrap[hidden]{display:none!important}
  .advanced-options .charge-type-wrap>span{min-width:0!important;font-size:12px!important}
  .advanced-options .fee-select{
    width:100%!important;
    min-width:0!important;
    height:46px!important;
    font-size:13px!important;
  }
  .advanced-options .fee-coverage{
    align-self:flex-start!important;
    font-size:11px!important;
    white-space:normal!important;
  }
  .advanced-options .bank-scope-row{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:8px!important;
    margin-top:15px!important;
  }
  .bank-scope-label{font-size:12px!important}
  .bank-scope-switch{width:100%!important;min-height:46px}
  .bank-scope-switch button{min-height:44px!important;font-size:13px!important}
  .bank-picker{margin-top:12px!important}
  .bank-picker-grid{max-height:240px;overflow-y:auto}
  .advanced-sheet-done{
    display:block;
    position:sticky;
    bottom:0;
    width:100%;
    min-height:48px;
    margin-top:16px;
    font-size:14px!important;
  }

  /* Result is the main mobile hero card */
  #dashboard{gap:16px!important}
  .answer-strip{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    min-height:0!important;
    padding:0!important;
    border-width:1.5px!important;
    box-shadow:2px 2px 0 #111!important;
    overflow:hidden;
  }
  .answer-strip>div{
    min-width:0;
    padding:14px 16px!important;
    border:0!important;
  }
  .answer-bank{
    grid-column:1/-1;
    display:grid!important;
    grid-template-columns:48px minmax(0,1fr)!important;
    gap:5px 12px!important;
    align-items:center!important;
    padding-bottom:12px!important;
  }
  .answer-kicker{
    grid-column:1/-1;
    margin-bottom:2px!important;
    font-size:11px!important;
  }
  .answer-bank-icon{grid-column:1;grid-row:2}
  .answer-bank-copy{grid-column:2;grid-row:2;min-width:0}
  .answer-bank-copy strong{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:21px!important;
  }
  .answer-bank-icon .bank-icon-wrap{width:44px!important;height:44px!important;flex-basis:44px!important}
  .answer-total{
    grid-column:1/-1;
    padding-top:13px!important;
    border-top:1px solid #d8d8d2!important;
  }
  .answer-total>span{font-size:11px!important}
  .answer-total strong{
    margin-top:3px!important;
    font-size:clamp(36px,11vw,44px)!important;
    line-height:1!important;
    overflow-wrap:anywhere;
  }
  .answer-rate,
  .answer-saving{
    padding-top:12px!important;
    padding-bottom:12px!important;
    border-top:1px solid #ddd!important;
  }
  .answer-rate{grid-column:1;border-right:1px solid #ddd!important}
  .answer-saving{grid-column:2}
  .answer-rate>span,.answer-saving>span{font-size:10px!important}
  .answer-rate strong,.answer-saving strong{display:block;margin-top:4px;font-size:15px!important;line-height:1.25!important}
  .answer-compare-button{
    grid-column:1/-1!important;
    justify-self:stretch!important;
    width:auto!important;
    min-height:48px!important;
    margin:10px 14px 14px!important;
    font-size:13px!important;
  }
  .answer-details{margin:-2px 2px 0!important}
  .answer-details>summary{
    min-height:42px;
    display:flex;
    align-items:center;
    font-size:12px!important;
  }
  .answer-details-grid{
    grid-template-columns:1fr!important;
    max-width:none!important;
    margin-top:0!important;
  }
  .answer-detail-item{
    padding:11px 12px!important;
    border-right:0!important;
    border-bottom:1px solid #ddd!important;
  }
  .answer-detail-item:last-child{border-bottom:0!important}

  /* Bank comparison becomes a card list, not a squeezed table */
  .compact-table-card{
    padding:4px 0 0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .compact-table-card .section-head{
    margin-bottom:8px!important;
    padding:0 2px!important;
  }
  .compact-table-card .section-head h2{font-size:24px!important}
  .compact-table-card .section-head .muted{font-size:12px!important}
  .table-scroll{
    margin:0!important;
    overflow:visible!important;
  }
  .compact-table-card table,
  .compact-table-card tbody{
    display:block!important;
    width:100%!important;
    min-width:0!important;
  }
  .compact-table-card thead{display:none!important}
  .bank-main-row{
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr) 26px;
    grid-template-areas:
      "rank bank chevron"
      "rank total chevron"
      "rank rate chevron";
    gap:0 10px;
    width:100%;
    min-height:118px;
    margin:10px 0 0!important;
    padding:13px 12px!important;
    border:1px solid #c6c6bf!important;
    border-radius:7px;
    background:#fff!important;
    box-shadow:1px 1px 0 #c9c9c1;
  }
  .bank-main-row.best-row{
    border-color:#9fc7ef!important;
    background:#f2f8ff!important;
  }
  .bank-main-row td{
    display:block!important;
    width:auto!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
  }
  .rank-cell{grid-area:rank;align-self:center}
  .bank-cell{grid-area:bank;min-width:0}
  .rate-cell{grid-area:rate;padding-top:6px!important}
  .total-cell{grid-area:total;padding-top:8px!important}
  .row-chevron{
    grid-area:chevron;
    align-self:center;
    justify-self:end;
    width:24px!important;
    font-size:22px!important;
  }
  .bank-cell .bank{gap:9px!important;min-width:0}
  .bank-cell .bank>div{min-width:0}
  .bank-cell .bank strong{
    display:block!important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:16px!important;
  }
  .bank-cell .bank-icon-wrap{width:36px!important;height:36px!important;flex-basis:36px!important}
  .rate-cell::before,
  .total-cell::before{
    content:attr(data-mobile-label);
    display:block;
    margin-bottom:1px;
    color:#777;
    font-size:10px;
    font-weight:700;
  }
  .rate-cell strong{font-size:13px!important;color:#444}
  .total-cell strong{font-size:21px!important;letter-spacing:-.015em}
  .rank-cell .rank{min-width:34px!important;height:28px!important}
  .best-chip{font-size:9px!important}
  .bank-main-row[aria-expanded="true"]{
    margin-bottom:0!important;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
  }
  .bank-detail-row{
    display:block!important;
    width:100%!important;
    margin:0 0 10px!important;
  }
  .bank-detail-row[hidden]{display:none!important}
  .bank-detail-row>td{
    display:block!important;
    width:100%!important;
    padding:0!important;
    border:0!important;
  }
  .bank-detail-panel{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:0!important;
    margin:0 4px!important;
    padding:4px 10px 10px!important;
    border:1px solid #c6c6bf;
    border-top:0;
    background:#fafaf7;
  }
  .bank-detail-panel>div{
    padding:9px 6px!important;
    border-right:0!important;
    border-bottom:1px solid #e1e1db!important;
  }
  .bank-detail-panel>div:nth-last-child(-n+2){border-bottom:0!important}
  .bank-detail-wide{grid-column:1/-1!important}
  .bank-detail-panel span{font-size:10px!important}
  .bank-detail-panel strong,.detail-source-link{font-size:12px!important}
  .table-footer{padding:12px 0 0!important}
  .table-toggle{
    width:100%;
    min-height:46px;
    font-size:13px!important;
  }

  /* Chart is secondary and finger-friendly */
  .full-chart-card{
    padding:16px 12px!important;
    border-width:1.5px!important;
    box-shadow:2px 2px 0 #111!important;
  }
  .full-chart-card .section-head{
    align-items:flex-start!important;
    gap:10px!important;
  }
  .full-chart-card .section-head h2{font-size:23px!important}
  .direction-note{font-size:12px!important}
  .segmented.compact{
    width:144px!important;
    height:44px!important;
    flex:0 0 144px;
  }
  .segmented.compact button{min-height:38px!important;font-size:11px!important}
  .legend{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:7px!important;
    padding:12px 0 4px!important;
    overflow:visible!important;
  }
  .chart-series-legend{
    display:flex;
    gap:7px;
    overflow-x:auto;
    padding:1px 0 5px;
    scrollbar-width:none;
    overscroll-behavior-x:contain;
  }
  .chart-series-legend::-webkit-scrollbar{display:none}
  .chart-series-chip{
    flex:0 0 auto;
    min-height:34px!important;
    padding:7px 8px!important;
  }
  .legend-toggle{
    align-self:flex-start;
    min-height:38px!important;
    padding:7px 10px!important;
    font-size:11px!important;
  }
  .full-chart-card .chart{
    width:calc(100% + 2px)!important;
    height:230px!important;
    margin:5px -1px 0!important;
  }
  .axis-label{font-size:10px!important}
  .chart-help-details>summary{
    min-height:38px;
    display:flex;
    align-items:center;
    font-size:11px!important;
  }
  .chart-help-details .chart-help{font-size:11px!important}

  /* Tertiary content stays collapsed and touchable */
  .history-details{padding-top:0!important}
  .history-details>summary{
    display:flex;
    align-items:center;
    min-height:46px;
    padding:0 2px;
    font-size:12px!important;
  }
  .history-details .insights-grid{grid-template-columns:1fr!important;gap:12px!important}
  .insight-card{padding:14px!important}
  .insight-card-head h2{font-size:20px!important}

  .footnote{
    gap:4px!important;
    padding:6px 2px 0!important;
    font-size:10px!important;
  }
}

@media(max-width:390px){
  .app{width:calc(100% - 18px)!important}
  .retro-hero h1{font-size:34px!important}
  .checked{max-width:112px!important}
  .answer-total strong{font-size:35px!important}
  .answer-rate strong,.answer-saving strong{font-size:14px!important}
  .full-chart-card .section-head{flex-direction:column!important}
  .segmented.compact{width:100%!important}
  .bank-detail-panel{grid-template-columns:1fr!important}
  .bank-detail-panel>div{border-bottom:1px solid #e1e1db!important}
  .bank-detail-panel>div:last-child{border-bottom:0!important}
}


/* App version badge */
.version-badge{
  display:inline-flex;
  align-items:center;
  min-height:20px;
  padding:2px 6px;
  border:1px solid #9a9a92;
  background:#fff;
  color:#555;
  font-size:10px;
  font-weight:700;
  line-height:1;
  letter-spacing:0;
  white-space:nowrap;
}
@media(max-width:760px){
  .version-badge{
    min-height:18px;
    padding:2px 5px;
    font-size:9px;
  }
}


/* ======================================================================
   v0.4.2 — Desktop result-card overflow fix
   Keep the primary amount prominent without allowing it to push into
   neighboring cells.
   ====================================================================== */
@media(min-width:761px){
  .answer-strip{
    grid-template-columns:
      minmax(220px,1fr)
      minmax(310px,1.35fr)
      minmax(165px,.68fr)
      minmax(155px,.64fr)
      150px!important;
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  .answer-strip>div{
    min-width:0!important;
    overflow:hidden;
  }

  .answer-bank{
    min-width:0;
  }

  .answer-bank-copy{
    min-width:0;
    overflow:hidden;
  }

  .answer-bank-copy strong{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .answer-total{
    min-width:0;
  }

  .answer-total strong{
    display:block;
    max-width:100%;
    margin-top:5px!important;
    font-size:clamp(34px,3vw,44px)!important;
    line-height:1!important;
    letter-spacing:-.035em!important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:clip;
    font-variant-numeric:tabular-nums;
  }

  .answer-rate,
  .answer-saving{
    min-width:0;
  }

  .answer-rate strong,
  .answer-saving strong{
    display:block;
    max-width:100%;
    overflow-wrap:anywhere;
  }

  .answer-compare-button{
    width:126px;
    max-width:calc(100% - 24px);
    margin:0 12px!important;
    justify-self:center;
  }
}

/* Before the mobile layout takes over, break the result card into a
   deliberate two-row desktop/tablet layout instead of squeezing it. */
@media(min-width:761px) and (max-width:1080px){
  .answer-strip{
    grid-template-columns:minmax(220px,1fr) minmax(300px,1.35fr) minmax(155px,.72fr)!important;
  }

  .answer-bank{grid-column:1}
  .answer-total{grid-column:2}
  .answer-rate{grid-column:3}
  .answer-saving{
    grid-column:1 / 3;
    border-top:1px solid #aaa;
  }

  .answer-compare-button{
    grid-column:3;
    grid-row:2;
    width:auto;
    min-width:0;
    justify-self:stretch;
    margin:12px!important;
  }
}


/* ======================================================================
   v0.4.3 — Truthful, readable rate-history chart
   Top 3 only, BOT benchmark, true-time update markers, inline detail.
   ====================================================================== */
.full-chart-card .legend-toggle{display:none!important}
.chart-series-legend{width:100%}

/* The line between actual bank updates represents a carried-forward quote.
   Keep it intentionally quiet; actual change markers carry the emphasis. */
.series-line.carry-series{
  opacity:.34!important;
  stroke-width:1.8!important;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.series-line.best-carry-series{
  opacity:.48!important;
  stroke-width:2.3!important;
}
.update-dot.changed-dot{
  fill:#fff!important;
  opacity:1!important;
  stroke-width:2.5!important;
}
.update-dot.changed-dot.best-update-dot{
  stroke-width:3!important;
}
.series-line.bot-series{
  opacity:.72!important;
  stroke-width:1.5!important;
  stroke-dasharray:5 5!important;
}

/* Plot and detail are separate vertical regions. Detail never covers data. */
.full-chart-card .chart{
  height:auto!important;
  margin-top:5px!important;
  overflow:visible!important;
}
.chart-plot{
  position:relative;
  width:100%;
  height:300px;
  touch-action:none;
}
.chart-plot svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}
.chart-detail{
  width:100%;
  margin-top:12px;
  padding:12px 14px;
  border:1px solid #c9c9c2;
  background:#fafaf7;
  color:#111;
}
.chart-detail-time{
  margin-bottom:7px;
  color:#666;
  font-size:11px;
  font-weight:800;
}
.chart-detail-list{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
}
.chart-detail-row{
  min-width:0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:7px 10px;
  border-left:1px solid #ddd;
}
.chart-detail-row:first-child{border-left:0}
.chart-detail-bank{
  min-width:0;
  display:grid;
  grid-template-columns:9px minmax(0,1fr);
  grid-template-areas:
    "dot bank"
    ". status";
  align-items:center;
  column-gap:7px;
}
.chart-detail-bank>i{
  grid-area:dot;
  display:block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--series-color);
}
.chart-detail-bank>b{
  grid-area:bank;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
}
.chart-detail-bank>small{
  grid-area:status;
  margin-top:2px;
  color:#777;
  font-size:10px;
  line-height:1.3;
  white-space:nowrap;
}
.chart-detail-row>strong{
  flex:0 0 auto;
  font-size:12px;
  font-variant-numeric:tabular-nums;
}
.chart-detail-bot{
  background:#f2f2ee;
}
.chart-detail-bot .chart-detail-bank>i{
  border-radius:0;
  height:0;
  width:10px;
  border-top:2px dashed #94a3b8;
  background:transparent;
}

@media(max-width:760px){
  .full-chart-card .chart{height:auto!important}
  .chart-plot{height:230px}
  .chart-detail{
    margin-top:9px;
    padding:9px 10px;
    border-radius:6px;
  }
  .chart-detail-time{
    margin-bottom:5px;
    font-size:10px;
  }
  .chart-detail-list{
    grid-template-columns:1fr;
  }
  .chart-detail-row{
    min-height:46px;
    padding:7px 4px;
    border-left:0;
    border-top:1px solid #e0e0da;
  }
  .chart-detail-row:first-child{border-top:0}
  .chart-detail-bank>b{font-size:13px}
  .chart-detail-bank>small{
    font-size:10px;
    white-space:normal;
  }
  .chart-detail-row>strong{
    padding-top:1px;
    font-size:13px;
  }
}

@media(max-width:390px){
  .chart-plot{height:215px}
  .chart-detail{padding:8px}
}


/* ======================================================================
   v0.4.5 — finance chart consistency + Thai insight typography
   ====================================================================== */

/* Use a Thai-capable system stack first; Arial alone caused uneven Thai glyphs. */
body,
button,
input,
select{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif!important;
}
html[lang="th"] body,
html[lang="th"] button,
html[lang="th"] input,
html[lang="th"] select{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif!important;
}

/* Historical insights: stable Thai line boxes and no clipped bank labels. */
.insight-card-head h2,
.winner-share-label,
.insight-metrics,
.position-percentile,
.current-position-card{
  letter-spacing:0!important;
}
.insight-card-head h2{
  line-height:1.28!important;
  overflow-wrap:anywhere;
}
.winner-share-label{
  grid-template-columns:32px minmax(0,1fr) auto!important;
  min-height:32px;
  gap:8px!important;
  line-height:1.35!important;
}
.winner-share-label strong{
  min-width:0;
  padding-inline-start:1px;
  overflow:visible!important;
  text-overflow:clip!important;
}
.winner-share-label .bank-icon-wrap{
  width:28px!important;
  height:28px!important;
  flex-basis:28px!important;
}
.insight-metrics span,
.insight-metrics strong,
.insight-note,
.position-percentile span{
  line-height:1.4!important;
}

/* Restore the chart toggle. In all-bank mode keep the legend on one compact rail. */
.full-chart-card .legend-toggle{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-height:34px;
}
.full-chart-card .legend.show-all{
  align-items:flex-start!important;
}
.full-chart-card .legend.show-all .chart-series-legend{
  flex:1 1 auto;
  flex-wrap:nowrap!important;
  overflow-x:auto!important;
  padding-bottom:5px;
  scrollbar-width:thin;
}

/* Finance-style lines: same weight and opacity for all visible primary series. */
.series-line.finance-series{
  fill:none!important;
  stroke:var(--series-color)!important;
  stroke-width:2!important;
  opacity:.82!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  vector-effect:non-scaling-stroke;
}
.series-line.carry-tail{
  fill:none!important;
  stroke:var(--series-color)!important;
  stroke-width:2!important;
  opacity:.24!important;
  stroke-linecap:round!important;
  vector-effect:non-scaling-stroke;
}
.top-three-chart .finance-series{
  stroke-width:2.2!important;
  opacity:.88!important;
}
.all-bank-chart .finance-series{
  stroke-width:1.45!important;
  opacity:.46!important;
}
.all-bank-chart .carry-tail{
  stroke-width:1.45!important;
  opacity:.16!important;
}

/* Historical change nodes are identical across banks. */
.update-dot.changed-dot,
.update-dot.best-update-dot,
.update-dot.changed-dot.best-update-dot{
  fill:#fff!important;
  stroke:var(--series-color)!important;
  stroke-width:2.2!important;
  opacity:1!important;
  vector-effect:non-scaling-stroke;
}

/* Current quote is visually distinct: dark filled dot. */
.current-dot{
  fill:var(--series-color)!important;
  stroke:#111!important;
  stroke-width:1.1!important;
  opacity:1!important;
  vector-effect:non-scaling-stroke;
}
.all-bank-chart .current-dot{
  stroke-width:.9!important;
}

/* Hover indicator follows the pointer continuously. */
.finance-crosshair{
  stroke:#454545!important;
  stroke-width:1.25!important;
  stroke-dasharray:5 4!important;
  opacity:.95!important;
  vector-effect:non-scaling-stroke;
  pointer-events:none;
}
.hover-dots{pointer-events:none}
.hover-dot{
  fill:#fff!important;
  stroke:var(--series-color)!important;
  stroke-width:2.3!important;
  vector-effect:non-scaling-stroke;
}
.capture{cursor:crosshair}

/* BOT remains a secondary reference. */
.series-line.bot-series{
  stroke:#94a3b8!important;
  stroke-width:1.5!important;
  stroke-dasharray:6 5!important;
  opacity:.8!important;
}

/* Keep chart detail calm and aligned with finance-chart interaction. */
.chart-detail-time{
  font-variant-numeric:tabular-nums;
}
.chart-detail-row>strong{
  font-variant-numeric:tabular-nums;
}

/* In all-bank mode the graph is the overview; detail still shows the best five only. */
@media(max-width:760px){
  .full-chart-card .legend.show-all .chart-series-legend{
    max-width:100%;
  }
  .full-chart-card .legend-toggle{
    min-height:40px!important;
  }
  .finance-crosshair{
    stroke-width:1.4!important;
  }
}


/* ======================================================================
   v0.4.7 — first-time-user comparison setup + chart continuity
   ====================================================================== */

/* Advanced comparison setup: questions first, jargon second. */
.comparison-setup{
  display:block!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
}
.comparison-step{
  display:grid!important;
  gap:10px!important;
  margin:0!important;
  padding:16px 0!important;
  border:0!important;
  border-bottom:1px solid #ddd!important;
}
.comparison-step:last-of-type{border-bottom:0!important}
.comparison-step-title{
  display:grid;
  gap:3px;
}
.comparison-step-title>strong{
  font-size:15px!important;
  line-height:1.3!important;
  color:#111;
}
.comparison-step-title>span{
  max-width:640px;
  color:#666!important;
  font-size:12px!important;
  line-height:1.45!important;
}
.comparison-choice-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
  height:auto!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.comparison-choice{
  position:relative;
  display:grid!important;
  gap:4px!important;
  align-content:start;
  min-width:0!important;
  min-height:74px!important;
  padding:12px 14px!important;
  border:1px solid #bbb!important;
  background:#fff!important;
  color:#111!important;
  text-align:left!important;
  cursor:pointer;
  box-shadow:none!important;
}
.comparison-choice:hover{
  border-color:#777!important;
  background:#fafcff!important;
}
.comparison-choice.active{
  border:2px solid #111!important;
  padding:11px 13px!important;
  background:#eef6ff!important;
  box-shadow:inset 0 -3px 0 #2f80ed!important;
}
.comparison-choice strong{
  display:block;
  font:800 13px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif!important;
  white-space:normal!important;
}
.comparison-choice small{
  display:block;
  color:#666;
  font:500 11px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif!important;
  white-space:normal!important;
}
.comparison-step-conditional[hidden]{display:none!important}
.fee-payer-options{margin-top:1px}
.fee-coverage-note{
  display:flex;
  align-items:flex-start;
  gap:8px;
  flex-wrap:wrap;
  margin-top:1px;
  padding:9px 10px;
  background:#f7f7f2;
  border-left:3px solid #2f80ed;
}
.fee-coverage-note .fee-coverage{
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#174ea6!important;
  font-size:11px!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
.fee-coverage-note small{
  color:#666;
  font-size:11px;
  line-height:1.4;
}
.bank-scope-row.comparison-step{
  display:grid!important;
  align-items:stretch!important;
  gap:10px!important;
  margin:0!important;
  padding:16px 0!important;
  border-top:0!important;
  border-bottom:0!important;
}
.bank-scope-switch{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
  width:100%!important;
  border:0!important;
  background:transparent!important;
}
.bank-scope-switch button{
  display:grid!important;
  min-height:74px!important;
  padding:12px 14px!important;
  border:1px solid #bbb!important;
  background:#fff!important;
  box-shadow:none!important;
  justify-content:stretch!important;
}
.bank-scope-switch button.active{
  border:2px solid #111!important;
  padding:11px 13px!important;
  background:#eef6ff!important;
  box-shadow:inset 0 -3px 0 #2f80ed!important;
}
.bank-scope-switch #myBanksCount,
.choice-count{
  display:inline-grid!important;
  place-items:center;
  min-width:20px!important;
  height:20px!important;
  margin-left:4px;
  padding:0 5px!important;
  border:1px solid #999!important;
  background:#fff!important;
  font-size:10px!important;
  line-height:1!important;
}
.bank-scope-caret{display:none!important}

/* The collapsed summary should remain short and scannable. */
.advanced-options>summary small{
  color:#666!important;
  font-weight:650!important;
}

/* Chart: uninterrupted step line through the latest real node to now. */
.series-line.finance-series,
.series-line.carry-tail{
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.current-dot{
  filter:drop-shadow(0 0 1px rgba(0,0,0,.18));
}
.hover-dot{
  fill:#fff!important;
  stroke-width:2.4!important;
}
.finance-crosshair{
  stroke-dasharray:4 4!important;
}

/* All-bank view stays available without turning every historical change into noise. */

@media(max-width:760px){
  .comparison-step{
    padding:14px 0!important;
    gap:9px!important;
  }
  .comparison-choice-grid,
  .bank-scope-switch{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .comparison-choice,
  .bank-scope-switch button{
    min-height:68px!important;
    padding:11px 12px!important;
  }
  .comparison-choice.active,
  .bank-scope-switch button.active{
    padding:10px 11px!important;
  }
  .comparison-step-title>strong{font-size:14px!important}
  .comparison-step-title>span{font-size:11px!important}
  .fee-coverage-note{
    display:grid;
    gap:3px;
  }
  .fee-coverage-note .fee-coverage{white-space:normal!important}
}


/* ======================================================================
   v0.4.8 — final FX chart language
   1D/7D step-after, 30D daily line, adjustable visible window.
   ====================================================================== */

/* Equal visual weight for the primary Top 3. */
.top-three-chart path.finance-series.top-bank-series{
  stroke:var(--series-color)!important;
  stroke-width:2.2!important;
  opacity:.9!important;
  fill:none!important;
}
.top-three-chart .update-dot.changed-dot{
  fill:#fff!important;
  stroke:var(--series-color)!important;
  stroke-width:2.2!important;
  opacity:1!important;
}
.top-three-chart .current-dot.top-bank-series{
  fill:var(--series-color)!important;
  stroke:#111!important;
  stroke-width:1.1!important;
  opacity:1!important;
}

/* All banks: context fades to gray; Top 3 stay colored. */
.all-bank-chart path.finance-series.context-bank-series{
  stroke:#b7bbc1!important;
  stroke-width:1.25!important;
  opacity:.7!important;
}
.all-bank-chart path.finance-series.top-bank-series{
  stroke:var(--series-color)!important;
  stroke-width:2!important;
  opacity:.92!important;
}
.all-bank-chart .current-dot.context-bank-series{
  fill:#b7bbc1!important;
  stroke:#777!important;
  stroke-width:.8!important;
  opacity:.9!important;
}
.all-bank-chart .current-dot.top-bank-series{
  fill:var(--series-color)!important;
  stroke:#111!important;
  stroke-width:1!important;
}

/* Hovered all-bank series rises above the context layer. */
.all-bank-chart path.finance-series.is-hovered-bank{
  stroke:var(--series-color)!important;
  stroke-width:2.8!important;
  opacity:1!important;
}
.all-bank-chart .current-dot.is-hovered-bank{
  fill:var(--series-color)!important;
  stroke:#111!important;
  stroke-width:1.2!important;
  opacity:1!important;
}

/* Hollow historical nodes + solid current point. */
.update-dot.changed-dot{
  fill:#fff!important;
  stroke:var(--series-color)!important;
  stroke-width:2.2!important;
  vector-effect:non-scaling-stroke;
}
.current-dot{
  fill:var(--series-color)!important;
  stroke:#111!important;
  stroke-width:1.1!important;
  vector-effect:non-scaling-stroke;
}

/* BOT stays visually independent. */
.series-line.bot-series{
  stroke:#94a3b8!important;
  stroke-width:1.5!important;
  stroke-dasharray:6 5!important;
  opacity:.85!important;
}

/* Hover crosshair + exact intersection points. */
.finance-crosshair{
  stroke:#424242!important;
  stroke-width:1.2!important;
  stroke-dasharray:4 4!important;
  opacity:.95!important;
  pointer-events:none;
  vector-effect:non-scaling-stroke;
}
.hover-dot{
  fill:#fff!important;
  stroke:var(--series-color)!important;
  stroke-width:2.4!important;
  vector-effect:non-scaling-stroke;
}
.bot-hover-dot{
  fill:#fff!important;
  stroke:#94a3b8!important;
  stroke-width:2!important;
}
.hover-dots{pointer-events:none}

/* Legend mirrors the all-bank chart hierarchy. */
.chart-series-chip.context-bank-chip{
  color:#777;
  border-color:#d7d7d1!important;
  background:#fafaf8!important;
}
.chart-series-chip.context-bank-chip .chart-series-dot{
  background:#b7bbc1!important;
}
.chart-series-chip.top-bank-chip{
  color:#111;
}
.chart-series-chip.is-hovered-bank{
  border-color:#111!important;
  background:#eef6ff!important;
  color:#111!important;
}
.chart-series-chip.is-hovered-bank .chart-series-dot{
  background:var(--series-color)!important;
}

/* 30D is a daily trend line, not an intraday staircase. */
.full-chart-card:has(button[data-range="30"].active) .chart-detail-time{
  font-weight:800;
}

@media(max-width:760px){
  .all-bank-chart path.finance-series.context-bank-series{
    stroke-width:1.1!important;
    opacity:.58!important;
  }
  .all-bank-chart path.finance-series.is-hovered-bank{
    stroke-width:2.5!important;
  }
}


/* ======================================================================
   v0.4.11 — 7-day decision card: money impact first
   ====================================================================== */
@media(min-width:901px){
  .insights-grid{
    grid-template-columns:minmax(0,1fr) minmax(460px,1fr)!important;
  }
}

.current-position-card{
  display:flex!important;
  flex-direction:column;
  min-width:0;
}
.position-card-head{
  margin-bottom:10px!important;
}
.position-card-head h2{
  font-size:24px!important;
  line-height:1.2!important;
}
.position-card-head .direction-note{
  margin-top:5px!important;
  font-size:12px!important;
}

.position-hero{
  display:grid;
  grid-template-columns:minmax(180px,.78fr) minmax(260px,1.22fr);
  gap:14px;
  margin:4px 0 18px;
}
.current-position-card .position-current{
  display:flex!important;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  min-width:0;
  padding:14px 0!important;
  border:0!important;
}
.current-position-card .position-current span,
.position-impact>span{
  color:#666;
  font-size:11px;
  font-weight:800;
  line-height:1.35;
}
.current-position-card .position-current strong{
  display:block!important;
  font-size:30px!important;
  line-height:1!important;
  letter-spacing:-.025em;
  white-space:nowrap;
}
.position-impact{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:14px 16px;
  border-left:4px solid #2f80ed;
  background:#f4f8ff;
}
.position-impact strong{
  margin-top:5px;
  color:#174ea6;
  font-size:34px;
  line-height:1;
  letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
}
.position-impact small{
  margin-top:7px;
  color:#555;
  font-size:11px;
  line-height:1.4;
}

.position-range{
  position:relative;
  margin:2px 4px 20px;
  padding-bottom:22px;
}
.position-range-labels{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:7px;
}
.position-range-labels>div{
  display:grid;
  gap:2px;
}
.position-range-worst{
  text-align:right;
}
.position-range-labels span{
  color:#666;
  font-size:10px;
  font-weight:800;
}
.position-range-labels strong{
  font-size:13px;
  font-variant-numeric:tabular-nums;
}
.current-position-card .position-track{
  position:relative;
  height:22px;
  margin:0!important;
}
.current-position-card .position-track-line{
  position:absolute;
  left:0;
  right:0;
  top:9px;
  height:4px;
  background:linear-gradient(90deg,#2f80ed 0%,#111 50%,#b14b4b 100%);
}
.current-position-card .position-marker{
  position:absolute;
  top:1px;
  width:20px;
  height:20px;
  border-radius:50%;
  border:3px solid #111;
  background:#ffb52e;
  transform:translateX(-50%);
  z-index:2;
}
.position-now-label{
  position:absolute;
  bottom:0;
  width:max-content;
  max-width:42%;
  transform:translateX(-50%);
  padding-top:3px;
  color:#333;
  font-size:10px;
  font-weight:800;
  line-height:1.2;
  white-space:nowrap;
}

.position-stats-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:2px;
  border-top:1px solid #c9c9c2;
  border-bottom:1px solid #c9c9c2;
}
.position-stats-grid>div{
  min-width:0;
  padding:12px 14px;
  border-right:1px solid #ddd;
}
.position-stats-grid>div:first-child{padding-left:0}
.position-stats-grid>div:last-child{
  padding-right:0;
  border-right:0;
}
.position-stats-grid span{
  display:block;
  color:#666;
  font-size:10px;
  font-weight:800;
  line-height:1.3;
}
.position-stats-grid strong{
  display:block;
  margin-top:5px;
  font-size:17px;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.position-stats-grid small{
  display:block;
  margin-top:5px;
  color:#777;
  font-size:9px;
  line-height:1.35;
}

.current-position-card .position-percentile{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:3px!important;
  margin:16px 0 0!important;
  padding:10px 12px!important;
  border:0!important;
  border-left:4px solid #2f80ed!important;
  background:#f7f9ff!important;
}
.current-position-card .position-percentile strong{
  color:#174ea6!important;
  font-size:14px!important;
  line-height:1.35!important;
}
.current-position-card .position-percentile span{
  color:#555!important;
  font-size:11px!important;
  line-height:1.35!important;
  font-weight:600!important;
}
.current-position-card>.insight-note:last-child{
  margin-top:10px!important;
  color:#777!important;
  font-size:10px!important;
  line-height:1.4!important;
}

@media(max-width:1100px){
  .position-hero{
    grid-template-columns:1fr;
    gap:8px;
  }
  .position-impact{
    min-height:96px;
  }
}

@media(max-width:620px){
  .position-card-head h2{font-size:22px!important}
  .position-hero{margin-bottom:14px}
  .current-position-card .position-current{
    padding:8px 0!important;
  }
  .current-position-card .position-current strong{
    font-size:27px!important;
  }
  .position-impact{
    padding:12px 13px;
  }
  .position-impact strong{
    font-size:30px;
  }
  .position-stats-grid{
    grid-template-columns:1fr;
  }
  .position-stats-grid>div,
  .position-stats-grid>div:first-child,
  .position-stats-grid>div:last-child{
    padding:10px 0;
    border-right:0;
    border-bottom:1px solid #e0e0da;
  }
  .position-stats-grid>div:last-child{border-bottom:0}
  .position-stats-grid strong{font-size:16px}
  .position-now-label{
    max-width:50%;
    font-size:9px;
  }
}


/* ======================================================================
   v0.4.12 — decision-grade historical insights
   Money impact + bank consistency + My Banks vs market best.
   ====================================================================== */

.consistency-card-head{
  margin-bottom:14px!important;
}
.consistency-card-head h2{
  font-size:23px!important;
  line-height:1.2!important;
}
.consistency-card-head .direction-note{
  margin-top:5px!important;
  font-size:12px!important;
  line-height:1.45!important;
}

.consistency-list{
  display:grid;
  gap:12px;
}
.consistency-row,
.my-bank-vs-row{
  padding:12px 0;
  border-bottom:1px solid #ddd;
}
.consistency-row:last-child,
.my-bank-vs-row:last-child{
  border-bottom:0;
}
.consistency-head{
  display:grid;
  grid-template-columns:32px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
}
.consistency-head>div{
  min-width:0;
}
.consistency-head strong{
  display:block;
  font-size:14px;
  line-height:1.25;
}
.consistency-head small{
  display:block;
  margin-top:2px;
  color:#666;
  font-size:10px;
  line-height:1.35;
  white-space:normal;
}
.consistency-head>b{
  color:#174ea6;
  font-size:18px;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.consistency-track{
  height:7px;
  margin:8px 0 5px 41px;
  overflow:hidden;
  border:1px solid #c7c7c0;
  background:#eee;
}
.consistency-track>i{
  display:block;
  height:100%;
  background:#2f80ed;
}
.consistency-foot{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-left:41px;
  color:#666;
  font-size:10px;
  line-height:1.35;
}
.consistency-foot span:last-child{
  flex:0 0 auto;
  font-weight:800;
}

.my-bank-vs-head{
  display:grid;
  grid-template-columns:32px minmax(0,1fr) minmax(120px,auto);
  align-items:center;
  gap:9px;
}
.my-bank-vs-name{
  min-width:0;
}
.my-bank-vs-name strong{
  display:block;
  font-size:14px;
  line-height:1.25;
}
.my-bank-vs-name small{
  display:block;
  margin-top:2px;
  color:#666;
  font-size:10px;
  line-height:1.35;
}
.my-bank-vs-money{
  color:#174ea6;
  font-size:15px;
  line-height:1.2;
  text-align:right;
  white-space:normal;
}
.my-bank-vs-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin:8px 0 0 41px;
  color:#666;
  font-size:10px;
  line-height:1.4;
}
.my-bank-vs-meta span:last-child{
  text-align:right;
}

/* Best / median / worst now explain the THB consequence too. */
.position-stat-impact{
  display:block;
  margin-top:7px;
  color:#174ea6;
  font-size:10px;
  font-style:normal;
  font-weight:800;
  line-height:1.35;
}
.position-stats-grid>div:nth-child(2) .position-stat-impact{
  color:#555;
}
.position-stats-grid>div:nth-child(3) .position-stat-impact{
  color:#087a4f;
}

/* Give the decision card slightly more room on larger screens. */
@media(min-width:1000px){
  .insights-grid{
    grid-template-columns:minmax(380px,.9fr) minmax(560px,1.1fr)!important;
  }
}

@media(max-width:760px){
  .consistency-head{
    grid-template-columns:30px minmax(0,1fr) auto;
  }
  .consistency-head>b{
    font-size:16px;
  }
  .consistency-track,
  .consistency-foot,
  .my-bank-vs-meta{
    margin-left:39px;
  }
  .consistency-foot,
  .my-bank-vs-meta{
    flex-direction:column;
    gap:3px;
  }
  .my-bank-vs-head{
    grid-template-columns:30px minmax(0,1fr);
  }
  .my-bank-vs-money{
    grid-column:2;
    text-align:left;
    margin-top:4px;
    font-size:14px;
  }
  .position-stat-impact{
    font-size:10px;
  }
}


/* ======================================================================
   v0.4.13 — browser zoom / responsive reflow hardening
   ====================================================================== */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:clip;
}
*,
*::before,
*::after{
  box-sizing:border-box;
}

.app{
  width:min(1180px,calc(100% - clamp(16px,3vw,48px)))!important;
  max-width:100%!important;
  margin-inline:auto!important;
}

.app,
#dashboard,
.card,
.sentence-builder,
.answer-strip,
.full-chart-card,
.compact-table-card,
.insight-card,
.history-details,
.advanced-options{
  min-width:0!important;
  max-width:100%!important;
}

.section-head,
.answer-strip>div,
.position-hero>*,
.position-stats-grid>div,
.consistency-row,
.my-bank-vs-row{
  min-width:0!important;
}

/* Let the main action surface reflow before content starts pushing sideways. */
@media(max-width:1180px){
  .sentence-line-v3{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  }
  .sentence-line-v3>*{
    min-width:0!important;
    max-width:100%!important;
  }
  .sentence-line-v3 .role-select,
  .sentence-line-v3 .action-select,
  .sentence-line-v3 .currency-select,
  .sentence-line-v3 .retro-amount{
    width:100%!important;
    min-width:0!important;
  }
}

@media(max-width:860px){
  .sentence-line-v3{
    grid-template-columns:1fr!important;
  }
}

/* Charts must size from their live container after browser zoom. */
.full-chart-card,
.chart,
.chart-plot,
.chart-plot svg{
  max-width:100%!important;
}
.chart-plot{
  width:100%!important;
  min-width:0!important;
}

/* Keep ordinary page gestures available on touch devices. */
.chart-plot{
  touch-action:pan-y pinch-zoom!important;
}

@media(max-width:760px){
  .app{
    width:calc(100% - 16px)!important;
  }
}

@media(max-width:390px){
  .app{
    width:calc(100% - 12px)!important;
  }
}


/* ======================================================================
   v0.4.14 — clearer status, fees, inline chart hover, headline rhythm
   ====================================================================== */

/* Hero: intentional two-line message in both languages. */
.retro-hero h1{
  display:grid!important;
  justify-items:start;
  gap:.03em;
  line-height:.94!important;
}
.retro-hero h1 .hero-line{
  display:block;
  width:max-content;
  max-width:100%;
  white-space:nowrap;
}
.retro-hero h1 .hero-highlight{
  margin-left:clamp(18px,4vw,56px);
}
@media(max-width:620px){
  .retro-hero h1{
    line-height:.98!important;
  }
  .retro-hero h1 .hero-highlight{
    margin-left:clamp(10px,5vw,26px);
  }
}

/* Header shortcut for operator health checks. */
.admin-health-link{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 9px;
  border:1px solid #777;
  background:#fff;
  color:#333;
  text-decoration:none;
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
}
.admin-health-link:hover{
  border-color:#111;
  background:#eef6ff;
  color:#111;
}
@media(max-width:620px){
  .admin-health-link{
    min-height:28px;
    padding:0 7px;
    font-size:9px;
  }
  .top-actions .checked{
    display:none;
  }
}

/* Fee mode is visible without opening Advanced options. */
.fee-quick-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:10px;
  padding:9px 10px;
  border:1px solid #c6c6bf;
  background:#f7f7f2;
}
.fee-quick-copy{
  display:grid;
  gap:2px;
  min-width:0;
}
.fee-quick-copy strong{
  font-size:11px;
  line-height:1.3;
}
.fee-quick-copy small{
  color:#666;
  font-size:10px;
  line-height:1.4;
}
.fee-quick-toggle{
  flex:0 0 auto;
  min-height:32px;
  padding:0 10px;
  border:1px solid #111;
  background:#fff;
  color:#174ea6;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}
.fee-quick-toggle:hover{
  background:#eef6ff;
}
.fee-quick-bar.is-fees{
  border-color:#d49a35;
  background:#fff7e8;
}
.fee-quick-bar.is-fees .fee-quick-copy strong{
  color:#8a4b00;
}
.fee-quick-bar.is-fees .fee-quick-toggle{
  color:#111;
  background:#fff;
}
@media(max-width:620px){
  .fee-quick-bar{
    align-items:stretch;
    flex-direction:column;
    gap:8px;
  }
  .fee-quick-toggle{
    width:100%;
    min-height:40px;
  }
}

/* Useful source-health information belongs beside the bank, not in fee notes. */
.bank-check-status{
  display:block;
  margin-top:3px;
  color:#666;
  font-size:9px;
  font-weight:650;
  line-height:1.25;
}
.bank-check-status.check-aging{
  color:#8a5700;
}
.bank-check-status.check-stale{
  color:#a12828;
  font-weight:800;
}

/* Put the money consequence directly under the total/result. */
.total-cell .total-rank-diff{
  display:block;
  margin-top:4px;
  font-size:9px;
  font-weight:850;
  line-height:1.25;
  white-space:normal;
}
.total-rank-best{
  color:#08783f;
}
.total-rank-worse{
  color:#b33b2e;
}
@media(max-width:760px){
  .bank-check-status{
    margin-top:3px;
    font-size:10px;
  }
  .total-cell .total-rank-diff{
    margin-top:4px;
    font-size:10px;
  }
}

/* Chart hover: data lives on the plotted line instead of in a separate window. */
.hover-labels,
.hover-time,
.hover-line-label,
.hover-time-label{
  pointer-events:none;
}
.hover-label-bg{
  fill:#fff;
  stroke:var(--series-color);
  stroke-width:1.2;
  vector-effect:non-scaling-stroke;
}
.hover-label-text{
  fill:#111;
  font-size:9px;
  font-weight:800;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif;
}
.hover-label-leader{
  stroke:var(--series-color);
  stroke-width:1;
  opacity:.7;
  vector-effect:non-scaling-stroke;
}
.hover-time-label rect{
  fill:#111;
  opacity:.92;
}
.hover-time-label text{
  fill:#fff;
  font-size:9px;
  font-weight:800;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif;
}
.chart-detail{
  display:none!important;
}
@media(max-width:620px){
  .hover-label-text,
  .hover-time-label text{
    font-size:8.5px;
  }
}


/* ======================================================================
   v0.4.16 — first-visit UX polish
   One bilingual type scale, clearer spacing, calmer detail density.
   ====================================================================== */
:root{
  --ui-ink:#111;
  --ui-muted:#5f6368;
  --ui-faint:#7a7d82;
  --ui-line:#d3d3cc;
  --ui-soft:#f7f7f3;
  --ui-blue:#1768c5;
  --ui-blue-soft:#eef6ff;
  --ui-green:#08783f;
  --ui-red:#b33b2e;

  --ui-text:14px;
  --ui-small:12px;
  --ui-label:11px;
  --ui-micro:10px;
  --ui-section:24px;
  --ui-card-title:20px;

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
}

body,
button,
input,
select{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif!important;
}
body{
  color:var(--ui-ink);
  font-size:var(--ui-text);
  line-height:1.45;
}
html[lang="th"] body,
html[lang="th"] button,
html[lang="th"] input,
html[lang="th"] select{
  line-height:1.5;
  letter-spacing:0!important;
}
html[lang="th"] .eyebrow,
html[lang="th"] th,
html[lang="th"] .answer-kicker,
html[lang="th"] .answer-total>span,
html[lang="th"] .answer-rate>span,
html[lang="th"] .answer-saving>span{
  letter-spacing:.02em!important;
}

/* First impression: strong headline, calm supporting copy. */
.retro-hero{
  padding:30px 0 20px!important;
}
.eyebrow{
  margin:0 0 10px!important;
  color:var(--ui-muted)!important;
  font-size:11px!important;
  font-weight:800!important;
  letter-spacing:.08em!important;
}
.retro-hero h1{
  margin:0 0 14px!important;
  font-size:clamp(44px,5vw,68px)!important;
  line-height:.96!important;
  letter-spacing:-.045em!important;
}
html[lang="th"] .retro-hero h1{
  line-height:1.03!important;
  letter-spacing:-.025em!important;
}
.hero-sub{
  max-width:760px;
  margin:0 0 20px!important;
  color:#4f5358!important;
  font-size:16px!important;
  line-height:1.55!important;
  font-weight:520;
}

/* Primary task card: generous enough to scan, not oversized. */
.sentence-builder{
  margin-top:0!important;
  padding:18px!important;
}
.sentence-line-v3{
  gap:12px!important;
  font-size:15px!important;
}
.sentence-line-v3 .sentence-text{
  color:#4f5358!important;
  font-size:13px!important;
  font-weight:750!important;
}
.sentence-line-v3 .retro-select,
.exchange-box,
.exchange-reverse,
.sentence-line-v3 .retro-primary{
  min-height:44px!important;
  height:44px!important;
}
.sentence-line-v3 .retro-select{
  font-size:14px!important;
  font-weight:720!important;
}
.exchange-box input{
  font-size:16px!important;
}
.exchange-output>span#convertedAmount{
  font-size:17px!important;
}
.sentence-line-v3 .retro-primary{
  font-size:13px!important;
  font-weight:850!important;
}
.scenario-row{
  margin-top:14px!important;
  padding-top:12px!important;
  gap:12px!important;
}
.scenario-row .scenario-line{
  color:#383b3f!important;
  font-size:12px!important;
  line-height:1.45!important;
}
.scenario-hint{
  color:var(--ui-faint)!important;
  font-size:11px!important;
  line-height:1.4!important;
}

/* Fee state reads as a mode, not another wall of settings. */
.fee-quick-bar{
  margin-top:12px!important;
  padding:10px 12px!important;
  border-color:var(--ui-line)!important;
}
.fee-quick-copy{gap:3px!important}
.fee-quick-copy strong{
  font-size:12px!important;
  line-height:1.35!important;
}
.fee-quick-copy small{
  color:var(--ui-muted)!important;
  font-size:11px!important;
  line-height:1.4!important;
}
.fee-quick-toggle{
  min-height:36px!important;
  padding:0 12px!important;
  font-size:11px!important;
}

/* Consistent disclosure treatment. */
.advanced-options{
  margin-top:12px!important;
  border-top:1px solid var(--ui-line)!important;
}
.advanced-options>summary{
  min-height:44px!important;
  padding:10px 0 0!important;
  color:#333!important;
  font-size:12px!important;
}
.advanced-options>summary:before{
  width:22px!important;
  height:22px!important;
  flex-basis:22px!important;
}
.advanced-options>summary small{
  color:var(--ui-muted)!important;
  font-size:10.5px!important;
  line-height:1.35!important;
}
.advanced-options-body{
  margin-top:10px!important;
  padding:16px!important;
  border-color:var(--ui-line)!important;
  background:#fbfbf8!important;
}
.comparison-step{
  gap:12px!important;
  padding:16px 0!important;
  border-bottom-color:var(--ui-line)!important;
}
.comparison-step-title{
  gap:4px!important;
}
.comparison-step-title>strong{
  font-size:14px!important;
  line-height:1.35!important;
}
.comparison-step-title>span{
  color:var(--ui-muted)!important;
  font-size:11.5px!important;
  line-height:1.45!important;
}
.comparison-choice{
  min-height:78px!important;
  padding:13px 14px!important;
}
.comparison-choice.active{
  padding:12px 13px!important;
}
.comparison-choice strong{
  font-size:13px!important;
  line-height:1.35!important;
}
.comparison-choice small{
  margin-top:1px;
  color:var(--ui-muted)!important;
  font-size:11px!important;
  line-height:1.45!important;
}
.fee-coverage-note{
  margin-top:4px!important;
  padding:10px 12px!important;
}
.fee-coverage-note .fee-coverage,
.fee-coverage-note small{
  font-size:10.5px!important;
  line-height:1.45!important;
}

/* Vertical rhythm between the decision sections. */
#dashboard{
  display:block;
}
#dashboard[hidden]{display:none!important}
#dashboard>section,
#dashboard>details{
  margin-bottom:18px;
}
#dashboard>.answer-details{
  margin-top:-10px!important;
  margin-bottom:20px!important;
}
#dashboard>.history-details{
  margin-top:24px!important;
  margin-bottom:18px!important;
}

/* Primary result card: labels readable, number remains dominant. */
.answer-strip{
  margin-bottom:10px!important;
}
.answer-strip>div{
  padding:15px 16px!important;
}
.answer-kicker,
.answer-total>span,
.answer-rate>span,
.answer-saving>span{
  color:var(--ui-muted)!important;
  font-size:10px!important;
  font-weight:850!important;
  letter-spacing:.04em!important;
  line-height:1.25!important;
}
.answer-bank-copy strong{
  font-size:17px!important;
  line-height:1.25!important;
}
.answer-verified{
  margin-top:4px!important;
  color:var(--ui-muted)!important;
  font-size:10.5px!important;
  line-height:1.35!important;
}
.answer-total strong{
  margin-top:5px!important;
  font-size:clamp(30px,2.7vw,42px)!important;
}
.answer-total small{
  margin-top:6px!important;
  color:var(--ui-muted)!important;
  font-size:10.5px!important;
  line-height:1.35!important;
}
.answer-rate strong,
.answer-saving strong{
  margin-top:7px!important;
  font-size:17px!important;
}
.answer-compare-button{
  min-height:38px!important;
  font-size:11px!important;
}

/* Rich disclosure summary: explains what is inside before opening. */
.details-summary{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  padding:10px 12px!important;
  border:1px solid var(--ui-line)!important;
  background:#fafaf7!important;
  text-decoration:none!important;
  list-style:none!important;
}
.details-summary::-webkit-details-marker{display:none!important}
.details-summary:after{content:none!important}
.details-summary-copy{
  display:grid;
  gap:2px;
  min-width:0;
}
.details-summary-copy strong{
  color:#222;
  font-size:12px;
  font-weight:850;
  line-height:1.3;
}
.details-summary-copy small{
  color:var(--ui-muted);
  font-size:10.5px;
  line-height:1.4;
}
.details-summary-icon{
  position:relative;
  flex:0 0 22px;
  width:22px;
  height:22px;
  border:1px solid #999;
  background:#fff;
}
.details-summary-icon:before,
.details-summary-icon:after{
  content:"";
  position:absolute;
  left:5px;
  right:5px;
  top:10px;
  height:1px;
  background:#333;
}
.details-summary-icon:after{
  top:5px;
  bottom:5px;
  left:10px;
  right:auto;
  width:1px;
  height:auto;
}
details[open]>.details-summary .details-summary-icon:after{
  display:none;
}
.answer-details-grid{
  margin-top:0!important;
  border-top:0!important;
  border-color:var(--ui-line)!important;
}
.answer-detail-item{
  padding:13px 14px!important;
  border-color:var(--ui-line)!important;
}
.answer-detail-item>span{
  margin-bottom:5px!important;
  color:var(--ui-muted)!important;
  font-size:10.5px!important;
  line-height:1.3!important;
}
.answer-detail-item>strong{
  font-size:13px!important;
  line-height:1.35!important;
}
.answer-detail-item small{
  margin-top:4px!important;
  color:var(--ui-muted)!important;
  font-size:10px!important;
  line-height:1.45!important;
}

/* Section headings: same hierarchy everywhere. */
.section-head{
  gap:16px!important;
  margin-bottom:12px!important;
}
.section-head h2{
  margin:0!important;
  font-size:var(--ui-section)!important;
  line-height:1.2!important;
  letter-spacing:-.02em!important;
}
html[lang="th"] .section-head h2{
  letter-spacing:0!important;
}
.direction-note,
.compact-table-card .section-head .muted{
  display:block;
  margin-top:4px!important;
  color:var(--ui-muted)!important;
  font-size:12px!important;
  line-height:1.45!important;
}

/* Comparison table: enough space to read without feeling like a spreadsheet. */
.compact-table-card{
  padding:18px!important;
}
.compact-table-card .section-head{
  margin-bottom:10px!important;
}
.compact-table-card th{
  padding:10px 10px!important;
  color:#65696e!important;
  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:.03em!important;
}
.compact-table-card td{
  padding:12px 10px!important;
  font-size:12px!important;
}
.bank-cell .bank strong{
  font-size:13px!important;
  line-height:1.35!important;
}
.bank-check-status{
  margin-top:4px!important;
  color:var(--ui-muted)!important;
  font-size:10px!important;
  line-height:1.35!important;
}
.rate-cell strong{
  font-size:14px!important;
}
.total-cell>strong{
  font-size:17px!important;
}
.total-cell .total-rank-diff{
  margin-top:5px!important;
  font-size:10px!important;
  line-height:1.35!important;
}
.stale-notice{
  margin:8px 0 10px!important;
  padding:9px 11px!important;
  font-size:11px!important;
  line-height:1.45!important;
}
.bank-detail-panel{
  padding:12px!important;
  background:#fafaf7!important;
}
.bank-detail-panel>div{
  padding:9px 11px!important;
  border-color:var(--ui-line)!important;
}
.bank-detail-panel span{
  margin-bottom:5px!important;
  color:var(--ui-muted)!important;
  font-size:10.5px!important;
  line-height:1.3!important;
}
.bank-detail-panel strong,
.detail-source-link{
  font-size:12px!important;
  line-height:1.45!important;
}
.table-toggle{
  min-height:38px!important;
  font-size:11px!important;
}

/* Chart: readable labels without turning controls into equal-weight content. */
.full-chart-card{
  padding:18px!important;
  margin-bottom:0!important;
}
.full-chart-card .section-head{
  margin-bottom:6px!important;
}
.full-chart-card .section-head h2{
  font-size:var(--ui-section)!important;
}
.segmented.compact{
  min-width:126px!important;
  height:38px!important;
}
.segmented.compact button{
  font-size:11px!important;
}
.chart-series-chip{
  min-height:34px!important;
  padding:7px 9px!important;
}
.chart-series-chip b{
  font-size:11.5px!important;
}
.chart-series-chip small,
.chart-series-chip em{
  font-size:10.5px!important;
}
.axis-label{
  font-size:10.5px!important;
}
.chart-help-details{
  margin-top:10px!important;
  padding-top:8px;
  border-top:1px solid #e0e0da;
}
.chart-help-details>summary{
  color:#4f5358!important;
  font-size:11px!important;
  font-weight:800!important;
  text-decoration:none!important;
}
.chart-help-details .chart-help{
  max-width:820px;
  margin:6px 0 0!important;
  color:var(--ui-muted)!important;
  font-size:11px!important;
  line-height:1.5!important;
}

/* Decision insights become a real section, not hidden-looking footnotes. */
.history-details{
  padding-top:0!important;
}
.history-details>.history-summary{
  margin:0 0 14px!important;
  padding:14px 0!important;
  border:0!important;
  border-top:2px solid #111!important;
  border-bottom:1px solid var(--ui-line)!important;
  background:transparent!important;
}
.history-summary .details-summary-copy strong{
  font-size:19px!important;
  line-height:1.25!important;
}
.history-summary .details-summary-copy small{
  margin-top:2px;
  font-size:11px!important;
  line-height:1.45!important;
}
.history-details .insights-grid{
  gap:16px!important;
}
.insight-card{
  padding:18px!important;
  box-shadow:2px 2px 0 #111!important;
}
.insight-card-head{
  margin-bottom:14px!important;
}
.insight-card-head h2,
.position-card-head h2,
.consistency-card-head h2{
  margin:0!important;
  font-size:20px!important;
  line-height:1.3!important;
  letter-spacing:-.01em!important;
}
html[lang="th"] .insight-card-head h2,
html[lang="th"] .position-card-head h2,
html[lang="th"] .consistency-card-head h2{
  letter-spacing:0!important;
}
.insight-card-head .direction-note{
  margin-top:4px!important;
  font-size:11.5px!important;
}
.insight-scope{
  padding:5px 7px!important;
  font-size:10px!important;
}
.position-hero{
  gap:12px!important;
  margin:6px 0 20px!important;
}
.current-position-card .position-current span,
.position-impact>span{
  color:var(--ui-muted)!important;
  font-size:11px!important;
}
.current-position-card .position-current strong{
  font-size:29px!important;
}
.position-impact{
  padding:15px 16px!important;
}
.position-impact strong{
  font-size:32px!important;
}
.position-impact small{
  color:var(--ui-muted)!important;
  font-size:11px!important;
}
.position-range-labels span,
.position-stats-grid span{
  color:var(--ui-muted)!important;
  font-size:10.5px!important;
}
.position-range-labels strong{
  font-size:13px!important;
}
.position-stats-grid>div{
  padding:13px 14px!important;
}
.position-stats-grid strong{
  font-size:17px!important;
}
.position-stats-grid small{
  color:var(--ui-muted)!important;
  font-size:10px!important;
  line-height:1.4!important;
}
.position-stat-impact{
  margin-top:6px!important;
  font-size:10.5px!important;
  line-height:1.4!important;
}
.current-position-card .position-percentile{
  margin-top:14px!important;
  padding:11px 12px!important;
}
.current-position-card .position-percentile strong{
  font-size:13px!important;
}
.current-position-card .position-percentile span{
  font-size:10.5px!important;
}
.insight-note{
  color:var(--ui-muted)!important;
  font-size:10px!important;
  line-height:1.45!important;
}
.consistency-list{
  gap:6px!important;
}
.consistency-row,
.my-bank-vs-row{
  padding:11px 0!important;
}
.consistency-head strong,
.my-bank-vs-name strong{
  font-size:13px!important;
}
.consistency-head small,
.my-bank-vs-name small,
.consistency-foot,
.my-bank-vs-meta{
  color:var(--ui-muted)!important;
  font-size:10.5px!important;
  line-height:1.4!important;
}
.consistency-head>b{
  font-size:17px!important;
}
.consistency-track{
  margin-top:7px!important;
  margin-bottom:5px!important;
}

/* Footer / true footnotes are the only text allowed to feel tiny. */
.footnote,
.current-position-card>.insight-note:last-child{
  color:#74777b!important;
  font-size:10px!important;
  line-height:1.5!important;
}

@media(max-width:900px){
  .retro-hero h1{
    font-size:clamp(40px,7vw,56px)!important;
  }
  .hero-sub{
    font-size:15px!important;
  }
  .answer-strip>div{
    padding:14px!important;
  }
  .section-head h2,
  .full-chart-card .section-head h2{
    font-size:22px!important;
  }
}

@media(max-width:620px){
  :root{
    --ui-text:14px;
    --ui-section:21px;
  }
  .retro-hero{
    padding:22px 0 16px!important;
  }
  .retro-hero h1{
    font-size:38px!important;
  }
  html[lang="th"] .retro-hero h1{
    line-height:1.06!important;
  }
  .hero-sub{
    margin-bottom:16px!important;
    font-size:14px!important;
    line-height:1.5!important;
  }
  .sentence-builder{
    padding:14px!important;
  }
  .scenario-row{
    margin-top:11px!important;
    padding-top:10px!important;
  }
  .fee-quick-bar{
    padding:10px!important;
  }
  .advanced-options-body{
    padding:13px!important;
  }
  .comparison-choice{
    min-height:68px!important;
    padding:11px 12px!important;
  }
  .comparison-choice.active{
    padding:10px 11px!important;
  }
  .answer-strip>div{
    padding:13px 14px!important;
  }
  .answer-total strong{
    font-size:32px!important;
  }
  .details-summary{
    padding:10px!important;
  }
  .answer-details-grid{
    grid-template-columns:1fr!important;
  }
  .answer-detail-item{
    padding:11px 12px!important;
    border-right:0!important;
    border-bottom:1px solid var(--ui-line)!important;
  }
  .answer-detail-item:last-child{
    border-bottom:0!important;
  }
  .compact-table-card,
  .full-chart-card,
  .insight-card{
    padding:14px!important;
  }
  .compact-table-card .section-head h2,
  .full-chart-card .section-head h2{
    font-size:21px!important;
  }
  .bank-main-row{
    min-height:112px!important;
    padding:12px!important;
  }
  .bank-cell .bank strong{
    font-size:15px!important;
  }
  .total-cell>strong{
    font-size:20px!important;
  }
  .rate-cell strong{
    font-size:13px!important;
  }
  .bank-detail-panel{
    grid-template-columns:1fr!important;
    margin:0!important;
    padding:4px 12px 10px!important;
  }
  .bank-detail-panel>div,
  .bank-detail-panel>div:nth-last-child(-n+2){
    padding:10px 0!important;
    border-right:0!important;
    border-bottom:1px solid var(--ui-line)!important;
  }
  .bank-detail-panel>div:last-child{
    border-bottom:0!important;
  }
  .bank-detail-wide{
    grid-column:auto!important;
  }
  .history-details>.history-summary{
    padding:12px 0!important;
  }
  .history-summary .details-summary-copy strong{
    font-size:17px!important;
  }
  .history-summary .details-summary-copy small{
    font-size:10.5px!important;
  }
  .history-details .insights-grid{
    gap:12px!important;
  }
  .insight-card-head h2,
  .position-card-head h2,
  .consistency-card-head h2{
    font-size:19px!important;
  }
  .position-impact strong{
    font-size:28px!important;
  }
  .position-stats-grid{
    grid-template-columns:1fr!important;
  }
}


/* ======================================================================
   v0.4.17 — screenshot-driven execution pass
   Fix wasted desktop space, mobile card height, and chart readability.
   ====================================================================== */

/* Desktop advanced settings should use the full frame, not leave a dead right half. */
@media(min-width:821px){
  .advanced-options-body{
    width:100%!important;
    max-width:none!important;
    display:grid!important;
    grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr)!important;
    gap:18px!important;
    align-items:start!important;
  }
  .advanced-sheet-head{
    grid-column:1/-1!important;
  }
  .advanced-options .comparison-setup{
    grid-column:1!important;
    width:100%!important;
  }
  .advanced-options .bank-scope-row.comparison-step{
    grid-column:2!important;
    align-self:start!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
  }
  .advanced-options .bank-scope-switch{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .advanced-options #bankPicker{
    grid-column:1/-1!important;
  }
  .advanced-options .advanced-sheet-done{
    display:none!important;
  }
}

/* The fee mode is a secondary state on desktop, not another card competing with input. */
@media(min-width:761px){
  .fee-quick-bar{
    margin-top:10px!important;
    padding:10px 0 0!important;
    border:0!important;
    border-top:1px solid var(--ui-line)!important;
    background:transparent!important;
  }
  .fee-quick-bar.is-fees{
    border-color:#d8b36d!important;
    background:transparent!important;
  }
  .fee-quick-toggle{
    min-height:32px!important;
    border-color:#777!important;
    box-shadow:none!important;
  }
}

/* Mobile bank list: keep the information, remove the excessive vertical travel. */
@media(max-width:620px){
  .compact-table-card .section-head{
    margin-bottom:6px!important;
  }
  .bank-main-row{
    grid-template-columns:30px minmax(0,1fr) minmax(82px,.62fr) 18px!important;
    grid-template-areas:
      "rank bank bank chevron"
      "rank total rate chevron"!important;
    min-height:88px!important;
    margin:7px 0 0!important;
    padding:10px 9px!important;
    gap:3px 8px!important;
    border-radius:5px!important;
    box-shadow:none!important;
  }
  .rank-cell{
    align-self:center!important;
  }
  .rank-cell .rank{
    min-width:28px!important;
    width:28px!important;
    height:25px!important;
    font-size:9px!important;
  }
  .bank-cell .bank{
    gap:7px!important;
  }
  .bank-cell .bank-icon-wrap{
    width:30px!important;
    height:30px!important;
    flex-basis:30px!important;
  }
  .bank-cell .bank strong{
    font-size:13px!important;
    line-height:1.25!important;
  }
  .best-chip{
    font-size:8px!important;
    min-height:16px!important;
    padding:1px 4px!important;
  }
  .bank-check-status{
    margin-top:2px!important;
    font-size:9px!important;
    line-height:1.25!important;
  }
  .total-cell{
    padding-top:5px!important;
  }
  .rate-cell{
    padding-top:5px!important;
    text-align:right!important;
  }
  .rate-cell::before,
  .total-cell::before{
    margin-bottom:0!important;
    font-size:8.5px!important;
    line-height:1.2!important;
  }
  .total-cell>strong{
    font-size:17px!important;
    line-height:1.05!important;
  }
  .rate-cell strong{
    font-size:11.5px!important;
    line-height:1.15!important;
  }
  .total-cell .total-rank-diff{
    margin-top:3px!important;
    font-size:8.5px!important;
    line-height:1.2!important;
  }
  .row-chevron{
    width:18px!important;
    font-size:17px!important;
  }
  .bank-main-row[aria-expanded="true"]{
    border-bottom-left-radius:0!important;
    border-bottom-right-radius:0!important;
  }
  .bank-detail-row{
    margin-bottom:7px!important;
  }

  /* The all-bank list can be long; the compact row keeps expansion usable. */
  .table-footer{
    padding-top:10px!important;
  }
  .table-toggle{
    min-height:40px!important;
    font-size:11px!important;
  }

  /* Give the chart enough physical space to read timestamps and changes. */
  .full-chart-card{
    padding:14px 10px!important;
  }
  .full-chart-card .chart{
    height:320px!important;
  }
  .chart-series-legend{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    scrollbar-width:none;
  }
  .chart-series-legend::-webkit-scrollbar{
    display:none;
  }
  .legend{
    padding:8px 0 5px!important;
  }
  .chart-series-chip{
    flex:0 0 auto!important;
    min-height:30px!important;
    padding:5px 7px!important;
  }
  .chart-series-chip b{
    font-size:10.5px!important;
  }
  .chart-series-chip small,
  .chart-series-chip em{
    font-size:9.5px!important;
  }
  .axis-label{
    font-size:10px!important;
  }
}

/* Insights: the first card should feel like the answer, consistency like supporting evidence. */
@media(min-width:1000px){
  .history-details .insights-grid{
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)!important;
  }
}


/* ======================================================================
   v0.4.18 — finishing pass from mobile screenshot
   ====================================================================== */

/* Disclosure icons should read as chevrons, not empty square buttons. */
.details-summary-icon{
  position:relative!important;
  flex:0 0 18px!important;
  width:18px!important;
  height:18px!important;
  border:0!important;
  background:transparent!important;
}
.details-summary-icon:before{
  content:""!important;
  position:absolute!important;
  left:5px!important;
  top:4px!important;
  width:7px!important;
  height:7px!important;
  border-right:2px solid #444!important;
  border-bottom:2px solid #444!important;
  background:transparent!important;
  transform:rotate(45deg)!important;
  transition:transform .15s ease!important;
}
.details-summary-icon:after{
  display:none!important;
}
details[open]>.details-summary .details-summary-icon:before{
  transform:rotate(225deg)!important;
  top:7px!important;
}

/* Mobile chart controls stay on one compact row. */
@media(max-width:620px){
  .full-chart-card .legend{
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    min-width:0!important;
  }
  .full-chart-card .chart-series-legend{
    flex:1 1 auto!important;
    min-width:0!important;
    padding:0!important;
  }
  .full-chart-card .legend-toggle{
    flex:0 0 auto!important;
    width:auto!important;
    min-height:30px!important;
    padding:5px 7px!important;
    margin:0!important;
    font-size:9.5px!important;
    box-shadow:none!important;
  }

  /* Rank is supporting metadata, not another badge competing with the bank logo. */
  .rank-cell .rank{
    min-width:0!important;
    width:auto!important;
    height:auto!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#5f6368!important;
    font-size:10px!important;
    font-weight:850!important;
  }
  .best-row .rank-cell .rank{
    color:#08783f!important;
  }

  /* Best / median / worst become compact scan rows instead of three tall blocks. */
  .position-stats-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    border-top:1px solid var(--ui-line)!important;
    border-bottom:1px solid var(--ui-line)!important;
  }
  .position-stats-grid>div,
  .position-stats-grid>div:first-child,
  .position-stats-grid>div:last-child{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:
      "label rate"
      "time impact"!important;
    align-items:baseline!important;
    gap:3px 10px!important;
    padding:9px 0!important;
    border-right:0!important;
    border-bottom:1px solid #e5e5df!important;
  }
  .position-stats-grid>div:last-child{
    border-bottom:0!important;
  }
  .position-stats-grid span{
    grid-area:label!important;
    font-size:10px!important;
  }
  .position-stats-grid strong{
    grid-area:rate!important;
    margin:0!important;
    font-size:15px!important;
    text-align:right!important;
  }
  .position-stats-grid small{
    grid-area:time!important;
    margin:0!important;
    font-size:9.5px!important;
    line-height:1.3!important;
  }
  .position-stats-grid .position-stat-impact{
    grid-area:impact!important;
    margin:0!important;
    font-size:9.5px!important;
    line-height:1.3!important;
    text-align:right!important;
    white-space:nowrap;
  }

  .current-position-card .position-percentile{
    margin-top:10px!important;
  }
  .current-position-card>.insight-note:last-child{
    margin-top:8px!important;
  }
}


/* ======================================================================
   v0.4.26 — restore compact tablet spacing after cache refresh
   Keep the desktop hierarchy until the true mobile breakpoint.
   ====================================================================== */
@media(min-width:761px) and (max-width:900px){
  .answer-strip{
    grid-template-columns:minmax(210px,1.15fr) minmax(190px,1fr) minmax(125px,.68fr) minmax(125px,.68fr)!important;
    min-height:0!important;
  }
  .answer-bank{
    grid-column:auto!important;
  }
  .answer-strip>div{
    padding:12px 13px!important;
  }
  .answer-bank-copy strong{
    font-size:19px!important;
  }
  .answer-bank-icon .bank-icon-wrap{
    width:40px!important;
    height:40px!important;
    flex-basis:40px!important;
  }
  .answer-total strong{
    font-size:36px!important;
  }
  .answer-rate strong,
  .answer-saving strong{
    font-size:16px!important;
  }
  .answer-compare-button{
    grid-column:1/-1!important;
    justify-self:stretch!important;
    min-height:36px!important;
    margin:7px 12px 10px!important;
  }

  .insight-card{
    padding:14px!important;
  }
  .insight-card-head,
  .position-card-head,
  .consistency-card-head{
    margin-bottom:9px!important;
  }
  .position-hero{
    gap:10px!important;
    margin:2px 0 12px!important;
  }
  .current-position-card .position-current{
    padding:7px 0!important;
  }
  .position-impact{
    padding:10px 12px!important;
  }
  .position-track{
    margin-top:9px!important;
  }
  .position-stats-grid>div{
    padding:8px 10px!important;
  }
  .current-position-card .position-percentile{
    margin-top:10px!important;
    padding:9px 11px!important;
  }
  .current-position-card>.insight-note:last-child{
    margin-top:8px!important;
  }

  .consistency-list{
    gap:0!important;
  }
  .consistency-row,
  .my-bank-vs-row{
    padding:9px 0!important;
  }
  .consistency-track{
    margin-top:6px!important;
    margin-bottom:4px!important;
  }
}


/* ======================================================================
   v0.4.27 — chart range control + 7D readability
   ====================================================================== */
.full-chart-card .section-head{
  min-width:0!important;
}
.full-chart-card .section-head>div:first-child{
  min-width:0!important;
}
.full-chart-card .segmented.compact{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  flex:0 0 auto!important;
  width:176px!important;
  min-width:176px!important;
  max-width:176px!important;
  height:42px!important;
  padding:2px!important;
  overflow:hidden!important;
}
.full-chart-card .segmented.compact button{
  min-width:0!important;
  width:auto!important;
  height:36px!important;
  min-height:36px!important;
  padding:0 8px!important;
  box-sizing:border-box!important;
  white-space:nowrap!important;
}
@media(max-width:620px){
  .full-chart-card .segmented.compact{
    width:156px!important;
    min-width:156px!important;
    max-width:156px!important;
    height:42px!important;
  }
  .full-chart-card .segmented.compact button{
    padding:0 5px!important;
    font-size:11px!important;
  }
}
@media(max-width:390px){
  .full-chart-card .section-head{
    flex-direction:column!important;
  }
  .full-chart-card .segmented.compact{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
  }
}


/* ======================================================================
   v0.4.28 — clearer difference from #1
   ====================================================================== */
.total-cell .total-rank-diff{
  margin-top:5px!important;
  font-size:11.5px!important;
  font-weight:900!important;
  line-height:1.25!important;
  letter-spacing:-.01em!important;
}
.total-rank-best,
.detail-diff-best{
  color:#08783f!important;
}
.total-rank-worse,
.detail-diff-worse{
  color:#a12828!important;
}
.bank-detail-panel .detail-diff-best,
.bank-detail-panel .detail-diff-worse{
  font-weight:850!important;
}
@media(max-width:760px){
  .total-cell .total-rank-diff{
    margin-top:4px!important;
    font-size:10.5px!important;
    line-height:1.2!important;
  }
}


/* ======================================================================
   v0.4.29 — mobile bank-card redesign
   Compact two-row hierarchy: identity first, money second.
   ====================================================================== */
@media(max-width:760px){
  .compact-table-card .table-scroll{
    overflow:visible!important;
  }
  .bank-main-row{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr) auto!important;
    grid-template-areas:
      "rank bank chevron"
      "total total rate"!important;
    align-items:center!important;
    column-gap:10px!important;
    row-gap:11px!important;
    min-height:0!important;
    margin:8px 0 0!important;
    padding:12px 13px!important;
    border:1px solid #c8c8c1!important;
    border-radius:6px!important;
    background:#fff!important;
    box-shadow:none!important;
  }
  .bank-main-row.best-row{
    border-color:#9bc8f3!important;
    background:#f4f9ff!important;
  }

  .rank-cell{
    grid-area:rank!important;
    align-self:center!important;
    justify-self:start!important;
  }
  .rank-cell .rank{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:30px!important;
    width:auto!important;
    height:25px!important;
    padding:0 6px!important;
    border:0!important;
    border-radius:999px!important;
    background:#f0f0ec!important;
    color:#555!important;
    font-size:10px!important;
    font-weight:900!important;
  }
  .best-row .rank-cell .rank{
    background:#dff4e8!important;
    color:#08783f!important;
  }

  .bank-cell{
    grid-area:bank!important;
    min-width:0!important;
  }
  .bank-cell .bank{
    display:flex!important;
    align-items:center!important;
    gap:9px!important;
    min-width:0!important;
  }
  .bank-cell .bank-icon-wrap{
    width:34px!important;
    height:34px!important;
    flex:0 0 34px!important;
  }
  .bank-cell .bank>div{
    min-width:0!important;
  }
  .bank-cell .bank strong{
    display:block!important;
    margin:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:15px!important;
    line-height:1.2!important;
    font-weight:850!important;
  }
  .bank-check-status{
    margin-top:3px!important;
    color:#6b6f74!important;
    font-size:9.5px!important;
    line-height:1.2!important;
    font-weight:650!important;
  }
  .best-chip{
    display:none!important;
  }

  .row-chevron{
    grid-area:chevron!important;
    align-self:center!important;
    justify-self:end!important;
    width:18px!important;
    padding:0!important;
    color:#555!important;
    font-size:17px!important;
    line-height:1!important;
  }

  .total-cell{
    grid-area:total!important;
    min-width:0!important;
    padding:0!important;
    align-self:end!important;
  }
  .rate-cell{
    grid-area:rate!important;
    min-width:76px!important;
    padding:0!important;
    align-self:end!important;
    text-align:right!important;
  }
  .total-cell::before,
  .rate-cell::before{
    display:block!important;
    margin:0 0 2px!important;
    color:#74777b!important;
    font-size:9px!important;
    line-height:1.1!important;
    font-weight:750!important;
  }
  .total-cell>strong{
    display:block!important;
    font-size:23px!important;
    line-height:1!important;
    letter-spacing:-.025em!important;
    font-weight:900!important;
    white-space:nowrap!important;
  }
  .rate-cell strong{
    display:block!important;
    color:#45484c!important;
    font-size:14px!important;
    line-height:1.05!important;
    font-weight:800!important;
    white-space:nowrap!important;
  }
  .total-cell .total-rank-diff{
    display:block!important;
    margin-top:5px!important;
    font-size:10.5px!important;
    line-height:1.15!important;
    font-weight:850!important;
    white-space:nowrap!important;
  }

  .bank-main-row[aria-expanded="true"]{
    border-bottom-left-radius:0!important;
    border-bottom-right-radius:0!important;
  }
  .bank-detail-row{
    margin:0 0 8px!important;
  }
  .bank-detail-panel{
    margin:0!important;
    padding:4px 12px 10px!important;
    border-color:#c8c8c1!important;
  }
}

@media(max-width:390px){
  .bank-main-row{
    padding:11px!important;
    column-gap:8px!important;
    row-gap:9px!important;
  }
  .bank-cell .bank-icon-wrap{
    width:32px!important;
    height:32px!important;
    flex-basis:32px!important;
  }
  .bank-cell .bank strong{
    font-size:14px!important;
  }
  .total-cell>strong{
    font-size:21px!important;
  }
  .rate-cell{
    min-width:70px!important;
  }
  .rate-cell strong{
    font-size:13px!important;
  }
  .total-cell .total-rank-diff{
    font-size:10px!important;
  }
}


/* ======================================================================
   v0.4.30 — chart bank controls below the plot
   Keep the plotting area clean; put the tappable bank rail underneath.
   ====================================================================== */
.full-chart-card .chart-legend-below{
  margin-top:10px!important;
  padding:10px 0 2px!important;
  border-top:1px solid #d7d7cf!important;
  border-bottom:0!important;
}
.full-chart-card .chart-legend-below .chart-series-legend{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  width:auto!important;
  min-width:0!important;
  overflow:visible!important;
}
.full-chart-card .chart-legend-below .chart-series-chip{
  flex:0 0 auto!important;
}
.full-chart-card .chart-legend-below .legend-toggle{
  flex:0 0 auto!important;
  align-self:flex-start!important;
}
.full-chart-card .chart-legend-below.show-all .chart-series-legend{
  flex-wrap:nowrap!important;
  overflow-x:auto!important;
  max-width:100%!important;
  padding-bottom:4px!important;
  scrollbar-width:thin!important;
}

@media(max-width:760px){
  .full-chart-card .chart-legend-below{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:8px!important;
    margin-top:8px!important;
    padding:9px 0 1px!important;
  }
  .full-chart-card .chart-legend-below .chart-series-legend{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:7px!important;
    overflow-x:auto!important;
    padding:1px 0 5px!important;
    scrollbar-width:none!important;
    overscroll-behavior-x:contain!important;
  }
  .full-chart-card .chart-legend-below .chart-series-legend::-webkit-scrollbar{
    display:none!important;
  }
  .full-chart-card .chart-legend-below .legend-toggle{
    align-self:flex-start!important;
    min-height:36px!important;
    padding:7px 10px!important;
    font-size:10.5px!important;
  }
}


/* ======================================================================
   v0.4.31 — percentile attached to the current-position marker
   ====================================================================== */
.position-now-label{
  display:grid!important;
  gap:3px!important;
  text-align:center!important;
}
.position-now-label>span{
  display:block;
  font-size:10.5px;
  font-weight:850;
  line-height:1.15;
  white-space:nowrap;
}
.position-now-label>small{
  display:inline-block;
  justify-self:center;
  padding:2px 6px;
  border-radius:999px;
  background:#eef4ff;
  color:#174ea6;
  font-size:9px;
  font-weight:850;
  line-height:1.2;
  white-space:nowrap;
}
@media(max-width:620px){
  .position-now-label{
    max-width:none!important;
  }
  .position-now-label>span{
    font-size:10px;
  }
  .position-now-label>small{
    font-size:8.5px;
    padding:2px 5px;
  }
}


/* ======================================================================
   v0.4.32 — calmer consistency / Top-3 insight cards
   ====================================================================== */
.consistency-list{
  display:grid!important;
  gap:12px!important;
}
.consistency-row{
  padding:14px!important;
  border:1px solid #d3d3cc!important;
  border-radius:7px!important;
  background:#fff!important;
}
.consistency-row:last-child{
  border-bottom:1px solid #d3d3cc!important;
}
.consistency-head{
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;
}
.consistency-head .bank-icon-wrap{
  width:38px!important;
  height:38px!important;
  flex-basis:38px!important;
}
.consistency-bank{
  min-width:0!important;
}
.consistency-bank strong{
  display:block!important;
  margin:0!important;
  color:#111!important;
  font-size:16px!important;
  line-height:1.15!important;
}
.consistency-bank small{
  display:block!important;
  margin-top:3px!important;
  color:#7a7d82!important;
  font-size:10px!important;
  line-height:1.2!important;
}
.consistency-score{
  display:grid!important;
  justify-items:end!important;
  gap:2px!important;
  min-width:70px!important;
}
.consistency-score>b{
  color:#174ea6!important;
  font-size:22px!important;
  line-height:1!important;
  font-variant-numeric:tabular-nums!important;
}
.consistency-score>small{
  color:#6b6f74!important;
  font-size:9px!important;
  line-height:1.1!important;
  font-weight:750!important;
}
.consistency-track{
  height:6px!important;
  margin:12px 0 0!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:999px!important;
  background:#ecece7!important;
}
.consistency-track>i{
  display:block!important;
  height:100%!important;
  border-radius:999px!important;
  background:#4d7fe8!important;
}
.consistency-metrics{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:14px!important;
  margin-top:10px!important;
  padding-top:10px!important;
  border-top:1px solid #ecece7!important;
}
.consistency-metrics>span{
  display:grid!important;
  gap:2px!important;
  min-width:0!important;
}
.consistency-metrics>span:last-child{
  justify-items:end!important;
  text-align:right!important;
}
.consistency-metrics small{
  color:#7a7d82!important;
  font-size:9.5px!important;
  line-height:1.2!important;
  font-weight:650!important;
}
.consistency-metrics strong{
  color:#35383c!important;
  font-size:11px!important;
  line-height:1.25!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
.consistency-foot{
  display:none!important;
}

@media(max-width:620px){
  .consistency-card-head{
    margin-bottom:12px!important;
  }
  .consistency-card-head h2{
    font-size:20px!important;
    line-height:1.2!important;
  }
  .consistency-card-head .direction-note{
    margin-top:5px!important;
    font-size:11px!important;
    line-height:1.4!important;
  }
  .consistency-row{
    padding:12px!important;
  }
  .consistency-head{
    grid-template-columns:34px minmax(0,1fr) auto!important;
    gap:9px!important;
  }
  .consistency-head .bank-icon-wrap{
    width:34px!important;
    height:34px!important;
    flex-basis:34px!important;
  }
  .consistency-bank strong{
    font-size:15px!important;
  }
  .consistency-score{
    min-width:60px!important;
  }
  .consistency-score>b{
    font-size:20px!important;
  }
  .consistency-track{
    margin-top:10px!important;
  }
  .consistency-metrics{
    gap:10px!important;
    margin-top:9px!important;
    padding-top:9px!important;
  }
  .consistency-metrics small{
    font-size:9px!important;
  }
  .consistency-metrics strong{
    font-size:10.5px!important;
  }
}


/* ======================================================================
   v0.4.33 — clean answer footer + calculation disclosure
   Remove the stacked-box feeling below the primary answer.
   ====================================================================== */
@media(max-width:900px){
  .answer-strip{
    overflow:hidden!important;
  }

  .answer-compare-button{
    grid-column:1/-1!important;
    justify-self:stretch!important;
    width:auto!important;
    min-height:42px!important;
    margin:0!important;
    padding:0 14px!important;
    border:0!important;
    border-top:1px solid #d7d7d0!important;
    background:#fff!important;
    box-shadow:none!important;
    color:#222!important;
    font-size:12px!important;
    font-weight:850!important;
  }
  .answer-compare-button:hover{
    background:#f7f9fc!important;
  }
  .answer-compare-button:active{
    transform:none!important;
    box-shadow:none!important;
    background:#eef5ff!important;
  }

  .answer-details{
    margin:8px 0 0!important;
    border:1px solid #d3d3cc!important;
    background:#fff!important;
  }
  .answer-details>.details-summary{
    width:100%!important;
    min-height:52px!important;
    margin:0!important;
    padding:10px 12px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    text-decoration:none!important;
    background:#fafaf7!important;
  }
  .answer-details>.details-summary .details-summary-copy{
    display:grid!important;
    gap:2px!important;
    min-width:0!important;
  }
  .answer-details>.details-summary .details-summary-copy strong{
    color:#222!important;
    font-size:13px!important;
    line-height:1.25!important;
  }
  .answer-details>.details-summary .details-summary-copy small{
    color:#6e7277!important;
    font-size:10.5px!important;
    line-height:1.3!important;
  }
  .answer-details>.details-summary:after{
    display:none!important;
  }
  .answer-details>.details-summary .details-summary-icon{
    flex:0 0 18px!important;
  }
  .answer-details-grid{
    border:0!important;
    border-top:1px solid #deded7!important;
  }
}

@media(max-width:620px){
  .answer-compare-button{
    min-height:40px!important;
    font-size:11.5px!important;
  }
  .answer-details{
    margin-top:7px!important;
  }
  .answer-details>.details-summary{
    min-height:48px!important;
    padding:9px 11px!important;
  }
  .answer-details>.details-summary .details-summary-copy strong{
    font-size:12.5px!important;
  }
  .answer-details>.details-summary .details-summary-copy small{
    font-size:10px!important;
  }
}


/* ======================================================================
   v0.4.34 — fix mobile comparison-settings sheet overflow
   Choice containers must grow with their cards; never use fixed-height rails.
   ====================================================================== */
@media(max-width:760px){
  .advanced-options[open] .advanced-options-body{
    display:block!important;
    padding:0 16px max(16px,env(safe-area-inset-bottom))!important;
  }

  .advanced-options .true-cost-bar,
  .advanced-options .comparison-setup{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    padding:0!important;
    border:0!important;
  }

  .advanced-options .comparison-step{
    display:grid!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    gap:10px!important;
    margin:0!important;
    padding:14px 0!important;
    border:0!important;
    border-bottom:1px solid #e1e1db!important;
  }

  .advanced-options .comparison-choice-grid,
  .advanced-options .fee-mode-switch,
  .advanced-options .bank-scope-switch{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    gap:8px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
  }

  .advanced-options .comparison-choice,
  .advanced-options .fee-mode-switch button,
  .advanced-options .bank-scope-switch button{
    position:relative!important;
    display:grid!important;
    align-content:center!important;
    gap:3px!important;
    width:100%!important;
    min-width:0!important;
    min-height:64px!important;
    height:auto!important;
    margin:0!important;
    padding:10px 12px!important;
    border:1px solid #c4c4bd!important;
    background:#fff!important;
    box-shadow:none!important;
  }

  .advanced-options .comparison-choice.active,
  .advanced-options .fee-mode-switch button.active,
  .advanced-options .bank-scope-switch button.active{
    padding:9px 11px!important;
    border:2px solid #111!important;
    background:#eef6ff!important;
    box-shadow:inset 0 -3px 0 #2f80ed!important;
  }

  .advanced-options .bank-scope-row.comparison-step{
    display:grid!important;
    width:100%!important;
    margin:0!important;
    padding:14px 0!important;
    border-bottom:0!important;
  }

  .advanced-sheet-head{
    min-height:56px!important;
    margin:0 -16px 8px!important;
  }
  .advanced-sheet-head strong{
    font-size:18px!important;
  }
  .advanced-sheet-close{
    width:40px!important;
    height:40px!important;
    font-size:22px!important;
  }

  .advanced-sheet-done{
    margin-top:12px!important;
  }
}


/* ======================================================================
   v0.4.35 — remove double-frame effect under primary answer
   ====================================================================== */
@media(max-width:900px){
  .answer-strip{
    border-bottom-left-radius:0!important;
    border-bottom-right-radius:0!important;
    border-bottom:0!important;
    box-shadow:none!important;
  }

  .answer-compare-button{
    border-left:1px solid #111!important;
    border-right:1px solid #111!important;
    border-top:1px solid #d7d7d0!important;
    border-bottom:0!important;
    background:#fff!important;
  }

  .answer-details{
    margin:0!important;
    border:1px solid #d3d3cc!important;
    border-top:0!important;
    background:#fff!important;
  }

  .answer-details>.details-summary{
    border-top:1px solid #dcdcd5!important;
    background:#fafaf7!important;
  }
}

@media(max-width:620px){
  .answer-strip{
    border-width:1px!important;
    border-bottom:0!important;
  }
  .answer-compare-button{
    border-left:1px solid #111!important;
    border-right:1px solid #111!important;
  }
}


/* ======================================================================
   v0.4.36 — compact but comfortable mobile bank cards
   Reduce dead vertical space while preserving clear scan hierarchy.
   ====================================================================== */
@media(max-width:760px){
  .bank-main-row{
    grid-template-columns:auto minmax(0,1fr) auto!important;
    grid-template-areas:
      "rank bank chevron"
      "total total rate"!important;
    align-items:center!important;
    column-gap:9px!important;
    row-gap:7px!important;
    min-height:0!important;
    height:auto!important;
    margin:7px 0 0!important;
    padding:10px 11px!important;
  }

  .rank-cell .rank{
    min-width:28px!important;
    height:23px!important;
    padding:0 6px!important;
    font-size:9.5px!important;
  }

  .bank-cell .bank{
    gap:8px!important;
  }
  .bank-cell .bank-icon-wrap{
    width:31px!important;
    height:31px!important;
    flex-basis:31px!important;
  }
  .bank-cell .bank strong{
    font-size:14px!important;
    line-height:1.15!important;
  }
  .bank-check-status{
    margin-top:2px!important;
    font-size:9px!important;
    line-height:1.15!important;
  }

  .row-chevron{
    width:18px!important;
    font-size:16px!important;
  }

  .total-cell,
  .rate-cell{
    padding-top:0!important;
  }
  .total-cell::before,
  .rate-cell::before{
    margin-bottom:1px!important;
    font-size:8.5px!important;
    line-height:1.1!important;
  }
  .total-cell>strong{
    font-size:21px!important;
    line-height:1!important;
    letter-spacing:-.02em!important;
  }
  .rate-cell{
    min-width:72px!important;
  }
  .rate-cell strong{
    font-size:13px!important;
    line-height:1!important;
  }
  .total-cell .total-rank-diff{
    margin-top:4px!important;
    font-size:9.5px!important;
    line-height:1.1!important;
  }

  .bank-detail-row{
    margin-bottom:7px!important;
  }
}

@media(max-width:390px){
  .bank-main-row{
    column-gap:8px!important;
    row-gap:6px!important;
    padding:9px 10px!important;
  }
  .bank-cell .bank-icon-wrap{
    width:29px!important;
    height:29px!important;
    flex-basis:29px!important;
  }
  .bank-cell .bank strong{
    font-size:13.5px!important;
  }
  .total-cell>strong{
    font-size:20px!important;
  }
  .rate-cell{
    min-width:68px!important;
  }
  .rate-cell strong{
    font-size:12.5px!important;
  }
}


/* ======================================================================
   v0.4.37 — center the hero statement on desktop + mobile
   Keep eyebrow/support copy aligned to the page; center only the headline.
   ====================================================================== */
.retro-hero h1{
  width:100%!important;
  justify-items:center!important;
  text-align:center!important;
}
.retro-hero h1 .hero-line{
  margin-left:0!important;
  margin-right:0!important;
}
.retro-hero h1 .hero-highlight{
  margin-left:0!important;
}

@media(max-width:620px){
  .retro-hero h1{
    max-width:none!important;
    width:100%!important;
    justify-items:center!important;
    text-align:center!important;
  }
  .retro-hero h1 .hero-highlight{
    margin-left:0!important;
  }
}


/* ======================================================================
   v0.4.38 — harden primary answer layout against desktop overflow
   Four data columns + full-width action footer; no intrinsic-width spill.
   ====================================================================== */
@media(min-width:901px){
  .answer-strip{
    display:grid!important;
    grid-template-columns:
      minmax(0,1.05fr)
      minmax(0,1.35fr)
      minmax(120px,.56fr)
      minmax(130px,.62fr)!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
  }
  .answer-strip>div{
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
  }
  .answer-bank,
  .answer-total,
  .answer-rate,
  .answer-saving{
    grid-column:auto!important;
  }
  .answer-total strong{
    max-width:100%!important;
    font-size:clamp(32px,3.5vw,48px)!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:clip!important;
  }
  .answer-rate strong,
  .answer-saving strong{
    max-width:100%!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .answer-compare-button{
    grid-column:1/-1!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    justify-self:stretch!important;
    min-height:40px!important;
    margin:0!important;
    border:0!important;
    border-top:1px solid #d7d7d0!important;
    background:#fff!important;
    box-shadow:none!important;
  }
}

@media(min-width:901px) and (max-width:1100px){
  .answer-strip{
    grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)!important;
  }
  .answer-bank{grid-column:1!important}
  .answer-total{grid-column:2!important}
  .answer-rate{grid-column:1!important;border-top:1px solid #d7d7d0!important}
  .answer-saving{grid-column:2!important;border-top:1px solid #d7d7d0!important}
  .answer-compare-button{grid-column:1/-1!important}
}


/* ======================================================================
   v0.4.39 — pre-collection history state
   Faint solid segment means the tracker had not started collecting yet.
   ====================================================================== */
.pre-collection-line{
  stroke:var(--series-color)!important;
  stroke-width:4.2!important;
  stroke-linecap:round!important;
  opacity:.16!important;
  fill:none!important;
  vector-effect:non-scaling-stroke;
  pointer-events:none;
}
.all-bank-chart .pre-collection-line{
  opacity:.12!important;
  stroke-width:3.8!important;
}
@media(max-width:620px){
  .pre-collection-line{
    stroke-width:4.6!important;
    opacity:.17!important;
  }
}


/* ======================================================================
   v0.4.40 — sticky header + lightweight feedback
   ====================================================================== */
.topbar{
  position:sticky!important;
  top:0!important;
  z-index:80!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  background:rgba(245,245,240,.96)!important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid #bdbdb6!important;
}
.feedback-header-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 11px;
  border:1px solid #777;
  background:#fff;
  color:#222;
  font:800 11px/1 Arial,Helvetica,sans-serif;
  cursor:pointer;
  white-space:nowrap;
}
.feedback-header-button:hover{border-color:#111;background:#eef6ff}
.feedback-header-button:active{transform:translateY(1px)}

.feedback-prompt{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  border:1px solid #d4d4cd;
  background:#fafaf7;
}
.feedback-prompt>div{
  display:grid;
  gap:3px;
  min-width:0;
}
.feedback-prompt strong{font-size:13px;line-height:1.3}
.feedback-prompt span{color:#6c7075;font-size:11px;line-height:1.4}
.feedback-prompt button{
  flex:0 0 auto;
  min-height:36px;
  padding:0 12px;
  border:1px solid #111;
  background:#fff;
  color:#111;
  font-size:11px;
  font-weight:850;
  cursor:pointer;
}
.feedback-prompt button:hover{background:#eef6ff}

.feedback-backdrop{
  position:fixed;
  inset:0;
  z-index:199;
  background:rgba(17,17,17,.24);
}
.feedback-sheet{
  position:fixed;
  top:72px;
  right:max(18px,calc((100vw - min(1180px,calc(100vw - 32px)))/2));
  z-index:200;
  width:min(430px,calc(100vw - 32px));
  max-height:calc(100dvh - 90px);
  overflow:auto;
  border:1px solid #111;
  background:#fff;
  box-shadow:4px 4px 0 rgba(17,17,17,.85);
}
.feedback-backdrop[hidden],
.feedback-sheet[hidden]{display:none!important}
.feedback-sheet-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:17px 18px 14px;
  border-bottom:1px solid #d8d8d1;
}
.feedback-sheet-head>div{
  display:grid;
  gap:4px;
}
.feedback-sheet-head strong{
  font-size:18px;
  line-height:1.2;
  letter-spacing:-.02em;
}
.feedback-sheet-head span{
  color:#666;
  font-size:11px;
  line-height:1.45;
}
.feedback-sheet-head button{
  flex:0 0 34px;
  width:34px;
  height:34px;
  border:1px solid #aaa;
  background:#fff;
  color:#111;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.feedback-body{
  display:grid;
  gap:14px;
  padding:16px 18px 18px;
}
.feedback-categories{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.feedback-categories button{
  min-height:34px;
  padding:0 10px;
  border:1px solid #bdbdb6;
  border-radius:999px;
  background:#fff;
  color:#333;
  font-size:10.5px;
  font-weight:800;
  cursor:pointer;
}
.feedback-categories button:hover{border-color:#777;background:#f6f8fb}
.feedback-categories button.active{
  border-color:#174ea6;
  background:#eaf2ff;
  color:#174ea6;
}
.feedback-comment-label{
  display:grid;
  gap:7px;
}
.feedback-comment-label>span{
  font-size:12px;
  font-weight:850;
}
#feedbackComment{
  width:100%;
  min-height:104px;
  resize:vertical;
  padding:10px 11px;
  border:1px solid #aaa;
  border-radius:0;
  background:#fff;
  color:#111;
  font:500 13px/1.45 Arial,"Noto Sans Thai",Tahoma,sans-serif;
}
#feedbackComment:focus{
  outline:2px solid #8bbcff;
  outline-offset:1px;
  border-color:#174ea6;
}
.feedback-context-option{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:8px;
  align-items:start;
  padding:10px 11px;
  background:#f7f7f2;
  border:1px solid #deded7;
  cursor:pointer;
}
.feedback-context-option input{
  margin:2px 0 0;
}
.feedback-context-option span{
  display:grid;
  gap:3px;
}
.feedback-context-option strong{
  font-size:10.5px;
  line-height:1.3;
}
.feedback-context-option small{
  color:#74777b;
  font-size:9.5px;
  line-height:1.4;
}
.feedback-submit{
  min-height:42px;
  border:1px solid #111;
  background:#2f80ed;
  color:#fff;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
  box-shadow:2px 2px 0 #111;
}
.feedback-submit:hover{background:#1768c5}
.feedback-submit:disabled{opacity:.55;cursor:wait;box-shadow:none}
.feedback-error{
  margin:0;
  padding:8px 10px;
  border-left:3px solid #b42318;
  background:#fff0ee;
  color:#8c1d18;
  font-size:10.5px;
}
.feedback-success{
  display:grid;
  gap:3px;
  padding:11px 12px;
  border-left:3px solid #168548;
  background:#eaf7ef;
}
.feedback-success[hidden]{display:none!important}
.feedback-success strong{font-size:12px;color:#08723d}
.feedback-success span{font-size:10px;line-height:1.4;color:#356a4d}

@media(max-width:760px){
  .topbar{
    margin-left:-2px;
    margin-right:-2px;
  }
  .feedback-header-button{
    min-height:36px;
    padding:0 9px;
    font-size:10px;
  }
  .feedback-prompt{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
    padding:12px;
  }
  .feedback-prompt button{
    width:100%;
    min-height:40px;
  }
  .feedback-sheet{
    top:auto;
    right:0;
    bottom:0;
    left:0;
    width:100%;
    max-height:min(78dvh,680px);
    border-left:0;
    border-right:0;
    border-bottom:0;
    box-shadow:0 -3px 0 rgba(17,17,17,.85);
    border-radius:12px 12px 0 0;
  }
  .feedback-sheet-head{
    padding:15px 16px 12px;
  }
  .feedback-body{
    padding:14px 16px max(18px,env(safe-area-inset-bottom));
  }
  .feedback-categories{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
  }
  .feedback-categories button{
    border-radius:5px;
    min-height:40px;
    padding:5px 8px;
    font-size:10.5px;
  }
}
@media(max-width:430px){
  .top-actions .admin-health-link{display:none!important}
  .feedback-header-button{
    width:38px;
    min-width:38px;
    padding:0;
    font-size:0;
  }
  .feedback-header-button:before{
    content:"💬";
    font-size:16px;
  }
  .version-badge{display:none!important}
}


/* ======================================================================
   v0.4.41 — denser mobile bank ranking cards
   Less dead space, fewer type sizes, rate vertically centered.
   ====================================================================== */
@media(max-width:760px){
  .compact-table-card .section-head{
    margin-bottom:10px!important;
  }
  .compact-table-card .section-head h2{
    font-size:22px!important;
    line-height:1.12!important;
  }
  .compact-table-card .section-head .muted{
    margin-top:4px!important;
    font-size:13px!important;
    line-height:1.35!important;
  }

  .bank-main-row{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr) minmax(92px,auto) auto!important;
    grid-template-areas:
      "rank bank bank chevron"
      "total total rate rate"!important;
    grid-auto-rows:min-content!important;
    align-items:start!important;
    column-gap:10px!important;
    row-gap:10px!important;
    min-height:0!important;
    height:auto!important;
    padding:12px 13px!important;
    margin:8px 0 0!important;
  }

  .bank-main-row td{
    min-height:0!important;
    margin:0!important;
    padding:0!important;
  }

  .rank-cell{
    grid-area:rank!important;
    align-self:center!important;
  }
  .rank-cell .rank{
    min-width:36px!important;
    width:auto!important;
    height:28px!important;
    padding:0 8px!important;
    font-size:11px!important;
    line-height:1!important;
  }

  .bank-cell{
    grid-area:bank!important;
    align-self:center!important;
  }
  .bank-cell .bank{
    gap:9px!important;
    align-items:center!important;
  }
  .bank-cell .bank-icon-wrap{
    width:36px!important;
    height:36px!important;
    flex-basis:36px!important;
  }
  .bank-cell .bank strong{
    font-size:16px!important;
    line-height:1.15!important;
    font-weight:850!important;
  }
  .bank-check-status{
    margin-top:3px!important;
    font-size:11px!important;
    line-height:1.2!important;
    font-weight:650!important;
  }

  .row-chevron{
    grid-area:chevron!important;
    align-self:center!important;
    justify-self:end!important;
    width:20px!important;
    font-size:17px!important;
  }

  .total-cell{
    grid-area:total!important;
    align-self:start!important;
    min-width:0!important;
  }
  .rate-cell{
    grid-area:rate!important;
    align-self:center!important;
    justify-self:end!important;
    min-width:92px!important;
    text-align:right!important;
  }

  .total-cell::before,
  .rate-cell::before{
    margin-bottom:3px!important;
    color:#6f7378!important;
    font-size:11px!important;
    line-height:1.15!important;
    font-weight:750!important;
    letter-spacing:0!important;
  }

  .total-cell>strong{
    font-size:24px!important;
    line-height:1!important;
    font-weight:900!important;
    letter-spacing:-.02em!important;
  }

  .rate-cell strong{
    font-size:18px!important;
    line-height:1!important;
    font-weight:850!important;
    color:#3f4348!important;
  }

  .total-cell .total-rank-diff{
    margin-top:5px!important;
    font-size:11px!important;
    line-height:1.2!important;
    font-weight:850!important;
  }
}

@media(max-width:390px){
  .bank-main-row{
    grid-template-columns:auto minmax(0,1fr) minmax(84px,auto) auto!important;
    column-gap:8px!important;
    row-gap:9px!important;
    padding:11px!important;
  }
  .bank-cell .bank-icon-wrap{
    width:34px!important;
    height:34px!important;
    flex-basis:34px!important;
  }
  .bank-cell .bank strong{
    font-size:15px!important;
  }
  .bank-check-status{
    font-size:10.5px!important;
  }
  .total-cell>strong{
    font-size:22px!important;
  }
  .rate-cell{
    min-width:84px!important;
  }
  .rate-cell strong{
    font-size:17px!important;
  }
}


/* ======================================================================
   v0.4.42 — chart density + readable live time
   SVG owns its natural aspect ratio; expanded banks wrap instead of sliding.
   ====================================================================== */
.full-chart-card .chart{
  height:auto!important;
  min-height:0!important;
  margin-top:5px!important;
}
.full-chart-card .chart-plot{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
}
.full-chart-card .chart-plot svg{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:100%!important;
  overflow:visible!important;
}

/* "+N banks" expands into a wrapped bank list. No horizontal carousel/slide. */
.full-chart-card .chart-legend-below.show-all .chart-series-legend{
  display:flex!important;
  flex-wrap:wrap!important;
  overflow:visible!important;
  max-width:none!important;
  padding-bottom:0!important;
  scrollbar-width:auto!important;
}
.full-chart-card .chart-legend-below.show-all .chart-series-chip{
  flex:0 0 auto!important;
}

@media(max-width:760px){
  .full-chart-card .chart{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:5px 0 0!important;
  }
  .full-chart-card .chart-plot{
    height:auto!important;
    min-height:0!important;
  }
  .full-chart-card .chart-plot svg{
    width:100%!important;
    height:auto!important;
  }
  .full-chart-card .chart-legend-below.show-all .chart-series-legend{
    flex-wrap:wrap!important;
    overflow:visible!important;
    padding-bottom:0!important;
  }
}


/* ======================================================================
   v0.4.43 — readable current-position scale
   Keep marker clear of text and explain what its position means.
   ====================================================================== */
.position-range{
  padding-bottom:0!important;
}
.position-track{
  position:relative!important;
  margin-top:14px!important;
  margin-bottom:0!important;
}
.position-marker{
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  z-index:3!important;
}
.position-zone-scale{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  margin-top:12px;
  border-top:1px solid #deded7;
}
.position-zone-scale span{
  min-width:0;
  padding:7px 4px 0;
  color:#8a8d92;
  font-size:9.5px;
  line-height:1.2;
  font-weight:700;
  text-align:center;
}
.position-zone-scale span+span{
  border-left:1px solid #ecece7;
}
.position-zone-scale span.is-current{
  color:#174ea6;
  font-weight:900;
}
.position-now-label{
  position:relative!important;
  left:auto!important;
  transform:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  margin-top:12px!important;
  text-align:center!important;
}
.position-now-label>span{
  font-size:12px!important;
  line-height:1.2!important;
}
.position-now-label>small{
  font-size:10px!important;
}
.position-range-detail{
  display:flex;
  align-items:baseline;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
  margin-top:7px;
  color:#666;
  font-size:10.5px;
  line-height:1.4;
  text-align:center;
}
.position-range-detail strong{
  color:#174ea6;
  font-size:11px;
  font-weight:900;
}
@media(max-width:620px){
  .position-zone-scale span{
    padding-top:6px;
    font-size:8.5px;
  }
  .position-now-label{
    margin-top:10px!important;
  }
  .position-now-label>span{
    font-size:11px!important;
  }
  .position-now-label>small{
    font-size:9px!important;
  }
  .position-range-detail{
    margin-top:6px;
    font-size:9.5px;
  }
}


/* ======================================================================
   v0.4.44 — simplify sticky header hierarchy
   Brand leads; freshness is status; Health/language are utilities; feedback
   is the only bordered action.
   ====================================================================== */
.topbar{
  height:58px!important;
  min-height:58px!important;
  padding:0 2px!important;
  border-bottom:1px solid #cfcfc7!important;
  background:rgba(244,244,239,.97)!important;
  box-shadow:none!important;
}
.brand{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-width:0!important;
  color:#111!important;
  text-decoration:none!important;
}
.brand-mark{
  width:32px!important;
  height:32px!important;
  flex:0 0 32px!important;
  border:0!important;
  border-radius:5px!important;
  background:#111!important;
  box-shadow:none!important;
  font-size:10px!important;
  font-weight:900!important;
}
.brand-copy{
  display:flex!important;
  align-items:baseline!important;
  gap:7px!important;
  min-width:0!important;
}
.brand-copy>strong{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:15px!important;
  line-height:1!important;
  font-weight:850!important;
}
.version-badge{
  min-height:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#8a8a84!important;
  font-size:9px!important;
  font-weight:700!important;
}

.top-actions{
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
}
.header-freshness{
  position:relative;
  max-width:170px!important;
  margin-right:6px!important;
  padding-left:11px!important;
  color:#747770!important;
  font-size:10px!important;
  font-weight:650!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.header-freshness:before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#1f9d55;
  transform:translateY(-50%);
}

.api-header-link,
.admin-health-link,
.language-toggle{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:34px!important;
  padding:0 9px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#555!important;
  font-size:10.5px!important;
  font-weight:800!important;
  text-decoration:none!important;
}
.api-header-link:hover,
.admin-health-link:hover,
.language-toggle:hover{
  background:#e9e9e3!important;
  color:#111!important;
}
.language-toggle:active{
  transform:none!important;
  box-shadow:none!important;
}

.feedback-header-button{
  min-height:34px!important;
  padding:0 11px!important;
  border:1px solid #111!important;
  border-radius:4px!important;
  background:#fff!important;
  box-shadow:none!important;
  color:#111!important;
  font-size:10.5px!important;
  font-weight:850!important;
}
.feedback-header-button:hover{
  background:#eef6ff!important;
}

@media(max-width:900px){
  .admin-health-link{
    display:none!important;
  }
  .header-freshness{
    max-width:120px!important;
  }
}
@media(max-width:760px){
  .topbar{
    height:54px!important;
    min-height:54px!important;
  }
  .brand{
    gap:8px!important;
  }
  .brand-mark{
    width:29px!important;
    height:29px!important;
    flex-basis:29px!important;
  }
  .brand-copy>strong{
    font-size:13px!important;
  }
  .version-badge,
  .header-freshness{
    display:none!important;
  }
  .top-actions{
    gap:2px!important;
  }
  .feedback-header-button{
    min-height:34px!important;
    padding:0 9px!important;
    font-size:10px!important;
  }
  .language-toggle{
    min-width:36px!important;
    min-height:34px!important;
    padding:0 7px!important;
    font-size:11px!important;
  }
}
@media(max-width:430px){
  .feedback-header-button{
    width:auto!important;
    min-width:0!important;
    padding:0 8px!important;
    font-size:9.5px!important;
  }
  .feedback-header-button:before{
    content:none!important;
  }
  .brand-copy>strong{
    max-width:150px!important;
  }
}


/* ======================================================================
   v0.4.45 — simplify 7-day current-position card
   Three messages only: current rate, money impact, and where it sits.
   ====================================================================== */
.current-position-card{
  gap:0!important;
}
.position-card-head{
  margin-bottom:12px!important;
}
.position-hero{
  grid-template-columns:minmax(210px,.9fr) minmax(280px,1.1fr)!important;
  gap:12px!important;
  margin:0 0 16px!important;
}
.current-position-card .position-current{
  padding:10px 0!important;
}
.current-position-card .position-current>span{
  font-size:10.5px!important;
}
.current-position-card .position-current strong{
  margin-top:5px!important;
  font-size:32px!important;
  line-height:1!important;
}
.position-impact{
  min-height:0!important;
  padding:12px 14px!important;
  border-left-width:3px!important;
}
.position-impact>span{
  font-size:10px!important;
}
.position-impact strong{
  margin-top:4px!important;
  color:#174ea6!important;
  font-size:18px!important;
  line-height:1.25!important;
  letter-spacing:-.01em!important;
}
.position-impact small{
  margin-top:4px!important;
  color:#73777c!important;
  font-size:10px!important;
  line-height:1.3!important;
}

.position-range{
  margin:0 4px 14px!important;
  padding-bottom:0!important;
}
.position-range-labels{
  margin-bottom:6px!important;
}
.position-range-labels span{
  font-size:9.5px!important;
}
.position-range-labels strong{
  font-size:13px!important;
}
.current-position-card .position-track{
  height:38px!important;
  margin:0!important;
}
.current-position-card .position-track-line{
  top:17px!important;
  height:5px!important;
}
.position-zone-scale{
  position:absolute!important;
  inset:0!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  align-items:start!important;
  margin:0!important;
  border:0!important;
  pointer-events:none;
  z-index:1!important;
}
.position-zone-scale span{
  position:relative!important;
  padding:0 3px!important;
  border:0!important;
  background:var(--retro-paper,#fff)!important;
  color:#777!important;
  font-size:8.5px!important;
  line-height:1.1!important;
  font-weight:750!important;
  text-align:center!important;
}
.position-zone-scale span.is-current{
  color:#174ea6!important;
  font-weight:900!important;
}
.current-position-card .position-marker{
  top:7px!important;
  z-index:4!important;
}
.position-now-label{
  position:relative!important;
  left:auto!important;
  transform:none!important;
  display:flex!important;
  justify-content:center!important;
  margin-top:4px!important;
  padding:0!important;
}
.position-now-label>span{
  padding:3px 7px!important;
  border-radius:999px!important;
  background:#f2f2ee!important;
  color:#333!important;
  font-size:10.5px!important;
  line-height:1.2!important;
  font-weight:850!important;
}

/* One compact percentile cue; the track already explains the rest. */
.current-position-card .position-percentile{
  display:flex!important;
  width:max-content!important;
  max-width:100%!important;
  margin:8px 0 14px!important;
  padding:4px 8px!important;
  border:0!important;
  border-radius:999px!important;
  background:#eef4ff!important;
}
.current-position-card .position-percentile strong{
  color:#174ea6!important;
  font-size:10.5px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
}

/* Best / median / worst become compact equal tiles instead of a long list. */
.position-summary-tiles{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
  margin-top:0!important;
  padding:0!important;
  border:0!important;
}
.position-summary-tiles>div,
.position-summary-tiles>div:first-child,
.position-summary-tiles>div:last-child{
  min-width:0!important;
  padding:10px!important;
  border:1px solid #deded7!important;
  background:#fafaf7!important;
}
.position-summary-tiles span{
  font-size:9px!important;
  line-height:1.2!important;
}
.position-summary-tiles strong{
  margin-top:5px!important;
  font-size:15px!important;
}
.position-summary-tiles small{
  margin-top:4px!important;
  font-size:8.5px!important;
  line-height:1.25!important;
  color:#85888d!important;
}
.position-summary-tiles .position-stat-impact{
  display:block!important;
  margin-top:7px!important;
  padding-top:7px!important;
  border-top:1px solid #e2e2dc!important;
  font-size:9px!important;
  line-height:1.25!important;
  font-style:normal!important;
  font-weight:800!important;
}

.current-position-card>.insight-note:last-child{
  margin-top:10px!important;
  font-size:9.5px!important;
}

@media(max-width:760px){
  .position-hero{
    grid-template-columns:1fr!important;
    gap:8px!important;
    margin-bottom:14px!important;
  }
  .current-position-card .position-current{
    padding:4px 0 7px!important;
  }
  .current-position-card .position-current strong{
    font-size:28px!important;
  }
  .position-impact{
    padding:11px 12px!important;
  }
  .position-impact strong{
    font-size:16px!important;
  }
  .position-summary-tiles{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .position-summary-tiles>div,
  .position-summary-tiles>div:first-child,
  .position-summary-tiles>div:last-child{
    padding:8px!important;
  }
  .position-summary-tiles strong{
    font-size:14px!important;
  }
  .position-summary-tiles small{
    font-size:8px!important;
  }
  .position-summary-tiles .position-stat-impact{
    font-size:8.5px!important;
  }
}
@media(max-width:390px){
  .position-zone-scale span{
    font-size:7.5px!important;
  }
  .position-summary-tiles{
    gap:5px!important;
  }
  .position-summary-tiles>div,
  .position-summary-tiles>div:first-child,
  .position-summary-tiles>div:last-child{
    padding:7px!important;
  }
  .position-summary-tiles span{
    font-size:8px!important;
  }
  .position-summary-tiles strong{
    font-size:13px!important;
  }
}


/* ======================================================================
   v0.4.46 — visual, clearly-expandable chart help
   ====================================================================== */
.chart-help-details{
  margin-top:12px!important;
  border-top:1px solid #d7d7cf!important;
}
.chart-help-summary{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  min-height:50px!important;
  padding:10px 2px!important;
  cursor:pointer!important;
  list-style:none!important;
}
.chart-help-summary::-webkit-details-marker{display:none!important}
.chart-help-summary-copy{
  display:grid!important;
  gap:2px!important;
  min-width:0!important;
}
.chart-help-summary-copy strong{
  color:#4f5358!important;
  font-size:12px!important;
  line-height:1.2!important;
  font-weight:850!important;
}
.chart-help-summary-copy small{
  color:#8a8d92!important;
  font-size:9.5px!important;
  line-height:1.3!important;
}
.chart-help-chevron{
  position:relative;
  flex:0 0 28px;
  width:28px;
  height:28px;
  border:1px solid #b8b8b1;
  background:#fff;
}
.chart-help-chevron:before,
.chart-help-chevron:after{
  content:"";
  position:absolute;
  top:13px;
  width:8px;
  height:2px;
  background:#555;
  transition:transform .16s ease;
}
.chart-help-chevron:before{left:6px;transform:rotate(45deg)}
.chart-help-chevron:after{right:6px;transform:rotate(-45deg)}
.chart-help-details[open] .chart-help-chevron:before{transform:rotate(-45deg)}
.chart-help-details[open] .chart-help-chevron:after{transform:rotate(45deg)}

.chart-help{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:8px!important;
  margin:0!important;
  padding:12px 0 2px!important;
}
.chart-help-item{
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  align-items:center;
  gap:8px;
  min-width:0;
  padding:9px 10px;
  border:1px solid #deded7;
  background:#fafaf7;
}
.chart-help-item>span:last-child{
  display:grid;
  gap:2px;
  min-width:0;
}
.chart-help-item strong{
  color:#222;
  font-size:10px;
  line-height:1.2;
  font-weight:850;
}
.chart-help-item small{
  color:#74777c;
  font-size:8.5px;
  line-height:1.3;
}
.chart-help-demo{
  position:relative;
  display:block;
  width:54px;
  height:22px;
}
.chart-help-demo i{
  position:absolute;
  left:2px;
  right:2px;
  top:10px;
  height:3px;
  background:#2f6fe4;
}
.demo-history i{
  background:linear-gradient(90deg,#2f6fe4 0 32%,#df2e2e 32% 66%,#0b9a6d 66% 100%);
}
.demo-pre i{
  height:4px;
  opacity:.16;
  background:#2f6fe4;
}
.demo-change i{
  height:2px;
  background:#2f6fe4;
}
.demo-change:after{
  content:"";
  position:absolute;
  left:23px;
  top:5px;
  width:10px;
  height:10px;
  border:3px solid #2f6fe4;
  border-radius:50%;
  background:#fff;
}
.demo-current i{
  height:2px;
  background:#0b9a6d;
}
.demo-current:after{
  content:"";
  position:absolute;
  left:23px;
  top:5px;
  width:11px;
  height:11px;
  border:2px solid #111;
  border-radius:50%;
  background:#0b9a6d;
}
.demo-bot i{
  height:0;
  top:10px;
  border-top:2px dashed #94a3b8;
  background:transparent;
}

@media(max-width:900px){
  .chart-help{
    grid-template-columns:1fr 1fr!important;
  }
}
@media(max-width:620px){
  .chart-help-summary{
    min-height:48px!important;
  }
  .chart-help{
    grid-template-columns:1fr!important;
    gap:6px!important;
    padding-top:8px!important;
  }
  .chart-help-item{
    grid-template-columns:62px minmax(0,1fr);
    min-height:48px;
    padding:8px 9px;
  }
  .chart-help-demo{
    width:62px;
  }
  .chart-help-item strong{
    font-size:10.5px;
  }
  .chart-help-item small{
    font-size:9px;
  }
}


/* ======================================================================
   v0.4.47 — chart cleanup + non-clipping legend
   ====================================================================== */

/* Pre-collection context should whisper, not compete with real history. */
.pre-collection-line{
  opacity:.09!important;
  stroke-width:2.6!important;
}
.all-bank-chart .pre-collection-line{
  opacity:.07!important;
  stroke-width:2.2!important;
}

/* Historical nodes are secondary; the current quote remains the strongest mark. */
.top-three-chart .update-dot.changed-dot{
  r:2.7px;
  opacity:.72!important;
  stroke-width:1.8!important;
}
.top-three-chart .current-dot{
  stroke-width:1.4!important;
}

/* Collapsed legend must wrap; never crop BOT or the last bank chip. */
.full-chart-card .chart-legend-below{
  overflow:visible!important;
}
.full-chart-card .chart-legend-below .chart-series-legend{
  min-width:0!important;
  max-width:100%!important;
  overflow:visible!important;
}
.full-chart-card .chart-legend-below .chart-series-chip{
  min-width:0!important;
  max-width:100%!important;
}

/* Keep the show-more control on its own row so the bank chips get full width. */
.full-chart-card .chart-legend-below .legend-toggle{
  display:block!important;
  width:max-content!important;
  max-width:100%!important;
  margin-top:2px!important;
}

@media(max-width:760px){
  .full-chart-card .chart-legend-below{
    display:block!important;
    width:100%!important;
    padding-top:8px!important;
  }

  .full-chart-card .chart-legend-below .chart-series-legend,
  .full-chart-card .chart-legend-below.show-all .chart-series-legend{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
    padding:0!important;
  }

  .full-chart-card .chart-legend-below .chart-series-chip,
  .full-chart-card .chart-legend-below.show-all .chart-series-chip{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    overflow:hidden!important;
  }

  .full-chart-card .chart-legend-below .chart-series-chip b,
  .full-chart-card .chart-legend-below .chart-series-chip small,
  .full-chart-card .chart-legend-below .chart-series-chip em{
    min-width:0!important;
  }

  .full-chart-card .chart-legend-below .legend-toggle{
    margin-top:9px!important;
  }
}

@media(max-width:390px){
  .full-chart-card .chart-legend-below .chart-series-legend,
  .full-chart-card .chart-legend-below.show-all .chart-series-legend{
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
  }
}


/* ======================================================================
   v0.4.48 — fix broken mobile typography in 7-day summary tiles
   Stack tiles on narrow screens and use a two-column internal layout.
   ====================================================================== */
@media(max-width:620px){
  .position-summary-tiles{
    grid-template-columns:1fr!important;
    gap:7px!important;
  }

  .position-summary-tiles>div,
  .position-summary-tiles>div:first-child,
  .position-summary-tiles>div:last-child{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:
      "label rate"
      "meta impact"!important;
    align-items:center!important;
    column-gap:12px!important;
    row-gap:5px!important;
    min-width:0!important;
    padding:10px 11px!important;
  }

  .position-summary-tiles span{
    grid-area:label!important;
    min-width:0!important;
    font-size:10.5px!important;
    line-height:1.25!important;
    font-weight:800!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }

  .position-summary-tiles strong{
    grid-area:rate!important;
    margin:0!important;
    font-size:18px!important;
    line-height:1!important;
    font-weight:900!important;
    white-space:nowrap!important;
    text-align:right!important;
  }

  .position-summary-tiles small{
    grid-area:meta!important;
    min-width:0!important;
    margin:0!important;
    font-size:9.5px!important;
    line-height:1.3!important;
    color:#85888d!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:anywhere!important;
  }

  .position-summary-tiles .position-stat-impact{
    grid-area:impact!important;
    display:block!important;
    margin:0!important;
    padding:0!important;
    border-top:0!important;
    font-size:10px!important;
    line-height:1.25!important;
    font-weight:850!important;
    white-space:nowrap!important;
    text-align:right!important;
  }
}

@media(max-width:390px){
  .position-summary-tiles{
    gap:6px!important;
  }
  .position-summary-tiles>div,
  .position-summary-tiles>div:first-child,
  .position-summary-tiles>div:last-child{
    column-gap:9px!important;
    padding:9px 10px!important;
  }
  .position-summary-tiles span{
    font-size:10px!important;
  }
  .position-summary-tiles strong{
    font-size:17px!important;
  }
  .position-summary-tiles small{
    font-size:9px!important;
  }
  .position-summary-tiles .position-stat-impact{
    font-size:9.5px!important;
  }
}


/* ======================================================================
   v0.4.49 — playful asymmetrical hero
   Inspired by the selected concept: strong left headline + simple FX visual.
   ====================================================================== */
.hero-v2{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(220px,320px)!important;
  align-items:center!important;
  gap:28px!important;
  padding:34px 18px 28px!important;
  margin-top:0!important;
  overflow:hidden!important;
}
.hero-v2-copy{
  min-width:0;
  max-width:820px;
}
.hero-v2 .eyebrow{
  margin:0 0 14px!important;
  color:#596069!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:850!important;
  letter-spacing:.035em!important;
  text-transform:none!important;
}
.hero-v2 h1{
  display:grid!important;
  justify-items:start!important;
  width:auto!important;
  max-width:760px!important;
  margin:0!important;
  text-align:left!important;
  font-size:clamp(52px,7vw,92px)!important;
  line-height:.88!important;
  letter-spacing:-.055em!important;
}
html[lang="th"] .hero-v2 h1{
  letter-spacing:-.035em!important;
}
.hero-v2 .hero-line{
  position:relative;
  display:block!important;
  width:max-content;
  max-width:100%;
}
.hero-v2 .hero-line-top{
  margin-left:0!important;
}
.hero-v2 .hero-highlight{
  margin-top:8px!important;
  margin-left:48px!important;
  color:#1647c8!important;
  z-index:1;
}
.hero-v2 .hero-highlight:after{
  content:"";
  position:absolute;
  left:-10px;
  right:-8px;
  bottom:2px;
  height:16px;
  border-radius:10px 14px 8px 12px;
  background:rgba(77,134,255,.16);
  transform:rotate(-1deg);
  z-index:-1;
}
.hero-v2 .hero-sub{
  max-width:760px!important;
  margin:20px 0 0!important;
  color:#535960!important;
  font-size:15px!important;
  line-height:1.5!important;
  font-weight:650!important;
}

/* Decorative money / savings visual, all CSS so it stays crisp and lightweight. */
.hero-v2-art{
  position:relative;
  width:100%;
  min-height:210px;
  justify-self:end;
}
.hero-down-arrow{
  position:absolute;
  right:32px;
  top:18px;
  width:72px;
  height:124px;
  border-radius:12px 12px 10px 10px;
  background:linear-gradient(145deg,#5c8cff,#2059dc);
  transform:rotate(-34deg);
  box-shadow:inset 8px 8px 0 rgba(255,255,255,.08);
}
.hero-down-arrow:after{
  content:"";
  position:absolute;
  left:-28px;
  bottom:-38px;
  width:128px;
  height:82px;
  background:linear-gradient(145deg,#5c8cff,#2059dc);
  clip-path:polygon(50% 100%,0 0,34% 8%,42% 0,58% 0,66% 8%,100% 0);
  transform:rotate(34deg);
  transform-origin:center;
}
.hero-coin-stack{
  position:absolute;
  display:grid;
  gap:0;
}
.hero-coin-stack-a{left:26px;bottom:28px}
.hero-coin-stack-b{left:104px;bottom:18px}
.hero-coin-stack i{
  display:block;
  width:70px;
  height:22px;
  margin-top:-6px;
  border:2px solid #e7a400;
  border-radius:50%;
  background:linear-gradient(#ffd873,#ffbd28);
  box-shadow:inset 0 -5px 0 rgba(216,146,0,.18);
}
.hero-coin-stack-b i{
  width:58px;
  height:19px;
}
.hero-spark{
  position:absolute;
  width:8px;
  height:26px;
  border-radius:999px;
  background:#2f6fe4;
}
.hero-spark-a{right:12px;top:50px;transform:rotate(24deg)}
.hero-spark-b{right:-3px;top:87px;height:20px;transform:rotate(72deg)}

@media(max-width:900px){
  .hero-v2{
    grid-template-columns:minmax(0,1fr) 190px!important;
    gap:16px!important;
  }
  .hero-v2 h1{
    font-size:clamp(46px,8vw,72px)!important;
  }
  .hero-v2 .hero-highlight{
    margin-left:28px!important;
  }
  .hero-v2-art{
    min-height:170px;
    transform:scale(.88);
    transform-origin:right center;
  }
}

@media(max-width:700px){
  .hero-v2{
    display:block!important;
    padding:26px 6px 20px!important;
  }
  .hero-v2-copy{
    position:relative;
    z-index:2;
  }
  .hero-v2 h1{
    max-width:none!important;
    font-size:clamp(48px,14vw,72px)!important;
    line-height:.92!important;
  }
  .hero-v2 .hero-highlight{
    margin-left:22px!important;
    color:#1647c8!important;
  }
  .hero-v2 .hero-highlight:after{
    height:12px;
    bottom:0;
  }
  .hero-v2 .hero-sub{
    max-width:92%!important;
    margin-top:16px!important;
    font-size:13px!important;
  }
  .hero-v2-art{
    position:absolute;
    right:-16px;
    top:8px;
    width:150px;
    min-height:140px;
    opacity:.18;
    transform:scale(.72);
    transform-origin:right top;
    z-index:1;
    pointer-events:none;
  }
}

@media(max-width:430px){
  .hero-v2{
    padding-left:4px!important;
    padding-right:4px!important;
  }
  .hero-v2 h1{
    font-size:clamp(44px,13.5vw,62px)!important;
  }
  .hero-v2 .hero-highlight{
    margin-left:14px!important;
  }
  .hero-v2 .hero-sub{
    max-width:100%!important;
  }
}


/* ======================================================================
   v0.4.50 — harden 7-day summary typography at tablet/mobile widths
   At <=900px the three tiles become full-width scan rows so Thai copy never
   collapses into one-word columns or collides with the money-impact text.
   ====================================================================== */
@media(max-width:900px){
  .position-summary-tiles{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    width:100%!important;
  }

  .position-summary-tiles>div,
  .position-summary-tiles>div:first-child,
  .position-summary-tiles>div:last-child{
    display:grid!important;
    grid-template-columns:minmax(150px,1fr) minmax(120px,auto)!important;
    grid-template-areas:
      "label rate"
      "meta impact"!important;
    align-items:center!important;
    column-gap:14px!important;
    row-gap:5px!important;
    min-width:0!important;
    width:100%!important;
    padding:11px 12px!important;
    border:1px solid #deded7!important;
    background:#fafaf7!important;
  }

  .position-summary-tiles span{
    grid-area:label!important;
    display:block!important;
    min-width:0!important;
    margin:0!important;
    color:#5f6368!important;
    font-size:11px!important;
    line-height:1.25!important;
    font-weight:800!important;
    white-space:normal!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
  }

  .position-summary-tiles strong{
    grid-area:rate!important;
    display:block!important;
    margin:0!important;
    color:#111!important;
    font-size:19px!important;
    line-height:1!important;
    font-weight:900!important;
    white-space:nowrap!important;
    text-align:right!important;
  }

  .position-summary-tiles small{
    grid-area:meta!important;
    display:block!important;
    min-width:0!important;
    margin:0!important;
    color:#85888d!important;
    font-size:9.5px!important;
    line-height:1.3!important;
    white-space:normal!important;
    word-break:keep-all!important;
    overflow-wrap:anywhere!important;
  }

  .position-summary-tiles .position-stat-impact{
    grid-area:impact!important;
    display:block!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    font-size:10px!important;
    line-height:1.25!important;
    font-style:normal!important;
    font-weight:850!important;
    white-space:normal!important;
    text-align:right!important;
    word-break:keep-all!important;
    overflow-wrap:anywhere!important;
  }
}

@media(max-width:460px){
  .position-summary-tiles>div,
  .position-summary-tiles>div:first-child,
  .position-summary-tiles>div:last-child{
    grid-template-columns:minmax(0,1fr) auto!important;
    column-gap:10px!important;
    padding:10px!important;
  }
  .position-summary-tiles span{font-size:10.5px!important}
  .position-summary-tiles strong{font-size:18px!important}
  .position-summary-tiles small{font-size:9px!important}
  .position-summary-tiles .position-stat-impact{font-size:9.5px!important}
}


/* ======================================================================
   v0.4.53 — real hero illustration + text-safe responsive layout
   The artwork never determines the copy width; sentence builder spans both.
   ====================================================================== */
.hero-v2{
  grid-template-columns:minmax(0,1fr) minmax(260px,380px)!important;
  column-gap:clamp(20px,4vw,52px)!important;
  row-gap:22px!important;
  align-items:center!important;
  overflow:hidden!important;
}
.hero-v2-copy{
  min-width:0!important;
  width:100%!important;
  max-width:none!important;
}
.hero-v2 h1{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  font-size:clamp(48px,6.2vw,88px)!important;
  line-height:.92!important;
  letter-spacing:-.045em!important;
}
html[lang="th"] .hero-v2 h1{
  letter-spacing:-.025em!important;
}
.hero-v2 .hero-line{
  display:block!important;
  width:auto!important;
  max-width:100%!important;
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
}
.hero-v2 .hero-line-top{
  margin-left:0!important;
}
.hero-v2 .hero-highlight{
  margin-top:7px!important;
  margin-left:clamp(14px,3vw,44px)!important;
}
.hero-v2 .hero-sub{
  max-width:760px!important;
  margin:18px 0 0!important;
  text-wrap:pretty;
}

.hero-v2-art{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  justify-self:end!important;
  overflow:visible!important;
}
.hero-v2-image{
  display:block!important;
  width:min(100%,380px)!important;
  height:auto!important;
  aspect-ratio:4/3!important;
  object-fit:contain!important;
  object-position:center!important;
  max-width:100%!important;
}

/* Form/setup remains full width and can never be pushed into the art column. */
.hero-v2>.sentence-builder{
  grid-column:1 / -1!important;
  width:100%!important;
  min-width:0!important;
}

@media(max-width:900px){
  .hero-v2{
    grid-template-columns:minmax(0,1fr) minmax(210px,290px)!important;
    column-gap:18px!important;
  }
  .hero-v2 h1{
    font-size:clamp(44px,7.4vw,68px)!important;
  }
  .hero-v2-image{
    width:min(100%,290px)!important;
  }
}

@media(max-width:700px){
  .hero-v2{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
    padding:24px 4px 18px!important;
    overflow:hidden!important;
  }
  .hero-v2-copy{
    grid-column:1!important;
    grid-row:1!important;
    position:relative!important;
    z-index:2!important;
  }
  .hero-v2 h1{
    font-size:clamp(42px,13vw,66px)!important;
    line-height:.94!important;
  }
  .hero-v2 .hero-highlight{
    margin-left:clamp(8px,4vw,20px)!important;
  }
  .hero-v2-art{
    grid-column:1!important;
    grid-row:2!important;
    position:relative!important;
    right:auto!important;
    top:auto!important;
    width:100%!important;
    min-height:0!important;
    opacity:1!important;
    transform:none!important;
    justify-content:center!important;
    pointer-events:none;
  }
  .hero-v2-image{
    width:min(84vw,360px)!important;
    max-height:260px!important;
    object-fit:contain!important;
  }
  .hero-v2>.sentence-builder{
    grid-column:1!important;
    grid-row:3!important;
  }
  .hero-v2 .hero-sub{
    max-width:100%!important;
    margin-top:14px!important;
    font-size:13px!important;
  }
}

@media(max-width:430px){
  .hero-v2 h1{
    font-size:clamp(40px,12.8vw,58px)!important;
  }
  .hero-v2 .hero-line{
    white-space:nowrap!important;
  }
  .hero-v2-image{
    width:min(88vw,330px)!important;
    max-height:235px!important;
  }
}


/* ======================================================================
   v0.4.55 — Kanit Thai UI + side-by-side mobile hero artwork
   ====================================================================== */

/* Thai mode uses Kanit everywhere, including controls and inline chart SVG text.
   English mode keeps the existing Latin stack. */
html[lang="th"] body,
html[lang="th"] body *,
html[lang="th"] button,
html[lang="th"] input,
html[lang="th"] select,
html[lang="th"] textarea,
html[lang="th"] svg text{
  font-family:"Kanit",sans-serif!important;
}
html[lang="th"] body{
  font-synthesis:none!important;
}

/* New square FX artwork. Desktop keeps it as the right-side visual. */
.hero-v2-art{
  min-width:0!important;
  overflow:visible!important;
}
.hero-v2-image{
  display:block!important;
  width:min(100%,390px)!important;
  height:auto!important;
  max-width:100%!important;
  max-height:none!important;
  aspect-ratio:1/1!important;
  object-fit:contain!important;
}

/* Mobile: artwork shrinks and remains to the RIGHT of the copy.
   It does not create another row or push the form downward. */
@media(max-width:700px){
  .hero-v2{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) clamp(92px,25vw,128px)!important;
    grid-template-rows:auto auto!important;
    column-gap:10px!important;
    row-gap:14px!important;
    align-items:start!important;
    padding:22px 4px 18px!important;
    overflow:hidden!important;
  }
  .hero-v2-copy{
    grid-column:1!important;
    grid-row:1!important;
    min-width:0!important;
    width:100%!important;
    position:relative!important;
    z-index:2!important;
  }
  .hero-v2-art{
    grid-column:2!important;
    grid-row:1!important;
    position:relative!important;
    right:auto!important;
    top:auto!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    align-self:center!important;
    justify-self:end!important;
    justify-content:flex-end!important;
    opacity:1!important;
    transform:none!important;
    z-index:1!important;
    pointer-events:none!important;
  }
  .hero-v2-image{
    width:100%!important;
    max-width:128px!important;
    height:auto!important;
    max-height:none!important;
    aspect-ratio:1/1!important;
    object-fit:contain!important;
  }
  .hero-v2>.sentence-builder{
    grid-column:1 / -1!important;
    grid-row:2!important;
    min-width:0!important;
    width:100%!important;
  }
  .hero-v2 h1{
    width:100%!important;
    max-width:none!important;
    font-size:clamp(36px,10.4vw,54px)!important;
    line-height:.96!important;
    letter-spacing:-.02em!important;
  }
  html[lang="th"] .hero-v2 h1{
    letter-spacing:-.01em!important;
  }
  .hero-v2 .hero-line{
    width:max-content!important;
    max-width:100%!important;
    white-space:nowrap!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
  }
  .hero-v2 .hero-highlight{
    margin-left:clamp(4px,2vw,12px)!important;
    margin-top:5px!important;
  }
  .hero-v2 .hero-sub{
    max-width:100%!important;
    margin-top:12px!important;
    font-size:12.5px!important;
    line-height:1.45!important;
  }
}

@media(max-width:390px){
  .hero-v2{
    grid-template-columns:minmax(0,1fr) 86px!important;
    column-gap:8px!important;
  }
  .hero-v2-image{
    max-width:86px!important;
  }
  .hero-v2 h1{
    font-size:clamp(34px,10vw,48px)!important;
  }
  .hero-v2 .hero-sub{
    font-size:12px!important;
  }
}


/* ======================================================================
   v0.4.56 — rebalance Kanit weights
   Kanit is the Thai typeface, but body/supporting copy should read at regular
   weight. Reserve bold for headings, key values, ranks, CTAs and statuses.
   ====================================================================== */
html[lang="th"] body{
  font-weight:400!important;
}

/* Regular reading copy */
html[lang="th"] p,
html[lang="th"] small,
html[lang="th"] label,
html[lang="th"] .checked,
html[lang="th"] .hero-sub,
html[lang="th"] .scenario-line,
html[lang="th"] .scenario-hint,
html[lang="th"] .insight-note,
html[lang="th"] .chart-detail-time,
html[lang="th"] .chart-detail-bank>small,
html[lang="th"] .bank-choice small,
html[lang="th"] .fee-quick-copy small,
html[lang="th"] .advanced-options small,
html[lang="th"] .result-meta,
html[lang="th"] .bank-meta,
html[lang="th"] .position-summary-tiles small{
  font-weight:400!important;
}

/* Secondary labels: enough emphasis without looking bold everywhere */
html[lang="th"] .eyebrow,
html[lang="th"] .label,
html[lang="th"] .controls label>span,
html[lang="th"] .basis>span,
html[lang="th"] .sentence-text,
html[lang="th"] .radio-label,
html[lang="th"] .bank-scope-label,
html[lang="th"] .chart-detail-bank>b,
html[lang="th"] .position-summary-tiles span,
html[lang="th"] .winner-share-label,
html[lang="th"] .insight-metrics span,
html[lang="th"] .position-percentile span{
  font-weight:500!important;
}

/* Form controls should feel normal, not like headings */
html[lang="th"] button,
html[lang="th"] input,
html[lang="th"] select,
html[lang="th"] textarea,
html[lang="th"] .retro-select,
html[lang="th"] .retro-radio{
  font-weight:500!important;
}

/* Keep primary actions and important utility controls clearly actionable */
html[lang="th"] .retro-primary,
html[lang="th"] .feedback-header-button,
html[lang="th"] .language-toggle,
html[lang="th"] .legend-toggle,
html[lang="th"] .fee-quick-toggle,
html[lang="th"] .manage-banks-button,
html[lang="th"] .bank-picker-close{
  font-weight:600!important;
}

/* Intentional emphasis */
html[lang="th"] h1,
html[lang="th"] h2,
html[lang="th"] h3,
html[lang="th"] strong,
html[lang="th"] b,
html[lang="th"] .brand,
html[lang="th"] .brand-copy strong,
html[lang="th"] .result-amount,
html[lang="th"] .bank-total,
html[lang="th"] .bank-rate,
html[lang="th"] .rank-badge,
html[lang="th"] .position-summary-tiles strong,
html[lang="th"] .current-rate-value{
  font-weight:700!important;
}

/* Hero may stay stronger than normal headings without using 900-heavy Kanit. */
html[lang="th"] .hero-v2 h1{
  font-weight:700!important;
}


/* ======================================================================
   v0.4.57 — readable web-standard type scale
   Base reading text is 16px on desktop AND mobile. Supporting text generally
   stays >=13–14px. Tiny text is reserved for chart axes / compact badges only.
   ====================================================================== */
:root{
  --type-micro:13px!important;
  --type-small:14px!important;
  --type-body:16px!important;
  --type-control:16px!important;
  --type-subhead:20px!important;
  --type-title:28px!important;

  --ux-support:14px!important;
  --ux-body:16px!important;
  --ux-data:22px!important;
  --ux-section:28px!important;

  --ui-text:16px!important;
  --ui-small:14px!important;
  --ui-label:13px!important;
  --ui-micro:12px!important;
  --ui-section:28px!important;
  --ui-card-title:22px!important;
}

html{
  font-size:16px!important;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  font-size:16px!important;
  line-height:1.5!important;
}

/* Normal reading copy */
p,
li,
td,
details,
summary{
  line-height:1.5;
}
small,
.muted,
.checked,
.direction-note,
.insight-note,
.footnote,
.scenario-line,
.scenario-hint,
.bank-meta,
.result-meta,
.answer-verified,
.answer-total small,
.answer-meta .freshness-badge,
.position-summary-tiles small{
  font-size:14px!important;
  line-height:1.45!important;
}

/* Labels / supporting UI */
.eyebrow,
.label,
.answer-kicker,
.answer-total>span,
.answer-rate>span,
.answer-saving>span,
th,
.rank,
.best-chip,
.bot-inline,
.chart-help-summary-copy small,
.chart-help-item small,
.position-range-labels span,
.position-current>span,
.position-impact>span{
  font-size:13px!important;
  line-height:1.35!important;
}

/* Controls: 16px is both easier to read and avoids iOS input zoom. */
button,
input,
select,
textarea,
.retro-select,
.retro-primary,
.retro-radio,
.exchange-box input,
.exchange-box>span,
.language-toggle,
.feedback-header-button{
  font-size:16px!important;
  line-height:1.35!important;
}

/* Header / navigation */
.brand{font-size:16px!important}
.checked{font-size:14px!important}
.topbar .language-toggle,
.topbar button,
.topbar a{font-size:14px!important}

/* Main task and result */
.sentence-line-v3{font-size:18px!important}
.exchange-box strong,
.exchange-output strong{font-size:13px!important}
.exchange-output>span#convertedAmount{font-size:20px!important}
.exchange-approx{font-size:15px!important}

.answer-bank-copy strong{font-size:22px!important}
.answer-total strong{font-size:clamp(34px,3vw,46px)!important}
.answer-rate strong,
.answer-saving strong{font-size:20px!important}
.answer-compare-button{font-size:15px!important}

/* Section headings */
.section-head h2,
.insight-card-head h2,
.compact-table-card .section-head h2,
.full-chart-card .section-head h2{
  font-size:28px!important;
  line-height:1.15!important;
}
h3{font-size:20px}

/* Bank ranking cards */
.bank-card .bank-name,
.bank-card .bank-title,
.bank strong{font-size:18px!important}
.bank-card .bank-total,
.bank-total{font-size:clamp(30px,3vw,40px)!important}
.bank-card .bank-rate,
.bank-rate{font-size:18px!important}
.bank-card small,
.bank-choice small{font-size:14px!important}

/* Chart: keep axes compact but no microscopic 7–9px labels. */
.chart-key,
.chart-series-chip,
.legend-toggle,
.bot-indicator-key b,
.bot-indicator-key small{font-size:13px!important}
.axis-label,
.rail-label-name{font-size:11px!important}
.rail-label-rate{font-size:10.5px!important}
.chart-help,
.chart-help-item strong{font-size:13px!important}
.chart-help-item small{font-size:12px!important}
.chart-help-summary-copy strong{font-size:14px!important}

/* Current-position / insight cards */
.current-position-card .position-current>span{font-size:13px!important}
.current-position-card .position-current strong{font-size:clamp(30px,3vw,40px)!important}
.position-impact>span{font-size:13px!important}
.position-impact strong{font-size:20px!important}
.position-impact small{font-size:14px!important}
.position-now-label>span{font-size:13px!important}
.current-position-card .position-percentile strong{font-size:14px!important}
.position-summary-tiles span{font-size:14px!important}
.position-summary-tiles strong{font-size:20px!important}
.position-summary-tiles small{font-size:13px!important}
.position-summary-tiles .position-stat-impact{font-size:13px!important}

/* Data tables */
table{font-size:14px!important}
th{font-size:13px!important}
.bank small,.stale-notice{font-size:13px!important}
.source-link{font-size:14px!important}

/* Avoid giant growth on small screens, but do NOT shrink body text below 16px. */
@media(max-width:820px){
  :root{
    --ux-body:16px!important;
    --ux-section:25px!important;
    --ui-text:16px!important;
    --ui-section:25px!important;
  }
  body{font-size:16px!important}
  .section-head h2,
  .insight-card-head h2,
  .compact-table-card .section-head h2,
  .full-chart-card .section-head h2{font-size:25px!important}
}

@media(max-width:620px){
  :root{
    --type-body:16px!important;
    --type-control:16px!important;
    --type-small:14px!important;
    --type-micro:13px!important;
    --ux-body:16px!important;
    --ux-support:14px!important;
    --ui-text:16px!important;
    --ui-small:14px!important;
    --ui-label:13px!important;
    --ui-micro:12px!important;
    --ui-section:24px!important;
  }

  body{font-size:16px!important;line-height:1.5!important}
  .hero-v2 .hero-sub,
  .hero-sub{font-size:15px!important;line-height:1.5!important}
  .sentence-line-v3{font-size:17px!important}

  button,
  input,
  select,
  textarea,
  .retro-select,
  .retro-primary,
  .retro-radio{font-size:16px!important}

  .section-head h2,
  .insight-card-head h2,
  .compact-table-card .section-head h2,
  .full-chart-card .section-head h2{font-size:24px!important}

  .answer-bank-copy strong{font-size:21px!important}
  .answer-total strong{font-size:34px!important}
  .answer-rate strong,
  .answer-saving strong{font-size:19px!important}

  .bank-card .bank-name,
  .bank-card .bank-title,
  .bank strong{font-size:18px!important}
  .bank-card small,
  .bank-choice small{font-size:14px!important}

  .chart-help-summary-copy strong{font-size:14px!important}
  .chart-help-summary-copy small{font-size:13px!important}
  .chart-help-item strong{font-size:14px!important}
  .chart-help-item small{font-size:13px!important}

  .position-summary-tiles span{font-size:14px!important}
  .position-summary-tiles strong{font-size:19px!important}
  .position-summary-tiles small{font-size:13px!important}
  .position-summary-tiles .position-stat-impact{font-size:13px!important}
}


/* ======================================================================
   v0.4.58 — standard system font for numbers
   Thai copy stays Kanit; numeric data uses the platform UI font in both TH/EN
   for cleaner, more familiar digits and easier scanning.
   ====================================================================== */
:root{
  --numeric-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* Core money / FX values */
html body #amount,
html body #convertedAmount,
html body .result-amount,
html body .answer-total strong,
html body .answer-rate strong,
html body .answer-saving strong,
html body .bank-total,
html body .bank-rate,
html body .bank-delta,
html body .top-bank-rate,
html body .top-bank-diff,
html body .current-rate-value,
html body .position-current strong,
html body .position-impact strong,
html body .position-now-label,
html body .position-percentile strong,
html body .position-summary-tiles strong,
html body .position-stat-impact,
html body .insight-metrics strong,
html body .winner-share-value,
html body .rate-value,
html body .fee-value,
html body .freshness-badge{
  font-family:var(--numeric-font)!important;
  font-variant-numeric:tabular-nums lining-nums!important;
  font-feature-settings:"tnum" 1,"lnum" 1!important;
}

/* Inputs / controls containing amounts, percentages or fee numbers */
html body input,
html body input[type="number"],
html body .exchange-box input,
html body .fee-input,
html body .amount-input{
  font-family:var(--numeric-font)!important;
  font-variant-numeric:tabular-nums lining-nums!important;
}

/* Chart numbers and tooltip values: system digits in both languages. */
html body .chart svg text,
html body .axis-label,
html body .rail-label-rate,
html body .tooltip-time,
html body .tooltip-row strong,
html body .chart-detail-rate,
html body .chart-detail-time,
html body .chart-series-chip small,
html body .bot-indicator-key small{
  font-family:var(--numeric-font)!important;
  font-variant-numeric:tabular-nums lining-nums!important;
  font-feature-settings:"tnum" 1,"lnum" 1!important;
}

/* Ranking/table numeric columns and badges. */
html body table td:not(:first-child),
html body table td:not(:first-child) strong,
html body .rank,
html body .rank-badge,
html body .best-chip{
  font-family:var(--numeric-font)!important;
  font-variant-numeric:tabular-nums lining-nums!important;
}

/* Header version / freshness timestamps are numeric-heavy utility text. */
html body .version-badge,
html body .checked,
html body .header-freshness{
  font-family:var(--numeric-font)!important;
  font-variant-numeric:tabular-nums lining-nums!important;
}


/* ======================================================================
   v0.4.59 — unify Thai and English font metrics
   Use the same system UI stack in both languages so Thai/English render at
   the same perceived size and spacing. Numeric font remains identical.
   ====================================================================== */
html body,
html body *,
html button,
html input,
html select,
html textarea,
html svg text{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
}
html[lang="th"] body,
html[lang="th"] body *,
html[lang="th"] button,
html[lang="th"] input,
html[lang="th"] select,
html[lang="th"] textarea,
html[lang="th"] svg text{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
}
html[lang="th"] body{
  font-size:16px!important;
  line-height:1.5!important;
}


/* ======================================================================
   v0.4.60 — prevent current-position rate overflow
   Split the value and unit into separate typographic roles so long currency
   pairs never escape the card, while keeping the rate visually dominant.
   ====================================================================== */
.current-position-card .position-current{
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
}
.current-position-card #positionCurrentRate{
  display:flex!important;
  align-items:baseline!important;
  flex-wrap:wrap!important;
  column-gap:10px!important;
  row-gap:2px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin-top:5px!important;
  white-space:normal!important;
  line-height:1!important;
  letter-spacing:0!important;
}
.current-position-card .position-current-number{
  display:inline-block!important;
  min-width:0!important;
  font-family:var(--numeric-font)!important;
  font-size:clamp(34px,4vw,52px)!important;
  line-height:.95!important;
  font-weight:700!important;
  font-variant-numeric:tabular-nums lining-nums!important;
  white-space:nowrap!important;
}
.current-position-card .position-current-unit{
  display:inline-block!important;
  min-width:0!important;
  font-family:var(--numeric-font)!important;
  font-size:clamp(18px,1.8vw,26px)!important;
  line-height:1!important;
  font-weight:650!important;
  white-space:nowrap!important;
  color:#111!important;
}

/* Give the current-rate side enough room before stacking the two hero columns. */
.position-hero{
  grid-template-columns:minmax(0,1fr) minmax(360px,1fr)!important;
}

@media(max-width:1100px){
  .position-hero{
    grid-template-columns:1fr!important;
  }
  .current-position-card #positionCurrentRate{
    flex-wrap:nowrap!important;
  }
}

@media(max-width:620px){
  .current-position-card #positionCurrentRate{
    column-gap:7px!important;
    flex-wrap:wrap!important;
  }
  .current-position-card .position-current-number{
    font-size:clamp(30px,9vw,40px)!important;
  }
  .current-position-card .position-current-unit{
    font-size:18px!important;
  }
}


/* ======================================================================
   v0.4.61 — normalize current-position typography hierarchy
   Keep the existing layout/logic; use a tighter, consistent type scale so
   the section reads as one system instead of several unrelated sizes.
   ====================================================================== */
.current-position-card .position-card-head h2{
  font-size:28px!important;
  line-height:1.15!important;
}
.current-position-card .position-card-head .direction-note{
  font-size:14px!important;
  line-height:1.4!important;
}

.current-position-card .position-current{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}
.current-position-card .position-current>span{
  font-size:14px!important;
  line-height:1.35!important;
  font-weight:750!important;
}
.current-position-card .position-current-number{
  font-size:40px!important;
  line-height:1!important;
  font-weight:750!important;
}
.current-position-card .position-current-unit{
  font-size:18px!important;
  line-height:1.1!important;
  font-weight:650!important;
  color:#5f6368!important;
}

.current-position-card .position-impact{
  padding:16px 18px!important;
}
.current-position-card .position-impact>span{
  font-size:14px!important;
  line-height:1.35!important;
}
.current-position-card .position-impact strong{
  margin-top:4px!important;
  font-size:26px!important;
  line-height:1.2!important;
  font-weight:800!important;
}
.current-position-card .position-impact small{
  margin-top:4px!important;
  font-size:14px!important;
  line-height:1.4!important;
}

.current-position-card .position-range-labels span{
  font-size:14px!important;
  line-height:1.35!important;
}
.current-position-card .position-range-labels strong{
  font-size:22px!important;
  line-height:1.1!important;
  font-weight:800!important;
}
.current-position-card .position-zone-scale span{
  font-size:12px!important;
  line-height:1.2!important;
  font-weight:700!important;
}
.current-position-card .position-now-label>span{
  font-size:14px!important;
  line-height:1.25!important;
}

.current-position-card .position-summary-tiles span{
  font-size:14px!important;
  line-height:1.35!important;
}
.current-position-card .position-summary-tiles strong{
  font-size:24px!important;
  line-height:1.1!important;
  font-weight:800!important;
}
.current-position-card .position-summary-tiles small{
  font-size:14px!important;
  line-height:1.4!important;
}
.current-position-card .position-summary-tiles .position-stat-impact{
  font-size:14px!important;
  line-height:1.35!important;
}
.current-position-card .position-percentile strong{
  font-size:16px!important;
  line-height:1.3!important;
}
.current-position-card>.insight-note:last-child{
  font-size:13px!important;
  line-height:1.45!important;
}

@media(max-width:820px){
  .current-position-card .position-card-head h2{
    font-size:25px!important;
  }
  .current-position-card .position-current-number{
    font-size:36px!important;
  }
  .current-position-card .position-impact strong{
    font-size:24px!important;
  }
  .current-position-card .position-range-labels strong{
    font-size:20px!important;
  }
  .current-position-card .position-summary-tiles strong{
    font-size:21px!important;
  }
}

@media(max-width:620px){
  .current-position-card .position-card-head h2{
    font-size:24px!important;
  }
  .current-position-card .position-current-number{
    font-size:34px!important;
  }
  .current-position-card .position-current-unit{
    font-size:16px!important;
  }
  .current-position-card .position-impact strong{
    font-size:22px!important;
  }
  .current-position-card .position-zone-scale span{
    font-size:11px!important;
  }
  .current-position-card .position-summary-tiles strong{
    font-size:20px!important;
  }
}


/* ======================================================================
   v0.4.62 — fix current-rate specificity regression
   Generic .position-current span rules were overriding the split number/unit
   spans. Target the rendered spans through #positionCurrentRate so the current
   rate is actually the dominant value.
   ====================================================================== */
.current-position-card #positionCurrentRate .position-current-number{
  font-size:46px!important;
  line-height:.95!important;
  font-weight:750!important;
  color:#111!important;
}
.current-position-card #positionCurrentRate .position-current-unit{
  font-size:18px!important;
  line-height:1.1!important;
  font-weight:650!important;
  color:#5f6368!important;
}

@media(max-width:1100px){
  .current-position-card #positionCurrentRate .position-current-number{
    font-size:42px!important;
  }
}

@media(max-width:620px){
  .current-position-card #positionCurrentRate .position-current-number{
    font-size:36px!important;
  }
  .current-position-card #positionCurrentRate .position-current-unit{
    font-size:16px!important;
  }
}


/* ======================================================================
   v0.4.63 — all-bank chart series toggles
   In "show all banks" mode, legend chips become on/off controls so users can
   isolate only the lines they want to compare. Top 3 mode remains unchanged.
   ====================================================================== */
.full-chart-card .chart-legend-below.show-all .chart-series-chip.is-toggleable{
  cursor:pointer!important;
  user-select:none!important;
  transition:opacity .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease!important;
}
.full-chart-card .chart-legend-below.show-all .chart-series-chip.is-toggleable:hover{
  border-color:#111!important;
}
.full-chart-card .chart-legend-below.show-all .chart-series-chip.is-toggleable:focus-visible{
  outline:2px solid #111!important;
  outline-offset:2px!important;
}
.full-chart-card .chart-legend-below.show-all .chart-series-chip.is-toggleable:active{
  transform:translateY(1px)!important;
}
.full-chart-card .chart-legend-below.show-all .chart-series-chip.is-off{
  opacity:.38!important;
  background:#f3f3ef!important;
  border-color:#d8d8d2!important;
  box-shadow:none!important;
}
.full-chart-card .chart-legend-below.show-all .chart-series-chip.is-off .chart-series-dot{
  background:#b8bcc2!important;
  border-color:#aeb3b9!important;
}
.full-chart-card .chart-legend-below.show-all .chart-series-chip.is-off b,
.full-chart-card .chart-legend-below.show-all .chart-series-chip.is-off small,
.full-chart-card .chart-legend-below.show-all .chart-series-chip.is-off em{
  color:#777!important;
}
.full-chart-card .chart-legend-below.show-all .chart-series-chip.is-off b{
  text-decoration:line-through!important;
  text-decoration-thickness:1px!important;
}


/* ======================================================================
   v0.4.64 — assign persistent colors in all-bank chart mode
   Chips no longer remove series. Clicking a gray context bank promotes it to
   its series color for the remainder of the all-bank session.
   ====================================================================== */
.all-bank-chart path.finance-series.context-bank-series.assigned-bank-series{
  stroke:var(--series-color)!important;
  stroke-width:2.2!important;
  opacity:.96!important;
}
.all-bank-chart .current-dot.context-bank-series.assigned-bank-series{
  fill:var(--series-color)!important;
  stroke:#111!important;
  stroke-width:1!important;
  opacity:1!important;
}

.full-chart-card .chart-legend-below.show-all .chart-series-chip.is-assignable{
  cursor:pointer!important;
  user-select:none!important;
  transition:background .16s ease,border-color .16s ease,transform .16s ease!important;
}
.full-chart-card .chart-legend-below.show-all .chart-series-chip.is-assignable:hover{
  border-color:#111!important;
  background:#f6f8fb!important;
}
.full-chart-card .chart-legend-below.show-all .chart-series-chip.is-assignable:focus-visible{
  outline:2px solid #111!important;
  outline-offset:2px!important;
}
.full-chart-card .chart-legend-below.show-all .chart-series-chip.is-assignable:active{
  transform:translateY(1px)!important;
}

.full-chart-card .chart-legend-below.show-all .chart-series-chip.is-assigned{
  color:#111!important;
  border-color:var(--series-color)!important;
  background:#fff!important;
  opacity:1!important;
}
.full-chart-card .chart-legend-below.show-all .chart-series-chip.is-assigned .chart-series-dot{
  background:var(--series-color)!important;
  border-color:#111!important;
}
.full-chart-card .chart-legend-below.show-all .chart-series-chip.is-assigned b,
.full-chart-card .chart-legend-below.show-all .chart-series-chip.is-assigned small{
  color:#111!important;
  text-decoration:none!important;
}

/* Remove the previous on/off visual treatment entirely. */
.full-chart-card .chart-legend-below.show-all .chart-series-chip.is-off{
  opacity:1!important;
  background:inherit!important;
}
.full-chart-card .chart-legend-below.show-all .chart-series-chip.is-off b{
  text-decoration:none!important;
}


/* ======================================================================
   v0.4.65 — chart color assignment is a real toggle
   Non-Top-3 chips remain interactive after assignment so clicking again
   returns the series to gray without hiding it.
   ====================================================================== */
.full-chart-card .chart-legend-below.show-all .chart-series-chip.is-toggleable-color{
  cursor:pointer!important;
  user-select:none!important;
  transition:background .16s ease,border-color .16s ease,transform .16s ease,opacity .16s ease!important;
}
.full-chart-card .chart-legend-below.show-all .chart-series-chip.is-toggleable-color:hover{
  border-color:#111!important;
}
.full-chart-card .chart-legend-below.show-all .chart-series-chip.is-toggleable-color:focus-visible{
  outline:2px solid #111!important;
  outline-offset:2px!important;
}
.full-chart-card .chart-legend-below.show-all .chart-series-chip.is-toggleable-color:active{
  transform:translateY(1px)!important;
}


/* ======================================================================
   v0.4.66 — never truncate primary money/rate information with ellipses
   Essential transaction values and the winning-bank summary must remain
   fully readable. Prefer wrapping or responsive type over "...".
   ====================================================================== */
.exchange-output{
  min-width:0!important;
  overflow:visible!important;
}
.exchange-output>span#convertedAmount{
  flex:1 1 auto!important;
  min-width:0!important;
  max-width:none!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
  font-size:clamp(16px,1.6vw,22px)!important;
}
.exchange-output #convertedUnit{
  flex:0 0 auto!important;
  white-space:nowrap!important;
}

.answer-strip>div{
  overflow:visible!important;
}
.answer-bank-copy{
  overflow:visible!important;
}
.answer-bank-copy strong{
  max-width:100%!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
.answer-rate strong,
.answer-saving strong{
  max-width:100%!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
.answer-total strong{
  overflow:visible!important;
  text-overflow:clip!important;
}

@media(min-width:901px){
  .answer-strip{
    grid-template-columns:
      minmax(250px,1.18fr)
      minmax(300px,1.35fr)
      minmax(185px,.72fr)
      minmax(180px,.72fr)!important;
    overflow:visible!important;
  }
  .answer-rate strong,
  .answer-saving strong{
    line-height:1.2!important;
  }
}

@media(max-width:900px){
  .exchange-output>span#convertedAmount{
    font-size:clamp(16px,4.2vw,20px)!important;
  }
}

@media(max-width:620px){
  .exchange-output{
    flex-wrap:wrap!important;
    row-gap:2px!important;
  }
  .exchange-output>span#convertedAmount{
    flex:0 1 auto!important;
    font-size:clamp(22px,7vw,28px)!important;
  }
  .answer-bank-copy strong,
  .answer-rate strong,
  .answer-saving strong{
    white-space:normal!important;
  }
}


/* ======================================================================
   v0.4.67 — hero artwork follows content height instead of creating it
   Desktop artwork is capped below the copy height so the text, not the square
   illustration, determines the first hero row. Mobile side-by-side behavior
   remains unchanged.
   ====================================================================== */
@media(min-width:701px){
  .hero-v2{
    grid-template-columns:minmax(0,1fr) minmax(220px,310px)!important;
    column-gap:clamp(24px,3.5vw,48px)!important;
    row-gap:14px!important;
    align-items:center!important;
    padding-top:20px!important;
    padding-bottom:18px!important;
  }
  .hero-v2-art{
    width:100%!important;
    max-width:310px!important;
    justify-self:end!important;
    align-self:center!important;
  }
  .hero-v2-image{
    width:clamp(230px,22vw,310px)!important;
    max-width:100%!important;
    height:auto!important;
    max-height:310px!important;
    aspect-ratio:1/1!important;
    object-fit:contain!important;
  }
  .hero-v2>.sentence-builder{
    margin-top:0!important;
  }
}

@media(min-width:701px) and (max-width:1100px){
  .hero-v2{
    grid-template-columns:minmax(0,1fr) minmax(190px,260px)!important;
    column-gap:20px!important;
  }
  .hero-v2-art{
    max-width:260px!important;
  }
  .hero-v2-image{
    width:clamp(200px,23vw,260px)!important;
    max-height:260px!important;
  }
}


/* ======================================================================
   v0.4.69 — functional-cookie notice + legal footer
   ====================================================================== */
.site-legal-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:18px 0 8px;
  color:#6b6f74;
  font-size:13px;
}
.site-legal-links a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid #b9b9b2;
}
.site-legal-links a:hover{
  color:#111;
  border-bottom-color:#111;
}

.cookie-notice{
  position:fixed;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:min(920px,calc(100% - 24px));
  margin:0 auto 12px;
  padding:12px 14px;
  border:1.5px solid #111;
  background:#fff;
  box-shadow:3px 3px 0 #111;
}
.cookie-notice[hidden]{display:none!important}
.cookie-notice p{
  margin:0;
  color:#404348;
  font-size:14px;
  line-height:1.45;
}
.cookie-notice-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}
.cookie-notice-actions a{
  color:#4f5358;
  font-size:13px;
  text-decoration:none;
  border-bottom:1px solid #aaa;
  white-space:nowrap;
}
.cookie-notice-actions button{
  min-height:38px;
  padding:0 14px;
  border:1.5px solid #111;
  background:#111;
  color:#fff;
  font-weight:800;
  cursor:pointer;
}

@media(max-width:700px){
  .site-legal-links{
    flex-wrap:wrap;
    font-size:12px;
  }
  .cookie-notice{
    position:fixed;
    left:50%;
    bottom:8px;
    transform:translateX(-50%);
    display:block;
    width:calc(100% - 16px);
    padding:12px;
  }
  .cookie-notice p{
    font-size:13px;
  }
  .cookie-notice-actions{
    justify-content:space-between;
    margin-top:10px;
  }
}


/* v0.4.70 — API navigation */
.api-header-link{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:34px!important;
  padding:0 9px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#555!important;
  font-size:10.5px!important;
  font-weight:850!important;
  text-decoration:none!important;
}
@media(max-width:760px){
  .api-header-link{
    min-height:34px!important;
    padding:0 7px!important;
    font-size:10.5px!important;
  }
}
@media(max-width:430px){
  .api-header-link{
    padding:0 5px!important;
    font-size:10px!important;
  }
}