:root {
  --bg: #f7f4ee;
  --surface: rgba(255,255,255,.82);
  --surface-solid: #fffdf9;
  --ink: #24282b;
  --muted: #73716b;
  --line: #ded8ce;
  --gold: #b68a3a;
  --shadow: 0 24px 70px rgba(43, 38, 28, .10);
  --radius: 28px;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100%; color: var(--ink); background:
    radial-gradient(circle at 10% 0%, rgba(182,138,58,.08), transparent 30%),
    var(--bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, select { font: inherit; }
button { color: inherit; }
.app-shell { width: min(980px, 100%); margin: auto; padding: 20px clamp(16px, 4vw, 44px) 34px; }
.brandbar { display:flex; align-items:center; justify-content:space-between; padding: 10px 0 34px; }
.wordmark { border:0; background:none; padding:0; text-align:left; cursor:pointer; }
.wordmark > span { display:block; font-size: clamp(29px, 5vw, 42px); font-weight: 400; letter-spacing:-.05em; }
.wordmark small { display:block; color:var(--gold); font-size:9px; letter-spacing:.32em; margin-top:5px; }
.gold { color:var(--gold); }
.header-actions { display:flex; gap:8px; }
.icon-button { width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:var(--surface); cursor:pointer; }
.hero { max-width:720px; padding: clamp(18px, 4vw, 40px) 0 30px; }
.eyebrow, .result-label { color:var(--gold); font-size:11px; letter-spacing:.24em; font-weight:700; }
.hero h1 { font-size:clamp(40px, 8vw, 78px); line-height:.98; letter-spacing:-.055em; font-weight:450; margin:12px 0 18px; }
.hero-copy { max-width:620px; color:var(--muted); font-size:clamp(16px, 2vw, 19px); line-height:1.65; }
.tabs { display:flex; gap:6px; overflow:auto; padding:6px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.45); margin-bottom:22px; }
.tab { flex:1; min-width:max-content; border:0; border-radius:13px; padding:12px 18px; background:transparent; cursor:pointer; color:var(--muted); }
.tab.active { background:var(--ink); color:#fff; }
.view { display:none; }
.view.active { display:block; animation:fade .25s ease; }
@keyframes fade { from {opacity:0; transform:translateY(5px)} }
.category-strip { display:flex; gap:8px; overflow:auto; padding:2px 0 15px; scrollbar-width:none; }
.category-button { white-space:nowrap; border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:9px 14px; cursor:pointer; color:var(--muted); }
.category-button.active { border-color:var(--gold); color:var(--ink); background:rgba(182,138,58,.10); }
.converter-card { background:var(--surface); backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.82); box-shadow:var(--shadow); border-radius:var(--radius); padding:clamp(20px, 4vw, 38px); }
.field label { display:block; color:var(--muted); font-size:12px; letter-spacing:.1em; text-transform:uppercase; margin:0 0 9px 3px; }
input, select { width:100%; border:1px solid var(--line); border-radius:17px; background:var(--surface-solid); color:var(--ink); padding:16px 17px; outline:none; }
input { font-size:clamp(24px, 5vw, 38px); font-weight:500; }
input:focus, select:focus { border-color:var(--gold); box-shadow:0 0 0 4px rgba(182,138,58,.10); }
.input-row { display:grid; grid-template-columns:1fr 58px; gap:10px; }
.mic-button { border:0; border-radius:17px; background:var(--ink); color:var(--gold); font-size:13px; cursor:pointer; }
.mic-button.listening { animation:pulse 1s infinite; }
@keyframes pulse { 50% { transform:scale(.92); box-shadow:0 0 0 8px rgba(182,138,58,.16); } }
.unit-grid { display:grid; grid-template-columns:1fr 48px 1fr; gap:12px; align-items:end; margin-top:24px; }
.swap-button { height:50px; border-radius:50%; border:1px solid var(--line); background:var(--surface-solid); cursor:pointer; }
.result-panel { margin-top:24px; padding:24px; border-radius:22px; background:var(--ink); color:#fff; min-height:148px; display:flex; flex-direction:column; justify-content:center; }
.result-panel strong { display:block; font-size:clamp(34px, 8vw, 66px); font-weight:450; letter-spacing:-.045em; margin:8px 0; overflow-wrap:anywhere; }
.result-panel span:last-child { color:#bbb9b2; font-size:13px; }
.tape-stage { display:flex; align-items:center; height:76px; margin:24px 0 2px; overflow:hidden; }
.tape-case { width:67px; height:67px; z-index:2; flex:0 0 auto; display:grid; place-items:center; border-radius:20px; background:var(--ink); color:var(--gold); font-size:28px; box-shadow:0 8px 20px rgba(0,0,0,.13); }
.tape-window { flex:1; overflow:hidden; margin-left:-5px; }
.tape { position:relative; width:88%; height:38px; background:#d7ae50; border:1px solid #9e782a; transform-origin:left; transform:scaleX(.08); transition:transform .55s cubic-bezier(.2,.8,.2,1); box-shadow:inset 0 -8px 14px rgba(104,74,19,.12); }
.tape.extended { transform:scaleX(1); }
.tick { position:absolute; top:0; height:14px; border-left:2px solid #3c321f; }
.t1{left:12%}.t2{left:27%;height:22px}.t3{left:42%}.t4{left:57%;height:22px}.t5{left:72%}.t6{left:87%;height:22px}
.tape-number { position:absolute; top:19px; font-size:9px; color:#3c321f; }
.n1{left:24%}.n2{left:54%}.n3{left:70%}.n4{left:85%}
.card-actions { display:flex; gap:10px; margin-top:20px; }
.secondary-button { flex:1; border:1px solid var(--line); border-radius:14px; background:transparent; padding:13px; cursor:pointer; }
.coin-animation { display:flex; justify-content:center; align-items:center; gap:18px; padding:28px 0 4px; }
.coin { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; border:2px solid var(--gold); background:#f3dfad; color:#5f4619; font-weight:700; transition:transform .4s ease; }
.coin-animation.moving .coin-a { transform:translateX(16px) rotate(25deg); }
.coin-animation.moving .coin-b { transform:translateX(-16px) rotate(-25deg); }
.transfer-line { color:var(--gold); font-size:24px; }
.disclaimer { color:var(--muted); font-size:12px; line-height:1.55; margin:22px 2px 0; }
.list-header { display:flex; justify-content:space-between; align-items:center; }
.list-header h2 { font-size:30px; font-weight:500; }
.text-button { border:0; background:none; color:var(--gold); cursor:pointer; }
.saved-list { display:grid; gap:10px; }
.saved-item, .empty-state { border:1px solid var(--line); border-radius:18px; padding:17px; background:var(--surface); }
.saved-item { display:flex; justify-content:space-between; gap:15px; align-items:center; }
.saved-item strong { display:block; font-size:16px; }
.saved-item small { color:var(--muted); }
.saved-item button { border:0; background:none; color:var(--gold); cursor:pointer; }
footer { display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-size:11px; padding:34px 4px 5px; }
.toast { position:fixed; bottom:24px; left:50%; transform:translate(-50%, 20px); background:var(--ink); color:#fff; padding:11px 16px; border-radius:12px; opacity:0; pointer-events:none; transition:.2s; }
.toast.show { opacity:1; transform:translate(-50%, 0); }
body.dark {
  --bg:#171918; --surface:rgba(35,38,36,.82); --surface-solid:#252826; --ink:#f4f0e7;
  --muted:#aaa79f; --line:#3f423e; --shadow:0 24px 70px rgba(0,0,0,.28);
}
body.dark .tab.active, body.dark .result-panel, body.dark .tape-case, body.dark .mic-button { background:#eee9df; color:#1e211f; }
body.dark .result-panel span:last-child { color:#686b67; }
@media (max-width:620px) {
  .unit-grid { grid-template-columns:1fr 42px 1fr; gap:7px; }
  select { padding:14px 9px; font-size:14px; }
  .converter-card { border-radius:22px; }
  footer { flex-direction:column; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none!important; transition:none!important; } }