:root{
  --navy:#1F3A5F; --navy-deep:#16233b; --blue:#2E75B6; --blue-soft:#E4EEF7;
  --paper:#EEF2F6; --card:#FFFFFF; --line:#DCE3EC; --ink:#1c2733; --muted:#64748B;
  --todo:#64748B; --todo-bg:#EDF1F5; --prog:#2E75B6; --prog-bg:#E4EEF7;
  --wait:#B45309; --wait-bg:#FBE2CB; --done:#15803D; --done-bg:#E3F3E8;
  --dorm:#6B7280; --dorm-bg:#ECEEF1;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;line-height:1.45;padding:0 0 60px}
.wrap{max-width:860px;margin:0 auto;padding:18px 16px}
#app{display:none}
.hidden{display:none!important}
button{font-family:var(--sans)}
textarea,input,select{font-family:var(--sans)}

/* ---- login ---------------------------------------------------------*/
#login{position:fixed;inset:0;background:linear-gradient(160deg,#1F3A5F,#16233b);
  display:grid;place-items:center;z-index:50;padding:20px}
.loginbox{background:var(--card);border-radius:16px;padding:28px 26px;max-width:350px;width:100%;
  box-shadow:0 20px 50px rgba(0,0,0,.3);text-align:center}
.loginbox .mark{width:46px;height:46px;border-radius:12px;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:18px;letter-spacing:.5px;margin:0 auto 14px}
.loginbox h2{margin:0 0 4px;font-size:19px;color:var(--navy-deep)}
.loginbox p{margin:0 0 18px;font-size:12.5px;color:var(--muted)}
.loginbox input{width:100%;font-size:15px;border:1px solid var(--line);
  border-radius:9px;padding:11px 12px;margin-bottom:10px}
.loginbox input:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.loginbox button{width:100%;font-weight:700;font-size:14px;border:0;
  border-radius:9px;background:var(--navy);color:#fff;padding:12px;cursor:pointer;transition:background .15s}
.loginbox button:hover{background:var(--navy-deep)}
.loginbox button:disabled{opacity:.6;cursor:default}
.loginerr{color:#c0392b;font-size:12.5px;margin-top:10px;min-height:16px}

/* ---- top bar -------------------------------------------------------*/
.topbar{background:var(--navy);color:#fff}
.topbar .wrap{display:flex;align-items:center;gap:12px;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;letter-spacing:.3px}
.brand .mark{width:30px;height:30px;border-radius:8px;background:#fff;color:var(--navy);
  display:grid;place-items:center;font-weight:800;font-size:13px}
.brand small{display:block;font-weight:500;font-size:10.5px;opacity:.72;letter-spacing:.4px}
.spacer{flex:1}
.who{font-size:12px;opacity:.8;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logout{background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:8px;
  padding:7px 12px;font-size:12.5px;font-weight:600;cursor:pointer}
.logout:hover{background:rgba(255,255,255,.24)}

/* ---- view tabs -----------------------------------------------------*/
.tabs{display:flex;gap:6px;background:var(--card);border:1px solid var(--line);
  border-radius:11px;padding:5px;margin-bottom:16px}
.tab{flex:1;border:0;background:transparent;color:var(--muted);font-weight:700;font-size:13.5px;
  padding:9px 10px;border-radius:8px;cursor:pointer}
.tab.on{background:var(--navy);color:#fff}
.tab:not(.on):hover{background:var(--blue-soft);color:var(--navy)}

/* ---- shared add-row + buttons -------------------------------------*/
.addrow{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.addrow input{flex:1;min-width:140px;border:1px solid var(--line);border-radius:9px;
  padding:10px 12px;font-size:14px;background:var(--card)}
.addrow input.client{flex:0 0 150px;min-width:120px}
.addrow input:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.btn{border:0;border-radius:9px;background:var(--navy);color:#fff;font-weight:700;font-size:13.5px;
  padding:10px 16px;cursor:pointer;transition:background .15s;white-space:nowrap}
.btn:hover{background:var(--navy-deep)}
.btn.ghost{background:var(--card);color:var(--navy);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--blue-soft)}
.btn.ghost.on{background:var(--navy);color:#fff;border-color:var(--navy)}

.viewhead{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.viewhead h1{font-size:16px;margin:0;color:var(--navy-deep)}
.viewhead .count{font-size:12px;color:var(--muted);background:var(--card);
  border:1px solid var(--line);border-radius:20px;padding:2px 10px}

/* ---- task card -----------------------------------------------------*/
.card{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--todo);
  border-radius:12px;padding:12px 14px;margin-bottom:10px;box-shadow:0 1px 2px rgba(16,36,63,.04)}
.card.s-todo{border-left-color:var(--todo)}
.card.s-in-progress{border-left-color:var(--prog)}
.card.s-waiting{border-left-color:var(--wait)}
.card.s-done{border-left-color:var(--done)}
.card.s-dormant{border-left-color:var(--dorm)}
.card.s-done .task-text{color:var(--muted)}

.card-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.chip{font-size:11px;font-weight:700;color:var(--navy);background:var(--blue-soft);
  border-radius:20px;padding:3px 9px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip.empty{color:var(--muted);background:var(--todo-bg)}
.card-top .spacer{flex:1}

select.status{border:0;border-radius:20px;font-weight:700;font-size:12px;padding:5px 26px 5px 12px;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='currentColor' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 9px center}
select.status:focus{outline:2px solid var(--blue);outline-offset:1px}
.st-todo{color:var(--todo);background-color:var(--todo-bg)}
.st-in-progress{color:var(--prog);background-color:var(--prog-bg)}
.st-waiting{color:var(--wait);background-color:var(--wait-bg)}
.st-done{color:var(--done);background-color:var(--done-bg)}
.st-dormant{color:var(--dorm);background-color:var(--dorm-bg)}

.task-text{width:100%;border:0;background:transparent;font-size:14.5px;color:var(--ink);
  font-weight:600;resize:none;padding:2px 0;line-height:1.4;overflow:hidden}
.task-text:focus{outline:0}
.note{width:100%;border:0;background:transparent;font-size:12.5px;color:var(--muted);
  resize:none;padding:2px 0;margin-top:2px;line-height:1.4;overflow:hidden}
.note:focus{outline:0}
.note::placeholder,.task-text::placeholder{color:#aeb8c4}

.card-foot{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:11.5px;color:var(--muted)}
.stamp{color:var(--done);font-weight:600}
.reps{background:var(--done-bg);color:var(--done);border-radius:20px;padding:1px 8px;font-weight:700;
  cursor:pointer;border:0;font-size:11px}
.card-foot .spacer{flex:1}
.del{border:0;background:transparent;color:#b0b9c4;cursor:pointer;font-size:12px;padding:2px 4px}
.del:hover{color:#c0392b}

/* ---- completion log ------------------------------------------------*/
.log{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:6px 4px;margin:4px 0 16px}
.log h3{font-size:12.5px;color:var(--navy-deep);margin:8px 12px 6px}
.logrow{display:flex;gap:10px;align-items:baseline;padding:7px 12px;border-top:1px solid var(--line);font-size:12.5px}
.logrow:first-of-type{border-top:0}
.logrow .lt{color:var(--muted);font-family:var(--mono);font-size:11.5px;flex:0 0 132px}
.logrow .lx{color:var(--ink);flex:1}
.logrow .lc{color:var(--navy);font-weight:700;font-size:11px}

/* ---- SOW card ------------------------------------------------------*/
.sow{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;margin-bottom:12px;box-shadow:0 1px 2px rgba(16,36,63,.04)}
.sow .sow-client{width:100%;border:0;border-bottom:2px solid var(--blue-soft);background:transparent;
  font-size:16px;font-weight:800;color:var(--navy-deep);padding:2px 0 6px;margin-bottom:10px}
.sow .sow-client:focus{outline:0;border-bottom-color:var(--blue)}
.field{margin-bottom:10px}
.field label{display:block;font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--blue);margin-bottom:3px}
.field textarea{width:100%;border:1px solid var(--line);border-radius:9px;background:#fbfcfe;
  font-size:13.5px;color:var(--ink);padding:9px 11px;resize:vertical;min-height:44px;line-height:1.5}
.field textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue);background:#fff}
.sow-foot{display:flex;align-items:center;margin-top:4px}
.sow-foot .saved{font-size:11px;color:var(--muted)}
.sow-foot .spacer{flex:1}

/* ---- empty / toast -------------------------------------------------*/
.empty{text-align:center;color:var(--muted);font-size:13.5px;padding:34px 16px;
  background:var(--card);border:1px dashed var(--line);border-radius:12px}
.empty b{display:block;color:var(--navy-deep);font-size:14.5px;margin-bottom:4px}
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);
  background:var(--navy-deep);color:#fff;font-size:12.5px;font-weight:600;padding:9px 16px;border-radius:20px;
  opacity:0;pointer-events:none;transition:.25s;z-index:60;box-shadow:0 8px 24px rgba(0,0,0,.25)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:520px){
  .brand small{display:none}
  .addrow input.client{flex:1 1 100%}
  .logrow .lt{flex-basis:112px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}