/* CTENT design tokens — light and dark */
:root {
  --bg: #F7F6F4; --surface: #FFFFFF; --surface-2: #F7F6F4; --line: #E4E1DD; --line-2: #F0EEEB;
  --text: #0E0E0E; --text-2: #5C5A57; --muted: #77736D;
  --pri: #8E2433; --pri-soft: #F7E9EB; --pri-text: #8E2433; --pri-deep: #3D0F17;
  --teal: #0F766E; --teal-soft: #E3F4F1; --indigo: #3B4BA8; --indigo-soft: #EAEDFA;
  --amber: #9A4708; --amber-soft: #FDF1E2; --violet: #6B3FA0; --violet-soft: #F1ECF7;
  --green: #256B42; --green-soft: #E7F3EC; --red: #B42318; --red-soft: #FDECEA;
  --focus: #3B4BA8; --shadow: 0 16px 40px rgba(14,14,14,.14);
  --r: 12px; --font: 'DM Sans', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #161413; --surface: #1F1C1A; --surface-2: #2A2623; --line: #3A3532; --line-2: #2E2A27;
  --text: #F3F0EC; --text-2: #B8B2AB; --muted: #8E8780;
  --pri: #C24A5A; --pri-soft: #3A1C21; --pri-text: #F09AA5; --pri-deep: #2A0B10;
  --teal: #5CC2B5; --teal-soft: #17302D; --indigo: #A9B4F0; --indigo-soft: #232A4D;
  --amber: #F0B26B; --amber-soft: #3A2A15; --violet: #C7A8EE; --violet-soft: #2E2340;
  --green: #7CC59A; --green-soft: #1D3326; --red: #F2958C; --red-soft: #3D1A17;
  --focus: #A9B4F0; --shadow: 0 16px 40px rgba(0,0,0,.5);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--pri-text); }
a:hover { filter: brightness(.85); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 26px; letter-spacing: -0.02em; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
p { margin: 0; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); } .text-2 { color: var(--text-2); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Shell */
.shell { display: flex; min-height: 100vh; }
.side { width: 248px; flex: none; background: var(--surface); border-right: 1px solid var(--line); padding: 20px 14px 14px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.side .logo { display: inline-block; align-self: flex-start; margin: 0 0 18px 4px; padding: 4px 6px; border-radius: 8px; }
[data-theme="dark"] .side .logo { background: #F7F6F4; }
.side .logo img { width: 116px; display: block; }
.nav { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 8px; color: var(--text-2); text-decoration: none; font-size: 14px; }
.nav:hover { background: var(--surface-2); filter: none; color: var(--text); }
.nav.on { background: var(--pri-soft); color: var(--pri-text); font-weight: 600; }
.nav svg { flex: none; }
.nav .badge { margin-left: auto; }
.side .sec { padding: 20px 10px 6px; }
.pin { display: flex; align-items: center; gap: 10px; padding: 7px 10px; font-size: 13px; color: var(--text-2); text-decoration: none; border-radius: 8px; }
.pin:hover { background: var(--surface-2); filter: none; }
.pin span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.me { display: flex; align-items: center; gap: 10px; padding: 12px 6px 0; margin-top: 8px; border-top: 1px solid var(--line-2); }
.me .who { flex: 1; min-width: 0; }
.me .who b { display: block; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 12px 32px; background: var(--surface); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.top .crumb { flex: 1 1 200px; font-weight: 500; color: var(--text-2); min-width: 0; }
.top .crumb a { color: var(--text-2); text-decoration: none; }
.search { display: flex; align-items: center; gap: 8px; width: 300px; max-width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--muted); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 13px var(--font); color: var(--text); }
.icon-btn { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; text-decoration: none; }
.icon-btn:hover { background: var(--surface-2); filter: none; }
.icon-btn .ping { position: absolute; top: 6px; right: 7px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--red); color: #fff; font: 600 10px var(--mono); display: inline-flex; align-items: center; justify-content: center; }
.content { padding: 28px 32px 48px; display: flex; flex-direction: column; gap: 20px; max-width: 1400px; width: 100%; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.page-head > div:first-child { flex: 1 1 360px; display: flex; flex-direction: column; gap: 4px; }
.page-head p { color: var(--text-2); }

/* Components */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; min-width: 0; }
.card.flush { padding: 0; overflow: hidden; }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.card-head h2, .card-head h3 { flex: 1; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cols { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.cols > .wide { flex: 3 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.cols > .narrow { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat b { font-size: 28px; letter-spacing: -0.02em; }
.stat span:last-child { font-size: 12px; color: var(--text-2); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 8px; border: 1px solid transparent; font: 500 14px var(--font); cursor: pointer; text-decoration: none; white-space: nowrap; background: var(--surface); color: var(--text); }
.btn:hover { filter: brightness(.92); }
.btn-p { background: var(--pri); color: #fff; }
.btn-s { border-color: var(--line); }
.btn-d { border-color: var(--red-soft); color: var(--red); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-link { border: 0; background: none; padding: 0; height: auto; color: var(--pri-text); font: 500 13px var(--font); cursor: pointer; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.tag.dotted::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge { font: 600 11px var(--mono); padding: 1px 7px; border-radius: 9px; background: var(--pri); color: #fff; }
.badge.red { background: var(--red); }
.badge.plain { background: transparent; color: var(--muted); padding: 0; }
.av { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 600 12px var(--font); flex: none; text-decoration: none; }
.av.lg { width: 84px; height: 84px; font-size: 26px; }
.av.sm { width: 26px; height: 26px; font-size: 10px; }
.stack { display: flex; }
.stack .av { border: 2px solid var(--bg); margin-left: -6px; }
.stack .av:first-child { margin-left: 0; }
.row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.row:first-child { border-top: 0; }
.list .row { padding: 14px 20px; }
.empty { padding: 36px 20px; text-align: center; color: var(--text-2); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bar { height: 8px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 4px; background: var(--pri); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; font-size: 13px; cursor: pointer; }
.chip.on { border: 1.5px solid var(--text); background: var(--surface-2); font-weight: 600; }
.chip:hover { filter: none; background: var(--surface-2); }
.alert { padding: 12px 16px; border-radius: 10px; font-size: 14px; display: flex; align-items: center; gap: 10px; }
.alert.ok { background: var(--green-soft); color: var(--green); }
.alert.err { background: var(--red-soft); color: var(--red); }
.alert.info { background: var(--indigo-soft); color: var(--indigo); }

/* Forms */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .label { font-size: 13px; font-weight: 500; }
.hint { font-size: 12px; color: var(--muted); }
.in, .field input:not([type=checkbox]):not([type=radio]):not([type=file]), .field select, .field textarea, select.in {
  height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font: 400 14px var(--font); width: 100%;
}
.field textarea, textarea.in { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.in:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--pri); outline-offset: -1px; border-color: transparent; }
.form-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
input[type=file] { font: 400 13px var(--font); color: var(--text-2); }

/* Tables */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font: 500 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 12px 12px; background: var(--surface-2); white-space: nowrap; }
.table td { padding: 12px; border-top: 1px solid var(--line-2); vertical-align: middle; }
.table th:first-child, .table td:first-child { padding-left: 20px; }
.table th:last-child, .table td:last-child { padding-right: 20px; }
.scroll-x { overflow-x: auto; }

/* Topic header */
.topic-head { display: flex; flex-direction: column; gap: 16px; }
.topic-title { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.topic-title > div:first-child { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.groups { display: flex; gap: 6px; flex-wrap: wrap; }
.group { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); text-decoration: none; font-weight: 500; }
.group.on { font-weight: 600; }
.subs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); overflow-x: auto; padding: 4px 4px 0; }
.subs a { padding: 4px 0 12px; color: var(--text-2); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subs a.on { color: var(--text); font-weight: 600; border-color: var(--pri); }

/* Board */
.board { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 14px; overflow-x: auto; align-items: start; }
.col { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 200px; }
.col.drop { outline: 2px dashed var(--pri); outline-offset: -4px; }
.col-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 4px; font-weight: 600; }
.task { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; cursor: grab; }
.task.dragging { opacity: .5; }
.task .meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); flex-wrap: wrap; }
.task form { display: inline; }
.task select { height: 28px; padding: 0 6px; font-size: 12px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--text); }

/* Chat */
.chat-page { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.chat-page > .alert { margin: 12px 24px 0; }
.chat { display: flex; min-height: calc(100vh - 64px); }
.chat-list { width: 260px; flex: none; background: var(--surface); border-right: 1px solid var(--line); padding: 16px 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.chat-list .nav { min-height: 34px; font-size: 14px; }
.chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--surface); }
.chat-head { padding: 14px 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; max-height: calc(100vh - 220px); }
.msg { display: flex; gap: 12px; }
.msg .body { flex: 1; min-width: 0; }
.msg .body p { white-space: pre-wrap; word-wrap: break-word; color: var(--text); }
.chat-form { margin: 0 24px 20px; display: flex; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.chat-form textarea { flex: 1; border: 0; outline: 0; resize: none; background: transparent; color: var(--text); font: 400 14px var(--font); padding: 6px; min-height: 40px; }

/* Auth pages */
.auth { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 16px; background: var(--bg); }
.auth-card { width: 440px; max-width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 32px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 12px 32px rgba(14,14,14,.06); }
.auth-card .logo { width: 150px; align-self: center; }
.demo-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.demo-list button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; text-align: left; font: 500 13px var(--font); }
.demo-list button:hover { border-color: var(--pri); background: var(--pri-soft); }

/* Misc */
.menu { position: relative; }
.menu-pop { position: absolute; right: 0; top: 48px; width: 380px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); z-index: 60; overflow: hidden; display: none; }
.menu.open .menu-pop { display: block; }
.notif { display: flex; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--line-2); text-decoration: none; color: var(--text); }
.notif.unread { background: var(--pri-soft); }
.notif:hover { filter: none; background: var(--surface-2); }
.kind { width: 34px; height: 34px; border-radius: 8px; flex: none; display: inline-flex; align-items: center; justify-content: center; font: 700 11px var(--mono); }
.chart { display: flex; align-items: flex-end; gap: 10px; height: 160px; border-bottom: 1px solid var(--line); padding-top: 10px; }
.chart > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.chart .b { width: 100%; max-width: 44px; border-radius: 4px 4px 0 0; background: var(--pri); opacity: .35; }
.chart > div:last-child .b { opacity: 1; }
.chart-x { display: flex; gap: 10px; }
.chart-x span { flex: 1; text-align: center; font: 500 10px var(--mono); color: var(--muted); }
dialog { border: 0; border-radius: 14px; padding: 0; width: 560px; max-width: calc(100vw - 32px); background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(14,14,14,.45); }
dialog .dlg { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 99; background: #0E0E0E; color: #fff; padding: 12px 18px; border-radius: 10px; box-shadow: var(--shadow); font-weight: 500; }
.skill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; }
.lvl { font: 600 10px var(--mono); color: var(--pri-text); }
.kbd { font: 500 11px var(--mono); }
.split { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.right { margin-left: auto; }
.nowrap { white-space: nowrap; }
.mobile-only { display: none; }

@media (max-width: 900px) {
  .side { position: fixed; left: -260px; z-index: 80; transition: left .2s; box-shadow: var(--shadow); }
  .side.open { left: 0; }
  .mobile-only { display: inline-flex; }
  .top { padding: 10px 16px; }
  .top .search { display: none; }
  .content { padding: 20px 16px 40px; }
  .chat-list { display: none; }
  .chat { min-height: auto; }
  .board { grid-template-columns: repeat(4, 260px); }
  .demo-list { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat b { font-size: 22px; }
  h1 { font-size: 22px; }
}

/* ===== Task flow (create + workspace) ===== */
.num { width: 28px; height: 28px; border-radius: 50%; background: var(--pri); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 700 13px var(--font); flex: none; }
.chip.pick { position: relative; user-select: none; }
.chip.pick input { position: absolute; opacity: 0; pointer-events: none; }
.chip.pick:has(input:checked) { border: 1.5px solid var(--pri); background: var(--pri-soft); color: var(--pri-text); font-weight: 600; }
.chip.pick.teal:has(input:checked) { border-color: var(--teal); background: var(--teal-soft); color: var(--teal); }
.chip.pick.red:has(input:checked) { border-color: var(--red); background: var(--red-soft); color: var(--red); }
.chip.pick:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.person-pick { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.person-pick input { position: absolute; opacity: 0; }
.person-pick:has(input:checked) { border: 2px solid var(--pri); background: var(--pri-soft); }
.person-pick:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.preview { border: 2px dashed var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--surface-2); }
.crit-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; background: var(--surface-2); font-size: 14px; }
.crit-row .sq, .crit .box, .step .box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #B9B4AD; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--surface); }
.due { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 12px 16px; border-radius: 12px; background: var(--amber-soft); color: var(--amber); }
.due.late { background: var(--red-soft); color: var(--red); }
.due.ok { background: var(--green-soft); color: var(--green); }
.stepper { list-style: none; margin: 0; padding: 0; display: flex; }
.stepper li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; min-width: 0; font-size: 14px; color: var(--muted); text-align: center; }
.stepper li::before { content: ''; position: absolute; top: 16px; left: -50%; width: 100%; height: 3px; background: var(--line); z-index: 0; }
.stepper li:first-child::before { display: none; }
.stepper li.past::before, .stepper li.cur::before { background: var(--green); }
.stepper .dot { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 14px var(--font); background: var(--surface); border: 2px solid var(--line); color: var(--muted); }
.stepper li.past { color: var(--text); }
.stepper li.past .dot { background: var(--green); border-color: var(--green); color: #fff; }
.stepper li.cur { color: var(--pri-text); }
.stepper li.cur .dot { background: var(--pri); border-color: var(--pri); color: #fff; box-shadow: 0 0 0 5px var(--pri-soft); }
.stepper li.cur.red { color: var(--red); }
.stepper li.cur.red .dot { background: var(--red); border-color: var(--red); box-shadow: 0 0 0 5px var(--red-soft); }
.next { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 20px 22px; border-radius: 14px; border: 1.5px solid; }
.next-icon { width: 52px; height: 52px; flex: none; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; background: var(--surface); }
.crit { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; border: 1px solid var(--line-2); font-size: 13px; }
.crit.met { background: var(--green-soft); }
.crit.met .box { background: var(--green); border-color: var(--green); }
.crit.pickable { cursor: pointer; border-color: var(--teal); }
.crit.pickable input { width: 18px; height: 18px; accent-color: var(--green); flex: none; }
.crit.pickable:has(input:checked) { background: var(--green-soft); }
.res { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; border: 1px solid var(--line-2); text-decoration: none; color: var(--text); font-size: 13px; }
.res:hover { background: var(--surface-2); filter: none; }
.tabs { display: flex; gap: 22px; padding: 0 22px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs a { height: 46px; display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); text-decoration: none; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a.on { color: var(--text); font-weight: 600; border-color: var(--pri); }
.cnt { font: 600 11px var(--mono); padding: 1px 6px; border-radius: 8px; background: var(--line-2); color: var(--text-2); }
.step { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2); }
.step form { display: inline-flex; }
.step button.box { cursor: pointer; width: 24px; height: 24px; }
.step.done { background: var(--surface-2); }
.step.done .box { background: var(--green); border-color: var(--green); }
.step.done > span:not(.box) { color: var(--muted); text-decoration: line-through; }
.drop { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px; border-radius: 12px; border: 1.5px dashed #CFCAC4; background: var(--surface-2); }
.update-box { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 12px; background: var(--surface-2); }
.tl { display: flex; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2); }
.tl.blocked { background: var(--red-soft); border-color: transparent; }
.chatbox { display: flex; flex-direction: column; max-height: 720px; }
.chat-thread { flex: 1; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; min-height: 160px; }
.bubble-row { display: flex; }
.bubble-row.mine { justify-content: flex-end; }
.bubble { max-width: 86%; padding: 8px 12px; border-radius: 12px 12px 12px 4px; background: var(--surface-2); font-size: 14px; line-height: 1.5; }
.bubble-row.mine .bubble { background: var(--pri-soft); border-radius: 12px 12px 4px 12px; }
.review { border: 2px solid var(--teal); display: flex; flex-direction: column; gap: 14px; }
.task-link { color: var(--text); text-decoration: none; }
.task-link:hover { color: var(--pri-text); filter: none; text-decoration: underline; }
@media (max-width: 900px) { .stepper li b { font-size: 12px; } .next { padding: 16px; } }

/* ===== Edit / delete controls ===== */
.ed { position: relative; display: inline-block; }
.ed > summary { list-style: none; cursor: pointer; }
.ed > summary::-webkit-details-marker { display: none; }
.ed-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; width: 380px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 16px; display: flex; flex-direction: column; gap: 10px; text-align: left; font-weight: 400; color: var(--text); }
.ed-pop.left { right: auto; left: 0; }
.ed-pop h3 { font-size: 15px; }
.mini { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font: 500 12px var(--font); cursor: pointer; text-decoration: none; white-space: nowrap; }
.mini:hover { background: var(--surface-2); color: var(--text); filter: none; }
.mini.del { color: var(--red); border-color: var(--red-soft); }
.mini.del:hover { background: var(--red-soft); color: var(--red); }
.mini svg { width: 14px; height: 14px; }
.inline-actions { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
form.inline { display: inline; }
.msg .msg-actions { display: none; gap: 4px; margin-left: auto; }
.msg:hover .msg-actions, .msg:focus-within .msg-actions { display: inline-flex; }
.edited { font-size: 11px; color: var(--muted); }
.ed-pop.wide { width: 540px; }
.ed-pop.up { top: auto; bottom: calc(100% + 6px); }
@media (hover: none) { .msg .msg-actions { display: inline-flex; } }
.bubble .msg-actions { display: none; gap: 4px; margin-top: 4px; }
.bubble-row:hover .msg-actions, .bubble-row:focus-within .msg-actions { display: inline-flex; }
@media (hover: none) { .bubble .msg-actions { display: inline-flex; } }
.mini.icon-only { padding: 0 6px; }
.ed-pop { white-space: normal; }
.room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.room { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); }
.room.project { border-color: var(--pri); box-shadow: inset 0 3px 0 var(--pri); }
.pick-list { max-height: 200px; overflow: auto; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.pick-list label { font-size: 14px; cursor: pointer; }
.skill-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.skill-chips .sk { font-size: 11px; line-height: 1; padding: 4px 7px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line-2); white-space: nowrap; }
.skill-chips .sk b { font-weight: 700; color: var(--muted); margin-left: 2px; }
.skill-chips .sk.hit { background: var(--green-soft); color: var(--green); border-color: transparent; }
.skill-chips .sk.hit b { color: var(--green); }
/* Finish project */
.celebrate { position: relative; overflow: hidden; text-align: center; padding: 36px 20px 30px; border-radius: 16px; background: linear-gradient(135deg, var(--pri-soft), var(--teal-soft)); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.celebrate h1 { font-size: 30px; }
.celebrate .trophy { font-size: 54px; line-height: 1; animation: pop .7s cubic-bezier(.2,1.6,.4,1) both; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; opacity: .85; animation: fall 3.2s linear infinite; }
@keyframes fall { 0% { transform: translateY(0) rotate(0); } 100% { transform: translateY(260px) rotate(540deg); opacity: 0; } }
@keyframes pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .confetti i, .celebrate .trophy { animation: none; } .confetti { display: none; } }
.final-card { display: flex; flex-direction: column; gap: 12px; border: 2px solid var(--pri); }
.kind.big { width: 52px; height: 52px; border-radius: 12px; }
.final-note { margin: 0; padding: 12px 14px; border-left: 3px solid var(--pri); background: var(--surface-2); border-radius: 0 8px 8px 0; white-space: pre-wrap; color: var(--text-2); }
.final-form { display: flex; flex-direction: column; gap: 14px; }
.final-group { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.final-group legend { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.final-group .dot { border-radius: 50%; }
.final-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.final-opt:has(input:checked) { border-color: var(--pri); background: var(--pri-soft); }
.final-upload { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px dashed var(--line); border-radius: 10px; }
.btn-finish { background: linear-gradient(135deg, var(--pri), var(--teal)); color: #fff; border: 0; }
.alert.warn { background: var(--amber-soft); color: var(--amber); }
.alert.warn a { color: inherit; font-weight: 600; }
.final-banner { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 14px; text-decoration: none; color: var(--text); background: linear-gradient(135deg, var(--pri-soft), var(--teal-soft)); border: 1.5px solid var(--pri); flex-wrap: wrap; }
.final-banner.ready { border-color: var(--green); }
.final-banner:hover { filter: none; box-shadow: var(--shadow); }
/* Language */
html[lang="bn"] body, html[lang="bn"] .search input, html[lang="bn"] button, html[lang="bn"] input, html[lang="bn"] select, html[lang="bn"] textarea { font-family: 'Noto Sans Bengali', var(--font); }
html[lang="bn"] body { line-height: 1.6; }
.lang-btn { width: auto !important; padding: 0 10px; gap: 6px; font: 600 12px var(--font); color: var(--text-2); }
.lang-menu > summary { list-style: none; }
.lang-opt { display: block; padding: 8px 10px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 14px; }
.lang-opt:hover { background: var(--surface-2); filter: none; }
.lang-opt.on { background: var(--pri-soft); color: var(--pri-text); font-weight: 600; }
.auth-lang { position: absolute; top: 16px; right: 16px; }
/* AI agents */
.agent-ico { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.agent-ico.sm { width: 30px; height: 30px; border-radius: 8px; }
.agent-ico.lg { width: 52px; height: 52px; border-radius: 12px; }
.board-cols { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.fcol { flex: 1 1 230px; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: var(--line-2); }
.fcard { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.finding { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line-2); cursor: pointer; }
.finding input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--pri); flex: none; }
.finding.off > span > span:first-child { color: var(--muted); }
.cite { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 6px; background: var(--line-2); color: var(--text-2); font: 500 11px var(--mono); text-decoration: none; }
.cite:hover { background: var(--line); color: var(--text); filter: none; }
.tick { width: 20px; height: 20px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; flex: none; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--indigo-soft); border-top-color: var(--indigo); animation: spin 0.9s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
/* Final paper */
.paper-cols { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.outline { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 14px; line-height: 1.35; }
.outline .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 4px; }
.outline:hover { background: var(--surface-2); filter: none; }
.outline.on { background: var(--pri-soft); font-weight: 600; }
.paper-view { padding: 28px 36px 36px; font: 17px/1.75 'Source Serif 4', Georgia, serif; color: var(--text); display: flex; flex-direction: column; gap: 14px; }
.paper-view h2 { font: 600 24px/1.3 'Source Serif 4', Georgia, serif; }
.paper-view p { margin: 0; }
.paper-edit { font: 16px/1.7 'Source Serif 4', Georgia, serif !important; min-height: 360px; }
sup.ref a { color: var(--pri-text); text-decoration: none; font: 600 11px var(--mono); }
.refs { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.refs a { color: var(--text-2); word-break: break-word; }
@media (max-width: 700px) { .paper-view { padding: 20px 18px; } }

/* ===== Evidence cards, agreement map, research gaps (from the CTENT Research Agent) ===== */
/* Page */
.chip.pick small { color: var(--muted); font-weight: 400; }
.chip.pick.off { opacity: .45; cursor: not-allowed; }
.src-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.src-group { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); }
.src-group .chips { gap: 6px; }
.src-group .chip { height: auto; min-height: 30px; padding: 5px 11px; font-size: 12.5px; line-height: 1.35; white-space: normal; }
.opt-list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.opt-list .crit.pickable { border-color: var(--line); }
.opt-list .crit.pickable:has(input:disabled) { opacity: .5; }

/* Run status */
.run-progress { display: flex; flex-direction: column; gap: 18px; }
.run-progress .stepper li { font-size: 12.5px; }
.log { background: #141210; color: #D9D4CE; padding: 14px 16px; border-radius: 10px; max-height: 300px; overflow: auto; font: 500 12px/1.55 var(--mono); white-space: pre-wrap; margin: 0; }
.log-toggle { display: inline-flex; align-items: center; gap: 6px; }

/* Toolbar + tabs */
.workspace { display: flex; flex-direction: column; }
.workspace > .tabs { padding: 0 20px; background: var(--surface); border: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: var(--r) var(--r) 0 0; position: sticky; top: 64px; z-index: 20; }
.workspace > .tabs .spacer { flex: 1; }
.workspace > .tabs .tools { display: flex; align-items: center; gap: 8px; }
.workspace > .tab { background: var(--surface); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r) var(--r); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.sel-count { font: 600 12px var(--mono); color: var(--text-2); white-space: nowrap; }
.filters { display: grid; grid-template-columns: 2fr 1.4fr 1fr; gap: 8px; }
.filters .in { height: 38px; }
.filters-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.subbar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.more { border: 1px solid var(--line-2); background: var(--surface-2); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; align-items: center; }
.checks label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.checks input { accent-color: var(--pri); }
.qhead { margin: 10px 0 -4px; }

/* Evidence card */
.ev { display: grid; grid-template-columns: 26px 1fr; gap: 10px; border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; background: var(--surface); scroll-margin-top: 130px; }
.ev:hover { border-color: #CFCAC4; }
[data-theme="dark"] .ev:hover { border-color: #4A4441; }
.ev.sel { border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri-soft); }
.ev.flash { animation: flash 1.6s ease; }
@keyframes flash { 0%, 40% { background: var(--amber-soft); } 100% { background: var(--surface); } }
.ev.retracted { opacity: .6; }
.ev > input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--pri); cursor: pointer; }
.ev-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ev h3 { font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.ev h3 a { color: var(--text); text-decoration: none; }
.ev h3 a:hover { color: var(--pri-text); text-decoration: underline; filter: none; }
.ev-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ev-meta { font-size: 12.5px; color: var(--text-2); }
.ev ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.ev ul.data li { color: var(--indigo); }
.ev .msl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; font-size: 13px; background: var(--surface-2); border-radius: 8px; padding: 9px 12px; }
.ev .msl dt { color: var(--muted); font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.ev .msl dd { margin: 0; color: var(--text); }
.ev .quote { margin: 0; padding: 4px 0 4px 12px; border-left: 3px solid var(--pri); color: var(--text-2); font-style: italic; }
.ev details summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.ev details p { margin-top: 6px; font-size: 13px; color: var(--text-2); }
.cite { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; font-size: 12.5px; background: var(--surface-2); border-radius: 8px; padding: 8px 10px; color: var(--text-2); }
.cite b { color: var(--text); font-weight: 600; }

/* Tags (reliability, type, flags) */
.tag.t-high { background: var(--green-soft); color: var(--green); }
.tag.t-medium { background: var(--amber-soft); color: var(--amber); }
.tag.t-low { background: var(--red-soft); color: var(--red); }
.tag.neutral { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line-2); }
.tag.f-retracted { background: var(--red); color: #fff; }
.tag.f-preprint, .tag.f-check_journal { background: var(--amber-soft); color: var(--amber); }
.tag.ft { background: var(--indigo-soft); color: var(--indigo); }
.tag.tr { background: var(--violet-soft); color: var(--violet); }
.tag.rel { font: 600 11px var(--mono); background: transparent; color: var(--muted); padding: 0 2px; }

/* Citation chips */
.cchip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; margin: 2px 4px 0 0; border-radius: 12px; font-size: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; }
.cchip:hover { border-color: var(--pri); color: var(--pri-text); }
.cchip.con { background: var(--red-soft); border-color: transparent; color: var(--red); }

/* Agreement */
.sq { font-weight: 600; font-size: 14px; margin-top: 6px; }
.claim { border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 0 10px 10px 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.claim.strong { border-left-color: var(--green); } .claim.moderate { border-left-color: var(--teal); }
.claim.mixed { border-left-color: var(--amber); } .claim.contested { border-left-color: var(--red); } .claim.single { border-left-color: var(--muted); }
.claim .row { font-size: 12.5px; color: var(--text-2); display: block; padding: 0; border: 0; }
.tag.c-strong { background: var(--green-soft); color: var(--green); } .tag.c-moderate { background: var(--teal-soft); color: var(--teal); }
.tag.c-mixed { background: var(--amber-soft); color: var(--amber); } .tag.c-contested { background: var(--red-soft); color: var(--red); }
.tag.c-single { background: var(--surface-2); color: var(--text-2); }

/* Gaps */
.gap { border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: 0 12px 12px 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.gap.high { border-left-color: var(--red); } .gap.medium { border-left-color: var(--amber); }
.gap h3 { font-size: 15px; }
.gap .sig { font-size: 12.5px; color: var(--text-2); }
.gap .rq { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; background: var(--indigo-soft); color: var(--text); border-radius: 8px; padding: 10px 12px; font-size: 13.5px; }
.gap .rq b { color: var(--indigo); font-weight: 600; }
.tag.p-high { background: var(--red-soft); color: var(--red); } .tag.p-medium { background: var(--amber-soft); color: var(--amber); }
.tag.p-low { background: var(--surface-2); color: var(--text-2); } .tag.gtype { background: var(--indigo-soft); color: var(--indigo); }
.cov-bar { display: inline-block; width: 90px; vertical-align: middle; margin-right: 8px; }
.evid { border-top: 1px solid var(--line-2); padding-top: 12px; }
.evid > summary { cursor: pointer; font-weight: 600; color: var(--text); }

/* Overview */
.stats-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.stats-row .card { padding: 14px 16px; }
.charts { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chartbox { border: 1px solid var(--line); border-radius: var(--r); padding: 14px; height: 260px; display: flex; flex-direction: column; gap: 6px; background: var(--surface); }
.chartbox .mono { flex: none; }
.chartbox .cv { position: relative; flex: 1; min-height: 0; }

/* Draft */
.draft { white-space: pre-wrap; font-size: 15px; line-height: 1.75; max-width: 820px; color: var(--text); }

@media (max-width: 900px) {
  .workspace > .tabs { top: 56px; padding: 0 12px; gap: 16px; }
  .workspace > .tabs .tools { width: 100%; padding: 8px 0; justify-content: flex-end; }
  .workspace > .tab { padding: 14px; }
  .filters, .filters-2, .charts { grid-template-columns: 1fr; }
  .ev { padding: 14px; }
}
.workspace > .tab[hidden] { display: none; }
.workspace > .tabs a svg { opacity: .75; }

/* Evidence workspace additions (CTENT site) */
.agent-settings { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.opt-list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.opt { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 13.5px; cursor: pointer; background: var(--surface); }
.opt:has(input:checked) { border-color: var(--green); background: var(--green-soft); }
.opt input { accent-color: var(--green); margin-top: 2px; }
.src-group .mono { font-size: 10.5px; }
.ed-pop.wide .src-grid { grid-template-columns: 1fr; }
.ed-pop.wide { max-height: 75vh; overflow-y: auto; }
.workspace > .tabs { top: 0; }
.stepper.slim li { font-size: 11.5px; }
.stepper.slim .dot { width: 26px; height: 26px; font-size: 12px; }
.stepper.slim li::before { top: 12px; }
.ev h3 { margin: 0; }
.cards-foot { flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line-2); margin-top: 6px; position: sticky; bottom: 0; background: var(--surface); padding-bottom: 4px; }
[data-cards] { display: flex; flex-direction: column; gap: 10px; }
ol.plan { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.hbars { display: flex; flex-direction: column; gap: 7px; overflow-y: auto; }
.hb { display: grid; grid-template-columns: minmax(90px, 38%) 1fr 28px; gap: 8px; align-items: center; font-size: 12px; }
.hb .k { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); text-align: right; }
.hb .t { height: 14px; background: var(--line-2); border-radius: 4px; overflow: hidden; }
.hb .b { display: block; height: 100%; border-radius: 4px; }
.hb .v { font: 600 12px var(--mono); color: var(--text); }
.vbars { flex: 1; display: flex; align-items: flex-end; gap: 4px; min-height: 0; padding-top: 14px; }
.vb { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; }
.vb .b { width: 100%; max-width: 30px; background: var(--pri); border-radius: 4px 4px 0 0; }
.vb .v { font: 600 10.5px var(--mono); color: var(--text-2); }
.vb .x { font: 500 10.5px var(--mono); color: var(--muted); white-space: nowrap; }
.donut-wrap { flex: 1; display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }
.donut { width: 150px; height: 150px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; }
.donut::after { content: ''; position: absolute; inset: 28px; border-radius: 50%; background: var(--surface); }
.donut span { position: relative; z-index: 1; font: 700 24px var(--font); }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; }
.legend b { margin-left: 6px; }
.hbar { display: inline-block; width: 90px; height: 8px; vertical-align: middle; margin-right: 8px; background: var(--line-2); border-radius: 4px; overflow: hidden; }
.hbar > span { display: block; height: 100%; background: var(--pri); }
.ev[hidden], .qhead[hidden] { display: none; }

[hidden] { display: none !important; }

/* ===== Project header: badge, journey bar, five tabs ===== */
.topic-head { gap: 14px; }
.topic-title { gap: 14px; }
.topic-title > div:first-child { flex: none; }
.topic-title > div:nth-child(2) { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.topic-title h1 { font-size: 24px; line-height: 1.2; }
.topic-badge { width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font: 700 15px var(--mono); flex: none; }
a.stack { text-decoration: none; }
.journey-bar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.journey-bar li a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--text-2); height: 100%; min-width: 0; transition: border-color .15s; }
.journey-bar li a:hover { border-color: var(--pri); filter: none; }
.journey-bar .n { width: 26px; height: 26px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 12px var(--font); background: var(--line-2); color: var(--text-2); }
.journey-bar .t { display: flex; flex-direction: column; min-width: 0; }
.journey-bar .t b { font-size: 13.5px; color: var(--text); font-weight: 600; }
.journey-bar .t span { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.journey-bar li.done .n { background: var(--green); color: #fff; }
.journey-bar li.cur a { border: 1.5px solid var(--pri); background: var(--pri-soft); }
.journey-bar li.cur .n { background: var(--pri); color: #fff; box-shadow: 0 0 0 4px var(--surface); }
.journey-bar li.cur .t span { color: var(--pri-text); }
.ptabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.ptabs a { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px 12px; color: var(--text-2); text-decoration: none; font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ptabs a svg { opacity: .7; }
.ptabs a:hover { color: var(--text); filter: none; }
.ptabs a.on { color: var(--text); font-weight: 600; border-color: var(--pri); }
.ptabs a.on svg { opacity: 1; color: var(--pri-text); }
.ptabs .gear { margin-left: auto; }
.topic-head .subs { border-bottom: 0; gap: 6px; padding: 0; }
.topic-head .subs a { padding: 6px 12px; border-radius: 8px; border: 0; margin: 0; font-size: 13.5px; }
.topic-head .subs a.on { background: var(--surface-2); border: 1px solid var(--line); color: var(--text); }
@media (max-width: 900px) {
  .journey-bar { grid-template-columns: repeat(5, minmax(46px, 1fr)); }
  .journey-bar .t span { display: none; }
  .journey-bar li a { flex-direction: column; gap: 4px; padding: 8px 4px; text-align: center; }
  .journey-bar .t b { font-size: 11.5px; }
  .ptabs .gear span { display: none; }
  .topic-badge { width: 40px; height: 40px; font-size: 13px; }
}

/* ===== Journey page ===== */
.next-card { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 22px; padding: 22px 24px; border-radius: 16px; background: linear-gradient(135deg, var(--pri-soft), var(--surface) 70%); border: 1.5px solid var(--pri); }
.next-card.done { background: linear-gradient(135deg, var(--green-soft), var(--surface) 70%); border-color: var(--green); }
.next-step { width: 54px; height: 54px; border-radius: 50%; background: var(--pri); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 700 22px var(--font); flex: none; }
.next-card.done .next-step { background: var(--green); font-size: 26px; }
.btn-lg { height: 46px; padding: 0 22px; font-size: 15px; }
.part-row { display: flex; align-items: center; gap: 14px; padding: 13px 20px; border-top: 1px solid var(--line-2); text-decoration: none; color: var(--text); }
.part-row:hover { background: var(--surface-2); filter: none; }
.part-row b { font-weight: 500; }
.part-row [data-progress] .bar { display: block; max-width: 260px; }
.part-n { font: 600 12px var(--mono); color: var(--muted); width: 22px; flex: none; }
.mini-step { display: flex; gap: 10px; align-items: flex-start; text-decoration: none; color: var(--text); font-size: 13.5px; padding: 4px 0; }
.mini-step .n { width: 22px; height: 22px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font: 700 11px var(--font); background: var(--line-2); color: var(--text-2); }
.mini-step.done .n { background: var(--green); color: #fff; }
.mini-step.cur .n { background: var(--pri); color: #fff; }
.mini-step:hover { filter: none; } .mini-step:hover b { color: var(--pri-text); }

/* ===== Research page ===== */
.research { display: flex; flex-direction: column; gap: 16px; max-width: 980px; }
.q-card { display: flex; flex-direction: column; gap: 8px; }
.q-text { font-size: 17px; line-height: 1.5; color: var(--text); flex: 1; }
.q-edit > summary { list-style: none; display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.q-edit > summary::-webkit-details-marker { display: none; }
.q-edit[open] > summary .mini { display: none; }
.start-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.start-opt { border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; background: var(--surface); }
.start-opt .btn { margin-top: auto; }
.start-opt select { width: 100%; }
.start-ico { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.pcard { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
.pcard-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pcard-title { font-size: 16px; line-height: 1.35; display: block; }
.pcard-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line-2); }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; }
.add-part > summary, .how > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.add-part > summary::-webkit-details-marker, .how > summary::-webkit-details-marker { display: none; }
.add-part > summary h3 { color: var(--pri-text); }
details.adv { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
details.adv > summary { cursor: pointer; font-weight: 600; font-size: 14px; }
details.adv > summary .hint { font-weight: 400; margin-left: 6px; }
.adv-body { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }

/* ===== New project wizard ===== */
.wizard { display: flex; flex-direction: column; gap: 16px; max-width: 860px; }
.wiz-pane { display: flex; flex-direction: column; gap: 16px; }
.wizard.js .wiz-pane:not(.on) { display: none; }
.wiz-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.wiz-steps li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 20px; border: 1px solid var(--line); color: var(--text-2); font-weight: 500; font-size: 14px; background: var(--surface); }
.wiz-steps li span { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--line-2); font: 700 12px var(--font); }
.wiz-steps li.on { border-color: var(--pri); color: var(--pri-text); background: var(--pri-soft); }
.wiz-steps li.on span, .wiz-steps li.past span { background: var(--pri); color: #fff; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.pick-card { position: relative; border: 1.5px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; background: var(--surface); }
.pick-card input { position: absolute; top: 14px; right: 14px; accent-color: var(--pri); }
.pick-card:has(input:checked) { border-color: var(--pri); background: var(--pri-soft); }
.pick-card:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.people-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.person-opt { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; font-size: 14px; }
.person-opt:has(input:checked) { border-color: var(--pri); background: var(--pri-soft); }
.person-opt input { accent-color: var(--pri); }

.glance { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.glance > div { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.glance b { font-size: 18px; } .glance span { font-size: 12px; color: var(--text-2); }

/* ===== Round 3: sidebar, inbox, home, evidence review ===== */
:root { --acc: var(--pri); --acc-soft: var(--pri-soft); }
.nav { min-height: 44px; font-size: 15px; gap: 12px; padding: 0 12px; border-radius: 10px; font-weight: 500; }
.pin2 { display: flex; flex-direction: column; gap: 5px; padding: 8px 12px; border-radius: 10px; text-decoration: none; color: var(--text); }
.pin2:hover { background: var(--surface-2); filter: none; }
.pin2-t { display: flex; align-items: center; gap: 8px; font-size: 13.5px; min-width: 0; }
.pin2-t span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pips { display: flex; gap: 3px; padding-left: 16px; }
.pips span { width: 18px; height: 4px; border-radius: 2px; background: var(--line); }
.pips span.d { background: var(--green); }
.pips span.c { background: var(--acc); }
.pin2-s { padding-left: 16px; font-size: 11.5px; color: var(--muted); }
.pin-new { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 13.5px; color: var(--pri-text); text-decoration: none; font-weight: 500; border-radius: 10px; }
.pin-new:hover { background: var(--pri-soft); filter: none; }
.me .who { display: flex; flex-direction: column; }
kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--surface); font: 600 12px var(--mono); color: var(--text-2); }
kbd.inv { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.qa-btn { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--text-2); font: 500 14px var(--font); cursor: pointer; }
.qa-btn:hover { color: var(--text); border-color: var(--pri); }
.icon-btn.sm { width: 30px; height: 30px; border: 0; background: transparent; color: var(--muted); }
.ptag { display: inline-flex; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--acc); background: var(--acc-soft); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* Empty states: why it's empty + one next step */
.empty2 { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 32px 22px; color: var(--text-2); }
.empty2 b { color: var(--text); font-size: 16px; }
.empty2 > span:not(.e-ico) { max-width: 440px; line-height: 1.5; font-size: 14px; }
.e-ico { width: 52px; height: 52px; border-radius: 50%; background: var(--teal-soft); color: var(--teal); display: inline-flex; align-items: center; justify-content: center; }
/* Inbox */
.inbox { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.inbox-main { flex: 3 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.inbox-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-weight: 500; text-decoration: none; }
.fchip:hover { border-color: var(--pri); filter: none; color: var(--text); }
.fchip .n { font: 600 11px var(--mono); color: var(--muted); }
.fchip.on { border-color: var(--pri); background: var(--pri-soft); color: var(--pri-text); font-weight: 600; }
.fchip.on .n { color: var(--pri-text); }
.needs-card { border-color: #E8C9CE; }
[data-theme="dark"] .needs-card { border-color: var(--pri-soft); }
.needs-card.calm { border-color: var(--line); }
.ib-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px 8px; }
.ib-head h2 { flex: 1; font-size: 16px; }
.ib-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.needs-card.calm .ib-dot { background: var(--green); }
.ib-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 14px 20px; border-top: 1px solid var(--line-2); }
.ib-row.unread { background: color-mix(in srgb, var(--pri-soft) 30%, var(--surface)); }
.ib-unread { width: 8px; height: 8px; border-radius: 50%; flex: none; background: transparent; }
.ib-row.unread .ib-unread { background: var(--pri); }
.ib-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--pri-soft); color: var(--pri-text); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ib-ico.urgent { background: var(--red-soft); color: var(--red); }
.ib-av { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ib-body { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ib-title { font-size: 15px; font-weight: 500; line-height: 1.4; }
.ib-text { font-size: 14px; color: var(--text-2); line-height: 1.45; }
.ib-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted); }
.ib-row form { display: inline; }
.meet { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 10px; background: var(--surface-2); }
.meet.now { background: var(--indigo-soft); }
.meet-t { text-align: center; min-width: 50px; display: flex; flex-direction: column; }
.meet-t b { font-size: 17px; color: var(--text); }
.meet.now .meet-t b { color: var(--indigo); }
.meet-t span { font-size: 11px; color: var(--text-2); }
/* Home */
.home { display: flex; flex-direction: column; gap: 28px; max-width: 1200px; }
.hello { font-size: 30px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack > h2 { font-size: 18px; }
.upnext { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.un-card { display: flex; flex-direction: column; gap: 8px; min-height: 180px; padding: 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--text); margin: 0; transition: border-color .15s, box-shadow .15s; }
.un-card:hover { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); filter: none; }
.un-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.un-num { width: 26px; height: 26px; border-radius: 50%; background: var(--acc); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: none; }
.un-t { font-size: 16px; font-weight: 600; line-height: 1.35; }
.un-x { font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.un-go { margin-top: auto; font: 600 14px var(--font); color: var(--acc); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.seg { display: flex; gap: 6px; }
.seg a { height: 36px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); text-decoration: none; font-size: 13px; font-weight: 500; }
.seg a.on { background: var(--text); color: var(--surface); border-color: var(--text); }
.pj { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px; border-top: 3px solid var(--acc); }
.pj-top { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.pj-badge { width: 48px; height: 48px; border-radius: 12px; background: var(--acc-soft); color: var(--acc); display: inline-flex; align-items: center; justify-content: center; font: 700 14px var(--mono); flex: none; }
.pj-title { display: block; margin-top: 4px; font-size: 18px; font-weight: 600; color: var(--text); text-decoration: none; line-height: 1.3; }
.pj-title:hover { color: var(--acc); filter: none; }
.avs { display: flex; padding-left: 6px; }
.avs .av { margin-left: -6px; border: 2px solid var(--surface); }
.av.more { background: var(--line-2); color: var(--text-2); }
.jbar { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.jbar li { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.jbar li span { height: 6px; border-radius: 3px; background: var(--line); }
.jbar li b { font-size: 12.5px; font-weight: 500; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jbar li.done span { background: var(--green); } .jbar li.done b { color: var(--green); }
.jbar li.cur span { background: var(--acc); } .jbar li.cur b { color: var(--acc); font-weight: 600; }
.pj-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.pj-foot form { display: inline; }
.pj-status { flex: 1 1 300px; font-size: 14px; color: var(--text-2); }
.live { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--line); }
.live.on { background: var(--indigo); box-shadow: 0 0 0 4px var(--indigo-soft); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px transparent; } }
@media (prefers-reduced-motion: reduce) { .live.on { animation: none; } }
.btn-p.acc, .btn.acc { background: var(--acc); color: #fff; }
.new-dash { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 72px; border: 1.5px dashed var(--line); border-radius: 14px; color: var(--text-2); text-decoration: none; font-weight: 500; }
.new-dash:hover { border-color: var(--pri); color: var(--pri-text); filter: none; }
/* Project accent */
.acc-top { border-top: 4px solid var(--acc); padding-top: 14px; }
main:has(.acc-top) .btn-p, main:has(.ev-nav) .btn-p { background: var(--acc); }
.journey-bar li.cur a { border-color: var(--acc); background: var(--acc-soft); }
.journey-bar li.cur .n { background: var(--acc); }
.journey-bar li.cur .t span { color: var(--acc); }
.journey-bar li a:hover { border-color: var(--acc); }
.ptabs a.on { border-color: var(--acc); }
.ptabs a.on svg { color: var(--acc); }
.mode-badge { display: inline-flex; align-self: flex-start; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 6px; background: var(--acc-soft); color: var(--acc); font-size: 12px; font-weight: 600; text-decoration: none; }
.mode-badge u { text-underline-offset: 2px; }
/* Evidence review v2 */
.ev-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 4px solid var(--acc); }
.ev-nav .back { font-size: 14px; font-weight: 500; text-decoration: none; color: var(--acc); }
.ev-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; max-width: 1040px; }
.ev-head h1 { font-size: 28px; line-height: 1.2; }
.more-menu .ed-pop form { margin: 0; }
.more-menu button.lang-opt { border: 0; background: transparent; font: inherit; cursor: pointer; }
.ev-sum { max-width: 1040px; font-size: 14px; line-height: 1.55; }
.workspace { max-width: 1040px; display: flex; flex-direction: column; gap: 16px; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; text-decoration: none; color: var(--text); display: flex; flex-direction: column; }
.tile:hover { border-color: var(--acc); filter: none; }
.tile b { font-size: 24px; font-weight: 700; }
.tile span { font-size: 13px; color: var(--text-2); }
.tabs.big { padding: 0; gap: 4px; }
.tabs.big a { height: 46px; padding: 0 16px; font-size: 15px; }
.tabs.big a.on { border-color: var(--acc); }
.qrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.searchbox { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); }
.searchbox input { border: 0; outline: 0; background: transparent; font: 400 14px var(--font); color: var(--text); width: 100%; }
.qf { position: relative; cursor: pointer; }
.qf input { position: absolute; opacity: 0; pointer-events: none; }
.qf span { display: inline-flex; align-items: center; height: 44px; padding: 0 14px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-weight: 500; }
.qf input:checked + span { border-color: var(--acc); background: var(--acc-soft); color: var(--acc); font-weight: 600; }
.qf input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.evlist { display: flex; flex-direction: column; gap: 12px; }
.ev2 { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; margin: 1px; scroll-margin-top: 130px; transition: box-shadow .15s; }
.ev2.sel { border: 2px solid var(--acc); box-shadow: 0 0 0 4px var(--acc-soft); margin: 0; }
.ev2.retracted { opacity: .7; }
.ev2.flash { animation: flash 1.2s; }
.ev2-main { display: flex; gap: 16px; align-items: flex-start; cursor: pointer; }
.ev2-main input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--acc); flex: none; cursor: pointer; }
.ev2-main input:disabled { cursor: default; }
.ev2-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ev2-title { font-size: 17px; font-weight: 600; line-height: 1.35; }
.ev2-find { font-size: 15px; line-height: 1.55; color: var(--text); }
.dchip { align-self: flex-start; padding: 6px 10px; border-radius: 8px; background: var(--indigo-soft); color: var(--indigo); font-size: 13.5px; font-weight: 500; }
.ev2 .ev-meta { font-size: 12.5px; color: var(--muted); }
.ev2-more { margin-left: 40px; font-size: 13.5px; color: var(--text-2); }
.ev2-more > summary { font-size: 13px; color: var(--muted); cursor: pointer; }
.ev2-detail { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; line-height: 1.5; }
.ev2-detail ul { margin: 0; padding-left: 18px; }
.ev2-detail ul.data li { color: var(--indigo); }
.ev2-detail .msl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; font-size: 13px; background: var(--surface-2); border-radius: 8px; padding: 9px 12px; margin: 0; }
.ev2-detail .msl dt { color: var(--muted); font: 500 11px var(--mono); text-transform: uppercase; padding-top: 2px; }
.ev2-detail .msl dd { margin: 0; color: var(--text); }
.ev2-detail .quote { margin: 0; padding-left: 12px; border-left: 3px solid var(--acc); font-style: italic; }
.ev2-detail .cite { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); }
.ev2-detail .cite > span { flex: 1 1 300px; }
.selbar { position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 18px; margin-top: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 -8px 24px rgba(0,0,0,.08); }
.selbar-n { flex: 1 1 260px; font-size: 15px; }
details.fold > summary { cursor: pointer; list-style: none; display: flex; gap: 8px; align-items: center; }
details.fold > summary::before { content: '▸'; color: var(--muted); }
details.fold[open] > summary::before { content: '▾'; }
@media (max-width: 700px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ev2-more { margin-left: 0; } .hello { font-size: 24px; } }

/* Mobile bottom tab bar */
.tabbar { display: none; }
@media (max-width: 700px) {
  .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--surface); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; font-size: 11.5px; font-weight: 500; color: var(--text-2); text-decoration: none; position: relative; min-height: 48px; justify-content: center; }
  .tabbar a.on { color: var(--pri-text); font-weight: 600; }
  .tabbar i { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--red); color: #fff; font: 600 10px var(--mono); font-style: normal; display: inline-flex; align-items: center; justify-content: center; }
  body { padding-bottom: 72px; }
  .top [data-toggle-side], .qa-btn span, .qa-btn kbd { display: none; }
  .qa-btn { padding: 0 10px; }
  .selbar { bottom: 70px; }
  .toasts { bottom: 84px !important; }
}

/* Quick-add dialog */
.qa { position: fixed; inset: 0; z-index: 100; background: rgba(14,14,14,.4); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.qa[hidden] { display: none !important; }
.qa-box { width: 100%; max-width: 640px; background: var(--surface); border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.3); overflow: hidden; margin: 0; }
.qa-top { padding: 22px 24px 12px; display: flex; flex-direction: column; gap: 12px; }
.qa-top textarea { width: 100%; border: 0; outline: none; resize: none; font: 500 20px/1.45 var(--font); color: var(--text); background: transparent; }
.qa-bar { padding: 14px 24px; border-top: 1px solid var(--line-2); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.qa-pill { position: relative; cursor: pointer; }
.qa-pill input { position: absolute; opacity: 0; }
.qa-pill span { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--line); font-size: 13.5px; font-weight: 500; color: var(--text-2); }
.qa-pill input:checked + span { border-color: var(--pri); background: var(--pri-soft); color: var(--pri-text); font-weight: 600; }
.qa-pill input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.qa-recent { padding: 12px 24px 16px; background: var(--surface-2); display: flex; flex-direction: column; gap: 4px; }
.qa-recent a { display: flex; gap: 10px; align-items: center; padding: 6px 4px; color: var(--text); text-decoration: none; font-size: 14px; border-radius: 6px; }
.qa-recent a:hover { background: var(--surface); filter: none; }

/* Toasts (finish notices, undo) */
.toasts { position: fixed; right: 24px; bottom: 24px; z-index: 110; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; }
.toast2 { pointer-events: auto; width: 380px; max-width: calc(100vw - 32px); display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: #0E0E0E; color: #fff; font: 500 14px var(--font); box-shadow: 0 12px 32px rgba(0,0,0,.25); animation: tin .2s ease-out; }
.toast2 .td { width: 8px; height: 8px; border-radius: 50%; background: #8FD6C9; flex: none; }
.toast2 .tm { flex: 1; min-width: 0; }
.toast2 a, .toast2 .ta { color: #8FD6C9; font-weight: 600; text-decoration: none; background: none; border: 0; font: 600 14px var(--font); cursor: pointer; padding: 0; }
.toast2 .tx { border: 0; background: transparent; color: #A39E97; cursor: pointer; font-size: 16px; padding: 0 2px; }
@keyframes tin { from { transform: translateY(8px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .toast2 { animation: none; } }

/* First-run tips */
.tip-veil { position: fixed; inset: 0; z-index: 90; background: rgba(14,14,14,.18); }
.tip-on { position: relative; z-index: 91; background-color: var(--bg); box-shadow: 0 0 0 3px #8FD6C9, 0 0 0 9px rgba(143,214,201,.35) !important; border-radius: 12px; }
.tip-box { position: absolute; z-index: 95; width: 320px; max-width: calc(100vw - 32px); padding: 16px 18px; border-radius: 14px; background: #0E0E0E; color: #fff; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 16px 40px rgba(0,0,0,.3); }
.tip-box .mono { color: #8FD6C9; }
.tip-box p { font-size: 14px; line-height: 1.5; color: #D9D4CE; }
.tip-box .tb { display: flex; gap: 8px; align-items: center; }
.tip-box .skip { border: 0; background: transparent; color: #A39E97; font: 500 13px var(--font); cursor: pointer; padding: 8px 0; }
.tip-box .go { height: 36px; padding: 0 14px; border: 0; border-radius: 8px; background: #8FD6C9; color: #0E0E0E; font: 600 13.5px var(--font); cursor: pointer; margin-left: auto; }

/* ===== Round 4: new project flow, modes, parts & people ===== */
.wiz2 { max-width: 1120px; gap: 20px; }
.wiz2 .wiz-pane { gap: 20px; }
.wiz2 h1 { font-size: 28px; }
.wizard[data-mode="agent"] .m-manual, .wizard[data-mode="manual"] .m-agent { display: none !important; }
.swatches { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.sw { position: relative; cursor: pointer; }
.sw input { position: absolute; opacity: 0; }
.sw span:first-of-type { display: block; width: 36px; height: 36px; border-radius: 50%; }
.sw input:checked + span { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--sw); }
.sw input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 4px; }
.mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.mode-card { --mc: var(--pri); --mc-soft: var(--pri-soft); position: relative; display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); margin: 1px; cursor: pointer; }
.mode-card.m-m { --mc: var(--teal); --mc-soft: var(--teal-soft); }
.mode-card input { position: absolute; opacity: 0; }
.mode-card:has(input:checked) { border: 2px solid var(--mc); box-shadow: 0 0 0 5px var(--mc-soft); margin: 0; }
.mode-card:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.mc-top { display: flex; align-items: center; gap: 14px; width: 100%; }
.mc-top > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.mc-top b { font-size: 20px; }
.mc-top > span:nth-child(2) > span { color: var(--text-2); }
.mc-ico { width: 56px; height: 56px; border-radius: 14px; background: var(--mc-soft); color: var(--mc); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.mc-radio { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); flex: none; display: inline-flex; align-items: center; justify-content: center; }
.mode-card:has(input:checked) .mc-radio { border-color: var(--mc); }
.mode-card:has(input:checked) .mc-radio::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--mc); }
.mc-pts { display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; line-height: 1.45; }
.mc-pts span::before { content: '✓  '; color: var(--mc); font-weight: 700; }
.mc-j { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); font-size: 14px; font-weight: 500; width: 100%; }
.mc-best { font-size: 13.5px; color: var(--text-2); }
.note-row { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px dashed var(--line); font-size: 14px; color: var(--text-2); line-height: 1.5; }
.note-row svg { flex: none; color: var(--teal); margin-top: 1px; }
.shared-set { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px 20px; }
.team-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.wizard[data-mode="manual"] .team-col { order: 0; }
.wizard[data-mode="agent"] .team-col { order: 2; flex-basis: 100%; }
.team-col { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.parts-col { flex: 2 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.people-list { display: flex; flex-direction: column; gap: 8px; max-height: 520px; overflow-y: auto; }
.wizard[data-mode="agent"] .people-list { flex-direction: row; flex-wrap: wrap; max-height: none; }
.wizard[data-mode="agent"] .person2 { flex: 1 1 280px; }
.person2 { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--line-2); cursor: pointer; background: var(--surface); }
.person2[hidden] { display: none; }
.person2 input { width: 20px; height: 20px; accent-color: var(--teal); flex: none; }
.person2:has(input:checked) { border: 1.5px solid var(--teal); background: color-mix(in srgb, var(--teal-soft) 60%, var(--surface)); }
.p2-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.p2-load { font-size: 12px; color: var(--muted); white-space: nowrap; }
.p2-load.busy { color: var(--amber); }
.prows { display: flex; flex-direction: column; gap: 10px; }
.prow { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; }
.prow-top { display: flex; gap: 12px; align-items: flex-start; }
.prow-n { padding-top: 12px; }
.prow-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.prow-title { font-weight: 600; font-size: 15px; }
.prow-who { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-left: 30px; }
.prow-who select { flex: 1 1 240px; }
.prow-who .due-i { width: auto; }
.prow:not(.is-person) .due-l, .prow:not(.is-person) .due-i { display: none; }
.wizard:not(.js) .prow .due-l, .wizard:not(.js) .prow .due-i { display: inline-flex; }
.match { margin-left: 30px; align-self: flex-start; padding: 4px 10px; border-radius: 8px; font-size: 13px; background: var(--surface-2); color: var(--text-2); }
.match.good { background: var(--green-soft); color: var(--green); font-weight: 500; }
.prow.is-agent .match { background: var(--pri-soft); color: var(--pri-text); }
.wiz-foot { position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 -8px 24px rgba(0,0,0,.06); }
.wizard[data-mode="manual"] .wiz-foot .btn-p { background: var(--teal); }
.live-n { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); }
.pstatus { display: flex; flex-direction: column; gap: 6px; padding-left: 52px; }
.pstatus-t { font-size: 15px; color: var(--text); }
.pstatus [data-progress] .bar { max-width: 520px; display: block; }
.pcard.done { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); }
.who-form { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); }
.ed-pop.wide > form + form { margin-top: 6px; }
.plist { display: flex; flex-direction: column; gap: 12px; }
.switch-box { max-width: 860px; display: flex; flex-direction: column; gap: 18px; padding: 24px; }
.sw-list { display: flex; flex-direction: column; }
.sw-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line-2); }
.sw-t { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sw-pick { display: flex; gap: 8px; flex-wrap: wrap; flex: 0 1 420px; }
.sw-pick select { flex: 1 1 240px; }
.sw-pick input { width: auto; }
@media (max-width: 700px) { .pstatus, .prow-who { padding-left: 0; } .match { margin-left: 0; } .wiz2 h1 { font-size: 22px; } }

/* ===== Round 5: writing page, citation popover, health check ===== */
.write-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.write { display: grid; grid-template-columns: 240px minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.w-secs { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.w-secs .mono { padding: 4px 8px 8px; }
.w-sec { display: flex; flex-direction: column; gap: 6px; padding: 9px 10px; border-radius: 9px; text-decoration: none; color: var(--text); }
.w-sec:hover { background: var(--surface-2); filter: none; }
.w-sec.on { background: var(--acc-soft); }
.w-sec-t { display: flex; align-items: center; gap: 8px; font-size: 14px; min-width: 0; }
.w-sec-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-sec.on .w-sec-n { font-weight: 600; }
.w-bar { display: block; height: 4px; border-radius: 2px; background: var(--line-2); overflow: hidden; margin-left: 16px; }
.w-bar span { display: block; height: 100%; background: var(--acc); border-radius: 2px; }
.w-paper { position: relative; padding: 0; min-height: 520px; display: flex; flex-direction: column; }
.w-paper-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 18px 24px 14px; border-bottom: 1px solid var(--line-2); }
.w-paper-head h1 { font-size: 24px; margin-top: 4px; }
.w-paper > form { padding: 20px 24px; }
.w-paper .paper-view { position: relative; flex: 1; }
.drop-hint { display: none; margin-top: 8px; padding: 18px; border: 2px dashed var(--acc); border-radius: 12px; text-align: center; color: var(--acc); font: 500 14px var(--font); background: var(--acc-soft); }
.w-paper.dragging .drop-hint { display: block; }
.w-paper.over .drop-hint { background: var(--acc); color: #fff; }
.cite-chip { border: 0; background: transparent; padding: 0 2px; color: var(--acc); font: 600 13px var(--font); cursor: pointer; border-radius: 4px; vertical-align: baseline; }
.cite-chip:hover, .cite-chip:focus-visible, .cite-chip.on { background: var(--acc-soft); }
.cite-pop { position: absolute; z-index: 40; width: 360px; max-width: calc(100% - 24px); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; font: 400 14px/1.45 var(--font); }
.cite-pop[hidden] { display: none; }
.cite-pop .cp-t { font-weight: 600; font-size: 15px; }
.cite-pop .cp-sup { font-size: 13.5px; color: var(--text-2); padding: 8px 10px; border-radius: 8px; background: var(--surface-2); }
.w-ev { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.w-ev-toggle { display: none; }
.w-ev-body { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.w-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.w-card[draggable="true"] { cursor: grab; }
.w-card.used { background: var(--surface-2); opacity: .8; }
.w-card.drag { opacity: .4; }
.w-card[hidden] { display: none; }
.w-card-t { font-size: 14px; line-height: 1.5; }
.grip { color: var(--muted); letter-spacing: -2px; font-size: 12px; }
@media (max-width: 1200px) { .write { grid-template-columns: 220px minmax(0, 1fr); } .w-ev { grid-column: 1 / -1; position: static; max-height: none; } }
@media (max-width: 900px) {
  .write { grid-template-columns: 1fr; }
  .w-secs { position: static; flex-direction: row; overflow-x: auto; gap: 6px; }
  .w-secs .mono, .w-secs form { display: none; }
  .w-sec { flex: none; min-width: 150px; border: 1px solid var(--line-2); }
  .w-paper-head { padding: 14px 16px; }
  .paper-view { padding: 18px 16px 24px; }
}
@media (max-width: 700px) {
  /* Evidence becomes a pull-up sheet */
  .w-ev { position: fixed; top: auto; left: 0; right: 0; bottom: 64px; z-index: 55; max-height: 70vh; border-radius: 18px 18px 0 0; box-shadow: 0 -12px 32px rgba(0,0,0,.18); transform: translateY(calc(100% - 56px)); transition: transform .25s; overflow: hidden; display: flex; flex-direction: column; }
  .w-ev.open { transform: none; }
  .w-ev-toggle { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px 18px; border: 0; background: transparent; font: inherit; color: var(--text); cursor: pointer; position: relative; flex: none; }
  .w-ev-toggle b { flex: 1; text-align: left; }
  .w-ev-toggle .grab { position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--line); }
  .w-ev-body { overflow-y: auto; padding-top: 0; }
  .w-ev-body > .split:first-child { display: none; }
  .write { padding-bottom: 60px; }
}
@media (prefers-reduced-motion: reduce) { .w-ev { transition: none; } }
.hc { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; max-width: 1200px; }
.hc-main { flex: 3 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.hc-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 84px; }
.hc-top { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 24px; }
.hc-top h1 { font-size: 26px; }
.ring { width: 104px; height: 104px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; }
.ring > div { width: 86px; height: 86px; border-radius: 50%; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring b { font-size: 26px; }
.ring span { font-size: 11px; color: var(--muted); }
.hc-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.hc-row.bad { border-color: color-mix(in srgb, var(--red) 35%, var(--line)); }
.hc-ico { width: 36px; height: 36px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; }
.hc-body { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hc-body b { font-size: 16px; }
.hc-body .text-2 { font-size: 14px; line-height: 1.5; }
.hc-where { font-size: 13.5px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); color: var(--text-2); line-height: 1.5; white-space: pre-line; }
.str-row { display: grid; grid-template-columns: 120px 1fr 28px; gap: 8px; align-items: center; font-size: 13px; }
.str-row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.str-bar { height: 8px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.str-bar span { display: block; height: 100%; }
.str-row b { font: 600 12px var(--mono); }
.help { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; max-width: 1100px; }
.help .card { display: flex; flex-direction: column; gap: 10px; }
.help-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; line-height: 1.5; }
.workspace > .tabs.big { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; position: static; padding: 0; }
.workspace > .tab { background: transparent; border: 0; padding: 0; }
.ev-head .more-menu .ed-pop { right: 0; }
.wiz-steps li span.m-agent, .wiz-steps li span.m-manual { width: auto; height: auto; border-radius: 0; background: none !important; color: inherit !important; font: inherit; display: inline; }
.paper-view .empty2 { font-family: var(--font); }
@media (max-width: 700px) { .top [data-theme-toggle], .top a.icon-btn[href="/inbox"] { display: none; } .top .crumb { flex-basis: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
.paper-view > div > p + p { margin-top: 14px; }
html[data-theme="dark"] { --acc-soft: color-mix(in srgb, var(--acc) 24%, #1F1C1A); }
html[data-theme="dark"] .ev2.sel { box-shadow: 0 0 0 3px var(--acc-soft); }