.tool-detail-page {
  --tool-paper: var(--stack-paper); --tool-sheet: var(--stack-sheet); --tool-ink: var(--stack-ink);
  --tool-muted: var(--stack-muted); --tool-line: var(--stack-line); --tool-accent: var(--stack-accent);
  color-scheme: light;
}
.tool-detail-page .topbar { justify-content: flex-start; }
.tool-home-link { height: 38px; margin-left: auto; padding: 0 13px; display: inline-flex; align-items: center; gap: 7px; color: #6f6c65; border: 1px solid var(--tool-line); border-radius: 4px; background: rgba(255,255,255,.28); font-size: 11.5px; text-decoration: none; transition: .2s; }
.tool-home-link .material-symbols-outlined { font-size: 17px; }
.tool-home-link:hover { color: var(--tool-accent); border-color: #bcb8af; background: #fff; }
.tool-detail-page .tool-list { padding-top: 30px; }
.tool-window { min-height: calc(100svh - 122px); }
.tool-stage { padding-top: 52px; }
.tool-folder-tree { display: grid; }
.tool-folder-tree a, .tool-folder-tree > span { min-height: 60px; padding: 0 25px 0 40px; position: relative; display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 8px; color: var(--tool-ink); font-size: 13px; text-decoration: none; }
.tool-folder-tree i { color: inherit; font: normal 500 12px var(--mono); }
.tool-folder-tree b { font-size: 13px; }
.tool-folder-tree a::after { content:""; width:14px; height:1px; position:absolute; left:52px; bottom:0; background:var(--tool-line); }
.tool-folder-tree a:hover { color: var(--tool-accent); background: rgba(212,55,45,.025); }
.tool-folder-tree .is-current { color: var(--tool-accent); }
.tool-folder-tree .is-current::before { content:""; width:4px; height:42px; position:absolute; left:0; background:var(--tool-accent); }
.tool-heading { padding-bottom: 34px; border-bottom: 1px solid var(--tool-line); }
.tool-title-row { display:grid; grid-template-columns:minmax(360px,.95fr) minmax(300px,.8fr); align-items:end; gap:52px; }
.tool-title-row > div { display:flex; align-items:baseline; gap:16px; }
.tool-index-number { color:var(--tool-accent); font:500 14px var(--mono); }
.tool-title-row h1 { margin:0; font-size:clamp(38px,4vw,54px); line-height:.98; letter-spacing:-.075em; }
.tool-title-row > p { margin:0; justify-self:end; color:var(--tool-muted); font-size:12.5px; line-height:1.85; }

.exchange-layout { padding: 42px 0 36px; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(330px,.72fr); gap:clamp(42px,6vw,86px); border-bottom:1px solid var(--tool-line); }
.section-label { display:flex; align-items:baseline; gap:14px; padding-bottom:18px; border-bottom:1px solid var(--tool-line); }
.section-label > span { color:var(--tool-accent); font:500 10px var(--mono); }
.section-label h2 { margin:0; font-size:18px; letter-spacing:-.04em; }
.section-label i { margin-left:auto; color:#969188; font:normal 8px var(--mono); letter-spacing:.12em; }
.currency-field { margin-top:34px; }
.currency-field > label, .select-field > span, .popular-block > p { margin-bottom:10px; display:block; color:#817d75; font-size:10.5px; }
.amount-control { min-height:88px; display:flex; align-items:center; border-bottom:2px solid var(--tool-ink); }
.amount-control input { min-width:0; width:100%; padding:4px 0 12px; color:var(--tool-ink); border:0; outline:0; background:transparent; font:500 clamp(38px,5.2vw,66px)/1 var(--mono); letter-spacing:-.065em; }
.amount-control span { padding-left:16px; color:#99948a; font:400 26px var(--sans); }
.amount-control:focus-within { border-color:var(--tool-accent); }
.field-error { min-height:18px; margin:7px 0 0; color:var(--tool-accent); font-size:10px; }
.currency-route { margin-top:24px; display:grid; grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr); gap:12px; align-items:end; }
.select-field select { width:100%; height:52px; padding:0 40px 0 14px; color:var(--tool-ink); border:1px solid #c8c4bb; border-radius:4px; background:rgba(255,255,255,.35); font:600 12px var(--sans); }
.select-field select:focus { outline:2px solid rgba(212,55,45,.18); border-color:var(--tool-accent); }
.swap-button { width:52px; height:52px; display:grid; place-items:center; align-content:center; gap:1px; color:var(--tool-ink); border:1px solid var(--tool-line); border-radius:50%; background:var(--tool-sheet); transition:.25s; }
.swap-button .material-symbols-outlined { font-size:19px; }
.swap-button small { color:#969188; font:7px var(--mono); }
.swap-button:hover { color:#fff; border-color:var(--tool-accent); background:var(--tool-accent); transform:rotate(180deg); }
.swap-button:hover small { color:#fff; }
.popular-block { margin-top:28px; }
.popular-currencies { display:flex; flex-wrap:wrap; gap:7px; }
.popular-currencies button { min-width:48px; height:30px; padding:0 10px; color:#716d65; border:1px solid var(--tool-line); border-radius:30px; background:transparent; font:500 9px var(--mono); transition:.2s; }
.popular-currencies button:hover, .popular-currencies button.is-active { color:#fff; border-color:var(--tool-accent); background:var(--tool-accent); }

.exchange-result { min-height:430px; padding:26px 28px 24px; position:relative; overflow:hidden; border:1px solid #c8c4bb; border-radius:7px; background:rgba(255,255,255,.38); box-shadow:6px 7px 0 rgba(52,47,40,.045); }
.exchange-result::before { content:""; width:5px; position:absolute; inset:0 auto 0 0; background:var(--tool-accent); }
.result-topline { display:flex; align-items:center; justify-content:space-between; color:#817d75; font:9px var(--mono); letter-spacing:.07em; }
.result-topline > span { display:flex; align-items:center; gap:7px; }
.result-topline i { width:6px; height:6px; border-radius:50%; background:#d0a428; }
.result-topline .is-ready i { background:var(--stack-ready); }
.result-topline .is-error i { background:var(--tool-accent); }
.result-topline button { width:30px; height:30px; display:grid; place-items:center; color:#807b72; border:1px solid var(--tool-line); border-radius:50%; background:transparent; }
.result-topline button:hover { color:var(--tool-accent); border-color:var(--tool-accent); }
.result-topline .material-symbols-outlined { font-size:16px; }
.result-topline button.is-loading .material-symbols-outlined { animation:rateSpin .8s linear infinite; }
.source-amount { margin:48px 0 8px; color:#8c877e; font:11px var(--mono); }
.result-value { min-height:76px; display:flex; align-items:baseline; gap:12px; overflow-wrap:anywhere; }
.result-value strong { font:500 clamp(35px,4.6vw,62px)/1 var(--mono); letter-spacing:-.065em; }
.result-value span { color:var(--tool-accent); font:600 14px var(--mono); }
.rate-line { min-height:21px; margin:16px 0 32px; color:#6f6b64; font-size:11px; }
.rate-ledger { margin:0; border-top:1px solid var(--tool-line); }
.rate-ledger div { min-height:46px; display:grid; grid-template-columns:72px 1fr; align-items:center; gap:12px; border-bottom:1px solid var(--tool-line); font-size:10px; }
.rate-ledger dt { color:#98938a; }
.rate-ledger dd { margin:0; color:#615e58; font-family:var(--mono); text-align:right; }
.result-message { min-height:18px; margin:17px 0 0; color:var(--tool-accent); font-size:10px; line-height:1.6; }
.rate-notice { padding:28px 0 2px; display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:18px; align-items:start; }
.rate-notice > .material-symbols-outlined { width:36px; height:36px; display:grid; place-items:center; color:var(--tool-accent); border:1px solid var(--tool-line); border-radius:50%; font-size:18px; }
.rate-notice h2 { margin:0 0 7px; font-size:13px; }
.rate-notice p { max-width:730px; margin:0; color:#827e76; font-size:10.5px; line-height:1.75; }
.rate-notice a { margin-top:3px; color:#716d65; border-bottom:1px solid #aaa69d; font-size:10px; text-decoration:none; }
.rate-notice a:hover { color:var(--tool-accent); border-color:var(--tool-accent); }
@keyframes rateSpin { to { transform:rotate(360deg); } }

@media (max-width:1080px) {
  .tool-title-row, .exchange-layout { grid-template-columns:1fr; gap:20px; }
  .tool-title-row > p { justify-self:start; }
  .exchange-layout { gap:36px; }
  .exchange-result { min-height:390px; }
}
@media (max-width:760px) {
  .tool-home-link { width:38px; padding:0; justify-content:center; font-size:0; }
  .tool-home-link .material-symbols-outlined { font-size:18px; }
  .tool-detail-page .tool-list { padding-top:14px; }
  .tool-index { padding-bottom:12px; }
  .tool-folder-tree { padding:0 14px; display:flex; overflow-x:auto; }
  .tool-folder-tree a, .tool-folder-tree > span { min-width:max-content; min-height:44px; padding:0 12px; display:flex; gap:7px; }
  .tool-folder-tree a::after { display:none; }
  .tool-folder-tree .is-current::before { width:auto; height:2px; inset:auto 12px 0; }
  .tool-folder-tree i { font-size:9px; }
  .tool-stage { padding:34px 20px 48px; }
  .tool-title-row h1 { font-size:38px; }
  .exchange-layout { padding-top:32px; }
  .amount-control input { font-size:42px; }
  .currency-route { grid-template-columns:1fr 44px 1fr; gap:8px; }
  .swap-button { width:42px; height:42px; margin-bottom:5px; }
  .swap-button small { display:none; }
  .exchange-result { min-height:0; padding:22px 20px 20px; }
  .source-amount { margin-top:34px; }
  .rate-notice { grid-template-columns:36px 1fr; }
  .rate-notice a { grid-column:2; justify-self:start; }
}
@media (max-width:430px) {
  .currency-route { grid-template-columns:1fr; }
  .swap-button { margin:0 auto; transform:rotate(90deg); }
  .swap-button:hover { transform:rotate(270deg); }
}
@media (prefers-reduced-motion:reduce) { .swap-button, .result-topline button { transition:none; } .swap-button:hover { transform:none; } }