:root { --ink:#202128; --muted:#747782; --paper:#f7f5ef; --card:#fff; --yellow:#f5c842; --green:#287a55; --red:#c94b43; --line:#e7e3d8; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; padding-bottom:110px; }
button,input,select { font:inherit; }
.topbar,main { width:min(1050px,calc(100% - 32px)); margin:auto; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:28px 0 20px; }
h1,h2,p { margin:0; } h1 { font-size:clamp(1.8rem,5vw,2.7rem); letter-spacing:-.045em; } h2 { font-size:1.25rem; letter-spacing:-.025em; }
.eyebrow { color:var(--muted); font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; margin-bottom:5px; }
.icon-button,.close-button { border:0; background:#eae6dc; width:42px; height:42px; border-radius:50%; font-size:1.5rem; cursor:pointer; }
.summary { background:var(--ink); color:white; border-radius:25px; padding:27px; display:flex; align-items:flex-end; justify-content:space-between; gap:22px; box-shadow:0 14px 30px #27251f18; }
.summary span,.summary small { display:block; color:#bbbcc3; }.summary strong { display:block; font-size:clamp(2rem,8vw,3.5rem); letter-spacing:-.06em; margin:4px 0; }
.summary-profit { text-align:right; }.summary-profit strong { font-size:1.45rem; color:var(--yellow); }
section { margin-top:36px; }.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:15px; }
.pill { background:#dceee4; color:var(--green); border-radius:99px; padding:7px 11px; font-size:.78rem; font-weight:800; }
.machine-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.machine { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:17px; min-height:150px; position:relative; overflow:hidden; }
.machine::after { content:""; position:absolute; width:70px; height:70px; right:-25px; bottom:-28px; border:13px solid var(--yellow); border-radius:50%; opacity:.6; }
.machine-number { display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--yellow); font-weight:900; }
.machine h3 { font-size:1rem; margin:18px 0 4px; }.machine p { color:var(--muted); font-size:.82rem; line-height:1.35; }
.machine .rent { margin-top:10px; color:var(--ink); font-weight:750; font-size:.75rem; }.machine.inactive { opacity:.6; }.machine.mobile .machine-number { background:#c9b8f5; }
.empty-state { background:#fff; border:1px dashed #d4cfc2; padding:34px; border-radius:18px; text-align:center; color:var(--muted); }.empty-state strong { display:block; color:var(--ink); margin:12px 0 5px; }.empty-state p { font-size:.9rem; }
.coin { margin:auto; width:46px; height:46px; border:5px double #bd8d1b; border-radius:50%; background:var(--yellow); color:#765915; display:grid; place-items:center; font-weight:900; }
.transaction-list { display:grid; gap:9px; }.transaction { display:grid; grid-template-columns:45px 1fr auto; gap:12px; align-items:center; background:white; border:1px solid var(--line); border-radius:15px; padding:13px; }
.transaction .badge { width:42px; height:42px; display:grid; place-items:center; background:#f3edda; border-radius:12px; font-weight:900; }.transaction small { color:var(--muted); }.transaction .money { text-align:right; font-weight:900; }.transaction .money small { display:block; font-weight:500; }
.fab { position:fixed; z-index:3; bottom:24px; left:50%; transform:translateX(-50%); background:var(--yellow); border:0; border-radius:99px; padding:16px 23px; font-weight:900; box-shadow:0 12px 30px #4d401b42; cursor:pointer; }.fab span { font-size:1.25rem; }
dialog { width:min(470px,calc(100% - 28px)); border:0; border-radius:24px; padding:24px; box-shadow:0 25px 80px #0005; }dialog::backdrop { background:#1118; backdrop-filter:blur(4px); }.dialog-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
label { display:block; font-size:.82rem; font-weight:800; margin:14px 0; }input,select { display:block; width:100%; border:1px solid #d8d3c8; border-radius:11px; padding:13px; margin-top:6px; background:white; }
.money-input { position:relative; }.money-input input { font-size:1.8rem; font-weight:850; padding-right:45px; }.money-input span { position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:1.2rem; }
.calculation,.hint { color:var(--muted); font-size:.85rem; line-height:1.5; }.primary,.secondary { width:100%; border:0; border-radius:12px; padding:14px; font-weight:850; cursor:pointer; }.primary { background:var(--yellow); color:var(--ink); }.secondary { background:#eeeae0; text-align:center; }.backup-actions { display:grid; gap:10px; margin-top:20px; }.file-button input { display:none; }
@media(max-width:750px){.machine-grid{grid-template-columns:repeat(2,1fr)}.summary{align-items:start;flex-direction:column}.summary-profit{text-align:left}.summary strong{font-size:2.5rem}}
@media(max-width:390px){.machine-grid{grid-template-columns:1fr}.machine{min-height:125px}}