.rail { grid-column:1; grid-row:1; z-index:10; }
.app-shell[data-page="agent"]>.channels,.app-shell[data-page="agent"]>.chat-column,.app-shell[data-page="agent"]>.context-panel,
.app-shell[data-page="model"]>.channels,.app-shell[data-page="model"]>.chat-column,.app-shell[data-page="model"]>.context-panel { display:none; }
.workspace-page { grid-column:2/-1; grid-row:1; display:flex; flex-direction:column; height:100vh; min-width:0; min-height:0; overflow:hidden; background:#f7f9fd; }
.page-header { display:flex; align-items:center; justify-content:space-between; gap:22px; flex-shrink:0; padding:29px 34px 24px; border-bottom:1px solid #e5eaf3; background:#fff; }
.page-eyebrow { margin-bottom:10px; color:#7b8da8; font-size:9px; font-weight:700; letter-spacing:.17em; }
.page-header h1 { margin:0; color:#26344b; font-size:24px; font-weight:650; letter-spacing:-.02em; }
.page-header h1 span { margin-left:10px; color:#97a1b1; font-size:18px; font-weight:400; }
.page-header p { margin:10px 0 0; color:#8591a4; font-size:12px; line-height:1.6; }
.page-button { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; gap:6px; padding:10px 15px; border:1px solid #dfe6f0; border-radius:8px; color:#5d6d85; background:#fff; font-size:12px; font-weight:500; }
.page-button:hover { border-color:#a5bff2; color:var(--blue); background:#f8faff; }
.page-button.primary { border-color:var(--blue); color:#fff; background:var(--blue); box-shadow:0 4px 12px #3370ff20; }
.page-button.primary:hover { background:#245ce0; }
.page-button:focus-visible,.canvas-controls button:focus-visible { outline:2px solid #77a0fc; outline-offset:3px; }
.agent-overview { display:flex; align-items:center; gap:14px; flex-shrink:0; margin:21px 26px 18px; padding:16px 20px; border:1px solid #e0e7f2; border-radius:12px; background:#fff; box-shadow:0 3px 15px #233d6004; }
.overview-agent-mark { display:grid; place-items:center; flex:0 0 42px; height:42px; border-radius:12px; color:#fff; background:linear-gradient(140deg,#8472ee,#3370ff); font-size:18px; font-weight:700; }
.agent-overview>div:nth-child(2) { display:grid; gap:6px; flex:1; }
.agent-overview>div:nth-child(2)>b { color:#35435c; font-size:14px; }
.agent-overview>div:nth-child(2)>span { color:#939fb1; font-size:11px; }
.overview-stat { display:grid; gap:4px; min-width:74px; padding-inline:19px; border-left:1px solid #edf0f5; }
.overview-stat b { color:#445b82; font-size:22px; font-weight:600; }
.overview-stat small { color:#939fb1; font-size:10px; white-space:nowrap; }
.architecture-badge { padding:6px 9px; border:1px solid #dbe6fc; border-radius:6px; color:#5b7bb3; background:#f3f7ff; font-size:10px; }
.architecture-layout { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:18px; flex:1; min-height:0; padding:0 26px 24px; }
.architecture-board { display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; border:1px solid #e0e7f2; border-radius:13px; background:#fff; box-shadow:0 5px 20px #233d6005; }
.board-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-shrink:0; min-height:46px; padding:11px 17px; border-bottom:1px solid #ecf0f7; }
.board-toolbar>span { display:flex; align-items:center; gap:7px; color:#5c6c86; font-size:11px; font-weight:600; }
.board-toolbar>span>i { width:6px; height:6px; border-radius:50%; background:#6c98ef; }
.board-toolbar>label { display:flex; align-items:center; gap:4px; color:#91a0b7; font-size:10px; }
.board-toolbar input { accent-color:var(--blue); }
#architecture-viewport { position:relative; flex:1; min-height:220px; overflow:hidden; background-color:#fafcff; background-image:radial-gradient(#d7e0ee 1px,transparent 1px); background-size:18px 18px; }
#architecture-scroller { position:absolute; inset:0; overflow:auto; scrollbar-width:thin; scrollbar-color:#c8d5e8 transparent; scrollbar-gutter:stable; overscroll-behavior:contain; }
#architecture-canvas { display:block; outline:0; touch-action:none; cursor:grab; }
#architecture-canvas.is-dragging { cursor:grabbing; }
#architecture-canvas:focus-visible { box-shadow:inset 0 0 0 2px #a5bff2; }
.canvas-controls { position:absolute; bottom:16px; left:16px; display:flex; align-items:center; gap:3px; padding:4px; border:1px solid #e1e7f0; border-radius:8px; background:#ffffffed; box-shadow:0 3px 10px #233d600a; }
.canvas-controls button { height:28px; min-width:28px; padding:0 7px; border:0; border-radius:5px; color:#647692; background:transparent; font-size:14px; }
.canvas-controls button:hover { color:var(--blue); background:#f0f5ff; }
.canvas-controls #canvas-fit,.canvas-controls #canvas-width { font-size:10px; }
.canvas-controls>span { min-width:37px; color:#8491a4; font-size:10px; text-align:center; }
.canvas-controls>i { width:1px; height:16px; margin-inline:4px; background:#e7ebf3; }
.canvas-legend { position:absolute; top:14px; left:16px; display:flex; gap:17px; padding:5px 7px; border-radius:5px; background:#fafcffdc; color:#97a4b7; font-size:9px; pointer-events:none; }
.canvas-legend>span { display:flex; align-items:center; gap:5px; }
.canvas-legend i { width:14px; border-top:2px solid #8eb0f7; }
.canvas-legend>span:last-child i { border-top:2px dashed #b5a1d6; }
.board-caption { margin:0; padding:10px 15px; border-top:1px solid #ecf0f7; color:#96a2b5; background:#fff; font-size:10px; line-height:1.7; }
.role-detail-panel { padding:21px 19px; overflow-y:auto; border:1px solid #e0e7f2; border-radius:13px; background:#fff; }
.role-detail-heading>span { color:#9aa9bd; font-size:8px; font-weight:700; letter-spacing:.14em; }
.role-detail-heading h2 { margin:7px 0 20px; color:#43526a; font-size:16px; }
.role-picker-label { display:block; margin-bottom:6px; color:#9ca7b6; font-size:10px; }
#architecture-role { width:100%; padding:9px 10px; border:1px solid #e1e7f0; border-radius:7px; color:#5f7190; background:#fafcff; font:11px inherit; }
.role-detail-symbol { display:grid; place-items:center; width:44px; height:44px; margin-top:23px; border:1px solid #d9e6ff; border-radius:13px; color:#6087ce; background:#edf4ff; }
.role-detail-symbol svg { width:23px; height:23px; }
#role-detail h3 { margin:13px 0 6px; color:#354760; font-size:17px; }
.role-english { color:#94a0b1; font-size:10px; line-height:1.5; }
.role-execution { display:inline-block; margin-top:11px; padding:4px 7px; border-radius:4px; color:#6183bb; background:#eff4fc; font-size:9px; }
.role-description { margin:16px 0; color:#7f8da3; font-size:11px; line-height:1.85; }
.role-property { margin-top:15px; }
.role-property small { display:block; margin-bottom:5px; color:#a0aabb; font-size:9px; }
.role-property p { margin:0; color:#637590; font-size:11px; line-height:1.75; overflow-wrap:anywhere; }
.role-detail-note { margin-top:24px; padding:12px; border:1px solid #e9edf5; border-radius:8px; background:#fafbfe; }
.role-detail-note b { color:#7b8da9; font-size:10px; }
.role-detail-note p { margin:6px 0 0; color:#a1acbd; font-size:10px; line-height:1.75; }
.models-content { flex:1; min-height:0; overflow:auto; padding:26px 34px 35px; }
.active-model-banner { display:flex; align-items:center; gap:16px; min-height:96px; padding:21px 23px; border:1px solid #dce6fb; border-radius:13px; background:linear-gradient(110deg,#edf3ff,#f4f1fe 75%,#f9faff); }
.active-model-symbol { display:grid; place-items:center; width:44px; height:44px; flex:0 0 44px; border:1px solid #fff; border-radius:13px; color:#6d87c7; background:#ffffffa6; }
.active-model-symbol svg { width:25px; height:25px; }
.active-model-banner>div { display:grid; min-width:0; gap:6px; flex:1; }
.active-model-banner small { color:#8a9bb6; font-size:10px; }
.active-model-banner b { overflow-wrap:anywhere; color:#4d648c; font-size:17px; }
.active-model-banner p { margin:0; overflow-wrap:anywhere; color:#94a2b9; font-size:10px; }
.active-model-indicator { display:flex; align-items:center; gap:6px; padding:5px 9px; border:1px solid #c9e9db; border-radius:20px; color:#469479; background:#f4fcf8; font-size:10px; white-space:nowrap; }
.active-model-indicator i { width:5px; height:5px; border-radius:50%; background:#5bb394; }
.model-list-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin:30px 0 18px; }
.model-list-heading h2 { display:flex; align-items:center; gap:8px; margin:0; color:#4d5d75; font-size:15px; }
.model-list-heading h2 span { padding:2px 6px; border-radius:5px; color:#8c9bb2; background:#eaf0f8; font-size:10px; font-weight:500; }
.model-list-heading p { margin:8px 0 0; color:#9ba7b8; font-size:11px; line-height:1.6; }
.model-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr)); gap:18px; align-items:start; }
.model-card { min-width:0; overflow:hidden; padding:20px 21px 0; border:1px solid #e0e6f0; border-radius:12px; background:#fff; box-shadow:0 4px 18px #233d6004; }
.model-card.is-active { border-color:#a9c4ff; box-shadow:0 0 0 1px #dce7ff,0 4px 18px #3370ff08; }
.model-card-heading { display:flex; align-items:center; gap:11px; }
.model-card-icon { display:grid; place-items:center; width:40px; height:40px; flex:0 0 40px; border:1px solid #e3e9f7; border-radius:11px; color:#6987be; background:linear-gradient(140deg,#eff4ff,#f4f1fc); font-size:13px; font-weight:700; }
.model-card-heading>div { display:grid; min-width:0; gap:5px; flex:1; }
.model-card-heading b { overflow-wrap:anywhere; color:#4b5e7a; font-size:13px; }
.model-card-heading small { color:#a0abbb; font-size:9px; }
.model-delete { display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; padding:5px; border:0; border-radius:6px; color:#a8b2c1; background:transparent; }
.model-delete svg { width:15px; height:15px; }
.model-delete:hover { color:#cb6373; background:#fff3f5; }
.model-metadata { display:grid; gap:15px; margin:23px 0 18px; }
.model-metadata>div { display:grid; gap:6px; }
.model-metadata dt { color:#a2adbe; font-size:9px; }
.model-metadata dd { margin:0; color:#627592; font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.model-metadata dd.key-mask { color:#8d9cb4; font:12px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.1em; }
.model-status-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:13px; border-top:1px solid #f0f3f8; }
.model-test-status { display:inline-flex; align-items:center; gap:5px; color:#9ba8bc; font-size:10px; }
.model-test-status>i { width:5px; height:5px; border-radius:50%; background:currentColor; }
.model-test-status.passed { color:#4ba58b; }.model-test-status.failed { color:#cb7481; }.model-test-status.testing { color:#7d98d2; }
.model-status-row>small { color:#a5b0c0; font-size:9px; }
.model-test-message { min-height:31px; margin:9px 0 5px; color:#a3aebe; font-size:10px; line-height:1.7; }
.model-card.failed .model-test-message { color:#c17d89; }
.model-card-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 -21px; padding:13px 18px; border-top:1px solid #edf1f7; background:#fcfdff; }
.model-card-actions button { min-height:31px; padding:6px 9px; border:1px solid #e1e7f2; border-radius:6px; color:#7a8ba6; background:#fff; font-size:10px; }
.model-card-actions button:hover:not(:disabled) { border-color:#a5bff2; color:var(--blue); }
.model-card-actions .model-activate { color:#5a7bb8; background:#f2f6ff; border-color:#dbe6fc; }
.model-card-actions button:disabled { opacity:.55; cursor:not-allowed; }
.model-card-actions .model-current { border-color:#e0eee8; color:#66a48e; background:#f5fbf8; opacity:1; }
.models-empty { grid-column:1/-1; display:grid; justify-items:center; gap:13px; padding:55px 20px; border:1px dashed #d5dfed; border-radius:12px; color:#8a9ab3; text-align:center; }
.models-empty>svg { width:34px; height:34px; color:#a9bbdb; }
.models-empty h3 { margin:0; color:#6b7f9d; font-size:16px; }.models-empty p { max-width:350px; margin:0; color:#a5b0c0; font-size:12px; line-height:1.8; }
.model-dialog { width:min(490px,92vw); }.model-dialog form { display:flex; flex-direction:column; max-height:85vh; }
.model-dialog::backdrop { background:#18233d60; backdrop-filter:blur(3px); }
.model-form-body { display:grid; gap:18px; padding:23px; overflow:auto; }
.model-form-body label { display:grid; gap:8px; color:#6a7d99; font-size:11px; }
.model-form-body input { width:100%; min-width:0; padding:11px 12px; border:1px solid #dfe6f0; border-radius:7px; outline:0; color:#4d6385; background:#fcfdff; font-size:12px; }
.model-form-body input:focus { border-color:#99b8fc; box-shadow:0 0 0 3px #3370ff0b; }
.model-form-body input::placeholder { color:#b0bac9; }.model-form-body small { color:#a7b1bf; font-size:10px; line-height:1.7; }
.model-dialog .dialog-footer span { max-width:230px; color:#a0aabb; font-size:10px; line-height:1.6; }
.model-dialog button:disabled { opacity:.6; cursor:wait; }.form-error { padding:9px 11px; border-radius:6px; color:#be6e7d; background:#fff3f5; font-size:11px; line-height:1.7; }
@media (max-width:1100px) { .architecture-layout { grid-template-columns:minmax(0,1fr) 235px; gap:12px; padding-inline:20px; }.page-header { padding-inline:24px; }.agent-overview { margin-inline:20px; }.role-detail-panel { padding:18px 15px; }.models-content { padding-inline:24px; } }
@media (max-width:760px) {
  .page-header { align-items:flex-start; flex-wrap:wrap; gap:16px; padding:21px 16px 18px; }.page-header h1 { font-size:21px; }.page-header h1 span { display:block; margin:6px 0 0; font-size:15px; }.page-header p { font-size:11px; }.page-eyebrow { font-size:8px; }.page-button { padding:9px 12px; font-size:11px; }
  #agent-page { overflow-y:auto; }.agent-overview { flex-wrap:wrap; gap:11px; margin:15px 12px; padding:14px; }.agent-overview>div:nth-child(2) { flex:1 1 calc(100% - 60px); }.agent-overview>div:nth-child(2)>span { font-size:9px; line-height:1.6; }.overview-stat { min-width:65px; padding-inline:12px; }.overview-stat b { font-size:19px; }.architecture-badge { margin-left:auto; font-size:9px; }.architecture-layout { display:flex; flex-direction:column; flex:none; min-height:0; gap:12px; padding:0 12px 20px; }.architecture-board { flex:none; height:470px; }.role-detail-panel { flex:none; overflow:visible; }.board-toolbar { padding-inline:11px; }.board-toolbar>span,.board-toolbar>label { font-size:9px; }.canvas-controls { left:10px; bottom:12px; }.canvas-legend { gap:10px; left:8px; font-size:8px; }.board-caption { padding:9px 10px; font-size:9px; }.role-detail-heading h2 { margin-bottom:14px; }.role-detail-symbol { margin-top:18px; }
  .models-content { padding:17px 13px 24px; }.active-model-banner { flex-wrap:wrap; gap:11px; padding:17px 15px; }.active-model-banner>div { flex:1 1 calc(100% - 52px); }.active-model-banner b { font-size:15px; }.active-model-indicator { margin-left:47px; font-size:9px; }.active-model-symbol { flex-basis:36px; width:36px; height:36px; border-radius:10px; }.model-list-heading { align-items:flex-start; margin-top:24px; gap:8px; }.model-list-heading p { font-size:10px; }.model-grid { gap:13px; }.model-card { padding:17px 17px 0; }.model-card-actions { margin-inline:-17px; }.model-metadata { margin-top:20px; }.model-dialog .dialog-footer { gap:10px; padding-inline:18px; }.model-dialog .dialog-footer span { max-width:130px; }.model-form-body { padding:18px; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto; } }