/* 倉鼠智慧設計系統 — 合併後的主題 CSS（構建產物）
 * 源檔位於 src/ 目錄：theme-variables / theme-base / theme-layout /
 *   theme-mixins / theme-components / theme-utilities / uiux-refresh
 * 重新構建：bash scripts/build-theme-css.sh
 */
:root {
--bg: #060b16;
--bg-soft: #0d1527;
--surface: #101b30;
--surface-elev: #172643;
--surface-hover: #1d2f53;
--border: #2a3a5f;
--border-soft: #223352;
--text: #ecf3ff;
--text-dim: #9eb2d5;
--text-muted: #94a7c9;
--text-heading: #f3f7ff;
--text-soft-highlight: #dff3ff;
--text-on-strong: #fff;
--text-on-accent: #062136;
--primary: #3fb2ff;
--primary-strong: #178ef0;
--primary-dim: rgba(63, 178, 255, 0.16);
--success: #2fd59b;
--warning: #f5b941;
--danger: #ff7474;
--success-strong: #22c55e;
--warning-strong: #f59e0b;
--danger-strong: #ef4444;
--info-strong: #3b82f6;
--indigo: #6366f1;
--violet: #a78bfa;
--violet-strong: #8b5cf6;
--link-soft: #60a5fa;
--slate-700: #334155;
--slate-500: #475569;
--slate-400: #94a3b8;
--gray-500: #6b7280;
--black: #000;
--shadow-subtle: rgba(0, 0, 0, 0.1);
--shadow-medium: rgba(0, 0, 0, 0.3);
--overlay-dark: rgba(0, 0, 0, 0.6);
--focus-outline: rgba(63, 178, 255, 0.72);
--chart-grid: rgba(158, 178, 213, 0.28);
--chart-text: var(--text-dim);
--chart-target: var(--danger);
--chart-series: var(--primary);
--divider-soft: rgba(45, 49, 66, 0.3);
--divider-mid: rgba(45, 49, 66, 0.4);
--type-shell: #22c55e;
--type-claude: #3b82f6;
--type-codex: #a855f7;
--type-gemini: #eab308;
--type-gpt: #f97316;
--ai-gradient: linear-gradient(135deg, var(--primary), var(--success));
--autofix-bg: rgba(251, 146, 60, 0.06);
--autofix-border: rgba(251, 146, 60, 0.2);
--autofix-text: #fb923c;
--fallback-bg: rgba(99, 102, 241, 0.06);
--fallback-border: rgba(99, 102, 241, 0.2);
--fallback-text: #818cf8;
--event-text-bg: #1e3a5f;
--event-tool-bg: #3b2e1a;
--event-tool-result-bg: #1a2e1a;
--event-tool-result: #4ade80;
--event-result-bg: #2e1a3b;
--event-result: #c084fc;
--event-error-bg: #3b1a1a;
--event-done-bg: #1a3b2e;
--event-done: #34d399;
--radius: 14px;
--radius-sm: 10px;
--radius-xs: 8px;
--shadow-soft: 0 10px 30px rgba(2, 8, 18, 0.45);
--line-weak: rgba(255, 255, 255, 0.05);
--surface-panel: rgba(10, 18, 32, 0.7);
--primary-border-strong: rgba(63, 178, 255, 0.7);
--danger-soft-bg: rgba(239, 68, 68, 0.08);
--danger-soft-bg-10: rgba(239, 68, 68, 0.1);
--info-soft-bg: rgba(59, 130, 246, 0.1);
--info-soft-border: rgba(59, 130, 246, 0.25);
--info-panel-bg: color-mix(in srgb, var(--info-strong) 10%, var(--surface) 90%);
--success-soft-bg: rgba(16, 185, 129, 0.08);
--success-soft-border: rgba(16, 185, 129, 0.2);
--success-soft-bg-10: rgba(47, 213, 155, 0.1);
--warning-soft-bg: rgba(251, 191, 36, 0.08);
--warning-soft-border: rgba(251, 191, 36, 0.2);
--indigo-soft-bg: rgba(99, 102, 241, 0.08);
--indigo-soft-border: rgba(99, 102, 241, 0.2);
--violet-soft-bg: color-mix(in srgb, var(--violet-strong) 10%, var(--surface) 90%);
--orange-soft-bg: rgba(251, 146, 60, 0.08);
--orange-soft-border: rgba(251, 146, 60, 0.2);
--success-gradient-start: var(--success);
--success-gradient-end: var(--success-strong);
--table-row-hover-strong: rgba(29, 47, 83, 0.55);
--status-running-bg: rgba(99, 102, 241, 0.15);
--status-success-bg: rgba(16, 185, 129, 0.15);
--status-danger-bg: rgba(244, 63, 94, 0.15);
--status-warning-bg: rgba(245, 158, 11, 0.15);
--priority-high-bg: rgba(248, 113, 113, 0.15);
--priority-medium-bg: rgba(251, 191, 36, 0.15);
--priority-low-bg: rgba(139, 144, 160, 0.15);
--success-tint-bg: rgba(47, 213, 155, 0.15);
--warning-tint-bg: rgba(251, 191, 36, 0.15);
--danger-tint-bg: rgba(239, 68, 68, 0.15);
--success-panel-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(5, 150, 105, 0.08));
--primary-5: rgba(63, 178, 255, 0.05);
--primary-8: rgba(63, 178, 255, 0.08);
--primary-15: rgba(63, 178, 255, 0.15);
--primary-25: rgba(63, 178, 255, 0.25);
--primary-35: rgba(63, 178, 255, 0.35);
--primary-65: rgba(63, 178, 255, 0.65);
--primary-50: rgba(63, 178, 255, 0.5);
--primary-glow: rgba(63, 178, 255, 0.3);
--surface-sunken: #080e1c;
--scrollbar-track: rgba(12, 21, 37, 0.45);
--surface-overlay: rgba(16, 27, 48, 0.96);
--status-pill-bg: rgba(16, 27, 48, 0.62);
--status-dot-glow: rgba(47, 213, 155, 0.13);
--interactive-pill-bg: rgba(20, 34, 58, 0.72);
--interactive-pill-active-bg: linear-gradient(135deg, rgba(63, 178, 255, 0.28), rgba(23, 142, 240, 0.3));
--interactive-pill-hover-border: rgba(63, 178, 255, 0.32);
--sidebar-active-bg: linear-gradient(135deg, rgba(63, 178, 255, 0.2), rgba(23, 142, 240, 0.22));
--sidebar-active-rail: rgba(103, 198, 255, 0.9);
--sidebar-hover-bg: rgba(63, 178, 255, 0.08);
--sidebar-glass-highlight: rgba(255, 255, 255, 0.03);
--mobile-bottom-active-bg: rgba(63, 178, 255, 0.13);
--view-switch-bg: rgba(13, 24, 44, 0.7);
--filter-chip-bg: rgba(63, 178, 255, 0.13);
--filter-chip-border: rgba(63, 178, 255, 0.26);
--badge-shell-bg: rgba(63, 178, 255, 0.14);
--badge-shell-border: rgba(63, 178, 255, 0.3);
--badge-shell-text: #7ecbff;
--badge-claude-bg: rgba(255, 143, 91, 0.14);
--badge-claude-border: rgba(255, 143, 91, 0.3);
--badge-claude-text: #ffb18f;
--badge-copilot-bg: rgba(168, 130, 255, 0.14);
--badge-copilot-border: rgba(168, 130, 255, 0.3);
--badge-copilot-text: #c4a6ff;
--badge-ai-bg: rgba(132, 204, 22, 0.14);
--badge-ai-border: rgba(132, 204, 22, 0.3);
--badge-ai-text: #bef264;
--badge-gpt-bg: rgba(236, 72, 153, 0.14);
--badge-gpt-border: rgba(236, 72, 153, 0.3);
--badge-gpt-text: #f9a8d4;
--badge-gemini-bg: rgba(245, 185, 65, 0.14);
--badge-gemini-border: rgba(245, 185, 65, 0.28);
--badge-gemini-text: #ffd486;
--badge-status-success-bg: rgba(47, 213, 155, 0.14);
--badge-status-success-border: rgba(47, 213, 155, 0.3);
--badge-status-warning-bg: rgba(245, 185, 65, 0.16);
--badge-status-warning-border: rgba(245, 185, 65, 0.32);
--badge-status-muted-bg: rgba(126, 147, 183, 0.14);
--badge-status-muted-border: rgba(126, 147, 183, 0.28);
--badge-status-danger-bg: rgba(255, 116, 116, 0.15);
--badge-status-danger-border: rgba(255, 116, 116, 0.3);
--badge-status-running-bg: rgba(63, 178, 255, 0.18);
--badge-status-running-border: rgba(63, 178, 255, 0.34);
--badge-whitelist-bg: rgba(47, 213, 155, 0.15);
--badge-whitelist-border: rgba(47, 213, 155, 0.28);
--toast-success-border: rgba(47, 213, 155, 0.5);
--toast-error-border: rgba(255, 116, 116, 0.54);
--toast-error-bg: rgba(62, 20, 24, 0.9);
--toast-info-border: rgba(63, 178, 255, 0.55);
--toast-warning-border: rgba(245, 185, 65, 0.55);
--panel-surface-gradient: linear-gradient(180deg, rgba(17, 30, 52, 0.9), rgba(12, 21, 37, 0.94));
--gradient-card: linear-gradient(180deg, rgba(16, 27, 48, 0.96), rgba(12, 21, 37, 0.98));
--gradient-card-alt: linear-gradient(180deg, rgba(17, 30, 52, 0.95), rgba(12, 21, 37, 0.98));
--gradient-card-elev: linear-gradient(180deg, rgba(18, 31, 54, 0.96), rgba(13, 24, 43, 0.98));
--gradient-card-raised: linear-gradient(180deg, rgba(20, 34, 58, 0.95), rgba(12, 21, 37, 0.98));
--gradient-form: linear-gradient(180deg, rgba(16, 27, 48, 0.95), rgba(11, 20, 35, 0.98));
--gradient-toolbar: linear-gradient(180deg, rgba(16, 28, 49, 0.9), rgba(11, 21, 37, 0.93));
--gradient-btn: linear-gradient(180deg, rgba(22, 36, 62, 0.95), rgba(16, 28, 50, 0.96));
--gradient-btn-hover: linear-gradient(180deg, rgba(30, 49, 84, 0.96), rgba(23, 38, 66, 0.98));
--code-inline-bg: rgba(0, 0, 0, 0.2);
--code-bg: rgba(0, 0, 0, 0.2);
--font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
--accent: var(--primary);
--info: var(--link-soft);
--primary-surface: var(--primary-15);
--primary-soft-bg: var(--primary-15);
--success-surface: var(--success-tint-bg);
--warning-surface: var(--warning-tint-bg);
--info-surface: var(--info-soft-bg);
--danger-surface: var(--danger-tint-bg);
--danger-dim: var(--danger-tint-bg);
--warning-dim: var(--warning-tint-bg);
--danger-soft-border: rgba(239, 68, 68, 0.2);
--primary-10: rgba(63, 178, 255, 0.1);
--primary-rgb: 63, 178, 255;
--table-row-hover: rgba(29, 47, 83, 0.45);
--bg-hover: var(--surface-hover);
--warning-soft-bg-hover: rgba(251, 191, 36, 0.12);
--radius-lg: 18px;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--ripple-x: 50%;
--ripple-y: 50%;
--duration-fast: 0.15s;
--duration-normal: 0.25s;
--duration-slow: 0.4s;
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--space-0: 0.125rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--text-2xs: 0.62rem;
--text-xs: 0.7rem;
--text-sm: 0.78rem;
--text-base: 0.88rem;
--text-lg: 1rem;
--text-xl: 1.15rem;
--text-2xl: 1.35rem;
--text-3xl: 1.5rem;
--text-4xl: 1.82rem;
--shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.08);
--shadow-sm: 0 4px 12px rgba(2, 8, 18, 0.2);
--shadow-heavy: 0 12px 40px rgba(0, 0, 0, 0.5);
--z-dropdown: 100;
--z-sticky: 200;
--z-sidebar: 300;
--z-tooltip: 400;
--z-modal: 500;
--z-skip-link: 600;
--z-loading-bar: 700;
--z-drag: 800;
--z-toast: 900;
--z-command-palette: 1000;
--card-bg: var(--surface);
--bg-subtle: var(--surface-elev);
--danger-deep: #991b1b;
--grade-a: var(--success-strong);
--grade-b: var(--type-claude);
--grade-c: var(--type-gemini);
--grade-d: var(--type-gpt);
--grade-f: var(--danger-strong);
--grade-a-badge-bg: #dcfce7;
--grade-a-badge-text: #166534;
--grade-b-badge-bg: #dbeafe;
--grade-b-badge-text: #1e40af;
--grade-c-badge-bg: #fef9c3;
--grade-c-badge-text: #854d0e;
--grade-d-badge-bg: #fed7aa;
--grade-d-badge-text: #9a3412;
--grade-f-badge-bg: #fecaca;
--grade-f-badge-text: #991b1b;
--status-success-soft: rgba(34, 197, 94, 0.15);
--status-warning-soft: rgba(245, 158, 11, 0.15);
--status-danger-soft: rgba(239, 68, 68, 0.15);
--status-info-soft: rgba(59, 130, 246, 0.15);
--cal-density-1: rgba(59, 130, 246, 0.05);
--cal-density-2: rgba(59, 130, 246, 0.10);
--cal-density-3: rgba(59, 130, 246, 0.16);
--cal-density-4: rgba(59, 130, 246, 0.22);
--cal-density-5: rgba(59, 130, 246, 0.28);
--cal-density-month-1: rgba(59, 130, 246, 0.03);
--cal-density-month-2: rgba(59, 130, 246, 0.06);
--cal-density-month-3: rgba(59, 130, 246, 0.10);
--cal-density-month-4: rgba(59, 130, 246, 0.15);
--cal-density-month-5: rgba(59, 130, 246, 0.20);
--glass-bg: rgba(16, 27, 48, 0.62);
--glass-bg-light: rgba(16, 27, 48, 0.42);
--glass-border: rgba(255, 255, 255, 0.08);
--glass-blur-sm: 4px;
--glass-blur: 16px;
--glass-blur-lg: 24px;
--glass-shine: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 50%);
--shadow-card: 0 1px 2px rgba(0,0,0,0.06), 0 4px 12px rgba(2,8,18,0.15), 0 12px 32px rgba(2,8,18,0.12);
--shadow-card-hover: 0 2px 4px rgba(0,0,0,0.08), 0 8px 20px rgba(2,8,18,0.2), 0 20px 48px rgba(2,8,18,0.18);
--shadow-elevated: 0 4px 8px rgba(0,0,0,0.1), 0 12px 28px rgba(2,8,18,0.25), 0 24px 56px rgba(2,8,18,0.2);
--shadow-glow-primary: 0 0 20px rgba(63,178,255,0.12), 0 0 40px rgba(63,178,255,0.06);
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-out-back: cubic-bezier(0.34, 1.3, 0.64, 1);
--duration-enter: 0.35s;
--stagger-delay: 60ms;
--hover-lift: translateY(-3px);
--hover-lift-sm: translateY(-2px);
--active-press: translateY(1px) scale(0.98);
--text-5xl: 2.25rem;
--heading-letter-spacing: -0.02em;
--body-letter-spacing: 0.005em;
--fluid-xs: clamp(0.65rem, 0.6rem + 0.25vw, 0.72rem);
--fluid-sm: clamp(0.72rem, 0.65rem + 0.35vw, 0.82rem);
--fluid-base: clamp(0.82rem, 0.75rem + 0.35vw, 0.92rem);
--fluid-lg: clamp(0.95rem, 0.85rem + 0.5vw, 1.1rem);
--fluid-xl: clamp(1.1rem, 0.95rem + 0.75vw, 1.35rem);
--fluid-2xl: clamp(1.25rem, 1rem + 1.25vw, 1.65rem);
--fluid-3xl: clamp(1.45rem, 1.1rem + 1.75vw, 2rem);
--fluid-4xl: clamp(1.75rem, 1.25rem + 2.5vw, 2.6rem);
--fluid-gap-sm: clamp(0.5rem, 0.35rem + 0.75vw, 0.85rem);
--fluid-gap: clamp(0.75rem, 0.5rem + 1.25vw, 1.25rem);
--fluid-gap-lg: clamp(1rem, 0.65rem + 1.75vw, 1.75rem);
--fluid-pad: clamp(0.75rem, 0.5rem + 1.25vw, 1.5rem);
--touch-min: 44px;
--touch-comfortable: 48px;
--touch-spacious: 56px;
--swipe-threshold: 50px;
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);
--ease-snappy: cubic-bezier(0.2, 0, 0, 1);
--duration-micro: 0.1s;
--duration-sheet: 0.4s;
--duration-page: 0.5s;
--cq-sm: 320px;
--cq-md: 480px;
--cq-lg: 640px;
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-top: env(safe-area-inset-top, 0px);
--bottom-bar-h: 64px;
--glass-blur-xl: 32px;
--glass-blur-2xl: 48px;
--glow-press: 0 0 0 4px var(--primary-15);
--glow-success: 0 0 0 4px rgba(47, 213, 155, 0.15);
--glow-danger: 0 0 0 4px rgba(255, 116, 116, 0.15);
--scrollbar-w: 6px;
--scrollbar-w-thin: 4px;
--scrollbar-thumb: rgba(63, 178, 255, 0.18);
--scrollbar-thumb-hover: rgba(63, 178, 255, 0.32);
--scrollbar-thumb-active: rgba(63, 178, 255, 0.45);
--glow-primary: 0 0 24px rgba(63, 178, 255, 0.12);
--glow-success-soft: 0 0 24px rgba(47, 213, 155, 0.12);
--glow-warning: 0 0 24px rgba(245, 185, 65, 0.12);
--glow-danger-soft: 0 0 24px rgba(255, 116, 116, 0.12);
--glow-violet: 0 0 24px rgba(167, 139, 250, 0.12);
--card-surface-glass: linear-gradient(170deg,
color-mix(in srgb, var(--surface) 94%, var(--primary) 6%),
color-mix(in srgb, var(--surface-elev) 92%, transparent));
--card-border-accent: color-mix(in srgb, var(--border) 70%, var(--primary) 30%);
--gradient-border-angle: 0deg;
--hover-lift-lg: translateY(-4px);
--mesh-gradient: radial-gradient(at 20% 10%, color-mix(in srgb, var(--primary) 12%, transparent) 0, transparent 50%),
radial-gradient(at 80% 5%, color-mix(in srgb, var(--success) 8%, transparent) 0, transparent 45%),
radial-gradient(at 50% 80%, color-mix(in srgb, var(--violet) 6%, transparent) 0, transparent 50%);
--focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--primary-50);
--focus-ring-inset: inset 0 0 0 2px var(--primary-50);
--surface-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
--shadow-color: 220 40% 2%;
--shadow-depth-1: 0 1px 2px hsl(var(--shadow-color) / 0.1), 0 2px 4px hsl(var(--shadow-color) / 0.1);
--shadow-depth-2: 0 2px 4px hsl(var(--shadow-color) / 0.1), 0 4px 8px hsl(var(--shadow-color) / 0.1), 0 8px 16px hsl(var(--shadow-color) / 0.1);
--shadow-depth-3: 0 4px 8px hsl(var(--shadow-color) / 0.08), 0 8px 16px hsl(var(--shadow-color) / 0.08), 0 16px 32px hsl(var(--shadow-color) / 0.12), 0 32px 64px hsl(var(--shadow-color) / 0.12);
--text-gradient-primary: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, var(--success) 30%));
--text-gradient-hero: linear-gradient(135deg, #ecf3ff 0%, var(--primary) 50%, var(--success) 100%);
--border-gradient: linear-gradient(135deg, color-mix(in srgb, var(--primary) 30%, var(--border)), var(--border), color-mix(in srgb, var(--success) 20%, var(--border)));
--toggle-w: 44px;
--toggle-h: 24px;
--toggle-thumb: 18px;
--toggle-off-bg: color-mix(in srgb, var(--text-dim) 35%, var(--surface));
--toggle-on-bg: var(--primary);
--toggle-thumb-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) {
--bg: #f5f7fa;
--bg-soft: #eef1f6;
--surface: #ffffff;
--surface-elev: #f0f2f5;
--surface-hover: #e8eaef;
--border: #d1d5db;
--border-soft: #e5e7eb;
--text: #1f2937;
--text-dim: #4b5563;
--text-muted: #596573;
--text-heading: #111827;
--text-soft-highlight: #1e3a5f;
--text-on-strong: #fff;
--text-on-accent: #fff;
--primary: #2563eb;
--primary-strong: #1d4ed8;
--primary-dim: rgba(37, 99, 235, 0.1);
--success: #059669;
--warning: #d97706;
--danger: #dc2626;
--success-strong: #16a34a;
--warning-strong: #b45309;
--danger-strong: #b91c1c;
--violet: #7c3aed;
--link-soft: #2563eb;
--shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.08);
--shadow-subtle: rgba(0, 0, 0, 0.05);
--shadow-medium: rgba(0, 0, 0, 0.12);
--overlay-dark: rgba(0, 0, 0, 0.4);
--focus-outline: rgba(37, 99, 235, 0.72);
--chart-grid: rgba(148, 163, 184, 0.45);
--chart-text: var(--text-dim);
--chart-target: var(--danger);
--chart-series: var(--primary);
--line-weak: rgba(0, 0, 0, 0.04);
--surface-panel: rgba(255, 255, 255, 0.85);
--surface-overlay: rgba(255, 255, 255, 0.96);
--scrollbar-track: rgba(0, 0, 0, 0.05);
--primary-50: rgba(37, 99, 235, 0.5);
--primary-glow: rgba(37, 99, 235, 0.2);
--surface-sunken: #e8eaef;
--primary-5: rgba(37, 99, 235, 0.05);
--primary-8: rgba(37, 99, 235, 0.08);
--primary-15: rgba(37, 99, 235, 0.15);
--primary-25: rgba(37, 99, 235, 0.25);
--primary-35: rgba(37, 99, 235, 0.35);
--primary-65: rgba(37, 99, 235, 0.65);
--primary-border-strong: rgba(37, 99, 235, 0.6);
--status-pill-bg: rgba(255, 255, 255, 0.85);
--status-dot-glow: rgba(5, 150, 105, 0.15);
--interactive-pill-bg: rgba(243, 244, 246, 0.8);
--interactive-pill-active-bg: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(29, 78, 216, 0.18));
--interactive-pill-hover-border: rgba(37, 99, 235, 0.25);
--sidebar-active-bg: linear-gradient(135deg, rgba(37, 99, 235, 0.16), rgba(29, 78, 216, 0.18));
--sidebar-active-rail: rgba(37, 99, 235, 0.92);
--sidebar-hover-bg: rgba(37, 99, 235, 0.08);
--sidebar-glass-highlight: rgba(15, 23, 42, 0.04);
--mobile-bottom-active-bg: rgba(37, 99, 235, 0.12);
--view-switch-bg: rgba(243, 244, 246, 0.8);
--filter-chip-bg: rgba(37, 99, 235, 0.08);
--filter-chip-border: rgba(37, 99, 235, 0.2);
--table-row-hover-strong: rgba(37, 99, 235, 0.06);
--panel-surface-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.95));
--gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.98));
--gradient-card-alt: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.98));
--gradient-card-elev: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 247, 250, 0.98));
--gradient-card-raised: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.98));
--gradient-form: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.98));
--gradient-toolbar: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.93));
--gradient-btn: linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.96));
--gradient-btn-hover: linear-gradient(180deg, rgba(241, 245, 249, 0.96), rgba(226, 232, 240, 0.98));
--code-inline-bg: rgba(0, 0, 0, 0.06);
--toast-success-border: rgba(5, 150, 105, 0.5);
--toast-error-border: rgba(220, 38, 38, 0.5);
--toast-error-bg: rgba(254, 226, 226, 0.95);
--toast-info-border: rgba(37, 99, 235, 0.5);
--toast-warning-border: rgba(217, 119, 6, 0.5);
--danger-soft-bg: rgba(220, 38, 38, 0.06);
--danger-soft-bg-10: rgba(220, 38, 38, 0.1);
--success-soft-bg: rgba(5, 150, 105, 0.06);
--success-soft-border: rgba(5, 150, 105, 0.2);
--warning-soft-bg: rgba(217, 119, 6, 0.06);
--warning-soft-border: rgba(217, 119, 6, 0.2);
--info-soft-bg: rgba(37, 99, 235, 0.06);
--info-soft-border: rgba(37, 99, 235, 0.2);
--badge-shell-bg: rgba(37, 99, 235, 0.1);
--badge-shell-border: rgba(37, 99, 235, 0.25);
--badge-shell-text: #1d4ed8;
--badge-claude-bg: rgba(234, 88, 12, 0.1);
--badge-claude-border: rgba(234, 88, 12, 0.25);
--badge-claude-text: #c2410c;
--badge-copilot-bg: rgba(124, 58, 237, 0.1);
--badge-copilot-border: rgba(124, 58, 237, 0.25);
--badge-copilot-text: #6d28d9;
--badge-ai-bg: rgba(77, 124, 15, 0.1);
--badge-ai-border: rgba(77, 124, 15, 0.25);
--badge-ai-text: #4d7c0f;
--badge-gpt-bg: rgba(190, 24, 93, 0.1);
--badge-gpt-border: rgba(190, 24, 93, 0.25);
--badge-gpt-text: #be185d;
--badge-gemini-bg: rgba(217, 119, 6, 0.1);
--badge-gemini-border: rgba(217, 119, 6, 0.25);
--badge-gemini-text: #92400e;
--badge-status-success-bg: rgba(5, 150, 105, 0.1);
--badge-status-success-border: rgba(5, 150, 105, 0.25);
--badge-status-warning-bg: rgba(217, 119, 6, 0.1);
--badge-status-warning-border: rgba(217, 119, 6, 0.25);
--badge-status-muted-bg: rgba(107, 114, 128, 0.1);
--badge-status-muted-border: rgba(107, 114, 128, 0.25);
--badge-status-danger-bg: rgba(220, 38, 38, 0.1);
--badge-status-danger-border: rgba(220, 38, 38, 0.25);
--badge-status-running-bg: rgba(37, 99, 235, 0.12);
--badge-status-running-border: rgba(37, 99, 235, 0.25);
--autofix-bg: rgba(234, 88, 12, 0.05);
--autofix-border: rgba(234, 88, 12, 0.2);
--autofix-text: #c2410c;
--fallback-bg: rgba(99, 102, 241, 0.05);
--fallback-border: rgba(99, 102, 241, 0.2);
--fallback-text: #4338ca;
--code-bg: rgba(0, 0, 0, 0.06);
--accent: var(--primary);
--info: var(--primary);
--primary-surface: var(--primary-15);
--primary-soft-bg: var(--primary-15);
--success-surface: var(--success-tint-bg);
--warning-surface: var(--warning-tint-bg);
--info-surface: var(--info-soft-bg);
--danger-surface: var(--danger-tint-bg);
--danger-dim: var(--danger-tint-bg);
--warning-dim: var(--warning-tint-bg);
--danger-soft-border: rgba(220, 38, 38, 0.2);
--primary-10: rgba(37, 99, 235, 0.1);
--primary-rgb: 37, 99, 235;
--shadow-heavy: 0 12px 40px rgba(0, 0, 0, 0.15);
--table-row-hover: rgba(37, 99, 235, 0.06);
--bg-hover: var(--surface-hover);
--warning-soft-bg-hover: rgba(217, 119, 6, 0.12);
--card-bg: #ffffff;
--bg-subtle: #f3f4f6;
--danger-deep: #991b1b;
--grade-a: var(--success-strong);
--grade-b: var(--type-claude);
--grade-c: #a16207;
--grade-d: #c2410c;
--grade-f: var(--danger-strong);
--grade-a-badge-bg: #dcfce7;
--grade-a-badge-text: #166534;
--grade-b-badge-bg: #dbeafe;
--grade-b-badge-text: #1e40af;
--grade-c-badge-bg: #fef9c3;
--grade-c-badge-text: #854d0e;
--grade-d-badge-bg: #fed7aa;
--grade-d-badge-text: #9a3412;
--grade-f-badge-bg: #fecaca;
--grade-f-badge-text: #991b1b;
--status-success-soft: rgba(22, 163, 74, 0.12);
--status-warning-soft: rgba(180, 83, 9, 0.12);
--status-danger-soft: rgba(185, 28, 28, 0.12);
--status-info-soft: rgba(37, 99, 235, 0.12);
--cal-density-1: rgba(37, 99, 235, 0.04);
--cal-density-2: rgba(37, 99, 235, 0.08);
--cal-density-3: rgba(37, 99, 235, 0.12);
--cal-density-4: rgba(37, 99, 235, 0.16);
--cal-density-5: rgba(37, 99, 235, 0.20);
--cal-density-month-1: rgba(37, 99, 235, 0.03);
--cal-density-month-2: rgba(37, 99, 235, 0.06);
--cal-density-month-3: rgba(37, 99, 235, 0.08);
--cal-density-month-4: rgba(37, 99, 235, 0.12);
--cal-density-month-5: rgba(37, 99, 235, 0.16);
--glass-bg: rgba(255, 255, 255, 0.72);
--glass-bg-light: rgba(255, 255, 255, 0.55);
--glass-border: rgba(0, 0, 0, 0.06);
--glass-blur: 16px;
--glass-shine: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, transparent 50%);
--shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
--shadow-card-hover: 0 2px 4px rgba(0,0,0,0.05), 0 8px 20px rgba(0,0,0,0.08), 0 16px 40px rgba(0,0,0,0.06);
--shadow-elevated: 0 4px 8px rgba(0,0,0,0.06), 0 12px 28px rgba(0,0,0,0.1), 0 20px 44px rgba(0,0,0,0.06);
--shadow-glow-primary: 0 0 20px rgba(37,99,235,0.08), 0 0 40px rgba(37,99,235,0.04);
--event-text-bg: rgba(37, 99, 235, 0.08);
--event-tool-bg: rgba(217, 119, 6, 0.06);
--event-tool-result-bg: rgba(22, 163, 74, 0.06);
--event-tool-result: #16a34a;
--event-result-bg: rgba(124, 58, 237, 0.06);
--event-result: #7c3aed;
--event-error-bg: rgba(220, 38, 38, 0.06);
--event-done-bg: rgba(5, 150, 105, 0.06);
--event-done: #059669;
--divider-soft: rgba(209, 213, 219, 0.4);
--divider-mid: rgba(209, 213, 219, 0.6);
--type-shell: #16a34a;
--type-claude: #2563eb;
--type-codex: #7c3aed;
--type-gemini: #a16207;
--type-gpt: #c2410c;
--success-soft-bg-10: rgba(5, 150, 105, 0.1);
--indigo-soft-bg: rgba(79, 70, 229, 0.06);
--indigo-soft-border: rgba(79, 70, 229, 0.2);
--orange-soft-bg: rgba(234, 88, 12, 0.06);
--orange-soft-border: rgba(234, 88, 12, 0.2);
--success-tint-bg: rgba(22, 163, 74, 0.12);
--warning-tint-bg: rgba(180, 83, 9, 0.12);
--danger-tint-bg: rgba(185, 28, 28, 0.12);
--success-panel-bg: linear-gradient(135deg, rgba(5, 150, 105, 0.05), rgba(22, 163, 74, 0.05));
--badge-whitelist-bg: rgba(22, 163, 74, 0.12);
--badge-whitelist-border: rgba(22, 163, 74, 0.25);
--ai-gradient: linear-gradient(135deg, var(--primary), var(--success));
--scrollbar-thumb: rgba(37, 99, 235, 0.15);
--scrollbar-thumb-hover: rgba(37, 99, 235, 0.28);
--scrollbar-thumb-active: rgba(37, 99, 235, 0.42);
--glow-primary: 0 0 24px rgba(37, 99, 235, 0.08);
--glow-success-soft: 0 0 24px rgba(5, 150, 105, 0.08);
--glow-warning: 0 0 24px rgba(217, 119, 6, 0.08);
--glow-danger-soft: 0 0 24px rgba(220, 38, 38, 0.08);
--glow-violet: 0 0 24px rgba(124, 58, 237, 0.08);
--card-surface-glass: linear-gradient(170deg,
rgba(255, 255, 255, 0.96),
rgba(248, 250, 252, 0.94));
--card-border-accent: color-mix(in srgb, var(--border) 72%, var(--primary) 28%);
--table-th-bg: rgba(241, 243, 247, 0.85);
--table-th-hover-bg: rgba(229, 231, 237, 0.9);
--table-sticky-bg: rgba(248, 249, 251, 0.95);
--shadow-color: 220 10% 50%;
--text-gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-strong));
--text-gradient-hero: linear-gradient(135deg, var(--text-heading), var(--primary), var(--success));
--mesh-gradient: radial-gradient(at 20% 10%, color-mix(in srgb, var(--primary) 6%, transparent) 0, transparent 50%),
radial-gradient(at 80% 5%, color-mix(in srgb, var(--success) 4%, transparent) 0, transparent 45%);
--toggle-off-bg: color-mix(in srgb, var(--text-dim) 25%, var(--surface));
--toggle-thumb-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.1);
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) body {
background: linear-gradient(160deg, #f5f7fa 0%, #eef1f6 45%, #f5f7fa 100%);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scrollbar-width: thin;
scrollbar-color: var(--primary-glow) var(--scrollbar-track);
}
html,
body {
min-height: 100%;
}
html {
scroll-behavior: smooth;
}
@media (max-width: 768px) {
html {
scroll-behavior: auto;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
body {
font-family: Manrope, "Noto Sans TC", "Avenir Next", "PingFang TC", sans-serif;
background:
radial-gradient(circle at 12% 0%, rgba(63, 178, 255, 0.2), transparent 38%),
radial-gradient(circle at 85% 15%, rgba(47, 213, 155, 0.12), transparent 35%),
linear-gradient(160deg, #070d19 0%, #0a1322 45%, #07101d 100%);
color: var(--text);
position: relative;
line-height: 1.55;
text-rendering: optimizeLegibility;
}
.skip-link {
position: fixed;
left: 0.8rem;
top: -120px;
z-index: var(--z-skip-link);
padding: 0.55rem 0.8rem;
border-radius: var(--radius-xs);
background: var(--primary);
color: var(--text-on-accent);
font-size: 0.78rem;
font-weight: 700;
transition: top 0.2s ease;
}
.skip-link:focus {
top: 0.75rem;
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(158, 178, 213, 0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(158, 178, 213, 0.05) 1px, transparent 1px);
background-size: 34px 34px;
mask-image: radial-gradient(circle at 22% 12%, #000 0%, transparent 72%);
opacity: 0.24;
}
*::-webkit-scrollbar {
width: 10px;
height: 10px;
}
*::-webkit-scrollbar-track {
background: var(--scrollbar-track);
}
*::-webkit-scrollbar-thumb {
background: var(--primary-glow);
border-radius: 999px;
border: 2px solid rgba(12, 21, 37, 0.6);
}
h1, h2, h3, h4 {
letter-spacing: var(--heading-letter-spacing, -0.02em);
font-weight: 700;
}
h1 { font-size: var(--text-4xl); line-height: 1.2; }
h2 { font-size: var(--text-2xl); line-height: 1.25; }
h3 { font-size: var(--text-lg); line-height: 1.35; }
::selection {
background: var(--primary-25);
color: var(--text);
}
a {
color: var(--primary);
text-decoration: none;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="tab"]:focus-visible,
[role="button"]:focus-visible,
[role="menuitem"]:focus-visible {
outline: 2px solid var(--focus-outline);
outline-offset: 2px;
}
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
* {
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb, rgba(63,178,255,0.18)) transparent;
}
::-webkit-scrollbar { width: var(--scrollbar-w, 6px); height: var(--scrollbar-w, 6px); }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb, rgba(63,178,255,0.18));
border-radius: 99px;
transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover, rgba(63,178,255,0.32)); }
::-webkit-scrollbar-thumb:active { background: var(--scrollbar-thumb-active, rgba(63,178,255,0.45)); }
::-webkit-scrollbar-corner { background: transparent; }
.app-layout {
display: flex;
min-height: 100vh;
}
.sidebar {
display: flex;
flex-direction: column;
width: 258px;
padding: 1rem 0.85rem;
border-right: 1px solid var(--glass-border);
background:
linear-gradient(180deg, var(--sidebar-glass-highlight), transparent 28%),
var(--glass-bg);
backdrop-filter: blur(var(--glass-blur-lg));
-webkit-backdrop-filter: blur(var(--glass-blur-lg));
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
z-index: 30;
transition: width 0.3s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
box-shadow:
4px 0 24px rgba(0,0,0,0.15),
1px 0 0 color-mix(in srgb, var(--primary) 8%, transparent);
}
.sidebar::-webkit-scrollbar { width: var(--scrollbar-w-thin, 4px); }
.sidebar::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.sidebar::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--primary) 24%, transparent); }
.main-content {
flex: 1;
padding: 1.6rem 2rem 2rem;
max-width: 1600px;
width: 100%;
margin: 0 auto;
transition: padding 0.2s ease;
}
.mobile-nav-toggle,
.mobile-sidebar-overlay,
.mobile-bottom-bar {
display: none;
}
.sidebar-brand {
padding: 0.75rem 0.75rem 1rem;
margin: 0 0.2rem 0.95rem;
border-bottom: 1px solid var(--border-soft);
position: relative;
}
.sidebar-brand img {
height: 38px;
width: auto;
margin-bottom: 8px;
display: block;
}
.sidebar-brand small {
color: var(--text-muted);
font-size: 0.72rem;
letter-spacing: 0.08em;
}
.sidebar-collapse-btn {
position: absolute;
right: 0.35rem;
top: 0.35rem;
width: 1.5rem;
height: 1.5rem;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--surface-overlay);
color: var(--text-dim);
font-size: 0.8rem;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 5;
}
.sidebar-collapse-btn:hover {
color: var(--text);
border-color: var(--primary-glow);
}
body.sidebar-collapsed .sidebar {
width: 84px;
}
body.sidebar-collapsed .sidebar-brand-link {
pointer-events: none;
}
body.sidebar-collapsed .sidebar-brand img,
body.sidebar-collapsed .sidebar-brand small,
body.sidebar-collapsed .nav-group-title,
body.sidebar-collapsed .nav-item,
body.sidebar-collapsed .sidebar-console-port,
body.sidebar-collapsed .workbar-running-panel {
overflow: hidden;
}
body.sidebar-collapsed .sidebar-brand small,
body.sidebar-collapsed .nav-group-title {
opacity: 0;
height: 0;
padding: 0;
margin: 0;
}
body.sidebar-collapsed .nav-item {
justify-content: center;
color: transparent;
}
body.sidebar-collapsed .sidebar-console-port,
body.sidebar-collapsed .workbar-running-panel {
display: none;
}
body.sidebar-collapsed .nav-item .nav-icon {
margin: 0;
color: var(--text-dim);
}
body.sidebar-collapsed .nav-item.active .nav-icon,
body.sidebar-collapsed .nav-item:hover .nav-icon {
color: var(--text);
}
body.sidebar-collapsed .nav-item[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
left: calc(100% + 0.55rem);
top: 50%;
transform: translateY(-50%) scale(0.98);
padding: 0.28rem 0.46rem;
border-radius: 0.45rem;
border: 1px solid var(--border-soft);
background: var(--surface-overlay);
color: var(--text);
font-size: 0.68rem;
white-space: nowrap;
box-shadow: var(--shadow-soft);
opacity: 0;
pointer-events: none;
transition: opacity var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default);
z-index: 6;
}
body.sidebar-collapsed .nav-item:hover::after,
body.sidebar-collapsed .nav-item:focus-visible::after {
opacity: 1;
transform: translateY(-50%) scale(1);
}
.nav-group {
margin-bottom: 0.65rem;
}
.workbar-customizer {
margin: 0 0.2rem 0.8rem;
padding: 0.72rem;
border: 1px solid color-mix(in srgb, var(--primary) 36%, var(--border-soft));
border-radius: var(--radius-sm);
background:
linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent), transparent 72%),
var(--surface-sunken);
box-shadow: inset 0 0 0 1px var(--primary-8);
}
.workbar-customizer-hint {
margin: 0 0 0.58rem;
color: var(--text-dim);
font-size: 0.7rem;
line-height: 1.5;
}
.workbar-customizer-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.42rem;
}
.workbar-customizer-btn {
min-height: 2rem;
padding: 0.38rem 0.55rem;
border: 1px solid var(--border-soft);
border-radius: var(--radius-xs);
background: var(--surface-elev);
color: var(--text-dim);
font: inherit;
font-size: 0.72rem;
font-weight: 700;
cursor: pointer;
}
.workbar-customizer-btn:hover,
.workbar-customizer-btn:focus-visible {
outline: none;
border-color: var(--primary-35);
color: var(--text);
}
.workbar-customizer-btn.primary {
border-color: color-mix(in srgb, var(--primary) 58%, var(--border-soft));
background: color-mix(in srgb, var(--primary) 18%, var(--surface-elev));
color: var(--text);
}
.workbar-customizer-live {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
#workbar-customize-btn.active {
border-color: var(--primary-35);
background: var(--primary-15);
color: var(--primary);
}
body.workbar-editing .nav-group[data-workbar-group] {
margin-bottom: 0.5rem;
padding: 0.34rem;
border: 1px dashed color-mix(in srgb, var(--primary) 34%, var(--border-soft));
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--primary) 4%, transparent);
}
body.workbar-editing .nav-group[data-workbar-group] > .nav-group-title {
margin-bottom: 0.2rem;
border-radius: var(--radius-xs);
cursor: grab;
touch-action: none;
user-select: none;
}
body.workbar-editing .nav-group[data-workbar-group] > .nav-group-title::after {
content: '\22EE\22EE';
float: right;
color: var(--primary);
letter-spacing: -0.18rem;
}
body.workbar-editing .nav-item[data-nav-key] {
cursor: grab;
touch-action: none;
user-select: none;
}
body.workbar-editing .nav-item[data-nav-key]::after {
content: '\22EE\22EE';
margin-left: auto;
color: var(--primary);
letter-spacing: -0.18rem;
}
body.workbar-editing :is(.nav-group-title, .nav-item):active {
cursor: grabbing;
}
.workbar-dragging {
opacity: 0.42;
}
@media (prefers-reduced-motion: no-preference) {
body.workbar-editing .nav-group[data-workbar-group],
body.workbar-editing .nav-item[data-nav-key] {
transition: transform 0.14s ease, opacity 0.14s ease, border-color 0.14s ease;
}
}
.nav-group-hidden,
.nav-item-hidden {
display: none !important;
}
.nav-group-title {
padding: 0.5rem 0.75rem;
font-size: 0.7rem;
text-transform: uppercase;
color: var(--text-muted);
letter-spacing: 0.08em;
}
.nav-item {
position: relative;
display: flex;
align-items: center;
gap: 0.6rem;
margin: 0.12rem 0;
padding: 0.56rem 0.75rem;
border: 1px solid transparent;
border-radius: var(--radius-sm);
color: var(--text-dim);
font-size: 0.86rem;
transition: all var(--duration-normal) var(--ease-default);
}
.nav-item:hover {
background: var(--sidebar-hover-bg);
border-color: var(--primary-25);
color: var(--text);
}
.nav-item.active {
background: linear-gradient(135deg, var(--glass-bg-light), color-mix(in srgb, var(--primary) 6%, var(--glass-bg-light)));
border-color: var(--primary-35);
color: var(--text-soft-highlight);
box-shadow: inset 0 0 0 1px var(--primary-8), var(--shadow-glow-primary);
}
.nav-item::before {
content: "";
position: absolute;
left: 0.1rem;
top: 50%;
width: 3px;
height: 0;
border-radius: 0 4px 4px 0;
transform: translateY(-50%);
background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 80%, var(--success) 20%));
transition: height var(--duration-normal) var(--ease-out-expo), opacity var(--duration-normal) var(--ease-default);
opacity: 0;
}
.nav-item.active::before {
height: 64%;
opacity: 1;
}
.sidebar-console-port {
padding: 0.4rem 0.75rem 0.2rem;
}
.sidebar-console-form {
display: flex;
align-items: flex-end;
gap: 0.35rem;
}
.sidebar-console-input {
width: 100%;
min-width: 0;
border: 1px solid var(--border-soft);
border-radius: var(--radius-xs);
background: var(--surface-panel);
color: var(--text);
padding: 0.34rem 0.5rem;
font-size: 0.74rem;
resize: none;
line-height: 1.4;
font-family: inherit;
}
.sidebar-console-input::placeholder {
color: var(--text-muted);
}
.sidebar-console-send {
border: 1px solid var(--border-soft);
border-radius: var(--radius-xs);
background: var(--surface-elev);
color: var(--text-dim);
width: 1.9rem;
height: 1.9rem;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--duration-fast) var(--ease-default);
}
.sidebar-console-send:hover {
border-color: var(--primary-35);
color: var(--text);
background: var(--surface-hover);
}
.sidebar-chat-toggle {
border: 1px solid var(--border-soft);
border-radius: var(--radius-xs);
background: var(--surface-elev);
color: var(--text-muted);
width: 1.9rem;
height: 1.9rem;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: -0.02em;
transition: all var(--duration-fast) var(--ease-default);
}
.sidebar-chat-toggle:hover {
border-color: var(--primary-35);
color: var(--text);
background: var(--surface-hover);
}
.sidebar-chat-toggle.active {
border-color: var(--primary-35);
background: var(--primary-15);
color: var(--primary);
}
.sidebar-console-output {
display: none;
max-height: 160px;
overflow-y: auto;
background: var(--surface-sunken);
border: 1px solid var(--border-soft);
border-radius: var(--radius-xs);
padding: 0;
margin-top: 0.3rem;
font-family: 'SF Mono', 'Fira Code', monospace;
font-size: 0.66rem;
line-height: 1.45;
color: var(--text-dim);
}
.sidebar-console-output.active {
display: block;
}
.workbar-running-panel {
margin-top: 0.45rem;
padding: 0.48rem;
border: 1px solid color-mix(in srgb, var(--warning) 28%, var(--border-soft));
border-radius: var(--radius-xs);
background:
linear-gradient(135deg, color-mix(in srgb, var(--warning) 9%, transparent), transparent 72%),
var(--surface-sunken);
}
.workbar-running-panel.hidden {
display: none;
}
.workbar-running-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.45rem;
margin-bottom: 0.38rem;
}
.workbar-running-title {
display: inline-flex;
align-items: center;
gap: 0.32rem;
min-width: 0;
color: var(--text);
font-size: 0.68rem;
font-weight: 800;
}
.workbar-running-icon {
width: 13px;
height: 13px;
color: var(--warning);
flex-shrink: 0;
}
.workbar-running-count {
min-width: 1.25rem;
padding: 0.04rem 0.32rem;
border: 1px solid color-mix(in srgb, var(--warning) 35%, var(--border-soft));
border-radius: 999px;
background: color-mix(in srgb, var(--warning) 10%, var(--surface));
color: var(--warning);
font-size: 0.6rem;
font-weight: 800;
line-height: 1.3;
text-align: center;
}
.workbar-running-list {
display: flex;
flex-direction: column;
gap: 0.28rem;
}
.workbar-running-item {
width: 100%;
padding: 0.42rem 0.46rem;
border: 1px solid color-mix(in srgb, var(--warning) 22%, var(--border-soft));
border-radius: var(--radius-xs);
background: color-mix(in srgb, var(--surface) 78%, transparent);
color: var(--text-dim);
cursor: pointer;
text-align: left;
transition: border-color var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default);
}
.workbar-running-item:hover,
.workbar-running-item:focus-visible {
outline: none;
border-color: color-mix(in srgb, var(--warning) 48%, var(--border-soft));
background: color-mix(in srgb, var(--warning) 10%, var(--surface));
transform: translateY(-1px);
}
.workbar-running-item-top {
display: flex;
align-items: center;
gap: 0.35rem;
min-width: 0;
}
.workbar-running-dot {
width: 7px;
height: 7px;
border-radius: 999px;
background: var(--warning);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 18%, transparent);
flex-shrink: 0;
}
.workbar-running-text {
min-width: 0;
flex: 1;
overflow: hidden;
color: var(--text);
font-size: 0.7rem;
font-weight: 700;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.workbar-running-id {
flex-shrink: 0;
color: var(--text-muted);
font-size: 0.58rem;
font-weight: 800;
}
.workbar-running-meta {
margin-top: 0.22rem;
color: var(--text-muted);
font-size: 0.6rem;
line-height: 1.35;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nav-subgroup-toggle {
position: relative;
display: flex;
align-items: center;
gap: 0.6rem;
width: 100%;
margin: 0.12rem 0;
padding: 0.56rem 0.75rem;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: none;
color: var(--text-muted);
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: all var(--duration-normal) var(--ease-default);
text-align: left;
letter-spacing: 0.02em;
}
.nav-subgroup-toggle:hover {
background: var(--sidebar-hover-bg);
border-color: var(--primary-25);
color: var(--text);
}
.nav-subgroup-toggle .nav-chevron {
width: 14px;
height: 14px;
margin-left: auto;
flex-shrink: 0;
transition: transform var(--duration-normal) var(--ease-out-expo);
opacity: 0.6;
}
.nav-subgroup-toggle[aria-expanded="true"] .nav-chevron {
transform: rotate(90deg);
}
.nav-subgroup {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--duration-normal) var(--ease-out-expo);
overflow: hidden;
}
.nav-subgroup.open {
grid-template-rows: 1fr;
}
.nav-subgroup-inner {
min-height: 0;
overflow: hidden;
}
.nav-subgroup .nav-item {
padding-left: 1.5rem;
font-size: 0.83rem;
}
body.sidebar-collapsed .nav-subgroup-toggle {
justify-content: center;
color: transparent;
}
body.sidebar-collapsed .nav-subgroup-toggle .nav-icon {
margin: 0;
color: var(--text-dim);
}
body.sidebar-collapsed .nav-subgroup-toggle .nav-chevron {
display: none;
}
body.sidebar-collapsed .nav-subgroup-toggle:hover .nav-icon {
color: var(--text);
}
body.sidebar-collapsed .nav-subgroup-toggle[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
left: calc(100% + 0.55rem);
top: 50%;
transform: translateY(-50%) scale(0.98);
padding: 0.28rem 0.46rem;
border-radius: 0.45rem;
border: 1px solid var(--border-soft);
background: var(--surface-overlay);
color: var(--text);
font-size: 0.68rem;
white-space: nowrap;
box-shadow: var(--shadow-soft);
opacity: 0;
pointer-events: none;
transition: opacity var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default);
z-index: 6;
}
body.sidebar-collapsed .nav-subgroup-toggle:hover::after,
body.sidebar-collapsed .nav-subgroup-toggle:focus-visible::after {
opacity: 1;
transform: translateY(-50%) scale(1);
}
body.sidebar-collapsed .nav-subgroup {
display: none;
}
.main-content {
container-type: inline-size;
container-name: main;
}
@container main (max-width: 640px) {
.stats-grid,
.focus-grid,
.dashboard-grid,
.settings-grid {
grid-template-columns: 1fr;
}
.stats-grid {
gap: var(--fluid-gap-sm, 0.5rem);
}
.focus-grid {
gap: var(--fluid-gap-sm, 0.5rem);
}
}
@container main (min-width: 641px) and (max-width: 960px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.dashboard-grid,
.settings-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.sidebar {
transition: transform var(--duration-sheet, 0.4s) var(--ease-snappy, cubic-bezier(0.2, 0, 0, 1));
will-change: transform;
}
body.mobile-nav-open .sidebar {
transform: translateX(0);
transition-timing-function: var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}
.mobile-sidebar-overlay {
transition: opacity var(--duration-normal, 0.25s) var(--ease-default),
visibility var(--duration-normal, 0.25s);
}
}
@media (max-width: 768px) {
.mobile-bottom-bar {
height: var(--bottom-bar-h, 64px);
padding-bottom: calc(var(--space-2, 0.5rem) + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
background: color-mix(in srgb, var(--bg) 85%, transparent);
backdrop-filter: blur(var(--glass-blur-xl, 32px)) saturate(1.8);
-webkit-backdrop-filter: blur(var(--glass-blur-xl, 32px)) saturate(1.8);
border-top: 0.5px solid color-mix(in srgb, var(--border) 50%, transparent);
box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.15);
transition: transform var(--duration-normal) var(--ease-default);
}
.mobile-bottom-bar.hide-on-scroll {
transform: translateY(calc(100% + 10px));
}
.mobile-bottom-item {
min-height: var(--touch-comfortable, 48px);
border-radius: var(--radius-sm, 10px);
transition: color var(--duration-fast) var(--ease-default),
background var(--duration-fast) var(--ease-default),
transform var(--duration-micro, 0.1s) var(--ease-default);
}
.mobile-bottom-item:active {
transform: scale(0.92);
transition-duration: var(--duration-micro, 0.1s);
}
.mobile-bottom-item.active {
background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.mobile-bottom-item .bottom-icon {
width: 28px;
height: 28px;
border-radius: var(--radius-sm, 10px);
display: flex;
align-items: center;
justify-content: center;
transition: background var(--duration-fast) var(--ease-default),
transform var(--duration-fast) var(--ease-default);
}
.mobile-bottom-item.active .bottom-icon {
background: color-mix(in srgb, var(--primary) 18%, transparent);
transform: scale(1.05);
}
.mobile-bottom-item .bottom-icon svg {
width: 22px;
height: 22px;
stroke-width: 1.6;
}
}
@media (max-width: 768px) {
.mobile-nav-toggle {
width: 2.85rem;
height: 2.85rem;
border-radius: var(--radius-sm, 10px);
background: color-mix(in srgb, var(--bg) 80%, transparent);
backdrop-filter: blur(var(--glass-blur, 16px)) saturate(1.5);
-webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(1.5);
border: 0.5px solid color-mix(in srgb, var(--border) 60%, transparent);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
transition: transform var(--duration-fast) var(--ease-default),
background var(--duration-fast) var(--ease-default),
opacity var(--duration-fast) var(--ease-default);
}
.mobile-nav-toggle:active {
transform: scale(0.88);
}
.mobile-nav-toggle.hide-on-scroll {
transform: translateY(calc(-100% - 1rem));
opacity: 0;
pointer-events: none;
}
}
@media (max-width: 768px) {
.main-content {
padding-bottom: calc(var(--bottom-bar-h, 64px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 1rem);
}
}
@media (max-width: 390px) {
.main-content {
padding-left: clamp(0.6rem, 2vw, 0.95rem);
padding-right: clamp(0.6rem, 2vw, 0.95rem);
}
.mobile-bottom-bar {
height: calc(var(--bottom-bar-h, 64px) - 4px);
}
.mobile-bottom-item span:not(.bottom-icon) {
font-size: 0.58rem;
}
.nav-group-title {
font-size: 0.62rem;
}
}
@media (min-width: 1440px) {
.sidebar {
width: 272px;
}
}
@media (min-width: 1920px) {
.main-content {
max-width: min(var(--content-max-width, 1720px), 100%);
}
.sidebar {
width: 288px;
}
}
@media (hover: none) and (pointer: coarse) {
.nav-item {
min-height: 44px;
-webkit-tap-highlight-color: transparent;
}
.nav-item:active {
background: var(--primary-8);
transition-duration: 0.08s;
}
.nav-subgroup-toggle {
min-height: 44px;
-webkit-tap-highlight-color: transparent;
}
}
.card-lg,
.cat-list, .skill-card, .gap-section,
.sb-stat, .sb-table,
.disc-stat, .disc-card,
.obj-card, .stat-card {
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
}
.card-sm,
.ea-ring-card, .ea-stat-card, .ea-insight,
.fn-layer, .fn-rec {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.card-inset {
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.card-base,
.bs-trust-ring, .bs-det-card, .bs-issue,
.bs-detail-item, .bs-rec {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 8px;
}
.glass-surface {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-card);
}
.glass-surface--light {
background: var(--glass-bg-light);
backdrop-filter: blur(var(--glass-blur-sm));
-webkit-backdrop-filter: blur(var(--glass-blur-sm));
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-xs);
}
.glass-surface--heavy {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur-lg));
-webkit-backdrop-filter: blur(var(--glass-blur-lg));
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-elevated);
}
.glass-shine {
position: relative;
overflow: hidden;
}
.glass-shine::before {
content: '';
position: absolute;
inset: 0;
background: var(--glass-shine);
pointer-events: none;
border-radius: inherit;
z-index: 0;
}
.interactive-lift {
transition: transform var(--duration-normal) var(--ease-default),
box-shadow var(--duration-normal) var(--ease-default);
}
.interactive-lift:hover {
transform: var(--hover-lift);
box-shadow: var(--shadow-card-hover);
}
.interactive-lift:active {
transform: var(--active-press);
}
.interactive-lift-sm {
transition: transform var(--duration-normal) var(--ease-default),
box-shadow var(--duration-normal) var(--ease-default);
}
.interactive-lift-sm:hover {
transform: var(--hover-lift-sm);
box-shadow: var(--shadow-card-hover);
}
.d-none          { display: none !important; }
.d-block         { display: block !important; }
.d-flex          { display: flex !important; }
.d-inline-flex   { display: inline-flex !important; }
.d-grid          { display: grid !important; }
.overflow-hidden  { overflow: hidden !important; }
.overflow-auto    { overflow: auto !important; }
.overflow-y-auto  { overflow-y: auto !important; }
.cursor-pointer   { cursor: pointer !important; }
.cursor-default   { cursor: default !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }
.text-left   { text-align: left !important; }
.icon-16 { width: 16px; height: 16px; }
.icon-18 { width: 18px; height: 18px; }
.icon-20 { width: 20px; height: 20px; }
.icon-24 { width: 24px; height: 24px; }
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.flex-between {
display: flex;
align-items: center;
justify-content: space-between;
}
.flex-col {
display: flex;
flex-direction: column;
}
.items-center { align-items: center; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.m-0 { margin: 0 !important; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.p-0 { padding: 0 !important; }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.w-full { width: 100%; }
.w-auto { width: auto; }
.rounded    { border-radius: var(--radius); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-xs { border-radius: var(--radius-xs); }
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fade-in {
animation: fadeIn var(--duration-enter) var(--ease-out-expo) forwards;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to   { opacity: 1; transform: translateY(0); }
}
.slide-up {
animation: slideUp var(--duration-enter) var(--ease-out-expo) forwards;
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(16px); }
to   { opacity: 1; transform: translateY(0); }
}
.sc-output-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.25rem 0.45rem;
border-bottom: 1px solid var(--border-soft);
font-size: var(--text-2xs);
color: var(--text-muted);
position: sticky;
top: 0;
background: var(--surface-sunken);
z-index: 1;
}
.sc-exec-id {
font-weight: 600;
color: var(--primary-50);
}
.sc-status-success { color: var(--success, #4caf50); }
.sc-status-failed  { color: var(--danger, #f44);     }
.sc-status-disconnected { color: var(--text-muted);   }
.sc-output-close {
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
font-size: var(--text-xs);
padding: 0 0.2rem;
line-height: 1;
}
.sc-output-close:hover { color: var(--text); }
.sc-line {
padding: 0.05rem 0.45rem;
white-space: pre-wrap;
word-break: break-all;
}
.sc-line.sc-done   { color: var(--success, #4caf50); font-weight: 600; padding-top: 0.2rem; }
.sc-line.sc-error  { color: var(--danger, #f44); }
.sc-line.sc-system { color: var(--text-muted); font-style: italic; }
.sidebar-chat-port {
padding: 0.2rem 0.75rem 0.3rem;
}
.sidebar-chat-input:focus {
border-color: var(--primary-35);
box-shadow: 0 0 0 2px var(--primary-8);
}
.sidebar-chat-send {
color: var(--primary);
}
body.sidebar-collapsed .sidebar-chat-port {
display: none;
}
.nav-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
stroke-width: 1.75;
}
.page-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.4rem;
flex-wrap: wrap;
}
.page-header h1 {
font-size: clamp(1.22rem, 1rem + 1.1vw, 1.72rem);
letter-spacing: -0.01em;
}
.page-subtitle {
color: var(--text-dim);
font-size: var(--text-base);
margin-top: 0.3rem;
line-height: 1.6;
max-width: 68ch;
}
.page-subtitle strong {
color: var(--text);
font-weight: 700;
}
.tab-nav {
display: flex;
gap: 0;
margin-bottom: 1.25rem;
border-bottom: 1px solid var(--border);
}
.tab-nav .tab {
padding: 0.6rem 1.2rem;
font-size: var(--text-base);
font-weight: 600;
color: var(--text-dim);
text-decoration: none;
border-bottom: 2px solid transparent;
transition: color 0.15s, border-color 0.15s;
}
.tab-nav .tab:hover:not(.active) {
color: var(--text);
}
.tab-nav .tab.active {
color: var(--primary);
border-bottom-color: var(--primary);
}
.header-actions {
display: flex;
gap: 0.55rem;
flex-wrap: wrap;
}
.status-pill {
display: inline-flex;
align-items: center;
gap: 0.34rem;
padding: 0.28rem 0.52rem;
border-radius: 999px;
border: 1px solid var(--border-soft);
background: var(--status-pill-bg);
font-size: var(--text-xs);
color: var(--text-dim);
}
.status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--success);
box-shadow: 0 0 0 5px var(--status-dot-glow);
}
.focus-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
margin-bottom: 1rem;
}
.focus-card {
position: relative;
padding: 0.85rem 1rem;
border: 1px solid var(--glass-border);
border-radius: var(--radius);
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
box-shadow: var(--shadow-card);
transition: transform var(--duration-normal) var(--ease-out-expo),
box-shadow var(--duration-normal) var(--ease-out-expo),
border-color var(--duration-normal) var(--ease-default);
}
.focus-card::before {
content: '';
position: absolute;
inset: 0;
background: var(--glass-shine);
pointer-events: none;
z-index: 0;
}
.focus-card > * {
position: relative;
z-index: 1;
}
.focus-card:hover {
transform: var(--hover-lift-sm);
border-color: var(--card-border-accent, var(--primary-25));
box-shadow: var(--shadow-card-hover), var(--glow-primary);
}
.focus-label {
font-size: var(--text-xs);
color: var(--text-muted);
letter-spacing: 0.03em;
text-transform: uppercase;
}
.focus-card h3 {
margin-top: 0.3rem;
font-size: var(--text-lg);
color: var(--text-heading);
}
.focus-meta {
margin-top: 0.25rem;
font-size: var(--text-sm);
color: var(--text-dim);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.9rem;
margin-bottom: 1.4rem;
}
.stat-card {
position: relative;
overflow: hidden;
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
border-radius: var(--radius);
padding: 1.15rem;
box-shadow: var(--shadow-card);
transition: transform var(--duration-normal) var(--ease-out-expo),
box-shadow var(--duration-normal) var(--ease-out-expo),
border-color var(--duration-normal) var(--ease-default);
}
.stat-card::before {
content: '';
position: absolute;
inset: 0;
background: var(--glass-shine);
pointer-events: none;
z-index: 0;
}
.stat-card > * {
position: relative;
z-index: 1;
}
.stat-card:hover {
transform: var(--hover-lift);
border-color: var(--card-border-accent, var(--primary-35));
box-shadow: var(--shadow-card-hover), var(--glow-primary);
}
.stat-value {
font-size: var(--text-5xl, var(--text-4xl));
font-weight: 800;
background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, var(--success) 30%));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.1;
}
.stat-label {
color: var(--text-muted);
font-size: var(--text-sm);
margin-top: 0.3rem;
}
.card {
position: relative;
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-card);
transition: transform var(--duration-normal) var(--ease-out-expo),
box-shadow var(--duration-normal) var(--ease-out-expo),
border-color var(--duration-normal) var(--ease-default);
}
.card::before {
content: '';
position: absolute;
inset: 0;
background: var(--glass-shine);
pointer-events: none;
z-index: 0;
}
.card > * {
position: relative;
z-index: 1;
}
.card:hover {
transform: var(--hover-lift-sm);
border-color: var(--primary-25);
box-shadow: var(--shadow-card-hover);
}
.card-header {
padding: 0.85rem 1rem;
border-bottom: 1px solid var(--border-soft);
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 40%, transparent) 0%, transparent 100%);
}
.card-header h3 {
font-size: var(--text-base);
color: var(--text-heading);
}
.card-body {
padding: 1rem;
}
.dashboard-grid,
.settings-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: 1fr 1fr;
}
.settings-grid .card.full-width {
grid-column: 1 / -1;
}
.data-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: var(--text-base);
border: none;
background: var(--glass-bg);
}
.table-wrap {
position: relative;
border-radius: var(--radius);
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--glass-border);
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur-sm));
-webkit-backdrop-filter: blur(var(--glass-blur-sm));
box-shadow: var(--shadow-card);
}
.table-wrap::after {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 20px;
background: linear-gradient(to right, transparent, var(--bg, rgba(6, 11, 22, 0.6)));
pointer-events: none;
opacity: 0;
transition: opacity 0.2s;
transform: translateX(var(--tw-scroll-x, 0px));
}
.table-wrap.has-overflow::after {
opacity: 1;
}
.data-table thead th {
position: sticky;
top: 0;
z-index: 1;
}
.data-table th {
text-align: left;
padding: 0.68rem 0.75rem;
border-bottom: 1px solid var(--border);
color: var(--text-muted);
background: var(--table-th-bg, rgba(26, 42, 73, 0.55));
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.data-table th.sortable {
cursor: pointer;
user-select: none;
transition: color 0.15s, background 0.15s;
white-space: nowrap;
}
.data-table th.sortable:hover {
color: var(--text);
background: var(--table-th-hover-bg, rgba(36, 56, 96, 0.7));
}
.data-table th.sortable.sorted {
color: var(--accent);
}
.data-table th.sortable .sort-icon {
font-size: var(--text-2xs);
opacity: 0.8;
}
.data-table td {
padding: 0.68rem 0.75rem;
border-bottom: 1px solid var(--border-soft);
}
.data-table tr:last-child td {
border-bottom: none;
}
.data-table tr:hover td {
background: var(--surface-hover, rgba(29, 47, 83, 0.45));
}
.data-table .col-check {
position: sticky;
left: 0;
z-index: 3;
width: 44px;
min-width: 44px;
background: var(--table-sticky-bg, rgba(14, 24, 43, 0.92));
}
.data-table th.col-check {
z-index: 5;
background: var(--table-th-bg, rgba(26, 42, 73, 0.94));
}
.data-table .col-actions {
position: sticky;
right: 0;
z-index: 2;
min-width: 242px;
background: var(--table-sticky-bg, rgba(14, 24, 43, 0.9));
}
.data-table th.col-actions {
z-index: 4;
background: var(--table-th-bg, rgba(26, 42, 73, 0.94));
}
.table-wrap .data-table tbody tr td.col-check,
.table-wrap .data-table tbody tr td.col-actions {
background:
linear-gradient(var(--table-sticky-bg, rgba(14, 24, 43, 0.92)),
var(--table-sticky-bg, rgba(14, 24, 43, 0.92))),
var(--bg, #060b16);
}
.table-wrap .data-table thead tr th.col-check,
.table-wrap .data-table thead tr th.col-actions {
background:
linear-gradient(var(--table-th-bg, rgba(26, 42, 73, 0.94)),
var(--table-th-bg, rgba(26, 42, 73, 0.94))),
var(--bg, #060b16);
}
.table-wrap .data-table tbody tr:hover td.col-check,
.table-wrap .data-table tbody tr:hover td.col-actions {
background:
linear-gradient(var(--surface-hover, rgba(29, 47, 83, 0.28)),
var(--surface-hover, rgba(29, 47, 83, 0.28))),
linear-gradient(var(--table-sticky-bg, rgba(14, 24, 43, 0.92)),
var(--table-sticky-bg, rgba(14, 24, 43, 0.92))),
var(--bg, #060b16);
}
.actions {
display: flex;
gap: 0.35rem;
flex-wrap: wrap;
}
.badge {
display: inline-block;
padding: 0.18rem 0.52rem;
border-radius: 999px;
font-size: var(--text-xs);
font-weight: 600;
border: 1px solid transparent;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
transition: all var(--duration-fast) var(--ease-default);
}
.badge-shell {
background: var(--badge-shell-bg);
border-color: var(--badge-shell-border);
color: var(--badge-shell-text);
}
.badge-claude {
background: var(--badge-claude-bg);
border-color: var(--badge-claude-border);
color: var(--badge-claude-text);
}
.badge-codex {
background: var(--badge-ai-bg);
border-color: var(--badge-ai-border);
color: var(--badge-ai-text);
}
.badge-gpt {
background: var(--badge-gpt-bg);
border-color: var(--badge-gpt-border);
color: var(--badge-gpt-text);
}
.badge-gemini {
background: var(--badge-gemini-bg);
border-color: var(--badge-gemini-border);
color: var(--badge-gemini-text);
}
.badge-copilot {
background: var(--badge-copilot-bg);
border-color: var(--badge-copilot-border);
color: var(--badge-copilot-text);
}
.badge-active,
.badge-success {
background: var(--badge-status-success-bg);
border-color: var(--badge-status-success-border);
color: var(--success);
}
.badge-paused,
.badge-timeout,
.badge-warning {
background: var(--badge-status-warning-bg);
border-color: var(--badge-status-warning-border);
color: var(--warning);
}
.badge-interrupted,
.badge-disabled,
.badge-pending,
.badge-cancelled {
background: var(--badge-status-muted-bg);
border-color: var(--badge-status-muted-border);
color: var(--text-muted);
}
.badge-failed,
.badge-danger,
.badge-blacklist {
background: var(--badge-status-danger-bg);
border-color: var(--badge-status-danger-border);
color: var(--danger);
}
.badge-running {
background: var(--badge-status-running-bg);
border-color: var(--badge-status-running-border);
color: var(--primary);
animation: badgePulse 2s ease-in-out infinite, badgeGlow 2s ease-in-out infinite;
}
@keyframes badgeGlow {
0%, 100% { box-shadow: 0 0 4px rgba(63,178,255,0.2); }
50% { box-shadow: 0 0 12px rgba(63,178,255,0.4); }
}
.badge-whitelist {
background: var(--badge-whitelist-bg);
border-color: var(--badge-whitelist-border);
color: var(--success);
}
.btn {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
padding: 0.46rem 0.9rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--gradient-btn);
color: var(--text);
font-size: var(--text-sm);
font-weight: 600;
cursor: pointer;
transition: all var(--duration-fast) var(--ease-default);
text-decoration: none;
}
.btn:hover {
border-color: var(--primary-35);
background: var(--gradient-btn-hover);
transform: var(--hover-lift-sm);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.btn:active {
transform: var(--active-press);
transition-duration: 0.1s;
}
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: 0.52;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.btn::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%),
rgba(255, 255, 255, 0.15) 0%,
transparent 60%);
opacity: 0;
transition: opacity 0.3s;
}
.btn:active::after {
opacity: 1;
}
.btn-loading {
pointer-events: none;
opacity: 0.78;
}
.btn-loading::before {
content: '';
width: 14px;
height: 14px;
border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
border-top-color: currentColor;
border-radius: 50%;
animation: btnSpin 0.6s linear infinite;
flex-shrink: 0;
}
@keyframes btnSpin {
to { transform: rotate(360deg); }
}
.btn-group {
display: inline-flex;
}
.btn-group .btn {
border-radius: 0;
}
.btn-group .btn:first-child {
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.btn-group .btn:last-child {
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.btn-group .btn + .btn {
margin-left: -1px;
}
.btn-icon {
width: 2.25rem;
height: 2.25rem;
padding: 0;
border-radius: var(--radius-sm);
}
.btn-icon svg {
width: 16px;
height: 16px;
}
.btn-ghost {
background: transparent;
border-color: transparent;
}
.btn-ghost:hover {
background: var(--primary-8);
border-color: var(--primary-25);
}
.btn-primary {
background: linear-gradient(135deg, var(--primary), var(--primary-strong));
border-color: rgba(63, 178, 255, 0.6);
color: var(--text-on-accent);
}
.btn-primary:hover {
border-color: rgba(63, 178, 255, 0.85);
box-shadow: var(--glow-primary), 0 4px 16px rgba(63, 178, 255, 0.25);
}
.btn-ai-gradient {
background: var(--ai-gradient);
color: var(--text-on-accent);
border: none;
}
.btn-success-gradient {
background: linear-gradient(135deg, var(--success-gradient-start), var(--success-gradient-end));
color: var(--text-on-strong);
border: none;
font-weight: 600;
}
.btn-danger {
background: rgba(255, 116, 116, 0.16);
border-color: rgba(255, 116, 116, 0.44);
color: var(--danger);
}
.btn-warning {
background: rgba(251, 191, 36, 0.14);
border-color: rgba(251, 191, 36, 0.44);
color: var(--warning);
}
.btn-muted {
background: rgba(148, 163, 184, 0.12);
border-color: rgba(148, 163, 184, 0.35);
color: var(--text-dim);
}
.btn-sm {
padding: 0.3rem 0.55rem;
font-size: var(--text-xs);
}
.btn-refresh {
background: var(--surface-elev);
border: 1px solid var(--border);
color: var(--text);
padding: 0.5rem 1rem;
border-radius: var(--radius-xs);
cursor: pointer;
font-size: var(--text-sm);
transition: background 0.15s;
}
.btn-refresh:hover {
background: var(--surface-hover);
}
.btn-refresh:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.form-container {
max-width: 900px;
}
.form-section {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
border-radius: var(--radius);
padding: 1.1rem;
margin-bottom: 0.9rem;
box-shadow: var(--shadow-card);
transition: border-color var(--duration-normal) var(--ease-default),
box-shadow var(--duration-normal) var(--ease-default);
}
.form-section:focus-within {
border-color: rgba(63, 178, 255, 0.3);
box-shadow: var(--shadow-card), 0 0 0 1px var(--primary-8);
}
.form-section-title {
font-size: var(--text-base);
font-weight: 700;
margin-bottom: 0.92rem;
}
.form-group {
margin-bottom: 0.75rem;
}
.form-group label {
display: block;
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-dim);
margin-bottom: var(--space-1, 0.25rem);
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 8px 12px;
background: var(--bg-soft, rgba(8, 15, 28, 0.75));
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text);
font-size: var(--text-base);
box-sizing: border-box;
}
.form-row {
display: flex;
gap: 0.9rem;
flex-wrap: wrap;
}
.form-row .form-group {
flex: 1;
min-width: 170px;
}
.form-actions {
display: flex;
gap: var(--space-2, 0.5rem);
justify-content: flex-end;
margin-top: var(--space-4, 1rem);
}
.input-field {
width: 100%;
min-height: 2.25rem;
padding: 0.56rem 0.72rem;
background: rgba(8, 15, 28, 0.75);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text);
font-size: var(--text-base);
}
.input-field::placeholder {
color: var(--text-muted);
}
.input-field:hover:not(:focus):not(:disabled) {
border-color: var(--primary-25);
}
.input-field:focus {
outline: none;
border-color: var(--primary-65);
box-shadow: 0 0 0 3px var(--primary-15), var(--glow-primary);
background: rgba(8, 15, 28, 0.9);
}
.input-textarea {
resize: vertical;
font-family: "JetBrains Mono", "SF Mono", Menlo, monospace;
}
.checkbox-label {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: var(--text-base);
cursor: pointer;
color: var(--text-dim);
}
.radio-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 0.7rem;
margin-bottom: 1rem;
}
.radio-card {
cursor: pointer;
}
.radio-card input {
display: none;
}
.radio-card-body {
height: 100%;
padding: 0.72rem;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
text-align: center;
transition: all var(--duration-fast) var(--ease-default);
background: rgba(17, 30, 52, 0.75);
}
.radio-card-body strong {
display: block;
font-size: var(--text-base);
}
.radio-card-body small {
color: var(--text-muted);
font-size: var(--text-xs);
}
.radio-card input:checked + .radio-card-body {
position: relative;
border-color: var(--primary-65);
box-shadow: inset 0 0 0 1px var(--primary-25);
background: var(--primary-15);
}
.toolbar {
display: flex;
gap: 0.65rem;
margin-bottom: 1rem;
flex-wrap: wrap;
align-items: center;
padding: 0.78rem;
border: 1px solid var(--glass-border);
border-radius: var(--radius);
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
box-shadow: var(--shadow-card);
}
.toolbar .toolbar-group {
display: flex;
gap: 0.65rem;
flex-wrap: wrap;
flex: 1;
min-width: min(100%, 660px);
}
.toolbar .input-field,
.toolbar .input-select {
min-width: 160px;
width: auto;
}
.toolbar.sticky-toolbar {
position: sticky;
top: 0.5rem;
z-index: 15;
box-shadow: 0 12px 28px rgba(2, 8, 18, 0.36);
}
.toolbar-stack {
display: grid;
gap: 0.6rem;
margin-bottom: 1rem;
}
.input-with-icon {
position: relative;
min-width: 280px;
}
.input-with-icon .input-field {
padding-left: 2rem;
width: 100%;
}
.input-with-icon .search-icon {
position: absolute;
left: 0.7rem;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
font-size: var(--text-base);
pointer-events: none;
}
.segmented {
display: flex;
flex-wrap: wrap;
background: rgba(13, 24, 44, 0.5);
border: 1px solid var(--border);
border-radius: 999px;
padding: 0.18rem;
gap: 0.15rem;
}
.seg-btn {
border: 1px solid transparent;
border-radius: 999px;
background: var(--interactive-pill-bg);
color: var(--text-dim);
font-size: var(--text-xs);
padding: 0.3rem 0.62rem;
cursor: pointer;
transition: all var(--duration-fast) var(--ease-default);
}
.seg-btn:hover {
border-color: var(--interactive-pill-hover-border);
color: var(--text);
background: var(--primary-8);
}
.seg-btn.active,
.view-btn.active {
background: var(--interactive-pill-active-bg);
color: var(--text-soft-highlight);
}
.seg-btn.active {
border-color: rgba(63, 178, 255, 0.4);
box-shadow: 0 0 8px rgba(63, 178, 255, 0.1);
}
.active-filters {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.view-switch {
display: inline-flex;
align-items: center;
gap: 0.3rem;
background: var(--view-switch-bg);
border: 1px solid var(--border);
border-radius: 999px;
padding: 0.2rem;
}
.view-btn {
border: none;
border-radius: 999px;
padding: 0.26rem 0.68rem;
background: transparent;
color: var(--text-dim);
cursor: pointer;
font-size: var(--text-xs);
}
.jobs-card-grid {
display: none;
gap: 0.75rem;
}
.jobs-view-cards .table-wrap {
display: none;
}
.jobs-view-cards .jobs-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.job-card {
position: relative;
border: 1px solid var(--glass-border);
border-radius: var(--radius);
padding: 0.85rem;
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
display: grid;
gap: 0.62rem;
box-shadow: var(--shadow-card);
transition: transform var(--duration-normal) var(--ease-out-expo),
box-shadow var(--duration-normal) var(--ease-out-expo),
border-color var(--duration-normal) var(--ease-default);
}
.job-card::before {
content: '';
position: absolute;
inset: 0;
background: var(--glass-shine);
pointer-events: none;
border-radius: inherit;
z-index: 0;
}
.job-card > * {
position: relative;
z-index: 1;
}
.job-card:hover {
border-color: var(--card-border-accent, var(--primary-35));
transform: var(--hover-lift-sm);
box-shadow: var(--shadow-card-hover), var(--glow-primary);
}
.job-card-top {
display: flex;
justify-content: space-between;
gap: 0.5rem;
}
.job-card h3 {
font-size: var(--text-base);
margin: 0;
}
.job-card-meta {
display: flex;
flex-wrap: wrap;
gap: 0.3rem 0.5rem;
font-size: var(--text-xs);
color: var(--text-muted);
}
.job-card-actions {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.filter-chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
background: var(--filter-chip-bg);
border: 1px solid var(--filter-chip-border);
border-radius: 999px;
color: var(--text);
font-size: var(--text-xs);
padding: 0.26rem 0.56rem;
}
.filter-chip button {
border: none;
background: none;
color: var(--text-dim);
font-size: var(--text-base);
line-height: 1;
cursor: pointer;
padding: 0;
}
.filter-chip button:hover {
color: var(--text);
}
.toolbar-meta {
display: flex;
align-items: center;
gap: 0.55rem;
color: var(--text-muted);
font-size: var(--text-sm);
margin-left: auto;
flex-wrap: wrap;
}
.toolbar-meta strong {
color: var(--text);
}
.tab-bar {
display: flex;
gap: 0;
border-bottom: 2px solid var(--border);
margin-bottom: 1rem;
}
.tab-btn {
padding: 0.5rem 1.2rem;
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
font-size: var(--text-base);
border-bottom: 2px solid transparent;
margin-bottom: -2px;
transition: all var(--duration-normal) var(--ease-default);
}
.tab-btn:hover:not(.active) {
color: var(--text);
background: var(--primary-5);
}
.tab-btn.active {
color: var(--primary);
border-bottom-color: var(--primary);
}
.tab-header {
display: flex;
gap: 0;
border-bottom: 1px solid var(--border);
margin-bottom: 1rem;
}
.tab-header .tab-btn {
padding: 0.5rem 0.85rem;
font-size: var(--text-sm);
}
.tab-header .tab-btn.active { font-weight: 600; }
.tab-panel { display: none; padding-top: 0.85rem; }
.tab-panel.active { display: block; }
.ov-value { font-size: var(--text-3xl); font-weight: 800; line-height: 1.1; color: var(--text-heading, var(--text)); }
.ov-label { font-size: var(--text-2xs); color: var(--text-dim, var(--text-muted)); margin-top: 0.2rem; }
.section-title { font-size: var(--text-lg); font-weight: 700; margin: 1.2rem 0 0.6rem; display: flex; align-items: center; gap: 0.4rem; }
.page-actions { display: flex; align-items: center; gap: 0.5rem; }
.w-90 { width: 90%; }
.w-75 { width: 75%; }
.badge-trend { display: inline-block; padding: 0.1rem 0.4rem; border-radius: 4px; font-size: var(--text-xs); font-weight: 600; }
.badge-trend.improving { color: var(--success-strong); background: var(--success-soft-bg); }
.badge-trend.degrading { color: var(--danger-strong); background: var(--danger-soft-bg); }
.badge-trend.stable { color: var(--text-muted); background: var(--bg-subtle); }
.schedule-panel {
padding: 0.35rem 0;
}
.hidden {
display: none !important;
}
.cron-fields {
display: flex;
gap: 0.55rem;
margin-bottom: 0.9rem;
}
.cron-field {
flex: 1;
text-align: center;
}
.cron-field label {
font-size: var(--text-xs);
color: var(--text-muted);
display: block;
margin-bottom: 0.22rem;
}
.cron-field .input-field {
text-align: center;
font-family: "JetBrains Mono", Menlo, monospace;
}
.cron-preview {
background: rgba(7, 13, 24, 0.85);
border: 1px solid var(--border-soft);
border-radius: var(--radius-sm);
padding: 0.72rem;
margin-bottom: 0.75rem;
}
.cron-expression {
font-family: "JetBrains Mono", Menlo, monospace;
font-size: var(--text-lg);
color: var(--primary);
font-weight: 700;
}
.cron-description {
color: var(--text-dim);
font-size: var(--text-base);
margin-top: 0.23rem;
}
.cron-presets {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.detail-row {
display: flex;
justify-content: space-between;
padding: 0.5rem 0;
border-bottom: 1px solid var(--border);
}
.detail-row:last-child {
border-bottom: none;
}
.detail-label {
color: var(--text-muted);
font-size: var(--text-base);
}
.code-block {
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: 6px;
padding: 0.75rem;
margin: 0.5rem 0 0;
font-size: var(--text-base);
white-space: pre-wrap;
word-break: break-all;
max-height: 200px;
overflow-y: auto;
}
.output-block {
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: 6px;
padding: 1rem;
font-size: var(--text-base);
white-space: pre-wrap;
word-break: break-all;
max-height: 300px;
overflow-y: auto;
}
.output-stderr {
color: var(--danger-strong);
}
.list-item {
display: flex;
align-items: center;
gap: 0.72rem;
padding: 0.55rem 0;
border-bottom: 1px solid var(--border-soft);
transition: background-color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default);
}
.list-item:last-child {
border-bottom: none;
}
a.list-item:hover {
border-color: var(--primary-25);
background: var(--primary-5);
}
.list-item-name {
flex: 1;
font-size: var(--text-base);
}
.list-item-meta {
color: var(--text-muted);
font-size: var(--text-sm);
}
.mini-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
gap: 0.72rem;
margin-bottom: 1rem;
}
.jobs-context-bar {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
margin-bottom: 0.75rem;
justify-content: space-between;
}
.jobs-context-pills {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
.jobs-context-pills span {
display: inline-flex;
align-items: center;
min-height: 1.9rem;
padding: 0.25rem 0.65rem;
border: 1px solid var(--border-soft);
border-radius: 999px;
background: var(--surface-panel);
color: var(--text-dim);
font-size: var(--text-xs);
}
.jobs-context-actions {
margin-left: auto;
display: inline-flex;
gap: 0.45rem;
flex-wrap: wrap;
}
.jobs-filter-toggle,
.jobs-autorefresh-btn {
margin-left: 0;
}
.jobs-autorefresh-btn.is-off {
border-color: var(--border-soft);
color: var(--text-muted);
opacity: 0.85;
}
.job-risk-row td:first-child {
box-shadow: inset 3px 0 0 transparent;
}
.job-risk-row.job-risk-pending td:first-child {
box-shadow: inset 3px 0 0 var(--warning);
}
.job-risk-row.job-risk-danger td:first-child {
box-shadow: inset 3px 0 0 var(--danger);
}
.job-risk-row.job-risk-warning td:first-child {
box-shadow: inset 3px 0 0 var(--text-dim);
}
.job-risk-chip {
display: inline-flex;
align-items: center;
border-radius: 999px;
border: 1px solid transparent;
font-size: var(--text-2xs);
font-weight: 700;
line-height: 1;
padding: 0.2rem 0.45rem;
width: fit-content;
}
.job-risk-chip.job-risk-pending {
color: var(--warning);
border-color: var(--warning-soft-border);
background: var(--warning-soft-bg);
}
.job-risk-chip.job-risk-danger {
color: var(--danger);
border-color: var(--badge-status-danger-border);
background: var(--danger-soft-bg);
}
.job-risk-chip.job-risk-warning {
color: var(--text-dim);
border-color: var(--badge-status-muted-border);
background: var(--badge-status-muted-bg);
}
.job-card.job-risk-pending {
border-color: var(--warning-soft-border);
}
.job-card.job-risk-danger {
border-color: var(--badge-status-danger-border);
}
.job-card.job-risk-warning {
border-color: var(--badge-status-muted-border);
}
.mini-stat {
position: relative;
overflow: hidden;
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
border-radius: var(--radius);
padding: 0.8rem 0.9rem;
box-shadow: var(--shadow-card);
transition: transform var(--duration-normal) var(--ease-out-expo),
box-shadow var(--duration-normal) var(--ease-out-expo),
border-color var(--duration-normal) var(--ease-default);
}
.mini-stat:hover {
transform: var(--hover-lift-sm);
border-color: var(--card-border-accent, var(--primary-25));
box-shadow: var(--shadow-card-hover), var(--glow-primary);
}
.mini-stat .value {
display: block;
font-size: var(--text-xl);
font-weight: 700;
color: var(--text);
}
.mini-stat .label {
color: var(--text-muted);
font-size: var(--text-xs);
margin-top: 0.22rem;
}
.job-name-cell {
display: grid;
gap: 0.22rem;
}
.job-meta {
color: var(--text-muted);
font-size: var(--text-xs);
}
.empty-hint {
color: var(--text-muted);
font-size: var(--text-base);
text-align: center;
padding: 3rem 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-elev) 100%);
border: 1px dashed var(--border-soft);
border-radius: var(--radius);
}
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
margin-top: 0.75rem;
padding: 0.5rem 0;
}
.page-info {
font-size: var(--text-sm);
color: var(--text-dim);
}
.loading-line {
position: relative;
overflow: hidden;
border-radius: var(--radius-xs);
height: 10px;
background: rgba(126, 147, 183, 0.15);
}
.loading-line::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(63, 178, 255, 0.45), transparent);
animation: shimmer 1.2s infinite;
}
.fade-in {
animation: fadeIn var(--duration-normal) var(--ease-default);
}
.modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(var(--glass-blur-sm));
-webkit-backdrop-filter: blur(var(--glass-blur-sm));
align-items: center;
justify-content: center;
z-index: var(--z-modal);
}
.modal-overlay.show,
.modal-overlay.open {
display: flex;
animation: overlayFadeIn var(--duration-normal) var(--ease-default);
}
.modal-overlay.show .modal,
.modal-overlay.open .modal,
.modal-overlay.show .modal-box,
.modal-overlay.open .modal-box {
animation: modalEnter var(--duration-enter) var(--ease-out-expo);
}
@keyframes overlayFadeIn {
from { opacity: 0; }
to   { opacity: 1; }
}
@keyframes modalEnter {
from {
opacity: 0;
transform: scale(0.96) translateY(12px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.modal-box {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur-lg));
-webkit-backdrop-filter: blur(var(--glass-blur-lg));
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
padding: var(--space-5);
width: 90%;
max-width: 540px;
max-height: 80vh;
overflow-y: auto;
box-shadow: var(--shadow-elevated);
}
.modal-box h3 {
margin: 0 0 var(--space-4);
font-size: var(--text-xl);
color: var(--text);
}
.modal {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur-lg));
-webkit-backdrop-filter: blur(var(--glass-blur-lg));
border: 1px solid var(--glass-border);
border-radius: var(--radius);
width: 90vw;
max-width: 900px;
max-height: 85vh;
display: flex;
flex-direction: column;
box-shadow: var(--shadow-elevated);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--border);
}
.modal-header h2,
.modal-header h3 {
margin: 0;
font-size: 1.05rem;
font-weight: 600;
}
.modal-body {
padding: 1.5rem;
overflow-y: auto;
}
#toast-container {
position: fixed;
top: 1rem;
right: 1rem;
z-index: var(--z-toast);
display: flex;
flex-direction: column;
gap: 0.52rem;
max-width: 420px;
}
.toast {
position: relative;
overflow: hidden;
display: flex;
align-items: flex-start;
gap: 0.62rem;
padding: 0.78rem 0.95rem;
border-radius: var(--radius-sm);
font-size: var(--text-base);
line-height: 1.45;
opacity: 0;
transform: translateX(100%) scale(0.95);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
background: var(--glass-bg);
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-elevated);
cursor: pointer;
}
.toast.show {
opacity: 1;
transform: translateX(0) scale(1);
animation: toastSlideIn var(--duration-enter) var(--ease-out-expo);
}
@keyframes toastSlideIn {
from {
opacity: 0;
transform: translateX(100%) scale(0.95);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
.toast-icon {
font-size: var(--text-xl);
flex-shrink: 0;
margin-top: 1px;
}
.toast-body {
flex: 1;
}
.toast-close {
font-size: var(--text-lg);
color: var(--text-muted);
cursor: pointer;
flex-shrink: 0;
}
.toast-close:hover {
color: var(--text);
}
.toast-success {
border-color: var(--toast-success-border);
}
.toast-success .toast-icon,
.toast-success .toast-body {
color: var(--success);
}
.toast-error {
border-color: var(--toast-error-border);
background: var(--toast-error-bg);
}
.toast-error .toast-icon,
.toast-error .toast-body {
color: var(--danger);
}
.toast-info {
border-color: var(--toast-info-border);
}
.toast-info .toast-icon,
.toast-info .toast-body {
color: var(--primary);
}
.toast-warning {
border-color: var(--toast-warning-border);
}
.toast-warning .toast-icon,
.toast-warning .toast-body {
color: var(--warning);
}
.toast-progress {
position: absolute;
bottom: 0;
left: 0;
height: 2px;
background: currentColor;
opacity: 0.4;
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
animation: toastCountdown var(--toast-duration, 5s) linear forwards;
}
@keyframes toastCountdown {
from { width: 100%; }
to   { width: 0%; }
}
.toast + .toast {
margin-top: -2px;
}
.toast.hide {
opacity: 0;
transform: translateX(100%) scale(0.9);
transition: opacity 0.2s ease, transform 0.25s var(--ease-out-expo);
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3rem 1.5rem;
text-align: center;
color: var(--text-muted);
gap: 0.75rem;
}
.empty-state-icon {
width: 48px;
height: 48px;
color: var(--text-dim);
opacity: 0.5;
stroke-width: 1.25;
}
.empty-state-title {
font-size: var(--text-lg);
font-weight: 600;
color: var(--text-dim);
}
.empty-state-desc {
font-size: var(--text-sm);
max-width: 320px;
line-height: 1.5;
}
.empty-state-action {
margin-top: 0.5rem;
}
.toggle-switch {
position: relative;
width: var(--toggle-w, 44px);
height: var(--toggle-h, 24px);
flex-shrink: 0;
display: inline-flex;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.toggle-slider {
position: absolute;
inset: 0;
cursor: pointer;
background: var(--toggle-off-bg, var(--slate-500));
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
transition: background 0.35s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
border-color 0.35s var(--ease-default);
}
.toggle-slider::before {
content: '';
position: absolute;
width: var(--toggle-thumb, 18px);
height: var(--toggle-thumb, 18px);
left: 2px;
bottom: 2px;
background: #fff;
border-radius: 50%;
box-shadow: var(--toggle-thumb-shadow, 0 1px 3px rgba(0,0,0,0.3));
transition: transform 0.35s var(--ease-out-back, cubic-bezier(0.34, 1.3, 0.64, 1));
}
.toggle-switch input:checked + .toggle-slider {
background: var(--toggle-on-bg, var(--primary));
border-color: color-mix(in srgb, var(--primary) 80%, transparent);
}
.toggle-switch input:checked + .toggle-slider::before {
transform: translateX(20px);
}
.toggle-switch input:focus-visible + .toggle-slider {
box-shadow: var(--focus-ring, 0 0 0 2px var(--bg), 0 0 0 4px var(--primary-50));
}
.skeleton-loader {
display: flex;
flex-direction: column;
gap: 0.65rem;
padding: 1rem;
}
.skeleton-line {
height: 0.85rem;
background: linear-gradient(
90deg,
var(--surface-sunken) 25%,
color-mix(in srgb, var(--surface-sunken) 60%, var(--surface) 40%) 50%,
var(--surface-sunken) 75%
);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s ease-in-out infinite;
border-radius: var(--radius-xs);
width: 100%;
}
.skeleton-line--title {
height: 1.2rem;
width: 60%;
}
.skeleton-line--short {
width: 40%;
}
.skeleton-line--card {
height: 5rem;
border-radius: var(--radius);
}
@keyframes skeleton-shimmer {
0%   { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.badge-status {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.15rem 0.55rem;
border-radius: 999px;
font-size: var(--text-xs);
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
}
.badge-status--success {
background: var(--success-soft-bg);
color: var(--success);
border: 1px solid var(--success-soft-border);
}
.badge-status--warning {
background: var(--warning-soft-bg);
color: var(--warning);
border: 1px solid var(--warning-soft-border);
}
.badge-status--danger {
background: var(--danger-soft-bg);
color: var(--danger);
border: 1px solid var(--danger-soft-border);
}
.badge-status--info {
background: var(--primary-soft-bg, color-mix(in srgb, var(--primary) 12%, transparent));
color: var(--primary);
border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
}
.badge-status--neutral {
background: var(--surface-sunken);
color: var(--text-dim);
border: 1px solid var(--border-soft);
}
.badge-status--dot::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.stat-card,
.focus-card,
.card,
.job-card,
.mini-stat {
container-type: inline-size;
}
@media (max-width: 768px) {
.stat-card,
.focus-card,
.card,
.job-card,
.mini-stat {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.stat-card:active,
.focus-card:active,
.job-card:active,
.mini-stat:active {
transform: scale(0.97);
transition-duration: var(--duration-micro, 0.1s);
}
.stat-card {
padding: var(--fluid-pad, 0.75rem);
}
.stat-value {
font-size: var(--fluid-3xl, 1.45rem);
}
.stat-label {
font-size: var(--fluid-xs, 0.65rem);
}
.focus-grid {
grid-template-columns: 1fr;
gap: var(--fluid-gap-sm, 0.5rem);
}
.focus-card {
padding: var(--fluid-pad, 0.75rem);
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--fluid-gap-sm, 0.5rem);
}
.mini-stats {
grid-template-columns: repeat(2, 1fr);
gap: var(--fluid-gap-sm, 0.5rem);
}
.dashboard-grid,
.settings-grid {
grid-template-columns: 1fr;
gap: var(--fluid-gap, 0.75rem);
}
}
@media (max-width: 480px) {
.stats-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.btn {
min-height: var(--touch-comfortable, 48px);
padding: 0.62rem 1rem;
font-size: var(--fluid-sm, 0.72rem);
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.btn:active {
transform: scale(0.96);
transition: transform var(--duration-micro, 0.1s) var(--ease-snappy, ease);
}
.btn-sm {
min-height: var(--touch-min, 44px);
padding: 0.45rem 0.72rem;
font-size: var(--fluid-xs, 0.65rem);
}
.seg-btn {
min-height: var(--touch-min, 44px);
padding: 0.5rem 0.72rem;
font-size: var(--fluid-xs, 0.65rem);
}
.view-btn {
min-height: var(--touch-min, 44px);
padding: 0.42rem 0.72rem;
}
.tab-btn {
min-height: var(--touch-comfortable, 48px);
padding: 0.55rem 0.85rem;
font-size: var(--fluid-sm, 0.72rem);
}
.tab-nav .tab {
min-height: var(--touch-comfortable, 48px);
padding: 0.55rem 0.85rem;
font-size: var(--fluid-sm, 0.72rem);
}
.header-actions {
width: 100%;
justify-content: stretch;
}
.header-actions .btn {
flex: 1;
min-width: 0;
}
}
@media (max-width: 768px) {
.input-field,
.form-group input,
.form-group select,
.form-group textarea,
.cron-field .input-field {
font-size: max(16px, var(--fluid-base, 0.82rem));
min-height: var(--touch-comfortable, 48px);
padding: 0.62rem 0.85rem;
border-radius: var(--radius, 8px);
}
.form-group label {
font-size: var(--fluid-sm, 0.72rem);
margin-bottom: 0.35rem;
}
.form-row {
flex-direction: column;
gap: var(--fluid-gap-sm, 0.5rem);
}
.form-row .form-group {
min-width: 0;
}
.form-section {
padding: var(--fluid-pad, 0.75rem);
margin-bottom: var(--fluid-gap-sm, 0.5rem);
}
.form-actions {
flex-direction: column;
}
.form-actions .btn {
width: 100%;
justify-content: center;
}
.radio-group {
grid-template-columns: 1fr 1fr;
gap: var(--fluid-gap-sm, 0.5rem);
}
.radio-card-body {
padding: 0.62rem;
min-height: var(--touch-comfortable, 48px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.checkbox-label {
min-height: var(--touch-comfortable, 48px);
display: inline-flex;
align-items: center;
}
.cron-fields {
flex-wrap: wrap;
}
.cron-field {
min-width: calc(33% - 0.4rem);
}
}
@media (max-width: 768px) {
.table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
}
.table-wrap::after {
opacity: 1;
width: 32px;
background: linear-gradient(to right, transparent, var(--bg, rgba(6, 11, 22, 0.85)));
}
.data-table {
font-size: var(--fluid-sm, 0.72rem);
}
.data-table th,
.data-table td {
padding: 0.55rem 0.6rem;
white-space: nowrap;
}
.data-table .col-actions {
min-width: auto;
}
}
@media (max-width: 480px) {
.modal-overlay {
align-items: flex-end;
}
.modal-overlay.show .modal,
.modal-overlay.open .modal,
.modal-overlay.show .modal-box,
.modal-overlay.open .modal-box {
animation: bottomSheetEnter var(--duration-sheet, 0.4s) var(--ease-snappy, ease);
}
.modal {
width: 100%;
max-width: 100%;
max-height: 92vh;
max-height: 92dvh;
border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
padding-bottom: var(--safe-bottom, 0px);
}
.modal::before {
content: '';
display: block;
width: 36px;
height: 4px;
background: var(--border, rgba(255,255,255,0.2));
border-radius: 2px;
margin: 0.55rem auto 0;
flex-shrink: 0;
}
.modal-box {
width: 100%;
max-width: 100%;
max-height: 85vh;
max-height: 85dvh;
border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
padding-bottom: calc(var(--space-5, 1.25rem) + var(--safe-bottom, 0px));
}
.modal-box::before {
content: '';
display: block;
width: 36px;
height: 4px;
background: var(--border, rgba(255,255,255,0.2));
border-radius: 2px;
margin: 0 auto 0.75rem;
flex-shrink: 0;
}
.modal-header {
padding: 0.75rem 1rem;
}
.modal-body {
padding: 1rem;
}
}
@keyframes bottomSheetEnter {
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 768px) {
#toast-container {
top: auto;
bottom: calc(var(--bottom-bar-h, 64px) + var(--safe-bottom, 0px) + 0.75rem);
right: 0.5rem;
left: 0.5rem;
max-width: 100%;
}
.toast {
font-size: var(--fluid-sm, 0.72rem);
}
.toast.show {
animation: toastSlideUp var(--duration-enter, 0.3s) var(--ease-out-expo, ease);
}
}
@keyframes toastSlideUp {
from {
opacity: 0;
transform: translateY(100%) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (max-width: 768px) {
.toolbar {
flex-direction: column;
gap: var(--fluid-gap-sm, 0.5rem);
padding: var(--fluid-pad, 0.75rem);
}
.toolbar .toolbar-group {
min-width: 100%;
}
.toolbar .input-field,
.toolbar .input-select {
min-width: 0;
width: 100%;
}
.input-with-icon {
min-width: 0;
width: 100%;
}
.toolbar-meta {
margin-left: 0;
width: 100%;
justify-content: space-between;
}
.toolbar.sticky-toolbar {
top: 0;
border-radius: 0;
margin-left: calc(var(--fluid-pad, 0.75rem) * -1);
margin-right: calc(var(--fluid-pad, 0.75rem) * -1);
width: calc(100% + var(--fluid-pad, 0.75rem) * 2);
}
.segmented {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
flex-wrap: nowrap;
scrollbar-width: none;
}
.segmented::-webkit-scrollbar {
display: none;
}
}
@media (max-width: 768px) {
.active-filters {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
flex-wrap: nowrap;
scrollbar-width: none;
padding-bottom: 0.25rem;
}
.active-filters::-webkit-scrollbar {
display: none;
}
.filter-chip {
flex-shrink: 0;
min-height: var(--touch-min, 44px);
display: inline-flex;
align-items: center;
}
.jobs-context-bar {
flex-direction: column;
align-items: stretch;
gap: var(--fluid-gap-sm, 0.5rem);
}
.jobs-context-pills {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
flex-wrap: nowrap;
scrollbar-width: none;
}
.jobs-context-pills::-webkit-scrollbar {
display: none;
}
.jobs-context-actions {
margin-left: 0;
width: 100%;
justify-content: stretch;
}
.jobs-context-actions .btn {
flex: 1;
}
}
@media (max-width: 768px) {
.jobs-view-cards .jobs-card-grid {
grid-template-columns: 1fr;
}
.job-card {
padding: var(--fluid-pad, 0.75rem);
}
}
@media (max-width: 768px) {
.list-item {
min-height: var(--touch-comfortable, 48px);
padding: 0.62rem 0;
gap: var(--fluid-gap-sm, 0.5rem);
-webkit-tap-highlight-color: transparent;
}
a.list-item:active {
background: var(--primary-8);
transition-duration: var(--duration-micro, 0.1s);
}
.detail-row {
flex-direction: column;
gap: 0.22rem;
padding: 0.62rem 0;
}
.detail-label {
font-size: var(--fluid-xs, 0.65rem);
}
}
@media (max-width: 768px) {
.page-header {
flex-direction: column;
gap: var(--fluid-gap-sm, 0.5rem);
margin-bottom: var(--fluid-gap, 0.75rem);
}
.page-header h1 {
font-size: var(--fluid-xl, 1.1rem);
}
.page-subtitle {
font-size: var(--fluid-sm, 0.72rem);
}
.page-actions {
width: 100%;
}
.page-actions .btn {
flex: 1;
}
}
@media (max-width: 768px) {
.pagination {
padding-bottom: calc(0.5rem + var(--safe-bottom, 0px));
}
.pagination .btn {
min-height: var(--touch-comfortable, 48px);
}
}
@media (max-width: 768px) {
.empty-state {
padding: 2rem 1rem;
}
.empty-state-icon {
width: 40px;
height: 40px;
}
.empty-state-title {
font-size: var(--fluid-base, 0.82rem);
}
.empty-state-desc {
font-size: var(--fluid-xs, 0.65rem);
}
.empty-hint {
padding: 2rem 1rem;
font-size: var(--fluid-sm, 0.72rem);
}
}
@media (max-width: 768px) {
.tab-bar,
.tab-nav,
.tab-header {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
flex-wrap: nowrap;
}
.tab-bar::-webkit-scrollbar,
.tab-nav::-webkit-scrollbar,
.tab-header::-webkit-scrollbar {
display: none;
}
.tab-btn,
.tab-nav .tab {
flex-shrink: 0;
white-space: nowrap;
}
}
@media (max-width: 768px) {
.badge {
font-size: var(--fluid-xs, 0.65rem);
padding: 0.22rem 0.45rem;
}
.badge-status {
font-size: var(--fluid-xs, 0.65rem);
}
}
@media (max-width: 768px) {
.code-block,
.output-block {
font-size: var(--fluid-xs, 0.65rem);
padding: var(--fluid-pad, 0.75rem);
max-height: 180px;
-webkit-overflow-scrolling: touch;
}
}
.console-toolbar-card {
display: flex;
align-items: flex-end;
gap: 0.65rem;
padding: 0.65rem 0.85rem;
background: linear-gradient(135deg, rgba(16, 27, 48, 0.85), rgba(13, 21, 39, 0.7));
border: 1px solid var(--border-soft);
border-radius: var(--radius-sm);
margin-bottom: 0.75rem;
backdrop-filter: blur(var(--glass-blur-sm));
}
.toolbar-control-group {
display: flex;
flex-direction: column;
gap: 0.3rem;
min-width: 0;
}
.toolbar-dir-group { flex: 1; min-width: 160px; }
.toolbar-label {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.68rem;
font-weight: 600;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
padding-left: 0.15rem;
}
.toolbar-label svg { opacity: 0.7; }
.console-select,
.console-input {
appearance: none;
padding: 0.48rem 0.72rem;
background: rgba(8, 15, 28, 0.8);
border: 1px solid var(--border);
border-radius: var(--radius-xs);
color: var(--text);
font-size: 0.82rem;
transition: all var(--duration-normal) var(--ease-default);
outline: none;
}
.console-select {
padding-right: 2rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239eb2d5'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.65rem center;
cursor: pointer;
min-width: 140px;
}
.console-select:hover,
.console-input:hover {
border-color: var(--primary-35);
background: rgba(10, 19, 35, 0.95);
}
.console-select:focus,
.console-input:focus {
border-color: var(--primary-65);
box-shadow: 0 0 0 2px var(--primary-15);
}
.console-input {
width: 100%;
font-family: var(--font-mono);
font-size: 0.8rem;
}
.console-input::placeholder { color: var(--text-muted); font-family: -apple-system, sans-serif; }
.console-toolbar-card .provider-status {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.75rem;
color: var(--text-dim);
padding: 0.48rem 0.65rem;
background: var(--success-soft-bg);
border: 1px solid var(--success-soft-border);
border-radius: var(--radius-xs);
white-space: nowrap;
align-self: flex-end;
}
.console-toolbar-card.compact {
padding: 0.5rem 0.65rem;
gap: 0.5rem;
}
.console-toolbar-card.compact .console-select,
.console-toolbar-card.compact .console-input {
padding: 0.38rem 0.6rem;
font-size: 0.8rem;
}
.console-toolbar-card.compact .console-select { padding-right: 1.8rem; min-width: 120px; }
.console-toolbar-card.compact .toolbar-label { font-size: 0.62rem; }
.prompt-area {
position: relative;
margin-bottom: 0.75rem;
}
.prompt-area textarea {
width: 100%;
min-height: 100px;
max-height: 300px;
padding: 0.75rem;
padding-right: 5rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xs);
color: var(--text);
font-family: var(--font-mono);
font-size: 0.88rem;
line-height: 1.5;
resize: vertical;
}
.prompt-area textarea:focus {
border-color: var(--primary);
outline: none;
box-shadow: 0 0 0 2px var(--primary-dim);
}
.prompt-area textarea::placeholder { color: var(--text-dim); }
.send-btn {
position: absolute;
right: 0.75rem;
bottom: 0.75rem;
padding: 0.5rem 1.2rem;
border-radius: 6px;
background: var(--primary);
color: var(--text-on-strong);
border: none;
font-weight: 600;
font-size: 0.88rem;
cursor: pointer;
transition: all 0.15s;
}
.send-btn:hover { opacity: 0.85; }
.send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.output-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.output-header h3 { margin: 0; font-size: 0.95rem; }
.status-badge {
padding: 0.15rem 0.5rem;
border-radius: 4px;
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
}
.status-running { background: var(--status-running-bg); color: var(--primary); }
.status-success { background: var(--status-success-bg); color: var(--success); }
.status-failed { background: var(--status-danger-bg); color: var(--danger); }
.status-timeout { background: var(--status-warning-bg); color: var(--warning); }
.output-box {
overflow-y: auto;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-xs);
padding: 0.75rem 0.75rem 0.75rem 1rem;
font-family: var(--font-mono);
font-size: 0.82rem;
line-height: 1.6;
white-space: pre-wrap;
word-break: break-all;
color: var(--text);
position: relative;
border-left: 3px solid var(--primary-glow);
}
.output-box:empty::before {
content: '等待指令...';
color: var(--text-dim);
font-style: italic;
}
.event-line { padding: 2px 0; border-radius: 2px; }
.event-line.event-system { color: var(--text-dim); font-style: italic; font-size: 0.78rem; }
.event-line.event-text { color: var(--text); }
.event-line.event-tool { color: var(--violet); padding-left: 0.5rem; border-left: 2px solid var(--violet); }
.event-line.event-tool-result { color: var(--text-dim); font-size: 0.78rem; padding-left: 1rem; border-left: 2px solid var(--border); }
.event-line.event-result { color: var(--text-dim); font-size: 0.78rem; }
.event-line.event-error { color: var(--danger); background: var(--danger-soft-bg); padding: 2px 4px; }
.event-line.event-done { color: var(--success); font-weight: 600; background: var(--success-soft-bg); padding: 2px 4px; }
.provider-status { display: inline-flex; align-items: center; gap: 0.3rem; }
.dot-ok,
.dot-no { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.dot-ok { background: var(--success); }
.dot-no { background: var(--danger); }
@media (max-width: 1024px) {
.focus-grid {
grid-template-columns: 1fr;
}
.dashboard-grid,
.settings-grid {
grid-template-columns: 1fr;
}
.main-content {
padding: 1rem 1.05rem 1.1rem;
}
.stats-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.sidebar-collapse-btn,
.skip-link {
display: none;
}
body.sidebar-collapsed .sidebar {
width: min(82vw, 290px);
}
.mobile-nav-toggle {
display: inline-flex;
position: fixed;
top: 0.85rem;
left: 0.85rem;
z-index: 50;
width: 2.75rem;
height: 2.75rem;
border-radius: 999px;
border: 1px solid var(--border);
align-items: center;
justify-content: center;
background: rgba(16, 27, 48, 0.92);
backdrop-filter: blur(var(--glass-blur-sm));
color: var(--text);
font-size: 1.1rem;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.mobile-sidebar-overlay {
display: block;
position: fixed;
inset: 0;
background: rgba(5, 10, 18, 0.62);
opacity: 0;
visibility: hidden;
transition: all var(--duration-normal) var(--ease-default);
z-index: 25;
}
body.mobile-nav-open .mobile-sidebar-overlay {
opacity: 1;
visibility: visible;
}
body.mobile-nav-open { overflow: hidden; }
.sidebar {
position: fixed;
left: 0;
top: 0;
width: min(82vw, 290px);
transform: translateX(-102%);
transition: transform var(--duration-normal) var(--ease-default);
height: 100dvh;
border-right: 1px solid var(--border);
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: var(--surface);
}
body.mobile-nav-open .sidebar {
transform: translateX(0);
}
.main-content {
padding: 3.7rem 0.85rem 5.25rem;
}
body.density-compact .main-content {
padding: 3.5rem 0.75rem 5rem;
}
.mobile-bottom-bar {
display: flex;
position: fixed;
bottom: 0; left: 0; right: 0;
background: var(--glass-bg);
border-top: 1px solid var(--glass-border);
padding: var(--space-2) var(--space-3);
padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
z-index: var(--z-sticky);
backdrop-filter: blur(var(--glass-blur-lg));
-webkit-backdrop-filter: blur(var(--glass-blur-lg));
gap: var(--space-1);
box-shadow: 0 -8px 26px rgba(0, 0, 0, 0.22);
}
.mobile-bottom-item {
flex: 1;
display: flex; flex-direction: column; align-items: center;
gap: 2px;
padding: var(--space-1) 0;
color: var(--text-muted);
text-decoration: none;
font-size: 0.62rem; font-weight: 500;
-webkit-tap-highlight-color: transparent;
border-radius: var(--radius-xs);
transition: color var(--duration-fast) var(--ease-default);
appearance: none;
-webkit-appearance: none;
background: transparent;
border: 0;
font-family: inherit;
cursor: pointer;
}
.mobile-bottom-item:hover,
.mobile-bottom-item.active { color: var(--primary); }
.mobile-bottom-item.active .bottom-icon {
background: var(--mobile-bottom-active-bg);
border-color: var(--primary-25);
}
.mobile-bottom-item:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--primary-25);
}
.mobile-bottom-item .bottom-icon {
font-size: 1.2rem;
line-height: 1;
border: 1px solid transparent;
border-radius: 999px;
padding: 0.15rem 0.5rem;
transition: background var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default);
}
.mobile-bottom-item .bottom-icon svg {
width: 20px;
height: 20px;
}
.mobile-bottom-item.active {
background: color-mix(in srgb, var(--mobile-bottom-active-bg) 45%, transparent);
}
.btn, .btn-sm { min-height: 2.75rem; }
.nav-item { min-height: 48px; padding: var(--space-3) var(--space-4); }
.toggle-switch { transform: scale(1.1); }
.tab-nav button, .settings-nav button, .nav-tab { padding: var(--space-3) var(--space-4); min-height: 2.75rem; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select {
font-size: max(16px, 1em) !important;
}
.data-table.responsive-card thead { display: none; }
.data-table.responsive-card tbody tr {
display: block;
border: 1px solid var(--border-soft);
border-radius: var(--radius-sm);
margin-bottom: var(--space-3);
padding: var(--space-3);
background: var(--surface);
}
.data-table.responsive-card td {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-1) 0;
border: none;
}
.data-table.responsive-card td::before {
content: attr(data-label);
font-weight: 600;
color: var(--text-dim);
font-size: var(--text-sm);
flex-shrink: 0;
margin-right: var(--space-3);
}
.data-table.responsive-card td:empty { display: none; }
.form-row .form-group {
min-width: 100%;
}
.cron-fields {
flex-wrap: wrap;
}
.cron-field {
min-width: calc(50% - 0.4rem);
}
.toolbar .input-field,
.toolbar .input-select,
.btn,
.btn-sm {
min-height: var(--touch-min, 44px);
}
.table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.data-table {
min-width: auto;
white-space: normal;
}
.data-table [data-col="schedule"],
.data-table [data-col="next-run"],
.data-table [data-col="rate"] {
display: none;
}
.view-switch {
width: 100%;
justify-content: space-between;
}
.toolbar-meta {
margin-left: 0;
width: 100%;
justify-content: space-between;
}
.toolbar.sticky-toolbar {
top: calc(env(safe-area-inset-top, 0px) + 3.15rem);
}
.seg-btn {
min-height: 2rem;
padding: 0.35rem 0.72rem;
}
.input-with-icon {
min-width: 100%;
}
.toolbar .toolbar-group {
min-width: 100%;
}
.jobs-context-bar,
.jobs-context-pills,
.jobs-context-actions {
gap: 0.4rem;
}
.jobs-context-pills span {
min-height: 1.8rem;
padding: 0.2rem 0.55rem;
font-size: 0.72rem;
}
.jobs-context-actions {
margin-left: 0;
width: 100%;
}
.jobs-filters-collapsed #jobs-toolbar-stack {
display: none;
}
#toast-container {
left: 0.6rem;
right: 0.6rem;
max-width: none;
}
.toast {
max-width: none;
}
.command-palette-overlay {
padding: 5.3rem 0.6rem 0.6rem;
}
.command-palette {
border-radius: 10px;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
.bulk-bar {
position: sticky;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.65rem 1rem;
background: linear-gradient(180deg, rgba(16, 27, 48, 0.96), rgba(9, 17, 31, 0.98));
border-top: 1px solid var(--primary);
border-radius: var(--radius) var(--radius) 0 0;
box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(var(--glass-blur));
z-index: 20;
animation: slideUp 0.2s ease;
}
.bulk-bar .bulk-count {
font-size: 0.84rem;
color: var(--primary);
font-weight: 600;
margin-right: 0.5rem;
white-space: nowrap;
}
.bulk-bar .btn {
font-size: 0.78rem;
padding: 0.32rem 0.65rem;
}
@keyframes slideUp {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.pagination-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.6rem 1rem;
margin-top: 0.5rem;
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius-sm);
font-size: 0.82rem;
color: var(--text-dim);
}
.pagination-controls {
display: flex;
align-items: center;
gap: 0.6rem;
}
.pagination-pos {
white-space: nowrap;
font-size: 0.82rem;
}
.pagination-size {
display: flex;
align-items: center;
gap: 0.4rem;
white-space: nowrap;
font-size: 0.82rem;
}
.pagination-info {
white-space: nowrap;
font-size: 0.82rem;
}
@media (max-width: 640px) {
.pagination-bar {
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
}
.stats-grid {
grid-template-columns: 1fr;
gap: 0.6rem;
}
.stat-card {
padding: 0.85rem;
}
.page-header {
flex-direction: column;
align-items: stretch;
gap: 0.6rem;
}
.header-actions {
width: 100%;
justify-content: flex-start;
}
.page-header h1 {
font-size: 1.1rem;
}
}
.data-table .col-check {
width: 36px;
text-align: center;
padding-left: 0.5rem;
padding-right: 0;
}
.row-checkbox {
width: 16px;
height: 16px;
accent-color: var(--primary);
cursor: pointer;
vertical-align: middle;
}
.row-fade-out {
animation: rowFadeOut 0.3s ease forwards;
}
@keyframes rowFadeOut {
to {
opacity: 0;
transform: translateX(30px);
height: 0;
padding: 0;
margin: 0;
overflow: hidden;
}
}
.row-flash-success td {
animation: rowFlash 0.6s ease;
}
@keyframes rowFlash {
0% { background: var(--success-tint-bg); }
100% { background: transparent; }
}
.shortcuts-overlay {
position: fixed;
inset: 0;
background: var(--overlay-dark);
z-index: var(--z-modal);
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn 0.15s ease;
}
.shortcuts-modal {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.25rem 1.5rem;
min-width: 280px;
max-width: 420px;
box-shadow: var(--shadow-soft);
animation: modalPop 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.shortcuts-title {
margin: 0 0 1rem;
font-size: 1.05rem;
}
.shortcut-row {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.4rem 0;
border-bottom: 1px solid var(--divider-soft);
font-size: 0.84rem;
color: var(--text-dim);
}
.shortcut-row:last-of-type {
border-bottom: none;
}
.shortcut-row kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
height: 24px;
padding: 0 6px;
background: var(--surface-elev);
border: 1px solid var(--border);
border-radius: 5px;
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--text);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}
@keyframes shimmer {
to {
transform: translateX(100%);
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.page-loading-bar {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 3px;
background: linear-gradient(90deg, var(--primary), var(--success));
z-index: var(--z-loading-bar);
transition: width 0.3s ease;
border-radius: 0 2px 2px 0;
box-shadow: 0 0 8px rgba(63, 178, 255, 0.5);
}
.breadcrumb {
display: flex;
align-items: center;
gap: 0.45rem;
width: fit-content;
max-width: 100%;
padding: 0.42rem 0.65rem;
border-radius: 999px;
border: 1px solid var(--border-soft);
background: color-mix(in srgb, var(--surface-overlay) 78%, transparent);
backdrop-filter: blur(var(--glass-blur-sm));
margin-bottom: 0.85rem;
font-size: 0.8rem;
color: var(--text-dim);
}
.breadcrumb a {
color: var(--text-muted);
text-decoration: none;
transition: color 0.15s;
}
.breadcrumb a:hover {
color: var(--primary);
}
.breadcrumb-sep {
color: var(--slate-500);
font-size: 0.72rem;
}
.breadcrumb-current {
color: var(--text);
font-weight: 600;
}
.sidebar-footer {
margin-top: auto;
padding: 0.75rem 0.35rem;
border-top: 1px solid var(--border-soft);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: center;
justify-items: stretch;
gap: 0.42rem;
position: relative;
}
.sidebar-feedback-btn,
.lang-toggle-btn,
.density-toggle-btn,
.theme-toggle-btn,
.sidebar-restart-btn,
.sidebar-logout-btn {
background: var(--surface-elev);
border: 1px solid var(--border-soft);
border-radius: var(--radius-xs);
color: var(--text-dim);
width: 100%;
min-width: 0;
height: 2rem;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s, border-color 0.2s, color 0.2s;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
}
.sidebar-feedback-btn:hover,
.lang-toggle-btn:hover,
.density-toggle-btn:hover,
.theme-toggle-btn:hover {
background: var(--surface-hover);
border-color: var(--border);
}
.theme-toggle-btn,
.density-toggle-btn {
font-size: 0;
position: relative;
}
.theme-toggle-btn::before,
.density-toggle-btn::before {
font-size: 0.95rem;
line-height: 1;
color: currentColor;
}
.theme-toggle-btn::before {
content: '\25D0';
}
.density-toggle-btn::before {
content: '\21F5';
}
.sidebar-version {
grid-column: 1 / -1;
font-size: 0.68rem;
color: var(--slate-500);
letter-spacing: 0.04em;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: color 0.2s ease;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0.18rem;
}
.sidebar-version:hover {
color: var(--text-dim);
}
.sidebar-version-badge {
display: inline-block;
padding: 0.08rem 0.42rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--border) 70%, var(--primary) 30%);
background: color-mix(in srgb, var(--surface-elev) 82%, var(--primary) 18%);
color: var(--primary);
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.06em;
font-variant-numeric: tabular-nums;
transition: all 0.2s ease;
}
.sidebar-version-badge.has-update {
border-color: var(--warning, #f59e0b);
background: color-mix(in srgb, var(--surface-elev) 75%, var(--warning, #f59e0b) 25%);
color: var(--warning, #f59e0b);
animation: cortex-version-pulse 2.4s ease-in-out infinite;
}
@keyframes cortex-version-pulse {
0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warning, #f59e0b) 40%, transparent); }
50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--warning, #f59e0b) 0%, transparent); }
}
.sidebar-feedback-btn:hover {
border-color: var(--primary-35);
color: var(--primary);
}
.sidebar-restart-btn:hover {
border-color: var(--warning-soft-border);
color: var(--warning);
background: var(--warning-soft-bg-hover, var(--warning-soft-bg));
}
.sidebar-logout-btn:hover {
border-color: var(--danger-soft-border);
color: var(--danger);
background: var(--danger-soft-bg-10, var(--danger-soft-bg));
}
.sidebar-restart-label,
.sidebar-logout-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.sidebar-footer-icon {
width: 14px;
height: 14px;
stroke-width: 1.75;
}
.feedback-overlay {
position: fixed;
inset: 0;
z-index: 1200;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(4px);
opacity: 0;
pointer-events: none;
transition: opacity var(--duration-normal) var(--ease-default);
}
.feedback-overlay.active {
opacity: 1;
pointer-events: auto;
}
.feedback-dialog {
background: var(--surface-panel);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-modal);
width: 90%;
max-width: 420px;
padding: 1.5rem;
transform: translateY(12px) scale(0.97);
transition: transform var(--duration-normal) var(--ease-out-expo);
}
.feedback-overlay.active .feedback-dialog {
transform: translateY(0) scale(1);
}
.feedback-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.2rem;
}
.feedback-header h3 {
font-size: 1.05rem;
font-weight: 650;
color: var(--text);
margin: 0;
}
.feedback-close {
background: none;
border: none;
color: var(--text-muted);
font-size: 1rem;
cursor: pointer;
padding: 0.25rem;
border-radius: var(--radius-xs);
transition: color var(--duration-fast) var(--ease-default);
}
.feedback-close:hover {
color: var(--text);
}
.feedback-rating {
display: flex;
gap: 0.5rem;
justify-content: center;
margin-bottom: 1rem;
}
.feedback-emoji {
font-size: 1.65rem;
background: none;
border: 2px solid transparent;
border-radius: var(--radius-sm);
padding: 0.3rem 0.45rem;
cursor: pointer;
transition: all var(--duration-fast) var(--ease-default);
opacity: 0.55;
}
.feedback-emoji:hover {
opacity: 1;
transform: scale(1.15);
}
.feedback-emoji.selected {
opacity: 1;
border-color: var(--primary-65);
background: var(--primary-8);
transform: scale(1.1);
}
.feedback-type-row {
margin-bottom: 0.75rem;
}
.feedback-select {
width: 100%;
padding: 0.45rem 0.65rem;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface-sunken);
color: var(--text);
font-size: 0.82rem;
}
.feedback-textarea {
width: 100%;
padding: 0.55rem 0.65rem;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface-sunken);
color: var(--text);
font-size: 0.84rem;
resize: vertical;
min-height: 80px;
font-family: inherit;
line-height: 1.5;
margin-bottom: 1rem;
}
.feedback-textarea::placeholder {
color: var(--text-muted);
}
.feedback-textarea:focus {
outline: none;
border-color: var(--primary-65);
box-shadow: 0 0 0 3px var(--primary-15);
}
.feedback-actions {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
}
.feedback-success {
text-align: center;
padding: 1.5rem 0 0.5rem;
}
.feedback-success-icon {
font-size: 2.5rem;
color: var(--success);
margin-bottom: 0.5rem;
}
.feedback-success p {
color: var(--text);
font-size: 0.95rem;
font-weight: 500;
}
body.sidebar-collapsed .sidebar-footer {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0.55rem 0.45rem;
gap: 0.35rem;
}
body.sidebar-collapsed .sidebar-feedback-btn,
body.sidebar-collapsed .lang-toggle-btn,
body.sidebar-collapsed .density-toggle-btn,
body.sidebar-collapsed .theme-toggle-btn,
body.sidebar-collapsed .sidebar-restart-btn,
body.sidebar-collapsed .sidebar-logout-btn {
width: 2rem;
flex: 0 0 auto;
}
body.sidebar-collapsed .sidebar-version {
display: none;
}
body.sidebar-collapsed .theme-toggle-btn,
body.sidebar-collapsed .density-toggle-btn {
font-size: 0;
border-radius: 999px;
position: relative;
}
body.sidebar-collapsed .theme-toggle-btn::before,
body.sidebar-collapsed .density-toggle-btn::before {
position: absolute;
inset: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
color: var(--text-dim);
}
body.sidebar-collapsed .theme-toggle-btn::before {
content: '\25D0';
}
body.sidebar-collapsed .density-toggle-btn::before {
content: '\21F5';
}
.lang-toggle-btn {
font-size: 0.78rem;
position: relative;
}
body.sidebar-collapsed .lang-toggle-btn {
font-size: 0;
overflow: hidden;
position: relative;
}
body.sidebar-collapsed .lang-toggle-btn::before {
position: absolute;
inset: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
color: var(--text-dim);
content: '\1F310';
}
.lang-menu {
position: absolute;
bottom: 100%;
left: 0;
margin-bottom: 0.35rem;
background: var(--surface-elev);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.15));
padding: 0.25rem;
z-index: var(--z-dropdown);
min-width: 8rem;
}
.lang-menu-item {
display: block;
width: 100%;
padding: 0.4rem 0.65rem;
border: none;
border-radius: var(--radius-xs);
background: transparent;
color: var(--text-dim);
font-size: 0.82rem;
text-align: left;
cursor: pointer;
transition: background 0.12s;
}
.lang-menu-item:hover {
background: var(--surface-hover);
}
.lang-menu-item.active {
color: var(--accent);
font-weight: 600;
}
body.density-compact .main-content {
padding: 1.1rem 1.4rem 1.4rem;
}
body.density-compact .page-header {
margin-bottom: 1rem;
}
body.density-compact .card-header,
body.density-compact .card-body,
body.density-compact .form-section {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
body.density-compact .stats-grid,
body.density-compact .mini-stats,
body.density-compact .dashboard-grid,
body.density-compact .focus-grid {
gap: 0.65rem;
}
body.density-compact .stat-card,
body.density-compact .mini-stat,
body.density-compact .focus-card {
padding: 0.78rem 0.85rem;
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--primary), transparent);
opacity: 0;
transition: opacity 0.3s ease;
}
.stat-card:hover::before {
opacity: 1;
}
.empty-state-enhanced {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
padding: 3rem 1.5rem;
text-align: center;
}
.empty-state-icon {
font-size: 2.5rem;
opacity: 0.4;
line-height: 1;
animation: emptyBounce 2s ease-in-out infinite;
}
.empty-state-title {
font-size: 1rem;
font-weight: 600;
color: var(--text);
}
.empty-state-desc {
font-size: 0.84rem;
color: var(--text-muted);
max-width: 36ch;
line-height: 1.6;
}
.empty-state-action {
margin-top: 0.5rem;
}
.data-table tbody tr {
animation: rowSlideIn 0.2s ease backwards;
}
.data-table tbody tr:nth-child(1) { animation-delay: 0s; }
.data-table tbody tr:nth-child(2) { animation-delay: 0.02s; }
.data-table tbody tr:nth-child(3) { animation-delay: 0.04s; }
.data-table tbody tr:nth-child(4) { animation-delay: 0.06s; }
.data-table tbody tr:nth-child(5) { animation-delay: 0.08s; }
@keyframes rowSlideIn {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes badgePulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(63, 178, 255, 0.3); }
50% { box-shadow: 0 0 0 4px rgba(63, 178, 255, 0); }
}
.char-counter {
position: absolute;
right: 0.75rem;
top: 0.5rem;
font-size: 0.68rem;
color: var(--text-dim);
pointer-events: none;
font-family: var(--font-mono);
}
.cmd-history {
display: flex;
gap: 0.35rem;
flex-wrap: wrap;
margin-bottom: 0.6rem;
}
.cmd-history-chip {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.2rem 0.55rem;
border-radius: 6px;
background: var(--surface);
border: 1px solid var(--border);
color: var(--text-dim);
font-size: 0.72rem;
font-family: var(--font-mono);
cursor: pointer;
transition: all 0.15s;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cmd-history-chip:hover {
border-color: var(--primary);
color: var(--primary);
background: var(--primary-dim);
}
body.sidebar-collapsed .nav-item {
position: relative;
}
body.sidebar-collapsed .nav-item::after {
content: attr(data-tooltip);
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
margin-left: 8px;
padding: 0.3rem 0.6rem;
border-radius: 6px;
background: var(--surface-elev);
border: 1px solid var(--border);
color: var(--text);
font-size: 0.75rem;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s;
z-index: var(--z-tooltip);
}
body.sidebar-collapsed .nav-item:hover::after {
opacity: 1;
}
body.sidebar-collapsed .nav-item:focus-visible::after {
opacity: 1;
}
@media (max-width: 768px) {
.breadcrumb {
width: auto;
font-size: 0.74rem;
margin-bottom: 0.6rem;
border-radius: var(--radius-sm);
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.breadcrumb::-webkit-scrollbar {
display: none;
}
.page-header h1 {
font-size: 1.2rem;
}
.stat-card::before {
display: none;
}
.console-toolbar-card {
flex-wrap: wrap;
gap: 0.5rem;
}
.toolbar-control-group,
.toolbar-dir-group {
min-width: 100%;
}
.console-select { min-width: 100%; }
}
.back-to-top {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
width: 2.6rem;
height: 2.6rem;
border-radius: 50%;
border: 1px solid var(--border);
background: linear-gradient(135deg, rgba(16, 27, 48, 0.95), rgba(9, 17, 31, 0.98));
color: var(--text-dim);
font-size: 1.1rem;
cursor: pointer;
z-index: 40;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: translateY(10px) scale(0.9);
pointer-events: none;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(var(--glass-blur));
}
.back-to-top.visible {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.back-to-top:hover {
border-color: var(--primary);
color: var(--primary);
box-shadow: 0 4px 24px rgba(63, 178, 255, 0.2);
transform: translateY(-2px) scale(1);
}
.back-to-top:active {
transform: translateY(0) scale(0.95);
}
.toast-progress {
position: absolute;
bottom: 0;
left: 0;
height: 2px;
border-radius: 0 0 11px 11px;
background: currentColor;
opacity: 0.5;
animation: toastProgress linear forwards;
}
@keyframes toastProgress {
from { width: 100%; }
to { width: 0; }
}
.main-content > *:first-child {
animation: contentEnter 0.35s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
@keyframes contentEnter {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.stagger-enter > * {
opacity: 0;
transform: translateY(12px);
animation: fadeSlideUp var(--duration-enter, 0.35s) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
}
.stagger-enter > *:nth-child(1) { animation-delay: calc(var(--stagger-delay, 60ms) * 0); }
.stagger-enter > *:nth-child(2) { animation-delay: calc(var(--stagger-delay, 60ms) * 1); }
.stagger-enter > *:nth-child(3) { animation-delay: calc(var(--stagger-delay, 60ms) * 2); }
.stagger-enter > *:nth-child(4) { animation-delay: calc(var(--stagger-delay, 60ms) * 3); }
.stagger-enter > *:nth-child(5) { animation-delay: calc(var(--stagger-delay, 60ms) * 4); }
.stagger-enter > *:nth-child(6) { animation-delay: calc(var(--stagger-delay, 60ms) * 5); }
.stagger-enter > *:nth-child(n+7) { animation-delay: calc(var(--stagger-delay, 60ms) * 6); }
@keyframes fadeSlideUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.network-indicator {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3px;
z-index: var(--z-loading-bar);
background: var(--danger);
transform: scaleY(0);
transform-origin: top;
transition: transform 0.3s ease;
}
.network-indicator.offline {
transform: scaleY(1);
}
.network-indicator.offline::after {
content: '離線中...';
position: absolute;
left: 50%;
top: 8px;
transform: translateX(-50%);
padding: 0.3rem 0.8rem;
border-radius: 0 0 6px 6px;
background: var(--danger);
color: var(--text-on-strong);
font-size: 0.72rem;
font-weight: 600;
}
.command-palette-overlay {
position: fixed;
inset: 0;
z-index: var(--z-command-palette);
background: rgba(4, 9, 18, 0.7);
backdrop-filter: blur(var(--glass-blur-sm));
display: none;
align-items: flex-start;
justify-content: center;
padding: 8vh 1rem 1rem;
}
.command-palette-overlay.open {
display: flex;
}
.command-palette {
width: min(680px, 100%);
border: 1px solid var(--border);
border-radius: 14px;
background: var(--surface-overlay);
box-shadow: 0 28px 60px rgba(0, 0, 0, 0.35);
overflow: hidden;
}
.command-palette-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.8rem 1rem;
border-bottom: 1px solid var(--border-soft);
}
.command-palette-header h3 {
margin: 0;
font-size: 0.9rem;
}
.command-palette-header kbd {
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--text-dim);
border: 1px solid var(--border);
border-radius: 6px;
padding: 0.14rem 0.34rem;
background: var(--surface-elev);
}
#command-search {
width: calc(100% - 1.2rem);
margin: 0.6rem;
padding: 0.65rem 0.72rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
font-size: 0.9rem;
}
#command-search:focus {
outline: none;
border-color: var(--primary-65);
box-shadow: 0 0 0 3px var(--primary-15);
}
.command-list {
max-height: min(52vh, 420px);
overflow-y: auto;
padding: 0 0.6rem 0.6rem;
}
.command-palette-meta {
margin: -0.1rem 0.6rem 0.2rem;
color: var(--text-muted);
font-size: 0.72rem;
}
.command-item {
width: 100%;
text-align: left;
border: 1px solid transparent;
background: transparent;
color: var(--text);
border-radius: var(--radius-xs);
padding: 0.58rem 0.72rem;
margin-top: 0.2rem;
cursor: pointer;
font-size: 0.84rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
}
.command-item:hover,
.command-item.active {
border-color: var(--primary-25);
background: var(--primary-8);
}
.command-item.empty {
color: var(--text-muted);
cursor: default;
}
.command-item-main {
display: flex;
flex-direction: column;
min-width: 0;
}
.command-item-subtitle {
color: var(--text-muted);
font-size: 0.72rem;
margin-top: 0.1rem;
}
.command-item kbd {
font-family: var(--font-mono);
font-size: 0.68rem;
border: 1px solid var(--border-soft);
border-radius: 6px;
padding: 0.14rem 0.34rem;
color: var(--text-dim);
background: var(--surface-elev);
white-space: nowrap;
}
body.palette-open {
overflow: hidden;
}
.divider-gradient {
height: 1px;
border: none;
background: linear-gradient(90deg, transparent, var(--border), transparent);
margin: 1.25rem 0;
}
.data-table tbody tr:nth-child(even) td:not(.col-check):not(.col-actions) {
background: rgba(14, 24, 43, 0.3);
}
.data-table tbody tr:nth-child(even):hover td:not(.col-check):not(.col-actions) {
background: rgba(29, 47, 83, 0.45);
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"])
.data-table tbody tr:nth-child(even) td:not(.col-check):not(.col-actions) {
background: rgba(0, 0, 0, 0.02);
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"])
.data-table tbody tr:nth-child(even):hover td:not(.col-check):not(.col-actions) {
background: rgba(37, 99, 235, 0.07);
}
.nav-item.active::before {
content: '';
position: absolute;
left: -1px;
top: 25%;
bottom: 25%;
width: 3px;
border-radius: 0 3px 3px 0;
background: var(--primary);
}
.radio-card-body:hover {
border-color: var(--primary-35);
background: var(--primary-8);
}
.radio-card input:checked + .radio-card-body::after {
content: '\2713';
position: absolute;
top: 6px;
right: 8px;
font-size: 0.7rem;
color: var(--primary);
font-weight: 700;
}
.input-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239eb2d5'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.7rem center;
padding-right: 2rem;
}
@keyframes emptyBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.input-with-icon .input-field:focus {
background: rgba(8, 15, 28, 0.9);
box-shadow: 0 0 0 3px var(--primary-15), inset 0 0 0 1px rgba(63, 178, 255, 0.1);
}
.input-with-icon .input-field:focus + .search-icon,
.input-with-icon .input-field:focus ~ .search-icon {
color: var(--primary);
}
.mini-stat:hover {
border-color: var(--primary-25);
transform: translateY(-1px);
}
.mini-stat::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--primary), transparent);
opacity: 0;
transition: opacity 0.25s ease;
}
.mini-stat:hover::before {
opacity: 0.7;
}
.cal-month-day.today {
background: var(--info-soft-bg);
border: 1px solid var(--info-soft-border) !important;
border-radius: 4px;
}
.cal-month-day.today .day-num {
color: var(--primary);
font-weight: 700;
}
.cal-cell.has-conflict {
background: var(--danger-soft-bg);
position: relative;
}
.cal-cell.has-conflict::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: var(--danger);
opacity: 0.5;
}
.card-header:hover {
background: var(--primary-5);
}
.settings-nav .nav-tab {
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.settings-nav .nav-tab.active {
box-shadow: 0 0 0 1px rgba(63, 178, 255, 0.2);
}
.checkbox-label input[type="checkbox"] {
accent-color: var(--primary);
width: 16px;
height: 16px;
}
@keyframes modalPop {
from {
opacity: 0;
transform: scale(0.95) translateY(8px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.rec-exists-badge {
animation: none;
}
.rec-card {
position: relative;
overflow: hidden;
}
.rec-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 3px;
background: var(--primary);
opacity: 0;
transition: opacity 0.2s;
}
.rec-card:hover::before {
opacity: 0.6;
}
.rec-card.unavailable::before {
background: var(--warning);
}
@media (min-width: 1024px) {
.dashboard-grid {
gap: 1.25rem;
}
}
*::-webkit-scrollbar-thumb:hover {
background: var(--primary-65);
}
@media (max-width: 768px) {
.back-to-top {
bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
right: 1rem;
width: 2.4rem;
height: 2.4rem;
font-size: 1rem;
}
}
.fb-chain-list { display: flex; flex-direction: column; gap: 2px; }
.fb-chain-item {
display: flex; align-items: center; gap: 0.5rem;
padding: 0.45rem 0.6rem; border-radius: 6px;
background: var(--surface); border: 1px solid var(--border-soft);
transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
position: relative;
}
.fb-chain-item:hover { background: var(--surface-hover); border-color: var(--border); }
.fb-chain-item.is-dragging { opacity: 0.35; background: var(--primary-15); }
.fb-chain-item.drag-over-above { border-top: 2.5px solid var(--primary); margin-top: -1px; }
.fb-chain-item.drag-over-below { border-bottom: 2.5px solid var(--primary); margin-bottom: -1px; }
.fb-chain-item .fb-handle {
cursor: grab; color: var(--text-muted); padding: 0.15rem 0.25rem;
user-select: none; font-size: 1.1rem; line-height: 1; flex-shrink: 0;
touch-action: none; border-radius: 3px;
transition: color 0.15s, background 0.15s;
}
.fb-chain-item .fb-handle:hover { color: var(--primary); background: var(--primary-15); }
.fb-chain-item .fb-handle:active { cursor: grabbing; color: var(--primary); }
.fb-drag-clone {
position: fixed; z-index: var(--z-drag); pointer-events: none;
opacity: 0.88; box-shadow: 0 6px 20px rgba(0,0,0,0.25);
border: 1.5px solid var(--primary) !important;
background: var(--surface) !important;
}
.fb-chain-item .fb-badge {
display: inline-flex; align-items: center; justify-content: center;
width: 1.3rem; height: 1.3rem; border-radius: 50%; flex-shrink: 0;
font-size: 0.7rem; font-weight: 600;
background: var(--fallback-bg); color: var(--fallback-text); border: 1px solid var(--fallback-border);
}
.fb-chain-item select.input-field { padding: 0.3rem 0.5rem; font-size: 0.82rem; }
.fb-chain-item .fb-provider { width: 150px; flex-shrink: 0; }
.fb-chain-item .fb-model { flex: 1; min-width: 0; }
.fb-chain-item .fb-del {
padding: 0.2rem 0.45rem; color: var(--danger); background: none; border: none;
cursor: pointer; font-size: 0.9rem; flex-shrink: 0; border-radius: 4px;
transition: background 0.15s;
}
.fb-chain-item .fb-del:hover { background: rgba(255, 116, 116, 0.12); }
.fb-chain-empty {
font-size: 0.78rem; color: var(--text-dim); margin: 0;
padding: 0.8rem; text-align: center; border: 1px dashed var(--border-soft); border-radius: 6px;
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) body {
background:
radial-gradient(circle at 8% -4%, rgba(37, 99, 235, 0.11), transparent 34%),
radial-gradient(circle at 92% 10%, rgba(6, 182, 212, 0.08), transparent 36%),
linear-gradient(170deg, #fbfdff 0%, #eff4fb 52%, #f7faff 100%);
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) body::before {
opacity: 0.11;
background-image:
linear-gradient(rgba(30, 64, 175, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(30, 64, 175, 0.04) 1px, transparent 1px);
mask-image: none;
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .sidebar {
background:
radial-gradient(circle at 12% 0%, rgba(125, 211, 252, 0.14), transparent 46%),
linear-gradient(185deg, #233a5f 0%, #1b2d49 48%, #172640 100%);
border-right-color: rgba(148, 163, 184, 0.32);
box-shadow: 12px 0 32px rgba(15, 23, 42, 0.14);
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .sidebar-brand small,
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .nav-group-title {
color: rgba(224, 234, 248, 0.8);
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .sidebar-console-input {
background: rgba(248, 251, 255, 0.15);
border-color: rgba(191, 219, 254, 0.4);
color: #f8fbff;
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .sidebar-console-input::placeholder {
color: rgba(221, 231, 246, 0.74);
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .sidebar-collapse-btn,
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .sidebar-console-send {
background: rgba(248, 251, 255, 0.16);
border-color: rgba(191, 219, 254, 0.45);
color: #dbeafe;
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .sidebar-feedback-btn,
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .lang-toggle-btn,
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .density-toggle-btn,
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .theme-toggle-btn,
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .sidebar-restart-btn,
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .sidebar-logout-btn {
background: rgba(248, 251, 255, 0.16);
border-color: rgba(191, 219, 254, 0.36);
color: #dbeafe;
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .sidebar-console-send:hover,
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .sidebar-collapse-btn:hover {
background: rgba(248, 251, 255, 0.28);
color: #fff;
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .sidebar-feedback-btn:hover,
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .lang-toggle-btn:hover,
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .density-toggle-btn:hover,
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .theme-toggle-btn:hover {
background: rgba(248, 251, 255, 0.28);
color: #fff;
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .sidebar-restart-btn:hover {
background: rgba(245, 185, 65, 0.16);
border-color: rgba(245, 185, 65, 0.42);
color: #facc15;
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .sidebar-logout-btn:hover {
background: rgba(248, 113, 113, 0.15);
border-color: rgba(248, 113, 113, 0.42);
color: #fca5a5;
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .sidebar-console-output {
background: rgba(10, 15, 25, 0.55);
border-color: rgba(191, 219, 254, 0.3);
color: #d9e4f5;
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .nav-item {
color: #d9e4f5;
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .nav-item:hover {
background: rgba(248, 251, 255, 0.15);
border-color: rgba(191, 219, 254, 0.38);
color: #f8fbff;
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .nav-item.active {
background: linear-gradient(135deg, rgba(96, 165, 250, 0.44), rgba(37, 99, 235, 0.48));
border-color: rgba(191, 219, 254, 0.76);
box-shadow: inset 0 0 0 1px rgba(224, 242, 254, 0.24);
color: #fff;
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .focus-card,
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .stat-card,
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .card,
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .form-section,
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .job-card,
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .console-toolbar-card {
background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
border-color: #d5e0ef;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07);
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .table-wrap {
background: #fff;
border-color: #d5e0ef;
box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .table-wrap::after {
background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.96));
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .data-table {
background: transparent;
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .data-table th {
background: linear-gradient(180deg, #f4f8ff, #edf3fc);
color: #475569;
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .data-table td {
border-bottom-color: rgba(148, 163, 184, 0.24);
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .data-table tr:hover td {
background: rgba(37, 99, 235, 0.07);
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .btn {
background: linear-gradient(180deg, #ffffff, #f2f7ff);
border-color: #c8d6ea;
color: #1d2b3f;
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.05);
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .btn:hover {
background: linear-gradient(180deg, #fcfeff, #e8f2ff);
border-color: #86aee9;
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) a.list-item:hover {
background: rgba(37, 99, 235, 0.06);
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .input-field {
background: linear-gradient(180deg, #ffffff, #fbfdff);
border-color: #c6d1e0;
color: #0f172a;
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .input-field::placeholder {
color: #94a3b8;
}
.confirm-overlay {
position: fixed; inset: 0;
background: var(--overlay-dark);
backdrop-filter: blur(var(--glass-blur-sm));
z-index: var(--z-modal);
display: flex; align-items: center; justify-content: center;
opacity: 0; visibility: hidden;
transition: opacity var(--duration-normal) var(--ease-default), visibility var(--duration-normal);
}
.confirm-overlay.open { opacity: 1; visibility: visible; }
.confirm-dialog {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-8);
max-width: 420px; width: 90vw;
box-shadow: var(--shadow-soft);
transform: scale(0.95) translateY(8px);
transition: transform var(--duration-normal) var(--ease-spring);
text-align: center;
}
.confirm-overlay.open .confirm-dialog {
transform: scale(1) translateY(0);
}
.confirm-icon { font-size: 2.2rem; margin-bottom: var(--space-4); }
.confirm-title {
font-size: var(--text-xl); font-weight: 700;
color: var(--text-heading); margin-bottom: var(--space-2);
}
.confirm-message {
font-size: var(--text-base); color: var(--text-dim);
margin-bottom: var(--space-6); line-height: 1.6;
}
.confirm-actions { display: flex; gap: var(--space-3); justify-content: center; }
.confirm-actions .btn { min-width: 100px; }
.empty-state {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: var(--space-12) var(--space-6);
text-align: center; color: var(--text-dim);
}
.empty-state-icon { font-size: 2.5rem; opacity: 0.3; margin-bottom: var(--space-4); }
.empty-state-title {
font-size: var(--text-lg); font-weight: 600;
margin-bottom: var(--space-2); color: var(--text);
}
.empty-state-desc { font-size: var(--text-sm); max-width: 320px; line-height: 1.5; }
.empty-state-action { margin-top: var(--space-6); }
.skeleton {
background: linear-gradient(90deg,
var(--surface-elev) 25%,
color-mix(in srgb, var(--surface-elev) 80%, var(--primary) 20%) 50%,
var(--surface-elev) 75%);
background-size: 200% 100%;
border-radius: var(--radius-xs);
animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.skeleton-line { height: 1rem; width: 100%; margin-bottom: var(--space-2); }
.skeleton-circle { width: 80px; height: 80px; border-radius: 50%; }
.skeleton-block { height: 120px; width: 100%; }
.skeleton-sm { height: 0.75rem; }
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.btn-ghost {
background: transparent; border-color: transparent;
color: var(--text-dim);
}
.btn-ghost:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-soft); }
.btn-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 2.2rem; height: 2.2rem; padding: 0;
border-radius: var(--radius-sm);
}
.btn-xs { padding: 0.2rem 0.5rem; font-size: var(--text-xs); }
.card-flush { padding: 0; }
.card-flush .card-header { padding: var(--space-4) var(--space-5); }
.card-interactive { cursor: pointer; }
.card-interactive:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-soft);
border-color: var(--primary-border-strong);
}
.table-striped tbody tr:nth-child(even) td { background: rgba(23, 38, 67, 0.25); }
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .table-striped tbody tr:nth-child(even) td { background: rgba(0, 0, 0, 0.02); }
.input-field.is-invalid { border-color: var(--danger) !important; }
.input-field.is-valid { border-color: var(--success) !important; }
.field-error {
display: block; color: var(--danger);
font-size: var(--text-xs); margin-top: var(--space-1);
}
.text-muted { color: var(--text-muted); }
.text-dim   { color: var(--text-dim); }
.text-gradient-primary {
background: linear-gradient(135deg, var(--primary), var(--success));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.text-xs { font-size: 0.72rem; }
.text-sm { font-size: 0.82rem; }
.flex         { display: flex; }
.flex-wrap    { flex-wrap: wrap; }
.flex-1       { flex: 1; }
.flex-shrink-0{ flex-shrink: 0; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-end  { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.flex-center  { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.m-0  { margin: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.ml-auto { margin-left: auto; }
.p-0 { padding: 0; }
html { scroll-behavior: smooth; }
.sidebar { overscroll-behavior: contain; }
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .confirm-dialog {
background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
border-color: #d5e0ef;
box-shadow: 0 20px 60px rgba(15, 23, 42, 0.15);
}
.nav-badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
background: var(--danger); color: var(--text-on-strong);
font-size: 0.65rem; font-weight: 700; margin-left: auto;
}
.provider-hint {
display: flex; gap: 0.75rem; padding: 0.75rem 1rem;
background: var(--primary-dim); border: 1px solid var(--primary-border-strong);
border-radius: 6px; margin-bottom: 1rem; font-size: 0.82rem; line-height: 1.5;
}
.provider-hint-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.provider-hint-text strong { color: var(--primary); }
.provider-hint-text .hint-tags { margin-top: 0.35rem; display: flex; gap: 0.35rem; flex-wrap: wrap; }
.provider-hint-text .hint-tag {
display: inline-block; padding: 1px 6px;
background: var(--primary-dim); border-radius: 3px;
font-size: 0.72rem; color: var(--text-dim);
}
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
}
.u-hidden          { display: none !important; }
.u-flex             { display: flex; }
.u-resize-v         { resize: vertical; }
.u-text-right       { text-align: right; }
.u-text-sm          { font-size: 0.7rem; }
.u-lh-relaxed       { line-height: 1.5; }
.u-scrollbar-hidden { scrollbar-width: none; -ms-overflow-style: none; }
.u-scrollbar-hidden::-webkit-scrollbar { display: none; }
.u-scrollable       { overflow-y: auto; }
.u-scrollable-sm    { max-height: 220px; overflow-y: auto; }
.u-scrollable-md    { max-height: 280px; overflow-y: auto; }
.u-scrollable-lg    { max-height: 300px; overflow-y: auto; }
.u-code-preview {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.75rem;
white-space: pre-wrap;
color: var(--text);
max-height: 300px;
overflow-y: auto;
font-family: 'SF Mono', Menlo, monospace;
line-height: 1.5;
}
.chart-h-sm { height: 180px; }
.chart-h-md { height: 240px; }
.chart-h-lg { height: 320px; }
.text-gradient {
background: var(--text-gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.text-gradient-hero {
background: var(--text-gradient-hero);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.border-gradient {
border: 1px solid transparent;
background-origin: border-box;
background-clip: padding-box, border-box;
}
:focus-visible {
outline: none;
box-shadow: var(--focus-ring, 0 0 0 2px var(--bg), 0 0 0 4px var(--primary-50));
}
.input-field:focus-visible,
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible,
.btn:focus-visible,
.tab-btn:focus-visible,
.nav-item:focus-visible {
box-shadow: revert;
}
.bg-mesh::before {
content: '';
position: absolute;
inset: 0;
background: var(--mesh-gradient);
pointer-events: none;
z-index: -1;
border-radius: inherit;
}
.reveal-on-scroll {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo);
}
.reveal-on-scroll.revealed {
opacity: 1;
transform: translateY(0);
}
.u-mb-0        { margin-bottom: 0 !important; }
.u-gap-1       { gap: var(--space-1) !important; }
.u-inline-flex { display: inline-flex; align-items: center; }
.u-col-full    { grid-column: 1 / -1; }
.u-max-w-sm    { max-width: 24rem; }
.u-max-w-md    { max-width: 32rem; }
.u-ml-1        { margin-left: var(--space-1); }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
:root {
--content-max-width: 1720px;
--reading-max-width: 76ch;
--reading-line-height: 1.68;
--touch-target-min: 40px;
--ux-ring: 0 0 0 3px var(--primary-15);
--ux-soft-ring: 0 0 0 2px color-mix(in srgb, var(--primary) 28%, transparent);
--content-ambient: radial-gradient(circle at 90% -10%, color-mix(in srgb, var(--primary) 14%, transparent) 0%, transparent 46%);
}
.main-content,
.sidebar {
scrollbar-gutter: stable;
}
.main-content {
max-width: min(var(--content-max-width), 100%);
padding: clamp(1rem, 0.7rem + 0.9vw, 1.75rem) clamp(0.95rem, 0.4rem + 1.5vw, 2.2rem) 2rem;
position: relative;
isolation: isolate;
}
.main-content::before {
content: "";
position: absolute;
inset: 0;
background: var(--content-ambient);
pointer-events: none;
z-index: -1;
}
:is(.main-content, [data-modal-portaled]) :where(p, li, dd) {
line-height: var(--reading-line-height);
}
.page-header h1,
.hero-summary,
.page-subtitle {
text-wrap: balance;
}
.page-subtitle,
.hero-summary {
max-width: var(--reading-max-width);
}
.sidebar {
box-shadow: 10px 0 34px rgba(1, 7, 16, 0.34);
}
.nav-item {
min-height: var(--touch-target-min);
}
.btn,
.quick-nav-pill,
.tab-btn,
.view-btn,
.seg-btn,
.mobile-bottom-item {
min-height: var(--touch-target-min);
}
.btn {
letter-spacing: 0.01em;
transition: transform var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
}
.btn:active {
transform: translateY(1px);
}
.btn:disabled,
.btn[aria-disabled="true"] {
cursor: not-allowed;
filter: saturate(0.74);
opacity: 0.58;
}
.card,
.focus-card,
.stat-card,
.table-wrap,
.toolbar,
.form-section {
border-color: color-mix(in srgb, var(--glass-border) 84%, var(--primary) 16%);
}
.card:hover,
.focus-card:hover,
.form-section:focus-within {
box-shadow: var(--shadow-card-hover), 0 0 0 1px var(--primary-8);
}
.nav-item:focus-visible,
.mobile-bottom-item:focus-visible {
box-shadow: var(--ux-ring);
}
.sidebar-collapse-btn:focus-visible,
.theme-toggle-btn:focus-visible,
.density-toggle-btn:focus-visible,
.sidebar-console-send:focus-visible,
.sidebar-chat-toggle:focus-visible,
.btn:focus-visible,
.quick-nav-pill:focus-visible,
.tab-btn:focus-visible,
.seg-btn:focus-visible,
.view-btn:focus-visible {
box-shadow: var(--ux-ring);
}
.table-wrap :where(input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="password"], input[type="url"], input[type="date"], input[type="time"], textarea, select),
.card :where(input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="password"], input[type="url"], input[type="date"], input[type="time"], textarea, select),
.form-section :where(input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="password"], input[type="url"], input[type="date"], input[type="time"], textarea, select) {
min-height: var(--touch-target-min);
line-height: 1.4;
transition: border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default);
}
.table-wrap :where(input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="password"], input[type="url"], input[type="date"], input[type="time"], textarea, select):focus-visible,
.card :where(input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="password"], input[type="url"], input[type="date"], input[type="time"], textarea, select):focus-visible,
.form-section :where(input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="password"], input[type="url"], input[type="date"], input[type="time"], textarea, select):focus-visible {
border-color: color-mix(in srgb, var(--border) 42%, var(--primary) 58%);
box-shadow: var(--ux-soft-ring);
}
.table-wrap :where(input, textarea)::placeholder,
.card :where(input, textarea)::placeholder,
.form-section :where(input, textarea)::placeholder {
color: color-mix(in srgb, var(--text-muted) 82%, var(--text) 18%);
}
.card-header h3,
.form-section-title,
.stat-label {
letter-spacing: 0.01em;
}
.data-table th {
backdrop-filter: blur(var(--glass-blur-sm));
}
.data-table tr {
transition: background var(--duration-fast) var(--ease-default);
}
.data-table tr:hover td {
background: color-mix(in srgb, var(--table-row-hover) 88%, var(--primary-8) 12%);
}
.status-pill,
.badge {
font-weight: 650;
letter-spacing: 0.01em;
}
.empty-state-enhanced {
border: 1px dashed var(--border-soft);
border-radius: var(--radius-sm);
background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface-elev) 88%, transparent));
}
.section-divider {
border-color: color-mix(in srgb, var(--border-soft) 70%, var(--primary) 30%);
}
#toast-container .toast {
backdrop-filter: blur(var(--glass-blur));
}
kbd {
font-family: var(--font-mono);
font-size: 0.78em;
font-weight: 650;
letter-spacing: 0.02em;
}
.command-palette-overlay {
backdrop-filter: blur(2px);
}
.command-palette {
border-color: color-mix(in srgb, var(--border) 72%, var(--primary) 28%);
box-shadow: 0 28px 70px rgba(4, 10, 22, 0.55);
display: grid;
grid-template-rows: auto auto auto minmax(0, 1fr);
max-height: calc(100dvh - 2rem);
}
.command-list .command-item {
min-height: var(--touch-target-min);
scroll-margin-block: 0.45rem;
}
.command-list {
overscroll-behavior: contain;
}
.command-item[aria-selected="true"] {
box-shadow: inset 3px 0 0 var(--primary), 0 0 0 1px var(--primary-8);
}
.command-item[aria-selected="true"] .command-item-subtitle {
color: color-mix(in srgb, var(--text-dim) 76%, var(--text) 24%);
}
.mobile-bottom-bar {
backdrop-filter: blur(var(--glass-blur));
border-top: 1px solid color-mix(in srgb, var(--border) 70%, var(--primary) 30%);
}
@media (min-width: 769px) {
.sidebar,
.main-content,
.table-wrap {
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--primary) 36%, transparent) color-mix(in srgb, var(--bg-soft) 72%, transparent);
}
.sidebar::-webkit-scrollbar,
.main-content::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar {
width: 9px;
height: 9px;
}
.sidebar::-webkit-scrollbar-track,
.main-content::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track {
background: color-mix(in srgb, var(--bg-soft) 78%, transparent);
}
.sidebar::-webkit-scrollbar-thumb,
.main-content::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--primary) 36%, transparent);
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
}
}
@media (max-width: 1100px) {
.main-content {
padding-inline: clamp(0.78rem, 0.35rem + 1.4vw, 1.35rem);
}
.stats-grid,
.focus-grid {
gap: 0.65rem;
}
}
@media (max-width: 768px) {
:root {
--touch-target-min: 42px;
--mobile-nav-clearance: calc(3.7rem + env(safe-area-inset-top, 0px));
}
.main-content {
padding: var(--mobile-nav-clearance) 0.72rem calc(88px + env(safe-area-inset-bottom, 0px));
}
.main-content::before {
background:
radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--primary) 12%, transparent) 0%, transparent 46%),
radial-gradient(circle at 0% 14%, color-mix(in srgb, var(--success) 10%, transparent) 0%, transparent 40%);
}
.card-header,
.card-body,
.form-section {
padding-inline: 0.82rem;
}
.dashboard-grid,
.settings-grid,
.focus-grid {
grid-template-columns: 1fr;
}
.toolbar {
gap: 0.52rem;
padding: 0.62rem;
}
.card,
.focus-card,
.table-wrap {
border-radius: clamp(10px, 3.8vw, 14px);
}
.command-palette-overlay {
align-items: flex-end;
padding: 0 0 max(0.75rem, env(safe-area-inset-bottom, 0px));
}
.command-palette {
width: 100%;
max-height: min(78dvh, 640px);
border-radius: 18px 18px 0 0;
}
#command-search {
font-size: 16px;
}
.command-list {
max-height: calc(78dvh - 8.8rem);
padding-bottom: max(0.8rem, env(safe-area-inset-bottom, 0px));
}
}
@media (hover: none) {
.card:hover,
.focus-card:hover,
.stat-card:hover {
transform: none;
box-shadow: var(--shadow-soft);
}
}
@media (prefers-contrast: more) {
.card,
.focus-card,
.table-wrap,
.toolbar,
.form-section,
.nav-item,
.btn {
border-color: color-mix(in srgb, var(--border) 34%, white 66%);
}
.text-muted,
.stat-label,
.page-subtitle {
color: color-mix(in srgb, var(--text-dim) 72%, var(--text) 28%);
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.stagger-enter > * {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .sidebar {
box-shadow: 8px 0 22px rgba(27, 40, 63, 0.08);
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .card,
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .focus-card,
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .table-wrap {
box-shadow: 0 8px 18px rgba(21, 33, 54, 0.06);
}
.bottom-panel {
background: var(--gradient-card, linear-gradient(135deg, var(--surface), var(--surface-elev)));
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--space-4);
box-shadow: var(--shadow-sm);
transition: border-color var(--duration-fast) var(--ease-default),
box-shadow var(--duration-fast) var(--ease-default);
}
.bottom-panel:hover {
border-color: var(--primary-25, color-mix(in srgb, var(--primary) 25%, transparent));
box-shadow: var(--shadow-soft);
}
.bottom-panel .bottom-title {
margin: 0 0 var(--space-3);
font-size: 0.88rem;
font-weight: 650;
color: var(--text-heading);
letter-spacing: 0.01em;
}
.output-header .btn-console-stop {
padding: 0.2rem 0.6rem;
font-size: 0.75rem;
background: var(--danger);
border: 1px solid var(--danger);
border-radius: var(--radius-xs);
color: #fff;
cursor: pointer;
margin-left: auto;
transition: all var(--duration-fast) var(--ease-default);
}
.output-header .btn-console-stop:hover {
filter: brightness(1.1);
}
.output-header .btn-console-clear {
padding: 0.2rem 0.6rem;
font-size: 0.75rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xs);
color: var(--text-dim);
cursor: pointer;
margin-left: 0.35rem;
transition: all var(--duration-fast) var(--ease-default);
}
.output-header .btn-console-clear:hover {
border-color: var(--primary-35, color-mix(in srgb, var(--primary) 35%, transparent));
color: var(--text);
}
.output-header .exec-duration {
font-size: 0.8rem;
color: var(--text-dim);
}
.u-mt-3 { margin-top: var(--space-3) !important; }
.u-mt-4 { margin-top: var(--space-4) !important; }
.u-mt-5 { margin-top: var(--space-5) !important; }
.u-mb-3 { margin-bottom: var(--space-3) !important; }
.u-mb-4 { margin-bottom: var(--space-4) !important; }
.u-gap-2 { gap: var(--space-2) !important; }
.sim-input-row {
display: flex;
gap: var(--space-2);
}
.sim-input-row .input-field {
flex: 1;
}
.sim-desc {
color: var(--text-dim);
font-size: 0.88rem;
margin-bottom: var(--space-3);
}
.u-section-divider {
border: none;
border-top: 1px solid var(--border-soft);
margin: var(--space-4) 0;
}
.conflict-banner {
margin-top: 0.75rem;
padding: 0.75rem 1rem;
background: var(--warning-soft-bg);
border: 1px solid var(--warning-soft-border);
border-radius: var(--radius);
font-size: 0.85rem;
color: var(--warning-strong);
}
.setting-sub-title {
margin: 0 0 0.6rem;
color: var(--text-dim);
font-size: 0.92rem;
}
.card-footer-actions {
margin-top: 0.6rem;
}
.u-char-counter {
text-align: right;
font-size: 0.78rem;
color: var(--text-dim);
}
.detail-extra-panels {
margin-top: var(--space-4);
}
.sandbox-loading {
font-size: 0.85rem;
color: var(--text-dim);
}
.info-box {
font-size: 0.88rem;
border-radius: 6px;
padding: 0.75rem 1rem;
line-height: 1.5;
margin-bottom: var(--space-4);
}
.info-box strong { display: block; margin-bottom: 0.25rem; }
.info-box-primary {
background: var(--primary-8);
border: 1px solid var(--primary-25);
}
.info-box-primary strong { color: var(--primary); }
.info-box-indigo {
background: var(--indigo-soft-bg);
border: 1px solid var(--indigo-soft-border);
}
.info-box-indigo strong { color: var(--fallback-text); }
.info-box-orange {
background: var(--orange-soft-bg);
border: 1px solid var(--orange-soft-border);
}
.info-box-orange strong { color: var(--autofix-text); }
.info-box-warning {
background: var(--warning-soft-bg);
border: 1px solid var(--warning-soft-border);
}
.info-box-warning strong { color: var(--warning); }
.info-box-danger {
background: var(--danger-soft-bg, color-mix(in srgb, var(--danger) 8%, transparent));
border: 1px solid var(--danger-soft-border, color-mix(in srgb, var(--danger) 20%, transparent));
}
.info-box-danger strong { color: var(--danger); }
.btn-toggle-key {
width: 36px;
flex-shrink: 0;
padding: 0;
}
.status-bar {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.5rem 0.8rem;
border-radius: 8px;
background: var(--surface);
border: 1px solid var(--border);
margin-bottom: var(--space-4);
font-size: 0.85rem;
}
.status-bar .status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--text-dim);
flex-shrink: 0;
}
.status-bar .status-label {
color: var(--text-dim);
}
.status-bar .status-count {
margin-left: auto;
color: var(--text-dim);
}
.input-compact-sm {
width: 100px;
}
.input-compact-md {
width: 120px;
}
.quota-exhausted-banner strong {
color: var(--danger);
}
.about-hero {
text-align: center;
padding: var(--space-6) 0 var(--space-4);
}
.about-hero h2 {
margin-top: var(--space-3);
}
.about-hero p {
color: var(--text-dim);
}
.about-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--space-4);
}
.about-features .card h4 {
margin-bottom: var(--space-2);
}
.about-features .card p {
font-size: 0.88rem;
color: var(--text-dim);
}
.about-footer {
text-align: center;
padding: var(--space-6) 0 var(--space-4);
color: var(--text-dim);
font-size: 0.85rem;
}
.about-footer img {
margin-bottom: 0.5rem;
opacity: 0.6;
}
.about-footer .company-name {
font-weight: 600;
}
.notification-log-wrap {
margin-top: var(--space-5);
}
.notification-log-wrap h4 {
font-size: 0.88rem;
color: var(--text-dim);
margin-bottom: var(--space-2);
}
.notification-log-list {
max-height: 250px;
overflow-y: auto;
}
.inline-create-form {
margin-bottom: var(--space-4);
padding: var(--space-4);
background: var(--bg);
border: 1px solid var(--border);
border-radius: 6px;
}
.settings-section-title {
margin: 0 0 0.6rem;
color: var(--text-dim);
font-size: 0.9rem;
}
.ap-status-bar {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.5rem 0.8rem;
border-radius: 8px;
background: var(--surface);
border: 1px solid var(--border);
margin-bottom: 1rem;
font-size: 0.85rem;
}
.ap-status-bar .status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--text-dim);
flex-shrink: 0;
}
.ap-status-bar .status-label {
color: var(--text-dim);
}
.ap-status-bar .status-count {
margin-left: auto;
color: var(--text-dim);
}
.form-row-gap { display: flex; align-items: center; gap: 0.8rem; }
.form-row-gap .inline-check {
display: flex; align-items: center;
gap: 0.4rem; cursor: pointer;
font-size: 0.85rem; color: var(--text-dim);
}
.toggle-row-spaced { margin: 1rem 0; }
.tc-summary {
display: flex;
gap: var(--space-4);
flex-wrap: wrap;
margin-bottom: var(--space-3);
}
.tc-insight {
font-size: 0.85rem;
margin-top: var(--space-2);
}
.tc-desc {
font-size: 0.85rem;
margin-bottom: var(--space-3);
}
.u-font-mono {
font-family: 'SF Mono', Menlo, monospace;
}
.u-hint-sm { font-size: 0.85rem; color: var(--text-dim); }
.u-text-center { text-align: center !important; }
.u-ml-auto { margin-left: auto !important; }
.u-empty-state { padding: 1.5rem; }
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 24px; height: 24px; }
.inline-flex { display: inline-flex !important; }
.mr-2 { margin-right: 0.5rem !important; }
.infra-sub-title {
font-size: 0.85rem;
margin: var(--space-3) 0 var(--space-2);
}
.infra-sub-title-lg {
font-size: 0.85rem;
margin: var(--space-4) 0 var(--space-2);
}
.u-toolbar { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.u-toolbar-sm { display: flex; gap: var(--space-2); }
.u-toolbar-sm.u-mt-3 { margin-top: var(--space-3); }
.u-toolbar-sm.u-mt-2 { margin-top: var(--space-2); }
.u-toolbar-sm.u-mb-2 { margin-bottom: var(--space-2); }
.quota-text-danger { color: var(--danger, #ef4444); }
.quota-text-bold { font-weight: 600; color: var(--text); }
.card::after,
.focus-card::after,
.stat-card::after {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
background: linear-gradient(135deg, var(--primary-15), transparent 50%);
opacity: 0;
transition: opacity var(--duration-normal) var(--ease-default);
pointer-events: none;
z-index: 0;
}
.card:hover::after,
.focus-card:hover::after,
.stat-card:hover::after {
opacity: 1;
}
.page-header {
margin-bottom: 1.8rem;
padding-bottom: 0.8rem;
border-bottom: 1px solid var(--line-weak);
}
.page-header h1 {
font-size: var(--text-3xl);
font-weight: 800;
letter-spacing: 0;
}
.data-table td {
transition: background var(--duration-fast) var(--ease-default);
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .card,
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .focus-card,
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .stat-card,
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .table-wrap {
box-shadow: var(--shadow-card);
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .card:hover,
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .focus-card:hover,
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .stat-card:hover {
box-shadow: var(--shadow-card-hover);
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) .sidebar {
box-shadow: 4px 0 20px rgba(27, 40, 63, 0.06);
}
@media (max-width: 1024px) {
.kpi-grid,
.stats-grid,
.stats-row {
grid-template-columns: repeat(2, 1fr);
}
.obj-grid,
.about-features {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.wiki-layout {
flex-direction: column;
}
.wiki-sidebar {
width: 100%;
max-height: 180px;
overflow-y: auto;
border-right: none;
border-bottom: 1px solid var(--border);
}
.wiki-nav-section {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}
}
@media (max-width: 640px) {
.kpi-grid,
.stats-grid,
.stats-row {
grid-template-columns: 1fr;
}
.tab-header {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
white-space: nowrap;
flex-wrap: nowrap;
gap: 0;
padding-bottom: 2px;
}
.tab-header::-webkit-scrollbar {
display: none;
}
.tab-btn {
flex-shrink: 0;
font-size: 0.8rem;
padding-inline: 0.65rem;
}
.page-header {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.page-actions {
width: 100%;
flex-wrap: wrap;
}
.table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.data-table {
min-width: 600px;
}
.form-group,
.form-row,
.form-row-gap {
flex-direction: column;
align-items: stretch;
}
.sim-input-row {
flex-direction: column;
}
.modal-box,
.trend-box {
width: 95vw;
max-height: 90vh;
}
.obj-grid {
grid-template-columns: 1fr;
}
.score-ring {
width: 120px;
height: 120px;
}
.score-ring svg {
width: 120px;
height: 120px;
}
.about-features {
grid-template-columns: 1fr;
}
.tc-summary {
flex-direction: column;
}
.u-toolbar {
flex-wrap: wrap;
}
}
.confirm-dialog {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur-lg));
-webkit-backdrop-filter: blur(var(--glass-blur-lg));
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-elevated), 0 0 0 1px var(--primary-8);
}
.confirm-actions .btn {
min-width: 110px;
font-weight: 650;
}
.confirm-actions .btn:first-child {
background: var(--glass-bg-light);
border-color: var(--border);
}
.confirm-actions .btn:first-child:hover {
background: var(--surface-hover);
border-color: var(--primary-25);
}
.network-indicator.offline {
height: auto;
transform: scaleY(1);
background: linear-gradient(90deg, var(--danger), color-mix(in srgb, var(--danger) 80%, var(--warning) 20%));
animation: offlinePulse 2s ease-in-out infinite;
}
.network-indicator.offline::after {
top: 3px;
padding: 0.35rem 1rem;
border-radius: 0 0 8px 8px;
background: linear-gradient(135deg, rgba(239, 68, 68, 0.95), rgba(220, 38, 38, 0.95));
backdrop-filter: blur(var(--glass-blur-sm));
font-size: 0.76rem;
letter-spacing: 0.02em;
box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}
@keyframes offlinePulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.page-loading-bar {
height: 3px;
background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 70%, var(--success) 30%), var(--primary));
background-size: 200% 100%;
animation: loadingShimmer 1.5s ease-in-out infinite;
box-shadow: 0 0 12px var(--primary-35), 0 0 4px var(--primary-25);
}
@keyframes loadingShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.back-to-top {
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
background: var(--glass-bg);
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-card);
}
.back-to-top:hover {
background: var(--glass-bg-light);
border-color: var(--primary-35);
box-shadow: var(--shadow-card-hover), 0 0 20px var(--primary-15);
}
.toast.hide {
opacity: 0;
transform: translateX(100%) scale(0.95);
transition: all 0.3s var(--ease-default);
}
.section-title::before {
content: '';
width: 3px;
height: 1em;
background: linear-gradient(180deg, var(--primary), var(--primary-35));
border-radius: 2px;
flex-shrink: 0;
}
.nav-subgroup-toggle {
min-height: var(--touch-target-min);
}
.card-interactive:active,
.stat-card:active,
.focus-card:active {
transform: scale(0.99);
transition-duration: 0.08s;
}
.form-group:has(input:focus) label,
.form-group:has(textarea:focus) label,
.form-group:has(select:focus) label {
color: var(--primary);
transition: color var(--duration-fast) var(--ease-default);
}
::selection {
background: color-mix(in srgb, var(--primary) 30%, transparent);
}
.empty-state-icon {
animation: emptyBounce 3s ease-in-out infinite;
}
@keyframes emptyBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.shortcuts-modal {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur-lg));
-webkit-backdrop-filter: blur(var(--glass-blur-lg));
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-elevated);
}
.shortcut-row {
transition: background var(--duration-fast) var(--ease-default);
padding: 0.5rem 0.3rem;
border-radius: var(--radius-xs);
margin: 0 -0.3rem;
}
.shortcut-row:hover {
background: var(--primary-5);
}
.command-palette-overlay.open .command-palette {
animation: paletteEnter var(--duration-enter) var(--ease-out-expo);
}
@keyframes paletteEnter {
from {
opacity: 0;
transform: scale(0.95) translateY(-10px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.nav-item::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(90deg, var(--primary-8), transparent 60%);
opacity: 0;
transition: opacity var(--duration-fast) var(--ease-default);
pointer-events: none;
z-index: -1;
}
.nav-item:hover::after {
opacity: 1;
}
.nav-item.active::after {
opacity: 1;
background: linear-gradient(90deg, var(--primary-15), transparent 60%);
}
@media (max-width: 768px) {
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
overflow-x: hidden;
}
body {
overscroll-behavior-y: contain;
-webkit-overflow-scrolling: touch;
}
.full-height {
height: 100dvh;
min-height: -webkit-fill-available;
}
}
.pull-refresh-indicator {
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%) translateY(-100%);
z-index: var(--z-toast, 9000);
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--glass-bg, rgba(17, 30, 52, 0.88));
backdrop-filter: blur(var(--glass-blur, 12px));
-webkit-backdrop-filter: blur(var(--glass-blur, 12px));
border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
box-shadow: var(--shadow-elevated, 0 8px 32px rgba(0,0,0,0.3));
transition: transform var(--duration-sheet, 0.4s) var(--ease-snappy, ease);
pointer-events: none;
}
.pull-refresh-indicator.pulling {
transform: translateX(-50%) translateY(1rem);
}
.pull-refresh-indicator.refreshing {
transform: translateX(-50%) translateY(1rem);
}
.pull-refresh-indicator .spinner {
width: 20px;
height: 20px;
border: 2px solid var(--border, rgba(255,255,255,0.1));
border-top-color: var(--primary, #3fb2ff);
border-radius: 50%;
}
.pull-refresh-indicator.refreshing .spinner {
animation: pullSpin 0.8s linear infinite;
}
@keyframes pullSpin {
to { transform: rotate(360deg); }
}
.fab {
position: fixed;
right: 1rem;
bottom: calc(var(--bottom-bar-h, 64px) + var(--safe-bottom, 0px) + 1rem);
z-index: var(--z-fab, 800);
width: 56px;
height: 56px;
border-radius: 16px;
border: none;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary, #3fb2ff), var(--primary-strong, #2196f3));
color: var(--text-on-accent, #fff);
box-shadow:
0 6px 20px rgba(63, 178, 255, 0.35),
0 2px 8px rgba(0, 0, 0, 0.2);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
transition:
transform var(--duration-normal, 0.2s) var(--ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1)),
box-shadow var(--duration-normal, 0.2s) var(--ease-default, ease);
}
.fab:active {
transform: scale(0.9);
box-shadow:
0 2px 8px rgba(63, 178, 255, 0.25),
var(--glow-press, 0 0 0 4px rgba(63, 178, 255, 0.15));
}
.fab i[data-lucide] {
width: 24px;
height: 24px;
}
@media (max-width: 768px) {
.skeleton-loader {
padding: var(--fluid-pad, 0.75rem);
gap: var(--fluid-gap-sm, 0.5rem);
}
.skeleton-line {
height: 0.75rem;
border-radius: var(--radius-xs, 4px);
}
.skeleton-line--card {
height: 4rem;
}
}
.swipe-card {
position: relative;
overflow: hidden;
touch-action: pan-y;
}
.swipe-card-content {
transition: transform var(--duration-normal, 0.2s) var(--ease-snappy, ease);
will-change: transform;
}
.swipe-card-actions {
position: absolute;
top: 0;
right: 0;
bottom: 0;
display: flex;
align-items: stretch;
transform: translateX(100%);
}
.swipe-card-actions .swipe-action {
display: flex;
align-items: center;
justify-content: center;
padding: 0 1.25rem;
font-size: var(--text-xs, 0.75rem);
font-weight: 600;
color: #fff;
white-space: nowrap;
}
.swipe-action-danger {
background: var(--danger, #ff7474);
}
.swipe-action-primary {
background: var(--primary, #3fb2ff);
}
@media (max-width: 768px) {
.page-enter {
animation: pageSlideUp var(--duration-page, 0.5s) var(--ease-snappy, ease) both;
}
@keyframes pageSlideUp {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.stagger-enter > *:nth-child(1) { animation-delay: 0ms; }
.stagger-enter > *:nth-child(2) { animation-delay: 40ms; }
.stagger-enter > *:nth-child(3) { animation-delay: 80ms; }
.stagger-enter > *:nth-child(4) { animation-delay: 120ms; }
.stagger-enter > *:nth-child(5) { animation-delay: 160ms; }
.stagger-enter > *:nth-child(6) { animation-delay: 200ms; }
.stagger-enter > *:nth-child(n+7) { animation-delay: 240ms; }
.stagger-enter > * {
animation: staggerFadeUp var(--duration-normal, 0.2s) var(--ease-snappy, ease) both;
}
@keyframes staggerFadeUp {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
}
.touch-ripple {
position: absolute;
border-radius: 50%;
background: var(--primary-15, rgba(63, 178, 255, 0.15));
transform: scale(0);
animation: rippleExpand 0.5s ease-out forwards;
pointer-events: none;
}
@keyframes rippleExpand {
to {
transform: scale(2.5);
opacity: 0;
}
}
.scroll-shadow-top {
position: relative;
}
.scroll-shadow-top::before {
content: '';
position: sticky;
top: 0;
display: block;
height: 0;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
z-index: 10;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s;
}
.scroll-shadow-top.scrolled::before {
opacity: 1;
}
@media (max-width: 768px) {
.back-to-top {
bottom: calc(var(--bottom-bar-h, 64px) + var(--safe-bottom, 0px) + 0.75rem);
right: 0.75rem;
width: 44px;
height: 44px;
}
.has-fab .back-to-top {
right: calc(56px + 1rem + 0.75rem);
}
}
.card-scroll-snap {
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
gap: var(--fluid-gap-sm, 0.5rem);
padding-bottom: 0.5rem;
scrollbar-width: none;
}
.card-scroll-snap::-webkit-scrollbar {
display: none;
}
.card-scroll-snap > * {
scroll-snap-align: start;
flex-shrink: 0;
width: 85%;
max-width: 320px;
}
.scroll-progress {
position: fixed;
top: 0;
left: 0;
height: 2px;
background: linear-gradient(90deg, var(--primary, #3fb2ff), var(--success, #2fd59b));
z-index: var(--z-toast, 9000);
transform-origin: left;
transform: scaleX(0);
transition: transform 0.1s linear;
}
@media (max-width: 768px) {
.search-fullscreen {
position: fixed;
inset: 0;
z-index: var(--z-modal, 1000);
background: var(--bg, #060b16);
padding: var(--safe-top, 0px) 1rem 1rem;
display: flex;
flex-direction: column;
animation: searchExpand var(--duration-normal, 0.2s) var(--ease-snappy, ease);
}
@keyframes searchExpand {
from {
opacity: 0;
transform: scale(0.98);
}
to {
opacity: 1;
transform: scale(1);
}
}
.search-fullscreen .input-field {
font-size: 18px;
min-height: 52px;
}
.search-fullscreen .search-results {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
}
@media (max-width: 768px) {
.press-feedback {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
transition: transform var(--duration-micro, 0.1s) var(--ease-snappy, ease);
}
.press-feedback:active {
transform: scale(0.97);
}
}
@media (max-width: 768px) {
.mobile-bottom-bar {
transition: transform var(--duration-sheet, 0.4s) var(--ease-snappy, ease);
will-change: transform;
}
.mobile-bottom-bar.scroll-hidden {
transform: translateY(calc(100% + var(--safe-bottom, 0px) + 8px));
}
}
.long-press-menu {
position: fixed;
z-index: var(--z-modal, 1000);
min-width: 180px;
background: var(--glass-bg, rgba(17, 30, 52, 0.95));
backdrop-filter: blur(var(--glass-blur-xl, 32px)) saturate(1.8);
-webkit-backdrop-filter: blur(var(--glass-blur-xl, 32px)) saturate(1.8);
border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
border-radius: var(--radius, 12px);
padding: 0.35rem;
box-shadow: var(--shadow-elevated, 0 8px 32px rgba(0,0,0,0.4));
animation: menuPop var(--duration-normal, 0.2s) var(--ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1));
}
@keyframes menuPop {
from {
opacity: 0;
transform: scale(0.85);
}
to {
opacity: 1;
transform: scale(1);
}
}
.long-press-menu-item {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.6rem 0.75rem;
min-height: var(--touch-comfortable, 48px);
border-radius: var(--radius-sm, 8px);
font-size: var(--fluid-sm, 0.82rem);
color: var(--text, #e2e8f0);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background var(--duration-fast, 0.15s) var(--ease-default, ease);
}
.long-press-menu-item:active {
background: var(--primary-15, rgba(63, 178, 255, 0.15));
}
.long-press-menu-divider {
height: 1px;
background: var(--border-soft, rgba(255,255,255,0.05));
margin: 0.25rem 0.5rem;
}
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.25s;
}
@media (max-width: 768px) {
.main-content {
view-transition-name: main-content;
}
::view-transition-old(main-content) {
animation: fadeSlideOut 0.2s ease both;
}
::view-transition-new(main-content) {
animation: fadeSlideIn 0.3s ease both;
}
@keyframes fadeSlideOut {
to {
opacity: 0;
transform: translateX(-5%);
}
}
@keyframes fadeSlideIn {
from {
opacity: 0;
transform: translateX(5%);
}
}
}
@media (max-width: 480px) {
.confirm-dialog {
position: fixed;
bottom: 0;
left: 0;
right: 0;
border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
padding: 1.25rem 1rem calc(1rem + var(--safe-bottom, 0px));
max-width: 100%;
animation: bottomSheetUp var(--duration-sheet, 0.4s) var(--ease-snappy, ease);
}
.confirm-dialog::before {
content: '';
display: block;
width: 36px;
height: 4px;
background: var(--border, rgba(255,255,255,0.2));
border-radius: 2px;
margin: 0 auto 1rem;
}
.confirm-actions {
flex-direction: column;
gap: 0.5rem;
}
.confirm-actions .btn {
width: 100%;
min-height: var(--touch-comfortable, 48px);
justify-content: center;
}
@keyframes bottomSheetUp {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
}
@media (max-width: 768px) and (prefers-contrast: more) {
.btn {
border-width: 2px;
}
.input-field,
.form-group input,
.form-group select,
.form-group textarea {
border-width: 2px;
}
}
.gesture-hint {
position: fixed;
bottom: calc(var(--bottom-bar-h, 64px) + var(--safe-bottom, 0px) + 4rem);
left: 50%;
transform: translateX(-50%);
z-index: var(--z-toast, 9000);
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: var(--glass-bg, rgba(17, 30, 52, 0.92));
backdrop-filter: blur(var(--glass-blur, 12px));
-webkit-backdrop-filter: blur(var(--glass-blur, 12px));
border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
border-radius: 999px;
font-size: var(--text-xs, 0.75rem);
color: var(--text-dim, #8295b5);
box-shadow: var(--shadow-card, 0 4px 16px rgba(0,0,0,0.2));
animation: hintFade 3s ease both;
pointer-events: none;
}
@keyframes hintFade {
0% { opacity: 0; transform: translateX(-50%) translateY(8px); }
15% { opacity: 1; transform: translateX(-50%) translateY(0); }
80% { opacity: 1; }
100% { opacity: 0; }
}
:root {
color-scheme: dark;
--bg: #080a0d;
--bg-soft: #0e1217;
--surface: #141922;
--surface-elev: #1b222c;
--surface-hover: #222b36;
--surface-sunken: #090d12;
--surface-panel: rgba(17, 23, 30, 0.74);
--surface-overlay: rgba(20, 25, 34, 0.94);
--border: #303a45;
--border-soft: #252e38;
--text: #f3f1ea;
--text-dim: #b6b3aa;
--text-muted: #918f88;
--text-heading: #fffaf0;
--text-soft-highlight: #e6fffb;
--text-on-accent: #031312;
--primary: #5eead4;
--primary-strong: #14b8a6;
--primary-rgb: 94, 234, 212;
--primary-5: rgba(94, 234, 212, 0.05);
--primary-8: rgba(94, 234, 212, 0.08);
--primary-10: rgba(94, 234, 212, 0.1);
--primary-15: rgba(94, 234, 212, 0.15);
--primary-25: rgba(94, 234, 212, 0.25);
--primary-35: rgba(94, 234, 212, 0.35);
--primary-50: rgba(94, 234, 212, 0.5);
--primary-65: rgba(94, 234, 212, 0.65);
--primary-glow: rgba(94, 234, 212, 0.28);
--success: #7ddc84;
--success-strong: #35c46d;
--warning: #f2b94f;
--warning-strong: #d99521;
--danger: #ff6b6b;
--danger-strong: #ef4444;
--violet: #b8a1ff;
--link-soft: #7dd3fc;
--radius: 8px;
--radius-lg: 10px;
--radius-sm: 8px;
--radius-xs: 6px;
--heading-letter-spacing: 0;
--body-letter-spacing: 0;
--touch-target-min: 42px;
--ux-control-min: 42px;
--ux-control-radius: 8px;
--ux-content-radius: 8px;
--ux-page-bg: linear-gradient(180deg, #080a0d 0%, #0c1015 48%, #080a0d 100%);
--ux-page-grid: linear-gradient(rgba(243, 241, 234, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(243, 241, 234, 0.026) 1px, transparent 1px);
--ux-content-surface: linear-gradient(180deg,
color-mix(in srgb, var(--surface) 96%, #fff 4%),
color-mix(in srgb, var(--bg-soft) 92%, var(--surface) 8%));
--ux-control-surface: linear-gradient(180deg,
color-mix(in srgb, var(--surface-elev) 78%, transparent),
color-mix(in srgb, var(--surface) 88%, transparent));
--ux-liquid-surface: linear-gradient(180deg,
color-mix(in srgb, var(--surface-elev) 62%, transparent),
color-mix(in srgb, var(--surface) 48%, transparent));
--ux-border: color-mix(in srgb, var(--border) 78%, var(--primary) 22%);
--ux-border-soft: color-mix(in srgb, var(--border-soft) 86%, var(--primary) 14%);
--ux-card-shadow: 0 1px 1px rgba(0, 0, 0, 0.18), 0 14px 34px rgba(0, 0, 0, 0.22);
--ux-card-shadow-hover: 0 1px 1px rgba(0, 0, 0, 0.2), 0 18px 44px rgba(0, 0, 0, 0.28);
--ux-ring: 0 0 0 2px var(--bg), 0 0 0 5px color-mix(in srgb, var(--primary) 58%, transparent);
--ux-soft-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent);
--content-ambient: linear-gradient(135deg, transparent 0%, color-mix(in srgb, var(--primary) 5%, transparent) 48%, transparent 100%);
--glass-bg: rgba(18, 24, 31, 0.68);
--glass-bg-light: rgba(26, 34, 44, 0.56);
--glass-border: rgba(255, 255, 255, 0.09);
--glass-shine: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, transparent 58%);
--ai-gradient: linear-gradient(135deg, var(--primary), var(--warning));
--interactive-pill-bg: rgba(25, 32, 40, 0.76);
--interactive-pill-active-bg: linear-gradient(135deg, rgba(94, 234, 212, 0.23), rgba(242, 185, 79, 0.16));
--sidebar-hover-bg: rgba(94, 234, 212, 0.08);
--sidebar-active-bg: linear-gradient(135deg, rgba(94, 234, 212, 0.18), rgba(242, 185, 79, 0.1));
--sidebar-active-rail: rgba(94, 234, 212, 0.92);
--table-row-hover: rgba(94, 234, 212, 0.07);
}
[data-theme="dark-blue"] {
color-scheme: dark;
--bg: #060b16;
--bg-soft: #0d1527;
--surface: #101b30;
--surface-elev: #172643;
--surface-hover: #1d2f53;
--surface-sunken: #080e1c;
--surface-panel: rgba(10, 18, 32, 0.72);
--surface-overlay: rgba(16, 27, 48, 0.96);
--border: #2a3a5f;
--border-soft: #223352;
--text: #ecf3ff;
--text-dim: #9eb2d5;
--text-muted: #94a7c9;
--text-heading: #f3f7ff;
--text-soft-highlight: #dff3ff;
--text-on-accent: #062136;
--primary: #3fb2ff;
--primary-strong: #178ef0;
--primary-rgb: 63, 178, 255;
--primary-5: rgba(63, 178, 255, 0.05);
--primary-8: rgba(63, 178, 255, 0.08);
--primary-10: rgba(63, 178, 255, 0.1);
--primary-15: rgba(63, 178, 255, 0.15);
--primary-25: rgba(63, 178, 255, 0.25);
--primary-35: rgba(63, 178, 255, 0.35);
--primary-50: rgba(63, 178, 255, 0.5);
--primary-65: rgba(63, 178, 255, 0.65);
--primary-glow: rgba(63, 178, 255, 0.3);
--success: #2fd59b;
--success-strong: #22c55e;
--warning: #f5b941;
--warning-strong: #f59e0b;
--danger: #ff7474;
--danger-strong: #ef4444;
--violet: #a78bfa;
--link-soft: #60a5fa;
--radius: 8px;
--radius-lg: 10px;
--radius-sm: 8px;
--radius-xs: 6px;
--ux-page-bg: linear-gradient(180deg, #060b16 0%, #0b1425 48%, #060b16 100%);
--ux-page-grid: linear-gradient(rgba(236, 243, 255, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(236, 243, 255, 0.026) 1px, transparent 1px);
--ux-content-surface: linear-gradient(180deg,
color-mix(in srgb, var(--surface) 96%, #fff 4%),
color-mix(in srgb, var(--bg-soft) 92%, var(--surface) 8%));
--ux-control-surface: linear-gradient(180deg,
color-mix(in srgb, var(--surface-elev) 78%, transparent),
color-mix(in srgb, var(--surface) 88%, transparent));
--ux-liquid-surface: linear-gradient(180deg,
color-mix(in srgb, var(--surface-elev) 62%, transparent),
color-mix(in srgb, var(--surface) 48%, transparent));
--ux-border: color-mix(in srgb, var(--border) 78%, var(--primary) 22%);
--ux-border-soft: color-mix(in srgb, var(--border-soft) 86%, var(--primary) 14%);
--ux-card-shadow: 0 1px 1px rgba(0, 0, 0, 0.18), 0 14px 34px rgba(2, 8, 18, 0.34);
--ux-card-shadow-hover: 0 1px 1px rgba(0, 0, 0, 0.2), 0 18px 44px rgba(2, 8, 18, 0.42);
--ux-ring: 0 0 0 2px var(--bg), 0 0 0 5px color-mix(in srgb, var(--primary) 58%, transparent);
--ux-soft-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent);
--content-ambient: linear-gradient(135deg, transparent 0%, color-mix(in srgb, var(--primary) 5%, transparent) 48%, transparent 100%);
--glass-bg: rgba(16, 27, 48, 0.68);
--glass-bg-light: rgba(23, 38, 67, 0.56);
--glass-border: rgba(255, 255, 255, 0.09);
--glass-shine: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, transparent 58%);
--ai-gradient: linear-gradient(135deg, var(--primary), var(--success));
--interactive-pill-bg: rgba(20, 34, 58, 0.76);
--interactive-pill-active-bg: linear-gradient(135deg, rgba(63, 178, 255, 0.24), rgba(47, 213, 155, 0.14));
--sidebar-hover-bg: rgba(63, 178, 255, 0.08);
--sidebar-active-bg: linear-gradient(135deg, rgba(63, 178, 255, 0.2), rgba(23, 142, 240, 0.22));
--sidebar-active-rail: rgba(103, 198, 255, 0.9);
--table-row-hover: rgba(63, 178, 255, 0.07);
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) {
color-scheme: light;
--bg: #f7f7f2;
--bg-soft: #eeeee6;
--surface: #ffffff;
--surface-elev: #f1f0e8;
--surface-hover: #e9ece4;
--surface-sunken: #e8e7df;
--surface-panel: rgba(255, 255, 255, 0.82);
--surface-overlay: rgba(255, 255, 255, 0.96);
--border: #d2d6cc;
--border-soft: #e2e4dc;
--text: #17201c;
--text-dim: #4a554e;
--text-muted: #6d756f;
--text-heading: #111814;
--text-soft-highlight: #0f302b;
--text-on-accent: #ffffff;
--primary: #0f766e;
--primary-strong: #0d5f59;
--primary-rgb: 15, 118, 110;
--primary-5: rgba(15, 118, 110, 0.05);
--primary-8: rgba(15, 118, 110, 0.08);
--primary-10: rgba(15, 118, 110, 0.1);
--primary-15: rgba(15, 118, 110, 0.15);
--primary-25: rgba(15, 118, 110, 0.25);
--primary-35: rgba(15, 118, 110, 0.35);
--primary-50: rgba(15, 118, 110, 0.5);
--primary-65: rgba(15, 118, 110, 0.65);
--primary-glow: rgba(15, 118, 110, 0.18);
--success: #15803d;
--success-strong: #166534;
--warning: #b7791f;
--warning-strong: #975a16;
--danger: #dc2626;
--danger-strong: #b91c1c;
--violet: #6d28d9;
--link-soft: #0369a1;
--ux-page-bg: linear-gradient(180deg, #f7f7f2 0%, #efefe8 50%, #f9f8f3 100%);
--ux-page-grid: linear-gradient(rgba(23, 32, 28, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(23, 32, 28, 0.026) 1px, transparent 1px);
--ux-content-surface: linear-gradient(180deg, #ffffff, #fafaf5);
--ux-control-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 246, 240, 0.88));
--ux-liquid-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(245, 246, 240, 0.58));
--ux-border: color-mix(in srgb, var(--border) 74%, var(--primary) 26%);
--ux-border-soft: color-mix(in srgb, var(--border-soft) 84%, var(--primary) 16%);
--ux-card-shadow: 0 1px 1px rgba(20, 31, 26, 0.05), 0 12px 28px rgba(20, 31, 26, 0.08);
--ux-card-shadow-hover: 0 1px 1px rgba(20, 31, 26, 0.07), 0 16px 36px rgba(20, 31, 26, 0.12);
--ux-ring: 0 0 0 2px var(--bg), 0 0 0 5px rgba(15, 118, 110, 0.42);
--ux-soft-ring: 0 0 0 3px rgba(15, 118, 110, 0.22);
--content-ambient: linear-gradient(135deg, transparent 0%, rgba(15, 118, 110, 0.035) 48%, transparent 100%);
--glass-bg: rgba(255, 255, 255, 0.72);
--glass-bg-light: rgba(255, 255, 255, 0.58);
--glass-border: rgba(23, 32, 28, 0.08);
--table-row-hover: rgba(15, 118, 110, 0.06);
}
body {
background: var(--ux-page-bg);
letter-spacing: 0;
}
:is([data-theme="light"], [data-theme="light-green"], [data-theme="light-white"]) body {
background: var(--ux-page-bg);
}
body::before {
background-image: var(--ux-page-grid);
background-size: 32px 32px;
mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.62) 42%, transparent 100%);
opacity: 0.28;
}
.app-layout .main-content {
max-width: min(1760px, 100%);
}
.app-layout .main-content::before {
background: var(--content-ambient);
}
.app-layout :is(.page-header h1, .console-title, .dashboard-title, .hero-title) {
letter-spacing: 0;
}
.app-layout .page-header h1 {
font-size: var(--text-3xl);
}
@media (max-width: 640px) {
.app-layout .page-header h1 {
font-size: var(--text-2xl);
}
}
.app-layout :is(.card, .focus-card, .stat-card, .dashboard-section-card, .kpi-card, .section-card, .chart-card, .app-service-card, .form-section, .table-wrap, .bottom-panel, .console-tip-card, .radio-card-body) {
border-radius: var(--ux-content-radius);
border-color: var(--ux-border-soft);
background: var(--ux-content-surface);
box-shadow: var(--ux-card-shadow);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.app-layout :is(.card, .focus-card, .stat-card, .dashboard-section-card, .kpi-card, .section-card, .chart-card, .app-service-card, .form-section, .bottom-panel)::before {
background: linear-gradient(180deg, rgba(255,255,255,0.035), transparent 36%);
}
.app-layout :is(.card, .focus-card, .stat-card)::after {
display: none;
}
@media (hover: hover) {
.app-layout :is(.card, .focus-card, .stat-card, .dashboard-section-card, .kpi-card, .section-card, .chart-card, .app-service-card, .bottom-panel):hover {
border-color: var(--ux-border);
box-shadow: var(--ux-card-shadow-hover);
transform: translateY(-1px);
}
}
.app-layout :is(.sidebar, .mobile-bottom-bar, .toolbar, .dashboard-quick-nav, .command-bar, .tab-nav, .tab-header, .view-switch, .segmented, .feedback-overlay .feedback-panel, .confirm-dialog, .command-palette, .toast, .glass-surface) {
border-color: var(--glass-border);
background: var(--ux-liquid-surface);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}
@media (max-width: 768px) {
body.mobile-nav-open .app-layout .sidebar {
width: min(82vw, 290px);
z-index: calc(var(--z-sidebar, 300) + 1);
background:
linear-gradient(180deg, var(--sidebar-glass-highlight), transparent 28%),
var(--surface);
backdrop-filter: none;
-webkit-backdrop-filter: none;
filter: none;
color: var(--text);
box-shadow: 18px 0 44px rgba(0, 0, 0, 0.38);
}
body.mobile-nav-open .app-layout .sidebar .nav-group-title,
body.mobile-nav-open .app-layout .sidebar .sidebar-brand small {
height: auto;
margin: 0;
padding: 0.5rem 0.75rem;
opacity: 1;
overflow: visible;
color: var(--text-muted);
filter: none;
}
body.mobile-nav-open .app-layout .sidebar .sidebar-brand small {
display: block;
padding: 0;
}
body.mobile-nav-open .app-layout .sidebar .nav-item {
justify-content: flex-start;
overflow: visible;
color: var(--text-dim);
filter: none;
text-shadow: none;
}
body.mobile-nav-open .app-layout .sidebar .nav-item:hover,
body.mobile-nav-open .app-layout .sidebar .nav-item.active {
color: var(--text);
}
}
body[data-route="/console"] .app-layout :is(.console-sidebar, .console-output-area, .command-panel, .quick-actions-section, .history-section) {
border-radius: var(--ux-content-radius);
border-color: var(--ux-border-soft);
background: var(--ux-control-surface);
box-shadow: var(--ux-card-shadow);
}
body[data-route="/console"] .app-layout :is(.console-input-area .command-panel, .console-sidebar) {
background: var(--ux-liquid-surface);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
}
.app-layout :is(.btn, .quick-nav-pill, .tab-btn, .view-btn, .seg-btn, .mobile-bottom-item, .sidebar-filter, .output-tool-btn, .search-nav-btn, .search-close-btn, .prompt-attach-btn, .qa-manage-btn, .sidebar-toggle-btn) {
min-height: var(--ux-control-min);
border-radius: var(--ux-control-radius);
letter-spacing: 0;
}
.app-layout .btn {
background: var(--ux-control-surface);
border-color: var(--ux-border-soft);
box-shadow: none;
}
.app-layout :is(.btn-primary, .btn-ai-gradient) {
background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--warning) 62%, var(--primary) 38%));
border-color: color-mix(in srgb, var(--primary) 54%, var(--warning) 46%);
color: var(--text-on-accent);
}
.app-layout :is(.btn-danger, .btn-warning, .btn-muted, .btn-ghost) {
background: color-mix(in srgb, currentColor 10%, transparent);
}
.app-layout :is(.btn:hover, .quick-nav-pill:hover, .tab-btn:hover, .view-btn:hover, .seg-btn:hover, .output-tool-btn:hover, .search-nav-btn:hover, .search-close-btn:hover, .prompt-attach-btn:hover, .qa-manage-btn:hover) {
border-color: var(--ux-border);
background: color-mix(in srgb, var(--surface-hover) 82%, var(--primary) 18%);
box-shadow: var(--ux-soft-ring);
}
.app-layout :is(.btn:active, .quick-nav-pill:active, .tab-btn:active, .view-btn:active, .seg-btn:active, .mobile-bottom-item:active) {
transform: translateY(1px) scale(0.99);
}
.app-layout :is(.btn-compact, .btn-sm) {
min-height: 34px;
}
.app-layout :is(.nav-item, .sidebar-feedback-btn, .lang-toggle-btn, .density-toggle-btn, .theme-toggle-btn, .sidebar-restart-btn, .sidebar-logout-btn) {
border-radius: var(--ux-control-radius);
}
.app-layout .nav-item.active {
background: var(--sidebar-active-bg);
border-color: var(--ux-border);
box-shadow: inset 0 0 0 1px var(--primary-8);
}
.app-layout :is(input, select, textarea, .input-field, .console-input, .console-select, .sidebar-search-input) {
border-radius: var(--ux-control-radius);
border-color: var(--ux-border-soft);
background: color-mix(in srgb, var(--bg-soft) 78%, transparent);
letter-spacing: 0;
}
.app-layout :is(input, select, textarea, .input-field, .console-input, .console-select, .sidebar-search-input):focus-visible,
.app-layout :is(.btn, .quick-nav-pill, .tab-btn, .view-btn, .seg-btn, .nav-item, .mobile-bottom-item, .sidebar-collapse-btn, .theme-toggle-btn, .density-toggle-btn, .lang-toggle-btn, .sidebar-feedback-btn, .sidebar-restart-btn, .sidebar-logout-btn, .output-tool-btn, .search-nav-btn, .search-close-btn, .prompt-attach-btn, .qa-manage-btn, .sidebar-toggle-btn):focus-visible {
outline: none;
border-color: var(--primary-65);
box-shadow: var(--ux-ring);
}
.app-layout :is(.data-table, .table-wrap .data-table) {
background: transparent;
}
.app-layout .data-table th {
background: var(--ux-control-surface);
color: var(--text-dim);
letter-spacing: 0.04em;
}
.app-layout .data-table td {
background: transparent;
}
.app-layout .data-table tr:hover td {
background: var(--table-row-hover);
}
.app-layout :is(.badge, .status-pill, .sidebar-count, .toggle-count, .filter-chip, .fpill, .hint-chip) {
border-radius: 999px;
border-color: var(--ux-border-soft);
letter-spacing: 0;
}
.app-layout :is(.kpi-value, .stat-value) {
background: linear-gradient(135deg, var(--primary), var(--success), var(--warning));
-webkit-background-clip: text;
background-clip: text;
}
.app-layout :is(.skeleton-line, .skeleton-card, .skeleton-loader) {
background: linear-gradient(90deg,
color-mix(in srgb, var(--surface-elev) 86%, transparent),
color-mix(in srgb, var(--primary) 10%, var(--surface-hover) 90%),
color-mix(in srgb, var(--surface-elev) 86%, transparent));
}
@media (max-width: 768px) {
:root {
--touch-target-min: 44px;
--ux-control-min: 44px;
}
.app-layout :is(.card, .focus-card, .stat-card, .dashboard-section-card, .kpi-card, .section-card, .chart-card, .app-service-card, .form-section, .table-wrap) {
border-radius: var(--ux-content-radius);
}
.app-layout :is(.btn-compact, .btn-sm) {
min-height: var(--touch-min, 44px);
}
}
@media (prefers-contrast: more) {
:root {
--ux-border: color-mix(in srgb, var(--border) 32%, white 68%);
--ux-border-soft: color-mix(in srgb, var(--border-soft) 38%, white 62%);
}
.app-layout :is(.card, .focus-card, .stat-card, .dashboard-section-card, .kpi-card, .section-card, .chart-card, .app-service-card, .form-section, .table-wrap, .btn, input, select, textarea) {
border-width: 2px;
}
}
@media (forced-colors: active) {
.app-layout :is(.card, .focus-card, .stat-card, .dashboard-section-card, .kpi-card, .section-card, .chart-card, .app-service-card, .form-section, .table-wrap, .toolbar, .sidebar, .btn) {
forced-color-adjust: auto;
border-color: CanvasText;
background: Canvas;
}
.app-layout :is(.btn, .nav-item, input, select, textarea):focus-visible {
outline: 2px solid Highlight;
outline-offset: 2px;
box-shadow: none;
}
}
.theme-picker-menu {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 196px;
padding: 8px;
border-radius: 14px;
background: var(--surface-overlay);
border: 1px solid var(--border);
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32), 0 4px 12px rgba(0, 0, 0, 0.18);
backdrop-filter: blur(14px);
z-index: 9999;
font-size: 14px;
color: var(--text);
animation: theme-picker-pop 120ms ease-out;
}
@keyframes theme-picker-pop {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.theme-picker-option {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 10px;
border: 1px solid transparent;
background: transparent;
color: inherit;
cursor: pointer;
font: inherit;
text-align: left;
transition: background 120ms ease, border-color 120ms ease;
}
.theme-picker-option:hover {
background: var(--surface-hover);
}
.theme-picker-option.active {
background: var(--primary-15);
border-color: var(--primary-35);
color: var(--text);
}
.theme-picker-swatch {
width: 18px;
height: 18px;
border-radius: 50%;
flex-shrink: 0;
border: 1px solid var(--border);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.theme-picker-swatch.swatch-dark-blue {
background: linear-gradient(135deg, #060b16 0%, #3fb2ff 100%);
}
.theme-picker-swatch.swatch-dark-green {
background: linear-gradient(135deg, #0a1410 0%, #5eead4 100%);
}
.theme-picker-label {
flex: 1;
}
[data-theme="light-white"] {
--bg: #ffffff;
--bg-soft: #f6f8fb;
--surface: #ffffff;
--surface-elev: #f3f6fb;
--surface-hover: #e9eef6;
--surface-sunken: #eef2f8;
--surface-panel: rgba(255, 255, 255, 0.92);
--surface-overlay: rgba(255, 255, 255, 0.98);
--border: #d4dbe5;
--border-soft: #e5eaf2;
--text: #0f1b2d;
--text-dim: #3b475a;
--text-muted: #6b7689;
--text-heading: #0a1322;
--text-soft-highlight: #0e2a52;
--text-on-accent: #ffffff;
--primary: #2563eb;
--primary-strong: #1d4ed8;
--primary-rgb: 37, 99, 235;
--primary-5: rgba(37, 99, 235, 0.05);
--primary-8: rgba(37, 99, 235, 0.08);
--primary-10: rgba(37, 99, 235, 0.1);
--primary-15: rgba(37, 99, 235, 0.15);
--primary-25: rgba(37, 99, 235, 0.25);
--primary-35: rgba(37, 99, 235, 0.35);
--primary-50: rgba(37, 99, 235, 0.5);
--primary-65: rgba(37, 99, 235, 0.65);
--primary-glow: rgba(37, 99, 235, 0.18);
--success: #15803d;
--success-strong: #166534;
--warning: #b7791f;
--warning-strong: #975a16;
--danger: #dc2626;
--danger-strong: #b91c1c;
--violet: #6d28d9;
--link-soft: #1d4ed8;
--ux-page-bg: linear-gradient(180deg, #ffffff 0%, #f4f7fb 50%, #ffffff 100%);
--ux-page-grid: linear-gradient(rgba(15, 27, 45, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(15, 27, 45, 0.03) 1px, transparent 1px);
--ux-content-surface: linear-gradient(180deg, #ffffff, #fafcff);
--ux-control-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(244, 247, 251, 0.9));
--ux-liquid-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(244, 247, 251, 0.62));
--ux-border: color-mix(in srgb, var(--border) 74%, var(--primary) 26%);
--ux-border-soft: color-mix(in srgb, var(--border-soft) 84%, var(--primary) 16%);
--ux-card-shadow: 0 1px 1px rgba(15, 27, 45, 0.05), 0 12px 28px rgba(15, 27, 45, 0.08);
--ux-card-shadow-hover: 0 1px 1px rgba(15, 27, 45, 0.07), 0 16px 36px rgba(15, 27, 45, 0.12);
--ux-ring: 0 0 0 2px var(--bg), 0 0 0 5px rgba(37, 99, 235, 0.42);
--ux-soft-ring: 0 0 0 3px rgba(37, 99, 235, 0.22);
--content-ambient: linear-gradient(135deg, transparent 0%, rgba(37, 99, 235, 0.035) 48%, transparent 100%);
--glass-bg: rgba(255, 255, 255, 0.78);
--glass-bg-light: rgba(255, 255, 255, 0.62);
--glass-border: rgba(15, 27, 45, 0.08);
--table-row-hover: rgba(37, 99, 235, 0.06);
}