/* Quents Dashboard — Professional Container Management Console */
:root {
  /* New theme palette */
  --bg-base:      #0B0F14;
  --surface-1:    #131920;
  --surface-2b:   #192230;
  --border-c:     #1E2A38;
  --border-hi:    #2E4055;
  --text-c:       #E8EBF0;
  --muted-c:      #7A8899;
  --dim:          #3D4E60;
  --accent:       #E8954A;
  --accent-d:     #C07838;
  --accent-glow:  rgba(232,149,74,0.10);
  --live:         #4ADE80;
  --blue:         #4A9EE8;
  --purple:       #9B7AE8;
  --error:        #F87171;

  /* Legacy token mapping -> new theme */
  --brand: var(--accent);
  --brand-600: var(--accent-d);
  --brand-100: var(--accent-glow);
  --bg: var(--bg-base);
  --bg-2: #080C10;
  --surface: var(--surface-1);
  --surface-2: var(--surface-2b);
  --surface-3: #22303F;
  --border: var(--border-c);
  --border-strong: var(--border-hi);
  --text: var(--text-c);
  --text-2: #C4CDD8;
  --muted: var(--muted-c);
  --success: var(--live);
  --warning: var(--accent);
  --danger: var(--error);
  --info: var(--blue);
  --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-md: 0 4px 14px rgba(0,0,0,0.45);
  --sidebar-w: 232px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 56px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 14px; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: var(--brand); color: #111; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ---------- Layout shell ---------- */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: var(--topbar-h) 1fr; grid-template-areas: "sidebar topbar" "sidebar main"; min-height: 100vh; transition: grid-template-columns .18s ease; }
.app.collapsed { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }

/* Sidebar */
.sidebar { grid-area: sidebar; background: var(--bg-2); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.sidebar .brand { display: flex; align-items: center; gap: 10px; height: var(--topbar-h); padding: 0 16px; border-bottom: 1px solid var(--border); }
.sidebar .brand .logo { width: 28px; height: 28px; border-radius: 7px; background: linear-gradient(135deg, var(--brand), var(--brand-600)); display: grid; place-items: center; color: #1a1108; font-weight: 800; box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset; }
.sidebar .brand .name { font-weight: 700; letter-spacing: .2px; }
.sidebar .brand .name small { display: block; font-size: 10px; color: var(--muted); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.app.collapsed .sidebar .name, .app.collapsed .nav-item span, .app.collapsed .nav-section { display: none; }
.app.collapsed .nav-item { justify-content: center; padding: 0; height: 40px; width: 40px; margin: 0 auto; }

.nav { padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; }
.nav-section { padding: 12px 10px 6px; color: var(--muted); text-transform: uppercase; font-size: 10px; letter-spacing: .12em; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; color: var(--text-2); cursor: pointer; font-size: 13px; transition: background .12s, color .12s; }
.nav-item:hover { background: var(--surface); color: var(--text); }
.nav-item.active { background: var(--brand-100); color: var(--brand); }
.nav-item.active svg { color: var(--brand); }
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted); }
.nav-item.active svg { color: var(--brand); }
.sidebar-footer { padding: 10px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.sidebar-footer .engine { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); }
.sidebar-footer .engine .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.app.collapsed .sidebar-footer .engine span { display: none; }

/* Topbar */
.topbar { grid-area: topbar; background: var(--bg); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; padding: 0 16px; position: sticky; top: 0; z-index: 20; }
.icon-btn { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 7px; background: transparent; border: 1px solid transparent; color: var(--text-2); cursor: pointer; }
.icon-btn:hover { background: var(--surface); color: var(--text); }
.icon-btn svg { width: 16px; height: 16px; }
.search { position: relative; flex: 1; max-width: 520px; }
.search input { width: 100%; height: 34px; background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 7px; padding: 0 12px 0 34px; font-size: 13px; outline: none; }
.search input:focus { border-color: var(--brand); }
.search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--muted); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #34507a, #22334F); display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--text); }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(34,197,94,.12); color: var(--success); font-size: 12px; font-weight: 500; }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Main content */
.main { grid-area: main; overflow: auto; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 24px 28px 20px; border-bottom: 1px solid var(--border); }
.page-header h1 { margin: 0 0 4px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.page-header p { margin: 0; color: var(--muted); font-size: 13px; }
.breadcrumbs { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.breadcrumbs a:hover { color: var(--text); }
.breadcrumbs .sep { color: var(--border-strong); }
.page-actions { display: flex; gap: 8px; }
.page { padding: 24px 28px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer; transition: background .12s, border-color .12s; }
.btn:hover { background: var(--surface-2); }
.btn svg { width: 14px; height: 14px; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #1a1108; }
.btn.primary:hover { background: var(--brand-600); border-color: var(--brand-600); }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: var(--surface); }

/* ---------- Integrated Terminal ---------- */
.terminal-embed { display: flex; flex-direction: column; height: calc(100vh - var(--topbar-h) - 140px); min-height: 420px; }
.terminal-standalone { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.qterm { display: flex; flex-direction: column; flex: 1; min-height: 0; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.qterm-standalone { border-radius: 0; border: none; box-shadow: none; }

.qterm-tabs { display: flex; align-items: stretch; background: var(--bg); border-bottom: 1px solid var(--border); padding: 0 6px; position: relative; }
.qterm-tablist { display: flex; align-items: stretch; gap: 2px; overflow-x: auto; flex: 1; }
.qterm-tab { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; height: 34px; background: transparent; color: var(--text-2); border: none; border-top: 2px solid transparent; cursor: pointer; font-size: 12px; font-family: var(--font-sans); white-space: nowrap; }
.qterm-tab:hover { background: var(--surface); color: var(--text); }
.qterm-tab.active { background: var(--bg-2); color: var(--text); border-top-color: var(--brand); }
.qterm-tab .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.qterm-tab.active .dot { background: var(--success); box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.qterm-tab .close { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; color: var(--muted); }
.qterm-tab .close:hover { background: var(--surface-2); color: var(--text); }
.qterm-tab .close svg { width: 12px; height: 12px; }
.qterm-tab-add { display: inline-grid; place-items: center; width: 34px; height: 34px; background: transparent; border: none; color: var(--muted); cursor: pointer; }
.qterm-tab-add:hover { color: var(--text); background: var(--surface); }
.qterm-tab-add svg { width: 14px; height: 14px; }

.qterm-menu { position: absolute; right: 6px; top: 36px; z-index: 30; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; padding: 4px; box-shadow: var(--shadow-md); display: flex; flex-direction: column; min-width: 180px; }
.qterm-menu button { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: transparent; border: none; color: var(--text-2); font-size: 13px; cursor: pointer; border-radius: 6px; text-align: left; }
.qterm-menu button:hover { background: var(--surface-2); color: var(--text); }
.qterm-menu button svg { width: 14px; height: 14px; color: var(--muted); }

.qterm-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background: var(--surface); border-bottom: 1px solid var(--border); }
.qterm-status { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); padding: 4px 10px; border-radius: 999px; background: rgba(133,152,180,.10); }
.qterm-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 3px rgba(133,152,180,.14); }
.qterm-status[data-state="connecting"] .dot { background: var(--warning); box-shadow: 0 0 0 3px rgba(245,158,11,.18); animation: qterm-pulse 1.2s ease-in-out infinite; }
.qterm-status[data-state="connected"]  .dot { background: var(--success); box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.qterm-status[data-state="error"]      .dot { background: var(--danger);  box-shadow: 0 0 0 3px rgba(239,68,68,.18); }
.qterm-status[data-state="closed"]     .dot { background: var(--muted); }
@keyframes qterm-pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

.qterm-toolbar-actions { display: flex; align-items: center; gap: 4px; }
.qterm-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; background: transparent; color: var(--text-2); border: 1px solid transparent; border-radius: 6px; cursor: pointer; font-size: 12px; font-family: var(--font-sans); }
.qterm-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.qterm-btn svg { width: 12px; height: 12px; }

.qterm-body { position: relative; flex: 1; min-height: 0; background: var(--bg-2); }
.qterm-panel { position: absolute; inset: 0; display: none; flex-direction: column; padding: 12px 14px 10px; font-family: var(--font-mono); color: #E6EDF3; }
.qterm-panel.active { display: flex; }
.qterm-output { flex: 1; overflow-y: auto; font-size: 13px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; padding-bottom: 6px; }
.qterm-line { display: block; }
.qterm-line-cmd { color: #F8FAFC; }
.qterm-line-out { color: #C7D2E1; }
.qterm-line-sys { color: #8598B4; font-style: italic; }
.qterm-line-err { color: #FCA5A5; }

.qterm-inputline { display: flex; align-items: center; gap: 8px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.05); }
.qterm-prompt { color: var(--brand); font-weight: 600; user-select: none; white-space: nowrap; }
.qterm-input { flex: 1; background: transparent; border: none; outline: none; color: #F8FAFC; font-family: var(--font-mono); font-size: 13px; caret-color: var(--brand); }

.qterm-loading { position: absolute; inset: auto 14px 44px 14px; display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.qterm-spinner { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.14); border-top-color: var(--brand); animation: qterm-spin 0.9s linear infinite; }
@keyframes qterm-spin { to { transform: rotate(360deg); } }

body.term-standalone { height: 100vh; overflow: hidden; margin: 0; }
.term-window { display: flex; flex-direction: column; height: 100vh; background: var(--bg); }
.term-window-header { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 16px; background: var(--bg-2); border-bottom: 1px solid var(--border); }
.term-window-title { display: flex; align-items: center; gap: 10px; }
.term-window-title .logo { width: 26px; height: 26px; border-radius: 6px; background: linear-gradient(135deg, var(--brand), var(--brand-600)); display: grid; place-items: center; color: #1a1108; font-weight: 800; font-size: 13px; }
.term-window-title .title { font-size: 13px; font-weight: 600; color: var(--text); }
.term-window-title .subtitle { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.term-window-meta .pill[data-state="connected"]  { background: rgba(34,197,94,.12);  color: var(--success); }
.term-window-meta .pill[data-state="connecting"] { background: rgba(245,158,11,.14); color: var(--warning); }
.term-window-meta .pill[data-state="error"]      { background: rgba(239,68,68,.14);  color: var(--danger); }
.btn.danger { background: transparent; border-color: rgba(239,68,68,.35); color: var(--danger); }
.btn.danger:hover { background: rgba(239,68,68,.1); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 6px; }
.btn.xs { height: 24px; padding: 0 8px; font-size: 11px; border-radius: 5px; }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; }
.card h3 { margin: 0 0 4px; font-size: 13px; color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }
.card .value { font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.card .sub { color: var(--muted); font-size: 12px; margin-top: 4px; }
.card .row { display: flex; align-items: center; justify-content: space-between; }
.icon-square { width: 34px; height: 34px; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; color: var(--brand); }
.icon-square svg { width: 16px; height: 16px; }

.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } .grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } }

/* Tables */
.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.table-toolbar { display: flex; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid var(--border); background: var(--bg-2); }
.table-toolbar .search { max-width: 320px; flex: 1; }
.table-toolbar select { height: 32px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 0 10px; font-size: 12px; }
table.q-table { width: 100%; border-collapse: collapse; }
.q-table th, .q-table td { text-align: left; padding: 10px 12px; font-size: 13px; border-bottom: 1px solid var(--border); }
.q-table th { background: var(--bg-2); font-weight: 500; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.q-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.q-table tbody tr:last-child td { border-bottom: none; }
.mono { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 500; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.running { color: var(--success); background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.25); }
.badge.stopped, .badge.exited { color: var(--muted); }
.badge.paused { color: var(--warning); background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.25); }
.badge.error { color: var(--danger); background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.25); }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); padding: 0 28px; background: var(--bg); position: sticky; top: 0; z-index: 5; }
.tab { padding: 12px 14px; font-size: 13px; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--brand); border-bottom-color: var(--brand); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Forms */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 6px; font-weight: 500; }
.form-group .hint { color: var(--muted); font-size: 11px; margin-top: 4px; }
.input, select.input, textarea.input { width: 100%; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); border-radius: 7px; padding: 8px 10px; font-size: 13px; outline: none; font-family: inherit; }
.input:focus { border-color: var(--brand); }
textarea.input { min-height: 80px; font-family: var(--font-mono); font-size: 12px; }

.kv-list { display: flex; flex-direction: column; gap: 6px; }
.kv-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; }
.kv-row .btn { height: 34px; }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(6,12,22,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.modal-overlay.open { display: flex; }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md); width: 100%; max-width: 720px; max-height: 88vh; display: flex; flex-direction: column; }
.modal.wide { max-width: 920px; }
.modal .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.modal .modal-header h2 { margin: 0; font-size: 15px; font-weight: 600; }
.modal .modal-body { padding: 18px; overflow-y: auto; }
.modal .modal-footer { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }

/* Toasts */
.toasts { position: fixed; top: 70px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.toast { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--brand); padding: 10px 14px; border-radius: 7px; font-size: 13px; box-shadow: var(--shadow-md); min-width: 240px; animation: toast-in .18s ease; }
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }
.toast.info { border-left-color: var(--info); }
@keyframes toast-in { from { opacity: 0; transform: translateX(8px);} to { opacity: 1; transform: none; } }

/* Skeleton */
.skeleton { background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: sk 1.2s linear infinite; border-radius: 6px; }
@keyframes sk { 0%{background-position: 200% 0;} 100%{background-position: -200% 0;} }

/* Empty state */
.empty { text-align: center; padding: 48px 16px; color: var(--muted); }
.empty .icon-square { margin: 0 auto 12px; width: 44px; height: 44px; }
.empty h3 { color: var(--text); font-size: 15px; margin: 0 0 6px; font-weight: 600; }

/* Terminal */
.terminal { background: #060B15; border: 1px solid var(--border); border-radius: 8px; font-family: var(--font-mono); font-size: 12.5px; padding: 14px; height: 420px; overflow-y: auto; color: #C7D2E0; }
.terminal .line { white-space: pre-wrap; }
.terminal .prompt { color: var(--brand); }
.terminal .out { color: #94A3B8; }
.terminal-input { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: #060B15; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 8px 8px; font-family: var(--font-mono); }
.terminal-input span { color: var(--brand); }
.terminal-input input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font-family: var(--font-mono); font-size: 12.5px; }

/* Log viewer */
.logs { background: #060B15; border: 1px solid var(--border); border-radius: 8px; font-family: var(--font-mono); font-size: 12px; padding: 12px 14px; height: 520px; overflow-y: auto; }
.logs .log-line { display: grid; grid-template-columns: 76px 60px 1fr; gap: 10px; padding: 2px 0; align-items: baseline; }
.logs .log-line time { color: #4B6180; font-size: 11px; }
.logs .log-line .lvl { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.logs .lvl.INFO { color: var(--info); }
.logs .lvl.WARN { color: var(--warning); }
.logs .lvl.ERROR { color: var(--danger); }
.logs .lvl.DEBUG { color: var(--muted); }
.logs .msg { color: #C7D2E0; white-space: pre-wrap; word-break: break-word; }

/* Charts (SVG) */
.chart { width: 100%; height: 180px; display: block; }
.chart .grid-line { stroke: var(--border); stroke-width: 1; }
.chart .area { fill: url(#chart-fill); opacity: .35; }
.chart .stroke { fill: none; stroke: var(--brand); stroke-width: 2; }

/* Utility */
.row { display: flex; align-items: center; gap: 10px; }
.spacer { flex: 1; }
.muted { color: var(--muted); }
.text-xs { font-size: 11px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; }
.hidden { display: none !important; }
.divider { height: 1px; background: var(--border); margin: 16px 0; }

/* ============================================================
 * Upgraded Containers / Images page components
 * ==========================================================*/
/* Sortable header */
.q-table thead th[data-sort] { user-select: none; }
.q-table thead th[data-sort]:hover { color: var(--text); }
.q-table thead th.sorted { color: var(--brand); }
.sort-arrow { display: inline-block; margin-left: 4px; font-size: 9px; opacity: .85; }

/* Selected row */
.q-table tbody tr.row-selected { background: var(--accent-glow); }
.q-table tbody tr.row-selected:hover { background: var(--accent-glow); }
.q-table tbody tr { cursor: default; }
.q-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.link-strong { color: var(--text); font-weight: 500; }
.link-strong:hover { color: var(--brand); }
.row-name { display: flex; align-items: center; gap: 6px; }

/* Bulk action bar */
.bulk-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  animation: bulk-in .16s ease;
}
@keyframes bulk-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Row menu dots */
.icon-btn.row-menu svg { width: 14px; height: 14px; }

/* ---------- Native context menu ---------- */
.q-ctx-menu {
  position: fixed; z-index: 260;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.55);
  padding: 6px;
  animation: qPop .12s ease;
}
.q-ctx-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px; align-items: center;
  width: 100%; text-align: left;
  padding: 8px 10px; border: 0; background: transparent;
  border-radius: 6px; font: inherit; color: var(--text-2); cursor: pointer;
}
.q-ctx-item:hover:not([disabled]) { background: var(--surface-2); color: var(--text); }
.q-ctx-item[disabled] { opacity: .4; cursor: not-allowed; }
.q-ctx-item.danger { color: var(--danger); }
.q-ctx-item.danger:hover:not([disabled]) { background: rgba(239,68,68,.1); }
.q-ctx-item svg { width: 14px; height: 14px; color: var(--muted); }
.q-ctx-item.danger svg { color: var(--danger); }
.q-ctx-sep { height: 1px; background: var(--border); margin: 4px 4px; }

/* ---------- Side panel drawer ---------- */
.q-side-panel { position: fixed; inset: 0; z-index: 220; display: flex; }
.q-panel-scrim { position: absolute; inset: 0; background: rgba(6,12,22,.5); opacity: 0; transition: opacity .18s ease; }
.q-side-panel.open .q-panel-scrim { opacity: 1; }
.q-panel {
  margin-left: auto; position: relative;
  width: min(480px, 100vw);
  height: 100%;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 40px rgba(0,0,0,.35);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .22s ease;
}
.q-panel.wide { width: min(640px, 100vw); }
.q-side-panel.open .q-panel { transform: translateX(0); }
.q-panel-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.q-panel-actions {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 18px; border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}
.q-panel-body { padding: 18px; overflow-y: auto; flex: 1; }
.q-panel-tabs {
  display: flex; gap: 4px; padding: 0 12px;
  border-bottom: 1px solid var(--border); background: var(--bg-2);
}
.q-panel-tab {
  padding: 10px 12px; font-size: 12px; color: var(--muted);
  background: transparent; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px; cursor: pointer;
}
.q-panel-tab:hover { color: var(--text); }
.q-panel-tab.active { color: var(--brand); border-bottom-color: var(--brand); }

/* ---------- Wizard stepper ---------- */
.q-steps {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0 18px; flex-wrap: wrap;
}
.q-step {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 999px;
  background: var(--bg-2); color: var(--muted);
  font-size: 12px; font-weight: 500;
  border: 1px solid var(--border);
}
.q-step-n {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface-2); color: var(--muted);
  display: inline-grid; place-items: center; font-size: 11px; font-weight: 600;
}
.q-step.active { color: var(--brand); border-color: var(--brand); background: var(--accent-glow); }
.q-step.active .q-step-n { background: var(--brand); color: #1a1108; }
.q-step.done { color: var(--success); border-color: rgba(74,222,128,.35); }
.q-step.done .q-step-n { background: rgba(74,222,128,.2); color: var(--success); }
.q-wizard-pane { padding-top: 6px; }
.q-review .review-row {
  display: grid; grid-template-columns: 140px 1fr; gap: 10px;
  padding: 8px 0; border-bottom: 1px dashed var(--border);
}
.q-review .review-row:last-child { border-bottom: 0; }

/* ---------- Image layers ---------- */
.q-layers { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.q-layer {
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.q-layer-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; margin-bottom: 6px;
}
.q-layer-idx {
  display: inline-grid; place-items: center;
  width: 24px; height: 20px; padding: 0 6px; border-radius: 4px;
  background: var(--surface-2); color: var(--muted);
  font-family: var(--font-mono); font-size: 11px;
}
.q-layer-bar {
  height: 4px; background: var(--surface-2); border-radius: 2px;
  overflow: hidden; margin: 4px 0 6px;
}
.q-layer-bar > div { height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-600)); }

/* ---------- Pull progress ---------- */
.q-pull-progress { margin-top: 8px; }
.q-pull-bar {
  height: 6px; background: var(--surface-2); border-radius: 3px;
  overflow: hidden; margin-bottom: 6px;
}
.q-pull-bar > div {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--brand), var(--brand-600));
  transition: width .2s ease;
}

/* ============================================================
 * Enhancements: command palette, notifications, welcome,
 * shortcuts, context menus, favorites, resource badges,
 * events / activity timeline, improved state components.
 * ==========================================================*/

/* Notification badge on the topbar bell */
.notif-badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger, #ef4444);
  color: #fff;
  font-size: 10px; font-weight: 700;
  line-height: 16px;
  text-align: center;
  display: none;
}

/* Topbar KBD hint inside search */
.topbar .search { position: relative; }
.topbar .search .kbd-hint {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  display: inline-flex; gap: 2px; pointer-events: none; opacity: .7;
}
.topbar .search .kbd-hint kbd,
kbd {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  padding: 2px 5px;
  border: 1px solid var(--border-hi, var(--border, #2E4055));
  border-bottom-width: 2px;
  background: var(--surface2, var(--surface, #192230));
  border-radius: 4px;
  color: var(--muted, #7A8899);
}

/* Search dropdown */
.search-dd {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--surface, #131920);
  border: 1px solid var(--border-hi, var(--border, #2E4055));
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.55);
  max-height: 360px; overflow-y: auto; overflow-x: hidden;
  display: none;
  z-index: 60;
  color: var(--text, #E8EBF0);
}
.search-dd.open { display: block; }
.search-dd .search-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #1E2A38);
  color: var(--text, inherit); text-decoration: none;
  min-width: 0;
}
.search-dd .search-item:last-child { border-bottom: 0; }
.search-dd .search-item:hover,
.search-dd .search-item:focus { background: var(--surface2, rgba(255,255,255,0.04)); }
.search-dd .s-title { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-dd .s-sub { color: var(--muted, #7A8899); font-size: 12px; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; justify-self: end; }
.search-dd .search-empty { padding: 16px; color: var(--muted, #7A8899); text-align: center; }

/* Mobile: pin dropdown to viewport width so it never overflows/misaligns */
@media (max-width: 640px) {
  .search-dd {
    position: fixed;
    left: 8px; right: 8px; top: calc(var(--topbar-h, 52px) + 4px);
    max-height: calc(100dvh - var(--topbar-h, 52px) - 16px);
  }
  .search-dd .s-sub { display: none; }
  .search-dd .search-item { grid-template-columns: auto minmax(0, 1fr); padding: 12px; }
}

/* Kind badge (used in palette + search) */
.kind-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  background: rgba(99,102,241,0.1);
  color: #4f46e5;
}
.kind-badge.primary { background: rgba(59,130,246,0.12); color: #2563eb; }
.kind-badge.accent  { background: rgba(139,92,246,0.12); color: #7c3aed; }
.kind-badge.warn    { background: rgba(234,179,8,0.15);  color: #a16207; }
.kind-badge.info    { background: rgba(14,165,233,0.12); color: #0369a1; }
.kind-badge.muted   { background: rgba(107,114,128,0.14); color: #4b5563; }

/* Command palette */
.cmdk-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15,23,42,0.4);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
  animation: qFade .12s ease;
}
.cmdk {
  width: min(640px, 92vw);
  background: var(--card, #fff);
  border-radius: 14px;
  box-shadow: 0 32px 80px rgba(15,23,42,0.35);
  overflow: hidden;
  border: 1px solid var(--border, #e5e7eb);
  animation: qPop .14s ease;
}
.cmdk-input {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.cmdk-input input {
  flex: 1; border: 0; outline: 0; font-size: 15px; background: transparent;
  color: inherit;
}
.cmdk-icon { color: var(--muted, #6b7280); display: inline-flex; }
.cmdk-list { max-height: 60vh; overflow: auto; padding: 6px 0; }
.cmdk-header {
  padding: 8px 16px 4px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted, #6b7280);
}
.cmdk-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: 10px;
  padding: 8px 16px;
  cursor: pointer;
}
.cmdk-item.active { background: rgba(59,130,246,0.08); }
.cmdk-item .cmdk-title { font-weight: 600; }
.cmdk-item .cmdk-sub { color: var(--muted, #6b7280); font-size: 12px; text-align: right; }
.cmdk-footer {
  display: flex; gap: 16px; padding: 8px 16px;
  border-top: 1px solid var(--border, #e5e7eb);
  color: var(--muted, #6b7280); font-size: 12px;
}
.cmdk-footer kbd { margin-right: 3px; }

/* Notifications drawer */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(15,23,42,0.35);
  display: flex; justify-content: flex-end;
}
.drawer {
  width: min(400px, 100vw); background: var(--card, #fff);
  height: 100%; display: flex; flex-direction: column;
  animation: qSlideR .18s ease;
  border-left: 1px solid var(--border, #e5e7eb);
}
.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; border-bottom: 1px solid var(--border, #e5e7eb);
}
.drawer-header h3 { margin: 0; }
.drawer-actions { display: flex; align-items: center; gap: 8px; }
.drawer-body { padding: 8px; overflow: auto; flex: 1; }
.notif {
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: 10px;
  padding: 12px;
  border-radius: 10px;
  margin: 4px 0;
}
.notif:hover { background: rgba(0,0,0,0.03); }
.notif.unread { background: rgba(59,130,246,0.06); }
.notif-dot { width: 8px; height: 8px; border-radius: 999px; margin-top: 6px; background: #9ca3af; }
.notif.lvl-info .notif-dot { background: #3b82f6; }
.notif.lvl-warn .notif-dot { background: #f59e0b; }
.notif.lvl-error .notif-dot { background: #ef4444; }
.notif.lvl-success .notif-dot { background: #10b981; }
.notif-title { font-weight: 700; }
.notif-msg { color: var(--muted, #6b7280); font-size: 13px; margin-top: 2px; }
.notif-time { color: var(--muted, #6b7280); font-size: 11px; margin-top: 4px; }

/* About dialog */
.about-body { text-align: center; padding: 8px 8px 4px; }
.about-logo {
  width: 64px; height: 64px; border-radius: 16px; margin: 0 auto 12px;
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 28px;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
}
.about-ver { color: var(--muted, #6b7280); font-size: 12px; margin-bottom: 8px; }
.about-tag { max-width: 360px; margin: 8px auto 16px; color: var(--muted, #6b7280); }
.about-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  padding: 16px; border: 1px solid var(--border, #e5e7eb); border-radius: 10px;
}
.about-grid > div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.about-grid b { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #6b7280); font-weight: 600; }
.about-grid span { font-weight: 700; }
.about-links { margin-top: 16px; display: flex; gap: 12px; justify-content: center; }
.about-links a { color: #2563eb; }
.about-legal { margin-top: 12px; font-size: 11px; color: var(--muted, #6b7280); }

/* Shortcuts table */
table.shortcuts { width: 100%; border-collapse: collapse; }
table.shortcuts td { padding: 8px 4px; border-bottom: 1px dashed var(--border, #eef1f5); }
table.shortcuts td.k { width: 180px; }

/* Context menu */
.ctx-menu {
  position: fixed; z-index: 250;
  min-width: 200px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(15,23,42,0.2);
  padding: 6px;
  animation: qPop .12s ease;
}
.ctx-menu .ctx-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px; align-items: center;
  width: 100%; text-align: left;
  padding: 7px 10px; border: 0; background: transparent;
  border-radius: 6px; font: inherit; color: inherit; cursor: pointer;
}
.ctx-menu .ctx-item:hover { background: rgba(59,130,246,0.08); }
.ctx-menu .ctx-item.danger { color: #b91c1c; }
.ctx-menu .ctx-item[disabled] { opacity: .5; cursor: not-allowed; }
.ctx-menu .ctx-sep { height: 1px; background: var(--border, #eef1f5); margin: 4px 4px; }
.ctx-menu .ctx-icon { width: 16px; text-align: center; }

/* Favorites */
.fav-star {
  background: transparent; border: 0; cursor: pointer;
  color: #94a3b8; font-size: 16px; padding: 2px 4px;
}
.fav-star.active { color: #f59e0b; }
.fav-star.sm { font-size: 13px; }
.nav-fav .fav-dot { color: #f59e0b; margin-right: 6px; }

/* Resource badge */
.rb {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: rgba(16,185,129,0.12); color: #047857;
}
.rb-mid { background: rgba(234,179,8,0.15); color: #a16207; }
.rb-hi  { background: rgba(239,68,68,0.14); color: #b91c1c; }
.rb-sep { opacity: .6; }

/* Welcome */
.welcome-overlay { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.welcome { max-width: 720px; padding: 0; overflow: hidden; }
.welcome-hero {
  padding: 40px 32px 20px; text-align: center;
  background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(139,92,246,0.1));
}
.welcome-logo {
  width: 72px; height: 72px; border-radius: 18px; margin: 0 auto 16px;
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 32px;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  box-shadow: 0 10px 30px rgba(59,130,246,0.35);
}
.welcome-hero h1 { margin: 0 0 6px; font-size: 28px; }
.welcome-hero p { margin: 0; color: var(--muted, #6b7280); }
.welcome-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  padding: 20px;
}
.welcome-card {
  padding: 16px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
}
.welcome-card h4 { margin: 6px 0 4px; }
.welcome-card p  { margin: 0; color: var(--muted, #6b7280); font-size: 13px; }
.welcome-card .w-ic { font-size: 22px; }
.welcome-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 20px 20px;
  border-top: 1px solid var(--border, #e5e7eb);
}

/* Toast enhancements */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 300; display: flex; flex-direction: column; gap: 8px; }
.toast.qt {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 10px; align-items: center;
  padding: 10px 12px;
  min-width: 260px; max-width: 420px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-left: 3px solid #3b82f6;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(15,23,42,0.14);
  animation: qSlideU .18s ease;
}
.toast.qt.success { border-left-color: #10b981; }
.toast.qt.error   { border-left-color: #ef4444; }
.toast.qt.warn    { border-left-color: #f59e0b; }
.toast.qt .toast-icon {
  width: 24px; height: 24px; border-radius: 999px;
  display: grid; place-items: center; font-weight: 700; color: #fff;
  background: #3b82f6;
}
.toast.qt.success .toast-icon { background: #10b981; }
.toast.qt.error   .toast-icon { background: #ef4444; }
.toast.qt.warn    .toast-icon { background: #f59e0b; }
.toast.qt .toast-title { font-weight: 700; }
.toast.qt .toast-msg   { color: var(--muted, #6b7280); font-size: 13px; }
.toast.qt .toast-action {
  border: 1px solid var(--border, #e5e7eb); background: transparent;
  padding: 4px 10px; border-radius: 6px; cursor: pointer; font: inherit;
}
.toast.qt .toast-close {
  border: 0; background: transparent; color: var(--muted, #6b7280);
  font-size: 18px; cursor: pointer; padding: 0 4px;
}

/* States */
.state-empty, .state-error, .state-loading {
  padding: 40px 20px; text-align: center; color: var(--muted, #6b7280);
}
.state-icon { font-size: 32px; margin-bottom: 8px; }
.state-title { font-weight: 700; color: var(--fg, #111827); margin-bottom: 4px; }
.state-msg { font-size: 13px; }
.state-action { margin-top: 12px; }
.state-error .state-icon { color: #ef4444; }
.spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid rgba(59,130,246,0.2);
  border-top-color: #3b82f6;
  animation: qSpin 0.8s linear infinite;
  margin: 0 auto 10px;
}

/* Skeleton */
.skeleton-list { padding: 8px; }
.skeleton-row {
  display: grid; grid-template-columns: 40px 1fr 80px;
  gap: 12px; align-items: center; padding: 12px 8px;
  border-bottom: 1px dashed var(--border, #eef1f5);
}
.sk {
  background: linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.12), rgba(0,0,0,0.06));
  background-size: 200% 100%;
  border-radius: 6px;
  animation: qShimmer 1.4s infinite linear;
}
.sk-avatar { width: 40px; height: 40px; border-radius: 999px; }
.sk-lines { display: flex; flex-direction: column; gap: 6px; }
.sk-line.lg { height: 12px; width: 60%; }
.sk-line.sm { height: 10px; width: 35%; }
.sk-pill { height: 20px; width: 80px; border-radius: 999px; }

/* Chips */
.chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--border, #e5e7eb);
  background: transparent; color: inherit;
  padding: 4px 10px; border-radius: 999px;
  font: inherit; font-size: 12px; cursor: pointer;
  text-transform: capitalize;
}
.chip.active { background: #3b82f6; color: #fff; border-color: #3b82f6; }

/* Events page */
.events-list { display: flex; flex-direction: column; }
.event-row {
  display: grid;
  grid-template-columns: 90px 90px 1fr 140px;
  gap: 12px; align-items: center;
  padding: 10px 8px;
  border-bottom: 1px dashed var(--border, #eef1f5);
  font-size: 13px;
}
.event-row .event-time { color: var(--muted, #6b7280); }
.event-row .event-kind {
  text-transform: uppercase; letter-spacing: 0.05em; font-size: 10px;
  font-weight: 700; color: #4b5563;
}
.event-row.lvl-warn  { background: rgba(234,179,8,0.06); }
.event-row.lvl-error { background: rgba(239,68,68,0.06); }
.event-source { color: var(--muted, #6b7280); text-align: right; }

/* Activity timeline */
.timeline { display: flex; flex-direction: column; gap: 24px; }
.tl-day-label {
  font-weight: 700; color: var(--muted, #6b7280); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px;
}
.tl-list { list-style: none; padding: 0; margin: 0; position: relative; padding-left: 24px; }
.tl-list::before {
  content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px;
  width: 2px; background: var(--border, #e5e7eb);
}
.tl-item { position: relative; padding: 8px 0 16px; }
.tl-dot {
  position: absolute; left: -20px; top: 12px;
  width: 12px; height: 12px; border-radius: 999px;
  background: #3b82f6; border: 2px solid var(--card, #fff);
  box-shadow: 0 0 0 2px #3b82f6;
}
.tl-dot.t-container { background: #3b82f6; box-shadow: 0 0 0 2px #3b82f6; }
.tl-dot.t-image     { background: #8b5cf6; box-shadow: 0 0 0 2px #8b5cf6; }
.tl-dot.t-volume    { background: #f59e0b; box-shadow: 0 0 0 2px #f59e0b; }
.tl-dot.t-network   { background: #0ea5e9; box-shadow: 0 0 0 2px #0ea5e9; }
.tl-body { padding-left: 6px; }
.tl-line b { color: var(--fg, #111827); }
.tl-target {
  display: inline-block; margin: 0 6px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted, #6b7280);
}
.tl-name { font-size: 13px; }
.tl-meta { color: var(--muted, #6b7280); font-size: 12px; margin-top: 2px; }

/* Animations */
@keyframes qFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes qPop  { from { opacity: 0; transform: scale(.97) } to { opacity: 1; transform: scale(1) } }
@keyframes qSlideR { from { transform: translateX(24px); opacity: 0 } to { transform: translateX(0); opacity: 1 } }
@keyframes qSlideU { from { transform: translateY(8px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
@keyframes qSpin { to { transform: rotate(360deg) } }
@keyframes qShimmer { from { background-position: 200% 0 } to { background-position: -200% 0 } }

/* Dark mode support for enhancements */
html.dark .cmdk, html.dark .drawer, html.dark .toast.qt,
html.dark .ctx-menu, html.dark .search-dd, html.dark kbd {
  background: #111827; color: #f3f4f6; border-color: #1f2937;
}
html.dark .search-dd .search-item { border-color: #1f2937; }
html.dark .cmdk-item.active { background: rgba(59,130,246,0.18); }


/* ---------- Responsive: tablet & mobile ---------- */
@media (max-width: 1024px) {
  :root { --sidebar-w: 200px; }
  .search { max-width: 320px; }
}
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: 260px;
    z-index: 60; transform: translateX(-100%);
    transition: transform .22s ease; box-shadow: 0 12px 40px rgba(0,0,0,.5);
  }
  .app.nav-open .sidebar { transform: translateX(0); }
  .app.nav-open::after {
    content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.5);
    z-index: 50; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  .topbar { padding: 0 10px; gap: 8px; }
  .search { max-width: none; flex: 1; }
  .topbar-right .pill span,
  .topbar-right .hide-sm { display: none; }
  main, .main, .content { padding: 12px !important; }
}
@media (max-width: 520px) {
  html, body { font-size: 13px; }
  .search input { font-size: 16px; } /* prevents iOS zoom */
  .topbar { height: 52px; }
  .card, .panel { border-radius: 10px; }
  table { font-size: 12px; }
  .hide-xs { display: none !important; }
}

/* Touch tap targets */
@media (hover: none) and (pointer: coarse) {
  .icon-btn { width: 40px; height: 40px; }
  .nav-item { padding: 12px 12px; }
  button, .btn { min-height: 40px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

.mobile-nav-toggle { display: none; }
@media (max-width: 820px) { .mobile-nav-toggle { display: inline-grid; } }

/* ================================================================
   Responsive fixes v2 — full device coverage
   ================================================================ */

/* Grid child must be allowed to shrink or tables push the layout wide */
.app, .main, .page, .page-header > div { min-width: 0; }
.main { min-width: 0; max-width: 100%; }

/* Tables scroll horizontally instead of clipping/overflowing the page */
.table-wrap { overflow: hidden; }
.table-wrap > table,
.table-wrap > .q-table-scroll { display: block; }
.table-wrap { position: relative; }
.q-table { min-width: 640px; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 640px; }

/* Header wraps cleanly on any width */
.page-header { flex-wrap: wrap; }
.page-header > div:first-child { flex: 1 1 260px; min-width: 0; }
.page-header h1 { word-break: break-word; }
.page-actions { flex-wrap: wrap; }

/* Cards / panels never exceed their column */
.card, .panel, .table-wrap { max-width: 100%; }
img, svg, canvas, video { max-width: 100%; }

/* Kbd hint inside search hides on narrow */
@media (max-width: 900px) {
  .topbar .search .kbd-hint { display: none; }
}

/* Tablet range: shrink sidebar, keep layout usable */
@media (max-width: 1100px) and (min-width: 821px) {
  :root { --sidebar-w: 200px; }
  .page-header, .page { padding-left: 18px; padding-right: 18px; }
}

/* Full mobile drawer mode — extended to 900px so mid-tablet portrait works */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr !important; grid-template-areas: "topbar" "main" !important; }
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100dvh; width: min(280px, 84vw);
    z-index: 60; transform: translateX(-100%);
    transition: transform .22s ease; box-shadow: 0 12px 40px rgba(0,0,0,.5);
  }
  .app.nav-open .sidebar { transform: translateX(0); }
  .app.nav-open::after {
    content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.5);
    z-index: 50; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  .topbar { padding: 0 10px; gap: 6px; }
  .topbar .search { max-width: none; flex: 1; min-width: 0; }
  .topbar-right { gap: 4px; }
  .topbar-right .pill { padding: 4px 8px; font-size: 11px; }
  .topbar-right .pill span:not(.dot) { display: none; }
  .topbar-right .pill::after { content: "Online"; }
  .page-header { padding: 16px 14px 12px; gap: 10px; }
  .page-header h1 { font-size: 20px; }
  .page { padding: 14px; }
  .mobile-nav-toggle { display: inline-grid; }
  /* Hide the desktop collapse-only trigger duplicate */
  #sb-collapse { display: none; }
}

@media (max-width: 560px) {
  html, body { font-size: 13px; }
  .search input, input, select, textarea { font-size: 16px; } /* prevents iOS zoom */
  .topbar { height: 52px; }
  .page-header h1 { font-size: 18px; }
  .page-actions .btn { flex: 1 1 auto; justify-content: center; }
  .card, .panel { border-radius: 10px; }
  .q-table th, .q-table td { padding: 8px 10px; font-size: 12px; }
  .breadcrumbs { font-size: 11px; }
  .avatar { width: 30px; height: 30px; font-size: 11px; }
  .kv-row { grid-template-columns: 1fr; }
  .event-row { grid-template-columns: 80px 70px 1fr; }
  .event-row .event-source { display: none; }
  .terminal, .logs { height: 60vh; font-size: 12px; }
  .modal .modal-body { padding: 14px; }
  .cmdk { width: 94vw; }
  .drawer { width: 92vw; }
  .qterm-tabs .qterm-tablist { max-width: 100%; }
}

/* Prevent horizontal page scroll from any stray wide child */
html, body { max-width: 100%; overflow-x: hidden; }

/* Touch tap targets */
@media (hover: none) and (pointer: coarse) {
  .icon-btn { width: 40px; height: 40px; }
  .nav-item { padding: 12px 12px; }
  button, .btn, a.btn { min-height: 40px; }
}

/* Avoid duplicated hamburger on mobile (topbar ships its own #tb-menu) */
@media (max-width: 900px) {
  #tb-menu { display: none; }
}

/* ================================================================
   Professional Desktop UI Normalization (v3)
   Enforces rectangular components with subtle rounded corners.
   - Buttons / inputs / small controls: 8px
   - Cards / panels / dropdowns: 12px
   - Modals / drawers: 14px
   - Removes circular & pill shapes from interactive & informational
     surfaces (avatars, status pills, badges, chips, toggles, tabs).
   Colors, typography, icons, shadows, spacing and animations are
   inherited from the tokens above and intentionally NOT changed.
   ================================================================ */
:root {
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 14px;
}

/* --- Buttons: rectangular, 8px --- */
.btn,
.btn.sm,
.btn.xs,
.btn.primary,
.btn.ghost,
.btn.danger,
.qterm-btn,
.toast.qt .toast-action,
.state-action .btn { border-radius: 8px !important; }

/* --- Icon buttons: soft square, not circle --- */
.icon-btn,
.qterm-tab-add,
.qterm-tab .close,
.fav-star,
.toast.qt .toast-close { border-radius: 8px !important; }

/* --- Inputs, selects, textareas, search --- */
.input,
select.input,
textarea.input,
.search input,
.table-toolbar select,
.terminal-input,
.cmdk-input input { border-radius: 8px !important; }
.terminal { border-radius: 8px; }
.terminal-input { border-radius: 0 0 8px 8px; }

/* --- Cards, tables, panels, dropdowns, menus --- */
.card,
.table-wrap,
.qterm,
.q-panel,
.q-ctx-menu,
.ctx-menu,
.search-dd,
.welcome-card,
.q-layer,
.drawer,
.notif,
.about-grid { border-radius: 12px !important; }

/* Small utility surfaces */
.badge,
.pill,
.qterm-status,
.rb,
.kind-badge,
.chip,
.q-step,
.sk-pill,
.notif-badge { border-radius: 6px !important; }

/* Rounded-square avatar instead of circle */
.avatar,
.sk-avatar { border-radius: 8px !important; }

/* Dots stay circular — they're status indicators, not buttons */
.pill .dot,
.badge .dot,
.qterm-status .dot,
.qterm-tab .dot,
.sidebar-footer .engine .dot,
.notif-dot,
.tl-dot,
.q-step-n { border-radius: 50% !important; }

/* --- Tabs: rectangular tab affordance --- */
.qterm-tab { border-radius: 8px 8px 0 0; }
.tab { border-radius: 6px 6px 0 0; }

/* --- Modals & command palette --- */
.modal { border-radius: 14px !important; }
.modal.wide { border-radius: 16px !important; }
.cmdk { border-radius: 14px !important; }
.welcome { border-radius: 16px !important; }
.about-logo,
.welcome-logo { border-radius: 12px !important; }

/* --- Toasts --- */
.toast,
.toast.qt { border-radius: 10px !important; }

/* --- Skeleton tokens --- */
.skeleton, .sk, .sk-line { border-radius: 6px !important; }

/* --- Sidebar nav items: subtle square affordance --- */
.nav-item { border-radius: 8px !important; }
.app.collapsed .nav-item { border-radius: 8px !important; }

/* --- Toast icon: keep small square badge, not circle --- */
.toast.qt .toast-icon { border-radius: 6px !important; }

/* --- Context menu items & rows --- */
.q-ctx-item,
.ctx-menu .ctx-item,
.qterm-menu button,
.search-dd .search-item { border-radius: 6px; }

/* --- Cards on narrow screens keep the 12px scale --- */
@media (max-width: 560px) {
  .card, .panel { border-radius: 12px !important; }
}

/* ================================================================
   Design System Consistency Pass (v4)
   Re-maps the "enhancements" surfaces (command palette, drawers,
   toasts, notifications, welcome, context menus, timeline, chips,
   about, states, skeletons, kind badges) onto the Quents dark
   tokens. No layout, spacing, typography or animation changes.
   ================================================================ */

/* Command palette */
.cmdk-overlay { background: rgba(6,12,22,.55); }
.cmdk {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: 0 32px 80px rgba(0,0,0,.55);
  color: var(--text);
}
.cmdk-input { border-bottom: 1px solid var(--border); }
.cmdk-input input { color: var(--text); }
.cmdk-icon { color: var(--muted); }
.cmdk-header { color: var(--muted); }
.cmdk-item.active { background: var(--accent-glow); }
.cmdk-item .cmdk-sub { color: var(--muted); }
.cmdk-footer { border-top: 1px solid var(--border); color: var(--muted); }

/* Notifications drawer */
.drawer-overlay { background: rgba(6,12,22,.55); }
.drawer {
  background: var(--surface);
  border-left: 1px solid var(--border);
  color: var(--text);
}
.drawer-header { border-bottom: 1px solid var(--border); }
.notif:hover { background: rgba(255,255,255,0.03); }
.notif.unread { background: var(--accent-glow); }
.notif-dot { background: var(--muted); }
.notif.lvl-info    .notif-dot { background: var(--info); }
.notif.lvl-warn    .notif-dot { background: var(--warning); }
.notif.lvl-error   .notif-dot { background: var(--danger); }
.notif.lvl-success .notif-dot { background: var(--success); }
.notif-title { color: var(--text); }
.notif-msg, .notif-time { color: var(--muted); }

/* Context menu (legacy .ctx-menu) */
.ctx-menu {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
  color: var(--text);
}
.ctx-menu .ctx-item { color: var(--text-2); }
.ctx-menu .ctx-item:hover { background: var(--surface-2); color: var(--text); }
.ctx-menu .ctx-item.danger { color: var(--danger); }
.ctx-menu .ctx-sep { background: var(--border); }

/* Kind badges */
.kind-badge         { background: rgba(155,122,232,.14); color: var(--purple); }
.kind-badge.primary { background: var(--accent-glow);    color: var(--brand); }
.kind-badge.accent  { background: rgba(155,122,232,.14); color: var(--purple); }
.kind-badge.warn    { background: rgba(245,158,11,.15);  color: var(--warning); }
.kind-badge.info    { background: rgba(74,158,232,.14);  color: var(--info); }
.kind-badge.muted   { background: var(--surface-2);       color: var(--muted); }

/* Toasts */
.toast.qt {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--info);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  color: var(--text);
}
.toast.qt.success { border-left-color: var(--success); }
.toast.qt.error   { border-left-color: var(--danger); }
.toast.qt.warn    { border-left-color: var(--warning); }
.toast.qt .toast-icon         { background: var(--info); color: #0B0F14; }
.toast.qt.success .toast-icon { background: var(--success); color: #0B0F14; }
.toast.qt.error   .toast-icon { background: var(--danger); color: #0B0F14; }
.toast.qt.warn    .toast-icon { background: var(--warning); color: #0B0F14; }
.toast.qt .toast-msg { color: var(--muted); }
.toast.qt .toast-action {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-2);
}
.toast.qt .toast-action:hover { background: var(--surface-2); color: var(--text); }
.toast.qt .toast-close { color: var(--muted); }

/* Welcome */
.welcome-hero {
  background: linear-gradient(135deg, var(--accent-glow), rgba(155,122,232,.10));
}
.welcome-logo {
  background: linear-gradient(135deg, var(--brand), var(--brand-600));
  color: #1a1108;
  box-shadow: 0 10px 30px rgba(232,149,74,.30);
}
.welcome-hero p { color: var(--muted); }
.welcome-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
}
.welcome-card p { color: var(--muted); }
.welcome-actions { border-top: 1px solid var(--border); }

/* About */
.about-logo {
  background: linear-gradient(135deg, var(--brand), var(--brand-600));
  color: #1a1108;
}
.about-ver, .about-tag, .about-legal { color: var(--muted); }
.about-grid { border: 1px solid var(--border); background: var(--bg-2); }
.about-grid b { color: var(--muted); }
.about-links a { color: var(--brand); }

/* Shortcuts table */
table.shortcuts td { border-bottom: 1px dashed var(--border); }

/* Chips */
.chip { border: 1px solid var(--border); color: var(--text-2); }
.chip:hover { background: var(--surface-2); color: var(--text); }
.chip.active { background: var(--brand); border-color: var(--brand); color: #1a1108; }

/* Events */
.event-row { border-bottom: 1px dashed var(--border); color: var(--text); }
.event-row .event-time,
.event-row .event-source { color: var(--muted); }
.event-row .event-kind { color: var(--text-2); }
.event-row.lvl-warn  { background: rgba(245,158,11,.06); }
.event-row.lvl-error { background: rgba(239,68,68,.06); }

/* Activity timeline */
.tl-day-label { color: var(--muted); }
.tl-list::before { background: var(--border); }
.tl-dot { border: 2px solid var(--surface); }
.tl-dot.t-container { background: var(--info);    box-shadow: 0 0 0 2px var(--info); }
.tl-dot.t-image     { background: var(--purple);  box-shadow: 0 0 0 2px var(--purple); }
.tl-dot.t-volume    { background: var(--warning); box-shadow: 0 0 0 2px var(--warning); }
.tl-dot.t-network   { background: var(--info);    box-shadow: 0 0 0 2px var(--info); }
.tl-line b { color: var(--text); }
.tl-target, .tl-meta { color: var(--muted); }

/* Skeletons on dark */
.sk {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.10),
    rgba(255,255,255,0.04));
  background-size: 200% 100%;
}
.skeleton-row { border-bottom: 1px dashed var(--border); }

/* State placeholders */
.state-empty, .state-error, .state-loading { color: var(--muted); }
.state-title { color: var(--text); }
.state-error .state-icon { color: var(--danger); }
.spinner {
  border: 3px solid rgba(232,149,74,.18);
  border-top-color: var(--brand);
}

/* Search dropdown */
.search-dd {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
  color: var(--text);
}
.search-dd .search-item { border-bottom: 1px solid var(--border); color: var(--text); }
.search-dd .search-item:hover,
.search-dd .search-item:focus { background: var(--surface-2); }
.search-dd .s-sub, .search-dd .search-empty { color: var(--muted); }

/* KBD */
kbd, .topbar .search .kbd-hint kbd {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--muted);
}

/* Favorites */
.fav-star { color: var(--muted); }
.fav-star.active { color: var(--warning); }

/* Native context menu (dark) */
.q-ctx-menu { background: var(--surface); border: 1px solid var(--border-strong); }

/* Notification badge */
.notif-badge { background: var(--danger); color: #fff; }

/* Ensure any dark-mode overrides don't undo the dark defaults */
html.dark .cmdk, html.dark .drawer, html.dark .toast.qt,
html.dark .ctx-menu, html.dark .search-dd, html.dark kbd {
  background: var(--surface); color: var(--text); border-color: var(--border-strong);
}

/* Consistent focus ring across every interactive control */
.btn:focus-visible,
.icon-btn:focus-visible,
.input:focus-visible,
.search input:focus-visible,
.nav-item:focus-visible,
.chip:focus-visible,
.tab:focus-visible,
.qterm-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ---------- Fix: image inspect panel — prevent build-history clipping ---------- */
.q-panel.wide { width: min(760px, 100vw); }
.q-panel-body .card { overflow-x: auto; }
.q-panel-body .q-table { width: 100%; table-layout: auto; }
.q-panel-body .q-table th,
.q-panel-body .q-table td { white-space: nowrap; }
.q-panel-body .q-table td.mono:nth-child(2) { white-space: normal; word-break: break-word; }

/* ---------- User menu / context menu items (added) ---------- */
.context-menu {
  background: var(--bg-1, #121417);
  border: 1px solid var(--border, #22262c);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  padding: 6px;
  display: flex; flex-direction: column;
}
.context-menu .cm-item {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0; color: var(--text);
  padding: 8px 10px; border-radius: 6px; font-size: 13px; cursor: pointer;
}
.context-menu .cm-item:hover { background: var(--bg-2, #1a1d22); }
.context-menu .cm-item.danger { color: var(--danger, #ef4444); }
.context-menu .cm-sep { height: 1px; background: var(--border, #22262c); margin: 6px 4px; }

/* =============================================================
   Quents unified radius system — rectangular desktop app style
   Buttons/Inputs/Dropdowns/Tabs: 8px · Cards/Tables: 12px · Modals: 16px
   Colors, typography, spacing, shadows, icons, layout unchanged.
   ============================================================= */
:root {
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 8px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 12px;
}

/* Buttons — never pill/circular */
.btn, .btn.sm, .btn.xs,
.qterm-btn, .icon-btn,
button.btn, .state-action .btn,
.toast .toast-close, .toast.qt .toast-close,
.notif-item button, .cmdk button {
  border-radius: 8px !important;
}

/* Inputs / search / selects / textareas / dropdowns */
.input, select.input, textarea.input,
input.input, .search input, .search-input,
select, .table-toolbar select,
.cmdk-input input, .qterm-menu, .search-dd,
.dropdown, .menu, .context-menu, .popover {
  border-radius: 8px !important;
}

/* Items inside menus/dropdowns keep a subtle inner radius */
.qterm-menu button, .search-dd .search-item,
.menu .menu-item, .context-menu .item, .dropdown .item {
  border-radius: 6px !important;
}

/* Tabs — no fully-rounded tabs */
.tab, .qterm-tab, .tabs .tab, [role="tab"] {
  border-radius: 8px 8px 0 0 !important;
}

/* Cards / panels / tables */
.card, .panel, .table-wrap, .about-grid,
.notif-panel, .welcome, .empty-state, .stat-card {
  border-radius: 12px !important;
}

/* Modals / dialogs / command palette */
.modal, .modal.wide, .dialog, .cmdk {
  border-radius: 16px !important;
}

/* Terminal / logs surfaces */
.qterm, .terminal, .logs {
  border-radius: 12px !important;
}
.qterm-standalone { border-radius: 0 !important; }
.terminal-input { border-radius: 0 0 12px 12px !important; }

/* Toasts / notifications */
.toast, .toast.qt, .notif-item, .notification {
  border-radius: 8px !important;
}

/* Kill pill / capsule shapes on interactive elements — keep dots & avatars circular */
.pill, .qterm-status, .badge,
.tag, .chip, .filter-chip {
  border-radius: 6px !important;
  height: auto;
}

/* Skeletons */
.skeleton, .sk, .sk-line, .sk-pill, .sk-avatar {
  border-radius: 6px !important;
}
.sk-avatar { border-radius: 8px !important; }

/* Sidebar nav */
.nav-item, .app.collapsed .nav-item { border-radius: 8px !important; }

/* Small decorative logo tiles */
.sidebar .brand .logo, .term-window-title .logo,
.welcome-logo, .icon-square { border-radius: 8px !important; }

/* Responsive overrides keep the same system */
@media (max-width: 900px) {
  .card, .panel, .table-wrap { border-radius: 12px !important; }
  .modal, .cmdk { border-radius: 16px !important; }
}

/* Containers page — refresh button spin state */
.btn.spin svg { animation: q-spin 0.8s linear infinite; }
@keyframes q-spin { to { transform: rotate(360deg); } }

/* ===== VPS module additions ===== */
.avatar.sm { width: 32px; height: 32px; font-size: 12px; }
.avatar.lg { width: 48px; height: 48px; font-size: 16px; }

.side-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(440px, 92vw);
  background: var(--surface, #14171c);
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 40px rgba(0,0,0,0.35);
  z-index: 240;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .22s ease;
}
.side-panel.open { transform: translateX(0); }
.side-panel-header { padding: 16px 18px; border-bottom: 1px solid var(--border); }
.side-panel-body { padding: 18px; overflow-y: auto; flex: 1; }

/* ===== Terminal upgrade v2 ===== */
.qterm { position: relative; }
.qterm-resize { position: absolute; top: -3px; left: 0; right: 0; height: 6px; cursor: ns-resize; z-index: 5; }
.qterm-resize:hover { background: linear-gradient(180deg, transparent, rgba(120,144,196,.35)); }

.qterm-tab .qterm-tab-icon { display: inline-grid; place-items: center; width: 14px; height: 14px; color: var(--muted); }
.qterm-tab .qterm-tab-icon svg { width: 12px; height: 12px; }
.qterm-tab[data-state="connected"] .dot { background: var(--success); }
.qterm-tab[data-state="connecting"] .dot { background: var(--warning); animation: qterm-pulse 1.2s ease-in-out infinite; }
.qterm-tab[data-state="error"] .dot { background: var(--danger); }
.qterm-tab[data-state="closed"] .dot { background: var(--muted); }

.qterm-session-meta { flex: 1; text-align: center; font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: .02em; }

.qterm-menu-hdr { padding: 6px 10px 4px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.qterm-menu button { justify-content: flex-start; }
.qterm-menu-hint { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--muted); }

/* Session header (in-panel) */
.qterm-session-hdr { display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 12px; background: var(--bg); border-bottom: 1px solid var(--border); font-size: 12px; }
.qterm-panel.active .qterm-session-hdr { display: flex; }
.qterm-session-crumb { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qterm-session-chip { padding: 2px 8px; border: 1px solid var(--border); border-radius: 6px; color: var(--text-2); background: var(--surface); font-size: 11px; }
.qterm-session-sep { color: var(--muted); }
.qterm-session-container { color: var(--text); font-weight: 600; }
.qterm-session-badge { padding: 1px 8px; border-radius: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; background: rgba(34,197,94,.14); color: #4ade80; border: 1px solid rgba(34,197,94,.35); }
.qterm-session-badge.paused { background: rgba(245,158,11,.14); color: #fbbf24; border-color: rgba(245,158,11,.35); }
.qterm-session-badge.stopped, .qterm-session-badge.exited { background: rgba(148,163,184,.14); color: #cbd5e1; border-color: rgba(148,163,184,.35); }
.qterm-session-shell { color: var(--muted); font-size: 11px; }
.qterm-session-info { font-size: 11px; }

/* Search bar */
.qterm-search { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--surface); border-bottom: 1px solid var(--border); }
.qterm-search[hidden] { display: none; }
.qterm-search svg { width: 12px; height: 12px; color: var(--muted); }
.qterm-search input { flex: 1; height: 26px; background: var(--bg-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 0 10px; font-family: var(--font-mono); font-size: 12px; outline: none; }
.qterm-search input:focus { border-color: var(--brand); }
.qterm-search-count { min-width: 24px; text-align: center; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.qterm-search-btn { display: inline-grid; place-items: center; width: 24px; height: 24px; background: transparent; border: 1px solid transparent; color: var(--muted); border-radius: 4px; cursor: pointer; font-size: 12px; }
.qterm-search-btn:hover { color: var(--text); background: var(--surface-2); border-color: var(--border); }
.qterm-search-btn svg { width: 10px; height: 10px; }
.qterm-line.match { background: rgba(245,158,11,.10); }
.qterm-line.current { background: rgba(245,158,11,.22); outline: 1px solid rgba(245,158,11,.6); }

/* Prompt & caret polish */
.qterm-prompt .p-user { color: #4ade80; }
.qterm-prompt .p-at { color: var(--muted); }
.qterm-prompt .p-host { color: #60a5fa; }
.qterm-prompt .p-sep { color: var(--muted); }
.qterm-prompt .p-path { color: #fbbf24; }
.qterm-prompt .p-sigil { color: var(--muted); margin-right: 6px; }
.qterm-lineprompt .p-user, .qterm-lineprompt .p-host, .qterm-lineprompt .p-path,
.qterm-lineprompt .p-sep, .qterm-lineprompt .p-at, .qterm-lineprompt .p-sigil { font-family: var(--font-mono); }
.qterm-linecmd { color: var(--text); font-family: var(--font-mono); }
.qterm-caret { display: inline-block; color: #4ade80; animation: qterm-blink 1s steps(1) infinite; margin-left: 2px; }
.qterm-panel:not(.active) .qterm-caret { display: none; }
@keyframes qterm-blink { 50% { opacity: 0; } }

/* Line coloring */
.qterm-line-sys { color: var(--muted); }
.qterm-line-err { color: #f87171; }
.qterm-line-out { color: var(--text-2); }
.qterm-line-cmd { color: var(--text); }

/* Container picker */
.qterm-picker-overlay { position: fixed; inset: 0; background: rgba(2,6,23,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: center; z-index: 200; padding: 24px; }
.qterm-picker { width: min(560px, 96vw); max-height: min(70vh, 620px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; }
.qterm-picker-hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.qterm-picker-title { font-size: 14px; font-weight: 600; color: var(--text); }
.qterm-picker-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.qterm-picker-close { background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 6px; }
.qterm-picker-close:hover { background: var(--surface-2); color: var(--text); }
.qterm-picker-close svg { width: 14px; height: 14px; }
.qterm-picker-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.qterm-picker-search svg { width: 14px; height: 14px; color: var(--muted); }
.qterm-picker-search input { flex: 1; background: var(--bg-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13px; outline: none; }
.qterm-picker-search input:focus { border-color: var(--brand); }
.qterm-picker-list { flex: 1; overflow-y: auto; padding: 6px; }
.qterm-picker-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--text); cursor: pointer; font-family: var(--font-sans); }
.qterm-picker-item:hover { background: var(--surface-2); border-color: var(--border); }
.qterm-picker-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.qterm-picker-dot.running { background: var(--success); box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.qterm-picker-dot.paused { background: var(--warning); }
.qterm-picker-dot.stopped, .qterm-picker-dot.exited { background: var(--muted); }
.qterm-picker-body { flex: 1; }
.qterm-picker-name { font-size: 13px; font-weight: 600; }
.qterm-picker-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.qterm-picker-shell select { background: var(--bg-2); color: var(--text-2); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-family: var(--font-mono); font-size: 11px; }
.qterm-picker-empty { padding: 24px; text-align: center; color: var(--muted); font-size: 13px; }
.qterm-picker-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--border); background: var(--bg); }

/* Standalone terminal workspace fills the page */
.qterm-workspace { display: flex; flex-direction: column; height: calc(100vh - 220px); min-height: 480px; }
.qterm-workspace .qterm { height: 100%; }

/* -------- Quents v1 additions -------- */
.mt-8 { margin-top: 8px; }
.avatar.lg { width: 56px; height: 56px; font-size: 20px; border-radius: 12px; }
.progress { position: relative; height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-600, var(--brand))); border-radius: 999px; }
.badge.danger { background: rgba(239,68,68,.15); color: var(--danger, #f87171); border-color: rgba(239,68,68,.3); }