/* ============================================================================
   claude·tape — shared web app stylesheet (PC shell + mobile shell)
   4 tabs: Home / Tokens / 会话(sessions) / FRP
   - .panel  = card surface (ported from old dashboard)
   - .tabpanel = per-tab container (#panel-home/#panel-tokens/#panel-sessions/#panel-frp)
                 renamed from .panel to avoid colliding with the card class.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. Root variables (dashboard + reference tokens merged)
   --------------------------------------------------------------------------- */
:root{
  --accent:#E78A6A;--accent-dk:#C45A3A;--accent2:#E78A6A;--bg:#f5f5f7;--s1:#fff;--s2:#f2f2f5;--s3:#e8e8ed;
  --t1:#1d1d1f;--t2:#6e6e73;--t3:#aeaeb2;--green:#28a745;--red:#ff3b30;
  --r:14px;--rsm:10px;--rxs:8px;
  --navh:52px;
  --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
  --accent-bg:rgba(231,138,106,.1);
  --accent-g:linear-gradient(145deg,#E78A6A,#C45A3A);
  --b:rgba(0,0,0,.07);--bm:rgba(0,0,0,.12);
  --card-shadow:0 1px 3px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.04);
}

/* ---------------------------------------------------------------------------
   2. Reset & base
   --------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{
  height:100%;
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",sans-serif;
  font-size:13px;color:var(--t1);background:var(--bg);
  -webkit-font-smoothing:antialiased;line-height:1.5;
}
body::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
button,input,select,textarea{font-family:inherit}
a{color:var(--accent);text-decoration:none}
.hidden{display:none!important}

::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.25)}

/* ---------------------------------------------------------------------------
   3. Generic components (ported from old dashboard — same class names)
   --------------------------------------------------------------------------- */
.panel{
  background:var(--s1);border-radius:var(--r);padding:14px 16px;margin-bottom:16px;
  box-shadow:var(--card-shadow);border:1px solid var(--b);
}
.panel-title{font-size:13px;font-weight:600;margin-bottom:12px;letter-spacing:-.01em}
.panel-title-flex{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.panel-title-actions{display:flex;gap:8px;flex-shrink:0}

.quota-bar{height:6px;background:var(--s3);border-radius:3px;overflow:hidden;margin-top:8px}
.quota-fill{height:100%;background:var(--accent);border-radius:3px;transition:width .4s}

table{width:100%;border-collapse:collapse;font-size:12px}
th{
  text-align:left;color:var(--t2);font-weight:600;padding:4px 8px 8px;
  border-bottom:1px solid var(--s3);white-space:nowrap;
}
td{padding:9px 8px;border-bottom:1px solid var(--s2);vertical-align:middle}
tr:last-child td{border-bottom:none}

.empty{text-align:center;color:var(--t3);padding:28px 0;font-size:13px}

.tag{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600}
.tag-active{background:#e8f5e9;color:var(--green)}
.tag-revoked{background:#ffeaea;color:var(--red)}

.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.row input,.row select{
  flex:1;min-width:0;padding:7px 10px;font-size:12px;background:var(--s2);
  border:1px solid var(--bm);border-radius:var(--rxs);outline:none;
  transition:border-color .15s;
}
.row input:focus,.row select:focus{border-color:var(--accent)}

.btn-sm{
  padding:7px 14px;font-size:12px;font-weight:500;border:none;
  border-radius:var(--rxs);cursor:pointer;white-space:nowrap;
  transition:background .12s,color .12s,border-color .12s,filter .15s;
}
.btn-sm:hover{filter:brightness(.93)}
.btn-sm:disabled{opacity:.5;cursor:default;filter:none}
.btn-sm:disabled:hover{filter:none}
.btn-accent{background:var(--accent-g);color:#fff}
.btn-accent:hover{filter:brightness(1.08)}
.btn-danger{background:var(--red);color:#fff}
.btn-ghost{
  background:var(--s2);color:var(--t2);
  border:1px solid var(--bm);border-radius:var(--rxs);
}
.btn-ghost:hover{background:var(--s3);color:var(--t1);border-color:var(--accent)}

.reveal{
  margin-top:10px;padding:10px 12px;background:#fff7f4;border-radius:var(--rxs);
  font-family:"SF Mono","JetBrains Mono",monospace;font-size:11px;
  word-break:break-all;border:1px solid rgba(231,138,106,.15);display:none;
}

.msg{font-size:12px;min-height:16px;margin-top:8px;color:var(--t2)}
.msg.err{color:var(--red)}
.msg.ok{color:var(--green)}

.td-cwd{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 会话名称单元格：标题（用户改名/默认名）+ 副标题（模型 · 短 sid） */
.td-title{min-width:140px}
.sess-title{
  font-weight:600;color:var(--t1);font-size:13px;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px;
}
.sess-first{
  font-size:12px;color:var(--t2);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px;
}
.sess-sub{
  font-size:11px;color:var(--t3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px;
}

/* Viewer overlay (session content viewer) */
.viewer-overlay{display:none;position:fixed;inset:0;z-index:200;background:var(--bg);flex-direction:column}
.viewer-overlay.open{display:flex}
.viewer-hdr{
  background:var(--s1);border-bottom:1px solid var(--b);padding:0 16px;
  height:52px;display:flex;align-items:center;gap:10px;flex-shrink:0;
}
.viewer-hdr-info{flex:1;min-width:0}
.viewer-hdr-cwd{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer-hdr-sid{font-size:11px;color:var(--t2)}
.viewer-body{flex:1;display:flex;overflow:hidden}
.viewer-content{flex:1;overflow:auto;padding:16px;background:var(--bg)}
.viewer-pre{
  font-family:"SF Mono","JetBrains Mono",Consolas,monospace;font-size:11px;
  line-height:1.6;white-space:pre-wrap;word-break:break-all;
  background:var(--s1);border-radius:var(--r);padding:16px;
  box-shadow:var(--card-shadow);min-height:60px;margin:0;
}
.viewer-sidebar{
  width:220px;background:var(--s1);border-left:1px solid var(--s3);
  display:flex;flex-direction:column;flex-shrink:0;transition:width .2s;overflow:hidden;
}
.viewer-sidebar.collapsed{width:36px}
.sidebar-hdr{
  height:40px;display:flex;align-items:center;padding:0 10px;
  border-bottom:1px solid var(--s3);flex-shrink:0;gap:6px;
}
.sidebar-title{font-size:12px;font-weight:600;flex:1;white-space:nowrap;overflow:hidden}
.collapsed .sidebar-title{display:none}
.sidebar-toggle{
  background:none;border:none;cursor:pointer;color:var(--t2);
  font-size:13px;padding:2px 4px;line-height:1;flex-shrink:0;
}
.sidebar-toggle:hover{color:var(--t1)}
.sidebar-list{flex:1;overflow-y:auto;padding:4px 0}
.collapsed .sidebar-list{display:none}
.v-item{padding:8px 12px;cursor:pointer;border-left:3px solid transparent;transition:background .1s}
.v-item:hover{background:var(--bg)}
.v-item.active{border-left-color:var(--accent);background:var(--accent-bg)}
.v-item-num{font-size:12px;font-weight:600}
.v-item-meta{font-size:11px;color:var(--t2);margin-top:2px}

/* ---------------------------------------------------------------------------
   4. Tab panels (per-tab containers) — .tabpanel to avoid clash with card .panel
   --------------------------------------------------------------------------- */
.tabpanel{display:none}
.tabpanel.on{display:flex;flex-direction:column;height:100%}

/* FRP sub-section panels (shared by PC subnav + mobile sub-tabs) */
[id^="frpsec-"]{display:none}
[id^="frpsec-"].on{display:block}

/* ---------------------------------------------------------------------------
   5. PC shell (.pc-*) — left sidebar + main with dynamic top tabs
   --------------------------------------------------------------------------- */
.pc-app{display:flex;min-height:100vh;align-items:stretch}

/* Sidebar (claude.ai-style, collapsible) */
.pc-sidebar{
  --side-w:236px;
  flex:none;width:var(--side-w);
  position:sticky;top:0;align-self:flex-start;height:100vh;
  display:flex;flex-direction:column;
  background:var(--s1);border-right:1px solid rgba(0,0,0,.08);
  transition:width .18s ease;overflow:hidden;z-index:31;
}
.pc-sidebar.collapsed{--side-w:60px}
.pc-side-head{
  height:52px;flex:none;display:flex;align-items:center;gap:8px;
  padding:0 12px 0 16px;border-bottom:1px solid rgba(0,0,0,.06);
}
.pc-brand{font-size:15px;font-weight:700;letter-spacing:-.02em;flex:1;white-space:nowrap;overflow:hidden}
.pc-brand em{font-style:normal;color:var(--accent)}
.pc-sidebar.collapsed .pc-brand{opacity:0}
.pc-collapse-btn{
  flex:none;width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;border-radius:var(--rxs);color:var(--t2);
  font-size:15px;line-height:1;cursor:pointer;transition:background .12s,color .12s;
}
.pc-collapse-btn:hover{background:var(--s2);color:var(--t1)}
.pc-sidebar.collapsed .pc-collapse-btn{transform:rotate(180deg)}

.pc-menu{display:flex;flex-direction:column;gap:2px;padding:10px 8px;overflow-y:auto}
.pc-menu-item{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:9px 12px;border:none;background:none;border-radius:var(--rsm);
  font-size:13px;font-weight:600;color:var(--t2);cursor:pointer;
  text-align:left;white-space:nowrap;transition:background .12s,color .12s;
}
.pc-menu-item:hover{background:var(--s2);color:var(--t1)}
.pc-menu-item.on{background:var(--accent-bg);color:var(--accent)}
.pc-menu-icon{flex:none;width:20px;text-align:center;font-size:16px;line-height:1}
.pc-menu-label{flex:1;overflow:hidden}
.pc-sidebar.collapsed .pc-menu-item{justify-content:center;padding:9px 0}
.pc-sidebar.collapsed .pc-menu-label{display:none}

/* Main column */
.pc-main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}

.pc-topbar{
  position:sticky;top:0;z-index:30;min-height:var(--navh);
  display:flex;align-items:flex-start;gap:8px;padding:8px 16px;
  background:#fff;border-bottom:1px solid rgba(0,0,0,.08);
}
.pc-sidebar-toggle,.pc-topbar-right{margin-top:2px}
.pc-sidebar-toggle{
  flex:none;width:30px;height:30px;display:none;align-items:center;justify-content:center;
  background:none;border:none;border-radius:var(--rxs);color:var(--t2);
  font-size:17px;cursor:pointer;
}
.pc-sidebar-toggle:hover{background:var(--s2);color:var(--t1)}

/* Dynamic top tab strip: Home pinned + closable opened tabs
   紧凑尺寸、扁平关闭按钮（红色 hover）；一行放不下时自动换到下一行。 */
.pc-tabstrip{
  flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px;
  padding:4px;
}
.pc-tab{
  display:flex;align-items:center;gap:3px;flex:none;
  max-width:180px;min-width:50px;
  padding:2px 6px;border-radius:var(--rxs);
  font-size:11px;color:var(--t2);cursor:pointer;white-space:nowrap;
  background:transparent;border:1px solid transparent;
  transition:background .12s,color .12s,border-color .12s;
}
.pc-tab:hover{background:rgba(0,0,0,.06);color:var(--t1)}
.pc-tab.on{background:var(--accent-bg);color:var(--accent-dk);border-color:rgba(231,138,106,.25)}
.pc-tab-icon{flex:none;font-size:12px;line-height:1}
.pc-tab-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-tab-close{
  flex:none;color:var(--t2);font-size:14px;line-height:1;
  padding:1px 3px;border:1px solid transparent;background:none;cursor:pointer;
  border-radius:var(--rxs);transition:background .12s,border-color .12s,color .12s;
}
.pc-tab-close:hover{background:rgba(255,59,48,.08);border-color:rgba(255,59,48,.2);color:var(--red)}

/* ── Tab 右键菜单 ── */
.tmi {
  display: block; width: 100%; text-align: left;
  background: transparent; color: var(--t1);
  border: none; border-radius: var(--rxs);
  padding: 4px 8px; font-size: 11px; cursor: pointer;
  transition: background .1s;
}
.tmi:hover { background: var(--s2); }
#tab-ctx-menu {
  position: fixed; z-index: 10001;
  background: var(--s1);
  border: 1px solid var(--bm);
  border-radius: var(--rsm);
  box-shadow: 0 6px 24px rgba(0,0,0,.15), 0 1px 4px rgba(0,0,0,.08);
  min-width: 140px; padding: 2px;
}
#tab-ctx-menu .tmi .ctx-icon { margin-right: 6px; opacity: .6; }
#tab-ctx-menu .tmi-danger { color: var(--red); }
#tab-ctx-menu .tmi-danger:hover { background: rgba(255,59,48,.08); }
.tab-ctx-sep { height: 1px; background: var(--b); margin: 3px 0; }

/* 顶级动态 tab 面板（tape agent 子 tab 提升后用）。
 * .tabpanel / .tabpanel.on 已提供 display:none/flex + flex-direction:column + height:100%。
 * 这里只补 padding 与滚动；session 终端面板用 .term-host 去掉 padding 让 xterm 满铺。 */
/* 动态 tab（终端/文件）固定在视口内，内部各自滚动，避免长列表把整页撑高。
 * 高度 = 视口 - 顶栏(navh) - pc-content 上下 padding(40px) - 余量(4px)。 */
/* 用 .tabpanel.tape-dyn-panel（双类）压过 .tabpanel.on 的 height:100%，
 * 让动态面板拿到确定高度，内部 flex 子区才能各自滚动而不撑破外层。 */
.tabpanel.tape-dyn-panel { padding: 6px; overflow: hidden; min-height: 0;
  height: calc(100dvh - var(--navh) - 44px); }
/* 内容型动态面板（首页/历史/配置）：内部 .panel 占满高度并自身滚动，
 * 否则长列表会被外层 overflow:hidden 裁切（"显示不全"）。文件面板自管布局，排除。 */
.tape-dyn-panel > .panel:not(.tape-fm-panel) { max-height: 100%; overflow: auto; margin-bottom: 0; }
.tape-dyn-panel.term-host { padding: 0; overflow: hidden; position: relative; contain: strict; z-index: 0; }
.tape-dyn-panel.term-host .xterm { height: 100%; }
/* 非 active 的 panel 必须完全隐藏，防止 xterm canvas 溢出 */
.tabpanel:not(.on) { visibility: hidden; pointer-events: none; }

.pc-topbar-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
.hdr-email{font-size:12px;color:var(--t2)}

/* ── User dropdown ── */
.user-dropdown{position:relative}
.user-dropdown-trigger{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:30px;height:30px;padding:0;border-radius:50%;
  background:var(--accent-g);border:none;
  font-size:13px;font-weight:700;color:#fff;cursor:pointer;
  transition:filter .12s;
}
.user-dropdown-trigger:hover{filter:brightness(1.08)}
.user-avatar{pointer-events:none}
.user-dropdown-menu{
  display:none;position:absolute;right:0;top:calc(100% + 4px);
  min-width:180px;background:var(--s1);
  border:1px solid var(--bm);border-radius:var(--rsm);
  box-shadow:0 6px 24px rgba(0,0,0,.12),0 1px 4px rgba(0,0,0,.06);
  padding:4px;z-index:100;
}
.user-dropdown.open .user-dropdown-menu{display:block}
.user-dropdown-info{padding:8px 10px 6px}
.user-dropdown-label{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.user-dropdown-email{font-size:13px;color:var(--t1);word-break:break-all}
.user-dropdown-sep{height:1px;background:var(--bm);margin:4px 0}
.user-dropdown-item{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:7px 10px;border:none;background:none;
  font-size:13px;color:var(--t1);cursor:pointer;
  border-radius:var(--rxs);transition:background .1s;
}
.user-dropdown-item:hover{background:var(--s2)}
.user-dropdown-item-icon{font-size:14px}

.pc-content{margin:0;padding:20px 16px;width:100%;flex:1;display:flex;flex-direction:column;min-height:0}

/* Dynamic SSH terminal panels: break out of the centered 980px content box and
   absolutely fill the whole main area below the topbar (full width, no page
   scrollbar) so FitAddon measures a real area. */
.term-panel{position:absolute;top:var(--topbar-h,52px);left:0;right:0;bottom:0;
  background:#1e1e1e;padding:8px;overflow:hidden}
.term-mount{flex:1;min-height:0}
.term-mount .xterm{height:100%}
/* Client 终端快捷键工具栏（手机/PC 共用同一个 term.js overlay）。
   深色主题与 CT.openTermTab 的 overlay 一致。 */
.term-keys{flex:none;display:flex;flex-direction:column;background:#2a2a2e;
  padding-bottom:var(--safe-b)}
.term-keys-main,.term-keys-extra{gap:4px;padding:6px 8px}
.term-keys-main{display:flex}
.term-keys-extra{display:none}
.term-keys.expanded .term-keys-extra{display:flex}
.tkey{flex:1;height:38px;border:none;border-radius:6px;background:#3a3a3f;color:#eee;
  font:13px/1 Consolas,'Courier New',monospace;-webkit-tap-highlight-color:transparent}
.tkey.armed{background:#3b7dd8;color:#fff}

/* FRP layout on PC: left vertical subnav + right section panels */
/* 整块限定在视口高度内，左侧导航与右侧内容各自独立滚动，不撑出外层页面滚动条 */
.frp-layout{display:flex;gap:16px;align-items:stretch;min-height:0;
  height:calc(100dvh - var(--navh) - 44px)}
.frp-subnav{
  flex:none;width:160px;display:flex;flex-direction:column;gap:2px;
  background:var(--s1);border-radius:var(--r);padding:8px;box-shadow:var(--card-shadow);
  min-height:0;overflow-y:auto;
}
.frp-subnav [data-frpsec]{
  padding:9px 12px;border-radius:var(--rxs);font-size:13px;font-weight:600;
  color:var(--t2);cursor:pointer;transition:background .12s,color .12s;
}
.frp-subnav [data-frpsec]:hover{background:var(--s2);color:var(--t1)}
.frp-subnav [data-frpsec].on{background:var(--accent-bg);color:var(--accent)}
.frp-sections{flex:1;min-width:0;min-height:0;overflow-y:auto}

/* ---------------------------------------------------------------------------
   6. Mobile shell (.m-*)
   --------------------------------------------------------------------------- */
.m-topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:10px;
  padding:calc(8px + var(--safe-t)) 14px 8px;
  background:rgba(255,255,255,.92);backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid rgba(0,0,0,.08);
}
.m-brand{font-size:16px;font-weight:700;letter-spacing:-.02em;flex:1}
.m-brand em{font-style:normal;color:var(--accent)}

.m-content{padding:14px;padding-bottom:calc(var(--navh) + var(--safe-b) + 12px)}

.m-bottomnav{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-top:1px solid rgba(0,0,0,.08);
  padding:6px 0 calc(6px + var(--safe-b));
}
.m-navitem{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:4px 0;background:none;border:none;cursor:pointer;
  color:var(--t3);font-size:10px;
}
.m-navitem .m-navicon{font-size:20px;line-height:1}
.m-navitem.on{color:var(--accent)}

/* FRP sub-tabs on mobile: horizontal scrollable row */
.frp-subtab-row{display:flex;gap:6px;margin-bottom:12px;overflow-x:auto}
.frp-subtab-row::-webkit-scrollbar{height:0}
.frp-subtab{
  flex:none;background:var(--s2);border:1px solid var(--bm);border-radius:20px;
  padding:6px 14px;font-size:12px;color:var(--t2);cursor:pointer;white-space:nowrap;
}
.frp-subtab.on{background:var(--accent-bg);color:var(--accent);border-color:rgba(231,138,106,.3)}

/* ---------------------------------------------------------------------------
   7. FRP components (class names ported from old frp.js markup)
   --------------------------------------------------------------------------- */
.proxy{
  background:var(--s1);border-radius:var(--r);box-shadow:var(--card-shadow);
  padding:12px 14px;margin-bottom:8px;display:flex;align-items:center;gap:10px;
}
.proxy-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--t3)}
.proxy-dot.online{background:var(--green)}
.proxy-dot.closed{background:var(--t3)}
.proxy-dot.error{background:var(--red)}
.proxy-info{flex:1;min-width:0}
.proxy-name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proxy-meta{font-size:12px;color:var(--t2);margin-top:2px}
.proxy-type{
  font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:#0071e3;background:rgba(0,113,227,.1);border-radius:20px;padding:2px 8px;flex:none;
}
.proxy-type.http{color:var(--accent);background:var(--accent-bg)}
.proxy-btn{
  width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--s2);border:1px solid var(--b);border-radius:var(--rxs);
  font-size:14px;cursor:pointer;
}
.proxy-btn:active{background:var(--s3)}
.proxy-btn.close{color:var(--red)}
.proxy-btn.start{color:var(--green)}

/* Filter tabs (proxy type filter) */
.ftab{
  flex:none;background:var(--s2);border:1px solid var(--bm);border-radius:20px;
  padding:6px 14px;font-size:12px;color:var(--t2);cursor:pointer;white-space:nowrap;
}
.ftab.on{background:var(--accent-bg);color:var(--accent);border-color:rgba(231,138,106,.3)}

/* Client list */
.client{
  background:var(--s1);border-radius:var(--r);box-shadow:var(--card-shadow);
  padding:12px 14px;margin-bottom:8px;
}
.client-head{display:flex;align-items:center;gap:10px;cursor:pointer}
.client-ip{font-weight:600;font-size:14px;font-family:"SF Mono",Consolas,monospace}
.client-summary{font-size:12px;color:var(--t2);margin-bottom:10px}
.client-chevron{color:var(--t2);font-size:11px;flex:none;width:12px}
.client-cell{flex:1;min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.client-cell.client-ip{flex:1.4}
.client-cell.client-acts{flex:none;display:flex;gap:4px;white-space:nowrap}
.client-cell.client-acts .btn-sm{padding:3px 8px;font-size:11px}
.client-os{color:var(--t2);font-size:12px}
.client-muted{color:var(--t2);font-size:12px;text-align:right}
.client-detail{margin-top:10px;padding-top:10px;border-top:1px solid var(--s2)}
.client-self{display:flex;flex-wrap:wrap;gap:6px 24px;font-size:12px;color:var(--t1)}
.client-self-k{display:inline-block;color:var(--t2);margin-right:6px}
.client-alias{
  margin-left:8px;color:var(--accent);font-size:14px;font-weight:700;cursor:pointer;
  border-bottom:1px dashed var(--bm);
}
.client-alias:hover{border-bottom-color:var(--accent)}
.client-alias-placeholder{color:var(--t3);font-style:italic}
.client-alias-input{
  width:110px;padding:2px 6px;font-size:12px;background:var(--s2);color:var(--t1);
  border:1px solid var(--accent);border-radius:var(--rxs);outline:none;
}

/* Status dot in bar / header */
.bar-dot{width:9px;height:9px;border-radius:50%;background:var(--t3);flex:none;display:inline-block}
.bar-dot.online{background:var(--green);box-shadow:0 0 5px rgba(40,167,69,.4)}
.bar-dot.error{background:var(--red)}

/* Config editor */
#frp-cfg-editor{
  display:block;width:100%;min-height:300px;padding:12px;
  background:var(--s2);color:var(--t1);
  border:1px solid var(--bm);border-radius:var(--rsm);outline:none;
  font-family:"SF Mono","JetBrains Mono",Consolas,monospace;font-size:12px;line-height:1.6;
  resize:vertical;
}
#frp-cfg-editor:focus{border-color:var(--accent)}

/* Log box */
#frp-log-content{
  background:var(--t1);color:#eaeaea;border-radius:var(--r);padding:12px;
  font-family:"SF Mono","JetBrains Mono",Consolas,monospace;font-size:12px;line-height:1.6;
  max-height:60vh;overflow:auto;white-space:pre-wrap;word-break:break-all;margin:0;
}

/* Toolbox */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.tool-card{
  display:flex;align-items:center;gap:12px;text-align:left;
  padding:14px;background:var(--s2);border:1px solid var(--b);border-radius:var(--rsm);
  cursor:pointer;transition:border-color .12s,box-shadow .12s,transform .12s;
}
.tool-card:hover{border-color:var(--accent);box-shadow:var(--card-shadow);transform:translateY(-1px)}
.tool-card-icon{font-size:22px;flex:none}
.tool-card-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.tool-card-name{font-size:13px;font-weight:600;color:var(--t1)}
.tool-card-desc{font-size:11px;color:var(--t2);line-height:1.4}
.tool-label{display:block;font-size:11px;color:var(--t3);margin-bottom:6px;font-weight:500}
.tool-label code{background:var(--s2);padding:1px 5px;border-radius:6px;font-family:"SF Mono","JetBrains Mono",Consolas,monospace}
.tool-textarea{
  display:block;width:100%;min-height:120px;padding:12px;margin-bottom:14px;
  background:var(--s2);color:var(--t1);
  border:1px solid var(--bm);border-radius:var(--rsm);outline:none;
  font-family:"SF Mono","JetBrains Mono",Consolas,monospace;font-size:12px;line-height:1.6;
  resize:vertical;
}
.tool-textarea:focus{border-color:var(--accent)}
.tool-input{
  display:block;width:100%;padding:9px 12px;margin-bottom:14px;
  background:var(--s2);color:var(--t1);
  border:1px solid var(--bm);border-radius:var(--rsm);outline:none;
  font-family:"SF Mono","JetBrains Mono",Consolas,monospace;font-size:13px;line-height:1.5;
}
.tool-input:focus{border-color:var(--accent)}

/* Config section heading (model list, etc.) */
.cfg-h{
  font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--t3);margin-bottom:10px;margin-top:16px;
}
.tool-output{
  background:var(--t1);color:#eaeaea;border-radius:var(--r);padding:12px;margin:12px 0 0;
  font-family:"SF Mono","JetBrains Mono",Consolas,monospace;font-size:12px;line-height:1.6;
  max-height:50vh;overflow:auto;white-space:pre-wrap;word-break:break-all;
}
.tool-output:empty{display:none}

/* Toast */
.toast{
  position:fixed;left:50%;bottom:calc(var(--navh) + var(--safe-b) + 16px);transform:translateX(-50%);
  background:var(--t1);color:#fff;border-radius:20px;padding:10px 20px;font-size:13px;
  z-index:300;opacity:0;transition:opacity .2s;pointer-events:none;
}
.toast.show{opacity:1}

/* ---------------------------------------------------------------------------
   Docker 管理
   --------------------------------------------------------------------------- */
.docker-layout{
  display:flex;flex-direction:column;gap:16px;
}
.docker-status-card{
  border-left:3px solid var(--accent);
}
.docker-status-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--s2);
}
.docker-status-row:last-child{border-bottom:none}
.docker-status-label{
  color:var(--t2);font-size:13px;
}
.docker-status-value{
  font-weight:500;font-size:13px;
}
.docker-actions{
  display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;
}
.docker-agent-select{
  display:flex;gap:8px;align-items:center;
}
.tape-action-row{
  display:flex;gap:8px;margin-top:8px;
}
.docker-agent-select select{
  flex:1;padding:8px 12px;background:var(--s2);color:var(--t1);
  border:1px solid var(--bm);border-radius:var(--rsm);font-size:13px;outline:none;
}
.docker-agent-select select:focus{border-color:var(--accent)}
.docker-filter-row{
  display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;
}
.docker-table{
  margin-top:8px;
}
.docker-table th{
  text-align:left;padding:8px 12px;background:var(--s2);font-size:12px;color:var(--t2);
}
.docker-table td{
  padding:8px 12px;font-size:13px;
}
.tag-paused{
  background:#fff3e0;color:#e65100;
}

/* Confirm dialog */
.confirm-overlay{
  position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.confirm-card{
  background:var(--s1);border-radius:var(--r);width:min(320px,92vw);
  padding:24px 20px 18px;box-shadow:0 20px 60px rgba(0,0,0,.2);
}
.confirm-msg{font-size:15px;text-align:center;margin-bottom:20px;line-height:1.6}
.confirm-actions{display:flex;gap:10px}
.confirm-cancel{
  flex:1;background:var(--s2);color:var(--t1);border:1px solid var(--bm);
  border-radius:var(--rsm);padding:12px;font-size:15px;cursor:pointer;
}
.confirm-ok{
  flex:1;background:var(--red);color:#fff;border:none;border-radius:var(--rsm);
  padding:12px;font-size:15px;font-weight:500;cursor:pointer;
}
.confirm-ok-accent{background:var(--accent-g)!important}
.fork-model-select{
  display:block;width:100%;padding:7px 10px;font-size:13px;background:var(--s2);
  color:var(--t1);border:1px solid var(--bm);border-radius:var(--rxs);outline:none;
}
.fork-model-select:focus{border-color:var(--accent)}

/* ---------------------------------------------------------------------------
   8. Responsive — narrow screens: tables collapse to stacked cards
   --------------------------------------------------------------------------- */
@media (max-width:760px){
  /* Sidebar slides off-canvas; topbar hamburger toggles it */
  .pc-sidebar-toggle{display:flex}
  .pc-sidebar{
    position:fixed;top:0;left:0;height:100vh;
    transform:translateX(-100%);transition:transform .18s ease;
    box-shadow:0 0 40px rgba(0,0,0,.18);
  }
  .pc-sidebar.open{transform:translateX(0)}
  .pc-sidebar.collapsed{--side-w:236px}      /* ignore collapse on mobile */
  .pc-sidebar.collapsed .pc-brand{opacity:1}
  .pc-sidebar.collapsed .pc-menu-item{justify-content:flex-start;padding:9px 12px}
  .pc-sidebar.collapsed .pc-menu-label{display:block}
  .pc-sidebar-backdrop{
    position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.35);
    opacity:0;pointer-events:none;transition:opacity .18s;
  }
  .pc-sidebar-backdrop.show{opacity:1;pointer-events:auto}
}
@media (max-width:600px){
  .pc-content{padding:16px 12px}
  .frp-layout{flex-direction:column;height:auto}
  .frp-subnav{width:100%;flex-direction:row;overflow-x:auto;overflow-y:hidden}
  .frp-sections{overflow-y:visible}

  /* Tables become stacked cards (label via data-label on each td) */
  table.responsive,
  table.responsive thead,
  table.responsive tbody,
  table.responsive tr,
  table.responsive th,
  table.responsive td{display:block}
  table.responsive thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.responsive tr{
    background:var(--s1);border-radius:var(--rsm);margin-bottom:10px;padding:6px 10px;
    box-shadow:0 1px 3px rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.05);
  }
  table.responsive td{
    border-bottom:1px solid var(--s2);padding:8px 0;display:flex;
    justify-content:space-between;gap:12px;align-items:center;
  }
  table.responsive tr td:last-child{border-bottom:none}
  table.responsive td::before{
    content:attr(data-label);color:var(--t2);font-weight:500;flex:none;
  }
  /* 名称单元格在堆叠卡片里改为纵向：标签 → 标题 → 副标题 */
  table.responsive td.td-title{flex-direction:column;align-items:flex-start;gap:2px}
  .td-title .sess-title,.td-title .sess-first,.td-title .sess-sub{max-width:100%}
  .td-cwd{max-width:60vw}
}

/* ---------------------------------------------------------------------------
   远程操作实时控制台（黑窗口）+ 右下角悬浮球   →  CT.console / console.js
   --------------------------------------------------------------------------- */
.cons-overlay{
  position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.45);
}
.cons-overlay.on{display:flex}
.cons-card{
  width:880px;max-width:94vw;height:560px;max-height:86vh;display:flex;flex-direction:column;
  background:#0c0c0c;border:1px solid #2a2a2a;border-radius:10px;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.cons-head{
  display:flex;align-items:center;gap:8px;padding:9px 12px;background:#1a1a1a;
  border-bottom:1px solid #2a2a2a;color:#ddd;font-size:13px;user-select:none;
}
.cons-dot{width:10px;height:10px;border-radius:50%;background:#555;flex:none}
.cons-card[data-state="running"] .cons-dot{background:#f0ad4e;animation:cons-pulse 1s infinite}
.cons-card[data-state="done"] .cons-dot{background:#28a745}
.cons-card[data-state="error"] .cons-dot{background:#ff3b30}
@keyframes cons-pulse{0%,100%{opacity:1}50%{opacity:.3}}
.cons-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48%}
.cons-status{font-size:12px;color:#999}
.cons-spacer{flex:1}
.cons-btn{
  width:28px;height:24px;border:none;background:transparent;color:#bbb;cursor:pointer;
  border-radius:6px;font-size:14px;line-height:1;
}
.cons-btn:hover{background:#333;color:#fff}
.cons-body{flex:1;min-height:0;padding:6px 8px;background:#0c0c0c}
.cons-body .xterm{height:100%}
.cons-float{
  position:fixed;right:18px;bottom:18px;z-index:999;display:flex;align-items:center;gap:8px;
  padding:9px 14px;border:none;border-radius:22px;cursor:pointer;color:#fff;font-size:13px;
  background:#1a1a1a;box-shadow:0 6px 20px rgba(0,0,0,.3);
}
.cons-float:hover{filter:brightness(1.15)}
.cons-float[data-state="running"]{background:var(--accent-g)}
.cons-float[data-state="error"]{background:#b23030}
.cons-float-ic{font-size:14px;line-height:1}
.cons-float-tx{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============================================================================
   应用 tab：子导航 + 商店 + 表单 modal
   ============================================================================ */
.apps-agentbar{margin-bottom:12px}
.docker-agent-info{display:flex;align-items:center;gap:10px;padding:8px 0}
.docker-agent-name{font-weight:600;font-size:14px}
.docker-agent-status{color:var(--green);font-size:12px}
.docker-agent-status::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:4px}
.apps-layout{display:block}
.apps-subnav{display:flex;gap:8px;border-bottom:1px solid var(--bm);margin-bottom:14px}
.apps-subnav>div{padding:8px 14px;cursor:pointer;border-bottom:2px solid transparent;color:var(--t2)}
.apps-subnav>div.on{border-bottom-color:var(--accent);color:var(--accent);font-weight:600}
.apps-sections>div{display:none}
.store-toolbar{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.store-toolbar input{padding:8px 10px;border:1px solid var(--bm);border-radius:var(--rxs);background:var(--s1)}
.store-cats{display:flex;flex-wrap:wrap;gap:6px}
.store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.store-card{background:var(--s1);border:1px solid var(--b);border-radius:var(--rsm);padding:14px;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center}
.store-logo{width:48px;height:48px;object-fit:contain}
.store-name{font-weight:600}
.store-desc{font-size:12px;color:var(--t2);min-height:32px;overflow:hidden}
.app-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:60}
.app-modal.on{display:flex}
.app-modal-card{background:var(--s1);border-radius:var(--r);width:min(440px,92vw);max-height:86vh;display:flex;flex-direction:column}
.app-modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--bm);font-weight:600}
.app-modal-body{padding:16px;overflow:auto}
.app-modal-body select,.app-modal-body input{width:100%;padding:8px 10px;margin-bottom:10px;border:1px solid var(--bm);border-radius:var(--rxs);background:var(--s2)}
.asf-pass-row{display:flex;gap:8px;align-items:flex-start}
.asf-pass-row input{flex:1;font-family:"SF Mono","JetBrains Mono",Consolas,monospace}
.asf-pass-row button{flex:none;margin-bottom:10px}
.app-modal-foot{padding:12px 16px;border-top:1px solid var(--bm);display:flex;gap:10px;justify-content:flex-end}
.cfg-table{width:100%;border-collapse:collapse}
.cfg-table tr{border-bottom:1px solid var(--bm)}
.cfg-label{padding:9px 6px 9px 0;color:var(--t2);font-size:12px;white-space:nowrap;width:40%;vertical-align:middle}
.cfg-val{padding:9px 0;display:flex;align-items:center;gap:6px;flex-wrap:wrap;word-break:break-all}
.cfg-secret{font-family:"SF Mono","JetBrains Mono",Consolas,monospace;font-size:12px}
.cfg-eye,.cfg-copy{background:none;border:none;cursor:pointer;padding:2px 4px;opacity:.6;font-size:.85rem;flex-shrink:0}
.cfg-eye:hover,.cfg-copy:hover{opacity:1}
.cfg-val .cfg-input{
  flex:1;min-width:120px;margin:0;padding:6px 8px;
  font-family:"SF Mono","JetBrains Mono",Consolas,monospace;font-size:12px;
  border:1px solid var(--bm);border-radius:var(--rxs);background:var(--s2);
  color:var(--t1);outline:none;transition:border-color .15s;
}
.cfg-val .cfg-input:focus{border-color:var(--accent)}
.cfg-foot{display:flex;align-items:center;gap:10px;margin-top:14px}
.cfg-hint{color:var(--t2);font-size:12px}
@media(max-width:720px){
  .apps-subnav{overflow-x:auto;white-space:nowrap}
  .store-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
}

.proxy-sub-suffix { color: #888; font-size: 12px; }
.subdomain-status { font-size: 12px; margin-left: 6px; }
.subdomain-status.ok { color: #2e9e5b; }
.subdomain-status.bad { color: #d9534f; }

/* Claude Tape */
.tape-dyn-panel .hist-group, .hist-list .hist-group { margin-bottom: 12px; }
.tape-dyn-panel .hist-cwd, .hist-list .hist-cwd {
  font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--t3);
  padding: 0 4px; margin: 20px 0 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tape-dyn-panel .hist-cwd:first-child, .hist-list .hist-cwd:first-child { margin-top: 0; }
.tape-dyn-panel .hist-row, .hist-list .hist-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--b);
  transition: background .1s;
}
.tape-dyn-panel .hist-row:last-child, .hist-list .hist-row:last-child { border-bottom: none; }
.tape-dyn-panel .hist-row:hover, .hist-list .hist-row:hover { background: rgba(0,0,0,.025); }
.tape-dyn-panel .hist-dot, .hist-list .hist-dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--t3); opacity: .4;
}
.tape-dyn-panel .hist-dot.on, .hist-list .hist-dot.on { background: var(--green); opacity: 1; }
.tape-dyn-panel .hist-main, .hist-list .hist-main { flex: 1; min-width: 0; }
.tape-dyn-panel .hist-tag, .hist-list .hist-tag {
  font-weight: 600; font-size: 13px; color: var(--t1); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tape-dyn-panel .hist-first, .hist-list .hist-first {
  font-size: 12px; color: var(--t2); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tape-dyn-panel .hist-first:empty, .hist-list .hist-first:empty { display: none; }
.tape-dyn-panel .hist-meta, .hist-list .hist-meta {
  font-size: 11px; color: var(--t3); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tape-dyn-panel .hist-sep, .hist-list .hist-sep { margin: 0 6px; opacity: .5; }
.tape-dyn-panel .hist-acts, .hist-list .hist-acts { margin-left: auto; display: flex; gap: 6px; flex: none; }
.tape-dyn-panel .hist-acts .btn-sm, .hist-list .hist-acts .btn-sm { padding: 4px 10px; font-size: 11px; }
.tape-dyn-panel .model-row {
  display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap;
  background: var(--s2); border: 1px solid var(--b); border-radius: var(--rsm);
  padding: 8px 10px;
}
.tape-dyn-panel .model-row-local { opacity: .55; }
.tape-dyn-panel .model-row input {
  flex: 1; min-width: 120px;
  background: var(--s1); color: var(--t1);
  border: 1px solid var(--bm); border-radius: var(--rxs);
  padding: 6px 8px; font-size: 12px; outline: none;
  font-family: "SF Mono","JetBrains Mono",Consolas,monospace;
  transition: border-color .12s;
}
.tape-dyn-panel .model-row input:focus { border-color: var(--accent); }
.tape-dyn-panel .model-row input:disabled { opacity: .5; cursor: default; }
.tape-dyn-panel .model-row button[data-act="rm"] {
  flex: none; width: 28px; height: 28px;
  background: transparent; color: var(--t3); border: 1px solid var(--bm);
  border-radius: var(--rxs); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .1s, background .1s;
}
.tape-dyn-panel .model-row button[data-act="rm"]:hover {
  color: var(--red); background: rgba(255,59,48,.08);
}

/* Client Workspace Tab：左侧目录 rail + 右侧会话列表，会话行沿用上面的 .hist-* 样式 */
.ws-layout { display: flex; height: 100%; gap: 0; }
.ws-rail {
  width: 180px; flex-shrink: 0; overflow-y: auto;
  border-right: 1px solid var(--b); padding: 8px 0;
}
.ws-rail-item {
  padding: 8px 12px; cursor: pointer; border-left: 3px solid transparent;
  font-size: 13px; color: var(--t1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws-rail-item:hover { background: var(--s2); }
.ws-rail-item.on { border-left-color: var(--accent); background: var(--accent-bg); color: var(--accent-dk); }
.ws-rail-name { display: block; }
.ws-rail-hint { display: block; font-size: 11px; color: var(--t3); margin-top: 2px; }
.ws-main { flex: 1; min-width: 0; overflow-y: auto; padding: 10px; }

/* tape workspace: 左侧分组菜单 + 右侧 tab 区域 */
.tape-workspace {
  display: flex; gap: 0; flex: 1; min-height: 0;
  background: var(--s1); border-radius: var(--r); box-shadow: var(--card-shadow);
  overflow: hidden;
}
.tape-sidebar {
  flex: none; width: 140px;
  background: var(--s2); border-right: 1px solid var(--s3);
  padding: 8px 0; overflow-y: auto;
}
.tape-sidebar-item {
  padding: 8px 14px; font-size: 12px; font-weight: 600;
  color: var(--t2); cursor: pointer; white-space: nowrap;
  border-left: 3px solid transparent; transition: background .12s, color .12s;
}
.tape-sidebar-item:hover { background: rgba(0,0,0,.04); color: var(--t1); }
.tape-sidebar-item.on {
  background: var(--accent-bg); color: var(--accent);
  border-left-color: var(--accent);
}
.tape-sidebar-item .sidebar-badge {
  display: inline-block; min-width: 16px; padding: 1px 5px;
  font-size: 10px; font-weight: 700; text-align: center;
  border-radius: 8px; margin-left: 4px;
}
.tape-sidebar-item .sidebar-badge.connected { background: var(--green); color: #fff; }
.tape-sidebar-item .sidebar-badge.online { background: var(--s3); color: var(--t2); }
.tape-main {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
}
/* tape 内部 tab strip */
.tape-tabs-strip {
  display: flex; gap: 0; border-bottom: 1px solid var(--bm);
  overflow-x: auto; white-space: nowrap; margin-bottom: 0; align-items: stretch;
  flex: none;
}
/* removed .tape-agent-sep — sidebar handles grouping */
.tape-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; cursor: pointer; font-size: 13px;
  border-bottom: 2px solid transparent; color: var(--t2);
  user-select: none; flex-shrink: 0;
}
.tape-tab:hover { color: var(--t1); }
.tape-tab.on { border-bottom-color: var(--accent); color: var(--accent-dk); font-weight: 600; }
.tape-tab-close {
  font-size: 14px; line-height: 1; cursor: pointer; opacity: .5;
  margin-left: 2px; padding: 0 2px; border-radius: 3px;
}
.tape-tab-close:hover { opacity: 1; background: rgba(0,0,0,.08); }
.tape-tab-label { pointer-events: none; }

/* tape tab panels */
.tape-tabs-panels { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; min-height: 0; }
.tape-tab-panel { display: none; }
.tape-tab-panel.on { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* tape terminal */
.tape-term { width: 100%; flex: 1; min-height: 0; background: #1e1e1e; border-radius: var(--rsm); overflow: hidden; }
.tape-term .xterm { height: 100%; }

/* tape toolbar (agent selector) */
.tape-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* tape terminal table */
.tape-term-table { transition: all .2s; }
.tape-term-table.collapsed .tape-table-body { display: none; }
.tape-table-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.tape-table-header .panel-title { margin-bottom: 0; }
.tape-table-toggle { font-size: 12px; }

/* terminal status indicators */
.term-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.term-status-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.term-status-dot.connected { background: var(--green); box-shadow: 0 0 4px rgba(40,167,69,.4); }
.term-status-dot.disconnected { background: var(--t3); }
.term-status-dot.connecting {
  background: var(--accent); animation: term-pulse 1s infinite;
}
@keyframes term-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* terminal action buttons in table */
.term-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.term-actions .btn-sm { padding: 4px 10px; font-size: 11px; }

/* terminal row highlight */
.term-row-active { background: var(--accent-bg) !important; }
.term-row-active td { border-color: rgba(231,138,106,.15) !important; }

/* tape quick-action bar (removed, now per-row in table) */

/* disconnected session tag */
.tag-disconnected { background: var(--s2); color: var(--t3); }

/* tape file manager toolbar */
.fm-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.fm-bar select, .fm-bar input {
  padding: 6px 10px; border: 1px solid var(--bm); border-radius: var(--rxs);
  background: var(--s2); color: var(--t1); font-size: 12px; outline: none;
  transition: border-color .15s;
}
.fm-bar select:focus, .fm-bar input:focus { border-color: var(--accent); }
.fm-bar select { min-width: 60px; appearance: auto; }
.fm-path { flex: 1; min-width: 120px; }

/* tape table actions column */
.tape-table-actions { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.tape-table-actions .btn-sm { padding: 4px 10px; font-size: 11px; }
.tape-table-actions .btn-disconnect { background: var(--red); color: #fff; padding: 4px 10px; font-size: 11px; }
.tape-table-actions .btn-disconnect:hover { filter: brightness(.9); }
.tape-table-actions .action-sep { width: 1px; height: 18px; background: var(--s3); flex-shrink: 0; }

/* ── Home 页操作栏 ── */
.tape-home-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 10px 0 6px; }
.tape-home-actions .btn-sm { padding: 5px 12px; font-size: 12px; }
.tape-home-actions .btn-disconnect { background: var(--red); color: #fff; padding: 5px 12px; font-size: 12px; }
.tape-home-actions .btn-disconnect:hover { filter: brightness(.9); }
.tape-home-actions .action-sep { width: 1px; height: 20px; background: var(--s3); flex-shrink: 0; }
.tape-home-actions .tape-dropdown .btn-sm { padding: 5px 12px; font-size: 12px; }
.tape-home-status-text { font-size: 13px; color: var(--t2); margin-right: 2px; }

/* ── Home 终端连接卡片 ── */
.home-agent-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.06);
}
.home-agent-row:last-child { border-bottom: none; }
.home-agent-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  background: var(--t3);
}
.home-agent-dot.online { background: var(--accent); }
.home-agent-dot.connected { background: var(--green); }
.home-agent-dot.offline { background: var(--t3); }
.home-agent-info { flex: 1; min-width: 0; }
.home-agent-info strong { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-agent-os { font-size: 11px; color: var(--t2); }
.home-agent-detail { font-size: 11px; color: var(--t3); display: block; }
.home-agent-status { font-size: 12px; font-weight: 500; flex-shrink: 0; }
.home-agent-actions { display: flex; gap: 4px; flex-shrink: 0; }
.home-agent-actions .btn-disconnect { background: var(--red); color: #fff; }
.home-agent-actions .btn-disconnect:hover { filter: brightness(.9); }

/* ── Session 导航栏 ── */
.session-nav-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; background: var(--s1); border-bottom: 1px solid var(--bm);
  flex-shrink: 0;
}
.session-nav-home { font-size: 12px; padding: 3px 10px; }
.session-nav-label { font-size: 12px; color: var(--t2); }

/* ── 常用功能下拉菜单 ── */
.tape-dropdown { position: relative; display: inline-block; }
.tape-dropdown-menu {
  display: none; position: absolute; left: 0; top: 100%; z-index: 100;
  min-width: 200px; background: var(--s1); border-radius: var(--rsm);
  border: 1px solid var(--bm);
  box-shadow: 0 6px 24px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.07);
  padding: 4px; margin-top: 4px;
}
.tape-dropdown-menu.open { display: block; }
.tape-dropdown-item {
  display: block; width: 100%; padding: 6px 10px; font-size: 12px;
  text-align: left; background: transparent; border: none; cursor: pointer;
  color: var(--t1); white-space: nowrap; border-radius: var(--rxs);
  transition: background .1s;
}
.tape-dropdown-item:hover { background: var(--s2); }
.tape-dropdown-item.danger { color: var(--red); }
.tape-dropdown-item.danger:hover { background: rgba(255,59,48,.08); }
.tape-dropdown-sep { height: 1px; background: var(--b); margin: 3px 0; }

/* ── tape 文件预览面板 ── */
.tape-fm-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; margin: 0; }
.fm-body { flex: 1; min-height: 0; display: flex; }
.fm-list-wrap { flex: 1; min-width: 0; overflow: auto; }

/* 文件列表行：紧凑行距，表头吸顶 */
.fm-list-wrap table { font-size: 12px; }
.fm-list-wrap thead th {
  padding: 5px 8px; font-size: 11px;
  position: sticky; top: 0; z-index: 1; background: var(--s1);
}
.fm-list-wrap tbody td { padding: 3px 8px; font-size: 12px; }
.fm-list-wrap tbody tr:hover { background: var(--accent-bg); }
.fm-list-wrap th:nth-child(2), .fm-list-wrap th:nth-child(3),
.fm-list-wrap td:nth-child(2), .fm-list-wrap td:nth-child(3) {
  white-space: nowrap; width: 1%; color: var(--t2);
}
.fm-list-wrap th:last-child, .fm-list-wrap td:last-child {
  text-align: right; white-space: nowrap; width: 1%;
}
.fm-list-wrap td:last-child .btn-sm { padding: 2px 7px; font-size: 11px; margin-left: 2px; }
.fm-link { cursor: pointer; color: var(--t1); word-break: break-all; }
.fm-link:hover { color: var(--accent-dk); text-decoration: underline; }
.fm-splitter {
  flex: none; width: 16px; cursor: col-resize; background: transparent;
  position: relative; touch-action: none;
}
.fm-splitter::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  transform: translateX(-50%); width: 1px; background: var(--b);
  transition: background .13s;
}
.fm-splitter::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 18px; height: 30px; border-radius: 5px;
  background: var(--accent-bg); border: 1.5px solid var(--accent);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
  transition: border-color .13s, background .13s;
}
.fm-splitter:hover::before, .fm-splitter.dragging::before { background: var(--accent); }
.fm-splitter:hover::after, .fm-splitter.dragging::after { background: rgba(231,138,106,.22); }
.fm-preview {
  width: 42%; min-width: 200px; max-width: 620px; overflow: auto;
  background: var(--s1);
  display: flex; flex-direction: column;
}
.fm-preview-empty { margin: auto; color: var(--t3); font-size: 13px; padding: 24px; text-align: center; }
.fm-pv-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--b); background: var(--s2);
}
.fm-pv-name {
  font-size: 12px; font-weight: 600; color: var(--t1);
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fm-save-msg { font-size: 12px; color: var(--green); }
.fm-editor {
  flex: 1; width: 100%; resize: none; border: none; outline: none;
  padding: 12px 14px; font-size: 13px; line-height: 1.5; color: var(--t1);
  background: var(--s1);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.fm-frame { flex: 1; width: 100%; border: none; background: #fff; }
.fm-pv-img { padding: 14px; text-align: center; overflow: auto; }
.fm-pv-img img { max-width: 100%; height: auto; border-radius: var(--rxs); box-shadow: var(--card-shadow); }
.fm-pv-dl { text-align: center; padding: 12px; }

/* 工作台 · 网络行为审计（聊天记录 + 文件传输预览） */
.wb-chat-type-tabs{display:flex;gap:6px;margin:10px 0}
.wb-chat-type-tabs>div{
  padding:4px 12px;border-radius:999px;font-size:12px;cursor:pointer;
  background:var(--s2);color:var(--t2);
}
.wb-chat-type-tabs>div.on{background:var(--accent-bg);color:var(--accent);font-weight:600}

.wb-view-toggle{display:flex;gap:6px;margin-left:auto}
.wb-view-toggle>div{
  padding:4px 12px;border-radius:999px;font-size:12px;cursor:pointer;
  background:var(--s2);color:var(--t2);
}
.wb-view-toggle>div.on{background:var(--accent-bg);color:var(--accent);font-weight:600}

.wb-imfiles-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:12px;
}
.wb-imfiles-grid-item{cursor:pointer;border-radius:var(--rxs);overflow:hidden;background:var(--s1)}
.wb-imfiles-grid-item img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.wb-imfiles-grid-name{
  font-size:11px;color:var(--t2);padding:5px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.wb-attach-nav{display:flex;justify-content:space-between;gap:12px;padding:8px 14px;border-top:1px solid var(--b)}

/* 工作台：计划任务卡 + 运行明细 */
#wb-sched-card{border:1px solid var(--b);border-radius:10px;padding:12px 14px;margin-bottom:14px}
.wb-sched-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}
.wb-sched-badge{font-size:11px;padding:2px 8px;border-radius:10px;background:rgba(0,0,0,.06);color:var(--t2)}
.wb-sched-badge.on{background:rgba(40,167,69,.12);color:#28a745}
.wb-sched-next{color:var(--t2);font-size:12px}
.wb-sched-types{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.wb-sched-type{font-size:11px;padding:2px 8px;border-radius:8px;background:rgba(196,90,58,.08);color:var(--accent)}
.wb-run-err{color:#ff3b30;white-space:pre-wrap;overflow-wrap:anywhere}
.wb-action-group{display:inline-flex;gap:6px;flex-wrap:wrap}
.wb-pager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px}
.wb-pager-info{font-size:12px;color:var(--t2)}
.wb-pager button[disabled]{opacity:.4;cursor:not-allowed}

/* 工作台：员工筛选左栏 + 两栏布局 */
.wb-emp-list{width:160px;flex-shrink:0;border-right:1px solid var(--b);overflow-y:auto;max-height:520px}
.wb-emp-item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;border-radius:8px;font-size:13px}
.wb-emp-item:hover{background:rgba(0,0,0,.04)}
.wb-emp-item.on{background:rgba(196,90,58,.1);color:var(--accent);font-weight:600}
.wb-emp-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-emp-count{font-size:11px;color:var(--t2);flex-shrink:0}
.wb-emp-item.on .wb-emp-count{color:var(--accent)}
.wb-two-pane{display:flex;gap:14px;align-items:flex-start}
.wb-two-pane-main{flex:1;min-width:0}

.wb-chat-layout{display:flex;gap:14px;min-height:360px}
.wb-chat-contacts{width:220px;flex-shrink:0;border-right:1px solid var(--b);overflow-y:auto;max-height:520px}
.wb-chat-contact{padding:8px 10px;cursor:pointer;border-radius:var(--rxs);display:flex;flex-direction:column;gap:2px}
.wb-chat-contact:hover{background:var(--s2)}
.wb-chat-contact.on{background:var(--accent-bg)}
.wb-chat-contact-name{font-size:13px;font-weight:600;color:var(--t1);display:flex;align-items:center;gap:6px}
.wb-chat-contact-badge{font-size:10px;font-weight:500;padding:1px 6px;border-radius:999px;background:var(--s3);color:var(--t2)}
.wb-chat-contact-meta{font-size:11px;color:var(--t3)}
.wb-chat-timeline{flex:1;overflow-y:auto;max-height:520px;display:flex;flex-direction:column;gap:10px}
.wb-msg{background:var(--s1);border-radius:var(--rxs);padding:8px 10px}
.wb-msg-meta{font-size:11px;color:var(--t3);margin-bottom:3px}
.wb-msg-content{font-size:13px;color:var(--t1);white-space:pre-wrap;word-break:break-word}
.wb-msg-quote{font-size:12px;color:var(--t3);background:var(--s2);border-left:2px solid var(--s3);border-radius:4px;padding:4px 8px;margin-bottom:4px;white-space:pre-wrap;word-break:break-word}
.wb-msg-sticker img{max-width:120px;max-height:120px;border-radius:8px;display:block}
.wb-msg-attach-thumb{max-width:160px;max-height:160px;border-radius:8px;display:block;cursor:pointer;object-fit:cover}
.wb-msg-file{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.wb-msg-file-name{color:var(--t1);word-break:break-all}
.wb-msg-file-size{font-size:11px;color:var(--t3)}
.wb-chat-contacts-full{width:100%;max-height:none;border-right:none}
.wb-chat-contact-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wb-chat-contact-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.wb-chat-view-btn{flex-shrink:0}

.wb-chat-overlay{display:none;position:fixed;inset:0;z-index:220;background:var(--bg);flex-direction:column}
.wb-chat-overlay.open{display:flex}
.wb-chat-overlay-hdr{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--b);font-size:13px;color:var(--t1)}
.wb-chat-overlay-hdr #wb-chat-overlay-title{font-weight:600;color:var(--t1)}
.wb-chat-overlay .wb-chat-timeline{flex:1;max-height:none;overflow-y:auto;padding:10px 14px}

.wb-attach-overlay{display:none;position:fixed;inset:0;z-index:210;background:rgba(0,0,0,.72);align-items:center;justify-content:center}
.wb-attach-overlay.open{display:flex}
.wb-attach-box{max-width:min(90vw,900px);max-height:88vh;display:flex;flex-direction:column;background:var(--bg);border-radius:var(--r);overflow:hidden}
.wb-attach-hdr{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--b);font-size:13px;color:var(--t1)}
#wb-attach-body{display:flex;align-items:center;justify-content:center}
#wb-attach-body img,#wb-attach-body video{max-width:100%;max-height:78vh;object-fit:contain;display:block}
#wb-attach-body iframe{width:min(85vw,860px);height:78vh;border:none;display:block}
#wb-attach-body audio{width:min(85vw,500px)}
#wb-attach-body pre{width:min(85vw,860px);max-height:78vh;overflow:auto;white-space:pre-wrap;word-break:break-word;margin:0;padding:14px;font-size:12px;color:var(--t1);background:var(--s1);text-align:left}

.wb-ingest-overlay{display:none;position:fixed;inset:0;z-index:210;background:rgba(0,0,0,.72);align-items:center;justify-content:center}
.wb-ingest-overlay.open{display:flex}
.wb-ingest-box{width:min(92vw,420px);max-height:88vh;display:flex;flex-direction:column;background:var(--bg);border-radius:var(--r);overflow:hidden}
.wb-ingest-body{padding:14px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}
.wb-ingest-chips{display:flex;flex-wrap:wrap;gap:6px;min-height:26px}
.wb-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 4px 3px 10px;border-radius:999px;background:var(--accent-bg);color:var(--accent);font-size:12px}
.wb-chip button{border:none;background:none;color:inherit;cursor:pointer;font-size:14px;line-height:1;padding:2px 4px}
.wb-chip button:hover{opacity:.65}
.wb-ingest-progress{font-size:12px;color:var(--t2);white-space:pre-wrap;min-height:16px}
.wb-ingest-footer{padding:10px 14px;border-top:1px solid var(--b);display:flex;justify-content:flex-end}

/* ---------------------------------------------------------------------------
   9. Mobile overrides
   --------------------------------------------------------------------------- */
@media (max-width:760px){
  html,body{
    font-size:15px;
    -webkit-text-size-adjust:100%;
  }
  body::after{display:none}
  ::-webkit-scrollbar{width:0;height:0}
  :root{
    --card-shadow:0 1px 4px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.05);
  }
  .wb-emp-list{display:none}
  .wb-two-pane{flex-direction:column}
}