/* RIBO Exam Pro — front-end
   Design system: indigo #5956E9 · gold #F4B740 · Plus Jakarta Sans 800 / Inter */

:root{
  --ribo-brand:#5956E9;
  --ribo-accent:#F4B740;
  --ribo-brand-dark:#4340C4;
  --ribo-brand-soft:#EEEEFD;
  --ribo-ink:#14132B;
  --ribo-txt:#3A3852;
  --ribo-dim:#6E6C85;
  --ribo-line:#E6E5F2;
  --ribo-ok:#0E9F6E;
  --ribo-ok-soft:#E7F7F1;
  --ribo-warn:#B4820A;
  --ribo-warn-soft:#FDF6E3;
  --ribo-bad:#D64550;
  --ribo-bad-soft:#FDECEE;
  --ribo-radius:14px;
}

/* ── lessons ───────────────────────────────────────────────────────────── */
.ribo-lesson{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  color:var(--ribo-txt);
  line-height:1.72;
  font-size:16.5px;
  max-width:74ch;
}
.ribo-lesson *{box-sizing:border-box;}
.ribo-crumb{
  display:inline-block;
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ribo-brand);background:var(--ribo-brand-soft);
  padding:6px 12px;border-radius:999px;margin-bottom:18px;
}
.ribo-lesson h2{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  font-size:30px;line-height:1.25;letter-spacing:-.02em;
  color:var(--ribo-ink);margin:0 0 18px;
}
.ribo-lesson h3{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;
  font-size:20px;line-height:1.35;letter-spacing:-.01em;
  color:var(--ribo-ink);margin:34px 0 12px;
  padding-left:14px;border-left:4px solid var(--ribo-brand);
}
.ribo-lesson h4{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;
  font-size:16.5px;color:var(--ribo-ink);margin:24px 0 8px;
}
.ribo-lesson p{margin:0 0 15px;}
.ribo-lesson ul,.ribo-lesson ol{margin:0 0 16px;padding-left:22px;}
.ribo-lesson li{margin:0 0 8px;}
.ribo-lesson strong{color:var(--ribo-ink);font-weight:600;}
.ribo-lesson code{
  background:var(--ribo-brand-soft);color:var(--ribo-brand-dark);
  padding:2px 6px;border-radius:5px;font-size:.9em;font-weight:600;
}

/* callouts */
.ribo-key,.ribo-warn,.ribo-exam-tip{
  border-radius:var(--ribo-radius);padding:16px 18px;margin:20px 0;
  font-size:15.5px;line-height:1.65;
}
.ribo-key{background:var(--ribo-brand-soft);border-left:4px solid var(--ribo-brand);}
.ribo-key strong:first-child{color:var(--ribo-brand-dark);}
.ribo-warn{background:var(--ribo-bad-soft);border-left:4px solid var(--ribo-bad);}
.ribo-warn strong:first-child{color:var(--ribo-bad);}
.ribo-exam-tip{background:var(--ribo-warn-soft);border-left:4px solid var(--ribo-accent);}
.ribo-exam-tip strong:first-child{color:var(--ribo-warn);}
.ribo-key p:last-child,.ribo-warn p:last-child,.ribo-exam-tip p:last-child,
.ribo-key ul:last-child,.ribo-warn ul:last-child,.ribo-exam-tip ul:last-child{margin-bottom:0;}

/* tables */
.ribo-table-wrap{overflow-x:auto;margin:20px 0;-webkit-overflow-scrolling:touch;}
.ribo-table{
  width:100%;border-collapse:collapse;font-size:15px;
  border:1px solid var(--ribo-line);border-radius:var(--ribo-radius);overflow:hidden;
}
.ribo-table th{
  background:var(--ribo-ink);color:#fff;text-align:left;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:13.5px;
  letter-spacing:.02em;padding:12px 14px;
}
.ribo-table td{padding:12px 14px;border-top:1px solid var(--ribo-line);vertical-align:top;}
.ribo-table tr:nth-child(even) td{background:#FAFAFE;}

/* ── hints ─────────────────────────────────────────────────────────────── */
.ribo-hint{margin:14px 0 4px;}
.ribo-hint__btn,.ribo-hint__more{
  font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;
  color:var(--ribo-brand-dark);background:var(--ribo-brand-soft);
  border:1px solid #D9D8FA;border-radius:999px;
  padding:8px 16px;cursor:pointer;
  transition:background .15s,transform .15s,box-shadow .15s;
}
.ribo-hint__btn:hover,.ribo-hint__more:hover{
  background:#E2E1FC;transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(89,86,233,.18);
}
.ribo-hint__panel{
  margin-top:10px;padding:14px 16px;
  background:var(--ribo-brand-soft);border-left:3px solid var(--ribo-brand);
  border-radius:10px;font-size:14.5px;line-height:1.6;color:var(--ribo-txt);
}
.ribo-hint__tip{margin:0 0 10px;}
.ribo-hint__ruleout{margin-top:10px;font-size:14px;}
.ribo-hint__ruleout ul{margin:6px 0 0;padding-left:20px;}
.ribo-hint__ruleout li{margin:0 0 4px;text-decoration:line-through;color:var(--ribo-dim);}

/* ── answer explanation ────────────────────────────────────────────────── */
.ribo-why{
  margin:14px 0 4px;border-radius:var(--ribo-radius);
  background:var(--ribo-ok-soft);border:1px solid #C4EBDB;
  overflow:hidden;
}
.ribo-why__head{
  display:flex;align-items:center;gap:9px;
  padding:11px 16px;background:rgba(14,159,110,.09);
  font-family:'Plus Jakarta Sans',sans-serif;font-size:13.5px;color:#0A7F58;
}
.ribo-why__icon{
  width:20px;height:20px;flex:none;border-radius:50%;
  background:var(--ribo-ok);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;
}
.ribo-why__dom{
  margin-left:auto;font-size:11px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  color:#0A7F58;opacity:.75;
}
.ribo-why__body{
  padding:14px 16px;font-size:14.8px;line-height:1.68;color:#1F4437;
}
.ribo-why__body p{margin:0 0 10px;}
.ribo-why__body p:last-child{margin-bottom:0;}
.ribo-why__body strong{color:#0A7F58;font-weight:600;}

/* ── exam-conditions banner ────────────────────────────────────────────── */
.ribo-exam-banner{
  background:linear-gradient(135deg,var(--ribo-ink),#2A2750);
  color:#fff;border-radius:var(--ribo-radius);
  padding:14px 18px;margin:0 0 20px;
  font-family:'Inter',sans-serif;font-size:14.5px;font-weight:500;
  border-left:4px solid var(--ribo-accent);
}

/* ── per-domain score breakdown ────────────────────────────────────────── */
.ribo-bd{
  font-family:'Inter',sans-serif;
  border:1px solid var(--ribo-line);border-radius:18px;
  background:#fff;margin:0 0 28px;overflow:hidden;
  box-shadow:0 10px 30px rgba(20,19,43,.06);
}
.ribo-bd__head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 24px;background:var(--ribo-ink);color:#fff;
}
.ribo-bd__head h3{
  margin:0;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  font-size:18px;letter-spacing:-.01em;color:#fff;
}
.ribo-bd__total{text-align:right;line-height:1.1;}
.ribo-bd__total strong{
  display:block;font-family:'Plus Jakarta Sans',sans-serif;
  font-size:30px;font-weight:800;color:var(--ribo-accent);
}
.ribo-bd--pass .ribo-bd__total strong{color:#5BE3AE;}
.ribo-bd__total span{font-size:12.5px;color:#A9A7C0;}
.ribo-bd__rows{padding:8px 24px 4px;}
.ribo-bd__row{
  display:grid;grid-template-columns:1fr 150px 84px;
  align-items:center;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--ribo-line);
}
.ribo-bd__row:last-child{border-bottom:0;}
.ribo-bd__lab{
  font-size:14.5px;font-weight:600;color:var(--ribo-ink);line-height:1.35;
}
.ribo-bd__w{
  display:block;font-size:11.5px;font-weight:500;
  color:var(--ribo-dim);margin-top:2px;
}
.ribo-bd__track{
  height:9px;border-radius:999px;background:#EFEFF6;overflow:hidden;
}
.ribo-bd__fill{height:100%;border-radius:999px;transition:width .5s ease;}
.ribo-bd__fill--ok{background:var(--ribo-ok);}
.ribo-bd__fill--warn{background:var(--ribo-accent);}
.ribo-bd__fill--bad{background:var(--ribo-bad);}
.ribo-bd__num{
  text-align:right;font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;font-size:17px;
}
.ribo-bd__num small{
  display:block;font-family:'Inter',sans-serif;
  font-weight:500;font-size:11.5px;color:var(--ribo-dim);margin-top:1px;
}
.ribo-bd__num--ok{color:var(--ribo-ok);}
.ribo-bd__num--warn{color:var(--ribo-warn);}
.ribo-bd__num--bad{color:var(--ribo-bad);}
.ribo-bd__foot{
  margin:0;padding:14px 24px 18px;
  font-size:13px;color:var(--ribo-dim);border-top:1px solid var(--ribo-line);
}

/* ── previous / next nav bar ───────────────────────────────────────────── */
.ribo-nav{
  display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch;
  margin:36px 0 8px;padding-top:24px;border-top:1px solid var(--ribo-line);
  font-family:'Inter',sans-serif;
}
.ribo-nav__item{
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:14px 18px;border:1px solid var(--ribo-line);border-radius:var(--ribo-radius);
  text-decoration:none;background:#fff;
  transition:border-color .15s,box-shadow .15s,transform .15s;
  min-width:0;
}
a.ribo-nav__item:hover{
  border-color:var(--ribo-brand);transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(89,86,233,.14);
}
.ribo-nav__item--empty{background:transparent;border-color:transparent;}
.ribo-nav__item--next{text-align:right;}
.ribo-nav__dir{
  font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ribo-brand);
}
.ribo-nav__title{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14.5px;
  color:var(--ribo-ink);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.ribo-nav__topic{font-size:12px;color:var(--ribo-dim);}
.ribo-nav__mid{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  padding:14px 20px;min-width:180px;
}
.ribo-nav__back{
  font-size:13px;font-weight:600;color:var(--ribo-brand);text-decoration:none;
}
.ribo-nav__back:hover{text-decoration:underline;}
.ribo-nav__count{font-size:12px;color:var(--ribo-dim);}
.ribo-nav__bar{
  display:block;width:130px;height:5px;border-radius:999px;background:#EFEFF6;overflow:hidden;
}
.ribo-nav__bar i{display:block;height:100%;background:var(--ribo-brand);border-radius:999px;}

@media(max-width:760px){
  .ribo-lesson{font-size:16px;}
  .ribo-lesson h2{font-size:25px;}
  .ribo-nav{grid-template-columns:1fr;}
  .ribo-nav__item--next{text-align:left;}
  .ribo-nav__mid{order:3;min-width:0;}
  .ribo-bd__row{grid-template-columns:1fr 70px;gap:10px;}
  .ribo-bd__track{grid-column:1 / -1;order:3;}
}
@media(prefers-reduced-motion:reduce){
  .ribo-hint__btn,.ribo-hint__more,.ribo-nav__item,.ribo-bd__fill{transition:none;}
}