/* W20 Premium */
.w20-view { display: none; }
.w20-active { display: block; }
.w20-hero { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:24px; background:linear-gradient(120deg, rgba(245,194,107,0.12), rgba(125,224,197,0.08)); border:1px solid rgba(255,255,255,0.06); border-radius:18px; padding:24px; box-shadow:0 20px 50px rgba(0,0,0,0.35); }
.w20-eyebrow { letter-spacing:0.14em; text-transform:uppercase; color:#f5c26b; font-size:12px; margin:0 0 6px; }
.w20-hero h1 { margin:0; letter-spacing:-0.02em; }
.w20-hero-actions { display:flex; gap:10px; flex-wrap:wrap; }
.w20-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:16px; }
.w20-card { display:block; text-decoration:none; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:16px; padding:18px; text-align:left; color:inherit; cursor:pointer; box-shadow:0 16px 40px rgba(0,0,0,0.32); transition:transform 150ms ease, border-color 150ms ease; }
.w20-card:hover { transform:translateY(-4px); border-color:rgba(245,194,107,0.4); }
.w20-emoji { font-size:28px; margin-bottom:8px; }
.w20-topbar { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.w20-title h2 { margin:0; }
.w20-title p { margin:0; color:#a6afbe; }
.w20-video-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:16px; }
.w20-video-card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:14px; box-shadow:0 14px 32px rgba(0,0,0,0.3); }
.w20-list { display:flex; flex-direction:column; gap:12px; }
.w20-row { background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.07); border-radius:12px; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.w20-detail { display:grid; gap:14px; }
.w20-detail.single { grid-template-columns:1fr; width:100%; }
.w20-detail-box { background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.07); border-radius:12px; padding:14px; width:100%; }
.w20-detail.single .w20-detail-box { min-height:calc(100vh - 280px); }
.w20-detail-text { white-space:pre-wrap; color:#e8ecf2; line-height:1.7; font-size:18px; }
.w20-detail-text::selection { background:#fde68a; color:#111; }
.w20-hr { border:none; border-top:1px solid rgba(255,255,255,0.08); margin:14px 0; }
.w20-textarea { width:100%; min-height:220px; padding:12px; border-radius:12px; border:1px solid rgba(255,255,255,0.08); background:rgba(0,0,0,0.15); color:#e8ecf2; font-size:15px; }
.w20-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:10px; }
.w20-hint { color:#a6afbe; font-size:13px; }
.w20-note { color:#a6afbe; font-size:14px; }
.w20-nav-group{ margin-left:auto; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.w20-prev-btn,
.w20-next-btn{ white-space: nowrap; }
@media (max-width:640px) {
  .w20-hero { flex-direction:column; }
  .w20-row { align-items:flex-start; flex-direction:column; }
  .w20-hero-actions, .w20-actions { width:100%; }
  .w20-actions .submit-btn, .w20-actions .ghost-btn { flex:1; text-align:center; }
  .w20-detail.single .w20-detail-box { min-height:auto; }
}
/* W20 contrast refresh */
.w20-hero {
  background: linear-gradient(120deg, rgba(229,57,53,0.08), rgba(30,144,255,0.08));
  border: 1px solid rgba(0,0,0,0.04);
  color: #0f172a;
}
.w20-hero h1 { color: #0f172a; }
.w20-title p,
.w20-hint,
.w20-note { color: #4b5563; }

.w20-card,
.w20-video-card,
.w20-row,
.w20-detail-box {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  color: #0f172a;
  box-shadow: 0 16px 40px rgba(0,0,0,0.10);
}

.w20-detail-text { color: #0f172a; }
.w20-hr { border-top: 1px solid rgba(0,0,0,0.08); }
.w20-mark{
  background: #ffe08a;
  color: inherit;
  padding: 0 2px;
  border-radius: 4px;
}

.w20-textarea {
  background: #fff;
  color: #0f172a;
  border: 1px solid rgba(0,0,0,0.12);
}

/* Writing task 1.2 typography +3 size */
.w20-page .page-head h1{ font-size: 37px; }
.w20-page .page-sub{ font-size: 18px; }
.w20-page .w20-eyebrow{ font-size: 15px; }
.w20-page .w20-title h2{ font-size: 25px; }
.w20-page .w20-title p{ font-size: 16px; }
.w20-page .w20-card h3{ font-size: 19px; }
.w20-page .w20-card p{ font-size: 16px; }
.w20-page .w20-emoji{ font-size: 31px; }
.w20-page .w20-row h4{ font-size: 18px; }
.w20-page .muted{ font-size: 16.5px; }
.w20-page .w20-detail-text{ font-size: 21px; }
.w20-page .w20-textarea{ font-size: 18px; }
.w20-page .w20-hint{ font-size: 16px; }
.w20-page .w20-note{ font-size: 17px; }
.w20-page .pill-btn,
.w20-page .btn,
.w20-page .back-btn{ font-size: 16px; }

/* Writing task 2 typography +3 size */
.w20-page-2 .page-head h1{ font-size: 37px; }
.w20-page-2 .page-sub{ font-size: 18px; }
.w20-page-2 .w20-eyebrow{ font-size: 15px; }
.w20-page-2 .w20-title h2{ font-size: 25px; }
.w20-page-2 .w20-title p{ font-size: 16px; }
.w20-page-2 .w20-card h3{ font-size: 19px; }
.w20-page-2 .w20-card p{ font-size: 16px; }
.w20-page-2 .w20-emoji{ font-size: 31px; }
.w20-page-2 .w20-row h4{ font-size: 18px; }
.w20-page-2 .muted{ font-size: 16.5px; }
.w20-page-2 .w20-detail-text{ font-size: 21px; }
.w20-page-2 .w20-textarea{ font-size: 18px; }
.w20-page-2 .w20-hint{ font-size: 16px; }
.w20-page-2 .w20-note{ font-size: 17px; }
.w20-page-2 .pill-btn,
.w20-page-2 .btn,
.w20-page-2 .back-btn{ font-size: 16px; }

/* Writing task step pages (w20-page-2) visual cleanup */
body.w20-page-2{
  background:
    radial-gradient(980px 520px at 14% 0%, rgba(16,185,129,.12), transparent 58%),
    radial-gradient(900px 520px at 86% 14%, rgba(59,130,246,.10), transparent 60%),
    linear-gradient(170deg, #f8fcff 0%, #f4fbf7 56%, #eef6ff 100%);
}

.w20-page-2 .w20-hero{
  background: linear-gradient(125deg, rgba(16,185,129,.16), rgba(59,130,246,.12));
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 14px 30px rgba(15,23,42,.12);
}

.w20-page-2 .w20-eyebrow{
  color: #0f766e;
}

.w20-page-2 .w20-detail.single .w20-detail-box{
  min-height: auto;
}

.w20-page-2 .w20-detail-box{
  padding: 18px;
  box-shadow: 0 12px 26px rgba(15,23,42,.08);
}

.w20-page-2 .w20-detail-box ol,
.w20-page-2 .w20-detail-box ul{
  margin: 8px 0 0;
  padding-left: 28px;
}