:root{
  --bg:#eaf3f8;
  --bg-2:#dfeef6;
  --glass:rgba(255,255,255,.72);
  --glass-strong:rgba(255,255,255,.9);
  --panel:#f7fbfe;
  --ink:#102a46;
  --ink-2:#294966;
  --muted:#7991a6;
  --line:rgba(82,127,158,.20);
  --line-strong:rgba(52,103,140,.34);
  --blue:#2d6e9d;
  --blue-2:#5aa2cf;
  --blue-soft:#d9ecf8;
  --blue-pale:#edf7fc;
  --green:#2aa876;
  --red:#c96666;
  --shadow:0 18px 50px rgba(43,79,103,.12),0 3px 12px rgba(43,79,103,.06);
  --shadow-soft:0 10px 30px rgba(43,79,103,.09);
  --radius-xl:30px;
  --radius-lg:24px;
  --radius-md:18px;
  --safe:env(safe-area-inset-bottom);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink)}
html{background:#e9f3f8}
body{overscroll-behavior:none;min-height:100vh;background:
  radial-gradient(circle at 10% 8%,rgba(255,255,255,.95),transparent 25%),
  radial-gradient(circle at 92% 12%,rgba(183,220,240,.75),transparent 27%),
  radial-gradient(circle at 50% 88%,rgba(204,231,244,.8),transparent 34%),
  linear-gradient(145deg,#eef7fb 0%,#e4f0f6 48%,#edf6fa 100%);
  background-attachment:fixed;
}
body:before,body:after{content:"";position:fixed;z-index:-1;border-radius:50%;filter:blur(30px);pointer-events:none}
body:before{width:340px;height:340px;left:-120px;top:18%;background:rgba(124,183,216,.18)}
body:after{width:420px;height:420px;right:-180px;bottom:5%;background:rgba(102,165,204,.14)}
button,input,select,textarea{font:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
button:active{transform:translateY(1px) scale(.995)}
.hidden{display:none!important}
.error{color:var(--red);min-height:20px;font-size:13px;margin:12px 0 0}
::selection{background:#b9dcef;color:var(--ink)}

.login-shell{min-height:100vh;display:grid;place-items:center;padding:28px 18px;position:relative;overflow:hidden}
.login-shell:before{content:"";position:absolute;inset:0;background:
  linear-gradient(to bottom,rgba(255,255,255,.1),rgba(230,242,248,.5)),
  radial-gradient(ellipse at 50% 22%,rgba(255,255,255,.95),transparent 28%);
  pointer-events:none}
.login-card{position:relative;width:min(100%,430px);padding:30px;background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(244,250,253,.68));border:1px solid rgba(255,255,255,.92);box-shadow:0 28px 90px rgba(39,83,111,.16),inset 0 1px 0 rgba(255,255,255,.92);backdrop-filter:blur(28px) saturate(135%);-webkit-backdrop-filter:blur(28px) saturate(135%);border-radius:34px}
.login-card:before{content:"";position:absolute;inset:10px;border:1px solid rgba(85,132,163,.08);border-radius:27px;pointer-events:none}
.login-brandline{display:flex;align-items:center;gap:15px;margin-bottom:14px}
.brand-mark,.mini-brand{display:grid;place-items:center;font-weight:850;color:#fff;background:
  radial-gradient(circle at 32% 24%,rgba(255,255,255,.95),rgba(255,255,255,.08) 26%,transparent 29%),
  linear-gradient(145deg,#8bc5e1 0%,#4b91bd 42%,#245c89 100%);
  border:1px solid rgba(255,255,255,.8);box-shadow:0 10px 22px rgba(39,92,130,.22),inset 0 1px 0 rgba(255,255,255,.6)}
.brand-mark{width:58px;height:58px;border-radius:19px;font-size:27px}
.mini-brand{width:40px;height:40px;border-radius:14px;font-size:18px;flex:0 0 auto}
.brand-kicker{font-size:9px;letter-spacing:.22em;font-weight:800;color:#8da2b3}
.login-card h1{font-size:36px;letter-spacing:-.045em;margin:1px 0 0;line-height:1;color:var(--ink)}
.login-lead{color:var(--muted);line-height:1.55;margin:0 0 24px;font-size:14px;max-width:330px}
input,select,textarea{width:100%;border:1px solid rgba(82,127,158,.18);background:rgba(255,255,255,.68);color:var(--ink);border-radius:16px;padding:14px 15px;outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.85);transition:.18s ease}
input::placeholder,textarea::placeholder{color:#9baebd}
input:focus,select:focus,textarea:focus{border-color:rgba(48,111,155,.5);box-shadow:0 0 0 4px rgba(86,156,197,.12),inset 0 1px 0 rgba(255,255,255,.9);background:rgba(255,255,255,.86)}
.login-card input{margin:7px 0}
.primary,.ghost{width:100%;border-radius:17px;padding:14px 16px;font-weight:780;margin-top:8px;transition:.18s ease}
.primary{border:1px solid rgba(35,88,127,.15);background:linear-gradient(180deg,#4f94c0 0%,#2c6d9b 100%);color:#fff;box-shadow:0 10px 22px rgba(45,110,157,.2),inset 0 1px 0 rgba(255,255,255,.3)}
.primary:hover{filter:brightness(1.035)}
.ghost{background:rgba(255,255,255,.45);color:var(--ink-2);border:1px solid var(--line)}

.app-shell{width:min(100%,800px);margin:0 auto;min-height:100vh;padding:0 20px 116px;position:relative}
.topbar{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:16px 0 13px;background:linear-gradient(180deg,rgba(234,243,248,.96) 0%,rgba(234,243,248,.88) 72%,rgba(234,243,248,0) 100%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.topbar-brand{display:flex;align-items:center;gap:11px}
.topbar h2{margin:1px 0 0;font-size:19px;letter-spacing:-.02em}
.eyebrow{text-transform:uppercase;font-size:9px;letter-spacing:.18em;color:#90a5b7;font-weight:820}
.top-actions{display:flex;gap:8px}
.icon-btn,.small-btn,.sound-btn,.quick-help button,.grammar-filter{transition:.16s ease}
.icon-btn{width:42px;height:42px;border-radius:15px;border:1px solid rgba(255,255,255,.95);background:rgba(255,255,255,.64);color:#315c7b;font-size:18px;box-shadow:var(--shadow-soft);backdrop-filter:blur(18px)}
.icon-btn:hover,.small-btn:hover,.sound-btn:hover{background:#fff}

.page{display:none;animation:pageIn .22s ease}
.page.active{display:block}
@keyframes pageIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.page-head{display:flex;justify-content:space-between;gap:12px;align-items:end;margin:10px 0 18px}
.page-head h1{font-size:31px;line-height:1.04;margin:5px 0 0;letter-spacing:-.045em;color:var(--ink)}
.small-btn{border:1px solid rgba(255,255,255,.95);background:rgba(255,255,255,.65);color:#315f7f;border-radius:14px;padding:10px 13px;font-weight:760;box-shadow:var(--shadow-soft)}
.panel{background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(247,251,253,.62));border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow-soft),inset 0 1px 0 rgba(255,255,255,.85);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-radius:var(--radius-lg);padding:16px;margin-bottom:14px}
.panel label,.topic-row label,.talk-settings label{display:block;color:#6f879b;font-size:11px;font-weight:750;margin-bottom:7px}
.inline-form{display:grid;grid-template-columns:1fr auto;gap:8px}
.primary.compact{width:auto;margin:0;padding:0 18px}
.mini-result{margin-top:11px;line-height:1.5;color:var(--ink-2);font-size:14px}
.mini-result b{color:var(--blue)}
.topic-row{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin-bottom:14px;padding:10px 12px;background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.78);border-radius:17px}
.topic-row label{margin:0}
.topic-row select{padding:10px 12px;background:rgba(255,255,255,.78)}

.word-card{position:relative;overflow:hidden;background:linear-gradient(152deg,rgba(255,255,255,.95),rgba(243,249,252,.82));border:1px solid rgba(255,255,255,.98);box-shadow:var(--shadow);border-radius:31px;padding:24px;min-height:430px}
.word-card:before{content:"";position:absolute;width:240px;height:240px;right:-90px;top:-105px;border-radius:50%;background:radial-gradient(circle,rgba(106,176,214,.24),rgba(106,176,214,0) 70%)}
.word-card>*{position:relative}
.word-top{display:flex;justify-content:space-between;align-items:center}
.badge{font-size:11px;color:#8ca2b4;font-weight:800;letter-spacing:.05em}
.sound-btn{border:1px solid rgba(83,137,171,.16);background:#eef7fc;color:#2d668e;padding:10px 13px;border-radius:14px;font-weight:720}
.word-ru{font-size:18px;color:#8499ab;margin-top:36px}
.word-en{font-size:46px;line-height:1.02;font-weight:820;letter-spacing:-.048em;margin-top:5px;color:#173a58}
.word-note{color:#4f91bb;font-size:13px;margin-top:10px;min-height:18px;font-weight:650}
.word-example{font-size:16px;color:#516c82;margin-top:24px;line-height:1.5;padding:14px 15px;background:rgba(224,239,248,.56);border-radius:16px;border:1px solid rgba(87,139,172,.1)}

.pronounce-box{margin-top:28px;background:linear-gradient(145deg,rgba(228,241,249,.76),rgba(247,251,253,.85));border:1px solid rgba(74,132,168,.14);border-radius:20px;padding:12px;display:flex;gap:12px;align-items:center}
.mic-btn{border:1px solid rgba(38,94,132,.12);background:linear-gradient(180deg,#4e95c1,#2e6e9b);color:#fff;border-radius:14px;padding:12px 15px;font-weight:800;white-space:nowrap;box-shadow:0 8px 18px rgba(43,104,147,.18)}
.pronounce-feedback{font-size:13px;color:#6f879a;line-height:1.4}
.rating-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:20px}
.rating-row button{border:1px solid rgba(86,132,163,.16);background:rgba(255,255,255,.72);color:#5c7387;border-radius:14px;padding:11px 6px;font-size:12px;font-weight:700}
.rating-row button[data-rate=good]{background:#e9f6f1;color:#27745a;border-color:rgba(42,168,118,.2)}
.rating-row button[data-rate=easy]{background:#e2f1fb;color:#2f719d;border-color:rgba(47,113,157,.2)}
.empty{text-align:center;color:var(--muted)}

.talk-settings{padding:15px}
.setting-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.talk-settings label{margin-bottom:11px}
.talk-settings select,.talk-settings input{margin-top:5px;padding:10px 12px;background:rgba(255,255,255,.72)}
.range-label b{float:right;color:#32749f}
input[type=range]{padding:0;height:28px;accent-color:#4b91bd;background:transparent;box-shadow:none;border:none}
.engine-note{margin:-2px 0 12px;padding:10px 12px;border-radius:14px;background:linear-gradient(145deg,#eaf5fb,#f7fbfd);border:1px solid rgba(91,145,177,.14);font-size:12px;color:#71899d;line-height:1.45}
.engine-note strong{color:#376f96}
.voice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.voice-grid label{margin-bottom:0}
.voice-grid select{margin-top:5px;padding:10px 11px}

.chat{display:flex;flex-direction:column;gap:11px;min-height:190px;max-height:44vh;overflow:auto;padding:6px 2px 12px;scrollbar-width:thin;scrollbar-color:#c8dce8 transparent}
.msg{max-width:86%;border-radius:20px;padding:13px 15px;line-height:1.48;white-space:pre-wrap;box-shadow:0 8px 22px rgba(52,91,116,.08)}
.msg.user{align-self:flex-end;background:linear-gradient(145deg,#d7ebfb,#c7e2f7);color:#23445f;border-bottom-right-radius:7px}
.msg.assistant{align-self:flex-start;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.98);color:#27445b;border-bottom-left-radius:7px}
.msg .who{font-size:9px;text-transform:uppercase;color:#88a0b3;display:block;margin-bottom:5px;letter-spacing:.1em;font-weight:800}
.quick-help{display:flex;gap:8px;margin:7px 0 11px;overflow:auto;scrollbar-width:none}
.quick-help::-webkit-scrollbar{display:none}
.quick-help button{white-space:nowrap;border:1px solid rgba(78,126,158,.14);background:rgba(255,255,255,.66);color:#567189;border-radius:999px;padding:9px 12px;font-size:11px;font-weight:720;box-shadow:0 5px 14px rgba(65,102,128,.05)}
.quick-help button:hover{background:#fff}
.talk-composer{position:sticky;bottom:92px;background:linear-gradient(180deg,rgba(234,243,248,0),rgba(234,243,248,.95) 20%);padding-top:20px}
.talk-composer textarea{resize:none;background:rgba(255,255,255,.86);box-shadow:var(--shadow-soft);transition:opacity .18s ease,max-height .22s ease,min-height .22s ease,padding .22s ease,border-width .22s ease}
.talk-composer.live-compact textarea{height:0!important;min-height:0!important;max-height:0!important;padding-top:0!important;padding-bottom:0!important;margin:0!important;border-width:0!important;opacity:0;overflow:hidden;pointer-events:none;box-shadow:none}
.composer-actions{display:grid;grid-template-columns:1fr 54px;gap:9px;margin-top:8px}
.big-mic,.send-btn{border:0;border-radius:17px;height:54px;font-weight:820;transition:.18s ease}
.big-mic{background:linear-gradient(180deg,#5b9fc7,#2c6c9a);color:#fff;box-shadow:0 10px 24px rgba(43,104,148,.21),inset 0 1px 0 rgba(255,255,255,.35)}
.big-mic.listening{background:linear-gradient(180deg,#d77979,#b95d5d);color:#fff}
.send-btn{background:rgba(255,255,255,.9);color:#2c6288;border:1px solid rgba(73,125,159,.16);font-size:22px;box-shadow:var(--shadow-soft)}
#speechHint{display:block;color:#8096a9;margin-top:7px;min-height:16px;font-size:11px}

.grammar-intro{position:relative;overflow:hidden}
.grammar-intro:after{content:"";position:absolute;width:130px;height:130px;right:-45px;top:-60px;border-radius:50%;background:radial-gradient(circle,rgba(100,171,210,.18),transparent 70%)}
.grammar-intro p{color:#71899c;margin:7px 0 0;line-height:1.5;font-size:14px}
.grammar-filters{display:flex;gap:8px;overflow:auto;padding:0 0 13px;scrollbar-width:none}
.grammar-filters::-webkit-scrollbar{display:none}
.grammar-filter{white-space:nowrap;border:1px solid rgba(76,127,160,.14);background:rgba(255,255,255,.62);color:#6c8295;border-radius:999px;padding:9px 13px;font-size:11px;font-weight:760;box-shadow:0 5px 14px rgba(57,99,126,.04)}
.grammar-filter.active{background:linear-gradient(180deg,#5b9fc8,#3477a4);color:#fff;border-color:transparent;box-shadow:0 8px 18px rgba(54,120,164,.18)}
.grammar-list{display:flex;flex-direction:column;gap:11px}
.grammar-card{background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(246,251,253,.72));border:1px solid rgba(255,255,255,.98);box-shadow:var(--shadow-soft);border-radius:22px;overflow:hidden}
.grammar-head{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;border:0;background:transparent;color:var(--ink);padding:18px}
.grammar-head span:first-child{display:flex;flex-direction:column;gap:4px}
.grammar-head small{font-size:9px;color:#8ca1b2;text-transform:uppercase;letter-spacing:.1em}
.grammar-head b{font-size:17px;letter-spacing:-.015em}
.grammar-plus{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#edf6fb;color:#4d83a7;font-size:20px;transition:.2s}
.grammar-card.open .grammar-plus{transform:rotate(45deg);background:#d9ecf7}
.grammar-body{display:none;padding:0 18px 18px}
.grammar-card.open .grammar-body{display:block}
.grammar-formula{background:linear-gradient(145deg,#e1f0f9,#f1f8fc);border:1px solid rgba(64,127,166,.15);border-radius:16px;padding:14px;color:#275f86;font-weight:820;line-height:1.5;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.grammar-body p{color:#5d768a;font-size:14px;line-height:1.55}
.grammar-examples{display:flex;flex-direction:column;gap:8px;margin:13px 0}
.grammar-example{text-align:left;border:1px solid rgba(76,126,159,.14);background:rgba(255,255,255,.72);color:#375b75;border-radius:14px;padding:11px 12px}
.grammar-mistake{background:#fff5f4!important;border:1px solid rgba(190,98,98,.13)!important;border-radius:14px;padding:11px 12px!important;color:#815959!important}

/* GigaChat owner statistics */
.stats-status{min-height:20px;margin:-8px 0 12px;color:#7d94a7;font-size:12px}
.stats-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.stats-kpi{min-width:0;padding:16px;border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(237,247,252,.76));border:1px solid rgba(255,255,255,.98);box-shadow:var(--shadow-soft)}
.stats-kpi span,.stats-token span{display:block;color:#7890a4;font-size:10px;font-weight:780;line-height:1.25}
.stats-kpi strong{display:block;margin-top:9px;color:#173d5b;font-size:25px;line-height:1;font-weight:850;letter-spacing:-.035em;overflow-wrap:anywhere}
.stats-kpi small,.stats-token small{display:block;margin-top:7px;color:#96a8b6;font-size:9px}
.stats-current-plan{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:19px 20px;background:linear-gradient(145deg,rgba(219,239,250,.92),rgba(250,253,255,.86))}
.stats-current-plan h3,.stats-section h3{margin:5px 0 0;color:#173e5d;font-size:20px;letter-spacing:-.025em}
.stats-current-plan p{margin:5px 0 0;color:#7790a4;font-size:12px}
.stats-plan-rate{text-align:right;flex:0 0 auto}
.stats-plan-rate b{display:block;color:#2e739f;font-size:20px}
.stats-plan-rate small{display:block;color:#90a3b2;font-size:9px;margin-top:3px}
.stats-token-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.stats-token{margin:0;padding:15px 16px}
.stats-token strong{display:block;margin-top:7px;color:#254c68;font-size:20px}
.stats-section{padding:18px}
.stats-section-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:13px}
.stats-section-head small{color:#91a4b3;font-size:9px;text-align:right}
.stats-tariff-list,.stats-recent-list{display:flex;flex-direction:column;gap:8px}
.stats-tariff-row{display:grid;grid-template-columns:minmax(120px,1.1fr) repeat(3,minmax(72px,.7fr));gap:10px;align-items:center;padding:12px 13px;border:1px solid rgba(75,127,160,.11);background:rgba(255,255,255,.56);border-radius:16px}
.stats-tariff-row.current{background:linear-gradient(145deg,#e4f2fa,#f5fbfe);border-color:rgba(62,128,169,.19)}
.stats-tariff-name b{display:block;color:#294d67;font-size:13px}
.stats-tariff-name small{display:block;margin-top:3px;color:#8da1b1;font-size:9px}
.stats-tariff-cell{min-width:0;text-align:right}
.stats-tariff-cell b{display:block;color:#315873;font-size:12px}
.stats-tariff-cell small{display:block;color:#97a8b5;font-size:8px;margin-top:3px}
.stats-recent-row{display:grid;grid-template-columns:minmax(110px,1fr) 96px 86px;gap:10px;align-items:center;padding:11px 12px;border-radius:15px;background:rgba(255,255,255,.55);border:1px solid rgba(76,127,159,.1)}
.stats-recent-main b{display:block;color:#32536b;font-size:12px}
.stats-recent-main small,.stats-recent-row>small{display:block;color:#91a3b1;font-size:9px;margin-top:3px}
.stats-recent-num{text-align:right;color:#335b77;font-weight:780;font-size:11px}
.stats-empty{padding:18px;text-align:center;color:#8ba0b0;font-size:12px;border:1px dashed rgba(87,135,164,.18);border-radius:16px}
.stats-footnote{margin:8px 4px 0;color:#8ba0b0;font-size:10px;line-height:1.5}
.bottom-nav.has-stats{grid-template-columns:repeat(4,1fr)}
.bottom-nav.has-stats .nav-btn{padding-left:4px;padding-right:4px}
@media(max-width:620px){
  .stats-kpi-grid{grid-template-columns:1fr 1fr}
  .stats-token-grid{grid-template-columns:1fr 1fr 1fr}
  .stats-tariff-row{grid-template-columns:1fr 1fr;gap:8px}
  .stats-tariff-cell{text-align:left}
  .stats-recent-row{grid-template-columns:1fr 82px}
  .stats-recent-row .stats-recent-cost{grid-column:1/-1;text-align:left}
}
@media(max-width:390px){
  .stats-token-grid{grid-template-columns:1fr}
  .stats-current-plan{align-items:flex-start}
  .stats-plan-rate{max-width:115px}
  .bottom-nav.has-stats .nav-btn{font-size:9px}
  .bottom-nav.has-stats .nav-btn span{font-size:17px}
}

.bottom-nav{position:fixed;z-index:40;left:50%;transform:translateX(-50%);bottom:10px;width:min(740px,calc(100% - 24px));display:grid;grid-template-columns:repeat(3,1fr);padding:8px 10px calc(8px + var(--safe));background:rgba(245,251,254,.78);border:1px solid rgba(255,255,255,.95);border-radius:25px;box-shadow:0 16px 40px rgba(44,87,114,.16),inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:blur(24px) saturate(135%);-webkit-backdrop-filter:blur(24px) saturate(135%)}
.nav-btn{border:0;background:transparent;color:#8198aa;padding:7px 8px;font-size:10px;font-weight:780;border-radius:17px;transition:.18s ease}
.nav-btn span{display:block;font-size:18px;margin-bottom:3px}
.nav-btn.active{color:#2f6f9b;background:linear-gradient(145deg,#dceef8,#edf7fc);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.toast{position:fixed;z-index:99;left:50%;bottom:104px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:rgba(18,43,67,.92);color:#fff;padding:10px 15px;border-radius:999px;font-weight:720;font-size:12px;transition:.2s;box-shadow:0 10px 30px rgba(25,56,80,.2);backdrop-filter:blur(12px)}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(min-width:900px){
  .app-shell{padding-left:26px;padding-right:26px}
  .page-head h1{font-size:34px}
  .word-card{padding:28px}
}
@media(max-width:520px){
  .app-shell{padding-left:14px;padding-right:14px;padding-bottom:112px}
  .topbar{padding-top:12px}
  .mini-brand{width:37px;height:37px;border-radius:13px}
  .page-head{margin-top:8px;margin-bottom:16px}
  .page-head h1{font-size:27px}
  .word-card{padding:18px;border-radius:26px;min-height:405px}
  .word-en{font-size:39px}
  .rating-row{grid-template-columns:1fr 1fr}
  .setting-grid{grid-template-columns:1fr 1fr}
  .voice-grid{grid-template-columns:1fr 1fr}
  .voice-grid label:last-child{grid-column:1/-1}
  .login-card{padding:24px;border-radius:29px}
  .login-card h1{font-size:33px}
  .brand-mark{width:54px;height:54px}
  .bottom-nav{bottom:7px;width:calc(100% - 18px)}
}
@media(max-width:370px){
  .setting-grid,.voice-grid{grid-template-columns:1fr}
  .voice-grid label:last-child{grid-column:auto}
  .page-head h1{font-size:25px}
}

.vocab-mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 14px;padding:5px;background:rgba(255,255,255,.48);border:1px solid rgba(255,255,255,.8);border-radius:18px}
.vocab-mode-btn{border:0;border-radius:14px;padding:11px 12px;background:transparent;color:#7890a3;font-weight:780}
.vocab-mode-btn.active{background:linear-gradient(180deg,#fff,#edf6fb);color:#2e6f9b;box-shadow:0 7px 18px rgba(53,96,124,.09),inset 0 1px 0 #fff}
.audio-mode{display:block}
.audio-player-card{background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(238,248,253,.82));border:1px solid rgba(255,255,255,.96);box-shadow:var(--shadow);border-radius:30px;padding:22px;margin-bottom:14px}
.audio-player-top{display:flex;justify-content:space-between;align-items:center}
.audio-ru{margin-top:28px;color:#7a91a3;font-size:17px}.audio-en{margin-top:6px;color:#153b59;font-size:34px;font-weight:820;letter-spacing:-.035em;line-height:1.08}
.audio-example{margin-top:16px;color:#637e92;min-height:24px;line-height:1.45}
.audio-controls{display:grid;grid-template-columns:54px 1fr 54px 54px;gap:9px;margin-top:24px}
.audio-controls button{height:54px;border-radius:17px;border:1px solid rgba(66,118,151,.14);background:rgba(255,255,255,.76);color:#346c94;font-size:23px;font-weight:800;box-shadow:var(--shadow-soft)}
.audio-controls .audio-play{background:linear-gradient(180deg,#5a9fc8,#2f70a0);color:#fff;border-color:transparent}
.audio-status{margin-top:12px;color:#7c93a5;font-size:12px;text-align:center}
.audio-command-panel{display:flex;gap:12px;align-items:center}.audio-command-panel p{margin:3px 0 0;color:#7890a3;font-size:12px;line-height:1.45}.audio-command-panel b{font-size:13px}
.stop-voice{height:54px;width:54px;border-radius:17px;border:1px solid rgba(177,93,93,.15);background:#fff1f1;color:#aa5b5b;font-size:18px;font-weight:800}.stop-voice:disabled{opacity:.38}
.composer-actions{grid-template-columns:1fr 54px 54px}
#liveModeBtn.active{background:#dff1fb;color:#2a6d99;border-color:rgba(45,110,157,.22)}
button,input,select,textarea{touch-action:manipulation}
@media(max-width:520px){
  input,select,textarea{font-size:16px}
  .audio-en{font-size:31px}
  .audio-controls{grid-template-columns:48px 1fr 48px 48px}.audio-controls button{height:50px;border-radius:15px}
  .audio-command-panel{align-items:flex-start;flex-direction:column}
  .composer-actions{grid-template-columns:1fr 50px 50px}.stop-voice,.send-btn{height:50px;width:50px}
}

/* Finance-style PIN login, adapted to English brand */
.pin-caption{margin:2px 0 4px!important;text-align:center;color:var(--muted)!important;font-size:13px}
.pin-display{height:50px;display:flex;align-items:center;justify-content:center;gap:17px;margin:0 auto 2px}
.pin-display span{width:15px;height:15px;border:1.5px solid rgba(63,111,143,.32);border-radius:50%;background:rgba(255,255,255,.55);box-shadow:inset 0 1px 2px rgba(34,72,99,.06);transition:.16s ease}
.pin-display span.filled{background:linear-gradient(145deg,#67acd2,#2e6f9d);border-color:#4e94be;box-shadow:0 0 0 5px rgba(79,150,190,.09)}
.pin-display span.pop{animation:pinDotPop .18s cubic-bezier(.22,.61,.36,1)}
.pin-keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;width:min(292px,100%);margin:4px auto 13px}
.login-card .pin-keypad button{width:100%;height:58px;margin:0;border:1px solid rgba(75,122,153,.14);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(237,247,252,.76));color:#244d6b;font-size:22px;font-weight:680;box-shadow:0 7px 18px rgba(54,96,124,.07),inset 0 1px 0 #fff;transition:transform .08s ease,background .12s ease}
.login-card .pin-keypad button:active{transform:scale(.94);background:#dceef8}
.login-card .pin-keypad .pin-key-back{font-size:18px;color:#708a9d;background:rgba(232,242,248,.76)}
.pin-keypad-empty{height:58px}
.login-card.pin-checking .pin-display span.filled{animation:pinChecking .7s ease-in-out infinite alternate}
.login-card.pin-success{animation:pinSuccess .22s ease both}
.login-card.pin-error{animation:pinShake .28s ease both}
.login-card.pin-error .pin-display span{border-color:#d98585;background:#f5dede;box-shadow:none}
.register-fields{display:grid;gap:9px;text-align:left;margin-top:10px}
.register-fields label{display:grid;gap:5px}.register-fields label>span{font-size:11px;color:#7790a4;font-weight:720}
.register-fields input{margin:0;height:48px;font-size:16px}.register-fields #newPinInput,.register-fields #newPinConfirmInput{text-align:center;letter-spacing:.18em;font-size:18px}
@keyframes pinDotPop{0%{transform:scale(.72)}65%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes pinChecking{from{opacity:.55;transform:scale(.9)}to{opacity:1;transform:scale(1.06)}}
@keyframes pinSuccess{0%{transform:scale(1)}55%{transform:scale(1.015)}100%{transform:scale(1)}}
@keyframes pinShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}

/* Branded selects: never show native iOS picker */
.native-select-hidden{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;margin:0!important;padding:0!important;border:0!important}
.fancy-select{position:relative;min-width:0;width:100%;z-index:8}
.fancy-select.open{z-index:90}
.fancy-select-button{width:100%;height:44px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 13px;border:1px solid rgba(78,128,160,.15);border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(237,247,252,.76));color:#315b78;text-align:left;font-size:13px;font-weight:730;box-shadow:inset 0 1px 0 rgba(255,255,255,.92)}
.fancy-select-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fancy-select-chevron{font-size:16px;color:#79a0b8;transition:transform .17s ease}.fancy-select.open .fancy-select-chevron{transform:rotate(180deg)}
.fancy-select-menu{display:none;position:absolute;left:0;right:0;top:calc(100% + 7px);max-height:280px;padding:6px;overflow:auto;overscroll-behavior:contain;border:1px solid rgba(255,255,255,.96);border-radius:17px;background:rgba(245,251,254,.96);box-shadow:0 18px 46px rgba(38,78,105,.2),inset 0 1px 0 #fff;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.fancy-select.open .fancy-select-menu{display:grid;gap:4px;animation:fancyOpen .14s ease}
.fancy-option{width:100%;min-height:42px;padding:9px 11px;border:0;border-radius:12px;background:transparent;color:#527087;text-align:left;font-size:13px;font-weight:650}
.fancy-option.active{background:linear-gradient(145deg,#dceef8,#eef7fc);color:#24658f;font-weight:790}.fancy-option:active{background:#d8ebf6}
@keyframes fancyOpen{from{opacity:0;transform:translateY(-4px) scale(.985)}to{opacity:1;transform:none}}

/* Vocabulary controls */
.vocab-tools{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(150px,.7fr);gap:10px;margin-bottom:14px}
.topic-row,.session-size-row{margin:0;padding:9px 10px;background:rgba(255,255,255,.48);border:1px solid rgba(255,255,255,.8);border-radius:17px;align-items:center}
.topic-row{display:grid;grid-template-columns:auto minmax(0,1fr) 40px;gap:9px}
.session-size-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px}
.topic-row label,.session-size-row label{margin:0;color:#71899c;font-size:11px;font-weight:750;white-space:nowrap}
.topic-add-btn{width:40px;height:40px;border:1px solid rgba(72,126,160,.14);border-radius:13px;background:rgba(255,255,255,.78);color:#34749f;font-size:20px;box-shadow:var(--shadow-soft)}
.page.page-enter{animation:pageEnterPremium .2s cubic-bezier(.22,.61,.36,1)}
@keyframes pageEnterPremium{from{opacity:.2;transform:translateY(7px) scale(.997)}to{opacity:1;transform:none}}

@media(max-width:520px){
  .login-card{width:min(360px,100%);text-align:center}
  .login-brandline{justify-content:center;text-align:left}
  .login-lead{margin-left:auto;margin-right:auto}
  .vocab-tools{grid-template-columns:1fr}
  .session-size-row{grid-template-columns:auto 1fr}
  .fancy-select-menu{max-height:245px}
}

#liveModeBtn{display:none}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:auto}

.example-play-row,.audio-example-row{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:9px;align-items:center}
.example-play-row{margin-top:24px}
.example-play-row .word-example{margin-top:0}
.audio-example-row{margin-top:16px}
.audio-example-row .audio-example{margin-top:0}
.example-play-btn{width:44px;height:44px;border-radius:14px;border:1px solid rgba(69,126,161,.15);background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(225,241,249,.9));color:#2e6f9b;font-size:16px;font-weight:850;box-shadow:0 7px 18px rgba(47,91,120,.09),inset 0 1px 0 #fff;transition:.15s ease}
.example-play-btn:active{transform:scale(.94);background:#dceef8}
.example-play-btn:disabled{opacity:.35}

.chat{scroll-behavior:auto!important;overscroll-behavior:contain;overflow-anchor:none}
.msg.live-draft{opacity:.86;border:1px solid rgba(77,145,188,.16);box-shadow:0 6px 18px rgba(52,103,136,.06)}
.msg.live-draft .who{color:#4c82a6}
.live-draft-text{white-space:pre-wrap}
.live-cursor{display:inline-block;margin-left:6px;color:#3d89b7;font-size:8px;vertical-align:middle;animation:livePulse .85s ease-in-out infinite alternate}
@keyframes livePulse{from{opacity:.25;transform:scale(.8)}to{opacity:1;transform:scale(1.12)}}

.desktop-nav{display:none}

@media(min-width:900px){
  .app-shell{width:100%;max-width:none;margin:0;padding:0 32px 40px}
  .topbar{
    display:grid;
    grid-template-columns:minmax(230px,1fr) auto minmax(230px,1fr);
    align-items:center;
    width:100%;
    padding:14px 0;
    margin:0;
    background:rgba(239,247,251,.84);
    border-bottom:1px solid rgba(255,255,255,.9);
    box-shadow:0 7px 28px rgba(51,91,116,.07);
    backdrop-filter:blur(22px) saturate(130%);
    -webkit-backdrop-filter:blur(22px) saturate(130%);
  }
  .topbar:before{
    content:"";
    position:absolute;
    left:-32px;right:-32px;top:0;bottom:0;
    z-index:-1;
    background:inherit;
    border-bottom:inherit;
  }
  .topbar-brand{justify-self:start}
  .top-actions{justify-self:end}
  .desktop-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:5px;
    border:1px solid rgba(255,255,255,.9);
    border-radius:18px;
    background:rgba(255,255,255,.54);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
  }
  .desktop-nav .nav-btn{
    min-width:118px;
    padding:10px 16px;
    border-radius:13px;
    font-size:12px;
    color:#6f8799;
  }
  .desktop-nav .nav-btn span{
    display:inline-block;
    margin:0 7px 0 0;
    font-size:14px;
    vertical-align:-1px;
  }
  .desktop-nav .nav-btn.active{
    color:#245f88;
    background:linear-gradient(145deg,rgba(219,238,248,.96),rgba(244,250,253,.96));
    box-shadow:0 5px 14px rgba(52,101,134,.08),inset 0 1px 0 #fff;
  }
  .bottom-nav{display:none}
  .page{
    width:min(1120px,100%);
    margin:0 auto;
    padding-top:14px;
  }
  .talk-page{
    width:min(1360px,100%);
  }
  .page-head{margin:10px 0 18px}
  .page-head h1{font-size:34px}

  .talk-desktop-grid{
    display:grid;
    grid-template-columns:330px minmax(0,1fr);
    gap:18px;
    align-items:stretch;
    height:calc(100vh - 164px);
    min-height:610px;
  }
  .talk-sidebar{
    min-width:0;
    overflow:visible;
  }
  .talk-sidebar .talk-settings{
    margin-bottom:10px;
    max-height:calc(100vh - 240px);
    overflow:auto;
    scrollbar-width:thin;
  }
  .talk-side-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin:0;
    overflow:visible;
  }
  .talk-side-actions button{
    white-space:normal;
    min-height:42px;
  }
  .talk-chat-panel{
    min-width:0;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.94);
    border-radius:28px;
    background:linear-gradient(145deg,rgba(255,255,255,.79),rgba(242,249,252,.66));
    box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
  }
  .talk-chat-panel .chat{
    flex:1;
    min-height:0;
    max-height:none;
    padding:24px 24px 16px;
    gap:12px;
  }
  .talk-chat-panel .msg{max-width:min(74%,720px)}
  .talk-chat-panel .talk-composer{
    position:static;
    bottom:auto;
    padding:14px 18px 18px;
    background:linear-gradient(180deg,rgba(244,250,253,.2),rgba(239,248,252,.94) 34%);
    border-top:1px solid rgba(91,137,166,.08);
  }
  .talk-chat-panel .talk-composer textarea{
    min-height:58px;
    max-height:130px;
  }
  .talk-chat-panel .composer-actions{
    grid-template-columns:minmax(180px,260px) 54px 54px;
    justify-content:end;
  }
  .voice-grid{grid-template-columns:1fr}
  .setting-grid{grid-template-columns:1fr 1fr}

  #vocabPage .word-card,
  #vocabPage .audio-player-card{
    min-height:0;
  }
  #vocabPage .word-card{padding:30px 34px}
  #vocabPage .word-en{font-size:54px}
  .audio-command-panel{justify-content:flex-start}
  .audio-command-panel .mic-btn{width:auto}
}

@media(min-width:1280px){
  .app-shell{padding-left:46px;padding-right:46px}
  .topbar:before{left:-46px;right:-46px}
  .talk-desktop-grid{grid-template-columns:360px minmax(0,1fr)}
}

@media(min-width:900px){
  .talk-sidebar{position:sticky;top:88px;align-self:start}
  .talk-sidebar .talk-settings{position:static;top:auto}
  .talk-side-actions{position:static;top:auto}
  .talk-sidebar .voice-grid{grid-template-columns:1fr}
  .talk-sidebar .voice-grid label:last-child{grid-column:auto}
}

@media(min-width:900px){
  .app-shell{overflow-x:clip}
  .topbar{width:calc(100% + 64px);margin-left:-32px;padding-left:32px;padding-right:32px}
  .topbar:before{display:none}
}
@media(min-width:1280px){
  .topbar{width:calc(100% + 92px);margin-left:-46px;padding-left:46px;padding-right:46px}
}

.refresh-deck-btn{min-height:40px;padding:0 12px;border:1px solid rgba(72,126,160,.14);border-radius:13px;background:rgba(255,255,255,.78);color:#34749f;font-size:12px;font-weight:760;white-space:nowrap;box-shadow:0 7px 18px rgba(54,96,124,.06)}
.refresh-deck-btn:active{transform:scale(.97);background:#dceef8}
.refresh-deck-btn:disabled{opacity:.5}
.session-size-row{grid-template-columns:auto minmax(90px,.7fr) auto}
@media(max-width:520px){.session-size-row{grid-template-columns:auto minmax(0,1fr)}.refresh-deck-btn{grid-column:1/-1;width:100%}}

.voice-preview-row{display:flex;align-items:center;gap:10px;margin-top:10px}
.voice-preview-row button{min-height:40px;padding:0 13px;border:1px solid rgba(72,126,160,.14);border-radius:13px;background:rgba(255,255,255,.82);color:#34749f;font-size:12px;font-weight:760;box-shadow:0 7px 18px rgba(54,96,124,.06)}
.voice-preview-row button:disabled{opacity:.55}
.voice-preview-row small{color:#7892a5;font-size:11px;line-height:1.35}
@media(max-width:520px){.voice-preview-row{align-items:stretch;flex-direction:column}.voice-preview-row button{width:100%}}

.global-voice-row{display:grid;grid-template-columns:auto minmax(190px,1fr);gap:8px 12px;align-items:center}
.global-voice-row>label{font-size:12px;font-weight:750;color:var(--ink-2)}
.global-voice-row>small{grid-column:1/-1;color:var(--muted);font-size:11px;line-height:1.35}
@media(max-width:520px){.global-voice-row{grid-template-columns:1fr}.global-voice-row>small{grid-column:auto}}

.interrupt-tutor{width:100%;min-height:52px;margin:6px 0 2px;border:1px solid rgba(176,73,73,.2);border-radius:16px;background:linear-gradient(145deg,#fff0ee,#f8d8d5);color:#a54848;font-size:15px;font-weight:850;box-shadow:0 9px 24px rgba(151,65,65,.12),inset 0 1px 0 rgba(255,255,255,.85)}
.interrupt-tutor:active{transform:scale(.985)}
.interrupt-tutor.hidden{display:none!important}