* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg: #0F172A; --bg-raised: #1E293B; --bg-hover: #475569;
  --border: #475569; --border-hover: #64748B;
  --text: #F8FAFC; --text-sec: #CBD5E1; --text-dim: #64748B;
  --accent: #06B6D4; --accent-dim: #0891B2; --accent-bg: rgba(6,182,212,0.1);
  --green: #22C55E; --green-bg: rgba(34,197,94,0.1);
  --red: #EF4444; --red-bg: rgba(239,68,68,0.1);
  --blue: #3B82F6; --blue-bg: rgba(59,130,246,0.08);
  --radius: 8px; --radius-sm: 6px;
  --shadow: 0 1px 3px rgba(0,0,0,0.5);
  --transition: 0.15s ease;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Noto Sans SC', sans-serif;
  background: var(--bg); color: var(--text); height: 100vh; overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* === Spinner === */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.spinner { width: 24px; height: 24px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.6s linear infinite; margin: 0 auto 12px; }
.loading { text-align: center; padding: 64px 24px; color: var(--text-dim); }
.loading-text { font-size: 13px; }
.fade-in { animation: fadeIn 0.25s ease; }

/* === Login === */
.login-view { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: radial-gradient(ellipse at 50% 0%, rgba(88,166,255,0.04) 0%, transparent 60%); }
.login-box { width: 380px; padding: 56px 36px; }
.login-box h1 { font-size: 36px; font-weight: 800; letter-spacing: -1px; margin-bottom: 2px; background: linear-gradient(135deg, #F8FAFC 0%, #06B6D4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.login-subtitle { color: var(--text-dim); font-size: 14px; margin-bottom: 36px; }
.login-msg { background: var(--red-bg); color: #DC2626; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 16px; border: 1px solid rgba(239,68,68,0.2); }
.login-input { display: block; width: 100%; padding: 12px 16px; margin-bottom: 12px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 14px; outline: none; transition: border var(--transition), box-shadow var(--transition); }
.login-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.login-input::placeholder { color: var(--text-dim); }
.btn-primary { display: block; width: 100%; padding: 12px; background: var(--accent); color: #0d1117; border: none; border-radius: var(--radius); font-size: 14px; font-weight: 600; cursor: pointer; transition: all var(--transition); }
.btn-primary:hover { background: var(--accent-dim); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.login-divider { display: flex; align-items: center; margin: 24px 0; color: var(--text-dim); font-size: 12px; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; border-top: 1px solid var(--border); }
.login-divider span { padding: 0 16px; }
.btn-oauth { display: block; width: 100%; padding: 12px; background: transparent; color: var(--text-sec); border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; cursor: pointer; transition: all var(--transition); }
.btn-oauth:hover { border-color: var(--border-hover); background: var(--bg-raised); color: var(--text); }

/* === Layout === */
.main-view { display: flex; height: 100vh; overflow: hidden; }
.sidebar { width: 56px; background: var(--bg-raised); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 10; transition: width 0.2s ease; overflow: hidden; } .sidebar:hover { width: 200px; box-shadow: 4px 0 20px rgba(0,0,0,0.4); }
.sidebar-header { padding: 18px 0 14px; text-align: center; }
.sidebar-header h2 { font-size: 20px; font-weight: 800; color: var(--accent); letter-spacing: -0.5px; white-space: nowrap; overflow: hidden; padding: 0 16px; } .logo-f { opacity: 0; transition: opacity 0.15s; } .sidebar:hover .logo-f { opacity: 1; }
.sidebar-header .env-tag { display: inline-block; font-size: 10px; font-weight: 600; color: var(--accent); background: var(--accent-bg); padding: 2px 8px; border-radius: 4px; margin-left: 4px; vertical-align: middle; text-transform: uppercase; letter-spacing: 0.5px; }
.nav-list { list-style: none; flex: 1; padding: 0 6px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; color: var(--text-sec); transition: all var(--transition); margin-bottom: 2px; justify-content: center; } .sidebar:hover .nav-item { justify-content: flex-start; }
.nav-item:hover { background: var(--bg-hover); color: var(--text-sec); }
.nav-item.active { background: var(--accent-bg); color: var(--accent); font-weight: 500; }
.nav-icon { font-size: 16px; width: 24px; text-align: center; flex-shrink: 0; } .nav-label { opacity: 0; width: 0; overflow: hidden; transition: opacity 0.15s; white-space: nowrap; } .sidebar:hover .nav-label { opacity: 1; width: auto; }
.sidebar-footer { padding: 10px 16px; border-top: 1px solid var(--border); overflow: hidden; white-space: nowrap; } .sidebar-footer .user-info, .sidebar-footer .btn-logout { opacity: 0; height: 0; transition: opacity 0.15s, height 0.15s; } .sidebar:hover .sidebar-footer .user-info { opacity: 1; height: auto; } .sidebar:hover .sidebar-footer .btn-logout { opacity: 1; height: auto; }
.user-info { font-size: 13px; color: var(--text-sec); margin-bottom: 6px; font-weight: 500; }
.user-scope { font-size: 11px; color: var(--text-dim); margin-bottom: 8px; }
.btn-logout { background: none; border: none; color: var(--text-dim); font-size: 12px; cursor: pointer; padding: 0; transition: color var(--transition); }
.btn-logout:hover { color: var(--red); }

/* === Content === */
.content { flex: 1; margin-left: 56px; padding: 28px 32px; height: 100vh; overflow-y: auto; box-sizing: border-box; }
.page-header { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.page-header h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; }
.badge { background: var(--bg-raised); border: 1px solid var(--border); padding: 3px 12px; border-radius: 20px; font-size: 12px; color: var(--text-dim); font-weight: 500; }

/* === Search === */
.search-bar { margin-bottom: 20px; }
.search-input { width: 100%; max-width: 420px; padding: 10px 16px 10px 40px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 14px; outline: none; transition: border var(--transition), box-shadow var(--transition); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2371717a' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 10-1.397 1.398h-.001l3.85 3.85a1 1 0 001.415-1.414l-3.85-3.85zm-5.44 1.36a5.2 5.2 0 110-10.4 5.2 5.2 0 010 10.4z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 14px center; }
.search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.search-input::placeholder { color: var(--text-dim); }

/* === Cards === */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; cursor: pointer; transition: all var(--transition); }
.card:hover { border-color: var(--border-hover); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
.card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.card-top strong { font-size: 15px; font-weight: 600; }
.card-desc { font-size: 13px; color: var(--text-dim); margin-bottom: 12px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.card-tag { font-size: 11px; padding: 2px 8px; border-radius: 4px; background: var(--accent-bg); color: var(--accent); font-family: 'SF Mono', Menlo, 'Courier New', monospace; }
.card-footer { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-dim); padding-top: 10px; border-top: 1px solid var(--border); }

/* === Status === */
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot.on { background: var(--green); box-shadow: 0 0 6px rgba(34,197,94,0.4); }
.status-dot.off { background: var(--text-dim); }

/* === Detail === */
.btn-back { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; color: var(--text-dim); font-size: 13px; cursor: pointer; padding: 6px 0; transition: color var(--transition); }
.btn-back:hover { color: var(--text); }
.detail-section { margin-bottom: 28px; }
.detail-section h3 { font-size: 14px; font-weight: 600; margin-bottom: 14px; color: var(--text-sec); text-transform: uppercase; letter-spacing: 0.5px; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.detail-item { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; }
.detail-item label { display: block; font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; font-weight: 500; }
.detail-item span { font-size: 14px; word-break: break-all; }
.mono { font-family: 'SF Mono', Menlo, 'Courier New', monospace; font-size: 12px !important; }

/* === Skills === */
.skill-list { display: flex; flex-wrap: wrap; gap: 6px; }
.skill-tag { padding: 4px 10px; border-radius: 4px; font-size: 12px; font-family: 'SF Mono', Menlo, 'Courier New', monospace; transition: all var(--transition); }
.skill-tag.enabled { background: var(--accent-bg); color: var(--accent); }
.skill-tag.disabled { background: var(--bg-hover); color: var(--text-dim); text-decoration: line-through; opacity: 0.6; }

/* === Prompt === */
.prompt-box { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.prompt-text { margin: 0; padding: 16px; font-size: 13px; line-height: 1.7; color: var(--text-sec); white-space: pre-wrap; word-break: break-word; font-family: 'SF Mono', Menlo, 'Courier New', monospace; }
.btn-toggle { display: block; width: 100%; padding: 8px; background: var(--bg-hover); border: none; border-top: 1px solid var(--border); color: var(--accent); font-size: 12px; cursor: pointer; transition: background var(--transition); font-weight: 500; }
.btn-toggle:hover { background: var(--accent-bg); }
.skill-tag.clickable { cursor: pointer; transition: all var(--transition); }
.skill-tag.clickable:hover { background: var(--accent); color: var(--bg); transform: translateY(-1px); }
.skill-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 1000; display: flex; align-items: stretch; justify-content: center; animation: fadeIn 0.15s ease; }
.skill-overlay-panel { width: 100%; max-width: 800px; background: var(--bg); display: flex; flex-direction: column; margin: 24px; border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; }
.skill-overlay-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.skill-overlay-header span { font-size: 15px; font-weight: 600; color: var(--accent); font-family: 'SF Mono', Menlo, monospace; }
.skill-overlay-close { background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-sec); padding: 6px 14px; font-size: 12px; cursor: pointer; transition: all var(--transition); }
.skill-overlay-close:hover { border-color: var(--accent); color: var(--accent); }
.skill-overlay-body { flex: 1; overflow-y: auto; padding: 20px; margin: 0; font-size: 13px; line-height: 1.7; color: var(--text-sec); white-space: pre-wrap; word-break: break-word; font-family: 'SF Mono', Menlo, 'Courier New', monospace; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 768px) { .skill-overlay-panel { margin: 0; max-width: 100%; border-radius: 0; border: none; } }

/* === Sessions === */
.session-list { display: flex; flex-direction: column; gap: 6px; }
.session-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition); }
.session-item:hover { border-color: var(--border-hover); background: var(--bg-hover); }
.session-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.session-name { font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session-bot { color: var(--text-dim); font-size: 12px; background: var(--bg-hover); padding: 2px 8px; border-radius: 4px; white-space: nowrap; }
.session-meta { display: flex; gap: 16px; font-size: 12px; color: var(--text-dim); align-items: center; flex-shrink: 0; }
.session-source { background: var(--blue-bg); color: var(--blue); padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; }

/* === Messages === */
.msg-list { display: flex; flex-direction: column; gap: 6px; max-height: 70vh; overflow-y: auto; padding: 4px; }
.msg-list::-webkit-scrollbar { width: 6px; }
.msg-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.msg { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13px; border-left: 3px solid transparent; }
.msg-event { background: var(--bg-raised); border-left-color: var(--accent); }
.msg-assistant { background: var(--green-bg); border-left-color: var(--green); }
.msg-tool { background: var(--bg-raised); border-left-color: var(--text-dim); cursor: pointer; }
.msg-tool .msg-content { max-height: 60px; overflow: hidden; transition: max-height 0.3s ease; }
.msg-tool.expanded .msg-content { max-height: none; }
.msg-sender { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 12px; margin-bottom: 6px; color: var(--text-dim); }
.msg-content { white-space: pre-wrap; word-break: break-word; line-height: 1.6; color: var(--text-sec); }
.msg-time { font-size: 11px; color: var(--text-dim); }
.msg-expand-hint { font-size: 11px; color: var(--accent); margin-top: 4px; }

/* === Budget === */
.budget-bar { height: 8px; background: var(--bg); border-radius: 4px; margin: 12px 0; overflow: hidden; }
.budget-bar div { height: 100%; border-radius: 4px; transition: width 0.5s ease; }
.budget-amount { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; margin: 4px 0; }

/* === Endpoint === */
.endpoint-card { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; font-family: 'SF Mono', Menlo, 'Courier New', monospace; margin-bottom: 6px; }

/* === Empty / Error === */
.error { text-align: center; padding: 64px 24px; color: var(--red); }
.empty { text-align: center; padding: 64px 24px; color: var(--text-dim); font-size: 14px; }
.placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 400px; color: var(--text-dim); font-size: 16px; gap: 8px; }
.placeholder-icon { font-size: 48px; opacity: 0.3; }

/* === Toast === */
.toast { position: fixed; bottom: 24px; right: 24px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 20px; font-size: 13px; color: var(--text-sec); box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 100; animation: fadeIn 0.2s ease; }
.toast.error { border-color: rgba(239,68,68,0.3); color: #DC2626; }
.toast.success { border-color: rgba(34,197,94,0.3); color: #16A34A; }

/* Filter Chips */
.filter-chips { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.chip { padding: 6px 14px; border-radius: 20px; font-size: 12px; background: var(--bg-raised); border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; transition: all var(--transition); white-space: nowrap; }
.chip:hover { border-color: var(--border-hover); color: var(--text-sec); }
.chip.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); font-weight: 500; }

/* Session Groups */
.session-group { margin-bottom: 20px; }
.group-label { font-size: 12px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.group-count { opacity: 0.6; }
.si-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.si-info { flex: 1; min-width: 0; }
.si-header { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.si-name { font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-bot { font-size: 11px; color: var(--text-dim); background: var(--bg-hover); padding: 1px 8px; border-radius: 4px; white-space: nowrap; }
.si-sub { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'SF Mono', Menlo, 'Courier New', monospace; }
.si-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.si-source { font-size: 11px; color: var(--blue); background: var(--blue-bg); padding: 2px 8px; border-radius: 4px; font-weight: 500; }
.si-time { font-size: 12px; color: var(--text-dim); white-space: nowrap; }

/* Session Info Bar */
.session-info-bar { display: flex; gap: 0; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 20px; overflow-x: auto; }
.sib-item { flex: 1; padding: 14px 18px; border-right: 1px solid var(--border); min-width: 120px; }
.sib-item:last-child { border-right: none; }
.sib-label { display: block; font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.sib-value { font-size: 14px; font-weight: 500; word-break: break-all; }

/* Compact Summary */
.compact-summary { background: var(--accent-bg); border: 1px solid rgba(88,166,255,0.15); border-radius: var(--radius-sm); padding: 14px 18px; margin-bottom: 20px; }
.cs-label { font-size: 11px; color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.cs-content { font-size: 13px; color: var(--text-sec); line-height: 1.6; white-space: pre-wrap; }

/* Thread */
.thread-header { font-size: 14px; font-weight: 600; color: var(--text-sec); margin-bottom: 12px; }
.thread-header span { color: var(--text-dim); font-weight: 400; }
.thread { max-height: 70vh; overflow-y: auto; padding-right: 8px; }
.thread::-webkit-scrollbar { width: 6px; }
.thread::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.t-msg { display: flex; gap: 12px; margin-bottom: 12px; }
.t-avatar { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.t-av-user { background: var(--blue-bg); color: var(--blue); }
.t-av-bot { background: var(--green-bg); color: var(--green); }
.t-body { flex: 1; min-width: 0; }
.t-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.t-sender { font-size: 13px; font-weight: 600; color: var(--text-sec); }
.t-time { font-size: 11px; color: var(--text-dim); }
.t-content { font-size: 13px; line-height: 1.6; color: var(--text-sec); white-space: pre-wrap; word-break: break-word; }
.t-tools { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.t-tool-badge { font-size: 11px; padding: 2px 8px; border-radius: 4px; background: var(--bg-hover); color: var(--text-dim); font-family: 'SF Mono', Menlo, 'Courier New', monospace; }
.t-tool { padding-left: 44px; }
.t-tool-result { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; }
.t-tool-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; font-size: 11px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.t-tool-toggle { color: var(--accent); cursor: pointer; text-transform: none; letter-spacing: 0; }
.t-tool-body { padding: 0 14px 10px; font-size: 12px; color: var(--text-dim); line-height: 1.5; font-family: 'SF Mono', Menlo, 'Courier New', monospace; white-space: pre-wrap; word-break: break-all; max-height: 400px; overflow-y: auto; }

/* Pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 24px; padding: 16px 0; }
.page-btn { padding: 6px 14px; border-radius: var(--radius-sm); font-size: 13px; background: var(--bg-raised); border: 1px solid var(--border); color: var(--text-sec); cursor: pointer; transition: all var(--transition); }
.page-btn:hover:not(.disabled):not(.active) { border-color: var(--border-hover); background: var(--bg-hover); color: var(--text); }
.page-btn.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.page-btn.disabled { opacity: 0.3; cursor: not-allowed; }
.page-ellipsis { color: var(--text-dim); font-size: 13px; padding: 0 4px; }
.pagination-info { font-size: 12px; color: var(--text-dim); margin-bottom: 12px; }

/* === Session Split Layout === */
.session-split { display: flex; height: calc(100% + 56px); overflow: hidden; margin: -28px -32px; }
.session-list-panel { width: 320px; min-width: 320px; border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
.session-detail-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }

/* Left panel header */
.slp-header { padding: 20px 16px 8px; flex-shrink: 0; }
.slp-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.slp-chips .chip { padding: 4px 10px; font-size: 11px; }
.slp-search { width: 100%; padding: 8px 12px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 13px; outline: none; transition: border var(--transition); }
.slp-search:focus { border-color: var(--accent); }
.slp-search::placeholder { color: var(--text-dim); }

/* Left panel list */
.slp-list { flex: 1; overflow-y: auto; padding: 4px 8px; min-height: 0; }
.slp-list::-webkit-scrollbar { width: 5px; }
.slp-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.slp-item { padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition); border: 1px solid transparent; margin-bottom: 2px; }
.slp-item:hover { background: var(--bg-raised); border-color: var(--border); }
.slp-item.active { background: var(--accent-bg); border-color: rgba(88,166,255,0.2); }
.slp-item-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.slp-item-name { flex: 1; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slp-item-time { font-size: 11px; color: var(--text-dim); white-space: nowrap; flex-shrink: 0; }
.slp-item-bottom { display: flex; align-items: center; gap: 6px; padding-left: 16px; }
.slp-item-bot { font-size: 10px; color: var(--text-dim); background: var(--bg-hover); padding: 1px 6px; border-radius: 3px; white-space: nowrap; }
.slp-item-source { font-size: 10px; color: var(--blue); background: var(--blue-bg); padding: 1px 6px; border-radius: 3px; white-space: nowrap; }
.slp-item-key { font-size: 10px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'SF Mono', Menlo, monospace; }

/* Left panel pagination */
#slpPagination { flex-shrink: 0; margin-top: auto; }
.slp-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px; border-top: 1px solid var(--border); flex-shrink: 0; }
.slp-page-btn { padding: 4px 12px; border-radius: var(--radius-sm); font-size: 12px; background: var(--bg-raised); border: 1px solid var(--border); color: var(--text-sec); cursor: pointer; transition: all var(--transition); }
.slp-page-btn:hover:not(.disabled) { background: var(--bg-hover); color: var(--text); }
.slp-page-btn.disabled { opacity: 0.3; cursor: not-allowed; }

/* Right panel: status bar */
.sdp-status-bar { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; overflow-x: auto; background: var(--bg-raised); }
.sdp-stat { padding: 12px 16px; border-right: 1px solid var(--border); min-width: 0; }
.sdp-stat:last-child { border-right: none; }
.sdp-stat-label { display: block; font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
.sdp-stat-value { font-size: 13px; font-weight: 500; word-break: break-all; }

/* Right panel: compact summary */
.sdp-compact { margin: 12px 16px; background: var(--accent-bg); border: 1px solid rgba(88,166,255,0.15); border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; }
.sdp-compact-label { padding: 10px 14px; font-size: 11px; color: var(--accent); font-weight: 600; }
.sdp-compact-content { margin: 0; padding: 0 14px 12px; font-size: 12px; line-height: 1.6; white-space: pre-wrap; color: var(--text-sec); max-height: 200px; overflow-y: auto; font-family: inherit; }

/* Right panel: messages */
.sdp-messages { flex: 1; overflow-y: auto; padding: 16px 20px; }
.sdp-messages::-webkit-scrollbar { width: 6px; }
.sdp-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* Pill (centered label for events) */
.sdp-pill { display: flex; align-items: center; gap: 6px; padding: 6px 14px; background: rgba(136,198,255,0.03); border: 1px solid rgba(136,198,255,0.08); border-radius: 16px; width: fit-content; }

/* Empty state */
.session-empty-state { display: flex; align-items: center; justify-content: center; height: 100%; }

/* === Mobile Responsive === */

/* Session detail header */
.sdp-header-bar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap; }
.sdp-h-item { font-size: 12px; color: var(--text-primary); white-space: nowrap; }
.sdp-h-dim { color: var(--text-dim); }
.sdp-h-sep { color: var(--border); font-size: 10px; }
.sdp-h-link { margin-left: auto; font-size: 11px; color: var(--accent); text-decoration: none; padding: 2px 8px; background: rgba(6,182,212,0.08); border-radius: 4px; white-space: nowrap; }
.sdp-h-link:hover { background: rgba(6,182,212,0.18); }
.sdp-gk-bar { padding: 4px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sdp-sub-bar { display: flex; align-items: center; gap: 6px; padding: 6px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap; }
.sdp-sub-tag { font-size: 11px; color: var(--accent); text-decoration: none; padding: 2px 8px; background: var(--accent-bg); border-radius: 4px; }

@media (max-width: 768px) {
  .sidebar { display: none; }
  .content { margin-left: 0; padding: 12px; }
  .page-header h1 { font-size: 20px; }
  .card-grid { grid-template-columns: 1fr; }
  .login-box { width: 100%; padding: 40px 20px; }
  .session-split { position: fixed; top: 0; left: 0; right: 0; bottom: 48px; margin: 0; flex-direction: column; height: auto; overflow: hidden; }
  .session-list-panel { width: 100% !important; min-width: 0 !important; border-right: none; flex: 1; overflow-y: auto; }
  .session-detail-panel { width: 100% !important; position: fixed; top: 0; left: 0; right: 0; bottom: 48px; display: flex; flex-direction: column; }
  .session-split.mobile-detail .session-list-panel { display: none; }
  .session-split:not(.mobile-detail) .session-detail-panel { display: none; }
  .slp-header { padding: 12px 12px 4px; }
  .sdp-status-bar { flex-wrap: wrap; }
  .sdp-stat { min-width: 50%; }
  .sdp-messages { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .detail-grid { grid-template-columns: 1fr; }
  .mobile-back-btn { display: flex !important; align-items: center; gap: 4px; padding: 10px 12px; font-size: 13px; color: var(--accent); background: none; border: none; border-bottom: 1px solid var(--border); cursor: pointer; width: 100%; }

  .mobile-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg-raised); border-top: 1px solid var(--border); z-index: 20; padding-bottom: env(safe-area-inset-bottom, 0); }
  .mobile-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; font-size: 10px; color: var(--text-dim); cursor: pointer; border: none; background: none; }
  .mobile-nav-item.active { color: var(--accent); }
  .mobile-nav-icon { font-size: 18px; }
  .content { padding-bottom: 80px; }

  .sdp-gk-bar { display: none; }
  .sdp-header-bar { padding: 6px 12px; }

}
@media (min-width: 769px) {
  .mobile-back-btn { display: none !important; }
  .mobile-nav { display: none !important; }
}

/* === Edit UI === */
.section-header-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.section-header-row h3 { margin-bottom: 0; }
.btn-edit { background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-dim); padding: 4px 12px; font-size: 12px; cursor: pointer; transition: all var(--transition); white-space: nowrap; }
.btn-edit:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.prompt-edit-wrap { display: flex; flex-direction: column; gap: 10px; }
.prompt-edit-area { width: 100%; min-height: 200px; max-height: 500px; padding: 14px 16px; background: var(--bg-raised); border: 1px solid var(--accent); border-radius: var(--radius-sm); color: var(--text-sec); font-size: 13px; line-height: 1.7; font-family: 'SF Mono', Menlo, 'Courier New', monospace; resize: vertical; outline: none; box-shadow: 0 0 0 3px var(--accent-bg); }
.prompt-edit-actions { display: flex; justify-content: flex-end; gap: 8px; }
.btn-cancel { padding: 8px 20px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-sec); font-size: 13px; cursor: pointer; transition: all var(--transition); }
.btn-cancel:hover { border-color: var(--border-hover); color: var(--text); }
.btn-save { padding: 8px 20px; background: var(--accent); border: none; border-radius: var(--radius-sm); color: var(--bg); font-size: 13px; font-weight: 600; cursor: pointer; transition: all var(--transition); }
.btn-save:hover { background: var(--accent-dim); }
.btn-save:disabled { opacity: 0.5; cursor: not-allowed; }
.skill-unbind-btn { background: none; border: none; color: var(--text-dim); font-size: 14px; cursor: pointer; padding: 0 0 0 6px; opacity: 0.4; transition: all var(--transition); line-height: 1; }
.skill-unbind-btn:hover { color: var(--red); opacity: 1; }
.skill-tag.clickable { display: inline-flex; align-items: center; gap: 2px; }

/* Heroicons SVG inline */
.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Refresh button spin animation */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.spinning .icon { animation: spin 0.8s linear infinite; }

.sdp-refresh-btn {
  background: none;
  border: 1px solid rgba(6,182,212,0.25);
  border-radius: 5px;
  padding: 2px 8px;
  cursor: pointer;
  color: var(--accent);
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s;
}
.sdp-refresh-btn:hover { background: rgba(6,182,212,0.1); }

/* === Context Panel === */
.ctx-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.75); z-index: 1000; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.15s ease; }
.ctx-panel { width: 90%; max-width: 860px; max-height: 85vh; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 48px rgba(0,0,0,0.6); }
.ctx-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.ctx-title { font-size: 15px; font-weight: 700; color: var(--text); }
.ctx-close { background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-dim); padding: 5px 14px; font-size: 12px; cursor: pointer; transition: all var(--transition); }
.ctx-close:hover { border-color: var(--accent); color: var(--accent); }
.ctx-tabs { display: flex; gap: 0; padding: 0 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; overflow-x: auto; }
.ctx-tab { padding: 10px 16px; font-size: 12px; font-weight: 500; color: var(--text-dim); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: all var(--transition); white-space: nowrap; }
.ctx-tab:hover { color: var(--text-sec); }
.ctx-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.ctx-tab-count { font-size: 10px; background: var(--bg-raised); padding: 1px 6px; border-radius: 8px; margin-left: 4px; }
.ctx-body { flex: 1; overflow-y: auto; }
.ctx-body::-webkit-scrollbar { width: 6px; }
.ctx-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.ctx-pane { padding: 16px 20px; }
.ctx-meta { font-size: 11px; color: var(--text-dim); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.ctx-pre { margin: 0; padding: 14px 16px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; color: var(--text-sec); font-family: 'SF Mono', Menlo, 'Courier New', monospace; max-height: 60vh; overflow-y: auto; }
.ctx-empty { text-align: center; padding: 40px 20px; color: var(--text-dim); font-size: 13px; }
.ctx-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; }

/* Cron items */
.ctx-cron-item { padding: 12px 14px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; }
.ctx-cron-header { display: flex; align-items: center; gap: 8px; }
.ctx-cron-name { font-size: 13px; color: var(--text-sec); word-break: break-word; }
.ctx-cron-schedule { font-size: 11px; color: var(--text-dim); margin-top: 4px; font-family: 'SF Mono', Menlo, monospace; }

/* Skill items */
.ctx-skill-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.ctx-skill-item:last-child { border-bottom: none; }
.ctx-skill-name { font-size: 13px; color: var(--text-sec); font-family: 'SF Mono', Menlo, monospace; }
.ctx-badge { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: rgba(245,158,11,0.15); color: #f59e0b; font-weight: 500; }

/* Action buttons in header bar */
.sdp-action-btns { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.sdp-ctx-btn { background: rgba(6,182,212,0.08); border: 1px solid rgba(6,182,212,0.25); border-radius: 5px; padding: 3px 10px; cursor: pointer; color: var(--accent); font-size: 11px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; transition: all var(--transition); }
.sdp-ctx-btn:hover { background: rgba(6,182,212,0.18); }
.sdp-reset-btn { background: none; border: 1px solid rgba(239,68,68,0.25); border-radius: 5px; padding: 3px 8px; cursor: pointer; color: var(--text-dim); font-size: 11px; display: inline-flex; align-items: center; gap: 4px; transition: all var(--transition); }
.sdp-reset-btn:hover { background: rgba(239,68,68,0.1); color: var(--red); border-color: rgba(239,68,68,0.5); }

@media (max-width: 768px) {
  .ctx-panel { width: 100%; max-width: 100%; max-height: 100vh; border-radius: 0; border: none; }
  .ctx-overlay { align-items: stretch; }
  .sdp-action-btns { gap: 2px; }
  .sdp-ctx-btn { padding: 3px 6px; font-size: 10px; }
}
.tk-controls{display:flex;align-items:center;gap:20px;margin-bottom:24px;padding:16px 20px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);flex-wrap:wrap}.tk-ctrl-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.tk-ctrl-label{font-size:11px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.tk-custom-dates{display:flex;align-items:center;gap:8px}.tk-date-input{padding:5px 10px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:12px;outline:none;transition:border var(--transition)}.tk-date-input:focus{border-color:var(--accent)}.tk-select{padding:6px 12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:13px;outline:none;cursor:pointer;min-width:140px;transition:border var(--transition)}.tk-select:focus{border-color:var(--accent)}.tk-summary{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:24px}.tk-stat-card{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);padding:16px;transition:border-color var(--transition)}.tk-stat-card:hover{border-color:var(--border-hover)}.tk-stat-label{font-size:10px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.tk-stat-value{font-size:26px;font-weight:700;letter-spacing:-.5px;font-family:'SF Mono',Menlo,'Courier New',monospace}.tk-section{margin-bottom:28px}.tk-section-title{font-size:14px;font-weight:600;color:var(--text-sec);text-transform:uppercase;letter-spacing:.5px;margin-bottom:14px}.tk-chart-wrap{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);padding:20px}.tk-bar-chart{display:flex;align-items:flex-end;gap:4px;height:200px;padding-bottom:28px;position:relative}.tk-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;min-width:12px;position:relative}.tk-bar-stack{width:100%;max-width:40px;display:flex;flex-direction:column;border-radius:3px 3px 0 0;overflow:hidden;transition:height .4s ease}.tk-bar-seg{position:relative;min-height:1px}.tk-bar-input{background:var(--accent);position:relative}.tk-bar-output{background:var(--green)}.tk-bar-cached{position:absolute;bottom:0;left:0;right:0;background:var(--blue);opacity:.5}.tk-bar-label{position:absolute;bottom:-24px;font-size:10px;color:var(--text-dim);white-space:nowrap}.tk-legend{display:flex;gap:16px;margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}.tk-legend-item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-dim)}.tk-legend-dot{width:10px;height:10px;border-radius:2px;flex-shrink:0}.tk-model-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}.tk-model-card{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);padding:14px;transition:border-color var(--transition)}.tk-model-card:hover{border-color:var(--border-hover)}.tk-model-name{font-size:13px;font-weight:500;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'SF Mono',Menlo,'Courier New',monospace}.tk-model-tokens{font-size:22px;font-weight:700;color:var(--accent);margin-bottom:6px;font-family:'SF Mono',Menlo,'Courier New',monospace}.tk-model-detail{display:flex;gap:12px;font-size:11px;color:var(--text-dim)}.tk-table-wrap{overflow-x:auto;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius)}.tk-table{width:100%;border-collapse:collapse;font-size:13px}.tk-table thead th{padding:12px 16px;text-align:left;font-size:11px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);background:rgba(0,0,0,.15);white-space:nowrap}.tk-table tbody tr{border-bottom:1px solid rgba(255,255,255,.04);transition:background var(--transition)}.tk-table tbody tr:last-child{border-bottom:none}.tk-table tbody tr:hover{background:rgba(6,182,212,.04)}.tk-table td{padding:10px 16px;white-space:nowrap}.tk-num{text-align:right!important}.tk-row-click{cursor:pointer}.tk-row-click:hover{background:var(--accent-bg)!important}.tk-bot-name{font-weight:500;color:var(--accent)}.tk-cache-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:500;background:var(--bg);color:var(--text-dim)}.tk-cache-badge.high{background:var(--green-bg);color:var(--green)}.tk-error-box{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;background:var(--bg-raised);border:1px solid rgba(239,68,68,.2);border-radius:var(--radius);color:var(--text-dim);font-size:14px;text-align:center}@media(max-width:768px){.tk-controls{flex-direction:column;align-items:flex-start;gap:12px}.tk-summary{grid-template-columns:repeat(2,1fr)}.tk-stat-value{font-size:20px}.tk-bar-chart{height:150px}.tk-model-grid{grid-template-columns:1fr}}

/* Context Panel & Session Actions */
.ctx-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.ctx-panel{width:720px;max-width:100%;max-height:85vh;background:var(--bg);border:1px solid var(--border);border-radius:12px;display:flex;flex-direction:column;overflow:hidden}
.ctx-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border)}
.ctx-title{font-size:15px;font-weight:700}
.ctx-close{padding:4px 12px;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:6px;color:var(--text-dim);cursor:pointer;font-size:12px}
.ctx-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);padding:0 16px}
.ctx-tab{padding:8px 14px;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-dim);font-size:12px;cursor:pointer;white-space:nowrap}
.ctx-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.ctx-tab-count{font-size:10px;padding:1px 5px;background:rgba(255,255,255,0.06);border-radius:8px;margin-left:4px}
.ctx-body{flex:1;overflow-y:auto;padding:0}
.ctx-pane{padding:16px 20px}
.ctx-meta{font-size:11px;color:var(--text-dim);margin-bottom:12px;padding:6px 10px;background:rgba(255,255,255,0.03);border-radius:6px}
.ctx-pre{margin:0;padding:14px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.08);border-radius:8px;font-size:12px;line-height:1.6;white-space:pre-wrap;word-break:break-word;color:rgba(255,255,255,0.75);max-height:55vh;overflow:auto;font-family:'SF Mono',Menlo,monospace}
.ctx-empty{text-align:center;padding:40px;color:var(--text-dim);font-size:13px}
.ctx-btn-sm{padding:3px 10px;font-size:11px;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:5px;color:var(--text-sec);cursor:pointer}
.ctx-btn-sm:hover{background:rgba(255,255,255,0.1)}
.ctx-btn-primary{background:rgba(6,182,212,0.15);border-color:rgba(6,182,212,0.3);color:var(--accent)}
.ctx-btn-danger{color:#EF4444;border-color:rgba(239,68,68,0.2)}
.ctx-btn-danger:hover{background:rgba(239,68,68,0.1)}
.ctx-textarea{width:100%;min-height:200px;max-height:50vh;padding:12px;background:rgba(255,255,255,0.02);border:1px solid var(--accent);border-radius:8px;color:var(--text);font-size:12px;line-height:1.6;font-family:'SF Mono',Menlo,monospace;resize:vertical}
.ctx-cron-item{padding:10px 14px;border:1px solid rgba(255,255,255,0.06);border-radius:6px;margin-bottom:8px}
.ctx-cron-header{display:flex;align-items:center;gap:8px}
.ctx-cron-name{font-size:12px;color:var(--text)}
.ctx-cron-schedule{font-size:11px;color:var(--text-dim);margin-top:4px;font-family:'SF Mono',Menlo,monospace}
.ctx-skill-row{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border:1px solid rgba(255,255,255,0.06);border-radius:6px;margin-bottom:6px}
.ctx-skill-name{font-size:12px;font-family:'SF Mono',Menlo,monospace}
.ctx-badge{font-size:9px;padding:1px 6px;background:rgba(6,182,212,0.12);color:var(--accent);border-radius:8px}
.ctx-toggle{position:relative;width:32px;height:18px;display:inline-block}
.ctx-toggle input{opacity:0;width:0;height:0}
.ctx-toggle-slider{position:absolute;cursor:pointer;inset:0;background:rgba(255,255,255,0.15);border-radius:9px;transition:.2s}
.ctx-toggle input:checked+.ctx-toggle-slider{background:var(--accent)}
.ctx-toggle-slider:before{content:'';position:absolute;height:14px;width:14px;left:2px;bottom:2px;background:#fff;border-radius:50%;transition:.2s}
.ctx-toggle input:checked+.ctx-toggle-slider:before{transform:translateX(14px)}
.ctx-imchat-list{max-height:55vh;overflow-y:auto}
.ctx-imchat-msg{padding:8px 12px;border-bottom:1px solid rgba(255,255,255,0.04)}
.ctx-imchat-sender{font-size:11px;font-weight:600;color:var(--text-sec);margin-bottom:2px;display:flex;align-items:center;gap:8px}
.ctx-imchat-time{font-size:10px;color:var(--text-dim);font-weight:400}
.ctx-imchat-text{font-size:12px;color:var(--text);line-height:1.5;white-space:pre-wrap;word-break:break-word}
.ctx-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px}

/* Session Action Buttons */
.sdp-action-btns{display:flex;align-items:center;gap:4px;margin-left:auto}
.sdp-action-btn{padding:4px 8px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:5px;color:var(--text-dim);cursor:pointer;display:flex;align-items:center}
.sdp-action-btn:hover{background:rgba(255,255,255,0.1)}
.sdp-danger-btn{color:rgba(239,68,68,0.6);border-color:rgba(239,68,68,0.15)}
.sdp-danger-btn:hover{color:#EF4444;background:rgba(239,68,68,0.1)}
.sdp-ctx-btn{padding:4px 10px;background:rgba(6,182,212,0.1);border:1px solid rgba(6,182,212,0.25);border-radius:5px;color:var(--accent);cursor:pointer;font-size:11px;font-weight:500;display:flex;align-items:center;gap:4px}
.sdp-ctx-btn:hover{background:rgba(6,182,212,0.2)}
.sdp-refresh-btn{padding:4px 8px;background:none;border:1px solid var(--border);border-radius:5px;color:var(--text-dim);cursor:pointer;display:flex;align-items:center}
.sdp-refresh-btn.spinning svg{animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Proxy Message Bar */
.sdp-proxy-bar{display:flex;gap:8px;padding:6px 16px;border-bottom:1px solid var(--border);background:rgba(255,255,255,0.02)}
.sdp-proxy-input{flex:1;padding:5px 10px;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:12px;outline:none}
.sdp-proxy-input:focus{border-color:var(--accent)}
.sdp-proxy-send{padding:5px 14px;background:rgba(6,182,212,0.15);border:1px solid rgba(6,182,212,0.3);border-radius:6px;color:var(--accent);cursor:pointer;font-size:12px;font-weight:500}
.sdp-proxy-send:hover{background:rgba(6,182,212,0.25)}

/* Dropdown Menu */
.sdp-dropdown{position:relative;display:inline-flex}
.sdp-more-btn{padding:4px 10px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:5px;color:var(--text-dim);cursor:pointer;font-size:16px;font-weight:bold;letter-spacing:2px;line-height:1}
.sdp-more-btn:hover{background:rgba(255,255,255,0.1)}
.sdp-dropdown-menu{display:none;position:absolute;top:100%;right:0;margin-top:4px;min-width:180px;background:var(--bg);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.4);z-index:100;overflow:hidden;padding:4px}
.sdp-dropdown-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;background:none;border:none;color:var(--text-sec);font-size:12px;cursor:pointer;border-radius:4px;text-align:left}
.sdp-dropdown-item:hover{background:rgba(255,255,255,0.06);color:var(--text)}
.sdp-dropdown-item span{flex:1}
.sdp-dropdown-danger{color:rgba(239,68,68,0.7)}
.sdp-dropdown-danger:hover{background:rgba(239,68,68,0.08);color:#EF4444}

/* Bot Config Edit */
.cfg-input{width:100%;padding:6px 10px;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px;outline:none}
.cfg-input:focus{border-color:var(--accent)}
.cfg-toggle-wrap{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text);cursor:pointer}

/* Consumption Analysis */
.tk-consumption-btn{margin-left:auto;padding:6px 16px;background:rgba(168,85,247,0.12);border:1px solid rgba(168,85,247,0.3);border-radius:var(--radius-sm);color:#A78BFA;font-size:12px;font-weight:500;cursor:pointer;transition:all var(--transition);white-space:nowrap}
.tk-consumption-btn:hover{background:rgba(168,85,247,0.2);border-color:rgba(168,85,247,0.5)}
.tk-consumption-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.tk-consumption-summary{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin-bottom:20px}
.tk-consumption-key-card{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;transition:border-color var(--transition)}
.tk-consumption-key-card:hover{border-color:var(--border-hover)}
.tk-consumption-key-name{font-size:12px;font-weight:600;color:var(--text);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-consumption-key-balance{font-size:11px;color:var(--text-dim);margin-bottom:2px}
.tk-consumption-key-rate{font-size:18px;font-weight:700;color:#A78BFA;font-family:'SF Mono',Menlo,'Courier New',monospace}
.tk-consumption-chart-wrap{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);padding:20px;min-height:360px;position:relative}
@media(max-width:768px){.tk-consumption-summary{grid-template-columns:repeat(2,1fr)}.tk-consumption-chart-wrap{padding:12px;min-height:280px}}

/* === Dashboard === */
.db-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:28px}
.db-kpi-card{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;transition:border-color var(--transition)}
.db-kpi-card:hover{border-color:var(--border-hover)}
.db-kpi-label{font-size:10px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.db-kpi-value{font-size:28px;font-weight:700;letter-spacing:-.5px;font-family:'SF Mono',Menlo,'Courier New',monospace;color:var(--text);margin-bottom:6px}
.db-kpi-compare{display:flex;align-items:center;gap:8px}
.db-kpi-change{font-size:13px;font-weight:600;font-family:'SF Mono',Menlo,'Courier New',monospace}
.db-kpi-yesterday{font-size:11px;color:var(--text-dim)}
.db-cost-summary{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:16px}
.db-cost-card{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;transition:border-color var(--transition)}
.db-cost-card:hover{border-color:var(--border-hover)}
.db-cost-value{font-size:24px;font-weight:700;color:#A78BFA;font-family:'SF Mono',Menlo,'Courier New',monospace;margin-bottom:4px}
.db-refresh-btn{padding:6px 16px;background:var(--accent-bg);border:1px solid rgba(6,182,212,0.3);border-radius:var(--radius-sm);color:var(--accent);font-size:12px;font-weight:500;cursor:pointer;transition:all var(--transition);white-space:nowrap;display:flex;align-items:center;gap:6px}
.db-refresh-btn:hover{background:rgba(6,182,212,0.2);border-color:rgba(6,182,212,0.5)}
@media(max-width:768px){.db-kpi-grid{grid-template-columns:repeat(2,1fr)}.db-kpi-value{font-size:20px}}
/* === User Management === */
.uf-group{margin-bottom:16px}.uf-label{display:block;font-size:12px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}.uf-input{display:block;width:100%;padding:10px 14px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:13px;outline:none;transition:border var(--transition),box-shadow var(--transition)}.uf-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}.uf-readonly{padding:10px 14px;background:rgba(0,0,0,.15);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-sec);font-size:13px}.uf-checkbox-list{max-height:200px;overflow-y:auto;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px}.uf-checkbox{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:4px;cursor:pointer;font-size:13px;color:var(--text-sec);transition:background var(--transition)}.uf-checkbox:hover{background:var(--bg-raised)}
.um-seg{display:flex;gap:0;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}.um-seg-btn{flex:1;padding:8px 14px;background:var(--bg);border:none;border-right:1px solid var(--border);color:var(--text-dim);font-size:13px;cursor:pointer;transition:all var(--transition)}.um-seg-btn:last-child{border-right:none}.um-seg-btn:hover{color:var(--text-sec);background:var(--bg-raised)}.um-seg-btn.active{background:var(--accent-bg);color:var(--accent);font-weight:500}
.um-user-cell{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.um-auth-tag{display:inline-block;padding:1px 6px;border-radius:3px;font-size:11px;font-weight:500;background:var(--blue-bg);color:var(--blue)}.um-ext-tag{display:inline-block;padding:1px 6px;border-radius:3px;font-size:11px;font-weight:500;background:rgba(251,191,36,.1);color:#fbbf24}.um-perm-all{display:inline-block;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:500;background:var(--accent-bg);color:var(--accent)}.um-perm-none{color:var(--text-dim);font-size:12px}.um-perm-tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:12px;background:var(--bg);border:1px solid var(--border);color:var(--text-sec);margin:2px 2px}
.um-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}