:root{
  /* Tilli Brandbook — Primary Colors */
  --bg:#0F0A1F;--s1:#1a1130;--s2:#231848;--s3:#2d2060;
  --border:rgba(108,60,225,.2);--border2:rgba(108,60,225,.35);
  /* Brand accent */
  --accent:#00D4AA;--adim:rgba(0,212,170,.12);--aglow:rgba(0,212,170,.3);
  /* Purple primary */
  --purple:#6C3CE1;--pdim:rgba(108,60,225,.15);--pglow:rgba(108,60,225,.3);
  --purple-light:#A855F7;
  /* Orange energy */
  --orange:#FF6B35;--odim:rgba(255,107,53,.12);
  /* Utility */
  --blue:#4d9eff;--bdim:rgba(77,158,255,.12);
  --red:#ff5a5a;--rdim:rgba(255,90,90,.12);
  --gold:#ffd166;--gdim:rgba(255,209,102,.12);
  --green:#4ade80;--gndim:rgba(74,222,128,.12);
  --text:#F8F6FF;--text2:#8B85A1;--text3:#4a4466;
  --r:12px;--r2:18px;
}
body.light{
  --bg:#F8F6FF;--s1:#ffffff;--s2:#EDE4FF;--s3:#ddd4f8;
  --border:rgba(108,60,225,.15);--border2:rgba(108,60,225,.3);
  --text:#0F0A1F;--text2:#4a3d7a;--text3:#8B85A1;
  --adim:rgba(0,212,170,.1);--pdim:rgba(108,60,225,.1);
  --bdim:rgba(40,100,220,.1);--rdim:rgba(200,50,50,.1);
  --gdim:rgba(160,130,0,.1);--gndim:rgba(40,160,80,.1);
  --aglow:rgba(0,180,130,.2);--pglow:rgba(108,60,225,.2);
}
body.light .app-bar{background:rgba(248,246,255,.97);box-shadow:0 1px 12px rgba(108,60,225,.08);border-bottom:1px solid rgba(108,60,225,.15);}
body.light .tabs{background:var(--s1);box-shadow:0 1px 4px rgba(108,60,225,.08);}
body.light .status-bar{background:var(--s1);}
body.light body::before{display:none;}
body.light .seg button.on{color:#fff;}
body.light .word-chip{background:var(--s3);color:var(--text);}
body.light .score-card,.light .ex-card,.light .scard,.light .unit-card,.light .li,.light .card,.light .home-card,.light .vcard,.light .sp-word-bar{background:var(--s1)!important;}
body.light .sel option{background:var(--s1);}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
html,body{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;overflow-y:auto;-webkit-text-size-adjust:100%;}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 60% 50% at 20% 20%,rgba(108,60,225,.15) 0%,transparent 60%),radial-gradient(ellipse 50% 50% at 80% 80%,rgba(0,212,170,.08) 0%,transparent 60%);pointer-events:none;z-index:0;}
::-webkit-scrollbar{width:4px;}::-webkit-scrollbar-track{background:transparent;}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px;}
.screen{display:none;position:relative;z-index:1;background:var(--bg) !important;}
.screen.active{display:flex;min-height:100vh;background:var(--bg) !important;}
#setup-screen{min-height:100vh;align-items:center;justify-content:center;padding:20px;}
.sw{max-width:540px;width:100%;}
.logo{font-family:'Georgia',serif;font-size:30px;font-weight:bold;background:linear-gradient(135deg,#6C3CE1,#A855F7,#00D4AA);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px;}
.tagline{color:var(--text2);font-size:13px;margin-bottom:24px;}
.card{background:var(--s1);border:1px solid var(--border);border-radius:24px;padding:24px 20px;}
.card h2{font-family:'Inter',sans-serif;font-size:18px;font-weight:700;margin-bottom:8px;}
.card p{color:var(--text2);font-size:13px;line-height:1.7;margin-bottom:18px;}
.card p a{color:var(--accent);text-decoration:none;}
.lbl{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--text2);text-transform:uppercase;margin-bottom:6px;display:block;}
.inp{width:100%;background:var(--s2);border:1px solid var(--border);border-radius:var(--r);padding:11px 16px;color:var(--text);font-size:14px;font-family:'Inter',sans-serif;outline:none;transition:border-color .2s;}
.inp:focus{border-color:var(--purple);}
.inp::placeholder{color:var(--text3);}
.mt{margin-top:14px;}
.seg{display:flex;background:var(--s2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;}
.seg button{flex:1;padding:8px 4px;background:transparent;border:none;color:var(--text2);font-size:12px;font-weight:500;font-family:'Inter',sans-serif;cursor:pointer;transition:all .15s;}
.seg button.on{background:var(--purple);color:#fff;font-weight:700;}
.sel{width:100%;background:var(--s2);border:1px solid var(--border);border-radius:var(--r);padding:9px 14px;color:var(--text);font-size:13px;font-family:'Inter',sans-serif;outline:none;cursor:pointer;}
.sel option{background:var(--s2);}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 20px;border-radius:var(--r);font-size:14px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;border:none;transition:all .2s;}
.btn-g{background:linear-gradient(135deg,var(--purple),var(--purple-light));color:#fff;width:100%;margin-top:16px;}
.btn-g:hover{transform:translateY(-1px);box-shadow:0 8px 28px var(--pglow);}
.btn-s{background:var(--s2);color:var(--text);border:1px solid var(--border);}
.btn-s:hover{background:var(--s3);}
.btn-sm{padding:7px 14px;font-size:12px;}
.optional-badge{display:inline-block;background:var(--gdim);border:1px solid rgba(255,209,102,.2);color:var(--gold);padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:.06em;margin-left:8px;vertical-align:middle;}
#app-screen{flex-direction:column;min-height:100vh;overflow-x:hidden;}
.app-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid rgba(108,60,225,.2);background:rgba(15,10,31,.95);backdrop-filter:blur(20px);position:sticky;top:0;z-index:100;}
.app-logo{font-family:'Georgia',serif;font-size:18px;font-weight:bold;background:linear-gradient(135deg,#6C3CE1,#A855F7,#00D4AA);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;cursor:pointer;}
.hright{display:flex;align-items:center;gap:8px;}
.badge{background:var(--pdim);border:1px solid rgba(108,60,225,.35);color:var(--purple-light);padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700;}
.icon-btn{width:34px;height:34px;border-radius:9px;background:var(--s2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text2);font-size:15px;transition:all .15s;}
.icon-btn:hover{background:var(--s3);color:var(--text);}

.tabs-wrap{position:relative;}
.tabs-wrap::after{content:'';position:absolute;right:0;top:0;bottom:1px;width:70px;background:linear-gradient(to left,rgba(15,10,31,.98) 20%,transparent 100%);pointer-events:none;z-index:2;}
.tabs{display:flex;padding:8px 12px 8px 10px;gap:3px;border-bottom:1px solid rgba(108,60,225,.2);background:rgba(15,10,31,.98);backdrop-filter:blur(8px);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;position:relative;scroll-behavior:smooth;}
.tabs::-webkit-scrollbar{display:none;}
.tab{padding:8px 14px;border-radius:30px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid transparent;background:transparent;color:var(--text3);font-family:'Helvetica Neue',sans-serif;transition:all .18s;white-space:nowrap;display:flex;align-items:center;gap:5px;letter-spacing:.01em;}
.tab.on{color:#fff;background:var(--purple);border-color:var(--purple);box-shadow:0 3px 14px var(--pglow);}
.tab:hover:not(.on){color:var(--text);background:rgba(108,60,225,.12);border-color:rgba(108,60,225,.3);}
.app-body{flex:1;display:flex;flex-direction:column;max-width:1000px;width:100%;margin:0 auto;padding:0 24px;overflow-x:hidden;background:var(--bg) !important;}
.panel{display:none;padding:16px 0 100px;background:var(--bg);min-height:calc(100vh - 100px);}
.panel.on{display:block;background:var(--bg);}
#bv-chat{flex-direction:column;flex:1;}
#bv-chat[style*="display:flex"]{display:flex!important;flex-direction:column;flex:1;}
.ph{margin-bottom:20px;}
.ph h2{font-family:'Georgia',serif;font-size:22px;font-weight:bold;margin-bottom:5px;}
.ph p{font-size:14px;color:var(--text2);}
.unit-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;min-height:10px;}
.unit-card{background:var(--s1);border:1px solid var(--border);border-radius:20px;padding:20px 22px;cursor:pointer;transition:all .22s;position:relative;overflow:hidden;display:flex;align-items:center;gap:18px;}
.unit-card-icon{width:58px;height:58px;border-radius:16px;background:var(--pdim);border:1px solid rgba(108,60,225,.2);display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0;transition:all .22s;}
.unit-card-body{flex:1;min-width:0;}
.unit-card-arrow{width:32px;height:32px;border-radius:50%;background:var(--s2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .22s;}
.unit-card-arrow svg{transition:transform .22s;}
.unit-card::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,var(--pdim),transparent 60%);opacity:0;transition:opacity .22s;}
.unit-card:hover{border-color:var(--purple);transform:translateY(-2px);box-shadow:0 12px 32px rgba(108,60,225,.2);}
.unit-card:hover::before{opacity:1;}
.unit-card:hover .unit-card-icon{background:rgba(108,60,225,.18);border-color:rgba(108,60,225,.3);transform:scale(1.06);}
.unit-card:hover .unit-card-arrow{background:var(--purple);border-color:var(--purple);}
.unit-card:hover .unit-card-arrow svg{stroke:#fff;transform:translateX(2px);}
.un{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--purple-light);text-transform:uppercase;margin-bottom:5px;}
.ut{font-family:'Georgia',serif;font-size:18px;font-weight:bold;margin-bottom:4px;line-height:1.25;}
.uts{font-size:13px;color:var(--text2);line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lesson-list{display:flex;flex-direction:column;gap:10px;}
.li{background:var(--s1);border:1px solid var(--border);border-radius:16px;padding:16px 20px;cursor:pointer;transition:all .18s;display:flex;align-items:center;gap:14px;}
.li:hover{border-color:var(--purple);background:var(--pdim);transform:translateX(4px);}
.ltag{background:var(--pdim);border:1px solid rgba(108,60,225,.3);color:var(--purple-light);border-radius:8px;padding:5px 13px;font-size:12px;font-weight:700;flex-shrink:0;letter-spacing:.02em;}
.linfo{flex:1;}
.lname{font-size:16px;font-weight:700;}
.ldesc{font-size:13px;color:var(--text2);margin-top:3px;line-height:1.4;}
.li-arr{width:28px;height:28px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .18s;}
.li:hover .li-arr{background:var(--purple);border-color:var(--purple);}
.li:hover .li-arr svg{stroke:#fff;}
.back-btn{display:inline-flex;align-items:center;gap:7px;color:var(--text2);font-size:13px;font-weight:500;cursor:pointer;margin-bottom:16px;padding:8px 16px;background:var(--s2);border:1px solid var(--border);border-radius:30px;transition:all .18s;width:fit-content;}
.back-btn:hover{color:var(--purple-light);border-color:var(--purple);background:var(--pdim);}
.chat-area{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:4px 0 12px;min-height:200px;max-height:calc(100vh - 300px);scrollbar-width:thin;scrollbar-color:var(--border) transparent;-webkit-overflow-scrolling:touch;}
.msg{display:flex;gap:10px;animation:fu .28s ease;}
@keyframes fu{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:translateY(0);}}
.msg.ai{flex-direction:row;}.msg.user{flex-direction:row-reverse;}
.av{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;align-self:flex-start;margin-top:2px;overflow:hidden;}
.av.a{background:linear-gradient(135deg,#1a0a3a,#2d1b69);border:1px solid rgba(108,60,225,.3);}
.av.u{background:var(--bdim);border:1px solid rgba(77,158,255,.2);}
.bubble{max-width:78%;padding:14px 18px;border-radius:18px;font-size:15px;line-height:1.72;}
.msg.ai .bubble{background:linear-gradient(140deg,var(--s2),rgba(19,28,46,.95));border:1px solid var(--border);border-top-left-radius:5px;}
.msg.user .bubble{background:linear-gradient(140deg,rgba(77,158,255,.14),rgba(77,158,255,.07));border:1px solid rgba(77,158,255,.25);border-top-right-radius:5px;color:var(--blue);}
.corr{margin-top:8px;padding:10px 13px;background:rgba(255,90,90,.06);border:1px solid rgba(255,90,90,.2);border-radius:10px;font-size:14px;white-space:pre-line;}
.usage-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;}
.usage-box{background:var(--s2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;}
.usage-box .ub-lbl{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);margin-bottom:4px;}
.usage-box .ub-val{font-size:15px;font-weight:700;color:var(--text);}
.usage-box .ub-sub{font-size:11px;color:var(--text3);margin-top:1px;}
.usage-bar-wrap{height:4px;background:var(--s3);border-radius:3px;overflow:hidden;margin-top:6px;}
.usage-bar{height:100%;border-radius:3px;transition:width .4s;}
.usage-reset{font-size:11px;color:var(--text3);margin-top:8px;text-align:right;}
.groq-limit-cfg{margin-top:10px;display:flex;gap:8px;align-items:center;}
.groq-limit-cfg label{font-size:11px;color:var(--text3);white-space:nowrap;}
.groq-limit-cfg input{width:90px;}
.corr-lbl{font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--red);text-transform:uppercase;margin-bottom:4px;}
.spk{margin-top:8px;display:inline-flex;align-items:center;gap:5px;background:var(--adim);border:1px solid rgba(0,229,176,.2);color:var(--accent);padding:4px 10px;border-radius:20px;font-size:12px;cursor:pointer;font-family:'Inter',sans-serif;font-weight:600;}
.spk:hover{background:rgba(0,229,176,.2);}
.trn-btn{display:inline-flex;align-items:center;gap:5px;background:var(--gdim);border:1px solid rgba(255,209,102,.2);color:var(--gold);padding:4px 10px;border-radius:20px;font-size:12px;cursor:pointer;font-family:'Inter',sans-serif;font-weight:600;}
.trn-btn:hover{background:rgba(255,209,102,.2);}
.trn-box{margin-top:7px;padding:8px 12px;background:var(--gdim);border:1px solid rgba(255,209,102,.18);border-radius:10px;font-size:13px;color:var(--gold);line-height:1.6;display:none;}
.trn-box.show{display:block;}
.spk:hover{background:rgba(0,229,176,.2);}
.think{display:flex;align-items:center;gap:5px;padding:9px 12px;}
.think span{width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.3;animation:th .8s infinite;}
.think span:nth-child(2){animation-delay:.15s;}
.think span:nth-child(3){animation-delay:.3s;}
@keyframes th{0%,100%{opacity:.3;transform:translateY(0);}50%{opacity:1;transform:translateY(-5px);}}
.mic-area{padding:13px 0 4px;border-top:1px solid var(--border);display:flex;flex-direction:column;align-items:center;gap:9px;}
.t-box{width:100%;min-height:46px;background:var(--s2);border:1px solid var(--border);border-radius:var(--r);padding:11px 16px;font-size:15px;color:var(--text3);font-style:italic;transition:all .2s;}
.t-box.on{color:var(--text);font-style:normal;border-color:rgba(0,229,176,.4);}
.wave{display:none;align-items:flex-end;justify-content:center;gap:3px;height:24px;}
.wave.show{display:flex;}
.wave span{width:4px;border-radius:4px;background:var(--red);animation:wv .7s ease-in-out infinite;}
.wave span:nth-child(1){height:7px;animation-delay:0s;}.wave span:nth-child(2){height:15px;animation-delay:.1s;}
.wave span:nth-child(3){height:21px;animation-delay:.2s;}.wave span:nth-child(4){height:12px;animation-delay:.15s;}
.wave span:nth-child(5){height:18px;animation-delay:.05s;}.wave span:nth-child(6){height:9px;animation-delay:.25s;}
.wave span:nth-child(7){height:16px;animation-delay:.1s;}
@keyframes wv{0%,100%{transform:scaleY(.5);opacity:.6;}50%{transform:scaleY(1);opacity:1;}}
.mic-ctrl{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;}
.rrow{display:flex;flex-direction:column;align-items:center;gap:6px;}
.rec-btn{width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#00c49a);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:26px;color:#05120e;box-shadow:0 4px 20px var(--aglow);transition:all .2s;}
.rec-btn:hover{transform:scale(1.07);}
.stop-btn{width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,var(--red),#c0392b);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:22px;animation:rp 1.2s infinite;}
@keyframes rp{0%,100%{box-shadow:0 4px 18px rgba(255,90,90,.3);}50%{box-shadow:0 0 36px rgba(255,90,90,.6);}}
.rev-row{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;animation:fu .2s ease;}
.del-btn{flex:1;max-width:145px;display:flex;align-items:center;justify-content:center;gap:7px;padding:12px;border-radius:var(--r);background:var(--rdim);border:1px solid rgba(255,90,90,.3);color:var(--red);font-size:15px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;}
.snd-btn{flex:1;max-width:145px;display:flex;align-items:center;justify-content:center;gap:7px;padding:12px;border-radius:var(--r);background:linear-gradient(120deg,var(--accent),#00b890);border:none;color:#05120e;font-size:15px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;}
.snd-btn:hover{transform:translateY(-1px);box-shadow:0 5px 16px var(--aglow);}
.mic-lbl{font-size:13px;color:var(--text3);}
.rec-lbl{font-size:13px;color:var(--red);display:flex;align-items:center;gap:5px;}
.rdot{width:6px;height:6px;border-radius:50%;background:var(--red);animation:rd 1s infinite;}
@keyframes rd{0%,100%{opacity:1;}50%{opacity:.1;}}
/* MIC AREA — ixcham */
.mic-area{padding:10px 0 4px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.mic-status{flex:1;font-size:13px;color:var(--text3);font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mic-status.on{color:var(--text);font-style:normal;}
.mic-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.t-box{display:none;}
.wave{align-items:center;gap:2px;height:20px;flex-shrink:0;}
.wave.show{display:flex;}
.wave span{width:3px;border-radius:3px;background:var(--red);animation:wv .7s ease-in-out infinite;}
.wave span:nth-child(1){height:5px;animation-delay:0s;}.wave span:nth-child(2){height:12px;animation-delay:.1s;}
.wave span:nth-child(3){height:18px;animation-delay:.2s;}.wave span:nth-child(4){height:10px;animation-delay:.15s;}
.wave span:nth-child(5){height:15px;animation-delay:.05s;}.wave span:nth-child(6){height:7px;animation-delay:.25s;}
.wave span:nth-child(7){height:13px;animation-delay:.1s;}
@keyframes wv{0%,100%{transform:scaleY(.5);opacity:.6;}50%{transform:scaleY(1);opacity:1;}}
.mic-ctrl{display:flex;align-items:center;gap:8px;}
.rrow{display:flex;align-items:center;gap:8px;}
.rec-btn{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#00c49a);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#05120e;box-shadow:0 3px 14px var(--aglow);transition:all .2s;flex-shrink:0;}
.rec-btn:hover{transform:scale(1.07);}
.stop-btn{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--red),#c0392b);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;animation:rp 1.2s infinite;flex-shrink:0;}
@keyframes rp{0%,100%{box-shadow:0 3px 14px rgba(255,90,90,.3);}50%{box-shadow:0 0 28px rgba(255,90,90,.6);}}
.rev-row{display:flex;align-items:center;gap:8px;animation:fu .2s ease;}
.del-btn{display:flex;align-items:center;gap:5px;padding:9px 14px;border-radius:var(--r);background:var(--rdim);border:1px solid rgba(255,90,90,.3);color:var(--red);font-size:13px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;white-space:nowrap;}
.snd-btn{display:flex;align-items:center;gap:5px;padding:9px 16px;border-radius:var(--r);background:linear-gradient(120deg,var(--accent),#00b890);border:none;color:#05120e;font-size:13px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;white-space:nowrap;}
.snd-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px var(--aglow);}
.mic-lbl{font-size:12px;color:var(--text3);}
.rec-lbl{font-size:12px;color:var(--red);display:flex;align-items:center;gap:4px;}
.rdot{width:6px;height:6px;border-radius:50%;background:var(--red);animation:rd 1s infinite;}
@keyframes rd{0%,100%{opacity:1;}50%{opacity:.1;}}

/* UNIT GRID — override */

/* BOOK panel sarlavha */
.book-header{background:linear-gradient(135deg,var(--s2),var(--s1));border:1px solid rgba(108,60,225,.25);border-radius:20px;padding:20px 22px;margin-bottom:16px;position:relative;overflow:hidden;}
.book-header::before{content:'';position:absolute;top:-20px;right:-20px;width:100px;height:100px;background:radial-gradient(circle,var(--pglow),transparent 70%);pointer-events:none;}
.book-header h2{font-family:'Georgia',serif;font-size:22px;font-weight:bold;margin-bottom:4px;}
.book-header p{font-size:13px;color:var(--text2);line-height:1.6;}
.voc-lesson-hdr .ltag{margin-bottom:6px;display:inline-block;}
.voc-lesson-hdr h3{font-family:'Inter',sans-serif;font-size:16px;font-weight:700;}
.voc-mode-bar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.voc-mode-bar span{font-size:13px;color:var(--text2);font-weight:500;}
.mode-seg{display:flex;background:var(--s2);border:1px solid var(--border);border-radius:14px;overflow:hidden;flex:1;min-width:240px;}
.mode-seg button{flex:1;padding:11px 8px;background:transparent;border:none;color:var(--text2);font-size:13px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;transition:all .18s;line-height:1.3;}
.mode-seg button.on{background:linear-gradient(135deg,var(--purple),var(--purple-light));color:#fff;font-weight:700;}
.vcard-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;padding:10px 0;}
.vcard{background:linear-gradient(160deg,var(--s2) 0%,var(--s1) 100%);border:1px solid var(--border);border-radius:28px;padding:40px 32px;text-align:center;width:100%;max-width:520px;position:relative;box-shadow:0 12px 40px rgba(0,0,0,.28);}
.vc-progress{position:absolute;top:14px;right:16px;font-size:12px;color:var(--text3);font-weight:600;}
.vc-label{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--text3);text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:6px;}
.vc-word{font-family:'Georgia',serif;font-size:40px;font-weight:bold;background:linear-gradient(135deg,#6C3CE1,#00D4AA);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:12px;line-height:1.1;letter-spacing:-.01em;}
.vc-hint{font-size:13px;color:var(--text3);margin-bottom:0;}
.vc-result{margin-top:14px;padding:12px 16px;border-radius:var(--r);font-size:14px;font-weight:600;display:none;}
.vc-result.correct{background:var(--gndim);border:1px solid rgba(74,222,128,.25);color:var(--green);}
.vc-result.wrong{background:var(--rdim);border:1px solid rgba(255,90,90,.25);color:var(--red);}
.vc-speak-btn{display:flex;align-items:center;gap:6px;background:var(--adim);border:1px solid rgba(0,229,176,.2);color:var(--accent);padding:7px 14px;border-radius:20px;font-size:13px;cursor:pointer;font-family:'Inter',sans-serif;font-weight:600;margin:8px auto 0;}
.vc-speak-btn:hover{background:rgba(0,229,176,.2);}
.score-card{background:var(--s1);border:1px solid var(--border);border-radius:24px;padding:32px;text-align:center;margin-top:20px;}
.score-card .score-num{font-family:'Georgia',serif;font-size:52px;font-weight:bold;background:linear-gradient(135deg,#6C3CE1,#00D4AA);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.score-card .score-total{font-size:16px;color:var(--text2);margin-bottom:16px;}
.score-card .score-msg{font-size:15px;color:var(--text);margin-bottom:20px;}
.scard{background:var(--s1);border:1px solid var(--border);border-radius:var(--r2);padding:16px;margin-bottom:11px;}
.scard h4{font-size:11px;font-weight:700;letter-spacing:.07em;color:var(--text2);text-transform:uppercase;margin-bottom:11px;}
.scard p{font-size:12px;color:var(--text3);line-height:1.6;margin-top:8px;}
.sp-wrap{display:flex;flex-direction:column;align-items:center;gap:0;width:100%;max-width:500px;margin:0 auto;}
.sp-emoji-box{width:100%;aspect-ratio:16/9;background:linear-gradient(160deg,var(--s3) 0%,var(--s2) 100%);border:1px solid var(--border);border-bottom:none;display:flex;align-items:center;justify-content:center;border-radius:20px 20px 0 0;font-size:80px;position:relative;box-shadow:0 2px 16px rgba(0,0,0,.15);}
.sp-progress{display:none;}
.sp-word-bar{width:100%;background:var(--s1);border:1px solid var(--border);border-top:none;padding:22px 16px 24px;display:flex;flex-direction:column;align-items:center;gap:14px;border-radius:0 0 20px 20px;}
.sp-uz-word{font-family:'Inter',sans-serif;font-size:22px;font-weight:800;color:var(--text);letter-spacing:.01em;text-align:center;margin-bottom:4px;}
.sp-letters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:6px;}
.sp-box{width:46px;height:54px;border-radius:12px;background:var(--s3);border:2px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:800;text-transform:lowercase;transition:border-color .15s,background .15s,color .15s;font-family:'Inter',sans-serif;color:var(--text);cursor:text;position:relative;overflow:visible;}
.sp-box.space{width:16px;background:transparent;border:none;}

.sp-box.correct{border-color:var(--green);background:rgba(74,222,128,.1);color:var(--green);animation:pop .25s ease;box-shadow:0 0 0 2px rgba(74,222,128,.2);}
.sp-box.wrong{border-color:var(--red);background:rgba(255,90,90,.1);color:var(--red);animation:shake .35s ease;box-shadow:0 0 0 2px rgba(255,90,90,.2);}
.sp-box.hint{border-color:var(--gold);color:var(--gold);}
@keyframes pop{0%{transform:scale(.8);}60%{transform:scale(1.15);}100%{transform:scale(1);}}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-5px);}75%{transform:translateX(5px);}}
.sp-input{position:fixed;top:-120px;left:0;width:100%;height:40px;opacity:0;pointer-events:none;direction:ltr;text-align:left;unicode-bidi:normal;caret-color:transparent;color:transparent;font-size:16px;border:none;outline:none;background:transparent;z-index:-1;}
.sp-input:focus{border-color:var(--accent);}
.sp-feedback{text-align:center;max-width:500px;width:100%;margin:0 auto;width:100%;max-width:460px;padding:12px 16px;border-radius:var(--r);font-size:14px;font-weight:600;text-align:center;display:none;}
.sp-feedback.correct{background:var(--gndim);border:1px solid rgba(74,222,128,.25);color:var(--green);}
.sp-feedback.wrong{background:var(--rdim);border:1px solid rgba(255,90,90,.25);color:var(--red);}
.sp-hint-btn{background:rgba(255,107,53,.12);border:1.5px solid rgba(255,107,53,.5);color:var(--orange);padding:14px 28px;border-radius:14px;font-size:15px;font-weight:700;cursor:pointer;font-family:'Helvetica Neue',sans-serif;transition:all .18s;display:inline-flex;align-items:center;gap:8px;flex:1;justify-content:center;}
.sp-hint-btn:hover{background:rgba(255,107,53,.22);transform:translateY(-1px);}
.ex-sentence{font-family:'Inter',sans-serif;font-size:24px;font-weight:700;text-align:center;line-height:1.65;color:var(--text);margin-bottom:0;padding:0 4px;}
.blank-spot{display:inline-block;min-width:90px;border-bottom:3px solid var(--accent);color:transparent;background:linear-gradient(120deg,var(--accent),var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:800;padding:0 6px;vertical-align:bottom;position:relative;}
.opts-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:520px;}
.opt-btn{padding:16px 16px;border-radius:16px;border:2px solid var(--border2);background:var(--s2);color:var(--text);font-size:16px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;transition:all .16s;display:flex;align-items:center;gap:12px;}
.opt-btn:hover:not(:disabled){border-color:var(--accent);background:rgba(0,229,176,.08);transform:scale(1.01);}
.opt-btn.correct{border-color:var(--green);background:var(--gndim);color:var(--green);}
.opt-btn.wrong{border-color:var(--red);background:var(--rdim);color:var(--red);}
.opt-btn .opt-letter{width:28px;height:28px;border-radius:8px;background:var(--s3);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0;color:var(--text3);transition:all .18s;}
.ex-feedback{margin-top:12px;padding:12px 16px;border-radius:var(--r);font-size:14px;font-weight:600;text-align:center;max-width:460px;margin:12px auto 0;}
.ex-feedback.correct{background:var(--gndim);border:1px solid rgba(74,222,128,.25);color:var(--green);}
.ex-feedback.wrong{background:var(--rdim);border:1px solid rgba(255,90,90,.25);color:var(--red);}
.ex-card{background:linear-gradient(160deg,var(--s2) 0%,var(--s1) 100%);border:1px solid var(--border);border-radius:28px;padding:34px 28px;width:100%;max-width:580px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:24px;box-shadow:0 12px 40px rgba(0,0,0,.22);}
.ex-progress-bar{width:100%;max-width:580px;height:5px;background:var(--s3);border-radius:3px;overflow:hidden;}
.ex-progress-fill{height:100%;background:linear-gradient(90deg,var(--purple),var(--purple-light));border-radius:3px;transition:width .4s ease;}
.ex-top{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:580px;}


.wo-sentence{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-height:68px;width:100%;max-width:600px;background:rgba(108,60,225,.05);border:2px dashed rgba(108,60,225,.25);border-radius:20px;padding:14px 16px;align-content:center;transition:border-color .2s;}
.wo-sentence.correct-line{border-color:var(--green) !important;background:rgba(74,222,128,.07) !important;border-style:solid !important;}
.word-chip{padding:12px 22px;border-radius:30px;font-size:16px;font-weight:700;cursor:pointer;user-select:none;border:2px solid var(--border2);background:var(--s2);color:var(--text);transition:all .15s;touch-action:none;letter-spacing:.01em;}
.word-chip:hover{background:var(--pdim);border-color:var(--purple);color:var(--purple-light);}
.word-chip.dragging{opacity:.4;cursor:grabbing;}
.word-chip.in-answer{background:rgba(108,60,225,.15);border-color:var(--purple);}
.word-pool{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%;max-width:600px;min-height:64px;padding:14px 16px;background:var(--s2);border:1px solid var(--border);border-radius:20px;}
.wo-labels{display:flex;justify-content:space-between;width:100%;max-width:600px;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--text3);text-transform:uppercase;margin-bottom:4px;}
.wo-check-btn{display:flex;align-items:center;gap:7px;padding:11px 24px;border-radius:var(--r);background:linear-gradient(135deg,var(--purple),var(--purple-light));border:none;color:#fff;font-size:14px;font-weight:700;font-family:'Helvetica Neue',sans-serif;cursor:pointer;}
.wo-check-btn:hover{transform:translateY(-1px);box-shadow:0 5px 16px var(--pglow);}
.wo-feedback{padding:12px 16px;border-radius:var(--r);font-size:14px;font-weight:600;text-align:center;width:100%;max-width:520px;}
.wo-feedback.correct{background:var(--gndim);border:1px solid rgba(74,222,128,.25);color:var(--green);}
.wo-feedback.wrong{background:var(--rdim);border:1px solid rgba(255,90,90,.25);color:var(--red);}
.status-bar{display:flex;align-items:center;gap:8px;padding:8px 20px;background:var(--s1);border-top:1px solid var(--border);font-size:12px;color:var(--text3);}
.sdot{width:6px;height:6px;border-radius:50%;background:var(--purple-light);}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--s2);border:1px solid var(--border2);border-radius:var(--r);padding:9px 18px;font-size:13px;color:var(--text);z-index:9999;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap;max-width:90vw;text-align:center;}
.toast.show{opacity:1;}
@media(max-width:600px){
  /* ── LAYOUT ── */
  .app-body{padding:0 14px !important;}
  .app-bar{padding:10px 14px;}
  .app-logo{font-size:16px;}
  .tabs{padding:7px 8px;gap:2px;}
  .tab{padding:7px 11px;font-size:12px;gap:4px;font-weight:600;}
  .tab svg{width:11px;height:11px;}

  /* ── HOME ── */
  .home-hero{padding:24px 0 16px;gap:9px;}
  .home-hero h1{font-size:26px;}
  .home-hero p{font-size:13px;}
  .home-hero-cta{padding:11px 18px;font-size:13px;}
  .home-stats{grid-template-columns:repeat(3,1fr);gap:8px;}
  .home-stat{padding:12px 8px;border-radius:14px;}
  .home-stat .hs-icon{font-size:18px;margin-bottom:4px;}
  .home-stat .hs-val{font-size:20px;}
  .home-stat .hs-lbl{font-size:10px;}
  .home-cards{grid-template-columns:1fr;gap:8px;}
  .home-card{padding:12px 14px;border-radius:14px;flex-direction:row;align-items:center;gap:12px;}
  .home-card::before{display:none;}
  .hc-top{flex-direction:row;align-items:center;gap:0;flex-shrink:0;}
  .hc-badge{display:none;}
  .hc-icon-wrap{width:40px;height:40px;border-radius:12px;font-size:20px;}
  .home-card .hc-title{font-size:15px;font-weight:700;}
  .home-card .hc-desc{display:none;}
  .hc-arrow{display:flex;color:var(--text3);}

  /* ── UNIT GRID ── */
  .unit-grid{grid-template-columns:1fr;display:grid!important;}
  .unit-card{padding:16px 18px;gap:14px;}
  .unit-card-icon{width:50px;height:50px;font-size:24px;}
  .ut{font-size:16px;}

  /* ── LESSON LIST ── */
  .li{padding:13px 16px;border-radius:14px;}
  .lname{font-size:14px;}
  .ldesc{font-size:12px;}

  /* ── CHAT ── */
  .bubble{max-width:90%;font-size:14px;padding:11px 14px;}
  .chat-area{max-height:calc(100vh - 360px);}
  .av{width:32px;height:32px;font-size:16px;border-radius:10px;}
  .corr{font-size:13px;}

  /* ── VOCABULARY ── */
  .vcard{padding:28px 20px;border-radius:22px;}
  .vc-word{font-size:30px;}
  .vc-speak-btn{font-size:12px;padding:6px 12px;}
  .voc-mode-bar{flex-direction:column;gap:8px;}
  .mode-seg{min-width:unset;width:100%;}

  /* ── SPELLING ── */
  .sp-emoji-box{aspect-ratio:16/9;font-size:70px;}
  .sp-box{width:38px;height:46px;font-size:18px;border-radius:10px;}
  .sp-letters{gap:6px;}
  .sp-uz-word{font-size:18px;}
  .sp-hint-btn{font-size:14px;padding:12px 20px;}

  /* ── MCQ / FILL ── */
  .ex-card{padding:22px 16px;border-radius:22px;gap:18px;}
  .ex-sentence{font-size:18px;}
  .opts-grid{grid-template-columns:1fr 1fr;gap:8px;max-width:100%;}
  .opt-btn{padding:13px 10px;font-size:14px;border-radius:13px;}
  .opt-btn .opt-letter{width:24px;height:24px;font-size:11px;}
  

  /* ── WORD ORDER ── */
  .wo-sentence{max-width:100%;min-height:58px;padding:12px;}
  .word-pool{max-width:100%;min-height:56px;padding:12px;}
  .wo-labels{max-width:100%;}
  .word-chip{padding:8px 14px;font-size:13px;}
  .wo-check-btn{padding:10px 20px;font-size:13px;}

  /* ── MIC AREA ── */
  .mic-area{padding:9px 0 3px;margin-bottom:0;}
  .mic-status{font-size:12px;}
  .rec-btn{width:44px;height:44px;}
  .stop-btn{width:44px;height:44px;}

  /* ── BACK BTN ── */
  .back-btn{font-size:12px;padding:6px 12px;}

  /* ── BOOK HEADER ── */
  .book-header{padding:16px 18px;border-radius:16px;}
  .book-header h2{font-size:20px;}
  .book-header p{font-size:12px;}

  /* ── SCORE ── */
  .score-card{padding:24px 18px;border-radius:20px;}
  .score-card .score-num{font-size:42px;}

  /* ── SETTINGS ── */
  .scard{padding:14px;}
  .usage-grid{grid-template-columns:1fr 1fr;gap:6px;}
}

@media(max-width:380px){
  .home-cards{grid-template-columns:1fr;}
  .opts-grid{grid-template-columns:1fr;}
  .tab{padding:6px 8px;font-size:10px;}
  .home-hero h1{font-size:24px;}
  .sp-box{width:34px;height:42px;font-size:16px;}
}
/* HOME PAGE */
/* HOME PAGE */
.home-hero{padding:44px 0 28px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;}
.home-hero-badge{display:inline-flex;align-items:center;gap:7px;background:var(--pdim);border:1px solid rgba(108,60,225,.35);color:var(--purple-light);padding:6px 16px;border-radius:30px;font-size:12px;font-weight:700;letter-spacing:.05em;}
.home-hero h1{font-family:'Georgia',serif;font-size:40px;font-weight:bold;line-height:1.1;background:linear-gradient(135deg,#6C3CE1 0%,#A855F7 45%,#00D4AA 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;max-width:540px;}
.home-hero p{font-size:15px;color:var(--text2);max-width:460px;line-height:1.8;}
.home-hero-btns{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap;justify-content:center;}
.home-hero-cta{display:flex;align-items:center;gap:8px;padding:13px 26px;border-radius:14px;font-size:14px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;border:none;transition:all .2s;}
.home-hero-cta.primary{background:linear-gradient(135deg,var(--purple),var(--purple-light));color:#fff;box-shadow:0 6px 24px var(--pglow);}
.home-hero-cta.primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px var(--pglow);}
.home-hero-cta.secondary{background:var(--s2);color:var(--text);border:1px solid var(--border);}
.home-hero-cta.secondary:hover{border-color:var(--purple);background:var(--pdim);}
.home-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:4px 0 8px;}
.home-stat{background:var(--s1);border:1px solid var(--border);border-radius:20px;padding:20px 14px;text-align:center;position:relative;overflow:hidden;cursor:default;}
.home-stat::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--purple),var(--accent));opacity:.5;}
.home-stat .hs-icon{font-size:24px;margin-bottom:8px;}
.home-stat .hs-val{font-family:'Georgia',serif;font-size:26px;font-weight:bold;color:var(--purple-light);}
.home-stat .hs-lbl{font-size:12px;color:var(--text2);margin-top:4px;font-weight:500;}
.home-section-title{font-family:'Inter',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--text3);text-transform:uppercase;margin:22px 0 12px;display:flex;align-items:center;gap:10px;}
.home-section-title::after{content:'';flex:1;height:1px;background:var(--border);}
.home-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.home-card{background:var(--s1);border:1px solid var(--border);border-radius:22px;padding:20px;cursor:pointer;transition:all .22s;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;}
.home-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(108,60,225,.12),transparent 70%);opacity:0;transition:opacity .22s;}
.home-card:hover{border-color:var(--purple);transform:translateY(-3px);box-shadow:0 12px 32px rgba(108,60,225,.2);}
.home-card:hover::before{opacity:1;}
.hc-top{display:flex;align-items:flex-start;justify-content:space-between;}
.hc-icon-wrap{width:48px;height:48px;border-radius:14px;background:var(--pdim);border:1px solid rgba(108,60,225,.2);display:flex;align-items:center;justify-content:center;font-size:24px;transition:transform .22s;}
.home-card:hover .hc-icon-wrap{transform:scale(1.08);}

.hc-body{flex:1;display:flex;flex-direction:column;gap:4px;}
.hc-arrow{display:none;color:var(--text3);}
.hc-badge{font-size:10px;font-weight:700;letter-spacing:.05em;padding:4px 10px;border-radius:20px;}
.hc-badge.ai{background:rgba(180,142,255,.12);border:1px solid rgba(180,142,255,.25);color:var(--purple);}
.hc-badge.practice{background:rgba(77,158,255,.1);border:1px solid rgba(77,158,255,.2);color:var(--blue);}
.home-card .hc-title{font-family:'Inter',sans-serif;font-size:16px;font-weight:800;line-height:1.25;}
.home-card .hc-desc{font-size:13px;color:var(--text2);line-height:1.6;}

/* BOTTOM NAV — mobile only */
.bottom-nav{display:none;}



.bn-more-item:active{background:var(--adim);border-color:var(--accent);color:var(--accent);}


#bv-chat, #fv-chat, #free-chat-wrap { flex-direction: column; }

/* Panel sub-views — to'liq kenglik */
#sv-game, #sv-lessons, #sv-score,
#vv-test, #vv-lessons, #vv-score,
#mcq-game, #mcq-lessons, #mcq-score,
#ft-game, #ft-lessons, #ft-score,
#wo-game, #wo-lessons, #wo-done,
#bv-chat, #bv-lessons {
  width: 100%;
  box-sizing: border-box;
}
#sv-game, #mcq-game, #ft-game, #wo-game { flex-direction: column; align-items: center; }
#bv-chat { flex-direction: column; flex: 1; }

/* MY DICT */
/* ── MyDict Home ── */
.myd-header{background:linear-gradient(135deg,var(--s2) 0%,var(--s1) 100%);border:1px solid var(--border);border-radius:20px;padding:20px 24px;margin-bottom:16px;position:relative;overflow:hidden;}
.myd-header::before{content:'';position:absolute;top:-40px;right:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(108,60,225,.15),transparent 70%);}
.myd-header h2{font-family:'Georgia',serif;font-size:22px;font-weight:bold;margin-bottom:4px;}
.myd-header p{font-size:13px;color:var(--text2);}

/* Upload */
.myd-upload-area{border:2px dashed var(--border2);border-radius:16px;padding:24px 20px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;background:var(--s1);margin-bottom:14px;}
.myd-upload-area:hover,.myd-upload-area.drag{border-color:var(--purple);background:rgba(180,142,255,.06);}
.myd-upload-area .myd-icon{font-size:32px;margin-bottom:6px;}
.myd-upload-area h3{font-size:14px;font-weight:700;margin-bottom:3px;color:var(--text);}
.myd-upload-area p{font-size:12px;color:var(--text3);line-height:1.5;}

/* Qo'lda so'z qo'shish bloki */
.myd-add-section{background:var(--s1);border:1px solid var(--border);border-radius:16px;padding:16px;margin-bottom:14px;}
.myd-add-label{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text3);margin-bottom:10px;}
.myd-add-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;}
.myd-add-inp{width:100%;padding:11px 14px;border-radius:12px;background:var(--s2);border:1.5px solid var(--border2);color:var(--text);font-size:14px;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .15s;}
.myd-add-inp:focus{border-color:var(--accent);}
.myd-add-btn-full{width:100%;padding:12px;border-radius:12px;background:linear-gradient(120deg,var(--accent),#00b890);border:none;color:#05120e;font-size:14px;font-weight:800;cursor:pointer;transition:all .18s;display:flex;align-items:center;justify-content:center;gap:8px;}
.myd-add-btn-full:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,229,176,.3);}

/* Format hint */
.myd-format{background:var(--s2);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:16px;font-size:12px;color:var(--text3);line-height:1.7;display:flex;align-items:flex-start;gap:8px;}
.myd-format code{background:var(--s3);padding:2px 6px;border-radius:5px;font-size:11px;color:var(--accent);font-family:monospace;}

/* Paketlar */
.myd-packets-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.myd-packets-title{font-size:13px;font-weight:700;color:var(--text2);}
.myd-packet{background:var(--s1);border:1px solid var(--border);border-radius:16px;padding:14px 16px;margin-bottom:8px;display:flex;align-items:center;gap:12px;transition:border-color .15s;}
.myd-packet:hover{border-color:var(--border2);}
.myd-packet-icon{width:42px;height:42px;border-radius:12px;background:rgba(180,142,255,.1);border:1px solid rgba(180,142,255,.18);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.myd-packet-body{flex:1;min-width:0;}
.myd-packet-name{font-size:14px;font-weight:700;margin-bottom:2px;}
.myd-packet-meta{font-size:11px;color:var(--text3);}
.myd-packet-words{font-size:11px;color:var(--text3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.myd-packet-actions{display:flex;gap:6px;flex-shrink:0;align-items:center;}
.myd-pk-play{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;background:linear-gradient(135deg,var(--purple),var(--purple-light));border:none;color:#fff;font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;white-space:nowrap;}
.myd-pk-play:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(180,142,255,.35);}
.myd-pk-play:disabled{opacity:.45;cursor:not-allowed;transform:none;}
.myd-pk-icon-btn{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;transition:all .15s;border:1px solid var(--border2);background:var(--s2);}
.myd-pk-icon-btn:hover{transform:scale(1.08);}
.myd-pk-edit{color:var(--blue);}.myd-pk-edit:hover{background:rgba(77,158,255,.15);border-color:rgba(77,158,255,.3);}
.myd-pk-del{color:var(--red);}.myd-pk-del:hover{background:var(--rdim);border-color:rgba(255,90,90,.3);}

.myd-word-list{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow-y:auto;margin-top:8px;scrollbar-width:thin;}
.myd-actions{display:flex;gap:10px;flex-wrap:wrap;}
.myd-btn-start{flex:1;padding:13px;border-radius:14px;background:linear-gradient(135deg,var(--purple),var(--purple-light));border:none;color:#fff;font-size:15px;font-weight:700;cursor:pointer;transition:all .2s;}
.myd-btn-start:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(180,142,255,.3);}
.myd-btn-start:disabled{opacity:.4;cursor:not-allowed;transform:none;}
.myd-pk-edit-old{padding:8px 10px;border-radius:10px;background:rgba(77,158,255,.1);border:1px solid rgba(77,158,255,.25);color:var(--blue);font-size:13px;cursor:pointer;}
.myd-edit-modal{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);z-index:9999;display:flex;align-items:flex-end;justify-content:center;padding:0;}
.myd-edit-box{background:var(--s1);border:1px solid var(--border);border-radius:24px 24px 0 0;width:100%;max-width:560px;padding:20px 20px 32px;max-height:85vh;display:flex;flex-direction:column;}
.myd-edit-title{font-size:17px;font-weight:800;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;}
.myd-edit-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;margin-bottom:14px;scrollbar-width:thin;}
.myd-edit-row{display:flex;gap:6px;align-items:center;}
.myd-edit-inp{flex:1;padding:8px 11px;border-radius:10px;background:var(--s2);border:1px solid var(--border2);color:var(--text);font-size:13px;font-family:inherit;}
.myd-edit-inp:focus{outline:none;border-color:var(--accent);}
.myd-edit-save{padding:8px 12px;border-radius:10px;background:var(--adim);border:1px solid rgba(0,229,176,.3);color:var(--accent);font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;}
.myd-edit-del{padding:8px 10px;border-radius:10px;background:var(--rdim);border:1px solid rgba(255,90,90,.2);color:var(--red);font-size:12px;cursor:pointer;}
.myd-empty{text-align:center;padding:32px 20px;color:var(--text3);}
.myd-empty-icon{font-size:40px;margin-bottom:8px;}
/* Game */
/* MyDict Game UI */
.myd-game-nav{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:6px;}
.myd-game-counter{font-size:13px;font-weight:700;color:var(--text2);background:var(--s2);border:1px solid var(--border);padding:4px 12px;border-radius:20px;}
.myd-prog-track{height:5px;background:var(--s3);border-radius:5px;margin-bottom:20px;overflow:hidden;}
.myd-prog-fill{height:100%;background:linear-gradient(90deg,var(--purple),var(--accent));border-radius:5px;transition:width .4s cubic-bezier(.4,0,.2,1);}

/* Karta */
.myd-card{background:linear-gradient(160deg,var(--s2) 0%,var(--s1) 100%);border:1px solid var(--border);border-radius:24px;overflow:visible;margin-bottom:0;cursor:text;}
.myd-card-inner{display:flex;flex-direction:column;align-items:center;padding:28px 20px 24px;gap:16px;min-height:220px;justify-content:center;}

/* So'z va harflar */
.myd-letters-wrap{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;width:100%;}
.myd-word-group{display:flex;flex-direction:row;gap:5px;align-items:center;}
.myd-word-gap{width:16px;flex-shrink:0;}

/* Feedback */
.myd-feedback-wrap{min-height:52px;display:flex;align-items:center;justify-content:center;padding:8px 0;}
.myd-feedback-wrap .sp-feedback{text-align:center;max-width:500px;width:100%;margin:0 auto;margin:0;width:100%;text-align:center;border-radius:14px;padding:12px 18px;font-size:14px;font-weight:600;}

/* Tugmalar */
.myd-actions-bar{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:8px;
  width:100%;
  max-width:580px;
  margin-left:auto;
  margin-right:auto;
}


/* 3 asosiy tugma qatori */
.myd-main-btns{
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  gap:10px;
  width:100%;
}
/* Ortga */
.myd-btn-back{
  display:flex;align-items:center;justify-content:center;
  gap:6px;
  padding:14px 10px;
  border-radius:14px;
  background:var(--s3);
  border:1.5px solid var(--border2);
  color:var(--text3);
  font-size:13px;font-weight:600;
  cursor:pointer;
  transition:all .18s;
  white-space:nowrap;
  font-family:'Helvetica Neue',sans-serif;
}
.myd-btn-back:hover{background:rgba(108,60,225,.25);}
.myd-btn-back:active{transform:scale(.96);}
.myd-btn-check{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 10px;border-radius:14px;background:linear-gradient(120deg,var(--accent),#00b890);border:none;color:#05120e;font-size:15px;font-weight:800;cursor:pointer;transition:all .18s;box-shadow:0 4px 18px rgba(0,229,176,.25);}
.myd-btn-check:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,229,176,.35);}

/* Maslahat va O'tkazib yuborish zamonaviy style */
.sp-action-row{display:flex;flex-direction:row;gap:12px;justify-content:center;margin-top:16px;width:100%;max-width:520px;margin-left:auto;margin-right:auto;}

/* Spelling skip button */
#sp-skip-btn{background:var(--adim);border:1.5px solid rgba(0,212,170,.5);color:var(--accent);padding:14px 20px;border-radius:14px;font-size:14px;font-weight:600;cursor:pointer;font-family:'Helvetica Neue',sans-serif;transition:all .18s;display:inline-flex;align-items:center;gap:8px;flex:1;justify-content:center;white-space:nowrap;}
#sp-skip-btn:hover{background:rgba(0,229,176,.2);}

.myd-btn-skip{display:flex;align-items:center;justify-content:center;gap:6px;padding:13px 10px;border-radius:14px;background:var(--adim);border:1.5px solid rgba(0,229,176,.5);color:var(--accent);font-size:13px;font-weight:600;cursor:pointer;transition:all .18s;white-space:nowrap;}
.myd-btn-skip:hover{background:rgba(0,229,176,.2);}

/* More menu */
#more-menu{
  display:none;
  position:fixed;bottom:72px;left:12px;right:12px;
  background:var(--s1);border:1px solid var(--border);border-radius:20px;
  padding:12px;z-index:300;flex-wrap:wrap;gap:8px;
  box-shadow:0 -8px 32px rgba(0,0,0,.4);
}
#more-menu.open{display:flex !important;}

.bn-more-item:active{background:var(--pdim);border-color:var(--purple);color:var(--purple-light);}







/* ═══════════════════════════════════════
   BOTTOM NAV — 2 qavat (5+5), mobile
   ═══════════════════════════════════════ */
.bottom-nav { display: none; }

@media (max-width: 600px) {
  .tabs-wrap { display: none !important; }

  .bottom-nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgba(15,10,31,.97);
    border-top: 1px solid rgba(108,60,225,.2);
    padding-bottom: env(safe-area-inset-bottom, 4px);
    z-index: 200;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .bn-row {
    display: flex;
    flex-direction: row;
    width: 100%;
  }

  .bn-row:first-child {
    border-bottom: 1px solid rgba(108,60,225,.1);
  }

  .bn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 2px 5px;
    border: none;
    background: transparent;
    color: var(--text3);
    font-size: 8px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s;
    min-width: 0;
  }

  .bn-item.on { color: var(--purple-light); }

  .bn-item svg {
    width: 18px; height: 18px;
    flex-shrink: 0;
    display: block;
  }

  .bn-item span {
    display: block;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
  }

  .app-body { padding-bottom: 110px !important; }

  body.keyboard-open .app-bar    { display: none !important; }
  body.keyboard-open .bottom-nav { display: none !important; }
}

/* ══════════════════════════════════════════════════
   FILL TYPE — input maydoni
   ══════════════════════════════════════════════════ */
.fill-input {
  width: 100%;
  max-width: 480px;
  display: block;
  margin: 8px auto 0;
  background: var(--s3);
  border: 2px solid var(--border2);
  border-radius: 16px;
  padding: 16px 24px;
  color: var(--text);
  font-size: 22px;
  font-weight: 600;
  font-family: 'Helvetica Neue', sans-serif;
  outline: none;
  text-align: center;
  transition: border-color .2s, box-shadow .2s;
  caret-color: var(--purple-light);
  letter-spacing: .01em;
}
.fill-input::placeholder {
  color: var(--text3);
  font-weight: 400;
  font-size: 18px;
}
.fill-input:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 4px rgba(108,60,225,.15);
  background: var(--s2);
}
.fill-input.correct {
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(74,222,128,.12);
  background: rgba(74,222,128,.05);
}
.fill-input.wrong {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(255,90,90,.12);
  background: rgba(255,90,90,.05);
}

/* ══════════════════════════════════════════════════
   ACTION PILLS — Eshitish / Tarjima / Tozalash
   ══════════════════════════════════════════════════ */
.action-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Helvetica Neue', sans-serif;
  cursor: pointer;
  border: none;
  transition: background .18s, transform .12s, box-shadow .18s;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: .01em;
  white-space: nowrap;
}
.action-pill:active {
  transform: scale(.96);
}
.spk-pill {
  background: rgba(108,60,225,.18);
  color: var(--purple-light);
  border: 1.5px solid rgba(108,60,225,.35);
}
.spk-pill:hover {
  background: rgba(108,60,225,.28);
  box-shadow: 0 4px 16px rgba(108,60,225,.2);
}
.trn-pill {
  background: rgba(0,212,170,.12);
  color: var(--accent);
  border: 1.5px solid rgba(0,212,170,.3);
}
.trn-pill:hover {
  background: rgba(0,212,170,.2);
  box-shadow: 0 4px 16px rgba(0,212,170,.15);
}
.wo-clear-btn-new {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Helvetica Neue', sans-serif;
  cursor: pointer;
  border: 1.5px solid rgba(255,107,53,.35);
  background: rgba(255,107,53,.12);
  color: var(--orange);
  transition: background .18s, transform .12s;
  -webkit-tap-highlight-color: transparent;
}
.wo-clear-btn-new:hover {
  background: rgba(255,107,53,.22);
  box-shadow: 0 4px 16px rgba(255,107,53,.15);
}
.wo-clear-btn-new:active { transform: scale(.96); }

/* ── Word Order — action row ── */
.wo-action-row {
  display: flex;
  flex-direction: row;
  gap: 12px;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 520px;
  margin: 4px auto 0;
}
.wo-clear-btn-new {
  flex: 1;
  justify-content: center;
  padding: 14px 20px !important;
  font-size: 16px !important;
  border-radius: 14px !important;
}
.wo-check-btn {
  flex: 1;
  justify-content: center;
  padding: 14px 20px !important;
  font-size: 16px !important;
  border-radius: 14px !important;
}

.myd-nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Maslahat pill — counter yonida */
.myd-hint-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(255,209,102,.13);
  border: 1.5px solid rgba(255,209,102,.4);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .18s;
  white-space: nowrap;
  font-family: 'Helvetica Neue', sans-serif;
}
.myd-hint-pill:hover { background: rgba(255,209,102,.24); }
.myd-hint-pill:active { transform: scale(.95); }

/* ══════════════════════════════════════════
   SP-BOX KURSOR — qimirlaydigan vertikal bar
   ══════════════════════════════════════════ */
@keyframes bar-blink {
  0%, 49%  { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.sp-box.sp-cursor {
  border-color: var(--purple) !important;
  background: rgba(108,60,225,.1) !important;
  position: relative;
}

/* Bo'sh katakda kursor ko'rsatish */
.sp-box.sp-cursor:empty::after,
.sp-box.sp-cursor[data-empty="true"]::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 16%;
  transform: translateX(-50%);
  width: 2px;
  height: 68%;
  background: var(--purple-light);
  border-radius: 2px;
  animation: bar-blink 1s step-end infinite;
}

/* Matn yozilganda kursor yashirish */
.sp-box.sp-cursor:not(:empty)::after {
  display: none;
}

/* ══════════════════════════════════════════════
   PACKET GRID — kvadrat kartalar
   ══════════════════════════════════════════════ */
.myd-packet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  width: 100%;
}

.myd-packet-card {
  background: linear-gradient(145deg, var(--s2) 0%, var(--s1) 100%);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px 16px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .18s, transform .15s, box-shadow .18s;
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.myd-packet-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(108,60,225,.06), transparent);
  pointer-events: none;
}
.myd-packet-card:hover {
  border-color: var(--purple);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(108,60,225,.2);
}
.myd-packet-card:active {
  transform: scale(.97);
}

.myd-pk-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.myd-pk-card-icon {
  font-size: 26px;
  line-height: 1;
}
.myd-pk-card-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  background: var(--s3);
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: .03em;
}
.myd-pk-card-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
  font-family: 'Helvetica Neue', sans-serif;
}
.myd-pk-card-meta {
  font-size: 13px;
  font-weight: 600;
  color: var(--purple-light);
}
.myd-pk-card-words {
  font-size: 12px;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.myd-pk-card-btn {
  margin-top: 6px;
  width: 100%;
  padding: 10px 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--purple), var(--purple-light));
  border: none;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s, transform .12s;
  font-family: 'Helvetica Neue', sans-serif;
  letter-spacing: .01em;
}
.myd-pk-card-btn:hover { opacity: .9; }
.myd-pk-card-btn:active { transform: scale(.96); }

@media (max-width: 600px) {
  .myd-packet-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .myd-pk-card-name { font-size: 14px; }
}
@media (max-width: 360px) {
  .myd-packet-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* ── Mic playback button ── */
.play-rec-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 16px;border-radius:20px;font-size:13px;font-weight:600;
  font-family:'Helvetica Neue',sans-serif;cursor:pointer;border:none;
  background:rgba(108,60,225,.15);border:1.5px solid rgba(108,60,225,.3);
  color:var(--purple-light);transition:all .16s;
}
.play-rec-btn:hover{background:rgba(108,60,225,.25);transform:scale(1.03);}
.play-rec-btn:disabled{opacity:.5;cursor:default;}

/* ═══════════════════════════════════
   MYD GAME — Paket badge (top nav)
   ═══════════════════════════════════ */
.myd-game-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 4px;
}
.myd-nav-paket {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(108,60,225,.12);
  border: 1.5px solid rgba(108,60,225,.28);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--purple-light);
  letter-spacing: .01em;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.myd-nav-paket svg { flex-shrink: 0; opacity: .8; }

/* ═══════════════════════════════════
   MYD SCORE — 3 tugma
   ═══════════════════════════════════ */
.myd-score-paket-tag {
  display: inline-block;
  background: rgba(108,60,225,.1);
  border: 1.5px solid rgba(108,60,225,.25);
  border-radius: 20px;
  padding: 5px 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--purple-light);
  letter-spacing: .02em;
  margin-bottom: 12px;
}
.myd-score-actions {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: 10px;
  width: 100%;
  margin-top: 22px;
}
.myd-score-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 10px 16px;
  border-radius: 18px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Helvetica Neue', sans-serif;
  cursor: pointer;
  border: none;
  transition: all .18s;
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
}
.myd-score-back {
  background: var(--s3);
  border: 1.5px solid var(--border2);
  color: var(--text2);
}
.myd-score-back:hover { background: var(--s2); color: var(--text); }
.myd-score-retry {
  background: linear-gradient(140deg, var(--purple) 0%, #8B5CF6 100%);
  color: #fff;
  box-shadow: 0 6px 20px rgba(108,60,225,.35);
}
.myd-score-retry:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(108,60,225,.45); }
.myd-score-next {
  background: linear-gradient(140deg, var(--accent) 0%, #00b890 100%);
  color: #032b22;
  font-weight: 800;
  box-shadow: 0 6px 20px rgba(0,212,170,.28);
}
.myd-score-next:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,212,170,.38); }
.myd-score-btn:active { transform: scale(.95) !important; }
@media (max-width: 400px) {
  .myd-score-actions { gap: 7px; }
  .myd-score-btn { font-size: 11px; padding: 14px 6px 12px; gap: 6px; }
  .myd-score-btn svg { width: 18px; height: 18px; }
}