/* STM32 template pages: reuse the website's dark palette while keeping original course markup. */
.stm-template-body { color-scheme: dark; --stm-bg:#0a0e1b; --stm-panel:#111a2b; --stm-panel-2:#18253a; --stm-raised:#1c2c43; --stm-line:rgba(182,198,225,.2); --stm-text:#ecf2ff; --stm-muted:#b0bed2; --stm-cyan:#78dfd7; --stm-violet:#c9b7ff; }
.stm-site-header { background:rgba(10,14,27,.96); border-bottom:1px solid var(--stm-line); font-family:system-ui,"Microsoft YaHei",sans-serif; }
.stm-site-inner { max-width:1160px; min-height:72px; margin:auto; padding:10px 24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 20px; }
.stm-site-brand { display:inline-flex; align-items:center; gap:11px; color:var(--stm-text) !important; font-size:12px; font-weight:800; letter-spacing:.12em; text-decoration:none; white-space:nowrap; }
.stm-site-brand:hover { text-decoration:none; opacity:.9; }
.stm-site-mark { display:grid; place-items:center; flex:none; width:36px; height:36px; border:1px solid rgba(201,183,255,.42); border-radius:11px; background:rgba(201,183,255,.09); color:var(--stm-violet); font:italic 25px Georgia,serif; }
.stm-site-nav { display:flex; flex-wrap:wrap; gap:6px 19px; align-items:center; }
.stm-site-nav a { color:var(--stm-muted) !important; font:500 13px/1.5 system-ui,"Microsoft YaHei",sans-serif; text-decoration:none; }
.stm-site-nav a:hover,.stm-site-nav a:focus-visible { color:var(--stm-violet) !important; text-decoration:underline; }
.stm-site-nav a:focus-visible,.stm-site-brand:focus-visible { outline:2px solid var(--stm-cyan); outline-offset:4px; }
@media(max-width:640px){ .stm-site-inner { padding:12px 16px; } .stm-site-nav { gap:6px 14px; } .stm-site-nav a { min-height:32px; display:inline-flex; align-items:center; } }

/* GPIO/LED lesson retains the source animations and interactivity. */
.gpio-led-template { --bg-color:#0a0e1b; --card-bg:#111a2b; --text-color:#ecf2ff; --text-secondary:#aab9cf; --primary-color:#c9b7ff; --secondary-color:#78dfd7; --accent-color:#78dfd7; --success-color:#82e3b6; --warning-color:#ffcb83; --error-color:#ff8d93; --box-shadow:0 12px 35px rgba(0,0,0,.2); }
.gpio-led-template h1 { background:linear-gradient(135deg,#ecf2ff,#c9b7ff); -webkit-background-clip:text; background-clip:text; }
.gpio-led-template .section { border:1px solid var(--stm-line); }
.gpio-led-template .feature-card,.gpio-led-template .explanation-card,.gpio-led-template .hal-feature,.gpio-led-template .tip-card,.gpio-led-template .info-box,.gpio-led-template .config-item,.gpio-led-template .implementation-details { background:#17253a; border-color:var(--stm-line); color:var(--stm-text); }
.gpio-led-template .mode-animation,.gpio-led-template .mode-illustration,.gpio-led-template .resistor-illustration,.gpio-led-template .speed-chart,.gpio-led-template .led-animation-container,.gpio-led-template .video-link { background:#1c2c43; }
.gpio-led-template .video-link:hover { background:#263753; }
.gpio-led-template .stm-template-note { background:#17263c; border-color:var(--stm-cyan); color:var(--stm-text); }
.gpio-led-template .stm-template-note strong { color:#ffc783; }
.gpio-led-template .stm-template-note a,.gpio-led-template .stm-course-nav a { color:var(--stm-cyan); }
.gpio-led-template table { color:var(--stm-text); border-color:var(--stm-line); }
.gpio-led-template th,.gpio-led-template .function-table th { background:#34305a; color:#fff; }
.gpio-led-template td,.gpio-led-template th,.gpio-led-template .function-table td { border-color:var(--stm-line); }
.gpio-led-template tr:nth-child(even),.gpio-led-template .function-table tr:nth-child(even) { background:#17253a; }
.gpio-led-template tr:hover { background:#22334c; }
.gpio-led-template .code-line-reference { background:#24324a; color:#9df1e6; }
.gpio-led-template .code-block,.gpio-led-template .code-content { background:#101927; color:#e7edf6; }
.gpio-led-template .code-header { background:#202e43; }
.gpio-led-template .control-btn { background:#514080; color:#fff; }
.gpio-led-template .control-btn:hover { background:#66519b; }
.gpio-led-template .led-bulb:not(.active) { background:#5b6472; border-color:#7f8b9d; }
.gpio-led-template .gpio-state.high { color:#82e3b6; }
.gpio-led-template footer { border-top:1px solid var(--stm-line); }

/* CubeMX: these overrides include the dynamically inserted source-template inline styles. */
.cubemx-template { --light-color:#0a0e1b; --dark-color:#ecf2ff; --primary-color:#c9b7ff; --secondary-color:#a9c7ee; --gray-color:#b1bfd0; --highlight-color:#78dfd7; --success-color:#82e3b6; --warning-color:#ffca82; --danger-color:#ff9a9e; }
.cubemx-template h1 { background:linear-gradient(90deg,#f0f3ff,#c9b7ff); -webkit-background-clip:text; background-clip:text; }
.cubemx-template .cubemx-sidebar,.cubemx-template .cubemx-main,.cubemx-template .card { background:#111a2b; color:#ecf2ff; border:1px solid var(--stm-line); }
.cubemx-template .cubemx-main .card { background:#18253a; }
.cubemx-template .stm-template-note { background:#17263c; color:#ecf2ff; border-color:#78dfd7; }
.cubemx-template .stm-template-note strong { color:#ffca82; }
.cubemx-template .stm-template-note a { color:#78dfd7; }
.cubemx-template #config-menu li { color:#c7d3e6; }
.cubemx-template #config-menu li:hover,.cubemx-template #config-menu li:focus-visible { outline:2px solid #78dfd7; outline-offset:1px; }
.cubemx-template #config-menu li[style*="background-color: var(--primary-color)"] { background:#514080 !important; color:#fff !important; }
.cubemx-template :is(.cubemx-main,.card) [style*="background-color: #ffffff"],.cubemx-template :is(.cubemx-main,.card) [style*="background-color: #f0f0f0"],.cubemx-template :is(.cubemx-main,.card) [style*="background-color: #f5f5f7"],.cubemx-template :is(.cubemx-main,.card) [style*="background-color: #e6f7ff"] { background-color:#20314a !important; color:#ecf2ff; }
.cubemx-template :is(.cubemx-main,.card) [style*="background-color: rgba(0, 113, 227, 0.05)"] { background-color:rgba(120,223,215,.08) !important; }
.cubemx-template :is(.cubemx-main,.card) [style*="background-color: rgba(40, 205, 65, 0.05)"] { background-color:rgba(130,227,182,.08) !important; }
.cubemx-template :is(.cubemx-main,.card) pre[style*="background-color"] { background:#101927 !important; color:#ecf2ff !important; overflow:auto; }
.cubemx-template :is(.cubemx-main,.card) td,.cubemx-template :is(.cubemx-main,.card) th { border-color:var(--stm-line) !important; }
.cubemx-template .badge-primary { background:rgba(201,183,255,.12); color:#d9cbff; }
.cubemx-template .badge-success { background:rgba(130,227,182,.1); color:#a2f2cd; }
.cubemx-template .badge-warning { background:rgba(255,202,130,.1); color:#ffd89f; }
.cubemx-template .badge-danger { background:rgba(255,154,158,.1); color:#ffadb0; }
.cubemx-template footer { background:#0a0e1b; border-top:1px solid var(--stm-line); color:#aab9cf; }

/* Key lesson follows the user's template cards with the same dark palette. */
.key-template { --background-color:#0a0e1b; --secondary-background-color:#10182a; --card-background:#141f32; --primary-color:#c9b7ff; --text-color:#ecf2ff; --secondary-text-color:#b4c2d6; --tertiary-text-color:#a0b0c8; --border-color:rgba(182,198,225,.2); --code-background:#101927; --code-text-color:#e7edf6; --code-inline-background:#26334a; --code-inline-color:#9dece2; --warning-background:#34291f; --warning-text:#ffd69e; --warning-border:#725335; }
.key-template .hero-section { background:#10182a; border-color:var(--stm-line); }
.key-template .card,.key-template .content-section,.key-template .explanation-card { border:1px solid var(--stm-line); }
.key-template .explanation-card,.key-template .summary-section { background:#1a293f; }
.key-template .source-note { color:#b0bed2; }
.key-template .pin-demo { background:#1a2c42; border-color:#385371; }
.key-template .pin-demo output { color:#78dfd7; }
.key-template .lesson-code { background:#101927; color:#e7edf6; }
.key-template .lesson-kicker,.key-template .lesson-answer summary { color:#c9b7ff; }
.key-template .button { background:#514080; color:#fff; }
.key-template .button-ghost { background:#25334a; color:#e4ddff; }
.key-template .lesson-table-wrap th,.key-template .lesson-table-wrap td { border-color:var(--stm-line); }
.key-template .footer { border-color:var(--stm-line); }

/* Maintain contrast for original template badges and inline code. */
.gpio-led-template :is(.hal-icon,.key-point-icon) { color:#101827; }
.cubemx-template :is(.cubemx-main,.card) code[style*="background: #f0f0f0"] { background:#26334a !important; color:#9dece2 !important; }