/* Mini App «💱 Курсы» — светлая/тёмная тема из Telegram (body.dark). */
:root { --bg:#fff; --fg:#111; --muted:#7a828c; --card:#f2f3f5; --line:#e3e6ea; --accent:#2e86de; --green:#27ae60; --red:#e74c3c; --yellow:#f39c12; }
body.dark { --bg:#17212b; --fg:#f2f6fa; --muted:#8fa1b3; --card:#232e3c; --line:#2d3a4a; --accent:#5aa7f0; --green:#3ddc84; --red:#ff6b60; --yellow:#f5b041; }
* { box-sizing:border-box; margin:0; }
html, body { height:100%; }
body { background:var(--bg); color:var(--fg); font:15px/1.45 -apple-system,system-ui,sans-serif; display:flex; flex-direction:column; }
#panes { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:10px 12px 8px; }
.pane { display:none; }
.pane.on { display:block; }
#tabbar { display:flex; border-top:1px solid var(--line); background:var(--bg); padding:4px 2px calc(4px + env(safe-area-inset-bottom)); }
#tabbar button { flex:1; background:none; border:0; color:var(--muted); font-size:19px; padding:5px 0 3px; display:flex; flex-direction:column; align-items:center; gap:1px; }
#tabbar button span { font-size:10px; }
#tabbar button.on { color:var(--accent); }

.card { background:var(--card); border-radius:12px; padding:11px 13px; margin-bottom:10px; }
.card h2 { font-size:13px; color:var(--muted); font-weight:600; margin-bottom:7px; }
.muted { color:var(--muted); }
.small { font-size:12px; }
.big { font-size:26px; font-weight:700; }
.hero-sub { font-size:12px; color:var(--muted); margin-top:2px; }
.up { color:var(--green); }
.down { color:var(--red); }

.row { display:flex; align-items:baseline; gap:8px; padding:5px 0; border-bottom:1px solid var(--line); }
.row:last-child { border-bottom:0; }
.row .medal { width:24px; flex:none; text-align:center; }
.row .lbl { flex:1; min-width:0; }
.row .lbl .note { display:block; font-size:11px; color:var(--muted); }
.row .val { font-weight:700; white-space:nowrap; }

.seg { display:flex; gap:5px; flex-wrap:wrap; }
.seg button { flex:1; padding:6px 8px; border:0; border-radius:8px; background:var(--card); color:var(--fg); font-size:12.5px; white-space:nowrap; }
.seg button.on { background:var(--accent); color:#fff; }
.chart-head { display:flex; flex-direction:column; gap:6px; margin-bottom:6px; }
.chart-advanced { background:var(--card); border-radius:8px; padding:6px 8px; }
.chart-advanced summary { cursor:pointer; font-size:12.5px; color:var(--muted); list-style:none; }
.chart-advanced summary::-webkit-details-marker { display:none; }
.chart-advanced[open] summary { margin-bottom:6px; }
#chart { width:100%; height:56vh; }
#chart-meta { margin:2px 0 4px; min-height:15px; }

.calc .crow { display:flex; align-items:center; gap:8px; margin:6px 0; }
.calc input { flex:1; padding:9px 11px; border:0; border-radius:9px; font-size:16px; background:var(--bg); color:var(--fg); min-width:0; }
.calc .unit { width:24px; text-align:center; }

button.act { width:100%; padding:11px; border:0; border-radius:10px; background:var(--accent); color:#fff; font-size:15px; font-weight:600; margin-top:6px; }
button.act.ghost { background:var(--card); color:var(--fg); }
button.act:disabled { opacity:0.5; }
.btnrow { display:flex; gap:8px; }
.btnrow button { flex:1; }

.verdict { border-radius:12px; padding:12px 14px; margin-bottom:10px; color:#fff; font-weight:600; }
.verdict.green { background:var(--green); }
.verdict.red { background:var(--red); }
.verdict.yellow { background:var(--yellow); }
.verdict .v-sub { font-weight:400; font-size:12.5px; opacity:0.92; margin-top:3px; }

details.detail { margin-bottom:10px; }
details.detail summary { list-style:none; cursor:pointer; }
details.detail summary::-webkit-details-marker { display:none; }
.rate-tools { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:8px; margin-bottom:10px; }
.rate-tools > .tool-h { grid-row:1; min-width:0; display:grid; color:var(--muted); font-size:13px; font-weight:600; }
.tool-toggle { appearance:none; -webkit-appearance:none; width:100%; min-width:0; min-height:44px; padding:11px 13px; border:0; border-radius:12px; background:var(--card); color:inherit; font:inherit; line-height:1.45; text-align:left; white-space:normal; overflow-wrap:anywhere; cursor:pointer; }
.rate-tools > .tool-body { grid-column:1 / -1; min-width:0; margin-bottom:0; }
.rate-tools > .tool-body[hidden] { display:none !important; }
.deal-tool #deal-box > .card { margin:0; padding:0; background:transparent; }
.collapse-detail { margin-top:10px; border-top:1px solid var(--line); }

.warn { color:var(--red); font-size:12.5px; }
.badge { display:inline-block; font-size:10.5px; padding:1px 7px; border-radius:8px; background:var(--card); color:var(--muted); vertical-align:middle; }
.center { text-align:center; }
.loader { text-align:center; color:var(--muted); padding:28px 0; }
.row.dim { opacity:0.45; }
.row .tap { cursor:pointer; }
.sheet-bg { position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:40; display:flex; align-items:flex-end; }
.sheet { background:var(--bg); border-radius:16px 16px 0 0; padding:16px 16px calc(16px + env(safe-area-inset-bottom)); width:100%; max-height:78vh; overflow-y:auto; }
.sheet h3 { font-size:16px; margin-bottom:6px; }
.sheet .kv { margin:4px 0; font-size:13.5px; }
.sheet .kv b { color:var(--muted); font-weight:500; margin-right:4px; }
.jrow { display:flex; gap:8px; align-items:baseline; padding:5px 0; border-bottom:1px solid var(--line); font-size:12.5px; }
.jrow:last-child { border-bottom:0; }
.jrow .del { color:var(--red); background:none; border:0; font-size:14px; padding:0 4px; }
.fieldrow { display:flex; gap:8px; margin:6px 0; }
.fieldrow input, .fieldrow select { flex:1; padding:8px 10px; border:0; border-radius:8px; font-size:14px; background:var(--bg); color:var(--fg); min-width:0; }
.gear { display:block; text-align:center; color:var(--muted); font-size:12.5px; padding:8px; background:none; border:0; width:100%; }
.offbar { background:var(--yellow); color:#fff; font-size:12.5px; text-align:center; padding:5px 8px; }
input[type=range] { accent-color:var(--accent); margin:2px 0; }
.fieldrow label { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--muted); }
.fieldrow label input { padding:8px 10px; border:0; border-radius:8px; font-size:14px; background:var(--bg); color:var(--fg); min-width:0; }
table.st { width:100%; border-collapse:collapse; font-size:13px; }
table.st td, table.st th { padding:4px 4px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap; }
table.st th { color:var(--muted); font-weight:500; font-size:11px; }
table.st td:first-child, table.st th:first-child { text-align:left; }

/* 📺 полноэкранный график (чарт-аудит 2026-08-10): таббар прячется, график
   растягивается, верхняя safe-area не перекрывается системным UI */
body.chart-fs #tabbar { display: none; }
body.chart-fs #panes { padding-top: env(safe-area-inset-top, 0px); }
body.chart-fs #chart { height: calc(100vh - 235px); }