/* ============================================================ * DSEPHY.AI — Cyber-Pro design tokens (v2) * Professional sci-fi tone (visionOS · Linear · Vercel). * All component classes prefixed `.cyber-*` to avoid collision * with existing inline CSS in index.html (esp. `.btn`). * ============================================================ */ :root { /* --- Base palette --- */ --c-void: #07090f; --c-bg-panel: #0e1118; --c-bg-elev: #151923; --c-bg-tint: #11151e; --c-line: #1f2433; --c-line-strong: #2a3145; /* --- Accents --- */ --c-primary: #38bdf8; --c-primary-soft: #0ea5e9; --c-primary-glow: rgba(56, 189, 248, 0.35); --c-accent: #a78bfa; --c-accent-soft: #8b5cf6; --c-accent-glow: rgba(167, 139, 250, 0.35); --c-success: #34d399; --c-warning: #fbbf24; --c-danger: #f87171; /* --- Text --- */ --c-text: #e6ecf3; --c-text-dim: #94a3b8; --c-text-muted: #64748b; --c-text-faint: #475569; /* --- Typography --- */ --f-display: 'Space Grotesk', 'Inter', system-ui, sans-serif; --f-ui: 'Inter', 'Noto Sans TC', system-ui, -apple-system, sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --f-cjk: 'Noto Sans TC', 'Inter', sans-serif; /* --- Sizing --- */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px; /* --- Shadows / glow --- */ --shadow-card: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 24px rgba(0,0,0,0.4); --shadow-elev: 0 1px 0 rgba(255,255,255,0.04) inset, 0 18px 48px rgba(0,0,0,0.55); --glow-focus: 0 0 0 1px var(--c-primary), 0 0 0 4px rgba(56, 189, 248, 0.18); --glow-primary-hover: 0 0 24px rgba(56, 189, 248, 0.25); /* --- Motion --- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 140ms; --dur-base: 240ms; } /* ============================================================ * Page chrome — applied via .cyber-body on * ============================================================ */ body.cyber-body { background: var(--c-void) !important; color: var(--c-text); font-family: var(--f-ui); font-feature-settings: 'cv11', 'ss01', 'ss03'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; position: relative; overflow-x: hidden; } body.cyber-body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(ellipse 70% 50% at 50% -10%, rgba(56, 189, 248, 0.08), transparent 60%), radial-gradient(ellipse 60% 40% at 100% 100%, rgba(167, 139, 250, 0.06), transparent 60%), radial-gradient(circle, rgba(148, 163, 184, 0.06) 1px, transparent 1px); background-size: 100% 100%, 100% 100%, 28px 28px; pointer-events: none; z-index: 0; } body.cyber-body > * { position: relative; z-index: 1; } /* ============================================================ * Typography utilities * ============================================================ */ .t-display { font-family: var(--f-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; } .t-kicker { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-text-dim); } .t-mono { font-family: var(--f-mono); font-feature-settings: 'tnum'; } .t-mono-num { font-variant-numeric: tabular-nums; font-family: var(--f-mono); } .t-dim { color: var(--c-text-dim); } .t-muted { color: var(--c-text-muted); } .t-gradient { background: linear-gradient(90deg, var(--c-primary), var(--c-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ============================================================ * Surface — card / panel * ============================================================ */ .cyber-surface { background: linear-gradient(180deg, var(--c-bg-panel), var(--c-bg-tint)); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; box-shadow: var(--shadow-card); transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .cyber-surface--elev { background: linear-gradient(180deg, var(--c-bg-elev), var(--c-bg-panel)); border-color: var(--c-line-strong); box-shadow: var(--shadow-elev); } .cyber-surface--accent { border-color: rgba(56, 189, 248, 0.25); } .cyber-surface--hud { position: relative; } .cyber-surface--hud::before, .cyber-surface--hud::after { content: ""; position: absolute; width: 10px; height: 10px; border: 1px solid var(--c-primary); opacity: 0.7; } .cyber-surface--hud::before { top: -1px; left: -1px; border-right: none; border-bottom: none; } .cyber-surface--hud::after { bottom: -1px; right: -1px; border-left: none; border-top: none; } /* ============================================================ * Liquid Glass — frosted, translucent surfaces * 用 backdrop-filter 做毛玻璃；深色 / 淺色各自一套 tint * ============================================================ */ .glass-panel { position: relative; background: rgba(20, 26, 38, 0.55); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(148, 163, 184, 0.16); border-radius: var(--radius-lg); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06); padding: 1.5rem; } /* 頂部高光，模擬玻璃反光（z-index:0 + 內容 z-index:1，避免蓋住標題文字）*/ .glass-panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 40%; z-index: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent); pointer-events: none; } .glass-panel > * { position: relative; z-index: 1; } /* ---- 帳戶管理 / 表單 glass 輸入框 ---- */ .acct-input { background: rgba(15, 20, 30, 0.5); border: 1px solid rgba(148, 163, 184, 0.2); color: var(--c-text); transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .acct-input:focus { outline: none; border-color: var(--c-primary); box-shadow: var(--glow-focus); background: rgba(15, 20, 30, 0.62); } .acct-input::placeholder { color: var(--c-text-faint); } .acct-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.6rem; cursor: pointer; } /* ---- 問書輸入條（Liquid Glass）---- */ .dse-input-bar { display: flex; align-items: flex-end; /* 底邊對齊：掣同 textarea 底部齊（textarea 可向上長高）*/ gap: 0.5rem; padding: 0.4rem; border-radius: 1rem; background: rgba(20, 26, 38, 0.5); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border: 1px solid rgba(148, 163, 184, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); } .dse-input-tool { flex-shrink: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 0.75rem; color: #cbd5e1; background: rgba(148, 163, 184, 0.10); border: 1px solid rgba(148, 163, 184, 0.16); transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .dse-input-tool:hover { background: rgba(56, 189, 248, 0.22); color: #fff; transform: translateY(-1px); } .dse-input-tool.hidden { display: none; } .dse-input-field { flex: 1 1 auto; position: relative; display: flex; align-items: center; border-radius: 0.75rem; background: rgba(15, 20, 30, 0.45); border: 1px solid rgba(148, 163, 184, 0.16); } /* 唔靠 Tailwind .bg-transparent（compiled CSS 可能已 purge）→ 直接喺度透明 + 白字 */ .dse-input-field textarea { line-height: 1.5; background: transparent !important; color: #e2e8f0; } .dse-input-field textarea::placeholder { color: #64748b; } .dse-input-field:focus-within { border-color: rgba(56, 189, 248, 0.6); box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.16); } .dse-input-send { flex-shrink: 0; height: 48px; display: flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0 1rem; border-radius: 0.75rem; color: #fff; background: linear-gradient(180deg, #22b6e6, #0ea5e9); box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35); transition: filter var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .dse-input-send:hover { filter: brightness(1.08); transform: translateY(-1px); } /* 語音聆聽中：紅色脈動 */ .dse-input-tool.is-listening { background: rgba(239, 68, 68, 0.9) !important; color: #fff !important; border-color: rgba(239, 68, 68, 0.6) !important; animation: dse-pulse 1.1s ease-in-out infinite; } @keyframes dse-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); } 50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); } } /* ============================================================ * Buttons (.cyber-btn — avoid collision with legacy .btn) * ============================================================ */ .cyber-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.95rem; font-family: var(--f-ui); font-weight: 500; font-size: 0.875rem; letter-spacing: -0.005em; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-base), transform var(--dur-fast); user-select: none; text-decoration: none; } .cyber-btn:active { transform: translateY(0.5px); } .cyber-btn:disabled, .cyber-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; } .cyber-btn--primary { background: linear-gradient(180deg, #0ea5e9, #0284c7); color: #02101d; border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 6px 14px rgba(2, 132, 199, 0.35); } .cyber-btn--primary:hover { background: linear-gradient(180deg, #38bdf8, #0ea5e9); box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 8px 20px rgba(56,189,248,0.4); } .cyber-btn--secondary { background: var(--c-bg-elev); color: var(--c-text); border-color: var(--c-line-strong); } .cyber-btn--secondary:hover { border-color: var(--c-primary); color: var(--c-primary); box-shadow: var(--glow-primary-hover); } .cyber-btn--ghost { background: transparent; color: var(--c-text-dim); border-color: transparent; } .cyber-btn--ghost:hover { color: var(--c-text); background: rgba(255, 255, 255, 0.03); } .cyber-btn--danger { background: transparent; color: var(--c-danger); border-color: rgba(248, 113, 113, 0.35); } .cyber-btn--danger:hover { background: rgba(248, 113, 113, 0.08); border-color: var(--c-danger); } .cyber-btn--google { background: #ffffff; color: #1f2937; border-color: rgba(0,0,0,0.08); box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 4px 14px rgba(0,0,0,0.35); } .cyber-btn--google:hover { background: #f8fafc; box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 8px 22px rgba(56,189,248,0.25); } .cyber-btn:focus-visible { outline: none; box-shadow: var(--glow-focus); } /* ============================================================ * Inputs * ============================================================ */ .cyber-input { width: 100%; padding: 0.65rem 0.85rem; background: var(--c-bg-panel); border: 1px solid var(--c-line); border-radius: var(--radius-md); color: var(--c-text); font-family: var(--f-ui); font-size: 0.92rem; line-height: 1.5; outline: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); } .cyber-input::placeholder { color: var(--c-text-muted); } .cyber-input:focus { border-color: var(--c-primary); box-shadow: var(--glow-focus); } /* ============================================================ * Badges * ============================================================ */ .cyber-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.18rem 0.55rem; font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; border-radius: var(--radius-pill); background: rgba(148, 163, 184, 0.08); border: 1px solid var(--c-line); color: var(--c-text-dim); } .cyber-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .cyber-badge--primary { color: var(--c-primary); border-color: rgba(56,189,248,0.3); background: rgba(56,189,248,0.06); } .cyber-badge--success { color: var(--c-success); border-color: rgba(52,211,153,0.3); background: rgba(52,211,153,0.06); } .cyber-badge--warning { color: var(--c-warning); border-color: rgba(251,191,36,0.3); background: rgba(251,191,36,0.06); } .cyber-badge--danger { color: var(--c-danger); border-color: rgba(248,113,113,0.3); background: rgba(248,113,113,0.06); } .cyber-badge--accent { color: var(--c-accent); border-color: rgba(167,139,250,0.3); background: rgba(167,139,250,0.06); } /* ============================================================ * KPI tile * ============================================================ */ .cyber-kpi { background: linear-gradient(180deg, var(--c-bg-panel), var(--c-bg-tint)); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: 1rem 1.25rem; transition: border-color var(--dur-base); } .cyber-kpi:hover { border-color: var(--c-line-strong); } .cyber-kpi__label { display: flex; align-items: center; justify-content: space-between; font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.16em; color: var(--c-text-muted); text-transform: uppercase; } .cyber-kpi__value { margin-top: 0.5rem; font-family: var(--f-display); font-weight: 600; font-size: 2rem; line-height: 1; color: var(--c-text); font-variant-numeric: tabular-nums; } .cyber-kpi__value .unit { font-size: 0.5em; color: var(--c-text-muted); font-weight: 500; margin-left: 0.35rem; letter-spacing: 0.02em; } .cyber-kpi__delta { margin-top: 0.6rem; font-family: var(--f-mono); font-size: 0.72rem; color: var(--c-success); } .cyber-kpi__delta--down { color: var(--c-danger); } /* ============================================================ * Progress matrix cell (DSE tracker) * ============================================================ */ .cyber-cell { width: 40px; height: 40px; background: rgba(148, 163, 184, 0.04); border: 1px solid var(--c-line); border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 0.72rem; color: var(--c-text-faint); cursor: pointer; transition: all var(--dur-base) var(--ease-out); flex-shrink: 0; } .cyber-cell:hover { border-color: var(--c-primary); color: var(--c-primary); background: rgba(56, 189, 248, 0.06); transform: translateY(-1px); } .cyber-cell.is-done { background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.5); color: var(--c-success); } .cyber-cell.is-target { border-color: var(--c-accent); color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent) inset; } .cyber-cell-row { display: flex; flex-wrap: wrap; gap: 6px; } /* ============================================================ * Terminal / AI chat * ============================================================ */ .cyber-term { background: var(--c-bg-panel); border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: hidden; } .cyber-term__head { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 1rem; border-bottom: 1px solid var(--c-line); font-family: var(--f-mono); font-size: 0.72rem; color: var(--c-text-muted); background: var(--c-bg-tint); } .cyber-term__body { padding: 1rem 1.25rem; max-height: 360px; overflow-y: auto; } .cyber-msg { display: flex; gap: 0.75rem; padding: 0.55rem 0; font-family: var(--f-ui); font-size: 0.95rem; line-height: 1.6; } .cyber-msg__role { flex: 0 0 auto; font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-muted); padding-top: 4px; min-width: 56px; } .cyber-msg--user .cyber-msg__role { color: var(--c-accent); } .cyber-msg--ai .cyber-msg__role { color: var(--c-primary); } .cyber-msg--sys .cyber-msg__role { color: var(--c-warning); } .cyber-msg__body { color: var(--c-text); } .cyber-msg--sys .cyber-msg__body { color: var(--c-text-dim); font-family: var(--f-mono); font-size: 0.85rem; } .cyber-cursor { display: inline-block; width: 2px; height: 1.05em; background: var(--c-primary); vertical-align: text-bottom; margin-left: 2px; animation: cyber-blink 1.1s steps(1) infinite; } @keyframes cyber-blink { 50% { opacity: 0; } } /* ============================================================ * Quiz answer cards * ============================================================ */ .cyber-ans { display: flex; align-items: center; gap: 0.8rem; padding: 0.85rem 1.1rem; background: var(--c-bg-panel); border: 1px solid var(--c-line); border-radius: var(--radius-md); font-family: var(--f-ui); font-size: 0.95rem; cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-base); } .cyber-ans__letter { flex: 0 0 28px; height: 28px; border-radius: var(--radius-sm); background: var(--c-bg-elev); border: 1px solid var(--c-line-strong); display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 0.78rem; color: var(--c-text-dim); } .cyber-ans:hover { border-color: var(--c-line-strong); } .cyber-ans.is-selected { border-color: var(--c-primary); background: rgba(56,189,248,0.05); } .cyber-ans.is-selected .cyber-ans__letter { color: var(--c-primary); border-color: var(--c-primary); } .cyber-ans.is-correct { border-color: rgba(52,211,153,0.55); background: rgba(52,211,153,0.06); } .cyber-ans.is-correct .cyber-ans__letter { color: var(--c-success); border-color: var(--c-success); } .cyber-ans.is-wrong { border-color: rgba(248,113,113,0.5); background: rgba(248,113,113,0.05); } .cyber-ans.is-wrong .cyber-ans__letter { color: var(--c-danger); border-color: var(--c-danger); } /* ============================================================ * Tabs / segmented control * ============================================================ */ .cyber-tabs { display: inline-flex; padding: 3px; background: var(--c-bg-panel); border: 1px solid var(--c-line); border-radius: var(--radius-md); } .cyber-tab { padding: 0.4rem 0.85rem; font-family: var(--f-ui); font-size: 0.82rem; font-weight: 500; color: var(--c-text-dim); border-radius: calc(var(--radius-md) - 2px); cursor: pointer; transition: color var(--dur-fast), background var(--dur-fast); } .cyber-tab:hover { color: var(--c-text); } .cyber-tab.is-active { color: var(--c-text); background: var(--c-bg-elev); box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset; } /* ============================================================ * Progress bar * ============================================================ */ .cyber-bar { height: 6px; background: var(--c-bg-elev); border-radius: var(--radius-pill); overflow: hidden; border: 1px solid var(--c-line); } .cyber-bar__fill { height: 100%; background: linear-gradient(90deg, var(--c-primary), var(--c-accent)); border-radius: var(--radius-pill); transition: width var(--dur-base) var(--ease-out); } /* ============================================================ * Divider * ============================================================ */ .cyber-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--c-line) 20%, var(--c-line) 80%, transparent); margin: 2rem 0; } @media (prefers-reduced-motion: reduce) { .cyber-cursor { animation: none; } } /* ============================================================ * LIGHT THEME (set ) * 1) 重定義 design tokens → 自動 reskin 所有 .cyber-* 組件 * 2) Remap 頁面大量用到嘅 Tailwind 深色 utilities * 3) 彩色按鈕保留白字（放最後 override） * ============================================================ */ :root[data-theme="light"] { --c-void: #fdfcf4; /* 暖色淺黃打底，配藍色 accent */ --c-bg-panel: #fffefb; /* 卡片：近白帶暖 */ --c-bg-elev: #fffdf7; --c-bg-tint: #f5f7fb; /* 卡片漸層底，淺藍一級 */ --c-line: #ece8dc; /* 邊線帶暖 */ --c-line-strong: #ddd8c8; --c-text: #0f172a; --c-text-dim: #475569; --c-text-muted: #64748b; --c-text-faint: #94a3b8; --shadow-card: 0 1px 2px rgba(15,23,42,0.06), 0 6px 18px rgba(15,23,42,0.08); --shadow-elev: 0 1px 2px rgba(15,23,42,0.08), 0 14px 34px rgba(15,23,42,0.12); --glow-focus: 0 0 0 1px var(--c-primary), 0 0 0 4px rgba(14, 165, 233, 0.18); --glow-primary-hover: 0 0 18px rgba(14, 165, 233, 0.18); } /* 頁面底色（更白、更乾淨）*/ :root[data-theme="light"] body, :root[data-theme="light"] body.cyber-body { /* 暖色淺黃 → 淺藍嘅柔和漸層，warm + cool 撈埋 */ background: linear-gradient(170deg, #fdfbf2 0%, #faf8ee 38%, #f1f5fc 100%) !important; color: var(--c-text); } :root[data-theme="light"] body.cyber-body::before { background: radial-gradient(ellipse 75% 55% at 50% -10%, rgba(250, 204, 21, 0.10), transparent 62%), radial-gradient(ellipse 65% 50% at 8% 92%, rgba(14, 165, 233, 0.07), transparent 60%), radial-gradient(ellipse 60% 45% at 96% 100%, rgba(99, 102, 241, 0.05), transparent 60%), radial-gradient(circle, rgba(120, 113, 80, 0.03) 1px, transparent 1px); background-size: 100% 100%, 100% 100%, 100% 100%, 28px 28px; } /* 側欄漸層 → 淺色 */ :root[data-theme="light"] #cyberSidebar { background: linear-gradient(180deg, #ffffff, #f5f7fb) !important; } /* --- Tailwind 深色底 → 淺色面 --- */ :root[data-theme="light"] .bg-gray-900 { background-color: #e2e8f0; } :root[data-theme="light"] .bg-gray-800 { background-color: #ffffff; } :root[data-theme="light"] .bg-gray-700 { background-color: #f1f5f9; } :root[data-theme="light"] .bg-gray-600 { background-color: #e2e8f0; } :root[data-theme="light"] .bg-gray-500 { background-color: #cbd5e1; } :root[data-theme="light"] .bg-gray-900\/95 { background-color: rgba(248,250,252,0.95); } :root[data-theme="light"] .bg-gray-900\/80 { background-color: rgba(248,250,252,0.85); } :root[data-theme="light"] .bg-gray-900\/60 { background-color: rgba(241,245,249,0.7); } :root[data-theme="light"] .bg-gray-800\/60 { background-color: rgba(255,255,255,0.7); } :root[data-theme="light"] .bg-gray-700\/50 { background-color: rgba(241,245,249,0.6); } :root[data-theme="light"] .bg-gray-700\/30 { background-color: rgba(241,245,249,0.4); } /* --- 文字 --- */ :root[data-theme="light"] .text-white { color: #0f172a; } :root[data-theme="light"] .text-gray-200 { color: #1e293b; } :root[data-theme="light"] .text-gray-300 { color: #334155; } :root[data-theme="light"] .text-gray-400 { color: #475569; } :root[data-theme="light"] .text-gray-500 { color: #64748b; } /* --- 邊框 --- */ :root[data-theme="light"] .border-gray-500 { border-color: #cbd5e1; } :root[data-theme="light"] .border-gray-600 { border-color: #cbd5e1; } :root[data-theme="light"] .border-gray-700 { border-color: #e2e8f0; } :root[data-theme="light"] .border-gray-800 { border-color: #e2e8f0; } /* AI 對話泡泡（硬編碼深色）→ 淺色 */ :root[data-theme="light"] .chat-bubble-ai { background-color: #e2e8f0; color: #0f172a; } /* --- 蓋過 index.html 嘅 legacy 深色 !important 規則（標題/輸入/側欄）--- */ /* 注意：刻意唔郁 .text-white，等彩色按鈕（bg-cyan 等）保留白字 */ :root[data-theme="light"] #tab-content-tracker h1, :root[data-theme="light"] #tab-content-tracker h2, :root[data-theme="light"] #tab-content-tracker h3, :root[data-theme="light"] #tab-content-tracker .text-2xl, :root[data-theme="light"] .bg-gray-800 h1, :root[data-theme="light"] .bg-gray-800 h2, :root[data-theme="light"] .bg-gray-800 h3, :root[data-theme="light"] .bg-gray-900 h1, :root[data-theme="light"] .bg-gray-900 h2, :root[data-theme="light"] .bg-gray-900 h3, :root[data-theme="light"] #formTitle { color: #0f172a !important; } /* 默認標題灰 (#e2e8f0) → 深色 */ :root[data-theme="light"] h1:not(.text-white):not(.text-cyan-400):not(.text-yellow-400):not(.text-green-400), :root[data-theme="light"] h2:not(.text-white):not(.text-cyan-400):not(.text-yellow-400):not(.text-green-400), :root[data-theme="light"] h3:not(.text-white):not(.text-cyan-400):not(.text-yellow-400):not(.text-green-400), :root[data-theme="light"] h4:not(.text-white):not(.text-cyan-400):not(.text-yellow-400):not(.text-green-400), :root[data-theme="light"] h5:not(.text-white):not(.text-cyan-400):not(.text-yellow-400):not(.text-green-400), :root[data-theme="light"] h6:not(.text-white):not(.text-cyan-400):not(.text-yellow-400):not(.text-green-400) { color: #0f172a; } /* 問書輸入框文字（legacy color:white !important）→ 深色 */ :root[data-theme="light"] #dseChatInput, :root[data-theme="light"] #dseChatInput:focus { color: #0f172a !important; } :root[data-theme="light"] #dseChatInput::placeholder { color: #94a3b8; } /* 側欄 active 項（legacy 近白字 #eaf6ff）→ 深藍可見 */ :root[data-theme="light"] #cyberSidebar .sb-item.is-active { color: #0c4a6e; background: rgba(56, 189, 248, 0.16); } :root[data-theme="light"] #cyberSidebar .sb-item { color: #475569; } :root[data-theme="light"] #cyberSidebar .sb-item:hover { color: #0f172a; } /* 聊天泡泡富文本：黃色 strong 喺淺底太淺 → 加深 */ :root[data-theme="light"] .message-content strong, :root[data-theme="light"] .ai-reply strong, :root[data-theme="light"] .saved-qa-content strong { color: #b45309; } /* --- 彩色按鈕保留白字（必須放喺 .text-white remap 之後）--- */ :root[data-theme="light"] .bg-cyan-400, :root[data-theme="light"] .bg-cyan-500, :root[data-theme="light"] .bg-cyan-600, :root[data-theme="light"] .bg-cyan-700, :root[data-theme="light"] .bg-sky-600, :root[data-theme="light"] .bg-sky-700, :root[data-theme="light"] .bg-blue-500, :root[data-theme="light"] .bg-blue-600, :root[data-theme="light"] .bg-blue-700, :root[data-theme="light"] .bg-indigo-500, :root[data-theme="light"] .bg-purple-500, :root[data-theme="light"] .bg-purple-600, :root[data-theme="light"] .bg-purple-700, :root[data-theme="light"] .bg-red-400, :root[data-theme="light"] .bg-red-500, :root[data-theme="light"] .bg-red-600, :root[data-theme="light"] .bg-red-700, :root[data-theme="light"] .bg-green-400, :root[data-theme="light"] .bg-green-500, :root[data-theme="light"] .bg-green-600, :root[data-theme="light"] .bg-green-700, :root[data-theme="light"] .bg-teal-600, :root[data-theme="light"] .bg-teal-700 { color: #ffffff; } /* --- 灰底按鈕（remap 成淺色）若帶 text-white 會睇唔到字，強制深色 --- */ :root[data-theme="light"] .bg-gray-600.text-white, :root[data-theme="light"] .bg-gray-700.text-white, :root[data-theme="light"] .bg-gray-800.text-white, :root[data-theme="light"] .bg-gray-900.text-white { color: #0f172a !important; } /* --- Liquid Glass：淺色 tint --- */ :root[data-theme="light"] .glass-panel { background: rgba(255, 255, 255, 0.6); border-color: rgba(15, 23, 42, 0.08); box-shadow: 0 8px 32px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7); } :root[data-theme="light"] .glass-panel::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent); } :root[data-theme="light"] .dse-input-bar { background: rgba(255, 255, 255, 0.6); border-color: rgba(15, 23, 42, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); } :root[data-theme="light"] .dse-input-tool { color: #475569; background: rgba(15, 23, 42, 0.05); border-color: rgba(15, 23, 42, 0.08); } :root[data-theme="light"] .dse-input-tool:hover { color: #0c4a6e; background: rgba(56, 189, 248, 0.16); } :root[data-theme="light"] .dse-input-field { background: rgba(255, 255, 255, 0.85); border-color: rgba(15, 23, 42, 0.1); } :root[data-theme="light"] #dseChatInput { color: #0f172a !important; } /* 淺色玻璃高光收細，唔好洗白底下文字 */ :root[data-theme="light"] .glass-panel::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent); } /* ============================================================ * Light mode — 對比修正（字 / badge / 強調） * ============================================================ */ /* badge 淺青字喺近白底太淺 → 加深 */ :root[data-theme="light"] .cyber-badge--primary { color: #0369a1; border-color: rgba(3,105,161,0.28); background: rgba(3,105,161,0.07); } :root[data-theme="light"] .cyber-badge--success { color: #047857; border-color: rgba(4,120,87,0.28); background: rgba(4,120,87,0.07); } :root[data-theme="light"] .cyber-badge--warning { color: #b45309; border-color: rgba(180,83,9,0.28); background: rgba(180,83,9,0.07); } :root[data-theme="light"] .cyber-badge--danger { color: #b91c1c; border-color: rgba(185,28,28,0.28); background: rgba(185,28,28,0.07); } :root[data-theme="light"] .cyber-badge--accent { color: #6d28d9; border-color: rgba(109,40,217,0.28); background: rgba(109,40,217,0.07); } /* AI 泡泡正文：index.html inline `.text-white{color:white!important}` 喺淺底睇唔到字。 AI 泡泡用 bg-gray-700（light 已 remap 成淺底），所以泡泡內 .text-white 文字必須轉深。用較高 specificity + !important 鬥贏 inline !important。*/ :root[data-theme="light"] .ai-message .message-content.text-white, :root[data-theme="light"] .ai-message .text-white, :root[data-theme="light"] .bg-gray-700 .message-content, :root[data-theme="light"] .bg-gray-700.text-white { color: #0f172a !important; } /* 用戶泡泡係 bg-cyan-600（深青）→ 保留白字 */ :root[data-theme="light"] .user-message .text-white, :root[data-theme="light"] [class*="bg-cyan-6"] .message-content { color: #ffffff !important; } /* AI 回覆富文本：斜體淺灰(#cbd5e1)喺淺底睇唔到 → 轉深 */ :root[data-theme="light"] .message-content em, :root[data-theme="light"] .ai-reply em, :root[data-theme="light"] .saved-qa-content em { color: #475569; } /* AI 回覆 h3 淺藍(#63b3ed)喺淺底偏淺 → 加深少少 */ :root[data-theme="light"] .ai-reply h3, :root[data-theme="light"] .message-content h3, :root[data-theme="light"] .saved-qa-content h3 { color: #0369a1; } /* 純青/紫標題色喺淺底偏淺 → 統一加深，仍保留品牌色感 */ :root[data-theme="light"] .text-cyan-400, :root[data-theme="light"] .text-cyan-300 { color: #0284c7; } :root[data-theme="light"] .text-purple-400, :root[data-theme="light"] .text-purple-300 { color: #7c3aed; } :root[data-theme="light"] .text-green-400 { color: #059669; } :root[data-theme="light"] .text-yellow-400 { color: #b45309; } :root[data-theme="light"] .text-red-400 { color: #dc2626; } /* 但彩色按鈕（有 bg-*）內嘅文字唔受上面影響：保留白字 */ :root[data-theme="light"] [class*="bg-cyan-"].text-cyan-400, :root[data-theme="light"] [class*="bg-purple-"].text-purple-400 { color: #fff; } /* 帳戶管理表單輸入框：淺色 tint */ :root[data-theme="light"] .acct-input { background: rgba(255, 255, 255, 0.85); border-color: rgba(15, 23, 42, 0.14); color: #0f172a; } :root[data-theme="light"] .acct-input:focus { background: #ffffff; border-color: var(--c-primary); } :root[data-theme="light"] .acct-input::placeholder { color: #94a3b8; } :root[data-theme="light"] .acct-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230369a1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); } /* ============================================================ * Light mode — 漸變標題 .t-display / .t-kicker * index.html inline `.t-display` 用淺白→淺藍→淺紫漸變，喺淺底睇唔清。 * 淺色模式換成深藍→靛藍→紫嘅高對比漸變（去除淺藍）。 * ============================================================ */ :root[data-theme="light"] .t-display { background: linear-gradient(120deg, #0369a1, #4338ca 52%, #7c3aed) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } :root[data-theme="light"] .t-kicker { background: linear-gradient(90deg, #0369a1, #6d28d9, #0369a1) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* .t-gradient（DSEPHY.AI 嘅 .AI 等）若用淺色漸變一併加深 */ :root[data-theme="light"] .t-gradient { background: linear-gradient(120deg, #0369a1, #7c3aed) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* ============================================================ * Light mode — KaTeX 數式顏色 * KaTeX span 繼承自父層；AI 泡泡 inline `.text-white` 令數式變白， * 喺淺底完全睇唔到。強制 AI / 已儲存 / 富文本區域嘅數式為深色。 * ============================================================ */ :root[data-theme="light"] .message-content .katex, :root[data-theme="light"] .message-content .katex *, :root[data-theme="light"] .ai-reply .katex, :root[data-theme="light"] .ai-reply .katex *, :root[data-theme="light"] .saved-qa-content .katex, :root[data-theme="light"] .saved-qa-content .katex *, :root[data-theme="light"] .ai-message .katex, :root[data-theme="light"] .ai-message .katex * { color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; } /* code / pre / 行內數式 fallback 文字 */ :root[data-theme="light"] .message-content code, :root[data-theme="light"] .ai-reply code, :root[data-theme="light"] .saved-qa-content code { color: #0f172a !important; background: rgba(15, 23, 42, 0.06); } /* 用戶泡泡（深青底）內嘅數式保留白字 */ :root[data-theme="light"] .user-message .katex, :root[data-theme="light"] .user-message .katex *, :root[data-theme="light"] [class*="bg-cyan-6"] .katex, :root[data-theme="light"] [class*="bg-cyan-6"] .katex * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }