:root {
  --bg: #ffffff;
  --side: #fcfaf8;
  --side-hover: #f2efed;
  --side-active: #ffefe5;
  --text: #202020;
  --muted: #6f6f6f;
  --faint: #9a9a9a;
  --line: #ececec;
  --line-soft: #f3f3f3;
  --card: #ffffff;
  --input: #ffffff;
  --accent: #dc4c3e;
  --accent-ink: #b63a2e;
  --accent-soft: #fdeceb;
  --p1: #d1453b;
  --p2: #eb8909;
  --p3: #246fe0;
  --p4: #b0b0b0;
  --late: #d1453b;
  --today: #058527;
  --soon: #ad6200;
  --week: #692fc2;
  --wa: #128c7e;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.08);
  --radius: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1e1e1e; --side: #262626; --side-hover: #303030; --side-active: #3a2a26;
    --text: #ececec; --muted: #a8a8a8; --faint: #7a7a7a; --line: #333; --line-soft: #2b2b2b;
    --card: #262626; --input: #2b2b2b; --accent: #e8665a; --accent-ink: #f08a80; --accent-soft: #3b2522;
    --p4: #6b6b6b; --late: #ff7066; --today: #3fbf62; --soon: #e0a040; --week: #a685ff; --wa: #3cc4b2;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1e1e1e; --side: #262626; --side-hover: #303030; --side-active: #3a2a26;
  --text: #ececec; --muted: #a8a8a8; --faint: #7a7a7a; --line: #333; --line-soft: #2b2b2b;
  --card: #262626; --input: #2b2b2b; --accent: #e8665a; --accent-ink: #f08a80; --accent-soft: #3b2522;
  --p4: #6b6b6b; --late: #ff7066; --today: #3fbf62; --soon: #e0a040; --week: #a685ff; --wa: #3cc4b2;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.4);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------- login */
.login {
  min-height: 100vh; display: grid; place-items: center; padding: 16px;
  background: var(--side);
}
.login-card {
  width: 100%; max-width: 380px; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 28px; box-shadow: var(--shadow);
}
.login-card .brand { margin-bottom: 18px; }
.login-card h1 { font-size: 20px; margin: 0 0 6px; }
.login-card p { color: var(--muted); margin: 0 0 18px; }
.login-card label { display: block; font-weight: 600; margin-bottom: 6px; }
.login-card .row { display: flex; gap: 8px; }
.login-card .note { margin-top: 14px; font-size: 13px; }
.login-card .msg { margin-top: 14px; padding: 10px 12px; border-radius: 8px; background: var(--side); color: var(--text); }
.login-card .msg.err { background: var(--accent-soft); color: var(--accent-ink); }
.linkish { background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; font-size: 13px; }

/* ---------------- layout */
.app { display: flex; min-height: 100vh; }
.side {
  width: 272px; flex: none; background: var(--side); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 14px 10px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 16px; padding: 6px 8px 14px; }
.brand .logo { width: 26px; height: 26px; border-radius: 7px; background: var(--accent); display: grid; place-items: center; color: #fff; }
.brand .logo svg { width: 16px; height: 16px; stroke-width: 2.4; }
.nav { display: flex; flex-direction: column; gap: 1px; }
.nav button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 6px;
  background: none; text-align: left; color: var(--text);
}
.nav button:hover { background: var(--side-hover); }
.nav button.on { background: var(--side-active); color: var(--accent-ink); font-weight: 600; }
.nav button .count { margin-left: auto; color: var(--faint); font-size: 12px; font-weight: 400; }
.nav button .count.late { color: var(--late); font-weight: 600; }
.nav-title { font-size: 12px; font-weight: 600; color: var(--muted); padding: 16px 8px 6px; letter-spacing: .02em; }
.side-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.side .who { font-size: 12px; color: var(--muted); padding: 8px 8px 0; }

.main { flex: 1; min-width: 0; display: flex; justify-content: center; }
.content { width: 100%; max-width: 860px; padding: 28px 40px 120px; }
.topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.topbar h1 { font-size: 22px; margin: 0; letter-spacing: -.01em; }
.sub { color: var(--muted); margin: 0 0 18px; font-size: 13px; }
.menu-btn { display: none; border: 0; background: none; padding: 6px; border-radius: 6px; margin-left: -6px; }
.menu-btn:hover { background: var(--side-hover); }
.refresh { margin-left: auto; color: var(--faint); font-size: 12px; }

.alert { background: var(--accent-soft); color: var(--accent-ink); border-radius: 8px; padding: 9px 12px; margin-bottom: 14px; font-size: 13px; font-weight: 600; }

/* ---------------- team cards */
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 6px 0 22px; }
.tcard {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: var(--card);
  text-align: left; display: flex; flex-direction: column; gap: 10px; transition: border-color .15s, box-shadow .15s;
}
.tcard:hover { border-color: var(--faint); box-shadow: var(--shadow); }
.tcard-head { display: flex; align-items: center; gap: 9px; }
.tcard-head b { font-size: 15px; }
.tcard-head .dot { margin-left: auto; font-size: 11px; color: var(--faint); display: flex; align-items: center; gap: 5px; }
.tcard-head .dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--p4); }
.tcard-head .dot.ok { color: var(--wa); }
.tcard-head .dot.ok::before { background: var(--wa); }
.tnums { display: flex; gap: 14px; }
.tnums div { display: flex; flex-direction: column; }
.tnums strong { font-size: 20px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tnums span { font-size: 11px; color: var(--muted); }
.tnums .bad strong { color: var(--late); }
.tnums .good strong { color: var(--today); }

.avatar {
  width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  font-size: 11px; font-weight: 700; color: #fff; background: var(--p3);
}
.avatar.sm { width: 18px; height: 18px; font-size: 9.5px; }

/* ---------------- lists */
.section { margin-bottom: 22px; }
.section-head {
  display: flex; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line);
  font-weight: 700; font-size: 14px;
}
.section-head .n { color: var(--faint); font-weight: 400; font-size: 12px; }
.section-head.late { color: var(--late); }
.section-head .act { margin-left: auto; font-weight: 400; }
.empty { color: var(--muted); padding: 40px 0; text-align: center; }
.empty .big { font-size: 34px; display: block; margin-bottom: 6px; }

.task {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 2px 10px 0; border-bottom: 1px solid var(--line-soft);
  cursor: pointer; position: relative;
}
.task:hover .task-title { color: var(--text); }
.task:hover { background: linear-gradient(90deg, transparent, var(--line-soft) 30%, var(--line-soft) 70%, transparent); }
.check {
  width: 19px; height: 19px; border-radius: 50%; border: 1.6px solid var(--p4); background: none; flex: none;
  margin-top: 1px; display: grid; place-items: center; padding: 0; color: transparent; transition: background .12s;
}
.check svg { width: 11px; height: 11px; stroke-width: 3; }
.check:hover { color: var(--p4); }
.check.p1 { border-color: var(--p1); background: color-mix(in srgb, var(--p1) 10%, transparent); }
.check.p1:hover { color: var(--p1); }
.check.p2 { border-color: var(--p2); background: color-mix(in srgb, var(--p2) 10%, transparent); }
.check.p2:hover { color: var(--p2); }
.check.p3 { border-color: var(--p3); background: color-mix(in srgb, var(--p3) 10%, transparent); }
.check.p3:hover { color: var(--p3); }
.check.done { background: var(--faint); border-color: var(--faint); color: #fff; }
.task.closing { opacity: .4; transition: opacity .5s; }
.task.closing .task-title { text-decoration: line-through; }
.task-body { flex: 1; min-width: 0; }
.task-title { overflow-wrap: anywhere; }
.task.is-done .task-title { color: var(--muted); text-decoration: line-through; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 3px; font-size: 12px; color: var(--muted); }
.meta span { display: inline-flex; align-items: center; gap: 4px; }
.meta svg.i { width: 13px; height: 13px; }
.due.late { color: var(--late); font-weight: 600; }
.due.today { color: var(--today); }
.due.soon { color: var(--soon); }
.due.week { color: var(--week); }
.wa { color: var(--wa); }
.task-right { display: flex; align-items: center; gap: 8px; color: var(--faint); font-size: 12px; padding-top: 1px; }
.notes-preview { font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------- quick add */
.add-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 0; color: var(--muted); border: 0; background: none; width: 100%;
  text-align: left;
}
.add-row .plus { width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); }
.add-row:hover { color: var(--accent); }
.add-row:hover .plus { background: var(--accent); color: #fff; }
.editor { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin: 6px 0 14px; background: var(--card); box-shadow: var(--shadow); }
.editor input.title { width: 100%; border: 0; outline: 0; background: none; font-size: 15px; font-weight: 600; padding: 4px 0; }
.editor textarea.desc { width: 100%; border: 0; outline: 0; background: none; resize: vertical; min-height: 22px; padding: 2px 0 8px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.field-chip {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px;
  font-size: 12.5px; color: var(--muted); background: var(--input);
}
.field-chip input, .field-chip select { border: 0; outline: 0; background: none; font-size: 12.5px; padding: 1px 0; color: var(--text); }
.field-chip input[type="time"] { width: 92px; }
.editor-foot { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; }
.toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); cursor: pointer; user-select: none; }
.toggle input { accent-color: var(--wa); width: 15px; height: 15px; }
.spacer { flex: 1; }

.btn {
  border: 1px solid var(--line); background: var(--card); padding: 7px 12px; border-radius: 7px; font-weight: 600; font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.btn:hover { background: var(--side-hover); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-ink); }
.btn.primary:disabled { opacity: .5; cursor: default; }
.btn.danger { color: var(--late); }
.btn.ghost { border-color: transparent; background: none; }
.btn.ghost:hover { background: var(--side-hover); }
input.text, select.text, textarea.text {
  border: 1px solid var(--line); background: var(--input); border-radius: 8px; padding: 9px 11px; width: 100%; outline: 0;
}
input.text:focus, select.text:focus, textarea.text:focus { border-color: var(--faint); }

/* ---------------- detail panel */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.25); z-index: 40; }
.detail {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100%); background: var(--card); z-index: 50;
  box-shadow: var(--shadow); border-left: 1px solid var(--line); display: flex; flex-direction: column;
  animation: slide .18s ease-out;
}
@keyframes slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.detail-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.detail-head .x { margin-left: auto; }
.detail-body { padding: 18px 20px 30px; overflow-y: auto; flex: 1; }
.detail-title { display: flex; gap: 12px; align-items: flex-start; }
.detail-title textarea {
  flex: 1; border: 0; outline: 0; resize: none; font-size: 18px; font-weight: 700; background: none; padding: 0; line-height: 1.35;
  overflow: hidden; min-height: 26px;
}
.detail-title .check { width: 22px; height: 22px; margin-top: 2px; }
.detail textarea.notes { margin-top: 10px; min-height: 64px; resize: vertical; }
.grid2 { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px 12px; align-items: center; margin-top: 18px; }
.due-row { display: flex; flex-wrap: wrap; gap: 6px; }
.due-row input { flex: 1 1 130px; min-width: 0; }
.due-row input[type="time"] { flex: 0 1 130px; }
.grid2 > label { color: var(--muted); font-size: 13px; }
.prio { display: flex; gap: 4px; }
.prio button { border: 1px solid var(--line); background: var(--input); border-radius: 6px; padding: 4px 9px; font-size: 12px; font-weight: 600; }
.prio button.on { border-color: currentColor; }
.prio .p1 { color: var(--p1); } .prio .p2 { color: var(--p2); } .prio .p3 { color: var(--p3); } .prio .p4 { color: var(--muted); }
.save-bar { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; background: var(--side); border-radius: 8px; }
.source {
  margin-top: 22px; border-left: 3px solid var(--wa); background: var(--side); border-radius: 0 8px 8px 0; padding: 10px 12px; font-size: 13px;
}
.source .lbl { font-size: 11.5px; color: var(--muted); margin-bottom: 4px; display: flex; align-items: center; gap: 5px; }
.source .q { white-space: pre-wrap; overflow-wrap: anywhere; }
.h3 { font-size: 13px; font-weight: 700; margin: 24px 0 8px; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.timeline .t { color: var(--faint); font-size: 12px; white-space: nowrap; min-width: 92px; }
.timeline .c { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.timeline .comment .c { background: var(--side); padding: 6px 9px; border-radius: 8px; }
.comment-box { display: flex; gap: 8px; margin-top: 10px; align-items: flex-end; }
.comment-box textarea { min-height: 40px; resize: vertical; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* ---------------- settings */
.panel { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px; background: var(--card); }
.panel h2 { font-size: 15px; margin: 0 0 4px; }
.panel .sub { margin-bottom: 14px; }
.people-table { width: 100%; border-collapse: collapse; }
.people-table td { padding: 10px 6px; border-top: 1px solid var(--line-soft); vertical-align: middle; }
.people-table tr:first-child td { border-top: 0; }
.people-table .pname { display: flex; align-items: center; gap: 9px; font-weight: 600; }
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; border-radius: 999px; padding: 2px 9px; background: var(--side); color: var(--muted); }
.pill.ok { color: var(--wa); background: color-mix(in srgb, var(--wa) 12%, transparent); }
.days { display: flex; flex-wrap: wrap; gap: 6px; }
.days label { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 6px; padding: 4px 9px; font-size: 13px; cursor: pointer; }
.days input { accent-color: var(--accent); }
.kv { display: grid; grid-template-columns: 170px 1fr; gap: 10px 14px; align-items: center; }
.kv > span { color: var(--muted); font-size: 13px; }
code.num { font: 600 13px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--side); padding: 2px 7px; border-radius: 6px; }
.steps { margin: 0; padding-left: 20px; } .steps li { margin: 4px 0; }

/* ---------------- toast */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #2b2b2b; color: #fff; border-radius: 10px;
  padding: 10px 14px; display: flex; gap: 14px; align-items: center; z-index: 80; box-shadow: var(--shadow); font-size: 13.5px; max-width: calc(100% - 32px);
}
.toast button { background: none; border: 0; color: #ffb4ac; font-weight: 700; padding: 0; }

.fab {
  display: none; position: fixed; right: 18px; bottom: 22px; width: 54px; height: 54px; border-radius: 50%; border: 0;
  background: var(--accent); color: #fff; box-shadow: var(--shadow); z-index: 30; place-items: center;
}
.fab svg { width: 24px; height: 24px; stroke-width: 2.2; }

/* ---------------- phone */
@media (max-width: 860px) {
  .side { position: fixed; left: 0; top: 0; bottom: 0; z-index: 60; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow); }
  .app.menu-open .side { transform: none; }
  .menu-btn { display: inline-grid; place-items: center; }
  .content { padding: 14px 16px 110px; }
  .topbar h1 { font-size: 20px; }
  .fab { display: grid; }
  .add-row.top { display: none; }
  .team { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
  .tcard { padding: 9px 10px; gap: 6px; }
  .tcard-head { gap: 6px; }
  .tcard-head b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tcard-head .avatar { display: none; }
  .tcard-head .dot { font-size: 0; gap: 0; }
  .tnums { gap: 8px; }
  .tnums strong { font-size: 16px; }
  .tnums span { font-size: 10px; }
  .tnums .good { display: none; }
  .grid2 { grid-template-columns: 84px minmax(0, 1fr); }
  .kv { grid-template-columns: 1fr; gap: 4px 0; }
  .kv > span { margin-top: 8px; }
  .people-table tr { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line-soft); padding: 6px 0; }
  .people-table td { border: 0; padding: 4px 0; }
  .task-right .id { display: none; }
}