/* English Learning Engine — Cambridge tests (v2.7.0) · kid-friendly, picture-rich */
.elct,.elct-pop,.elct-modal,.elct-toast,.elct-confetti{
  --c-brand:#0b9fc2;--c-brand-d:#07708c;--c-brand-l:#e6f7fb;
  --c-sun:#ffc93c;--c-sun-l:#fff6d6;--c-coral:#ff7a59;--c-grass:#22a06b;--c-grass-l:#e5f7ee;--c-grape:#7c5cff;--c-grape-l:#f0ecff;
  --c-ink:#14303f;--c-ink-2:#4d6573;--c-line:#d9e6ec;--c-soft:#f4fafc;
  --c-ok:#15803d;--c-ok-bg:#e8f8ee;--c-bad:#c52f4b;--c-bad-bg:#fff0f3;--c-warn:#b45309;
  --r:18px;--font:"Nunito","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif}
.elct{max-width:1040px;margin:24px auto;padding:0 16px;font-family:var(--font);color:var(--c-ink);line-height:1.6;font-size:17px;box-sizing:border-box}
.elct *,.elct *::before,.elct *::after{box-sizing:border-box}
.elct h2,.elct h3,.elct h4{font-family:var(--font);color:var(--c-ink);letter-spacing:0}
.elct h2{font-size:1.7rem;line-height:1.25;margin:.2em 0 .4em;font-weight:800}
.elct h3{font-size:1.2rem;margin:1.2em 0 .5em;font-weight:800}
.elct h4{margin:.8em 0 .4em;font-weight:800}
.elct img{max-width:100%}
.elct-ico{width:1.4em;height:1.4em;vertical-align:-.3em;display:inline-block}
.elct-muted{color:var(--c-ink-2)}
.elct .small{font-size:.85rem}
.elct-kicker{text-transform:uppercase;letter-spacing:.06em;font-size:.78rem;font-weight:800;color:var(--c-brand-d);margin:0}
.elct-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:16px 0}
.elct-row.end{justify-content:flex-end}.elct-row.center{justify-content:center}.elct-row.between{justify-content:space-between}

/* buttons */
.elct-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:10px 20px;border-radius:999px;border:2px solid var(--c-brand);background:#fff;color:var(--c-brand-d);font:inherit;font-family:var(--font);font-weight:800;text-decoration:none!important;cursor:pointer;transition:background .15s,transform .1s,box-shadow .15s;line-height:1.2}
.elct-btn:hover{background:var(--c-brand-l)}
.elct-btn:active{transform:translateY(2px)}
.elct-btn.primary{background:var(--c-brand);color:#fff;box-shadow:0 4px 0 var(--c-brand-d)}
.elct-btn.primary:hover{background:#0aa9cf}
.elct-btn.primary:active{box-shadow:0 1px 0 var(--c-brand-d)}
.elct-btn.ghost{border-color:var(--c-line);color:var(--c-ink);background:#fff}
.elct-btn.sm{min-height:38px;padding:6px 14px;font-size:.88rem;box-shadow:none}
.elct-btn.lg{min-height:56px;padding:12px 32px;font-size:1.15rem}
.elct-btn[disabled]{opacity:.5;cursor:not-allowed}
.elct-btn:focus-visible,.elct-opt:focus-visible,.elct-tile:focus-visible,.elct-swatch:focus-visible,.elct-w:focus-visible,.elct-tab:focus-visible,.elct-part-tab:focus-visible,.elct-chip-word:focus-visible,.elct-flag:focus-visible,.elct-pal-q:focus-visible{outline:3px solid var(--c-sun);outline-offset:2px}
.elct-icon-btn{display:inline-grid;place-items:center;border:0;background:var(--c-brand-l);border-radius:50%;width:42px;height:42px;cursor:pointer;padding:0}
.elct-icon-btn img{width:24px;height:24px}

/* hub hero + account */
.elct-hero{display:flex;align-items:center;gap:18px;padding:22px 24px;border-radius:24px;background:linear-gradient(135deg,#e7f8fc 0%,#fff7da 100%);border:1px solid #cfeaf2;margin-bottom:16px}
.elct-hero h2{margin:0 0 4px}
.elct-hero p{margin:0;color:var(--c-ink-2)}
.elct-hero-mascot{width:88px;height:88px;flex:0 0 auto;animation:elct-bob 3s ease-in-out infinite}
@keyframes elct-bob{50%{transform:translateY(-6px) rotate(-3deg)}}
.elct-account{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 16px;border-radius:var(--r);background:#fff;border:1px solid var(--c-line);margin-bottom:22px;font-size:.95rem}
.elct-account>span:first-of-type{flex:1 1 260px}
.elct-account a{font-weight:800;color:var(--c-brand-d)}
.elct-account .elct-ico{width:28px;height:28px}
.elct-account-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.elct-account.out a.elct-btn{color:#fff}

/* hub levels */
.elct-level{margin-bottom:40px}
.elct-level-head p{color:var(--c-ink-2);margin-top:0}
.elct-level-head h2{margin-top:6px}
.elct-level-badge{display:inline-block;font-size:.8rem;font-weight:800;padding:4px 12px;border-radius:999px;background:var(--c-grape-l);color:var(--c-grape)}
.elct-level-starters .elct-level-badge{background:var(--c-grass-l);color:var(--c-grass)}
.elct-level-movers .elct-level-badge{background:#fff0e8;color:#c2410c}
.elct-tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;margin:14px 0 18px;scrollbar-width:thin}
.elct-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:8px 18px;border-radius:999px;border:2px solid var(--c-line);background:#fff;font:inherit;font-family:var(--font);font-weight:800;color:var(--c-ink);cursor:pointer}
.elct-tab .elct-ico{width:26px;height:26px}
.elct-tab.is-active{border-color:var(--c-brand);background:var(--c-brand);color:#fff}
.elct-count{background:rgba(0,0,0,.08);border-radius:999px;padding:0 8px;font-size:.8rem}
.elct-tab.is-active .elct-count{background:rgba(255,255,255,.28)}
.elct-panel{display:none}.elct-panel.is-active{display:block}
.elct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.elct-card{position:relative;display:flex;flex-direction:column;background:#fff;border:2px solid var(--c-line);border-radius:22px;padding:18px;overflow:hidden;transition:box-shadow .15s,transform .15s,border-color .15s}
.elct-card:hover{box-shadow:0 12px 28px rgba(20,48,63,.10);transform:translateY(-3px);border-color:#bfe1ea}
.elct-card-art{height:96px;margin:-18px -18px 14px;display:grid;place-items:center;background:linear-gradient(135deg,#e6f7fb,#d3f0f8)}
.elct-skill-listening .elct-card-art{background:linear-gradient(135deg,#f0ecff,#e3dcff)}
.elct-skill-speaking .elct-card-art{background:linear-gradient(135deg,#fff3e6,#ffe3c7)}
.elct-card-art .elct-ico{width:66px;height:66px}
.elct-card h3{margin:.4em 0 .2em;font-size:1.12rem}
.elct-card-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.elct-card-actions{margin-top:auto;padding-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.elct-card.is-locked{background:#fafbfc}
.elct-meta,.elct-best{margin:0;font-size:.92rem;color:var(--c-ink-2)}
.elct-best{color:var(--c-ok);font-weight:700}
.elct-badge{font-size:.75rem;font-weight:800;padding:3px 10px;border-radius:999px;background:var(--c-ok-bg);color:var(--c-ok)}
.elct-badge.premium{background:var(--c-sun-l);color:#8a5a00}
.elct-empty{padding:28px;border:2px dashed var(--c-line);border-radius:var(--r);text-align:center;color:var(--c-ink-2);background:#fff}
.elct-empty-ico{width:64px;height:64px;display:block;margin:0 auto 8px}

/* shields */
.elct-shields{display:inline-flex;gap:3px;vertical-align:middle}
.elct-shield{width:18px;height:21px;background:#e3eaee;clip-path:polygon(50% 0,100% 15%,100% 55%,50% 100%,0 55%,0 15%)}
.elct-shield.on{background:linear-gradient(160deg,#ffd54a,#f0a500)}
.elct-shields.sm .elct-shield{width:13px;height:15px}
.elct-shields.lg{gap:8px;margin:6px 0 10px}
.elct-shields.lg .elct-shield{width:44px;height:52px}
.elct-shields.lg .elct-shield.on{animation:elct-pop .45s cubic-bezier(.2,1.6,.4,1) both}
.elct-shields.lg .elct-shield:nth-child(2){animation-delay:.1s}.elct-shields.lg .elct-shield:nth-child(3){animation-delay:.2s}.elct-shields.lg .elct-shield:nth-child(4){animation-delay:.3s}.elct-shields.lg .elct-shield:nth-child(5){animation-delay:.4s}
@keyframes elct-pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}

/* start screen */
.elct-start,.elct-result-hero,.elct-locked{background:#fff;border:2px solid var(--c-line);border-radius:26px;padding:26px;box-shadow:0 10px 30px rgba(20,48,63,.06)}
.elct-locked{text-align:center}
.elct-back{display:inline-block;margin-bottom:10px;color:var(--c-brand-d);font-weight:800;text-decoration:none}
.elct-start-head{display:flex;gap:16px;align-items:center}
.elct-start-ico{width:72px;height:72px;flex:0 0 auto}
.elct-desc{color:var(--c-ink-2)}
.elct-stats{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}
.elct-stats>div{flex:1 1 100px;background:var(--c-soft);border-radius:16px;padding:12px;text-align:center}
.elct-stats .elct-ico{width:30px;height:30px;display:block;margin:0 auto 4px}
.elct-stats b{display:block;font-size:1.4rem;color:var(--c-brand-d);line-height:1.2}
.elct-stats span{font-size:.85rem;color:var(--c-ink-2)}
.elct-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.elct-mode{position:relative;display:block;border:3px solid var(--c-line);border-radius:20px;padding:16px 18px 14px 82px;cursor:pointer;min-height:110px;transition:border-color .15s,background .15s,transform .15s}
.elct-mode:hover{transform:translateY(-2px)}
.elct-mode input{position:absolute;opacity:0;pointer-events:none}
.elct-mode-ico{position:absolute;left:16px;top:18px;width:52px;height:52px}
.elct-mode.is-active{border-color:var(--c-brand);background:var(--c-brand-l)}
.elct-mode.is-active::after{content:"✓";position:absolute;right:12px;top:10px;width:28px;height:28px;border-radius:50%;background:var(--c-brand);color:#fff;display:grid;place-items:center;font-weight:900}
.elct-mode:focus-within{outline:3px solid var(--c-sun);outline-offset:2px}
.elct-mode strong{font-size:1.1rem}
.elct-mode ul{margin:.3em 0 0;padding-left:1.1em;font-size:.93rem;color:var(--c-ink-2)}
.elct-note{background:var(--c-sun-l);border:1px solid #f6dfa0;border-radius:14px;padding:10px 14px;font-size:.93rem}
.elct-resume{margin-top:14px;padding:10px 14px;border-radius:14px;background:var(--c-ok-bg);color:var(--c-ok);font-weight:700}

/* test bar */
.elct-bar{position:sticky;top:var(--wp-admin--admin-bar--height,0px);z-index:20;display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:rgba(255,255,255,.97);backdrop-filter:blur(6px);border:2px solid var(--c-line);border-radius:18px;padding:8px 12px 12px;margin-bottom:10px;box-shadow:0 6px 18px rgba(20,48,63,.07);overflow:hidden}
.elct-bar-title{flex:1 1 140px;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.elct-bar-title strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.elct-bar-title small{color:var(--c-ink-2);font-size:.78rem}
.elct-timer{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums;font-weight:900;font-size:1.05rem;padding:4px 12px;border-radius:999px;background:var(--c-soft)}
.elct-timer .elct-ico{width:22px;height:22px}
.elct-timer.warn{background:#fff3d6;color:var(--c-warn)}
.elct-timer.danger{background:var(--c-bad-bg);color:var(--c-bad);animation:elct-blink 1s steps(2) infinite}
@keyframes elct-blink{50%{opacity:.55}}
.elct-meter{position:absolute;left:0;right:0;bottom:0;height:5px;background:#eaf2f5}
.elct-meter span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--c-grass),var(--c-brand));transition:width .3s}
.elct-parts{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin}
.elct-part-tab{flex:0 0 auto;min-height:42px;padding:6px 16px;border-radius:999px;border:2px solid var(--c-line);background:#fff;font:inherit;font-family:var(--font);font-weight:800;font-size:.92rem;cursor:pointer;color:var(--c-ink)}
.elct-part-tab.done{border-color:#9fdcb3;background:var(--c-ok-bg);color:var(--c-ok)}
.elct-part-tab.done::after{content:" ✓"}
.elct-part-tab.is-active{border-color:var(--c-brand);background:var(--c-brand);color:#fff}
.elct-palette{background:#fff;border:2px solid var(--c-line);border-radius:18px;padding:14px;margin-bottom:12px;box-shadow:0 8px 24px rgba(20,48,63,.08)}
.elct-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.82rem;margin-bottom:8px}
.elct-legend .k::before{content:"";display:inline-block;width:12px;height:12px;border-radius:4px;border:2px solid var(--c-line);margin-right:5px;vertical-align:-1px}
.elct-legend .k.done::before{background:var(--c-brand);border-color:var(--c-brand)}
.elct-legend .k.flag::before{border-color:var(--c-warn);background:#fff3d6}
.elct-pal-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0}
.elct-pal-part{width:60px;font-size:.8rem;font-weight:800;color:var(--c-ink-2)}
.elct-pal-q{width:42px;height:42px;border-radius:12px;border:2px solid var(--c-line);background:#fff;font:inherit;font-weight:800;cursor:pointer;color:var(--c-ink)}
.elct-pal-q.done{background:var(--c-brand);border-color:var(--c-brand);color:#fff}
.elct-pal-q.flag{box-shadow:inset 0 0 0 3px var(--c-sun)}

/* part */
.elct-stage.is-busy{opacity:.5;pointer-events:none}
.elct-part{background:#fff;border:2px solid var(--c-line);border-radius:24px;padding:22px}
.elct-part-title{display:flex;align-items:center;gap:10px;margin-top:0}
.elct-part-no{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--c-sun);color:#5a3b00;font-size:1.1rem;flex:0 0 auto}
.elct-instr{background:var(--c-brand-l);border-radius:16px;padding:12px 16px;font-weight:700;margin-bottom:12px}
.elct-instr .elct-text p{margin:0}
.elct-instr-vi{margin:.5em 0 0;font-weight:600;color:#0b5a70;background:#fff;border-radius:10px;padding:6px 10px}
.elct-vi-toggle{margin-top:8px;border:0;background:none;color:var(--c-brand-d);font:inherit;font-weight:800;font-size:.85rem;cursor:pointer;padding:4px 0;text-decoration:underline}
.elct-text p{margin:.4em 0}
.elct-example{border:2px dashed #c9dde5;border-radius:16px;padding:10px 14px;margin:12px 0;color:var(--c-ink-2);background:#fcfeff}
.elct-tag{display:inline-block;font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em;background:var(--c-sun);color:#5a3b00;border-radius:6px;padding:1px 8px}
.elct-figure{margin:14px auto;text-align:center}
.elct-figure figcaption{font-size:.88rem;color:var(--c-ink-2);margin-top:6px}
.elct-part-img{display:block;max-width:100%;max-height:420px;height:auto;margin:0 auto;border-radius:18px;border:2px solid var(--c-line);background:#fff}
.elct-figure.is-gray .elct-part-img{filter:grayscale(1) contrast(1.05)}
.elct-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0}
.elct-strip figure{position:relative;margin:0;background:#fff;border:2px solid var(--c-line);border-radius:16px;padding:8px;text-align:center}
.elct-strip img{display:block;width:100%;height:auto;border-radius:10px}
.elct-strip figcaption{font-size:.85rem;color:var(--c-ink-2);margin-top:4px}
.elct-strip-n{position:absolute;top:8px;left:8px;width:28px;height:28px;border-radius:50%;background:var(--c-ink);color:#fff;font-weight:900;display:grid;place-items:center;font-size:.9rem}
.elct-bank{display:flex;flex-wrap:wrap;gap:8px;padding:14px;border:2px solid #f1d27a;background:var(--c-sun-l);border-radius:18px;margin:12px 0;position:relative}
.elct-bank-title{width:100%;font-size:.78rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em;color:#8a5a00}
.elct-bank-item{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:#fff;border:1px solid #f1d27a;font-weight:700}
.elct-bank.has-img{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.elct-bank.has-img .elct-bank-title{grid-column:1/-1}
.elct-bank.has-img .elct-bank-item{flex-direction:column;border-radius:16px;padding:8px 6px;text-align:center;line-height:1.2}
.elct-bank-item img{width:28px;height:28px}
.elct-bank.has-img .elct-bank-item img{width:64px;height:64px}
.elct-passage{background:#fffdf5;border:2px solid #f0e6c8;border-radius:18px;padding:16px 18px;margin:14px 0;line-height:2.1}
.elct-passage h4{margin-top:0;text-align:center;font-size:1.15rem}
.elct-gap{display:inline-flex;align-items:center;gap:4px;vertical-align:middle;line-height:1.3}
.elct-gap-n{display:inline-grid;place-items:center;min-width:26px;height:26px;border-radius:50%;background:var(--c-ink);color:#fff;font-size:.78rem}
.elct-gap.is-answered .elct-gap-n{background:var(--c-brand)}
.elct-qs,.elct-rqs{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.elct-qs.is-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.elct-q,.elct-rq{border:2px solid var(--c-line);border-radius:18px;padding:14px;transition:border-color .15s,background .15s;background:#fff}
.elct-q.is-answered{border-color:#9fd9e8;background:#fbfeff}
.elct-q-head{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.elct-q-head>.elct-q-prompt,.elct-q-head>.elct-bubble{flex:1;min-width:0}
.elct-q-prompt p{margin:0;font-weight:600}
.elct-q-n{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--c-ink);color:#fff;font-weight:900;font-size:.9rem}
.elct-q.is-answered .elct-q-n{background:var(--c-brand)}
.elct-q-img{display:block;max-width:100%;max-height:200px;height:auto;margin:6px auto 12px;border-radius:14px}
.elct-flag{flex:0 0 auto;margin-left:auto;width:36px;height:36px;border-radius:10px;border:1px solid var(--c-line);background:#fff;color:#a7b4bc;cursor:pointer;font-size:1rem}
.elct-flag.on{background:#fff3d6;border-color:var(--c-sun);color:var(--c-warn)}
.elct-gap .elct-flag{width:28px;height:28px;font-size:.8rem;margin-left:0}
/* chat bubbles */
.elct-bubble{display:flex;gap:10px;align-items:flex-end}
.elct-avatar{width:48px;height:48px;flex:0 0 auto;border-radius:50%;background:var(--c-grape-l);padding:4px}
.elct-bubble-body{position:relative;background:var(--c-grape-l);border-radius:18px 18px 18px 4px;padding:8px 14px;max-width:100%}
.elct-bubble-name{display:block;font-size:.75rem;font-weight:900;color:var(--c-grape);text-transform:uppercase;letter-spacing:.04em}
.elct-bubble-text p{margin:0;font-weight:700}
/* text options */
.elct-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.elct-opt{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 12px;border:2px solid var(--c-line);border-radius:16px;background:#fff;font:inherit;font-family:var(--font);text-align:left;cursor:pointer;color:var(--c-ink);transition:border-color .12s,background .12s,transform .12s}
.elct-opt:hover{border-color:#9ccfdd}
.elct-opt.is-on{border-color:var(--c-brand);background:var(--c-brand-l);box-shadow:0 0 0 2px var(--c-brand) inset}
.elct-opt-key{flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--c-soft);font-weight:900;color:var(--c-brand-d)}
.elct-opt.is-on .elct-opt-key{background:var(--c-brand);color:#fff}
/* picture options (A/B/C cards) */
.elct-opts.has-img{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.elct-opts.has-img .elct-opt{position:relative;flex-direction:column;justify-content:flex-start;padding:12px 10px 10px;text-align:center}
.elct-opts.has-img .elct-opt-key{position:absolute;top:8px;left:8px}
.elct-opts.has-img img{width:100%;max-width:150px;aspect-ratio:1/1;object-fit:contain}
.elct-opts.has-img .elct-opt-text{font-weight:700;font-size:.95rem}
.elct-opts.has-img .elct-opt.is-on{transform:translateY(-2px)}
.elct-opts.has-img .elct-opt.is-on::after{content:"✓";position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:var(--c-grass);color:#fff;font-weight:900;display:grid;place-items:center}
/* picture tiles (select with pictures) */
.elct-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.elct-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px;border:2px solid var(--c-line);border-radius:16px;background:#fff;cursor:pointer;font:inherit;font-family:var(--font);font-size:.85rem;font-weight:700;color:var(--c-ink);line-height:1.2;text-align:center}
.elct-tile img{width:64px;height:64px;object-fit:contain}
.elct-tile:hover{border-color:#9ccfdd}
.elct-tile.is-on{border-color:var(--c-brand);background:var(--c-brand-l);box-shadow:0 0 0 2px var(--c-brand) inset}
.elct-tile.is-on::after{content:"✓";position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:var(--c-grass);color:#fff;font-weight:900;font-size:.8rem;display:grid;place-items:center}
/* colour swatches */
.elct-swatches{display:flex;flex-wrap:wrap;gap:10px}
.elct-swatch{display:inline-flex;flex-direction:column;align-items:center;gap:4px;padding:6px 8px;border:2px solid transparent;border-radius:16px;background:none;cursor:pointer;font:inherit;font-family:var(--font);font-size:.82rem;font-weight:800;color:var(--c-ink)}
.elct-swatch-dot{width:46px;height:46px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px var(--c-line)}
.elct-swatch.is-on{border-color:var(--c-brand);background:var(--c-brand-l)}
.elct-swatch.is-on .elct-swatch-dot{box-shadow:0 0 0 3px var(--c-brand)}
.elct-mini-swatch{display:inline-block;width:16px;height:16px;border-radius:50%;vertical-align:-3px;margin-right:4px;box-shadow:0 0 0 1px rgba(0,0,0,.2)}
/* fields */
.elct-select,.elct-input,.elct-writing textarea{font:inherit;font-family:var(--font);font-size:1rem;min-height:46px;padding:8px 12px;border:2px solid var(--c-line);border-radius:14px;background:#fff;color:var(--c-ink);max-width:100%}
.elct-select:focus,.elct-input:focus,.elct-writing textarea:focus{outline:none;border-color:var(--c-brand);box-shadow:0 0 0 4px rgba(11,159,194,.18)}
.elct-input{width:100%;max-width:420px}
.elct-input.inline,.elct-gap .elct-select{width:auto;min-width:120px;max-width:210px;min-height:40px;padding:4px 10px}
.elct-writing textarea{width:100%;line-height:1.7;resize:vertical}
.elct-wc{display:block;margin-top:4px;color:var(--c-warn);font-weight:700}.elct-wc.ok{color:var(--c-ok)}
.elct-part-nav{margin-top:18px}

/* audio */
.elct-audio{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 16px;margin:12px 0;border-radius:18px;background:linear-gradient(135deg,var(--c-grape-l),#f7f4ff);border:2px solid #dcd3ff}
.elct-audio-ico{width:40px;height:40px}
.elct-audio .elct-btn.primary{background:var(--c-grape);border-color:var(--c-grape);box-shadow:0 4px 0 #5a3fd6}
.elct-audio-bar{flex:1 1 140px;height:10px;border-radius:999px;background:#e2dbff;overflow:hidden}
.elct-audio-bar span{display:block;height:100%;width:0;background:var(--c-grape);transition:width .3s linear}
.elct-audio small{flex-basis:100%;font-weight:700}

/* tappable words, popover, toast → assets/wordpick.css */
/* modal */
.elct-modal{position:fixed;inset:0;z-index:100002;background:rgba(20,48,63,.45);display:grid;place-items:center;padding:16px}
.elct-modal-card{background:#fff;color:#14303f;border-radius:24px;padding:24px;max-width:430px;width:100%;font-family:var(--font);box-shadow:0 20px 60px rgba(0,0,0,.25);text-align:center}
.elct-modal-ico{width:64px;height:64px}
.elct-modal-card h3{margin:.3em 0;font-size:1.3rem}
.elct-modal-card .elct-row{display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap}

/* results */
.elct-result-hero{text-align:center;position:relative;background:linear-gradient(180deg,#fffbea 0%,#fff 60%)}
.elct-hero-ico{width:96px;height:96px;display:block;margin:6px auto 0;animation:elct-pop .5s cubic-bezier(.2,1.6,.4,1) both}
.elct-score{font-size:1.15rem}
.elct-score b{font-size:1.7rem;color:var(--c-brand-d)}
.elct-part-bars{display:grid;gap:8px;margin:18px 0;background:#fff;border:2px solid var(--c-line);border-radius:20px;padding:14px 16px}
.elct-pbar{display:grid;grid-template-columns:70px 1fr 52px;gap:10px;align-items:center;font-size:.93rem}
.elct-pbar-l{font-weight:800}
.elct-pbar-t{height:14px;border-radius:999px;background:#e8eff2;overflow:hidden}
.elct-pbar-t span{display:block;height:100%;border-radius:999px}
.elct-pbar-t .good{background:#22a06b}.elct-pbar-t .mid{background:#f5b301}.elct-pbar-t .low{background:#ef6b7f}
.elct-pbar-v{text-align:right;font-variant-numeric:tabular-nums;font-weight:800}
.elct-words{background:var(--c-sun-l);border:2px solid #f1e3b0;border-radius:22px;padding:18px 20px;margin:20px 0}
.elct-words h3{margin-top:0}
.elct-chips{display:flex;flex-wrap:wrap;gap:8px}
.elct-chip-word{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 14px;border-radius:999px;border:2px solid #f1d27a;background:#fff;font:inherit;font-family:var(--font);font-weight:800;cursor:pointer;color:var(--c-ink)}
.elct-chip-word img{width:30px;height:30px}
.elct-chip-word:hover{background:#fff6cc}
.elct-chip-word.is-saved{border-color:#7fd3a0;background:var(--c-ok-bg)}
.elct-chip-word.is-saved::after{content:" ✓";color:var(--c-ok)}
.elct-review>h3 .elct-ico,.elct-words h3 .elct-ico{width:30px;height:30px}
.elct-review details.elct-rpart{border:2px solid var(--c-line);border-radius:18px;margin:10px 0;background:#fff;overflow:hidden}
.elct-review summary{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;font-weight:800;list-style:none}
.elct-review summary::-webkit-details-marker{display:none}
.elct-rpart>summary::before{content:"▸";transition:transform .15s;margin-right:4px}
.elct-rpart[open]>summary::before{transform:rotate(90deg)}
.elct-review summary>span:first-of-type{flex:1}
.elct-rpart>*:not(summary){margin-left:16px;margin-right:16px}
.elct-rpart>ol{margin-bottom:16px}
.elct-pill{background:var(--c-bad-bg);color:var(--c-bad);border-radius:999px;padding:2px 10px;font-size:.85rem}
.elct-pill.ok{background:var(--c-ok-bg);color:var(--c-ok)}
.elct-rq.ok{border-color:#a9e2bd;background:#fbfffc}
.elct-rq.bad{border-color:#f3b8c2;background:#fffafb}
.elct-mark{width:28px!important;height:28px!important;margin-left:auto;flex:0 0 auto}
.elct-ans{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.96rem}
.elct-ans-item{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.elct-ans-item img{width:34px;height:34px}
.elct-ans b.ok{color:var(--c-ok)}
.elct-expl{display:flex;gap:6px;align-items:flex-start;margin-top:8px;padding:8px 12px;border-radius:12px;background:var(--c-soft);font-size:.95rem}
.elct-expl .elct-ico{width:22px;height:22px;flex:0 0 auto;margin-top:2px}
.elct-expl .elct-text,.elct-expl .elct-text p{display:inline;margin:0}
.elct-gap-r{padding:1px 6px;border-radius:6px}
.elct-gap-r.ok{background:var(--c-ok-bg);color:var(--c-ok)}
.elct-gap-r.bad{background:var(--c-bad-bg)}
.elct-gap-r.bad s{color:var(--c-bad)}.elct-gap-r.bad strong{color:var(--c-ok)}
details.elct-transcript{background:#f7fafb;border-radius:14px;padding:4px 14px;margin:10px 16px}
details.elct-transcript>summary{padding:8px 0;font-weight:800;color:var(--c-grape)}
.elct-your-writing{white-space:pre-wrap;background:#f7fafb;border-radius:12px;padding:10px 12px;margin-bottom:6px}
.elct-end{margin:28px 0}
.elct-loading{text-align:center;color:var(--c-ink-2);padding:40px}

/* confetti */
.elct-confetti{position:fixed;inset:0;pointer-events:none;z-index:100003;overflow:hidden}
.elct-confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:3px;animation:elct-fall 3.2s ease-in forwards}
@keyframes elct-fall{to{top:105%;transform:rotate(720deg) translateX(40px)}}

/* history */
.elct-history{margin-top:32px}
.elct-history h2 .elct-ico{width:34px;height:34px}
.elct-table-wrap{overflow-x:auto;background:#fff;border:2px solid var(--c-line);border-radius:18px}
.elct-table{width:100%;border-collapse:collapse;font-size:.95rem;margin:0}
.elct-table th,.elct-table td{padding:10px 12px;border-bottom:1px solid var(--c-line);text-align:left;vertical-align:middle}
.elct-table tr:last-child td{border-bottom:0}
.elct-table th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--c-ink-2)}

@media (max-width:640px){
  .elct{font-size:16px;padding:0 12px}
  .elct h2{font-size:1.4rem}
  .elct-hero{padding:16px;gap:12px}
  .elct-hero-mascot{width:60px;height:60px}
  .elct-part,.elct-start,.elct-result-hero{padding:16px;border-radius:20px}
  .elct-bar{border-radius:0 0 16px 16px;margin:0 -12px 10px;padding:8px 12px 12px;border-left:0;border-right:0}
  .elct-bar-title{flex-basis:100%}
  .elct-passage{padding:12px;line-height:2}
  .elct-shields.lg .elct-shield{width:36px;height:42px}
  .elct-mode{padding-left:74px}
  .elct-mode-ico{width:44px;height:44px}
  .elct-start-ico{width:56px;height:56px}
  .elct-tiles{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
  .elct-tile img{width:52px;height:52px}
  .elct-opts.has-img{grid-template-columns:repeat(2,1fr)}
  .elct-qs.is-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.elct *,.elct-pop,.elct-confetti{animation:none!important;transition:none!important}.elct-confetti{display:none}}

/* shared options panel + compact pickers */
.elct-shared{border:2px solid #dcd3ff;background:var(--c-grape-l);border-radius:18px;padding:14px;margin:12px 0}
.elct-shared .elct-bank-title{color:var(--c-grape)}
.elct-shared-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px;margin-top:6px}
.elct-shared-item{display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:8px 12px;border:1px solid #e4dcff}
.elct-shared-text p{margin:0;font-weight:700}
.elct-shared.has-img .elct-shared-list{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.elct-shared.has-img .elct-shared-item{flex-direction:column;position:relative;padding:10px 8px;text-align:center}
.elct-shared.has-img .elct-shared-item .elct-opt-key{position:absolute;top:8px;left:8px}
.elct-shared.has-img img{width:100%;max-width:120px;aspect-ratio:1/1;object-fit:contain}
.elct-qs.is-compact .elct-q{padding:12px 14px}
.elct-qs.is-compact .elct-q-head{margin-bottom:8px}
.elct-picks{display:flex;flex-wrap:wrap;gap:8px}
.elct-pick{display:inline-flex;align-items:center;gap:6px;min-width:46px;min-height:46px;padding:4px 12px;border-radius:999px;border:2px solid var(--c-line);background:#fff;cursor:pointer;font:inherit;font-family:var(--font);font-weight:900;color:var(--c-brand-d)}
.elct-pick img{width:34px;height:34px;object-fit:contain}
.elct-pick:hover{border-color:#9ccfdd}
.elct-pick.is-on{background:var(--c-brand);border-color:var(--c-brand);color:#fff}
.elct-pick:focus-visible{outline:3px solid var(--c-sun);outline-offset:2px}
.elct-pick-echo{margin-top:6px;font-weight:700;color:var(--c-ink-2);min-height:1.2em}

/* [elc_tests wide="1"] — wider than a narrow theme column (use on centred, full-width pages) */
.elct.elct-wide{--elct-w:min(1040px,calc(100vw - 32px));width:var(--elct-w);max-width:none!important;margin-left:calc(50% - var(--elct-w) / 2)!important;margin-right:0!important;padding:0}
.elct-pick-echo:empty{display:none}
@media (max-width:640px){
  .elct-bar{gap:6px;padding:6px 10px 10px}
  .elct-bar-title{display:none}
  .elct-bar .elct-btn.sm{min-height:36px;padding:4px 10px;font-size:.82rem}
  .elct-timer{font-size:.95rem;padding:4px 8px}
  .elct-bar .elct-btn.primary{margin-left:auto}
  .elct-shared.has-img .elct-shared-list{grid-template-columns:repeat(3,1fr);gap:6px}
  .elct-shared.has-img img{max-width:76px}
  .elct-shared-list{grid-template-columns:1fr}
  .elct-pick{min-height:44px;padding:4px 10px}
  .elct-pick img{width:28px;height:28px}
}

/* v2.8 starred words (exam mode) */
.elct-starred.has-stars{border-color:var(--c-sun);background:var(--c-sun-l);color:#7a4b00}
.elct-stars{background:var(--c-sun-l);border:2px solid #f1d27a;border-radius:18px;padding:12px 16px;margin-bottom:12px}
.elct-stars h4{margin:0 0 8px;display:flex;align-items:center;gap:6px}
.elct-star-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 12px;border-radius:999px;background:#fff;border:2px solid #f1d27a;font-weight:800}
.elct-star-chip img{width:24px;height:24px}
.elct-star-chip button{border:0;background:#fde68a;border-radius:50%;width:24px;height:24px;cursor:pointer;font-weight:900;line-height:1}
.elct-starhint{position:relative;display:flex;align-items:center;gap:10px;padding:10px 44px 10px 14px;margin-bottom:12px;border-radius:16px;background:#fffbea;border:2px dashed #f1d27a;font-weight:700;font-size:.95rem}
.elct-starhint .elct-ico{width:30px;height:30px;flex:0 0 auto}
.elct-starhint .elct-pop-x{top:4px;right:6px}
.elct-w.is-marked::after{content:"★";font-size:.7em;color:#f0a500;vertical-align:super;margin-left:1px}
.elct-autosave{font-weight:800;color:#8a5a00;background:#fff;border-radius:12px;padding:8px 12px}
.elct-autosave.done{color:var(--c-ok);background:var(--c-ok-bg)}
.elct-starred .n{display:none}
@media (max-width:640px){.elct-starred .lbl{display:none}.elct-starred .n{display:inline}.elct-bar .elct-progress{padding:4px 8px}}
.elct-progress .n{display:none}
@media (max-width:640px){.elct-progress .lbl{display:none}.elct-progress .n{display:inline}}

/* v2.9 — big part picture beside the questions (sticky), zoom, picture button */
.elct-player{container:elct/inline-size}
.elct.elct-wide.is-testing{--elct-w:min(1240px,calc(100vw - 32px))}
.elct-strip img{max-height:340px;object-fit:contain}
.elct-figure.is-big{position:relative;margin:14px 0;background:#fff;border:2px solid var(--c-line);border-radius:20px;padding:10px}
.elct-figure.is-big .elct-part-img{max-height:min(50vh,560px);width:auto;max-width:100%;border:0;border-radius:12px;cursor:zoom-in;object-fit:contain}
.elct-fig-tools{display:flex;justify-content:flex-end;gap:6px;margin:0 0 6px}
.elct-fig-btn{display:inline-flex;align-items:center;gap:4px;min-height:34px;padding:4px 12px;border-radius:999px;border:2px solid var(--c-line);background:#fff;color:var(--c-ink);font:inherit;font-family:var(--font);font-size:.82rem;font-weight:800;cursor:pointer}
.elct-fig-btn:hover{border-color:var(--c-brand)}
.elct-fig-btn:focus-visible{outline:3px solid var(--c-sun);outline-offset:2px}
.elct-pin{display:none}
.elct-pin .off{display:none}
.elct-player.is-unpinned .elct-pin .on{display:none}
.elct-player.is-unpinned .elct-pin .off{display:inline}
.elct-pin[aria-pressed="true"]{border-color:var(--c-brand);background:var(--c-brand-l);color:var(--c-brand-d)}
.elct-split-main>:first-child{margin-top:0}
@container elct (min-width:820px){
  .elct-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,47%);grid-template-rows:auto 1fr;column-gap:20px;align-items:start;margin-top:14px}
  .elct-split-intro{grid-column:1;grid-row:1;min-width:0}
  .elct-split-intro>:first-child{margin-top:0}
  .elct-split-main{min-width:0;grid-column:1;grid-row:2}
  .elct-split-side{grid-column:2;grid-row:1 / span 2;position:sticky;top:calc(var(--wp-admin--admin-bar--height,0px) + var(--elct-bar-h,0px) + 12px);z-index:2}
  .elct-split .elct-figure.is-big{margin:0}
  .elct-split .elct-figure.is-big .elct-part-img{width:100%;max-height:calc(100vh - var(--wp-admin--admin-bar--height,0px) - var(--elct-bar-h,0px) - 120px)}
  .elct-split .elct-figure figcaption{margin-top:4px}
  .elct-split .elct-qs.is-grid{grid-template-columns:1fr}
  .elct-pin{display:inline-flex}
  .elct-player.is-unpinned .elct-split-side{position:static}
}
.elct-picfab{position:fixed;left:12px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:30;display:inline-flex;align-items:center;gap:6px;min-height:46px;padding:8px 16px;border-radius:999px;border:0;background:#14303f;color:#fff;font:800 15px "Nunito","Segoe UI",system-ui,sans-serif;box-shadow:0 8px 24px rgba(20,48,63,.3);cursor:pointer}
.elct-picfab[hidden]{display:none}
.elct-lightbox{position:fixed;inset:0;z-index:100003;background:rgba(8,20,27,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 12px 16px}
.elct-lightbox-in{max-width:100%;max-height:100%;overflow:auto;-webkit-overflow-scrolling:touch}
.elct-lightbox img{display:block;max-width:min(96vw,1400px);max-height:calc(100vh - 110px);object-fit:contain;border-radius:10px;background:#fff;cursor:zoom-in}
.elct-lightbox.is-zoomed img{max-width:none;max-height:none;width:auto;cursor:zoom-out}
.elct-lightbox.is-zoomed .elct-lightbox-in{width:100%;height:100%}
.elct-lightbox-x{position:fixed;top:12px;right:14px;width:46px;height:46px;border:0;border-radius:50%;background:#fff;color:#14303f;font-size:28px;font-weight:900;line-height:1;cursor:pointer}
.elct-lightbox-tip{color:#dce8ee;font:700 13px "Nunito","Segoe UI",system-ui,sans-serif;margin:8px 0 0}
html.elct-noscroll{overflow:hidden}