html,body{max-width:100%;overflow-x:hidden}
.chart{position:relative;touch-action:pan-y}.chart svg{touch-action:pan-y}.chart-hit{fill:transparent;cursor:crosshair;pointer-events:all}.chart-guide{stroke:var(--mint);stroke-width:1;stroke-dasharray:4 4;opacity:.7}.chart-active{fill:var(--mint);stroke:var(--surface);stroke-width:3;pointer-events:none}.chart-tooltip{position:absolute;z-index:3;transform:translate(-50%,-100%);min-width:150px;padding:9px 11px;border:1px solid var(--mint);border-radius:10px;background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:0 10px 28px rgba(0,0,0,.25);pointer-events:none;text-align:center}.chart-tooltip strong,.chart-tooltip span{display:block}.chart-tooltip strong{color:var(--text);font-size:13px}.chart-tooltip span{color:var(--muted);font-size:11px;margin-top:3px}
.rate-card{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease}
.rate-card:hover{transform:translateY(-3px);border-color:var(--mint);background:color-mix(in srgb,var(--surface2) 88%,var(--mint));box-shadow:0 12px 30px color-mix(in srgb,var(--mint) 16%,transparent)}
.notice[hidden]{display:none}.notice.warning{border-color:color-mix(in srgb,var(--gold) 55%,var(--border));background:color-mix(in srgb,var(--gold) 12%,var(--surface));line-height:1.55}.notice.warning strong{color:var(--gold)}
@media (hover:none){.rate-card:hover{transform:none}}

@media (max-width: 768px){
  .header-inner{padding:10px 16px}
  .brand-mark{width:36px;height:36px;border-radius:10px}
  .header-actions{gap:8px}
  .theme-toggle{min-width:42px;min-height:42px;padding:8px}
  .shell{padding:28px 14px 24px}
  .intro{display:grid;gap:20px;margin-bottom:20px}
  .intro h1{font-size:clamp(30px,10vw,42px);line-height:1.06;margin-top:12px}
  .intro p{font-size:15px;line-height:1.5}
  .date-control{width:100%;min-width:0}
  input,select{min-height:48px;font-size:16px}
  .notice{font-size:12px;line-height:1.45;margin-bottom:14px}
  .section-block,.converter-card,.chart-card,.bank-card{padding:18px 16px;border-radius:16px}
  .section-heading{align-items:flex-start;flex-wrap:wrap;gap:12px;margin-bottom:16px}
  .section-heading h2,.bank-card h2{font-size:21px}
  .ghost-button{min-height:42px;width:100%}
  .currency-picker{padding:12px;margin-top:0}
  .currency-options{display:grid;grid-template-columns:1fr;max-height:260px}
  .currency-options label{min-height:44px}
  .rate-grid{grid-template-columns:1fr;gap:10px}
  .rate-card{padding:16px}
  .rate-remove{width:36px;height:36px;right:7px;top:5px}
  .converter-grid{grid-template-columns:1fr;gap:14px}
  .swap-button{display:block;width:48px;height:48px;margin:0 auto;transform:rotate(90deg)}
  .result-row{margin-top:20px;padding-top:18px;gap:12px}
  .result-row strong{font-size:clamp(30px,11vw,42px);overflow-wrap:anywhere}
  .formula{text-align:left;line-height:1.5;overflow-wrap:anywhere}
  .insights-grid{grid-template-columns:1fr;gap:14px}
  .chart-card .section-heading{display:block}
  .chart-controls{display:grid;grid-template-columns:1fr 1fr;margin-top:14px}
  .chart-controls select{width:100%;min-width:0;margin:0;min-height:44px}
  .chart-summary{line-height:1.5;margin-top:12px}
  .chart{height:210px;margin:8px -6px 0;overflow:hidden}
  .bank-help,.bank-comparison,.cbr-benchmark{line-height:1.55}
  .bank-result strong{font-size:clamp(24px,9vw,34px);overflow-wrap:anywhere}
  footer{gap:8px;line-height:1.5;padding-top:20px}
}

@media (max-width: 390px){
  .shell{padding-left:10px;padding-right:10px}
  .brand{gap:8px}.brand strong{font-size:14px}.brand small{font-size:10px}
  .section-block,.converter-card,.chart-card,.bank-card{padding:16px 13px}
  .intro h1{font-size:31px}
  .chart-controls{grid-template-columns:1fr}
  .chart{height:190px}
}