:root {
  /* Space for the phone's status bar and gesture bar. --bar-* come from the Android app (older WebViews report no safe-area). */
  --safe-top: max(env(safe-area-inset-top), var(--bar-top, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom), var(--bar-bottom, 0px));
  color-scheme: light;
  --ink: #19261f;
  --muted: #5c685f;
  --paper: #f6f7f3;
  --white: #fff;
  --line: #e5e9e1;
  --green: #254b38;
  --dark: #19372a;
  --lime: #c9f36a;
  --shadow: 0 12px 34px rgba(31, 52, 38, .065);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body { margin: 0; min-width: 320px; background: var(--paper); }
button, input { color: inherit; font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #8bb96c; outline-offset: 3px; }
.app-shell { display: flex; flex-direction: column; width: 100%; max-width: 1060px; height: 100vh; height: 100dvh; margin: 0 auto; overflow: hidden; background: var(--paper); }
/* The page scrolls inside the space above the menu, so content never slides under it. */
.page { flex: 1 1 auto; min-height: 0; padding: 0 22px 32px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; overflow-anchor: none; -webkit-overflow-scrolling: touch; }
.page.page-enter { animation: fade .18s ease-out; }
@keyframes fade { from { opacity: .6; } to { opacity: 1; } }
@keyframes rise { from { opacity: .7; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.glyph { display: inline-grid; place-items: center; line-height: 1; }
.app-header { display: flex; align-items: center; justify-content: space-between; min-height: 78px; padding: calc(var(--safe-top) + 12px) 0 12px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { display: grid; place-items: center; width: 39px; height: 39px; }
.brand-mark img { display: block; width: 39px; height: 39px; border-radius: 10px; }
.brand strong { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.3px; }
.brand span:not(.glyph) { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .2px; }
.header-actions { display: flex; align-items: center; gap: 9px; }
.market-date { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 700; }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #6ca563; box-shadow: 0 0 0 3px rgba(108,165,99,.11); }
.refresh-button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 13px; background: var(--white); font-size: 19px; font-weight: 700; }
.refresh-button:hover { border-color: #b6c5b1; color: var(--green); }

.eyebrow { margin: 0 0 7px; color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: 1.15px; text-transform: uppercase; }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.6px; }

.connection-banner { margin: -12px 0 18px; padding: 12px 14px; border: 1px solid #f0d8ac; border-radius: 13px; color: #7b5a24; background: #fff8e8; font-size: 14px; line-height: 1.5; }
.connection-banner span { font-weight: 800; }
.connection-banner button { padding: 0 0 0 7px; border: 0; color: #5e7238; background: transparent; font-weight: 800; text-decoration: underline; }
.section { margin: 27px 0; }
.section-title { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin: 0 0 13px; }
.section-title .eyebrow { margin-bottom: 5px; }
.section-title h2 { margin: 0; font-size: 20px; font-weight: 800; }
.last-update { color: var(--muted); font-size: 13px; font-weight: 600; }
.range-switch { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: #eef1eb; }
.range-tab { min-width: 56px; padding: 10px 12px; border: 0; border-radius: 9px; color: #5c685f; background: transparent; font-size: 13px; font-weight: 800; }
.range-tab.active { color: var(--green); background: var(--white); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.asset-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.asset-card { min-width: 0; padding: 13px 13px 12px; border: 1px solid var(--line); border-radius: 17px; text-align: left; background: var(--white); }
.asset-card:hover { border-color: #c5d3bf; }
.asset-card.selected { border-color: #98b68d; box-shadow: 0 0 0 2px rgba(111,159,89,.18); }
.asset-top { display: flex; align-items: center; justify-content: space-between; }
.asset-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 11px; font-size: 20px; font-weight: 800; }
.asset-symbol { color: #5c685f; font-size: 12px; font-weight: 800; letter-spacing: .5px; }
.asset-name { margin-top: 11px; color: #526057; font-size: 13px; font-weight: 700; }
.asset-value { min-height: 27px; margin: 4px 0 0; font-size: clamp(18px, 5vw, 23px); font-weight: 800; letter-spacing: -.7px; white-space: nowrap; }
.asset-value small { color: var(--muted); font-size: 14px; font-weight: 700; }
.asset-value.pending { display: flex; align-items: center; max-width: 100%; overflow: hidden; color: #5c685f; font-size: 13px; font-weight: 650; letter-spacing: 0; text-overflow: ellipsis; white-space: normal; }
.asset-bottom { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 18px; }
.asset-update { color: #5c685f; font-size: 12px; font-weight: 700; }
.asset-update.lagging { color: #8f6220; }
.asset-caption { min-height: 14px; margin-bottom: 4px; color: var(--muted); font-size: 13px; font-weight: 600; }
.asset-about, .asset-lag { margin: 10px 1px 0; color: #5d695f; font-size: 13px; line-height: 1.6; }
.asset-about strong { color: var(--ink); }
.asset-lag { padding: 9px 11px; border: 1px solid #f0dfbd; border-radius: 11px; color: #7a5a2c; background: #fff8e9; }
.green .asset-icon, .mini-icon.green { color: #3f7048; background: #eaf3e8; }
.blue .asset-icon, .mini-icon.blue { color: #5473a8; background: #eaf0fb; }
.gold .asset-icon, .mini-icon.gold { color: #a27b29; background: #fbf2d8; }
.purple .asset-icon, .mini-icon.purple { color: #7863a5; background: #f0ecf9; }
.orange .asset-icon, .mini-icon.orange { color: #b8753e; background: #fff0e4; }
.change { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.change.up { color: #448253; }.change.down { color: #c5635d; }.change.neutral { color: #5c685f; }
.frequency-pill { display: inline-flex; align-items: center; padding: 4px 7px; border-radius: 99px; color: #5c685f; background: #f0f2ed; font-size: 12px; font-weight: 800; white-space: nowrap; }
.skeleton { display: inline-block; width: 92px; height: 17px; border-radius: 5px; background: linear-gradient(100deg, #edf0e9 30%, #f7f8f4 50%, #edf0e9 70%); background-size: 220% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position-x: -220%; } }
.detail-section { margin-top: 33px; }
.chart-card { padding: 17px 17px 13px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); box-shadow: var(--shadow); }
.chart-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chart-symbol { font-size: 17px; font-weight: 800; }
.chart-subtitle { margin-top: 4px; color: var(--muted); font-size: 13px; }

.analysis-box, .analysis-empty { min-height: 74px; }

.chart-area { fill: url(#chart-fill); }.chart-path { fill: none; stroke: #639354; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.chart-empty { display: grid; place-items: center; height: 170px; padding: 18px; color: #5c685f; text-align: center; font-size: 14px; line-height: 1.6; }
.chart-empty-wide { align-content: center; gap: 7px; }
.chart-empty-wide strong { color: #59665d; font-size: 15px; }
.chart-empty-wide p { max-width: 440px; margin: 0; color: var(--muted); }
.empty-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 3px; border-radius: 14px; color: #5c685f; background: #eff2ec; font-size: 22px; }
.chart-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid #f0f1ed; color: var(--muted); font-size: 13px; }
.chart-footer a { border: 0; color: var(--green); background: transparent; font-size: 13px; font-weight: 800; text-decoration: none; }
.analysis-box, .analysis-empty { display: flex; align-items: flex-start; gap: 12px; margin-top: 11px; padding: 14px; border: 1px solid #e4ebdf; border-radius: 15px; background: #f0f5ec; }
.analysis-empty { border-color: var(--line); background: #fff; }
.analysis-mark { display: grid; flex: 0 0 auto; place-items: center; width: 28px; height: 28px; border-radius: 10px; color: var(--green); background: #deebd8; font-size: 17px; font-weight: 800; }
.analysis-empty .analysis-mark { color: #5c685f; background: #edf0ea; }
.analysis-box strong, .analysis-empty strong { display: block; margin: 1px 0 5px; font-size: 14px; }
.analysis-box p, .analysis-empty p { margin: 0; color: #657167; font-size: 13px; line-height: 1.55; }

.mini-icon { display: grid; flex: 0 0 auto; place-items: center; width: 31px; height: 31px; border-radius: 11px; font-size: 17px; font-weight: 800; }

.notice-card { display: flex; align-items: flex-start; gap: 10px; margin: 19px 0 0; padding: 13px; border: 1px solid #e7e8dc; border-radius: 15px; background: #f2f3e9; }
.notice-icon { display: grid; flex: 0 0 auto; place-items: center; width: 22px; height: 22px; border-radius: 8px; color: #718344; background: #e2e9cb; font-size: 15px; font-weight: 800; }
.notice-card p { margin: 1px 0 0; color: #707967; font-size: 13px; line-height: 1.55; }
.bottom-nav { position: relative; z-index: 30; display: flex; flex: 0 0 auto; justify-content: space-around; width: 100%; padding: 8px 8px calc(var(--safe-bottom) + 8px); border-top: 0; background: var(--dark); }
.nav-item { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 4px; min-height: 52px; padding: 3px 2px; justify-content: center; border: 0; color: #b9cbbf; background: transparent; font-size: 13px; font-weight: 700; }
.nav-pill { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 30px; border-radius: 15px; background: transparent; }
.nav-item.active .nav-pill { color: var(--dark); background: var(--lime); }
.nav-item .glyph { min-height: 21px; font-size: 20px; font-weight: 700; }.nav-item.active { color: #fff; }
.toast { position: fixed; z-index: 50; right: 18px; bottom: calc(var(--safe-bottom) + 82px); left: 18px; max-width: 560px; margin: 0 auto; padding: 13px 15px; border-radius: 14px; color: #fff; background: #243e2d; box-shadow: var(--shadow); font-size: 14px; text-align: center; animation: rise .2s ease-out; }
.page-title-block { padding: 14px 0 19px; }.page-title-block h1 { margin: 0 0 9px; font-size: 28px; font-weight: 800; }.page-title-block > p:last-child { max-width: 670px; margin-bottom: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }

.real-return-card { display: flex; gap: 13px; margin-top: 18px; padding: 18px; border-radius: 19px; color: #fff; background: var(--dark); }.real-icon { display: grid; flex: 0 0 auto; place-items: center; width: 40px; height: 40px; border-radius: 14px; color: var(--dark); background: var(--lime); font-size: 24px; }.real-return-card h2 { max-width: 570px; margin: 0 0 7px; font-size: 18px; }.real-return-card p:not(.eyebrow) { margin: 0 0 9px; color: rgba(255,255,255,.69); font-size: 13px; line-height: 1.55; }.real-return-card .eyebrow { color: var(--lime); }.real-return-card a { color: var(--lime); font-size: 13px; font-weight: 800; text-decoration: none; }
.news-list { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; }.news-item { display: flex; align-items: center; gap: 10px; padding: 13px; border-bottom: 1px solid #edf0ea; text-decoration: none; }.news-item:last-child { border-bottom: 0; }.news-item:hover { background: #fafbf8; }.news-body { flex: 1; min-width: 0; }.news-body small { display: block; margin-bottom: 4px; color: var(--muted); font-size: 12px; font-weight: 700; }.news-body strong { display: block; color: var(--ink); font-size: 13px; line-height: 1.45; }.news-arrow { color: #5c685f; font-size: 16px; }.news-empty { display: grid; gap: 5px; padding: 20px; color: var(--muted); font-size: 13px; text-align: center; }.news-empty strong { color: var(--ink); }
.headline-card { display: flex; align-items: center; gap: 11px; margin: 6px 0 11px; padding: 14px; border-radius: 17px; color: #fff; background: var(--dark); }.headline-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; color: var(--dark); background: var(--lime); font-size: 19px; }.headline-card > div:nth-child(2) { flex: 1; }.headline-card .eyebrow { margin-bottom: 3px; color: var(--lime); }.headline-card h2 { margin: 0 0 3px; font-size: 16px; }.headline-card p:not(.eyebrow) { margin: 0; color: rgba(255,255,255,.66); font-size: 13px; }
.official-logo { display: grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; border-radius: 12px; color: var(--green); background: #e8f0e5; font-size: 13px; font-weight: 900; }
.context-card { display: flex; gap: 10px; margin-top: 17px; padding: 14px; border: 1px solid #efe0c7; border-radius: 15px; background: #fff9ed; }.context-icon { display: grid; flex: 0 0 auto; place-items: center; width: 23px; height: 23px; border-radius: 8px; color: #986d33; background: #f7ead2; font-size: 15px; font-weight: 900; }.context-card strong { display: block; margin-bottom: 4px; font-size: 13px; }.context-card p { margin: 0; color: #7a7161; font-size: 13px; line-height: 1.5; }

.form-card { margin: 12px 0; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }.form-section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }.step-number { display: grid; flex: 0 0 auto; place-items: center; width: 29px; height: 29px; border-radius: 10px; color: var(--green); background: #e8f1e4; font-size: 14px; font-weight: 900; }.form-section-title h2 { margin: 0 0 4px; font-size: 16px; }.form-section-title p { margin: 0; color: var(--muted); font-size: 13px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.form-field { display: block; min-width: 0; }.form-field > span { display: block; margin-bottom: 6px; color: #566258; font-size: 13px; font-weight: 800; }.input-wrap { display: flex; align-items: center; height: 50px; padding: 0 10px; border: 1px solid #e5e9e1; border-radius: 11px; background: #fbfcfa; }.input-wrap:focus-within { border-color: #93b383; }.input-wrap input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; font-size: 15px; font-weight: 650; }.input-wrap input::placeholder { color: #8a938b; font-size: 13px; font-weight: 500; }.input-wrap small { flex: 0 0 auto; color: #5c685f; font-size: 13px; }
.loan-result-empty { padding: 17px 12px; border: 1px dashed #d7e0d2; border-radius: 13px; color: #5c685f; font-size: 13px; line-height: 1.5; text-align: center; }.loan-result-primary { display: grid; gap: 5px; padding: 15px; border-radius: 14px; color: #fff; background: var(--dark); }.loan-result-primary span { color: rgba(255,255,255,.66); font-size: 13px; font-weight: 700; }.loan-result-primary strong { color: var(--lime); font-size: 25px; font-weight: 850; letter-spacing: -.5px; }.loan-result-primary small { color: rgba(255,255,255,.57); font-size: 13px; }
.sim-note { margin: 12px 1px 0; color: var(--muted); font-size: 12px; line-height: 1.55; }

@media (min-width: 600px) {
  body { padding: 24px 16px; background: #edf0e9; }
  .app-shell { height: calc(100vh - 48px); height: calc(100dvh - 48px); border: 1px solid #e2e6de; border-radius: 25px; box-shadow: 0 18px 60px rgba(29,44,33,.1); }
  .page { padding-right: 34px; padding-left: 34px; }
  .bottom-nav { border-radius: 0 0 25px 25px; }
  .asset-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
  .asset-card { padding: 15px; }
  .asset-name { font-size: 14px; }.asset-value { font-size: 24px; }
  
  
  
  .form-grid { gap: 12px; }
}
@media (min-width: 850px) {
  .page { padding-right: 48px; padding-left: 48px; }
  .asset-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  
  .section { margin-top: 32px; margin-bottom: 32px; }
  .chart-card { padding: 20px 22px 14px; }
  
  .chart-empty { height: 209px; }
  
  .form-card { padding: 20px; }
  
}
@media (max-width: 420px) {
  .page { padding-right: 15px; padding-left: 15px; }
  
  
  
  .market-date { font-size: 12px; }
  .asset-card { padding: 11px; }.asset-symbol { font-size: 11px; }.asset-value { font-size: 20px; }.asset-value.pending { font-size: 13px; }
  .asset-bottom .asset-update:not(.lagging) { display: none; }
  .section-title h2 { font-size: 18px; }
  
  
  
  
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

.range-tab:disabled { cursor: not-allowed; opacity: .4; }

.input-wrap select { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 13px; font-weight: 700; }

.news-item { align-items: flex-start; }
.news-meta { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.news-meta small { margin: 0; }
.news-tag { padding: 3px 7px; border-radius: 99px; font-size: 12px; font-weight: 800; }
.news-tag.key { color: #8a4b20; background: #fdecdc; }
.news-tag.info { color: #3f6487; background: #e8f0fa; }
.news-tag.muted { color: #6b766d; background: #eff2ed; }
.news-plain { display: block; margin-top: 5px; color: #59665c; font-size: 13px; line-height: 1.55; }

.learn-copy { margin: 0 0 12px; color: #59665c; font-size: 14px; line-height: 1.6; }
.institution-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.institution-card { padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.institution-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.institution-head strong { font-size: 16px; }
.institution-card p { margin: 0; color: #59665c; font-size: 14px; line-height: 1.6; }
.institution-card .institution-effect { margin-top: 9px; padding: 9px 11px; border-radius: 11px; color: #3f5a43; background: #f0f5ec; }
.concept-list { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.concept { border-bottom: 1px solid #eef0eb; }
.concept:last-child { border-bottom: 0; }
.concept summary { display: flex; align-items: center; justify-content: space-between; padding: 14px 15px; cursor: pointer; font-size: 15px; font-weight: 800; list-style: none; }
.concept summary::-webkit-details-marker { display: none; }
.concept-toggle { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: var(--green); background: #eef4ea; font-size: 17px; }
.concept[open] .concept-toggle { transform: rotate(45deg); }
.concept-body { padding: 0 15px 14px; }
.concept-body p { margin: 0; color: #59665c; font-size: 14px; line-height: 1.6; }
.concept-body .concept-example { margin-top: 8px; padding: 9px 11px; border-radius: 11px; background: #f6f7f3; }
.origin-list { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.origin-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr) auto; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #eef0eb; font-size: 13px; }
.origin-row:last-child { border-bottom: 0; }
.origin-row span { color: #59665c; line-height: 1.45; }
.origin-row small { padding: 4px 7px; border-radius: 99px; color: #6b766d; background: #f0f2ed; font-size: 12px; font-weight: 700; white-space: nowrap; }
.safety-card { display: flex; gap: 12px; padding: 16px; border: 1px solid #efd7d1; border-radius: 18px; background: #fff5f2; }
.safety-icon { display: grid; flex: 0 0 auto; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: #fff; background: #c16f60; font-weight: 900; }
.safety-card h2 { margin: 0 0 8px; font-size: 17px; }
.safety-card ul { margin: 0 0 10px; padding-left: 17px; color: #6c5753; font-size: 14px; line-height: 1.6; }
.safety-card a { color: #9a4f43; font-size: 13px; font-weight: 800; text-decoration: none; }
.inline-link { padding: 0; border: 0; color: var(--green); background: transparent; font-size: inherit; font-weight: 800; }
.inline-link.light { margin-left: 8px; color: var(--lime); font-size: 13px; }
@media (min-width: 700px) { .institution-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .origin-row { grid-template-columns: 1fr auto; } .origin-row span { grid-column: 1 / -1; grid-row: 2; } }

/* Readability pass: keep larger text from colliding on narrow phones. */
.market-date { white-space: nowrap; }

.asset-bottom { flex-wrap: wrap; row-gap: 4px; }
.form-grid { align-items: end; }

@media (max-width: 420px) {
  .brand span:not(.glyph) { display: none; }
  .asset-symbol { display: none; }
  
  
}
.app-header { gap: 12px; }

@media (max-width: 420px) {
  .market-date { font-size: 12px; }
  
}

/* Returns page */
.returns-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px; }

.inflation-baseline { display: flex; gap: 12px; margin: 12px 0; padding: 15px; border-radius: 16px; color: #fff; background: var(--dark); }
.baseline-icon { display: grid; flex: 0 0 auto; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--dark); background: var(--lime); font-size: 14px; }
.inflation-baseline strong { display: block; margin-bottom: 5px; font-size: 15px; }
.inflation-baseline p { margin: 0 0 6px; color: rgba(255,255,255,.82); font-size: 13px; line-height: 1.55; }
.inflation-baseline b { color: var(--lime); }
.inflation-baseline small { color: rgba(255,255,255,.62); font-size: 12px; }
.return-legend { display: flex; align-items: center; gap: 8px; margin: 4px 2px 8px; color: var(--muted); font-size: 12px; }
.legend-marker { display: inline-block; width: 2px; height: 14px; background: var(--ink); }
.return-list { display: grid; gap: 9px; }
.return-row { padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.return-head { display: flex; align-items: center; gap: 10px; }
.return-name { flex: 1; min-width: 0; }
.return-name strong { display: block; font-size: 14px; }
.return-name small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.return-amount { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.return-amount strong { font-size: 17px; }
.return-bar { position: relative; height: 10px; margin: 11px 0 9px; border-radius: 99px; background: #eef1eb; }
.return-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 99px; }
.return-fill.beat { background: #6ea95f; }
.return-fill.lost { background: #d48a7e; }
.return-marker { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--ink); }
.return-verdict { display: inline-block; padding: 5px 9px; border-radius: 99px; font-size: 12px; font-weight: 800; }
.return-verdict.beat { color: #3f6f40; background: #eaf4e5; }
.return-verdict.lost { color: #9a4b40; background: #fdeeea; }
.return-note { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
/* News key figures */
.key-figures { margin: 6px 0 14px; padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.key-figure-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.key-figure { padding: 12px; border-radius: 13px; background: #f6f7f3; }
.key-figure small { display: block; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.4; }
.key-figure strong { display: block; margin: 5px 0 4px; color: var(--green); font-size: 26px; font-weight: 850; }
.key-figure span { display: block; color: #59665c; font-size: 12px; line-height: 1.45; }
.key-figure-note { margin: 10px 2px 0; color: #59665c; font-size: 13px; line-height: 1.55; }
/* Investing guide */
.invest-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 9px; }
.invest-steps li { position: relative; padding: 14px 14px 14px 52px; border: 1px solid var(--line); border-radius: 15px; background: #fff; counter-increment: step; }
.invest-steps li::before { position: absolute; top: 13px; left: 14px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: var(--green); background: #e8f1e4; font-size: 14px; font-weight: 900; content: counter(step); }
.invest-steps strong { display: block; margin-bottom: 4px; font-size: 14px; }
.invest-steps p, .horizon-row p, .instrument-card p { margin: 0; color: #59665c; font-size: 13px; line-height: 1.6; }
.horizon-list { overflow: hidden; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.horizon-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 13px 14px; border-bottom: 1px solid #eef0eb; }
.horizon-row:last-child { border-bottom: 0; }
.horizon-row strong { color: var(--green); font-size: 14px; }
.instrument-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }
.instrument-card { padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.instrument-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.instrument-head strong { flex: 1; font-size: 14px; }
.instrument-card .instrument-plus { margin-top: 7px; color: #3f5a43; }
.instrument-card .instrument-minus { margin-top: 5px; color: #7a4f47; }
.risk-pill { padding: 4px 8px; border-radius: 99px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.risk-1 { color: #3f6f40; background: #eaf4e5; }
.risk-2 { color: #8a6420; background: #fbf1dc; }
.risk-3 { color: #9a4b40; background: #fdeeea; }
.risk-4 { color: #fff; background: #b4574a; }
.advice-note { padding: 13px 14px; border: 1px solid #e7e8dc; border-radius: 14px; color: #59665c; background: #f2f3e9; font-size: 13px; line-height: 1.6; }
.advice-note strong { display: block; margin-bottom: 3px; color: var(--ink); }
.learn-copy a { color: var(--green); font-weight: 800; text-decoration: none; }
@media (min-width: 700px) { .instrument-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) {
  .returns-controls { grid-template-columns: 1fr; }
   
  .horizon-row { grid-template-columns: 1fr; gap: 4px; }
  .key-figure strong { font-size: 22px; }
}

/* Credit page */
.chip-row { margin-bottom: 12px; }
.chip-row .range-tab { flex: 1; }

.term-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
.term-chip { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 99px; color: #4c584f; background: #fff; font-size: 13px; font-weight: 800; }
.term-chip.active { border-color: #98b68d; color: var(--green); background: #eef5ea; }
.estimate-note { margin: 10px 2px 0; color: #59665c; font-size: 13px; line-height: 1.55; }
.avg-strip { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; padding-top: 11px; border-top: 1px solid #eef0eb; color: var(--muted); font-size: 12px; }
.avg-strip b { color: var(--ink); }
.ask-list { margin-bottom: 12px; border: 1px solid var(--line); border-radius: 13px; }
.ask-list ul { margin: 0; padding-left: 18px; color: #59665c; font-size: 13px; line-height: 1.7; }

.bank-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.bank-link { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: #fbfcfa; font-size: 13px; font-weight: 700; text-decoration: none; }
.bank-link:hover { border-color: #b6c5b1; }
.bank-link span { color: var(--green); }

.best-pill { margin-left: 6px; padding: 3px 8px; border-radius: 99px; color: #fff; background: #5f9551; font-size: 11px; font-weight: 800; vertical-align: middle; }
.offer-vs { display: block; margin-top: 10px; padding: 8px 10px; border-radius: 9px; font-size: 12px; font-weight: 750; }
.offer-vs.good { color: #3f6f40; background: #eef5e9; }
.offer-vs.bad { color: #9a4b40; background: #fff0ec; }
.offer-vs.neutral { color: #59665c; background: #f0f2ed; }
#budget-result:not(:empty) { margin-top: 4px; }
.card-rate-table { overflow: hidden; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.card-rate-row { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr 1fr; gap: 8px; align-items: center; padding: 11px 14px; border-bottom: 1px solid #eef0eb; font-size: 13px; }
.card-rate-row:last-child { border-bottom: 0; }
.card-rate-row.head { color: var(--muted); background: #f0f3ed; font-size: 12px; font-weight: 800; }
.card-rate-row strong { color: var(--ink); }
.sim-note a { color: var(--green); font-weight: 800; text-decoration: none; }
@media (max-width: 420px) {
  
  
  
  .card-rate-row { grid-template-columns: minmax(0, 1.3fr) .8fr .8fr; padding: 10px 11px; }
}

/* Bank rates */
.bank-rate-list { display: grid; gap: 9px; margin-bottom: 4px; }
.bank-rate-row { padding: 13px 14px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.bank-rate-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bank-rate-head strong { display: block; font-size: 15px; }
.bank-rate-head small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.bank-rate-head .promo { color: #9a5b1f; }
.bank-rate-value { text-align: right; }
.bank-rate-value strong { color: var(--green); font-size: 22px; }

.offer-vs.inline { display: inline-block; margin: 4px 0 0; padding: 3px 8px; }

.bank-rate-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.bank-rate-actions .term-chip:disabled { color: #3f6f40; background: #eef5ea; cursor: default; }

.per-month { color: rgba(255,255,255,.7); font-size: 15px; font-weight: 700; }
.bank-rate-row.best { border-color: #98b68d; box-shadow: 0 0 0 2px rgba(111,159,89,.14); }
.custom-loan { margin: 4px 0 14px; }

.avg-strip > span:first-child { flex-basis: 100%; }

.loan-cost-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
.loan-cost-grid > div { display: grid; gap: 4px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.loan-cost-grid span { color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.3; }
.loan-cost-grid strong { font-size: 15px; }
.loan-cost-grid.compact { margin-top: 10px; }
.loan-cost-grid.compact > div { padding: 8px 9px; background: #fafbf8; }
.bank-rank { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 7px; border-radius: 7px; color: var(--green); background: #eef4ea; font-size: 12px; font-weight: 900; vertical-align: 1px; }
.bank-rate-head strong { display: inline; }
.bank-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bank-badges .offer-vs.inline { margin: 0; }
.bank-diff { padding: 3px 8px; border-radius: 9px; color: #7a5a2c; background: #fff8e9; font-size: 12px; font-weight: 750; }

.term-chip:disabled { opacity: .4; cursor: not-allowed; }
.term-limit { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; }
@media (max-width: 520px) { .loan-cost-grid { grid-template-columns: 1fr 1fr; } }
.bank-diff.same { color: #3f6f40; background: #eef5e9; }

.section-lead { margin: -4px 0 12px; color: #59665c; font-size: 13px; line-height: 1.55; }
.change-label { margin-right: 4px; color: var(--muted); font-size: 12px; font-weight: 700; }
.asset-bottom > span:first-child { display: inline-flex; align-items: center; }

/* Monthly figures always show which month they belong to, even on narrow phones. */
.asset-card.indicator .asset-bottom .asset-update { display: inline; }

.bank-rate-head small.promo { color: #9a5b1f; font-weight: 700; }
p.avg-strip { display: block; margin: 12px 0 0; }

/* Every row shares the same columns so the sources table lines up. */
.origin-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) 130px; }
.origin-row small { justify-self: end; }
@media (max-width: 520px) {
  .origin-row { grid-template-columns: minmax(0, 1fr) 118px; }
  .origin-row span { grid-column: 1 / -1; grid-row: 2; }
}
.institution-link { display: inline-block; margin-top: 10px; color: var(--green); font-size: 13px; font-weight: 800; text-decoration: none; }
.institution-head .official-logo { width: auto; min-width: 38px; padding: 0 8px; font-size: 12px; white-space: nowrap; }

/* Icons: one size and stroke everywhere, centred in their boxes. */
.ico { display: block; width: 1em; height: 1em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.asset-icon, .mini-icon, .brand-mark, .refresh-button, .headline-icon, .analysis-mark, .notice-icon, .context-icon, .safety-icon, .real-icon, .baseline-icon, .empty-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.asset-icon .ico, .mini-icon .ico { font-size: 18px; }
.refresh-button .ico { font-size: 19px; }
.headline-icon .ico { font-size: 19px; }
.analysis-mark .ico { font-size: 17px; stroke-width: 2.1; }
.notice-icon .ico, .context-icon .ico { font-size: 15px; stroke-width: 2.1; }
.safety-icon .ico, .real-icon .ico, .baseline-icon .ico { font-size: 18px; stroke-width: 2.1; }
.empty-icon .ico { font-size: 22px; }

.nav-item .ico { font-size: 22px; }
.nav-item { gap: 4px; }

/* Chart: values on the left, dates below, readable at every width. */
.chart { margin-top: 14px; }
.chart-axis { position: absolute; left: 0; transform: translateY(calc(-100% - 2px)); color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; pointer-events: none; }
.chart-plot { position: relative; height: var(--chart-h, 190px); touch-action: pan-y; cursor: crosshair; }
.chart-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart-grid { stroke: #e7ebe3; stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-zero { stroke: #b9c3b5; stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.chart-path { fill: none; stroke: #5f9551; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-area { fill: rgba(111, 169, 95, .14); stroke: none; }

.chart-x { display: flex; justify-content: space-between; margin-top: 8px; color: var(--muted); font-size: 12px; font-weight: 700; }
.chart-hover { position: absolute; inset: 0; pointer-events: none; }
.chart-hover-line { position: absolute; top: 0; bottom: 0; width: 1px; background: #9fb096; }
.chart-tip { position: absolute; top: 4px; transform: translateX(-50%); display: grid; gap: 3px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow); font-size: 13px; white-space: nowrap; }
.chart-tip small { color: var(--muted); font-size: 12px; font-weight: 700; }
.chart-tip b, .chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-tip i, .chart-legend i, .compare-chips i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font-size: 13px; color: #3f4b42; }
.chart-note { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.compare-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 12px; }
.compare-chips > span { color: var(--muted); font-size: 12px; font-weight: 800; }
.compare-chips .term-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; }

/* Symmetry: card footers sit on the same line; values line up even when labels wrap. */
.asset-card { display: flex; flex-direction: column; }
.asset-card .asset-bottom { margin-top: auto; padding-top: 6px; }
.loan-cost-grid > div, .key-figure { display: flex; flex-direction: column; justify-content: space-between; }
.loan-cost-grid strong { margin-top: auto; }

/* Values written on the line: start, end, highest, lowest. */
.chart-mark { position: absolute; display: flex; align-items: center; gap: 4px; pointer-events: none; transform: translate(-50%, -50%); }
.chart-mark i { width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.1); }
.chart-mark em { position: absolute; padding: 2px 6px; border-radius: 7px; background: rgba(255,255,255,.92); color: var(--ink); font-size: 12px; font-style: normal; font-weight: 800; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.chart-mark.above em { bottom: 12px; }
.chart-mark.below em { top: 12px; }
.chart-mark.high em, .chart-mark.low em { left: 50%; transform: translateX(-50%); }
.chart-mark.start em { left: 0; }
.chart-mark.end em { right: 0; }
/* Comparison: one panel per asset, each with its own values. */
.compare-panels { display: grid; gap: 14px; margin-top: 14px; }
.compare-panel-item { padding-top: 10px; border-top: 1px solid #eef0eb; }
.compare-panel-item:first-child { padding-top: 0; border-top: 0; }
.compare-panel-item header { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 800; }
.compare-panel-item header span { display: inline-flex; align-items: center; gap: 8px; }
.compare-panel-item header i { width: 10px; height: 10px; border-radius: 50%; }
.compare-panel-item .chart { margin-top: 6px; }
.compare-chips b { margin-left: 2px; font-size: 15px; }
.compare-add select { min-height: 36px; padding: 0 12px; border: 1px dashed #b6c5b1; border-radius: 99px; color: var(--green); background: #fff; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Other currencies: a compact list under the market cards. */
.other-fx { margin-top: 10px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.fx-list { display: grid; }
.fx-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 92px; align-items: center; gap: 10px; min-height: 48px; padding: 8px 15px; border: 0; border-top: 1px solid #eef0eb; text-align: left; background: transparent; font-size: 14px; }
.fx-row b { text-align: right; }
.fx-row .change { justify-self: end; }
.fx-row.selected { color: var(--green); }
.fx-row.selected span { font-weight: 800; }
.other-fx .concept-body { padding: 0; }

.chart-legend span .change { margin-left: 2px; }
.tip-pct { color: var(--muted); font-weight: 700; }
.chart-mark.end em { font-weight: 850; }

/* Monthly indicators: three columns on wide screens keeps the six cards symmetric. */
@media (min-width: 850px) { .asset-grid.indicator-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fx-note { margin: 0; padding: 0 15px 10px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.layout-switch { margin-top: 12px; width: max-content; }
/* History lookup */
.history-card .step-number .ico { font-size: 16px; }
.history-controls { display: grid; gap: 10px; margin-bottom: 14px; }
.history-controls .term-chips { margin: 0; }
.history-table { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.history-row { display: grid; grid-template-columns: minmax(0, 1.3fr) 1fr 1fr 0.9fr; align-items: center; gap: 10px; padding: 11px 14px; border-top: 1px solid #eef0eb; font-size: 14px; }
.history-row.head { border-top: 0; color: var(--muted); background: #f0f3ed; font-size: 12px; font-weight: 800; }
.history-row > span:not(.history-name) { text-align: right; }
.history-row .history-change { display: flex; justify-content: flex-end; }
.history-name { font-weight: 700; }
.history-name small { color: var(--muted); font-weight: 600; }
.history-then { color: #59665c; }
.history-now { font-weight: 800; }
.history-note { display: flex; gap: 12px; margin-top: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: #fbfcfa; }
.history-note .baseline-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; color: var(--dark); background: var(--lime); }
.history-note strong { display: block; margin-bottom: 4px; font-size: 14px; }
.history-note p { margin: 0; color: #59665c; font-size: 13px; line-height: 1.55; }
.returns-title { margin-top: 26px; }
@media (max-width: 520px) {
  .history-row { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 4px; }
  .history-row .history-name { grid-column: 1 / -1; }
  .history-row.head .history-name, .history-row.head > span:first-child { display: none; }
  .history-row > span:not(.history-name) { text-align: left; }
  .history-row .history-change { justify-content: flex-end; }
}

.custom-loan { margin: 4px 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px; background: #fbfcfa; }
.custom-loan-title { margin: 0 0 8px; font-size: 14px; font-weight: 800; }
.other-banks { margin: 14px 0 10px; }
.returns-controls { grid-template-columns: 1fr; }
.returns-controls .term-chips { margin: 0; }

.refresh-button.spinning .ico { animation: spin .9s linear infinite; }
.refresh-button:disabled { cursor: default; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Every page starts with the same title block, so switching pages keeps everything in place. */
.page-title-block + .first-section { margin-top: 4px; }

.bottom-nav .nav-item:focus-visible { outline-color: var(--lime); outline-offset: -2px; border-radius: 12px; }
/* Döviz alım-satım saatleri */
.fx-status { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 0 0 12px; padding: 11px 14px; border-radius: 14px; font-size: 14px; font-weight: 750; line-height: 1.45; }
.fx-status .ico { flex: 0 0 auto; width: 20px; height: 20px; }
.fx-status.is-open { color: var(--dark); background: #e6f6cf; }
.fx-status.is-closed { color: #7a4a12; background: #fbeedb; }
.fx-hours-list { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.fx-hours-list li { display: flex; align-items: flex-start; gap: 11px; padding: 12px 13px; border: 1px solid #e3e8dc; border-radius: 14px; background: #fff; }
.fx-hours-list strong { display: block; margin-bottom: 2px; color: var(--dark); font-size: 14px; }
.fx-hours-list p { margin: 0; color: #59665c; font-size: 13px; line-height: 1.5; }
.fx-hours-icon { display: grid; flex: 0 0 auto; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--dark); background: #eef1e6; }
.fx-hours-icon.good { background: var(--lime); }
.fx-hours-icon.warn { color: #7a4a12; background: #fbeedb; }
.fx-hours-icon .ico { width: 17px; height: 17px; }
.fx-hours-sub { margin: 0 0 6px; color: var(--dark); font-size: 13px; font-weight: 800; }
.fx-holiday-list { margin: 0 0 12px; padding-left: 18px; color: #59665c; font-size: 13px; line-height: 1.6; }
.fx-hours .fx-note { padding: 0; }
.fx-hours .fx-note a { color: var(--green); font-weight: 800; text-decoration: none; }