.fq-page { max-width:1200px; margin:auto; padding:40px 24px 60px; color:#14241c }
.fq-page [hidden] { display:none!important }
.fq-hero { text-align:center; position:relative; padding:0 90px 32px }
.fq-hero h1 { font-size:clamp(30px,4vw,48px); margin:8px 0 12px; letter-spacing:-1.5px }
.fq-hero p { font-size:19px; line-height:1.6; color:#4c5753 }
.fq-decoration { position:absolute; font-size:65px; top:30px }
.fq-left { left:30px; transform:rotate(-12deg) }
.fq-right { right:30px; transform:rotate(14deg) }
.fq-reward-tag { display:inline-block; background:#eaf7ee; border:1px solid #c9e8d4; border-radius:30px; padding:8px 16px; font-size:13px; color:#08763c; font-weight:600 }
.fq-step { text-align:center; font-size:25px; margin:6px 0 28px }
.fq-step span { color:#098645 }
.fq-topics { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px }
.fq-card { display:flex; flex-direction:column; align-items:center; text-align:center; background:white; border:1px solid #e5eae5; border-radius:15px; padding:26px 16px; box-shadow:0 5px 20px #16332608; transition:transform .2s,border-color .2s }
.fq-card:hover { transform:translateY(-4px); border-color:#06864a }
.fq-icon { display:inline-grid; place-items:center; width:64px; height:64px; border-radius:18px; background:#e9f6ed; color:#008944; font-size:39px; font-weight:800; margin-bottom:18px }
.fq-icon.instagram-basics { color:white; background:radial-gradient(circle at 25% 100%,#ffce54 5%,#f14860 42%,#b829ac 65%,#6250d1 90%) }
.fq-icon.canva-basics { border-radius:50%; color:white; background:linear-gradient(135deg,#00c4cc,#7340ed); font-family:Georgia,serif; font-style:italic }
.fq-icon.youtube-basics { color:#fff; background:#ef2634; font-size:30px }
.fq-icon.capcut-basics { color:#151515; background:#f8f8f8 }
.fq-icon svg { width:44px; height:44px; fill:none; stroke:currentColor; stroke-width:2.2 }
.fq-canva-word { font-size:19px; font-weight:600; letter-spacing:-1px }
.fq-page [data-question-list] { scroll-margin-top:110px }
.fq-card h3 { font-size:17px; line-height:1.4; margin:0 0 10px }
.fq-card p { font-size:14px; line-height:1.7; color:#56605b; flex:1; margin:0 0 20px }
.fq-card a { font-size:13px; padding:11px 14px; border:1px solid #70a68b; border-radius:7px; color:#077940; font-weight:700; text-decoration:none; width:100% }
.fq-card a:hover { background:#008746; color:white }
.fq-workspace { display:grid; grid-template-columns:260px minmax(0,1fr); gap:26px; margin-top:20px }
.fq-sidebar,.fq-main { background:white; border:1px solid #e7ebe8; border-radius:16px; box-shadow:0 5px 22px #11281808 }
.fq-sidebar { padding:22px; height:fit-content }
.fq-back { font-size:14px; font-weight:700; color:#0c8149; text-decoration:none }
.fq-sidebar h2 { font-size:20px; margin:16px 0 8px }
.fq-sidebar .fq-icon { margin:22px 0 0; width:48px; height:48px; font-size:28px }
.fq-outline { list-style:none; padding:0; margin:22px 0; display:grid; gap:14px; font-size:14px }
.fq-outline li::before { content:'•'; color:#099c57; margin-right:10px }
.fq-ready { padding:18px 14px; background:#f2faf5; border-radius:10px; text-align:center; font-size:13px; line-height:1.7 }
.fq-ready strong { color:#087e44; font-size:16px }
.fq-ready small { font-weight:600 }
.fq-main { padding:30px }
.fq-lesson h2 { font-size:27px; margin-top:0 }
.fq-lesson h3 { font-size:19px; margin-top:24px }
.fq-lesson p { font-size:17px; line-height:1.9; white-space:pre-line; color:#425449 }
.fq-study-check { display:flex; align-items:center; gap:12px; padding:18px 0; font-weight:600 }
.fq-study-check input { width:20px; height:20px; accent-color:#078b49 }
.fq-progress-heading { display:flex; justify-content:space-between; gap:16px; margin-bottom:16px }
.fq-quiz progress { width:100%; height:8px; border:0; border-radius:8px; accent-color:#09a354; margin-bottom:24px }
.fq-quiz progress::-webkit-progress-bar { background:#e7eae7; border-radius:8px }
.fq-quiz progress::-webkit-progress-value { background:#0ca454; border-radius:8px }
.fq-question { border:1px solid #e2eee5; background:#f6fbf7; border-radius:12px; padding:24px; margin:0; min-width:0 }
.fq-question legend { float:left; width:100%; font-size:21px; line-height:1.45; font-weight:700; margin-bottom:22px }
.fq-option { clear:both; display:flex; align-items:center; gap:12px; background:#fff; border:1px solid #dce4df; border-radius:8px; padding:14px; margin:10px 0; cursor:pointer; font-weight:400 }
.fq-option:has(input:checked) { border-color:#168b53; background:#edf8f1 }
.fq-option input { width:18px; height:18px; accent-color:#09874b; flex-shrink:0 }
.fq-actions { display:flex; justify-content:space-between; gap:12px; margin-top:24px }
.fq-secondary { background:#f0f2f0; color:#263d30 }
.fq-page .btn.primary { background:linear-gradient(120deg,#087e41,#00a458); color:#fff; box-shadow:0 5px 14px #07814416 }
.fq-page .btn.primary:hover { background:#087e41 }
.fq-page button:disabled { opacity:.5; cursor:not-allowed }
.fq-dots { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:28px }
.fq-dots button { border:0; width:34px; height:34px; border-radius:50%; background:#eef0ee; color:#4d5651; cursor:pointer }
.fq-dots button[aria-current=true] { background:#068a46; color:white }
.fq-dots button.answered { box-shadow:0 0 0 2px #85c49c }
.fq-result { text-align:center }
.fq-trophy { font-size:65px }
.fq-result h2 { font-size:28px }
.fq-score { font-size:40px; font-weight:800; margin:10px }
.fq-score span { color:#058642 }
.fq-stat-row { display:flex; justify-content:center; gap:16px; margin:22px 0 }
.fq-stat { padding:16px 24px; border-radius:10px; background:#edf8e7; color:#087c3e }
.fq-stat.wrong { background:#fceced; color:#b52d41 }
.fq-stat strong { display:block; font-size:27px }
.fq-result-actions { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin:24px 0 }
.fq-review { text-align:left; border-top:1px solid #e5ebe7; padding-top:20px }
.fq-review p { line-height:1.6 }
.fq-error { padding:16px; border-radius:8px; background:#fff0ee; color:#a32727 }
.fq-terms { text-align:center; color:#69766d; font-size:13px; line-height:1.8; margin:32px auto 0; max-width:800px }
.fq-page a:focus-visible,.fq-page button:focus-visible,.fq-page input:focus-visible { outline:3px solid #426bd6; outline-offset:3px }
@media(max-width:1000px) {
  .fq-topics { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .fq-workspace { grid-template-columns:220px minmax(0,1fr) }
}
@media(max-width:650px) {
  .fq-page { padding:24px 16px 40px }
  .fq-hero { padding:0 0 24px }
  .fq-decoration { display:none }
  .fq-hero p { font-size:16px }
  .fq-topics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
  .fq-card { padding:20px 12px }
  .fq-card h3 { font-size:16px }
  .fq-workspace { grid-template-columns:1fr; gap:16px }
  .fq-sidebar { padding:18px }
  .fq-sidebar .fq-outline,.fq-sidebar .fq-ready { display:none }
  .fq-sidebar .fq-icon { margin:16px 10px 0 0 }
  .fq-main { padding:20px 16px }
  .fq-question { padding:16px }
  .fq-question legend { font-size:18px }
  .fq-actions .btn { font-size:13px; padding:12px }
  .fq-lesson p { font-size:16px }
}
@media(prefers-reduced-motion:reduce) { .fq-card { transition:none } }