/* Tenzy — single token authority (matte black + neutral grey chrome). Code syntax colors live on code surfaces only (IDE / hljs), not global UI. */ /* auth-guard.js sets data-auth-verified on ; auth.html has no codii-app class so it stays visible */ html.codii-app:not([data-auth-verified='1']) body { visibility: hidden; } :root, html.codii-app { /* Typography */ --font-ui: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif; --font-heading: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace; --font-code: var(--font-mono); --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --lh-tight: 1.25; --lh-normal: 1.52; --lh-relaxed: 1.68; /* Spacing — 8px rhythm */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-5: 2.5rem; --space-6: 3rem; --space-7: 3.5rem; --space-8: 4rem; --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-6); --space-xl: var(--space-8); /* Radius — slightly rounder for a softer feel */ --radius-sm: 6px; --radius-md: 9px; --radius-lg: 12px; --radius-xl: 14px; --radius-pill: 999px; --border-radius: var(--radius-md); /* Motion */ --motion-fast: 140ms; --motion-base: 200ms; --motion-slow: 260ms; --ease-standard: cubic-bezier(0.25, 0.08, 0.25, 1); --ease-decelerate: cubic-bezier(0, 0, 0.2, 1); --app-transition: var(--motion-base) var(--ease-standard); /* Elevation — soft depth, not harsh */ --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.05), 0 6px 20px rgba(0, 0, 0, 0.28); --shadow-md: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 28px rgba(0, 0, 0, 0.32); --shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.07), 0 16px 40px rgba(0, 0, 0, 0.38); --shadow-soft: var(--shadow-sm); --shadow-panel: var(--shadow-md); /* Dark (default) — near-black zinc scale + readable contrast */ --bg-app: #09090b; --bg-shell: #0c0c0f; --bg-surface-1: #18181b; --bg-surface-2: #1f1f23; --bg-surface-3: #27272a; --bg-surface-4: #2f2f33; --bg-hover: #3f3f46; --bg-active: #52525b; --bg-code: #0c0c0e; --bg-terminal: #0a0a0c; --bg-overlay: rgba(0, 0, 0, 0.78); --bg-editor: var(--bg-code); --border-subtle: rgba(255, 255, 255, 0.055); --border-default: rgba(255, 255, 255, 0.095); --border-strong: rgba(255, 255, 255, 0.17); --border-focus: #a1a1aa; --border-soft: var(--border-default); --text-primary: #fafafa; --text-secondary: #a1a1aa; --text-muted: #71717a; --text-inverse: #0a0a0a; --text-code: #d9d9d9; --text-success: #9a9a9a; --text-warning: #a89a82; --text-danger: #b09090; --accent: #d4d4d8; --accent-hover: #e4e4e7; --accent-soft: rgba(244, 244, 245, 0.1); --accent-strong: #f4f4f5; --cta-bg: #f4f4f5; --cta-bg-hover: #e4e4e7; --cta-fg: #18181b; --cta-border: rgba(255, 255, 255, 0.22); --success: #8a9a8e; --warning: #9a917e; --danger: #9a8588; --info: #8a8a8a; --focus-ring: 0 0 0 2px rgba(212, 212, 216, 0.28); --app-titlebar-height: 40px; --shell-sidebar-width: 220px; /* compatibility aliases used by existing styles */ --surface-0: var(--bg-app); --surface-1: var(--bg-surface-1); --surface-2: var(--bg-surface-2); --surface-3: var(--bg-surface-3); --surface-4: var(--bg-surface-4); --surface-glass: rgba(23, 24, 26, 0.72); --primary-bg: var(--bg-app); --secondary-bg: var(--bg-surface-1); --card-bg: var(--bg-surface-2); --card-bg-elevated: var(--bg-surface-3); --glass-bg: rgba(26, 27, 30, 0.72); --border-color: var(--border-default); --text-primary-legacy: var(--text-primary); --text-secondary-legacy: var(--text-secondary); --text-muted-legacy: var(--text-muted); --accent-primary: var(--accent); --accent-secondary: var(--accent-hover); --accent-tertiary: #8c929a; --error: var(--danger); --app-bg: var(--bg-app); --app-bg-alt: var(--bg-shell); --app-bg-subtle: var(--bg-surface-1); --app-surface: var(--bg-surface-2); --app-surface-hover: var(--bg-hover); --app-surface-active: var(--bg-active); --app-border: var(--border-default); --app-border-strong: var(--border-strong); --app-text: var(--text-primary); --app-text-secondary: var(--text-secondary); --app-text-muted: var(--text-muted); --app-accent: var(--accent); --app-accent-hover: var(--accent-hover); --app-accent-muted: var(--accent-soft); --app-success: var(--success); --app-error: var(--danger); --app-radius-sm: var(--radius-sm); --app-radius: var(--radius-md); --app-radius-lg: var(--radius-lg); /* semantic aliases */ --color-bg: var(--bg-app); --color-surface: var(--bg-surface-2); --color-surface-elevated: var(--bg-surface-3); --color-border: var(--border-default); --color-text: var(--text-primary); --color-text-secondary: var(--text-secondary); --color-text-muted: var(--text-muted); --color-accent: var(--accent); --color-accent-strong: var(--accent-hover); } html.codii-app[data-theme="dark"] { color-scheme: dark; --bg-app: #09090b; --bg-shell: #0c0c0f; --bg-surface-1: #18181b; --bg-surface-2: #1f1f23; --bg-surface-3: #27272a; --bg-surface-4: #2f2f33; --bg-hover: #3f3f46; --bg-active: #52525b; --bg-code: #0c0c0e; --bg-terminal: #0a0a0c; --bg-editor: var(--bg-code); --bg-overlay: rgba(0, 0, 0, 0.78); --border-subtle: rgba(255, 255, 255, 0.055); --border-default: rgba(255, 255, 255, 0.095); --border-strong: rgba(255, 255, 255, 0.17); --border-focus: #a1a1aa; --border-soft: var(--border-default); --text-primary: #fafafa; --text-secondary: #a1a1aa; --text-muted: #71717a; --cta-bg: #f4f4f5; --cta-bg-hover: #e4e4e7; --cta-fg: #18181b; --cta-border: rgba(255, 255, 255, 0.22); } html.codii-app[data-theme="light"] { color-scheme: light; --bg-app: #f2f4f7; --bg-shell: #e8ebf0; --bg-surface-1: #ffffff; --bg-surface-2: #f0f0f0; --bg-surface-3: #ececec; --bg-surface-4: #e4e4e4; --bg-hover: #eceff4; --bg-active: #e3e8ef; --bg-code: #f5f8fc; --bg-terminal: #eef3f9; --bg-editor: var(--bg-code); --bg-overlay: rgba(20, 29, 44, 0.16); --border-subtle: rgba(42, 47, 57, 0.085); --border-default: rgba(42, 47, 57, 0.15); --border-strong: rgba(42, 47, 57, 0.26); --border-focus: rgba(98, 108, 123, 0.5); --border-soft: var(--border-default); --text-primary: #202020; --text-secondary: #454545; --text-muted: #5a5a5a; --text-inverse: #f7f9fc; --text-code: #1e2a3c; --text-success: #34795f; --text-warning: #94682a; --text-danger: #8e4054; --accent: #6a6a6a; --accent-hover: #5a5a5a; --accent-soft: rgba(0, 0, 0, 0.06); --accent-strong: #555555; --success: #5a6b5a; --warning: #7a6e52; --danger: #7a5a5e; --info: #6a6a6a; --focus-ring: 0 0 0 2px rgba(90, 90, 90, 0.45); --cta-bg: #18181b; --cta-bg-hover: #27272a; --cta-fg: #fafafa; --cta-border: rgba(0, 0, 0, 0.14); } html.codii-app, html.codii-app body { margin: 0; min-height: 100%; background: var(--bg-app); color: var(--text-primary); } html.codii-app body { font-family: var(--font-ui); line-height: 1.55; } html.codii-app[data-theme="dark"] body { background: var(--bg-app); } html.codii-app[data-theme="light"] body { background: var(--bg-app); } /* Dark: no texture / noise — solid matte only */ html.codii-app[data-theme="dark"] body::after { content: none; display: none; } html.codii-app[data-theme="light"] body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); } html.codii-app .app-container { min-height: 100vh; background: transparent; } html.codii-app .app-container::before, html.codii-app .app-container::after { display: none !important; content: none !important; } html.codii-app * { scrollbar-width: thin; scrollbar-color: rgba(130, 132, 140, 0.35) transparent; } html.codii-app *::-webkit-scrollbar { width: 10px; height: 10px; } html.codii-app *::-webkit-scrollbar-thumb { border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; background-color: rgba(130, 132, 140, 0.32); } html.codii-app *::-webkit-scrollbar-track { background: transparent; } html.codii-app a { color: var(--text-secondary); } html.codii-app a:hover { color: var(--text-primary); } html.codii-app .panel { background: var(--bg-surface-2); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-3); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 40px rgba(0, 0, 0, 0.22); } html.codii-app .topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: 48px; background: var(--bg-surface-1); border-bottom: 1px solid var(--color-border); padding: 0 var(--space-md); } html.codii-app .sidebar { background: var(--bg-surface-1); border-right: 1px solid var(--color-border); } html.codii-app .editor-panel { background: var(--bg-editor); border: 1px solid var(--color-border); border-radius: var(--radius-sm); } html.codii-app .btn, html.codii-app .btn-primary, html.codii-app .btn-secondary { min-height: 38px; border-radius: var(--radius-sm); transition: filter .2s ease, transform .12s ease, background var(--app-transition), border-color var(--app-transition), color var(--app-transition), box-shadow var(--app-transition); } html.codii-app .btn:hover, html.codii-app .btn-primary:hover, html.codii-app .btn-secondary:hover { filter: brightness(1.04); } html.codii-app .btn:active, html.codii-app .btn-primary:active, html.codii-app .btn-secondary:active { transform: translateY(1px); } html.codii-app .main-content, html.codii-app .settings-container { background: transparent; color: var(--text-primary); } html.codii-app .header, html.codii-app .header-shell { background: transparent; box-shadow: none; border: 0; } html.codii-app .header-content { background: var(--bg-surface-1); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 10px 36px rgba(0, 0, 0, 0.2); } html.codii-app .logo-wordmark h1, html.codii-app .logo-name, html.codii-app .logo-subtitle, html.codii-app .section-header h3, html.codii-app .settings-title, html.codii-app .pricing-title { color: var(--text-primary); background: none; -webkit-text-fill-color: currentColor; } html.codii-app .logo-subtitle, html.codii-app .logo-subtitle, html.codii-app .section-header p, html.codii-app .settings-hint, html.codii-app .pricing-list, html.codii-app .stat-label, html.codii-app .lib-meta, html.codii-app .small { color: var(--text-muted); } html.codii-app :focus-visible:not(.codii-app-search-input):not(.filter-search) { outline: 2px solid var(--border-focus); outline-offset: 2px; box-shadow: var(--focus-ring); } html.codii-app label.codii-app-search-field:focus-visible { outline: none !important; box-shadow: none !important; } html.codii-app button, html.codii-app .btn-primary, html.codii-app .btn-secondary, html.codii-app .search-button, html.codii-app .nav-link, html.codii-app .filter-select, html.codii-app .filter-search, html.codii-app .settings-input, html.codii-app .admin-input, html.codii-app .admin-select, html.codii-app .admin-textarea { border-radius: var(--radius-sm); transition: background var(--app-transition), border-color var(--app-transition), color var(--app-transition), box-shadow var(--app-transition); } html.codii-app .btn-primary, html.codii-app .btn-secondary, html.codii-app .search-button, html.codii-app .start-guide-btn { min-height: 40px; padding: 0.55rem 0.95rem; font-size: var(--fs-sm); font-weight: 620; letter-spacing: 0.01em; } html.codii-app.codii-app-page-settings .settings-actions { gap: var(--space-2); row-gap: var(--space-2); margin-top: 1.75rem; } html.codii-app.codii-app-page-settings .settings-actions .btn-primary, html.codii-app.codii-app-page-settings .settings-actions .btn-secondary { min-height: 44px; padding: 0.62rem 1.35rem; } html.codii-app .logo-clickable, html.codii-app .btn-file-pick { cursor: pointer; } html.codii-app .premium-main { max-width: 1040px; margin: 0 auto; padding-top: 3rem; } html.codii-app .recreate-intake-panel { margin-top: 0.5rem; } html.codii-app .recreate-input-row { justify-content: space-between; } html.codii-app .recreate-import-row { display: flex; gap: 0.5rem; flex: 1; } html.codii-app .recreate-import-input { flex: 1; } html.codii-app .recreate-tip-row { margin-top: 0.4rem; display: flex; align-items: center; gap: 0.5rem; } html.codii-app .recreate-selection-info { margin-top: 1rem; } html.codii-app .recreate-complexity-title { font-weight: 600; } html.codii-app .recreate-tree-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.35rem; } html.codii-app .recreate-library-header { margin-top: 2rem; } html.codii-app .local-folder-path { margin-top: 0.35rem; } html.codii-app .ide-inline-panel { transition: opacity .2s ease; } html.codii-app .ide-inline-panel.is-fading { opacity: 0; } html.codii-app .ide-workbench-root { position: relative; } html.codii-app .btn-primary { background: var(--cta-bg); border: 1px solid var(--cta-border); color: var(--cta-fg); font-weight: 600; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 6px 20px rgba(0, 0, 0, 0.28); } html.codii-app .btn-primary:hover { background: var(--cta-bg-hover); border-color: var(--cta-border); color: var(--cta-fg); filter: none; } html.codii-app .btn-primary:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset; } html.codii-app .btn-secondary, html.codii-app .search-button, html.codii-app .filter-select, html.codii-app .filter-search, html.codii-app .settings-input, html.codii-app .admin-input, html.codii-app .admin-select, html.codii-app .admin-textarea, html.codii-app .lesson-toolbar, html.codii-app .dropzone, html.codii-app .tree-card, html.codii-app .lib-card, html.codii-app .pricing-card, html.codii-app .settings-card, html.codii-app .admin-card, html.codii-app .language-card, html.codii-app .lesson-card, html.codii-app .stat-card, html.codii-app .welcome-card, html.codii-app .section-header, html.codii-app .languages-section, html.codii-app .search-panel { background: var(--bg-surface-2); border: 1px solid var(--border-default); color: var(--text-secondary); box-shadow: none; } html.codii-app .btn-secondary:hover, html.codii-app .search-button:hover, html.codii-app .language-card:hover, html.codii-app .lesson-card:hover, html.codii-app .lib-card:hover, html.codii-app .pricing-card:hover, html.codii-app .settings-card:hover, html.codii-app .admin-card:hover, html.codii-app .stat-card:hover { background: var(--bg-surface-3); border-color: var(--border-strong); color: var(--text-primary); } html.codii-app .search-overlay { background: var(--bg-overlay); } html.codii-app .welcome-card, html.codii-app .languages-section, html.codii-app .section-header, html.codii-app .lesson-toolbar, html.codii-app .settings-card, html.codii-app .pricing-card, html.codii-app .admin-card, html.codii-app .dropzone, html.codii-app .tree-card, html.codii-app .lib-card, html.codii-app .search-panel { border-radius: var(--radius-lg); } html.codii-app .language-card, html.codii-app .lesson-card, html.codii-app .stat-card, html.codii-app .metric-card { border-radius: var(--radius-md); } html.codii-app .language-card, html.codii-app .lesson-card, html.codii-app .metric-card, html.codii-app .stat-card { background: var(--bg-surface-2); } html.codii-app .language-logo:not(.overview-hero-marquee-logo), html.codii-app .lib-icon { background: var(--bg-surface-3); border: 1px solid var(--border-soft); } html.codii-app .hero-pill, html.codii-app .product-tag, html.codii-app .filter-check, html.codii-app .ide-project-meta { background: color-mix(in oklab, var(--accent-soft) 82%, transparent); border: 1px solid var(--border-soft); color: var(--text-secondary); } html.codii-app .nav-link.active, html.codii-app .primary-nav .nav-link.active, html.codii-app .start-guide-btn:active, html.codii-app .start-guide-btn:hover { color: var(--text-primary); background: color-mix(in oklab, var(--accent-soft) 92%, var(--bg-surface-2)); border-color: var(--border-focus); } html.codii-app .settings-input, html.codii-app .filter-search, html.codii-app input, html.codii-app textarea, html.codii-app select { background: var(--bg-surface-1); border: 1px solid var(--border-soft); color: var(--text-primary); } html.codii-app input::placeholder, html.codii-app textarea::placeholder { color: var(--text-muted); } html.codii-app .profile-avatar { background: var(--bg-surface-3); border: 1px solid var(--border-soft); color: var(--text-secondary); } /* Desktop shell */ html.codii-app #codii-app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--shell-sidebar-width) minmax(0, 1fr); background: var(--bg-app); } html.codii-app .codii-app-sidebar { display: flex; flex-direction: column; min-height: 100vh; background: var(--bg-shell); border-right: 1px solid var(--border-soft); } html.codii-app .codii-app-sidebar-brand { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 0.85rem 0.75rem; border-bottom: 1px solid var(--border-soft); } html.codii-app .codii-app-sidebar-logo { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; } html.codii-app .codii-app-sidebar-title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); } html.codii-app .codii-app-sidebar-subtitle { font-size: 0.73rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); } html.codii-app .codii-app-sidebar-nav { display: grid; gap: 0.16rem; padding: 0.5rem 0.5rem; } html.codii-app .codii-app-nav-item { display: flex; align-items: center; gap: 0.72rem; min-height: 36px; padding: 0.45rem 0.62rem; border-radius: var(--radius-md); border: 1px solid transparent; color: var(--text-secondary); text-decoration: none; font-weight: 560; font-size: 0.86rem; } html.codii-app .codii-app-nav-item:hover { background: var(--bg-surface-3); border-color: var(--border-soft); color: var(--text-primary); } html.codii-app .codii-app-nav-item.active { background: color-mix(in oklab, var(--accent-soft) 92%, var(--bg-surface-2)); border-color: var(--border-focus); color: var(--text-primary); } html.codii-app .codii-app-nav-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: currentColor; } html.codii-app .codii-app-nav-icon svg { width: 17px; height: 17px; } html.codii-app .codii-app-nav-divider { height: 1px; margin: 0.35rem 0.6rem; background: var(--border-soft); } html.codii-app .codii-app-sidebar-search { padding: 0.55rem 0.5rem 0.25rem; } html.codii-app .codii-app-sidebar-nav-primary { padding-top: 0.3rem; flex: 1 1 auto; align-content: start; } html.codii-app .codii-app-sidebar-nav-secondary { padding-top: 0.25rem; margin-top: auto; } html.codii-app .codii-app-sidebar-footer { margin-top: auto; padding: var(--space-2) var(--space-2) var(--space-3); border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 0.2rem; } html.codii-app .codii-app-sidebar-foot-link { font-size: 0.72rem; font-weight: 500; color: var(--text-muted); text-decoration: none; padding: 0.2rem 0.35rem; border-radius: var(--radius-sm); } html.codii-app .codii-app-sidebar-foot-link:hover { color: var(--text-secondary); background: var(--bg-surface-2); } html.codii-app .codii-app-search-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding: 0 0.55rem; background: var(--bg-surface-1); border: 1px solid var(--border-default); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 0.82rem; font-weight: 520; } html.codii-app .codii-app-search-btn:hover { background: var(--bg-hover); border-color: var(--border-strong); color: var(--text-primary); } html.codii-app .codii-app-search-field { width: 100%; display: flex; align-items: center; gap: 0.44rem; min-height: 34px; padding: 0 0.52rem; background: var(--bg-surface-1); border: 1px solid var(--border-default); border-radius: var(--radius-sm); color: var(--text-secondary); outline: none !important; outline-offset: 0 !important; } html.codii-app label.codii-app-search-field:focus, html.codii-app label.codii-app-search-field:focus-within, html.codii-app .codii-app-search-field:focus-within { border-color: var(--border-default); box-shadow: none !important; outline: none !important; outline-offset: 0 !important; } html.codii-app .codii-app-search-field svg { width: 14px; height: 14px; color: var(--text-muted); flex: 0 0 auto; } html.codii-app .codii-app-search-input { flex: 1 1 auto; min-width: 0; height: 30px; background: transparent; border: 0; color: var(--text-primary); font: 520 0.8rem/1 var(--font-ui); padding: 0; -webkit-tap-highlight-color: transparent; caret-color: var(--text-primary); } html.codii-app .codii-app-search-input::placeholder { color: var(--text-muted); } html.codii-app .codii-app-search-input:focus, html.codii-app .codii-app-search-input:focus-visible, html.codii-app .codii-app-search-input:active { outline: none !important; outline-offset: 0 !important; box-shadow: none !important; border: 0 !important; } html.codii-app .codii-app-search-input::-webkit-search-decoration, html.codii-app .codii-app-search-input::-webkit-search-results-button, html.codii-app .codii-app-search-input::-webkit-search-results-decoration, html.codii-app .codii-app-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none !important; margin: 0; padding: 0; } html.codii-app .codii-app-search-input::-moz-focus-inner { border: 0 !important; padding: 0 !important; } html.codii-app .codii-app-search-btn kbd { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; padding: 0.1rem 0.3rem; border-radius: 6px; border: 1px solid var(--border-soft); background: var(--bg-surface-1); } html.codii-app .codii-app-main { min-width: 0; min-height: 100vh; display: grid; grid-template-rows: var(--app-titlebar-height) 50px minmax(0, 1fr); background: transparent; } html.codii-app .codii-app-titlebar { display: flex; align-items: stretch; justify-content: space-between; min-height: var(--app-titlebar-height); height: var(--app-titlebar-height); background: var(--bg-surface-1); border-bottom: 1px solid var(--border-soft); padding: 0 0 0 0.65rem; color: var(--text-secondary); } html.codii-app .codii-app-titlebar-brand { display: inline-flex; align-items: center; align-self: center; gap: 0.5rem; font-size: 0.9rem; color: var(--text-primary); font-weight: 550; } html.codii-app .codii-app-titlebar-icon { width: 18px; height: 18px; border-radius: 50%; } html.codii-app .codii-app-titlebar-controls { display: inline-flex; align-items: stretch; align-self: stretch; height: 100%; } html.codii-app .codii-app-titlebar-btn { width: 48px; min-width: 48px; border: 0; border-left: 1px solid var(--border-subtle); background: transparent; color: rgba(250, 250, 250, 0.72); display: inline-flex; align-items: center; justify-content: center; } html.codii-app .codii-app-titlebar-btn svg { width: 15px; height: 15px; stroke-width: 2; } html.codii-app .codii-app-titlebar-btn:hover { background: var(--bg-surface-3); color: #fafafa; } html.codii-app .codii-app-titlebar-btn-close { color: #f87171 !important; } html.codii-app .codii-app-titlebar-btn-close:hover { background: color-mix(in oklab, #ef4444 75%, var(--bg-surface-2)) !important; color: #fff !important; } html.codii-app .codii-app-topbar { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; min-height: 48px; padding: 0 0.85rem; border-bottom: 1px solid var(--border-soft); background: var(--bg-surface-1); } html.codii-app .codii-app-topbar h1 { margin: 0; margin-inline-end: auto; font-size: 0.95rem; font-weight: 620; color: var(--text-primary); } /* Topbar plan pill — Practice OS tokens (not marketing blues) */ html.codii-app .codii-app-topbar .plan-usage { background: var(--bg-surface-2); border: 1px solid var(--border-default); box-shadow: none; } html.codii-app .codii-app-topbar .plan-usage--free #planTierLabel { font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); } html.codii-app .codii-app-topbar .plan-usage--free .plan-usage-track { background: var(--bg-surface-1); border: 1px solid var(--border-subtle); } html.codii-app .codii-app-topbar .plan-usage--free .plan-usage-bar { background: color-mix(in oklab, var(--text-muted) 50%, var(--bg-surface-3)); } html.codii-app .codii-app-topbar .plan-usage--free .plan-usage-label { color: var(--text-muted); } html.codii-app .codii-app-topbar .plan-usage--premium { border-color: color-mix(in oklab, var(--accent) 38%, var(--border-default)); } html.codii-app .codii-app-topbar .plan-usage--premium #planTierLabel { font-size: 0.8125rem; font-weight: 650; color: var(--text-primary); } html.codii-app .codii-app-topbar .plan-usage--premium .plan-usage-track { background: var(--bg-surface-1); border: 1px solid color-mix(in oklab, var(--accent) 24%, var(--border-subtle)); } html.codii-app .codii-app-topbar .plan-usage--premium .plan-usage-bar { background: linear-gradient( 90deg, color-mix(in oklab, var(--accent) 55%, transparent), color-mix(in oklab, var(--accent) 88%, var(--bg-surface-3)) ); } html.codii-app .codii-app-topbar .plan-usage--premium .plan-usage-label { color: var(--text-secondary); } html.codii-app .codii-app-topbar .plan-usage--infinite { border-color: color-mix(in oklab, #22c55e 45%, var(--border-default)); background: linear-gradient( 145deg, color-mix(in oklab, #14532d 32%, var(--bg-surface-2)) 0%, var(--bg-surface-2) 50%, color-mix(in oklab, #166534 30%, var(--bg-surface-2)) 100% ); background-size: 200% 200%; animation: codii-plan-infinite-pill-bg 5s ease infinite; } html.codii-app .codii-app-topbar .plan-usage--infinite #planTierLabel { display: inline-block; font-size: 0.875rem; font-weight: 750; letter-spacing: 0.02em; background: linear-gradient( 95deg, #bbf7d0, #4ade80, #22c55e, #15803d, #4ade80, #bbf7d0 ); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: codii-plan-infinite-text 3.2s linear infinite; } @supports not (background-clip: text) { html.codii-app .codii-app-topbar .plan-usage--infinite #planTierLabel { color: #4ade80; background: none; animation: none; } } @keyframes codii-plan-infinite-text { 0% { background-position: 0% 50%; } 100% { background-position: 240% 50%; } } @keyframes codii-plan-infinite-pill-bg { 0%, 100% { background-position: 0% 40%; } 50% { background-position: 100% 60%; } } html.codii-app[data-theme='light'] .codii-app-topbar .plan-usage--infinite { background: linear-gradient( 145deg, color-mix(in oklab, #bbf7d0 55%, var(--bg-surface-2)) 0%, var(--bg-surface-2) 50%, color-mix(in oklab, #86efac 40%, var(--bg-surface-2)) 100% ); background-size: 200% 200%; } @media (prefers-reduced-motion: reduce) { html.codii-app .codii-app-topbar .plan-usage--infinite, html.codii-app .codii-app-topbar .plan-usage--infinite #planTierLabel, html.codii-app .overview-plan-chip--infinite { animation: none !important; } html.codii-app .codii-app-topbar .plan-usage--infinite #planTierLabel { color: #4ade80; background: none; -webkit-text-fill-color: currentColor; } } html.codii-app .codii-app-content { min-width: 0; min-height: 0; padding: 0; background: transparent; } html.codii-app .codii-app-page-root { min-width: 0; min-height: 0; padding: 0; } /* IDE page polish */ html.codii-app.codii-app-page-ide, html.codii-app.codii-app-page-ide body, html.codii-app.codii-app-page-ide .codii-app-content, html.codii-app.codii-app-page-ide #ideLanding, html.codii-app.codii-app-page-ide #ideWorkspace, html.codii-app.codii-app-page-ide .ide-shell { background: var(--bg-surface-1); } html.codii-app.codii-app-page-ide .ide-card, html.codii-app.codii-app-page-ide .ide-dashboard-head, html.codii-app.codii-app-page-ide .ide-project-card { background: var(--bg-surface-2); border-color: var(--border-soft); border-radius: var(--radius-md); box-shadow: none; } html.codii-app.codii-app-page-ide .ide-dashboard-head, html.codii-app.codii-app-page-ide .ide-project-card { background-image: none; } html.codii-app.codii-app-page-ide .ide-workspace { background: var(--bg-surface-1); } html.codii-app.codii-app-page-ide .ide-topbar, html.codii-app.codii-app-page-ide .ide-sidebar, html.codii-app.codii-app-page-ide .ide-editor-shell, html.codii-app.codii-app-page-ide .ide-terminal-shell, html.codii-app.codii-app-page-ide .ide-right-zone { background: var(--bg-surface-2); border-color: var(--border-soft); } html.codii-app.codii-app-page-ide .ide-editor-stage { background: var(--bg-editor); } html.codii-app.codii-app-page-ide .ide-terminal-shell, html.codii-app.codii-app-page-ide .ide-terminal-body, html.codii-app.codii-app-page-ide .ide-terminal-input { background: var(--bg-terminal); } html.codii-app.codii-app-page-ide .ide-right-zone { background: var(--bg-surface-1); } html.codii-app.codii-app-page-ide .ide-btn { min-height: 38px; border-radius: var(--radius-sm); border: 1px solid var(--border-soft); background: var(--bg-surface-3); color: var(--text-secondary); padding: 0.45rem 0.75rem; font-size: 0.78rem; font-weight: 620; } html.codii-app.codii-app-page-ide .ide-btn:hover { background: var(--bg-surface-4); border-color: var(--border-strong); color: var(--text-primary); } html.codii-app.codii-app-page-ide .ide-btn.primary { background: var(--bg-surface-3); border-color: color-mix(in oklab, var(--accent-soft) 52%, var(--border-strong)); color: var(--text-primary); } html.codii-app.codii-app-page-ide .ide-btn.subtle { background: var(--bg-surface-1); color: var(--text-secondary); } html.codii-app.codii-app-page-ide .ide-btn.danger { background: color-mix(in oklab, var(--danger) 34%, var(--bg-surface-2)); border-color: color-mix(in oklab, var(--danger) 62%, var(--border-strong)); color: #ffe2ea; } html.codii-app.codii-app-page-ide .ide-topbar-actions { gap: 0.45rem; } html.codii-app.codii-app-page-ide .ide-top-primary { min-width: 106px; } html.codii-app.codii-app-page-ide .ide-action-menu-wrap { position: relative; } html.codii-app.codii-app-page-ide .ide-action-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px; display: grid; gap: 2px; background: var(--bg-surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 0.28rem; box-shadow: var(--shadow-soft); z-index: 22; } html.codii-app.codii-app-page-ide .ide-action-menu-item { border: 1px solid transparent; border-radius: 6px; min-height: 34px; background: transparent; color: var(--text-secondary); text-align: left; padding: 0 0.6rem; font: 600 0.76rem/1 var(--app-ui-font, 'Inter', sans-serif); cursor: pointer; } html.codii-app.codii-app-page-ide .ide-action-menu-item:hover { background: var(--bg-surface-3); border-color: var(--border-soft); color: var(--text-primary); } html.codii-app.codii-app-page-ide .ide-action-menu.hidden { display: none; } html.codii-app.codii-app-page-ide .ide-side-tab, html.codii-app.codii-app-page-ide .ide-file-item, html.codii-app.codii-app-page-ide .ide-project-open, html.codii-app.codii-app-page-ide .ide-project-delete, html.codii-app.codii-app-page-ide .ide-chip, html.codii-app.codii-app-page-ide .ide-guide-actions .ide-btn { min-height: 34px; } html.codii-app.codii-app-page-ide .ide-prompt-input, html.codii-app.codii-app-page-ide .ide-ask-ai-input, html.codii-app.codii-app-page-ide .ide-coach-select, html.codii-app.codii-app-page-ide #ideTerminalInput { background: var(--bg-surface-1); border-color: var(--border-soft); color: var(--text-primary); } html.codii-app.codii-app-page-ide #ideTerminalInput::placeholder, html.codii-app.codii-app-page-ide .ide-prompt-input::placeholder, html.codii-app.codii-app-page-ide .ide-ask-ai-input::placeholder { color: var(--text-muted); } html.codii-app.codii-app-page-ide .ide-guided-actions, html.codii-app.codii-app-page-ide .ide-power-tools, html.codii-app.codii-app-page-ide .ide-guided-progress, html.codii-app.codii-app-page-ide .ide-editor-head, html.codii-app.codii-app-page-ide .ide-prompt-strip, html.codii-app.codii-app-page-ide .ide-terminal-head, html.codii-app.codii-app-page-ide .ide-terminal-assist { background: var(--bg-surface-2); border-color: var(--border-soft); } html.codii-app.codii-app-page-ide .ide-inline-panel { background: var(--bg-surface-2); border-bottom-color: var(--border-soft); } html.codii-app.codii-app-page-ide .ide-kickoff-panel { border-left: 2px solid color-mix(in oklab, var(--accent) 72%, var(--border-strong)); } html.codii-app.codii-app-page-ide .ide-stuck-panel { border-left: 2px solid color-mix(in oklab, var(--warning) 68%, var(--border-strong)); } html.codii-app.codii-app-page-ide .ide-recovery-panel { border-left: 2px solid color-mix(in oklab, var(--danger) 62%, var(--border-strong)); } html.codii-app.codii-app-page-ide .ide-readiness-panel { border-left: 2px solid color-mix(in oklab, var(--info) 62%, var(--border-strong)); } html.codii-app.codii-app-page-ide .ide-recap-panel { border-left: 2px solid color-mix(in oklab, var(--success) 66%, var(--border-strong)); } html.codii-app.codii-app-page-ide .ide-reopen-panel { border-left: 2px solid color-mix(in oklab, var(--text-muted) 68%, var(--border-strong)); } html.codii-app.codii-app-page-ide .ide-editor-stage { border-top: 1px solid var(--border-soft); } html.codii-app.codii-app-page-ide .ide-lesson-typing, html.codii-app.codii-app-page-ide .ide-target-pane, html.codii-app.codii-app-page-ide .ide-typing-pane, html.codii-app.codii-app-page-ide .ide-editor-fallback { font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace; font-size: 14px; line-height: 1.65; } html.codii-app.codii-app-page-ide .ide-target-pane { color: rgba(184, 180, 200, 0.56) !important; } html.codii-app.codii-app-page-ide .ide-typing-pane, html.codii-app.codii-app-page-ide .ide-editor-fallback { color: var(--text-primary) !important; caret-color: var(--text-primary) !important; } /* Guided typing: do not force a single color on the container — hljs token spans need distinct hues (VS Code–style). */ html.codii-app.codii-app-page-ide .ide-lesson-typing { color: #d4d4d4; caret-color: #d4d4d4; } html.codii-app.codii-app-page-ide .ide-lesson-typing .tp-current { background: color-mix(in oklab, var(--accent-soft) 85%, transparent); border-radius: 3px; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 45%, var(--border-default)); } html.codii-app.codii-app-page-ide .ide-lesson-typing .tp-future { opacity: 0.4; } html.codii-app.codii-app-page-ide .ide-lesson-typing .tp-correct { opacity: 1; } html.codii-app.codii-app-page-ide .ide-lesson-typing .tp-error, html.codii-app.codii-app-page-ide .ide-mismatch { background: color-mix(in oklab, var(--danger) 22%, transparent); color: #ffdce3 !important; text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--danger) 72%, var(--border-strong)); text-decoration-thickness: 1px; } html.codii-app.codii-app-page-ide .ide-lesson-typing .tp-line-focus { background: color-mix(in oklab, var(--accent-soft) 65%, transparent); } html.codii-app.codii-app-page-ide .ide-line-hint, html.codii-app.codii-app-page-ide #ideLineHint, html.codii-app.codii-app-page-ide #ideProgressText { color: var(--text-secondary); } html.codii-app.codii-app-page-ide .ide-progress-track { background: var(--bg-surface-1); } html.codii-app.codii-app-page-ide .ide-progress-track > div { background: var(--accent); } html.codii-app.codii-app-page-ide .ide-topbar-path, html.codii-app.codii-app-page-ide .ide-project-path, html.codii-app.codii-app-page-ide .ide-terminal-body, html.codii-app.codii-app-page-ide .ide-terminal-input { font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace; } html.codii-app.codii-app-page-ide .ide-right-zone-head, html.codii-app.codii-app-page-ide .ide-right-zone-note, html.codii-app.codii-app-page-ide .ide-right-zone-foot { color: var(--text-muted); } html.codii-app.codii-app-page-ide .ide-first-run .ide-card, html.codii-app.codii-app-page-ide #ideDashboard .ide-card { background: var(--bg-surface-2); border-color: var(--border-soft); } html.codii-app.codii-app-page-ide #ideDashboard .ide-project-card { background: var(--bg-surface-2); } html.codii-app.codii-app-page-ide #ideDashboard .ide-project-card:hover { background: var(--bg-surface-3); } html.codii-app.codii-app-page-ide #ideDashboard .ide-project-actions .ide-btn.danger { background: color-mix(in oklab, var(--danger) 34%, var(--bg-surface-2)); } html.codii-app .codii-app-page-root .welcome-card, html.codii-app .codii-app-page-root .hero-visual, html.codii-app .codii-app-page-root .hero-float, html.codii-app .codii-app-page-root .metric-card { background-image: none; } html.codii-app .codii-app-page-root .hero-visual, html.codii-app .codii-app-page-root .hero-float, html.codii-app .codii-app-page-root .metric-card, html.codii-app .codii-app-page-root .language-card, html.codii-app .codii-app-page-root .lesson-card { border-color: var(--border-soft); } html.codii-app .codii-app-page-root .language-card .language-stats, html.codii-app .codii-app-page-root .lesson-card .lesson-meta, html.codii-app .codii-app-page-root .lesson-card .lesson-progress { color: var(--text-muted); } html.codii-app .dropzone.dragover { border-color: color-mix(in oklab, var(--accent) 56%, var(--border-strong)); background: color-mix(in oklab, var(--accent-soft) 84%, var(--bg-surface-2)); } html.codii-app .complexity-card { background: var(--bg-surface-2); border: 1px solid var(--border-soft); } html.codii-app .complexity-badge.good { color: var(--text-success); background: color-mix(in oklab, var(--success) 22%, transparent); border-color: color-mix(in oklab, var(--success) 52%, var(--border-default)); } html.codii-app .complexity-badge.medium { color: var(--text-warning); background: color-mix(in oklab, var(--warning) 24%, transparent); border-color: color-mix(in oklab, var(--warning) 52%, var(--border-default)); } html.codii-app .complexity-badge.high { color: var(--text-danger); background: color-mix(in oklab, var(--danger) 26%, transparent); border-color: color-mix(in oklab, var(--danger) 58%, var(--border-default)); } html.codii-app .success-message { background: color-mix(in oklab, var(--success) 16%, transparent); border: 1px solid color-mix(in oklab, var(--success) 46%, var(--border-default)); color: color-mix(in oklab, var(--text-primary) 78%, var(--success)); } html.codii-app .error-message { background: color-mix(in oklab, var(--danger) 18%, transparent); border: 1px solid color-mix(in oklab, var(--danger) 48%, var(--border-default)); color: color-mix(in oklab, var(--text-primary) 82%, var(--danger)); } /* -------------------------------------------------------------------------- */ /* Matte desktop system unification (app mode only) */ /* -------------------------------------------------------------------------- */ html.codii-app #codii-app-shell { background: var(--bg-shell); } html.codii-app .codii-app-sidebar { background: var(--bg-shell); border-right: 1px solid var(--border-default); } html.codii-app .codii-app-main { background: var(--bg-app); } html.codii-app .codii-app-titlebar { background: var(--bg-shell); border-bottom: 1px solid var(--border-subtle); } html.codii-app .codii-app-titlebar-btn { color: var(--text-secondary); background: transparent; transition: color var(--app-transition), background var(--app-transition); } html.codii-app .codii-app-titlebar-btn:hover { background: var(--bg-hover); color: var(--text-primary); } html.codii-app .codii-app-topbar { background: var(--bg-surface-1); border-bottom: 1px solid var(--border-default); } html.codii-app .codii-app-nav-item { min-height: 38px; border: 1px solid transparent; border-radius: var(--radius-md); color: var(--text-secondary); background: transparent; transition: background var(--app-transition), border-color var(--app-transition), color var(--app-transition); } html.codii-app .codii-app-nav-item:hover { background: var(--bg-hover); border-color: var(--border-subtle); color: var(--text-primary); } html.codii-app .codii-app-nav-item.active { background: color-mix(in oklab, var(--accent-soft) 75%, var(--bg-surface-2)); border-color: color-mix(in oklab, var(--accent) 45%, var(--border-default)); color: var(--text-primary); box-shadow: inset 3px 0 0 var(--accent); } html.codii-app .codii-app-page-root { padding: var(--space-6); } html.codii-app.codii-app-page-ide .codii-app-page-root { padding: 0; } html.codii-app .main-content, html.codii-app .settings-container, html.codii-app .premium-main { width: 100%; max-width: none; margin: 0; padding: var(--space-6); gap: var(--space-5); } html.codii-app .section-header, html.codii-app .welcome-card, html.codii-app .languages-section, html.codii-app .lesson-toolbar, html.codii-app .settings-card, html.codii-app .pricing-card, html.codii-app .admin-card, html.codii-app .dropzone, html.codii-app .tree-card, html.codii-app .lib-card, html.codii-app .search-panel, html.codii-app .language-card, html.codii-app .lesson-card, html.codii-app .stat-card, html.codii-app .metric-card { background: var(--bg-surface-2); background-image: none; border: 1px solid var(--border-default); box-shadow: var(--shadow-sm); } html.codii-app .welcome-card::before, html.codii-app .welcome-card::after, html.codii-app .language-card::before, html.codii-app .language-card::after, html.codii-app .lesson-card::before, html.codii-app .lesson-card::after, html.codii-app .metric-card::before, html.codii-app .metric-card::after, html.codii-app .hero-visual::before, html.codii-app .hero-visual::after, html.codii-app .hero-float::before, html.codii-app .hero-float::after { display: none; } html.codii-app .language-card:hover, html.codii-app .lesson-card:hover, html.codii-app .lib-card:hover, html.codii-app .stat-card:hover, html.codii-app .metric-card:hover, html.codii-app .pricing-card:hover, html.codii-app .settings-card:hover, html.codii-app .admin-card:hover { transform: translateY(-2px); background: var(--bg-surface-3); border-color: var(--border-strong); box-shadow: var(--shadow-md); } html.codii-app button, html.codii-app .btn, html.codii-app .btn-secondary, html.codii-app .search-button, html.codii-app .nav-link, html.codii-app .filter-select, html.codii-app .filter-search, html.codii-app .settings-input, html.codii-app .admin-input, html.codii-app .admin-select, html.codii-app .admin-textarea, html.codii-app input, html.codii-app textarea, html.codii-app select { font-family: var(--font-ui); font-size: var(--fs-sm); } html.codii-app .btn-secondary, html.codii-app .search-button { background: var(--bg-surface-3); border-color: var(--border-default); color: var(--text-secondary); } html.codii-app .btn-secondary:hover, html.codii-app .search-button:hover { background: var(--bg-hover); border-color: var(--border-strong); color: var(--text-primary); } html.codii-app .filter-select, html.codii-app .filter-search, html.codii-app .settings-input, html.codii-app .admin-input, html.codii-app .admin-select, html.codii-app .admin-textarea, html.codii-app input, html.codii-app textarea, html.codii-app select { min-height: 40px; border: 1px solid var(--border-default); background: var(--bg-surface-1); color: var(--text-primary); border-radius: var(--radius-md); box-shadow: none; } html.codii-app input::placeholder, html.codii-app textarea::placeholder { color: var(--text-muted); } html.codii-app .filter-select:focus, html.codii-app .filter-search:focus, html.codii-app .settings-input:focus, html.codii-app .admin-input:focus, html.codii-app .admin-select:focus, html.codii-app .admin-textarea:focus, html.codii-app input:not(.codii-app-search-input):focus, html.codii-app textarea:focus, html.codii-app select:focus { border-color: var(--border-focus); box-shadow: var(--focus-ring); } html.codii-app .search-overlay, html.codii-app .modal-overlay, html.codii-app .ai-loading { background: var(--bg-overlay); backdrop-filter: blur(4px); } html.codii-app .modal-content, html.codii-app .search-panel, html.codii-app .lesson-stage, html.codii-app .pricing-card, html.codii-app .settings-card, html.codii-app .admin-card { border-radius: var(--radius-lg); } /* IDE as visual anchor */ html.codii-app.codii-app-page-ide .ide-topbar, html.codii-app.codii-app-page-ide .ide-sidebar, html.codii-app.codii-app-page-ide .ide-editor-shell, html.codii-app.codii-app-page-ide .ide-terminal-shell { box-shadow: none; } html.codii-app.codii-app-page-ide .ide-topbar-actions .ide-btn:not(.ide-top-primary) { background: var(--bg-surface-3); color: var(--text-secondary); } html.codii-app.codii-app-page-ide .ide-topbar-actions .ide-btn:not(.ide-top-primary):hover { background: var(--bg-hover); color: var(--text-primary); } html.codii-app.codii-app-page-ide .ide-editor-stage { background: var(--bg-code); } html.codii-app.codii-app-page-ide .ide-target-pane { color: color-mix(in oklab, var(--text-muted) 82%, transparent) !important; } html.codii-app.codii-app-page-ide .ide-typing-pane, html.codii-app.codii-app-page-ide .ide-editor-fallback { color: var(--text-code) !important; } html.codii-app.codii-app-page-ide .ide-lesson-typing { color: #d4d4d4; } html.codii-app.codii-app-page-ide .ide-lesson-typing .tp-current { background: color-mix(in oklab, var(--accent-soft) 50%, transparent); } html.codii-app.codii-app-page-ide .ide-lesson-typing .tp-future { opacity: 0.4; } html.codii-app.codii-app-page-ide .ide-lesson-typing .tp-error, html.codii-app.codii-app-page-ide .ide-mismatch { color: #ffdbe3 !important; background: rgba(170, 65, 90, 0.2); } html.codii-app.codii-app-page-ide .ide-terminal-head, html.codii-app.codii-app-page-ide .ide-terminal-assist { background: var(--bg-surface-1); } html.codii-app.codii-app-page-ide .ide-terminal-body, html.codii-app.codii-app-page-ide #ideTerminalInput { background: var(--bg-terminal); color: var(--text-code); } html.codii-app.codii-app-page-ide .ide-right-zone { background: var(--bg-surface-1); background-image: none; color: var(--text-muted); } html.codii-app .dropzone.dragover { border-color: color-mix(in oklab, var(--accent) 58%, var(--border-strong)); background: color-mix(in oklab, var(--accent-soft) 75%, var(--bg-surface-2)); } /* App-only legacy visual lock: remove gradient/hero personality drift from styles.css */ html.codii-app .app-container::before, html.codii-app .app-container::after { display: none !important; } html.codii-app .main-content, html.codii-app .settings-container, html.codii-app .admin-wrap, html.codii-app .premium-main, html.codii-app .lesson-page-shell, html.codii-app .lesson-workspace, html.codii-app .lesson-stage { background: transparent !important; } html.codii-app .header-content, html.codii-app .header-shell, html.codii-app .primary-nav, html.codii-app .hero-visual, html.codii-app .hero-orb, html.codii-app .hero-float, html.codii-app .hero-depth-bar, html.codii-app .hero-badge, html.codii-app .stats-section, html.codii-app .stats-grid, html.codii-app .section-header, html.codii-app .lesson-toolbar, html.codii-app .languages-section, html.codii-app .language-card, html.codii-app .lesson-card, html.codii-app .metric-card, html.codii-app .pricing-card, html.codii-app .settings-card, html.codii-app .admin-card, html.codii-app .dropzone, html.codii-app .tree-card, html.codii-app .lib-card, html.codii-app .recreate-intake-panel, html.codii-app .modal, html.codii-app .modal-content, html.codii-app .search-panel { background-image: none !important; backdrop-filter: none !important; } html.codii-app .hero-visual, html.codii-app .hero-orb, html.codii-app .hero-float, html.codii-app .hero-depth-bar { border: 1px solid var(--border-default) !important; box-shadow: none !important; } html.codii-app .hero-float::before, html.codii-app .hero-float::after, html.codii-app .hero-visual::before, html.codii-app .hero-visual::after, html.codii-app .language-card::before, html.codii-app .language-card::after, html.codii-app .lesson-card::before, html.codii-app .lesson-card::after, html.codii-app .metric-card::before, html.codii-app .metric-card::after { display: none !important; } html.codii-app .modal { border: 1px solid var(--border-default) !important; box-shadow: var(--shadow-md) !important; } /* Drop legacy purple “glass” wash from styles.css .modal::before */ html.codii-app .modal::before { display: none !important; content: none !important; } html.codii-app .modal-header { background: var(--bg-surface-2); border-bottom: 1px solid var(--border-default); backdrop-filter: none; } html.codii-app .modal-header h3 { color: var(--text-primary); } html.codii-app .modal-close { background: var(--bg-surface-2); border: 1px solid var(--border-default); color: var(--text-secondary); box-shadow: none; } html.codii-app .modal-close:hover { background: var(--bg-surface-3); border-color: var(--border-strong); color: var(--text-primary); box-shadow: none; } html.codii-app .modal-actions { background: var(--bg-surface-1); border-top: 1px solid var(--border-default); } html.codii-app .filter-select, html.codii-app .filter-search, html.codii-app .gen-input, html.codii-app .gen-textarea, html.codii-app .recreate-import-input, html.codii-app .settings-input, html.codii-app .admin-input, html.codii-app .admin-select, html.codii-app .admin-textarea { min-height: 40px; background: var(--bg-surface-1) !important; color: var(--text-primary) !important; border: 1px solid var(--border-default) !important; border-radius: var(--radius-sm) !important; } html.codii-app .btn, html.codii-app .btn-secondary, html.codii-app .btn-admin.secondary, html.codii-app .tool-btn, html.codii-app .search-button { background-image: none !important; } html.codii-app .btn-admin, html.codii-app .settings-cta-button, html.codii-app .start-guide-btn { background: var(--accent) !important; border: 1px solid color-mix(in oklab, var(--accent) 62%, var(--border-strong)) !important; color: #f7fbff !important; box-shadow: none !important; } html.codii-app .btn-admin:hover, html.codii-app .settings-cta-button:hover, html.codii-app .start-guide-btn:hover { background: var(--accent-hover) !important; border-color: color-mix(in oklab, var(--accent-hover) 64%, var(--border-strong)) !important; } html.codii-app .command-key, html.codii-app .admin-status-pill, html.codii-app .complexity-badge, html.codii-app .pill { border: 1px solid var(--border-default) !important; background: var(--bg-surface-3) !important; color: var(--text-secondary) !important; } html.codii-app .lesson-stage .step-progress, html.codii-app .progress-track, html.codii-app .gen-usage-track { background: var(--bg-surface-1) !important; border: 1px solid var(--border-subtle) !important; } html.codii-app .progress-bar, html.codii-app .gen-usage-bar { background: var(--accent) !important; } html.codii-app .topbar, html.codii-app .header-actions { gap: var(--space-2); } html.codii-app[data-theme="light"] .codii-app-sidebar, html.codii-app[data-theme="light"] .codii-app-titlebar { background: var(--bg-shell); } html.codii-app[data-theme="light"] .codii-app-nav-item.active { color: #203047; } html.codii-app[data-theme="light"] .btn-primary { background: var(--cta-bg) !important; color: var(--cta-fg) !important; } /* -------------------------------------------------------------------------- */ /* Final desktop structural pass (black/grey + dashboard rhythm) */ /* -------------------------------------------------------------------------- */ html.codii-app { --radius-sm: 9px; --radius-md: 12px; --radius-lg: 15px; --radius-xl: 18px; } html.codii-app .codii-app-sidebar-search { order: 2; } html.codii-app .codii-app-sidebar-nav-primary { order: 3; } html.codii-app .codii-app-nav-divider { order: 4; } html.codii-app .codii-app-sidebar-nav-secondary { order: 5; } html.codii-app .codii-app-sidebar-footer { order: 6; } html.codii-app .codii-app-titlebar-btn { width: 48px; min-width: 48px; } html.codii-app .codii-app-titlebar-btn svg { width: 15px; height: 15px; } html.codii-app .main-content { gap: var(--space-4); } html.codii-app.codii-app-page-index .main-content { display: grid; grid-template-columns: 1fr; gap: var(--space-4); padding-top: var(--space-4); } html.codii-app.codii-app-page-index .welcome-section { margin: 0; } html.codii-app.codii-app-page-index .welcome-card { background: transparent; border: 0; box-shadow: none; padding: 0; display: grid; gap: var(--space-3); } html.codii-app.codii-app-page-index .welcome-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--bg-surface-2); border: 1px solid var(--border-default); border-radius: var(--radius-md); } html.codii-app.codii-app-page-index .hero-typewriter { margin-left: auto; } html.codii-app.codii-app-page-index .welcome-main { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.9fr); gap: var(--space-3); } html.codii-app.codii-app-page-index .welcome-copy, html.codii-app.codii-app-page-index .welcome-illustration { background: var(--bg-surface-2); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-4); } html.codii-app.codii-app-page-index .welcome-copy h2 { margin: 0 0 var(--space-2); font-size: 1.55rem; line-height: 1.22; letter-spacing: -0.01em; } html.codii-app.codii-app-page-index .welcome-copy p { margin: 0 0 var(--space-3); color: var(--text-secondary); max-width: 62ch; } html.codii-app.codii-app-page-index .welcome-points { display: none; } html.codii-app.codii-app-page-index .welcome-actions { margin-top: var(--space-1); display: flex; gap: var(--space-2); flex-wrap: wrap; } html.codii-app.codii-app-page-index .hero-visual { min-height: 220px; border-radius: var(--radius-md); background: var(--bg-code) !important; } html.codii-app.codii-app-page-index .hero-orb { min-height: 220px; } html.codii-app.codii-app-page-index .hero-float { margin-top: var(--space-3); background: var(--bg-surface-1) !important; border: 1px solid var(--border-default) !important; border-radius: var(--radius-sm); padding: var(--space-3); } html.codii-app.codii-app-page-index .hero-metrics { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); } html.codii-app.codii-app-page-index .metric-card { padding: var(--space-3) var(--space-4); } html.codii-app.codii-app-page-index .metric-label { font-size: 0.76rem; letter-spacing: 0.03em; color: var(--text-muted); } html.codii-app.codii-app-page-index .metric-value { margin-top: 0.25rem; font-size: 1.25rem; } html.codii-app.codii-app-page-index .stats-section { margin: 0; padding: 0; background: transparent !important; border: 0 !important; box-shadow: none !important; } html.codii-app.codii-app-page-index .stats-grid { gap: var(--space-3); } html.codii-app.codii-app-page-index .stat-card { padding: var(--space-3); } html.codii-app.codii-app-page-lessons .lesson-toolbar { padding: var(--space-3); gap: var(--space-2); border-radius: var(--radius-md); } html.codii-app.codii-app-page-lessons .filter-group { gap: var(--space-2); } html.codii-app.codii-app-page-lessons .lesson-card { border-radius: var(--radius-md); padding: var(--space-3); } html.codii-app.codii-app-page-recreate .main-content { gap: var(--space-3); } html.codii-app.codii-app-page-recreate .recreate-intake-panel { padding: var(--space-4); border-radius: var(--radius-md); } html.codii-app.codii-app-page-recreate .dropzone { min-height: 180px; border-style: solid; } html.codii-app.codii-app-page-ide .ide-shell, html.codii-app.codii-app-page-ide .ide-workspace, html.codii-app.codii-app-page-ide .ide-workspace-grid { background: var(--bg-surface-1); } html.codii-app.codii-app-page-ide .ide-editor-shell, html.codii-app.codii-app-page-ide .ide-terminal-shell, html.codii-app.codii-app-page-ide .ide-sidebar, html.codii-app.codii-app-page-ide .ide-right-zone { border-radius: 0; } html.codii-app.codii-app-page-ide .ide-topbar { min-height: 44px; padding: 0 var(--space-3); } html.codii-app.codii-app-page-ide .ide-topbar-actions .ide-btn, html.codii-app.codii-app-page-ide .ide-btn { min-height: 34px; } html.codii-app.codii-app-page-ide .ide-terminal-head { min-height: 34px; } html.codii-app.codii-app-page-ide .ide-terminal-body { line-height: 1.5; } @media (max-width: 1320px) { html.codii-app.codii-app-page-index .welcome-main { grid-template-columns: 1fr; } html.codii-app.codii-app-page-index .hero-metrics { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { html.codii-app *, html.codii-app *::before, html.codii-app *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @media (max-width: 1240px) { html.codii-app { --shell-sidebar-width: 210px; } } @media (max-width: 980px) { html.codii-app #codii-app-shell { grid-template-columns: 1fr; grid-template-rows: auto; } html.codii-app .codii-app-sidebar { min-height: auto; border-right: 0; border-bottom: 1px solid var(--border-soft); } html.codii-app .codii-app-main { grid-template-rows: var(--app-titlebar-height) 50px minmax(0, 1fr); } } @media (max-width: 760px) { html.codii-app .header-content { padding: 0.85rem; border-radius: var(--radius-md); } html.codii-app .btn-primary, html.codii-app .btn-secondary, html.codii-app .search-button, html.codii-app .start-guide-btn { min-height: 36px; font-size: 0.8rem; padding: 0.45rem 0.75rem; } } /* -------------------------------------------------------------------------- */ /* Final app-only matte desktop pass (black + grey, tighter hierarchy) */ /* Dark only — do not use bare .ui-redesign or light theme loses its tokens. */ /* -------------------------------------------------------------------------- */ html.codii-app.ui-redesign[data-theme="dark"] { color-scheme: dark; --bg-app: #0c0c0e; --bg-shell: #121316; --bg-surface-1: #181a1d; --bg-surface-2: #1e2125; --bg-surface-3: #262a2f; --bg-surface-4: #2e3339; --bg-hover: #2f343b; --bg-active: #383e47; --bg-code: #121418; --bg-terminal: #0f1114; --bg-overlay: rgba(8, 9, 12, 0.72); --border-subtle: rgba(255, 255, 255, 0.048); --border-default: rgba(255, 255, 255, 0.088); --border-strong: rgba(255, 255, 255, 0.15); --border-focus: rgba(173, 182, 194, 0.45); --text-primary: #f0f1f3; --text-secondary: #c5cad3; --text-muted: #969ca8; --text-code: #d7dbe0; --accent: #6f7782; --accent-hover: #808995; --accent-soft: rgba(111, 119, 130, 0.16); --accent-strong: #656d78; --success: #7ea48f; --warning: #b8a07f; --danger: #ba9097; --shadow-sm: 0 6px 20px rgba(0, 0, 0, 0.22); --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.28); --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.32); --app-titlebar-height: 40px; } html.codii-app.ui-redesign #codii-app-shell { background: var(--bg-shell); } html.codii-app.ui-redesign .codii-app-sidebar { padding-top: 0.35rem; background: var(--bg-shell); border-right: 1px solid var(--border-default); } html.codii-app.ui-redesign .codii-app-sidebar-brand { padding: 0.48rem 0.62rem; margin: 0; } html.codii-app.ui-redesign .codii-app-sidebar-logo { width: 26px; height: 26px; border-radius: 7px; } html.codii-app.ui-redesign .codii-app-sidebar-title { font-size: 1.58rem; } html.codii-app.ui-redesign .codii-app-sidebar-subtitle { font-size: 0.68rem; letter-spacing: 0.1em; } html.codii-app.ui-redesign .codii-app-sidebar-search { padding: 0.42rem 0.56rem 0.3rem; } html.codii-app.ui-redesign .codii-app-search-btn { min-height: 33px; border-radius: 8px; background: var(--bg-surface-1); border-color: var(--border-default); color: var(--text-secondary); } html.codii-app.ui-redesign .codii-app-search-btn:hover { background: var(--bg-surface-2); } html.codii-app.ui-redesign .codii-app-nav-item { min-height: 38px; padding: 0 0.62rem; border-radius: 10px; font-size: 0.81rem; } html.codii-app.ui-redesign .codii-app-nav-item.active { background: color-mix(in oklab, var(--accent-soft) 72%, var(--bg-surface-2)); border-color: var(--border-focus); color: var(--text-primary); box-shadow: inset 3px 0 0 var(--accent); } html.codii-app.ui-redesign .codii-app-titlebar { min-height: var(--app-titlebar-height); height: var(--app-titlebar-height); align-items: stretch; padding-left: 0.65rem; } html.codii-app.ui-redesign .codii-app-titlebar-controls { display: inline-flex; align-items: stretch; align-self: stretch; } html.codii-app.ui-redesign .codii-app-titlebar-brand { font-size: 0.88rem; gap: 0.45rem; align-self: center; } html.codii-app.ui-redesign .codii-app-titlebar-icon { width: 18px; height: 18px; } html.codii-app.ui-redesign .codii-app-titlebar-btn { width: 48px; min-width: 48px; min-height: 100%; color: rgba(250, 250, 250, 0.75); } html.codii-app.ui-redesign .codii-app-titlebar-btn svg { width: 15px; height: 15px; stroke-width: 2; } html.codii-app.ui-redesign .codii-app-main { grid-template-rows: var(--app-titlebar-height) 50px minmax(0, 1fr); } html.codii-app.ui-redesign .codii-app-topbar { padding: 0 0.72rem; } html.codii-app.ui-redesign .codii-app-topbar h1 { font-size: 0.87rem; font-weight: 610; } html.codii-app.ui-redesign .codii-app-page-root { padding: 0.92rem 1rem; } html.codii-app.ui-redesign .main-content, html.codii-app.ui-redesign .settings-container, html.codii-app.ui-redesign .premium-main { padding: 0.75rem; gap: 0.9rem; } html.codii-app.ui-redesign .panel, html.codii-app.ui-redesign .section-header, html.codii-app.ui-redesign .lesson-toolbar, html.codii-app.ui-redesign .languages-section, html.codii-app.ui-redesign .language-card, html.codii-app.ui-redesign .lesson-card, html.codii-app.ui-redesign .metric-card, html.codii-app.ui-redesign .stat-card, html.codii-app.ui-redesign .tree-card, html.codii-app.ui-redesign .dropzone, html.codii-app.ui-redesign .lib-card, html.codii-app.ui-redesign .settings-card, html.codii-app.ui-redesign .pricing-card, html.codii-app.ui-redesign .admin-card { border-radius: 9px !important; box-shadow: none !important; } html.codii-app.ui-redesign .btn, html.codii-app.ui-redesign .btn-primary, html.codii-app.ui-redesign .btn-secondary, html.codii-app.ui-redesign .search-button, html.codii-app.ui-redesign .tool-btn { min-height: 36px; padding: 0.42rem 0.74rem; border-radius: 8px; font-size: 0.82rem; font-weight: 620; transition: background var(--app-transition), border-color var(--app-transition), color var(--app-transition), transform 90ms ease; } html.codii-app.ui-redesign .btn-primary { background: var(--cta-bg) !important; border: 1px solid var(--cta-border) !important; color: var(--cta-fg) !important; text-shadow: none !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 4px 16px rgba(0, 0, 0, 0.22) !important; } html.codii-app.ui-redesign .btn-primary:hover { background: var(--cta-bg-hover) !important; border-color: var(--cta-border) !important; color: var(--cta-fg) !important; transform: translateY(-1px); filter: none !important; } html.codii-app.ui-redesign .btn-secondary, html.codii-app.ui-redesign .search-button, html.codii-app.ui-redesign .tool-btn { background: var(--bg-surface-3) !important; border: 1px solid var(--border-default) !important; color: var(--text-secondary) !important; } html.codii-app.ui-redesign .btn-secondary:hover, html.codii-app.ui-redesign .search-button:hover, html.codii-app.ui-redesign .tool-btn:hover { background: var(--bg-hover) !important; border-color: var(--border-strong) !important; color: var(--text-primary) !important; } html.codii-app.ui-redesign .command-key, html.codii-app.ui-redesign kbd { background: var(--bg-surface-1) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; } /* Overview becomes workspace dashboard, not hero promo */ html.codii-app.ui-redesign.codii-app-page-index .overview-workspace { display: grid; gap: 0.72rem; background: transparent !important; border: 0 !important; padding: 0; } html.codii-app.ui-redesign.codii-app-page-index .overview-primary-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 0.72rem; } html.codii-app.ui-redesign.codii-app-page-index .overview-panel { background: var(--bg-surface-2); border: 1px solid var(--border-default); border-radius: 9px; padding: 0.82rem 0.92rem; } html.codii-app.ui-redesign.codii-app-page-index .overview-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; } html.codii-app.ui-redesign.codii-app-page-index .overview-continue h2 { margin: 0; font-size: 1.26rem; line-height: 1.2; letter-spacing: -0.01em; } html.codii-app.ui-redesign.codii-app-page-index .overview-continue p { margin: 0.5rem 0 0; max-width: 70ch; color: var(--text-secondary); font-size: 0.87rem; } html.codii-app.ui-redesign.codii-app-page-index .welcome-actions { margin-top: 0.75rem; } html.codii-app.ui-redesign.codii-app-page-index .overview-mission { display: grid; align-content: start; gap: 0.42rem; } html.codii-app.ui-redesign.codii-app-page-index .hero-float__label { font-size: 0.69rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } html.codii-app.ui-redesign.codii-app-page-index .hero-float__value { font-size: 1.12rem; line-height: 1.24; color: var(--text-primary); } html.codii-app.ui-redesign.codii-app-page-index .hero-float__meta { color: var(--text-secondary); font-size: 0.82rem; } html.codii-app.ui-redesign.codii-app-page-index .overview-logo-strip { margin-top: 0.46rem; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-code); padding: 0.5rem; min-height: 72px; } html.codii-app.ui-redesign.codii-app-page-index .hero-metrics { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.66rem; } html.codii-app.ui-redesign.codii-app-page-index .metric-card { padding: 0.74rem 0.84rem; } html.codii-app.ui-redesign.codii-app-page-index .metric-label { font-size: 0.71rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); } html.codii-app.ui-redesign.codii-app-page-index .metric-value { font-size: 1.1rem; } html.codii-app.ui-redesign.codii-app-page-index .metric-delta { color: var(--text-secondary); font-size: 0.75rem; } html.codii-app.ui-redesign.codii-app-page-index .languages-section.panel, html.codii-app.ui-redesign.codii-app-page-index .stats-section.panel { padding: 0.72rem; background: transparent !important; border: 0 !important; } html.codii-app.ui-redesign.codii-app-page-index .section-header { padding: 0.72rem 0.84rem; background: var(--bg-surface-2); border: 1px solid var(--border-default); } html.codii-app.ui-redesign.codii-app-page-index .section-header h3 { font-size: 1.08rem; } html.codii-app.ui-redesign.codii-app-page-index .section-header p { font-size: 0.82rem; color: var(--text-secondary); } html.codii-app.ui-redesign.codii-app-page-index .stats-grid { margin-top: 0.64rem; gap: 0.64rem; } html.codii-app.ui-redesign.codii-app-page-index .stat-card { padding: 0.72rem; } html.codii-app.ui-redesign.codii-app-page-index .stat-content h4 { font-size: 0.82rem; } html.codii-app.ui-redesign.codii-app-page-index .stat-number { font-size: 1.04rem; } /* Lessons page density pass */ html.codii-app.ui-redesign.codii-app-page-lessons .main-content { gap: 0.66rem; } html.codii-app.ui-redesign.codii-app-page-lessons .section-header { padding: 0.72rem 0.84rem; } html.codii-app.ui-redesign.codii-app-page-lessons .lesson-toolbar { padding: 0.62rem 0.74rem; gap: 0.62rem; } html.codii-app.ui-redesign.codii-app-page-lessons .filter-label { font-size: 0.76rem; color: var(--text-muted); } html.codii-app.ui-redesign.codii-app-page-lessons .filter-check span { font-size: 0.82rem; } html.codii-app.ui-redesign.codii-app-page-lessons .lessons-grid { gap: 0.62rem; } html.codii-app.ui-redesign.codii-app-page-lessons .lesson-card { padding: 0.72rem; } /* Recreate integrated into same product language */ html.codii-app.ui-redesign.codii-app-page-recreate .main-content { gap: 0.62rem; } html.codii-app.ui-redesign.codii-app-page-recreate .languages-section { padding: 0.72rem; } html.codii-app.ui-redesign.codii-app-page-recreate .dropzone, html.codii-app.ui-redesign.codii-app-page-recreate .tree-card, html.codii-app.ui-redesign.codii-app-page-recreate .recreate-intake-panel { background: var(--bg-surface-2) !important; border-color: var(--border-default) !important; padding: 0.72rem; } html.codii-app.ui-redesign.codii-app-page-recreate .library-grid { gap: 0.62rem; } /* IDE dark neutral pass to suppress blue/purple islands from local style block */ html.codii-app.ui-redesign.codii-app-page-ide .ide-shell, html.codii-app.ui-redesign.codii-app-page-ide .ide-workspace, html.codii-app.ui-redesign.codii-app-page-ide .ide-workspace-grid, html.codii-app.ui-redesign.codii-app-page-ide .ide-landing, html.codii-app.ui-redesign.codii-app-page-ide .ide-dashboard, html.codii-app.ui-redesign.codii-app-page-ide .ide-first-run .ide-card, html.codii-app.ui-redesign.codii-app-page-ide .ide-topbar, html.codii-app.ui-redesign.codii-app-page-ide .ide-sidebar, html.codii-app.ui-redesign.codii-app-page-ide .ide-editor-shell, html.codii-app.ui-redesign.codii-app-page-ide .ide-terminal-shell, html.codii-app.ui-redesign.codii-app-page-ide .ide-right-zone { background: var(--bg-surface-1) !important; border-color: var(--border-default) !important; } html.codii-app.ui-redesign.codii-app-page-ide .ide-editor-stage { background: var(--bg-code) !important; } html.codii-app.ui-redesign.codii-app-page-ide .ide-terminal-body, html.codii-app.ui-redesign.codii-app-page-ide #ideTerminalInput, html.codii-app.ui-redesign.codii-app-page-ide .ide-terminal-input { background: var(--bg-terminal) !important; } html.codii-app.ui-redesign.codii-app-page-ide .ide-dashboard-head, html.codii-app.ui-redesign.codii-app-page-ide .ide-project-card, html.codii-app.ui-redesign.codii-app-page-ide .ide-guide-card, html.codii-app.ui-redesign.codii-app-page-ide .ide-first-run-flow, html.codii-app.ui-redesign.codii-app-page-ide .ide-first-run-actions, html.codii-app.ui-redesign.codii-app-page-ide .ide-starter-btn, html.codii-app.ui-redesign.codii-app-page-ide .ide-chip { background: var(--bg-surface-2) !important; border-color: var(--border-default) !important; box-shadow: none !important; } html.codii-app.ui-redesign.codii-app-page-ide .ide-btn { min-height: 34px !important; border-radius: 7px !important; background: var(--bg-surface-3) !important; border-color: var(--border-default) !important; color: var(--text-secondary) !important; } html.codii-app.ui-redesign.codii-app-page-ide .ide-btn:hover { background: var(--bg-hover) !important; border-color: var(--border-strong) !important; color: var(--text-primary) !important; } html.codii-app.ui-redesign.codii-app-page-ide .ide-btn.primary { background: var(--bg-surface-3) !important; border-color: color-mix(in oklab, var(--accent-soft) 52%, var(--border-strong)) !important; color: var(--text-primary) !important; } html.codii-app.ui-redesign.codii-app-page-ide .ide-btn.primary:hover { background: var(--bg-hover) !important; } html.codii-app.ui-redesign.codii-app-page-ide .ide-btn.active, html.codii-app.ui-redesign.codii-app-page-ide .ide-side-tab.active, html.codii-app.ui-redesign.codii-app-page-ide .ide-file-item.active, html.codii-app.ui-redesign.codii-app-page-ide .ide-starter-btn:hover, html.codii-app.ui-redesign.codii-app-page-ide .ide-chip:hover { background: color-mix(in oklab, var(--accent-soft) 72%, var(--bg-surface-3)) !important; border-color: var(--border-focus) !important; color: var(--text-primary) !important; } html.codii-app.ui-redesign.codii-app-page-ide .ide-first-run-flow li::before { background: color-mix(in oklab, var(--accent-soft) 85%, var(--bg-surface-2)) !important; border-color: var(--border-default) !important; } html.codii-app.ui-redesign.codii-app-page-ide .ide-btn:focus-visible, html.codii-app.ui-redesign.codii-app-page-ide .ide-side-tab:focus-visible, html.codii-app.ui-redesign.codii-app-page-ide .ide-file-item:focus-visible, html.codii-app.ui-redesign.codii-app-page-ide .ide-chip:focus-visible, html.codii-app.ui-redesign.codii-app-page-ide .ide-editor-tabs button:focus-visible, html.codii-app.ui-redesign.codii-app-page-ide .ide-icon-btn:focus-visible, html.codii-app.ui-redesign.codii-app-page-ide .ide-prompt-input:focus-visible, html.codii-app.ui-redesign.codii-app-page-ide #ideTerminalInput:focus-visible { box-shadow: var(--focus-ring) !important; border-color: var(--border-focus) !important; } @media (max-width: 1320px) { html.codii-app.ui-redesign.codii-app-page-index .overview-primary-grid, html.codii-app.ui-redesign.codii-app-page-index .hero-metrics { grid-template-columns: 1fr; } } /* App UI pass v4: structural cleanup for premium desktop workspace */ html.codii-app.ui-redesign { --app-titlebar-height: 40px; --shell-sidebar-width: 228px; } html.codii-app.ui-redesign .codii-app-sidebar { background: var(--bg-shell); border-right: 1px solid var(--border-default); } html.codii-app.ui-redesign .codii-app-sidebar-brand { padding: 0.86rem 0.75rem 0.62rem; border-bottom: 1px solid var(--border-default); } html.codii-app.ui-redesign .codii-app-sidebar-title { font-size: 1rem; letter-spacing: 0; } html.codii-app.ui-redesign .codii-app-sidebar-subtitle { font-size: 0.68rem; letter-spacing: 0.12em; } html.codii-app.ui-redesign .codii-app-sidebar-search { padding: 0.56rem 0.48rem 0.36rem; } html.codii-app.ui-redesign .codii-app-search-btn { min-height: 33px; gap: 0.5rem; justify-content: flex-start; padding: 0 0.56rem; background: var(--bg-surface-1); } html.codii-app.ui-redesign .codii-app-search-btn svg { width: 14px; height: 14px; color: var(--text-muted); flex: 0 0 auto; } html.codii-app.ui-redesign .codii-app-search-btn span { flex: 1 1 auto; text-align: left; } html.codii-app.ui-redesign .codii-app-nav-item { min-height: 34px; padding: 0.38rem 0.58rem; font-size: 0.82rem; border-radius: 7px; } html.codii-app.ui-redesign .codii-app-nav-divider { margin: 0.4rem 0.56rem; } html.codii-app.ui-redesign .codii-app-main { grid-template-rows: var(--app-titlebar-height) 50px minmax(0, 1fr); } html.codii-app.ui-redesign .codii-app-titlebar { padding-left: 0.65rem; align-items: stretch; height: var(--app-titlebar-height); } html.codii-app.ui-redesign .codii-app-titlebar-brand { gap: 0.45rem; font-size: 0.88rem; font-weight: 540; } html.codii-app.ui-redesign .codii-app-titlebar-icon { width: 18px; height: 18px; } html.codii-app.ui-redesign .codii-app-titlebar-btn { width: 48px; min-width: 48px; min-height: 100%; color: rgba(250, 250, 250, 0.75); } html.codii-app.ui-redesign .codii-app-titlebar-btn svg { width: 15px; height: 15px; stroke-width: 2; } html.codii-app.ui-redesign .codii-app-topbar { padding: 0 0.72rem; } html.codii-app.ui-redesign .codii-app-topbar h1 { font-size: 0.86rem; font-weight: 600; } html.codii-app.ui-redesign .codii-app-page-root, html.codii-app.ui-redesign .main-content, html.codii-app.ui-redesign .settings-container, html.codii-app.ui-redesign .admin-wrap { padding: 0.72rem !important; gap: 0.72rem !important; } html.codii-app.ui-redesign .section-header, html.codii-app.ui-redesign .lesson-toolbar, html.codii-app.ui-redesign .languages-section, html.codii-app.ui-redesign .language-card, html.codii-app.ui-redesign .lesson-card, html.codii-app.ui-redesign .metric-card, html.codii-app.ui-redesign .stat-card, html.codii-app.ui-redesign .tree-card, html.codii-app.ui-redesign .dropzone, html.codii-app.ui-redesign .lib-card, html.codii-app.ui-redesign .settings-card, html.codii-app.ui-redesign .pricing-card, html.codii-app.ui-redesign .admin-card { border-radius: 8px !important; } html.codii-app.ui-redesign .btn, html.codii-app.ui-redesign .btn-primary, html.codii-app.ui-redesign .btn-secondary, html.codii-app.ui-redesign .search-button, html.codii-app.ui-redesign .tool-btn { min-height: 35px; padding: 0.42rem 0.72rem; border-radius: 7px; font-size: 0.81rem; font-weight: 610; } html.codii-app.ui-redesign.codii-app-page-index .overview-workspace { background: transparent !important; border: 0 !important; padding: 0 !important; display: grid; gap: 1.1rem; } html.codii-app.ui-redesign.codii-app-page-index .overview-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); gap: 1.1rem; } html.codii-app.ui-redesign.codii-app-page-index .overview-panel { background: var(--bg-surface-2); border: 1px solid var(--border-default); border-radius: 12px; padding: 1.15rem 1.2rem; } html.codii-app.ui-redesign.codii-app-page-index .overview-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.56rem; margin-bottom: 0.56rem; } html.codii-app.ui-redesign.codii-app-page-index .overview-kicker { font-size: 0.69rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 0.18rem 0.5rem; background: var(--bg-surface-1); } html.codii-app.ui-redesign.codii-app-page-index .overview-type-chip { display: inline-flex; align-items: center; gap: 0.36rem; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--bg-surface-1); padding: 0.16rem 0.42rem; min-height: 28px; max-width: min(52%, 320px); } html.codii-app.ui-redesign.codii-app-page-index .overview-type-logo { width: 15px; height: 15px; border-radius: 50%; } html.codii-app.ui-redesign.codii-app-page-index .overview-type-copy { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.78rem; color: var(--text-secondary); } html.codii-app.ui-redesign.codii-app-page-index .overview-caret { color: var(--accent); } html.codii-app.ui-redesign.codii-app-page-index .overview-current h2 { margin: 0; font-size: 1.2rem; line-height: 1.18; letter-spacing: -0.01em; } html.codii-app.ui-redesign.codii-app-page-index .overview-current p { margin: 0.5rem 0 0; color: var(--text-secondary); font-size: 0.84rem; } html.codii-app.ui-redesign.codii-app-page-index .welcome-actions { margin-top: 0.78rem; gap: 0.48rem; } html.codii-app.ui-redesign.codii-app-page-index .overview-mission { display: grid; align-content: start; gap: 0.44rem; } html.codii-app.ui-redesign.codii-app-page-index .overview-mission-label { font-size: 0.69rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } html.codii-app.ui-redesign.codii-app-page-index .overview-mission-value { font-size: 1.08rem; color: var(--text-primary); } html.codii-app.ui-redesign.codii-app-page-index .hero-float__meta { color: var(--text-secondary); font-size: 0.79rem; } html.codii-app.ui-redesign.codii-app-page-index .overview-logo-strip { margin-top: 0.42rem; border: 1px solid var(--border-subtle); border-radius: 7px; background: var(--bg-code); min-height: 70px; padding: 0.44rem; } html.codii-app.ui-redesign.codii-app-page-index .overview-metrics-row { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.62rem; } html.codii-app.ui-redesign.codii-app-page-index .metric-card { padding: 0.68rem 0.78rem; background: var(--bg-surface-2); border: 1px solid var(--border-default); } html.codii-app.ui-redesign.codii-app-page-index .metric-label { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; } html.codii-app.ui-redesign.codii-app-page-index .metric-value { font-size: 1.04rem; } html.codii-app.ui-redesign.codii-app-page-index .metric-delta { font-size: 0.74rem; } html.codii-app.ui-redesign.codii-app-page-index .languages-section.panel, html.codii-app.ui-redesign.codii-app-page-index .stats-section.panel { padding: 1.15rem 1.2rem !important; background: var(--bg-surface-2) !important; border: 1px solid var(--border-default) !important; border-radius: 12px !important; } html.codii-app.ui-redesign.codii-app-page-index .section-header { border: 0 !important; background: transparent !important; padding: 0 0 0.64rem 0 !important; } html.codii-app.ui-redesign.codii-app-page-index .stats-grid, html.codii-app.ui-redesign.codii-app-page-index .languages-grid { gap: 1rem; } html.codii-app.ui-redesign.codii-app-page-index .languages-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 292px), 1fr)) !important; } html.codii-app.ui-redesign.codii-app-page-index .stats-grid.stats-grid-compact { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)) !important; } html.codii-app.ui-redesign.codii-app-page-index .stat-card { padding: 0.7rem; } html.codii-app.ui-redesign.codii-app-page-index .stat-card-clickable { cursor: pointer; } html.codii-app.ui-redesign.codii-app-page-lessons .lesson-toolbar { padding: 0.58rem 0.68rem; gap: 0.58rem; } html.codii-app.ui-redesign.codii-app-page-lessons .lessons-grid { gap: 0.58rem; } html.codii-app.ui-redesign.codii-app-page-lessons .lesson-card { padding: 0.66rem; } html.codii-app.ui-redesign.codii-app-page-lessons .fab-generate { width: 48px; height: 48px; border-radius: 12px; } html.codii-app.ui-redesign.codii-app-page-recreate .dropzone, html.codii-app.ui-redesign.codii-app-page-recreate .tree-card, html.codii-app.ui-redesign.codii-app-page-recreate .recreate-intake-panel { background: var(--bg-surface-2) !important; border: 1px solid var(--border-default) !important; padding: 0.72rem; } html.codii-app.ui-redesign.codii-app-page-recreate .recreate-intake-panel h3, html.codii-app.ui-redesign.codii-app-page-recreate .recreate-intake-panel h4, html.codii-app.ui-redesign.codii-app-page-recreate .recreate-library-header h3 { font-size: 1rem; letter-spacing: -0.01em; } html.codii-app.ui-redesign .hero-visual, html.codii-app.ui-redesign .hero-orb, html.codii-app.ui-redesign .hero-float--coach, html.codii-app.ui-redesign .hero-depth-bar { display: none !important; } @media (max-width: 1320px) { html.codii-app.ui-redesign.codii-app-page-index .overview-dashboard-grid, html.codii-app.ui-redesign.codii-app-page-index .overview-metrics-row { grid-template-columns: 1fr; } html.codii-app.ui-redesign.codii-app-page-index .overview-type-chip { max-width: 100%; } } /* -------------------------------------------------------------------------- */ /* App-only enforcement pass v4 (matte black/grey workspace) */ /* -------------------------------------------------------------------------- */ html.codii-app.ui-redesign { --bg-app: #121212; --bg-shell: #1e1e1e; --bg-surface-1: #252525; --bg-surface-2: #2c2c2c; --bg-surface-3: #333333; --bg-surface-4: #3a3a3a; --bg-hover: #3c3c3c; --bg-active: #454545; --bg-code: #181818; --bg-terminal: #151515; --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.2); --border-focus: #5a5a5a; --text-primary: #e0e0e0; --text-secondary: #b0b0b0; --text-muted: #888888; --accent: #3a84ff; --accent-hover: #335eff; --accent-soft: rgba(58, 132, 255, 0.12); --app-titlebar-height: 40px; } html.codii-app.ui-redesign .codii-app-sidebar { background: var(--bg-shell) !important; display: flex; flex-direction: column; min-height: 100vh; } html.codii-app.ui-redesign .codii-app-sidebar-nav { display: flex; flex-direction: column; } html.codii-app.ui-redesign .codii-app-sidebar-brand { padding: 0.62rem 0.75rem 0.48rem; border-bottom: 1px solid var(--border-default); } html.codii-app.ui-redesign .codii-app-sidebar-search { padding: 0.55rem 0.6rem 0.45rem; margin: 0; } html.codii-app.ui-redesign .codii-app-search-field { min-height: 36px; border-radius: 10px; background: var(--bg-surface-1); border: 1px solid var(--border-default); } html.codii-app.ui-redesign .codii-app-search-field:hover { background: var(--bg-surface-2); } html.codii-app.ui-redesign .codii-app-search-field:focus-within { border-color: var(--border-default); box-shadow: none; } html.codii-app.ui-redesign .codii-app-search-input { font-size: 0.78rem; } html.codii-app.ui-redesign .codii-app-sidebar-nav-primary { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start; gap: 0.3rem; padding: 0.42rem 0.56rem 0.48rem; } html.codii-app.ui-redesign .codii-app-sidebar-nav-secondary { display: flex; flex-direction: column; padding: 0.36rem 0.52rem 0.62rem; margin-top: auto; } html.codii-app.ui-redesign .codii-app-sidebar-footer { display: none; } html.codii-app.ui-redesign .codii-app-nav-item { min-height: 36px; border-radius: 10px; padding: 0.4rem 0.64rem; font-size: 0.8rem; } html.codii-app.ui-redesign .codii-app-nav-item.active { background: color-mix(in oklab, var(--accent-soft) 65%, var(--bg-surface-2)); border-color: color-mix(in oklab, var(--accent) 35%, var(--border-default)); box-shadow: inset 3px 0 0 var(--accent); } html.codii-app.ui-redesign .codii-app-main { grid-template-rows: var(--app-titlebar-height) 50px minmax(0, 1fr); } html.codii-app.ui-redesign .codii-app-titlebar { min-height: var(--app-titlebar-height); height: var(--app-titlebar-height); align-items: stretch; padding-left: 0.65rem; border-bottom: 1px solid var(--border-subtle); } html.codii-app.ui-redesign .codii-app-titlebar-controls { gap: 0; align-self: stretch; display: inline-flex; align-items: stretch; } html.codii-app.ui-redesign .codii-app-titlebar-btn { width: 48px; min-width: 48px; min-height: 100%; height: auto; border-radius: 0; color: rgba(250, 250, 250, 0.75); } html.codii-app.ui-redesign .codii-app-titlebar-btn svg { width: 15px; height: 15px; stroke-width: 2; } html.codii-app.ui-redesign .codii-app-topbar { min-height: 48px; padding: 0 0.75rem; border-bottom: 1px solid var(--border-default); background: var(--bg-surface-1); } html.codii-app.ui-redesign .codii-app-topbar h1 { font-size: 0.82rem; letter-spacing: 0.01em; } html.codii-app.ui-redesign .main-content, html.codii-app.ui-redesign .settings-container, html.codii-app.ui-redesign .admin-wrap, html.codii-app.ui-redesign .premium-main, html.codii-app.ui-redesign .codii-app-page-root { padding: 0.75rem !important; gap: 0.75rem !important; } html.codii-app.ui-redesign .languages-section.panel, html.codii-app.ui-redesign .stats-section.panel, html.codii-app.ui-redesign .section-header, html.codii-app.ui-redesign .lesson-toolbar, html.codii-app.ui-redesign .language-card, html.codii-app.ui-redesign .lesson-card, html.codii-app.ui-redesign .stat-card, html.codii-app.ui-redesign .metric-card, html.codii-app.ui-redesign .dropzone, html.codii-app.ui-redesign .tree-card, html.codii-app.ui-redesign .lib-card, html.codii-app.ui-redesign .settings-card, html.codii-app.ui-redesign .pricing-card, html.codii-app.ui-redesign .admin-card { background: var(--bg-surface-2) !important; border: 1px solid var(--border-default) !important; box-shadow: none !important; border-radius: 8px !important; } html.codii-app.ui-redesign .btn, html.codii-app.ui-redesign .btn-secondary, html.codii-app.ui-redesign .tool-btn, html.codii-app.ui-redesign .search-button { min-height: 34px; border-radius: 7px; padding: 0.42rem 0.72rem; font-size: 0.8rem; font-weight: 600; background-image: none !important; box-shadow: none !important; } html.codii-app.ui-redesign .btn-primary { min-height: 34px; border-radius: 7px; padding: 0.42rem 0.72rem; font-size: 0.8rem; font-weight: 600; background-image: none !important; } html.codii-app.ui-redesign .btn-primary, html.codii-app.ui-redesign .btn-admin, html.codii-app.ui-redesign .settings-cta-button, html.codii-app.ui-redesign .fab-generate, html.codii-app.ui-redesign .start-guide-btn { background: var(--cta-bg) !important; border: 1px solid var(--cta-border) !important; color: var(--cta-fg) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 4px 16px rgba(0, 0, 0, 0.22) !important; } html.codii-app.ui-redesign .btn-primary:hover, html.codii-app.ui-redesign .btn-admin:hover, html.codii-app.ui-redesign .settings-cta-button:hover, html.codii-app.ui-redesign .fab-generate:hover, html.codii-app.ui-redesign .start-guide-btn:hover { background: var(--cta-bg-hover) !important; border-color: var(--cta-border) !important; color: var(--cta-fg) !important; filter: none !important; } html.codii-app.ui-redesign .btn-secondary, html.codii-app.ui-redesign .search-button, html.codii-app.ui-redesign .pill, html.codii-app.ui-redesign .command-key { background: var(--bg-surface-1) !important; border: 1px solid var(--border-default) !important; color: var(--text-secondary) !important; } html.codii-app.ui-redesign .gen-diff-pills .pill.active, html.codii-app.ui-redesign .demo-toggle-btn.active, html.codii-app.ui-redesign .pill.active { background: var(--bg-surface-3) !important; color: var(--text-primary) !important; border-color: var(--border-strong) !important; } html.codii-app.ui-redesign input, html.codii-app.ui-redesign textarea, html.codii-app.ui-redesign select, html.codii-app.ui-redesign .filter-search, html.codii-app.ui-redesign .filter-select, html.codii-app.ui-redesign .settings-input, html.codii-app.ui-redesign .gen-input, html.codii-app.ui-redesign .gen-textarea { background: var(--bg-surface-1) !important; color: var(--text-primary) !important; border: 1px solid var(--border-default) !important; } html.codii-app.ui-redesign input::placeholder, html.codii-app.ui-redesign textarea::placeholder { color: var(--text-muted) !important; } html.codii-app.ui-redesign.codii-app-page-index .overview-workspace { display: grid; gap: 0.75rem; padding: 0 !important; background: transparent !important; border: 0 !important; } html.codii-app.ui-redesign.codii-app-page-index .overview-dashboard-grid { grid-template-columns: minmax(0, 1.5fr) minmax(290px, 1fr); gap: 0.75rem; } html.codii-app.ui-redesign.codii-app-page-index .overview-panel { padding: 0.9rem 0.95rem; } html.codii-app.ui-redesign.codii-app-page-index .overview-current h2 { font-size: 1.12rem; } html.codii-app.ui-redesign.codii-app-page-index .overview-current p, html.codii-app.ui-redesign.codii-app-page-index .hero-float__meta { font-size: 0.82rem; } html.codii-app.ui-redesign.codii-app-page-index .overview-metrics-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } html.codii-app.ui-redesign.codii-app-page-index .languages-section.panel, html.codii-app.ui-redesign.codii-app-page-index .stats-section.panel { padding: 0.84rem !important; } html.codii-app.ui-redesign.codii-app-page-lessons .lesson-toolbar { padding: 0.56rem 0.64rem; gap: 0.56rem; } html.codii-app.ui-redesign.codii-app-page-lessons .lessons-grid { gap: 0.56rem; } html.codii-app.ui-redesign.codii-app-page-lessons .lesson-card { padding: 0.66rem; } html.codii-app.ui-redesign.codii-app-page-recreate .dropzone, html.codii-app.ui-redesign.codii-app-page-recreate .tree-card, html.codii-app.ui-redesign.codii-app-page-recreate .recreate-intake-panel { padding: 0.8rem; } html.codii-app.ui-redesign.codii-app-page-ide .ide-topbar-actions .ide-btn.primary, html.codii-app.ui-redesign.codii-app-page-ide .ide-btn.primary, html.codii-app.ui-redesign.codii-app-page-ide .ide-btn.active { background: var(--bg-surface-3) !important; border: 1px solid var(--border-strong) !important; color: var(--text-primary) !important; box-shadow: none !important; } html.codii-app.ui-redesign.codii-app-page-ide .ide-topbar-actions .ide-btn.primary:hover, html.codii-app.ui-redesign.codii-app-page-ide .ide-btn.primary:hover { background: var(--bg-hover) !important; border-color: var(--border-focus) !important; } html.codii-app.ui-redesign.codii-app-page-ide .ide-btn.danger { background: color-mix(in oklab, var(--danger) 20%, var(--bg-surface-2)) !important; border-color: color-mix(in oklab, var(--danger) 45%, var(--border-default)) !important; color: #e4c8ce !important; } html.codii-app.ui-redesign.codii-app-page-ide .ide-kickoff-panel, html.codii-app.ui-redesign.codii-app-page-ide .ide-stuck-panel, html.codii-app.ui-redesign.codii-app-page-ide .ide-readiness-panel, html.codii-app.ui-redesign.codii-app-page-ide .ide-terminal-assist, html.codii-app.ui-redesign.codii-app-page-ide .ide-session-recap-panel, html.codii-app.ui-redesign.codii-app-page-ide .ide-generation-recovery-panel { background: var(--bg-surface-2) !important; border: 1px solid var(--border-default) !important; } html.codii-app.ui-redesign.codii-app-page-ide .ide-guided-ghost .ghost-remaining { color: color-mix(in oklab, var(--text-muted) 78%, transparent) !important; } html.codii-app.ui-redesign.codii-app-page-ide .ide-guided-wrap .CodeMirror-activeline-background { background: color-mix(in oklab, var(--accent-soft) 40%, transparent) !important; } html.codii-app.ui-redesign.codii-app-page-ide .ide-terminal-body .err { color: var(--text-danger) !important; } html.codii-app.ui-redesign .preview-frame { background: #f5f5f5; } @media (max-width: 1200px) { html.codii-app.ui-redesign.codii-app-page-index .overview-dashboard-grid, html.codii-app.ui-redesign.codii-app-page-index .overview-metrics-row { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- */ /* App-only enforcement pass v5 (true matte black/grey + dashboard structure) */ /* -------------------------------------------------------------------------- */ html.codii-app.ui-redesign { --bg-app: #121212; --bg-shell: #1c1c1c; --bg-surface-1: #262626; --bg-surface-2: #2e2e2e; --bg-surface-3: #363636; --bg-surface-4: #3e3e3e; --bg-hover: #424242; --bg-active: #4a4a4a; --bg-code: #171717; --bg-terminal: #141414; --border-subtle: rgba(255, 255, 255, 0.05); --border-default: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.2); --border-focus: #757575; --text-primary: #e5e5e5; --text-secondary: #b6b6b6; --text-muted: #8a8a8a; --accent: #7d8da1; --accent-hover: #8a99ab; --accent-soft: rgba(125, 141, 161, 0.14); --shell-sidebar-width: 220px; --app-titlebar-height: 40px; } html.codii-app.ui-redesign[data-theme="light"] { color-scheme: light; --bg-app: #f2f4f7; --bg-shell: #e8ebf0; --bg-surface-1: #ffffff; --bg-surface-2: #f4f6f9; --bg-surface-3: #eceff4; --bg-surface-4: #e2e6ed; --bg-hover: #eef1f6; --bg-active: #e4e9f1; --bg-code: #f7f8fb; --bg-terminal: #f1f3f8; --border-subtle: rgba(0, 0, 0, 0.06); --border-default: rgba(0, 0, 0, 0.12); --border-strong: rgba(0, 0, 0, 0.18); --border-focus: #7a7a7a; --text-primary: #222222; --text-secondary: #4f4f4f; --text-muted: #6f6f6f; --accent: #6b7f96; --accent-hover: #61758b; --accent-soft: rgba(107, 127, 150, 0.16); } html.codii-app.ui-redesign .codii-app-sidebar { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; align-content: stretch; } html.codii-app.ui-redesign .codii-app-sidebar-brand { order: 1; } html.codii-app.ui-redesign .codii-app-sidebar-search { order: 2; } html.codii-app.ui-redesign .codii-app-sidebar-nav-primary { order: 3; align-content: start; justify-content: flex-start; } html.codii-app.ui-redesign .codii-app-sidebar-nav-secondary { order: 4; } html.codii-app.ui-redesign .codii-app-titlebar-controls { gap: 0; } html.codii-app.ui-redesign .codii-app-titlebar-btn { width: 48px !important; min-width: 48px !important; min-height: 100% !important; height: auto !important; padding: 0 !important; border-radius: 0 !important; align-self: stretch !important; color: rgba(250, 250, 250, 0.75) !important; } html.codii-app.ui-redesign .codii-app-titlebar-btn svg { width: 15px !important; height: 15px !important; stroke-width: 2 !important; } html.codii-app.ui-redesign .codii-app-titlebar-btn:hover { background: rgba(255, 255, 255, 0.1) !important; color: #fafafa !important; } html.codii-app.ui-redesign .codii-app-titlebar-btn-close { color: #f87171 !important; } html.codii-app.ui-redesign .codii-app-titlebar-btn-close:hover { background: rgba(220, 38, 38, 0.5) !important; color: #fff !important; } html.codii-app.ui-redesign[data-theme="light"] .codii-app-titlebar-btn { color: rgba(28, 28, 30, 0.72) !important; } html.codii-app.ui-redesign[data-theme="light"] .codii-app-titlebar-btn:hover { background: rgba(0, 0, 0, 0.06) !important; color: #141416 !important; } html.codii-app.ui-redesign[data-theme="light"] .codii-app-titlebar-btn-close { color: #dc2626 !important; } html.codii-app.ui-redesign[data-theme="light"] .codii-app-titlebar-btn-close:hover { background: rgba(220, 38, 38, 0.4) !important; color: #fff !important; } html.codii-app.ui-redesign .panel, html.codii-app.ui-redesign .card, html.codii-app.ui-redesign .modal, html.codii-app.ui-redesign .lesson-card, html.codii-app.ui-redesign .language-card, html.codii-app.ui-redesign .stat-card, html.codii-app.ui-redesign .metric-card, html.codii-app.ui-redesign .section-header, html.codii-app.ui-redesign .lesson-toolbar, html.codii-app.ui-redesign .pricing-card, html.codii-app.ui-redesign .admin-card, html.codii-app.ui-redesign .settings-card { background-image: none !important; } html.codii-app.ui-redesign.codii-app-page-index .overview-workspace { gap: 0.7rem; } html.codii-app.ui-redesign.codii-app-page-index .overview-dashboard-grid { grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 0.7rem; } html.codii-app.ui-redesign.codii-app-page-index .overview-panel { padding: 0.84rem; border-radius: 8px; } html.codii-app.ui-redesign.codii-app-page-index .overview-panel-head { margin-bottom: 0.48rem; } html.codii-app.ui-redesign.codii-app-page-index .overview-step-badge { border: 1px solid var(--border-default); border-radius: 999px; padding: 0.17rem 0.5rem; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); background: var(--bg-surface-1); } html.codii-app.ui-redesign.codii-app-page-index .overview-type-chip, html.codii-app.ui-redesign.codii-app-page-index .overview-logo-strip, html.codii-app.ui-redesign.codii-app-page-index .hero-visual, html.codii-app.ui-redesign.codii-app-page-index .hero-orb, html.codii-app.ui-redesign.codii-app-page-index .hero-float--coach { display: none !important; } html.codii-app.ui-redesign.codii-app-page-index .overview-current h2 { font-size: 1.06rem; margin: 0; } html.codii-app.ui-redesign.codii-app-page-index .overview-current p, html.codii-app.ui-redesign.codii-app-page-index .hero-float__meta { font-size: 0.81rem; color: var(--text-secondary); } html.codii-app.ui-redesign.codii-app-page-index .overview-quick-list { margin: 0.12rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.32rem; } html.codii-app.ui-redesign.codii-app-page-index .overview-quick-list li { position: relative; padding-left: 0.7rem; font-size: 0.78rem; color: var(--text-secondary); } html.codii-app.ui-redesign.codii-app-page-index .overview-quick-list li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--text-muted); position: absolute; left: 0; top: 0.48rem; } html.codii-app.ui-redesign.codii-app-page-index .overview-mission-actions { margin-top: 0.26rem; } html.codii-app.ui-redesign.codii-app-page-index .overview-metrics-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.58rem; } html.codii-app.ui-redesign.codii-app-page-index .metric-card, html.codii-app.ui-redesign.codii-app-page-index .stat-card { padding: 0.65rem 0.72rem; } html.codii-app.ui-redesign.codii-app-page-lessons .section-header, html.codii-app.ui-redesign.codii-app-page-lessons .lesson-toolbar, html.codii-app.ui-redesign.codii-app-page-recreate .section-header, html.codii-app.ui-redesign.codii-app-page-recreate .dropzone, html.codii-app.ui-redesign.codii-app-page-recreate .tree-card, html.codii-app.ui-redesign.codii-app-page-settings .settings-card, html.codii-app.ui-redesign.codii-app-page-account .settings-card, html.codii-app.ui-redesign.codii-app-page-premium .pricing-card { border-radius: 8px !important; padding-top: 0.72rem !important; padding-bottom: 0.72rem !important; } html.codii-app.ui-redesign.codii-app-page-recreate .dropzone, html.codii-app.ui-redesign.codii-app-page-recreate .tree-card, html.codii-app.ui-redesign.codii-app-page-recreate .recreate-intake-panel, html.codii-app.ui-redesign.codii-app-page-recreate .lib-card { background: var(--bg-surface-2) !important; border: 1px solid var(--border-default) !important; background-image: none !important; } html.codii-app.ui-redesign.codii-app-page-ide .ide-dashboard-head, html.codii-app.ui-redesign.codii-app-page-ide .ide-project-card, html.codii-app.ui-redesign.codii-app-page-ide .ide-empty, html.codii-app.ui-redesign.codii-app-page-ide .ide-first-run-flow, html.codii-app.ui-redesign.codii-app-page-ide .ide-first-run-actions, html.codii-app.ui-redesign.codii-app-page-ide .ide-guide-card, html.codii-app.ui-redesign.codii-app-page-ide .ide-starter-btn, html.codii-app.ui-redesign.codii-app-page-ide .ide-chip { background-image: none !important; border-radius: 8px !important; } html.codii-app.ui-redesign.codii-app-page-ide .ide-project-card::before, html.codii-app.ui-redesign.codii-app-page-ide .ide-dashboard-head::before { background-image: none !important; background: rgba(255, 255, 255, 0.06) !important; } html.codii-app.ui-redesign[data-theme="light"].codii-app-page-ide .ide-project-card::before, html.codii-app.ui-redesign[data-theme="light"].codii-app-page-ide .ide-dashboard-head::before { background: rgba(0, 0, 0, 0.04) !important; } @media (max-width: 1200px) { html.codii-app.ui-redesign.codii-app-page-index .overview-dashboard-grid, html.codii-app.ui-redesign.codii-app-page-index .overview-metrics-row { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- */ /* App-only enforcement pass v6 (pure matte black + minimal greys) */ /* Dark only — a bare .ui-redesign selector was overriding light theme. */ /* -------------------------------------------------------------------------- */ html.codii-app.ui-redesign[data-theme="dark"] { color-scheme: dark; --bg-app: #0c0c0e; --bg-shell: #111114; --bg-surface-1: #161618; --bg-surface-2: #1c1c20; --bg-surface-3: #242428; --bg-surface-4: #2c2c32; --bg-hover: #323238; --bg-active: #3a3a42; --bg-code: #121214; --bg-terminal: #0f0f12; --border-subtle: rgba(255, 255, 255, 0.045); --border-default: rgba(255, 255, 255, 0.082); --border-strong: rgba(255, 255, 255, 0.14); --border-focus: #7a7a82; --text-primary: #ececee; --text-secondary: #babec8; --text-muted: #8b909c; --accent: #8a8a8a; --accent-hover: #9a9a9a; --accent-soft: rgba(170, 170, 170, 0.12); --success: #7f9a85; --warning: #a78f72; --danger: #a47880; --info: #8f8f8f; --focus-ring: 0 0 0 2px rgba(160, 165, 175, 0.22); } html.codii-app.ui-redesign[data-theme="dark"] body { background: var(--bg-app) !important; } html.codii-app.ui-redesign[data-theme="light"] body { background: var(--bg-app) !important; color: var(--text-primary) !important; } html.codii-app.ui-redesign[data-theme="dark"] body::after { opacity: 0 !important; background-image: none !important; } html.codii-app.ui-redesign #codii-app-shell, html.codii-app.ui-redesign .codii-app-sidebar, html.codii-app.ui-redesign .codii-app-main, html.codii-app.ui-redesign .codii-app-titlebar, html.codii-app.ui-redesign .codii-app-topbar, html.codii-app.ui-redesign .codii-app-content { background-image: none !important; } html.codii-app.ui-redesign .codii-app-sidebar, html.codii-app.ui-redesign .codii-app-titlebar, html.codii-app.ui-redesign .codii-app-topbar { background: var(--bg-shell) !important; } html.codii-app.ui-redesign .codii-app-nav-item.active { background: color-mix(in oklab, var(--accent-soft) 82%, var(--bg-surface-2)) !important; border-color: var(--border-strong) !important; color: var(--text-primary) !important; box-shadow: inset 3px 0 0 var(--accent) !important; } html.codii-app.ui-redesign .btn-primary, html.codii-app.ui-redesign .ide-btn.primary, html.codii-app.ui-redesign .start-guide-btn, html.codii-app.ui-redesign .fab-generate { background: var(--cta-bg) !important; border-color: var(--cta-border) !important; color: var(--cta-fg) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 4px 16px rgba(0, 0, 0, 0.22) !important; } html.codii-app.ui-redesign .btn-primary:hover, html.codii-app.ui-redesign .ide-btn.primary:hover, html.codii-app.ui-redesign .start-guide-btn:hover, html.codii-app.ui-redesign .fab-generate:hover { background: var(--cta-bg-hover) !important; border-color: var(--cta-border) !important; color: var(--cta-fg) !important; filter: none !important; } html.codii-app.ui-redesign[data-theme="light"] .btn-primary, html.codii-app.ui-redesign[data-theme="light"] .ide-btn.primary, html.codii-app.ui-redesign[data-theme="light"] .start-guide-btn, html.codii-app.ui-redesign[data-theme="light"] .fab-generate { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 4px 14px rgba(0, 0, 0, 0.07) !important; } html.codii-app.ui-redesign .panel, html.codii-app.ui-redesign .card, html.codii-app.ui-redesign .section-header, html.codii-app.ui-redesign .lesson-toolbar, html.codii-app.ui-redesign .metric-card, html.codii-app.ui-redesign .stat-card, html.codii-app.ui-redesign .language-card, html.codii-app.ui-redesign .lesson-card, html.codii-app.ui-redesign .dropzone, html.codii-app.ui-redesign .tree-card, html.codii-app.ui-redesign .lib-card, html.codii-app.ui-redesign .settings-card, html.codii-app.ui-redesign .pricing-card, html.codii-app.ui-redesign .admin-card, html.codii-app.ui-redesign .ide-card, html.codii-app.ui-redesign .ide-dashboard-head, html.codii-app.ui-redesign .ide-project-card, html.codii-app.ui-redesign .ide-empty, html.codii-app.ui-redesign .ide-topbar, html.codii-app.ui-redesign .ide-sidebar, html.codii-app.ui-redesign .ide-editor-shell, html.codii-app.ui-redesign .ide-terminal-shell, html.codii-app.ui-redesign .ide-right-zone, html.codii-app.ui-redesign .ide-first-run .ide-card, html.codii-app.ui-redesign .ide-first-run-actions, html.codii-app.ui-redesign .ide-first-run-flow, html.codii-app.ui-redesign .ide-guide-card, html.codii-app.ui-redesign .ide-chip, html.codii-app.ui-redesign .ide-starter-btn { background: var(--bg-surface-2) !important; border-color: var(--border-default) !important; box-shadow: none !important; background-image: none !important; } html.codii-app.ui-redesign .ide-editor-stage, html.codii-app.ui-redesign .ide-typing-pane, html.codii-app.ui-redesign .ide-target-pane, html.codii-app.ui-redesign .ide-editor-fallback, html.codii-app.ui-redesign .ide-lesson-typing { background: var(--bg-code) !important; } html.codii-app.ui-redesign .ide-terminal-body, html.codii-app.ui-redesign .ide-terminal-input, html.codii-app.ui-redesign #ideTerminalInput { background: var(--bg-terminal) !important; } html.codii-app.ui-redesign .codii-app-titlebar-btn:not(.codii-app-titlebar-btn-close):hover { background: rgba(255, 255, 255, 0.08) !important; } /* -------------------------------------------------------------------------- */ /* Workspace overview — dashboard rows (matte; not hero) */ /* -------------------------------------------------------------------------- */ html.codii-app.codii-app-page-index .overview-workspace.panel { background: var(--bg-surface-1); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-3); box-shadow: none; } html.codii-app.codii-app-page-index .overview-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-2); /* start: avoid stretching the short "Current workspace" card to the mission column height */ align-items: start; } @media (max-width: 900px) { html.codii-app.codii-app-page-index .overview-dashboard-grid { grid-template-columns: 1fr; } } html.codii-app.codii-app-page-index .overview-dashboard-row2 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-2); margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); } @media (max-width: 900px) { html.codii-app.codii-app-page-index .overview-dashboard-row2 { grid-template-columns: 1fr; } } html.codii-app.codii-app-page-index .overview-section-label { margin: 0 0 var(--space-1); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } html.codii-app.codii-app-page-index .overview-panel { background: var(--bg-surface-2); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-3); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.035) inset, 0 8px 28px rgba(0, 0, 0, 0.18); } html.codii-app.codii-app-page-index .overview-panel.overview-current { background: var(--bg-surface-3); border-color: var(--border-strong); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 0 0 1px rgba(244, 244, 245, 0.06), 0 12px 36px rgba(0, 0, 0, 0.28); } html.codii-app.codii-app-page-index .overview-panel h2 { font-family: var(--font-ui); font-size: var(--fs-lg); font-weight: 600; margin: 0.35rem 0 0.5rem; color: var(--text-primary); } html.codii-app.codii-app-page-index .overview-panel p { font-size: var(--fs-sm); color: var(--text-secondary); line-height: var(--lh-normal); margin: 0 0 var(--space-2); } html.codii-app.codii-app-page-index .overview-metrics-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; } @media (max-width: 900px) { html.codii-app.codii-app-page-index .overview-metrics-row { grid-template-columns: 1fr; } } html.codii-app.codii-app-page-index .overview-metrics-row .metric-card { display: flex; flex-direction: column; gap: 0.28rem; align-items: flex-start; } html.codii-app.codii-app-page-index .overview-metrics-row .metric-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--bg-surface-1); border: 1px solid var(--border-default); color: var(--text-muted); margin-bottom: 0.1rem; } html.codii-app.codii-app-page-index .overview-plan-usage { margin: 0 0 var(--space-2); padding: 0.55rem 0.65rem; border-radius: var(--radius-sm); background: var(--bg-surface-1); border: 1px solid var(--border-subtle); } html.codii-app.codii-app-page-index .overview-plan-usage-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.65rem; font-size: 0.78rem; line-height: 1.35; padding: 0.18rem 0; } html.codii-app.codii-app-page-index .overview-plan-usage-label { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; font-size: 0.65rem; } html.codii-app.codii-app-page-index .overview-plan-usage-value { color: var(--text-primary); font-weight: 600; text-align: right; font-size: 0.8rem; } html.codii-app.codii-app-page-index .overview-plan-billing { margin: 0.45rem 0 0; padding-top: 0.45rem; border-top: 1px solid var(--border-subtle); font-size: 0.74rem; color: var(--text-muted); line-height: 1.4; } html.codii-app.codii-app-page-index .overview-mission-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } html.codii-app.codii-app-page-index .stats-grid.stats-grid-compact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); } @media (max-width: 520px) { html.codii-app.codii-app-page-index .stats-grid.stats-grid-compact { grid-template-columns: 1fr; } } html.codii-app.codii-app-page-index .stats-grid.stats-grid-compact .stat-card { padding: var(--space-2); min-height: 0; } html.codii-app.codii-app-page-index .stats-grid.stats-grid-compact .stat-icon { width: 36px; height: 36px; } html.codii-app.codii-app-page-index .stats-grid.stats-grid-compact .stat-content h4 { font-size: var(--fs-xs); } @media (prefers-reduced-motion: reduce) { html.codii-app *, html.codii-app *::before, html.codii-app *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Lessons / filters — override legacy glossy purple from styles.css */ html.codii-app .lesson-toolbar { background: var(--bg-surface-2) !important; border: 1px solid var(--border-default) !important; border-radius: var(--radius-md) !important; box-shadow: none !important; padding: 0.5rem 0.65rem !important; gap: 0.5rem 0.85rem !important; } html.codii-app .lesson-toolbar.lesson-toolbar-compact { padding: 0.4rem 0.55rem !important; margin-bottom: 0.5rem !important; } html.codii-app .filter-check { background: var(--bg-surface-1) !important; border: 1px solid var(--border-default) !important; border-radius: var(--radius-sm) !important; box-shadow: none !important; padding: 0.32rem 0.5rem !important; } html.codii-app .filter-check:hover { transform: none !important; border-color: var(--border-strong) !important; box-shadow: none !important; } html.codii-app .filter-label { color: var(--text-muted) !important; font-size: 0.8rem !important; } html.codii-app .filter-check span { color: var(--text-secondary) !important; } html.codii-app .filter-check input[type='checkbox'] { accent-color: #8a8a8a !important; } html.codii-app .languages-section .section-header h3, html.codii-app .section-header h3 { color: var(--text-primary) !important; } html.codii-app .languages-section .section-header p, html.codii-app .section-header p { color: var(--text-secondary) !important; } /* -------------------------------------------------------------------------- */ /* Shell v3 — final wins: titlebar targets + overview column (desktop Tauri) */ /* -------------------------------------------------------------------------- */ html.codii-app.ui-redesign.codii-app-page-index .main-content.codii-app-page-root { max-width: 1280px; width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box; padding: 0.95rem 1.05rem !important; } html.codii-app.ui-redesign.codii-app-page-index .language-card { padding: 1.05rem 1.12rem !important; } html.codii-app.ui-redesign.codii-app-page-index .overview-dashboard-row2 { margin-top: 0.25rem !important; padding-top: 1.15rem !important; gap: 1.15rem !important; } /* -------------------------------------------------------------------------- */ /* Shell v4 — sticky chrome: only content scrolls; flat lesson cards + search */ /* -------------------------------------------------------------------------- */ html.codii-app:has(#codii-app-shell), html.codii-app:has(#codii-app-shell) body { height: 100%; min-height: 100dvh; } html.codii-app:has(#codii-app-shell) body { overflow: hidden; margin: 0; } html.codii-app:has(#codii-app-shell) .app-container { height: 100%; min-height: 0; max-height: 100dvh; overflow: hidden; display: flex; flex-direction: column; } html.codii-app:has(#codii-app-shell) #codii-app-shell { flex: 1 1 auto; min-height: 0; max-height: 100%; overflow: hidden; display: grid; grid-template-columns: var(--shell-sidebar-width) minmax(0, 1fr); align-items: stretch; } html.codii-app:has(#codii-app-shell) .codii-app-sidebar { min-height: 0; height: 100%; max-height: 100%; overflow: hidden; } html.codii-app:has(#codii-app-shell) .codii-app-sidebar-nav-primary { overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; } html.codii-app:has(#codii-app-shell) .codii-app-main { min-height: 0 !important; height: 100%; max-height: 100%; overflow: hidden !important; } html.codii-app:has(#codii-app-shell) .codii-app-content { overflow-y: auto; overflow-x: hidden; min-height: 0 !important; -webkit-overflow-scrolling: touch; } html.codii-app.codii-app-page-ide:has(#codii-app-shell) .codii-app-content { overflow: hidden !important; } /* Overview — max width, gutters, spacing on wide / fullscreen windows */ html.codii-app.codii-app-page-overview main.main-content.overview-page-main { width: 100%; max-width: min(1240px, 100%); margin-inline: auto; padding: clamp(0.75rem, 1.8vw, 1.35rem) clamp(0.85rem, 2.5vw, 2rem) 2.5rem; box-sizing: border-box; } html.codii-app.codii-app-page-overview .overview-workspace.panel { margin-bottom: var(--space-4); padding: clamp(1rem, 2.2vw, 1.4rem); } html.codii-app.codii-app-page-overview .overview-lessons-browse.panel { padding: clamp(1rem, 2.2vw, 1.4rem); margin-top: 0; background: var(--bg-surface-1); border: 1px solid var(--border-default); border-radius: var(--radius-md); } html.codii-app.codii-app-page-overview .overview-dashboard-row2 { gap: var(--space-4); margin-top: var(--space-4); padding-top: var(--space-4); } html.codii-app.codii-app-page-overview .overview-dashboard-row2--full { grid-template-columns: 1fr; } html.codii-app.codii-app-page-overview .overview-dashboard-row2 .overview-stats-strip { border-top: none; padding-top: 0; } html.codii-app.codii-app-page-overview .overview-stats-strip--combined .overview-stats-strip-head { margin-bottom: var(--space-3); } html.codii-app.codii-app-page-overview .overview-workspace.panel { display: flex; flex-direction: column; gap: var(--space-2); } html.codii-app.codii-app-page-overview .overview-hero-lede { margin-bottom: var(--space-4) !important; } html.codii-app.codii-app-page-overview .overview-hero-actions { margin-bottom: var(--space-3) !important; } html.codii-app.codii-app-page-overview .overview-rail-block:first-of-type { padding-bottom: var(--space-4); margin-bottom: var(--space-4); } html.codii-app.codii-app-page-overview .overview-rail-block.overview-mission.overview-panel { display: flex; flex-direction: column; gap: var(--space-2); } html.codii-app.codii-app-page-overview .overview-rail .overview-section-label { margin-bottom: var(--space-2); } html.codii-app.codii-app-page-overview .overview-rail .hero-float__meta { margin-top: 0; margin-bottom: 0.15rem; } html.codii-app.codii-app-page-overview .overview-quick-list--compact { margin: var(--space-2) 0 var(--space-2); } html.codii-app.codii-app-page-overview .overview-mission-actions { display: flex; flex-wrap: wrap; margin-top: 0; padding-top: var(--space-2); padding-bottom: var(--space-2); column-gap: var(--space-3); row-gap: var(--space-2); } html.codii-app.codii-app-page-overview .overview-mission-actions .btn-secondary { min-height: 42px; font-weight: 600; } html.codii-app.codii-app-page-overview .section-header.section-header--lessons { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0.35rem 0 var(--space-4); margin-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); } html.codii-app.codii-app-page-overview .overview-start-guide-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.55rem; min-height: 42px; padding: 0.55rem 1.1rem; font-weight: 600; font-size: var(--fs-sm); line-height: 1.3; border-radius: var(--radius-md); } html.codii-app.codii-app-page-overview .overview-start-guide-btn svg { flex-shrink: 0; opacity: 0.88; } html.codii-app.codii-app-page-overview .overview-start-guide-btn.start-guide-btn--free-spent:disabled { opacity: 0.36; filter: grayscale(0.45); transform: none; box-shadow: none; border-color: var(--border-subtle); color: var(--text-muted); } html.codii-app.codii-app-page-overview .overview-lessons-browse .languages-grid { margin-top: var(--space-1); } html.codii-app.codii-app-page-overview .overview-hero .overview-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } html.codii-app.codii-app-page-overview .overview-hero-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } html.codii-app.codii-app-page-overview .overview-panel-head__fill { flex: 1; min-width: 0; pointer-events: none; } html.codii-app.codii-app-page-overview .overview-top-layout { gap: clamp(var(--space-3), 2vw, var(--space-4)); } html.codii-app.ui-redesign.codii-app-page-overview .languages-grid { gap: 1rem !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 292px), 1fr)) !important; } /* Sidebar search — calmer, readable */ html.codii-app .codii-app-sidebar-search { padding: 0.5rem 0.48rem 0.48rem !important; min-width: 0 !important; } html.codii-app label.codii-app-search-field, html.codii-app .codii-app-search-field { min-height: 40px !important; padding: 0 0.65rem 0 0.72rem !important; gap: 0.55rem !important; border-radius: 10px !important; background: var(--bg-app, #09090b) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: none !important; } html.codii-app[data-theme="light"] label.codii-app-search-field, html.codii-app[data-theme="light"] .codii-app-search-field { background: var(--bg-surface-1) !important; border: 1px solid var(--border-default) !important; } html.codii-app .codii-app-search-field svg { width: 17px !important; height: 17px !important; color: var(--text-muted) !important; opacity: 0.95; } html.codii-app .codii-app-search-input { height: 40px !important; font-size: 0.875rem !important; font-weight: 450 !important; } html.codii-app .codii-app-search-field kbd { margin-left: auto !important; flex-shrink: 0 !important; font-family: var(--font-mono, ui-monospace, monospace) !important; font-size: 0.68rem !important; font-weight: 600 !important; letter-spacing: 0.04em !important; padding: 0.22rem 0.45rem !important; border-radius: 6px !important; border: 1px solid var(--border-subtle) !important; background: var(--bg-surface-1) !important; color: var(--text-muted) !important; } /* Lessons grid: no gradients, no logo “tiles” */ html.codii-app .language-card { background: var(--bg-surface-2) !important; background-image: none !important; box-shadow: none !important; border: 1px solid var(--border-default) !important; } html.codii-app .language-card:hover { background: var(--bg-surface-3) !important; background-image: none !important; border-color: var(--border-strong) !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22) !important; } /* Flat logos only inside lesson grid cards — hero marquee / carousel keep tinted tiles */ html.codii-app .language-card .language-logo { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; border: none !important; border-radius: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; padding: 0 !important; } html.codii-app .language-card .language-logo::after { display: none !important; content: none !important; } html.codii-app .language-card .language-logo i, html.codii-app .language-card .language-logo [class*='devicon'] { background: transparent !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } html.codii-app .language-card .language-logo .language-logo-img { filter: none !important; } /* Light theme: legacy styles.css uses pale blue tints meant for dark cards */ html.codii-app[data-theme="light"] .language-card .language-info h4 { color: var(--text-primary) !important; } html.codii-app[data-theme="light"] .language-card .language-info p { color: var(--text-secondary) !important; } html.codii-app[data-theme="light"] .language-card .language-stats { border-top-color: var(--border-default) !important; } html.codii-app[data-theme="light"] .language-card .stat-item .label { color: var(--text-muted) !important; } html.codii-app[data-theme="light"] .language-card .stat-item .value { color: var(--text-primary) !important; } html.codii-app[data-theme="light"] .lesson-card .lesson-number { color: var(--text-secondary) !important; background: var(--bg-surface-3) !important; border-color: var(--border-default) !important; } html.codii-app[data-theme="light"] .lesson-card .lesson-title { color: var(--text-primary) !important; } /* Light theme: styles.css hardcodes pale blues / gradient text — re-tie to tokens */ html.codii-app[data-theme="light"] .hero-float, html.codii-app[data-theme="light"] .hero-float--goal, html.codii-app[data-theme="light"] .hero-float--coach { color: var(--text-primary) !important; } html.codii-app[data-theme="light"] .hero-float__label, html.codii-app[data-theme="light"] .hero-float--goal .hero-float__label, html.codii-app[data-theme="light"] .hero-float--coach .hero-float__label { color: var(--text-muted) !important; } html.codii-app[data-theme="light"] .hero-float__value { background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important; -webkit-text-fill-color: var(--text-primary) !important; color: var(--text-primary) !important; } html.codii-app[data-theme="light"] .hero-float__meta, html.codii-app[data-theme="light"] .hero-float--goal .hero-float__meta, html.codii-app[data-theme="light"] .hero-float--coach .hero-float__meta { color: var(--text-secondary) !important; } html.codii-app[data-theme="light"] .hero-depth-bar { background: var(--bg-surface-2) !important; border-color: var(--border-default) !important; } html.codii-app[data-theme="light"] .metric-value { color: var(--text-primary) !important; } html.codii-app[data-theme="light"] .stat-content h4 { color: var(--text-muted) !important; } html.codii-app[data-theme="light"] .stat-number { color: var(--text-primary) !important; } html.codii-app[data-theme="light"] .stat-icon { background: var(--bg-surface-2) !important; border-color: var(--border-default) !important; box-shadow: none !important; } html.codii-app[data-theme="light"] .lesson-flow-card { color: var(--text-primary); } html.codii-app[data-theme="light"] .lesson-flow-card h4 { color: var(--text-primary) !important; } html.codii-app[data-theme="light"] .lesson-flow-card .opt { color: var(--text-primary) !important; background: var(--bg-surface-1) !important; border: 1px solid var(--border-default) !important; } html.codii-app[data-theme="light"] .lesson-flow-card .opt:hover { background: var(--bg-surface-3) !important; } html.codii-app[data-theme="light"] .lesson-flow-card .input { background: var(--bg-surface-1) !important; color: var(--text-primary) !important; border-color: var(--border-default) !important; } html.codii-app[data-theme="light"] .typing-stats { background: var(--bg-surface-2) !important; border: 1px solid var(--border-default) !important; color: var(--text-secondary) !important; } html.codii-app[data-theme="light"] .typing-prompt { background: var(--bg-surface-1) !important; border-color: var(--border-default) !important; color: var(--text-primary) !important; } html.codii-app[data-theme="light"] .lesson-card .ai-tag { color: var(--text-secondary) !important; background: var(--accent-soft) !important; border-color: var(--border-default) !important; } html.codii-app[data-theme="light"] .pricing-card .pricing-title, html.codii-app[data-theme="light"] .pricing-card .pricing-price { color: var(--text-primary) !important; } html.codii-app[data-theme="light"] .pricing-list { color: var(--text-secondary) !important; } html.codii-app[data-theme="light"] .pricing-list li::before { color: var(--text-muted) !important; } html.codii-app[data-theme="light"] .modal { background: var(--bg-surface-1) !important; color: var(--text-primary) !important; } html.codii-app[data-theme="light"] .modal::before { display: none !important; } html.codii-app[data-theme="light"] .modal-header { background: var(--bg-surface-2) !important; border-bottom-color: var(--border-default) !important; backdrop-filter: none !important; } html.codii-app[data-theme="light"] .modal-header h3 { color: var(--text-primary) !important; } html.codii-app[data-theme="light"] .modal-close { background: var(--bg-surface-3) !important; border-color: var(--border-default) !important; color: var(--text-primary) !important; box-shadow: none !important; } html.codii-app[data-theme="light"] .modal-content { color: var(--text-secondary); } html.codii-app[data-theme="light"] .welcome-card, html.codii-app[data-theme="light"] .overview-panel p, html.codii-app[data-theme="light"] .overview-current p { color: var(--text-secondary) !important; } html.codii-app[data-theme="light"] .overview-current h2, html.codii-app[data-theme="light"] .welcome-card h3 { color: var(--text-primary) !important; } /* Ask a Question (lesson exercises) — use shell tokens, not legacy purple / dark-only fills */ html.codii-app .ask-question-widget { background: color-mix(in oklab, var(--accent-soft) 50%, var(--bg-surface-2)) !important; border: 1px solid var(--border-default) !important; border-radius: var(--radius-md); } html.codii-app .ask-question-widget .ask-question-header { color: var(--text-primary) !important; } /* Higher specificity than html.codii-app.ui-redesign input */ html.codii-app .ask-question-widget .ask-question-input { background: var(--bg-surface-1) !important; border: 1px solid var(--border-default) !important; color: var(--text-primary) !important; } html.codii-app .ask-question-widget .ask-question-input:focus { border-color: var(--border-focus) !important; background: var(--bg-surface-1) !important; outline: none; box-shadow: var(--focus-ring); } html.codii-app .ask-question-widget .ask-question-input::placeholder { color: var(--text-muted) !important; } html.codii-app .ask-question-widget .ask-question-btn { background: var(--cta-bg) !important; border: 1px solid var(--cta-border) !important; color: var(--cta-fg) !important; box-shadow: 0 1px 0 color-mix(in oklab, rgba(255, 255, 255, 0.5) 70%, transparent) inset, 0 4px 14px rgba(0, 0, 0, 0.12) !important; } html.codii-app .ask-question-widget .ask-question-btn:hover:not(:disabled) { background: var(--cta-bg-hover) !important; border-color: var(--cta-border) !important; color: var(--cta-fg) !important; box-shadow: 0 1px 0 color-mix(in oklab, rgba(255, 255, 255, 0.45) 70%, transparent) inset, 0 6px 18px rgba(0, 0, 0, 0.14) !important; } html.codii-app .ask-question-answer { background: var(--bg-surface-1) !important; border: 1px solid var(--border-default) !important; color: var(--text-primary) !important; } html.codii-app .ask-question-answer.ask-question-error, html.codii-app .ask-question-error { background: color-mix(in oklab, var(--danger) 16%, var(--bg-surface-1)) !important; border-color: color-mix(in oklab, var(--danger) 42%, var(--border-default)) !important; color: color-mix(in oklab, var(--text-primary) 82%, var(--danger)) !important; } html.codii-app .ask-question-loading { color: var(--text-secondary) !important; } html.codii-app .ask-question-loading-spinner { border-color: var(--border-subtle) !important; border-top-color: var(--accent) !important; } /* -------------------------------------------------------------------------- */ /* Shell v5 — strip purple section-header overlay; sidebar search; plan card */ /* -------------------------------------------------------------------------- */ html.codii-app .section-header::before, html.codii-app .section-header::after { display: none !important; content: none !important; opacity: 0 !important; background: none !important; pointer-events: none !important; } html.codii-app .section-header { position: relative !important; overflow: visible !important; background: var(--bg-surface-2) !important; background-image: none !important; border: 1px solid var(--border-default) !important; box-shadow: none !important; } html.codii-app.codii-app-page-index .languages-section.panel { background: var(--bg-surface-2) !important; background-image: none !important; box-shadow: none !important; } /* Sidebar search: pill, no shortcut clutter in narrow rail */ html.codii-app .codii-app-sidebar-search kbd { display: none !important; } html.codii-app .codii-app-sidebar label.codii-app-search-field, html.codii-app .codii-app-sidebar .codii-app-search-field { display: flex !important; align-items: center !important; border-radius: 999px !important; min-height: 0 !important; min-width: 0 !important; padding: 0.38rem 0.85rem !important; gap: 0.5rem !important; background: var(--bg-surface-2) !important; background-image: none !important; border: 1px solid var(--border-default) !important; box-shadow: none !important; outline: none !important; outline-offset: 0 !important; } html.codii-app .codii-app-sidebar label.codii-app-search-field:hover, html.codii-app .codii-app-sidebar .codii-app-search-field:hover { background: var(--bg-surface-3) !important; } html.codii-app .codii-app-sidebar .codii-app-search-field svg { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; opacity: 0.85; } html.codii-app .codii-app-sidebar .codii-app-search-input { height: auto !important; min-height: 0 !important; line-height: 1.35 !important; padding: 0.12rem 0 !important; font-size: 0.82rem !important; font-weight: 450 !important; background: transparent !important; color: var(--text-primary) !important; -webkit-appearance: none; appearance: none; } html.codii-app .codii-app-sidebar .codii-app-search-input::placeholder { color: var(--text-muted) !important; opacity: 1 !important; } html.codii-app .codii-app-sidebar .codii-app-search-input::-webkit-search-decoration, html.codii-app .codii-app-sidebar .codii-app-search-input::-webkit-search-results-button, html.codii-app .codii-app-sidebar .codii-app-search-input::-webkit-search-results-decoration, html.codii-app .codii-app-sidebar .codii-app-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none !important; margin: 0; padding: 0; } html.codii-app .codii-app-sidebar label.codii-app-search-field:focus-within, html.codii-app .codii-app-sidebar .codii-app-search-field:focus-within { border-color: var(--border-strong) !important; box-shadow: none !important; outline: none !important; outline-offset: 0 !important; } html.codii-app .codii-app-sidebar .codii-app-search-input:focus, html.codii-app .codii-app-sidebar .codii-app-search-input:focus-visible, html.codii-app .codii-app-sidebar .codii-app-search-input:active { outline: none !important; outline-offset: 0 !important; box-shadow: none !important; border: 0 !important; } html.codii-app .codii-app-sidebar .codii-app-search-input::-moz-focus-inner { border: 0 !important; padding: 0 !important; } html.codii-app[data-theme="light"] .codii-app-sidebar label.codii-app-search-field, html.codii-app[data-theme="light"] .codii-app-sidebar .codii-app-search-field { background: var(--bg-surface-1) !important; border: 1px solid var(--border-default) !important; } html.codii-app[data-theme="light"] .codii-app-sidebar label.codii-app-search-field:focus-within, html.codii-app[data-theme="light"] .codii-app-sidebar .codii-app-search-field:focus-within { border-color: var(--border-default) !important; } /* Nav tab click: logo spin + light blur — no full-screen black (see tenzy-shell-bridge.js) */ #codii-app-nav-loading-overlay { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; background: transparent; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: all; } #codii-app-nav-loading-overlay[hidden] { display: none !important; } .codii-app-nav-loading-inner { display: flex; align-items: center; justify-content: center; padding: 1rem; } .codii-app-nav-loading-logo { display: block; animation: tenzy-nav-logo-spin 0.45s linear infinite; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35)); } @keyframes tenzy-nav-logo-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .codii-app-nav-loading-logo { animation: none !important; } #codii-app-nav-loading-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; } } /* Overview rail plan chip — tier variants (Practice OS) */ html.codii-app .overview-plan-chip { display: inline-flex; align-items: center; width: fit-content; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 999px; padding: 0.32rem 0.65rem; margin: 0 0 0.35rem; border: 1px solid var(--border-default); background: var(--bg-surface-3); color: var(--text-secondary); box-shadow: none; } html.codii-app .overview-plan-chip--free { color: var(--text-muted); border-color: var(--border-subtle); background: var(--bg-surface-2); } html.codii-app .overview-plan-chip--premium { color: var(--text-primary); border-color: color-mix(in oklab, var(--accent) 45%, var(--border-default)); background: color-mix(in oklab, var(--accent-soft) 24%, var(--bg-surface-3)); } html.codii-app .overview-plan-chip--infinite { letter-spacing: 0.1em; border-color: color-mix(in oklab, #22c55e 52%, var(--border-default)); color: #ecfdf5; background: linear-gradient( 130deg, color-mix(in oklab, #14532d 42%, var(--bg-surface-3)) 0%, var(--bg-surface-3) 45%, color-mix(in oklab, #166534 38%, var(--bg-surface-3)) 100% ); background-size: 200% 200%; animation: codii-overview-chip-infinite 4.5s ease infinite; } @keyframes codii-overview-chip-infinite { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } html.codii-app[data-theme="light"] .overview-plan-chip { color: var(--text-secondary); background: var(--bg-surface-2); border: 1px solid var(--border-default); box-shadow: none; } html.codii-app[data-theme="light"] .overview-plan-chip--free { color: var(--text-muted); background: var(--bg-surface-1); } html.codii-app[data-theme="light"] .overview-plan-chip--premium { color: var(--text-primary); border-color: color-mix(in oklab, var(--accent) 35%, var(--border-default)); background: color-mix(in oklab, var(--accent-soft) 18%, var(--bg-surface-2)); } html.codii-app[data-theme="light"] .overview-plan-chip--infinite { color: #14532d; border-color: color-mix(in oklab, #22c55e 40%, var(--border-default)); background: linear-gradient( 130deg, color-mix(in oklab, #bbf7d0 70%, var(--bg-surface-2)) 0%, var(--bg-surface-2) 50%, color-mix(in oklab, #86efac 55%, var(--bg-surface-2)) 100% ); background-size: 200% 200%; } html.codii-app .overview-panel.overview-mission--premium, html.codii-app.ui-redesign.codii-app-page-index .overview-panel.overview-mission--premium { background: linear-gradient(165deg, #2c2c30 0%, #1c1c20 48%, #121214 100%) !important; background-image: linear-gradient(165deg, #2c2c30 0%, #1c1c20 48%, #121214 100%) !important; border: 1px solid rgba(255, 255, 255, 0.24) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 20px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } html.codii-app .overview-panel.overview-mission--premium .overview-mission-label, html.codii-app.ui-redesign.codii-app-page-index .overview-panel.overview-mission--premium .overview-mission-label { color: var(--text-secondary) !important; } html.codii-app .overview-panel.overview-mission--premium .overview-mission-value, html.codii-app.ui-redesign.codii-app-page-index .overview-panel.overview-mission--premium .overview-mission-value { font-size: 1.32rem !important; font-weight: 650 !important; letter-spacing: -0.025em; color: var(--text-primary) !important; } html.codii-app .overview-panel.overview-mission--premium .overview-mission-actions .btn-secondary, html.codii-app.ui-redesign.codii-app-page-index .overview-panel.overview-mission--premium .overview-mission-actions .btn-secondary { border-color: rgba(255, 255, 255, 0.28) !important; background: rgba(255, 255, 255, 0.08) !important; color: var(--text-primary) !important; } html.codii-app[data-theme="light"] .overview-panel.overview-mission--premium, html.codii-app.ui-redesign[data-theme="light"].codii-app-page-index .overview-panel.overview-mission--premium { background: linear-gradient(165deg, #f6f6f8 0%, #eceef2 48%, #e4e6eb 100%) !important; background-image: linear-gradient(165deg, #f6f6f8 0%, #eceef2 48%, #e4e6eb 100%) !important; border: 1px solid var(--border-default) !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 16px 40px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important; } html.codii-app[data-theme="light"] .overview-panel.overview-mission--premium .overview-mission-actions .btn-secondary, html.codii-app.ui-redesign[data-theme="light"].codii-app-page-index .overview-panel.overview-mission--premium .overview-mission-actions .btn-secondary { border-color: var(--border-default) !important; background: var(--bg-surface-1) !important; color: var(--text-primary) !important; } /* Guided start: tinted glass (avoid pure black slab) */ html.codii-app #guidedStartModal.modal-overlay, html.codii-app #guidedStartResultOverlay.modal-overlay { background: color-mix(in oklab, var(--bg-app) 78%, transparent) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; } html.codii-app #guidedStartModal .guided-start-modal, html.codii-app #guidedStartResultOverlay .guided-start-result { background: color-mix(in oklab, var(--bg-surface-2) 58%, transparent) !important; border: 1px solid var(--border-strong) !important; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(26px) !important; -webkit-backdrop-filter: blur(26px) !important; } html.codii-app[data-theme="light"] #guidedStartModal.modal-overlay, html.codii-app[data-theme="light"] #guidedStartResultOverlay.modal-overlay { background: rgba(28, 32, 40, 0.38) !important; } html.codii-app[data-theme="light"] #guidedStartModal .guided-start-modal, html.codii-app[data-theme="light"] #guidedStartResultOverlay .guided-start-result { background: var(--bg-surface-1) !important; border: 1px solid var(--border-default) !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.85) !important; } html.codii-app #guidedStartModal .guided-start-modal::before, html.codii-app #guidedStartResultOverlay .guided-start-result::before { display: none !important; content: none !important; opacity: 0 !important; } html.codii-app #guidedStartModal .guided-start-modal .modal-header, html.codii-app #guidedStartResultOverlay .guided-start-result .modal-header { background: color-mix(in oklab, var(--bg-surface-3) 52%, transparent) !important; border-bottom-color: var(--border-default) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; } html.codii-app[data-theme="light"] #guidedStartModal .guided-start-modal .modal-header, html.codii-app[data-theme="light"] #guidedStartResultOverlay .guided-start-result .modal-header { background: var(--bg-surface-2) !important; border-bottom-color: var(--border-default) !important; } html.codii-app #guidedStartModal .guided-start-modal .modal-close, html.codii-app #guidedStartResultOverlay .guided-start-result .modal-close { background: color-mix(in oklab, var(--bg-surface-3) 65%, transparent) !important; border-color: var(--border-default) !important; color: var(--text-primary) !important; } html.codii-app[data-theme="light"] #guidedStartModal .guided-start-modal .modal-close, html.codii-app[data-theme="light"] #guidedStartResultOverlay .guided-start-result .modal-close { background: var(--bg-surface-3) !important; border-color: var(--border-default) !important; } html.codii-app #guidedStartModal .guided-start-steps li.active { background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; color: var(--text-primary) !important; } html.codii-app[data-theme="light"] #guidedStartModal .guided-start-steps li.active { background: var(--accent-soft) !important; border: 1px solid var(--border-strong) !important; } html.codii-app .guided-question-options button.active { border-color: rgba(255, 255, 255, 0.92) !important; background: rgba(255, 255, 255, 0.16) !important; color: #fff !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important; transform: none !important; } html.codii-app[data-theme="light"] .guided-question-options button.active { border-color: var(--border-strong) !important; background: var(--bg-surface-3) !important; color: var(--text-primary) !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important; } html.codii-app .guided-question-options button:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.8) !important; outline-offset: 2px !important; } html.codii-app[data-theme="light"] .guided-question-options button:focus-visible { outline: 2px solid rgba(0, 0, 0, 0.35) !important; outline-offset: 2px !important; } html.codii-app #guidedStartModal .guided-start-modal .modal-header { align-items: flex-start; } html.codii-app #guidedStartModal .guided-start-header-copy { flex: 1; min-width: 0; padding-right: 0.5rem; } html.codii-app #guidedStartModal .guided-start-modal .modal-close { margin-top: 0.15rem; } html.codii-app #guidedStartModal .guided-start-header-lede { margin: 0.4rem 0 0; font-size: 0.88rem; line-height: 1.5; color: var(--text-muted); max-width: 36rem; } html.codii-app .guided-intro-prose { font-size: 0.95rem; line-height: 1.62; color: var(--text-secondary); max-width: 40rem; } html.codii-app .guided-intro-prose p { margin: 0; } html.codii-app.ui-redesign[data-theme="dark"] .codii-app-sidebar label.codii-app-search-field, html.codii-app.ui-redesign[data-theme="dark"] .codii-app-sidebar .codii-app-search-field { background: var(--bg-surface-2) !important; border: 1px solid var(--border-default) !important; box-shadow: none !important; } html.codii-app.ui-redesign[data-theme="dark"] .codii-app-sidebar .codii-app-search-field:hover { background: var(--bg-surface-3) !important; } html.codii-app.ui-redesign[data-theme="dark"] .codii-app-sidebar .codii-app-search-field:focus-within { border-color: var(--border-strong) !important; box-shadow: none !important; } html.codii-app.ui-redesign[data-theme="light"] .codii-app-sidebar label.codii-app-search-field, html.codii-app.ui-redesign[data-theme="light"] .codii-app-sidebar .codii-app-search-field { background: var(--bg-surface-1) !important; border: 1px solid var(--border-default) !important; } html.codii-app.ui-redesign[data-theme="light"] .codii-app-sidebar .codii-app-search-field:hover { background: var(--bg-surface-2) !important; } html.codii-app.ui-redesign[data-theme="light"] .codii-app-sidebar .codii-app-search-field:focus-within { border-color: var(--border-default) !important; } /* “Don’t know where to start?” — glass chip, not solid CTA black (esp. light theme) */ html.codii-app.ui-redesign .start-guide-btn { background: color-mix(in oklab, var(--bg-surface-2) 44%, rgba(255, 255, 255, 0.06)) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--border-strong) !important; color: var(--text-primary) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 8px 28px rgba(0, 0, 0, 0.18) !important; text-shadow: none !important; } html.codii-app.ui-redesign .start-guide-btn:hover { background: color-mix(in oklab, var(--bg-surface-3) 52%, rgba(255, 255, 255, 0.08)) !important; border-color: var(--border-strong) !important; color: var(--text-primary) !important; filter: none !important; } html.codii-app.ui-redesign[data-theme="light"] .start-guide-btn { background: color-mix(in oklab, var(--bg-surface-1) 50%, rgba(255, 255, 255, 0.55)) !important; border: 1px solid var(--border-default) !important; color: var(--text-primary) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.92) inset, 0 6px 22px rgba(0, 0, 0, 0.06) !important; } html.codii-app.ui-redesign[data-theme="light"] .start-guide-btn:hover { background: color-mix(in oklab, var(--bg-surface-2) 65%, rgba(255, 255, 255, 0.45)) !important; border-color: var(--border-strong) !important; } /* Premium page: equal-height plan CTAs + activation states */ html.codii-app .pricing-grid-balanced { align-items: stretch !important; } html.codii-app .pricing-grid-balanced .pricing-card { display: flex !important; flex-direction: column !important; } html.codii-app .pricing-grid-balanced .pricing-list { flex: 1 1 auto; } html.codii-app .pricing-grid-balanced .pricing-action { margin-top: auto !important; min-height: 48px !important; width: 100% !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } html.codii-app .pricing-current-badge { display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.35rem; } html.codii-app .pricing-card--current .pricing-current-badge { color: #4ade80; } html.codii-app .premium-plan-policy-note { margin: 0.65rem 0 0; max-width: 52rem; font-size: 0.8rem; line-height: 1.5; color: var(--text-muted); } html.codii-app .premium-status-banner { margin: 0 0 var(--space-2); padding: 0.65rem 0.85rem; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--bg-surface-2); color: var(--text-secondary); font-size: 0.88rem; line-height: 1.45; max-width: 960px; } html.codii-app .premium-status-banner--err { border-color: rgba(239, 68, 68, 0.45); background: rgba(239, 68, 68, 0.1); color: var(--text-primary); } @keyframes plan-btn-spin { to { transform: rotate(360deg); } } html.codii-app .plan-btn-spinner { display: inline-block; width: 0.95em; height: 0.95em; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: plan-btn-spin 0.7s linear infinite; vertical-align: -0.12em; margin-right: 0.4em; } html.codii-app .btn.pricing-action.plan-activated { background: #15803d !important; color: #f0fdf4 !important; border-color: rgba(255, 255, 255, 0.22) !important; } html.codii-app .btn.pricing-action.plan-on-free { background: var(--bg-surface-2) !important; color: var(--text-primary) !important; border: 1px solid var(--border-strong) !important; } /* Lesson runner: full content width (styles.css caps .lesson-stage at 900px) */ html.codii-app body.lesson-page .lesson-page-shell { width: 100%; max-width: none; margin: 0; box-sizing: border-box; } html.codii-app body.lesson-page .lesson-workspace.languages-section.panel { width: 100%; max-width: none !important; } html.codii-app body.lesson-page .lesson-stage { max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; } html.codii-app body.lesson-page .lesson-topbar { max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; } html.codii-app body.lesson-page .section-header.lesson-section-header { max-width: none !important; width: 100% !important; box-sizing: border-box; } /* Lessons language hero + lesson flow — matte panels */ html.codii-app.codii-app-page-lessons .lesson-hero-card, html.codii-app.codii-app-page-lesson .lesson-hero-card { background: var(--bg-surface-2) !important; border: 1px solid var(--border-default) !important; box-shadow: none !important; } html.codii-app.codii-app-page-lessons .lesson-hero-logo, html.codii-app.codii-app-page-lesson .lesson-hero-logo { background: var(--bg-surface-1) !important; border-color: var(--border-default) !important; } html.codii-app.codii-app-page-lessons .lesson-hero-meta h4, html.codii-app.codii-app-page-lesson .lesson-hero-meta h4 { color: var(--text-primary) !important; } html.codii-app.codii-app-page-lessons .lesson-hero-meta p, html.codii-app.codii-app-page-lesson .lesson-hero-meta p, html.codii-app.codii-app-page-lessons .lesson-hero-stats, html.codii-app.codii-app-page-lesson .lesson-hero-stats { color: var(--text-secondary) !important; } /* lessons.html — after picking a language: use full rail width, calmer cards & CTAs */ html.codii-app.codii-app-page-lessons .lesson-hero { max-width: none !important; width: 100%; margin: 0 0 var(--space-3); } html.codii-app.codii-app-page-lessons .lesson-hero-card { padding: var(--space-3) var(--space-4); gap: var(--space-3); align-items: start; } html.codii-app.codii-app-page-lessons .lesson-hero-stats { flex-wrap: wrap; row-gap: 0.35rem; column-gap: var(--space-3); } html.codii-app.codii-app-page-lessons .lessons-grid { max-width: none !important; width: 100%; margin: 0 !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr)); gap: var(--space-2); align-items: stretch; } html.codii-app.codii-app-page-lessons .lesson-card { min-height: 0; border-radius: var(--radius-md); } html.codii-app.codii-app-page-lessons .lesson-card:hover { transform: translateY(-2px); } html.codii-app.codii-app-page-lessons .lesson-card .lesson-actions { margin-top: auto; padding-top: 0.2rem; } /* Matte “primary” inside cards — not full bright CTA slab (dark theme) */ html.codii-app.codii-app-page-lessons .lesson-card .lesson-actions .btn-primary, html.codii-app.codii-app-page-lessons .ai-generator-card .lesson-actions .btn-primary { width: 100%; background: color-mix(in oklab, var(--bg-surface-3) 82%, var(--accent)) !important; border: 1px solid var(--border-strong) !important; color: var(--text-primary) !important; font-weight: 600; box-shadow: 0 1px 0 color-mix(in oklab, rgba(255, 255, 255, 0.12) 85%, transparent) inset, 0 4px 16px rgba(0, 0, 0, 0.14) !important; } html.codii-app.codii-app-page-lessons .lesson-card .lesson-actions .btn-primary:hover, html.codii-app.codii-app-page-lessons .ai-generator-card .lesson-actions .btn-primary:hover { background: color-mix(in oklab, var(--bg-hover) 70%, var(--accent)) !important; border-color: var(--border-focus) !important; color: var(--text-primary) !important; filter: none !important; } html.codii-app[data-theme="light"].codii-app-page-lessons .lesson-card .lesson-actions .btn-primary, html.codii-app[data-theme="light"].codii-app-page-lessons .ai-generator-card .lesson-actions .btn-primary { background: var(--cta-bg) !important; border: 1px solid var(--cta-border) !important; color: var(--cta-fg) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 4px 14px rgba(0, 0, 0, 0.08) !important; } html.codii-app[data-theme="light"].codii-app-page-lessons .lesson-card .lesson-actions .btn-primary:hover, html.codii-app[data-theme="light"].codii-app-page-lessons .ai-generator-card .lesson-actions .btn-primary:hover { background: var(--cta-bg-hover) !important; } html.codii-app.codii-app-page-lessons .lesson-progress-label { color: var(--text-secondary) !important; font-weight: 500; } html.codii-app.codii-app-page-lessons .lesson-meta-pill.not_started { color: var(--text-secondary) !important; background: var(--bg-surface-1) !important; border-color: var(--border-default) !important; } html.codii-app.codii-app-page-lessons .lesson-meta-pill.in_progress { color: color-mix(in oklab, var(--text-primary) 55%, var(--warning)) !important; background: color-mix(in oklab, var(--warning) 14%, var(--bg-surface-1)) !important; border-color: color-mix(in oklab, var(--warning) 35%, var(--border-default)) !important; } html.codii-app.codii-app-page-lessons .lesson-meta-pill.completed { color: color-mix(in oklab, var(--text-primary) 40%, var(--success)) !important; background: color-mix(in oklab, var(--success) 12%, var(--bg-surface-1)) !important; border-color: color-mix(in oklab, var(--success) 32%, var(--border-default)) !important; } /* -------------------------------------------------------------------------- */ /* Index workspace — hero + fixed-width rail + stats strip (v2 layout) */ /* -------------------------------------------------------------------------- */ html.codii-app.codii-app-page-index .overview-workspace.panel { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); } html.codii-app.codii-app-page-index .overview-top-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 336px); gap: var(--space-3); align-items: stretch; } @media (max-width: 960px) { html.codii-app.codii-app-page-index .overview-top-layout { grid-template-columns: 1fr; } } /* Hero — dominant workspace card */ html.codii-app.codii-app-page-index .overview-panel.overview-hero.overview-current { position: relative; display: flex; flex-direction: column; min-height: clamp(400px, 52vh, 560px); padding: var(--space-4) var(--space-4) var(--space-3); background: linear-gradient( 155deg, color-mix(in oklab, var(--bg-surface-3) 88%, var(--accent-soft)) 0%, var(--bg-surface-3) 42%, var(--bg-surface-2) 100% ); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: 0 1px 0 color-mix(in oklab, rgba(255, 255, 255, 0.08) 70%, transparent) inset, 0 0 0 1px color-mix(in oklab, var(--accent) 12%, transparent), 0 20px 48px rgba(0, 0, 0, 0.35); } html.codii-app.codii-app-page-index .overview-panel.overview-hero.overview-current::before { content: ''; position: absolute; left: 0; top: var(--space-2); bottom: var(--space-2); width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--accent) 0%, color-mix(in oklab, var(--accent) 55%, var(--bg-surface-1)) 100%); opacity: 0.95; } html.codii-app.codii-app-page-index .overview-hero .overview-panel-head { margin-bottom: var(--space-2); } /* Hero — logo + copy row (continuous loop: orbit + gentle bob) */ html.codii-app.codii-app-page-index .overview-hero-main { display: flex; align-items: flex-start; gap: var(--space-4); min-width: 0; } html.codii-app.codii-app-page-index .overview-hero-copy { flex: 1; min-width: 0; } html.codii-app.codii-app-page-index .overview-hero-logo-loop { position: relative; width: 4.5rem; height: 4.5rem; flex-shrink: 0; } html.codii-app.codii-app-page-index .overview-hero-logo-orbit { position: absolute; inset: 0; border-radius: 14px; background: conic-gradient( from 0deg, transparent 0%, color-mix(in oklab, var(--accent) 62%, transparent) 26%, transparent 46%, color-mix(in oklab, var(--accent-soft) 75%, transparent) 70%, transparent 100% ); animation: overview-hero-logo-orbit-spin 14s linear infinite; } html.codii-app.codii-app-page-index .overview-hero-logo-inner { position: absolute; inset: 3px; border-radius: 11px; background: var(--bg-surface-2); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 color-mix(in oklab, rgba(255, 255, 255, 0.08) 80%, transparent), 0 4px 18px rgba(0, 0, 0, 0.28); animation: overview-hero-logo-bob 3.4s ease-in-out infinite; } html.codii-app.codii-app-page-index .overview-hero-logo-mark { width: 68%; height: 68%; object-fit: contain; border-radius: 8px; display: block; } @keyframes overview-hero-logo-orbit-spin { to { transform: rotate(360deg); } } @keyframes overview-hero-logo-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @media (max-width: 540px) { html.codii-app.codii-app-page-index .overview-hero-main { flex-direction: column; align-items: center; text-align: center; } html.codii-app.codii-app-page-index .overview-hero-copy { width: 100%; } html.codii-app.codii-app-page-index .overview-hero-copy .overview-panel-head { justify-content: center; } html.codii-app.codii-app-page-index .overview-hero-actions { justify-content: center; } } @media (prefers-reduced-motion: reduce) { html.codii-app.codii-app-page-index .overview-hero-logo-orbit, html.codii-app.codii-app-page-index .overview-hero-logo-inner { animation: none !important; } } html.codii-app.codii-app-page-index .overview-hero-title { font-family: var(--font-heading); font-size: clamp(1.45rem, 2.4vw, 1.85rem); font-weight: 650; letter-spacing: -0.02em; line-height: var(--lh-tight); margin: 0 0 var(--space-2); color: var(--text-primary); } html.codii-app.codii-app-page-index .overview-hero-lede { font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--text-secondary); margin: 0 0 var(--space-3); max-width: 42rem; } html.codii-app.codii-app-page-index .overview-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); } html.codii-app.codii-app-page-index .btn-hero-cta.btn-primary { min-height: 44px; padding: 0.65rem 1.35rem; font-weight: 650; font-size: var(--fs-sm); border-radius: var(--radius-md); box-shadow: 0 1px 0 color-mix(in oklab, rgba(255, 255, 255, 0.2) 80%, transparent) inset, 0 4px 20px color-mix(in oklab, var(--accent) 28%, rgba(0, 0, 0, 0.5)); transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease; } html.codii-app.codii-app-page-index .btn-hero-cta.btn-primary:hover { filter: brightness(1.06); box-shadow: 0 1px 0 color-mix(in oklab, rgba(255, 255, 255, 0.22) 80%, transparent) inset, 0 6px 28px color-mix(in oklab, var(--accent) 35%, rgba(0, 0, 0, 0.55)); } html.codii-app.codii-app-page-index .btn-hero-cta.btn-primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } html.codii-app.codii-app-page-index .btn-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.55rem 1.1rem; font-weight: 600; font-size: var(--fs-sm); color: var(--text-secondary); background: transparent; border: 1px solid var(--border-default); border-radius: var(--radius-md); text-decoration: none; transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease; } html.codii-app.codii-app-page-index .btn-ghost:hover { background: var(--bg-surface-2); border-color: var(--border-strong); color: var(--text-primary); } html.codii-app.codii-app-page-index .btn-ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } html.codii-app.codii-app-page-index .overview-hero-help { margin: 0; padding-top: var(--space-1); } html.codii-app.codii-app-page-index .overview-hero-help-btn { display: inline-flex; align-items: flex-start; gap: 0.55rem; width: 100%; max-width: 36rem; padding: 0.5rem 0.35rem 0.5rem 0; margin: 0; text-align: left; font: inherit; font-size: var(--fs-sm); line-height: 1.45; color: var(--text-muted); background: none; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: color 0.14s ease, background 0.14s ease; } html.codii-app.codii-app-page-index .overview-hero-help-btn strong { color: var(--text-secondary); font-weight: 600; } html.codii-app.codii-app-page-index .overview-hero-help-btn:hover { color: var(--text-secondary); background: color-mix(in oklab, var(--bg-surface-2) 65%, transparent); } html.codii-app.codii-app-page-index .overview-hero-help-btn:hover strong { color: var(--text-primary); } html.codii-app.codii-app-page-index .overview-hero-help-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } html.codii-app.codii-app-page-index .overview-hero-help-btn svg { flex-shrink: 0; margin-top: 0.12rem; opacity: 0.75; color: var(--accent); } /* Hero — infinite language logo marquee (fills leftover card height, centered) */ html.codii-app.codii-app-page-index .overview-hero-marquee { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: stretch; min-height: clamp(9rem, 24vh, 15rem); margin-top: var(--space-3); margin-left: calc(-1 * var(--space-4)); margin-right: calc(-1 * var(--space-4)); width: calc(100% + 2 * var(--space-4)); padding: var(--space-2) 0 0; } html.codii-app.codii-app-page-index .overview-hero-marquee__viewport { flex: 1 1 auto; display: flex; align-items: center; min-height: clamp(7.5rem, 20vh, 13.5rem); overflow: hidden; width: 100%; padding: var(--space-4) 0; margin-top: var(--space-1); background: color-mix(in oklab, var(--bg-surface-1) 55%, transparent); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: inset 0 1px 0 color-mix(in oklab, rgba(255, 255, 255, 0.06) 80%, transparent); mask-image: linear-gradient( 90deg, transparent 0%, #000 6%, #000 94%, transparent 100% ); -webkit-mask-image: linear-gradient( 90deg, transparent 0%, #000 6%, #000 94%, transparent 100% ); } html.codii-app.codii-app-page-index .overview-hero-marquee__track { display: flex; width: max-content; animation: overview-hero-marquee-x 55s linear infinite; will-change: transform; } @keyframes overview-hero-marquee-x { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } html.codii-app.codii-app-page-index .overview-hero-marquee__set { display: flex; flex-shrink: 0; align-items: center; gap: var(--space-4); padding-right: var(--space-4); } html.codii-app.codii-app-page-index .overview-hero-marquee__item { display: flex; align-items: center; justify-content: center; flex-shrink: 0; } html.codii-app.codii-app-page-index .overview-hero-marquee .language-logo, html.codii-app.codii-app-page-index .overview-hero-marquee-logo.language-logo { width: 4.5rem; height: 4.5rem; opacity: 1; overflow: visible !important; border: none !important; outline: none !important; background: transparent !important; background-image: none !important; box-shadow: none !important; border-radius: 0 !important; filter: saturate(1.08) drop-shadow(0 3px 12px rgba(0, 0, 0, 0.5)); transition: filter 0.18s ease, transform 0.18s ease; } html.codii-app.codii-app-page-index .overview-hero-marquee .language-logo::after { display: none !important; content: none !important; } html.codii-app.codii-app-page-index .overview-hero-marquee .language-logo i, html.codii-app.codii-app-page-index .overview-hero-marquee .language-logo [class*='devicon'] { background: transparent !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } html.codii-app.codii-app-page-index .overview-hero-marquee .language-logo:hover, html.codii-app.codii-app-page-index .overview-hero-marquee-logo.language-logo:hover { filter: saturate(1.15) drop-shadow(0 5px 18px rgba(0, 0, 0, 0.6)); transform: scale(1.06); } html.codii-app.codii-app-page-index .overview-hero-marquee .language-logo-img { object-fit: contain; width: 2.85rem; height: 2.85rem; } html.codii-app.codii-app-page-index .overview-hero-marquee .language-logo-icon { font-size: 2.55rem; } /* Beat legacy .language-logo--sm (36px) when badge still carries that class */ html.codii-app.codii-app-page-index .overview-hero-marquee .language-logo.language-logo--sm { width: 4.5rem !important; height: 4.5rem !important; border: none !important; background: transparent !important; border-radius: 0 !important; } html.codii-app.codii-app-page-index .overview-hero-marquee .language-logo.language-logo--sm .language-logo-img { width: 2.85rem !important; height: 2.85rem !important; } html.codii-app.codii-app-page-index .overview-hero-marquee .language-logo.language-logo--sm .language-logo-icon, html.codii-app.codii-app-page-index .overview-hero-marquee .language-logo.language-logo--sm i { font-size: 2.55rem !important; } @media (prefers-reduced-motion: reduce) { html.codii-app.codii-app-page-index .overview-hero-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 100%; gap: var(--space-2); } html.codii-app.codii-app-page-index .overview-hero-marquee__set:last-child { display: none; } html.codii-app.codii-app-page-index .overview-hero-marquee__set { flex-wrap: wrap; justify-content: center; padding-right: 0; width: 100%; } } /* Right rail — plan + focus, calmer secondary surface */ html.codii-app.codii-app-page-index .overview-rail.overview-panel { display: flex; flex-direction: column; gap: 0; padding: var(--space-3); background: var(--bg-surface-2); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: 0 10px 32px rgba(0, 0, 0, 0.22); } html.codii-app.codii-app-page-index .overview-rail-block { padding-bottom: var(--space-3); margin-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); } html.codii-app.codii-app-page-index .overview-rail-block:last-of-type { border-bottom: none; margin-bottom: var(--space-2); padding-bottom: 0; } html.codii-app.codii-app-page-index .overview-rail-heading { margin: 0 0 var(--space-2); font-size: var(--fs-sm); font-weight: 600; letter-spacing: -0.01em; color: var(--text-secondary); } html.codii-app.codii-app-page-index .overview-rail .overview-plan-chip { margin-bottom: var(--space-2); } html.codii-app.codii-app-page-index .overview-rail-meta { display: block; margin: var(--space-2) 0 var(--space-2); font-size: var(--fs-xs); line-height: 1.45; color: var(--text-muted); } html.codii-app.codii-app-page-index .overview-rail .overview-mission-value { display: block; font-size: 1.05rem; font-weight: 650; letter-spacing: -0.02em; color: var(--text-primary); margin: 0; } html.codii-app.codii-app-page-index .overview-quick-list--compact { margin: 0; padding-left: 1.1rem; font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.5; } html.codii-app.codii-app-page-index .overview-quick-list--compact li { margin: 0.2rem 0; } html.codii-app.codii-app-page-index .overview-rail-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin-top: auto; padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); font-size: var(--fs-xs); } html.codii-app.codii-app-page-index .overview-rail-links a { color: var(--text-secondary); text-decoration: none; font-weight: 600; padding: 0.35rem 0.25rem; border-radius: var(--radius-sm); transition: color 0.12s ease, background 0.12s ease; } html.codii-app.codii-app-page-index .overview-rail-links a:hover { color: var(--accent); background: color-mix(in oklab, var(--accent-soft) 35%, transparent); } html.codii-app.codii-app-page-index .overview-rail-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } html.codii-app.codii-app-page-index .overview-rail-links-sep { color: var(--text-muted); user-select: none; } /* Stats strip — one row, compact */ html.codii-app.codii-app-page-index .overview-stats-strip { margin: 0; padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); } html.codii-app.codii-app-page-index .overview-stats-strip-head { margin-bottom: var(--space-2); } html.codii-app.codii-app-page-index .overview-stats-strip-title { margin: 0 0 0.25rem; font-size: var(--fs-md); font-weight: 650; letter-spacing: -0.02em; color: var(--text-primary); } html.codii-app.codii-app-page-index .overview-stats-strip-sub { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.45; } html.codii-app.codii-app-page-index .overview-stats-strip-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); } html.codii-app.codii-app-page-index .overview-stats-strip-row--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } html.codii-app.codii-app-page-index .overview-stats-strip-row--six { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); } @media (max-width: 1200px) { html.codii-app.codii-app-page-index .overview-stats-strip-row--six { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { html.codii-app.codii-app-page-index .overview-stats-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { html.codii-app.codii-app-page-index .overview-stats-strip-row { grid-template-columns: 1fr; } } html.codii-app.codii-app-page-index .stat-card.stat-card--strip { display: flex; flex-direction: row; align-items: flex-start; gap: var(--space-2); min-height: 0; padding: var(--space-2) var(--space-2); background: var(--bg-surface-2); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset; transition: border-color 0.14s ease, background 0.14s ease, transform 0.14s ease; } html.codii-app.codii-app-page-index .stat-card.stat-card--strip:hover { border-color: var(--border-strong); background: color-mix(in oklab, var(--bg-surface-3) 88%, var(--bg-surface-2)); } html.codii-app.codii-app-page-index .stat-card.stat-card--strip.stat-card-clickable { cursor: pointer; } html.codii-app.codii-app-page-index a.stat-card.stat-card--strip { text-decoration: none; color: inherit; } html.codii-app.codii-app-page-index .stat-card.stat-card--strip .stat-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--radius-sm); background: var(--bg-surface-1); border: 1px solid var(--border-subtle); color: var(--text-muted); } html.codii-app.codii-app-page-index .stat-card.stat-card--strip .stat-content { min-width: 0; flex: 1; } html.codii-app.codii-app-page-index .stat-card.stat-card--strip .stat-content h4 { margin: 0 0 0.2rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); line-height: 1.3; } html.codii-app.codii-app-page-index .stat-card.stat-card--strip .stat-number { display: block; font-size: 1.25rem; font-weight: 650; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2; } html.codii-app.codii-app-page-index .overview-stat-empty { display: block; margin-top: 0.35rem; font-size: 0.7rem; font-weight: 500; line-height: 1.35; color: var(--text-muted); text-transform: none; letter-spacing: 0; } html.codii-app.codii-app-page-index .section-header--lessons { align-items: flex-start; } html.codii-app.codii-app-page-index .section-header--lessons .section-header-copy p { max-width: 40rem; } /* Search field — accent focus ring */ html.codii-app .codii-app-sidebar label.codii-app-search-field:focus-within, html.codii-app .codii-app-sidebar .codii-app-search-field:focus-within { border-color: color-mix(in oklab, var(--accent) 45%, var(--border-strong)) !important; box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent) !important; } html.codii-app[data-theme='light'] .codii-app-sidebar label.codii-app-search-field:focus-within, html.codii-app[data-theme='light'] .codii-app-sidebar .codii-app-search-field:focus-within { box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 25%, transparent) !important; } /* Light theme — hero + rail */ html.codii-app[data-theme='light'].codii-app-page-index .overview-panel.overview-hero.overview-current { background: linear-gradient(155deg, var(--bg-surface-2) 0%, var(--bg-surface-1) 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 0 0 1px rgba(0, 0, 0, 0.04), 0 16px 40px rgba(0, 0, 0, 0.08); } html.codii-app[data-theme='light'].codii-app-page-index .overview-rail.overview-panel { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06); } html.codii-app[data-theme='light'].codii-app-page-index .overview-hero-marquee__viewport { background: color-mix(in oklab, var(--bg-surface-2) 70%, transparent); border-color: var(--border-default); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65); } html.codii-app[data-theme='light'].codii-app-page-index .overview-hero-marquee .language-logo, html.codii-app[data-theme='light'].codii-app-page-index .overview-hero-marquee-logo.language-logo { opacity: 1; filter: saturate(1.08) drop-shadow(0 2px 12px rgba(0, 0, 0, 0.12)); } html.codii-app[data-theme='light'].codii-app-page-index .overview-hero-marquee .language-logo:hover, html.codii-app[data-theme='light'].codii-app-page-index .overview-hero-marquee-logo.language-logo:hover { filter: saturate(1.12) drop-shadow(0 3px 14px rgba(0, 0, 0, 0.18)); } @media (prefers-reduced-motion: reduce) { html.codii-app.codii-app-page-index .btn-hero-cta.btn-primary, html.codii-app.codii-app-page-index .btn-ghost, html.codii-app.codii-app-page-index .stat-card.stat-card--strip { transition: none; } html.codii-app.codii-app-page-index .btn-hero-cta.btn-primary:hover { transform: none; } html.codii-app.codii-app-page-index .stat-card.stat-card--strip:hover { transform: none; } } /* Account page — full-width layout + multi-column grid */ html.codii-app .codii-account-page { width: 100%; max-width: none; box-sizing: border-box; } html.codii-app .codii-account-card { width: 100%; max-width: min(1600px, 100%); margin: 0 auto; padding: 1.35rem clamp(1rem, 2vw, 2rem) 1.75rem; box-sizing: border-box; } html.codii-app .codii-account-hero { width: 100%; padding: 0.25rem 0 0.15rem; } html.codii-app .codii-account-divider--hero { margin: 1.25rem 0 1.5rem; } html.codii-app .codii-account-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem 1.75rem; align-items: start; width: 100%; } @media (min-width: 900px) { html.codii-app .codii-account-grid { grid-template-columns: 1fr 1fr; } html.codii-app .codii-account-aside { grid-column: 1 / -1; } } @media (min-width: 1240px) { html.codii-app .codii-account-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(260px, 320px); gap: 1.5rem 2rem; } html.codii-app .codii-account-aside { grid-column: 3; align-self: stretch; } } html.codii-app .codii-account-panel { min-width: 0; padding: 1.2rem 1.35rem 1.35rem; border-radius: 12px; border: 1px solid var(--border-default); background: color-mix(in oklab, var(--bg-surface-1) 65%, var(--bg-surface-2)); } html.codii-app .codii-account-panel .codii-account-section:last-child { margin-bottom: 0; } html.codii-app .codii-account-panel .codii-account-danger-zone { margin-top: 1.35rem; } html.codii-app .codii-account-aside { min-width: 0; padding: 1.15rem 1.25rem 1.25rem; border-radius: 12px; border: 1px solid var(--border-default); background: color-mix(in oklab, var(--bg-surface-2) 80%, var(--border-default)); } html.codii-app .codii-account-aside-title { margin: 0 0 0.65rem; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); } html.codii-app .codii-account-aside-list { margin: 0; padding-left: 1.15rem; font-size: 0.84rem; line-height: 1.55; color: var(--text-secondary); } html.codii-app .codii-account-aside-list li { margin-bottom: 0.55rem; } html.codii-app .codii-account-aside-list li:last-child { margin-bottom: 0; } @media (min-width: 1100px) { html.codii-app .codii-account-avatar-wrap { width: 104px; height: 104px; } html.codii-app .codii-account-display-name { font-size: 1.55rem; } } html.codii-app .codii-account-off-hint a { color: var(--accent, #a78bfa); text-decoration: underline; text-underline-offset: 2px; } html.codii-app .codii-account-profile { margin-bottom: 0.25rem; } html.codii-app .codii-account-profile-main { display: flex; align-items: flex-start; gap: 1.15rem; flex-wrap: wrap; } html.codii-app .codii-account-avatar-wrap { position: relative; width: 88px; height: 88px; flex-shrink: 0; border-radius: 16px; background: var(--bg-surface-1); border: 1px solid var(--border-default); overflow: hidden; } html.codii-app .codii-account-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 16px; } html.codii-app .codii-account-avatar-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted); background: color-mix(in oklab, var(--bg-surface-2) 88%, var(--border-default)); } html.codii-app .codii-account-profile-meta { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.35rem; padding-top: 0.15rem; } html.codii-app .codii-account-display-name { margin: 0; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2; user-select: text; } html.codii-app .codii-account-email { margin: 0; font-size: 0.9rem; color: var(--text-muted); word-break: break-all; } html.codii-app .codii-account-badge { display: inline-flex; align-items: center; width: fit-content; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid var(--border-default); } html.codii-app .codii-account-badge--ok { color: color-mix(in oklab, var(--success, #8a9a8e) 92%, var(--text-primary)); background: color-mix(in oklab, var(--success, #8a9a8e) 14%, var(--bg-surface-1)); border-color: color-mix(in oklab, var(--success, #8a9a8e) 35%, var(--border-default)); } html.codii-app .codii-account-badge--warn { color: var(--text-secondary); background: var(--bg-surface-1); } html.codii-app .codii-account-divider { height: 1px; background: var(--border-default); margin: 1.35rem 0 1.15rem; opacity: 0.85; } html.codii-app .codii-account-section { margin-bottom: 1.35rem; } html.codii-app .codii-account-section-title { margin: 0 0 0.2rem; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } html.codii-app .codii-account-section-desc { margin: 0 0 0.65rem; font-size: 0.82rem; color: var(--text-muted); line-height: 1.45; } html.codii-app .codii-account-field-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; } html.codii-app .codii-account-field-row .codii-account-input { flex: 1 1 180px; min-width: 0; } html.codii-app .codii-account-file-label { position: relative; display: inline-flex; align-items: center; cursor: pointer; gap: 0.5rem; } html.codii-app .codii-account-file-input { position: absolute; width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; z-index: -1; } html.codii-app .codii-account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--border-default); width: 100%; } html.codii-app .codii-account-logout { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-strong, var(--border-default)); } html.codii-app .codii-account-logout:hover { color: var(--text-primary); border-color: var(--text-muted); } html.codii-app .codii-account-link-settings { font-size: 0.88rem; color: var(--text-muted); text-decoration: none; } html.codii-app .codii-account-link-settings:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; } html.codii-app .codii-account-msg { margin: 1rem 0 0; font-size: 0.88rem; padding: 0.55rem 0.7rem; border-radius: var(--radius-sm, 8px); border: 1px solid var(--border-default); } html.codii-app .codii-account-msg--ok { background: color-mix(in oklab, var(--success, #8a9a8e) 12%, var(--bg-surface-1)); color: var(--text-primary); } html.codii-app .codii-account-msg--err { background: color-mix(in oklab, var(--danger, #9a8588) 14%, var(--bg-surface-1)); color: var(--text-primary); } html.codii-app .codii-account-stack { display: flex; flex-direction: column; gap: 0.35rem; max-width: none; width: 100%; } html.codii-app .codii-account-inline-label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-top: 0.35rem; } html.codii-app .codii-account-inline-label:first-child { margin-top: 0; } html.codii-app .codii-account-input-full { width: 100%; box-sizing: border-box; } html.codii-app .codii-account-danger-zone { padding: 1rem 1.1rem; border-radius: var(--radius-sm, 8px); border: 1px solid color-mix(in oklab, var(--danger, #9a8588) 35%, var(--border-default)); background: color-mix(in oklab, var(--danger, #9a8588) 6%, var(--bg-surface-1)); } html.codii-app .codii-account-danger-zone .codii-account-section-title { color: color-mix(in oklab, var(--danger, #9a8588) 55%, var(--text-primary)); } html.codii-app .codii-account-deletion-code-banner { font-family: ui-monospace, monospace; letter-spacing: 0.12em; font-size: 0.95rem; padding: 0.65rem 0.75rem; border-radius: var(--radius-sm, 8px); background: color-mix(in oklab, var(--success, #8a9a8e) 12%, var(--bg-surface-1)); border: 1px solid var(--border-default); margin-bottom: 0.75rem; } html.codii-app .codii-account-delete-confirm-btn { margin-top: 0.5rem; width: fit-content; background: color-mix(in oklab, var(--danger, #9a8588) 22%, var(--bg-surface-2)); color: var(--text-primary); border: 1px solid color-mix(in oklab, var(--danger, #9a8588) 45%, var(--border-default)); } html.codii-app .codii-account-delete-confirm-btn:hover { filter: brightness(1.08); } /* Account — plan summary (CodiiPlan / localStorage) */ html.codii-app .codii-account-plan { width: 100%; margin-bottom: 0.35rem; } html.codii-app .codii-account-plan-heading { margin: 0 0 0.4rem; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } html.codii-app .codii-account-plan-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; } html.codii-app .codii-account-plan-head-copy { min-width: 0; } html.codii-app .codii-account-plan-tier-line { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem 0.85rem; } html.codii-app .codii-account-plan-tier-name { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.15; } html.codii-app .codii-account-plan-tier-name--premium { color: color-mix(in oklab, var(--accent, #a78bfa) 78%, var(--text-primary)); } html.codii-app .codii-account-plan-tier-name--infinite { color: color-mix(in oklab, #5eead4 42%, var(--accent, #a78bfa)); } @supports (-webkit-background-clip: text) or (background-clip: text) { html.codii-app .codii-account-plan-tier-name--infinite { background: linear-gradient( 105deg, color-mix(in oklab, var(--accent, #a78bfa) 85%, #fff), color-mix(in oklab, #5eead4 55%, var(--accent, #a78bfa)) ); -webkit-background-clip: text; background-clip: text; color: transparent; } } html.codii-app .codii-account-plan-price { font-size: 1rem; font-weight: 600; color: var(--text-secondary); } html.codii-app .codii-account-plan-billing { margin: 0.55rem 0 0; font-size: 0.84rem; line-height: 1.4; color: var(--text-muted); } html.codii-app .codii-account-plan-cta { flex-shrink: 0; } html.codii-app .codii-account-plan-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(188px, 1fr)); gap: 1rem 1.25rem; margin-bottom: 1.35rem; } html.codii-app .codii-account-plan-metric { padding: 0.88rem 1.05rem; border-radius: 10px; border: 1px solid var(--border-default); background: color-mix(in oklab, var(--bg-app, #09090b) 35%, var(--bg-surface-2)); } html.codii-app .codii-account-plan-metric-label { display: block; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 0.38rem; } html.codii-app .codii-account-plan-metric-value { margin: 0; font-size: 0.9rem; line-height: 1.45; color: var(--text-primary); font-weight: 500; } html.codii-app .codii-account-plan-features-title { margin: 0 0 0.55rem; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } html.codii-app .codii-account-plan-features { margin: 0; padding-left: 1.2rem; font-size: 0.88rem; line-height: 1.55; color: var(--text-secondary); } html.codii-app .codii-account-plan-features li { margin-bottom: 0.42rem; } html.codii-app .codii-account-plan-features li:last-child { margin-bottom: 0; } html.codii-app .codii-account-plan-local-hint { margin: 1.05rem 0 0; font-size: 0.74rem; line-height: 1.45; color: var(--text-muted); max-width: 52rem; } html.codii-app .codii-account-plan-stripe-actions { margin: 0.85rem 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; } html.codii-app .codii-account-plan-stripe-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } html.codii-app .codii-account-plan-cancel-note { margin: 0; font-size: 0.72rem; line-height: 1.4; color: var(--text-muted); max-width: 36rem; } /* Settings — preference toggles (layout + switch live in styles.css; theme tokens only) */ html.codii-app .settings-field.settings-preference-row { border-bottom-color: var(--border-subtle, rgba(255, 255, 255, 0.08)); } html.codii-app .settings-container .settings-preference-check:checked { background: linear-gradient( 135deg, color-mix(in oklab, var(--accent, #a78bfa) 92%, #fff), color-mix(in oklab, var(--accent, #a78bfa) 55%, #312e81) ); } /* —— Header: neutral “Sign in” (no legacy purple glass) + signed-in account pill —— */ html.codii-app .tl-nav.tenzy-site-nav .header-actions > .btn.btn-secondary, html.codii-app .tenzy-desktop-only .header-content .header-actions > .btn.btn-secondary { background: var(--bg-surface-1, rgba(15, 18, 28, 0.92)) !important; color: var(--text-secondary, rgba(226, 232, 240, 0.92)) !important; border: 1px solid var(--border-default, rgba(148, 163, 184, 0.22)) !important; box-shadow: none !important; backdrop-filter: none !important; min-height: 36px; padding: 0.4rem 0.85rem; font-weight: 600; font-size: 0.82rem; border-radius: 10px; } html.codii-app .tl-nav.tenzy-site-nav .header-actions > .btn.btn-secondary:hover, html.codii-app .tenzy-desktop-only .header-content .header-actions > .btn.btn-secondary:hover { background: var(--bg-hover, rgba(30, 34, 48, 0.95)) !important; border-color: var(--border-strong, rgba(148, 163, 184, 0.35)) !important; color: var(--text-primary, #f8fafc) !important; transform: none; } a.tenzy-header-account-pill { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 36px; padding: 0.2rem 0.55rem 0.2rem 0.2rem; border-radius: 999px; text-decoration: none; background: var(--bg-surface-1, rgba(15, 18, 28, 0.92)); border: 1px solid var(--border-default, rgba(148, 163, 184, 0.22)); color: var(--text-primary, #f1f5f9); font-size: 0.8rem; font-weight: 600; max-width: 200px; transition: background 0.15s ease, border-color 0.15s ease; } a.tenzy-header-account-pill:hover { background: var(--bg-hover, rgba(30, 34, 48, 0.95)); border-color: var(--border-strong, rgba(148, 163, 184, 0.35)); } .tenzy-header-account-pill__img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08)); } .tenzy-header-account-pill__initials { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; background: color-mix(in oklab, var(--accent, #2dd4bf) 22%, var(--bg-surface-2, #1a1d2a)); border: 1px solid var(--border-default, rgba(148, 163, 184, 0.22)); color: var(--text-primary, #f8fafc); } .tenzy-header-account-pill__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tenzy-topbar-account { flex-shrink: 0; display: flex; align-items: center; } .tenzy-topbar-account__link { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--border-default, rgba(148, 163, 184, 0.22)); background: var(--bg-surface-2, rgba(22, 26, 36, 0.95)); text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease; } .tenzy-topbar-account__link:hover { background: var(--bg-hover, rgba(30, 34, 48, 0.95)); border-color: var(--border-strong, rgba(148, 163, 184, 0.35)); } .tenzy-topbar-account__img { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; } .tenzy-topbar-account__initials { font-size: 0.65rem; font-weight: 700; color: var(--text-primary, #f8fafc); } /* -------------------------------------------------------------------------- */ /* auth.html — beat global --cta-* + ui-redesign (no off-white slab / purple tabs) */ /* -------------------------------------------------------------------------- */ html.codii-app.tenzy-site .tenzy-auth-main .auth-tabs button { background: var(--bg-surface-2) !important; background-image: none !important; border: 1px solid var(--border-default) !important; color: var(--text-secondary) !important; box-shadow: none !important; } html.codii-app.tenzy-site .tenzy-auth-main .auth-tabs button:hover { background: var(--bg-surface-3) !important; border-color: var(--border-strong) !important; color: var(--text-primary) !important; } html.codii-app.tenzy-site .tenzy-auth-main .auth-tabs button.active { background: var(--bg-surface-3) !important; border-color: rgba(45, 212, 191, 0.48) !important; color: var(--text-primary) !important; box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.14) !important; } html.codii-app.tenzy-site .tenzy-auth-main button.auth-submit:not(.auth-submit--ghost):not(.auth-submit--link) { background: #0f766e !important; background-image: none !important; color: #ecfdf5 !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 8px 24px rgba(0, 0, 0, 0.38) !important; text-shadow: none !important; } html.codii-app.tenzy-site .tenzy-auth-main button.auth-submit:not(.auth-submit--ghost):not(.auth-submit--link):hover:not(:disabled) { background: #0d9488 !important; color: #f0fdfa !important; border-color: rgba(255, 255, 255, 0.18) !important; filter: none !important; } html.codii-app.tenzy-site .tenzy-auth-main button.auth-submit--ghost { background: var(--bg-surface-2) !important; color: var(--text-primary) !important; border: 1px solid var(--border-default) !important; box-shadow: none !important; } html.codii-app.tenzy-site .tenzy-auth-main button.auth-submit--ghost:hover:not(:disabled) { background: var(--bg-surface-3) !important; border-color: var(--border-strong) !important; } html.codii-app.tenzy-site .tenzy-auth-main button.auth-submit--link { color: var(--text-secondary) !important; border-color: var(--border-default) !important; } html.codii-app.tenzy-site .tenzy-auth-main .auth-field input:focus { border-color: rgba(45, 212, 191, 0.55) !important; box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.22) !important; }