@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

[x-cloak] { display: none !important; }

:root {
    --color-space-950: #0a0a0f;
    --color-space-900: #0f0f1a;
    --color-space-850: #151522;
    --color-space-800: #1a1a28;
    --color-space-700: #252538;
    --color-space-border: #2a2a3e;
    --color-neon-purple: #a855f7;
    --color-neon-cyan: #22d3ee;
    --color-neon-green: #22c55e;
    --color-neon-yellow: #eab308;
    --color-text-dim: #9ca3af;
    --color-surface-glow: rgba(34, 211, 238, 0.06);
    --control-bg: rgba(255, 255, 255, 0.04);
    --control-bg-hover: rgba(255, 255, 255, 0.08);
    --control-border: rgba(148, 163, 184, 0.14);
    --control-border-hover: rgba(148, 163, 184, 0.24);
    --control-text: #94a3b8;
    --control-text-strong: #f8fafc;
    --control-shadow: 0 12px 28px rgba(2, 6, 23, 0.18);
    --field-bg: rgba(255, 255, 255, 0.06);
    --field-bg-hover: rgba(255, 255, 255, 0.08);
    --field-border: rgba(148, 163, 184, 0.2);
    --field-border-focus: rgba(34, 211, 238, 0.42);
    --field-placeholder: #64748b;
    --field-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 0 3px rgba(34, 211, 238, 0.08);
}

html.light {
    --color-space-950: #f5f7fa;
    --color-space-900: #edf0f5;
    --color-space-850: #e4e8ee;
    --color-space-800: #dde1e8;
    --color-space-700: #cdd3dc;
    --color-space-border: #c5cbd6;
    --color-neon-purple: #7c3aed;
    --color-neon-cyan: #0891b2;
    --color-neon-green: #16a34a;
    --color-neon-yellow: #ca8a04;
    --color-text-dim: #64748b;
    --color-surface-glow: rgba(14, 165, 233, 0.06);
    --control-bg: rgba(255, 255, 255, 0.78);
    --control-bg-hover: rgba(255, 255, 255, 0.96);
    --control-border: rgba(197, 203, 214, 0.85);
    --control-border-hover: rgba(148, 163, 184, 0.88);
    --control-text: #475569;
    --control-text-strong: #0f172a;
    --control-shadow: 0 12px 24px rgba(148, 163, 184, 0.14);
    --field-bg: rgba(255, 255, 255, 0.94);
    --field-bg-hover: rgba(255, 255, 255, 1);
    --field-border: rgba(197, 203, 214, 0.88);
    --field-border-focus: rgba(14, 165, 233, 0.42);
    --field-placeholder: #64748b;
    --field-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 0 0 3px rgba(14, 165, 233, 0.08);
}

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

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background:
        radial-gradient(circle at 20% -10%, rgba(34, 211, 238, 0.08), transparent 35%),
        radial-gradient(circle at 80% -20%, rgba(168, 85, 247, 0.1), transparent 40%),
        var(--color-space-950);
    color: #e5e7eb;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.015), transparent 20%);
}

html.light body {
    background:
        radial-gradient(circle at 20% -10%, rgba(14, 165, 233, 0.06), transparent 35%),
        radial-gradient(circle at 80% -20%, rgba(124, 58, 237, 0.06), transparent 40%),
        var(--color-space-950);
    color: #1e293b;
}

html.light body::before {
    background: none;
}

html.light .text-white { color: #0f172a; }
html.light .text-gray-200 { color: #1e293b; }
html.light .text-gray-300 { color: #334155; }
html.light .text-gray-400 { color: #475569; }
html.light .text-gray-500 { color: #64748b; }
html.light .text-gray-600 { color: #475569; }

html.light .text-red-400 { color: #dc2626; }
html.light .text-red-300 { color: #ef4444; }
html.light .text-blue-400 { color: #2563eb; }
html.light .text-yellow-400 { color: #ca8a04; }
html.light .text-cyan-400 { color: #0891b2; }
html.light .text-green-400 { color: #16a34a; }
html.light .text-purple-400 { color: #7c3aed; }

html.light .view-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.85));
    border-color: rgba(197, 203, 214, 0.68);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84), 0 12px 28px rgba(148, 163, 184, 0.1);
}

html.light .mcp-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.88));
    border-color: rgba(197, 203, 214, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 12px 28px rgba(148, 163, 184, 0.1);
}

html.light .mcp-stat,
html.light .mcp-count-chip,
html.light .mcp-tabs,
html.light .mcp-transport-option,
html.light .mcp-capability-item,
html.light .mcp-resource-item {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(197, 203, 214, 0.72);
}

html.light .mcp-title-row h1,
html.light .mcp-server-name,
html.light .mcp-transport-option strong,
html.light .mcp-resource-item strong,
html.light .mcp-capability-item summary {
    color: #0f172a;
}

html.light .mcp-stat strong,
html.light .mcp-panel-head h2 {
    color: #1e293b;
}

html.light .mcp-server-row:hover {
    background: rgba(240, 249, 255, 0.82);
}

html.light .mcp-server-row.is-selected,
html.light .mcp-transport-option.is-selected {
    background: rgba(224, 242, 254, 0.88);
    border-color: rgba(14, 165, 233, 0.5);
}

html.light .mcp-tabs button.is-selected {
    background: rgba(226, 232, 240, 0.92);
    color: #0f172a;
}

html.light .nav-item {
    color: #64748b;
    background: rgba(255, 255, 255, 0.62);
    border-color: rgba(197, 203, 214, 0.62);
}
html.light .nav-item.active {
    background: linear-gradient(135deg, rgba(186, 230, 253, 0.95), rgba(224, 242, 254, 0.92));
    border-color: rgba(125, 211, 252, 0.72);
    box-shadow: 0 10px 22px rgba(148, 163, 184, 0.12);
    color: #0f172a;
}
html.light .nav-item:hover:not(.active) { background: rgba(240, 249, 255, 0.9); color: #0f172a; }
html.light .nav-item:hover:not(.active) { border-color: rgba(125, 211, 252, 0.46); }

html.light .btn { color: #475569; }
html.light .btn-ghost { color: #475569; }
html.light .btn-ghost:hover { background: rgba(0, 0, 0, 0.05); color: #0f172a; }
html.light .btn-outline { border-color: rgba(197, 203, 214, 0.8); color: #475569; }
html.light .btn-outline:hover { background: rgba(0, 0, 0, 0.04); color: #0f172a; border-color: rgba(197, 203, 214, 1); }

html.light .input { background: #fff; border-color: var(--color-space-border); color: #0f172a; }
html.light .input-search-sm { background: #fff; border-color: var(--color-space-border); color: #0f172a; }
html.light select { background: #fff; border-color: var(--color-space-border); color: #0f172a; }

html.light .modal-box { background: #f1f5f9; border-color: var(--color-space-border); color: #1e293b; }
html.light dialog::backdrop { background: rgba(0, 0, 0, 0.3); }

html.light .alert-info { background: rgba(14, 165, 233, 0.08); border-color: rgba(14, 165, 233, 0.2); }
html.light .alert-success { background: rgba(22, 163, 74, 0.08); border-color: rgba(22, 163, 74, 0.2); }
html.light .alert-error { background: rgba(220, 38, 38, 0.08); border-color: rgba(220, 38, 38, 0.2); }
html.light .alert-warning { background: rgba(202, 138, 4, 0.08); border-color: rgba(202, 138, 4, 0.2); }

html.light table tr:hover { background: rgba(14, 165, 233, 0.04); }
html.light table .btn-outline { background: transparent; border-color: rgba(197, 203, 214, 0.8); color: #475569; }
html.light table .btn-outline:hover { background: rgba(0, 0, 0, 0.04); color: #0f172a; }

html.light .bg-space-900\/90 { background-color: rgba(237, 240, 245, 0.95); }
html.light .bg-space-800\/50 { background-color: rgba(221, 225, 232, 0.5); }
html.light .bg-space-800\/80 { background-color: rgba(221, 225, 232, 0.8); }
html.light .bg-space-900\/40 { background-color: rgba(237, 240, 245, 0.4); }
html.light .bg-space-900\/50 { background-color: rgba(237, 240, 245, 0.5); }
html.light .bg-space-900\/60 { background-color: rgba(237, 240, 245, 0.6); }
html.light .bg-space-900\/20 { background-color: rgba(237, 240, 245, 0.2); }
html.light .bg-white\/5 { background-color: rgba(0, 0, 0, 0.03); }
html.light .bg-white\/10 { background-color: rgba(0, 0, 0, 0.05); }
html.light .bg-black\/50 { background-color: rgba(0, 0, 0, 0.3); }
html.light .bg-black\/70 { background-color: rgba(0, 0, 0, 0.4); }
html.light .hover\:bg-white\/5:hover { background-color: rgba(0, 0, 0, 0.04); }
html.light .hover\:bg-white\/10:hover { background-color: rgba(0, 0, 0, 0.06); }
html.light .hover\:text-white:hover { color: #0f172a; }

html.light .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(197, 203, 214, 0.6); }
html.light .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(197, 203, 214, 0.9); }

html.light .bg-gray-700 { background-color: rgba(203, 213, 225, 0.9); }

html.light .group:hover .group-hover\:text-white { color: #0f172a; }
html.light .group:hover .group-hover\:text-cyan-400 { color: #0891b2; }
html.light .group:hover .group-hover\:text-green-400 { color: #16a34a; }
html.light .group:hover .group-hover\:text-red-400 { color: #dc2626; }
html.light .group:hover .group-hover\:text-yellow-400 { color: #ca8a04; }
html.light .group:hover .group-hover\:text-purple-400 { color: #7c3aed; }

html.light .sidebar {
    background:
        linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.96)),
        radial-gradient(circle at top left, rgba(14, 165, 233, 0.08), transparent 34%);
    border-right-color: rgba(197, 203, 214, 0.75);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.75);
}

html.light .sidebar-group {
    border-top-color: rgba(197, 203, 214, 0.7);
}

html.light .sidebar-section-title,
html.light .sidebar-section-toggle,
html.light .sidebar-section-chevron,
html.light .sidebar-footer-link {
    color: #64748b;
}

html.light .sidebar-section-toggle:hover,
html.light .sidebar-footer-link:hover {
    color: #0f172a;
}

html.light .sidebar-section-toggle:hover {
    background: rgba(226, 232, 240, 0.92);
}

html.light .sidebar-collapse-btn {
    color: #475569;
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(197, 203, 214, 0.9);
}

html.light .sidebar-collapse-btn:hover {
    background: #fff;
    border-color: rgba(148, 163, 184, 0.8);
}

html.light .sidebar-footer {
    border-top-color: rgba(197, 203, 214, 0.75);
}

html.light .sidebar-footer-link {
    background: rgba(255, 255, 255, 0.62);
    border-color: rgba(197, 203, 214, 0.62);
}

html.light .app-topbar {
    background:
        linear-gradient(180deg, rgba(248, 250, 252, 0.9), rgba(241, 245, 249, 0.86)),
        radial-gradient(circle at top left, rgba(14, 165, 233, 0.06), transparent 32%);
    border-bottom-color: rgba(197, 203, 214, 0.75);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.7);
}

html.light .topbar-brand-copy,
html.light .topbar-meta,
html.light .topbar-divider {
    color: #64748b;
}

html.light .topbar-icon-button,
html.light .topbar-menu-button {
    color: #475569;
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(197, 203, 214, 0.85);
}

html.light .topbar-icon-button:hover,
html.light .topbar-menu-button:hover {
    color: #0f172a;
    background: #fff;
}

html.light .topbar-chip-group {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(197, 203, 214, 0.85);
}

html.light .topbar-meta-link {
    color: #7c3aed;
}

html.light .dashboard-hero {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.88)),
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.08), transparent 34%);
    border-color: rgba(197, 203, 214, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 18px 34px rgba(148, 163, 184, 0.12);
}

html.light .dashboard-hero-title {
    color: #0f172a;
}

html.light .dashboard-hero-subtitle,
html.light .dashboard-hero-eyebrow,
html.light .dashboard-hero-version,
html.light .dashboard-hero-status-label,
html.light .dashboard-hero-status-time,
html.light .dashboard-hero-status-dot {
    color: #64748b;
}

html.light .dashboard-hero-status {
    background: rgba(255, 255, 255, 0.76);
    border-color: rgba(197, 203, 214, 0.8);
}

html.light .dashboard-section-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.88));
    border-color: rgba(197, 203, 214, 0.68);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 16px 30px rgba(148, 163, 184, 0.1);
}

html.light .dashboard-stat-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.84));
    border-color: rgba(197, 203, 214, 0.68);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 12px 24px rgba(148, 163, 184, 0.08);
}

html.light .dashboard-focus-card,
html.light .dashboard-actions-card,
html.light .dashboard-action-tile,
html.light .dashboard-focus-item {
    background: rgba(255, 255, 255, 0.76);
    border-color: rgba(197, 203, 214, 0.72);
}

html.light .dashboard-focus-title,
html.light .dashboard-action-name,
html.light .dashboard-focus-item-title {
    color: #0f172a;
}

html.light .dashboard-focus-kicker,
html.light .dashboard-focus-desc,
html.light .dashboard-focus-label,
html.light .dashboard-action-meta,
html.light .dashboard-focus-item-meta {
    color: #64748b;
}

html.light .session-workspace-eyebrow,
html.light .session-field-label,
html.light .session-detail-meta,
html.light .session-card-label,
html.light .session-list-meta,
html.light .session-list-summary,
html.light .session-list-time,
html.light .session-list-chips {
    color: #64748b;
}

html.light .session-workspace-badge,
html.light .session-panel-count,
html.light .session-info-chip {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(197, 203, 214, 0.78);
}

html.light .session-filter-card,
html.light .session-list-card,
html.light .session-info-card {
    border-color: rgba(197, 203, 214, 0.72);
}

html.light .session-filter-card,
html.light .session-info-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.9));
}

html.light .session-list-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.9));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

html.light .session-list-title,
html.light .session-detail-title,
html.light .session-empty-state,
html.light .session-list-preview {
    color: #0f172a;
}

html.light .session-detail-body {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
    border-color: rgba(197, 203, 214, 0.72);
}

html.light .session-identity-chip:hover {
    border-color: rgba(125, 211, 252, 0.52);
    background: rgba(240, 249, 255, 0.96);
}

html.light .workspace-eyebrow,
html.light .tools-section-kicker {
    color: #64748b;
}

html.light .meta-chip {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(197, 203, 214, 0.78);
}

html.light .overview-card,
html.light .tools-node-card,
html.light .tools-cli-card {
    border-color: rgba(197, 203, 214, 0.72);
}

html.light .overview-card {
    border-color: rgba(197, 203, 214, 0.72);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.9));
}

html.light .tools-node-card,
html.light .tools-cli-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.9));
}

html.light .overview-card-accent-cyan {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.92)),
        radial-gradient(circle at top right, rgba(186, 230, 253, 0.14), transparent 34%);
}

html.light .overview-card-accent-green {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.92)),
        radial-gradient(circle at top right, rgba(134, 239, 172, 0.16), transparent 34%);
}

html.light .overview-card-accent-purple {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.92)),
        radial-gradient(circle at top right, rgba(186, 230, 253, 0.14), transparent 34%);
}

html.light .overview-title,
html.light .tools-batch-item .text-sm,
html.light .tools-node-card .text-sm,
html.light .tools-cli-card .text-sm {
    color: #0f172a;
}

html.light .overview-copy,
html.light .tools-batch-item .text-xs,
html.light .tools-inline-panel .text-xs,
html.light .tools-node-card .text-\[10px\],
html.light .tools-cli-card .text-\[10px\] {
    color: #64748b;
}

html.light .tools-batch-item,
html.light .tools-inline-panel {
    border-color: rgba(197, 203, 214, 0.72);
    background: rgba(255, 255, 255, 0.8);
}

html.light .account-workspace-eyebrow {
    color: #64748b;
}

html.light .account-meta-chip,
html.light .account-inline-count {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(197, 203, 214, 0.78);
}

html.light .account-subtabs {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(197, 203, 214, 0.78);
}

html.light .shadow-neon-purple { --tw-shadow-color: rgba(124, 58, 237, 0.25); }
html.light .shadow-neon-purple\/20 { box-shadow: 0 0 18px rgba(124, 58, 237, 0.12); }
html.light .shadow-\[0_0_15px_rgba\(168\,85\,247\,0\.4\)\] { box-shadow: 0 0 15px rgba(124, 58, 237, 0.25); }
html.light .shadow-\[0_0_8px_rgba\(34\,197\,94\,0\.6\)\] { box-shadow: 0 0 8px rgba(22, 163, 74, 0.4); }

/* Smooth theme transition */
html.light body,
html.light .view-card,
html.light .nav-item,
html.light .input,
html.light .input-search-sm,
html.light select,
html.light .btn,
html.light .modal-box,
html.light .alert {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.font-mono { font-family: 'JetBrains Mono', monospace; }

.bg-space-950 { background-color: var(--color-space-950); }
.bg-space-900 { background-color: var(--color-space-900); }
.bg-space-850 { background-color: var(--color-space-850); }
.bg-space-800 { background-color: var(--color-space-800); }
.bg-space-700 { background-color: var(--color-space-700); }
.bg-space-border { background-color: var(--color-space-border); }

.border-space-border { border-color: var(--color-space-border); }

.text-neon-purple { color: var(--color-neon-purple); }
.text-neon-cyan { color: var(--color-neon-cyan); }
.text-neon-green { color: var(--color-neon-green); }
.text-neon-yellow { color: var(--color-neon-yellow); }

.bg-neon-purple { background-color: var(--color-neon-purple); }
.bg-neon-cyan { background-color: var(--color-neon-cyan); }
.bg-neon-green { background-color: var(--color-neon-green); }

.border-neon-purple { border-color: var(--color-neon-purple); }
.border-neon-cyan { border-color: var(--color-neon-cyan); }
.border-neon-green { border-color: var(--color-neon-green); }

.shadow-neon-purple { --tw-shadow-color: rgba(168, 85, 247, 0.4); box-shadow: 0 0 15px var(--tw-shadow-color); }

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: calc(100% - 0.75rem);
    min-height: 3rem;
    padding: 0.75rem 1.25rem;
    background: rgba(255, 255, 255, 0.02);
    color: #94a3b8;
    border-radius: 1rem;
    margin: 0 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    border: 1px solid rgba(148, 163, 184, 0.06);
    transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.nav-item.active {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.2), rgba(14, 165, 233, 0.08));
    border-color: rgba(34, 211, 238, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(8, 145, 178, 0.14);
    color: #e0f2fe;
}

.nav-item:hover:not(.active) {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(148, 163, 184, 0.16);
    color: white;
    transform: translateX(2px);
}

.nav-item .sidebar-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-item svg {
    color: #64748b;
    transition: color 0.18s ease, transform 0.18s ease;
}

.nav-item:hover svg,
.nav-item.active svg {
    color: currentColor;
}

.nav-item.active svg {
    transform: translateX(1px);
}

.view-container {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
    min-width: 0;
    width: 100%;
}

.view-container[data-partial-view="mcp"] {
    max-width: 1320px;
}

@media (min-width: 1024px) {
    .view-container { padding: 2rem; }
}

.mcp-page {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.mcp-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

.mcp-header-copy {
    min-width: 0;
}

.mcp-eyebrow {
    color: #64748b;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.mcp-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.35rem;
}

.mcp-title-row h1 {
    color: #fff;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.2;
}

.mcp-header-copy p {
    margin-top: 0.55rem;
    max-width: 58rem;
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.6;
}

.mcp-count-chip,
.mcp-status-pill {
    display: inline-flex;
    align-items: center;
    height: 1.45rem;
    padding: 0 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(71, 85, 105, 0.5);
    background: rgba(15, 23, 42, 0.4);
    color: #94a3b8;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    white-space: nowrap;
}

.mcp-header-actions,
.mcp-row-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mcp-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.mcp-stat {
    min-width: 0;
    border: 1px solid rgba(71, 85, 105, 0.28);
    border-radius: 0.9rem;
    background: rgba(15, 23, 42, 0.34);
    padding: 0.8rem 1rem;
}

.mcp-stat span {
    display: block;
    color: #64748b;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mcp-stat strong {
    display: block;
    margin-top: 0.35rem;
    color: #e2e8f0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.35rem;
    line-height: 1.1;
}

.mcp-layout {
    display: grid;
    grid-template-columns: 20rem minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.mcp-main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.mcp-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(71, 85, 105, 0.24);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(18, 22, 34, 0.88), rgba(12, 17, 28, 0.8));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 34px rgba(2, 6, 23, 0.18);
}

.mcp-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid rgba(71, 85, 105, 0.26);
}

.mcp-panel-head h2 {
    color: #cbd5e1;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mcp-panel-head p {
    margin-top: 0.25rem;
    color: #64748b;
    font-size: 0.78rem;
    line-height: 1.45;
}

.mcp-server-list {
    max-height: 36rem;
    overflow: auto;
}

.mcp-server-row {
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(71, 85, 105, 0.22);
    border-left: 3px solid transparent;
    background: transparent;
    padding: 0.9rem 1rem;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.mcp-server-row:hover {
    background: rgba(30, 41, 59, 0.28);
}

.mcp-server-row.is-selected {
    border-left-color: var(--color-neon-cyan);
    background: rgba(34, 211, 238, 0.08);
}

.mcp-server-row-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.mcp-server-name {
    min-width: 0;
    color: #f8fafc;
    font-size: 0.9rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcp-server-endpoint {
    margin-top: 0.35rem;
    color: #64748b;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcp-server-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.7rem;
    color: #64748b;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
}

.mcp-form {
    padding: 1.15rem;
}

.mcp-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.mcp-field {
    display: block;
    min-width: 0;
}

.mcp-field-wide,
.mcp-field-full {
    grid-column: span 2;
}

.mcp-field span,
.mcp-field-label {
    display: block;
    margin-bottom: 0.4rem;
    color: #64748b;
    font-size: 0.76rem;
}

.mcp-field .input {
    border-radius: 0.72rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
}

.mcp-transport-section,
.mcp-form-section {
    margin-top: 1.1rem;
}

.mcp-transport-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.mcp-transport-option {
    border: 1px solid rgba(71, 85, 105, 0.38);
    border-radius: 0.85rem;
    background: rgba(15, 23, 42, 0.28);
    padding: 0.85rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.mcp-transport-option:hover {
    background: rgba(30, 41, 59, 0.32);
}

.mcp-transport-option.is-selected {
    border-color: rgba(34, 211, 238, 0.58);
    background: rgba(34, 211, 238, 0.09);
}

.mcp-transport-option strong,
.mcp-transport-option span {
    display: block;
}

.mcp-transport-option strong {
    color: #f8fafc;
    font-size: 0.88rem;
}

.mcp-transport-option span {
    margin-top: 0.25rem;
    color: #64748b;
    font-size: 0.74rem;
    line-height: 1.45;
}

.mcp-section-title {
    margin-bottom: 0.75rem;
    color: #94a3b8;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mcp-save-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(71, 85, 105, 0.22);
}

.mcp-enable-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #cbd5e1;
    font-size: 0.82rem;
}

.mcp-switch {
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    border: 1px solid rgba(71, 85, 105, 0.5);
    border-radius: 999px;
    background: rgba(30, 41, 59, 0.7);
    cursor: pointer;
}

.mcp-switch span {
    position: absolute;
    top: 0.22rem;
    left: 0.24rem;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    background: #fff;
    transition: transform 0.15s ease;
}

.mcp-switch.is-on {
    border-color: rgba(34, 197, 94, 0.46);
    background: rgba(34, 197, 94, 0.7);
}

.mcp-switch.is-on span {
    transform: translateX(1.2rem);
}

.mcp-tabs {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid rgba(71, 85, 105, 0.34);
    border-radius: 0.7rem;
    background: rgba(15, 23, 42, 0.3);
}

.mcp-tabs button {
    min-height: 2rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: #64748b;
    padding: 0 0.75rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    cursor: pointer;
}

.mcp-tabs button.is-selected {
    background: rgba(51, 65, 85, 0.72);
    color: #f8fafc;
}

.mcp-capability-list {
    padding: 1rem;
    max-height: 26rem;
    overflow: auto;
}

.mcp-capability-item,
.mcp-resource-item {
    border: 1px solid rgba(71, 85, 105, 0.25);
    border-radius: 0.8rem;
    background: rgba(15, 23, 42, 0.22);
    padding: 0.85rem;
}

.mcp-capability-item + .mcp-capability-item,
.mcp-resource-item + .mcp-resource-item {
    margin-top: 0.65rem;
}

.mcp-capability-item summary {
    cursor: pointer;
    color: #f8fafc;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
}

.mcp-capability-desc,
.mcp-resource-item p {
    margin-top: 0.5rem;
    color: #94a3b8;
    font-size: 0.78rem;
    line-height: 1.55;
}

.mcp-capability-item pre {
    max-height: 14rem;
    margin-top: 0.75rem;
    overflow: auto;
    border: 1px solid rgba(71, 85, 105, 0.22);
    border-radius: 0.65rem;
    background: rgba(2, 6, 23, 0.38);
    color: #cbd5e1;
    padding: 0.8rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.mcp-resource-item strong,
.mcp-resource-item span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcp-resource-item strong {
    color: #f8fafc;
    font-size: 0.88rem;
}

.mcp-resource-item span {
    margin-top: 0.25rem;
    color: #64748b;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
}

.mcp-empty {
    padding: 2.5rem 1rem;
    color: #64748b;
    font-size: 0.84rem;
    text-align: center;
}

@media (max-width: 1100px) {
    .mcp-layout {
        grid-template-columns: 1fr;
    }

    .mcp-server-list {
        max-height: 22rem;
    }
}

@media (max-width: 760px) {
    .mcp-header,
    .mcp-panel-head,
    .mcp-save-row {
        align-items: stretch;
        flex-direction: column;
    }

    .mcp-header-actions,
    .mcp-row-actions {
        width: 100%;
    }

    .mcp-header-actions .btn,
    .mcp-row-actions .btn {
        flex: 1;
    }

    .mcp-stats,
    .mcp-form-grid,
    .mcp-transport-grid {
        grid-template-columns: 1fr;
    }

    .mcp-field-wide,
    .mcp-field-full {
        grid-column: span 1;
    }
}

.view-card {
    background: linear-gradient(180deg, rgba(18, 22, 34, 0.88), rgba(12, 17, 28, 0.8));
    border: 1px solid rgba(71, 85, 105, 0.22);
    border-radius: 1rem;
    padding: 1.5rem;
    backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 34px rgba(2, 6, 23, 0.24);
}

.skills-market-shell {
    min-height: calc(100vh - 8rem);
    margin: -0.5rem;
    padding: 1.25rem;
    color: #1f2937;
    background: #f7f7f5;
    border: 1px solid rgba(226, 232, 240, 0.82);
    border-radius: 1.25rem;
}

.skills-market-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
}

.skills-market-eyebrow {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 700;
    letter-spacing: 0;
}

.skills-market-title {
    margin-top: 0.35rem;
    font-size: 1.75rem;
    line-height: 1.15;
    font-weight: 800;
    color: #111827;
    letter-spacing: 0;
}

.skills-market-desc {
    max-width: 46rem;
    margin-top: 0.5rem;
    color: #667085;
    font-size: 0.875rem;
    line-height: 1.6;
}

.skills-market-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.625rem;
    flex-shrink: 0;
}

.skills-market-actions .btn-surface {
    color: #344054;
    border-color: #e5e7eb;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.skills-market-actions .btn-surface:hover {
    color: #111827;
    border-color: #cbd5e1;
    background: #fff;
}

.skills-market-switch {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.25rem;
    padding: 0.35rem 0.45rem 0.35rem 0.85rem;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.skills-market-switch.is-disabled {
    opacity: 0.72;
}

.skills-market-switch-title {
    font-size: 11px;
    color: #111827;
    font-weight: 800;
    line-height: 1;
}

.skills-market-switch-desc {
    margin-top: 0.2rem;
    font-size: 10px;
    color: #94a3b8;
    line-height: 1;
}

.skills-toggle {
    position: relative;
    width: 2.4rem;
    height: 1.35rem;
    border-radius: 9999px;
    border: 1px solid #d1d5db;
    background: #e5e7eb;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.skills-toggle span {
    position: absolute;
    top: 0.18rem;
    left: 0.2rem;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.24);
    transition: transform 0.2s ease;
}

.skills-toggle.is-on {
    border-color: #16a34a;
    background: #22c55e;
}

.skills-toggle.is-on span {
    transform: translateX(1rem);
}

.skills-market-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.skills-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.skills-filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2rem;
    padding: 0 0.85rem;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    background: #fff;
    color: #475467;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.skills-filter-tab:hover,
.skills-filter-tab.is-active {
    border-color: #cbd5e1;
    color: #111827;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.skills-filter-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 9999px;
}

.skills-search-wrap {
    position: relative;
    width: min(20rem, 100%);
}

.skills-search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    width: 1rem;
    height: 1rem;
    color: #98a2b3;
    transform: translateY(-50%);
}

.skills-search-input {
    width: 100%;
    height: 2.25rem;
    padding: 0 0.85rem 0 2.35rem;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    background: #fff;
    color: #111827;
    font-size: 0.8125rem;
    outline: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.skills-search-input:focus {
    border-color: #94a3b8;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.18);
}

.skills-market-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.skills-stat-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.45rem 0.75rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(226, 232, 240, 0.78);
    color: #111827;
}

.skills-stat-pill span {
    font-size: 0.95rem;
    font-weight: 800;
}

.skills-stat-pill small {
    color: #667085;
    font-size: 0.7rem;
}

.skills-masonry {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    align-items: start;
    gap: 1rem;
}

.skill-market-card {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    border-radius: 0.8rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.skill-market-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
}

.skill-card-cover {
    position: relative;
    min-height: 15.5rem;
    padding: 1rem;
    overflow: hidden;
    color: #111827;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.46)),
        linear-gradient(135deg, #dbeafe, #ecfeff);
}

.skill-card-cover::before,
.skill-card-cover::after {
    content: "";
    position: absolute;
    border-radius: 9999px;
    opacity: 0.48;
    pointer-events: none;
}

.skill-card-cover::before {
    right: -2rem;
    top: -2rem;
    width: 7rem;
    height: 7rem;
    background: rgba(255, 255, 255, 0.82);
}

.skill-card-cover::after {
    left: -1.5rem;
    bottom: -1.75rem;
    width: 6rem;
    height: 6rem;
    background: rgba(255, 255, 255, 0.58);
}

.skill-tone-user .skill-card-cover {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.5)),
        linear-gradient(135deg, #dcfce7, #ccfbf1);
}

.skill-tone-repo .skill-card-cover {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.48)),
        linear-gradient(135deg, #dbeafe, #cffafe);
}

.skill-tone-bundled .skill-card-cover {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.42)),
        linear-gradient(135deg, #fef3c7, #fde68a);
}

.skill-card-badge {
    position: absolute;
    right: 0.8rem;
    top: 0.75rem;
    z-index: 1;
    padding: 0.18rem 0.45rem;
    border-radius: 9999px;
    background: rgba(17, 24, 39, 0.7);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}

.skill-card-icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin: 1.7rem auto 1rem;
    border-radius: 1.15rem;
    border: 2px solid rgba(17, 24, 39, 0.68);
    background: rgba(255, 255, 255, 0.74);
    color: #111827;
    font-size: 1.35rem;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

.skill-card-title {
    position: relative;
    z-index: 1;
    min-height: 3.15rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-align: center;
    color: #111827;
    font-size: 1.45rem;
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: 0;
}

.skill-card-subtitle {
    position: relative;
    z-index: 1;
    min-height: 1.2rem;
    margin-top: 0.45rem;
    color: #16a34a;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 800;
}

.skill-card-mini-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    margin-top: 1.15rem;
}

.skill-card-mini-grid span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0 0.35rem;
    border: 1px solid rgba(17, 24, 39, 0.45);
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.64);
    color: #111827;
    font-size: 11px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.skill-card-body {
    padding: 0.75rem 0.85rem 0.85rem;
}

.skill-card-name {
    overflow: hidden;
    color: #111827;
    font-size: 0.9rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.skill-card-description {
    display: -webkit-box;
    min-height: 2.35rem;
    margin-top: 0.3rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #667085;
    font-size: 0.75rem;
    line-height: 1.55;
}

.skill-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.65rem;
    color: #98a2b3;
    font-size: 0.68rem;
}

.skill-card-meta span:first-child {
    display: inline-flex;
    align-items: center;
    min-height: 1.25rem;
    padding: 0 0.45rem;
    border-radius: 9999px;
    font-weight: 800;
}

.skill-card-meta span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.skills-empty-state {
    display: flex;
    min-height: 20rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    border: 1px dashed #cbd5e1;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.58);
    text-align: center;
}

.skills-empty-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    background: #111827;
    color: #fff;
    font-weight: 900;
}

.skills-empty-title {
    color: #111827;
    font-size: 1rem;
    font-weight: 800;
}

.skills-empty-copy {
    max-width: 30rem;
    color: #667085;
    font-size: 0.85rem;
    line-height: 1.6;
}

.skills-detail-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.skills-back-button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2rem;
    padding: 0 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    background: #fff;
    color: #475467;
    font-size: 0.75rem;
    font-weight: 800;
}

.skills-back-button:hover {
    color: #111827;
    border-color: #cbd5e1;
}

.skills-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.skills-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(22rem, 0.85fr);
    gap: 2rem;
}

.skills-detail-cover-wrap {
    min-width: 0;
}

.skills-detail-cover {
    max-width: 50rem;
    margin: 0 auto;
    border-radius: 0.4rem;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
}

.skills-detail-cover .skill-card-cover {
    min-height: min(62vh, 44rem);
    padding: clamp(1.25rem, 3vw, 2.5rem);
}

.skills-detail-cover .skill-card-icon {
    width: 6.5rem;
    height: 6.5rem;
    margin-top: 4rem;
    margin-bottom: 1.8rem;
    border-radius: 1.5rem;
    font-size: 2.1rem;
}

.skills-detail-cover .skill-card-title {
    max-width: 38rem;
    margin: 0 auto;
    font-size: clamp(2.25rem, 5vw, 4.6rem);
    line-height: 1.05;
    min-height: auto;
}

.skills-detail-cover .skill-card-subtitle {
    margin-top: 1rem;
    font-size: clamp(1rem, 1.8vw, 1.5rem);
}

.skills-detail-cover .skill-card-mini-grid {
    max-width: 32rem;
    margin: 2.4rem auto 0;
    gap: 0.85rem;
}

.skills-detail-cover .skill-card-mini-grid span {
    min-height: 3.3rem;
    border-width: 2px;
    border-radius: 0.85rem;
    font-size: clamp(0.8rem, 1.2vw, 1.05rem);
}

.skills-detail-panel {
    min-width: 0;
    padding: 0.25rem 0 1rem;
}

.skills-detail-kicker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    color: #667085;
    font-size: 0.72rem;
    font-weight: 800;
}

.skills-detail-title {
    margin-top: 0.75rem;
    color: #111827;
    font-size: 1.55rem;
    line-height: 1.25;
    font-weight: 900;
    letter-spacing: 0;
}

.skills-detail-description {
    margin-top: 0.75rem;
    color: #475467;
    font-size: 0.875rem;
    line-height: 1.75;
}

.skills-detail-section {
    margin-top: 1.35rem;
}

.skills-detail-section-title {
    margin-bottom: 0.55rem;
    color: #667085;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
}

.skills-detail-copy {
    color: #344054;
    font-size: 0.83rem;
    line-height: 1.7;
    white-space: pre-wrap;
}

.skills-detail-path {
    padding: 0.65rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.65rem;
    background: #fff;
    color: #667085;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.skills-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.skills-detail-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 1.65rem;
    padding: 0 0.65rem;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    background: #fff;
    color: #344054;
    font-size: 0.72rem;
    font-weight: 800;
}

.skills-detail-muted {
    color: #98a2b3;
    font-size: 0.78rem;
}

.skills-related-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.skills-related-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 4rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.85rem;
    background: #fff;
    text-align: left;
}

.skills-related-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.skills-related-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 2.25rem;
    border-radius: 0.65rem;
    background: #f1f5f9;
    color: #111827;
    font-size: 0.75rem;
    font-weight: 900;
}

.skills-related-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.skills-related-copy strong,
.skills-related-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.skills-related-copy strong {
    color: #111827;
    font-size: 0.8rem;
}

.skills-related-copy small {
    color: #98a2b3;
    font-size: 0.68rem;
}

.skills-detail-raw {
    margin-top: 1.5rem;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.85rem;
    background: #fff;
}

.skills-detail-raw pre {
    max-height: 28rem;
    margin: 0.75rem 0 0;
    padding: 1rem;
    overflow: auto;
    border: 1px solid #e5e7eb;
    border-radius: 0.65rem;
    background: #f8fafc;
    color: #344054;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
    .skills-detail-grid {
        grid-template-columns: 1fr;
    }

    .skills-detail-panel {
        max-width: 48rem;
    }
}

@media (max-width: 760px) {
    .skills-market-shell {
        margin: -0.75rem;
        padding: 0.85rem;
        border-radius: 0.9rem;
    }

    .skills-market-header,
    .skills-market-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .skills-market-actions {
        justify-content: flex-start;
    }

    .skills-market-switch,
    .skills-search-wrap {
        width: 100%;
    }

    .skills-detail-cover .skill-card-cover {
        min-height: 30rem;
    }

    .skills-detail-cover .skill-card-icon {
        margin-top: 2.4rem;
    }
}

.dashboard-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(71, 85, 105, 0.24);
    background:
        linear-gradient(135deg, rgba(18, 22, 34, 0.94), rgba(11, 17, 28, 0.86)),
        radial-gradient(circle at top right, rgba(34, 211, 238, 0.08), transparent 34%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 40px rgba(2, 6, 23, 0.22);
}

.dashboard-hero-copy {
    min-width: 0;
    max-width: 52rem;
}

.dashboard-hero-eyebrow-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.dashboard-hero-eyebrow,
.dashboard-hero-version {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0 0.75rem;
    border-radius: 9999px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(255, 255, 255, 0.04);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #94a3b8;
}

.dashboard-hero-title {
    margin: 0;
    font-size: clamp(2rem, 2.4vw, 2.75rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: #fff;
}

.dashboard-hero-subtitle {
    margin-top: 0.85rem;
    max-width: 46rem;
    font-size: 0.98rem;
    line-height: 1.7;
    color: #94a3b8;
}

.dashboard-hero-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.875rem;
    flex-shrink: 0;
}

.dashboard-hero-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0 0.9rem;
    border-radius: 9999px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(255, 255, 255, 0.04);
}

.dashboard-hero-status-label,
.dashboard-hero-status-time {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #94a3b8;
    font-family: 'JetBrains Mono', monospace;
}

.dashboard-hero-status-dot {
    color: #475569;
}

.dashboard-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.625rem;
}

.dashboard-hero-actions .btn {
    min-height: 2.75rem;
    padding-inline: 1rem;
    border-radius: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: var(--control-shadow);
}

.dashboard-tool-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.dashboard-tool-actions .btn {
    min-height: 2.5rem;
    border-radius: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: var(--control-shadow);
}

.dashboard-section-card {
    border-radius: 1rem;
    border-color: rgba(71, 85, 105, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 34px rgba(2, 6, 23, 0.18);
}

.dashboard-stat-card {
    border-radius: 1rem;
    border-color: rgba(71, 85, 105, 0.26);
    background: linear-gradient(180deg, rgba(20, 28, 42, 0.64), rgba(15, 23, 36, 0.52));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 12px 26px rgba(2, 6, 23, 0.14);
    overflow: hidden;
}

.dashboard-stat-card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.dashboard-stat-card:hover::before {
    opacity: 1;
}

.dashboard-stat-card-cyan::before {
    background: radial-gradient(circle at top right, rgba(34, 211, 238, 0.14), transparent 42%);
}

.dashboard-stat-card-green::before {
    background: radial-gradient(circle at top right, rgba(34, 197, 94, 0.14), transparent 42%);
}

.dashboard-stat-card-yellow::before {
    background: radial-gradient(circle at top right, rgba(234, 179, 8, 0.14), transparent 42%);
}

.dashboard-stat-card-purple::before {
    background: radial-gradient(circle at top right, rgba(168, 85, 247, 0.16), transparent 42%);
}

.dashboard-focus-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.95fr);
}

.dashboard-focus-card,
.dashboard-actions-card {
    padding: 1.25rem;
}

.dashboard-focus-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.dashboard-focus-kicker {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #94a3b8;
    font-family: 'JetBrains Mono', monospace;
}

.dashboard-focus-title {
    margin: 0.45rem 0 0;
    font-size: 1.35rem;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: #fff;
}

.dashboard-focus-desc {
    margin-top: 0.85rem;
    color: #94a3b8;
    line-height: 1.65;
    font-size: 0.95rem;
}

.dashboard-focus-lists {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.dashboard-focus-column {
    min-width: 0;
}

.dashboard-focus-label {
    margin-bottom: 0.625rem;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #94a3b8;
    font-family: 'JetBrains Mono', monospace;
}

.dashboard-focus-items {
    display: grid;
    gap: 0.75rem;
}

.dashboard-focus-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.875rem 0.95rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(71, 85, 105, 0.22);
    background: rgba(255, 255, 255, 0.03);
}

.dashboard-focus-item-title {
    font-size: 0.95rem;
    color: #fff;
}

.dashboard-focus-item-meta {
    font-size: 0.78rem;
    color: #94a3b8;
}

.dashboard-focus-item-warn {
    box-shadow: inset 0 0 0 1px rgba(234, 179, 8, 0.12);
}

.dashboard-focus-item-ok {
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.1);
}

.dashboard-action-list {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.9rem;
}

.dashboard-action-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    width: 100%;
    padding: 0.95rem 1rem;
    border-radius: 0.95rem;
    border: 1px solid rgba(71, 85, 105, 0.2);
    background: rgba(255, 255, 255, 0.03);
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.dashboard-action-tile:hover {
    transform: translateY(-1px);
    border-color: rgba(34, 211, 238, 0.24);
    background: rgba(34, 211, 238, 0.06);
}

.dashboard-action-name {
    color: #fff;
    font-size: 0.95rem;
}

.dashboard-action-meta {
    color: #94a3b8;
    font-size: 0.78rem;
    font-family: 'JetBrains Mono', monospace;
}

.conversation-records-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: stretch;
}

.session-workspace-view {
    padding-top: 0.35rem;
}

.session-workspace-header {
    align-items: flex-start;
}

.session-workspace-eyebrow {
    color: #64748b;
}

.session-workspace-badge {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(148, 163, 184, 0.16);
}

.session-panel {
    border-radius: 1.15rem;
}

.session-panel-head {
    align-items: flex-start;
}

.session-panel-count {
    flex-shrink: 0;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.conversation-thread-panel,
.conversation-detail-panel {
    width: 100%;
    min-width: 0;
}

.conversation-thread-panel,
.conversation-detail-panel {
    padding: 1.15rem;
}

.session-filter-card {
    padding: 0.95rem;
    border-radius: 1rem;
    border: 1px solid rgba(71, 85, 105, 0.22);
    background: linear-gradient(180deg, rgba(20, 28, 42, 0.62), rgba(15, 23, 36, 0.52));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.session-filter-input,
.session-filter-select {
    background: var(--field-bg);
    border-color: var(--field-border);
    color: var(--control-text-strong);
}

.session-field-label {
    color: #94a3b8;
}

.conversation-thread-list {
    min-height: 360px;
    max-height: 680px;
}

.session-list-card {
    border-color: rgba(71, 85, 105, 0.22);
    background: linear-gradient(180deg, rgba(24, 32, 48, 0.66), rgba(16, 24, 36, 0.56));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.session-list-title {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.session-list-meta,
.session-list-summary,
.session-list-time,
.session-list-chips {
    color: #94a3b8;
}

.session-list-preview {
    color: #cbd5e1;
}

.conversation-detail-body {
    min-height: 520px;
    max-height: 680px;
}

.session-detail-body {
    background:
        linear-gradient(180deg, rgba(10, 15, 24, 0.88), rgba(12, 18, 28, 0.8)),
        radial-gradient(circle at top center, rgba(34, 211, 238, 0.04), transparent 34%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.session-detail-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
}

.session-detail-meta {
    color: #94a3b8;
}

.session-detail-toolbar {
    align-items: center;
}

.session-info-chip {
    background: rgba(255, 255, 255, 0.04);
}

.session-empty-state {
    min-height: 18rem;
    color: #94a3b8;
}

.session-message-list {
    min-height: 100%;
}

.session-message-bubble {
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.16);
}

.session-info-card {
    border-radius: 1rem;
    border-color: rgba(71, 85, 105, 0.24);
    background: linear-gradient(180deg, rgba(20, 28, 42, 0.64), rgba(15, 23, 36, 0.52));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.session-card-label {
    color: #94a3b8;
}

.session-identity-chip {
    transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.session-identity-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(125, 211, 252, 0.28);
}

.session-metric-card,
.session-pending-card,
.session-event-card {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.workspace-view {
    padding-top: 0.35rem;
}

.workspace-header {
    align-items: flex-start;
}

.workspace-eyebrow {
    color: #64748b;
}

.meta-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.8rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.overview-card {
    border-radius: 1.15rem;
}

.overview-card-accent-cyan {
    background:
        linear-gradient(135deg, rgba(18, 22, 34, 0.94), rgba(16, 24, 39, 0.88)),
        radial-gradient(circle at top right, rgba(34, 211, 238, 0.08), transparent 34%);
}

.overview-card-accent-green {
    background:
        linear-gradient(135deg, rgba(18, 22, 34, 0.94), rgba(16, 24, 39, 0.88)),
        radial-gradient(circle at top right, rgba(74, 222, 128, 0.1), transparent 34%);
}

.overview-card-accent-purple {
    background:
        linear-gradient(135deg, rgba(18, 22, 34, 0.94), rgba(16, 24, 39, 0.88)),
        radial-gradient(circle at top right, rgba(168, 85, 247, 0.08), transparent 34%);
}

.overview-title {
    letter-spacing: -0.02em;
}

.tools-section-kicker {
    color: #94a3b8;
}

.overview-copy {
    max-width: 42rem;
    line-height: 1.65;
}
.overview-meta {
    gap: 0.5rem;
}

.tools-batch-item {
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(71, 85, 105, 0.22);
    background: rgba(255, 255, 255, 0.03);
}

.tools-inline-alert {
    border-radius: 0.9rem;
}

.tools-node-card,
.tools-cli-card {
    border-radius: 1.1rem;
}

.tools-card-head {
    align-items: flex-start;
}

.tools-icon-box {
    flex-shrink: 0;
}

.tools-inline-panel {
    background: rgba(15, 23, 42, 0.35);
}

.tools-section-head {
    align-items: flex-end;
}

.tools-cli-grid {
    align-items: stretch;
}

.tools-cli-card,
.tools-node-card {
    min-width: 0;
}

.tools-cli-status,
.tools-node-status {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.account-workspace-view {
    padding-top: 0.35rem;
}

.account-workspace-header {
    align-items: flex-start;
}

.account-workspace-eyebrow {
    color: #64748b;
}

.account-meta-chip,
.account-inline-count {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(148, 163, 184, 0.14);
}

.account-toolbar {
    align-items: center;
}

.account-toolbar-group {
    flex-wrap: wrap;
}

.account-subtabs {
    background: rgba(15, 23, 42, 0.45);
}

.account-subtab-btn {
    min-height: 2.4rem;
}

.account-table-shell {
    border-radius: 1.15rem;
}

.account-table th,
.account-table td {
    padding-left: 1rem;
    padding-right: 1rem;
    vertical-align: middle;
}

.account-table th:first-child,
.account-table td:first-child {
    padding-left: 1.5rem;
}

.account-table th:last-child,
.account-table td:last-child {
    padding-right: 1.5rem;
}

.account-status-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.account-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    flex-shrink: 0;
}

.account-status-label {
    font-size: 0.75rem;
    line-height: 1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-weight: 600;
}

.logs-workspace-view {
    padding-top: 0.35rem;
}

.logs-workspace-header {
    align-items: flex-start;
}

.logs-workspace-eyebrow {
    color: #64748b;
}

.logs-meta-chip {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(148, 163, 184, 0.14);
}

.logs-toolbar {
    align-items: center;
}

.logs-console-toolbar {
    flex-wrap: wrap;
}

.logs-filter-group {
    flex-wrap: wrap;
}

.logs-empty-state {
    min-height: 12rem;
    color: #64748b;
}

.usage-workspace-view {
    padding-top: 0.35rem;
}

.usage-workspace-header {
    align-items: flex-start;
}

.usage-workspace-eyebrow {
    color: #64748b;
}

.usage-meta-chip {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(148, 163, 184, 0.14);
}

.usage-overview-grid {
    align-items: stretch;
}

.usage-overview-card {
    border-radius: 1rem;
}

.usage-section-card {
    border-radius: 1.1rem;
}

.usage-table {
    width: 100%;
}

.usage-table th,
.usage-table td {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    vertical-align: middle;
}

.usage-table th:first-child,
.usage-table td:first-child {
    padding-left: 0;
}

.usage-table th:last-child,
.usage-table td:last-child {
    padding-right: 0;
}

.usage-empty-state {
    min-height: 6rem;
    color: #64748b;
}

.pricing-workspace-view,
.requestlogs-workspace-view,
.api-explorer-workspace-view {
    padding-top: 0.35rem;
}

.pricing-workspace-header,
.requestlogs-workspace-header,
.api-explorer-workspace-header {
    align-items: flex-start;
}

.pricing-workspace-eyebrow,
.requestlogs-workspace-eyebrow,
.api-explorer-workspace-eyebrow {
    color: #64748b;
}

.pricing-meta-chip,
.requestlogs-meta-chip,
.api-explorer-meta-chip {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(148, 163, 184, 0.14);
}

.pricing-section-card,
.requestlogs-section-card,
.api-explorer-section-card {
    border-radius: 1.1rem;
}

.pricing-toolbar,
.requestlogs-toolbar {
    align-items: center;
}

.requestlogs-filter-card {
    border-radius: 1rem;
}

.requestlogs-entry-card {
    border-radius: 1rem;
}

.account-empty-state,
.account-search-empty-state {
    min-height: 16rem;
}

.account-empty-state {
    color: #94a3b8;
}

.account-search-empty-state {
    color: #64748b;
}

.conversation-thread-preview {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .conversation-records-layout {
        flex-direction: row;
        align-items: flex-start;
    }

    .conversation-thread-panel {
        width: 360px;
        flex: 0 0 360px;
    }

    .conversation-detail-panel {
        flex: 1 1 auto;
    }
}

.stat {
    position: relative;
}

.stat-value {
    line-height: 1.2;
}

.stat-title {
    letter-spacing: 0.05em;
}

.stat-desc {
    letter-spacing: 0.02em;
}

.alert {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 0.5rem;
}

.alert-info { background: rgba(34, 211, 238, 0.1); border: 1px solid rgba(34, 211, 238, 0.2); }
.alert-success { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.2); }
.alert-error { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); }
.alert-warning { background: rgba(234, 179, 8, 0.1); border: 1px solid rgba(234, 179, 8, 0.2); }

.config-viewer-pre {
    margin: 0;
    padding: 1.5rem;
    overflow: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: #d1d5db;
    background: rgba(12, 12, 20, 0.72);
    white-space: pre-wrap;
    word-break: break-word;
}

html.light .config-viewer-pre {
    color: #1e293b;
    background: rgba(255, 255, 255, 0.65);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 500;
    border-radius: 0.375rem;
    transition: all 0.15s ease;
    cursor: pointer;
    border: 1px solid transparent;
    background-color: transparent;
    color: #9ca3af;
}

.btn-xs { padding: 0.375rem 0.75rem; font-size: 0.75rem; }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; }
.btn-md { padding: 0.625rem 1.25rem; font-size: 0.875rem; }

.btn-ghost {
    background: transparent;
    color: #9ca3af;
    border-color: transparent;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.05); color: white; }

.btn-outline {
    background: transparent;
    color: #9ca3af;
    border-color: rgba(42, 42, 62, 0.8);
}
.btn-outline:hover { background: rgba(255, 255, 255, 0.05); color: white; border-color: rgba(42, 42, 62, 1); }

.btn-primary {
    background: var(--color-neon-purple);
    color: white;
    border-color: var(--color-neon-purple);
}
.btn-primary:hover { background: #9333ea; border-color: #9333ea; }

.btn-surface {
    background: var(--control-bg);
    color: var(--control-text-strong);
    border-color: var(--control-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.btn-surface:hover {
    background: var(--control-bg-hover);
    border-color: var(--control-border-hover);
}

.btn-accent-cyan {
    color: #06202a;
    border-color: rgba(34, 211, 238, 0.28);
    background: linear-gradient(135deg, rgba(103, 232, 249, 0.98), rgba(34, 211, 238, 0.9));
    box-shadow: 0 14px 32px rgba(34, 211, 238, 0.18);
}

.btn-accent-cyan:hover {
    border-color: rgba(103, 232, 249, 0.4);
    background: linear-gradient(135deg, rgba(165, 243, 252, 1), rgba(34, 211, 238, 0.94));
    box-shadow: 0 16px 36px rgba(34, 211, 238, 0.24);
}

.btn-accent-purple {
    color: #fff;
    border-color: rgba(192, 132, 252, 0.26);
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.98), rgba(124, 58, 237, 0.92));
    box-shadow: 0 14px 32px rgba(124, 58, 237, 0.24);
}

.btn-accent-purple:hover {
    border-color: rgba(216, 180, 254, 0.38);
    background: linear-gradient(135deg, rgba(192, 132, 252, 1), rgba(147, 51, 234, 0.94));
    box-shadow: 0 16px 36px rgba(124, 58, 237, 0.3);
}

.btn-accent-green {
    color: #052e16;
    border-color: rgba(74, 222, 128, 0.3);
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.98), rgba(34, 197, 94, 0.92));
    box-shadow: 0 14px 32px rgba(34, 197, 94, 0.18);
}

.btn-accent-green:hover {
    border-color: rgba(134, 239, 172, 0.4);
    background: linear-gradient(135deg, rgba(134, 239, 172, 1), rgba(34, 197, 94, 0.94));
    box-shadow: 0 16px 36px rgba(34, 197, 94, 0.24);
}

.btn-accent-blue {
    color: #eff6ff;
    border-color: rgba(96, 165, 250, 0.28);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.98), rgba(37, 99, 235, 0.92));
    box-shadow: 0 14px 32px rgba(37, 99, 235, 0.2);
}

.btn-accent-blue:hover {
    border-color: rgba(147, 197, 253, 0.4);
    background: linear-gradient(135deg, rgba(96, 165, 250, 1), rgba(37, 99, 235, 0.94));
    box-shadow: 0 16px 36px rgba(37, 99, 235, 0.26);
}

.btn-accent-orange {
    color: #431407;
    border-color: rgba(251, 146, 60, 0.3);
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.98), rgba(249, 115, 22, 0.92));
    box-shadow: 0 14px 32px rgba(249, 115, 22, 0.18);
}

.btn-accent-orange:hover {
    border-color: rgba(253, 186, 116, 0.4);
    background: linear-gradient(135deg, rgba(253, 186, 116, 1), rgba(249, 115, 22, 0.94));
    box-shadow: 0 16px 36px rgba(249, 115, 22, 0.24);
}

.btn-accent-lime {
    color: #052e16;
    border-color: rgba(74, 222, 128, 0.3);
    background: linear-gradient(135deg, rgba(110, 231, 183, 0.98), rgba(34, 197, 94, 0.9));
    box-shadow: 0 14px 32px rgba(34, 197, 94, 0.2);
}

.btn-accent-lime:hover {
    border-color: rgba(167, 243, 208, 0.42);
    background: linear-gradient(135deg, rgba(167, 243, 208, 1), rgba(34, 197, 94, 0.94));
    box-shadow: 0 16px 36px rgba(34, 197, 94, 0.26);
}

.btn-xs-inline {
    min-height: 2rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.75rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.btn-row-icon {
    min-height: 2rem;
    min-width: 2rem;
    padding: 0.45rem;
    border-radius: 0.75rem;
}

.app-toggle,
.app-checkbox {
    appearance: none;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.app-toggle {
    width: 2rem;
    height: 1.2rem;
    border-radius: 999px;
    border: 1px solid var(--control-border);
    background: var(--control-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.app-toggle::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.95);
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.app-toggle:checked {
    background: linear-gradient(135deg, rgba(103, 232, 249, 0.98), rgba(34, 211, 238, 0.88));
    border-color: rgba(103, 232, 249, 0.42);
}

.app-toggle:checked::after {
    transform: translateX(0.8rem);
    background: #06202a;
}

.app-checkbox {
    width: 1rem;
    height: 1rem;
    border-radius: 0.32rem;
    border: 1px solid var(--field-border);
    background: var(--field-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.app-checkbox:checked {
    background: linear-gradient(135deg, rgba(103, 232, 249, 0.98), rgba(34, 211, 238, 0.88));
    border-color: rgba(103, 232, 249, 0.42);
}

.app-checkbox:checked::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(-45deg, transparent 56%, #06202a 56%, #06202a 66%, transparent 66%) center/68% 68% no-repeat,
        linear-gradient(45deg, transparent 34%, #06202a 34%, #06202a 44%, transparent 44%) center/68% 68% no-repeat;
}

.app-toggle:focus-visible,
.app-checkbox:focus-visible {
    outline: none;
    box-shadow: var(--field-shadow);
}

.app-segmented {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.12);
}

.app-segmented-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.25rem;
    padding: 0.5rem 0.9rem;
    border-radius: 0.7rem;
    color: var(--control-text);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.app-segmented-btn:hover {
    color: var(--control-text-strong);
    background: rgba(255, 255, 255, 0.05);
}

.btn-success {
    background: var(--color-neon-green);
    color: white;
    border-color: var(--color-neon-green);
}
.btn-success:hover { background: #16a34a; border-color: #16a34a; }

.btn-warning {
    background: var(--color-neon-yellow);
    color: black;
    border-color: var(--color-neon-yellow);
}
.btn-warning:hover { background: #ca8a04; border-color: #ca8a04; }

.btn-danger {
    background: #ef4444;
    color: white;
    border-color: #ef4444;
}
.btn-danger:hover { background: #dc2626; border-color: #dc2626; }

.btn-square { padding: 0.5rem; }

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn.loading {
    pointer-events: none;
    opacity: 0.7;
}

.input {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.625rem 0.875rem;
    background: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: 0.95rem;
    color: var(--control-text-strong);
    font-size: 0.875rem;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.input:focus {
    outline: none;
    background: var(--field-bg-hover);
    border-color: var(--field-border-focus);
    box-shadow: var(--field-shadow);
}

.input-search-sm {
    min-height: 2.25rem;
    padding: 0.375rem 0.75rem 0.375rem 2.25rem;
    background: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: 0.8rem;
    color: var(--control-text-strong);
    font-size: 0.75rem;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.input-search-sm:focus {
    outline: none;
    background: var(--field-bg-hover);
    border-color: var(--field-border-focus);
    box-shadow: var(--field-shadow);
}

.input-search-sm::placeholder {
    color: var(--field-placeholder);
}

select {
    min-height: 2.75rem;
    background: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: 0.95rem;
    color: var(--control-text-strong);
    padding: 0.625rem 0.875rem;
    font-size: 0.75rem;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

select:focus {
    outline: none;
    background: var(--field-bg-hover);
    border-color: var(--field-border-focus);
    box-shadow: var(--field-shadow);
}

.input::placeholder,
textarea::placeholder,
select:invalid {
    color: var(--field-placeholder);
}

textarea.input {
    min-height: 7rem;
    line-height: 1.55;
    resize: vertical;
}

.btn-confirm {
    color: #431407;
    border-color: rgba(251, 191, 36, 0.32);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.98), rgba(245, 158, 11, 0.92));
    box-shadow: 0 14px 32px rgba(245, 158, 11, 0.18);
}

.btn-confirm:hover {
    border-color: rgba(252, 211, 77, 0.42);
    background: linear-gradient(135deg, rgba(252, 211, 77, 1), rgba(245, 158, 11, 0.94));
    box-shadow: 0 16px 36px rgba(245, 158, 11, 0.24);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.modal-actions .btn {
    min-height: 2.5rem;
    border-radius: 0.9rem;
    font-weight: 600;
}

/* Modal layout system: header and action bar stay visible, only the body
   scrolls. The panel is capped to the viewport, and the overlay itself
   scrolls as a last resort (margin:auto keeps an oversized panel reachable
   from the top), so Save/Cancel can never end up off-screen on short
   displays — e.g. the scheduled-task editor on small laptop screens. */
.modal-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    display: flex;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    overflow-y: auto;
}

.modal-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 42rem;
    margin: auto;
    min-height: 0;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    padding: 0;
}

.modal-panel-head {
    flex: 0 0 auto;
    padding: 1.25rem 1.5rem 0.75rem;
}

.modal-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.25rem 1.5rem 1rem;
}

.modal-panel-foot {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem 1.25rem;
    border-top: 1px solid var(--color-space-border);
}

dialog {
    background: transparent;
    color: #e5e7eb;
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.modal-box {
    background: var(--color-space-900);
    border: 1px solid var(--color-space-border);
    border-radius: 0.75rem;
    color: #e5e7eb;
}

.modal-backdrop {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(42, 42, 62, 0.6);
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(42, 42, 62, 0.9);
}

table { width: 100%; border-collapse: collapse; }

th { text-align: left; }

table tr {
    background: transparent;
}

table tr:hover {
    background: rgba(34, 211, 238, 0.04);
}

table td {
    background: transparent;
}

table button {
    background: transparent;
}

table .btn-outline {
    background: transparent;
    border-color: rgba(42, 42, 62, 0.8);
    color: #9ca3af;
}

table .btn-outline:hover {
    background: rgba(255, 255, 255, 0.05);
    color: white;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.transition-all { transition: all 0.15s ease; }
.transition-colors { transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }
.transition-transform { transition: transform 0.15s ease; }

.duration-300 { transition-duration: 300ms; }
.duration-200 { transition-duration: 200ms; }

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.inline-block { display: inline-block; }
.block { display: block; }
.hidden { display: none; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }

.top-3 { top: 0.75rem; }
.top-2 { top: 0.5rem; }
.top-4 { top: 1rem; }
.top-14 { top: 3.5rem; }
.right-3 { right: 0.75rem; }
.right-4 { right: 1rem; }
.right-0 { right: 0; }
.left-0 { left: 0; }
.left-3 { left: 0.75rem; }
.bottom-0 { bottom: 0; }

.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-\[100\] { z-index: 100; }

.w-1 { width: 0.25rem; }
.w-1\.5 { width: 0.375rem; }
.w-2 { width: 0.5rem; }
.w-3 { width: 0.75rem; }
.w-3\.5 { width: 0.875rem; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-8 { width: 2rem; }
.w-12 { width: 3rem; }
.w-14 { width: 3.5rem; }
.w-16 { width: 4rem; }
.w-20 { width: 5rem; }
.w-24 { width: 6rem; }
.w-32 { width: 8rem; }
.w-40 { width: 10rem; }
.w-48 { width: 12rem; }
.w-64 { width: 16rem; }
.w-full { width: 100%; }
.w-px { width: 1px; }

.h-1 { height: 0.25rem; }
.h-1\.5 { height: 0.375rem; }
.h-2 { height: 0.5rem; }
.h-2\.5 { height: 0.625rem; }
.h-3 { height: 0.75rem; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-8 { height: 2rem; }
.h-12 { height: 3rem; }
.h-11 { height: 2.75rem; }
.h-14 { height: 3.5rem; }
.h-full { height: 100%; }
.h-auto { height: auto; }
.h-\[calc\(100vh-56px\)\] { height: calc(100vh - 56px); }

.min-w-0 { min-width: 0; }
.min-w-\[860px\] { min-width: 860px; }
.min-w-\[200px\] { min-width: 200px; }

/* ─── Collapsible Sidebar ─────────────────────────────────────────────────── */
.sidebar {
    position: static;
    width: 16rem; /* 256px expanded */
    flex-shrink: 0;
    transition: width 0.2s ease;
    overflow: hidden;
    height: 100%;
    z-index: 45;
    padding: 1rem 0.75rem 0.75rem;
    background:
        linear-gradient(180deg, rgba(15, 15, 26, 0.96), rgba(10, 10, 18, 0.98)),
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.08), transparent 34%);
    border-right: 1px solid rgba(71, 85, 105, 0.24);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.03);
}

.sidebar.collapsed {
    width: 3.5rem; /* 56px collapsed — icons only */
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.sidebar.collapsed .sidebar-label,
.sidebar.collapsed .sidebar-section-title,
.sidebar.collapsed .sidebar-footer,
.sidebar.collapsed .sidebar-section-chevron {
    display: none;
}

.sidebar.collapsed .sidebar-section-toggle {
    display: none;
}

.sidebar.collapsed .nav-item {
    justify-content: center;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    min-height: 2.6rem;
    border-radius: 0.9rem;
}

.sidebar.collapsed .sidebar-inner {
    width: 100%;
    align-items: center;
}

.sidebar.collapsed .sidebar-head {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0.5rem;
}

.sidebar-scroll {
    display: flex;
    flex-direction: column;
    gap: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}

.sidebar-group + .sidebar-group {
    margin-top: 0;
}

.sidebar-group {
    padding: 0;
    border-top: 1px solid rgba(148, 163, 184, 0.06);
}

.sidebar-group:first-child {
    padding-top: 0;
    border-top: none;
}

/* Keep collapsed sidebar spacing controlled here, after the base group rules. */
.sidebar.collapsed .sidebar-scroll {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    gap: 0 !important;
}

.sidebar-head {
    margin: 0 0.375rem 0.75rem;
}

.sidebar-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 2.75rem;
    padding: 0 0.875rem;
    margin-bottom: 0;
    color: #cbd5e1;
    background: transparent;
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.sidebar-section-toggle:hover {
    color: #f8fafc;
    background: rgba(255, 255, 255, 0.08);
}

.sidebar-section-toggle[aria-expanded="true"] {
    margin-bottom: 0.18rem;
}

.sidebar-section-chevron {
    flex-shrink: 0;
    color: #475569;
    transition: transform 0.2s ease;
}

.sidebar.collapsed .nav-item svg {
    margin: 0;
}

.sidebar-section-title {
    color: inherit;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.sidebar-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.75rem;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.15s ease;
    background: var(--control-bg);
    border: 1px solid var(--control-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.sidebar-collapse-btn:hover {
    color: var(--control-text-strong);
    background: var(--control-bg-hover);
    border-color: var(--control-border-hover);
}

.sidebar-collapse-btn svg {
    transition: transform 0.2s ease;
}

.sidebar.collapsed .sidebar-collapse-btn svg {
    transform: rotate(180deg);
}

.sidebar-label {
    min-width: 0;
}

.sidebar-footer {
    margin: 0.75rem 0.375rem 0;
    padding-left: 0;
    padding-right: 0;
    border-top-color: rgba(148, 163, 184, 0.1);
}

.sidebar-footer-link {
    min-height: 2.5rem;
    padding-inline: 0.875rem;
    justify-content: flex-start;
    font-weight: 500;
    color: var(--control-text);
    border: 1px solid var(--control-border);
    border-radius: 0.95rem;
    background: var(--control-bg);
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.sidebar-footer-link svg {
    flex-shrink: 0;
}

.sidebar-footer-link:hover {
    color: var(--control-text-strong);
    border-color: var(--control-border-hover);
    background: var(--control-bg-hover);
    transform: translateY(-1px);
    box-shadow: var(--control-shadow);
}

.app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4.5rem;
    padding: 0.875rem 1rem 1rem;
    background:
        linear-gradient(180deg, rgba(15, 15, 26, 0.84), rgba(15, 15, 26, 0.74)),
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.06), transparent 32%);
    border-bottom: 1px solid rgba(42, 42, 62, 0.7);
    backdrop-filter: blur(18px);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.03);
    position: relative;
    z-index: 50;
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
}

.topbar-menu-button,
.topbar-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.875rem;
    color: var(--control-text);
    background: var(--control-bg);
    border: 1px solid var(--control-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.topbar-menu-button:hover,
.topbar-icon-button:hover {
    color: var(--control-text-strong);
    background: var(--control-bg-hover);
    border-color: var(--control-border-hover);
    transform: translateY(-1px);
    box-shadow: var(--control-shadow);
}

.topbar-brand-mark {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 1rem;
}

.topbar-brand-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.topbar-brand-copy {
    min-width: 0;
}

.topbar-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.topbar-meta {
    margin-top: 0.125rem;
}

.topbar-meta-link {
    width: fit-content;
}

.topbar-actions {
    align-items: center;
}

.topbar-chip-group {
    min-height: 2.125rem;
    padding: 0.25rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(148, 163, 184, 0.12);
}

.topbar-divider {
    opacity: 0.8;
}

.topbar-status {
    min-height: 2.125rem;
    padding-left: 0.875rem;
    padding-right: 0.875rem;
}

.app-shell {
    display: flex;
    height: calc(100vh - 56px);
    min-height: 0;
    position: relative;
}

.main-panel {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.main-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.main-scroll.main-scroll-chat {
    overflow: hidden;
}

.page-surface {
    min-height: 100%;
    padding: 0.75rem;
}

.page-surface.page-surface-chat {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.chat-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
    height: 100%;
    min-height: 0;
}

.chat-main-panel,
.chat-side-panel {
    border-radius: 1rem;
    border: 1px solid rgba(71, 85, 105, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 34px rgba(2, 6, 23, 0.2);
}

.chat-main-panel {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    align-content: stretch;
}

.chat-view {
    padding-top: 0.35rem;
}

.chat-header {
    align-items: flex-start;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(42, 42, 62, 0.45);
}

.chat-header-copy {
    min-width: 0;
}

.chat-header-eyebrow {
    color: #64748b;
}

.chat-header-subtitle {
    max-width: 42rem;
    line-height: 1.6;
}

.chat-header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.chat-header-button,
.chat-control-button,
.chat-status-button,
.chat-side-action {
    color: var(--control-text-strong);
    border-color: var(--control-border);
    background: var(--control-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.chat-header-button:hover,
.chat-control-button:hover,
.chat-status-button:hover,
.chat-side-action:hover {
    color: var(--control-text-strong);
    background: var(--control-bg-hover);
    border-color: var(--control-border-hover);
    box-shadow: var(--control-shadow);
}

.chat-header-button-primary {
    background: linear-gradient(180deg, rgba(34, 211, 238, 0.92), rgba(8, 145, 178, 0.92));
    border-color: transparent;
}

.chat-header-button-primary:hover {
    background: linear-gradient(180deg, rgba(103, 232, 249, 0.96), rgba(14, 165, 233, 0.94));
    border-color: transparent;
}

.chat-control-panel {
    padding: 1rem;
    border-color: rgba(71, 85, 105, 0.28);
    border-radius: 1.15rem;
    background:
        linear-gradient(180deg, rgba(24, 32, 48, 0.82), rgba(17, 24, 39, 0.74));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 22px rgba(2, 6, 23, 0.08);
}

.chat-control-grid {
    gap: 0.85rem;
}

.chat-control-field {
    display: flex;
    flex-direction: column;
}

.chat-control-label {
    color: #cbd5e1;
    letter-spacing: 0.14em;
}

.chat-control-input {
    border-radius: 0.95rem;
    color: var(--control-text-strong);
    background: var(--field-bg);
    border-color: var(--field-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.chat-control-input::placeholder {
    color: var(--field-placeholder);
}

.chat-control-toggle,
.chat-control-button {
    border-radius: 0.95rem;
}

.chat-control-toggle {
    color: var(--control-text-strong);
    background: var(--control-bg);
    border-color: var(--control-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.chat-control-toggle-pill {
    min-height: 2.5rem;
    padding-right: 0.95rem;
}

.chat-control-toggle-input {
    margin-right: 0.05rem;
}

.chat-control-button {
    min-height: 2.5rem;
    padding-left: 0.95rem;
    padding-right: 0.95rem;
}

.chat-control-helper {
    padding-left: 0.15rem;
}

.chat-system-prompt {
    margin-top: 0.9rem;
    padding-top: 0.95rem;
}

.chat-status-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.chat-status-label {
    color: #cbd5e1;
}

.chat-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 1.85rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.24);
}

.chat-status-pill-muted {
    background: rgba(255, 255, 255, 0.06);
}

.chat-status-pill-secondary {
    background: rgba(15, 23, 42, 0.42);
}

.chat-status-button-muted {
    background: rgba(255, 255, 255, 0.03);
}

.chat-status-bar {
    padding: 0.9rem 1rem;
    border: 1px solid rgba(71, 85, 105, 0.24);
    border-radius: 1rem;
    background:
        linear-gradient(180deg, rgba(20, 28, 42, 0.78), rgba(16, 24, 36, 0.68));
}

.chat-status-count {
    flex-shrink: 0;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.chat-message-stage {
    min-height: 0;
    height: 100%;
    padding: 1.25rem 1.1rem;
    border-radius: 1.15rem;
    border-color: rgba(71, 85, 105, 0.24);
    background:
        linear-gradient(180deg, rgba(10, 15, 24, 0.88), rgba(12, 18, 28, 0.8)),
        radial-gradient(circle at top center, rgba(34, 211, 238, 0.04), transparent 34%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.chat-empty-card {
    max-width: 22rem;
    padding: 1.4rem 1.25rem;
    border-radius: 1.1rem;
    border: 1px dashed rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.28);
}

.chat-empty-title {
    color: #e2e8f0;
    font-weight: 600;
}

.chat-empty-desc {
    color: #94a3b8;
    line-height: 1.7;
}

.chat-composer {
    margin-top: 0;
    padding: 1rem 1rem 0.15rem;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    background:
        linear-gradient(180deg, rgba(26, 35, 50, 0.72), rgba(30, 41, 59, 0.64));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.chat-composer-input {
    min-height: 6.5rem;
    padding: 0.9rem 1rem;
    line-height: 1.65;
    border-radius: 1.05rem;
    color: #f8fafc;
    background:
        linear-gradient(180deg, rgba(241, 245, 249, 0.12), rgba(226, 232, 240, 0.08));
    border-color: rgba(191, 219, 254, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 22px rgba(2, 6, 23, 0.1);
}

.chat-composer-input::placeholder {
    color: #94a3b8;
}

.chat-composer-input:focus {
    border-color: rgba(125, 211, 252, 0.48);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 3px rgba(56, 189, 248, 0.12);
}

.chat-composer-footer {
    gap: 0.75rem;
    padding: 0.35rem 0 0;
}

.chat-side-panel {
    background: linear-gradient(180deg, rgba(16, 20, 32, 0.82), rgba(12, 16, 26, 0.72));
}

.chat-side-header {
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(42, 42, 62, 0.45);
}

.chat-side-tabs {
    padding: 0.2rem;
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(148, 163, 184, 0.14);
}

.chat-side-tab {
    min-height: 2rem;
    border-radius: 0.7rem;
}

.chat-side-tab-active {
    background: rgba(30, 41, 59, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.chat-side-summary {
    color: #94a3b8;
}

.chat-side-count {
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.chat-side-close {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
}

.chat-message-bubble {
    width: fit-content;
    max-width: min(46rem, 84%);
    padding: 0.95rem 1rem 1rem;
    border-radius: 1.1rem;
    position: relative;
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.18);
}

.chat-message-row.justify-end .chat-message-bubble {
    max-width: min(42rem, 78%);
    background:
        linear-gradient(180deg, rgba(8, 145, 178, 0.2), rgba(14, 116, 144, 0.15));
    border-color: rgba(34, 211, 238, 0.28);
    box-shadow: 0 12px 26px rgba(8, 145, 178, 0.14);
}

.chat-message-row.justify-start .chat-message-bubble {
    background:
        linear-gradient(180deg, rgba(34, 80, 120, 0.3), rgba(27, 63, 97, 0.24));
    border-color: rgba(96, 165, 250, 0.22);
    box-shadow: 0 10px 24px rgba(30, 64, 175, 0.1);
}

.chat-message-row.justify-end .chat-message-bubble-dispatch {
    background:
        linear-gradient(180deg, rgba(139, 92, 246, 0.2), rgba(124, 58, 237, 0.14));
    border-color: rgba(167, 139, 250, 0.34);
    box-shadow: 0 10px 22px rgba(124, 58, 237, 0.14);
}

.chat-message-meta {
    align-items: center;
    margin-bottom: 0.65rem;
    opacity: 1;
}

.chat-message-body {
    margin: 0;
    line-height: 1.68;
    color: #f8fafc;
}

.chat-message-detail {
    padding: 0.85rem 0.9rem;
    border-radius: 0.95rem;
    border-color: rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.05);
}

.chat-command-output-toggle {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
}

.chat-command-output-toggle:hover .chat-command-output-chevron {
    color: #cbd5f5;
}

.chat-command-output-chevron {
    transition: color 120ms ease;
}

.chat-command-output-body {
    max-height: 360px;
    overflow-y: auto;
}

.chat-message-callout {
    padding: 0.9rem 0.95rem;
    border-radius: 0.95rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 8px 18px rgba(2, 6, 23, 0.08);
}

.chat-message-callout-title {
    font-weight: 600;
    line-height: 1.45;
}

.chat-message-citations {
    margin-top: 0.9rem;
}

.chat-message-citation {
    padding: 0.38rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(148, 163, 184, 0.2);
}

.chat-composer-hint {
    padding-left: 0.1rem;
    color: #94a3b8;
    letter-spacing: 0.01em;
}

.chat-composer-submit {
    min-width: 6.75rem;
    min-height: 2.75rem;
    padding: 0.65rem 1.1rem;
    border-radius: 0.95rem;
    font-weight: 600;
    box-shadow: 0 10px 24px rgba(34, 211, 238, 0.18);
}

.chat-composer-submit:hover {
    box-shadow: 0 14px 30px rgba(34, 211, 238, 0.24);
}

.chat-session-card,
.chat-runtime-card {
    background: linear-gradient(180deg, rgba(25, 35, 52, 0.66), rgba(18, 26, 40, 0.58));
    border-color: rgba(71, 85, 105, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.chat-session-card-active {
    border-color: rgba(103, 232, 249, 0.32);
    background: linear-gradient(180deg, rgba(18, 58, 83, 0.34), rgba(14, 116, 144, 0.16));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px rgba(34, 211, 238, 0.08);
}

.chat-session-card-unread {
    background: linear-gradient(180deg, rgba(66, 32, 6, 0.22), rgba(18, 26, 40, 0.58));
}

.chat-session-card:hover,
.chat-runtime-card:hover {
    border-color: rgba(125, 211, 252, 0.26);
    background: linear-gradient(180deg, rgba(31, 44, 65, 0.74), rgba(23, 34, 50, 0.66));
}

.chat-runtime-empty {
    min-height: 5.25rem;
    display: flex;
    align-items: center;
}

.chat-runtime-cwd-group {
    border-radius: 0.6rem;
    background: rgba(15, 23, 42, 0.32);
    border: 1px solid rgba(148, 163, 184, 0.12);
    padding: 0.5rem 0.5rem 0.6rem 0.5rem;
}

.chat-runtime-cwd-header {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: inherit;
    transition: background 120ms ease;
}

.chat-runtime-cwd-count {
    min-width: 1.5rem;
    text-align: center;
}

.chat-session-title,
.chat-runtime-title {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.chat-session-title-row,
.chat-runtime-head {
    align-items: flex-start;
}

.chat-session-badge {
    background: rgba(251, 191, 36, 0.16);
    border-color: rgba(251, 191, 36, 0.28);
    letter-spacing: 0.06em;
}

.chat-session-remove,
.chat-side-close {
    transition: background-color 0.18s ease, color 0.18s ease;
}

.chat-session-remove:hover,
.chat-side-close:hover {
    background: rgba(248, 113, 113, 0.12);
}

.chat-session-subtitle,
.chat-runtime-meta,
.chat-session-meta,
.chat-runtime-summary {
    color: #94a3b8;
}

.chat-runtime-footer {
    padding-top: 0.1rem;
}

.chat-runtime-toolbar {
    padding: 0.1rem 0.1rem 0 0.1rem;
}

.chat-runtime-status {
    letter-spacing: 0.04em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.btn-danger {
    color: #fff;
    border-color: rgba(248, 113, 113, 0.3);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.98), rgba(220, 38, 38, 0.92));
    box-shadow: 0 14px 32px rgba(220, 38, 38, 0.18);
}

.btn-danger:hover {
    border-color: rgba(252, 165, 165, 0.38);
    background: linear-gradient(135deg, rgba(248, 113, 113, 1), rgba(220, 38, 38, 0.94));
    box-shadow: 0 16px 36px rgba(220, 38, 38, 0.24);
}

.chat-runtime-time {
    color: #64748b;
}

html.light .chat-main-panel,
html.light .chat-side-panel {
    border-color: rgba(197, 203, 214, 0.7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 14px 30px rgba(148, 163, 184, 0.1);
}

html.light .chat-header,
html.light .chat-side-header,
html.light .chat-composer {
    border-color: rgba(197, 203, 214, 0.72);
}

html.light .chat-control-panel,
html.light .chat-status-bar,
html.light .chat-message-stage,
html.light .chat-composer-input,
html.light .chat-message-detail,
html.light .chat-side-panel,
html.light .chat-side-tabs,
html.light .chat-session-card,
html.light .chat-runtime-card {
    border-color: rgba(197, 203, 214, 0.72);
}

html.light .chat-control-panel,
html.light .chat-status-bar,
html.light .chat-message-stage,
html.light .chat-side-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.84));
}

html.light .chat-message-detail {
    background: rgba(248, 250, 252, 0.86);
}

html.light .chat-composer-input,
html.light .chat-side-tabs,
html.light .chat-session-card,
html.light .chat-runtime-card {
    background: rgba(255, 255, 255, 0.78);
}

html.light .chat-side-tabs {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(197, 203, 214, 0.78);
}

html.light .chat-side-count {
    background: rgba(255, 255, 255, 0.86);
    border-color: rgba(197, 203, 214, 0.78);
    color: #64748b;
}

html.light .chat-session-card,
html.light .chat-runtime-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.9));
}

html.light .chat-session-card-active {
    background: linear-gradient(180deg, rgba(224, 242, 254, 0.96), rgba(239, 246, 255, 0.94));
    border-color: rgba(125, 211, 252, 0.7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 0 0 1px rgba(186, 230, 253, 0.9);
}

html.light .chat-session-card-unread {
    background: linear-gradient(180deg, rgba(255, 251, 235, 0.98), rgba(255, 255, 255, 0.94));
    border-color: rgba(251, 191, 36, 0.34);
}

html.light .chat-session-card:hover,
html.light .chat-runtime-card:hover {
    background: linear-gradient(180deg, rgba(240, 249, 255, 0.96), rgba(248, 250, 252, 0.94));
    border-color: rgba(125, 211, 252, 0.54);
}

html.light .chat-header-eyebrow,
html.light .chat-empty-desc {
    color: #64748b;
}

html.light .chat-empty-card {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(197, 203, 214, 0.86);
}

html.light .chat-empty-title {
    color: #0f172a;
}

html.light .chat-message-bubble {
    box-shadow: 0 10px 22px rgba(148, 163, 184, 0.12);
}

html.light .chat-control-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.92));
}

html.light .chat-status-bar {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.9));
}

html.light .chat-composer {
    background: linear-gradient(180deg, rgba(250, 252, 255, 0.98), rgba(241, 245, 249, 0.94));
    border-top-color: rgba(191, 219, 254, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

html.light .chat-control-label,
html.light .chat-status-label {
    color: #64748b;
}

html.light .chat-header-button,
html.light .chat-control-button,
html.light .chat-status-button,
html.light .chat-side-action {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(197, 203, 214, 0.86);
}

html.light .chat-header-button:hover,
html.light .chat-control-button:hover,
html.light .chat-status-button:hover,
html.light .chat-side-action:hover {
    background: rgba(240, 249, 255, 0.98);
    border-color: rgba(125, 211, 252, 0.56);
}

html.light .chat-header-button-primary {
    color: #082f49;
    background: linear-gradient(180deg, rgba(125, 211, 252, 0.98), rgba(186, 230, 253, 0.96));
    border-color: rgba(125, 211, 252, 0.7);
}

html.light .chat-control-input,
html.light .chat-control-toggle,
html.light .chat-status-pill,
html.light .chat-composer-input {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(197, 203, 214, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html.light .chat-composer-input {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 0.98));
    border-color: rgba(191, 219, 254, 0.88);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 8px 18px rgba(148, 163, 184, 0.08);
}

html.light .chat-composer-input:focus {
    border-color: rgba(125, 211, 252, 0.96);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 0 0 3px rgba(125, 211, 252, 0.18);
}

html.light .chat-control-input::placeholder,
html.light .chat-composer-input::placeholder,
html.light .chat-composer-hint {
    color: #64748b;
}

html.light .chat-status-count {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(197, 203, 214, 0.82);
    color: #64748b;
}

html.light .chat-side-tab-active {
    background: linear-gradient(180deg, rgba(224, 242, 254, 0.98), rgba(239, 246, 255, 0.96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
}

html.light .chat-message-row.justify-end .chat-message-bubble {
    color: #0f172a;
    background: linear-gradient(180deg, rgba(186, 230, 253, 0.96), rgba(224, 242, 254, 0.94));
    border-color: rgba(125, 211, 252, 0.92);
    box-shadow: 0 10px 22px rgba(125, 211, 252, 0.18);
}

html.light .chat-message-row.justify-start .chat-message-bubble {
    color: #0f172a;
    background: linear-gradient(180deg, rgba(224, 231, 255, 0.95), rgba(239, 246, 255, 0.94));
    border-color: rgba(165, 180, 252, 0.72);
    box-shadow: 0 10px 22px rgba(165, 180, 252, 0.14);
}

html.light .chat-message-row.justify-end .chat-message-bubble-dispatch {
    color: #1e1b4b;
    background: linear-gradient(180deg, rgba(221, 214, 254, 0.96), rgba(237, 233, 254, 0.94));
    border-color: rgba(167, 139, 250, 0.7);
    box-shadow: 0 10px 22px rgba(167, 139, 250, 0.18);
}

html.light .chat-message-body {
    color: #0f172a;
}

html.light .chat-message-detail {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(197, 203, 214, 0.78);
}

html.light .chat-message-citation {
    color: #334155;
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(197, 203, 214, 0.78);
}

html.light .chat-composer-submit {
    box-shadow: 0 10px 22px rgba(14, 165, 233, 0.16);
}

html.light .chat-session-subtitle,
html.light .chat-runtime-meta,
html.light .chat-session-meta,
html.light .chat-runtime-summary {
    color: #64748b;
}

.chat-control-fixed,
.chat-control-flex,
.chat-history-panel {
    min-width: 0;
}

.page-surface.page-surface-chat > .view-container[x-show="activeTab === 'chat'"] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    max-height: 100%;
}

@media (max-width: 1023px) {
    .sidebar {
        position: fixed;
        top: 3.5rem;
        bottom: 0;
        left: 0;
        width: 16rem;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
    }

    .sidebar.sidebar-open {
        transform: translateX(0);
    }

    .sidebar .sidebar-inner {
        width: 16rem !important;
    }

    .sidebar .sidebar-section-toggle {
        display: flex;
    }

    .sidebar .sidebar-footer {
        display: block;
    }

    .sidebar-collapse-btn svg {
        transform: rotate(180deg);
    }

    .chat-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .chat-history-panel,
    .chat-history-panel .view-card {
        width: 100% !important;
        max-height: none;
    }

    .chat-main-panel {
        grid-template-rows: auto auto auto minmax(16rem, 1fr) auto;
    }

    .chat-header {
        flex-direction: column;
    }

    .chat-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .chat-composer-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .chat-message-bubble,
    .chat-message-row.justify-end .chat-message-bubble {
        max-width: 100%;
    }

    .app-topbar {
        align-items: flex-start;
        flex-direction: column;
        padding-bottom: 0.875rem;
    }

    .topbar-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .dashboard-hero {
        flex-direction: column;
    }

    .dashboard-hero-side {
        width: 100%;
        align-items: flex-start;
    }

    .dashboard-hero-actions {
        justify-content: flex-start;
    }

    .dashboard-focus-grid,
    .dashboard-focus-lists {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .view-container {
        padding: 1rem;
    }

    .page-surface {
        padding: 0.25rem;
    }

    .app-topbar {
        gap: 0.75rem;
        min-height: auto;
        padding: 0.875rem 0.875rem 0.75rem;
    }

    .topbar-brand {
        width: 100%;
    }

    .topbar-brand-mark {
        width: 2.5rem;
        height: 2.5rem;
    }

    .topbar-actions {
        gap: 0.5rem;
    }

    .dashboard-hero {
        padding: 1.125rem;
        border-radius: 1rem;
    }

    .dashboard-hero-title {
        font-size: 1.75rem;
    }

    .dashboard-hero-subtitle {
        font-size: 0.92rem;
        line-height: 1.6;
    }

    .dashboard-focus-card,
    .dashboard-actions-card {
        padding: 1rem;
    }

    .dashboard-focus-title {
        font-size: 1.15rem;
    }

    .chat-control-fixed,
    .chat-control-flex {
        flex: 1 1 100% !important;
    }

    .chat-message-stage {
        padding: 1rem 0.8rem;
    }

    .chat-composer {
        padding-left: 0;
        padding-right: 0;
    }

    .chat-composer-input {
        min-height: 5.6rem;
    }

    .chat-composer-submit {
        width: 100%;
    }
}
.min-h-screen { min-height: 100vh; }

.max-w-lg { max-width: 32rem; }
.max-w-md { max-width: 28rem; }
.max-w-sm { max-width: 24rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-\[320px\] { max-width: 320px; }

/* Bracketed size utilities. This stylesheet is hand-rolled (no Tailwind
   build), so Tailwind-style arbitrary values used in the views only work
   when defined here — keep this list in sync with the markup. */
.max-w-\[90\%\] { max-width: 90%; }
.max-w-\[120px\] { max-width: 120px; }
.max-w-\[180px\] { max-width: 180px; }
.max-w-\[200px\] { max-width: 200px; }
.max-w-\[220px\] { max-width: 220px; }
.max-w-\[340px\] { max-width: 340px; }
.max-h-\[220px\] { max-height: 220px; }
.max-h-\[240px\] { max-height: 240px; }
.max-h-\[400px\] { max-height: 400px; }
.max-h-\[420px\] { max-height: 420px; }
.max-h-\[480px\] { max-height: 480px; }
.max-h-\[560px\] { max-height: 560px; }
.max-h-\[28rem\] { max-height: 28rem; }
.max-h-\[60vh\] { max-height: 60vh; }
.max-h-\[90vh\] { max-height: 90vh; }
.min-h-\[140px\] { min-height: 140px; }
.min-h-\[320px\] { min-height: 320px; }
.min-h-\[70vh\] { min-height: 70vh; }
.min-w-\[180px\] { min-width: 180px; }
.min-w-\[220px\] { min-width: 220px; }
.min-w-\[240px\] { min-width: 240px; }
.min-w-\[260px\] { min-width: 260px; }
.min-w-\[280px\] { min-width: 280px; }
.min-w-\[300px\] { min-width: 300px; }
.min-w-\[700px\] { min-width: 700px; }
.min-w-\[1120px\] { min-width: 1120px; }
.w-\[155px\] { width: 155px; }
.w-\[320px\] { width: 320px; }

.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-6 { padding-top: 1.5rem; }
.pb-4 { padding-bottom: 1rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.pl-6 { padding-left: 1.5rem; }
.pl-9 { padding-left: 2.25rem; }
.pr-6 { padding-right: 1.5rem; }

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-auto { margin-top: auto; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.ml-1 { margin-left: 0.25rem; }
.ml-auto { margin-left: auto; }
.mr-2 { margin-right: 0.5rem; }

.text-\[10px\] { font-size: 0.625rem; }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }

.tracking-tight { letter-spacing: -0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }
.leading-relaxed { line-height: 1.625; }
.leading-tight { line-height: 1.25; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre-wrap { white-space: pre-wrap; }

.text-white { color: white; }
.text-gray-200 { color: #e5e7eb; }
.text-gray-300 { color: #d1d5db; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-700\/40 { color: rgba(55, 65, 81, 0.4); }

.text-red-400 { color: #f87171; }
.text-red-300 { color: #fca5a5; }
.text-red-500 { color: #ef4444; }
.text-yellow-400 { color: #facc15; }
.text-yellow-500 { color: #eab308; }
.text-blue-400 { color: #60a5fa; }
.text-blue-500 { color: #3b82f6; }
.text-orange-400 { color: #fb923c; }
.text-pink-400 { color: #f472b6; }

.bg-white\/5 { background-color: rgba(255, 255, 255, 0.05); }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.bg-black\/50 { background-color: rgba(0, 0, 0, 0.5); }
.bg-black\/70 { background-color: rgba(0, 0, 0, 0.7); }
.bg-space-900\/90 { background-color: rgba(15, 15, 26, 0.9); }
.bg-gray-500 { background-color: #6b7280; }
.bg-neon-green\/10 { background-color: rgba(34, 197, 94, 0.1); }
.bg-red-600 { background-color: #dc2626; }

.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
.from-neon-purple { --tw-gradient-from: var(--color-neon-purple); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.to-blue-600 { --tw-gradient-to: #2563eb; }

.border { border-width: 1px; }
.border-t { border-top-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-r { border-right-width: 1px; }
.border-2 { border-width: 2px; }
.border-0 { border-width: 0; }
.border-none { border: none; }
.border-space-border\/20 { border-color: rgba(42, 42, 62, 0.2); }
.border-space-border\/30 { border-color: rgba(42, 42, 62, 0.3); }
.border-space-border\/40 { border-color: rgba(42, 42, 62, 0.4); }
.border-space-border\/50 { border-color: rgba(42, 42, 62, 0.5); }
.border-space-border\/60 { border-color: rgba(42, 42, 62, 0.6); }
.border-space-border\/80 { border-color: rgba(42, 42, 62, 0.8); }
.border-red-500\/20 { border-color: rgba(239, 68, 68, 0.2); }
.border-red-500\/30 { border-color: rgba(239, 68, 68, 0.3); }
.border-red-500\/50 { border-color: rgba(239, 68, 68, 0.5); }
.border-yellow-500\/20 { border-color: rgba(234, 179, 8, 0.2); }
.border-yellow-500\/30 { border-color: rgba(234, 179, 8, 0.3); }
.border-yellow-500\/50 { border-color: rgba(234, 179, 8, 0.5); }
.border-blue-500\/30 { border-color: rgba(59, 130, 246, 0.3); }
.border-neon-purple\/20 { border-color: rgba(168, 85, 247, 0.2); }
.border-neon-purple\/30 { border-color: rgba(168, 85, 247, 0.3); }
.border-neon-purple\/50 { border-color: rgba(168, 85, 247, 0.5); }
.border-neon-cyan\/20 { border-color: rgba(34, 211, 238, 0.2); }
.border-neon-green\/20 { border-color: rgba(34, 197, 94, 0.2); }
.border-orange-500\/30 { border-color: rgba(249, 115, 22, 0.3); }
.border-pink-500\/30 { border-color: rgba(236, 72, 153, 0.3); }

.rounded { border-radius: 0.25rem; }
.rounded-full { border-radius: 9999px; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }

.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.shadow-none { box-shadow: none; }

.backdrop-blur-sm { backdrop-filter: blur(4px); }
.backdrop-blur-md { backdrop-filter: blur(12px); }

.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

.transform {
    transform:
        translateX(var(--tw-translate-x, 0))
        translateY(var(--tw-translate-y, 0))
        rotate(var(--tw-rotate, 0))
        skewX(var(--tw-skew-x, 0))
        skewY(var(--tw-skew-y, 0))
        scaleX(var(--tw-scale-x, 1))
        scaleY(var(--tw-scale-y, 1));
}
.-translate-x-full { --tw-translate-x: -100%; }
.translate-x-0 { --tw-translate-x: 0; }
.translate-x-4 { --tw-translate-x: 1rem; }
.translate-x-8 { --tw-translate-x: 2rem; }
.scale-95 { --tw-scale-x: 0.95; --tw-scale-y: 0.95; }
.scale-100 { --tw-scale-x: 1; --tw-scale-y: 1; }
.rotate-180 { --tw-rotate: 180deg; }

.cursor-pointer { cursor: pointer; }
.cursor-help { cursor: help; }
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

.group:hover .group-hover\:text-white { color: white; }
.group:hover .group-hover\:text-cyan-400 { color: #22d3ee; }
.group:hover .group-hover\:text-cyan-400\/70 { color: rgba(34, 211, 238, 0.7); }
.group:hover .group-hover\:text-green-400 { color: #4ade80; }
.group:hover .group-hover\:text-green-400\/70 { color: rgba(74, 222, 128, 0.7); }
.group:hover .group-hover\:text-red-400 { color: #f87171; }
.group:hover .group-hover\:text-yellow-400 { color: #facc15; }
.group:hover .group-hover\:text-yellow-400\/70 { color: rgba(250, 204, 21, 0.7); }
.group:hover .group-hover\:text-purple-400 { color: #c084fc; }
.group:hover .group-hover\:text-purple-400\/70 { color: rgba(192, 132, 252, 0.7); }
.group:hover .group-hover\:opacity-100 { opacity: 1; }

.hover\:bg-white\/5:hover { background-color: rgba(255, 255, 255, 0.05); }
.hover\:bg-white\/10:hover { background-color: rgba(255, 255, 255, 0.1); }
.hover\:bg-red-500\/10:hover { background-color: rgba(239, 68, 68, 0.1); }
.hover\:bg-red-500\/20:hover { background-color: rgba(239, 68, 68, 0.2); }
.hover\:bg-purple-600:hover { background-color: #9333ea; }
.hover\:text-white:hover { color: white; }
.hover\:text-red-400:hover { color: #f87171; }
.hover\:border-cyan-500\/30:hover { border-color: rgba(34, 211, 238, 0.3); }
.hover\:border-green-500\/30:hover { border-color: rgba(34, 197, 94, 0.3); }
.hover\:border-yellow-500\/30:hover { border-color: rgba(234, 179, 8, 0.3); }
.hover\:border-red-500\/30:hover { border-color: rgba(239, 68, 68, 0.3); }
.hover\:border-purple-500\/30:hover { border-color: rgba(168, 85, 247, 0.3); }
.hover\:bg-cyan-500\/5:hover { background-color: rgba(34, 211, 238, 0.05); }
.hover\:bg-green-500\/5:hover { background-color: rgba(34, 197, 94, 0.05); }
.hover\:bg-yellow-500\/5:hover { background-color: rgba(234, 179, 8, 0.05); }
.hover\:bg-red-500\/5:hover { background-color: rgba(239, 68, 68, 0.05); }
.hover\:bg-purple-500\/5:hover { background-color: rgba(168, 85, 247, 0.05); }

.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pricing-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }

@media (min-width: 640px) {
    .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .sm\:col-span-1 { grid-column: span 1 / span 1; }
    .sm\:w-auto { width: auto; }
    .sm\:text-center { text-align: center; }
    .sm\:justify-center { justify-content: center; }
    .sm\:gap-2 { gap: 0.5rem; }
    .sm\:gap-3 { gap: 0.75rem; }
    .sm\:flex-none { flex: none; }
    .sm\:flex-nowrap { flex-wrap: nowrap; }
    .sm\:ml-1 { margin-left: 0.25rem; }
}

@media (max-width: 639px) {
    .pricing-summary-grid { grid-template-columns: 1fr; }
}

@media (min-width: 1024px) {
    .lg\:static { position: static; }
    .lg\:flex-shrink-0 { flex-shrink: 0; }
    .lg\:h-auto { height: auto; }
    .lg\:shadow-none { box-shadow: none; }
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:col-span-1 { grid-column: span 1 / span 1; }
    .lg\:gap-3 { gap: 0.75rem; }
    .lg\:gap-4 { gap: 1rem; }
    .lg\:p-4 { padding: 1rem; }
    .lg\:px-4 { padding-left: 1rem; padding-right: 1rem; }
    .lg\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .lg\:py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
    .lg\:text-3xl { font-size: 1.875rem; }
    .lg\:text-xs { font-size: 0.75rem; }
    .lg\:block { display: block; }
    .lg\:hidden { display: none; }
    .lg\:flex-nowrap { flex-wrap: nowrap; }
    .lg\:border { border-width: 1px; }
    .lg\:rounded-md { border-radius: 0.375rem; }
    .lg\:bg-transparent { background-color: transparent; }
    .lg\:border-transparent { border-color: transparent; }
    .lg\:w-64 { width: 16rem; }
    .lg\:w-auto { width: auto; }
    .lg\:justify-end { justify-content: flex-end; }
    .lg\:bg-space-800 { background-color: var(--color-space-800); }
    .lg\:border-neon-purple\/30 { border-color: rgba(168, 85, 247, 0.3); }
    .lg\:border-space-border\/60 { border-color: rgba(42, 42, 62, 0.6); }
    .lg\:border-space-border\/30 { border-color: rgba(42, 42, 62, 0.3); }
    .lg\:whitespace-nowrap { white-space: nowrap; }
    .lg\:flex-shrink-0 { flex-shrink: 0; }
    .lg\:hover\:bg-space-800:hover { background-color: var(--color-space-800); }
    .lg\:hover\:border-neon-purple\/30:hover { border-color: rgba(168, 85, 247, 0.3); }
    .lg\:hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
    .lg\:hover\:shadow-neon-purple\/10:hover { box-shadow: 0 0 15px rgba(168, 85, 247, 0.1); }
}

@media (min-width: 1280px) {
    .xl\:p-4 { padding: 1rem; }
    .xl\:h-16 { height: 4rem; }
    .xl\:w-16 { width: 4rem; }
}

[x-transition] { transition: opacity 0.2s ease, transform 0.2s ease; }

.fade-enter-active { transition: opacity 0.3s ease; }
.fade-enter-from { opacity: 0; }

.bg-space-800\/50 { background-color: rgba(26, 26, 40, 0.5); }
.bg-space-800\/80 { background-color: rgba(26, 26, 40, 0.8); }
.bg-space-900\/40 { background-color: rgba(15, 15, 26, 0.4); }
.bg-space-900\/50 { background-color: rgba(15, 15, 26, 0.5); }
.bg-space-900\/60 { background-color: rgba(15, 15, 26, 0.6); }

.bg-space-900\/20 { background-color: rgba(15, 15, 26, 0.2); }
.bg-neon-purple\/10 { background-color: rgba(168, 85, 247, 0.1); }
.bg-neon-purple\/20 { background-color: rgba(168, 85, 247, 0.2); }

.bg-yellow-500\/10 { background-color: rgba(234, 179, 8, 0.1); }
.bg-blue-500\/10 { background-color: rgba(59, 130, 246, 0.1); }
.bg-gray-500\/10 { background-color: rgba(107, 114, 128, 0.1); }
.bg-red-500\/10 { background-color: rgba(239, 68, 68, 0.1); }
.bg-orange-500\/10 { background-color: rgba(249, 115, 22, 0.1); }
.bg-pink-500\/10 { background-color: rgba(236, 72, 153, 0.1); }

.border-gray-500\/30 { border-color: rgba(107, 114, 128, 0.3); }

.text-cyan-400 { color: #22d3ee; }
.text-green-400 { color: #4ade80; }
.text-purple-400 { color: #c084fc; }
.text-cyan-400\/60 { color: rgba(34, 211, 238, 0.6); }
.text-green-400\/60 { color: rgba(74, 222, 128, 0.6); }
.text-yellow-400\/60 { color: rgba(250, 204, 21, 0.6); }
.text-purple-400\/60 { color: rgba(192, 132, 252, 0.6); }

.hover\:text-cyan-400:hover { color: #22d3ee; }
.hover\:text-green-400:hover { color: #4ade80; }
.hover\:text-purple-400:hover { color: #c084fc; }

.hover\:underline:hover { text-decoration: underline; }

.\!p-0 { padding: 0 !important; }

.shadow-neon-purple\/20 {
    box-shadow: 0 0 18px rgba(168, 85, 247, 0.2);
}

.shadow-\[0_0_15px_rgba\(168\,85\,247\,0\.4\)\] {
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
}

.shadow-\[0_0_8px_rgba\(34\,197\,94\,0\.6\)\] {
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}

.bg-gray-700 {
    background-color: rgba(55, 65, 81, 0.9);
}

.h-0 {
    height: 0;
}

.w-0 {
    width: 0;
}

.animate-ping {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}