:root{--bg:#f3f4f6;--card:#fff;--text:#111827;--muted:#6b7280;--primary:#2563eb;--danger:#dc2626;--ok:#16a34a;--line:#e5e7eb}
@media (prefers-color-scheme:dark){:root{--bg:#0f172a;--card:#1e293b;--text:#f1f5f9;--muted:#94a3b8;--line:#334155}}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);font-size:16px}
.hidden{display:none!important}
header{display:flex;align-items:baseline;gap:12px;padding:12px 16px;background:var(--primary);color:#fff}
header h1{margin:0;font-size:1.15rem}
header .muted{color:#dbeafe;font-size:.8rem}
main{max-width:760px;margin:0 auto;padding:12px 12px 90px}
nav#tabs{position:fixed;bottom:0;left:0;right:0;display:flex;background:var(--card);border-top:1px solid var(--line)}
nav#tabs button{flex:1;padding:12px 2px;border:0;background:none;color:var(--muted);font-size:.78rem;cursor:pointer}
nav#tabs button.active{color:var(--primary);font-weight:700;border-top:3px solid var(--primary);padding-top:9px}
h2{font-size:1.05rem;margin:18px 0 8px}
.card{background:var(--card);border-radius:12px;padding:14px;margin:8px 0;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.grow{flex:1;min-width:0}
.muted{color:var(--muted);font-size:.88rem}
.err{color:var(--danger);min-height:1.2em}
.item-title{font-weight:600;overflow-wrap:anywhere}
.overdue{color:var(--danger);font-weight:600}
input,textarea,select{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);font:inherit;margin:4px 0}
textarea{min-height:260px;resize:vertical}
label{font-size:.85rem;color:var(--muted);display:block;margin-top:8px}
.btn{padding:9px 14px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--text);font:inherit;cursor:pointer}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.danger{color:var(--danger)}
.btn.small{padding:6px 10px;font-size:.85rem}
.login-card{max-width:340px;margin:20vh auto 0}
.login-card h1{margin:0 0 4px}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:flex-start;justify-content:center;padding:16px;overflow:auto;z-index:50}
#ring{z-index:60;background:rgba(30,0,0,.75)}
#modal{z-index:70}
.sheet{background:var(--card);border-radius:14px;padding:16px;width:100%;max-width:460px;margin-top:8vh}
.ringcard{border:2px solid var(--danger);animation:pulse 1s infinite alternate}
@keyframes pulse{from{box-shadow:0 0 0 0 rgba(220,38,38,.6)}to{box-shadow:0 0 0 10px rgba(220,38,38,0)}}
.toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);background:#111827;color:#fff;padding:10px 16px;border-radius:20px;z-index:80;max-width:90%}
.tag{display:inline-block;padding:1px 8px;border-radius:10px;background:var(--line);font-size:.75rem;margin-left:6px}
a{color:var(--primary)}