:root{color-scheme:dark;--ink:#f7f1df;--muted:#a9a29a;--paper:#171516;--card:#211e20;--line:#494145;--acid:#e8ff57;--violet:#8e6cff;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 82% 4%,#39245c 0,transparent 28%),#111;color:var(--ink);min-height:100vh}
.shell{width:min(1120px,calc(100% - 32px));margin:auto;padding:56px 0 80px}
header{display:grid;grid-template-columns:130px 1fr auto;gap:28px;align-items:end;margin-bottom:48px}
.brand{width:126px;height:126px;background:var(--acid);color:#101010;display:grid;place-items:center;font:900 72px/1 system-ui;transform:rotate(-3deg);box-shadow:9px 9px 0 var(--violet)}
.eyebrow{color:var(--acid);font-size:12px;letter-spacing:.16em;margin:0 0 12px}
h1{font:800 clamp(34px,5vw,62px)/1.05 system-ui,sans-serif;letter-spacing:-.045em;margin:0}
.stamp{border:1px solid var(--line);padding:13px 15px;text-align:right;min-width:150px}
.stamp span{display:block;color:var(--muted);font-size:11px;margin-bottom:5px}
.stamp strong{color:var(--acid);font-size:14px}
.board,.rate-panel{background:linear-gradient(145deg,#242022,#1a1819);border:1px solid var(--line);box-shadow:0 20px 70px #0005;padding:28px;margin-bottom:22px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:26px}
.section-head>div{display:flex;align-items:center;gap:12px}
.section-head span{color:var(--violet);font-weight:800}
.section-head h2{font:750 24px/1 system-ui;margin:0}
.section-head p{color:var(--muted);font-size:12px;margin:0;max-width:440px;text-align:right}
.currency-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.currency-card{display:grid;grid-template-columns:44px minmax(72px,auto) minmax(80px,1fr) 28px;gap:12px;align-items:center;border:1px solid #403a3d;background:#151314;padding:16px;transition:.2s}
.currency-card:focus-within{border-color:var(--acid);box-shadow:inset 4px 0 var(--acid)}
.currency-symbol{color:var(--violet);font:700 22px/1 system-ui}
.currency-meta strong{display:block;font:700 14px/1.2 system-ui}
.currency-meta small{color:var(--muted)}
.amount{width:100%;min-width:0;border:0;border-bottom:1px solid #5d565a;background:transparent;color:var(--ink);font:700 24px/1.3 inherit;text-align:right;padding:5px 0;outline:0}
.amount::placeholder{color:#5c5658}
.favorite{border:0;background:transparent;color:#645d60;font-size:20px;cursor:pointer;padding:3px}
.favorite.active{color:var(--acid)}
.hint{margin:18px 0 0;color:var(--muted);font-size:11px}
.rate-panel{box-shadow:none}
.rate-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;border-block:1px solid var(--line);padding:14px 0;margin-bottom:14px}
.rate-toolbar label{font-size:12px;color:var(--muted)}
input[type=date],.rate-input{background:#121011;border:1px solid #4c4549;color:var(--ink);font:inherit;padding:8px}
.actions{display:flex;gap:8px}
button{font:700 12px/1 inherit;cursor:pointer;padding:10px 14px}
.ghost{border:1px solid #595156;background:transparent;color:var(--ink)}
.primary{border:1px solid var(--acid);background:var(--acid);color:#131313}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--muted);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
th,td{padding:12px;border-bottom:1px solid #383336}
.rate-input{width:150px}
.pin-toggle{accent-color:var(--acid);width:18px;height:18px}
.save-message{min-height:18px;color:var(--acid);font-size:12px;margin-top:12px}
.invalid{border-color:#ff6874!important}
.invalid-note{color:#ff8992}
.flash{animation:flash .5s}
@keyframes flash{50%{background:#3d4222}
}
@media(max-width:720px){.shell{width:min(100% - 20px,600px);padding-top:24px}
header{grid-template-columns:76px 1fr;gap:18px}
.brand{width:72px;height:72px;font-size:42px;box-shadow:5px 5px 0 var(--violet)}
.stamp{grid-column:1/-1;text-align:left}
.board,.rate-panel{padding:18px}
.section-head{align-items:flex-start;flex-direction:column;margin-bottom:18px}
.section-head p{text-align:left}
.currency-grid{grid-template-columns:1fr}
.currency-card{grid-template-columns:32px minmax(65px,auto) minmax(72px,1fr) 26px;padding:13px;gap:8px}
.amount{font-size:20px}
.rate-toolbar{align-items:stretch;flex-direction:column}
.actions button{flex:1}
h1{font-size:34px}
}