/* AgentCore demo UI styles (extracted from index.html). */
  :root { --bg:#0f1115; --panel:#1a1d24; --accent:#4f8cff; --muted:#8a90a0;
          --admin:#2ea043; --viewer:#d29922; --user:#263040; --bot:#1f242e; }
  * { box-sizing: border-box; }
  body { margin:0; font-family:-apple-system,Segoe UI,Roboto,sans-serif;
         background:var(--bg); color:#e6e8ec; height:100vh; display:flex; flex-direction:column; }
  header { padding:12px 18px; background:var(--panel); display:flex; align-items:center; gap:14px;
           border-bottom:1px solid #2a2e38; }
  header h1 { font-size:16px; margin:0; font-weight:600; }
  header .spacer { flex:1; }
  .rolepill { font-size:12px; padding:3px 10px; border-radius:999px; font-weight:600; }
  .rolepill.admin { background:rgba(46,160,67,.2); color:var(--admin); }
  .rolepill.viewer { background:rgba(210,153,34,.2); color:var(--viewer); }
  .modepill { font-size:11px; padding:3px 10px; margin-left:10px; border-radius:999px;
              background:#2a3340; color:#9fb4d6; border:1px solid #3a4555; cursor:pointer; }
  .modepill:hover { background:#323c49; }
  .userbox { display:flex; align-items:center; gap:9px; }
  .useravatar { width:30px; height:30px; border-radius:50%; background:var(--accent);
                color:#fff; display:flex; align-items:center; justify-content:center;
                font-size:13px; font-weight:600; text-transform:uppercase; }
  .usermeta { display:flex; flex-direction:column; line-height:1.2; }
  .usermeta #userName { font-size:13px; font-weight:600; }
  .usermeta #userSub { font-size:11px; color:var(--muted); }
  select,button,input { font:inherit; }
  select { background:#11141a; color:#e6e8ec; border:1px solid #2a2e38; border-radius:6px; padding:6px 8px; }
  button { background:var(--accent); color:#fff; border:0; border-radius:6px; padding:7px 14px; cursor:pointer; }
  button:disabled { opacity:.5; cursor:default; }
  button.ghost { background:#262b35; }
  #login { margin:auto; width:340px; background:var(--panel); padding:26px; border-radius:12px;
           border:1px solid #2a2e38; }
  #login h2 { margin:0 0 14px; font-size:18px; }
  #login label { display:block; font-size:12px; color:var(--muted); margin:12px 0 4px; }
  #login select { width:100%; }
  #login button { width:100%; margin-top:18px; }
  #workspace { display:none; flex:1; min-height:0; }
  #workspace.active { display:flex; }
  #sidebar { width:290px; flex:none; background:var(--panel); border-right:1px solid #2a2e38;
             overflow-y:auto; display:flex; flex-direction:column; transition:margin-left .2s; }
  #sidebar.hidden { margin-left:-290px; }
  .sb-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px;
             border-bottom:1px solid #2a2e38; font-weight:600; font-size:14px; position:sticky; top:0; background:var(--panel); }
  .sb-head button { background:#2a3340; color:#9fb4d6; border:0; border-radius:6px; width:26px; height:26px; cursor:pointer; font-size:15px; }
  .sb-intro { padding:10px 16px 8px; font-size:12px; color:var(--muted); line-height:1.5; }
  .sb-path { display:flex; gap:4px; margin:12px 12px 0; background:#11141a; border:1px solid #2a2e38; border-radius:8px; padding:3px; }
  .sb-path button { flex:1; background:transparent; color:#9fb4d6; border:0; border-radius:6px; padding:5px 6px; font-size:11.5px; font-weight:600; }
  .sb-path button[aria-pressed="true"] { background:var(--accent); color:#fff; }
  .sb-preflight { margin:0 12px 6px; background:#11141a; border:1px solid #2a2e38; border-radius:8px; padding:9px 10px; }
  .sbp-head { display:flex; align-items:center; gap:8px; font-size:12px; color:#e6e8ec; }
  .sbp-btns { display:flex; gap:6px; margin-top:7px; flex-wrap:wrap; }
  .sbp-btns .consent-btn { margin:0; font-size:11px; padding:4px 9px; }
  .pf-badge { margin-left:auto; font-size:10px; font-weight:700; padding:1px 7px; border-radius:999px; }
  .pf-badge.ok { background:rgba(46,160,67,.2); color:var(--admin); }
  .pf-badge.warn { background:rgba(210,153,34,.2); color:var(--viewer); }
  .pf-badge.fail { background:rgba(248,81,73,.18); color:#f85149; }
  .pf-row { display:flex; gap:6px; font-size:11px; line-height:1.4; margin-top:5px; color:#c7ccd6; }
  .pf-row .ic { flex:none; width:14px; text-align:center; }
  .pf-row.ok .ic { color:var(--admin); } .pf-row.warn .ic { color:var(--viewer); } .pf-row.fail .ic { color:#f85149; }
  .pf-row small { display:block; color:var(--muted); font-size:10.5px; }
  .sb-section .sb-min { float:right; font-size:10px; color:var(--muted); letter-spacing:0; text-transform:none; font-weight:600; }
  /* unprotected vs protected comparison */
  .cmp-presets { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:9px; }
  .cmp-presets button[aria-pressed="true"] { border-color:var(--accent); background:#232f3e; color:#9fc0ff; }
  .cmp-inputs { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .cmp-inputs .sec-ta { min-height:84px; }
  .cmp-cols { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:10px; }
  .cmp-col { border-radius:9px; padding:10px 12px; border:1px solid #2a2e38; background:#11141a; }
  .cmp-col.bad { border-color:rgba(248,81,73,.45); }
  .cmp-col.good { border-color:rgba(46,160,67,.45); }
  .cmp-col .h { display:flex; gap:8px; align-items:center; font-size:12.5px; font-weight:700; color:#e6e8ec; flex-wrap:wrap; }
  .cmp-col .sub { font-size:11px; color:var(--muted); margin-top:2px; }
  .cmp-col mark { background:rgba(248,81,73,.35); color:#fff; border-radius:3px; padding:0 2px; }
  .cmp-layers { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
  @media (max-width:900px) { .cmp-inputs, .cmp-cols { grid-template-columns:1fr; } }
  .sb-section { padding:4px 12px 10px; }
  .sb-section h4 { margin:12px 4px 6px; font-size:11px; letter-spacing:.6px; text-transform:uppercase; color:#7aa8ff; }
  .sb-q { display:block; width:100%; text-align:left; background:#1f242e; border:1px solid #2a2e38;
          color:#d7dbe3; border-radius:8px; padding:8px 10px; margin:5px 0; font-size:12.5px;
          line-height:1.35; cursor:pointer; transition:background .12s,border-color .12s; }
  .sb-q:hover { background:#262d39; border-color:#3a4555; }
  .sb-q .tag { display:block; font-size:10px; color:var(--muted); margin-top:3px; }
  .sb-note { margin:2px 4px 6px; font-size:11.5px; line-height:1.45; color:var(--muted); }
  .sb-tablink { display:block; width:100%; text-align:left; background:transparent; border:0;
                color:#7aa8ff; padding:6px 4px 2px; margin-top:3px; font-size:12px; cursor:pointer; }
  .sb-tablink:hover { color:#9fc0ff; text-decoration:underline; }
  #sidebarOpen { display:none; align-self:flex-start; margin:8px 0 0 6px; background:#2a3340;
                 color:#9fb4d6; border:0; border-radius:6px; width:26px; height:30px; cursor:pointer; font-size:15px; }
  #main { flex:1; display:flex; flex-direction:column; min-height:0; }
  #chat { display:none; flex:1; flex-direction:column; min-height:0; }
  #thread { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:12px; }
  .msg { max-width:720px; padding:11px 14px; border-radius:12px; white-space:pre-wrap; line-height:1.45;
         font-size:14px; animation:fade .2s ease; }
  @keyframes fade { from{opacity:0;transform:translateY(4px)} to{opacity:1} }
  .msg.user { align-self:flex-end; background:var(--user); border:1px solid #33415a; }
  .msg.bot  { align-self:flex-start; background:var(--bot); border:1px solid #2a2e38; }
  .msg.sys  { align-self:center; background:transparent; color:var(--muted); font-size:12px; font-style:italic; }
  .msg .who { font-size:11px; color:var(--muted); margin-bottom:4px; }
  .toolrow { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
  .toolrow:empty { display:none; }
  .toolchip { font-size:11px; background:rgba(79,140,255,.15); color:#7aa8ff;
              border:1px solid rgba(79,140,255,.3); padding:2px 8px; border-radius:999px; }
  #composer { display:flex; gap:10px; padding:14px 18px; border-top:1px solid #2a2e38; background:var(--panel); }
  #composer input { flex:1; background:#11141a; color:#e6e8ec; border:1px solid #2a2e38;
                    border-radius:8px; padding:11px 13px; }
  .hint { color:var(--muted); font-size:12px; padding:0 18px 10px; }
  .suggest { display:flex; gap:8px; flex-wrap:wrap; padding:0 18px 10px; }
  .suggest button { background:#262b35; font-size:12px; padding:5px 10px; }
  #registry { display:none; flex:1; overflow-y:auto; padding:24px; flex-direction:column; }
  .reg-head h2 { margin:0 0 6px; font-size:18px; }
  .reg-head p { margin:0 0 18px; color:var(--muted); font-size:13px; max-width:720px; }
  .scope-panel { display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:900px; margin-bottom:10px; }
  .scope-col { border:1px solid #2a2e38; border-radius:10px; padding:12px 15px; background:#11141a; }
  .scope-col.does { border-color:#2d5a35; }
  .scope-col.doesnt { border-color:#6b3330; }
  .scope-h { font-size:13px; font-weight:700; margin-bottom:7px; }
  .scope-col.does .scope-h { color:var(--admin); }
  .scope-col.doesnt .scope-h { color:#f0938c; }
  .scope-col ul { margin:0; padding-left:18px; }
  .scope-col li { font-size:12.5px; color:#c7ccd6; line-height:1.5; margin-bottom:5px; }
  .scope-foot { max-width:900px; font-size:12.5px; color:var(--muted); margin:0 0 18px; line-height:1.5; }
  @media (max-width:720px) { .scope-panel { grid-template-columns:1fr; } }
  .reg-list { display:flex; flex-direction:column; gap:12px; max-width:760px; }
  .reg-card { background:var(--panel); border:1px solid #2a2e38; border-radius:10px; padding:14px 16px; }
  /* Cedar policy panel on the Gateway record */
  .cedar-panel { margin-top:12px; border-top:1px solid #2a2e38; padding-top:11px; }
  .cedar-head { font-size:12.5px; font-weight:700; color:#e6e8ec; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .cedar-link { font-size:11.5px; font-weight:600; color:#7aa8ff; }
  .cedar-link:hover { text-decoration:underline; }
  .cedar-sub { font-size:11.5px; color:var(--muted); margin:4px 0 9px; }
  .cedar-tool { background:#11141a; border:1px solid #2a2e38; border-radius:8px; margin-bottom:8px; }
  .cedar-tool summary { cursor:pointer; padding:8px 11px; font-size:12px; display:flex; align-items:center; gap:10px; }
  .cedar-tool summary code { color:#e6c07a; }
  .cedar-rule { margin-left:auto; font-size:10.5px; color:#9fb4d6; background:#2a3340; padding:2px 8px; border-radius:999px; }
  .cedar-cedar, .cedar-json { padding:0 11px 10px; }
  .cedar-lbl { font-size:10px; font-weight:700; letter-spacing:.5px; color:var(--muted); margin:6px 0 3px; }
  .cedar-tool pre { margin:0; background:#0b0e13; border:1px solid #1f242e; border-radius:6px; padding:9px 11px;
                    font-size:11px; line-height:1.45; color:#d7dbe3; overflow-x:auto; white-space:pre; }
  /* Gateway targets panel (bring-any-MCP) */
  .gw-targets:empty { display:none; }
  .gw-targets { margin-top:12px; border-top:1px solid #2a2e38; padding-top:11px; }
  .gwt-head { font-size:12.5px; font-weight:700; color:#e6e8ec; }
  .gwt-sub { font-size:11.5px; color:var(--muted); margin:4px 0 9px; line-height:1.5; }
  .gwt-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#11141a;
             border:1px solid #2a2e38; border-radius:8px; padding:8px 11px; margin-bottom:7px; }
  .gwt-row.gwt-ext { border-color:#4f8cff; background:rgba(79,140,255,.08); }
  .gwt-name { font-size:12.5px; font-weight:600; color:#e6e8ec; }
  .gwt-type { font-size:11px; color:#9fb4d6; }
  .gwt-status { font-size:10.5px; color:var(--admin); margin-left:auto; }
  .gwt-badge { font-size:9.5px; font-weight:700; background:#4f8cff; color:#07121f; padding:1px 7px; border-radius:999px; }
  .gwt-ep { flex-basis:100%; font-size:10.5px; color:var(--muted); font-family:ui-monospace,Menlo,monospace; }
  .reg-card.locked { opacity:.72; }
  .reg-card .top { display:flex; align-items:center; gap:10px; }
  .reg-type { font-size:10px; font-weight:700; letter-spacing:.5px; padding:3px 8px; border-radius:5px;
              background:#2a3340; color:#9fb4d6; }
  .reg-type.AGENT { background:rgba(79,140,255,.18); color:#7aa8ff; }
  .reg-type.GATEWAY { background:rgba(210,153,34,.18); color:var(--viewer); }
  .reg-type.SKILL { background:rgba(46,160,67,.18); color:var(--admin); }
  .reg-name { font-size:15px; font-weight:600; }
  .reg-badge { margin-left:auto; font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; }
  .reg-badge.ok { background:rgba(46,160,67,.2); color:var(--admin); }
  .reg-badge.no { background:rgba(248,81,73,.16); color:#f85149; }
  .reg-id { margin-top:3px; font-size:11px; color:var(--muted); font-family:ui-monospace,Menlo,monospace; }
  .reg-desc { margin-top:8px; font-size:13px; color:#c7ccd6; line-height:1.45; }
  .reg-meta { margin-top:12px; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:6px 18px; }
  .rm-row { display:flex; gap:8px; font-size:12px; align-items:baseline; }
  .rm-k { color:var(--muted); min-width:62px; font-weight:600; }
  .rm-v { color:#c7ccd6; word-break:break-word; }
  .reg-chips { margin-top:10px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
  .rc-label { font-size:11px; color:var(--muted); font-weight:600; margin-right:2px; }
  .rc-chip { font-size:11px; background:#11141a; border:1px solid #2a2e38; color:#9fb4d6; padding:3px 8px; border-radius:6px; }
  .reg-tags { margin-top:10px; display:flex; flex-wrap:wrap; gap:6px; }
  .reg-tag { font-size:11px; color:#7aa8ff; background:rgba(79,140,255,.12); padding:2px 7px; border-radius:999px; }
  .reg-doc { margin-left:12px; color:#9fb4d6; }
  .reg-status { margin-top:10px; font-size:11px; color:var(--muted); }
  #usage { display:none; flex:1; overflow-y:auto; padding:24px; flex-direction:column; }
  .usage-list { display:flex; flex-direction:column; gap:14px; max-width:760px; }
  .setlimit { display:flex; align-items:center; gap:9px; flex-wrap:wrap; max-width:760px;
              margin-bottom:16px; padding:11px 13px; background:#11141a;
              border:1px solid #2a2e38; border-radius:9px; }
  .setlimit .sl-label { font-size:12.5px; color:#c7ccd6; font-weight:600; }
  .setlimit select, .setlimit input { background:#1f242e; color:#d7dbe3; border:1px solid #2a2e38;
              border-radius:6px; padding:5px 8px; font-size:12.5px; }
  .setlimit input { width:150px; }
  .sl-note { font-size:12px; color:var(--muted); }
  .sl-note.ok { color:var(--admin); }
  .sl-note.err { color:#f85149; }
  .usage-card { background:var(--panel); border:1px solid #2a2e38; border-radius:10px; padding:14px 16px; }
  .usage-card .top { display:flex; align-items:center; gap:10px; margin-bottom:9px; }
  .usage-user { font-size:14px; font-weight:600; }
  .usage-role { font-size:10px; font-weight:700; letter-spacing:.5px; padding:3px 8px; border-radius:5px; }
  .usage-role.admin { background:rgba(46,160,67,.2); color:var(--admin); }
  .usage-role.viewer { background:rgba(210,153,34,.2); color:var(--viewer); }
  .usage-nums { margin-left:auto; font-size:12px; color:var(--muted); }
  .bar { height:12px; background:#11141a; border-radius:6px; overflow:hidden; border:1px solid #2a2e38; }
  .bar > span { display:block; height:100%; background:var(--accent); transition:width .3s; }
  .bar.warn > span { background:var(--viewer); }
  .bar.over > span { background:#f85149; }
  .usage-detail { margin-top:6px; font-size:11px; color:var(--muted); display:flex; justify-content:space-between; }
  #obs, #evals { display:none; flex:1; overflow-y:auto; padding:24px; flex-direction:column; }
  .stat-row { display:flex; gap:14px; margin-top:10px; flex-wrap:wrap; }
  .stat { background:#11141a; border:1px solid #2a2e38; border-radius:8px; padding:10px 16px; }
  .stat .n { font-size:20px; font-weight:700; color:#e6e8ec; }
  .stat .l { font-size:11px; color:var(--muted); }
  .tc-prompt { font-size:13px; font-weight:600; }
  .tc-meta { margin-top:6px; font-size:11px; color:var(--muted); display:flex; gap:14px; flex-wrap:wrap; }
  .tc-tools { margin-top:6px; display:flex; gap:5px; flex-wrap:wrap; }
  .score { font-size:11px; font-weight:700; padding:2px 8px; border-radius:5px; }
  .score.good { background:rgba(46,160,67,.2); color:var(--admin); }
  .score.mid { background:rgba(210,153,34,.2); color:var(--viewer); }
  .score.low { background:rgba(248,81,73,.18); color:#f85149; }
  .eval-comment { margin-top:6px; font-size:12px; color:#c7ccd6; font-style:italic; }
  /* live harness step strip in chat */
  .steprow { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:6px; }
  .steprow:empty { display:none; }
  .stepchip { font-size:10px; padding:2px 7px; border-radius:999px; border:1px solid #2a2e38; }
  .stepchip.reason { background:#1a1f29; color:#9fb4d6; }
  .stepchip.tool   { background:rgba(210,153,34,.16); color:var(--viewer); border-color:rgba(210,153,34,.3); }
  .stepchip.answer { background:rgba(46,160,67,.16); color:var(--admin); border-color:rgba(46,160,67,.3); }
  /* 3-legged OAuth consent panel */
  .consentrow:empty { display:none; }
  .consentrow { margin-top:8px; padding:10px 12px; background:rgba(79,140,255,.08);
                border:1px solid rgba(79,140,255,.3); border-radius:8px; }
  .consent-head { font-size:12.5px; color:#c7ccd6; margin-bottom:8px; }
  .consent-btn { font-size:12px; padding:5px 11px; margin-right:8px; border-radius:6px;
                 border:1px solid #3a4555; background:#1f242e; color:#d7dbe3; cursor:pointer; }
  .consent-btn.primary { background:#232f3e; border-color:#4f8cff; color:#9fc0ff; }
  .consent-btn:hover { background:#262d39; }
  /* friendly notice panel (usage limit / errors) */
  .noticerow:empty { display:none; }
  .noticerow { margin-top:6px; padding:12px 14px; border-radius:9px; }
  .noticerow.limit { background:rgba(210,153,34,.1); border:1px solid rgba(210,153,34,.4); }
  .noticerow.err { background:rgba(248,81,73,.08); border:1px solid rgba(248,81,73,.35); }
  .notice-title { font-size:13.5px; font-weight:600; color:#e6e8ec; margin-bottom:5px; }
  .notice-body { font-size:12.5px; color:#c7ccd6; line-height:1.5; }
  .notice-sub { font-size:12px; color:var(--viewer); margin-top:7px; font-weight:600; }
  .notice-foot { font-size:11.5px; color:var(--muted); margin-top:8px; }
  /* harness screen */
  #harness { display:none; flex:1; overflow-y:auto; padding:24px; flex-direction:column; }
  .harness-explain { margin-top:12px; }
  .hx-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; max-width:900px; }
  .hx-cell { background:#11141a; border:1px solid #2a2e38; border-radius:8px; padding:12px 14px; }
  .hx-k { font-size:11px; font-weight:700; color:var(--accent); margin-bottom:5px; letter-spacing:.4px; }
  .hx-v { font-size:12px; color:#c7ccd6; line-height:1.5; }
  .hbadge { font-size:11px; background:#11141a; border:1px solid #2a2e38; color:#9fb4d6; padding:2px 8px; border-radius:6px; }
  .htrace { margin-top:12px; }
  .hstep { display:flex; align-items:flex-start; gap:9px; font-size:13px; }
  .hstep-ic { flex:none; }
  .hstep-body { color:#d7dbe3; }
  .hstep.tool .hstep-body { color:#e6e8ec; }
  .hstep.answer .hstep-body { color:var(--admin); }
  .hstep-tool { background:#11141a; border:1px solid #2a2e38; color:#e6c07a; padding:1px 6px; border-radius:5px; font-size:12px; margin-left:4px; }
  .hstep-svc { color:var(--muted); font-size:12px; margin-left:6px; }
  .hstep-link { width:2px; height:12px; background:#2a2e38; margin:2px 0 2px 7px; }
  #arch { display:none; flex:1; overflow-y:auto; padding:24px; flex-direction:column; }
  /* official AWS slides */
  .aws-slides { max-width:900px; margin-bottom:22px; border:1px solid #2a2e38; border-radius:10px;
                background:#11141a; padding:4px 14px 14px; }
  .aws-slides > summary { cursor:pointer; padding:11px 2px; font-size:13px; font-weight:700; color:var(--accent); }
  .aws-fig { margin:12px 0 0; }
  .aws-fig img { width:100%; max-width:860px; border:1px solid #2a2e38; border-radius:8px; display:block; }
  .aws-fig figcaption { font-size:11.5px; color:var(--muted); margin-top:6px; line-height:1.5; }
  .aws-note { font-size:12px; color:#c7ccd6; margin-top:14px; padding-top:11px; border-top:1px solid #2a2e38; }
  /* auth page */
  #auth { display:none; flex:1; overflow-y:auto; padding:24px; flex-direction:column; }
  .auth-wrap { max-width:860px; display:flex; flex-direction:column; gap:14px; }
  .auth-chain { display:flex; align-items:stretch; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
  .ac-step { flex:1; min-width:150px; background:#11141a; border:1px solid #2d5a35; border-radius:9px;
             padding:10px 12px; font-size:12.5px; color:#d7dbe3; position:relative; }
  .ac-step span { display:inline-flex; width:20px; height:20px; border-radius:50%; background:var(--admin);
                  color:#0b1f12; font-weight:700; font-size:11px; align-items:center; justify-content:center; margin-right:6px; }
  .ac-step small { color:var(--muted); }
  .ac-arr { display:flex; align-items:center; color:#3a4555; }
  .auth-card { background:var(--panel); border:1px solid #2a2e38; border-radius:10px; padding:14px 16px; }
  .auth-h { font-size:13px; font-weight:700; color:var(--accent); margin-bottom:9px; }
  .auth-who { display:flex; align-items:center; gap:10px; }
  .auth-name { font-size:15px; font-weight:600; }
  .auth-note { font-size:11.5px; color:var(--muted); margin-top:9px; line-height:1.5; }
  .auth-claims, .auth-matrix { width:100%; border-collapse:collapse; }
  .auth-claims td { padding:4px 8px; font-size:12px; border-bottom:1px solid #1f242e; vertical-align:top; }
  .ac-k { color:var(--muted); font-family:ui-monospace,Menlo,monospace; width:150px; }
  .ac-v { color:#d7dbe3; font-family:ui-monospace,Menlo,monospace; word-break:break-all; }
  .auth-matrix th { text-align:left; font-size:11px; color:var(--muted); padding:5px 8px; border-bottom:1px solid #2a2e38; }
  .auth-matrix td { padding:8px; font-size:12.5px; border-bottom:1px solid #1f242e; }
  .am-id { font-size:10.5px; color:var(--muted); font-family:ui-monospace,Menlo,monospace; margin-top:2px; }
  .am-ok { color:var(--admin); font-weight:600; }
  .am-no { color:#f0938c; font-weight:600; }
  .am-rule { font-family:ui-monospace,Menlo,monospace; font-size:11px; color:#9fb4d6; }
  .auth-groups { margin-top:9px; font-size:12.5px; }
  .auth-sub { color:var(--muted); }
  .grp-chip { display:inline-block; font-size:11px; background:rgba(79,140,255,.15); color:#7aa8ff;
              border:1px solid rgba(79,140,255,.3); padding:2px 8px; border-radius:999px; margin:0 4px 4px 0; }
  .grp-table { width:100%; border-collapse:collapse; }
  .grp-table th { text-align:left; font-size:11px; color:var(--muted); padding:5px 8px; border-bottom:1px solid #2a2e38; }
  .grp-table td { padding:6px 8px; font-size:12px; border-bottom:1px solid #1f242e; vertical-align:top; }
  .grp-table tr.grp-mine { background:rgba(46,160,67,.1); }
  .grp-you { font-size:9.5px; font-weight:700; background:var(--admin); color:#0b1f12; padding:1px 6px; border-radius:999px; margin-left:5px; }
  .grp-id { font-family:ui-monospace,Menlo,monospace; font-size:10.5px; color:var(--muted); word-break:break-all; }
  .grp-note { font-size:11px; color:#c7ccd6; }
  .grp-logic { margin:0; background:#0b0e13; border:1px solid #1f242e; border-radius:6px; padding:10px 12px;
               font-size:11px; line-height:1.5; color:#d7dbe3; overflow-x:auto; white-space:pre; }
  .grp-src { font-size:9.5px; font-weight:700; padding:1px 6px; border-radius:999px; }
  .src-sso { background:rgba(79,140,255,.18); color:#7aa8ff; }
  .src-cog { background:rgba(210,153,34,.18); color:var(--viewer); }
  .grp-paths { display:flex; flex-direction:column; gap:6px; }
  .grp-path { font-size:12px; color:#c7ccd6; line-height:1.5; }
  .grp-pivot { background:rgba(46,160,67,.1); border:1px solid rgba(46,160,67,.3); border-radius:7px; padding:8px 11px; color:#d7dbe3; }
  .auth-code { margin:0; padding-left:18px; }
  .auth-code li { font-size:12.5px; color:#c7ccd6; line-height:1.6; margin-bottom:6px; }
  .auth-code code { background:#11141a; border:1px solid #2a2e38; border-radius:4px; padding:1px 5px; font-size:11.5px; color:#e6c07a; }
  /* request-path view */
  .path-head h3 { margin:0 0 4px; font-size:15px; }
  .path-head p { margin:0 0 14px; color:var(--muted); font-size:12.5px; max-width:760px; }
  .reqpath { max-width:760px; margin-bottom:26px; }
  .pathstep { display:flex; align-items:flex-start; gap:11px; background:var(--panel);
              border:1px solid #2a2e38; border-radius:9px; padding:10px 13px; }
  .pathstep.on  { border-color:#2d5a35; background:rgba(46,160,67,.1); }
  .pathstep.off { opacity:.5; }
  .ps-num { flex:none; width:22px; height:22px; border-radius:50%; background:#2a3340;
            color:#9fb4d6; font-size:12px; font-weight:700; display:flex;
            align-items:center; justify-content:center; }
  .pathstep.on .ps-num { background:var(--admin); color:#0b1f12; }
  .ps-body { flex:1; }
  .ps-text { font-size:13px; color:#d7dbe3; line-height:1.4; }
  .ps-svc { font-size:11px; color:var(--muted); margin-top:3px; }
  .pathstep.on .ps-svc { color:#7bbf8a; }
  .ps-dot { color:var(--admin); font-size:12px; }
  .ps-arrow { text-align:center; color:#3a4555; font-size:13px; padding:2px 0; }
  /* glossary: hover tooltip + reference grid */
  .gloss { border-bottom:1px dashed #5a6678; cursor:help; position:relative; }
  .gloss:hover, .gloss:focus { color:#9fc0ff; outline:none; }
  .gloss[data-tip]:hover::after, .gloss[data-tip]:focus::after {
    content:attr(data-tip); position:absolute; left:0; top:140%; z-index:40;
    width:300px; background:#11141a; border:1px solid #3a4555; border-radius:7px;
    padding:9px 11px; font-size:12px; font-weight:400; color:#d7dbe3; line-height:1.45;
    white-space:normal; box-shadow:0 6px 20px rgba(0,0,0,.45); }
  .gloss-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
                gap:12px; max-width:900px; }
  .gloss-cell { background:#11141a; border:1px solid #2a2e38; border-radius:8px; padding:11px 13px; }
  .gloss-term { font-size:12.5px; font-weight:700; color:var(--accent); margin-bottom:4px; }
  .gloss-def { font-size:12px; color:#c7ccd6; line-height:1.5; }
  .arch-wrap { max-width:900px; }
  .arch-layer { border-radius:12px; padding:14px 16px; margin:0; border:1px solid; }
  .arch-layer.l-id  { background:rgba(79,140,255,.08); border-color:#33415a; }
  .arch-layer.l-rt  { background:rgba(210,153,34,.08); border-color:#6b5a24; }
  .arch-layer.l-cap { background:rgba(46,160,67,.08); border-color:#2d5a35; }
  .arch-layer.l-gov { background:rgba(248,81,73,.08); border-color:#6b3330; }
  .arch-label { font-size:13px; font-weight:700; margin-bottom:4px; }
  .arch-sub { font-size:11px; color:var(--muted); margin-bottom:10px; }
  .arch-cards { display:flex; align-items:stretch; gap:10px; }
  .arch-cards.wrap { flex-wrap:wrap; }
  .arch-card { background:var(--panel); border:1px solid #2a2e38; border-radius:8px;
               padding:9px 12px; font-size:12.5px; font-weight:600; min-width:120px; }
  .arch-card.big { flex:1; }
  .arch-card.hl { background:rgba(46,160,67,.18); border-color:#2d5a35; color:var(--admin); }
  .arch-card span { display:block; font-size:11px; font-weight:400; color:var(--muted); margin-top:3px; }
  .arch-arrow { display:flex; align-items:center; color:var(--muted); font-size:16px; }
  .arch-down { text-align:center; color:var(--muted); font-size:11px; padding:7px 0; }

  /* security tab */
  #security { display:none; flex:1; overflow-y:auto; padding:24px; flex-direction:column; }
  .sec-wrap { max-width:1020px; display:flex; flex-direction:column; gap:14px; }
  .sec-pipe { display:flex; flex-wrap:wrap; gap:6px; align-items:stretch; }
  .sec-step { flex:1 1 150px; background:#11141a; border:1px solid #2a2e38; border-left-width:3px;
              border-radius:8px; padding:9px 11px; font-size:11.5px; color:#c7ccd6; line-height:1.45; }
  .sec-step > b.st { display:block; font-size:12.5px; color:#e6e8ec; margin-bottom:3px; }
  .sec-step .n { display:inline-flex; width:18px; height:18px; border-radius:50%; background:#2a3340; color:#9fb4d6;
                 font-size:10.5px; font-weight:700; align-items:center; justify-content:center; margin-right:5px; }
  .sec-step.det { border-left-color:var(--admin); }
  .sec-step.prob { border-left-color:var(--viewer); }
  .sec-step.soft { border-left-color:#5a6678; }
  .sec-legend { display:flex; gap:16px; flex-wrap:wrap; font-size:11px; color:var(--muted); margin-top:9px; }
  .sec-legend i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px; }
  .sec-ctrls { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:9px; }
  .sec-ctrl { background:#11141a; border:1px solid #2a2e38; border-radius:8px; padding:9px 12px; }
  .sec-ctrl .t { font-size:12.5px; font-weight:700; color:#e6e8ec; display:flex; gap:7px; align-items:center; }
  .sec-ctrl .w { font-size:10.5px; color:var(--muted); font-family:ui-monospace,Menlo,monospace; margin-top:2px; }
  .sec-ctrl .d { font-size:11.5px; color:#c7ccd6; line-height:1.45; margin-top:4px; }
  .sec-dot { flex:none; width:9px; height:9px; border-radius:50%; background:#5a6678; }
  .sec-dot.on { background:var(--admin); } .sec-dot.partial { background:var(--viewer); } .sec-dot.off { background:#f85149; }
  .sec-spec { margin-left:auto; font-size:10px; font-weight:600; color:#9fb4d6; background:#2a3340; padding:1px 7px; border-radius:999px; }
  .sec-lab { display:grid; grid-template-columns:270px 1fr; gap:14px; align-items:start; }
  .sec-list { display:flex; flex-direction:column; gap:4px; max-height:680px; overflow-y:auto; padding-right:2px; }
  .sec-grp { font-size:10.5px; letter-spacing:.6px; text-transform:uppercase; color:#7aa8ff; margin:9px 2px 2px; font-weight:700; }
  .sec-sc { text-align:left; background:#1f242e; border:1px solid #2a2e38; color:#d7dbe3; border-radius:7px;
            padding:7px 9px; font-size:12px; cursor:pointer; }
  .sec-sc:hover { background:#262d39; border-color:#3a4555; }
  .sec-sc[aria-pressed="true"] { border-color:var(--accent); background:#232f3e; }
  .sec-sc small { display:block; color:var(--muted); font-size:10.5px; margin-top:2px; }
  .sec-ta { width:100%; min-height:110px; background:#0b0e13; color:#e6e8ec; border:1px solid #2a2e38; border-radius:8px;
            padding:9px 11px; font:12px/1.5 ui-monospace,Menlo,monospace; resize:vertical; }
  .sec-ta:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 2px rgba(79,140,255,.25); }
  .sec-meta { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:2px 0 8px; }
  .sec-chip { font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px; background:#2a3340; color:#9fb4d6; }
  .sec-desc { font-size:12.5px; color:#c7ccd6; line-height:1.55; margin:0 0 9px; }
  .sec-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:9px; align-items:center; }
  .sec-v { display:inline-block; min-width:86px; text-align:center; font-size:10.5px; font-weight:700; letter-spacing:.3px;
           padding:2px 8px; border-radius:5px; background:#2a3340; color:#9fb4d6; }
  .sec-v.BLOCKED, .sec-v.WITHHELD { background:rgba(248,81,73,.18); color:#f85149; }
  .sec-v.REDACTED, .sec-v.ANONYMIZED, .sec-v.SANITIZED { background:rgba(79,140,255,.18); color:#7aa8ff; }
  .sec-v.FLAGGED { background:rgba(210,153,34,.18); color:var(--viewer); }
  .sec-v.PASS, .sec-v.ALLOWED { background:rgba(46,160,67,.18); color:var(--admin); }
  .sec-layer { border:1px solid #2a2e38; border-radius:8px; padding:9px 11px; background:#11141a; margin-top:7px; }
  .sec-layer .h { display:flex; gap:9px; align-items:center; font-size:12.5px; font-weight:600; color:#e6e8ec; flex-wrap:wrap; }
  .sec-layer .s { font-size:11.5px; color:var(--muted); margin-top:4px; line-height:1.45; }
  .sec-find { font-size:11.5px; color:#c7ccd6; margin-top:5px; padding-left:10px; border-left:2px solid #2a3340; line-height:1.45; }
  .sec-find code, .sec-desc code, .sec-ctrl code { background:#0b0e13; border:1px solid #1f242e; border-radius:4px; padding:0 4px;
                  font-size:11px; color:#e6c07a; word-break:break-all; }
  .sec-sev { font-size:9.5px; font-weight:700; text-transform:uppercase; padding:0 5px; border-radius:4px; margin-right:4px; }
  .sec-sev.high { background:rgba(248,81,73,.18); color:#f85149; } .sec-sev.medium { background:rgba(210,153,34,.18); color:var(--viewer); }
  .sec-banner { border-radius:8px; padding:10px 12px; margin-top:10px; font-size:12.5px; line-height:1.5; color:#d7dbe3; }
  .sec-banner.bad { background:rgba(248,81,73,.08); border:1px solid rgba(248,81,73,.35); }
  .sec-banner.mid { background:rgba(79,140,255,.08); border:1px solid rgba(79,140,255,.3); }
  .sec-banner.warn { background:rgba(210,153,34,.08); border:1px solid rgba(210,153,34,.35); }
  .sec-banner.good { background:rgba(46,160,67,.08); border:1px solid rgba(46,160,67,.35); }
  .sec-out { margin:6px 0 0; background:#0b0e13; border:1px solid #1f242e; border-radius:6px; padding:9px 11px; font-size:11.5px;
             line-height:1.5; color:#d7dbe3; white-space:pre-wrap; word-break:break-word; max-height:260px; overflow-y:auto; }
  .sec-two { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .sec-bars .row { display:grid; grid-template-columns:140px 1fr 50px; gap:8px; align-items:center; font-size:11.5px; color:#c7ccd6; margin:5px 0; }
  .sec-bars .row b { text-align:right; color:#e6e8ec; }
  .sec-bar { height:10px; background:#11141a; border:1px solid #2a2e38; border-radius:5px; overflow:hidden; }
  .sec-bar > span { display:block; height:100%; }
  .sec-st { font-size:10px; font-weight:700; padding:1px 7px; border-radius:999px; white-space:nowrap; }
  .sec-st.live { background:rgba(46,160,67,.2); color:var(--admin); }
  .sec-st.partial { background:rgba(210,153,34,.2); color:var(--viewer); }
  .sec-st.gap { background:rgba(248,81,73,.16); color:#f85149; }
  .sec-ev { display:flex; gap:10px; flex-wrap:wrap; align-items:baseline; padding:5px 0; border-bottom:1px solid #1f242e; font-size:12px; }
  .sec-ev .when { margin-left:auto; color:var(--muted); font-size:11px; }
  @media (max-width:900px) { .sec-lab, .sec-two { grid-template-columns:1fr; } }
  /* security chips inside chat bubbles */
  .secrow { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:6px; }
  .secrow:empty { display:none; }
  .secchip { font-size:10.5px; padding:2px 8px; border-radius:999px; border:1px solid #3a4555; background:#1a1f29; color:#9fb4d6; cursor:help; }
  .secchip.BLOCKED, .secchip.WITHHELD { background:rgba(248,81,73,.12); border-color:rgba(248,81,73,.4); color:#f0938c; }
  .secchip.FLAGGED { background:rgba(210,153,34,.12); border-color:rgba(210,153,34,.4); color:var(--viewer); }
  .secchip.REDACTED, .secchip.SANITIZED { background:rgba(79,140,255,.12); border-color:rgba(79,140,255,.4); color:#7aa8ff; }

  /* ---- UI polish: active tab, focus, loading, empty-state, responsive ---- */
  /* Active nav tab: a clear accent so you always know where you are. */
  header button.ghost[aria-current="page"] {
    background:var(--accent); color:#fff; box-shadow:0 0 0 1px var(--accent);
  }
  /* Visible focus ring for keyboard users (accessibility). */
  button:focus-visible, select:focus-visible, input:focus-visible,
  .sb-q:focus-visible, .gloss:focus-visible, [tabindex]:focus-visible {
    outline:2px solid #7aa8ff; outline-offset:2px;
  }
  #composer input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 2px rgba(79,140,255,.25); }
  /* Send button: busy state while a turn is streaming. */
  #sendBtn.busy { opacity:.7; cursor:progress; }
  #sendBtn.busy::after { content:""; display:inline-block; width:11px; height:11px; margin-left:7px;
    vertical-align:-1px; border:2px solid rgba(255,255,255,.5); border-top-color:#fff;
    border-radius:50%; animation:spin .7s linear infinite; }
  @keyframes spin { to { transform:rotate(360deg); } }
  /* Typing indicator in a streaming bot bubble before the first token. */
  .typing { display:inline-flex; gap:4px; align-items:center; }
  .typing span { width:6px; height:6px; border-radius:50%; background:var(--muted);
    animation:blink 1.2s infinite both; }
  .typing span:nth-child(2){ animation-delay:.2s; } .typing span:nth-child(3){ animation-delay:.4s; }
  @keyframes blink { 0%,80%,100%{opacity:.25} 40%{opacity:1} }
  /* Chat empty-state: a friendly welcome + clickable starter prompts. */
  .chat-empty { margin:auto; max-width:560px; text-align:center; color:var(--muted); padding:30px 16px; }
  .chat-empty h3 { color:#e6e8ec; font-size:17px; margin:0 0 8px; }
  .chat-empty p { font-size:13px; line-height:1.55; margin:0 0 16px; }
  .chat-starters { display:flex; flex-direction:column; gap:8px; text-align:left; }
  .chat-starter { background:#1f242e; border:1px solid #2a2e38; color:#d7dbe3; border-radius:9px;
    padding:10px 13px; font-size:13px; cursor:pointer; transition:background .12s,border-color .12s; }
  .chat-starter:hover { background:#262d39; border-color:var(--accent); }
  .chat-starter .cs-tag { display:block; font-size:10.5px; color:var(--muted); margin-top:3px; }
  /* Responsive: let the header nav wrap/scroll and collapse the sidebar on narrow screens. */
  @media (max-width:1100px) {
    header { flex-wrap:wrap; row-gap:8px; }
    header h1 { font-size:15px; }
    header .ghost { padding:6px 10px; font-size:12px; }
  }
  @media (max-width:860px) {
    #sidebar { position:absolute; z-index:30; height:100%; box-shadow:2px 0 16px rgba(0,0,0,.4); }
    .userbox .usermeta { display:none; }
    header { gap:8px; }
    .arch-cards { flex-wrap:wrap; }
  }