:root {
  --navy: #020617;
  --navy-soft: #0f172a;
  --slate-950: #0f172a;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50: #f8fafc;
  --indigo: #4f46e5;
  --indigo-dark: #4338ca;
  --indigo-soft: #eef2ff;
  --emerald: #10b981;
  --amber: #f59e0b;
  --rose: #e11d48;
  --white: #ffffff;
  font-family: Inter, "Noto Sans TC", "PingFang HK", "Microsoft JhengHei", ui-sans-serif, system-ui, sans-serif;
  color: var(--slate-800);
  background: var(--slate-50);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--slate-50); }
@view-transition { navigation: auto; }
.sidebar { view-transition-name: app-sidebar; }
.topbar { view-transition-name: app-topbar; }
.content { view-transition-name: page-content; animation: page-content-enter .28s cubic-bezier(.22,.8,.28,1) both; }
@keyframes page-content-enter { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes page-content-old { to { opacity: 0; transform: translateX(-8px); filter: blur(1px); } }
@keyframes page-content-new { from { opacity: 0; transform: translateX(12px); filter: blur(1px); } }
::view-transition-group(app-sidebar), ::view-transition-group(app-topbar) { animation-duration: .22s; }
::view-transition-old(app-sidebar), ::view-transition-new(app-sidebar), ::view-transition-old(app-topbar), ::view-transition-new(app-topbar) { animation: none; mix-blend-mode: normal; }
::view-transition-old(page-content) { animation: page-content-old .18s ease-in both; mix-blend-mode: normal; }
::view-transition-new(page-content) { animation: page-content-new .3s cubic-bezier(.22,.8,.28,1) both; mix-blend-mode: normal; }
@supports (view-transition-name: page-content) { .content { animation: none; } }
button, input { font: inherit; }
button { border: 0; cursor: pointer; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--slate-100); }
::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 999px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 256px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 0; color: var(--slate-300); background: var(--navy); border-right: 1px solid #172033; }
.brand-lockup { min-height: 88px; display: flex; align-items: center; gap: 12px; padding: 20px 20px; border-bottom: 1px solid #1e293b; }
.brand-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(145deg, #6366f1, var(--indigo)); box-shadow: 0 10px 24px #4f46e54d; font-size: 26px; font-weight: 700; transform: rotate(-20deg); }
.brand-mark { color: #fff; font-size: .88rem; font-weight: 800; letter-spacing: -.01em; }
.brand-version { margin: 4px 0 0; color: #818cf8; font-size: .62rem; font-weight: 800; letter-spacing: .1em; }
.company-name { display: flex; align-items: center; gap: 8px; margin: 16px 20px 0; padding: 10px 12px; border: 1px solid #1e293b; border-radius: 10px; color: var(--slate-300); background: #0f172acc; font-size: .74rem; font-weight: 600; }
.company-name span { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 4px #10b98117; }
.sidebar nav { display: grid; gap: 5px; padding: 16px; overflow-y: auto; }
.sidebar a { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 11px; color: var(--slate-400); text-decoration: none; font-size: .79rem; font-weight: 600; transition: color .18s ease, background-color .18s ease, transform .16s ease, box-shadow .18s ease; }
.sidebar a:hover { color: #fff; background: #111c31; }
.sidebar a:active { transform: scale(.975); }
.sidebar a.active { color: #fff; background: linear-gradient(135deg, #5b50ea, var(--indigo)); box-shadow: 0 8px 22px #4f46e52b; }
.nav-icon { width: 20px; color: currentColor; text-align: center; font-size: 1.05rem; }
.sidebar-footer { margin-top: auto; padding: 16px; border-top: 1px solid #111c31; }
.quiet-button { width: 100%; padding: 10px 8px; color: var(--slate-400); background: transparent; text-align: left; font-size: .74rem; font-weight: 600; }
.quiet-button:hover { color: #fff; }
.company-switcher { display: grid; gap: 6px; margin: 14px 16px 0; padding: 10px; border: 1px solid #1e293b; border-radius: 11px; background: #0f172a; }
.company-switcher label { color: var(--slate-500); font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.company-switcher select { width: 100%; padding: 7px 8px; border: 0; border-radius: 7px; color: #fff; background: #020617; font-size: .72rem; font-weight: 700; }
.is-company-switching .workspace { opacity: .58; transition: opacity .15s ease; pointer-events: none; }

.workspace { min-width: 0; min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 20; min-height: 65px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 28px; background: #ffffffed; border-bottom: 1px solid var(--slate-200); backdrop-filter: blur(12px); }
.topbar > div:first-child { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar h1 { margin: 0; color: var(--slate-800); font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.live-badge { padding: 4px 8px; border: 1px solid #c7d2fe; border-radius: 999px; color: var(--indigo); background: var(--indigo-soft); font-size: .62rem; font-weight: 700; }
.status-chip { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 9px; color: var(--slate-500); background: var(--slate-100); font-size: .72rem; font-weight: 600; }
.status-chip span { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); }
.content { max-width: 1560px; margin: 0 auto; padding: 26px 28px 64px; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin: 0 0 22px; }
.page-header h2 { margin: 0; color: var(--slate-800); font-size: clamp(1.55rem, 2.6vw, 2.15rem); line-height: 1.15; letter-spacing: -.035em; }
.page-header .muted { margin: 7px 0 0; }
.eyebrow { margin: 0 0 7px; color: var(--indigo); font-size: .65rem; font-weight: 800; letter-spacing: .14em; }
.muted { color: var(--slate-500); font-size: .8rem; }
.company-chip { padding: 8px 11px; border: 1px solid var(--slate-200); border-radius: 9px; color: var(--slate-500); background: #fff; font-size: .7rem; font-weight: 700; box-shadow: 0 1px 2px #0f172a08; }
.alert { margin: 0 0 16px; padding: 11px 13px; border: 1px solid #fecdd3; border-radius: 10px; color: #9f1239; background: #fff1f2; font-size: .78rem; }
.alert.success { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }
.text-link { color: var(--indigo); font-size: .7rem; font-weight: 700; text-decoration: none; }
.page-actions { display: flex; align-items: center; gap: 9px; }
.primary-action { padding: 9px 13px; border: 1px solid var(--indigo); border-radius: 9px; color: #fff; background: var(--indigo); font-size: .7rem; font-weight: 800; cursor: pointer; }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.stats-grid article { position: relative; min-height: 126px; display: flex; flex-direction: column; justify-content: center; padding: 19px 20px; border: 1px solid var(--slate-200); border-radius: 16px; background: #fff; box-shadow: 0 4px 16px #0f172a08; overflow: hidden; }
.stats-grid article::after { content: ""; position: absolute; right: 18px; top: 18px; width: 36px; height: 36px; border-radius: 11px; background: var(--indigo-soft); }
.stats-grid article:nth-child(2)::after { background: #fff7ed; }
.stats-grid article:nth-child(3)::after { background: #ecfdf5; }
.stats-grid article:nth-child(4)::after { background: #f0f9ff; }
.stats-grid span { color: var(--slate-400); font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.stats-grid strong { margin: 8px 0 4px; color: var(--slate-800); font-size: 1.65rem; line-height: 1; }
.stats-grid small { color: var(--slate-400); font-size: .66rem; }

.panel { margin-top: 18px; padding: 0; border: 1px solid var(--slate-200); border-radius: 16px; background: #fff; box-shadow: 0 3px 14px #0f172a07; overflow: hidden; }
.panel-heading { min-height: 73px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 16px 19px; border-bottom: 1px solid var(--slate-100); }
.panel-heading .eyebrow { margin-bottom: 4px; }
.panel-heading h2 { margin: 0; color: var(--slate-800); font-size: .98rem; font-weight: 800; }
.panel-heading > span { color: var(--slate-400); font-size: .68rem; font-weight: 600; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .76rem; }
th { padding: 11px 16px; color: var(--slate-400); background: var(--slate-50); border-bottom: 1px solid var(--slate-200); text-align: left; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
td { padding: 13px 16px; color: var(--slate-700); border-bottom: 1px solid var(--slate-100); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fafbff; }
.pill { display: inline-flex; align-items: center; padding: 4px 8px; border: 1px solid #c7d2fe; border-radius: 999px; color: var(--indigo-dark); background: var(--indigo-soft); font-size: .6rem; font-weight: 800; }
.pill.warning { color: #9a3412; background: #fff7ed; border-color: #fed7aa; }
.split-grid { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(420px, 1.2fr); gap: 18px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .65fr); gap: 18px; }
.priority-list { display: grid; }
.priority-list a { display: grid; gap: 4px; padding: 16px 18px; border-bottom: 1px solid var(--slate-100); color: var(--slate-800); text-decoration: none; }
.priority-list a:last-child { border-bottom: 0; }
.priority-list a:hover { background: var(--slate-50); }
.priority-list strong { font-size: .76rem; }
.priority-list span { color: var(--slate-400); font-size: .67rem; }
.alert-ledger { border-color: #fed7aa; box-shadow: 0 6px 22px #f59e0b12; }
.alert-ledger .panel-heading { background: #fffaf2; }
.alert-list { display: grid; }
.alert-list article { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 18px; border-bottom: 1px solid var(--slate-100); }
.alert-list article:last-child { border-bottom: 0; }
.alert-list article > div { min-width: 0; }
.alert-list strong { margin-left: 8px; color: var(--slate-800); font-size: .78rem; }
.alert-list p { margin: 6px 0 4px; color: var(--slate-500); font-size: .7rem; line-height: 1.5; }
.alert-list small { color: var(--slate-400); font-size: .61rem; }
.alert-severity { display: inline-flex; padding: 3px 6px; border-radius: 5px; color: #9a3412; background: #ffedd5; font-size: .55rem; font-weight: 900; }
.alert-severity.critical { color: #9f1239; background: #ffe4e6; }
.alert-severity.medium { color: #854d0e; background: #fef9c3; }
.runner-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 18px; padding: 14px 17px; border: 1px solid var(--slate-200); border-radius: 15px; background: #fff; box-shadow: 0 3px 14px #0f172a07; }
.runner-strip > div:first-child { flex: 0 0 auto; }
.runner-strip .eyebrow { margin-bottom: 3px; font-size: .55rem; }
.runner-strip > div:first-child strong { color: var(--slate-700); font-size: .75rem; }
.runner-list { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.runner-list article { display: flex; align-items: center; gap: 8px; min-width: 170px; padding: 8px 10px; border-radius: 10px; background: var(--slate-50); }
.runner-list i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; }
.runner-list i.online { background: var(--emerald); box-shadow: 0 0 0 4px #10b98118; }
.runner-list i.offline { background: var(--rose); box-shadow: 0 0 0 4px #e11d4815; }
.runner-list strong { display: block; color: var(--slate-700); font-size: .67rem; }
.runner-list small { display: block; margin-top: 2px; color: var(--slate-400); font-size: .56rem; }
.card-list, .candidate-list { display: grid; }
.person-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; margin: 0; padding: 13px 18px; border-bottom: 1px solid var(--slate-100); }
.person-card:last-child { border-bottom: 0; }
.person-card strong { color: var(--slate-800); font-size: .78rem; }
.person-card small { display: block; margin-top: 3px; color: var(--slate-400); font-size: .67rem; }
.avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--slate-600); background: var(--slate-100); font-size: .78rem; font-weight: 800; }
.candidate { padding: 16px 18px; border-bottom: 1px solid var(--slate-100); }
.candidate:last-child { border-bottom: 0; }
.candidate h3 { margin: 8px 0 5px; color: var(--slate-800); font-size: .82rem; }
.candidate p { margin: 0; color: var(--slate-500); font-size: .74rem; line-height: 1.6; }
.candidate-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.candidate-meta span { padding: 3px 6px; border-radius: 5px; color: var(--slate-500); background: var(--slate-100); font-size: .56rem; font-weight: 700; }
.inline-actions, .publish-form { display: flex; align-items: center; gap: 7px; margin-top: 11px; }
.inline-actions button, .publish-form button, .stack-form button { padding: 8px 11px; border-radius: 8px; color: #fff; background: var(--indigo); font-size: .7rem; font-weight: 700; box-shadow: 0 4px 10px #4f46e522; }
.inline-actions button:hover, .publish-form button:hover, .stack-form button:hover { background: var(--indigo-dark); }
.inline-actions .secondary { color: var(--slate-600); background: var(--slate-100); box-shadow: none; }
.publish-form input, input { width: 100%; padding: 10px 11px; border: 1px solid var(--slate-200); border-radius: 9px; color: var(--slate-800); background: #fff; }
input:focus { outline: 2px solid #a5b4fc; border-color: #818cf8; }
.checkbox { display: flex; align-items: center; gap: 5px; white-space: nowrap; color: var(--slate-500); font-size: .67rem; }
.checkbox input { width: auto; }
.empty { padding: 26px 18px !important; color: var(--slate-400); text-align: center; font-size: .73rem; }
.search-form { display: flex; align-items: center; gap: 7px; min-width: min(360px, 100%); }
.search-form button, .admin-form button { padding: 10px 13px; border-radius: 9px; color: #fff; background: var(--indigo); font-size: .7rem; font-weight: 700; white-space: nowrap; }
.management-grid { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 18px; align-items: start; }
.detail-grid, .operations-grid, .compare-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; align-items: start; }
.conversation-launcher { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }
.conversation-launcher a { position: relative; display: grid; gap: 5px; padding: 16px 18px; border: 1px solid var(--slate-200); border-radius: 14px; color: var(--slate-700); background: #fff; text-decoration: none; box-shadow: 0 3px 14px #0f172a07; transition: transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.conversation-launcher a::after { content: "→"; position: absolute; right: 17px; top: 17px; color: var(--indigo); font-weight: 900; }
.conversation-launcher a:hover { transform: translateY(-2px); border-color: #a5b4fc; box-shadow: 0 8px 24px #4f46e514; }
.conversation-launcher span { color: var(--indigo); font-size: .61rem; font-weight: 900; letter-spacing: .08em; }
.conversation-launcher strong { padding-right: 24px; font-size: .79rem; }
.conversation-launcher small { color: var(--slate-400); font-size: .63rem; }
.conversation-tabs { display: flex; gap: 6px; margin-bottom: 12px; padding: 6px; border: 1px solid var(--slate-200); border-radius: 13px; background: #fff; }
.conversation-tabs a { flex: 1; padding: 10px 12px; border-radius: 8px; color: var(--slate-500); text-align: center; text-decoration: none; font-size: .71rem; font-weight: 800; }
.conversation-tabs a.active { color: #fff; background: var(--indigo); box-shadow: 0 4px 12px #4f46e52c; }
.conversation-tabs span { display: inline-grid; min-width: 20px; margin-left: 4px; padding: 2px 5px; border-radius: 999px; color: inherit; background: #ffffff20; }
.chat-shell { max-width: 940px; margin: 0 auto; border: 1px solid var(--slate-200); border-radius: 18px; background: #f5f7fb; box-shadow: 0 12px 34px #0f172a12; overflow: hidden; }
.chat-top { display: flex; align-items: center; gap: 11px; min-height: 68px; padding: 12px 17px; border-bottom: 1px solid var(--slate-200); background: #fff; }
.chat-avatar { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg,var(--indigo),#7c3aed); font-size: .75rem; font-weight: 900; }
.chat-top strong,.chat-top small { display: block; }
.chat-top strong { color: var(--slate-800); font-size: .79rem; }
.chat-top small { margin-top: 4px; color: var(--slate-400); font-size: .62rem; }
.chat-stream { min-height: 480px; display: flex; flex-direction: column; gap: 9px; padding: 18px; background: radial-gradient(circle at 15% 5%,#ffffff 0,#f5f7fb 45%,#eef2f7 100%); }
.chat-date { align-self: center; margin: 6px 0; padding: 4px 8px; border-radius: 999px; color: var(--slate-400); background: #fff; font-size: .58rem; box-shadow: 0 1px 4px #0f172a0d; }
.chat-message { align-self: flex-start; max-width: min(72%,620px); padding: 9px 11px 7px; border: 1px solid var(--slate-200); border-radius: 4px 13px 13px 13px; color: var(--slate-700); background: #fff; box-shadow: 0 2px 8px #0f172a0a; }
.chat-message.outgoing { align-self: flex-end; border-color: #c7d2fe; border-radius: 13px 4px 13px 13px; background: #eef2ff; }
.chat-message.vendor { border-left: 3px solid #f59e0b; }
.chat-message.system { align-self: center; max-width: 80%; color: var(--slate-500); background: #e2e8f0; border: 0; border-radius: 9px; text-align: center; }
.message-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.message-meta strong { color: var(--indigo); font-size: .61rem; }
.message-meta span,.chat-message > small { color: var(--slate-400); font-size: .54rem; }
.chat-message p { margin: 5px 0 3px; font-size: .76rem; line-height: 1.6; white-space: pre-wrap; }
.chat-message > small { display: block; text-align: right; text-transform: uppercase; }
.chat-empty { margin: auto; padding: 40px 20px; color: var(--slate-400); text-align: center; }
.chat-empty strong { color: var(--slate-600); font-size: .82rem; }
.chat-empty p { font-size: .7rem; }
.chat-readonly { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 17px; border-top: 1px solid var(--slate-200); background: #fff; }
.chat-readonly span { padding: 5px 8px; border-radius: 6px; color: var(--slate-500); background: var(--slate-100); font-size: .6rem; font-weight: 800; }
.chat-readonly p { margin: 0; color: var(--slate-400); font-size: .62rem; }
.settings-tabs { display: flex; gap: 7px; margin-bottom: 18px; padding: 6px; border: 1px solid var(--slate-200); border-radius: 13px; background: #fff; }
.settings-tabs a { flex: 1; padding: 11px 14px; border-radius: 9px; color: var(--slate-500); text-align: center; text-decoration: none; font-size: .72rem; font-weight: 800; }
.settings-tabs a.active { color: #fff; background: var(--indigo); box-shadow: 0 5px 14px #4f46e536; }
.settings-tabs span { margin-left: 5px; padding: 2px 6px; border-radius: 999px; color: inherit; background: #ffffff24; }
.template-control-panel { overflow: visible; }
.template-control-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px; }
.template-control-heading h2 { margin: 3px 0 5px; color: var(--slate-800); font-size: 1.05rem; }
.template-control-heading p:last-child { margin: 0; }
.primary-action { flex: 0 0 auto; padding: 10px 14px; border-radius: 9px; color: #fff; background: var(--indigo); font-size: .7rem; font-weight: 800; }
.template-audience-tabs { display: flex; gap: 6px; padding: 0 20px 15px; overflow-x: auto; }
.template-audience-tabs button { flex: 0 0 auto; padding: 7px 11px; border: 1px solid var(--slate-200); border-radius: 999px; color: var(--slate-500); background: #fff; font-size: .63rem; font-weight: 800; }
.template-audience-tabs button.active { color: #fff; border-color: var(--indigo); background: var(--indigo); }
.template-filter-bar { display: grid; grid-template-columns: minmax(220px,1.7fr) repeat(3,minmax(130px,.8fr)); gap: 10px; padding: 16px 20px; border-top: 1px solid var(--slate-100); background: var(--slate-50); }
.template-filter-bar label { min-width: 0; display: grid; gap: 6px; color: var(--slate-500); font-size: .62rem; font-weight: 800; }
.template-filter-bar input,.template-filter-bar select { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid var(--slate-200); border-radius: 8px; color: var(--slate-700); background: #fff; font-size: .68rem; }
.template-library-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 11px 20px; border-top: 1px solid var(--slate-100); color: var(--slate-400); font-size: .62rem; }
.template-library-summary span:last-child { margin-left: auto; color: var(--indigo); font-weight: 800; }
.template-library-summary strong { color: var(--slate-700); }
.variable-groups { display: grid; gap: 12px; }
.variable-groups.compact section { display: grid; grid-template-columns: 62px 1fr; gap: 10px; align-items: start; }
.variable-groups strong { padding-top: 8px; color: var(--slate-500); font-size: .64rem; }
.variable-groups section > div,.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.variable-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid #c7d2fe; border-radius: 7px; color: var(--indigo-dark); background: var(--indigo-soft); font-size: .58rem; font-weight: 700; cursor: pointer; transition: transform .15s ease,box-shadow .15s ease; }
.variable-chip code { font: 700 .54rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; opacity: .72; }
.variable-chip:hover { transform: translateY(-1px); box-shadow: 0 5px 12px #4f46e51d; }
.response-template-list { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
.response-card { grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 18px; padding: 16px 18px; }
.response-card.is-paused { border-style: dashed; background: var(--slate-50); }
.template-card-title { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.template-card-title h3 { font-size: .82rem; }
.template-card-title small { display: block; margin-top: 4px; }
.template-status { flex: 0 0 auto; padding: 4px 7px; border-radius: 999px; font-size: .56rem; font-weight: 900; }
.template-status.active { color: #047857; background: #ecfdf5; }
.template-status.paused { color: #92400e; background: #fffbeb; }
.template-status.draft { color: #475569; background: #e2e8f0; }
.template-rendered-content { display: grid; gap: 5px; margin-top: 11px; padding: 10px 12px; border: 1px solid var(--slate-100); border-radius: 9px; background: var(--slate-50); }
.template-rendered-content > span { color: var(--indigo); font-size: .56rem; font-weight: 900; text-transform: uppercase; }
.template-rendered-content p { margin: 0; color: var(--slate-700); font-size: .7rem; line-height: 1.65; white-space: pre-wrap; }
.template-meta-line { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; color: var(--slate-400); font-size: .6rem; }
.template-meta-line span:last-child { max-width: 500px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.template-toggle { justify-self: auto !important; flex: 0 0 auto; }
.danger-button,.success-button { padding: 7px 9px; border-radius: 8px; font-size: .62rem; font-weight: 800; cursor: pointer; }
.danger-button { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; }
.success-button { color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; }
.copy-button { width: 100%; padding: 7px 9px; border: 1px solid var(--slate-200); border-radius: 8px; color: var(--slate-600); background: #fff; font-size: .62rem; font-weight: 800; }
.selection-note { padding: 9px 10px; border-radius: 9px; color: var(--slate-500) !important; background: var(--slate-50); font-size: .68rem !important; }
.template-card-actions { display: grid; gap: 7px; margin: 0; padding: 0 0 0 16px; border-top: 0; border-left: 1px solid var(--slate-100); }
.edit-template-button { padding: 8px 11px; border: 1px solid #c7d2fe; border-radius: 8px; color: var(--indigo); background: var(--indigo-soft); font-size: .65rem; font-weight: 800; cursor: pointer; }
.template-dialog { width: min(860px,calc(100vw - 34px)); max-width: none; max-height: min(90vh,900px); padding: 0; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 30px 90px #0f172a55; overflow: hidden; }
.template-dialog::backdrop { background: #0f172aa8; backdrop-filter: blur(4px); }
.dialog-shell { max-height: min(90vh,900px); display: flex; flex-direction: column; }
.dialog-header { flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px 22px; border-bottom: 1px solid var(--slate-200); background: #fff; }
.dialog-header h2 { margin: 3px 0 0; color: var(--slate-800); font-size: 1.15rem; }
.dialog-header p:last-child { margin: 6px 0 0; color: var(--slate-400); font-size: .66rem; }
.dialog-close { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; border-radius: 9px; color: var(--slate-500); background: var(--slate-100); font-size: 1.35rem; line-height: 1; cursor: pointer; }
.dialog-form { min-height: 0; justify-self: stretch !important; overflow-y: auto; overscroll-behavior: contain; padding: 20px 22px 24px; }
.dialog-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dialog-field-grid label { display: grid; gap: 6px; color: var(--slate-600); font-size: .68rem; font-weight: 700; }
.variable-picker,.template-advanced { border: 1px solid var(--slate-200); border-radius: 10px; background: var(--slate-50); overflow: hidden; }
.variable-picker summary,.template-advanced summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; color: var(--slate-600); font-size: .67rem; font-weight: 800; cursor: pointer; }
.variable-picker summary small { color: var(--slate-400); font-size: .58rem; font-weight: 600; }
.variable-picker-body,.template-advanced > div { display: grid; gap: 12px; padding: 12px; border-top: 1px solid var(--slate-200); background: #fff; }
.variable-picker:not([open]) > .variable-picker-body,.template-advanced:not([open]) > div { display: none; }
.variable-search { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 9px; }
.variable-search input { padding: 8px 9px !important; }
.template-empty-state { padding: 42px 20px; border: 1px dashed var(--slate-300); border-radius: 14px; color: var(--slate-400); text-align: center; background: var(--slate-50); }
.template-empty-state strong { color: var(--slate-600); font-size: .78rem; }
.template-empty-state p { margin: 5px 0 0; font-size: .66rem; }
.template-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 0 4px; }
.template-pagination > button,.template-pagination [data-page-buttons] button { padding: 7px 10px; border: 1px solid var(--slate-200); border-radius: 8px; color: var(--slate-600); background: #fff; font-size: .62rem; font-weight: 800; }
.template-pagination [data-page-buttons] { display: flex; gap: 5px; }
.template-pagination [data-page-buttons] button.active { color: #fff; border-color: var(--indigo); background: var(--indigo); }
.template-pagination > span { color: var(--slate-400); font-size: .61rem; }
.template-pagination button:disabled { opacity: .4; }
.dialog-actions { position: sticky; bottom: -24px; display: flex; justify-content: flex-end; gap: 8px; margin: 4px -22px -24px; padding: 14px 22px; border-top: 1px solid var(--slate-200); background: #fffffff5; backdrop-filter: blur(8px); }
.secondary-button { color: var(--slate-600) !important; background: var(--slate-100) !important; }
body.dialog-open { overflow: hidden; }
.faq-dialog { width: min(1080px,calc(100vw - 36px)); max-height: min(92vh,820px); border-radius: 22px; }
.faq-dialog .dialog-shell { height: min(88vh,780px); max-height: min(88vh,780px); }
.faq-dialog-header { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0,1fr) auto 38px; align-items: center; gap: 18px; padding: 18px 20px; border-bottom: 1px solid var(--slate-200); background: #fff; }
.faq-dialog-title { min-width: 0; display: flex; align-items: center; gap: 12px; }
.faq-dialog-title .eyebrow { margin-bottom: 3px; font-size: .58rem; }
.faq-dialog-title h2 { margin: 0; color: var(--slate-800); font-size: 1.18rem; letter-spacing: -.025em; }
.faq-dialog-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; color: #fff; background: linear-gradient(145deg,#6366f1,var(--indigo)); box-shadow: 0 8px 20px #4f46e52c; font-size: 1.1rem; font-weight: 900; }
.faq-stable-key { max-width: 440px; margin: 4px 0 0; overflow: hidden; color: var(--slate-400); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.faq-version-flow { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid #c7d2fe; border-radius: 10px; color: var(--slate-400); background: var(--indigo-soft); font-size: .61rem; font-weight: 800; }
.faq-version-flow i { color: #818cf8; font-style: normal; }
.faq-version-flow strong { color: var(--indigo); }
.faq-editor-form { min-height: 0; display: flex; flex: 1 1 auto; flex-direction: column; overflow: hidden; background: var(--slate-50); }
.faq-editor-grid { min-height: 0; display: grid; grid-template-columns: minmax(0,1.45fr) minmax(330px,.9fr); flex: 1 1 auto; overflow-y: auto; }
.faq-copy-pane { display: grid; align-content: start; gap: 19px; padding: 22px 24px 26px; border-right: 1px solid var(--slate-200); background: #fff; }
.faq-editor-intro { display: flex; gap: 11px; padding-bottom: 2px; }
.faq-editor-intro > span { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: var(--indigo); background: var(--indigo-soft); font-size: .62rem; font-weight: 900; }
.faq-editor-intro strong { color: var(--slate-800); font-size: .82rem; }
.faq-editor-intro p { margin: 4px 0 0; color: var(--slate-500); font-size: .65rem; line-height: 1.55; }
.faq-field { position: relative; display: grid; gap: 6px; color: var(--slate-700); font-size: .72rem; font-weight: 800; }
.faq-field > small { color: var(--slate-400); font-size: .59rem; font-weight: 500; }
.faq-field textarea { width: 100%; padding: 12px 13px; border: 1px solid var(--slate-200); border-radius: 11px; color: var(--slate-800); background: var(--slate-50); font: 500 .75rem/1.65 inherit; resize: vertical; transition: border-color .16s ease,box-shadow .16s ease,background .16s ease; }
.faq-field textarea:focus { outline: 0; border-color: #818cf8; background: #fff; box-shadow: 0 0 0 3px #6366f11b; }
.faq-field.answer em { position: absolute; right: 10px; bottom: 9px; padding: 2px 5px; border-radius: 5px; color: var(--slate-400); background: #ffffffd9; font-size: .52rem; font-style: normal; font-weight: 700; }
.faq-preview-pane { display: grid; align-content: start; gap: 13px; padding: 20px; background: linear-gradient(180deg,#f8fafc,#f1f5f9); }
.faq-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.faq-preview-heading > div { display: flex; align-items: center; gap: 7px; color: var(--slate-700); font-size: .68rem; }
.faq-preview-heading small { color: var(--slate-400); font-size: .56rem; }
.preview-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 4px #10b98118; }
.faq-phone-preview { display: grid; gap: 10px; min-height: 205px; padding: 17px 14px; border: 1px solid var(--slate-200); border-radius: 15px; background: #e9eef5; box-shadow: inset 0 0 28px #94a3b817; }
.faq-preview-question { justify-self: start; max-width: 88%; padding: 9px 11px; border-radius: 4px 12px 12px 12px; color: var(--slate-700); background: #fff; box-shadow: 0 2px 7px #0f172a0b; font-size: .65rem; line-height: 1.5; white-space: pre-wrap; }
.faq-preview-answer { justify-self: end; max-width: 92%; display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 7px; padding: 10px 11px; border: 1px solid #c7d2fe; border-radius: 12px 4px 12px 12px; color: var(--slate-700); background: #eef2ff; box-shadow: 0 3px 10px #4f46e50d; }
.faq-preview-answer > span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: var(--indigo); font-size: .48rem; font-weight: 900; }
.faq-preview-answer p { margin: 0; font-size: .65rem; line-height: 1.55; white-space: pre-wrap; }
.faq-meta-card { display: grid; gap: 11px; padding: 13px; border: 1px solid var(--slate-200); border-radius: 13px; background: #fff; }
.faq-meta-card > label:first-child { display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 9px; color: var(--slate-500); font-size: .62rem; font-weight: 800; }
.faq-meta-card select { width: 100%; padding: 8px 9px; border: 1px solid var(--slate-200); border-radius: 8px; color: var(--slate-700); background: var(--slate-50); font-size: .65rem; }
.faq-safety-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--slate-100); cursor: pointer; }
.faq-safety-toggle > span { display: grid; gap: 3px; }
.faq-safety-toggle strong { color: var(--slate-700); font-size: .65rem; }
.faq-safety-toggle small { color: var(--slate-400); font-size: .54rem; font-weight: 500; }
.faq-safety-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.faq-safety-toggle i { position: relative; width: 36px; height: 20px; flex: 0 0 auto; border-radius: 999px; background: var(--slate-300); transition: background .18s ease; }
.faq-safety-toggle i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px #0f172a25; transition: transform .18s ease; }
.faq-safety-toggle input:checked + i { background: var(--rose); }
.faq-safety-toggle input:checked + i::after { transform: translateX(16px); }
.faq-advanced { border: 1px solid var(--slate-200); border-radius: 11px; background: #fff; overflow: hidden; }
.faq-advanced summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; color: var(--slate-600); font-size: .62rem; font-weight: 800; cursor: pointer; }
.faq-advanced summary small { color: var(--slate-400); font-size: .53rem; font-weight: 500; }
.faq-advanced label { display: grid; gap: 6px; padding: 11px 12px; border-top: 1px solid var(--slate-100); color: var(--slate-500); font-size: .59rem; font-weight: 700; }
.faq-advanced textarea { width: 100%; padding: 9px; border: 1px solid var(--slate-200); border-radius: 8px; color: var(--slate-600); background: var(--slate-50); font: .58rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; resize: vertical; }
.faq-dialog-actions { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 20px; border-top: 1px solid var(--slate-200); background: #fff; box-shadow: 0 -8px 24px #0f172a08; }
.faq-dialog-actions > div { display: flex; align-items: center; gap: 9px; }
.faq-dialog-actions p { display: grid; gap: 2px; margin: 0; }
.faq-dialog-actions p strong { color: var(--slate-700); font-size: .63rem; }
.faq-dialog-actions p small { color: var(--slate-400); font-size: .54rem; }
.publish-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 4px #10b98118; }
.faq-dialog-actions button { padding: 9px 14px; border-radius: 9px; font-size: .65rem; font-weight: 800; }
.faq-dialog-actions button[type="submit"] { color: #fff; background: var(--indigo); box-shadow: 0 6px 15px #4f46e52b; }
.mode-badge { align-self: center; padding: 7px 10px; border-radius: 999px; font-size: .62rem; font-weight: 900; letter-spacing: .06em; }
.mode-badge.live { color: #166534; background: #dcfce7; }
.mode-badge.preview { color: #92400e; background: #fef3c7; }
.simulator-layout { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 18px; align-items: start; }
.simulator-profile-workbench { margin-bottom: 18px; overflow: hidden; }
.simulator-profile-workbench .panel-heading p:last-child { max-width: 760px; margin: 5px 0 0; color: var(--slate-500); font-size: .65rem; line-height: 1.55; }
.simulator-profile-editor { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 14px; padding: 16px 18px 18px; border-top: 1px solid var(--slate-100); }
.simulator-profile-editor textarea { min-height: 190px; padding: 13px; resize: vertical; border-color: #c7d2fe; background: #f8faff; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: .66rem; line-height: 1.55; }
.simulator-profile-actions { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 13px; border: 1px solid var(--slate-200); border-radius: 11px; background: var(--slate-50); }
.simulator-profile-actions p { margin: 0; color: var(--slate-500); font-size: .64rem; line-height: 1.55; }
.simulator-profile-actions button { width: 100%; white-space: normal; line-height: 1.4; }
.simulator-context { position: sticky; top: 82px; padding: 18px; }
.simulator-context h3 { margin: 4px 0 18px; color: var(--slate-800); }
.simulator-context label { display: grid; gap: 7px; color: var(--slate-600); font-size: .68rem; font-weight: 800; }
.simulator-context select { width: 100%; }
.simulator-context dl { margin: 20px 0; }
.simulator-context dt { margin-top: 12px; color: var(--slate-400); font-size: .58rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.simulator-context dd { margin: 4px 0 0; color: var(--slate-600); font-size: .67rem; line-height: 1.55; }
.simulator-context button { width: 100%; }
.simulator-category-picker { margin: 16px 0; padding: 14px; border: 1px solid #dfe3ff; border-radius: 14px; background: #f8f8ff; }
.simulator-category-picker span { color: var(--purple-700); font-size: .7rem; font-weight: 900; }
.simulator-category-picker select { min-height: 42px; border: 1px solid #cfd4ee; border-radius: 10px; background: #fff; padding: 0 11px; color: var(--slate-800); font: inherit; }
.simulator-category-picker small { color: var(--slate-400); font-size: .62rem; font-weight: 650; line-height: 1.45; }
.simulator-chat { width: 100%; max-width: none; }
.simulator-chat .chat-message.outgoing { max-width: min(88%,760px); }
.simulator-chat .chat-stream { height: min(55vh,560px); min-height: 390px; overflow-y: auto; }
.simulator-composer { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 13px 15px; border-top: 1px solid var(--slate-200); background: #fff; }
.simulator-composer textarea { min-height: 48px; resize: vertical; }
.simulator-composer button { min-width: 105px; }
.simulator-source { padding: 9px 15px; border-top: 1px solid var(--slate-200); color: var(--slate-400); background: #fff; font-size: .58rem; }
.simulator-prompt-inspector { margin-top: 9px; padding-top: 8px; border-top: 1px solid #c7d2fe; }
.simulator-prompt-inspector summary { cursor: pointer; color: var(--indigo); font-size: .61rem; font-weight: 850; }
.simulator-prompt-inspector textarea { width: 100%; min-height: 210px; margin-top: 9px; padding: 10px; resize: vertical; border: 1px solid #c7d2fe; border-radius: 8px; background: #fff; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: .6rem; line-height: 1.5; }
.simulator-prompt-note { color: var(--slate-500); font-size: .59rem !important; }
.simulator-prompt-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.simulator-prompt-actions span { color: var(--slate-500); font-size: .57rem; font-weight: 750; }
.simulator-prompt-actions button { padding: 7px 9px; font-size: .59rem; }
.template-preview { display: grid; gap: 7px; padding: 12px; border: 1px solid #c7d2fe; border-radius: 10px; background: #fff; }
.template-preview span { color: var(--indigo); font-size: .6rem; font-weight: 900; text-transform: uppercase; }
.template-preview p { margin: 0; color: var(--slate-700); font-size: .74rem; line-height: 1.65; white-space: pre-wrap; }
.preview-parameters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.preview-parameters:empty { display: none; }
.preview-master-panel { overflow: hidden; }
.preview-master-form { display: grid; gap: 0; }
.preview-master-form fieldset { margin: 0; padding: 17px 19px 19px; border: 0; border-top: 1px solid var(--slate-100); }
.preview-master-form legend { padding: 0 8px 0 0; color: var(--indigo); font-size: .68rem; font-weight: 900; }
.preview-master-form fieldset > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 14px; }
.preview-master-form label { min-width: 0; display: grid; gap: 6px; color: var(--slate-600); font-size: .68rem; font-weight: 700; }
.preview-master-form label span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.preview-master-form code { color: var(--slate-400); font-size: .56rem; font-weight: 700; }
.preview-master-form input { min-width: 0; width: 100%; }
.preview-master-form footer { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 19px; border-top: 1px solid var(--slate-200); background: #fffffff2; backdrop-filter: blur(8px); }
.preview-master-form footer p { max-width: 620px; margin: 0; color: var(--slate-500); font-size: .66rem; line-height: 1.55; }
.condition-fields { grid-column: 1/-1; display: grid; grid-template-columns: 1fr .8fr 1fr; gap: 8px; margin: 0; padding: 11px; border: 1px solid var(--slate-200); border-radius: 10px; }
.condition-fields legend { padding: 0 5px; color: var(--indigo); font-size: .6rem; font-weight: 800; }
.policy-layout { display: grid; grid-template-columns: minmax(0,.9fr) minmax(340px,1.1fr); gap: 16px; align-items: start; }
.policy-summary { display: grid; grid-template-columns: 100px 1fr; gap: 0; margin: 0; padding: 0 18px 18px; }
.policy-summary dt,.policy-summary dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--slate-100); font-size: .7rem; line-height: 1.6; }
.policy-summary dt { color: var(--slate-400); font-weight: 800; }
.policy-summary dd { color: var(--slate-700); }
.category-questionnaires { display: grid; gap: 12px; }
.questionnaire-directory { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.questionnaire-directory-card { display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 15px; min-height: 128px; padding: 20px; border: 1px solid var(--slate-200); border-radius: 17px; color: inherit; background: #fff; box-shadow: 0 5px 18px #0f172a08; text-decoration: none; transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.questionnaire-directory-card:hover { transform: translateY(-2px); border-color: #a5b4fc; box-shadow: 0 12px 28px #4f46e514; }
.questionnaire-card-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; color: var(--indigo); background: var(--indigo-soft); font-size: 1rem; font-weight: 900; }
.questionnaire-card-copy > div:first-child { display: flex; align-items: center; gap: 9px; }
.questionnaire-card-copy h3 { margin: 0; color: var(--slate-900); font-size: .9rem; }
.questionnaire-card-copy p { margin: 8px 0 11px; color: var(--slate-500); font-size: .68rem; line-height: 1.55; }
.questionnaire-card-meta { display: flex; flex-wrap: wrap; gap: 6px 13px; color: var(--slate-400); font-size: .61rem; font-weight: 700; }
.questionnaire-card-arrow { color: var(--indigo); font-size: .67rem; font-weight: 850; white-space: nowrap; }
.questionnaire-detail-header { align-items: end; }
.questionnaire-header-actions button,.draft-workspace-header button { padding: 11px 15px; border-radius: 10px; color: #fff; background: var(--indigo); font-size: .7rem; font-weight: 850; }
.questionnaire-overview-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; margin-bottom: 15px; }
.questionnaire-overview-grid article { padding: 16px 17px; border: 1px solid var(--slate-200); border-radius: 14px; background: #fff; }
.questionnaire-overview-grid span,.questionnaire-overview-grid small { display: block; color: var(--slate-400); font-size: .61rem; font-weight: 750; }
.questionnaire-overview-grid strong { display: block; margin: 7px 0 4px; color: var(--slate-900); font-size: 1.18rem; }
.questionnaire-detail-layout { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(280px,.7fr); gap: 15px; align-items: start; }
.published-question-list { display: grid; gap: 0; margin: 0; padding: 0 19px 18px; list-style: none; }
.published-question-list li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--slate-100); }
.published-question-list li > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--indigo); background: var(--indigo-soft); font-size: .6rem; font-weight: 900; }
.published-question-list strong,.published-question-list small { display: block; }
.published-question-list strong { color: var(--slate-800); font-size: .76rem; line-height: 1.55; }
.published-question-list small { margin-top: 5px; color: var(--slate-400); font-size: .6rem; }
.questionnaire-side-stack { display: grid; gap: 13px; }
.inspection-detail-form { display: grid; gap: 12px; padding: 18px; }
.inspection-detail-form h3,.version-history-panel h3 { margin: 3px 0 0; color: var(--slate-800); font-size: .86rem; }
.inspection-detail-form button { width: 100%; padding: 12px; border-radius: 10px; color: #fff; background: var(--indigo); font-weight: 800; }
.inspection-form-heading h3 { margin-bottom: 5px; }
.inspection-form-heading p:last-child { margin: 0; color: var(--slate-400); font-size: .64rem; line-height: 1.55; }
.inspection-toggle-list { overflow: hidden; border: 1px solid var(--slate-200); border-radius: 12px; background: var(--slate-50); }
.inspection-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 14px; cursor: pointer; }
.inspection-toggle-row + .inspection-toggle-row { border-top: 1px solid var(--slate-200); }
.inspection-toggle-row > span { min-width: 0; }
.inspection-toggle-row strong,.inspection-toggle-row small { display: block; }
.inspection-toggle-row strong { color: var(--slate-700); font-size: .68rem; line-height: 1.4; }
.inspection-toggle-row small { margin-top: 3px; color: var(--slate-400); font-size: .58rem; line-height: 1.45; }
.inspection-toggle-row input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.inspection-toggle-row i { position: relative; flex: 0 0 38px; width: 38px; height: 22px; border-radius: 999px; background: var(--slate-300); transition: background .2s ease,box-shadow .2s ease; }
.inspection-toggle-row i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px #0f172a35; transition: transform .2s ease; }
.inspection-toggle-row input:checked + i { background: var(--indigo); }
.inspection-toggle-row input:checked + i::after { transform: translateX(16px); }
.inspection-toggle-row input:focus-visible + i { box-shadow: 0 0 0 4px #4f46e526; }
.inspection-copy-field { display: grid; gap: 5px; color: var(--slate-600); font-size: .65rem; font-weight: 800; }
.inspection-copy-field small { color: var(--slate-400); font-size: .58rem; font-weight: 600; line-height: 1.45; }
.inspection-copy-field textarea { width: 100%; min-height: 154px; padding: 13px 14px; border: 1px solid var(--slate-200); border-radius: 12px; outline: 0; color: var(--slate-800); background: var(--slate-50); font: inherit; font-size: .72rem; font-weight: 500; line-height: 1.7; resize: vertical; transition: border-color .2s ease,box-shadow .2s ease,background .2s ease; }
.inspection-copy-field textarea:hover { border-color: var(--slate-300); background: #fff; }
.inspection-copy-field textarea:focus { border-color: var(--indigo); background: #fff; box-shadow: 0 0 0 4px #4f46e514; }
.version-history-panel { padding: 18px; }
.version-history-panel > div { display: grid; gap: 7px; margin-top: 13px; }
.version-history-panel span { display: flex; justify-content: space-between; padding: 9px 10px; border-radius: 8px; background: var(--slate-50); }
.version-history-panel strong,.version-history-panel small { font-size: .64rem; }
.questionnaire-draft-workspace { margin-top: 16px; overflow: hidden; }
.draft-workspace-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 19px; border-bottom: 1px solid var(--slate-200); }
.draft-workspace-header h2 { margin: 3px 0; color: var(--slate-900); font-size: 1rem; }
.auto-category-state { display: grid; gap: 5px; margin: 15px 0; padding: 13px; border: 1px solid #c7d2fe; border-radius: 11px; background: var(--indigo-soft); }
.auto-category-state span { color: var(--indigo); font-size: .59rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.auto-category-state strong { color: var(--slate-800); font-size: .76rem; }
.core-intake-rule { margin-bottom: 14px; border-left: 4px solid var(--indigo); }
.inspection-policy-panel { margin-bottom: 14px; }
.inspection-policy-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.inspection-policy-editor h3 { margin: 0; color: var(--slate-800); font-size: .86rem; }
.inspection-policy-editor .muted { margin: 0; font-size: .66rem; }
.questionnaire-card { border: 1px solid var(--slate-200); border-radius: 16px; background: #fff; box-shadow: 0 3px 14px #0f172a07; overflow: hidden; }
.questionnaire-card summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 19px; cursor: pointer; list-style: none; }
.questionnaire-card summary::-webkit-details-marker { display: none; }
.questionnaire-card summary h3 { display: inline; margin: 0 0 0 8px; color: var(--slate-800); font-size: .86rem; }
.questionnaire-card summary p { margin: 6px 0 0; color: var(--slate-400); font-size: .64rem; }
.questionnaire-card summary > span { color: var(--indigo); font-size: .66rem; font-weight: 800; }
.questionnaire-body { border-top: 1px solid var(--slate-100); background: var(--slate-50); }
.version-callout,.draft-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 18px; background: #fff; }
.version-callout p { margin: 0; color: var(--slate-500); font-size: .7rem; }
.version-callout button,.draft-toolbar button,.question-editor button { padding: 9px 11px; border-radius: 8px; color: #fff; background: var(--indigo); font-size: .67rem; font-weight: 800; }
.draft-toolbar strong,.draft-toolbar small { display: block; }
.draft-toolbar strong { color: var(--slate-800); font-size: .76rem; }
.draft-toolbar small { margin-top: 4px; color: var(--slate-400); font-size: .61rem; }
.question-editor-list { display: grid; gap: 9px; padding: 12px; }
.question-editor { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px 14px; padding: 15px 15px 15px 50px; border: 1px solid var(--slate-200); border-radius: 12px; background: #fff; }
.question-editor > label:first-of-type { grid-column: 1/-1; }
.question-editor label { display: grid; gap: 5px; color: var(--slate-500); font-size: .62rem; font-weight: 700; }
.question-index { position: absolute; left: 14px; top: 17px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: var(--indigo); background: var(--indigo-soft); font-size: .6rem; font-weight: 900; }
.question-fields { display: grid; grid-template-columns: 1.5fr .6fr .8fr; gap: 8px; }
.question-editor select { width: 100%; padding: 9px 10px; border: 1px solid var(--slate-200); border-radius: 8px; background: #fff; }
.question-editor button { align-self: end; }
.new-question { border-style: dashed; border-color: #a5b4fc; }
.live-edit-badge { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid #bbf7d0; border-radius: 999px; color: #15803d; background: #f0fdf4; font-size: .64rem; font-weight: 850; }
.live-edit-badge i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px #22c55e20; }
.live-question-panel { overflow: hidden; }
.live-question-editor-list { gap: 12px; padding: 15px; background: var(--slate-50); }
.live-question-editor { grid-template-columns: minmax(0,1fr); gap: 11px; padding: 17px 17px 17px 54px; box-shadow: 0 2px 8px #0f172a06; }
.live-question-editor > label:first-of-type { grid-column: auto; }
.live-question-editor .question-copy-field input { min-height: 42px; font-weight: 700; }
.live-question-editor .condition-fields { margin: 1px 0; }
.live-question-editor .condition-fields:disabled { opacity: .62; }
.question-editor-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 2px; }
.question-editor-footer .inline-check { display: flex; grid-auto-flow: column; align-items: center; justify-content: start; gap: 7px; color: var(--slate-600); }
.question-editor-footer .inline-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--indigo); }
.question-editor-footer button { min-width: 116px; padding: 10px 13px; }
.question-editor-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.question-editor .danger-action { color: #b42318; border: 1px solid #fecaca; background: #fff7f7; }
.question-editor .danger-action:hover { border-color: #fca5a5; background: #fef2f2; }
.live-settings-note { display: grid; gap: 7px; padding: 17px 18px; border-color: #c7d2fe; background: linear-gradient(145deg,#eef2ff,#fff); }
.live-settings-note span { color: var(--indigo); font-size: .58rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.live-settings-note strong { color: var(--slate-800); font-size: .72rem; }
.live-settings-note p { margin: 0; color: var(--slate-500); font-size: .63rem; line-height: 1.55; }
.definition-list { display: grid; grid-template-columns: 110px 1fr; margin: 0; padding: 18px; gap: 12px 18px; }
.definition-list dt { color: var(--slate-400); font-size: .64rem; font-weight: 800; text-transform: uppercase; }
.definition-list dd { margin: 0; color: var(--slate-700); font-size: .76rem; line-height: 1.6; }
.definition-list pre { margin: 0; white-space: pre-wrap; font: inherit; }
.timeline-list { margin: 0; padding: 10px 20px 18px 42px; }
.timeline-list li { padding: 9px 0 9px 7px; color: var(--indigo); }
.timeline-list strong, .timeline-list span { display: block; }
.timeline-list strong { color: var(--slate-700); font-size: .74rem; }
.timeline-list span { margin-top: 3px; color: var(--slate-400); font-size: .64rem; }
.capability-cards { display: grid; }
.capability-cards article { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 18px; border-bottom: 1px solid var(--slate-100); }
.capability-cards article:last-child { border-bottom: 0; }
.capability-cards strong { color: var(--slate-800); font-size: .78rem; }
.capability-cards p { margin: 5px 0; color: var(--slate-500); font-size: .7rem; }
.capability-cards small { color: var(--slate-400); font-size: .62rem; }
.capability-card-actions form { display: flex; gap: 7px; }
.capability-cards select { padding: 7px 9px; border: 1px solid var(--slate-200); border-radius: 8px; }
.vendor-directory-panel { border: 0; background: transparent; box-shadow: none; overflow: visible; }
.directory-controls .dt-container { padding: 0; }
.directory-controls .dt-layout-row:first-child { margin-bottom: 12px!important; padding: 10px 12px; border: 1px solid var(--slate-200); border-radius: 14px; background: #fff; box-shadow: 0 3px 14px #0f172a07; }
.directory-controls .dt-layout-row:last-child { margin-top: 12px!important; padding: 4px 2px; border: 0; background: transparent; }
.directory-controls .dt-length label { display: inline-flex; align-items: center; gap: 8px; color: var(--slate-500); font-size: .62rem; font-weight: 800; }
.directory-controls .dt-length .dt-input { min-width: 68px; height: 38px; margin: 0!important; padding: 0 30px 0 12px; border-color: var(--slate-200)!important; border-radius: 10px!important; color: var(--slate-700); background-color: var(--slate-50)!important; font-weight: 800; }
.directory-controls .dt-search { position: relative; display: flex; align-items: center; }
.directory-controls .dt-search::before { content: "⌕"; position: absolute; left: 12px; z-index: 1; color: var(--slate-400); font-size: 1rem; line-height: 1; pointer-events: none; }
.directory-controls .dt-search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.directory-controls .dt-search .dt-input { width: 290px; height: 40px; margin: 0!important; padding: 0 38px!important; border-color: var(--slate-200)!important; border-radius: 11px!important; color: var(--slate-800); background: var(--slate-50)!important; font-size: .66rem; box-shadow: none!important; transition: border-color .15s ease,background .15s ease,box-shadow .15s ease; }
.directory-controls .dt-search .dt-input:focus { border-color: #a5b4fc!important; outline: 0; background: #fff!important; box-shadow: 0 0 0 4px #4f46e512!important; }
.directory-controls .dt-info { display: inline-flex; align-items: center; min-height: 34px; padding: 0 11px!important; border: 1px solid var(--slate-200); border-radius: 9px; color: var(--slate-500)!important; background: #fff; font-size: .59rem!important; font-weight: 750; }
.directory-controls .dt-paging nav { display: flex; align-items: center; gap: 5px; }
.directory-controls .dt-paging-button { min-width: 34px!important; height: 34px!important; margin: 0!important; padding: 0 9px!important; border: 1px solid var(--slate-200)!important; border-radius: 9px!important; color: var(--slate-600)!important; background: #fff!important; font-size: .65rem!important; font-weight: 800!important; line-height: 32px!important; box-shadow: 0 1px 2px #0f172a05; }
.directory-controls .dt-paging-button:hover:not(.disabled):not(.current) { border-color: #a5b4fc!important; color: var(--indigo)!important; background: var(--indigo-soft)!important; }
.directory-controls .dt-paging-button.current,.directory-controls .dt-paging-button.current:hover,.directory-controls .dt-paging-button.current:focus { border-color: var(--indigo)!important; color: #fff!important; -webkit-text-fill-color:#fff!important; background: var(--indigo)!important; box-shadow: 0 5px 12px #4f46e52b!important; }
.directory-controls .dt-paging-button.current * { color:#fff!important; -webkit-text-fill-color:#fff!important; }
.directory-controls .dt-paging-button.disabled { opacity: .35; cursor: default!important; }
.directory-controls .dt-paging-button.first,.directory-controls .dt-paging-button.last { display: none!important; }
.faq-list-table .faq-status-rank { display:none; }
.faq-directory-panel .dt-search .dt-input { width:min(420px,46vw); }
.vendor-directory-panel .table-wrap { overflow: visible; }
.vendor-directory-panel .dt-layout-table { overflow-x: auto; border: 1px solid var(--slate-200); border-radius: 16px; background: #fff; box-shadow: 0 8px 28px #0f172a08; }
.vendor-list-table { width: 100%!important; min-width: 850px; border-collapse: separate!important; border-spacing: 0!important; }
.vendor-list-table thead th { padding: 13px 16px!important; border-bottom: 1px solid var(--slate-200)!important; color: var(--slate-500)!important; background: #f8fafc!important; font-size: .61rem!important; font-weight: 850!important; letter-spacing: .045em; text-transform: uppercase; }
.vendor-list-table thead th:first-child { padding-left: 22px!important; }
.vendor-list-table thead .dt-column-order { opacity: .38; transform: scale(.78); }
.vendor-list-table tbody td { padding: 17px 16px!important; border-bottom: 1px solid var(--slate-100)!important; vertical-align: middle; background: #fff; transition: background .15s ease; }
.vendor-list-table tbody tr:last-child td { border-bottom: 0!important; }
.vendor-list-table tbody tr:hover td { background: #fafbff; }
.vendor-list-table tbody tr.has-outstanding td:first-child { box-shadow: inset 3px 0 0 #ef4444; }
.vendor-directory-identity { min-width: 220px; display: flex; align-items: center; gap: 12px; }
.vendor-avatar { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 13px; color: var(--indigo); background: linear-gradient(145deg,#eef2ff,#e0e7ff); box-shadow: inset 0 0 0 1px #c7d2fe; }
.vendor-directory-identity > div { min-width: 0; }
.vendor-name-link { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; color: var(--slate-900); text-decoration: none; }
.vendor-name-link strong { display: block; overflow: hidden; font-size: .76rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.vendor-name-link b { color: var(--indigo); font-size: .7rem; transition: transform .15s ease; }
.vendor-name-link:hover { color: var(--indigo); }
.vendor-name-link:hover b { transform: translateX(3px); }
.vendor-directory-meta { display: flex; align-items: center; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.vendor-directory-meta > span { color: var(--slate-400); font-size: .59rem; }
.vendor-status,.attention-label { padding: 3px 7px; border-radius: 999px; font-size: .52rem; font-style: normal; font-weight: 850; white-space: nowrap; }
.vendor-status { color: #166534; background: #dcfce7; }
.vendor-status.pending { color: #92400e; background: #fef3c7; }
.vendor-status.suspended,.vendor-status.terminated { color: #9f1239; background: #ffe4e6; }
.attention-label { color: #b42318; background: #feeceb; }
.performance-stack { min-width: 190px; display: grid; grid-template-columns: minmax(82px,.75fr) minmax(104px,1fr); gap: 11px; align-items: center; }
.primary-performance span,.primary-performance strong,.primary-performance small { display: block; }
.primary-performance span,.score-pairs small,.vendor-business-stats small,.vendor-commission-cell > small { color: var(--slate-400); font-size: .54rem; font-weight: 750; }
.primary-performance strong { margin: 4px 0 3px; color: var(--slate-900); font-size: 1rem; }
.primary-performance small { color: var(--slate-400); font-size: .55rem; white-space: nowrap; }
.score-pairs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border: 1px solid var(--slate-100); border-radius: 10px; background: var(--slate-50); overflow: hidden; }
.score-pairs > span { display: grid; gap: 3px; padding: 8px 9px; }
.score-pairs > span + span { border-left: 1px solid var(--slate-200); }
.score-pairs strong { color: var(--slate-700); font-size: .68rem; }
.vendor-business-stats { min-width: 220px; display: grid; grid-template-columns: .8fr .8fr 1.35fr; gap: 0; }
.vendor-business-stats > span { display: grid; gap: 5px; padding: 2px 12px; border-left: 1px solid var(--slate-100); }
.vendor-business-stats > span:first-child { padding-left: 0; border-left: 0; }
.vendor-business-stats strong { color: var(--slate-800); font-size: .7rem; white-space: nowrap; }
.vendor-commission-cell { min-width: 140px; }
.vendor-commission-cell > small,.vendor-commission-cell > strong,.vendor-commission-cell > span { display: block; }
.vendor-commission-cell > strong { margin: 5px 0 4px; color: var(--slate-900); font-size: .77rem; }
.vendor-commission-cell > span { color: var(--slate-400); font-size: .57rem; font-weight: 700; }
.vendor-commission-cell > span.is-overdue { color: #dc2626; }
.settlement-history-table { margin-top: 0; border: 0; background: transparent; box-shadow: none; overflow: visible; }
.settlement-history-table .table-wrap { overflow: visible; }
.settlement-history-table .dt-layout-table { overflow-x: auto; border: 1px solid var(--slate-200); border-radius: 16px; background: #fff; box-shadow: 0 8px 28px #0f172a08; }
.settlement-list-table { width: 100%!important; min-width: 850px; border-collapse: separate!important; border-spacing: 0!important; }
.settlement-list-table thead th { padding: 13px 16px!important; border-bottom: 1px solid var(--slate-200)!important; color: var(--slate-500)!important; background: #f8fafc!important; font-size: .61rem!important; font-weight: 850!important; letter-spacing: .045em; text-transform: uppercase; }
.settlement-list-table tbody td { padding: 16px!important; border-bottom: 1px solid var(--slate-100)!important; vertical-align: middle; background: #fff; }
.settlement-list-table tbody tr:last-child td { border-bottom: 0!important; }
.settlement-list-table tbody tr:hover td { background: #fafbff; }
.settlement-list-table tbody tr.has-outstanding td:first-child { box-shadow: inset 3px 0 0 #ef4444; }
.statement-table-number,.statement-table-amount { display: block; color: var(--slate-900); font-size: .74rem; }
.statement-cases-detail { margin-top: 6px; }
.statement-cases-detail summary { width: fit-content; color: var(--indigo); font-size: .58rem; font-weight: 800; cursor: pointer; }
.statement-cases-detail .statement-case-chips { margin-top: 8px; }
.settlement-table-actions { display: flex; align-items: center; gap: 6px; margin: 0; }
.settlement-table-actions button { padding: 8px 10px; border-radius: 8px; color: #fff; background: var(--indigo); font-size: .59rem; font-weight: 800; white-space: nowrap; }
.settlement-table-actions button.secondary { color: var(--slate-600); background: var(--slate-100); }
.settlement-action-complete { display: inline-flex; padding: 5px 8px; border-radius: 999px; color: #166534; background: #dcfce7; font-size: .56rem; font-weight: 800; }
.vendor-profile-form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 16px; }
.vendor-profile-fields { display: grid; grid-template-columns: repeat(4,minmax(150px,1fr)); gap: 12px; }
.capability-summary { min-width: 0; }
.capability-title { display: flex; align-items: center; gap: 8px; }
.capability-card-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.capability-card-actions form { padding: 0; }
.capability-card-actions > button { white-space: nowrap; }
.inline-checkboxes { display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 5px 0; }
.inline-checkboxes .checkbox { min-height: 28px; }
.admin-form label.checkbox,.checkbox { width: fit-content; display: inline-flex; grid-template-columns: none; align-items: center; justify-content: flex-start; gap: 8px; white-space: normal; }
.admin-form label.checkbox input,.checkbox input { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; padding: 0; accent-color: var(--indigo); }
.capability-dialog .dialog-form,.capability-editor { display: grid !important; gap: 15px; }
.capability-dialog .inline-checkboxes { display: flex !important; gap: 10px 14px; padding: 3px 0; }
.capability-dialog .checkbox { min-height: 38px; padding: 9px 12px; border: 1px solid var(--slate-200); border-radius: 10px; background: var(--slate-50); }
.vendor-tabs { display: flex; gap: 8px; margin: 0 0 18px; padding: 6px; border: 1px solid var(--slate-200); border-radius: 14px; background: #fff; overflow-x: auto; }
.vendor-tabs a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 118px; padding: 10px 14px; border-radius: 10px; color: var(--slate-500); font-size: .69rem; font-weight: 850; text-decoration: none; white-space: nowrap; transition: color .15s ease,background .15s ease,box-shadow .15s ease; }
.vendor-tabs a:hover { color: var(--indigo); background: var(--indigo-soft); }
.vendor-tabs a.active { color: #fff; background: linear-gradient(135deg,var(--indigo),#6d5dfc); box-shadow: 0 6px 16px #4f46e52d; }
.vendor-tabs a span { min-width: 20px; padding: 2px 6px; border-radius: 999px; color: inherit; background: #ffffff24; text-align: center; font-size: .57rem; }
.vendor-profile-fields .wide-field { grid-column: span 2; }
.commission-tier-panel { overflow: hidden; }
.commission-tier-form { display: grid; gap: 16px; padding: 18px; }
.commission-tier-head,.commission-tier-row { display: grid; grid-template-columns: 1fr 1fr .8fr .8fr; gap: 10px; align-items: end; }
.commission-tier-head { padding: 0 12px; color: var(--slate-400); font-size: .59rem; font-weight: 850; text-transform: uppercase; }
.commission-tier-list { display: grid; gap: 9px; }
.commission-tier-row { padding: 12px; border: 1px solid var(--slate-200); border-radius: 12px; background: var(--slate-50); }
.commission-tier-row label { min-width: 0; }
.commission-tier-row label > span:first-child { display: none; }
.suffix-input,.prefix-input { display: flex; align-items: center; border: 1px solid var(--slate-200); border-radius: 9px; background: #fff; overflow: hidden; }
.suffix-input input,.prefix-input input { border: 0; border-radius: 0; }
.suffix-input > span,.prefix-input > span { padding: 0 10px; color: var(--slate-400); font-size: .72rem; font-weight: 850; }
.commission-rule-note { padding: 14px 16px; border: 1px solid #c7d2fe; border-radius: 12px; background: linear-gradient(135deg,#eef2ff,#fff); }
.commission-rule-note strong { color: var(--indigo); font-size: .67rem; }
.commission-rule-note p { margin: 5px 0 0; color: var(--slate-600); font-size: .67rem; line-height: 1.65; }
.commission-tier-form .form-actions { display: flex; justify-content: flex-end; }
.commission-tier-form .form-actions button { min-width: 160px; }
.commission-tier-controls { display: flex; align-items: center; gap: 8px; }
.commission-tier-controls button { color: var(--slate-600); border: 1px solid var(--slate-200); background: #fff; box-shadow: none; }
.commission-tier-controls button.danger-soft { color: #b42318; border-color: #fecaca; background: #fff7f7; }
.vendor-case-ledger .pill.warning { color: #9a3412; background: #fff7ed; border-color: #fed7aa; }
.capability-dialog { width: min(720px,calc(100vw - 34px)); }
.commission-unpaid { color: #dc2626 !important; font-weight: 900; }
.commission-unpaid small { display: block; margin-top: 3px; color: #ef4444 !important; font-size: .58rem; font-weight: 800; }
.settlement-stats article.attention { border-color: #fecaca; background: linear-gradient(145deg,#fff 50%,#fff1f2); }
.settlement-stats article.attention strong { color: #dc2626; }
.settlement-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 30px 0 12px; }
.settlement-section-heading h2 { margin: 0; color: var(--slate-800); font-size: 1.12rem; }
.settlement-section-heading p:not(.eyebrow) { margin: 6px 0 0; color: var(--slate-500); font-size: .72rem; }
.settlement-section-heading > span { color: var(--slate-400); font-size: .68rem; font-weight: 800; }
.settlement-batch-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.settlement-batch-card { border: 1px solid #fecaca; border-radius: 16px; background: #fff; box-shadow: 0 5px 18px #991b1b0b; overflow: hidden; }
.settlement-batch-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--slate-100); }
.settlement-batch-card > header > div { display: flex; align-items: center; gap: 10px; }
.settlement-batch-card header strong,.settlement-batch-card header small { display: block; }
.settlement-batch-card header strong { color: var(--slate-800); font-size: .76rem; }
.settlement-batch-card header small { margin-top: 3px; color: var(--slate-400); font-size: .61rem; }
.unpaid-badge { padding: 5px 8px; border-radius: 999px; color: #b91c1c; background: #fee2e2; font-size: .58rem; font-weight: 900; }
.settlement-case-list { display: grid; }
.settlement-case-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--slate-100); }
.settlement-case-list span small { display: block; margin-top: 3px; color: var(--slate-400); font-size: .59rem; }
.settlement-batch-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; background: var(--slate-50); }
.settlement-batch-card footer > span small,.settlement-batch-card footer > span strong { display: block; }
.settlement-batch-card footer > span small { color: var(--slate-400); font-size: .58rem; }
.settlement-batch-card footer > span strong { margin-top: 3px; color: var(--slate-800); font-size: 1rem; }
.settlement-batch-card footer form { margin: 0; }
.settlement-batch-card footer button { padding: 9px 12px; border-radius: 9px; color: #fff; background: var(--indigo); font-size: .66rem; font-weight: 800; cursor: pointer; }
.settlement-empty { grid-column: 1/-1; padding: 34px; text-align: center; }
.settlement-empty strong { color: var(--slate-700); }
.settlement-empty p { margin: 7px 0 0; color: var(--slate-400); font-size: .7rem; }
.settlement-statement-list { display: grid; }
.settlement-statement-row { padding: 15px 18px; border-bottom: 1px solid var(--slate-100); }
.settlement-statement-row:last-child { border-bottom: 0; }
.settlement-statement-row.unpaid { box-shadow: inset 3px 0 #ef4444; background: #fffafa; }
.statement-main { display: grid; grid-template-columns: 110px minmax(190px,1fr) 130px 150px auto; align-items: center; gap: 14px; }
.statement-number { color: var(--indigo); font-size: .7rem; font-weight: 900; }
.statement-main > span:nth-child(2) strong,.statement-main > span:nth-child(2) small { display: block; }
.statement-main > span:nth-child(2) strong { color: var(--slate-800); font-size: .73rem; }
.statement-main > span:nth-child(2) small { margin-top: 3px; color: var(--slate-400); font-size: .6rem; }
.settlement-status { width: max-content; padding: 5px 8px; border-radius: 999px; color: #475569; background: #f1f5f9; font-size: .58rem; font-weight: 900; }
.settlement-status.issued,.settlement-status.disputed { color: #b91c1c; background: #fee2e2; }
.settlement-status.paid { color: #047857; background: #d1fae5; }
.settlement-status.draft { color: #9a3412; background: #ffedd5; }
.settlement-statement-row details { margin-top: 10px; }
.settlement-statement-row summary { width: max-content; color: var(--indigo); font-size: .62rem; font-weight: 800; cursor: pointer; }
.statement-case-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.statement-case-chips a { display: flex; gap: 12px; padding: 7px 9px; border: 1px solid var(--slate-200); border-radius: 8px; color: var(--slate-600); background: #fff; font-size: .62rem; text-decoration: none; }
.compare-search { display: flex; align-items: end; gap: 9px; padding: 16px 18px; border: 1px solid var(--slate-200); border-radius: 14px; background: #fff; }
.compare-search label { flex: 1; display: grid; gap: 6px; color: var(--slate-600); font-size: .68rem; font-weight: 700; }
.compare-search button { padding: 10px 13px; border-radius: 9px; color: #fff; background: var(--indigo); font-weight: 700; }
.compare-card.proposed { border-color: #a5b4fc; box-shadow: 0 8px 24px #4f46e516; }
.compare-body { min-height: 180px; padding: 20px; }
.compare-body h3 { margin: 0 0 12px; color: var(--slate-800); font-size: .9rem; }
.compare-body p { margin: 0; color: var(--slate-600); font-size: .78rem; line-height: 1.75; white-space: pre-wrap; }
.review-bar { padding: 5px 18px 18px; }
button:disabled { cursor: not-allowed; opacity: .45; }
.form-panel { position: sticky; top: 84px; }
.admin-form { display: grid; gap: 12px; padding: 18px; }
.admin-form label { display: grid; gap: 6px; color: var(--slate-600); font-size: .68rem; font-weight: 700; }
.admin-form textarea, .admin-form select { width: 100%; padding: 10px 11px; border: 1px solid var(--slate-200); border-radius: 9px; color: var(--slate-800); background: #fff; font: inherit; resize: vertical; }
.field-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.table-subtext { display: block; margin-top: 4px; color: var(--slate-400); font-size: .62rem; }
.table-action { padding: 6px 9px; border-radius: 7px; color: var(--slate-600); background: var(--slate-100); font-size: .64rem; font-weight: 700; }
.account-actions { display: grid; gap: 8px; min-width: 210px; }
.password-reset { display: flex; gap: 6px; align-items: center; }
.password-reset input { min-width: 140px; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.avatar.mini { display: inline-grid; width: 27px; height: 27px; margin-right: 8px; vertical-align: middle; font-size: .65rem; }
.template-list { display: grid; gap: 12px; }
.template-card { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--slate-200); border-radius: 15px; background: #fff; box-shadow: 0 3px 14px #0f172a07; }
.template-card h3 { margin: 0; color: var(--slate-800); font-size: .85rem; }
.template-card p { margin: 0; color: var(--slate-600); font-size: .76rem; line-height: 1.65; }
.template-card small { color: var(--slate-400); font-size: .64rem; }
.template-card form { justify-self: end; }

.role-tabs { position: sticky; top: 65px; z-index: 12; display: flex; gap: 6px; margin: -4px 0 18px; padding: 7px; border: 1px solid var(--slate-200); border-radius: 14px; background: #fffffff2; box-shadow: 0 6px 20px #0f172a0b; backdrop-filter: blur(12px); overflow-x: auto; }
.role-tabs a { flex: 1 0 max-content; padding: 10px 14px; border-radius: 9px; color: var(--slate-500); text-align: center; text-decoration: none; font-size: .7rem; font-weight: 800; transition: color .18s ease, background-color .18s ease, transform .16s ease, box-shadow .18s ease; }
.role-tabs a:hover { color: var(--indigo); background: var(--indigo-soft); }
.role-tabs a:active { transform: translateY(1px) scale(.98); }
.role-tabs a.active { color: #fff; background: var(--indigo); box-shadow: 0 5px 14px #4f46e536; }
.role-hero { min-height: 190px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 30px; border-radius: 20px; color: #fff; background: radial-gradient(circle at 82% 18%, #6366f1 0, #3730a3 28%, #111827 72%); box-shadow: 0 14px 34px #312e8130; }
.role-hero .eyebrow { color: #a5b4fc; }
.role-hero h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1; letter-spacing: -.05em; }
.role-hero p:not(.eyebrow) { max-width: 700px; margin: 12px 0 0; color: var(--slate-300); font-size: .86rem; line-height: 1.7; }
.role-hero > span { flex: 0 0 auto; padding: 8px 11px; border: 1px solid #818cf8; border-radius: 999px; color: #c7d2fe; font-size: .66rem; font-weight: 800; }
.role-guide-grid { display: grid; grid-template-columns: minmax(230px,.8fr) minmax(360px,1.25fr) minmax(230px,.8fr); gap: 16px; margin-top: 18px; align-items: start; }
.guide-card { border: 1px solid var(--slate-200); border-radius: 16px; background: #fff; box-shadow: 0 3px 14px #0f172a07; overflow: hidden; }
.guide-card-heading { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--slate-100); }
.guide-card-heading > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--indigo); background: var(--indigo-soft); font-size: .65rem; font-weight: 900; }
.guide-card-heading .eyebrow { margin-bottom: 3px; font-size: .56rem; }
.guide-card-heading h3 { margin: 0; color: var(--slate-800); font-size: .9rem; }
.guide-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.guide-list li { position: relative; padding: 13px 16px 13px 38px; border-bottom: 1px solid var(--slate-100); color: var(--slate-600); font-size: .73rem; line-height: 1.55; }
.guide-list li:last-child { border-bottom: 0; }
.guide-list li::before { content: "✓"; position: absolute; left: 17px; top: 13px; color: var(--emerald); font-weight: 900; }
.detail-list li::before { content: "!"; width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; color: #9a3412; background: #ffedd5; font-size: .55rem; }
.role-process { margin: 0; padding: 4px 18px 12px; list-style: none; }
.role-process li { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 12px; min-height: 58px; padding: 12px 0; }
.role-process li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 46px; bottom: -12px; width: 1px; background: var(--slate-200); }
.role-process li > span { width: 34px; height: 34px; display: grid; place-items: center; z-index: 1; border: 1px solid #c7d2fe; border-radius: 50%; color: var(--indigo); background: #fff; font-size: .6rem; font-weight: 900; }
.role-process strong { display: block; padding-top: 7px; color: var(--slate-700); font-size: .74rem; line-height: 1.45; }
.guide-callout { display: grid; grid-template-columns: minmax(180px,.35fr) 1fr; gap: 22px; margin-top: 18px; padding: 20px 22px; border: 1px solid #c7d2fe; border-radius: 16px; background: var(--indigo-soft); }
.guide-callout strong { color: var(--indigo-dark); font-size: .82rem; }
.guide-callout p { margin: 0; color: var(--slate-600); font-size: .75rem; line-height: 1.7; }

.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 480px) 1fr; background: var(--slate-50); }
.login-panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 7vw, 76px); background: #fff; border-right: 1px solid var(--slate-200); }
.login-panel .brand-mark { color: var(--slate-800); font-size: 1rem; }
.login-panel h1, .docs-shell h1 { margin: 8px 0; color: var(--slate-800); font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.05; letter-spacing: -.04em; }
.login-aside { display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(36px, 7vw, 90px); color: #fff; background: radial-gradient(circle at 80% 10%, #4f46e5 0, #312e81 28%, #0f172a 68%, #020617 100%); }
.login-aside h2 { max-width: 680px; margin: 16px 0 8px; font-size: clamp(2rem, 4.5vw, 4.8rem); line-height: 1.04; letter-spacing: -.045em; }
.login-aside p { max-width: 600px; color: var(--slate-300); font-size: 1rem; line-height: 1.7; }
.signal { width: max-content; padding: 6px 9px; border: 1px solid #818cf8; border-radius: 7px; color: #c7d2fe; font-size: .62rem; font-weight: 800; letter-spacing: .12em; }
.stack-form { display: grid; gap: 14px; margin-top: 24px; }
.stack-form label { display: grid; gap: 6px; color: var(--slate-700); font-size: .72rem; font-weight: 700; }
.stack-form button { padding: 11px 14px; }
.docs-shell { max-width: 960px; margin: 0 auto; padding: clamp(28px, 7vw, 76px); }
.docs-shell .panel { display: grid; gap: 10px; padding: 20px; }
.docs-shell code { display: block; padding: 10px; border-radius: 8px; background: var(--slate-100); overflow: auto; }
.docs-shell a { color: var(--indigo); font-weight: 700; }

@media (max-width: 1040px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-grid { grid-template-columns: 1fr; }
  .dashboard-grid, .management-grid, .detail-grid, .operations-grid, .compare-grid, .template-workbench, .policy-layout { grid-template-columns: 1fr; }
  .vendor-profile-form { grid-template-columns: 1fr; }
  .vendor-profile-fields { grid-template-columns: repeat(2,minmax(150px,1fr)); }
  .settlement-batch-grid { grid-template-columns: 1fr; }
  .statement-main { grid-template-columns: 90px 1fr 120px; }
  .statement-main .settlement-status,.statement-main form { grid-column: auto; }
  .form-panel { position: static; }
  .role-guide-grid { grid-template-columns: 1fr 1fr; }
  .process-card { grid-row: span 2; }
  .template-filter-bar { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .questionnaire-detail-layout { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .vendor-tabs { padding: 5px; }
  .vendor-tabs a { min-width: 104px; }
  .commission-tier-head { display: none; }
  .commission-tier-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .commission-tier-row label > span:first-child { display: block; }
  .inspection-policy-grid { grid-template-columns: 1fr; }
  .app-shell { display: block; }
  .sidebar { position: static; height: auto; }
  .brand-lockup { min-height: 72px; }
  .company-name { display: none; }
  .sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sidebar-footer { position: absolute; right: 12px; top: 4px; border: 0; }
  .quiet-button { color: var(--slate-300); }
  .topbar { padding: 0 16px; }
  .live-badge { display: none; }
  .content { padding: 20px 14px 48px; }
  .page-header { display: grid; }
  .search-form { min-width: 0; }
  .company-chip { width: max-content; }
  .role-tabs { top: 65px; margin-left: -14px; margin-right: -14px; border-left: 0; border-right: 0; border-radius: 0; }
  .role-tabs a { flex: 0 0 auto; }
  .role-hero { min-height: 220px; display: grid; padding: 24px 20px; }
  .role-guide-grid { grid-template-columns: 1fr; }
  .process-card { grid-row: auto; }
  .guide-callout { grid-template-columns: 1fr; gap: 8px; }
  .alert-list article { align-items: flex-start; flex-direction: column; }
  .runner-strip { align-items: flex-start; flex-direction: column; }
  .runner-list { width: 100%; justify-content: flex-start; }
  .capability-cards article { align-items: flex-start; flex-direction: column; }
  .capability-card-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .capability-card-actions form { width: 100%; }
  .page-actions { align-items: stretch; flex-direction: column; }
  .statement-main { grid-template-columns: 1fr; align-items: start; }
  .settlement-batch-card > footer { align-items: stretch; flex-direction: column; }
  .settlement-batch-card footer button { width: 100%; }
  .conversation-launcher { grid-template-columns: 1fr; }
  .response-template-list { grid-template-columns: 1fr; }
  .template-control-heading { align-items: stretch; flex-direction: column; }
  .primary-action { width: 100%; }
  .template-filter-bar { grid-template-columns: 1fr; padding: 14px; }
  .template-library-summary { gap: 8px 14px; padding: 10px 14px; }
  .template-library-summary span:last-child { width: 100%; margin-left: 0; }
  .response-card { grid-template-columns: 1fr; gap: 12px; padding: 15px; }
  .template-card-actions { display: flex; padding: 12px 0 0; border-top: 1px solid var(--slate-100); border-left: 0; }
  .template-card-actions > * { flex: 1; }
  .template-card-actions button { width: 100%; }
  .template-pagination { flex-wrap: wrap; }
  .template-pagination > span { order: -1; width: 100%; text-align: center; }
  .conversation-tabs { overflow-x: auto; }
  .conversation-tabs a { flex: 0 0 auto; min-width: 120px; }
  .chat-stream { min-height: 420px; padding: 13px; }
  .chat-message { max-width: 86%; }
  .chat-readonly { align-items: flex-start; flex-direction: column; }
  .version-callout,.draft-toolbar { align-items: flex-start; flex-direction: column; }
  .question-editor { grid-template-columns: 1fr; padding-left: 44px; }
  .question-editor > label:first-of-type { grid-column: auto; }
  .question-fields { grid-template-columns: 1fr; }
  .condition-fields,.preview-parameters { grid-template-columns: 1fr; }
  .question-editor-footer { align-items: stretch; flex-direction: column; }
  .question-editor-actions { width: 100%; }
  .question-editor-actions button { flex: 1; min-width: 0; }
  .preview-master-form fieldset > div { grid-template-columns: 1fr; }
  .preview-master-form footer { align-items: stretch; flex-direction: column; }
  .variable-groups.compact section { grid-template-columns: 1fr; }
  .template-dialog { width: calc(100vw - 18px); max-height: calc(100vh - 18px); border-radius: 14px; }
  .faq-dialog .dialog-shell { height: calc(100vh - 18px); max-height: calc(100vh - 18px); }
  .faq-dialog-header { grid-template-columns: minmax(0,1fr) 36px; padding: 14px; }
  .faq-version-flow { display: none; }
  .faq-dialog-icon { width: 36px; height: 36px; border-radius: 10px; }
  .faq-editor-grid { grid-template-columns: 1fr; }
  .faq-copy-pane { padding: 17px; border-right: 0; border-bottom: 1px solid var(--slate-200); }
  .faq-preview-pane { padding: 17px; }
  .faq-dialog-actions { align-items: stretch; flex-direction: column; padding: 11px 14px; }
  .faq-dialog-actions > div:last-child { width: 100%; }
  .faq-dialog-actions > div:last-child button { flex: 1; }
  .simulator-layout { grid-template-columns: 1fr; }
  .simulator-profile-editor { grid-template-columns: 1fr; }
  .simulator-context { position: static; }
  .simulator-composer { grid-template-columns: 1fr; }
  .simulator-chat .chat-message.outgoing { max-width: 94%; }
  .simulator-prompt-actions { align-items: stretch; flex-direction: column; }
  .questionnaire-directory,.questionnaire-overview-grid { grid-template-columns: 1fr; }
  .questionnaire-directory-card { grid-template-columns: 42px minmax(0,1fr); }
  .questionnaire-card-arrow { grid-column: 2; }
  .draft-workspace-header { align-items: stretch; flex-direction: column; }
  .dialog-shell { max-height: calc(100vh - 18px); }
  .dialog-header { padding: 16px; }
  .dialog-form { padding: 16px; }
  .dialog-field-grid { grid-template-columns: 1fr; }
  .dialog-actions { bottom: -16px; margin: 4px -16px -16px; padding: 12px 16px; }
  .stats-grid { gap: 10px; }
  .stats-grid article { min-height: 110px; padding: 15px; }
}
.case-flow-panel { border-color: #c9d3ff; background: linear-gradient(135deg,#fff 0%,#f7f8ff 100%); }
.case-flow-panel .panel-heading { border-bottom: 1px solid #e2e7ff; }
.prequote-group-form { max-width: 860px; }
.flow-ready { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid #dfe5ff; border-radius: 14px; background: #fff; }
.flow-ready strong { color: var(--slate-900); }
.flow-ready small { color: var(--slate-500); }
.form-hint { margin: 0; color: #8a5a13; font-size: 13px; line-height: 1.5; }
.fulfilment-control-panel form[action$="/whatsapp-groups"] { display: none; }
@media (max-width: 480px) {
  .commission-tier-row { grid-template-columns: 1fr; }
  .vendor-profile-fields .wide-field { grid-column: auto; }
  .stats-grid { grid-template-columns: 1fr; }
  .vendor-profile-fields { grid-template-columns: 1fr; }
  .sidebar nav { grid-template-columns: 1fr 1fr; }
  .status-chip { font-size: 0; }
  .status-chip span { margin: 0; }
  .login-shell { grid-template-columns: 1fr; }
  .login-aside { min-height: 38vh; }
  .inline-actions, .publish-form { align-items: stretch; flex-direction: column; }
  .field-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  ::view-transition-old(page-content), ::view-transition-new(page-content) { animation: none !important; }
}

/* DataTables' theme declares the current-page colour with high specificity. */
.directory-controls div.dt-container div.dt-paging button.dt-paging-button.current,
.directory-controls div.dt-container div.dt-paging button.dt-paging-button.current:hover,
.directory-controls div.dt-container div.dt-paging button.dt-paging-button.current:focus {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: var(--indigo) !important;
}
.role-profile-meta { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:16px 0; padding:13px 16px; border:1px solid #dfe4f3; border-radius:14px; background:#fff; color:var(--slate-500); font-size:13px; }
.profile-sync-policy { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:18px; margin:16px 0; padding:18px; border:1px solid #cfd5ff; border-radius:16px; background:linear-gradient(135deg,#f7f7ff,#eef5ff); box-shadow:0 8px 24px #4f46e50b; }
.profile-sync-clock { display:grid; place-items:center; min-width:94px; padding:13px; border-radius:13px; color:#fff; background:linear-gradient(135deg,#574ae9,#3530a8); }
.profile-sync-clock span { font-size:25px; font-weight:900; letter-spacing:-.04em; }.profile-sync-clock small { opacity:.78; font-size:10px; }
.profile-sync-policy h3,.profile-sync-policy p { margin:0; }.profile-sync-policy p:last-child { margin-top:5px; color:var(--slate-500); font-size:13px; line-height:1.55; }
.profile-sync-policy code { max-width:360px; padding:10px 12px; border:1px solid #d8dcf6; border-radius:10px; color:#4146af; background:#fff; font-size:12px; overflow-wrap:anywhere; }
.role-profile-meta > div { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.role-profile-meta code { padding:7px 10px; border-radius:8px; background:#f3f5fb; color:#4249bd; }
.role-profile-tabs a { justify-content:space-between; gap:20px; }
.role-profile-tabs small { color:inherit; opacity:.7; font-size:11px; }
.role-key-panel { margin:16px 0 18px; overflow:hidden; }
.role-key-panel .panel-heading p:last-child { margin:5px 0 0; color:var(--slate-500); font-size:13px; font-weight:500; }
.role-key-content { display:grid; gap:16px; padding:20px; }
.role-key-create { display:grid; grid-template-columns:minmax(240px,1fr) minmax(280px,420px) auto; align-items:end; gap:16px; padding:16px 18px; border:1px solid #dde2f1; border-radius:14px; background:linear-gradient(135deg,#fafbff,#f7f8ff); }
.role-key-create-copy { display:grid; align-self:center; gap:3px; }.role-key-create-copy strong { color:var(--slate-800); }.role-key-create-copy span { color:var(--slate-500); font-size:12px; }
.role-key-create label { display:grid; gap:7px; color:var(--slate-600); font-size:12px; font-weight:800; }
.role-key-create input { min-height:42px; border:1px solid #d9deed; border-radius:10px; padding:0 12px; background:#fff; }
.role-key-create .primary-action,.generated-key-callout .primary-action.compact { width:auto; white-space:nowrap; }
.generated-key-callout { display:grid; grid-template-columns:minmax(220px,.7fr) minmax(280px,1fr) auto; align-items:center; gap:16px; margin:18px 20px 0; padding:16px; border:1px solid #acd9c0; border-radius:14px; background:#effaf4; }
.generated-key-callout div { display:grid; gap:3px; }.generated-key-callout strong { color:#17623a; }.generated-key-callout span { color:#4f6f5d; font-size:12px; }
.generated-key-callout code { display:block; padding:11px 12px; overflow:auto; border:1px solid #cce8d8; border-radius:9px; color:#174d32; background:#fff; white-space:nowrap; }
.role-key-list { display:grid; overflow:hidden; border:1px solid #e2e6f1; border-radius:14px; background:#fff; }.role-key-empty { display:grid; min-height:76px; place-items:center; color:var(--slate-400); }
.role-key-list-head,.role-key-row { display:grid; grid-template-columns:minmax(240px,1.5fr) 90px 145px 145px 72px; align-items:center; gap:14px; }
.role-key-list-head { min-height:38px; padding:0 16px; color:var(--slate-400); background:#f6f7fb; font-size:11px; font-weight:850; letter-spacing:.03em; }
.role-key-row { min-height:58px; padding:9px 16px; border-top:1px solid #edf0f6; transition:background .15s ease; }.role-key-list-head + .role-key-row { border-top:0; }.role-key-row:hover { background:#fafbff; }
.role-key-identity { display:flex; align-items:center; gap:12px; min-width:0; }.role-key-row strong { overflow:hidden; color:var(--slate-800); text-overflow:ellipsis; white-space:nowrap; }.role-key-row code { padding:4px 7px; border-radius:7px; color:#5258b6; background:#f1f2ff; font-size:12px; white-space:nowrap; }
.role-key-status { justify-self:start; padding:4px 8px; border-radius:999px; color:#217649; background:#eaf8ef; font-size:11px; font-weight:850; }.role-key-status.revoked { color:#64748b; background:#eef1f5; }
.role-key-row time,.role-key-last-used { color:var(--slate-500); font-size:12px; }.role-key-last-used { color:var(--slate-400); }
.role-key-action { display:flex; justify-content:flex-end; }.role-key-action form { margin:0; }.role-key-action .secondary-action { min-height:32px; padding:5px 10px; }
.role-key-row.is-revoked { opacity:.62; background:#f8f9fb; }
.secondary-action.danger { color:#b42318; border-color:#f1c8c4; background:#fff8f7; }
.role-profile-layout { display:grid; grid-template-columns:minmax(520px,1.05fr) minmax(400px,.95fr); gap:18px; align-items:start; }
.role-profile-editor,.role-profile-preview-panel { overflow:hidden; }
.profile-form-body { display:grid; gap:16px; padding:20px; }
.profile-form-body label { display:grid; gap:7px; color:var(--slate-700); font-size:13px; font-weight:700; }
.profile-form-body label span { display:flex; justify-content:space-between; gap:12px; }
.profile-form-body label small { color:var(--slate-400); font-weight:500; }
.profile-form-body textarea { min-height:92px; resize:vertical; line-height:1.6; border:1px solid #d9deed; border-radius:12px; padding:12px 13px; background:#fbfcff; }
.profile-form-body textarea:focus,.profile-form-body input:focus { outline:3px solid rgba(79,70,229,.12); border-color:#6c63ef; background:#fff; }
.profile-list-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.profile-security-note { display:flex; gap:12px; align-items:center; padding:12px 14px; border:1px solid #f1dda7; border-radius:12px; color:#765719; background:#fffaf0; font-size:13px; }
.role-profile-editor > footer { display:flex; justify-content:flex-end; padding:14px 20px; border-top:1px solid var(--slate-100); background:#fafbfe; }
.role-profile-preview-panel { position:sticky; top:82px; }
.role-profile-preview { min-height:700px; max-height:calc(100vh - 190px); margin:0; padding:22px; overflow:auto; white-space:pre-wrap; word-break:break-word; background:#171a2b; color:#e9ebff; font:13px/1.72 ui-monospace,SFMono-Regular,Menlo,monospace; }
.case-detail-tabs { margin-bottom:18px; }
.case-detail-tabs button { display:flex; align-items:center; justify-content:center; gap:7px; min-width:145px; padding:11px 18px; border:0; border-radius:10px; color:var(--slate-500); background:transparent; font-weight:800; cursor:pointer; }
.case-detail-tabs button:hover { color:var(--indigo); background:#f4f3ff; }
.case-detail-tabs button.active { color:#fff; background:linear-gradient(135deg,#5a4df0,#4438db); box-shadow:0 7px 18px #4f46e52b; }
.case-detail-tabs button span { min-width:20px; padding:2px 6px; border-radius:999px; background:#ffffff2d; font-size:11px; }
[data-case-panel][hidden] { display:none!important; }
.datatable-panel { padding:0; overflow:hidden; }
.datatable-panel .table-wrap { overflow-x:auto; }
.dt-container { padding:16px 18px 18px; }
.dt-layout-row { align-items:center!important; gap:14px; margin:0 0 14px!important; }
.dt-layout-row:last-child { margin:14px 0 0!important; }
.dt-search label,.dt-length label { color:var(--slate-500); font-size:13px; font-weight:700; }
.dt-container .dt-input { min-height:38px; margin-left:8px!important; border:1px solid var(--slate-200)!important; border-radius:10px!important; background:#fff!important; }
.dt-container .dt-search input { width:250px; }
.dt-info { color:var(--slate-500)!important; font-size:13px; }
.dt-paging-button { border:0!important; border-radius:8px!important; }
.dt-paging-button.current { color:#fff!important; background:var(--indigo)!important; }
.operations-datatable thead th { white-space:nowrap; }
.operations-datatable td:last-child { min-width:78px; white-space:nowrap; }
.operations-datatable tbody tr { transition:background .15s ease; }
.operations-datatable tbody tr:hover { background:#fafaff; }
.case-attention,.attention-label { display:inline-flex; padding:4px 8px; border-radius:999px; color:#315b46; background:#eaf8f0; font-size:11px; font-style:normal; font-weight:850; white-space:nowrap; }
.case-attention.warning { color:#88580b; background:#fff4d8; }.case-attention.critical,.case-attention.danger,.attention-label { color:#b42318; background:#fff0ef; }.case-attention.muted { color:#64748b; background:#eef2f6; }
.vendor-identity em { margin-left:6px; vertical-align:middle; }
@media (max-width:1120px){.role-profile-layout{grid-template-columns:1fr}.role-profile-preview-panel{position:static}.role-profile-preview{min-height:420px;max-height:700px}.role-key-create{grid-template-columns:1fr minmax(260px,400px) auto}.role-key-list{overflow-x:auto}.role-key-list-head,.role-key-row{min-width:820px}.generated-key-callout{grid-template-columns:1fr auto}.generated-key-callout code{grid-column:1/-1;grid-row:2}}
@media (max-width:760px){.role-profile-meta{align-items:flex-start;flex-direction:column}.profile-sync-policy{grid-template-columns:1fr}.profile-sync-clock{width:94px}.profile-sync-policy code{max-width:100%}.profile-list-fields{grid-template-columns:1fr}.role-profile-preview{padding:16px;min-height:360px}.role-key-create,.generated-key-callout{display:flex;align-items:stretch;flex-direction:column}.role-key-list{overflow:visible;border:0;background:transparent}.role-key-list-head{display:none}.role-key-row{display:grid;grid-template-columns:1fr auto;gap:9px;min-width:0;padding:14px;border:1px solid #e2e6f1;border-radius:12px;background:#fff}.role-key-identity{grid-column:1/-1}.role-key-row time,.role-key-last-used{grid-column:1}.role-key-action{grid-column:2;grid-row:2/4;align-items:center}.generated-key-callout code{width:100%}.case-detail-tabs{overflow-x:auto;justify-content:flex-start}.case-detail-tabs button{flex:0 0 auto;min-width:125px}.dt-layout-row{align-items:stretch!important;flex-direction:column}.dt-container .dt-search input{width:100%;margin:7px 0 0!important}.dt-search label,.dt-length label{display:block}}

.flow-detail-header { align-items:flex-end; }
.flow-header-actions { display:flex; align-items:flex-end; gap:12px; }
.flow-header-actions form { display:flex; align-items:flex-end; gap:10px; margin:0; }
.flow-header-actions label { display:grid; gap:5px; color:var(--slate-500); font-size:11px; font-weight:800; }
.flow-header-actions input { min-width:250px; min-height:40px; border:1px solid var(--slate-200); border-radius:9px; padding:0 11px; }
.flow-workbench { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(330px,.7fr); align-items:start; gap:18px; }
.flow-stage-column,.flow-side-column { display:grid; gap:16px; }
.flow-stage-toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 20px; }
.flow-stage-toolbar h2,.flow-stage-toolbar p { margin:0; }.flow-stage-toolbar p:last-child { margin-top:4px; }
.flow-stage-toolbar-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.flow-stage-list { display:grid; gap:12px; }
.flow-stage-card { overflow:hidden; border:1px solid #dfe4f1; border-radius:16px; background:#fff; box-shadow:0 7px 24px #2230570a; transition:box-shadow .16s ease,transform .16s ease,border-color .16s ease; }
.flow-stage-card.is-dragging { opacity:.55; transform:scale(.99); }.flow-stage-card.drag-over { border-color:#7c72ee; box-shadow:0 0 0 3px #6d63f21f; }
.flow-stage-card.is-disabled { opacity:.65; background:#f8f9fc; }
.flow-stage-card-header { display:grid; grid-template-columns:22px 38px minmax(0,1fr) auto; align-items:center; gap:12px; min-height:68px; padding:13px 16px; }
.flow-drag-handle { color:#9aa3b7; font-size:20px; letter-spacing:-5px; }.flow-drag-handle[draggable="true"] { cursor:grab; }.flow-stage-number { display:grid; width:34px; height:34px; place-items:center; border-radius:10px; color:#5146c7; background:#eeedff; font-size:12px; font-weight:900; }
.flow-stage-card-header div { min-width:0; }.flow-stage-card-header strong { display:block; color:var(--slate-800); }.flow-stage-card-header small { color:var(--slate-400); }.flow-stage-card-header code { color:#5d5bc6; }
.flow-stage-description { max-width:760px; margin:7px 0 0; color:#596277; font-size:12px; line-height:1.55; }
.flow-stage-items { display:grid; gap:8px; padding:0 16px 14px 88px; }
.flow-stage-items.question-drop-target { padding-top:10px; border-radius:12px; outline:2px dashed #7568ea; outline-offset:-4px; background:#f7f6ff; }
.flow-item-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 12px; border:1px solid #edf0f6; border-radius:11px; background:#fbfcff; }
.flow-item-row.is-question { grid-template-columns:22px auto minmax(0,1fr) auto; }.flow-item-row.is-question.is-question-dragging { opacity:.45; }.flow-item-row.is-question.question-drop-target { border-color:#7568ea; box-shadow:0 0 0 3px #7568ea1f; }
.question-drag-handle { display:grid; width:22px; min-width:22px; min-height:32px; padding:0; place-items:center; border:0; color:#8e96aa; background:transparent; font-size:16px; letter-spacing:-5px; cursor:grab; touch-action:none; user-select:none; }.question-drag-handle:hover { color:#574fc1; background:#eeedff; }.question-drag-handle:active { cursor:grabbing; }.question-drag-handle:disabled { color:#c7ccd8; cursor:not-allowed; background:transparent; }
.question-drag-ghost { position:fixed; z-index:10000; width:min(320px,70vw); padding:10px 12px; border:1px solid #7568ea; border-radius:10px; color:#34346b; background:#fff; box-shadow:0 14px 35px #25306b33; font-size:12px; font-weight:800; pointer-events:none; }
.flow-item-row div { min-width:0; }.flow-item-row strong { display:block; overflow:hidden; color:var(--slate-700); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }.flow-item-row small { color:var(--slate-400); font-size:10px; }
.flow-item-type { min-width:50px; padding:4px 7px; border-radius:999px; text-align:center; color:#3f46a9; background:#eceeff; font-size:10px; font-weight:900; }.flow-item-type.script { color:#17603d; background:#e7f8ee; }.flow-item-type.ai_guidance { color:#88580b; background:#fff3d6; }
.flow-empty-items { margin:0; padding:10px 12px; border:1px dashed #dfe4ed; border-radius:10px; color:var(--slate-400); font-size:12px; }
.flow-stage-settings { border-top:1px solid #edf0f5; }.flow-stage-settings > summary { padding:11px 16px; color:#565bc1; background:#fafaff; font-size:12px; font-weight:850; cursor:pointer; }.flow-stage-settings-body { display:grid; gap:14px; padding:15px 16px; }
.flow-stage-form { display:grid; grid-template-columns:minmax(170px,1fr) 90px 110px auto; align-items:end; gap:10px; }.flow-stage-form label,.flow-item-form label,.flow-preview-panel label { display:grid; gap:5px; color:var(--slate-500); font-size:11px; font-weight:800; }
.flow-stage-form .flow-stage-description-field { grid-column:1/-1; }.flow-stage-description-field textarea { min-height:92px; resize:vertical; line-height:1.5; }
.flow-condition-builder{grid-column:1/-1;display:grid;grid-template-columns:minmax(180px,.7fr) minmax(0,1.3fr);gap:8px 12px;padding:12px;border:1px solid var(--slate-200);border-radius:12px}.flow-condition-builder legend{padding:0 6px;color:var(--slate-700);font-size:.68rem;font-weight:850}.flow-condition-builder>label{grid-row:span 2}.flow-condition-row{display:grid;grid-template-columns:minmax(0,1fr) 76px;gap:8px}.flow-condition-builder>small{grid-column:1/-1;color:var(--slate-400);font-size:.6rem}
.flow-stage-form input,.flow-stage-form select,.flow-stage-form textarea,.flow-item-form input,.flow-item-form select,.flow-item-form textarea,.flow-preview-panel select,.flow-preview-panel textarea { width:100%; min-height:38px; border:1px solid #dce1ee; border-radius:9px; padding:8px 10px; background:#fff; }
.flow-item-form { display:grid; grid-template-columns:repeat(3,minmax(120px,1fr)); gap:10px; padding-top:14px; border-top:1px solid #edf0f5; }.flow-item-form label[data-question-field],.flow-item-form label[data-content-field] { grid-column:span 2; }.flow-item-form button { justify-self:start; align-self:end; }
.add-custom-stage { padding:16px 18px; }.add-custom-stage > summary { color:#5048b8; font-weight:850; cursor:pointer; }.add-custom-stage form { margin-top:14px; }
.flow-preview-panel,.question-library-panel { padding:18px; }.flow-preview-panel h3,.question-library-panel h3 { margin:2px 0 5px; }.flow-preview-panel .muted,.question-library-panel .muted { margin:0 0 14px; }
.flow-preview-panel { display:grid; gap:11px; background:linear-gradient(160deg,#fff,#f8f8ff); }.flow-preview-result { min-height:130px; padding:14px; border:1px solid #dfe3f4; border-radius:12px; background:#fff; }.flow-preview-result span { color:#7a8192; font-size:10px; font-weight:900; letter-spacing:.08em; }.flow-preview-result p { margin:8px 0 0; color:#283044; white-space:pre-wrap; line-height:1.65; }
.flow-preview-panel details { font-size:12px; }.flow-preview-panel details ul { padding-left:18px; color:var(--slate-500); }
.question-library-panel { position:sticky; top:80px; z-index:3; max-height:calc(100vh - 96px); overflow:auto; box-shadow:0 14px 34px #23305a14; }.question-library-title { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.question-library-title .muted { margin-bottom:0; }.question-library-search { display:grid; gap:5px; margin-top:14px; color:var(--slate-500); font-size:11px; font-weight:800; }.question-library-search input { width:100%; min-height:40px; border:1px solid #dce1ee; border-radius:10px; padding:8px 11px; background:#fff; }.question-library-actions { display:flex; gap:8px; margin-top:10px; }.question-library-actions form { margin:0; }.question-library-actions button { min-height:36px; }
.question-library-list { display:grid; gap:7px; max-height:360px; margin:12px 0; overflow:auto; }.question-library-list article { display:grid; grid-template-columns:22px minmax(0,1fr) auto; align-items:center; gap:9px; padding:10px; border:1px solid #eceff5; border-radius:10px; background:#fbfcff; }.question-library-list article.is-question-dragging { opacity:.45; }.question-library-list strong,.question-library-list small { display:block; }.question-library-list strong { color:var(--slate-700); font-size:12px; }.question-library-list small { margin-top:4px; color:var(--slate-400); font-size:10px; }.question-edit-action { min-height:30px; padding:0 8px; color:#5148b6; background:#efefff; font-size:11px; }.question-library-empty { margin:10px 0; padding:12px; border:1px dashed #dce1ee; border-radius:10px; color:var(--slate-400); text-align:center; font-size:12px; }
.question-library-panel > details > summary { color:#5148b6; font-size:12px; font-weight:850; cursor:pointer; }.question-library-form { margin-top:14px; }.version-history-panel form { margin:6px 0 0; }
.question-editor-dialog { width:min(760px,calc(100vw - 28px)); max-height:calc(100vh - 40px); padding:0; border:0; border-radius:18px; color:var(--slate-700); background:#fff; box-shadow:0 28px 80px #1119364d; }.question-editor-dialog::backdrop { background:#151a2b99; backdrop-filter:blur(3px); }.question-editor-dialog .question-library-form { display:grid; gap:16px; margin:0; padding:22px; }.question-dialog-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }.question-dialog-heading h3,.question-dialog-heading p { margin:0; }.question-dialog-heading .muted { margin-top:5px; }.dialog-close { width:36px; min-width:36px; min-height:36px; padding:0; border-radius:50%; color:#60697b; background:#f1f3f7; font-size:22px; }.question-dialog-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.question-dialog-grid label { display:grid; gap:5px; color:var(--slate-500); font-size:11px; font-weight:800; }.question-dialog-grid input,.question-dialog-grid select,.question-dialog-grid textarea { width:100%; border:1px solid #dce1ee; border-radius:9px; padding:9px 10px; background:#fff; }.question-dialog-grid input[readonly] { color:#6b7280; background:#f4f5f8; }.question-dialog-wide { grid-column:1/-1; }.question-dialog-actions { display:flex; justify-content:flex-end; gap:8px; padding-top:4px; border-top:1px solid #edf0f5; }
@media (max-width:1180px){.flow-workbench{grid-template-columns:1fr}.flow-side-column{grid-template-columns:1fr 1fr}.question-library-panel{position:static;max-height:none}.flow-side-column .version-history-panel{grid-column:1/-1}}
@media (max-width:760px){.flow-detail-header,.flow-header-actions,.flow-header-actions form{align-items:stretch;flex-direction:column}.flow-header-actions input{min-width:0;width:100%}.flow-overview-grid{grid-template-columns:1fr 1fr}.flow-stage-toolbar{align-items:flex-start;flex-direction:column}.flow-stage-toolbar-actions{width:100%}.flow-stage-toolbar-actions>*{flex:1}.flow-side-column{grid-template-columns:1fr}.flow-side-column .version-history-panel{grid-column:auto}.flow-stage-card-header{grid-template-columns:18px 32px minmax(0,1fr)}.flow-stage-card-header .template-status{grid-column:3}.flow-stage-items{padding:0 12px 12px}.flow-item-row,.flow-item-row.is-question{grid-template-columns:22px auto minmax(0,1fr)}.flow-item-row:not(.is-question){grid-template-columns:auto minmax(0,1fr)}.flow-item-row form,.flow-item-row>.danger-action{grid-column:2/-1}.question-library-actions{align-items:stretch;flex-direction:column}.question-library-actions form,.question-library-actions button{width:100%}.question-dialog-grid{grid-template-columns:1fr}.question-dialog-wide{grid-column:auto}.question-dialog-actions{align-items:stretch;flex-direction:column-reverse}.question-dialog-actions button{width:100%}.flow-stage-form,.flow-item-form,.flow-condition-builder{grid-template-columns:1fr}.flow-condition-builder>label{grid-row:auto}.flow-item-form label[data-question-field],.flow-item-form label[data-content-field]{grid-column:auto}}

/* Local-first customer service flow editor */
.flow-editor-shell{--flow-ink:#182034;--flow-muted:#6e778b;--flow-line:#e5e9f1;--flow-purple:#6259e8;--flow-purple-soft:#f0efff;display:grid;gap:14px;color:var(--flow-ink)}
.flow-editor-topbar{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:minmax(220px,.75fr) auto minmax(460px,1.25fr);align-items:center;gap:18px;margin:0 -2px;padding:14px 16px;border:1px solid var(--flow-line);border-radius:16px;background:#ffffffed;box-shadow:0 12px 30px #17223d12;backdrop-filter:blur(14px)}
.flow-editor-heading{display:flex;align-items:center;gap:11px}.flow-editor-heading p,.flow-editor-heading h2{margin:0}.flow-editor-heading p{color:var(--flow-muted);font-size:10px;font-weight:800;letter-spacing:.08em}.flow-editor-heading h2{margin-top:2px;font-size:20px;line-height:1.1}.flow-category-mark{display:grid;width:42px;height:42px;place-items:center;border-radius:13px;color:#fff;background:linear-gradient(145deg,#736aee,#5147cf);font-size:13px;font-weight:950;box-shadow:0 9px 20px #675ee83d}
.flow-editor-meta{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap}.flow-editor-meta>span{padding:5px 8px;border:1px solid #e7eaf1;border-radius:999px;color:#737b8e;background:#f8f9fc;font-size:10px;white-space:nowrap}.flow-editor-meta strong{color:#303950}.flow-editor-meta .flow-local-state{color:#287054;background:#ebf9f1;border-color:#d7f1e2}.flow-editor-meta .flow-local-state.is-dirty{color:#95620a;background:#fff7df;border-color:#f3df9e}
.flow-editor-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}.flow-editor-actions form{display:flex;align-items:center;gap:8px;margin:0}.flow-summary-input{position:relative;display:block}.flow-summary-input span{position:absolute;left:10px;top:4px;color:#858da0;font-size:8px;font-weight:850}.flow-summary-input input{width:210px;height:42px;padding:15px 10px 3px;border:1px solid #dfe3ec;border-radius:10px;color:#30384a;background:#fff;font-size:11px}
.flow-btn{min-height:38px;padding:0 13px;border:1px solid transparent;border-radius:10px;font-size:11px;font-weight:850;white-space:nowrap;cursor:pointer}.flow-btn-primary{color:#fff;background:#5d54df;box-shadow:0 7px 16px #5d54df2b}.flow-btn-primary:hover{background:#4e46c9}.flow-btn-secondary{color:#5149c3;background:#eeedff}.flow-btn-ghost{color:#4d5668;border-color:#e1e5ed;background:#fff}.flow-btn-ghost:hover{border-color:#c8cddd;background:#f8f9fb}
.flow-editor-notice{display:flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid #e4e8f0;border-radius:11px;color:#6d7587;background:#f8fafc;font-size:11px}.flow-editor-notice strong{color:#394157}.flow-live-dot{width:7px;height:7px;border-radius:50%;background:#41b883;box-shadow:0 0 0 4px #41b8831c}
.flow-workbench-editor{grid-template-columns:minmax(0,1.75fr) minmax(310px,.65fr);gap:16px}.flow-workbench-editor .flow-stage-list{container-type:inline-size;gap:9px}.flow-workbench-editor .flow-stage-card{border-color:#e3e7ef;border-radius:13px;box-shadow:0 4px 16px #29324e08}.flow-workbench-editor .flow-stage-card:hover{border-color:#d4d9e5;box-shadow:0 8px 24px #29324e0d}.flow-workbench-editor .flow-stage-card.is-disabled{opacity:.72}
.flow-workbench-editor .flow-stage-card-header{grid-template-columns:26px 34px minmax(0,1fr) auto 36px;gap:10px;min-height:60px;padding:10px 12px}.flow-workbench-editor .flow-drag-handle{display:grid;width:26px;min-width:26px;height:32px;padding:0;place-items:center;border:0;border-radius:7px;color:#9ca4b6;background:transparent;font-size:18px;letter-spacing:0;cursor:grab}.flow-workbench-editor .flow-drag-handle:hover{color:#5f56d9;background:#f0efff}.flow-workbench-editor .flow-stage-number{width:30px;height:30px;border-radius:9px}.flow-stage-title>div{display:flex;align-items:center;gap:8px}.flow-stage-title>div strong{font-size:14px}.flow-stage-title code{padding:2px 5px;border-radius:5px;color:#727990!important;background:#f4f5f8;font-size:8px}.flow-stage-title p{display:-webkit-box;overflow:hidden;margin:3px 0 0;color:#767f91;font-size:10px;line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:1}.flow-content-count{color:#9299aa;font-size:9px;white-space:nowrap}.flow-content-count strong{display:inline!important;color:#525b6e!important;font-size:11px!important}
.flow-stage-menu{position:relative}.flow-stage-menu>summary{display:grid;width:32px;height:32px;place-items:center;border-radius:8px;color:#778095;background:#f5f6f9;cursor:pointer;list-style:none}.flow-stage-menu>summary::-webkit-details-marker{display:none}.flow-stage-menu>div{position:absolute;right:0;top:38px;z-index:5;width:150px;padding:5px;border:1px solid #e1e5ed;border-radius:10px;background:#fff;box-shadow:0 14px 34px #1d263b26}.flow-stage-menu button{width:100%;min-height:34px;padding:0 9px;border:0;border-radius:7px;text-align:left;color:#40495c;background:transparent;font-size:10px}.flow-stage-menu button:hover{background:#f4f5f8}.flow-stage-menu button.danger-action{color:#b14848}
.flow-workbench-editor .flow-stage-items{gap:6px;padding:0 12px 10px 82px}.flow-workbench-editor .flow-item-row,.flow-workbench-editor .flow-item-row.is-question{grid-template-columns:20px auto minmax(0,1fr) 27px;min-height:44px;padding:6px 8px;border-color:#edf0f4;border-radius:9px;background:#fafbfc}.flow-workbench-editor .flow-item-row strong{font-size:11px}.flow-workbench-editor .flow-item-row small{font-size:8px}.flow-workbench-editor .flow-item-type{min-width:42px;padding:3px 6px;font-size:8px}.flow-remove-item{display:grid;width:26px;min-width:26px;min-height:26px;padding:0;place-items:center;border:0;border-radius:7px;color:#a1a7b3;background:transparent;font-size:17px}.flow-remove-item:hover{color:#b53e46;background:#fff0f1}.flow-workbench-editor .flow-empty-items{padding:8px 10px;font-size:10px;text-align:center;background:#fcfcfd}
.flow-workbench-editor .flow-stage-settings{overflow:hidden;border-top:1px solid #e9ecf2;background:#fff}.flow-workbench-editor .flow-stage-settings>summary{display:grid;grid-template-columns:30px minmax(0,1fr) 18px;align-items:center;gap:9px;padding:11px 14px 11px 82px;color:#4f49b9;background:#fbfbff;cursor:pointer;list-style:none}.flow-workbench-editor .flow-stage-settings>summary::-webkit-details-marker{display:none}.flow-workbench-editor .flow-stage-settings>summary>span:nth-child(2) strong,.flow-workbench-editor .flow-stage-settings>summary>span:nth-child(2) small{display:block}.flow-workbench-editor .flow-stage-settings>summary>span:nth-child(2) strong{font-size:10px}.flow-workbench-editor .flow-stage-settings>summary>span:nth-child(2) small{margin-top:2px;color:#969cad;font-size:8px;font-weight:650}.flow-settings-summary-icon{display:grid;width:28px;height:28px;place-items:center;border:1px solid #dddafe;border-radius:8px;background:#f0efff;font-size:11px}.flow-workbench-editor .flow-stage-settings>summary>i{position:relative;width:14px;height:14px}.flow-workbench-editor .flow-stage-settings>summary>i:before,.flow-workbench-editor .flow-stage-settings>summary>i:after{position:absolute;left:3px;top:6px;width:8px;height:1.5px;border-radius:2px;background:#8983cd;content:"";transition:transform .18s ease}.flow-workbench-editor .flow-stage-settings>summary>i:after{transform:rotate(90deg)}.flow-workbench-editor .flow-stage-settings[open]>summary>i:after{transform:rotate(0)}
.flow-workbench-editor .flow-stage-settings-body{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:12px;padding:14px;background:#f6f7fa}.flow-settings-panel{min-width:0;padding:14px;border:1px solid #e1e5ee;border-radius:12px;background:#fff;box-shadow:0 4px 12px #26304b08}.flow-settings-panel>header{display:flex;align-items:center;gap:9px;margin-bottom:13px;padding-bottom:11px;border-bottom:1px solid #edf0f4}.flow-settings-panel>header>span{display:grid;width:27px;height:27px;place-items:center;border-radius:8px;color:#554dcc;background:#eeedff;font-size:9px;font-weight:950}.flow-settings-panel>header strong,.flow-settings-panel>header small{display:block}.flow-settings-panel>header strong{color:#30394c;font-size:11px}.flow-settings-panel>header small{margin-top:2px;color:#939aaa;font-size:8px;font-weight:650}.flow-stage-fields{display:grid;grid-template-columns:minmax(180px,1fr) 125px;gap:11px}.flow-stage-fields label,.flow-local-item-form label{display:grid;gap:6px;color:#687184;font-size:9px;font-weight:850}.flow-stage-fields input,.flow-stage-fields select,.flow-stage-fields textarea,.flow-local-item-form input,.flow-local-item-form select,.flow-local-item-form textarea{width:100%;min-height:40px;padding:9px 11px;border:1px solid #dce1eb;border-radius:9px;color:#323b4e;background:#fff;outline:0;font-size:10px;transition:border-color .16s ease,box-shadow .16s ease}.flow-stage-fields textarea,.flow-local-item-form textarea{line-height:1.55;resize:vertical}.flow-stage-fields input:focus,.flow-stage-fields select:focus,.flow-stage-fields textarea:focus,.flow-local-item-form input:focus,.flow-local-item-form select:focus,.flow-local-item-form textarea:focus{border-color:#756de0;box-shadow:0 0 0 3px #756de014}.flow-stage-fields .flow-stage-description-field{grid-column:1/-1}.flow-stage-description-field>span{display:flex;align-items:center;justify-content:space-between}.flow-stage-description-field em{padding:2px 6px;border-radius:999px;color:#6a64bd;background:#f1f0ff;font-size:7px;font-style:normal}.flow-stage-description-field small{color:#969dac;font-size:8px;font-weight:650;line-height:1.45}
.flow-local-item-form{display:block;padding:14px;border-top:1px solid #e1e5ee}.flow-local-item-form>header{display:flex}.flow-add-content-grid{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(120px,.55fr);gap:11px}.flow-add-content-main{grid-column:1/-1}.flow-local-item-form footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:11px;border-top:1px solid #edf0f4}.flow-local-item-form footer p{margin:0;color:#949baa;font-size:8px;line-height:1.4}.flow-local-item-form footer .flow-btn{min-height:38px}.flow-local-item-form label[hidden]{display:none}
.flow-side-column{gap:12px}.flow-workbench-editor .question-library-panel{top:92px;max-height:calc(100vh - 110px);padding:15px;border:1px solid #e0e4ec;border-radius:14px;background:#fff;box-shadow:0 8px 24px #26304b0e}.question-library-title h3{margin:2px 0 0;font-size:17px}.flow-workbench-editor .question-library-panel>.muted{margin:6px 0 10px;font-size:10px}.flow-workbench-editor .question-library-search{position:relative;margin-top:0}.flow-workbench-editor .question-library-search span{position:absolute;left:10px;top:10px;color:#9299a8;font-size:9px}.flow-workbench-editor .question-library-search input{min-height:38px;padding-left:44px;border-radius:9px;font-size:10px}.question-add-button{width:100%;margin-top:8px}.flow-workbench-editor .question-library-list{max-height:510px;margin:9px 0 0}.flow-workbench-editor .question-library-list article{padding:8px;border-radius:9px}.flow-workbench-editor .question-library-list strong{font-size:10px;line-height:1.35}.flow-workbench-editor .question-library-list small{font-size:8px}.flow-workbench-editor .question-edit-action{min-height:27px;font-size:9px}.flow-version-mini{padding:14px;border:1px solid #e3e7ee;border-radius:13px;background:#fff}.flow-version-mini>div{display:flex;align-items:center;justify-content:space-between}.flow-version-mini h3{margin:0;font-size:13px}.flow-version-mini>div span{color:#939aaa;font-size:8px}.flow-version-mini p{display:grid;grid-template-columns:28px 64px minmax(0,1fr);align-items:center;gap:7px;margin:9px 0 0;padding-top:9px;border-top:1px solid #eff1f5;font-size:9px}.flow-version-mini p strong{color:#5b53d2}.flow-version-mini p span{color:#687184}.flow-version-mini p small{overflow:hidden;color:#969cab;text-overflow:ellipsis;white-space:nowrap}
.flow-stage-dialog{width:min(520px,calc(100vw - 28px));padding:0;border:0;border-radius:17px;box-shadow:0 28px 80px #1119364d}.flow-stage-dialog::backdrop{background:#151a2b99;backdrop-filter:blur(3px)}.flow-stage-dialog form{display:grid;gap:13px;padding:21px}.flow-stage-dialog label{display:grid;gap:5px;color:#626b7e;font-size:10px;font-weight:800}.flow-stage-dialog input,.flow-stage-dialog textarea{width:100%;padding:9px;border:1px solid #dce1e9;border-radius:9px}.flow-inspection-policy{margin-top:18px}.question-drag-handle{letter-spacing:0}
@media(max-width:1400px){.flow-editor-topbar{grid-template-columns:1fr auto}.flow-editor-meta{display:none}.flow-editor-actions{grid-column:1/-1}.flow-editor-actions form{flex:1}.flow-summary-input{flex:1}.flow-summary-input input{width:100%}}
@media(max-width:1180px){.flow-workbench-editor .flow-stage-settings-body{grid-template-columns:1fr}}
@container(max-width:760px){.flow-workbench-editor .flow-stage-settings-body{grid-template-columns:1fr}}
@media(max-width:980px){.flow-workbench-editor{grid-template-columns:1fr}.flow-workbench-editor .question-library-panel{position:static;max-height:none}.flow-workbench-editor .question-library-list{max-height:340px}}
@media(max-width:680px){.flow-editor-topbar{position:static;display:flex;align-items:stretch;flex-direction:column}.flow-editor-actions,.flow-editor-actions form{align-items:stretch;flex-direction:column}.flow-summary-input input,.flow-editor-actions .flow-btn{width:100%}.flow-editor-notice{align-items:flex-start}.flow-workbench-editor .flow-stage-card-header{grid-template-columns:24px 30px minmax(0,1fr) 32px}.flow-content-count{display:none}.flow-workbench-editor .flow-stage-items{padding:0 9px 9px}.flow-workbench-editor .flow-stage-settings>summary{grid-template-columns:28px minmax(0,1fr) 16px;padding-left:12px}.flow-workbench-editor .flow-stage-settings-body{padding:10px}.flow-settings-panel{padding:12px}.flow-stage-fields,.flow-add-content-grid{grid-template-columns:1fr}.flow-stage-fields .flow-stage-description-field,.flow-add-content-main{grid-column:auto}.flow-local-item-form footer{align-items:stretch;flex-direction:column}.flow-local-item-form footer .flow-btn{width:100%}.flow-workbench-editor .flow-item-row,.flow-workbench-editor .flow-item-row.is-question{grid-template-columns:18px auto minmax(0,1fr) 25px}}

/* Flow editor refinement: sticky dual library, floating simulator and policy */
.flow-backbar{display:flex;align-items:center;gap:9px;min-height:34px;margin:-4px 0 0;color:#8a92a3;font-size:10px}.flow-backbar a{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid #e2e6ed;border-radius:9px;color:#4f596b;background:#fff;font-weight:800;text-decoration:none}.flow-backbar a:hover{border-color:#cbd0db;color:#5148c8}.flow-backbar a span{font-size:13px}.flow-backbar-separator{width:1px;height:17px;background:#dfe3ea}.flow-backbar strong{color:#3c4659;font-size:11px}.flow-backbar small{padding:3px 7px;border-radius:999px;color:#6b65bd;background:#f0efff;font-size:8px;font-weight:800}
.flow-workbench-editor .flow-side-column{align-self:stretch;display:block;min-width:0}.flow-library-sticky{position:sticky;top:91px;display:grid;gap:10px;max-height:calc(100vh - 105px);overflow:auto;scrollbar-width:thin;scrollbar-color:#d6dae4 transparent}.flow-workbench-editor .question-library-panel{position:static;max-height:none;padding:0;overflow:hidden;border-radius:14px;box-shadow:0 8px 24px #26304b0e}
.flow-library-accordion{border-bottom:1px solid #e8ebf1;background:#fff}.flow-library-accordion:last-child{border-bottom:0}.flow-library-accordion>summary{display:grid;grid-template-columns:34px minmax(0,1fr) auto 14px;align-items:center;gap:9px;padding:12px;cursor:pointer;list-style:none}.flow-library-accordion>summary::-webkit-details-marker{display:none}.flow-library-accordion>summary>div strong,.flow-library-accordion>summary>div small{display:block}.flow-library-accordion>summary>div strong{color:#2c3548;font-size:12px}.flow-library-accordion>summary>div small{margin-top:2px;color:#939aaa;font-size:8px}.flow-library-accordion>summary>i{position:relative;width:10px;height:10px}.flow-library-accordion>summary>i:before,.flow-library-accordion>summary>i:after{position:absolute;left:1px;top:4px;width:8px;height:1.5px;border-radius:2px;background:#8d94a4;content:"";transition:transform .18s ease}.flow-library-accordion>summary>i:after{transform:rotate(90deg)}.flow-library-accordion[open]>summary>i:after{transform:rotate(0)}.flow-library-icon{display:grid;width:32px;height:32px;place-items:center;border-radius:9px;font-size:12px;font-weight:950}.flow-library-icon.question{color:#534bc6;background:#eeedff}.flow-library-icon.script{color:#0e7a55;background:#e8f8f1}.flow-library-accordion-body{padding:0 12px 12px;border-top:1px solid #f0f2f5}.flow-library-accordion-body .question-library-search{margin-top:10px}.flow-manage-library{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding:8px 9px;border:1px solid #e4e7ed;border-radius:8px;color:#5b6475;background:#fafbfc;font-size:9px;font-weight:800;text-decoration:none}.flow-manage-library:hover{border-color:#cdd2dd;color:#5148c8}.flow-library-sticky .question-library-list{max-height:310px}.engagement-library-list article{grid-template-columns:22px minmax(0,1fr) auto}.engagement-library-list article p{display:-webkit-box;overflow:hidden;margin:3px 0 0;color:#687184;font-size:9px;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2}.flow-script-badge{padding:3px 6px;border-radius:999px;color:#187456;background:#e7f7ef;font-size:8px;font-weight:900}
.flow-chat-launcher{position:fixed;right:28px;bottom:25px;z-index:70;display:flex;align-items:center;gap:8px;min-height:50px;padding:0 16px 0 7px;border:0;border-radius:999px;color:#fff;background:linear-gradient(145deg,#665de7,#4f46c7);box-shadow:0 15px 34px #5148c852;font-size:11px;font-weight:850;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}.flow-chat-launcher:hover{transform:translateY(-2px);box-shadow:0 18px 40px #5148c866}.flow-chat-launcher.is-open{transform:scale(.94);opacity:.92}.flow-chat-launcher-icon{display:grid;width:38px;height:38px;place-items:center;border-radius:50%;background:#ffffff20;font-size:16px}.flow-chat-widget{position:fixed;right:28px;bottom:88px;z-index:69;width:min(370px,calc(100vw - 32px));height:min(560px,calc(100vh - 125px));overflow:hidden;border:1px solid #e2e5ed;border-radius:19px;background:#fff;box-shadow:0 28px 70px #17203b42;animation:flow-chat-in .18s ease-out}.flow-chat-widget[hidden]{display:none}@keyframes flow-chat-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}.flow-chat-widget>header{display:grid;grid-template-columns:38px minmax(0,1fr) 32px;align-items:center;gap:9px;padding:13px 14px;color:#fff;background:linear-gradient(135deg,#5f57d9,#443caa)}.flow-chat-widget>header strong,.flow-chat-widget>header small{display:block}.flow-chat-widget>header strong{font-size:12px}.flow-chat-widget>header small{margin-top:3px;color:#dedbff;font-size:8px}.flow-chat-widget>header small span{display:inline-block;width:6px;height:6px;margin-right:4px;border-radius:50%;background:#59e3a8}.flow-chat-avatar{display:grid;width:36px;height:36px;place-items:center;border-radius:11px;background:#ffffff20;font-size:11px;font-weight:950}.flow-chat-widget>header button{display:grid;width:30px;min-width:30px;min-height:30px;padding:0;place-items:center;border:0;border-radius:50%;color:#eeeaff;background:#ffffff14;font-size:19px}.flow-chat-stream{display:flex;height:calc(100% - 154px);padding:13px;overflow:auto;flex-direction:column;gap:8px;background:#f8f9fc}.flow-chat-message{max-width:84%;padding:9px 11px;border-radius:12px;box-shadow:0 2px 7px #26304b0a}.flow-chat-message p{margin:0;font-size:10px;line-height:1.55;white-space:pre-wrap}.flow-chat-message.ai{align-self:flex-start;border-bottom-left-radius:4px;color:#424b5c;background:#fff}.flow-chat-message.user{align-self:flex-end;border-bottom-right-radius:4px;color:#fff;background:#6158d8}.flow-chat-context{height:28px;overflow:hidden;padding:7px 12px;color:#9299a8;background:#fff;font-size:8px;text-overflow:ellipsis;white-space:nowrap}.flow-chat-widget>form{display:grid;grid-template-columns:minmax(0,1fr) 38px;align-items:end;gap:7px;padding:9px;border-top:1px solid #eceef3;background:#fff}.flow-chat-widget textarea{width:100%;min-height:42px;max-height:90px;padding:8px 9px;border:1px solid #dfe3eb;border-radius:10px;outline:0;resize:none;font-size:10px}.flow-chat-widget textarea:focus{border-color:#746be4;box-shadow:0 0 0 3px #746be414}.flow-chat-widget form button{display:grid;width:38px;min-width:38px;min-height:38px;padding:0;place-items:center;border:0;border-radius:10px;color:#fff;background:#5c53d1;font-size:15px}
.flow-policy-card{display:grid;grid-template-columns:minmax(250px,.8fr) minmax(320px,1.1fr) minmax(300px,1.25fr) auto;align-items:center;gap:18px;margin-top:18px;padding:17px 18px;border:1px solid #e1e5ed;border-radius:15px;background:linear-gradient(135deg,#fff,#fafbff);box-shadow:0 7px 22px #26304b0a}.flow-policy-heading{display:flex;align-items:center;gap:11px}.flow-policy-heading>span{display:grid;width:40px;height:40px;place-items:center;border-radius:12px;color:#5148c8;background:#eeedff;font-size:18px}.flow-policy-heading h3,.flow-policy-heading p{margin:0}.flow-policy-heading h3{color:#2d3547;font-size:13px}.flow-policy-heading p{margin-top:4px;color:#8a92a2;font-size:9px;line-height:1.4}.flow-policy-toggles{display:grid;gap:7px}.flow-policy-toggles label{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:8px;cursor:pointer}.flow-policy-toggles input{position:absolute;opacity:0}.flow-policy-toggles label>span{position:relative;width:28px;height:17px;border-radius:999px;background:#cfd4df;transition:background .16s}.flow-policy-toggles label>span:after{position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #1c243433;content:"";transition:transform .16s}.flow-policy-toggles input:checked+span{background:#6259df}.flow-policy-toggles input:checked+span:after{transform:translateX(11px)}.flow-policy-toggles label>div strong,.flow-policy-toggles label>div small{display:block}.flow-policy-toggles strong{color:#434c5e;font-size:9px}.flow-policy-toggles small{margin-top:2px;color:#969dac;font-size:7px}.flow-policy-copy{display:grid;gap:5px}.flow-policy-copy>span{color:#70798b;font-size:9px;font-weight:850}.flow-policy-copy textarea{width:100%;min-height:60px;padding:8px 9px;border:1px solid #dfe3eb;border-radius:9px;background:#fff;font-size:9px;line-height:1.45;resize:vertical}.flow-policy-card>.flow-btn{align-self:end}
@media(max-width:1450px){.flow-policy-card{grid-template-columns:1fr 1fr}.flow-policy-copy{grid-column:1/-1}.flow-policy-card>.flow-btn{grid-column:1/-1;justify-self:end}}
@media(max-width:1180px){.flow-workbench-editor .flow-side-column{align-self:start}.flow-library-sticky{position:static;max-height:none}.flow-library-sticky .question-library-list{max-height:260px}}
@media(max-width:680px){.flow-backbar small{display:none}.flow-chat-launcher{right:14px;bottom:14px;padding-right:9px}.flow-chat-launcher-label{display:none}.flow-chat-widget{right:10px;bottom:76px;width:calc(100vw - 20px);height:min(560px,calc(100vh - 95px))}.flow-policy-card{grid-template-columns:1fr}.flow-policy-copy{grid-column:auto}.flow-policy-card>.flow-btn{width:100%;justify-self:stretch}}
.export-json-button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 15px;border:1px solid #d9dded;border-radius:11px;color:#5148c8;background:#fff;font-size:12px;font-weight:900;text-decoration:none;white-space:nowrap;box-shadow:0 4px 14px rgba(48,56,90,.05)}.export-json-button:hover{border-color:#aaa5ef;background:#f7f6ff}.export-action-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap}