/* Colors and control hierarchy follow CoinCalcTheme.swift. */
.native-calculator { --native-cream:#fff0d7; --native-ginger:#f06422; width:100%; max-width:440px; color:var(--native-cream); background:#090706; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Rounded","Segoe UI",sans-serif; padding:14px; border-radius:28px; border:1px solid #30251f; margin:0 auto; }
.native-calculator button { font-family:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.native-calculator button:disabled { cursor:default; opacity:.45; }
.native-toolbar { display:flex; align-items:center; justify-content:space-between; padding:0 3px 14px; }
.native-toolbar strong { font-size:20px; letter-spacing:-.03em; }
.native-toolbar a,.native-refresh,.native-copy { color:var(--native-cream); background:#24201d; border:1px solid #443a33; border-radius:50%; width:36px; height:36px; display:grid; place-items:center; text-decoration:none; font-size:24px; position:relative; }
.native-refresh [data-live-dot] { position:absolute; right:1px; top:0; width:7px; height:7px; border-radius:50%; background:#8d7e70; }
.native-refresh [data-live-dot].live { background:#30d158; }
.native-display { background:#171210; border-radius:23px; padding:16px 17px 10px; margin-bottom:12px; text-align:right; }
.native-expression { height:27px; font-size:16px; line-height:27px; color:#c2b3a3; white-space:nowrap; overflow-x:auto; scrollbar-width:none; }
.native-result-row { display:flex; align-items:center; gap:10px; min-height:76px; }
.native-result-row output { display:block; flex:1; min-width:0; font-size:clamp(31px,4.5vw,55px); line-height:1.1; font-weight:300; font-variant-numeric:tabular-nums; white-space:nowrap; overflow-x:auto; scrollbar-width:none; }
.native-copy { flex-shrink:0; width:36px; height:36px; color:#aa9e93; font-size:23px; border:0; }
.native-converted { margin:0!important; color:#baa795; font-size:11px; min-height:15px; }
.native-quotes { display:flex; background:#171210; border:1px solid #332921; border-radius:17px; padding:11px 2px; margin-bottom:12px; }
.native-quotes button { background:none; border:0; border-right:1px solid #382d25; padding:0 3px; color:var(--native-cream); width:20%; min-width:0; }
.native-quotes button:last-child { border:0; }
.native-quotes button>span { display:flex; align-items:center; justify-content:center; gap:4px; }
.native-quotes b { font-size:11px; }
.native-quotes img { width:17px; height:17px; }
.native-quotes small { display:block; color:#b5a99e; font-size:10px; margin-top:5px; overflow:hidden; text-overflow:ellipsis; }
.native-quotes button.selected b { color:#f7ad7d; }
.native-conversion { background:#171210; border:1px solid #332921; border-radius:19px; padding:10px; margin-bottom:13px; }
.native-pair-heading { display:flex; justify-content:space-between; font-size:11px; color:#b5a596; margin:0 2px 9px; }
.native-pair-heading span:last-child { color:#9c8e82; }
.native-pair { display:grid; grid-template-columns:1fr 38px 1fr; gap:5px; align-items:center; background:#211a17; border:1px solid #3a2e27; border-radius:14px; padding:7px 10px; }
.native-pair-coin { text-align:left; background:none; border:0; padding:0; min-width:0; color:var(--native-cream); }
.pair-caption { display:block; font-size:11px; color:#a89a8e; margin-bottom:3px; }
.pair-value { display:flex; align-items:center; gap:7px; }
.pair-value strong { font-size:20px; letter-spacing:-.02em; }
.chevron { font-size:19px; margin-left:auto; }
.native-swap { background:#171210; color:var(--native-ginger); width:37px; height:37px; border:1px solid #6b3219; border-radius:50%; font-size:26px; padding:0; }
.native-actions { display:grid; grid-template-columns:1fr 95px; gap:8px; margin-top:9px; }
.native-convert,.native-coins { min-height:43px; border-radius:13px; font-size:14px; font-weight:600; white-space:nowrap; padding:6px; }
.native-convert { background:linear-gradient(#f36a25,#c73505); color:#fff0d7; border:1px solid #ff9a5b; }
.native-coins { color:#e0cbb5; border:1px solid #44332a; background:#211a17; }
.native-keypad { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; padding:0 3px; }
.native-key { height:54px; border-radius:50px; border:1px solid #514137; background:linear-gradient(#392f29,#221c19); color:#fff6eb; font-size:28px; font-weight:500; box-shadow:inset 0 1px 0 #ffffff08; }
.native-key.utility { background:linear-gradient(#573220,#341f16); }
.native-key.operator { background:linear-gradient(#f36a25,#c73505); border-color:#f78c4d; }
.native-key.zero { grid-column:span 2; }
.native-key:active { filter:brightness(1.25); transform:scale(.97); }
.native-market { color:#aa9989; font-size:10px; margin:12px 5px 2px!important; min-height:16px; line-height:1.5; }
.native-error { color:#ffb49b; font-size:12px; line-height:1.5; margin:4px 5px!important; }
.coin-fallback { background:#453026; color:#ffd2a5; display:inline-grid; place-items:center; width:25px; height:25px; border-radius:50%; font-size:10px; flex-shrink:0; }
.native-picker { width:min(440px,calc(100% - 20px)); max-height:min(650px,85dvh); padding:20px; border:1px solid #4b382c; border-radius:24px; color:#fff0d7; background:#201915; box-shadow:0 24px 90px #000a; }
.native-picker::backdrop { background:#0009; backdrop-filter:blur(5px); }
.native-picker header { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }
.native-picker h2 { margin:0; font-size:23px; line-height:1.3; }
.native-picker header button { width:35px; height:35px; border:0; border-radius:50%; background:#392d25; color:#fff0d7; font-size:16px; }
.native-picker label { display:block; font-size:12px; color:#c4ad98; margin-bottom:7px; }
.native-picker input { width:100%; font:inherit; background:#100d0b; color:#fff0d7; border:1px solid #675140; border-radius:12px; padding:11px; margin-bottom:14px; }
.native-coin-list { overflow-y:auto; max-height:420px; }
.native-coin-option { display:flex; width:100%; align-items:center; gap:12px; background:none; color:#fff0d7; border:0; border-bottom:1px solid #3a2d24; text-align:left; min-height:58px; padding:8px 3px; }
.native-coin-option[hidden] { display:none; }
.native-coin-option>span:nth-child(2) { flex:1; }
.native-coin-option strong,.native-coin-option small { display:block; }
.native-coin-option small { color:#bca58f; font-size:12px; }
.native-coin-option>span:last-child { font-size:11px; color:#bea994; }
.native-coin-option:hover { background:#30231b; }
.native-privacy-note { color:var(--cream-soft); font-size:13px; max-width:62ch; }
.hub-workspace { display:grid; grid-template-columns:1fr 440px; gap:70px; align-items:center; margin:15px 0 60px; }
.hub-workspace .hub-intro { margin:0; }
@media(max-width:900px) { .hub-workspace { gap:30px; grid-template-columns:1fr 400px; } }
@media(max-width:650px) { .native-calculator { padding:11px; border:0; border-radius:0; } .guide-page:has(.native-calculator) .guide-hero { display:flex; flex-direction:column; } .guide-hero .native-calculator { order:-1; } .native-result-row output { font-size:48px; } .hub-workspace { display:flex; flex-direction:column; gap:36px; } .hub-workspace .native-calculator { order:-1; } .guide-hero>.guide-intro { padding-top:10px; } .native-key { height:52px; } .native-toolbar { padding-bottom:10px; } .native-market { font-size:10px; } .native-picker { margin:auto auto 10px; } }
@media(prefers-reduced-motion:reduce) { .native-key:active { transform:none; } }

.native-result-row output.long { font-size:clamp(24px,6vw,36px); }
.native-result-row output.very-long { font-size:22px; }
@media(max-width:650px) {
 .guide-page:has(.native-calculator) .nav { min-height:56px; }
 .guide-page:has(.native-calculator) .guide-layout { padding-top:10px; }
 .guide-page:has(.native-calculator) .guide-breadcrumb { margin:0 0 10px; font-size:12px; }
 .native-calculator .native-display { padding:12px 14px 8px; }
 .native-result-row { min-height:60px; }
 .native-key { height:48px; }
}
