body{margin:0;font-family:Arial,sans-serif;background-color:#f9f9f9;color:#333}h1,h2,h3{margin:0}a{text-decoration:none;color:inherit}:root{--bg: #0b1020;--panel: rgba(255,255,255,.06);--panel2: rgba(255,255,255,.09);--text: rgba(255,255,255,.92);--muted: rgba(255,255,255,.65);--border: rgba(255,255,255,.12);--shadow: 0 10px 35px rgba(0,0,0,.35);--radius: 18px}*{box-sizing:border-box}body{margin:0;font-size:16px;line-height:1.5;font-family:Arial,sans-serif;background:radial-gradient(1200px 700px at 10% 10%,rgba(80,120,255,.25),transparent 60%),radial-gradient(900px 600px at 90% 20%,rgba(255,120,180,.18),transparent 60%),var(--bg);color:var(--text)}a{color:inherit}.app{min-height:100vh;display:flex;flex-direction:column}.topbar{padding:28px 20px 10px}.topbar h1{margin:0;font-size:28px;letter-spacing:.5px}.sub{margin:6px 0 0;color:var(--muted);font-size:14px}.container{width:min(980px,92vw);margin:0 auto;padding:10px 0 40px;display:flex;flex-direction:column;gap:16px}.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.summaryCard{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}.summaryLabel{color:var(--muted);font-size:13px}.summaryValue{margin-top:6px;font-size:20px;font-weight:750}.form{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}.formHeader{display:flex;align-items:center;justify-content:space-between;gap:10px}.formHeader h2{margin:0;font-size:24px;font-weight:700}.grid{margin-top:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.field{display:flex;flex-direction:column;gap:6px}.field label{color:var(--muted);font-size:18px}.field input,.field select{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#00000040;color:var(--text);outline:none;font-size:16px}.field input::placeholder{color:#ffffff73}.span2{grid-column:span 2}.formActions{margin-top:12px;display:flex;justify-content:flex-end}.filterBar{display:flex;gap:10px;flex-wrap:wrap;align-items:end;padding:12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--panel2)}.filterBar .grow{flex:1;min-width:200px}.filterBar .field{min-width:140px}.filterBar input,.filterBar select{padding:9px 10px;border-radius:12px}.btn{padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#ffffff0f;color:var(--text);cursor:pointer;font-size:16px}.btn:hover{background:#ffffff1a}.btn:disabled{opacity:.55;cursor:not-allowed}.btn.primary{background:#78a0ff33;border-color:#78a0ff59}.btn.danger{background:#ff787829;border-color:#ff787859}.btn.ghost{background:transparent}.list{margin-top:4px}.listHeader{display:flex;align-items:baseline;justify-content:space-between;padding:6px 2px 10px}.listHeader h3{margin:0;font-size:16px}.count{color:var(--muted);font-size:13px}.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}.cardTop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.tagRow{display:flex;gap:8px;flex-wrap:wrap}.pill{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:#00000038}.pill.subtle{color:var(--muted)}.pill.income{border-color:#78dca059;background:#78dca01f}.pill.expense{border-color:#ff8c8c59;background:#ff8c8c1f}.amount{font-size:20px;font-weight:800;letter-spacing:.3px}.meta{display:flex;flex-direction:column;gap:6px}.metaItem{display:flex;justify-content:space-between;gap:10px;border-top:1px dashed rgba(255,255,255,.12);padding-top:8px}.metaLabel{color:var(--muted);font-size:12px}.metaValue{font-size:13px;color:#ffffffe0;word-break:break-word}.cardActions{display:flex;gap:10px;justify-content:flex-end;margin-top:2px}.empty{padding:18px;border:1px dashed rgba(255,255,255,.2);border-radius:var(--radius);color:var(--muted);text-align:center}.footer{margin-top:auto;padding:18px 20px;color:var(--muted);font-size:12px;text-align:center}.categoryActions{display:flex;gap:8px;margin-top:8px}.categoryList{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.categoryItem{display:flex;align-items:center;gap:4px;padding:4px 8px;border:1px solid var(--border);border-radius:12px;background:var(--panel2)}.actions{margin:16px 0;text-align:right}.actions .btn{padding:10px 16px;font-size:14px;border-radius:8px;background-color:#4caf50;color:#fff;border:none;cursor:pointer}.actions .btn:hover{background-color:#45a049}.categoryButtons{display:flex;flex-wrap:wrap;gap:8px}.addCategory{display:flex;gap:8px;margin-top:8px}.quantityControls{display:flex;align-items:center;gap:8px}.quantityControls .btn{width:40px;height:40px;display:flex;justify-content:center;align-items:center;font-size:16px}.page{padding:20px}.title{margin-bottom:16px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}.card{background:#1e1e1e;border-radius:12px;padding:16px;box-shadow:0 6px 20px #0006;animation:pop .22s cubic-bezier(.2,.9,.2,1) both}.cost{color:red;margin-top:8px}.sell{color:#00ff7f;margin-top:4px}.margin{margin-top:8px;font-weight:700}.fab{position:fixed;right:24px;bottom:24px;width:64px;height:64px;border-radius:50%;background:orange;color:#fff;font-size:36px;border:none;cursor:pointer;box-shadow:0 8px 20px #00000080}.settlementGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;width:100%}.settlementCard{background:#232323;padding:16px;border-radius:12px;animation:slideUp .26s ease both}.settlementCard label{color:#aaa;font-size:13px}.settlementSummary{margin-top:16px;background:#232323;padding:12px;border-radius:8px}.settlementDoneBtn{position:fixed;right:32px;bottom:32px;width:140px;height:48px;border-radius:24px;background:#4caf50;color:#fff;border:none;font-size:16px;box-shadow:0 6px 20px #0006;cursor:pointer}.settlementDoneBtn:hover{transform:translateY(-3px);box-shadow:0 10px 28px #00000073}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes pop{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}@keyframes slideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.page.fade-in{animation:fadeIn .26s ease both}.field input,.field select,.btn{transition:background .16s ease,box-shadow .16s ease,transform .12s ease,opacity .16s ease}.field input:focus{box-shadow:0 6px 18px #5078ff1f;transform:translateY(-1px)}.btn:active{transform:translateY(1px) scale(.995)}.toast{animation:fadeIn .22s ease both;transition:opacity .3s ease}.chartContainer{width:100%;overflow-x:auto;padding:8px 0}.chartLegend{display:flex;gap:12px;align-items:center;margin-top:6px}@media(max-width:520px){.chartLegend{flex-direction:column;align-items:flex-start;gap:6px}}@media(max-width:780px){.summary,.grid{grid-template-columns:1fr}.span2{grid-column:span 1}.cards{grid-template-columns:1fr}}.ingredientList{display:flex;flex-wrap:wrap;gap:16px;padding:16px}.ingredientCard{background:#333;color:#fff;padding:16px;border-radius:8px;width:200px;cursor:pointer;box-shadow:0 2px 4px #0003;transition:transform .2s}.ingredientCard:hover{transform:scale(1.05)}.ingredientName{font-size:18px;font-weight:700;margin-bottom:8px}.ingredientPrices{display:flex;flex-direction:column;gap:4px}.buyPrice{color:red}.sellPrice{color:green}.grossMargin{margin-top:8px;font-size:16px}.grossMargin.loss{color:red}.grossMargin.profit{color:#fff}.addButton{background:orange;color:#fff;border:none;border-radius:50%;width:50px;height:50px;font-size:24px;display:flex;justify-content:center;align-items:center;cursor:pointer;position:fixed;bottom:16px;right:16px;box-shadow:0 2px 4px #0003}.ingredientEdit{padding:16px;background:#222;color:#fff;border-radius:8px;max-width:400px;margin:0 auto}.field{margin-bottom:16px}.field label{display:block;margin-bottom:8px;font-size:16px}.field input{width:100%;padding:8px;font-size:16px;border:1px solid #555;border-radius:4px;background:#333;color:#fff}.lastUpdated{font-size:14px;color:#aaa}.actions{display:flex;justify-content:space-between;gap:8px}.actions .btn{padding:8px 16px;font-size:16px;border:none;border-radius:4px;cursor:pointer}.actions .btn.primary{background:green;color:#fff}.actions .btn.danger{background:red;color:#fff}.actions .btn{background:#555;color:#fff}
