:root { color-scheme:light dark; --bg:#f5f6f7; --card:#fff; --ink:#1e293b; --muted:#64748b; --line:#dbe1e8; --brand:#075985; --soft:#e0f2fe; --green:#157347; --amber:#a65e00; --danger:#b42318; --focus:#f59e0b; }
@media (prefers-color-scheme:dark) { :root { --bg:#101826; --card:#182233; --ink:#edf3fa; --muted:#aebdce; --line:#334155; --brand:#7dd3fc; --soft:#17354a; --green:#6ee7a6; --amber:#fbbf24; --danger:#fca5a5; --focus:#facc15; } }
* { box-sizing:border-box; } body { margin:0; min-width:320px; background:var(--bg); color:var(--ink); font-family:system-ui,"Segoe UI",Tahoma,sans-serif; line-height:1.6; } button,input,select { font:inherit; } a { color:var(--brand); } button { min-height:44px; border:0; border-radius:10px; padding:0 16px; background:var(--brand); color:#fff; cursor:pointer; font-weight:700; } button:disabled { opacity:.45; cursor:not-allowed; } button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.topbar { padding:14px 16px; text-align:center; background:var(--card); border-bottom:1px solid var(--line); } .tabs { display:flex; overflow-x:auto; gap:4px; padding:8px 12px; background:var(--card); border-bottom:1px solid var(--line); } .tabs a { flex:0 0 auto; min-height:44px; padding:10px 12px; border-radius:9px; text-decoration:none; color:var(--muted); } .tabs a.active { color:var(--brand); background:var(--soft); font-weight:800; }
.page,.auth { width:min(100%,1040px); margin:auto; padding:16px; } .auth { min-height:100vh; display:grid; place-items:center; max-width:460px; } .card { margin-bottom:14px; padding:18px; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:0 1px 2px #0000000b; } h1,h2,p { margin-top:0; } h1 { font-size:1.35rem; } h2 { font-size:1.1rem; } .muted,.hint,small { color:var(--muted); } .eyebrow { font-weight:800; } .balance { display:block; font-size:clamp(1.7rem,6vw,2.5rem); } .balance.you_owe { color:var(--amber); } .balance.we_owe { color:var(--green); } .balance.settled { color:var(--muted); }
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-bottom:14px; } .tile { padding:15px; border-radius:14px; background:var(--card); border:1px solid var(--line); } .tile small,.tile strong { display:block; } .tile strong { margin-top:5px; overflow-wrap:anywhere; } .section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; } .section-title h1,.section-title h2 { margin-bottom:0; } .transactions { display:grid; gap:1px; border-top:1px solid var(--line); } .transaction { display:grid; grid-template-columns:1fr auto; gap:1px 12px; padding:12px 0; color:inherit; text-decoration:none; border-bottom:1px solid var(--line); } .transaction small { grid-row:2; } .transaction strong { grid-column:2; grid-row:1 / span 2; align-self:center; text-align:left; font-size:.9rem; }
.field { display:block; margin:0 0 14px; font-weight:700; } .field span { display:block; margin-bottom:5px; } input,select { display:block; width:100%; min-height:44px; padding:8px 10px; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:9px; } .form-error { min-height:1.6em; color:var(--danger); } .message { padding:12px; border-radius:10px; background:#fef2f2; color:var(--danger); } @media (prefers-color-scheme:dark) { .message { background:#421d25; } } .empty { padding:22px 0; color:var(--muted); text-align:center; }
.filters { position:sticky; top:0; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:10px; margin-bottom:12px; background:var(--bg); border-block:1px solid var(--line); } .filters .field { margin:0; } .filters .field:first-child { grid-column:1 / -1; } .check { display:flex; align-items:center; gap:8px; min-height:44px; font-weight:700; } .check input { width:20px; min-height:20px; accent-color:var(--brand); } .discount-note { margin-bottom:8px; color:var(--green); font-weight:800; } .price-list { display:grid; gap:10px; } .price-table { display:none; } .price-item { display:grid; grid-template-columns:1fr auto; gap:5px 10px; padding:14px; background:var(--card); border:1px solid var(--line); border-radius:13px; } .price-item small { display:block; } .price-amount { text-align:left; } .price-amount del { display:block; color:var(--muted); font-size:.8rem; } .price-amount b { display:block; } .badge { width:max-content; padding:2px 8px; border-radius:999px; font-size:.82rem; font-weight:800; } .discount { background:var(--soft); color:var(--brand); } .stock { background:#dcfce7; color:#166534; } .out { background:#f1f5f9; color:#475569; } @media (prefers-color-scheme:dark) { .stock { background:#164e35; color:#a7f3d0; } .out { background:#334155; color:#d6e1ef; } } .pager { display:flex; align-items:center; justify-content:center; gap:12px; margin:18px 0; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; } .chips button { background:var(--soft); color:var(--brand); } .table-wrap { overflow-x:auto; margin-bottom:14px; border:1px solid var(--line); border-radius:12px; background:var(--card); } table { width:100%; min-width:560px; border-collapse:collapse; } th,td { padding:10px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap; } th { color:var(--muted); font-size:.85rem; } tr:last-child td { border-bottom:0; } .lines table { min-width:650px; } .back { display:inline-block; margin-bottom:12px; } .invoice-total { font-size:1.4rem; color:var(--brand); } .account { max-width:600px; } .logout { background:var(--danger); }
.skeleton i { display:block; height:54px; margin-bottom:12px; border-radius:12px; background:linear-gradient(90deg,var(--card),var(--soft),var(--card)); background-size:200% 100%; animation:shine 1.1s infinite; } @keyframes shine { to { background-position:-200% 0; } }
@media (min-width:720px) { .filters { grid-template-columns:2fr 1fr auto; align-items:end; } .filters .field:first-child { grid-column:auto; } .price-list { display:none; } .price-table { display:block; }   }
@media print { body { background:#fff; color:#000; } .topbar,.tabs,button,.chips,.back { display:none!important; } .page { width:100%; max-width:none; padding:0; } .card,.table-wrap { border-color:#999; box-shadow:none; } }
.price-table td:first-child, .lines td:nth-child(2) { white-space:normal; min-width:200px; }   /* long product names wrap instead of widening the table past the page */