@import url('/uniform-theme.css'); /* ================================================================ PRO THEME — tutos.jorisbarbe.fr Chargé sur toutes les pages. Activé via [data-style="pro"] sur . Le mode sombre/clair est géré via [data-theme="dark"] sur . ================================================================ */ @import url("https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700&family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@400;500&display=swap"); /* ── Variables : Pro — mode clair ────────────────────────────── */ [data-style="pro"] { /* Remappage des variables cyberpunk → palette pro */ --bg-dark: #faf8f4; --bg-card: #ffffff; --bg-card-hover: #f5f0e8; --bg-code: #f5f0e8; --bg-panel: #ffffff; /* Neons → accents pro */ --neon-cyan: #c9a84c; /* → gold */ --neon-pink: #c9a84c; /* → gold */ --neon-green: #2d9b6f; /* vert pro */ --neon-yellow: #c9a84c; /* → gold */ --neon-orange: #c9a84c; /* → gold */ --neon-purple: #1a2d45; /* → navy-mid */ --neon-blue: #0d1b2a; /* → navy */ --neon-red: #c0392b; /* rouge pro */ --text-primary: #0d1b2a; --text-muted: #617287; --text-dim: #8e9aae; --correct: #2d9b6f; --incorrect: #c0392b; /* Variables pro supplémentaires */ --navy: #0d1b2a; --navy-mid: #1a2d45; --cream: #f5f0e8; --cream-dark: #ece5d8; --gold: #c9a84c; --gold-light: #e8c97a; --border-soft: #ddd4c4; --border-strong: #cbbda8; --shadow-pro: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04); --shadow-md-pro: 0 8px 24px rgba(13,27,42,0.08); --shadow-lg-pro: 0 18px 40px rgba(13,27,42,0.12); --radius-pro: 12px; } /* ── Variables : Pro — mode sombre ───────────────────────────── */ [data-style="pro"][data-theme="dark"] { --bg-dark: #07101c; --bg-card: #102033; --bg-card-hover: #14293f; --bg-code: #060e17; --bg-panel: #102033; --neon-cyan: #e8c97a; --neon-pink: #e8c97a; --neon-green: #2d9b6f; --neon-yellow: #e8c97a; --neon-orange: #e8c97a; --neon-purple: rgba(237,231,219,0.65); --neon-blue: rgba(237,231,219,0.65); --neon-red: #e05c4b; --text-primary: #ede7db; --text-muted: #d8d1c4; --text-dim: #b8ad9e; --correct: #2d9b6f; --incorrect: #e05c4b; --gold: #c9a84c; --gold-light: #e8c97a; --cream: rgba(237,231,219,0.06); --cream-dark: rgba(237,231,219,0.10); --border-soft: rgba(201,168,76,0.16); --border-strong: rgba(201,168,76,0.28); --shadow-pro: 0 2px 12px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.35); --shadow-md-pro: 0 6px 20px rgba(0,0,0,0.50); --shadow-lg-pro: 0 8px 40px rgba(0,0,0,0.60); } /* ── Transitions globales ────────────────────────────────────── */ [data-style="pro"] body, [data-style="pro"] .tool-card, [data-style="pro"] .card, [data-style="pro"] .panel, [data-style="pro"] input, [data-style="pro"] textarea, [data-style="pro"] select, [data-style="pro"] button:not(.tutos-ctrl-btn), [data-style="pro"] pre, [data-style="pro"] code, [data-style="pro"] table, [data-style="pro"] .question-card, [data-style="pro"] .exercise-box { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease !important; } /* ── Masquer les décorations cyberpunk ───────────────────────── */ [data-style="pro"] .grid-bg, [data-style="pro"] .orb, [data-style="pro"] .orb-1, [data-style="pro"] .orb-2, [data-style="pro"] .orb-3, [data-style="pro"] .logo-glow, [data-style="pro"] .scanline-overlay, [data-style="pro"] .scan-line { display: none !important; } /* ── Body ────────────────────────────────────────────────────── */ [data-style="pro"] body { font-family: 'DM Sans', sans-serif !important; background: var(--bg-dark) !important; color: var(--text-primary) !important; } /* ── Typographie : fonts ─────────────────────────────────────── */ [data-style="pro"] .logo, [data-style="pro"] h1.logo, [data-style="pro"] .section-title, [data-style="pro"] .tool-title, [data-style="pro"] .header-title, [data-style="pro"] .card-title, [data-style="pro"] .exercise-title, [data-style="pro"] .question-title, [data-style="pro"] .page-title, [data-style="pro"] h1, [data-style="pro"] h2, [data-style="pro"] h3 { font-family: 'Syne', sans-serif !important; } [data-style="pro"] .logo { 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; letter-spacing: -0.02em !important; text-shadow: none !important; filter: none !important; font-size: clamp(1.6rem, 4vw, 2.4rem) !important; } [data-style="pro"] .subtitle { letter-spacing: 0.04em !important; text-transform: none !important; color: var(--text-muted) !important; font-family: 'DM Sans', sans-serif !important; } /* ── Header ──────────────────────────────────────────────────── */ [data-style="pro"] .header { background: var(--navy, #0d1b2a) !important; position: relative; overflow: hidden; } [data-style="pro"] .header::before { content: ''; position: absolute; top: -60px; right: -60px; width: 260px; height: 260px; border-radius: 50%; background: rgba(201,168,76,0.08); pointer-events: none; } [data-style="pro"] .header .logo, [data-style="pro"] .header h1 { -webkit-text-fill-color: white !important; color: white !important; } [data-style="pro"] .header .subtitle, [data-style="pro"] .header p { color: rgba(255,255,255,0.6) !important; } /* ── Cards ───────────────────────────────────────────────────── */ [data-style="pro"] .tool-card { background: var(--bg-card) !important; border: 1px solid var(--border-soft) !important; border-radius: var(--radius-pro) !important; box-shadow: var(--shadow-md-pro) !important; } [data-style="pro"] .tool-card:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-lg-pro) !important; border-color: rgba(201,168,76,0.40) !important; } [data-style="pro"][data-theme="dark"] .tool-card { border-color: var(--border-soft) !important; box-shadow: 0 2px 16px rgba(0,0,0,0.4) !important; } [data-style="pro"][data-theme="dark"] .tool-card:hover { border-color: rgba(201,168,76,0.35) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.55) !important; } [data-style="pro"] .tool-card::before { background: var(--gold, #c9a84c) !important; } /* ── Section title ───────────────────────────────────────────── */ [data-style="pro"] .section-title { color: var(--text-muted) !important; font-size: 0.75rem !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; font-weight: 600 !important; } [data-style="pro"] .section-title::after { background: linear-gradient(90deg, var(--border-strong), transparent) !important; } /* ── Badges / tags ───────────────────────────────────────────── */ [data-style="pro"] .tool-badge { background: var(--bg-dark) !important; color: var(--gold) !important; border: 1px solid var(--border-soft) !important; } [data-style="pro"] .tool-tag { background: var(--bg-dark) !important; color: var(--text-muted) !important; border: 1px solid var(--border-soft) !important; } /* ── Arrow ───────────────────────────────────────────────────── */ [data-style="pro"] .tool-arrow { color: var(--gold) !important; } /* ── Status bar ──────────────────────────────────────────────── */ [data-style="pro"] .status-bar { background: var(--bg-card) !important; border-color: rgba(45,155,111,0.35) !important; box-shadow: var(--shadow-pro) !important; color: var(--text-muted) !important; } [data-style="pro"] .status-dot { background: #2d9b6f !important; } /* ── Back link ───────────────────────────────────────────────── */ [data-style="pro"] .back-link { color: var(--gold) !important; } /* ── Footer ──────────────────────────────────────────────────── */ [data-style="pro"] .footer { background: transparent !important; border-top: 1px solid var(--border-soft) !important; } [data-style="pro"] .footer-text, [data-style="pro"] .footer p { color: var(--text-muted) !important; } [data-style="pro"] .footer-text span, [data-style="pro"] .footer span { color: var(--gold) !important; } /* ── Code / pre ──────────────────────────────────────────────── */ [data-style="pro"] pre, [data-style="pro"] .code-block, [data-style="pro"] .code-snippet { font-family: 'DM Mono', monospace !important; background: var(--bg-card) !important; color: var(--text-primary) !important; border: 1px solid var(--border-soft) !important; box-shadow: var(--shadow-pro) !important; text-shadow: none !important; } [data-style="pro"] code { font-family: 'DM Mono', monospace !important; background: var(--bg-code) !important; color: var(--navy, #0d1b2a) !important; } [data-style="pro"][data-theme="dark"] code { background: rgba(201,168,76,0.08) !important; color: var(--gold-light) !important; } /* ── Tables ──────────────────────────────────────────────────── */ [data-style="pro"] table { background: var(--bg-card) !important; border: 1px solid var(--border-soft) !important; box-shadow: var(--shadow-pro) !important; } [data-style="pro"] th { background: var(--bg-dark) !important; color: var(--text-muted) !important; font-family: 'Syne', sans-serif !important; font-size: 0.75rem !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; border-bottom: 1px solid var(--border-strong) !important; } [data-style="pro"] td { color: var(--text-primary) !important; border-bottom: 1px solid var(--border-soft) !important; } [data-style="pro"] tr:hover td { background: var(--bg-dark) !important; } /* ── Conteneurs génériques ───────────────────────────────────── */ [data-style="pro"] .card, [data-style="pro"] .panel, [data-style="pro"] .question-card, [data-style="pro"] .exercise-box, [data-style="pro"] .result-box, [data-style="pro"] .info-box, [data-style="pro"] .section-card { background: var(--bg-card) !important; border: 1px solid var(--border-soft) !important; box-shadow: var(--shadow-pro) !important; border-radius: var(--radius-pro) !important; } [data-style="pro"][data-theme="dark"] .card, [data-style="pro"][data-theme="dark"] .panel, [data-style="pro"][data-theme="dark"] .question-card, [data-style="pro"][data-theme="dark"] .exercise-box { border-color: rgba(201,168,76,0.12) !important; } /* ── Inputs / Forms ──────────────────────────────────────────── */ [data-style="pro"] input:not([type="radio"]):not([type="checkbox"]):not([type="range"]), [data-style="pro"] textarea, [data-style="pro"] select { background: var(--bg-dark) !important; color: var(--text-primary) !important; border: 1px solid var(--border-strong) !important; border-radius: 8px !important; font-family: 'DM Sans', sans-serif !important; box-shadow: none !important; } [data-style="pro"] input:focus, [data-style="pro"] textarea:focus, [data-style="pro"] select:focus { border-color: var(--gold) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(201,168,76,0.15) !important; } /* ── Boutons (UI, pas les toggles) ───────────────────────────── */ [data-style="pro"] button:not(.tutos-ctrl-btn) { font-family: 'Syne', sans-serif !important; background: var(--cream, #f5f0e8) !important; color: var(--navy, #0d1b2a) !important; border: 1px solid rgba(13,27,42,0.18) !important; border-radius: 8px !important; text-shadow: none !important; box-shadow: var(--shadow-pro) !important; } [data-style="pro"] button:not(.tutos-ctrl-btn):hover { background: var(--cream-dark, #ece5d8) !important; border-color: rgba(13,27,42,0.32) !important; box-shadow: var(--shadow-md-pro) !important; } [data-style="pro"][data-theme="dark"] button:not(.tutos-ctrl-btn) { background: var(--bg-card) !important; color: var(--text-primary) !important; border-color: var(--border-strong) !important; } [data-style="pro"][data-theme="dark"] button:not(.tutos-ctrl-btn):hover { background: rgba(201,168,76,0.08) !important; border-color: rgba(201,168,76,0.35) !important; } /* ── Feedbacks correct / incorrect ──────────────────────────── */ [data-style="pro"] .correct, [data-style="pro"] .success, [data-style="pro"] .btn-correct, [data-style="pro"] .answer-correct { background: rgba(45,155,111,0.10) !important; border-color: rgba(45,155,111,0.40) !important; color: #1a7a52 !important; box-shadow: none !important; text-shadow: none !important; } [data-style="pro"] .incorrect, [data-style="pro"] .error, [data-style="pro"] .btn-incorrect, [data-style="pro"] .answer-incorrect { background: rgba(192,57,43,0.08) !important; border-color: rgba(192,57,43,0.35) !important; color: #a93226 !important; box-shadow: none !important; text-shadow: none !important; } [data-style="pro"][data-theme="dark"] .correct, [data-style="pro"][data-theme="dark"] .success { color: #3ab37e !important; background: rgba(45,155,111,0.12) !important; } [data-style="pro"][data-theme="dark"] .incorrect, [data-style="pro"][data-theme="dark"] .error { color: #e05c4b !important; background: rgba(224,92,75,0.10) !important; } /* ── Progress bars ───────────────────────────────────────────── */ [data-style="pro"] .progress-bar, [data-style="pro"] .progress-track { background: var(--border-soft) !important; border-radius: 999px !important; box-shadow: none !important; } [data-style="pro"] .progress-fill, [data-style="pro"] .progress-value { background: var(--gold, #c9a84c) !important; box-shadow: none !important; } /* ── Scrollbar ───────────────────────────────────────────────── */ [data-style="pro"] ::-webkit-scrollbar { width: 6px; height: 6px; } [data-style="pro"] ::-webkit-scrollbar-track { background: var(--bg-dark) !important; } [data-style="pro"] ::-webkit-scrollbar-thumb { background: var(--border-strong) !important; border-radius: 999px; } [data-style="pro"] ::-webkit-scrollbar-thumb:hover { background: var(--gold) !important; } /* ── Liens ───────────────────────────────────────────────────── */ [data-style="pro"] a { color: var(--navy, #0d1b2a) !important; } [data-style="pro"] a:hover { color: var(--gold) !important; } [data-style="pro"][data-theme="dark"] a { color: var(--text-primary) !important; } [data-style="pro"][data-theme="dark"] a:hover { color: var(--gold-light) !important; } /* Coming soon overlay */ [data-style="pro"] .coming-soon-overlay { background: rgba(250,248,244,0.80) !important; } [data-style="pro"][data-theme="dark"] .coming-soon-overlay { background: rgba(12,25,39,0.80) !important; } [data-style="pro"] .coming-soon-text { color: var(--text-muted) !important; border-color: var(--border-strong) !important; font-family: 'Syne', sans-serif !important; } /* ================================================================ CONTRÔLES — Boutons de toggle style & thème ================================================================ */ .tutos-controls { position: fixed; top: 16px; right: 16px; z-index: 9999; display: flex; gap: 8px; align-items: center; } /* Style cyberpunk pour les boutons (défaut) */ .tutos-ctrl-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(0, 245, 255, 0.30); background: rgba(18, 18, 26, 0.85); color: rgba(0, 245, 255, 0.70); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 0; line-height: 1; } .tutos-ctrl-btn:hover:not(:disabled) { border-color: rgba(0, 245, 255, 0.85); color: #00f5ff; box-shadow: 0 0 14px rgba(0, 245, 255, 0.30); transform: scale(1.08); } .tutos-ctrl-btn:disabled { opacity: 0.28; cursor: default; } /* Style pro pour les boutons */ [data-style="pro"] .tutos-ctrl-btn { background: var(--bg-card) !important; border-color: var(--border-strong) !important; color: var(--text-muted) !important; box-shadow: var(--shadow-pro) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } [data-style="pro"] .tutos-ctrl-btn:hover:not(:disabled) { border-color: var(--gold) !important; color: var(--gold) !important; box-shadow: var(--shadow-md-pro) !important; transform: rotate(14deg) !important; } [data-style="pro"][data-theme="dark"] .tutos-ctrl-btn { background: #0c1927 !important; border-color: rgba(201,168,76,0.22) !important; color: rgba(232,201,122,0.60) !important; } [data-style="pro"][data-theme="dark"] .tutos-ctrl-btn:hover:not(:disabled) { background: rgba(201,168,76,0.08) !important; border-color: rgba(201,168,76,0.50) !important; color: var(--gold-light) !important; } /* Icônes dans les boutons */ .tutos-ctrl-btn span { display: flex; align-items: center; justify-content: center; line-height: 1; } /* ================================================================ EXTENSIONS PRO — harmonisation cross-page ================================================================ */ [data-style="pro"] { color-scheme: light; } [data-style="pro"][data-theme="dark"] { color-scheme: dark; } [data-style="pro"] body { background: radial-gradient(circle at top left, rgba(201,168,76,0.10), transparent 26%), linear-gradient(180deg, #fcfbf8 0%, #f3eee4 100%) !important; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } [data-style="pro"][data-theme="dark"] body { background: radial-gradient(circle at top left, rgba(201,168,76,0.10), transparent 24%), linear-gradient(180deg, #07101c 0%, #091524 100%) !important; } [data-style="pro"] body::before { content: none !important; display: none !important; } [data-style="pro"] .bg-animation, [data-style="pro"] .clock-bg, [data-style="pro"] .particles, [data-style="pro"] .gears-container, [data-style="pro"] .card-glow { display: none !important; } [data-style="pro"] .container, [data-style="pro"] .main, [data-style="pro"] .nav { position: relative; z-index: 2; } /* ── Surfaces / panneaux ─────────────────────────────────────── */ [data-style="pro"] .stats-bar, [data-style="pro"] .score-bar, [data-style="pro"] .filter-bar, [data-style="pro"] .filters, [data-style="pro"] .mode-bar, [data-style="pro"] .controls, [data-style="pro"] .tab-bar, [data-style="pro"] .toc, [data-style="pro"] .cat-nav, [data-style="pro"] .quick-actions, [data-style="pro"] .progress-section, [data-style="pro"] .progress-wrap, [data-style="pro"] .topbar, [data-style="pro"] .top-bar, [data-style="pro"] .game-top-bar { background: rgba(255,255,255,0.72) !important; border: 1px solid rgba(13,27,42,0.08) !important; border-radius: 16px !important; box-shadow: var(--shadow-pro) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } [data-style="pro"][data-theme="dark"] .stats-bar, [data-style="pro"][data-theme="dark"] .score-bar, [data-style="pro"][data-theme="dark"] .filter-bar, [data-style="pro"][data-theme="dark"] .filters, [data-style="pro"][data-theme="dark"] .mode-bar, [data-style="pro"][data-theme="dark"] .controls, [data-style="pro"][data-theme="dark"] .tab-bar, [data-style="pro"][data-theme="dark"] .toc, [data-style="pro"][data-theme="dark"] .cat-nav, [data-style="pro"][data-theme="dark"] .quick-actions, [data-style="pro"][data-theme="dark"] .progress-section, [data-style="pro"][data-theme="dark"] .progress-wrap, [data-style="pro"][data-theme="dark"] .topbar, [data-style="pro"][data-theme="dark"] .top-bar, [data-style="pro"][data-theme="dark"] .game-top-bar { background: rgba(12,25,39,0.82) !important; border-color: rgba(201,168,76,0.16) !important; } [data-style="pro"] .filter-bar, [data-style="pro"] .filters, [data-style="pro"] .mode-bar, [data-style="pro"] .toc, [data-style="pro"] .cat-nav, [data-style="pro"] .quick-actions, [data-style="pro"] .controls { padding: 12px !important; } [data-style="pro"] .topbar, [data-style="pro"] .top-bar, [data-style="pro"] .game-top-bar { padding: 14px 18px !important; } [data-style="pro"] .cheat-card, [data-style="pro"] .cmd-card, [data-style="pro"] .file-block, [data-style="pro"] .q-card, [data-style="pro"] .cat-card, [data-style="pro"] .option, [data-style="pro"] .choice-btn, [data-style="pro"] .score-item, [data-style="pro"] .cmd-prompt, [data-style="pro"] .modal, [data-style="pro"] .results-card, [data-style="pro"] .task-item, [data-style="pro"] .result-section, [data-style="pro"] .note, [data-style="pro"] .cmd, [data-style="pro"] .check, [data-style="pro"] .mission-panel, [data-style="pro"] .vim-container, [data-style="pro"] .completion-bar, [data-style="pro"] .toast, [data-style="pro"] .callout-warn, [data-style="pro"] .callout-new { background: var(--bg-card) !important; border: 1px solid var(--border-soft) !important; border-radius: 16px !important; box-shadow: var(--shadow-pro) !important; color: var(--text-primary) !important; } [data-style="pro"] .cheat-card:hover, [data-style="pro"] .cmd-card:hover, [data-style="pro"] .q-card:hover, [data-style="pro"] .task-item:hover { border-color: rgba(201,168,76,0.30) !important; box-shadow: var(--shadow-md-pro) !important; } [data-style="pro"][data-theme="dark"] .cheat-card, [data-style="pro"][data-theme="dark"] .cmd-card, [data-style="pro"][data-theme="dark"] .file-block, [data-style="pro"][data-theme="dark"] .q-card, [data-style="pro"][data-theme="dark"] .cat-card, [data-style="pro"][data-theme="dark"] .option, [data-style="pro"][data-theme="dark"] .choice-btn, [data-style="pro"][data-theme="dark"] .score-item, [data-style="pro"][data-theme="dark"] .cmd-prompt, [data-style="pro"][data-theme="dark"] .modal, [data-style="pro"][data-theme="dark"] .results-card, [data-style="pro"][data-theme="dark"] .task-item, [data-style="pro"][data-theme="dark"] .result-section, [data-style="pro"][data-theme="dark"] .note, [data-style="pro"][data-theme="dark"] .cmd, [data-style="pro"][data-theme="dark"] .check, [data-style="pro"][data-theme="dark"] .mission-panel, [data-style="pro"][data-theme="dark"] .vim-container, [data-style="pro"][data-theme="dark"] .completion-bar, [data-style="pro"][data-theme="dark"] .toast, [data-style="pro"][data-theme="dark"] .callout-warn, [data-style="pro"][data-theme="dark"] .callout-new { border-color: rgba(201,168,76,0.14) !important; } [data-style="pro"] .task-item { transform: none !important; } [data-style="pro"] .task-item.checked { background: rgba(45,155,111,0.10) !important; border-color: rgba(45,155,111,0.30) !important; } [data-style="pro"] .custom-checkbox { border-color: var(--border-strong) !important; background: var(--bg-dark) !important; } [data-style="pro"] .task-item.checked .custom-checkbox { background: rgba(45,155,111,0.12) !important; border-color: rgba(45,155,111,0.38) !important; } [data-style="pro"] .nav-bar, [data-style="pro"] .reset-bar, [data-style="pro"] .nav-chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; } /* ── Titres / textes ─────────────────────────────────────────── */ [data-style="pro"] .section-header, [data-style="pro"] .cheat-section .section-title, [data-style="pro"] .phase-title, [data-style="pro"] .results-title, [data-style="pro"] .completion-title, [data-style="pro"] .mission-title, [data-style="pro"] .title, [data-style="pro"] .header h1 { color: var(--text-primary) !important; letter-spacing: -0.01em !important; text-transform: none !important; } [data-style="pro"] .section-header, [data-style="pro"] .cheat-section .section-title { font-size: clamp(1rem, 1.5vw, 1.2rem) !important; font-weight: 700 !important; } [data-style="pro"] .section-header::after, [data-style="pro"] .cheat-section .section-title::after { background: linear-gradient(90deg, rgba(13,27,42,0.12), transparent) !important; } [data-style="pro"][data-theme="dark"] .section-header::after, [data-style="pro"][data-theme="dark"] .cheat-section .section-title::after { background: linear-gradient(90deg, rgba(201,168,76,0.24), transparent) !important; } [data-style="pro"] .tool-description, [data-style="pro"] .card-desc, [data-style="pro"] .cmd-desc, [data-style="pro"] .result-details, [data-style="pro"] .completion-text, [data-style="pro"] .explanation, [data-style="pro"] .note, [data-style="pro"] .file-desc, [data-style="pro"] .mission-desc, [data-style="pro"] .option-text, [data-style="pro"] .nav-info, [data-style="pro"] .welcome p, [data-style="pro"] #packLoadPanel p { color: var(--text-muted) !important; opacity: 1 !important; } /* Questions doivent rester très lisibles en Pro, surtout en mode sombre */ [data-style="pro"] .question-text, [data-style="pro"] .q-text { color: var(--text-primary) !important; opacity: 1 !important; } [data-style="pro"] .stat-value, [data-style="pro"] .score-value, [data-style="pro"] .val, [data-style="pro"] .stat-val, [data-style="pro"] .result-time, [data-style="pro"] .results-score, [data-style="pro"] .score { background: none !important; -webkit-text-fill-color: unset !important; text-shadow: none !important; color: var(--navy, #0d1b2a) !important; } [data-style="pro"][data-theme="dark"] .stat-value, [data-style="pro"][data-theme="dark"] .score-value, [data-style="pro"][data-theme="dark"] .val, [data-style="pro"][data-theme="dark"] .stat-val, [data-style="pro"][data-theme="dark"] .result-time, [data-style="pro"][data-theme="dark"] .results-score, [data-style="pro"][data-theme="dark"] .score { color: var(--gold-light) !important; } [data-style="pro"] .score-value.correct, [data-style="pro"] .score-value.good, [data-style="pro"] .stat-value.good, [data-style="pro"] .stat-val.good, [data-style="pro"] .result-details .positive { color: #1a7a52 !important; } [data-style="pro"] .score-value.wrong, [data-style="pro"] .score-value.bad, [data-style="pro"] .stat-value.bad, [data-style="pro"] .result-details .negative { color: #a93226 !important; } [data-style="pro"] .score-value.total, [data-style="pro"] .score-value.pct, [data-style="pro"] .stat-value.neutral, [data-style="pro"] .q-number, [data-style="pro"] .question-num, [data-style="pro"] .file-name { color: var(--gold) !important; } [data-style="pro"] .welcome h2, [data-style="pro"] .game-cat-title, [data-style="pro"] .mission-title, [data-style="pro"] .results-title, [data-style="pro"] .modal h2 { color: var(--text-primary) !important; background: none !important; -webkit-text-fill-color: unset !important; text-shadow: none !important; } /* ── Badges / métadonnées ───────────────────────────────────── */ [data-style="pro"] .pill, [data-style="pro"] .tool-badge, [data-style="pro"] .card-title .badge, [data-style="pro"] .question-domain, [data-style="pro"] .q-category, [data-style="pro"] .q-diff, [data-style="pro"] .cat-badge, [data-style="pro"] .version-badge { background: rgba(201,168,76,0.10) !important; border: 1px solid rgba(201,168,76,0.24) !important; color: var(--navy, #0d1b2a) !important; box-shadow: none !important; text-shadow: none !important; } [data-style="pro"][data-theme="dark"] .pill, [data-style="pro"][data-theme="dark"] .tool-badge, [data-style="pro"][data-theme="dark"] .card-title .badge, [data-style="pro"][data-theme="dark"] .question-domain, [data-style="pro"][data-theme="dark"] .q-category, [data-style="pro"][data-theme="dark"] .q-diff, [data-style="pro"][data-theme="dark"] .cat-badge, [data-style="pro"][data-theme="dark"] .version-badge { background: rgba(201,168,76,0.12) !important; border-color: rgba(201,168,76,0.30) !important; color: var(--gold-light) !important; } [data-style="pro"] .q-diff.easy { color: #1a7a52 !important; border-color: rgba(45,155,111,0.28) !important; background: rgba(45,155,111,0.10) !important; } [data-style="pro"] .q-diff.medium { color: #8d6b16 !important; } [data-style="pro"] .q-diff.hard { color: #a93226 !important; border-color: rgba(192,57,43,0.26) !important; background: rgba(192,57,43,0.08) !important; } /* ── Boutons / liens d'action ───────────────────────────────── */ [data-style="pro"] .btn, [data-style="pro"] .back-link, [data-style="pro"] .back-btn, [data-style="pro"] .backlink, [data-style="pro"] .back-home, [data-style="pro"] .mode-btn, [data-style="pro"] .filter-btn, [data-style="pro"] .toc-btn, [data-style="pro"] .cat-btn, [data-style="pro"] .tab-btn, [data-style="pro"] .ctrl-btn, [data-style="pro"] .submit-btn, [data-style="pro"] .next-btn, [data-style="pro"] .restart-btn, [data-style="pro"] .cmd-submit, [data-style="pro"] .print-btn, [data-style="pro"] .copy-btn, [data-style="pro"] .copy, [data-style="pro"] .nav-btn, [data-style="pro"] .reset-btn, [data-style="pro"] .modal-btn, [data-style="pro"] .scroll-top, [data-style="pro"] .chip, [data-style="pro"] .start-btn, [data-style="pro"] .option-btn, [data-style="pro"] .opt-btn, [data-style="pro"] .choice-btn { background: var(--bg-card) !important; color: var(--text-primary) !important; border: 1px solid var(--border-strong) !important; border-radius: 12px !important; box-shadow: none !important; text-shadow: none !important; text-decoration: none !important; } [data-style="pro"] .btn:hover, [data-style="pro"] .back-link:hover, [data-style="pro"] .back-btn:hover, [data-style="pro"] .backlink:hover, [data-style="pro"] .back-home:hover, [data-style="pro"] .mode-btn:hover, [data-style="pro"] .filter-btn:hover, [data-style="pro"] .toc-btn:hover, [data-style="pro"] .cat-btn:hover, [data-style="pro"] .tab-btn:hover, [data-style="pro"] .ctrl-btn:hover, [data-style="pro"] .submit-btn:hover, [data-style="pro"] .next-btn:hover, [data-style="pro"] .restart-btn:hover, [data-style="pro"] .cmd-submit:hover, [data-style="pro"] .print-btn:hover, [data-style="pro"] .copy-btn:hover, [data-style="pro"] .copy:hover, [data-style="pro"] .nav-btn:hover, [data-style="pro"] .reset-btn:hover, [data-style="pro"] .modal-btn:hover, [data-style="pro"] .scroll-top:hover, [data-style="pro"] .chip:hover, [data-style="pro"] .start-btn:hover, [data-style="pro"] .option-btn:hover:not(:disabled):not(.locked), [data-style="pro"] .opt-btn:hover:not(.locked), [data-style="pro"] .choice-btn:hover:not(.disabled), [data-style="pro"] .option:hover:not(.disabled) { transform: translateY(-1px) !important; border-color: rgba(201,168,76,0.38) !important; color: var(--navy, #0d1b2a) !important; box-shadow: var(--shadow-pro) !important; } [data-style="pro"] .btn-primary, [data-style="pro"] .btn.primary, [data-style="pro"] .submit-btn, [data-style="pro"] .cmd-submit, [data-style="pro"] .next-btn, [data-style="pro"] .btn-next.finish, [data-style="pro"] .restart-btn:not(.secondary) { background: linear-gradient(135deg, var(--gold-light), var(--gold)) !important; border-color: rgba(201,168,76,0.48) !important; color: var(--navy, #0d1b2a) !important; } [data-style="pro"] .mode-btn.active, [data-style="pro"] .filter-btn.active, [data-style="pro"] .toc-btn.active, [data-style="pro"] .cat-btn.active, [data-style="pro"] .tab-btn.active, [data-style="pro"] .nav-btn.active { background: rgba(201,168,76,0.12) !important; border-color: rgba(201,168,76,0.45) !important; color: var(--navy, #0d1b2a) !important; } [data-style="pro"] .btn-secondary, [data-style="pro"] .restart-btn.secondary { background: transparent !important; } [data-style="pro"] .btn-danger, [data-style="pro"] .ctrl-btn.reset, [data-style="pro"] .restart-btn.secondary, [data-style="pro"] .reset-btn { border-color: rgba(192,57,43,0.26) !important; color: #a93226 !important; } [data-style="pro"] .btn-danger:hover, [data-style="pro"] .ctrl-btn.reset:hover, [data-style="pro"] .restart-btn.secondary:hover, [data-style="pro"] .reset-btn:hover { background: rgba(192,57,43,0.08) !important; border-color: rgba(192,57,43,0.38) !important; color: #a93226 !important; } [data-style="pro"][data-theme="dark"] .btn:hover, [data-style="pro"][data-theme="dark"] .back-link:hover, [data-style="pro"][data-theme="dark"] .back-btn:hover, [data-style="pro"][data-theme="dark"] .backlink:hover, [data-style="pro"][data-theme="dark"] .back-home:hover, [data-style="pro"][data-theme="dark"] .mode-btn:hover, [data-style="pro"][data-theme="dark"] .filter-btn:hover, [data-style="pro"][data-theme="dark"] .toc-btn:hover, [data-style="pro"][data-theme="dark"] .cat-btn:hover, [data-style="pro"][data-theme="dark"] .tab-btn:hover, [data-style="pro"][data-theme="dark"] .ctrl-btn:hover, [data-style="pro"][data-theme="dark"] .submit-btn:hover, [data-style="pro"][data-theme="dark"] .next-btn:hover, [data-style="pro"][data-theme="dark"] .restart-btn:hover, [data-style="pro"][data-theme="dark"] .cmd-submit:hover, [data-style="pro"][data-theme="dark"] .print-btn:hover, [data-style="pro"][data-theme="dark"] .copy-btn:hover, [data-style="pro"][data-theme="dark"] .copy:hover, [data-style="pro"][data-theme="dark"] .nav-btn:hover, [data-style="pro"][data-theme="dark"] .reset-btn:hover, [data-style="pro"][data-theme="dark"] .modal-btn:hover, [data-style="pro"][data-theme="dark"] .scroll-top:hover, [data-style="pro"][data-theme="dark"] .chip:hover, [data-style="pro"][data-theme="dark"] .start-btn:hover, [data-style="pro"][data-theme="dark"] .option-btn:hover:not(:disabled):not(.locked), [data-style="pro"][data-theme="dark"] .opt-btn:hover:not(.locked), [data-style="pro"][data-theme="dark"] .choice-btn:hover:not(.disabled), [data-style="pro"][data-theme="dark"] .option:hover:not(.disabled) { color: var(--gold-light) !important; } [data-style="pro"][data-theme="dark"] .mode-btn.active, [data-style="pro"][data-theme="dark"] .filter-btn.active, [data-style="pro"][data-theme="dark"] .toc-btn.active, [data-style="pro"][data-theme="dark"] .cat-btn.active, [data-style="pro"][data-theme="dark"] .tab-btn.active, [data-style="pro"][data-theme="dark"] .nav-btn.active { background: rgba(201,168,76,0.12) !important; color: var(--gold-light) !important; } [data-style="pro"] .step-dot { background: var(--bg-card) !important; border: 1px solid var(--border-strong) !important; color: var(--text-muted) !important; box-shadow: var(--shadow-pro) !important; } [data-style="pro"] .step-dot.active { background: rgba(201,168,76,0.12) !important; border-color: rgba(201,168,76,0.45) !important; color: var(--navy, #0d1b2a) !important; transform: scale(1.05) !important; } [data-style="pro"][data-theme="dark"] .step-dot.active { color: var(--gold-light) !important; } [data-style="pro"] .step-dot.completed { background: rgba(45,155,111,0.12) !important; border-color: rgba(45,155,111,0.35) !important; color: #1a7a52 !important; } [data-style="pro"] .step-indicators::before { background: rgba(13,27,42,0.10) !important; } /* ── Formulaires / saisies ──────────────────────────────────── */ [data-style="pro"] .search-input, [data-style="pro"] .cmd-input, [data-style="pro"] .q-input, [data-style="pro"] .pill input, [data-style="pro"] input[type="text"], [data-style="pro"] input[type="time"], [data-style="pro"] textarea, [data-style="pro"] select { background: rgba(255,255,255,0.70) !important; border: 1px solid var(--border-strong) !important; border-radius: 12px !important; color: var(--text-primary) !important; box-shadow: none !important; } [data-style="pro"][data-theme="dark"] .search-input, [data-style="pro"][data-theme="dark"] .cmd-input, [data-style="pro"][data-theme="dark"] .q-input, [data-style="pro"][data-theme="dark"] .pill input, [data-style="pro"][data-theme="dark"] input[type="text"], [data-style="pro"][data-theme="dark"] input[type="time"], [data-style="pro"][data-theme="dark"] textarea, [data-style="pro"][data-theme="dark"] select { background: rgba(7,16,28,0.92) !important; } [data-style="pro"] .search-input, [data-style="pro"] .cmd-input, [data-style="pro"] .q-input, [data-style="pro"] .cmd, [data-style="pro"] .cmd-code, [data-style="pro"] .file-code, [data-style="pro"] .question-code, [data-style="pro"] .code-block code, [data-style="pro"] .vim-buffer-wrap, [data-style="pro"] .vim-statusline, [data-style="pro"] .vim-cmdline { font-family: 'DM Mono', monospace !important; } [data-style="pro"] .search-input:focus, [data-style="pro"] .cmd-input:focus, [data-style="pro"] .q-input:focus, [data-style="pro"] .pill input:focus, [data-style="pro"] input[type="text"]:focus, [data-style="pro"] input[type="time"]:focus, [data-style="pro"] textarea:focus, [data-style="pro"] select:focus { border-color: rgba(201,168,76,0.46) !important; box-shadow: 0 0 0 3px rgba(201,168,76,0.14) !important; } [data-style="pro"] .cmd-input-wrap, [data-style="pro"] .input-wrap { gap: 12px !important; } /* ── Code / consoles / Vim ──────────────────────────────────── */ [data-style="pro"] .code-block, [data-style="pro"] .cmd-code, [data-style="pro"] .file-code, [data-style="pro"] .question-code, [data-style="pro"] .cmd, [data-style="pro"] .vim-buffer-wrap, [data-style="pro"] .vim-statusline, [data-style="pro"] .vim-cmdline { background: var(--bg-code) !important; border: 1px solid var(--border-soft) !important; border-radius: 12px !important; color: var(--text-primary) !important; text-shadow: none !important; } [data-style="pro"] .copy-btn { font-family: 'DM Sans', sans-serif !important; font-size: 0.78rem !important; } [data-style="pro"] .vim-titlebar { background: rgba(13,27,42,0.06) !important; border-bottom: 1px solid var(--border-soft) !important; } [data-style="pro"][data-theme="dark"] .vim-titlebar { background: rgba(255,255,255,0.03) !important; } [data-style="pro"] .vim-dot.r { background: #d27d66 !important; } [data-style="pro"] .vim-dot.y { background: #c9a84c !important; } [data-style="pro"] .vim-dot.g { background: #2d9b6f !important; } [data-style="pro"] .vim-mode-indicator { border-radius: 999px !important; padding: 3px 10px !important; } [data-style="pro"] .vim-mode-normal { background: rgba(201,168,76,0.14) !important; color: var(--navy, #0d1b2a) !important; } [data-style="pro"][data-theme="dark"] .vim-mode-normal { color: var(--gold-light) !important; } /* ── Quiz / réponses ────────────────────────────────────────── */ [data-style="pro"] .option-letter, [data-style="pro"] .opt-key, [data-style="pro"] .choice-letter, [data-style="pro"] .option-marker { color: var(--gold) !important; border-color: rgba(201,168,76,0.28) !important; background: rgba(201,168,76,0.08) !important; } [data-style="pro"] .option-btn.correct, [data-style="pro"] .choice-btn.correct, [data-style="pro"] .option.correct, [data-style="pro"] .opt-btn.correct, [data-style="pro"] .check.ok { background: rgba(45,155,111,0.10) !important; border-color: rgba(45,155,111,0.32) !important; color: #1a7a52 !important; } [data-style="pro"] .option-btn.incorrect, [data-style="pro"] .choice-btn.wrong, [data-style="pro"] .option.wrong, [data-style="pro"] .opt-btn.wrong, [data-style="pro"] .check.ko { background: rgba(192,57,43,0.08) !important; border-color: rgba(192,57,43,0.26) !important; color: #a93226 !important; } [data-style="pro"] .choice-btn.selected, [data-style="pro"] .option.selected, [data-style="pro"] .ctrl-btn.active, [data-style="pro"] .filter-chip.active { background: rgba(201,168,76,0.12) !important; border-color: rgba(201,168,76,0.45) !important; color: var(--navy, #0d1b2a) !important; } [data-style="pro"][data-theme="dark"] .choice-btn.selected, [data-style="pro"][data-theme="dark"] .option.selected, [data-style="pro"][data-theme="dark"] .ctrl-btn.active, [data-style="pro"][data-theme="dark"] .filter-chip.active { color: var(--gold-light) !important; } [data-style="pro"] .explanation { background: rgba(201,168,76,0.08) !important; border: 1px solid rgba(201,168,76,0.20) !important; border-left: 4px solid var(--gold) !important; border-radius: 14px !important; } [data-style="pro"][data-theme="dark"] .explanation { background: rgba(201,168,76,0.08) !important; } [data-style="pro"] .explanation .hint-label { color: var(--gold) !important; } /* ── Progressions / graphes ─────────────────────────────────── */ [data-style="pro"] .progress-bar-bg, [data-style="pro"] .progress-bar-container, [data-style="pro"] .progress-container, [data-style="pro"] .progress-track, [data-style="pro"] .cat-progress-bar { background: rgba(13,27,42,0.08) !important; border-radius: 999px !important; box-shadow: none !important; } [data-style="pro"][data-theme="dark"] .progress-bar-bg, [data-style="pro"][data-theme="dark"] .progress-bar-container, [data-style="pro"][data-theme="dark"] .progress-container, [data-style="pro"][data-theme="dark"] .progress-track, [data-style="pro"][data-theme="dark"] .cat-progress-bar { background: rgba(255,255,255,0.06) !important; } [data-style="pro"] .progress-bar, [data-style="pro"] .progress-fill, [data-style="pro"] .progress-bar-fill, [data-style="pro"] .cat-progress-fill { background: linear-gradient(90deg, var(--gold-light), var(--gold)) !important; box-shadow: none !important; } /* ── Pages spécifiques ──────────────────────────────────────── */ [data-style="pro"] .nav-btn::before, [data-style="pro"] .tool-card::before, [data-style="pro"] .card::before { background: linear-gradient(90deg, var(--gold-light), var(--gold)) !important; } [data-style="pro"] .cat-card { background: var(--bg-card) !important; border: 1px solid var(--border-soft) !important; box-shadow: var(--shadow-pro) !important; } [data-style="pro"] .cat-card:hover { border-color: rgba(201,168,76,0.30) !important; box-shadow: var(--shadow-md-pro) !important; } [data-style="pro"] .cat-card.locked { opacity: 0.6 !important; } [data-style="pro"] .cmd-prompt { background: var(--bg-dark) !important; border-color: var(--border-strong) !important; } [data-style="pro"] .cmd-prompt-symbol, [data-style="pro"] .scroll-top { color: var(--gold) !important; } [data-style="pro"] .progress-info, [data-style="pro"] .stat-chip, [data-style="pro"] .score-item, [data-style="pro"] .nav-info { color: var(--text-muted) !important; } [data-style="pro"] .stat-chip .val, [data-style="pro"] .score-item .score-value { color: var(--text-primary) !important; } [data-style="pro"] .modal-overlay { background: rgba(7,16,28,0.65) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } [data-style="pro"] .welcome .start-btn, [data-style="pro"] .modal-btn { background: linear-gradient(135deg, var(--gold-light), var(--gold)) !important; border-color: rgba(201,168,76,0.48) !important; color: var(--navy, #0d1b2a) !important; } [data-style="pro"] .callout, [data-style="pro"] .sandbox-hint { background: rgba(201,168,76,0.06) !important; border-left: 4px solid rgba(201,168,76,0.34) !important; color: var(--text-muted) !important; padding: 12px 14px !important; border-radius: 12px !important; } [data-style="pro"] .kbd { background: var(--bg-dark) !important; border-color: var(--border-strong) !important; color: var(--text-primary) !important; box-shadow: none !important; } [data-style="pro"] #packLoadPanel { background: var(--bg-card) !important; border: 1px solid var(--border-soft) !important; border-radius: 16px !important; box-shadow: var(--shadow-pro) !important; } [data-style="pro"] .mission-panel, [data-style="pro"] .game-top-bar, [data-style="pro"] .completion-bar { border-radius: 18px !important; } [data-style="pro"] .result-section::before, [data-style="pro"] .toast.show { box-shadow: none !important; } [data-style="pro"] .result-warning, [data-style="pro"] .callout-warn { background: rgba(192,57,43,0.08) !important; border-left: 4px solid rgba(192,57,43,0.45) !important; color: #a93226 !important; } [data-style="pro"] .callout-new { background: rgba(45,155,111,0.10) !important; border-left: 4px solid rgba(45,155,111,0.45) !important; color: #1a7a52 !important; } [data-style="pro"] .header-icon, [data-style="pro"] .completion-icon, [data-style="pro"] .phase-icon { filter: saturate(0.7); animation-duration: 4s !important; } [data-style="pro"] .toast { top: 76px !important; right: 20px !important; } [data-style="pro"] .current-time { background: var(--bg-card) !important; border: 1px solid var(--border-strong) !important; color: var(--gold) !important; box-shadow: var(--shadow-pro) !important; } [data-style="pro"] mark { background: rgba(201,168,76,0.20) !important; color: inherit !important; } /* ── Lisibilité : correctifs contrastes (prod) ─────────────── */ [data-style="pro"] { --gold-ink: #6f5416; --gold-ink-strong: #5b430f; --muted-ink: #4f6277; } /* Pro light: plusieurs composants gardent un fond sombre (hérité cyber), on force un texte clair sur ces barres/entêtes. */ [data-style="pro"]:not([data-theme="dark"]) .header .mode-btn, [data-style="pro"]:not([data-theme="dark"]) .header .filter-btn, [data-style="pro"]:not([data-theme="dark"]) .header .cat-btn, [data-style="pro"]:not([data-theme="dark"]) .header .ctrl-btn, [data-style="pro"]:not([data-theme="dark"]) .header .toc-btn, [data-style="pro"]:not([data-theme="dark"]) .header .chip, [data-style="pro"]:not([data-theme="dark"]) .header .stat, [data-style="pro"]:not([data-theme="dark"]) .header .stat-value, [data-style="pro"]:not([data-theme="dark"]) .header .count, [data-style="pro"]:not([data-theme="dark"]) .header .q-number, [data-style="pro"]:not([data-theme="dark"]) .header .cat-score, [data-style="pro"]:not([data-theme="dark"]) .header .version-badge { color: rgba(255,255,255,0.92) !important; } [data-style="pro"]:not([data-theme="dark"]) .header .mode-btn, [data-style="pro"]:not([data-theme="dark"]) .header .filter-btn, [data-style="pro"]:not([data-theme="dark"]) .header .cat-btn, [data-style="pro"]:not([data-theme="dark"]) .header .ctrl-btn, [data-style="pro"]:not([data-theme="dark"]) .header .toc-btn, [data-style="pro"]:not([data-theme="dark"]) .header .chip { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.24) !important; } [data-style="pro"]:not([data-theme="dark"]) .header .mode-btn.active, [data-style="pro"]:not([data-theme="dark"]) .header .filter-btn.active, [data-style="pro"]:not([data-theme="dark"]) .header .cat-btn.active, [data-style="pro"]:not([data-theme="dark"]) .header .ctrl-btn.active, [data-style="pro"]:not([data-theme="dark"]) .header .toc-btn.active, [data-style="pro"]:not([data-theme="dark"]) .header .chip.active { background: rgba(201,168,76,0.22) !important; border-color: rgba(232,201,122,0.56) !important; color: #fff8e4 !important; } /* Pro light: accents gold trop pâles sur fond clair */ [data-style="pro"]:not([data-theme="dark"]) .q-number, [data-style="pro"]:not([data-theme="dark"]) .question-num, [data-style="pro"]:not([data-theme="dark"]) .current-time, [data-style="pro"]:not([data-theme="dark"]) .file-name, [data-style="pro"]:not([data-theme="dark"]) .option-letter, [data-style="pro"]:not([data-theme="dark"]) .opt-key, [data-style="pro"]:not([data-theme="dark"]) .choice-letter, [data-style="pro"]:not([data-theme="dark"]) .option-marker, [data-style="pro"]:not([data-theme="dark"]) .kw, [data-style="pro"]:not([data-theme="dark"]) .var, [data-style="pro"]:not([data-theme="dark"]) .fl, [data-style="pro"]:not([data-theme="dark"]) .flag { color: var(--gold-ink-strong) !important; } [data-style="pro"]:not([data-theme="dark"]) .cat-score { color: var(--muted-ink) !important; } /* Pro light: certains h2 de cards (ex: RHCSA Exam) étaient presque invisibles */ [data-style="pro"]:not([data-theme="dark"]) .card > h2 { color: var(--text-primary) !important; } [data-style="pro"]:not([data-theme="dark"]) .tasks li { color: var(--text-primary) !important; } /* Pro dark: callouts cheatsheets + commentaires code trop faibles */ [data-style="pro"][data-theme="dark"] .callout-warn, [data-style="pro"][data-theme="dark"] .result-warning { color: #f0a79a !important; border-left-color: rgba(224,92,75,0.62) !important; background: rgba(224,92,75,0.14) !important; } [data-style="pro"][data-theme="dark"] .callout-new { color: #72d4a7 !important; border-left-color: rgba(45,155,111,0.62) !important; background: rgba(45,155,111,0.14) !important; } [data-style="pro"][data-theme="dark"] .cm, [data-style="pro"][data-theme="dark"] .comment { color: #8b94ab !important; } /* ── Correctifs page-spécifiques ────────────────────────────── */ [data-style="pro"] body.home-page .header { border-radius: 18px !important; } [data-style="pro"] body.home-page .status-bar { display: none !important; } [data-style="pro"] body.deploy-wizard-page .progress-section { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 !important; } [data-style="pro"] body.deploy-wizard-page .step-indicators::before { background: rgba(13,27,42,0.14) !important; } [data-style="pro"][data-theme="dark"] body.deploy-wizard-page .step-indicators::before { background: rgba(255,255,255,0.16) !important; } [data-style="pro"] body.deploy-wizard-page .step-dot { background: rgba(13,27,42,0.94) !important; border: 2px solid rgba(255,255,255,0.24) !important; color: rgba(255,255,255,0.72) !important; box-shadow: none !important; } [data-style="pro"] body.deploy-wizard-page .step-dot.active { background: rgba(13,27,42,0.96) !important; border-color: var(--gold) !important; color: var(--gold) !important; transform: scale(1.1) !important; } [data-style="pro"] body.deploy-wizard-page .step-dot.completed { background: rgba(45,155,111,0.22) !important; border-color: rgba(45,155,111,0.62) !important; color: #2d9b6f !important; } [data-style="pro"] body.deploy-wizard-page .progress-bar-container { background: rgba(13,27,42,0.24) !important; border: 1px solid rgba(255,255,255,0.10) !important; } [data-style="pro"][data-theme="dark"] body.deploy-wizard-page .progress-bar-container { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.14) !important; } [data-style="pro"] body.vim-trainer-page .tab-bar { background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(13,27,42,0.12) !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 !important; } /* Vim Trainer: éviter le chevauchement avec "Valider" et le bouton 🎲 en jeu */ body.vim-trainer-page #game-screen.active ~ .tutos-controls { top: 84px; right: 16px; bottom: auto; } [data-style="pro"][data-theme="dark"] body.vim-trainer-page .tab-bar { border-bottom-color: rgba(255,255,255,0.12) !important; } [data-style="pro"] body.vim-trainer-page .tab-btn { background: none !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; box-shadow: none !important; color: var(--text-muted) !important; padding: 12px 24px !important; transform: none !important; } [data-style="pro"] body.vim-trainer-page .tab-btn:hover { color: var(--text-primary) !important; border-bottom-color: transparent !important; transform: none !important; } [data-style="pro"] body.vim-trainer-page .tab-btn.active { background: none !important; border-color: var(--gold) !important; color: var(--gold) !important; } [data-style="pro"][data-theme="dark"] body.vim-trainer-page .tab-btn.active { color: var(--gold-light) !important; } [data-style="pro"] body.cheatsheet-page .header { border-radius: 18px !important; padding: 24px 22px 20px !important; margin-bottom: 34px !important; } [data-style="pro"] body.cheatsheet-page .header .subtitle { margin-top: 12px !important; } [data-style="pro"] body.cheatsheet-page .header .back-link { margin-bottom: 18px !important; } [data-style="pro"] body.cheatsheet-page .top-bar { margin-bottom: 18px !important; } [data-style="pro"] body.rhcsa-trainer-page .progress-wrap { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 15px 30px 0 !important; } [data-style="pro"] body.rhcsa-trainer-page .progress-bar-bg { height: 8px !important; background: linear-gradient(180deg, rgba(13,27,42,0.16), rgba(13,27,42,0.08)) !important; border: 1px solid rgba(13,27,42,0.14) !important; border-radius: 999px !important; overflow: hidden !important; } [data-style="pro"][data-theme="dark"] body.rhcsa-trainer-page .progress-bar-bg { background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05)) !important; border-color: rgba(255,255,255,0.14) !important; } [data-style="pro"] body.rhcsa-trainer-page .progress-bar-fill { background: linear-gradient(90deg, #d8bf73 0%, #c9a84c 45%, #2d9b6f 100%) !important; border-radius: 999px !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 2px 10px rgba(201,168,76,0.35) !important; } [data-style="pro"][data-theme="dark"] body.rhcsa-trainer-page .progress-bar-fill { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 2px 10px rgba(201,168,76,0.28) !important; } /* Boutons retour fixes: éviter les chevauchements sur petits écrans */ @media (max-width: 980px) { [data-style="pro"] body.deploy-wizard-page .back-link, [data-style="pro"] body.vim-trainer-page .back-home { top: 72px !important; left: 14px !important; } } /* ── Responsive ─────────────────────────────────────────────── */ @media (max-width: 900px) { [data-style="pro"] .tools-grid, [data-style="pro"] .cmd-grid { grid-template-columns: 1fr !important; } [data-style="pro"] .game-top-bar, [data-style="pro"] .topbar, [data-style="pro"] .top-bar, [data-style="pro"] .stats-bar, [data-style="pro"] .score-bar { padding: 14px !important; } } @media (max-width: 640px) { [data-style="pro"] .tutos-controls { top: auto; right: 14px; bottom: 14px; } [data-style="pro"] .header, [data-style="pro"] .card, [data-style="pro"] .question-card, [data-style="pro"] .q-card, [data-style="pro"] .tool-card, [data-style="pro"] .results-card, [data-style="pro"] .result-section, [data-style="pro"] .mission-panel, [data-style="pro"] .vim-container { border-radius: 14px !important; } [data-style="pro"] .filters, [data-style="pro"] .filter-bar, [data-style="pro"] .mode-bar, [data-style="pro"] .controls, [data-style="pro"] .quick-actions, [data-style="pro"] .tab-bar, [data-style="pro"] .toc, [data-style="pro"] .cat-nav { padding: 10px !important; gap: 8px !important; } [data-style="pro"] .current-time { right: auto !important; left: 50% !important; transform: translateX(-50%) !important; bottom: 14px !important; } [data-style="pro"] .toast { top: 18px !important; right: 14px !important; left: 14px !important; } } /* ── Vim Trainer : Random difficulty group ───────────────────────── */ [data-style="pro"] body.vim-trainer-page .random-group { background: transparent !important; border: 1px solid var(--border-soft) !important; box-shadow: none !important; } [data-style="pro"] body.vim-trainer-page .random-group-label { color: var(--navy) !important; text-shadow: none !important; } [data-style="pro"][data-theme="dark"] body.vim-trainer-page .random-group-label { color: var(--gold-light) !important; } [data-style="pro"] body.vim-trainer-page .btn-pill { background: var(--bg-card) !important; color: var(--text-muted) !important; border: 1px solid var(--border-strong) !important; box-shadow: none !important; text-shadow: none !important; } [data-style="pro"] body.vim-trainer-page .btn-pill:hover { background: var(--bg-card-hover) !important; color: var(--text-primary) !important; border-color: var(--border-strong) !important; box-shadow: var(--shadow-pro) !important; transform: translateY(-1px) !important; } [data-style="pro"] body.vim-trainer-page .btn-pill-1 { color: #2d7a3a !important; border-color: rgba(45,122,58,0.35) !important; background: rgba(45,122,58,0.05) !important; } [data-style="pro"] body.vim-trainer-page .btn-pill-1:hover { border-color: rgba(45,122,58,0.55) !important; background: rgba(45,122,58,0.10) !important; color: #2d7a3a !important; } [data-style="pro"][data-theme="dark"] body.vim-trainer-page .btn-pill-1 { color: #5dba6a !important; border-color: rgba(93,186,106,0.28) !important; background: rgba(93,186,106,0.07) !important; } [data-style="pro"] body.vim-trainer-page .btn-pill-2 { color: var(--gold) !important; border-color: rgba(201,168,76,0.40) !important; background: rgba(201,168,76,0.07) !important; } [data-style="pro"] body.vim-trainer-page .btn-pill-2:hover { border-color: rgba(201,168,76,0.60) !important; background: rgba(201,168,76,0.13) !important; color: var(--gold) !important; } [data-style="pro"] body.vim-trainer-page .btn-pill-3 { color: #6b3fa0 !important; border-color: rgba(107,63,160,0.32) !important; background: rgba(107,63,160,0.06) !important; } [data-style="pro"] body.vim-trainer-page .btn-pill-3:hover { border-color: rgba(107,63,160,0.52) !important; background: rgba(107,63,160,0.12) !important; color: #6b3fa0 !important; } [data-style="pro"][data-theme="dark"] body.vim-trainer-page .btn-pill-3 { color: #b07de0 !important; border-color: rgba(176,125,224,0.28) !important; background: rgba(176,125,224,0.07) !important; } /* ── Vim Trainer : Sleek Pro Pass ───────────────────────────────── */ [data-style="pro"] body.vim-trainer-page { background: radial-gradient(circle at top left, rgba(201,168,76,0.14), transparent 26%), radial-gradient(circle at top right, rgba(45,155,111,0.12), transparent 22%), linear-gradient(180deg, rgba(255,255,255,0.72), rgba(245,240,232,0.96)) !important; } [data-style="pro"][data-theme="dark"] body.vim-trainer-page { background: radial-gradient(circle at top left, rgba(201,168,76,0.12), transparent 22%), radial-gradient(circle at top right, rgba(45,155,111,0.10), transparent 20%), linear-gradient(180deg, #07101c 0%, #0b1521 100%) !important; } [data-style="pro"] body.vim-trainer-page #menu-screen .container { max-width: 1180px !important; } [data-style="pro"] body.vim-trainer-page .header { margin-bottom: 30px !important; padding: 34px 34px 30px !important; border-radius: 28px !important; border: 1px solid rgba(255,255,255,0.55) !important; background: linear-gradient(135deg, rgba(12,26,41,0.98), rgba(26,45,69,0.92)) !important; box-shadow: 0 24px 60px rgba(13,27,42,0.14) !important; } [data-style="pro"][data-theme="dark"] body.vim-trainer-page .header { border-color: rgba(201,168,76,0.14) !important; background: linear-gradient(135deg, rgba(9,19,30,0.98), rgba(16,32,51,0.96)) !important; box-shadow: 0 26px 60px rgba(0,0,0,0.34) !important; } [data-style="pro"] body.vim-trainer-page .header::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.08) 18%, transparent 40%), linear-gradient(180deg, transparent 65%, rgba(201,168,76,0.10) 100%); pointer-events: none; } [data-style="pro"] body.vim-trainer-page .logo-sub { color: rgba(232,201,122,0.92) !important; letter-spacing: 0.36em !important; font-size: 0.78rem !important; margin-top: 10px !important; } [data-style="pro"] body.vim-trainer-page .subtitle { max-width: 560px; margin: 14px auto 0 !important; font-size: 0.98rem !important; line-height: 1.55 !important; letter-spacing: 0.01em !important; } [data-style="pro"] body.vim-trainer-page .stats-bar { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; gap: 14px !important; margin: 0 0 24px !important; } [data-style="pro"] body.vim-trainer-page .stat-item { min-width: 0 !important; padding: 18px 18px 16px !important; text-align: left !important; border-radius: 20px !important; border: 1px solid rgba(255,255,255,0.54) !important; background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,242,235,0.88)) !important; box-shadow: 0 10px 30px rgba(13,27,42,0.08) !important; } [data-style="pro"] body.vim-trainer-page .stat-item::before { content: ""; position: absolute; left: 18px; top: 14px; width: 38px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--gold-light), var(--neon-green)); opacity: 0.88; } [data-style="pro"][data-theme="dark"] body.vim-trainer-page .stat-item { border-color: rgba(201,168,76,0.14) !important; background: linear-gradient(180deg, rgba(16,32,51,0.94), rgba(12,24,38,0.90)) !important; box-shadow: 0 14px 30px rgba(0,0,0,0.28) !important; } [data-style="pro"] body.vim-trainer-page .stat-value { margin-top: 14px; font-family: 'Syne', sans-serif !important; font-size: 2rem !important; letter-spacing: -0.03em !important; } [data-style="pro"] body.vim-trainer-page .stat-label { margin-top: 6px !important; letter-spacing: 0.08em !important; color: var(--text-dim) !important; } [data-style="pro"] body.vim-trainer-page .tab-bar, [data-style="pro"] body.vim-trainer-page .quick-actions, [data-style="pro"] body.vim-trainer-page .game-top-bar, [data-style="pro"] body.vim-trainer-page .mission-panel, [data-style="pro"] body.vim-trainer-page .completion-bar, [data-style="pro"] body.vim-trainer-page .toast, [data-style="pro"] body.vim-trainer-page .cheat-group, [data-style="pro"] body.vim-trainer-page .cat-card { border: 1px solid rgba(255,255,255,0.48) !important; background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(247,242,235,0.86)) !important; box-shadow: 0 16px 36px rgba(13,27,42,0.08) !important; } [data-style="pro"][data-theme="dark"] body.vim-trainer-page .tab-bar, [data-style="pro"][data-theme="dark"] body.vim-trainer-page .quick-actions, [data-style="pro"][data-theme="dark"] body.vim-trainer-page .game-top-bar, [data-style="pro"][data-theme="dark"] body.vim-trainer-page .mission-panel, [data-style="pro"][data-theme="dark"] body.vim-trainer-page .completion-bar, [data-style="pro"][data-theme="dark"] body.vim-trainer-page .toast, [data-style="pro"][data-theme="dark"] body.vim-trainer-page .cheat-group, [data-style="pro"][data-theme="dark"] body.vim-trainer-page .cat-card { border-color: rgba(201,168,76,0.14) !important; background: linear-gradient(180deg, rgba(16,32,51,0.94), rgba(12,24,38,0.90)) !important; box-shadow: 0 20px 36px rgba(0,0,0,0.26) !important; } [data-style="pro"] body.vim-trainer-page .tab-bar, [data-style="pro"] body.vim-trainer-page .quick-actions { padding: 14px !important; border-radius: 22px !important; } [data-style="pro"] body.vim-trainer-page .quick-actions { justify-content: space-between !important; align-items: center !important; gap: 12px !important; margin-bottom: 22px !important; } [data-style="pro"] body.vim-trainer-page .tab-btn { position: relative; padding: 12px 20px !important; font-family: 'DM Sans', sans-serif !important; font-size: 0.86rem !important; font-weight: 600 !important; letter-spacing: 0.01em !important; } [data-style="pro"] body.vim-trainer-page .tab-btn::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 4px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, var(--gold-light), var(--gold)); opacity: 0; transform: scaleX(0.4); transition: transform 0.2s ease, opacity 0.2s ease; } [data-style="pro"] body.vim-trainer-page .tab-btn.active::after { opacity: 1; transform: scaleX(1); } [data-style="pro"] body.vim-trainer-page .random-group { padding: 11px 13px !important; border-radius: 18px !important; } [data-style="pro"] body.vim-trainer-page .btn-pill.active { background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,243,236,0.90)) !important; border-color: rgba(201,168,76,0.48) !important; color: var(--text-primary) !important; box-shadow: 0 8px 18px rgba(201,168,76,0.16) !important; } [data-style="pro"][data-theme="dark"] body.vim-trainer-page .btn-pill.active { background: linear-gradient(180deg, rgba(20,41,63,0.96), rgba(14,29,45,0.92)) !important; box-shadow: 0 8px 18px rgba(201,168,76,0.10) !important; } [data-style="pro"] body.vim-trainer-page .btn, [data-style="pro"] body.vim-trainer-page .back-btn, [data-style="pro"] body.vim-trainer-page .hint-toggle-btn { border-radius: 14px !important; font-family: 'DM Sans', sans-serif !important; font-weight: 600 !important; letter-spacing: 0.01em !important; } [data-style="pro"] body.vim-trainer-page .btn-primary { background: linear-gradient(135deg, var(--gold-light), var(--gold)) !important; color: var(--navy) !important; box-shadow: 0 10px 24px rgba(201,168,76,0.22) !important; } [data-style="pro"] body.vim-trainer-page .btn-secondary, [data-style="pro"] body.vim-trainer-page .back-btn, [data-style="pro"] body.vim-trainer-page .hint-toggle-btn { background: rgba(255,255,255,0.52) !important; border: 1px solid rgba(13,27,42,0.10) !important; color: var(--text-primary) !important; } [data-style="pro"][data-theme="dark"] body.vim-trainer-page .btn-secondary, [data-style="pro"][data-theme="dark"] body.vim-trainer-page .back-btn, [data-style="pro"][data-theme="dark"] body.vim-trainer-page .hint-toggle-btn { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.10) !important; } [data-style="pro"] body.vim-trainer-page .categories-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important; gap: 20px !important; } [data-style="pro"] body.vim-trainer-page .cat-card { border-radius: 24px !important; padding: 24px !important; overflow: hidden; } [data-style="pro"] body.vim-trainer-page .cat-card::after { content: ""; position: absolute; inset: auto -40px -54px auto; width: 160px; height: 160px; border-radius: 50%; background: color-mix(in srgb, var(--cat-color, var(--gold)) 12%, transparent); filter: blur(6px); opacity: 0.9; pointer-events: none; } [data-style="pro"] body.vim-trainer-page .cat-card:hover { transform: translateY(-6px) !important; box-shadow: 0 22px 42px rgba(13,27,42,0.12) !important; } [data-style="pro"][data-theme="dark"] body.vim-trainer-page .cat-card:hover { box-shadow: 0 22px 42px rgba(0,0,0,0.34) !important; } [data-style="pro"] body.vim-trainer-page .cat-header { margin-bottom: 18px !important; } [data-style="pro"] body.vim-trainer-page .cat-title { font-family: 'Syne', sans-serif !important; font-size: 1.14rem !important; letter-spacing: -0.02em !important; } [data-style="pro"] body.vim-trainer-page .cat-desc { font-size: 0.92rem !important; line-height: 1.65 !important; } [data-style="pro"] body.vim-trainer-page .cat-progress-text { margin-top: 10px !important; font-size: 0.74rem !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; } [data-style="pro"] body.vim-trainer-page #game-screen { width: min(1320px, calc(100% - 30px)); margin: 0 auto; padding: 18px 0 20px !important; gap: 14px !important; } [data-style="pro"] body.vim-trainer-page .game-top-bar, [data-style="pro"] body.vim-trainer-page .mission-panel { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } [data-style="pro"] body.vim-trainer-page .game-top-bar { padding: 14px 18px !important; } [data-style="pro"] body.vim-trainer-page .game-cat-title { font-family: 'Syne', sans-serif !important; font-size: 1.02rem !important; color: var(--text-primary) !important; } [data-style="pro"] body.vim-trainer-page .hud { font-size: 0.84rem !important; } [data-style="pro"] body.vim-trainer-page .mission-panel { position: relative; padding: 22px 24px 18px !important; } [data-style="pro"] body.vim-trainer-page .mission-panel::before { content: ""; position: absolute; left: 24px; top: 18px; width: 56px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--gold-light), var(--neon-green)); } [data-style="pro"] body.vim-trainer-page .mission-title { margin-top: 10px !important; margin-bottom: 10px !important; font-family: 'Syne', sans-serif !important; font-size: 1.28rem !important; color: var(--text-primary) !important; letter-spacing: -0.02em !important; } [data-style="pro"] body.vim-trainer-page .mission-desc { max-width: 72ch; font-size: 1rem !important; line-height: 1.72 !important; } [data-style="pro"] body.vim-trainer-page .mission-hint { margin-top: 12px !important; padding-top: 12px; border-top: 1px solid rgba(13,27,42,0.08); font-size: 0.84rem !important; line-height: 1.65 !important; } [data-style="pro"][data-theme="dark"] body.vim-trainer-page .mission-hint { border-top-color: rgba(255,255,255,0.08); } [data-style="pro"] body.vim-trainer-page .vim-container { border-radius: 26px !important; border: 1px solid rgba(255,255,255,0.52) !important; background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244,238,230,0.92)) !important; box-shadow: 0 24px 60px rgba(13,27,42,0.12), inset 0 1px 0 rgba(255,255,255,0.65) !important; } [data-style="pro"][data-theme="dark"] body.vim-trainer-page .vim-container { border-color: rgba(201,168,76,0.14) !important; background: linear-gradient(180deg, rgba(12,24,38,0.98), rgba(8,16,26,0.96)) !important; box-shadow: 0 24px 60px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.03) !important; } [data-style="pro"] body.vim-trainer-page .vim-titlebar { padding: 10px 16px !important; background: linear-gradient(180deg, rgba(13,27,42,0.06), rgba(13,27,42,0.02)) !important; } [data-style="pro"][data-theme="dark"] body.vim-trainer-page .vim-titlebar { background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)) !important; } [data-style="pro"] body.vim-trainer-page .vim-filename { font-family: 'DM Mono', monospace !important; color: var(--text-dim) !important; letter-spacing: 0.04em; } [data-style="pro"] body.vim-trainer-page .vim-buffer-wrap { background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.02)) !important; } [data-style="pro"][data-theme="dark"] body.vim-trainer-page .vim-buffer-wrap { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)) !important; } [data-style="pro"] body.vim-trainer-page .vim-line { padding: 0 14px !important; } [data-style="pro"] body.vim-trainer-page .vim-line.current-line { background: rgba(201,168,76,0.08) !important; } [data-style="pro"][data-theme="dark"] body.vim-trainer-page .vim-line.current-line { background: rgba(201,168,76,0.06) !important; } [data-style="pro"] body.vim-trainer-page .vim-linenum { color: rgba(13,27,42,0.26) !important; } [data-style="pro"][data-theme="dark"] body.vim-trainer-page .vim-linenum { color: rgba(255,255,255,0.18) !important; } [data-style="pro"] body.vim-trainer-page .vim-linenum.active { color: var(--gold) !important; } [data-style="pro"] body.vim-trainer-page .vim-statusline, [data-style="pro"] body.vim-trainer-page .vim-cmdline { padding: 8px 14px !important; } [data-style="pro"] body.vim-trainer-page .vim-statusline { border-top-color: rgba(13,27,42,0.08) !important; } [data-style="pro"][data-theme="dark"] body.vim-trainer-page .vim-statusline { border-top-color: rgba(255,255,255,0.08) !important; } [data-style="pro"] body.vim-trainer-page .completion-bar { left: max(16px, calc((100vw - 1280px) / 2 + 16px)) !important; right: max(16px, calc((100vw - 1280px) / 2 + 16px)) !important; padding: 16px 18px !important; } [data-style="pro"] body.vim-trainer-page .toast { border-radius: 16px !important; } [data-style="pro"] body.vim-trainer-page .cheat-group { border-radius: 22px !important; padding: 20px !important; } [data-style="pro"] body.vim-trainer-page .cheat-group-title { font-family: 'Syne', sans-serif !important; font-size: 0.95rem !important; color: var(--text-primary) !important; } [data-style="pro"] body.vim-trainer-page .cheat-item { padding: 8px 0 !important; border-top: 1px solid rgba(13,27,42,0.06); } [data-style="pro"] body.vim-trainer-page .cheat-item:first-of-type { border-top: 0; } [data-style="pro"][data-theme="dark"] body.vim-trainer-page .cheat-item { border-top-color: rgba(255,255,255,0.08); } @media (max-width: 960px) { [data-style="pro"] body.vim-trainer-page .quick-actions { justify-content: center !important; } [data-style="pro"] body.vim-trainer-page #game-screen { width: calc(100% - 24px); padding-top: 14px !important; } } @media (max-width: 640px) { [data-style="pro"] body.vim-trainer-page .header { padding: 26px 20px 22px !important; border-radius: 22px !important; } [data-style="pro"] body.vim-trainer-page .mission-panel, [data-style="pro"] body.vim-trainer-page .game-top-bar, [data-style="pro"] body.vim-trainer-page .quick-actions { border-radius: 18px !important; } [data-style="pro"] body.vim-trainer-page .mission-title { font-size: 1.08rem !important; } [data-style="pro"] body.vim-trainer-page .mission-desc { font-size: 0.94rem !important; } [data-style="pro"] body.vim-trainer-page .vim-container { border-radius: 20px !important; } }