/* ===== v40 · one look for the whole app ===== */
:root{--u-blue:#2a63e8;--u-violet:#6a44e6;--u-purple:#a855f7;--u-mint:#2BB39B;--u-gold:#F2A900;--u-ink:#1b2a44;--u-muted:#6b7a92;--u-line:#e3e9f4;--u-soft:#eef3ff;
 --u-grad:linear-gradient(135deg,#2a63e8 0%,#6a44e6 100%);--u-grad2:linear-gradient(135deg,#2a63e8 0%,#6a44e6 60%,#a855f7 100%);--u-shadow:0 8px 22px rgba(27,42,68,.08);--u-r:22px}

/* headings in the logo font */
#main h1,#main h2,#main .h,#main h3,.modal h2,.modal h3,.pwall h2{font-family:"SU Pop",system-ui,sans-serif;letter-spacing:-.01em}
#main h2,#main .h{font-weight:700}

/* cards */
#main .card{border-radius:var(--u-r);border:1px solid var(--u-line);box-shadow:var(--u-shadow)}

/* buttons: one family */
.btn{border-radius:999px!important;font-weight:700;letter-spacing:.01em;transition:transform .12s,box-shadow .2s,filter .2s}
.btn:not(.ghost):not(.danger):not(.prem):not(.pbtn):not(.pcb):not(.pw-cta){background:var(--u-grad)!important;color:#fff!important;border:0!important;box-shadow:0 6px 16px rgba(42,99,232,.25)!important}
.btn:not(.ghost):not(.danger):not(.prem) svg{color:#fff}
.btn.ghost{background:#fff!important;color:var(--u-blue)!important;border:0!important;box-shadow:inset 0 0 0 1.5px #d6e1f5!important}
.btn.ghost:hover{background:var(--u-soft)!important}
.btn.ghost.danger,.btn.danger{background:#fff!important;color:#d43b3b!important;box-shadow:inset 0 0 0 1.5px #f3cccc!important;border:0!important}
.btn.prem{background:linear-gradient(135deg,#ffd65c,#F2A900)!important;color:#1b2a44!important;border:0!important;box-shadow:0 6px 16px rgba(242,169,0,.3)!important}
.btn.prem svg{color:#1b2a44!important}
.btn:active:not(:disabled){transform:scale(.97)}
.btn:disabled{opacity:.45!important;box-shadow:none!important;cursor:not-allowed}
.btn.big{min-height:48px;font-size:1rem}
/* games: the Play button like every other button */
.gc .btn.big.grow:not(.prem){background:var(--u-grad)!important}

/* small round icon buttons */
.ic{border-radius:50%!important;background:var(--u-soft)!important;color:var(--u-blue)!important;border:0!important;box-shadow:none!important}
.ic:hover{background:#e1eaff!important}
header.top .ic,.nav .ic,.pbtn .ic{background:none!important}
.ic.sm{width:32px;height:32px}

/* pills, tabs and chips */
.pill{border-radius:999px!important;font-weight:700}
.pill.ok{background:#e6f7f2!important;color:#13866f!important}
.tabs{background:#f1f5fc!important;border-radius:999px!important;padding:4px!important;border:0!important}
.tabs button{border-radius:999px!important;border:0!important;background:none!important;color:var(--u-muted)!important;font-weight:700}
.tabs button.on{background:#fff!important;color:var(--u-blue)!important;box-shadow:0 4px 12px rgba(27,42,68,.1)!important}

/* tags: the app colours only */
.tg{border-radius:999px!important;font-weight:700;border:0!important;color:#fff!important}
.tg.c0,.tg.c5,.tg.c10,.tg.c15{background:linear-gradient(135deg,#2a63e8,#4f7df0)!important}
.tg.c1,.tg.c6,.tg.c11,.tg.c16{background:linear-gradient(135deg,#6a44e6,#8a6af0)!important}
.tg.c2,.tg.c7,.tg.c12,.tg.c17{background:linear-gradient(135deg,#13866f,#2BB39B)!important}
.tg.c3,.tg.c8,.tg.c13,.tg.c18{background:linear-gradient(135deg,#a855f7,#c084fc)!important}
.tg.c4,.tg.c9,.tg.c14,.tg.c19{background:linear-gradient(135deg,#1f3a8a,#2a63e8)!important}
.tg em{background:rgba(255,255,255,.22)!important;color:#fff!important;border-radius:999px}

/* inputs */
.fi,#main input[type=text],#main input:not([type]),#main textarea,#main select{border-radius:14px!important;border:1.5px solid var(--u-line)!important;background:#fff}
.fi:focus,#main input:focus,#main textarea:focus,#main select:focus{border-color:var(--u-blue)!important;box-shadow:0 0 0 4px rgba(42,99,232,.12)!important;outline:none}

/* quiz answers */
.opt{background:#fff!important;border:1.5px solid var(--u-line)!important;border-radius:16px!important;color:var(--u-ink)!important;font-weight:600;box-shadow:0 2px 6px rgba(27,42,68,.04)}
.opt:hover{border-color:#b9cbf4!important;background:#f8faff!important}
.opt.sel{border-color:var(--u-blue)!important;background:var(--u-soft)!important;box-shadow:0 0 0 3px rgba(42,99,232,.12)!important}
.opt.good{border-color:var(--u-mint)!important;background:#e9f8f3!important}.opt.bad{border-color:#e36b6b!important;background:#fdeeee!important}
.ch{border-radius:999px!important;background:#fff!important;border:1.5px solid var(--u-line)!important;color:var(--u-ink)!important;font-weight:700}
.ch.on{background:var(--u-grad)!important;color:#fff!important;border-color:transparent!important}
.quiz .bar,.qbar,.bar{background:#edf1f8!important;border-radius:99px!important;overflow:hidden}
.quiz .bar i,.qbar i,.bar i{background:var(--u-grad2)!important;border-radius:99px}

/* lists of lessons and tenses */
#main .les:not(.lsart .les){background:#fff!important;border:1.5px solid var(--u-line)!important;border-radius:16px!important}
#main .les:not(.lsart .les):hover:not(:disabled){border-color:var(--u-blue)!important}
#main .les.done:not(.lsart .les){background:#f0fbf7!important;border-color:#a8e3d2!important}
.gt-b{background:#fff!important;color:var(--u-ink)!important;border:1.5px solid var(--u-line)!important;border-radius:16px!important;box-shadow:none!important}
.gt-b:hover{border-color:var(--u-blue)!important}
/* the word of the day meanings */
.flmean{background:#f4f7fd!important}.flmean i{background:var(--u-grad)!important;color:#fff!important}

/* menus and windows */
.modal .card,.modal>div{border-radius:24px}
.menu button,.mnu button,.drawer button{border-radius:14px}
.menu button:hover,.mnu button:hover,.drawer button:hover{background:var(--u-soft)}
.toast{border-radius:16px!important}

/* ---------- the plans page: nothing hidden under the button ---------- */
.pw38 .pw-body{padding-bottom:120px!important}
.pw38 .pcs38{margin-bottom:12px}
.pw38 .pw-card{max-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}

/* ---------- real life English: well hidden behind the wall ---------- */
.fl39lk .fl39c{filter:blur(7px) saturate(.9);opacity:.75}
.fl39w{background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(238,243,255,.75))!important;-webkit-backdrop-filter:blur(4px)!important;backdrop-filter:blur(4px)!important}

/* ---------- picture backgrounds: soft edges all around ---------- */
.scn-pic40{display:flex;flex-direction:column}
.scn-pic40 .scn-pici{display:flex;justify-content:center;line-height:0;margin-top:auto}
.scn-pic40 .scn-pici img{width:min(68%,280px);height:auto;display:block;
 -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 55%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 55%,#000 58%,transparent 100%)}

/* ---------- the quote of the day: app colours only ---------- */
.qt-brc{background:linear-gradient(160deg,#8a6af0,#6a44e6)!important}
.qt-brc .qbox{color:#6a44e6!important}.qt-brc .qk{color:#e9e2ff!important}
.qt-bub{background:linear-gradient(160deg,#ffe07a,#F2A900)!important}
.qt-frm .qin{background:linear-gradient(160deg,#2BB39B,#13866f)!important}
.qt-dpa{background:linear-gradient(160deg,#6a44e6,#a855f7)!important}.qt-dpa .qpan{background:#fff4cc!important;color:#4a2fb0!important}
.qt-dpb{background:linear-gradient(160deg,#1f3a8a,#2a63e8)!important}.qt-dpb .qpan{background:#d7f5ec!important;color:#0f4f43!important}

/* ---------- everyday English in the feed ---------- */
.fli.inf{background:linear-gradient(135deg,#a855f7,#6a44e6)!important;color:#fff}
.inf40{display:flex;flex-direction:column;gap:10px;margin:12px 0 8px}
.inf40 .ib{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:18px;max-width:92%}
.inf40 .ib.q{background:var(--u-soft);align-self:flex-start;border-bottom-left-radius:6px}
.inf40 .ib.a{background:linear-gradient(135deg,#f3eeff,#ece4ff);align-self:flex-end;border-bottom-right-radius:6px}
.inf40 .iw{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.8rem;color:#fff;background:var(--u-blue)}
.inf40 .ib.a .iw{background:var(--u-violet)}
.inf40 b{font-size:1.02rem}

/* ---------- the speaking quiz ---------- */
.spq40c .spq40st{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 14px}
.spqb .spst{align-self:flex-start}.spqb.c .spst,.spqli .spst{align-self:auto}
.spst{display:inline-flex;align-items:center;border-radius:999px;padding:4px 10px;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.spst.easy{background:#e6f7f2;color:#13866f}.spst.medium{background:#e7eefc;color:#2a63e8}.spst.hard{background:#efe9ff;color:#6a44e6}.spst.dialogue{background:#fff4d6;color:#8a5a00}
#spq40{position:fixed;inset:0;z-index:9000;background:#f5f8ff;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}
.spqh{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#fff;border-bottom:1px solid var(--u-line);position:sticky;top:0;z-index:2}
.spqh b{display:flex;align-items:center;gap:6px;font-family:"SU Pop",system-ui,sans-serif}
.spqb{width:100%;max-width:560px;margin:0 auto;padding:18px 16px 40px;box-sizing:border-box;display:flex;flex-direction:column;gap:12px}
.spqb.c{align-items:center;text-align:center}
.spqhint{margin:0;color:var(--u-muted);font-weight:600}
.spqt{background:#fff;border:1px solid var(--u-line);border-radius:22px;padding:22px 16px;text-align:center;font-family:"SU Pop",system-ui,sans-serif;font-weight:700;font-size:clamp(1.3rem,5.5vw,1.9rem);line-height:1.35;color:var(--u-ink);box-shadow:var(--u-shadow)}
.spqt.hid{color:var(--u-muted);font-size:1.05rem}
.spqt span.ok{color:#13866f}.spqt span.no{color:#d43b3b;text-decoration:underline wavy rgba(212,59,59,.5)}
.spqcue{display:flex;align-items:center;gap:10px;background:#fff4d6;border-radius:18px;padding:10px 14px}
.spqcue p{margin:0;flex:1;font-weight:600}.spqw{font-weight:800;color:#8a5a00}
.spqmic{width:96px;height:96px;border-radius:50%;border:0;margin:6px auto 0;display:grid;place-items:center;cursor:pointer;background:var(--u-grad2);color:#fff;box-shadow:0 14px 30px rgba(106,68,230,.35);transition:transform .15s}
.spqmic svg{width:40px;height:40px}.spqmic:active{transform:scale(.95)}.spqmic:disabled{opacity:.4}
.spqmic.on{background:linear-gradient(135deg,#ff8a3d,#F2A900);animation:spq40p 1s infinite}
@keyframes spq40p{50%{transform:scale(1.08);box-shadow:0 0 0 14px rgba(242,169,0,.18)}}
.spqmsg{text-align:center;margin:0;color:var(--u-muted);font-weight:600;min-height:1.4em}
.spqres{display:flex;gap:14px;align-items:center;border-radius:18px;padding:14px;background:#fff;border:1.5px solid var(--u-line)}
.spqres.good{border-color:#a8e3d2;background:#f0fbf7}.spqres.mid{border-color:#c9d8f8;background:#f6f9ff}.spqres.bad{border-color:#f3cccc;background:#fff6f6}
.spqres p{margin:4px 0 0}.spqpct{font-family:"SU Pop",system-ui,sans-serif;font-weight:700;font-size:1.8rem;color:var(--u-blue);min-width:72px;text-align:center}
.spqres.good .spqpct{color:#13866f}.spqres.bad .spqpct{color:#d43b3b}
.spqnav{margin-top:4px}
.spqbig{font-family:"SU Pop",system-ui,sans-serif;font-weight:700;font-size:3.4rem;width:140px;height:140px;border-radius:50%;display:grid;place-items:center;margin:10px auto 0;color:#fff;background:var(--u-grad2);box-shadow:0 16px 34px rgba(106,68,230,.3)}
.spqbig.bad{background:linear-gradient(135deg,#ff8a3d,#F2A900)}
.spqlist{width:100%;display:flex;flex-direction:column;gap:6px;text-align:left}
.spqli{display:flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--u-line);border-radius:14px;padding:8px 10px;font-size:.9rem}
.spqli b.ok{color:#13866f}.spqli b.no{color:#d43b3b}
.spqsum{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;color:var(--u-muted)}.spqsum span{display:inline-flex;gap:4px;align-items:center}

/* ---------- tag chat ---------- */
.tc40 .tch{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.tci{flex:none;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:#fff;background:var(--u-grad2)}
.tch b{font-family:"SU Pop",system-ui,sans-serif;font-size:1.1rem}
.tcl{height:min(56vh,420px);overflow-y:auto;background:#f7f9fd;border:1px solid var(--u-line);border-radius:18px;padding:10px 12px;-webkit-overflow-scrolling:touch}
.tcm{position:relative;padding:6px 8px;border-radius:12px;line-height:1.5;font-size:.95rem;word-wrap:break-word}
.tcm:nth-child(even){background:rgba(255,255,255,.6)}
.tcm.me{background:#eef3ff}.tcm.tome{background:#fff7e0;box-shadow:inset 3px 0 0 #F2A900}.tcm.hid{opacity:.55}
.tcn{font-weight:800;cursor:pointer;-webkit-tap-highlight-color:transparent}.tcn:hover{text-decoration:underline}
.tcb{color:var(--u-ink)}
.tcm time{font-size:.7rem;color:#9aa6ba;margin-left:6px;white-space:nowrap}
.tcre{display:flex;gap:4px;align-items:center;font-size:.78rem;color:var(--u-muted);margin:0 0 2px;padding-left:8px;border-left:3px solid #d6e1f5;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tcre svg{width:13px;height:13px;flex:none}
.tchid{font-size:.7rem;color:#d43b3b;margin-left:6px}
.tcrep{display:flex;gap:6px;align-items:center;margin:8px 0 0;padding:8px 10px;border-radius:12px;background:var(--u-soft);font-size:.85rem;overflow:hidden}
.tcrep .muted{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tcf{display:flex;gap:8px;margin:10px 0 6px}.tcf .btn{flex:none;width:48px;padding:0!important;justify-content:center}
.tcban{background:#fff4d6;color:#8a5a00;border-radius:12px;padding:8px 10px;font-size:.85rem;margin:8px 0 0}
.tcmm{display:flex;flex-direction:column;gap:4px;margin:4px 0 8px;padding:6px;background:#fff;border:1px solid var(--u-line);border-radius:14px;box-shadow:0 10px 24px rgba(27,42,68,.14)}
.tcmm button{display:flex;gap:8px;align-items:center;border:0;background:none;padding:8px 10px;border-radius:10px;font:inherit;font-weight:600;text-align:left;cursor:pointer;color:var(--u-ink)}
.tcmm button:hover{background:var(--u-soft)}.tcmm button svg{width:16px;height:16px}
.tc40 [hidden]{display:none!important}
.tc40 .tcm{display:block!important}
.tc40 .tcre{display:flex!important;width:100%;box-sizing:border-box}
.tc40 #tcin{font-size:16px!important;text-align:left!important;padding:12px 14px!important;font-weight:500!important;min-height:0!important;height:48px}
/* every text box: the same size and alignment */
#main .fi,.modal .fi{font-size:16px!important;text-align:left!important;font-weight:500!important}

/* ---------- note and paper backgrounds: the words sit on the paper ---------- */
.scn.scn-note40{position:relative;padding:0!important;display:block;min-height:0;max-height:none}
.scn-note40 .scn-np{position:absolute;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:4%;box-sizing:border-box}
.scn-note40 .scn-txt{padding:0!important;min-height:0!important;width:100%;text-align:center;color:var(--ink)}
.scn-note40 .scn-txt p{margin:0;color:var(--ink)}
.scn-note40 .scn-txt.t-s p{font-size:clamp(1.25rem,6.5vw,2rem)}.scn-note40 .scn-txt.t-m p{font-size:clamp(1.05rem,4.8vw,1.45rem)}.scn-note40 .scn-txt.t-l p{font-size:clamp(.9rem,3.8vw,1.15rem)}
/* ---------- funny characters: the words above, the character at the bottom ---------- */
.scn.scn-chr40{display:flex;flex-direction:column;padding:0!important}
.scn-chr40 .scn-txt{padding:22px 22px 8px!important;min-height:0!important}
.scn-chr40 .scn-chri{display:flex;line-height:0;margin-top:auto}
.scn-chr40 .scn-chri.left{justify-content:flex-start}.scn-chr40 .scn-chri.right{justify-content:flex-end}.scn-chr40 .scn-chri.center{justify-content:center}
.scn-chr40 .scn-chri img{width:min(62%,260px);height:auto;display:block}
/* the logo reads Speak + Up in every language, also right-to-left */
.sulogo{direction:ltr!important;unicode-bidi:isolate}