:root {
  --google-blue: #4285f4;
  --google-red: #ea4335;
  --google-yellow: #fbbc04;
  --google-green: #34a853;
  --blue-soft: #e8f0fe;
  --red-soft: #fce8e6;
  --green-soft: #e6f4ea;
  --bg: #f8fafd;
  --surface: #ffffff;
  --surface-2: #f1f3f4;
  --surface-3: #e8eaed;
  --ink: #202124;
  --muted: #5f6368;
  --line: #dadce0;
  --green: var(--google-blue);
  --green-2: #1a73e8;
  --mint: var(--blue-soft);
  --yellow: var(--google-yellow);
  --yellow-soft: #fef7e0;
  --coral: var(--google-red);
  --lavender: var(--green-soft);
  --blue: var(--google-blue);
  --shadow: 0 10px 30px rgba(60, 64, 67, .09);
  --radius: 22px;
  --accent: var(--google-blue);
  --font-google: 'Google Sans Flex', 'Roboto', Arial, sans-serif;
}

body.dark {
  --google-blue: #8ab4f8;
  --google-red: #f28b82;
  --google-yellow: #fdd663;
  --google-green: #81c995;
  --blue-soft: #2b3b55;
  --red-soft: #4b2d2b;
  --green-soft: #284236;
  --bg: #202124;
  --surface: #292a2d;
  --surface-2: #303134;
  --surface-3: #3c4043;
  --ink: #e8eaed;
  --muted: #9aa0a6;
  --line: #3c4043;
  --green: var(--google-blue);
  --green-2: var(--google-blue);
  --mint: var(--blue-soft);
  --yellow-soft: #41331c;
  --lavender: var(--green-soft);
  --shadow: 0 20px 55px rgba(0,0,0,.22);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-google); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button, [role="button"] { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--google-blue) 48%, transparent); outline-offset: 2px; }
svg { width: 20px; height: 20px; display: block; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; }
.sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; width: 250px; padding: 28px 18px 20px; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.brand { border: 0; background: none; display: flex; align-items: center; gap: 11px; padding: 0 12px 27px; cursor: pointer; }
.brand-name { font: 800 25px/1 var(--font-google); letter-spacing: -1.4px; }
.brand-mark { width: 29px; height: 28px; display: flex; gap: 2.5px; align-items: center; justify-content: center; border-radius: 9px; color: var(--surface); background: var(--green); }
.brand-mark span { width: 3px; border-radius: 8px; background: currentColor; }
.brand-mark span:nth-child(1), .brand-mark span:nth-child(4) { height: 9px; }
.brand-mark span:nth-child(2) { height: 17px; }
.brand-mark span:nth-child(3) { height: 13px; }
.primary-nav, .secondary-nav { display: grid; gap: 5px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 13px; width: 100%; padding: 11px 13px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-weight: 600; font-size: 14px; cursor: pointer; transition: .2s ease; text-align: left; }
.nav-item:hover { color: var(--ink); background: var(--surface-2); transform: translateX(2px); }
.nav-item.active { color: var(--green); background: var(--mint); }
.nav-item.active svg { stroke-width: 2.4; }
.nav-pulse { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 17%, transparent); }
.sidebar-spacer { flex: 1; min-height: 20px; }
.pro-card { overflow: hidden; margin: 14px 1px; padding: 0 17px 17px; border-radius: 18px; color: #fff; background: #1d493c; box-shadow: var(--shadow); }
.pro-card strong { font: 700 13px var(--font-google); }
.pro-card p { margin: 6px 0 13px; color: rgba(255,255,255,.67); font-size: 11px; line-height: 1.4; }
.pro-visual { height: 64px; position: relative; margin: 0 -17px 3px; background: radial-gradient(circle at 50% 120%, #6f9e87 0 18%, transparent 19%), radial-gradient(circle at 50% 115%, #376854 0 43%, transparent 44%); }
.pro-visual::after { content: ''; position: absolute; width: 30px; height: 38px; background: #f4cf68; border-radius: 50% 50% 10px 10px; left: calc(50% - 15px); bottom: -1px; box-shadow: inset -7px -5px rgba(182,130,31,.17); }
.pro-visual span { position: absolute; color: #f8dc86; font-size: 9px; z-index: 2; }
.pro-visual span:nth-child(1) { left: 30px; top: 24px; }.pro-visual span:nth-child(2) { right: 31px; top: 15px; }.pro-visual span:nth-child(3) { right: 19px; top: 39px; }
.btn { border: 0; border-radius: 11px; padding: 12px 18px; font-weight: 700; font-size: 13px; cursor: pointer; display: inline-flex; justify-content: center; align-items: center; gap: 8px; transition: transform .18s, box-shadow .18s, background .18s; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--green); color: var(--surface); box-shadow: 0 8px 20px color-mix(in srgb, var(--green) 20%, transparent); }
body.dark .btn-primary { color: #16201b; }
.btn-light { background: white; color: #193e33; }.btn-sm { width: 100%; padding: 8px; font-size: 11px; }
.btn-soft { background: var(--mint); color: var(--green); }.btn-outline { background: transparent; border: 1px solid var(--line); }
.secondary-nav { padding-top: 10px; border-top: 1px solid var(--line); }
.profile-card { margin-top: 9px; border: 0; background: transparent; display: grid; grid-template-columns: 36px 1fr 20px; align-items: center; gap: 10px; padding: 10px; text-align: left; cursor: pointer; border-radius: 13px; }
.profile-card:hover { background: var(--surface-2); }.profile-card strong { display: block; font-size: 12px; }.profile-card small { display:block; color:var(--muted); font-size:10px; margin-top:3px; }.profile-card svg { width:16px; color:var(--muted); }
.avatar { border-radius: 50%; background: linear-gradient(145deg, #e5a58a, #c75f52); color: white; border: 2px solid var(--surface); display: inline-grid; place-items: center; font-weight: 700; letter-spacing: -.4px; flex: 0 0 auto; }
.avatar-main { width:36px; height:36px; font-size:10px; }.avatar-small { width:36px; height:36px; font-size:10px; cursor:pointer; }.avatar-a { background:linear-gradient(145deg,#7fc1b5,#39786a); }.avatar-b { background:linear-gradient(145deg,#b7a5d7,#725c9d); }.avatar-c { background:linear-gradient(145deg,#e6bb6a,#ba7d35); }.avatar-d { background:linear-gradient(145deg,#7f9ec7,#456789); }

.main-content { grid-column: 2; min-width: 0; }
.topbar { position: sticky; z-index: 20; top: 0; height: 78px; padding: 0 42px; display:flex; align-items:center; justify-content:space-between; background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(15px); border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.crumb { display:flex; flex-direction:column; gap:2px; }.crumb span { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:1.2px; font-weight:700; }.crumb b { font:700 15px var(--font-google); }
.top-actions { display:flex; align-items:center; gap:9px; }
.streak-pill { display:flex; align-items:center; gap:5px; height:35px; padding:0 12px; border-radius:20px; background:var(--yellow-soft); color:#8c6816; font-size:12px; }.streak-pill span{font-size:15px}.streak-pill small{font-size:9px;text-transform:uppercase;font-weight:700;}
.icon-btn { position:relative; width:36px; height:36px; border:1px solid var(--line); background:var(--surface); border-radius:50%; display:grid; place-items:center; cursor:pointer; }.icon-btn svg{width:16px}.has-dot::after{content:'';position:absolute;right:6px;top:6px;width:6px;height:6px;border-radius:50%;background:var(--coral);border:2px solid var(--surface)}
.mobile-menu { display:none; border:0; background:none; }
.view-root { max-width: 1330px; margin: 0 auto; padding: 28px 42px 55px; }
.view-enter { animation: viewIn .32s ease both; } @keyframes viewIn { from{opacity:0; transform:translateY(7px)} }

.welcome { display:flex; align-items:end; justify-content:space-between; margin-bottom:23px; }
.welcome h1 { margin:0 0 7px; font:800 27px/1.15 var(--font-google); letter-spacing:-1px; }.welcome h1 em{font-style:normal;color:var(--green-2)}.welcome p{margin:0;color:var(--muted);font-size:13px}.welcome-actions{display:flex;gap:9px;}
.home-grid { display:grid; grid-template-columns:minmax(0, 1.65fr) minmax(285px, .75fr); gap:20px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.continue-card { min-height:334px; padding:24px; display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(230px,.8fr); gap:24px; overflow:hidden; }
.section-label { display:flex; align-items:center; justify-content:space-between; margin-bottom:15px; }.section-label span { color:var(--muted); text-transform:uppercase; letter-spacing:1.3px; font-size:10px; font-weight:800; }.section-label button{border:0;background:none;color:var(--green-2);font-size:11px;font-weight:700;cursor:pointer;}
.lesson-visual { height:195px; position:relative; overflow:hidden; border-radius:16px; background:linear-gradient(160deg,#cad7d1,#728c83); cursor:pointer; }
.lesson-scene { position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,rgba(18,45,37,.76)), radial-gradient(ellipse at 22% 12%,#e7eee9 0 8%,transparent 9%), linear-gradient(115deg,transparent 0 40%,rgba(20,58,46,.18) 41% 43%,transparent 44%); }
.lesson-scene::before { content:''; position:absolute; width:220px; height:160px; right:-35px; bottom:-77px; border-radius:55% 50% 0 0; background:#315e50; transform:rotate(-8deg); box-shadow:-155px 48px 0 #23483e; }
.lesson-scene::after { content:''; position:absolute; width:44px; height:44px; border-radius:50%; background:#d5a17c; left:39%; bottom:64px; box-shadow:3px 35px 0 15px #e8d8c8; }
.play-button { position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%); width:48px;height:48px;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:#1e493d;box-shadow:0 6px 25px rgba(0,0,0,.18);cursor:pointer; }.play-button:hover{transform:translate(-50%,-50%) scale(1.06)}.play-button svg{width:17px;fill:currentColor;}
.video-meta { position:absolute; z-index:2; left:16px;right:16px;bottom:12px;color:white;display:flex;align-items:end;justify-content:space-between; }.video-meta span{font-size:10px;opacity:.75}.video-meta strong{display:block;margin-top:3px;font-size:13px}.duration{font-size:9px!important;padding:4px 6px;border-radius:5px;background:rgba(0,0,0,.42)}
.lesson-detail { display:flex; flex-direction:column; }.lesson-detail h2 { margin:6px 0 9px; font:800 21px/1.25 var(--font-google); letter-spacing:-.5px; }.lesson-detail p{margin:0 0 19px;color:var(--muted);font-size:12px;line-height:1.55}.level-row{display:flex;gap:8px;margin-bottom:18px}.tag{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:7px;background:var(--surface-2);color:var(--muted);font-size:9px;font-weight:700}.tag-yellow{background:var(--yellow-soft);color:#896818}.lesson-progress{margin-top:auto}.lesson-progress header{display:flex;justify-content:space-between;font-size:10px;font-weight:700;margin-bottom:7px}.progress-track{height:6px;border-radius:6px;background:var(--surface-3);overflow:hidden}.progress-fill{height:100%;border-radius:6px;background:var(--yellow);}.lesson-actions{margin-top:16px;display:flex;gap:8px}.lesson-actions .btn-primary{flex:1}.lesson-actions .icon-btn{border-radius:11px;width:41px;height:41px}
.day-card { padding:24px; position:relative; overflow:hidden; background:var(--green); color:var(--surface); border-color:transparent; }.day-card::after{content:'';position:absolute;width:150px;height:150px;border:1px solid rgba(255,255,255,.08);border-radius:50%;right:-60px;top:-45px;box-shadow:0 0 0 35px rgba(255,255,255,.025)} body.dark .day-card{color:#10251e}.day-card .section-label span{color:rgba(255,255,255,.52)}body.dark .day-card .section-label span{color:rgba(15,34,28,.55)}
.daily-head { display:flex;align-items:center;gap:12px;margin:9px 0 17px }.score-ring { --p:74; position:relative;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--yellow) calc(var(--p)*1%),rgba(255,255,255,.14) 0); }.score-ring::before{content:'';position:absolute;inset:6px;border-radius:50%;background:var(--green)}.score-ring b{position:relative;font:800 19px var(--font-google)}.daily-head h3{margin:0;font:700 15px var(--font-google)}.daily-head p{margin:4px 0 0;color:rgba(255,255,255,.55);font-size:10px}.stat-list{display:grid;gap:10px}.stat-item{display:grid;grid-template-columns:29px 1fr auto;align-items:center;gap:10px;padding:8px 0;border-top:1px solid rgba(255,255,255,.1)}.stat-icon{width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.1);display:grid;place-items:center}.stat-icon svg{width:13px}.stat-item span{font-size:10px;color:rgba(255,255,255,.55)}.stat-item b{font-size:12px}.stat-item strong{font:700 13px var(--font-google);color:var(--yellow)}
.metrics { grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:13px; }.metric-card{padding:16px 18px;display:flex;align-items:center;gap:13px;}.metric-icon{width:37px;height:37px;border-radius:11px;display:grid;place-items:center;background:var(--mint);color:var(--green)}.metric-icon.yellow{background:var(--yellow-soft);color:#9b7218}.metric-icon.coral{background:#f9ddd7;color:#b95442}.metric-icon.lavender{background:var(--lavender);color:#6d5a99}.metric-icon svg{width:17px}.metric-card small{display:block;color:var(--muted);font-size:9px;margin-bottom:3px}.metric-card strong{font:800 17px var(--font-google)}.metric-card em{font-style:normal;font-size:9px;margin-left:3px;color:#4f9c77}
.lower-grid { margin-top:20px; display:grid;grid-template-columns:minmax(0,1.5fr) minmax(275px,.75fr);gap:20px; }.weekly-card,.goal-card{padding:23px}.card-title{display:flex;justify-content:space-between;align-items:center}.card-title h3{font:700 15px var(--font-google);margin:0}.card-title p{margin:4px 0 0;color:var(--muted);font-size:10px}.select-mini{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:8px;padding:7px 9px;font-size:9px;}
.chart-wrap{height:142px;margin-top:17px;position:relative;padding:3px 5px 20px 35px}.chart-lines{position:absolute;inset:3px 5px 20px 35px;display:flex;flex-direction:column;justify-content:space-between}.chart-lines i{display:block;border-top:1px dashed var(--line);position:relative}.chart-lines i::before{content:attr(data-y);position:absolute;right:calc(100% + 8px);top:-6px;color:var(--muted);font-style:normal;font-size:8px}.bars{height:100%;display:flex;align-items:end;justify-content:space-around;gap:13px;position:relative;z-index:2}.bar-col{height:100%;flex:1;display:flex;align-items:end;justify-content:center;position:relative}.bar-col i{display:block;width:22px;max-width:85%;height:var(--h);border-radius:6px 6px 2px 2px;background:var(--mint);transition:.3s}.bar-col.active i{background:var(--yellow);box-shadow:0 5px 12px rgba(218,171,40,.2)}.bar-col span{position:absolute;top:calc(100% + 7px);font-size:8px;color:var(--muted)}.goal-head{display:flex;align-items:center;gap:12px;margin:18px 0}.goal-head .score-ring{width:59px;height:59px;background:conic-gradient(var(--yellow) 68%,var(--surface-3) 0)}.goal-head .score-ring::before{background:var(--surface)}.goal-head .score-ring b{font-size:14px}.goal-head strong{display:block;font-size:12px}.goal-head span{color:var(--muted);font-size:9px}.week-dots{display:flex;justify-content:space-between;margin:20px 0}.week-day{display:grid;gap:7px;justify-items:center;color:var(--muted);font-size:8px}.week-day i{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);font-style:normal;font-size:10px}.week-day.done i{background:var(--green);color:var(--surface)}.week-day.today i{background:var(--yellow-soft);color:#88650e;border:1px solid var(--yellow)}

/* Shared views */
.page-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:23px}.page-head h1{font:800 26px var(--font-google);margin:0 0 6px;letter-spacing:-.8px}.page-head p{margin:0;color:var(--muted);font-size:12px}.page-head-actions{display:flex;gap:8px}.input-shell{border:1px solid var(--line);background:var(--surface);border-radius:12px;display:flex;align-items:center;gap:9px;padding:0 12px}.input-shell svg{width:16px;color:var(--muted)}.input-shell input{border:0;outline:0;background:transparent;color:var(--ink);padding:11px 0;min-width:220px;font-size:12px}.filter-row{display:flex;gap:8px;margin-bottom:19px}.filter-chip{border:1px solid var(--line);background:var(--surface);color:var(--muted);padding:8px 12px;border-radius:20px;font-size:10px;font-weight:700;cursor:pointer}.filter-chip.active{background:var(--green);color:var(--surface);border-color:var(--green)}

.library-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.lesson-card{overflow:hidden;cursor:pointer;transition:.23s}.lesson-card:hover{transform:translateY(-4px);box-shadow:0 20px 45px rgba(28,51,43,.11)}.lesson-thumb{height:145px;position:relative;overflow:hidden;background:var(--thumb)}.lesson-thumb::before{content:'';position:absolute;width:95px;height:95px;border-radius:50%;background:rgba(255,255,255,.28);top:22px;left:calc(50% - 47px)}.lesson-thumb::after{content:'\201C';position:absolute;left:50%;top:50%;transform:translate(-50%,-54%);font:800 70px Georgia;color:rgba(255,255,255,.7)}.thumb-2::after{content:'▶';font:700 34px sans-serif}.thumb-3::after{content:'✦';font-size:45px}.thumb-4::after{content:'☕';font-size:43px}.thumb-5::after{content:'A';font:800 54px var(--font-google)}.thumb-6::after{content:'↗';font-size:49px}.lesson-thumb .duration{position:absolute;right:10px;bottom:10px;color:white;z-index:2}.offline-badge{position:absolute;left:10px;top:10px;padding:5px 7px;border-radius:8px;background:rgba(255,255,255,.82);color:#1d493c;font-size:8px;font-weight:800}.lesson-card-content{padding:15px}.lesson-card-content h3{font:700 13px/1.35 var(--font-google);margin:0 0 8px}.lesson-card-content p{color:var(--muted);font-size:10px;line-height:1.5;margin:0 0 13px}.lesson-card-foot{display:flex;justify-content:space-between;align-items:center}.mini-progress{height:4px;width:90px;background:var(--surface-3);border-radius:5px;overflow:hidden}.mini-progress i{display:block;height:100%;background:var(--yellow);width:var(--p)}.lesson-card-foot span{font-size:9px;color:var(--muted)}

/* Practice */
.practice-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(310px,.75fr);gap:20px}.studio{overflow:hidden}.studio-video{height:300px;position:relative;background:linear-gradient(150deg,#546f66,#182f28);display:grid;place-items:center}.studio-video::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.14),transparent 20%),linear-gradient(90deg,transparent 49%,rgba(255,255,255,.03) 50%)}.studio-word{z-index:2;color:white;text-align:center;max-width:80%;text-shadow:0 2px 15px rgba(0,0,0,.3)}.studio-word h2{font:700 26px/1.35 var(--font-google);margin:0 0 10px}.studio-word h2 .spoken{color:var(--yellow)}.studio-word p{margin:0;color:rgba(255,255,255,.64);font-size:13px}.studio-top{position:absolute;z-index:3;left:18px;right:18px;top:17px;display:flex;justify-content:space-between;color:white}.studio-top span{font-size:10px;padding:6px 9px;border-radius:8px;background:rgba(0,0,0,.25);backdrop-filter:blur(8px)}.studio-controls{padding:18px 22px}.timeline{height:5px;background:var(--surface-3);border-radius:5px;position:relative;cursor:pointer}.timeline i{display:block;height:100%;width:38%;background:var(--yellow);border-radius:5px}.timeline i::after{content:'';display:block;float:right;width:11px;height:11px;margin-top:-3px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 4px color-mix(in srgb,var(--yellow) 22%,transparent)}.timecodes{display:flex;justify-content:space-between;color:var(--muted);font-size:9px;margin-top:7px}.control-row{display:flex;align-items:center;justify-content:space-between;margin-top:13px}.control-group{display:flex;align-items:center;gap:8px}.control-btn{width:34px;height:34px;border:0;background:transparent;border-radius:50%;display:grid;place-items:center;cursor:pointer}.control-btn:hover{background:var(--surface-2)}.control-btn.main{width:43px;height:43px;background:var(--green);color:var(--surface)}.control-btn.main svg{fill:currentColor}.speed-btn{border:1px solid var(--line);background:var(--surface);padding:6px 8px;border-radius:8px;font-size:9px;font-weight:700}.transcript{padding:21px}.transcript-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.transcript-head h3{margin:0;font:700 14px var(--font-google)}.language-tabs{display:flex;padding:3px;background:var(--surface-2);border-radius:8px}.language-tabs button{border:0;background:transparent;color:var(--muted);border-radius:6px;padding:5px 8px;font-size:8px;font-weight:700}.language-tabs button.active{background:var(--surface);color:var(--ink);box-shadow:0 2px 6px rgba(0,0,0,.05)}.line-item{display:grid;grid-template-columns:39px 1fr;gap:12px;padding:12px 8px;border-radius:11px;cursor:pointer}.line-item:hover{background:var(--surface-2)}.line-item.active{background:var(--yellow-soft)}.line-time{font-size:9px;color:var(--muted);padding-top:3px}.line-copy strong{font-size:12px;line-height:1.4;display:block}.line-copy span{font-size:10px;color:var(--muted);display:block;margin-top:4px}.coach-panel{display:flex;flex-direction:column;gap:15px}.record-card{padding:22px;text-align:center}.record-card h3{font:700 15px var(--font-google);margin:0}.record-card>p{color:var(--muted);font-size:10px;line-height:1.5;margin:6px 0 18px}.waveform{height:55px;display:flex;align-items:center;justify-content:center;gap:3px;margin-bottom:12px}.waveform i{width:3px;height:var(--h);border-radius:4px;background:var(--mint);animation:wave 1s ease-in-out infinite alternate;animation-delay:var(--d)}.recording .waveform i{background:var(--coral)}@keyframes wave{to{transform:scaleY(.45)}}.record-time{font:700 20px var(--font-google);margin-bottom:14px}.record-btn{width:68px;height:68px;border:7px solid var(--surface-2);border-radius:50%;background:var(--coral);color:white;display:grid;place-items:center;margin:0 auto;cursor:pointer;box-shadow:0 0 0 1px var(--line),0 8px 20px rgba(235,128,106,.25)}.record-btn svg{width:24px}.recording .record-btn{animation:pulse 1.4s infinite}.recording .record-btn::before{content:'';width:19px;height:19px;border-radius:4px;background:white}@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(235,128,106,.12)}}.record-help{display:block;color:var(--muted);font-size:8px;margin-top:10px}.score-card{padding:20px}.score-overview{display:flex;align-items:center;gap:15px}.score-overview .score-ring{width:74px;height:74px}.score-overview .score-ring::before{background:var(--surface)}.score-overview h3{margin:0 0 5px;font:700 15px var(--font-google)}.score-overview p{font-size:10px;color:var(--muted);margin:0}.score-bars{display:grid;gap:11px;margin-top:19px}.score-bar header{display:flex;justify-content:space-between;font-size:9px;margin-bottom:5px}.score-bar header b{font-size:10px}.score-bar .progress-track{height:5px}.feedback{margin-top:16px;padding:12px;border-radius:11px;background:var(--mint);font-size:10px;line-height:1.5;color:var(--green)}
.record-target{margin:12px 0 4px;padding:9px 10px;border-radius:9px;background:var(--blue-soft);color:var(--google-blue);font-size:9px;line-height:1.45;font-weight:650}.score-placeholder{margin:18px 0;padding:16px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);font-size:10px;line-height:1.55}.speech-compare{margin-top:17px;padding:12px;border-radius:11px;background:var(--surface-2)}.speech-compare small{display:block;color:var(--muted);font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.speech-compare p{margin:5px 0 11px;font-size:10px;line-height:1.6}.speech-compare p:last-child{margin-bottom:0}.speech-compare span{padding:2px 1px;border-radius:4px}.word-match{color:var(--google-green)}.word-replace,.word-missing{color:var(--google-red);background:var(--red-soft);text-decoration:underline;text-decoration-style:dotted}.playback-btn{width:100%;margin-top:12px}.playback-btn svg{width:14px}.score-empty .score-ring{filter:grayscale(1);opacity:.65}
.youtube-video::before{display:none}.youtube-video iframe{width:100%;height:100%;border:0;background:#000}.youtube-video .studio-top{pointer-events:none}.transcript-head small{display:block;color:var(--muted);font-size:8px;margin-top:4px}.transcript-lines{max-height:540px;overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent}.line-item{width:100%;border:0;background:transparent;color:var(--ink);text-align:left}.line-copy{display:block}.transcript[data-mode="source"] .translation-text{display:none}.transcript[data-mode="translation"] .source-text{display:none}.caption-warning{margin-bottom:12px;padding:10px 12px;border-radius:10px;background:var(--yellow-soft);color:#856513;font-size:9px;line-height:1.45}
.live-shadow-box{position:relative;padding:16px 22px 15px;background:linear-gradient(135deg,#173d32,#26594a);color:#fff;border-top:1px solid rgba(255,255,255,.08)}.live-caption-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;color:rgba(255,255,255,.64);font-size:8px;font-weight:800;letter-spacing:1.1px}.live-caption-meta span{display:flex;align-items:center;gap:7px}.live-caption-meta i{width:7px;height:7px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px rgba(235,128,106,.14);animation:livePulse 1.4s infinite}.live-caption-meta b{font-size:9px;color:var(--yellow);letter-spacing:.4px}.live-caption-source{min-height:31px;font:700 19px/1.45 var(--font-google);letter-spacing:-.2px}.caption-word{color:rgba(255,255,255,.34);transition:color .12s ease,background .12s ease,text-shadow .12s ease}.caption-word.done{color:#fff}.caption-word.current{color:var(--yellow);text-shadow:0 0 14px rgba(242,202,89,.4)}.live-caption-translation{min-height:18px;margin-top:5px;color:rgba(255,255,255,.64);font-size:11px;line-height:1.45}.live-caption-progress{height:3px;margin-top:12px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}.live-caption-progress i{display:block;width:0;height:100%;border-radius:4px;background:var(--yellow);transition:width .1s linear}.live-shadow-box.ready .live-caption-meta i{background:var(--yellow)}.live-shadow-box.waiting .live-caption-source{color:rgba(255,255,255,.38);font-weight:600}.live-shadow-box.waiting .live-caption-progress{opacity:.45}.timeline i{width:0}.line-item.active{box-shadow:inset 3px 0 var(--yellow)}@keyframes livePulse{50%{opacity:.45;transform:scale(.82)}}

/* Progress */
.progress-hero{display:grid;grid-template-columns:1.4fr .8fr;gap:18px;margin-bottom:18px}.big-stat{padding:25px}.big-stat h3{font:700 15px var(--font-google);margin:0 0 4px}.big-stat>p{color:var(--muted);font-size:10px;margin:0}.big-number{font:800 36px var(--font-google);margin:20px 0 3px}.big-number small{font-size:12px;color:var(--muted)}.trend{color:#3f936c;font-size:10px;font-weight:700}.line-chart{height:150px;margin-top:18px;position:relative}.line-chart svg{width:100%;height:100%;overflow:visible}.line-chart .gridline{stroke:var(--line);stroke-dasharray:3 4}.line-chart .area{fill:url(#areaGradient)}.line-chart .stroke{fill:none;stroke:var(--yellow);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.skill-radar{padding:25px;text-align:center}.skill-radar h3{margin:0;font:700 15px var(--font-google);text-align:left}.radar{width:170px;height:170px;margin:8px auto 0;position:relative}.radar svg{width:100%;height:100%}.radar text{font-size:7px;fill:var(--muted)}.report-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.report-card{padding:20px}.report-card header{display:flex;justify-content:space-between;align-items:center}.report-card h3{font:700 13px var(--font-google);margin:0}.report-card header i{width:30px;height:30px;border-radius:9px;background:var(--surface-2);display:grid;place-items:center;font-style:normal}.report-card header svg{width:14px}.report-list{display:grid;gap:12px;margin-top:18px}.report-item{display:flex;justify-content:space-between;align-items:center;font-size:10px}.report-item span{color:var(--muted)}.report-item b{font-size:11px}.rank-badge{padding:4px 7px;border-radius:7px;background:var(--yellow-soft);color:#88650e;font-size:8px;font-weight:800}

/* Community */
.community-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(290px,.7fr);gap:19px}.leaderboard{padding:23px}.leaderboard-head{display:flex;justify-content:space-between}.leaderboard-head h3{margin:0;font:700 15px var(--font-google)}.leader-list{margin-top:16px}.leader-row{display:grid;grid-template-columns:27px 38px 1fr auto;align-items:center;gap:10px;padding:11px 8px;border-bottom:1px solid var(--line)}.leader-row.me{margin:5px -7px;border:0;border-radius:12px;background:var(--yellow-soft);padding:12px 15px}.leader-row>strong{font:700 12px var(--font-google);text-align:center}.leader-row .avatar{width:34px;height:34px;font-size:9px}.leader-name b{font-size:11px;display:block}.leader-name small{font-size:8px;color:var(--muted)}.leader-xp{text-align:right}.leader-xp b{font-size:11px;display:block}.leader-xp span{font-size:8px;color:var(--muted)}.challenge-card{padding:22px;background:linear-gradient(160deg,var(--green),#326856);color:var(--surface);border:0}.challenge-card .tag{background:rgba(255,255,255,.12);color:inherit}.challenge-card h2{font:800 22px/1.25 var(--font-google);margin:22px 0 8px}.challenge-card p{font-size:10px;color:rgba(255,255,255,.65);line-height:1.5}.challenge-progress{margin-top:28px}.challenge-progress header{display:flex;justify-content:space-between;font-size:9px;margin-bottom:7px}.challenge-card .progress-track{background:rgba(255,255,255,.13)}.challenge-card .btn{margin-top:18px;width:100%}

/* Settings */
.settings-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px}.settings-menu{padding:10px;height:max-content}.settings-menu button{width:100%;border:0;background:transparent;border-radius:10px;padding:10px 11px;text-align:left;color:var(--muted);font-size:10px;font-weight:700;display:flex;gap:9px;align-items:center;cursor:pointer}.settings-menu button svg{width:14px}.settings-menu button.active{background:var(--mint);color:var(--green)}.settings-panel{padding:25px}.settings-section+.settings-section{margin-top:25px;padding-top:23px;border-top:1px solid var(--line)}.settings-section h3{font:700 14px var(--font-google);margin:0 0 4px}.settings-section>p{color:var(--muted);font-size:10px;margin:0 0 17px}.setting-row{min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:9px 0}.setting-row+.setting-row{border-top:1px solid var(--line)}.setting-copy{display:flex;align-items:center;gap:12px}.setting-icon{width:34px;height:34px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center}.setting-icon svg{width:15px}.setting-copy b{display:block;font-size:11px}.setting-copy span{display:block;color:var(--muted);font-size:9px;margin-top:3px}.toggle{position:relative;width:39px;height:22px;border:0;border-radius:20px;background:var(--surface-3);cursor:pointer;transition:.2s}.toggle::after{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;background:white;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);transition:.2s}.toggle.on{background:var(--green-2)}.toggle.on::after{left:20px}.color-options{display:flex;gap:7px}.color-options button{width:23px;height:23px;border-radius:50%;border:3px solid var(--surface);box-shadow:0 0 0 1px var(--line);cursor:pointer}.color-options button.selected{box-shadow:0 0 0 2px var(--ink)}.select-setting{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:9px;padding:8px 10px;font-size:9px}.data-actions{display:flex;gap:8px;flex-wrap:wrap}
.feature-page-head{align-items:flex-end}.feature-status{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-bottom:18px;padding:16px 20px}.feature-status>span{display:grid;grid-template-columns:34px 1fr;column-gap:10px;align-items:center;padding:4px 18px}.feature-status>span+span{border-left:1px solid var(--line)}.feature-status i{grid-row:1/3;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--blue-soft);color:var(--google-blue)}.feature-status i svg{width:16px}.feature-status b{font-size:11px}.feature-status small{margin-top:3px;color:var(--muted);font-size:8px}.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.feature-card{appearance:none;width:100%;min-height:138px;padding:17px;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:flex;gap:13px;text-align:left;cursor:pointer;transition:.2s ease}.feature-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--google-blue) 45%,var(--line));box-shadow:0 14px 32px color-mix(in srgb,var(--google-blue) 12%,transparent)}.feature-icon{flex:0 0 39px;width:39px;height:39px;border-radius:12px;display:grid;place-items:center;background:var(--blue-soft);color:var(--google-blue)}.feature-icon svg{width:19px}.feature-copy{display:flex;min-width:0;flex:1;flex-direction:column}.feature-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.feature-card-head b{font:750 12px/1.35 var(--font-google)}.feature-access{flex:0 0 auto;padding:3px 5px;border-radius:5px;background:var(--green-soft);color:var(--google-green);font:800 6px var(--font-google);font-style:normal;letter-spacing:.45px}.feature-access.plus{background:var(--yellow-soft);color:#8a4b00}.feature-copy>small{margin-top:7px;color:var(--muted);font-size:8px;line-height:1.5}.feature-copy>strong{margin-top:auto;padding-top:9px;color:var(--google-blue);font-size:8px}

/* Modals/toast */
.toggle:disabled{cursor:not-allowed;opacity:.55}
.modal-backdrop{position:fixed;z-index:100;inset:0;background:rgba(12,27,22,.48);backdrop-filter:blur(5px);display:grid;place-items:center;padding:20px;animation:fadeIn .2s}.modal{width:min(520px,100%);background:var(--surface);border-radius:24px;box-shadow:0 28px 90px rgba(0,0,0,.25);padding:27px;animation:modalIn .25s ease}.modal-close{float:right;width:32px;height:32px;border:0;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;cursor:pointer}.modal-close svg{width:15px}.modal h2{font:800 22px var(--font-google);margin:3px 0 7px}.modal>p{color:var(--muted);font-size:11px;line-height:1.5;margin:0 0 20px}.form-label{display:block;font-size:10px;font-weight:700;margin:14px 0 7px}.url-input{display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;padding:0 12px;background:var(--bg)}.url-input:focus-within{border-color:var(--green-2);box-shadow:0 0 0 3px var(--mint)}.url-input svg{width:17px;color:var(--coral)}.url-input input{width:100%;padding:13px 10px;border:0;background:transparent;outline:0;color:var(--ink);font-size:11px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.field select{width:100%;padding:11px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font-size:10px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}.process-list{margin:18px 0;display:grid;gap:9px}.process-item{display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center;padding:9px;border-radius:10px;background:var(--surface-2)}.process-item i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--green);font-style:normal;font-size:10px}.process-item span{font-size:10px;font-weight:600}.process-item small{font-size:8px;color:var(--muted)}
.form-note{display:flex;gap:7px;align-items:flex-start;margin-top:13px;padding:9px 10px;border-radius:9px;background:var(--surface-2);color:var(--muted);font-size:8px;line-height:1.45}.form-note svg{width:13px;flex:0 0 auto}.processing-fill{animation:processing 1.2s ease-in-out infinite alternate}.process-error{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#f9ddd7;color:#b95442;font:800 22px var(--font-google);margin:5px 0 16px}@keyframes processing{to{width:88%}}
.shadow-options{display:flex;align-items:flex-end;gap:8px}.shadow-options label{display:grid;gap:4px;color:var(--muted);font-size:8px;font-weight:700}.shadow-options select{height:32px;border:1px solid var(--line);border-radius:9px;padding:0 7px;background:var(--surface);color:var(--ink);font:700 9px var(--font-google)}.shortcut-hint{text-align:right;color:var(--muted);font-size:8px;margin-top:8px}.transcript-actions{display:flex;align-items:center;gap:9px}.account-setting{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}.account-setting .avatar{width:40px;height:40px}.account-setting b,.account-setting small{display:block}.account-setting b{font-size:12px}.account-setting small{margin-top:4px;color:var(--muted);font-size:9px}.account-setting-actions{display:flex;gap:7px}.modal-kicker{display:inline-block;margin-bottom:8px;color:var(--google-blue);font-size:8px;font-weight:900;letter-spacing:1.2px}.text-field,.text-area{box-sizing:border-box;width:100%;border:1px solid var(--line);border-radius:11px;background:var(--bg);color:var(--ink);outline:0;padding:12px;font:500 11px var(--font-google)}.text-field:focus,.text-area:focus{border-color:var(--google-blue);box-shadow:0 0 0 3px var(--blue-soft)}.text-area{height:92px;resize:vertical;line-height:1.5}.check-row{display:flex;align-items:center;gap:9px;margin:14px 0;color:var(--muted);font-size:9px}.check-row input{accent-color:var(--google-blue)}.form-error{min-height:17px;margin:7px 0;color:var(--google-red);font-size:9px}.auth-submit{width:100%}.auth-switch{display:block;margin:13px auto 0;border:0;background:transparent;color:var(--google-blue);font-size:9px;font-weight:750;cursor:pointer}.privacy-note,.billing-disclosure{display:flex;align-items:flex-start;gap:8px;margin-top:18px;padding:11px;border-radius:10px;background:var(--surface-2);color:var(--muted);font-size:8px;line-height:1.5}.privacy-note svg{width:14px;flex:0 0 auto;color:var(--google-green)}.pricing-modal{width:min(1040px,100%)}.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}.price-card{position:relative;padding:17px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}.price-card.recommended{border:2px solid var(--google-blue);padding:16px;box-shadow:0 10px 25px color-mix(in srgb,var(--google-blue) 14%,transparent)}.recommended-badge{position:absolute;right:10px;top:10px;border-radius:20px;padding:4px 7px;background:var(--blue-soft);color:var(--google-blue);font-size:7px;font-weight:900}.price-card h3{margin:0 0 12px;font:750 14px var(--font-google)}.price{font:800 22px var(--font-google);white-space:nowrap}.price small{font-size:8px;color:var(--muted);font-weight:600}.price-card p{min-height:32px;color:var(--muted);font-size:9px;line-height:1.45}.price-card ul{min-height:148px;margin:15px 0;padding:0;list-style:none}.price-card li{display:flex;align-items:flex-start;gap:6px;margin:8px 0;font-size:8px;line-height:1.4}.price-card li svg{width:12px;flex:0 0 auto;color:var(--google-green)}.price-card .btn{width:100%}.price-card .btn:disabled{opacity:.65}.pricing-loading{padding:30px;text-align:center;color:var(--muted);font-size:10px}
.inline-controls{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}.assessment-options{display:grid;gap:9px;margin:18px 0}.assessment-answer{width:100%;text-align:left}.history-card{margin-top:14px;padding:18px}.lock-backdrop{z-index:1000;background:color-mix(in srgb,var(--ink) 72%,transparent);backdrop-filter:blur(14px)}
.practice-mode-tabs{display:flex;padding:3px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2)}.practice-mode-tabs button{display:flex;align-items:center;gap:6px;border:0;border-radius:8px;background:transparent;color:var(--muted);padding:8px 10px;font:750 9px var(--font-google);cursor:pointer}.practice-mode-tabs button svg{width:14px}.practice-mode-tabs button.active{background:var(--surface);color:var(--google-blue);box-shadow:0 2px 7px rgba(60,64,67,.12)}.dubbing-card{border-top:4px solid var(--google-blue)}.dub-progress{display:flex;align-items:baseline;justify-content:center;gap:5px;margin:0 0 14px}.dub-progress b{font:800 30px var(--font-google);color:var(--google-blue)}.dub-progress span{color:var(--muted);font-size:9px}.dub-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:15px}.dub-actions .btn{justify-content:center}.dub-playback-card{padding:20px}.dub-playback-card h3{display:flex;align-items:center;gap:8px;margin:0 0 7px;font:750 14px var(--font-google)}.dub-playback-card h3 svg{width:18px;color:var(--google-blue)}.dub-playback-card>p{margin:0 0 15px;color:var(--muted);font-size:9px;line-height:1.5}.dub-playback-card>.btn{width:100%;justify-content:center}.dub-playback-card>.dub-clear-button{margin-top:8px;border-color:color-mix(in srgb,var(--google-red) 38%,var(--line));color:var(--google-red)}.line-item.selected{outline:1px solid color-mix(in srgb,var(--google-blue) 45%,transparent);outline-offset:-1px}.line-item.has-dub{box-shadow:inset 3px 0 var(--google-green)}.dub-line-badge{display:inline-block;width:max-content;margin-top:6px;padding:3px 5px;border-radius:5px;background:var(--green-soft);color:var(--google-green);font:800 6px var(--font-google);font-style:normal;letter-spacing:.5px}
.practice-mode-tabs{flex-wrap:wrap;justify-content:flex-end}.practice-mode-tabs button{white-space:nowrap}.dub-advance-modes{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 0 8px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}.dub-advance-modes button{border:0;border-radius:7px;background:transparent;color:var(--muted);padding:7px;font:750 8px var(--font-google);cursor:pointer}.dub-advance-modes button.active{background:var(--surface);color:var(--google-blue);box-shadow:0 2px 6px rgba(60,64,67,.12)}.dub-advance-modes button:disabled{cursor:not-allowed;opacity:.7}.dub-sequence-status{min-height:29px;margin-bottom:12px;padding:8px 10px;border-radius:9px;background:var(--blue-soft);color:var(--google-blue);font-size:8px;font-weight:750;line-height:1.45}.dub-sequence-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:13px}.dub-sequence-actions .btn{justify-content:center}.sequence-active .record-btn{background:var(--google-red)}.sequence-active:not(.recording) .waveform i{animation-play-state:paused;opacity:.55}.full-dub-card{border-top:4px solid var(--google-red)}.full-dub-status{margin:4px 0 16px;padding:10px;border-radius:10px;background:var(--blue-soft);color:var(--google-blue);font-size:9px;font-weight:750}.dictation-card{padding:22px}.dictation-card h3{margin:0;font:750 15px var(--font-google)}.dictation-card>p{margin:6px 0 16px;color:var(--muted);font-size:9px;line-height:1.5}.dictation-prompt{margin-bottom:9px;color:var(--google-blue);font-size:10px;font-weight:800}.dictation-input{height:104px}.dictation-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}.dictation-actions .btn{justify-content:center}.dictation-result{margin-top:13px;padding:12px;border-radius:11px;background:var(--surface-2);color:var(--muted);font-size:9px;line-height:1.55}.dictation-result strong{color:var(--ink);font-size:12px}.dictation-result p{margin:8px 0;color:var(--ink)}.dictation-result small{display:block}.dictation-result .word-match{color:var(--google-green)}.dictation-result .word-replace,.dictation-result .word-missing{color:var(--google-red);text-decoration:underline}.practice-mode-dictation:not(.answer-visible) .live-caption-source{filter:blur(7px);user-select:none}.practice-mode-dictation:not(.answer-visible) .live-caption-translation{visibility:hidden}.dictation-transcript .line-item.active{background:var(--blue-soft)}
.offline-import-button{width:100%;margin-top:14px}.local-audio-cover{display:grid;place-content:center;min-height:310px;text-align:center;background:radial-gradient(circle at 30% 20%,var(--blue-soft),transparent 45%),linear-gradient(145deg,var(--surface-2),var(--surface))}.local-audio-cover h2{display:flex;align-items:center;justify-content:center;gap:12px;margin:0;font-size:22px}.local-audio-cover h2 svg{width:32px;color:var(--google-blue)}.local-audio-cover p{color:var(--muted)}
.modal-divider{height:1px;margin:20px 0;border:0;background:var(--line)}.danger-button{border:1px solid color-mix(in srgb,var(--google-red) 45%,var(--line));background:var(--surface);color:var(--google-red)}
.billing-list{display:grid;gap:8px;max-height:370px;overflow:auto}.billing-row{display:flex;justify-content:space-between;gap:20px;padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2)}.billing-row>span:last-child{text-align:right}.billing-row b,.billing-row small{display:block}.billing-row b{font-size:10px}.billing-row small{margin-top:4px;color:var(--muted);font-size:8px}.billing-row .status-paid{color:var(--google-green)}.billing-row .status-pending{color:#b06000}.billing-row .status-failed,.billing-row .status-cancelled,.billing-row .status-expired{color:var(--google-red)}
.admin-view{display:grid;gap:18px}.admin-view>.page-head{margin-bottom:0}.admin-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.admin-metrics article{display:flex;align-items:center;gap:12px;padding:17px}.admin-metrics i{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--blue-soft);color:var(--google-blue)}.admin-metrics i svg{width:18px}.admin-metrics small,.admin-metrics b{display:block}.admin-metrics small{margin-bottom:4px;color:var(--muted);font-size:8px}.admin-metrics b{font:800 17px var(--font-google)}.admin-panel{min-width:0;padding:20px}.admin-panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:15px;margin-bottom:16px}.admin-panel-head h2{margin:0;font:750 15px var(--font-google)}.admin-panel-head p{margin:4px 0 0;color:var(--muted);font-size:9px}.admin-filters{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.admin-filters .input-shell input{min-width:170px}.admin-filters .btn{padding:9px 14px}.admin-table-wrap{width:100%;overflow:auto}.admin-table{width:100%;border-collapse:collapse;white-space:nowrap}.admin-table th{padding:9px 10px;border-bottom:1px solid var(--line);color:var(--muted);font-size:8px;letter-spacing:.6px;text-align:left;text-transform:uppercase}.admin-table td{padding:11px 10px;border-bottom:1px solid var(--line);font-size:9px;vertical-align:middle}.admin-table tbody tr:hover{background:var(--surface-2)}.admin-user-cell{display:flex;align-items:center;gap:9px}.admin-user-cell .avatar{width:31px;height:31px;border:0;font-size:8px}.admin-user-cell b,.admin-user-cell small,.admin-cell-note{display:block}.admin-user-cell b{font-size:10px}.admin-user-cell small,.admin-cell-note{margin-top:3px;color:var(--muted);font-size:7px}.admin-edit-user{padding:7px 10px;font-size:8px}.admin-badge{display:inline-block;margin-right:4px;padding:4px 6px;border-radius:6px;background:var(--surface-2);color:var(--muted);font-size:7px;font-weight:850}.admin-badge.plan-plus{background:var(--blue-soft);color:var(--google-blue)}.admin-badge.plan-lifetime{background:var(--yellow-soft);color:#9a6500}.admin-badge.status-active,.admin-badge.status-paid{background:var(--green-soft);color:var(--google-green)}.admin-badge.status-suspended,.admin-badge.status-failed,.admin-badge.status-cancelled,.admin-badge.status-expired{background:var(--red-soft);color:var(--google-red)}.admin-badge.status-pending{background:var(--yellow-soft);color:#9a6500}.admin-badge.role-admin{background:var(--red-soft);color:var(--google-red)}.admin-pagination{display:flex;align-items:center;justify-content:flex-end;gap:11px;margin-top:14px}.admin-pagination span{color:var(--muted);font-size:8px}.admin-pagination .btn{padding:8px 11px;font-size:8px}.admin-secondary-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(260px,.7fr);gap:18px;align-items:start}.admin-order-table td{font-size:8px}.admin-audit{max-height:470px;overflow:auto}.admin-audit-row{display:grid;grid-template-columns:30px 1fr;gap:9px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}.admin-audit-row>i{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;background:var(--blue-soft);color:var(--google-blue)}.admin-audit-row svg{width:14px}.admin-audit-row b,.admin-audit-row small{display:block}.admin-audit-row b{font-size:8px;line-height:1.4}.admin-audit-row small{margin-top:3px;color:var(--muted);font-size:7px}.admin-empty,.admin-loading{padding:35px;text-align:center;color:var(--muted);font-size:10px}.admin-access-denied{max-width:520px;margin:50px auto;padding:45px;text-align:center}.admin-access-denied>i{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 15px;border-radius:18px;background:var(--red-soft);color:var(--google-red)}.admin-access-denied h1{font:800 24px var(--font-google)}.admin-access-denied p{color:var(--muted);font-size:11px}.admin-user-modal{width:min(560px,100%)}
.international-price{margin-top:4px;color:var(--google-blue);font-size:8px;font-weight:750}.payment-methods{display:grid;gap:9px}.payment-method{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:12px;width:100%;padding:12px;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--ink);text-align:left;cursor:pointer}.payment-method:hover:not(:disabled){border-color:var(--google-blue);background:var(--blue-soft)}.payment-method:disabled{cursor:not-allowed;opacity:.58}.payment-brand{width:48px;height:36px;border-radius:9px;display:grid;place-items:center;background:var(--surface-2);font:800 10px var(--font-google)}.brand-payos{color:var(--google-blue)}.brand-momo{background:#a50064;color:#fff}.brand-paypal{background:#eef4ff;color:#003087}.payment-method b,.payment-method small{display:block}.payment-method b{font-size:11px}.payment-method small{margin-top:4px;color:var(--muted);font-size:8px}.payment-method em{color:var(--google-blue);font-size:8px;font-style:normal;font-weight:750}.payment-method:disabled em{color:var(--muted)}
.toast{position:fixed;z-index:200;left:50%;bottom:28px;transform:translate(-50%,100px);opacity:0;display:flex;align-items:center;gap:9px;padding:11px 15px;border-radius:12px;background:#173d31;color:white;box-shadow:0 15px 40px rgba(0,0,0,.23);font-size:11px;transition:.3s;pointer-events:none}.toast.show{transform:translate(-50%,0);opacity:1}.toast svg{width:15px;color:var(--yellow)}
.empty-state{text-align:center;padding:50px 20px}.empty-icon{width:70px;height:70px;border-radius:22px;background:var(--mint);display:grid;place-items:center;margin:0 auto 15px}.empty-icon svg{width:29px}.empty-state h3{font:700 16px var(--font-google);margin:0 0 7px}.empty-state p{font-size:10px;color:var(--muted);margin:0 0 17px}
@keyframes fadeIn{from{opacity:0}}@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.98)}}
.mobile-dock{display:none}

/* Google brand color system */
.brand-mark{background:#fff;border:1px solid var(--line);box-shadow:0 4px 12px rgba(60,64,67,.12)}
.brand-mark span:nth-child(1){background:var(--google-blue)}.brand-mark span:nth-child(2){background:var(--google-red)}.brand-mark span:nth-child(3){background:var(--google-yellow)}.brand-mark span:nth-child(4){background:var(--google-green)}
.brand-name{color:transparent;background:linear-gradient(90deg,var(--google-blue) 0 30%,var(--google-red) 30% 52%,var(--google-yellow) 52% 72%,var(--google-green) 72%);background-clip:text;-webkit-background-clip:text}
.pro-card{background:linear-gradient(145deg,#4285f4,#1a73e8)}
.pro-visual{background:radial-gradient(circle at 50% 120%,#34a853 0 18%,transparent 19%),radial-gradient(circle at 50% 115%,#ea4335 0 43%,transparent 44%)}
.pro-visual::after{background:#fbbc04;box-shadow:inset -7px -5px rgba(234,67,53,.16)}.pro-visual span{color:#fff}
.btn-primary{color:#fff}.btn-light{color:#1a73e8}.nav-pulse,.has-dot::after{background:var(--google-red)}
.avatar{background:linear-gradient(145deg,#f28b82,#ea4335)}.avatar-a{background:linear-gradient(145deg,#81c995,#34a853)}.avatar-b{background:linear-gradient(145deg,#8ab4f8,#4285f4)}.avatar-c{background:linear-gradient(145deg,#fdd663,#f9ab00)}.avatar-d{background:linear-gradient(145deg,#8ab4f8,#34a853)}
.lesson-visual{background:linear-gradient(145deg,#d2e3fc,#8ab4f8)}.lesson-scene{background:linear-gradient(180deg,transparent 30%,rgba(26,115,232,.78)),radial-gradient(ellipse at 22% 12%,#fff 0 8%,transparent 9%),linear-gradient(115deg,transparent 0 40%,rgba(52,168,83,.2) 41% 43%,transparent 44%)}
.lesson-scene::before{background:#4285f4;box-shadow:-155px 48px 0 #34a853}.play-button{color:#1a73e8}
.day-card{background:linear-gradient(145deg,#4285f4,#1a73e8)}body.dark .day-card{color:#202124}.score-ring::before{background:#4285f4}
.metric-icon{background:var(--blue-soft);color:var(--google-blue)}.metric-icon.yellow{background:var(--yellow-soft);color:#b06000}.metric-icon.coral{background:var(--red-soft);color:var(--google-red)}.metric-icon.lavender{background:var(--green-soft);color:var(--google-green)}.metric-card em,.trend{color:var(--google-green)}
.progress-fill,.mini-progress i,.bar-col.active i{background:var(--google-blue)}.bar-col.active i{box-shadow:0 5px 12px color-mix(in srgb,var(--google-blue) 22%,transparent)}
.week-day.done i{background:var(--google-green);color:#fff}.filter-chip.active{background:var(--google-blue);border-color:var(--google-blue);color:#fff}.offline-badge{color:#1a73e8}
.studio-video{background:linear-gradient(150deg,#4285f4,#174ea6)}
.live-shadow-box{background:linear-gradient(135deg,#174ea6,#1967d2)}.live-caption-meta i{background:var(--google-red)}.live-shadow-box.ready .live-caption-meta i{background:var(--google-green)}.caption-word.current,.live-caption-meta b{color:var(--google-yellow)}.live-caption-progress i,.timeline i,.timeline i::after{background:var(--google-blue)}
.line-item.active{background:var(--blue-soft);box-shadow:inset 3px 0 var(--google-blue)}.record-btn,.recording .waveform i{background:var(--google-red)}.record-btn{box-shadow:0 0 0 1px var(--line),0 8px 20px color-mix(in srgb,var(--google-red) 25%,transparent)}
.feedback{background:var(--green-soft);color:color-mix(in srgb,var(--google-green) 72%,#202124)}.line-chart .stroke{stroke:var(--google-blue)}.rank-badge,.leader-row.me{background:var(--yellow-soft);color:#8a4b00}
.challenge-card{background:linear-gradient(145deg,#4285f4 0 58%,#34a853 140%)}.toggle.on{background:var(--google-blue)}.url-input:focus-within{border-color:var(--google-blue);box-shadow:0 0 0 3px var(--blue-soft)}.url-input svg{color:var(--google-red)}
.process-item i,.empty-icon{background:var(--blue-soft);color:var(--google-blue)}.process-error{background:var(--red-soft);color:var(--google-red)}.toast{background:#202124}.toast svg{color:var(--google-yellow)}
.live-shadow-box.waiting .live-caption-source{color:rgba(255,255,255,.66)}
body.dark .brand-mark{background:#fff}body.dark .btn-primary{color:#202124}body.dark .score-ring::before{background:var(--surface)}body.dark .feedback{color:var(--google-green)}

@media (max-width: 1050px){
  .sidebar{width:220px}.app-shell{grid-template-columns:220px 1fr}.main-content{grid-column:2}.view-root{padding-left:27px;padding-right:27px}.topbar{padding:0 27px}.continue-card{grid-template-columns:1fr}.lesson-visual{height:170px}.day-card{min-height:320px}.metrics{grid-template-columns:repeat(2,1fr)}.library-grid{grid-template-columns:repeat(2,1fr)}.practice-layout{grid-template-columns:1fr}.coach-panel{display:grid;grid-template-columns:1fr 1fr}.community-grid{grid-template-columns:1fr}.challenge-card{min-height:300px}.report-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){.pricing-grid{grid-template-columns:repeat(2,1fr)}.price-card ul{min-height:0}.control-row{align-items:flex-start}.shadow-options{flex-wrap:wrap;justify-content:flex-end}}
@media (max-width: 760px){
  .app-shell{display:block}.sidebar{transform:translateX(-105%);transition:.28s;width:250px;box-shadow:20px 0 50px rgba(0,0,0,.16)}.sidebar.open{transform:none}.main-content{width:100%}.topbar{height:65px;padding:0 17px}.mobile-menu{display:block}.crumb{margin-right:auto;margin-left:9px}.crumb span{display:none}.top-actions{gap:5px}.streak-pill{padding:0 8px}.streak-pill small{display:none}.top-actions>.avatar{display:none}.view-root{padding:22px 15px 95px}.welcome{align-items:flex-start}.welcome h1{font-size:23px}.welcome-actions .btn-outline{display:none}.home-grid,.lower-grid,.progress-hero,.settings-layout{grid-template-columns:1fr}.continue-card{padding:18px}.day-card{min-height:auto}.metrics{grid-template-columns:1fr 1fr;gap:9px}.metric-card{padding:13px}.weekly-card,.goal-card{padding:18px}.library-grid{grid-template-columns:1fr}.page-head{align-items:flex-start}.page-head-actions .input-shell{display:none}.coach-panel{grid-template-columns:1fr}.studio-video{height:255px}.studio-word h2{font-size:20px}.report-grid{grid-template-columns:1fr}.settings-menu{display:flex;overflow-x:auto;padding:6px}.settings-menu button{width:auto;white-space:nowrap}.settings-menu button span{display:none}.mobile-dock{position:fixed;z-index:50;left:10px;right:10px;bottom:9px;height:63px;border:1px solid var(--line);border-radius:19px;background:color-mix(in srgb,var(--surface) 92%,transparent);box-shadow:0 14px 35px rgba(0,0,0,.14);backdrop-filter:blur(15px);display:flex;align-items:center;justify-content:space-around;padding:0 5px}.mobile-dock button{border:0;background:none;color:var(--muted);display:grid;justify-items:center;gap:3px;font-size:7px}.mobile-dock button svg{width:18px}.mobile-dock button.active{color:var(--green)}.mobile-dock .dock-main{width:48px;height:48px;border-radius:16px;margin-top:-26px;background:var(--green);color:var(--surface);display:grid;place-items:center;box-shadow:0 8px 18px rgba(25,62,51,.25)}.mobile-dock .dock-main svg{width:20px}.modal{padding:22px}.form-grid{grid-template-columns:1fr}.page-head h1{font-size:23px}.welcome-actions .btn{padding:10px 12px;font-size:11px}.control-row{gap:14px;flex-direction:column}.shadow-options{width:100%;justify-content:flex-start}.shortcut-hint{text-align:left}.transcript-actions{align-items:flex-end;flex-direction:column}.pricing-grid{grid-template-columns:1fr}.pricing-modal{max-height:90vh;overflow:auto}.account-setting{grid-template-columns:42px 1fr}.account-setting-actions{grid-column:1/-1}.account-setting-actions .btn{flex:1}
}
@media (max-width:760px){.live-shadow-box{padding:14px 16px}.live-caption-source{font-size:16px;min-height:48px}.live-caption-translation{font-size:10px}.transcript-lines{max-height:430px}}
@media (max-width:390px){.metrics{grid-template-columns:1fr}.continue-card{padding:14px}.lesson-detail h2{font-size:18px}.streak-pill{display:none}}

@media (max-width:1050px){.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.feature-page-head{align-items:flex-start}.feature-status{grid-template-columns:1fr;padding:8px 15px}.feature-status>span{padding:10px 4px}.feature-status>span+span{border-left:0;border-top:1px solid var(--line)}.feature-grid{grid-template-columns:1fr}.feature-card{min-height:124px}.feature-page-head>.btn{width:100%}}
@media (max-width:760px){.page-head:has(.practice-mode-tabs){flex-direction:column}.page-head-actions:has(.practice-mode-tabs){width:100%;flex-wrap:wrap}.practice-mode-tabs{width:100%}.practice-mode-tabs button{flex:1 1 calc(50% - 4px);justify-content:center}.dictation-actions,.dub-sequence-actions{grid-template-columns:1fr}}
@media (max-width:1050px){.admin-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-secondary-grid{grid-template-columns:1fr}.admin-panel-head{align-items:flex-start;flex-direction:column}.admin-filters{width:100%}}
@media (max-width:760px){.admin-metrics{grid-template-columns:1fr 1fr}.admin-metrics article{padding:13px}.admin-metrics b{font-size:14px}.admin-filters{display:grid;grid-template-columns:1fr 1fr}.admin-filters .input-shell{grid-column:1/-1}.admin-filters .input-shell input{min-width:0;width:100%}.admin-filters .btn{grid-column:1/-1}.admin-panel{padding:14px}.admin-pagination{justify-content:space-between}.admin-pagination .btn{padding:8px}.admin-access-denied{padding:28px 18px}}
@media (max-width:390px){.admin-metrics{grid-template-columns:1fr}.admin-pagination span{display:none}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}