:root {
  --ink: #17171d;
  --muted: #71727b;
  --line: #e6e6eb;
  --paper: #f5f5f2;
  --lime: #d9ff55;
  --violet: #7057e8;
  --violet-soft: #eeeaff;
  --danger: #d94c63;
  --warning: #c88918;
  --success: #27875d;
  --radius: 18px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--paper); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.eyebrow { margin: 0 0 7px; color: #8a8a93; font-size: 10px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.brand-mark { font-size: 16px; font-weight: 950; letter-spacing: .17em; }
.demo-watermark { position: fixed; z-index: 100; right: 16px; bottom: 10px; color: rgba(23,23,29,.2); font-size: 9px; font-weight: 900; letter-spacing: .12em; pointer-events: none; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 236px minmax(0,1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 28px 18px 20px; color: white; background: #15151b; }
.sidebar .brand-mark { padding: 0 10px; }
.demo-chip { align-self: flex-start; margin: 14px 10px 28px; padding: 6px 9px; border: 1px solid #454733; border-radius: 999px; color: var(--lime); font-size: 9px; font-weight: 850; }
.sidebar nav { display: grid; gap: 7px; }
.nav-item { width: 100%; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; min-height: 46px; padding: 0 12px; border: 0; border-radius: 12px; color: #b9bac2; background: transparent; text-align: left; }
.nav-item:hover { color: white; background: #222229; }
.nav-item.active { color: #16171b; background: var(--lime); }
.nav-item i { font-style: normal; font-size: 17px; }
.nav-item span { font-size: 12px; font-weight: 800; }
.nav-item small { min-width: 23px; padding: 3px 5px; border-radius: 999px; color: inherit; background: rgba(255,255,255,.12); font-size: 8px; text-align: center; }
.nav-item.active small { background: rgba(0,0,0,.1); }
.sidebar-note { display: grid; gap: 8px; margin-top: auto; padding: 15px; border: 1px solid #303038; border-radius: 14px; background: #1c1c23; }
.sidebar-note b { margin-bottom: 3px; color: var(--lime); font-size: 10px; }
.sidebar-note span { color: #9899a4; font-size: 9px; }
.sidebar-note span::before { content: "✓"; margin-right: 6px; color: var(--lime); }
.reset-button, .logout-button { margin-top: 10px; min-height: 38px; border: 1px solid #34343c; border-radius: 10px; color: #b0b1b9; background: transparent; font-size: 10px; }
.reset-button { border-color: #5c5538; color: #d8ca91; }
.reset-button:hover { color: var(--lime); border-color: #8c824c; }
.logout-button:hover { color: white; border-color: #5c5d68; }

.main-area { min-width: 0; padding: 28px clamp(20px,3vw,44px) 52px; }
.topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 22px; }
.topbar h1 { margin: 0; font-size: clamp(28px,3vw,42px); letter-spacing: -.035em; }
.topbar p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.live-state { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.live-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px #dff4e9; }
.top-actions button, .link-button { min-height: 36px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: white; font-size: 10px; font-weight: 800; }
.synthetic-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 12px 15px; border: 1px solid #dfcf94; border-radius: 13px; background: #fff8dc; }
.synthetic-banner b { padding: 5px 7px; border-radius: 7px; color: #563f02; background: #f0cc52; font-size: 8px; letter-spacing: .08em; }
.synthetic-banner span { color: #78672f; font-size: 10px; line-height: 1.5; }
.page-message { min-height: 18px; margin: -8px 0 10px; color: var(--danger); font-size: 10px; }
.page-message.success { color: var(--success); }
.view { display: none; }
.view.active { display: block; }
.shop-strip { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.shop-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: var(--lime); background: #1b1b21; font-size: 11px; font-weight: 950; }
.shop-strip div:nth-child(2) { display: grid; gap: 3px; }
.shop-strip b { font-size: 12px; }
.shop-strip small { color: var(--muted); font-size: 9px; }
.shop-strip > span { margin-left: auto; color: var(--muted); font-size: 9px; }
.kpi-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 11px; }
.kpi-card { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.kpi-card span { display: block; color: var(--muted); font-size: 9px; font-weight: 750; }
.kpi-card strong { display: block; margin: 15px 0 8px; font-size: clamp(20px,2vw,30px); letter-spacing: -.03em; white-space: nowrap; }
.kpi-card small { font-size: 9px; font-weight: 850; }
.kpi-card small.positive { color: var(--success); }
.kpi-card small.negative { color: var(--danger); }
.kpi-card small.warning { color: var(--warning); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(340px,.8fr); gap: 14px; margin-top: 14px; }
.panel { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.panel-head h2 { margin: 0; font-size: 17px; }
.panel-head > span { color: var(--muted); font-size: 9px; }
.section-gap { margin-top: 14px; }
.trend-chart { height: 224px; display: grid; grid-template-columns: repeat(7,1fr); align-items: end; gap: 9px; margin-top: 24px; padding-top: 12px; border-bottom: 1px solid var(--line); }
.trend-column { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 7px; }
.trend-bar { width: min(42px,72%); min-height: 20px; border-radius: 9px 9px 2px 2px; background: linear-gradient(180deg,var(--violet),#a798ff); transition: height .25s ease; }
.trend-height-2 { height: 20%; }.trend-height-3 { height: 30%; }.trend-height-4 { height: 40%; }.trend-height-5 { height: 50%; }.trend-height-6 { height: 60%; }
.trend-height-7 { height: 70%; }.trend-height-8 { height: 80%; }.trend-height-9 { height: 90%; }.trend-height-10 { height: 100%; }
.trend-column b { font-size: 8px; }
.trend-column small { margin-bottom: -21px; color: var(--muted); font-size: 8px; }
.diagnosis-list { display: grid; gap: 10px; margin-top: 17px; }
.diagnosis-item { padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: #fafafa; }
.diagnosis-item > div { display: flex; align-items: center; gap: 8px; }
.diagnosis-item i { width: 7px; height: 7px; border-radius: 50%; }
.diagnosis-item.high i { background: var(--danger); }.diagnosis-item.medium i { background: var(--warning); }.diagnosis-item.low i { background: var(--success); }
.diagnosis-item b { font-size: 11px; }
.diagnosis-item p { margin: 8px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.diagnosis-item small { display: block; margin-top: 7px; color: var(--violet); font-size: 9px; font-weight: 750; }
.table-wrap { overflow: auto; margin-top: 16px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 10px; border-bottom: 1px solid var(--line); font-size: 10px; text-align: left; white-space: nowrap; }
th { color: var(--muted); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
td:first-child { font-weight: 800; }
.status-pill { display: inline-block; min-width: 56px; padding: 5px 7px; border-radius: 999px; font-size: 8px; font-weight: 850; text-align: center; }
.status-pill.risk, .status-pill.rejected { color: #b23850; background: #ffe8ec; }
.status-pill.watch, .status-pill.awaiting_approval { color: #92640b; background: #fff2d0; }
.status-pill.healthy, .status-pill.succeeded { color: #21704f; background: #ddf5e9; }
.status-pill.suggested { color: #5b45b8; background: var(--violet-soft); }

.section-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 36px; margin: 10px 0 24px; }
.section-intro h2 { max-width: 780px; margin: 0; font-size: clamp(23px,2.5vw,34px); letter-spacing: -.03em; }
.section-intro > p { max-width: 440px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.mode-legend { display: flex; gap: 16px; margin-bottom: 14px; color: var(--muted); font-size: 9px; }
.mode-legend span { display: flex; align-items: center; gap: 5px; }
.dot { width: 7px; height: 7px; border-radius: 50%; }.dot.suggestion{background:#9b86ff}.dot.approval{background:#e2a934}.dot.automatic{background:#3ab77a}
.rule-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.rule-card { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.rule-card > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.rule-card h3 { margin: 4px 0 0; font-size: 15px; }
.rule-card .domain { color: var(--violet); font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.rule-flow { display: grid; grid-template-columns: 1fr 24px 1fr; align-items: center; gap: 7px; margin: 17px 0; }
.rule-flow div { min-height: 65px; padding: 11px; border-radius: 11px; background: #f6f6f8; }
.rule-flow span { display: block; color: var(--muted); font-size: 8px; }
.rule-flow b { display: block; margin-top: 6px; font-size: 10px; line-height: 1.4; }
.rule-flow > i { color: var(--muted); font-style: normal; text-align: center; }
.rule-controls { display: flex; align-items: center; gap: 9px; }
.rule-controls select { min-height: 34px; padding: 0 9px; border: 1px solid var(--line); border-radius: 9px; background: white; font-size: 9px; }
.toggle { position: relative; width: 38px; height: 22px; display: inline-block; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle span { position: absolute; inset: 0; border-radius: 999px; background: #d8d8de; transition: .2s; }
.toggle span::after { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; border-radius: 50%; background: white; transition: .2s; }
.toggle input:checked + span { background: var(--violet); }.toggle input:checked + span::after { transform: translateX(16px); }
.action-ledger { display: grid; gap: 9px; margin-top: 16px; }
.action-row { display: grid; grid-template-columns: 95px minmax(0,1fr) 130px; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; }
.action-row > span { color: var(--muted); font-size: 9px; }.action-row b { font-size: 10px; }.action-row small { justify-self: end; }

.service-shell { min-height: 590px; display: grid; grid-template-columns: 250px minmax(380px,1fr) 255px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.conversation-list { border-right: 1px solid var(--line); background: #fafafa; }
.conversation-list-head { display: flex; justify-content: space-between; padding: 17px; border-bottom: 1px solid var(--line); font-size: 11px; }
.conversation-button { width: 100%; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.conversation-button:hover, .conversation-button.active { background: white; }
.conversation-button > div { display: flex; justify-content: space-between; gap: 8px; }
.conversation-button b { font-size: 10px; }.conversation-button small { color: var(--muted); font-size: 8px; }.conversation-button p { overflow: hidden; margin: 7px 0 0; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.priority { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--warning); }.priority.high{background:var(--danger)}.priority.low{background:var(--success)}
.chat-panel { min-width: 0; display: flex; flex-direction: column; }
.chat-panel > header { min-height: 66px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.chat-panel > header h3 { margin: 0 0 5px; font-size: 13px; }.chat-panel > header p { margin: 0; color: var(--muted); font-size: 8px; }
.chat-messages { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 20px; overflow: auto; background: #f8f8f9; }
.message { max-width: 78%; padding: 11px 13px; border-radius: 13px 13px 13px 3px; color: #35363d; background: white; font-size: 10px; line-height: 1.55; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.message.agent { align-self: flex-end; border-radius: 13px 13px 3px 13px; color: white; background: var(--violet); }
.message small { display: block; margin-top: 6px; color: inherit; opacity: .6; font-size: 7px; }
.reply-evidence { padding: 10px 18px; border-top: 1px solid var(--line); color: #63599b; background: #f2efff; font-size: 8px; }
.reply-box { padding: 14px 16px; border-top: 1px solid var(--line); }
.reply-box textarea, #agent-form textarea { width: 100%; resize: vertical; padding: 12px; border: 1px solid var(--line); border-radius: 11px; outline: none; font-size: 10px; }
.reply-box textarea:focus, #agent-form textarea:focus { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-soft); }
.reply-box > div { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 8px; }.reply-box > div span { margin-right: auto; color: var(--muted); font-size: 8px; }
.primary, .secondary { min-height: 34px; padding: 0 12px; border-radius: 9px; font-size: 9px; font-weight: 850; }
.primary { border: 0; color: white; background: var(--violet); }.secondary { border: 1px solid var(--line); color: var(--ink); background: white; }
.primary:disabled, .secondary:disabled { opacity: .5; cursor: wait; }
.customer-context { padding: 18px; border-left: 1px solid var(--line); background: #fcfcfc; }
.customer-context h3 { margin: 0 0 4px; font-size: 13px; }.customer-context > p { margin: 0 0 16px; color: var(--muted); font-size: 8px; }
.context-group { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.context-group span { display: block; margin-bottom: 8px; color: var(--muted); font-size: 8px; }.context-group b { display: block; margin-top: 7px; font-size: 9px; font-weight: 750; }

.agent-layout { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(320px,.7fr); gap: 14px; }
.agent-chat { min-height: 650px; display: flex; flex-direction: column; }
.agent-message-list { flex: 1; display: flex; flex-direction: column; gap: 13px; max-height: 480px; overflow: auto; padding: 3px; }
.agent-message { max-width: 86%; padding: 15px; border-radius: 15px 15px 15px 4px; background: #f3f3f5; }
.agent-message.operator { align-self: flex-end; border-radius: 15px 15px 4px 15px; color: white; background: #1d1d24; }
.agent-message > small { color: var(--violet); font-size: 8px; font-weight: 900; }.agent-message.operator > small { color: var(--lime); }
.agent-message p { margin: 8px 0 0; font-size: 11px; line-height: 1.65; }
.evidence-box { margin-top: 11px; padding: 10px; border-radius: 10px; background: rgba(255,255,255,.75); }.agent-message.operator .evidence-box{display:none}.evidence-box b{font-size:8px}.evidence-box ul{margin:7px 0 0;padding-left:16px;color:var(--muted);font-size:8px;line-height:1.6}
.prompt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 9px; padding-top: 15px; border-top: 1px solid var(--line); }
.prompt-chips button { padding: 7px 9px; border: 1px solid var(--line); border-radius: 999px; color: #5c4aa8; background: var(--violet-soft); font-size: 8px; }
#agent-form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 9px; }
#agent-form button { height: 44px; }
.agent-side { display: grid; align-content: start; gap: 14px; }
.approval-card { margin-top: 14px; padding: 14px; border: 1px solid #e3d7a4; border-radius: 13px; background: #fff9e4; }
.approval-card > span { color: #9b6b08; font-size: 8px; font-weight: 900; }.approval-card h3{margin:7px 0;font-size:12px}.approval-card p{margin:0;color:var(--muted);font-size:9px;line-height:1.55}.approval-card pre{overflow:auto;margin:10px 0;padding:9px;border-radius:8px;color:#d6dae1;background:#1e1f26;font-size:7px}.approval-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:10px}
.empty { padding: 18px; color: var(--muted); font-size: 9px; text-align: center; }
.audit-panel { max-height: 290px; overflow: auto; }.audit-entry { padding: 10px 0; border-bottom: 1px solid var(--line); }.audit-entry b{display:block;font-size:9px}.audit-entry span{display:block;margin-top:4px;color:var(--muted);font-size:7px}

.login-body { min-height: 100vh; display: grid; place-items: center; overflow: hidden; color: white; background: #131319; }
.login-body::before { content: ""; position: fixed; inset: -30%; background: radial-gradient(circle at 18% 36%,rgba(112,87,232,.35),transparent 28%),radial-gradient(circle at 78% 76%,rgba(217,255,85,.13),transparent 24%); pointer-events: none; }
.login-shell { position: relative; width: min(1080px,calc(100vw - 36px)); display: grid; grid-template-columns: 1.2fr .8fr; gap: 80px; align-items: center; }
.login-story .brand-mark { margin-bottom: 80px; }.login-story h1{margin:0;font-size:clamp(42px,5vw,70px);line-height:1.02;letter-spacing:-.055em}.login-story>p:not(.eyebrow){max-width:610px;margin:25px 0;color:#aaaab4;font-size:13px;line-height:1.8}.login-points{display:flex;flex-wrap:wrap;gap:8px}.login-points span{padding:8px 11px;border:1px solid #34343d;border-radius:999px;color:#cacbd1;font-size:9px}
.login-card { padding: 36px; border: 1px solid #35353e; border-radius: 24px; background: rgba(31,31,39,.9); box-shadow: 0 25px 80px rgba(0,0,0,.35); backdrop-filter: blur(18px); }
.lock-icon { width: 44px; height: 44px; display:grid;place-items:center;margin-bottom:24px;border-radius:13px;color:#17171d;background:var(--lime);font-size:19px}.login-card h2{margin:0;font-size:26px}.login-card>p:not(.eyebrow){margin:10px 0 24px;color:#9d9ea8;font-size:10px;line-height:1.6}.login-card label{display:block;margin-bottom:7px;color:#bfc0c7;font-size:9px}.login-card input{width:100%;height:48px;padding:0 13px;border:1px solid #41414b;border-radius:11px;color:white;background:#17171d;outline:none}.login-card input:focus{border-color:var(--lime);box-shadow:0 0 0 3px rgba(217,255,85,.11)}.login-card form button{width:100%;height:48px;display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:0 16px;border:0;border-radius:11px;color:#17171d;background:var(--lime);font-size:10px;font-weight:900}.login-card form button:disabled{opacity:.6}.login-card>small{display:block;margin-top:22px;color:#6f707a;font-size:8px;line-height:1.6}.form-message{min-height:17px!important;margin:10px 0 0!important;color:#ff94a7!important;font-size:9px!important}

@media (max-width: 1180px) { .kpi-grid{grid-template-columns:repeat(3,1fr)}.service-shell{grid-template-columns:220px 1fr}.customer-context{display:none}.agent-layout{grid-template-columns:1fr}.agent-side{grid-template-columns:1fr 1fr}.dashboard-grid{grid-template-columns:1fr}.login-shell{gap:40px} }
@media (max-width: 760px) { .app-shell{display:block}.sidebar{position:static;width:100%;height:auto;padding:18px}.sidebar nav{grid-template-columns:repeat(2,1fr)}.sidebar-note{display:none}.logout-button{margin-top:14px}.main-area{padding:20px 14px 40px}.topbar,.section-intro{display:block}.top-actions{margin-top:15px}.synthetic-banner{align-items:flex-start}.kpi-grid{grid-template-columns:repeat(2,1fr)}.rule-grid{grid-template-columns:1fr}.service-shell{display:block}.conversation-list{max-height:220px;overflow:auto;border-right:0;border-bottom:1px solid var(--line)}.chat-panel{min-height:560px}.agent-side{grid-template-columns:1fr}.action-row{grid-template-columns:1fr}.action-row small{justify-self:start}.login-shell{display:block;padding:36px 0}.login-story{display:none}.login-card{max-width:440px;margin:auto} }