/* Hitcents Relay: clean, Linear/Zendesk-lite. Brand: Hitcents orange #F05A22 on near-black. */
:root {
  --or: #f05a22; --or-2: #ff6933; --or-soft: #fff1eb; --or-ink: #b93f12;
  --ink: #111114; --ink-2: #3f3f46; --mut: #71717a; --line: #e7e7ea; --line-2: #f0f0f2;
  --bg: #f7f7f8; --card: #fff; --side: #101014; --side-2: #1b1b20;
  --pass: #16a34a; --pass-bg: #ecfdf3; --flag: #d97706; --flag-bg: #fffbeb; --stop: #dc2626; --stop-bg: #fef2f2; --muted-bg: #f4f4f5;
  --blue: #2563eb; --r: 12px; --sh: 0 1px 2px rgba(16,16,20,.05), 0 1px 3px rgba(16,16,20,.04);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 14px/1.5 var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -.01em; }
h2 { font-size: 22px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 650; }
p { margin: 0; }
small { font-size: 12px; }
.muted { color: var(--mut); }
.small { font-size: 12px; }
.mono, code, pre { font-family: var(--mono); font-size: 12px; }
.ic { width: 18px; height: 18px; flex: none; }
.sp { flex: 1; }

/* ---------- shell ---------- */
#app { display: flex; min-height: 100vh; }
#sidebar { width: 236px; flex: none; background: var(--side); color: #d4d4d8; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; padding: 18px 12px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; border-bottom: 1px solid #222228; margin-bottom: 12px; }
.brand-logo { height: 24px; width: auto; }
.brand-prod { font-weight: 700; color: #fff; font-size: 15px; padding-left: 10px; border-left: 1px solid #3a3a42; }
#nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 8px; color: #a1a1aa; font-weight: 500; min-height: 40px; }
.nav-item:hover { background: var(--side-2); color: #fff; }
.nav-item.active { background: #26262c; color: #fff; }
.nav-item.active .ic { color: var(--or-2); }
.badge { margin-left: auto; font-style: normal; background: var(--or); color: #fff; font-size: 11px; font-weight: 700; border-radius: 99px; padding: 1px 7px; }
.nav-sim { margin-top: 14px; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; border: 1px solid rgba(240,90,34,.45); background: linear-gradient(135deg, rgba(240,90,34,.18), rgba(240,90,34,.06)); color: #fff; font-weight: 600; cursor: pointer; text-align: left; }
.nav-sim .ic { color: var(--or-2); }
.nav-sim:hover { background: rgba(240,90,34,.28); }
.side-foot { border-top: 1px solid #222228; padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.me { display: flex; gap: 10px; align-items: center; padding: 0 6px; }
.me b { display: block; color: #fff; font-size: 13px; }
.me small { color: #71717a; }
.side-reset { background: none; border: 0; color: #71717a; font-size: 12px; text-align: left; padding: 4px 6px; cursor: pointer; }
.side-reset:hover { color: #fff; }
#main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 28px; background: rgba(247,247,248,.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
#tbTitle { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.tb-logo { display: none; align-items: center; gap: 8px; }
.tb-logo img { width: 26px; height: 26px; }
.tswitch { margin-left: auto; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--line); background: #fff; border-radius: 10px; cursor: pointer; font-weight: 600; box-shadow: var(--sh); max-width: 260px; }
.tswitch .ts-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tswitch .ic { width: 16px; color: var(--mut); }
.tb-ai { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--mut); white-space: nowrap; }
.tb-ai i { width: 8px; height: 8px; border-radius: 50%; background: var(--pass); box-shadow: 0 0 0 3px rgba(22,163,74,.18); animation: blink 2s infinite; }
@keyframes blink { 50% { opacity: .45; } }
#view { padding: 24px 28px 48px; max-width: 1360px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
#view:focus { outline: none; }
#tabbar { display: none; }

/* ---------- primitives ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; box-shadow: var(--sh); min-width: 0; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-h h3 { display: flex; align-items: center; gap: 7px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--line); background: #fff; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, transform .1s; }
.btn:hover { background: #fafafa; border-color: #d4d4d8; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--or); border-color: var(--or); color: #fff; }
.btn.primary:hover { background: #dd4c15; }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: #fff; }
.btn.danger { background: var(--stop); border-color: var(--stop); color: #fff; }
.danger-t { color: var(--stop); }
.btn.sm { height: 32px; padding: 0 10px; font-size: 13px; }
.btn.big { height: 46px; padding: 0 20px; font-size: 15px; border-radius: 11px; }
.btn.full { width: 100%; margin-top: 12px; }
.btn:disabled { opacity: .55; cursor: default; }
.btn .ic { width: 16px; height: 16px; }
.pulse { box-shadow: 0 0 0 0 rgba(240,90,34,.5); animation: pulse 2.4s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 12px rgba(240,90,34,0); } 100% { box-shadow: 0 0 0 0 rgba(240,90,34,0); } }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9px; border: 0; background: transparent; cursor: pointer; color: var(--mut); flex: none; }
.icon-btn:hover { background: var(--muted-bg); color: var(--ink); }
.icon-btn.sm { width: 28px; height: 28px; }
.icon-btn.sm .ic { width: 15px; }
.link { color: var(--or-ink); font-weight: 600; display: inline-flex; align-items: center; gap: 2px; font-size: 13px; }
.link .ic { width: 15px; }
.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: var(--muted-bg); color: var(--ink-2); white-space: nowrap; }
.pill .ic { width: 13px; height: 13px; }
.st-human { background: #fff1eb; color: var(--or-ink); }
.st-draft { background: #eef2ff; color: #4338ca; }
.st-auto { background: var(--pass-bg); color: #15803d; }
.st-done { background: #f0fdf4; color: #166534; }
.st-quar { background: var(--stop-bg); color: #b91c1c; }
.st-sil { background: var(--muted-bg); color: #52525b; }
.st-open { background: #eff6ff; color: #1d4ed8; }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 500; padding: 1px 8px; border-radius: 6px; background: #f4f4f5; color: #52525b; border: 1px solid #ececef; white-space: nowrap; }
.tag.add { cursor: pointer; background: #fff; border-style: dashed; height: 24px; }
.tag.add .ic { width: 12px; }
.tag.rm { cursor: pointer; }
.t-abusive, .t-phishing { background: var(--stop-bg); color: #b91c1c; border-color: #fde2e2; }
.t-urgent, .t-escalated, .t-buried-issue { background: #fff7ed; color: #c2410c; border-color: #ffedd5; }
.t-identity-mismatch, .t-kb-gap { background: var(--flag-bg); color: #a16207; border-color: #fef3c7; }
.t-ai { background: var(--or-soft); color: var(--or-ink); border-color: #ffe0d2; }
.tdot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.tdot.all { background: conic-gradient(#2563eb 0 25%, #0891b2 0 50%, #7c3aed 0 75%, #db2777 0); }
.tchip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 6px; color: var(--tc); background: color-mix(in srgb, var(--tc) 10%, #fff); white-space: nowrap; }
.av { width: 30px; height: 30px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: #52525b; color: #fff; font-size: 11.5px; font-weight: 700; }
.av.ai { background: var(--or); }
.av.ai .ic { width: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 13px; font-weight: 500; }
.chip.on { border-color: var(--or); background: var(--or-soft); color: var(--or-ink); }
.tchip-t.on { border-color: var(--tc); background: color-mix(in srgb, var(--tc) 12%, #fff); color: var(--tc); }
.chip.tone-pass { border-color: #bbf7d0; } .chip.tone-stop { border-color: #fecaca; } .chip.tone-flag { border-color: #fde68a; }
.chip:hover { background: #fafafa; }
.empty, .empty-s { color: var(--mut); }
.empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 16px; text-align: center; list-style: none; }
.empty .ic { width: 34px; height: 34px; color: #c4c4cc; }
.empty b { color: var(--ink); font-size: 15px; }
.empty-s { list-style: none; padding: 10px 0; font-size: 13px; }
.spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; display: inline-block; animation: spin .7s linear infinite; vertical-align: -2px; }
.spin.sm { width: 11px; height: 11px; }
@keyframes spin { to { transform: rotate(360deg); } }
.page-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.page-h p { margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.scope-note { display: flex; align-items: center; gap: 8px; font-size: 13px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; padding: 8px 12px; border-radius: 9px; }
.scope-note .ic { width: 16px; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; }
.grid-2.rules { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.grid-2.tight { grid-template-columns: 1fr 1fr; }
.card > .form.row2 + .form.row2, .card > .form.row2 + .toggle { margin-top: 12px; }
.stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* ---------- forms ---------- */
.form { display: flex; flex-direction: column; gap: 12px; }
.form label, .tk-bar label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
input, select, textarea { border: 1px solid #dcdce0; border-radius: 9px; padding: 8px 11px; background: #fff; min-height: 38px; width: 100%; font-size: 14px; font-weight: 400; color: var(--ink); }
textarea { resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(240,90,34,.35); border-color: var(--or); }
input[type=color] { padding: 3px; height: 38px; }
input[type=checkbox], input[type=radio] { width: auto; min-height: 0; accent-color: var(--or); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; }
.range { padding: 0; border: 0; min-height: 28px; accent-color: var(--or); background: transparent; }
.radios { display: flex; flex-direction: column; gap: 6px; }
.radio { flex-direction: row !important; align-items: center; gap: 10px !important; border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; font-weight: 500 !important; cursor: pointer; min-height: 44px; }
.radio:has(input:checked) { border-color: var(--or); background: var(--or-soft); }
.search { position: relative; flex: 1; min-width: 200px; }
.search .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; color: var(--mut); }
.search input { padding-left: 34px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filters select { width: auto; flex: 0 1 180px; }
.toggle { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 12px !important; cursor: pointer; padding: 8px 0; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle .tg { width: 40px; height: 23px; border-radius: 99px; background: #d4d4d8; position: relative; flex: none; transition: background .2s; margin-top: 1px; }
.toggle .tg::after { content: ""; position: absolute; left: 3px; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.toggle input:checked + .tg { background: var(--or); }
.toggle input:checked + .tg::after { transform: translateX(17px); }
.toggle input:focus-visible + .tg { outline: 2px solid var(--or); outline-offset: 2px; }
.toggle b { display: block; font-size: 13.5px; color: var(--ink); }
.toggle small { color: var(--mut); font-weight: 400; }
.seg { display: inline-flex; background: var(--muted-bg); border-radius: 9px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; padding: 0 11px; height: 32px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--mut); cursor: pointer; white-space: nowrap; }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.seg button.on.s-auto, .seg button.on.s-ai { color: #15803d; }
.seg button.on.s-draft, .seg button.on.s-approval { color: #4338ca; }
.seg button.on.s-never, .seg button.on.s-disabled { color: #b91c1c; }

/* ---------- tables ---------- */
.tbl-wrap { overflow-x: auto; margin: 0 -18px -18px; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--mut); font-weight: 600; padding: 9px 18px; background: #fafafa; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 12px 18px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr[data-art], .tbl tbody tr[data-tenant-go] { cursor: pointer; }
.tbl tbody tr:hover { background: #fcfcfd; }
.tbl td small { display: block; }
.tbl td.act { text-align: right; white-space: nowrap; }
.tbl code { color: var(--ink-2); word-break: break-all; }
.clamp { display: -webkit-box !important; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; max-width: 560px; }
.link-t { color: var(--ink); }
.meter { display: inline-block; width: 70px; height: 6px; border-radius: 9px; background: var(--muted-bg); vertical-align: middle; overflow: hidden; margin-right: 6px; }
.meter i { display: block; height: 100%; background: var(--or); border-radius: 9px; }
.wrap { word-break: break-all; }
.who { display: flex; align-items: center; gap: 10px; }

/* ---------- dashboard ---------- */
.hero { padding: 22px; background: radial-gradient(120% 140% at 100% 0%, #2a1a14 0%, #141418 45%, #101014 100%); color: #e4e4e7; border-color: #222; overflow: hidden; position: relative; }
.hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.hero h2 { color: #fff; font-size: 21px; margin-top: 6px; max-width: 680px; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--or-2); text-transform: uppercase; letter-spacing: .05em; }
.eyebrow .ic { width: 14px; }
.pipe-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; position: relative; }
.ps { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 14px 12px 12px; margin-right: 10px; border-radius: 11px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); animation: rise .5s both; animation-delay: calc(var(--i) * 70ms); }
.ps:last-child { margin-right: 0; }
.ps:not(:last-child)::after { content: ""; position: absolute; right: -10px; top: 30px; width: 10px; height: 2px; background: linear-gradient(90deg, rgba(240,90,34,.7), rgba(240,90,34,.2)); }
.ps-ic { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.07); color: #fff; margin-bottom: 4px; }
.ps-ic .ic { width: 16px; }
.ps.tone-stop .ps-ic { background: rgba(220,38,38,.22); color: #fca5a5; }
.ps.tone-muted .ps-ic { background: rgba(161,161,170,.18); color: #d4d4d8; }
.ps.tone-flag .ps-ic { background: rgba(217,119,6,.22); color: #fcd34d; }
.ps.tone-pass .ps-ic { background: rgba(22,163,74,.2); color: #86efac; }
.ps-name { font-size: 11.5px; color: #a1a1aa; font-weight: 600; }
.ps b { font-size: 20px; color: #fff; font-weight: 700; letter-spacing: -.02em; }
.ps small { color: #a1a1aa; font-size: 11.5px; line-height: 1.3; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.scen-quick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.scen-quick > span { font-size: 12px; color: #a1a1aa; }
.hero .chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #e4e4e7; }
.hero .chip:hover { background: rgba(255,255,255,.12); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi { display: flex; flex-direction: column; gap: 2px; padding: 15px 16px; }
.kpi small { color: var(--mut); font-weight: 600; }
.kpi b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.kpi span { font-size: 12px; color: var(--mut); }
.kpi em { font-style: normal; font-weight: 700; color: var(--pass); }
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: #efeff1; }
.chart .ax { font-size: 10.5px; fill: #9a9aa3; }
.b-ai { fill: var(--or); background: var(--or); }
.b-hu { fill: #52525b; background: #52525b; }
.b-ga { fill: #d4d4d8; background: #d4d4d8; }
.legend { display: flex; gap: 12px; font-size: 12px; color: var(--mut); flex-wrap: wrap; }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.needs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.need { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; }
.need b { font-size: 26px; line-height: 1.1; color: #4338ca; }
.need.hot b { color: var(--or-ink); }
.need span { font-size: 12.5px; color: var(--mut); }
.need:hover { border-color: #d4d4d8; background: #fcfcfd; }
.mini-list { list-style: none; margin: 0; padding: 0; }
.mini-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line-2); }
.mini-list a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.mini-list a span { min-width: 0; }
.mini-list b, .mini-list small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-list small { color: var(--mut); }
.hbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.hbars li { display: grid; grid-template-columns: 130px 1fr 42px; gap: 10px; align-items: center; font-size: 13px; }
.hbars b { text-align: right; font-size: 12.5px; }
.hb { height: 9px; background: var(--muted-bg); border-radius: 9px; overflow: hidden; }
.hb i { display: block; height: 100%; background: var(--or); border-radius: 9px; opacity: .85; }
.feed { list-style: none; margin: 0; padding: 0; }
.feed a { display: flex; align-items: center; gap: 11px; padding: 8px 0; border-top: 1px solid var(--line-2); }
.feed li:first-child a { border-top: 0; }
.feed-ic { width: 30px; height: 30px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--muted-bg); color: var(--mut); }
.feed-ic .ic { width: 15px; }
.feed-t { flex: 1; min-width: 0; }
.feed-t b, .feed-t small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-t small { color: var(--mut); }
.feed time { font-size: 12px; color: var(--mut); white-space: nowrap; }
.oc-auto { --oc: var(--pass); --ocb: var(--pass-bg); }
.oc-draft { --oc: #4338ca; --ocb: #eef2ff; }
.oc-human { --oc: var(--or-ink); --ocb: var(--or-soft); }
.oc-quar { --oc: var(--stop); --ocb: var(--stop-bg); }
.oc-sil { --oc: #52525b; --ocb: var(--muted-bg); }
.feed-ic[class*=oc-] { color: var(--oc); background: var(--ocb); }

/* ---------- inbox ---------- */
.vtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.vtabs::-webkit-scrollbar { display: none; }
.vtab { display: flex; align-items: center; gap: 7px; padding: 10px 12px; font-weight: 600; color: var(--mut); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; min-height: 44px; }
.vtab .ic { width: 15px; }
.vtab em { font-style: normal; font-size: 11.5px; background: var(--muted-bg); color: var(--ink-2); padding: 0 7px; border-radius: 99px; }
.vtab em.hot { background: var(--or-soft); color: var(--or-ink); }
.vtab.on { color: var(--ink); border-bottom-color: var(--or); }
.tlist { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); }
.trow { position: relative; border-top: 1px solid var(--line-2); }
.trow:first-child { border-top: 0; }
.trow > a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; padding: 13px 18px; align-items: start; }
.trow:hover { background: #fcfcfd; }
.trow.draft > a { padding-right: 130px; }
.tr-approve { position: absolute; right: 18px; bottom: 13px; }
.tr-m { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tr-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tr-top b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-top small { color: var(--mut); white-space: nowrap; }
.tr-subj { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.tr-r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.tr-r time { font-size: 12px; color: var(--mut); white-space: nowrap; }
.vds { display: flex; gap: 3px; }
.vd { width: 7px; height: 7px; border-radius: 50%; background: #d4d4d8; display: block; }
.vd.v-pass { background: var(--pass); } .vd.v-flag { background: var(--flag); } .vd.v-stop { background: var(--stop); } .vd.v-skip { background: #d4d4d8; }
.sla { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.sla .ic { width: 13px; }
.sla-breached { color: var(--stop); } .sla-risk { color: var(--flag); } .sla-ok { color: var(--mut); }
.tr-r .av { width: 22px; height: 22px; font-size: 9px; }

/* ---------- ticket ---------- */
.tk-head { display: flex; gap: 10px; align-items: flex-start; }
.tk-head .back { margin-top: 2px; border: 1px solid var(--line); background: #fff; }
.tk-title { min-width: 0; flex: 1; }
.tk-title > small { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--mut); }
.tk-title h2 { margin: 3px 0 7px; overflow-wrap: anywhere; }
.tk-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tk-bar { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.tk-bar label { flex: 0 1 200px; }
.tk-bar-btns { margin-left: auto; display: flex; gap: 6px; }
.tk-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.tk-main, .tk-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.msg { border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; margin-top: 10px; }
.msg:first-of-type { margin-top: 0; }
.msg header { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; flex-wrap: wrap; }
.msg header .av { width: 26px; height: 26px; font-size: 10px; }
.msg header time { margin-left: auto; font-size: 12px; color: var(--mut); }
.msg.out { background: #fcfcfd; border-left: 3px solid var(--or); }
.msg.out.agent { border-left-color: #4338ca; }
.msg-b { white-space: normal; overflow-wrap: anywhere; color: var(--ink-2); }
.quar-note { margin-top: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; background: var(--stop-bg); color: #991b1b; padding: 10px 12px; border-radius: 9px; }
.draft-card { border-color: #c7d2fe; box-shadow: 0 0 0 3px rgba(67,56,202,.06); }
.draft-card.compose { border-color: var(--line); box-shadow: var(--sh); }
.draft-card textarea[readonly] { background: #fafaff; border-color: #e0e7ff; }
.draft-card.editing textarea { background: #fff; }
.draft-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.draft-card .toolcall { margin-top: 12px; }
.notes { list-style: none; margin: 0 0 10px; padding: 0; }
.notes li { padding: 9px 0; border-top: 1px solid var(--line-2); }
.notes li:first-child { border-top: 0; }
.notes header { display: flex; align-items: center; gap: 8px; }
.notes header .av { width: 22px; height: 22px; font-size: 9px; }
.notes time { font-size: 12px; color: var(--mut); margin-left: auto; }
.notes p { margin: 4px 0 0 30px; color: var(--ink-2); background: #fffbeb; padding: 7px 10px; border-radius: 8px; }
.note-add { display: flex; gap: 8px; margin-top: 8px; }
.cust-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cust-top b, .cust-top small { display: block; }
.cust-top small { color: var(--mut); overflow-wrap: anywhere; }
.cust dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 14px; font-size: 13px; }
.cust dt { color: var(--mut); }
.cust dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.cust dd.warn { color: var(--stop); font-weight: 600; }
.cust h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--mut); margin-bottom: 6px; }
.past { list-style: none; margin: 0; padding: 0; }
.past a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line-2); font-size: 13px; align-items: center; }
.past a span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pick button { width: 100%; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: 10px 12px; cursor: pointer; min-height: 44px; }
.pick button:hover { border-color: var(--or); }
.pick b, .pick small { display: block; }
.pick small { color: var(--mut); }

/* ---------- decision trace (killer feature) ---------- */
.trace { list-style: none; margin: 0; padding: 0; position: relative; }
.stage { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding-bottom: 14px; }
.stage:not(:last-child)::before { content: ""; position: absolute; left: 16px; top: 34px; bottom: 0; width: 2px; background: var(--line); }
.stage.v-pass:not(:last-child)::before { background: linear-gradient(var(--pass), #bbf7d0); }
.stage.v-flag:not(:last-child)::before { background: linear-gradient(var(--flag), #fde68a); }
.stage.v-stop:not(:last-child)::before { background: repeating-linear-gradient(var(--line) 0 4px, transparent 4px 8px); }
.st-node { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--muted-bg); color: #a1a1aa; position: relative; z-index: 1; transition: all .3s; }
.st-node .ic { width: 17px; }
.v-pass .st-node { background: var(--pass-bg); color: var(--pass); }
.v-flag .st-node { background: var(--flag-bg); color: var(--flag); }
.v-stop .st-node { background: var(--stop); color: #fff; box-shadow: 0 0 0 4px rgba(220,38,38,.15); }
.v-skip .st-node { background: #fafafa; color: #d4d4d8; }
.running .st-node { background: var(--or); color: #fff; box-shadow: 0 0 0 0 rgba(240,90,34,.5); animation: pulse 1.1s infinite; }
.st-main { min-width: 0; padding-top: 1px; }
.st-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.st-name { font-weight: 650; font-size: 13.5px; }
.st-meta { display: flex; align-items: center; gap: 8px; }
.ms { font-family: var(--mono); font-size: 11px; color: var(--mut); }
.vchip { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 7px 1px 5px; border-radius: 6px; }
.vchip:empty { display: none; }
.vchip .ic { width: 12px; height: 12px; stroke-width: 2.6; }
.v-pass .vchip { background: var(--pass-bg); color: #15803d; }
.v-flag .vchip { background: var(--flag-bg); color: #b45309; }
.v-stop .vchip { background: var(--stop); color: #fff; }
.v-skip .vchip { background: #f4f4f5; color: #a1a1aa; }
.st-sub { font-size: 13px; color: var(--mut); }
.st-sub b { color: var(--ink); font-weight: 600; }
.v-stop .st-sub b { color: #b91c1c; }
.v-skip .st-sub b { color: #a1a1aa; font-weight: 500; }
.stage.idle .st-name, .stage.skipped .st-name { color: #a1a1aa; }
.st-reason { font-size: 13px; color: var(--ink-2); margin-top: 4px; line-height: 1.45; }
.st-det { margin-top: 6px; font-size: 12.5px; }
.st-det summary { cursor: pointer; color: var(--mut); font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 4px; min-height: 28px; }
.st-det summary::before { content: "▸"; font-size: 10px; transition: transform .15s; }
.st-det[open] summary::before { transform: rotate(90deg); }
.st-det summary::-webkit-details-marker { display: none; }
.st-det ul { list-style: none; margin: 4px 0 0; padding: 8px 10px; background: #fafafa; border: 1px solid var(--line-2); border-radius: 8px; display: flex; flex-direction: column; gap: 4px; }
.st-det li { display: grid; grid-template-columns: minmax(110px, 40%) 1fr; gap: 10px; }
.st-det li span { color: var(--mut); }
.st-det li b { font-weight: 500; overflow-wrap: anywhere; }
.st-det li.ok b::before { content: "✓ "; color: var(--pass); }
.st-det li.bad b::before { content: "! "; color: var(--stop); font-weight: 800; }
.cites { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cite { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 7px; background: #eff6ff; color: #1d4ed8; border: 1px solid #dbeafe; max-width: 100%; }
.cite span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cite .ic { width: 13px; }
.toolcall { margin-top: 8px; border: 1px solid #27272a; border-radius: 10px; background: #0f0f12; color: #e4e4e7; overflow: hidden; }
.tc-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #27272a; font-size: 12px; flex-wrap: wrap; }
.tc-head .ic { width: 14px; color: var(--or-2); }
.tc-head b { font-family: var(--mono); font-size: 12px; color: #fff; overflow-wrap: anywhere; }
.tc-via { color: #71717a; }
.tc-st { margin-left: auto; font-family: var(--mono); font-weight: 700; color: #4ade80; }
.toolcall.pending .tc-st { color: #fbbf24; }
.toolcall.blocked .tc-st { color: #f87171; }
.tc-body { display: grid; grid-template-columns: 1fr 1fr; }
.tc-body > div { padding: 8px 12px; min-width: 0; }
.tc-body > div + div { border-left: 1px solid #27272a; }
.tc-body small { color: #71717a; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.tc-body pre { margin: 4px 0 0; white-space: pre-wrap; word-break: break-word; font-size: 11.5px; color: #d4d4d8; }
.j-k { color: #fdba74; } .j-n { color: #93c5fd; } .j-b { color: #c4b5fd; }
.tc-run { padding: 12px; color: var(--mut); display: flex; gap: 8px; align-items: center; }

.outcome { border-radius: 12px; border: 1px solid color-mix(in srgb, var(--oc) 25%, #fff); background: var(--ocb); padding: 14px 16px; }
.oc-head { display: flex; align-items: center; gap: 12px; }
.oc-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--oc); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.oc-head b { display: block; font-size: 15px; color: var(--oc); }
.oc-head small { color: var(--ink-2); }
.buried { display: flex; gap: 10px; margin-top: 12px; padding: 10px 12px; background: #fff; border: 1px solid #fed7aa; border-radius: 9px; }
.buried .ic { color: #ea580c; margin-top: 2px; }
.buried p { color: var(--ink-2); font-size: 13px; }
.oc-reply { margin-top: 12px; background: #fff; border-radius: 9px; padding: 10px 12px; border: 1px solid var(--line); }
.oc-reply small { color: var(--mut); font-weight: 600; }
.oc-reply pre { font-family: var(--font); font-size: 13px; white-space: pre-wrap; margin: 6px 0 0; color: var(--ink-2); max-height: 220px; overflow: auto; }
.oc-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* ---------- simulator modal ---------- */
.modal-card.sim { width: min(1180px, 96vw); max-height: 92vh; display: flex; flex-direction: column; padding: 0; }
.sim-head { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.sim-head h3 { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.sim-head h3 .ic { color: var(--or); }
.sim-head small { color: var(--mut); }
.sim-body { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); overflow: hidden; flex: 1; min-height: 0; }
.sim-left { padding: 18px 20px; border-right: 1px solid var(--line); overflow-y: auto; display: flex; flex-direction: column; gap: 14px; background: #fafafa; }
.sim-right { padding: 18px 22px; overflow-y: auto; position: relative; }
.scen-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.scen { text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 9px 11px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; min-height: 48px; border-left: 3px solid #d4d4d8; }
.scen b { font-size: 13px; }
.scen small { color: var(--mut); font-size: 11.5px; }
.scen.tone-pass { border-left-color: var(--pass); } .scen.tone-stop { border-left-color: var(--stop); } .scen.tone-flag { border-left-color: var(--flag); } .scen.tone-muted { border-left-color: #a1a1aa; }
.scen.on { border-color: var(--or); background: var(--or-soft); box-shadow: 0 0 0 1px var(--or); }
.mail { background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; transition: transform .5s, opacity .5s; }
.mail.form, .mail label { gap: 5px; }
.mail label { display: flex; flex-direction: column; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.mail-h { display: grid; grid-template-columns: 58px 1fr; gap: 8px; font-size: 13px; }
.mail-h span { color: var(--mut); }
.mail-h b { font-weight: 500; overflow-wrap: anywhere; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mail-h .att { color: #b91c1c; }
.mail-h .att .ic { width: 14px; }
.mail-b { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line-2); color: var(--ink-2); overflow-wrap: anywhere; }
.flying .mail { transform: translateX(14px); opacity: .55; }
.done .mail { transform: none; opacity: 1; }
.tk-side .tc-body { grid-template-columns: minmax(0, 1fr); }
.tk-side .tc-body > div + div { border-left: 0; border-top: 1px solid #27272a; }
.pipe-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.sim-clock { font-family: var(--mono); font-size: 12px; color: var(--mut); background: var(--muted-bg); padding: 3px 9px; border-radius: 7px; }
.envelope { position: absolute; left: -20px; top: 40px; width: 40px; height: 40px; border-radius: 12px; background: var(--or); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; z-index: 3; }
.flying .envelope { animation: fly 1s ease-out; }
@keyframes fly { 0% { opacity: 0; transform: translate(-60px, 0) scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(30px, 20px) scale(.4); } }
.trace.live .stage { animation: none; }
.trace.live .stage.idle { opacity: .55; }
.thinking { background: linear-gradient(90deg, #a1a1aa 30%, var(--or) 50%, #a1a1aa 70%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 1.1s linear infinite; font-weight: 500; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.reveal { animation: reveal .45s ease-out both; }
@keyframes reveal { from { opacity: 0; transform: translateY(6px); } }
.bang .st-node { animation: bang .5s; }
@keyframes bang { 30% { transform: scale(1.25); } }
.sim-left .btn.big { width: 100%; }

/* ---------- KB / gaps ---------- */
.empty-kb { text-align: center; padding: 36px 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.empty-kb > .ic { width: 36px; height: 36px; color: var(--or); }
.suggest { list-style: none; margin: 10px 0 0; padding: 0; width: 100%; max-width: 560px; text-align: left; }
.suggest li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-2); }
.suggest li span { display: flex; gap: 8px; align-items: center; }
.suggest .ic { width: 15px; color: var(--or); }
.gap-intro { max-width: 720px; }
.gaps { display: flex; flex-direction: column; gap: 12px; }
.gap { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.gap-n { text-align: center; background: var(--or-soft); border-radius: 11px; padding: 12px 6px; }
.gap-n b { display: block; font-size: 28px; line-height: 1; color: var(--or-ink); }
.gap-n small { color: var(--or-ink); }
.gap-m h3 { margin-bottom: 4px; }
.gap-m ul { margin: 8px 0 0; padding: 0; list-style: none; color: var(--mut); font-size: 13px; font-style: italic; }
.gap-a { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }

/* ---------- tools ---------- */
.conn-h { display: flex; align-items: center; gap: 12px; min-width: 0; }
.conn-h > div { min-width: 0; }
.conn-h small { overflow-wrap: anywhere; }
.conn-ic { width: 38px; height: 38px; border-radius: 10px; background: #111114; color: var(--or-2); display: flex; align-items: center; justify-content: center; flex: none; }
.conn-r { display: flex; align-items: center; gap: 6px; }
.rate { flex-direction: row !important; align-items: center; gap: 6px; font-size: 13px; color: var(--mut); white-space: nowrap; display: flex; }
.rate input { width: 76px; }
.disc-steps { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.ds { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mut); }
.ds.ok { color: #15803d; }
.ds .ic { width: 15px; }
.disc-list { list-style: none; margin: 10px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; }
.disc-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--line-2); }
.disc-list li:first-child { border-top: 0; }
.disc-list li > span:first-child { min-width: 0; }
.disc-list b, .disc-list small { display: block; overflow-wrap: anywhere; }
.disc-list small { color: var(--mut); }
.disc-list select { width: auto; }
.by-ai { display: inline-flex; align-items: center; gap: 5px; color: var(--or-ink); font-weight: 600; }
.by-ai .ic { width: 14px; }
.audit td { font-size: 13px; }

/* ---------- rules ---------- */
.auto-list { list-style: none; margin: 0; padding: 0; }
.auto-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-2); flex-wrap: wrap; }
.auto-list li:first-child { border-top: 0; }
.auto-list li > span { font-weight: 600; }
.auto-list.compact li { padding: 7px 0; }
.big-num { font-size: 22px; color: var(--or-ink); }
.slider-l { display: grid; grid-template-columns: 70px 1fr 70px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--mut); margin-bottom: 6px; }
.slider-l span:last-child { text-align: right; }
.tone-prev { margin-top: 10px; background: #fafafa; border-radius: 9px; padding: 10px 12px; border: 1px solid var(--line-2); }
.tone-prev small { color: var(--mut); font-weight: 600; }
.tone-prev p { font-size: 13px; color: var(--ink-2); margin-top: 3px; }
.hard { list-style: none; margin: 0; padding: 0; }
.hard li { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line-2); }
.hard li:first-child { border-top: 0; }

/* ---------- onboarding ---------- */
.wsteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.wsteps li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; color: var(--mut); min-width: 0; }
.wsteps li b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsteps li > span { width: 26px; height: 26px; border-radius: 50%; background: var(--muted-bg); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex: none; }
.wsteps li > span .ic { width: 14px; }
.wsteps li.on { border-color: var(--or); color: var(--ink); }
.wsteps li.on > span { background: var(--or); color: #fff; }
.wsteps li.done > span { background: var(--pass); color: #fff; }
.wiz { display: flex; flex-direction: column; gap: 18px; }
.wiz-foot { display: flex; gap: 8px; border-top: 1px solid var(--line-2); padding-top: 14px; flex-wrap: wrap; }
.dns .card-h { margin-bottom: 8px; }
.dns .tbl-wrap { margin: 0; border: 1px solid var(--line); border-radius: 10px; }
.persona-prev { background: #fafafa; border-radius: 11px; padding: 14px; border: 1px solid var(--line-2); }
.persona-prev small { color: var(--mut); font-weight: 600; }
.persona-prev .msg { background: #fff; }
.presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.preset { text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 11px; padding: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.preset small { color: var(--mut); }
.preset.on { border-color: var(--or); background: var(--or-soft); box-shadow: 0 0 0 1px var(--or); }
.summary { background: #fafafa; border: 1px solid var(--line-2); border-radius: 11px; padding: 14px; }
.summary h4 { margin-bottom: 6px; }
.summary ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.summary li { display: flex; gap: 8px; align-items: center; overflow-wrap: anywhere; }
.summary .ic { width: 15px; color: var(--or); }
.chip-c { flex-direction: row !important; align-items: center; gap: 6px !important; border: 1px solid var(--line); border-radius: 99px; padding: 0 12px; height: 34px; font-weight: 500 !important; cursor: pointer; }

/* ---------- modal / toast ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(16,16,20,.45); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .18s; }
.modal-bg.in { opacity: 1; }
.modal-card { background: #fff; border-radius: 14px; width: min(560px, 100%); max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 50px rgba(0,0,0,.25); transform: translateY(8px); transition: transform .2s; }
.modal-bg.in .modal-card { transform: none; }
.modal-card.sm { width: min(440px, 100%); }
.modal-card.lg { width: min(720px, 100%); }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 20px 0; }
.modal-head h3 { font-size: 16px; display: flex; align-items: center; gap: 7px; }
.modal-body { padding: 14px 20px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--line-2); }
body.modal-open { overflow: hidden; }
.ts-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ts-list button { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; border: 1px solid transparent; background: none; border-radius: 10px; padding: 10px 12px; cursor: pointer; min-height: 52px; }
.ts-list button:hover { background: #fafafa; }
.ts-list button.on { border-color: var(--or); background: var(--or-soft); }
.ts-list button > span:nth-child(2) { flex: 1; min-width: 0; }
.ts-list b, .ts-list small { display: block; }
.ts-list small { color: var(--mut); }
.ts-list em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--or-ink); background: var(--or-soft); padding: 0 8px; border-radius: 99px; }
.ts-list .tdot { width: 14px; height: 14px; border-radius: 4px; }
.more-list { display: flex; flex-direction: column; }
.more-item { display: flex; align-items: center; gap: 12px; padding: 12px 6px; border-top: 1px solid var(--line-2); min-height: 52px; font-weight: 600; }
.more-item:first-child { border-top: 0; }
.more-item span { flex: 1; }
.more-item .ic:first-child { color: var(--or); }
.more-item .ic:last-child { color: var(--mut); width: 16px; }
#toasts { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: max-content; max-width: 92vw; }
.toast { display: flex; align-items: center; gap: 9px; background: #18181b; color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 13.5px; box-shadow: 0 10px 30px rgba(0,0,0,.25); opacity: 0; transform: translateY(8px); transition: all .25s; max-width: 92vw; }
.toast.in { opacity: 1; transform: none; }
.toast .ic { width: 16px; color: #4ade80; }
.toast.err .ic { color: #f87171; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .pipe-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 10px; }
  .ps:nth-child(4)::after { display: none; }
  .tk-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #sidebar { width: 216px; }
}
@media (max-width: 960px) {
  .grid-2, .grid-2.rules, .tk-grid { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  body { font-size: 15px; }
  #sidebar { display: none; }
  #topbar { padding: 0 14px; height: 56px; gap: 10px; }
  .tb-logo { display: flex; }
  #tbTitle, .tb-ai { display: none; }
  .tswitch { max-width: 62vw; height: 42px; }
  #view { padding: 16px 14px calc(96px + env(safe-area-inset-bottom)); gap: 14px; }
  #tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; font-size: 11px; font-weight: 600; color: var(--mut); border: 0; background: none; position: relative; cursor: pointer; padding: 0; }
  .tab .ic { width: 22px; height: 22px; }
  .tab.active { color: var(--or-ink); }
  .tab .badge { position: absolute; top: 2px; left: calc(50% + 6px); font-size: 10px; padding: 0 5px; }
  .tab.sim { color: #fff; }
  .tab.sim .ic { width: 46px; height: 46px; padding: 12px; border-radius: 15px; background: var(--or); margin-top: -22px; box-shadow: 0 6px 16px rgba(240,90,34,.45); border: 3px solid #fff; box-sizing: border-box; }
  .tab.sim span { color: var(--or-ink); }
  h2 { font-size: 20px; }
  .card { padding: 15px; }
  .btn { height: 44px; }
  .btn.sm { height: 40px; }
  .icon-btn { width: 44px; height: 44px; }
  .icon-btn.sm { width: 40px; height: 40px; }
  input, select, textarea { min-height: 44px; font-size: 16px; }
  .chip { height: 40px; }
  .seg button { height: 38px; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1; }
  .hero { padding: 18px 16px; }
  .hero h2 { font-size: 18px; }
  .hero-top .btn { width: 100%; }
  .pipe-strip { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ps { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; margin: 0 0 8px; padding: 9px 12px; }
  .ps::after { display: none !important; }
  .ps-ic { grid-row: span 2; margin: 0; align-self: center; }
  .ps-name { grid-column: 2; }
  .ps b { grid-column: 3; grid-row: 1 / span 2; align-self: center; font-size: 18px; }
  .ps small { grid-column: 2; grid-row: 2; }
  .kpis { gap: 10px; }
  .kpi b { font-size: 20px; }
  .hbars li { grid-template-columns: 110px 1fr 38px; }
  .filters .search { min-width: 100%; }
  .filters select { flex: 1 1 calc(50% - 4px); }
  .trow > a { grid-template-columns: auto minmax(0, 1fr); padding: 12px 14px; gap: 10px; }
  .trow.draft > a { padding-right: 14px; padding-bottom: 60px; }
  .tr-approve { left: 54px; right: 14px; bottom: 12px; }
  .tr-r { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
  .tk-bar label { flex: 1 1 calc(50% - 6px); }
  .tk-bar-btns { margin: 0; width: 100%; }
  .tk-bar-btns .btn { flex: 1; }
  .draft-actions .btn { flex: 1 1 auto; }
  .draft-actions .btn.primary { flex-basis: 100%; }
  .tc-body { grid-template-columns: minmax(0, 1fr); }
  .tc-body > div + div { border-left: 0; border-top: 1px solid #27272a; }
  .st-det li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .row2, .grid-2.tight, .presets { grid-template-columns: minmax(0, 1fr); }
  .wsteps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .wsteps li { flex-direction: column; padding: 8px 4px; gap: 4px; text-align: center; }
  .wsteps li b { font-size: 11px; white-space: normal; }
  .gap { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  .gap-a { grid-column: 1 / -1; }
  .gap-n b { font-size: 22px; }
  .slider-l { grid-template-columns: 58px 1fr 58px; }
  /* tables -> stacked cards */
  .tbl-wrap { margin: 0 -15px -15px; overflow: visible; }
  .dns .tbl-wrap { margin: 0; border: 0; }
  .tbl.cardify thead { display: none; }
  .tbl.cardify, .tbl.cardify tbody, .tbl.cardify tr, .tbl.cardify td { display: block; width: 100%; }
  .tbl.cardify tr { padding: 12px 15px; border-top: 1px solid var(--line); position: relative; }
  .tbl.cardify td { padding: 3px 0; border: 0; display: flex; gap: 12px; align-items: center; min-width: 0; }
  .tbl.cardify td[data-l]::before { content: attr(data-l); flex: 0 0 92px; font-size: 11.5px; font-weight: 600; color: var(--mut); text-transform: uppercase; letter-spacing: .03em; }
  .tbl.cardify td[data-l] > * { min-width: 0; }
  .tbl.cardify td.act { position: absolute; top: 8px; right: 8px; width: auto; padding: 0; }
  .tbl.cardify td[data-l="Article"], .tbl.cardify td[data-l="Tool"], .tbl.cardify td[data-l="Name"], .tbl.cardify td[data-l="Product"] { display: block; padding-right: 48px; }
  .tbl.cardify td[data-l="Article"]::before, .tbl.cardify td[data-l="Tool"]::before, .tbl.cardify td[data-l="Name"]::before, .tbl.cardify td[data-l="Product"]::before { display: none; }
  .tbl.cardify.tools-t td.act { position: static; padding-top: 6px; width: 100%; }
  .tbl.cardify.tools-t td.act .btn { width: 100%; }
  .tbl.cardify.tools-t td[data-l="Tool"] { padding-right: 0; }
  .tbl.cardify td[data-l="Permission"] { display: block; }
  .tbl.cardify td[data-l="Permission"]::before { display: block; margin-bottom: 4px; }
  .seg { display: flex; width: 100%; }
  .seg button { flex: 1; padding: 0 4px; font-size: 12px; white-space: normal; line-height: 1.15; }
  .auto-list li { flex-direction: column; align-items: stretch; gap: 6px; }
  .auto-list.compact li { flex-direction: row; align-items: center; }
  .clamp { max-width: 100%; }
  .tbl code { font-size: 11px; }
  /* modals -> full screen */
  .modal-bg { padding: 0; align-items: stretch; }
  .modal-card, .modal-card.sm, .modal-card.lg { width: 100%; max-height: none; height: 100%; border-radius: 0; display: flex; flex-direction: column; }
  .modal-card .modal-body { flex: 1; overflow-y: auto; }
  .modal-card.sheet { height: auto; margin-top: auto; border-radius: 16px 16px 0 0; max-height: 85vh; padding-bottom: env(safe-area-inset-bottom); }
  .modal-bg:has(.sheet) { align-items: flex-end; }
  .modal-foot { position: sticky; bottom: 0; background: #fff; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .modal-foot .btn { flex: 1; }
  .modal-card.sim { width: 100%; max-height: none; }
  .sim-body { grid-template-columns: minmax(0, 1fr); overflow-y: auto; display: block; }
  .sim-left { border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  .sim-right { overflow: visible; padding: 16px; }
  .scen-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sim-head small { display: block; }
  #toasts { bottom: calc(84px + env(safe-area-inset-bottom)); }
}