/* Mock101 - site + typing app styles. Colours follow Google: blue #1a73e8, red #ea4335, yellow #fbbc04, green #34a853.
   Change the main colour in Admin > Settings > Theme (no need to edit this file). */
:root{--p:#1a73e8;--red:#ea4335;--yellow:#fbbc04;--green:#34a853;--bg:#f8f9fa;--card:#fff;--text:#202124;--muted:#5f6368;--line:#dadce0;--soft:#e8f0fe;
  --shadow:0 1px 2px rgba(60,64,67,.15),0 1px 3px 1px rgba(60,64,67,.08);--r:14px;--font:Roboto,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;--mono:"Roboto Mono",Consolas,"Courier New",monospace}
html.dark{--bg:#121316;--card:#1e1f22;--text:#e8eaed;--muted:#9aa0a6;--line:#3c4043;--soft:#1f2b3e;--shadow:0 1px 3px rgba(0,0,0,.5)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 var(--font)}
a{color:var(--p);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
h1,h2,h3{line-height:1.25;margin:.2em 0 .5em}h1{font-size:1.9rem}h2{font-size:1.4rem}h3{font-size:1.12rem}
input,select,textarea,button{font:inherit;color:inherit}
input,select,textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--card);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--p);box-shadow:0 0 0 3px color-mix(in srgb,var(--p) 18%,transparent)}
textarea{min-height:110px;resize:vertical}
label{display:block;font-size:.88rem;color:var(--muted);margin:10px 0 4px}
label.chk{display:flex;gap:8px;align-items:center;color:var(--text)}label.chk input{width:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:var(--card);
  color:var(--p);font-weight:500;cursor:pointer;text-decoration:none!important;white-space:nowrap;transition:background .15s,box-shadow .15s}
.btn:hover{background:var(--soft)}.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.primary{background:var(--p);border-color:var(--p);color:#fff}.btn.primary:hover{box-shadow:var(--shadow);filter:brightness(1.05)}
.btn.red,.btn.danger{background:var(--red);border-color:var(--red);color:#fff}.btn.green{background:var(--green);border-color:var(--green);color:#fff}
.btn.ghost{background:transparent}.btn.small{padding:6px 12px;font-size:.88rem}.btn.big{padding:13px 26px;font-size:1.05rem}.btn.block{width:100%}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.row.center{justify-content:center}.row.between{justify-content:space-between}.grow{flex:1}
.grid{display:grid;gap:14px}.g2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.g3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.g4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:20px;margin:0 0 16px}
.center{text-align:center}.muted{color:var(--muted)}.small{font-size:.88rem}.tiny{font-size:.78rem}.hide{display:none!important}.mt{margin-top:14px}.nowrap{white-space:nowrap}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--soft);color:var(--p);font-size:.82rem;font-weight:500}
.pill.red{background:#fce8e6;color:#c5221f}.pill.green{background:#e6f4ea;color:#137333}.pill.yellow{background:#fef7e0;color:#b06000}
html.dark .pill.red{background:#5c2b29;color:#f6aea9}html.dark .pill.green{background:#1e3a29;color:#81c995}html.dark .pill.yellow{background:#4a3c0f;color:#fdd663}
.note{padding:12px 14px;border-radius:12px;background:var(--soft);font-size:.93rem}.note.warn{background:#fef7e0;color:#5f4300}html.dark .note.warn{background:#3d3212;color:#fdd663}
.note.bad{background:#fce8e6;color:#8c1d18}html.dark .note.bad{background:#4a2423;color:#f6aea9}
table{width:100%;border-collapse:collapse;font-size:.93rem}th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left}th{color:var(--muted);font-weight:500}
.tbl{overflow-x:auto}tr.me td{background:var(--soft);font-weight:600}

/* layout */
#app{min-height:100vh;display:flex;flex-direction:column}
#view{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:22px 16px 40px}
#top{position:sticky;top:0;z-index:30;background:var(--card);border-bottom:1px solid var(--line)}
.topin{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:8px;padding:8px 16px;min-height:60px}
.logo{font-size:1.5rem;font-weight:700;letter-spacing:-.5px;text-decoration:none!important;margin-right:10px}
.g-logo span{font-weight:700}.g-logo.big{font-size:3.2rem;letter-spacing:-1.5px;line-height:1.1}
.nav{display:flex;gap:2px;flex-wrap:wrap}.nav a{padding:8px 12px;border-radius:999px;color:var(--text);font-weight:500;font-size:.95rem}
.nav a:hover,.nav a.on{background:var(--soft);color:var(--p);text-decoration:none}
.ibtn{width:40px;height:40px;border-radius:50%;border:0;background:transparent;cursor:pointer;font-size:1.2rem;display:inline-flex;align-items:center;justify-content:center}
.ibtn:hover{background:var(--soft)}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--p);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:600;cursor:pointer;border:0}
.menu{position:absolute;right:16px;top:58px;background:var(--card);box-shadow:0 4px 20px rgba(0,0,0,.18);border-radius:12px;padding:8px;min-width:210px;z-index:40}
.menu a,.menu button{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:8px;color:var(--text);background:none;border:0;cursor:pointer}
.menu a:hover,.menu button:hover{background:var(--soft);text-decoration:none}
.coach-sw{display:flex;align-items:center;gap:6px;font-size:.85rem;font-weight:500;cursor:pointer;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:var(--card)}
.coach-sw i{width:30px;height:17px;border-radius:9px;background:var(--line);position:relative;transition:.2s}
.coach-sw i:after{content:"";position:absolute;width:13px;height:13px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.2s}
.coach-sw.on i{background:var(--green)}.coach-sw.on i:after{left:15px}
.burger{display:none}
@media(max-width:820px){.burger{display:inline-flex}.nav{display:none;position:absolute;left:0;right:0;top:60px;background:var(--card);flex-direction:column;padding:10px;border-bottom:1px solid var(--line)}
  .nav.open{display:flex}.coach-sw b{display:none}h1{font-size:1.55rem}.g-logo.big{font-size:2.4rem}}
#foot{background:var(--card);border-top:1px solid var(--line);padding:26px 16px;font-size:.9rem;color:var(--muted)}
.footin{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between}
.footin a{color:var(--muted);margin-right:14px}.soc a{display:inline-flex;align-items:center;gap:5px;margin-right:12px;color:var(--text);font-weight:500}
.loading{display:flex;justify-content:center;padding:60px}.loading span{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--p);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* page builder blocks */
.b-hero{text-align:center;padding:40px 10px 26px}.b-hero h1{font-size:2.3rem;max-width:820px;margin:14px auto 10px}.b-hero p{color:var(--muted);max-width:720px;margin:0 auto 22px;font-size:1.08rem}
.b-h{margin-top:28px}.b-text{line-height:1.7}.b-text p{margin:.6em 0}
.b-cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin:14px 0}
.b-card{display:flex;flex-direction:column;gap:6px;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;color:var(--text);border-top:4px solid var(--p);text-decoration:none!important;transition:transform .15s}
a.b-card:hover{transform:translateY(-2px)}.b-card span:last-child{color:var(--muted);font-size:.93rem}.b-ico{font-size:1.7rem}
.c-blue{border-color:#1a73e8}.c-red{border-color:#ea4335}.c-yellow{border-color:#fbbc04}.c-green{border-color:#34a853}
.b-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:12px 0}
.b-stat{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;text-align:center;color:var(--text);border-bottom:4px solid var(--p);text-decoration:none!important}
.b-stat b{display:block;font-size:1.7rem}.b-stat span{color:var(--muted);font-size:.9rem}
.b-faq{background:var(--card);border-radius:12px;box-shadow:var(--shadow);padding:14px 18px;margin:8px 0}.b-faq summary{cursor:pointer;font-weight:500}
.b-notice{padding:14px 16px;border-radius:12px;border-left:5px solid;background:var(--card);margin:16px 0;font-size:.93rem;color:var(--muted)}
.b-img{margin:16px 0;text-align:center}.b-img img{border-radius:12px}.b-img figcaption{color:var(--muted);font-size:.88rem}
.b-video{position:relative;padding-top:56.25%;margin:16px 0;border-radius:14px;overflow:hidden;background:#000}.b-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.b-tg{margin:26px 0}.b-tg-posts{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.b-hr{border:0;border-top:1px solid var(--line);margin:26px 0}.b-buttons{margin:14px 0}
.b-contact{max-width:640px}.b-contact input,.b-contact textarea{margin:6px 0}.form-msg{margin-top:8px;font-size:.92rem}
.page{max-width:860px;margin:0 auto}.page-title{margin-bottom:18px}

/* popups */
.popup{position:fixed;z-index:50;background:var(--card);box-shadow:0 8px 30px rgba(0,0,0,.25);border-radius:16px;padding:18px 18px 16px;max-width:340px;animation:pop .35s ease}
.popup.bottom-left{left:16px;bottom:16px}.popup.bottom-right{right:16px;bottom:16px}.popup.top{left:50%;top:76px;transform:translateX(-50%)}
.popup.center{left:50%;top:50%;transform:translate(-50%,-50%);max-width:440px}.popup h3{margin:0 26px 6px 0}.popup p{margin:0 0 12px;color:var(--muted);font-size:.93rem}
.popup .x{position:absolute;right:8px;top:6px}.popup img{border-radius:10px;margin-bottom:8px}
@keyframes pop{from{opacity:0;transform:translateY(16px)}}
.popup.center,.popup.top{animation:none}
#toasts{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:#323232;color:#fff;padding:10px 18px;border-radius:10px;font-size:.93rem;box-shadow:var(--shadow);transition:opacity .4s}.toast.out{opacity:0}
.toast.err{background:#c5221f}.toast.ok{background:#137333}
.modal-wrap{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:80;display:flex;align-items:center;justify-content:center;padding:16px}
.modal{background:var(--card);border-radius:16px;padding:22px;max-width:520px;width:100%;max-height:90vh;overflow:auto}.modal-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.modal-input{margin-top:10px}

/* app pages */
.hero-mini{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:16px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 18px;border-bottom:1px solid var(--line)}
.tabs a{padding:10px 14px;color:var(--muted);font-weight:500;border-bottom:3px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--p);border-color:var(--p);text-decoration:none}.tabs a:hover{text-decoration:none;color:var(--p)}
.tile{display:flex;flex-direction:column;gap:6px;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;color:var(--text);cursor:pointer;border:0;text-align:left;
  border-left:5px solid var(--p);text-decoration:none!important;transition:transform .15s;width:100%}
.tile:hover{transform:translateY(-2px)}.tile b{font-size:1.05rem}.tile span{color:var(--muted);font-size:.9rem}.tile .ico{font-size:1.6rem}
.tile.red{border-color:var(--red)}.tile.yellow{border-color:var(--yellow)}.tile.green{border-color:var(--green)}.tile.done{opacity:.75}.tile.lock{opacity:.6}
.stat{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:14px 16px}.stat b{display:block;font-size:1.6rem}.stat span{color:var(--muted);font-size:.85rem}
.lessons{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.lesson{padding:12px;border-radius:12px;background:var(--card);box-shadow:var(--shadow);cursor:pointer;border:2px solid transparent;text-align:left;width:100%}
.lesson:hover{border-color:var(--p)}.lesson .n{color:var(--muted);font-size:.8rem}.lesson b{display:block}.lesson.done{border-color:var(--green)}.lesson.adapt{border-color:var(--yellow)}
.plist .pi{display:flex;gap:10px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--line)}.plist .pi:last-child{border:0}
.ex-choose{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);cursor:pointer;font-weight:500}
.chip.on{background:var(--p);border-color:var(--p);color:#fff}
.otp{letter-spacing:10px;font-size:1.5rem;text-align:center;font-family:var(--mono)}
.authbox{max-width:430px;margin:20px auto}
.bar{height:10px;border-radius:6px;background:var(--line);overflow:hidden}.bar i{display:block;height:100%;background:var(--green)}
canvas.chart{width:100%;height:220px}
.keyline{font-family:var(--mono);background:var(--soft);padding:2px 7px;border-radius:6px}

/* typing practice (word engine) */
.typer{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:16px}
.ty-bar{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}.ty-time{font-size:1.6rem;font-weight:700;font-family:var(--mono);min-width:78px}.ty-time.low{color:var(--red)}
.ty-prog{width:120px;height:6px;background:var(--line);border-radius:4px;overflow:hidden}.ty-prog span{display:block;height:100%;background:var(--p);width:0}
.ty-box{position:relative;height:150px;overflow:hidden;border-radius:12px;background:var(--bg);padding:12px 16px;cursor:text;border:2px solid transparent}
.ty-box.big{height:170px}.ty-box.focus{border-color:var(--p)}
.ty-text{font-family:var(--mono);font-size:1.45rem;line-height:42px;transition:transform .12s;word-break:keep-all}
.ty-text .w{display:inline-block;white-space:pre;margin-right:0}.ty-text i{font-style:normal;color:var(--muted);position:relative}
.ty-text i.ok{color:var(--text)}.ty-text i.bad{color:var(--red);background:#fce8e6;border-radius:3px}.ty-text i.x{color:var(--red);text-decoration:line-through}
html.dark .ty-text i.bad{background:#5c2b29}.ty-text .w.wrong i:not(.s){text-decoration:underline wavy var(--red)}
.ty-text i.cur:before{content:"";position:absolute;left:-1px;top:4px;bottom:4px;width:2px;background:var(--p);animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}.ty-text .w.shake{animation:shake .2s}@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.ty-cover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--bg) 70%,transparent);font-weight:500;color:var(--p);backdrop-filter:blur(2px)}
.ty-in{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.ty-kb{margin-top:14px}
:root{--f0:#fde2e1;--f1:#fff1c2;--f2:#d9f2e3;--f3:#d6e6fd;--f4:#e7dcfb;--f5:#d9f2e3;--f6:#fff1c2;--f7:#fde2e1;--f8:#eceff1}
.kb{display:grid;gap:5px;max-width:780px;margin:0 auto;user-select:none}.kr{display:flex;gap:5px}
.k{flex:1 1 0;min-width:0;height:42px;border-radius:8px;display:grid;place-items:center;font:600 13px var(--font);color:#2b3445;border:1px solid rgba(0,0,0,.08);box-shadow:0 2px 0 rgba(0,0,0,.08);position:relative}
.k.f0{background:var(--f0)}.k.f1{background:var(--f1)}.k.f2{background:var(--f2)}.k.f3{background:var(--f3)}.k.f4{background:var(--f4)}.k.f5{background:var(--f5)}.k.f6{background:var(--f6)}.k.f7{background:var(--f7)}.k.f8{background:var(--f8)}.k.fx{background:#eee}
.k-Bksp,.k-Tab{flex-grow:1.5}.k-Caps{flex-grow:1.8}.k-Enter{flex-grow:2.1}.k-ShiftL,.k-ShiftR{flex-grow:2.5}.k-Space{flex-grow:8;max-width:380px;margin:0 auto}.kr:last-child{justify-content:center}
.k.bump::after{content:"";position:absolute;bottom:7px;width:12px;height:2px;border-radius:2px;background:#333;opacity:.6}
.k.next{outline:3px solid var(--p);outline-offset:1px;transform:translateY(-2px);background:#fff;color:var(--p)}
.kb-hint{text-align:center;margin-top:10px;font-size:14px;color:var(--muted);min-height:21px}
@media(max-width:700px){.kb{display:none}.kb-hint{display:none}.ty-text{font-size:1.15rem;line-height:36px}}

/* exam engine */
.exam-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--card);padding:10px 14px;border-radius:12px;box-shadow:var(--shadow);margin-bottom:12px;position:sticky;top:64px;z-index:5}
.exam-top .clock{font-family:var(--mono);font-size:1.7rem;font-weight:700}.exam-top .clock.low{color:var(--red)}
.ex-pass{background:var(--card);border-radius:12px;box-shadow:var(--shadow);padding:14px 18px;height:38vh;overflow-y:auto;font-family:"Times New Roman",Georgia,serif;font-size:1.25rem;line-height:1.75;white-space:pre-wrap;tab-size:4;user-select:none}
.ex-area{width:100%;height:36vh;min-height:220px;font-family:var(--mono);font-size:1.12rem;line-height:1.7;padding:14px 16px;border-radius:12px;tab-size:4;white-space:pre-wrap;resize:none;margin-top:12px}
.ex-area.paper{height:62vh}
.demo-pass{white-space:pre-wrap;tab-size:4;font-family:"Times New Roman",Georgia,serif;font-size:1.2rem;line-height:1.7;background:var(--bg);border-radius:10px;padding:12px 16px}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media(max-width:820px){.cmp{grid-template-columns:1fr}}
.cmp .box{background:var(--bg);border-radius:12px;padding:12px 14px;max-height:420px;overflow:auto;font-family:var(--mono);font-size:.95rem;line-height:1.75;white-space:pre-wrap;tab-size:4}
.d-ok{}.d-sub{background:#fce8e6;color:#c5221f;border-radius:3px;text-decoration:line-through}.d-fix{background:#e6f4ea;color:#137333;border-radius:3px}
.d-omit{background:#fef7e0;color:#b06000;border-radius:3px}.d-extra{background:#fce8e6;color:#c5221f;border-radius:3px;text-decoration:line-through}.d-case{background:#e8f0fe;color:#1967d2;border-radius:3px}
html.dark .d-sub,html.dark .d-extra{background:#5c2b29;color:#f6aea9}html.dark .d-fix{background:#1e3a29;color:#81c995}html.dark .d-omit{background:#4a3c0f;color:#fdd663}html.dark .d-case{background:#1f2b3e;color:#8ab4f8}
.bigscore{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin:10px 0 16px}
.bigscore div{background:var(--bg);border-radius:12px;padding:12px;text-align:center}.bigscore b{display:block;font-size:1.7rem}.bigscore span{font-size:.82rem;color:var(--muted)}
.lock-screen{text-align:center;padding:40px 16px}.lock-screen .clock{font-size:3rem;font-family:var(--mono);font-weight:700;color:var(--p)}

/* coach */
.coachbar{position:fixed;right:16px;bottom:16px;z-index:45;background:var(--card);box-shadow:0 6px 24px rgba(0,0,0,.2);border-radius:16px;padding:12px 14px;max-width:320px;border-left:5px solid var(--green);font-size:.92rem}
.coachbar b{display:block}.coachbar .row{margin-top:8px}
.task{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--bg);margin:6px 0}
.task.now{outline:2px solid var(--p);background:var(--soft)}.task.done{opacity:.6}.task .n{width:28px;height:28px;border-radius:50%;background:var(--card);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem}
.roadmap{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.roadmap div{background:var(--bg);border-radius:12px;padding:12px;border-top:4px solid var(--p)}

/* rank + courses + store */
.rank-res{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.course{display:grid;grid-template-columns:1fr 340px;gap:18px}@media(max-width:860px){.course{grid-template-columns:1fr}}
.toc a{display:block;padding:7px 10px;border-radius:8px;color:var(--text);font-size:.92rem}.toc a.on,.toc a:hover{background:var(--soft);color:var(--p);text-decoration:none}
.vlist img{width:150px}
.vlist button{display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:var(--card);border:0;border-radius:12px;padding:8px;margin-bottom:10px;cursor:pointer;box-shadow:var(--shadow)}
.vlist img{width:120px;border-radius:8px}.vlist button.on{outline:2px solid var(--p)}
.prod{display:flex;flex-direction:column;gap:8px}.prod .price b{font-size:1.5rem}.prod .price s{color:var(--muted);margin-left:6px}

/* live users button + blinking dot */
.live-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:#fce8e6;color:#c5221f!important;font-weight:600;font-size:.85rem;text-decoration:none!important}
html.dark .live-btn{background:#5c2b29;color:#f6aea9!important}
.live-btn i,.live-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#ea4335;box-shadow:0 0 0 0 rgba(234,67,53,.7);animation:pulse 1.4s infinite}
.live-dot{width:11px;height:11px;margin-right:6px;vertical-align:middle}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(234,67,53,.7)}70%{box-shadow:0 0 0 8px rgba(234,67,53,0)}100%{box-shadow:0 0 0 0 rgba(234,67,53,0)}}
@media(max-width:820px){.live-btn span{display:none}}
.up{color:#137333;font-weight:700}.down{color:#c5221f;font-weight:700}html.dark .up{color:#81c995}
a.who{font-weight:600;color:var(--text)}a.who:hover{color:var(--p)}
/* tests table */
table.tests td{vertical-align:middle;font-size:.9rem}table.tests td:not(.wrap){white-space:nowrap}
.badge{display:inline-block;padding:3px 8px;border-radius:6px;font-size:.72rem;font-weight:700;color:#fff;white-space:nowrap}.badge.pass{background:#34a853}.badge.fail{background:#ea4335}
/* live score window (home) */
.feed{position:fixed;right:16px;top:84px;width:290px;z-index:20;background:var(--card);border-radius:16px;box-shadow:0 6px 24px rgba(0,0,0,.18);overflow:hidden}
.feed-h{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line)}.feed-h b{flex:1}.feed-x{width:28px;height:28px}
.feed-list{height:330px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:8px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 70px);mask-image:linear-gradient(to bottom,transparent 0,#000 70px)}
.feed-i{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:0 8px;padding:8px 10px;border-radius:10px;background:var(--bg);animation:rise .6s ease-out;position:relative}
.feed-i .fn{font-weight:600}.feed-i b{grid-row:1/3;grid-column:2;align-self:center;font-size:1.15rem}.feed-i small{font-size:.65rem;color:var(--muted)}
@keyframes rise{from{opacity:0;transform:translateY(30px)}}
.feed-i.f1{background:#e6f4ea}.feed-i.f1 .fn{color:#137333}
.feed-i.f2 .fn,.feed-i.f3 .fn,.feed-i.f4 .fn,.feed-i.f5 .fn{background:linear-gradient(90deg,#ff6a00,#ee0979,#ff6a00);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flame 1.6s linear infinite}
.feed-i.f2{background:#fff4e5}.feed-i.f3{background:#ffe9d6;box-shadow:0 0 8px rgba(255,120,0,.35)}.feed-i.f4{background:#ffdcc7;box-shadow:0 0 14px rgba(255,90,0,.5)}
.feed-i.f5{background:linear-gradient(135deg,#ffb199,#ff0844);color:#fff;box-shadow:0 0 22px rgba(255,40,0,.7);animation:rise .6s ease-out,burn 1s ease-in-out infinite alternate}
.feed-i.f5 .fn{background:none;color:#fff;-webkit-text-fill-color:#fff}.feed-i.f5 .muted{color:#ffe}
.feed-i.f2 .fn:after{content:" \1F525"}.feed-i.f3 .fn:after{content:" \1F525\1F525"}.feed-i.f4 .fn:after{content:" \1F525\1F525\1F525"}.feed-i.f5 .fn:after{content:" \1F525\1F525\1F525\1F525"}
.feed-i.f2 .fn:after,.feed-i.f3 .fn:after,.feed-i.f4 .fn:after{-webkit-text-fill-color:initial}
html.dark .feed-i.f1{background:#1e3a29}html.dark .feed-i.f2,html.dark .feed-i.f3,html.dark .feed-i.f4{background:#4a2a12}
@keyframes flame{to{background-position:200% center}}@keyframes burn{from{box-shadow:0 0 14px rgba(255,60,0,.6)}to{box-shadow:0 0 30px rgba(255,140,0,.95)}}
@media(max-width:1300px){.feed{position:static;width:auto;margin:0 16px 16px}.feed-list{height:250px}}
@media(min-width:1301px){body.v-home #view{padding-right:320px}}
/* real test toolbar + shadow mode */
.tb{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:var(--card);cursor:pointer;font-size:.82rem;font-weight:500}
.tb.on{background:var(--p);border-color:var(--p);color:#fff}
.shadow .ex-area,.shadow .ex-pass{opacity:.1;transition:opacity .4s}.shadow.awake .ex-area,.shadow.awake .ex-pass{opacity:1;transition:opacity .15s}
.rate{display:flex;flex-wrap:wrap;gap:6px}.rate button{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--card);cursor:pointer;font-weight:700}
.rate button:hover,.rate button.on{background:var(--p);color:#fff;border-color:var(--p)}