:root{--bg:#0b1220;--panel:#111a2e;--panel2:#16213a;--line:#223052;--text:#e6ecf7;--muted:#8b98b4;--blue:#38bdf8;--green:#34d399;--amber:#fbbf24;--red:#f87171;--accent:#0ea5e9;--radius:14px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.4;padding-bottom:env(safe-area-inset-bottom)}
.hidden{display:none!important}
a{color:var(--blue)}h1,h2,h3{margin:0 0 .4em;font-weight:700}h2{font-size:1.35rem}h3{font-size:1.02rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.muted{color:var(--muted)}.small{font-size:.82rem}.center{text-align:center}.right{text-align:right}.r{text-align:right}
.green{color:var(--green)}.amber{color:var(--amber)}.red{color:var(--red)}.blue{color:var(--blue)}
code{background:var(--panel2);padding:.1em .35em;border-radius:5px;font-size:.85em}
input,select,textarea,button{font:inherit;color:inherit}
input,select,textarea{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:.55rem .7rem;width:100%;min-width:0;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(14,165,233,.2)}
input[type=date]{color-scheme:dark}
label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.7rem}label>input,label>select,label>textarea{margin-top:.3rem;color:var(--text)}
.btn{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:.55rem .9rem;cursor:pointer;white-space:nowrap;transition:.15s}
.btn:hover{border-color:var(--accent)}.btn.primary{background:var(--accent);border-color:var(--accent);color:#03141f;font-weight:600}.btn.primary:hover{filter:brightness(1.1)}
.btn.small{padding:.35rem .7rem;font-size:.85rem}.btn.block{width:100%;margin-top:.5rem}.btn.link{background:none;border:none;color:var(--blue);padding:.3rem 0}.btn.back{margin-bottom:.4rem}
.btn.danger-outline{border-color:rgba(248,113,113,.5);color:var(--red)}.btn.danger-outline:hover{background:rgba(248,113,113,.12)}
.btn:disabled{opacity:.6;cursor:wait}
.x{background:none;border:none;color:var(--muted);cursor:pointer;padding:.2rem .4rem;border-radius:6px}.x:hover{color:var(--red);background:rgba(248,113,113,.12)}
.hint{color:var(--muted);font-size:.82rem;margin:.4rem 0}.auth-error{color:var(--red);font-size:.88rem;min-height:1.2em;margin:.5rem 0 0}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#1f2b47;border:1px solid var(--line);padding:.6rem 1rem;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.4);z-index:50;font-size:.9rem}.toast.warn{border-color:var(--amber)}

/* auth */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:radial-gradient(1200px 600px at 20% -10%,rgba(14,165,233,.25),transparent 60%),var(--bg)}
.auth-card{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:1.6rem;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.brand{display:flex;gap:.8rem;align-items:center;margin-bottom:1.2rem}.brand h1{font-size:1.4rem;margin:0}.brand p{margin:0;color:var(--muted);font-size:.85rem}
.brand-mark{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--accent);color:#fff;font-weight:800;font-size:1.4rem;flex:none}.brand-mark.small{width:30px;height:30px;font-size:1rem;border-radius:8px}
.auth-form h2{font-size:1.05rem;margin-bottom:.8rem}details{margin:.6rem 0}summary{cursor:pointer;color:var(--blue);font-size:.9rem;margin-bottom:.5rem}

/* app shell */
.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:.6rem 1rem;background:rgba(11,18,32,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topbar-left{display:flex;align-items:center;gap:.6rem}.topbar-right{display:flex;gap:.5rem;align-items:center}
.icon-btn{background:none;border:1px solid var(--line);border-radius:10px;padding:.35rem .55rem;cursor:pointer}
.sync{display:flex;align-items:center;gap:.4rem;background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:.3rem .7rem;font-size:.8rem;cursor:pointer}
.sync .dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.sync[data-state=synced] .dot{background:var(--green)}.sync[data-state=pending] .dot{background:var(--amber)}.sync[data-state=syncing] .dot{background:var(--blue);animation:pulse 1s infinite}.sync[data-state=error] .dot{background:var(--red)}
@keyframes pulse{50%{opacity:.3}}
.tabs{display:flex;gap:.25rem;padding:.5rem 1rem 0;border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:53px;z-index:19;overflow-x:auto}
.tab{position:relative;background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);padding:.55rem .8rem;cursor:pointer;display:flex;gap:.4rem;align-items:center;white-space:nowrap}
.tab.active{color:var(--text);border-bottom-color:var(--accent)}
.badge{position:absolute;top:2px;right:0;background:var(--red);color:#fff;font-style:normal;font-size:.65rem;font-weight:700;border-radius:999px;padding:0 .35rem;min-width:16px;text-align:center}
main{max-width:1100px;margin:0 auto;padding:1rem}
.page-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.5rem}
.fab{position:fixed;right:1.2rem;bottom:1.4rem;width:56px;height:56px;border-radius:50%;background:var(--accent);color:#03141f;border:none;font-size:2rem;line-height:1;cursor:pointer;box-shadow:0 12px 30px rgba(14,165,233,.45);z-index:15}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1rem;margin:.8rem 0}.card.danger{border-color:rgba(248,113,113,.35)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:.8rem}.grid2 .card{margin:0}
.pill{font-size:.78rem;background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:.1rem .55rem;font-weight:600}.pill.green{color:var(--green)}.pill.red{color:var(--red)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.7rem;margin:.8rem 0}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:.85rem .95rem;border-left:4px solid var(--line)}
.stat.blue{border-left-color:var(--blue)}.stat.green{border-left-color:var(--green)}.stat.amber{border-left-color:var(--amber)}.stat.red{border-left-color:var(--red)}
.stat-label{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.stat-value{font-size:1.35rem;font-weight:700;margin-top:.15rem;font-variant-numeric:tabular-nums}.stat-sub{font-size:.75rem;color:var(--muted);margin-top:.2rem}
.stats.compact .stat-value{font-size:1.15rem}

/* lists */
.list{list-style:none;margin:0;padding:0}.row{display:flex;justify-content:space-between;gap:.8rem;padding:.55rem 0;border-bottom:1px solid var(--line);cursor:pointer}.row:last-child{border-bottom:none}.row:hover b{color:var(--blue)}
.bar-row{margin:.5rem 0;cursor:pointer}.bar-label{display:flex;justify-content:space-between;font-size:.85rem;margin-bottom:.2rem}.bar{height:10px;background:var(--panel2);border-radius:6px;overflow:hidden}.bar-fill{height:100%;background:var(--green);border-radius:6px;position:relative}.bar-cost{height:100%;background:#475569}
.progress{height:6px;background:var(--panel2);border-radius:4px;overflow:hidden;margin:.5rem 0}.progress>div{height:100%;background:var(--accent);border-radius:4px;transition:width .3s}.progress>div.ok{background:var(--green)}

/* events */
.toolbar{display:flex;gap:.5rem;margin:.5rem 0}.toolbar input{flex:1}.toolbar select{width:auto}
.chips{display:flex;gap:.4rem;flex-wrap:wrap;margin:.5rem 0 .8rem}.chip{background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:.3rem .75rem;cursor:pointer;font-size:.85rem;text-transform:capitalize}.chip.active{background:var(--accent);border-color:var(--accent);color:#03141f;font-weight:600}
.event-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.8rem}
.event-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:.9rem;cursor:pointer;transition:.15s}.event-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.ec-head{display:flex;justify-content:space-between;gap:.5rem;align-items:flex-start}.ec-meta{margin:.3rem 0}
.ec-nums{display:grid;grid-template-columns:repeat(5,1fr);gap:.3rem;font-size:.8rem}.ec-nums div{display:flex;flex-direction:column}.ec-nums span{font-size:.68rem;text-transform:uppercase;letter-spacing:.03em}.ec-nums b{font-variant-numeric:tabular-nums}
.status{font-size:.72rem;text-transform:capitalize;padding:.15rem .5rem;border-radius:999px;border:1px solid var(--line);white-space:nowrap}
.status.upcoming{color:var(--blue);border-color:rgba(56,189,248,.4)}.status.completed{color:var(--green);border-color:rgba(52,211,153,.4)}.status.cancelled{color:var(--muted)}
.status-sel{width:auto;text-transform:capitalize}.status-sel.upcoming{color:var(--blue)}.status-sel.completed{color:var(--green)}
.empty{text-align:center;padding:3rem 1rem;color:var(--muted)}
.detail-head{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:flex-start}.detail-actions{display:flex;gap:.4rem;flex-wrap:wrap}
.inline-form{display:flex;gap:.45rem;flex-wrap:wrap;margin:.5rem 0}.inline-form input,.inline-form select{flex:1 1 130px;width:auto}.inline-form input[type=date]{flex:0 1 150px}.inline-form input[type=number]{flex:0 1 140px}.inline-form button{flex:0 0 auto}
.quick{margin:-.2rem 0 .5rem}
.tbl{width:100%;border-collapse:collapse;margin-top:.5rem;font-size:.9rem}.tbl th{text-align:left;font-weight:600;color:var(--muted);font-size:.75rem;text-transform:uppercase;padding:.3rem .4rem;border-bottom:1px solid var(--line)}.tbl td{padding:.45rem .4rem;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}.tbl tr:last-child td{border-bottom:none}.tbl.small{font-size:.82rem}.tbl.small td{padding:.3rem .4rem}
.payable{border:1px solid var(--line);border-radius:12px;padding:.8rem;margin:.6rem 0;background:var(--panel2)}.payable.settled{opacity:.7}
.pb-head{display:flex;justify-content:space-between;gap:.8rem}.pb-actions{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.4rem}.pay-part{background:var(--panel);padding:.6rem;border-radius:10px}
.vendor-chips{display:flex;gap:.4rem;flex-wrap:wrap}.vchip{background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:.3rem .7rem;font-size:.85rem}.vchip b{margin-right:.3rem}
.toggle{display:flex;align-items:center;gap:.4rem;margin:0;font-size:.85rem}.toggle input{width:auto}
textarea{resize:vertical}

/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center;z-index:40;padding:0}
.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:20px 20px 0 0;width:100%;max-width:640px;max-height:92vh;overflow:auto;padding:1.2rem}
@media(min-width:640px){.modal{align-items:center;padding:1rem}.modal-card{border-radius:20px}}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 .8rem}.form-grid .span2{grid-column:1/-1}.row-btns{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.4rem}
.form label{margin-bottom:.6rem}

/* mobile */
@media(max-width:640px){
  main{padding:.8rem;padding-bottom:5.5rem}
  .tabs{position:fixed;top:auto;bottom:0;left:0;right:0;border-top:1px solid var(--line);border-bottom:none;padding:.3rem .2rem calc(.3rem + env(safe-area-inset-bottom));justify-content:space-around;background:rgba(11,18,32,.95);backdrop-filter:blur(12px)}
  .tab{flex-direction:column;gap:.1rem;font-size:.65rem;padding:.3rem .5rem;border-bottom:none;flex:1}.tab.active{color:var(--blue)}
  .badge{top:-2px;right:6px}
  .fab{bottom:5rem}.toast{bottom:6rem}
  .form-grid{grid-template-columns:1fr}
  .ec-nums{grid-template-columns:repeat(3,1fr)}
  .stats{grid-template-columns:1fr 1fr}
  .inline-form input,.inline-form select{flex:1 1 45%}.inline-form button{flex:1 1 100%}
  .detail-actions .btn{flex:1}
}

/* client statement */
.check-list{display:flex;flex-direction:column;gap:.3rem;max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:.5rem;background:var(--panel2)}
.check{display:flex;align-items:center;gap:.5rem;margin:0;color:var(--text);font-size:.9rem;cursor:pointer}.check input{width:auto;flex:none}.check>span:nth-child(2){flex:1}
.stmt-totals{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:.6rem}.stmt-totals div{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:.45rem .6rem;display:flex;flex-direction:column}.stmt-totals b{font-variant-numeric:tabular-nums}
.stmt-ok{margin-top:.8rem;border:1px solid rgba(52,211,153,.4);background:rgba(52,211,153,.08);border-radius:12px;padding:.7rem}
.setup-steps li{margin:.35rem 0}.btn.small.primary{font-size:.85rem}
a.btn{text-decoration:none;display:inline-block}
@media(max-width:640px){.stmt-totals{grid-template-columns:1fr 1fr}}

/* processing + multi-line payables */
.payable.processing{border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.05)}
.proc-tag{margin-top:.3rem;font-size:.85rem;color:var(--amber)}
.progress{position:relative}.proc-bar{position:absolute;top:0;height:100%;background:repeating-linear-gradient(45deg,var(--amber),var(--amber) 4px,rgba(251,191,36,.35) 4px,rgba(251,191,36,.35) 8px);border-radius:4px}
.vgroup{margin:.4rem 0 1rem}.vgroup-head{display:flex;align-items:center;gap:.7rem;padding:.4rem .2rem;border-bottom:2px solid var(--line);margin-bottom:.2rem}.vgroup-head .right{margin-left:auto;text-align:right}
.proc-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;flex-wrap:wrap;margin-bottom:.6rem}.proc-total{font-size:1.5rem;font-weight:800;color:var(--amber);font-variant-numeric:tabular-nums}
.proc-tbl td.nowrap{white-space:nowrap}.proc-tbl tr.total td{border-top:2px solid var(--line);background:var(--panel2)}
.pay-row{display:grid;grid-template-columns:1.6fr 1fr 1.3fr 1.1fr 1fr 1fr 28px;gap:.35rem;align-items:center;margin-bottom:.35rem}.pay-row input,.pay-row select{padding:.45rem .5rem;font-size:.88rem}
.pay-row.head{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:.2rem}
.radio-cards{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.7rem}.radio-card{display:flex;gap:.6rem;align-items:center;border:1px solid var(--line);border-radius:12px;padding:.6rem .8rem;cursor:pointer;color:var(--text);margin:0;background:var(--panel2)}.radio-card.active{border-color:var(--accent);box-shadow:0 0 0 3px rgba(14,165,233,.2)}.radio-card input{width:auto;flex:none}
@media(max-width:700px){.pay-row{grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:10px;padding:.5rem;position:relative;padding-right:2.2rem}.pay-row.head{display:none}.pay-row .row-del{position:absolute;right:.3rem;top:.5rem}.pay-row [name=desc]{grid-column:1/-1}}
@media(max-width:640px){.proc-tbl thead{display:none}.proc-tbl td{display:block;padding:.2rem .3rem;text-align:left!important}.proc-tbl tr{display:block;border-bottom:1px solid var(--line);padding:.4rem 0}.proc-tbl tr.total td{border-top:none}}
.qrow{display:grid;grid-template-columns:1fr 90px 90px 28px;gap:.4rem;align-items:center;margin-bottom:.4rem}.qrow[data-ap]{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
@media(max-width:520px){.qrow:not([data-ap]){grid-template-columns:1fr 1fr 28px}.qrow:not([data-ap]) input:first-child{grid-column:1/-1}}