/* ==========================================================================
   DHL — components.css : metro lines, cards, pathways, academy, chat
   ========================================================================== */

/* ---------- Chips, badges, progress ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.chip { min-height: 40px; padding: .4rem 1rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface);
  color: var(--ink); font: 500 .95rem/1.1 var(--font-body); cursor: pointer; }
.chip:hover { border-color: var(--navy); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip-small { min-height: 34px; padding: .3rem .8rem; font-size: .85rem; }
.badge { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.badge-sample { background: #eef1f5; color: #54657a; border: 1px dashed #aab8c8; }
.badge-draft { background: var(--mango-soft); color: var(--mango-text); }
.badge-pinned { background: var(--navy); color: #fff; }
.progress { height: 10px; border-radius: 999px; background: #e3e9f0; overflow: hidden; }
.progress-fill { display: block; height: 100%; width: 0; background: var(--mango); border-radius: inherit; transition: width .3s; }
.progress-text { font-size: .9rem; color: var(--text-soft); margin: .4rem 0 0; }
.progress-box { max-width: 26rem; margin-bottom: 1.5rem; }
.done-btn { display: inline-flex; align-items: center; gap: .35rem; min-height: 38px; padding: .3rem .8rem; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--text-soft); font: 600 .88rem var(--font-body); cursor: pointer; }
.done-btn .icon { width: 1em; height: 1em; opacity: .35; }
.done-btn[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #fff; }
.done-btn[aria-pressed="true"] .icon { opacity: 1; }

/* ---------- Metro line (the signature element) ---------- */
.metro { --line-color: var(--navy); list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 0; }
.station { position: relative; display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding-bottom: 1.75rem; }
.station::before { /* track */
  content: ""; position: absolute; left: calc(1.5rem - 4px); top: 0; bottom: 0; width: 8px; background: var(--line-color); }
.station:first-child::before { top: 1.5rem; }
.station:last-child::before { bottom: auto; height: 1.5rem; }
.station-dot { position: relative; z-index: 1; width: 3rem; height: 3rem; border-radius: 50%; background: #fff;
  border: 5px solid var(--line-color); display: grid; place-items: center; color: var(--line-color); }
.station-dot .icon { width: 1.3rem; height: 1.3rem; }
.station.is-done .station-dot { background: var(--line-color); color: #fff; }
.station-body { padding-top: .35rem; }
.station-num { display: block; font: 700 .85rem var(--font-display); color: var(--text-soft); }
.station-body h3 { margin-bottom: .2rem; }
.station-body h3 a { color: var(--ink); text-decoration: none; }
.station-body h3 a:hover { text-decoration: underline; }
.station-body p { color: var(--text-soft); margin-bottom: .6rem; font-size: 1rem; }
.section--navy .metro { --line-color: var(--mango); }
.section--navy .station-dot { background: var(--navy); color: var(--mango); }
.section--navy .station-body h3 a { color: #fff; }
.section--navy .station-num { color: var(--mango); }

/* "You are here" strip under inner page titles */
.here { margin-top: 1.75rem; }
.here-label { font-size: .95rem; color: #d3deea; margin-bottom: .6rem; }
.here-label strong { color: var(--mango); }
.here-line { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); position: relative; }
.here-line::before { content: ""; position: absolute; left: 7px; right: 7px; top: 6px; height: 4px; background: rgba(255,255,255,.2); border-radius: 2px; }
.here-line li { position: relative; padding-top: 1.35rem; font-size: .75rem; }
.here-line li::before { content: ""; position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--navy); border: 3px solid rgba(255,255,255,.35); }
.here-line li.passed::before { border-color: var(--mango); background: var(--mango); }
.here-line li.current::before { border-color: var(--mango); background: #fff; box-shadow: 0 0 0 4px rgba(245,165,36,.35); }
.here-line a { color: #aebfd3; text-decoration: none; display: none; }
.here-line li.current a { color: #fff; font-weight: 600; }

/* ---------- Area cards (five ministry areas) ---------- */
.area-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.area-card a { display: flex; flex-direction: column; height: 100%; padding: 1.5rem; border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--line); color: var(--ink); text-decoration: none; border-top: 6px solid var(--area); }
.area-card a:hover { border-color: var(--area); }
.area-card p { color: var(--text-soft); flex: 1; }
.area-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: color-mix(in srgb, var(--area) 12%, white); color: var(--area); margin-bottom: 1rem; }
.area-go { font-weight: 600; color: var(--area); }
.area-teal { --area: var(--teal); } .area-red { --area: var(--red); } .area-blue { --area: var(--blue); }
.area-mango { --area: #c77d00; } .area-violet { --area: var(--violet); }

/* ---------- Pathway choosers ---------- */
.path-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.path-choice a { display: block; height: 100%; padding: 1.4rem 1.4rem 1.5rem; border-radius: var(--r-lg); background: var(--surface);
  border: 2px solid var(--line); color: var(--ink); text-decoration: none; position: relative; }
.path-choice a:hover { border-color: var(--lc); }
.path-choice.is-mine a { border-color: var(--lc); box-shadow: inset 0 0 0 1px var(--lc); }
.path-choice h3 { margin: .75rem 0 .25rem; }
.path-choice p { color: var(--text-soft); margin-bottom: .75rem; }
.path-stops { display: block; font-size: .88rem; color: var(--text-soft); border-top: 4px solid var(--lc); padding-top: .6rem; }
.path-next { display: block; margin-top: .75rem; font-weight: 600; color: var(--lc-text, var(--lc)); }
.line-badge { display: inline-block; padding: .25rem .7rem; border-radius: 999px; background: var(--lc); color: #fff; font: 700 .8rem var(--font-display); }
.line-teal { --lc: var(--teal); } .line-red { --lc: var(--red); } .line-blue { --lc: var(--blue); }
.line-mango { --lc: #d98a06; --lc-text: var(--mango-text); }
.section--navy .path-choice a { background: var(--navy-2); border-color: rgba(255,255,255,.12); color: #fff; }
.section--navy .path-choice p, .section--navy .path-stops { color: #c9d6e6; }
.section--navy .path-next { color: var(--mango); }

/* Pathways page */
.pathway { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.25rem, 3vw, 2rem); margin-bottom: 1.5rem; }
.pathway.is-mine { border: 2px solid var(--lc); }
.pathway .metro { --line-color: var(--lc); margin-top: 1.5rem; }
.pathway-head { display: grid; gap: 1rem; align-items: start; }
.pathway-head h2 { font-size: var(--step-2); margin-bottom: .2rem; }
.pathway-head p { color: var(--text-soft); margin: 0; }
.pathway-status .progress-fill { background: var(--lc); }
.pathway-status .btn { margin-top: .75rem; }
.my-pathway { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; background: var(--mango-soft); border-radius: var(--r-md); padding: 1rem 1.25rem; margin-bottom: 2rem; }
.my-pathway p { margin: 0; flex: 1 1 18rem; }

/* ---------- Topic / resource / study / group cards ---------- */
.card-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.topic-card, .resource-card, .study-card, .group-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.35rem; display: flex; flex-direction: column; gap: .25rem; }
.topic-card p, .resource-card p, .study-card p, .group-card p { color: var(--text-soft); font-size: 1rem; margin-bottom: .6rem; }
.topic-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem; }
.topic-head h3 { margin: 0; }
.refs { display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: center; font-size: .92rem !important; }
.refs .icon { color: var(--navy-3); width: 1.05em; }
.assignment { background: var(--bg); border-left: 4px solid var(--mango); padding: .65rem .8rem; border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--ink) !important; }
.tip { color: var(--ink) !important; }
.topic-card .text-btn { align-self: flex-start; margin-top: auto; }
.resource-cat, .study-level { font-size: .85rem; font-weight: 600; color: var(--teal); margin: 0 !important; }
.study-level { color: var(--blue); }
.tips { margin: 0 0 .75rem; padding-left: 1.1rem; font-size: .95rem; color: var(--ink); }
.tips li { margin-bottom: .3rem; }
.resource-card .text-link { margin-top: auto; }
.study-card .btn, .group-card .btn { align-self: flex-start; margin-top: auto; }
.empty { list-style: none; padding: 1.5rem; border: 2px dashed var(--line); border-radius: var(--r-md); color: var(--text-soft); grid-column: 1 / -1; }

.search-bar { position: relative; max-width: 30rem; margin-bottom: .75rem; }
.search-bar .icon { position: absolute; left: .9rem; top: 50%; translate: 0 -50%; color: var(--text-soft); }
input[type="search"], input[type="text"], textarea {
  width: 100%; min-height: 48px; padding: .65rem .9rem .65rem 2.7rem; border-radius: var(--r-sm); border: 1.5px solid var(--line);
  background: var(--surface); color: var(--ink); font: 1rem var(--font-body); }
input:focus-visible, textarea:focus-visible { outline: 3px solid var(--mango); outline-offset: 0; border-color: var(--navy); }
.result-count { font-size: .95rem; color: var(--text-soft); }

/* Lessons */
.lesson-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.lesson { display: grid; grid-template-columns: 2.75rem 1fr; gap: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.1rem 1.25rem; }
.lesson-num { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--navy); color: #fff; font: 700 1.05rem var(--font-display); }
.lesson.is-done .lesson-num { background: var(--teal); }
.lesson-body h3 { margin-bottom: .2rem; }
.lesson-body p { color: var(--text-soft); margin-bottom: .4rem; font-size: 1rem; }
.lesson-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- Feed ---------- */
.feed-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.feed-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; position: relative; }
.feed-card:hover { border-color: var(--tc); }
.feed-media { position: relative; aspect-ratio: 16 / 9; background: var(--navy); }
.feed-media img { width: 100%; height: 100%; object-fit: cover; }
.feed-body { padding: 1.1rem 1.25rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.feed-body h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.feed-body h3 a { color: var(--ink); text-decoration: none; }
.feed-body h3 a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.feed-body h3 a:focus-visible { outline: none; }
.feed-card:focus-within { outline: 3px solid var(--mango); outline-offset: 2px; }
.feed-body p { color: var(--text-soft); font-size: 1rem; margin-bottom: .5rem; }
.feed-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; font-size: .85rem; color: var(--text-soft); margin-bottom: .5rem !important; }
.type-tag { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; color: var(--tc, var(--navy-3)); }
.type-tag .icon { width: 1.05em; height: 1.05em; }
.feed-cat { font-size: .85rem !important; }
.feed-action { margin-top: auto; font-weight: 600; color: var(--tc); }
.type-youtube { --tc: var(--yt); } .type-facebook { --tc: var(--fb); } .type-study { --tc: var(--teal); }
.type-event { --tc: var(--mango-text); } .type-announcement { --tc: var(--navy-3); } .type-testimony { --tc: var(--violet); } .type-resource { --tc: var(--blue); }
.play-badge { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(13,36,64,.8); color: #fff; }
.play-badge .icon { width: 22px; height: 22px; margin-left: 3px; }
.feed-more { margin-top: 1.5rem; }

/* Social hub */
.social-hub { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.social-tile { display: flex; align-items: center; gap: .85rem; padding: .9rem 1rem; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.social-tile .icon { width: 1.75rem; height: 1.75rem; }
.social-tile span { display: flex; flex-direction: column; line-height: 1.3; }
.social-tile span span { font-size: .88rem; color: var(--text-soft); }
.social-tile:hover { border-color: var(--navy); }
.social-facebook .icon, .social-messenger .icon { color: var(--fb); } .social-youtube .icon { color: var(--yt); }
.social-instagram .icon { color: #c13584; } .social-tiktok .icon { color: #111827; } .social-chat .icon { color: var(--teal); }
.funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-weight: 600; }
.funnel li { padding: .45rem .9rem; border-radius: 999px; background: #e7eef6; }
.funnel li.hub { background: var(--navy); color: var(--mango); }

/* Facebook embed */
.fb-embed { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.5rem; min-height: 12rem; display: grid; place-items: center; text-align: center; }

/* ---------- Flows (practical need, online bridge, core model) ---------- */
.flow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.flow li { display: flex; align-items: center; gap: .5rem; }
.flow li span { padding: .55rem 1rem; border-radius: var(--r-sm); background: var(--surface); border: 1.5px solid var(--line); font-weight: 600; }
.flow li:not(:last-child)::after { content: ""; width: 1.25rem; height: 2px; background: var(--text-soft); }
.flow li:last-child span { background: var(--navy); color: #fff; border-color: var(--navy); }

.bridge-quote { font: 700 clamp(1.8rem, 1.2rem + 3vw, 3.2rem)/1.15 var(--font-display); letter-spacing: -0.02em; max-width: 22ch; margin-bottom: 2rem; }
.bridge-quote span { display: block; color: var(--mango); }
.bridge { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; counter-reset: b; }
.bridge li { counter-increment: b; display: flex; align-items: center; gap: .9rem; padding: .75rem 1rem; border-radius: var(--r-sm);
  background: color-mix(in srgb, #3a78b8 calc(var(--i) * 11%), var(--navy-2)); color: #fff; font-weight: 600; }
.bridge li:last-child { background: var(--mango); }
.bridge li::before { content: counter(b); display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: rgba(255,255,255,.15); font: 700 .9rem var(--font-display); flex: none; }
.bridge li:last-child { color: var(--navy); }
.bridge li:last-child::before { background: rgba(13,36,64,.15); }
.bridge-caption { font-size: .9rem; margin-top: .75rem; }

.core-model { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; max-width: 22rem; }
.core-model li { display: flex; align-items: center; justify-content: center; padding: .7rem 1rem; border-radius: var(--r-sm); background: var(--navy); color: #fff; font: 600 1rem var(--font-display); position: relative; }
.core-model li:nth-child(n+5) { background: #c77d00; }
.core-model li:last-child { background: var(--mango); color: var(--navy); }

/* ---------- Multiplication diagram ---------- */
.multiply { display: grid; gap: 1.25rem; }
.m-row { display: grid; grid-template-columns: 8.5rem 1fr; align-items: center; gap: 1rem; }
.m-label { font: 600 .95rem var(--font-display); color: var(--ink); }
.m-dots { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.m-dot { width: 18px; height: 18px; border-radius: 50%; background: #9fb3c8; }
.m-dot.lead { width: 30px; height: 30px; background: var(--navy); box-shadow: 0 0 0 4px rgba(245,165,36,.5); }
.m-dot.new { background: var(--mango); box-shadow: 0 0 0 3px rgba(245,165,36,.3); }
.m-group { display: inline-flex; gap: 3px; padding: 6px; border-radius: 999px; border: 2px dashed var(--mango); }
.m-group .m-dot { width: 12px; height: 12px; }
.m-group .m-dot.new { width: 16px; height: 16px; }
.principle { font: 700 var(--step-2) var(--font-display); color: var(--navy); margin-top: 1.5rem; }

/* ---------- Academy ---------- */
.ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.rung a { display: grid; gap: .15rem; padding: 1rem 1.2rem; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; border-left: 6px solid var(--rc); }
.rung a:hover { border-color: var(--rc); }
.rung-level { font: 700 .82rem var(--font-display); color: var(--rc-text, var(--rc)); }
.rung strong { font: 600 1.15rem var(--font-display); }
.rung-goal { font-size: .95rem; color: var(--text-soft); }
.rung-bar { display: block; height: 6px; border-radius: 3px; background: #e3e9f0; margin-top: .5rem; overflow: hidden; }
.rung-bar span { display: block; height: 100%; background: var(--rc); }
.rung-count { font-size: .82rem; color: var(--text-soft); }
.rung.is-current a { box-shadow: 0 0 0 2px var(--rc); }
.rung-1 { --rc: #5b7ea3; } .rung-2 { --rc: var(--blue); } .rung-3 { --rc: var(--teal); }
.rung-4 { --rc: #c77d00; --rc-text: var(--mango-text); } .rung-5 { --rc: var(--mango); --rc-text: var(--mango-text); }
.section--navy .rung a { background: var(--navy-2); border-color: rgba(255,255,255,.12); border-left-color: var(--rc); color: #fff; }
.section--navy .rung-goal, .section--navy .rung-count { color: #c9d6e6; }
.section--navy .rung-level { color: var(--rc); }
.section--navy .rung-bar { background: rgba(255,255,255,.15); }

.level-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.25rem, 3vw, 1.75rem); margin-bottom: 1.25rem; }
.level-head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.level-num { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--r-sm); background: var(--navy); color: var(--mango); font: 700 1.4rem var(--font-display); }
.level-head h3 { margin-bottom: .15rem; }
.level-head p { color: var(--text-soft); margin: 0; }
.course-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.course { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 1rem; border-radius: var(--r-sm); background: var(--bg); }
.course h4 { margin: 0 0 .1rem; }
.course h4 a { color: var(--ink); }
.course p { margin: 0; font-size: .9rem; color: var(--text-soft); }
.course.is-done { background: #e3f4f2; }
#practicum.level-block { border: 2px solid var(--mango); }

.cert-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.cert { display: flex; gap: 1rem; padding: 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.cert-seal { flex: none; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--mango-soft); color: var(--mango-text); border: 2px solid var(--mango); }
.cert h3 { font-size: 1.1rem; margin-bottom: .1rem; }
.cert-after { font-size: .85rem; font-weight: 600; color: var(--mango-text); margin-bottom: .3rem; }
.cert p { color: var(--text-soft); font-size: .98rem; margin-bottom: 0; }
.notice { background: var(--mango-soft); border-left: 4px solid var(--mango); padding: 1rem 1.25rem; border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--ink); }
.rec-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.rec-steps li { display: flex; align-items: center; gap: .5rem; padding: .5rem .9rem .5rem .5rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 600; }
.rec-num { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--navy); color: #fff; font-size: .85rem; }
.rec-steps li:last-child { background: var(--mango); border-color: var(--mango); }

/* ---------- Events ---------- */
.event-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.event-card { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.25rem; }
.event-date { display: flex; flex-direction: column; align-items: center; background: var(--navy); color: #fff; border-radius: var(--r-sm); padding: .6rem .2rem; align-self: start; text-align: center; }
.event-date .m { font-size: .8rem; font-weight: 600; color: var(--mango); }
.event-date .d { font: 700 1.8rem/1 var(--font-display); }
.event-date .w { font-size: .78rem; color: #c9d6e6; }
.event-body h3 { font-size: var(--step-1); }
.event-body > p { color: var(--text-soft); }
.event-facts { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .25rem; color: var(--text-soft); font-size: .95rem; }
.event-facts li { display: flex; gap: .5rem; align-items: flex-start; }
.event-facts .icon { margin-top: .2em; width: 1.1em; }
.event-card.is-past { opacity: .75; }
.past-events { margin-top: 2.5rem; }
.past-events summary { cursor: pointer; font: 600 var(--step-1) var(--font-display); padding: .5rem 0; }
.mini-events { list-style: none; margin: 0; padding: 0; }
.mini-events a { display: grid; grid-template-columns: 4.5rem 1fr; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.mini-events time { font-weight: 700; color: var(--mango-text); }
.mini-events a:hover span { text-decoration: underline; }

/* ---------- Media ---------- */
.video-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.video-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; }
.video-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--navy); }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-body { padding: 1rem 1.2rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.video-body h3 { font-size: 1.1rem; }
.video-body p:not(.feed-meta) { color: var(--text-soft); font-size: 1rem; }
.video-body .btn { align-self: flex-start; margin-top: auto; }
.video-card .type-tag { --tc: var(--yt); }

/* ---------- Korea ---------- */
.expressions { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--r-md); overflow: hidden; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.expressions th, .expressions td { text-align: left; padding: .75rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.expressions th { background: var(--navy); color: #fff; font: 600 .9rem var(--font-body); }
.expressions .ko { font-family: "Noto Sans KR", var(--font-body); font-size: 1.15rem; font-weight: 500; white-space: nowrap; }
.expressions .rom { color: var(--text-soft); font-style: italic; }
.help-numbers { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.help-numbers a { display: flex; align-items: baseline; gap: .9rem; padding: .7rem 1rem; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.help-numbers strong { font: 700 1.25rem var(--font-display); color: var(--red); min-width: 5.5rem; }
.korea-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.korea-cats a { display: inline-block; padding: .5rem 1rem; border-radius: 999px; background: #e3f2f0; color: #0b5a55; font-weight: 600; text-decoration: none; }
.korea-cats a:hover { background: var(--teal); color: #fff; }

/* Downloads */
.download-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.download-card { display: flex; gap: .9rem; align-items: center; padding: 1rem 1.2rem; border-radius: var(--r-md); background: var(--surface); border: 1.5px dashed var(--navy-3); color: var(--ink); text-decoration: none; }
.download-card .icon { width: 1.6rem; height: 1.6rem; color: var(--navy-3); }
.download-card span { display: flex; flex-direction: column; }
.download-card span span { color: var(--text-soft); font-size: .92rem; }
.download-card:hover { border-style: solid; }

/* Contact questions */
.ask-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ask-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem; border-top: 6px solid var(--area); }
.ask-card h2 { font-size: var(--step-2); }
.ask-card p { color: var(--text-soft); }

/* Future feature list */
.future-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.future-list li { padding: .8rem 1rem; border-radius: var(--r-sm); border: 1.5px dashed #aab8c8; background: var(--surface); }
.future-list strong { display: block; }
.future-list span { color: var(--text-soft); font-size: .95rem; }
.future-tag { display: inline-block; margin-left: .5rem; font-size: .75rem; font-weight: 600; color: #54657a; background: #eef1f5; padding: .1rem .5rem; border-radius: 999px; }
.arch { font-family: var(--font-body); background: var(--navy); color: #d3deea; border-radius: var(--r-md); padding: 1.25rem; overflow-x: auto; font-size: .9rem; line-height: 1.5; }

/* ---------- Next step band ---------- */
.next-step { background: var(--navy); color: #fff; padding-block: clamp(2.5rem, 6vw, 3.5rem); border-top: 6px solid var(--mango); }
.next-inner { display: grid; gap: 1.25rem; align-items: center; }
.next-step h2 { font-size: var(--step-2); margin-bottom: .3rem; }
.next-step p { color: #c9d6e6; margin: 0; }

/* ---------- Dialogs ---------- */
dialog { border: 0; padding: 0; color: var(--ink); }
dialog::backdrop { background: rgba(6, 18, 34, .7); }
.content-dialog { width: min(100% - 1.5rem, 40rem); max-height: 88vh; border-radius: var(--r-lg); background: var(--surface); padding: clamp(1.25rem, 4vw, 2rem); overflow-y: auto; }
.content-dialog[open] { animation: pop .2s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(10px); } }
.dialog-close { position: absolute; top: .5rem; right: .5rem; }
.content-dialog h2 { padding-right: 2.5rem; font-size: var(--step-2); }
.content-dialog h3 { font-size: 1.05rem; margin-top: 1.25rem; }
.dialog-kicker { margin-bottom: .5rem; min-height: 1px; }
.read-list { padding-left: 1.1rem; }
.content-dialog .btn-row { margin-top: 1.5rem; }
.video-dialog { width: min(100% - 1rem, 60rem); background: #061222; color: #fff; border-radius: var(--r-md); overflow: hidden; }
.dialog-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem .5rem .5rem 1.2rem; }
.dialog-bar h2 { font: 600 1.05rem var(--font-body); margin: 0; }
.dialog-bar .icon-btn:hover { background: rgba(255,255,255,.12); }
.video-frame { aspect-ratio: 16 / 9; background: #000; }
.video-frame iframe { width: 100%; height: 100%; border: 0; }
.video-external { display: inline-block; padding: .85rem 1.2rem; color: var(--mango); }

/* ---------- AI assistant ---------- */
.ai-fab { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 90;
  display: inline-flex; align-items: center; gap: .5rem; min-height: 54px; padding: 0 1.2rem 0 1rem; border-radius: 999px; border: 0;
  background: var(--mango); color: var(--navy); font: 700 1rem var(--font-display); cursor: pointer; box-shadow: 0 6px 20px rgba(13,36,64,.3); }
.ai-fab:hover { background: #ffbc4a; }
.ai-fab .icon { width: 1.4rem; height: 1.4rem; }
.ai-panel { position: fixed; z-index: 95; inset: 0; background: var(--surface); display: flex; flex-direction: column; }
.chat-open .ai-fab { display: none; }
.chat-shell { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; height: min(78vh, 44rem); overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; background: var(--navy); color: #fff; }
.chat-head h2 { font-size: 1.05rem; margin: 0; }
.chat-head p { margin: 0; font-size: .82rem; color: #c9d6e6; }
.chat-head .chat-close { margin-left: auto; color: #fff; }
.chat-head .chat-close:hover { background: rgba(255,255,255,.12); }
.chat-avatar { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--mango); color: var(--navy); flex: none; }
.chat-log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; background: var(--bg); }
.msg { max-width: 88%; padding: .75rem 1rem; border-radius: 16px; font-size: .98rem; line-height: 1.55; }
.msg p { margin: 0 0 .5rem; }
.msg p:last-child { margin-bottom: 0; }
.msg-user { align-self: flex-end; background: var(--navy); color: #fff; border-bottom-right-radius: 4px; }
.msg-ai { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg-ai .btn { margin-top: .6rem; }
.msg-refs { display: flex; gap: .4rem; font-size: .9rem; }
.msg-refs .icon { width: 1em; margin-top: .25em; color: var(--navy-3); }
.msg-sources { margin-top: .6rem; padding-top: .5rem; border-top: 1px solid var(--line); font-size: .88rem; }
.msg-sources p { font-weight: 600; margin-bottom: .2rem !important; }
.msg-sources ul { margin: 0; padding-left: 1.1rem; }
.msg-note { font-size: .8rem; color: var(--text-soft); margin-top: .5rem !important; }
.msg-numbers { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .3rem; }
.msg-numbers a { color: var(--ink); }
.msg-numbers strong { color: var(--red); margin-right: .35rem; }
.msg-typing { display: flex; gap: 4px; padding: .9rem 1rem; }
.msg-typing span:not(.sr-only) { width: 7px; height: 7px; border-radius: 50%; background: #9fb3c8; animation: blink 1s infinite; }
.msg-typing span:nth-child(2) { animation-delay: .15s; } .msg-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 50% { opacity: .3; } }
.chat-suggest { display: flex; gap: .4rem; overflow-x: auto; padding: .6rem 1rem; border-top: 1px solid var(--line); scrollbar-width: thin; }
.chat-suggest .chip { flex: none; }
.chat-form { display: flex; gap: .5rem; padding: .6rem 1rem; border-top: 1px solid var(--line); align-items: flex-end; }
.chat-form textarea { padding: .7rem .9rem; resize: none; min-height: 46px; max-height: 140px; line-height: 1.4; }
.send-btn { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--navy); color: #fff; display: grid; place-items: center; cursor: pointer; }
.send-btn:disabled { opacity: .5; }
.chat-foot { padding: .6rem 1rem .9rem; font-size: .78rem; color: var(--text-soft); display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; }
.chat-foot p { margin: 0; flex: 1 1 14rem; }
.ai-teaser { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.25rem; display: grid; gap: .75rem; }
.ai-teaser .msg { max-width: 100%; }

.rag-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; counter-reset: r; }
.rag-flow li { counter-increment: r; display: grid; grid-template-columns: 2rem 1fr; gap: .75rem; align-items: start; padding: .75rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); }
.rag-flow li::before { content: counter(r); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--navy); color: #fff; font: 700 .9rem var(--font-display); }
.rag-flow li.mentor { border: 2px solid var(--mango); }
.kb-tree { background: var(--navy); color: #d3deea; padding: 1rem 1.25rem; border-radius: var(--r-md); font-size: .92rem; line-height: 1.7; overflow-x: auto; white-space: pre; }

/* ---------- Refinements ---------- */
.station { align-content: start; }
.area-mango .area-go { color: var(--mango-text); }
.line-mango .line-badge { color: var(--navy); }
.section--navy .rung-level { color: #fff; opacity: .85; }
.refs { flex-wrap: nowrap !important; align-items: flex-start; }
.refs .icon { margin-top: .2em; }
.refs > span { display: inline; }
.ai-panel { z-index: 150; padding-top: env(safe-area-inset-top); }
.pathway-head .line-badge { justify-self: start; }
.msg-h { font-size: 1rem; margin: .9rem 0 .3rem; }
.msg-h:first-child { margin-top: 0; }
.msg ul, .msg ol { margin: .2rem 0 .6rem; padding-left: 1.2rem; }
.msg blockquote { margin: .4rem 0 .6rem; padding-left: .75rem; border-left: 3px solid var(--mango); color: var(--text-soft); }

/* ==========================================================================
   Learning hub (contents, Bible Journey, Live in Korea, certificates)
   ========================================================================== */
.crumbs { margin-bottom: 1rem; font-size: .92rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem; color: #b9c9dc; }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: .5rem; color: #6f86a1; }
.crumbs a { color: #fff; }
.crumbs [aria-current] { color: #d3deea; }

/* Level badges */
.level { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; line-height: 1.6; }
.level-beginner { background: #e3f4f2; color: #0b5a55; }
.level-intermediate { background: #e4edfb; color: #1c4f9f; }
.level-advanced { background: var(--mango-soft); color: var(--mango-text); }
.mini-progress { display: block; height: 6px; border-radius: 3px; background: #e3e9f0; overflow: hidden; }
.mini-progress span { display: block; height: 100%; background: var(--mango); border-radius: inherit; }

/* Three big category cards */
.cat-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.cat-card a { display: flex; flex-direction: column; gap: .5rem; height: 100%; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); border-top: 8px solid var(--cc); color: var(--ink); text-decoration: none; }
.cat-card a:hover { border-color: var(--cc); }
.cat-card h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: 700; margin: .25rem 0 0; }
.cat-icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: color-mix(in srgb, var(--cc) 12%, white); color: var(--cc); }
.cat-icon .icon { width: 1.6rem; height: 1.6rem; }
.cat-tagline { font: 600 1.1rem/1.35 var(--font-display); color: var(--cc-text, var(--cc)); margin: 0; }
.cat-text { color: var(--text-soft); flex: 1; margin: 0 0 .5rem; }
.cat-meta { font-size: .88rem; color: var(--text-soft); }
.cat-go { align-self: flex-start; margin-top: .5rem; }
.cat-red { --cc: var(--red); } .cat-teal { --cc: var(--teal); } .cat-mango { --cc: #d98a06; --cc-text: var(--mango-text); }
.section--navy .cat-card a { border-color: transparent; border-top-color: var(--cc); }

/* Learning resource cards */
.learn-card, .course-card, .program-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.25rem; display: flex; flex-direction: column; gap: .35rem; }
.learn-card h3, .learn-card h4, .course-card h3 { margin: 0; font-size: 1.1rem; }
.learn-card p, .course-card p, .program-card p { color: var(--text-soft); font-size: .98rem; margin: 0 0 .35rem; }
.learn-card > .btn, .course-card > .btn { align-self: flex-start; margin-top: auto; }
.learn-card.is-done { border-color: #9fd2cc; }
.learn-meta { display: flex; flex-wrap: wrap; gap: .3rem .75rem; align-items: center; font-size: .82rem !important; font-weight: 600; color: var(--text-soft); margin: 0 !important; }
.learn-prog { color: var(--pc, var(--navy-3)); }
.prog-gospel { --pc: var(--red); } .prog-discipleship { --pc: var(--blue); } .prog-mind { --pc: var(--violet); } .prog-leadership { --pc: var(--mango-text); }
.learn-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; font-size: .85rem !important; margin-top: auto !important; padding-top: .25rem; }
.learn-time { display: inline-flex; align-items: center; gap: .3rem; color: var(--text-soft); }
.learn-done { display: inline-flex; align-items: center; gap: .25rem; color: var(--teal); font-weight: 600; }
.course-cat { color: var(--navy-3); }
.course-cat.on-dark { color: var(--mango); }
.course-status { font-size: .85rem !important; margin-top: .2rem !important; }
.course-card .progress { margin-top: .4rem; }
.course-card.is-planned { background: transparent; border-style: dashed; }
.course-card.is-planned h3 { color: var(--text-soft); }
.course-card.is-complete { border-color: var(--teal); }
.program-card { border-top: 6px solid var(--pcc); padding: 1.5rem; gap: .5rem; }
.program-card h3 { font-size: var(--step-2); margin: 0; }
.program-step { font: 700 .85rem var(--font-display); color: var(--pcc); }
.prog-card-red { --pcc: var(--red); } .prog-card-blue { --pcc: var(--blue); } .prog-card-violet { --pcc: var(--violet); }
.program-card .progress-fill { background: var(--pcc); }
.program-card .btn-row { margin-top: .5rem; }
.filter-bar { display: grid; gap: .75rem; margin-bottom: 1.5rem; }
.filter-bar .chips { margin: 0; }
.filter-bar .search-bar { margin: 0; }

/* Live in Korea */
.area-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.area-tile a { display: flex; flex-direction: column; gap: .35rem; height: 100%; padding: 1.25rem; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.area-tile a:hover { border-color: var(--teal); }
.area-tile h3 { margin: .25rem 0 0; font-size: 1.15rem; }
.area-tile p { color: var(--text-soft); font-size: .95rem; margin: 0; flex: 1; }
.area-tile .area-icon { background: #e3f4f2; color: var(--teal); margin: 0; }
.guide-group { margin-bottom: 2.5rem; scroll-margin-top: calc(var(--header-h) + 1rem); }
.guide-group > h3 { display: flex; align-items: center; gap: .5rem; font-size: var(--step-2); padding-bottom: .5rem; border-bottom: 3px solid var(--teal); margin-bottom: 1rem; }
.guide-group > h3 .icon { color: var(--teal); }
.guide-group .notice { margin-bottom: 1rem; }
.guide-card .tips { color: var(--ink); }
.guide-actions { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; margin-top: .25rem; }
.qa-list { display: grid; gap: .5rem; }
.qa-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); }
.qa-item summary { cursor: pointer; padding: .9rem 1rem; font-weight: 600; display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; }
.qa-item p { padding: 0 1rem 1rem; margin: 0; color: var(--text-soft); }
.qa-cat { font-size: .78rem; font-weight: 600; color: var(--teal); background: #e3f4f2; padding: .05rem .5rem; border-radius: 999px; }
.qa-ask { background: var(--navy); color: #fff; border-radius: var(--r-lg); padding: 1.5rem; margin-top: 1.5rem; }
.qa-ask p { color: #c9d6e6; }

/* Contents hub */
.cont-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.cont-list a { display: grid; gap: .2rem; padding: .9rem 1.1rem; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.cont-list a:hover { border-color: var(--navy); }
.cont-kind { font-size: .8rem; font-weight: 600; color: var(--navy-3); }
.cont-meta { font-size: .9rem; color: var(--text-soft); }
.fit-grid { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .75rem; }
.fit-grid li { padding: 1rem 1.1rem; border-radius: var(--r-md); background: var(--navy-2); color: #fff; }
.fit-grid strong { display: block; color: var(--mango); font-family: var(--font-display); }
.fit-grid span { color: #c9d6e6; font-size: .95rem; }

/* Course player */
.course-facts { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; color: #d3deea; margin: 1rem 0; font-size: .95rem; }
.course-facts span { display: inline-flex; align-items: center; gap: .3rem; }
.course-progress-box { max-width: 30rem; }
.course-progress-box .progress { background: rgba(255,255,255,.18); }
.course-progress-box .progress-text { color: #d3deea; }
.course-layout { display: grid; gap: 2rem; }
.module { margin-bottom: 1.75rem; }
.module h3 { font-size: 1.2rem; }
.module-num { display: block; font: 700 .8rem var(--font-display); color: var(--text-soft); }
.lesson-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: .5rem; }
.lesson-item summary { cursor: pointer; display: grid; grid-template-columns: 2.25rem 1fr auto auto; gap: .75rem; align-items: center; padding: .8rem 1rem; list-style: none; }
.lesson-item summary::-webkit-details-marker { display: none; }
.li-num { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--bg); border: 2px solid var(--line); font: 700 .9rem var(--font-display); }
.li-title { font-weight: 600; }
.li-time { font-size: .85rem; color: var(--text-soft); }
.li-state { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2px solid var(--line); color: transparent; }
.li-state .icon { width: 1rem; height: 1rem; }
.lesson-item.is-done .li-state { background: var(--teal); border-color: var(--teal); color: #fff; }
.lesson-item.is-done .li-num { border-color: var(--teal); color: var(--teal); }
.lesson-item[open] { border-color: var(--navy-3); }
.lesson-content { padding: 0 1.25rem 1.25rem 4.25rem; }
.lesson-content p { max-width: 42rem; }
.lesson-content h4 { margin-top: 1rem; }
.lesson-content .btn { margin-top: .75rem; }
.quiz-block, .cert-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.25rem, 3vw, 2rem); margin-top: 2rem; }
.quiz-q { border: 1px solid var(--line); border-radius: var(--r-md); padding: 1rem 1.1rem; margin: 0 0 1rem; }
.quiz-q legend { font-weight: 600; padding: 0 .35rem; }
.quiz-n { color: var(--text-soft); }
.quiz-opt { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .6rem; border-radius: var(--r-sm); cursor: pointer; }
.quiz-opt:hover { background: var(--bg); }
.quiz-opt input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--navy); }
.quiz-q.is-right { border-color: var(--teal); background: #f1faf9; }
.quiz-q.is-wrong { border-color: var(--red); background: #fdf3f4; }
.quiz-feedback { margin: .5rem 0 0; font-size: .95rem; }
.quiz-error { color: var(--red); font-weight: 600; }
.quiz-result { margin-top: 1rem; font-size: 1.05rem; }
.side-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.25rem; margin-bottom: 1rem; }
.side-box h2 { font-size: 1.1rem; }
.check-list { margin: 0; padding-left: 1.1rem; }
.check-list li { margin-bottom: .35rem; }
.req-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.req-list li { display: flex; gap: .5rem; align-items: flex-start; color: var(--text-soft); }
.req-list .icon { flex: none; width: 1.3rem; height: 1.3rem; padding: 2px; border-radius: 50%; border: 2px solid var(--line); color: transparent; }
.req-list li.met { color: var(--ink); }
.req-list li.met .icon { background: var(--teal); border-color: var(--teal); color: #fff; }
.cert-locked { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.25rem; border: 2px dashed var(--line); border-radius: var(--r-md); color: var(--text-soft); }
.cert-locked > .icon { width: 2rem; height: 2rem; flex: none; }
.cert-locked p { margin: 0 0 .25rem; }
.cert-form label { display: block; font-weight: 600; margin-bottom: .35rem; }
.cert-form-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem; }
.cert-form-row input { flex: 1 1 14rem; padding-left: .9rem; }
.cert-actions { margin: 1rem 0; }

/* The certificate itself */
.certificate { position: relative; max-width: 48rem; margin: 0 auto; padding: clamp(1.5rem, 5vw, 3rem); text-align: center; background: #fff; color: var(--navy);
  border: 3px solid var(--navy); outline: 2px solid var(--mango); outline-offset: -12px; border-radius: 6px; }
.cert-top { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.cert-org { font: 600 1rem var(--font-display); margin: 0; }
.cert-label { font: 700 clamp(1.4rem, 1rem + 2vw, 2.2rem) var(--font-display); margin: 1rem 0 .75rem; letter-spacing: -0.01em; }
.cert-small { margin: .25rem 0; color: #4b5b70; }
.cert-name { font: 700 clamp(1.6rem, 1.1rem + 2.4vw, 2.6rem) var(--font-display); margin: .25rem auto .5rem; padding-bottom: .35rem; border-bottom: 2px solid var(--mango); display: inline-block; min-width: 60%; }
.cert-course { font: 600 clamp(1.2rem, 1rem + 1vw, 1.6rem) var(--font-display); margin: .25rem 0; }
.cert-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.75rem; font-size: .85rem; }
.cert-foot span { display: block; color: #4b5b70; }
.cert-foot strong { font-size: .9rem; overflow-wrap: anywhere; }
.cert-foot div:last-child strong { font-size: .8rem; white-space: nowrap; letter-spacing: .01em; }
.cert-disclaimer { margin: 1.5rem 0 0; font-size: .78rem; color: #4b5b70; }
.history { width: 100%; border-collapse: collapse; background: var(--surface); }
.history th, .history td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
.history th { background: var(--navy); color: #fff; font-size: .9rem; }
.steps-3 { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; counter-reset: s; }
.steps-3 li { counter-increment: s; display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.steps-3 li::before { content: counter(s); flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--navy); color: #fff; font: 700 1rem var(--font-display); }
.steps-3 strong { display: block; }
.steps-3 span { color: var(--text-soft); font-size: .95rem; }
.quick-nav a[aria-current="true"] { color: var(--mango); }

@media print {
  body.printing-cert > *:not(#print-area) { display: none !important; }
  body.printing-cert #print-area { display: block !important; }
  body.printing-cert { background: #fff; }
  #print-area .certificate { max-width: none; margin: 0; }
  @page { size: landscape; margin: 12mm; }
}
#print-area { display: none; }
.cont-list .empty a { display: inline; padding: 0; border: 0; background: none; color: var(--blue); }
.section--navy .station-body p { color: #c9d6e6; }
.btn[aria-disabled="true"] { cursor: default; opacity: .7; border-style: dashed; }

/* ---------- Section photos ---------- */
.page-hero-grid { display: grid; gap: 1.75rem; align-items: center; }
.page-photo { margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3 / 2; background: var(--navy-2); box-shadow: 0 12px 32px rgba(0,0,0,.25); }
.page-photo img { width: 100%; height: 100%; object-fit: cover; }
.card-photo { display: block; margin: calc(-1 * clamp(1.5rem, 3vw, 2.25rem)) calc(-1 * clamp(1.5rem, 3vw, 2.25rem)) .75rem; aspect-ratio: 3 / 2; overflow: hidden; background: var(--navy-2); }
.card-photo img { width: 100%; height: 100%; object-fit: cover; }
.cat-card a { overflow: hidden; }
.program-card { overflow: hidden; }
.program-card .card-photo { margin: -1.5rem -1.5rem .75rem; }
.cat-card .card-photo + .cat-icon { margin-top: -2.75rem; position: relative; border: 4px solid var(--surface); background: var(--surface); }

/* ==========================================================================
   News article (news.html) and News Admin (admin.html)
   ========================================================================== */
.article-wrap:empty, .article-wrap[hidden] { display: none; }
.article { max-width: 46rem; }
.article h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.8rem); font-weight: 700; margin: .5rem 0 .75rem; }
.article-lede { font-size: var(--step-1); color: var(--text-soft); line-height: 1.5; }
.article-image { margin: 1.5rem 0; border-radius: var(--r-lg); overflow: hidden; background: var(--bg); }
.article-image img { width: 100%; max-height: 32rem; object-fit: cover; }
.article-body { font-size: 1.08rem; line-height: 1.75; }
.article-body p { margin-bottom: 1.1em; }
.article-body ul { margin: 0 0 1.1em; }
.article-actions { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.article-missing { text-align: left; max-width: 40rem; }
.crumb-bar { padding-block: 1.25rem .25rem; }

.admin-hero { padding-bottom: 2rem; }
.admin-section { padding-top: 2rem; }
.admin-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.25rem, 3vw, 2rem); }
.admin-signin, .admin-done { max-width: 40rem; }
.admin-signin .btn .icon { width: 1.3em; height: 1.3em; }
.admin-bar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.admin-user { display: flex; align-items: center; gap: .6rem; margin: 0; color: var(--text-soft); }
.admin-user img { border-radius: 50%; }
.admin-grid { display: grid; gap: 1.5rem; align-items: start; }
.admin-preview { background: var(--surface); border: 1px dashed #aab8c8; border-radius: var(--r-lg); padding: 1.25rem; }
.admin-preview h2 { font-size: 1.15rem; margin-bottom: .2rem; }
.admin-preview h3 { font-size: 1rem; margin-top: 1.5rem; }
.admin-preview .feed-grid { grid-template-columns: 1fr !important; margin-top: .75rem; }
.admin-preview .feed-card.is-featured { flex-direction: column !important; }
.preview-article { font-size: .98rem; max-height: 22rem; overflow-y: auto; padding-right: .5rem; }
.admin-form { display: grid; gap: 1.1rem; margin-top: 1rem; }
.field { display: grid; gap: .35rem; }
.field > label { font-weight: 600; }
.req, .opt { font-weight: 400; font-size: .85rem; color: var(--text-soft); }
.field-hint { margin: 0; font-size: .88rem; color: var(--text-soft); }
.field-error { margin: 0; font-size: .9rem; font-weight: 600; color: var(--red); }
.field-row { display: grid; gap: 1.1rem; }
.admin-form input[type="text"], .admin-form input[type="url"], .admin-form input[type="date"], .admin-form select, .admin-form textarea {
  width: 100%; min-height: 48px; padding: .65rem .9rem; border-radius: var(--r-sm); border: 1.5px solid var(--line);
  background: var(--surface); color: var(--ink); font: 1rem/1.5 var(--font-body); }
.admin-form textarea { resize: vertical; }
.admin-form select { appearance: auto; }
.admin-form [aria-invalid="true"] { border-color: var(--red); background: #fdf6f7; }
.admin-form :focus-visible { outline: 3px solid var(--mango); outline-offset: 0; border-color: var(--navy); }
.counter { margin: 0; font-size: .82rem; color: var(--text-soft); text-align: right; }
.field-check label { display: flex; gap: .6rem; align-items: center; font-weight: 500; cursor: pointer; }
.field-check input { width: 1.2rem; height: 1.2rem; accent-color: var(--navy); }
.admin-actions { padding-top: .5rem; border-top: 1px solid var(--line); }
.admin-notice { padding: .85rem 1rem; border-radius: var(--r-sm); border-left: 4px solid; }
.notice-error { background: #fdf3f4; border-color: var(--red); color: #7d1d27; }
.notice-info { background: #eef4fb; border-color: var(--blue); color: var(--ink); }
.admin-done h2 { color: var(--teal); }
.done-check { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--teal); color: #fff; font-size: 1.2rem; margin-right: .35rem; }
code { background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: .05rem .35rem; font-size: .9em; }

/* Article: highlighted Scripture, byline, facts, uncropped images */
.scripture-quote { margin: 1.75rem 0; padding: 1.5rem 1.75rem; border-left: 6px solid var(--mango); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--navy); color: #fff; }
.scripture-quote p { margin: 0; font: 500 clamp(1.2rem, 1rem + .8vw, 1.45rem)/1.55 var(--font-display); letter-spacing: -0.005em; }
.article-byline { margin: -.25rem 0 0; color: var(--text-soft); }
.article-image img { max-height: 40rem; height: auto; object-fit: contain; background: var(--surface); }
.article-image { border: 1px solid var(--line); }
.article-facts { display: flex; flex-wrap: wrap; gap: .75rem 2.5rem; margin: 1.5rem 0 0; padding: 1rem 1.25rem; background: var(--bg); border-radius: var(--r-md); }
.article-facts dt { font-size: .8rem; font-weight: 600; color: var(--text-soft); }
.article-facts dd { margin: 0; font-weight: 600; }
.rec-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .6rem; border-radius: 999px; background: var(--mango-soft); color: var(--mango-text); font-size: .78rem; font-weight: 600; }
.guide-card.is-recommended { border-color: #f0c77a; }
.guide-card .tips li { margin-bottom: .2rem; }
.file-warning { margin: 0; padding: .75rem 1rem; background: var(--mango-soft); color: var(--ink); text-align: center; font-weight: 600; }

/* ---------- Mentors page ---------- */
.mentor-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.mentor-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.25rem, 3vw, 1.75rem); display: flex; flex-direction: column; gap: .9rem; scroll-margin-top: calc(var(--header-h) + 1rem); }
.mentor-card:target { border-color: var(--mango); box-shadow: 0 0 0 2px var(--mango); }
.mentor-top { display: flex; gap: 1rem; align-items: center; }
.mentor-photo { flex: none; width: 88px; height: 88px; border-radius: 50%; object-fit: cover; background: var(--bg); border: 3px solid var(--mango-soft); }
.mentor-initials { display: grid; place-items: center; background: var(--navy); color: var(--mango); font: 700 1.8rem var(--font-display); border-color: var(--navy-2); }
.mentor-name { font-size: 1.35rem; margin: 0; }
.mentor-role { margin: .1rem 0 0; font-weight: 600; color: var(--navy-3); }
.mentor-langs { margin: .25rem 0 0; display: flex; align-items: center; gap: .35rem; font-size: .92rem; color: var(--text-soft); }
.mentor-areas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.mentor-areas li { padding: .15rem .65rem; border-radius: 999px; background: #e4edfb; color: #1c4f9f; font-size: .82rem; font-weight: 600; }
.mentor-bio { color: var(--ink); font-size: 1rem; }
.mentor-bio p { margin: 0 0 .6rem; }
.mentor-creds { background: var(--bg); border-radius: var(--r-md); padding: .9rem 1rem; }
.mentor-creds h3 { font-size: .9rem; margin: 0 0 .4rem; color: var(--text-soft); }
.mentor-creds ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.mentor-creds li { display: flex; gap: .5rem; align-items: flex-start; font-size: .96rem; }
.mentor-creds .icon { color: var(--teal); margin-top: .25em; }
.mentor-avail { display: flex; gap: .4rem; align-items: center; margin: 0; color: var(--text-soft); font-size: .95rem; }
.mentor-contact { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .5rem; border-top: 1px solid var(--line); }
.mentor-contact .muted { margin: 0; font-size: .95rem; }
.contact-btn { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .5rem 1rem; border-radius: 999px; font: 600 .95rem var(--font-body); text-decoration: none; }
.contact-btn .icon { width: 1.2em; height: 1.2em; }
.contact-kakao { background: #fee500; color: #191919; }
.contact-messenger { background: #0866ff; color: #fff; }
.contact-email { background: #c5221f; color: #fff; }
.contact-facebook { background: var(--surface); color: var(--fb); border: 1.5px solid var(--line); }
a.contact-btn:hover { filter: brightness(.95); text-decoration: underline; }
.mentors-intro:empty { display: none; }
.mentors-intro { max-width: 44rem; margin-bottom: 1.25rem; }

/* ---------- Bible Journey: Mind Education band and program courses ---------- */
.mind-band { background: linear-gradient(135deg, #2b1f57 0%, var(--navy) 70%); }
.mind-grid { display: grid; gap: 2rem; align-items: center; }
.mind-kicker { font: 700 .85rem var(--font-display); color: #c7b6ff !important; margin-bottom: .35rem; }
.mind-lede { font-size: var(--step-1); line-height: 1.5; color: #dcd5f2 !important; }
.mind-stats { max-width: 26rem; margin: 1.25rem 0; }
.mind-stats .progress { background: rgba(255,255,255,.18); }
.mind-stats .progress-fill { background: #b49cff; }
.mind-stats .course-status { color: #dcd5f2 !important; }
.learn-foot.on-dark .learn-time { color: #dcd5f2; }
.mind-topics { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.mind-topics a { display: inline-block; padding: .4rem .85rem; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; text-decoration: none; font-size: .92rem; }
.mind-topics a:hover { background: rgba(255,255,255,.18); }
.mind-band .program-courses { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); }
.mind-band .program-courses a, .mind-band .pc-name { color: #fff; }
.mind-band .program-courses-title, .mind-band .pc-state { color: #dcd5f2; }
.program-courses { margin: .5rem 0; padding: .75rem .9rem; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line); }
.program-courses-title { font-size: .8rem !important; font-weight: 700; color: var(--text-soft); margin: 0 0 .35rem !important; }
.program-courses ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.program-courses li { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; font-size: .95rem; }
.pc-state { font-size: .8rem; color: var(--text-soft); white-space: nowrap; }
.pc-state.is-done { color: var(--teal); font-weight: 600; }
.pc-name { color: var(--text-soft); }
.mentor-channels { grid-template-columns: 1fr !important; }

/* ---------- Lectures ---------- */
.lec-intro { max-width: 44rem; margin-bottom: 1.5rem; }
.lec-cat-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.lec-cat a { display: flex; flex-direction: column; height: 100%; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.lec-cat a:hover { border-color: var(--navy); }
.lec-cat-img { display: block; aspect-ratio: 16 / 9; background: var(--navy-2); }
.lec-cat-img img { width: 100%; height: 100%; object-fit: cover; }
.lec-cat-body { display: flex; flex-direction: column; gap: .4rem; padding: 1.25rem 1.35rem 1.4rem; flex: 1; }
.lec-cat-body h3 { margin: 0; font-size: 1.3rem; }
.lec-cat-body p { margin: 0; color: var(--text-soft); flex: 1; }
.lec-count { font-size: .9rem; font-weight: 600; color: var(--navy-3); margin: .25rem 0 0; }
.lec-types { display: flex; flex-wrap: wrap; gap: .35rem; }
.lec-type { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: #eef2f6; color: var(--navy-3); }
.lec-type.type-video { background: #fde9e8; color: #a3221d; }
.lec-type.type-article { background: #e3f4f2; color: #0b5a55; }
.lec-type.type-slides { background: var(--mango-soft); color: var(--mango-text); }
.lec-type.type-pdf { background: #fdecef; color: #9b1c2e; }
.lec-type.type-audio { background: #efeafc; color: #4b3596; }
.lec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.lec-card a { display: grid; gap: .3rem; padding: 1.1rem 1.25rem; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.lec-card a:hover { border-color: var(--navy); }
.lec-card .lec-type { justify-self: start; }
.lec-card h3 { margin: .15rem 0 0; font-size: 1.12rem; }
.lec-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; font-size: .88rem; color: var(--text-soft); }
.lec-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.lec-summary { margin: .2rem 0 0; color: var(--text-soft); font-size: .98rem; }
.lec-open { font-weight: 600; color: var(--blue); font-size: .92rem; }
.lec-profile { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; margin-bottom: 1.75rem; }
.lec-profile-img { width: 11rem; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-md); }
.lec-profile h2 { font-size: var(--step-2); margin-bottom: .25rem; }
.lec-filters { margin-bottom: 1rem; }
.lecture .feed-meta a { color: var(--navy-3); }
.lec-video { aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: #000; margin: 1.25rem 0; }
.lec-video iframe { width: 100%; height: 100%; border: 0; }
.lec-audio { width: 100%; margin: 1rem 0; }
.lec-pdf { height: 70vh; min-height: 24rem; margin: 1.25rem 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.lec-pdf iframe { width: 100%; height: 100%; border: 0; }
.lec-files { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .5rem; }
.lec-file { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); }
.lec-file-kind { font-size: .78rem; font-weight: 700; color: var(--navy-3); background: #e4edfb; padding: .1rem .5rem; border-radius: 4px; }
.lec-file-name { flex: 1 1 12rem; font-weight: 600; overflow-wrap: anywhere; }
.lec-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0 1rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.lec-nav a { display: grid; gap: .15rem; color: var(--ink); text-decoration: none; font-weight: 600; }
.lec-nav a span { font-size: .8rem; font-weight: 600; color: var(--text-soft); }
.lec-nav a:hover { color: var(--blue); }
.lec-nav .lec-next { text-align: right; }
.quick-nav a, .start-btn, .brand-text span, .brand-text strong { white-space: nowrap; }
.quick-nav a { padding: .5rem .6rem; font-size: .93rem; }
.header-inner { gap: .75rem; }