/* Тема курса Python: оформление страниц (цвета, фоны, рамки, шрифты). Раскладка — в engine/site/static/base.css. */
/* ============================================================
   Общие стили курса Python (единый источник для всех страниц)
   ============================================================ */
:root { --bg: #faf6e9; --ink: #4a5366; --ink-soft: #6c757d; --gold: #c7b183; --gold-soft: #e8e5dc; --card: rgba(255, 255, 255, 0.95); --code-bg: #282c34; }
body { background: var(--bg); font-family: Arial, Helvetica, sans-serif; color: #333; line-height: 1.6; }
.slide { background: var(--card); border: 2px solid var(--gold); border-radius: 15px; /* было 800 — используем больше ширины экрана */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.main-title { color: var(--ink); font-size: 32px; font-weight: bold; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); }
h2 { color: var(--ink); font-size: 24px; }
h3 { color: var(--ink); }
h4 { color: var(--ink-soft); }
.lead-intro { font-size: 16.5px; color: var(--ink); }
.disclaimer { font-size: 12.5px; color: var(--ink-soft); background: #faf7ee; border: 1px solid var(--gold-soft); border-radius: 10px; line-height: 1.5; }
.theory-block { background: #f8f9fa; border-left: 4px solid var(--gold); border-radius: 8px; }
.section-card { background: #fff; border: 1px solid var(--gold-soft); border-radius: 10px; box-shadow: 0 2px 8px rgba(199, 177, 131, 0.2); }
.section-title { color: var(--ink); font-size: 20px; }
.section-title::before { color: var(--gold); }
.example { background: #e9ecef; border-radius: 8px; }
.task { background: #fff; border: 2px solid var(--gold-soft); border-radius: 10px; }
.hint { color: #8b7355; font-style: italic; border-left: 3px solid var(--gold); }
.warning { background: #fff3cd; border-left: 4px solid #ffd666; border-radius: 8px; }
.note { background: #e7f3fe; border-left: 4px solid #1a73e8; border-radius: 8px; }
.note-card { background: #fff3cd; border: 1px solid var(--gold); border-radius: 8px; }
.complexity { background: #edf5e1; border-left: 4px solid #5cb85c; border-radius: 6px; }
.file-structure { font-family: Consolas, Monaco, monospace; background: #f8f9fa; border-radius: 5px; }
code { background: #f4f4f4; border-radius: 4px; font-family: Consolas, Monaco, monospace; }
.code-section { background: none; }
pre[class*="language-"] { border-radius: 8px; background: var(--code-bg) !important; }
code[class*="language-"] { color: #abb2bf; font-family: Consolas, Monaco, 'Andale Mono', monospace; background: none; }
code[class*="language-"] .token.comment { color: #7c858d; }
code[class*="language-"] .token.number { color: #e5c07b; }
code[class*="language-"] .token.operator { color: #c678dd; }
code[class*="language-"] .token.keyword { color: #c678dd; }
code[class*="language-"] .token.string { color: #98c379; }
code[class*="language-"] .token.punctuation { color: #abb2bf; }
a { color: var(--ink); text-decoration: none; }
a:visited { color: #6a5060; }
.section-links a:hover { background: #f0e9ff; color: var(--ink); }
a.back, a.forward { border: 1px solid var(--gold); border-radius: 8px; background: #fffdf6; }
a.back:hover, a.forward:hover { background: #f5efdf; }
/* --- Корона слайда (разметка — в templates/layout.html) ---
   Сектор круга («Тейват») на верхней кромке слайда и звезда над ним. Дуга продолжает рамку слайда, заливка закрывает рамку под куполом.
   Цвета берутся из переменных, чтобы совпадать с рамкой слайда в любой теме. */
:root { --slide-bw: 2px; }
#toc-sidebar { background: linear-gradient(180deg, #fffdf6 0%, #f7f1df 100%); border-right: 2px solid var(--gold); box-shadow: 2px 0 16px rgba(0, 0, 0, 0.12); }
/* на десктопе открытый сайдбар отодвигает контент, не накрывая его */
@media (min-width: 1024px) {
    #toc-sidebar { box-shadow: 1px 0 8px rgba(0, 0, 0, 0.08); }
}
.toc-head { border-bottom: 1px solid var(--gold-soft); }
.toc-logo { font-weight: bold; color: var(--ink); font-size: 17px; }
.toc-x { border: none; background: none; font-size: 16px; color: var(--ink-soft); border-radius: 6px; }
.toc-x:hover { background: var(--gold-soft); }
.toc-scroll::-webkit-scrollbar-thumb { background: var(--gold-soft); border-radius: 8px; }
.toc-sec-title { border: none; background: none; font: inherit; border-radius: 8px; color: var(--ink); font-weight: 600; font-size: 14px; }
.toc-sec-title:hover { background: var(--gold-soft); }
.toc-sec-active .toc-sec-title { color: #8b6f2e; }
.toc-sec-n { background: var(--gold); color: #fff; border-radius: 6px; font-size: 12px; font-weight: 700; }
.toc-caret { font-size: 11px; color: var(--gold); }
.toc-items a { font-size: 13.5px; color: var(--ink-soft); border-radius: 6px; border-left: 2px solid transparent; }
.toc-items a:hover { background: #f0e9ff; color: var(--ink); }
.toc-current { background: var(--gold-soft) !important; color: var(--ink) !important; border-left: 2px solid var(--gold) !important; font-weight: 600; }
.toc-all { border-top: 1px solid var(--gold-soft); color: var(--ink); font-weight: 600; font-size: 14px; background: #fffdf6; }
.toc-all:hover { background: #f5efdf; }
#toc-toggle { border-radius: 12px; border: 1px solid var(--gold); background: #fffdf6; color: var(--ink); font-size: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
#toc-toggle:hover { background: #f5efdf; }
#toc-backdrop { background: rgba(0, 0, 0, 0.35); }
.gl { text-decoration: underline dotted var(--gold); }
.gl:hover, .gl:focus-visible { background: rgba(199, 177, 131, 0.28); outline: none; border-radius: 3px; }
pre .gl { text-decoration-color: rgba(255, 255, 255, 0.4); }
.gl-pop { background: #fffdf6; color: #333; border: 1px solid var(--gold); border-radius: 14px; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3); font: 14px/1.5 Arial, Helvetica, sans-serif; }
.gl-pop pre { font-size: 12.5px; border-radius: 8px; }
.gl-pop-head b { font-size: 16px; color: var(--ink); }
.gl-x { border: none; background: none; font-size: 14px; color: var(--ink-soft); border-radius: 6px; }
.gl-x:hover { background: var(--gold-soft); }
.gl-pop-where { font-size: 12.5px; color: var(--ink-soft); }
.gl-pop-where a { text-decoration: underline; }
.gl-pop-all { font-weight: 700; font-size: 13px; }
.gl-kind { font: 600 11px Arial, sans-serif; border-radius: 999px; background: var(--gold-soft); color: var(--ink); }
.gl-kind-keyword { background: #efe3ff; }
.gl-kind-operator { background: #ffe9d6; }
.gl-kind-builtin { background: #dff3f7; }
.gl-kind-method { background: #e0eefc; }
.gl-kind-library { background: #e3f5e1; }
.gl-kind-concept { background: #fdf0c9; }
.gl-link { border: 1px solid var(--gold); border-radius: 999px; background: #fffdf6; font-weight: 700; }
.gl-link:hover { background: #f5efdf; }
#gl-q { font: inherit; border: 1px solid var(--gold); border-radius: 12px; background: #fff; }
.gl-chip { border: 1px solid var(--gold); border-radius: 999px; background: #fffdf6; color: var(--ink); font: 600 13px Arial, sans-serif; }
.gl-chip.active { background: var(--gold); color: #fff; }
.gl-card { background: #fff; border: 1px solid var(--gold-soft); border-radius: 12px; box-shadow: 0 2px 8px rgba(199, 177, 131, 0.2); }
.gl-card h3 { font-size: 17px; }
.gl-card pre[class*="language-"] { font-size: 12.5px; }
.gl-card:target { box-shadow: 0 0 0 3px var(--gold); }
.gl-where { font-size: 12.5px; color: var(--ink-soft); }
.gl-where a { text-decoration: underline; }
#gl-empty { color: var(--ink-soft); }
/* --- Адаптивность --- */
@media (max-width: 640px) {
    .slide { border-radius: 12px; }
    .main-title { font-size: 26px; }
    h2 { font-size: 21px; }
}