:root {
  color-scheme: light dark;
  --brand: #0D2B45; --brand-deep: #082037; --brand-red: #E53935;
  --bg: #F5F7FA; --text: #17202A; --muted: #4E5D69; --surface: #FFFFFF; --surface-alt: #EDF2F5;
  --border: #C7D2DB; --border-strong: #7A91A3; --accent: #0D2B45; --accent-text: #FFFFFF;
  --button-bg: #0D2B45; --button-text: #FFFFFF; --button-border: #0D2B45; --button-soft-bg: #FFFFFF; --button-soft-text: #0D2B45;
  --focus: #C62828; --shadow: 0 .45rem 1.4rem rgba(13,43,69,.10); --shadow-strong: 0 .65rem 1.8rem rgba(13,43,69,.16);
  --body-size: 100%; --body-line-height: 1.58; --body-weight: 400;
}
@media (prefers-color-scheme: dark) { :root { --bg:#0B1218; --text:#F7FAFC; --muted:#C9D3DC; --surface:#121E28; --surface-alt:#172A39; --border:#496579; --border-strong:#A8BECE; --accent:#9BD5FF; --accent-text:#071018; --button-bg:#255678; --button-text:#FFFFFF; --button-border:#8ABBD9; --button-soft-bg:#172A39; --button-soft-text:#F7FAFC; --focus:#FFD166; --shadow:0 .45rem 1.4rem rgba(0,0,0,.24); --shadow-strong:0 .65rem 1.8rem rgba(0,0,0,.34); } }
html[data-theme="light"] { color-scheme:light; --bg:#FFFFFF; --text:#000000; --muted:#202020; --surface:#FFFFFF; --surface-alt:#FFFFFF; --border:#000000; --border-strong:#000000; --accent:#003B70; --accent-text:#FFFFFF; --button-bg:#000000; --button-text:#FFFFFF; --button-border:#000000; --button-soft-bg:#FFFFFF; --button-soft-text:#000000; --focus:#9B3200; --shadow:none; --shadow-strong:none; }
html[data-theme="dark"] { color-scheme:dark; --bg:#000000; --text:#FFFFFF; --muted:#F0F0F0; --surface:#000000; --surface-alt:#000000; --border:#FFFFFF; --border-strong:#FFFFFF; --accent:#9BD5FF; --accent-text:#000000; --button-bg:#FFFFFF; --button-text:#000000; --button-border:#FFFFFF; --button-soft-bg:#000000; --button-soft-text:#FFFFFF; --focus:#FFE36E; --shadow:none; --shadow-strong:none; }
html[data-text-size="large"] { --body-size:115%; } html[data-text-size="xlarge"] { --body-size:130%; } html[data-text-size="max"] { --body-size:150%; }
html[data-line-spacing="comfortable"] { --body-line-height:1.8; } html[data-line-spacing="wide"] { --body-line-height:2; } html[data-bold="true"] { --body-weight:600; }
* { box-sizing:border-box; }
html { font-family:Inter,"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif; line-height:var(--body-line-height); font-size:var(--body-size); background:var(--bg); }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--text); font-size:1rem; font-weight:var(--body-weight); }
img { max-width:100%; } .wrap { width:min(100% - 2rem,62rem); margin-inline:auto; }
.skip-link { position:absolute; left:.5rem; top:-6rem; background:#FFF; color:#000; border:3px solid #000; border-radius:.5rem; padding:.75rem 1rem; z-index:100; font-weight:800; } .skip-link:focus { top:.5rem; }
.site-header { background:linear-gradient(135deg,var(--brand-deep),var(--brand)); color:#FFF; border-bottom:.28rem solid var(--brand-red); padding:.65rem 0; box-shadow:0 .25rem .9rem rgba(13,43,69,.22); }
.header-row { display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.brand { display:inline-flex; align-items:center; gap:.7rem; color:#FFF; text-decoration:none; border-radius:.55rem; padding:.15rem .25rem .15rem 0; font-weight:800; } .brand:hover { text-decoration:none; }
.brand-mark { display:block; width:2.8rem; height:2.8rem; object-fit:contain; flex:0 0 auto; } .brand-name { font-size:1.35rem; letter-spacing:-.015em; }
.language-switch,.inline-actions,.search-row,.resource-actions,.book-actions,.settings-actions { display:flex; gap:.65rem; flex-wrap:wrap; }
.language-switch button { min-height:2.55rem; padding:.5rem .78rem; color:#FFF; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.72); box-shadow:none; }
.language-switch button[aria-pressed="true"] { color:var(--brand); background:#FFF; border-color:#FFF; } .site-header :focus-visible { outline-color:#FFD166; }
main { padding-block:1.4rem 3rem; } main > section { border-radius:1rem; }
main > section:not(.hero) { margin-top:1.2rem; padding:clamp(1rem,3vw,1.35rem); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow); }
.hero { position:relative; overflow:hidden; margin-top:.25rem; padding:clamp(1.25rem,4vw,2rem); background:linear-gradient(135deg,var(--surface),var(--surface-alt)); border:1px solid var(--border); border-left:.4rem solid var(--brand-red); box-shadow:var(--shadow-strong); }
.hero::after { content:""; position:absolute; width:9rem; height:9rem; right:-3rem; top:-4.5rem; border:1.25rem solid rgba(229,57,53,.10); border-radius:50%; pointer-events:none; } .hero h1 { margin-top:0; } .hero p:last-child { margin-bottom:0; }
h1,h2,h3 { line-height:1.22; text-wrap:balance; } h1 { font-size:clamp(1.9rem,5vw,2.75rem); letter-spacing:-.025em; color:var(--text); }
h2 { font-size:clamp(1.3rem,3vw,1.55rem); margin:0 0 .85rem; color:var(--text); } h2::after { content:""; display:block; width:2.8rem; height:.2rem; margin-top:.45rem; border-radius:999px; background:var(--brand-red); } h3 { font-size:1.1rem; margin:0; } p { max-width:70ch; }
label { display:block; font-weight:750; margin-bottom:.35rem; }
input[type="search"],select { width:100%; min-height:3rem; padding:.72rem .85rem; border:2px solid var(--border-strong); border-radius:.65rem; background:var(--bg); color:var(--text); font:inherit; } input[type="search"]:hover,select:hover { border-color:var(--accent); }
input[type="checkbox"] { width:1.35rem; height:1.35rem; margin:0; flex:0 0 auto; accent-color:var(--brand); } .search-row input { flex:1 1 18rem; }
button,.button-link { min-height:2.75rem; border:2px solid var(--border-strong); border-radius:.65rem; padding:.65rem .95rem; background:var(--button-soft-bg); color:var(--button-soft-text); font:inherit; font-weight:750; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 .12rem .25rem rgba(13,43,69,.08); transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease; }
button[type="submit"],.button-link { background:var(--button-bg); color:var(--button-text); border-color:var(--button-border); } button:hover,.button-link:hover { transform:translateY(-1px); box-shadow:0 .3rem .75rem rgba(13,43,69,.16); } button:active,.button-link:active { transform:translateY(0); } button[aria-pressed="true"] { border-color:var(--brand-red); box-shadow:inset 0 0 0 1px var(--brand-red); } button:disabled { opacity:.58; cursor:not-allowed; }
a { color:var(--accent); text-decoration-thickness:.12em; text-underline-offset:.18em; } a:hover { text-decoration-thickness:.18em; } :focus-visible { outline:4px solid var(--focus); outline-offset:3px; }
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; } .muted { color:var(--muted); }
.resource-list,.video-list { display:grid; gap:1rem; margin-top:1rem; }
.resource-card,.video-card { border:1px solid var(--border); border-radius:.9rem; padding:1.05rem; background:var(--surface); box-shadow:var(--shadow); } .resource-card { border-top:.28rem solid var(--brand); } .video-card { border-top:.28rem solid var(--brand-red); }
.resource-meta,.video-meta { color:var(--muted); } .resource-meta { margin:.4rem 0 .8rem; } .video-meta { margin:.25rem 0 .65rem; }
.badge { display:inline-block; margin-left:.45rem; padding:.15rem .5rem; border:1px solid var(--brand-red); border-radius:999px; color:var(--text); font-size:.82rem; font-weight:800; }
.news-list { display:grid; gap:.8rem; margin-top:.5rem; } .news-item { border:1px solid var(--border); border-left:.35rem solid var(--brand-red); border-radius:.7rem; padding:.8rem .9rem; background:var(--surface-alt); } .news-item p { margin:.25rem 0 0; color:var(--muted); }
.inline-actions { margin-top:.85rem; } .panel { border:1px solid var(--border); border-left:.35rem solid var(--brand-red); border-radius:.75rem; padding:1rem; background:var(--surface-alt); margin-top:1rem; } .panel h3 { margin-bottom:.5rem; } .panel p:first-child { margin-top:0; } .panel p:last-child { margin-bottom:0; } .panel ul { padding-left:1.3rem; }
.contact-links { list-style:none; padding:0; margin:.65rem 0 1.3rem; display:flex; flex-wrap:wrap; gap:.65rem; } .contact-links li { margin:0; } .contact-links .button-link { background:var(--button-soft-bg); color:var(--button-soft-text); border-color:var(--border-strong); }
.settings-panel { margin-top:.65rem; } .settings-form { display:grid; gap:1rem; } .settings-form .settings-group { border:1px solid var(--border-strong); border-radius:.75rem; padding:.9rem; margin:0; background:var(--surface); } .settings-form .settings-group-title { font-weight:800; margin:0 0 .6rem; } .settings-form .check-row { display:flex; gap:.7rem; align-items:flex-start; } .settings-form .check-row label { margin:0; }
.book-layout { display:grid; grid-template-columns:minmax(9rem,14rem) minmax(0,1fr); gap:1.35rem; align-items:start; } .book-figure { margin:0; } .book-cover { display:block; width:100%; max-width:14rem; height:auto; border-radius:.75rem; border:1px solid var(--border); box-shadow:var(--shadow-strong); } .book-copy h3 { margin-top:0; } .book-subtitle { font-weight:750; } .book-actions { margin:1rem 0 .75rem; } .book-note { max-width:48rem; }
.site-footer { margin-top:1rem; background:var(--brand); border-top:.28rem solid var(--brand-red); padding:1.35rem 0; color:#FFF; } .site-footer p { margin:0; color:#FFF; }
.no-results { padding:1rem; border:2px dashed var(--border-strong); border-radius:.7rem; background:var(--surface-alt); } .back-link { font-weight:750; } .video-sort-control { margin-top:1rem; max-width:24rem; }
.video-card h3 { margin:.85rem 0 .35rem; } .video-thumbnail { display:block; width:100%; max-width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:.7rem; border:1px solid var(--border); } .video-description { margin:0 0 1rem; }
.video-play-button { background:var(--button-bg); color:var(--button-text); border-color:var(--button-border); }
.video-player-section { border-top:.28rem solid var(--brand-red) !important; }
.video-player-title { margin:0 0 1rem; font-size:1.2rem; }
.video-player-frame { width:100%; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--border); border-radius:.8rem; background:#000; }
.video-player-frame iframe { display:block; width:100%; height:100%; border:0; }
.video-player-actions { display:flex; gap:.65rem; flex-wrap:wrap; margin-top:1rem; }
.pagination { display:flex; gap:.75rem; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-top:1.25rem; } .page-indicator { margin:0; font-weight:750; }
.offline-shell { min-height:calc(100vh - 12rem); display:grid; align-items:center; padding-block:2rem; } .offline-card { background:var(--surface); border:1px solid var(--border); border-left:.4rem solid var(--brand-red); border-radius:1rem; padding:clamp(1.2rem,4vw,2rem); box-shadow:var(--shadow-strong); }
@media (min-width:44rem) { .resource-list { grid-template-columns:repeat(2,minmax(0,1fr)); } .settings-form { grid-template-columns:repeat(2,minmax(0,1fr)); } .settings-actions,.settings-status { grid-column:1 / -1; } }
@media (min-width:52rem) { .video-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:38rem) { .wrap { width:min(100% - 1.25rem,62rem); } .book-layout { grid-template-columns:1fr; } .book-cover { max-width:11rem; } .brand-mark { width:2.45rem; height:2.45rem; } .brand-name { font-size:1.2rem; } .language-switch { width:100%; } .language-switch button { flex:1 1 8rem; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }