:root {
  color-scheme: light;
  --ink: #202421;
  --ink-soft: #626963;
  --muted: #8c938d;
  --line: #e3e6e1;
  --line-strong: #d4d9d3;
  --canvas: #f4f5f2;
  --surface: #ffffff;
  --sidebar: #242925;
  --sidebar-soft: #343a35;
  --coral: #f1755b;
  --coral-dark: #d95c44;
  --coral-pale: #fff0eb;
  --mint: #5ab28a;
  --mint-pale: #e8f6ef;
  --amber: #d89b3c;
  --amber-pale: #fff5df;
  --purple: #8c72bc;
  --purple-pale: #f2edfa;
  --blue: #4f86ad;
  --blue-pale: #eaf3f8;
  --danger: #c84d4d;
  --shadow: 0 8px 30px rgba(31, 38, 33, 0.07);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--canvas); color: var(--ink); }
body { font-family: "Noto Sans SC", "PingFang SC", sans-serif; font-size: 14px; letter-spacing: 0; }
button, input, select { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; }

.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 30; width: 240px; min-height: 100vh;
  display: flex; flex-direction: column; color: #fff; background: var(--sidebar); border-right: 1px solid #1a1e1b;
}
.brand-block { height: 76px; padding: 0 24px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-mark { width: 34px; height: 34px; position: relative; border-radius: 10px 10px 13px 13px; background: var(--coral); box-shadow: inset 0 -4px 0 rgba(0,0,0,.09); }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; top: -4px; width: 12px; height: 12px; background: var(--coral); border-radius: 8px 8px 2px 2px; }
.brand-mark::before { left: 2px; transform: rotate(-15deg); }
.brand-mark::after { right: 2px; transform: rotate(15deg); }
.brand-mark span { position: absolute; z-index: 1; top: 14px; width: 5px; height: 5px; border-radius: 50%; background: #2c2b28; }
.brand-mark span:first-child { left: 8px; }.brand-mark span:last-child { right: 8px; }
.brand-name { font-size: 17px; font-weight: 700; line-height: 1.1; }.brand-edition { color: #a9b0aa; font: 11px "DM Mono", monospace; margin-top: 4px; text-transform: uppercase; }
.main-nav { padding: 17px 12px; flex: 1; overflow-y: auto; }
.nav-group-label { margin: 18px 12px 7px; color: #7f8981; font-size: 10px; font-weight: 600; text-transform: uppercase; }
.nav-group-label:first-child { margin-top: 0; }
.nav-item { width: 100%; height: 42px; display: flex; align-items: center; gap: 11px; padding: 0 12px; border: 0; border-radius: 6px; color: #bac2bb; background: transparent; text-align: left; transition: .18s ease; }
.nav-item svg { width: 17px; height: 17px; stroke-width: 1.8; }.nav-item span { flex: 1; }.nav-item b { color: #869087; font-size: 11px; }.nav-item em { padding: 2px 6px; color: #ffb7a8; background: rgba(241,117,91,.13); border-radius: 4px; font-size: 10px; font-style: normal; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.05); }.nav-item.active { color: #fff; background: var(--sidebar-soft); box-shadow: inset 3px 0 0 var(--coral); }
.sidebar-foot { padding: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.env-row { display: grid; grid-template-columns: 8px 1fr 30px; align-items: center; gap: 10px; }.env-row strong, .env-row small { display: block; }.env-row strong { font-size: 12px; }.env-row small { margin-top: 3px; color: #8f9991; font: 10px "DM Mono", monospace; }

.workspace { min-height: 100vh; margin-left: 240px; }
.topbar { position: sticky; top: 0; z-index: 20; height: 64px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.topbar-left, .topbar-right, .breadcrumb, .operator { display: flex; align-items: center; }.topbar-right { gap: 12px; }.breadcrumb { gap: 7px; color: var(--muted); font-size: 12px; }.breadcrumb svg { width: 13px; }.breadcrumb strong { color: var(--ink); font-weight: 600; }
.global-search { width: min(290px, 30vw); height: 36px; padding: 0 9px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 6px; background: #f8f9f7; }.global-search svg, .table-search svg { width: 16px; color: var(--muted); }.global-search input, .table-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--ink); background: transparent; }.global-search input::placeholder, .table-search input::placeholder { color: #a5aba6; }.global-search kbd { padding: 2px 5px; color: #9ba19c; background: #fff; border: 1px solid var(--line); border-radius: 4px; font: 10px "DM Mono", monospace; }
.operator { padding-left: 8px; gap: 9px; }.operator > span, .avatar { display: grid; place-items: center; border-radius: 50%; font-weight: 700; }.operator > span { width: 34px; height: 34px; color: #49352f; background: #f5d7ce; }.operator strong, .operator small { display: block; white-space: nowrap; }.operator strong { font-size: 12px; }.operator small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.icon-button { width: 36px; height: 36px; position: relative; display: inline-grid; place-items: center; padding: 0; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }.icon-button:hover { color: var(--ink); border-color: var(--line-strong); }.icon-button svg { width: 17px; height: 17px; }.icon-button.compact { width: 30px; height: 30px; }.icon-button.dark { width: 30px; height: 30px; color: #aeb6b0; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }.notification-pip { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); border: 1px solid #fff; }

.content { max-width: 1600px; margin: 0 auto; padding: 32px 32px 60px; }
.view { display: none; }.view.active { display: block; animation: viewIn .24s ease; }
@keyframes viewIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.page-heading { min-height: 76px; margin-bottom: 25px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }.eyebrow { display: block; margin-bottom: 7px; color: var(--coral-dark); font: 500 10px "DM Mono", monospace; text-transform: uppercase; }.page-heading h1 { margin: 0; font-size: 26px; line-height: 1.25; }.page-heading p { margin: 7px 0 0; color: var(--ink-soft); font-size: 12px; }.heading-actions { display: flex; align-items: center; gap: 8px; }
.button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border-radius: 6px; font-size: 12px; font-weight: 600; }.button svg { width: 15px; height: 15px; }.button.primary { color: #fff; background: var(--coral); border: 1px solid var(--coral); }.button.primary:hover { background: var(--coral-dark); }.button.secondary { color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); }.button.secondary:hover { background: #f8f9f7; }
.refresh-button.loading svg { animation: spin .8s linear infinite; }@keyframes spin { to { transform: rotate(360deg); } }

.metric-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 20px rgba(31,38,33,.04); overflow: hidden; }
.metric-item { min-width: 0; min-height: 132px; padding: 21px 22px; border-right: 1px solid var(--line); }.metric-item:last-child { border-right: 0; }.metric-item.accent { background: linear-gradient(135deg, #fff 0%, var(--coral-pale) 100%); }.metric-meta { display: flex; align-items: center; justify-content: space-between; color: var(--ink-soft); font-size: 12px; }.metric-meta svg { width: 17px; color: var(--muted); }.metric-value { margin: 9px 0 5px; font-size: 29px; font-weight: 700; line-height: 1.2; }.metric-value span { margin-left: 4px; color: var(--muted); font-size: 14px; font-weight: 500; }.metric-note { min-height: 18px; display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 10px; }.metric-note svg { width: 12px; }.metric-note.positive { color: #3c956f; }
.dashboard-grid { display: grid; grid-template-columns: minmax(520px, 1.42fr) minmax(320px, .8fr); gap: 18px; margin-bottom: 18px; }.dashboard-grid.lower { grid-template-columns: minmax(610px, 1.5fr) minmax(310px, .7fr); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 22px rgba(31,38,33,.035); overflow: hidden; }.panel-heading { min-height: 69px; padding: 17px 19px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); }.panel-heading h2 { margin: 0; font-size: 14px; }.panel-heading p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }.panel-heading select { height: 32px; padding: 0 28px 0 10px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink-soft); background: #fff; font-size: 11px; }
.system-state { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 11px; white-space: nowrap; }.status-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--muted); }.status-dot.online { background: var(--mint); box-shadow: 0 0 0 3px rgba(90,178,138,.13); }.status-dot.offline { background: #a7ada8; }.status-dot.warning { background: var(--amber); box-shadow: 0 0 0 3px rgba(216,155,60,.13); }
.service-row { min-height: 60px; padding: 9px 18px; display: grid; grid-template-columns: 34px minmax(180px,1fr) 55px 47px; align-items: center; gap: 10px; border-bottom: 1px solid #eef0ed; }.service-row:last-child { border-bottom: 0; }.service-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 6px; }.service-icon svg { width: 15px; }.service-icon.coral { color: var(--coral-dark); background: var(--coral-pale); }.service-icon.mint { color: #398a67; background: var(--mint-pale); }.service-icon.amber { color: #a16b1d; background: var(--amber-pale); }.service-icon.purple { color: #70549f; background: var(--purple-pale); }.service-icon.blue { color: #397394; background: var(--blue-pale); }.service-icon.slate { color: #59645c; background: #edf0ed; }.service-row strong, .service-row small { display: block; }.service-row strong { font-size: 11px; }.service-row small { margin-top: 3px; color: var(--muted); font: 9px "DM Mono", monospace; }.latency { color: var(--ink-soft); font: 10px "DM Mono", monospace; text-align: right; }
.state-tag { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; padding: 3px 6px; border-radius: 4px; font-size: 9px; font-weight: 600; }.state-tag.online { color: #337f5e; background: var(--mint-pale); }.state-tag.warning { color: #9a671f; background: var(--amber-pale); }.state-tag.offline { color: #737a74; background: #edf0ed; }
.chart-total { font-size: 18px; }.chart-total small { color: var(--muted); font-size: 9px; }.traffic-chart { height: 165px; padding: 24px 20px 8px; display: flex; align-items: flex-end; gap: 6px; background-image: linear-gradient(to top, #edf0ed 1px, transparent 1px); background-size: 100% 36px; }.bar-pair { height: 100%; flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }.bar { width: 42%; min-width: 3px; border-radius: 2px 2px 0 0; transition: height .4s ease; }.bar.http { background: var(--coral); }.bar.ws { background: #3f4641; }.chart-axis { padding: 4px 20px 0; display: flex; justify-content: space-between; color: var(--muted); font: 8px "DM Mono", monospace; }.chart-legend { padding: 17px 20px 18px; display: flex; align-items: center; gap: 18px; color: var(--ink-soft); font-size: 9px; }.chart-legend span { display: flex; align-items: center; gap: 6px; }.chart-legend i { width: 8px; height: 8px; border-radius: 2px; }.legend-http { background: var(--coral); }.legend-ws { background: #3f4641; }

.table-wrap { overflow-x: auto; }table { width: 100%; border-collapse: collapse; }th { height: 38px; padding: 0 14px; color: var(--muted); background: #fafbf9; border-bottom: 1px solid var(--line); font-size: 9px; font-weight: 600; text-align: left; white-space: nowrap; }td { height: 58px; padding: 8px 14px; border-bottom: 1px solid #eef0ed; color: var(--ink-soft); font-size: 10px; vertical-align: middle; }tbody tr:last-child td { border-bottom: 0; }tbody tr:hover td { background: #fcfdfb; }.table-primary { display: flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 600; white-space: nowrap; }.device-glyph { width: 28px; height: 28px; display: grid; place-items: center; color: var(--coral-dark); background: var(--coral-pale); border-radius: 6px; }.device-glyph svg { width: 14px; }.profile-avatar, .avatar { width: 30px; height: 30px; flex: 0 0 auto; color: #513c35; background: #f3d5cb; font-size: 10px; }.profile-avatar.green { color: #2f6652; background: #d9eee4; }.profile-avatar.purple { color: #5a4677; background: #e8dff2; }.connection-state { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft); }.signal-bars { height: 13px; display: inline-flex; align-items: flex-end; gap: 2px; }.signal-bars i { width: 3px; background: var(--mint); border-radius: 1px; }.signal-bars i:nth-child(1){height:4px}.signal-bars i:nth-child(2){height:7px}.signal-bars i:nth-child(3){height:10px}.signal-bars i:nth-child(4){height:13px}.text-button { display: inline-flex; align-items: center; gap: 5px; padding: 4px; color: var(--coral-dark); background: none; border: 0; font-size: 10px; font-weight: 600; }.text-button svg { width: 13px; }.row-actions { display: flex; justify-content: flex-end; }.row-menu { border: 0; background: none; color: var(--muted); padding: 6px; }.row-menu svg { width: 15px; }
.empty-state { padding: 32px 20px; color: var(--muted); font-size: 10px; text-align: center; }
.event-feed { padding: 5px 18px; }.event-item { position: relative; padding: 14px 0 14px 24px; border-bottom: 1px solid #eef0ed; }.event-item:last-child { border-bottom: 0; }.event-item::before { content: ""; position: absolute; top: 20px; left: 3px; width: 7px; height: 7px; background: var(--coral); border-radius: 50%; box-shadow: 0 0 0 4px var(--coral-pale); }.event-item strong { display: block; margin-bottom: 7px; font-size: 10px; }.event-item blockquote { margin: 0 0 7px; color: var(--ink-soft); font-size: 10px; line-height: 1.6; }.event-delta { display: flex; flex-wrap: wrap; gap: 5px; }.event-delta span { padding: 2px 5px; color: var(--coral-dark); background: var(--coral-pale); border-radius: 3px; font: 9px "DM Mono", monospace; }.event-meta { margin-top: 7px; color: var(--muted); font-size: 9px; }

.inline-toolbar { min-height: 54px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 15px; }.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #fff; }.segmented button { min-height: 34px; padding: 0 13px; border: 0; border-right: 1px solid var(--line); color: var(--ink-soft); background: #fff; font-size: 10px; }.segmented button:last-child { border-right: 0; }.segmented button.active { color: var(--coral-dark); background: var(--coral-pale); font-weight: 600; }.segmented button span { margin-left: 5px; color: var(--muted); }.table-search { width: min(255px, 36vw); height: 34px; padding: 0 10px; display: flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--line); border-radius: 6px; }.full-panel { width: 100%; }.large-table td { height: 64px; font-size: 11px; }.large-table th { height: 42px; padding: 0 18px; }.large-table td { padding: 9px 18px; }.serial { color: var(--muted); font: 10px "DM Mono", monospace; }.age-mode, .trait-chip { display: inline-block; padding: 3px 7px; border-radius: 4px; font-size: 9px; }.age-mode.adult { color: #397394; background: var(--blue-pale); }.age-mode.child { color: #a16b1d; background: var(--amber-pale); }.age-mode.elder { color: #70549f; background: var(--purple-pale); }.trait-chip { margin-right: 4px; color: var(--ink-soft); background: #f0f2ef; }
.profile-summary { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.55); }.profile-summary > div { min-height: 78px; padding: 15px 20px; display: grid; grid-template-columns: 1fr auto; align-items: center; border-right: 1px solid var(--line); }.profile-summary > div:last-child { border-right: 0; }.profile-summary span { color: var(--ink-soft); font-size: 10px; }.profile-summary strong { grid-row: span 2; font-size: 23px; }.profile-summary small { color: var(--muted); font-size: 9px; }

.conversation-layout { height: calc(100vh - 210px); min-height: 560px; display: grid; grid-template-columns: 315px 1fr; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }.conversation-list { border-right: 1px solid var(--line); overflow-y: auto; }.conversation-item { width: 100%; min-height: 83px; padding: 13px 15px; display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; color: var(--ink); background: #fff; border: 0; border-bottom: 1px solid #edf0ed; text-align: left; }.conversation-item:hover { background: #fafbf9; }.conversation-item.active { background: var(--coral-pale); box-shadow: inset 3px 0 0 var(--coral); }.conversation-item .avatar { width: 34px; height: 34px; }.conversation-item strong, .conversation-item small, .conversation-item p { display: block; }.conversation-item strong { font-size: 11px; }.conversation-item p { max-width: 185px; margin: 5px 0 0; color: var(--ink-soft); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.conversation-item small { color: var(--muted); font-size: 8px; text-align: right; }.conversation-item b { margin-top: 8px; color: var(--coral-dark); font-size: 8px; font-weight: 600; }.conversation-detail { min-width: 0; display: flex; flex-direction: column; }.conversation-head { height: 65px; padding: 0 19px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--line); }.conversation-head strong, .conversation-head small { display: block; }.conversation-head strong { font-size: 12px; }.conversation-head small { margin-top: 4px; color: var(--muted); font: 9px "DM Mono", monospace; }.conversation-head .system-state { margin-left: auto; }.message-stream { flex: 1; padding: 25px 28px; overflow-y: auto; background: #fafbf9; }.message { max-width: 68%; margin-bottom: 17px; }.message span { display: block; padding: 10px 13px; border-radius: 6px; font-size: 11px; line-height: 1.75; }.message time { display: block; margin-top: 5px; color: var(--muted); font: 8px "DM Mono", monospace; }.system-message { max-width: none; margin: 0 auto 24px; color: var(--muted); font-size: 9px; text-align: center; }.user-message { margin-left: auto; }.user-message span { color: #fff; background: var(--coral); }.user-message time { text-align: right; }.assistant-message span { background: #fff; border: 1px solid var(--line); }.assistant-message small { margin-top: 6px; display: flex; align-items: center; gap: 4px; color: var(--ink-soft); font-size: 8px; }.assistant-message small svg { width: 11px; }.taming-message b { width: max-content; margin: 6px 0 0 auto; padding: 3px 6px; display: flex; align-items: center; gap: 4px; color: var(--coral-dark); background: var(--coral-pale); border-radius: 3px; font-size: 8px; }.taming-message b svg { width: 10px; }.context-footer { height: 48px; padding: 0 18px; display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); }.context-footer span { padding: 3px 7px; display: inline-flex; align-items: center; gap: 4px; color: var(--ink-soft); background: #f1f3f0; border-radius: 4px; font: 8px "DM Mono", monospace; }.context-footer span svg { width: 11px; }.context-footer .icon-button { margin-left: auto; }

.taming-layout { display: grid; grid-template-columns: 390px 1fr; gap: 18px; margin-bottom: 18px; }.trait-visual { height: 280px; display: grid; place-items: center; }.trait-visual canvas { width: min(320px, 100%); height: 250px; }.trait-values { padding: 0 18px 18px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }.trait-value { text-align: center; }.trait-value strong { display: block; font: 14px "DM Mono", monospace; }.trait-value span { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }.growth-chart { height: 300px; padding: 30px 25px 12px; display: flex; align-items: flex-end; gap: 3px; background-image: linear-gradient(to top, #edf0ed 1px, transparent 1px); background-size: 100% 60px; }.growth-point { height: 100%; flex: 1; position: relative; }.growth-point::after { content: ""; position: absolute; left: 50%; bottom: var(--value); width: 5px; height: 5px; transform: translate(-50%, 50%); border-radius: 50%; background: var(--coral); z-index: 2; }.growth-point::before { content: ""; position: absolute; left: 50%; bottom: var(--value); width: calc(100% + 3px); height: 2px; transform-origin: left center; transform: rotate(var(--angle)); background: var(--coral); opacity: .8; }.growth-point:last-child::before { display: none; }.growth-axis { padding: 7px 25px 24px; }.event-log-panel .panel-heading { min-height: 75px; }

.memory-list { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }.memory-row { min-height: 104px; padding: 18px 20px; display: grid; grid-template-columns: 38px minmax(240px,1fr) 150px 130px 72px; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); }.memory-row:last-child { border-bottom: 0; }.memory-icon { width: 36px; height: 36px; display: grid; place-items: center; color: #70549f; background: var(--purple-pale); border-radius: 6px; }.memory-icon svg { width: 16px; }.memory-content strong { display: block; font-size: 11px; }.memory-content p { margin: 7px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.6; }.keywords { display: flex; flex-wrap: wrap; gap: 4px; }.keywords span { padding: 2px 5px; color: var(--ink-soft); background: #f0f2ef; border-radius: 3px; font-size: 8px; }.memory-profile { color: var(--ink-soft); font-size: 9px; }.memory-profile small { display: block; margin-top: 4px; color: var(--muted); }.memory-actions { display: flex; justify-content: flex-end; gap: 2px; }
.endpoint-banner { min-height: 92px; margin-bottom: 16px; padding: 0 22px; display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); align-items: center; background: var(--sidebar); color: #fff; border-radius: 8px; }.endpoint-banner > div { min-height: 46px; padding: 0 20px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid rgba(255,255,255,.1); }.endpoint-banner > div:first-child { padding-left: 0; display: grid; grid-template-columns: 8px 1fr; column-gap: 11px; align-content: center; }.endpoint-banner > div:last-child { border-right: 0; }.endpoint-banner span { color: #9ba49d; font-size: 9px; }.endpoint-banner strong { margin-top: 5px; font: 500 12px "DM Mono", monospace; }.endpoint-banner small { grid-column: 2; margin-top: 4px; color: #8d968f; font-size: 8px; }.route-summary { display: flex; gap: 12px; color: var(--ink-soft); font-size: 9px; }.route-summary span { display: flex; align-items: center; gap: 4px; }.method-dot { width: 7px; height: 7px; border-radius: 2px; }.method-dot.get { background: var(--blue); }.method-dot.post { background: var(--mint); }.method-dot.put { background: var(--amber); }.method-dot.delete { background: var(--coral); }.method-dot.ws { background: var(--purple); }.method { min-width: 38px; padding: 3px 5px; display: inline-block; border-radius: 3px; font: 600 8px "DM Mono", monospace; text-align: center; }.method.GET { color: #397394; background: var(--blue-pale); }.method.POST { color: #337f5e; background: var(--mint-pale); }.method.PUT { color: #a16b1d; background: var(--amber-pale); }.method.DELETE { color: var(--coral-dark); background: var(--coral-pale); }.method.WS { color: #70549f; background: var(--purple-pale); }.api-path { color: var(--ink); font: 10px "DM Mono", monospace; }
.protocol-panel { margin-bottom: 16px; }.protocol-grid { padding: 6px 19px 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; }.protocol-grid > div { min-height: 76px; padding: 13px 15px; background: #fafbf9; border-right: 1px solid var(--line); }.protocol-grid > div:last-child { border-right: 0; }.protocol-grid span, .protocol-grid strong, .protocol-grid small { display: block; }.protocol-grid span { color: var(--muted); font-size: 9px; }.protocol-grid strong { margin-top: 8px; color: var(--ink); font: 500 10px "DM Mono", monospace; word-break: break-word; }.protocol-grid small { margin-top: 5px; color: var(--muted); font-size: 8px; line-height: 1.4; }

.drawer-backdrop, .modal-backdrop { position: fixed; inset: 0; z-index: 70; visibility: hidden; opacity: 0; background: rgba(20,25,21,.34); transition: .2s ease; }.drawer-backdrop.open, .modal-backdrop.open { visibility: visible; opacity: 1; }.detail-drawer { position: fixed; top: 0; right: 0; z-index: 80; width: min(430px, 100vw); height: 100vh; padding: 24px; background: #fff; box-shadow: -12px 0 40px rgba(26,31,27,.15); transform: translateX(100%); transition: .25s ease; overflow-y: auto; }.detail-drawer.open { transform: none; }.drawer-head, .modal-head { display: flex; justify-content: space-between; align-items: flex-start; }.drawer-head { margin-bottom: 28px; }.drawer-head h2, .modal-head h2 { margin: 0; font-size: 20px; }.drawer-section { padding: 20px 0; border-top: 1px solid var(--line); }.drawer-section h3 { margin: 0 0 14px; font-size: 11px; }.detail-list { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }.detail-list span, .detail-list strong { display: block; }.detail-list span { margin-bottom: 5px; color: var(--muted); font-size: 8px; }.detail-list strong { font: 10px "DM Mono", monospace; }.drawer-actions { display: flex; gap: 8px; margin-top: 24px; }
.modal-backdrop { display: grid; place-items: center; }.modal { width: min(440px, calc(100vw - 32px)); padding: 24px; background: #fff; border-radius: 8px; box-shadow: var(--shadow); transform: translateY(8px); transition: .2s ease; }.modal-backdrop.open .modal { transform: none; }.modal-head { margin-bottom: 22px; }.modal form { display: grid; gap: 15px; }.modal label { display: grid; gap: 7px; color: var(--ink-soft); font-size: 10px; }.modal input, .modal select, .modal textarea { padding: 0 11px; outline: 0; border: 1px solid var(--line-strong); border-radius: 5px; font: inherit; }.modal input, .modal select { height: 40px; }.modal textarea { padding-top: 10px; resize: vertical; }.modal input:focus, .modal select:focus, .modal textarea:focus { border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-pale); }.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 9px; }
.toast { position: fixed; right: 25px; bottom: 25px; z-index: 100; min-width: 170px; min-height: 44px; padding: 0 14px; display: flex; align-items: center; gap: 9px; color: #fff; background: var(--sidebar); border-radius: 6px; box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); pointer-events: none; transition: .22s ease; }.toast.show { opacity: 1; transform: none; }.toast svg { width: 16px; color: #8ee0b8; }.toast span { font-size: 11px; }
.mobile-only { display: none; }
.service-icon.slate { color: #59645c; background: #edf0ed; }
.protocol-panel { margin-bottom: 16px; }
.protocol-grid { padding: 6px 19px 20px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; }
.protocol-grid > div { min-height: 76px; padding: 13px 15px; background: #fafbf9; border-right: 1px solid var(--line); }
.protocol-grid > div:last-child { border-right: 0; }
.protocol-grid span, .protocol-grid strong, .protocol-grid small { display: block; }
.protocol-grid span { color: var(--muted); font-size: 9px; }
.protocol-grid strong { margin-top: 8px; color: var(--ink); font: 500 10px "DM Mono", monospace; word-break: break-word; }
.protocol-grid small { margin-top: 5px; color: var(--muted); font-size: 8px; line-height: 1.4; }

@media (max-width: 1120px) {
  .metric-strip { grid-template-columns: repeat(2, 1fr); }.metric-item:nth-child(2) { border-right: 0; }.metric-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .dashboard-grid, .dashboard-grid.lower { grid-template-columns: 1fr; }.taming-layout { grid-template-columns: 1fr; }.trait-panel { display: grid; grid-template-columns: 1fr 1fr; }.trait-panel .panel-heading { grid-column: 1 / -1; }.trait-values { align-content: center; grid-template-columns: 1fr; }.trait-value { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line); }
  .memory-row { grid-template-columns: 38px minmax(240px,1fr) 130px 72px; }.memory-profile { display: none; }
}
@media (max-width: 820px) {
  .sidebar { transform: translateX(-100%); transition: .23s ease; }.sidebar.open { transform: none; box-shadow: 20px 0 50px rgba(0,0,0,.25); }.workspace { margin-left: 0; }.mobile-only { display: inline-grid; }.topbar { padding: 0 16px; }.global-search { display: none; }.operator div { display: none; }.content { padding: 25px 18px 50px; }.page-heading { align-items: flex-end; }.conversation-layout { grid-template-columns: 250px 1fr; }.message { max-width: 82%; }.endpoint-banner { grid-template-columns: 1fr 1fr; padding: 14px; }.endpoint-banner > div { border-right: 0; }.protocol-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .topbar-right .operator { display: none; }.content { padding-inline: 12px; }.page-heading { display: block; }.heading-actions, .page-heading > .button { margin-top: 16px; }.heading-actions .button { flex: 1; }.metric-strip { grid-template-columns: 1fr 1fr; }.metric-item { min-height: 118px; padding: 16px; }.metric-value { font-size: 24px; }.panel-heading { padding: 14px; }.service-row { grid-template-columns: 30px 1fr 42px; padding-inline: 13px; }.service-row .latency { display: none; }.dashboard-grid { min-width: 0; }.profile-summary { grid-template-columns: 1fr 1fr; }.profile-summary > div:nth-child(2) { border-right: 0; }.profile-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.inline-toolbar { align-items: stretch; flex-direction: column; }.segmented { width: 100%; }.segmented button { flex: 1; padding-inline: 5px; }.table-search { width: 100%; }.conversation-layout { height: auto; min-height: 0; grid-template-columns: 1fr; }.conversation-list { max-height: 245px; border-right: 0; border-bottom: 1px solid var(--line); }.conversation-detail { min-height: 520px; }.trait-panel { display: block; }.trait-values { grid-template-columns: repeat(5, 1fr); }.trait-value { display: block; border: 0; }.memory-row { grid-template-columns: 34px 1fr 72px; padding: 15px 12px; }.memory-row .keywords { grid-column: 2; }.memory-actions { grid-column: 3; grid-row: 1; }.endpoint-banner { grid-template-columns: 1fr; }.endpoint-banner > div { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.1); }.endpoint-banner > div:last-child { border-bottom: 0; }.route-summary { display: none; }
}
@media (max-width: 620px) {
  .protocol-grid { grid-template-columns: 1fr 1fr; }
  .protocol-grid > div:nth-child(2) { border-right: 0; }
  .protocol-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

.voice-group-header td {
  background: #f4f5f2;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-soft, #626963);
  padding: 8px 14px;
  border-bottom: 1px solid var(--line, #e3e6e1);
}