/* =============================================================
   learn.css — guide details: article · glossary term · FAQ
   Builds on billing.css / support.css / report.css tokens.
   ============================================================= */

.page-learn { display: flex; flex-direction: column; gap: 16px; }

/* ── article hero ── */
.lrn-hero { flex-direction: row; gap: 22px; align-items: center; border-color: rgba(152,114,255,0.3); }
.app-shell.rtl .lrn-hero { flex-direction: row-reverse; }
.lrn-hero-art { flex: none; width: 190px; display: grid; place-items: center; border-radius: 14px; background: radial-gradient(120% 100% at 50% 0%, rgba(40,30,80,0.5), transparent 70%); }
.lrn-hero-tx { display: flex; flex-direction: column; gap: 9px; }
.app-shell.rtl .lrn-hero-tx { text-align: right; }
.lrn-tag { align-self: flex-start; font-size: 11px; font-weight: 800; color: var(--violet); border: 1px solid rgba(152,114,255,0.5); border-radius: 999px; padding: 3px 12px; }
.app-shell.rtl .lrn-tag { align-self: flex-end; }
.lrn-hero-title { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: #fff; }
.app-shell.rtl .lrn-hero-title { font-weight: 700; }
.lrn-hero-lead { color: var(--text-soft); font-size: 13.5px; line-height: 1.9; }
.lrn-hero-meta { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
.lrn-hero-meta span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); }
.lrn-hero-meta svg { color: var(--gold); }

.lrn-para { color: var(--text-soft); font-size: 13.5px; line-height: 1.95; }
.app-shell.rtl .lrn-para { text-align: right; }
.lrn-callout { display: flex; align-items: center; gap: 11px; margin-top: 4px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(152,114,255,0.3); background: rgba(152,114,255,0.06); color: var(--text-soft); font-size: 12.5px; line-height: 1.7; }
.app-shell.rtl .lrn-callout { flex-direction: row-reverse; text-align: right; }
.lrn-callout svg { color: var(--violet); flex: none; }

.lrn-offers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lrn-offer { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 12px; border: 1px solid var(--border-soft); background: rgba(255,255,255,0.02); }
.app-shell.rtl .lrn-offer { flex-direction: row-reverse; text-align: right; }
.lrn-offer-ic { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--violet); background: rgba(152,114,255,0.12); border: 1px solid rgba(152,114,255,0.3); }
.lrn-offer div { display: flex; flex-direction: column; gap: 3px; }
.lrn-offer strong { font-size: 13.5px; color: #fff; font-weight: 700; }
.lrn-offer span { font-size: 11.5px; color: var(--text-muted); line-height: 1.7; }

.lrn-bigcallout { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: var(--r-lg); border: 1px solid rgba(248,198,72,0.4); background: linear-gradient(180deg, rgba(24,18,8,0.6), rgba(10,8,4,0.8)), radial-gradient(130% 150% at 0% 0%, rgba(248,198,72,0.14), transparent 55%); }
.app-shell.rtl .lrn-bigcallout { flex-direction: row-reverse; text-align: right; }
.lrn-bc-ic { flex: none; width: 56px; height: 56px; border-radius: 999px; display: grid; place-items: center; color: var(--gold); border: 1px solid rgba(248,198,72,0.5); background: rgba(248,198,72,0.1); }
.lrn-bigcallout strong { display: block; font-size: 18px; color: var(--gold); font-weight: 700; margin-bottom: 5px; }
.app-shell.rtl .lrn-bigcallout strong { font-family: var(--font-display); }
.lrn-bigcallout p { color: var(--text-soft); font-size: 13px; line-height: 1.9; }

/* TOC */
.lrn-toc { display: flex; flex-direction: column; gap: 3px; }
.lrn-toc-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; background: transparent; color: var(--text-soft); font-family: inherit; font-size: 13px; font-weight: 600; text-align: start; transition: all .15s; }
.lrn-toc-item:hover { background: rgba(255,255,255,0.03); }
.lrn-toc-item.active { background: rgba(152,114,255,0.12); border-color: rgba(152,114,255,0.4); color: #fff; }
.lrn-toc-num { font-family: var(--font-en); font-size: 11px; font-weight: 700; color: var(--violet); width: 22px; }
.lrn-dl { margin-top: 12px; }
.lrn-related { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 4px; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.05); cursor: pointer; font-family: inherit; color: var(--text-soft); text-align: start; }
.lrn-related:last-of-type { border-bottom: none; }
.lrn-related:hover { background: rgba(255,255,255,0.02); border-radius: 8px; }
.app-shell.rtl .lrn-related { flex-direction: row-reverse; text-align: right; }
.lrn-rel-ic { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--violet); background: rgba(152,114,255,0.1); }
.app-shell.ltr .lrn-rel-ic svg { transform: scaleX(-1); }
.lrn-related div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.lrn-related strong { font-size: 12.5px; color: var(--text); font-weight: 600; }
.lrn-related span { font-size: 11px; color: var(--text-muted); line-height: 1.5; }
.lrn-related > svg { color: var(--text-dim); }
.app-shell.ltr .lrn-related > svg { transform: scaleX(-1); }
.lrn-allbtn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 10px; padding: 9px; border-radius: 10px; background: transparent; border: 1px solid var(--border-soft); cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--cyan); }
.lrn-allbtn:hover { border-color: rgba(98,221,255,0.4); }
.app-shell.ltr .lrn-allbtn svg { transform: scaleX(-1); }

/* ── glossary term ── */
.lrn-term-head { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
.lrn-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 10px; background: transparent; border: 1px solid var(--border-soft); cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-soft); }
.app-shell.ltr .lrn-back { align-self: flex-end; }
.app-shell.ltr .lrn-back svg { transform: scaleX(-1); }
.lrn-back:hover { border-color: rgba(152,114,255,0.4); color: #fff; }
.lrn-term-tabs { display: flex; gap: 8px; }
.lrn-term-tab { font-size: 11.5px; font-weight: 700; color: var(--text-muted); border: 1px solid var(--border-soft); border-radius: 999px; padding: 5px 14px; display: inline-flex; align-items: center; gap: 5px; }
.lrn-term-tab.active { color: #fff; }
.lrn-term-tab.gold.active { color: var(--gold); border-color: rgba(248,198,72,0.5); background: rgba(248,198,72,0.1); }
.lrn-term-tab.green { color: var(--green); border-color: rgba(95,214,181,0.4); background: rgba(95,214,181,0.08); }
.lrn-term-title { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: #fff; display: inline-flex; align-items: center; gap: 10px; }
.lrn-term-title svg { color: var(--violet); }

.lrn-def { flex-direction: row; gap: 20px; align-items: center; border-color: rgba(152,114,255,0.3); }
.app-shell.rtl .lrn-def { flex-direction: row-reverse; }
.lrn-def-tx { flex: 1; }
.app-shell.rtl .lrn-def-tx { text-align: right; }
.lrn-def-tx p { color: var(--text-soft); font-size: 13.5px; line-height: 1.95; margin-top: 8px; }
.lrn-def-art { flex: none; width: 160px; display: grid; place-items: center; }
.lrn-yours { margin-top: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 10px; font-size: 12px; line-height: 1.6; color: var(--gold); border: 1px solid rgba(248,198,72,0.4); background: rgba(248,198,72,0.08); }
.app-shell.rtl .lrn-yours { flex-direction: row-reverse; text-align: right; }

.lrn-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.lrn-step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 18px 12px; border-radius: 12px; border: 1px solid var(--border-soft); background: rgba(255,255,255,0.02); }
.lrn-step-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--violet); background: rgba(152,114,255,0.12); border: 1px solid rgba(152,114,255,0.3); }
.lrn-step strong { font-size: 13px; color: #fff; font-weight: 700; }
.lrn-step span { font-size: 11px; color: var(--text-muted); line-height: 1.6; }

.lrn-facts { display: flex; flex-direction: column; gap: 11px; }
.lrn-fact { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; font-size: 12.5px; color: var(--text-muted); }
.lrn-fact-ic { color: var(--violet); display: grid; place-items: center; }
.lrn-fact b { font-size: 12.5px; color: var(--text-soft); font-weight: 600; text-align: end; }

/* ── FAQ ── */
.lrn-faq-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 0; }
.lrn-faq-hero .sup-hero-title { display: inline-flex; align-items: center; gap: 10px; }
.lrn-faq-hero .sup-hero-title svg { color: var(--violet); }
.lrn-search { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 18px; border-radius: 14px; border: 1px solid rgba(152,114,255,0.45); background: rgba(10,12,26,0.7); color: var(--text-muted); }
.lrn-search input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font-family: inherit; font-size: 15px; }
.app-shell.rtl .lrn-search input { text-align: right; }
.lrn-search-x { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; cursor: pointer; border: none; background: rgba(255,255,255,0.06); color: var(--text-muted); transform: rotate(45deg); }
.lrn-search-x:hover { color: #fff; background: rgba(255,255,255,0.12); }
.lrn-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lrn-sort { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); border: 1px solid var(--border-soft); border-radius: 999px; padding: 6px 13px; }
.lrn-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; cursor: pointer; border: 1px solid var(--border-soft); background: rgba(255,255,255,0.02); color: var(--text-muted); font-family: inherit; font-size: 12px; font-weight: 600; transition: all .15s; }
.lrn-chip svg { color: var(--violet); }
.lrn-chip:hover { color: var(--text-soft); border-color: rgba(152,114,255,0.4); }
.lrn-chip.active { color: #fff; border-color: rgba(152,114,255,0.7); background: linear-gradient(180deg, rgba(152,114,255,0.25), rgba(110,80,200,0.12)); }
.lrn-count { font-size: 12px; color: var(--text-muted); }
.app-shell.rtl .lrn-count { text-align: right; }
.lrn-faqlist .sup-faq-q > span:nth-child(2) { font-weight: 600; }
.lrn-faq-foot { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); padding-top: 6px; }
.lrn-faq-foot svg { color: var(--gold); }

.lrn-cats { display: flex; flex-direction: column; gap: 4px; }
.lrn-cat { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 11px 8px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; background: transparent; color: var(--text-soft); font-family: inherit; text-align: start; transition: all .15s; }
.lrn-cat:hover { background: rgba(255,255,255,0.03); }
.lrn-cat.active { background: rgba(152,114,255,0.12); border-color: rgba(152,114,255,0.4); }
.lrn-cat-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--violet); background: rgba(152,114,255,0.1); }
.lrn-cat-label { font-size: 12.5px; font-weight: 600; }
.lrn-cat-n { font-family: var(--font-en); font-size: 12px; font-weight: 700; color: var(--text-muted); }
.lrn-noresult { align-items: center; text-align: center; gap: 9px; }
.lrn-planet { width: 54px; height: 54px; border-radius: 999px; display: grid; place-items: center; color: var(--violet); background: radial-gradient(circle, rgba(152,114,255,0.25), transparent 70%); }
.lrn-noresult strong { font-size: 14px; color: #fff; font-weight: 700; }
.lrn-noresult > span { font-size: 12px; color: var(--text-muted); line-height: 1.7; }
.lrn-noresult .rep-act { margin-top: 6px; }
.lrn-resp { display: inline-flex; align-items: center; gap: 6px; font-size: 11px !important; color: var(--text-dim) !important; }

@media (max-width: 980px) {
  .rep-grid2 { grid-template-columns: 1fr; }
  .lrn-hero, .lrn-def { flex-direction: column; text-align: center; }
  .lrn-offers, .lrn-steps { grid-template-columns: 1fr 1fr; }
  .lrn-hero-art, .lrn-def-art { width: 100%; }
}
@media (max-width: 560px) { .lrn-offers, .lrn-steps { grid-template-columns: 1fr; } }
.lrn-term-layout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: stretch; }
.lrn-term-layout > *, .lrn-term-panel { min-width: 0; padding: clamp(14px, 2vw, 26px); background: rgba(16, 19, 36, .92); border: 1px solid var(--border-soft); border-radius: 16px; }
.lrn-term-layout .bil-card + .bil-card { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.lrn-term-layout .bil-card p, .lrn-term-panel p { line-height: 1.8; }
.lrn-term-panel { margin-bottom: 16px; }
.lrn-term-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 10px; }
.lrn-term-index button { font: inherit; color: inherit; background: rgba(16, 19, 36, .92); text-align: start; }
.lrn-related-note { cursor: default; }
@media (max-width: 900px) {
  .lrn-term-layout { grid-template-columns: minmax(0, 1fr); }
}