/* =========================================================
   TURKISH WITH BUSE — PRACTICE (hub, topic lists, workspaces)
   ========================================================= */

/* ---------- skill hub: big colourful cards ---------- */
.hub-title{font-size:1.7rem;font-weight:800;margin:4px 0 18px;}
.hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.hub-card{position:relative;overflow:hidden;display:flex;gap:0;align-items:stretch;text-align:left;padding:0;border:1px solid var(--border);border-radius:26px;background:#fff;min-height:170px;transition:transform .18s,box-shadow .18s;}
.hub-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px -16px color-mix(in srgb,var(--c) 55%,transparent);border-color:color-mix(in srgb,var(--c) 40%,white);}
.hub-art{position:relative;flex:none;width:150px;display:grid;place-items:center;background:linear-gradient(145deg,color-mix(in srgb,var(--c) 82%,white),var(--c));overflow:hidden;}
.hub-art b{position:relative;font-size:4rem;filter:drop-shadow(0 6px 10px rgba(0,0,0,.18));transition:transform .2s;}
.hub-card:hover .hub-art b{transform:scale(1.12) rotate(-6deg);}
.hub-art i{position:absolute;border-radius:50%;background:rgba(255,255,255,.18);}
.hub-art i:nth-child(1){width:120px;height:120px;top:-40px;left:-40px;}
.hub-art i:nth-child(2){width:80px;height:80px;bottom:-24px;right:-20px;}
.hub-txt{display:flex;flex-direction:column;gap:6px;padding:20px 22px;flex:1;min-width:0;}
.hub-card h4{font-size:1.35rem;font-weight:800;margin:0;}
.hub-card p{font-size:.9rem;color:var(--body);line-height:1.45;}
.hub-stat{font-size:.74rem;font-weight:800;color:color-mix(in srgb,var(--c) 75%,black);background:color-mix(in srgb,var(--c) 12%,white);border-radius:20px;padding:4px 10px;align-self:flex-start;}
.hub-cta{margin-top:auto;font-weight:800;font-size:.92rem;color:var(--c);}

/* ---------- topic list: hero + big stacked rows ---------- */
.back-link{border:1px solid var(--border-md);background:#fff;border-radius:30px;padding:8px 16px;font-weight:700;font-size:.88rem;margin-bottom:14px;}
.pb-hero{position:relative;overflow:hidden;display:flex;align-items:center;gap:20px;border-radius:28px;padding:26px 30px;margin-bottom:18px;color:#fff;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 78%,white),var(--c) 60%,color-mix(in srgb,var(--c) 80%,black));min-height:150px;}
.pb-hero::after{content:'';position:absolute;right:120px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.12);}
.pb-emo{font-size:3.4rem;background:rgba(255,255,255,.22);width:92px;height:92px;border-radius:26px;display:grid;place-items:center;flex:none;}
.pb-hero h2{font-size:2rem;font-weight:800;line-height:1.1;}
.pb-hero p{font-size:1rem;opacity:.95;max-width:560px;margin-top:6px;line-height:1.5;}
.pb-hero img{position:relative;z-index:1;height:150px;margin:-10px 0 -26px auto;flex:none;}
.pb-list{display:grid;gap:14px;}
.pb-row{display:flex;align-items:center;gap:18px;width:100%;text-align:left;background:#fff;border:1px solid var(--border);border-radius:24px;padding:18px 22px;transition:transform .15s,box-shadow .15s,border-color .15s;border-left:8px solid var(--c);}
.pb-row:hover{transform:translateX(4px);box-shadow:0 14px 30px -18px rgba(17,24,39,.3);border-color:color-mix(in srgb,var(--c) 45%,white);}
.pb-no{font-size:.8rem;font-weight:800;color:var(--muted);width:20px;flex:none;text-align:center;}
.pb-ico{font-size:2.3rem;width:74px;height:74px;border-radius:22px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--c) 13%,white);}
.pb-txt{flex:1;min-width:0;display:grid;gap:5px;}
.pb-txt h5{font-size:1.25rem;font-weight:800;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.pb-txt h5 em{font-style:normal;font-size:.68rem;color:#fff;border-radius:8px;padding:2px 8px;}
.pb-txt p{font-size:.92rem;color:var(--body);line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.pb-meta{display:flex;gap:6px;flex-wrap:wrap;}
.pb-meta i{font-style:normal;font-size:.72rem;font-weight:700;color:var(--body);background:#F1F5F9;border-radius:20px;padding:3px 10px;}
.pb-meta i.ok{background:#D1FAE5;color:#047857;}
.pb-go{flex:none;font-weight:800;font-size:.92rem;color:#fff;background:var(--c);border-radius:30px;padding:11px 20px;}
.pb-row.locked{opacity:.78;}.pb-row.locked .pb-go{background:#FEF3C7;color:#92400E;}

/* ---------- full-page workspace (writing, speaking, vocabulary, listening) ---------- */
.ws{max-width:1220px;margin:0 auto;padding:18px 22px 60px;}
.ws-top{display:flex;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap;}
.ws-title{display:grid;min-width:0;}
.ws-title span{font-size:1.3rem;font-weight:800;}
.ws-title small{font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;}
.ws-steps{display:flex;gap:6px;flex:1;min-width:120px;}
.ws-steps i{flex:1;max-width:70px;height:8px;border-radius:9px;background:#E5E7EB;}
.ws-steps i.d{background:#F9A8D4;}.ws-steps i.c{background:var(--pink-dark);}
.ws-tabs{display:flex;gap:6px;margin-left:auto;background:#F1F5F9;border-radius:30px;padding:4px;}
.ws-tabs button{border:0;background:none;border-radius:30px;padding:8px 16px;font-weight:800;font-size:.85rem;color:var(--body);}
.ws-tabs button.on{background:#fff;color:var(--pink-dark);box-shadow:0 2px 6px rgba(0,0,0,.08);}
.ws-tabs button:disabled{opacity:.4;}
.ws-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start;}
.ws-main{background:#fff;border:1px solid var(--border);border-radius:28px;padding:30px;box-shadow:0 12px 36px -20px rgba(17,24,39,.2);min-height:480px;}
.ws-q{display:flex;gap:18px;align-items:center;margin-bottom:20px;}
.ws-q>img{height:120px;flex:none;}
.ws-q>div{flex:1;min-width:0;}
.ws-q h1{font-size:clamp(1.45rem,3vw,2rem);font-weight:800;line-height:1.25;margin:4px 0;}
.ws-q p{color:var(--body);font-size:1rem;}
.ws .coach-text{font-size:1.1rem;min-height:150px;border-radius:18px;padding:16px 18px;}
.ws .coach-text:focus{border-color:var(--pink);box-shadow:0 0 0 4px var(--pink-soft);}
.ws .coach-text.shake{animation:wsShake .35s;border-color:#F87171;}
@keyframes wsShake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.ws .coach-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;}
.ws-side{display:grid;gap:14px;position:sticky;top:14px;}
.ws-side .help-body{display:grid;gap:14px;}
.side-card{background:#fff;border:1px solid var(--border);border-radius:22px;padding:16px 18px;}
.side-card.soft{background:#FFFBEB;border-color:#FDE68A;}
.side-card h4,.side-card summary{font-size:.95rem;font-weight:800;margin-bottom:8px;cursor:default;}
.side-card summary{cursor:pointer;margin:0;}
.side-card p{font-size:.9rem;color:var(--body);line-height:1.55;}
.side-hint{font-size:.78rem!important;color:var(--muted)!important;margin-bottom:8px;}
.side-chip{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;border:1px solid var(--border-md);background:#F8FAFC;border-radius:14px;padding:8px 12px;font-size:.9rem;text-align:left;transition:all .12s;}
.side-chip:hover{border-color:var(--pink);background:var(--pink-soft);}
.side-chip.wide{display:flex;width:100%;margin-top:6px;font-weight:700;}
.side-chip small{font-size:.74rem;color:var(--muted);}
.side-words{display:flex;flex-wrap:wrap;gap:6px;}
.side-words.one .side-chip{width:100%;}
.side-sample{font-weight:600!important;color:var(--dark)!important;margin-top:10px;}
.side-q{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;border:0;background:none;padding:7px 4px;border-radius:10px;font-size:.86rem;color:var(--body);}
.side-q:hover{background:#F8FAFC;}
.side-q b{flex:none;width:22px;height:22px;border-radius:50%;background:#E5E7EB;font-size:.72rem;display:grid;place-items:center;}
.side-q.ok b{background:#A7F3D0;color:#065F46;}.side-q.on{background:var(--pink-soft);color:var(--dark);font-weight:700;}.side-q.on b{background:var(--pink-dark);color:#fff;}
.side-bar{height:10px;border-radius:9px;background:#F1F5F9;overflow:hidden;margin-bottom:6px;}
.side-bar i{display:block;height:100%;background:linear-gradient(90deg,#34D399,#10B981);border-radius:9px;}
.side-list{display:grid;gap:4px;max-height:420px;overflow:auto;}
.side-list button{display:flex;gap:8px;align-items:baseline;border:0;background:none;text-align:left;padding:6px 6px;border-radius:10px;font-size:.9rem;}
.side-list button:hover{background:#F8FAFC;}
.side-list button.ok b{color:#047857;}
.side-list small{color:var(--muted);margin-left:auto;text-align:right;}
.rec-box.big{padding:26px;border-radius:22px;}

/* ---------- vocabulary ---------- */
.vc-main{display:flex;flex-direction:column;}
.vc-count{font-size:.8rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;}
.vc-card{position:relative;width:100%;max-width:520px;height:300px;margin:0 auto;border:0;background:none;perspective:1200px;}
.vc-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border-radius:28px;backface-visibility:hidden;transition:transform .45s;border:2px solid #FBCFE8;background:linear-gradient(160deg,#fff,#FDF2F8);box-shadow:0 18px 40px -22px rgba(219,39,119,.5);}
.vc-face.back{transform:rotateY(180deg);background:linear-gradient(160deg,#fff,#EFF6FF);border-color:#BFDBFE;}
.vc-card.flip .front{transform:rotateY(180deg);}.vc-card.flip .back{transform:rotateY(360deg);}
.vc-face em{font-style:normal;font-size:4.2rem;line-height:1;}
.vc-face b{font-size:clamp(1.8rem,5vw,2.6rem);font-weight:800;padding:0 16px;text-align:center;}
.vc-face small{color:var(--muted);font-weight:600;}
.vc-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:22px;}
.vc-actions.center{justify-content:center;}
.vc-btn{border:0;border-radius:30px;padding:13px 22px;font-weight:800;font-size:.95rem;}
.vc-btn.no{background:#FEF3C7;color:#92400E;}.vc-btn.yes{background:#10B981;color:#fff;box-shadow:0 6px 16px -6px #10B981;}
.vc-done{text-align:center;padding:20px 0;}.vc-done img{height:170px;}.vc-done h2{font-size:1.7rem;font-weight:800;margin:10px 0 6px;}.vc-done p{color:var(--body);}
.vc-qprompt{text-align:center;display:grid;gap:6px;justify-items:center;margin:14px 0 22px;}
.vc-qprompt b{font-size:clamp(1.8rem,5vw,2.6rem);font-weight:800;}.vc-qprompt small{color:var(--muted);font-weight:700;}
.vc-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.vc-opts.col{grid-template-columns:1fr;}
.vc-opts button{border:2px solid var(--border-md);background:#fff;border-radius:18px;padding:16px;font-size:1.05rem;font-weight:700;text-align:left;transition:all .12s;}
.vc-opts button:hover{border-color:var(--pink);}
.vc-opts button.sel{border-color:var(--pink-dark);background:var(--pink-soft);}
.vc-opts button.ok{border-color:#10B981;background:#ECFDF5;color:#065F46;}
.vc-opts button.no{border-color:#F87171;background:#FEF2F2;color:#991B1B;}
.vc-opts button.dim{opacity:.5;}
.vc-fb{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px;border-radius:18px;padding:14px 18px;font-weight:700;}
.vc-fb.ok{background:#ECFDF5;color:#065F46;}.vc-fb.no{background:#FEF2F2;color:#991B1B;}
.lx-listen{display:inline-flex;align-items:center;gap:12px;border:2px solid #FBCFE8;background:#FFF7FB;border-radius:18px;padding:14px 22px;font-weight:800;font-size:1.2rem;}
.lx-why{margin-top:10px;background:#FFF1F2;border:1px solid #FECDD3;border-radius:14px;padding:10px 14px;font-size:.9rem;line-height:1.5;color:#7F1D1D;}
.lx-why.ok{background:#ECFDF5;border-color:#A7F3D0;color:#065F46;}

/* ---------- listening ---------- */
.ls-stage{text-align:center;padding:10px 0;}
.ls-people{display:flex;align-items:center;justify-content:center;gap:26px;margin-bottom:22px;}
.ls-sp{display:grid;justify-items:center;gap:6px;transition:transform .2s;opacity:.6;}
.ls-sp span{font-size:3.2rem;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 14%,white);border:4px solid transparent;}
.ls-sp.on{opacity:1;transform:scale(1.08);}.ls-sp.on span{border-color:var(--c);box-shadow:0 0 0 8px color-mix(in srgb,var(--c) 18%,transparent);}
.ls-wave{display:flex;gap:5px;align-items:center;height:50px;}
.ls-wave i{width:6px;height:12px;border-radius:6px;background:#E5E7EB;}
.ls-wave.on i{background:var(--pink);animation:lsWave .8s ease-in-out infinite;}
.ls-wave.on i:nth-child(2){animation-delay:.1s}.ls-wave.on i:nth-child(3){animation-delay:.2s}.ls-wave.on i:nth-child(4){animation-delay:.3s}.ls-wave.on i:nth-child(5){animation-delay:.4s}
@keyframes lsWave{50%{height:44px}}
.ls-play{width:104px;height:104px;border-radius:50%;border:0;font-size:2.2rem;color:#fff;background:linear-gradient(135deg,var(--pink),var(--pink-dark));box-shadow:0 14px 30px -10px rgba(219,39,119,.7);transition:transform .15s;}
.ls-play:hover{transform:scale(1.06);}.ls-play.on{background:linear-gradient(135deg,#64748B,#334155);box-shadow:none;}
.ls-hint{color:var(--body);font-weight:600;margin:16px 0 12px;}
.ls-bar{height:8px;border-radius:9px;background:#F1F5F9;overflow:hidden;max-width:420px;margin:0 auto 6px;}
.ls-bar i{display:block;height:100%;background:var(--pink);transition:width .3s;}
.ls-qs{display:grid;gap:22px;}
.ls-q h4{display:flex;gap:10px;align-items:flex-start;font-size:1.1rem;font-weight:800;margin-bottom:10px;}
.ls-q h4 span{flex:none;width:28px;height:28px;border-radius:50%;background:var(--pink-soft);color:var(--pink-dark);display:grid;place-items:center;font-size:.85rem;}
.ls-score{font-size:1.3rem;}
.ls-text{display:grid;gap:10px;}
.ls-line{display:grid;gap:2px;max-width:82%;text-align:left;border:0;border-radius:18px 18px 18px 6px;padding:11px 16px;background:color-mix(in srgb,var(--c) 9%,white);justify-self:start;}
.ls-line.r{justify-self:end;border-radius:18px 18px 6px 18px;}
.ls-line.on{outline:3px solid color-mix(in srgb,var(--c) 45%,white);}
.ls-line small{font-size:.7rem;font-weight:800;color:var(--c);text-transform:uppercase;}
.ls-line b{font-size:1.02rem;font-weight:700;}.ls-line em{font-style:normal;color:var(--muted);font-size:.88rem;}

@media(max-width:900px){
  .hub-grid{grid-template-columns:1fr;}
  .ws-grid{grid-template-columns:1fr;}.ws-side{position:static;}
  .pb-hero img{display:none;}
}
@media(max-width:640px){
  .hub-card{min-height:0;}.hub-art{width:96px;}.hub-art b{font-size:2.7rem;}.hub-txt{padding:16px;}.hub-card h4{font-size:1.15rem;}
  .pb-hero{padding:20px;gap:14px;}.pb-hero h2{font-size:1.5rem;}.pb-emo{width:64px;height:64px;font-size:2.2rem;border-radius:18px;}
  .pb-row{padding:14px;gap:12px;flex-wrap:wrap;border-left-width:6px;}.pb-no{display:none;}.pb-ico{width:56px;height:56px;font-size:1.8rem;border-radius:16px;}
  .pb-txt h5{font-size:1.08rem;}.pb-go{width:100%;text-align:center;}
  .ws{padding:12px 12px 90px;}.ws-main{padding:18px;border-radius:22px;min-height:0;}
  .ws-q>img{height:74px;}.ws-q{gap:12px;}.ws-steps{order:3;flex-basis:100%;}.ws-tabs{margin-left:0;order:3;}
  .vc-card{height:240px;}.vc-opts{grid-template-columns:1fr;}.ls-sp span{width:76px;height:76px;font-size:2.3rem;}.ls-people{gap:12px;}
  .ls-line{max-width:94%;}
}

/* ---------- More practice: Pronunciation · Dictation · Business · Exam (js/practice-more.js) ---------- */
.mo{display:grid;gap:14px;align-content:start}
.mo-card{background:#fff;border:1px solid var(--border,#EEE);border-radius:20px;padding:18px 20px;box-shadow:0 10px 30px -24px rgba(0,0,0,.35)}
.mo-intro{font-size:1rem;line-height:1.65;color:#374151;margin:0}
.mo-tips{margin:10px 0 0;padding-left:18px;display:grid;gap:6px;color:#4B5563;font-size:.92rem;line-height:1.5}
.mo-h{font-size:1rem;font-weight:800;margin:6px 0 0}
.mo-step{font-size:.82rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#9CA3AF;margin:0}
.mo-spk{width:34px;height:34px;flex:none;border-radius:50%;border:1px solid #E5E7EB;background:#fff;cursor:pointer;font-size:.95rem}
.mo-spk:hover{background:#ECFEFF;border-color:#67E8F9}
.mo-pairs{display:grid;gap:10px}
.mo-pair{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;background:#fff;border:1px solid #EEF2F7;border-radius:18px;padding:12px 14px}
.mo-pair>div{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
.mo-pair b{font-size:1.15rem}.mo-pair small{grid-column:2;color:#6B7280;font-size:.82rem}
.mo-pair em{grid-column:1/-1;font-size:.8rem;color:#0E7490;font-style:normal;margin-top:4px}
.mo-pair>span{font-weight:800;color:#CBD5E1;font-size:.8rem}
.mo-q{display:grid;gap:14px;justify-items:center;text-align:center;background:#fff;border-radius:22px;padding:22px;border:1px solid #EEF2F7}
.mo-q h3{font-size:1.25rem;font-weight:800;margin:0;line-height:1.4}
.mo-q .vc-opts{width:100%}
.mo-q .vc-opts button{display:grid;gap:2px}.mo-q .vc-opts small{font-weight:500;color:#6B7280;font-size:.8rem}
.mo-en{color:#6B7280;margin:-6px 0 0;font-size:.92rem}
.mo-done{text-align:center;background:linear-gradient(135deg,#ECFEFF,#F0FDF4);border-radius:22px;padding:26px 18px}
.mo-done b{font-size:2.6rem;font-weight:800;color:#0F766E}.mo-done p{margin:6px 0 12px;color:#374151}
.mo-say{display:grid;gap:10px}
.mo-sayrow{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #EEF2F7;border-radius:18px;padding:12px 14px}
.mo-sayrow>div{flex:1;display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
.mo-sayrow b{font-size:1.1rem}.mo-sayrow small{grid-column:2;color:#6B7280;font-size:.82rem}
.mo-sayrow em{grid-column:1/-1;font-style:normal;font-size:.85rem;margin-top:6px;font-weight:700}
.mo-sayrow.ok{border-color:#86EFAC;background:#F0FDF4}.mo-sayrow.ok em{color:#15803D}
.mo-sayrow.no{border-color:#FDBA74;background:#FFF7ED}.mo-sayrow.no em{color:#C2410C}
.mo-mic{width:52px;height:52px;border-radius:50%;border:0;background:#06B6D4;color:#fff;font-size:1.3rem;cursor:pointer;box-shadow:0 8px 18px -10px #06B6D4}
.mo-mic.on{background:#EF4444;animation:moPulse 1s ease-in-out infinite}
@keyframes moPulse{50%{transform:scale(1.08)}}
.mo-card.twister .tw{font-size:1.15rem;font-weight:700;line-height:1.5;margin:6px 0}
.mo-card.twister small{display:block;color:#6B7280}.mo-card.twister .note{font-style:italic;margin-top:4px}
.mo-lbl{font-size:.8rem;color:#6B7280;margin-right:8px}
.mo-dplay{display:flex;align-items:center;justify-content:center;gap:16px}
.mo-in{width:100%;border:2px solid #D9F99D;border-radius:18px;padding:14px 16px;font-size:1.15rem;line-height:1.5;font-family:inherit;resize:vertical;outline:none;background:#fff}
.mo-in:focus{border-color:#65A30D}
.mo-keys{display:flex;flex-wrap:wrap;gap:6px}
.mo-keys button{width:38px;height:38px;border-radius:10px;border:1px solid #E5E7EB;background:#fff;font-weight:700;cursor:pointer}
.mo-diff{margin:8px 0;line-height:2;font-size:1.05rem}
.dw{padding:2px 6px;border-radius:7px;font-weight:700}
.dw.ok{background:#DCFCE7;color:#166534}.dw.half{background:#FFEDD5;color:#C2410C}
.dw.miss{background:#FEE2E2;color:#B91C1C;text-decoration:underline dotted}.dw.extra{background:#F3F4F6;color:#6B7280;text-decoration:line-through}
.mo-review{display:grid;gap:8px}
.mo-rv{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #EEF2F7;border-radius:16px;padding:10px 14px;text-decoration:none;color:inherit}
.mo-rv>div{flex:1;display:grid}.mo-rv small{color:#6B7280;font-size:.84rem}.mo-rv>i{font-style:normal;font-weight:800;color:#0F766E}
.mo-rv.link:hover{border-color:#FDBA74}.mo-ico{font-size:1.4rem}
.mo-phr{display:grid;gap:8px}
.mo-ph{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid #EEF2F7;border-radius:16px;padding:12px 14px}
.mo-ph>div{display:grid;gap:2px}.mo-ph b{font-size:1.05rem}.mo-ph small{color:#4B5563}.mo-ph em{font-size:.82rem;color:#64748B;font-style:normal}
.mo-exbar{display:flex;justify-content:space-between;font-weight:800;color:#374151}
.mo-time b{font-variant-numeric:tabular-nums}
.mo-dots{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.mo-dots button{width:32px;height:32px;border-radius:10px;border:1px solid #E5E7EB;background:#fff;font-weight:700;font-size:.8rem;cursor:pointer}
.mo-dots button.d{background:#FFEDD5;border-color:#FDBA74}.mo-dots button.c{background:#EA580C;color:#fff;border-color:#EA580C}
@media(max-width:640px){.mo-pair{grid-template-columns:1fr;}.mo-pair>span{display:none}.mo-q{padding:16px}}