:root{--bg:#0f172a;--card:#ffffff;--text:#0f172a;--muted:#64748b;--blue:#2563eb;--soft:#eef2ff;}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:linear-gradient(180deg,#111827,#0f172a);color:var(--text);}
.app{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;padding-top:calc(24px + env(safe-area-inset-top));padding-bottom:calc(24px + env(safe-area-inset-bottom));}
.card{width:100%;max-width:430px;background:var(--card);border-radius:34px;padding:28px;box-shadow:0 24px 70px rgba(0,0,0,.35);}
.logo{width:64px;height:64px;border-radius:20px;background:linear-gradient(135deg,#2563eb,#0f172a);color:white;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:24px;margin-bottom:18px;}
h1{margin:0;font-size:32px;letter-spacing:-.8px}.subtitle{margin:8px 0 26px;color:var(--muted);line-height:1.35}label{font-weight:700;display:block;margin-bottom:8px}input{width:100%;font-size:28px;padding:18px;border:1px solid #dbe2ea;border-radius:18px;outline:none;background:#f8fafc;}input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.15)}button{width:100%;margin-top:14px;border:0;border-radius:18px;padding:18px;font-size:18px;font-weight:800;color:white;background:var(--blue);box-shadow:0 10px 22px rgba(37,99,235,.28)}button:active{transform:scale(.985)}.result{margin-top:22px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:22px;padding:18px}.hidden{display:none}.grid{display:grid;grid-template-columns:1fr auto;gap:10px 16px;font-size:18px}.grid strong{font-weight:800}.total{margin-top:16px;padding-top:16px;border-top:1px solid #e5e7eb}.bars{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}.bar{padding:8px 10px;border-radius:11px;background:var(--soft);font-weight:800;font-size:14px}.ok{color:#16a34a}.warn{color:#ea580c}