*{box-sizing:border-box;margin:0;padding:0}body{color:#111;background:#f5f4f0;min-height:100vh;font-family:system-ui,-apple-system,sans-serif;line-height:1.5}.page{max-width:38rem;margin:0 auto;padding:2rem 1.25rem 4rem}.page-header{margin-bottom:1.75rem}.page-header h1{letter-spacing:-.02em;font-size:1.75rem;font-weight:700}.subtitle{color:#666;margin-top:.2rem;font-size:.875rem}.card{background:#fff;border:1px solid #e2e0d8;border-radius:.75rem;margin-bottom:1.5rem;padding:1.25rem 1.5rem 1.5rem}.card h2{margin-bottom:1rem;font-size:1rem;font-weight:600}.add-form{flex-direction:column;gap:.5rem;display:flex}.add-form label{color:#444;margin-top:.25rem;font-size:.8125rem;font-weight:600}.add-form input{background:#fafaf8;border:1.5px solid #d1cfc6;border-radius:.5rem;outline:none;width:100%;padding:.6rem .75rem;font-size:.9375rem;transition:border-color .15s}.add-form input:focus{background:#fff;border-color:#6c63ff}.add-form input:disabled{opacity:.6}.form-error{color:#c0392b;padding:.35rem 0;font-size:.85rem}.btn{cursor:pointer;border:none;border-radius:.5rem;justify-content:center;align-items:center;padding:.65rem 1.25rem;font-size:.9375rem;font-weight:600;transition:opacity .15s,transform .1s;display:inline-flex}.btn:disabled{opacity:.55;cursor:not-allowed}.btn:not(:disabled):active{transform:scale(.97)}.btn-primary{color:#fff;background:#6c63ff;width:100%;margin-top:.5rem}.btn-primary:not(:disabled):hover{background:#574fd6}.summary-bar{color:#555;align-items:center;gap:.6rem;margin-bottom:.75rem;padding:.5rem 0;font-size:.875rem;display:flex}.summary-unpaid{color:#c0392b;font-weight:700}.summary-paid{color:#27ae60;font-weight:600}.summary-sep{color:#ccc}.section-title{color:#333;margin-bottom:.75rem;font-size:1rem;font-weight:600}.empty-msg{color:#888;text-align:center;padding:2rem 0;font-size:.9rem}.order-list{flex-direction:column;gap:.625rem;list-style:none;display:flex}.order-item{background:#fff;border:1.5px solid #0000;border-radius:.65rem;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 1rem .9rem 1.1rem;transition:box-shadow .15s;display:flex}.order-item.unpaid{background:#fff9f9;border-color:#f5c6c6;box-shadow:0 1px 4px #c0392b14}.order-item.paid{opacity:.8;background:#f8fff9;border-color:#d4edda}.order-info{flex-direction:column;gap:.15rem;min-width:0;display:flex}.order-family{white-space:nowrap;text-overflow:ellipsis;font-size:.9375rem;font-weight:700;overflow:hidden}.order-items{color:#666;white-space:nowrap;text-overflow:ellipsis;font-size:.8125rem;overflow:hidden}.toggle-btn{cursor:pointer;text-align:center;border:none;border-radius:.5rem;flex-shrink:0;min-width:6.5rem;padding:.55rem 1rem;font-size:.875rem;font-weight:700;transition:opacity .15s,transform .1s}.toggle-btn:disabled{opacity:.5;cursor:not-allowed}.toggle-btn:not(:disabled):active{transform:scale(.95)}.toggle-btn.toggle-unpaid{color:#fff;background:#c0392b}.toggle-btn.toggle-unpaid:not(:disabled):hover{background:#a93226}.toggle-btn.toggle-paid{color:#1e8449;background:#e9faf1;border:1.5px solid #a9dfbf}.toggle-btn.toggle-paid:not(:disabled):hover{background:#d5f5e3}@media (max-width:480px){.order-item{flex-wrap:wrap}.toggle-btn{width:100%}}