/* Team Portal — light, clean theme */
@font-face {
  font-family: 'Geist';
  src: url('fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --bg: #f7f7f4;
  --surface: #ffffff;
  --surface-2: #faf9f6;
  --hover: #f3f2ee;
  --line: #ebeae5;
  --line-2: #dfddd6;
  --ink: #17191c;
  --ink-2: #565a62;
  --ink-3: #979aa1;
  --brand: #13795b;
  --brand-2: #0f6a4f;
  --brand-soft: #e7f4ee;
  --mine: #e4f3ea;
  --chat: #f1efea;
  --ok: #13795b;
  --ok-soft: #e7f4ee;
  --warn: #b7770b;
  --warn-soft: #fbf1dd;
  --danger: #c9362e;
  --danger-soft: #fbe9e7;
  --blue: #2c63d6;
  --blue-soft: #e9effc;
  --shadow-sm: 0 1px 2px rgba(23, 25, 28, .05);
  --shadow: 0 1px 2px rgba(23, 25, 28, .04), 0 10px 28px -18px rgba(23, 25, 28, .18);
  --shadow-lg: 0 20px 50px rgba(23, 25, 28, .14), 0 2px 6px rgba(23, 25, 28, .06);
  --r: 14px;
  --font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font: 14.5px/1.55 var(--font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -.02em; font-weight: 650; }
h1 { font-size: 30px; font-weight: 600; letter-spacing: -.032em; }
h2 { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
h3 { font-size: 15px; letter-spacing: -.01em; }
p { margin: 0; }
.muted { color: var(--ink-3); }
.dim { color: var(--ink-2); }
.small { font-size: 12.5px; }
.spacer { flex: 1; }
::selection { background: #cfe9dc; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d9d7d0; border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
svg.i { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.i.sm { width: 16px; height: 16px; }
svg.i.xs { width: 13px; height: 13px; }

/* ---------- Controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap;
  height: 36px; padding: 0 14px; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 13.5px;
  background: var(--surface); border: 1px solid var(--line-2); color: var(--ink); box-shadow: var(--shadow-sm);
  transition: background .12s, border-color .12s, transform .05s;
}
.btn:hover { background: var(--hover); }
.btn:active { transform: translateY(1px); }
.btn.dark { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(23, 25, 28, .2); }
.btn.dark:hover { background: #2a2d33; }
.btn.green { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.green:hover { background: var(--brand-2); }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-2); }
.btn.ghost:hover { background: var(--hover); color: var(--ink); }
.btn.danger { color: var(--danger); }
.btn.sm { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; }
.btn.xs { height: 26px; padding: 0 9px; font-size: 12px; border-radius: 7px; gap: 5px; box-shadow: none; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.icon-btn { width: 36px; height: 36px; border-radius: 10px; border: 0; background: transparent; cursor: pointer; display: inline-grid; place-items: center; color: var(--ink-2); flex: none; }
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.icon-btn.on { background: var(--brand-soft); color: var(--brand); }

.input, select.input, textarea.input {
  width: 100%; height: 40px; padding: 0 12px; border-radius: 10px; outline: none;
  background: var(--surface); border: 1px solid var(--line-2); color: var(--ink);
  transition: border-color .12s, box-shadow .12s;
}
textarea.input { height: auto; padding: 10px 12px; resize: vertical; min-height: 80px; line-height: 1.5; }
select.input { appearance: none; padding-right: 30px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23565a62' stroke-width='2.2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; }
.input::placeholder { color: var(--ink-3); }
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(19, 121, 91, .12); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.chip {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--hover); white-space: nowrap;
}
.chip.cat { color: hsl(var(--h) 45% 32%); background: hsl(var(--h) 55% 94%); }
.chip.ok { color: var(--ok); background: var(--ok-soft); }
.chip.warn { color: var(--warn); background: var(--warn-soft); }
.chip.danger { color: var(--danger); background: var(--danger-soft); }
.chip.blue { color: var(--blue); background: var(--blue-soft); }
.chip.toggle { cursor: pointer; user-select: none; background: var(--surface); border: 1px solid var(--line-2); height: 30px; padding: 0 12px; font-size: 13px; }
.chip.toggle:hover { border-color: var(--ink-3); }
.chip.toggle.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip.toggle .n { opacity: .6; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.avatar {
  --s: 30px; width: var(--s); height: var(--s); border-radius: 50%; flex: none;
  display: inline-grid; place-items: center; font-weight: 700; font-size: calc(var(--s) * .38);
  color: var(--pc, #555); background: color-mix(in srgb, var(--pc, #999) 15%, #fff); box-shadow: 0 0 0 2px var(--surface);
}
.stack { display: inline-flex; align-items: center; }
.stack .avatar { margin-left: -7px; }
.stack .avatar:first-child { margin-left: 0; }
.stack .more { background: var(--hover); color: var(--ink-2); }
.plogo {
  --s: 40px; width: var(--s); height: var(--s); border-radius: 11px; flex: none; overflow: hidden;
  display: grid; place-items: center; font-weight: 700; font-size: calc(var(--s) * .36); letter-spacing: -.02em;
  color: hsl(var(--h) 50% 28%); background: hsl(var(--h) 55% 88%);
}
.plogo img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.empty { text-align: center; padding: 48px 16px; color: var(--ink-3); }
.empty b { display: block; color: var(--ink-2); font-size: 15px; margin-bottom: 4px; }
.empty .big { font-size: 30px; margin-bottom: 8px; }

/* ---------- Auth ---------- */
.auth { height: 100dvh; overflow: auto; display: grid; place-items: center; padding: 24px 16px; }
.auth-card { width: 100%; max-width: 440px; padding: 36px; border-radius: 20px; }
.auth-card.wide { max-width: 600px; }
.auth-card h1 { margin: 22px 0 8px; }
.auth-card > p { color: var(--ink-2); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; letter-spacing: -.02em; }
.brand .mark { width: 32px; height: 32px; border-radius: 9px; background: var(--brand); color: #fff; display: grid; place-items: center; }
.persona { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: var(--surface); width: 100%; text-align: left; margin-top: 8px; transition: all .12s; }
.persona:hover { border-color: var(--brand); background: var(--brand-soft); }
.persona .avatar { --s: 38px; }
.persona .tag { margin-left: auto; }
.notice { padding: 12px 14px; border-radius: 12px; background: var(--warn-soft); color: #7a5208; font-size: 13px; margin-top: 16px; }
.notice.info { background: var(--blue-soft); color: #234b9e; }
.notice a { text-decoration: underline; }

/* ---------- Shell ---------- */
.demo-bar { height: 30px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: #fff; background: var(--ink); white-space: nowrap; overflow: hidden; padding: 0 12px; }
.demo-bar button { background: none; border: 0; color: #fff; text-decoration: underline; cursor: pointer; font-size: 12px; padding: 0; opacity: .85; }
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); height: 100dvh; }
.demo-bar ~ .app { height: calc(100dvh - 30px); }
.side { display: flex; flex-direction: column; min-height: 0; background: #f1f0ec; border-right: 1px solid var(--line); }
.side-top { padding: 18px 16px 10px; }
.side-scroll { flex: 1; overflow-y: auto; padding: 8px 10px 16px; }
.nav-sec { font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; padding: 18px 10px 6px; display: flex; justify-content: space-between; align-items: center; }
.nav-sec button { border: 0; background: none; color: var(--ink-3); cursor: pointer; padding: 2px; border-radius: 6px; display: grid; }
.nav-sec button:hover { background: var(--hover); color: var(--ink); }
.nav-item { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 9px; color: var(--ink-2); font-weight: 600; font-size: 13.5px; min-width: 0; }
.nav-item:hover { background: rgba(23, 25, 28, .045); color: var(--ink); }
.nav-item.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(23, 25, 28, .08), 0 0 0 1px rgba(23, 25, 28, .04); }
.nav-item.on svg { color: var(--brand); }
.nav-item .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item .plogo { --s: 22px; border-radius: 6px; font-size: 9px; }
.count { font-size: 11.5px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.count.hot { color: #fff; background: var(--brand); border-radius: 999px; padding: 1px 7px; }
.count.red { color: #fff; background: var(--danger); border-radius: 999px; padding: 1px 7px; }
.side-foot { border-top: 1px solid rgba(23, 25, 28, .06); padding: 10px; }
.me-card { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; cursor: pointer; width: 100%; border: 0; background: none; text-align: left; }
.me-card:hover { background: rgba(23, 25, 28, .045); }
.me-card .who { flex: 1; min-width: 0; }
.me-card { color: var(--ink); }
.me-card b { display: block; font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-card span { font-size: 11.5px; color: var(--ink-3); }
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.mtop { display: none; }
.content { flex: 1; overflow-y: auto; min-height: 0; }
.content.fill { overflow: hidden; }
.page { max-width: 1200px; margin: 0 auto; padding: 36px 36px 72px; }
.page.narrow { max-width: 880px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.page-head p { color: var(--ink-2); margin-top: 6px; }
.scrim { display: none; }
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; z-index: 60; top: 0; bottom: 0; left: 0; width: 280px; transform: translateX(-102%); transition: transform .22s ease; }
  .side.open { transform: none; box-shadow: var(--shadow-lg); }
  .scrim.open { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .3); z-index: 55; }
  .mtop { display: flex; align-items: center; gap: 8px; height: 54px; padding: 0 10px; background: var(--surface); border-bottom: 1px solid var(--line); flex: none; }
  .mtop .t { font-weight: 700; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .page { padding: 20px 16px 48px; }
  h1 { font-size: 24px; }
}

/* ---------- Home: summary, folders ---------- */
.summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 32px; }
.sum { padding: 16px 18px; display: flex; align-items: center; gap: 14px; transition: border-color .12s, transform .12s; }
.sum:hover { border-color: var(--line-2); transform: translateY(-1px); }
.sum .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--c-soft); color: var(--c); flex: none; }
.sum .n { font-size: 24px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sum .l { font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
@media (max-width: 700px) { .summary { grid-template-columns: 1fr; gap: 8px; } .sum { padding: 12px 14px; } }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; flex-wrap: wrap; }
.sec-head h2 { display: flex; align-items: center; gap: 8px; }
.search { position: relative; }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.search .input { padding-left: 34px; height: 36px; }

.folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px 18px; }
.folder-card { position: relative; padding-top: 12px; display: block; transition: transform .15s; min-width: 0; }
.folder-card:hover { transform: translateY(-3px); }
.folder-card::before { content: ""; position: absolute; top: 0; left: 0; width: 42%; height: 24px; border-radius: 12px 14px 0 0; background: hsl(var(--h) 42% 82%); }
.folder-body { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 4px 16px 16px 16px; box-shadow: var(--shadow); overflow: hidden; transition: box-shadow .15s, border-color .15s; }
.folder-card:hover .folder-body { box-shadow: var(--shadow-lg); border-color: var(--line-2); }
.folder-top { height: 84px; background: linear-gradient(135deg, hsl(var(--h) 50% 91%), hsl(calc(var(--h) + 30) 50% 95%)); display: flex; align-items: flex-end; padding: 0 16px; position: relative; }
.folder-top .plogo { --s: 54px; border-radius: 14px; transform: translateY(22px); box-shadow: 0 0 0 4px var(--surface), var(--shadow); background: hsl(var(--h) 48% 80%); }
.folder-top .flag { position: absolute; top: 12px; right: 12px; }
.flag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-2); padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .85); white-space: nowrap; }
.folder-info { padding: 30px 16px 14px; }
.folder-info h3 { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-info .chips { margin-top: 8px; }
.folder-foot { display: flex; justify-content: space-between; align-items: center; padding: 11px 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); gap: 8px; }
.folder-foot .avatar { --s: 24px; }
.folder-foot b.red { color: var(--danger); }
.folder-foot b.me { color: var(--brand); }
.folder-new { border: 1.5px dashed var(--line-2); border-radius: 16px; display: grid; place-items: center; min-height: 214px; color: var(--ink-3); font-weight: 600; cursor: pointer; background: transparent; margin-top: 12px; }
.folder-new:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.folder-new span { display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* ---------- Statement (activity ledger) ---------- */
.statement { margin-top: 44px; }
.ledger { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: auto; }
.ledger th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; }
.ledger th:last-child { text-align: right; }
.ledger td { padding: 9px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ledger tr:last-child td { border-bottom: 0; }
.ledger tbody tr:nth-child(even) td { background: #fcfcfa; }
.ledger tbody tr.link { cursor: pointer; }
.ledger tbody tr.link:hover td { background: var(--hover); }
.ledger .when { color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; width: 1%; }
.ledger .who { white-space: nowrap; font-weight: 600; width: 1%; }
.ledger .what { color: var(--ink-2); max-width: 0; width: 100%; }
.ledger .what div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger .what b { color: var(--ink); font-weight: 600; }
.ledger .proj { white-space: nowrap; width: 1%; }
.ledger .amt { text-align: right; white-space: nowrap; width: 1%; font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }
.amt .plus { color: var(--blue); }
.amt .ok { color: var(--ok); }
.amt .late { color: var(--warn); }
.amt .minus { color: var(--danger); }
.amt .zero { color: var(--ink-3); font-weight: 600; }
.pchip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); font-weight: 500; white-space: nowrap; max-width: 100%; }
.pchip .plogo { --s: 18px; border-radius: 5px; font-size: 8px; }
.pchip span { overflow: hidden; text-overflow: ellipsis; }
.stmt-foot { display: flex; justify-content: center; padding: 10px; border-top: 1px solid var(--line); }
@media (max-width: 700px) {
  .ledger .proj, .ledger th.proj { display: none; }
  .ledger td, .ledger th { padding: 9px 10px; }
  .ledger .when { font-size: 11.5px; }
}

/* ---------- Project (group) ---------- */
.project { display: flex; flex-direction: column; height: 100%; }
.phead { background: var(--surface); border-bottom: 1px solid var(--line); flex: none; }
.phead-in { max-width: 1400px; margin: 0 auto; padding: 16px 28px 0; }
.phead-row { display: flex; align-items: center; gap: 14px; min-width: 0; }
.phead-row .plogo { --s: 46px; border-radius: 13px; }
.phead-row .meta { flex: 1; min-width: 0; }
.phead-row h1 { font-size: 21px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phead-row .sub { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 5px; font-size: 12.5px; color: var(--ink-3); }
.phead-row .sub .flag { background: var(--hover); }
.tabs { display: flex; gap: 2px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { padding: 10px 14px; font-weight: 600; font-size: 13.5px; color: var(--ink-3); border-bottom: 2px solid transparent; white-space: nowrap; display: inline-flex; gap: 7px; align-items: center; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--ink); border-bottom-color: var(--ink); }
.pbody { flex: 1; min-height: 0; overflow-y: auto; }
.pbody.chatmode { overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 290px; }
@media (max-width: 1100px) { .pbody.chatmode { grid-template-columns: minmax(0, 1fr); } .people-panel { display: none; } }
@media (max-width: 900px) { .phead-in { padding: 12px 14px 0; } .phead-row .plogo { --s: 40px; } .phead-row h1 { font-size: 18px; } .phead-row > .stack, .phead-row > .btn { display: none; } }

/* Chat */
.chat { display: flex; flex-direction: column; min-height: 0; background: var(--chat); position: relative; }
.chat::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .7; background-image: radial-gradient(rgba(23, 25, 28, .05) 1px, transparent 1px); background-size: 18px 18px; }
.chat-bar { position: relative; z-index: 1; display: flex; gap: 6px; padding: 10px 18px; overflow-x: auto; scrollbar-width: none; align-items: center; background: rgba(246, 245, 241, .92); border-bottom: 1px solid var(--line); flex: none; }
.chat-bar::-webkit-scrollbar { display: none; }
.chat-bar .chip.toggle { height: 28px; font-size: 12.5px; flex: none; }
.chat-bar .chip.focus { background: var(--brand); color: #fff; border: 0; height: 28px; padding: 0 6px 0 4px; flex: none; }
.chat-bar .chip.focus .avatar { --s: 20px; box-shadow: none; }
.chat-bar .chip.focus button { border: 0; background: none; color: #fff; cursor: pointer; font-size: 15px; padding: 0 4px; }
.msgs { position: relative; flex: 1; overflow-y: auto; padding: 8px 18px 18px; }
.msgs-in { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.day { align-self: center; background: var(--surface); color: var(--ink-2); font-size: 11.5px; font-weight: 700; padding: 4px 12px; border-radius: 8px; box-shadow: var(--shadow-sm); margin: 10px 0 2px; }
.msg { display: flex; gap: 8px; align-items: flex-end; max-width: min(620px, 92%); }
.msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.msg > .avatar { --s: 30px; margin-bottom: 2px; }
.bubble { background: var(--surface); border-radius: 16px 16px 16px 4px; padding: 10px 13px 9px; box-shadow: var(--shadow-sm); min-width: 0; flex: 1; border: 1px solid rgba(23, 25, 28, .04); }
.msg.mine .bubble { background: var(--mine); border-radius: 16px 16px 4px 16px; }
.msg.flash .bubble { animation: flash 1.8s ease-out; }
@keyframes flash { 0%, 35% { box-shadow: 0 0 0 3px var(--brand); } 100% { box-shadow: var(--shadow-sm); } }
.bhead { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.bhead .name { font-weight: 650; font-size: 13.5px; color: var(--pc); letter-spacing: -.01em; }
.bhead .role { font-size: 11px; color: var(--ink-3); font-weight: 600; }
.bhead .time { margin-left: auto; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.btext { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; }
.btext a, .rtext a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.mention { font-weight: 600; color: var(--pc); }
/* Only YOUR name is a filled pill, so it jumps out the way WhatsApp highlights you. Everyone else's @name is coloured text. */
.mention.me { background: color-mix(in srgb, var(--pc) 16%, #fff); padding: 1px 7px; border-radius: 999px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc) 32%, transparent); white-space: nowrap; }
/* Your own name is always an @mention, in any heading, list or table. */
h1 .mention.me { font-size: .82em; padding: 0 .35em; border-radius: .5em; vertical-align: .08em; }
b .mention.me, .mention.me b { font-weight: 650; }
.me-card .who b .mention.me { padding: 0 6px; font-size: 13px; }
.who-pill.me:not(.ok):not(.late):not(.over) { background: color-mix(in srgb, var(--pc) 14%, #fff); border-color: color-mix(in srgb, var(--pc) 40%, #fff); }
.msg.mine .who-pill.me:not(.ok):not(.late):not(.over) { background: color-mix(in srgb, var(--pc) 14%, #fff); }
.task-foot { margin-top: 9px; padding-top: 9px; border-top: 1px dashed rgba(23, 25, 28, .12); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.who-pill { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px 0 3px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-2); }
.who-pill .avatar { --s: 20px; box-shadow: none; }
.who-pill:not(.ok):not(.late):not(.over) { color: var(--ink-2); }
.who-pill.me:not(.ok):not(.late):not(.over) { color: var(--pc); }
.who-pill.ok { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.who-pill.late { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.who-pill.over { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.msg.mine .who-pill:not(.ok):not(.late):not(.over) { background: rgba(255, 255, 255, .7); }
.due { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.due.over { color: var(--danger); }
.due.soon { color: var(--warn); }
.due.done { color: var(--ok); }
.task-foot .due { margin-right: 4px; }
.closed-tag { font-size: 11.5px; font-weight: 700; color: var(--ok); }
.bacts { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.bacts .btn.xs.ghost { color: var(--ink-3); }
.bacts .btn.xs.ghost:hover { color: var(--ink); }
.atts { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.att { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: rgba(255, 255, 255, .75); border: 1px solid var(--line); min-width: 0; font-size: 13px; }
.att:hover { border-color: var(--line-2); background: #fff; }
.att .ai { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--c-soft); color: var(--c); }
.att .an { flex: 1; min-width: 0; }
.att .an div { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att .an small { color: var(--ink-3); font-size: 11.5px; }
.thread { margin-top: 10px; padding: 10px; border-radius: 12px; background: rgba(23, 25, 28, .035); display: flex; flex-direction: column; gap: 9px; }
.msg.mine .thread { background: rgba(255, 255, 255, .55); }
.rrow { display: flex; gap: 8px; font-size: 13px; }
.rrow .avatar { --s: 22px; box-shadow: none; }
.rrow b { font-weight: 700; }
.rrow .t { color: var(--ink-3); font-size: 11px; margin-left: 4px; }
.rrow .sys { color: var(--ink-2); }
.rrow .body { flex: 1; min-width: 0; }
.rtext { white-space: pre-wrap; overflow-wrap: anywhere; }
.rbox { display: flex; gap: 6px; align-items: flex-end; position: relative; }
.rbox textarea { min-height: 38px; height: 38px; resize: none; padding: 8px 10px; font-size: 13.5px; }

.composer { position: relative; background: var(--surface); border-top: 1px solid var(--line); flex: none; z-index: 2; }
.composer-in { max-width: 820px; margin: 0 auto; padding: 10px 14px 10px; position: relative; }
.comp-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px 8px; }
.comp-tags:empty { display: none; }
.ctag { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 4px 0 3px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: color-mix(in srgb, var(--pc, #999) 12%, #fff); color: var(--pc, var(--ink-2)); }
.ctag .avatar { --s: 22px; box-shadow: none; }
.ctag button { border: 0; background: none; cursor: pointer; color: inherit; font-size: 15px; line-height: 1; padding: 0 5px; }
.ctag.plain { background: var(--hover); color: var(--ink-2); padding: 0 4px 0 10px; }
.comp-row { display: flex; align-items: flex-end; gap: 4px; }
.comp-row textarea { flex: 1; resize: none; min-height: 44px; max-height: 160px; border-radius: 22px; padding: 11px 16px; border: 1px solid var(--line-2); background: var(--surface-2); outline: none; line-height: 1.45; font-size: 14.5px; }
.comp-row textarea:focus { border-color: var(--brand); background: #fff; }
.comp-row .icon-btn { width: 40px; height: 44px; }
.send { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--brand); color: #fff; cursor: pointer; display: grid; place-items: center; flex: none; box-shadow: 0 4px 12px rgba(19, 121, 91, .3); margin-left: 2px; }
.send:hover { background: var(--brand-2); }
.send:disabled { opacity: .5; }
.hint { font-size: 11.5px; color: var(--ink-3); padding: 6px 6px 0; }
.popover { position: absolute; z-index: 40; bottom: calc(100% + 6px); left: 14px; width: min(320px, calc(100% - 28px)); background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; max-height: 300px; overflow: auto; }
.popover.right { left: auto; right: 14px; }
.popover .ph { font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; padding: 6px 8px; }
.mopt { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 9px; cursor: pointer; width: 100%; border: 0; background: none; text-align: left; }
.mopt.on, .mopt:hover { background: var(--brand-soft); }
.mopt .avatar { --s: 30px; box-shadow: none; }
.mopt small { display: block; color: var(--ink-3); font-size: 12px; }
.pop-row { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 8px 8px; }
.pop-row .input { height: 34px; }
.pop-row .chip.toggle { height: 28px; font-size: 12.5px; }

.people-panel { background: var(--surface); border-left: 1px solid var(--line); overflow-y: auto; padding: 16px 12px; }
.people-panel h3 { padding: 0 8px 2px; }
.people-panel .sub { padding: 0 8px 10px; font-size: 12px; color: var(--ink-3); }
.prow { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 11px; cursor: pointer; width: 100%; border: 0; background: none; text-align: left; }
.prow:hover { background: var(--hover); }
.prow.on { background: var(--brand-soft); }
.prow .avatar { --s: 34px; }
.prow .nm { flex: 1; min-width: 0; }
.prow .nm b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .nm small { color: var(--ink-3); font-size: 11.5px; }
.prow .nums { display: flex; gap: 4px; flex: none; }

/* Everyone's tasks */
.ppl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.pcard { padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pcard-h { display: flex; align-items: center; gap: 10px; }
.pcard-h .avatar { --s: 40px; }
.pcard-h .nm { flex: 1; min-width: 0; }
.pcard-h b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-h small { color: var(--ink-3); font-size: 12px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.stats div { padding: 8px 6px; text-align: center; border-right: 1px solid var(--line); }
.stats div:last-child { border-right: 0; }
.stats b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stats span { font-size: 11px; color: var(--ink-3); font-weight: 600; }
.stats .red b { color: var(--danger); }
.stats .green b { color: var(--ok); }
.stats .amber b { color: var(--warn); }
.stats .zero b { color: var(--line-2); }
.tline { display: flex; align-items: flex-start; gap: 10px; padding: 8px; margin: 0 -8px; border-radius: 9px; cursor: pointer; font-size: 13px; min-width: 0; }
.tline:hover { background: var(--hover); }
.tline .txt { flex: 1; min-width: 0; }
.tline .txt div { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tline .txt small { color: var(--ink-3); font-size: 11.5px; }
.tline.done .txt div { color: var(--ink-3); text-decoration: line-through; }
.dotc { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--line-2); }
.dotc.over { background: var(--danger); }
.dotc.soon { background: var(--warn); }
.dotc.ok { background: var(--ok); }
.dotc.late { background: var(--warn); }

/* Task lists */
.tlist { overflow: hidden; }
.grp-h { display: flex; align-items: center; gap: 8px; padding: 11px 18px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.grp-h .avatar { --s: 22px; box-shadow: none; }
.grp-h.red { color: var(--danger); }
.grp-h.norm { text-transform: none; letter-spacing: -.005em; font-size: 13px; color: var(--ink); }
.trow { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--line); cursor: pointer; min-width: 0; }
.trow:hover { background: var(--surface-2); }
.trow:last-child { border-bottom: 0; }
.trow .main-t { flex: 1; min-width: 0; }
.trow .main-t .tx { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow .main-t .mt { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 12px; color: var(--ink-3); flex-wrap: wrap; }
.trow .right { display: flex; align-items: center; gap: 12px; flex: none; }
.trow.is-done .tx { color: var(--ink-3); text-decoration: line-through; }
.check { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line-2); background: var(--surface); cursor: pointer; display: grid; place-items: center; color: transparent; padding: 0; flex: none; transition: all .12s; }
.check:hover { border-color: var(--brand); color: var(--brand); }
.check.done { background: var(--brand); border-color: var(--brand); color: #fff; }
.check svg { width: 13px; height: 13px; stroke-width: 3; }
.tabs-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
@media (max-width: 700px) { .trow { padding: 12px 14px; align-items: flex-start; } .trow .right { flex-direction: column; align-items: flex-end; gap: 4px; } .trow .right .stack { display: none; } }

/* Drive & info */
.drive-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.bc { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; font-weight: 600; font-size: 15px; }
.bc a { color: var(--ink-3); padding: 4px 8px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.bc a:hover { background: var(--hover); color: var(--ink); }
.bc .cur { padding: 4px 8px; }
.dfolders { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 20px; }
.dfolder { padding: 14px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 600; min-width: 0; }
.dfolder:hover { border-color: var(--line-2); background: var(--surface-2); }
.dfolder svg { color: #8f8a7c; fill: #ebe6d6; width: 22px; height: 22px; }
.dfolder span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); min-width: 0; }
.file:last-child { border-bottom: 0; }
.file:hover { background: var(--surface-2); }
.ft { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; font-size: 9.5px; font-weight: 800; flex: none; color: hsl(var(--h) 50% 32%); background: hsl(var(--h) 55% 92%); }
.file .nm { flex: 1; min-width: 0; }
.file .nm div { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file .nm small { color: var(--ink-3); }
.drop { border: 1.5px dashed var(--line-2); border-radius: var(--r); padding: 20px; text-align: center; color: var(--ink-3); margin-bottom: 20px; transition: all .12s; }
.drop.over { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.info-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1000px) { .info-grid { grid-template-columns: 1fr; } }
.box { padding: 20px 22px; }
.box + .box { margin-top: 18px; }
.info-list { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 14px 18px; margin-top: 16px; }
.info-list dt { color: var(--ink-3); font-size: 13px; font-weight: 600; }
.info-list dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.info-list dd a { color: var(--blue); }
.info-list dd.none { color: var(--ink-3); font-style: italic; }
@media (max-width: 560px) { .info-list { grid-template-columns: 1fr; gap: 2px; } .info-list dd { margin-bottom: 12px; } }
.progress { height: 6px; border-radius: 6px; background: var(--hover); overflow: hidden; margin-top: 10px; }
.progress i { display: block; height: 100%; background: var(--brand); border-radius: 6px; }
.mrow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.mrow:last-child { border-bottom: 0; }
.mrow .nm { flex: 1; min-width: 0; }
.mrow .nm div { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow .nm small { color: var(--ink-3); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-wrap { overflow-x: auto; }
.ttable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ttable th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.ttable td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ttable tr:last-child td { border-bottom: 0; }
.person-line { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }

/* Modal, menu, toast */
.modal-bg { position: fixed; inset: 0; background: rgba(23, 25, 28, .35); z-index: 100; display: grid; place-items: center; padding: 16px; animation: fade .15s; backdrop-filter: blur(3px); }
.modal { width: 100%; max-width: 600px; max-height: calc(100dvh - 32px); display: flex; flex-direction: column; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-lg); animation: pop .18s cubic-bezier(.2, .8, .2, 1); }
.modal-h { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px 4px; }
.modal-b { padding: 14px 24px; overflow-y: auto; }
.modal-f { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 24px 20px; border-top: 1px solid var(--line); }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: translateY(8px) scale(.98); opacity: 0; } }
.menu { position: fixed; min-width: 200px; padding: 6px; overscroll-behavior: contain; z-index: 130; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow-lg); animation: pop .12s; }
.menu button { display: flex; width: 100%; gap: 9px; align-items: center; padding: 8px 10px; border: 0; background: none; border-radius: 8px; cursor: pointer; text-align: left; font-size: 13.5px; font-weight: 500; }
.menu button:hover { background: var(--hover); }
.menu button.danger { color: var(--danger); }
.menu .who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.toasts { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 13.5px; font-weight: 500; box-shadow: var(--shadow-lg); animation: pop .18s; max-width: calc(100vw - 32px); }
.toast.err { background: var(--danger); }
.spinner { width: 22px; height: 22px; border: 2.5px solid var(--line-2); border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; }
.loading { display: grid; place-items: center; padding: 60px; }
@keyframes spin { to { transform: rotate(360deg); } }
.checks { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow: auto; border: 1px solid var(--line-2); border-radius: 12px; padding: 6px; }
.checks label { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: 13.5px; font-weight: 500; }
.checks label:hover { background: var(--hover); }
.checks input { accent-color: var(--brand); width: 16px; height: 16px; }
.checks .avatar { --s: 26px; box-shadow: none; }
.checks .plogo { --s: 26px; border-radius: 7px; font-size: 10px; }
@media (max-width: 900px) {
  .hint { display: none; }
  .project .phead-row h1 { font-size: 17px; }
  .comp-row .icon-btn { width: 34px; }
}

/* ================= Round 4 components ================= */
.eyebrow { font-size: 12px; font-weight: 600; color: var(--ink-3); letter-spacing: .02em; margin-bottom: 8px; }
.link { color: var(--brand); font-weight: 600; }
.link:hover { text-decoration: underline; }
.input.sm, select.input.sm { height: 34px; font-size: 13px; border-radius: 9px; }
select.input.sm { width: auto; max-width: 220px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .search { flex: 1; min-width: 200px; max-width: 340px; }
.toolbar .search .input { height: 34px; }
.empty.sm { padding: 22px 12px; font-size: 13px; }
.chip.toggle.sm { height: 26px; font-size: 12px; padding: 0 10px; }
.seg-mini { display: inline-flex; background: #ecebe6; border-radius: 10px; padding: 3px; gap: 2px; }
.seg-mini button { border: 0; background: none; height: 28px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.seg-mini button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(23, 25, 28, .1); }

/* Dashboard */
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.tile { padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; transition: transform .12s, border-color .12s; }
a.tile[href]:hover { transform: translateY(-1px); border-color: var(--line-2); }
.tile-l { font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
.tile-n { font-size: 30px; font-weight: 600; letter-spacing: -.035em; line-height: 1.15; margin-top: 6px; font-variant-numeric: tabular-nums; }
.tile-s { font-size: 12px; color: var(--ink-3); }
.tile.bad .tile-n { color: var(--danger); }
.tile.good .tile-n { color: var(--ok); }
@media (max-width: 1100px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile-n { font-size: 24px; } }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
@media (max-width: 1000px) { .dash-grid { grid-template-columns: 1fr; } }
.panel { padding: 18px 20px; min-width: 0; }
.panel-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.panel-h h3 { font-size: 15px; font-weight: 600; }
.mini { display: flex; align-items: center; gap: 12px; padding: 10px 10px; margin: 0 -10px; border-radius: 10px; cursor: pointer; min-width: 0; }
.mini:hover { background: var(--hover); }
.mini-main { flex: 1; min-width: 0; }
.mini-t { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-m { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); margin-top: 2px; min-width: 0; white-space: nowrap; overflow: hidden; }
.mini-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mini-table th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--ink-3); padding: 0 10px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mini-table th:first-child, .mini-table td:first-child { padding-left: 0; }
.mini-table td { padding: 10px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.mini-table tr:last-child td { border-bottom: 0; }
.mini-table tbody tr { cursor: pointer; }
.mini-table tbody tr:hover td { background: var(--surface-2); }
.mini-table td.red { color: var(--danger); font-weight: 600; }
.mini-table td.zero { color: var(--ink-3); }
.rate { display: inline-flex; align-items: center; gap: 8px; }
.rate-bar { width: 60px; height: 6px; border-radius: 6px; background: var(--hover); overflow: hidden; }
.rate-bar i { display: block; height: 100%; background: var(--ok); border-radius: 6px; }

/* Chart: stacked weekly bars (status colours: on time / late) */
.chart { display: flex; flex-direction: column; gap: 10px; }
.chart-legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-2); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.sw.ok { background: #1f9a6f; }
.sw.late { background: #d89a2b; }
.chart-plot { position: relative; height: 190px; padding-left: 26px; }
.chart-grid { position: absolute; inset: 0 0 22px 0; display: flex; flex-direction: column; justify-content: space-between; }
.chart-grid div { border-top: 1px solid var(--line); position: relative; }
.chart-grid div:last-child { border-top-color: var(--line-2); }
.chart-grid span { position: absolute; left: 0; top: -8px; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.chart-bars { position: absolute; left: 30px; right: 0; top: 0; bottom: 0; display: flex; gap: 10px; align-items: stretch; }
.bar-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 22px; position: relative; cursor: default; }
.bar-col:hover { background: linear-gradient(to top, transparent 22px, rgba(23, 25, 28, .03) 22px); border-radius: 6px; }
.bar-stack { width: min(28px, 70%); display: flex; flex-direction: column; gap: 2px; }
.bar-stack i { display: block; min-height: 3px; }
.bar-stack i:first-child { border-radius: 4px 4px 0 0; }
.bar-stack i.ok { background: #1f9a6f; }
.bar-stack i.late { background: #d89a2b; }
.bar-x { position: absolute; bottom: 0; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.tip { position: fixed; z-index: 300; background: var(--ink); color: #fff; font-size: 12px; font-weight: 500; padding: 6px 10px; border-radius: 8px; pointer-events: none; box-shadow: var(--shadow-lg); white-space: nowrap; }
@media (max-width: 640px) { .bar-x { font-size: 9.5px; } .chart-bars { gap: 4px; } }

/* Projects header: share button */
.share-btn { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px 0 6px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; font-weight: 600; font-size: 13px; box-shadow: var(--shadow-sm); flex: none; }
.share-btn:hover { background: var(--hover); }
.share-btn span:last-child { display: inline-flex; align-items: center; gap: 5px; }
.share-add { display: flex; gap: 8px; margin-bottom: 12px; }
.share-list .mrow .small { white-space: nowrap; }
@media (max-width: 900px) { .share-btn .stack { display: none; } .share-btn { padding: 0 10px; } }

/* Board (Trello-style) */
.board-wrap { min-height: 100%; }
.board-bar { display: flex; align-items: center; gap: 14px; padding: 16px 28px 0; flex-wrap: wrap; max-width: 1400px; margin: 0 auto; }
.check-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.check-label input { accent-color: var(--brand); }
.board { display: flex; gap: 14px; overflow-x: auto; padding: 16px 28px 20px; align-items: flex-start; max-width: 1400px; margin: 0 auto; }
.bcol { flex: 0 0 290px; background: #efeee9; border-radius: 16px; padding: 10px; display: flex; flex-direction: column; max-height: calc(100dvh - 260px); }
.bcol-h { display: flex; align-items: center; gap: 10px; padding: 4px 4px 10px; }
.bcol-h .nm { flex: 1; min-width: 0; }
.bcol-h b { display: block; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcol-h small { font-size: 11.5px; color: var(--ink-3); }
.bcol-h .avatar { box-shadow: none; }
.bcount { font-size: 12px; font-weight: 700; color: var(--ink-2); background: rgba(255, 255, 255, .7); border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.bdot { width: 10px; height: 10px; border-radius: 50%; margin-left: 4px; }
.bdot.st-open { background: var(--blue); }
.bdot.st-over { background: var(--danger); }
.bdot.st-done { background: var(--ok); }
.bnote { font-size: 11.5px; font-weight: 600; color: var(--danger); padding: 0 4px 8px; }
.bcards { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding: 2px; }
.bcard { background: var(--surface); border-radius: 12px; padding: 11px 12px; box-shadow: 0 1px 2px rgba(23, 25, 28, .08), 0 0 0 1px rgba(23, 25, 28, .03); cursor: pointer; display: flex; flex-direction: column; gap: 8px; transition: box-shadow .12s, transform .12s; }
.bcard:hover { box-shadow: 0 6px 18px -8px rgba(23, 25, 28, .25), 0 0 0 1px rgba(23, 25, 28, .06); transform: translateY(-1px); }
.bcard.over { box-shadow: inset 3px 0 0 var(--danger), 0 1px 2px rgba(23, 25, 28, .08); }
.bcard.done .bt { color: var(--ink-3); }
.bt { font-size: 13.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bm { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bicons { display: inline-flex; gap: 8px; color: var(--ink-3); font-size: 12px; }
.bicons span { display: inline-flex; align-items: center; gap: 3px; }
.bf { display: flex; align-items: center; }
.bempty { font-size: 12.5px; color: var(--ink-3); text-align: center; padding: 14px 0; }
.bdiv { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding: 10px 4px 2px; }
@media (max-width: 900px) { .board, .board-bar { padding-left: 14px; padding-right: 14px; } .bcol { flex-basis: 270px; } }

/* Info */
.info-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.info-head > div:first-child { flex: 1; min-width: 220px; }
.info-prog { width: 180px; }
.info-prog .progress { margin-top: 6px; }
.info-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
@media (max-width: 1000px) { .info-grid { grid-template-columns: minmax(0, 1fr); } }
.info-main, .info-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.info-card { padding: 18px 20px; }
.info-card + .info-card { margin-top: 0; }
#infof .info-card { margin-bottom: 16px; }
.info-card h3 { font-size: 14px; font-weight: 600; }
.info-card .info-list { grid-template-columns: 170px minmax(0, 1fr); gap: 10px 16px; margin-top: 12px; font-size: 13.5px; }
.about-top { display: flex; align-items: center; gap: 14px; }
.about-text { margin-top: 14px; color: var(--ink-2); line-height: 1.6; }
.ilink { display: flex; align-items: center; gap: 12px; padding: 9px 10px; margin: 0 -10px; border-radius: 10px; min-width: 0; color: var(--ink-3); }
.ilink:hover { background: var(--hover); }
.ilink-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); flex: none; }
.ilink-t { flex: 1; min-width: 0; }
.ilink-t b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ilink-t small { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.link-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) 36px; gap: 8px; margin-bottom: 8px; }
@media (max-width: 640px) { .link-row { grid-template-columns: 1fr 36px; } .link-row input:first-child { grid-column: 1 / -1; } .info-card .info-list { grid-template-columns: 1fr; } }

/* Done + file */
.done-panel { margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.msg.mine .done-panel { background: rgba(255, 255, 255, .7); }
.done-panel textarea { min-height: 56px; font-size: 13.5px; }
.dp-row { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }

/* ================= Round 5: banner, timeline, wallets, motion ================= */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes runLine { from { width: 0; } }
@keyframes runNow { from { left: 0; opacity: 0; } 10% { opacity: 1; } }
@keyframes lightUp { from { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 70% { transform: translate(-50%, -50%) scale(1.15); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes pulseRed { 0%, 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .55); } 50% { box-shadow: 0 0 0 7px rgba(229, 72, 77, 0); } }
@keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }

.page > * { animation: rise .45s cubic-bezier(.2, .8, .2, 1) both; }
.page > *:nth-child(2) { animation-delay: .04s; }
.page > *:nth-child(3) { animation-delay: .08s; }
.page > *:nth-child(4) { animation-delay: .12s; }
.page > *:nth-child(5) { animation-delay: .16s; }
.page > *:nth-child(n+6) { animation-delay: .2s; }
.tile, .folder-card, .bcol, .wallet { animation: rise .5s cubic-bezier(.2, .8, .2, 1) both; }
.tiles .tile:nth-child(2) { animation-delay: .05s; } .tiles .tile:nth-child(3) { animation-delay: .1s; }
.tiles .tile:nth-child(4) { animation-delay: .15s; } .tiles .tile:nth-child(5) { animation-delay: .2s; }
.bcol:nth-child(2) { animation-delay: .05s; } .bcol:nth-child(3) { animation-delay: .1s; } .bcol:nth-child(n+4) { animation-delay: .15s; }
.modal-bg { animation: fadeIn .18s both; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition: none !important; } }

/* Dark project banner */
.phead.dark { position: relative; background: #121418; border-bottom: 0; color: #f4f4f2; overflow: hidden; }
.phead.dark::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(700px 260px at 8% -20%, hsl(var(--h) 70% 45% / .35), transparent 70%), radial-gradient(500px 240px at 100% 120%, hsl(calc(var(--h) + 60) 70% 45% / .18), transparent 70%); }
.phead.dark::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px); background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, #000, transparent); }
.phead.dark .phead-in { position: relative; z-index: 1; padding-top: 20px; }
.phead.dark .phead-row h1 { color: #fff; }
.phead.dark .phead-row .sub { color: rgba(255, 255, 255, .55); }
.phead.dark .phead-row .sub .flag { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .85); }
.phead.dark .chip.cat { background: hsl(var(--h) 60% 60% / .16); color: hsl(var(--h) 80% 82%); }
.phead.dark .plogo { box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 10px 30px -10px hsl(var(--h) 70% 40% / .8); }
.phead.dark .share-btn { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: #fff; box-shadow: none; }
.phead.dark .share-btn:hover { background: rgba(255, 255, 255, .14); }
.phead.dark .share-btn .avatar { box-shadow: 0 0 0 2px #121418; }
.phead.dark .tabs a { color: rgba(255, 255, 255, .55); }
.phead.dark .tabs a:hover { color: #fff; }
.phead.dark .tabs a.on { color: #fff; border-bottom-color: #fff; }
.phead.dark .tabs .count { color: rgba(255, 255, 255, .6); }
.btn.glass { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #fff; box-shadow: none; }
.btn.glass:hover { background: rgba(255, 255, 255, .16); }

/* Timeline */
.tl { margin-top: 16px; padding: 12px 14px 12px; border-radius: 14px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .08); }
.tl-head { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.tl-month { font-weight: 650; color: #fff; letter-spacing: -.01em; }
.tl-sum { color: rgba(255, 255, 255, .6); }
.tl-sum .red { color: #ff8a8e; }
.tl-lock { display: inline-flex; gap: 5px; align-items: center; color: rgba(255, 255, 255, .45); font-size: 12px; }
.tl-track { position: relative; height: 92px; margin: 4px 8px 0; }
.tl-rail { position: absolute; left: 0; right: 0; top: 46px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .1); }
.tl-fill { position: absolute; left: 0; top: 46px; height: 4px; border-radius: 4px; width: var(--w);
  background: linear-gradient(90deg, rgba(255, 255, 255, .25), #fff); box-shadow: 0 0 14px rgba(255, 255, 255, .45);
  animation: runLine var(--dur) cubic-bezier(.3, .6, .2, 1) both; }
.tl-now { position: absolute; top: 30px; left: var(--x); width: 2px; height: 36px; background: #fff; transform: translateX(-1px); border-radius: 2px;
  animation: runNow var(--dur) cubic-bezier(.3, .6, .2, 1) both; }
.tl-now span { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 10.5px; font-weight: 700; color: #121418; background: #fff; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.tl-m { position: absolute; top: 48px; transform: translate(-50%, -50%); animation: lightUp .5s cubic-bezier(.2, .8, .2, 1) both; z-index: 2; }
.tl-m i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 800; color: #fff;
  background: #3a3d44; border: 2px solid #121418; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.tl-m.st-ok i { background: #30a46c; }
.tl-m.st-late i { background: #d89a2b; }
.tl-m.st-miss i { background: #e5484d; animation: pulseRed 1.6s ease-in-out infinite; }
.tl-m.st-today i { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }
.tl-m.st-none i { background: transparent; border: 2px dashed rgba(255, 255, 255, .35); box-shadow: none; }
.tl-lbl { position: absolute; left: 50%; transform: translateX(-50%); bottom: 18px; white-space: nowrap; font-size: 11.5px; color: rgba(255, 255, 255, .8); text-align: center; line-height: 1.3; }
.tl-m.below .tl-lbl { bottom: auto; top: 18px; }
.tl-lbl b { color: #fff; font-weight: 700; }
.tl-lbl em { display: block; font-style: normal; font-size: 10.5px; color: rgba(255, 255, 255, .5); }
.tl-m.st-miss .tl-lbl em { color: #ff8a8e; font-weight: 600; }
.tl-m.st-ok .tl-lbl em { color: #7ee2a8; }
.tl-m.st-late .tl-lbl em { color: #f5c46b; }
.tl-m:hover i { transform: scale(1.15); }
.tl.slim { margin-top: 12px; padding: 8px 12px; display: flex; align-items: center; gap: 14px; }
.tl.slim .tl-head { flex: none; }
.tl.slim .tl-head .spacer, .tl.slim .tl-lock, .tl.slim .tl-head .btn { display: none; }
.tl.slim .tl-track { flex: 1; height: 26px; margin: 0 10px; }
.tl.slim .tl-rail, .tl.slim .tl-fill { top: 11px; }
.tl.slim .tl-now { top: 3px; height: 20px; }
.tl.slim .tl-now span { display: none; }
.tl.slim .tl-m { top: 13px; }
.tl.slim .tl-m i { width: 16px; height: 16px; font-size: 9px; }
.tl.slim .tl-lbl { display: none; }
.tl-empty { display: flex; align-items: center; gap: 16px; justify-content: space-between; flex-wrap: wrap; }
.tl-empty b { display: block; color: #fff; font-size: 13.5px; }
.tl-empty span { font-size: 12.5px; color: rgba(255, 255, 255, .6); }
@media (max-width: 900px) {
  .tl { margin-top: 12px; }
  .tl-lbl { font-size: 10.5px; max-width: 90px; white-space: normal; }
  .tl.slim .tl-head .tl-sum { display: none; }
}
.tl-row { padding: 12px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 10px; }
.tl-row-top { display: flex; gap: 8px; align-items: center; }
.tl-day { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); font-weight: 600; }
.tl-day input { width: 64px; }

/* Recurring chips */
.chip.rec { background: color-mix(in srgb, var(--blue) 10%, #fff); color: var(--blue); height: 22px; font-size: 11.5px; }
.rec-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); font-weight: 700; flex: none; }

/* Project cards: dark banner */
.folder-card { padding-top: 0; }
.folder-card::before { display: none; }
.folder-body { border-radius: 18px; }
.folder-top { height: auto; min-height: 96px; padding: 18px 16px; align-items: center; gap: 12px; background: #15171b; color: #fff; position: relative; overflow: hidden; }
.folder-top::before { content: ""; position: absolute; inset: 0; background: radial-gradient(280px 140px at 0% 0%, hsl(var(--h) 70% 50% / .45), transparent 70%), radial-gradient(220px 120px at 110% 120%, hsl(calc(var(--h) + 60) 70% 50% / .25), transparent 70%); transition: opacity .3s; opacity: .85; }
.folder-card:hover .folder-top::before { opacity: 1; }
.folder-top > * { position: relative; }
.folder-top .plogo { --s: 46px; transform: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); background: hsl(var(--h) 45% 82%); }
.ft-meta { flex: 1; min-width: 0; }
.ft-meta h3 { font-size: 16px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.015em; }
.ft-sub { font-size: 12px; color: rgba(255, 255, 255, .6); display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-badge { font-size: 11.5px; font-weight: 700; background: #fff; color: #15171b; padding: 3px 9px; border-radius: 999px; flex: none; }
.folder-info { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 12px; }
.folder-info .chips { margin-top: 0; }
.fstats { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.fstats div { padding: 8px 10px; border-right: 1px solid var(--line); }
.fstats div:last-child { border-right: 0; }
.fstats b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fstats span { font-size: 11px; color: var(--ink-3); font-weight: 500; }
.fstats .red b { color: var(--danger); }
.mtl-rail { position: relative; height: 4px; border-radius: 4px; background: var(--hover); margin: 6px 6px 0; }
.mtl-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, #cfd2d6, #17191c); animation: runLine 1.4s cubic-bezier(.3, .6, .2, 1) both; }
.mtl-rail i { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); background: #c8cacd; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.mtl-rail i.st-ok { background: #30a46c; }
.mtl-rail i.st-late { background: #d89a2b; }
.mtl-rail i.st-miss { background: #e5484d; }
.mtl-rail i.st-today { background: #17191c; }
.mtl-leg { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); margin-top: 8px; }

/* Wallet-style Drive folders */
.wallets { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px 16px; margin-bottom: 22px; }
.wallet { position: relative; height: 128px; cursor: pointer; padding-top: 16px; }
.w-cards { position: absolute; left: 14px; right: 14px; top: 0; height: 60px; }
.w-cards i { position: absolute; left: 0; right: 0; height: 60px; border-radius: 10px; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.w-cards i:first-child { top: 0; background: linear-gradient(135deg, hsl(var(--h) 65% 62%), hsl(calc(var(--h) + 40) 65% 52%)); transform: rotate(-3deg); }
.w-cards i:last-child { top: 6px; left: 10px; right: -4px; background: linear-gradient(135deg, #f3f1ea, #d9d5c8); transform: rotate(2deg); }
.wallet:hover .w-cards i:first-child { transform: translateY(-8px) rotate(-5deg); }
.wallet:hover .w-cards i:last-child { transform: translateY(-4px) rotate(4deg); }
.w-body { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  background: linear-gradient(160deg, #24272d, #15171b); color: #fff; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .08); overflow: hidden; }
.w-body::before { content: ""; position: absolute; inset: 6px; border: 1px dashed rgba(255, 255, 255, .14); border-radius: 11px; pointer-events: none; }
/* Snap clasp, kept inside the wallet */
.w-clasp { position: absolute; right: 14px; top: 16px; width: 34px; height: 22px; border-radius: 11px; background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.w-clasp::after { content: ""; position: absolute; right: 5px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, hsl(var(--h) 25% 70%) 45%, hsl(var(--h) 20% 40%)); box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.w-ic { position: absolute; top: 14px; left: 16px; color: hsl(var(--h) 70% 72%); }
.w-body b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; z-index: 1; max-width: 80%; }
.w-body small { font-size: 11.5px; color: rgba(255, 255, 255, .5); position: relative; z-index: 1; }
.tl-m.edge-l .tl-lbl { left: -4px; transform: none; text-align: left; }
.tl-m.edge-r .tl-lbl { left: auto; right: -4px; transform: none; text-align: right; }
.tl-mob { display: none; }
@media (max-width: 700px) {
  .tl:not(.slim) .tl-track { height: 44px; }
  .tl:not(.slim) .tl-rail, .tl:not(.slim) .tl-fill { top: 26px; }
  .tl:not(.slim) .tl-now { top: 12px; height: 30px; }
  .tl:not(.slim) .tl-now span { top: -16px; font-size: 9.5px; }
  .tl:not(.slim) .tl-m { top: 28px; }
  .tl .tl-lbl { display: none; }
  .tl-head .tl-lock { display: none; }
  .tl-mob { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
  .tl-mob a { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255, 255, 255, .8); padding: 4px 0; }
  .tl-mob i { width: 8px; height: 8px; border-radius: 50%; background: #6b6f76; flex: none; }
  .tl-mob .st-ok i { background: #30a46c; } .tl-mob .st-late i { background: #d89a2b; } .tl-mob .st-miss i { background: #e5484d; } .tl-mob .st-today i { background: #fff; }
  .tl-mob b { color: #fff; width: 34px; flex: none; }
  .tl-mob span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tl-mob em { font-style: normal; font-size: 11px; color: rgba(255, 255, 255, .5); }
  .tl-mob .st-miss em { color: #ff8a8e; font-weight: 600; }
}

/* ---------- Mentions ---------- */
.panel.mentions .panel-h h3 { display: inline-flex; align-items: center; gap: 7px; }
.panel.mentions .panel-h h3 .count { font-size: 11px; }
.ph-acts { display: inline-flex; gap: 14px; align-items: baseline; }
.ph-acts button.link { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.mm { position: relative; display: flex; gap: 11px; padding: 11px 10px; margin: 0 -10px; border-radius: 12px; cursor: pointer; transition: background .15s; }
.mm + .mm { border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; }
.mm:hover { background: var(--hover, #f3f2ee); }
.mm.new { background: color-mix(in srgb, var(--brand) 5%, transparent); }
.mm.new::before { content: ''; position: absolute; left: -2px; top: 18px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.mm-body { min-width: 0; flex: 1; }
.mm-h { font-size: 13px; line-height: 1.5; }
.mm-h .muted { font-size: 12px; }
.mm-t { margin-top: 3px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.mm-f { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mm-f .who-pill { height: 22px; padding: 0 9px; font-size: 11.5px; }
.mm-kind { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); background: #efeee9; border-radius: 999px; padding: 2px 9px; }
.mm-list { padding: 6px 20px; }
.mm-list .mm { margin: 0 -12px; padding: 14px 12px; }
.mm-list .mm.new::before { left: 0; }

/* ---------- In-app confirm dialog ---------- */
.ask-bg { z-index: 120; }
.modal.ask { max-width: 420px; }
.modal.ask h3 { font-size: 16px; font-weight: 650; }
.btn.danger-solid { background: var(--danger); color: #fff; border-color: transparent; }
.btn.danger-solid:hover { filter: brightness(.95); background: var(--danger); }

/* ---------- Integrations ---------- */
.notice.ok { background: var(--ok-soft); color: var(--ok); }
.ig-check { margin-bottom: 18px; }
.ig-step { display: grid; grid-template-columns: 12px 170px minmax(0, 1fr); gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.ig-step:first-of-type { border-top: 0; }
.ig-step .ig-v { color: var(--ink-2); overflow-wrap: anywhere; }
.ig-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.ig-dot.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.ig-dot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.ig-dot.bad { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.ig-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.ig-grid .full { grid-column: 1 / -1; }
.ig { display: flex; flex-direction: column; gap: 14px; }
.ig-h { display: flex; align-items: center; gap: 12px; }
.ig-h > div { flex: 1; min-width: 0; }
.ig-h h3 { font-size: 15px; font-weight: 650; }
.ig-h small { color: var(--ink-3); font-size: 12.5px; }
.ig-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; color: hsl(var(--h) 55% 38%); background: hsl(var(--h) 60% 94%); }
.ipill { font-size: 11.5px; font-weight: 650; padding: 3px 9px; border-radius: 999px; white-space: nowrap; background: var(--hover); color: var(--ink-3); }
.ipill.ok { background: var(--ok-soft); color: var(--ok); }
.ipill.warn { background: var(--warn-soft); color: var(--warn); }
.ipill.bad { background: var(--danger-soft); color: var(--danger); }
.ig .field { display: flex; flex-direction: column; gap: 6px; }
.ig .field label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.ig-cur { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--hover); }
.ig-cur span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ig-cur small { color: var(--ink-3); font-size: 12px; }
.ig-f { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; }
.switch-row span { display: flex; flex-direction: column; font-size: 13.5px; }
.switch-row small { color: var(--ink-3); font-size: 12px; }
.switch { appearance: none; -webkit-appearance: none; flex: none; width: 38px; height: 22px; border-radius: 999px; background: var(--line-2); position: relative; cursor: pointer; transition: background .18s; margin: 0; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .18s; }
.switch:checked { background: var(--brand); }
.switch:checked::after { transform: translateX(16px); }
.switch:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.key-row { display: flex; flex-direction: column; gap: 8px; }
.key-set { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--ok-soft); color: var(--ok); font-size: 13px; }
.key-set span { flex: 1; }
.key-in { display: flex; gap: 8px; }
.key-in .input { flex: 1; min-width: 0; }
pre.cfg { margin: 0 0 10px; padding: 12px 14px; border-radius: 12px; background: #f1f0eb; font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-2); }
@media (max-width: 860px) { .ig-grid { grid-template-columns: 1fr; } .ig-step { grid-template-columns: 12px minmax(0, 1fr); } .ig-step .ig-v { grid-column: 2; } }

/* Two-line wordmark for longer names */
.brand-t { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brand-t b { font-weight: 700; letter-spacing: -.01em; }
.brand-t small { font-size: 11.5px; font-weight: 550; color: var(--ink-3); letter-spacing: .02em; margin-top: 2px; white-space: nowrap; }

/* ---------- Collapsible sidebar (desktop) ---------- */
.app { transition: grid-template-columns .25s cubic-bezier(.3, .7, .2, 1); }
.side-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.side-tog { color: var(--ink-3); flex: none; }
.side-tog:hover { color: var(--ink); }
@media (min-width: 901px) {
  .app.side-mini { grid-template-columns: 68px minmax(0, 1fr); }
  .app.side-mini:not(.side-peek) .side-top { flex-direction: column; padding: 16px 8px 6px; gap: 10px; }
  .app.side-mini:not(.side-peek) .brand-t, .app.side-mini:not(.side-peek) .brand > :not(.mark) { display: none; }
  .app.side-mini:not(.side-peek) .side-scroll { padding: 8px 8px 16px; overflow-x: hidden; }
  .app.side-mini:not(.side-peek) .nav-item { justify-content: center; padding: 0; position: relative; }
  .app.side-mini:not(.side-peek) .nav-item .lbl { display: none; }
  .app.side-mini:not(.side-peek) .nav-item .count { position: absolute; top: 2px; right: 4px; font-size: 9.5px; padding: 0 5px; min-width: 16px; text-align: center; line-height: 15px; }
  .app.side-mini:not(.side-peek) .nav-item .count:not(.hot):not(.red) { display: none; }
  .app.side-mini:not(.side-peek) .nav-sec { padding: 14px 0 6px; justify-content: center; }
  .app.side-mini:not(.side-peek) .nav-sec span { display: none; }
  .app.side-mini:not(.side-peek) .nav-sec::before { content: ''; display: block; width: 24px; height: 1px; background: var(--line-2); }
  .app.side-mini:not(.side-peek) .nav-sec button { display: none; }
  .app.side-mini:not(.side-peek) .side-foot { padding: 10px 8px; }
  .app.side-mini:not(.side-peek) .me-card { justify-content: center; padding: 6px 0; }
  .app.side-mini:not(.side-peek) .me-card .who, .app.side-mini:not(.side-peek) .me-card > svg { display: none; }
}
@media (max-width: 900px) { .side-tog { display: none; } }

/* ---------- Project banner that gets out of the way ---------- */
.ph-fold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .38s cubic-bezier(.3, .7, .2, 1), opacity .28s ease; }
.ph-fold-in { min-height: 0; overflow: hidden; }
.phead-row .plogo, .phead-row h1, .phead-in { transition: all .3s cubic-bezier(.3, .7, .2, 1); }
.phead-row .sub { max-height: 40px; overflow: hidden; transition: max-height .3s ease, opacity .2s ease, margin .3s ease; }
.ph-mini { display: none; width: min(300px, 32vw); cursor: pointer; padding: 6px 10px 4px; border-radius: 10px; }
.ph-mini:hover { background: rgba(255, 255, 255, .06); }
.ph-mini .mtl-rail { background: rgba(255, 255, 255, .14); margin: 4px 4px 0; }
.ph-mini .mtl-fill { background: linear-gradient(90deg, rgba(255, 255, 255, .3), #fff); }
.ph-mini .mtl-rail i { border-color: #121418; }
.ph-mini .mtl-rail i.st-today { background: #fff; }
.ph-mini .mtl-leg { color: rgba(255, 255, 255, .55); margin-top: 6px; font-size: 10.5px; }
.ph-tog { color: rgba(255, 255, 255, .6); flex: none; transition: transform .3s ease; }
.ph-tog:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.phead:not(.compact) .ph-tog { transform: rotate(180deg); }
.phead.compact .ph-fold { grid-template-rows: 0fr; opacity: 0; }
.phead.compact .phead-in { padding-top: 10px; }
.phead.compact .phead-row .plogo { --s: 32px; border-radius: 9px; font-size: 12px; }
.phead.compact .phead-row h1 { font-size: 16px; }
.phead.compact .phead-row .sub { max-height: 0; opacity: 0; margin-top: 0; }
.phead.compact .ph-mini { display: block; animation: fadeIn .3s both; }
.phead.compact .tabs { margin-top: 6px; }
@media (max-width: 700px) {
  .ph-mini { width: 110px; padding: 4px 6px; }
  .ph-mini .mtl-leg { display: none; }
  .phead .share-btn .stack { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ph-fold, .phead-row .sub, .phead-row .plogo, .phead-row h1, .phead-in, .app { transition: none; } }

/* ---------- New project wizard ---------- */
.modal.wiz { max-width: 720px; }
.wz-steps { display: flex; gap: 4px; margin-top: 12px; flex-wrap: wrap; }
.wz-step { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 8px 4px 4px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-3); cursor: default; }
.wz-step i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; background: var(--hover); color: var(--ink-3); }
.wz-step.on { color: var(--ink); background: var(--hover); }
.wz-step.on i { background: var(--ink); color: #fff; }
.wz-step.done { color: var(--ok); cursor: pointer; }
.wz-step.done i { background: var(--ok-soft); color: var(--ok); }
.wz-step.done:hover { background: var(--ok-soft); }
.wz-body { min-height: 380px; }
.wz-body.enter { animation: fadeIn .25s both; }
.wz-grp { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); margin: 14px 0 6px; }
.tl-row.off { opacity: .6; }
.tl-row.off:focus-within { opacity: 1; }
.logo-pick { display: flex; gap: 14px; align-items: flex-start; }
.lp-prev { width: 72px; height: 72px; flex: none; border-radius: 16px; border: 1.5px dashed var(--line-2); display: grid; place-items: center; color: var(--ink-3); overflow: hidden; background: var(--hover); }
.lp-prev img { width: 100%; height: 100%; object-fit: cover; }
.lp-act { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.lp-row { display: flex; gap: 8px; flex-wrap: wrap; }
.wz-review { display: flex; flex-direction: column; gap: 14px; }
.wz-rv-top { display: flex; gap: 14px; align-items: center; }
.wz-rv-top h3 { font-size: 18px; }
.wz-rv-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; align-items: center; font-size: 13.5px; }
.wz-rv-row b { color: var(--ink-3); font-size: 13px; font-weight: 600; }
.wz-review .info-list { margin-top: 0; }
@media (max-width: 640px) {
  .wz-step span { display: none; }
  .wz-step.on span { display: inline; }
  .wz-rv-row, .wz-review .info-list { grid-template-columns: 1fr; gap: 4px; }
  .tl-row-top { flex-wrap: wrap; }
}
.app.side-mini:not(.side-peek) .brand { font-size: 0; }

/* Whose work is this? Labels from the viewer's side */
.dir { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap; letter-spacing: .01em; }
.dir.to { background: color-mix(in srgb, var(--pc) 16%, #fff); color: var(--pc); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc) 30%, transparent); }
.dir.to.done { background: var(--ok-soft); color: var(--ok); box-shadow: none; }
.dir.by { background: rgba(255, 255, 255, .75); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.msg.for-me:not(.mine) .bubble { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--mepc) 45%, transparent), 0 1px 2px rgba(23, 25, 28, .06); }
@media (max-width: 700px) {
  .phead.compact .share-btn { padding: 0 10px; }
  .phead.compact .share-btn span { font-size: 0; gap: 0; }
}

/* ---------- Chat: doodle wallpaper, depth, motion, flash ---------- */
:root { --wall: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIiB2aWV3Qm94PSIwIDAgMzAwIDMwMCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMmY0YTNmIiBzdHJva2Utd2lkdGg9IjEuMzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgb3BhY2l0eT0iLjA4NSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMyA3LjIpIHJvdGF0ZSgtMjQgMTEuNiAxMS42KSBzY2FsZSgwLjk2KSI+PHBhdGggZD0iTTIxIDE1YTIgMiAwIDAgMS0yIDJIN2wtNCA0VjVhMiAyIDAgMCAxIDItMmgxNGEyIDIgMCAwIDEgMiAyeiIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2OS40IDYuMykgcm90YXRlKDQgMTEuMyAxMS4zKSBzY2FsZSgwLjk1KSI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iOSIvPjxwYXRoIGQ9Im04IDEyIDMgMyA1LTYiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTA5LjAgNi43KSByb3RhdGUoLTEzIDEwLjkgMTAuOSkgc2NhbGUoMC45MCkiPjxyZWN0IHg9IjMiIHk9IjQiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgcng9IjIiLz48cGF0aCBkPSJNMTYgMnY0TTggMnY0TTMgMTBoMTgiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTU1LjYgMTEuNikgcm90YXRlKC0yMSAxMi4xIDEyLjEpIHNjYWxlKDEuMDEpIj48cGF0aCBkPSJtMjEuNCAxMS05LjIgOS4yYTYgNiAwIDAgMS04LjUtOC41bDguNi04LjZBNCA0IDAgMSAxIDE4IDguOGwtOC42IDguNmEyIDIgMCAwIDEtMi44LTIuOGw4LjUtOC41Ii8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIyMS43IDE2LjApIHJvdGF0ZSgtMjUgMTEuMyAxMS4zKSBzY2FsZSgwLjk1KSI+PHBhdGggZD0ibTEyIDIgMy4xIDYuMyA2LjkgMS01IDQuOSAxLjIgNi44TDEyIDE3LjggNS44IDIxbDEuMi02LjgtNS00LjkgNi45LTF6Ii8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI2My45IDEwLjYpIHJvdGF0ZSgtMjYgMTIuNSAxMi41KSBzY2FsZSgxLjA0KSI+PHBhdGggZD0iTTQgMjBoMTZhMiAyIDAgMCAwIDItMlY4YTIgMiAwIDAgMC0yLTJoLThsLTItM0g0YTIgMiAwIDAgMC0yIDJ2MTNhMiAyIDAgMCAwIDIgMloiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTUuMiA1Ny41KSByb3RhdGUoNiAxMC45IDEwLjkpIHNjYWxlKDAuOTApIj48cGF0aCBkPSJNNiA4YTYgNiAwIDAgMSAxMiAwYzAgNyAzIDkgMyA5SDNzMy0yIDMtOSIvPjxwYXRoIGQ9Ik0xMC4zIDIxYTEuOSAxLjkgMCAwIDAgMy40IDAiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTYuMSA1OS41KSByb3RhdGUoLTE3IDEyLjAgMTIuMCkgc2NhbGUoMS4wMCkiPjxwYXRoIGQ9Ik0xOSAxNGMxLjUtMS41IDMtMy4yIDMtNS41QTUuNSA1LjUgMCAwIDAgMTYuNSAzYy0xLjggMC0zIC41LTQuNSAyLTEuNS0xLjUtMi43LTItNC41LTJBNS41IDUuNSAwIDAgMCAyIDguNWMwIDIuMyAxLjUgNCAzIDUuNWw3IDdaIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwNy43IDY2LjEpIHJvdGF0ZSgtMjIgMTAuMiAxMC4yKSBzY2FsZSgwLjg1KSI+PHBhdGggZD0ibTIyIDItNyAyMC00LTktOS00WiIvPjxwYXRoIGQ9Ik0yMiAyIDExIDEzIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE2Ni4xIDU3LjQpIHJvdGF0ZSgtMTUgOS44IDkuOCkgc2NhbGUoMC44MSkiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjQiLz48cGF0aCBkPSJNMTYgOHY1YTMgMyAwIDAgMCA2IDB2LTFhMTAgMTAgMCAxIDAtNCA4Ii8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIxMy4wIDYzLjYpIHJvdGF0ZSgxIDExLjkgMTEuOSkgc2NhbGUoMC45OSkiPjxwYXRoIGQ9Ik05IDE4aDZNMTAgMjJoNCIvPjxwYXRoIGQ9Ik0xMiAyYTcgNyAwIDAgMC00IDEyLjdjLjYuNSAxIDEuMyAxIDIuM2g2YzAtMSAuNC0xLjggMS0yLjNBNyA3IDAgMCAwIDEyIDJaIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI2Ni4wIDYzLjcpIHJvdGF0ZSgyMiAxMC41IDEwLjUpIHNjYWxlKDAuODcpIj48cGF0aCBkPSJNNC41IDE2LjVjLTEuNSAxLjMtMiA1LTIgNXMzLjctLjUgNS0yYy43LS44LjctMi4xLS4xLTIuOWEyLjIgMi4yIDAgMCAwLTIuOS0uMVoiLz48cGF0aCBkPSJtMTIgMTUtMy0zYTIyIDIyIDAgMCAxIDItNEExMi45IDEyLjkgMCAwIDEgMjIgMmMwIDIuNy0uOCA3LjUtNiAxMWEyMi40IDIyLjQgMCAwIDEtNCAyWiIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5LjQgMTIwLjIpIHJvdGF0ZSgtOSA5LjggOS44KSBzY2FsZSgwLjgyKSI+PHBhdGggZD0iTTE3IDhoMWE0IDQgMCAxIDEgMCA4aC0xIi8+PHBhdGggZD0iTTMgOGgxNHY5YTQgNCAwIDAgMS00IDRIN2E0IDQgMCAwIDEtNC00WiIvPjxwYXRoIGQ9Ik02IDJ2Mk0xMCAydjJNMTQgMnYyIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYzLjcgMTIwLjApIHJvdGF0ZSgtMTAgMTEuOCAxMS44KSBzY2FsZSgwLjk4KSI+PHBhdGggZD0iTTMgM3YxOGgxOCIvPjxwYXRoIGQ9Im0xOSA5LTUgNS00LTQtMyAzIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExNS44IDEwNi4yKSByb3RhdGUoLTE4IDExLjEgMTEuMSkgc2NhbGUoMC45MykiPjxwYXRoIGQ9Ik0xMiAyMGg5Ii8+PHBhdGggZD0iTTE2LjUgMy41YTIuMSAyLjEgMCAwIDEgMyAzTDcgMTlsLTQgMSAxLTRaIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE2OC42IDEwNy43KSByb3RhdGUoLTI2IDExLjEgMTEuMSkgc2NhbGUoMC45MikiPjxwYXRoIGQ9Ik0xNC41IDRoLTVMNyA3SDRhMiAyIDAgMCAwLTIgMnY5YTIgMiAwIDAgMCAyIDJoMTZhMiAyIDAgMCAwIDItMlY5YTIgMiAwIDAgMC0yLTJoLTN6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMyIgcj0iMyIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMjIuMCAxMDYuMSkgcm90YXRlKDIyIDExLjMgMTEuMykgc2NhbGUoMC45NCkiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iNiIvPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjIiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjcwLjEgMTEwLjApIHJvdGF0ZSgxMCAxMS43IDExLjcpIHNjYWxlKDAuOTcpIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxwYXRoIGQ9Ik04IDE0czEuNSAyIDQgMiA0LTIgNC0yIi8+PHBhdGggZD0iTTkgOWguMDFNMTUgOWguMDEiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTUuMSAxNzAuNSkgcm90YXRlKC0yMyA5LjggOS44KSBzY2FsZSgwLjgyKSI+PHBhdGggZD0iTTIxIDE1YTIgMiAwIDAgMS0yIDJIN2wtNCA0VjVhMiAyIDAgMCAxIDItMmgxNGEyIDIgMCAwIDEgMiAyeiIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3MS40IDE2Mi45KSByb3RhdGUoLTI1IDExLjYgMTEuNikgc2NhbGUoMC45NykiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjkiLz48cGF0aCBkPSJtOCAxMiAzIDMgNS02Ii8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExNy44IDE2MC4yKSByb3RhdGUoMTUgMTEuMyAxMS4zKSBzY2FsZSgwLjk0KSI+PHJlY3QgeD0iMyIgeT0iNCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiByeD0iMiIvPjxwYXRoIGQ9Ik0xNiAydjRNOCAydjRNMyAxMGgxOCIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNzAuMCAxNjAuNCkgcm90YXRlKDE0IDEwLjggMTAuOCkgc2NhbGUoMC45MCkiPjxwYXRoIGQ9Im0yMS40IDExLTkuMiA5LjJhNiA2IDAgMCAxLTguNS04LjVsOC42LTguNkE0IDQgMCAxIDEgMTggOC44bC04LjYgOC42YTIgMiAwIDAgMS0yLjgtMi44bDguNS04LjUiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjExLjYgMTcyLjMpIHJvdGF0ZSgxMSAxMC43IDEwLjcpIHNjYWxlKDAuODkpIj48cGF0aCBkPSJtMTIgMiAzLjEgNi4zIDYuOSAxLTUgNC45IDEuMiA2LjhMMTIgMTcuOCA1LjggMjFsMS4yLTYuOC01LTQuOSA2LjktMXoiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjU2LjIgMTU1LjIpIHJvdGF0ZSgtMjAgMTEuOSAxMS45KSBzY2FsZSgwLjk5KSI+PHBhdGggZD0iTTQgMjBoMTZhMiAyIDAgMCAwIDItMlY4YTIgMiAwIDAgMC0yLTJoLThsLTItM0g0YTIgMiAwIDAgMC0yIDJ2MTNhMiAyIDAgMCAwIDIgMloiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTYuOSAyMTAuOCkgcm90YXRlKDMgMTIuNCAxMi40KSBzY2FsZSgxLjAzKSI+PHBhdGggZD0iTTYgOGE2IDYgMCAwIDEgMTIgMGMwIDcgMyA5IDMgOUgzczMtMiAzLTkiLz48cGF0aCBkPSJNMTAuMyAyMWExLjkgMS45IDAgMCAwIDMuNCAwIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDU2LjIgMjEyLjgpIHJvdGF0ZSgyOCAxMS4yIDExLjIpIHNjYWxlKDAuOTQpIj48cGF0aCBkPSJNMTkgMTRjMS41LTEuNSAzLTMuMiAzLTUuNUE1LjUgNS41IDAgMCAwIDE2LjUgM2MtMS44IDAtMyAuNS00LjUgMi0xLjUtMS41LTIuNy0yLTQuNS0yQTUuNSA1LjUgMCAwIDAgMiA4LjVjMCAyLjMgMS41IDQgMyA1LjVsNyA3WiIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDcuMiAyMTIuNSkgcm90YXRlKDE3IDExLjMgMTEuMykgc2NhbGUoMC45NCkiPjxwYXRoIGQ9Im0yMiAyLTcgMjAtNC05LTktNFoiLz48cGF0aCBkPSJNMjIgMiAxMSAxMyIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNjEuMiAyMTAuMikgcm90YXRlKC0xNCAxMi4zIDEyLjMpIHNjYWxlKDEuMDIpIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI0Ii8+PHBhdGggZD0iTTE2IDh2NWEzIDMgMCAwIDAgNiAwdi0xYTEwIDEwIDAgMSAwLTQgOCIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMDguNCAyMDguOSkgcm90YXRlKC0xNCAxMC4zIDEwLjMpIHNjYWxlKDAuODYpIj48cGF0aCBkPSJNOSAxOGg2TTEwIDIyaDQiLz48cGF0aCBkPSJNMTIgMmE3IDcgMCAwIDAtNCAxMi43Yy42LjUgMSAxLjMgMSAyLjNoNmMwLTEgLjQtMS44IDEtMi4zQTcgNyAwIDAgMCAxMiAyWiIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNTYuMSAyMjAuOCkgcm90YXRlKC0xMCAxMC4xIDEwLjEpIHNjYWxlKDAuODUpIj48cGF0aCBkPSJNNC41IDE2LjVjLTEuNSAxLjMtMiA1LTIgNXMzLjctLjUgNS0yYy43LS44LjctMi4xLS4xLTIuOWEyLjIgMi4yIDAgMCAwLTIuOS0uMVoiLz48cGF0aCBkPSJtMTIgMTUtMy0zYTIyIDIyIDAgMCAxIDItNEExMi45IDEyLjkgMCAwIDEgMjIgMmMwIDIuNy0uOCA3LjUtNiAxMWEyMi40IDIyLjQgMCAwIDEtNCAyWiIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1LjQgMjYyLjgpIHJvdGF0ZSg4IDEwLjcgMTAuNykgc2NhbGUoMC44OSkiPjxwYXRoIGQ9Ik0xNyA4aDFhNCA0IDAgMSAxIDAgOGgtMSIvPjxwYXRoIGQ9Ik0zIDhoMTR2OWE0IDQgMCAwIDEtNCA0SDdhNCA0IDAgMCAxLTQtNFoiLz48cGF0aCBkPSJNNiAydjJNMTAgMnYyTTE0IDJ2MiIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1OS42IDI1Ni4xKSByb3RhdGUoMTEgMTIuMiAxMi4yKSBzY2FsZSgxLjAxKSI+PHBhdGggZD0iTTMgM3YxOGgxOCIvPjxwYXRoIGQ9Im0xOSA5LTUgNS00LTQtMyAzIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExNi44IDI2OC4zKSByb3RhdGUoMjcgMTEuMCAxMS4wKSBzY2FsZSgwLjkxKSI+PHBhdGggZD0iTTEyIDIwaDkiLz48cGF0aCBkPSJNMTYuNSAzLjVhMi4xIDIuMSAwIDAgMSAzIDNMNyAxOWwtNCAxIDEtNFoiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTY4LjAgMjY5LjcpIHJvdGF0ZSgtMyAxMi4wIDEyLjApIHNjYWxlKDEuMDApIj48cGF0aCBkPSJNMTQuNSA0aC01TDcgN0g0YTIgMiAwIDAgMC0yIDJ2OWEyIDIgMCAwIDAgMiAyaDE2YTIgMiAwIDAgMCAyLTJWOWEyIDIgMCAwIDAtMi0yaC0zeiIvPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTMiIHI9IjMiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjEyLjEgMjYyLjApIHJvdGF0ZSgtMyAxMS4wIDExLjApIHNjYWxlKDAuOTIpIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjYiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIyIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI1Ni45IDI1Ny4wKSByb3RhdGUoLTE4IDEwLjIgMTAuMikgc2NhbGUoMC44NSkiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+PHBhdGggZD0iTTggMTRzMS41IDIgNCAyIDQtMiA0LTIiLz48cGF0aCBkPSJNOSA5aC4wMU0xNSA5aC4wMSIvPjwvZz48L2c+PGcgZmlsbD0iIzJmNGEzZiIgb3BhY2l0eT0iLjA3Ij48Y2lyY2xlIGN4PSIzMyIgY3k9IjE4MCIgcj0iMS4yIi8+PGNpcmNsZSBjeD0iMzEiIGN5PSIxNzAiIHI9IjEuMiIvPjxjaXJjbGUgY3g9IjE2MSIgY3k9IjI4NSIgcj0iMS4yIi8+PGNpcmNsZSBjeD0iMTg0IiBjeT0iMjEiIHI9IjEuMiIvPjxjaXJjbGUgY3g9IjYyIiBjeT0iMTEzIiByPSIxLjIiLz48Y2lyY2xlIGN4PSIxOTAiIGN5PSIyODciIHI9IjEuMiIvPjxjaXJjbGUgY3g9IjE4MSIgY3k9IjE0MiIgcj0iMS4yIi8+PGNpcmNsZSBjeD0iMzUiIGN5PSIxNDYiIHI9IjEuMiIvPjxjaXJjbGUgY3g9IjI5MyIgY3k9IjE0NCIgcj0iMS4yIi8+PGNpcmNsZSBjeD0iOTQiIGN5PSI0MyIgcj0iMS4yIi8+PGNpcmNsZSBjeD0iMjI1IiBjeT0iMjIyIiByPSIxLjIiLz48Y2lyY2xlIGN4PSIxNDQiIGN5PSIyMDgiIHI9IjEuMiIvPjxjaXJjbGUgY3g9IjE1NSIgY3k9IjYyIiByPSIxLjIiLz48Y2lyY2xlIGN4PSIyODYiIGN5PSIxMDkiIHI9IjEuMiIvPjxjaXJjbGUgY3g9IjIwNyIgY3k9IjI3NCIgcj0iMS4yIi8+PGNpcmNsZSBjeD0iMjI3IiBjeT0iODkiIHI9IjEuMiIvPjxjaXJjbGUgY3g9IjE5MyIgY3k9IjI3IiByPSIxLjIiLz48Y2lyY2xlIGN4PSIyNTQiIGN5PSIxNTYiIHI9IjEuMiIvPjxjaXJjbGUgY3g9IjI3MiIgY3k9IjEwNyIgcj0iMS4yIi8+PGNpcmNsZSBjeD0iNjciIGN5PSIxNjIiIHI9IjEuMiIvPjxjaXJjbGUgY3g9IjE1MSIgY3k9IjE5MSIgcj0iMS4yIi8+PGNpcmNsZSBjeD0iMTg0IiBjeT0iMjM3IiByPSIxLjIiLz48L2c+PC9zdmc+"); }
.chat { background-color: #efeae2; background-image: var(--wall), linear-gradient(180deg, #f3efe8, #ebe6dd); background-size: 300px 300px, 100% 100%; }
.chat::before { display: none; }
.chat-bar { background: rgba(248, 246, 241, .82); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }
.day { background: rgba(255, 255, 255, .78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--ink-2); box-shadow: 0 1px 1px rgba(0, 0, 0, .06); letter-spacing: .01em; }
.bubble { position: relative; border: 0; box-shadow: 0 1px 1px rgba(20, 25, 22, .07), 0 6px 18px -10px rgba(20, 25, 22, .18); }
.msg:not(.mine) .bubble { border-radius: 4px 18px 18px 18px; }
.msg.mine .bubble { border-radius: 18px 4px 18px 18px; background: linear-gradient(180deg, #e3f5e9, #d9f0e1); }
/* WhatsApp-style tails at the top corner */
.msg:not(.mine) .bubble::before { content: ""; position: absolute; top: 0; left: -7px; width: 8px; height: 12px; background: var(--surface); clip-path: polygon(100% 0, 0 0, 100% 100%); }
.msg.mine .bubble::before { content: ""; position: absolute; top: 0; right: -7px; width: 8px; height: 12px; background: #e3f5e9; clip-path: polygon(0 0, 100% 0, 0 100%); }
.msg { align-items: flex-start; }
.msg > .avatar { margin: 0; }
.msg.enter { animation: msgIn .38s cubic-bezier(.2, .9, .25, 1.15) both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.composer { background: transparent; border-top: 0; }
.composer-in { margin: 0 auto 12px; width: calc(100% - 28px); max-width: 820px; background: rgba(255, 255, 255, .9); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-radius: 20px; box-shadow: 0 1px 2px rgba(20, 25, 22, .06), 0 12px 32px -14px rgba(20, 25, 22, .28); border: 1px solid rgba(255, 255, 255, .7); }

/* Opening a message from anywhere: it's centred, everything else dims for a beat, and it pulses in your colour. */
.msgs .msg { transition: opacity .35s ease, filter .35s ease; }
.msgs.spot .msg:not(.flash) { opacity: .28; filter: saturate(.6); }
.msg.flash .bubble { animation: msgFlash 1.7s cubic-bezier(.2, .8, .2, 1) both; z-index: 1; }
.msg.flash .bubble::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: color-mix(in srgb, var(--mepc, #13795b) 16%, transparent); animation: msgTint 1.7s ease-out both; }
@keyframes msgFlash {
  0% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--mepc, #13795b) 0%, transparent); }
  14% { transform: scale(1.03); box-shadow: 0 0 0 5px color-mix(in srgb, var(--mepc, #13795b) 55%, transparent), 0 18px 40px -16px color-mix(in srgb, var(--mepc, #13795b) 60%, transparent); }
  30% { transform: scale(1); }
  48% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mepc, #13795b) 40%, transparent); }
  100% { transform: scale(1); box-shadow: 0 1px 1px rgba(20, 25, 22, .07), 0 6px 18px -10px rgba(20, 25, 22, .18); }
}
@keyframes msgTint { 0%, 35% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .msg.enter, .msg.flash .bubble { animation: none; } .msg.flash .bubble { box-shadow: 0 0 0 3px var(--mepc, #13795b); } }

/* ---------- Files: drag to move, menus, picker ---------- */
.wallet { transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.wallet:hover { transform: translateY(-2px); }
.w-drop { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; border-radius: 16px; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff; background: color-mix(in srgb, hsl(var(--h) 70% 45%) 88%, transparent); opacity: 0; transform: scale(.96); transition: opacity .15s, transform .15s; pointer-events: none; z-index: 3; }
.dragging-file .wallet .w-body { outline: 1.5px dashed rgba(255, 255, 255, .0); }
.dragging-file .wallet { opacity: .92; }
.wallet.drop-on { transform: translateY(-4px) scale(1.02); }
.wallet.drop-on .w-drop { opacity: 1; transform: none; }
.wallet.drop-on .w-cards i:first-child { transform: translateY(-12px) rotate(-6deg); }
.bc a.drop-on { background: var(--brand-soft); color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand); }
.wallet.flash .w-body { animation: walletFlash 1.6s ease-out both; }
@keyframes walletFlash { 0%, 30% { box-shadow: 0 0 0 4px color-mix(in srgb, hsl(var(--h) 70% 55%) 70%, transparent), 0 20px 40px -18px hsl(var(--h) 70% 40%); } 100% { box-shadow: none; } }
.files-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 2px 10px; font-weight: 650; font-size: 13.5px; }
.files-h .small { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.card.files { overflow: hidden; }
.card.files .file { transition: background .15s, opacity .15s; }
.file[draggable] { cursor: grab; }
.file[draggable]:active { cursor: grabbing; }
.file.dragging { opacity: .45; }
.file .grip { color: var(--ink-3); opacity: 0; transition: opacity .15s; margin-right: -4px; display: grid; }
.file:hover .grip { opacity: .7; }
@media (hover: none) { .file .grip { display: none; } }
.ftree { display: flex; flex-direction: column; gap: 2px; }
.ft-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 550; padding: 9px 12px 9px calc(12px + var(--d) * 22px); border-radius: 10px; cursor: pointer; color: var(--ink); }
.ft-row svg { color: var(--brand); flex: none; }
.ft-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-row small { color: var(--ink-3); font-size: 11.5px; font-weight: 600; }
.ft-row:hover:not([disabled]) { background: var(--hover); }
.ft-row[disabled] { opacity: .55; cursor: default; }

/* ================= Uploads, media, storage, deadlines ================= */
/* Upload tray */
.tray { position: fixed; right: 18px; bottom: 18px; z-index: 130; width: min(340px, calc(100vw - 36px)); background: rgba(22, 24, 28, .92); color: #fff; border-radius: 16px; padding: 12px 14px 8px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: rise .3s cubic-bezier(.2, .8, .2, 1) both; }
.tray-h { display: flex; flex-direction: column; gap: 1px; margin-bottom: 8px; }
.tray-h b { font-size: 13.5px; }
.tray-h small { font-size: 11.5px; color: rgba(255, 255, 255, .55); }
.tray-r { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 7px 0 9px; font-size: 12.5px; border-top: 1px solid rgba(255, 255, 255, .08); }
.tray-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tray-p { color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; flex: none; }
.tray-r i { position: absolute; left: 0; bottom: 3px; height: 3px; width: var(--p); border-radius: 3px; background: linear-gradient(90deg, #3ecf8e, #8ff0c0); transition: width .25s ease; }
.tray-r.ok .tray-p { color: #8ff0c0; }
.tray-r.err .tray-p { color: #ff9b9b; }
.tray-r.err i { background: #ff6b6b; }

/* Drop files on the chat */
.chat-drop { position: absolute; inset: 10px; z-index: 5; border-radius: 22px; border: 2px dashed color-mix(in srgb, var(--brand) 70%, transparent); background: rgba(236, 247, 241, .88); backdrop-filter: blur(4px); display: none; place-items: center; text-align: center; pointer-events: none; }
.chat.dropping .chat-drop { display: grid; animation: fadeIn .15s both; }
.chat-drop div { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--brand); }
.chat-drop svg { width: 34px; height: 34px; }
.chat-drop b { font-size: 17px; }
.chat-drop span { font-size: 13px; color: var(--ink-2); }
.ctag.thumb { padding-left: 3px; }
.ctag.thumb img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; }

/* Images in messages */
.media { display: grid; gap: 4px; border-radius: 12px; overflow: hidden; margin-bottom: 6px; max-width: 420px; }
.media.n1 { grid-template-columns: 1fr; }
.media.n2 { grid-template-columns: 1fr 1fr; }
.media.n3 { grid-template-columns: 1fr 1fr; }
.media.n3 .media-i:first-child { grid-column: 1 / -1; }
.media.n4 { grid-template-columns: 1fr 1fr; }
.media-i { position: relative; border: 0; padding: 0; margin: 0; cursor: zoom-in; background: #e8e5de; aspect-ratio: 4 / 3; overflow: hidden; }
.media.n1 .media-i { aspect-ratio: auto; max-height: 360px; }
.media-i img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.media.n1 .media-i img { height: auto; max-height: 360px; }
.media-i:hover img { transform: scale(1.03); }
.mi-name { display: none; }
.media-i.broken { display: grid; place-items: center; aspect-ratio: 4 / 3; }
.media-i.broken img { display: none; }
.media-i.broken .mi-name { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); padding: 10px; }
.media-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .45); color: #fff; font-size: 22px; font-weight: 700; }

/* Full-screen image viewer */
.lb { position: fixed; inset: 0; z-index: 150; background: rgba(10, 11, 13, .94); display: flex; flex-direction: column; animation: fadeIn .18s both; }
.lb-top { display: flex; align-items: center; gap: 12px; padding: 14px 18px; color: #fff; }
.lb-top > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lb-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-top small { color: rgba(255, 255, 255, .55); font-size: 12px; }
.lb-top small .mention.me { background: rgba(255, 255, 255, .12); }
.lb-x { color: #fff; }
.lb-x:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.lb-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 64px 28px; position: relative; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 30px 80px -30px #000; animation: pop .22s cubic-bezier(.2, .8, .2, 1) both; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .1); color: #fff; display: grid; place-items: center; cursor: pointer; }
.lb-nav:hover { background: rgba(255, 255, 255, .2); }
.lb-nav.l { left: 12px; }
.lb-nav.r { right: 12px; transform: translateY(-50%) rotate(180deg); }
@media (max-width: 640px) { .lb-stage { padding: 0 8px 20px; } .lb-nav { display: none; } }

/* Storage meter (Drive) */
.usage { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.usage.slim { padding: 10px 12px; margin: 0; background: var(--surface-2); box-shadow: none; }
.u-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); flex: none; }
.u-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.u-main b { font-size: 13.5px; }
.u-main small { font-size: 12px; color: var(--ink-3); }
.u-acc { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.u-acc small { font-size: 12px; color: var(--ink-2); }
.u-bar { height: 8px; border-radius: 8px; background: #ecebe6; overflow: hidden; }
.u-bar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #2c63d6, #5b8def); transform-origin: left; animation: growX 1.1s cubic-bezier(.3, .6, .2, 1) both; }
@keyframes growX { from { transform: scaleX(0); } }
.u-bar.hot i { background: linear-gradient(90deg, #d8572e, #e5484d); }

/* Deadlines at a glance */
.dash-grid.admin { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
@media (max-width: 1000px) { .dash-grid.admin { grid-template-columns: 1fr; } }
.panel.dl .panel-h h3, .panel.tlp .panel-h h3 { display: inline-flex; align-items: center; gap: 8px; }
.panel.dl .seg-mini button .n { color: var(--ink-3); font-weight: 600; margin-left: 2px; }
.panel.dl .seg-mini button.red .n { color: var(--danger); }
.dl-list { display: flex; flex-direction: column; }
.dl-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; margin: 0 -8px; border-radius: 12px; cursor: pointer; transition: background .15s; }
.dl-row + .dl-row { border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; }
.dl-row:hover { background: var(--hover); }
.dl-when { flex: none; width: 92px; font-size: 12px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.dl-when.over { color: var(--danger); }
.dl-when.soon { color: var(--warn); }
.dl-main { flex: 1; min-width: 0; }
.dl-t { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-m { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-3); margin-top: 2px; min-width: 0; }
.dl-who { flex: none; }
.tlp-row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; align-items: center; padding: 10px 8px; margin: 0 -8px; border-radius: 12px; transition: background .15s; }
.tlp-row + .tlp-row { border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; }
.tlp-row:hover { background: var(--hover); }
.tlp-row .plogo { --s: 30px; border-radius: 9px; font-size: 11px; }
.tlp-n { display: flex; flex-direction: column; min-width: 0; }
.tlp-n b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlp-n small { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlp-n em { font-style: normal; color: var(--danger); font-weight: 700; }
.tlp-m .mtl-leg { display: none; }
.tlp-m .mtl-rail { margin: 0 6px; }
@media (max-width: 640px) { .dl-when { width: 70px; } .dl-who { display: none; } .tlp-row { grid-template-columns: auto minmax(0, 1fr); } .tlp-m { grid-column: 1 / -1; } }

/* ================= Premium pass ================= */
:root {
  --bg: #f4f3ee;
  --line: #e9e7e0;
  --shadow-sm: 0 1px 2px rgba(28, 25, 20, .05);
  --shadow: 0 1px 1px rgba(28, 25, 20, .03), 0 2px 4px rgba(28, 25, 20, .03), 0 12px 32px -18px rgba(28, 25, 20, .18);
  --shadow-lg: 0 30px 70px -20px rgba(28, 25, 20, .28), 0 2px 8px rgba(28, 25, 20, .06);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
body { font-feature-settings: "ss01", "cv11"; }
.content { background: radial-gradient(1200px 380px at 70% -120px, rgba(19, 121, 91, .06), transparent 70%), var(--bg); }
.page-head h1 { font-size: 32px; font-weight: 620; letter-spacing: -.038em; }
.eyebrow { text-transform: uppercase; letter-spacing: .09em; font-size: 11px; font-weight: 700; color: var(--ink-3); }

/* Surfaces */
.card { border-color: rgba(28, 25, 20, .07); box-shadow: var(--shadow); transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .2s; }
.card.panel { border-radius: 18px; }
.panel-h h3 { font-size: 15px; font-weight: 640; letter-spacing: -.015em; }
a.card:hover, .tile[href]:hover, .folder-card:hover { transform: translateY(-2px); box-shadow: 0 1px 1px rgba(28, 25, 20, .03), 0 18px 40px -20px rgba(28, 25, 20, .28); }

/* Stat tiles: calmer labels, confident numbers */
.tile { position: relative; overflow: hidden; }
.tile::after { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 2px; border-radius: 0 0 2px 2px; background: linear-gradient(90deg, rgba(19, 121, 91, .0), rgba(19, 121, 91, .35), rgba(19, 121, 91, 0)); opacity: 0; transition: opacity .25s; }
.tile:hover::after { opacity: 1; }
.tile-l { text-transform: uppercase; letter-spacing: .07em; font-size: 10.5px; font-weight: 700; color: var(--ink-3); }
.tile-n { font-size: 34px; font-weight: 600; letter-spacing: -.045em; }
.tile.bad .tile-n { color: var(--danger); }
.tile.good .tile-n { color: var(--brand); }

/* Buttons */
.btn { transition: background .15s, border-color .15s, box-shadow .2s, transform .08s; }
.btn.dark { background: linear-gradient(180deg, #2a2d33, #16181c); border-color: #16181c; }
.btn.dark:hover { background: linear-gradient(180deg, #33363d, #1d2025); }
.btn.green { background: linear-gradient(180deg, #179067, #11704f); border-color: #11704f; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(17, 112, 79, .3), 0 6px 16px -8px rgba(17, 112, 79, .6); }
.btn.green:hover { background: linear-gradient(180deg, #1a9a6e, #127a56); }
.btn:focus-visible, .icon-btn:focus-visible, .chip:focus-visible, a:focus-visible, .nav-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.seg-mini { background: #ebe9e3; box-shadow: inset 0 1px 2px rgba(28, 25, 20, .06); }
.seg-mini button { transition: background .15s, color .15s, box-shadow .15s; }
.seg-mini button.on { box-shadow: 0 1px 2px rgba(28, 25, 20, .12), 0 0 0 .5px rgba(28, 25, 20, .06); }
.chip.toggle { transition: background .15s, color .15s, border-color .15s; }

/* Sidebar */
.side { background: linear-gradient(180deg, #f1f0ea, #ecebe4); }
.nav-item { position: relative; transition: background .15s, color .15s; }
.nav-item.on { box-shadow: 0 1px 2px rgba(28, 25, 20, .08), 0 0 0 .5px rgba(28, 25, 20, .06); }
.nav-item.on::before { content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
.app.side-mini:not(.side-peek) .nav-item.on::before { left: -8px; }
.brand .mark { background: linear-gradient(145deg, #1b9c73, #0f6a4f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 12px -4px rgba(15, 106, 79, .6); }
.count.hot { background: linear-gradient(180deg, #179067, #11704f); }

/* Tables */
.mini-table th, .ledger th, .ttable th { text-transform: uppercase; letter-spacing: .07em; font-size: 10.5px; font-weight: 700; color: var(--ink-3); }
.mini-table tbody tr, .ledger tbody tr { transition: background .15s; }

/* Toasts, modals, menus */
.toast { background: rgba(22, 24, 28, .94); backdrop-filter: blur(10px); border-radius: 999px; padding: 10px 18px; box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .45); }
.toast.err { background: rgba(201, 54, 46, .96); }
.modal-bg { background: rgba(22, 24, 28, .38); backdrop-filter: blur(6px) saturate(1.1); }
.modal { border-radius: 22px; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .45), 0 0 0 1px rgba(28, 25, 20, .05); }
.menu { border-radius: 14px; box-shadow: 0 20px 50px -18px rgba(0, 0, 0, .35), 0 0 0 1px rgba(28, 25, 20, .06); animation: pop .14s var(--ease); }

/* Inputs */
.input { transition: border-color .15s, box-shadow .2s, background .15s; }
.input:hover:not(:focus) { border-color: #d3d0c7; }
.input:focus { box-shadow: 0 0 0 4px rgba(19, 121, 91, .12); }

/* Page entrance: content rises in gently */
.page > * { animation: rise .45s var(--ease) both; }
.page > *:nth-child(2) { animation-delay: .04s; } .page > *:nth-child(3) { animation-delay: .08s; } .page > *:nth-child(4) { animation-delay: .12s; } .page > *:nth-child(5) { animation-delay: .16s; }
@media (prefers-reduced-motion: reduce) { .page > *, .card, .btn, .nav-item { animation: none !important; transition: none !important; } }
.panel.dl .panel-h { align-items: center; }
.panel.dl .seg-mini { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.panel.dl .seg-mini::-webkit-scrollbar { display: none; }
@media (max-width: 640px) { .tiles .tile:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* ================= Dashboard & board, premium ================= */
.hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l r" "f f"; gap: 18px 28px; align-items: center; padding: 26px 28px 22px; margin-bottom: 18px; border-radius: 22px; color: #f4f4f2;
  background: radial-gradient(600px 240px at 0% -20%, rgba(38, 190, 132, .35), transparent 70%), radial-gradient(520px 260px at 100% 120%, rgba(120, 90, 230, .28), transparent 70%), #131519;
  box-shadow: 0 30px 60px -34px rgba(19, 21, 25, .7), 0 0 0 1px rgba(255, 255, 255, .04) inset; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(to bottom, #000, transparent 85%); }
.hero > * { position: relative; z-index: 1; }
.hero-l { grid-area: l; min-width: 0; }
.hero .eyebrow { color: rgba(255, 255, 255, .5); }
.hero h1 { font-size: 34px; font-weight: 620; letter-spacing: -.04em; color: #fff; margin-top: 6px; }
.hero h1 .mention.me { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); color: #fff; }
.hero-sum { margin-top: 8px; font-size: 15px; color: rgba(255, 255, 255, .72); max-width: 60ch; }
.hero-sum b { color: #fff; font-weight: 650; }
.hero-sum b.red { color: #ff9b9e; }
.hero-sum span { color: rgba(255, 255, 255, .55); }
.hero-note { margin-top: 6px; font-size: 12.5px; color: rgba(255, 255, 255, .45); }
.hero-r { grid-area: r; display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; border-radius: 18px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.ring { width: 76px; height: 76px; flex: none; }
.ring-bg { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 8; }
.ring-fg { fill: none; stroke: #6ee7b7; stroke-width: 8; stroke-linecap: round; animation: ringIn 1.2s cubic-bezier(.3, .6, .2, 1) both; }
.ring-fg.mid { stroke: #fbbf5a; }
.ring-fg.low { stroke: #ff8a8e; }
@keyframes ringIn { from { stroke-dasharray: 0 999; } }
.ring-l { display: flex; flex-direction: column; line-height: 1.2; }
.ring-l b { font-size: 26px; font-weight: 650; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.ring-l span { font-size: 12.5px; color: rgba(255, 255, 255, .7); font-weight: 600; }
.ring-l small { font-size: 11.5px; color: rgba(255, 255, 255, .45); margin-top: 4px; }
.hero-f { grid-area: f; display: flex; gap: 8px; flex-wrap: wrap; }
.hero-f .input { background-color: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .12); color: #fff; width: auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.7' stroke-width='2.2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.hero-f .input:hover { border-color: rgba(255, 255, 255, .25); }
.hero-f .input option { color: var(--ink); }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; grid-template-areas: "l" "r" "f"; padding: 20px 18px; } .hero h1 { font-size: 26px; } .hero-r { justify-self: start; } }

.tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile { --tc: var(--brand); padding: 16px 18px 14px; min-height: 132px; }
.tile.t-blue { --tc: #2c63d6; } .tile.t-red { --tc: #d8433a; } .tile.t-amber { --tc: #c98a12; } .tile.t-green { --tc: #13795b; }
.tile-top { display: flex; align-items: center; gap: 10px; }
.tile-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; color: var(--tc); background: color-mix(in srgb, var(--tc) 11%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 16%, transparent); }
.tile .tile-n { margin-top: 12px; }
.tile::after { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tc) 55%, transparent), transparent); }
.spark { position: absolute; right: 14px; bottom: 14px; width: 110px; height: 34px; overflow: visible; }
.spark polyline { fill: none; stroke: var(--tc); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark polygon { fill: color-mix(in srgb, var(--tc) 12%, transparent); }
@media (max-width: 640px) { .spark { width: 70px; } .tile { min-height: 116px; } }

/* Chart bars */
.bar-stack { width: min(26px, 64%); border-radius: 7px 7px 3px 3px; overflow: hidden; gap: 0; box-shadow: 0 6px 14px -8px rgba(19, 121, 91, .6); }
.bar-stack i.ok { background: linear-gradient(180deg, #2bb383, #13795b); }
.bar-stack i.late { background: linear-gradient(180deg, #f0b64a, #d18f18); }
.bar-stack { transform-origin: bottom; animation: barUp .9s cubic-bezier(.3, .7, .2, 1) both; }
@keyframes barUp { from { transform: scaleY(0); } }

/* Board */
.board { gap: 16px; scroll-snap-type: x proximity; padding-bottom: 28px; }
.bcol { scroll-snap-align: start; flex: 0 0 300px; background: rgba(255, 255, 255, .5); border: 1px solid rgba(28, 25, 20, .06); border-radius: 20px; padding: 0 10px 10px; box-shadow: 0 1px 2px rgba(28, 25, 20, .04); position: relative; overflow: hidden; }
.bcol::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--pc, var(--line-2)); opacity: .85; }
.bcol.status.st-open { --pc: #2c63d6; } .bcol.status.st-over { --pc: #d8433a; } .bcol.status.st-done { --pc: #13795b; }
.bcol-h { position: sticky; top: 0; z-index: 2; margin: 0 -10px 8px; padding: 14px 14px 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--pc, #999) 7%, #fbfaf7), #fbfaf7); border-bottom: 1px solid rgba(28, 25, 20, .05); }
.bcol-h b { font-size: 14px; font-weight: 650; letter-spacing: -.01em; }
.bcol.status .bcol-h b { color: var(--pc); }
.bcount { background: #fff; box-shadow: 0 0 0 1px rgba(28, 25, 20, .08); }
.ring-av { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--pc) calc(var(--p) * 1%), rgba(28, 25, 20, .08) 0); }
.ring-av::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #fbfaf7; }
.ring-av .avatar { position: relative; --s: 30px; }
.bnote { background: var(--danger-soft); color: var(--danger); border-radius: 8px; padding: 4px 8px; margin: 0 2px 8px; display: inline-block; font-size: 11.5px; }
.bcards { gap: 10px; }
.bcard { border-radius: 14px; padding: 12px 13px; gap: 8px; box-shadow: 0 1px 1px rgba(28, 25, 20, .05), 0 0 0 1px rgba(28, 25, 20, .05); transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s; overflow: hidden; }
.bcard:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(28, 25, 20, .3), 0 0 0 1px rgba(28, 25, 20, .06); }
.bcard.over { box-shadow: inset 3px 0 0 var(--danger), 0 1px 1px rgba(28, 25, 20, .05), 0 0 0 1px rgba(28, 25, 20, .05); }
.bcover { margin: -12px -13px 2px; height: 128px; overflow: hidden; background: #ebe8e1; }
.bcover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.bcard:hover .bcover img { transform: scale(1.04); }
.bf { padding-top: 8px; border-top: 1px dashed rgba(28, 25, 20, .08); }
.bfrom { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.bfrom .avatar { --s: 20px; font-size: 8.5px; box-shadow: none; }
.bdiv { display: flex; align-items: center; gap: 8px; }
.bdiv::after { content: ""; flex: 1; height: 1px; background: rgba(28, 25, 20, .08); }
.board-bar .seg-mini { background: #ebe9e3; }
.bcard, .bcover { flex-shrink: 0; }

/* Demo file preview */
.modal.fv-modal { max-width: min(1000px, 100%); }
.fv { display: grid; place-items: center; min-height: 240px; padding-bottom: 20px; }
.fv img { max-width: 100%; max-height: 72dvh; border-radius: 10px; box-shadow: var(--shadow); }
.fv iframe { width: 100%; height: 72dvh; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.fv video { max-width: 100%; max-height: 72dvh; border-radius: 10px; background: #000; }
.fv audio { width: 100%; }
.fv-text { width: 100%; max-height: 68dvh; overflow: auto; margin: 0; padding: 14px 16px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.fv-info { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; max-width: 420px; color: var(--ink-2); }
.fv-info svg { width: 36px; height: 36px; color: var(--warn); }
.fv-info b { color: var(--ink); font-size: 15px; overflow-wrap: anywhere; }
.fv-info span { font-size: 12.5px; color: var(--ink-3); }
.fv-info p { margin-top: 8px; font-size: 13.5px; }
.fv-pdf { width: 100%; max-height: 72dvh; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; background: #e9e7e1; }
.fv-pdf canvas { width: 100%; max-width: 820px; height: auto; background: #fff; box-shadow: 0 6px 20px -10px rgba(0, 0, 0, .35); border-radius: 4px; }

/* ================= Round 7: priorities, checklists, approvals, reactions, pins, search, AI ================= */
.page.wide { max-width: 1320px; }
.red { color: var(--danger); }

/* Priority */
.prio { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; padding: 1px 7px 1px 5px; border-radius: 999px; white-space: nowrap; vertical-align: 1px; margin-right: 6px; }
.prio .i { width: 11px; height: 11px; }
.prio.high { background: #fff1dc; color: #b25e00; }
.prio.urgent { background: #fde4e2; color: #c42b22; box-shadow: inset 0 0 0 1px #f6bdb8; }
.bhead .prio { margin-right: 0; }
.msg.p-urgent .bubble { box-shadow: inset 3px 0 0 #e5484d, var(--shadow-sm); }
.msg.p-high .bubble { box-shadow: inset 3px 0 0 #f59e0b, var(--shadow-sm); }
.msg.mine.p-urgent .bubble { box-shadow: inset -3px 0 0 #e5484d, var(--shadow-sm); }
.msg.mine.p-high .bubble { box-shadow: inset -3px 0 0 #f59e0b, var(--shadow-sm); }
.dir.all { background: #efe9ff; color: #6d3fd6; box-shadow: inset 0 0 0 1px #dccfff; }
.dir.all .i { width: 11px; height: 11px; }
.pinned-ic { color: var(--ink-3); display: inline-flex; }
.pinned-ic .i { width: 12px; height: 12px; }

/* @everyone and #labels */
.mention.all { color: #6d3fd6; background: #efe9ff; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.hashtag { display: inline-block; font-weight: 600; font-size: .92em; padding: 0 7px; border-radius: 6px; cursor: pointer; color: hsl(var(--h) 55% 32%); background: hsl(var(--h) 70% 94%); transition: background .15s; }
.hashtag:hover { background: hsl(var(--h) 70% 88%); }
.chat-bar .chip.hashtag-f { background: hsl(var(--h) 55% 38%); padding: 0 4px 0 10px; }
.mopt.all .avatar.all { --s: 30px; background: #efe9ff; color: #6d3fd6; display: grid; place-items: center; box-shadow: none; }
.ctag.all { background: #efe9ff; color: #6d3fd6; padding-right: 10px; }
.ctag.prio-t.high { background: #fff1dc; color: #b25e00; }
.ctag.prio-t.urgent { background: #fde4e2; color: #c42b22; }
.ctag.rv-t { background: #e6f0ff; color: #2c63d6; }

/* Checklist inside a message */
.cklist { margin: 8px 0 2px; padding: 10px 12px 8px; background: rgba(255, 255, 255, .7); border: 1px solid var(--line); border-radius: 12px; }
.msg.mine .cklist { background: rgba(255, 255, 255, .6); }
.ck-h { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.ck-h span:first-child { display: inline-flex; align-items: center; gap: 5px; }
.ck-bar { flex: 1; height: 5px; background: var(--hover); border-radius: 9px; overflow: hidden; }
.ck-bar i { display: block; height: 100%; background: linear-gradient(90deg, #1a9a73, #13795b); border-radius: 9px; transition: width .35s ease; }
.ck-h b { font-variant-numeric: tabular-nums; color: var(--ink); }
.ck { display: flex; align-items: center; gap: 9px; padding: 4px 0; font-size: 13.5px; }
.ck-box { width: 20px; height: 20px; flex: none; border-radius: 6px; border: 1.6px solid var(--line-2); background: #fff; display: grid; place-items: center; cursor: pointer; color: transparent; padding: 0; transition: all .15s; }
.ck-box .i { width: 12px; height: 12px; stroke-width: 3; }
.ck-box:hover:not([disabled]) { border-color: var(--brand); }
.ck-box[disabled] { cursor: default; }
.ck.on .ck-box { background: var(--brand); border-color: var(--brand); color: #fff; animation: ckpop .25s ease; }
.ck.on .ck-t { color: var(--ink-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-3) 60%, transparent); }
.ck-t { flex: 1; min-width: 0; }
.ck-by { font-size: 11px; font-weight: 650; color: var(--pc); }
.ck-rm { border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: 16px; line-height: 1; opacity: 0; padding: 0 4px; }
.ck:hover .ck-rm { opacity: 1; }
.ck-add { border: 0; background: none; color: var(--brand); font-weight: 600; font-size: 12.5px; cursor: pointer; padding: 4px 0 0; }
.cklist.static { background: var(--surface-2); margin-top: 6px; }
@keyframes ckpop { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.ckc { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 650; color: var(--ink-2); }
.ckc.all { color: var(--ok); }
.ckc .i { width: 12px; height: 12px; }
.mt .ckc { margin-left: 4px; }

/* Client approval */
.rv { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 2px; padding: 9px 12px; border-radius: 12px; font-size: 13px; }
.rv > .i { flex: none; }
.rv > span:not(.rv-acts) { flex: 1; min-width: 180px; }
.rv em { display: block; font-style: normal; color: var(--ink-2); margin-top: 2px; }
.rv.pending { background: #eef4ff; color: #2c4f9e; border: 1px dashed #b9cdf5; }
.rv.ok { background: var(--ok-soft); color: var(--ok); }
.rv.changes { background: var(--warn-soft); color: #8a5a06; }
.rv-acts { display: flex; gap: 6px; margin-left: auto; }
.rv-mini { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.rv-mini.pending { background: #eef4ff; color: #2c4f9e; }
.rv-mini.approved { background: var(--ok-soft); color: var(--ok); }
.rv-mini.changes { background: var(--warn-soft); color: #8a5a06; }
.btags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 6px; }

/* Reactions */
.rxs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.rx { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; cursor: pointer; font-size: 14px; transition: transform .12s; }
.rx b { font-size: 11.5px; color: var(--ink-2); font-weight: 650; }
.rx:hover { transform: translateY(-1px); }
.rx.on { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 35%, #fff); }
.rx.on b { color: var(--brand); }
.rx-pick { display: flex; gap: 2px; }
.menu .rx-pick button { width: 38px; height: 38px; padding: 0; justify-content: center; font-size: 20px; border-radius: 10px; transition: transform .12s; }
.menu .rx-pick button:hover { transform: scale(1.22); background: var(--hover); }
.menu-sec { font-size: 10.5px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; padding: 8px 10px 3px; }
.menu-sep { height: 1px; background: var(--line); margin: 5px 4px; }
.menu button.on { color: var(--brand); font-weight: 650; }

/* Chat top: filters + search + catch up, pinned bar */
.chat-top { display: flex; align-items: center; gap: 8px; background: rgba(246, 245, 241, .92); border-bottom: 1px solid var(--line); flex: none; position: relative; z-index: 1; }
.chat-top .chat-bar { flex: 1; min-width: 0; border-bottom: 0; background: none; }
.chat-tools { display: flex; align-items: center; gap: 6px; padding-right: 14px; flex: none; }
.csearch { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); color: var(--ink-3); width: 190px; transition: width .2s, border-color .2s; }
.csearch:focus-within { width: 250px; border-color: var(--brand); }
.csearch input { border: 0; outline: 0; background: none; flex: 1; min-width: 0; font-size: 13px; color: var(--ink); }
.ai-btn { background: linear-gradient(135deg, #f3ecff, #e8f5ff); border: 1px solid #ddd0fb; color: #5b34c8; font-weight: 650; }
.ai-btn:hover { background: linear-gradient(135deg, #ebe0ff, #dcefff); border-color: #c9b5f7; }
.ai-btn .i { color: #7c4dff; }
.pinbar { display: flex; align-items: center; gap: 8px; padding: 6px 14px; background: #fffdf5; border-bottom: 1px solid #f1e6c4; flex: none; position: relative; z-index: 1; }
.pin-ic { color: #b7770b; display: inline-flex; }
.pin-t { flex: 1; min-width: 0; text-align: left; border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; padding: 2px 0; }
.pin-t small { font-size: 10.5px; font-weight: 700; color: #b7770b; text-transform: uppercase; letter-spacing: .05em; }
.pin-t span { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pinbar .icon-btn { width: 30px; height: 30px; }
@media (max-width: 900px) {
  .chat-top { flex-wrap: wrap; gap: 0; }
  .chat-top .chat-bar { flex-basis: 100%; }
  .chat-tools { width: 100%; padding: 0 12px 8px; }
  .csearch, .csearch:focus-within { flex: 1; width: auto; }
  .ai-btn span { display: none; }
}

/* Composer extras */
.comp-row .c-ai .i { color: #7c4dff; }
.comp-row .c-ai.busy .i { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 420px) { .comp-row .c-ai { display: none; } }
/* Phones: the message gets the full width, the buttons sit in a row underneath (send on the right). */
@media (max-width: 600px) {
  .comp-row { flex-wrap: wrap; row-gap: 6px; }
  .comp-row textarea { order: -1; flex: 1 0 100%; min-width: 0; }
  .comp-row .send { margin-left: auto; }
}
.pop-check { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 10px; cursor: pointer; }
.pop-check:hover { background: var(--hover); }
.pop-check input { margin-top: 3px; accent-color: var(--brand); }
.pop-check small { display: block; color: var(--ink-3); font-size: 12px; }
.prio-c.high.on { background: #fff1dc; color: #b25e00; border-color: #f7d49a; }
.prio-c.urgent.on { background: #fde4e2; color: #c42b22; border-color: #f6bdb8; }
.prio-c .i { width: 11px; height: 11px; margin-right: 3px; }
#xpop { max-height: 380px; width: min(340px, calc(100% - 28px)); }

/* AI modals */
.ai-sug label, .ai-grid label { display: block; font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; margin: 12px 0 6px; }
.ai-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
.ai-grid > div > div { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; min-height: 28px; }
@media (max-width: 560px) { .ai-grid { grid-template-columns: 1fr; gap: 0; } }
.ai-demo { font-size: 12.5px; padding: 8px 12px; border-radius: 10px; background: #f6f1ff; color: #5b34c8; border: 1px dashed #d6c6fb; margin-bottom: 10px; }
.ai-out h4 { margin: 14px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #5b34c8; }
.ai-out h4:first-child { margin-top: 4px; }
.ai-out ul { margin: 0; padding-left: 18px; }
.ai-out li { margin: 4px 0; }
.ai-out p { margin: 6px 0; }
.ai-sub { margin-bottom: 12px; }
.ai-wait { display: flex; align-items: center; gap: 5px; color: var(--ink-3); padding: 18px 0; }
.ai-wait span { width: 7px; height: 7px; border-radius: 50%; background: #9b7bff; animation: aidot 1s infinite ease-in-out; }
.ai-wait span:nth-child(2) { animation-delay: .15s; }
.ai-wait span:nth-child(3) { animation-delay: .3s; margin-right: 6px; }
@keyframes aidot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.ai-err { color: var(--danger); background: var(--danger-soft); padding: 10px 12px; border-radius: 10px; }
.hero-ai { margin-top: 14px; }
.input.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; white-space: pre; }

/* Calendar */
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-nav b { min-width: 150px; text-align: center; font-size: 15px; }
.cal-nav .flip .i { transform: rotate(180deg); }
.cal { padding: 0; overflow: hidden; }
.cal-h { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.cal-h span { padding: 9px 10px; font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.cal-g { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-c { min-height: 112px; padding: 6px 6px 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; min-width: 0; cursor: pointer; transition: background .15s; }
.cal-c:nth-child(7n) { border-right: 0; }
.cal-c:hover { background: var(--surface-2); }
.cal-c.off { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0, 0, 0, .018) 6px 12px); cursor: default; }
.cal-c.sel { background: var(--brand-soft); }
.cal-d { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 650; color: var(--ink-2); padding: 1px 3px 3px; }
.cal-c.today .cal-d span { background: var(--brand); color: #fff; border-radius: 999px; min-width: 24px; height: 24px; display: grid; place-items: center; }
.cal-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--danger); }
.cal-i { display: block; font-size: 11.5px; font-weight: 550; line-height: 1.3; padding: 3px 6px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: hsl(var(--h) 70% 95%); color: hsl(var(--h) 45% 28%); border-left: 3px solid hsl(var(--h) 55% 50%); }
.cal-i:hover { filter: brightness(.96); }
.cal-i.done { opacity: .55; text-decoration: line-through; }
.cal-i.over { background: var(--danger-soft); color: var(--danger); border-left-color: var(--danger); }
.cal-i.ms { background: #fff; border: 1px dashed hsl(var(--h) 45% 60%); border-left-width: 1px; }
.cal-i.p-urgent:not(.done) { box-shadow: inset 0 0 0 1px #f6bdb8; }
.cal-more { font-size: 11px; color: var(--ink-3); font-weight: 600; padding-left: 4px; }
.cal-list { margin-top: 16px; }
@media (max-width: 760px) {
  .cal-c { min-height: 64px; padding: 4px 3px; }
  .cal-i { font-size: 0; padding: 0; height: 6px; border-radius: 4px; border-left: 0; background: hsl(var(--h) 55% 55%); }
  .cal-i.over { background: var(--danger); }
  .cal-i.ms { height: 6px; background: none; border-style: dashed; }
  .cal-more { font-size: 10px; }
}

/* Workload */
.wl-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.wl-sum .card { padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.wl-sum small { font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.wl-sum b { font-size: 18px; letter-spacing: -.01em; }
.wl-sum span { font-size: 12.5px; color: var(--ink-2); }
.wl-sum em { font-style: normal; }
@media (max-width: 760px) { .wl-sum { grid-template-columns: 1fr; } }
.wl table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.wl th { font-size: 11px; font-weight: 700; color: var(--ink-3); padding: 10px 4px; text-align: center; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; }
.wl th small { display: block; font-size: 10px; font-weight: 600; }
.wl th.we { color: #8f939b; }
.wl th.td { color: var(--brand); }
.wl th.wl-p, .wl td.wl-p { text-align: left; padding-left: 16px; position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 200px; }
.wl th.wl-p { background: var(--surface-2); }
.wl td { padding: 4px; text-align: center; border-bottom: 1px solid var(--line); }
.wl tr:last-child td { border-bottom: 0; }
.wl-c { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 34px; height: 38px; border-radius: 8px; }
.wl-c[data-act] { cursor: pointer; }
.wl-c[data-act]:hover { outline: 2px solid var(--brand); outline-offset: -2px; }
.wl-c.h1 { background: #e3f4ec; color: #13795b; }
.wl-c.h2 { background: #bfe6d3; color: #0f6a4f; }
.wl-c.h3 { background: #fbe1a6; color: #8a5a06; }
.wl-c.h4 { background: #f7b4ad; color: #9c1d16; }
.wl-c.late { background: var(--danger-soft); color: var(--danger); }
.wl-c.x { color: var(--ink-2); }
.wl-t { font-weight: 750; padding-right: 16px !important; }
.wl-key { margin-top: 8px; }

/* Monthly report */
.rp-acts { display: flex; gap: 8px; }
.report { max-width: 880px; margin: 0 auto; padding: 44px 48px; }
.rp-h { display: flex; gap: 18px; align-items: center; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.rp-h h2 { font-size: 28px; letter-spacing: -.03em; margin: 2px 0; }
.rp-h p { color: var(--ink-2); }
.rp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 22px 0 8px; }
.rp-kpis div { padding: 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.rp-kpis b { display: block; font-size: 28px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rp-kpis b small { font-size: 15px; color: var(--ink-3); }
.rp-kpis span { font-size: 12.5px; color: var(--ink-2); }
.report section { margin-top: 26px; }
.report h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 10px; }
.rp-t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rp-t th { text-align: left; font-size: 11px; color: var(--ink-3); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--line-2); }
.rp-t td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rp-t td:first-child { white-space: nowrap; color: var(--ink-2); }
.rp-lb { color: var(--ink-3); font-size: 12px; }
.rp-ok { color: var(--ok); font-weight: 650; }
.rp-late { color: var(--warn); font-weight: 650; }
.rp-list { margin: 0; padding-left: 18px; }
.rp-list li { margin: 5px 0; }
.rp-ms { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.rp-m { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.rp-m span { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.rp-m em { font-style: normal; font-size: 12px; font-weight: 650; }
.rp-m.ok em { color: var(--ok); } .rp-m.late em { color: var(--warn); } .rp-m.miss em { color: var(--danger); } .rp-m.up em { color: var(--blue); }
.rp-f { margin-top: 34px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); text-align: center; }
@media (max-width: 700px) { .report { padding: 24px 18px; } .rp-kpis { grid-template-columns: repeat(2, 1fr); } }
@media print {
  body { overflow: visible; background: #fff; }
  .side, .mtop, .demo-bar, .no-print, .toasts, .scrim { display: none !important; }
  .app, .main, .content { display: block !important; height: auto !important; overflow: visible !important; }
  .page { padding: 0 !important; max-width: none !important; }
  .report { box-shadow: none !important; border: 0 !important; padding: 0 !important; max-width: none; }
  .rp-kpis div, .rp-m { break-inside: avoid; }
  .rp-t tr { break-inside: avoid; }
}

/* Install */
.side-install { display: flex; align-items: center; gap: 9px; margin: 0 10px 8px; padding: 9px 12px; border-radius: 12px; border: 1px dashed var(--line-2); background: rgba(255, 255, 255, .55); cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.side-install:hover { background: #fff; color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, #fff); }
@media (min-width: 901px) {
  .app.side-mini:not(.side-peek) .side-install { justify-content: center; margin: 0 8px 8px; padding: 9px 0; }
  .app.side-mini:not(.side-peek) .side-install .lbl { display: none; }
}
.install ol { padding-left: 20px; margin: 12px 0; }
.install li { margin: 8px 0; }
.page.still > *, .page.still .tile { animation: none; }
/* Phones: a file's buttons move under its name instead of squeezing it into a sliver. */
@media (max-width: 700px) {
  .file { flex-wrap: wrap; row-gap: 8px; padding: 12px 14px; }
  .file .nm { flex: 1 1 calc(100% - 60px); }
  .file .nm small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .file .nm + .btn, .file .nm + a.btn { margin-left: 44px; }
  .file .btn.sm { height: 30px; padding: 0 10px; font-size: 12.5px; }
}

/* ---------- Phones: no zoom-on-tap, panels as bottom sheets ---------- */
.pop-scrim { position: fixed; inset: 0; z-index: 88; background: rgba(23, 25, 28, .32); animation: fadeIn .15s both; }
@media (max-width: 759px) {
  /* iPhone Safari zooms the whole page into any text box under 16px and leaves it zoomed and shifted. */
  input, textarea, select, .input, .comp-row textarea, .csearch input { font-size: 16px !important; }
  html, body { max-width: 100%; overflow-x: hidden; }
  #dpop, #apop, #xpop {
    position: fixed; z-index: 90; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none;
    max-height: 78dvh; overflow-y: auto; border-radius: 20px 20px 0 0; border: 0;
    padding: 10px 14px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 40px rgba(23, 25, 28, .22);
    animation: sheetUp .22s cubic-bezier(.2, .8, .2, 1) both;
  }
  #dpop::before, #apop::before, #xpop::before { content: ''; display: block; width: 38px; height: 4px; border-radius: 4px; background: var(--line-2); margin: 0 auto 8px; }
  #dpop .pop-row, #apop .pop-row, #xpop .pop-row { flex-wrap: wrap; }
  #dpop .chip.toggle, #xpop .chip.toggle { height: 36px; padding: 0 14px; font-size: 14px; }
  #dpop input[type="date"], #dpop input[type="time"] { min-height: 46px; -webkit-appearance: none; appearance: none; background: var(--surface-2); text-align: left; }
  #dpop input[type="date"] { flex: 1 1 60% !important; }
  #dpop input[type="time"] { flex: 1 1 30%; width: auto !important; }
  #dpop .btn.dark, #apop .btn.dark { height: 44px; padding: 0 22px; font-size: 15px; }
  #dpop .pop-row:last-child .btn { flex: 1; justify-content: center; }
  #mpop { left: 8px; right: 8px; width: auto; }
  /* A blur on the message box would pin the sheet to the box instead of the screen. */
  .composer-in { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }

/* ================= Round 9: slim banner, two chats, Progress ================= */
/* The banner is slim by default: one line, with the mini timeline. The arrow opens the full one. */
.phead.compact .phead-in { padding-top: 10px; }

/* Client chat / Team only */
.chan { display: flex; gap: 8px; padding: 10px 18px 0; background: rgba(246, 245, 241, .92); flex: none; position: relative; z-index: 1; }
.chan button { flex: 1; max-width: 300px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px 12px 0 0; border: 1px solid transparent; border-bottom: 0; background: transparent; cursor: pointer; text-align: left; color: var(--ink-2); position: relative; }
.chan button span { display: flex; flex-direction: column; min-width: 0; }
.chan button b { font-size: 13.5px; }
.chan button small { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chan button i { font-style: normal; margin-left: auto; min-width: 20px; height: 20px; border-radius: 99px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 6px; }
.chan button:hover { background: rgba(255, 255, 255, .6); }
.chan button.on { background: #fff; border-color: var(--line); color: var(--ink); box-shadow: 0 -2px 8px rgba(23, 25, 28, .04); }
.chan button[data-v="team"].on { background: #fff8e8; border-color: #f1dfb0; }
.chan button[data-v="team"] .i { color: #b7770b; }
.team-chan .msgs { background-color: #f6efe0; }
.team-chan .chat-top { background: rgba(250, 243, 226, .95); }
.team-chan .composer-in { box-shadow: 0 0 0 2px #f1dfb0, 0 12px 32px -14px rgba(20, 25, 22, .28); }
.team-chan .comp-row textarea { background: #fffbf1; }
@media (max-width: 700px) { .chan { padding: 8px 10px 0; } .chan button small { display: none; } }

/* Progress */
.prog .pg-head { margin-bottom: 16px; }
.prog .pg-head h2 { font-size: 24px; letter-spacing: -.02em; margin: 2px 0 4px; }
.pg-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.pg-s { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: transform .15s, box-shadow .15s; text-decoration: none; color: inherit; }
.pg-s:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.pg-s small { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.pg-s b { font-size: 30px; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pg-s b.sm { font-size: 20px; }
.pg-s b span { font-size: 14px; font-weight: 550; color: var(--ink-2); letter-spacing: 0; }
.pg-s em { font-style: normal; font-size: 12.5px; color: var(--ink-2); }
.pg-s.hot { background: linear-gradient(135deg, #fff7e6, #fff); border-color: #f3d9a4; }
.pg-s.hot b { color: #a86a00; }
.pg-bar { display: block; height: 8px; border-radius: 99px; background: var(--hover); overflow: hidden; }
.pg-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #1a9a73, #13795b); transition: width .5s ease; }
.pg-stack { display: flex; gap: 2px; height: 8px; border-radius: 99px; overflow: hidden; background: var(--hover); }
.pg-stack i { display: block; height: 100%; }
.st0 { --c: #b9bcc2; } .st1 { --c: #8e4ec6; } .st2 { --c: #2c63d6; } .st3 { --c: #e09a13; } .st4 { --c: #13795b; }
.pg-stack i, .pg-pipe i.st0, .pg-pipe i.st1, .pg-pipe i.st2, .pg-pipe i.st3, .pg-pipe i.st4, .pg-legend i, .pg-dot { background: var(--c); }
.pg-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.pg-grid > div { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pg-grid .panel { margin: 0; }
@media (max-width: 1100px) { .pg-sum { grid-template-columns: repeat(2, 1fr); } .pg-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .pg-sum { grid-template-columns: 1fr 1fr; gap: 10px; } .pg-s { padding: 12px 14px; } .pg-s b { font-size: 24px; } }
.pg-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--ink-2); margin: -4px 0 8px; }
.pg-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pg-legend i, .pg-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.pg-page { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto 64px 32px; align-items: center; gap: 12px; padding: 10px 2px; border-top: 1px solid var(--line); }
.pg-pn { min-width: 0; display: flex; flex-direction: column; }
.pg-pn b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-pn a { display: inline-flex; align-items: center; gap: 4px; width: max-content; }
.pg-pipe { display: flex; gap: 3px; }
.pg-pipe i { flex: 1; height: 6px; border-radius: 3px; background: var(--hover); }
.pg-stage { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 650; border: 0; white-space: nowrap; background: color-mix(in srgb, var(--c) 14%, #fff); color: color-mix(in srgb, var(--c) 80%, #000); }
button.pg-stage { cursor: pointer; }
button.pg-stage:hover { background: color-mix(in srgb, var(--c) 24%, #fff); }
.pg-stage .i { width: 11px; height: 11px; }
.pg-when { text-align: right; }
.icon-btn.sm { width: 30px; height: 30px; }
@media (max-width: 700px) {
  .pg-page { grid-template-columns: minmax(0, 1fr) auto 30px; row-gap: 6px; }
  .pg-pipe { grid-column: 1 / -1; grid-row: 2; }
  .pg-when { display: none; }
}
.pg-mnav { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; margin-right: 8px; font-size: 13px; }
.pg-mnav b { min-width: 118px; text-align: center; }
.pg-mnav .flip .i { transform: rotate(180deg); }
.pg-ckh { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.pg-ckh .pg-bar { flex: 1; }
.pg-ckh b { font-variant-numeric: tabular-nums; font-size: 13px; }
.pg-cat { font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; padding: 12px 0 4px; }
.pg-ck { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13.5px; }
.pg-ck .pg-ct { flex: 1; min-width: 0; }
.pg-ck.on .ck-box { background: var(--brand); border-color: var(--brand); color: #fff; }
.pg-ck.on .pg-ct { color: var(--ink-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-3) 60%, transparent); }
.pg-ck .avatar { --s: 22px; }
.pg-post { border: 1px solid var(--line-2); border-radius: 14px; padding: 10px; background: var(--surface-2); margin-bottom: 8px; }
.pg-post textarea { border: 0; background: transparent; resize: vertical; padding: 4px 6px; box-shadow: none; width: 100%; }
.pg-post textarea:focus { outline: 0; box-shadow: none; }
.pg-post-r { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.ai-btn.busy .i { animation: spin 1s linear infinite; }
.pg-u { display: flex; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); }
.pg-u:first-of-type { border-top: 0; }
.pg-ub { flex: 1; min-width: 0; }
.pg-uh { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.pg-x { margin-left: auto; border: 0; background: none; color: var(--ink-3); font-size: 18px; cursor: pointer; opacity: 0; }
.pg-u:hover .pg-x { opacity: 1; }
.pg-ut { font-size: 14px; }
.pg-ut h4 { color: var(--brand); }
.pg-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pg-k { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pg-k small { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-k b { font-size: 22px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pg-k em { font-style: normal; font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.pg-k em.up { color: var(--ok); } .pg-k em.down { color: var(--danger); }
.pb-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.pb-rows, .kp-rows { display: flex; flex-direction: column; gap: 6px; }
.pb-row, .kp-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 140px 36px; gap: 6px; align-items: center; }
.kp-row { grid-template-columns: minmax(0, 1fr) 140px 36px; }
@media (max-width: 600px) { .pb-row { grid-template-columns: 1fr 1fr 36px; } .pb-row input[data-pb="t"] { grid-column: 1 / -1; } }
.prog .panel-h h3 { display: flex; align-items: center; gap: 8px; }
.prog .panel-h { flex-wrap: wrap; gap: 8px; }
.rp-pages { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-cols { columns: 2; column-gap: 28px; }
@media (max-width: 700px) { .rp-cols { columns: 1; } }
@media print { .pg-stage { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* ================= Round 10: branding, client-chat access ================= */
.brand .mark { flex: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .12), inset 0 0 0 1px rgba(255, 255, 255, .18); background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 88%, #fff), var(--brand-2, var(--brand))); }
.brand .mark.img { background: #fff; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .1), inset 0 0 0 1px var(--line); }
.brand .mark.img img { width: 100%; height: 100%; object-fit: contain; }

/* Branding card */
.brand-card { margin-bottom: 18px; }
.bc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 22px; align-items: start; margin-top: 6px; }
@media (max-width: 860px) { .bc-grid { grid-template-columns: 1fr; } }
.bc-form .field { margin-bottom: 14px; }
.bc-sw { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bc-sw button { width: 32px; height: 32px; border-radius: 10px; border: 0; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); transition: transform .12s; }
.bc-sw button:hover { transform: scale(1.08); }
.bc-sw button.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); }
.bc-custom { position: relative; width: 32px; height: 32px; border-radius: 10px; border: 1.5px dashed var(--line-2); display: grid; place-items: center; color: var(--ink-3); cursor: pointer; overflow: hidden; }
.bc-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bc-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.bc-prev { border-radius: 16px; background: linear-gradient(160deg, #f1f0ec, #e9e7e1); padding: 14px; display: grid; gap: 12px; position: relative; }
.bc-cap { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.bc-side { background: #f7f6f2; border-radius: 12px; padding: 12px; box-shadow: var(--shadow-sm); display: grid; gap: 4px; }
.bc-side .brand { margin-bottom: 8px; font-size: 14px; }
.bc-side .brand .mark { width: 28px; height: 28px; border-radius: 8px; }
.bc-nav { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; font-size: 12.5px; font-weight: 550; color: var(--ink-2); }
.bc-nav.on { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.bc-nav.on .i { color: var(--brand); }
.bc-nav .count { margin-left: auto; background: var(--brand); color: #fff; font-size: 10px; min-width: 18px; height: 18px; border-radius: 99px; display: grid; place-items: center; padding: 0 5px; font-weight: 700; }
.bc-login { background: #fff; border-radius: 12px; padding: 16px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.bc-login .brand { margin-bottom: 8px; font-size: 14px; }
.bc-login .brand .mark { width: 28px; height: 28px; border-radius: 8px; }
.bc-login b { font-size: 15px; }
.bc-login span { font-size: 12px; color: var(--ink-3); }
.bc-login .bc-btn { margin-top: 8px; padding: 8px 14px; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 650; font-size: 12.5px; }

/* Who can use the client chat (Share dialog) */
.acc-tag { font-size: 11.5px; font-weight: 650; padding: 3px 9px; border-radius: 99px; background: var(--hover); color: var(--ink-2); white-space: nowrap; }
.acc-tag.cl { background: #fdf0f6; color: #b0306a; }
.acc-tag.off { background: #fff4df; color: #9a6206; }
.acc-sw { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.chan button.off { opacity: .55; cursor: not-allowed; }
.share-list .mrow { gap: 10px; }
@media (max-width: 560px) { .acc-sw span { display: none; } }

/* ================= Round 11: access levels, automations ================= */
/* People & access dialog */
.share-modal { width: min(720px, 100%); }
.share-h { display: flex; align-items: center; gap: 14px; }
.share-h > div { flex: 1; min-width: 0; }
.share-h .plogo { --s: 44px; border-radius: 12px; }
.share-list .mrow { padding: 10px 4px; flex-wrap: wrap; }
.share-list .mrow .nm { flex: 1; min-width: 160px; }
.acc-seg { display: inline-flex; padding: 3px; background: var(--hover); border-radius: 11px; gap: 2px; }
.acc-seg button { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; font-size: 12px; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s; }
.acc-seg button:hover { color: var(--ink); }
.acc-seg button.on { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px rgba(0, 0, 0, .04); }
.acc-seg button.on.post { color: var(--brand); }
.acc-seg button.on.view { color: #2c63d6; }
.acc-seg button.on.none { color: #9a6206; }
.acc-seg button:disabled { opacity: .7; cursor: wait; }
.acc-tag { display: inline-flex; align-items: center; gap: 5px; }
.acc-tag.adm { background: var(--brand-soft); color: var(--brand); }
.acc-tag.view { background: #eaf1ff; color: #2c63d6; }
.acc-tag.none { background: #fff4df; color: #9a6206; }
.acc-key { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 12px; font-size: 12px; color: var(--ink-2); }
.acc-key span { display: flex; flex-direction: column; gap: 2px; }
.acc-key b { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.acc-key b.post, .acc-key b.adm { color: var(--brand); } .acc-key b.view { color: #2c63d6; } .acc-key b.none { color: #9a6206; }
@media (max-width: 560px) { .acc-key { grid-template-columns: 1fr; } .acc-seg button { padding: 0 7px; } .acc-seg button .i { display: none; } }
/* View-only client chat */
.viewbar { display: flex; align-items: center; gap: 12px; margin: 0 auto 12px; width: calc(100% - 28px); max-width: 820px; padding: 12px 14px; border-radius: 16px; background: #eef4ff; border: 1px solid #cfdcf7; color: #2c4f9e; }
.viewbar > span { width: 34px; height: 34px; border-radius: 10px; background: #fff; display: grid; place-items: center; flex: none; }
.viewbar div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.viewbar small { color: #5b74a8; }
.chat.view-only .composer { display: none; }
.chan em.vo { font-style: normal; font-size: 10.5px; font-weight: 700; color: #2c63d6; background: #eaf1ff; padding: 1px 6px; border-radius: 99px; margin-left: 4px; }
.auto-actor { display: inline-flex; align-items: center; gap: 4px; color: #6d3fd6; }

/* Automations */
.au-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.au-sum .card { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.au-sum small { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.au-sum b { font-size: 26px; letter-spacing: -.03em; }
.au-sum b span { font-size: 13px; font-weight: 550; color: var(--ink-2); letter-spacing: 0; }
@media (max-width: 900px) { .au-sum { grid-template-columns: 1fr 1fr; } }
.au-seg { margin-bottom: 16px; }
.au-seg button { display: inline-flex; align-items: center; gap: 6px; }
.au-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.au-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-sm); transition: box-shadow .2s, border-color .2s, opacity .2s; }
.au-card:not(.on) { opacity: .72; }
.au-card.on { border-color: color-mix(in srgb, var(--brand) 25%, var(--line)); box-shadow: var(--shadow); }
.au-top { display: flex; align-items: center; gap: 10px; }
.au-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: none; }
.au-card.rule .au-ic { background: #f3edff; color: #6d3fd6; }
.au-t { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.au-badge { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: #eaf1ff; color: #2c63d6; }
.au-dl { display: grid; grid-template-columns: 64px 1fr; gap: 4px 10px; margin: 0; font-size: 12.5px; }
.au-dl dt { color: var(--ink-3); font-weight: 600; }
.au-dl dd { margin: 0; color: var(--ink-2); }
.au-subj { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--ink) !important; }
.au-f { margin-top: auto; }
.au-flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; font-size: 13px; }
.au-flow > div { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-height: 100%; }
.au-flow small { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 2px; }
.au-arrow { color: var(--ink-3); font-weight: 700; }
.au-note { margin-top: 14px; }
.au-log { padding: 6px 16px; }
.au-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.au-row:first-child { border-top: 0; }
.au-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.au-row b { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.au-row small { color: var(--ink-3); }
.au-link { text-decoration: none; margin-bottom: 12px; }
.au-link > .i:last-child { transform: rotate(180deg); color: var(--ink-3); }
/* Email editor */
.wide-modal { width: min(1020px, 100%); }
.em-ed { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 20px; }
@media (max-width: 860px) { .em-ed { grid-template-columns: 1fr; } }
.em-words { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; }
.em-words .chip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; height: 26px; }
.em-acts { display: flex; gap: 8px; justify-content: space-between; margin-top: 4px; }
.em-prev { border-radius: 14px; border: 1px solid var(--line); overflow: hidden; background: #f6f5f1; display: flex; flex-direction: column; min-height: 460px; }
.em-meta { padding: 10px 14px; background: #fff; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
.em-meta small { font-size: 10.5px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.em-prev iframe { border: 0; width: 100%; flex: 1; min-height: 420px; background: #f6f5f1; }
.modal.wide-modal { width: min(1020px, 100%); max-width: none; }
.modal.share-modal { width: min(740px, 100%); max-width: none; }
.share-list .mrow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto 32px; align-items: center; gap: 12px; flex-wrap: nowrap; }
.share-list .mrow .nm { min-width: 0; }
.share-list .mrow > .icon-btn { grid-column: 5; }
@media (max-width: 640px) {
  .share-list .mrow { grid-template-columns: 34px minmax(0, 1fr) 32px; row-gap: 8px; }
  .share-list .mrow > .small.muted { display: none; }
  .share-list .mrow > .acc-seg, .share-list .mrow > .acc-tag { grid-column: 2 / 4; grid-row: 2; justify-self: start; }
  .share-list .mrow > .icon-btn { grid-column: 3; grid-row: 1; }
}

/* ================= Round 12: universal trackers, services ================= */
.pg-stack i { background: var(--c); }
.pg-stage { background: color-mix(in srgb, var(--c) 14%, #fff); color: color-mix(in srgb, var(--c) 75%, #000); }
button.pg-stage:hover { background: color-mix(in srgb, var(--c) 24%, #fff); }
.pg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.pg-head > div { flex: 1; }
.pg-head h2 { display: inline-flex; align-items: center; gap: 12px; }
.pg-tr-btn { vertical-align: middle; }
.pg-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.pg-tpl { text-align: left; border: 1px solid var(--line-2); background: var(--surface-2); border-radius: 12px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; transition: border-color .15s, background .15s, transform .15s; }
.pg-tpl:hover { border-color: var(--brand); background: #fff; transform: translateY(-1px); }
.pg-tpl b { font-size: 13.5px; display: inline-flex; align-items: center; gap: 5px; }
.pg-tpl small { font-size: 11.5px; color: var(--ink-3); line-height: 1.35; }
.pg-tpl.custom { border-style: dashed; }
.tr-rows { display: flex; flex-direction: column; gap: 8px; }
.tr-row { display: grid; grid-template-columns: 180px minmax(0, 1fr) 36px; gap: 6px; align-items: center; }
@media (max-width: 600px) { .tr-row { grid-template-columns: 1fr 36px; } .tr-row input[data-tr="stages"] { grid-column: 1 / -1; grid-row: 2; } }
.ws-card { margin-bottom: 18px; }
.ws-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-sum { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
@media (max-width: 560px) { .pg-sum { grid-template-columns: 1fr 1fr; } }

/* ================= Round 13: statement filters, rename ================= */
.stmt-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.stmt-who { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 4px 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--ink-3); }
.stmt-who select { border: 0; background: transparent; font-weight: 600; font-size: 13px; color: var(--ink); padding-right: 6px; cursor: pointer; outline: 0; max-width: 220px; }
.stmt-types { display: flex; gap: 6px; flex-wrap: wrap; }
.stmt-types .chip { height: 30px; font-size: 12.5px; }
.wallet { position: relative; }
.w-more { position: absolute; top: 10px; right: 10px; z-index: 3; width: 30px; height: 30px; border-radius: 9px; border: 0; background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .85); display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .15s, background .15s; }
.wallet:hover .w-more, .w-more:focus-visible { opacity: 1; }
.w-more:hover { background: rgba(255, 255, 255, .24); }
@media (hover: none) { .w-more { opacity: 1; } }
.w-more { top: auto; bottom: 12px; right: 12px; background: rgba(255, 255, 255, .1); color: #fff; }
.wallet:hover .w-more { opacity: .9; }

/* ================= Tasks tab ================= */
.st-todo { --st: #8a8e97; --st-soft: #f1f1ee; }
.st-doing { --st: #2c63d6; --st-soft: #e9effc; }
.st-review { --st: #8e4ec6; --st-soft: #f3ebfa; }
.st-done { --st: #13795b; --st-soft: #e7f4ee; }
.st-over { --st: #c9362e; --st-soft: #fbe9e7; }
.st-none { --st: #c3c5ca; --st-soft: #f4f4f2; }
.tk { max-width: 1320px; margin: 0 auto; padding: 22px 28px 40px; }
.tk-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tk-h1 { flex: 1; min-width: 220px; }
.tk-h1 h2 { font-size: 22px; letter-spacing: -.025em; }
.tk-h1 p { color: var(--ink-3); font-size: 13px; margin-top: 3px; }
.tk-views { display: inline-flex; gap: 2px; padding: 4px; border-radius: 13px; background: #ecebe6; box-shadow: inset 0 1px 2px rgba(23, 25, 28, .06); }
.tk-views button { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border: 0; background: none; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.tk-views button:hover { color: var(--ink); }
.tk-views button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(23, 25, 28, .12), 0 0 0 1px rgba(23, 25, 28, .03); }
.tk-views button i { font-style: normal; font-size: 11px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ink); color: #fff; display: inline-grid; place-items: center; }
.tk-new { height: 40px; border-radius: 12px; padding: 0 16px; }

.tk-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.tk-stat { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 14px; padding: 12px 14px 11px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s, transform .15s; position: relative; overflow: hidden; }
div.tk-stat { cursor: default; }
button.tk-stat:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-1px); }
.tk-stat b { font-size: 24px; font-weight: 650; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.tk-stat span { font-size: 12.5px; color: var(--ink-2); font-weight: 550; }
.tk-stat small { font-size: 11.5px; color: var(--ink-3); }
.tk-stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.tk-stat.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.tk-stat.me b { color: var(--blue); }
.tk-stat.red b { color: var(--danger); }
.tk-stat.red::before { background: var(--danger); }
.tk-stat.amber b { color: var(--warn); }
.tk-stat.ok b { color: var(--ok); }

.tk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 16px; padding: 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 5; }
.tk-search { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 11px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-3); flex: 0 1 220px; min-width: 150px; }
.tk-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(19, 121, 91, .12); color: var(--ink-2); }
.tk-search input { border: 0; outline: 0; background: none; width: 100%; font-size: 13.5px; color: var(--ink); }
.tk-quick { display: flex; gap: 4px; flex-wrap: wrap; }
.tk-quick button { height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid transparent; background: none; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.tk-quick button:hover { background: var(--hover); }
.tk-quick button.on { background: var(--ink); color: #fff; }
.tk-quick button.saved { border-color: var(--line-2); }
.tk-quick button.saved.on { border-color: var(--ink); }
.tk-quick .x { margin-left: 2px; opacity: .5; font-size: 14px; line-height: 1; padding: 0 2px; border-radius: 4px; }
.tk-quick .x:hover { opacity: 1; background: rgba(0, 0, 0, .08); }
.tk-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.tk-sel { width: auto; max-width: 160px; height: 30px; font-size: 12.5px; padding: 0 26px 0 10px; border-radius: 9px; }
.tk-sel.set { border-color: var(--ink); background-color: #f4f3ef; font-weight: 600; }
.tk-ftog { display: none; }
.tk-ftog.set { border-color: var(--ink); }
.tk-group { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); font-weight: 600; }
.tk-group select { height: 30px; font-size: 12.5px; width: auto; padding: 0 26px 0 10px; border-radius: 9px; }
.linkish { border: 0; background: none; padding: 0; color: var(--brand); font-weight: 600; font-size: 12.5px; cursor: pointer; }
.linkish:hover { text-decoration: underline; }
.tk-body { margin-top: 16px; }
.tk-hint { text-align: center; color: var(--ink-3); font-size: 13px; padding: 14px; }
.tk-empty { margin-top: 6px; }
.tk-stmt { margin-top: 28px; }

/* status marks */
.tk-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--st); flex: none; box-shadow: 0 0 0 3px var(--st-soft); display: inline-block; }
.tk-dot.tlb-dot { background: hsl(var(--h) 55% 50%); box-shadow: 0 0 0 3px hsl(var(--h) 60% 93%); }
.tk-st { width: 22px; height: 22px; border-radius: 50%; border: 0; background: none; padding: 0; display: grid; place-items: center; cursor: pointer; flex: none; margin-top: 1px; }
.tk-st i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--st); position: relative; transition: transform .15s; }
.tk-st:not([disabled]):hover i { transform: scale(1.12); }
.tk-st[disabled] { cursor: default; }
.tk-st.st-doing i { background: conic-gradient(var(--st) 0 50%, transparent 0); }
.tk-st.st-review i { background: conic-gradient(var(--st) 0 75%, transparent 0); }
.tk-st.st-done i { background: var(--st); }
.tk-st.st-done i::after { content: ''; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tk-st.ghost { color: var(--ink-3); border: 1.5px dashed var(--line-2); width: 20px; height: 20px; }
.st-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; color: var(--st); background: var(--st-soft); }
.st-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--st); }
.menu .tk-dot { margin: 0 3px; }

/* labels */
.tlb { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; color: hsl(var(--h) 50% 30%); background: hsl(var(--h) 60% 93%); white-space: nowrap; border: 0; }
.tlb button { border: 0; background: none; padding: 0 0 0 2px; color: inherit; opacity: .55; cursor: pointer; font-size: 13px; line-height: 1; }
.tlb button:hover { opacity: 1; }
.tlb.on { height: 24px; font-size: 12px; }
.tlb.sug { height: 24px; font-size: 12px; background: none; border: 1px dashed hsl(var(--h) 40% 75%); cursor: pointer; }
.tlb.sug:hover { background: hsl(var(--h) 60% 95%); }

/* list view */
.tk-list { display: flex; flex-direction: column; gap: 14px; }
.tk-grp { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); overflow: hidden; }
.tk-grp > header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; user-select: none; background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.tk-grp > header b { font-size: 13.5px; font-weight: 650; }
.tk-grp > header .n { font-size: 12px; font-weight: 650; color: var(--ink-3); background: var(--hover); padding: 1px 8px; border-radius: 999px; }
.tk-grp > header > svg { color: var(--ink-3); transition: transform .2s; }
.tk-grp.closed > header > svg { transform: rotate(-90deg); }
.tk-grp > header .linkish { margin-left: auto; }
.tk-grp.closed .tk-rows { display: none; }
.tk-rows { border-top: 1px solid var(--line); }
.tk-row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .12s; position: relative; }
.tk-row:last-child { border-bottom: 0; }
.tk-row:hover { background: #fbfaf7; }
.tk-row.sel { background: var(--brand-soft); }
.tk-row.sel::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand); }
.tk-row.over::after { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--danger); }
.tk-row.st-done .tk-name { color: var(--ink-3); text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .2); }
.tk-row.ghost { cursor: default; opacity: .75; }
.tk-main { flex: 1; min-width: 0; }
.tk-name { font-size: 14px; font-weight: 550; line-height: 1.4; overflow-wrap: anywhere; }
.tk-rec { display: inline-grid; place-items: center; color: var(--brand); margin-right: 6px; vertical-align: -1px; }
.tk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; margin-top: 4px; }
.tk-meta:empty { display: none; }
.tk-m { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-3); font-weight: 550; }
.tk-m.chan { color: var(--ink-2); background: var(--hover); padding: 1px 7px; border-radius: 6px; }
.tk-m.ms { color: #8a5a00; }
.tk-part { font-size: 11.5px; font-weight: 650; color: var(--blue); }
.tk-right { display: flex; align-items: center; gap: 12px; flex: none; }
.tk-nodue { font-size: 12px; color: var(--ink-3); }
.tk-who { display: inline-flex; }
.tk-who > * + * { margin-left: -6px; }
.tk-av { position: relative; display: inline-flex; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); }
.tk-av.done::after { content: '✓'; position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 8.5px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface); }
.tk-add { display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: var(--ink-3); border-top: 1px dashed var(--line); cursor: text; }
.tk-add input { flex: 1; border: 0; outline: 0; background: none; font-size: 13.5px; color: var(--ink); }
.tk-add:focus-within { color: var(--brand); background: #fcfcfa; }
.tk-none { padding: 14px 16px; color: var(--ink-3); font-size: 13px; }

/* board view */
.tk-board { display: grid; grid-template-columns: repeat(4, minmax(250px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 8px; align-items: stretch; }
.tk-board.people { align-items: start; }
.tk-board.people { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); }
.tk-col { background: #efeee9; border-radius: 18px; padding: 10px; display: flex; flex-direction: column; min-height: 180px; max-height: calc(100dvh - 190px); border: 1.5px solid transparent; transition: border-color .15s, background .15s; }
.tk-col.over { border-color: var(--st); background: var(--st-soft); }
.tk-board.dragging .tk-col[data-drop] { border-style: dashed; border-color: var(--line-2); }
.tk-board.dragging .tk-col.over { border-style: solid; border-color: var(--st); }
.tk-col-h { display: flex; align-items: center; gap: 9px; padding: 4px 4px 10px; }
.tk-col-h b { font-size: 13.5px; font-weight: 650; }
.tk-col-h .nm { flex: 1; min-width: 0; }
.tk-col-h .nm b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-col-h small { font-size: 11.5px; color: var(--ink-3); }
.tk-col-h .n { font-size: 12px; font-weight: 650; color: var(--ink-3); }
.tk-col-h .icon-btn:hover { background: rgba(255, 255, 255, .7); }
.tk-col.st-todo { border-top: 0; }
.tk-cards { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding: 2px; min-height: 60px; flex: 1; }
.tk-card { background: var(--surface); border-radius: 13px; padding: 12px; box-shadow: 0 1px 2px rgba(23, 25, 28, .07), 0 0 0 1px rgba(23, 25, 28, .03); cursor: pointer; display: flex; flex-direction: column; gap: 9px; transition: box-shadow .15s, transform .15s, opacity .15s; position: relative; }
.tk-card::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--st); opacity: .9; }
.tk-card.st-todo::before { opacity: 0; }
.tk-card.over::before { background: var(--danger); opacity: 1; }
.tk-card:hover { box-shadow: 0 8px 22px -10px rgba(23, 25, 28, .28), 0 0 0 1px rgba(23, 25, 28, .06); transform: translateY(-1px); }
.tk-card[draggable="true"] { cursor: grab; }
.tk-card.dragging { opacity: .45; transform: rotate(1.5deg); }
.tk-card.landed { animation: land .35s var(--ease, ease); }
@keyframes land { 0% { transform: scale(.97); box-shadow: 0 0 0 2px var(--brand); } 100% { transform: none; } }
.tk-card .bcover { margin: -12px -12px 0; border-radius: 13px 13px 0 0; overflow: hidden; max-height: 130px; }
.tk-card .bcover img { width: 100%; display: block; object-fit: cover; }
.tk-card-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tk-card-t { font-size: 13.5px; font-weight: 550; line-height: 1.4; overflow-wrap: anywhere; }
.tk-card.st-done .tk-card-t { color: var(--ink-3); text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .2); }
.tk-card-m { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.tk-card-m .bicons { display: inline-flex; gap: 8px; color: var(--ink-3); font-size: 11.5px; }
.tk-card-m .bicons span { display: inline-flex; align-items: center; gap: 3px; }
.tk-card-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tk-drop-hint { border: 1.5px dashed var(--line-2); border-radius: 12px; padding: 18px 10px; text-align: center; color: var(--ink-3); font-size: 12.5px; }
.tk-col-more { margin: 8px auto 2px; display: block; }

/* calendar view */
.tk-cal { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); overflow: hidden; }
.tc-head { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tc-head h3 { font-size: 16px; min-width: 150px; text-align: center; }
.icon-btn.flip svg { transform: rotate(180deg); }
.tc-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-3); font-weight: 550; flex-wrap: wrap; }
.tc-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--st); margin-left: 6px; }
.tc-legend i.ghost, .tc-dots i.ghost { background: none; border: 1.5px dashed var(--ink-3); }
.tc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.tc-wd { padding: 8px 10px; font-size: 11.5px; font-weight: 650; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--line); }
.tc-day { min-height: 112px; padding: 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: background .12s; min-width: 0; }
.tc-day:nth-child(7n) { border-right: 0; }
.tc-day:hover { background: #fbfaf7; }
.tc-day.blank { background: var(--surface-2); cursor: default; }
.tc-day.past .tc-n { color: var(--ink-3); }
.tc-day.sel { background: #f6fbf8; box-shadow: inset 0 0 0 2px var(--brand); }
.tc-n { font-size: 12.5px; font-weight: 650; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; }
.tc-day.today .tc-n { background: var(--brand); color: #fff; }
.tc-chips { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tc-chip { display: flex; align-items: center; gap: 4px; border: 0; text-align: left; font-size: 11.5px; font-weight: 600; padding: 3px 7px; border-radius: 6px; background: var(--st-soft); color: var(--ink); box-shadow: inset 2px 0 0 var(--st); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tc-chip.over { background: var(--danger-soft); box-shadow: inset 2px 0 0 var(--danger); }
.tc-chip.st-done { color: var(--ink-3); text-decoration: line-through; }
.tc-chip.ghost { background: none; border: 1px dashed var(--line-2); box-shadow: none; color: var(--ink-3); cursor: default; }
.tc-more { font-size: 11px; color: var(--ink-3); font-weight: 600; padding-left: 4px; }
.tc-dots { display: none; gap: 3px; justify-content: center; }
.tc-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--st); }
.tc-dots i.over { background: var(--danger); }
.tc-agenda { border-top: 1px solid var(--line); }
.tc-ag-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); }

/* recurring view */
.rc-intro { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, #eef7f2, #f5f3ee); border: 1px solid #dcebe3; color: var(--brand); }
.rc-intro div { display: flex; flex-direction: column; gap: 2px; }
.rc-intro b { color: var(--ink); font-size: 13.5px; }
.rc-intro span { color: var(--ink-2); font-size: 12.5px; }
.rc-sum { margin: 16px 2px 10px; font-size: 13px; color: var(--ink-2); }
.rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.rc-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 11px; box-shadow: var(--shadow-sm); transition: box-shadow .15s; }
.rc-card:hover { box-shadow: var(--shadow); }
.rc-card.paused, .rc-card.ended { background: var(--surface-2); }
.rc-card.paused .rc-name b, .rc-card.ended .rc-name b { color: var(--ink-2); }
.rc-top { display: flex; align-items: center; gap: 11px; }
.rc-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: none; font-size: 16px; }
.rc-card.ms .rc-ic { background: #fbf1dd; color: #8a5a00; }
.rc-card.paused .rc-ic { background: var(--hover); color: var(--ink-3); }
.rc-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rc-name b { font-size: 14.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-name small { font-size: 12.5px; color: var(--ink-2); }
.rc-st { font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.rc-st.on { color: var(--ok); background: var(--ok-soft); }
.rc-st.paused { color: var(--warn); background: var(--warn-soft); }
.rc-st.ended { color: var(--ink-3); background: var(--hover); }
.rc-desc { font-size: 12.5px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rc-next { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); padding: 9px 11px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--line); }
.rc-next b { color: var(--ink); font-weight: 650; }
.rc-next span { margin-left: auto; color: var(--ink-3); font-size: 11.5px; }
.rc-tags { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rc-ppl { font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-chips { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.rc-hist { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--line); }
.rc-dots { display: inline-flex; gap: 4px; align-items: center; }
.rc-dots a { width: 12px; height: 12px; border-radius: 4px; background: var(--line-2); transition: transform .12s; }
.rc-dots a:hover { transform: scale(1.3); }
.rc-dots a.ok { background: #1f9a6f; }
.rc-dots a.late { background: #d89a2b; }
.rc-dots a.miss { background: var(--danger); }
.rc-dots a.open { background: none; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.rc-dots em { font-size: 12px; color: var(--ink-3); font-style: normal; }
.rc-rate { font-size: 12px; color: var(--ink-3); font-weight: 550; }
.rc-acts { display: flex; gap: 6px; align-items: center; }

/* new task form */
.modal.tm-modal { max-width: 720px; }
.tm { display: flex; flex-direction: column; gap: 10px; }
.tm-title { border: 0; outline: 0; font-size: 21px; font-weight: 650; letter-spacing: -.02em; padding: 4px 0; background: none; width: 100%; }
.tm-title::placeholder { color: #c2c4c9; }
.tm-desc { border: 0; outline: 0; resize: vertical; font-size: 14px; color: var(--ink-2); background: none; padding: 0 0 8px; border-bottom: 1px solid var(--line); min-height: 44px; }
.tm-grid { display: flex; flex-direction: column; }
.tm-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.tm-row > label { font-size: 12.5px; font-weight: 600; color: var(--ink-3); padding-top: 6px; }
.tm-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.tm-ctl .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tm-person { gap: 6px; padding-left: 3px; }
.tm-person.on { background: var(--pc); border-color: var(--pc); }
.tm-person .avatar { box-shadow: none; }
.tm-note { font-size: 12px; color: var(--ink-3); }
.tm-due { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tm-due .input { width: auto; }
.tm-labels { align-items: center; }
.tm-lbl-in { width: 120px; height: 26px; font-size: 12px; }
.tm-ck { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.tm-ck-i { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.tm-ck-i .ck-box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line-2); display: grid; place-items: center; color: transparent; }
.tm-ck-i span:nth-child(2) { flex: 1; }
.tm-ck-i button, .tm-ck-i button { border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: 16px; }
.tm-repeat { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-top: 6px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); cursor: pointer; }
.tm-repeat b { display: block; font-size: 13.5px; }
.tm-repeat small { color: var(--ink-3); font-size: 12px; }
.tm-sw { width: 38px; height: 22px; border-radius: 999px; background: var(--line-2); position: relative; flex: none; transition: background .2s; }
.tm-sw i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .2s; }
.tm-sw.on { background: var(--brand); }
.tm-sw.on i { transform: translateX(16px); }
.tm-sched { border: 1px solid #dcebe3; background: #f7fbf9; border-radius: 14px; padding: 4px 14px 12px; }
.tm-sched .tm-row { border-bottom-color: #e3efe8; }
.tm-days { display: inline-flex; gap: 4px; }
.tm-days button { width: 34px; height: 32px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface); font-size: 12.5px; font-weight: 650; cursor: pointer; color: var(--ink-2); }
.tm-days button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.tm-every, #tm-mday, #tm-lead, .tm-ctl > .input { width: auto; }
.tm-preview { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.tm-preview svg { margin-top: 3px; color: var(--brand); }
.tm-preview small { color: var(--ink-3); }
.tm-preview i { font-style: normal; color: var(--ink-3); margin: 0 6px; }
.tm-preview .red { color: var(--danger); }

/* task drawer */
.td-bg { position: fixed; inset: 0; z-index: 90; background: rgba(23, 25, 28, .18); animation: fade .15s; display: flex; justify-content: flex-end; }
.td-bg.out { opacity: 0; transition: opacity .18s; }
.td-bg.out .td { transform: translateX(30px); transition: transform .18s; }
.td { width: min(560px, 100%); height: 100%; background: var(--surface); box-shadow: -24px 0 60px -30px rgba(23, 25, 28, .45); display: flex; flex-direction: column; animation: slideIn .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes slideIn { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.td-top { display: flex; align-items: center; gap: 4px; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--line); }
.td-chan { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; padding: 4px 10px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); }
.td-chan.team { background: var(--hover); color: var(--ink-2); }
.td-body { flex: 1; overflow-y: auto; padding: 18px 22px 40px; }
.td-title { width: 100%; border: 0; outline: 0; resize: none; font-size: 22px; font-weight: 650; letter-spacing: -.02em; line-height: 1.3; padding: 4px 6px; margin: 0 -6px; border-radius: 8px; background: none; overflow: hidden; }
textarea.td-title:hover { background: var(--surface-2); }
textarea.td-title:focus { background: var(--surface-2); box-shadow: 0 0 0 2px var(--brand-soft); }
.td-status { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; margin: 14px 0; border-radius: 13px; background: #f1f0ec; }
.td-status button { display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border: 0; background: none; border-radius: 9px; font-size: 12.5px; font-weight: 650; color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.td-status button i { width: 8px; height: 8px; border-radius: 50%; background: var(--st); opacity: .5; }
.td-status button:not([disabled]):hover { background: rgba(255, 255, 255, .7); }
.td-status button.on { background: var(--surface); color: var(--st); box-shadow: 0 1px 2px rgba(23, 25, 28, .1); }
.td-status button.on i { opacity: 1; }
.td-status.ro button { cursor: default; }
.td-mine { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); font-size: 13px; font-weight: 600; margin-bottom: 14px; flex-wrap: wrap; }
.td-mine span { display: inline-flex; align-items: center; gap: 7px; }
.td-mine.ok { background: var(--ok-soft); color: var(--ok); }
.td-fields { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.td-f { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: start; }
.td-f > label { font-size: 12.5px; color: var(--ink-3); font-weight: 600; padding-top: 4px; }
.td-f > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; font-size: 13.5px; }
.td-f .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.td-f .input { width: auto; }
.td-people { display: flex; flex-wrap: wrap; gap: 6px; }
.td-people .who-pill button { border: 0; background: none; padding: 0 0 0 3px; cursor: pointer; color: inherit; opacity: .5; font-size: 14px; }
.td-people .who-pill button:hover { opacity: 1; }
.td-add { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px dashed var(--line-2); background: none; font-size: 12px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.td-add:hover { border-color: var(--ink-3); color: var(--ink); }
.td-sec { margin-top: 20px; }
.td-sec h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.td-sec h4 .linkish { margin-left: auto; text-transform: none; letter-spacing: 0; }
.td-sec h4 .n { background: var(--hover); padding: 0 7px; border-radius: 999px; color: var(--ink-2); }
.td-text { font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.td-edit-f { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.td .thread { border: 0; padding: 0; margin: 0; background: none; }

/* chat bubble: task name, status, labels */
.btitle { font-weight: 650; font-size: 14.5px; letter-spacing: -.01em; margin: 2px 0 2px; display: flex; align-items: center; gap: 6px; }
.bt-go { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--brand-soft); color: var(--brand); flex: none; }
.blabels { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }

@media (max-width: 1100px) {
  .tk-board:not(.people) { grid-template-columns: repeat(4, minmax(260px, 80vw)); scroll-snap-type: x mandatory; }
  .tk-board .tk-col { scroll-snap-align: start; }
  .tk-filters { margin-left: 0; }
}
@media (max-width: 800px) {
  .tk { padding: 14px 14px 30px; }
  .tk-head { gap: 10px; }
  .tk-h1 p { display: none; }
  .tk-views { order: 3; width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); }
  .tk-views button { justify-content: center; padding: 0 6px; gap: 5px; }
  .tk-new { height: 38px; padding: 0 12px; }
  .tk-stats { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 14px -14px 0; padding: 0 14px 2px; gap: 8px; scrollbar-width: none; }
  .tk-stats::-webkit-scrollbar { display: none; }
  .tk-stat { flex: 0 0 132px; scroll-snap-align: start; padding: 10px 12px; }
  .tk-stat b { font-size: 21px; }
  .tk-bar { position: static; padding: 8px; border-radius: 14px; }
  .tk-search { flex: 1 1 0; }
  .tk-ftog { display: inline-flex; height: 34px; }
  .tk-filters { display: none; }
  .tk-bar.open .tk-filters { display: flex; }
  .tk-quick { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; }
  .tk-quick::-webkit-scrollbar { display: none; }
  .tk-filters { width: 100%; }
  .tk-sel, .tk-group select { max-width: 130px; font-size: 16px; }
  .tk-row { padding: 11px 12px; gap: 10px; flex-wrap: wrap; }
  .tk-main { flex: 1 1 calc(100% - 40px); }
  .tk-right { width: 100%; padding-left: 32px; justify-content: flex-start; gap: 10px; }
  .tk-right .tk-who { margin-left: auto; }
  .tk-add input { font-size: 16px; }
  .tk-col { max-height: none; }
  .tc-day { min-height: 54px; padding: 4px 2px; align-items: center; }
  .tc-chips { display: none; }
  .tc-dots { display: flex; }
  .tc-wd { padding: 6px 2px; text-align: center; font-size: 10.5px; }
  .tc-head h3 { min-width: 0; flex: 1; font-size: 15px; }
  .tc-legend { display: none; }
  .rc-grid { grid-template-columns: minmax(0, 1fr); }
  .rc-card { padding: 14px; }
  .rc-next span { margin-left: 0; width: 100%; }
  .rc-name b { white-space: normal; }
  .tm-row { grid-template-columns: 1fr; gap: 6px; }
  .tm-row > label { padding-top: 0; }
  .tm-title { font-size: 19px; }
  .tm-desc, .tm-lbl-in, .tm .input { font-size: 16px; }
  .tm-days button { width: 36px; }
  .td { width: 100%; }
  .td-bg { background: rgba(23, 25, 28, .3); }
  .td-body { padding: 14px 16px 40px; }
  .td-f { grid-template-columns: 84px minmax(0, 1fr); }
  .td-f .input { font-size: 16px; }
  .td-status button { font-size: 11.5px; gap: 4px; }
}

/* ================= Many projects: sidebar, quick switcher, list view ================= */
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.nav-sec { gap: 4px; }
.nav-sec span { flex: 1; }
.nav-sec span em { font-style: normal; font-weight: 700; color: var(--ink-3); background: rgba(23, 25, 28, .06); border-radius: 999px; padding: 0 6px; margin-left: 4px; letter-spacing: 0; }
.side-find { display: flex; align-items: center; gap: 7px; height: 32px; margin: 2px 0 6px; padding: 0 9px; border-radius: 9px; background: rgba(255, 255, 255, .7); border: 1px solid var(--line); color: var(--ink-3); }
.side-find:focus-within { background: var(--surface); border-color: var(--brand); color: var(--ink-2); }
.side-find input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 13px; color: var(--ink); }
.side-find kbd, .qs kbd { font: 600 10.5px var(--font); color: var(--ink-3); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; background: var(--surface); white-space: nowrap; }
.side-grp { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 650; color: var(--ink-3); padding: 10px 10px 4px; }
.side-none { font-size: 12.5px; color: var(--ink-3); padding: 8px 10px; }
.side-more, .side-all { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; margin-top: 6px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--ink-2); border: 1px dashed var(--line-2); }
.side-all:hover, .side-more:hover { background: var(--surface); color: var(--ink); border-style: solid; }
.side-all .lbl { flex: 1; }
.side-all .count svg { transform: rotate(180deg); }
.nav-item.proj .pin-star { opacity: 0; }
.nav-item.proj:hover .pin-star, .pin-star.on { opacity: 1; }
.pin-star { border: 0; background: none; cursor: pointer; font-size: 14px; line-height: 1; color: var(--ink-3); padding: 2px 3px; border-radius: 5px; flex: none; transition: opacity .15s, color .15s; }
.pin-star:hover { color: #b7770b; background: rgba(0, 0, 0, .05); }
.pin-star.on { color: #d6a300; }
.app.side-mini:not(.side-peek) .side-find, .app.side-mini:not(.side-peek) .side-grp, .app.side-mini:not(.side-peek) .pin-star, .app.side-mini:not(.side-peek) .side-all .count { display: none; }
.app.side-mini:not(.side-peek) .side-all { justify-content: center; padding: 0; border: 0; }
.app.side-mini:not(.side-peek) .side-all .lbl { display: none; }

/* sidebar that slides open over the page when collapsed */
@media (min-width: 901px) {
  .app.side-mini .side { position: relative; z-index: 60; width: 68px; transition: width .3s cubic-bezier(.3, .7, .2, 1), box-shadow .3s; overflow: hidden; }
  .app.side-mini .side-scroll { overflow-x: hidden; }
  .app.side-mini.side-peek .side { width: 264px; box-shadow: 24px 0 60px -24px rgba(23, 25, 28, .38); border-right-color: transparent; }
  .app.side-mini.side-peek .side .nav-item, .app.side-mini.side-peek .side .brand { white-space: nowrap; }
  .app.side-mini:not(.side-peek) .side { cursor: pointer; }
  .app.side-mini .side::after { content: ''; position: absolute; top: 50%; right: 4px; width: 3px; height: 34px; margin-top: -17px; border-radius: 3px; background: var(--line-2); opacity: 0; transition: opacity .2s; }
  .app.side-mini:not(.side-peek) .side:hover::after { opacity: 1; }
}

/* quick switcher */
.modal.qs-modal { max-width: 580px; align-self: start; margin-top: 12vh; overflow: hidden; }
.qs-in { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); color: var(--ink-3); }
.qs-in input { flex: 1; border: 0; outline: 0; font-size: 17px; background: none; color: var(--ink); }
.qs-list { max-height: 52vh; overflow-y: auto; padding: 8px; }
.qs-sec { font-size: 11px; font-weight: 650; color: var(--ink-3); padding: 6px 10px; text-transform: uppercase; letter-spacing: .06em; }
.qs-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 11px; }
.qs-row .plogo { --s: 32px; }
.qs-row > span:not(.plogo):not(.qs-ic) { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.qs-row .plogo { flex: none; }
.qs-row b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-row small { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-row em { font-style: normal; color: #d6a300; flex: none; }
.qs-row.on, .qs-row:hover { background: var(--brand-soft); }
.qs-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--hover); display: grid !important; place-items: center; flex: none !important; color: var(--ink-2); }
.qs-none { padding: 26px; text-align: center; color: var(--ink-3); }
.qs-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); background: var(--surface-2); }
.qs-foot kbd { margin-right: 3px; }

/* all projects: list view */
.ptable-wrap { padding: 0; overflow-x: auto; }
.ptable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ptable th { text-align: left; font-size: 11.5px; font-weight: 650; color: var(--ink-3); padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface-2); position: sticky; top: 0; }
.ptable th button { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 0; }
.ptable th.on button { color: var(--ink); }
.ptable td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; font-variant-numeric: tabular-nums; }
.ptable tr:last-child td { border-bottom: 0; }
.ptable tbody tr { cursor: pointer; transition: background .12s; }
.ptable tbody tr:hover { background: #fbfaf7; }
.ptable td.red { color: var(--danger); font-weight: 700; }
.ptable td.zero, .ptable .zero { color: var(--ink-3); }
.ptable .ft-badge { background: var(--blue-soft); color: var(--blue); }
.ptable .chips { flex-wrap: nowrap; }
.pt-name { display: flex; align-items: center; gap: 11px; min-width: 200px; }
.pt-name .plogo { --s: 34px; }
.pt-name span { display: flex; flex-direction: column; }
.pt-name b { font-weight: 600; }
.pt-name small { font-size: 12px; color: var(--ink-3); }

/* chat people panel: a slim strip that slides open */
@media (min-width: 901px) {
  .pbody.chatmode { grid-template-columns: minmax(0, 1fr) 60px; }
  .people-panel { display: block !important; position: relative; overflow: visible; padding: 0; z-index: 20; }
}
@media (max-width: 900px) { .people-panel { display: none; } }
.pp-strip { width: 100%; height: 100%; border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 0; cursor: pointer; color: var(--ink-3); transition: background .2s; }
.pp-strip:hover { background: var(--surface-2); }
.pp-n { font-size: 11px; font-weight: 700; margin-top: -4px; }
.pp-face { position: relative; display: inline-flex; border-radius: 50%; transition: transform .15s; }
.pp-strip:hover .pp-face { transform: scale(1.05); }
.pp-face.on { box-shadow: 0 0 0 2px var(--brand); }
.pp-face i { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 2px var(--surface); }
.pp-face i.late { background: var(--danger); }
.pp-more { font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.pp-late { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; font-weight: 700; color: var(--danger); margin-top: 4px; }
.pp-full { position: absolute; top: 0; right: 0; bottom: 0; width: 310px; background: var(--surface); border-left: 1px solid var(--line); box-shadow: -24px 0 50px -26px rgba(23, 25, 28, .35); padding: 14px 12px; overflow-y: auto;
  transform: translateX(24px); opacity: 0; pointer-events: none; transition: transform .32s cubic-bezier(.3, .7, .2, 1), opacity .25s; }
.people-panel.open .pp-full { transform: none; opacity: 1; pointer-events: auto; }
.pp-h { display: flex; align-items: center; gap: 4px; padding: 0 0 0 8px; }
.pp-h h3 { flex: 1; padding: 0; }
.pp-h .icon-btn.on { color: var(--brand); background: var(--brand-soft); }
.people-panel.pinned .pp-h [data-act="pp-pin"] { color: var(--brand); background: var(--brand-soft); }

/* ================= Proof of work ================= */
.need-chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 650; color: #8a4b00; background: #fdf0dc; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.done-panel.req { border-color: #f1d9ae; background: #fffaf1; }
.dp-need { display: flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 7px 10px; border-radius: 9px; background: #fdf0dc; color: #7a4300; margin-bottom: 8px; }
.dp-need em { font-style: normal; opacity: .75; }
.dp-need.ok { background: var(--ok-soft); color: var(--ok); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.td-proof { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; width: 100%; }
.td-proof input { flex: 1; min-width: 160px; }
.tm-what { flex: 1 1 100%; }
.subs { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.sub-row { display: flex; gap: 11px; align-items: flex-start; padding: 11px 13px; border-bottom: 1px solid var(--line); }
.sub-row:last-child { border-bottom: 0; }
.sub-row.in { background: #fbfdfc; }
.sub-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sub-b b { font-size: 13.5px; }
.sub-b small { font-size: 12px; color: var(--ink-3); }
.sub-b p { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.sub-b .atts { margin-top: 6px; }
.sub-st { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1.5px dashed var(--line-2); color: #fff; flex: none; }
.sub-row.in .sub-st { background: var(--ok); border: 0; }
.td-sec h4 .need-chip { text-transform: none; letter-spacing: 0; }

/* ================= Import wizard ================= */
.modal.imp-modal { max-width: 1040px; }
.imp-h { align-items: flex-start; }
.imp-steps { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.imp-steps span { display: inline-flex; align-items: center; gap: 7px; }
.imp-steps i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11.5px; background: var(--hover); }
.imp-steps span.on { color: var(--ink); }
.imp-steps span.on i { background: var(--ink); color: #fff; }
.imp-steps span.done i { background: var(--ok); color: #fff; }
.imp-steps b { width: 24px; height: 1px; background: var(--line-2); }
.imp-b { display: flex; flex-direction: column; gap: 14px; }
.imp-drop { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 34px 20px; border-radius: 18px; border: 2px dashed var(--line-2); background: linear-gradient(180deg, #fbfaf7, #f6f5f1); cursor: pointer; color: var(--ink-3); transition: border-color .15s, background .15s; }
.imp-drop:hover, .imp-drop.over { border-color: var(--brand); background: #f2f9f5; color: var(--brand); }
.imp-drop > svg { width: 30px; height: 30px; }
.imp-drop b { color: var(--ink); font-size: 15px; }
.imp-drop span { font-size: 13px; max-width: 460px; }
.imp-busy { font-style: normal; font-weight: 600; color: var(--brand); margin-top: 6px; }
.imp-or { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 12px; }
.imp-or::before, .imp-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.imp-paste { font-size: 13px; resize: vertical; }
.imp-tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.imp-tips div { display: flex; gap: 10px; padding: 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
.imp-tips svg { color: var(--brand); flex: none; margin-top: 1px; }
.imp-tips b { color: var(--ink); }
.imp-sum { display: flex; gap: 10px; flex-wrap: wrap; }
.imp-sum div { display: flex; align-items: baseline; gap: 7px; padding: 10px 14px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); }
.imp-sum b { font-size: 22px; letter-spacing: -.02em; }
.imp-sum span { font-size: 12.5px; font-weight: 600; }
.imp-sum .amber { background: var(--warn-soft); color: var(--warn); }
.imp-sum .red { background: var(--danger-soft); color: var(--danger); }
.imp-sum .muted { background: var(--hover); color: var(--ink-2); }
.imp-table-wrap { max-height: 42vh; overflow: auto; border: 1px solid var(--line); border-radius: 14px; }
.imp-table { border-collapse: collapse; font-size: 12.5px; min-width: 100%; }
.imp-table th { position: sticky; top: 0; background: var(--surface-2); padding: 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; z-index: 1; }
.imp-table th small { display: block; font-size: 11px; color: var(--ink-3); font-weight: 500; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.imp-table th select { min-width: 150px; height: 30px; font-size: 12px; }
.imp-table th select:not(.set) { color: var(--ink-3); border-style: dashed; }
.imp-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.imp-table td.skip { color: #c1c3c8; }
.imp-table .ck { width: 34px; text-align: center; }
.imp-table tr.off td:not(.ck), .imp-table tr.dupe td:not(.ck):not(.st) { opacity: .45; }
.imp-table tr.bad { background: #fff7f6; }
.imp-flag { font-size: 11px; font-weight: 650; padding: 2px 7px; border-radius: 6px; }
.imp-flag.dupe { color: var(--warn); background: var(--warn-soft); }
.imp-flag.bad { color: var(--danger); background: var(--danger-soft); }
.imp-flag.warn { color: var(--warn); background: var(--warn-soft); }
.imp-opts { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; }
.imp-opt { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); }
.imp-opt > label { font-size: 12.5px; font-weight: 650; }
.imp-opt small { font-size: 11.5px; color: var(--ink-3); }
.imp-opt .chips { display: flex; flex-wrap: wrap; gap: 5px; }
.imp-opt.row { flex-direction: row; align-items: flex-start; gap: 10px; cursor: pointer; grid-column: 1 / -1; }
.imp-opt.row span { display: flex; flex-direction: column; font-size: 13px; }
.imp-run { display: flex; align-items: center; gap: 22px; padding: 10px 4px; }
.imp-ring { width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--brand) calc(var(--p) * 1%), var(--hover) 0); flex: none; position: relative; }
.imp-ring::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: var(--surface); }
.imp-ring b { position: relative; font-size: 18px; }
.imp-run h3 { font-size: 17px; }
.imp-run .ok { color: var(--ok); font-weight: 650; }
.imp-run .red { color: var(--danger); font-weight: 650; }
.imp-log { max-height: 38vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 14px; }
.imp-log div { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; animation: fade .25s; }
.imp-log div:last-child { border-bottom: 0; }
.imp-log b { font-weight: 600; }
.imp-log span { color: var(--ink-3); }
.imp-log .ok svg { color: var(--ok); }
.imp-log .skip svg { color: var(--warn); }
.imp-log .bad { background: #fff7f6; }
.imp-log .bad svg, .imp-log .bad span { color: var(--danger); }
.imp-eta { margin-right: 6px; }

/* ================= Add many tasks ================= */
.modal.bt-modal { max-width: 1080px; }
.bt { display: flex; flex-direction: column; gap: 12px; }
.bt-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ai-btn svg { color: #7c4dcc; }
.bt-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 14px; }
.bt-left { display: flex; flex-direction: column; gap: 8px; }
.bt-text { min-height: 300px; font: 13.5px/1.7 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; resize: vertical; tab-size: 2; background: #fcfcfa; }
.bt-help { display: flex; flex-wrap: wrap; gap: 5px 12px; font-size: 11.5px; color: var(--ink-3); }
.bt-help code, .bt-empty code { font: 600 11px ui-monospace, Menlo, monospace; background: var(--hover); color: var(--ink-2); padding: 1px 5px; border-radius: 5px; }
.bt-right { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface-2); }
.bt-ph { display: flex; align-items: baseline; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface); font-size: 13px; }
.bt-ph span { color: var(--ink-3); font-size: 12.5px; }
.bt-prev { flex: 1; max-height: 360px; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.bt-row { display: flex; gap: 10px; padding: 10px 12px; border-radius: 11px; background: var(--surface); box-shadow: 0 1px 2px rgba(23, 25, 28, .06); animation: fade .2s; }
.bt-row.warn { box-shadow: inset 3px 0 0 var(--warn), 0 1px 2px rgba(23, 25, 28, .06); }
.bt-n { width: 22px; height: 22px; border-radius: 50%; background: var(--hover); font-size: 11px; font-weight: 700; display: grid; place-items: center; color: var(--ink-3); flex: none; }
.bt-main { flex: 1; min-width: 0; }
.bt-main > b { font-size: 13.5px; font-weight: 600; }
.bt-main > b em { color: var(--danger); font-style: normal; }
.bt-meta { display: flex; flex-wrap: wrap; gap: 5px 8px; align-items: center; margin-top: 5px; }
.bt-meta:empty { display: none; }
.bt-who { font-size: 12px; font-weight: 650; color: var(--blue); background: var(--blue-soft); padding: 1px 7px; border-radius: 6px; }
.bt-who.role { color: #7c4dcc; background: #f1ebfb; }
.bt-warn { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 11.5px; color: var(--warn); font-weight: 600; }
.bt-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 50px 20px; color: var(--ink-3); font-size: 13px; }
.bt-empty svg { width: 26px; height: 26px; }
.bt-empty b { color: var(--ink-2); }
.bt-empty code { display: block; margin-top: 8px; }
.bt-opts { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.bt-pick { border: 1px solid var(--line); border-radius: 14px; padding: 10px; margin: 4px 0 8px; background: var(--surface-2); }
.bt-pick-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.bt-pick-bar .tk-search { flex: 0 1 220px; height: 32px; background: var(--surface); }
.bt-pick-bar .chips { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.bt-plist { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px; max-height: 190px; overflow-y: auto; }
.bt-p { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 550; border: 1px solid transparent; min-width: 0; }
.bt-p span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-p .plogo { --s: 22px; font-size: 9px; }
.bt-p:hover { background: var(--surface); }
.bt-p.on { background: var(--surface); border-color: var(--brand); }
.bt-p input { accent-color: var(--brand); }
.bt-bar { display: inline-block; width: 120px; height: 6px; border-radius: 6px; background: var(--hover); overflow: hidden; vertical-align: middle; margin-right: 8px; }
.bt-bar i { display: block; height: 100%; background: var(--brand); transition: width .3s; }
.menu-x { margin-left: auto; opacity: .45; font-size: 16px; padding: 0 4px; border-radius: 5px; }
.menu-x:hover { opacity: 1; background: rgba(0, 0, 0, .08); }
.tk-cta { display: flex; gap: 8px; }
.tk-many { height: 40px; border-radius: 12px; }

@media (max-width: 800px) {
  .bt-grid, .imp-opts { grid-template-columns: 1fr; }
  .bt-text { min-height: 180px; font-size: 16px; }
  .bt-prev { max-height: 260px; }
  .imp-table-wrap { max-height: 38vh; }
  .imp-paste, .side-find input, .qs-in input, #bt-pq { font-size: 16px; }
  .tk-many span { display: none; }
  .tk-many { width: 38px; padding: 0; }
  .ptable th:nth-child(2), .ptable td:nth-child(2), .ptable th:nth-child(3), .ptable td:nth-child(3), .ptable th:nth-child(7), .ptable td:nth-child(7), .ptable th:nth-child(8), .ptable td:nth-child(8) { display: none; }
  .pt-name { min-width: 0; }
  .modal.qs-modal { margin-top: 8vh; }
}

/* ================= Workstreams ================= */
.ws-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px 0 7px; border-radius: 6px; font-size: 11.5px; font-weight: 650; white-space: nowrap;
  color: color-mix(in srgb, var(--wc) 78%, #000); background: color-mix(in srgb, var(--wc) 12%, #fff); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ws-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--wc); flex: none; }
.ws-chip b { opacity: .5; font-weight: 600; margin: 0 1px; }
.ws-chip.sm { height: 20px; font-size: 11px; }
.chan .ws-tab { --wc: #565a62; }
.chan .ws-tab .ws-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--wc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wc) 20%, transparent); flex: none; margin: 0 3px; }
.chan .ws-tab.on { border-color: color-mix(in srgb, var(--wc) 45%, #fff) !important; background: color-mix(in srgb, var(--wc) 8%, #fff) !important; }
.chan .ws-add { opacity: .75; border-style: dashed !important; }
.chan .ws-add:hover { opacity: 1; }
.chat.ws-chan .msgs { background-color: color-mix(in srgb, var(--wc) 4%, var(--bg)); }
.chat.ws-chan .composer { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--wc) 35%, transparent), var(--shadow); }
.modal.ws-modal { max-width: 820px; }
.ws-b { display: flex; flex-direction: column; gap: 10px; }
.ws-pkg { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, #f3effb, #f6f5f1); border: 1px solid #e7def6; }
.ws-pkg > span { display: inline-flex; align-items: center; gap: 7px; color: #7c4dcc; }
.ws-pkg b { color: var(--ink); font-size: 13.5px; }
.ws-pkg select { width: auto; min-width: 180px; }
.ws-card { border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.ws-card.on { border-color: color-mix(in srgb, var(--wc) 40%, var(--line)); box-shadow: inset 4px 0 0 var(--wc); }
.ws-top { display: flex; align-items: center; gap: 12px; }
.ws-top b { font-size: 14.5px; }
.ws-n { margin-left: auto; font-size: 12px; color: var(--ink-2); font-weight: 550; }
.ws-top .tm-sw.on { background: var(--wc); }
.ws-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--line); align-items: start; }
.ws-row > label { font-size: 12.5px; font-weight: 650; color: var(--ink-3); padding-top: 4px; }
.ws-row > label small { display: block; font-weight: 500; }
.ws-row .chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ws-row .tm-person em { font-style: normal; opacity: .6; }
.ws-subs { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-sub { display: inline-flex; align-items: center; border: 1px dashed var(--line-2); border-radius: 9px; overflow: hidden; }
.ws-sub button { border: 0; background: none; padding: 5px 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); cursor: pointer; }
.ws-sub.on { border-style: solid; border-color: color-mix(in srgb, var(--wc) 45%, #fff); background: color-mix(in srgb, var(--wc) 8%, #fff); }
.ws-sub.on button { color: color-mix(in srgb, var(--wc) 80%, #000); }
.ws-sub input { width: 52px; height: 28px; border: 0; border-left: 1px solid color-mix(in srgb, var(--wc) 30%, #fff); background: #fff; font-size: 12.5px; text-align: center; outline: 0; }

/* Services & packages page */
.svc-sec { margin: 26px 0 12px; }
.svc-sec p { max-width: 780px; margin-top: 4px; }
.svc-grid, .svc-pk { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
.svc-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 14px; box-shadow: var(--shadow-sm); border-top: 4px solid var(--wc, var(--line-2)); display: flex; flex-direction: column; gap: 10px; }
.svc-card.pk { border-top-color: #7c4dcc; }
.svc-top { display: flex; align-items: center; gap: 8px; }
.svc-top input[type="color"] { width: 30px; height: 30px; border: 0; padding: 0; background: none; cursor: pointer; flex: none; }
.svc-name { font-weight: 650; font-size: 15px; flex: 1; min-width: 0; }
.svc-subs { display: flex; flex-direction: column; gap: 6px; }
.svc-sub { display: grid; grid-template-columns: minmax(0, 1fr) 130px minmax(0, 1.2fr) 28px; gap: 6px; align-items: center; }
.svc-sub .input { font-size: 13px; }
.svc-add { border: 2px dashed var(--line-2); border-radius: 18px; background: none; min-height: 120px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink-3); font-weight: 600; cursor: pointer; }
.svc-add:hover { border-color: var(--brand); color: var(--brand); }
.pk-st { display: flex; flex-direction: column; gap: 5px; }
.pk-st > b { font-size: 12.5px; }
.pk-st .chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.pk-t { width: 56px; height: 26px; font-size: 12px; padding: 0 6px; }
.pk-tasks { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 650; }
.pk-tasks small { font-weight: 500; color: var(--ink-3); }
.pk-tasks code { font: 600 11px ui-monospace, Menlo, monospace; background: var(--hover); padding: 1px 5px; border-radius: 5px; }
.pk-tasks textarea { font: 12.5px/1.6 ui-monospace, Menlo, monospace; }
@media (max-width: 800px) {
  .svc-grid, .svc-pk { grid-template-columns: minmax(0, 1fr); }
  .svc-sub { grid-template-columns: minmax(0, 1fr) 110px 28px; }
  .svc-sub .svc-dom { grid-column: 1 / -1; }
  .ws-row { grid-template-columns: minmax(0, 1fr); }
}
.chan { overflow-x: auto; scrollbar-width: none; }
.chan::-webkit-scrollbar { display: none; }
.chan button { min-width: 150px; }
.chan .ws-add { flex: 0 0 auto; min-width: 0; }
.imp-auto { display: flex; align-items: flex-start; gap: 9px; padding: 10px 13px; border-radius: 12px; background: #f3effb; color: #5b3aa3; font-size: 12.5px; line-height: 1.6; }
.imp-auto svg { flex: none; margin-top: 3px; }
.imp-auto span { flex: 1; color: var(--ink-2); }
.imp-auto b { color: var(--ink); }
.imp-auto em { font-style: normal; font-weight: 600; font-size: 11.5px; background: #fff; border: 1px solid #e3d9f5; color: #5b3aa3; padding: 0 7px; border-radius: 6px; margin: 1px 2px; display: inline-block; }
.imp-f { display: inline-block; font-size: 11.5px; font-weight: 650; padding: 2px 8px; border-radius: 6px; background: var(--hover); color: var(--ink-3); white-space: nowrap; }
.imp-f.set { background: var(--brand-soft); color: var(--brand); }
.imp-sum .blue { background: var(--blue-soft); color: var(--blue); }
.imp-flag.open { color: var(--blue); background: var(--blue-soft); }
.imp-table td.assign, .imp-table th.assign { min-width: 150px; background: #fbfaf7; }
.imp-table td.assign select { height: 28px; font-size: 12px; min-width: 140px; }
.imp-busy { display: inline-flex; align-items: center; gap: 8px; }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ================= Backlinks ================= */
.tk-views button i.bad { background: var(--danger); }
.lk { display: flex; flex-direction: column; gap: 14px; }
.lk-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.lk-stat { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 13px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
.lk-stat b { font-size: 21px; letter-spacing: -.02em; }
.lk-stat span { font-size: 12px; color: var(--ink-2); font-weight: 550; }
.lk-stat.ok b { color: var(--ok); } .lk-stat.bad b { color: var(--danger); } .lk-stat.warn b { color: var(--warn); } .lk-stat.new b { color: var(--blue); } .lk-stat.muted b { color: var(--ink-3); }
.lk-stat.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.lk-targets { padding: 14px 16px; }
.lk-th { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.lk-bars { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 22px; }
.lk-bar { display: grid; grid-template-columns: 130px minmax(0, 1fr) 56px; gap: 10px; align-items: center; font-size: 12.5px; cursor: pointer; }
.lk-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-weight: 550; }
.lk-bar i { height: 8px; border-radius: 8px; background: var(--hover); overflow: hidden; display: block; }
.lk-bar em { display: block; height: 100%; border-radius: 8px; transition: width .5s; }
.lk-bar b { text-align: right; font-variant-numeric: tabular-nums; }
.lk-bar-f { position: static; margin-top: 0; }
.lk-table-wrap { padding: 0; overflow-x: auto; }
.lk-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lk-table th { text-align: left; font-size: 11.5px; font-weight: 650; color: var(--ink-3); padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; }
.lk-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.lk-table tr:last-child td { border-bottom: 0; }
.lk-table tr.bad { background: #fffafa; }
.lk-table tr.warn { background: #fffdf6; }
.lk-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; white-space: nowrap; }
.lk-st i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.lk-st.ok { color: var(--ok); } .lk-st.ok i { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.lk-st.bad { color: var(--danger); } .lk-st.bad i { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.lk-st.warn { color: var(--warn); } .lk-st.warn i { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.lk-st.new { color: var(--blue); } .lk-st.new i { background: var(--blue); }
.lk-st.muted { color: var(--ink-3); }
.lk-url a { display: flex; flex-direction: column; min-width: 0; max-width: 380px; }
.lk-url b { font-weight: 600; }
.lk-url small { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-url a:hover b { text-decoration: underline; }
.lk-why { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; font-size: 12px; color: var(--ink-2); }
.lk-why > span:first-child { flex-basis: 100%; }
.lk-flag { font-size: 11px; font-weight: 650; padding: 1px 7px; border-radius: 6px; }
.lk-flag.bad { color: var(--danger); background: var(--danger-soft); }
.lk-flag.warn { color: var(--warn); background: var(--warn-soft); }
.lk-kind { display: block; font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.lk-note { display: flex; gap: 6px; align-items: flex-start; }
.lk-alert { border-color: #f3c9c5; background: linear-gradient(180deg, #fff7f6, #fff); padding: 14px 16px; margin-bottom: 18px; }
.lk-alert-h { display: flex; align-items: center; gap: 8px; color: var(--danger); margin-bottom: 8px; }
.lk-alert-h b { color: var(--ink); }
.lk-alert-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 10px; }
.lk-alert-row:hover { background: rgba(0, 0, 0, .03); }
.lk-alert-row > span:not(.plogo) { flex: 1; display: flex; flex-direction: column; }
.lk-alert-row small { color: var(--ink-3); font-size: 12px; }
.lk-alert-row > svg { transform: rotate(180deg); color: var(--ink-3); }
@media (max-width: 800px) {
  .lk-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lk-table th:nth-child(3), .lk-table td:nth-child(3), .lk-table th:nth-child(5), .lk-table td:nth-child(5), .lk-table th:nth-child(6), .lk-table td:nth-child(6) { display: none; }
  .lk-url a { max-width: 190px; }
  .lk-bar { grid-template-columns: 100px minmax(0, 1fr) 50px; }
}

/* ================= Work report ================= */
.rp-page { max-width: 1040px; }
.rp-public { min-height: 100dvh; overflow-y: auto; padding: 32px 16px 60px; background: var(--bg); }
.rp-public .rp-doc { max-width: 1000px; margin: 0 auto; }
.rp-doc { display: flex; flex-direction: column; gap: 18px; }
.rp-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between; padding: 22px 24px; border-radius: 22px; background: linear-gradient(135deg, #16181b, #2a2d33); color: #fff; }
.rp-client { display: flex; align-items: center; gap: 14px; }
.rp-client img { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; background: #fff; }
.rp-head .eyebrow { color: rgba(255, 255, 255, .6); }
.rp-head h1 { font-size: 26px; color: #fff; }
.rp-head a { color: rgba(255, 255, 255, .7) !important; }
.rp-month { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rp-month select { width: auto; min-width: 150px; }
.rp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.rp-kpis > div { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
.rp-kpis b { font-size: 30px; letter-spacing: -.03em; font-weight: 650; }
.rp-kpis b em { font-style: normal; font-size: 18px; color: var(--ink-3); }
.rp-kpis span { font-size: 13px; color: var(--ink-2); font-weight: 550; }
.rp-kpis small { font-size: 11.5px; color: var(--ink-3); }
.rp-sec { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 18px 20px; box-shadow: var(--shadow-sm); border-top: 4px solid var(--wc); display: flex; flex-direction: column; gap: 14px; break-inside: avoid; }
.rp-sec h2 { display: flex; align-items: center; gap: 9px; font-size: 18px; }
.rp-sec h2 i { width: 10px; height: 10px; border-radius: 50%; background: var(--wc); }
.rp-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 26px; }
.rp-type { display: grid; grid-template-columns: minmax(0, 1fr) 110px 60px; gap: 10px; align-items: center; font-size: 13px; }
.rp-type span { color: var(--ink-2); font-weight: 550; }
.rp-type i { height: 8px; border-radius: 8px; background: var(--hover); overflow: hidden; display: block; }
.rp-type em { display: block; height: 100%; background: var(--wc); border-radius: 8px; }
.rp-type b { text-align: right; font-variant-numeric: tabular-nums; grid-column: 3; }
.rp-type > b:nth-child(2) { grid-column: 2 / 4; }
.rp-list h3 { font-size: 13px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.rp-list h3 small { background: var(--hover); color: var(--ink-2); border-radius: 999px; padding: 0 7px; margin-left: 4px; }
.rp-link, .rp-work { display: grid; grid-template-columns: 76px minmax(0, 190px) minmax(0, 1fr) auto 70px; gap: 12px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 13px; }
.rp-work { grid-template-columns: 24px minmax(0, 1fr) auto 70px; }
.rp-link:last-child, .rp-work:last-child { border-bottom: 0; }
.rp-link b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-link small { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-link:hover b { text-decoration: underline; }
.rp-link em, .rp-work em { font-style: normal; font-size: 11.5px; font-weight: 600; color: color-mix(in srgb, var(--wc) 80%, #000); background: color-mix(in srgb, var(--wc) 10%, #fff); padding: 1px 8px; border-radius: 6px; white-space: nowrap; }
.rp-link time, .rp-work time { font-size: 12px; color: var(--ink-3); text-align: right; }
.rp-ok { font-size: 11.5px; font-weight: 700; color: var(--ok); background: var(--ok-soft); padding: 2px 8px; border-radius: 999px; text-align: center; }
.rp-ok.pub { color: var(--blue); background: var(--blue-soft); }
.rp-tick { width: 22px; height: 22px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.rp-work b { font-weight: 550; }
.rp-foot { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--ink-3); font-size: 12.5px; padding: 8px; }
.rp-foot img { height: 22px; }
.share-url { display: flex; gap: 8px; }
.share-url .input { flex: 1; font-size: 13px; }
@media (max-width: 800px) {
  .rp-head { padding: 18px; }
  .rp-head h1 { font-size: 21px; }
  .rp-link { grid-template-columns: 64px minmax(0, 1fr) 56px; }
  .rp-link small, .rp-link em { display: none; }
  .rp-work { grid-template-columns: 24px minmax(0, 1fr) 56px; }
  .rp-work em { display: none; }
  .rp-type { grid-template-columns: minmax(0, 1fr) 80px 54px; }
}
@media print {
  body { overflow: visible !important; background: #fff; }
  .side, .mtop, .phead, .demo-bar, .rp-month, .toasts, .scrim { display: none !important; }
  .app { display: block !important; height: auto !important; }
  .main, .content, .pbody, .project { overflow: visible !important; height: auto !important; display: block !important; }
  .rp-head { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rp-sec, .rp-kpis > div { box-shadow: none; }
  .rp-public { padding: 0; }
}
@media (max-width: 800px) {
  .tk-views { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .tk-views button { flex-direction: column; height: 50px; gap: 3px; font-size: 11px; padding: 0 2px; position: relative; }
  .tk-views button span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .tk-views button i { position: absolute; top: 3px; right: 4px; min-width: 16px; height: 16px; font-size: 10px; }
}

/* ======================================================================
   SEO audits (website + Business Profile)
   ====================================================================== */
.seo-page { max-width: 1180px; }
.sring { position: relative; width: var(--s); height: var(--s); flex: none; }
.sring svg { width: 100%; height: 100%; display: block; }
.sring .sr-bg { fill: none; stroke: var(--ring-bg, rgba(23, 25, 28, .07)); stroke-width: 7; }
.sring .sr-fg { fill: none; stroke-width: 7; stroke-linecap: round; stroke: var(--sc); animation: srIn 1.2s cubic-bezier(.2, .75, .2, 1) both; filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--sc) 35%, transparent)); }
@keyframes srIn { from { stroke-dasharray: 0 var(--c); } }
.sring.good { --sc: #12a36b; } .sring.mid { --sc: #e39a12; } .sring.low { --sc: #e5484d; } .sring.none { --sc: #c9c7c0; }
.sr-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.sr-in b { font-size: calc(var(--s) * .3); font-weight: 650; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.sr-in span { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; font-weight: 550; max-width: 80%; line-height: 1.2; }
.sdelta { position: absolute; top: 2px; right: -6px; font-style: normal; font-size: 11px; font-weight: 650; padding: 2px 7px; border-radius: 99px; background: var(--surface); box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.sdelta.up { color: #0e8a5a; } .sdelta.down { color: var(--danger); } .sdelta.flat { color: var(--ink-3); }
.spill { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-size: 12.5px; padding: 2px 9px; border-radius: 99px; font-variant-numeric: tabular-nums; }
.spill .sdelta { position: static; box-shadow: none; border: 0; padding: 0; background: none; font-size: 10.5px; }
.spill.good { background: #e3f6ec; color: #0b7a4f; } .spill.mid { background: #fdf1d8; color: #9a6200; } .spill.low { background: #fde8e8; color: #c22a2f; } .spill.none { background: var(--hover); color: var(--ink-3); }

.seo-hero { position: relative; display: flex; gap: 28px; align-items: center; justify-content: space-between; padding: 28px 30px; margin-bottom: 18px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--brand) 16%, transparent) 0%, transparent 52%), linear-gradient(135deg, #15171b 0%, #1d2026 60%, #22262d 100%); color: #f4f4f2;
  box-shadow: 0 30px 60px -36px rgba(15, 17, 20, .55), inset 0 1px 0 rgba(255, 255, 255, .06); }
.seo-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 34px 34px, linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 34px 34px; mask: linear-gradient(90deg, transparent, #000 70%); pointer-events: none; }
.seo-hero .eyebrow { color: rgba(255, 255, 255, .55); }
.seo-hero h2 { font-size: 26px; letter-spacing: -.03em; margin: 6px 0 10px; color: #fff; }
.sh-l { position: relative; z-index: 1; min-width: 0; }
.sh-sched { display: flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, .82); font-size: 13.5px; }
.sh-sched b { color: #fff; }
.sh-sched .red { color: #ff9f9a; }
.sh-last { color: rgba(255, 255, 255, .5); font-size: 12.5px; margin-top: 4px; }
.sh-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.sh-chips span { font-size: 11.5px; font-weight: 550; padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .85); }
.sh-sch { margin-top: 14px; color: rgba(255, 255, 255, .8) !important; border: 1px solid rgba(255, 255, 255, .16) !important; }
.sh-sch:hover { background: rgba(255, 255, 255, .08) !important; }
.sh-r { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; }
.sh-ring { display: block; padding: 10px; border-radius: 20px; border: 1px solid transparent; transition: background .2s, border-color .2s; }
.sh-ring:hover { background: rgba(255, 255, 255, .04); }
.sh-ring.on { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
.seo-hero .sring { --ring-bg: rgba(255, 255, 255, .1); }
.seo-hero .sr-in b { color: #fff; }
.seo-hero .sr-in span { color: rgba(255, 255, 255, .6); }
.seo-hero .sdelta { background: #2a2e35; border-color: rgba(255, 255, 255, .1); }
.seo-hero .sdelta.up { color: #4ade9b; } .seo-hero .sdelta.down { color: #ff8a84; }
.sh-trend { display: flex; flex-direction: column; gap: 6px; padding-left: 8px; }
.sh-trend small { color: rgba(255, 255, 255, .5); font-size: 11px; }
.strend { width: 170px; height: 52px; overflow: visible; }
.strend polygon { fill: url(#none); fill: rgba(74, 222, 155, .1); }
.strend polyline { fill: none; stroke: #4ade9b; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.strend circle { fill: #4ade9b; stroke: #15171b; stroke-width: 2; }

.seo-areas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.sa { text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
.sa:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -20px rgba(23, 25, 28, .35); }
.sa.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.sa-n { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.sa b { font-size: 22px; letter-spacing: -.03em; font-weight: 650; font-variant-numeric: tabular-nums; }
.sa b em { font-style: normal; font-size: 13px; color: var(--ink-3); font-weight: 500; margin-left: 2px; }
.sa i { display: block; height: 5px; border-radius: 9px; background: var(--hover); overflow: hidden; }
.sa i em { display: block; height: 100%; border-radius: 9px; background: var(--sc, #c9c7c0); animation: barIn .9s cubic-bezier(.2, .75, .2, 1) both; }
.sa.good { --sc: #12a36b; } .sa.mid { --sc: #e39a12; } .sa.low { --sc: #e5484d; }
.sa small { font-size: 11.5px; color: var(--ink-3); }
@keyframes barIn { from { width: 0 !important; } }
.seo-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 16px; background: var(--hover); border-radius: 12px; width: max-content; max-width: 100%; overflow-x: auto; }
.seo-tabs a { padding: 7px 14px; border-radius: 9px; font-weight: 600; font-size: 13px; color: var(--ink-2); white-space: nowrap; display: inline-flex; gap: 7px; align-items: center; transition: background .15s, color .15s; }
.seo-tabs a span { font-size: 11px; padding: 1px 7px; border-radius: 99px; background: rgba(23, 25, 28, .07); color: var(--ink-2); }
.seo-tabs a.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(23, 25, 28, .12); }
.seo-tabs a:hover:not(.on) { color: var(--ink); }
.notice.warn { background: var(--warn-soft); color: #7a4f05; border-radius: 12px; padding: 10px 14px; display: flex; gap: 8px; align-items: center; margin-bottom: 14px; font-size: 13px; }

.iss-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.iss-bar .seg-mini button em { font-style: normal; opacity: .55; margin-left: 3px; }
.iss-bar .tk-search { margin-left: auto; }
.iss-list { display: flex; flex-direction: column; gap: 8px; }
.iss { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.iss.open { box-shadow: 0 18px 40px -28px rgba(23, 25, 28, .4); border-color: var(--line-2); }
.iss-h { width: 100%; display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: none; border: 0; cursor: pointer; text-align: left; }
.iss-h:hover { background: var(--surface-2); }
.iss-h > svg:last-child { color: var(--ink-3); transition: transform .2s; }
.iss.open .iss-h > svg:last-child { transform: rotate(180deg); }
.iss-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--warn); box-shadow: 0 0 0 4px var(--warn-soft); }
.iss.fail .iss-dot, .sp-iss.fail .iss-dot { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
.iss-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.iss-t b { font-size: 14px; font-weight: 620; }
.iss-t small { color: var(--ink-3); font-size: 12px; }
.iss-sev { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 99px; background: var(--warn-soft); color: #94600a; }
.iss.fail .iss-sev { background: var(--danger-soft); color: #b8282c; }
.iss-ai { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; color: #7c4dff; background: #f1ecff; }
.iss-b { padding: 2px 16px 16px; animation: fadeUp .25s ease both; }
.iss-why { font-size: 13px; color: var(--ink-2); margin: 0 0 12px 21px; }
.iss-why .src { display: inline-block; font-size: 11px; color: var(--ink-3); background: var(--hover); padding: 1px 8px; border-radius: 99px; margin-left: 4px; }
.iss-f { display: flex; justify-content: flex-end; margin-top: 10px; }
.fx { border-top: 1px solid var(--line); padding: 12px 0 4px 21px; }
.fx-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.fx-url { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 13px; color: var(--ink); background: var(--hover); padding: 3px 9px; border-radius: 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-url:hover { background: var(--line); }
.fx-found { font-size: 12.5px; font-weight: 550; color: #94600a; }
.fx-found.fail { color: #b8282c; }
.fx-want { font-size: 12px; color: var(--ink-3); }
.fx-fix { border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); overflow: hidden; }
.fx-fix.ai { border-color: #e3dafd; background: linear-gradient(180deg, #faf8ff, #fff 60%); }
.fx-lbl { display: flex; align-items: center; gap: 6px; padding: 7px 8px 7px 12px; font-size: 11.5px; font-weight: 650; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.fx-fix.ai .fx-lbl { color: #6a3fe0; border-bottom-color: #ece6fe; }
.fx-text { padding: 11px 13px; font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.fx-code { margin: 0; padding: 12px 14px; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-word; max-height: 300px; overflow: auto; background: #fbfaf8; }
.fx-fix.ai .fx-code { background: #fdfcff; }
.fx-note { padding: 0 13px 10px; font-size: 12px; color: var(--ink-3); }
.tchip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: var(--blue-soft); color: var(--blue); white-space: nowrap; }
.tchip.done { background: var(--ok-soft); color: var(--ok); }
.seo-pages tr[data-act] { cursor: pointer; }
.seo-pages tr.open td { background: var(--surface-2); }
.sp-t { display: flex; flex-direction: column; min-width: 0; max-width: 420px; }
.sp-t small { color: var(--ink-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kwchip { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: #eef4ff; color: #2c5bc8; }
.pp { display: inline-block; min-width: 22px; text-align: center; font-size: 11.5px; font-weight: 650; padding: 1px 6px; border-radius: 6px; margin-right: 4px; }
.pp.bad { background: var(--danger-soft); color: #b8282c; } .pp.warn { background: var(--warn-soft); color: #94600a; }
.sp-bar { position: relative; display: flex; align-items: center; gap: 8px; min-width: 110px; }
.sp-bar i { display: block; height: 6px; border-radius: 9px; background: var(--sc, #c9c7c0); flex: none; animation: barIn .9s cubic-bezier(.2, .75, .2, 1) both; max-width: 80px; }
.sp-bar.good { --sc: #12a36b; } .sp-bar.mid { --sc: #e39a12; } .sp-bar.low { --sc: #e5484d; }
.sp-bar b { font-variant-numeric: tabular-nums; font-size: 12.5px; }
.sp-open td { padding: 6px 16px 14px !important; }
.sp-iss { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.sp-iss .muted { flex: 1; font-size: 12.5px; }
.sp-psi { margin-top: 10px; font-size: 12.5px; color: var(--ink-2); }
.kw-table td small { display: block; }
.kwhow { font-size: 11px; font-weight: 650; padding: 2px 8px; border-radius: 99px; background: var(--blue-soft); color: var(--blue); }
.kwhow.set { background: var(--ok-soft); color: var(--ok); } .kwhow.none { background: var(--danger-soft); color: var(--danger); }
.ok-t { color: var(--ok); font-weight: 700; }
.kw-row { display: grid; grid-template-columns: 1fr 1.2fr auto; gap: 8px; margin-bottom: 8px; }
.kw-acts { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.fa { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; padding: 28px; margin-bottom: 16px; }
.fa .big { font-size: 34px; margin-bottom: 8px; }
.fa h3 { font-size: 19px; margin-bottom: 8px; }
.fa-steps { display: flex; flex-direction: column; gap: 10px; }
.fa-step { display: flex; gap: 12px; align-items: flex-start; }
.fa-step > span { width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed var(--line-2); display: grid; place-items: center; flex: none; margin-top: 1px; }
.fa-step.ok > span { background: var(--ok); border: 0; color: #fff; }
.fa-step b { display: block; font-size: 13.5px; }
.fa-step small { color: var(--ink-3); font-size: 12.5px; }
.co-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 24px; }
.co b { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.co b em { font-style: normal; color: var(--ink-3); font-weight: 500; }
.co ul { margin: 0; padding-left: 16px; color: var(--ink-2); font-size: 12.5px; line-height: 1.7; }
.hist { width: 100%; height: 220px; display: block; }
.hist line { stroke: var(--line); stroke-dasharray: 3 4; }
.hist text { fill: var(--ink-3); font-size: 10px; text-anchor: end; }
.hist .hl { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.hist .hl.site, .hist .hd.site { stroke: #12a36b; } .hist .hd.site { fill: #fff; stroke-width: 2.5; }
.hist .hl.gbp, .hist .hd.gbp { stroke: #4f7cff; } .hist .hd.gbp { fill: #fff; stroke-width: 2.5; }
.hist-key { display: flex; gap: 12px; align-items: center; font-size: 12px; color: var(--ink-2); }
.hist-key i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: -6px; }
.hist-key i.site { background: #12a36b; } .hist-key i.gbp { background: #4f7cff; }

/* Business Profile */
.gbp-link { display: flex; gap: 18px; padding: 26px; align-items: flex-start; }
.gl-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, #e8f5ee, #d6efe2); color: #0f9d58; flex: none; }
.gbp-link h3 { font-size: 17px; margin-bottom: 6px; }
.gl-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 8px; }
.gbp-top { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; margin-bottom: 16px; }
.gbp-top .gp-riv { grid-column: 1 / -1; }
.gp { padding: 20px 22px; }
.gp-h { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.gp-h h3 { font-size: 18px; margin: 4px 0 6px; }
.gp-rate { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.gp-rate b { font-size: 20px; color: var(--ink); letter-spacing: -.02em; }
.stars { position: relative; display: inline-block; color: #e3e1da; letter-spacing: 1px; font-size: 14px; line-height: 1; }
.stars::before { content: '★★★★★'; position: absolute; inset: 0; width: var(--v); overflow: hidden; color: #f5a623; white-space: nowrap; }
.gp-dl { margin: 14px 0 10px; }
.gp-dl small { color: var(--ink-3); }
.gp-perf { padding: 18px 20px; }
.gpp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 6px; }
.gpp > div { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 10px 9px; display: flex; flex-direction: column; gap: 2px; }
.gpp span { color: var(--ink-3); }
.gpp b { font-size: 19px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gpp small { font-size: 11.5px; color: var(--ink-2); }
.gp-search { margin-top: 14px; }
.gp-search > small { color: var(--ink-3); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.gp-search > div { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.gp-riv { padding: 18px 20px; }
.gp-riv td small { display: block; color: var(--ink-3); font-size: 11.5px; }
.gp-riv tr.me td { background: #f2fbf6; }
.rv { margin-bottom: 16px; }
.rv h3 .count { margin-left: 6px; }
.rv-i { border-top: 1px solid var(--line); padding: 14px 0; transition: opacity .3s; }
.rv-i.replied { opacity: .45; }
.rv-h { display: flex; gap: 10px; align-items: center; }
.rv-h b { display: block; font-size: 13.5px; }
.rv-h span { font-size: 12px; color: var(--ink-3); }
.rv-t { margin: 8px 0 10px 40px; font-size: 13.5px; color: var(--ink-2); }
.rv-d { margin-left: 40px; width: calc(100% - 40px); background: #faf8ff; border-color: #e3dafd; }
.rv-a { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.gp-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; max-height: 420px; overflow: auto; }
.gp-opt { text-align: left; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.gp-opt:hover:not([disabled]) { border-color: var(--ink); }
.gp-opt[disabled] { opacity: .55; cursor: default; }
.gp-opt.best { border-color: var(--ok); background: #f2fbf6; }
.gp-opt b em { font-style: normal; font-size: 11px; color: var(--ok); background: var(--ok-soft); padding: 1px 7px; border-radius: 99px; margin-left: 6px; }
.gp-opt small { color: var(--ink-3); font-size: 12px; }

/* SEO health (dashboard) */
#seo-health:empty { display: none; }
.seo-health { margin-bottom: 18px; }
.shp { display: grid; grid-template-columns: auto 1fr 1.1fr; gap: 26px; align-items: center; }
.shp-bands { display: flex; flex-direction: column; gap: 9px; }
.shb { position: relative; display: flex; justify-content: space-between; font-size: 12.5px; padding: 7px 10px; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.shb i { position: absolute; left: 0; top: 0; bottom: 0; opacity: .14; animation: barIn 1s cubic-bezier(.2, .75, .2, 1) both; }
.shb.good i { background: #12a36b; } .shb.mid i { background: #e39a12; } .shb.low i { background: #e5484d; }
.shb span, .shb b { position: relative; }
.shp-flags { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.shp-flags span { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 550; }
.shp-flags .warn { color: #94600a; } .shp-flags .bad { color: var(--danger); }
.shp-list { display: flex; flex-direction: column; gap: 2px; }
.shp-list > small { color: var(--ink-3); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.shl { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; font-size: 13px; font-weight: 550; }
.shl:hover { background: var(--hover); }
.shl > span:not(.plogo):not(.spill):not(.shl-g) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shl-g { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--ink-3); }

/* Owner settings */
.seo-set .ss-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.ss-days { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-h { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin: 4px 0 8px; }
.ss-spend { margin: 4px 0 14px; }
.ss-spend small { color: var(--ink-2); font-size: 12.5px; }
.usage-bar { height: 7px; border-radius: 9px; background: var(--hover); overflow: hidden; margin-bottom: 6px; }
.usage-bar i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, #7c4dff, #b06bff); animation: barIn 1s ease both; }
.ss-gbp { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; font-size: 13px; margin-bottom: 10px; }
.ss-gbp.ok { background: var(--ok-soft); color: #0b6b47; } .ss-gbp.bad { background: var(--warn-soft); color: #7a4f05; }
.ss-guide { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--surface-2); }
.ss-guide summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.ss-guide ol { margin: 10px 0 2px; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.ss-guide li { margin-bottom: 6px; }
.modal.wide { width: min(860px, calc(100vw - 32px)); }
.sr { max-height: 64vh; overflow: auto; }
.sr-h { font-size: 15px; margin: 6px 0 10px; }
.sr-area { border: 1px solid var(--line); border-radius: 14px; padding: 6px 14px 8px; margin-bottom: 12px; }
.sr-ah { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.sr-ah label { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-3); }
.sr-ah input { width: 64px; }
.sr-c { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-bottom: 1px dashed var(--line); cursor: pointer; }
.sr-c:last-child { border-bottom: 0; }
.sr-c span { flex: 1; }
.sr-c b { display: block; font-size: 13px; font-weight: 600; }
.sr-c b em { font-style: normal; font-size: 10px; color: #6a3fe0; background: #f1ecff; padding: 1px 6px; border-radius: 99px; margin-left: 4px; }
.sr-c small { color: var(--ink-3); font-size: 12px; }
.sr-c i { font-style: normal; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.switch.sm { transform: scale(.85); transform-origin: left center; }
.sc-table td small { display: block; color: var(--ink-3); font-size: 11.5px; }

/* Task drawer: where a task came from */
.td-src { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 12px; }
.td-src a { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--hover); padding: 4px 10px; border-radius: 99px; }
.td-src a:hover { color: var(--ink); background: var(--line); }

/* ======================================================================
   Meeting notes
   ====================================================================== */
.mt-page { max-width: 1240px; }
.mt-wrap { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.mt-list { position: sticky; top: 0; display: flex; flex-direction: column; gap: 6px; }
.mt-lh { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 8px; }
.mt-lh h2 { font-size: 18px; }
.mt-card { display: flex; gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid transparent; transition: background .15s, border-color .15s, box-shadow .15s; }
.mt-card:hover { background: var(--surface); border-color: var(--line); }
.mt-card.on { background: var(--surface); border-color: var(--line-2); box-shadow: var(--shadow); }
.mt-date { width: 44px; height: 48px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; box-shadow: var(--shadow-sm); }
.mt-card.on .mt-date { background: var(--ink); border-color: var(--ink); color: #fff; }
.mt-date b { font-size: 17px; line-height: 1; letter-spacing: -.02em; }
.mt-date span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 600; }
.mt-card.on .mt-date span { color: rgba(255, 255, 255, .6); }
.mt-ci { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mt-ci > b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-ci > small { display: flex; align-items: center; gap: 6px; }
.mt-shared { display: inline-flex; gap: 3px; align-items: center; font-size: 10.5px; font-weight: 600; color: var(--blue); background: var(--blue-soft); padding: 1px 6px; border-radius: 99px; }
.mt-prog { display: block; height: 4px; border-radius: 9px; background: var(--hover); overflow: hidden; margin-top: 2px; }
.mt-prog i { display: block; height: 100%; background: var(--ok); border-radius: 9px; }
.warn-t { color: #94600a; font-weight: 600; font-size: 11.5px; }
.mt-head { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px; margin-bottom: 14px; }
.mt-back { display: none; }
.mt-hi { flex: 1; min-width: 0; }
.mt-hi h2 { font-size: 22px; margin: 4px 0 10px; letter-spacing: -.025em; }
.mt-att { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mt-src { font-size: 11px; font-weight: 600; color: var(--ink-3); background: var(--hover); padding: 2px 8px; border-radius: 99px; }
.mt-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.mt-share { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.mt-carry { padding: 16px 18px; margin-bottom: 14px; background: linear-gradient(180deg, #fffbf1, #fff); border-color: #f3e5c3; }
.mt-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.mt-notes { padding: 18px 20px; }
.mt-text { white-space: pre-wrap; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
.mt-text.clip { max-height: 320px; overflow: hidden; mask: linear-gradient(#000 75%, transparent); }
.mt-ta { width: 100%; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.mt-ea { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.mt-sum { padding: 18px 20px; background: linear-gradient(180deg, #faf8ff, #fff 70%); border-color: #ebe4fd; }
.mt-sum h3 { display: flex; align-items: center; gap: 7px; color: #5b34d6; font-size: 14px; margin-bottom: 10px; }
.mt-sum h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin: 14px 0 6px; }
.mt-st { font-size: 13.5px; line-height: 1.65; }
.mt-dec { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.6; }
.mt-dec li::marker { color: #7c4dff; }
.mt-items { padding: 18px 20px 14px; }
.mt-items .panel-h h3 { display: flex; align-items: center; gap: 7px; }
.mi { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); animation: fadeUp .3s ease both; }
.mi.skip { opacity: .45; }
.mi-on { margin-top: 9px; width: 16px; height: 16px; accent-color: var(--ink); flex: none; }
.mi-b { flex: 1; min-width: 0; }
.mi-title { width: 100%; border: 1px solid transparent; background: transparent; font-weight: 600; font-size: 14px; padding: 5px 8px; margin-left: -8px; border-radius: 8px; }
.mi-title:hover { border-color: var(--line); }
.mi-title:focus { outline: none; border-color: var(--ink); background: var(--surface); }
.mi-q { display: block; color: var(--ink-3); font-size: 12px; font-style: italic; margin: 1px 0 8px; }
.mi-f { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mi-who { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-right: 4px; }
.mi-p { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 2px 4px 2px 3px; border-radius: 99px; background: var(--hover); }
.mi-p button { border: 0; background: none; cursor: pointer; color: var(--ink-3); padding: 0 4px; font-size: 14px; line-height: 1; }
.input.xs { height: 28px; padding: 0 8px; font-size: 12px; border-radius: 8px; }
.mi-add { width: auto; max-width: 140px; }
.mi.made { align-items: center; }
.mi-st { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); flex: none; }
.mi.made.done .mi-st { background: var(--ok-soft); color: var(--ok); }
.mi.made b { font-size: 13.5px; }
.mi.made.done b { text-decoration: line-through; color: var(--ink-3); }
.mi.made small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.mt-go { display: flex; gap: 14px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 2px; }
.mt-empty { padding: 60px 30px; }
.mn-lh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.mn-lh label:first-child { font-weight: 600; font-size: 13px; }
.spinner.xs { width: 13px; height: 13px; border-width: 2px; display: inline-block; vertical-align: -2px; margin-right: 6px; }

/* Skeletons while things load */
.skel-hero, .skel-row i, .skel-list i { display: block; border-radius: 18px; background: linear-gradient(90deg, #eceae4 0%, #f6f5f1 40%, #eceae4 80%) 0 0 / 200% 100%; animation: shimmer 1.3s linear infinite; }
.skel-hero { height: 190px; margin-bottom: 18px; border-radius: 22px; }
.skel-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 18px; }
.skel-row i { height: 96px; border-radius: 16px; }
.skel-list { display: flex; flex-direction: column; gap: 8px; }
.skel-list i { height: 62px; border-radius: 16px; }
@keyframes shimmer { to { background-position: -200% 0; } }

@media (max-width: 1100px) {
  .seo-areas { grid-template-columns: repeat(3, 1fr); }
  .shp { grid-template-columns: auto 1fr; }
  .shp-list { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .seo-hero { flex-direction: column; align-items: stretch; padding: 22px 20px; }
  .sh-r { justify-content: center; flex-wrap: wrap; }
  .sh-trend { display: none; }
  .gbp-top, .fa, .seo-set .ss-grid, .mt-grid { grid-template-columns: 1fr; }
  .co-grid { grid-template-columns: 1fr 1fr; }
  .mt-wrap { grid-template-columns: 1fr; }
  .mt-wrap.has-sel .mt-list { display: none; }
  .mt-wrap:not(.has-sel) .mt-main { display: none; }
  .mt-back { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--hover); flex: none; }
  .mt-head { flex-wrap: wrap; }
  .mt-acts { width: 100%; justify-content: flex-start; }
}
@media (max-width: 640px) {
  .seo-areas { grid-template-columns: repeat(2, 1fr); }
  .sh-ring .sring { --s: 108px !important; }
  .gpp { grid-template-columns: repeat(2, 1fr); }
  .co-grid { grid-template-columns: 1fr; }
  .kw-row { grid-template-columns: 1fr auto; }
  .kw-row input:nth-child(2) { grid-column: 1; }
  .iss-sev { display: none; }
  .iss-bar .tk-search { margin-left: 0; width: 100%; }
  .shp { grid-template-columns: 1fr; justify-items: start; }
  .mt-go { flex-direction: column; align-items: stretch; }
  .fx { padding-left: 0; }
  .iss-why { margin-left: 0; }
  .rv-t, .rv-d { margin-left: 0; width: 100%; }
  .seo-pages th:nth-child(2), .seo-pages td:nth-child(2), .seo-pages th:nth-child(3), .seo-pages td:nth-child(3) { display: none; }
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } }

/* ======================================================================
   Premium layer: an ink sidebar, deeper surfaces, calmer motion
   ====================================================================== */
:root {
  --ease: cubic-bezier(.2, .75, .2, 1);
  --shadow: 0 1px 1px rgba(23, 25, 28, .03), 0 2px 4px -2px rgba(23, 25, 28, .05), 0 14px 32px -22px rgba(23, 25, 28, .22);
  --shadow-lg: 0 30px 70px -20px rgba(15, 17, 20, .32), 0 2px 8px rgba(15, 17, 20, .06);
  --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
body { font-feature-settings: 'ss01', 'cv11'; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }
.input:focus, select.input:focus, textarea.input:focus { border-color: color-mix(in srgb, var(--brand) 60%, var(--line-2)); box-shadow: var(--ring); }

/* Sidebar: ink, with the brand glowing faintly at the top */
.side {
  --ink: #f3f3f0; --ink-2: #b4b8c0; --ink-3: #7b808a; --line: rgba(255, 255, 255, .07); --line-2: rgba(255, 255, 255, .12); --hover: rgba(255, 255, 255, .06); --surface: rgba(255, 255, 255, .07);
  background: radial-gradient(140% 50% at 0% 0%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 60%), linear-gradient(180deg, #121419 0%, #0d0f12 100%) !important;
  border-right: 1px solid rgba(255, 255, 255, .04); color: var(--ink);
}
.side .brand, .side .brand-t b { color: #fff; }
.side .nav-item { color: #a9adb6; }
.side .nav-item svg { color: #8a8f99; transition: color .15s; }
.side .nav-item:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.side .nav-item:hover svg { color: #d6d8dd; }
.side .nav-item.on { background: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .05)); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 8px 18px -12px rgba(0, 0, 0, .8); }
.side .nav-item.on svg { color: color-mix(in srgb, var(--brand) 55%, #fff); }
.side .nav-item.on::before { background: color-mix(in srgb, var(--brand) 60%, #fff); box-shadow: 0 0 12px color-mix(in srgb, var(--brand) 80%, transparent); }
.side .nav-sec { color: #626772; }
.side .nav-sec button:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.side .count { color: #7b808a; }
.side .count.hot { background: color-mix(in srgb, var(--brand) 85%, #fff); color: #fff; box-shadow: 0 0 0 2px #121419; }
.side .count.red { background: var(--danger); color: #fff; box-shadow: 0 0 0 2px #121419; }
html[data-style="glass"] .side .count.red { box-shadow: none; }
.side .side-find { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .08); color: #c9ccd2; }
.side .side-find input { color: #fff; }
.side .side-find input::placeholder { color: #6e737d; }
.side .side-find kbd { background: rgba(255, 255, 255, .08); color: #9da1aa; border-color: rgba(255, 255, 255, .1); }
.side .side-foot { border-top-color: rgba(255, 255, 255, .06); }
.side .me-card:hover { background: rgba(255, 255, 255, .06); }
.side .me-card .who b .mention.me { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: #fff; }
.side .side-install { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .08); color: #c9ccd2; }
.side .side-install:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.side .side-tog:hover { background: rgba(255, 255, 255, .08); }
.side .pin-star { color: #6e737d; }
.side .pin-star.on { color: #f5c04a; }
.side .side-grp { color: #626772; }
.side .side-all { border-color: rgba(255, 255, 255, .08); color: #a9adb6; }
.side .avatar { box-shadow: 0 0 0 2px #15171c; }
.side ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); background-clip: padding-box; }
.app.side-mini .side::after { background: rgba(255, 255, 255, .2); }
.app.side-mini.side-peek .side { box-shadow: 30px 0 70px -24px rgba(0, 0, 0, .55); }
.app.side-mini:not(.side-peek) .nav-sec::before { background: rgba(255, 255, 255, .1); }

/* Surfaces */
.content { background: radial-gradient(1100px 420px at 75% -160px, color-mix(in srgb, var(--brand) 9%, transparent), transparent 70%), radial-gradient(800px 300px at 0% 0%, rgba(124, 77, 255, .035), transparent 70%), var(--bg); }
.card { box-shadow: var(--shadow); }
a.card:hover, .folder-card:hover, .tile:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(23, 25, 28, .04), 0 22px 40px -26px rgba(23, 25, 28, .35); }
.page { animation: pageIn .45s var(--ease) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } }
.panel-h h3 { display: flex; align-items: center; gap: 7px; }
.eyebrow { letter-spacing: .1em; }

/* Buttons */
.btn { transition: background .15s, border-color .15s, box-shadow .2s, transform .08s; }
.btn.dark { background: linear-gradient(180deg, #2a2d34, #15171b); border-color: #15171b; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(15, 17, 20, .3), 0 6px 14px -8px rgba(15, 17, 20, .5); }
.btn.dark:hover { background: linear-gradient(180deg, #33363e, #1c1e23); }
.btn.green { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 88%, #fff), var(--brand)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 6px 14px -8px color-mix(in srgb, var(--brand) 80%, transparent); }
.btn:not(.ghost):not(.dark):not(.green):hover { border-color: color-mix(in srgb, var(--ink) 18%, var(--line-2)); }

/* Project header tabs: a soft glowing underline */
.phead.dark .tabs a { position: relative; border-bottom-color: transparent !important; transition: color .15s; }
.phead.dark .tabs a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: #fff; transform: scaleX(0); transition: transform .3s var(--ease); }
.phead.dark .tabs a.on::after { transform: scaleX(1); box-shadow: 0 0 14px rgba(255, 255, 255, .6); }

/* Tables */
.ptable thead th, .mini-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 650; }
.ptable tbody tr, .mini-table tbody tr { transition: background .12s; }

/* Modal and toast */
.modal-bg { background: rgba(13, 15, 18, .42); backdrop-filter: blur(6px) saturate(120%); }
.modal { border: 1px solid rgba(255, 255, 255, .6); animation: modalIn .28s var(--ease) both; }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.toast { background: rgba(21, 23, 27, .92); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; padding: 11px 18px; }

/* Dashboard tiles: richer icon chips */
.tile-ic { border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 10px -6px rgba(23, 25, 28, .35); }
.tile-n { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.ss-kl { display: block; font-size: 13px; margin: 4px 0 6px; }
.seo-set .field { margin-top: 14px; }
.seo-set .switch-row { margin-top: 6px; }
.seo-set .key-row { margin-bottom: 14px; }
.sh-sched { display: block; }
.sh-sched svg { vertical-align: -2px; margin-right: 6px; }

/* ---------- Help centre and guide ---------- */
.hp-page { max-width: 1180px; }
.hp-wrap { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; }
.hp-nav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100dvh - 40px); overflow: auto; padding-bottom: 12px; }
.hp-search { width: 100%; flex: none; height: 40px; }
.hp-sec { display: flex; flex-direction: column; gap: 1px; }
.hp-sec small { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 0 10px 4px; }
.hp-sec a { padding: 6px 10px; border-radius: 9px; color: var(--ink-2); font-size: 13.5px; text-decoration: none; }
.hp-sec a:hover { background: var(--surface-2); color: var(--ink); }
.hp-sec a.on { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.hp-main { min-width: 0; }
.hp-hero { padding: 28px 30px; margin-bottom: 8px; background: linear-gradient(135deg, var(--brand-soft), var(--surface) 70%); }
.hp-hero h1 { font-size: 28px; margin: 4px 0 6px; letter-spacing: -.02em; }
.hp-hero p { color: var(--ink-2); max-width: 620px; }
.hp-hero-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.hp-h { margin: 22px 0 10px; font-size: 15px; }
.hp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.hp-card { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; text-decoration: none; color: var(--ink); transition: transform .15s ease, box-shadow .15s ease; position: relative; }
.hp-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.hp-card span { color: var(--ink-2); font-size: 13px; line-height: 1.45; }
.hp-card em { position: absolute; top: 12px; right: 12px; font-style: normal; font-size: 10.5px; font-weight: 650; padding: 2px 7px; border-radius: 99px; background: var(--brand-soft); color: var(--brand); }
.hp-card b { padding-right: 56px; }
.hp-art { padding: 30px 34px; }
.hp-art h1 { font-size: 26px; letter-spacing: -.02em; margin: 4px 0 4px; }
.hp-sum { color: var(--ink-2); font-size: 15px; margin-bottom: 18px; }
.hp-body { font-size: 14.5px; line-height: 1.65; color: var(--ink); }
.hp-body p { margin: 0 0 12px; }
.hp-body ul, .hp-body ol { margin: 0 0 14px; padding-left: 20px; }
.hp-body li { margin: 5px 0; }
.hp-body code, .hp-body kbd { font: 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 5px; }
.hp-steps { counter-reset: hs; list-style: none; padding-left: 0 !important; }
.hp-steps li { counter-increment: hs; position: relative; padding-left: 36px; margin: 10px 0 !important; }
.hp-steps li::before { content: counter(hs); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: 12.5px; display: grid; place-items: center; }
.hp-tip { display: flex; gap: 10px; align-items: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; margin: 14px 0; font-size: 13.5px; color: var(--ink-2); }
.hp-tip .i { color: var(--brand); flex: none; margin-top: 3px; }
.hp-code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; margin: 0 0 14px; }
.hp-faq dt { font-weight: 650; margin-top: 14px; }
.hp-faq dd { margin: 3px 0 0; color: var(--ink-2); }
.hp-foot { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); }
.hp-public { min-height: 100dvh; background: var(--bg); }
.hp-top { display: flex; align-items: center; gap: 12px; padding: 14px 24px; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 5; }
.hp-public .hp-page { margin: 0 auto; padding: 24px; }
@media (max-width: 860px) {
  .hp-key { grid-template-columns: 1fr; }
  .hp-wrap { grid-template-columns: 1fr; }
  .hp-nav { position: static; max-height: none; }
  .hp-nav .hp-sec { display: none; }
  .hp-art { padding: 22px 18px; }
  .hp-hero { padding: 22px 18px; }
  .hp-public .hp-page { padding: 16px; }
  .hp-foot .btn.ghost { display: none; }
}

.hp-fig { margin: 20px 0 22px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface-2); }
.hp-fig a { display: block; line-height: 0; }
.hp-fig img { width: 100%; height: auto; display: block; border-bottom: 1px solid var(--line); cursor: zoom-in; }
.hp-fig figcaption { padding: 12px 16px 14px; font-size: 13.5px; }
.hp-fig figcaption > b { display: block; margin-bottom: 6px; }
.hp-key { list-style: none; counter-reset: hk; padding: 0 !important; margin: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 18px; }
.hp-key li { counter-increment: hk; position: relative; padding-left: 28px; margin: 0 !important; color: var(--ink-2); line-height: 1.45; }
.hp-key li::before { content: counter(hk); position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: #ff5a1f; color: #fff; font-weight: 700; font-size: 11.5px; display: grid; place-items: center; }
.hp-card.has-img { padding-top: 0; overflow: hidden; }
.hp-thumb { display: block; height: 116px; margin: 0 -18px 10px; background-size: cover; background-position: top left; border-bottom: 1px solid var(--line); }
.hp-card.has-img em { top: 10px; right: 10px; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); background: var(--surface); }
.hp-card.has-img b { padding-right: 0; }

/* ---------- First-run tour ---------- */
.tour { position: fixed; inset: 0; z-index: 400; }
.tour-hole { position: fixed; border-radius: 12px; box-shadow: 0 0 0 4px var(--brand), 0 0 0 9999px rgba(10, 12, 16, .55); transition: all .28s cubic-bezier(.3, .7, .2, 1); pointer-events: none; }
.tour-dim { position: fixed; inset: 0; background: rgba(10, 12, 16, .55); }
.tour-card { position: fixed; width: min(340px, calc(100vw - 24px)); background: var(--surface); color: var(--ink); border-radius: 16px; padding: 18px 18px 14px; box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); animation: tourIn .25s ease; }
.tour-card.center { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(400px, calc(100vw - 24px)); padding: 26px 24px 16px; }
.tour-card h3 { margin: 4px 0 6px; font-size: 17px; letter-spacing: -.01em; }
.tour-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.tour-card code, .tour-card kbd { font: 12px ui-monospace, Menlo, monospace; background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 0 4px; }
.tour-n { font-size: 11.5px; font-weight: 650; color: var(--brand); letter-spacing: .04em; text-transform: uppercase; }
.tour-dots { display: flex; gap: 4px; flex-wrap: wrap; margin: 14px 0 12px; }
.tour-dots i { width: 6px; height: 6px; border-radius: 99px; background: var(--line-2); transition: width .2s; }
.tour-dots i.done { background: color-mix(in srgb, var(--brand) 45%, transparent); }
.tour-dots i.on { width: 18px; background: var(--brand); }
.tour-acts { display: flex; gap: 6px; align-items: center; }
@keyframes tourIn { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
html[data-motion="reduce"] .tour-hole, html[data-motion="reduce"] .tour-card { transition: none; animation: none; }

/* ---------- Website watch ---------- */
.site-chip { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 2px 9px 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 650; border: 0; cursor: default; }
.site-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.site-chip.up { color: #57d39b; background: rgba(87, 211, 155, .14); }
.site-chip.down { color: #fff; background: #e5484d; cursor: pointer; box-shadow: 0 0 0 0 rgba(229, 72, 77, .6); animation: sdPulse 1.8s infinite; }
@keyframes sdPulse { 70% { box-shadow: 0 0 0 7px rgba(229, 72, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); } }
.site-down { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 20px; background: #fdecea; border-bottom: 1px solid #f6c9c4; color: #7a1f17; font-size: 13.5px; }
.site-down .sd-dot { width: 10px; height: 10px; border-radius: 50%; background: #e5484d; flex: none; box-shadow: 0 0 0 4px rgba(229, 72, 77, .18); animation: sdPulse 1.8s infinite; }
.site-down .sd-t { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
.site-down .sd-t span { color: #9b3a31; font-size: 12.5px; }
.site-dot { width: 8px; height: 8px; border-radius: 50%; background: #e5484d; flex: none; margin-left: auto; box-shadow: 0 0 0 3px rgba(229, 72, 77, .2); }
.site-dot + .count { margin-left: 6px; }
/* ---------- Google post check (in a task's thread) ---------- */
.rrow.pcheck { border-radius: 12px; padding: 10px 12px; margin: 6px 0; gap: 10px; }
.rrow.pcheck.ok { background: #e9f7ef; }
.rrow.pcheck.bad { background: #fdecea; }
.rrow.pcheck.warn { background: #fff4e0; }
.pc-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #fff; }
.pcheck.ok .pc-ic { color: #1a7f4b; } .pcheck.bad .pc-ic { color: #c9362e; } .pcheck.warn .pc-ic { color: #a35a00; }
.pc-list { margin: 6px 0 4px; padding-left: 18px; font-size: 13px; }
.pc-list.bad { color: #9b231a; font-weight: 550; }
.pc-post { margin: 6px 0; padding: 8px 12px; border-left: 3px solid rgba(0, 0, 0, .12); background: rgba(255, 255, 255, .6); border-radius: 0 8px 8px 0; font-size: 13px; }
.pc-post small { display: block; margin-top: 4px; color: var(--ink-3); }
/* ---------- Who sees Backlinks ---------- */
.la-opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; cursor: pointer; }
.la-opt:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.la-opt input { margin-top: 3px; accent-color: var(--brand); }
.la-opt span { display: flex; flex-direction: column; }
.la-opt small { color: var(--ink-2); font-size: 12.5px; }
.la-people { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 6px 30px; }
.la-people .chip { cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }

.ig-server { margin-bottom: 16px; }
.ig-server .ig-sub { margin: 18px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }

/* ---------- Autopilot (autopilot.js) ---------- */
.ap-page { max-width: 1180px; }
.ap-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 24px 26px; margin-bottom: 16px; border-radius: 22px; background: linear-gradient(135deg, #10241d 0%, #173a2e 55%, #1d4a3a 100%); color: #eef5f1; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.ap-hero::after { content: ''; position: absolute; right: -80px; top: -120px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(121, 230, 178, .22), transparent 70%); pointer-events: none; }
.ap-hero .eyebrow { color: #9fd9bf; display: flex; align-items: center; gap: 6px; }
.ap-hero h2 { font-size: 24px; color: #fff; }
.ap-hero p { margin-top: 6px; color: #c4dcd1; max-width: 520px; font-size: 13.5px; }
.ap-hero p b { color: #fff; }
.ap-hero .red { color: #ffb4ab; }
.ap-onoff { display: inline-flex; gap: 10px; margin-top: 12px; padding: 6px 10px 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #fff; }
.ap-kpis { display: grid; grid-template-columns: repeat(5, minmax(108px, 1fr)); gap: 8px; position: relative; z-index: 1; }
.ap-kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .08); transition: background .15s, transform .15s; }
.ap-kpi:hover { background: rgba(255, 255, 255, .12); transform: translateY(-1px); }
.ap-kpi small { font-size: 11.5px; color: #a9cbbd; font-weight: 600; }
.ap-kpi b { font-size: 24px; font-weight: 650; letter-spacing: -.03em; color: #fff; }
.ap-kpi span { font-size: 11.5px; color: #c4dcd1; }
.ap-kpi .ap-d.up { color: #8ef0c1; } .ap-kpi .ap-d.down { color: #ffb4ab; }
.ap-tabs { margin-bottom: 18px; }
.ap-grid2 { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.ap-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ap-page .panel, .ap-wait .panel { padding: 18px 20px; }
.ap-page .card.panel + .card.panel { margin-top: 0; }
.ap-main > .card.panel { margin-bottom: 16px; }
.ap-steps { display: flex; flex-direction: column; gap: 2px; }
.ap-step, .ap-srow { display: flex; gap: 12px; align-items: flex-start; padding: 9px 8px; border-radius: 10px; }
.ap-step:hover { background: var(--hover); }
.ap-step b, .ap-srow b { display: block; font-size: 13.5px; font-weight: 600; }
.ap-step small, .ap-srow small { display: block; color: var(--ink-3); font-size: 12px; word-break: break-word; }
.ap-srow > div { flex: 1; min-width: 0; }
.ap-srow + .ap-srow { border-top: 1px solid var(--line); border-radius: 0; }
.ap-dot { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; margin-top: 1px; color: #fff; }
.ok > .ap-dot { background: var(--brand); border-color: var(--brand); }
.ap-dot .i { width: 12px; height: 12px; stroke-width: 3; }
.ap-free { display: flex; flex-direction: column; gap: 4px; }
.ap-fr { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ap-fr:last-child { border-bottom: 0; }
.ap-fr b { font-size: 13.5px; font-weight: 600; display: block; }
.ap-fr small { font-size: 12px; color: var(--ink-3); display: block; }
.ap-fr .seg-mini button { padding: 0 9px; }
.ap-ki { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: none; }
.ap-ki.sm { width: 26px; height: 26px; border-radius: 8px; }
.ap-note { margin-top: 10px; }
.ap-cad { display: flex; flex-direction: column; gap: 6px; }
.ap-cadr { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13.5px; padding: 4px 0; }
.ap-cadr .input { width: 74px; text-align: center; }
.ap-sched { display: flex; flex-direction: column; }
.ap-sched > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.ap-sched > div:last-child { border-bottom: 0; }
.ap-sched small { color: var(--ink-3); text-align: right; }
.ap-qh { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.ap-qh h3 { font-size: 17px; }
.ap-item { padding: 16px 18px; margin-bottom: 10px; transition: box-shadow .15s, transform .15s; }
.ap-item:hover { box-shadow: var(--shadow-lg); }
.ap-item.failed { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.ap-it { display: flex; align-items: center; gap: 12px; }
.ap-tt { flex: 1; min-width: 0; }
.ap-tt b { display: block; font-size: 14.5px; font-weight: 620; }
.ap-tt small { color: var(--ink-3); font-size: 12px; }
.ap-sel input { width: 16px; height: 16px; accent-color: var(--brand); }
.ap-score { flex: none; min-width: 34px; height: 26px; padding: 0 8px; border-radius: 8px; display: inline-grid; place-items: center; font-weight: 700; font-size: 12.5px; background: var(--hover); color: var(--ink-2); }
.ap-score.hi { background: var(--danger-soft); color: var(--danger); }
.ap-score.mid { background: var(--warn-soft); color: var(--warn); }
.ap-score.lo { background: var(--blue-soft); color: var(--blue); }
.ap-why { color: var(--ink-2); font-size: 13px; margin: 8px 0 0 70px; }
.ap-b { margin: 12px 0 0 70px; display: flex; flex-direction: column; gap: 8px; }
.ap-f { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.ap-item .notice { margin: 10px 0 0 70px; }
.ap-serp { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.ap-serp small { color: var(--ok); font-size: 12px; }
.ap-serp input { font-size: 15px; color: #1a0dab; font-weight: 500; }
.ap-len { font-size: 11px; font-style: normal; color: var(--ink-3); align-self: flex-end; margin-top: -4px; }
.ap-len.over { color: var(--danger); }
.ap-alts { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.ap-alts div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 10px; }
.ap-alts code, .ap-redir code { font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-redir { display: flex; align-items: center; gap: 8px; }
.ap-redir .input { flex: 1; }
.ap-det summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 4px 0; }
.ap-det pre, .ld-how pre { max-height: 260px; overflow: auto; font-size: 11.5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; white-space: pre-wrap; word-break: break-all; }
.ap-quote { margin: 0; padding: 8px 12px; border-left: 3px solid #f5b301; background: var(--surface-2); border-radius: 0 10px 10px 0; font-size: 13px; color: var(--ink-2); }
.ap-mail { display: flex; flex-direction: column; gap: 6px; }
.ap-people { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-hist { margin-top: 18px; }
.ap-hr { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ap-hr:last-child { border-bottom: 0; }
.ap-hr > div { flex: 1; min-width: 0; }
.ap-hr b { font-size: 13px; font-weight: 600; display: block; }
.ap-hr small { color: var(--ink-3); font-size: 12px; }
.ap-hr.rejected b, .ap-hr.expired b, .ap-hr.undone b { color: var(--ink-3); text-decoration: line-through; }
.ap-stats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.ap-stat { padding: 14px; display: flex; flex-direction: column; gap: 2px; }
.ap-stat small { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.ap-stat b { font-size: 22px; font-weight: 650; letter-spacing: -.03em; }
.ap-d { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.ap-d.up { color: var(--ok); } .ap-d.down { color: var(--danger); }
.ap-ins { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ap-ins:last-child { border-bottom: 0; }
.ap-ins b { display: block; font-size: 13.5px; font-weight: 600; }
.ap-ins small { display: block; color: var(--ink-2); font-size: 12.5px; margin-top: 2px; }
.ap-bars { display: flex; flex-direction: column; gap: 8px; }
.ap-bars > div { display: grid; grid-template-columns: 120px minmax(0, 1fr) 50px; gap: 4px 10px; align-items: center; font-size: 13px; }
.ap-bars i { height: 8px; border-radius: 8px; background: var(--hover); overflow: hidden; }
.ap-bars em { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--brand), #4cc38a); }
.ap-bars b { text-align: right; font-weight: 600; }
.ap-bars small { grid-column: 2 / -1; color: var(--ink-3); font-size: 11.5px; margin-top: -4px; }
.ap-tblw { overflow-x: auto; margin: 0 -4px; }
.ap-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.ap-tbl th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--ink-3); padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ap-tbl td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ap-tbl tr:last-child td { border-bottom: 0; }
.ap-tbl td b { font-weight: 600; }
.ap-url { display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-pos { display: inline-grid; place-items: center; min-width: 32px; height: 26px; border-radius: 8px; font-weight: 700; background: var(--hover); color: var(--ink-2); }
.ap-pos.top { background: var(--ok-soft); color: var(--ok); }
.ap-pos.p1 { background: var(--blue-soft); color: var(--blue); }
.ap-pos.none { color: var(--ink-3); }
.ap-spark { width: 90px; height: 26px; }
.ap-spark polyline { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ap-gridwrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.ap-mgrid { display: grid; grid-template-columns: repeat(var(--n), 34px); gap: 6px; padding: 14px; border-radius: 16px; background: radial-gradient(circle at 50% 50%, #e9f2ee, #f3f1ea); }
.ap-mgrid span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12px; color: #fff; box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .3); }
.ap-mgrid .g1 { background: #1e9e6a; } .ap-mgrid .g2 { background: #e2a316; } .ap-mgrid .g3 { background: #d6493f; font-size: 10px; }
.ap-mgrid .c { outline: 3px solid var(--ink); outline-offset: 2px; }
.ap-gl { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.ap-gl small { color: var(--ink-3); font-size: 12px; }
.ap-gs { display: flex; gap: 22px; margin: 4px 0; }
.ap-gs b { font-size: 24px; font-weight: 650; letter-spacing: -.03em; display: block; }
.ap-aeo { border-top: 1px solid var(--line); padding: 8px 0; }
.ap-aeo summary { cursor: pointer; display: flex; gap: 8px; align-items: center; font-size: 13px; }
.ap-aeo p { font-size: 13px; color: var(--ink-2); margin: 6px 0; }
.ap-kwf { margin-bottom: 12px; flex-wrap: wrap; height: auto; }
.ap-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ap-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ap-ccol { background: var(--hover); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 140px; }
.ap-ch { font-size: 12.5px; font-weight: 650; color: var(--ink-2); padding: 2px 4px; display: flex; justify-content: space-between; }
.ap-ch span { color: var(--ink-3); }
.ap-card { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s; }
.ap-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.ap-card b { font-size: 13px; font-weight: 600; line-height: 1.35; }
.ap-card small, .ap-cm { font-size: 11.5px; color: var(--ink-3); display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.ap-add { display: flex; gap: 6px; }
.ap-add .input { width: 320px; max-width: 60vw; }
.ap-artm .modal-b { max-height: 74vh; }
.ap-art { display: flex; flex-direction: column; gap: 14px; }
.ap-art ol { padding-left: 20px; font-size: 13px; }
.ap-art2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.ap-prev { height: 380px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; padding: 4px 16px; font-size: 14px; line-height: 1.65; background: #fff; color: #222; }
.ap-prev h2 { font-size: 18px; margin: 16px 0 6px; } .ap-prev h3 { font-size: 15px; margin: 12px 0 4px; } .ap-prev p { margin: 0 0 10px; }
.ap-rep { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ap-rep .card { padding: 14px; font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.ap-rep small { color: var(--ink-3); font-weight: 600; display: flex; gap: 5px; align-items: center; }
.ap-vids { display: flex; flex-direction: column; gap: 6px; }
.ap-vid { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; text-align: left; }
.ap-vid:hover { border-color: var(--ink-3); }
.ap-vid b { display: block; font-size: 13.5px; } .ap-vid small { color: var(--ink-3); font-size: 12px; }
.ap-nap { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 12px; font-size: 13px; }
.ap-nap b { width: 100%; font-size: 12px; color: var(--ink-3); }
.ap-cits { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.ap-cit { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 13px; }
.ap-cit b { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-howto { margin: 12px 0 0; padding-left: 18px; color: var(--ink-2); display: flex; flex-direction: column; gap: 4px; }
.ap-mailprev { width: 100%; height: 440px; border: 1px solid var(--line); border-radius: 12px; background: #f3f2ee; }
.ap-h3 { margin: 18px 0 8px; font-size: 14px; }
.ap-keys { display: flex; flex-direction: column; gap: 6px; }
.ap-key { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.ap-key > div { flex: 1; } .ap-key b { display: block; font-size: 13.5px; } .ap-key small { color: var(--ink-3); font-size: 12px; }
.ap-key select { width: auto; }
.ap-clients { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.ap-cl { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; position: relative; }
.ap-cl:hover { border-color: var(--ink-3); }
.ap-cl span { display: flex; flex-wrap: wrap; gap: 4px; }
.ap-cl i { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--hover); color: var(--ink-2); }
.ap-cl em { position: absolute; right: 10px; top: 10px; font-style: normal; font-size: 11.5px; font-weight: 700; background: var(--danger); color: #fff; border-radius: 999px; padding: 1px 7px; }
.spinner.sm { width: 13px; height: 13px; border-width: 2px; display: inline-block; vertical-align: -2px; }

/* ---------- Leads ---------- */
.ld-page { max-width: 980px; }
.ld-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.ld-stats .card { padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.ld-stats small { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.ld-stats b { font-size: 26px; font-weight: 650; letter-spacing: -.03em; }
.ld-setup { display: flex; align-items: center; gap: 16px; padding: 18px 20px; margin-bottom: 16px; border-style: dashed; }
.ld-setup > div { flex: 1; } .ld-setup h3 { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.ld-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ld-bar .seg-mini { flex-wrap: wrap; height: auto; }
.ld-row { padding: 14px 16px; margin-bottom: 8px; }
.ld-row.spam, .ld-row.duplicate { opacity: .7; }
.ld-row.won { border-left: 3px solid var(--ok); }
.ld-who { display: flex; align-items: center; gap: 12px; }
.ld-who > div { flex: 1; min-width: 0; }
.ld-who b { display: block; font-size: 14.5px; font-weight: 620; }
.ld-who small { font-size: 12.5px; color: var(--ink-2); }
.ld-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: hsl(var(--h) 45% 30%); background: hsl(var(--h) 55% 90%); flex: none; }
.ld-when { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.ld-msg { margin: 10px 0 0 48px; font-size: 13.5px; color: var(--ink); white-space: pre-wrap; }
.ld-fields { margin: 8px 0 0 48px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
.ld-fields small { display: block; font-size: 11px; color: var(--ink-3); }
.ld-foot { margin: 10px 0 0 48px; display: flex; align-items: center; gap: 8px; }
.ld-foot > span { flex: 1; min-width: 0; }
.ld-foot select { width: auto; }
.ld-set { display: flex; flex-direction: column; gap: 14px; }
.ld-url { display: flex; gap: 6px; }
.ld-url .input { flex: 1; }
.ld-how p { margin: 6px 0; }
.ld-tpl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.ld-tpl .ap-mailprev { height: 100%; min-height: 320px; }

@media (max-width: 1100px) {
  .ap-hero { grid-template-columns: 1fr; }
  .ap-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ap-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .ap-grid2, .ap-art2, .ap-rep, .ld-tpl { grid-template-columns: 1fr; }
  .ap-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .ap-hero { padding: 18px; border-radius: 18px; }
  .ap-hero h2 { font-size: 20px; }
  .ap-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-kpi b { font-size: 20px; }
  .ap-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-board { grid-template-columns: 1fr; }
  .ap-why, .ap-b, .ap-item .notice { margin-left: 0; }
  .ap-it { flex-wrap: wrap; }
  .ap-sel { display: none; }
  .ap-fr { grid-template-columns: 32px minmax(0, 1fr); }
  .ap-fr .seg-mini { grid-column: 1 / -1; justify-self: start; }
  .ap-alts div { grid-template-columns: 1fr; }
  .ap-add { width: 100%; } .ap-add .input { flex: 1; width: auto; max-width: none; }
  .ld-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-msg, .ld-fields, .ld-foot { margin-left: 0; }
  .ld-foot { flex-wrap: wrap; }
  .ld-setup { flex-direction: column; align-items: stretch; }
  .ap-mgrid { grid-template-columns: repeat(var(--n), 30px); gap: 5px; }
  .ap-mgrid span { width: 30px; height: 30px; }
}

/* ---------- Autopilot control centre + connections (autopilot.js) ---------- */
.ct-page { max-width: 1320px; }
.ct-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; padding: 28px 30px; border-radius: 24px; margin-bottom: 16px; position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, #24604a 0%, rgba(36, 96, 74, 0) 55%), linear-gradient(135deg, #0d1f19 0%, #12302a 60%, #163b31 100%); color: #eef6f2; box-shadow: var(--shadow-lg); }
.ct-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 18px 18px; mask-image: linear-gradient(90deg, transparent, #000 60%); pointer-events: none; }
.ct-hl { position: relative; min-width: 0; }
.ct-hero .eyebrow { color: #9ad8bd; display: flex; gap: 6px; align-items: center; }
.ct-hero h1 { color: #fff; font-size: 30px; }
.ct-hero p { color: #bcd7cb; margin-top: 6px; max-width: 560px; font-size: 14px; }
.ct-live { display: flex; gap: 14px; align-items: center; margin-top: 18px; padding: 12px 16px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); max-width: 560px; }
.ct-live.on { background: rgba(80, 220, 160, .1); border-color: rgba(120, 240, 190, .3); }
.ct-live > div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ct-live small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8fd4b5; }
.ct-live b { color: #fff; font-size: 15px; font-weight: 600; }
.ct-live span { color: #b5cfc4; font-size: 12.5px; }
.ct-pulse { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #4ade9b; box-shadow: 0 0 0 0 rgba(74, 222, 155, .6); animation: ctPulse 1.6s infinite; }
.ct-pulse.idle { background: #7f9a8e; animation: none; }
@keyframes ctPulse { 70% { box-shadow: 0 0 0 12px rgba(74, 222, 155, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 155, 0); } }
.ct-prog { display: block; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .12); overflow: hidden; margin: 6px 0 2px; }
.ct-prog em { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #4ade9b, #a7f3d0); transition: width .6s; }
.ct-kpis { display: grid; grid-template-columns: repeat(5, minmax(96px, 1fr)); gap: 8px; position: relative; }
.ct-k { padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .09); display: flex; flex-direction: column; gap: 1px; }
.ct-k small { font-size: 11.5px; font-weight: 600; color: #a6cbbb; }
.ct-k b { font-size: 26px; font-weight: 650; letter-spacing: -.03em; color: #fff; }
.ct-k span, .ct-k a { font-size: 11.5px; color: #bcd7cb; }
.ct-k a { text-decoration: underline; }
.ct-k.hot b { color: #8ef0c1; } .ct-k.warn b { color: #ffd479; } .ct-k.bad b { color: #ffb4ab; }
.ct-clients { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin-bottom: 8px; scrollbar-width: thin; }
.ct-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); font-size: 13px; box-shadow: var(--shadow-sm); transition: border-color .15s, background .15s; }
.ct-chip:hover { border-color: var(--ink-3); }
.ct-chip b { font-weight: 600; }
.ct-chip.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.ct-chip.off b { opacity: .55; }
.ct-chip:first-child { padding-right: 14px; }
.ct-cn { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--hover); color: var(--ink-2); }
.ct-chip.on .ct-cn { background: color-mix(in srgb, var(--surface) 20%, transparent); color: var(--surface); }
.ct-tabs { display: none; margin-bottom: 10px; }
.ct-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; align-items: start; }
.ct-col { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.ct-col > header { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.ct-col > header b { flex: 1; font-size: 14px; font-weight: 650; }
.ct-col > header span { font-size: 12px; font-weight: 700; padding: 1px 9px; border-radius: 999px; background: var(--hover); color: var(--ink-2); }
.ct-col.up > header .i { color: var(--blue); } .ct-col.done > header .i { color: var(--ok); } .ct-col.wait > header .i { color: var(--brand); } .ct-col.blocked > header .i { color: var(--warn); }
.ct-body { max-height: 560px; overflow-y: auto; padding: 6px 8px 10px; }
.ct-grp { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 10px 8px 4px; }
.ct-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; transition: background .12s; }
.ct-row:hover { background: var(--hover); }
.ct-row > div { flex: 1; min-width: 0; }
.ct-row b { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; }
.ct-row small { display: block; font-size: 11.5px; color: var(--ink-3); line-height: 1.35; margin-top: 1px; }
.ct-ic { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.ct-row.bad .ct-ic { background: var(--danger-soft); color: var(--danger); }
.ct-row.warn .ct-ic { background: var(--warn-soft); color: var(--warn); }
.ct-row.mute .ct-ic, .ct-row.soft .ct-ic { background: var(--hover); color: var(--ink-3); }
.ct-row.mute b { color: var(--ink-3); }
.ct-when { flex: none; font-size: 11.5px; color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.ct-state { flex: none; color: var(--ok); }
.ct-row.bad .ct-state { color: var(--danger); } .ct-row.mute .ct-state { color: var(--ink-3); }
.ct-row .btn.sm { flex: none; height: 26px; padding: 0 9px; font-size: 12px; }
.ct-empty { padding: 26px 12px; text-align: center; color: var(--ink-3); font-size: 13px; }
.ct-more { display: block; text-align: center; padding: 8px; font-size: 12.5px; font-weight: 600; color: var(--brand); }
.ct-fold { border-radius: 10px; }
.ct-fold summary { cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 10px; font-size: 12.5px; list-style: none; }
.ct-fold summary::-webkit-details-marker { display: none; }
.ct-fold summary:hover { background: var(--hover); }
.ct-fold summary b { flex: 1; font-weight: 600; color: var(--warn); }
.ct-fold summary span { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); }
.ct-fold[open] summary { background: var(--hover); }
.ct-act { padding: 16px 20px 12px; margin-bottom: 16px; }
.ct-leg { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-2); flex-wrap: wrap; }
.ct-leg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-left: 8px; }
.ct-chart { width: 100%; height: 110px; display: block; }
.ct-chart text { font-size: 9px; fill: var(--ink-3); text-anchor: middle; }
.ct-chart .b1, .ct-leg .b1 { fill: var(--brand); background: var(--brand); }
.ct-chart .b2, .ct-leg .b2 { fill: #e2a316; background: #e2a316; }
.ct-chart .b3, .ct-leg .b3 { fill: var(--blue); background: var(--blue); }
.ct-plan { margin-bottom: 16px; }
.ct-plan-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ct-plan-h h3 { display: flex; gap: 8px; align-items: center; font-size: 16px; }
.ct-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.ct-step { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.ct-step::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--line-2); }
.ct-step.s-due::before { background: var(--brand); } .ct-step.s-scheduled::before { background: var(--blue); } .ct-step.s-blocked::before { background: var(--warn); }
.ct-step-t { display: flex; align-items: center; gap: 8px; }
.ct-step-t b { flex: 1; font-size: 13.5px; font-weight: 650; }
.ct-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); white-space: nowrap; }
.ct-step.s-due .ct-badge { background: var(--brand-soft); color: var(--brand); }
.ct-step.s-blocked .ct-badge { background: var(--warn-soft); color: var(--warn); }
.ct-step.s-off .ct-badge { background: var(--hover); color: var(--ink-3); }
.ct-step.s-off, .ct-step.s-blocked { background: var(--surface-2); }
.ct-step p { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.ct-step-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.ct-step-f small { font-size: 11.5px; color: var(--ink-3); }
.ct-why { font-style: normal; font-size: 12px; color: var(--warn); font-weight: 600; }
.side .count.live { color: #4ade9b; background: none; font-size: 10px; animation: ctBlink 1.6s infinite; }
@keyframes ctBlink { 50% { opacity: .35; } }
/* Connections */
.cn-card .panel-h { align-items: center; }
.cn-ring { --p: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--brand) calc(var(--p) * 1%), var(--hover) 0); }
.cn-ring b { width: 36px; height: 36px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.cn-for { margin: -4px 0 10px; }
.cn-list { display: flex; flex-direction: column; }
.cn-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.cn-row:last-child { border-bottom: 0; }
.cn-ic { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--hover); color: var(--ink-2); }
.cn-row.ok .cn-ic { background: var(--ok-soft); color: var(--ok); }
.cn-row.warn .cn-ic { background: var(--warn-soft); color: var(--warn); }
.cn-row.miss .cn-ic { background: var(--danger-soft); color: var(--danger); }
.cn-t { flex: 1; min-width: 0; }
.cn-t b { display: block; font-size: 13.5px; font-weight: 600; }
.cn-t small { display: block; font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
.cn-t em { font-style: normal; font-size: 11px; color: var(--ink-3); }
.cn-st { flex: none; font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.cn-row.ok .cn-st { color: var(--ok); } .cn-row.warn .cn-st { color: var(--warn); } .cn-row.miss .cn-st { color: var(--danger); }
.cn-more { margin-top: 8px; }
.green { color: var(--ok); }
.cn-wiz { margin-top: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); }
.cn-wiz-h { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; font-size: 13.5px; }
.cn-wiz-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cn-wiz-list span { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); }
@media (max-width: 1360px) {
  .ct-hero { grid-template-columns: 1fr; }
  .ct-hero p, .ct-live { max-width: none; }
}
@media (max-width: 1180px) {
  .ct-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .ct-hero { padding: 20px 18px; border-radius: 20px; }
  .ct-hero h1 { font-size: 23px; }
  .ct-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ct-k b { font-size: 21px; }
  .ct-tabs { display: inline-flex; flex-wrap: wrap; height: auto; }
  .ct-board { grid-template-columns: 1fr; }
  .ct-board .ct-col { display: none; }
  .ct-board[data-tab="up"] .ct-col.up, .ct-board[data-tab="done"] .ct-col.done, .ct-board[data-tab="wait"] .ct-col.wait, .ct-board[data-tab="blocked"] .ct-col.blocked { display: flex; }
  .ct-body { max-height: none; }
  .ct-steps { grid-template-columns: 1fr; }
  .ct-plan-h { flex-wrap: wrap; }
}

/* WordPress: the three setup steps (card and connect window) */
.wp-steps { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 6px; }
.wp-steps.modal { margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.wp-step { display: flex; gap: 12px; align-items: flex-start; padding: 9px 4px; }
.wp-step + .wp-step { border-top: 1px dashed var(--line); }
.wp-step > div { flex: 1; min-width: 0; }
.wp-step > div > b { display: block; font-size: 13.5px; font-weight: 620; }
.wp-step small b { color: var(--ink); font-weight: 600; }
.wp-step small { display: block; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin-top: 2px; }
.wp-n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--hover); color: var(--ink-2); border: 1px solid var(--line-2); }
.wp-step.ok .wp-n { background: var(--brand); border-color: var(--brand); color: #fff; }
.wp-step.ok .wp-n .i { width: 12px; height: 12px; stroke-width: 3; }
.wp-step.warn .wp-n { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.wp-step.here b { color: var(--brand); }
.wp-step.here .wp-n { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.wp-go { margin-top: 10px; }

/* Version: the update bar, the sidebar line and "What's new" */
.updbar { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; max-width: calc(100vw - 24px);
  border-radius: 16px; background: linear-gradient(135deg, #10241d, #173a2e); color: #eef6f2; box-shadow: 0 18px 44px -14px rgba(10, 30, 22, .55), 0 0 0 1px rgba(255, 255, 255, .08) inset; animation: updIn .35s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes updIn { from { opacity: 0; transform: translate(-50%, -14px); } }
.updbar.busy { opacity: .7; pointer-events: none; }
.upd-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #4ade9b; box-shadow: 0 0 0 0 rgba(74, 222, 155, .6); animation: ctPulse 1.6s infinite; }
.upd-t { display: flex; flex-direction: column; min-width: 0; }
.upd-t b { font-size: 14px; font-weight: 650; color: #fff; }
.upd-t span { font-size: 12px; color: #b5cfc4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.updbar .btn.ghost { color: #d6ebe1; }
.updbar .btn.ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.updbar .upd-go { background: #4ade9b; border-color: #4ade9b; color: #0b2018; font-weight: 700; }
.updbar .upd-go:hover { background: #6ee7b0; }
.updbar .upd-x { color: #b5cfc4; }
.side-ver { display: flex; align-items: center; gap: 8px; width: calc(100% - 20px); margin: 0 10px 6px; padding: 6px 10px; border: 0; background: none; border-radius: 9px; cursor: pointer; font-size: 11.5px; color: var(--ink-3); text-align: left; }
.side-ver:hover { background: var(--hover); color: var(--ink-2); }
.side-ver .lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-ver em { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--brand); color: #fff; }
.wn-modal { width: min(620px, 100%); }
.wn-list { display: flex; flex-direction: column; gap: 14px; max-height: 64vh; }
.wn-rel { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); }
.wn-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wn-h b { font-size: 13px; }
.wn-h time { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.wn-rel h3 { margin: 8px 0 6px; font-size: 15.5px; }
.wn-rel ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; color: var(--ink-2); }
.wn-how { max-width: 320px; }
@media (max-width: 600px) {
  .updbar { top: auto; bottom: 14px; left: 12px; right: 12px; transform: none; flex-wrap: wrap; animation: none; }
  .upd-t { flex: 1 1 calc(100% - 40px); }
  .updbar .btn.ghost { display: none; }
  .wn-how { display: none; }
}

/* ==== GENERATED THEMES (tools/themes.py) — do not edit by hand ==== */
/* Dark: every hard-coded light colour, darkened. */
html[data-mode="dark"] { --surface: var(--d-surface); --surface-2: #201e18; --hover: #26251f; --line-2: #403f3a; --ink: #e8eaec; --ink-2: #afb2b8; --brand-soft: #1e2d26; --mine: #1f3026; --chat: #2a2721; --ok: #a0ebd5; --ok-soft: #1e2d26; --warn: #efc070; --warn-soft: #382c16; --danger: #d36661; --danger-soft: #301815; --blue-soft: #131c2f; --bg: #26251e; --line: #3b3934; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08); --shadow: 0 1px 1px rgba(0, 0, 0, 0.048), 0 2px 4px -2px rgba(0, 0, 0, 0.08), 0 14px 32px -22px rgba(0, 0, 0, 0.352); --shadow-lg: 0 30px 70px -20px rgba(0, 0, 0, 0.512), 0 2px 8px rgba(0, 0, 0, 0.096); }
:where(html[data-mode="dark"]) ::selection { background: #2a4035; }
:where(html[data-mode="dark"]) ::-webkit-scrollbar-thumb { background: #3f3e38; }
:where(html[data-mode="dark"]) .btn.dark { color: #111216; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.017), 0 1px 2px rgba(0, 0, 0, 0.48), 0 6px 14px -8px rgba(0, 0, 0, 0.7); }
:where(html[data-mode="dark"]) .btn.green { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 88%, var(--d-surface)), var(--brand)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.024), 0 6px 14px -8px color-mix(in srgb, var(--brand) 80%, transparent); }
:where(html[data-mode="dark"]) .input:focus { box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.192); }
:where(html[data-mode="dark"]) .chip.toggle.on { color: #111216; }
:where(html[data-mode="dark"]) .avatar { color: var(--pc, #b9b9b9); background: color-mix(in srgb, var(--pc, #717171) 15%, var(--d-surface)); }
:where(html[data-mode="dark"]) .plogo img { background: var(--d-surface); }
:where(html[data-mode="dark"]) .card { border-color: rgba(255, 255, 255, 0.112); }
:where(html[data-mode="dark"]) .brand .mark { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.192), inset 0 0 0 1px rgba(255, 255, 255, 0.022); background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 88%, var(--d-surface)), var(--brand-2, var(--brand))); }
:where(html[data-mode="dark"]) .notice { color: #f4d6a0; }
:where(html[data-mode="dark"]) .notice.info { color: #82a0dd; }
:where(html[data-mode="dark"]) .demo-bar { color: #111216; }
:where(html[data-mode="dark"]) .nav-item:hover { background: rgba(255, 255, 255, 0.058); }
:where(html[data-mode="dark"]) .nav-item.on { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.128), 0 0 0 .5px rgba(0, 0, 0, 0.096); }
:where(html[data-mode="dark"]) .side-foot { border-top: 1px solid rgba(255, 255, 255, 0.096); }
:where(html[data-mode="dark"]) .me-card:hover { background: rgba(255, 255, 255, 0.058); }
@media (max-width: 900px) {
  :where(html[data-mode="dark"]) .scrim.open { background: rgba(255, 255, 255, 0.14); }
}
:where(html[data-mode="dark"]) .folder-top .plogo { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.018); }
:where(html[data-mode="dark"]) .flag { background: var(--d-surface); }
:where(html[data-mode="dark"]) .ledger tbody tr:nth-child(even) td { background: #1d1d16; }
:where(html[data-mode="dark"]) .chat { background-color: #312b23; background-image: var(--wall), linear-gradient(180deg, #2c271f, #353027); }
:where(html[data-mode="dark"]) .chat::before { background-image: radial-gradient(rgba(255, 255, 255, 0.065) 1px, transparent 1px); }
:where(html[data-mode="dark"]) .chat-bar { background: rgba(37, 34, 25, 0.82); }
:where(html[data-mode="dark"]) .day { background: var(--d-surface); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.096); }
:where(html[data-mode="dark"]) .bubble { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.112), 0 6px 18px -10px rgba(0, 0, 0, 0.288); }
:where(html[data-mode="dark"]) .mention.me { background: color-mix(in srgb, var(--pc) 16%, var(--d-surface)); }
:where(html[data-mode="dark"]) .who-pill.me:not(.ok):not(.late):not(.over) { background: color-mix(in srgb, var(--pc) 14%, var(--d-surface)); border-color: color-mix(in srgb, var(--pc) 40%, #292929); }
:where(html[data-mode="dark"]) .msg.mine .who-pill.me:not(.ok):not(.late):not(.over) { background: color-mix(in srgb, var(--pc) 14%, var(--d-surface)); }
:where(html[data-mode="dark"]) .task-foot { border-top: 1px dashed rgba(255, 255, 255, 0.16); }
:where(html[data-mode="dark"]) .msg.mine .who-pill:not(.ok):not(.late):not(.over) { background: var(--d-surface); }
:where(html[data-mode="dark"]) .att { background: var(--d-surface); }
:where(html[data-mode="dark"]) .att:hover { background: var(--d-surface); }
:where(html[data-mode="dark"]) .thread { background: rgba(255, 255, 255, 0.046); }
:where(html[data-mode="dark"]) .msg.mine .thread { background: var(--d-surface); }
:where(html[data-mode="dark"]) .ctag { background: color-mix(in srgb, var(--pc, #717171) 12%, var(--d-surface)); }
:where(html[data-mode="dark"]) .comp-row textarea:focus { background: var(--d-surface); }
:where(html[data-mode="dark"]) .send { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.48); }
:where(html[data-mode="dark"]) .modal { box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.08); border: 1px solid rgba(41, 41, 41, 0.6); }
:where(html[data-mode="dark"]) .menu { box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.56), 0 0 0 1px rgba(0, 0, 0, 0.096); }
:where(html[data-mode="dark"]) .toast { color: #111216; box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.7); }
:where(html[data-mode="dark"]) .seg-mini { background: #2f2d27; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.096); }
:where(html[data-mode="dark"]) .seg-mini button.on { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.192), 0 0 0 .5px rgba(0, 0, 0, 0.096); }
:where(html[data-mode="dark"]) .sw.late { background: #b49459; }
:where(html[data-mode="dark"]) .bar-col:hover { background: linear-gradient(to top, transparent 22px, rgba(255, 255, 255, 0.039) 22px); }
:where(html[data-mode="dark"]) .tip { color: #111216; }
:where(html[data-mode="dark"]) .bcount { background: var(--d-surface); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.128); }
:where(html[data-mode="dark"]) .bcard { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.08); }
:where(html[data-mode="dark"]) .msg.mine .done-panel { background: var(--d-surface); }
:where(html[data-mode="dark"]) .phead.dark .plogo { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.014), 0 10px 30px -10px hsl(var(--h) 70% 40% / .8); }
:where(html[data-mode="dark"]) .phead.dark .share-btn .avatar { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.7); }
:where(html[data-mode="dark"]) .phead.dark .tabs a.on { border-bottom-color: #292929; }
:where(html[data-mode="dark"]) .tl-fill { background: linear-gradient(90deg, rgba(255, 255, 255, .25), var(--d-surface)); box-shadow: 0 0 14px rgba(255, 255, 255, 0.054); }
:where(html[data-mode="dark"]) .tl-now { background: var(--d-surface); }
:where(html[data-mode="dark"]) .tl-now span { color: #ecedf0; background: var(--d-surface); }
:where(html[data-mode="dark"]) .tl-m i { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03); }
:where(html[data-mode="dark"]) .tl-m.st-late i { background: #b49459; }
:where(html[data-mode="dark"]) .tl-m.st-miss i { background: #a44447; }
:where(html[data-mode="dark"]) .tl-m.st-today i { background: var(--d-surface); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.03); }
:where(html[data-mode="dark"]) .chip.rec { background: color-mix(in srgb, var(--blue) 10%, var(--d-surface)); }
:where(html[data-mode="dark"]) .ft-badge { background: var(--d-surface); color: #e9ebee; }
:where(html[data-mode="dark"]) .mtl-fill { background: linear-gradient(90deg, #3b3d40, #17191c); }
:where(html[data-mode="dark"]) .mtl-rail i { background: #434547; border: 2px solid #292929; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.096); }
:where(html[data-mode="dark"]) .mtl-rail i.st-late { background: #b49459; }
:where(html[data-mode="dark"]) .mtl-rail i.st-miss { background: #a44447; }
:where(html[data-mode="dark"]) .w-cards i:last-child { background: linear-gradient(135deg, #2a281f, #464339); }
:where(html[data-mode="dark"]) .w-body { box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.01); }
:where(html[data-mode="dark"]) .w-clasp { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.012); }
:where(html[data-mode="dark"]) .w-clasp::after { background: radial-gradient(circle at 35% 30%, var(--d-surface), hsl(var(--h) 25% 70%) 45%, hsl(var(--h) 20% 40%)); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
@media (max-width: 700px) {
  :where(html[data-mode="dark"]) .tl-mob .st-late i { background: #b49459; }
  :where(html[data-mode="dark"]) .tl-mob .st-miss i { background: #a44447; }
  :where(html[data-mode="dark"]) .tl-mob .st-today i { background: var(--d-surface); }
}
:where(html[data-mode="dark"]) .mm:hover { background: var(--hover, #26251f); }
:where(html[data-mode="dark"]) .mm-kind { background: #2a2923; }
:where(html[data-mode="dark"]) .switch::after { background: var(--d-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.32); }
:where(html[data-mode="dark"]) pre.cfg { background: #292721; }
:where(html[data-mode="dark"]) .ph-mini .mtl-fill { background: linear-gradient(90deg, rgba(255, 255, 255, .3), var(--d-surface)); }
:where(html[data-mode="dark"]) .ph-mini .mtl-rail i.st-today { background: var(--d-surface); }
:where(html[data-mode="dark"]) .wz-step.on i { color: #111216; }
:where(html[data-mode="dark"]) .dir.to { background: color-mix(in srgb, var(--pc) 16%, var(--d-surface)); }
:where(html[data-mode="dark"]) .dir.by { background: var(--d-surface); }
:where(html[data-mode="dark"]) .msg.for-me:not(.mine) .bubble { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--mepc) 45%, transparent), 0 1px 2px rgba(0, 0, 0, 0.096); }
:where(html[data-mode="dark"]) .msg.mine .bubble { background: linear-gradient(180deg, #1d3123, #23382a); }
:where(html[data-mode="dark"]) .msg.mine .bubble::before { background: #1d3123; }
:where(html[data-mode="dark"]) .composer-in { background: var(--d-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.096), 0 12px 32px -14px rgba(0, 0, 0, 0.448); border: 1px solid rgba(41, 41, 41, 0.7); }
@media (prefers-reduced-motion: reduce) {
  :where(html[data-mode="dark"]) .msg.flash .bubble { box-shadow: 0 0 0 3px var(--mepc, rgba(0, 0, 0, 0.7)); }
}
:where(html[data-mode="dark"]) .tray { box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7); }
:where(html[data-mode="dark"]) .tray-r i { background: linear-gradient(90deg, #59ab86, #2e704f); }
:where(html[data-mode="dark"]) .tray-r.err i { background: #892828; }
:where(html[data-mode="dark"]) .chat-drop { background: rgba(26, 41, 33, 0.88); }
:where(html[data-mode="dark"]) .media-i { background: #33312a; }
:where(html[data-mode="dark"]) .media-more { background: rgba(255, 255, 255, 0.14); }
:where(html[data-mode="dark"]) .lb-stage img { box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7); }
:where(html[data-mode="dark"]) .u-bar { background: #2d2c26; }
:where(html[data-mode="dark"]) .u-bar i { background: linear-gradient(90deg, #5b77b4, #385895); }
:where(html[data-mode="dark"]) .u-bar.hot i { background: linear-gradient(90deg, #b36e57, #a44447); }
:where(html[data-mode="dark"]) a.card:hover, :where(html[data-mode="dark"]) .tile[href]:hover, :where(html[data-mode="dark"]) .folder-card:hover { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.048), 0 18px 40px -20px rgba(0, 0, 0, 0.448); }
:where(html[data-mode="dark"]) .input:hover:not(:focus) { border-color: #484641; }
:where(html[data-mode="dark"]) .hero { box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.005) inset; }
:where(html[data-mode="dark"]) .hero h1 .mention.me { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.026); }
:where(html[data-mode="dark"]) .hero-r { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.01); }
:where(html[data-mode="dark"]) .tile.t-blue { --tc: #5b77b4; }
:where(html[data-mode="dark"]) .tile.t-red { --tc: #af5651; }
:where(html[data-mode="dark"]) .tile-ic { background: color-mix(in srgb, var(--tc) 11%, var(--d-surface)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.072), 0 4px 10px -6px rgba(0, 0, 0, 0.56); }
:where(html[data-mode="dark"]) .bar-stack { box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.7); }
:where(html[data-mode="dark"]) .bar-stack i.late { background: linear-gradient(180deg, #a17d3b, #d18f18); }
:where(html[data-mode="dark"]) .bcol { background: var(--d-surface); border: 1px solid rgba(255, 255, 255, 0.096); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.064); }
:where(html[data-mode="dark"]) .bcol.status.st-open { --pc: #5b77b4; }
:where(html[data-mode="dark"]) .bcol.status.st-over { --pc: #af5651; }
:where(html[data-mode="dark"]) .bcol-h { background: linear-gradient(180deg, color-mix(in srgb, var(--pc, #717171) 7%, #201e16), #201e16); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
:where(html[data-mode="dark"]) .ring-av { background: conic-gradient(var(--pc) calc(var(--p) * 1%), rgba(255, 255, 255, 0.104) 0); }
:where(html[data-mode="dark"]) .ring-av::before { background: #201e16; }
:where(html[data-mode="dark"]) .bcard:hover { box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(0, 0, 0, 0.096); }
:where(html[data-mode="dark"]) .bcard.over { box-shadow: inset 3px 0 0 var(--danger), 0 1px 1px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.08); }
:where(html[data-mode="dark"]) .bcover { background: #312e27; }
:where(html[data-mode="dark"]) .bf { border-top: 1px dashed rgba(255, 255, 255, 0.128); }
:where(html[data-mode="dark"]) .bdiv::after { background: rgba(255, 255, 255, 0.104); }
:where(html[data-mode="dark"]) .board-bar .seg-mini { background: #2f2d27; }
:where(html[data-mode="dark"]) .fv iframe { background: var(--d-surface); }
:where(html[data-mode="dark"]) .fv-pdf { background: #312f29; }
:where(html[data-mode="dark"]) .fv-pdf canvas { background: var(--d-surface); box-shadow: 0 6px 20px -10px rgba(0, 0, 0, 0.56); }
:where(html[data-mode="dark"]) .prio.high { background: #3a2a11; color: #f8ba74; }
:where(html[data-mode="dark"]) .prio.urgent { background: #351513; color: #dc6c65; }
:where(html[data-mode="dark"]) .dir.all { background: #180e31; }
:where(html[data-mode="dark"]) .mention.all { background: #180e31; }
:where(html[data-mode="dark"]) .mopt.all .avatar.all { background: #180e31; }
:where(html[data-mode="dark"]) .ctag.all { background: #180e31; }
:where(html[data-mode="dark"]) .ctag.prio-t.high { background: #3a2a11; color: #f8ba74; }
:where(html[data-mode="dark"]) .ctag.prio-t.urgent { background: #351513; color: #dc6c65; }
:where(html[data-mode="dark"]) .ctag.rv-t { background: #0f1d33; }
:where(html[data-mode="dark"]) .cklist { background: var(--d-surface); }
:where(html[data-mode="dark"]) .msg.mine .cklist { background: var(--d-surface); }
:where(html[data-mode="dark"]) .ck-box { background: var(--d-surface); }
:where(html[data-mode="dark"]) .rv.pending { background: #0d192d; color: #829cd6; border: 1px dashed #2c3952; }
:where(html[data-mode="dark"]) .rv.changes { color: #f5d193; }
:where(html[data-mode="dark"]) .rv-mini.pending { background: #0d192d; color: #829cd6; }
:where(html[data-mode="dark"]) .rv-mini.changes { color: #f5d193; }
:where(html[data-mode="dark"]) .rx { background: var(--d-surface); }
:where(html[data-mode="dark"]) .rx.on { border-color: color-mix(in srgb, var(--brand) 35%, #292929); }
:where(html[data-mode="dark"]) .chat-top { background: rgba(36, 34, 28, 0.92); }
:where(html[data-mode="dark"]) .csearch { background: var(--d-surface); }
:where(html[data-mode="dark"]) .ai-btn { background: linear-gradient(135deg, #1a0e2f, #0e2232); border: 1px solid #302449; color: #7e61ce; }
:where(html[data-mode="dark"]) .ai-btn:hover { background: linear-gradient(135deg, #1e1037, #11273a); border-color: #372b54; }
:where(html[data-mode="dark"]) .pinbar { background: #29230c; border-bottom: 1px solid #4c452e; }
:where(html[data-mode="dark"]) .pin-ic { color: #efc070; }
:where(html[data-mode="dark"]) .pin-t small { color: #efc070; }
:where(html[data-mode="dark"]) .prio-c.high.on { background: #3a2a11; color: #f8ba74; border-color: #5f4d2f; }
:where(html[data-mode="dark"]) .prio-c.urgent.on { background: #351513; color: #dc6c65; border-color: #522e2b; }
:where(html[data-mode="dark"]) .ai-demo { background: #180d2b; color: #7e61ce; border: 1px dashed #32264e; }
:where(html[data-mode="dark"]) .ai-out h4 { color: #7e61ce; }
:where(html[data-mode="dark"]) .ai-wait span { background: #3a247e; }
:where(html[data-mode="dark"]) .cal-c.off { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255, 255, 255, 0.023) 6px 12px); }
:where(html[data-mode="dark"]) .cal-i.ms { background: var(--d-surface); }
:where(html[data-mode="dark"]) .wl-c.h1 { background: #1e3128; color: #a0ebd5; }
:where(html[data-mode="dark"]) .wl-c.h2 { background: #2f4d3e; color: #acefdb; }
:where(html[data-mode="dark"]) .wl-c.h3 { background: #5f4c20; color: #f5d193; }
:where(html[data-mode="dark"]) .wl-c.h4 { background: #5a2722; color: #e78a85; }
:where(html[data-mode="dark"]) .side-install { background: var(--d-surface); }
:where(html[data-mode="dark"]) .side-install:hover { background: var(--d-surface); border-color: color-mix(in srgb, var(--brand) 40%, #292929); }
:where(html[data-mode="dark"]) .pop-scrim { background: rgba(255, 255, 255, 0.14); }
@media (max-width: 759px) {
  :where(html[data-mode="dark"]) #dpop, :where(html[data-mode="dark"]) #apop, :where(html[data-mode="dark"]) #xpop { box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.352); }
  :where(html[data-mode="dark"]) .composer-in { background: var(--d-surface); }
}
:where(html[data-mode="dark"]) .chan { background: rgba(36, 34, 28, 0.92); }
:where(html[data-mode="dark"]) .chan button:hover { background: var(--d-surface); }
:where(html[data-mode="dark"]) .chan button.on { background: var(--d-surface); box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.064); }
:where(html[data-mode="dark"]) .chan button[data-v="team"].on { background: #32270e; border-color: #554b30; }
:where(html[data-mode="dark"]) .chan button[data-v="team"] .i { color: #efc070; }
:where(html[data-mode="dark"]) .team-chan .msgs { background-color: #342c1c; }
:where(html[data-mode="dark"]) .team-chan .chat-top { background: rgba(51, 43, 23, 0.95); }
:where(html[data-mode="dark"]) .team-chan .composer-in { box-shadow: 0 0 0 2px #f1dfb0, 0 12px 32px -14px rgba(0, 0, 0, 0.448); }
:where(html[data-mode="dark"]) .team-chan .comp-row textarea { background: #2b230d; }
:where(html[data-mode="dark"]) .pg-s.hot { background: linear-gradient(135deg, #33270f, var(--d-surface)); border-color: #5a4c30; }
:where(html[data-mode="dark"]) .pg-s.hot b { color: #f8ca7c; }
:where(html[data-mode="dark"]) .st0 { --c: #4e5054; }
:where(html[data-mode="dark"]) .st1 { --c: #815ba3; }
:where(html[data-mode="dark"]) .st2 { --c: #5b77b4; }
:where(html[data-mode="dark"]) .pg-stage { background: color-mix(in srgb, var(--c) 14%, var(--d-surface)); color: color-mix(in srgb, var(--c) 75%, #ffffff); }
:where(html[data-mode="dark"]) .brand .mark.img { background: var(--d-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), inset 0 0 0 1px var(--line); }
:where(html[data-mode="dark"]) .bc-sw button { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.128); }
:where(html[data-mode="dark"]) .bc-prev { background: linear-gradient(160deg, #282621, #312f29); }
:where(html[data-mode="dark"]) .bc-side { background: #23221b; }
:where(html[data-mode="dark"]) .bc-nav.on { background: var(--d-surface); }
:where(html[data-mode="dark"]) .bc-login { background: var(--d-surface); }
:where(html[data-mode="dark"]) .acc-tag.cl { background: #2a111c; color: #d2749f; }
:where(html[data-mode="dark"]) .acc-tag.off { background: #382a10; color: #f4cb87; }
:where(html[data-mode="dark"]) .acc-seg button.on { background: var(--d-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.128), 0 0 0 1px rgba(0, 0, 0, 0.064); }
:where(html[data-mode="dark"]) .acc-seg button.on.none { color: #f4cb87; }
:where(html[data-mode="dark"]) .acc-tag.view { background: #0e1930; }
:where(html[data-mode="dark"]) .acc-tag.none { background: #382a10; color: #f4cb87; }
:where(html[data-mode="dark"]) .acc-key b.none { color: #f4cb87; }
:where(html[data-mode="dark"]) .viewbar { background: #0d192d; border: 1px solid #283348; color: #829cd6; }
:where(html[data-mode="dark"]) .viewbar > span { background: var(--d-surface); }
:where(html[data-mode="dark"]) .chan em.vo { background: #0e1930; }
:where(html[data-mode="dark"]) .au-card.rule .au-ic { background: #180d2e; }
:where(html[data-mode="dark"]) .au-badge { background: #0e1930; }
:where(html[data-mode="dark"]) .em-prev { background: #24221c; }
:where(html[data-mode="dark"]) .em-meta { background: var(--d-surface); }
:where(html[data-mode="dark"]) .em-prev iframe { background: #24221c; }
:where(html[data-mode="dark"]) button.pg-stage:hover { background: color-mix(in srgb, var(--c) 24%, var(--d-surface)); }
:where(html[data-mode="dark"]) .pg-tpl:hover { background: var(--d-surface); }
:where(html[data-mode="dark"]) .stmt-who { background: var(--d-surface); }
:where(html[data-mode="dark"]) .st-todo { --st: #75787d; --st-soft: #262622; }
:where(html[data-mode="dark"]) .st-doing { --st: #5b77b4; --st-soft: #131c2f; }
:where(html[data-mode="dark"]) .st-review { --st: #815ba3; --st-soft: #22162c; }
:where(html[data-mode="dark"]) .st-done { --st-soft: #1e2d26; }
:where(html[data-mode="dark"]) .st-over { --st-soft: #301815; }
:where(html[data-mode="dark"]) .st-none { --st: #46474b; --st-soft: #22221f; }
:where(html[data-mode="dark"]) .tk-views { background: #2d2c26; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.096); }
:where(html[data-mode="dark"]) .tk-views button.on { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.192), 0 0 0 1px rgba(0, 0, 0, 0.048); }
:where(html[data-mode="dark"]) .tk-views button i { color: #111216; }
:where(html[data-mode="dark"]) .tk-search:focus-within { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.192); }
:where(html[data-mode="dark"]) .tk-quick button.on { color: #111216; }
:where(html[data-mode="dark"]) .tk-quick .x:hover { background: rgba(255, 255, 255, 0.104); }
:where(html[data-mode="dark"]) .tk-sel.set { background-color: #25241e; }
:where(html[data-mode="dark"]) .tk-st.st-done i::after { border: solid #292929; }
:where(html[data-mode="dark"]) .tk-row:hover { background: #201e16; }
:where(html[data-mode="dark"]) .tk-m.ms { color: #f9d693; }
:where(html[data-mode="dark"]) .tk-add:focus-within { background: #1d1d16; }
:where(html[data-mode="dark"]) .tk-col { background: #2a2923; }
:where(html[data-mode="dark"]) .tk-col-h .icon-btn:hover { background: var(--d-surface); }
:where(html[data-mode="dark"]) .tk-card { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.112), 0 0 0 1px rgba(0, 0, 0, 0.048); }
:where(html[data-mode="dark"]) .tk-card:hover { box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.448), 0 0 0 1px rgba(0, 0, 0, 0.096); }
:where(html[data-mode="dark"]) .tc-day:hover { background: #201e16; }
:where(html[data-mode="dark"]) .tc-day.sel { background: #16211a; }
:where(html[data-mode="dark"]) .rc-intro { background: linear-gradient(135deg, #1a2720, #27241d); border: 1px solid #323e38; }
:where(html[data-mode="dark"]) .rc-card.ms .rc-ic { background: #382c16; color: #f9d693; }
:where(html[data-mode="dark"]) .rc-dots a.late { background: #b49459; }
:where(html[data-mode="dark"]) .tm-sw i { background: var(--d-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
:where(html[data-mode="dark"]) .tm-sched { border: 1px solid #323e38; background: #16201b; }
:where(html[data-mode="dark"]) .tm-sched .tm-row { border-bottom-color: #2f3b34; }
:where(html[data-mode="dark"]) .td-bg { background: rgba(255, 255, 255, 0.14); }
:where(html[data-mode="dark"]) .td { box-shadow: -24px 0 60px -30px rgba(0, 0, 0, 0.7); }
:where(html[data-mode="dark"]) .td-status { background: #282621; }
:where(html[data-mode="dark"]) .td-status button:not([disabled]):hover { background: var(--d-surface); }
:where(html[data-mode="dark"]) .td-status button.on { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16); }
@media (max-width: 800px) {
  :where(html[data-mode="dark"]) .td-bg { background: rgba(255, 255, 255, 0.14); }
}
:where(html[data-mode="dark"]) .nav-sec span em { background: rgba(255, 255, 255, 0.078); }
:where(html[data-mode="dark"]) .side-find { background: var(--d-surface); }
:where(html[data-mode="dark"]) .pin-star:hover { color: #efc070; background: rgba(255, 255, 255, 0.065); }
:where(html[data-mode="dark"]) .pin-star.on { color: #f6d158; }
@media (min-width: 901px) {
  :where(html[data-mode="dark"]) .app.side-mini.side-peek .side { box-shadow: 24px 0 60px -24px rgba(0, 0, 0, 0.608); }
}
:where(html[data-mode="dark"]) .qs-row em { color: #f6d158; }
:where(html[data-mode="dark"]) .ptable tbody tr:hover { background: #201e16; }
:where(html[data-mode="dark"]) .pp-full { box-shadow: -24px 0 50px -26px rgba(0, 0, 0, 0.56); }
:where(html[data-mode="dark"]) .need-chip { color: #f9cb93; background: #392a14; }
:where(html[data-mode="dark"]) .done-panel.req { border-color: #564830; background: #2b200d; }
:where(html[data-mode="dark"]) .dp-need { background: #392a14; color: #fad1a0; }
:where(html[data-mode="dark"]) .sub-row.in { background: #141d18; }
:where(html[data-mode="dark"]) .imp-steps span.on i { color: #111216; }
:where(html[data-mode="dark"]) .imp-drop { background: linear-gradient(180deg, #201e16, #24221c); }
:where(html[data-mode="dark"]) .imp-drop:hover, :where(html[data-mode="dark"]) .imp-drop.over { background: #18241d; }
:where(html[data-mode="dark"]) .imp-table tr.bad { background: #280f0c; }
:where(html[data-mode="dark"]) .imp-log .bad { background: #280f0c; }
:where(html[data-mode="dark"]) .bt-text { background: #1d1d16; }
:where(html[data-mode="dark"]) .bt-row { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.096); }
:where(html[data-mode="dark"]) .bt-row.warn { box-shadow: inset 3px 0 0 var(--warn), 0 1px 2px rgba(0, 0, 0, 0.096); }
:where(html[data-mode="dark"]) .bt-who.role { background: #1d152c; }
:where(html[data-mode="dark"]) .menu-x:hover { background: rgba(255, 255, 255, 0.104); }
:where(html[data-mode="dark"]) .ws-chip { color: color-mix(in srgb, var(--wc) 78%, #ffffff); background: color-mix(in srgb, var(--wc) 12%, var(--d-surface)); }
:where(html[data-mode="dark"]) .chan .ws-tab.on { border-color: color-mix(in srgb, var(--wc) 45%, #292929) !important; background: color-mix(in srgb, var(--wc) 8%, var(--d-surface)) !important; }
:where(html[data-mode="dark"]) .ws-pkg { background: linear-gradient(135deg, #1b1529, #24221c); border: 1px solid #312840; }
:where(html[data-mode="dark"]) .ws-sub.on { border-color: color-mix(in srgb, var(--wc) 45%, #292929); background: color-mix(in srgb, var(--wc) 8%, var(--d-surface)); }
:where(html[data-mode="dark"]) .ws-sub.on button { color: color-mix(in srgb, var(--wc) 80%, #ffffff); }
:where(html[data-mode="dark"]) .ws-sub input { border-left: 1px solid color-mix(in srgb, var(--wc) 30%, #292929); background: var(--d-surface); }
:where(html[data-mode="dark"]) .imp-auto { background: #1b1529; color: #967ecb; }
:where(html[data-mode="dark"]) .imp-auto em { background: var(--d-surface); border: 1px solid #322943; color: #967ecb; }
:where(html[data-mode="dark"]) .imp-table td.assign, :where(html[data-mode="dark"]) .imp-table th.assign { background: #201e16; }
:where(html[data-mode="dark"]) .lk-table tr.bad { background: #250b0b; }
:where(html[data-mode="dark"]) .lk-table tr.warn { background: #28220c; }
:where(html[data-mode="dark"]) .lk-alert { border-color: #4c2f2c; background: linear-gradient(180deg, #280f0c, var(--d-surface)); }
:where(html[data-mode="dark"]) .lk-alert-row:hover { background: rgba(255, 255, 255, 0.039); }
:where(html[data-mode="dark"]) .rp-client img { background: var(--d-surface); }
:where(html[data-mode="dark"]) .rp-link em, :where(html[data-mode="dark"]) .rp-work em { color: color-mix(in srgb, var(--wc) 80%, #ffffff); background: color-mix(in srgb, var(--wc) 10%, var(--d-surface)); }
@media print {
  :where(html[data-mode="dark"]) body { background: var(--d-surface); }
}
:where(html[data-mode="dark"]) .sring.low { --sc: #a44447; }
:where(html[data-mode="dark"]) .sring.none { --sc: #4d4c47; }
:where(html[data-mode="dark"]) .sdelta.up { color: #93eecb; }
:where(html[data-mode="dark"]) .spill.good { background: #1c3126; color: #a0f1d2; }
:where(html[data-mode="dark"]) .spill.mid { background: #3c2f14; color: #f9cf87; }
:where(html[data-mode="dark"]) .spill.low { background: #301212; color: #d6666a; }
:where(html[data-mode="dark"]) .seo-hero { box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.007); }
:where(html[data-mode="dark"]) .seo-hero .sring { --ring-bg: rgba(255, 255, 255, 0.012); }
:where(html[data-mode="dark"]) .strend circle { stroke: #e9ebee; }
:where(html[data-mode="dark"]) .sa:hover { box-shadow: 0 14px 30px -20px rgba(0, 0, 0, 0.56); }
:where(html[data-mode="dark"]) .sa i em { background: var(--sc, #4d4c47); }
:where(html[data-mode="dark"]) .sa.low { --sc: #a44447; }
:where(html[data-mode="dark"]) .seo-tabs a span { background: rgba(255, 255, 255, 0.091); }
:where(html[data-mode="dark"]) .seo-tabs a.on { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.192); }
:where(html[data-mode="dark"]) .notice.warn { color: #f6d6a0; }
:where(html[data-mode="dark"]) .iss.open { box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.64); }
:where(html[data-mode="dark"]) .iss-sev { color: #f1cb8b; }
:where(html[data-mode="dark"]) .iss.fail .iss-sev { color: #d86e71; }
:where(html[data-mode="dark"]) .iss-ai { background: #160e2f; }
:where(html[data-mode="dark"]) .fx-found { color: #f1cb8b; }
:where(html[data-mode="dark"]) .fx-found.fail { color: #d86e71; }
:where(html[data-mode="dark"]) .fx-fix.ai { border-color: #2b2146; background: linear-gradient(180deg, #130b26, var(--d-surface) 60%); }
:where(html[data-mode="dark"]) .fx-fix.ai .fx-lbl { border-bottom-color: #271e42; }
:where(html[data-mode="dark"]) .fx-code { background: #1f1c17; }
:where(html[data-mode="dark"]) .fx-fix.ai .fx-code { background: #130a24; }
:where(html[data-mode="dark"]) .kwchip { background: #0d192d; color: #6184d5; }
:where(html[data-mode="dark"]) .pp.bad { color: #d86e71; }
:where(html[data-mode="dark"]) .pp.warn { color: #f1cb8b; }
:where(html[data-mode="dark"]) .sp-bar i { background: var(--sc, #4d4c47); }
:where(html[data-mode="dark"]) .sp-bar.low { --sc: #a44447; }
:where(html[data-mode="dark"]) .hist .hl.site, :where(html[data-mode="dark"]) .hist .hd.site { stroke: #7feac1; }
:where(html[data-mode="dark"]) .hist-key i.gbp { background: #2d4a9c; }
:where(html[data-mode="dark"]) .gl-ic { background: linear-gradient(135deg, #1d2c24, #243b2f); color: #84edba; }
:where(html[data-mode="dark"]) .gp-riv tr.me td { background: #15261c; }
:where(html[data-mode="dark"]) .rv-d { background: #130b26; border-color: #2b2146; }
:where(html[data-mode="dark"]) .gp-opt.best { background: #15261c; }
:where(html[data-mode="dark"]) .shb.low i { background: #a44447; }
:where(html[data-mode="dark"]) .shp-flags .warn { color: #f1cb8b; }
:where(html[data-mode="dark"]) .usage-bar i { background: linear-gradient(90deg, #4b2e9e, #552889); }
:where(html[data-mode="dark"]) .ss-gbp.ok { color: #abf2d7; }
:where(html[data-mode="dark"]) .ss-gbp.bad { color: #f6d6a0; }
:where(html[data-mode="dark"]) .sr-c b em { background: #160e2f; }
:where(html[data-mode="dark"]) .mt-card.on .mt-date { color: #111216; }
:where(html[data-mode="dark"]) .warn-t { color: #f1cb8b; }
:where(html[data-mode="dark"]) .mt-carry { background: linear-gradient(180deg, #2b230d, var(--d-surface)); border-color: #4d432c; }
:where(html[data-mode="dark"]) .mt-sum { background: linear-gradient(180deg, #130b26, var(--d-surface) 70%); border-color: #292042; }
:where(html[data-mode="dark"]) .skel-hero, :where(html[data-mode="dark"]) .skel-row i, :where(html[data-mode="dark"]) .skel-list i { background: linear-gradient(90deg, #2e2c26 0%, #24221c 40%, #2e2c26 80%) 0 0 / 200% 100%; }
:where(html[data-mode="dark"]) .side .nav-item.on { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.008), 0 8px 18px -12px rgba(0, 0, 0, 0.7); }
:where(html[data-mode="dark"]) .side .nav-item.on::before { background: color-mix(in srgb, var(--brand) 60%, var(--d-surface)); }
:where(html[data-mode="dark"]) .side .nav-sec { color: #a2a6ae; }
:where(html[data-mode="dark"]) .side .count.hot { background: color-mix(in srgb, var(--brand) 85%, var(--d-surface)); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.7); }
:where(html[data-mode="dark"]) .side .count.red { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.7); }
:where(html[data-mode="dark"]) .side .side-find input::placeholder { color: #999da4; }
:where(html[data-mode="dark"]) .side .me-card .who b .mention.me { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.019); }
:where(html[data-mode="dark"]) .side .pin-star { color: #999da4; }
:where(html[data-mode="dark"]) .side .side-grp { color: #a2a6ae; }
:where(html[data-mode="dark"]) .side .avatar { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.7); }
:where(html[data-mode="dark"]) .app.side-mini.side-peek .side { box-shadow: 30px 0 70px -24px rgba(0, 0, 0, 0.7); }
:where(html[data-mode="dark"]) a.card:hover, :where(html[data-mode="dark"]) .folder-card:hover, :where(html[data-mode="dark"]) .tile:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.064), 0 22px 40px -26px rgba(0, 0, 0, 0.56); }
:where(html[data-mode="dark"]) .phead.dark .tabs a::after { background: var(--d-surface); }
:where(html[data-mode="dark"]) .phead.dark .tabs a.on::after { box-shadow: 0 0 14px rgba(255, 255, 255, 0.072); }
:where(html[data-mode="dark"]) .modal-bg { background: rgba(255, 255, 255, 0.14); }
:where(html[data-mode="dark"]) .hp-key li::before { background: #be5b37; }
:where(html[data-mode="dark"]) .hp-card.has-img em { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24); }
:where(html[data-mode="dark"]) .tour-hole { box-shadow: 0 0 0 4px var(--brand), 0 0 0 9999px rgba(0, 0, 0, 0.7); }
:where(html[data-mode="dark"]) .site-chip.down { background: #a44447; }
:where(html[data-mode="dark"]) .site-down { background: #2f1511; border-bottom: 1px solid #4d2d2a; color: #e8a59f; }
:where(html[data-mode="dark"]) .site-down .sd-dot { background: #a44447; }
:where(html[data-mode="dark"]) .site-down .sd-t span { color: #d28b84; }
:where(html[data-mode="dark"]) .site-dot { background: #a44447; }
:where(html[data-mode="dark"]) .rrow.pcheck.ok { background: #1a2c22; }
:where(html[data-mode="dark"]) .rrow.pcheck.bad { background: #2f1511; }
:where(html[data-mode="dark"]) .rrow.pcheck.warn { background: #372910; }
:where(html[data-mode="dark"]) .pc-ic { background: var(--d-surface); }
:where(html[data-mode="dark"]) .pcheck.ok .pc-ic { color: #9be6bf; }
:where(html[data-mode="dark"]) .pcheck.bad .pc-ic { color: #d36661; }
:where(html[data-mode="dark"]) .pcheck.warn .pc-ic { color: #f8c280; }
:where(html[data-mode="dark"]) .pc-list.bad { color: #e48c85; }
:where(html[data-mode="dark"]) .pc-post { border-left: 3px solid rgba(255, 255, 255, 0.16); background: var(--d-surface); }
:where(html[data-mode="dark"]) .ap-serp input { color: #8379ee; }
:where(html[data-mode="dark"]) .ap-bars em { background: linear-gradient(90deg, var(--brand), #5fa483); }
:where(html[data-mode="dark"]) .ap-mgrid { background: radial-gradient(circle at 50% 50%, #202b26, #2a281f); }
:where(html[data-mode="dark"]) .ap-mgrid span { box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.48); }
:where(html[data-mode="dark"]) .ap-mgrid .g3 { background: #ac5751; }
:where(html[data-mode="dark"]) .ap-prev { background: var(--d-surface); color: #e3e3e3; }
:where(html[data-mode="dark"]) .ap-mailprev { background: #26251f; }
:where(html[data-mode="dark"]) .ct-hero { background: radial-gradient(120% 140% at 100% 0%, #24604a 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, #0d1f19 0%, #12302a 60%, #163b31 100%); }
:where(html[data-mode="dark"]) .ct-pulse { background: #49a37a; }
:where(html[data-mode="dark"]) .ct-pulse.idle { background: #75857e; }
:where(html[data-mode="dark"]) .ct-prog em { background: linear-gradient(90deg, #49a37a, #275f45); }
:where(html[data-mode="dark"]) .ct-chart .b2, :where(html[data-mode="dark"]) .ct-leg .b2 { fill: #e5b64e; }
:where(html[data-mode="dark"]) .updbar { box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.01) inset; }
:where(html[data-mode="dark"]) .upd-dot { background: #49a37a; }
:where(html[data-mode="dark"]) .updbar .upd-go { background: #49a37a; color: #e6f5ef; }
:where(html[data-mode="dark"]) .updbar .upd-go:hover { background: #3b8865; }
/* Glass: every plain white surface, made translucent. */
:where(html[data-style="glass"]) .btn { background: var(--g-surface); }
:where(html[data-style="glass"]) .input, :where(html[data-style="glass"]) select.input, :where(html[data-style="glass"]) textarea.input { background: var(--g-surface); }
:where(html[data-style="glass"]) .chip.toggle { background: var(--g-surface); }
:where(html[data-style="glass"]) .plogo img { background: var(--g-surface); }
:where(html[data-style="glass"]) .card { background: var(--g-surface); }
:where(html[data-style="glass"]) .persona { background: var(--g-surface); }
:where(html[data-style="glass"]) .nav-item.on { background: var(--g-surface); }
@media (max-width: 900px) {
  :where(html[data-style="glass"]) .mtop { background: var(--g-surface); }
}
:where(html[data-style="glass"]) .folder-body { background: var(--g-surface); }
:where(html[data-style="glass"]) .phead { background: var(--g-surface); }
:where(html[data-style="glass"]) .bubble { background: var(--g-surface); }
:where(html[data-style="glass"]) .who-pill { background: var(--g-surface); }
:where(html[data-style="glass"]) .att:hover { background: var(--g-surface); }
:where(html[data-style="glass"]) .comp-row textarea:focus { background: var(--g-surface); }
:where(html[data-style="glass"]) .popover { background: var(--g-surface); }
:where(html[data-style="glass"]) .people-panel { background: var(--g-surface); }
:where(html[data-style="glass"]) .check { background: var(--g-surface); }
:where(html[data-style="glass"]) .modal { background: var(--g-surface); }
:where(html[data-style="glass"]) .menu { background: var(--g-surface); }
:where(html[data-style="glass"]) .seg-mini button.on { background: var(--g-surface); }
:where(html[data-style="glass"]) .share-btn { background: var(--g-surface); }
:where(html[data-style="glass"]) .bcount { background: var(--g-surface); }
:where(html[data-style="glass"]) .bcard { background: var(--g-surface); }
:where(html[data-style="glass"]) .tl-now { background: var(--g-surface); }
:where(html[data-style="glass"]) .tl-now span { background: var(--g-surface); }
:where(html[data-style="glass"]) .tl-m.st-today i { background: var(--g-surface); }
:where(html[data-style="glass"]) .ft-badge { background: var(--g-surface); }
@media (max-width: 700px) {
  :where(html[data-style="glass"]) .tl-mob .st-today i { background: var(--g-surface); }
}
:where(html[data-style="glass"]) .switch::after { background: var(--g-surface); }
:where(html[data-style="glass"]) .ph-mini .mtl-rail i.st-today { background: var(--g-surface); }
:where(html[data-style="glass"]) .msg:not(.mine) .bubble::before { background: var(--g-surface); }
:where(html[data-style="glass"]) .usage { background: var(--g-surface); }
:where(html[data-style="glass"]) .fv iframe { background: var(--g-surface); }
:where(html[data-style="glass"]) .fv-pdf canvas { background: var(--g-surface); }
:where(html[data-style="glass"]) .ck-box { background: var(--g-surface); }
:where(html[data-style="glass"]) .rx { background: var(--g-surface); }
:where(html[data-style="glass"]) .csearch { background: var(--g-surface); }
:where(html[data-style="glass"]) .cal-i.ms { background: var(--g-surface); }
:where(html[data-style="glass"]) .wl th.wl-p, :where(html[data-style="glass"]) .wl td.wl-p { background: var(--g-surface); }
:where(html[data-style="glass"]) .side-install:hover { background: var(--g-surface); }
@media (max-width: 759px) {
  :where(html[data-style="glass"]) .composer-in { background: var(--g-surface); }
}
:where(html[data-style="glass"]) .chan button.on { background: var(--g-surface); }
:where(html[data-style="glass"]) .brand .mark.img { background: var(--g-surface); }
:where(html[data-style="glass"]) .bc-nav.on { background: var(--g-surface); }
:where(html[data-style="glass"]) .bc-login { background: var(--g-surface); }
:where(html[data-style="glass"]) .acc-seg button.on { background: var(--g-surface); }
:where(html[data-style="glass"]) .viewbar > span { background: var(--g-surface); }
:where(html[data-style="glass"]) .au-card { background: var(--g-surface); }
:where(html[data-style="glass"]) .em-meta { background: var(--g-surface); }
:where(html[data-style="glass"]) .pg-tpl:hover { background: var(--g-surface); }
:where(html[data-style="glass"]) .stmt-who { background: var(--g-surface); }
:where(html[data-style="glass"]) .tk-views button.on { background: var(--g-surface); }
:where(html[data-style="glass"]) .tk-stat { background: var(--g-surface); }
:where(html[data-style="glass"]) .tk-bar { background: var(--g-surface); }
:where(html[data-style="glass"]) .tk-grp { background: var(--g-surface); }
:where(html[data-style="glass"]) .tk-card { background: var(--g-surface); }
:where(html[data-style="glass"]) .tk-cal { background: var(--g-surface); }
:where(html[data-style="glass"]) .rc-card { background: var(--g-surface); }
:where(html[data-style="glass"]) .tm-sw i { background: var(--g-surface); }
:where(html[data-style="glass"]) .tm-days button { background: var(--g-surface); }
:where(html[data-style="glass"]) .td { background: var(--g-surface); }
:where(html[data-style="glass"]) .td-status button.on { background: var(--g-surface); }
:where(html[data-style="glass"]) .side-find:focus-within { background: var(--g-surface); }
:where(html[data-style="glass"]) .side-find kbd, :where(html[data-style="glass"]) .qs kbd { background: var(--g-surface); }
:where(html[data-style="glass"]) .side-all:hover, :where(html[data-style="glass"]) .side-more:hover { background: var(--g-surface); }
:where(html[data-style="glass"]) .pp-full { background: var(--g-surface); }
:where(html[data-style="glass"]) .imp-ring::before { background: var(--g-surface); }
:where(html[data-style="glass"]) .bt-ph { background: var(--g-surface); }
:where(html[data-style="glass"]) .bt-row { background: var(--g-surface); }
:where(html[data-style="glass"]) .bt-pick-bar .tk-search { background: var(--g-surface); }
:where(html[data-style="glass"]) .bt-p:hover { background: var(--g-surface); }
:where(html[data-style="glass"]) .bt-p.on { background: var(--g-surface); }
:where(html[data-style="glass"]) .ws-card { background: var(--g-surface); }
:where(html[data-style="glass"]) .ws-sub input { background: var(--g-surface); }
:where(html[data-style="glass"]) .svc-card { background: var(--g-surface); }
:where(html[data-style="glass"]) .imp-auto em { background: var(--g-surface); }
:where(html[data-style="glass"]) .lk-stat { background: var(--g-surface); }
:where(html[data-style="glass"]) .rp-client img { background: var(--g-surface); }
:where(html[data-style="glass"]) .rp-kpis > div { background: var(--g-surface); }
:where(html[data-style="glass"]) .rp-sec { background: var(--g-surface); }
@media print {
  :where(html[data-style="glass"]) body { background: var(--g-surface); }
}
:where(html[data-style="glass"]) .sdelta { background: var(--g-surface); }
:where(html[data-style="glass"]) .sa { background: var(--g-surface); }
:where(html[data-style="glass"]) .seo-tabs a.on { background: var(--g-surface); }
:where(html[data-style="glass"]) .iss { background: var(--g-surface); }
:where(html[data-style="glass"]) .gp-opt { background: var(--g-surface); }
:where(html[data-style="glass"]) .mt-card:hover { background: var(--g-surface); }
:where(html[data-style="glass"]) .mt-card.on { background: var(--g-surface); }
:where(html[data-style="glass"]) .mt-date { background: var(--g-surface); }
:where(html[data-style="glass"]) .mi-title:focus { background: var(--g-surface); }
:where(html[data-style="glass"]) .phead.dark .tabs a::after { background: var(--g-surface); }
:where(html[data-style="glass"]) .hp-top { background: var(--g-surface); }
:where(html[data-style="glass"]) .hp-card.has-img em { background: var(--g-surface); }
:where(html[data-style="glass"]) .tour-card { background: var(--g-surface); }
:where(html[data-style="glass"]) .pc-ic { background: var(--g-surface); }
:where(html[data-style="glass"]) .ap-card { background: var(--g-surface); }
:where(html[data-style="glass"]) .ap-prev { background: var(--g-surface); }
:where(html[data-style="glass"]) .ap-vid { background: var(--g-surface); }
:where(html[data-style="glass"]) .ct-chip { background: var(--g-surface); }
:where(html[data-style="glass"]) .ct-col { background: var(--g-surface); }
:where(html[data-style="glass"]) .ct-step { background: var(--g-surface); }
:where(html[data-style="glass"]) .cn-ring b { background: var(--g-surface); }
:where(html[data-style="glass"]) .cn-wiz-list span { background: var(--g-surface); }
/* ==== END GENERATED THEMES ==== */

/* ==== THEMES: each person's own appearance (My settings → Appearance) ====
   html[data-style]  classic | glass | fluid    html[data-mode]  light | dark
   html[data-wall]   the glass wallpaper    html[data-text]  s | m | l      html[data-motion] reduce
   Hard-coded colours are converted by tools/themes.py (the GENERATED THEMES block above). */
html { --d-surface: #17181c; --g-surface: rgba(255, 255, 255, .5); }

/* ---------- Dark ---------- */
html[data-mode="dark"] {
  color-scheme: dark;
  --bg: #0d0e11; --surface: #17181c; --surface-2: #1c1d22; --hover: #24262c; --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .14);
  --ink: #ecedef; --ink-2: #b0b4bc; --ink-3: #7a7f89;
  --brand-soft: color-mix(in srgb, var(--brand) 22%, #17181c); --mine: color-mix(in srgb, var(--brand) 20%, #17181c); --chat: #111215;
  --ok: #3cc98f; --ok-soft: rgba(60, 201, 143, .14); --warn: #f0b13d; --warn-soft: rgba(240, 177, 61, .14); --danger: #ff6b70; --danger-soft: rgba(255, 107, 112, .14); --blue: #7aa2ff; --blue-soft: rgba(122, 162, 255, .14);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45); --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 34px -22px rgba(0, 0, 0, .8); --shadow-lg: 0 30px 70px -20px rgba(0, 0, 0, .75), 0 2px 8px rgba(0, 0, 0, .4);
  --d-surface: #17181c; --g-surface: rgba(30, 32, 39, .52);
}
html[data-mode="dark"] body { background: var(--bg); }
html[data-mode="dark"] .content { background: radial-gradient(1100px 420px at 75% -160px, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%), var(--bg); }
html[data-mode="dark"] ::selection { background: color-mix(in srgb, var(--brand) 45%, transparent); }
html[data-mode="dark"] .seo-hero, html[data-mode="dark"] .hero { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 60px -36px #000; }
html[data-mode="dark"] .btn.dark { background: linear-gradient(180deg, #f2f3f5, #d9dbe0); border-color: #d9dbe0; color: #111; }
html[data-mode="dark"] .btn.dark:hover { background: #fff; }
html[data-mode="dark"] .skel-hero, html[data-mode="dark"] .skel-row i, html[data-mode="dark"] .skel-list i { background: linear-gradient(90deg, #1b1c20 0%, #25262b 40%, #1b1c20 80%) 0 0 / 200% 100%; }
html[data-mode="dark"] .modal { border-color: rgba(255, 255, 255, .08); }
html[data-mode="dark"] .stars { color: #3a3c42; }
html[data-mode="dark"] img.avatar, html[data-mode="dark"] .plogo img { background: #fff; }

/* ---------- Liquid Glass ---------- */
html[data-style="glass"] {
  --surface: var(--g-surface); --surface-2: rgba(255, 255, 255, .32); --hover: rgba(255, 255, 255, .42); --line: rgba(255, 255, 255, .55); --line-2: rgba(30, 35, 50, .12); --bg: transparent;
  --glass-blur: blur(26px) saturate(190%); --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .38);
  --glass-shine: linear-gradient(155deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .12) 38%, rgba(255, 255, 255, 0) 60%);
  --shadow: 0 1px 1px rgba(30, 35, 60, .04), 0 24px 48px -30px rgba(30, 35, 60, .45); --chat: transparent; --mine: rgba(255, 255, 255, .6);
}
html[data-style="glass"][data-mode="dark"] {
  --g-surface: rgba(26, 28, 36, .5); --d-surface: rgba(26, 28, 36, .5); --surface-2: rgba(255, 255, 255, .05); --hover: rgba(255, 255, 255, .08); --line: rgba(255, 255, 255, .1); --line-2: rgba(255, 255, 255, .16);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .07);
  --glass-shine: linear-gradient(155deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .02) 40%, rgba(255, 255, 255, 0) 60%);
  --shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 24px 48px -28px rgba(0, 0, 0, .85); --mine: rgba(255, 255, 255, .08);
}
html[data-style="glass"] body { background: var(--wallpaper) center / cover fixed, #dfe6f0; }
html[data-style="glass"][data-mode="dark"] body { background-color: #0b0d14; }
html[data-style="glass"] .content, html[data-style="glass"] .main, html[data-style="glass"] .app { background: transparent !important; }
/* The glass itself: frosted, with a bright edge and a soft shine from the top-left, like Apple's Liquid Glass. */
html[data-style="glass"] :is(.card, .modal, .menu, .popover, .td, .tile, .sa, .iss, .seo-tabs, .mt-card.on, .mt-date, .folder-card, .bcol, .tk-bar, .chat-top, .composer, .kw-row .input, .fx-fix, .gpp > div, .shb, .mtop) {
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-color: var(--line) !important;
}
html[data-style="glass"] :is(.card, .modal, .menu, .popover, .td, .tile, .sa, .iss, .folder-card) {
  background: var(--glass-shine), var(--g-surface) !important;
  box-shadow: var(--glass-edge), var(--shadow) !important;
}
html[data-style="glass"] .card:hover, html[data-style="glass"] .tile:hover, html[data-style="glass"] .sa:hover { box-shadow: var(--glass-edge), 0 30px 60px -30px rgba(30, 35, 60, .5) !important; }
html[data-style="glass"] .modal { border-radius: 26px; }
html[data-style="glass"] .modal-bg { background: rgba(20, 24, 36, .18); backdrop-filter: blur(10px) saturate(140%); }
:where(html[data-style="glass"]) .btn { background: rgba(255, 255, 255, .55); backdrop-filter: blur(14px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 4px 12px -8px rgba(30, 35, 60, .35); border-color: rgba(255, 255, 255, .7); }
:where(html[data-style="glass"][data-mode="dark"]) .btn { background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .12); }
html[data-style="glass"] .btn { border-radius: 12px; }
:where(html[data-style="glass"]) .input { background-color: rgba(255, 255, 255, .5); border-color: rgba(255, 255, 255, .7); }
:where(html[data-style="glass"][data-mode="dark"]) .input { background-color: rgba(0, 0, 0, .25); border-color: rgba(255, 255, 255, .1); }
html[data-style="glass"] .seo-tabs a.on, html[data-style="glass"] .seg-mini .on { background: rgba(255, 255, 255, .85); }
html[data-style="glass"][data-mode="dark"] .seo-tabs a.on, html[data-style="glass"][data-mode="dark"] .seg-mini .on { background: rgba(255, 255, 255, .14); }
html[data-style="glass"] :is(.ptable, .mini-table) tbody tr:hover td { background: rgba(255, 255, 255, .3); }
html[data-style="glass"][data-mode="dark"] :is(.ptable, .mini-table) tbody tr:hover td { background: rgba(255, 255, 255, .06); }
/* Dark panels (dashboard hero, SEO hero, project banner) become smoked glass. */
html[data-style="glass"] :is(.hero, .seo-hero) { background: linear-gradient(140deg, rgba(18, 20, 28, .72), rgba(30, 34, 46, .5)) !important; backdrop-filter: blur(30px) saturate(170%); -webkit-backdrop-filter: blur(30px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 60px -30px rgba(10, 14, 30, .6); }
html[data-style="glass"] .phead.dark { background: rgba(16, 18, 26, .58) !important; backdrop-filter: blur(30px) saturate(170%); -webkit-backdrop-filter: blur(30px) saturate(170%); }
/* Sidebar: clear glass with dark text (light) or smoked glass (dark). */
html[data-style="glass"] .side {
  --ink: #15171c; --ink-2: #3f444d; --ink-3: #6d727c; --line: rgba(255, 255, 255, .55); --line-2: rgba(30, 35, 50, .12); --hover: rgba(255, 255, 255, .45); --surface: rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .34) !important; backdrop-filter: blur(30px) saturate(190%); -webkit-backdrop-filter: blur(30px) saturate(190%);
  border-right: 1px solid rgba(255, 255, 255, .6); box-shadow: inset -1px 0 0 rgba(255, 255, 255, .35);
}
html[data-style="glass"] .side .brand, html[data-style="glass"] .side .brand-t b { color: var(--ink); }
html[data-style="glass"] .side .nav-item { color: #3a3f48; }
html[data-style="glass"] .side .nav-item svg { color: #5b606a; }
html[data-style="glass"] .side .nav-item:hover { background: rgba(255, 255, 255, .45); color: #111; }
html[data-style="glass"] .side .nav-item.on { background: rgba(255, 255, 255, .78); color: #111; box-shadow: inset 0 1px 0 #fff, 0 6px 16px -10px rgba(30, 35, 60, .45); }
html[data-style="glass"] .side .nav-item.on svg { color: var(--brand); }
html[data-style="glass"] .side .nav-sec { color: #6d727c; }
html[data-style="glass"] .side .count:not(.hot):not(.red) { color: #6d727c; }
html[data-style="glass"] .side .count.hot { box-shadow: none; }
html[data-style="glass"] .side :is(.side-find, .side-install) { background: rgba(255, 255, 255, .45); border-color: rgba(255, 255, 255, .6); color: #3a3f48; }
html[data-style="glass"] .side .side-find input { color: #111; }
html[data-style="glass"] .side .me-card:hover { background: rgba(255, 255, 255, .45); }
html[data-style="glass"] .side .me-card .who b .mention.me { background: rgba(255, 255, 255, .7); color: #111; box-shadow: none; }
html[data-style="glass"] .side .avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }
html[data-style="glass"][data-mode="dark"] .side {
  --ink: #f3f3f0; --ink-2: #b4b8c0; --ink-3: #7b808a; --line: rgba(255, 255, 255, .08); --hover: rgba(255, 255, 255, .06); --surface: rgba(255, 255, 255, .08);
  background: rgba(14, 16, 22, .45) !important; border-right-color: rgba(255, 255, 255, .06); box-shadow: inset -1px 0 0 rgba(255, 255, 255, .04);
}
html[data-style="glass"][data-mode="dark"] .side .nav-item { color: #b4b8c0; }
html[data-style="glass"][data-mode="dark"] .side .nav-item svg { color: #8a8f99; }
html[data-style="glass"][data-mode="dark"] .side .nav-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
html[data-style="glass"][data-mode="dark"] .side .nav-item.on { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
html[data-style="glass"][data-mode="dark"] .side :is(.side-find, .side-install) { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .08); color: #c9ccd2; }
html[data-style="glass"][data-mode="dark"] .side .side-find input { color: #fff; }
html[data-style="glass"][data-mode="dark"] .side .me-card .who b .mention.me { background: rgba(255, 255, 255, .12); color: #fff; }
html[data-style="glass"][data-mode="dark"] .side .avatar { box-shadow: 0 0 0 2px rgba(20, 22, 28, .8); }

html[data-style="glass"] .hero-f .input { background-color: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); color: #fff; }
/* Chat: the wallpaper shows through, with a faint frosted wash so messages stay readable. */
html[data-style="glass"] .chat { background: rgba(255, 255, 255, .22) !important; backdrop-filter: blur(6px); }
html[data-style="glass"][data-mode="dark"] .chat { background: rgba(10, 12, 18, .3) !important; }
html[data-style="glass"] :is(.chat-bar, .chat-tabs, .pinbar, .ppl) { background: rgba(255, 255, 255, .35) !important; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
html[data-style="glass"][data-mode="dark"] :is(.chat-bar, .chat-tabs, .pinbar, .ppl) { background: rgba(14, 16, 22, .45) !important; }
html[data-mode="dark"] .demo-bar { background: #000; color: #c9ccd2; }
html[data-mode="dark"] .demo-bar button { color: #fff; }
html[data-mode="dark"] .mt-card.on .mt-date span { color: rgba(0, 0, 0, .55); }
/* Colour-coded chips (labels, services, calendar items) get deep tints in dark mode instead of pastel ones. */
html[data-mode="dark"] :is(.chip.cat, .hashtag, .tlb, .cal-i, .ig-ic, .ft) { background: hsl(var(--h) 38% 19%); color: hsl(var(--h) 70% 80%); }
html[data-mode="dark"] .cal-i.ms { background: transparent; border-color: hsl(var(--h) 40% 45%); }
html[data-mode="dark"] .cal-i.over { background: var(--danger-soft); color: var(--danger); }
html[data-mode="dark"] .folder-top { background: linear-gradient(135deg, hsl(var(--h) 35% 22%), hsl(calc(var(--h) + 30) 35% 17%)); }
html[data-mode="dark"] :is(.seg-mini, .seo-tabs) .on :is(.muted, em, span) { color: #c9ccd2; }
html[data-style="glass"] select.input, html[data-mode="dark"] select.input { background-repeat: no-repeat; background-position: right 10px center; }
html[data-mode="dark"] select.input:not(.hero-f select.input) { background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23b0b4bc%27 stroke-width=%272.2%27%3E%3Cpath d=%27m6 9 6 6 6-6%27/%3E%3C/svg%3E"); }
/* ---------- Fluid: Apple's interface principles (WWDC "Designing Fluid Interfaces", "Details of UI Typography") ----------
   System font with size-specific tracking and leading · light materials: a translucent sidebar and chrome with content
   scrolling under · feedback on press · critically damped, interruptible motion · soft scroll edges instead of hard
   dividers · respects reduced motion, reduced transparency and higher contrast. */
html[data-style="fluid"] {
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --f-ease: cubic-bezier(.32, .72, 0, 1); --ease: var(--f-ease);
  --r: 14px;
}
html[data-style="fluid"]:not([data-mode="dark"]) {
  --bg: #f5f5f7; --surface: #ffffff; --surface-2: #f5f5f7; --hover: rgba(0, 0, 0, .045); --line: rgba(0, 0, 0, .07); --line-2: rgba(0, 0, 0, .12);
  --ink: #1d1d1f; --ink-2: #424245; --ink-3: #6e6e73; --chat: #f5f5f7; --mine: color-mix(in srgb, var(--brand) 12%, #fff);
  --ok: #248a3d; --ok-soft: rgba(52, 199, 89, .14); --warn: #b25000; --warn-soft: rgba(255, 149, 0, .14); --danger: #d70015; --danger-soft: rgba(255, 59, 48, .1); --blue: #0066cc; --blue-soft: rgba(0, 122, 255, .1);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04); --shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 6px 20px rgba(0, 0, 0, .05); --shadow-lg: 0 24px 60px rgba(0, 0, 0, .14), 0 4px 12px rgba(0, 0, 0, .05);
  --f-mat: rgba(246, 246, 248, .72); --f-chrome: rgba(255, 255, 255, .72); --f-blur: blur(30px) saturate(180%);
}
html[data-style="fluid"][data-mode="dark"] {
  --bg: #000000; --surface: #1c1c1e; --surface-2: #232325; --hover: rgba(255, 255, 255, .07); --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .15);
  --ink: #f5f5f7; --ink-2: #c7c7cc; --ink-3: #98989d; --chat: #0b0b0c; --mine: color-mix(in srgb, var(--brand) 22%, #1c1c1e);
  --ok: #30d158; --ok-soft: rgba(48, 209, 88, .15); --warn: #ff9f0a; --warn-soft: rgba(255, 159, 10, .15); --danger: #ff453a; --danger-soft: rgba(255, 69, 58, .15); --blue: #0a84ff; --blue-soft: rgba(10, 132, 255, .16);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5); --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 8px 24px rgba(0, 0, 0, .35); --shadow-lg: 0 30px 70px rgba(0, 0, 0, .7);
  --f-mat: rgba(30, 30, 32, .72); --f-chrome: rgba(22, 22, 24, .72); --f-blur: blur(30px) saturate(160%); --d-surface: #1c1c1e;
}
html[data-style="fluid"] body { font-feature-settings: normal; letter-spacing: -.003em; -webkit-font-smoothing: antialiased; }
html[data-style="fluid"] body, html[data-style="fluid"] .content { background: var(--bg) !important; }
/* Typography: tracking is size-specific (tight on large text, near zero on body, a touch open on tiny labels); leading tightens as size grows. */
html[data-style="fluid"] :is(h1, .page-head h1) { font-weight: 700; letter-spacing: -.025em; line-height: 1.08; }
html[data-style="fluid"] h2 { font-weight: 650; letter-spacing: -.02em; line-height: 1.15; }
html[data-style="fluid"] h3 { font-weight: 600; letter-spacing: -.012em; line-height: 1.25; }
html[data-style="fluid"] :is(small, .small, .eyebrow, .muted.small) { letter-spacing: .005em; }
html[data-style="fluid"] .eyebrow { letter-spacing: .06em; }
/* Surfaces: white cards with a soft, layered shadow and only a hairline edge. */
html[data-style="fluid"] :is(.card, .tile) { border-color: var(--line) !important; border-radius: 18px; box-shadow: var(--shadow); }
html[data-style="fluid"] .card:hover { box-shadow: var(--shadow); }
html[data-style="fluid"] .modal { border-radius: 22px; border: 0; box-shadow: var(--shadow-lg); animation: fluidSheet .42s var(--f-ease) both; }
html[data-style="fluid"] .modal-bg { background: rgba(0, 0, 0, .28); backdrop-filter: none; }
@keyframes fluidSheet { from { transform: translateY(14px) scale(.965); opacity: 0; filter: blur(6px); } to { transform: none; opacity: 1; filter: none; } }
html[data-style="fluid"] :is(.menu, .popover) { border-radius: 14px; background: var(--f-chrome) !important; backdrop-filter: var(--f-blur); -webkit-backdrop-filter: var(--f-blur); box-shadow: 0 0 0 .5px var(--line-2), var(--shadow-lg); border: 0; transform-origin: top right; animation: fluidPop .28s var(--f-ease) both; }
@keyframes fluidPop { from { transform: scale(.94); opacity: 0; } }
/* Controls: pill buttons that answer on press (scale .97), a filled primary, a segmented control, green switches. */
html[data-style="fluid"] .btn { border-radius: 980px; font-weight: 550; transition: background .2s var(--f-ease), transform .1s ease-out, box-shadow .2s; }
html[data-style="fluid"] .btn:not(.ai-btn) { border-color: transparent; background: rgba(0, 0, 0, .05); box-shadow: none; }
/* On dark panels, plain buttons and the people stack stay light-on-dark. */
html[data-style="fluid"] :is(.hero, .seo-hero, .ct-hero, .rp-head, .phead.dark) .btn:not(.dark):not(.green):not(.ai-btn) { background: rgba(255, 255, 255, .14); color: #fff; }
html[data-style="fluid"] :is(.hero, .seo-hero, .ct-hero, .rp-head, .phead.dark) .btn:not(.dark):not(.green):not(.ai-btn):hover { background: rgba(255, 255, 255, .22); }
html[data-style="fluid"] .phead.dark .stack .more { background: rgba(255, 255, 255, .2); color: #fff; }
html[data-style="fluid"][data-mode="dark"] .btn:not(.ai-btn) { background: rgba(255, 255, 255, .1); }
html[data-style="fluid"] .btn:not(.ai-btn):hover { background: rgba(0, 0, 0, .08); }
html[data-style="fluid"][data-mode="dark"] .btn:not(.ai-btn):hover { background: rgba(255, 255, 255, .15); }
html[data-style="fluid"] :is(.btn, .icon-btn, .nav-item, .chip, .seg-mini button, .persona, .hl-card, .ih-tile, .si-roles button):active { transform: scale(.97); transition: transform .1s ease-out; }
html[data-style="fluid"] :is(.btn.dark, .btn.green) { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; box-shadow: none; }
html[data-style="fluid"] :is(.btn.dark, .btn.green):hover { background: color-mix(in srgb, var(--brand) 88%, #000) !important; }
html[data-style="fluid"] .btn.ghost { background: transparent; }
html[data-style="fluid"] .btn.ghost:hover { background: var(--hover); }
html[data-style="fluid"] .input { border-radius: 12px; background-color: var(--surface); border-color: var(--line-2); }
html[data-style="fluid"]:not([data-mode="dark"]) .input { background-color: rgba(118, 118, 128, .08); border-color: transparent; }
html[data-style="fluid"]:not([data-mode="dark"]) .input:focus { background-color: #fff; }
html[data-style="fluid"] .seg-mini { background: rgba(118, 118, 128, .12); box-shadow: none; border-radius: 9px; padding: 2px; }
html[data-style="fluid"] .seg-mini button { border-radius: 7px; transition: background .25s var(--f-ease), color .2s, box-shadow .25s var(--f-ease); }
html[data-style="fluid"] .seg-mini button.on { background: #fff; color: #1d1d1f; box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04); }
html[data-style="fluid"][data-mode="dark"] .seg-mini button.on { background: #636366; color: #fff; }
html[data-style="fluid"][data-mode="dark"] .seg-mini .on :is(.muted, em, span) { color: rgba(255, 255, 255, .8); }
html[data-style="fluid"] .switch { width: 42px; height: 25px; background: rgba(120, 120, 128, .2); transition: background .25s var(--f-ease); }
html[data-style="fluid"] .switch::after { transition: transform .3s var(--f-ease); box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .16); }
html[data-style="fluid"] .switch:checked { background: #34c759; }
html[data-style="fluid"] .switch:checked::after { transform: translateX(17px); }
/* Sidebar: a heavier material, translucent, with dark text, like a macOS sidebar. Selection is a soft tint, not a block. */
html[data-style="fluid"] .side {
  --ink: #1d1d1f; --ink-2: #424245; --ink-3: #6e6e73; --line: rgba(0, 0, 0, .07); --line-2: rgba(0, 0, 0, .12); --hover: rgba(0, 0, 0, .05); --surface: rgba(255, 255, 255, .7);
  background: var(--f-mat) !important; backdrop-filter: var(--f-blur); -webkit-backdrop-filter: var(--f-blur); border-right: .5px solid rgba(0, 0, 0, .1); color: var(--ink);
}
html[data-style="fluid"] .side :is(.brand, .brand-t b) { color: var(--ink); }
html[data-style="fluid"] .side .brand small { color: var(--ink-3); }
html[data-style="fluid"] .side .nav-item { color: #333336; font-weight: 500; height: 32px; border-radius: 8px; }
html[data-style="fluid"] .side .nav-item svg { color: color-mix(in srgb, var(--brand) 80%, #333); }
html[data-style="fluid"] .side .nav-item:hover { background: rgba(0, 0, 0, .05); color: #000; }
html[data-style="fluid"] .side .nav-item.on { background: rgba(0, 0, 0, .08); color: #000; box-shadow: none; font-weight: 600; }
html[data-style="fluid"] .side .nav-item.on::before { display: none; }
html[data-style="fluid"] .side .nav-sec { color: #86868b; }
html[data-style="fluid"] .side .nav-sec button:hover { background: rgba(0, 0, 0, .06); color: #000; }
html[data-style="fluid"] .side .count:not(.hot):not(.red) { color: #6e6e73; }
html[data-style="fluid"] .side :is(.count.hot, .count.red) { box-shadow: none; }
html[data-style="fluid"] .side :is(.side-find, .side-install) { background: rgba(0, 0, 0, .05); border-color: transparent; color: #424245; }
html[data-style="fluid"] .side .side-find input { color: #000; }
html[data-style="fluid"] .side .side-foot { border-top-color: rgba(0, 0, 0, .06); }
html[data-style="fluid"] .side .me-card:hover { background: rgba(0, 0, 0, .05); }
html[data-style="fluid"] .side .me-card .who b .mention.me { background: rgba(0, 0, 0, .06); color: #1d1d1f; box-shadow: none; }
html[data-style="fluid"] .side .side-ver { color: #6e6e73; }
html[data-style="fluid"] .side .avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); }
html[data-style="fluid"][data-mode="dark"] .side {
  --ink: #f5f5f7; --ink-2: #c7c7cc; --ink-3: #98989d; --line: rgba(255, 255, 255, .08); --hover: rgba(255, 255, 255, .07); --surface: rgba(255, 255, 255, .08);
  border-right-color: rgba(255, 255, 255, .08);
}
html[data-style="fluid"][data-mode="dark"] .side .nav-item { color: #d1d1d6; }
html[data-style="fluid"][data-mode="dark"] .side .nav-item svg { color: color-mix(in srgb, var(--brand) 55%, #fff); }
html[data-style="fluid"][data-mode="dark"] .side .nav-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
html[data-style="fluid"][data-mode="dark"] .side .nav-item.on { background: rgba(255, 255, 255, .12); color: #fff; }
html[data-style="fluid"][data-mode="dark"] .side .nav-sec { color: #8e8e93; }
html[data-style="fluid"][data-mode="dark"] .side .count:not(.hot):not(.red) { color: #98989d; }
html[data-style="fluid"][data-mode="dark"] .side :is(.side-find, .side-install) { background: rgba(255, 255, 255, .07); color: #d1d1d6; }
html[data-style="fluid"][data-mode="dark"] .side .side-find input { color: #fff; }
html[data-style="fluid"][data-mode="dark"] .side .me-card .who b .mention.me { background: rgba(255, 255, 255, .12); color: #fff; }
html[data-style="fluid"][data-mode="dark"] .side .side-ver { color: #98989d; }
html[data-style="fluid"][data-mode="dark"] .side .avatar { box-shadow: 0 0 0 2px rgba(30, 30, 32, .9); }
/* Floating chrome (project header, chat bars, phone top bar): light translucent material; content scrolls under.
   A soft edge instead of a hard 1px divider. */
html[data-style="fluid"] :is(.phead, .chat-top, .mtop, .chat-bar, .tk-bar) { background: var(--f-chrome) !important; backdrop-filter: var(--f-blur); -webkit-backdrop-filter: var(--f-blur); border-bottom-color: transparent; box-shadow: 0 .5px 0 var(--line-2), 0 8px 16px -14px rgba(0, 0, 0, .25); }
html[data-style="fluid"] .tk-bar { border-color: transparent; border-radius: 16px; }
html[data-style="fluid"] .phead.dark { background: rgba(28, 28, 30, .78) !important; }
/* Dark panels (dashboard hero, health, control centre) in Apple's graphite, not tinted green. */
html[data-style="fluid"] :is(.hero, .seo-hero, .ct-hero) { background: linear-gradient(160deg, #1d1d1f 0%, #2c2c2e 100%) !important; box-shadow: var(--shadow-lg); }
html[data-style="fluid"] .ct-hero::before { opacity: .5; }
/* Motion: one critically damped curve everywhere; hover lifts are gentle and settle without overshoot. */
html[data-style="fluid"] :is(.card, .tile, .hl-card, .ih-tile, .nav-item, .chip) { transition: background .25s var(--f-ease), box-shadow .3s var(--f-ease), transform .3s var(--f-ease), border-color .2s; }
html[data-style="fluid"] :is(.ih-tile, .hl-card, .tile):hover { transform: translateY(-2px); }
html[data-style="fluid"] .toast { border-radius: 14px; backdrop-filter: var(--f-blur); -webkit-backdrop-filter: var(--f-blur); animation: fluidPop .35s var(--f-ease) both; transform-origin: top center; }
/* Respect the system settings: less transparency → solid; more contrast → defined borders; less motion → fades only. */
@media (prefers-reduced-transparency: reduce) {
  html[data-style="fluid"] :is(.side, .phead, .chat-top, .mtop, .chat-bar, .tk-bar, .menu, .popover) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  html[data-style="fluid"]:not([data-mode="dark"]) :is(.side) { background: #f0f0f2 !important; }
  html[data-style="fluid"]:not([data-mode="dark"]) :is(.phead, .chat-top, .mtop, .chat-bar, .tk-bar, .menu, .popover) { background: #fff !important; }
  html[data-style="fluid"][data-mode="dark"] :is(.side, .phead, .chat-top, .mtop, .chat-bar, .tk-bar, .menu, .popover) { background: #1c1c1e !important; }
}
@media (prefers-contrast: more) {
  html[data-style="fluid"] :is(.card, .tile, .modal, .menu, .popover, .btn, .input) { border: 1px solid var(--ink-3) !important; }
  html[data-style="fluid"] { --ink-3: #555558; }
  html[data-style="fluid"][data-mode="dark"] { --ink-3: #c7c7cc; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-style="fluid"] :is(.modal, .menu, .popover, .toast) { animation: fadeIn .2s ease both !important; }
  html[data-style="fluid"] :is(.ih-tile, .hl-card, .tile):hover, html[data-style="fluid"] :is(.btn, .icon-btn, .nav-item, .chip):active { transform: none; }
}
html[data-style="fluid"][data-motion="reduce"] :is(.ih-tile, .hl-card, .tile):hover, html[data-style="fluid"][data-motion="reduce"] :is(.btn, .icon-btn, .nav-item, .chip):active { transform: none; }
/* Theme changes ease instead of flashing. */
html[data-style="fluid"] body { transition: background-color .35s ease; }
/* The style card in My settings */
.ap-mock.fluid { background: #f5f5f7; }
.ap-mock.fluid .m-side { background: rgba(232, 232, 237, .9); border-right: .5px solid rgba(0, 0, 0, .1); }
.ap-mock.fluid .m-main { background: #f5f5f7; }
.ap-mock.fluid .m-card { background: #fff; border-radius: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 4px 12px rgba(0, 0, 0, .06); }
.ap-mock.fluid.dark, .ap-mock.fluid.dark .m-main { background: #000; }
.ap-mock.fluid.dark .m-side { background: rgba(44, 44, 46, .9); border-right-color: rgba(255, 255, 255, .08); }
.ap-mock.fluid.dark .m-card { background: #1c1c1e; box-shadow: none; }

/* Wallpapers behind the glass (light, then dark) */
html { --wallpaper: radial-gradient(60% 70% at 12% 10%, #a8f0e0 0%, transparent 60%), radial-gradient(55% 65% at 88% 12%, #c9b8ff 0%, transparent 60%), radial-gradient(70% 70% at 70% 95%, #9fd2ff 0%, transparent 62%), radial-gradient(50% 60% at 15% 90%, #ffd6ec 0%, transparent 60%), linear-gradient(135deg, #eef3ff, #f7f2ff); }
html[data-wall="ocean"] { --wallpaper: radial-gradient(60% 70% at 10% 15%, #8fe3ff 0%, transparent 60%), radial-gradient(60% 60% at 90% 20%, #7aa7ff 0%, transparent 60%), radial-gradient(70% 70% at 60% 100%, #b3f5ea 0%, transparent 62%), linear-gradient(160deg, #e6f4ff, #eaf0ff); }
html[data-wall="sunset"] { --wallpaper: radial-gradient(60% 70% at 12% 12%, #ffc9a8 0%, transparent 60%), radial-gradient(55% 65% at 90% 15%, #ff9fc6 0%, transparent 60%), radial-gradient(70% 70% at 65% 100%, #c8a6ff 0%, transparent 62%), linear-gradient(135deg, #fff1e8, #fbeefe); }
html[data-wall="meadow"] { --wallpaper: radial-gradient(60% 70% at 12% 12%, #c6f7a6 0%, transparent 60%), radial-gradient(55% 65% at 88% 18%, #8ee6c9 0%, transparent 60%), radial-gradient(70% 70% at 60% 100%, #fff1a6 0%, transparent 62%), linear-gradient(135deg, #f1fbef, #f6fbe9); }
html[data-wall="graphite"] { --wallpaper: radial-gradient(60% 70% at 15% 10%, #e9ecf1 0%, transparent 60%), radial-gradient(60% 70% at 85% 90%, #d3d8e0 0%, transparent 62%), linear-gradient(160deg, #f4f5f7, #e4e7ec); }
html[data-mode="dark"] { --wallpaper: radial-gradient(55% 65% at 12% 10%, #0f5a54 0%, transparent 60%), radial-gradient(55% 65% at 88% 12%, #3d2a86 0%, transparent 60%), radial-gradient(70% 70% at 70% 95%, #12407a 0%, transparent 62%), radial-gradient(45% 55% at 12% 92%, #5a1f4a 0%, transparent 60%), linear-gradient(135deg, #0b0e16, #0e0b18); }
html[data-mode="dark"][data-wall="ocean"] { --wallpaper: radial-gradient(60% 70% at 10% 15%, #0b4a6e 0%, transparent 60%), radial-gradient(60% 60% at 90% 20%, #1c2f7a 0%, transparent 60%), radial-gradient(70% 70% at 60% 100%, #0b5a52 0%, transparent 62%), linear-gradient(160deg, #070d18, #0a0f1f); }
html[data-mode="dark"][data-wall="sunset"] { --wallpaper: radial-gradient(60% 70% at 12% 12%, #6b2d1c 0%, transparent 60%), radial-gradient(55% 65% at 90% 15%, #6a1d45 0%, transparent 60%), radial-gradient(70% 70% at 65% 100%, #3b2475 0%, transparent 62%), linear-gradient(135deg, #140b0b, #120a18); }
html[data-mode="dark"][data-wall="meadow"] { --wallpaper: radial-gradient(60% 70% at 12% 12%, #1f5a1a 0%, transparent 60%), radial-gradient(55% 65% at 88% 18%, #0c4f43 0%, transparent 60%), radial-gradient(70% 70% at 60% 100%, #4a4210 0%, transparent 62%), linear-gradient(135deg, #08100a, #0b1108); }
html[data-mode="dark"][data-wall="graphite"] { --wallpaper: radial-gradient(60% 70% at 15% 10%, #2a2e36 0%, transparent 60%), radial-gradient(60% 70% at 85% 90%, #1d2027 0%, transparent 62%), linear-gradient(160deg, #111318, #0b0c0f); }

/* Text size and motion */
html[data-text="s"] body { zoom: .92; }
html[data-text="l"] body { zoom: 1.1; }
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }

/* ---------- My settings page ---------- */
.me-page { max-width: 980px; }
.ap-sec { padding: 22px 24px; margin-bottom: 16px; }
.ap-sec > h3 { font-size: 15px; margin-bottom: 4px; }
.ap-sec > p.muted { font-size: 13px; margin-bottom: 16px; }
.ap-row { display: grid; grid-template-columns: 170px 1fr; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.ap-row > b { font-size: 13.5px; }
.ap-row > b small { display: block; font-weight: 500; color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.ap-styles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ap-style { text-align: left; padding: 10px; border-radius: 18px; border: 1.5px solid var(--line-2); background: var(--surface); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.ap-style:hover { transform: translateY(-2px); }
.ap-style.on { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.ap-style > b { display: block; font-size: 13.5px; margin: 10px 4px 0; }
.ap-style > small { display: block; color: var(--ink-3); font-size: 12px; margin: 2px 4px 2px; }
.ap-mock { position: relative; height: 128px; border-radius: 12px; overflow: hidden; display: grid; grid-template-columns: 30% 1fr; }
.ap-mock i { display: block; }
.ap-mock .m-side { background: #121419; }
.ap-mock .m-main { padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #f7f7f4; }
.ap-mock .m-card { height: 34px; border-radius: 8px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.ap-mock .m-card.s { height: 22px; width: 70%; }
.ap-mock.dark .m-main { background: #0d0e11; } .ap-mock.dark .m-card { background: #1b1c20; box-shadow: none; }
.ap-mock.glass { background: var(--mock-wall); }
.ap-mock.glass .m-side { background: rgba(255, 255, 255, .35); backdrop-filter: blur(12px); border-right: 1px solid rgba(255, 255, 255, .6); }
.ap-mock.glass .m-main { background: transparent; }
.ap-mock.glass .m-card { background: linear-gradient(155deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .3)); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 #fff, 0 6px 16px -8px rgba(30, 35, 60, .35); border: 1px solid rgba(255, 255, 255, .6); }
.ap-mock.glass.dark .m-side { background: rgba(10, 12, 18, .45); border-right-color: rgba(255, 255, 255, .08); }
.ap-mock.glass.dark .m-card { background: linear-gradient(155deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .1); }
.ap-walls, .ap-accents { display: flex; flex-wrap: wrap; gap: 10px; }
.ap-wall { width: 64px; height: 44px; border-radius: 12px; border: 2px solid transparent; cursor: pointer; background: var(--w); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); position: relative; }
.ap-wall.on { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.ap-wall span { position: absolute; left: 0; right: 0; bottom: -20px; text-align: center; font-size: 11px; color: var(--ink-3); }
.ap-walls { padding-bottom: 18px; }
.ap-acc { width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); display: grid; place-items: center; color: #fff; }
.ap-acc.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c); }
.ap-acc.team { width: auto; padding: 0 12px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.ap-note { margin-top: 10px; font-size: 12px; color: var(--ink-3); }
@media (max-width: 640px) {
  .ap-row { grid-template-columns: 1fr; gap: 8px; }
  .ap-styles { grid-template-columns: 1fr; }
}



/* The tour card stays readable over anything: solid in Classic, thick frosted glass in Liquid Glass. */
.tour-card { backdrop-filter: blur(28px) saturate(1.6); -webkit-backdrop-filter: blur(28px) saturate(1.6); }
html[data-style="glass"] .tour-card { background: rgba(255, 255, 255, .9); }
html[data-mode="dark"] .tour-card { background: rgba(28, 30, 36, .94); }
html[data-mode="dark"] .tour-hole { box-shadow: 0 0 0 4px var(--brand), 0 0 0 9999px rgba(0, 0, 0, .62); }

/* ---------- Error log, audit trail and signed-in devices (admin.js) ---------- */
.ops-page { max-width: 1180px; }
.ops-hero { background: radial-gradient(120% 140% at 100% 0%, #5b2a3a 0%, rgba(91, 42, 58, 0) 55%), linear-gradient(135deg, #1b1418 0%, #261a22 60%, #2d1e28 100%); }
.ops-hero .eyebrow { color: #f2b8c6; }
.ops-hero p { color: #dcc5cd; }
.ops-hero .ct-k small { color: #d9b3bf; }
.ops-hero .ct-k span { color: #dcc5cd; }
.ops-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; }
.ops-bar .seg-mini { flex-wrap: wrap; }
.ops-bar select, .ops-filters select { width: auto; min-width: 150px; }
.ops-find { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-3); }
.ops-find input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--ink); outline: none; }
.ops-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px; margin-bottom: 10px; }
.ops-list { padding: 6px; }
.ops-err { display: grid; grid-template-columns: 36px minmax(0, 1fr) 90px 110px 150px; gap: 12px; align-items: center; width: 100%; text-align: left; border: 0; background: none; font: inherit; color: inherit;
  padding: 12px 10px; border-radius: 12px; cursor: pointer; transition: background .12s; }
.ops-err + .ops-err { border-top: 1px solid var(--line); border-radius: 0; }
.ops-err:hover { background: var(--hover); border-radius: 12px; }
.ops-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--hover); color: var(--ink-2); flex: none; }
.ops-err.s-new .ops-ic { background: var(--danger-soft); color: var(--danger); }
.ops-err.s-fixing .ops-ic { background: var(--warn-soft); color: var(--warn); }
.ops-err.s-fixed .ops-ic { background: var(--ok-soft); color: var(--ok); }
.ops-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ops-main b { font-size: 14px; font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ops-main small { font-size: 12px; color: var(--ink-3); line-height: 1.4; overflow-wrap: anywhere; }
.ops-main code, .ops-ref code, .ops-facts code, .ops-trail code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }
.ops-who, .ops-when { display: flex; flex-direction: column; gap: 1px; }
.ops-who b, .ops-when b { font-size: 13px; font-weight: 600; }
.ops-who small, .ops-when small { font-size: 11.5px; color: var(--ink-3); }
.ops-ref { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ops-ref code { color: var(--ink-2); }
.ops-st { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; font-style: normal; white-space: nowrap; background: var(--hover); color: var(--ink-2); vertical-align: middle; }
.ops-st.bad { background: var(--danger-soft); color: var(--danger); }
.ops-st.warn { background: var(--warn-soft); color: var(--warn); }
.ops-st.ok { background: var(--ok-soft); color: var(--ok); }
.ops-st.mute { background: var(--hover); color: var(--ink-3); }
.ops-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 16px; text-align: center; color: var(--ink-3); }
.ops-empty svg.i { width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); }
.ops-empty b { color: var(--ink); font-size: 15px; }
.ops-foot { margin-top: 12px; }
.ops-modal { max-width: 860px; }
.ops-modal .modal-h { align-items: flex-start; }
.ops-modal .eyebrow { display: flex; gap: 6px; align-items: center; }
.ops-msg { font-size: 18px; line-height: 1.35; margin-top: 4px; overflow-wrap: anywhere; }
.ops-status { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ops-status .btn { margin-left: auto; }
.ops-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 14px 0 4px; }
.ops-fact { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); min-width: 0; }
.ops-fact small { display: block; font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.ops-fact b { display: block; font-size: 13.5px; font-weight: 600; margin-top: 2px; overflow-wrap: anywhere; }
.ops-h { display: flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 650; margin: 18px 0 8px; }
.ops-people { display: flex; gap: 6px; flex-wrap: wrap; }
.ops-person { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13px; }
.ops-person em { font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.ops-trail { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--line-2); }
.ops-trail li { position: relative; padding: 4px 0 4px 14px; font-size: 13px; overflow-wrap: anywhere; }
.ops-trail li::before { content: ''; position: absolute; left: -5px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink-3); }
.ops-trail li:last-child::before { border-color: var(--danger); background: var(--danger); }
.ops-trail code { color: var(--ink-3); margin-right: 8px; }
.ops-recent td { font-size: 12.5px; }
.ops-stack { margin-top: 16px; }
.ops-stack summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.ops-stack pre { margin-top: 8px; padding: 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font-size: 11.5px; line-height: 1.5; overflow: auto; max-height: 260px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ops-devgrp { padding: 6px 6px 8px; margin-bottom: 10px; }
.ops-devh { display: flex; align-items: center; gap: 10px; padding: 10px; }
.ops-devh > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ops-devh b { font-size: 14.5px; font-weight: 650; }
.ops-devh small { font-size: 12px; color: var(--ink-3); }
.ops-dev { display: grid; grid-template-columns: 36px minmax(0, 1fr) 130px 96px; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; }
.ops-dev + .ops-dev { border-top: 1px solid var(--line); border-radius: 0; }
.ops-dev.cur .ops-ic { background: var(--ok-soft); color: var(--ok); }
.ops-dev.ended { opacity: .7; }
.ops-dev .btn { justify-self: end; }
.ops-ended summary { cursor: pointer; padding: 8px 10px; font-size: 12.5px; color: var(--ink-3); }
.ops-me .ops-dev { padding-left: 0; padding-right: 0; }
@media (max-width: 760px) {
  .ops-err { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .ops-err .ops-who, .ops-err .ops-when { display: none; }
  .ops-err .ops-ref { grid-column: 3; flex-direction: column; align-items: flex-end; }
  .ops-dev { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .ops-dev .ops-when { display: none; }
  .ops-status .btn { margin-left: 0; }
  .ops-bar select, .ops-filters select { flex: 1; }
}
.ops-devsum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.ops-k { padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ops-k small { font-size: 11.5px; font-weight: 650; color: var(--ink-3); }
.ops-k b { font-size: 26px; font-weight: 650; letter-spacing: -.03em; }
.ops-k b.sm { font-size: 16px; letter-spacing: 0; line-height: 1.35; margin: 4px 0 2px; overflow-wrap: anywhere; }
.ops-k span { font-size: 12px; color: var(--ink-3); }
.ops-tip { display: flex; gap: 8px; align-items: flex-start; margin-top: 4px; }
@media (max-width: 760px) {
  .ops-devsum { grid-template-columns: 1fr 1fr; }
  .ops-devsum .ops-k:nth-child(2) { grid-column: 1 / -1; order: -1; }
}

/* ---------- Sign in / create account: a full page (app.js authPage) ---------- */
.si { height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; display: grid; grid-auto-rows: minmax(100%, max-content); grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); background: var(--bg); }
.si-side { position: relative; overflow: hidden; color: #eef5f1; isolation: isolate;
  background: radial-gradient(110% 90% at 0% 0%, color-mix(in srgb, var(--brand) 55%, #0b1512) 0%, transparent 60%),
    radial-gradient(90% 80% at 100% 100%, color-mix(in srgb, var(--brand) 35%, #0b1512) 0%, transparent 60%), linear-gradient(160deg, #0b1512 0%, #0f1f1a 55%, #0a1411 100%); }
.si-glow { position: absolute; width: 520px; height: 520px; right: -140px; top: 18%; border-radius: 50%; z-index: -1; filter: blur(80px); opacity: .5;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 70%, #fff) 0%, transparent 65%); animation: siGlow 14s ease-in-out infinite alternate; }
@keyframes siGlow { from { transform: translate(0, 0) scale(1); } to { transform: translate(-80px, 60px) scale(1.15); } }
.si-grid { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: radial-gradient(120% 90% at 30% 20%, #000 20%, transparent 75%); }
.si-side-in { position: relative; min-height: 100dvh; display: flex; flex-direction: column; gap: 26px; padding: 40px clamp(28px, 5vw, 72px) 32px; max-width: 720px; }
.si-side .brand { color: #fff; }
.si-side .brand small { color: rgba(255, 255, 255, .6); }
.si-side .brand .mark { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.si-pitch { margin-top: auto; }
.si-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; letter-spacing: .04em; color: color-mix(in srgb, var(--brand) 40%, #fff); padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); }
.si-pitch h2 { font-size: clamp(28px, 2.7vw, 40px); line-height: 1.08; letter-spacing: -.035em; font-weight: 650; color: #fff; margin: 18px 0 12px; max-width: 560px; }
.si-pitch p { font-size: 16px; color: rgba(238, 245, 241, .72); max-width: 480px; }
.si-feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; max-width: 600px; }
.si-feats li { display: flex; gap: 12px; align-items: flex-start; }
.si-fi { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .14); }
.si-feats b { display: block; font-size: 14.5px; font-weight: 600; color: #fff; }
.si-feats small { display: block; font-size: 13px; line-height: 1.45; color: rgba(238, 245, 241, .66); margin-top: 2px; }
.si-preview { position: relative; height: 120px; max-width: 560px; flex: none; }
.si-card { position: absolute; display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; min-width: 270px;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 18px 40px rgba(0, 0, 0, .28); animation: siFloat 7s ease-in-out infinite; }
.si-card b { display: block; font-size: 13.5px; font-weight: 600; color: #fff; }
.si-card small { display: block; font-size: 12px; color: rgba(238, 245, 241, .65); }
.si-card > div { display: block; }
.si-card.si-c1 { left: 0; top: 0; }
.si-card.si-c2 { left: 30%; top: 62px; animation-delay: -2.4s; }
.si-card.si-c3 { right: 0; top: 4px; animation-delay: -4.6s; min-width: 0; }
@keyframes siFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.si-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 0 4px rgba(255, 255, 255, .08); }
.si-dot.g { background: #4ade9b; } .si-dot.b { background: #7cc4ff; }
.si-ring { width: 26px; height: 26px; border-radius: 50%; flex: none; background: conic-gradient(#4ade9b calc(var(--p, 90) * 1%), rgba(255, 255, 255, .15) 0); -webkit-mask: radial-gradient(circle, transparent 52%, #000 54%); mask: radial-gradient(circle, transparent 52%, #000 54%); }
.si-ring i { display: none; }
.si-trust { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(238, 245, 241, .55); }

.si-main { background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px 24px; min-height: 100dvh; }
.si-panel { width: 100%; max-width: 420px; margin: auto 0; }
.si-panel.wide { max-width: 540px; }
.si-mbrand { display: none; margin-bottom: 26px; }
.si-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 30px; }
.si-tabs button { position: relative; z-index: 1; height: 40px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-3); cursor: pointer; border-radius: 10px; transition: color .2s; }
.si-tabs button.on { color: var(--ink); }
.si-tabs i { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.si-tabs button.on:last-of-type ~ i { transform: translateX(100%); }
.si-head h1 { font-size: 32px; letter-spacing: -.03em; line-height: 1.1; margin: 0 0 10px; }
.si-head p { color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.si-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; padding: 5px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); margin-bottom: 14px; }
.si-msg { margin-top: 18px; display: flex; gap: 8px; align-items: flex-start; }
.si-gbtn { margin: 28px 0 8px; min-height: 44px; display: flex; justify-content: center; }
.si-points { list-style: none; margin: 26px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.si-points li { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--ink-2); }
.si-points svg.i { color: var(--brand); flex: none; }
.si-switch { margin-top: 26px; font-size: 14px; color: var(--ink-3); text-align: center; }
.si-switch a, .si-note a { color: var(--brand); font-weight: 600; }
.si-role { margin-top: 24px; }
.si-role > span { display: block; font-size: 12.5px; font-weight: 650; color: var(--ink-3); margin-bottom: 8px; }
.si-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.si-roles button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px; border-radius: 14px; border: 1.5px solid var(--line-2); background: var(--surface); font: inherit; color: var(--ink); text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.si-roles button:hover { border-color: var(--ink-3); }
.si-roles button svg.i { color: var(--ink-3); margin-bottom: 6px; }
.si-roles button b { font-size: 14px; font-weight: 600; }
.si-roles button small { font-size: 12px; color: var(--ink-3); }
.si-roles button.on { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.si-roles button.on svg.i { color: var(--brand); }
.si-steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.si-steps li { display: flex; gap: 8px; align-items: flex-start; padding: 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); min-width: 0; }
.si-steps li > span { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; background: var(--hover); color: var(--ink-3); }
.si-steps li b { display: block; font-size: 12px; font-weight: 650; line-height: 1.3; }
.si-steps li small { display: block; font-size: 11px; color: var(--ink-3); line-height: 1.3; margin-top: 1px; }
.si-steps li.on { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); background: var(--brand-soft); }
.si-steps li.on > span { background: var(--brand); color: #fff; }
.si-steps li.done > span { background: var(--ok); color: #fff; }
.si-panel > .si-steps { margin: 0 0 26px; }
.si-fine { font-size: 12.5px; color: var(--ink-3); text-align: center; line-height: 1.5; margin-top: 8px; }
.si-personas { margin-top: 22px; display: grid; gap: 8px; }
.si-personas .persona { margin: 0; }
.si-note { margin-top: 20px; font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.si-form { margin-top: 24px; }
.si-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.si-form .si-actions { margin-top: 6px; }
.si-go svg.i { margin: 0 -2px 0 2px; transform: rotate(-90deg); }
.si-wait { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--brand-soft); margin-bottom: 18px; }
.si-wait span { width: 22px; height: 22px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--brand) 25%, transparent); border-top-color: var(--brand); animation: spin 1s linear infinite; }
.si-foot { display: flex; gap: 8px; font-size: 12.5px; color: var(--ink-3); margin-top: 28px; }
.si-foot a { color: var(--ink-3); }
.si-foot a:hover { color: var(--ink); }
@media (max-width: 980px) {
  .si { grid-template-columns: 1fr; grid-auto-rows: max-content; }
  .si-side { order: 2; }
  .si-side-in { min-height: 0; padding: 36px 24px 40px; gap: 24px; }
  .si-feats { grid-template-columns: 1fr; }
  .si-side .brand, .si-preview { display: none; }
  .si-pitch { margin-top: 0; }
  .si-pitch h2 { font-size: 26px; }
  .si-trust { margin-top: 0; }
  .si-main { min-height: auto; padding: 28px 20px 32px; }
  .si-mbrand { display: block; }
  .si-panel { margin: 0; }
}
@media (max-width: 420px) {
  .si-steps { grid-template-columns: 1fr; }
  .si-steps li small { display: inline; margin-left: 4px; }
  .si-head h1 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .si-glow, .si-card { animation: none; } }
html[data-motion="reduce"] .si-glow, html[data-motion="reduce"] .si-card { animation: none; }

/* ---------- Client and team health (health.js) ---------- */
.hl-page { max-width: 1240px; }
.hl-ctl { display: flex; gap: 8px; align-items: center; }
.hl-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.hl-find { max-width: 320px; }
.hl-sums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.hl-sum { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1.5px solid var(--line); box-shadow: var(--shadow-sm); font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.hl-sum:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.hl-sum-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none; }
.hl-sum > div { display: flex; flex-direction: column; min-width: 0; }
.hl-sum b { font-size: 28px; font-weight: 650; letter-spacing: -.03em; line-height: 1.05; }
.hl-sum small { font-size: 13.5px; font-weight: 650; }
.hl-sum span { font-size: 12px; color: var(--ink-3); }
.hl-sum.s-critical .hl-sum-ic { background: var(--danger-soft); color: var(--danger); }
.hl-sum.s-watch .hl-sum-ic { background: var(--warn-soft); color: var(--warn); }
.hl-sum.s-good .hl-sum-ic { background: var(--ok-soft); color: var(--ok); }
.hl-sum.s-critical b { color: var(--danger); }
.hl-sum.on.s-critical { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.hl-sum.on.s-watch { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.hl-sum.on.s-good { border-color: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.hl-filtered { margin: -4px 0 10px; }
.hl-filtered a { color: var(--brand); }
.hl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 470px), 1fr)); gap: 12px; }
.hl-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; text-align: left; font: inherit; color: inherit; cursor: pointer; border: 1px solid var(--line); position: relative; overflow: hidden; transition: box-shadow .15s, transform .15s, border-color .15s; }
.hl-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ok); }
.hl-card.s-critical::before { background: var(--danger); }
.hl-card.s-watch::before { background: var(--warn); }
.hl-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); border-color: var(--line-2); }
.hl-ch { display: flex; align-items: center; gap: 10px; }
.hl-ch .pchip { flex: 1; min-width: 0; font-size: 15px; font-weight: 650; }
.hl-ring { position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center; }
.hl-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.hl-ring circle { fill: none; stroke: var(--hover); stroke-width: 4; }
.hl-ring circle.fg { stroke: var(--ok); stroke-linecap: round; }
.hl-ring.s-critical circle.fg { stroke: var(--danger); }
.hl-ring.s-watch circle.fg { stroke: var(--warn); }
.hl-ring b { font-size: 12px; font-weight: 700; }
.hl-ms { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.hl-m { padding: 8px 9px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hl-m small { font-size: 10.5px; font-weight: 650; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-m b { font-size: 15px; font-weight: 650; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.hl-m > span { font-size: 10.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-m .red { color: var(--danger); }
.hl-d { font-style: normal; font-size: 10.5px; font-weight: 700; }
.hl-d.up { color: var(--ok); } .hl-d.down { color: var(--danger); } .hl-d.flat { color: var(--ink-3); }
.hl-kw { display: inline-flex; gap: 6px; }
.hl-kw i { font-style: normal; display: inline-flex; align-items: center; }
.hl-kw i.up { color: var(--ok); } .hl-kw i.down { color: var(--danger); }
.hl-why { display: flex; flex-direction: column; gap: 4px; }
.hl-why span { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.35; }
.hl-why span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--ink-3); }
.hl-why .l-critical::before { background: var(--danger); } .hl-why .l-watch::before { background: var(--warn); } .hl-why .l-good::before { background: var(--ok); }
.hl-why .l-none { color: var(--ink-3); }
.hl-cf { display: flex; align-items: center; gap: 2px; margin-top: auto; }
.hl-cf .avatar { box-shadow: 0 0 0 2px var(--surface); margin-right: -4px; }
.hl-cf em { font-style: normal; font-size: 11px; color: var(--ink-3); margin-left: 8px; }
.hl-cf > .hl-go { margin-left: auto; color: var(--ink-3); transform: rotate(-90deg); display: inline-flex; }
.hl-team { padding: 4px; }
.hl-p { display: grid; grid-template-columns: 34px minmax(140px, 1fr) auto minmax(0, 2.2fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 6px; align-items: center; padding: 12px; border-radius: 12px; }
.hl-p + .hl-p { border-top: 1px solid var(--line); border-radius: 0; }
.hl-pn { display: flex; flex-direction: column; min-width: 0; }
.hl-pn b { font-size: 14px; font-weight: 600; } .hl-pn small { font-size: 12px; color: var(--ink-3); }
.hl-pm { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.hl-p .hl-why { grid-column: 2 / -1; flex-direction: row; flex-wrap: wrap; gap: 4px 14px; }
.hl-foot { margin-top: 12px; }
.hl-mh { display: flex; align-items: center; gap: 10px; }
.hl-reasons { display: grid; gap: 6px; }
.hl-reasons > div { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13.5px; }
.hl-reasons i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.hl-reasons .l-critical { background: var(--danger-soft); border-color: transparent; } .hl-reasons .l-critical i { background: var(--danger); }
.hl-reasons .l-watch { background: var(--warn-soft); border-color: transparent; } .hl-reasons .l-watch i { background: var(--warn); }
.hl-reasons .l-good { background: var(--ok-soft); border-color: transparent; } .hl-reasons .l-good i { background: var(--ok); }
.hl-tile span { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.hl-tile b .hl-d { margin-left: 6px; }
.hl-tile .red { color: var(--danger); }
.hl-links { flex-wrap: wrap; }
.hl-dash { margin-bottom: 18px; }
.hl-dsum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hl-dsum a { display: flex; align-items: baseline; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.hl-dsum a:hover { border-color: var(--line-2); }
.hl-dsum b { font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
.hl-dsum span { font-size: 12.5px; color: var(--ink-2); }
.hl-dsum .s-critical b { color: var(--danger); } .hl-dsum .s-watch b { color: var(--warn); } .hl-dsum .s-good b { color: var(--ok); }
.hl-dlist { margin-top: 8px; display: grid; }
.hl-drow { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 10px; }
.hl-drow:hover { background: var(--hover); }
.hl-drow > i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--warn); }
.hl-drow.s-critical > i { background: var(--danger); }
.hl-drow b { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.hl-drow span { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-drow svg.i { transform: rotate(-90deg); color: var(--ink-3); }
@media (max-width: 760px) {
  .hl-sums { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .hl-sum { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; }
  .hl-sum-ic { width: 32px; height: 32px; }
  .hl-sum b { font-size: 22px; } .hl-sum span { display: none; } .hl-sum small { font-size: 11.5px; }
  .hl-grid { grid-template-columns: 1fr; }
  .hl-ms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hl-p { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .hl-pm { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hl-p .hl-why { grid-column: 1 / -1; }
  .hl-find { max-width: none; flex: 1; }
  .hl-dsum span { font-size: 11.5px; }
  .hl-dsum a { flex-direction: column; gap: 0; }
}

/* ---------- Integrations hub (app.js drawIntegrations) ---------- */
.ih-page { max-width: 1180px; }
.ih { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: start; }
.ih-rail { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.ih-rail a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; font-size: 13.5px; font-weight: 550; color: var(--ink-2); }
.ih-rail a:hover { background: var(--hover); color: var(--ink); }
.ih-rail a.on { background: var(--brand-soft); color: var(--brand); }
.ih-rail a span { flex: 1; }
.ih-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ink-3); opacity: .5; }
.ih-dot.ok { background: var(--ok); opacity: 1; } .ih-dot.warn { background: var(--warn); opacity: 1; } .ih-dot.bad { background: var(--danger); opacity: 1; }
.ih-body { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ih-body > .card, .ih-body .ig-grid { margin: 0; }
.ih-sh { display: flex; gap: 12px; align-items: center; }
.ih-sh h2 { font-size: 20px; letter-spacing: -.02em; }
.ih-sh p { font-size: 13.5px; color: var(--ink-3); }
.ih-ti { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--brand-soft); color: var(--brand); }
.ih-hero { display: flex; gap: 20px; align-items: center; }
.ih-hero h3 { font-size: 18px; margin-bottom: 4px; }
.ih-hero p { color: var(--ink-2); font-size: 14px; max-width: 640px; }
.ih-ring { width: 74px; height: 74px; flex: none; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--ok) calc(var(--p) * 1%), var(--hover) 0); position: relative; }
.ih-ring::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--surface); }
.ih-ring b { position: relative; font-size: 17px; font-weight: 700; }
.ih-h { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 4px 2px -6px; }
.ih-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ih-tile { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: border-color .15s, transform .15s, box-shadow .15s; }
.ih-tile:hover { border-color: var(--line-2); transform: translateY(-1px); box-shadow: var(--shadow); }
.ih-tile > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ih-tile b { font-size: 14px; font-weight: 650; }
.ih-tile small { font-size: 12px; color: var(--ink-3); line-height: 1.35; }
.ih-where h3 { display: flex; gap: 8px; align-items: center; font-size: 15px; margin-bottom: 12px; }
.ih-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ih-cols > div { padding: 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.ih-cols b { display: flex; gap: 6px; align-items: center; font-size: 13.5px; }
.ih-cols ul { margin: 8px 0; padding-left: 18px; font-size: 13.5px; color: var(--ink-2); display: grid; gap: 3px; }
.ih-cols small { font-size: 12px; color: var(--ink-3); line-height: 1.45; }
.ih-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.ih-step { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.ih-step > span { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--brand); color: #fff; }
.ih-step b { display: block; font-size: 13.5px; font-weight: 650; }
.ih-step small { display: block; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; margin-top: 2px; }
.ih-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ih-chips span { display: inline-flex; gap: 5px; align-items: center; padding: 5px 10px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-size: 12.5px; font-weight: 600; }
.ih-note { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--ink-2); }
.ih-fsum { margin: -4px 2px -6px; }
.ih-flist { padding: 4px; }
.ih-frow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px 12px; align-items: center; padding: 14px; border-radius: 12px; }
.ih-frow .ih-furl { grid-column: 1 / -1; grid-row: 2; }
.ih-frow + .ih-frow { border-top: 1px solid var(--line); border-radius: 0; }
.ih-fn { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ih-fn .pchip { font-weight: 600; }
.ih-fn small { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ih-furl { display: flex; gap: 6px; min-width: 0; }
.ih-furl input { flex: 1; min-width: 0; font-size: 12px; }
.ih-fact { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ih-ctabs { margin: 14px 0 12px; }
.ih-ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13.5px; line-height: 1.5; }
.ih-cpane pre { margin: 6px 0 8px; }
@media (max-width: 900px) {
  .ih { grid-template-columns: 1fr; gap: 14px; }
  .ih-rail { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .ih-rail::-webkit-scrollbar { display: none; }
  .ih-rail a { flex: none; white-space: nowrap; }
  .ih-cols { grid-template-columns: 1fr; }
  .ih-frow { grid-template-columns: minmax(0, 1fr) auto; }
  .ih-frow .ih-fact { grid-column: 1 / -1; grid-row: 3; justify-content: flex-start; }
  .ih-hero { flex-direction: column; align-items: flex-start; }
}