/* Pastel redesign — light & airy */
:root{
  --brand:#8AA9FF; --brand-dark:#6E8FFF; --accent:#B7A7F6; --mint:#A7F3D0; --sun:#FFE5A3;
  --ink:#0f172a; --text:#475569; --muted:#64748b; --bg:#fafbff; --card:#ffffff; --line:#e5e7eb;
}
html,body{ background:var(--bg); color:var(--text); font-family: 'Inter', sans-serif; }
a{ color: black; }
.topbar{ font-size:.95rem; background:linear-gradient(90deg,#f6f8ff,#fcfaff); color:var(--muted); border-bottom:1px solid var(--line); }
.topbar a{ color:var(--muted); text-decoration:none; }
.navbar{ background:rgba(255,255,255,.85)!important; backdrop-filter:saturate(120%) blur(10px); border-bottom:1px solid var(--line); }
.navbar-brand img{ height:40px; }
.nav-link{ color:var(--muted)!important; }
.nav-link:hover{ color:var(--ink)!important; }
.lang-pill{ display:inline-block;width:20px;height:20px;border-radius:50%;background:#fca5a5; }
.btn{ border-radius:12px; }
.btn-primary{ background:rgba(221,0,0,1); border: none; box-shadow:0 6px 18px rgba(138,169,255,.35); }
.btn-primary:hover{ background:black;}
.btn-outline-secondary{ border-color:#cbd5e1; color:var(--ink); }
.btn-outline-secondary:hover{ background:rgba(221,0,0,1); border: 1px solid rgba(221,0,0,1); }
.carousel .carousel-item img{ height:64vh; object-fit:cover; filter:saturate(.92) contrast(.98) brightness(.98); }
.hero-overlay{ background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.75)); color:#111827; border-radius: 14px;}
.section-title{ font-weight:800; letter-spacing:.2px; color:#1e293b; }
.bg-light{ background:linear-gradient(180deg,#fbfdff,#f7f7fe)!important; }
.feature-icon{ width:56px;height:56px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;
  background: radial-gradient(120% 120% at 20% 20%, #eef2ff 0%, #fef9c3 100%); color:#4338ca; box-shadow: inset 0 0 0 1px rgba(67,56,202,.06); }
.card{ background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:0 8px 20px rgba(15,23,42,.04); }
.card:hover{ transform: none; box-shadow:0 12px 28px rgba(15,23,42,.06); }
.card .card-img-top{ height:200px; object-fit:cover; border-top-left-radius:18px; border-top-right-radius:18px; }
.badge{ border-radius:999px; padding:.4rem .6rem; }
.badge.text-bg-secondary{ background:#e9efff!important; color:#334155!important; border:1px solid #dbeafe; }
.filter-chip{ display:inline-block; padding:.35rem .7rem; border-radius:999px; background:#f7f7fe; border:1px solid #e0e7ff; font-size:.9rem; margin:.125rem; cursor:pointer; }
.filter-chip.active{ background:#e9efff; border-color:#c7d2fe; }
.form-control,.form-select{ border-radius:12px; border-color:#e5e7eb; }
.form-control:focus,.form-select:focus{ border-color:#c7d2fe; box-shadow:0 0 0 .2rem rgba(138,169,255,.25); }
.article-hero{ border-radius:16px; overflow:hidden; box-shadow:0 10px 30px rgba(30,41,59,.08); }
.article-content img{ max-width:100%; height:auto; border-radius:8px; }
.article-content blockquote{ border-left:4px solid var(--accent); background:#faf5ff; padding:1rem 1.2rem; border-radius:8px; }
.prose{ line-height:1.75; font-size:1.05rem; }
.sticky-sidebar{ position:sticky; top:90px; }
.tag{ display:inline-block; padding:.25rem .6rem; background:#eef2ff; color:#4338ca; border-radius:999px; font-size:.85rem; }
.course-hero{ border-radius:18px; overflow:hidden; box-shadow:0 12px 30px rgba(99,102,241,.15); }
.benefit{ display:flex; gap:.75rem; align-items:flex-start; }
.benefit i{ font-size:1.25rem; margin-top:.1rem; color:#16a34a; }
.footer{ background:linear-gradient(180deg,#fafbff,#f6f7ff); color:var(--muted); border-top:1px solid var(--line); }
.footer a{ color:#475569; text-decoration:none; }
.footer .btn-outline-light{ border-color:#cbd5e1; color:#475569; }
.footer .btn-outline-light:hover{ background:#eef2ff; border-color:#c7d2fe; }
hr{ border-color:var(--line); }

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
  background-color: #FFCE00;
}

.accordion-button:not(.collapsed) {
  background-color: #212529;
  color: white;
}

.accordion-button:focus {
  box-shadow: none;
}

.direction-column {
  flex-direction: column;
  gap: 15px;
}