@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

/* ── Variables ─────────────────────────────────────────────────── */
:root {
  --bg-primary:    #0a0d12;
  --bg-secondary:  #0f1420;
  --bg-panel:      #131825;
  --bg-elevated:   #1a2133;
  --border:        #1e2d45;
  --border-bright: #2a3f5f;
  --accent-blue:   #2d7dd2;
  --accent-cyan:   #00d4ff;
  --accent-green:  #00ff88;
  --accent-amber:  #ffb800;
  --text-primary:  #c8d8f0;
  --text-dim:      #5a7a9a;
  --text-muted:    #3a5070;
  --t-bg:          #000810;
  --t-green:       #33ff66;
  --t-blue:        #6699ff;
  --t-red:         #ff4444;
  --t-turquoise:   #00ffdd;
  --t-yellow:      #ffee44;
  --t-white:       #eeeeff;
  --t-field-bg:    #001a08;
  --t-cursor:      #33ff66;
  --logo-bg:         #1a0a12;
  --logo-ring:       #D4537E;
  --logo-ring-light: #F4C0D1;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'IBM Plex Sans', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  height: 100vh; display: flex; flex-direction: column; overflow: hidden;
}

/* ── TOP BAR ───────────────────────────────────────────────────── */
.topbar { display:flex;align-items:center;background:var(--bg-secondary);border-bottom:1px solid var(--border);height:42px;padding:0 12px;flex-shrink:0;gap:0; }
.logo { font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;color:var(--accent-cyan);letter-spacing:0.05em;margin-right:20px;white-space:nowrap; }
.logo span { color:var(--text-dim);font-weight:300; }
.topbar-menu { display:flex;align-items:center;flex:1; }
.menu-item { font-size:12px;padding:0 12px;height:42px;display:flex;align-items:center;cursor:pointer;color:var(--text-dim);border-right:1px solid var(--border);user-select:none;transition:all 0.15s;position:relative; }
.menu-item:hover { background:var(--bg-elevated);color:var(--text-primary); }
.menu-item.active { color:var(--accent-cyan); }
.menu-item.open   { background:var(--bg-elevated);color:var(--text-primary); }
.menu-dropdown { display:none;position:absolute;top:100%;left:0;min-width:200px;background:var(--bg-panel);border:1px solid var(--border-bright);border-radius:0 4px 4px 4px;box-shadow:0 12px 40px rgba(0,0,0,0.6);z-index:300;animation:dropIn 0.12s ease;padding:4px 0; }
.menu-item.open .menu-dropdown { display:block; }
@keyframes dropIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:none} }
.menu-dd-item { display:flex;align-items:center;justify-content:space-between;padding:6px 14px;font-size:12px;color:var(--text-dim);cursor:pointer;transition:background 0.1s,color 0.1s;white-space:nowrap; }
.menu-dd-item:hover { background:var(--bg-elevated);color:var(--text-primary); }
.menu-dd-item.disabled { color:var(--text-muted);cursor:default; }
.menu-dd-item.disabled:hover { background:none;color:var(--text-muted); }
.menu-dd-shortcut { font-size:10px;color:var(--text-muted);font-family:'IBM Plex Mono',monospace; }
.menu-dd-sep { height:1px;background:var(--border);margin:3px 0; }

/* ── STATUS AREA ───────────────────────────────────────────────── */
.status-area { display:flex;align-items:center;gap:12px;margin-left:auto;font-size:11px;font-family:'IBM Plex Mono',monospace; }
.conn-indicator { display:flex;align-items:center;gap:6px; }
.conn-dot { width:7px;height:7px;border-radius:50%;background:var(--accent-green);box-shadow:0 0 6px var(--accent-green);animation:pulse 2s infinite; }
.conn-dot.disconnected { background:var(--text-muted);box-shadow:none;animation:none; }
.conn-dot.connecting { background:var(--accent-amber);box-shadow:0 0 6px var(--accent-amber);animation:pulse 0.6s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* ── SESSION DROPDOWN ─────────────────────────────────────────────── */
.session-dropdown { position:relative; }
.session-dropdown-btn { display:flex;align-items:center;gap:6px;padding:5px 10px;cursor:pointer;border:1px solid var(--border-bright);border-radius:3px;font-size:11px;color:var(--text-dim);background:var(--bg-elevated);transition:all 0.15s;user-select:none; }
.session-dropdown-btn:hover,.session-dropdown-btn.open { background:var(--bg-panel);color:var(--accent-cyan);border-color:var(--accent-cyan); }
.session-dropdown-btn .chevron { font-size:8px;transition:transform 0.15s; }
.session-dropdown-btn.open .chevron { transform:rotate(180deg); }
.session-dropdown-menu { display:none;position:absolute;top:calc(100% + 4px);right:0;min-width:280px;background:var(--bg-panel);border:1px solid var(--border-bright);border-radius:4px;box-shadow:0 12px 40px rgba(0,0,0,0.6);z-index:400;animation:dropIn 0.12s ease;overflow:hidden; }
.session-dropdown-menu.open { display:block; }
.session-menu-items { max-height:280px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#1a3050 transparent; }
.session-menu-items::-webkit-scrollbar { width:3px; }
.session-menu-items::-webkit-scrollbar-thumb { background:#1a3050;border-radius:2px; }
.session-menu-header { font-size:10px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);padding:8px 12px 6px;border-bottom:1px solid var(--border); }
.session-menu-item { display:flex;align-items:center;gap:8px;padding:7px 12px;cursor:pointer;transition:background 0.1s; }
.session-menu-item:hover { background:var(--bg-elevated); }
.session-menu-dot { width:7px;height:7px;border-radius:50%;background:var(--text-muted);flex-shrink:0; }
.session-menu-dot.on   { background:var(--accent-green);box-shadow:0 0 4px var(--accent-green); }
.session-menu-dot.conn { background:var(--accent-blue); box-shadow:0 0 4px var(--accent-blue); }
.session-menu-info { flex:1; }
.session-menu-name { font-size:11px;font-family:'IBM Plex Mono',monospace;color:var(--text-primary); }
.session-menu-meta { font-size:10px;color:var(--text-muted); }
.session-menu-status-text { color:var(--accent-green); }
.session-menu-status-text.offline { color:var(--text-muted); }
.session-menu-connect { font-size:10px;padding:2px 8px;border-radius:2px;cursor:pointer;border:1px solid var(--border-bright);color:var(--accent-green);font-family:'IBM Plex Mono',monospace;transition:all 0.1s; }
.session-menu-connect:hover { background:#0f2a15;border-color:var(--accent-green); }
.session-menu-connect.active-session { color:var(--accent-amber);border-color:#3a2a10;cursor:default; }
.session-menu-footer { display:flex;align-items:center;gap:6px;padding:8px 12px;font-size:11px;color:var(--text-dim);border-top:1px solid var(--border);cursor:pointer;transition:all 0.1s; }
.session-menu-footer:hover { color:var(--accent-cyan);background:var(--bg-elevated); }
.topbar-btn { font-size:11px;padding:5px 12px;border-radius:3px;cursor:pointer;font-family:'IBM Plex Mono',monospace;background:var(--bg-elevated);border:1px solid var(--border-bright);color:var(--text-dim);transition:all 0.15s; }
.topbar-btn:hover { color:var(--text-primary);border-color:var(--accent-blue); }
.topbar-btn.primary { color:var(--accent-cyan);border-color:#1a3f5f; }
.topbar-btn.primary:hover { background:#0a1e30;border-color:var(--accent-cyan); }

/* ── SESSION TABS ──────────────────────────────────────────────── */
.session-tabs { display:flex;align-items:center;background:var(--bg-secondary);border-bottom:1px solid var(--border);height:34px;padding:0 8px;flex-shrink:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#1a3050 transparent; }
.session-tabs::-webkit-scrollbar { height:3px; }
.session-tabs::-webkit-scrollbar-thumb { background:#1a3050;border-radius:2px; }
.session-tab { display:flex;align-items:center;gap:6px;padding:0 10px;height:34px;font-size:11px;font-family:'IBM Plex Mono',monospace;white-space:nowrap;color:var(--text-muted);cursor:pointer;transition:all 0.15s;border-right:1px solid var(--border);user-select:none;flex-shrink:0; }
.session-tab:hover { background:var(--bg-elevated);color:var(--text-dim); }
.session-tab.active { background:var(--bg-panel);color:var(--text-primary);border-bottom:2px solid var(--accent-cyan); }
.tab-dot { width:7px;height:7px;border-radius:50%;flex-shrink:0;background:#555; }
.tab-close { font-size:14px;line-height:1;color:var(--text-muted);opacity:0;transition:opacity 0.15s; }
.session-tab:hover .tab-close { opacity:0.5; }
.tab-close:hover { opacity:1 !important;color:var(--accent-amber); }
.tab-add { display:flex;align-items:center;justify-content:center;width:34px;min-width:34px;font-size:18px;cursor:pointer;color:var(--text-muted);transition:color 0.15s; }
.tab-add:hover { color:var(--accent-cyan); }
.tab-split { display:flex;align-items:center;justify-content:center;padding:0 9px;height:34px;font-size:14px;cursor:pointer;color:var(--text-muted);border-right:1px solid var(--border);user-select:none;flex-shrink:0;transition:color 0.15s; }
.tab-split:hover { color:var(--text-primary); }
.tab-split.split-active { color:var(--accent-cyan); }

/* ── Split-screen panes ─────────────────────────────────────────── */
.split-pane-left { flex:1;display:flex;align-items:center;justify-content:flex-start;overflow:auto; }
.screen-wrapper.split-mode { padding:0;gap:0; }
.screen-wrapper.split-mode .split-pane-left { flex:1;padding:8px;border-right:1px solid var(--border); }
.screen-wrapper.split-mode .split-pane-right { flex:1;padding:8px;align-items:center;justify-content:flex-start;overflow:auto; }

/* ── MAIN LAYOUT ───────────────────────────────────────────────── */
.main-layout { display:flex;flex:1;overflow:hidden; }

/* ── SIDEBAR ───────────────────────────────────────────────────── */
.sidebar { width:200px;min-width:200px;background:var(--bg-panel);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;transition:width 0.2s,min-width 0.2s; }
.sidebar.collapsed { width:0;min-width:0; }
.sidebar-section { border-bottom:1px solid var(--border); }
.sidebar-header { font-size:10px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);padding:10px 12px 6px;display:flex;align-items:center;justify-content:space-between; }
.sidebar-header-btn { font-size:14px;cursor:pointer;color:var(--text-muted);transition:color 0.15s; }
.sidebar-header-btn:hover { color:var(--accent-cyan); }
.session-item { display:flex;align-items:center;gap:8px;padding:5px 12px;font-size:11px;font-family:'IBM Plex Mono',monospace;cursor:pointer;transition:background 0.1s;color:var(--text-dim); }
.session-item:hover { background:var(--bg-elevated); }
.session-item.connected { color:var(--accent-green); }
.session-dot { width:6px;height:6px;border-radius:50%;background:var(--text-muted);flex-shrink:0; }
.session-dot.on   { background:var(--accent-green);box-shadow:0 0 4px var(--accent-green); }
.session-dot.conn { background:var(--accent-blue); box-shadow:0 0 4px var(--accent-blue); }
.session-name { flex:1; }
.session-type { font-size:9px;color:var(--text-muted); }
#sidebarSessionList { scrollbar-width:thin;scrollbar-color:#1a3050 transparent; }
#sidebarSessionList::-webkit-scrollbar { width:3px; }
#sidebarSessionList::-webkit-scrollbar-thumb { background:#1a3050;border-radius:2px; }
.session-edit-btn { display:none;padding:0 5px;background:transparent;border:1px solid var(--border);border-radius:2px;color:var(--text-muted);font-size:11px;cursor:pointer;line-height:16px;font-family:'IBM Plex Mono',monospace;transition:all 0.1s;flex-shrink:0; }
.session-item:hover .session-edit-btn { display:inline-block; }
.session-edit-btn:hover { color:var(--accent-cyan);border-color:var(--accent-cyan); }
.profile-edit-btn { font-size:10px;padding:2px 7px;background:var(--bg-panel);border:1px solid var(--border);color:var(--text-dim);border-radius:2px;cursor:pointer;font-family:'IBM Plex Mono',monospace;transition:all 0.1s;flex-shrink:0; }
.profile-edit-btn:hover { color:var(--accent-cyan);border-color:var(--accent-cyan); }
.profile-delete-btn { font-size:10px;padding:2px 7px;background:var(--bg-panel);border:1px solid var(--border);color:var(--text-muted);border-radius:2px;cursor:pointer;font-family:'IBM Plex Mono',monospace;transition:all 0.1s;flex-shrink:0; }
.profile-delete-btn:hover { color:var(--t-red);border-color:var(--t-red); }
.session-delete-btn { display:none;padding:0 5px;background:transparent;border:1px solid var(--border);border-radius:2px;color:var(--text-muted);font-size:11px;cursor:pointer;line-height:16px;font-family:'IBM Plex Mono',monospace;transition:all 0.1s;flex-shrink:0; }
.session-item:hover .session-delete-btn { display:inline-block; }
.session-delete-btn:hover { color:var(--t-red);border-color:var(--t-red); }
.session-builtin-badge { font-size:8px;padding:1px 4px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:2px;color:var(--text-muted);font-family:'IBM Plex Mono',monospace;letter-spacing:0.03em;vertical-align:middle;margin-left:3px; }
.macro-item { display:flex;align-items:center;gap:8px;padding:5px 12px;font-size:11px;cursor:pointer;color:var(--text-dim);transition:background 0.1s; }
.macro-item:hover { background:var(--bg-elevated);color:var(--accent-amber); }
.macro-edit-btn,.macro-delete-btn { display:none;padding:0 5px;background:transparent;border:1px solid var(--border);border-radius:2px;font-size:10px;cursor:pointer;line-height:16px;font-family:'IBM Plex Mono',monospace;transition:all 0.1s;flex-shrink:0;color:var(--text-muted); }
.macro-item:hover .macro-edit-btn,
.macro-item:hover .macro-delete-btn { display:inline-block; }
.macro-edit-btn:hover  { color:var(--accent-cyan); border-color:var(--accent-cyan); }
.macro-delete-btn:hover { color:var(--t-red);       border-color:var(--t-red); }
#sidebarMacroList { max-height:180px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#1a3050 transparent; }
#sidebarMacroList::-webkit-scrollbar { width:3px; }
#sidebarMacroList::-webkit-scrollbar-thumb { background:#1a3050;border-radius:2px; }

/* ── TERMINAL ──────────────────────────────────────────────────── */
.terminal-area { flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--t-bg); }
.terminal-toolbar { display:flex;align-items:center;gap:4px;padding:4px 8px;background:#060c14;border-bottom:1px solid #0d1f14;flex-shrink:0;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin;scrollbar-color:#1a3050 transparent; }
.terminal-toolbar::-webkit-scrollbar { height:3px; }
.terminal-toolbar::-webkit-scrollbar-thumb { background:#1a3050;border-radius:2px; }
.t-btn { font-size:10px;font-family:'IBM Plex Mono',monospace;padding:3px 8px;background:#0a1520;border:1px solid #1a3020;color:#33aa55;border-radius:2px;cursor:pointer;transition:all 0.1s;white-space:nowrap;flex-shrink:0; }
.t-btn:hover { background:#0f2530;border-color:#33ff66;color:#33ff66; }
.t-btn.pf { color:#4488cc;border-color:#1a3050; }
.t-btn.pf:hover { border-color:#6699ff;color:#6699ff; }
.t-sep { width:1px;height:16px;background:#0d1f14;margin:0 2px; }
.t-spacer { flex:1; }
.screen-wrapper { flex:1;display:flex;align-items:center;justify-content:flex-start;overflow:auto;padding:8px;position:relative;background:var(--t-bg); }
.t3270-screen { font-family:'IBM Plex Mono',monospace;font-size:var(--term-font-size,13px);line-height:1.45;background:var(--t-bg);color:var(--t-green);position:relative;white-space:nowrap;user-select:none;border:1px solid #0d2510;box-shadow:0 0 40px rgba(0,100,50,0.15),inset 0 0 60px rgba(0,0,0,0.5);flex-shrink:0;transform-origin:top center; }
/* ── Panel control toggles ─────────────────────────────────────── */
body.no-scanlines .t3270-screen::after { display:none; }
body.no-blink     .cursor-cell         { animation:none; background:var(--t-cursor); color:#000; }
body.no-highlights .field-protected,
body.no-highlights .field-protected-hi,
body.no-highlights .field-label,
body.no-highlights .field-error,
body.no-highlights .field-dim          { color:var(--t-green); font-weight:normal; }
.t3270-screen::after { content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.03) 2px,rgba(0,0,0,0.03) 4px);pointer-events:none;z-index:10; }
.gddm-canvas { position:absolute;inset:0;pointer-events:none;z-index:5; }
.screen-row { display:block;white-space:nowrap;height:1.45em; }
.screen-cell { display:inline-block;width:var(--cell-w,1ch);white-space:pre;vertical-align:top; }
.field-protected    { color:var(--t-blue); }
.field-protected-hi { color:var(--t-white);font-weight:600; }
.field-label        { color:var(--t-turquoise); }
.field-error        { color:var(--t-red); }
.field-title        { color:var(--t-yellow);font-weight:600; }
.field-dim          { color:#1a5530; }
.cursor-cell        { animation:blink 1s step-start infinite; }
@keyframes blink { 0%,100%{background:var(--t-cursor);color:#000} 50%{background:transparent;color:var(--t-green)} }

/* ── 3270 Extended Colors (SA/SFE type 0x42) ─────────────────────── */
.c-blue   { color: var(--t-blue)       !important; }
.c-red    { color: var(--t-red)        !important; }
.c-pink   { color: #ff88cc             !important; }
.c-green  { color: var(--t-green)      !important; }
.c-turq   { color: var(--t-turquoise)  !important; }
.c-yellow { color: var(--t-yellow)     !important; }
.c-white  { color: var(--t-white)      !important; }

/* ── 3270 Extended Highlights (SA/SFE type 0x41) ─────────────────── */
.hl-blink   { animation: t3270-blink 1s step-end infinite; }
@keyframes t3270-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.hl-reverse { background: var(--t-green); color: var(--t-bg) !important; }
.hl-under   { text-decoration: underline; }
.hl-intens  { color: var(--t-white) !important; filter: brightness(1.4); }

/* ── Color Reveal mode — strips all extended color/highlight ─────── */
body.color-reveal .c-blue,
body.color-reveal .c-red,
body.color-reveal .c-pink,
body.color-reveal .c-green,
body.color-reveal .c-turq,
body.color-reveal .c-yellow,
body.color-reveal .c-white  { color: var(--t-green) !important; }
body.color-reveal .hl-blink { animation: none !important; opacity: 1 !important; }
body.color-reveal .hl-reverse { background: none !important; color: var(--t-green) !important; }
body.color-reveal .hl-under { text-decoration: none !important; }
body.color-reveal .hl-intens { filter: none !important; color: var(--t-green) !important; }
body.color-reveal .field-nondisplay { color: var(--t-green) !important; opacity: 1 !important; }

/* ── OIA BAR ───────────────────────────────────────────────────── */
.oia-bar { background:#060c14;border-top:1px solid #0d1f14;padding:3px 12px;display:flex;align-items:center;gap:20px;font-family:'IBM Plex Mono',monospace;font-size:10px;color:#3a7050;flex-shrink:0; }
.oia-field { display:flex;align-items:center;gap:6px; }
.oia-label { color:var(--text-muted);font-size:9px; }
.oia-val       { color:var(--t-green); }
.oia-val.amber { color:var(--accent-amber); }
.oia-val.blue  { color:var(--t-blue); }
.oia-spacer { flex:1; }

/* ── RIGHT PANEL ───────────────────────────────────────────────── */
.right-panel { width:300px;min-width:300px;background:var(--bg-panel);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden; }
.right-panel.hidden { display:none; }
.panel-tabs { display:flex;border-bottom:1px solid var(--border);flex-shrink:0; }
.panel-tab { flex:1;text-align:center;padding:8px 2px;font-size:10px;cursor:pointer;color:var(--text-muted);border-bottom:2px solid transparent;transition:all 0.15s;user-select:none; }
.panel-tab.active { color:var(--accent-cyan);border-color:var(--accent-cyan); }
.panel-tab:hover:not(.active) { color:var(--text-dim); }
.panel-tab.copilot-tab.active  { color:#7eb8ff;border-color:#7eb8ff; }
.panel-tab.aiconfig-tab.active { color:var(--accent-amber);border-color:var(--accent-amber); }
.panel-content { flex:1;overflow-y:auto;padding:12px;display:none; }
.panel-content::-webkit-scrollbar { width:4px; }
.panel-content::-webkit-scrollbar-thumb { background:var(--border-bright);border-radius:2px; }

/* ── SETTINGS ──────────────────────────────────────────────────── */
.setting-group { margin-bottom:16px; }
.setting-label { font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:6px; }
.setting-row { display:flex;align-items:center;gap:8px;margin-bottom:6px; }
.setting-row label { font-size:11px;color:var(--text-dim);flex:1; }
select,input[type="text"],input[type="number"],input[type="password"] { background:var(--bg-elevated);border:1px solid var(--border-bright);color:var(--text-primary);font-size:11px;font-family:'IBM Plex Mono',monospace;padding:4px 8px;border-radius:3px;width:100%;outline:none; }
select:focus,input[type="text"]:focus,input[type="number"]:focus,input[type="password"]:focus { border-color:var(--accent-blue); }
.toggle { width:28px;height:14px;border-radius:7px;background:var(--border-bright);cursor:pointer;position:relative;flex-shrink:0;transition:background 0.2s; }
.toggle.on { background:var(--accent-green); }
.toggle::after { content:'';position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:white;transition:transform 0.2s; }
.toggle.on::after { transform:translateX(14px); }
.theme-swatches { display:flex;gap:6px;flex-wrap:wrap; }
.theme-swatch { width:22px;height:22px;border-radius:3px;cursor:pointer;border:2px solid transparent;transition:border-color 0.15s; }
.theme-swatch.active { border-color:var(--accent-cyan); }
.theme-swatch:hover:not(.active) { border-color:var(--border-bright); }
.shortcut-item { display:flex;align-items:center;justify-content:space-between;padding:4px 0;font-size:11px; }
.shortcut-desc { color:var(--text-dim); }
.shortcut-key { font-family:'IBM Plex Mono',monospace;font-size:10px;background:var(--bg-elevated);border:1px solid var(--border-bright);padding:1px 5px;border-radius:2px;color:var(--accent-amber); }

/* ── AI CONFIG PANEL ───────────────────────────────────────────── */
.ai-provider-fields { margin-top:0; }
.ai-chip { display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:6px 10px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:4px;font-size:11px;color:var(--text-dim); }
.ai-chip-dot { width:7px;height:7px;border-radius:50%;background:var(--text-muted);flex-shrink:0;transition:background 0.3s; }
.ai-chip-ctx { margin-left:auto;font-size:10px;color:var(--text-muted); }
.btn-icon { background:none;border:none;cursor:pointer;font-size:13px;padding:2px 4px;color:var(--text-dim);transition:color 0.15s; }
.btn-icon:hover { color:var(--text-primary); }
.btn-sm { font-size:10px;padding:4px 10px;border-radius:3px;cursor:pointer;background:var(--bg-elevated);border:1px solid var(--border-bright);color:var(--text-dim);font-family:'IBM Plex Mono',monospace;transition:all 0.15s; }
.btn-sm:hover { border-color:var(--accent-blue);color:var(--text-primary); }
.btn-sm.primary { background:var(--accent-blue);border-color:var(--accent-blue);color:white; }
.btn-sm.primary:hover { background:#3d8de2; }
.ai-status-row { display:flex;align-items:center;gap:7px;font-size:11px;color:var(--text-muted);min-height:20px;margin-bottom:12px; }
.ai-status-dot { width:7px;height:7px;border-radius:50%;background:var(--text-muted);flex-shrink:0;transition:background 0.2s; }
.ai-probe-result { display:none;margin-top:8px;padding:8px;border-radius:4px;font-size:10px;font-family:'IBM Plex Mono',monospace;line-height:1.6;word-break:break-all;background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-dim); }

/* ── COPILOT PANEL ─────────────────────────────────────────────── */
#panelCopilot.active { display:flex;flex-direction:column;padding:0; }
.copilot-header-row { display:flex;align-items:center;gap:8px;padding:10px 12px 8px;border-bottom:1px solid var(--border);flex-shrink:0; }
.copilot-logo-sm { width:22px;height:22px;border-radius:4px;background:linear-gradient(135deg,#1a3a5c,#0d5f8f);border:1px solid #2a5f8f;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--accent-cyan); }
.copilot-title-sm { font-size:11px;font-weight:600;color:var(--text-primary); }
.copilot-subtitle { font-size:9px;color:var(--text-muted); }
.quick-prompts { display:flex;gap:4px;padding:6px 10px;overflow-x:auto;flex-shrink:0;flex-wrap:nowrap;border-bottom:1px solid var(--border);scrollbar-width:none; }
.quick-prompts::-webkit-scrollbar { display:none; }
.qp-btn { font-size:10px;font-family:'IBM Plex Sans',sans-serif;padding:3px 9px;background:var(--bg-elevated);border:1px solid var(--border-bright);color:var(--text-dim);border-radius:12px;cursor:pointer;white-space:nowrap;transition:all 0.15s;flex-shrink:0; }
.qp-btn:hover { border-color:var(--accent-cyan);color:var(--accent-cyan);background:rgba(0,212,255,0.05); }
.chat-area { flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth; }
.chat-area::-webkit-scrollbar { width:3px; }
.chat-area::-webkit-scrollbar-thumb { background:var(--border-bright);border-radius:2px; }
.chat-empty { display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:20px;text-align:center; }
.chat-empty-icon { font-size:28px;color:var(--text-muted);margin-bottom:8px; }
.chat-empty-title { font-size:13px;color:var(--text-dim);margin-bottom:6px; }
.chat-empty-body { font-size:11px;color:var(--text-muted);line-height:1.6; }
.msg { display:flex;gap:7px;animation:msgIn 0.2s ease; }
@keyframes msgIn { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} }
.msg-avatar { width:22px;height:22px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;margin-top:1px; }
.msg.user .msg-avatar      { background:var(--bg-elevated);border:1px solid var(--border-bright);color:var(--text-dim); }
.msg.assistant .msg-avatar { background:linear-gradient(135deg,#1a3a5c,#0d5f8f);border:1px solid #2a5f8f;color:var(--accent-cyan); }
.msg-body { flex:1;min-width:0; }
.msg-role { font-size:9px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:3px; }
.msg.user .msg-role      { color:var(--text-muted); }
.msg.assistant .msg-role { color:#7eb8ff; }
.msg-content { font-size:11.5px;line-height:1.6;color:var(--text-primary); }
.msg.user .msg-content { color:var(--text-dim); }
.msg-content code { font-family:'IBM Plex Mono',monospace;font-size:10.5px;background:var(--bg-elevated);border:1px solid var(--border-bright);padding:0 3px;border-radius:2px;color:var(--accent-amber); }
.msg-content pre { background:#060c14;border:1px solid var(--border);border-left:3px solid var(--accent-blue);border-radius:3px;padding:8px 10px;margin:6px 0;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--t-green);overflow-x:auto;line-height:1.5;white-space:pre; }
.msg-content strong { color:var(--text-primary);font-weight:600; }
.context-block { background:#060c10;border:1px solid var(--border);border-left:3px solid rgba(0,255,136,0.3);border-radius:3px;margin-bottom:5px;overflow:hidden; }
.context-block-header { display:flex;align-items:center;justify-content:space-between;padding:3px 6px;font-size:9px;color:var(--text-muted);font-family:'IBM Plex Mono',monospace;cursor:pointer; }
.context-block-header:hover { color:var(--text-dim); }
.context-block-body { font-family:'IBM Plex Mono',monospace;font-size:9px;color:#1a6030;padding:4px 6px;white-space:pre;overflow-x:auto;max-height:80px;overflow-y:auto;transition:max-height 0.2s; }
.context-block-body.collapsed { max-height:0;padding:0 6px;overflow:hidden; }
.typing-indicator { display:flex;gap:3px;align-items:center;padding:4px 0; }
.typing-dot { width:5px;height:5px;border-radius:50%;background:var(--text-muted);animation:typingPulse 1.2s infinite ease-in-out; }
.typing-dot:nth-child(2) { animation-delay:0.2s; }
.typing-dot:nth-child(3) { animation-delay:0.4s; }
@keyframes typingPulse { 0%,60%,100%{transform:scale(1);opacity:0.5} 30%{transform:scale(1.3);opacity:1} }
.macro-card { background:#060c14;border:1px solid var(--border);border-left:3px solid var(--accent-amber);border-radius:3px;padding:8px 10px;margin-top:6px; }
.macro-card-title { font-size:11px;color:var(--accent-amber);margin-bottom:4px; }
.macro-card-actions { display:flex;gap:5px;margin-top:7px; }
.macro-card-btn { font-size:10px;font-family:'IBM Plex Mono',monospace;padding:3px 8px;background:var(--bg-elevated);border:1px solid var(--border-bright);color:var(--text-dim);border-radius:2px;cursor:pointer;transition:all 0.1s; }
.macro-card-btn:hover { border-color:var(--accent-amber);color:var(--accent-amber); }
.macro-card-btn.primary { color:var(--accent-green);border-color:#1a3a20; }
.macro-card-btn.primary:hover { background:#0a1e10;border-color:var(--accent-green); }
.copilot-input-area { padding:8px;border-top:1px solid var(--border);flex-shrink:0; }
.copilot-input-row { display:flex;gap:6px;align-items:flex-end; }
.copilot-input-row textarea { flex:1;background:var(--bg-elevated);border:1px solid var(--border-bright);color:var(--text-primary);font-size:11px;font-family:'IBM Plex Sans',sans-serif;padding:6px 8px;border-radius:3px;resize:none;outline:none;max-height:90px;scrollbar-width:thin; }
.copilot-input-row textarea:focus { border-color:var(--accent-blue); }
.send-btn { width:28px;height:28px;border-radius:4px;cursor:pointer;background:var(--accent-blue);border:none;color:white;font-size:14px;flex-shrink:0;transition:background 0.15s; }
.send-btn:hover { background:#3d8de2; }
.send-btn:disabled { background:var(--border-bright);cursor:default; }
.copilot-input-footer { display:flex;align-items:center;justify-content:space-between;margin-top:5px;padding:0 2px; }
.screen-ctx-toggle { display:flex;align-items:center;gap:5px;font-size:10px;color:var(--text-muted);cursor:pointer;user-select:none; }
.screen-ctx-toggle:hover { color:var(--text-dim); }
.toggle-mini { width:22px;height:12px;border-radius:6px;position:relative;background:var(--accent-green);cursor:pointer;transition:background 0.2s; }
.toggle-mini.off { background:var(--border); }
.toggle-mini::after { content:'';position:absolute;top:2px;left:2px;width:8px;height:8px;background:white;border-radius:50%;transition:transform 0.2s; }
.toggle-mini.off::after { transform:none; }
.toggle-mini:not(.off)::after { transform:translateX(10px); }

/* ── XFER ──────────────────────────────────────────────────────── */
.xfer-root { display:flex;flex-direction:column;gap:10px;padding:10px 12px;height:100%;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent; }

.xfer-header { display:flex;align-items:center;gap:6px;flex-wrap:wrap; }
.xfer-title { font-size:12px;font-weight:700;color:var(--text-primary);flex:1; }
.xfer-sys-badge { font-size:9px;font-weight:700;letter-spacing:.05em;padding:2px 6px;border-radius:3px;text-transform:uppercase; }
.xfer-sys-tso { background:#0d2040;color:#4a9fd4;border:1px solid #1e4a7f; }
.xfer-sys-zvm { background:#1a1200;color:#c8a030;border:1px solid #4a3800; }
.xfer-mode-toggle { font-size:10px;background:transparent;border:1px solid var(--border-bright);border-radius:3px;color:var(--text-dim);padding:2px 7px;cursor:pointer;white-space:nowrap; }
.xfer-mode-toggle:hover { border-color:var(--accent-blue);color:var(--text-primary); }

.xfer-warn { font-size:10px;color:var(--accent-amber);background:#1a1000;border:1px solid #3a2800;border-radius:3px;padding:5px 8px; }

.xfer-dir-tabs { display:flex;gap:4px; }
.xfer-dir-tab { flex:1;font-size:10px;font-family:'IBM Plex Mono',monospace;background:var(--bg-elevated);border:1px solid var(--border);border-radius:3px;color:var(--text-dim);padding:5px 6px;cursor:pointer;text-align:center;transition:all .15s; }
.xfer-dir-tab:hover { border-color:var(--border-bright);color:var(--text-primary); }
.xfer-dir-tab.active { background:#0d2040;border-color:#1e4a7f;color:#4a9fd4;font-weight:600; }
.xfer-dir-sub { display:block;font-size:9px;color:inherit;opacity:.7;margin-top:1px; }

.xfer-section { display:flex;flex-direction:column;gap:8px; }
.xfer-hidden { display:none !important; }

.xfer-field-group { display:flex;flex-direction:column;gap:4px; }
.xfer-label { font-size:10px;color:var(--text-dim);font-weight:600;letter-spacing:.03em; }
.xfer-tip { font-size:9px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:50%;padding:0 3px;cursor:help;color:var(--text-dim); }
.xfer-input { width:100%;background:#070d16;border:1px solid var(--border-bright);border-radius:3px;color:var(--text-primary);font-family:'IBM Plex Mono',monospace;font-size:11px;padding:4px 7px;outline:none;transition:border-color .15s; }
.xfer-input:focus { border-color:var(--accent-blue); }
.xfer-input::placeholder { color:var(--text-muted); }
.xfer-input-hint { font-size:9px;color:var(--text-muted);margin-top:1px; }
.xfer-select { width:100%;background:#070d16;border:1px solid var(--border-bright);border-radius:3px;color:var(--text-primary);font-family:'IBM Plex Mono',monospace;font-size:11px;padding:4px 7px;outline:none;cursor:pointer; }
.xfer-select:focus { border-color:var(--accent-blue); }

.xfer-row-2 { display:grid;grid-template-columns:1fr 1fr;gap:6px; }
.xfer-row-3 { display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px; }
.xfer-col { display:flex;flex-direction:column;gap:3px; }

.xfer-file-drop { border:2px dashed var(--border-bright);border-radius:4px;padding:10px 8px;text-align:center;font-size:10px;color:var(--text-dim);cursor:pointer;transition:all .15s;background:#070d16; }
.xfer-file-drop:hover,.xfer-file-drop.dragover { border-color:var(--accent-blue);color:var(--text-primary);background:#0a1828; }
.xfer-file-drop.has-file { border-color:var(--accent-green);color:var(--accent-green); }

.xfer-btn { font-size:11px;padding:6px 12px;border-radius:3px;cursor:pointer;background:var(--bg-elevated);border:1px solid var(--border-bright);color:var(--text-dim);transition:all 0.15s;width:100%;text-align:center;font-family:'IBM Plex Mono',monospace;font-weight:600; }
.xfer-btn:hover:not(:disabled) { border-color:var(--accent-blue);color:var(--text-primary); }
.xfer-btn:disabled { opacity:.4;cursor:not-allowed; }

.xfer-tso-edit-toggle { font-size:10px;color:var(--text-dim);display:flex;align-items:center;gap:5px;cursor:pointer; }
.xfer-tso-edit-toggle input { cursor:pointer; }

.xfer-cmd-preview { background:#070d16;border:1px solid var(--border);border-radius:3px;padding:6px 8px; }
.xfer-cmd-label { font-size:9px;color:var(--text-muted);display:block;margin-bottom:3px;letter-spacing:.03em; }
.xfer-cmd-preview code { font-size:10px;color:var(--accent-cyan);word-break:break-all;font-family:'IBM Plex Mono',monospace; }

.xfer-expert-block { display:flex;flex-direction:column;gap:4px; }
.xfer-expert-help { font-size:9px;color:var(--text-muted);line-height:1.6;margin-top:3px; }
.xfer-expert-help b { color:var(--text-dim); }

.xfer-status { font-size:10px;padding:5px 8px;border-radius:3px;border:1px solid var(--border); }
.xfer-status.working { color:var(--accent-amber);background:#1a1000;border-color:#3a2800; }
.xfer-status.done    { color:var(--accent-green);background:#001a08;border-color:#003a10; }
.xfer-status.error   { color:var(--t-red);background:#1a0000;border-color:#3a0000; }

.xfer-filelist-hdr { display:flex;align-items:center;justify-content:space-between;margin-bottom:2px; }
.xfer-refresh-btn { font-size:10px;background:transparent;border:1px solid var(--border-bright);border-radius:3px;color:var(--text-dim);padding:2px 7px;cursor:pointer; }
.xfer-refresh-btn:hover { border-color:var(--accent-blue);color:var(--text-primary); }
.xfer-filelist { background:#070d16;border:1px solid var(--border);border-radius:3px;max-height:120px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent; }
.xfer-filelist-empty { font-size:10px;color:var(--text-muted);padding:10px 8px;text-align:center; }
.xfer-filelist-hdr-row,.xfer-filelist-fn,.xfer-filelist-ft,.xfer-filelist-fm { display:contents; }
.xfer-filelist > div { display:grid;grid-template-columns:2fr 1fr 1fr;padding:3px 8px;font-size:10px;font-family:'IBM Plex Mono',monospace;cursor:pointer;border-bottom:1px solid var(--border);color:var(--text-dim); }
.xfer-filelist > div:hover { background:var(--bg-elevated);color:var(--text-primary); }
.xfer-filelist > div.selected { background:#0d2040;color:#4a9fd4; }
.xfer-filelist-meta { font-size:9px;color:var(--text-muted); }
.xfer-selected-id { margin-top:4px; }

.xfer-log-header { display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--text-dim);font-weight:600;letter-spacing:.03em;margin-top:4px; }
.xfer-clear-btn { font-size:9px;background:transparent;border:1px solid var(--border);border-radius:3px;color:var(--text-muted);padding:1px 6px;cursor:pointer; }
.xfer-clear-btn:hover { border-color:var(--border-bright);color:var(--text-dim); }
.xfer-log { background:#070d16;border:1px solid var(--border);border-radius:3px;padding:6px 8px;font-size:10px;font-family:'IBM Plex Mono',monospace;max-height:100px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent;color:var(--text-dim);line-height:1.6;flex-shrink:0; }

/* ── MODAL ─────────────────────────────────────────────────────── */
.modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:500; }
.modal-overlay.hidden { display:none; }
.modal { background:var(--bg-panel);border:1px solid var(--border-bright);border-radius:6px;width:420px;box-shadow:0 20px 60px rgba(0,0,0,0.7); }
.modal-header { padding:16px 20px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between; }
.modal-title { font-size:14px;font-weight:500; }
.modal-close { cursor:pointer;color:var(--text-muted);font-size:18px;transition:color 0.15s; }
.modal-close:hover { color:var(--text-primary); }
.modal-body { padding:20px; }
.modal-footer { padding:12px 20px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end; }
.form-group { margin-bottom:14px; }
.form-label { font-size:11px;color:var(--text-dim);margin-bottom:5px;display:block; }
.form-row { display:flex;gap:8px; }
.form-row .form-group { flex:1; }
#modalProfileList { max-height:200px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#1a3050 transparent;margin-bottom:4px; }
#modalProfileList::-webkit-scrollbar { width:3px; }
#modalProfileList::-webkit-scrollbar-thumb { background:#1a3050;border-radius:2px; }
.profile-item { display:flex;align-items:center;gap:8px;padding:7px 8px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:3px;margin-bottom:6px;cursor:pointer;transition:border-color 0.15s; }
.profile-item:hover { border-color:var(--accent-blue); }
.profile-name { font-size:11px;font-family:'IBM Plex Mono',monospace;color:var(--text-primary);flex:1; }
.profile-host { font-size:10px;color:var(--text-muted); }
.profile-connect-btn { font-size:10px;padding:2px 8px;background:var(--bg-panel);border:1px solid var(--border-bright);color:var(--accent-green);border-radius:2px;cursor:pointer;font-family:'IBM Plex Mono',monospace;transition:all 0.1s; }
.profile-connect-btn:hover { background:#0f2a15;border-color:var(--accent-green); }
.btn { font-size:11px;padding:6px 14px;border-radius:3px;cursor:pointer;font-family:'IBM Plex Mono',monospace;transition:all 0.15s; }
.btn-secondary { background:var(--bg-elevated);border:1px solid var(--border-bright);color:var(--text-dim); }
.btn-secondary:hover { border-color:var(--accent-blue);color:var(--text-primary); }
.btn-primary { background:var(--accent-blue);border:1px solid var(--accent-blue);color:white; }
.btn-primary:hover { background:#3d8de2; }

/* ── Field Map Overlay (FMO) ───────────────────────────────────── */
/* Activated by body.field-map-overlay. Highlights field attribute  */
/* byte cells and tints data cells by field type.                   */

/* FA cell — the attribute byte position itself */
.field-map-overlay .fmo-fa-cell {
  font-weight: 700;
  font-size: 0.85em;
  opacity: 1 !important;
  cursor: help;
  z-index: 2;
  position: relative;
}

/* FA cell color by field type */
.field-map-overlay .fmo-fa-cell.fmo-protected   { color: #ff6666; background: rgba(255,60,60,0.18); outline: 1px solid rgba(255,60,60,0.4); }
.field-map-overlay .fmo-fa-cell.fmo-unprotected { color: #44ff88; background: rgba(40,255,100,0.15); outline: 1px solid rgba(40,255,100,0.35); }
.field-map-overlay .fmo-fa-cell.fmo-nondisplay  { color: #cc88ff; background: rgba(160,80,255,0.18); outline: 1px solid rgba(160,80,255,0.4); }
.field-map-overlay .fmo-fa-cell.fmo-intensified { color: #ffee44; background: rgba(255,220,40,0.15); outline: 1px solid rgba(255,220,40,0.35); }

/* MDT dot — small indicator on modified fields */
.field-map-overlay .fmo-fa-cell.fmo-mdt::after {
  content: '•';
  font-size: 0.6em;
  vertical-align: super;
  color: #ffb800;
  margin-left: 1px;
}

/* Data cell tints — subtle background wash by field type */
.field-map-overlay .fmo-tint-protected   { background: rgba(255,60,60,0.06); }
.field-map-overlay .fmo-tint-unprotected { background: rgba(40,255,100,0.06); }
.field-map-overlay .fmo-tint-error       { background: rgba(255,60,60,0.12); }
.field-map-overlay .fmo-tint-dim         { background: rgba(100,100,120,0.10); }
.field-map-overlay .fmo-tint-nondisplay  { background: rgba(160,80,255,0.08); }

/* Legend — shown in OIA bar area when FMO is active */
body.field-map-overlay .oia-bar::before {
  content: '▸PROT  ▸UNPROT  ▸HIDDEN  ▸INTENS  •MDT';
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: transparent;
  background: linear-gradient(90deg, #ff6666 0% 14%, #44ff88 15% 30%, #cc88ff 31% 46%, #ffee44 47% 62%, #ffb800 63% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  margin-right: 10px;
  white-space: nowrap;
}

/* ── Attribute Byte Inspector ────────────────────────────────────── */
.attr-inspector {
  position: fixed; z-index: 9999;
  background: #0a1628; border: 1px solid #1e3a5f;
  border-radius: 6px; box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  color: var(--text-dim); min-width: 260px; max-width: 300px;
  user-select: none;
}
.abi-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px 6px; border-bottom: 1px solid #1e3a5f;
}
.abi-title  { font-weight: 600; color: var(--accent-cyan); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; flex: 1; }
.abi-addr   { font-size: 9px; color: var(--text-muted); }
.abi-close  { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 12px; padding: 0 2px; line-height: 1; }
.abi-close:hover { color: var(--text-primary); }

.abi-hex    { display: flex; align-items: baseline; gap: 10px; padding: 8px 10px 4px; }
.abi-hexval { font-size: 22px; font-weight: 600; color: var(--accent-cyan); letter-spacing: 0.04em; }
.abi-bin    { font-size: 12px; color: var(--text-muted); letter-spacing: 0.15em; }
.abi-bin b  { color: var(--accent-amber); }

.abi-table  { width: 100%; border-collapse: collapse; padding: 0 10px; display: table; }
.abi-table tr { border-top: 1px solid rgba(30,58,95,0.5); }
.abi-bit    { padding: 4px 10px; color: var(--text-muted); font-size: 9px; width: 36px; }
.abi-label  { padding: 4px 4px; color: var(--text-dim); }
.abi-val    { padding: 4px 10px; text-align: right; color: var(--text-dim); }
.abi-on     { color: var(--accent-green) !important; font-weight: 600; }
.abi-off    { color: #2a3a50 !important; }

.abi-footer {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px;
  border-top: 1px solid #1e3a5f; align-items: center;
}
.abi-footer span { font-size: 9px; border-radius: 3px; padding: 1px 5px; letter-spacing: 0.06em; font-weight: 600; }
.abi-tag-prot    { background: rgba(255,60,60,0.15);  color: #ff6666; border: 1px solid rgba(255,60,60,0.3); }
.abi-tag-unprot  { background: rgba(40,255,100,0.12); color: #44ff88; border: 1px solid rgba(40,255,100,0.3); }
.abi-tag-num     { background: rgba(0,180,255,0.12);  color: #44ccff; border: 1px solid rgba(0,180,255,0.3); }
.abi-tag-hidden  { background: rgba(160,80,255,0.15); color: #cc88ff; border: 1px solid rgba(160,80,255,0.3); }
.abi-tag-intens  { background: rgba(255,220,40,0.12); color: #ffee44; border: 1px solid rgba(255,220,40,0.3); }
.abi-tag-mdt     { background: rgba(255,184,0,0.12);  color: #ffb800; border: 1px solid rgba(255,184,0,0.3); }
.abi-len         { margin-left: auto; color: var(--text-muted) !important; font-weight: 400 !important; }

/* ── ABI Mutation row ────────────────────────────────────────────── */
.abi-mutations {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  padding: 6px 10px 8px; border-top: 1px solid #1e3a5f;
  background: rgba(255,140,0,0.04);
}
.abi-mut-label {
  font-size: 8px; font-weight: 700; color: #7a5a20;
  letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap; cursor: default;
}
.abi-mut-btn {
  background: none; border: 1px solid #3a2a0a; border-radius: 3px;
  color: #aa8040; font-family: 'IBM Plex Mono', monospace;
  font-size: 9px; font-weight: 600; padding: 2px 7px;
  cursor: pointer; transition: border-color 0.12s, color 0.12s;
  white-space: nowrap;
}
.abi-mut-btn:hover { border-color: #cc9930; color: #ffcc66; }
.abi-mut-prot:hover { border-color: #cc4444; color: #ff8888; }
.abi-mut-reveal { border-color: #1a5a3a !important; color: #44aa77 !important; }
.abi-mut-reveal:hover { border-color: #44cc88 !important; color: #88ffbb !important; }

/* ── Security Tools Toolbar ──────────────────────────────────────── */
/* ── Security Panel (right panel tab) ───────────────────────────── */
.sec-panel-tab { color: #5a8aaa !important; }
.sec-panel-tab.active { color: var(--accent-amber) !important; }

.sec-section { border-bottom: 1px solid #0d1a2a; }
.sec-section-hdr {
  font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
  color: #2a4a6a; padding: 10px 14px 4px;
  text-transform: uppercase;
}
.sec-section-body { padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 4px; }

.sec-row { display: flex; gap: 4px; align-items: flex-start; }
.sec-row-inline { align-items: center; }

.sec-panel-btn {
  display: flex; flex-direction: column; align-items: flex-start;
  width: 100%; background: #080e18; border: 1px solid #1a2f44;
  border-radius: 4px; padding: 7px 10px; cursor: pointer;
  text-align: left; text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
  font-family: 'IBM Plex Mono', monospace;
}
.sec-panel-btn:hover { border-color: var(--accent-cyan); background: #0a1220; }
.sec-panel-btn-active {
  border-color: var(--accent-amber) !important;
  background: rgba(255,170,0,0.06) !important;
}
.sec-panel-btn-active .sec-panel-btn-label { color: var(--accent-amber) !important; }
.sec-panel-btn-label {
  font-size: 11px; font-weight: 600; color: var(--text-dim);
  letter-spacing: 0.04em; line-height: 1.3;
}
.sec-panel-btn-sub {
  font-size: 9px; color: var(--text-muted); margin-top: 2px;
  font-weight: 400; letter-spacing: 0.02em; line-height: 1.3;
}
.sec-panel-btn-inline { flex: 1; }

.sec-panel-icon-btn {
  background: #080e18; border: 1px solid #1a2f44; border-radius: 3px;
  color: var(--text-muted); font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; padding: 4px 8px; cursor: pointer; flex-shrink: 0;
  align-self: center;
}
.sec-panel-icon-btn:hover { border-color: var(--accent-cyan); color: var(--text-dim); }

.sec-anomaly-log { margin: 4px 0 0; }

.sec-row-watch { margin-top: 4px; }
.sec-watch-input {
  width: 100%; box-sizing: border-box;
  background: #08081a; border: 1px solid #c8a030; border-radius: 3px;
  color: #e8c060; font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  padding: 5px 8px; outline: none;
}
.sec-watch-input::placeholder { color: #444; }

.sec-inject-row {
  display: flex; align-items: center; gap: 6px; width: 100%;
}
.sec-inject-btn {
  background: #080e18; border: 1px solid #2a5a3a; border-radius: 3px;
  color: #3a9a6a; font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  font-weight: 700; padding: 4px 10px; cursor: pointer; white-space: nowrap;
}
.sec-inject-btn:hover { border-color: #3a9a6a; background: rgba(58,154,106,0.08); }
.sec-panel-hint {
  font-size: 9px; color: var(--text-muted); margin-top: 5px;
  letter-spacing: 0.02em; line-height: 1.4;
}

.sec-inject-select {
  background: #0a1020;
  border: 1px solid #2a4a6a;
  border-radius: 3px;
  color: #8aaccc;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  padding: 2px 20px 2px 6px;
  cursor: pointer;
  /* visible dropdown arrow */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234a7aaa'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 5px center;
}
.sec-inject-select:hover { border-color: #4a8fcc; }
.sec-inject-select:focus { outline: none; border-color: var(--accent-cyan); }

/* ── Session Anomaly Annotations ─────────────────────────────────── */
.anomaly-bar {
  background: #04080e; border-top: 1px solid #0d1a2a;
  padding: 0 12px; flex-shrink: 0; overflow: hidden;
  max-height: 0; transition: max-height 0.3s ease, padding 0.3s ease;
  font-family: 'IBM Plex Mono', monospace;
}
.anomaly-bar:not(:empty) { max-height: 80px; padding: 4px 12px; }
.anomaly-bar.anomaly-flash { border-color: rgba(255,150,0,0.4); }

.anomaly-log-panel {
  background: #030508; border-top: 1px solid #0a1520;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  max-height: 0; overflow-y: auto; transition: max-height 0.25s ease;
  flex-shrink: 0;
  scrollbar-width: thin; scrollbar-color: #1a3050 transparent;
}
.anomaly-log-panel.anomaly-log-open { max-height: 140px; }

.anomaly-item {
  display: flex; align-items: baseline; gap: 8px;
  padding: 3px 0; border-bottom: 1px solid rgba(10,25,40,0.6);
  font-size: 10px;
}
.anomaly-time  { color: #2a4a6a; font-size: 9px; flex-shrink: 0; }
.anomaly-code  { font-weight: 700; font-size: 10px; flex-shrink: 0; min-width: 80px; }
.anomaly-msg   { color: var(--text-muted); }
.anomaly-warn .anomaly-code  { color: #ff8844; }
.anomaly-info .anomaly-code  { color: var(--accent-amber); }
.anomaly-empty { color: var(--text-muted); font-size: 10px; padding: 8px 12px; }

/* ── MITM Intercept Panel ─────────────────────────────────────────── */
.mitm-panel {
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: #0e0e1c;
  border: 2px solid #c8a840;
  border-radius: 6px;
  box-shadow: 0 6px 28px rgba(0,0,0,0.85), 0 0 0 1px rgba(200,168,64,0.15);
  z-index: 9999;
  min-width: 480px;
  max-width: 700px;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 12px;
  color: #d4d4d4;
}
.mitm-header {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(200,168,64,0.10);
  border-bottom: 1px solid #2a2a3a;
  padding: 8px 14px;
}
.mitm-title {
  font-size: 11px;
  font-weight: 700;
  color: #c8a840;
  letter-spacing: 0.06em;
}
.mitm-aid {
  font-size: 13px;
  font-weight: 700;
  padding: 1px 9px;
  background: rgba(255,255,255,0.05);
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.08);
}
.mitm-cursor {
  font-size: 10px;
  color: #666;
  margin-left: auto;
}
.mitm-fields {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2a3a50 transparent;
}
.mitm-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mitm-field-label {
  font-size: 10px;
  color: #666;
}
.mitm-nd-tag {
  color: #c87040;
  font-size: 10px;
  margin-left: 6px;
}
.mitm-field-input {
  background: #08081a;
  border: 1px solid #333;
  border-radius: 3px;
  color: #88e088;
  font-family: inherit;
  font-size: 12px;
  padding: 5px 8px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.mitm-field-input:focus { border-color: #c8a840; }
.mitm-no-fields {
  color: #555;
  font-size: 11px;
  font-style: italic;
  padding: 4px 0;
}
.mitm-actions {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid #1e1e2e;
}
.mitm-btn {
  flex: 1;
  padding: 6px 12px;
  border: 1px solid #333;
  border-radius: 3px;
  background: #12121f;
  color: #aaa;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.mitm-btn:hover { background: #1e1e30; }
.mitm-btn-release { border-color: #3a9a6a; color: #3a9a6a; }
.mitm-btn-release:hover { background: rgba(58,154,106,0.12); color: #5acc8a; }
.mitm-btn-drop    { border-color: #aa4040; color: #aa4040; }
.mitm-btn-drop:hover    { background: rgba(170,64,64,0.12); color: #cc6060; }
.mitm-btn-replay  { border-color: #5a7aaa; color: #5a7aaa; }
.mitm-btn-replay:hover  { background: rgba(90,122,170,0.12); color: #80aacc; }

/* ── MITM Replay Badge (persists after release) ───────────────────── */
.mitm-replay-badge {
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: #0e0e1c;
  border: 1px solid #2a3a50;
  border-radius: 4px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: #666;
  z-index: 9998;
}
.mitm-replay-label { color: #555; }
.mitm-replay-label strong { color: #8aaacc; }
.mitm-replay-badge .mitm-btn-replay { flex: 0 0 auto; padding: 4px 10px; font-size: 11px; }
.mitm-replay-dismiss {
  background: none;
  border: none;
  color: #444;
  cursor: pointer;
  font-size: 11px;
  padding: 0 2px;
  line-height: 1;
}
.mitm-replay-dismiss:hover { color: #888; }

/* ── Credential Harvest Log Panel ────────────────────────────────── */
.harvest-panel {
  position: fixed;
  bottom: 60px;
  right: 20px;
  width: 580px;
  max-height: 340px;
  background: #0a0a18;
  border: 2px solid #8a3a3a;
  border-radius: 6px;
  box-shadow: 0 6px 28px rgba(0,0,0,0.85);
  z-index: 9990;
  display: flex;
  flex-direction: column;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
}
.harvest-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(138,58,58,0.12);
  border-bottom: 1px solid #2a1a1a;
  flex-shrink: 0;
}
.harvest-title { font-size: 11px; font-weight: 700; color: #c87070; letter-spacing: 0.06em; flex: 1; }
.harvest-count { font-size: 10px; color: #666; }
.harvest-action-btn {
  background: #12121f; border: 1px solid #333; border-radius: 3px;
  color: #888; font-family: inherit; font-size: 10px; padding: 3px 8px; cursor: pointer;
}
.harvest-action-btn:hover { background: #1e1e30; color: #bbb; }
.harvest-body { overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: #2a1a1a transparent; }
.harvest-table { width: 100%; border-collapse: collapse; }
.harvest-table th {
  position: sticky; top: 0; background: #0f0f1e;
  color: #555; font-size: 10px; font-weight: 600; text-align: left;
  padding: 5px 10px; border-bottom: 1px solid #1e1e2e; letter-spacing: 0.05em;
}
.harvest-table td { padding: 5px 10px; border-bottom: 1px solid #111; color: #aaa; font-size: 11px; }
.harvest-value { color: #e08080; font-weight: 600; }
.harvest-empty { color: #444; font-style: italic; text-align: center; padding: 16px !important; }

/* ── Screen Watch Alert ───────────────────────────────────────────── */
.watch-alert {
  position: fixed;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1200;
  border: 2px solid #c8a030;
  border-radius: 5px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: #e8c060;
  z-index: 10000;
  box-shadow: 0 4px 20px rgba(0,0,0,0.8);
  transition: top 0.25s ease;
  white-space: nowrap;
}
.watch-alert-visible { top: 12px; }
.watch-alert-icon { font-size: 16px; }
.watch-alert-dismiss {
  background: none; border: none; color: #888; cursor: pointer; font-size: 13px; margin-left: 6px;
}
.watch-alert-dismiss:hover { color: #ccc; }

/* ── Watch Input ─────────────────────────────────────────────────── */
.watch-input {
  background: #08081a !important;
  border: 1px solid #c8a030 !important;
  border-radius: 3px;
  color: #e8c060 !important;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  padding: 3px 8px;
  width: 140px;
  outline: none;
  vertical-align: middle;
}
.watch-input::placeholder { color: #444; }

/* ── z/TPF Security Tools ────────────────────────────────────────── */
.tpf-running {
  color: var(--text-muted); font-size: 10px; padding: 8px 10px;
  font-style: italic;
}
.tpf-result-hdr {
  font-size: 10px; font-weight: 700; color: #40d080;
  letter-spacing: 0.08em; padding: 6px 10px 4px;
  border-bottom: 1px solid #0d2a1a;
}
.tpf-result-note {
  font-size: 10px; color: var(--text-muted); padding: 4px 10px 6px;
}
.tpf-table {
  width: 100%; border-collapse: collapse; font-size: 10px;
}
.tpf-table th {
  color: #2a6a4a; font-size: 9px; font-weight: 700; text-align: left;
  padding: 3px 8px; border-bottom: 1px solid #0d2a1a;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.tpf-table td { padding: 3px 8px; border-bottom: 1px solid #061408; color: #90b098; }
.tpf-mono   { font-family: 'IBM Plex Mono', monospace; }
.tpf-dim    { color: #4a6a52; }
.tpf-ok     { color: #40d080; }
.tpf-idle   { color: #6a6a6a; }
.tpf-deny   { color: #d04040; }
.tpf-warn   { color: #d08020; font-weight: 700; }
.tpf-priv-row td { background: rgba(200,80,20,0.06); }
.tpf-warn-row td { background: rgba(200,130,20,0.08); }
.tpf-priv-flag {
  font-size: 9px; font-weight: 700; color: #e05030;
  background: rgba(200,60,20,0.18); border: 1px solid rgba(200,60,20,0.3);
  border-radius: 2px; padding: 0 4px; letter-spacing: 0.05em;
}
.tpf-priv-result {
  margin: 6px 8px 0; padding: 6px 8px;
  border-radius: 3px; border: 1px solid #1a2a1a;
}
.tpf-priv-low      { border-color: #1a3a2a; background: #040d06; }
.tpf-priv-medium   { border-color: #3a2a0a; background: #0a0800; }
.tpf-priv-critical { border-color: #4a1a0a; background: #0d0400; }
.tpf-priv-role {
  font-size: 11px; font-weight: 700; color: #c0e8c8; margin-bottom: 3px;
}
.tpf-priv-medium  .tpf-priv-role { color: #e0c060; }
.tpf-priv-critical .tpf-priv-role { color: #e06040; }
.tpf-priv-risk { font-size: 10px; color: #4a6a52; }

/* ── z/TPF tour button (in section header) ─────────────────────────────────── */
.tpf-tour-start {
  margin-left: auto;
  background: none;
  border: 1px solid #1a3a2a;
  border-radius: 50%;
  color: #2a6a4a;
  font-size: 10px;
  font-weight: 700;
  width: 16px; height: 16px;
  line-height: 14px;
  text-align: center;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s, color 0.15s;
}
.tpf-tour-start:hover { border-color: #40d080; color: #40d080; }

/* ── tour backdrop + spotlight ──────────────────────────────────────────────── */
.tpf-tour-backdrop {
  position: fixed; inset: 0;
  z-index: 9997;
  cursor: default;
}
.tpf-tour-spotlight {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.78);
  border: 2px solid #40d080;
  border-radius: 4px;
  transition: top 0.22s ease, left 0.22s ease, width 0.22s ease, height 0.22s ease;
}

/* ── tour popover ───────────────────────────────────────────────────────────── */
.tpf-tour-popover {
  position: fixed;
  z-index: 9999;
  width: 300px;
  background: #060f08;
  border: 1px solid #40d080;
  border-radius: 6px;
  padding: 14px 16px 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  line-height: 1.55;
  color: #a8d5a2;
  box-shadow: 0 6px 32px rgba(0,0,0,0.7), 0 0 0 1px rgba(64,208,128,0.08);
  transition: top 0.22s ease, left 0.22s ease;
}
.tpf-tour-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none;
  color: #2a6a4a; font-size: 16px; line-height: 1;
  cursor: pointer; padding: 0;
}
.tpf-tour-close:hover { color: #40d080; }
.tpf-tour-step {
  font-size: 9.5px; letter-spacing: 0.1em;
  color: #2a6a4a; margin-bottom: 6px;
}
.tpf-tour-title {
  font-size: 12px; font-weight: 700;
  color: #40d080; text-transform: uppercase;
  letter-spacing: 0.07em; margin-bottom: 8px;
}
.tpf-tour-body { color: #8ab890; }
.tpf-tour-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; gap: 8px;
}
.tpf-tour-btn {
  background: #0a1a0d; border: 1px solid #1a4a2a;
  color: #40d080; border-radius: 3px;
  padding: 4px 12px; font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  cursor: pointer; transition: background 0.12s;
}
.tpf-tour-btn:hover:not(:disabled) { background: #0d2a1a; }
.tpf-tour-btn:disabled { opacity: 0.3; cursor: default; }
.tpf-tour-btn-primary {
  background: #0d2a1a; border-color: #40d080;
  font-weight: 700;
}