/* Собрано build_static.py (esbuild) из static/src и static/css — руками не править, правки не переживут следующую сборку. */
/* server/static/css/01-base.css */
:root {
  color-scheme: light;
  --page: #f4f5f7;
  --surface: #ffffff;
  --sunken: #f8f8fb;
  --tint: #eff0f7;
  --tint-line: #e1e3ee;
  --ctl-h: 34px;
  --ink: #171923;
  --ink-2: #525665;
  --muted: #9094a1;
  --muted-2: #a3a3b2;
  --hairline: #eceef2;
  --border: #e8e9ee;
  --accent: #5b5cf0;
  --accent-ink: #4f50dc;
  --accent-soft: #eeeeff;
  --accent-rgb:
    91,
    92,
    240;
  --good: #18a34a;
  --good-text: #156f33;
  --good-soft: #e7f6ec;
  --warn: #f2b01e;
  --serious: #e07a2c;
  --serious-text: #b45309;
  --serious-soft: #fdf1e3;
  --crit: #dc3b3b;
  --crit-text: #b42318;
  --crit-soft: #fdecec;
  --ai: #6d3ff0;
  --ai-soft: #f0ebfd;
  --mark-crit-bg: rgba(220,59,59,0.13);
  --mark-warn-bg: rgba(224,122,44,0.16);
  --mark-good-bg: rgba(24,163,74,0.13);
  --mark-num-bg: rgba(var(--accent-rgb),0.11);
  --c1: var(--accent);
  --c2: #12a594;
  --c3: #7a5cf5;
  --c4: #ef8f3c;
  --c5: #e0568a;
  --c6: #35bdd8;
  --font:
    Inter,
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  --font-text:
    "Lora",
    Georgia,
    "Times New Roman",
    serif;
  --font-mono:
    ui-monospace,
    Consolas,
    "SF Mono",
    monospace;
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 16px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(23, 25, 35, .04), 0 2px 10px rgba(23, 25, 35, .05);
  --shadow-2: 0 1px 2px rgba(23, 25, 35, .04), 0 12px 34px rgba(23, 25, 35, .06);
  --side-w: 224px;
  --page-grad:
    radial-gradient(
      60% 55% at 0% 0%,
      #f8d9e4 0%,
      transparent 75%),
    radial-gradient(
      55% 60% at 100% 0%,
      #dcdffb 0%,
      transparent 75%),
    radial-gradient(
      60% 60% at 100% 100%,
      #d6f1e5 0%,
      transparent 75%),
    radial-gradient(
      50% 50% at 0% 100%,
      #e6e9fb 0%,
      transparent 75%);
  --logo-mark: url(data:image/webp;base64,UklGRjgNAABXRUJQVlA4WAoAAAAQAAAAXwAAXwAAQUxQSIYFAAAB8IRtmyFp27btgcu2bdvXNcNt27Zt27Zt27Zt+77sioj9yH2QmZGRWT26RhExAbh2ovM+hOC924hciMFh3MfgNhQXAvpb73fM6eecedy+WwJACBuGDwC2Ou1Bb/nev67uJOnqv3/1pTfbFUDYELwHtr352/6qQWOhqX/Bu88DvF87H4DjXvp3SUypkNZnySlL+vbNgbBeLgBnvj9LORebzFykTx6B4NYoAIe/u5MlWuOSdfm94NzaRGzxtCvFbHMm06udc+vhPM7+qbpso2xDJn0oOrcOAXh8UaLNZGYrfcQHt7yAnT4qFluCrfQGxMVFHPlrJZqRY3Ou9BDEhUWcdYGSLZa5nI6wqIjzrlC2BWf9bivvFhRx/qrLtuikFyEsJ+Dsq7tiy2YpxyAsJeCIC7tiS8/6IvxCvNvpd8q2/KzrISzCBfc5JVuLH3i/iIjnKdlaFt0IYQEBN1K29cz6Jvx83u3xfyvTOA9HrOgchNkCPqps65r0ofkC7qxka0u75gD4ebzf5X9W1seSnoY4T8CblGyNi/6yOdwcAad1xda66LouzOHd15V7rOGykt6FOQJupmxmRhrHjLOxit2lu8K185v8rBuYn3UTk+7uYrOI2yrbumd9Cr6ZDz/uMteN3ZV7wzcKuLGytegGG3T9BpZ0HxcbeXxF2Vq26oYbZH0Kvk3AiaT1OaEbndK1oy7ZBa7RG5TMjFbf1TbqplnWrRFbOOxyaUcjrZktJumdCC0i7q1sfdZZRVfX1U4r+vsWcA28+9YQ14pmZkXnIEzzOJq0lt3CBld6JuK0iMcrrYc1zPou3DTnvq9sZjRy7dhdsz/8FI+jC9nEKmziLJZ1e8QpEY9W6jVsxJmS3ogwxeOLyrZhFP1uE7g6h90v62hmbGAjNnnImh8HXxdxayVr37OGsyTdH3HKG7o5Fs6B9yDUIfxSZSmcrV/0+03gajwOSbbBliPhayJur1RBmhnXi0l3Rax7RZ31uFaW9No6h++pVDQlm9CMkziS9V24CoddLhVnspa0qayiLtgBbizgbBUzzrGG7E5AGIu4r5KZGWdij/NwjEm3Qqx55TJmJQfGyZUeX+PxeeVeW06jmbEdK15f4eB/rcJm4+RI40mW9WmEih0uEG0+qyRpxgnDtPGi78GNeOx39QJYZUZyrqxfOlQczm6+eTnAMZqx6Peh5ujOZuRc7HHEjD3Sin5XdXDqOAPnotEGBgeMzPoJxh12u1SLI+uMQzTSaEYmfRKhYpM/qrSbndYbZt8GV93zEEfg8Snl5dA4wKFBsseqrJvXRDxeaUnDNTQbMJI2zO7SXeHGAk7tuBwzDgyStNoKpu79CKh04SddXkQpOeVSzIzs0azORsiic+si7qUFlFQ0zFQGSGvIXtK3nUetc5v/tiszlSzpop998WOf+eH/JOXSM+MQR0gzY0k6B6EKAddVMs7ALP35pefuiv6OZz/jt1KmjZND5NBKr0HAxICXaGXtS6df3nVrAPDBA8Dmt/+5rIzZiNFI2kq/2Cq4KS6ET2nVLOmaJ2wBxODQdyECmz/hGiUz44CNkuRK/z8EHpOd2/KTyqVJKfrhyUB0qHUBOPlnSuRAJcmVLjgVAQ0dwqulVCaVLL1sC0SHqS5im3dKqwlkLvrFUQiodkNwDrf8vVRS4QhzovST84GAlgG470VSyhxhTia9dlsENHYB2zzs15LEnHMuJknfvesmCA5tncf+r7lMEnNKKVNS+dg5gEf7AGx6nZf/6BIN2n+/8swzAAS0D8B+D/vC/zV80deffCwQHOZ0EQB2O/kGt7vDLc87ensACA5z+gBgx5Nvevf73uPmp+4CwHvM7UJEpY8Bs/voMe6ixzJdCDHG4B0W6nyIMYbgcK1rVlA4IIwHAABwJgCdASpgAGAAPi0UhkKhoQ1WfoAMAWJbADFEQz/ADobvj9Z/KX2d6k/a/wB+2P+kzGLmj/J/mL/s+AA/Tv/R9S/zC/rn+1/YY9AD9busU/a/2AP2F9LP/gf5P4G/20/bP4A/5d/Yf/RmgH4gfqr4A4BJ30NdT+jd4hqjqxfhHsAfjz1Uv5X/yeU36G9gD+Y/0n/sdgT0Lv1wWVAIuKBdYhJYCu/arZgX1ThrwYgBb793b/0lcIskq7cCwTt9CoM9JI5IdCpy/ND+d54D3IC2KnPxvH5euq2DFWOzmxL8Sq9uaMM0H10pnATWK7VbZgPhsjIFCJpDXGk/D3mTpXqiW16nE27J2HtmikwDGyuURSJRpJLS7z+FjLx0rYbKgx6EUoNe31vae1mpERMFwKw095I+vGWYC5bf9wAAAP7/YBgE7NNdUEXGNa+sP2Tz4KwRqldi+VEFWUFeKLoPxOjpKXvjBg+7nnsA6PSZ4z517QJX+5Kv2hq0Qv00/PeSO+OAVoFOUaNrXGbOtBgQuo5T1KpvgYa4ORn80eBUmWCRN1H86O6tNDp0rzPMGedmItU7wdBdTy+81EH1QPoXeJf8ztQ/dqWz2X7oJtQTjwr1IunumIemKPbL19Ydb2zyhHEcHrBnQCFECQDEWWxp41H0CjE59y7H8Yvx2/ip9w129+32f/7U7Wkg+cD/TQbyYw0yI3QPzknsVur8+14ico5GTKuyjSPeew85eL2o2uOvf63+IB6YT7LTXWFZgir+Y1S/YQFhJq7u+EsZ+N1+XQciap0yEEEAOfaAA5JUais0KAHV3TxujN6lLWL3UKC7acr/ZybBw63r1OP9CXljbUstG8sLF6GfHqJ6gFBrc37CTNwgoKn77qj3pTjgmHbKuwtoDrBgQkjPjVwb4jFiDPB0x3MEUefFuNjSZbNxDtZzAqijN7jQ3Kr00Q9vkQvG0jXeA1rzk9mWrGdD6MZLvrza/MvbiGEM+1Xa+AM0lotabf1Psx5dB+fQ2+CpKTrrjPQ9L96JSHYxSXdl7YpuFDy2QCPNcBpEwxr4mvqmfJuqhb3FZZpWTj4GX2Io9Qtg26JxYbj/yfU8mdDLOwPKaOkofX9pWue1W1IMnWKb09rX98S8Tscb21w7K1/zTNuKdgA+5COjDI/fFi7ER42ICsoQZR8V1MfWGo9NWhzbCVYlc4yzov7pdHgl9N0McbNUOmfQhriun3ZmZme5ErTiFDxrTxkEczf64Mh9+1/9emFbt+vVsKV9FpBH6rdpn9JPyyRcCRcLx20IV4XT3rGUpPJr4MtaKLNlBm/m6GNZu0RvjtXQlmtWKTOFIkGclv4XRwpY2E4SVuy1I2SGzw6UTfw4KaWGM9eZxSB6DVf8chDd6pNr/7w143K1PD2FI7Yt+96cg9quQ1pZx5Jrv6+n8s9JQ0mtxbqYVjel/oZ0n3iiDDJ8lqp7Vue4JLHSU3PghhG+ZohaKjPF03kbt0xHuK/5PcHIew6lNYjNK59/K6rxc1TPlI3apgF5vStJojkz6hn3lp2S1aCl7pNQL1joki6L8Xjuf0cJsXu2UYuyCsAjeyrHKVYNNccrd6Uzig9xAmmMEZfyZFSpPn/qpUcd3btfBfJ/Eh0X8xwuxN8wr9n8ZxE1u2fH5yKDvIH5LV+pL3RZmzfs8DUttp2MK6OCz4lwuBDOT7z1rOFdVR1XtIAGaW9Wt12d7X4N4OOF//+XHM/bvpKvqhWk7Zjh1NsOeqI3V/IBPh1JKU/69GPx9Dzmqjz/+8WHaZgf8iyW3r//CwJszVyu1fT9ewRsYHA9AjqI7PBUkTJtxXPGL+Hl7imc4ILWWQc1jIViuWJE6uaJLuDnEzRlPurv6wUoCdWIYFDsWtzTcfeJhGvWRduN3YwQDjaRxf/bswCH0GxEnfaEkCY6SGuj1N7d/vEX3JrIY+XpdV4FskLnSRhgTtiWI3BVFPYhzRl77d9TX1gPgAKyIxb/vcgQO8LzRSAbtTtsNywE22A01WaE5FdacMh/LPBpQnvCTmjFSSL1LKGCOf+X6MLtT1l8UBD3/goOMkJ5I3K49HzxxPImf7DNVt7UAumiZnUIZBO2lwQ1BnqZXQePrYeGoFfOzQCEDK477auzfoIVH5/AnPpgo6W467wl7ObPhFbDM5dkJIlFu+0xdoZy7t6r+7W01LioQqhTUmxpDLF9KevvM7v8O5Sygqb5GeGjqptXXp3TMfhS2jprrgT+kHQ+vxhzsy+SFUmPMZo9Xb8evwkIUU+nfP9XNe/MLwJeZ1RlPw+OfpcY0Gs8nwP5HlQiaupFGr5KE+rd1sMjIg3jisIvd3Guc8tDtajBp+gF25dxCPZPyAkgEHhjzw+ogizWKdE1f5O8dn4TbBCaTXi6I/9wuEvS99o/1iNeETZBVFIUFuPiOEeSauRetq1bGy1z2zmp0ImcC+qRS687Jz6aWvGg6s6XpOU/BBjhRwOD/DugHBzQawiqmUDKct9KAwzwLnsPRM/whGTYi/GErLuELTyISgWJNm6f9oJO3jxLpQnYpfqhG7vWZCYr6nHHsOXS1HoK7n7F6puQAAA=);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 14.5px/1.55 var(--font);
}
.shell {
  display: flex;
  min-height: 100vh;
}
.side {
  width: var(--side-w);
  flex: none;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 22px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.brand {
  padding: 0 10px 16px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.brand .logo {
  width: 34px;
  height: 34px;
  border-radius: 0;
  background: var(--logo-mark) center / contain no-repeat;
  display: grid;
  place-content: center;
  color: #fff;
  font-size: 16px;
  flex: none;
}
.brand b {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  display: block;
  line-height: 1.2;
}
.brand span {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 500;
}
.nav-new {
  margin: 0 6px 16px;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  padding: 11px 14px;
  font: 700 13.5px var(--font);
  cursor: pointer;
  text-align: left;
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), .3);
  transition: background .15s, transform .1s;
}
.nav-new:hover {
  background: var(--accent-ink);
}
.nav-new:active {
  transform: scale(.985);
}
.nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--ink-2);
  border-radius: 10px;
  padding: 9px 11px;
  font: 600 13.5px var(--font);
  cursor: pointer;
  text-align: left;
  transition: background .12s, color .12s;
}
.nav-btn:hover {
  background: var(--sunken);
  color: var(--ink);
}
.nav-btn[aria-current=true] {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.ic {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-btn .ic {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .72;
}
.nav-btn[aria-current=true] .ic {
  opacity: 1;
}
.nav-new .ic {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.nav-new {
  display: flex;
  align-items: center;
  gap: 9px;
}
.nav-btn .cnt {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  background: var(--sunken);
  border-radius: 999px;
  padding: 2px 8px;
}
.nav-btn[aria-current=true] .cnt {
  background: #fff;
  color: var(--accent-ink);
}
.nav-btn .cnt.hot {
  background: var(--serious-soft);
  color: var(--serious-text);
}
.nav-sep {
  height: 1px;
  background: var(--hairline);
  margin: 10px 8px;
}
.side-foot {
  margin-top: auto;
  padding: 14px 11px 0;
  font-size: 11.5px;
  color: var(--muted);
  border-top: 1px solid var(--hairline);
}
.side-foot b {
  display: block;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 700;
}
.main {
  flex: 1;
  min-width: 0;
  padding: 24px 30px 90px;
}
.main > section {
  max-width: none;
}
.sec-sub,
.hint.wide {
  max-width: 92ch;
}
.sec-head {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.sec-sub {
  color: var(--muted);
  font-size: 13.5px;
  margin: 0 0 20px;
  font-weight: 500;
}
@media (max-width: 860px) {
  .shell {
    flex-direction: column;
  }
  .side {
    width: 100%;
    height: auto;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px;
  }
  .brand {
    padding: 0 8px;
  }
  .brand span {
    display: none;
  }
  .nav-new {
    margin: 0 6px;
    padding: 8px 12px;
  }
  .nav-btn {
    width: auto;
  }
  .side-foot {
    margin: 0 0 0 auto;
    border: none;
    padding: 0 8px;
  }
  .main {
    padding: 18px 14px 70px;
  }
}
.cols {
  display: grid;
  grid-template-columns: minmax(340px, 5fr) minmax(380px, 6fr);
  gap: 22px;
  align-items: start;
}
@media (max-width: 900px) {
  .cols {
    grid-template-columns: 1fr;
  }
}
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: var(--shadow-1);
}
.panel h2 {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.panel h2.mt {
  margin-top: 24px;
}
textarea,
input[type=text],
input[type=number],
input[type=password],
select {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 11px;
  font: 14.5px/1.5 var(--font);
  transition: border-color .12s, box-shadow .12s;
}
textarea:focus,
input:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea#src {
  width: 100%;
  min-height: 280px;
  resize: vertical;
  font: 15px/1.7 var(--font-text);
  padding: 13px 15px;
  background: var(--sunken);
}
#fnTip {
  position: fixed;
  z-index: 90;
  background: #1d2233;
  color: #fff;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 12.5px;
  line-height: 1.6;
  box-shadow: 0 8px 24px rgba(15, 20, 40, .35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .1s;
  max-width: 280px;
}
#fnTip.on {
  opacity: 1;
}
.fn-thumbs {
  position: relative;
  margin: 2px 0 4px;
}
.fn-per {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.hqx .fn-nav .btn {
  padding: 6px 11px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  box-shadow: none;
  font-weight: 700;
}
.hqx .fn-nav .btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent-ink);
}
.hqx .fn-nav .btn:disabled {
  opacity: .35;
  cursor: default;
}
.fn-nav .cx-period {
  min-width: 132px;
  font-size: 14px;
}
.fn-nav[hidden] {
  display: none;
}
.fn-thumb {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 6px;
  background: var(--sunken);
  border: 1px solid var(--border);
  color: var(--muted);
}
.fn-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fn-thumb .fn-kind {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.fn-thumb .fn-kind .ic {
  width: 56%;
  height: 56%;
  color: #fff;
  opacity: .6;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
}
.fn-thumb:not(:has(img)) .fn-kind .ic {
  color: var(--muted);
  opacity: .7;
  filter: none;
}
.fn-thbtn .ic {
  width: 15px;
  height: 15px;
  vertical-align: -3px;
}
.fn-thumb.trial {
  border-style: dashed;
  opacity: .75;
}
.fn-thumb.more {
  font-size: 11px;
  font-weight: 700;
  cursor: default;
}
a.fn-thumb:hover {
  border-color: var(--accent);
}
.fn-thumbs-note {
  font-size: 11.5px;
  color: var(--muted);
  margin: 2px 0 4px 62px;
}
.cx-tip .cx-thumb.photo {
  aspect-ratio: 4 / 5;
}
#fnTip i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 6px;
}
#fnTip > b {
  display: block;
  margin-bottom: 3px;
  font-size: 11.5px;
  opacity: .8;
}
.fnhit:hover {
  fill: rgba(var(--accent-rgb), .05);
}
.modebar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.xb {
  display: inline-block;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 17px;
  color: var(--ink-2);
  background: rgba(var(--accent-rgb), .08);
  white-space: nowrap;
}
.xb.hi {
  color: var(--good-text);
  background: var(--good-soft);
}
.xb.lo {
  color: var(--crit-text);
  background: var(--crit-soft);
}
.chip {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 5px 13px;
  font: 600 12.5px var(--font);
  cursor: pointer;
  transition: all .12s;
}
.chip:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}
.chip[aria-pressed=true] {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-color: transparent;
}
.counter {
  color: var(--muted);
  font-size: 12.5px;
  margin: 8px 2px 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.btn {
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  cursor: pointer;
  font: 700 13.5px/1 var(--font);
  transition: background .15s, transform .1s;
}
.btn:active {
  transform: scale(.98);
}
.btn,
.add-btn,
.ig-mode,
.kn-chip,
.ed-fixbtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  justify-content: center;
}
[hidden] {
  display: none !important;
}
.empty-note {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 40px 32px;
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.7;
}
.tm-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.tm-meta .ic {
  width: 14px;
  height: 14px;
  opacity: .7;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), .25);
}
.btn-primary:hover {
  background: var(--accent-ink);
}
.btn-ai {
  background: var(--ai);
  color: #fff;
  box-shadow: 0 2px 8px rgba(109, 63, 240, .25);
}
.btn-ai:hover {
  filter: brightness(1.1);
}
.btn-ghost {
  background: var(--surface);
  color: var(--ink-2);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  border-color: var(--muted);
  color: var(--ink);
}
.btn[disabled] {
  opacity: 0.5;
  cursor: default;
}
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.demo-row {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--hairline);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.demo-row span {
  font-size: 12.5px;
  color: var(--muted);
}
.score-head {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.dial {
  position: relative;
  width: 100px;
  height: 100px;
  flex: none;
}
.dial svg {
  width: 100px;
  height: 100px;
  transform: rotate(-90deg);
}
.dial .val {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.dial .val small {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.05em;
}
.verdict {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
  font-size: 15px;
}
.verdict .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
.score-head .note {
  color: var(--ink-2);
  font-size: 13.5px;
  margin-top: 4px;
  max-width: 380px;
}
.bars {
  margin: 14px 0 4px;
  display: grid;
  gap: 9px;
}
.bar-row {
  display: grid;
  grid-template-columns: 158px 1fr 48px;
  gap: 10px;
  align-items: center;
}
.bar-row .lbl {
  font-size: 12.5px;
  color: var(--ink-2);
}
.bar-row .lbl b {
  color: var(--ink);
  font-weight: 700;
}
.track {
  height: 8px;
  background: var(--hairline);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 4px;
  background: var(--accent);
  min-width: 3px;
  transition: width .35s ease;
}
.fill.ai {
  background: var(--ai);
}
.fill.na {
  background:
    repeating-linear-gradient(
      45deg,
      var(--hairline),
      var(--hairline) 4px,
      transparent 4px,
      transparent 8px);
}
.bar-row .num {
  font-size: 13.5px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.bar-row .num small {
  color: var(--muted);
  font-weight: 500;
}
.findings {
  margin-top: 16px;
  display: grid;
  gap: 8px;
}
.finding {
  display: grid;
  grid-template-columns: 4px 1fr;
  gap: 12px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.finding .stripe {
  background: var(--muted);
}
.finding.f-crit .stripe {
  background: var(--crit);
}
.finding.f-warn .stripe {
  background: var(--serious);
}
.finding.f-info .stripe {
  background: var(--accent);
}
.finding.f-good .stripe {
  background: var(--good);
}
.finding .body {
  padding: 10px 14px 11px 0;
}
.finding .t {
  font-weight: 700;
  font-size: 13.5px;
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}
.finding .sevlbl {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.f-crit .sevlbl {
  color: var(--crit-text);
}
.f-warn .sevlbl {
  color: var(--serious-text);
}
.f-info .sevlbl {
  color: var(--accent-ink);
}
.f-good .sevlbl {
  color: var(--good-text);
}
.ai-tag {
  font-size: 9.5px;
  font-weight: 800;
  color: var(--ai);
  background: var(--ai-soft);
  border-radius: 6px;
  padding: 1px 6px;
  letter-spacing: 0.05em;
}
.finding .d {
  color: var(--ink-2);
  font-size: 13.5px;
  margin-top: 2px;
}
.finding .q {
  font: 13.5px/1.5 var(--font-text);
  color: var(--ink);
  background: var(--sunken);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 5px 10px;
  margin-top: 6px;
  display: inline-block;
}
.hl-text {
  font: 15px/1.7 var(--font-text);
  background: var(--sunken);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 14px 16px;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 320px;
  overflow-y: auto;
}
mark {
  border-radius: 3px;
  padding: 0 2px;
  color: inherit;
}
mark.m-crit {
  background: var(--mark-crit-bg);
  box-shadow: inset 0 -2px 0 var(--crit);
}
mark.m-warn {
  background: var(--mark-warn-bg);
  box-shadow: inset 0 -2px 0 var(--serious);
}
mark.m-good {
  background: var(--mark-good-bg);
  box-shadow: inset 0 -2px 0 var(--good);
}
mark.m-num {
  background: var(--mark-num-bg);
}
.hl-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.hl-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: -1px;
}
.placeholder {
  color: var(--muted);
  font-size: 14.5px;
  padding: 30px 10px;
  text-align: center;
}
.ai-status {
  font-size: 13.5px;
  color: var(--ink-2);
  margin: 8px 0;
}
.ai-status.err {
  color: var(--crit-text);
}
.field-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.field-row label {
  font-size: 13.5px;
  color: var(--ink-2);
  min-width: 170px;
}
.field-row input[type=number] {
  width: 76px;
  font-variant-numeric: tabular-nums;
}
.sum-note {
  font-size: 12.5px;
  color: var(--muted);
  margin: 4px 0 0;
}
.sum-note.bad {
  color: var(--crit-text);
  font-weight: 700;
}
.list-table {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
}
.list-row {
  display: grid;
  grid-template-columns: 1fr 1fr 30px;
  gap: 6px;
}
.list-row input {
  width: 100%;
  font-size: 13.5px;
}
.del-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 15px;
  border-radius: 8px;
}
.del-btn:hover {
  color: var(--crit);
  background: var(--crit-soft);
}
.add-btn {
  font-size: 12.5px;
  padding: 8px 14px;
}
.judge-field {
  margin-bottom: 12px;
}
.judge-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 4px;
}
.judge-field textarea {
  width: 100%;
  min-height: 56px;
  resize: vertical;
  font-size: 13.5px;
}
.anchor-card {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 11px;
  margin-bottom: 8px;
  background: var(--sunken);
}
.anchor-card .top {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.anchor-card .top input[type=number] {
  width: 64px;
}
.anchor-card textarea {
  width: 100%;
  min-height: 60px;
  font: 13.5px/1.5 var(--font-text);
  resize: vertical;
}
.anchor-card input.why {
  width: 100%;
  margin-top: 6px;
  font-size: 13.5px;
}
.hint {
  font-size: 12.5px;
  color: var(--muted);
  margin: 2px 0 10px;
}
.save-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--ink);
  color: #fff;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 700;
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
  z-index: 50;
  box-shadow: var(--shadow-2);
}
.save-toast.show {
  opacity: 1;
}
.save-toast.err {
  background: var(--crit-text);
}
.fl-crit,
.fl-warn {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.fl-crit {
  color: var(--crit-text);
}
.fl-warn {
  color: var(--serious-text);
  margin-left: 6px;
}
.fl-crit + .fl-warn {
  margin-left: 6px;
}
.price-note {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 6px;
}
.bulk-ta {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  font: 15px/1.7 var(--font-text);
  padding: 12px 14px;
  background: var(--sunken);
}
.scen-status {
  font-size: 12.5px;
  color: var(--ink-2);
  font-weight: 500;
}
.scen-status.err {
  color: var(--crit-text);
}
.scen-wrap {
  overflow-x: auto;
  border-radius: 14px;
  box-shadow: var(--shadow-1);
  border: 1px solid var(--border);
  background: var(--surface);
}
.scen-table {
  min-width: 880px;
}
.seg-group {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 2px;
  background: var(--surface);
}
.seg-group button {
  border: 0;
  background: none;
  padding: 5px 10px;
  border-radius: 7px;
  font: 600 12.5px var(--font);
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
}
.seg-group button[aria-pressed=true] {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.scen-grid {
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  grid-template-columns: 88px minmax(220px, 1fr) minmax(110px, 190px) 140px 246px;
  column-gap: 20px;
}
.scen-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.scen-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.itag {
  font-size: 11.5px;
  font-weight: 650;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-radius: var(--r-pill);
  padding: 1px 8px;
  white-space: nowrap;
}
.stags {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
}
.stags .itag {
  font-size: 12px;
  font-weight: 500;
  background: none;
  border-radius: 0;
  padding: 0;
  white-space: normal;
}
.isrc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.isrc > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.isrc .ic {
  width: 13px;
  height: 13px;
  flex: none;
}
.scen-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.scen-title-wrap .scen-title {
  min-width: 0;
}
.scen-title.is-auto {
  color: var(--muted);
  font-weight: 600;
}
.title-pen {
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: .55;
  transition:
    opacity .12s,
    background .12s,
    color .12s;
}
.title-pen .ic {
  width: 14px;
  height: 14px;
}
.scen-item:hover .title-pen,
.title-pen:focus-visible {
  opacity: 1;
}
.title-pen:hover {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.scen-title-in {
  width: 100%;
  min-width: 0;
  font: 700 13.5px/1.35 var(--font);
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  padding: 4px 7px;
  margin: -4px -7px;
  cursor: text;
  text-overflow: ellipsis;
}
.scen-title-in:hover {
  border-color: var(--border);
  background: var(--surface);
}
.scen-title-in:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .12);
}
.idea-draft {
  background: var(--accent-soft);
}
.idea-draft .sdate {
  color: var(--accent-ink);
  font-weight: 700;
}
.scen-item.open {
  background: #fbfcfe;
}
.scen-item.open > .scen-grid {
  padding-bottom: 6px;
}
.idea-body {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(220px, 1fr);
  gap: 18px;
  padding: 4px 16px 18px 124px;
  cursor: default;
}
.idea-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.idea-lab {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.idea-save {
  min-height: 14px;
  margin-top: -4px;
  text-align: right;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--good-text);
}
.idea-ta {
  width: 100%;
  min-height: 130px;
  resize: vertical;
  box-sizing: border-box;
  font: 13.5px/1.6 var(--font);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.idea-ta:focus {
  outline: none;
  border-color: var(--accent);
}
.idea-fld {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.idea-fld > span {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.idea-fld select {
  width: 100%;
  height: 36px;
}
.idea-tags .id-lab {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 4px 0 6px;
}
.idea-sim {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.idea-sim-go {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  border: 1px solid var(--hairline);
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 7px 10px;
  font: 13px/1.4 var(--font);
  color: var(--ink);
  cursor: pointer;
}
.idea-sim-go:hover {
  border-color: var(--accent);
}
.idea-sim-go b {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--serious-text);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.scen-item.idea-flash {
  background: var(--accent-soft);
  transition: background .3s;
}
@media (max-width: 860px) {
  .idea-body {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 16px;
  }
}
@media (max-width: 560px) {
  .idea-body {
    padding: 0 14px 16px;
  }
  .scen-table {
    min-width: 0;
  }
  .scen-thead {
    display: none;
  }
  .scen-grid {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "main main" "tags tags" "date who" "act act";
    row-gap: 8px;
    padding: 12px 14px;
  }
  .scen-grid .stags {
    grid-area: tags;
  }
  .scen-grid .stags:empty {
    display: none;
  }
  .scen-grid .sact {
    justify-content: flex-start;
  }
  .scen-grid .scen-main {
    grid-area: main;
  }
  .scen-grid .sact {
    grid-area: act;
  }
  .scen-grid .sdate {
    grid-area: date;
  }
  .scen-grid .sauthor {
    grid-area: who;
    font-size: 11.5px;
  }
}
.scen-thead {
  border-bottom: 1px solid var(--border);
  background: var(--sunken);
  border-radius: 14px 14px 0 0;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.scen-thead > span {
  padding: 1px 0;
}
.scen-item {
  border-top: 1px solid var(--hairline);
  transition: background .12s;
}
.scen-item:first-of-type {
  border-top: none;
}
.scen-item:hover {
  background: #fbfcfe;
}
.scen-item > .scen-grid {
  cursor: pointer;
}
.scen-title {
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.scen-title:hover {
  color: var(--accent-ink);
}
.sauthor {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
}
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  width: fit-content;
}
.p-draft {
  background: var(--sunken);
  color: var(--ink-2);
}
.p-judged {
  background: var(--ai-soft);
  color: var(--ai);
}
.p-submitted {
  background: var(--serious-soft);
  color: var(--serious-text);
}
.p-approved {
  background: var(--good-soft);
  color: var(--good-text);
}
.p-rework {
  background: var(--crit-soft);
  color: var(--crit-text);
}
.sdate {
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.sact {
  display: flex;
  gap: 5px;
  justify-content: flex-end;
}
.srow-btn {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-content: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted-2);
  border-radius: 8px;
  font-size: 13.5px;
  cursor: pointer;
  transition: all .12s;
  padding: 0;
}
.srow-btn:hover {
  color: var(--ink);
  background: var(--sunken);
}
.srow-btn.danger:hover {
  color: var(--crit-text);
  background: var(--crit-soft);
}
.srow-btn .ic {
  width: 17px;
  height: 17px;
}
.srow-btn.fav.on {
  color: #e8a72b;
}
.srow-btn.fav.on .ic,
.id-fav.on .ic {
  fill: currentColor;
}
.id-fav.on {
  color: #b07d05;
}
.srow-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-2);
  font: 650 12.5px var(--font);
  cursor: pointer;
  white-space: nowrap;
  transition:
    border-color .12s,
    color .12s,
    background .12s;
}
.srow-go .ic {
  width: 15px;
  height: 15px;
}
.srow-go:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: var(--accent-soft);
}
.isrc-go {
  cursor: pointer;
}
.isrc-go:hover {
  color: var(--accent-ink);
}
.askm-back {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15, 20, 35, .44);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.askm {
  width: min(540px, 100%);
  background: var(--surface);
  border-radius: 16px;
  padding: 20px 22px 18px;
  box-shadow: 0 26px 64px rgba(20, 25, 45, .3);
}
.askm h3 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
}
.askm .sub {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--muted);
}
.askm textarea {
  width: 100%;
  min-height: 118px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 13px;
  background: var(--surface);
  font: 14.5px/1.65 var(--font-text);
}
.askm textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.askm .anch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.askm .anch input {
  width: 84px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 9px;
  font: 600 13.5px var(--font);
  background: var(--surface);
}
.askm .askm-act {
  display: flex;
  gap: 9px;
  justify-content: flex-end;
  margin-top: 15px;
}
.askm .askm-f {
  display: block;
  margin-bottom: 11px;
}
.askm .askm-f span {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.askm .askm-f select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 11px;
  color: var(--ink);
  background: var(--surface);
}
.askm .askm-f select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.askm .askm-f input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  font: 14.5px var(--font);
  background: var(--surface);
}
.askm .askm-f input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.askm .askm-f textarea {
  min-height: 84px;
}
.askm .btn:disabled {
  opacity: .45;
  cursor: default;
  box-shadow: none;
}
.askm-ok {
  width: min(460px, 100%);
}
.askm-ok h3 {
  font-size: 17px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.askm-ok .askm-t {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.askm-ok .askm-price {
  display: inline-block;
  margin: 12px 0 0;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 14px;
  font-weight: 700;
}
.askm-ok .askm-act {
  margin-top: 18px;
}
.askm-ok .askm-act .btn {
  min-height: 40px;
  padding: 0 18px;
}
.btn-danger {
  background: var(--crit);
  color: #fff;
}
.btn-danger:hover {
  background: var(--crit-text);
}
.slides {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 10px;
  margin: 4px 0 2px;
}
.slides[hidden] {
  display: none;
}
.slide {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 9px 11px 8px;
  display: flex;
  flex-direction: column;
}
.slide.hook {
  border-color: var(--accent);
}
.slide-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  font: 800 10.5px/1 var(--font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.slide.hook .slide-hd {
  color: var(--accent-ink);
}
.slide.svc {
  grid-column: 1 / -1;
  border-style: dashed;
  background: var(--sunken);
}
.slide.svc textarea {
  min-height: 48px;
  font-size: 13px;
  color: var(--ink-2);
}
.slide-hd .sp {
  margin-left: auto;
  display: flex;
  gap: 1px;
}
.slide-hd .sp button {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12.5px;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 6px;
}
.slide-hd .sp button:hover {
  background: var(--sunken);
  color: var(--ink);
}
.slide-hd .sp button.x:hover {
  background: var(--crit-soft);
  color: var(--crit-text);
}
.slide textarea {
  width: 100%;
  min-height: 92px;
  border: 0;
  padding: 0;
  background: transparent;
  resize: none;
  font: 14.5px/1.62 var(--font-text);
  color: var(--ink);
}
.slide textarea:focus {
  outline: none;
}
.slide .wc {
  margin-top: 6px;
  font: 700 10.5px var(--font);
  color: var(--muted);
}
.slide .wc.over {
  color: var(--serious-text);
}
.slide-add {
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  min-height: 128px;
  cursor: pointer;
  font: 700 13.5px var(--font);
  transition: all .12s;
}
.slide-add:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: var(--accent-soft);
}
.refrow {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 8px 0 10px;
}
.refrow input {
  flex: 1;
  min-width: 240px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 11px;
  background: var(--surface);
  font: 13.5px var(--font);
}
.refrow input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.refnote {
  flex-basis: 100%;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
}
.refnote.err {
  color: var(--crit-text);
}
.ed-flist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 9px;
}
.ed-f {
  display: block;
  text-align: left;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 6px 10px 6px 24px;
  position: relative;
  cursor: pointer;
}
.ed-f:disabled {
  cursor: default;
}
.ed-f:not(:disabled):hover {
  border-color: var(--accent);
}
.ed-f i {
  position: absolute;
  left: 9px;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.ed-f.crit i {
  background: var(--crit);
}
.ed-f.warn i {
  background: var(--serious);
}
.ed-f b {
  color: var(--ink);
  font-weight: 550;
}
.ed-f .q {
  color: var(--muted);
  font-style: italic;
}
.ed-f .aitag {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-radius: 6px;
  padding: 1px 5px;
  margin-right: 4px;
}
.ed-wrap {
  position: relative;
}
.ed-wrap .ed-hl {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-wrap: break-word;
  color: transparent;
  font: 15px/1.7 var(--font-text);
  padding: 11px 13px;
  border: 1px solid transparent;
  background: var(--surface);
  box-sizing: border-box;
  border-radius: 10px;
}
.ed-wrap textarea {
  position: relative;
  z-index: 1;
  background: transparent !important;
}
.ed-hl mark {
  color: transparent;
  border-radius: 3px;
}
.ed-hl mark.crit {
  background: rgba(233, 78, 96, .2);
}
.ed-hl mark.warn {
  background: rgba(240, 160, 40, .24);
}
.ed-tip {
  position: fixed;
  z-index: 1200;
  max-width: 340px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #101320;
  color: #fff;
  font-size: 12.5px;
  line-height: 1.45;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(16, 19, 32, .28);
}
.ed-tip .sev {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-right: 7px;
}
.ed-tip.crit .sev {
  color: #ff8a97;
}
.ed-tip.warn .sev {
  color: #ffc46b;
}
.ed-tip .aitag {
  font-size: 10.5px;
  font-weight: 700;
  margin-right: 6px;
  opacity: .8;
}
.ed-tip b {
  font-weight: 800;
}
.ed-tip div {
  margin-top: 3px;
  opacity: .85;
}
.ed-tip .hint {
  font-size: 11.5px;
  opacity: .6;
}
.ed-fixbtn {
  margin-left: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  padding: 2px 8px;
  font: 600 11.5px var(--font);
  color: var(--accent-ink);
  cursor: pointer;
}
.ed-fixbtn:hover {
  border-color: var(--accent);
}
.ed-fixpane {
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 2px 0 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
}
.ed-fixvar {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 11px;
  background: var(--sunken);
}
.ed-fixvar p {
  margin: 0 0 6px;
  font: 14.5px/1.6 var(--font-text);
  color: var(--ink);
}
.ed-fixvar .why {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 7px;
}
.scen-empty {
  color: var(--muted);
  font-size: 14.5px;
  padding: 34px 10px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 14px;
}
.scen-empty a {
  color: var(--accent-ink);
  cursor: pointer;
  font-weight: 700;
}
details.addbox {
  margin-bottom: 16px;
}
details.addbox summary {
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent-ink);
  list-style: none;
  width: fit-content;
}
details.addbox summary::before {
  content: "+ ";
}
details.addbox[open] summary {
  margin-bottom: 10px;
}
.fmt-card {
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  box-shadow: var(--shadow-1);
  transition: all .15s;
}
.fmt-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.mini-lbl {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
  margin: 0 0 6px;
}
.acct-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 8px;
}
.acct-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-radius: 999px;
  padding: 4px 6px 4px 12px;
  font-size: 12.5px;
  font-weight: 700;
}
.acct-chip.own {
  background: var(--good-soft);
  color: var(--good-text);
}
.acct-chip .tag {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .8;
}
.acct-chip button {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 14.5px;
  line-height: 1;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: grid;
  place-content: center;
  opacity: .7;
}
.acct-chip button:hover {
  opacity: 1;
  background: rgba(0, 0, 0, .08);
}
.acct-add {
  display: flex;
  gap: 8px;
  align-items: center;
}
.acct-add input {
  flex: 1 1 180px;
  font-size: 13.5px;
}
.acct-add > .btn {
  flex: none;
  white-space: nowrap;
}
.wz-tips {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 13.5px;
  color: var(--ink-2);
  box-shadow: var(--shadow-1);
}
.wz-tips b {
  color: var(--ink);
  font-weight: 800;
}
.wz-tips ul {
  margin: 8px 0 0;
  padding-left: 18px;
}
.wz-tips li {
  margin: 4px 0;
}
.wz-tips .lvl {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #b8321f;
  background: #fdeeeb;
  border-radius: 6px;
  padding: 1px 5px;
  margin-right: 6px;
  vertical-align: 1px;
}
.headline-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.headline-row input {
  flex: 1 1 340px;
  font: 700 16px/1.4 var(--font-text);
  padding: 12px 15px;
}
.attn-empty {
  color: var(--muted);
  font-size: 13.5px;
  padding: 14px 0;
}
.hooks-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.hook-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 13px;
  background: var(--surface);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  box-shadow: var(--shadow-1);
}
.hook-card .txt {
  flex: 1;
}
.hook-card .h {
  font: 700 14.5px/1.4 var(--font-text);
}
.hook-card .w {
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 3px;
}
.ver-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 0 0 8px;
}
.ver-bar .lab {
  font-size: 11.5px;
  color: var(--muted);
  margin-right: 2px;
}
.ver-bar .chip.on {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.ver-bar .chip small {
  opacity: .7;
  margin-left: 4px;
  font-weight: 400;
}
.ver-view {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0 0 10px;
  background: var(--surface);
}
.ver-view .hd {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 12.5px;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.ver-view .hd b {
  color: var(--ink);
}
.ver-view .hd .sp {
  flex: 1;
}
.ver-view pre {
  white-space: pre-wrap;
  font: 13.5px/1.6 var(--font-text);
  margin: 0;
  max-height: 340px;
  overflow-y: auto;
}
.ver-cmp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 10px;
  font: 12.5px/1.55 var(--font-text);
  max-height: 440px;
  overflow-y: auto;
}
.ver-cmp .th {
  font: 600 11.5px/1.4 var(--font);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 0 6px 4px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 4px;
}
.ver-cmp .c {
  padding: 1px 6px;
  white-space: pre-wrap;
  min-height: 1.55em;
  border-radius: 3px;
}
.ver-cmp .c.del {
  background: #fdecec;
  color: #a12626;
}
.ver-cmp .c.ins {
  background: #e5f6e9;
  color: #16652f;
}
.ver-cmp .c.ctx {
  color: var(--muted);
}
.ver-cmp .c.gap {
  color: var(--muted);
  text-align: center;
  grid-column: 1 / -1;
}
.ver-cmp .c .ln {
  display: inline-block;
  min-width: 2.1em;
  margin-right: 5px;
  text-align: right;
  font: 10.5px/1.6 var(--font);
  color: var(--muted);
  opacity: .85;
  user-select: none;
}
@media (prefers-reduced-motion: reduce) {
  .fill {
    transition: none;
  }
  .save-toast {
    transition: none;
  }
  .fmt-card {
    transition: none;
  }
}
.sec-bar {
  margin: 0 0 18px;
}
.sec-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 11px;
}
.sec-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.sec-title:empty {
  display: none;
}
.sec-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin: 0;
}
body.grouped .main > section .sec-head,
body.grouped .main > section .anx-top h1 {
  display: none;
}
body.grouped .main > section .dos-doc .sec-head {
  display: flex;
}
#spBody .sec-head {
  flex-wrap: wrap;
}
#spBody .sp-wide {
  overflow-x: auto;
}
body:not(.grouped) .sec-bar {
  display: none;
}
.sec-tabs button {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--muted);
  padding: 9px 2px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .12s;
}
.sec-tabs button:hover {
  color: var(--ink);
}
.sec-tabs button.on {
  color: var(--accent-ink);
  border-bottom-color: var(--accent);
}
.sec-tabsrow {
  display: flex;
  align-items: center;
  gap: 8px 18px;
  flex-wrap: wrap;
}
.work-views {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 2px auto;
}
.fn-filters {
  gap: 6px;
  flex-wrap: wrap;
  margin: 2px 0 10px;
  align-items: center;
}
.fn-filters > label {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 2px;
}
.fn-filters select,
.fn-filters input {
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  max-width: 180px;
}
.hqx {
  font-size: 14.5px;
}
.hqx .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-1);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.hqx h2 {
  font-size: 16px;
  font-weight: 800;
  margin: 26px 0 10px;
}
.hqx .card h2:first-child {
  margin-top: 0;
}
.hqx .stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.hqx .stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 16px;
  min-width: 140px;
  box-shadow: var(--shadow-1);
}
.hqx .stat b {
  display: block;
  font-size: 20px;
}
.hqx .stat span {
  font-size: 12.5px;
  color: var(--muted);
}
.hqx .stat.flag b {
  color: var(--crit-text);
}
.hqx table.t {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.hqx .t th {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  text-align: left;
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.hqx .t th.noclick {
  cursor: default;
}
.hqx .t th.num {
  text-align: right;
}
.hqx .t td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.hqx .t tr:hover td {
  background: var(--sunken);
}
.hqx .t.fixed {
  table-layout: fixed;
}
.hqx .t.fixed td {
  vertical-align: middle;
}
.hqx .t.fixed th {
  white-space: normal;
  line-height: 1.25;
  font-size: 10.5px;
  vertical-align: bottom;
}
.hqx .t.fixed.hd1 th {
  white-space: nowrap;
  vertical-align: middle;
}
.hqx .t.fixed.hd1 td.mkt {
  font-size: 12.5px;
  line-height: 1.3;
  hyphens: auto;
  overflow-wrap: anywhere;
}
.ref-acc {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ref-who {
  min-width: 0;
  overflow: hidden;
}
.ref-who a {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hqx .t.fixed.hd1 td:first-child {
  padding-right: 16px;
}
.ref-th {
  position: relative;
  flex: none;
  width: 36px;
  height: 50px;
  border-radius: 6px;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.ref-th.reels {
  background: #e7e9ff;
  color: #3730a3;
}
.ref-th.carousel {
  background: #dcf1ea;
  color: #0f6b52;
}
.ref-th .ic {
  width: 14px;
  height: 14px;
  opacity: .5;
}
.ref-th img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.av {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  padding: 2px;
  background:
    linear-gradient(
      45deg,
      #f9ce34,
      #ee2a7b 55%,
      #6228d7);
}
.av > span {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--surface);
  display: grid;
  place-items: center;
  background: hsl(var(--av-h, 250) 55% 88%);
  color: hsl(var(--av-h, 250) 45% 30%);
  font-size: 11px;
  font-weight: 800;
}
.av img {
  position: absolute;
  inset: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  border-radius: 50%;
  object-fit: cover;
}
.hqx .clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.42;
}
.hqx .t .dim {
  color: var(--faint,#b3b9c6);
}
.hqx .chk {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
}
.hqx .chk input {
  width: 15px;
  height: 15px;
  padding: 0;
  accent-color: var(--accent);
}
.hqx .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hqx .chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--sunken);
  border: 1px solid var(--border);
  color: var(--ink-2);
  white-space: nowrap;
}
.hqx .chip.good {
  background: var(--good-soft);
  border-color: transparent;
  color: var(--good-text);
}
.hqx .chip.warn {
  background: var(--serious-soft);
  border-color: transparent;
  color: var(--serious-text);
}
.hqx .chip.crit {
  background: var(--crit-soft);
  border-color: transparent;
  color: var(--crit-text);
}
.hqx .chip.ac {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-ink);
}
.hqx .mk-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.hqx input,
.hqx select,
.hqx textarea {
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 10px;
  outline: none;
}
.hqx input:focus,
.hqx select:focus,
.hqx textarea:focus {
  border-color: var(--accent);
}
.hqx textarea {
  width: 100%;
  resize: vertical;
  min-height: 54px;
}
.hqx button {
  font: inherit;
  font-weight: 700;
  border: 0;
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
}
.hqx button:hover {
  background: var(--accent-ink);
}
.hqx button.ghost {
  background: var(--sunken);
  color: var(--ink-2);
  border: 1px solid var(--border);
}
.hqx button.ghost:hover {
  background: var(--hairline);
}
.hqx button.mini {
  padding: 3px 9px;
  font-size: 12.5px;
  border-radius: 8px;
}
.hqx button.danger {
  background: var(--crit-soft);
  color: var(--crit-text);
}
.hqx .frow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
}
.hqx .frow label {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 700;
}
.hqx .frow .sp {
  margin-left: auto;
}
.hqx .frow .pair {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hqx .frow .ctl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.hqx .fn-lines {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.hqx .fn-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 6px 2px 0;
}
.hqx .fn-foot .sp {
  margin-left: auto;
}
.hqx .fn-foot button[aria-pressed=true] {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-ink);
}
.hqx .fn-fresh {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
  align-self: center;
}
.hqx .fn-how {
  margin: 2px 2px 0;
}
.hqx .fn-how summary {
  cursor: pointer;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 700;
  list-style: none;
  width: fit-content;
}
.hqx .fn-how summary::-webkit-details-marker {
  display: none;
}
.hqx .fn-how summary::before {
  content: "?";
  display: inline-block;
  width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  margin-right: 6px;
  font-size: 10.5px;
}
.hqx .fn-how summary:hover {
  color: var(--ink);
}
.hqx .fn-how p {
  margin: 6px 0 0;
}
.hqx .fn-line {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 4px 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  border: 1px solid var(--border);
  background: var(--surface);
  white-space: nowrap;
}
.hqx .fn-line i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}
.hqx .fn-line button {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 12.5px;
  padding: 0 4px;
  line-height: 1;
}
.hqx .fn-line button:hover {
  color: var(--crit-text);
}
.hqx .frow h2 {
  margin: 0;
}
.hqx .seg {
  display: inline-flex;
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2px;
  gap: 2px;
}
.hqx .seg button {
  background: transparent;
  color: var(--muted);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12.5px;
  font-weight: 700;
}
.hqx .seg button:hover {
  background: transparent;
  color: var(--ink);
}
.hqx .seg button[aria-pressed=true] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(16, 19, 32, .07);
}
.hqx .refs-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 0 2px;
}
.hqx .refs-more button {
  min-height: 36px;
}
.hqx .frow select,
.hqx .frow input[type=date],
.hqx .frow input[type=search],
.hqx .frow input[type=text] {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 8px;
  line-height: 1.45;
}
.hqx .frow input[type=search],
.hqx .frow input[type=text] {
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
}
.hqx .frow select {
  padding-right: 22px;
}
.hqx .frow [hidden],
.hqx .frow[hidden] {
  display: none !important;
}
.hqx .fn-pick {
  position: relative;
  display: inline-block;
}
.hqx .fn-pick-btn {
  position: relative;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 24px 4px 8px;
  cursor: pointer;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.hqx .fn-pick-btn:hover {
  border-color: var(--accent);
}
.hqx .fn-pick-btn::after {
  content: "▾";
  position: absolute;
  right: 8px;
  top: 4px;
  color: var(--muted);
  font-size: 10.5px;
}
.hqx .fn-pick-pop {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  min-width: 240px;
  max-height: 300px;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-2);
  padding: 6px;
}
.hqx .fn-pick-pop label {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.hqx .fn-pick-pop label:hover {
  background: var(--sunken);
}
.hqx .fn-pick-pop label.off {
  opacity: .45;
  cursor: default;
}
.hqx .fn-pick-pop input {
  margin: 0;
  accent-color: var(--accent);
}
.hqx .fn-pick-h {
  padding: 8px 8px 3px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.hqx .fn-pick-h:first-child {
  padding-top: 3px;
}
.hqx .fn-pick-no {
  margin-left: auto;
  padding-left: 10px;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
}
.hqx .frow input[type=date]:focus {
  outline: none;
  border-color: var(--accent);
}
.hqx .frow .dash {
  color: var(--muted);
  font-size: 12.5px;
}
.mdl {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
}
.mdl[hidden] {
  display: none;
}
.mdl-back {
  position: absolute;
  inset: 0;
  background: rgba(20, 17, 24, .42);
}
.mdl-box {
  position: relative;
  width: min(640px, 96vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(16, 19, 32, .3);
}
.mdl-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 13px;
  border-bottom: 1px solid var(--hairline);
}
.mdl-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.mdl-box .mdl-x {
  margin-left: auto;
  width: 30px;
  height: 30px;
  flex: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mdl-box .mdl-x .ic {
  width: 16px;
  height: 16px;
  flex: none;
  pointer-events: none;
}
.mdl-box .mdl-x:hover {
  color: var(--ink);
  border-color: var(--accent);
  background: var(--sunken);
}
.mdl-body {
  padding: 16px 20px;
  overflow: auto;
}
.mdl-body .fgrid {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 10px 12px;
  align-items: center;
}
.mdl-body .fgrid > label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
}
.mdl-body .fgrid input,
.mdl-body .fgrid select {
  width: 100%;
}
.mdl-body .kv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 32px;
  gap: 8px;
  margin-bottom: 8px;
}
.mdl-foot {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 13px 20px 18px;
  border-top: 1px solid var(--hairline);
}
.mdl-foot .sp {
  margin-left: auto;
}
.mdl-foot .hint {
  font-size: 12.5px;
  color: var(--muted);
  max-width: 44ch;
  line-height: 1.45;
}
@media (max-width: 560px) {
  .mdl {
    padding: 12px;
  }
  .mdl-box {
    width: calc(100vw - 24px);
  }
  .mdl-foot {
    flex-wrap: wrap;
  }
  .mdl-foot .hint {
    flex: 1 1 100%;
    max-width: none;
  }
}
.hqx svg text {
  font-family: var(--font);
}
.hqx .fold {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  margin-bottom: 10px;
  box-shadow: var(--shadow-1);
}
.hqx .fold > summary {
  cursor: pointer;
  list-style: none;
  padding: 13px 16px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.hqx .fold > summary::-webkit-details-marker {
  display: none;
}
.hqx .fold > summary::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  align-self: center;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform .15s;
}
.hqx .fold[open] > summary::before {
  transform: rotate(45deg);
}
.hqx .fold > summary:hover {
  background: var(--sunken);
  border-radius: 12px;
}
.hqx .fold[open] > summary {
  border-bottom: 1px solid var(--hairline);
  border-radius: 12px 12px 0 0;
}
.hqx .fold > summary b {
  font-size: 14.5px;
  font-weight: 800;
}
.hqx .fold > summary .sm {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
}
.hqx .fold-body {
  padding: 15px 17px 17px;
}
.hqx h2 + .fold {
  margin-top: 2px;
}
.oc {
  overflow-x: auto;
  padding: 2px 2px 18px;
  margin-bottom: 6px;
}
.oc-in {
  min-width: max-content;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.oc-stem {
  width: 2px;
  height: 20px;
  background: var(--border);
}
.oc-row {
  display: flex;
  gap: 16px;
  position: relative;
  padding-top: 20px;
  align-items: flex-start;
}
.oc-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 113px;
  right: 113px;
  height: 2px;
  background: var(--border);
}
.oc-branch {
  flex: 0 0 226px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.oc-branch::before {
  content: "";
  position: absolute;
  top: -20px;
  left: calc(50% - 1px);
  width: 2px;
  height: 20px;
  background: var(--border);
}
.oc-kids {
  margin-top: 14px;
  padding-left: 16px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.oc-kids::before {
  content: "";
  position: absolute;
  left: 7px;
  top: -14px;
  bottom: 16px;
  width: 2px;
  background: var(--border);
}
.oc-kids > * {
  position: relative;
}
.oc-kids > *::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 16px;
  width: 9px;
  height: 2px;
  background: var(--border);
}
.oc-node {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-1);
}
.oc-node > summary {
  list-style: none;
  cursor: pointer;
  padding: 9px 11px;
}
.oc-node > summary::-webkit-details-marker {
  display: none;
}
.oc-node > summary:hover {
  background: var(--sunken);
  border-radius: 10px;
}
.oc-node .pad {
  padding: 9px 11px;
}
.oc-node b {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.3;
}
.oc-node .r {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.35;
}
.oc-node .d {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 1px 8px;
  margin-bottom: 5px;
}
.oc-node.boss {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-1);
}
.oc-node.ac {
  border-color: var(--accent);
}
.oc-node .more {
  padding: 0 11px 11px;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.45;
}
.oc-node .more .ct {
  font-family:
    ui-monospace,
    Consolas,
    monospace;
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 6px;
  word-break: break-word;
}
.oc-node[open] > summary {
  border-bottom: 1px solid var(--hairline);
  border-radius: 10px 10px 0 0;
}
.tm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 14px;
}
.tm-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-1);
  padding: 16px 18px;
}
.tm-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.tm-ava {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  display: grid;
  place-content: center;
  font-weight: 800;
  font-size: 13.5px;
  flex: none;
}
.tm-name {
  font-weight: 800;
  font-size: 14.5px;
}
.tm-nums {
  margin-left: auto;
  display: flex;
  gap: 12px;
  text-align: right;
}
.tm-num i {
  display: block;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.tm-num b {
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.tm-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12.5px;
  color: var(--ink-2);
  font-weight: 600;
  margin-bottom: 10px;
}
.tm-meta .warn {
  color: var(--serious-text);
}
.tm-spark {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 34px;
  margin: 4px 0 8px;
}
.tm-bar {
  flex: 1;
  max-width: 16px;
  border-radius: 3px 3px 0 0;
  background: var(--accent-soft);
  min-height: 3px;
}
.tm-lv {
  font-size: 12.5px;
  color: var(--ink-2);
  border-top: 1px solid var(--hairline);
  padding-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}
.tm-lv b {
  font-weight: 700;
}
.tm-lv .dn {
  color: var(--crit-text);
}
.tm-lv .up {
  color: var(--good-text);
}
.tm-note {
  font-size: 11.5px;
  color: var(--muted);
  margin: 16px 0 0;
  line-height: 1.5;
}
.tm-empty {
  color: var(--muted);
  font-size: 13.5px;
}
.tm-p {
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}
.tm-p:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.tm-p b {
  font-size: 13.5px;
  display: block;
}
.tm-p .rl {
  font-size: 12.5px;
  color: var(--accent-ink);
  font-weight: 700;
}
.tm-p .ck {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.45;
  margin-top: 3px;
}
.tm-p .ct {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 4px;
  font-family:
    ui-monospace,
    Consolas,
    monospace;
  word-break: break-word;
}
.tm-people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0 22px;
  margin-top: 6px;
}
.tm-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 16px;
}
.tm-nav button {
  background: var(--sunken);
  color: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 12.5px;
}
.tm-nav button:hover {
  background: var(--hairline);
  color: var(--ink);
}
.tm-role {
  scroll-margin-top: 16px;
}
.tm-role > summary b {
  font-size: 16px;
  letter-spacing: -.01em;
}
.tm-role .who {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
}
.tm-ckp {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: 15px;
}
.tm-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 15px 26px;
}
.tm-blk h4 {
  margin: 0 0 6px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  font-weight: 800;
}
.tm-blk ul,
.tm-blk ol {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.tm-blk li {
  margin-bottom: 4px;
}
.tm-open {
  background: var(--serious-soft);
  color: var(--serious-text);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 12.5px;
  line-height: 1.45;
  margin-top: 14px;
}
.tm-week {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1150px) {
  .tm-week {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .tm-week {
    grid-template-columns: minmax(0, 1fr);
  }
}
.tm-day {
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}
.tm-day b {
  display: block;
  font-size: 12.5px;
  margin-bottom: 9px;
}
.tm-day .it {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 9px;
  font-size: 12.5px;
  margin-bottom: 7px;
  line-height: 1.42;
  color: var(--ink-2);
}
.tm-day .it i {
  font-style: normal;
  color: var(--muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tm-mt > summary b {
  font-size: 13.5px;
}
.tm-mt p {
  margin: 0 0 7px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.tm-mt p:last-child {
  margin-bottom: 0;
}
.tm-mt p.lbl span {
  color: var(--muted);
  font-weight: 700;
}
.tm-mt .imp {
  background: var(--serious-soft);
  color: var(--serious-text);
  border-radius: 10px;
  padding: 8px 11px;
  font-size: 12.5px;
  margin-top: 9px;
  line-height: 1.45;
}
.hqx .legend {
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  gap: 16px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.hqx .dotl {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  margin-right: 5px;
  vertical-align: -1px;
}
.hqx .grp-head {
  margin: 24px 0 4px;
  font-size: 15px;
  font-weight: 800;
}
.hqx tr.grp {
  cursor: pointer;
}
.hqx tr.grp.open td {
  background: var(--sunken);
}
.hqx .t .tog {
  color: var(--muted);
  text-align: center;
  user-select: none;
}
.hqx tr.grp-open td {
  padding-top: 0;
}
.hqx tr.grp-open:hover td {
  background: transparent;
}
.hqx .grp-panel {
  padding: 2px 0 12px;
}
#rubList > .t.fixed,
#fmtLeadList > .t.fixed {
  min-width: 860px;
}
#rubList > .t.fixed {
  min-width: 944px;
}
.hqx .grp-panel .rub-share {
  width: 84px;
}
.hqx .grp-panel .rub-pains {
  margin: 10px 0 4px;
}
.hqx .grp-panel textarea {
  overflow: hidden;
  max-width: 780px;
}
.hqx .grp-panel .t {
  margin-top: 10px;
}
.hqx .grp-panel .t th {
  font-size: 10.5px;
}
.hqx .rub-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 13px 15px;
  margin-bottom: 10px;
  background: var(--surface);
}
.hqx .rub-head {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.hqx .rub-card textarea {
  overflow: hidden;
  resize: vertical;
}
.hqx .rub-head b {
  font-size: 14.5px;
}
.hqx .ex {
  font-size: 12.5px;
  margin-top: 3px;
}
.hqx .kv {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.hqx .kv input:first-child {
  width: 210px;
}
.hqx .kv input:last-child {
  width: 110px;
}
@media (max-width: 560px) {
  .hqx .kv input,
  .hqx .kv input:first-child,
  .hqx .kv input:last-child {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }
}
.hqx .hint {
  font-size: 12.5px;
  color: var(--muted);
}
.hqx td.act {
  text-align: center;
  padding-left: 2px;
  padding-right: 2px;
  white-space: nowrap;
  width: 36px;
}
.hqx td.act.w {
  width: 82px;
}
.hqx td.act .mini {
  width: 100%;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
}
.hqx .star {
  font-size: 15px;
  line-height: 1;
  padding: 2px 6px;
  color: var(--muted);
}
.hqx .star.on {
  color: #e8a72b;
  border-color: #e8a72b;
}
.hqx .hide {
  font-size: 14.5px;
  line-height: 1;
  padding: 2px 6px;
  color: var(--muted);
}
.hqx .hide.on {
  color: #c2453c;
  border-color: #c2453c;
}
.hqx .seen {
  font-size: 14.5px;
  line-height: 1;
  padding: 2px 6px;
  color: var(--muted);
}
.hqx .seen.on {
  color: #2e7d5b;
  border-color: #2e7d5b;
}
.hqx button.mini.play {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-color: var(--accent-soft);
  font-weight: 700;
}
.hqx th.tip {
  text-decoration: underline dotted var(--hairline);
  text-underline-offset: 3px;
}
.hqx th.tip:hover {
  text-decoration-color: var(--muted);
}
.hqx .mono {
  font-family:
    ui-monospace,
    Consolas,
    monospace;
  font-size: 12.5px;
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 9px;
  word-break: break-all;
}
.hqx .empty {
  color: var(--muted);
  font-size: 13.5px;
  padding: 14px 0;
}
.hqx .trick {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: var(--surface);
}
.hqx .trick.top {
  border-left: 3px solid var(--accent);
}
.hqx .trick-head {
  display: flex;
  gap: 9px;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.hqx .trick-head b {
  font-size: 14.5px;
}
.hqx .trick p {
  margin: 0 0 7px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.hqx .trick .why {
  color: var(--muted);
  font-size: 12.5px;
}
.hqx .trick-ex {
  border-left: 2px solid var(--hairline);
  padding: 2px 0 2px 11px;
  margin-top: 7px;
  font-size: 12.5px;
}
.hqx .trick-ex q {
  color: var(--ink-2);
  font-style: italic;
}
.hqx .cap {
  max-width: 520px;
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.45;
}
.fb {
  margin: 4px 0 14px;
}
.fb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.fb-search {
  position: relative;
  flex: 0 1 280px;
  width: 280px;
  min-width: 190px;
}
.fb-search .ic {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--muted);
  pointer-events: none;
}
.fb-search input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 8px 12px 8px 32px;
  color: var(--ink);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
}
.fb-search input:focus {
  outline: none;
  border-color: var(--accent);
}
.fb-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  padding: 8px 13px;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .12s, color .12s;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
}
.fb-btn:hover,
.fb-btn[aria-expanded=true] {
  border-color: var(--accent);
  color: var(--accent-ink);
}
.fb-btn .ic {
  width: 15px;
  height: 15px;
}
.fb-btn[aria-expanded=false] .fb-lbl {
  display: none;
}
.fb-btn[aria-expanded=false] {
  padding-left: 11px;
  padding-right: 11px;
}
.fb-qbtn,
.hqx button.fb-qbtn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
}
.fb-qbtn[hidden] {
  display: none;
}
.fb-qbtn:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}
.fb-qbtn .ic {
  width: 15px;
  height: 15px;
}
.fb-cnt {
  background: var(--accent);
  color: #fff;
  border-radius: 20px;
  min-width: 18px;
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 800;
  text-align: center;
}
.fb-pop {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.fb-pop[hidden] {
  display: none;
}
.fb-panel {
  margin: 0 0 14px;
}
.fb-panel .fb-pop {
  margin-top: 0;
}
.fb-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 150px;
}
.fb-field > span {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  padding-left: 13px;
}
.fb-field select {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 7px 9px;
  color: var(--ink);
  width: 100%;
  line-height: 1.2;
}
.fb-field select:focus {
  outline: none;
  border-color: var(--accent);
}
.fb-tog {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 8px 11px;
  color: var(--ink-2);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
}
.fb-tog[aria-pressed=true] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.fb-reset {
  border: 0;
  background: none;
  padding: 8px 2px;
  color: var(--muted);
  cursor: pointer;
  margin-left: auto;
  align-self: flex-end;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
}
.fb-reset:hover {
  color: var(--accent-ink);
}
.fb-note {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
  margin-left: auto;
}
.fdef {
  position: relative;
  display: inline-flex;
  flex: none;
  align-self: center;
}
.fb-field ~ .fdef,
.pair ~ .fdef,
.fb-field ~ span:has(> .fdef),
.pair ~ span:has(> .fdef) {
  align-self: flex-end;
}
.fdef > button.fdef-btn,
.hqx .fdef > button.fdef-btn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  position: relative;
}
.fdef > button.fdef-btn:hover,
.fdef > button.fdef-btn[aria-expanded=true] {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: var(--surface);
}
.fdef > button.fdef-btn.on {
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-color: transparent;
}
.fdef > button.fdef-btn.off::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.fdef-btn .ic {
  width: 15px;
  height: 15px;
}
.fdef-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 70;
  width: max-content;
  max-width: min(300px, 86vw);
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(20, 25, 45, .16);
}
.fdef-menu[hidden] {
  display: none;
}
.fdef-menu > button,
.hqx .fdef-menu > button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
}
.fdef-menu > button:hover:not(:disabled) {
  background: var(--sunken);
  color: var(--ink);
}
.fdef-menu > button:disabled {
  color: var(--muted);
  opacity: .55;
  cursor: default;
}
@media (max-width: 620px) {
  .fb-search {
    flex: 1 1 100%;
  }
  .fb-field {
    min-width: 100%;
  }
  .fb-reset {
    margin-left: 0;
  }
}
.cx-tools > .work-views,
.cx-views > .work-views,
.tr-head > .work-views,
.tr-toprow > .work-views,
.cx-tools > .kn-mode {
  display: flex;
  margin: 0;
  flex-wrap: nowrap;
  gap: 0;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
}
.cx-tools > .kn-mode[hidden] {
  display: none;
}
.cx-tools > .work-views[hidden],
.cx-views > .work-views[hidden],
.tr-head > .work-views[hidden],
.tr-toprow > .work-views[hidden] {
  display: none;
}
.cx-tools > .work-views .chip,
.cx-views > .work-views .chip,
.tr-head > .work-views .chip,
.tr-toprow > .work-views .chip,
.cx-tools > .kn-mode .chip {
  border: 0;
  background: none;
  padding: 5px 11px;
  border-radius: 7px;
  font: 600 12.5px var(--font);
  color: var(--ink-2);
  box-shadow: none;
}
.cx-tools > .work-views .chip[aria-pressed=true],
.cx-views > .work-views .chip[aria-pressed=true],
.tr-head > .work-views .chip[aria-pressed=true],
.tr-toprow > .work-views .chip[aria-pressed=true],
.cx-tools > .kn-mode .chip[aria-pressed=true] {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.kn-tools {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
}
.kn-tools > #kanFilters {
  flex: 1 1 auto;
  min-width: 0;
}
.tr-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sec-acts {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}
.sec-alert {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  flex: none;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: #b08a52;
}
.sec-alert[hidden] {
  display: none;
}
.sec-alert:hover,
.sec-alert[aria-expanded=true] {
  border-color: #d9c19a;
  background: var(--serious-soft);
  color: var(--serious-text);
}
.sec-alert .ic {
  width: 18px;
  height: 18px;
}
.sec-alert.is-info {
  color: var(--ink-2);
}
.sec-alert.is-info:hover,
.sec-alert.is-info[aria-expanded=true] {
  border-color: var(--accent);
  background: var(--surface);
  color: var(--accent-ink);
}
.sec-acts:empty + .sec-fold {
  margin-left: auto;
}
.sec-acts:not(:empty) + .sec-fold {
  margin-left: 8px;
}
.sec-fold {
  margin-left: auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.sec-fold:hover {
  border-color: var(--border);
  color: var(--ink);
}
.sec-fold .ic {
  width: 15px;
  height: 15px;
  transform: rotate(90deg);
  transition: transform .15s;
}
body.sec-min .sec-fold .ic {
  transform: rotate(-90deg);
}
body.sec-min .sec-top {
  display: none;
}
.cx-adds.cx-adds-r {
  margin-left: auto;
}
.cx-adds {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cx-adds .btn {
  height: 34px;
  padding-top: 0;
  padding-bottom: 0;
}
.fb-btn {
  height: 34px;
}
.cx-tools > .work-views,
.cx-views > .work-views,
.tr-head > .work-views,
.tr-toprow > .work-views,
.cx-tools > .kn-mode {
  height: 34px;
}
.cx-adds.cx-adds-r .cx-addmenu {
  left: auto;
  right: 0;
}
@media (max-width: 520px) {
  .cx-adds {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}
.cx-views > .cx-adds.cx-adds-r {
  margin-left: 4px;
}
.scen-thead .scen-n {
  font-style: normal;
  font-weight: 700;
  color: var(--accent-ink);
  margin-left: 4px;
  letter-spacing: 0;
}
.sec-bar {
  position: relative;
}
.sec-tabsrow:has(.sec-tabs:empty):has(#workViews[hidden]) {
  position: absolute;
  top: 0;
  right: 0;
  height: 36px;
}
body.sec-min .sec-bar:has(.sec-tabs:empty):has(#workViews[hidden]) {
  min-height: 32px;
}
body:has(#sec-space:not([hidden])) .sec-bar .sec-tabsrow {
  display: none;
}
body.sec-min:has(#sec-space:not([hidden])) #secBar {
  min-height: 0;
  margin-bottom: 0;
}
.kw-load {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 4px;
  font-size: 13px;
  color: var(--muted);
}
.kw-dots {
  display: inline-flex;
  gap: 4px;
}
.kw-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .25;
  animation: kw-dot 1.1s infinite ease-in-out;
}
.kw-dots i:nth-child(2) {
  animation-delay: .15s;
}
.kw-dots i:nth-child(3) {
  animation-delay: .3s;
}
@keyframes kw-dot {
  0%, 80%, 100% {
    opacity: .25;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
.kw-ai {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  border-radius: 14px;
  background:
    linear-gradient(
      135deg,
      rgba(var(--accent-rgb), .08),
      rgba(236, 72, 153, .06));
  border: 1px solid rgba(var(--accent-rgb), .18);
  max-width: 100%;
}
.kw-orb {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      #6366f1,
      #a855f7,
      #ec4899,
      #f59e0b,
      #6366f1);
  animation: kw-spin 2.2s linear infinite;
  box-shadow: 0 0 18px rgba(139, 92, 246, .35);
}
.kw-orb::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--surface);
  background-image:
    radial-gradient(
      circle at 50% 50%,
      rgba(var(--accent-rgb), .22),
      transparent 70%);
  animation: kw-breathe 1.6s ease-in-out infinite;
}
@keyframes kw-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes kw-breathe {
  0%, 100% {
    transform: scale(.82);
  }
  50% {
    transform: scale(1);
  }
}
.kw-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.kw-txt b {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  background:
    linear-gradient(
      90deg,
      var(--ink) 0%,
      var(--accent) 50%,
      var(--ink) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: kw-shine 2.4s linear infinite;
}
.kw-txt small {
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
@keyframes kw-shine {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: 0 0;
  }
}
.kw-btn {
  position: relative;
}
.kw-btn::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: -1px;
  background:
    conic-gradient(
      #6366f1,
      #ec4899,
      #f59e0b,
      #6366f1);
  animation: kw-spin 1.4s linear infinite;
}
.kw-slow ~ * {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .kw-orb,
  .kw-orb::after,
  .kw-txt b,
  .kw-dots i,
  .kw-btn::before {
    animation: none;
  }
}
.sk {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 4px 0 18px;
  animation: sk-breathe 1.8s ease-in-out infinite;
}
.sk i,
.sk b {
  display: block;
  min-height: 12px;
  border-radius: var(--r-sm);
  background: var(--hairline);
}
.sk b {
  background: #e3e5eb;
}
@keyframes sk-breathe {
  50% {
    opacity: .55;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sk {
    animation: none;
  }
  .fade {
    transition: none;
  }
}
.sk-bar {
  display: flex;
  gap: 10px;
  align-items: center;
}
.sk-bar i {
  height: 32px;
  width: 90px;
  min-width: 0;
  flex: 0 1 auto;
  border-radius: var(--r-md);
}
.sk-bar i:first-child {
  width: 220px;
}
.sk-bar span {
  flex: 1;
}
.sk-bar i:last-child {
  width: 120px;
  background: rgba(var(--accent-rgb), .14);
}
.sk-today {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.sk-today > div {
  display: grid;
  gap: 12px;
  align-content: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 18px;
  min-height: 200px;
}
.sk-today b {
  width: 55%;
  height: 16px;
}
.sk-today i {
  height: 30px;
}
.sk-list {
  display: grid;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.sk-list > div {
  display: grid;
  grid-template-columns: 44px 1fr 1fr 60px;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
}
.sk-list > div + div {
  border-top: 1px solid var(--hairline);
}
.sk-list > div i:first-child {
  height: 44px;
  border-radius: var(--r-sm);
}
.sk-list > div b:nth-child(3) {
  width: 70%;
  background: var(--hairline);
}
.sk-tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.sk-tiles.sk-3 {
  grid-template-columns: repeat(3, 1fr);
}
.sk-tiles i {
  height: 112px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background:
    linear-gradient(var(--hairline), var(--hairline)) 18px 20px / 45% 11px no-repeat,
    linear-gradient(var(--hairline), var(--hairline)) 18px 44px / 60% 26px no-repeat,
    var(--surface);
}
.sk-3 i {
  height: 68px;
  background-position: 18px 16px, 18px 34px;
  background-size: 40% 10px, 55% 18px;
}
.sk-chart i {
  height: 300px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  background-image:
    linear-gradient(
      to top,
      var(--hairline) 0 1px,
      transparent 1px);
  background-size: 100% 25%;
}
.sk-two {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 12px;
}
.sk-two i {
  height: 220px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}
.sk-docb {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
}
.sk-nav {
  display: grid;
  gap: 8px;
  align-content: start;
}
.sk-nav i {
  height: 30px;
}
.sk-page {
  display: grid;
  gap: 12px;
  align-content: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 24px;
}
.sk-page b {
  width: 40%;
  height: 26px;
}
.sk-page > i {
  height: 48px;
}
.sk-text {
  display: grid;
  gap: 9px;
  padding-top: 6px;
}
.sk-text i {
  height: 12px;
}
.sk-text i:nth-child(3n) {
  width: 82%;
}
.sk-text i:last-child {
  width: 46%;
}
.sk-fun {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  height: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
}
.sk-fun i {
  flex: 1;
  border-radius: var(--r-sm) var(--r-sm) 2px 2px;
  background: rgba(var(--accent-rgb), .12);
}
.sk-panel {
  padding: 0;
}
.fade {
  opacity: 0;
  transition: opacity .3s ease-out;
}
.fade.on {
  opacity: 1;
}
@media (max-width: 760px) {
  .sk {
    overflow: hidden;
  }
  .sk-bar i:nth-child(n+3):not(:last-child) {
    display: none;
  }
  .sk-bar i:first-child {
    width: 150px;
  }
  .sk-docb,
  .sk-two {
    grid-template-columns: minmax(0, 1fr);
  }
  .sk-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
  .sk-tiles.sk-3 {
    grid-template-columns: 1fr;
  }
  .sk-tiles i:nth-child(5) {
    display: none;
  }
  .sk-chart i {
    height: 200px;
  }
  .sk-nav {
    grid-auto-flow: column;
    overflow: hidden;
  }
  .sk-nav i {
    width: 110px;
  }
  .sk-list > div {
    grid-template-columns: 44px 1fr 48px;
  }
  .sk-list > div b:nth-child(3) {
    display: none;
  }
}
.kw-host {
  display: block;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 8px 0;
  color: inherit;
}
.ed-fixpane .kw-ai {
  margin: 6px 0;
}
.lv-new {
  animation: lv-glow 6s ease-out;
  border-radius: var(--r-xs);
}
@keyframes lv-glow {
  0%, 40% {
    background: var(--ai-soft);
    box-shadow: 0 0 0 4px var(--ai-soft);
  }
  100% {
    background: transparent;
    box-shadow: 0 0 0 4px transparent;
  }
}
.lv-tag,
.dos-doc .lv-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--ai-soft);
  color: var(--ai);
  font: 600 11px/1.6 var(--font);
  white-space: nowrap;
  vertical-align: 1px;
}
.lv-note {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 12px;
  padding: 7px 8px 7px 14px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-2);
  border: 1px solid var(--ai-soft);
  color: var(--ink-2);
  font-size: 13px;
}
.lv-note::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ai);
}
.lv-note .lv-go {
  border: 0;
  background: none;
  padding: 2px 4px;
  color: var(--ai);
  font: 600 13px var(--font);
  white-space: nowrap;
  cursor: pointer;
}
.lv-note .lv-go::after {
  content: " →";
}
.lv-note .lv-x {
  border: 0;
  background: none;
  padding: 0 6px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.lv-held,
.dos-doc .lv-held {
  margin: 4px 0 8px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: var(--ai-soft);
  color: var(--ink-2);
  font-size: 12.5px;
}
.lv-held .lv-go {
  border: 0;
  background: none;
  padding: 0;
  color: var(--ai);
  font: 600 12.5px var(--font);
  cursor: pointer;
  text-decoration: underline;
}
.lv-held .lv-val {
  margin-top: 4px;
  color: var(--ink);
  white-space: pre-wrap;
}
@media (prefers-reduced-motion: reduce) {
  .lv-new {
    animation: none;
    background: var(--ai-soft) !important;
  }
}
@media (max-width: 760px) {
  .lv-note {
    border-radius: var(--r-lg);
    font-size: 12.5px;
  }
}

/* server/static/css/02-ideagen.css */
#ideaGen {
  margin-bottom: 16px;
}
.ig-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ig-title {
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ig-draft {
  font-size: 10.5px;
  font-weight: 700;
  color: #8a6100;
  background: #fff3d6;
  border-radius: 20px;
  padding: 2px 9px;
}
.ig-modes {
  display: flex;
  gap: 4px;
  margin-left: auto;
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
}
.ig-mode {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--muted);
  padding: 6px 13px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .12s;
}
.ig-mode:hover {
  color: var(--ink);
}
.ig-mode.on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}
.ig-body {
  margin-top: 14px;
}
.ig-pane {
  display: none;
}
.ig-pane.on {
  display: block;
}
.ig-sub {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 0 12px;
}
.ig-fld {
  margin-bottom: 12px;
}
.ig-lbl {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.ig-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ig-chip {
  appearance: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 12px;
  cursor: pointer;
  transition: all .12s;
}
.ig-chip:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}
.ig-chip[aria-pressed=true] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.ig-tree {
  margin: 4px 0;
}
.ig-row {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  margin-bottom: 7px;
  cursor: pointer;
  transition: all .12s;
}
.ig-row:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-1);
}
.ig-row.sel {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.ig-branch {
  margin: 0 0 8px 16px;
  border-left: 2px solid var(--border);
  padding-left: 14px;
}
.ig-tw {
  font-size: 13.5px;
  font-weight: 700;
  flex: 1;
  min-width: 150px;
}
.ig-row.leaf .ig-tw {
  font-weight: 600;
  font-style: italic;
  color: var(--ink);
}
.ig-row.leaf.sel .ig-tw {
  color: var(--accent-ink);
}
.ig-meta {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 700;
}
.ig-exp {
  font-size: 11.5px;
  color: var(--accent);
  font-weight: 800;
}
.ig-tag {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--sunken);
  color: var(--muted);
}
.ig-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
.ig-more {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  padding: 3px 7px;
  border-radius: 6px;
}
.ig-more:hover {
  color: var(--accent);
  background: var(--sunken);
}
.ig-mrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 8px;
}
.ig-reels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
@media (max-width: 640px) {
  .ig-reels {
    grid-template-columns: repeat(2, 1fr);
  }
}
.ig-reel {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px;
  background: var(--sunken);
}
.ig-reel.lock {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.ig-axis {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ig-lock {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 13.5px;
  opacity: .5;
}
.ig-reel.lock .ig-lock {
  opacity: 1;
}
.ig-win {
  min-height: 52px;
  display: flex;
  align-items: center;
  margin-top: 7px;
}
.ig-val {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
}
.ig-reel.spin .ig-val {
  animation: igblur .45s linear;
}
@keyframes igblur {
  0% {
    filter: blur(3px);
    opacity: .4;
    transform: translateY(-6px);
  }
  100% {
    filter: none;
    opacity: 1;
    transform: none;
  }
}
.ig-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 12px 0 0;
}
.ig-out,
.ig-concept {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 15px;
  background: var(--sunken);
}
.ig-out-idea {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  margin: 6px 0 0;
}
.ig-out-empty {
  font-size: 13.5px;
  color: var(--muted);
  margin: 6px 0 0;
}
.ig-hook {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--ink-2);
}
.ig-hook em {
  color: var(--ink);
  font-style: normal;
  font-weight: 700;
}
.ig-str {
  margin-top: 9px;
  font-size: 12.5px;
  color: var(--ai);
  font-weight: 800;
  letter-spacing: 1px;
}
.ig-note {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: normal;
}
.ig-status {
  font-size: 12.5px;
  font-weight: 700;
  color: #0f6b52;
}

/* server/static/css/03-kanban.css */
#sec-kanban {
  max-width: none;
}
.kn-views {
  margin: 4px 0 14px;
}
.kn-chip {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .12s;
}
.kn-chip:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}
.kn-chip[aria-pressed=true] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.kn-chip[aria-pressed=true] .kn-ava {
  background: rgba(255, 255, 255, .25);
  color: #fff;
}
.kn-ava {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 9.5px;
  font-weight: 800;
  display: inline-grid;
  place-content: center;
  flex: none;
}
.kn-board {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 14px;
  align-items: flex-start;
}
.kn-col {
  flex: 0 0 252px;
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 240px);
}
.kn-colhead {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 3px 6px 11px;
}
.kn-coltitle {
  font-size: 12.5px;
  font-weight: 800;
}
.kn-colsub {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 700;
}
.kn-count {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1px 8px;
  min-width: 20px;
  text-align: center;
}
.kn-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  min-height: 44px;
  padding: 2px;
  border-radius: 10px;
}
.kn-list.kn-over {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
  background: var(--accent-soft);
}
.kn-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 12px;
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: box-shadow .12s, border-color .12s;
}
.kn-card:hover {
  box-shadow: var(--shadow-2);
  border-color: var(--accent);
}
.kn-card.kn-drag {
  opacity: .45;
}
.kn-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
}
.kn-badge {
  font-size: 10.5px;
  font-weight: 800;
  border-radius: 6px;
  padding: 2px 7px;
  letter-spacing: .01em;
}
.kn-badge.idea {
  background: #fff3d6;
  color: #8a6100;
}
.kn-badge.reels {
  background: #e7e9ff;
  color: #3730a3;
}
.kn-badge.carousel {
  background: #dcf1ea;
  color: #0f6b52;
}
.kn-badge.headline {
  background: #eee;
  color: #555;
}
.kn-key {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 700;
  margin-left: auto;
}
.kn-card-title {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.32;
  color: var(--ink);
  margin: 0 0 9px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kn-card-foot {
  display: flex;
  align-items: center;
  gap: 7px;
}
.kn-card-foot .kn-ava {
  width: 20px;
  height: 20px;
  font-size: 10.5px;
}
.kn-who {
  font-size: 11.5px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kn-dots {
  margin-left: auto;
  display: inline-flex;
  gap: 2px;
  flex: none;
}
.kn-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e4e7ec;
}
.kn-board-empty {
  color: var(--muted);
  font-size: 13.5px;
  padding: 30px 6px;
}
.tk-sectlab {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 18px 0 7px;
}
.tk-stages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tk-sbtn {
  font-size: 11.5px;
  font-weight: 700;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-2);
  border-radius: 8px;
  padding: 5px 10px;
  cursor: pointer;
  transition: all .12s;
}
.tk-sbtn:hover:not(.on) {
  border-color: var(--accent);
  color: var(--accent-ink);
}
.tk-sbtn.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.tk-rows {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 4px 0;
}
.tk-row {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
}
.tk-row .k {
  color: var(--muted);
  min-width: 92px;
  font-weight: 700;
}
.tk-row .v {
  color: var(--ink);
}
.tk-text {
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px 15px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
  white-space: pre-wrap;
  max-height: 320px;
  overflow-y: auto;
}
.tk-review-btn {
  margin-top: 14px;
}
.tk-mform {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 6px 0 8px;
}
.tk-mfield label {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.tk-mfield input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 9px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  background: var(--surface);
}
.tk-mfield input:focus {
  outline: none;
  border-color: var(--accent);
}
.tk-mact {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tk-pub {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  font-size: 13px;
}
.tk-pub a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
}
.tk-pub a .ic {
  width: 14px;
  height: 14px;
}
.tk-pubnote {
  color: var(--muted);
  font-size: 12px;
}
.tk-pub .btn {
  margin-left: auto;
  padding: 5px 10px;
  font-size: 12.5px;
}
.tk-mstatus {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
}
.tk-fact {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 6px 0 10px;
}
.tk-fchip {
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 12px;
}
.tk-fchip i {
  display: block;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.tk-fchip b {
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.tk-verdict {
  font-size: 12.5px;
  line-height: 1.5;
  border-left: 3px solid var(--accent);
  background: var(--sunken);
  border-radius: 0 8px 8px 0;
  padding: 9px 12px;
  margin: 4px 0 10px;
  color: var(--ink-2);
}
.tk-verdict.good {
  border-left-color: var(--good);
}
.tk-verdict.warn {
  border-left-color: var(--serious);
}
.kn-metric {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-2);
  background: var(--sunken);
  border-radius: 6px;
  padding: 2px 7px;
  margin-left: auto;
  flex: none;
}
.tk-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.tk-acts .btn {
  font-size: 12.5px;
  padding: 7px 12px;
}
.tk-fav.on {
  color: #b07d05;
}
.tk-fav.on .ic {
  fill: currentColor;
}
.tk-danger:hover {
  color: var(--crit-text);
  border-color: var(--crit);
  background: var(--crit-soft);
}
.tk-ico {
  width: 14px;
  height: 14px;
  flex: none;
}
.ic.tk-ico.t-shoot {
  color: #c2410c;
}
.ic.tk-ico.t-meet {
  color: #0e7490;
}
.ic.tk-ico.t-edit {
  color: #7c3aed;
}
.ic.tk-ico.t-other {
  color: var(--ink-2);
}
.kn-task {
  border-left: 3px solid var(--border);
}
.kn-task.t-shoot {
  border-left-color: #c2410c;
}
.kn-task.t-meet {
  border-left-color: #0e7490;
}
.kn-task.t-edit {
  border-left-color: #7c3aed;
}
.kn-task.done .kn-card-title {
  color: var(--muted);
  text-decoration: line-through;
}
.kn-badge.task {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--sunken);
  color: var(--ink-2);
}
.kn-badge.task .tk-ico {
  width: 12px;
  height: 12px;
}
.kn-task .kn-key {
  font-variant-numeric: tabular-nums;
}
.kn-task .kn-card-foot {
  gap: 3px;
}
.kn-task .kn-card-foot .kn-who {
  margin-left: 4px;
}
.tk-nobody {
  color: var(--muted);
  font-size: 12px;
}
.tk-name {
  display: flex;
  align-items: center;
  gap: 9px;
}
.tk-name .tk-ico {
  width: 22px;
  height: 22px;
}
.tk-note {
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0 0;
}
.tk-sbtn:disabled {
  cursor: default;
  opacity: .7;
}
.tk-sbtn:disabled:hover {
  border-color: var(--border);
  color: var(--ink-2);
}
.tk-people {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.tk-person {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tk-link {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--accent-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-align: left;
}
.tk-link .ic {
  width: 14px;
  height: 14px;
}
.tk-link:hover {
  text-decoration: underline;
}
.tk-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
}
.tk-fld {
  display: block;
}
.tk-fld > span {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.tk-fld input,
.tk-fld textarea,
.tk-fld select {
  width: 100%;
  box-sizing: border-box;
}
.tk-fld textarea {
  resize: vertical;
  min-height: 92px;
}
.tk-types {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tk-types .kn-chip {
  min-height: 36px;
}
.tk-types .kn-chip .ic {
  width: 14px;
  height: 14px;
}
.tk-form .tk-dates {
  margin: 0;
  grid-template-columns: repeat(2, minmax(0, 170px));
}
.tk-save .btn {
  min-height: 38px;
}
.tk-minis {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.tk-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 8px 11px;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
}
.tk-mini:hover {
  border-color: var(--accent);
}
.tk-mini-t {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tk-mini-w {
  flex: none;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
}
.tk-mini.done .tk-mini-t {
  color: var(--muted);
  text-decoration: line-through;
}
.tk-addtask {
  font-size: 12.5px;
  padding: 7px 12px;
}
@media (max-width: 600px) {
  .tk-mini {
    flex-wrap: wrap;
  }
  .tk-mini-w {
    width: 100%;
    padding-left: 22px;
  }
}

/* server/static/css/04-space.css */
#sec-space {
  max-width: none;
}
.sp-doc {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 22px 0;
  align-items: start;
}
.sp-doc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-1);
  padding: 18px 0 22px 14px;
}
.sp-dside {
  grid-column: 1;
  grid-row: 1 / span 2;
  position: sticky;
  top: 84px;
  margin-right: 18px;
  padding-right: 4px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
.sp-dnav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sp-dmain [id] {
  scroll-margin-top: 84px;
}
.sp-dapp {
  margin-top: 16px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.sp-dapp > summary {
  cursor: pointer;
  list-style: none;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 8px;
}
.sp-dapp > summary::-webkit-details-marker {
  display: none;
}
.sp-dapp > summary::after {
  content: " ›";
}
.sp-dapp[open] > summary::after {
  content: " ⌄";
}
.sp-dapp > summary:hover {
  color: var(--ink-2);
}
.sp-dapp .sp-ditem {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  padding: 5px 10px;
}
.sp-dapp .sp-ditem.on {
  color: var(--accent-ink);
}
.sp-ditem {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  border: 0;
  background: none;
  font: 600 13.5px var(--font);
  color: var(--ink-2);
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.sp-ditem:hover {
  background: var(--sunken);
  color: var(--ink);
}
.sp-ditem.on {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.sp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--border);
}
.sp-dot.ok {
  background: var(--good-text);
}
.sp-dot.draft {
  background: var(--ai);
}
.sp-dot.wait {
  background: var(--serious-text);
}
#spDocSel {
  display: none;
}
.sp-dmain {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.sp-dmain {
  border-left: 1px solid var(--hairline);
  padding: 4px 28px 0;
  min-width: 0;
  align-self: stretch;
}
.sp-dmain:empty {
  display: none;
}
.sp-dmain.sp-loading {
  opacity: .45;
  transition: opacity .15s;
  pointer-events: none;
}
.sp-dmain .sp-shead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.sp-shead h2 {
  margin: 0 !important;
}
.sp-hacts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.sp-hacts .ed-count {
  font: 600 12px var(--font);
  letter-spacing: 0;
  text-transform: none;
  border: 0;
  border-radius: 999px;
  padding: 5px 11px;
  cursor: pointer;
  color: var(--accent-ink);
  background: var(--accent-soft);
}
.sp-hacts .ed-count:hover,
.sp-hacts .ed-count.on {
  color: #fff;
  background: var(--accent);
}
.sp-hacts .ed-count.done {
  color: var(--muted);
  background: var(--sunken);
}
.sp-hacts .ed-count.fold::after {
  content: " ›";
}
.sp-dmain h2 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.03em;
  margin: 8px 0 6px;
}
.sp-dmain .sp-why {
  font-size: 12.5px;
  margin-bottom: 16px;
}
.sp-dmain .sp-body {
  border-top: 1px solid var(--hairline);
  padding-top: 18px;
}
.sp-dmain .sp-sfoot {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.sp-dmain .sp-sfoot .note {
  font-size: 11.5px;
  color: var(--muted);
  margin-right: auto;
}
@media (max-width: 900px) {
  .sp-doc {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 12px;
  }
  .sp-dnav {
    display: none;
  }
  #spDocSel {
    display: flex;
    height: 40px;
    width: 100%;
  }
  .sp-doc {
    padding: 14px;
  }
  .sp-dside {
    grid-row: auto;
    position: static;
    max-height: none;
    overflow: visible;
    margin-right: 0;
    padding-right: 0;
  }
  .sp-dmain {
    grid-column: 1;
    grid-row: auto;
    border-left: 0;
    padding: 4px 2px 0;
  }
}
.sp-qchip.q-good {
  background: var(--good-soft);
  color: var(--good-text);
}
.sp-qchip.q-mid {
  background: #fdf3dc;
  color: #9a6a12;
}
.sp-qchip.q-bad {
  background: var(--serious-soft);
  color: var(--serious-text);
}
.sp-qchip {
  border: 0;
  cursor: pointer;
  font: 800 10.5px var(--font);
  border-radius: 6px;
  padding: 5px 9px;
}
.sp-qchip[aria-expanded=true] {
  box-shadow: 0 0 0 2px currentColor inset;
}
.sp-qbox {
  background: var(--sunken);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0 0 16px;
}
.sp-qbox ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sp-qbox li {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  font-size: 13px;
  line-height: 1.45;
}
.sp-qbox li > i {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  border-radius: 6px;
  padding: 2px 6px;
  align-self: start;
  text-align: center;
  background: var(--surface);
  color: var(--muted);
}
.sp-qbox li.sev-high > i {
  color: var(--serious-text);
  background: var(--serious-soft);
}
.sp-qbox li.sev-medium > i {
  color: #9a6a12;
  background: #fdf3dc;
}
.sp-qbox small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}
.sp-qgo {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--accent-ink);
  cursor: pointer;
  text-align: left;
}
.sp-qgo:hover {
  text-decoration: underline;
}
.sp-qnote {
  font-size: 11.5px;
  color: var(--muted);
  margin: 10px 0 0;
}
.sp-qfix {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}
.sp-qfix .btn {
  font-size: 12.5px;
  padding: 7px 12px;
}
.sp-qfix span {
  flex: 1 1 260px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.sp-qres {
  background: var(--good-soft);
  color: var(--good-text);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 600;
  margin: 0 0 12px;
}
.sp-body .sp-flash {
  background: var(--accent-soft) !important;
  transition: background .3s;
}
.sp-dtools {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.sp-dtools .sp-tool {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  padding: 6px 10px;
}
.sp-dtools .sp-tool:hover {
  color: var(--ink-2);
}
.sp-dtools .sp-tool.on {
  color: var(--accent-ink);
}
.sp-dtools[hidden] {
  display: none;
}
.sp-tool[hidden] {
  display: none;
}
.sp-tool > span {
  flex: 1;
  min-width: 0;
}
.sp-tool > b {
  flex: none;
  background: var(--accent);
  color: #fff;
  border-radius: var(--r-pill);
  padding: 0 7px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.sp-tool:disabled {
  opacity: .55;
  cursor: default;
}
.sp-tool.on {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.sp-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 16px;
}
.sp-facts .btn {
  font-size: 12.5px;
  padding: 7px 12px;
}
.sp-facts .ag-was {
  font-size: 12.5px;
  color: var(--muted);
}
.sp-body section.sp-fblk {
  margin: 0 0 22px;
}
.sp-body .sp-fh {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 4px;
}
.sp-body .sp-fh > span {
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.sp-body .sp-fh > b {
  font-size: 16px;
  font-weight: 800;
}
.sp-body .sp-fh .sp-fgo {
  border: 0;
  background: none;
  padding: 0;
  font: 800 16px var(--font);
  color: var(--ink);
  cursor: pointer;
}
.sp-body .sp-fh .sp-fgo::after {
  content: " ›";
  color: var(--muted);
}
.sp-body .sp-fh .sp-fgo:hover {
  color: var(--accent-ink);
}
.sp-layers {
  display: grid;
  grid-template-columns: 44px repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 14px;
  align-items: stretch;
}
#sec-space.sp-over-on .sp-tiles {
  padding-left: 58px;
}
#sec-space.sp-building .sp-layer {
  cursor: default;
}
.sp-over {
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-1);
  transition: border-color .14s, color .14s;
}
.sp-over:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}
.sp-over[aria-pressed=true] {
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-color: transparent;
}
.sp-over[aria-pressed=true]:hover {
  border-color: var(--accent);
}
.sp-over .ic {
  width: 18px;
  height: 18px;
}
.sp-lpc {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.sp-lpc.done {
  color: var(--muted);
  font-weight: 500;
}
.sp-layer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: var(--shadow-1);
  transition: border-color .14s, background .14s;
}
.sp-layer:hover {
  border-color: var(--accent);
}
#sec-space:not(.sp-over-on) .sp-layer[aria-selected=false] {
  opacity: .5;
  transition: opacity .14s, border-color .14s;
}
#sec-space:not(.sp-over-on) .sp-layer[aria-selected=false]:hover {
  opacity: 1;
}
.sp-layer .t {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.01em;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-keys {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-1);
}
.sp-keys h3 {
  font-size: 14.5px;
  font-weight: 800;
  margin: 0 0 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.sp-keys h3 span {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
}
.sp-key {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
  font-size: 12.5px;
}
.sp-key i {
  font-style: normal;
  color: var(--muted);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.sp-key button {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  padding: 0;
}
.sp-key button:hover {
  color: var(--accent-ink);
}
.sp-key em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
}
.sp-key em.ok {
  color: var(--good-text);
}
.sp-key em.wait {
  color: var(--serious-text);
}
.sp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 800;
  border-radius: 6px;
  padding: 5px 9px;
}
.sp-chip::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.sp-chip.ok {
  background: var(--good-soft);
  color: var(--good-text);
}
.sp-chip.draft {
  background: var(--ai-soft);
  color: var(--ai);
}
.sp-chip.wait {
  background: var(--serious-soft);
  color: var(--serious-text);
}
.sp-chip.empty {
  background: var(--sunken);
  color: var(--muted);
}
.sp-why {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: -2px 0 0;
}
.sp-blank {
  background: var(--ai-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.ld-tbl tr.ld-cl.many {
  cursor: pointer;
}
.ld-tbl tr.ld-cl.many:hover td {
  background: var(--sunken);
}
.ld-tbl .ld-n {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 1px 8px;
}
.ld-tbl tr.ld-sub td {
  font-size: 12.5px;
  color: var(--ink-2);
  background: var(--sunken);
}
.ld-tbl td.ld-cnt {
  text-align: center;
  color: var(--muted);
}
.ld-tbl .ld-n {
  margin-left: 0;
}
.ld-tbl .ld-note {
  font-size: 11px;
  font-weight: 500;
  color: var(--serious-text);
  margin-top: 2px;
  white-space: normal;
}
.ld-tbl tr.ld-sub td:first-child {
  padding-left: 22px;
}
.nb-form {
  display: grid;
  gap: 12px;
}
.nb-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.nb-form input,
.nb-form select {
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 11px;
  color: var(--ink);
  background: var(--surface);
}
.nb-form input {
  font: 14px var(--font);
}
.nav-assist {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: 650 13px var(--font);
  cursor: pointer;
  margin-right: 8px;
}
.nav-assist:hover,
body.ast-on .nav-assist {
  border-color: var(--accent);
  color: var(--accent-ink);
}
.ast {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 100vw);
  z-index: 90;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -14px 0 34px rgba(20, 25, 45, .12);
  display: flex;
  flex-direction: column;
  font-family: var(--font);
}
.ast[hidden] {
  display: none;
}
.ast-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--hairline);
}
.ast-head b {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 800;
}
.ast-ttl {
  min-width: 0;
}
.ast-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 6px;
}
.ast-where {
  font-size: 12px;
  color: var(--muted);
  min-width: 0;
}
.ast-whowrap {
  position: relative;
}
.ast-who {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  max-width: 240px;
  padding: 0 8px 0 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font: 650 12.5px var(--font);
  cursor: pointer;
}
.ast-who:hover,
.ast-who[aria-expanded=true] {
  border-color: var(--accent);
}
.ast-who span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ast-who .ic {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--muted);
}
.ast-who .ast-chev {
  width: 12px;
  height: 12px;
  transform: rotate(90deg);
}
.ast-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 2;
  width: 300px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 30px rgba(20, 25, 45, .16);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ast-menu[hidden] {
  display: none;
}
.ast-mi {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--ink);
  font: 13.5px var(--font);
  text-align: left;
  cursor: pointer;
}
.ast-mi:hover,
.ast-mi:focus-visible {
  background: var(--sunken);
  outline: none;
}
.ast-mi > span {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ast-mi b {
  font-weight: 700;
  overflow-wrap: anywhere;
}
.ast-mi small {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}
.ast-mi > .ic,
.ast-mi > .ai-orb {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--muted);
}
.ast-mi .ast-mon {
  color: var(--accent);
}
.ast-mi.is-add {
  border-top: 1px solid var(--hairline);
  border-radius: 0 0 var(--r-md) var(--r-md);
}
.ast-mi.is-add b {
  color: var(--accent-ink);
}
.ast-mwait {
  margin: 0;
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--muted);
}
.ast-x {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--muted);
  padding: 4px;
}
.ast-x .ic {
  width: 18px;
  height: 18px;
}
.ast-log {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ast-empty {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 34px;
  margin: auto 0;
  padding: 0 8px;
}
.ai-orb {
  position: relative;
  flex: none;
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 28% 30%,
      #38bdf8 0,
      rgba(56, 189, 248, 0) 55%),
    radial-gradient(
      circle at 74% 34%,
      #a855f7 0,
      rgba(168, 85, 247, 0) 58%),
    radial-gradient(
      circle at 46% 80%,
      #ec4899 0,
      rgba(236, 72, 153, 0) 62%),
    #6366f1;
  box-shadow: 0 0 8px rgba(139, 92, 246, .45);
  animation: orb-spin 7s linear infinite, orb-blob 6s ease-in-out infinite;
}
.ai-orb::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(
      circle at 32% 28%,
      rgba(255, 255, 255, .85),
      rgba(255, 255, 255, 0) 42%);
}
.ai-orb.lg {
  width: 84px;
  height: 84px;
  box-shadow: 0 0 34px rgba(139, 92, 246, .45), 0 0 80px rgba(236, 72, 153, .18);
}
.ai-orb.lg::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 2px solid rgba(139, 92, 246, .35);
  animation: orb-ring 2.8s ease-out infinite;
}
@keyframes orb-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes orb-blob {
  0%, 100% {
    border-radius: 50%;
    scale: 1;
  }
  33% {
    border-radius: 46% 54% 52% 48%;
    scale: 1.05;
  }
  66% {
    border-radius: 54% 46% 48% 52%;
    scale: .95;
  }
}
@keyframes orb-ring {
  from {
    transform: scale(.8);
    opacity: .9;
  }
  to {
    transform: scale(1.35);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ai-orb,
  .ai-orb.lg::after {
    animation: none;
  }
}
.ast-msg {
  max-width: 92%;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
}
.ast-msg.me {
  align-self: flex-end;
  background: var(--accent-soft);
  color: var(--ink);
  border-bottom-right-radius: 4px;
}
.ast-msg.ai {
  align-self: flex-start;
  background: var(--sunken);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}
.ast-msg.err {
  color: #b3261e;
}
.ast-msg.wait {
  color: var(--muted);
}
.ast-cost {
  align-self: flex-start;
  margin: -6px 0 0 4px;
  font-size: 12px;
  color: var(--muted);
}
.ast-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.ast-act {
  height: 30px;
  font-size: 12.5px;
}
.ast-plan {
  align-self: stretch;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 11px 13px;
  background: var(--surface);
  font-size: 13.5px;
  line-height: 1.45;
}
.ast-plan > b {
  display: block;
  font-weight: 750;
}
.ast-plan ol {
  margin: 6px 0 0;
  padding-left: 20px;
  color: var(--ink);
}
.ast-plan li + li {
  margin-top: 3px;
}
.ast-res {
  margin: 9px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.ast-res.ok {
  color: var(--good-text);
  font-weight: 650;
}
.ast-res.err {
  color: var(--crit-text);
}
.ast-form {
  display: flex;
  gap: 8px;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--hairline);
}
.ast-form textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 9px 11px;
  font: 14px/1.45 var(--font);
  min-height: 42px;
  max-height: 140px;
}
.ast-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.ast-form .btn {
  width: 42px;
  height: 42px;
  padding: 0;
  justify-content: center;
}
@media (max-width: 620px) {
  .nav-assist span {
    display: none;
  }
  .nav-assist {
    padding: 0 11px;
    margin-right: 4px;
  }
}
.sp-body.dos-doc {
  --sans: var(--font);
  --serif: var(--font);
  --mono: var(--font);
  font-size: 14.5px;
}
.sp-body.dos-doc h2 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.sp-body.dos-doc h3,
.sp-body.dos-doc th {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
}
.sp-body.dos-doc .stat b {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.sp-body.dos-doc .tpl .tpl-lead {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}
.sp-body.dos-doc .tpl dl.facts {
  font-size: 14.5px;
}
.sp-body.dos-doc .tpl .tpl-qa dt {
  font-size: 13.5px;
}
.sp-body.dos-doc .tpl .tpl-stat dd {
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.sp-body.dos-doc .tpl .tpl-stat dt {
  font-size: 12.5px;
}
.sp-body.dos-doc .tpl .tpl-topic h3,
.sp-body.dos-doc .tpl-regs .tpl-h {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.sp-body.dos-doc .tpl .tpl-topic .tpl-n {
  font-size: 12.5px;
  font-weight: 700;
}
.sp-body .tpl {
  font-family: var(--font);
  color: var(--ink);
}
.sp-body .tpl > .sec-head {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  border: 0;
  padding: 0;
  min-height: 0;
}
.sp-body .tpl > .sec-head:empty {
  display: none;
}
.sp-body .tpl .ed-count {
  font: 600 12px var(--font);
  letter-spacing: 0;
  text-transform: none;
  border-radius: 999px;
  padding: 4px 11px;
  color: var(--accent-ink);
  background: var(--accent-soft);
}
.sp-body .tpl .ed-count:hover,
.sp-body .tpl .ed-count.on {
  color: #fff;
  background: var(--accent);
}
.sp-body .tpl .ed-count.done {
  color: var(--muted);
  background: var(--sunken);
}
.sp-body section.tpl[data-edit="1"] .facts dd[data-k]:hover {
  background: var(--sunken);
  box-shadow: 0 0 0 6px var(--sunken);
  border-radius: 6px;
}
.sp-body .tpl .facts dd.ed-none::after {
  display: none;
}
.sp-body .tpl .tpl-stat dd small {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0;
  margin-top: 1px;
}
.sp-body .tpl dl.facts {
  display: block;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  font-size: 14px;
  line-height: 1.55;
}
.sp-body .tpl dl.facts dt,
.sp-body .tpl dl.facts dd {
  max-width: none;
}
.sp-body .tpl .tpl-leadbox dt {
  display: none;
}
.sp-body .tpl .tpl-leadbox.open dt.ed-gap {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
}
.sp-body .tpl .tpl-lead {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 18px;
}
.sp-body .tpl .tpl-lead p {
  margin: 0 0 8px;
}
.sp-body .tpl dl.facts.tpl-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin: 0 0 24px;
}
.sp-body .tpl .tpl-stat {
  background: var(--sunken);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 2px;
}
.sp-body .tpl dl.facts.tpl-bul {
  margin: 0 0 22px;
}
.sp-body .tpl .tpl-bi {
  display: list-item;
  list-style: disc;
  margin: 0 0 8px 18px;
}
.sp-body .tpl .tpl-bi::marker {
  color: var(--muted);
}
.sp-body .tpl .tpl-bi dt {
  display: inline;
  font-weight: 700;
  color: var(--ink);
  font-size: inherit;
  padding: 0;
  border: 0;
}
.sp-body .tpl .tpl-bi dt::after {
  content: ": ";
}
.sp-body .tpl .tpl-bi dd {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
}
.sp-body .tpl .tpl-bi dd > p {
  display: inline;
  margin: 0;
}
.sp-body .tpl .tpl-bi dd > p + p,
.sp-body .tpl .tpl-bi dd > ul {
  display: block;
  margin-top: 4px;
}
.sp-body .tpl .tpl-bi .tpl-meta {
  display: block;
  margin-top: 3px;
}
.sp-body.dos-doc .tpl .tpl-bi dt.ed-gap,
.sp-body.dos-doc .tpl .tpl-bi dd.ed-gap {
  display: inline;
}
.sp-body.dos-doc .tpl .tpl-bul.fold:not(.open) .tpl-bi:has(.ed-gap) {
  display: none;
}
.sp-body .tpl .tpl-stat dd {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
}
.sp-body .tpl .tpl-stat dt {
  font-size: 12px;
  color: var(--muted);
}
.sp-body .tpl-topic {
  margin: 0;
  border-top: 1px solid var(--hairline);
}
.sp-body .tpl-topic > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  padding: 14px 0;
}
.sp-body .tpl-topic > summary::-webkit-details-marker {
  display: none;
}
.sp-body .tpl-topic > summary::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform .15s;
  margin: 0 3px;
}
.sp-body .tpl-topic[open] > summary::before {
  transform: rotate(45deg);
}
.sp-body .tpl-topic > summary:hover h3 {
  color: var(--accent-ink);
}
.sp-body .tpl-topic .tpl-n {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.sp-body .tpl-topic[open] {
  padding-bottom: 12px;
}
.sp-body .tpl-topic > summary h3 {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.sp-body .tpl-topic.tpl-bare {
  display: none;
}
.sp-body .tpl-topic.tpl-bare:has(.fold.open) {
  display: block;
}
.sp-body .tpl-topic h3,
.sp-body .tpl-regs .tpl-h,
.sp-body .tpl .tpl-h {
  font: 800 16px var(--font);
  letter-spacing: -.01em;
  margin: 0 0 8px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  color: var(--ink);
  text-transform: none;
}
.sp-body .tpl dl.facts.tpl-qa {
  display: grid;
  grid-template-columns: minmax(170px, 30%) 1fr;
  column-gap: 24px;
}
.sp-body .tpl .tpl-qa dt {
  color: var(--muted);
  font-size: 13px;
  padding: 9px 0;
  line-height: 1.45;
}
.sp-body .tpl .tpl-qa dd {
  padding: 8px 0 10px;
  color: var(--ink);
}
.sp-body .tpl .tpl-qa dt + dd {
  border-bottom: 1px solid var(--hairline);
}
.sp-body .tpl .tpl-qa dt {
  border-bottom: 1px solid var(--hairline);
}
.sp-body .tpl .tpl-qa dt small {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  opacity: .8;
}
.sp-body .tpl .tpl-qa dd p {
  margin: 0 0 6px;
}
.sp-body .tpl .tpl-qa dd p:last-of-type {
  margin-bottom: 0;
}
.sp-body .tpl .tpl-list {
  margin: 0;
  padding-left: 18px;
}
.sp-body .tpl .tpl-list li {
  margin: 0 0 4px;
}
.sp-body .tpl .tpl-list li::marker {
  color: var(--muted);
}
.sp-body .tpl .tpl-meta {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}
.sp-body .tpl .tpl-ai {
  font-weight: 800;
  color: var(--accent-ink);
}
.sp-body .tpl .tpl-go {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 0 8px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.sp-body .tpl .tpl-go::after {
  content: "›";
}
.sp-body .tpl .tpl-go:hover {
  background: var(--accent);
  color: #fff;
}
.sp-body .tpl .tpl-who {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  background: var(--sunken);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 4px;
  white-space: nowrap;
}
.sp-body .tpl dd.ed-none {
  color: var(--muted);
  font-style: normal;
}
.sp-body .tpl dd.tpl-ro {
  cursor: default;
}
.sp-body .tpl-regs {
  margin: 4px 0 22px;
}
.sp-body .tpl-regs .tpl-reg > .sec-head {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: -34px 0 8px;
  border: 0;
  padding: 0;
  min-height: 26px;
}
.sp-body .tpl-regs.empty {
  margin: 0 0 12px;
}
.sp-body .tpl-regs.empty .tpl-reg > .sec-head {
  margin: 0;
}
.sp-body .tpl-regs .claims {
  gap: 8px;
  margin: 0 0 12px;
}
.sp-body .tpl-regs .claims .cl {
  font: 14px/1.5 var(--font);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  background: var(--surface);
}
.sp-body .tpl-regs .claims .cl b {
  font-weight: 700;
}
.sp-body .tpl-regs .claims .cl span {
  color: var(--ink-2);
}
.sp-body .tpl-regs .claims .cl i {
  display: inline-block;
  font: 700 11px var(--font);
  letter-spacing: 0;
  text-transform: none;
  border-radius: 999px;
  padding: 1px 8px;
  margin-top: 6px;
  background: var(--sunken);
  color: var(--muted);
}
.sp-body .tpl-regs .claims .cl[data-st=факт],
.sp-body .tpl-regs .claims .cl[data-st=проверено] {
  border-left-color: #2f9e6e;
}
.sp-body .tpl-regs .claims .cl[data-st=факт] i,
.sp-body .tpl-regs .claims .cl[data-st=проверено] i {
  background: #e5f5ee;
  color: #1f7a52;
}
.sp-body .tpl-regs .claims .cl[data-st="не хватает данных"] {
  border-left-color: #d49a2a;
}
.sp-body .tpl-regs .claims .cl[data-st="не хватает данных"] i {
  background: #fbf1dc;
  color: #9a6a12;
}
.sp-body .tpl-regs .claims .cl[data-st=гипотеза] {
  border-left-color: var(--border);
}
.sp-body .tpl-regs .acts {
  font-family: var(--font);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--sunken);
  padding: 12px 16px;
  margin: 0 0 12px;
}
.sp-body .tpl-regs .acts-h {
  font: 800 12px var(--font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 8px;
}
.sp-body .tpl-regs .acts ol {
  font-size: 14px;
  gap: 10px;
}
.sp-body .tpl-regs .acts ol p:not(.fix) {
  display: none;
}
.sp-body .tpl-regs .acts ol p.fix {
  border-left: 0;
  padding-left: 0;
  margin-top: 2px;
  color: var(--ink-2);
}
.sp-body .tpl-regs .acts ol > li > i {
  font: 700 11px var(--font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent-ink);
}
.sp-body .tpl-regs .claims + .claims {
  margin-top: -4px;
}
.sp-body .tpl-regs .acts:has(+ .acts) {
  margin-bottom: 0;
  border-bottom: 0;
  padding-bottom: 2px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.sp-body .tpl-regs .acts + .acts {
  border-top: 0;
  padding-top: 2px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.sp-body .tpl-regs .acts + .acts .acts-h {
  display: none;
}
.sp-body .tpl-regs .ed-ai-btn {
  font: 600 12px var(--font);
  letter-spacing: 0;
  text-transform: none;
  border-radius: 999px;
}
.sp-body .tpl-more {
  margin: 8px 0 0;
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
}
.sp-body .tpl-more > summary {
  cursor: pointer;
  font: 700 13.5px var(--font);
  color: var(--ink-2);
  width: max-content;
}
.sp-body .tpl-more > summary:hover {
  color: var(--accent-ink);
}
.sp-body .tpl-legacy {
  margin-top: 12px;
}
@media (max-width: 640px) {
  .sp-body .tpl dl.facts.tpl-qa {
    grid-template-columns: 1fr;
  }
  .sp-body .tpl dl.facts.tpl-qa dt {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .sp-body .tpl dl.facts.tpl-stats {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 1180px) {
  .sp-layers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sp-over {
    grid-column: 1 / -1;
    justify-self: start;
    width: 44px;
    height: 34px;
  }
  #sec-space.sp-over-on .sp-tiles {
    padding-left: 0;
  }
}
@media (max-width: 900px) {
  .sp-layers {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
.sp-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.sp-tcol {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.sp-tile {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: stretch;
  text-align: left;
  height: 104px;
  font-family: inherit;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: var(--shadow-1);
  color: var(--ink);
  min-width: 0;
  transition:
    border-color .14s,
    transform .14s,
    opacity .3s;
}
.sp-tile:hover {
  border-color: var(--accent);
}
.sp-tile:active {
  transform: scale(.99);
}
.sp-tile-h {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.sp-tile-i {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.sp-tile-i .ic {
  width: 17px;
  height: 17px;
}
.sp-tile-t {
  flex: 0 1 auto;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.005em;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-tag,
.sp-tile-h .sp-tile-q,
.sp-tile-h .sp-tile-n {
  flex: none;
  margin-left: auto;
  white-space: nowrap;
}
.sp-tag {
  font-size: 11.5px;
  font-weight: 500;
  border-radius: 6px;
  padding: 3px 8px;
}
.sp-tag.ok {
  background: var(--good-soft);
  color: var(--good-text);
}
.sp-tag.draft {
  background: var(--ai-soft);
  color: var(--ai);
}
.sp-tag.wait {
  background: var(--serious-soft);
  color: var(--serious-text);
}
.sp-tag.empty {
  background: var(--sunken);
  color: var(--muted);
}
.sp-tile-w {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sp-tile-none {
  font-size: 12.5px;
  color: var(--muted);
  padding: 10px 4px;
}
@media (max-width: 1180px) {
  .sp-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .sp-tiles {
    grid-template-columns: 1fr;
  }
}
.spp-gr {
  display: grid;
  gap: 8px;
  margin: 14px 0 6px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--sunken);
  font-size: 14.5px;
  line-height: 1.5;
}
.spp-gr-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 4px 14px;
  align-items: baseline;
}
.spp-gr-k {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  cursor: default;
}
.spp-gr-v p {
  margin: 0 0 4px;
}
.spp-gr-v p:last-child {
  margin-bottom: 0;
}
.spp-gr .ch-mini {
  margin-left: 6px;
  vertical-align: 1px;
}
.plf-muted {
  font-size: 12.5px;
  color: var(--muted);
}
@media (max-width: 640px) {
  .spp-gr-row {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px) {
  .plf-row {
    grid-template-columns: 1fr;
    padding: 14px 0;
  }
}
.sb {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 18px;
  margin: 0 0 16px;
  box-shadow: var(--shadow-1);
}
.sb-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.sb-head b {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.sb-head span {
  font-size: 12.5px;
  color: var(--muted);
}
.sb-head .sec-info {
  display: none;
}
.sb.is-done .sb-head .sec-info {
  display: inline-grid;
}
.sb-fold {
  margin-left: auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
}
.sb-fold:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}
.sb-fold .ic {
  transform: rotate(90deg);
  transition: transform .25s ease;
}
.sb.is-fold .sb-fold .ic {
  transform: none;
}
.sb-fbox {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .35s ease;
}
.sb-fbox > .sb-body {
  min-height: 0;
  overflow: hidden;
}
.sb.is-fold .sb-fbox {
  grid-template-rows: 0fr;
}
.sb.is-fold .sb-head {
  margin-bottom: 0;
}
.sb {
  transition: opacity .4s ease;
}
.sb.is-gone {
  opacity: 0;
}
.sb.is-fold:not(.is-done) .sb-prog {
  margin: 12px 0 0;
}
.sb-prog {
  display: grid;
  grid-template-rows: 1fr;
  margin: 0 0 16px;
  transition:
    grid-template-rows .5s ease,
    opacity .4s ease,
    margin .5s ease;
}
.sb.is-done .sb-prog {
  grid-template-rows: 0fr;
  opacity: 0;
  margin-bottom: 0;
}
.sb-pin {
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
}
.sb-pbar {
  flex: 1;
  height: 10px;
  border-radius: var(--r-pill);
  background: rgba(var(--accent-rgb), .14);
  overflow: hidden;
}
.sb-pbar > i {
  position: relative;
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width .8s ease;
  overflow: hidden;
}
.sb-pbar > i::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      transparent 20%,
      rgba(255, 255, 255, .35) 50%,
      transparent 80%);
  animation: sbShine 1.6s linear infinite;
}
#sbStep {
  flex: none;
  font-size: 13px;
  font-weight: 650;
  color: var(--accent-ink);
  white-space: nowrap;
}
.sb-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 16px;
}
.sb-map {
  position: relative;
  height: 280px;
  border-radius: 12px;
  background: var(--sunken);
  overflow: hidden;
}
.sb-mgrid,
.sb-plot {
  position: absolute;
  left: 52px;
  right: 24px;
  top: 26px;
  bottom: 32px;
}
.sb-ty {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px solid var(--hairline);
}
.sb-tx {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed var(--hairline);
}
.sb-ty b,
.sb-tx b {
  position: absolute;
  font: 600 10.5px var(--font);
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sb-ty b {
  right: calc(100% + 8px);
  transform: translateY(-50%);
}
.sb-tx b {
  top: calc(100% + 8px);
  transform: translateX(-50%);
}
.sb-map > .sb-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: var(--muted);
}
.sb-ax {
  position: absolute;
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 600;
}
.sb-ax.x {
  right: 28px;
  bottom: 38px;
}
.sb-ax.y {
  left: 12px;
  top: 7px;
}
.sb-pt {
  position: absolute;
  width: 30px;
  height: 30px;
  margin: 0 0 -15px -15px;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  border: 2px solid #c9ccd6;
  box-shadow: 0 1px 4px rgba(23, 25, 35, .18);
  transition: left .7s ease, bottom .7s ease;
}
.sb-pt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sb-pt.nocov {
  background: color-mix(in srgb, var(--fc) 38%, #fff);
}
.sb-pt.new {
  animation: sbIn .45s cubic-bezier(.2, .9, .3, 1.3) var(--d) both, sbFmt .4s ease calc(var(--d) + .9s) both;
}
.sb-pt:not(.new) {
  border-color: var(--fc);
}
.sb-kpi {
  display: grid;
  gap: 8px;
  align-content: start;
}
.sb-k {
  background: var(--sunken);
  border-radius: 10px;
  padding: 9px 12px;
}
.sb-k span {
  display: block;
  font-size: 11px;
  color: var(--muted);
}
.sb-k b {
  display: block;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.sb-k b.up {
  animation: sbUp .7s ease;
}
@keyframes sbUp {
  from {
    color: var(--accent);
  }
}
@keyframes sbPulse {
  50% {
    box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .18);
  }
}
@keyframes sbIn {
  from {
    opacity: 0;
    transform: scale(.2) translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes sbFmt {
  from {
    border-color: #c9ccd6;
  }
  to {
    border-color: var(--fc);
  }
}
#sec-space.sp-building .sp-tile {
  cursor: default;
}
.sp-tile.is-lock {
  opacity: .55;
  border-style: dashed;
  box-shadow: none;
}
.sp-tile.is-lock .sp-tile-i,
.sp-tile.is-none .sp-tile-i {
  background: var(--sunken);
  color: var(--muted);
}
.sp-tile.is-none {
  opacity: .62;
  box-shadow: none;
}
.sp-tile.is-none:hover {
  opacity: 1;
}
.sp-tile-q {
  font-size: 11.5px;
  color: var(--muted);
}
.sp-tile-n {
  font-size: 12px;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.sp-tile-n b {
  font-weight: 800;
}
.sp-tile.is-fill {
  position: relative;
  overflow: hidden;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.sp-tile.is-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      transparent 30%,
      rgba(var(--accent-rgb), .12) 50%,
      transparent 70%);
  animation: sbShine 1.4s linear infinite;
  pointer-events: none;
}
.sp-tile.is-pop {
  animation: sbPop .7s ease both;
}
@keyframes sbShine {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes sbPop {
  0% {
    transform: scale(.97);
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .45);
  }
  60% {
    transform: scale(1.02);
    box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0);
  }
  100% {
    transform: none;
  }
}
@media (max-width: 900px) {
  .sb-body {
    grid-template-columns: 1fr;
  }
  .sb-kpi {
    grid-template-columns: 1fr 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sb-pt.new,
  .sp-tile.is-pop,
  .sp-tile.is-fill::after,
  .sb-pbar > i::after,
  .sb-k b.up {
    animation: none;
  }
  .sb-pt,
  .sb-pbar > i,
  .sb-prog {
    transition: none;
  }
  .sb-pt.new {
    border-color: var(--fc);
  }
}
.sp-body .tpl-meta[data-fm] {
  margin-top: 8px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
  cursor: pointer;
}
.sp-body .tpl-meta[data-fm]:hover {
  color: var(--ink-2);
}
.sp-body .tpl-meta .fm-rev {
  color: var(--ink-2);
}
.sp-body .tpl-meta .fm-ok {
  margin-left: 6px;
  padding: 0 6px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
}
.sp-body .tpl-meta .fm-ok:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.sp-body .tpl-meta .fm-wait {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}
.sp-body .fm-sec {
  margin: 2px 0 12px;
  font-size: 11.5px;
}
.sp-body .fm-sec a {
  color: var(--muted);
}
.sp-body .fm-sec a:hover {
  color: var(--accent-ink);
}
.mdl-body .fm-val {
  font-size: 14px;
  line-height: 1.5;
}
.mdl-body small {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
}
.mdl-body h4 {
  margin: 18px 0 8px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink-2);
}
.mdl-body .fm-card {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.mdl-body .fm-was {
  color: var(--ink-2);
}
.mdl-body .fm-card q,
.mdl-body .fm-row q {
  display: block;
  margin-top: 2px;
  color: var(--ink-2);
  font-style: italic;
}
.mdl-body .fm-act {
  display: flex;
  gap: 8px;
}
.mdl-body .fm-row {
  padding: 9px 0;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
}
.mdl-body .fm-row.is-undone {
  opacity: .6;
}

/* server/static/css/05-sources.css */
.src-add {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.src-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.src-box h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 750;
}
.src-box .hint {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}
.src-drop {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px dashed var(--border);
  border-radius: var(--r-md);
  padding: 14px;
  cursor: pointer;
  color: var(--ink-2);
  font-size: 13.5px;
  transition: border-color .12s, background .12s;
}
.src-drop:hover,
.src-drop.over {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.src-drop .ic {
  width: 22px;
  height: 22px;
  color: var(--accent-ink);
  flex: none;
}
.src-drop b {
  color: var(--accent-ink);
}
.src-drop input {
  display: none;
}
#srcPaste {
  width: 100%;
  min-height: 92px;
  resize: vertical;
  font: 13.5px/1.55 var(--font);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  background: var(--surface);
}
#srcPaste:focus,
#srcTitle:focus,
#svTitle:focus {
  outline: none;
  border-color: var(--accent);
}
.src-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
#srcTitle,
#svTitle {
  flex: 1 1 200px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 9px 12px;
  font: 13.5px var(--font);
  background: var(--surface);
}
.src-st {
  font-size: 12.5px;
  color: var(--ink-2);
  min-height: 18px;
}
.src-st.err {
  color: var(--crit-text);
}
.src-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.src-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 16px;
}
.src-ic {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.src-ic .ic {
  width: 18px;
  height: 18px;
}
.src-name {
  font-weight: 700;
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.src-sub {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
  margin-top: 3px;
}
.src-sub b {
  color: var(--ink-2);
}
.src-act {
  display: flex;
  gap: 6px;
  align-items: center;
}
.src-act .btn {
  padding: 8px 12px;
  font-size: 12.5px;
}
.src-empty {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
  padding: 30px;
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
}
.sv-box {
  margin-bottom: 18px;
}
.sv-how ol {
  margin: 8px 0 2px;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
}
.sv-how code {
  font-size: 12px;
  background: var(--sunken);
  padding: 1px 5px;
  border-radius: 5px;
}
.sv-sum {
  font-size: 13px;
  color: var(--ink-2);
  margin: 4px 0 8px;
}
.sv-sum b {
  color: var(--ink);
}
.sv-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
  max-height: 420px;
  overflow-y: auto;
  padding: 2px;
}
.sv-f {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.sv-f:hover {
  border-color: rgba(var(--accent-rgb), .55);
}
.sv-f:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.sv-f input {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  flex: none;
}
.sv-f b {
  display: block;
  font-size: 13.5px;
}
.sv-f b i {
  font-style: normal;
  font-weight: 600;
  color: var(--muted);
  margin-left: 4px;
}
.sv-f small {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 3px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sv-f.none b {
  color: var(--ink-2);
}
.sv-foot {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}
.sv-foot .sv-cnt {
  font-size: 13px;
  color: var(--ink-2);
  margin-right: auto;
}
.sv-foot .id-lnk {
  font-size: 12.5px;
}
.src-folders {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}
.src-folders span {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--sunken);
  border-radius: var(--r-pill);
  padding: 1px 8px;
}
@media (max-width: 860px) {
  .src-add {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 560px) {
  .src-item {
    grid-template-columns: 30px minmax(0, 1fr);
  }
  .src-ic {
    width: 30px;
    height: 30px;
  }
  .src-act {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

/* server/static/css/06-calendar.css */
#sec-cal {
  max-width: none;
}
.cx-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cx-period {
  min-width: 168px;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.cx-segs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cx-seg {
  display: inline-flex;
  padding: 3px;
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.cx-seg button {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .12s;
}
.cx-seg button:hover {
  color: var(--ink);
}
.cx-seg button[aria-pressed=true] {
  background: var(--surface);
  color: var(--accent-ink);
  box-shadow: var(--shadow-1);
}
.cx-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 248px;
  gap: 16px;
  align-items: start;
}
.cx-cal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.cx-scroll {
  overflow-x: auto;
}
.cx-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(128px, 1fr));
  min-width: 896px;
}
.cx-grid {
  --cx-line: #d9dce4;
}
.cx-dow {
  text-align: center;
  padding: 12px 8px;
  border-bottom: 1px solid var(--cx-line);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--muted);
  text-transform: uppercase;
}
.cx-day {
  min-height: 172px;
  border-right: 1px solid var(--cx-line);
  border-bottom: 1px solid var(--cx-line);
  padding: 8px;
  min-width: 0;
}
.cx-day:nth-child(7n) {
  border-right: 0;
}
.cx-day.out {
  background: var(--sunken);
}
.cx-day.wknd {
  background: #fbfcfd;
}
.cx-ico {
  width: 13px;
  height: 13px;
  flex: none;
  color: #6366f1;
}
.cx-ico.done {
  color: #0f9b78;
}
.cx-grid.cx-nowknd {
  grid-template-columns: repeat(5, minmax(128px, 1fr)) 46px 46px;
  min-width: 740px;
}
.cx-nowknd .cx-day.wkd {
  padding: 8px 4px;
}
.cx-nowknd .cx-day.wkd .cx-post,
.cx-nowknd .cx-day.wkd .cx-add {
  display: none;
}
.cx-nowknd .cx-day.wkd .cx-dh {
  justify-content: center;
}
.cx-nowknd .cx-day.wkd[data-n]::after {
  content: attr(data-n);
  display: block;
  width: max-content;
  margin: 4px auto 0;
  font-size: 11px;
  font-weight: 800;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 1px 7px;
}
.cx-nowknd .cx-dow:nth-child(6),
.cx-nowknd .cx-dow:nth-child(7) {
  padding-left: 2px;
  padding-right: 2px;
  letter-spacing: 0;
}
.cx-day.today {
  background: var(--accent-soft);
}
.cx-day.over {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.cx-dh {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 700;
}
.cx-dn {
  padding: 2px 6px;
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
.today .cx-dn {
  background: var(--accent);
  color: #fff;
  font-weight: 800;
}
.cx-add {
  appearance: none;
  border: 0;
  background: none;
  color: var(--border);
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  transition: color .12s;
}
.cx-day:hover .cx-add {
  color: var(--muted);
}
.cx-add:hover {
  color: var(--accent);
}
.cx-post {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px;
  margin-bottom: 7px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-1);
  cursor: grab;
  font-family: inherit;
  color: inherit;
  transition:
    box-shadow .12s,
    border-color .12s,
    transform .1s;
}
.cx-post:hover {
  box-shadow: var(--shadow-2);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.cx-post:active {
  cursor: grabbing;
}
.cx-post.drag {
  opacity: .45;
}
.cx-when {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 5px;
}
.cx-risk {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--serious);
  flex: none;
}
.cx-thumb {
  position: relative;
  height: 52px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--sunken);
  display: grid;
  place-items: center;
}
.cx-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cx-thumb .ic {
  width: 20px;
  height: 20px;
  opacity: .5;
}
.cx-thumb.reels {
  background: #e7e9ff;
  color: #3730a3;
}
.cx-thumb.carousel {
  background: #dcf1ea;
  color: #0f6b52;
}
.cx-thumb.idea {
  background: #fff3d6;
  color: #8a6100;
}
.cx-thumb.photo {
  background: var(--sunken);
  color: var(--muted);
}
.cx-fmt {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: rgba(23, 26, 32, .62);
  display: grid;
  place-items: center;
}
.cx-fmt .ic {
  width: 11px;
  height: 11px;
  color: #fff;
  opacity: 1;
}
.cx-title {
  font-size: 11.5px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--ink-2);
  margin: 6px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
#sec-cal.cx-small .cx-title {
  -webkit-line-clamp: 2;
}
.cx-tag {
  display: inline-block;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 9.5px;
  font-weight: 800;
  margin-top: 6px;
}
.cx-tag.st-idea {
  background: #fff3d6;
  color: #8a6100;
}
.cx-tag.st-script {
  background: var(--sunken);
  color: var(--ink-2);
}
.cx-tag.st-review_script,
.cx-tag.st-review_edit {
  background: var(--ai-soft);
  color: var(--ai);
}
.cx-tag.st-edit {
  background: var(--serious-soft);
  color: var(--serious-text);
}
.cx-tag.st-published {
  background: var(--good-soft);
  color: var(--good-text);
}
.cx-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin-top: 6px;
}
.cx-pv {
  margin-left: auto;
  white-space: nowrap;
  font-weight: 700;
}
.cx-appr {
  font-size: 9.5px;
  color: var(--muted);
  font-weight: 600;
  margin-top: 5px;
}
.cx-appr.ok {
  color: var(--good-text);
}
.cx-appr.wait {
  color: var(--serious-text);
}
.cx-week .cx-day {
  min-height: 420px;
}
.cx-week .cx-thumb {
  height: 92px;
}
#sec-cal.cx-small .cx-day .cx-post:not(.cx-line) > .cx-thumb {
  width: 50%;
  height: auto;
  aspect-ratio: 5 / 7;
}
#sec-cal.cx-small .cx-day .cx-post:not(.cx-line) > .cx-thumb.carousel {
  aspect-ratio: 4 / 5;
}
#sec-cal.cx-small .cx-day .cx-post:not(.cx-line) > .cx-thumb.idea {
  aspect-ratio: 1;
}
#sec-cal.cx-small .cx-day .cx-thumb .ic {
  width: 14px;
  height: 14px;
}
.cx-line {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 5px;
  margin-bottom: 2px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
}
.cx-line:hover {
  background: var(--sunken);
  box-shadow: none;
  transform: none;
  border: 0;
}
.cx-lt {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cx-lt b {
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cx-line .cx-views {
  flex: none;
}
.cx-simple .cx-load {
  display: none;
}
.cx-simple .cx-day {
  min-height: 118px;
}
.cx-simple .cx-week .cx-day {
  min-height: 320px;
}
.cx-post.cx-pub {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  border-style: dashed;
  background: var(--sunken);
}
.cx-post.cx-pub:hover {
  border-style: solid;
}
.cx-post.cx-pub.cx-line {
  border: 0;
  background: transparent;
}
.cx-own {
  font-size: 9.5px;
  font-weight: 800;
  color: var(--muted);
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
  padding: 0 4px;
}
.cx-views {
  font-size: 9.5px;
  color: var(--muted);
  font-weight: 700;
}
.cx-navoff .btn {
  display: none;
}
.cx-tools > .cx-nav.cx-navoff {
  display: none;
}
.cx-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cx-tools .cx-nav .btn {
  padding: 7px 10px;
}
.cx-tools .cx-period {
  min-width: 132px;
  font-size: 14.5px;
}
.cx-tools .cx-seg button {
  padding: 6px 11px;
}
.cx-eye {
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.cx-eye:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}
.cx-eye[aria-pressed=true] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.cx-eye .ic {
  width: 17px;
  height: 17px;
}
.cx-tools > #calFilters,
.cx-tools > #ideaFilters {
  flex: 0 1 auto;
  margin: 0;
}
.cx-tools > #ideaIns {
  margin-left: auto;
}
.cx-views {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
#calIg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
}
#calIg[hidden] {
  display: none;
}
#calIg .ic {
  width: 15px;
  height: 15px;
}
@media (max-width: 600px) {
  #calIg span {
    display: none;
  }
  #calIg {
    width: 38px;
    padding: 0;
    justify-content: center;
  }
}
.cx-sug {
  margin: 0 0 12px;
  border: 1px solid #bfe6d8;
  background: #effaf5;
  border-radius: 12px;
}
.cx-sugbar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  background: none;
  font: 600 13.5px var(--font);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.cx-sugbar .ic {
  width: 16px;
  height: 16px;
  color: #0f9b78;
  flex: none;
}
.cx-sugbar span {
  flex: 1;
}
.cx-sugbar i {
  font-style: normal;
  color: #0f9b78;
  font-weight: 700;
}
.cx-suglist {
  border-top: 1px solid #bfe6d8;
  padding: 6px 14px 12px;
}
.cx-sugrow {
  padding: 10px 0;
}
.cx-sugrow + .cx-sugrow {
  border-top: 1px dashed #bfe6d8;
}
.cx-sugme {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  margin-bottom: 8px;
}
.cx-sugme span {
  color: var(--muted);
  font-size: 12.5px;
  white-space: nowrap;
}
.cx-sugposts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px;
}
.cx-sugpost {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 8px;
  min-width: 0;
}
.cx-sugimg {
  flex: none;
  width: 40px;
  height: 50px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--sunken);
}
.cx-sugimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cx-sugtxt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12.5px;
}
.cx-sugtxt span {
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cx-sugpost .btn {
  flex: none;
  padding: 5px 10px;
  font-size: 12.5px;
}
.cx-tools {
  margin-bottom: 12px;
}
.cx-adds {
  position: relative;
  margin: 0;
}
.fb-pop > .cx-segs {
  align-self: flex-end;
  gap: 8px;
}
.fb-pop > .cx-segs .btn,
.fb-pop > .cx-segs .kn-chip {
  padding: 8px 12px;
}
.cx-adds .btn {
  font-size: 12.5px;
  padding: 8px 14px;
}
.cx-addmenu {
  position: absolute;
  z-index: 15;
  top: calc(100% + 6px);
  left: 0;
  min-width: 190px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(20, 17, 24, .16);
  padding: 5px;
  display: flex;
  flex-direction: column;
}
.cx-addmenu[hidden] {
  display: none;
}
.cx-addmenu button {
  border: 0;
  background: none;
  text-align: left;
  padding: 9px 11px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.cx-addmenu button:hover {
  background: var(--sunken);
  color: var(--accent-ink);
}
.cx-plan {
  margin-top: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 12px 16px;
}
.cx-plan summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink-2);
}
.cx-plan[open] summary {
  margin-bottom: 10px;
}
.cx-day {
  container-type: inline-size;
}
@container (min-width: 150px) {
  .cx-day .cx-post:not(.cx-line) {
    display: grid;
    grid-template-columns: minmax(0, 84px) minmax(0, 1fr);
    gap: 4px 8px;
    align-items: start;
  }
  .cx-day .cx-post:not(.cx-line) > .cx-thumb {
    grid-column: 1;
    grid-row: 1 / span 6;
    height: auto;
    aspect-ratio: 5 / 7;
  }
  .cx-day .cx-post:not(.cx-line) > .cx-thumb.carousel {
    aspect-ratio: 4 / 5;
  }
  .cx-day .cx-post:not(.cx-line) > .cx-thumb.idea {
    aspect-ratio: 1;
  }
  .cx-day .cx-post:not(.cx-line) > :not(.cx-thumb) {
    grid-column: 2;
    margin: 0;
  }
  .cx-day .cx-post:not(.cx-line) > .cx-tag {
    justify-self: start;
  }
  #sec-cal.cx-small .cx-day .cx-post:not(.cx-line) {
    grid-template-columns: minmax(0, 42px) minmax(0, 1fr);
  }
  #sec-cal.cx-small .cx-day .cx-post:not(.cx-line) > .cx-thumb {
    width: auto;
  }
  .cx-day .cx-post:not(.cx-line) .cx-foot {
    flex-wrap: wrap;
  }
}
@container (min-width: 150px) and (max-width: 239px) {
  .cx-day .cx-post:not(.cx-line) {
    grid-template-columns: minmax(0, 64px) minmax(0, 1fr);
    gap: 4px 7px;
  }
}
.cx-day .cx-post {
  min-width: 0;
  overflow: hidden;
}
.cx-day .cx-post .cx-when {
  flex-wrap: wrap;
  min-width: 0;
  row-gap: 1px;
}
.cx-day .cx-post .cx-when .cx-views {
  margin-left: 0;
}
.cx-day .cx-post .cx-tag {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cx-day .cx-post .cx-title {
  overflow-wrap: break-word;
  hyphens: auto;
}
.cx-rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
}
.cx-backlog {
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  overflow-y: auto;
  min-height: 0;
}
.cx-backlog.over {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.cx-bhead {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 800;
}
.cx-bhead .cnt {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1px 8px;
}
.cx-hint {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.5;
  margin: 6px 0 12px;
}
.cx-backlog .cx-post {
  margin-bottom: 10px;
}
.cx-backlog .cx-post:last-child {
  margin-bottom: 0;
}
.cx-load {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
}
.cx-lrow {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--ink-2);
  font-weight: 600;
  margin-top: 12px;
}
.cx-lbar {
  height: 5px;
  border-radius: 3px;
  background: var(--hairline);
  margin-top: 6px;
  overflow: hidden;
}
.cx-lbar i {
  display: block;
  height: 100%;
  background: var(--accent);
}
.cx-legend {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--muted);
  padding: 14px 4px 0;
}
.tk-dates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 4px 0 8px;
}
.tk-dates.tk-planrow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 10px;
  margin: 0 0 6px;
}
.tk-planrow > span {
  flex: 1 1 140px;
  min-width: 0;
}
.tk-planrow > .tk-fstage {
  flex: 1.3 1 170px;
}
.tk-planrow > .tk-ftime {
  flex: .6 1 100px;
}
.tk-planrow > .btn {
  flex: none;
  height: 34px;
}
.tk-planrow input,
.tk-planrow select {
  height: 34px;
  padding-top: 0;
  padding-bottom: 0;
}
.tk-planst:empty {
  display: none;
}
.tk-planst {
  display: block;
  margin: 0 0 6px;
}
.tk-dates select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 9px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  background: var(--surface);
  cursor: pointer;
}
.tk-dates select:focus {
  outline: none;
  border-color: var(--accent);
}
.tk-dates label {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.tk-dates input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 9px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  background: var(--surface);
}
.tk-dates input:focus {
  outline: none;
  border-color: var(--accent);
}
@media (max-width: 1180px) {
  .cx-board {
    grid-template-columns: minmax(0, 1fr);
  }
  .cx-rail {
    position: static;
    max-height: none;
  }
  .cx-backlog {
    max-height: none;
    overflow: visible;
  }
  .cx-backlog {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .cx-bhead,
  .cx-backlog > .cx-hint {
    grid-column: 1 / -1;
  }
  .cx-backlog > .cx-hint {
    margin-bottom: 0;
  }
  .cx-backlog .cx-post {
    margin: 0;
  }
  .cx-load {
    display: none;
  }
}
@media (max-width: 760px) {
  .cx-backlog {
    grid-template-columns: 1fr;
  }
  .cx-period {
    min-width: 120px;
    font-size: 13.5px;
  }
  .tk-dates {
    grid-template-columns: 1fr;
  }
}
.cx-tip {
  position: fixed;
  z-index: 90;
  width: 150px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-2);
  pointer-events: none;
}
.cx-tip .cx-thumb {
  height: auto;
  aspect-ratio: 9 / 16;
}
.cx-tip .cx-thumb.carousel {
  aspect-ratio: 4 / 5;
}
.cx-tip-kind {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.cx-tip-kind .ic {
  width: 38%;
  height: 38%;
  color: #fff;
  opacity: .55;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55));
}
.cx-thumb:not(:has(img)) .cx-tip-kind {
  display: none;
}
.cx-tip-t {
  font-size: 11.5px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink);
  margin: 6px 2px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cx-tip-s {
  font-size: 11px;
  color: var(--muted);
  margin: 2px 2px 0;
}
@media (hover: none) {
  .cx-tip {
    display: none;
  }
}
.cx-board.cx-listmode {
  display: block;
}
.cx-board.cx-listmode > .cx-rail {
  display: none;
}
.ct {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.ct-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--muted);
  border-bottom: 1px solid var(--hairline);
  min-height: 44px;
}
.ct-cols {
  position: relative;
  flex: none;
}
.cx-colslot:empty {
  display: none;
}
.ct-colsbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font: 500 12.5px var(--font);
  color: var(--ink-2);
  cursor: pointer;
}
.ct-colsbtn .ic {
  width: 14px;
  height: 14px;
}
.ct-colsbtn:hover,
.ct-colsbtn[aria-expanded=true] {
  border-color: var(--accent);
  color: var(--accent-ink);
}
.ct-colsmenu {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 40;
  width: 200px;
  max-height: 360px;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(20, 17, 24, .14);
  padding: 6px;
}
.ct-colsmenu label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 7px;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
}
.ct-colsmenu label:hover {
  background: var(--sunken);
}
.ct-colsmenu input {
  accent-color: var(--accent);
}
.ct-colsall {
  width: 100%;
  margin-top: 4px;
  border: 0;
  border-top: 1px solid var(--border);
  background: none;
  padding: 7px 0 3px;
  font: 600 12.5px var(--font);
  color: var(--accent-ink);
  cursor: pointer;
}
.ct-scroll {
  overflow-x: auto;
}
table.ct-t {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}
.ct-t th {
  position: sticky;
  top: 0;
  background: var(--surface);
  text-align: left;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ct-t th:hover {
  color: var(--ink);
}
.ct-t th.num,
.ct-t td.num {
  text-align: right;
}
.ct-t td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ct-t tbody tr {
  cursor: pointer;
}
.ct-t tbody tr:hover td {
  background: #fafbfe;
}
.ct-t tr.work td {
  background: #fcfcff;
}
.ct-dt a {
  color: inherit;
  text-decoration: none;
}
.ct-dt a:hover {
  color: var(--accent-ink);
  text-decoration: underline;
}
.ct-dt i {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
}
.ct-mat {
  display: flex;
  align-items: center;
  gap: 10px;
}
td.ct-mat {
  display: table-cell;
}
.ct-mat > * {
  vertical-align: middle;
}
.ct-th {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 46px;
  margin-right: 10px;
  flex: none;
  border-radius: 6px;
  overflow: hidden;
  vertical-align: middle;
}
.ct-th.reels,
.ct-th.idea {
  background: #e7e9ff;
  color: #3730a3;
}
.ct-th.carousel {
  background: #dcf1ea;
  color: #0f6b52;
}
.ct-th.photo {
  background: #fdf3dc;
  color: #9a6a12;
}
.ct-th > .ic {
  width: 14px;
  height: 14px;
  opacity: .5;
}
.ct-th img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ct-fmt {
  position: absolute;
  right: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(23, 26, 32, .62);
  display: grid;
  place-items: center;
}
.ct-fmt .ic {
  width: 8px;
  height: 8px;
  color: #fff;
}
.ct-tt {
  display: inline-block;
  max-width: calc(100% - 48px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  color: var(--ink);
  vertical-align: middle;
}
.ct-st {
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 7px;
  background: var(--sunken);
  color: var(--ink-2);
}
.ct-st.pub {
  background: var(--good-soft);
  color: var(--good-text);
}
.ct-yes {
  font-size: 11px;
  font-weight: 800;
  border-radius: 6px;
  padding: 1px 6px;
  background: var(--good-soft);
  color: var(--good-text);
}
.ct-no {
  color: var(--muted);
  font-size: 12px;
}
.ct-lv.lo {
  color: var(--serious-text);
}
.ct-lv.hi {
  color: var(--good-text);
}
.ct-fl {
  font-size: 11px;
  border-radius: 6px;
  padding: 0 5px;
  margin-left: 2px;
}
.ct-fl.crit {
  background: var(--serious-soft);
  color: var(--serious-text);
}
.ct-fl.warn {
  background: #fdf3dc;
  color: #9a6a12;
}
.ct-fl.ok {
  color: var(--good-text);
}
.ct-tag {
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 5px;
  padding: 0 5px;
  background: var(--sunken);
  color: var(--ink-2);
}
.ct-empty {
  text-align: center;
  color: var(--muted);
  padding: 30px 0 !important;
}
.ct-pager {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--muted);
}
.ct-pager .sp {
  flex: 1;
}
.ct-pager button {
  font: 12.5px var(--font);
}
.ct-pager select,
.ct-pager button {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
}
.ct-pager button:disabled {
  opacity: .45;
  cursor: default;
}
#sec-cal.cx-client .cx-adds,
#sec-cal.cx-client .cx-rail {
  display: none;
}
#sec-cal.cx-client .cx-board {
  display: block;
}
.ct-t th.ct-favc,
.ct-t td.ct-favc {
  padding-left: 4px;
  padding-right: 0;
  text-align: center;
}
.ct-fav {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: none;
  color: #c3c7d0;
  cursor: pointer;
}
.ct-fav .ic {
  width: 15px;
  height: 15px;
}
.ct-fav:hover {
  color: #d99a06;
  background: #fff8e6;
}
.ct-fav.on {
  color: #d99a06;
}
.ct-fav.on .ic {
  fill: currentColor;
}
.ct-actc {
  text-align: right;
}
.ct-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 9px;
  margin-left: 5px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font: 600 12px var(--font);
  color: var(--ink-2);
  cursor: pointer;
}
.ct-btn .ic {
  width: 13px;
  height: 13px;
}
.ct-btn:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}
.ct-btn.danger:hover {
  border-color: var(--crit);
  color: var(--crit-text);
  background: var(--crit-soft);
}
#calIg span {
  display: none;
}
#calIg {
  padding-left: 11px;
  padding-right: 11px;
}
.cx-post.cx-task:not(.cx-line) {
  border-left: 3px solid var(--border);
}
.cx-post.cx-task.t-shoot:not(.cx-line) {
  border-left-color: #c2410c;
}
.cx-post.cx-task.t-meet:not(.cx-line) {
  border-left-color: #0e7490;
}
.cx-post.cx-task.t-edit:not(.cx-line) {
  border-left-color: #7c3aed;
}
.cx-tkt {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.cx-tkt .tk-ico {
  margin-top: 1px;
}
.cx-tkt .cx-title {
  margin: 0;
}
.cx-tst {
  font-size: 9.5px;
  font-weight: 800;
  border-radius: 6px;
  padding: 1px 6px;
  background: var(--sunken);
  color: var(--ink-2);
  white-space: nowrap;
  margin-left: auto;
}
.cx-task .cx-foot {
  flex-wrap: wrap;
}
.cx-tst.st-doing {
  background: var(--serious-soft);
  color: var(--serious-text);
}
.cx-tst.st-done {
  background: var(--good-soft);
  color: var(--good-text);
}
.cx-task.done .cx-title,
.cx-task.done .cx-lt {
  color: var(--muted);
  text-decoration: line-through;
}
.cx-avas {
  display: inline-flex;
  gap: 2px;
}
@container (min-width: 150px) {
  .cx-day .cx-post.cx-task:not(.cx-line) {
    display: block;
  }
  .cx-day .cx-post.cx-task:not(.cx-line) > .cx-when {
    margin-bottom: 5px;
  }
  .cx-day .cx-post.cx-task:not(.cx-line) > .cx-foot {
    margin-top: 6px;
  }
}
.cx-addmenu.cx-daymenu {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
}
#calPlanMonth {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
}
#calPlanMonth[hidden] {
  display: none;
}
#calPlanMonth .ic {
  width: 15px;
  height: 15px;
}
@media (max-width: 1180px) {
  #calPlanMonth span {
    display: none;
  }
  #calPlanMonth {
    width: 38px;
    padding: 0;
    justify-content: center;
  }
}
.cxp {
  margin: 0 0 14px;
  background: var(--surface);
  border: 1px solid var(--ai);
  border-radius: 14px;
  box-shadow: var(--shadow-1);
  padding: 14px;
}
.cxp[hidden] {
  display: none;
}
.cxp-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.cxp-head b {
  font-size: 16px;
}
.cxp-head .hint {
  margin: 4px 0 0;
}
.cxp-top {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cxp-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--cx-line, #d9dce4);
  border-left: 1px solid var(--cx-line, #d9dce4);
}
.cxp-dow {
  text-align: center;
  padding: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--muted);
  text-transform: uppercase;
  border-right: 1px solid var(--cx-line, #d9dce4);
  border-bottom: 1px solid var(--cx-line, #d9dce4);
}
.cxp-cell {
  min-width: 0;
  padding: 6px;
  border-right: 1px solid var(--cx-line, #d9dce4);
  border-bottom: 1px solid var(--cx-line, #d9dce4);
  min-height: 44px;
}
.cxp-cell.out {
  background: var(--sunken);
}
.cxp-dh {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 4px;
}
.cxp-slot {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--ai-soft);
  font-size: 12px;
}
.cxp-slot.done {
  background: #effaf5;
  border-color: #bfe6d8;
}
.cxp-slot select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 6px;
  font: 12px var(--font);
  color: var(--ink);
  background: var(--surface);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.cxp-why {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ink-2);
}
.cxp-act {
  display: flex;
  gap: 6px;
}
.cxp-act .btn {
  flex: 1;
  padding: 4px 6px;
  font-size: 12px;
}
@media (max-width: 760px) {
  .cxp-grid {
    grid-template-columns: minmax(0, 1fr);
    border-left: 0;
  }
  .cxp-dow,
  .cxp-cell.empty {
    display: none;
  }
  .cxp-cell {
    border-right: 0;
  }
}
.cx-bal {
  margin: 0 0 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 14px;
}
.cx-balh {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
}
.cx-balh span {
  font-size: 11.5px;
  color: var(--muted);
  flex: 1;
  min-width: 0;
}
.cx-balh .btn {
  padding: 4px 12px;
  font-size: 12.5px;
}
.cx-balrow {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 4px;
  align-items: center;
  margin-top: 8px;
}
.cx-balw {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-2);
  white-space: nowrap;
}
.cx-balbar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--hairline);
  gap: 2px;
}
.cx-balbar i {
  display: block;
  min-width: 4px;
}
.cx-balleg {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 11.5px;
  color: var(--ink-2);
}
.cx-balleg span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.cx-balleg b {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
}
.cx-balwarn {
  color: var(--serious-text);
  font-weight: 700;
}
.cx-balwarn::before {
  content: "⚠";
}
.cx-bal .g-reach {
  background: #cc79a7;
}
.cx-bal .g-life {
  background: #009e73;
}
.cx-bal .g-exp {
  background: #2a78d6;
}
.cx-bal .g-sell {
  background: #e69f00;
}
.cx-bal .g-none {
  background: var(--border);
}
@media (max-width: 600px) {
  .cx-balrow {
    grid-template-columns: minmax(0, 1fr);
  }
  .cx-balleg {
    grid-column: 1;
  }
}

/* server/static/css/07-igsync.css */
.igs-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
}
.igs-row + .igs-row {
  border-top: 1px solid var(--border);
}
.igs-link {
  align-items: center;
}
.igs-err {
  color: var(--serious-text);
  font-weight: 600;
}
.igs-row > div {
  flex: 1;
  min-width: 0;
}
.igs-row b {
  display: block;
  font-size: 14px;
  margin-bottom: 3px;
}
.igs-row p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}
.igs-row input[type=checkbox] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  flex: none;
}
.igs-last {
  font-size: 13px;
  color: var(--ink-2);
}
.igs-last.err {
  color: #b4432c;
}
#igsRun {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#igsRun .ic {
  width: 15px;
  height: 15px;
}
.igs-warn {
  background: #fff6e8;
  border: 1px solid #f3d9a6;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  margin: 0 0 6px;
}
.client-fresh {
  display: flex !important;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.client-fresh[hidden] {
  display: none !important;
}
.client-fresh i {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--muted);
}
.client-fresh.ok i {
  background: var(--good);
}
.client-fresh.warn i {
  background: var(--warn);
}
.client-fresh.bad i {
  background: var(--crit);
}
.client-fresh.bad {
  color: var(--crit-text);
}
body.nav-top .topnav .client-fresh {
  position: absolute;
  left: 27px;
  top: 3px;
  margin: 0;
  font-size: 0;
  gap: 0;
}
body.nav-top .topnav .client-fresh i {
  box-shadow: 0 0 0 2px var(--surface);
}

/* server/static/css/08-check.css */
#sec-check .tells {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--sunken);
}
#sec-check .tells-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
#sec-check .tells-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: none;
}
#sec-check .tells-dot.sev-good {
  background: var(--good);
}
#sec-check .tells-dot.sev-warn {
  background: var(--serious);
}
#sec-check .tells-dot.sev-crit {
  background: var(--crit);
}
#sec-check .tells-verdict {
  font-weight: 800;
  font-size: 14.5px;
}
#sec-check .tells-verdict.sev-good {
  color: var(--good);
}
#sec-check .tells-verdict.sev-warn {
  color: var(--serious);
}
#sec-check .tells-verdict.sev-crit {
  color: var(--crit);
}
#sec-check .tells-meta {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
  margin-left: auto;
}
#sec-check .tells-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}
#sec-check .tell-chip {
  font-size: 12.5px;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 9px;
  color: var(--ink-2);
}
#sec-check .tell-chip i {
  color: var(--muted);
  font-style: normal;
  font-weight: 700;
  font-size: 10.5px;
}
#sec-check .tell-chip.cat-struct {
  border-color: var(--ai);
  color: var(--ai);
}
#sec-check .tells-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
#sec-check .tells .btn {
  padding: 7px 12px;
  font-size: 13.5px;
}
#sec-check .tells-status {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
}
#sec-check .tells-ok {
  font-size: 14.5px;
  color: var(--good);
  font-weight: 700;
  margin-top: 8px;
}
#sec-check .hl-text .m-ai {
  background: rgba(109, 63, 240, .16);
  border-radius: 3px;
}

/* server/static/css/09-rules.css */
.rl-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 20px;
}
.rl-tab {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all .12s;
}
.rl-tab:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}
.rl-tab[aria-selected=true] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.rl-panel[hidden] {
  display: none;
}
.rl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px) {
  .rl-grid {
    grid-template-columns: 1fr;
  }
}
.rl-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.rl-foot .hint {
  width: 100%;
  margin: 2px 0 0;
}

/* server/static/css/10-kb.css */
.kb {
  max-width: 940px;
}
.kb h2.kb-h {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 34px 0 4px;
  scroll-margin-top: 18px;
}
.kb .kb-lead {
  color: var(--ink-2);
  margin: 4px 0 16px;
}
.kb-intro {
  background:
    linear-gradient(
      135deg,
      var(--accent-soft),
      #fff);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: var(--shadow-1);
}
.kb-intro b {
  font-weight: 800;
}
.kb-quote {
  border-left: 3px solid var(--accent);
  background: var(--sunken);
  padding: 12px 16px;
  border-radius: 0 10px 10px 0;
  color: var(--ink-2);
  margin: 12px 0;
}
.kb-levels {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0;
}
.kb-layer {
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 12px;
  padding: 14px 18px;
  border: 1px solid var(--border);
}
.kb-layer .lv {
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
  background: var(--accent);
  border-radius: 8px;
  min-width: 30px;
  height: 30px;
  display: grid;
  place-content: center;
  flex: none;
}
.kb-layer b {
  font-weight: 800;
}
.kb-layer span {
  color: var(--ink-2);
  font-size: 13.5px;
}
.kb-layer.l1 {
  background: #f7f8ff;
}
.kb-layer.l2 {
  background: #eef1fe;
}
.kb-layer.l3 {
  background: #e6ebfd;
}
.kb-layer.l4 {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.kb-tag {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--accent-ink);
  background: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  flex: none;
}
.kb-grid {
  display: grid;
  gap: 12px;
  margin: 12px 0;
}
.kb-g4 {
  grid-template-columns: repeat(4, 1fr);
}
.kb-mini {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 15px;
  box-shadow: var(--shadow-1);
}
.kb-mini .ic {
  font-size: 20px;
}
.kb-mini b {
  display: block;
  font-weight: 800;
  margin: 8px 0 3px;
  font-size: 14.5px;
}
.kb-mini small {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
  display: block;
}
.kb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 10px 0;
}
.kb-chips .c {
  font-size: 12.5px;
  font-weight: 600;
  background: var(--sunken);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 6px 11px;
  color: var(--ink-2);
}
.kb-chips .c b {
  color: var(--ink);
  font-weight: 800;
}
.kb-flow {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: wrap;
  margin: 14px 0;
}
.kb-step {
  flex: 1 1 0;
  min-width: 150px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 13px 15px;
  box-shadow: var(--shadow-1);
}
.kb-step .n {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--accent-ink);
}
.kb-step b {
  display: block;
  font-weight: 800;
  margin: 5px 0 3px;
}
.kb-step small {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
}
.kb-caret {
  align-self: center;
  color: var(--accent);
  font-weight: 800;
  padding: 0 6px;
  font-size: 18px;
}
.arch-fam {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.arch-fam .fam-head {
  padding: 12px 16px;
  background: var(--sunken);
  border-bottom: 1px solid var(--hairline);
}
.arch-fam .fam-head b {
  font-weight: 800;
}
.arch-fam .fam-head small {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
}
.arch-row {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--hairline);
}
.arch-row:first-of-type {
  border-top: none;
}
.arch-row .ai {
  font-size: 20px;
  flex: none;
  width: 26px;
  text-align: center;
}
.arch-row b {
  font-weight: 800;
}
.arch-row small {
  display: block;
  color: var(--ink-2);
  font-size: 12.5px;
}
.fmt-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.fmt-card .ft {
  font-weight: 800;
  font-size: 15px;
}
.fmt-card .fj {
  color: var(--muted);
  font-size: 12.5px;
  margin-bottom: 8px;
}
.fmt-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.fmt-card li {
  font-size: 13.5px;
  color: var(--ink-2);
  padding: 3px 0;
}
.fmt-card li b {
  color: var(--ink);
  font-weight: 700;
}
.kb-circle {
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
  margin: 12px 0;
}
.kb-circle ol {
  margin: 0;
  padding-left: 20px;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.7;
}
.kb-circle ol b {
  color: var(--ink);
}
.kb-cheat {
  background: var(--ink);
  color: #eef;
  border-radius: 16px;
  padding: 20px 24px;
  margin: 14px 0;
}
.kb-cheat h3 {
  margin: 0 0 6px;
  color: #fff;
}
.kb-cheat p {
  margin: 8px 0;
  color: #c7ccdb;
  font-size: 13.5px;
  line-height: 1.6;
}
.kb-cheat b {
  color: #fff;
}
.kb-soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  background: var(--sunken);
  border: 1px dashed var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  margin-top: 10px;
}
@media (max-width: 820px) {
  .kb-g4 {
    grid-template-columns: 1fr 1fr;
  }
}
.kb-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 22px;
}
.kb-tab {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
}
.kb-tab:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}
.kb-tab[aria-selected=true] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.kb-panel[hidden] {
  display: none;
}
.kb-panel .kb-h:first-child {
  margin-top: 6px;
}
.kb-src {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 7px;
  padding: 0;
  line-height: 1;
  flex: none;
}
.kb-src:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: var(--accent-soft);
}
.kb-pop {
  position: fixed;
  max-width: 330px;
  background: var(--ink);
  color: #e9ecf7;
  font-size: 12.5px;
  line-height: 1.55;
  padding: 12px 14px;
  border-radius: 10px;
  box-shadow: var(--shadow-2);
  z-index: 60;
}
.kb-pop b {
  color: #fff;
  font-weight: 800;
}
.kb-pop::before {
  content: "Источник";
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8fa0e0;
  margin-bottom: 5px;
}
.kb-lvgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
  margin: 12px 0 6px;
}
.kb-lvcol {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kb-excard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
}
.kb-extitle {
  font-weight: 800;
  font-size: 14.5px;
  margin-bottom: 14px;
  letter-spacing: -.01em;
}
.kb-exp {
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--ink-2);
  margin: 0 0 13px;
}
.kb-exp:last-child {
  margin-bottom: 0;
}
.kb-exlab {
  display: inline-block;
  font-weight: 800;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #fff;
  border-radius: 6px;
  padding: 2px 8px;
  margin-right: 7px;
}
.kb-exlab.l1 {
  background: #8098ea;
}
.kb-exlab.l2 {
  background: #5f78e0;
}
.kb-exlab.l3 {
  background: var(--accent);
}
.kb-exlab.l4 {
  background: #2f47bf;
}
@media (max-width: 820px) {
  .kb-lvgrid {
    grid-template-columns: 1fr;
  }
}

/* server/static/css/11-audit-run.css */
.aud-run {
  display: flex;
  gap: 10px;
  margin: 4px 0 10px;
  max-width: 560px;
}
.aud-run input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  font: inherit;
  color: var(--ink);
}
.aud-run input:focus {
  outline: none;
  border-color: var(--accent);
}
.aud-run button {
  border: none;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  border-radius: 10px;
  padding: 10px 18px;
  cursor: pointer;
}
.aud-run button:hover {
  background: var(--accent-ink);
}
.aud-run {
  flex-wrap: wrap;
}
.aud-run input {
  min-width: 180px;
}
#sec-audit .aud-run button.ghost {
  background: transparent;
  color: var(--accent-ink);
  border: 1px solid var(--accent);
}
#sec-audit .aud-run button.ghost:hover {
  background: var(--accent-soft);
}
.aud-note {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 0 16px;
  max-width: 640px;
  line-height: 1.5;
}
.aud-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.aud-chip {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 13px;
  cursor: pointer;
}
.aud-chip:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}
.aud-chip[aria-current=true] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.aud-progress {
  font-size: 13.5px;
  color: var(--ink-2);
  background: var(--sunken);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.aud-progress:has(.al) {
  background: var(--surface);
  padding: 16px 18px;
}
.al-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}
.al-head b {
  font-size: 16px;
  color: var(--ink);
}
.al-head span {
  color: var(--muted);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.al-steps {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.al-st {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--sunken);
  min-width: 0;
  transition: background .3s;
}
.al-st div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.al-st b {
  font-size: 13px;
  color: var(--ink);
}
.al-st span {
  font-size: 11.5px;
  color: var(--muted);
}
.al-st i {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.al-dot {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--surface);
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--border);
}
.al-st.now {
  background: var(--accent-soft);
}
.al-st.now .al-dot {
  background: var(--accent);
  color: #fff;
  box-shadow: none;
  animation: alPulse 1.4s ease-in-out infinite;
}
.al-st.done .al-dot {
  background: var(--good);
  color: #fff;
  box-shadow: none;
}
.al-st.wait {
  opacity: .6;
}
@keyframes alPulse {
  50% {
    transform: scale(1.12);
  }
}
.al-k {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.al-k div {
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--sunken);
  min-width: 0;
}
.al-k span {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
}
.al-k b {
  display: block;
  font-size: 19px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.al-k i {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.al-tick {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.al-tick span {
  color: var(--muted);
}
.al-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 14px;
  margin-top: 12px;
  align-items: start;
}
.al-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px;
}
.al-tile {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: hidden;
  background: var(--sunken);
  box-shadow: 0 0 0 2px var(--c, transparent);
  transition: box-shadow .3s;
}
.al-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.al-tile.empty {
  background:
    repeating-linear-gradient(
      135deg,
      var(--sunken) 0 8px,
      var(--hairline) 8px 16px);
}
.al-v {
  position: absolute;
  left: 4px;
  bottom: 4px;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
}
.al-sp {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-size: 10px;
}
.al-sp.on {
  background: var(--accent);
}
.al-bk {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding: 2px 5px;
  background: var(--c);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.al-tile.f-in {
  animation: alIn .45s cubic-bezier(.16, 1, .3, 1) both;
}
.al-tile.f-sp .al-sp,
.al-tile.f-bk .al-bk {
  animation: alIn .35s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes alIn {
  from {
    opacity: 0;
    transform: scale(.85);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.al-map {
  border-radius: 10px;
  background: var(--sunken);
  padding: 6px;
  min-height: 200px;
}
.al-map svg {
  display: block;
  width: 100%;
  height: auto;
}
.al-map.wait {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12.5px;
  text-align: center;
  padding: 20px;
}
.al-med {
  stroke: var(--muted);
  stroke-dasharray: 4 4;
}
.al-ax {
  font-size: 10.5px;
  fill: var(--muted);
}
.al-dp.pop {
  transform-box: fill-box;
  transform-origin: center;
  animation: alIn .45s cubic-bezier(.16, 1, .3, 1) both;
}
.al-err {
  margin: 10px 0 0;
  color: var(--crit-text);
  font-size: 13px;
}
@media (max-width: 900px) {
  .al-steps,
  .al-k {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .al-body {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .al-st.now .al-dot,
  .al-tile.f-in,
  .al-tile.f-sp .al-sp,
  .al-tile.f-bk .al-bk,
  .al-dp.pop {
    animation: none;
  }
}
.aud-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 14px;
  max-width: 960px;
}
.aud-share[hidden] {
  display: none;
}
.as-cost {
  font-size: 12.5px;
  color: var(--ink-2);
  margin-right: auto;
}
.as-cost b {
  color: var(--ink);
}
.as-url {
  flex: 1 1 220px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink-2);
  background: var(--sunken);
}
.aud-share button {
  border: none;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  border-radius: 10px;
  padding: 9px 16px;
  cursor: pointer;
}
.aud-share button:hover {
  background: var(--accent-ink);
}
.aud-share button.ghost {
  background: var(--surface);
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--border);
}
.aud-share button.ghost:hover {
  color: var(--serious-text);
}

/* server/static/css/12-panels.css */
.dw[hidden] {
  display: none;
}
.dw {
  position: fixed;
  inset: 0;
  z-index: 80;
}
.dw-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 17, 24, .34);
  opacity: 0;
  transition: opacity .25s;
}
.dw.open .dw-backdrop {
  opacity: 1;
}
.dw-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(760px, 96vw);
  background: var(--surface);
  box-shadow: -16px 0 48px rgba(20, 20, 40, .18);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  overflow-y: auto;
  padding: 22px 28px 44px;
}
.dw.open .dw-panel {
  transform: none;
}
.dw-close {
  position: sticky;
  top: 0;
  float: right;
  margin: 0 -8px 0 0;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  font-size: 14.5px;
  color: var(--ink-2);
}
.dw-close:hover {
  color: var(--ink);
  border-color: var(--accent);
}
.dw-eyebrow {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.dw-name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 5px 0 9px;
}
.dw-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.dw-arch {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 10px;
}
.dw-role {
  font-size: 12.5px;
  color: var(--muted);
}
.ai-mwrap {
  position: relative;
  margin-left: auto;
}
.ai-mbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ai);
  font: 700 13px var(--font);
  cursor: pointer;
}
.ai-mbtn:hover,
.ai-mbtn[aria-expanded=true] {
  border-color: var(--ai);
  background: var(--ai-soft);
}
.ai-spark {
  color: var(--ai);
  font-size: 1.05em;
  line-height: 1;
}
.ai-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 7;
  width: min(320px, calc(100vw - 32px));
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 14px 40px rgba(20, 20, 40, .16);
}
.ai-menu[hidden] {
  display: none;
}
.ai-mg {
  padding: 9px 10px 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.ai-mi {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink);
  font: 550 13.5px var(--font);
  text-align: left;
  cursor: pointer;
}
.ai-mi:hover:not(:disabled),
.ai-mi:focus-visible {
  background: var(--ai-soft);
  outline: none;
}
.ai-mi:disabled {
  color: var(--muted);
  cursor: default;
}
.ai-mi:disabled .ai-spark {
  color: var(--muted);
}
.ai-mi[data-cr]::after {
  margin-left: auto;
  padding-left: 10px;
  color: var(--muted);
}
.ai-mi .ai-orb {
  width: 15px;
  height: 15px;
}
.ed-seltb {
  position: fixed;
  z-index: 1150;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  max-width: min(520px, calc(100vw - 16px));
  padding: 4px;
  border-radius: var(--r-md);
  background: #1d1b2b;
  color: #fff;
  box-shadow: 0 10px 30px rgba(20, 20, 40, .28);
  font: 600 12.5px var(--font);
}
.ed-seltb[hidden] {
  display: none;
}
.ed-seltb button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: #fff;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.ed-seltb button:hover {
  background: rgba(255, 255, 255, .12);
}
.ed-seltb .ai-spark {
  color: #c4b5fd;
}
.ed-seltb-st {
  padding: 0 8px;
  line-height: 30px;
  opacity: .85;
}
.ed-seltb-st.err {
  color: #ffb4bd;
  opacity: 1;
}
.ed-seltb-notes {
  padding: 6px 8px;
  max-width: 420px;
  font-weight: 500;
  line-height: 1.45;
}
.ed-seltb-notes b {
  display: block;
  font-weight: 800;
  margin-bottom: 2px;
}
.ed-seltb-notes p {
  margin: 3px 0 0;
}
.ed-hl mark.piece {
  background: rgba(109, 63, 240, .16);
  box-shadow: 0 0 0 2px rgba(109, 63, 240, .12);
}
.dw-dots {
  display: inline-flex;
  gap: 3px;
}
.dw-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e4e7ec;
}
.dw-lv {
  margin: 16px 0;
}
.dw-lv p {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--ink-2);
}
.dw-lv ul {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.dw-lv li {
  margin: 3px 0;
}
.dw-delta {
  margin-top: 18px;
  border-left: 3px solid var(--accent);
  background: var(--sunken);
  padding: 13px 16px;
  border-radius: 0 10px 10px 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.dw-delta b {
  font-weight: 800;
  color: var(--ink);
}
.id-sect {
  margin-top: 20px;
}
.id-fold {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.id-foldhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 11px 14px;
  color: var(--ink);
  font: 800 11.5px/1.2 var(--font);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.id-foldhead:hover {
  color: var(--accent-ink);
}
.id-foldhead .ar {
  color: var(--muted);
  font-size: 11.5px;
  transition: transform .15s;
}
.id-foldhead[aria-expanded=true] .ar {
  transform: rotate(180deg);
}
.id-foldbody {
  padding: 0 14px 14px;
}
.id-foldbody .wz-tips {
  border: 0;
  padding: 0;
  background: transparent;
}
.id-foldbody .panel {
  border: 0;
  padding: 0;
  box-shadow: none;
  background: transparent;
}
.dw-panel .bar-row {
  grid-template-columns: 132px 1fr 42px;
}
.dw-panel .headline-row input {
  flex: 1 1 240px;
  font-size: 15px;
}
.pn-ph {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
}
.dw-panel .ed-hl {
  font: 13.5px/1.65 var(--font);
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
}
.id-metar {
  display: inline-flex;
  gap: 12px;
  align-items: baseline;
}
.id-lnk {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--accent-ink);
  font: 600 11.5px var(--font);
}
.id-lnk:hover {
  text-decoration: underline;
}
.id-warn {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--serious-text);
  background: var(--serious-soft);
  border-radius: 8px;
  padding: 7px 10px;
}
.dw-panel.dw-full {
  width: 100vw;
}
.dw-panel.dw-full .id-ta {
  min-height: 220px;
  resize: none;
  overflow: hidden;
}
.dw-panel.dw-full .id-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 32%);
  gap: 22px;
  align-items: start;
}
#ideaDrawer .dw-panel {
  container: dwin / inline-size;
}
@container dwin (min-width: 900px) {
  .dw-panel.dw-full #idWork {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 38%);
    gap: 20px;
    align-items: start;
  }
  .dw-panel.dw-full #idAfter {
    display: contents;
  }
  .dw-panel.dw-full #idAfter > .id-sect {
    max-height: max(var(--col-h, 70vh), 420px);
    overflow-y: auto;
    padding-right: 8px;
  }
  .dw-panel.dw-full #idAfter > .id-sect:last-child {
    margin-right: 40px;
  }
  .dw-panel.dw-full #idWork:has(.pn-folded) {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .dw-panel.dw-full #idAfter > .pn-folded {
    padding-right: 0;
  }
  .dw-panel.dw-full .pn-folded .pn-fold {
    writing-mode: vertical-rl;
    width: auto;
    padding: 0 2px;
  }
  .dw-panel.dw-full .pn-folded .pn-fold .ar {
    order: -1;
    margin: 0 0 8px;
    padding: 0;
    text-orientation: upright;
  }
  .dw-panel.dw-full .pn-fold .ar::before {
    content: "›";
  }
  .dw-panel.dw-full .pn-folded .pn-fold .ar::before {
    content: "‹";
  }
}
.dw-panel .headline-row input {
  font: 13.5px/1.65 var(--font);
  padding: 11px 13px;
}
.dw-cheat {
  position: sticky;
  top: 0;
  float: right;
  margin: 0 8px 0 0;
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  font: 700 12.5px var(--font);
  color: var(--muted);
  cursor: pointer;
  z-index: 3;
}
.dw-cheat:hover {
  color: var(--accent-ink);
  border-color: var(--accent);
}
.dw-cheat[aria-expanded=true] {
  color: var(--accent-ink);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.dw-cheatbox {
  position: fixed;
  z-index: 6;
  top: 56px;
  right: 26px;
  width: min(460px, calc(100vw - 52px));
  max-height: 70vh;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(20, 17, 24, .18);
  padding: 16px 18px;
}
.dw-cheatbox .wz-tips {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.dw-panel.dw-full .dw-cheat {
  display: none;
}
#idCheat2 {
  display: none;
}
.dw-panel.dw-full #idCheat2 {
  display: inline;
  margin-right: 14px;
}
.dw-panel.dw-full .ed-f .det {
  display: none;
}
.dw-panel.dw-full .ed-f.open .det {
  display: block;
}
.dw-panel.dw-full .ed-f {
  padding-right: 26px;
}
.dw-panel.dw-full .ed-f::after {
  content: "▾";
  position: absolute;
  top: 7px;
  right: 10px;
  font-size: 10.5px;
  color: var(--muted);
}
.dw-panel.dw-full .ed-f.open::after {
  content: "▴";
}
.ed-f.done {
  opacity: .6;
}
.ed-f.done i {
  background: var(--good);
}
.ed-f.done b {
  text-decoration: line-through;
  text-decoration-color: var(--good);
}
.ed-sep button {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  letter-spacing: inherit;
  text-transform: inherit;
}
.ed-sep button:hover {
  color: var(--accent-ink);
}
.dw-panel .ed-flist {
  margin-top: 12px;
}
.pn-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.pn-row select {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  max-width: 100%;
}
.pn-src {
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 12px;
  padding: 11px 13px;
  font: 600 13.5px/1.55 var(--font-text);
  color: var(--ink);
  white-space: pre-wrap;
  max-height: 150px;
  overflow: auto;
}
.id-lab {
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.id-ta {
  width: 100%;
  box-sizing: border-box;
  min-height: 190px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--surface);
  font: 13.5px/1.65 var(--font);
  color: var(--ink);
}
.id-ta:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.id-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 7px;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
}
.id-meta .ok {
  color: var(--good-text);
}
.id-meta .err {
  color: var(--crit-text);
}
.id-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 10.5px;
  font-weight: 800;
  vertical-align: 1px;
}
.id-setup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 10px 22px;
  align-items: center;
  margin-top: 16px;
  container-type: inline-size;
  background: var(--tint);
  border: 1px solid var(--tint-line);
  border-radius: 12px;
  padding: 12px 16px;
}
#idSetup {
  container-type: inline-size;
}
.id-setup3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@container (max-width: 900px) {
  .id-setup3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container (max-width: 560px) {
  .id-setup3 {
    grid-template-columns: minmax(0, 1fr);
  }
}
.id-plan {
  display: contents;
}
.id-fld {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.id-fld > span {
  flex: none;
  width: 118px;
}
.id-fld select,
.id-fld input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: 36px;
  box-sizing: border-box;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  font: inherit;
  font-size: 14px;
  color: var(--ink);
}
.id-fld input:focus,
.id-fld select:focus {
  outline: none;
  border-color: var(--accent);
}
.id-planmore:empty,
.id-planst:empty {
  display: none;
}
.id-planmore {
  margin: -2px 2px 10px;
}
.id-planmore > .tk-sectlab:first-child {
  margin-top: 4px;
}
.id-planst {
  margin: 0 0 6px;
  font-size: 12.5px;
  color: var(--crit);
}
.id-basebox {
  margin-top: 10px;
}
.id-del {
  margin-left: auto;
}
.id-fld > span {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.25;
}
.id-fld .id-ai {
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ai);
  background: var(--ai-soft);
  border-radius: 4px;
  padding: 0 4px;
  margin-left: 4px;
}
.id-setup .btn {
  padding: 8px 13px;
  font-size: 12.5px;
}
.id-hint {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
  margin: 8px 2px 0;
}
.id-note {
  margin-top: 14px;
  border-radius: 12px;
  padding: 10px 13px;
  font-size: 13.5px;
  line-height: 1.55;
  border-left: 3px solid;
}
.id-note b {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 3px;
  opacity: .8;
}
.id-note.rework {
  background: var(--serious-soft);
  border-color: var(--serious);
  color: var(--serious-text);
}
.id-note.ok {
  background: var(--good-soft);
  border-color: var(--good);
  color: var(--good-text);
}
.id-apv {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 10px;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--good-soft);
  color: var(--good-text);
}
.id-apv-t {
  font-weight: 700;
}
.id-apv-w {
  font-weight: 700;
  color: var(--serious-text);
  background: var(--serious-soft);
  border-radius: 8px;
  padding: 2px 8px;
}
.id-apv-s {
  color: var(--muted);
  font-size: 12.5px;
}
.id-apv-b {
  padding: 6px 11px;
  font-size: 12.5px;
  margin-left: auto;
}
.id-apv-b + .id-apv-b {
  margin-left: 0;
}
.id-grown {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.id-grown > span {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.id-glink {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  padding: 6px 10px;
  font: 700 12.5px var(--font);
  color: var(--accent-ink);
  cursor: pointer;
}
.id-glink:hover {
  border-color: var(--accent);
}
.id-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.id-tags .itag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  padding: 3px 6px 3px 10px;
}
.id-tags .itag button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 3px;
  border-radius: 50%;
  opacity: .6;
}
.id-tags .itag button:hover {
  opacity: 1;
  background: rgba(var(--accent-rgb), .15);
}
.id-tag-in {
  flex: 1 1 140px;
  min-width: 120px;
  border: 1px dashed var(--border);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  font: 12.5px var(--font);
  background: transparent;
}
.id-tag-in:focus {
  outline: none;
  border-style: solid;
  border-color: var(--accent);
  background: var(--surface);
}
.id-src {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.id-src .ic {
  width: 15px;
  height: 15px;
  color: var(--muted);
}
.ed-f .src {
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 6px;
  padding: 1px 5px;
  margin-left: 6px;
  color: var(--muted);
  background: var(--sunken);
  vertical-align: 1px;
}
.ed-f .src.ai {
  color: var(--accent-ink);
  background: var(--accent-soft);
}
.ed-f .ed-fh {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.ed-f .ed-fh > b {
  flex: 0 1 auto;
  min-width: 0;
}
.ed-f .ed-srcs {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  gap: 4px;
}
.ed-f .ed-srcs .src {
  margin: 0;
}
.ed-f .det {
  display: block;
  margin-top: 4px;
}
.ed-sep {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 10px 0 2px;
}
.ed-sep.ed-line {
  height: 0;
  border-top: 1px solid var(--hairline);
  margin: 12px 2px 8px;
}
.ed-f.tell i {
  background: var(--ai);
}
.ed-f.gate i {
  background: var(--crit);
  box-shadow: 0 0 0 2px rgba(233, 78, 96, .25);
}
.ed-f.hid {
  opacity: .55;
}
.ed-f.hid b {
  text-decoration: line-through;
  text-decoration-color: var(--muted);
}
.ed-f .ed-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.ed-f .ed-acts button {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  padding: 2px 8px;
  font: 600 11.5px var(--font);
  color: var(--ink-2);
  cursor: pointer;
}
.ed-f .ed-acts button:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}
.ed-f .ed-acts .ai {
  color: var(--accent-ink);
}
.ed-f .tells {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.ed-f .tells span {
  font-size: 11.5px;
  background: var(--sunken);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 2px 7px;
  color: var(--ink-2);
}
.ed-f .tells span em {
  font-style: normal;
  color: var(--muted);
}
.id-lab.pn-lab {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pn-fold {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  text-align: left;
}
.pn-fold:hover {
  color: var(--accent-ink);
}
.pn-fold .ar {
  margin-left: auto;
  padding-left: 10px;
  font-size: 13px;
  line-height: 1;
  color: var(--muted);
}
.pn-fold:hover .ar {
  color: var(--accent-ink);
}
.pn-fold .ar::before {
  content: "▴";
}
.pn-folded .pn-fold .ar::before {
  content: "▾";
}
.pn-folded > .pn-lab {
  margin-bottom: 0;
}
.pn-aibar {
  margin-top: 10px;
}
.pn-aibar:has(.pn-aichk[hidden]):has(#pnJudgeSt:empty) {
  display: none;
}
.pn-aichk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border: 0;
  border-radius: 999px;
  background: var(--ai-soft);
  color: var(--ai);
  font: 600 12.5px var(--font);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.pn-aichk:hover {
  filter: brightness(.96);
}
.pn-aichk .ic {
  width: 13px;
  height: 13px;
}
#pnJudgeSt:empty {
  display: none;
}
#pnJudgeSt {
  margin: 8px 0 0;
}
.id-langs {
  display: inline-flex;
  gap: 2px;
  margin-left: 10px;
  vertical-align: middle;
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
}
.id-langs button {
  appearance: none;
  border: 0;
  background: transparent;
  font: 700 10.5px/1 var(--font);
  letter-spacing: .04em;
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.id-langs button.on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.id-uznote {
  font-size: 11.5px;
  color: var(--muted);
  margin: 6px 0 0;
}
.id-tr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.id-tr .btn {
  padding: 6px 12px;
  font-size: 12.5px;
}
.id-trst {
  font-size: 11.5px;
  color: var(--muted);
}
.id-trmark {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}
.id-trmark.stale {
  color: var(--serious-text);
}
.ed-f .src.new {
  color: var(--good-text);
  background: rgba(24, 163, 74, .12);
}
.ed-f .src.was {
  color: var(--muted);
  background: transparent;
  border: 1px dashed var(--border);
}
.id-fixhd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 9px;
  margin-top: 4px;
  font: 500 13px/1.3 var(--font);
  color: var(--ink-2);
}
.id-fixhd:empty {
  display: none;
}
.id-fixhd .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--crit);
  color: #fff;
  font-size: 11.5px;
}
.id-fixhd .n.ok {
  background: var(--good);
}
.id-fixhd i {
  font-style: normal;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.dw-panel .dw-scores {
  margin: 14px 0 10px;
}
.dw-panel .dw-chip b {
  font-size: 20px;
}
.dw-panel .ai-status:empty {
  display: none;
}
.dw-panel .id-foldbody .dw-lv:first-of-type {
  margin-top: 0;
}
.id-act {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.id-act .btn {
  font-size: 12.5px;
  padding: 8px 13px;
}
.id-act .id-del:hover {
  color: var(--crit-text);
  border-color: var(--crit);
}
.dw-note {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  line-height: 1.5;
}
.dw-scores {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 4px;
}
.dw-chip {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 15px;
}
.dw-chip i {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.dw-chip b {
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.dw-chip b.sev-good {
  color: var(--good);
}
.dw-chip b.sev-warn {
  color: var(--serious);
}
.dw-chip b.sev-crit {
  color: var(--crit);
}
.dw-sectlab {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 26px 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.dw-sectlab b {
  font-size: 12.5px;
}
.dw-sectlab b.sev-good,
.dw-sectlab .sev-good {
  color: var(--good);
}
.dw-sectlab b.sev-warn,
.dw-sectlab .sev-warn {
  color: var(--serious);
}
.dw-sectlab b.sev-crit,
.dw-sectlab .sev-crit {
  color: var(--crit);
}
.dw-empty {
  font-size: 13.5px;
  color: var(--muted);
  background: var(--sunken);
  border-radius: 10px;
  padding: 12px 14px;
  line-height: 1.5;
}
.dw-act {
  margin: 14px 0 2px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dw-jstatus {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
}
.dw-bars {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 14px;
}
.dw-findings {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dw-findings:empty {
  display: none;
}
.dw-tells {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dw-tell {
  font-size: 12.5px;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 9px;
  color: var(--ink-2);
}
.dw-tell i {
  color: var(--muted);
  font-style: normal;
  font-weight: 700;
  font-size: 10.5px;
}
.dw-tell.struct {
  border-color: var(--ai);
  color: var(--ai);
}
.dw-foot {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.dw-oklink {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent-ink);
  cursor: pointer;
}
.dw-oklink:hover {
  text-decoration: underline;
}
.dw-post .dw-panel {
  width: min(760px, 100vw);
  padding: 18px 22px 32px;
}
.dw-post .rv {
  margin: 0;
  border: 0;
  padding: 0;
}
.dw-post .rv-top {
  font-size: 13.5px;
}
@media (max-width: 760px) {
  .dw-post .dw-panel {
    padding: 0 16px 24px;
  }
  .dw-post .rv {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .dw-post .rv-text {
    display: contents;
  }
  .dw-post .rv-top,
  .dw-post .rv-nums,
  .dw-post .rv-gain {
    order: -1;
  }
  .dw-post .rv-top {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface);
    padding: 12px 0 8px;
  }
  .dw-post .rv-nums {
    margin: 0 0 12px;
  }
  .dw-post .rv-gain {
    margin: -4px 0 12px;
  }
  .dw-post .rv-embed {
    width: 100%;
    max-width: 328px;
    margin: 0 auto 4px;
  }
  .dw-post .rv-embed iframe {
    height: 540px;
  }
}
@media (max-width: 420px) {
  .dw-post .rv-nums {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* server/static/css/13-ideatree.css */
#sec-ideatree {
  max-width: none;
}
.idea-views {
  margin: 0 0 14px;
}
.tr-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
}
.tr-head .btn {
  font-size: 12.5px;
  padding: 7px 12px;
}
.tr-err {
  color: var(--serious-text);
}
.tr-bar {
  display: block;
  height: 7px;
  background: var(--hairline);
  border-radius: 4px;
  overflow: hidden;
}
.tr-bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
}
.tr-lab {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 14px 0 6px;
}
.tr-idea {
  border: 0;
  background: none;
  padding: 0;
  font: 600 13px/1.4 var(--font);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.tr-idea:hover {
  color: var(--accent-ink);
  text-decoration: underline;
}
.tr-link {
  border: 0;
  background: none;
  padding: 0;
  font: 600 12.5px/1.4 var(--font);
  color: var(--accent-ink);
  cursor: pointer;
  text-align: left;
}
.tr-link:hover {
  text-decoration: underline;
}
.tr-gist {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}
.tr-none {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0;
}
.tr-tag {
  font-size: 10.5px;
  font-weight: 800;
  border-radius: 6px;
  padding: 1px 6px;
  background: var(--sunken);
  color: var(--muted);
}
.tr-tag.star {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.tr-tag.dup {
  background: var(--serious-soft);
  color: var(--serious-text);
}
.tr-tag.work {
  background: #fdf3dc;
  color: #9a6a12;
}
.tr-fs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0 2px;
}
.tr-f {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px 28px;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}
.tr-f b {
  font-size: 12px;
  text-align: right;
  color: var(--ink-2);
}
.tr-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 12px;
  color: var(--ink-2);
  margin: 0 0 8px;
}
.tr-legend i {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  vertical-align: -2px;
  margin-right: 4px;
}
.tr-layout {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.tr-main {
  flex: 1 1 0;
  min-width: 0;
}
.tr-layout.is-tree .tr-main {
  flex: 0 0 auto;
}
.tr-layout.is-tree > .tp {
  flex: 0 0 452px;
}
.tr-layout.with-leaf .tr-main {
  min-width: 420px;
}
.tl {
  flex: 0 0 clamp(340px, 26vw, 480px);
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.tl > .tr-lab {
  margin-top: 0;
}
.tp {
  flex: 0 0 clamp(420px, 30vw, 540px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 16px 16px;
  min-width: 0;
}
.tv {
  flex: 0 0 320px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px;
  min-width: 0;
}
.tv .rv {
  grid-template-columns: minmax(0, 1fr);
  border: 0;
  padding: 0;
  margin: 0;
}
.tv .rv-embed {
  width: 262px;
  height: 432px;
  overflow: hidden;
  margin: 0 auto;
}
.tv .rv-embed iframe {
  width: 328px;
  max-width: none;
  height: 540px;
  transform: scale(.8);
  transform-origin: 0 0;
}
.tp-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.tp-x {
  border: 0;
  background: var(--sunken);
  border-radius: 8px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink-2);
  flex: none;
}
.tp-h {
  font-size: 15px;
  font-weight: 800;
  margin: 2px 0 4px;
  line-height: 1.3;
  cursor: help;
}
.tp-info {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.tp-why {
  position: relative;
  flex: none;
  margin: 4px 0 0 auto;
}
.tp-why > summary {
  display: flex;
  align-items: baseline;
  gap: 4px;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.tp-why > .tr-fs {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  width: 300px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
}
.tp-why > summary::-webkit-details-marker {
  display: none;
}
.tp-why > summary::after {
  content: "▾";
  color: var(--muted);
}
.tp-why[open] > summary::after {
  content: "▴";
}
.tp-text {
  font-size: 12.5px;
  color: var(--ink-2);
  margin: 0;
  white-space: pre-wrap;
}
.tp-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.tp-acts .btn {
  font-size: 12.5px;
  padding: 6px 10px;
}
.rf-strip {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 2px 2px 8px;
}
.rf-strip.all {
  flex-wrap: wrap;
}
.rf-more {
  flex: none;
  align-self: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-2);
  display: grid;
  place-items: center;
  align-content: center;
  cursor: pointer;
  padding: 0;
}
.rf-more:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}
.rf-more .ic {
  width: 15px;
  height: 15px;
}
.rf-more small {
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
}
.rf-strip.all .rf-more {
  align-self: center;
}
.rf {
  flex: 0 0 90px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
  text-align: left;
  font: 10.5px/1.3 var(--font);
  min-width: 0;
  cursor: pointer;
}
.rf:hover {
  border-color: var(--accent);
}
.rf.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.rf-thumb {
  position: relative;
  height: 100px;
  border-radius: 6px;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.rf-thumb.reels {
  background: #e7e9ff;
  color: #3730a3;
}
.rf-thumb.carousel {
  background: #dcf1ea;
  color: #0f6b52;
}
.rf-thumb > .ic {
  width: 16px;
  height: 16px;
  opacity: .5;
}
.rf-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rf-fmt {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: rgba(23, 26, 32, .62);
  display: grid;
  place-items: center;
}
.rf-fmt .ic {
  width: 11px;
  height: 11px;
  color: #fff;
}
.rf-v {
  position: absolute;
  left: 4px;
  bottom: 4px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: rgba(23, 26, 32, .62);
  border-radius: 6px;
  padding: 1px 6px;
}
.rf-a {
  font-weight: 700;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}
.rf-h {
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rf-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: auto;
}
.rf-tags i {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  border-radius: 5px;
  padding: 0 5px;
  background: var(--sunken);
  color: var(--ink-2);
}
.rf-tags i.pick {
  background: #fdeee6;
  color: #9a3a0e;
}
.rv {
  display: grid;
  grid-template-columns: 328px minmax(0, 1fr);
  gap: 12px;
  margin-top: 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px;
  background: var(--surface);
}
.rv-embed iframe {
  display: block;
  width: 100%;
  max-width: 328px;
  height: 600px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--sunken);
}
.rv-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.rv-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.rv-top a {
  color: var(--accent-ink);
}
.rv-top .ic {
  width: 12px;
  height: 12px;
  vertical-align: -1px;
}
.rv-top .tp-x {
  margin-left: auto;
}
.rv-speech {
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  white-space: pre-wrap;
}
.rv-embed {
  position: relative;
}
.rv-embed > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 328px;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-sm);
}
.rv-embed > img + iframe {
  position: relative;
  background: transparent;
}
.rv-nums {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0 2px;
}
.rv-nums div {
  background: var(--sunken);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  min-width: 0;
}
.rv-nums dt {
  font-size: 11px;
  color: var(--muted);
}
.rv-nums dd {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.rv-gain {
  margin: 8px 0 2px;
  font-size: 13px;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rv-scen {
  align-self: flex-start;
  margin-top: 12px;
}
.rv-more {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.rv-more summary {
  cursor: pointer;
  color: var(--accent-ink);
  font-weight: 600;
}
.tp .rv {
  grid-template-columns: minmax(0, 1fr);
}
.tp .rv-embed {
  width: 262px;
  height: 432px;
  overflow: hidden;
  margin: 0 auto;
}
.tp .rv-embed iframe {
  width: 328px;
  max-width: none;
  height: 540px;
  transform: scale(.8);
  transform-origin: 0 0;
}
.tr-toprow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 10px;
  margin: 0 0 14px;
}
.tr-toprow .tr-head {
  margin: 0;
}
.tg-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.tg-bar .tg-chk {
  height: var(--ctl-h, 34px);
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.tg-bar .tg-chk:hover {
  border-color: rgba(var(--accent-rgb), .55);
}
.tg-bar .tg-chk:has(input:checked) {
  color: var(--accent-ink);
}
.tg-bar .tg-chk input {
  margin: 0;
  accent-color: var(--accent);
}
.tg-filter {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.tg-filter select {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  max-width: 100%;
}
.tg {
  padding: 4px 2px 12px;
}
.tg-cols {
  display: flex;
  align-items: flex-start;
}
.tg-caps {
  display: flex;
  gap: 0;
  margin: 0 0 6px;
}
.tg-cap i {
  font-style: normal;
  color: var(--ink-2);
  margin-left: 3px;
}
.tg-cap {
  flex: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.tg-cap.c0 {
  width: 132px;
}
.tg-cap.c1 {
  width: 162px;
  padding-left: 30px;
}
.tg-cap.c2 {
  width: 180px;
  padding-left: 30px;
}
.tg-cap.c3 {
  padding-left: 30px;
}
.gl {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: 0;
}
.gl.g-reach {
  background: #cc79a7;
}
.gl.g-exp {
  background: #2a78d6;
}
.gl.g-life {
  background: #009e73;
}
.gl.g-sell {
  background: #e69f00;
}
.tg-col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: none;
}
.tg-col.tg-leafcol {
  flex: 0 0 auto;
  width: clamp(340px, 26vw, 480px);
}
.tg-row {
  display: flex;
  align-items: flex-start;
  position: relative;
}
.tg-node.dim {
  opacity: .5;
}
.tg-node.dim:hover {
  opacity: 1;
}
.tg-node {
  flex: none;
  width: 132px;
  min-height: 40px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  padding: 6px 9px;
  font: 600 12.5px/1.3 var(--font);
  color: var(--ink);
}
.tg-node:hover {
  border-color: var(--accent);
}
.tg-node.open {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.tg-node.k-rubric {
  background: #fff7ef;
  border-color: #f3d6b8;
}
.tg-node.k-rubric.open {
  border-color: #e07a2c;
  box-shadow: 0 0 0 2px #fdf1e3;
}
.tg-node.k-sub {
  width: 150px;
}
.tg-n {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}
.tg-n b {
  font-size: 10.5px;
  font-weight: 800;
  border-radius: 5px;
  padding: 0 5px;
}
.tg-kids {
  padding-left: 30px;
}
.tg-kids::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  width: 15px;
  border-top: 1.5px solid #b9bccb;
}
.tg-kids > .tg-row::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 20px;
  width: 15px;
  border-top: 1.5px solid #b9bccb;
}
.tg-kids > .tg-row::after {
  content: "";
  position: absolute;
  left: -15px;
  top: -4px;
  bottom: -4px;
  border-left: 1.5px solid #b9bccb;
}
.tg-kids > .tg-row:first-child::after {
  top: 20px;
}
.tg-kids > .tg-row:last-child::after {
  bottom: auto;
  height: 24px;
}
.tg-kids > .tg-row:first-child:last-child::after {
  display: none;
}
.tg-leaf {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1 1 0;
}
.tg-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.tg-li + .tg-li {
  border-top: 1px solid var(--hairline);
}
.tg-lih {
  width: 100%;
  display: flex;
  gap: 6px;
  align-items: baseline;
  border: 0;
  background: none;
  padding: 8px 10px;
  text-align: left;
  font: 500 13px/1.35 var(--font);
  color: var(--ink);
  cursor: pointer;
}
.tg-lih:hover {
  background: #fbfcfe;
}
.tg-li.sel > .tg-lih {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.tg-li.dupsub > .tg-lih {
  padding-left: 30px;
  color: var(--ink-2);
  font-weight: 500;
  font-size: 12.5px;
}
.tg-li.dupsub > .tg-lih::before {
  content: "↳";
  margin-left: -16px;
  color: var(--muted);
}
.tg-li.dupsub + .tg-li.dupsub,
.tg-li:not(.dupsub) + .tg-li.dupsub {
  border-top-style: dashed;
}
.tg-chk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
}
.tg-num {
  cursor: help;
}
.tg-li {
  position: relative;
}
.tg-pen {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 24px;
  height: 24px;
  display: none;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.tg-pen .ic {
  width: 13px;
  height: 13px;
}
.tg-li:hover > .tg-pen,
.tg-li.sel > .tg-pen {
  display: grid;
}
.tg-pen:hover {
  color: var(--accent-ink);
  background: var(--accent-soft);
}
.tg-li:hover > .tg-lih,
.tg-li.sel > .tg-lih {
  padding-right: 34px;
}
.tg-editing {
  padding: 5px 8px;
}
.tg-edit {
  flex: 1 1 auto;
  min-width: 0;
  font: 600 13px/1.35 var(--font);
  padding: 4px 8px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  outline: none;
}
.tr-ov {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(23, 26, 32, .38);
  display: grid;
  place-items: start center;
  padding: 6vh 16px;
  overflow-y: auto;
}
.tr-ovbox {
  position: relative;
  width: min(980px, 100%);
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  padding: 20px 22px;
}
.tr-ovx {
  position: absolute;
  right: 14px;
  top: 14px;
}
.tr-ovbox .scen-main {
  padding-right: 44px;
  margin-bottom: 12px;
}
.tr-ovbox .scen-title {
  font-size: 16px;
  font-weight: 700;
}
.tr-ovbox .idea-body {
  padding: 0;
}
.tg-li.fresh > .tg-lih {
  background: #e9f7ee;
}
.tg-lit {
  flex: 1 1 auto;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tg-li.sel .tg-lit {
  display: block;
}
.tg-mk {
  flex: none;
  font-size: 11px;
  color: var(--accent-ink);
  letter-spacing: 2px;
}
.tg-libody {
  padding: 2px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tg-drafts {
  border-style: dashed;
  border-color: #5fb37e;
  background: #fbfefc;
}
.tg-plusrow {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px dashed #6c8fce;
  border-radius: var(--r-sm);
  background: #f2f6fd;
  color: #3f63a8;
  padding: 6px 12px;
  font: 600 12.5px var(--font);
  cursor: pointer;
}
.tg-plusrow .ic {
  width: 14px;
  height: 14px;
}
.tg-plusrow:disabled {
  cursor: progress;
}
.tg-subgo {
  display: none;
}
.tg-dlab {
  margin: 2px 0 -2px;
  color: #3f9a62;
}
.tg-dlab .ic {
  width: 12px;
  height: 12px;
  vertical-align: -1px;
}
.tg-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.tg-ic {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
}
.tg-ic:hover,
.tg-ic.on {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: var(--accent-soft);
}
.tg-ic .ic {
  width: 16px;
  height: 16px;
}
.tg-ic.wide {
  width: auto;
  display: inline-flex;
  gap: 5px;
  padding: 0 10px;
  font: 600 12.5px var(--font);
}
.tg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.tg-chips > i {
  font-size: 12px;
}
.tm {
  display: block;
  width: 100%;
  height: auto;
}
.tm-tile {
  cursor: pointer;
  outline: none;
}
.tm-tile:hover rect,
.tm-tile:focus rect {
  stroke: var(--ink);
  stroke-width: 2;
}
.tm-note {
  margin: 0 0 8px;
}
.tr-dgroup {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 10px 14px;
  margin: 0 0 8px;
  font-size: 13px;
}
.tr-dgroup p {
  margin: 4px 0;
  color: var(--ink-2);
}
.tr-dh {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.tr-dh span {
  font-size: 12px;
  color: var(--muted);
}
.tr-dgroup ol,
.tr-dgroup ul {
  margin: 4px 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
@media (max-width: 1100px) {
  .tg-subgo {
    display: inline;
    align-self: flex-start;
  }
  .tr-layout {
    display: block;
    overflow: visible;
  }
  .tg-col.tg-leafcol {
    width: auto;
  }
  .tp {
    position: fixed;
    inset: 0;
    z-index: 60;
    overflow-y: auto;
    border-radius: 0;
    border: 0;
    padding: 14px 16px 24px;
  }
}
@media (max-width: 640px) {
  .tg-caps {
    display: none;
  }
  .tg-cols {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .tg-col,
  .tg-col.tg-leafcol {
    min-width: 0;
  }
  .tg-col::before {
    content: attr(data-cap);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .tg-kids {
    padding-left: 0;
  }
  .tg-kids::before {
    position: static;
    width: auto;
    border: 0;
  }
  .tg-kids > .tg-row::before,
  .tg-kids > .tg-row::after {
    display: none;
  }
  .tg-node,
  .tg-node.k-sub {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    min-height: 0;
  }
  .tg-n {
    flex: none;
  }
  .rv {
    grid-template-columns: minmax(0, 1fr);
  }
  .rv-embed iframe {
    margin: 0 auto;
    height: 540px;
  }
}
.tp-mats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}
.tp-mat {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.tp-mat:hover {
  background: var(--accent-soft);
}
.tp-matk {
  flex: none;
  display: grid;
  color: var(--muted);
}
.tp-matk .ic {
  width: 15px;
  height: 15px;
}
.tp-matt {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tp-matd {
  flex: none;
  font-size: 12px;
  color: var(--muted);
}
.tr-ovinfo {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.tr-ovinfo .tr-gist {
  margin: 8px 0 0;
}

/* server/static/css/14-scenflow.css */
.sf {
  font-size: 13px;
  color: var(--ink);
}
.sf-grow {
  flex: 1 1 auto;
  min-width: 0;
}
.sf-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sf-mut {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.sf-lab {
  display: block;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.sf-link {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: 600 12.5px var(--font);
  color: var(--accent-ink);
}
.sf-link:hover:not(:disabled) {
  text-decoration: underline;
}
.sf-link:disabled {
  opacity: .45;
  cursor: default;
}
.sf-sm {
  padding: 7px 12px;
  font-size: 12.5px;
}
.sf-metarow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.sf-kind {
  flex: none;
}
.sf-kind button {
  padding: 7px 14px;
  font-size: 12.5px;
}
.sf-start .rib-h {
  cursor: default;
}
.sf-start .rib.off .rib-b {
  opacity: .6;
}
.sf-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 340px);
  gap: 10px;
  align-items: start;
  margin: 0 0 10px;
}
.sf-top > .rib {
  margin: 0;
}
.sf-topr {
  min-width: 0;
}
.sf-start .sf-top .id-setup {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin: 0;
}
.sf-start .sf-top .id-fld {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.sf-start .sf-top .id-fld > span {
  width: auto;
  font-size: 12px;
  white-space: nowrap;
}
.sf-start .sf-top .id-hint {
  margin: 8px 4px 0;
}
@container dwin (max-width: 640px) {
  .sf-top {
    grid-template-columns: minmax(0, 1fr);
  }
}
.sf-start .id-sect[data-n="4"] {
  background: var(--tint);
  border: 1px solid var(--tint-line);
  border-radius: var(--r-lg, 14px);
  padding: 14px 16px;
  margin-top: 0;
}
.rib-tag.bad {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--serious-soft);
  border-color: transparent;
  color: var(--serious-text);
}
.rib-tag.bad .ic {
  width: 13px;
  height: 13px;
  flex: none;
}
.sf-start .rib[data-n="1"] .rib-h {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 12px 16px;
}
.sf-start .rib[data-n="1"] .rib-lab {
  width: auto;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.25;
  white-space: nowrap;
}
.sf-start .rib[data-n="1"] .rib-val {
  flex: none;
}
.sf-start .rib[data-n="1"] .rib-tag {
  margin-top: 2px;
}
.rib-lab .id-ai {
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ai);
  background: var(--ai-soft);
  border-radius: 4px;
  padding: 0 4px;
  margin-left: 5px;
  font-weight: 700;
}
.sf-ideata {
  flex: 1 1 260px;
  min-width: 0;
  display: block;
  box-sizing: border-box;
  resize: none;
  overflow: hidden;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  font: 500 14px/1.5 var(--font);
  color: var(--ink);
}
.sf-ideata:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.sf-ideata:disabled {
  color: var(--muted);
}
.sf-ideaval {
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
  padding-top: 6px;
}
.sf-topic {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 11px;
  font: 13px/1.55 var(--font);
  color: var(--ink);
  resize: vertical;
  background: var(--surface);
}
.sf-topic:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.sf-bad {
  margin: 0;
  font-size: 13px;
  color: var(--ink-2);
}
.sf-bad b {
  font-weight: 600;
  color: var(--serious-text);
}
.sf-dlg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 0;
}
.sf-ln {
  margin: 0;
  padding: 8px 11px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  background: var(--surface);
}
.sf-ln b {
  margin-right: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.sf-ln.ai b {
  color: var(--ai);
}
.sf-ln.me {
  background: var(--accent-soft);
}
.sf-ansrow {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 8px;
}
.sf-ansrow .sf-topic {
  flex: 1 1 auto;
  min-width: 0;
}
.sf-ansrow .btn {
  flex: none;
  height: 40px;
}
.sf-feed {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  scroll-snap-type: x proximity;
}
.sf-hk {
  flex: 0 0 auto;
  width: max-content;
  min-width: 140px;
  max-width: 250px;
  box-sizing: border-box;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 12px;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.sf-hk:hover {
  border-color: #c7c8f8;
}
.sf-hk[aria-pressed=true] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.sf-hkq {
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--muted);
}
.sf-hk[aria-pressed=true] .sf-hkq {
  color: var(--ink-2);
}
.sf-hk:hover .sf-hkq {
  color: var(--ink-2);
}
.sf-meta {
  font-size: 11px;
  color: var(--muted);
}
.sf-stop {
  color: var(--crit-text);
  font-weight: 600;
}
.sf-hkmore {
  width: 104px;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 12.5px;
  border-style: dashed;
  background: transparent;
}
.sf-hkmore .ic {
  width: 18px;
  height: 18px;
}
.sf-hkwait {
  width: 280px;
  max-width: none;
  cursor: default;
  justify-content: center;
}
.sf-under {
  margin-top: 8px;
}
.sf-start .id-sect[data-n="4"] {
  container-type: inline-size;
}
.sf-stgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 22px;
  align-items: center;
}
@container (max-width: 900px) {
  .sf-stgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container (max-width: 560px) {
  .sf-stgrid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.sf-sthint {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
}
.sf-seg {
  flex: 1 1 auto;
  display: flex;
  min-width: 0;
  height: 36px;
  box-sizing: border-box;
}
.sf-seg button {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 4px;
  line-height: 1.1;
  white-space: normal;
}
.sf-wait {
  padding: 8px 0;
}
.sf-err {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--crit-text);
  background: var(--crit-soft);
  border-radius: 8px;
  padding: 8px 11px;
}
.sf-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.sf-actions .btn-primary {
  padding: 9px 15px;
  font-size: 12.5px;
}
.sf-actions .btn-primary:disabled {
  opacity: .45;
  box-shadow: none;
  cursor: default;
}
.sf-ed {
  margin: 10px 0 4px;
}
.sf-hookbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 11px;
  border-radius: 9px;
  background: var(--accent-soft);
}
.sf-hookbar .sf-lab {
  color: var(--accent-ink);
}
.ed-hl .ed-hook {
  background: var(--accent-soft);
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
@media (max-width: 640px) {
  .sf-ansrow {
    flex-wrap: wrap;
  }
  .sf-ansrow .sf-topic {
    flex-basis: 100%;
  }
}

/* server/static/css/15-slidepack.css */
.mdl.sp-mdl .mdl-box {
  width: min(920px, 96vw);
}
.sp-ctl {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin-bottom: 12px;
}
.sp-f {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sp-lab {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
}
.sp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sp-row .chip {
  min-height: 36px;
  padding: 0 14px;
}
.sp-row .chip[aria-pressed=true] {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.sp-warn {
  margin-bottom: 8px;
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--serious-text);
  background: var(--serious-soft);
}
.sp-err {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--crit-text);
  background: var(--crit-soft);
}
.sp-strip {
  display: flex;
  gap: 12px;
  min-height: 120px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
.sp-strip .kw-load {
  margin: auto;
}
.sp-off {
  max-width: 330px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--serious-text);
}
.sp-slide {
  position: relative;
  flex: none;
  width: 260px;
  margin: 0;
  scroll-snap-align: start;
}
.sp-slide > img,
.sp-slide > video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(20, 17, 24, .18);
  background: var(--hairline);
}
.sp-slide.over > img,
.sp-slide.over > video {
  outline: 3px solid var(--crit);
  outline-offset: 2px;
}
.sp-mp4 {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(20, 17, 24, .72);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
}
.sp-slide figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 32px;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--muted);
}
#spStrip .sp-play {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent-ink);
  font: 700 12px var(--font);
  cursor: pointer;
}
#spStrip .sp-play:hover {
  border-color: var(--accent);
  background: var(--surface);
}
#spStrip .sp-play:disabled {
  color: var(--muted);
  cursor: default;
}
.sp-dense {
  margin-top: 4px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--crit-text);
  background: var(--crit-soft);
  text-align: center;
}
#spStrip .sp-ph {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin-top: 6px;
  padding: 5px 8px 5px 5px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-2);
  font: 500 12px var(--font);
  text-align: left;
  cursor: pointer;
}
#spStrip .sp-ph:hover,
#spStrip .sp-ph.on {
  border-color: var(--accent);
  background: var(--surface);
}
#spStrip .sp-ph img {
  flex: none;
  width: 32px;
  height: 44px;
  object-fit: cover;
  border-radius: 5px;
  box-shadow: none;
}
.sp-ph-t {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sp-ph-t b {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}
.sp-ph-n {
  font-size: 11px;
  line-height: 1.3;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-ph.none .sp-ph-n {
  white-space: normal;
}
.sp-ph-go {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-ink);
}
.sp-pick {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--sunken);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sp-pick-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sp-pick .chip {
  min-height: 36px;
  padding: 0 14px;
}
.sp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  max-height: 330px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#spPick .sp-th {
  position: relative;
  display: block;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--hairline);
  cursor: pointer;
  aspect-ratio: 9 / 16;
  overflow: hidden;
}
#spPick .sp-th img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#spPick .sp-th:hover {
  border-color: var(--accent);
  background: var(--hairline);
}
#spPick .sp-th.on {
  border-color: var(--ink);
}
#spPick .sp-th:disabled {
  cursor: default;
  opacity: .4;
  border-color: transparent;
}
.sp-th-busy {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 20px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
@media (max-width: 560px) {
  .sp-slide {
    width: 72vw;
  }
  .sp-grid {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  }
}
.ps {
  margin: 2px 0 14px;
}
.ps-hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}
.ps-hd .id-lnk {
  flex: none;
  white-space: nowrap;
}
.ps-hd #psText[aria-pressed=true] {
  font-weight: 700;
  text-decoration: underline;
}
.ps-lab {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
}
.ps-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(136px, 164px));
  justify-content: start;
  gap: 12px 10px;
  min-height: 120px;
  padding: 3px 3px 8px;
}
@container dwin (max-width: 640px) {
  .ps-strip {
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 10px 8px;
  }
}
.ps-strip > .ps-note {
  grid-column: 1 / -1;
}
.ps-strip.wait .ps-sl img {
  opacity: .55;
  transition: opacity .2s;
}
.ps-it {
  min-width: 0;
}
.ps-cell {
  position: relative;
}
.ps-m {
  display: block;
}
#psStrip .ps-sl {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--hairline);
  cursor: pointer;
}
#psStrip .ps-sl:hover {
  background: var(--hairline);
}
.ps-sl img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(20, 17, 24, .18);
}
#psStrip .ps-sl.on {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
#psStrip .ps-sl.over {
  outline: 3px solid var(--crit);
  outline-offset: 2px;
}
.ps-n {
  position: absolute;
  left: 6px;
  bottom: 6px;
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(20, 17, 24, .72);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.ps-n i {
  font-style: normal;
  font-weight: 600;
}
.ps-it[data-i="0"] .ps-n {
  background: var(--accent);
}
.ps-bad {
  display: none;
  position: absolute;
  left: 6px;
  top: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--crit);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
}
.ps-sl.over .ps-bad {
  display: block;
}
.ps-pht {
  display: block;
  aspect-ratio: 4 / 5;
  box-sizing: border-box;
  padding: 32px 10px 11px;
  overflow: hidden;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--ink-2);
}
.ps-pht b {
  display: block;
  margin-bottom: 4px;
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--ink);
}
.ps-sl.pend .ps-pht {
  animation: ps-pulse 1.4s ease-in-out infinite;
}
@keyframes ps-pulse {
  50% {
    opacity: .55;
  }
}
.ps-ct {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 3px;
  opacity: 0;
  transition: opacity .12s;
}
.ps-cell:hover .ps-ct,
.ps-cell:focus-within .ps-ct,
.ps-sl.on ~ .ps-ct {
  opacity: 1;
}
@media (hover: none) {
  .ps-ct {
    opacity: 1;
  }
}
.ps-ct button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 17, 24, .72);
  color: #fff;
  font: 700 12px/1 var(--font);
  cursor: pointer;
}
.ps-ct button:hover:not(:disabled) {
  background: rgba(20, 17, 24, .92);
}
.ps-ct button.x:hover:not(:disabled) {
  background: var(--crit);
}
.ps-ct button:disabled {
  opacity: .35;
  cursor: default;
}
.ps-newsl {
  align-self: end;
  aspect-ratio: 4 / 5;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: 700 13px var(--font);
  transition: all .12s;
}
.ps-newsl:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: var(--accent-soft);
}
.ps-err {
  margin: 0 0 8px;
  font-size: 12.5px;
}
.ps-err .kw-load {
  justify-content: flex-start;
  padding: 2px 0;
}
.ps-ed {
  grid-column: 1 / -1;
  box-sizing: border-box;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 12px;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.ps-edh {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  font: 800 10.5px/1 var(--font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.ps-edh .ps-ct {
  position: static;
  opacity: 1;
  margin-left: auto;
}
.ps-edh .ps-ct button {
  width: 28px;
  height: 28px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
}
.ps-edh .ps-ct button:hover:not(:disabled) {
  background: var(--sunken);
  color: var(--ink);
}
.ps-edh .ps-ct button.x:hover:not(:disabled) {
  background: var(--crit-soft);
  color: var(--crit-text);
}
.ps-ed textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 84px;
  margin-top: 8px;
  padding: 9px 11px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  font: 14.5px/1.5 var(--font);
  color: var(--ink);
}
.ps-ed textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.ps-edm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 8px;
}
.ps-edw {
  font: 600 11.5px/1.4 var(--font);
  color: var(--muted);
}
.ps-edw.over {
  color: var(--serious-text);
}
.ps-edb {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.ps-eng {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-bottom: 8px;
}
.ps-seg {
  display: inline-flex;
  gap: 6px;
}
.ps-seg .chip {
  font-size: 12.5px;
  padding: 5px 12px;
}
.ps-note {
  font-size: 12px;
  color: var(--muted);
}
.ps-wait {
  flex-basis: 100%;
}
.ps-ty {
  margin-bottom: 6px;
}
.ps-ty:empty {
  display: none;
}
.ps-tl {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 6px;
}
.ps-tl span {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
.ps-tl select {
  width: 100%;
  height: 34px;
  padding: 4px 8px;
  font-size: 13px;
}
.ps-rev {
  margin: 2px 0 10px;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--sunken);
  font-size: 13px;
  line-height: 1.45;
}
.ps-rh {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}
.ps-rh .ps-lab {
  margin-right: auto;
}
.ps-sw {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
}
.ps-rev p {
  margin: 4px 0 0;
}
.ps-ok {
  color: var(--ink-2);
}
.ps-rg {
  margin-top: 6px;
}
.ps-rn {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
.ps-rg ul {
  margin: 2px 0 0;
  padding-left: 18px;
  color: var(--ink);
}
.ps-rg .btn {
  margin-top: 6px;
}
.ps-ask {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.ps-for {
  font-weight: 500;
  color: var(--ink-2);
}
#psFor .ps-x {
  margin-left: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-ink);
  font: 700 11.5px var(--font);
  text-decoration: underline;
  cursor: pointer;
}
.ps-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.ps-row textarea {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: 14px/1.4 var(--font);
  resize: vertical;
}
.ps-row textarea:disabled {
  background: var(--sunken);
  color: var(--muted);
}
.ps-row .btn {
  flex: none;
  align-self: flex-start;
  min-height: 44px;
}
.ps-off {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--serious-text);
}
.ps-reply {
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--sunken);
  font-size: 13px;
  line-height: 1.45;
}
.ps-reply p {
  margin: 0;
}
.ps-reply ul {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--ink-2);
}
.ps-reply .btn {
  margin-top: 8px;
}
.ps-post {
  margin: 2px 0 10px;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--sunken);
  font-size: 13px;
  line-height: 1.45;
}
.ps-post > p {
  margin: 4px 0 0;
}
.ps-post .ps-reply {
  margin-top: 8px;
  padding: 0;
  background: none;
}
.ps-hooks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.ps-hk {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.ps-hk-k {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
.ps-hk-t {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}
.ps-hk-t b {
  color: var(--accent-ink);
}
.ps-hk .ps-note {
  margin: 0;
}
.ps-hk .btn {
  margin-top: auto;
  align-self: flex-start;
}
#psHookUndo {
  margin-top: 8px;
}
.ps-pre-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px 10px;
}
.ps-pre-row .ps-tl {
  flex: 1 1 220px;
}
.ps-pre-row .btn {
  min-height: 34px;
}
.ps-cap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ps-cap-s:empty {
  display: none;
}
.ps-cap-s.open {
  flex: 1 1 100%;
  min-width: 0;
}
.ps-cap-s .ps-tl {
  margin: 0 0 4px;
}
.ps-add {
  padding: 6px 13px;
  border: 1px dashed var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: 600 12.5px var(--font);
  cursor: pointer;
}
.ps-add:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: var(--accent-soft);
}
#psCapT,
#psCapTags {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: 14px/1.45 var(--font);
}
#psCapT {
  min-height: 112px;
  resize: vertical;
}
#psCapT[readonly],
#psCapTags[readonly] {
  background: var(--sunken);
}
.ps-cap-ft {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 8px;
}
.ps-cap-ft[hidden] {
  display: none;
}
.ps-cap-ft .id-lnk {
  margin-left: auto;
}
.ps-err {
  color: var(--crit-text);
}
.ps-post .sp-warn {
  margin-top: 6px;
}
@media (max-width: 560px) {
  .ps-hooks {
    grid-template-columns: 1fr;
  }
}
.ps-st {
  margin: 4px 0 10px;
}
.ps-st.busy .pst {
  opacity: .7;
}
.pst {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--sunken);
  transition: opacity .15s;
}
.pst-hd {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pst-hd b {
  font-size: 14px;
}
.pst-ty {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pst .chip {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
}
.pst-f {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.pst-lab {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
.pst-step {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pst-step .chip {
  width: 44px;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
}
.pst-v {
  min-width: 108px;
  font-size: 13px;
  text-align: center;
  color: var(--ink-2);
}
.pst-words,
.pst-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pst-words .chip {
  min-height: 32px;
  padding: 0 10px;
}
.pst-words .chip[aria-pressed=true] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.pst-crop {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: var(--hairline);
  cursor: grab;
  touch-action: none;
  box-shadow: 0 1px 4px rgba(20, 17, 24, .18);
}
.pst-crop.on {
  cursor: grabbing;
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.pst-crop:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.pst-crop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}
.pst-hint {
  font-size: 11.5px;
  color: var(--muted);
}
.pst-pick {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pst-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#psSt .pst-th {
  position: relative;
  display: block;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--hairline);
  cursor: pointer;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
#psSt .pst-th img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#psSt .pst-th.on {
  border-color: var(--ink);
}
#psSt .pst-th:disabled {
  cursor: default;
  opacity: .4;
}
.pst-reset {
  align-self: flex-start;
}
@media (max-width: 560px) {
  .ps-st {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    margin: 0;
  }
  .pst {
    max-height: 46vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 14px 14px 0 0;
    border-width: 1px 0 0;
    background: var(--surface);
    box-shadow: 0 -8px 24px rgba(20, 17, 24, .18);
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
}
@media (max-width: 560px) {
  .ps-row {
    flex-direction: column;
  }
  .ps-row textarea {
    min-height: 76px;
  }
  .ps-row .btn {
    align-self: stretch;
  }
}

/* server/static/css/16-materials.css */
.bm-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 0 0 14px;
}
.src-purp {
  margin: 0 0 14px;
}
.bm-bar > .src-purp {
  margin: 0;
}
.bm-bar > #bmFilters {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
#bmFilterPop:not(:empty) {
  margin: -4px 0 14px;
}
#sec-ideasrc > .src-st:empty {
  display: none;
}
.src-purp button i {
  font-style: normal;
  font-weight: 600;
  margin-left: 6px;
  color: var(--muted);
  font-size: .9em;
}
.src-purp button[aria-pressed=true] i {
  color: inherit;
  opacity: .75;
}
#sec-ideasrc .ch {
  margin: 0 0 18px;
}
.bm-what {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 16px 18px;
  margin: -6px 0 14px;
}
.bm-what[hidden] {
  display: none;
}
.bm-types {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.bm-type {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--sunken);
  border-radius: var(--r-md);
  padding: 10px 12px;
  min-width: 0;
}
.bm-type .ic {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
  color: var(--accent-ink);
}
.bm-type > div {
  min-width: 0;
}
.bm-type > div > b {
  display: block;
  font-size: 13px;
  line-height: 1.35;
}
.bm-type > div > span {
  display: block;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  margin-top: 3px;
}
.sv-howbtn {
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  font: 650 12.5px var(--font);
  color: var(--accent-ink);
  cursor: pointer;
}
.sv-howbtn:hover {
  text-decoration: underline;
}
.bm-who {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bm-who-f {
  display: block;
  min-width: 0;
}
.bm-who-f[hidden] {
  display: none;
}
.bm-who-f .ch-lab {
  display: flex;
  align-items: center;
  gap: 6px;
}
.bm-who-f select,
.bm-who-f input {
  font: 13.5px var(--font);
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
}
.bm-who-f select {
  width: 100%;
}
.bm-who-f input {
  width: 84px;
}
.bm-who-q {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.bm-who-n {
  font-size: 12.5px;
  color: var(--ink-2);
}
.bm-who-tip {
  margin: -4px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.bm-grp {
  margin-bottom: 18px;
}
.bm-grp h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 750;
}
.bm-grp h3 .ic {
  width: 16px;
  height: 16px;
  color: var(--accent-ink);
}
.bm-grp h3 span {
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
}
#bmList {
  container-type: inline-size;
}
.bm-cols {
  display: grid;
  gap: 6px;
  align-items: center;
  grid-template-columns: var(--bm-cols);
}
.bm-c {
  display: flex;
  min-width: 0;
}
.bm-c > .btn,
.bm-c > .bm-gsel {
  width: 100%;
  justify-content: center;
  padding-left: 8px;
  padding-right: 8px;
}
@container (max-width: 1080px) {
  .bm-item {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .bm-item .bm-cols {
    grid-column: 2 / -1;
  }
}
@container (max-width: 820px) {
  .bm-item .bm-cols {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    grid-column: 1 / -1;
  }
  .bm-c:empty {
    display: none;
  }
  .bm-c > .btn,
  .bm-c > .bm-gsel {
    width: auto;
  }
}
.bm-gsel {
  font: 12.5px var(--font);
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-2);
}
.bm-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.bm-flag {
  font: 600 11.5px var(--font);
  border-radius: var(--r-pill);
  padding: 2px 9px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  border: 0;
}
.bm-flag.warn {
  background: var(--serious-soft);
  color: var(--serious-text);
}
.bm-flag.bad {
  background: var(--crit-soft);
  color: var(--crit-text);
}
.bm-flag.wait {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.bm-flag.muted {
  background: var(--sunken);
  color: var(--muted);
}
.bm-flag.foreign {
  background: var(--sunken);
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--border);
}
.bm-flag.taken {
  background: var(--good-soft);
  color: var(--good-text);
}
.bm-flag-note {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--muted);
}
button.bm-flag {
  cursor: pointer;
}
button.bm-flag:hover {
  text-decoration: underline;
}
.bm-used,
.bm-open,
.bm-taken {
  grid-column: 1 / -1;
}
.bm-taken {
  border-top: 1px solid var(--border);
}
.bm-taken .ch-items {
  margin-top: 0;
}
.bm-used {
  margin: 0;
  padding: 8px 0 0 18px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.6;
}
.bm-used a {
  color: var(--accent-ink);
}
.bm-used span {
  color: var(--muted);
  font-size: 12px;
}
.bm-open {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bm-text {
  margin: 0;
  max-height: 360px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font: 12.5px/1.55 var(--font);
  background: var(--sunken);
  border-radius: var(--r-md);
  padding: 10px 12px;
}
.bm-vers,
.bm-note {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}
.bm-vers b {
  color: var(--ink-2);
}
.bm-vers .id-lnk,
.bm-note .id-lnk {
  font-size: 12.5px;
}
@media (max-width: 1100px) {
  .bm-types {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}
@media (max-width: 560px) {
  .bm-types {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .bm-type {
    padding: 8px 10px;
  }
}
.idea-triage-btn .tz-n {
  margin-left: 6px;
}

/* server/static/css/30-video.css */
.mdl.vd-mdl .mdl-box {
  width: min(620px, 96vw);
}
.mdl.vd-mdl #mdlOk {
  flex: none;
  white-space: nowrap;
}
.vd-win {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vd-f {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.vd-lab {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
}
.vd-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vd-mdl .vd-row .chip {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-2);
  font: 600 12.5px var(--font);
}
.vd-mdl .vd-row .chip:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: var(--surface);
}
.vd-mdl .vd-row .chip[aria-pressed=true] {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.vd-mdl .btn-ghost {
  background: var(--surface);
  color: var(--ink-2);
  border: 1px solid var(--border);
}
.vd-mdl .btn-ghost:hover {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--muted);
}
.vd-two {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
}
.vd-two > .vd-f {
  flex: 1 1 160px;
}
.vd-mdl input[type=number] {
  min-height: 36px;
  width: 100%;
  max-width: 200px;
}
.vd-face {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.vd-face img,
.vd-noface {
  flex: none;
  width: 90px;
  height: 160px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--sunken);
  box-shadow: 0 1px 4px rgba(20, 17, 24, .18);
}
.vd-noface {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--border);
}
.vd-noface .ic {
  width: 20px;
  height: 20px;
}
.vd-facet {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.vd-facet p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
}
.vd-up {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border-radius: 10px;
  background: var(--sunken);
  border: 1px solid var(--border);
}
.vd-up[hidden],
.vd-radio[hidden],
.vd-price[hidden],
.vd-err[hidden] {
  display: none;
}
.vd-up input[type=file] {
  max-width: 100%;
  font-size: 12.5px;
}
.vd-kinds {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vd-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-2);
  cursor: pointer;
}
.vd-radio input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
}
.vd-svc {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
}
.vd-script {
  max-height: 168px;
  overflow: auto;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--sunken);
  font: 14px/1.6 var(--font-text);
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.vd-warn {
  margin-bottom: 6px;
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--serious-text);
  background: var(--serious-soft);
}
.vd-err {
  margin: 0;
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--crit-text);
  background: var(--crit-soft);
}
.vd-price {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.vd-sum {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.vd-sum b {
  font-weight: 800;
}
.vd-src {
  margin: 3px 0 6px;
  font-size: 12px;
  color: var(--ink-2);
}
.vd-price .vd-warn:last-child {
  margin-bottom: 0;
}
.vd-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vd-job {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  min-width: 0;
}
.vd-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-size: 13px;
}
.vd-head .ic {
  color: var(--muted);
}
.vd-rendering .vd-head .ic,
.vd-confirmed .vd-head .ic,
.vd-submitted .vd-head .ic {
  color: var(--ai);
}
.vd-done .vd-head .ic,
.vd-attached .vd-head .ic {
  color: var(--good);
}
.vd-failed .vd-head .ic,
.vd-moderated .vd-head .ic,
.vd-expired .vd-head .ic {
  color: var(--crit);
}
.vd-meta {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
}
.vd-bar {
  height: 6px;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--hairline);
  overflow: hidden;
}
.vd-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ai);
  transition: width .4s ease;
}
.vd-job .vd-err {
  margin-top: 8px;
}
.vd-pid {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.vd-pid b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  user-select: all;
}
.vd-video {
  display: block;
  width: 100%;
  max-width: 270px;
  aspect-ratio: 9 / 16;
  margin-top: 10px;
  border-radius: 10px;
  background: #000;
  object-fit: cover;
}
.vd-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.vd-acts .btn {
  min-height: 36px;
  text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
  .vd-bar i {
    transition: none;
  }
}
@media (max-width: 560px) {
  .vd-meta {
    margin-left: 0;
    flex-basis: 100%;
  }
  .vd-mdl input[type=number] {
    max-width: none;
  }
}

/* server/static/css/31-chats.css */
.ch {
  max-width: 980px;
}
.ch-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.ch-bar .btn {
  min-height: 38px;
}
.ch-bar .ic {
  width: 15px;
  height: 15px;
}
.ch-lab {
  display: block;
  margin: 0 0 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.ch-groups {
  margin: 0 0 16px;
}
.ch-groups ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ch-groups li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  font-size: 13.5px;
}
.ch-groups li > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}
.ch-groups li small {
  color: var(--muted);
  font-size: 12px;
}
.ch-groups li .ch-mini {
  margin-left: auto;
}
.ch .ic {
  width: 15px;
  height: 15px;
  flex: none;
}
.btn.ch-mini {
  min-height: 32px;
  padding: 5px 12px;
  border-radius: var(--r-md);
  font-size: 12.5px;
  font-weight: 600;
}
.ch-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ch-batch {
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  min-width: 0;
}
.ch-batch-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.ch-batch-h h3 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  min-width: 0;
  overflow-wrap: anywhere;
}
.ch-batch-h h3 .ic {
  color: var(--muted);
}
.ch-meta {
  margin-left: auto;
  color: var(--muted);
  font-size: 12.5px;
}
.ch-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--sunken);
  color: var(--muted);
  white-space: nowrap;
}
.ch-pill.is-good {
  background: var(--good-soft);
  color: var(--good-text);
}
.ch-pill.is-warn {
  background: var(--serious-soft);
  color: var(--serious-text);
}
.ch-pill.is-bad {
  background: var(--crit-soft);
  color: var(--crit-text);
}
.ch-pill.is-wait {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.ch-note {
  margin: 8px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.ch-items {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.ch-item {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: start;
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
}
.ch-items > .ch-item:first-child {
  border-top: 0;
}
.ch-where {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-top: 1px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.ch-item-t {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 13.5px;
  overflow-wrap: anywhere;
}
.ch-item-t b {
  font-weight: 600;
  color: var(--ink);
  white-space: pre-line;
}
.ch-item-t small {
  color: var(--muted);
  font-size: 12px;
}
.ch-item-t q {
  color: var(--ink-2);
  font-size: 12.5px;
  font-style: italic;
  quotes: "«" "»";
}
.ch-item-a {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.ch-item.is-wait .ch-where {
  color: var(--accent-ink);
}
.ch-item-t small.ch-why {
  color: var(--serious-text);
}
.ch-item-t small.ch-was {
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ch-item.is-undone .ch-item-t {
  opacity: .55;
  text-decoration: line-through;
  text-decoration-color: var(--muted);
}
.ch-mute {
  color: var(--muted);
  font-size: 12.5px;
}
.ch-det {
  margin-top: 10px;
}
.ch-det summary {
  cursor: pointer;
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 600;
  min-height: 32px;
  display: flex;
  align-items: center;
}
.ch-msgs {
  list-style: none;
  margin: 8px 0 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--sunken);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  max-height: 420px;
  overflow-y: auto;
}
.ch-msg {
  max-width: 86%;
  align-self: flex-start;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  font-size: 13.5px;
}
.ch-msg.is-team {
  align-self: flex-end;
  background: var(--accent-soft);
  border-color: transparent;
}
.ch-msg-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 0 0 2px;
  font-size: 12px;
}
.ch-msg-h time {
  color: var(--muted);
}
.ch-msg p {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
}
.ch-tag {
  font-size: 10.5px;
  font-weight: 700;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--muted);
}
.ch-tag.is-warn {
  background: var(--serious-soft);
  color: var(--serious-text);
}
.ch-empty {
  color: var(--muted);
  font-size: 13.5px;
}
.ch-start {
  padding: 16px 18px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--r-xl);
  max-width: 760px;
}
.ch-start h3 {
  margin: 0 0 8px;
  font-size: 14.5px;
}
.ch-start ol,
.ch-how {
  margin: 0;
  padding: 0 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.ch-code {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
}
.ch-code code {
  padding: 8px 12px;
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font: 600 15px/1.2 var(--font-mono);
  letter-spacing: .04em;
  user-select: all;
}
.ch-warn {
  margin: 8px 0 0;
  padding: 8px 12px;
  background: var(--serious-soft);
  color: var(--serious-text);
  border-radius: var(--r-md);
  font-size: 13px;
}
@media (max-width: 720px) {
  .ch-item {
    grid-template-columns: minmax(0, 1fr);
  }
  .ch-item-a {
    justify-content: flex-start;
  }
  .btn.ch-mini {
    min-height: 36px;
  }
  .ch-meta {
    margin-left: 0;
    flex-basis: 100%;
  }
  .ch-msg {
    max-width: 100%;
  }
}
.iw {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: var(--accent-soft);
  border-radius: var(--r-lg);
}
.iw-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.iw-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  min-height: 32px;
  border: 0;
  background: none;
  color: var(--accent-ink);
  font: 600 13.5px var(--font);
  cursor: pointer;
}
.iw-toggle .ic {
  width: 15px;
  height: 15px;
}
.iw .ch-items {
  margin-top: 6px;
}
.iw-filter {
  display: block;
  margin: 8px 0 0;
}
.iw-head b {
  font-size: 13.5px;
  color: var(--accent-ink);
}
.iw .ch-item {
  border-top-color: rgba(var(--accent-rgb), .18);
}

/* server/static/css/32-inbox.css */
.ib-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ib-turn {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.ib-turn .ast-msg {
  max-width: 88%;
  overflow-wrap: anywhere;
}
.ib-meta {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--muted);
}
.ib-from {
  display: block;
  margin: 0 0 2px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}
.ib-state {
  align-self: flex-end;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.ib-st {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--sunken);
  color: var(--muted);
  white-space: nowrap;
}
.ib-st.is-wait {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.ib-st.is-good {
  background: var(--good-soft);
  color: var(--good-text);
}
.btn.ib-mini {
  min-height: 30px;
  padding: 4px 11px;
  border-radius: var(--r-md);
  font-size: 12.5px;
  font-weight: 600;
}
.ib-refs {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ib-ref {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 4px 3px 9px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  font-size: 12.5px;
  color: var(--ink-2);
}
.ib-ref span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 5px;
}
.ib-ref.is-gone {
  opacity: .6;
  text-decoration: line-through;
}
.ib-ref .ic {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--muted);
}
.ib-empty {
  gap: 14px;
}
.ib-empty b {
  color: var(--ink);
}
.ib-empty small {
  font-size: 12px;
}
.ib-empty code {
  font-size: 11.5px;
}
.ib-asst {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ib-asst li {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 11px;
  background: var(--sunken);
  border-radius: var(--r-lg);
  font-size: 13.5px;
  overflow-wrap: anywhere;
}
.ib-asst small {
  color: var(--muted);
  font-size: 12px;
}
@media (max-width: 620px) {
  .ib-turn .ast-msg {
    max-width: 94%;
  }
  .btn.ib-mini {
    min-height: 36px;
  }
  .ast-who,
  .ast-mi {
    min-height: 36px;
  }
}

/* server/static/css/33-triage.css */
.tz-n {
  margin-left: 6px;
  padding: 0 6px;
  min-width: 18px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font: 700 10.5px/17px var(--font);
  text-align: center;
  display: inline-block;
  vertical-align: 1px;
}
.cx-tools > .work-views .chip[aria-pressed=true] .tz-n {
  background: var(--accent-ink);
}
.tz-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 14px;
}
.tz-head b {
  font-size: 15px;
  font-weight: 700;
}
.tz-aibtn {
  margin-left: auto;
}
.tz-aibtn.is-on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.tz-undo .ic,
.tz-aibtn .ic {
  width: 15px;
  height: 15px;
}
.tz-stage {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(320px, 620px) minmax(150px, 1fr);
  gap: 24px;
  align-items: stretch;
}
.tz-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  min-width: 0;
}
.tz-center {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tz-k-reels {
  --k: var(--accent);
  --k-soft: var(--accent-soft);
  --k-ink: var(--accent-ink);
}
.tz-k-carousel {
  --k: var(--c2);
  --k-soft: color-mix(in srgb, var(--c2) 12%, #fff);
  --k-ink: #0b7d70;
}
.tz-k-rework {
  --k: var(--serious);
  --k-soft: var(--serious-soft);
  --k-ink: var(--serious-text);
}
.tz-k-archive {
  --k: var(--muted);
  --k-soft: var(--sunken);
  --k-ink: var(--ink-2);
}
.tz-k-approved {
  --k: var(--good);
  --k-soft: var(--good-soft);
  --k-ink: var(--good-text);
}
.tz-bin {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-height: 122px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  transition:
    border-color .15s,
    background .15s,
    box-shadow .15s,
    transform .15s;
}
.tz-binw {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.tz-binw + .tz-binw > .tz-bin::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: -15px;
  border-top: 2px solid var(--border);
}
.tz-bin:hover {
  border-color: var(--k);
}
.tz-bin.is-near {
  border-color: color-mix(in srgb, var(--k) 55%, var(--border));
  background: color-mix(in srgb, var(--k-soft) 55%, #fff);
}
.tz-bin.is-hot {
  border-color: var(--k);
  background: var(--k-soft);
  transform: scale(1.025);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--k) 22%, transparent);
}
.tz-bh {
  display: flex;
  align-items: center;
  gap: 7px;
}
.tz-bh .ic {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--k-ink);
}
.tz-bh b {
  font-size: 13.5px;
  font-weight: 700;
}
.tz-cnt {
  margin-left: auto;
  font: 700 12.5px var(--font);
  font-style: normal;
  color: var(--k-ink);
  background: var(--k-soft);
  padding: 1px 9px;
  border-radius: var(--r-pill);
}
.tz-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  align-content: flex-start;
}
.tz-mc {
  width: 56px;
  height: 68px;
  padding: 5px;
  border-radius: var(--r-sm);
  background: var(--k-soft);
  color: var(--k-ink);
  font-size: 9.5px;
  line-height: 1.25;
  font-weight: 600;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
.tz-bk {
  position: absolute;
  right: 10px;
  bottom: 8px;
}
kbd {
  font: 600 11px var(--font);
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--sunken);
  color: var(--ink-2);
}
.tz-deck {
  position: relative;
  padding-top: 22px;
  touch-action: pan-y;
}
.tz-ghost {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
}
.tz-ghost.g1 {
  transform: translateY(-11px) scaleX(.955);
  z-index: 1;
  opacity: .9;
}
.tz-ghost.g2 {
  transform: translateY(-22px) scaleX(.91);
  z-index: 0;
  opacity: .7;
}
.tz-card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 240px;
  max-height: 460px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.tz-card.is-drag {
  cursor: grabbing;
}
.tz-card[data-hot] {
  border-color: var(--hot, var(--accent));
}
.tz-card[data-hot=reels] {
  --hot: var(--accent);
}
.tz-card[data-hot=carousel] {
  --hot: var(--c2);
}
.tz-card[data-hot=rework] {
  --hot: var(--serious);
}
.tz-card[data-hot=archive] {
  --hot: var(--muted);
}
.tz-card[data-hot=approved] {
  --hot: var(--good);
}
.tz-stamp {
  position: absolute;
  top: 14px;
  right: 16px;
  font: 800 11px var(--font);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hot, var(--accent));
  opacity: 0;
  transition: opacity .12s;
}
.tz-card[data-hot] .tz-stamp {
  opacity: 1;
}
.tz-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding-right: 110px;
}
.tz-origin {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  min-width: 0;
}
.tz-origin .ic {
  width: 13px;
  height: 13px;
  flex: none;
}
.tz-rub {
  font-size: 11.5px;
  font-weight: 700;
  padding: 1px 9px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.tz-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.01em;
}
.tz-text {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  white-space: pre-line;
}
.tz-ref {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-ink);
}
.tz-ref .ic {
  width: 13px;
  height: 13px;
}
.tz-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tz-tag {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--sunken);
  color: var(--ink-2);
}
.tz-why {
  margin: 0;
  padding: 9px 12px;
  border-radius: var(--r-md);
  background: var(--sunken);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
.tz-why b {
  display: block;
  margin-bottom: 1px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.tz-pick {
  position: absolute;
  z-index: 6;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}
.tz-pick .btn {
  flex: 1 1 140px;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
}
.tz-pick .btn[class*=tz-k-] {
  background: var(--k-soft);
  border-color: var(--k);
  color: var(--k-ink);
}
.tz-pick .btn .ic {
  width: 16px;
  height: 16px;
}
.tz-rw.btn {
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 10px;
  font-size: 12.5px;
  white-space: normal;
  text-align: center;
  color: var(--k-ink);
  border-color: color-mix(in srgb, var(--k) 45%, var(--border));
}
.tz-rw .ic {
  width: 15px;
  height: 15px;
  flex: none;
}
.tz-note {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tz-note[hidden],
.tz-ai[hidden] {
  display: none;
}
.tz-note label {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
}
.tz-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.tz-row input {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  font: 14px var(--font);
  color: var(--ink);
}
.tz-row input:focus {
  outline: none;
  border-color: var(--accent);
}
.tz-note.is-need input {
  border-color: var(--serious);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--serious) 20%, transparent);
}
.tz-note.is-need label {
  color: var(--serious-text);
}
.tz-mic {
  flex: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition:
    background .15s,
    border-color .15s,
    color .15s;
}
.tz-mic:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}
.tz-mic .ic {
  width: 18px;
  height: 18px;
}
.tz-mic.is-rec {
  background: var(--serious-soft);
  border-color: var(--serious);
  color: var(--serious-text);
  animation: tz-rec 1.1s ease-in-out infinite;
}
.tz-mic.is-busy {
  opacity: .55;
  cursor: progress;
}
@keyframes tz-rec {
  50% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--serious) 22%, transparent);
  }
}
.tz-ai {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.tz-dlg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 150px;
  overflow-y: auto;
}
.tz-ln {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
.tz-ln b {
  margin-right: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.tz-ln.me {
  color: var(--ink);
}
.tz-ln.me b {
  color: var(--accent-ink);
}
.tz-think {
  color: var(--muted);
}
.tz-send.btn {
  flex: none;
  width: 40px;
  padding: 0;
  justify-content: center;
}
.tz-send .ic {
  width: 17px;
  height: 17px;
}
.tz-keys {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: 12px;
  color: var(--muted);
}
.tz-keys kbd {
  margin-left: 6px;
}
.tz-keys kbd:first-child {
  margin-left: 0;
}
.tz-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 56px 24px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
}
.tz-done b {
  font-size: 18px;
}
.tz-done p {
  margin: 0;
  color: var(--ink-2);
}
.tz-done-act {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
#sec-scriptcheck .tz-undo {
  margin-left: auto;
}
.tz-card.sc-card {
  height: 460px;
}
.sc-ai {
  font-size: 11.5px;
  font-weight: 700;
  padding: 1px 9px;
  border-radius: var(--r-pill);
  background: var(--sunken);
  color: var(--ink-2);
}
.sc-load {
  color: var(--muted);
}
.sc-open {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  font: 600 12.5px var(--font);
  color: var(--accent-ink);
  cursor: pointer;
}
.sc-open .ic {
  width: 13px;
  height: 13px;
}
.sc-open:hover {
  text-decoration: underline;
}
@media (max-width: 900px) {
  .tz-stage {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .tz-center {
    display: contents;
  }
  .tz-deck {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 0;
  }
  .tz-note,
  .tz-ai {
    grid-column: 1 / -1;
    grid-row: 4;
  }
  .tz-side {
    display: contents;
  }
  .tz-l .tz-binw:nth-child(1) {
    grid-column: 1;
    grid-row: 2;
  }
  .tz-l .tz-binw:nth-child(2) {
    grid-column: 1;
    grid-row: 3;
  }
  .tz-r .tz-binw:nth-child(1) {
    grid-column: 2;
    grid-row: 2;
  }
  .tz-r .tz-binw:nth-child(2) {
    grid-column: 2;
    grid-row: 3;
  }
  .tz-bin {
    flex: 1;
    min-height: 0;
    padding: 10px 12px;
  }
  .tz-binw + .tz-binw > .tz-bin::before {
    display: none;
  }
  .tz-dlg {
    max-height: 120px;
  }
  .tz-mini,
  .tz-bk {
    display: none;
  }
  .tz-card {
    min-height: 200px;
    max-height: 350px;
    padding: 16px;
    gap: 10px;
  }
  .tz-card.sc-card {
    height: 350px;
  }
  .tz-title {
    font-size: 19px;
  }
  .tz-text {
    font-size: 14px;
  }
  .tz-why span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
@media (hover: none) {
  .tz-keys {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tz-bin,
  .tz-stamp,
  .tz-mic {
    transition: none;
  }
  .tz-mic.is-rec {
    animation: none;
  }
}
.cx-bhead-loose:not(:first-child) {
  margin-top: 18px;
}
.cx-q {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding: 6px 6px 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: grab;
}
.cx-q.drag {
  opacity: .5;
}
.cx-qn {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  font: 600 12.5px/1.35 var(--font);
  color: var(--ink);
  cursor: pointer;
}
.cx-qn .ic {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--accent-ink);
}
.cx-qn span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cx-qn:hover span {
  color: var(--accent-ink);
}
.cx-qgo.btn {
  flex: none;
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}
@media (max-width: 1180px) {
  .cx-q {
    margin-bottom: 0;
  }
}

/* server/static/css/17-slidetheme.css */
.st-lab {
  display: block;
  margin-bottom: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
}
.st-now {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 14px 18px;
}
.st-now b {
  font-size: 15px;
  font-weight: 750;
}
.st-when {
  margin-left: 8px;
  font-size: 12.5px;
  color: var(--muted);
}
#stLink {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 9px 12px;
  font: 13.5px var(--font);
  background: var(--surface);
  color: var(--ink);
}
#stLink:focus {
  outline: none;
  border-color: var(--accent);
}
.st-picked {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.st-picked:empty {
  display: none;
}
.st-pk {
  position: relative;
  width: 56px;
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  overflow: hidden;
  background: var(--hairline);
}
.st-pk img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#stPicked .st-x {
  position: absolute;
  top: 2px;
  right: 2px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 17, 24, .72);
  color: #fff;
  cursor: pointer;
}
#stPicked .st-x .ic {
  width: 13px;
  height: 13px;
}
.st-n {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.st-go {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.st-off {
  margin: 0;
  max-width: 60ch;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--serious-text);
}
#stWait:not(:empty) {
  margin-bottom: 14px;
}
.st-draft {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.st-hd {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
}
.st-hd h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
}
.st-sum {
  margin: -6px 0 0;
  max-width: 80ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.st-refs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.st-refs img {
  flex: none;
  width: 88px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 8px;
  background: var(--hairline);
}
.st-dna {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 18px;
}
.st-sw {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.st-sw i {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(20, 17, 24, .14);
}
.st-sw b {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}
.st-tk {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 7px 14px;
  margin: 0;
  font-size: 13px;
}
.st-tk dt {
  color: var(--muted);
  font-weight: 600;
}
.st-tk dd {
  margin: 0;
  color: var(--ink);
}
.st-draft .sp-warn {
  margin: 0;
}
.st-cmp {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.st-car {
  margin: 0 0 4px;
  font-size: 13.5px;
  font-weight: 700;
}
.st-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 6px;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
.st-strip img {
  flex: none;
  width: 200px;
  height: auto;
  border-radius: 8px;
  scroll-snap-align: start;
  box-shadow: 0 1px 4px rgba(20, 17, 24, .18);
  background: var(--hairline);
}
.st-act {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .st-dna {
    grid-template-columns: minmax(0, 1fr);
  }
  .st-strip img {
    width: 150px;
  }
  .st-act .btn {
    flex: 1 1 auto;
  }
}

/* server/static/css/18-slidebank.css */
.sb-drop {
  margin-bottom: 12px;
}
.sb-drop.busy {
  opacity: .6;
  pointer-events: none;
}
.sb-drop span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  font-size: 13px;
  color: var(--ink-2);
}
.sb-drop b {
  font-size: 14px;
}
.sb-ai {
  font-size: 12px;
  color: var(--muted);
}
#sbWait:not(:empty) {
  margin-bottom: 12px;
}
#sbWait .sp-warn {
  margin: 0;
}
#sbFilters {
  margin-bottom: 10px;
}
.sb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 12px;
}
.sb-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
  overflow: hidden;
  font: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.sb-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 10px rgba(20, 17, 24, .08);
}
.sb-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.sb-card.fresh {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.sb-ph {
  display: block;
  aspect-ratio: 4 / 5;
  background: var(--hairline);
}
.sb-ph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sb-cap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px 10px;
  font-size: 12px;
  color: var(--muted);
}
.sb-cap b {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-cap b.no {
  color: var(--muted);
  font-weight: 600;
}
.sb-note {
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sb-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
}
.sb-tags:empty {
  display: none;
}
.sb-tag {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--sunken);
  color: var(--ink-2);
}
.sb-tag.on {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.sb-empty {
  grid-column: 1 / -1;
  margin: 8px 0;
}
.sb-ed {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.sb-big {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  border-radius: 10px;
  background: var(--hairline);
}
.sb-fs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.sb-f {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sb-f[hidden] {
  display: none;
}
.sb-f select,
.sb-f input {
  width: 100%;
}
.sb-f .ps-seg {
  flex-wrap: wrap;
}
#mdl .sb-ed .chip {
  padding: 6px 13px;
  font: 600 12.5px var(--font);
  line-height: 1.2;
  background: var(--surface);
  color: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: 999px;
}
#mdl .sb-ed .chip:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}
#mdl .sb-ed .chip[aria-pressed=true] {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-color: var(--accent);
}
#mdl .sb-ed .id-lnk {
  padding: 0;
  background: transparent;
  color: var(--accent-ink);
  font-size: 12.5px;
  font-weight: 700;
}
#mdl .sb-ed .id-lnk:hover {
  text-decoration: underline;
}
.sb-add {
  align-self: flex-start;
  margin-top: -6px;
}
.sb-chk {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.sb-used {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
.sb-drop-b {
  align-self: flex-start;
}
#mdl .sb-drop-b.warn {
  color: var(--serious-text);
  border-color: currentColor;
}
@media (max-width: 720px) {
  .sb-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .sb-ed {
    grid-template-columns: minmax(0, 1fr);
  }
  .sb-big {
    max-height: 240px;
  }
}
.cta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.cta-it {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  min-width: 0;
}
.cta-th {
  position: relative;
  aspect-ratio: 9 / 16;
  max-height: 320px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--sunken);
}
.cta-th img,
.cta-th video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.cta-kind {
  position: absolute;
  left: 8px;
  top: 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  border-radius: 6px;
  padding: 2px 6px;
}
.cta-lab {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.cta-lab select,
.cta-note {
  font: 13px var(--font);
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  width: 100%;
  min-width: 0;
}
.cta-drop {
  align-self: flex-start;
  font-size: 12.5px;
}

/* server/static/css/19-credits.css */
[data-cr]::after {
  content: " · " attr(data-cr);
  font-weight: 500;
  font-size: .86em;
  opacity: .8;
  white-space: nowrap;
}

/* server/static/css/20-onescreen.css */
.rib {
  background: var(--tint);
  border: 1px solid var(--tint-line);
  border-radius: var(--r-lg, 14px);
  margin: 0 0 10px;
}
.rib-h {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 16px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.rib-lab {
  flex: none;
  width: 124px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.rib-val {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
}
.rib-val .rib-hook {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.rib-tag {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--tint-line);
  border-radius: 999px;
  padding: 2px 10px;
}
.rib-tag.on {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-ink);
}
.rib-tog {
  flex: none;
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 13px;
}
.rib-tog::after {
  content: " ▾";
}
.rib.open .rib-tog::after {
  content: " ▴";
}
.rib-b {
  border-top: 1px solid var(--tint-line);
  padding: 12px 16px 14px;
}
.rib-edit .rib-h {
  cursor: default;
  padding-top: 7px;
  padding-bottom: 7px;
}
.rib-val .rib-in {
  flex: 1 1 100%;
}
.rib-in {
  flex: 1;
  min-width: 0;
  height: 34px;
  box-sizing: border-box;
  padding: 0 10px;
  margin-left: -10px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  text-overflow: ellipsis;
}
.rib-in:hover {
  border-color: var(--tint-line);
  background: var(--surface);
}
.rib-in:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}
.rib-edit .rib-tog {
  border: 0;
  background: none;
  padding: 6px 2px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.rib-b > .tk-sectlab:first-child {
  margin-top: 0;
}
.dw-panel.dw-one #idWork {
  background: var(--tint);
  border: 1px solid var(--tint-line);
  border-radius: var(--r-lg, 14px);
  padding: 14px 16px;
  margin-top: 10px;
}
.dw-panel.dw-one #idWork > .id-sect:first-child {
  margin-top: 0;
}
.dw-panel.dw-one #idSetup > .id-setup {
  margin: 0 0 10px;
}
@container dwin (min-width: 900px) {
  .dw-panel.dw-one #idAfter > .id-sect:first-child {
    margin-top: 0;
  }
  .dw-panel.dw-one #idAfter > .id-sect:last-child {
    margin-right: 20px;
  }
}
.dw-panel.dw-caro .id-caro {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg, 14px);
}
.dw-panel.dw-caro .id-caro > #idSlides {
  min-width: 0;
  padding: 14px 16px 6px;
}
.dw-panel.dw-caro .id-side {
  min-width: 0;
  padding: 0 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dw-panel.dw-caro #idText {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dw-panel.dw-caro #idText > .id-tr {
  order: 9;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 0;
}
.dw-panel.dw-caro .slide textarea {
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.5;
}
.dw-panel.dw-caro .ps-st {
  margin: 0 0 10px;
}
.dw-panel.dw-caro .ps-ask {
  margin: 4px 0 10px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.dw-panel.dw-caro .ps-ask .ps-row {
  position: relative;
  display: block;
}
.dw-panel.dw-caro .ps-ask textarea {
  width: 100%;
  padding: 10px 46px 10px 12px;
  border-radius: 14px;
  resize: none;
  min-height: 64px;
  background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.dw-panel.dw-caro .ps-ask textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.dw-panel.dw-caro .ps-ask #psGo {
  position: absolute;
  right: 9px;
  bottom: 9px;
  width: 30px;
  height: 30px;
  min-height: 0;
  padding: 0;
  font-size: 0;
  border-radius: 50%;
  border: 0;
  box-shadow: none;
  display: grid;
  place-items: center;
  transition: background .15s, transform .1s;
}
.dw-panel.dw-caro .ps-ask #psGo::before {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dw-panel.dw-caro .ps-ask #psGo:hover:not(:disabled) {
  transform: scale(1.06);
}
.dw-panel.dw-caro .ps-ask textarea:placeholder-shown + #psGo {
  background: var(--sunken);
  color: var(--muted);
}
.dw-panel.dw-caro .id-side .id-meta {
  margin: 0;
}
@container dwin (min-width: 900px) {
  .dw-panel.dw-caro #idWork {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 26%);
  }
}
.ps-tyb {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ps-tyb .chev {
  opacity: .6;
  font-size: 10px;
}
.typop {
  position: fixed;
  z-index: 80;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(20, 22, 40, .18);
  padding: 12px;
  max-height: 70vh;
  overflow-y: auto;
}
.typop-h {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 10px;
  font-size: 12.5px;
  color: var(--muted);
}
.typop-h b {
  color: var(--ink);
  font-size: 14px;
}
.tygrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}
.tygrp {
  margin: 12px 0 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.typop-h + .tygrp {
  margin-top: 0;
}
.ty {
  border: 2px solid transparent;
  background: none;
  padding: 0;
  text-align: left;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
}
.ty .th {
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  background: #16171d;
  position: relative;
  overflow: hidden;
}
.ty .nm {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin: 5px 2px 0;
  color: var(--ink);
}
.ty.on {
  border-color: var(--accent);
}
.ty:hover .th {
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.th i {
  position: absolute;
  display: block;
  border-radius: 2px;
}
.th .ph {
  background:
    linear-gradient(
      135deg,
      #5a6170,
      #2d313a);
}
.th .t1 {
  background: #fff;
  height: 7px;
}
.th .t2 {
  background: #ff7a1a;
  height: 7px;
}
.th .ln {
  background: #8b8f9c;
  height: 3px;
}
.th .cd {
  background: #2b2d36;
  border-radius: 4px;
}
.th .cd.w {
  background: #fff;
  border: 1px solid #ddd;
}
.th .lt {
  background: #f4efe8;
}
.th .num {
  background: #ff7a1a;
  height: 16px;
  border-radius: 3px;
}
@media (max-width: 900px) {
  .rib-lab {
    width: auto;
  }
  .rib-h {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .rib-lab {
    flex: 1;
  }
  .rib-val {
    order: 3;
    flex-basis: 100%;
  }
  .dw-panel.dw-caro .id-caro > #idSlides {
    padding: 12px 12px 6px;
  }
}
.pst-fold {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 9px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.pst-fold:hover {
  border-color: #c7c8f8;
  color: var(--accent-ink);
}
.pst-fold .pst-more {
  font-weight: 500;
  color: var(--muted);
  font-size: 12px;
}
.pst-fold.in {
  width: auto;
  border: 0;
  padding: 0;
  background: none;
}
.sf-ribs {
  margin: 0 0 10px;
}
.rib .rib-b > .sf {
  padding: 0;
}
.rib-hook {
  font-weight: 600;
}
.dw-panel.dw-one .id-step {
  display: none;
}
.ty .th.shot {
  background: #fff;
}
.ty .th img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.typop.loading .th:not(.shot) {
  animation: tyWait 1.2s ease-in-out infinite;
}
@keyframes tyWait {
  50% {
    opacity: .55;
  }
}
@media (prefers-reduced-motion: reduce) {
  .typop.loading .th:not(.shot) {
    animation: none;
  }
}

/* server/static/css/21-reports.css */
.rp-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.rp-form .fb-field {
  min-width: 0;
}
.rp-form .fb-field[hidden] {
  display: none;
}
.rp-form select,
.rp-form input[type=date] {
  height: 36px;
  min-width: 170px;
  padding: 6px 10px;
}
.rp-form .seg button {
  height: 30px;
}
.rp-form #rpMake {
  height: 36px;
}
.rp-err {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--crit-text);
}
.rp-err:empty {
  display: none;
}
.rp-note {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.rp-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border);
}
.rp-row:last-child {
  border-bottom: 0;
}
.rp-main {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rp-main b {
  font-size: 14px;
  overflow-wrap: anywhere;
}
.rp-main small {
  font-size: 12px;
  color: var(--muted);
}
.rp-act {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rp-empty {
  padding: 18px 0 8px;
  color: var(--muted);
}
.rp-empty b {
  display: block;
  color: var(--ink);
  font-size: 14px;
  margin-bottom: 4px;
}
.rp-empty p {
  margin: 0;
  max-width: 60ch;
}
@media (max-width: 620px) {
  .rp-form .fb-field,
  .rp-form select,
  .rp-form input[type=date],
  .rp-form #rpMake {
    width: 100%;
    min-width: 0;
  }
  .rp-form .seg {
    display: flex;
  }
  .rp-form .seg button {
    flex: 1;
  }
}

/* server/static/css/21-usage.css */
.us-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 14px;
  margin: 4px 0 14px;
}
.us-filters .fb-field {
  min-width: 0;
}
.us-filters .fb-field[hidden] {
  display: none;
}
.us-filters select,
.us-filters input[type=date] {
  height: 36px;
  min-width: 200px;
  padding: 6px 10px;
}
.us-filters input[type=date] {
  min-width: 150px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
}
.us-filters .seg-group button {
  height: 30px;
}
.us-when {
  line-height: 36px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.us-cards {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}
.us-lead {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
}
.us-path {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-bottom: 14px;
}
.us-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.us-card > span {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.us-card b {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.us-card small {
  font-size: 12px;
  color: var(--muted);
}
.us-card.us-0 b {
  color: var(--muted);
  font-weight: 600;
}
.us-card .us-bar {
  display: block;
  height: 6px;
  margin: 4px 0 2px;
  border-radius: 3px;
  background: var(--hairline);
  overflow: hidden;
}
.us-card .us-bar > i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
}
.us-cols {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 14px;
  margin-bottom: 14px;
  align-items: start;
}
#usBox .panel {
  margin-bottom: 14px;
}
.us-cols .panel {
  margin-bottom: 0;
}
#usBox h4 {
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.us-funcs {
  list-style: none;
  margin: 0;
  padding: 0;
}
.us-funcs li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  font-size: 13px;
}
.us-funcs li + li {
  border-top: 1px solid var(--hairline);
}
.us-funcs li span:last-child {
  color: var(--ink-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.us-none {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.us-chart-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
}
.us-leg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-2);
}
.us-leg i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.us-leg i + i,
.us-leg i:not(:first-child) {
  margin-left: 8px;
}
.us-k-hub {
  background: var(--accent);
}
.us-k-out {
  background: color-mix(in srgb, var(--muted) 45%, transparent);
}
.us-chart svg {
  display: block;
  width: 100%;
  height: 120px;
  margin-top: 6px;
}
.us-chart .us-ax {
  stroke: var(--border);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.us-chart .us-hit {
  fill: transparent;
}
.us-chart .us-b-hub {
  fill: var(--accent);
}
.us-chart .us-b-out {
  fill: color-mix(in srgb, var(--muted) 45%, transparent);
}
.us-chart .us-wkb {
  opacity: .5;
}
.us-chart .us-wkb.is-in {
  opacity: 1;
}
.us-chart .us-wkb:hover .us-hit {
  fill: var(--sunken);
}
.us-ax-l {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.us-hints {
  max-width: 560px;
}
@media (max-width: 900px) {
  .us-cols {
    grid-template-columns: minmax(0, 1fr);
  }
  .us-path {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .us-filters .fb-field,
  .us-filters select,
  .us-filters input[type=date] {
    width: 100%;
    min-width: 0;
  }
  .us-filters .seg-group {
    display: flex;
    width: 100%;
  }
  .us-when {
    flex-basis: 100%;
    line-height: 1.4;
  }
  .us-filters .seg-group button {
    flex: 1;
    padding: 5px 4px;
  }
  .us-lead,
  .us-path {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .us-card.us-main {
    grid-column: 1 / -1;
  }
  .us-card b {
    font-size: 19px;
  }
  .us-hints li {
    flex-direction: column;
    gap: 0;
  }
}

/* server/static/css/21-express.css */
.ex-run {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  margin: 4px 0 16px;
}
.ex-f {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ex-f label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.ex-f input {
  width: 240px;
  max-width: 100%;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0 12px;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
}
.ex-f select {
  height: 40px;
}
.ex-f input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
#exRunBtn {
  border: none;
  background: var(--accent);
  color: #fff;
  font: 700 14px var(--font);
  border-radius: var(--r-md);
  padding: 0 18px;
  height: 40px;
  cursor: pointer;
}
#exRunBtn:hover {
  background: var(--accent-ink);
}
#exRunBtn:disabled {
  opacity: .55;
  cursor: default;
}
.ex-est {
  align-self: center;
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ex-est.over {
  color: var(--crit-text);
}
.ex-list {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.ex-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 88px 78px 150px minmax(140px, 1fr) 330px;
  gap: 10px 16px;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--hairline);
}
.ex-row:first-child {
  border-top: 0;
}
.ex-acc {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ex-acc b {
  font-size: 14.5px;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.ex-acc span {
  font-size: 12px;
  color: var(--muted);
}
.ex-c {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 13px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.ex-c label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.ex-yes {
  color: var(--good-text);
  font-weight: 600;
}
.ex-st.run {
  color: var(--accent-ink);
  font-weight: 600;
}
.ex-st.err {
  color: var(--crit-text);
}
.ex-st.old {
  color: var(--muted);
}
.ex-acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.ex-acts .btn {
  font-size: 12.5px;
  padding: 6px 10px;
  text-decoration: none;
}
.ex-acts .ex-del:hover {
  color: var(--crit-text);
  border-color: var(--crit-text);
}
.ex-empty {
  color: var(--muted);
  font-size: 13.5px;
  background: var(--sunken);
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  margin: 0;
}
@media (max-width: 900px) {
  .ex-row {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .ex-acc,
  .ex-acts {
    grid-column: 1 / -1;
  }
  .ex-acts {
    justify-content: flex-start;
  }
}
@media (max-width: 480px) {
  .ex-f,
  .ex-f input {
    width: 100%;
  }
  #exRunBtn {
    flex: 1;
  }
}
.ex-done {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.ex-done > span {
  flex: 1 1 220px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--good-text);
}
.ex-done .btn {
  font-size: 13px;
  padding: 7px 12px;
}
.ex-vbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 0;
  margin-bottom: 10px;
  background: var(--page);
}
.ex-vbar b {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.ex-vbar .btn {
  font-size: 13px;
  padding: 7px 12px;
}
#exFrame {
  display: block;
  width: 100%;
  height: 80vh;
  min-height: 480px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-1);
}
@media (max-width: 480px) {
  .ex-vbar b {
    order: -1;
    flex-basis: 100%;
  }
}

/* server/static/css/22-find.css */
.nav-find {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  min-width: 230px;
  padding: 0 8px 0 11px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--muted);
  font: 500 13px var(--font);
  cursor: pointer;
}
.nav-find:hover {
  border-color: var(--accent);
  color: var(--ink-2);
}
.nav-find .ic {
  width: 16px;
  height: 16px;
  flex: none;
}
.nav-find kbd,
.fd-top kbd {
  margin-left: auto;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--sunken);
  color: var(--ink-2);
  font: 600 11px var(--font);
}
.nav-find {
  min-width: 0;
  width: 36px;
  padding: 0;
  justify-content: center;
}
.nav-find span,
.nav-find kbd {
  display: none;
}
.fd-wrap {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 16px 16px;
  background: rgba(23, 25, 35, .3);
}
.fd-wrap[hidden] {
  display: none;
}
.fd {
  width: min(620px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
  font-family: var(--font);
}
.fd-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px 0 18px;
  border-bottom: 1px solid var(--hairline);
}
.fd-top .ic {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--muted);
}
.fd-top input,
.fd-top input:focus {
  flex: 1;
  min-width: 0;
  height: 54px;
  border: 0;
  outline: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  background: none;
  color: var(--ink);
  font: 16px var(--font);
}
.fd-res {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  max-height: 56vh;
  padding: 6px;
}
.fd-grp {
  padding: 9px 12px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.fd-it {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 7px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink);
  text-align: left;
  font: 500 13.5px var(--font);
  cursor: pointer;
}
.fd-it[aria-selected=true] {
  background: var(--sunken);
}
.fd-it .ic {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--muted);
}
.fd-it .fd-t {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fd-it small {
  flex: none;
  color: var(--muted);
  font-size: 12px;
}
.fd-wait {
  padding: 8px 12px;
  color: var(--muted);
  font-size: 12.5px;
}
@media (max-width: 560px) {
  .fd-wrap {
    padding-top: 10px;
  }
  .fd-res {
    max-height: none;
  }
  .fd-it {
    min-height: 44px;
  }
}

/* server/static/css/22-radar.css */
.rd-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 24px;
  margin: 4px 0 16px;
}
.rd-top .fb-field {
  min-width: 200px;
}
.rd-top .fb-field select {
  height: 38px;
}
.rd-count {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
}
.rd-count b {
  font-size: 15px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rd-count small {
  font-size: 12px;
  color: var(--serious-text);
}
.rd-bar {
  display: block;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--hairline);
  overflow: hidden;
}
.rd-bar > i {
  display: block;
  height: 100%;
  background: var(--good);
  border-radius: inherit;
  transition: width .2s ease-out;
}
.rd-bar.over > i {
  background: var(--serious);
}
.rd-run {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: auto;
  text-align: right;
}
.rd-run small {
  font-size: 12px;
  color: var(--muted);
}
.rd-auto {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}
.rd-auto input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  margin: 0;
}
.rd-pub {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 12px;
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.rd-pub .fb-field {
  flex: 1 1 320px;
}
.rd-pub input {
  width: 100%;
  height: 38px;
  font-size: 14px;
}
.rd-pub .btn {
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  padding: 0 14px;
}
.rd-pub .btn .ic {
  width: 15px;
  height: 15px;
}
.rd-pub small {
  flex: 1 1 100%;
  font-size: 12px;
  color: var(--muted);
}
#rdList {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rd-ev {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rd-ev.is-acc {
  border-color: color-mix(in srgb, var(--good) 45%, var(--border));
}
.rd-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.rd-score {
  flex: none;
  width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 4px;
  border-radius: var(--r-md);
  background: var(--sunken);
  color: var(--ink-2);
}
.rd-score b {
  font-size: 22px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rd-score small {
  font-size: 10.5px;
  font-weight: 650;
  text-align: center;
  line-height: 1.2;
}
.rd-score.is-imp {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.rd-score.is-game {
  background: var(--ai-soft);
  color: var(--ai);
}
.rd-tt {
  flex: 1;
  min-width: 0;
}
.rd-tt h3 {
  margin: 2px 0 6px;
  font-size: 16px;
  line-height: 1.35;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.rd-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rd-topic,
.rd-stage {
  font-size: 11.5px;
  font-weight: 650;
  border-radius: var(--r-pill);
  padding: 2px 9px;
}
.rd-topic {
  background: var(--sunken);
  color: var(--ink-2);
  border: 1px solid var(--border);
}
.rd-stage {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.rd-acc {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--good-text);
  background: var(--good-soft);
  border-radius: var(--r-pill);
  padding: 4px 10px;
}
.rd-acc .ic {
  width: 14px;
  height: 14px;
}
.rd-sig {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.rd-sig li {
  font-size: 12.5px;
  color: var(--ink-2);
}
.rd-sig li + li::before {
  content: "·";
  margin-right: 8px;
  color: var(--muted);
}
.rd-card {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
}
.rd-card dt {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.rd-card dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.rd-none,
.rd-stray {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.rd-stray {
  color: var(--serious-text);
}
.rd-src summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
  width: max-content;
}
.rd-src ul {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rd-src li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  font-size: 13px;
}
.rd-src a {
  color: var(--accent-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.rd-src a:hover {
  text-decoration: underline;
}
.rd-src small {
  font-size: 12px;
  color: var(--muted);
}
.rd-act {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rd-act .btn {
  font-size: 13px;
  padding: 7px 12px;
}
.rd-act .ic {
  width: 15px;
  height: 15px;
}
.rd-game[aria-pressed=true] {
  background: var(--ai-soft);
  color: var(--ai);
  border-color: transparent;
}
.rd-rej:hover {
  color: var(--crit-text);
  border-color: var(--crit-text);
}
.rd-merge {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}
.rd-merge .fb-field {
  flex: 1 1 260px;
}
.rd-merge .fb-field select {
  height: 36px;
}
.rd-edit {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rd-f {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rd-f > span {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.rd-f input,
.rd-f textarea {
  width: 100%;
  font-size: 14px;
}
.rd-f textarea {
  resize: vertical;
  min-height: 54px;
}
.rd-empty {
  color: var(--muted);
  font-size: 13.5px;
  background: var(--sunken);
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  margin: 0;
}
@media (max-width: 760px) {
  .rd-card {
    grid-template-columns: 1fr;
  }
  .rd-run {
    margin-left: 0;
    text-align: left;
  }
  .rd-auto {
    justify-content: flex-start;
  }
}
@media (max-width: 480px) {
  .rd-ev {
    padding: 14px;
  }
  .rd-head {
    gap: 10px;
    flex-wrap: wrap;
  }
  .rd-score {
    width: 54px;
  }
  .rd-tt {
    flex-basis: calc(100% - 64px);
  }
  .rd-top .fb-field,
  .rd-count {
    min-width: 100%;
  }
  .rd-act .btn {
    flex: 1 1 auto;
  }
}
.nav-btn .cnt.fresh {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 650;
}
.nav-btn[aria-current=true] .cnt.fresh {
  background: #fff;
}
.rw-lede {
  margin: 4px 0 18px;
  padding: 14px 18px;
  border-radius: var(--r-lg);
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 17px;
  font-weight: 650;
  line-height: 1.4;
}
.rw-lede span {
  display: block;
  margin-bottom: 4px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.rw-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 20px;
  margin-bottom: 8px;
}
.rw-filters .fb-field {
  min-width: 0;
}
.rw-filters select {
  height: 34px;
  min-width: 190px;
}
.rw-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rw-tf {
  flex: 1 1 100%;
}
.rw-count {
  margin: 6px 2px 12px;
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.rw-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.rw-card {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
.rw-card:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.rw-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.rw-card h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.rw-what,
.rw-for {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.rw-for b {
  color: var(--ink);
  font-weight: 650;
}
.rw-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.rw-imp {
  font-size: 11.5px;
  font-weight: 700;
  border-radius: var(--r-pill);
  padding: 2px 9px;
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.rw-imp.is-game {
  background: var(--ai-soft);
  color: var(--ai);
}
.rw-saved {
  margin-left: auto;
  color: var(--accent);
  display: inline-flex;
}
.rw-saved .ic {
  width: 15px;
  height: 15px;
  fill: currentColor;
}
.rw-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: auto;
}
.rw-foot small {
  font-size: 12px;
  color: var(--muted);
}
.rw-back {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 650;
  color: var(--accent-ink);
}
.rw-back:hover {
  text-decoration: underline;
}
.rw-back:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.rw-full {
  max-width: 760px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.rw-full header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rw-full h2 {
  margin: 0;
  font-size: 21px;
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.rw-dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rw-dl dt {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.rw-dl dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}
.rw-stage {
  margin: 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 14px;
  line-height: 1.45;
}
.rw-stage .ic {
  width: 17px;
  height: 17px;
  margin-top: 1px;
}
.rw-src h3 {
  margin: 0 0 8px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.rw-src ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rw-src li {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 14px;
}
.rw-src a {
  color: var(--accent-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.rw-src a .ic {
  width: 13px;
  height: 13px;
  margin-left: 5px;
  vertical-align: -1px;
}
.rw-src a:hover {
  text-decoration: underline;
}
.rw-src small {
  font-size: 12px;
  color: var(--muted);
}
.rw-act .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
}
.rw-act .btn .ic {
  width: 16px;
  height: 16px;
}
.rw-act .btn[aria-pressed=true] .ic {
  fill: currentColor;
}
@media (max-width: 900px) {
  .rw-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .rd-pub .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
  .rw-lede {
    font-size: 15.5px;
    padding: 12px 14px;
  }
  .rw-filters select {
    min-width: 100%;
  }
  .rw-filters .fb-field {
    flex: 1 1 100%;
  }
  .rw-card {
    padding: 14px;
  }
  .rw-full {
    padding: 16px;
    gap: 16px;
  }
  .rw-full h2 {
    font-size: 18.5px;
  }
  .rw-act .btn {
    width: 100%;
    justify-content: center;
  }
}

/* server/static/css/22-today.css */
.td-lede {
  margin: -4px 0 16px;
  max-width: 70ch;
  color: var(--ink-2);
  font-size: 13.5px;
}
.td-clear {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-bottom: 14px;
  padding: 12px 16px;
  background: var(--good-soft);
  border-radius: var(--r-lg);
  color: var(--good-text);
  font-size: 13.5px;
}
.td-clear .ic {
  width: 18px;
  height: 18px;
}
.td-clear span {
  color: var(--ink-2);
}
.td-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  align-items: start;
}
.td-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
}
.td-card h3 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}
.td-n {
  margin-left: auto;
  font-size: 20px;
  font-weight: 800;
  color: var(--muted);
}
.td-card.is-act .td-n {
  color: var(--ink);
}
.td-sub {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12.5px;
}
.td-rows {
  display: flex;
  flex-direction: column;
}
.td-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 9px 0;
  border: 0;
  border-top: 1px solid var(--hairline);
  background: none;
  color: var(--ink);
  text-align: left;
  font: 500 13px/1.4 var(--font);
}
.td-rows > .td-row:first-child {
  border-top: 0;
}
button.td-row {
  cursor: pointer;
}
button.td-row:hover .td-t {
  color: var(--accent-ink);
}
.td-t {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 7px;
  overflow-wrap: anywhere;
}
.td-t .ic {
  width: 15px;
  height: 15px;
  color: var(--muted);
  flex: none;
}
.td-t small {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 12px;
}
.td-m {
  flex: none;
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.td-m .ic {
  width: 14px;
  height: 14px;
}
.td-late {
  color: var(--crit-text);
}
.td-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-ink);
  white-space: nowrap;
}
.td-pill.is-good {
  background: var(--good-soft);
  color: var(--good-text);
}
.td-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
  padding: 10px 0 2px;
  color: var(--muted);
  font-size: 13px;
}
.td-empty .ic {
  width: 16px;
  height: 16px;
  color: var(--good);
}
.td-more {
  align-self: flex-start;
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: var(--r-md);
  font-size: 12.5px;
  font-weight: 600;
}
.td-week {
  margin-bottom: 14px;
}
.td-week.is-closed {
  border-color: var(--good);
}
.td-week.is-closed .td-n {
  color: var(--good-text);
}
.td-goal {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-ink);
  font: 600 12.5px var(--font);
  cursor: pointer;
}
.td-goal:hover {
  text-decoration: underline;
}
.td-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  max-width: 520px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}
.td-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--muted);
}
.td-day i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  font: 800 12.5px var(--font);
  font-style: normal;
  color: #fff;
}
.td-day i .ic {
  width: 15px;
  height: 15px;
}
.td-day.is-on i {
  background: var(--good);
  border-color: var(--good);
}
.td-day.is-today span {
  color: var(--ink);
  font-weight: 700;
}
.td-day.is-today:not(.is-on) i {
  border-color: var(--accent);
}
.td-day.is-future i {
  border-style: dashed;
}
.td-closed {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 12px 0 0;
  color: var(--good-text);
  font-size: 13px;
}
.td-closed .ic {
  width: 16px;
  height: 16px;
}
@media (max-width: 620px) {
  .td-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .td-days {
    gap: 4px;
  }
}

/* server/static/css/23-agency.css */
.cm-item.cm-ag {
  border-top: 1px solid var(--hairline);
}
.cm-ag .client-ava,
.client-switch.is-agency .client-ava {
  background: var(--ink);
  color: var(--surface);
}
.ag-note {
  margin: -4px 0 12px;
  color: var(--muted);
  font-size: 12.5px;
}
.ag-list {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.ag-row {
  display: grid;
  gap: 10px 16px;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--hairline);
}
.ag-row:first-child {
  border-top: 0;
}
.ag-cl {
  grid-template-columns: minmax(170px, 1.4fr) 96px 96px minmax(150px, 1fr) 96px 110px;
}
.has-ai .ag-cl {
  grid-template-columns: minmax(170px, 1.4fr) 96px 96px minmax(150px, 1fr) 96px 96px 190px;
}
.no-setup .ag-cl {
  grid-template-columns: minmax(170px, 1.4fr) 96px 96px minmax(150px, 1fr) 110px;
}
.has-ai.no-setup .ag-cl {
  grid-template-columns: minmax(170px, 1.4fr) 96px 96px minmax(150px, 1fr) 96px 190px;
}
.ag-c.is-hidden-own {
  opacity: .55;
}
.ag-filt {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
.ag-list.is-arch .ag-who,
.ag-list.is-arch .ag-c {
  opacity: .6;
}
.ag-ld {
  grid-template-columns: 112px minmax(140px, 1fr) minmax(120px, .8fr) minmax(110px, .8fr) 160px 290px;
}
.ag-who {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ag-who > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ag-who b {
  font-size: 14.5px;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.ag-who small {
  font-size: 12px;
  color: var(--muted);
}
.ag-c {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  font-size: 13px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.ag-c label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.ag-c.is-hot span {
  color: var(--ink);
  font-weight: 700;
}
.ag-c a {
  color: var(--accent-ink);
  text-decoration: none;
}
.ag-c a:hover {
  text-decoration: underline;
}
.ag-name b {
  color: var(--ink);
}
.ag-bar {
  display: block;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--hairline);
  overflow: hidden;
}
.ag-bar > i {
  display: block;
  height: 100%;
  background: var(--accent);
}
.ag-setup.is-open span {
  color: var(--ink);
  font-weight: 700;
}
.ag-setup:not(.is-open) .ag-bar > i {
  background: var(--good);
}
.ag-acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.ag-acts .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  padding: 6px 10px;
  text-decoration: none;
}
.ag-acts .ic {
  width: 14px;
  height: 14px;
}
.ag-demo {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px 8px;
}
.ag-demo > span {
  margin-right: 4px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.ag-demo .btn {
  font-size: 12.5px;
  padding: 6px 10px;
}
.ag-st {
  height: 32px;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 0 8px;
  color: var(--ink);
}
.ag-st.is-new {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.ag-st.is-client {
  border-color: var(--good);
  background: var(--good-soft);
  color: var(--good-text);
}
.ag-st.is-lost {
  color: var(--muted);
}
.ag-empty {
  color: var(--muted);
  font-size: 13.5px;
  background: var(--sunken);
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  margin: 0;
}
.ag-under {
  margin: 12px 0 20px;
}
.ag-under .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ag-under .ic {
  width: 15px;
  height: 15px;
}
.ag-team .pf-card {
  padding: 20px 22px;
}
.iv-new {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: flex-end;
  margin-bottom: 12px;
}
.iv-new .fb-field select,
.iv-new .fb-field input {
  height: 38px;
  box-sizing: border-box;
  padding: 0 10px;
  font: 500 13.5px var(--font);
}
.iv-note {
  flex: 1 1 260px;
  max-width: 460px;
}
.iv-new .pf-btn {
  height: 38px;
  padding-top: 0;
  padding-bottom: 0;
}
.iv-brands {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.ag-team .pf-tbl {
  margin-top: 18px;
}
.iv-row {
  background: rgba(var(--accent-rgb), .04);
}
.iv-wait {
  display: block;
  font-size: 12px;
  color: var(--muted);
}
.iv-link {
  display: block;
  max-width: 340px;
  margin-top: 4px;
  padding: 4px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.iv-acts {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.iv-acts .pf-btn {
  padding: 5px 10px;
}
@media (max-width: 760px) {
  .iv-note {
    max-width: none;
  }
  #pfTeam .pf-tbl,
  #pfTeam tbody {
    display: block;
  }
  #pfTeam thead {
    display: none;
  }
  #pfTeam tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: baseline;
    padding: 10px 8px;
    border-bottom: 1px solid var(--hairline);
  }
  #pfTeam tr:last-child {
    border-bottom: 0;
  }
  #pfTeam td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    overflow-wrap: anywhere;
  }
  #pfTeam td:nth-child(2) {
    color: var(--muted);
  }
  #pfTeam td:nth-child(n+3) {
    grid-column: 1 / -1;
  }
  #pfTeam td:nth-child(3)::before {
    content: "клиенты: ";
    color: var(--muted);
  }
  #pfTeam td:empty {
    display: none;
  }
  .iv-link {
    max-width: none;
    white-space: normal;
  }
  .iv-acts {
    justify-content: flex-start;
  }
}
.ag-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}
.ag-grid .igs-link {
  flex-direction: column;
  align-items: flex-start;
}
.ag-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 28px 0 12px;
}
.ag-brand h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.ag-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--hairline);
  font-size: 13.5px;
}
.ag-line:first-child {
  border-top: 0;
}
.ag-line > span:first-child {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--ink);
  font-weight: 600;
}
.ag-line small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}
.ag-pill {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--sunken);
  color: var(--muted);
}
.ag-pill.is-on {
  background: var(--good-soft);
  color: var(--good-text);
}
@media (max-width: 1100px) {
  .ag-ld {
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start;
  }
  .ag-ld .ag-acts {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}
@media (max-width: 900px) {
  .ag-cl,
  .has-ai .ag-cl,
  .no-setup .ag-cl,
  .has-ai.no-setup .ag-cl {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .ag-who,
  .ag-cl .ag-acts {
    grid-column: 1 / -1;
  }
  .ag-cl .ag-acts {
    justify-content: flex-start;
  }
}
@media (max-width: 620px) {
  .ag-ld {
    grid-template-columns: 1fr 1fr;
  }
}

/* server/static/css/29-lead-agent.css */
.la .la-funnel {
  margin: 4px 0 14px;
}
.la-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 14px;
}
.la-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hqx .la-chips button.chip {
  background: var(--surface);
  color: var(--ink-2);
  border: 1px solid var(--border);
  padding: 7px 14px;
}
.hqx .la-chips button.chip:hover {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.hqx .la-chips button.chip[aria-pressed=true] {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-color: transparent;
}
.hqx button.la-mode {
  margin-left: auto;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--sunken);
  color: var(--muted);
  border: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 700;
  text-align: left;
  line-height: 1.3;
}
.hqx button.la-mode:hover:not(:disabled) {
  background: var(--hairline);
  color: var(--ink);
}
.hqx.la button.la-mode:disabled {
  opacity: 1;
  cursor: default;
}
.hqx button.la-mode.is-on {
  background: var(--good-soft);
  color: var(--good-text);
  border-color: transparent;
}
.la-empty {
  color: var(--muted);
  font-size: 13.5px;
  margin: 6px 0;
}
.la .hint {
  margin: 2px 0 10px;
}
.la-f {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  margin: 0 0 10px;
}
.la-f > span {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.la-f input,
.la-f textarea,
.la-f select {
  width: 100%;
  min-height: 36px;
  box-sizing: border-box;
}
.la-f input[type=time] {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 6px 10px;
}
.la-grow {
  flex: 1 1 auto;
}
.la-chk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  font-size: 13.5px;
  color: var(--ink-2);
  cursor: pointer;
}
.la-chk input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}
.la-line {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0 0 8px;
}
.la-row-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
}
.la .chip {
  margin-left: 2px;
}
.la-lang {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
}
.la-sec-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.la-sec-h h2 small {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
  margin-left: 4px;
}
.hqx.la button .ic {
  width: 15px;
  height: 15px;
  vertical-align: -3px;
  margin-right: 4px;
}
.hqx.la button.mini .ic {
  margin-right: 0;
}
.hqx.la button:disabled {
  opacity: .45;
  cursor: default;
  box-shadow: none;
  pointer-events: none;
}
.la-ready {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13.5px;
}
.la-ready li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--ink-2);
}
.la-ready li .ic {
  margin-top: 3px;
}
.la-ready li.is-ok .ic {
  color: var(--good);
}
.la-ready li.is-no .ic {
  color: var(--serious);
}
.la-chats {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.la-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.la-filter .la-f {
  margin-bottom: 4px;
}
.la-chats.is-empty {
  grid-template-columns: minmax(0, 1fr);
}
.la-chats.is-empty .la-card {
  display: none;
}
.la-start ol {
  margin: 4px 0 0;
  padding: 0 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.la-start li span {
  margin-right: 10px;
}
#laRows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hqx button.la-row.mini {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.35;
}
.hqx button.la-row.mini:hover {
  background: var(--sunken);
}
.hqx button.la-row.mini.is-on {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.la-row-h {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 13.5px;
}
.la-row-h time {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
}
.la-row-t {
  font-size: 13px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.la-row-r {
  font-size: 12px;
  color: var(--serious-text);
}
.la-card {
  min-width: 0;
  margin: 0;
}
.la-card-h {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}
.la-card-h h2 {
  margin: 0;
  font-size: 16px;
}
.hqx button.la-back {
  display: none;
}
.la-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 14px;
  margin: 0 0 12px;
  font-size: 13.5px;
}
.la-facts dt {
  color: var(--muted);
}
.la-facts dd {
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.la-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.la-msgs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 460px;
  overflow-y: auto;
  padding: 10px;
  background: var(--sunken);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}
.la-msg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 86%;
}
.la-msg.is-agent,
.la-msg.is-human {
  align-self: flex-end;
  align-items: flex-end;
}
.la-msg.is-system,
.la-msg.is-sys {
  align-self: center;
  max-width: 100%;
}
.la-card {
  display: block;
  margin-bottom: 4px;
}
.la-card-img {
  display: block;
  width: 260px;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.la-bub {
  padding: 8px 12px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.la-msg.is-agent .la-bub {
  background: var(--accent-soft);
  border-color: transparent;
}
.la-msg.is-human .la-bub {
  background: var(--good-soft);
  border-color: transparent;
}
.la-msg.is-you .la-bub {
  background: var(--surface);
}
.la-msg.is-system .la-bub,
.la-msg.is-sys .la-bub {
  background: transparent;
  border: 0;
  padding: 2px 6px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.la-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.la-reply,
.la-sb-in {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.la-reply .la-f,
.la-sb-in .la-f {
  margin: 0;
}
.la-reply button,
.la-sb-in button {
  flex: none;
  min-height: 40px;
}
.la-fake {
  margin: 0 0 14px;
}
.la-fake h2 {
  margin: 0 0 4px;
  font-size: 15px;
}
.la-fake .la-row-btns {
  margin: 8px 0 2px;
}
.la-fake-out summary {
  display: flex;
  align-items: center;
  min-height: 36px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-ink);
}
.la-fake-out ol {
  margin: 2px 0 0;
  padding: 0 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
  font-size: 13px;
  color: var(--ink-2);
}
.la-fake-out li {
  overflow-wrap: anywhere;
}
.la-why {
  margin-top: 4px;
  font-size: 12.5px;
  max-width: 100%;
}
.la-why summary {
  cursor: pointer;
  color: var(--accent-ink);
  font-weight: 700;
  list-style: none;
}
.la-why summary::-webkit-details-marker {
  display: none;
}
.la-why summary::before {
  content: "▸ ";
}
.la-why[open] summary::before {
  content: "▾ ";
}
.la-why dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 3px 10px;
  margin: 6px 0 0;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-align: left;
}
.la-why dt {
  color: var(--muted);
}
.la-why dd {
  margin: 0;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.la-why p {
  margin: 6px 0 0;
  color: var(--ink-2);
}
.hqx button.la-lnk.mini {
  display: inline;
  min-height: 0;
  padding: 0;
  background: none;
  color: var(--accent-ink);
  font-weight: 600;
  font-size: inherit;
  line-height: inherit;
  border-radius: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hqx button.la-lnk.mini:hover {
  background: none;
  color: var(--accent);
}
.la-sb {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.la-sb .card {
  margin: 0;
}
.la-sb-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 8px;
}
.la-sb-h h2 {
  margin: 0 auto 0 0;
}
.la-sb .la-msgs {
  min-height: 260px;
}
.la-cases-sum {
  margin: 0 0 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--serious-text);
}
.la-cases-sum.is-ok {
  color: var(--good-text);
}
.la-cases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.la-case {
  display: flex;
  align-items: flex-start;
  gap: 6px 12px;
  padding: 7px 0;
  border-top: 1px solid var(--hairline);
}
.la-case.is-off .la-case-main {
  opacity: .6;
}
.la-case-main {
  flex: 1;
  min-width: 0;
}
.la-case-q {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-height: 30px;
  font-size: 13.5px;
}
.la-case-q b {
  overflow-wrap: anywhere;
}
.la-case-exp {
  font-size: 12.5px;
  color: var(--muted);
}
.la-case-why {
  font-size: 12.5px;
  color: var(--crit-text);
  margin-top: 2px;
}
.la-case-acts {
  flex: none;
  display: flex;
  gap: 6px;
}
@media (max-width: 620px) {
  .la-case {
    flex-wrap: wrap;
  }
  .la-case-main {
    flex-basis: 100%;
  }
  .la-case-acts .mini {
    min-height: 36px;
  }
}
.la-kb .card {
  margin-bottom: 14px;
}
.la-dos {
  display: grid;
  grid-template-columns: minmax(150px, 240px) minmax(0, 1fr);
  gap: 6px 16px;
  margin: 0;
  font-size: 13px;
}
.la-dos dt {
  color: var(--ink-2);
  font-weight: 600;
}
.la-dos dd {
  margin: 0;
  color: var(--ink-2);
  max-height: 4.4em;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.la-dos dd.is-empty {
  color: var(--muted);
}
.la-kb-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.la-kb-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
}
.la-kb-row:first-child {
  border-top: 0;
}
.la-kb-row.is-off {
  opacity: .6;
}
.la-kb-row.is-hit {
  background: var(--accent-soft);
  border-radius: var(--r-md);
  padding: 10px;
}
.la-kb-t {
  min-width: 0;
  font-size: 13.5px;
}
.la-kb-t p {
  margin: 2px 0 0;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.la-kb-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: none;
}
.la-set .card {
  margin-bottom: 14px;
}
.la-botline {
  font-weight: 700;
  color: var(--muted);
  margin: 4px 0 8px;
}
.la-botline.is-ok {
  color: var(--good-text);
}
.la-warn {
  margin: 0 0 8px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  background: var(--serious-soft);
  color: var(--serious-text);
  font-size: 13px;
}
.la-live {
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.la-fld {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px 10px;
  padding: 6px 0;
  border-top: 1px solid var(--hairline);
}
.la-fld:first-child {
  border-top: 0;
}
.la-fld .la-f {
  margin: 0;
}
.la-fld .la-chk {
  flex: none;
}
.la-phone {
  font-size: 13.5px;
  color: var(--ink-2);
  align-items: center;
  margin-bottom: 8px;
}
.la-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0 14px;
  align-items: end;
}
.la-days {
  margin: 0 0 6px;
}
.la-save {
  display: flex;
  justify-content: flex-end;
}
.la-form .la-f {
  margin-bottom: 12px;
}
@media (max-width: 1100px) {
  .la-sb {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .hqx .stats.la-funnel {
    gap: 8px;
  }
  .hqx .la-funnel .stat {
    flex: 1 1 calc(33.3% - 8px);
    min-width: 0;
    padding: 10px 8px;
    border-radius: 12px;
  }
  .hqx .la-funnel .stat b {
    font-size: 18px;
  }
  .hqx .la-funnel .stat span {
    font-size: 11px;
    line-height: 1.3;
    display: block;
  }
  .la-chats {
    grid-template-columns: minmax(0, 1fr);
  }
  .la-chats.has-card .la-list {
    display: none;
  }
  .la-chats:not(.has-card) .la-card {
    display: none;
  }
  .hqx button.la-back {
    display: inline-flex;
  }
  .hqx button.la-mode {
    margin-left: 0;
  }
  .la-msg {
    max-width: 94%;
  }
  .la-dos {
    grid-template-columns: minmax(0, 1fr);
  }
  .la-kb-row {
    flex-direction: column;
  }
  .la-kb-acts {
    justify-content: flex-start;
  }
  .la-why summary {
    display: flex;
    align-items: center;
    min-height: 36px;
  }
  .la-reply,
  .la-sb-in {
    flex-direction: column;
    align-items: stretch;
  }
  .la-save button {
    width: 100%;
  }
  .la-f input[type=time],
  .la-f input[type=number] {
    font-size: 16px;
  }
}

/* server/static/css/27-kp.css */
.kp-views {
  display: flex;
  gap: 6px;
  margin: 2px 0 14px;
}
.kp-under {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
}
.kp-under .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.kp-under .ic {
  width: 15px;
  height: 15px;
}
.kp-hint {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0;
}
.kp-new {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 16px;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 920px;
}
.kp-frow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: flex-end;
}
.kp-f {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.kp-f[hidden] {
  display: none;
}
.kp-f > label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.kp-f input,
.kp-f select,
.kp-f textarea {
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px 12px;
  max-width: 100%;
}
.kp-f input,
.kp-f select {
  height: 40px;
  padding-top: 0;
  padding-bottom: 0;
}
.kp-frow .kp-f input,
.kp-frow .kp-f select {
  width: 220px;
}
.kp-f textarea {
  width: 100%;
  resize: vertical;
  line-height: 1.5;
}
.kp-f input:focus,
.kp-f select:focus,
.kp-f textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.kp-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.kp-file .btn {
  cursor: pointer;
}
.kp-list {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.kp-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) minmax(190px, 1.3fr) 110px 90px 140px auto;
  gap: 10px 16px;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--hairline);
}
.kp-row:first-child {
  border-top: 0;
}
.kp-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.kp-who b {
  font-size: 14.5px;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.kp-who span {
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.kp-c {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  font-size: 13px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.kp-c label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.kp-c i {
  font-style: normal;
  color: var(--ink);
  font-weight: 600;
}
.kp-yes {
  color: var(--good-text);
  font-weight: 600;
}
.kp-acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: 360px;
}
.kp-acts .btn {
  font-size: 12.5px;
  padding: 6px 10px;
  text-decoration: none;
}
.kp-del:hover {
  color: var(--crit-text);
  border-color: var(--crit-text);
}
.kp-st {
  height: 32px;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 0 8px;
  color: var(--ink);
}
.kp-st.is-draft {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.kp-st.is-accepted {
  border-color: var(--good);
  background: var(--good-soft);
  color: var(--good-text);
}
.kp-st.is-declined {
  color: var(--muted);
}
.kp-empty {
  color: var(--muted);
  font-size: 13.5px;
  background: var(--sunken);
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  margin: 0;
}
#kpEdit {
  max-width: 920px;
}
.kp-edbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 12px;
}
.kp-edbar > b {
  font-size: 16px;
  margin-right: auto;
  overflow-wrap: anywhere;
}
.kp-edbar .btn {
  font-size: 13px;
  text-decoration: none;
}
.kp-lock,
.kp-basis {
  font-size: 13px;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: var(--r-md);
}
.kp-lock {
  background: var(--sunken);
  color: var(--ink-2);
}
.kp-basis {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.kp-form {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.kp-pk {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  margin: 0 0 12px;
}
.kp-pk legend {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 6px;
}
.kp-pk > .btn,
.kp-form > .btn {
  align-self: flex-start;
  font-size: 12.5px;
}
.kp-short input {
  width: 220px;
}
.kp-svcs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 6px;
}
.kp-svc {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: 13px;
}
.kp-svc:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.kp-svc input {
  margin-top: 3px;
}
.kp-svc span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.kp-svc b {
  color: var(--ink);
  font-weight: 600;
}
.kp-svc small {
  color: var(--muted);
  font-size: 12px;
}
.kp-pr {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-2);
}
.kp-pr b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.kp-cat {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.kp-svr {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(130px, 1fr) minmax(140px, 1fr) 190px;
  gap: 8px 14px;
  align-items: center;
  padding: 8px 14px;
}
.kp-svr.no-acts {
  grid-template-columns: minmax(220px, 2fr) minmax(130px, 1fr) minmax(140px, 1fr);
}
.kp-svh {
  padding-top: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.kp-sv {
  border-top: 1px solid var(--hairline);
  font-size: 13.5px;
  color: var(--ink-2);
  cursor: pointer;
}
.kp-svh + .kp-sv {
  border-top: 0;
}
.kp-sv:hover {
  background: rgba(20, 25, 45, .025);
}
.kp-sv.is-open {
  background: var(--sunken);
}
.kp-svn {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.kp-svn b {
  font-size: 14px;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.kp-svn .ic {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--muted);
  transition: transform .15s;
}
.kp-sv.is-open .kp-svn .ic {
  transform: rotate(90deg);
}
.kp-svn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
.kp-svm {
  font-size: 12.5px;
  color: var(--muted);
}
.kp-scp {
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.kp-scp.is-ask {
  color: var(--serious-text);
}
.kp-sv .kp-acts {
  justify-content: flex-end;
  flex-wrap: nowrap;
}
.kp-sv .kp-acts .btn {
  padding: 5px 10px;
  font-size: 12.5px;
}
.kp-svd {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px 20px;
  padding: 4px 14px 14px 34px;
  cursor: default;
}
.kp-svd ul {
  margin: 2px 0 0;
  padding-left: 18px;
}
.kp-svd p {
  margin: 0;
}
.kp-k {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.kp-note {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 6px 10px;
}
.kp-src {
  font-size: 12px;
  color: var(--muted);
}
.kp-hidbtn {
  margin-left: auto;
}
.kp-hid {
  margin: 0 0 14px;
}
.kp-hid > .kp-k {
  margin: 0 0 6px;
}
.kp-hid .kp-cat {
  background: var(--sunken);
  box-shadow: none;
}
.ofc.kp-pan {
  width: min(460px, 100vw);
}
.kp-sform {
  font-size: 13.5px;
  color: var(--ink-2);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.kp-sform .kp-frow .kp-f {
  flex: 1 1 140px;
}
.kp-sform .kp-frow .kp-f input,
.kp-sform .kp-frow .kp-f select {
  width: 100%;
}
.kp-sform > .kp-acts {
  justify-content: flex-start;
}
@media (max-width: 1200px) {
  .kp-row {
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start;
  }
  .kp-who {
    grid-column: 1 / -1;
  }
  .kp-row .kp-acts {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}
@media (max-width: 620px) {
  .kp-row {
    grid-template-columns: 1fr 1fr;
  }
  .kp-frow .kp-f,
  .kp-frow .kp-f input,
  .kp-frow .kp-f select,
  .kp-short input {
    width: 100%;
  }
  .kp-frow .kp-f {
    flex: 1 1 100%;
  }
  .kp-svr,
  .kp-svr.no-acts {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
  }
  .kp-svh {
    display: none;
  }
  .kp-svr .kp-svm {
    grid-column: 1;
    grid-row: 2;
  }
  .kp-svr .kp-scp {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
  }
  .kp-sv .kp-acts {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  .kp-sv .kp-acts .btn {
    min-height: 36px;
  }
  .kp-svd {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 14px;
  }
  .kp-svcs {
    grid-template-columns: minmax(0, 1fr);
  }
}
#kpCat > .kp-hint {
  margin: 0 0 10px;
}

/* server/static/css/23-hints.css */
.ai-sugg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1.5px solid transparent;
  border-radius: var(--r-lg);
  font-size: 13.5px;
  line-height: 1.5;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(
      120deg,
      #a99bff,
      #f2a3dc,
      #9fd9f3) border-box;
}
.ai-sugg .ai-orb {
  align-self: flex-start;
  margin-top: 2px;
}
.ai-sugg-t {
  flex: 1 1 280px;
  min-width: 0;
  margin: 0;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.ai-sugg-t b {
  color: var(--ink);
}
.ai-sugg-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ai-sugg-acts .btn {
  padding: 7px 14px;
  font-size: 13px;
}
.ai-sugg-acts .btn.btn-ghost {
  background: var(--surface);
  color: var(--ink-2);
  border: 1px solid var(--border);
}
.ai-sugg-acts .btn.btn-ghost:hover {
  background: var(--sunken);
}
.ai-sugg.is-done {
  opacity: .65;
}
.ai-digest ul {
  margin: 6px 0 0;
  padding-left: 18px;
}
.ai-digest li {
  margin: 3px 0;
}
@media (max-width: 620px) {
  .ai-sugg {
    padding: 12px 14px;
  }
  .ai-sugg-acts {
    width: 100%;
    padding-left: 32px;
  }
}

/* server/static/css/24-drop.css */
.dz {
  margin: 0 0 16px;
}
.dz-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1.5px dashed var(--border);
  border-radius: var(--r-lg);
  transition: border-color .12s, background .12s;
}
.dz.over .dz-box,
.dz-box:focus-within {
  border-color: var(--accent);
}
.dz.over .dz-box {
  background: var(--accent-soft);
}
.dz-in,
.dz-in:focus {
  width: 100%;
  resize: vertical;
  min-height: 44px;
  border: 0;
  outline: 0;
  box-shadow: none;
  padding: 2px 0;
  background: none;
  color: var(--ink);
  font: 14px/1.5 var(--font);
}
.dz-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dz-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 4px 3px 9px;
  border-radius: var(--r-pill);
  background: var(--sunken);
  font-size: 12.5px;
}
.dz-file > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dz-file .ic {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--muted);
}
.dz-file button {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.dz-file button:hover {
  background: var(--border);
  color: var(--ink);
}
.dz-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dz-pick {
  cursor: pointer;
}
.dz-hint {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
}
.dz-bar .btn-primary {
  margin-left: auto;
}
.dz-whatbtn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--accent-ink);
  font: 600 12.5px var(--font);
  cursor: pointer;
  white-space: nowrap;
}
.dz-whatbtn:hover {
  text-decoration: underline;
}
.dz-whatbtn .ic {
  width: 14px;
  height: 14px;
  transform: rotate(90deg);
  transition: transform .15s;
}
.dz-whatbtn[aria-expanded=true] .ic {
  transform: rotate(-90deg);
}
.dz-out:empty {
  display: none;
}
.dz-out {
  margin-top: 10px;
}
.dz-res {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dz-lab {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
}
.dz-what {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.dz-what .ai-orb {
  flex: none;
  margin-top: 4px;
}
.dz-what p,
.dz-q p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
}
.dz-q {
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
}
.dz-qrow {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.dz-ans {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px 11px;
  font: 13.5px var(--font);
  background: var(--surface);
}
.dz-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dz-chip {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font: 600 12.5px var(--font);
  cursor: pointer;
}
.dz-chip.is-other {
  border-style: dashed;
}
.dz-chip[aria-pressed=true] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.dz-chip:disabled {
  cursor: default;
  opacity: .6;
}
.dz-prev {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
}
.dz-prev ul {
  margin: 0;
  padding-left: 18px;
  color: var(--ink-2);
  font-size: 12.5px;
}
.dz-prev li + li {
  margin-top: 3px;
}
.dz-why {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}
.dz-why .ic {
  width: 14px;
  height: 14px;
  flex: none;
}
.dz-note {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
}
.nav-drop {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
}
.nav-drop:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}
.nav-drop .ic {
  width: 18px;
  height: 18px;
}
.dz-wrap {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 10vh 16px 16px;
  background: rgba(23, 25, 35, .3);
  overflow-y: auto;
}
.dz-wrap[hidden] {
  display: none;
}
.dz-dlg {
  width: min(680px, 100%);
  padding: 16px 18px 6px;
  background: var(--surface);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
  font-family: var(--font);
}
.dz-dlghead {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.dz-dlghead b {
  font-size: 16px;
  font-weight: 750;
}
.dz-dlghead span {
  flex: 1;
  min-width: 0;
  color: var(--muted);
  font-size: 12.5px;
}
.dz-dlghead .ast-x {
  align-self: center;
}
@media (max-width: 560px) {
  .dz-wrap {
    padding: 10px;
  }
  .dz-dlg {
    padding: 14px 14px 4px;
  }
  .dz-dlghead {
    flex-wrap: wrap;
  }
  .dz-dlghead span {
    order: 3;
    flex-basis: 100%;
  }
  .dz-hint {
    display: none;
  }
}
#csBox {
  margin-top: 14px;
}
.cs-sub {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12.5px;
}
.cs-tbl tr.cs-aside td {
  color: var(--muted);
}
.cs-warn {
  margin: 0 0 8px;
  padding: 8px 11px;
  border-radius: var(--r-md);
  background: var(--crit-soft);
  color: var(--crit-text);
  font-size: 12.5px;
}
.cs-tbl td:first-child,
.cs-tbl th:first-child {
  text-align: left;
}

/* server/static/css/25-market.css */
.hqx .mk-plate {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-1);
  padding: 12px 16px;
  margin: 0 0 14px;
}
.hqx .mk-plate.done {
  border-color: var(--good);
}
.hqx .mk-plate.done .mk-sat b {
  color: var(--good-text);
}
.hqx .mk-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}
.hqx .mk-sat {
  flex: 1 1 260px;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  color: var(--ink-2);
}
.hqx .mk-off {
  color: var(--muted);
}
.hqx .mk-circles {
  margin-top: 8px;
  font-size: 13.5px;
  gap: 4px 8px;
}
.hqx .mk-c {
  white-space: nowrap;
  color: var(--ink-2);
}
.hqx .mk-c.thin,
.hqx .mk-c.empty {
  background: var(--serious-soft);
  color: var(--serious-text);
  border-radius: 8px;
  padding: 1px 7px;
}
.hqx .mk-c.ok b {
  color: var(--good-text);
}
.hqx .mk-dot {
  color: var(--muted);
}
.hqx .mk-count {
  margin: 6px 0 0;
}
.hqx .mk-curve-w {
  margin-top: 10px;
}
.hqx .mk-curve {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 44px;
  padding-bottom: 1px;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.hqx .mk-curve i {
  flex: 1 1 0;
  min-width: 1px;
  max-width: 14px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
}
.hqx .mk-curve i.z {
  height: 2px;
  background: var(--hairline);
}
.hqx .mk-curve-w .hint {
  margin-top: 4px;
  font-size: 12px;
}
.hqx button.chip.mk-circ {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid transparent;
}
.hqx button.chip.mk-circ.mk-direct {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.hqx button.chip.mk-circ.mk-adjacent {
  background: rgba(18, 165, 148, .12);
  color: #0c7468;
}
.hqx button.chip.mk-circ.mk-form {
  background: var(--sunken);
  color: var(--ink-2);
  border-color: var(--border);
}
.hqx button.chip.mk-circ:hover {
  border-color: currentColor;
}
.hqx #mkList .trick-head .sp {
  flex: 1;
}
.hqx #mkList .trick-ex,
.hqx #mkList .why {
  overflow-wrap: anywhere;
}
.hqx button.mk-fresh {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 6px;
  padding: 2px 4px;
  margin: 0 -4px;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  min-height: 0;
  height: auto;
  box-shadow: none;
}
.hqx button.mk-fresh:hover {
  background: var(--sunken);
}
.hqx .mk-fresh i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}
.hqx .mk-fresh.ok i {
  background: var(--good);
}
.hqx .mk-fresh.warn i {
  background: var(--warn);
}
.hqx .mk-fresh.bad i {
  background: var(--crit);
}
.hqx .mk-fresh.bad span {
  color: var(--crit-text);
}
.hqx .mk-fresh.none span {
  color: var(--muted);
  font-weight: 500;
}
.hqx .mk-fresh small {
  grid-column: 2;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.hqx .mk-ref {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}
.hqx .cd {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px 10px;
  margin: 10px 0 12px;
  background: var(--surface);
}
.hqx .cd[hidden] {
  display: none;
}
.hqx .cd-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.hqx .cd-lbl {
  font-size: 11px;
  color: var(--muted);
}
.hqx .cd-plot {
  position: relative;
  padding-bottom: 6px;
}
.hqx .cd-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 120px;
  border-bottom: 1px solid var(--border);
}
.hqx .cd-bars > i {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
  cursor: default;
}
.hqx .cd-bars > i > b {
  display: block;
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: var(--border);
  transition: height .15s ease, background .15s ease;
}
.hqx .cd-bars > i.on > b {
  background: var(--accent);
}
.hqx .cd-bars > i:hover > b {
  filter: brightness(.92);
}
.hqx .cd-rng {
  position: relative;
  height: 22px;
  margin: 0 calc(50% / var(--cd-n));
}
.hqx .cd-rng input[type=range] {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.hqx .cd-rng input[type=range]::-webkit-slider-runnable-track {
  height: 22px;
  background: none;
}
.hqx .cd-rng input[type=range]::-moz-range-track {
  background: none;
}
.hqx .cd-rng input[type=range]::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
  cursor: ew-resize;
  box-shadow: var(--shadow-1);
}
.hqx .cd-rng input[type=range]::-moz-range-thumb {
  pointer-events: auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
  cursor: ew-resize;
}
.hqx .cd-axis {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.hqx .cd-axis b {
  color: var(--ink-2);
  font-weight: 600;
}
.hqx .cd-chips {
  display: contents;
}
.hqx .cd-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font: 600 12.5px var(--font);
  overflow: hidden;
}
.hqx .cd-chip button {
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  padding: 6px 4px 6px 12px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.hqx .cd-chip button.x {
  padding: 6px 10px 6px 4px;
  font-size: 14px;
  line-height: 1;
}
.hqx .cd-chip button:hover {
  color: var(--ink);
}
.hqx #compTable {
  overflow-x: auto;
}
.hqx .cd-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 18px;
  align-items: start;
}
.hqx .cd-side {
  border-left: 1px solid var(--border);
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.hqx .cd-sh {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 4px;
}
.hqx .cd-sel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.hqx .cd-sel b {
  font-weight: 700;
}
.hqx .cd-applied {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.hqx .cd-chip.cur {
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.hqx .cd-clear {
  margin-top: 2px;
}
@media (max-width: 900px) {
  .hqx .cd-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .hqx .cd-side {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--border);
    padding-top: 10px;
  }
}
.hqx td.act .mini.ic-btn {
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--muted-2);
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
}
.hqx td.act .mini.ic-btn .ic {
  width: 17px;
  height: 17px;
}
.hqx td.act .mini.ic-btn:hover {
  background: var(--sunken);
  color: var(--ink);
}
.hqx td.act .mini.ic-btn.star.on {
  color: #e8a72b;
}
.hqx td.act .mini.ic-btn.star.on .ic {
  fill: currentColor;
}
.hqx td.act .mini.ic-btn.hide.on {
  color: var(--crit-text);
}
.hqx td.act .mini.ic-btn.seen.on {
  color: var(--good-text);
}
.hqx td.act .mini.ic-btn.del:hover {
  background: var(--crit-soft);
  color: var(--crit-text);
}
.hqx th.act-pin,
.hqx td.act-pin {
  position: sticky;
  right: 0;
  z-index: 1;
  white-space: nowrap;
  text-align: right;
  padding-left: 8px;
  padding-right: 8px;
  background: var(--surface);
  box-shadow: -10px 0 10px -10px rgba(23, 25, 35, .18);
}
.hqx th.act-pin {
  z-index: 2;
  background: var(--sunken);
}
.hqx tr:hover td.act-pin {
  background: var(--sunken);
}
.hqx td.act-pin .mini.ic-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted-2);
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  vertical-align: middle;
}
.hqx td.act-pin .mini.ic-btn .ic {
  width: 17px;
  height: 17px;
}
.hqx td.act-pin .mini.ic-btn:hover {
  background: var(--hairline);
  color: var(--ink);
}
.hqx td.act-pin .mini.ic-btn.star.on {
  color: #e8a72b;
}
.hqx td.act-pin .mini.ic-btn.star.on .ic {
  fill: currentColor;
}
.hqx td.act-pin .mini.ic-btn.hide.on {
  color: var(--crit-text);
}
.hqx td.act-pin .mini.ic-btn.seen.on {
  color: var(--good-text);
}
.hqx td.act-pin .mini.ic-btn.del:hover {
  background: var(--crit-soft);
  color: var(--crit-text);
}
.hqx td.act-pin .act-gap {
  display: inline-block;
  width: 28px;
}
.hqx #refsTable {
  overflow-x: auto;
}
.rf-embed {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  max-height: 72vh;
  border-radius: 12px;
  overflow: hidden;
  background: var(--sunken);
}
.rf-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.cm-alerts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 14px;
}
.cm-alerts[hidden] {
  display: none;
}
.cm-alerts > :empty,
.cm-alerts > [hidden] {
  display: none;
}
.cm-alerts .mk-plate {
  margin: 0;
}
.hqx button.ct-colsbtn {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-2);
  font: 500 13px var(--font);
  box-shadow: none;
}
.hqx button.ct-colsbtn:hover,
.hqx button.ct-colsbtn[aria-expanded=true] {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.hqx button.cd-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-2);
  box-shadow: none;
}
.hqx button.cd-btn .ic {
  width: 17px;
  height: 17px;
  display: block;
}
.hqx button.cd-btn:hover,
.hqx button.cd-btn[aria-pressed=true] {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.hqx button.cd-btn.on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.hqx .frow > #compCount {
  align-self: center;
  margin: 0;
  line-height: 36px;
}

/* server/static/css/26-daily.css */
.anx .dy-cols {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 120px;
  margin-top: 12px;
  border-bottom: 1px solid var(--border);
}
.anx .dy-c {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  border-radius: 3px 3px 0 0;
}
.anx .dy-c:hover {
  background: var(--sunken);
}
.anx .dy-c.none,
.anx .dy-c.none:hover {
  cursor: default;
  background: transparent;
}
.anx .dy-soon {
  margin: 12px 0 0;
}
.anx .dy-c.gap {
  cursor: default;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 3px,
      var(--hairline) 3px 4px);
}
.anx .dy-c i {
  display: block;
  width: 100%;
  background: var(--accent);
  opacity: .55;
  border-radius: 3px 3px 0 0;
}
.anx .dy-c.on i {
  opacity: 1;
}
.anx .dy-c.on {
  box-shadow: inset 0 -2px 0 var(--ink);
}
.anx .dy-dot {
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--ink);
}
.anx .dy-ax {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--muted);
}
.anx .dy-day {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
}
.anx .sl-tbl {
  width: 100%;
  border-collapse: collapse;
}
.anx .sl-tbl th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 12px 8px 0;
  border-bottom: 1px solid var(--border);
}
.anx .sl-tbl td {
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 13.5px;
}
.anx .sl-tbl .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.anx .sl-tbl td.num:not(.sl-d) {
  white-space: nowrap;
}
@media (max-width: 600px) {
  .anx .sl-tbl td,
  .anx .sl-tbl th {
    padding-right: 8px;
  }
  .anx .sl-tbl td {
    font-size: 12.5px;
  }
}
.anx .sl-d.up {
  color: var(--good-text);
}
.anx .sl-d.down {
  color: var(--serious-text);
}
.anx .sl-d.flat {
  color: var(--muted);
}
.anx .sl-h {
  margin: 18px 0 8px;
  font-size: 13.5px;
  font-weight: 700;
}
.anx .sl-goals {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px 22px;
}
.anx .sl-gt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13.5px;
}
.anx .sl-gt span,
.anx .sl-gn {
  font-size: 12.5px;
  color: var(--muted);
}
.anx .sl-gb {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--sunken);
  margin: 7px 0 5px;
  overflow: hidden;
}
.anx .sl-gb i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: var(--r-pill);
}
.anx .sl-gn b {
  color: var(--ink);
}

/* server/static/css/27-setup.css */
.setup-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font: 600 12.5px var(--font);
  cursor: pointer;
  white-space: nowrap;
}
.setup-btn[hidden] {
  display: none;
}
.setup-btn b {
  font-weight: 800;
  color: var(--ink);
}
.setup-btn:hover,
.setup-btn[aria-expanded=true] {
  border-color: var(--accent);
  color: var(--accent-ink);
}
.setup-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.stp {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 88;
  width: min(400px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -14px 0 34px rgba(20, 25, 45, .12);
  font-family: var(--font);
  animation: stp-in .2s cubic-bezier(.2, .8, .2, 1);
}
.stp[hidden] {
  display: none;
}
@keyframes stp-in {
  from {
    transform: translateX(24px);
    opacity: 0;
  }
}
.stp-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--hairline);
}
.stp-head b {
  display: block;
  font-size: 15px;
  font-weight: 800;
}
.stp-sub {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
}
.stp-x {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--muted);
  padding: 4px;
}
.stp-x .ic {
  width: 18px;
  height: 18px;
}
.stp-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.stp-cur {
  padding: 18px;
  border-radius: var(--r-xl);
  background: var(--accent-soft);
}
.stp-step {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent-ink);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.stp-cur h3 {
  margin: 6px 0 10px;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 800;
}
.stp-gives {
  margin: 0 0 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.stp-gives b {
  color: var(--ink);
}
.stp-detail {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--muted);
}
.stp-go {
  margin-top: 4px;
}
.stp-h {
  margin: 22px 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.stp-done {
  margin: 0;
  padding: 0;
  list-style: none;
}
.stp-done li {
  display: flex;
  gap: 9px;
  padding: 9px 0;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
}
.stp-done li:first-child {
  border-top: 0;
}
.stp-done .ic {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
  color: var(--good);
}
.stp-done small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
@media (max-width: 520px) {
  .setup-btn {
    padding: 0 10px;
  }
  .setup-btn span {
    font-size: 0;
  }
  .setup-btn b {
    font-size: 12.5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .stp {
    animation: none;
  }
}

/* server/static/css/28-office.css */
.of {
  font-family: var(--font);
}
.of-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
  padding: 12px 16px;
  margin-bottom: 16px;
}
.of-bar-t {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
  min-width: 0;
  overflow-wrap: anywhere;
}
.of-bar-t b {
  color: var(--ink);
  font-weight: 750;
}
.of-bar-b {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.of-bar-b .btn {
  height: 36px;
  padding: 0 14px;
  font-size: 13.5px;
}
.of-run {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.of-price {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.of-why {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--muted);
}
.of-stale {
  margin: -6px 0 12px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--serious-soft);
  color: var(--serious-text);
  font-size: 13px;
}
.of.is-stale .of-pulse {
  display: none;
}
.of-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: stretch;
}
.of-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: 12px;
  align-items: stretch;
}
.of-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px 14px;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
  transition: border-color .15s;
}
.of-card:hover {
  border-color: rgba(var(--accent-rgb), .4);
}
.of-card.st-working {
  border-color: rgba(109, 63, 240, .35);
}
.of-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.of-head:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.of-who {
  display: flex;
  flex-direction: column;
  flex: 1 1 110px;
  min-width: 0;
}
.of-who b {
  font-size: 15px;
  font-weight: 750;
  line-height: 1.25;
}
.of-who small {
  font-size: 12.5px;
  color: var(--muted);
}
.of-ava {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ag, var(--muted));
  color: #fff;
  font-size: 16px;
  font-weight: 800;
}
.of-ava.is-off {
  background: var(--sunken);
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--border);
}
.of-ava.lg {
  width: 48px;
  height: 48px;
  font-size: 19px;
}
.of-now {
  flex: 1 0 auto;
  margin: 0;
  min-height: 2.9em;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.of-foot {
  margin-top: auto;
  padding-top: 2px;
  display: flex;
}
.of-card.st-idle .of-now,
.of-card.st-off .of-now {
  color: var(--ink-2);
}
.of-card.st-error .of-now {
  color: var(--crit-text);
}
.of-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-ink);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.of-act {
  align-self: flex-start;
  min-height: 36px;
}
.of-acts-b {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.of-acts {
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.of-acts li {
  display: flex;
  gap: 8px;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-2);
}
.of-acts time {
  flex: none;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.of-acts span {
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.of-none {
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
  font-size: 12.5px;
  color: var(--muted);
}
.of-st {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px 2px 5px;
  border-radius: var(--r-pill);
  font-style: normal;
  font-size: 11.5px;
  font-weight: 650;
  white-space: nowrap;
}
.of-st .ic {
  width: 12px;
  height: 12px;
}
.of-st.st-working {
  background: var(--ai-soft);
  color: var(--ai);
}
.of-st.st-waiting {
  background: var(--serious-soft);
  color: var(--serious-text);
}
.of-st.st-error {
  background: var(--crit-soft);
  color: var(--crit-text);
}
.of-st.st-idle {
  background: var(--sunken);
  color: var(--ink-2);
}
.of-st.st-off {
  background: var(--sunken);
  color: var(--muted);
}
.of-pulse {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--ai);
  vertical-align: 1px;
  animation: of-pulse 1.4s ease-in-out infinite;
}
@keyframes of-pulse {
  50% {
    opacity: .3;
  }
}
@media (prefers-reduced-motion: reduce) {
  .of-pulse {
    animation: none;
  }
  .of-card {
    transition: none;
  }
}
.of-feedbox {
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
  padding: 14px 12px 8px;
  max-height: 680px;
  overflow-y: auto;
  min-width: 0;
}
@media (min-width: 760px) {
  .of-feedbox {
    max-height: none;
    contain: size;
    contain-intrinsic-height: 360px;
    min-height: 360px;
  }
}
.of-feedbox h3 {
  margin: 0 4px 8px;
  font-size: 14px;
  font-weight: 750;
}
.of-feed {
  list-style: none;
  margin: 0;
  padding: 0;
}
.of-feed li + li,
.ofc-journal li + li {
  border-top: 1px solid var(--hairline);
}
.of-fr {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 7px 4px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 12.5px;
  line-height: 1.4;
  text-align: left;
}
button.of-fr {
  cursor: pointer;
}
button.of-fr:hover {
  background: var(--sunken);
}
.of-fr time {
  flex: none;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.of-fr span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.of-fr b {
  color: var(--ink);
  font-weight: 650;
}
.of-dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
}
.of-more {
  display: none;
}
@media (max-width: 759px) {
  .of-main {
    grid-template-columns: minmax(0, 1fr);
  }
  .of-now:empty {
    min-height: 0;
  }
  .of-feedbox {
    max-height: none;
  }
  .of-feedbox:not(.is-all) .of-feed > li:nth-child(n+9) {
    display: none;
  }
  .of-more:not([hidden]) {
    display: inline-flex;
    margin: 6px 4px 6px;
    min-height: 36px;
  }
}
.ofc {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 85;
  width: min(380px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -14px 0 34px rgba(20, 25, 45, .12);
  font-family: var(--font);
}
.ofc[hidden] {
  display: none;
}
.ofc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--hairline);
}
.ofc-who {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.ofc-who b {
  font-size: 16px;
  font-weight: 800;
}
.ofc-who span {
  font-size: 12.5px;
  color: var(--muted);
}
.ofc-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.ofc-x .ic {
  width: 18px;
  height: 18px;
}
.ofc-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--hairline);
  overflow-x: auto;
}
.ofc-tabs button {
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 13.5px;
  white-space: nowrap;
  cursor: pointer;
}
.ofc-tabs [aria-selected=true] {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 650;
}
.ofc-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.5;
}
.ofc-body h4 {
  margin: 14px 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.ofc .btn {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13.5px;
}
.ofc .ast-act {
  height: 36px;
}
.ofc-task {
  margin: 0 0 10px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.ofc-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-ink);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.ofc-mut {
  color: var(--muted);
  font-size: 13px;
}
.ofc-err {
  color: var(--crit-text);
}
.ofc-wait {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--serious-soft);
  color: var(--serious-text);
}
.ofc-wait.is-err {
  background: var(--crit-soft);
  color: var(--crit-text);
}
.ofc-wait span {
  flex: 1;
  min-width: 140px;
  overflow-wrap: anywhere;
}
.ofc-wait .ic {
  width: 16px;
  height: 16px;
}
.ofc-ul {
  margin: 0;
  padding-left: 18px;
}
.ofc-ul li + li {
  margin-top: 4px;
}
.ofc-goal {
  margin: 8px 0 0;
}
.ofc-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ofc-items li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
  border-top: 1px solid var(--hairline);
  overflow-wrap: anywhere;
}
.ofc-items small {
  display: block;
  font-size: 12px;
  color: var(--muted);
}
.ofc-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
.ofc-items .ofc-acts {
  margin-top: 0;
}
.ofc-bal {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ofc-balr {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}
.ofc-balr i {
  height: 6px;
  border-radius: var(--r-pill);
  background:
    linear-gradient(
      90deg,
      var(--accent) var(--w),
      var(--sunken) var(--w));
}
.ofc-balr small {
  color: var(--muted);
}
.ofc-log {
  flex: none;
  overflow: visible;
  padding: 0;
}
.ofc-from {
  display: block;
  font-size: 11px;
  color: var(--muted);
}
.ofc-journal {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ofc-set {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ofc-frow {
  display: flex;
  gap: 10px;
}
.ofc-frow > * {
  flex: 1;
  min-width: 0;
}
.ofc-f {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ofc-f span {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.ofc-f select,
.ofc-f input {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
.ofc-f select:focus,
.ofc-f input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.ofc-mode {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ofc-mode legend {
  padding: 0;
  margin-bottom: 4px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.ofc-seg {
  display: flex;
  padding: 3px;
  gap: 3px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--sunken);
}
.ofc-seg label {
  flex: 1;
  position: relative;
}
.ofc-seg input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.ofc-seg span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
}
.ofc-seg input:checked + span {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(20, 25, 45, .12);
}
.ofc-seg input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.ofc-f select:disabled {
  opacity: .55;
}
@media (max-width: 759px) {
  .ofc {
    top: auto;
    left: 0;
    width: 100%;
    height: 85vh;
    border-left: 0;
    border-top: 1px solid var(--border);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -14px 34px rgba(20, 25, 45, .14);
  }
}

/* server/static/css/28-botfunnel.css */
.bf-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 14px;
  margin: 4px 0 14px;
}
.bf-filters[hidden] {
  display: none;
}
.bf-filters .fb-field {
  min-width: 0;
}
.bf-filters .fb-field[hidden] {
  display: none;
}
.bf-filters select {
  height: 36px;
  min-width: 170px;
}
.bf-filters input[type=date] {
  height: 36px;
  min-width: 150px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
}
.bf-filters .seg {
  height: 36px;
  box-sizing: border-box;
  align-items: stretch;
}
.bf-filters input[aria-invalid=true] {
  border-color: var(--crit-text);
}
.bf-err {
  flex-basis: 100%;
  margin: -4px 0 0;
  font-size: 12.5px;
  color: var(--crit-text);
}
.bf-err[hidden] {
  display: none;
}
.hqx .stat.bf-pitstat b {
  font-size: 18px;
  line-height: 1.25;
  color: var(--crit-text);
}
.hqx button.bf-jump {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  color: var(--accent-ink);
}
.hqx button.bf-jump:hover {
  background: none;
  text-decoration: underline;
}
.bf-when {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}
#sec-hqbot .pane {
  margin-bottom: 14px;
}
#sec-hqbot .hint {
  color: var(--muted);
  font-size: 12.5px;
  margin: 0;
}
.bf-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr) minmax(150px, auto) 130px 120px;
  align-items: center;
  gap: 4px 14px;
  padding: 7px 8px;
  border-radius: 10px;
}
.bf-row + .bf-row {
  border-top: 1px solid var(--hairline);
}
.bf-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  min-width: 0;
  font-size: 13.5px;
}
.bf-name small {
  flex-basis: 100%;
  font-size: 11.5px;
  color: var(--muted);
}
.bf-bar {
  height: 10px;
  border-radius: 5px;
  background: var(--hairline);
  overflow: hidden;
}
.bf-bar i {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: var(--accent);
  opacity: .7;
}
.bf-num {
  display: flex;
  align-items: baseline;
  gap: 6px;
  justify-content: flex-end;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bf-num b {
  font-size: 15px;
}
.bf-num span,
.bf-prev {
  font-size: 12px;
  color: var(--ink-2);
}
.bf-prev {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.bf-lost {
  text-align: right;
  font-size: 12px;
  color: var(--muted);
}
.bf-lost b {
  color: var(--ink);
}
.bf-row.bf-pit {
  background: var(--crit-soft);
  border-top-color: transparent;
}
.bf-row.bf-pit + .bf-row {
  border-top-color: transparent;
}
.bf-pit .bf-bar i {
  background: var(--crit-text);
}
.bf-pit .bf-lost,
.bf-pit .bf-lost b {
  color: var(--crit-text);
  font-weight: 700;
}
.bf-warn {
  margin: 6px 0 0;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--serious-soft);
  color: var(--serious-text);
  font-size: 12.5px;
}
.bf-cmp td.bf-d.up b {
  color: var(--good-text);
}
.bf-cmp td.bf-d.dn b {
  color: var(--crit-text);
}
.bf-two td:first-child,
.bf-src td:first-child {
  white-space: normal;
}
.bf-src td small {
  display: block;
}
.bf-src td a {
  color: var(--accent-ink);
}
#sec-hqbot .fun-tbl tbody tr {
  cursor: default;
}
#sec-hqbot .fun-tbl tbody tr:hover td {
  background: none;
}
#sec-hqbot code {
  font-size: 12px;
  background: var(--sunken);
  padding: 1px 4px;
  border-radius: 4px;
}
.bf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
.bf-grid .pane {
  margin-bottom: 14px;
}
.bf-time {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bf-time li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: 13px;
}
.bf-time li + li {
  border-top: 1px solid var(--hairline);
}
.bf-time li > span:last-child {
  white-space: nowrap;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.bf-time li.long b {
  color: var(--crit-text);
}
.bf-hours {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 110px;
  margin-top: 8px;
  border-bottom: 1px solid var(--border);
}
.bf-h {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
}
.bf-h.night {
  background: var(--sunken);
}
.bf-h i {
  display: block;
  width: 100%;
  background: var(--accent);
  opacity: .6;
  border-radius: 3px 3px 0 0;
}
.bf-h b {
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--good-text);
}
.bf-hax {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--muted);
}
.bf-hyp {
  padding: 10px 0;
}
.bf-hyp + .bf-hyp {
  border-top: 1px solid var(--hairline);
}
.bf-hyp-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.bf-hyp p {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
}
.bf-hyp p.why {
  color: var(--ink-2);
  font-size: 12.5px;
}
#bfAiBody .kw-ai {
  margin-top: 6px;
}
.bf-how {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--muted);
}
.bf-how summary {
  cursor: pointer;
  color: var(--ink-2);
  font-weight: 600;
  width: max-content;
}
.bf-how summary:hover {
  color: var(--accent-ink);
}
.bf-how ul {
  margin: 8px 0 0;
  padding-left: 18px;
  line-height: 1.5;
}
@media (max-width: 900px) {
  .bf-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .bf-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .bf-bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .bf-prev {
    text-align: left;
  }
}
@media (max-width: 620px) {
  .bf-filters .fb-field,
  .bf-filters select,
  .bf-filters input[type=date] {
    width: 100%;
    min-width: 0;
  }
  .bf-filters .seg {
    display: flex;
  }
  .bf-filters .seg button {
    flex: 1;
    padding: 4px;
  }
  .bf-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
  }
  .bf-filters .bf-per,
  .bf-err {
    grid-column: 1 / -1;
  }
  .bf-row {
    padding: 7px 4px;
  }
  .bf-hyp-h {
    flex-direction: column;
    gap: 4px;
  }
  .bf-two thead {
    display: none;
  }
  .bf-two,
  .bf-two tbody {
    display: block;
  }
  .bf-two tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--hairline);
  }
  .bf-cmp tr {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bf-two td {
    padding: 0;
    border: 0;
    text-align: left;
    white-space: normal;
  }
  .bf-two td:first-child {
    grid-column: 1 / -1;
    font-weight: 600;
  }
  .bf-two td[data-h]::before {
    content: attr(data-h);
    display: block;
    font-size: 10.5px;
    color: var(--muted);
  }
  .bf-src td {
    padding: 6px 4px;
  }
}

/* server/static/css/34-demo.css */
.demo-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 14px;
  padding: 9px 14px;
  background: var(--accent-soft);
  border: 1px solid rgba(var(--accent-rgb), .22);
  border-radius: var(--r-lg);
  font-size: 13px;
  color: var(--ink-2);
}
.demo-bar[hidden] {
  display: none;
}
.demo-bar > b {
  font-size: 13.5px;
  font-weight: 750;
  color: var(--ink);
}
.demo-bar .dm-step {
  color: var(--accent-ink);
  font-weight: 650;
}
.demo-bar .dm-sp {
  flex: 1 1 0;
  min-width: 0;
}
.demo-bar .btn {
  height: 32px;
  padding: 0 12px;
  font-size: 12.5px;
  white-space: nowrap;
}
.demo-bar .btn:disabled {
  opacity: .55;
  cursor: default;
}
.demo-bar .dm-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dm-prog {
  flex: 1 1 140px;
  max-width: 320px;
  height: 6px;
  border-radius: var(--r-pill);
  background: rgba(var(--accent-rgb), .16);
  overflow: hidden;
}
.dm-prog > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width .6s ease;
}
.dm-err {
  color: var(--crit-text);
}
body:has(#sec-space.sp-building:not([hidden])) .demo-bar :is(.dm-prog, .dm-step) {
  display: none;
}
.topbar .demo-bar {
  margin: 0 0 0 auto;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  flex-wrap: nowrap;
  gap: 8px 10px;
  min-width: 0;
  font-size: 12.5px;
}
.topbar .demo-bar > b {
  font-size: 12.5px;
  white-space: nowrap;
}
.topbar .demo-bar .dm-sp {
  display: none;
}
.topbar .demo-bar .dm-step {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
}
.topbar .demo-bar .dm-prog {
  flex: 0 0 90px;
}
.topbar .demo-bar .btn {
  height: 34px;
}
.topbar .demo-bar:not([hidden]) + .top-actions {
  margin-left: 12px;
}
@media (max-width: 1280px) {
  .topbar .demo-bar .dm-step,
  .topbar .demo-bar .dm-prog {
    display: none;
  }
}
@media (max-width: 860px) {
  .topbar:has(.demo-bar:not([hidden])) {
    height: auto;
    min-height: 58px;
    flex-wrap: wrap;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .topbar .demo-bar {
    order: 5;
    flex: 1 1 100%;
    margin: 0;
    flex-wrap: wrap;
  }
  .topbar .demo-bar:not([hidden]) + .top-actions {
    margin-left: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dm-prog > i {
    transition: none;
  }
}
@media (max-width: 520px) {
  .demo-bar {
    padding: 10px 12px;
  }
  .demo-bar .dm-sp {
    display: none;
  }
  .demo-bar .dm-acts {
    width: 100%;
  }
  .demo-bar .dm-acts .btn {
    flex: 1 1 auto;
  }
  .dm-prog {
    max-width: none;
    flex-basis: 100%;
  }
}

/* server/static/css/35-create.css */
.cr-top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.cr-pick {
  max-width: 100%;
  min-width: min(100%, 420px);
  height: 38px;
  box-sizing: border-box;
  padding-left: 12px;
  text-overflow: ellipsis;
}
.cr-none {
  font-size: 13.5px;
  color: var(--ink-2);
  margin: 4px 2px;
}
.cr-next {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 10px 14px;
  background: var(--tint);
  border: 1px solid var(--tint-line);
  border-radius: 12px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.cr-why {
  flex: 1 1 280px;
  min-width: 0;
  line-height: 1.45;
}
.cr-next .btn {
  padding: 8px 13px;
  font-size: 12.5px;
}
.cr-work {
  min-width: 0;
}
.cr-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--ink-2);
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.dw.dw-dock {
  position: static;
  z-index: auto;
}
.dw.dw-dock .dw-backdrop {
  display: none;
}
.dw.dw-dock .dw-panel {
  position: relative;
  height: auto;
  width: 100%;
  transform: none;
  transition: none;
  box-shadow: none;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: visible;
  padding: 20px 24px 32px;
}
.dw.dw-dock .dw-panel.dw-full {
  width: 100%;
}
.dw.dw-dock .dw-panel.dw-full #idAfter > .id-sect {
  margin-right: 0;
}
@media (max-width: 899px) {
  .cr-pick {
    width: 100%;
    min-width: 0;
  }
  .cr-work {
    display: none;
  }
}

/* server/static/css/36-process.css */
#agProcess {
  --pm-auto: #2f6fdb;
  --pm-auto-soft: #e5efff;
  --pm-tune: #8a3fd1;
  --pm-tune-soft: #f2e8fd;
  --pm-teach: #0e8f8f;
  --pm-teach-soft: #dff5f4;
}
.pm-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  margin-bottom: 12px;
}
.pm-lbl {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  margin-bottom: 4px;
}
.pm-client {
  min-width: 180px;
}
.pm-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.pm-seg button {
  border: 0;
  background: none;
  padding: 6px 11px;
  border-radius: var(--r-sm);
  font: 600 13px var(--font);
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
}
.pm-seg button[aria-pressed=true] {
  background: var(--accent);
  color: #fff;
}
.pm-team {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 12px;
  box-shadow: var(--shadow-1);
}
.pm-team > div {
  padding: 14px 16px;
}
.pm-team-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(var(--accent-rgb), .35);
  border-radius: var(--r-md);
  background: var(--surface);
  font: 700 13px var(--font);
  cursor: pointer;
}
.pm-team-btn span {
  background:
    linear-gradient(
      90deg,
      var(--ink) 0%,
      var(--accent) 50%,
      var(--ink) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: kw-shine 2.4s linear infinite;
}
.pm-team-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: sbShine 2.4s linear infinite;
  background:
    linear-gradient(
      100deg,
      transparent 30%,
      rgba(var(--accent-rgb), .12) 50%,
      transparent 70%);
}
.pm-team-btn:hover {
  border-color: var(--accent);
}
.pm-team-btn[aria-expanded=true] {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.pm-team-btn[aria-expanded=true] span {
  animation: none;
  background: none;
  -webkit-text-fill-color: var(--accent-ink);
  color: var(--accent-ink);
}
.pm-team-btn[aria-expanded=true]::after {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .pm-team-btn span,
  .pm-team-btn::after {
    animation: none;
  }
}
.pm-team-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  margin-bottom: 8px;
}
.pm-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pm-roles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 8px 16px;
}
.pm-role {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 210px;
  gap: 6px 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--r-md);
  background: var(--sunken);
}
.pm-rt {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.pm-rt b {
  font-size: 13px;
}
.pm-role input {
  grid-column: 1 / -1;
}
.pm-role input,
.pm-role select,
.pm-team-foot input {
  font: 13px var(--font);
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  min-width: 0;
}
.pm-team-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: flex-end;
  margin-top: 10px;
}
.pm-team-foot label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11.5px;
  color: var(--muted);
}
.pm-team-foot input[type=number] {
  width: 90px;
}
.pm-team-foot .pm-tnote {
  flex: 1;
  min-width: 220px;
}
.pm-chain {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 2px 0 10px;
}
.pm-arr {
  color: var(--muted);
}
.pm-notes:empty {
  display: none;
}
.pm-notes {
  background: var(--accent-soft);
  border-radius: var(--r-md);
  padding: 8px 12px;
  margin-bottom: 8px;
  font-size: 13px;
}
.pm-notes p {
  margin: 3px 0;
}
.pm-crit {
  color: var(--crit-text);
}
.pm-hl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: var(--accent-soft);
  border-radius: var(--r-md);
  padding: 6px 12px;
  margin-bottom: 8px;
  font-size: 13px;
}
#agProcess:not(.is-map) .pm-board {
  display: none;
}
.pm-main {
  flex: 1;
  min-width: 0;
}
.pm-board {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.pm-canvas {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow-x: auto;
  box-shadow: var(--shadow-1);
}
.pm-canvas svg {
  display: block;
  font-family: var(--font);
}
.pm-step {
  cursor: pointer;
}
.pm-q {
  cursor: help;
}
.pm-q:hover circle {
  stroke: var(--accent);
}
.pm-q:hover text {
  fill: var(--accent-ink);
}
.pm-canvas svg > path,
.pm-canvas svg > text,
.pm-canvas svg > line {
  pointer-events: none;
}
.pm-side {
  width: 340px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 78px;
  max-height: calc(100vh - 90px);
}
@media (min-width: 861px) {
  body.sec-min .pm-side {
    top: 12px;
    max-height: calc(100vh - 24px);
  }
}
.pm-modes {
  display: flex;
}
.pm-modes button {
  flex: 1;
}
.pm-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 16px 16px;
  flex: 0 1 auto;
  min-height: 0;
  overflow: auto;
  font-size: 13px;
  box-shadow: var(--shadow-1);
}
.pm-panel h3 {
  margin: 2px 0 6px;
  font-size: 16px;
  line-height: 1.3;
}
.pm-panel dl {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 6px 10px;
  margin: 10px 0 0;
}
.pm-panel dt {
  color: var(--muted);
}
.pm-panel dd {
  margin: 0;
}
.pm-panel textarea {
  width: 100%;
  font: 13px var(--font);
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  resize: vertical;
}
.pm-x {
  display: none;
}
.pm-muted {
  color: var(--muted);
  font-size: 12px;
}
.pm-empty {
  color: var(--muted);
  margin: 0;
}
.pm-sec {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}
.pm-stbtn {
  display: flex;
  gap: 6px;
  margin: 6px 0;
}
.pm-stbtn button {
  flex: 1;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: 6px 0;
  font: 700 12px var(--font);
  color: var(--ink-2);
  cursor: pointer;
}
.pm-stbtn button.on.st-ok {
  background: var(--good-soft);
  color: var(--good-text);
  border-color: var(--good);
}
.pm-stbtn button.on.st-mid {
  background: var(--serious-soft);
  color: var(--serious-text);
  border-color: var(--serious);
}
.pm-stbtn button.on.st-no {
  background: var(--crit-soft);
  color: var(--crit-text);
  border-color: var(--crit);
}
.pm-k {
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: var(--r-md);
  background: var(--sunken);
}
.pm-k > div {
  margin-top: 4px;
}
.pm-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: 700;
}
.pm-pill.k-auto {
  background: var(--pm-auto-soft);
  color: var(--pm-auto);
}
.pm-pill.k-tune {
  background: var(--pm-tune-soft);
  color: var(--pm-tune);
}
.pm-pill.k-teach {
  background: var(--pm-teach-soft);
  color: var(--pm-teach);
}
.pm-pill.st-ok {
  background: var(--good-soft);
  color: var(--good-text);
}
.pm-pill.st-mid {
  background: var(--serious-soft);
  color: var(--serious-text);
}
.pm-pill.st-no {
  background: var(--crit-soft);
  color: var(--crit-text);
}
.pm-tblwrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.pm-tbl {
  border-collapse: collapse;
  width: 100%;
  min-width: 980px;
  font-size: 13px;
}
.pm-tbl th,
.pm-tbl td {
  text-align: left;
  vertical-align: top;
  padding: 8px 10px;
  border-bottom: 1px solid var(--hairline);
}
.pm-tbl th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  background: var(--sunken);
}
.pm-tbl tr.pm-grp td {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.pm-tbl td > div + div {
  margin-top: 4px;
}
.pm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
.pm-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 16px;
}
.pm-card h4 {
  margin: 0 0 6px;
  font-size: 14.5px;
}
.pm-card .btn {
  margin-top: 10px;
}
.pm-art {
  padding: 6px 0;
  border-top: 1px solid var(--hairline);
}
.pm-art:first-of-type {
  margin-top: 6px;
}
.pm-plat {
  color: var(--pm-auto);
}
.pm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.pm-h3 {
  margin: 16px 0 10px;
  font-size: 15px;
}
@media (max-width: 900px) {
  .pm-board {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .pm-side {
    order: -1;
    width: auto;
    position: static;
    max-height: none;
  }
  .pm-canvas {
    max-height: none;
  }
  .pm-panel {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
    max-height: 62vh;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 30px rgba(23, 25, 35, .18);
    z-index: 40;
  }
  .pm-panel.is-open {
    display: block;
  }
  .pm-x {
    display: block;
    position: absolute;
    right: 10px;
    top: 6px;
    border: 0;
    background: none;
    font-size: 22px;
    color: var(--muted);
    cursor: pointer;
  }
  .pm-role {
    grid-template-columns: 1fr;
  }
  .pm-roles {
    grid-template-columns: 1fr;
  }
}

/* server/static/css/main.css */