:root{
  color-scheme: light;
  --bg:#f4f6f9; --panel:#fff; --ink:#11243b; --muted:#5c6b7e; --line:#e3e8ef;
  --brand:#1f4f82; --brand-soft:#eaf1f9;
  --done:#1f9d63; --done-bg:#e6f5ee;
  --prog:#d98a00; --prog-bg:#fdf3e1;
  --not:#6b7785; --not-bg:#eef1f4;
  --over:#d23b46; --over-bg:#fdeced;
  --shadow:0 1px 2px rgba(16,40,70,.06),0 4px 16px rgba(16,40,70,.06);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.hidden{display:none!important}
button{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:9px;padding:7px 12px;transition:.15s}
button:hover{border-color:var(--brand);color:var(--brand)}
button.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
button.primary:hover{background:#1a4470;color:#fff}
button.ghost{background:transparent}
button.danger{color:var(--over);border-color:#f0c3c6}
button.danger:hover{background:var(--over);color:#fff;border-color:var(--over)}
input,select,textarea{font:inherit;border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 10px;color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand)}
.muted{color:var(--muted)}

/* ---- login ---- */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:linear-gradient(135deg,#1f4f82 0%,#13314f 100%)}
.login-card{background:#fff;border-radius:18px;padding:30px 28px;width:340px;display:flex;flex-direction:column;gap:12px;box-shadow:0 18px 60px rgba(0,0,0,.3)}
.login-card .brand{font-size:20px;line-height:1.25;text-align:center}
.login-card .sub{font-size:12px;color:var(--muted);text-align:center;margin-bottom:6px}
.login-card button{margin-top:4px}
.login-err{color:var(--over);font-size:12.5px;min-height:16px;text-align:center}

/* ---- appbar ---- */
.appbar{background:#fff;border-bottom:1px solid var(--line);padding:10px 18px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;position:sticky;top:0;z-index:20}
.appbar-l{display:flex;align-items:center;gap:12px}
.logo{background:var(--brand);color:#fff;font-weight:700;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px}
.ttl{font-size:15px;font-weight:600;letter-spacing:-.01em}
.ttl-sub{font-size:11.5px;color:var(--muted)}
.appbar-r{display:flex;align-items:center;gap:12px}
.userbox{text-align:right}
.uname{font-size:13px;font-weight:600}
.urole{font-size:11px;color:var(--muted)}

.wrap{max-width:1280px;margin:0 auto;padding:16px 18px 70px}

/* ---- direction chips ---- */
.dirs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.dirs .chip{padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:7px}
.dirs .chip:hover{border-color:var(--brand)}
.dirs .chip.active{background:var(--brand);border-color:var(--brand);color:#fff}
.dirs .chip .n{font-weight:600;font-variant-numeric:tabular-nums}

/* ---- kpis ---- */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:14px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow)}
.kpi .v{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpi .l{font-size:11.5px;color:var(--muted);margin-top:2px}
.kpi.done .v{color:var(--done)} .kpi.prog .v{color:var(--prog)} .kpi.not .v{color:var(--not)} .kpi.over .v{color:var(--over)}
.bar{height:7px;border-radius:6px;background:var(--not-bg);overflow:hidden;margin-top:9px;display:flex}
.bar>i{display:block;height:100%}
@media(max-width:820px){.kpis{grid-template-columns:repeat(3,1fr)}}

/* ---- view tabs ---- */
.views{display:flex;gap:4px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:4px;margin-bottom:14px;width:max-content;max-width:100%;flex-wrap:wrap;box-shadow:var(--shadow)}
.views button{border:none;background:transparent;border-radius:8px;padding:7px 14px;color:var(--muted)}
.views button.active{background:var(--brand-soft);color:var(--brand);font-weight:600}

.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.toolbar input[type=search]{min-width:230px;width:auto}
.toolbar select{width:auto}

/* ---- kanban ---- */
.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:start}
@media(max-width:980px){.kanban{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.kanban{grid-template-columns:1fr}}
.col{background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);display:flex;flex-direction:column;min-height:80px}
.col h3{margin:0;font-size:12.5px;padding:11px 13px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.col h3 .c{font-variant-numeric:tabular-nums;background:var(--not-bg);color:var(--muted);border-radius:999px;padding:1px 9px;font-size:11.5px}
.col.not h3{color:var(--not)} .col.prog h3{color:var(--prog)} .col.over h3{color:var(--over)} .col.done h3{color:var(--done)}
.col.over h3 .c{background:var(--over-bg);color:var(--over)} .col.prog h3 .c{background:var(--prog-bg);color:var(--prog)} .col.done h3 .c{background:var(--done-bg);color:var(--done)}
.cards{padding:10px;display:flex;flex-direction:column;gap:9px;overflow:auto;max-height:68vh}
.card{border:1px solid var(--line);border-left:3px solid var(--not);border-radius:9px;padding:9px 10px;background:#fff;cursor:pointer;transition:.12s}
.card:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.card.over{border-left-color:var(--over)} .card.prog{border-left-color:var(--prog)} .card.done{border-left-color:var(--done)} .card.not{border-left-color:var(--not)}
.card .t{font-size:12.5px;font-weight:600;margin-bottom:5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .m{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;color:var(--muted)}
.card .who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag{font-size:10.5px;border-radius:999px;padding:1px 8px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tag.over{background:var(--over-bg);color:var(--over)} .tag.soon{background:var(--prog-bg);color:var(--prog)} .tag.ok{background:var(--not-bg);color:var(--muted)} .tag.done{background:var(--done-bg);color:var(--done)}
.dirbadge{font-size:10px;color:var(--brand);background:var(--brand-soft);border-radius:5px;padding:1px 6px;margin-bottom:5px;display:inline-block}

/* ---- timeline ---- */
.tl-wrap{background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);padding:14px;overflow:auto;max-height:74vh}
.tl-head{position:relative;height:22px;margin-left:var(--lbl);border-bottom:1px solid var(--line);margin-bottom:6px}
.tl-q{position:absolute;top:0;font-size:10.5px;color:var(--muted);border-left:1px solid var(--line);padding-left:4px;height:100%}
.tl-row{display:flex;align-items:center;height:26px}
.tl-lbl{width:var(--lbl);min-width:var(--lbl);padding-right:10px;font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.tl-lbl:hover{color:var(--brand)}
.tl-track{position:relative;flex:1;height:100%;border-left:1px dashed var(--line)}
.tl-dot{position:absolute;top:50%;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.06);cursor:pointer}
.tl-bar{position:absolute;top:50%;transform:translateY(-50%);height:6px;border-radius:4px;opacity:.5}

/* ---- tables ---- */
.tbl-wrap{background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);overflow:auto;max-height:74vh}
table{border-collapse:collapse;width:100%;font-size:12.5px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{position:sticky;top:0;background:#fafbfc;cursor:pointer;white-space:nowrap;font-size:11.5px;color:var(--muted);z-index:1}
th:hover{color:var(--brand)}
tr:hover td{background:#fafcff}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.pill{font-size:10.5px;border-radius:999px;padding:2px 9px;white-space:nowrap}
.pill.done{background:var(--done-bg);color:var(--done)} .pill.prog{background:var(--prog-bg);color:var(--prog)} .pill.not{background:var(--not-bg);color:var(--not)} .pill.over{background:var(--over-bg);color:var(--over)}
.chartbox{background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);padding:14px;margin-bottom:14px;height:360px}
.linknm{color:var(--brand);cursor:pointer}
.linknm:hover{text-decoration:underline}
.empty{padding:34px;text-align:center;color:var(--muted)}

/* ---- modal ---- */
.ovl{position:fixed;inset:0;background:rgba(16,30,50,.45);display:none;align-items:center;justify-content:center;padding:18px;z-index:50}
.ovl.open{display:flex}
.modal{background:#fff;border-radius:16px;max-width:680px;width:100%;max-height:88vh;overflow:auto;box-shadow:0 12px 48px rgba(0,0,0,.25)}
.modal .mh{padding:16px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:1}
.modal .mb{padding:16px 18px}
.modal h2{font-size:15px;margin:6px 0 0}
.modal .x{position:absolute;right:14px;top:12px;border:none;background:var(--not-bg);border-radius:8px;width:30px;height:30px;padding:0}
.frow{margin:12px 0}
.frow .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
.modal .actions{display:flex;justify-content:space-between;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.doc{display:inline-block;background:var(--brand-soft);color:var(--brand);border-radius:6px;padding:2px 8px;margin:2px 4px 2px 0;font-size:11.5px}
.history{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.history h4{margin:0 0 8px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.hitem{font-size:12px;padding:6px 0;border-bottom:1px dashed var(--line);color:var(--muted)}
.hitem b{color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips label{display:flex;align-items:center;gap:5px;font-size:12px;border:1px solid var(--line);border-radius:8px;padding:4px 8px;cursor:pointer}
.chips input{width:auto}

/* ---- toast ---- */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:#11243b;color:#fff;padding:10px 18px;border-radius:10px;font-size:13px;opacity:0;pointer-events:none;transition:.25s;z-index:80;box-shadow:0 8px 30px rgba(0,0,0,.3)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--over)}

/* card subtask progress */
.cardprog{display:flex;align-items:center;gap:7px;margin:2px 0 6px}
.cardprog .bar{flex:1;height:5px;margin-top:0}
.cardprog span{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}

/* subtasks block in modal */
.subsblock{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.subhdr h4{margin:0 0 8px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.subhdr h4 .muted{text-transform:none;letter-spacing:0}
.subprog{margin-bottom:10px}
.subprog .bar{height:7px;margin-top:0}
.sublist{display:flex;flex-direction:column;gap:7px;margin-bottom:10px}
.subrow{border:1px solid var(--line);border-radius:9px;padding:8px 10px;background:#fff}
.substatus{font-size:10.5px;border-radius:999px;padding:3px 10px;border:none;white-space:nowrap;min-width:92px;text-align:center}
.substatus.not{background:var(--not-bg);color:var(--not)} .substatus.prog{background:var(--prog-bg);color:var(--prog)} .substatus.done{background:var(--done-bg);color:var(--done)}
.substatus:not([disabled]){cursor:pointer}
.substatus:not([disabled]):hover{filter:brightness(.95);box-shadow:0 0 0 2px rgba(31,79,130,.15)}
.subtitle{font-size:12.5px;font-weight:500}
.submeta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:4px}
.subdel{border:none;background:transparent;color:var(--muted);width:26px;height:26px;border-radius:7px;padding:0}
.subdel:hover{background:var(--over-bg);color:var(--over)}
.subadd{border:1px dashed var(--brand);border-radius:10px;padding:10px;background:#fcfdff;display:flex;flex-direction:column;gap:8px}
.subadd-row{display:grid;grid-template-columns:1fr 1fr auto auto;gap:8px}
.subadd-row button{padding:8px 14px}
@media(max-width:560px){.subadd-row{grid-template-columns:1fr 1fr}}

/* projects view */
.projgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.projcard{background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);padding:13px 14px;cursor:pointer;transition:.12s}
.projcard:hover{border-color:var(--brand);transform:translateY(-1px)}
.projname{font-weight:600;font-size:13.5px;margin:6px 0 10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.projbar2{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.projbar2 .bar{flex:1;height:7px;margin-top:0}
.projbar2 span{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.projmeta{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.projmeta .pill{min-width:26px;text-align:center}

/* task card project label */
.cardproj{display:block;font-size:10.5px;color:var(--brand);background:var(--brand-soft);border-radius:5px;padding:1px 6px;margin-bottom:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* modal breadcrumb */
.modal .crumb{font-size:11.5px;color:var(--muted);margin-bottom:4px}
.modal .crumb b{color:var(--brand)}

/* executors editor */
.lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:12px 0 5px}
.execblock{margin-top:4px}
.execrow{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin-bottom:6px}
.execrow input{width:100%}
.co-del{border:1px solid var(--line);background:#fff;color:var(--muted);width:34px;border-radius:8px;padding:0}
.co-del:hover{background:var(--over-bg);color:var(--over);border-color:#f0c3c6}
.addco{font-size:12px;color:var(--brand);border:1px dashed var(--brand);border-radius:8px;padding:6px 10px;background:#fcfdff}
.srcorgs{font-size:11.5px;color:var(--muted);background:var(--not-bg);border-radius:8px;padding:7px 10px;margin-top:10px}

/* subtask rows v2 */
.subline{display:grid;grid-template-columns:auto 1fr auto auto;gap:8px;align-items:center}
.subedit,.subdel{border:none;background:transparent;color:var(--muted);width:28px;height:28px;border-radius:7px;padding:0}
.subedit:hover{background:var(--brand-soft);color:var(--brand)}
.subdel:hover{background:var(--over-bg);color:var(--over)}
.subedit-form{margin-top:8px}
.subedit-form.open{border-top:1px dashed var(--line);padding-top:10px}
.addsub-btn{font-size:12.5px;color:var(--brand);border:1px dashed var(--brand);border-radius:9px;padding:8px;background:#fcfdff;width:100%;margin-top:4px}
.subadd{border:1px solid var(--line);border-radius:10px;padding:10px;background:#fafbfc;margin-top:8px}
.chips{display:flex;flex-wrap:wrap;gap:6px}

/* users */
.uadd{background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);padding:16px;margin-bottom:14px}
.uadd h3{margin:0 0 12px;font-size:14px}