:root{ --bg:#061019; --bg2:#0a1624; --panel:#0d1d2d; --panel2:#12283e; --text:#eef6fb; --muted:#9fb3c4; --gold:#e5c47a; --gold2:#f6dda4; --blue:#69c5ff; --cyan:#6fe4d0; --green:#6de1a7; --amber:#ffc16e; --red:#ff7d88; --line:rgba(255,255,255,.085); --shadow:0 28px 80px rgba(0,0,0,.38); --radius:22px; --font-ui:"Segoe UI",Tahoma,Arial,sans-serif; --font-reading:"Segoe UI",Tahoma,Arial,sans-serif; } *{box-sizing:border-box} html{background:var(--bg)} body{margin:0;min-height:100vh;color:var(--text);font-family:var(--font-ui);font-synthesis:weight style;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;line-height:1.5;background: radial-gradient(circle at 82% 0%,rgba(43,120,181,.22),transparent 30%), radial-gradient(circle at 8% 12%,rgba(229,196,122,.08),transparent 22%), linear-gradient(180deg,var(--bg),#050a10 76%);} button,input,select,textarea{font:inherit;font-family:var(--font-ui);letter-spacing:normal} button{cursor:pointer} button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:2px} .app{min-height:100vh;display:grid;grid-template-columns:248px minmax(0,1fr)} .sidebar{position:sticky;top:0;height:100vh;padding:22px 16px;border-right:1px solid var(--line);background:rgba(5,14,23,.82);backdrop-filter:blur(18px);z-index:20} .brand{display:flex;align-items:center;gap:13px;padding:8px 10px 24px}.brand-mark{width:48px;height:48px;border-radius:14px;background:#0a1522 url("assets/app-icon.png") center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 12px 30px rgba(0,0,0,.42);position:relative;overflow:hidden}.brand-mark:before,.brand-mark:after{content:none}.brand h1{margin:0;font-size:17px;letter-spacing:.2px}.brand p{margin:4px 0 0;color:var(--muted);font-size:11px;line-height:1.35} .nav{display:grid;gap:7px}.nav button{width:100%;border:0;border-radius:14px;background:transparent;color:var(--muted);padding:12px 14px;text-align:left;display:flex;align-items:center;gap:11px;transition:.2s}.nav button:hover{background:rgba(255,255,255,.04);color:var(--text)}.nav button.active{color:var(--text);background:linear-gradient(90deg,rgba(105,197,255,.14),rgba(229,196,122,.08));box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}.nav .ico{width:23px;text-align:center;color:var(--gold2)} .side-progress{position:absolute;left:16px;right:16px;bottom:18px;padding:15px;border-radius:18px;background:linear-gradient(145deg,rgba(20,47,73,.9),rgba(8,21,34,.92));border:1px solid var(--line)}.side-progress small{color:var(--muted)}.side-progress strong{display:block;margin-top:6px}.mini-track{height:7px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;margin-top:11px}.mini-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--gold2));transition:.4s} .main{min-width:0}.topbar{position:sticky;top:0;z-index:15;height:72px;padding:0 30px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(5,14,23,.58);backdrop-filter:blur(16px)}.topbar h2{margin:0;font-size:17px}.top-actions{display:flex;align-items:center;gap:9px}.pill{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--muted);font-size:12px}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;background:var(--green);box-shadow:0 0 12px currentColor}.status-dot.yellow{background:var(--amber)}.status-dot.red{background:var(--red)} .content{max-width:1480px;margin:0 auto;padding:28px 30px 54px}.page{display:none}.page.active{display:block}.card{background:linear-gradient(145deg,rgba(15,32,50,.95),rgba(8,20,32,.96));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)} .hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);gap:20px;margin-bottom:20px}.hero-main{position:relative;overflow:hidden;padding:29px;min-height:250px}.hero-main:after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-150px;top:-230px;background:radial-gradient(circle,rgba(105,197,255,.22),transparent 68%)}.eyebrow{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--gold2)}.hero h3{margin:13px 0 10px;max-width:760px;font-size:37px;line-height:1.1}.hero p{margin:0;max-width:760px;color:var(--muted);line-height:1.65}.hero-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:23px}.hero-side{padding:22px}.hero-side h4{margin:0 0 13px}.readiness{display:grid;grid-template-columns:104px 1fr;gap:18px;align-items:center}.readiness-ring{width:104px;height:104px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green) 0 82%,rgba(255,255,255,.08) 82%);position:relative}.readiness-ring:before{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--panel)}.readiness-ring strong{position:relative;font-size:25px}.readiness-copy small{color:var(--muted)}.readiness-copy b{display:block;margin:5px 0 6px;font-size:17px}.readiness-copy p{margin:0;color:var(--muted);font-size:12px;line-height:1.45} .btn{border:0;border-radius:14px;padding:11px 17px;font-weight:700;color:#071019;background:linear-gradient(135deg,var(--gold2),#c99b4b);box-shadow:0 10px 27px rgba(229,196,122,.19)}.btn.secondary{color:var(--text);background:rgba(255,255,255,.06);border:1px solid var(--line);box-shadow:none}.btn.blue{background:linear-gradient(135deg,var(--blue),#3987c0)}.btn.ghost{color:var(--muted);background:transparent;border:1px solid var(--line);box-shadow:none}.btn.danger{background:linear-gradient(135deg,#ff9aa4,var(--red))}.btn:disabled{opacity:.42;cursor:not-allowed} .metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}.metric{padding:18px}.metric small{color:var(--muted)}.metric strong{display:block;margin:7px 0;font-size:24px}.metric span{font-size:11px;color:var(--cyan)} .grid-2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:20px}.panel{padding:21px}.section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}.section-title h3{margin:0;font-size:20px}.section-title p{margin:4px 0 0;color:var(--muted);font-size:12px}.tag{font-size:11px;padding:7px 10px;border-radius:999px;background:rgba(229,196,122,.10);color:var(--gold2);border:1px solid rgba(229,196,122,.19);white-space:nowrap} .group-list{display:grid;gap:11px}.group-row{display:grid;grid-template-columns:46px 1fr auto;gap:13px;align-items:center;padding:13px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.055);transition:.2s}.group-row:hover{transform:translateY(-1px);background:rgba(255,255,255,.048)}.group-row .num{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:rgba(105,197,255,.11);color:var(--blue);font-weight:800}.group-row h4{margin:0 0 4px;font-size:14px}.group-row p{margin:0;color:var(--muted);font-size:12px;line-height:1.45}.group-row.done .num{background:rgba(109,225,167,.12);color:var(--green)} .insight{padding:15px;border-left:3px solid var(--gold2);background:rgba(229,196,122,.06);border-radius:12px;margin-bottom:11px}.insight strong{display:block;margin-bottom:5px}.insight p{margin:0;color:var(--muted);font-size:12px;line-height:1.5} /* Practice */ .practice-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:20px}.practice-stage{padding:21px;min-height:720px}.practice-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.practice-head h3{margin:5px 0 5px;font-size:27px}.practice-head p{margin:0;color:var(--muted);line-height:1.5}.step-label{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold2)} .group-rail{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:18px 0 16px}.rail-node{position:relative;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.035);padding:10px 8px;color:var(--muted);font-size:11px;text-align:center}.rail-node strong{display:block;font-size:15px;margin-bottom:3px;color:var(--text)}.rail-node.active{background:linear-gradient(145deg,rgba(105,197,255,.13),rgba(229,196,122,.08));border-color:rgba(105,197,255,.34)}.rail-node.done{border-color:rgba(109,225,167,.28);color:var(--green)} .sample-card{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:15px 16px;border-radius:17px;background:linear-gradient(135deg,rgba(105,197,255,.07),rgba(229,196,122,.05));border:1px solid var(--line);margin-bottom:14px}.sample-card h4{margin:0 0 5px}.sample-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}.sample-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.sample-btn{width:44px;height:44px;border-radius:13px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--text);font-size:18px}.sample-btn:hover{background:rgba(255,255,255,.1)}.sample-btn.playing{background:rgba(105,197,255,.16);color:var(--blue)} .target-line{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:13px 0}.note-chip{min-width:44px;height:42px;padding:0 10px;border-radius:12px;display:grid;place-items:center;background:rgba(105,197,255,.1);border:1px solid rgba(105,197,255,.18);font-weight:800}.note-chip.top{background:rgba(229,196,122,.12);border-color:rgba(229,196,122,.25);color:var(--gold2)}.note-arrow{color:var(--muted)} .lane{height:285px;border-radius:20px;overflow:hidden;position:relative;border:1px solid var(--line);background:linear-gradient(180deg,rgba(4,13,22,.94),rgba(7,19,31,.82))}.lane canvas{display:block;width:100%;height:100%}.lane-overlay{position:absolute;left:14px;top:12px;display:flex;gap:7px;flex-wrap:wrap}.tiny{padding:6px 9px;border-radius:999px;background:rgba(4,12,20,.72);border:1px solid var(--line);font-size:11px;color:var(--muted)} .control-strip{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin:18px 0}.control-unit{display:grid;justify-items:center;gap:6px;min-width:84px}.control-unit small{color:var(--muted);font-size:11px}.round-btn{width:70px;height:70px;border-radius:50%;border:1px solid rgba(255,255,255,.13);background:linear-gradient(145deg,#18334f,#0a1828);color:var(--text);font-size:23px;box-shadow:0 13px 30px rgba(0,0,0,.32)}.round-btn.record{background:linear-gradient(145deg,#8c2b36,#4a1219)}.round-btn.active{box-shadow:0 0 0 9px rgba(105,197,255,.08),0 13px 30px rgba(0,0,0,.32)}.round-btn.record.active{box-shadow:0 0 0 10px rgba(255,125,136,.10),0 13px 30px rgba(0,0,0,.32)} .prompt{padding:15px;border-radius:15px;background:rgba(255,255,255,.04);border:1px solid var(--line)}.prompt strong{display:block;margin-bottom:6px}.prompt p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}.round-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.meta-pill{padding:7px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--muted);font-size:11px}.meta-pill b{color:var(--text)} .practice-side{display:grid;gap:15px;align-content:start}.side-card{padding:18px}.side-card h4{margin:0 0 12px}.score-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.score{padding:12px;border-radius:13px;background:rgba(255,255,255,.035);border:1px solid var(--line)}.score small{display:block;color:var(--muted);font-size:10px}.score strong{display:block;margin-top:5px;font-size:18px}.tone-meter{height:9px;border-radius:999px;background:linear-gradient(90deg,#4a6182,#d9c79a,#f0bf64);position:relative;margin:16px 0 8px}.tone-knob{position:absolute;top:50%;left:50%;width:17px;height:17px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(255,255,255,.12);transition:.3s}.tone-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:10px}.source-box{font-size:12px;line-height:1.55;color:var(--muted)}.source-box b{color:var(--text)} .reflection,.feedback,.rest-overlay,.readiness-modal{display:none}.reflection.active,.feedback.active,.rest-overlay.active,.readiness-modal.active{display:block}.reflection{margin-top:16px;padding:18px;border-radius:18px;background:rgba(9,24,39,.98);border:1px solid rgba(105,197,255,.2)}.reflection h4{margin:0 0 13px}.range-row{display:grid;grid-template-columns:140px 1fr 30px;gap:10px;align-items:center;margin-bottom:10px}.range-row label{color:var(--muted);font-size:12px}.range-row input{width:100%}.choice-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.choice{border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04);color:var(--muted);padding:9px 8px;font-size:11px}.choice.selected{color:var(--text);border-color:rgba(105,197,255,.42);background:rgba(105,197,255,.11)} .feedback{margin-top:16px}.feedback-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.feedback-card{padding:14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.035)}.feedback-card small{display:block;color:var(--muted);font-size:10px;margin-bottom:6px}.feedback-card strong{font-size:12px;line-height:1.5}.feedback-card.observation{border-color:rgba(105,197,255,.2)}.feedback-card.alignment{border-color:rgba(229,196,122,.2)}.feedback-card.next{border-color:rgba(109,225,167,.2)} .rest-overlay{margin-top:15px;padding:16px;border-radius:17px;text-align:center;background:rgba(7,18,29,.96);border:1px solid var(--line)}.rest-overlay strong{display:block;font-size:31px;color:var(--gold2)}.rest-overlay p{margin:6px 0 0;color:var(--muted);font-size:12px} /* Roadmap */ .roadmap-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.day-card{padding:14px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid var(--line);min-height:145px}.day-card strong{font-size:17px}.day-card small{display:block;color:var(--gold2);margin:5px 0 7px}.day-card p{margin:0;color:var(--muted);font-size:11px;line-height:1.45}.day-card.done{border-color:rgba(109,225,167,.28);background:rgba(109,225,167,.055)}.day-card.current{border-color:rgba(105,197,255,.4);box-shadow:inset 0 0 0 1px rgba(105,197,255,.1)} /* Logs */ .filters{display:flex;gap:10px;margin:12px 0 15px}.field{border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.045);color:var(--text);padding:10px 12px}.field option{background:var(--panel)}.log-list{display:grid;gap:10px}.log-card{padding:15px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid var(--line)}.log-head{display:flex;justify-content:space-between;gap:14px}.log-card h4{margin:0 0 4px}.log-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}.log-metrics{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.flag{color:var(--red)} /* Settings/About */ .settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.setting-card{padding:20px}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}.setting-row:last-child{border-bottom:0}.setting-row span{color:var(--muted);font-size:12px}.setting-row b{font-size:12px}.about-copy{line-height:1.7;color:var(--muted)}.about-copy h3,.about-copy h4{color:var(--text)}.about-copy code{color:var(--gold2)} .notice{padding:13px 15px;border-radius:14px;background:rgba(255,193,110,.07);border:1px solid rgba(255,193,110,.19);color:#ffdcae;font-size:12px;line-height:1.55}.notice.error{background:rgba(255,125,136,.07);border-color:rgba(255,125,136,.2);color:#ffc1c6}.notice.success{background:rgba(109,225,167,.07);border-color:rgba(109,225,167,.2);color:#baf4d5} .modal-backdrop{position:fixed;inset:0;z-index:50;background:rgba(2,7,12,.75);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;padding:20px}.modal-backdrop.active{display:flex}.modal{width:min(620px,100%);padding:23px}.modal h3{margin:0 0 8px}.modal p{color:var(--muted);line-height:1.55}.symptom-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:14px 0}.symptom{border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.04);color:var(--muted);padding:11px}.symptom.selected{border-color:rgba(255,193,110,.38);background:rgba(255,193,110,.09);color:var(--text)} .toast{position:fixed;right:22px;bottom:22px;z-index:80;max-width:420px;padding:13px 16px;border-radius:14px;background:#14283d;border:1px solid var(--line);box-shadow:var(--shadow);transform:translateY(25px);opacity:0;pointer-events:none;transition:.25s;color:var(--text);font-size:12px}.toast.show{transform:translateY(0);opacity:1} .hidden{display:none!important} @media(max-width:1100px){.app{grid-template-columns:82px minmax(0,1fr)}.sidebar{padding:18px 10px}.brand{justify-content:center;padding:5px 0 22px}.brand h1,.brand p,.nav button span:not(.ico),.side-progress{display:none}.nav button{justify-content:center;padding:13px}.content{padding:24px 20px 48px}.practice-layout{grid-template-columns:1fr}.practice-side{grid-template-columns:repeat(3,1fr)}.roadmap-grid{grid-template-columns:repeat(4,1fr)}} @media(max-width:760px){.app{display:block}.sidebar{position:fixed;left:0;right:0;top:auto;bottom:0;width:100%;height:68px;padding:8px 10px;border-right:0;border-top:1px solid var(--line);z-index:30}.brand,.side-progress{display:none}.nav{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}.nav button{padding:8px 4px;display:grid;justify-items:center;gap:2px;font-size:9px}.nav button span:not(.ico){display:block}.nav .ico{font-size:16px}.topbar{padding:0 16px;height:62px}.top-actions .pill:first-child{display:none}.content{padding:18px 13px 88px}.hero{grid-template-columns:1fr}.hero h3{font-size:29px}.metrics{grid-template-columns:1fr 1fr}.grid-2,.settings-grid{grid-template-columns:1fr}.practice-stage{padding:15px}.practice-head h3{font-size:23px}.group-rail{gap:5px}.rail-node{padding:8px 3px}.rail-node span{display:none}.sample-card{grid-template-columns:1fr}.sample-actions{justify-content:flex-start}.lane{height:240px}.practice-side{grid-template-columns:1fr}.choice-grid{grid-template-columns:1fr 1fr}.feedback-grid{grid-template-columns:1fr}.roadmap-grid{grid-template-columns:repeat(2,1fr)}.range-row{grid-template-columns:108px 1fr 26px}.topbar h2{font-size:14px}} .live-dashboard{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0}.live-card{background:linear-gradient(180deg,rgba(16,38,57,.96),rgba(7,23,36,.96));border:1px solid rgba(112,190,238,.18);border-radius:16px;padding:12px 14px;min-height:96px;display:flex;flex-direction:column;justify-content:center}.live-card small{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.live-card strong{font-size:24px;margin:5px 0;color:#f8e6b3}.live-card span{font-size:11px;color:var(--muted)}.pitch-gauge,.volume-track{position:relative;height:8px;border-radius:999px;background:rgba(255,255,255,.08);margin-top:8px;overflow:visible}.pitch-center{position:absolute;left:50%;top:-4px;width:2px;height:16px;background:rgba(255,255,255,.35)}.pitch-needle{position:absolute;left:50%;top:-5px;width:4px;height:18px;border-radius:999px;background:#f6dda4;transform:translateX(-50%);transition:left .08s linear}.volume-fill{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#4fd1c5,#f6dda4);transition:width .08s linear}.target-volume-marker{position:absolute;left:50%;top:-5px;width:3px;height:18px;background:#69c5ff;transform:translateX(-50%);transition:left .08s linear}.analysis-loading,.analysis-error{padding:10px 14px;border-radius:12px;background:rgba(105,197,255,.08);color:var(--muted)}.analysis-error{background:rgba(245,94,94,.1);color:#ffc5c5}.round-btn:disabled{opacity:.45;cursor:not-allowed}@media(max-width:900px){.live-dashboard{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.live-dashboard{grid-template-columns:1fr}.live-card{min-height:80px}} .target-controls{display:grid;grid-template-columns:minmax(180px,1fr) minmax(160px,.8fr) 1.4fr;gap:12px;align-items:end;margin:14px 0;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(7,19,31,.72)} .target-controls label{display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:12px} .target-controls p{margin:0;min-height:42px;display:flex;align-items:center;color:#d6e4ef;font-size:12px;line-height:1.45} .note-score-list{display:flex;flex-direction:column;gap:7px;max-height:310px;overflow:auto;padding-right:3px} .note-result{display:grid;grid-template-columns:minmax(82px,1.15fr) .8fr .62fr .82fr;gap:8px;align-items:center;padding:9px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);font-size:11px} .note-result.pass{border-color:rgba(87,210,159,.35);background:rgba(87,210,159,.07)} .note-result.review{border-color:rgba(246,188,82,.35);background:rgba(246,188,82,.06)} .note-result.missing{border-color:rgba(235,101,109,.35);background:rgba(235,101,109,.06)} .note-result-name{display:flex;flex-direction:column;gap:2px}.note-result-name b{font-size:14px}.note-result-name small{color:var(--muted);font-size:9px} .note-result-empty{padding:13px;border:1px dashed rgba(255,255,255,.12);border-radius:12px;color:var(--muted);font-size:12px} @media (max-width:900px){.target-controls{grid-template-columns:1fr 1fr}.target-controls p{grid-column:1/-1}.note-result{grid-template-columns:1.1fr .8fr .65fr .85fr}} @media (max-width:560px){.target-controls{grid-template-columns:1fr}.target-controls p{grid-column:auto}.note-result{grid-template-columns:1fr 1fr}.note-result-name{grid-column:1/-1}} .phrase-status{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:12px 0 2px}.phrase-status>div{padding:11px 13px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.028)}.phrase-status small{display:block;color:var(--muted);font-size:10px;margin-bottom:4px}.phrase-status strong{font-size:13px} .autonomy-panel{margin:16px 0;padding:15px;border-radius:17px;background:linear-gradient(135deg,rgba(105,197,255,.075),rgba(229,196,122,.04));border:1px solid rgba(105,197,255,.18)}.autonomy-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.autonomy-head strong{display:block;font-size:13px}.autonomy-head small{display:block;color:var(--muted);font-size:11px;margin-top:4px;line-height:1.45}.autonomy-actions,.rest-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.autonomy-note{margin-top:10px;color:var(--muted);font-size:11px}.danger-soft{border-color:rgba(255,125,136,.28)!important;color:#ffb0b7!important;background:rgba(255,125,136,.07)!important}.feedback-auto{margin-top:11px;padding:9px 11px;border-radius:11px;background:rgba(109,225,167,.07);border:1px solid rgba(109,225,167,.17);color:var(--muted);font-size:11px}.rest-overlay small{display:block;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:9px}.rest-next-preview{margin:10px auto 0;max-width:720px;padding:9px 11px;border-radius:11px;background:rgba(255,255,255,.035);color:var(--text);font-size:11px}.rest-actions{justify-content:center}.rest-overlay.paused{border-color:rgba(229,196,122,.45)}.rest-overlay.paused #restTimer{color:var(--amber)} .note-chip small{display:block;font-size:8px;opacity:.72;margin-top:2px}.note-chip{min-width:43px;text-align:center} @media(max-width:760px){.phrase-status{grid-template-columns:1fr}.autonomy-head{display:block}.autonomy-head .tag{display:inline-flex;margin-top:9px}.autonomy-actions .btn,.rest-actions .btn{flex:1 1 42%;padding:9px 8px;font-size:10px}} .score.span-2{grid-column:1/-1}.choice.multi.selected{box-shadow:0 0 0 1px rgba(246,221,164,.55) inset}.setting-row #calibrationStatus{max-width:55%;text-align:right;line-height:1.45}.note-result span:nth-child(3),.note-result span:nth-child(4){font-size:10px}.risk-high{color:var(--red)} .note-result.near{border-color:rgba(255,196,92,.38);background:rgba(255,196,92,.07)} .note-result.miss{border-color:rgba(255,112,112,.38);background:rgba(255,112,112,.07)} .note-result.uncertain{border-color:rgba(150,180,205,.32);background:rgba(150,180,205,.06)} .note-result.disputed{outline:2px solid rgba(255,204,102,.6);outline-offset:2px} .note-dispute-btn{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.045);color:var(--muted);border-radius:8px;padding:6px 8px;font-size:11px;cursor:pointer} .note-dispute-btn:hover{color:var(--text);border-color:rgba(255,255,255,.3)} .feedback.disputed{outline:2px solid rgba(255,196,92,.5);outline-offset:3px} .selection-notice{margin-top:14px;padding:11px 13px;border:1px solid rgba(105,197,255,.22);border-radius:14px;background:rgba(105,197,255,.07);color:var(--muted);font-size:13px;line-height:1.55} .group-row,.day-card,.rail-node{transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease} .group-row.selectable,.day-card.selectable,.rail-node.selectable{cursor:pointer} .group-row.selectable:hover,.day-card.selectable:hover,.rail-node.selectable:hover{transform:translateY(-2px);border-color:rgba(105,197,255,.55);box-shadow:0 12px 28px rgba(0,0,0,.18)} .group-row .group-main{min-width:0;flex:1} .round-picker{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px} .round-chip{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045);color:#dceeff;border-radius:999px;padding:6px 10px;font-size:11px;cursor:pointer} .round-chip:hover{border-color:rgba(105,197,255,.58);background:rgba(105,197,255,.1)} .day-card .open-day{display:inline-flex;margin-top:10px;font-size:11px;color:#9fd8ff} .day-card.advisory{border-color:rgba(246,190,91,.35)} .day-card.current{outline:2px solid rgba(105,197,255,.42);outline-offset:1px} .rail-node.selectable{user-select:none} .advisory-modal{max-width:620px} .advisory-badge{display:inline-flex;padding:6px 10px;border-radius:999px;background:rgba(246,190,91,.13);border:1px solid rgba(246,190,91,.35);color:#ffe2a0;font-size:12px;font-weight:700;margin-bottom:10px} .advisory-modal.high .advisory-badge{background:rgba(255,99,99,.12);border-color:rgba(255,99,99,.38);color:#ffc1c1} .advisory-reasons{display:grid;gap:8px;margin:14px 0} .advisory-reason{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);color:#dbeaff;font-size:13px;line-height:1.5} .advisory-target{padding:11px 12px;border-radius:12px;background:rgba(105,197,255,.07);border:1px solid rgba(105,197,255,.18);color:#cfeaff;font-size:13px;margin-bottom:12px} @media(max-width:760px){.round-picker{margin-left:0}.round-chip{padding:7px 9px}.advisory-modal{width:min(94vw,620px)}} /* User-facing technical criteria */ .technical-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:10px} .technical-card{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.075);border-radius:12px;padding:10px;min-height:76px;display:flex;flex-direction:column;gap:4px} .technical-card.overall{grid-column:1/-1;background:linear-gradient(135deg,rgba(246,221,164,.12),rgba(105,197,255,.08))} .technical-card small{color:var(--muted);font-size:10px;line-height:1.25} .technical-card strong{font-size:20px;line-height:1.05;color:#f4f8fb} .technical-card span{font-size:10px;color:rgba(232,245,255,.66)} .technical-card[data-state="high"]{border-color:rgba(121,219,174,.34)} .technical-card[data-state="medium"]{border-color:rgba(246,221,164,.34)} .technical-card[data-state="learning"] strong{font-size:12px;color:var(--muted)} @media(max-width:760px){.technical-grid{grid-template-columns:1fr}} .audio-unlock{border:1px solid rgba(246,221,164,.55);background:rgba(246,221,164,.12);color:#fff2bd;border-radius:999px;padding:8px 13px;font-weight:800;cursor:pointer;white-space:nowrap} .audio-unlock:hover{background:rgba(246,221,164,.2)} .audio-unlock.ready{border-color:rgba(89,211,154,.5);background:rgba(89,211,154,.12);color:#b9f5d5} .round-chip[data-optional="true"]{border-style:dashed;opacity:.88}.audit-pass{color:#9be2bf}.audit-fail{color:#ffb1b1} /* Dynamic pedagogy */ .dynamic-lane-card{margin-top:14px;padding:14px;border:1px solid rgba(105,197,255,.18);border-radius:18px;background:rgba(4,14,24,.62)} .dynamic-lane-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}.dynamic-lane-head div{display:grid;gap:3px}.dynamic-lane-head small{color:var(--muted)} #dynamicCanvas{display:block;width:100%;height:auto;border-radius:13px;background:#07131f} .prompt-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.btn.compact{padding:7px 10px;font-size:12px} .lesson-brief-modal{max-width:780px;max-height:88vh;overflow:auto}.lesson-brief-kicker{font-size:11px;letter-spacing:.14em;color:#69c5ff;font-weight:800}.lesson-brief-meta{color:var(--muted);font-size:13px;margin:.3rem 0 1rem}.lesson-brief-body{white-space:pre-line;line-height:1.72;font-size:15px;color:#e8f5ff}.lesson-brief-note{margin-top:16px;padding:12px 14px;border-left:3px solid #f6dda4;background:rgba(246,221,164,.06);color:var(--muted);font-size:13px}.dynamic-score-grid .score strong{font-size:14px;line-height:1.25}.dynamic-assessment-card .source-box{margin-bottom:12px} @media(max-width:720px){.prompt-title-row,.dynamic-lane-head{align-items:flex-start;flex-direction:column}.lesson-brief-modal{max-height:92vh}} .dynamic-live-tags{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.dynamic-phase-rail{display:grid;grid-template-columns:1fr auto 1.35fr auto 1.1fr auto 1.35fr auto 1fr;gap:7px;align-items:center;margin:2px 0 10px}.dynamic-phase-rail span{padding:8px 9px;border-radius:10px;background:rgba(105,197,255,.08);border:1px solid rgba(105,197,255,.13);text-align:center;font-size:11px;font-weight:700}.dynamic-phase-rail b{color:#f6dda4;text-align:center}@media(max-width:760px){.dynamic-phase-rail{grid-template-columns:1fr}.dynamic-phase-rail b{transform:rotate(90deg);line-height:.7}.dynamic-live-tags{justify-content:flex-start}} /* V5: adaptive motor-learning feedback and neural status */ .audit-warn{color:#f6dda4} .live-dashboard[data-feedback-dose="minimal"] #liveCentsBig, .live-dashboard[data-feedback-dose="minimal"] #liveDbBig, .live-dashboard[data-feedback-dose="minimal"] #liveDynamicBig{font-size:15px} .live-dashboard[data-feedback-dose="minimal"] .pitch-gauge, .live-dashboard[data-feedback-dose="minimal"] .volume-track{opacity:.7} #neuralEngineStatus.audit-pass{color:#8de7b6} #neuralEngineStatus.audit-warn{color:#f6dda4} /* Session report V5.1 */ .session-report{display:grid;gap:16px}.report-hero{padding:22px;display:flex;justify-content:space-between;gap:22px;align-items:center}.report-hero h3{font-size:27px;margin:5px 0 8px}.report-hero p{color:var(--muted);max-width:820px;line-height:1.55}.report-confidence{min-width:190px;text-align:center;padding:17px;border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.035)}.report-confidence small,.report-confidence span{display:block;color:var(--muted)}.report-confidence strong{display:block;font-size:31px;color:#fff2bd;margin:5px}.report-grid{display:grid;gap:12px}.report-grid-4{grid-template-columns:repeat(4,1fr)}.report-stat{padding:17px;border:1px solid var(--line);border-radius:16px;background:var(--card)}.report-stat small,.report-stat span{display:block;color:var(--muted)}.report-stat strong{display:block;font-size:25px;margin:5px 0}.report-section{padding:21px}.report-section-head{display:flex;justify-content:space-between;gap:15px;align-items:flex-start;margin-bottom:14px}.report-section-head h4{font-size:19px;margin:0 0 4px}.report-section-head p{margin:0;color:var(--muted)}.report-status{padding:7px 11px;border-radius:999px;background:rgba(115,222,169,.12);color:#9af0c0;border:1px solid rgba(115,222,169,.25);white-space:nowrap}.report-status.caution{background:rgba(255,193,110,.10);color:#ffd198;border-color:rgba(255,193,110,.28)}.report-status.high{background:rgba(255,111,122,.10);color:#ffadb4;border-color:rgba(255,111,122,.28)}.report-status.neutral{background:rgba(105,197,255,.10);color:#aaddff;border-color:rgba(105,197,255,.25)}.report-copy{color:var(--muted);line-height:1.65}.report-copy p{margin:7px 0}.report-copy strong{color:var(--text)}.report-metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.report-metric{padding:14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025)}.report-metric small,.report-metric span{display:block;color:var(--muted)}.report-metric strong{display:block;font-size:22px;margin:5px 0}.report-metric .meter{height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:9px}.report-metric .meter i{display:block;height:100%;background:linear-gradient(90deg,#69c5ff,#9af0c0);border-radius:999px}.report-recommendation{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:12px}.report-rec-card{padding:16px;border-radius:15px;border:1px solid var(--line);background:rgba(255,255,255,.028)}.report-rec-card small{color:var(--muted)}.report-rec-card strong{display:block;margin:6px 0}.post-session-modal{width:min(760px,100%)}.post-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}.post-grid label,.post-select,.post-note{display:grid;gap:8px;color:var(--muted)}.post-grid input{width:100%}.post-select,.post-note{margin:12px 0}.post-note textarea{resize:vertical}.modal-actions{display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap;margin-top:16px}@media(max-width:900px){.report-grid-4,.report-metric-grid{grid-template-columns:repeat(2,1fr)}.report-recommendation{grid-template-columns:1fr}.report-hero{align-items:flex-start;flex-direction:column}.report-confidence{width:100%}.post-grid{grid-template-columns:1fr}}@media(max-width:560px){.report-grid-4,.report-metric-grid{grid-template-columns:1fr}}@media print{.sidebar,.topbar,.section-title button,.toast,.modal-backdrop{display:none!important}.main{margin:0!important}.content{padding:0!important}.page{display:none!important}#report.page{display:block!important}.card{box-shadow:none!important;break-inside:avoid}.session-report{color:#111}.report-copy,.report-section-head p,.report-stat small,.report-stat span,.report-metric small,.report-metric span{color:#444!important}} .voice-branch-modal{max-width:820px}.voice-branch-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0}.voice-branch-card{appearance:none;text-align:left;border:1px solid rgba(131,196,235,.25);background:rgba(11,31,47,.8);color:var(--text,#edf7ff);border-radius:18px;padding:20px;cursor:pointer;display:flex;flex-direction:column;gap:9px;transition:.18s transform,.18s border-color,.18s background}.voice-branch-card:hover,.voice-branch-card.selected{transform:translateY(-2px);border-color:#68c7f0;background:rgba(31,78,104,.52)}.voice-branch-card strong{font-size:1.15rem}.voice-branch-card span{line-height:1.55;color:#cfe8f8}.voice-branch-card small{color:#8fc7e6;line-height:1.45}.branch-setting select{min-width:210px}@media(max-width:720px){.voice-branch-grid{grid-template-columns:1fr}.top-actions{flex-wrap:wrap}} /* V5.3 accessible organization */ .nav-group-label{padding:16px 12px 6px;color:#7f9bb0;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase} .simple-mode-toggle{border:1px solid rgba(154,240,192,.28);background:rgba(115,222,169,.10);color:#c8ffe0;border-radius:12px;padding:10px 13px;font-weight:800;cursor:pointer} .easy-start-card{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr;gap:12px;align-items:center;margin-bottom:20px;padding:18px}.easy-start-number{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(105,197,255,.13);border:1px solid rgba(105,197,255,.3);font-weight:800;font-size:18px}.easy-start-card strong,.easy-start-card span{display:block}.easy-start-card span{margin-top:4px;color:var(--muted);font-size:12px;line-height:1.45} .advanced-toggle{width:100%;margin-bottom:12px}.advanced-only{display:block} body.simple-mode .advanced-only{display:none}body.simple-mode.show-advanced .advanced-only{display:block} body.simple-mode .live-dashboard{grid-template-columns:repeat(3,1fr)}body.simple-mode .live-dashboard .live-card:nth-child(4){display:none} body.simple-mode .lane-overlay .tiny:nth-child(4),body.simple-mode .round-meta{display:none} body.simple-mode .source-box{font-size:13px;line-height:1.6} body.font-large{font-size:18px}body.font-xlarge{font-size:20px} body.font-large .btn,body.font-large button,body.font-xlarge .btn,body.font-xlarge button{min-height:48px;font-size:15px} body.font-xlarge .nav button{font-size:16px;padding:14px 12px}body.font-xlarge .topbar h2{font-size:21px} .author-hero{position:relative;overflow:hidden;padding:0;min-height:430px}.author-hero>img{width:100%;height:500px;object-fit:cover;object-position:center 42%;display:block}.author-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,8,15,.92) 0%,rgba(2,8,15,.38) 55%,rgba(2,8,15,.08) 100%)}.author-hero-overlay{position:absolute;z-index:2;left:42px;bottom:38px;max-width:610px}.author-hero-overlay h3{font-size:44px;margin:8px 0}.author-hero-overlay p{font-size:18px;line-height:1.5;color:#d8ecfa} .author-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);gap:18px;margin-top:18px}.author-bio{padding:28px}.author-bio h3,.author-philosophy h3{font-size:26px;margin-top:0}.author-bio p,.author-philosophy p{font-size:16px;line-height:1.8;color:#d5e7f3}.author-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.author-side{display:grid;gap:18px}.author-portrait{padding:0;overflow:hidden}.author-portrait img{width:100%;height:420px;object-fit:cover;object-position:center 22%;display:block}.author-facts{padding:22px}.fact-row{display:grid;gap:5px;padding:13px 0;border-bottom:1px solid var(--line)}.fact-row:last-child{border-bottom:0}.fact-row span{color:var(--muted);font-size:12px}.author-philosophy{padding:26px;margin-top:18px;border-left:4px solid #e5c47a} @media(max-width:1100px){.easy-start-card{grid-template-columns:auto 1fr}.author-layout{grid-template-columns:1fr}.author-side{grid-template-columns:1fr 1fr}.author-portrait img{height:360px}} @media(max-width:760px){.easy-start-card{grid-template-columns:auto 1fr}.author-hero{min-height:360px}.author-hero>img{height:430px}.author-hero-overlay{left:22px;right:22px;bottom:24px}.author-hero-overlay h3{font-size:32px}.author-layout,.author-side{grid-template-columns:1fr}.author-bio{padding:20px}.top-actions .simple-mode-toggle{order:-1;width:100%}} /* V5.4 calm, low-tech accessible organization */ :root{--content-max:1500px} body{letter-spacing:.01em} .main{background:radial-gradient(circle at 80% -10%,rgba(42,126,180,.10),transparent 28%),var(--bg)} .content{max-width:var(--content-max);margin:0 auto;padding:28px 32px 70px} .topbar{min-height:78px;padding:16px 30px;align-items:center;border-bottom:1px solid rgba(142,194,224,.12)} .topbar h2{font-size:25px;margin:0}.topbar-subtitle{margin:4px 0 0;color:var(--muted);font-size:13px}.top-actions{margin-left:auto} .sidebar{width:252px;padding:22px 16px}.brand{padding:10px 10px 22px}.brand h1{font-size:23px}.brand p{line-height:1.45} .nav button{min-height:52px;border-radius:14px;margin:3px 0;font-size:15px}.nav button.active{box-shadow:inset 3px 0 0 #6fc8ff,0 8px 24px rgba(0,0,0,.12)} .nav-group-label{padding:20px 13px 7px;font-size:11px;letter-spacing:.12em} .card{border-radius:20px;box-shadow:0 12px 34px rgba(0,0,0,.15);border-color:rgba(135,194,228,.14)} .hero{gap:20px}.hero-main{padding:34px}.hero-main h3{font-size:clamp(28px,3vw,43px);line-height:1.13;max-width:920px}.hero-main p{font-size:16px;line-height:1.7;max-width:900px} .easy-start-card{padding:22px 26px;gap:16px 18px;border:1px solid rgba(116,211,164,.22);background:linear-gradient(135deg,rgba(43,124,101,.13),rgba(7,24,36,.82))} .easy-start-number{width:38px;height:38px;font-size:18px}.easy-start-card strong{font-size:16px}.easy-start-card span{font-size:13px;line-height:1.55} .primary-action-card{margin:20px 0;padding:26px 28px;display:flex;align-items:center;justify-content:space-between;gap:28px;background:linear-gradient(120deg,rgba(29,102,151,.24),rgba(10,29,44,.94));border:1px solid rgba(105,191,242,.24)} .primary-action-copy{max-width:800px}.primary-action-copy h3{margin:7px 0 8px;font-size:25px}.primary-action-copy p{margin:0;color:var(--muted);line-height:1.6}.primary-action-buttons{display:flex;gap:10px;flex-wrap:wrap;min-width:330px;justify-content:flex-end}.btn-large{min-height:52px;padding:0 20px;font-size:15px} .metrics{gap:16px}.metric{padding:21px}.metric strong{font-size:25px}.panel{padding:25px} .group-list{display:grid;gap:12px}.group-item{border-radius:16px!important;padding:17px!important} .practice-layout{grid-template-columns:minmax(0,1fr) 320px;gap:20px}.practice-stage{padding:26px}.practice-side{gap:16px}.side-card{padding:20px} .practice-now-card{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 18px}.practice-now-step{padding:14px;border-radius:15px;background:rgba(63,132,174,.09);border:1px solid rgba(118,190,229,.14);display:grid;grid-template-columns:34px 1fr;align-items:center;column-gap:10px}.practice-now-step span{grid-row:1/3;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:rgba(105,199,255,.17);font-weight:800;color:#bfeaff}.practice-now-step b{font-size:15px}.practice-now-step small{color:var(--muted);line-height:1.35} .sample-card,.target-controls,.autonomy-panel,.prompt,.reflection,.feedback{border-radius:17px}.sample-actions button{width:50px;height:50px}.control-strip{position:sticky;bottom:12px;z-index:18;margin:20px auto 18px;padding:12px 18px;border-radius:22px;background:rgba(5,18,29,.92);backdrop-filter:blur(16px);border:1px solid rgba(121,200,240,.18);box-shadow:0 16px 34px rgba(0,0,0,.3)} .round-btn{width:64px;height:64px;font-size:25px}.control-unit small{font-size:12px} body.simple-mode .practice-side{display:none}body.simple-mode .practice-layout{grid-template-columns:1fr}body.simple-mode .target-controls{grid-template-columns:1fr 1fr}body.simple-mode .advanced-only{display:none!important} body.simple-mode .top-actions .pill:not(#audioStatus),body.simple-mode #modeStatus{display:none} body.simple-mode .metrics{grid-template-columns:repeat(2,1fr)} body.simple-mode .autonomy-actions .btn:nth-child(n+4){display:none} body.simple-mode .dynamic-assessment-card{display:none} body.simple-mode.show-advanced .practice-side{display:grid}body.simple-mode.show-advanced .practice-layout{grid-template-columns:minmax(0,1fr) 320px} @media(max-width:1100px){.sidebar{width:220px}.content{padding:24px 20px 60px}.primary-action-card{align-items:flex-start;flex-direction:column}.primary-action-buttons{justify-content:flex-start;min-width:0}.practice-layout{grid-template-columns:1fr}.practice-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:760px){.app{display:block}.sidebar{position:relative;width:auto;min-height:0}.nav{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.nav-group-label,.side-progress{display:none}.main{min-width:0}.topbar{padding:14px 16px;align-items:flex-start;flex-direction:column}.top-actions{margin-left:0;width:100%}.content{padding:18px 12px 50px}.hero,.grid-2,.metrics,.practice-now-card,.live-dashboard,.practice-side{grid-template-columns:1fr!important}.hero-main{padding:24px}.primary-action-card{padding:21px}.primary-action-buttons,.primary-action-buttons .btn{width:100%}.practice-stage{padding:16px}.target-controls{grid-template-columns:1fr!important}.control-strip{bottom:6px}.round-btn{width:58px;height:58px}.author-hero-overlay h3{font-size:29px}} /* V5.5 Voice Autopilot */ .autopilot-toggle{border:1px solid rgba(229,196,122,.28);background:rgba(229,196,122,.07);color:#ffe6a7;border-radius:999px;padding:9px 13px;font-weight:700;white-space:nowrap}.autopilot-toggle.active{background:linear-gradient(135deg,rgba(109,225,167,.2),rgba(105,197,255,.13));border-color:rgba(109,225,167,.48);color:#c8ffe0;box-shadow:0 0 0 3px rgba(109,225,167,.07)}.autopilot-pill[data-state="listening"],#voiceCoachStatus[data-state="listening"]{color:#aaddff}.autopilot-pill[data-state="speaking"],#voiceCoachStatus[data-state="speaking"]{color:#ffe3a1}.autopilot-pill[data-state="warning"],#voiceCoachStatus[data-state="warning"]{color:#ffc37b}.autopilot-pill[data-state="recording"],#voiceCoachStatus[data-state="recording"]{color:#ffadb4}.voice-coach-bar{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;margin:14px 0;padding:13px 14px;border-radius:17px;border:1px solid rgba(109,225,167,.21);background:linear-gradient(135deg,rgba(109,225,167,.075),rgba(105,197,255,.045))}.voice-coach-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(109,225,167,.12);color:#b9ffd6;font-size:18px;box-shadow:inset 0 0 0 1px rgba(109,225,167,.17)}.voice-coach-copy{min-width:0}.voice-coach-copy strong,.voice-coach-copy span{display:block}.voice-coach-copy strong{font-size:13px}.voice-coach-copy span{margin-top:4px;color:var(--muted);font-size:11px;white-space:pre-line;overflow:visible;text-overflow:clip;line-height:1.45}.voice-coach-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.voice-control-settings{border-color:rgba(109,225,167,.18)}.voice-command-modal{width:min(840px,100%);max-height:min(88vh,850px);overflow:auto}.voice-command-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:14px 0}.voice-command-grid>div{padding:13px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.03)}.voice-command-grid b,.voice-command-grid span{display:block}.voice-command-grid span{margin-top:5px;color:var(--muted);font-size:11px;line-height:1.45}.voice-training-box{margin-top:16px;padding:16px;border-radius:16px;border:1px solid rgba(105,197,255,.18);background:rgba(7,20,33,.72)}.voice-training-box h4{margin:0 0 5px}.voice-training-box>p{margin:0 0 12px}.voice-training-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.voice-train-btn{min-height:82px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.04);color:var(--text);padding:10px 8px;display:grid;place-items:center;gap:5px;text-align:center}.voice-train-btn:hover{border-color:rgba(105,197,255,.42);background:rgba(105,197,255,.08)}.voice-train-btn span{font-size:11px;line-height:1.25}.voice-train-btn b{display:grid;place-items:center;min-width:27px;height:27px;border-radius:999px;background:rgba(229,196,122,.12);color:#ffe29a}.voice-train-btn:disabled{opacity:.55;cursor:wait} @media(max-width:1000px){.top-actions .autopilot-pill{display:none}.voice-training-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:760px){.autopilot-toggle{padding:8px 10px;font-size:10px}.voice-coach-bar{grid-template-columns:38px 1fr}.voice-coach-actions{grid-column:1/-1;justify-content:stretch}.voice-coach-actions .btn{flex:1}.voice-command-grid{grid-template-columns:1fr}.voice-training-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} #voiceCoachStatus.cue-flash,#autopilotStatus.cue-flash{animation:autopilotCueFlash .7s ease-out} @keyframes autopilotCueFlash{0%{box-shadow:0 0 0 0 rgba(240,191,100,.8);transform:scale(1)}35%{box-shadow:0 0 0 8px rgba(240,191,100,.25);transform:scale(1.015)}100%{box-shadow:0 0 0 0 rgba(240,191,100,0);transform:scale(1)}} /* V5.6.2 input and live graph hardening */ .autopilot-toggle{position:relative;z-index:3;pointer-events:auto;touch-action:manipulation}.top-actions select{z-index:1}#pitchCanvas,#dynamicCanvas{display:block;width:100%;height:auto;max-width:100%;touch-action:none}.live-graph{contain:paint} /* V5.6.2: prevent score-changing controls during count-in, recording and analysis. */ .operation-disabled { pointer-events: none !important; opacity: .52 !important; filter: grayscale(.25); } /* V5.6.2: stable graph sizing and isolated Auto Pilot control */ .autopilot-toggle{min-inline-size:190px;flex:0 0 auto;isolation:isolate;overflow:hidden;text-overflow:ellipsis} .autopilot-toggle:disabled{opacity:.72;cursor:progress} .top-actions{min-width:0;flex-wrap:wrap;justify-content:flex-end;row-gap:6px} .lane{height:clamp(250px,30vw,320px);min-height:250px;max-height:320px} .lane canvas,#pitchCanvas{width:100%!important;height:100%!important;max-width:100%;display:block} #dynamicCanvas{width:100%!important;height:clamp(250px,29vw,320px)!important;min-height:250px;max-height:320px;display:block} @media(max-width:900px){.topbar{height:auto;min-height:72px;padding-top:8px;padding-bottom:8px}.top-actions{max-width:72%;}.autopilot-toggle{min-inline-size:174px}.lane,#dynamicCanvas{height:270px!important;min-height:270px}} @media(max-width:760px){.topbar{align-items:flex-start}.top-actions{max-width:68%;gap:6px}.autopilot-toggle{min-inline-size:160px;font-size:10px}.lane,#dynamicCanvas{height:260px!important;min-height:260px}} @media(max-width:480px){.top-actions{max-width:64%}.autopilot-toggle{min-inline-size:148px}.lane,#dynamicCanvas{height:250px!important;min-height:250px}} /* V5.6.3: preserve the author's face and full portrait at every viewport. */ .author-hero>img{ height:clamp(460px,40vw,620px); object-fit:cover; object-position:50% 15%; } .author-portrait{ display:grid; place-items:center; background:linear-gradient(180deg,rgba(7,18,30,.96),rgba(11,29,45,.92)); } .author-portrait img{ width:100%; height:auto!important; max-height:none; aspect-ratio:auto; object-fit:contain; object-position:center top; } @media(max-width:760px){ .author-hero{min-height:420px} .author-hero>img{height:460px;object-position:50% 12%} } @media(max-width:480px){ .author-hero{min-height:390px} .author-hero>img{height:430px;object-position:50% 10%} } /* V5.6.4: explicit exercise sound, concise guide, live input visibility */ .exercise-sound-banner{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:16px;align-items:center;margin:14px 0;padding:15px 17px;border:1px solid rgba(246,221,164,.38);border-radius:16px;background:linear-gradient(135deg,rgba(246,221,164,.14),rgba(105,197,255,.065));box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)} .exercise-sound-key small,.exercise-sound-key strong{display:block}.exercise-sound-key small{font-size:10px;letter-spacing:.14em;color:#f6dda4;font-weight:800}.exercise-sound-key strong{margin-top:5px;font-size:25px;line-height:1.05;color:#fff3c7}.exercise-sound-banner p{margin:0;color:#e8f5ff;font-size:14px;line-height:1.5} .lesson-brief-body{white-space:normal;line-height:1.55}.lesson-brief-summary{margin:0 0 12px;padding:12px 14px;border-radius:12px;background:rgba(105,197,255,.075);font-weight:700;color:#f3f9fc}.lesson-brief-list{margin:0;padding-left:1.25rem;display:grid;gap:9px}.lesson-brief-list li{padding-left:.2rem;line-height:1.5;color:#dcecf5}.lesson-brief-list li::marker{color:#f6dda4;font-weight:800} #autopilotStopBtn{white-space:nowrap} .lane,#dynamicCanvas{overflow:hidden} @media(max-width:700px){.exercise-sound-banner{grid-template-columns:1fr;gap:8px}.exercise-sound-key strong{font-size:22px}.exercise-sound-banner p{font-size:13px}} /* V6.0 adaptive 84-day system */ .roadmap-toolbar{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 14px}.roadmap-toolbar .active{border-color:rgba(105,197,255,.52);background:rgba(105,197,255,.12);color:var(--text)} .roadmap-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.day-card.advanced{background:linear-gradient(145deg,rgba(105,197,255,.045),rgba(229,196,122,.035))}.day-card.checkpoint{border-color:rgba(229,196,122,.32)}.day-card .module-label{display:inline-flex;margin-top:8px;padding:4px 7px;border-radius:999px;background:rgba(255,255,255,.04);font-size:9px;color:var(--muted)} .adaptive-system-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0;padding:11px;border:1px solid rgba(105,197,255,.18);border-radius:15px;background:linear-gradient(135deg,rgba(105,197,255,.065),rgba(109,225,167,.035))}.adaptive-system-strip>div{min-width:0;padding:8px 10px;border-radius:11px;background:rgba(255,255,255,.028)}.adaptive-system-strip small{display:block;color:var(--muted);font-size:9px;letter-spacing:.08em}.adaptive-system-strip strong{display:block;margin-top:4px;font-size:12px;line-height:1.35}.adaptive-system-strip .warn{color:var(--amber)}.adaptive-system-strip .danger{color:var(--red)}.adaptive-system-strip .good{color:var(--green)} .exercise-sound-key strong{overflow-wrap:anywhere}.task-abstain{border-color:rgba(255,193,110,.34)!important;background:rgba(255,193,110,.07)!important} @media(max-width:1200px){.roadmap-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.adaptive-system-strip{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:760px){.roadmap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.roadmap-toolbar .btn{flex:1 1 44%;font-size:10px;padding:9px 8px}.adaptive-system-strip{grid-template-columns:1fr 1fr}} @media(max-width:430px){.adaptive-system-strip{grid-template-columns:1fr}} /* V6 task-aware report and syllable legibility */ .report-task-list{margin:10px 0 12px;padding-left:22px;display:grid;gap:7px} .report-task-list li{line-height:1.45} .note-chip small{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.72rem} @media(max-width:640px){.report-task-list{padding-left:18px}.note-chip small{font-size:.66rem}} /* V6.2.0 · Inspired, action-first home */ .hidden-action-alias{display:none!important} body.simple-mode .system-internal{display:none!important} .topbar-subtitle{margin:3px auto 0 12px;color:var(--muted);font-size:11px} .home-hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.5fr);gap:18px;margin-bottom:18px} .home-hero-main{position:relative;overflow:hidden;padding:clamp(26px,3.5vw,46px);min-height:330px;background: linear-gradient(118deg,rgba(7,26,42,.96),rgba(14,47,69,.89) 62%,rgba(55,43,22,.82)), radial-gradient(circle at 78% 18%,rgba(246,221,164,.19),transparent 36%)} .home-hero-main:before{content:"";position:absolute;right:-60px;bottom:-160px;width:430px;height:430px;border-radius:50%;border:1px solid rgba(246,221,164,.12);box-shadow:0 0 0 55px rgba(105,197,255,.025),0 0 0 110px rgba(246,221,164,.018)} .home-hero-main>*{position:relative;z-index:1} .home-hero-main h3{font-family:var(--font-ui);margin:15px 0 16px;font-size:clamp(36px,4.1vw,61px);font-weight:700;line-height:1.03;letter-spacing:-.025em;max-width:920px} .home-hero-main h3 span{color:var(--gold2)} .home-hero-main p{max-width:820px;margin:0;color:#c6d5df;font-size:16px;line-height:1.7} .home-primary-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:26px} .selection-notice{margin-top:18px;max-width:820px;color:var(--muted);font-size:11px;line-height:1.5} .readiness-compact{padding:24px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(160deg,rgba(13,34,52,.97),rgba(8,20,31,.98))} .readiness-title{display:flex;justify-content:space-between;gap:12px;align-items:center;color:var(--muted);font-size:10px;letter-spacing:.11em} .text-action{border:0;background:transparent;color:var(--blue);padding:5px;font-size:11px} .readiness-compact .readiness{margin:22px 0} .readiness-rule{padding:14px 15px;border-radius:15px;background:rgba(109,225,167,.055);border:1px solid rgba(109,225,167,.14)} .readiness-rule b,.readiness-rule span{display:block}.readiness-rule b{font-size:12px;color:var(--green);margin-bottom:5px}.readiness-rule span{font-size:11px;line-height:1.5;color:var(--muted)} .daily-technique-card{position:relative;overflow:hidden;margin-bottom:18px;padding:clamp(24px,3vw,36px);background:linear-gradient(135deg,rgba(22,46,66,.97),rgba(10,26,39,.98));border-color:rgba(229,196,122,.18)} .daily-technique-card:after{content:"♪";position:absolute;right:30px;bottom:-45px;color:rgba(246,221,164,.035);font-family:var(--font-ui);font-size:230px;line-height:1} .daily-technique-card>*{position:relative;z-index:1} .daily-technique-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px} .daily-technique-kicker{display:flex;gap:8px;flex-wrap:wrap}.daily-technique-kicker span{display:inline-flex;padding:6px 9px;border-radius:999px;background:rgba(105,197,255,.08);border:1px solid rgba(105,197,255,.15);font-size:9px;letter-spacing:.12em;color:var(--blue)}.daily-technique-kicker span+span{background:rgba(229,196,122,.08);border-color:rgba(229,196,122,.16);color:var(--gold2)} .daily-technique-card h3{margin:12px 0 0;font-family:var(--font-ui);font-size:clamp(26px,2.8vw,39px);font-weight:600} .daily-technique-nav{display:flex;gap:7px}.icon-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.045);color:var(--text);font-size:18px}.icon-btn:hover{background:rgba(255,255,255,.09)}.icon-btn:disabled{opacity:.28;cursor:not-allowed} .daily-technique-text{max-width:1080px;margin:20px 0;color:#d8e3eb;font-size:15px;line-height:1.82} .daily-technique-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.daily-technique-actions>div{padding:16px 17px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.028)}.daily-technique-actions small{display:block;margin-bottom:7px;font-size:9px;letter-spacing:.12em}.daily-technique-actions strong{display:block;font-size:12px;line-height:1.55;font-weight:600}.technique-do{border-color:rgba(109,225,167,.17)!important}.technique-do small{color:var(--green)}.technique-avoid{border-color:rgba(255,193,110,.16)!important}.technique-avoid small{color:var(--amber)} .daily-technique-source{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}.daily-technique-source a{color:var(--blue);text-decoration:none}.daily-technique-source a:hover{text-decoration:underline} .home-status-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}.home-stat{padding:18px 20px}.home-stat small,.home-stat span{display:block;color:var(--muted);font-size:10px}.home-stat strong{display:block;margin:7px 0;font-size:21px}.home-stat span{color:var(--cyan)} .home-workspace{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr);gap:18px}.today-panel,.home-reflection-panel{padding:24px}.home-group-list{gap:9px} .home-group-button{width:100%;color:inherit;text-align:left;cursor:pointer}.home-group-button .group-main{min-width:0}.home-group-button .group-main strong,.home-group-button .group-main small,.home-group-button .group-main em{display:block}.home-group-button .group-main strong{font-size:14px}.home-group-button .group-main small{margin-top:4px;color:var(--muted);font-size:11px;line-height:1.45}.home-group-button .group-main em{margin-top:7px;color:var(--gold2);font-size:10px;font-style:normal}.group-open{color:var(--blue);font-size:11px;font-weight:700;white-space:nowrap}.home-group-button.done .group-open{color:var(--green)} .reflection-cta{width:100%;margin-top:6px} .safety-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px 34px;margin-bottom:18px;background:linear-gradient(130deg,rgba(26,56,78,.95),rgba(9,25,38,.98))}.safety-hero h3{margin:8px 0 9px;font-family:var(--font-ui);font-size:34px}.safety-hero p{margin:0;max-width:850px;color:var(--muted);line-height:1.6} .safety-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:18px}.safety-card{position:relative;padding:23px;min-height:235px}.safety-card h4{margin:16px 0 9px;font-size:18px}.safety-card p{margin:0 0 18px;color:var(--muted);font-size:12px;line-height:1.65}.safety-card .btn{margin-top:auto}.safety-number{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:rgba(105,197,255,.1);color:var(--blue);font-weight:800}.safety-card.danger{border-color:rgba(255,125,136,.23);background:linear-gradient(145deg,rgba(58,24,31,.82),rgba(17,21,29,.96))}.safety-card.danger .safety-number{background:rgba(255,125,136,.1);color:var(--red)} .measurement-boundary{display:grid;grid-template-columns:minmax(260px,.7fr) 1.3fr;gap:28px;align-items:center;padding:28px 32px;margin-bottom:18px}.measurement-boundary h3{margin:8px 0 0;font-size:25px}.boundary-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px}.boundary-columns p{margin:0;padding:15px;border-radius:15px;background:rgba(255,255,255,.03);color:var(--muted);font-size:12px;line-height:1.6}.boundary-columns b{color:var(--text)} .expert-sources{padding:28px 32px}.source-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.source-cards a{display:block;padding:16px;border-radius:15px;background:rgba(255,255,255,.03);border:1px solid var(--line);text-decoration:none;color:var(--text);transition:.18s}.source-cards a:hover{transform:translateY(-2px);border-color:rgba(105,197,255,.28)}.source-cards small,.source-cards strong,.source-cards span{display:block}.source-cards small{color:var(--gold2);font-size:9px;letter-spacing:.08em;text-transform:uppercase}.source-cards strong{margin:7px 0 5px;font-size:13px}.source-cards span{color:var(--muted);font-size:10px;line-height:1.45} body.simple-mode .home-workspace{grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr)} @media(max-width:1050px){.home-hero,.home-workspace{grid-template-columns:1fr}.readiness-compact .readiness{max-width:440px}.safety-grid,.source-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.measurement-boundary{grid-template-columns:1fr}} @media(max-width:760px){.topbar-subtitle{display:none}.home-hero-main{min-height:0;padding:25px 21px}.home-hero-main h3{font-size:36px}.home-primary-actions,.home-primary-actions .btn{width:100%}.readiness-compact{padding:20px}.daily-technique-card{padding:22px 19px}.daily-technique-top{align-items:center}.daily-technique-text{font-size:14px;line-height:1.72}.daily-technique-actions,.home-status-row,.safety-grid,.source-cards,.boundary-columns{grid-template-columns:1fr}.daily-technique-source{align-items:flex-start;flex-direction:column}.home-workspace{grid-template-columns:1fr!important}.today-panel,.home-reflection-panel{padding:19px}.home-group-button{grid-template-columns:38px 1fr}.home-group-button .group-open{grid-column:2;margin-top:2px}.safety-hero{align-items:flex-start;flex-direction:column;padding:24px 21px}.safety-hero h3{font-size:29px}.measurement-boundary,.expert-sources{padding:23px 20px}.nav{grid-template-columns:repeat(2,1fr)!important}} #autopilotStatus{display:none!important} #settings .setting-card{align-self:start} #settings .source-box{padding:12px 14px;border-radius:13px;background:rgba(255,255,255,.025);border:1px solid var(--line)} /* V6.2.0 · two explicit interface modes and unified Vietnamese typography */ html{font-family:var(--font-ui);font-size:16px} body,button,input,select,textarea{font-family:var(--font-ui)!important} body{overflow-wrap:break-word} :where(h1,h2,h3,h4,h5,h6){font-family:var(--font-ui)!important;font-style:normal;letter-spacing:-.012em;text-wrap:balance} :where(p,li,span,label,small,strong,b,a,button,select,option){font-kerning:normal} :where(p,li){line-height:1.62} .ico{font-family:"Segoe UI Symbol","Segoe UI",Arial,sans-serif!important;font-weight:400;line-height:1} .note-chip,.metric strong,.home-stat strong,.readiness-ring strong{font-variant-numeric:tabular-nums} .view-mode-switch{display:inline-grid;grid-template-columns:1fr 1fr;align-items:center;padding:3px;border:1px solid rgba(105,197,255,.22);border-radius:999px;background:rgba(4,14,23,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.018)} .view-mode-btn{min-height:34px;padding:6px 12px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:12px;font-weight:700;white-space:nowrap;transition:background .18s,color .18s,box-shadow .18s} .view-mode-btn:hover{color:var(--text);background:rgba(255,255,255,.045)} .view-mode-btn.active{color:#071019;background:linear-gradient(135deg,var(--gold2),#d9aa55);box-shadow:0 5px 14px rgba(229,196,122,.17)} body.full-specs-mode .view-mode-btn#fullSpecsModeBtn{color:#061019} body.full-specs-mode .adaptive-system-strip{display:grid} body.full-specs-mode .practice-side{display:grid} body.full-specs-mode .advanced-only{display:block} body.full-specs-mode .top-actions .pill{display:inline-flex} body.full-specs-mode .system-internal.btn,body.full-specs-mode button.system-internal{display:inline-flex} body.full-specs-mode .system-internal.setting-row{display:flex} body.full-specs-mode .adaptive-system-strip.system-internal{display:grid} .home-hero-main h3,.daily-technique-card h3,.safety-hero h3{font-family:var(--font-ui)!important;font-weight:700;letter-spacing:-.025em} .daily-technique-card h3{line-height:1.16} .daily-technique-text{font-size:15px;line-height:1.72} .setting-row>span:first-child{font-weight:600} .field,select.field{line-height:1.35} @media(max-width:1120px){.view-mode-switch{order:10}.top-actions{justify-content:flex-start}.topbar{height:auto;min-height:72px}} @media(max-width:760px){.view-mode-switch{width:100%}.view-mode-btn{width:100%;min-height:38px}.home-hero-main h3{font-size:clamp(30px,10vw,45px)}.daily-technique-card h3{font-size:clamp(25px,7vw,34px)}} /* V6.2.0 · startup mic sync and stable real-time analysis */ .mic-sync-modal{max-width:660px}.mic-sync-modal h3{margin:8px 0 10px;font-size:28px}.mic-sync-modal>p{color:var(--muted);line-height:1.65}.mic-sync-points{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.mic-sync-points span{padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.028);color:var(--muted)}.mic-sync-points b{color:var(--blue);margin-right:6px}#analysisAutoStatus.audit-pass{color:var(--green)}#analysisAutoStatus.audit-warn{color:var(--amber)} @media(max-width:640px){.mic-sync-points{grid-template-columns:1fr}.mic-sync-modal .modal-actions{flex-direction:column}.mic-sync-modal .modal-actions .btn{width:100%}} .report-teacher-section{background:linear-gradient(145deg,rgba(17,43,64,.98),rgba(10,25,39,.98));border-color:rgba(229,196,122,.20)} .report-teacher-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .report-teacher-card{padding:17px;border-radius:16px;border:1px solid rgba(255,255,255,.085);background:rgba(255,255,255,.035)} .report-teacher-card small{display:block;color:var(--gold2);letter-spacing:.05em;text-transform:uppercase;font-size:10px} .report-teacher-card strong{display:block;margin:6px 0 8px;font-size:17px} .report-teacher-card p{margin:0;color:var(--muted);line-height:1.65} .report-disclaimer{margin-top:13px;padding:11px 13px;border-radius:13px;background:rgba(229,196,122,.06);border:1px solid rgba(229,196,122,.15);color:var(--muted);font-size:12px;line-height:1.55} .report-metric span{line-height:1.5} @media(max-width:900px){.report-teacher-grid{grid-template-columns:1fr}} /* Thuật ngữ chuyên môn trong chế độ Phân tích chuyên sâu */ .expert-terminology-card{grid-column:1/-1} .expert-term-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .expert-term-grid>div{padding:14px 15px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.075)} .expert-term-grid strong,.expert-term-grid span{display:block}.expert-term-grid strong{color:#fff0b9;font-size:13px}.expert-term-grid strong i{color:var(--muted);font-size:10px;font-style:normal;font-weight:600}.expert-term-grid span{margin-top:5px;color:var(--muted);font-size:11px;line-height:1.55} @media(max-width:760px){.expert-term-grid{grid-template-columns:1fr}} /* V7: teacher-like feedback, Belcanto score and adaptive vocal studio */ .author-disclaimer{margin-top:16px;padding:14px 16px;border-radius:15px;border:1px solid rgba(105,197,255,.20);background:rgba(105,197,255,.065);color:var(--muted);line-height:1.65}.author-disclaimer strong{color:var(--text)} .feedback-card strong{line-height:1.65;font-size:14px;font-weight:600}.feedback-card.next{background:linear-gradient(145deg,rgba(229,196,122,.10),rgba(105,197,255,.055));border-color:rgba(229,196,122,.24)} .report-hero-copy{min-width:0;flex:1}.report-hero-side{display:grid;grid-template-columns:minmax(230px,290px) minmax(170px,210px);gap:12px;align-items:stretch}.report-belcanto-score{position:relative;overflow:hidden;text-align:center;padding:18px;border:1px solid rgba(246,221,164,.34);border-radius:20px;background:radial-gradient(circle at 50% 10%,rgba(246,221,164,.18),transparent 45%),linear-gradient(145deg,rgba(24,51,75,.98),rgba(7,19,31,.98));box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),0 18px 46px rgba(0,0,0,.25)}.report-belcanto-score:after{content:"";position:absolute;inset:auto -50px -75px;height:150px;background:radial-gradient(circle,rgba(105,197,255,.14),transparent 67%);pointer-events:none}.report-belcanto-score>small{display:block;color:var(--gold2);font-weight:800;letter-spacing:.16em;font-size:10px}.report-score-ring{width:112px;height:112px;margin:10px auto 7px;border-radius:50%;display:grid;place-content:center;background:radial-gradient(circle,rgba(5,14,23,.96) 54%,transparent 56%),conic-gradient(var(--gold2) var(--score-angle,0deg),rgba(255,255,255,.08) 0);box-shadow:0 0 28px rgba(229,196,122,.18)}.report-score-ring strong{font-size:37px;line-height:1;color:#fff2bd}.report-score-ring span{font-size:11px;color:var(--muted)}.report-score-stars{color:var(--gold2);letter-spacing:.18em;font-size:18px;text-shadow:0 0 14px rgba(246,221,164,.22)}.report-belcanto-score b{display:block;margin:7px 0 5px;font-size:15px}.report-belcanto-score p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}.report-belcanto-score em{display:block;margin-top:10px;color:#879cad;font-size:10px;line-height:1.45;font-style:normal}.report-confidence{align-self:stretch;display:flex;flex-direction:column;justify-content:center} @media(max-width:1120px){.report-hero-side{width:100%;grid-template-columns:1fr 1fr}.report-hero{align-items:flex-start;flex-direction:column}}@media(max-width:620px){.report-hero-side{grid-template-columns:1fr}.report-belcanto-score,.report-confidence{width:100%}} /* ================================================================ BELCANTO LAB V7 · PHÒNG LUYỆN THANH THÍCH NGHI Giao diện học tập nghệ thuật, chỉ dẫn bài tập nổi bật và các mô-đun V7 ================================================================ */ .v7-mark{display:inline-grid;place-items:center;min-width:27px;height:18px;margin-left:5px;padding:0 6px;border-radius:999px;background:linear-gradient(135deg,#f8e4ae,#b88632);color:#071019;font-size:9px;letter-spacing:.09em;vertical-align:top;box-shadow:0 0 18px rgba(246,221,164,.28)} .sidebar{display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin}.sidebar .nav{flex:0 0 auto}.side-progress{position:static;margin-top:auto}.nav-group-label{margin:14px 12px 4px;color:#6f879b;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase} body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.009) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent 70%)} .home-hero-main,.learning-hero,.voice-map-hero{isolation:isolate}.home-hero-main:before,.learning-hero:before,.voice-map-hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 0 58%,rgba(246,221,164,.055) 58% 59%,transparent 59% 100%);z-index:-1} .theory-btn{color:#f8e6b3!important;background:linear-gradient(135deg,rgba(229,196,122,.14),rgba(105,197,255,.08))!important;border:1px solid rgba(246,221,164,.28)!important;box-shadow:none!important} .home-learning-preview{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center;margin:20px 0;padding:22px 24px;overflow:hidden;background:linear-gradient(120deg,rgba(26,51,74,.98),rgba(12,27,43,.98) 58%,rgba(40,31,20,.94));border-color:rgba(246,221,164,.18)} .home-learning-preview:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-90px;top:-150px;background:radial-gradient(circle,rgba(246,221,164,.15),transparent 68%);pointer-events:none}.home-learning-ornament{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(246,221,164,.35);background:radial-gradient(circle,rgba(246,221,164,.20),rgba(6,16,25,.28));color:#f8e6b3;font-size:26px;box-shadow:0 0 30px rgba(246,221,164,.12)} .home-learning-preview small{color:#e8c97f;letter-spacing:.13em;font-size:9px}.home-learning-preview h3{margin:6px 0 4px;font-family:var(--font-reading);font-size:22px;font-weight:600}.home-learning-preview p{margin:0;color:var(--muted);font-size:13px}.home-learning-meta{position:relative;z-index:1;display:grid;gap:7px;justify-items:end}.home-learning-meta span,.home-learning-meta b{font-size:11px;color:var(--muted)}.home-learning-meta b{color:#d9ebf7} /* Large, unambiguous instruction at the center of practice */ .exercise-command-card{position:relative;margin:15px 0 16px;padding:19px 22px 21px;border-radius:24px;overflow:hidden;border:1px solid rgba(246,221,164,.34);background:linear-gradient(118deg,rgba(36,58,78,.98),rgba(11,28,45,.98) 52%,rgba(43,31,17,.96));box-shadow:0 24px 60px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.07)} .exercise-command-glow{position:absolute;width:390px;height:390px;right:-150px;top:-230px;border-radius:50%;background:radial-gradient(circle,rgba(246,221,164,.22),transparent 67%);pointer-events:none}.exercise-command-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.exercise-command-head>span{font-size:11px;font-weight:800;letter-spacing:.20em;color:#f6dda4}.exercise-command-main{position:relative;display:grid;grid-template-columns:minmax(160px,.42fr) minmax(0,1.58fr);gap:22px;align-items:stretch}.exercise-sound-key,.exercise-note-command{border-radius:18px;background:rgba(3,12,20,.36);border:1px solid rgba(255,255,255,.075);padding:15px 18px;display:flex;flex-direction:column;justify-content:center}.exercise-sound-key small,.exercise-note-command small{font-size:9px;font-weight:800;letter-spacing:.15em;color:#91aabe}.exercise-sound-key strong{display:block;margin-top:1px;font-family:var(--font-reading);font-size:clamp(48px,5.5vw,78px);line-height:1.16;color:#fff3c9;text-shadow:0 0 28px rgba(246,221,164,.20)}.exercise-note-command strong{display:block;margin-top:8px;font-family:var(--font-reading);font-size:clamp(22px,2.35vw,36px);line-height:1.28;font-weight:600;color:#eef7ff;letter-spacing:.01em}.exercise-command-instruction{position:relative;margin:14px 0 0;padding:13px 16px;border-left:3px solid #f6dda4;border-radius:0 13px 13px 0;background:rgba(246,221,164,.065);font-size:clamp(16px,1.55vw,21px);line-height:1.55;font-weight:600;color:#f2f7fb}.exercise-command-cues{position:relative;display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.exercise-command-cues span{padding:7px 10px;border-radius:999px;background:rgba(105,197,255,.075);border:1px solid rgba(105,197,255,.16);font-size:10px;color:#c8e7f9} .simple-mode .exercise-command-card{padding:23px 25px 24px}.simple-mode .exercise-sound-key strong{font-size:clamp(58px,6vw,88px);line-height:1.16}.simple-mode .exercise-note-command strong{font-size:clamp(25px,2.7vw,40px)}.simple-mode .exercise-command-instruction{font-size:clamp(18px,1.75vw,23px)} .v7-coach-status{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:2px;margin:10px 0 14px;padding:11px 13px;border-radius:14px;background:linear-gradient(90deg,rgba(109,225,167,.07),rgba(105,197,255,.055));border:1px solid rgba(109,225,167,.16)}.v7-coach-status>span{grid-row:1/3;align-self:center;padding:5px 7px;border-radius:8px;background:rgba(109,225,167,.12);color:#94efbf;font-size:9px;font-weight:800;letter-spacing:.12em}.v7-coach-status strong{font-size:11px;color:#dff8ec}.v7-coach-status small{font-size:10px;color:var(--muted)} /* Theory library */ .learning-hero,.voice-map-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:25px;padding:27px 30px;margin-bottom:20px;overflow:hidden}.learning-hero h3,.voice-map-hero h3{margin:7px 0 5px;font-family:var(--font-reading);font-size:31px;font-weight:600}.learning-hero p,.voice-map-hero p{margin:0;max-width:840px;color:var(--muted)}.learning-day-nav{display:flex;align-items:center;gap:10px;padding:9px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid var(--line)}.learning-day-nav strong{min-width:90px;text-align:center;font-size:12px} .learning-layout{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(340px,.72fr);gap:20px}.theory-reading-card,.theory-quiz-card{padding:26px}.theory-term{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:17px;margin-bottom:17px;border-bottom:1px solid var(--line)}.theory-term small{color:var(--gold2);font-size:9px;letter-spacing:.14em}.theory-term strong{font-family:var(--font-reading);font-size:23px}.theory-term span{padding:5px 9px;border-radius:999px;background:rgba(105,197,255,.09);color:#9edcff;border:1px solid rgba(105,197,255,.17);font-size:11px;font-style:italic}.theory-reading{font-family:var(--font-reading);font-size:16px;line-height:1.82;color:#e6eef4}.theory-reading p{margin:0 0 15px}.theory-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:21px}.theory-action-grid>div{padding:15px;border-radius:15px;background:rgba(255,255,255,.035);border:1px solid var(--line)}.theory-action-grid>div:first-child{border-color:rgba(109,225,167,.19);background:rgba(109,225,167,.055)}.theory-action-grid>div:last-child{border-color:rgba(255,125,136,.18);background:rgba(255,125,136,.045)}.theory-action-grid small{display:block;margin-bottom:6px;color:var(--muted);font-size:9px;letter-spacing:.12em}.theory-action-grid strong{font-size:12px;line-height:1.5}.theory-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}.theory-footer span{font-size:11px;color:var(--muted)} .quiz-head h3{margin:6px 0 4px;font-family:var(--font-reading);font-size:25px}.quiz-head p{margin:0 0 16px;color:var(--muted);font-size:12px}.quiz-question{border:0;padding:0;margin:0 0 18px}.quiz-question legend{display:flex;align-items:flex-start;gap:9px;margin-bottom:9px;color:#eef6fb;font-size:13px;font-weight:700;line-height:1.4}.quiz-question legend span{flex:0 0 24px;height:24px;display:grid;place-items:center;border-radius:50%;background:rgba(229,196,122,.13);color:#f6dda4;font-size:10px}.quiz-option{display:flex;align-items:flex-start;gap:8px;margin:6px 0;padding:9px 10px;border-radius:11px;background:rgba(255,255,255,.025);border:1px solid transparent;color:var(--muted);font-size:11px;line-height:1.4;cursor:pointer}.quiz-option:hover{border-color:rgba(105,197,255,.22);color:var(--text)}.quiz-option input{margin-top:2px;accent-color:#e5c47a}.quiz-explain{display:none;margin:7px 0 0;padding:8px 10px;border-radius:9px;font-size:10px;line-height:1.4}.quiz-explain.show{display:block}.quiz-explain.good{background:rgba(109,225,167,.07);color:#a5edc7}.quiz-explain.review{background:rgba(255,193,110,.07);color:#ffd49a}.quiz-result{padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid var(--line);color:var(--muted);font-size:11px}.quiz-result.good{background:rgba(109,225,167,.07);border-color:rgba(109,225,167,.2);color:#a8efca}.quiz-result.review{background:rgba(255,193,110,.07);border-color:rgba(255,193,110,.2);color:#ffd49a}.quiz-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px} /* Voice coordination map and research metrics */ .voice-map-badge{min-width:126px;aspect-ratio:1;border-radius:50%;display:grid;place-content:center;text-align:center;background:radial-gradient(circle,rgba(246,221,164,.14),rgba(6,16,25,.6));border:1px solid rgba(246,221,164,.3);box-shadow:0 0 34px rgba(246,221,164,.08)}.voice-map-badge strong{font-size:32px;color:#f6dda4}.voice-map-badge span{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}.voice-map-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.v7-lab-card{padding:20px}.v7-lab-card.span-2{grid-column:1/-1}.lab-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:13px}.lab-card-head small{color:var(--gold2);font-size:9px;letter-spacing:.13em}.lab-card-head h4{margin:4px 0 0;font-size:18px}.coordination-map{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.coord-cell{min-height:118px;padding:12px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid var(--line);display:flex;flex-direction:column}.coord-cell.good{border-color:rgba(109,225,167,.25);background:linear-gradient(145deg,rgba(109,225,167,.07),rgba(255,255,255,.025))}.coord-cell.developing{border-color:rgba(255,193,110,.24)}.coord-cell.watch{border-color:rgba(255,125,136,.22)}.coord-cell small{color:var(--muted);font-size:9px;text-transform:uppercase}.coord-cell strong{margin:7px 0 auto;font-size:11px;line-height:1.35}.coord-cell b{font-size:21px;color:#f6dda4}.coord-cell span{font-size:9px;color:var(--muted)}.lab-copy strong{display:block;margin-bottom:7px;color:#eef6fb}.lab-copy p{margin:6px 0;color:var(--muted);font-size:12px;line-height:1.55}.lab-empty{padding:19px;border-radius:13px;border:1px dashed rgba(255,255,255,.14);color:var(--muted);font-size:12px}.cue-effectiveness{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.cue-effect-card{padding:13px;border-radius:13px;background:rgba(255,255,255,.035);border:1px solid var(--line);display:grid;gap:5px}.cue-effect-card small{color:var(--muted);font-size:9px}.cue-effect-card strong{font-size:12px}.cue-effect-card span{color:#9ee5c2;font-size:10px} @media(max-width:1100px){.learning-layout{grid-template-columns:1fr}.coordination-map{grid-template-columns:repeat(3,minmax(0,1fr))}.home-learning-preview{grid-template-columns:auto 1fr}.home-learning-meta{grid-column:1/-1;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap}} @media(max-width:760px){.sidebar{height:76px;overflow:hidden}.nav{display:flex!important;grid-template-columns:none!important;overflow-x:auto;gap:4px;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}.nav button{flex:0 0 76px;min-width:76px}.nav-group-label{display:none}.content{padding-bottom:96px}.home-learning-preview{grid-template-columns:1fr;padding:19px}.home-learning-ornament{display:none}.home-learning-meta{grid-column:auto;justify-items:start;display:grid}.exercise-command-main{grid-template-columns:1fr}.exercise-command-head{align-items:flex-start}.exercise-command-head .btn{font-size:9px;padding:7px 8px}.exercise-sound-key strong{font-size:62px}.exercise-note-command strong{font-size:25px}.exercise-command-instruction{font-size:18px}.learning-hero,.voice-map-hero{display:grid;padding:21px}.learning-layout{grid-template-columns:1fr}.theory-reading-card,.theory-quiz-card{padding:19px}.theory-action-grid{grid-template-columns:1fr}.theory-footer{align-items:flex-start;flex-direction:column}.voice-map-grid{grid-template-columns:1fr}.v7-lab-card.span-2{grid-column:auto}.coordination-map{grid-template-columns:1fr 1fr}.cue-effectiveness{grid-template-columns:1fr}.voice-map-badge{display:none}} @media(max-width:460px){.coordination-map{grid-template-columns:1fr}.exercise-command-cues span{width:100%}.learning-day-nav{width:100%;justify-content:space-between}} /* V7.0.9: kiểu chữ thống nhất, hỗ trợ đầy đủ dấu tiếng Việt */ html,body,button,input,select,textarea{font-family:var(--font-ui)!important} :where(h1,h2,h3,h4,h5,h6,p,span,strong,small,label,legend,button){overflow-wrap:break-word;word-break:normal} .exercise-sound-key strong,.exercise-note-command strong,.exercise-command-instruction,.theory-reading{font-family:var(--font-reading)!important;font-variant-ligatures:none} .exercise-sound-key strong{padding:.08em 0 .12em;line-height:1.16!important} .exercise-note-command strong{line-height:1.34!important} .theory-reading{font-size:16px;line-height:1.78} /* V7.0.9: font and Vietnamese diacritic safeguards */ html,body,button,input,select,textarea{font-family:"Segoe UI",Tahoma,Arial,sans-serif!important;font-synthesis:weight style} body{font-size:16px} .exercise-sound-key strong{line-height:1.2;padding:.08em 0 .12em;overflow:visible} .exercise-note-command strong{line-height:1.35;overflow:visible} .exercise-command-instruction,.daily-technique-card h3,.theory-reading-body,.theory-quiz-card{overflow:visible;text-wrap:pretty} :where(h1,h2,h3,h4,p,strong,span,button,label,small){word-break:normal;overflow-wrap:break-word} /* V7.0.9: unified pedagogical prose and structured technique teaching */ .daily-technique-card,.theory-reading-card,.theory-quiz-card,.home-hero-main{font-family:"Segoe UI",Tahoma,Arial,sans-serif;font-variant-ligatures:none;text-rendering:optimizeLegibility} .daily-technique-text{font-size:15px;line-height:1.75;max-width:100ch} .technique-instruction-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0} .technique-instruction-grid section{padding:15px 16px;border-radius:16px;border:1px solid rgba(157,198,221,.17);background:linear-gradient(145deg,rgba(16,42,62,.82),rgba(7,22,35,.76));min-width:0} .technique-instruction-grid section.technique-step-main{grid-column:1/-1;border-color:rgba(229,196,122,.32);background:linear-gradient(145deg,rgba(74,56,24,.34),rgba(15,35,52,.86))} .technique-instruction-grid small,.technique-stop small{display:block;color:#f4d894;font-size:10px;font-weight:800;letter-spacing:.11em;margin-bottom:8px} .technique-instruction-grid p,.technique-stop p{margin:0;color:#d9e6ed;font-size:14px;line-height:1.68} .technique-step-main p{font-size:16px;line-height:1.72;color:#fff4cf;font-weight:620} .technique-stop{margin-top:12px;padding:14px 16px;border-radius:15px;border:1px solid rgba(255,161,140,.22);background:rgba(144,52,42,.09)} .daily-technique-actions strong{line-height:1.62} .theory-reading p{font-size:15px;line-height:1.82;margin-bottom:1.15em} .theory-term strong{font-weight:750} @media(max-width:760px){.technique-instruction-grid{grid-template-columns:1fr}.technique-instruction-grid section.technique-step-main{grid-column:auto}.technique-step-main p{font-size:15px}.daily-technique-text{font-size:14px}} /* V7.0.9: Learning trajectory in the session report */ .trajectory-section{position:relative;overflow:hidden;background:radial-gradient(circle at 88% 5%,rgba(246,221,164,.10),transparent 30%),linear-gradient(145deg,rgba(13,38,58,.98),rgba(7,22,35,.98));border-color:rgba(105,197,255,.18)} .trajectory-section:before{content:"";position:absolute;inset:-120px auto auto -100px;width:300px;height:300px;border-radius:50%;border:1px solid rgba(105,197,255,.08);pointer-events:none} .trajectory-position-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(230px,.55fr);gap:14px;margin-bottom:14px} .trajectory-position-card,.trajectory-readiness-card,.trajectory-chart-card{position:relative;padding:18px;border:1px solid rgba(255,255,255,.085);border-radius:18px;background:rgba(255,255,255,.032)} .trajectory-position-card>small,.trajectory-readiness-card>small,.trajectory-card-head small{display:block;color:var(--gold2);font-size:10px;font-weight:800;letter-spacing:.12em} .trajectory-position-card>strong,.trajectory-readiness-card>strong{display:block;margin:6px 0;font-size:22px}.trajectory-position-card>p,.trajectory-readiness-card>p{margin:0;color:var(--muted);line-height:1.6} .trajectory-day-track{height:8px;margin:18px 0 14px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}.trajectory-day-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#69c5ff,#f6dda4);transition:width .45s ease} .trajectory-stage-path{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.trajectory-stage-node{position:relative;padding-top:22px;color:#71899b;font-size:10px;line-height:1.35;text-align:center}.trajectory-stage-node:before{content:"";position:absolute;top:2px;left:50%;width:13px;height:13px;border-radius:50%;transform:translateX(-50%);background:#183247;border:2px solid #496579;box-shadow:0 0 0 4px rgba(24,50,71,.6)}.trajectory-stage-node.complete{color:#a9c8dc}.trajectory-stage-node.complete:before{background:#69c5ff;border-color:#bde8ff}.trajectory-stage-node.current{color:#fff2bd;font-weight:800}.trajectory-stage-node.current:before{width:17px;height:17px;top:0;background:#f6dda4;border-color:#fff1bd;box-shadow:0 0 20px rgba(246,221,164,.38)} .trajectory-position-number{margin-top:18px;padding:14px;border-radius:15px;background:rgba(105,197,255,.07);border:1px solid rgba(105,197,255,.14);text-align:center}.trajectory-position-number span{display:block;color:var(--muted);font-size:11px}.trajectory-position-number b{display:block;margin:2px 0;font-size:34px;color:#fff2bd} .trajectory-chart-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.22fr);gap:14px}.trajectory-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.trajectory-card-head strong{display:block;margin-top:4px;font-size:17px}.trajectory-card-head>span{color:var(--muted);font-size:10px;text-align:right} .trajectory-radar-wrap,.trajectory-trend-wrap{min-height:260px;margin-top:10px}.trajectory-radar-wrap svg,.trajectory-trend-wrap svg{display:block;width:100%;height:auto;overflow:visible}.trajectory-grid-ring{fill:none;stroke:rgba(255,255,255,.09);stroke-width:1}.trajectory-grid-axis{stroke:rgba(255,255,255,.10);stroke-width:1}.trajectory-radar-area{fill:rgba(105,197,255,.18);stroke:#69c5ff;stroke-width:2.5}.trajectory-radar-dot{fill:#f6dda4;stroke:#fff2bd;stroke-width:1.5}.trajectory-svg-label{fill:#c8deec;font-size:11px;font-family:'Segoe UI',Tahoma,Arial,sans-serif}.trajectory-svg-value{fill:#fff2bd;font-size:10px;font-weight:700;font-family:'Segoe UI',Tahoma,Arial,sans-serif} .trajectory-skill-list{display:grid;gap:7px;margin-top:6px}.trajectory-skill-row{display:grid;grid-template-columns:minmax(110px,1fr) 54px minmax(120px,1.1fr);gap:9px;align-items:center;padding:8px 10px;border-radius:11px;background:rgba(255,255,255,.025)}.trajectory-skill-row span{font-size:11px}.trajectory-skill-row b{color:#fff2bd;text-align:center}.trajectory-skill-row em{color:var(--muted);font-size:10px;font-style:normal;text-align:right} .trajectory-legend{display:flex;gap:16px;flex-wrap:wrap;margin:14px 0 2px;color:var(--muted);font-size:11px}.trajectory-legend span:before{content:"";display:inline-block;width:18px;height:3px;margin-right:6px;border-radius:3px;vertical-align:middle}.trajectory-legend .technique:before{background:#69c5ff}.trajectory-legend .consistency:before{background:#f6dda4}.trajectory-legend .freedom:before{background:#9af0c0} .trajectory-chart-gridline{stroke:rgba(255,255,255,.08);stroke-width:1}.trajectory-chart-axislabel{fill:#7890a2;font-size:10px;font-family:'Segoe UI',Tahoma,Arial,sans-serif}.trajectory-line-technique{fill:none;stroke:#69c5ff;stroke-width:3}.trajectory-line-consistency{fill:none;stroke:#f6dda4;stroke-width:3}.trajectory-line-freedom{fill:none;stroke:#9af0c0;stroke-width:3}.trajectory-point-technique{fill:#69c5ff}.trajectory-point-consistency{fill:#f6dda4}.trajectory-point-freedom{fill:#9af0c0}.trajectory-history-note{margin:4px 0 0;color:var(--muted);font-size:11px;line-height:1.55} .trajectory-next-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}.trajectory-next-card{padding:16px;border-radius:15px;border:1px solid rgba(246,221,164,.15);background:linear-gradient(145deg,rgba(246,221,164,.065),rgba(105,197,255,.035))}.trajectory-next-card small{display:block;color:var(--gold2);font-size:10px;font-weight:800;letter-spacing:.08em}.trajectory-next-card strong{display:block;margin:6px 0 8px;font-size:16px}.trajectory-next-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.6} @media(max-width:1050px){.trajectory-position-grid,.trajectory-chart-grid{grid-template-columns:1fr}.trajectory-readiness-card{display:grid;grid-template-columns:1fr auto;column-gap:16px}.trajectory-readiness-card>small,.trajectory-readiness-card>strong,.trajectory-readiness-card>p{grid-column:1}.trajectory-position-number{grid-column:2;grid-row:1/4;margin:0;min-width:140px}.trajectory-next-grid{grid-template-columns:1fr}} @media(max-width:650px){.trajectory-stage-path{gap:3px}.trajectory-stage-node{font-size:8px}.trajectory-skill-row{grid-template-columns:1fr 44px}.trajectory-skill-row em{grid-column:1/-1;text-align:left}.trajectory-readiness-card{display:block}.trajectory-position-number{margin-top:14px}.trajectory-radar-wrap,.trajectory-trend-wrap{min-height:210px}} @media print{.trajectory-section{background:#fff!important;border:1px solid #bbb!important}.trajectory-position-card,.trajectory-readiness-card,.trajectory-chart-card,.trajectory-next-card{background:#fff!important;border-color:#ccc!important}.trajectory-position-card>p,.trajectory-readiness-card>p,.trajectory-history-note,.trajectory-next-card p,.trajectory-skill-row em{color:#444!important}.trajectory-position-card>strong,.trajectory-readiness-card>strong,.trajectory-card-head strong,.trajectory-next-card strong{color:#111!important}.trajectory-stage-node{color:#555!important}.trajectory-stage-node.current{color:#7a5a11!important}.trajectory-radar-area{fill:rgba(80,120,150,.12)!important}.trajectory-svg-label{fill:#222!important}.trajectory-chart-axislabel{fill:#555!important}} /* V7.0.9 · Passive Fach profile */ .fach-hero{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;align-items:center;padding:28px;background:radial-gradient(circle at 88% 15%,rgba(211,168,86,.20),transparent 36%),linear-gradient(145deg,rgba(12,30,43,.98),rgba(7,18,28,.98))}.fach-hero h3{font-size:clamp(1.65rem,3vw,2.35rem);margin:.35rem 0 .65rem}.fach-hero p{max-width:820px;line-height:1.75}.fach-hero-badge{border:1px solid rgba(219,180,102,.34);border-radius:20px;padding:20px;background:rgba(0,0,0,.18);display:grid;gap:8px}.fach-hero-badge strong{font-size:1.45rem}.fach-hero-badge span{color:var(--gold);font-weight:750}.fach-hero-badge small{color:var(--muted)} .fach-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}.fach-layout .span-2{grid-column:1/-1}.fach-primary-card,.fach-description-card,.fach-evidence-card,.fach-suggestion-card,.fach-protocol-card{padding:22px}.fach-card-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:18px}.fach-card-head small{display:block;color:var(--gold);font-weight:800;letter-spacing:.08em}.fach-card-head h4{font-size:1.25rem;margin:.25rem 0 0}.fach-card-head p{margin:.4rem 0 0;color:var(--muted);line-height:1.55}.fach-primary-score{display:flex;gap:18px;align-items:center;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:18px;background:rgba(255,255,255,.025)}.fach-primary-score>div{min-width:120px;text-align:center}.fach-primary-score strong{font-size:2.4rem;display:block;color:var(--gold)}.fach-primary-score span{font-size:.78rem;color:var(--muted)}.fach-primary-score p{margin:0;line-height:1.65}.fach-candidate-list{display:grid;gap:10px;margin:16px 0}.fach-candidate{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:13px 14px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.02)}.fach-candidate.primary{border-color:rgba(219,180,102,.45);background:rgba(219,180,102,.07)}.fach-candidate>span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.07)}.fach-candidate div{display:grid;gap:2px}.fach-candidate small{color:var(--muted)}.fach-candidate b{font-size:1.1rem}.fach-description-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.fach-description-item{padding:15px;border-radius:15px;border:1px solid rgba(255,255,255,.075);background:rgba(255,255,255,.02)}.fach-description-item small{color:var(--muted);display:block}.fach-description-item strong{display:block;margin:.35rem 0;font-size:1.02rem}.fach-description-item p{margin:0;color:var(--muted);line-height:1.5;font-size:.9rem}.fach-evidence-columns{display:grid;grid-template-columns:1fr 1fr;gap:20px}.fach-evidence-columns h5{margin:0 0 10px}.fach-evidence-columns ul{margin:0;padding-left:20px;display:grid;gap:9px;line-height:1.55}.fach-recommendation{font-size:1.08rem;line-height:1.75;padding:18px;border-left:4px solid var(--gold);background:rgba(219,180,102,.06);border-radius:0 14px 14px 0}.fach-protocol-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.fach-protocol-step{display:flex;flex-direction:column;gap:10px;padding:15px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.02)}.fach-protocol-step>span{font-size:1.25rem;color:var(--muted)}.fach-protocol-step.complete{border-color:rgba(91,190,137,.35);background:rgba(91,190,137,.06)}.fach-protocol-step.complete>span{color:var(--green)}.fach-protocol-step div{flex:1}.fach-protocol-step strong{display:block;margin-bottom:6px}.fach-protocol-step p{color:var(--muted);font-size:.88rem;line-height:1.48;margin:0 0 8px}.fach-protocol-step small{color:var(--muted)} .fach-formula-card{padding:22px}.fach-formula-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:22px}.fach-formula-layout h5{margin:0 0 12px}.fach-formula-list{display:grid;gap:9px}.fach-formula-row{display:grid;grid-template-columns:minmax(180px,1fr) 52px;gap:4px 12px;padding:12px 14px;border:1px solid rgba(255,255,255,.075);border-radius:13px;background:rgba(255,255,255,.02)}.fach-formula-row span{font-weight:720}.fach-formula-row b{color:var(--gold);text-align:right}.fach-formula-row small{grid-column:1/-1;color:var(--muted);line-height:1.45}.fach-confidence-formula{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.fach-confidence-chip{display:flex;justify-content:space-between;gap:8px;padding:12px;border:1px solid rgba(255,255,255,.075);border-radius:13px;background:rgba(255,255,255,.02)}.fach-confidence-chip span{font-size:.9rem}.fach-confidence-chip b{color:var(--gold)} .report-fach-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.report-fach-grid article{padding:18px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.025)}.report-fach-grid small{color:var(--gold);font-weight:800}.report-fach-grid strong{display:block;font-size:1.2rem;margin:.45rem 0}.report-fach-grid p{margin:0;line-height:1.65;color:var(--muted)} @media(max-width:1100px){.fach-protocol-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fach-protocol-step:last-child{grid-column:1/-1}}@media(max-width:820px){.fach-hero,.fach-layout,.fach-evidence-columns,.fach-formula-layout,.report-fach-grid{grid-template-columns:1fr}.fach-layout .span-2{grid-column:auto}.fach-description-grid{grid-template-columns:1fr}.fach-protocol-grid{grid-template-columns:1fr}.fach-protocol-step:last-child{grid-column:auto}.fach-card-head,.fach-primary-score{flex-direction:column}.fach-hero-badge{width:100%}} @media(max-width:560px){.fach-confidence-formula{grid-template-columns:1fr}.fach-formula-row{grid-template-columns:1fr auto}} /* V7.0.20: tách piano, minh họa ghép âm, đường chuyển động và mẫu ca sĩ tham khảo */ .technique-sample-btn{width:auto;min-width:108px;padding:0 14px;font-size:.88rem;line-height:1.15;white-space:nowrap} @media (max-width:640px){.technique-sample-btn{min-width:96px;padding:0 10px;font-size:.82rem}} /* V7.0.20 · phân tách âm thanh luyện tập và thư viện ca sĩ tham khảo */ .practice-audio-card{align-items:flex-start;gap:18px} .practice-audio-meaning{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.practice-audio-meaning span{padding:6px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);font-size:10px;color:var(--muted)}.practice-audio-meaning b{color:#e9d08f} .articulation-guide-btn,.movement-guide-btn{width:auto;min-width:128px;padding:0 14px;font-size:.84rem;line-height:1.15;white-space:nowrap} .personal-demo-card{display:flex;justify-content:space-between;align-items:center;gap:18px;margin:12px 0 18px;padding:16px 18px;border-radius:16px;border:1px solid rgba(157,198,221,.16);background:linear-gradient(145deg,rgba(12,31,46,.78),rgba(7,20,31,.72))}.personal-demo-card small{display:block;color:var(--gold2);font-size:9px;font-weight:800;letter-spacing:.11em}.personal-demo-card strong{display:block;margin:4px 0 5px;font-size:14px}.personal-demo-card p{margin:0;color:var(--muted);font-size:11px;line-height:1.55}.personal-demo-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.personal-demo-actions .btn{font-size:10px;padding:9px 11px} .theory-singer-library{margin:22px 0 4px;padding:18px;border-radius:17px;border:1px solid rgba(229,196,122,.22);background:linear-gradient(145deg,rgba(62,47,20,.19),rgba(10,27,40,.82))}.theory-singer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}.theory-singer-head small{display:block;color:var(--gold2);font-size:9px;font-weight:800;letter-spacing:.11em}.theory-singer-head strong{display:block;margin-top:4px;font-size:17px}.theory-singer-head>span{padding:6px 9px;border-radius:999px;background:rgba(255,171,100,.08);border:1px solid rgba(255,171,100,.22);font-size:9px;color:#ffd3a0;white-space:nowrap}.theory-singer-library>p{margin:10px 0 14px;color:var(--muted);font-size:11px;line-height:1.6}.singer-reference-list{display:grid;gap:10px}.singer-reference-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;padding:13px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.075);background:rgba(255,255,255,.025)}.singer-reference-card div{display:grid;gap:3px}.singer-reference-card small{font-size:9px;color:var(--gold2);font-weight:750}.singer-reference-card strong{font-size:13px}.singer-reference-card span{font-size:10px;color:var(--muted)}.singer-reference-card p{grid-column:1/-1;margin:0;color:var(--muted);font-size:10px;line-height:1.5}.singer-reference-card .btn{align-self:center;font-size:10px;padding:8px 11px}.singer-reference-card .btn.playing{border-color:rgba(109,225,167,.45);color:#9ee5c2}.theory-singer-status{margin-top:10px;font-size:10px;color:var(--muted)} @media(max-width:760px){.practice-audio-card,.personal-demo-card,.theory-singer-head{display:grid}.personal-demo-actions{justify-content:flex-start}.singer-reference-card{grid-template-columns:1fr}.singer-reference-card .btn{justify-self:start}.singer-reference-card p{grid-column:auto}.theory-singer-head>span{justify-self:start}.articulation-guide-btn,.movement-guide-btn{min-width:110px}} /* V7.0.20: nguồn nghe được kiểm tra theo nội dung lý thuyết */ .singer-reference-card.external{border-style:dashed}.singer-reference-card.empty{grid-template-columns:1fr;background:rgba(255,255,255,.025)} .reference-match{display:inline-flex;width:max-content;margin-top:7px;padding:3px 8px;border-radius:999px;font-style:normal;font-size:.72rem;font-weight:700;letter-spacing:.02em;border:1px solid rgba(255,255,255,.16)} .reference-match.curated{background:rgba(88,184,162,.18);border-color:rgba(88,184,162,.34)}.reference-match.exact{background:rgba(74,183,132,.14)}.reference-match.controlled{background:rgba(214,169,79,.13)}.reference-match.context{background:rgba(128,150,190,.12)} .singer-reference-open{white-space:nowrap} /* V7.0.20 · thư viện mẫu ca sĩ chỉ xuất hiện khi có nguồn phù hợp */ .theory-singer-library[hidden]{display:none!important} .reference-citation{display:block;grid-column:1/-1;line-height:1.45;opacity:.78} .reference-links{display:flex;gap:.75rem;grid-column:1/-1;flex-wrap:wrap} .reference-source-link{font-size:.84rem;font-weight:700;text-decoration:underline;text-underline-offset:3px} /* V7.0.26 · Hướng dẫn sử dụng toàn ứng dụng */ .help-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;padding:30px;background:linear-gradient(135deg,rgba(20,48,71,.98),rgba(8,22,35,.98) 62%,rgba(50,37,19,.92));border-color:rgba(246,221,164,.22);overflow:hidden;position:relative} .help-hero:after{content:"?";position:absolute;right:165px;top:-52px;color:rgba(246,221,164,.055);font-size:240px;font-weight:800;line-height:1;pointer-events:none}.help-hero h3{margin:7px 0 11px;font-size:clamp(31px,4vw,49px);line-height:1.08}.help-hero p{max-width:880px;margin:0;color:var(--muted);font-size:15px;line-height:1.75}.help-hero-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}.help-version-badge{position:relative;z-index:1;min-width:170px;padding:22px;border:1px solid rgba(246,221,164,.28);border-radius:20px;background:rgba(4,14,23,.68);text-align:center}.help-version-badge small,.help-version-badge span,.help-version-badge strong{display:block}.help-version-badge small{color:var(--gold2);font-size:9px;letter-spacing:.15em}.help-version-badge strong{margin:7px 0;font-size:27px;color:#fff0bd}.help-version-badge span{color:var(--muted);font-size:11px} .help-quick-card{margin-top:18px;padding:24px}.help-step-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.help-step-grid>div{position:relative;padding:18px 17px 17px 54px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.027)}.help-step-grid>div>span{position:absolute;left:16px;top:17px;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:rgba(105,197,255,.13);border:1px solid rgba(105,197,255,.25);color:var(--blue);font-weight:800}.help-step-grid strong{display:block;margin-bottom:5px}.help-step-grid p{margin:0;color:var(--muted);font-size:12px;line-height:1.62}.help-step-grid code,.help-section code{padding:2px 5px;border-radius:6px;background:rgba(255,255,255,.06);color:#dff3ff} .help-search-card{display:grid;grid-template-columns:minmax(260px,1fr) auto auto;align-items:end;gap:11px;margin-top:18px;padding:18px}.help-search-card label span{display:block;margin-bottom:6px;color:var(--muted);font-size:11px;font-weight:700}.help-search-card input{width:100%}.help-search-card>span{align-self:center;color:var(--muted);font-size:11px} .help-layout{display:grid;grid-template-columns:245px minmax(0,1fr);gap:16px;margin-top:18px;align-items:start}.help-toc{position:sticky;top:82px;padding:17px}.help-toc small{display:block;margin:0 8px 8px;color:var(--gold2);font-weight:800;letter-spacing:.14em}.help-toc a{display:block;padding:9px 10px;border-radius:10px;color:var(--muted);font-size:11px;text-decoration:none}.help-toc a:hover{background:rgba(105,197,255,.07);color:var(--text)}.help-content{display:grid;gap:14px}.help-section{scroll-margin-top:90px;display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;padding:23px}.help-section-number{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;border:1px solid rgba(246,221,164,.22);background:rgba(246,221,164,.075);color:var(--gold2);font-size:12px;font-weight:800}.help-section h3{margin:5px 0 13px;font-size:23px}.help-section p,.help-section li{color:var(--muted);font-size:13px;line-height:1.68}.help-section ol,.help-section ul{margin:0 0 14px;padding-left:21px}.help-section li+li{margin-top:7px}.help-section b,.help-section strong{color:var(--text)} .help-info-grid,.help-page-grid,.help-metric-grid,.help-two-column,.help-stop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0 16px}.help-info-grid>div,.help-page-grid>div,.help-metric-grid>div,.help-two-column>div,.help-stop-grid>div{padding:14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025)}.help-info-grid strong,.help-page-grid b,.help-metric-grid b,.help-two-column strong,.help-stop-grid strong{display:block;margin-bottom:5px}.help-info-grid p,.help-two-column p,.help-stop-grid p{margin:0}.help-page-grid span,.help-metric-grid span{display:block;color:var(--muted);font-size:11px;line-height:1.58}.help-page-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .help-audio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.help-audio-grid>div{position:relative;padding:16px 15px 15px 58px;border-radius:15px;border:1px solid var(--line);background:rgba(255,255,255,.028)}.help-audio-icon{position:absolute;left:14px;top:15px;width:33px;height:33px;border-radius:11px;display:grid;place-items:center;background:rgba(105,197,255,.10);color:var(--blue);font-size:10px;font-weight:900}.help-audio-grid strong{display:block}.help-audio-grid p{margin:5px 0 0;font-size:11px}.help-audio-grid>div:last-child{grid-column:1/-1}.help-callout{display:grid;gap:4px;margin-top:14px;padding:13px 15px;border-radius:14px;border:1px solid rgba(105,197,255,.19);background:rgba(105,197,255,.055)}.help-callout.warning{border-color:rgba(229,196,122,.22);background:rgba(229,196,122,.055)}.help-callout span{color:var(--muted);font-size:11px;line-height:1.55}.help-note{padding:12px 14px;border-left:3px solid rgba(105,197,255,.5);background:rgba(105,197,255,.045);border-radius:0 12px 12px 0}.help-command-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:13px 0}.help-command-grid span{padding:10px 12px;border:1px solid var(--line);border-radius:12px;color:var(--muted);font-size:11px}.help-command-grid b{color:#fff0b9;margin-right:5px}.help-faq-list{display:grid;gap:8px}.help-faq-list details{border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.025);padding:0 14px}.help-faq-list summary{cursor:pointer;padding:13px 0;font-weight:700}.help-faq-list details p{margin:0;padding:0 0 13px}.help-footer-card{margin-top:18px;padding:25px;text-align:center;border-color:rgba(246,221,164,.20);background:linear-gradient(135deg,rgba(229,196,122,.07),rgba(105,197,255,.045))}.help-footer-card h3{margin:7px auto 9px;max-width:900px;font-size:27px}.help-footer-card p{max-width:920px;margin:0 auto;color:var(--muted);line-height:1.75}.help-search-item[hidden]{display:none!important} @media(max-width:1050px){.help-layout{grid-template-columns:1fr}.help-toc{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.help-toc small{grid-column:1/-1}.help-step-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.help-hero{grid-template-columns:1fr}.help-version-badge{justify-self:start}} @media(max-width:760px){.help-search-card{grid-template-columns:1fr}.help-search-card .btn{width:100%}.help-toc{grid-template-columns:repeat(2,minmax(0,1fr))}.help-step-grid,.help-info-grid,.help-page-grid,.help-metric-grid,.help-two-column,.help-stop-grid,.help-audio-grid{grid-template-columns:1fr}.help-audio-grid>div:last-child{grid-column:auto}.help-command-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.help-section{grid-template-columns:1fr;padding:19px}.help-section-number{width:38px;height:38px}.help-hero{padding:23px 20px}.help-hero:after{display:none}.help-footer-card h3{font-size:22px}} @media(max-width:430px){.help-toc,.help-command-grid{grid-template-columns:1fr}.help-hero-actions,.help-hero-actions .btn{width:100%}} /* ========================================================================== V7.0.26 · Studio Design System Visual overhaul only. Scoring, curriculum and audio behavior are unchanged. ========================================================================== */ body.studio-design{ --bg:#05090e; --bg2:#08111a; --panel:#0b1722; --panel2:#102333; --panel3:#142c3f; --text:#f4f7f9; --muted:#a9b8c3; --muted-2:#7f93a2; --gold:#d8b46a; --gold2:#f0d596; --blue:#70c8f8; --cyan:#78dfd0; --green:#76dca7; --amber:#f3bb68; --red:#f17f87; --line:rgba(197,220,235,.105); --line-strong:rgba(197,220,235,.18); --surface:linear-gradient(145deg,rgba(15,31,45,.96),rgba(7,16,25,.985)); --surface-raised:linear-gradient(145deg,rgba(20,42,60,.97),rgba(9,21,32,.985)); --shadow:0 18px 48px rgba(0,0,0,.28),0 2px 8px rgba(0,0,0,.22); --shadow-high:0 30px 80px rgba(0,0,0,.42),0 4px 18px rgba(0,0,0,.28); --radius:20px; --font-ui:"Segoe UI Variable Text","Segoe UI",Tahoma,Arial,sans-serif; --font-display:"Segoe UI Variable Display","Segoe UI",Tahoma,Arial,sans-serif; font-size:15px; color-scheme:dark; background: radial-gradient(circle at 92% -5%,rgba(65,154,212,.16),transparent 31%), radial-gradient(circle at 9% 8%,rgba(216,180,106,.08),transparent 24%), linear-gradient(180deg,#05090e 0%,#050b12 48%,#03070b 100%); } body.studio-design::before{ content:""; position:fixed; inset:0; pointer-events:none; opacity:.22; z-index:-1; background-image:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.01) 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(to bottom,black,transparent 82%); } body.studio-design *{scrollbar-width:thin;scrollbar-color:rgba(112,200,248,.28) rgba(255,255,255,.025)} body.studio-design *::-webkit-scrollbar{width:9px;height:9px} body.studio-design *::-webkit-scrollbar-track{background:rgba(255,255,255,.025)} body.studio-design *::-webkit-scrollbar-thumb{background:rgba(112,200,248,.25);border:2px solid transparent;background-clip:padding-box;border-radius:999px} body.studio-design h1,body.studio-design h2,body.studio-design h3,body.studio-design h4{font-family:var(--font-display);letter-spacing:-.015em} body.studio-design a{color:var(--blue);text-underline-offset:3px} body.studio-design button,body.studio-design a,body.studio-design input,body.studio-design select,body.studio-design textarea{transition:border-color .18s ease,background-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease,opacity .18s ease} body.studio-design button:active{transform:translateY(1px)} body.studio-design button:focus-visible,body.studio-design input:focus-visible,body.studio-design select:focus-visible,body.studio-design textarea:focus-visible,body.studio-design a:focus-visible{outline:3px solid rgba(112,200,248,.4);outline-offset:3px} /* Shell */ body.studio-design .app{grid-template-columns:276px minmax(0,1fr)} body.studio-design .main{background:transparent} body.studio-design .sidebar{ width:auto; display:flex; flex-direction:column; height:100vh; padding:20px 15px 16px; overflow:hidden; border-right:1px solid rgba(174,207,227,.12); background:linear-gradient(180deg,rgba(7,15,23,.965),rgba(4,10,16,.985)); backdrop-filter:blur(28px) saturate(135%); box-shadow:18px 0 60px rgba(0,0,0,.18),inset -1px 0 rgba(255,255,255,.018); } body.studio-design .brand{padding:7px 9px 21px;gap:14px;border-bottom:1px solid rgba(255,255,255,.055);margin-bottom:13px} body.studio-design .brand-mark{ width:52px;height:52px;border-radius:17px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 14px 30px rgba(0,0,0,.42),0 0 0 5px rgba(216,180,106,.035); } body.studio-design .brand h1{font-size:21px;font-weight:720;line-height:1.05} body.studio-design .brand p{font-size:10.5px;line-height:1.45;color:var(--muted-2)} body.studio-design .v7-mark{display:inline-flex;align-items:center;justify-content:center;margin-left:3px;padding:3px 6px;border:1px solid rgba(216,180,106,.28);border-radius:999px;background:rgba(216,180,106,.08);color:var(--gold2);font-size:8px;vertical-align:middle;letter-spacing:.05em} body.studio-design .nav{display:grid;gap:4px;min-height:0;overflow-y:auto;padding:0 4px 10px 0} body.studio-design .nav button{ position:relative; min-height:48px; margin:0; padding:10px 12px; gap:12px; border:1px solid transparent; border-radius:13px; color:#9fb1bd; font-size:13.5px; font-weight:600; } body.studio-design .nav button::before{content:"";position:absolute;left:-1px;top:10px;bottom:10px;width:3px;border-radius:0 4px 4px 0;background:transparent} body.studio-design .nav button:hover{background:rgba(112,200,248,.055);border-color:rgba(112,200,248,.08);color:#eaf4fa;transform:translateX(2px)} body.studio-design .nav button.active{ color:#fff; border-color:rgba(112,200,248,.16); background:linear-gradient(90deg,rgba(112,200,248,.135),rgba(216,180,106,.045)); box-shadow:inset 0 1px rgba(255,255,255,.035),0 8px 22px rgba(0,0,0,.14); } body.studio-design .nav button.active::before{background:linear-gradient(180deg,var(--blue),var(--gold2));box-shadow:0 0 16px rgba(112,200,248,.55)} body.studio-design .nav .ico{ width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center; border-radius:10px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.055); color:#c6d9e5;font-size:14px; } body.studio-design .nav button.active .ico{background:linear-gradient(145deg,rgba(112,200,248,.17),rgba(216,180,106,.09));border-color:rgba(112,200,248,.19);color:#fff1c2} body.studio-design .nav-group-label{padding:17px 12px 6px;color:#718794;font-size:9px;letter-spacing:.16em;font-weight:800;text-transform:uppercase} body.studio-design .side-progress{position:static;flex:none;margin-top:auto;padding:15px 16px;border-radius:16px;border-color:rgba(112,200,248,.13);background:linear-gradient(145deg,rgba(18,42,59,.8),rgba(7,18,27,.94));box-shadow:inset 0 1px rgba(255,255,255,.035)} body.studio-design .side-progress small{font-size:10px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.09em} body.studio-design .side-progress strong{font-size:14px} body.studio-design .mini-track{height:6px;background:rgba(255,255,255,.055)} body.studio-design .mini-track span{background:linear-gradient(90deg,#5eb8ec,#8de0d0 58%,#e8ca82);box-shadow:0 0 14px rgba(112,200,248,.35)} /* Command bar */ body.studio-design .topbar{ height:auto;min-height:86px; display:grid; grid-template-columns:minmax(220px,1fr) minmax(0,auto); grid-template-rows:auto auto; column-gap:24px; padding:15px 28px; border-bottom-color:rgba(176,208,227,.12); background:rgba(5,11,17,.79); backdrop-filter:blur(26px) saturate(130%); box-shadow:0 10px 30px rgba(0,0,0,.12); } body.studio-design .topbar h2{grid-column:1;grid-row:1;margin:0;font-size:22px;font-weight:720;line-height:1.15} body.studio-design .topbar-subtitle{grid-column:1;grid-row:2;margin:4px 0 0;color:var(--muted-2);font-size:11.5px;line-height:1.35} body.studio-design .top-actions{grid-column:2;grid-row:1/3;margin:0;max-width:none;align-self:center;gap:7px;row-gap:7px} body.studio-design .pill,body.studio-design .autopilot-toggle,body.studio-design .audio-unlock,body.studio-design .view-mode-switch{ min-height:38px; border-color:rgba(190,215,229,.12); background:rgba(255,255,255,.035); box-shadow:inset 0 1px rgba(255,255,255,.025); } body.studio-design .pill{display:inline-flex;align-items:center;padding:8px 11px;font-size:10.5px;color:#aab9c3} body.studio-design .autopilot-toggle{min-inline-size:184px;padding:8px 12px;color:#e7ca86;background:rgba(216,180,106,.055);font-size:10.5px} body.studio-design .audio-unlock{border:1px solid rgba(112,200,248,.22);border-radius:999px;padding:8px 13px;color:#eaf7ff;background:rgba(112,200,248,.08);font-weight:700} body.studio-design .view-mode-switch{display:flex;gap:3px;padding:3px;border-radius:999px} body.studio-design .view-mode-btn{min-height:30px;border:0;border-radius:999px;padding:6px 11px;background:transparent;color:var(--muted-2);font-size:10px;font-weight:700} body.studio-design .view-mode-btn.active{background:linear-gradient(135deg,rgba(112,200,248,.19),rgba(216,180,106,.10));color:#fff;box-shadow:inset 0 0 0 1px rgba(112,200,248,.15)} /* Content and surfaces */ body.studio-design .content{max-width:1580px;padding:30px 32px 72px} body.studio-design .page.active{animation:studioPageIn .28s ease both} @keyframes studioPageIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} body.studio-design .card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:clip} body.studio-design .card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 1px rgba(255,255,255,.028)} body.studio-design .panel{padding:24px} body.studio-design .eyebrow{color:#e6c77d;font-size:9.5px;letter-spacing:.16em;font-weight:800} body.studio-design .section-title{align-items:flex-start;margin-bottom:17px} body.studio-design .section-title h3{font-size:21px;font-weight:700} body.studio-design .section-title p{font-size:12.5px;line-height:1.55;color:var(--muted-2)} body.studio-design .tag{border-color:rgba(216,180,106,.2);background:rgba(216,180,106,.07);color:#ead08f;font-weight:700} /* Buttons and inputs */ body.studio-design .btn{ min-height:44px; display:inline-flex;align-items:center;justify-content:center; padding:10px 17px; border:1px solid rgba(245,214,145,.24); border-radius:12px; color:#151009; background:linear-gradient(135deg,#f0d596,#cda75b); box-shadow:0 10px 24px rgba(203,160,78,.16),inset 0 1px rgba(255,255,255,.32); font-size:13px;font-weight:760; } body.studio-design .btn:hover:not(:disabled){filter:brightness(1.045);transform:translateY(-1px);box-shadow:0 14px 30px rgba(203,160,78,.22),inset 0 1px rgba(255,255,255,.35)} body.studio-design .btn.secondary{color:#eef6fa;background:rgba(255,255,255,.045);border-color:rgba(191,216,230,.13);box-shadow:inset 0 1px rgba(255,255,255,.025)} body.studio-design .btn.secondary:hover:not(:disabled),body.studio-design .btn.ghost:hover:not(:disabled){background:rgba(112,200,248,.085);border-color:rgba(112,200,248,.24)} body.studio-design .btn.blue{color:#06121a;background:linear-gradient(135deg,#8ad7ff,#4ba6d8);border-color:rgba(138,215,255,.35)} body.studio-design .btn.ghost{color:#b8c6ce;background:transparent;border-color:rgba(191,216,230,.13)} body.studio-design .btn.danger,body.studio-design .danger-soft{color:#fff;background:rgba(241,127,135,.1);border-color:rgba(241,127,135,.25);box-shadow:none} body.studio-design .btn-large{min-height:50px;padding-inline:20px} body.studio-design input,body.studio-design select,body.studio-design textarea{ min-height:44px; border:1px solid rgba(190,216,231,.14); border-radius:12px; background:rgba(3,10,16,.56); color:var(--text); padding:10px 12px; box-shadow:inset 0 1px 3px rgba(0,0,0,.22); } body.studio-design input:hover,body.studio-design select:hover,body.studio-design textarea:hover{border-color:rgba(112,200,248,.24)} body.studio-design input:focus,body.studio-design select:focus,body.studio-design textarea:focus{border-color:rgba(112,200,248,.48);background:rgba(5,15,23,.72);box-shadow:0 0 0 4px rgba(112,200,248,.07)} /* Home */ body.studio-design .home-hero{grid-template-columns:minmax(0,1.52fr) minmax(310px,.48fr);gap:18px} body.studio-design .home-hero-main{ min-height:360px; padding:clamp(30px,3.4vw,50px); border-color:rgba(190,216,231,.13); background: radial-gradient(circle at 83% 18%,rgba(112,200,248,.20),transparent 33%), radial-gradient(circle at 69% 88%,rgba(216,180,106,.10),transparent 30%), linear-gradient(126deg,rgba(13,35,50,.99),rgba(7,19,29,.99) 63%,rgba(23,20,13,.98)); box-shadow:var(--shadow-high); } body.studio-design .home-hero-main::before{ content:""; position:absolute;inset:0; background: repeating-linear-gradient(to bottom,transparent 0,transparent 37px,rgba(240,213,150,.035) 38px,transparent 39px), linear-gradient(110deg,transparent 58%,rgba(255,255,255,.025) 58.3%,transparent 58.7%); mask-image:linear-gradient(90deg,transparent 25%,black 65%,transparent 100%); } body.studio-design .home-hero-main::after{content:"♪";position:absolute;right:5%;bottom:-18%;font-family:Georgia,serif;font-size:260px;line-height:1;color:rgba(240,213,150,.04);transform:rotate(-8deg);pointer-events:none} body.studio-design .home-hero-main h3{max-width:950px;margin:16px 0 18px;font-size:clamp(36px,4vw,58px);line-height:1.035;font-weight:690;letter-spacing:-.038em;text-wrap:balance} body.studio-design .home-hero-main h3 span{background:linear-gradient(90deg,#f4dda2,#d2b066);-webkit-background-clip:text;background-clip:text;color:transparent} body.studio-design .home-hero-main p{max-width:850px;color:#bccbd4;font-size:15.5px;line-height:1.72} body.studio-design .home-primary-actions{gap:9px;margin-top:28px} body.studio-design .selection-notice{padding-top:14px;border-top:1px solid rgba(255,255,255,.06);color:#879aa7;font-size:10.5px} body.studio-design .readiness-compact{padding:25px;background:linear-gradient(160deg,rgba(17,37,52,.98),rgba(6,16,24,.99));border-color:rgba(112,200,248,.12)} body.studio-design .readiness-ring{background:conic-gradient(var(--green) 0 82%,rgba(255,255,255,.055) 82%);box-shadow:0 0 0 7px rgba(118,220,167,.028)} body.studio-design .readiness-ring::before{background:#0b1924} body.studio-design .readiness-rule{background:rgba(118,220,167,.045);border-color:rgba(118,220,167,.13)} body.studio-design .daily-technique-card{padding:clamp(25px,3vw,38px);background:linear-gradient(135deg,rgba(16,39,56,.985),rgba(7,18,27,.99));border-color:rgba(216,180,106,.15)} body.studio-design .daily-technique-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--gold2),var(--blue));opacity:.75} body.studio-design .daily-technique-card h3{font-size:clamp(25px,2.6vw,36px)} body.studio-design .technique-instruction-grid section{border:1px solid rgba(190,216,231,.09);background:rgba(255,255,255,.022);border-radius:15px;padding:16px} body.studio-design .technique-instruction-grid section:hover{border-color:rgba(112,200,248,.16);background:rgba(112,200,248,.035)} body.studio-design .technique-instruction-grid .technique-step-main{background:linear-gradient(145deg,rgba(112,200,248,.09),rgba(216,180,106,.04));border-color:rgba(112,200,248,.18)} body.studio-design .home-learning-preview{border-color:rgba(112,200,248,.13);background:linear-gradient(120deg,rgba(12,31,45,.98),rgba(7,17,26,.985))} body.studio-design .home-learning-ornament{color:var(--gold2);filter:drop-shadow(0 0 16px rgba(216,180,106,.25))} body.studio-design .home-status-row{gap:13px} body.studio-design .home-stat{padding:19px 20px;border-radius:17px} body.studio-design .home-stat::before{content:"";position:absolute;left:20px;right:20px;top:0;height:2px;background:linear-gradient(90deg,var(--blue),transparent);opacity:.55} body.studio-design .home-stat strong{font-size:25px} body.studio-design .home-workspace{gap:18px} body.studio-design .group-row,body.studio-design .group-item{border-color:rgba(190,216,231,.09);background:rgba(255,255,255,.022)} body.studio-design .group-row:hover,body.studio-design .group-item:hover{background:rgba(112,200,248,.045);border-color:rgba(112,200,248,.16);transform:translateY(-1px)} body.studio-design .group-row .num{background:linear-gradient(145deg,rgba(112,200,248,.13),rgba(216,180,106,.045));border:1px solid rgba(112,200,248,.12)} /* Practice */ body.studio-design .practice-layout{grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start} body.studio-design .practice-stage{padding:27px;min-height:720px;border-color:rgba(112,200,248,.13);box-shadow:var(--shadow-high)} body.studio-design .practice-head{padding-bottom:18px;border-bottom:1px solid rgba(190,216,231,.08)} body.studio-design .practice-head h3{font-size:30px;font-weight:700} body.studio-design .practice-head p{font-size:13px;color:#9fb0bb} body.studio-design .group-rail{gap:7px;margin:18px 0} body.studio-design .rail-node{min-height:54px;border-color:rgba(190,216,231,.09);background:rgba(255,255,255,.022)} body.studio-design .rail-node.active{border-color:rgba(112,200,248,.27);background:linear-gradient(145deg,rgba(112,200,248,.115),rgba(216,180,106,.045));box-shadow:0 8px 20px rgba(0,0,0,.12)} body.studio-design .sample-card{padding:16px 17px;border-color:rgba(112,200,248,.14);background:linear-gradient(135deg,rgba(112,200,248,.065),rgba(216,180,106,.03))} body.studio-design .sample-btn{width:48px;height:48px;border-radius:13px;border-color:rgba(190,216,231,.13);background:rgba(255,255,255,.035)} body.studio-design .sample-btn:hover{background:rgba(112,200,248,.10);border-color:rgba(112,200,248,.25);transform:translateY(-1px)} body.studio-design .exercise-sound-banner{border-color:rgba(216,180,106,.24);background:linear-gradient(135deg,rgba(216,180,106,.09),rgba(112,200,248,.04));box-shadow:none} body.studio-design .exercise-sound-key strong{color:#f5dfaa} body.studio-design .target-line{padding:12px 0} body.studio-design .note-chip{min-width:48px;height:44px;border-radius:12px;background:rgba(112,200,248,.085);border-color:rgba(112,200,248,.16);box-shadow:inset 0 1px rgba(255,255,255,.03)} body.studio-design .note-chip.top{background:rgba(216,180,106,.095);border-color:rgba(216,180,106,.22)} body.studio-design .lane{height:310px;border-radius:18px;border-color:rgba(112,200,248,.14);background: linear-gradient(rgba(112,200,248,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(112,200,248,.025) 1px,transparent 1px),linear-gradient(180deg,rgba(3,11,17,.98),rgba(7,18,27,.94));background-size:36px 36px,36px 36px,auto;box-shadow:inset 0 0 40px rgba(0,0,0,.2)} body.studio-design .tiny{background:rgba(3,10,16,.8);border-color:rgba(190,216,231,.12);color:#aab9c2} body.studio-design .control-strip{bottom:10px;padding:13px 18px;border-radius:19px;border-color:rgba(112,200,248,.15);background:rgba(5,14,21,.89);box-shadow:0 20px 50px rgba(0,0,0,.38);backdrop-filter:blur(22px) saturate(130%)} body.studio-design .round-btn{border:1px solid rgba(112,200,248,.22);background:linear-gradient(145deg,rgba(112,200,248,.16),rgba(16,40,57,.92));box-shadow:0 10px 24px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.08)} body.studio-design .round-btn.record{border-color:rgba(241,127,135,.28);background:linear-gradient(145deg,rgba(241,127,135,.22),rgba(80,24,31,.9))} body.studio-design .practice-side{gap:14px} body.studio-design .side-card{padding:19px;border-radius:17px} body.studio-design .feedback,body.studio-design .reflection,body.studio-design .prompt,body.studio-design .autonomy-panel{border-color:rgba(190,216,231,.10);background:rgba(255,255,255,.022)} body.studio-design .practice-now-step{border-color:rgba(112,200,248,.11);background:rgba(112,200,248,.045)} /* Roadmap, reports and data-heavy pages */ body.studio-design .roadmap-toolbar{padding:8px;border:1px solid rgba(190,216,231,.09);border-radius:15px;background:rgba(255,255,255,.018)} body.studio-design .roadmap-grid{gap:11px} body.studio-design .day-card{min-height:120px;border-color:rgba(190,216,231,.09);background:linear-gradient(145deg,rgba(15,31,44,.96),rgba(7,17,25,.985));box-shadow:0 10px 24px rgba(0,0,0,.14)} body.studio-design .day-card:hover{border-color:rgba(112,200,248,.25);transform:translateY(-2px);box-shadow:0 17px 34px rgba(0,0,0,.22)} body.studio-design .day-card.active,body.studio-design .day-card.selected{border-color:rgba(216,180,106,.30);background:linear-gradient(145deg,rgba(40,39,27,.96),rgba(12,27,38,.985));box-shadow:0 0 0 3px rgba(216,180,106,.04),0 16px 36px rgba(0,0,0,.22)} body.studio-design .adaptive-system-strip{border-color:rgba(112,200,248,.13);background:linear-gradient(135deg,rgba(112,200,248,.045),rgba(118,220,167,.025))} body.studio-design .metric,body.studio-design .home-stat{background:linear-gradient(145deg,rgba(15,31,44,.965),rgba(7,17,25,.985));border-color:rgba(190,216,231,.09)} body.studio-design .metric strong{font-size:27px} body.studio-design table{border-collapse:separate;border-spacing:0;width:100%;overflow:hidden;border:1px solid rgba(190,216,231,.09);border-radius:14px} body.studio-design th{background:rgba(112,200,248,.055);color:#dfeaf0;font-size:10px;text-transform:uppercase;letter-spacing:.08em} body.studio-design th,body.studio-design td{padding:12px 13px;border-bottom:1px solid rgba(190,216,231,.07);text-align:left} body.studio-design tr:last-child td{border-bottom:0} body.studio-design tbody tr:hover td{background:rgba(112,200,248,.025)} /* Learning and reading */ body.studio-design .learning-hero,body.studio-design .theory-hero,body.studio-design .help-hero{background: radial-gradient(circle at 88% 16%,rgba(112,200,248,.14),transparent 32%), linear-gradient(132deg,rgba(17,40,56,.985),rgba(7,18,27,.99) 65%,rgba(31,25,14,.98));border-color:rgba(216,180,106,.16)} body.studio-design .help-hero::after{color:rgba(240,213,150,.035)} body.studio-design .help-version-badge{border-color:rgba(216,180,106,.22);background:rgba(3,11,17,.7)} body.studio-design .help-step-grid>div,body.studio-design .help-info-grid>div,body.studio-design .help-page-grid>div,body.studio-design .help-metric-grid>div,body.studio-design .help-two-column>div,body.studio-design .help-stop-grid>div,body.studio-design .help-audio-grid>div{border-color:rgba(190,216,231,.09);background:rgba(255,255,255,.019)} body.studio-design .help-toc{border-color:rgba(112,200,248,.11)} body.studio-design .help-toc a{font-size:11.5px} body.studio-design .help-toc a:hover{background:rgba(112,200,248,.065)} body.studio-design .help-section{border-color:rgba(190,216,231,.09)} body.studio-design .help-section-number{border-color:rgba(216,180,106,.22);background:rgba(216,180,106,.065)} body.studio-design .help-faq-list details{border-color:rgba(190,216,231,.09);background:rgba(255,255,255,.018)} body.studio-design .help-faq-list details[open]{border-color:rgba(112,200,248,.17);background:rgba(112,200,248,.025)} body.studio-design .help-footer-card{background:linear-gradient(135deg,rgba(216,180,106,.055),rgba(112,200,248,.03))} /* Settings, modals and author */ body.studio-design .modal-backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(10px)} body.studio-design .modal,body.studio-design .dialog{border:1px solid rgba(190,216,231,.15);background:linear-gradient(145deg,#102333,#07121c);box-shadow:0 38px 100px rgba(0,0,0,.58)} body.studio-design .author-hero{border-color:rgba(216,180,106,.14);box-shadow:var(--shadow-high)} body.studio-design .author-hero-overlay{background:linear-gradient(90deg,rgba(3,9,14,.88),rgba(3,9,14,.32),transparent);border-radius:18px;padding:20px} body.studio-design .author-bio,body.studio-design .author-philosophy,body.studio-design .author-facts{border-color:rgba(190,216,231,.10)} body.studio-design .fact-row{border-color:rgba(190,216,231,.07)} /* Responsive */ @media(max-width:1250px){ body.studio-design .app{grid-template-columns:232px minmax(0,1fr)} body.studio-design .topbar{grid-template-columns:minmax(180px,1fr) minmax(0,auto);padding-inline:22px} body.studio-design .top-actions .pill:not(#audioStatus){display:none} body.studio-design .home-hero-main h3{font-size:clamp(34px,4vw,50px)} body.studio-design .practice-layout{grid-template-columns:minmax(0,1fr) 310px} } @media(max-width:980px){ body.studio-design .topbar{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px} body.studio-design .topbar-subtitle{margin-right:auto} body.studio-design .top-actions{width:100%;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-top:7px} body.studio-design .top-actions>*{flex:none} body.studio-design .home-hero{grid-template-columns:1fr} body.studio-design .practice-layout{grid-template-columns:1fr} body.studio-design .practice-side{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:760px){ body.studio-design{font-size:15px} body.studio-design .app{display:block} body.studio-design .sidebar{position:relative;width:auto;height:auto;padding:12px;overflow:visible} body.studio-design .brand{margin-bottom:8px;padding:5px 5px 12px} body.studio-design .brand-mark{width:46px;height:46px} body.studio-design .nav{grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;padding:0;gap:6px} body.studio-design .nav button{min-height:48px;padding:8px 9px;font-size:12px} body.studio-design .nav .ico{width:27px;height:27px;flex-basis:27px} body.studio-design .nav button:hover{transform:none} body.studio-design .nav-group-label,body.studio-design .side-progress{display:none} body.studio-design .topbar{position:sticky;min-height:0;padding:12px 14px;gap:3px} body.studio-design .topbar h2{font-size:19px} body.studio-design .topbar-subtitle{font-size:10.5px;width:100%} body.studio-design .top-actions{padding-top:8px} body.studio-design .content{padding:16px 11px 56px} body.studio-design .home-hero-main{min-height:0;padding:25px 21px} body.studio-design .home-hero-main h3{font-size:clamp(31px,10vw,44px)} body.studio-design .home-hero-main p{font-size:14px} body.studio-design .home-primary-actions,body.studio-design .home-primary-actions .btn{width:100%} body.studio-design .practice-stage{padding:17px} body.studio-design .practice-head h3{font-size:25px} body.studio-design .practice-side{grid-template-columns:1fr} body.studio-design .lane{height:270px!important;min-height:270px} body.studio-design .control-strip{padding:11px 10px;border-radius:17px} body.studio-design .round-btn{width:58px;height:58px} body.studio-design .help-section{padding:18px} } @media(max-width:460px){ body.studio-design .nav{grid-template-columns:1fr 1fr} body.studio-design .nav button{font-size:11px;gap:7px} body.studio-design .brand p{display:none} body.studio-design .top-actions .autopilot-toggle{min-inline-size:158px} body.studio-design .home-hero-main h3{font-size:30px} body.studio-design .home-status-row,body.studio-design .metrics{grid-template-columns:1fr!important} } @media(prefers-reduced-motion:reduce){ body.studio-design *,body.studio-design *::before,body.studio-design *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } /* ========================================================= V7.0.26 · FLOW AFFORDANCE SYSTEM Màu không dùng để trang trí: mỗi màu biểu thị một hành động. Xanh dương = nghe/chọn; đỏ san hô = thu/hát; tím = đọc/đánh giá; xanh lá = bắt đầu/tiếp tục; vàng = học/cảnh báo cần chú ý. ========================================================= */ body.flow-affordance{ --act-start:#52dda4; --act-start-deep:#249f72; --act-listen:#62bfff; --act-listen-deep:#267db8; --act-record:#ff7180; --act-record-deep:#b93d4b; --act-review:#b597ff; --act-review-deep:#7657c6; --act-learn:#f2c86f; --act-danger:#ff7f83; --surface-action:rgba(255,255,255,.035); } body.flow-affordance button{position:relative} body.flow-affordance .nav{gap:5px} body.flow-affordance .nav-flow-heading{color:#dbe9f2;margin-top:2px} body.flow-affordance .nav-flow-item{min-height:57px;display:grid;grid-template-columns:34px 1fr;gap:10px;padding:8px 10px;border:1px solid transparent} body.flow-affordance .nav-flow-item .flow-index{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-weight:900;color:#d9e9f2;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)} body.flow-affordance .nav-flow-item .nav-copy{display:grid;gap:1px;min-width:0} body.flow-affordance .nav-flow-item .nav-copy b{font-size:12.5px;color:#eaf4fa} body.flow-affordance .nav-flow-item .nav-copy small{font-size:9.5px;line-height:1.25;color:#78909f;white-space:normal} body.flow-affordance .nav-flow-item[data-flow="1"]{--flow-color:var(--act-start)} body.flow-affordance .nav-flow-item[data-flow="2"]{--flow-color:var(--act-listen)} body.flow-affordance .nav-flow-item[data-flow="3"]{--flow-color:var(--act-record)} body.flow-affordance .nav-flow-item[data-flow="4"]{--flow-color:var(--act-review)} body.flow-affordance .nav-flow-item:hover{border-color:color-mix(in srgb,var(--flow-color) 28%,transparent);background:color-mix(in srgb,var(--flow-color) 8%,transparent)} body.flow-affordance .nav-flow-item.active{border-color:color-mix(in srgb,var(--flow-color) 34%,transparent);background:linear-gradient(90deg,color-mix(in srgb,var(--flow-color) 17%,transparent),rgba(255,255,255,.018));box-shadow:inset 3px 0 var(--flow-color),0 8px 22px rgba(0,0,0,.14)} body.flow-affordance .nav-flow-item.active .flow-index{color:#06131a;background:var(--flow-color);border-color:transparent;box-shadow:0 0 22px color-mix(in srgb,var(--flow-color) 35%,transparent)} body.flow-affordance .nav-flow-item.active .nav-copy small{color:#a9bbc6} /* Luồng toàn ứng dụng */ body.flow-affordance .app-flow-overview{display:grid;grid-template-columns:180px 1fr;align-items:stretch;gap:12px;margin-bottom:16px;padding:12px;border:1px solid rgba(98,191,255,.12);border-radius:18px;background:linear-gradient(120deg,rgba(11,29,41,.96),rgba(6,17,25,.96));box-shadow:0 12px 34px rgba(0,0,0,.18)} body.flow-affordance .flow-overview-head{display:flex;flex-direction:column;justify-content:center;padding:4px 10px;border-right:1px solid rgba(255,255,255,.07)} body.flow-affordance .flow-overview-head span{font-size:9px;font-weight:900;letter-spacing:.15em;color:var(--act-listen)} body.flow-affordance .flow-overview-head strong{margin-top:4px;font-size:13px;color:#edf7fb} body.flow-affordance .flow-overview-track{display:grid;grid-template-columns:repeat(4,1fr);gap:7px} body.flow-affordance .flow-overview-step{appearance:none;display:grid;grid-template-columns:31px 1fr;gap:8px;align-items:center;text-align:left;min-height:57px;padding:8px;border:1px solid rgba(255,255,255,.07);border-radius:13px;background:rgba(255,255,255,.018);color:var(--text);transition:.18s ease} body.flow-affordance .flow-overview-step:nth-child(1){--step-color:var(--act-start)} body.flow-affordance .flow-overview-step:nth-child(2){--step-color:var(--act-listen)} body.flow-affordance .flow-overview-step:nth-child(3){--step-color:var(--act-record)} body.flow-affordance .flow-overview-step:nth-child(4){--step-color:var(--act-review)} body.flow-affordance .flow-overview-step>span{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;font-weight:900;color:var(--step-color);background:color-mix(in srgb,var(--step-color) 11%,transparent);border:1px solid color-mix(in srgb,var(--step-color) 22%,transparent)} body.flow-affordance .flow-overview-step div{display:grid;gap:1px} body.flow-affordance .flow-overview-step b{font-size:11.5px} body.flow-affordance .flow-overview-step small{font-size:9px;line-height:1.25;color:#8297a4} body.flow-affordance .flow-overview-step:hover,body.flow-affordance .flow-overview-step.is-current{transform:translateY(-1px);border-color:color-mix(in srgb,var(--step-color) 32%,transparent);background:color-mix(in srgb,var(--step-color) 7%,transparent)} /* Trang bắt đầu: một hành động chính, các hành động phụ có mã màu ổn định */ body.flow-affordance .home-primary-actions{display:grid;grid-template-columns:minmax(210px,1.35fr) minmax(170px,.9fr) minmax(170px,.9fr);align-items:stretch} body.flow-affordance .home-primary-actions .btn{min-height:54px;text-align:center} body.flow-affordance .home-primary-actions .action-start{grid-row:span 2;min-height:116px;font-size:17px;color:#04140e;background:linear-gradient(145deg,#70edb7,var(--act-start-deep));border:1px solid rgba(112,237,183,.38);box-shadow:0 18px 42px rgba(44,190,132,.25),inset 0 1px rgba(255,255,255,.4)} body.flow-affordance .home-primary-actions .action-start::before{content:"▶";display:block;margin-bottom:7px;font-size:25px} body.flow-affordance .home-primary-actions .action-choose{color:#e9f7ff;background:linear-gradient(145deg,rgba(98,191,255,.18),rgba(38,125,184,.18));border-color:rgba(98,191,255,.34)} body.flow-affordance .home-primary-actions .action-check{color:#ffe7aa;background:rgba(242,200,111,.07);border-color:rgba(242,200,111,.26)} body.flow-affordance .home-primary-actions .action-learn{color:#ffe8ad;background:linear-gradient(145deg,rgba(242,200,111,.16),rgba(119,85,32,.18));border-color:rgba(242,200,111,.28);box-shadow:none} body.flow-affordance .group-open{padding:8px 12px;border-radius:11px;color:#05140f;background:linear-gradient(135deg,#70e9b5,#3dbb89);font-size:10.5px;font-weight:900;white-space:nowrap;box-shadow:0 8px 20px rgba(61,187,137,.16)} body.flow-affordance .group-row:hover .group-open{filter:brightness(1.08);transform:translateX(2px)} /* Quy trình từng lượt */ body.flow-affordance .practice-flow-shell{margin:16px 0;padding:13px;border:1px solid rgba(98,191,255,.13);border-radius:17px;background:rgba(4,14,22,.58)} body.flow-affordance .practice-flow-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px} body.flow-affordance .practice-flow-heading span{font-size:9px;font-weight:900;letter-spacing:.15em;color:#8099a8} body.flow-affordance .practice-flow-heading strong{font-size:11.5px;color:#eef8fc} body.flow-affordance .practice-now-card{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0} body.flow-affordance .practice-now-step{--step-color:#879ba7;position:relative;display:grid;grid-template-columns:34px 1fr;grid-template-areas:"num title" "num copy";column-gap:8px;align-items:center;min-height:66px;padding:10px;border:1px solid rgba(255,255,255,.07);border-radius:13px;background:rgba(255,255,255,.018);opacity:.58;transition:.2s} body.flow-affordance .practice-now-step:nth-child(1){--step-color:var(--act-listen)} body.flow-affordance .practice-now-step:nth-child(2){--step-color:var(--act-record)} body.flow-affordance .practice-now-step:nth-child(3){--step-color:var(--act-review)} body.flow-affordance .practice-now-step:nth-child(4){--step-color:var(--act-start)} body.flow-affordance .practice-now-step>span{grid-area:num;width:33px;height:33px;border-radius:10px;display:grid;place-items:center;font-weight:900;color:var(--step-color);background:color-mix(in srgb,var(--step-color) 10%,transparent);border:1px solid color-mix(in srgb,var(--step-color) 22%,transparent)} body.flow-affordance .practice-now-step>b{grid-area:title;font-size:11.5px} body.flow-affordance .practice-now-step>small{grid-area:copy;font-size:9px;line-height:1.25;color:#7f929e} body.flow-affordance .practice-now-step.active{opacity:1;border-color:color-mix(in srgb,var(--step-color) 40%,transparent);background:color-mix(in srgb,var(--step-color) 9%,transparent);box-shadow:0 10px 28px rgba(0,0,0,.18),inset 0 -2px color-mix(in srgb,var(--step-color) 75%,transparent)} body.flow-affordance .practice-now-step.active>span{color:#06131a;background:var(--step-color);box-shadow:0 0 18px color-mix(in srgb,var(--step-color) 34%,transparent)} body.flow-affordance .practice-now-step.done{opacity:.82} body.flow-affordance .practice-now-step.done>span::after{content:"✓";font-size:14px} body.flow-affordance .practice-now-step.done>span{font-size:0;color:#06131a;background:color-mix(in srgb,var(--step-color) 78%,white 22%)} /* Màu hành động trong màn hình luyện */ body.flow-affordance .affordance-listen{position:relative;border:1px solid rgba(98,191,255,.30);background:linear-gradient(135deg,rgba(98,191,255,.115),rgba(13,43,62,.24));box-shadow:inset 4px 0 var(--act-listen)} body.flow-affordance .affordance-listen::before{content:"BƯỚC 1 · NGHE";position:absolute;right:14px;top:10px;font-size:8.5px;font-weight:900;letter-spacing:.12em;color:var(--act-listen)} body.flow-affordance .sample-actions{padding-top:13px} body.flow-affordance .sample-btn{width:auto;min-width:48px;min-height:46px;height:auto;padding:10px 13px;border-radius:12px;font-size:11px;font-weight:800;line-height:1.2;color:#dff3ff;background:rgba(98,191,255,.08);border-color:rgba(98,191,255,.25)} body.flow-affordance .sample-btn:hover,body.flow-affordance .sample-btn.playing{background:rgba(98,191,255,.19);border-color:rgba(98,191,255,.48);box-shadow:0 10px 25px rgba(35,123,181,.18)} body.flow-affordance #stopSampleBtn{min-width:45px;color:#ffb6bb;background:rgba(255,113,128,.07);border-color:rgba(255,113,128,.22)} body.flow-affordance .current-action-card{border-color:rgba(255,113,128,.26);background:linear-gradient(130deg,rgba(255,113,128,.085),rgba(181,151,255,.045));box-shadow:inset 4px 0 var(--act-record),0 14px 34px rgba(0,0,0,.18)} body.flow-affordance #targetActionTitle{color:#ffb8bf} body.flow-affordance .control-strip{display:grid;grid-template-columns:1fr 1.4fr 1fr;align-items:end;max-width:620px;margin-inline:auto} body.flow-affordance .control-unit{min-width:0} body.flow-affordance .control-unit small{font-weight:800;letter-spacing:.02em} body.flow-affordance .action-listen-unit small{color:#a7dafb} body.flow-affordance .action-record-unit small{color:#ffc1c6;font-size:11px} body.flow-affordance .action-review-unit small{color:#d4c5ff} body.flow-affordance .action-listen-unit .round-btn{border-color:rgba(98,191,255,.42);background:linear-gradient(145deg,rgba(98,191,255,.29),rgba(28,86,122,.82));color:#eaf8ff} body.flow-affordance .action-record-unit .round-btn.record{width:82px;height:82px;font-size:31px;border:2px solid rgba(255,184,191,.62);background:radial-gradient(circle at 36% 28%,#ff9ca6,var(--act-record) 43%,#9d2f3b 100%);box-shadow:0 0 0 8px rgba(255,113,128,.075),0 18px 38px rgba(160,39,52,.36),inset 0 2px rgba(255,255,255,.42)} body.flow-affordance .action-record-unit .round-btn.record:not(:disabled)::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid rgba(255,113,128,.25);animation:recordAffordancePulse 2.2s ease-out infinite} body.flow-affordance .action-record-unit .round-btn.record.active::after{animation-duration:1s;border-color:rgba(255,113,128,.58)} @keyframes recordAffordancePulse{0%{transform:scale(.88);opacity:.85}75%,100%{transform:scale(1.12);opacity:0}} body.flow-affordance .action-review-unit .round-btn{border-color:rgba(181,151,255,.35);background:linear-gradient(145deg,rgba(181,151,255,.20),rgba(77,55,132,.72));color:#f1ebff} body.flow-affordance .reflection{border-color:rgba(181,151,255,.32);background:linear-gradient(135deg,rgba(181,151,255,.09),rgba(56,39,96,.17));box-shadow:inset 4px 0 var(--act-review)} body.flow-affordance .feedback{border-color:rgba(181,151,255,.28);box-shadow:inset 4px 0 var(--act-review)} body.flow-affordance .action-review,body.flow-affordance #showFeedbackBtn{color:#0e0920;background:linear-gradient(135deg,#d1beff,var(--act-review-deep));border-color:rgba(209,190,255,.35);box-shadow:0 12px 27px rgba(118,87,198,.24)} body.flow-affordance .action-next,body.flow-affordance #saveNextBtn{color:#04150f;background:linear-gradient(135deg,#79edbb,var(--act-start-deep));border-color:rgba(121,237,187,.34);box-shadow:0 12px 28px rgba(36,159,114,.23)} body.flow-affordance .action-next::after{content:" →"} body.flow-affordance .action-report{color:#eee8ff;border-color:rgba(181,151,255,.28);background:rgba(181,151,255,.08)} body.flow-affordance .action-repeat{border-color:rgba(242,200,111,.23);color:#f7dfa7;background:rgba(242,200,111,.06)} body.flow-affordance .autonomy-panel{border-color:rgba(82,221,164,.18);background:linear-gradient(135deg,rgba(82,221,164,.045),rgba(255,255,255,.015))} /* Trạng thái và chỉ dẫn */ body.flow-affordance #audioUnlockBtn:not(.ready){color:#07131a;background:linear-gradient(135deg,#ffd990,#e3a83e);border-color:transparent;box-shadow:0 8px 24px rgba(227,168,62,.18)} body.flow-affordance #audioUnlockBtn:not(.ready)::before{content:"1 · ";font-weight:900} body.flow-affordance #audioUnlockBtn.ready{background:rgba(82,221,164,.12);border-color:rgba(82,221,164,.34);color:#bff5dc} body.flow-affordance button:disabled{filter:saturate(.35);opacity:.38} body.flow-affordance button:not(:disabled):focus-visible{outline:3px solid currentColor;outline-offset:3px} @media(max-width:1180px){ body.flow-affordance .app-flow-overview{grid-template-columns:1fr} body.flow-affordance .flow-overview-head{border-right:0;border-bottom:1px solid rgba(255,255,255,.07);padding-bottom:9px} body.flow-affordance .home-primary-actions{grid-template-columns:repeat(2,1fr)} body.flow-affordance .home-primary-actions .action-start{grid-row:auto;grid-column:span 2;min-height:70px} body.flow-affordance .practice-now-card{grid-template-columns:repeat(2,1fr)} } @media(max-width:760px){ body.flow-affordance .flow-overview-track{grid-template-columns:repeat(2,1fr)} body.flow-affordance .home-primary-actions{grid-template-columns:1fr} body.flow-affordance .home-primary-actions .action-start{grid-column:auto} body.flow-affordance .practice-flow-heading{align-items:flex-start;flex-direction:column} body.flow-affordance .practice-now-card{grid-template-columns:1fr} body.flow-affordance .control-strip{grid-template-columns:repeat(3,1fr);padding-inline:10px} body.flow-affordance .action-record-unit .round-btn.record{width:72px;height:72px} } @media(prefers-reduced-motion:reduce){body.flow-affordance .action-record-unit .round-btn.record::after{animation:none}} body.flow-affordance .help-color-key{padding:21px;margin-top:16px;border-color:rgba(98,191,255,.13)} body.flow-affordance .help-color-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px} body.flow-affordance .help-color-grid>div{padding:13px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(255,255,255,.018)} body.flow-affordance .help-color-grid span{display:block;width:100%;height:5px;border-radius:999px;margin-bottom:10px;background:var(--key-color)} body.flow-affordance .help-color-grid strong{font-size:11.5px} body.flow-affordance .help-color-grid p{margin:5px 0 0;color:#8498a5;font-size:10px;line-height:1.4} body.flow-affordance .help-color-grid .listen{--key-color:var(--act-listen)} body.flow-affordance .help-color-grid .record{--key-color:var(--act-record)} body.flow-affordance .help-color-grid .review{--key-color:var(--act-review)} body.flow-affordance .help-color-grid .next{--key-color:var(--act-start)} body.flow-affordance .help-color-grid .learn{--key-color:var(--act-learn)} @media(max-width:980px){body.flow-affordance .help-color-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){body.flow-affordance .help-color-grid{grid-template-columns:1fr}} /* ========================================================= V7.0.26 · CONTRAST & ACTION LEGIBILITY HOTFIX Bright green surfaces now use a dark-enough fill with white labels. Explicit text-fill prevents inherited/translucent text from becoming unreadable in Chromium/Firefox/Windows rendering. ========================================================= */ body.flow-affordance .home-group-button .group-open, body.flow-affordance .group-open{ color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; background:linear-gradient(135deg,#187b59,#0f6046) !important; border:1px solid rgba(255,255,255,.18); text-shadow:0 1px 1px rgba(0,0,0,.38); box-shadow:0 9px 22px rgba(10,74,52,.34),inset 0 1px rgba(255,255,255,.16); opacity:1; } body.flow-affordance .home-group-button:hover .group-open, body.flow-affordance .group-row:hover .group-open{ background:linear-gradient(135deg,#1d8a65,#146b4f) !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; } body.flow-affordance .home-primary-actions .action-start, body.flow-affordance .action-next, body.flow-affordance #saveNextBtn{ color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; background:linear-gradient(135deg,#187b59,#0f6046) !important; border-color:rgba(255,255,255,.18) !important; text-shadow:0 1px 1px rgba(0,0,0,.34); } body.flow-affordance .home-primary-actions .action-start:hover:not(:disabled), body.flow-affordance .action-next:hover:not(:disabled), body.flow-affordance #saveNextBtn:hover:not(:disabled){ background:linear-gradient(135deg,#1d8a65,#146b4f) !important; } /* Disabled actions should look unavailable rather than like a pale active CTA. */ body.flow-affordance button:disabled .group-open, body.flow-affordance .operation-disabled .group-open{ color:#b7c8c1 !important; -webkit-text-fill-color:#b7c8c1 !important; background:#263a33 !important; border-color:rgba(183,200,193,.16) !important; box-shadow:none !important; text-shadow:none; } /* V7.0.26 microphone visual-stability hotfix */ #voiceCoachStatus.cue-flash,#autopilotStatus.cue-flash{ animation:none!important;transform:none!important;box-shadow:none!important; } /* Live microphone values are already updated frame-by-frame. Interpolating every frame adds GPU/compositor churn and can look like visual signal loss. */ .pitch-needle,.volume-fill,.target-volume-marker{transition:none!important;} /* Keep microphone/control panels on a stable paint layer without animated filters while input devices open or close. */ .voice-control-settings,.voice-command-modal,.mic-sync-modal{ transform:none!important; } /* V7.0.26 · semantic state controls and robust local-audio fallback */ [hidden]{display:none!important} #autopilotStopBtn.next-action{background:#23684f!important;border-color:#47ba8a!important;color:#fff!important;box-shadow:0 8px 24px rgba(35,104,79,.22)!important} #autopilotStopBtn.danger-soft{background:rgba(235,99,115,.10)!important;border-color:rgba(235,99,115,.38)!important;color:#ffb4bd!important;box-shadow:none!important} /* V7.0.27 — exercise-specific theory affordance */ .theory-day-exercise-map{margin:18px 0;padding:20px 22px;background:linear-gradient(145deg,rgba(13,35,51,.96),rgba(8,24,36,.97));border-color:rgba(105,197,255,.22)} .theory-day-exercise-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px}.theory-day-exercise-head h3{margin:4px 0 6px;font-size:19px}.theory-day-exercise-head p{margin:0;color:var(--muted);font-size:11px;line-height:1.55;max-width:860px} .theory-exercise-map{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.theory-exercise-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:14px;border-radius:15px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.08);min-width:0}.theory-exercise-item>span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(105,197,255,.12);border:1px solid rgba(105,197,255,.25);color:#9edcff;font-weight:800}.theory-exercise-item>div{min-width:0}.theory-exercise-item small{display:block;color:var(--gold2);font-size:8px;letter-spacing:.08em}.theory-exercise-item strong{display:block;margin:4px 0 6px;font-size:12px;line-height:1.35}.theory-exercise-item p{margin:0 0 7px;color:#d8e5ed;font-size:10px;line-height:1.45}.theory-exercise-item em{display:block;color:var(--muted);font-size:9px;line-height:1.4;font-style:normal}.theory-exercise-item .btn{grid-column:1/-1;justify-self:stretch;margin-top:3px;padding:8px 10px;font-size:9px} @media(max-width:1180px){.theory-exercise-map{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:650px){.theory-exercise-map{grid-template-columns:1fr}.theory-day-exercise-map{padding:17px}.theory-exercise-item .btn{min-height:42px}} /* V7.0.36 · Luminous Royal light theme A deliberately high-contrast, colour-rich daylight system. Principles: 1) saturated colour belongs to navigation, framing and action; 2) reading surfaces are solid and never translucent; 3) every text/background pair has an explicit contrast role; 4) disabled means unavailable, not invisible; 5) no blur, glass or low-opacity typography in Light Mode. */ html[data-theme="light"]{ color-scheme:light; --bg:#0d58c7; --bg2:#00a0c6; --panel:#fff8e8; --panel2:#e5f4ff; --card:#fffdf6; --text:#07172b; --muted:#29445f; --line:#124f91; --gold:#9b5c00; --gold2:#ffc83d; --blue:#075ad6; --cyan:#008aa8; --green:#007a49; --amber:#b66500; --red:#c51f45; --purple:#6031c8; --shadow:0 14px 32px rgba(5,31,68,.24); background:#0d58c7; } html[data-theme="dark"]{color-scheme:dark} html[data-theme="light"] body{ color:var(--text)!important; background: radial-gradient(circle at 93% 8%,#ff4f73 0 8%,transparent 8.2%), radial-gradient(circle at 8% 92%,#6941d7 0 11%,transparent 11.2%), linear-gradient(138deg,#0b58c8 0 34%,#00a4c7 34% 58%,#ffd13d 58% 72%,#ff5b6e 72% 86%,#7040d6 86% 100%)!important; background-attachment:fixed!important; } html[data-theme="light"] body:before{display:none!important;opacity:0!important;filter:none!important} html[data-theme="light"] .main{background:transparent!important} html[data-theme="light"] .page,html[data-theme="light"] .content{color:var(--text)!important} /* Typography: no washed-out copy */ html[data-theme="light"] :where(h1,h2,h3,h4,h5,h6){color:#07172b!important;-webkit-text-fill-color:#07172b!important;text-shadow:none!important;opacity:1!important} html[data-theme="light"] .main :where(p,li,dd,dt,label,small,em){color:#29445f!important;-webkit-text-fill-color:#29445f!important;opacity:1!important} html[data-theme="light"] .main :where(strong,b){color:#07172b!important;-webkit-text-fill-color:#07172b!important;opacity:1!important} html[data-theme="light"] :where(.muted,.subtle,.caption,.help-copy,.source-box){color:#29445f!important;-webkit-text-fill-color:#29445f!important;opacity:1!important} html[data-theme="light"] button *,html[data-theme="light"] .btn *,html[data-theme="light"] .pill *,html[data-theme="light"] .tag *{color:inherit!important;-webkit-text-fill-color:inherit!important} /* Navigation framing */ html[data-theme="light"] .sidebar{ background:linear-gradient(180deg,#072e70 0%,#0859bd 58%,#4d2cad 100%)!important; border-right:3px solid #ffd13d!important; box-shadow:12px 0 32px rgba(4,24,58,.30)!important; backdrop-filter:none!important; } html[data-theme="light"] .sidebar :where(h1,h2,h3,h4,p,small,span,strong,b){color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:1!important} html[data-theme="light"] .sidebar .muted{color:#d9ecff!important;-webkit-text-fill-color:#d9ecff!important} html[data-theme="light"] .nav button,html[data-theme="light"] .nav-item{ color:#e9f5ff!important;-webkit-text-fill-color:#e9f5ff!important; border:2px solid transparent!important;background:transparent!important;opacity:1!important } html[data-theme="light"] .nav button:hover,html[data-theme="light"] .nav-item:hover{background:#ffffff20!important;border-color:#70dcff!important;color:#fff!important;-webkit-text-fill-color:#fff!important} html[data-theme="light"] .nav button.active,html[data-theme="light"] .nav-item.active{ background:#ffd13d!important;border-color:#fff!important;color:#10213b!important;-webkit-text-fill-color:#10213b!important; box-shadow:0 8px 20px rgba(0,0,0,.22)!important } html[data-theme="light"] .nav button.active *,html[data-theme="light"] .nav-item.active *{color:#10213b!important;-webkit-text-fill-color:#10213b!important} html[data-theme="light"] .side-progress{background:#fff3b1!important;border:2px solid #ffd13d!important;color:#07172b!important} html[data-theme="light"] .side-progress *{color:#07172b!important;-webkit-text-fill-color:#07172b!important} html[data-theme="light"] .topbar{ background:linear-gradient(90deg,#ffe46d 0%,#ffc33d 34%,#ff6a78 68%,#8a52e6 100%)!important; border-bottom:3px solid #073f91!important; box-shadow:0 8px 24px rgba(4,35,78,.24)!important; backdrop-filter:none!important; } html[data-theme="light"] .topbar :where(h1,h2,h3,p,small,label){color:#07172b!important;-webkit-text-fill-color:#07172b!important;opacity:1!important} html[data-theme="light"] .topbar .status,html[data-theme="light"] .topbar .pill{background:#fff3b1!important;border:2px solid #a86300!important;color:#3c2700!important;-webkit-text-fill-color:#3c2700!important} /* Editorial surfaces: solid, structured, readable */ html[data-theme="light"] :where(.card,.panel,.setting-card,.report-section,.report-stat,.metric,.home-stat,.log-card,.side-card,.day-card,.trajectory-chart-card,.trajectory-position-card,.trajectory-readiness-card,.report-fach-grid article){ background:#fffdf6!important; border:3px solid #0f5eb4!important; box-shadow:var(--shadow)!important; color:#07172b!important; opacity:1!important; backdrop-filter:none!important; } html[data-theme="light"] :where(.card,.panel,.setting-card,.report-section,.report-stat,.metric,.home-stat,.log-card,.side-card,.day-card,.trajectory-chart-card,.trajectory-position-card,.trajectory-readiness-card,.report-fach-grid article) :where(p,small,label,li,span,em){color:#29445f!important;-webkit-text-fill-color:#29445f!important;opacity:1!important} html[data-theme="light"] :where(.card,.panel,.setting-card,.report-section,.report-stat,.metric,.home-stat,.log-card,.side-card,.day-card,.trajectory-chart-card,.trajectory-position-card,.trajectory-readiness-card,.report-fach-grid article) :where(h2,h3,h4,h5,strong,b){color:#07172b!important;-webkit-text-fill-color:#07172b!important} /* Semantic surfaces, never random nth-child colouring */ html[data-theme="light"] :where(.easy-start-card,.success-card,.readiness-card){background:#d7f4df!important;border-color:#007a49!important} html[data-theme="light"] :where(.primary-action-card,.sample-card,.learning-hero,.help-hero){background:#d9efff!important;border-color:#075ad6!important} html[data-theme="light"] :where(.voice-coach-bar,.voice-training-box,.adaptive-system-strip){background:#d2f6f3!important;border-color:#008aa8!important} html[data-theme="light"] :where(.insight,.theory-hero,.attention-card){background:#ffe68b!important;border-color:#b66500!important} html[data-theme="light"] :where(.analysis-card,.trajectory-readiness-card){background:#eadfff!important;border-color:#6031c8!important} html[data-theme="light"] :where(.warning-card,.danger-card){background:#ffd5de!important;border-color:#c51f45!important} html[data-theme="light"] :where(.source-box,.notice,.prompt,.feedback,.reflection,.autonomy-panel,.target-controls,.practice-flow-shell,.exercise-sound-banner){ background:#e9f5ff!important;border:2px solid #1767ad!important;color:#07172b!important;opacity:1!important;backdrop-filter:none!important } html[data-theme="light"] :where(.source-box,.notice,.prompt,.feedback,.reflection,.autonomy-panel,.target-controls,.practice-flow-shell,.exercise-sound-banner) :where(p,small,label,span){color:#29445f!important;-webkit-text-fill-color:#29445f!important;opacity:1!important} html[data-theme="light"] :where(.group-row,.group-item,.rail-node,.practice-now-step,.voice-command-grid>div,.theory-exercise-item,.fach-description-item,.fach-protocol-step,.fach-formula-row,.fach-confidence-chip,.fach-candidate){ background:#fff!important;border:2px solid #3975ae!important;color:#07172b!important;opacity:1!important } html[data-theme="light"] :where(.group-row,.group-item,.rail-node,.practice-now-step,.voice-command-grid>div,.theory-exercise-item,.fach-description-item,.fach-protocol-step,.fach-formula-row,.fach-confidence-chip,.fach-candidate) :where(p,small,span,em){color:#29445f!important;-webkit-text-fill-color:#29445f!important;opacity:1!important} html[data-theme="light"] :where(.group-row,.group-item,.rail-node):hover{background:#d8efff!important;border-color:#075ad6!important;transform:translateY(-2px)} html[data-theme="light"] .rail-node.active,html[data-theme="light"] .practice-now-step.active{background:#ffe06a!important;border-color:#ad6300!important;color:#3c2800!important} html[data-theme="light"] .rail-node.done{background:#d7f4df!important;border-color:#007a49!important;color:#075b38!important} /* Buttons and affordance */ html[data-theme="light"] button,html[data-theme="light"] .btn{opacity:1!important;text-shadow:none!important;filter:none!important;backdrop-filter:none!important;font-weight:850!important} html[data-theme="light"] :where(.btn.primary,.action-start,.next-action,#startSessionBtn,#saveReadinessBtn){background:#007a49!important;border:3px solid #00572f!important;color:#fff!important;-webkit-text-fill-color:#fff!important;box-shadow:0 8px 18px rgba(0,92,52,.28)!important} html[data-theme="light"] :where(.btn.blue,.btn.secondary,.sample-btn,.voice-train-btn,#fachRefreshBtn){background:#075ad6!important;border:3px solid #033c95!important;color:#fff!important;-webkit-text-fill-color:#fff!important;box-shadow:0 8px 18px rgba(4,66,160,.24)!important} html[data-theme="light"] :where(.record-btn,.btn.record,.btn.danger){background:#c51f45!important;border:3px solid #8c1230!important;color:#fff!important;-webkit-text-fill-color:#fff!important} html[data-theme="light"] :where(.btn.ghost,#cancelReadinessBtn){background:#6031c8!important;border:3px solid #421e95!important;color:#fff!important;-webkit-text-fill-color:#fff!important} html[data-theme="light"] :where(.btn.gold,.learn-btn){background:#ffd13d!important;border:3px solid #a86300!important;color:#3b2700!important;-webkit-text-fill-color:#3b2700!important} html[data-theme="light"] button:disabled,html[data-theme="light"] .btn:disabled,html[data-theme="light"] [aria-disabled="true"]{ background:#d7dee7!important;border:2px solid #6a7e91!important;color:#20354a!important;-webkit-text-fill-color:#20354a!important;opacity:1!important;box-shadow:none!important;cursor:not-allowed!important } html[data-theme="light"] button:focus-visible,html[data-theme="light"] .btn:focus-visible,html[data-theme="light"] input:focus-visible,html[data-theme="light"] select:focus-visible,html[data-theme="light"] textarea:focus-visible{outline:4px solid #ffd13d!important;outline-offset:2px!important} /* Pills, inputs, tables */ html[data-theme="light"] :where(.pill,.meta-pill,.tag,.flag){background:#ffd13d!important;border:2px solid #a86300!important;color:#3b2700!important;-webkit-text-fill-color:#3b2700!important;opacity:1!important} html[data-theme="light"] :where(input,select,textarea,.field){background:#fff!important;border:2px solid #1c68aa!important;color:#07172b!important;-webkit-text-fill-color:#07172b!important;opacity:1!important;box-shadow:none!important} html[data-theme="light"] :where(input,textarea)::placeholder{color:#4b6278!important;opacity:1!important} html[data-theme="light"] option{background:#fff!important;color:#07172b!important} html[data-theme="light"] table{background:#fff!important;border:3px solid #0f5eb4!important;border-collapse:separate!important;border-spacing:0!important} html[data-theme="light"] th{background:#075ad6!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border-color:#033c95!important} html[data-theme="light"] td{color:#07172b!important;-webkit-text-fill-color:#07172b!important;border-color:#91aec8!important;background:#fff!important} html[data-theme="light"] tbody tr:nth-child(even) td{background:#e9f5ff!important} html[data-theme="light"] tbody tr:hover td{background:#ffe89a!important} /* Practice and charts */ html[data-theme="light"] .lane,html[data-theme="light"] canvas,html[data-theme="light"] .chart-shell{ background: linear-gradient(#b7d5ec 1px,transparent 1px), linear-gradient(90deg,#b7d5ec 1px,transparent 1px), #fffdf6!important; background-size:36px 36px!important;border:3px solid #075ad6!important } html[data-theme="light"] .tiny{background:#fff3b1!important;border:2px solid #a86300!important;color:#3b2700!important;-webkit-text-fill-color:#3b2700!important} html[data-theme="light"] .control-strip{background:#072e70!important;border:3px solid #ffd13d!important;box-shadow:0 16px 36px rgba(4,28,66,.35)!important;backdrop-filter:none!important} html[data-theme="light"] .control-strip :where(small,span,label){color:#eaf6ff!important;-webkit-text-fill-color:#eaf6ff!important} html[data-theme="light"] .round-btn{background:#075ad6!important;border:3px solid #70dcff!important;color:#fff!important;-webkit-text-fill-color:#fff!important} html[data-theme="light"] .round-btn.record{background:#c51f45!important;border-color:#ff9ab0!important} html[data-theme="light"] .round-btn.active{box-shadow:0 0 0 6px #ffd13d,0 10px 24px rgba(0,0,0,.28)!important} html[data-theme="light"] .score{background:#fff!important;border:2px solid #3975ae!important} html[data-theme="light"] .score small{color:#29445f!important}html[data-theme="light"] .score strong{color:#07172b!important} /* Modal: solid, legible, colourful */ html[data-theme="light"] .modal-backdrop{background:rgba(3,24,54,.82)!important;backdrop-filter:none!important} html[data-theme="light"] .modal{background:#fff8d9!important;border:4px solid #075ad6!important;box-shadow:0 28px 76px rgba(0,0,0,.46)!important;color:#07172b!important;opacity:1!important;backdrop-filter:none!important} html[data-theme="light"] .modal :where(h2,h3,h4,strong,b){color:#07172b!important;-webkit-text-fill-color:#07172b!important} html[data-theme="light"] .modal :where(p,small,label,span){color:#29445f!important;-webkit-text-fill-color:#29445f!important;opacity:1!important} html[data-theme="light"] .symptom{min-height:66px;background:#cae8ff!important;border:3px solid #075ad6!important;color:#07325f!important;-webkit-text-fill-color:#07325f!important;font-weight:900!important;opacity:1!important;box-shadow:0 6px 14px rgba(0,68,145,.18)!important} html[data-theme="light"] .symptom:nth-child(2n){background:#e3d5ff!important;border-color:#6031c8!important;color:#35106a!important;-webkit-text-fill-color:#35106a!important} html[data-theme="light"] .symptom:nth-child(3n){background:#ffe173!important;border-color:#b66500!important;color:#4b3000!important;-webkit-text-fill-color:#4b3000!important} html[data-theme="light"] .symptom:nth-child(4n){background:#ffc3cf!important;border-color:#c51f45!important;color:#671028!important;-webkit-text-fill-color:#671028!important} html[data-theme="light"] .symptom.selected{background:#075ad6!important;border-color:#032f79!important;color:#fff!important;-webkit-text-fill-color:#fff!important;box-shadow:0 0 0 5px #ffd13d,0 10px 24px rgba(0,52,122,.32)!important} html[data-theme="light"] .range-row label,html[data-theme="light"] #symptomSeverityValue{color:#07172b!important;-webkit-text-fill-color:#07172b!important;font-weight:900!important} html[data-theme="light"] #symptomSeverity{accent-color:#c51f45!important} html[data-theme="light"] #saveReadinessBtn{background:#ffd13d!important;border-color:#a86300!important;color:#352300!important;-webkit-text-fill-color:#352300!important} html[data-theme="light"] #cancelReadinessBtn{background:#6031c8!important;border-color:#421e95!important;color:#fff!important;-webkit-text-fill-color:#fff!important} /* Fach: intentionally designed page, not generic card colouring */ html[data-theme="light"] .fach-hero{ background:linear-gradient(120deg,#083f9b 0%,#075ad6 60%,#00a0c6 100%)!important; border:4px solid #ffd13d!important;box-shadow:0 18px 40px rgba(4,34,80,.32)!important;color:#fff!important } html[data-theme="light"] .fach-hero :where(h2,h3,h4,p,small,label){color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:1!important} html[data-theme="light"] .fach-hero-badge{background:#ffd13d!important;border:3px solid #fff!important;color:#07172b!important;box-shadow:0 10px 24px rgba(0,0,0,.22)!important} html[data-theme="light"] .fach-hero-badge :where(strong,span,small,b){color:#07172b!important;-webkit-text-fill-color:#07172b!important;opacity:1!important} html[data-theme="light"] .fach-primary-card{background:#d9efff!important;border-color:#075ad6!important} html[data-theme="light"] .fach-description-card{background:#ffe68b!important;border-color:#b66500!important} html[data-theme="light"] .fach-evidence-card{background:#e8ddff!important;border-color:#6031c8!important} html[data-theme="light"] .fach-suggestion-card{background:#ffd5de!important;border-color:#c51f45!important} html[data-theme="light"] .fach-protocol-card,html[data-theme="light"] .fach-formula-card{background:#d7f4df!important;border-color:#007a49!important} html[data-theme="light"] :where(.fach-primary-card,.fach-description-card,.fach-evidence-card,.fach-suggestion-card,.fach-protocol-card,.fach-formula-card){border-width:3px!important;box-shadow:var(--shadow)!important;color:#07172b!important} html[data-theme="light"] :where(.fach-primary-card,.fach-description-card,.fach-evidence-card,.fach-suggestion-card,.fach-protocol-card,.fach-formula-card) :where(h3,h4,h5,strong,b){color:#07172b!important;-webkit-text-fill-color:#07172b!important} html[data-theme="light"] :where(.fach-primary-card,.fach-description-card,.fach-evidence-card,.fach-suggestion-card,.fach-protocol-card,.fach-formula-card) :where(p,small,span,li,em){color:#29445f!important;-webkit-text-fill-color:#29445f!important;opacity:1!important} html[data-theme="light"] .fach-card-head small{color:#7a4200!important;-webkit-text-fill-color:#7a4200!important;font-weight:900!important} html[data-theme="light"] .fach-primary-score{background:#fff8d9!important;border:2px solid #075ad6!important} html[data-theme="light"] .fach-primary-score strong{color:#075ad6!important;-webkit-text-fill-color:#075ad6!important} html[data-theme="light"] .fach-description-item{background:#fffdf6!important;border:2px solid #b66500!important} html[data-theme="light"] .fach-description-item small,html[data-theme="light"] .fach-description-item p{color:#29445f!important;-webkit-text-fill-color:#29445f!important} html[data-theme="light"] .fach-candidate.primary{background:#ffe68b!important;border-color:#b66500!important} html[data-theme="light"] .fach-recommendation{background:#fffdf6!important;border-left:7px solid #c51f45!important;color:#07172b!important} html[data-theme="light"] .fach-protocol-step.complete{background:#c8f0d5!important;border-color:#007a49!important} html[data-theme="light"] .fach-formula-row,html[data-theme="light"] .fach-confidence-chip{background:#fffdf6!important;border-color:#007a49!important} html[data-theme="light"] .fach-formula-row b,html[data-theme="light"] .fach-confidence-chip b{color:#075ad6!important;-webkit-text-fill-color:#075ad6!important} /* Reports, settings, help and state labels */ html[data-theme="light"] .setting-row{border-bottom:2px solid #9ab9d2!important} html[data-theme="light"] .setting-row span{color:#29445f!important;-webkit-text-fill-color:#29445f!important;opacity:1!important} html[data-theme="light"] .report-confidence{background:#ffe68b!important;border:3px solid #b66500!important} html[data-theme="light"] .report-confidence :where(small,span){color:#5a3900!important;-webkit-text-fill-color:#5a3900!important} html[data-theme="light"] .report-confidence strong{color:#07172b!important;-webkit-text-fill-color:#07172b!important} html[data-theme="light"] .report-fach-grid article:nth-child(1){background:#d9efff!important;border-color:#075ad6!important} html[data-theme="light"] .report-fach-grid article:nth-child(2){background:#ffe68b!important;border-color:#b66500!important} html[data-theme="light"] .toast{background:#072e70!important;border:3px solid #ffd13d!important;color:#fff!important;-webkit-text-fill-color:#fff!important} html[data-theme="light"] .toast *{color:#fff!important;-webkit-text-fill-color:#fff!important} /* Keep contrast predictable at narrow widths */ @media(max-width:820px){ html[data-theme="light"] .topbar{background:#ffd13d!important} html[data-theme="light"] .sidebar{border-right:0!important;border-bottom:3px solid #ffd13d!important} } @media(prefers-reduced-motion:reduce){html[data-theme="light"] *{transition:none!important;animation:none!important}} html[data-theme="light"] *{scrollbar-color:#075ad6 #d9efff} /* V7.0.36 · Header controls and advisory copy — final contrast pass */ html[data-theme="light"] .topbar .autopilot-toggle{ background:#073f91!important;border:3px solid #fff!important;color:#fff!important;-webkit-text-fill-color:#fff!important; box-shadow:0 7px 16px rgba(3,43,104,.28)!important } html[data-theme="light"] .topbar .autopilot-pill{ background:#fff3b1!important;border:2px solid #a86300!important;color:#3b2700!important;-webkit-text-fill-color:#3b2700!important } html[data-theme="light"] .topbar .view-mode-switch{ background:#fff3b1!important;border:2px solid #a86300!important;box-shadow:none!important } html[data-theme="light"] .topbar .view-mode-btn{ background:transparent!important;color:#3b2700!important;-webkit-text-fill-color:#3b2700!important;border:2px solid transparent!important } html[data-theme="light"] .topbar .view-mode-btn.active{ background:#6031c8!important;border-color:#421e95!important;color:#fff!important;-webkit-text-fill-color:#fff!important } html[data-theme="light"] .topbar .audio-unlock{ background:#007a49!important;border:3px solid #00572f!important;color:#fff!important;-webkit-text-fill-color:#fff!important; box-shadow:0 7px 16px rgba(0,93,54,.25)!important } html[data-theme="light"] .topbar .pill:not(.autopilot-pill){ background:#fff3b1!important;border:2px solid #a86300!important;color:#3b2700!important;-webkit-text-fill-color:#3b2700!important } html[data-theme="light"] .topbar .pill *{color:inherit!important;-webkit-text-fill-color:inherit!important} html[data-theme="light"] .report-disclaimer{ background:#fff8d9!important;border:2px solid #a86300!important;color:#29445f!important;-webkit-text-fill-color:#29445f!important; opacity:1!important;font-weight:650!important } html[data-theme="light"] .selection-notice{ background:#fff8d9!important;border:2px solid #a86300!important;color:#29445f!important;-webkit-text-fill-color:#29445f!important;opacity:1!important } /* V7.0.36 · Page-heading and secondary-component legibility */ html[data-theme="light"] .section-title{ padding:16px 18px!important;border:3px solid #075ad6!important;border-radius:18px!important; background:#fff8d9!important;box-shadow:0 10px 24px rgba(4,41,92,.20)!important } html[data-theme="light"] .section-title :where(h2,h3,h4,strong){color:#07172b!important;-webkit-text-fill-color:#07172b!important} html[data-theme="light"] .section-title :where(p,small,span){color:#29445f!important;-webkit-text-fill-color:#29445f!important;opacity:1!important} html[data-theme="light"] .app-flow-overview{ background:#073f91!important;border:3px solid #ffd13d!important;box-shadow:0 12px 28px rgba(3,37,89,.30)!important } html[data-theme="light"] .app-flow-overview :where(span,strong,b,small){color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:1!important} html[data-theme="light"] .flow-overview-step{background:#0b58c8!important;border:2px solid #70dcff!important;color:#fff!important;-webkit-text-fill-color:#fff!important} html[data-theme="light"] .flow-overview-step *{color:#fff!important;-webkit-text-fill-color:#fff!important} html[data-theme="light"] .flow-overview-step.is-current{background:#ffd13d!important;border-color:#fff!important;color:#10213b!important;-webkit-text-fill-color:#10213b!important} html[data-theme="light"] .flow-overview-step.is-current *{color:#10213b!important;-webkit-text-fill-color:#10213b!important} html[data-theme="light"] .theory-btn,html[data-theme="light"] .action-learn{ background:#ffd13d!important;border:3px solid #a86300!important;color:#3b2700!important;-webkit-text-fill-color:#3b2700!important } html[data-theme="light"] .text-action{color:#075ad6!important;-webkit-text-fill-color:#075ad6!important;font-weight:850!important;text-decoration:underline!important;text-underline-offset:3px!important} html[data-theme="light"] .icon-btn{background:#075ad6!important;border:3px solid #033c95!important;color:#fff!important;-webkit-text-fill-color:#fff!important} html[data-theme="light"] .danger-soft{ background:#c51f45!important;border:3px solid #8c1230!important;color:#fff!important;-webkit-text-fill-color:#fff!important } html[data-theme="light"] .help-step-grid>div,html[data-theme="light"] .help-info-grid>div,html[data-theme="light"] .help-page-grid>div,html[data-theme="light"] .help-audio-grid>div{ background:#fff!important;border:2px solid #3975ae!important;color:#07172b!important } html[data-theme="light"] .help-section-number{background:#ffd13d!important;border:2px solid #a86300!important;color:#3b2700!important;-webkit-text-fill-color:#3b2700!important} html[data-theme="light"] .help-step-grid code,html[data-theme="light"] .help-section code,html[data-theme="light"] .about-copy code{ background:#d9efff!important;border:1px solid #075ad6!important;color:#07325f!important;-webkit-text-fill-color:#07325f!important } html[data-theme="light"] .help-toc a{color:#29445f!important;-webkit-text-fill-color:#29445f!important} html[data-theme="light"] .help-toc a:hover{background:#d9efff!important;color:#075ad6!important;-webkit-text-fill-color:#075ad6!important} html[data-theme="light"] .report-status{background:#d7f4df!important;border:2px solid #007a49!important;color:#075b38!important;-webkit-text-fill-color:#075b38!important} html[data-theme="light"] .report-status.caution{background:#ffe68b!important;border-color:#b66500!important;color:#5a3900!important;-webkit-text-fill-color:#5a3900!important} html[data-theme="light"] .report-status.high{background:#ffd5de!important;border-color:#c51f45!important;color:#671028!important;-webkit-text-fill-color:#671028!important} html[data-theme="light"] .report-status.neutral{background:#d9efff!important;border-color:#075ad6!important;color:#07325f!important;-webkit-text-fill-color:#07325f!important} html[data-theme="light"] .feedback-auto,html[data-theme="light"] .autonomy-note{ color:#29445f!important;-webkit-text-fill-color:#29445f!important;opacity:1!important } html[data-theme="light"] .help-version-badge{ background:#073f91!important;border:3px solid #ffd13d!important;box-shadow:0 10px 24px rgba(3,39,94,.28)!important } html[data-theme="light"] .help-version-badge small{color:#ffd13d!important;-webkit-text-fill-color:#ffd13d!important} html[data-theme="light"] .help-version-badge strong,html[data-theme="light"] .help-version-badge span{color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:1!important} /* ====================================================================== V7.0.36 · Windows 11 Fluent Light Theme Rebuilt as a calm, high-legibility Mica/Acrylic-inspired interface. Dark Mode is intentionally untouched. ====================================================================== */ html[data-theme="light"]{ color-scheme:light; --bg:#f3f3f3; --bg2:#fafafa; --panel:#ffffff; --panel2:#f7f7f7; --card:#ffffff; --text:#1a1a1a; --muted:#5d5d5d; --line:#d6d6d6; --gold:#8a5900; --gold2:#ffca40; --blue:#0067c0; --cyan:#0078d4; --green:#0f7b0f; --amber:#9d5d00; --red:#c42b1c; --purple:#744da9; --shadow:0 2px 4px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.08); background:#f3f3f3!important; } html[data-theme="light"] body{ font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif!important; color:#1a1a1a!important; background: radial-gradient(circle at 8% 4%,rgba(0,120,212,.10),transparent 24%), radial-gradient(circle at 96% 18%,rgba(116,77,169,.07),transparent 22%), linear-gradient(135deg,#f8fbff 0%,#f3f3f3 48%,#f8f8f8 100%)!important; background-attachment:fixed!important; } html[data-theme="light"] body:before{display:none!important} html[data-theme="light"] .main{background:transparent!important} html[data-theme="light"] .content{color:#1a1a1a!important} html[data-theme="light"] :where(h1,h2,h3,h4,h5,h6,strong,b){color:#1a1a1a!important;-webkit-text-fill-color:#1a1a1a!important;text-shadow:none!important;opacity:1!important} html[data-theme="light"] :where(p,li,dd,dt,label,small,em,.muted,.subtle,.caption,.help-copy,.source-box){color:#5d5d5d!important;-webkit-text-fill-color:#5d5d5d!important;opacity:1!important} html[data-theme="light"] button *,html[data-theme="light"] .btn *,html[data-theme="light"] .pill *,html[data-theme="light"] .tag *{color:inherit!important;-webkit-text-fill-color:inherit!important} /* Mica navigation pane */ html[data-theme="light"] .sidebar{ background:rgba(243,243,243,.94)!important; border-right:1px solid #d6d6d6!important; box-shadow:1px 0 0 rgba(255,255,255,.8),8px 0 24px rgba(0,0,0,.04)!important; backdrop-filter:blur(28px) saturate(145%)!important; } html[data-theme="light"] .sidebar :where(h1,h2,h3,h4,strong,b){color:#1a1a1a!important;-webkit-text-fill-color:#1a1a1a!important} html[data-theme="light"] .sidebar :where(p,small,span){color:#5d5d5d!important;-webkit-text-fill-color:#5d5d5d!important} html[data-theme="light"] .brand-mark{background:linear-gradient(135deg,#0078d4,#60cdff)!important;box-shadow:0 5px 14px rgba(0,120,212,.24)!important} html[data-theme="light"] .nav-group-label{color:#6b6b6b!important;-webkit-text-fill-color:#6b6b6b!important} html[data-theme="light"] .nav button,html[data-theme="light"] .nav-item{ background:transparent!important;border:1px solid transparent!important;color:#323130!important;-webkit-text-fill-color:#323130!important; border-radius:8px!important;box-shadow:none!important;transition:background .12s ease,border-color .12s ease!important } html[data-theme="light"] .nav button *,html[data-theme="light"] .nav-item *{color:inherit!important;-webkit-text-fill-color:inherit!important} html[data-theme="light"] .nav button:hover,html[data-theme="light"] .nav-item:hover{background:#e9e9e9!important;border-color:#e0e0e0!important;color:#1a1a1a!important} html[data-theme="light"] .nav button.active,html[data-theme="light"] .nav-item.active{ position:relative;background:#e6f2fb!important;border-color:#c7e4f6!important;color:#003e75!important;-webkit-text-fill-color:#003e75!important; box-shadow:inset 3px 0 0 #0078d4!important } html[data-theme="light"] .side-progress{background:#fff!important;border:1px solid #d6d6d6!important;color:#1a1a1a!important;box-shadow:0 1px 2px rgba(0,0,0,.04)!important} html[data-theme="light"] .side-progress *{color:#1a1a1a!important;-webkit-text-fill-color:#1a1a1a!important} html[data-theme="light"] .mini-track{background:#e5e5e5!important}.mini-track span{background:#0078d4!important} /* Windows 11 command bar */ html[data-theme="light"] .topbar{ background:rgba(250,250,250,.90)!important;border-bottom:1px solid #d6d6d6!important; box-shadow:0 1px 0 rgba(255,255,255,.9),0 4px 14px rgba(0,0,0,.04)!important; backdrop-filter:blur(28px) saturate(145%)!important } html[data-theme="light"] .topbar :where(h1,h2,h3){color:#1a1a1a!important;-webkit-text-fill-color:#1a1a1a!important} html[data-theme="light"] .topbar :where(p,small,label){color:#5d5d5d!important;-webkit-text-fill-color:#5d5d5d!important} html[data-theme="light"] .topbar .autopilot-toggle, html[data-theme="light"] .topbar .audio-unlock, html[data-theme="light"] .topbar .view-mode-btn, html[data-theme="light"] .topbar .pill{ min-height:34px!important;border-radius:7px!important;font-weight:650!important;box-shadow:none!important } html[data-theme="light"] .topbar .autopilot-toggle{background:#fff!important;border:1px solid #cfcfcf!important;color:#1a1a1a!important;-webkit-text-fill-color:#1a1a1a!important} html[data-theme="light"] .topbar .autopilot-toggle:hover{background:#f0f0f0!important} html[data-theme="light"] .topbar .autopilot-toggle.active{background:#e6f2fb!important;border-color:#8bc9ef!important;color:#003e75!important} html[data-theme="light"] .topbar .autopilot-pill, html[data-theme="light"] .topbar .pill:not(.autopilot-pill){background:#f5f5f5!important;border:1px solid #d6d6d6!important;color:#323130!important;-webkit-text-fill-color:#323130!important} html[data-theme="light"] .topbar .view-mode-switch{background:#ececec!important;border:1px solid #d6d6d6!important;border-radius:9px!important;padding:3px!important} html[data-theme="light"] .topbar .view-mode-btn{background:transparent!important;border:0!important;color:#323130!important;-webkit-text-fill-color:#323130!important} html[data-theme="light"] .topbar .view-mode-btn.active{background:#fff!important;color:#003e75!important;-webkit-text-fill-color:#003e75!important;box-shadow:0 1px 3px rgba(0,0,0,.12)!important} html[data-theme="light"] .topbar .audio-unlock{background:#0067c0!important;border:1px solid #005a9e!important;color:#fff!important;-webkit-text-fill-color:#fff!important} html[data-theme="light"] .topbar .audio-unlock:hover{background:#005a9e!important} /* Fluent surfaces */ html[data-theme="light"] :where(.card,.panel,.setting-card,.report-section,.report-stat,.metric,.home-stat,.log-card,.side-card,.day-card,.trajectory-chart-card,.trajectory-position-card,.trajectory-readiness-card,.report-fach-grid article,.fach-primary-card,.fach-description-card,.fach-evidence-card,.fach-suggestion-card,.fach-protocol-card,.fach-formula-card){ background:#fff!important;border:1px solid #d6d6d6!important;border-radius:12px!important;box-shadow:var(--shadow)!important;color:#1a1a1a!important;opacity:1!important;backdrop-filter:none!important } html[data-theme="light"] :where(.card,.panel,.setting-card,.report-section,.report-stat,.metric,.home-stat,.log-card,.side-card,.day-card,.trajectory-chart-card,.trajectory-position-card,.trajectory-readiness-card,.report-fach-grid article,.fach-primary-card,.fach-description-card,.fach-evidence-card,.fach-suggestion-card,.fach-protocol-card,.fach-formula-card) :where(h2,h3,h4,h5,strong,b){color:#1a1a1a!important;-webkit-text-fill-color:#1a1a1a!important} html[data-theme="light"] :where(.card,.panel,.setting-card,.report-section,.report-stat,.metric,.home-stat,.log-card,.side-card,.day-card,.trajectory-chart-card,.trajectory-position-card,.trajectory-readiness-card,.report-fach-grid article,.fach-primary-card,.fach-description-card,.fach-evidence-card,.fach-suggestion-card,.fach-protocol-card,.fach-formula-card) :where(p,small,label,li,span,em){color:#5d5d5d!important;-webkit-text-fill-color:#5d5d5d!important;opacity:1!important} /* Subtle semantic tinting, Fluent rather than saturated */ html[data-theme="light"] :where(.easy-start-card,.success-card,.readiness-card){background:#f1faf3!important;border-color:#a8d5af!important} html[data-theme="light"] :where(.primary-action-card,.sample-card,.learning-hero,.help-hero){background:#f3f9fd!important;border-color:#9ccced!important} html[data-theme="light"] :where(.voice-coach-bar,.voice-training-box,.adaptive-system-strip){background:#f0fbfb!important;border-color:#97d8da!important} html[data-theme="light"] :where(.insight,.theory-hero,.attention-card){background:#fff9e8!important;border-color:#ead38a!important} html[data-theme="light"] :where(.analysis-card,.trajectory-readiness-card){background:#f7f3fb!important;border-color:#cbb8e2!important} html[data-theme="light"] :where(.warning-card,.danger-card){background:#fff4f2!important;border-color:#e8aaa2!important} html[data-theme="light"] :where(.source-box,.notice,.prompt,.feedback,.reflection,.autonomy-panel,.target-controls,.practice-flow-shell,.exercise-sound-banner,.selection-notice,.report-disclaimer){ background:#f7f7f7!important;border:1px solid #d6d6d6!important;color:#1a1a1a!important;opacity:1!important;backdrop-filter:none!important } html[data-theme="light"] :where(.source-box,.notice,.prompt,.feedback,.reflection,.autonomy-panel,.target-controls,.practice-flow-shell,.exercise-sound-banner,.selection-notice,.report-disclaimer) :where(p,small,label,span,em){color:#5d5d5d!important;-webkit-text-fill-color:#5d5d5d!important;opacity:1!important} /* Lists and steps */ html[data-theme="light"] :where(.group-row,.group-item,.rail-node,.practice-now-step,.voice-command-grid>div,.theory-exercise-item,.fach-description-item,.fach-protocol-step,.fach-formula-row,.fach-confidence-chip,.fach-candidate,.help-step-grid>div,.help-info-grid>div,.help-page-grid>div,.help-metric-grid>div,.help-two-column>div,.help-stop-grid>div,.help-audio-grid>div){ background:#fff!important;border:1px solid #d6d6d6!important;color:#1a1a1a!important;opacity:1!important;border-radius:10px!important;box-shadow:0 1px 2px rgba(0,0,0,.03)!important } html[data-theme="light"] :where(.group-row,.group-item,.rail-node,.practice-now-step,.voice-command-grid>div,.theory-exercise-item,.fach-description-item,.fach-protocol-step,.fach-formula-row,.fach-confidence-chip,.fach-candidate,.help-step-grid>div,.help-info-grid>div,.help-page-grid>div,.help-metric-grid>div,.help-two-column>div,.help-stop-grid>div,.help-audio-grid>div) :where(p,small,span,em){color:#5d5d5d!important;-webkit-text-fill-color:#5d5d5d!important} html[data-theme="light"] :where(.group-row,.group-item,.rail-node):hover{background:#f5f9fc!important;border-color:#9ccced!important;transform:none!important} html[data-theme="light"] .rail-node.active,html[data-theme="light"] .practice-now-step.active{background:#e6f2fb!important;border-color:#8bc9ef!important;color:#003e75!important} html[data-theme="light"] .rail-node.done{background:#eef9f0!important;border-color:#9bcba3!important;color:#0f5c1b!important} /* Fluent buttons */ html[data-theme="light"] button,html[data-theme="light"] .btn{border-radius:7px!important;font-weight:650!important;text-shadow:none!important;filter:none!important;opacity:1!important;transition:background .12s ease,border-color .12s ease,transform .06s ease!important} html[data-theme="light"] button:active,html[data-theme="light"] .btn:active{transform:scale(.985)!important} html[data-theme="light"] :where(.btn.primary,.action-start,.next-action,#startSessionBtn,#saveReadinessBtn){background:#0067c0!important;border:1px solid #005a9e!important;color:#fff!important;-webkit-text-fill-color:#fff!important;box-shadow:0 1px 2px rgba(0,0,0,.08)!important} html[data-theme="light"] :where(.btn.primary,.action-start,.next-action,#startSessionBtn,#saveReadinessBtn):hover{background:#005a9e!important} html[data-theme="light"] :where(.btn.blue,.btn.secondary,.sample-btn,.voice-train-btn,#fachRefreshBtn){background:#fff!important;border:1px solid #c7c7c7!important;color:#003e75!important;-webkit-text-fill-color:#003e75!important;box-shadow:0 1px 2px rgba(0,0,0,.05)!important} html[data-theme="light"] :where(.btn.blue,.btn.secondary,.sample-btn,.voice-train-btn,#fachRefreshBtn):hover{background:#f0f0f0!important;border-color:#b4b4b4!important} html[data-theme="light"] :where(.record-btn,.btn.record,.btn.danger,.danger-soft){background:#c42b1c!important;border:1px solid #a7281c!important;color:#fff!important;-webkit-text-fill-color:#fff!important} html[data-theme="light"] :where(.btn.ghost,#cancelReadinessBtn){background:#fff!important;border:1px solid #c7c7c7!important;color:#323130!important;-webkit-text-fill-color:#323130!important} html[data-theme="light"] :where(.btn.gold,.learn-btn,.theory-btn,.action-learn){background:#fff!important;border:1px solid #c7c7c7!important;color:#6a4200!important;-webkit-text-fill-color:#6a4200!important} html[data-theme="light"] button:disabled,html[data-theme="light"] .btn:disabled,html[data-theme="light"] [aria-disabled="true"]{background:#f0f0f0!important;border-color:#dedede!important;color:#8a8a8a!important;-webkit-text-fill-color:#8a8a8a!important;opacity:1!important;box-shadow:none!important;cursor:not-allowed!important} html[data-theme="light"] button:focus-visible,html[data-theme="light"] .btn:focus-visible,html[data-theme="light"] input:focus-visible,html[data-theme="light"] select:focus-visible,html[data-theme="light"] textarea:focus-visible{outline:2px solid #000!important;outline-offset:2px!important;box-shadow:0 0 0 4px #fff!important} /* Controls */ html[data-theme="light"] :where(.pill,.meta-pill,.tag,.flag){background:#f5f5f5!important;border:1px solid #d6d6d6!important;color:#323130!important;-webkit-text-fill-color:#323130!important;opacity:1!important;border-radius:999px!important} html[data-theme="light"] :where(input,select,textarea,.field){background:#fff!important;border:1px solid #8a8a8a!important;color:#1a1a1a!important;-webkit-text-fill-color:#1a1a1a!important;opacity:1!important;box-shadow:none!important;border-radius:7px!important} html[data-theme="light"] :where(input,textarea)::placeholder{color:#6b6b6b!important;opacity:1!important} html[data-theme="light"] option{background:#fff!important;color:#1a1a1a!important} html[data-theme="light"] input[type="range"]{accent-color:#0067c0!important} html[data-theme="light"] .setting-row{border-bottom:1px solid #e3e3e3!important} html[data-theme="light"] .setting-row span{color:#5d5d5d!important;-webkit-text-fill-color:#5d5d5d!important} /* Tables */ html[data-theme="light"] table{background:#fff!important;border:1px solid #d6d6d6!important;border-collapse:separate!important;border-spacing:0!important;border-radius:10px!important;overflow:hidden!important} html[data-theme="light"] th{background:#f3f3f3!important;color:#1a1a1a!important;-webkit-text-fill-color:#1a1a1a!important;border-color:#d6d6d6!important} html[data-theme="light"] td{color:#323130!important;-webkit-text-fill-color:#323130!important;border-color:#e3e3e3!important;background:#fff!important} html[data-theme="light"] tbody tr:nth-child(even) td{background:#fafafa!important} html[data-theme="light"] tbody tr:hover td{background:#f1f7fb!important} /* Scores: explicit fix for black-on-black and washed-out values */ html[data-theme="light"] .score-grid{gap:10px!important} html[data-theme="light"] .score, html[data-theme="light"] .technical-card, html[data-theme="light"] .report-metric, html[data-theme="light"] .report-stat, html[data-theme="light"] .home-stat, html[data-theme="light"] .metric{ background:#fff!important;border:1px solid #d6d6d6!important;color:#1a1a1a!important;box-shadow:0 1px 2px rgba(0,0,0,.04)!important } html[data-theme="light"] .score small, html[data-theme="light"] .technical-card small, html[data-theme="light"] .report-metric small, html[data-theme="light"] .report-stat small, html[data-theme="light"] .home-stat small, html[data-theme="light"] .metric small{color:#5d5d5d!important;-webkit-text-fill-color:#5d5d5d!important;opacity:1!important} html[data-theme="light"] .score strong, html[data-theme="light"] .technical-card strong, html[data-theme="light"] .report-metric strong, html[data-theme="light"] .report-stat strong, html[data-theme="light"] .home-stat strong, html[data-theme="light"] .metric strong{color:#003e75!important;-webkit-text-fill-color:#003e75!important;opacity:1!important} html[data-theme="light"] .score span, html[data-theme="light"] .technical-card span, html[data-theme="light"] .report-metric span, html[data-theme="light"] .report-stat span, html[data-theme="light"] .home-stat span, html[data-theme="light"] .metric span{color:#5d5d5d!important;-webkit-text-fill-color:#5d5d5d!important;opacity:1!important} html[data-theme="light"] .technical-card[data-state="high"]{border-left:4px solid #0f7b0f!important} html[data-theme="light"] .technical-card[data-state="medium"]{border-left:4px solid #9d5d00!important} html[data-theme="light"] .technical-card[data-state="learning"]{border-left:4px solid #0078d4!important} html[data-theme="light"] .technical-card[data-state="learning"] strong{color:#5d5d5d!important;-webkit-text-fill-color:#5d5d5d!important} /* Report score module */ html[data-theme="light"] .report-belcanto-score{background:#fff!important;border:1px solid #d6d6d6!important;box-shadow:var(--shadow)!important} html[data-theme="light"] .report-belcanto-score:after{display:none!important} html[data-theme="light"] .report-belcanto-score>small{color:#5d5d5d!important;-webkit-text-fill-color:#5d5d5d!important} html[data-theme="light"] .report-score-ring{background:radial-gradient(circle,#fff 54%,transparent 56%),conic-gradient(#0078d4 var(--score-angle,0deg),#e5e5e5 0)!important;box-shadow:none!important} html[data-theme="light"] .report-score-ring strong{color:#003e75!important;-webkit-text-fill-color:#003e75!important} html[data-theme="light"] .report-score-ring span{color:#5d5d5d!important;-webkit-text-fill-color:#5d5d5d!important} html[data-theme="light"] .report-score-stars{color:#9d5d00!important;text-shadow:none!important} html[data-theme="light"] .report-belcanto-score p,html[data-theme="light"] .report-belcanto-score em{color:#5d5d5d!important;-webkit-text-fill-color:#5d5d5d!important} html[data-theme="light"] .report-confidence{background:#f7f7f7!important;border:1px solid #d6d6d6!important} html[data-theme="light"] .report-confidence strong{color:#003e75!important;-webkit-text-fill-color:#003e75!important} html[data-theme="light"] .report-confidence :where(small,span){color:#5d5d5d!important;-webkit-text-fill-color:#5d5d5d!important} html[data-theme="light"] .report-metric .meter{background:#e5e5e5!important}.report-metric .meter i{background:#0078d4!important} /* App flow and page titles */ html[data-theme="light"] .section-title{padding:16px 18px!important;border:1px solid #d6d6d6!important;border-radius:12px!important;background:rgba(255,255,255,.92)!important;box-shadow:var(--shadow)!important} html[data-theme="light"] .app-flow-overview{background:#fff!important;border:1px solid #d6d6d6!important;box-shadow:var(--shadow)!important;color:#1a1a1a!important} html[data-theme="light"] .app-flow-overview :where(span,strong,b){color:#1a1a1a!important;-webkit-text-fill-color:#1a1a1a!important} html[data-theme="light"] .app-flow-overview small{color:#5d5d5d!important;-webkit-text-fill-color:#5d5d5d!important} html[data-theme="light"] .flow-overview-step{background:#f7f7f7!important;border:1px solid #d6d6d6!important;color:#323130!important;-webkit-text-fill-color:#323130!important} html[data-theme="light"] .flow-overview-step *{color:inherit!important;-webkit-text-fill-color:inherit!important} html[data-theme="light"] .flow-overview-step.is-current{background:#e6f2fb!important;border-color:#8bc9ef!important;color:#003e75!important;-webkit-text-fill-color:#003e75!important;box-shadow:inset 3px 0 0 #0078d4!important} /* Practice stage and live charts */ html[data-theme="light"] .lane,html[data-theme="light"] canvas,html[data-theme="light"] .chart-shell{background:#fff!important;border:1px solid #d6d6d6!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)!important} html[data-theme="light"] .control-strip{background:rgba(250,250,250,.94)!important;border:1px solid #cfcfcf!important;box-shadow:0 8px 28px rgba(0,0,0,.14)!important;backdrop-filter:blur(24px) saturate(140%)!important} html[data-theme="light"] .control-strip :where(small,span,label){color:#323130!important;-webkit-text-fill-color:#323130!important} html[data-theme="light"] .round-btn{background:#fff!important;border:1px solid #c7c7c7!important;color:#003e75!important;-webkit-text-fill-color:#003e75!important;box-shadow:0 1px 3px rgba(0,0,0,.08)!important} html[data-theme="light"] .round-btn.record{background:#c42b1c!important;border-color:#a7281c!important;color:#fff!important;-webkit-text-fill-color:#fff!important} html[data-theme="light"] .tiny{background:#f5f5f5!important;border:1px solid #d6d6d6!important;color:#323130!important;-webkit-text-fill-color:#323130!important} /* Modal / ContentDialog */ html[data-theme="light"] .modal-backdrop{background:rgba(32,32,32,.36)!important;backdrop-filter:blur(4px)!important} html[data-theme="light"] .modal,html[data-theme="light"] .readiness-modal,html[data-theme="light"] .lesson-brief-modal,html[data-theme="light"] .post-session-modal,html[data-theme="light"] .voice-command-modal{ background:#fff!important;border:1px solid #cfcfcf!important;border-radius:12px!important;box-shadow:0 16px 44px rgba(0,0,0,.24)!important;color:#1a1a1a!important } html[data-theme="light"] .modal :where(h1,h2,h3,h4,strong,b),html[data-theme="light"] .readiness-modal :where(h1,h2,h3,h4,strong,b){color:#1a1a1a!important;-webkit-text-fill-color:#1a1a1a!important} html[data-theme="light"] .modal :where(p,small,label,span,em),html[data-theme="light"] .readiness-modal :where(p,small,label,span,em){color:#5d5d5d!important;-webkit-text-fill-color:#5d5d5d!important;opacity:1!important} html[data-theme="light"] .choice{background:#fff!important;border:1px solid #c7c7c7!important;color:#1a1a1a!important;-webkit-text-fill-color:#1a1a1a!important;box-shadow:none!important} html[data-theme="light"] .choice:hover{background:#f5f5f5!important;border-color:#8a8a8a!important} html[data-theme="light"] .choice.selected,html[data-theme="light"] .choice.multi.selected{background:#e6f2fb!important;border:2px solid #0078d4!important;color:#003e75!important;-webkit-text-fill-color:#003e75!important;box-shadow:none!important} html[data-theme="light"] .choice:disabled{background:#f0f0f0!important;color:#8a8a8a!important;-webkit-text-fill-color:#8a8a8a!important} /* Fach page: one coherent Fluent hierarchy */ html[data-theme="light"] .fach-hero{background:#fff!important;border:1px solid #d6d6d6!important;color:#1a1a1a!important;box-shadow:var(--shadow)!important} html[data-theme="light"] .fach-hero :where(h2,h3,h4){color:#1a1a1a!important;-webkit-text-fill-color:#1a1a1a!important} html[data-theme="light"] .fach-hero :where(p,small,label,span){color:#5d5d5d!important;-webkit-text-fill-color:#5d5d5d!important} html[data-theme="light"] .fach-hero-badge{background:#f3f3f3!important;border:1px solid #d6d6d6!important;color:#1a1a1a!important;box-shadow:none!important} html[data-theme="light"] .fach-primary-card{border-top:3px solid #0078d4!important} html[data-theme="light"] .fach-description-card{border-top:3px solid #9d5d00!important} html[data-theme="light"] .fach-evidence-card{border-top:3px solid #744da9!important} html[data-theme="light"] .fach-suggestion-card{border-top:3px solid #c42b1c!important} html[data-theme="light"] .fach-protocol-card,html[data-theme="light"] .fach-formula-card{border-top:3px solid #0f7b0f!important} html[data-theme="light"] .fach-primary-score{background:#f7f7f7!important;border:1px solid #d6d6d6!important} html[data-theme="light"] .fach-primary-score strong{color:#003e75!important;-webkit-text-fill-color:#003e75!important} html[data-theme="light"] .fach-card-head small{color:#5d5d5d!important;-webkit-text-fill-color:#5d5d5d!important} html[data-theme="light"] .fach-candidate.primary{background:#e6f2fb!important;border-color:#8bc9ef!important} html[data-theme="light"] .fach-recommendation{background:#f7f7f7!important;border:1px solid #d6d6d6!important;border-left:4px solid #0078d4!important;color:#1a1a1a!important} html[data-theme="light"] .fach-protocol-step.complete{background:#eef9f0!important;border-color:#9bcba3!important} /* Status, toast, links, code */ html[data-theme="light"] .report-status{background:#eef9f0!important;border:1px solid #9bcba3!important;color:#0f5c1b!important;-webkit-text-fill-color:#0f5c1b!important} html[data-theme="light"] .report-status.caution{background:#fff8e5!important;border-color:#e1c16d!important;color:#6a4200!important;-webkit-text-fill-color:#6a4200!important} html[data-theme="light"] .report-status.high{background:#fff2f0!important;border-color:#e8aaa2!important;color:#8b1b11!important;-webkit-text-fill-color:#8b1b11!important} html[data-theme="light"] .report-status.neutral{background:#e6f2fb!important;border-color:#8bc9ef!important;color:#003e75!important;-webkit-text-fill-color:#003e75!important} html[data-theme="light"] .toast{background:#fff!important;border:1px solid #cfcfcf!important;color:#1a1a1a!important;-webkit-text-fill-color:#1a1a1a!important;box-shadow:0 12px 36px rgba(0,0,0,.22)!important} html[data-theme="light"] .toast *{color:inherit!important;-webkit-text-fill-color:inherit!important} html[data-theme="light"] .text-action,html[data-theme="light"] a{color:#0067c0!important;-webkit-text-fill-color:#0067c0!important;text-underline-offset:3px!important} html[data-theme="light"] .icon-btn{background:#fff!important;border:1px solid #c7c7c7!important;color:#003e75!important;-webkit-text-fill-color:#003e75!important} html[data-theme="light"] code{background:#f3f3f3!important;border:1px solid #d6d6d6!important;color:#1a1a1a!important;-webkit-text-fill-color:#1a1a1a!important} html[data-theme="light"] .help-version-badge{background:#e6f2fb!important;border:1px solid #8bc9ef!important;box-shadow:none!important} html[data-theme="light"] .help-version-badge small{color:#5d5d5d!important;-webkit-text-fill-color:#5d5d5d!important} html[data-theme="light"] .help-version-badge strong,html[data-theme="light"] .help-version-badge span{color:#003e75!important;-webkit-text-fill-color:#003e75!important} /* SVG and diagram labels */ html[data-theme="light"] :where(.trajectory-svg-label,.trajectory-svg-value){fill:#323130!important} html[data-theme="light"] :where(.trajectory-radar-grid,.trajectory-radar-axis){stroke:#cfcfcf!important} html[data-theme="light"] .trajectory-radar-area{fill:rgba(0,120,212,.16)!important;stroke:#0078d4!important} html[data-theme="light"] .trajectory-radar-dot{fill:#0078d4!important} /* Mobile keeps Fluent hierarchy */ @media(max-width:820px){ html[data-theme="light"] .topbar{background:rgba(250,250,250,.96)!important} html[data-theme="light"] .sidebar{background:#f3f3f3!important;border-right:0!important;border-bottom:1px solid #d6d6d6!important} } @media(prefers-reduced-motion:reduce){html[data-theme="light"] *{transition:none!important;animation:none!important}} html[data-theme="light"] *{scrollbar-color:#8a8a8a #f3f3f3} /* V7.0.36 · Remaining component coverage and contrast lock */ html[data-theme="light"] :where(.live-card,.feedback-card,.reflection,.rest-overlay,.note-result,.phrase-status>div,.readiness-ring,.dynamic-assessment-card,.technical-summary,.report-rec-card,.voice-coordination-card,.help-search-card,.daily-technique-card,.today-panel,.home-reflection-panel,.measurement-boundary,.expert-sources,.safety-hero,.about-card,.author-bio,.author-facts,.author-philosophy){ background:#fff!important;border:1px solid #d6d6d6!important;color:#1a1a1a!important;box-shadow:0 1px 2px rgba(0,0,0,.04)!important;opacity:1!important;backdrop-filter:none!important } html[data-theme="light"] :where(.live-card,.feedback-card,.reflection,.rest-overlay,.note-result,.phrase-status>div,.readiness-ring,.dynamic-assessment-card,.technical-summary,.report-rec-card,.voice-coordination-card,.help-search-card,.daily-technique-card,.today-panel,.home-reflection-panel,.measurement-boundary,.expert-sources,.safety-hero,.about-card,.author-bio,.author-facts,.author-philosophy) :where(h1,h2,h3,h4,h5,strong,b){color:#1a1a1a!important;-webkit-text-fill-color:#1a1a1a!important;opacity:1!important} html[data-theme="light"] :where(.live-card,.feedback-card,.reflection,.rest-overlay,.note-result,.phrase-status>div,.readiness-ring,.dynamic-assessment-card,.technical-summary,.report-rec-card,.voice-coordination-card,.help-search-card,.daily-technique-card,.today-panel,.home-reflection-panel,.measurement-boundary,.expert-sources,.safety-hero,.about-card,.author-bio,.author-facts,.author-philosophy) :where(p,small,label,span,em){color:#5d5d5d!important;-webkit-text-fill-color:#5d5d5d!important;opacity:1!important} html[data-theme="light"] .live-card strong{color:#003e75!important;-webkit-text-fill-color:#003e75!important} html[data-theme="light"] .readiness-ring{background:#f7f7f7!important;border:6px solid #d6d6d6!important} html[data-theme="light"] .readiness-ring strong{color:#003e75!important;-webkit-text-fill-color:#003e75!important} html[data-theme="light"] .note-chip{background:#e6f2fb!important;border:1px solid #8bc9ef!important;color:#003e75!important;-webkit-text-fill-color:#003e75!important} html[data-theme="light"] .note-chip.top{background:#fff8e5!important;border-color:#e1c16d!important;color:#6a4200!important;-webkit-text-fill-color:#6a4200!important} html[data-theme="light"] :where(.round-chip,.note-dispute-btn){background:#f5f5f5!important;border:1px solid #d6d6d6!important;color:#323130!important;-webkit-text-fill-color:#323130!important} html[data-theme="light"] .note-result.pass{background:#eef9f0!important;border-color:#9bcba3!important} html[data-theme="light"] :where(.note-result.review,.note-result.near){background:#fff8e5!important;border-color:#e1c16d!important} html[data-theme="light"] :where(.note-result.missing,.note-result.miss){background:#fff2f0!important;border-color:#e8aaa2!important} html[data-theme="light"] .note-result.uncertain{background:#f5f5f5!important;border-color:#d6d6d6!important} html[data-theme="light"] :where(.notice.error){background:#fff2f0!important;border-color:#e8aaa2!important;color:#8b1b11!important;-webkit-text-fill-color:#8b1b11!important} html[data-theme="light"] :where(.notice.success){background:#eef9f0!important;border-color:#9bcba3!important;color:#0f5c1b!important;-webkit-text-fill-color:#0f5c1b!important} html[data-theme="light"] .symptom{min-height:58px!important;background:#fff!important;border:1px solid #c7c7c7!important;color:#1a1a1a!important;-webkit-text-fill-color:#1a1a1a!important;font-weight:650!important;box-shadow:none!important;opacity:1!important;border-radius:8px!important} html[data-theme="light"] .symptom:hover{background:#f5f5f5!important;border-color:#8a8a8a!important} html[data-theme="light"] .symptom.selected{background:#e6f2fb!important;border:2px solid #0078d4!important;color:#003e75!important;-webkit-text-fill-color:#003e75!important;box-shadow:none!important} html[data-theme="light"] .lesson-brief-body{color:#323130!important;-webkit-text-fill-color:#323130!important} html[data-theme="light"] .lesson-brief-kicker{color:#0067c0!important;-webkit-text-fill-color:#0067c0!important} html[data-theme="light"] .lesson-brief-note{background:#f7f7f7!important;border-left:3px solid #0078d4!important;color:#5d5d5d!important;-webkit-text-fill-color:#5d5d5d!important} html[data-theme="light"] .daily-technique-kicker span,html[data-theme="light"] .eyebrow{color:#0067c0!important;-webkit-text-fill-color:#0067c0!important} html[data-theme="light"] .technique-instruction-grid section{background:#f7f7f7!important;border:1px solid #e1e1e1!important;color:#1a1a1a!important} html[data-theme="light"] .technique-instruction-grid section :where(p,small,span){color:#5d5d5d!important;-webkit-text-fill-color:#5d5d5d!important} html[data-theme="light"] .technique-step-main{background:#e6f2fb!important;border-color:#8bc9ef!important} html[data-theme="light"] :where(.technique-do,.technique-avoid){background:#f7f7f7!important;border:1px solid #d6d6d6!important;color:#1a1a1a!important} html[data-theme="light"] .technique-do{border-left:4px solid #0f7b0f!important} html[data-theme="light"] .technique-avoid{border-left:4px solid #c42b1c!important} html[data-theme="light"] .feedback-auto,html[data-theme="light"] .autonomy-note{color:#5d5d5d!important;-webkit-text-fill-color:#5d5d5d!important;opacity:1!important} html[data-theme="light"] .voice-branch-card{ background:#fff!important;border:1px solid #c7c7c7!important;color:#1a1a1a!important;-webkit-text-fill-color:#1a1a1a!important;border-radius:10px!important;box-shadow:0 1px 2px rgba(0,0,0,.04)!important;transform:none!important } html[data-theme="light"] .voice-branch-card strong{color:#1a1a1a!important;-webkit-text-fill-color:#1a1a1a!important} html[data-theme="light"] .voice-branch-card span,html[data-theme="light"] .voice-branch-card small{color:#5d5d5d!important;-webkit-text-fill-color:#5d5d5d!important} html[data-theme="light"] .voice-branch-card:hover{background:#f5f5f5!important;border-color:#8a8a8a!important} html[data-theme="light"] .voice-branch-card.selected{background:#e6f2fb!important;border:2px solid #0078d4!important;color:#003e75!important;-webkit-text-fill-color:#003e75!important} html[data-theme="light"] .personal-demo-card{background:#fff!important;border:1px solid #d6d6d6!important;color:#1a1a1a!important;box-shadow:0 1px 2px rgba(0,0,0,.04)!important} html[data-theme="light"] .personal-demo-card small{color:#0067c0!important;-webkit-text-fill-color:#0067c0!important} html[data-theme="light"] .personal-demo-card strong{color:#1a1a1a!important;-webkit-text-fill-color:#1a1a1a!important} html[data-theme="light"] .personal-demo-card p{color:#5d5d5d!important;-webkit-text-fill-color:#5d5d5d!important} html[data-theme="light"] .v7-mark{background:#e6f2fb!important;border:1px solid #8bc9ef!important;color:#003e75!important;-webkit-text-fill-color:#003e75!important} html[data-theme="light"] .home-learning-ornament,html[data-theme="light"] .step-label,html[data-theme="light"] .voice-coach-icon{color:#0067c0!important;-webkit-text-fill-color:#0067c0!important} html[data-theme="light"] .voice-coach-icon{background:#e6f2fb!important;border:1px solid #8bc9ef!important;box-shadow:none!important} html[data-theme="light"] button:disabled,html[data-theme="light"] .btn:disabled,html[data-theme="light"] [aria-disabled="true"]{color:#666!important;-webkit-text-fill-color:#666!important} html[data-theme="light"] .quiz-result,html[data-theme="light"] .author-disclaimer{color:#5d5d5d!important;-webkit-text-fill-color:#5d5d5d!important;opacity:1!important} html[data-theme="light"] .practice-now-step>span,html[data-theme="light"] .flow-overview-step>span{color:#003e75!important;-webkit-text-fill-color:#003e75!important;background:#e6f2fb!important;border:1px solid #8bc9ef!important} /* V7.0.36 · Windows 11 Light visual defect hotfix */ html[data-theme="light"] .brand{ display:grid!important; grid-template-columns:58px minmax(0,1fr)!important; align-items:center!important; gap:16px!important; padding:10px 8px 24px!important; } html[data-theme="light"] .brand-mark{ width:58px!important;height:58px!important;border-radius:18px!important; background:#fff url("assets/app-icon.png") center/cover no-repeat!important; border:1px solid #c9d7e5!important; box-shadow:0 8px 20px rgba(0,120,212,.16)!important; } html[data-theme="light"] .brand h1{ display:flex!important;align-items:center!important;gap:9px!important; margin:0!important;font-size:24px!important;line-height:1.08!important; color:#1b1b1b!important;-webkit-text-fill-color:#1b1b1b!important; white-space:nowrap!important; } html[data-theme="light"] .brand p{ margin:6px 0 0!important;color:#616161!important;-webkit-text-fill-color:#616161!important; font-size:13px!important;line-height:1.45!important;max-width:160px!important; } html[data-theme="light"] .v7-mark{ display:inline-flex!important;align-items:center!important;justify-content:center!important; min-width:38px!important;height:26px!important;padding:0 8px!important; border-radius:999px!important;background:#e8f3fb!important;border:1px solid #69afe5!important; color:#005a9e!important;-webkit-text-fill-color:#005a9e!important; font-size:12px!important;font-weight:800!important;line-height:1!important;vertical-align:middle!important; } html[data-theme="light"] .readiness-ring{ width:112px!important;height:112px!important; background:conic-gradient(#0078d4 0 var(--readiness-progress,88%),#d9d9d9 var(--readiness-progress,88%) 100%)!important; border:0!important;box-shadow:0 3px 10px rgba(0,0,0,.10)!important; } html[data-theme="light"] .readiness-ring:before{ inset:11px!important;background:#fff!important;border:1px solid #d6d6d6!important; box-shadow:inset 0 0 0 1px #fff!important; } html[data-theme="light"] .readiness-ring strong{ color:#005a9e!important;-webkit-text-fill-color:#005a9e!important; font-size:30px!important;font-weight:800!important; } html[data-theme="light"] .readiness-copy small{color:#36536f!important;-webkit-text-fill-color:#36536f!important;font-size:14px!important} html[data-theme="light"] .readiness-copy b{color:#10213b!important;-webkit-text-fill-color:#10213b!important;font-size:24px!important} html[data-theme="light"] .readiness-copy p{color:#36536f!important;-webkit-text-fill-color:#36536f!important;font-size:15px!important} html[data-theme="light"] .author-hero{ border:1px solid #c7c7c7!important;background:#111!important; } html[data-theme="light"] .author-hero:after{ background:linear-gradient(90deg,rgba(3,11,20,.92) 0%,rgba(3,11,20,.74) 42%,rgba(3,11,20,.24) 76%,rgba(3,11,20,.10) 100%)!important; } html[data-theme="light"] .author-hero-overlay{ background:rgba(3,11,20,.52)!important;border:1px solid rgba(255,255,255,.12)!important; border-radius:22px!important;padding:28px 30px!important; box-shadow:0 18px 50px rgba(0,0,0,.34)!important; backdrop-filter:blur(8px)!important; } html[data-theme="light"] .author-hero-overlay .eyebrow{ color:#54c8ff!important;-webkit-text-fill-color:#54c8ff!important;font-weight:850!important; } html[data-theme="light"] .author-hero-overlay h3{ color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:0 2px 10px rgba(0,0,0,.45)!important; } html[data-theme="light"] .author-hero-overlay p{ color:#eaf4fb!important;-webkit-text-fill-color:#eaf4fb!important;opacity:1!important; } html[data-theme="light"] .score, html[data-theme="light"] .report-stat, html[data-theme="light"] .metric, html[data-theme="light"] .home-stat, html[data-theme="light"] .technical-metric, html[data-theme="light"] .dynamic-score-grid .score{ background:#fff!important;border:1px solid #c7d4e0!important; box-shadow:0 1px 2px rgba(0,0,0,.05)!important;color:#10213b!important; } html[data-theme="light"] .score small, html[data-theme="light"] .report-stat small, html[data-theme="light"] .metric small, html[data-theme="light"] .home-stat small, html[data-theme="light"] .technical-metric small{ color:#4f6272!important;-webkit-text-fill-color:#4f6272!important;font-weight:650!important; } html[data-theme="light"] .score strong, html[data-theme="light"] .report-stat strong, html[data-theme="light"] .metric strong, html[data-theme="light"] .home-stat strong, html[data-theme="light"] .technical-metric strong{ color:#005a9e!important;-webkit-text-fill-color:#005a9e!important;font-weight:800!important; } html[data-theme="light"] .report-score-ring, html[data-theme="light"] .report-belcanto-score, html[data-theme="light"] .report-score-card{ background:#fff!important;border-color:#c7d4e0!important;color:#10213b!important; } html[data-theme="light"] .report-score-ring strong, html[data-theme="light"] .report-belcanto-score strong{ color:#005a9e!important;-webkit-text-fill-color:#005a9e!important; } html[data-theme="light"] .report-score-ring span, html[data-theme="light"] .report-belcanto-score :where(span,small,p,em){ color:#4f6272!important;-webkit-text-fill-color:#4f6272!important;opacity:1!important; } html[data-theme="light"] [disabled], html[data-theme="light"] .disabled, html[data-theme="light"] .is-disabled{ color:#5f6b75!important;-webkit-text-fill-color:#5f6b75!important;opacity:1!important; } html[data-theme="light"] button:disabled, html[data-theme="light"] .btn:disabled{ background:#e7ebef!important;border-color:#c7cdd3!important;color:#5f6b75!important;-webkit-text-fill-color:#5f6b75!important; } /* Firebase web deployment: authentication gate and sync status */ body.auth-locked{overflow:hidden} .auth-gate{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:24px;background:linear-gradient(135deg,rgba(242,247,255,.98),rgba(250,250,253,.98));backdrop-filter:blur(14px)} html[data-theme="dark"] .auth-gate{background:linear-gradient(135deg,rgba(15,23,42,.98),rgba(17,24,39,.98))} .auth-gate[hidden]{display:none!important} .auth-card{width:min(520px,100%);padding:34px;border:1px solid var(--border,#dbe3ef);border-radius:24px;background:var(--card,#fff);box-shadow:0 24px 70px rgba(15,23,42,.18)} .auth-brand-mark{width:58px;height:58px;margin-bottom:18px;border-radius:18px;background:linear-gradient(145deg,#d1a94c,#805b13);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),0 10px 25px rgba(128,91,19,.25);position:relative} .auth-brand-mark:after{content:"♪";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:34px;font-weight:700} .auth-eyebrow{margin:0 0 8px;color:var(--accent,#72521a);font-size:.78rem;font-weight:800;letter-spacing:.12em} .auth-card h1{margin:0 0 12px;font-size:clamp(1.65rem,4vw,2.2rem);line-height:1.15} .auth-intro,.auth-privacy{color:var(--muted,#5f6b7a);line-height:1.6} .auth-card form{display:grid;gap:10px;margin-top:22px} .auth-card label{font-weight:750;margin-top:4px} .auth-card input{width:100%;box-sizing:border-box;padding:14px 15px;border:1px solid var(--border,#cfd8e6);border-radius:12px;background:var(--input-bg,#fff);color:var(--text,#172033);font:inherit;outline:none} .auth-card input:focus{border-color:#80611d;box-shadow:0 0 0 3px rgba(128,97,29,.14)} .auth-card button{margin-top:8px;justify-content:center} .auth-message{min-height:24px;margin-top:14px;padding:10px 12px;border-radius:10px;background:rgba(96,110,130,.08);color:var(--muted,#4c5969);font-size:.92rem} .auth-message.error{background:rgba(178,45,45,.10);color:#a12626} .auth-message.success{background:rgba(28,126,74,.10);color:#176a3d} .auth-privacy{margin:16px 0 0;font-size:.83rem} .cloud-account{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .cloud-account[hidden]{display:none!important} .cloud-logout-btn{min-height:34px;padding:6px 10px!important} .cloud-sync-pill .status-dot{flex:0 0 auto} @media(max-width:760px){.auth-gate{padding:12px}.auth-card{padding:24px 20px;border-radius:18px}.cloud-account{width:100%;justify-content:flex-end}.top-actions{align-items:flex-end}} /* BELCANTO_WEB_UI_HOTFIX_V4_BEGIN Combined web patch: autoscale/sidebar scrolling + dark-theme contrast. Visual-only CSS. Scoring, audio analysis, curriculum and Firebase data logic are unchanged. */ html, body{ min-height:100%; } body:not(.auth-locked){ overflow-y:auto; } body.studio-design .app, body.studio-design .main{ min-height:100vh; min-width:0; } body.studio-design .sidebar{ box-sizing:border-box; height:100vh; max-height:100vh; display:flex; flex-direction:column; overflow:hidden; } @supports (height:100dvh){ body.studio-design .app, body.studio-design .main{ min-height:100dvh; } body.studio-design .sidebar{ height:100dvh; max-height:100dvh; } } body.studio-design .brand{ flex:0 0 auto; } body.studio-design .nav{ flex:1 1 auto; min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding-bottom:14px; } body.studio-design .side-progress{ position:static; inset:auto; flex:0 0 auto; margin-top:10px; } html[data-theme="light"] body.studio-design .nav{ scrollbar-width:auto; scrollbar-color:#707070 #dedede; } html[data-theme="light"] body.studio-design .nav::-webkit-scrollbar{ width:11px; } html[data-theme="light"] body.studio-design .nav::-webkit-scrollbar-track{ background:#dedede; border-radius:999px; } html[data-theme="light"] body.studio-design .nav::-webkit-scrollbar-thumb{ background:#707070; border:2px solid #dedede; border-radius:999px; } @media (max-height:820px) and (min-width:761px){ body.studio-design .sidebar{ padding-top:12px; padding-bottom:10px; } body.studio-design .brand{ margin-bottom:7px; padding-bottom:10px; } body.studio-design .brand-mark{ width:42px; height:42px; } body.studio-design .brand h1{ font-size:17px; } body.studio-design .brand p{ display:none; } body.studio-design .nav{ gap:2px; } body.studio-design .nav button{ min-height:40px; padding:6px 9px; } body.flow-affordance .nav-flow-item{ min-height:48px; } body.studio-design .side-progress{ padding:9px 11px; } } @media (max-width:760px){ body.studio-design .sidebar{ display:block; height:auto; max-height:none; overflow:visible; } body.studio-design .nav{ flex:none; overflow:visible; scrollbar-gutter:auto; } body.studio-design .side-progress{ margin-top:0; } } /* Dark theme palette and contrast */ html[data-theme="dark"]{ color-scheme:dark; --card:#0d1b28; --border:#40566a; --input-bg:#071521; --text:#f6f9fb; --muted:#c0ccd5; } html[data-theme="dark"] body.studio-design{ --card:#0d1b28; --border:#40566a; --input-bg:#071521; --text:#f6f9fb; --muted:#c0ccd5; --muted-2:#9fb0bd; } html[data-theme="dark"] .auth-gate{ background: radial-gradient(circle at 14% 12%,rgba(216,180,106,.13),transparent 30%), radial-gradient(circle at 88% 8%,rgba(112,200,248,.12),transparent 32%), linear-gradient(145deg,#08121f 0%,#0b1727 54%,#07111d 100%)!important; } html[data-theme="dark"] .auth-card{ background:linear-gradient(155deg,#112335 0%,#0b1825 100%)!important; border:1px solid #496176!important; color:#f6f9fb!important; box-shadow:0 28px 80px rgba(0,0,0,.54),0 0 0 1px rgba(255,255,255,.025) inset!important; } html[data-theme="dark"] .auth-card h1{ color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; opacity:1!important; text-shadow:none!important; } html[data-theme="dark"] .auth-eyebrow{ color:#f0cf82!important; -webkit-text-fill-color:#f0cf82!important; opacity:1!important; } html[data-theme="dark"] .auth-intro, html[data-theme="dark"] .auth-privacy{ color:#c5d1da!important; -webkit-text-fill-color:#c5d1da!important; opacity:1!important; } html[data-theme="dark"] .auth-card label{ color:#eef4f8!important; -webkit-text-fill-color:#eef4f8!important; opacity:1!important; } html[data-theme="dark"] .auth-card input{ background:#071521!important; color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; caret-color:#f0cf82!important; border:1px solid #60788e!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important; opacity:1!important; } html[data-theme="dark"] .auth-card input::placeholder{ color:#aab9c5!important; -webkit-text-fill-color:#aab9c5!important; opacity:1!important; } html[data-theme="dark"] .auth-card input:hover{ border-color:#7892aa!important; } html[data-theme="dark"] .auth-card input:focus{ border-color:#e1bd6c!important; box-shadow:0 0 0 3px rgba(225,189,108,.20),inset 0 1px 0 rgba(255,255,255,.04)!important; } html[data-theme="dark"] .auth-card input:-webkit-autofill, html[data-theme="dark"] .auth-card input:-webkit-autofill:hover, html[data-theme="dark"] .auth-card input:-webkit-autofill:focus{ -webkit-text-fill-color:#ffffff!important; caret-color:#ffffff!important; -webkit-box-shadow:0 0 0 1000px #071521 inset!important; box-shadow:0 0 0 1000px #071521 inset!important; border-color:#60788e!important; transition:background-color 9999s ease-out 0s; } html[data-theme="dark"] .auth-card .btn, html[data-theme="dark"] #studentLoginBtn{ background:linear-gradient(135deg,#f2d58e,#c99a42)!important; color:#171006!important; -webkit-text-fill-color:#171006!important; border:1px solid #f6dda4!important; opacity:1!important; box-shadow:0 12px 30px rgba(201,154,66,.22)!important; } html[data-theme="dark"] .auth-card .btn:hover, html[data-theme="dark"] #studentLoginBtn:hover{ background:linear-gradient(135deg,#ffe6aa,#d9aa50)!important; color:#171006!important; -webkit-text-fill-color:#171006!important; } html[data-theme="dark"] .auth-card .btn:disabled, html[data-theme="dark"] #studentLoginBtn:disabled{ background:#394858!important; border-color:#536578!important; color:#d4dde4!important; -webkit-text-fill-color:#d4dde4!important; opacity:1!important; box-shadow:none!important; } html[data-theme="dark"] .auth-message{ background:#162838!important; border:1px solid #40586c!important; color:#cbd6de!important; -webkit-text-fill-color:#cbd6de!important; opacity:1!important; } html[data-theme="dark"] .auth-message.error{ background:#3a171d!important; border-color:#9e4b58!important; color:#ffd5da!important; -webkit-text-fill-color:#ffd5da!important; } html[data-theme="dark"] .auth-message.success{ background:#123225!important; border-color:#3f8b68!important; color:#c8f5dc!important; -webkit-text-fill-color:#c8f5dc!important; } html[data-theme="dark"] body.studio-design :where(input,select,textarea,.field){ background:#071521!important; color:#f7fafc!important; -webkit-text-fill-color:#f7fafc!important; border-color:#50677b!important; opacity:1!important; } html[data-theme="dark"] body.studio-design :where(input,textarea)::placeholder{ color:#a7b6c2!important; -webkit-text-fill-color:#a7b6c2!important; opacity:1!important; } html[data-theme="dark"] body.studio-design option{ background:#0b1926!important; color:#f7fafc!important; } html[data-theme="dark"] body.studio-design :where(input,select,textarea,.field):focus{ border-color:#d8b46a!important; box-shadow:0 0 0 3px rgba(216,180,106,.16)!important; } html[data-theme="dark"] body.studio-design :where(.report-stat,.auth-card){ background-color:#0d1b28; } html[data-theme="dark"] body.studio-design :where(.card,.panel,.report-stat,.report-section,.setting-card,.modal){ color:#f6f9fb; } html[data-theme="dark"] body.studio-design :where(.card,.panel,.report-stat,.report-section,.setting-card,.modal) :where(p,li,dd,dt,label,small,em){ color:#bdc9d2; opacity:1; } html[data-theme="dark"] body.studio-design :where(.card,.panel,.report-stat,.report-section,.setting-card,.modal) :where(h1,h2,h3,h4,h5,h6,strong,b){ color:#f6f9fb; opacity:1; } html[data-theme="dark"] body.studio-design :where(.btn,.sample-btn,.icon-btn,button):disabled{ opacity:.68; } html[data-theme="dark"] body.studio-design :where(.muted,.subtle,.caption){ color:#b7c4ce; opacity:1; } html[data-theme="dark"] :where(button,a,input,select,textarea):focus-visible{ outline:3px solid rgba(240,207,130,.85)!important; outline-offset:2px!important; } /* BELCANTO_WEB_UI_HOTFIX_V4_END */ /* BELCANTO V6 LAYOUT OVERLAP FIX */ :root { --sidebar-safe-width-v6: 292px; --content-gap-v6: 24px; } .app-shell, .app-layout, .main-layout, .layout-shell, .portal-shell, .shell, .app-grid { min-width: 0; } .sidebar, .left-sidebar, .app-sidebar, .portal-sidebar, .nav-sidebar, .side-panel { min-width: var(--sidebar-safe-width-v6) !important; width: var(--sidebar-safe-width-v6) !important; max-width: var(--sidebar-safe-width-v6) !important; box-sizing: border-box; overflow-x: hidden !important; } .sidebar-inner, .left-sidebar-inner, .app-sidebar-inner, .portal-sidebar-inner, .sidebar-content { min-width: 0; box-sizing: border-box; } .sidebar-brand, .brand-block, .app-brand, .portal-brand, .sidebar-header, .brand-header { display: flex; align-items: flex-start; gap: 14px; min-width: 0; width: 100%; } .sidebar-brand-text, .brand-text, .app-brand-text, .portal-brand-text, .sidebar-copy, .brand-copy { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; word-break: break-word; } .sidebar-brand-text h1, .brand-text h1, .app-brand-text h1, .portal-brand-text h1, .sidebar-copy h1, .brand-copy h1, .sidebar-copy .title, .brand-copy .title { margin-right: 0 !important; line-height: 1.15 !important; overflow-wrap: anywhere; word-break: break-word; } .sidebar-brand-text p, .brand-text p, .app-brand-text p, .portal-brand-text p, .sidebar-copy p, .brand-copy p, .sidebar-copy .subtitle, .brand-copy .subtitle { margin-right: 0 !important; line-height: 1.45 !important; overflow-wrap: anywhere; word-break: break-word; } .main-content, .content-area, .page-content, .right-panel, .portal-main, .main-panel, .main-view, .content-panel { min-width: 0 !important; box-sizing: border-box; overflow-x: hidden !important; padding-left: max(24px, var(--content-gap-v6)) !important; } .page-header, .content-header, .panel-header, .view-header { min-width: 0; } .page-header h1, .content-header h1, .panel-header h1, .view-header h1, .page-header .title, .content-header .title { overflow-wrap: anywhere; word-break: break-word; line-height: 1.15 !important; } @media (max-width: 1100px) { .sidebar, .left-sidebar, .app-sidebar, .portal-sidebar, .nav-sidebar, .side-panel { min-width: 100% !important; width: 100% !important; max-width: none !important; } .main-content, .content-area, .page-content, .right-panel, .portal-main, .main-panel, .main-view, .content-panel { padding-left: 20px !important; } } /* BELCANTO COMBINED FIX V9 */ /* ------------------------------ PART A. EXACT SIDEBAR BOUNDARY FIX ------------------------------ */ :root { --bc-sidebar-lg: 276px; --bc-sidebar-md: 232px; --bc-shell-gap: 0px; --bc-content-pad-x: 18px; } /* Shell and column boundary */ @media (min-width: 1181px) { .app-shell, .app-layout, .main-layout, .layout-shell, .portal-shell, .shell, .app-grid, .dashboard-layout, .workspace-layout { display: grid !important; grid-template-columns: var(--bc-sidebar-lg) minmax(0, 1fr) !important; column-gap: var(--bc-shell-gap) !important; } .sidebar, .left-sidebar, .app-sidebar, .portal-sidebar, .nav-sidebar, .side-panel { width: var(--bc-sidebar-lg) !important; min-width: var(--bc-sidebar-lg) !important; max-width: var(--bc-sidebar-lg) !important; } } @media (min-width: 901px) and (max-width: 1180px) { .app-shell, .app-layout, .main-layout, .layout-shell, .portal-shell, .shell, .app-grid, .dashboard-layout, .workspace-layout { display: grid !important; grid-template-columns: var(--bc-sidebar-md) minmax(0, 1fr) !important; column-gap: var(--bc-shell-gap) !important; } .sidebar, .left-sidebar, .app-sidebar, .portal-sidebar, .nav-sidebar, .side-panel { width: var(--bc-sidebar-md) !important; min-width: var(--bc-sidebar-md) !important; max-width: var(--bc-sidebar-md) !important; } } .sidebar, .left-sidebar, .app-sidebar, .portal-sidebar, .nav-sidebar, .side-panel { box-sizing: border-box !important; overflow-x: hidden !important; } .sidebar-inner, .left-sidebar-inner, .app-sidebar-inner, .portal-sidebar-inner, .sidebar-content, .side-panel-inner { min-width: 0 !important; box-sizing: border-box !important; } .sidebar-brand, .brand-block, .app-brand, .portal-brand, .sidebar-header, .brand-header, .brand-row { display: grid !important; grid-template-columns: 56px minmax(0, 1fr) !important; align-items: start !important; gap: 12px !important; min-width: 0 !important; width: 100% !important; } .sidebar-brand .version-badge, .brand-block .version-badge, .app-brand .version-badge, .portal-brand .version-badge, .sidebar-brand .badge, .brand-block .badge, .app-brand .badge, .portal-brand .badge { display: none !important; } .sidebar-brand-text, .brand-text, .app-brand-text, .portal-brand-text, .sidebar-copy, .brand-copy { min-width: 0 !important; width: 100% !important; overflow-wrap: anywhere !important; word-break: break-word !important; } .sidebar-brand-text h1, .brand-text h1, .app-brand-text h1, .portal-brand-text h1, .sidebar-copy h1, .brand-copy h1, .sidebar-copy .title, .brand-copy .title { font-size: clamp(22px, 2vw, 24px) !important; line-height: 1.1 !important; margin: 0 0 6px 0 !important; overflow-wrap: anywhere !important; word-break: break-word !important; } .sidebar-brand-text p, .brand-text p, .app-brand-text p, .portal-brand-text p, .sidebar-copy p, .brand-copy p, .sidebar-copy .subtitle, .brand-copy .subtitle { font-size: 14px !important; line-height: 1.42 !important; margin: 0 !important; overflow-wrap: anywhere !important; word-break: break-word !important; } .main-content, .content-area, .page-content, .right-panel, .portal-main, .main-panel, .main-view, .content-panel, .workspace-main { min-width: 0 !important; box-sizing: border-box !important; overflow-x: hidden !important; padding-left: var(--bc-content-pad-x) !important; } .page-header, .content-header, .panel-header, .view-header, .hero-header { min-width: 0 !important; overflow-wrap: anywhere !important; word-break: break-word !important; } .page-header h1, .content-header h1, .panel-header h1, .view-header h1, .hero-header h1, .page-header .title, .content-header .title { line-height: 1.1 !important; overflow-wrap: anywhere !important; word-break: break-word !important; } /* ------------------------------ PART B. AUTHOR HERO FIX ------------------------------ */ .author-hero, .about-author-hero, .author-banner, .author-profile-hero, .hero-author-section { position: relative !important; min-height: 420px !important; max-height: 520px !important; overflow: hidden !important; border-radius: 22px !important; } .author-hero img, .about-author-hero img, .author-banner img, .author-profile-hero img, .hero-author-section img, .author-hero .hero-image, .about-author-hero .hero-image, .author-banner .hero-image, .author-profile-hero .hero-image, .hero-author-section .hero-image { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 36% center !important; transform: none !important; } .author-hero::before, .about-author-hero::before, .author-banner::before, .author-profile-hero::before, .hero-author-section::before { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, rgba(0,0,0,0.12) 10%, rgba(0,0,0,0.18) 34%, rgba(0,0,0,0.54) 72%, rgba(0,0,0,0.68) 100%) !important; pointer-events: none !important; z-index: 1 !important; } .author-hero-card, .author-overlay-card, .author-hero .overlay-card, .about-author-hero .overlay-card, .author-banner .overlay-card, .author-profile-hero .overlay-card, .hero-author-section .overlay-card, .author-info-card, .author-hero .hero-copy, .about-author-hero .hero-copy, .author-banner .hero-copy, .author-profile-hero .hero-copy, .hero-author-section .hero-copy { position: absolute !important; right: clamp(20px, 4vw, 42px) !important; left: auto !important; bottom: clamp(18px, 4vw, 38px) !important; top: auto !important; width: min(520px, calc(100% - 44px)) !important; max-width: 520px !important; padding: clamp(20px, 3vw, 32px) !important; border-radius: 24px !important; background: rgba(6, 13, 24, 0.66) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border: 1px solid rgba(255,255,255,0.14) !important; box-shadow: 0 18px 44px rgba(0,0,0,0.24) !important; z-index: 2 !important; } .author-hero-card h1, .author-overlay-card h1, .author-info-card h1, .author-hero .hero-copy h1, .about-author-hero .hero-copy h1, .author-banner .hero-copy h1, .author-profile-hero .hero-copy h1, .hero-author-section .hero-copy h1 { margin: 0 0 14px 0 !important; font-size: clamp(34px, 4vw, 54px) !important; line-height: 1.04 !important; color: #ffffff !important; } .author-hero-card p, .author-overlay-card p, .author-info-card p, .author-hero .hero-copy p, .about-author-hero .hero-copy p, .author-banner .hero-copy p, .author-profile-hero .hero-copy p, .hero-author-section .hero-copy p, .author-hero-card .eyebrow, .author-overlay-card .eyebrow, .author-info-card .eyebrow { color: rgba(255,255,255,0.93) !important; } .author-hero-card .eyebrow, .author-overlay-card .eyebrow, .author-info-card .eyebrow, .author-hero .hero-copy .eyebrow, .about-author-hero .hero-copy .eyebrow, .author-banner .hero-copy .eyebrow, .author-profile-hero .hero-copy .eyebrow, .hero-author-section .hero-copy .eyebrow { display: inline-block !important; margin-bottom: 12px !important; font-size: 12px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; font-weight: 700 !important; color: #56c5ff !important; } @media (max-width: 900px) { .main-content, .content-area, .page-content, .right-panel, .portal-main, .main-panel, .main-view, .content-panel, .workspace-main { padding-left: 16px !important; } .author-hero, .about-author-hero, .author-banner, .author-profile-hero, .hero-author-section { min-height: auto !important; max-height: none !important; } .author-hero-card, .author-overlay-card, .author-hero .overlay-card, .about-author-hero .overlay-card, .author-banner .overlay-card, .author-profile-hero .overlay-card, .hero-author-section .overlay-card, .author-info-card, .author-hero .hero-copy, .about-author-hero .hero-copy, .author-banner .hero-copy, .author-profile-hero .hero-copy, .hero-author-section .hero-copy { position: static !important; width: auto !important; max-width: none !important; margin: 0 !important; border-radius: 18px !important; } } /* BELCANTO AUTHOR FACE RESTORE V10 */ /* Exact correction for the existing author markup: .author-hero > img + .author-hero-overlay */ .author-hero { position: relative !important; min-height: 430px !important; height: clamp(430px, 42vw, 560px) !important; max-height: none !important; overflow: hidden !important; background: #101419 !important; isolation: isolate !important; } /* Keep the actual portrait visible. The face is in the upper-left area of the source image, so vertical centering must not be used. */ .author-hero > img { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover !important; object-position: 38% 12% !important; opacity: 1 !important; filter: none !important; transform: none !important; z-index: 0 !important; } /* Remove the extra V8/V9 overlay layer. */ .author-hero::before { content: none !important; display: none !important; background: none !important; } /* Keep only one light directional overlay. The portrait side remains almost transparent; darkness increases only behind the text card. */ .author-hero::after { content: "" !important; position: absolute !important; inset: 0 !important; display: block !important; background: linear-gradient( 90deg, rgba(2, 8, 15, 0.00) 0%, rgba(2, 8, 15, 0.02) 38%, rgba(2, 8, 15, 0.13) 58%, rgba(2, 8, 15, 0.34) 76%, rgba(2, 8, 15, 0.50) 100% ) !important; opacity: 1 !important; pointer-events: none !important; z-index: 1 !important; } /* Move the existing text panel away from the face. */ .author-hero-overlay { position: absolute !important; left: auto !important; right: clamp(24px, 4vw, 48px) !important; top: auto !important; bottom: clamp(24px, 4vw, 42px) !important; width: min(520px, calc(100% - 64px)) !important; max-width: 520px !important; margin: 0 !important; padding: clamp(22px, 3vw, 30px) !important; box-sizing: border-box !important; border-radius: 22px !important; background: rgba(4, 11, 19, 0.42) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22) !important; backdrop-filter: blur(5px) saturate(112%) !important; -webkit-backdrop-filter: blur(5px) saturate(112%) !important; z-index: 2 !important; } .author-hero-overlay .eyebrow { color: #67d3ff !important; -webkit-text-fill-color: #67d3ff !important; opacity: 1 !important; } .author-hero-overlay h3 { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.34) !important; } .author-hero-overlay p { color: rgba(255, 255, 255, 0.94) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.94) !important; opacity: 1 !important; } /* Light theme must not add its old heavy overlay again. */ html[data-theme="light"] .author-hero::before { content: none !important; display: none !important; } html[data-theme="light"] .author-hero::after { background: linear-gradient( 90deg, rgba(2, 8, 15, 0.00) 0%, rgba(2, 8, 15, 0.02) 38%, rgba(2, 8, 15, 0.12) 58%, rgba(2, 8, 15, 0.31) 76%, rgba(2, 8, 15, 0.46) 100% ) !important; } html[data-theme="light"] .author-hero-overlay { background: rgba(4, 11, 19, 0.40) !important; border-color: rgba(255, 255, 255, 0.16) !important; box-shadow: 0 18px 46px rgba(0, 0, 0, 0.20) !important; } /* Mobile: show the photograph first and place the text below it, so the overlay never hides the face on narrow screens. */ @media (max-width: 760px) { .author-hero { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: hidden !important; } .author-hero > img { position: relative !important; inset: auto !important; width: 100% !important; height: 460px !important; object-position: 45% 8% !important; } .author-hero::after { content: none !important; display: none !important; } .author-hero-overlay { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: 100% !important; max-width: none !important; border-radius: 0 !important; background: rgba(4, 11, 19, 0.94) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; } } /* BELCANTO EXACT SHELL BRAND FIX V11 Root cause fixed: - V7.0.36 light-theme hotfix forced a 58px logo, 24px nowrap title, and 38px version badge into a text column that can be narrower than 160px. - Earlier generic patches forced sidebar widths independently of the real .app grid. */ /* 1. Restore the real two-column shell. The grid owns the sidebar width. */ @media (min-width:1251px){ body.studio-design .app{ display:grid!important; grid-template-columns:276px minmax(0,1fr)!important; gap:0!important; min-width:0!important; } body.studio-design .sidebar{ position:sticky!important; top:0!important; width:auto!important; min-width:0!important; max-width:none!important; height:100vh!important; } } @media (min-width:761px) and (max-width:1250px){ body.studio-design .app{ display:grid!important; grid-template-columns:232px minmax(0,1fr)!important; gap:0!important; min-width:0!important; } body.studio-design .sidebar{ position:sticky!important; top:0!important; width:auto!important; min-width:0!important; max-width:none!important; height:100vh!important; padding:18px 12px 14px!important; } } body.studio-design .main{ min-width:0!important; width:auto!important; max-width:none!important; margin:0!important; overflow-x:hidden!important; } /* 2. Keep the sidebar structure stable while the navigation itself scrolls. */ body.studio-design .sidebar{ box-sizing:border-box!important; display:flex!important; flex-direction:column!important; overflow:hidden!important; } body.studio-design .sidebar .nav{ flex:1 1 auto!important; min-height:0!important; overflow-x:hidden!important; overflow-y:auto!important; scrollbar-gutter:stable!important; } body.studio-design .side-progress{ flex:0 0 auto!important; margin-top:auto!important; } /* 3. Exact brand layout. No generic .brand aliases. */ body.studio-design .brand{ display:grid!important; grid-template-columns:52px minmax(0,1fr)!important; align-items:center!important; gap:12px!important; min-width:0!important; width:100%!important; box-sizing:border-box!important; padding:8px 7px 20px!important; } body.studio-design .brand-mark, html[data-theme="light"] body.studio-design .brand-mark{ width:52px!important; height:52px!important; min-width:52px!important; border-radius:17px!important; } body.studio-design .brand>div:last-child{ min-width:0!important; width:100%!important; overflow:visible!important; } body.studio-design .brand h1, html[data-theme="light"] body.studio-design .brand h1{ display:flex!important; flex-wrap:wrap!important; align-items:center!important; gap:4px!important; min-width:0!important; max-width:100%!important; margin:0!important; font-size:20px!important; line-height:1.08!important; white-space:normal!important; overflow-wrap:normal!important; word-break:normal!important; } body.studio-design .brand p, html[data-theme="light"] body.studio-design .brand p{ max-width:100%!important; margin:6px 0 0!important; font-size:12px!important; line-height:1.42!important; white-space:normal!important; overflow-wrap:break-word!important; word-break:normal!important; } body.studio-design .v7-mark, html[data-theme="light"] body.studio-design .v7-mark{ display:inline-flex!important; flex:0 0 auto!important; align-items:center!important; justify-content:center!important; min-width:0!important; width:auto!important; height:auto!important; margin:0!important; padding:2px 5px!important; border-radius:999px!important; font-size:7.5px!important; line-height:1.1!important; white-space:nowrap!important; } /* 4. Medium desktop: reduce the brand, rather than widening the sidebar over the main area. */ @media (min-width:761px) and (max-width:1250px){ body.studio-design .brand{ grid-template-columns:44px minmax(0,1fr)!important; gap:9px!important; padding:7px 5px 18px!important; } body.studio-design .brand-mark, html[data-theme="light"] body.studio-design .brand-mark{ width:44px!important; height:44px!important; min-width:44px!important; border-radius:14px!important; } body.studio-design .brand h1, html[data-theme="light"] body.studio-design .brand h1{ display:block!important; font-size:17px!important; line-height:1.12!important; } body.studio-design .v7-mark, html[data-theme="light"] body.studio-design .v7-mark{ display:flex!important; width:max-content!important; margin-top:4px!important; padding:2px 5px!important; font-size:7px!important; } body.studio-design .brand p, html[data-theme="light"] body.studio-design .brand p{ font-size:10.5px!important; line-height:1.38!important; } } /* 5. Mobile keeps the app's native stacked layout. */ @media (max-width:760px){ body.studio-design .app{display:block!important} body.studio-design .sidebar{ position:relative!important; width:auto!important; min-width:0!important; max-width:none!important; height:auto!important; overflow:visible!important; } body.studio-design .sidebar .nav{overflow:visible!important} } /* BELCANTO AUTHOR BANNER EMAIL FIX V12 */ .author-hero { position: relative !important; overflow: hidden !important; padding: 0 !important; min-height: 440px !important; background: linear-gradient(135deg, #071019 0%, #0b1725 100%) !important; display: block !important; } .author-hero > img { width: 100% !important; height: 440px !important; object-fit: contain !important; object-position: left center !important; display: block !important; background: transparent !important; filter: none !important; } .author-hero:after { content: none !important; } .author-hero-overlay { position: absolute !important; right: 34px !important; left: auto !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; width: min(520px, 44%) !important; max-width: 520px !important; padding: 24px 28px !important; border-radius: 24px !important; background: linear-gradient(180deg, rgba(6, 14, 24, 0.68) 0%, rgba(6, 14, 24, 0.56) 100%) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border: 1px solid rgba(255,255,255,0.12) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.22) !important; } .author-hero-overlay .eyebrow { display: inline-block !important; margin-bottom: 10px !important; font-size: 12px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #66cbff !important; font-weight: 700 !important; } .author-hero-overlay h3 { font-size: clamp(34px, 4vw, 48px) !important; line-height: 1.05 !important; margin: 0 0 14px 0 !important; color: #ffffff !important; } .author-hero-overlay p { font-size: 18px !important; line-height: 1.55 !important; color: rgba(255,255,255,0.94) !important; margin: 0 0 10px 0 !important; } .author-hero-overlay .author-contact { margin-top: 14px !important; font-size: 16px !important; line-height: 1.5 !important; color: rgba(255,255,255,0.96) !important; } .author-hero-overlay .author-contact a { color: #8dd8ff !important; text-decoration: underline !important; text-underline-offset: 3px !important; word-break: break-word !important; } .author-hero-overlay .author-contact a:hover { color: #bde9ff !important; } @media (max-width: 980px) { .author-hero { min-height: auto !important; } .author-hero > img { height: 360px !important; object-position: center top !important; } .author-hero-overlay { position: static !important; transform: none !important; width: auto !important; max-width: none !important; margin: 18px !important; } } /* BELCANTO AUTHOR BANNER EMAIL FIX V13 BEGIN */ /* Show the full portrait and piano instead of cropping or covering the face. */ .author-hero { position: relative !important; display: grid !important; grid-template-columns: minmax(0, 1.45fr) minmax(360px, 0.75fr) !important; align-items: stretch !important; min-height: 440px !important; height: auto !important; max-height: none !important; padding: 0 !important; overflow: hidden !important; border-radius: 24px !important; background: linear-gradient(145deg, #07111d 0%, #0d1c2b 100%) !important; isolation: isolate !important; } .author-hero > img { position: relative !important; inset: auto !important; z-index: 1 !important; display: block !important; width: 100% !important; height: 100% !important; min-height: 440px !important; max-height: 560px !important; object-fit: contain !important; object-position: center center !important; opacity: 1 !important; filter: none !important; transform: none !important; background: #050b12 !important; } /* Remove every older full-banner overlay. */ .author-hero::before, .author-hero::after, html[data-theme="light"] .author-hero::before, html[data-theme="light"] .author-hero::after { content: none !important; display: none !important; background: none !important; } /* The biography becomes a separate panel, so it cannot cover the face. */ .author-hero-overlay, body.studio-design .author-hero-overlay, html[data-theme="light"] .author-hero-overlay { position: relative !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; z-index: 2 !important; transform: none !important; display: flex !important; flex-direction: column !important; justify-content: center !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: clamp(28px, 4vw, 48px) !important; box-sizing: border-box !important; border: 0 !important; border-left: 1px solid rgba(255,255,255,.12) !important; border-radius: 0 !important; background: linear-gradient(155deg, rgba(12,28,43,.98), rgba(5,14,24,.98)) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .author-hero-overlay .eyebrow { margin: 0 0 12px !important; color: #6dd1ff !important; -webkit-text-fill-color: #6dd1ff !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: .12em !important; text-transform: uppercase !important; opacity: 1 !important; } .author-hero-overlay h3 { margin: 0 0 16px !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-size: clamp(35px, 3.5vw, 52px) !important; line-height: 1.04 !important; text-shadow: none !important; } .author-hero-overlay p { margin: 0 0 12px !important; color: #e5eef5 !important; -webkit-text-fill-color: #e5eef5 !important; font-size: clamp(15px, 1.35vw, 18px) !important; line-height: 1.58 !important; opacity: 1 !important; } .author-hero-overlay .author-contact { margin-top: 12px !important; padding-top: 14px !important; border-top: 1px solid rgba(255,255,255,.14) !important; font-size: 15px !important; color: #dce9f2 !important; -webkit-text-fill-color: #dce9f2 !important; } .author-hero-overlay .author-contact a { color: #86d9ff !important; -webkit-text-fill-color: #86d9ff !important; text-decoration: underline !important; text-underline-offset: 3px !important; overflow-wrap: anywhere !important; } .author-hero-overlay .author-contact a:hover { color: #c1edff !important; -webkit-text-fill-color: #c1edff !important; } @media (max-width: 1050px) { .author-hero { grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr) !important; } .author-hero-overlay, body.studio-design .author-hero-overlay, html[data-theme="light"] .author-hero-overlay { padding: 28px !important; } } @media (max-width: 820px) { .author-hero { display: block !important; min-height: 0 !important; } .author-hero > img { width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; object-fit: contain !important; } .author-hero-overlay, body.studio-design .author-hero-overlay, html[data-theme="light"] .author-hero-overlay { width: 100% !important; padding: 24px 22px 28px !important; border-left: 0 !important; border-top: 1px solid rgba(255,255,255,.12) !important; } } /* BELCANTO AUTHOR BANNER EMAIL FIX V13 END */ /* BELCANTO FLOATING PRACTICE TOOLBAR FIX V14 Restores the original sticky toolbar behavior for: Piano nốt chính / Thu một câu / Nghe lại. Root cause: V11 set overflow-x:hidden on .main, which creates a non-viewport scrolling ancestor and prevents the existing position:sticky control strip from following the browser viewport. Studio cards also use overflow:clip. */ /* Do not turn the whole main column into a sticky-containing scroll box. */ body.studio-design .main { overflow: visible !important; overflow-x: clip !important; overflow-y: visible !important; } /* Keep the practice-page ancestor chain transparent to sticky positioning. */ body.studio-design .content, body.studio-design #practice.page, body.studio-design #practice.page.active, body.studio-design #practice .practice-layout, body.studio-design #practice .practice-stage, body.studio-design #practice .practice-stage.card { overflow: visible !important; } /* Restore the original floating control strip. */ body.studio-design #practice .control-strip { position: -webkit-sticky !important; position: sticky !important; top: auto !important; bottom: max(10px, env(safe-area-inset-bottom)) !important; z-index: 70 !important; isolation: isolate !important; pointer-events: auto !important; margin: 20px auto 18px !important; } /* Ensure the decorative card layer cannot cover the controls. */ body.studio-design #practice .practice-stage.card::after { pointer-events: none !important; z-index: 0 !important; } body.studio-design #practice .practice-stage > * { position: relative; z-index: 1; } body.studio-design #practice .control-strip { z-index: 70 !important; } /* Mobile: leave room for browser safe areas and any bottom navigation. */ @media (max-width: 760px) { body.studio-design #practice .control-strip { bottom: calc(8px + env(safe-area-inset-bottom)) !important; width: calc(100% - 8px) !important; max-width: 620px !important; } } /* BELCANTO SHARED ONLINE/OFFLINE GUIDE V16 */ .runtime-only{display:none!important} body[data-runtime="offline"] .runtime-only.runtime-offline{display:initial!important} body[data-runtime="web"] .runtime-only.runtime-web{display:initial!important} div.runtime-only,section.runtime-only,article.runtime-only,ol.runtime-only,ul.runtime-only{display:none!important} body[data-runtime="offline"] div.runtime-only.runtime-offline, body[data-runtime="offline"] section.runtime-only.runtime-offline, body[data-runtime="offline"] article.runtime-only.runtime-offline, body[data-runtime="offline"] ol.runtime-only.runtime-offline, body[data-runtime="offline"] ul.runtime-only.runtime-offline{display:block!important} body[data-runtime="web"] div.runtime-only.runtime-web, body[data-runtime="web"] section.runtime-only.runtime-web, body[data-runtime="web"] article.runtime-only.runtime-web, body[data-runtime="web"] ol.runtime-only.runtime-web, body[data-runtime="web"] ul.runtime-only.runtime-web{display:block!important} .help-version-badge .runtime-only{font-size:inherit;line-height:inherit}