:root{--bg:#f5f6f8;--card:#fff;--tx:#1d2433;--mu:#6b7385;--bd:#e3e6ec;--pr:#1f6f78;--gr:#1e9e5a;--bl:#2b6cd8;--gy:#8a92a3;--rd:#d64545;--am:#d98a14}@media(prefers-color-scheme:dark){:root{--bg:#12161d;--card:#1b212b;--tx:#e8ebf1;--mu:#9aa3b5;--bd:#2a3240;--pr:#4fb3bf}}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--tx);font-family:Segoe UI,Tahoma,Arial,sans-serif;font-size:15px}header{background:var(--pr);color:#fff;padding:12px 16px;font-weight:700;display:flex;justify-content:space-between;align-items:center}header button{background:none;border:1px solid #fff8;color:#fff;border-radius:6px;padding:4px 12px;cursor:pointer;font:inherit}nav{display:flex;gap:6px;padding:10px 12px;overflow-x:auto}nav button{border:1px solid var(--bd);background:var(--card);color:var(--tx);padding:9px 16px;border-radius:8px;font:inherit;cursor:pointer;white-space:nowrap}nav button.on{background:var(--pr);color:#fff;border-color:var(--pr)}main{padding:4px 12px 24px;max-width:1100px;margin:auto}.card{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:14px;margin-bottom:12px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.stat b{display:block;font-size:26px}.stat span{color:var(--mu);font-size:13px}h3{margin:0 0 10px;font-size:16px}.b{display:inline-block;padding:2px 10px;border-radius:99px;font-size:12px;color:#fff}.upcoming{background:var(--bl)}.in_progress{background:var(--am)}.completed{background:var(--gy)}.paid{background:var(--gr)}.partial{background:var(--am)}.unpaid{background:var(--gy)}.late{background:var(--rd)}.soon{background:var(--gr);margin-inline-start:6px}.wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:760px}th,td{padding:9px 8px;border-bottom:1px solid var(--bd);text-align:start;font-size:14px}th{color:var(--mu);font-weight:600}input,select,textarea{width:100%;padding:9px;border:1px solid var(--bd);border-radius:8px;background:var(--bg);color:var(--tx);font:inherit}label{font-size:13px;color:var(--mu);display:block;margin-bottom:4px}.f{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}.bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.bar>*{flex:1 1 150px}.btn{background:var(--pr);color:#fff;border:0;padding:10px 18px;border-radius:8px;font:inherit;cursor:pointer}.sm{background:none;border:1px solid var(--pr);color:var(--pr);padding:3px 10px;border-radius:6px;cursor:pointer;font:inherit;font-size:13px}.chk{display:flex;flex-wrap:wrap;gap:12px}.chk label{color:var(--tx);display:flex;gap:6px;align-items:center;margin:0}.chk input{width:auto}.pay{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:8px}.sum{display:flex;gap:16px;flex-wrap:wrap;font-weight:700}.err{color:var(--rd);margin:8px 0}.login{max-width:360px;margin:12vh auto;padding:0 12px}.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#0008;display:flex;align-items:center;justify-content:center;padding:16px}.modal>div{background:var(--card);border-radius:12px;padding:18px;max-width:460px;width:100%;max-height:80vh;overflow:auto}.pre{white-space:pre-wrap;line-height:1.7}.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.chip{background:var(--bg);border:1px solid var(--bd);border-radius:99px;padding:4px 12px;font-size:13px}.danger{border-color:var(--rd);color:var(--rd)}.flag{background:none;border:0;cursor:pointer;font-size:16px;margin-inline-start:6px;padding:0}.flag img{width:25px;height:25px;vertical-align:middle;display:inline-block}.hbtns{display:flex;gap:8px;align-items:center}header .bell{position:relative;width:44px;height:32px;padding:0;border:0;background:none;display:flex;align-items:center;justify-content:center;flex-shrink:0}.bell img{height:36px;width:auto;max-width:none;flex-shrink:0;object-fit:contain;display:block;margin:-2px 0}.badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:#e5484d;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}.badge.in{position:static;display:inline-flex;margin-inline-start:8px}.ring .badge{animation:pulse 1.4s infinite}@keyframes pulse{0%{box-shadow:0 0 #e5484dbb}70%{box-shadow:0 0 0 8px #e5484d00}to{box-shadow:0 0 #e5484d00}}.drawer-bg{position:fixed;top:0;right:0;bottom:0;left:0;background:#000a;z-index:50}.drawer{position:absolute;top:0;bottom:0;left:0;width:min(400px,92vw);background:#1a0f12;color:#fff;border-right:3px solid #e5484d;display:flex;flex-direction:column;padding:16px;animation:slide .2s ease-out}@keyframes slide{0%{transform:translate(-100%)}to{transform:none}}.drawer-head{display:flex;justify-content:space-between;align-items:center}.drawer-head h3{margin:0;font-size:18px;color:#fff;display:flex;align-items:center}.drawer .x,.readall{background:none;border:1px solid #fff5;color:#fff;border-radius:8px;padding:6px 12px;cursor:pointer;font:inherit}.readall{margin-top:12px;align-self:flex-start}.alist{margin-top:12px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;flex:1}.alert{border-radius:10px;padding:12px;border:1px solid #fff2;border-inline-start:5px solid;background:#2a1a1e;cursor:pointer}.alert p{margin:4px 0;font-size:14px;opacity:.9}.alert small{opacity:.7}.alert.urgent{border-color:#ff4d4f;background:#3a1519}.alert.today{border-color:#f5a524}.alert.message{border-color:#9b7cf6}.alert.info{border-color:#3fb6c4}.alert.seen{opacity:.5}.alert-top{display:flex;justify-content:space-between;margin-bottom:6px}.tag{font-size:11px;padding:2px 8px;border-radius:99px;background:#fff2}.dot{width:9px;height:9px;border-radius:50%;background:#ff4d4f}.empty{opacity:.7;text-align:center;margin-top:30px}.sendbox{margin-top:12px;padding:10px;border:1px dashed #fff4;border-radius:10px;display:flex;flex-direction:column;gap:8px}.sendbox select,.sendbox textarea{background:#2a1a1e;color:#fff;border:1px solid #fff3}.sendbox .btn{align-self:flex-start}.rem{display:flex;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--bd)}.rem span{flex:1}.rem.done span{text-decoration:line-through;opacity:.5}.remadd{display:grid;grid-template-columns:160px 1fr auto;gap:8px;margin-top:8px}@media(max-width:600px){.remadd{grid-template-columns:1fr}}.toasts{position:fixed;top:12px;left:50%;transform:translate(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;width:min(420px,94vw)}.toast{background:#1a0f12;color:#fff;border-radius:12px;padding:12px 14px;border:1px solid #fff2;border-inline-start:6px solid #9b7cf6;box-shadow:0 8px 30px #000a;cursor:pointer;animation:drop .25s ease-out}.toast.urgent{border-color:#ff4d4f;background:#3a1519}.toast p{margin:4px 0 0;font-size:14px;opacity:.9}@keyframes drop{0%{transform:translateY(-20px);opacity:0}to{transform:none;opacity:1}}.daysum{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(440px,94vw);max-height:84vh;overflow:auto;background:#1a0f12;color:#fff;border-radius:14px;border:2px solid #e5484d;padding:16px;display:flex;flex-direction:column;gap:10px}.daysum h3{margin:0;color:#fff}.sumbtns{display:flex;gap:8px;margin-top:4px}.daysum .x{background:none;border:1px solid #fff5;color:#fff;border-radius:8px;padding:6px 12px;cursor:pointer;font:inherit}
