:root{
  --bg:#0f172a; --card:#1e293b; --card2:#263449; --line:#334155;
  --text:#e2e8f0; --muted:#94a3b8; --green:#22c55e; --red:#ef4444; --amber:#f59e0b;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
#app{max-width:520px;margin:0 auto;padding:16px 14px 60px}
.hidden{display:none!important}

.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}

/* login */
.screen{min-height:70vh;display:flex;align-items:center;justify-content:center}
.login-card{width:100%;text-align:center}
.logo{font-size:44px}
h1{font-size:24px;margin:.3em 0 0}
.sub{color:var(--muted);margin-top:4px;font-size:14px}
#pin{width:100%;padding:16px;font-size:26px;text-align:center;letter-spacing:10px;
  border-radius:12px;border:1px solid var(--line);background:var(--card2);color:var(--text);
  margin:18px 0 12px;outline:none}
.msg{min-height:18px;font-size:13px;color:var(--amber);margin:8px 0 0}

/* header */
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.who{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
h2{margin:2px 0 0;font-size:20px}
.badge{background:var(--card2);border:1px solid var(--line);padding:4px 10px;border-radius:20px;
  font-size:12px;color:var(--muted)}

.strip{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;font-size:14px;margin-bottom:12px}
.strip b{color:var(--green)}
.strip .warn{color:var(--amber)}

/* task cards */
.task{display:flex;align-items:center;gap:14px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px}
.task .ico{font-size:26px;width:44px;height:44px;flex:0 0 44px;display:flex;align-items:center;
  justify-content:center;background:var(--card2);border-radius:12px}
.task .body{flex:1}
.task .nm{font-size:15px;line-height:1.3}
.task .sch{font-size:12px;color:var(--muted);margin-top:3px}
.prio{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;margin-top:6px}
.prio.Tinggi{background:#450a0a;color:#fca5a5;border:1px solid #7f1d1d}
.prio.Sedang{background:#451a03;color:#fcd34d;border:1px solid #78350f}
.prio.Rendah{background:#022c22;color:#6ee7b7;border:1px solid #064e3b}
.task .act{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;align-items:stretch}
.task .act button{border:none;border-radius:10px;padding:10px 12px;font-size:13px;color:#fff;cursor:pointer}
.task.done{opacity:.72}
.task.done .act button.btn-ok{background:var(--green)}
.task .donechip{background:var(--green);border-radius:8px;padding:6px 10px;font-size:12px;text-align:center}

/* buttons */
.btn{border:none;border-radius:12px;padding:14px;font-size:15px;cursor:pointer;width:100%;margin-top:10px;color:#fff}
.btn.primary{background:#2563eb}
.btn.secondary{background:var(--card2);border:1px solid var(--line)}
.btn.big{padding:16px}
.btn.warn{background:#b45309}
.btn.ok{background:var(--green)}
.btn-ok{background:var(--green)}
.btn-blem{background:#b45309}
.btn:disabled{opacity:.6}

/* modal */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;
  justify-content:center;z-index:50;padding:16px}
.modal{width:100%;position:relative}
.modal .x{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--muted);
  font-size:20px;cursor:pointer}
.preview{width:100%;border-radius:12px;margin-top:12px;max-height:60vh;object-fit:contain;background:#000}
textarea{width:100%;padding:12px;border-radius:12px;border:1px solid var(--line);
  background:var(--card2);color:var(--text);font-size:14px;margin-top:10px;resize:vertical;font-family:inherit}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#14532d;
  color:#fff;padding:12px 18px;border-radius:30px;font-size:14px;z-index:99;box-shadow:0 4px 20px #0006}