/* Shared code typography and a quieter, more spacious learning interface. */
:root { --editor-font:18px; --editor-line:28.8px; --radius:16px; --shadow-card:0 14px 40px #132a5b0b; }
.site-head { background:#ffffffed; backdrop-filter:blur(16px); border-bottom:1px solid #dce5f3; }
.btn { border-radius:10px; transition:background .18s,box-shadow .18s; }
.btn-primary { box-shadow:0 4px 14px #1558ed22; }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline:3px solid #759aff; outline-offset:3px; }
.hero { background:radial-gradient(ellipse at 80% 20%,#24499a 0,transparent 55%),#0c1d42; }
.page-head { background:linear-gradient(115deg,#0c1d42,#183e82); }
.lesson-block,.lp-card { border-radius:16px; box-shadow:var(--shadow-card); }
.lesson-block { border:1px solid #dce5f3; }
.learn-side { background:#f9fbff; }
.lesson-nav a { border-radius:9px; margin:3px 8px; }
.lesson-head h1 { font-size:clamp(24px,2.6vw,36px); line-height:1.28; letter-spacing:-.025em; }
.trainer-cta { background:linear-gradient(120deg,#f0f5ff,#fff); border-radius:16px; box-shadow:var(--shadow-card); }
.prose pre,.ls-code,.ls-out { font-size:var(--editor-font) !important; line-height:1.6 !important; }
.drive-confirm { display:flex; align-items:center; flex-wrap:wrap; gap:14px; background:#eef5ff; border:1px solid #cbdcfb; border-radius:12px; padding:16px; margin:16px 0; }
.drive-confirm > div { flex:1; min-width:220px; }
.notice-band { background:#f0f5ff; border-bottom:1px solid #d3e0f8; }
.notice-band .wrap { padding-block:12px; }
.notice-band p { white-space:pre-wrap; font-size:14px; }
.admin-intro { display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:24px; }
.admin-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:18px; }
.admin-card { padding:24px; border:1px solid #dce5f3; border-radius:16px; background:#fff; box-shadow:var(--shadow-card); }
.admin-card h2 { font-size:20px; line-height:1.35; margin-bottom:12px; }
.admin-card p { color:#56647a; margin-bottom:12px; }
.payment-setup { margin-block:20px; }
.payment-setup-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:12px; margin-block:16px; }
.payment-setup-list > div { padding:12px 14px; border:1px solid #dce5f3; border-radius:10px; background:#f9fbff; }
.payment-setup-list dt { font-size:13px; color:#56647a; margin-bottom:6px; }
.payment-setup-list dd { margin:0; font-size:15px; font-weight:700; }
.admin-card .actions { margin-top:18px; }
.admin-form { display:grid; gap:16px; max-width:900px; }
.admin-form label { display:grid; gap:6px; font-size:14px; font-weight:700; }
.admin-form input:not([type=checkbox]),.admin-form textarea,.admin-form select,.admin-search { width:100%; padding:12px 14px; background:#f9fbff; border:1px solid #bccbe2; border-radius:9px; font:inherit; color:#0c1d42; }
.admin-form textarea { min-height:100px; resize:vertical; }
.admin-form label.check { display:flex; align-items:center; gap:10px; }
.admin-form small { font-weight:400; color:#56647a; }
.admin-form .validation-summary-errors,.admin-form .field-validation-error { color:#a92b23; }
.admin-flash { padding:12px 16px; border:1px solid #a4d0b6; background:#eefaf2; border-radius:10px; margin-bottom:18px; }
.admin-table-wrap { overflow-x:auto; border:1px solid #dce5f3; border-radius:14px; background:#fff; }
.admin-table { width:100%; border-collapse:collapse; font-size:14px; }
.admin-table th,.admin-table td { text-align:left; padding:14px 16px; border-bottom:1px solid #e7edf6; vertical-align:top; }
.admin-table th { background:#f4f7fc; font-size:12px; color:#56647a; }
.admin-table tr:last-child td { border-bottom:0; }
.admin-badge { display:inline-block; padding:4px 9px; border-radius:20px; background:#e7efff; font-size:12px; }
.kab-tabs { flex-wrap:wrap; }
.editor-tools { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font:13px/1.4 var(--font); }
.editor-tools label { display:flex; gap:6px; align-items:center; }
.editor-tools button,.editor-tools select { padding:6px 10px; border:1px solid #cbd7ea; border-radius:7px; background:#fff; color:#122348; font:inherit; cursor:pointer; }
.editor-tools button[aria-pressed=true] { background:#1558ed; color:#fff; border-color:#1558ed; }
.editor-tools output { min-width:36px; text-align:center; }
.lesson-code-tools { padding:10px 0; margin-bottom:8px; }
@media(max-width:600px) { .admin-card { padding:18px; } .admin-table th,.admin-table td { padding:12px; } }
@media(prefers-reduced-motion:reduce) { .btn { transition:none; } html { scroll-behavior:auto; } }

.cat-card { box-shadow:var(--shadow-card); border-color:#dce5f3; }
.cat-body h3 { font-size:22px; letter-spacing:-.02em; }
.meta-row li { border-radius:20px; }

.lesson-search { display:grid; gap:6px; margin-top:18px; font-size:13px; font-weight:700; }
.lesson-search input { min-width:0; width:100%; padding:10px 12px; border:1px solid #bccbe2; border-radius:9px; background:#fff; font:14px var(--font); }
/* Free learning announcement; uses the existing brand palette. */
.hero-free { display: inline-block; margin: 12px 0 20px; padding: 12px 18px; border: 1px solid rgba(255,255,255,.3); border-radius: 12px; background: rgba(255,255,255,.1); color: #fff; font-size: clamp(18px,2vw,22px); font-weight: 700; line-height: 1.5; }

/* Learning steps and assessment: keep labels outside proportional segments. */
.week-card { gap: 22px; box-shadow: var(--shadow-card); }
.week-card h3 { font-size: 15px; letter-spacing: .06em; }
.flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.flow li { justify-content: flex-start; gap: 12px; min-height: 120px; padding: 18px; border-radius: 12px; font-size: 17px; line-height: 1.45; }
.flow b { font-size: 24px; line-height: 1; }
.flow span { overflow-wrap: anywhere; }
.assessment { display: grid; gap: 16px; min-width: 0; }
.assessment-bar { display: grid; grid-template-columns: 3fr 2fr 5fr; height: 10px; overflow: hidden; border-radius: 8px; }
.assessment-bar span:nth-child(1) { background: var(--cobalt-soft); }
.assessment-bar span:nth-child(2) { background: var(--cobalt-mid); }
.assessment-bar span:nth-child(3) { background: var(--cobalt); }
.assessment-weights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.assessment-weights > div { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-width: 0; padding: 16px 12px; border-radius: 12px; background: #f2f6ff; border: 1px solid #dce5f3; }
.assessment-weights dt { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.assessment-weights dd { font-size: 28px; font-weight: 700; line-height: 1.15; color: var(--cobalt); }
.assessment-pass { display: flex; gap: 14px; align-items: center; padding: 16px; border: 1px solid #dce5f3; border-radius: 12px; background: #fff; }
.assessment-pass strong { flex: none; font-size: 28px; color: var(--navy); }
.assessment-pass span { font-size: 16px; line-height: 1.5; }

/* Contact text sits on a quiet surface, with only Telegram and Gmail. */
.contact-section { background: radial-gradient(ellipse at 15% 0%, #203d71 0, transparent 65%), var(--navy); }
.contact-section .contacts { gap: 16px; min-width: 0; }
.contact-section .contacts li { min-width: 0; }
.contact-section .contacts a, .contact-section .contact-plain { min-height: 92px; padding: 22px 24px; border-radius: 16px; background: #ffffff08; }
.contact-section .contacts b { font-size: 22px; }
.contact-section .contacts a span, .contact-section .contact-plain > span { font-family: var(--font); font-size: 16px; line-height: 1.5; min-width: 0; }
.contact-section .contacts a:hover { background: #ffffff14; border-color: #86adff; }
@media (max-width: 600px) {
    .assessment-weights { grid-template-columns: minmax(0, 1fr); }
    .assessment-weights > div { flex-direction: row; align-items: center; padding: 16px; }
    .assessment-weights dd { flex: none; }
    .assessment-pass { align-items: flex-start; }
    .contact-section .contacts a, .contact-section .contact-plain { flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px; }
    .contact-section .contacts a span, .contact-section .contact-plain > span { text-align: left; }
}
@media (max-width: 380px) {
    .flow { grid-template-columns: minmax(0, 1fr); }
    .flow li { min-height: auto; flex-direction: row; align-items: baseline; }
}