/* Thanh Nhạc · VDK — giao diện */
:root{
  --bg:#f6f2ea; --bg-2:#efe8dc; --surface:#fffdf8; --surface-2:#f4eee4; --surface-3:#ebe3d5;
  --ink:#1c1830; --ink-2:#3a3450; --muted:#6b6478; --line:#e4dacb; --line-2:#d6c9b5;
  --pri:#4b36c9; --pri-2:#6b55e8; --pri-ink:#fff; --pri-soft:#ebe7ff; --pri-text:#3a27a8;
  --accent:#d8573a; --accent-soft:#fde8e1; --gold:#e7a531; --gold-soft:#fdf1d8;
  --ok:#1d7f45; --ok-soft:#e1f4e8; --warn:#9a5a12; --warn-soft:#fdf0dc; --bad:#b4342a; --bad-soft:#fbe4e1;
  --info-soft:#e6eefc; --info:#244f9e;
  --hero-1:#17132f; --hero-2:#2f2380; --hero-3:#5a3fd6;
  --key-white:#fffdf8; --key-white-2:#efe9de; --key-black:#1c1830; --key-black-2:#3a3450;
  --shadow-sm:0 1px 2px rgba(40,28,70,.06),0 2px 8px rgba(40,28,70,.05);
  --shadow:0 2px 6px rgba(40,28,70,.06),0 14px 34px rgba(40,28,70,.09);
  --radius:20px; --radius-sm:14px;
  --font:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --display:"Playfair Display",Georgia,"Times New Roman",serif;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#110f1d; --bg-2:#161327; --surface:#1a172b; --surface-2:#221e38; --surface-3:#2b2646;
  --ink:#f1edf8; --ink-2:#d6d0e6; --muted:#a39cb8; --line:#2f2a4a; --line-2:#3d3760;
  --pri:#8b78ff; --pri-2:#a596ff; --pri-ink:#140f2e; --pri-soft:#272157; --pri-text:#bcb0ff;
  --accent:#ff8a6b; --accent-soft:#3a2229; --gold:#ffcf73; --gold-soft:#3a3020;
  --ok:#5fd394; --ok-soft:#173627; --warn:#f3b765; --warn-soft:#382b17; --bad:#ff8378; --bad-soft:#3b1d22;
  --info-soft:#1b2744; --info:#9dbcff;
  --hero-1:#0d0b1a; --hero-2:#221a5c; --hero-3:#4732b3;
  --key-white:#e9e4f2; --key-white-2:#cfc8de; --key-black:#0b0915; --key-black-2:#2b2645;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 2px 6px rgba(0,0,0,.25),0 14px 34px rgba(0,0,0,.3);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#110f1d; --bg-2:#161327; --surface:#1a172b; --surface-2:#221e38; --surface-3:#2b2646;
    --ink:#f1edf8; --ink-2:#d6d0e6; --muted:#a39cb8; --line:#2f2a4a; --line-2:#3d3760;
    --pri:#8b78ff; --pri-2:#a596ff; --pri-ink:#140f2e; --pri-soft:#272157; --pri-text:#bcb0ff;
    --accent:#ff8a6b; --accent-soft:#3a2229; --gold:#ffcf73; --gold-soft:#3a3020;
    --ok:#5fd394; --ok-soft:#173627; --warn:#f3b765; --warn-soft:#382b17; --bad:#ff8378; --bad-soft:#3b1d22;
    --info-soft:#1b2744; --info:#9dbcff;
    --hero-1:#0d0b1a; --hero-2:#221a5c; --hero-3:#4732b3;
    --key-white:#e9e4f2; --key-white-2:#cfc8de; --key-black:#0b0915; --key-black-2:#2b2645;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3);
    --shadow:0 2px 6px rgba(0,0,0,.25),0 14px 34px rgba(0,0,0,.3);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{
  margin:0;font-family:var(--font);font-size:16px;line-height:1.6;color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;min-height:100vh;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--pri-text)}
img,svg{display:block}
.ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ico.fill{fill:currentColor;stroke:none}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid color-mix(in srgb,var(--pri) 55%,transparent);outline-offset:2px;border-radius:10px}
::selection{background:var(--pri-soft)}

/* ============ Khung ứng dụng ============ */
.app{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:100vh}
.app > *{min-width:0}
.side{
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px;
  padding:22px 16px 18px;border-right:1px solid var(--line);background:var(--bg-2);
}
.brand{display:flex;align-items:center;gap:12px;padding:4px 8px 18px;text-decoration:none;color:inherit}
.brand .logo{width:44px;height:44px;border-radius:12px;box-shadow:var(--shadow-sm);flex:none;overflow:visible}
.brand b{display:block;font-family:var(--display);font-size:23px;line-height:1.05;letter-spacing:-.01em}
.brand small{display:block;font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{
  display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;border-radius:12px;
  background:transparent;color:var(--ink-2);font-weight:500;font-size:15px;text-align:left;white-space:nowrap;
  transition:background .15s,color .15s;
}
.nav button:hover{background:var(--surface-3)}
.nav button[aria-current="page"]{background:var(--pri);color:var(--pri-ink);box-shadow:0 6px 16px color-mix(in srgb,var(--pri) 30%,transparent)}
.nav button[aria-current="page"] .ico{stroke:currentColor}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px;padding:12px 8px 0;border-top:1px solid var(--line)}
.side-foot .author{font-size:13px;color:var(--muted);line-height:1.45}
.side-foot .author b{color:var(--ink-2)}
.theme-btn{
  display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);background:var(--surface);
  border-radius:999px;padding:7px 12px;font-size:14px;color:var(--ink-2);width:max-content
}
.mobilebar{display:none}
.main{min-width:0;padding:28px clamp(16px,3.4vw,44px) 80px;max-width:1180px;width:100%}
.page{display:none;animation:pageIn .28s ease}
.page.active{display:block}
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.page-head{margin:4px 0 22px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.page-head h1,.page-head h2{font-family:var(--display);font-size:clamp(30px,4vw,42px);line-height:1.12;margin:6px 0 8px;letter-spacing:-.015em;font-weight:700}
.lead{font-size:17px;color:var(--muted);max-width:760px;margin:0}
h3{font-size:20px;line-height:1.3;margin:0 0 8px;letter-spacing:-.005em}
h4{font-size:16px;margin:0 0 6px}
p{margin:0 0 10px}
.muted{color:var(--muted)}
.small{font-size:14px}

/* ============ Thành phần chung ============ */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;
  box-shadow:var(--shadow-sm);
}
.card + .card{margin-top:16px}
.grid > .card + .card,.stack > .card + .card{margin-top:0}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.card-head h3{margin:0}
.card-head p{margin:4px 0 0}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.spacer{flex:1}
.mt{margin-top:16px}.mt-s{margin-top:10px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
  border:1px solid transparent;border-radius:12px;padding:10px 16px;font-weight:600;font-size:15px;
  background:var(--pri);color:var(--pri-ink);transition:transform .08s,background .15s,box-shadow .15s;
  white-space:nowrap;text-decoration:none
}
.btn:hover{background:var(--pri-2)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.soft{background:var(--pri-soft);color:var(--pri-text)}
.btn.soft:hover{background:color-mix(in srgb,var(--pri-soft) 80%,var(--pri) 20%)}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--surface-2)}
.btn.accent{background:var(--accent);color:#fff}
.btn.accent:hover{background:color-mix(in srgb,var(--accent) 88%,#000)}
.btn.ok{background:var(--ok);color:#fff}
.btn.danger{background:var(--surface);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.btn.danger:hover{background:var(--bad-soft)}
.btn.sm{min-height:36px;padding:6px 12px;font-size:14px;border-radius:10px}
.btn.lg{min-height:52px;padding:12px 22px;font-size:16px;border-radius:14px}
.btn.icon{padding:0;width:44px}
.btn.sm.icon{width:36px}

.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);border-radius:999px;
  padding:7px 14px;font-size:14px;font-weight:500;min-height:38px;transition:background .15s,border-color .15s
}
.chip:hover{background:var(--surface-2)}
.chip[aria-pressed="true"],.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}

.field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--ink-2)}
.field small{font-weight:400;color:var(--muted)}
select,input[type="number"],input[type="search"],input[type="text"]{
  min-height:44px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);padding:8px 12px;font-size:15px;font-weight:500
}
select{padding-right:34px;appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
input[type="range"]{width:100%;accent-color:var(--pri);min-height:30px}

.badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:600;background:var(--pri-soft);color:var(--pri-text)}
.lv-1{--lv:#2f8f5b;--lv-soft:#e1f4e8}
.lv-2{--lv:#2d6fcf;--lv-soft:#e3edfc}
.lv-3{--lv:#b9731a;--lv-soft:#fcefd9}
.lv-4{--lv:#c2413a;--lv-soft:#fbe3e0}
:root[data-theme="dark"] .lv-1{--lv:#6fdc9c;--lv-soft:#163525}
:root[data-theme="dark"] .lv-2{--lv:#8fb8ff;--lv-soft:#182a4a}
:root[data-theme="dark"] .lv-3{--lv:#ffc46b;--lv-soft:#3a2b14}
:root[data-theme="dark"] .lv-4{--lv:#ff8f86;--lv-soft:#3d1c1f}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .lv-1{--lv:#6fdc9c;--lv-soft:#163525}
  :root:not([data-theme="light"]) .lv-2{--lv:#8fb8ff;--lv-soft:#182a4a}
  :root:not([data-theme="light"]) .lv-3{--lv:#ffc46b;--lv-soft:#3a2b14}
  :root:not([data-theme="light"]) .lv-4{--lv:#ff8f86;--lv-soft:#3d1c1f}
}
.badge.lv{background:var(--lv-soft);color:var(--lv)}

.bar{height:10px;background:var(--surface-3);border-radius:999px;overflow:hidden}
.bar > i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--pri),var(--accent));transition:width .5s ease}
.bar.lvbar > i{background:var(--lv)}

.callout{display:flex;gap:12px;align-items:flex-start;border-radius:var(--radius-sm);padding:14px 16px;font-size:15px;line-height:1.55}
.callout .ico{margin-top:2px}
.callout.warn{background:var(--warn-soft);color:var(--warn)}
.callout.warn b{color:inherit}
.callout.info{background:var(--info-soft);color:var(--info)}
.callout.ok{background:var(--ok-soft);color:var(--ok)}
.callout p{margin:0;color:var(--ink-2)}
.callout b{color:var(--ink)}

.empty{color:var(--muted);font-size:15px;text-align:center;padding:18px}
kbd{font-family:inherit;font-size:12px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:6px;padding:1px 6px;background:var(--surface-2)}

/* ============ Tổng quan ============ */
.hero{
  position:relative;overflow:hidden;border-radius:28px;color:#fff;padding:clamp(24px,4vw,40px);
  background:radial-gradient(120% 140% at 100% 0%,var(--hero-3) 0%,transparent 55%),linear-gradient(135deg,var(--hero-1),var(--hero-2));
  box-shadow:var(--shadow);isolation:isolate
}
.hero .staff{position:absolute;left:56%;right:0;top:50%;height:98px;transform:translateY(-50%);z-index:-1;opacity:.16;
  background:repeating-linear-gradient(to bottom,#fff 0 1.5px,transparent 1.5px 24px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);mask-image:linear-gradient(90deg,transparent,#000 30%)}
.hero .notes{position:absolute;left:62%;top:50%;transform:translateY(-58%);z-index:-1;font-family:var(--display);font-size:92px;line-height:1;opacity:.2;letter-spacing:.15em;color:#ffd58a}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center}
.hero .greet{font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#ffd58a}
.hero h1{font-family:var(--display);font-size:clamp(32px,5vw,54px);line-height:1.06;margin:10px 0 14px;letter-spacing:-.02em;font-weight:700}
.hero h1 em{font-style:italic;color:#ffd58a;display:block}
.hero p{font-size:17px;max-width:600px;color:rgba(255,255,255,.84);margin:0 0 22px}
.hero .btn.ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.28)}
.hero .btn.ghost:hover{background:rgba(255,255,255,.18)}
.hero .btn.gold{background:#ffd58a;color:#1c1830}
.hero .btn.gold:hover{background:#ffe1a8}
.ring{position:relative;width:168px;height:168px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:12;stroke-linecap:round}
.ring .track{stroke:rgba(255,255,255,.14)}
.ring .val{stroke:#ffd58a;transition:stroke-dashoffset .6s ease}
.ring .center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ring .center b{font-size:38px;line-height:1;font-weight:700}
.ring .center span{font-size:13px;color:rgba(255,255,255,.75);margin-top:4px}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px 18px;box-shadow:var(--shadow-sm)}
.stat .k{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13.5px;font-weight:500}
.stat .k .ico{width:18px;height:18px;color:var(--accent)}
.stat b{display:block;font-size:30px;line-height:1.15;margin-top:6px;font-weight:700;letter-spacing:-.02em}
.stat b small{font-size:15px;font-weight:500;color:var(--muted);margin-left:4px}

.next-lesson{display:flex;gap:18px;align-items:center}
.next-lesson .num{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;font-family:var(--display);font-size:28px;font-weight:700;background:var(--lv-soft);color:var(--lv);flex:none}
.tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.tool{
  display:flex;gap:12px;align-items:center;text-align:left;border:1px solid var(--line);background:var(--surface-2);
  border-radius:16px;padding:14px;transition:transform .12s,border-color .15s,background .15s;color:var(--ink)
}
.tool:hover{transform:translateY(-2px);border-color:var(--pri);background:var(--surface)}
.tool .ti{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--pri-soft);color:var(--pri-text);flex:none}
.tool b{display:block;font-size:15px}
.tool span{display:block;font-size:13px;color:var(--muted);line-height:1.35}
.tip{display:flex;gap:14px;align-items:flex-start}
.tip .q{font-family:var(--display);font-size:56px;line-height:.8;color:var(--gold)}

/* ============ Lộ trình ============ */
.levels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.level{border:1px solid var(--line);border-radius:16px;padding:14px;background:var(--surface)}
.level h4{display:flex;justify-content:space-between;font-size:14px;margin-bottom:8px;color:var(--lv)}
.level h4 span{color:var(--muted);font-weight:500}
.lessons{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.lesson{
  position:relative;display:flex;flex-direction:column;gap:10px;text-align:left;border:1px solid var(--line);
  background:var(--surface);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm);color:var(--ink);
  transition:transform .14s,box-shadow .2s,border-color .2s
}
.lesson:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--lv) 45%,var(--line))}
.lesson .top{display:flex;align-items:center;gap:10px}
.lesson .n{font-family:var(--display);font-size:22px;font-weight:700;color:var(--lv);width:40px;height:40px;border-radius:12px;background:var(--lv-soft);display:grid;place-items:center}
.lesson h3{font-size:19px;margin:0}
.lesson p{color:var(--muted);font-size:15px;margin:0;flex:1}
.lesson .meta{display:flex;gap:14px;align-items:center;font-size:13px;color:var(--muted)}
.lesson .meta span{display:inline-flex;gap:5px;align-items:center}
.lesson .meta .ico{width:15px;height:15px}
.lesson .status{margin-left:auto;font-weight:600;font-size:13px;color:var(--muted);display:inline-flex;gap:6px;align-items:center}
.lesson.done{border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}
.lesson.done .status{color:var(--ok)}
.lesson.next{border-color:var(--pri);box-shadow:0 0 0 3px color-mix(in srgb,var(--pri) 18%,transparent),var(--shadow-sm)}
.lesson.next .status{color:var(--pri-text)}

/* Hộp thoại */
dialog{
  border:0;padding:0;border-radius:24px;background:var(--surface);color:var(--ink);
  width:min(720px,calc(100vw - 24px));max-height:min(88vh,900px);box-shadow:0 30px 80px rgba(0,0,0,.35)
}
dialog::backdrop{background:rgba(14,10,30,.6)}
dialog[open]{animation:dlgIn .22s ease}
@keyframes dlgIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.dlg{display:flex;flex-direction:column;max-height:inherit}
.dlg-head{display:flex;gap:14px;align-items:flex-start;padding:22px 22px 14px;border-bottom:1px solid var(--line)}
.dlg-head h2{font-family:var(--display);font-size:28px;line-height:1.15;margin:6px 0 0}
.dlg-body{padding:18px 22px;overflow:auto}
.dlg-foot{display:flex;gap:10px;flex-wrap:wrap;padding:14px 22px 20px;border-top:1px solid var(--line);background:var(--surface-2);border-radius:0 0 24px 24px}
.dlg-body h4{display:flex;align-items:center;gap:8px;margin:18px 0 8px;font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.dlg-body h4:first-child{margin-top:0}
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.steps li{counter-increment:s;display:flex;gap:12px;align-items:flex-start;background:var(--surface-2);border-radius:12px;padding:10px 12px}
.steps li:before{content:counter(s);flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--pri);color:var(--pri-ink);font-weight:700;font-size:13px;margin-top:1px}
.bul{padding-left:20px;margin:0}
.bul li{margin:4px 0}
.mistakes li::marker{color:var(--bad)}
.pass{background:var(--ok-soft);border-radius:12px;padding:12px 14px;color:var(--ink-2)}
.pass b{color:var(--ok)}
.x-btn{margin-left:auto;border:0;background:var(--surface-2);border-radius:12px;width:40px;height:40px;display:grid;place-items:center;flex:none;color:var(--ink)}
.x-btn:hover{background:var(--surface-3)}

/* ============ Buổi tập ============ */
.routines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.routine{
  text-align:left;border:1px solid var(--line-2);background:var(--surface);border-radius:16px;padding:14px 16px;color:var(--ink)
}
.routine b{display:block;font-size:17px}
.routine span{display:block;font-size:14px;color:var(--ink-2);font-weight:500}
.routine small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.routine[aria-pressed="true"]{border-color:var(--pri);background:var(--pri-soft);box-shadow:0 0 0 2px var(--pri) inset}
.routine:disabled{opacity:.55;cursor:not-allowed}
.session{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;align-items:start}
.clock{position:relative;width:260px;height:260px;margin:auto}
.clock svg{width:100%;height:100%;transform:rotate(-90deg)}
.clock circle{fill:none;stroke-width:14;stroke-linecap:round}
.clock .track{stroke:var(--surface-3)}
.clock .val{stroke:url(#clockGrad)}
.clock .center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}
.clock .t{font-size:52px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.clock .s{font-size:14px;color:var(--muted);margin-top:8px;max-width:170px;line-height:1.35}
.step-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.step-list li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid transparent}
.step-list li .dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--surface-3);color:var(--muted);flex:none}
.step-list li .min{margin-left:auto;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.step-list li.cur{background:var(--pri-soft);border-color:color-mix(in srgb,var(--pri) 35%,transparent)}
.step-list li.cur .dot{background:var(--pri);color:var(--pri-ink)}
.step-list li.fin .dot{background:var(--ok);color:#fff}
.step-list li.fin span:not(.min){color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 50%,transparent)}
.step-now{border-radius:16px;background:var(--surface-2);padding:16px;margin-top:14px}
.step-now h4{font-size:17px}
.step-now ul{margin:6px 0 10px;padding-left:20px}
.checks label{display:flex;gap:12px;align-items:flex-start;padding:10px 4px;border-bottom:1px dashed var(--line);font-size:15.5px;cursor:pointer}
.checks label:last-child{border-bottom:0}
.checks input{width:20px;height:20px;margin-top:2px;accent-color:var(--ok);flex:none}
.checks input:checked + span{color:var(--muted);text-decoration:line-through}

.mini-session{
  position:fixed;right:18px;bottom:18px;z-index:40;display:none;align-items:center;gap:10px;border:0;
  background:var(--ink);color:var(--bg);border-radius:999px;padding:10px 16px 10px 12px;box-shadow:var(--shadow);font-weight:600
}
.mini-session.show{display:inline-flex}
.mini-session .pulse{position:relative;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.mini-session .pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:ping 1.6s ease-out infinite}
.mini-session.paused .pulse{background:var(--gold)}
.mini-session.paused .pulse::after{animation:none;opacity:0}
@keyframes ping{0%{transform:scale(1);opacity:.6}80%,100%{transform:scale(2.6);opacity:0}}

/* ============ Cao độ ============ */
.tuner{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px}
.note-big{display:flex;align-items:baseline;justify-content:center;gap:14px;margin:6px 0 2px}
.note-big b{font-family:var(--display);font-size:clamp(64px,9vw,96px);line-height:1;font-weight:700;letter-spacing:-.02em;min-width:2ch;text-align:center}
.note-sub{text-align:center;color:var(--muted);font-variant-numeric:tabular-nums;min-height:26px}
.verdict{display:flex;justify-content:center;margin:10px 0 14px}
.verdict span{border-radius:999px;padding:5px 14px;font-weight:700;font-size:14px;background:var(--surface-3);color:var(--muted)}
.verdict span.good{background:var(--ok-soft);color:var(--ok)}
.verdict span.high{background:var(--accent-soft);color:var(--accent)}
.verdict span.low{background:var(--info-soft);color:var(--info)}
.gauge{position:relative;height:56px;margin:0 6px}
.gauge .scale{position:absolute;left:0;right:0;top:18px;height:14px;border-radius:999px;
  background:linear-gradient(90deg,var(--info-soft),var(--surface-3) 35%,var(--ok-soft) 45%,var(--ok-soft) 55%,var(--surface-3) 65%,var(--accent-soft))}
.gauge .zone{position:absolute;top:14px;height:22px;border-radius:8px;background:color-mix(in srgb,var(--ok) 22%,transparent);border:1.5px solid var(--ok);transform:translateX(-50%);left:50%}
.gauge .needle{position:absolute;top:6px;left:0;right:0;height:38px;pointer-events:none}
.gauge .needle::after{content:"";position:absolute;left:50%;top:0;width:4px;height:100%;margin-left:-2px;border-radius:3px;background:var(--ink)}
.gauge .needle.good::after{background:var(--ok)}
.gauge .ticks{position:absolute;left:0;right:0;top:40px;display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.trace-wrap{position:relative;margin-top:18px;border-radius:16px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line)}
.trace-wrap canvas{width:100%;height:220px;display:block}
.trace-wrap .lbl{position:absolute;right:12px;top:6px;font-size:12px;color:var(--muted);font-weight:600}
.holdbox{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.holdbox div{background:var(--surface-2);border-radius:14px;padding:12px;text-align:center}
.holdbox b{display:block;font-size:26px;font-variant-numeric:tabular-nums}
.holdbox span{font-size:13px;color:var(--muted)}
.mic-btn.on{background:var(--bad);color:#fff}
.mic-dot{position:relative;width:10px;height:10px;border-radius:50%;background:currentColor;opacity:.9}
.mic-btn.on .mic-dot{box-shadow:0 0 0 3px rgba(255,255,255,.35)}
.mic-row{display:flex;gap:14px;align-items:center;margin-bottom:6px}
.mic-row .btn{min-width:160px}
.level-meter{flex:1;height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.level-meter i{display:block;height:100%;width:100%;background:var(--ok);transform:scaleX(0);transform-origin:left center}
.range-out{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:14px 0}
.range-out div{background:var(--surface-2);border-radius:14px;padding:12px;text-align:center}
.range-out b{display:block;font-family:var(--display);font-size:30px;line-height:1.15}
.range-out span{font-size:13px;color:var(--muted)}
.vt-list{display:flex;flex-direction:column;gap:8px}
.vt{display:grid;grid-template-columns:120px 1fr 92px;gap:10px;align-items:center;font-size:14px}
.vt .lane{position:relative;height:14px;border-radius:999px;background:var(--surface-3)}
.vt .lane i{position:absolute;top:0;bottom:0;border-radius:999px;background:color-mix(in srgb,var(--pri) 35%,transparent)}
.vt .lane u{position:absolute;top:-3px;bottom:-3px;border-radius:999px;border:2px solid var(--accent);text-decoration:none}
.vt.best b{color:var(--accent)}
.vt span{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}

/* ============ Piano ============ */
.piano-wrap{overflow-x:auto;overflow-y:hidden;padding:6px 2px 14px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.piano{--kw:48px;--kb:32px;position:relative;display:flex;height:210px;width:max-content;user-select:none;-webkit-user-select:none;touch-action:pan-x}
.key{
  position:relative;flex:none;border:0;padding:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  -webkit-tap-highlight-color:transparent;
}
.key.w{width:var(--kw);height:100%;margin-right:3px;border-radius:0 0 10px 10px;
  background:linear-gradient(to bottom,var(--key-white-2),var(--key-white) 12%);
  box-shadow:inset 0 -6px 0 var(--key-white-2),0 1px 2px rgba(0,0,0,.15);color:var(--muted);padding-bottom:12px}
.key.b{position:absolute;top:0;width:var(--kb);height:62%;z-index:2;border-radius:0 0 7px 7px;
  background:linear-gradient(to bottom,var(--key-black),var(--key-black-2));box-shadow:inset 0 -5px 0 rgba(255,255,255,.08),0 3px 6px rgba(0,0,0,.35);color:rgba(255,255,255,.6);padding-bottom:8px}
.key .nm{font-size:12px;font-weight:600;line-height:1.1}
.key .sf{font-size:10.5px;opacity:.8}
.key .kb{position:absolute;top:8px;font-size:10px;opacity:.55;font-weight:600}
.key.b .nm{font-size:9.5px}
.key.c .nm{color:var(--pri-text)}
.key.on.w,.key.w:active{background:linear-gradient(to bottom,color-mix(in srgb,var(--pri) 40%,var(--key-white)),color-mix(in srgb,var(--pri) 22%,var(--key-white)));box-shadow:inset 0 -2px 0 var(--key-white-2)}
.key.on.b,.key.b:active{background:linear-gradient(to bottom,var(--pri),var(--pri-2))}
.key.tgt:after{content:"";position:absolute;bottom:34px;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.key.b.tgt:after{bottom:26px}
.pat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.pat{border:1px solid var(--line-2);background:var(--surface);border-radius:14px;padding:12px 14px;text-align:left;color:var(--ink)}
.pat b{display:block;font-size:16px;letter-spacing:.02em}
.pat span{font-size:13px;color:var(--muted);line-height:1.35;display:block}
.pat[aria-pressed="true"]{border-color:var(--pri);background:var(--pri-soft);box-shadow:0 0 0 2px var(--pri) inset}
.ctl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
.now-playing{margin-top:12px;min-height:24px;font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums}
.now-playing b{color:var(--ink)}
.metro{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center}
.bpm{display:flex;align-items:center;gap:10px}
.bpm output{font-size:56px;font-weight:700;letter-spacing:-.03em;min-width:3ch;text-align:center;font-variant-numeric:tabular-nums;line-height:1}
.bpm small{display:block;text-align:center;font-size:13px;color:var(--muted)}
.beats{display:flex;gap:10px;margin:8px 0 14px}
.beats i{width:22px;height:22px;border-radius:50%;background:var(--surface-3);transition:background .06s,transform .06s}
.beats i.acc{outline:2px solid var(--line-2);outline-offset:2px}
.beats i.hit{background:var(--pri);transform:scale(1.18)}
.beats i.acc.hit{background:var(--accent)}

/* ============ Luyện tai ============ */
.ear-stage{display:grid;place-items:center;text-align:center;padding:16px 0 6px}
.play-big{width:116px;height:116px;border-radius:50%;border:0;background:var(--pri);color:var(--pri-ink);display:grid;place-items:center;box-shadow:0 10px 30px color-mix(in srgb,var(--pri) 35%,transparent);transition:transform .1s}
.play-big:hover{transform:scale(1.04)}
.play-big .ico{width:44px;height:44px}
.ear-q{font-size:18px;font-weight:600;margin:16px 0 4px}
.answers{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:16px}
.ans{border:1.5px solid var(--line-2);background:var(--surface);border-radius:14px;padding:12px 10px;font-weight:600;color:var(--ink);min-height:58px;line-height:1.25}
.ans small{display:block;font-weight:400;font-size:12.5px;color:var(--muted)}
.ans:hover{border-color:var(--pri)}
.ans.right{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.ans.wrong{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.ans:disabled{cursor:default}
.feedback{min-height:28px;margin-top:14px;font-weight:600;text-align:center}
.feedback.good{color:var(--ok)}.feedback.bad{color:var(--bad)}
.score{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.score b{color:var(--ink);font-size:18px}

/* ============ Kiến thức ============ */
.k-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.k-card h3{display:flex;align-items:center;gap:10px}
.k-card h3 .ki{width:36px;height:36px;border-radius:10px;background:var(--gold-soft);color:var(--gold);display:grid;place-items:center;flex:none;font-family:var(--display);font-weight:700}
.k-card ul{padding-left:20px;margin:6px 0 0}
.k-card li{margin:5px 0}
.k-card p{color:var(--ink-2)}
table.tbl{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:6px}
.tbl th,.tbl td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
.tbl th{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
.tbl td:first-child{font-weight:600}
.myth{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.myth + .myth{margin-top:10px}
.myth div{padding:12px 14px;font-size:15px}
.myth .m{background:var(--bad-soft)}
.myth .f{background:var(--ok-soft)}
.myth b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.myth .m b{color:var(--bad)}.myth .f b{color:var(--ok)}
.gloss-tools{display:flex;gap:10px;margin-bottom:12px}
.gloss-tools input{flex:1}
.gloss{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gloss div{background:var(--surface-2);border-radius:12px;padding:10px 14px;font-size:14.5px}
.gloss b{display:block;color:var(--pri-text);font-size:15px}
.tones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0}
.tones div{background:var(--surface-2);border-radius:12px;padding:10px;font-size:14px}
.tones b{display:block;font-size:16px}

/* ============ Tiến độ ============ */
.heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,14px);gap:4px;overflow-x:auto;padding-bottom:6px}
.heat i{width:14px;height:14px;border-radius:4px;background:var(--surface-3)}
.heat i.l1{background:color-mix(in srgb,var(--pri) 28%,var(--surface-3))}
.heat i.l2{background:color-mix(in srgb,var(--pri) 52%,var(--surface-3))}
.heat i.l3{background:color-mix(in srgb,var(--pri) 78%,var(--surface-3))}
.heat i.l4{background:var(--accent)}
.heat i.fut{background:transparent}
.heat i.today{outline:2px solid var(--ink);outline-offset:1px}
.heat-legend{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--muted);margin-top:8px}
.heat-legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.kv{display:flex;flex-direction:column}
.kv div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:15px}
.kv div:last-child{border-bottom:0}
.kv span{color:var(--muted)}
.kv b{text-align:right}
.sess-list{list-style:none;margin:0;padding:0}
.sess-list li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14.5px}
.sess-list li:last-child{border-bottom:0}
.sess-list span{color:var(--muted)}
.settings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}

/* Thông báo */
.toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:max-content;max-width:calc(100vw - 32px)}
.toast{background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:14px;font-weight:500;font-size:15px;box-shadow:var(--shadow);animation:toastIn .25s ease;text-align:center}
.toast.ok{background:var(--ok);color:#fff}
.toast.bad{background:var(--bad);color:#fff}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.foot{margin-top:40px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:14px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.foot b{color:var(--ink-2)}

/* ============ Đáp ứng ============ */
@media (max-width:1100px){
  .tuner{grid-template-columns:1fr}
  .session{grid-template-columns:1fr}
  .ctl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{
    position:sticky;top:0;z-index:30;height:auto;flex-direction:row;padding:8px 10px;gap:0;border-right:0;border-bottom:1px solid var(--line);
    background:var(--bg)
  }
  .side .brand,.side-foot{display:none}
  .nav{flex-direction:row;overflow-x:auto;scrollbar-width:none;gap:6px;width:100%;
    mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 22px),transparent)}
  .nav::-webkit-scrollbar{display:none}
  .nav button{width:auto;padding:8px 14px;font-size:14px;gap:8px;border-radius:999px;border:1px solid var(--line);background:var(--surface)}
  .nav button .ico{width:17px;height:17px}
  .mobilebar{display:flex;align-items:center;gap:12px;padding:14px 16px 4px}
  .mobilebar .logo{width:38px;height:38px;border-radius:10px;flex:none;overflow:visible}
  .mobilebar b{font-family:var(--display);font-size:21px;line-height:1.05;display:block}
  .mobilebar small{font-size:11.5px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
  .mobilebar .theme-btn{margin-left:auto}
  .main{padding:16px 16px 90px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .levels{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .g2,.g3,.k-grid,.gloss{grid-template-columns:minmax(0,1fr)}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-grid{grid-template-columns:1fr}
  .hero .ring{width:116px;height:116px;margin:0}
  .hero .ring .center b{font-size:28px}
  .hero .ring .center span{font-size:11.5px;max-width:84px}
  .hero h1{font-size:31px}
  .hero p{font-size:15.5px}
  .hero .notes{display:none}
  .hero .staff{left:0;top:auto;bottom:40px;transform:none;opacity:.08}
  .routines{gap:8px}
  .routine{padding:10px 12px}
  .routine b{font-size:15.5px}
  .routine span{font-size:12.5px}
  .routine small{display:none}
  .settings{grid-template-columns:minmax(0,1fr)}
  .metro{grid-template-columns:1fr}
  .pat-grid{grid-template-columns:1fr 1fr;gap:8px}
  .pat{padding:10px 12px}
  .pat b{font-size:14px;letter-spacing:0}
  .pat span{font-size:12px}
  .tools{grid-template-columns:minmax(0,1fr)}
  .myth{grid-template-columns:1fr}
  .tones{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card{padding:18px}
  .next-lesson{align-items:flex-start;gap:14px}
  .next-lesson .num{width:48px;height:48px;font-size:22px;border-radius:14px}
  .clock{width:230px;height:230px}
  .clock .t{font-size:46px}
  .vt{grid-template-columns:96px 1fr 78px;font-size:13px}
  .piano{--kw:44px;--kb:28px}
  .dlg-head h2{font-size:24px}
  .mini-session{right:12px;bottom:12px}
  .toasts{bottom:76px}
}
@media (max-width:420px){
  .ctl-grid{grid-template-columns:1fr 1fr}
  .stat b{font-size:26px}
  .range-out b{font-size:24px}
}
/* ============ Logo động ============ */
.logo .lg-notes,.logo .lg-staff{transform-box:fill-box;transform-origin:center}
.logo-wrap{position:relative;display:inline-flex;flex:none}
.lg-ping{position:absolute;right:-3px;top:-3px;width:13px;height:13px;border-radius:50%;background:#ff5a47;border:2px solid var(--bg);opacity:0;transform:scale(.4);transition:opacity .2s,transform .2s;pointer-events:none}
/* đang nghe: chấm đỏ tĩnh, dừng mọi hoạt ảnh lặp của logo để không phải tính lại style mỗi khung hình */
.listening .lg-ping{opacity:1;transform:none}
.listening .vdk-m-logo{animation:none!important}
.logo .lg-staff{transform-origin:left center;animation:lgStaff .9s cubic-bezier(.2,.8,.3,1) both}
.logo .lg-notes{animation:lgDrop .8s .25s cubic-bezier(.3,1.5,.5,1) both}
.thinking .logo .lg-notes{animation:lgThink 1s ease-in-out infinite}
@keyframes lgStaff{from{transform:scaleX(0);opacity:0}to{transform:none;opacity:1}}
@keyframes lgDrop{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}
@keyframes lgThink{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-3px) rotate(-6deg)}60%{transform:translateY(1px) rotate(4deg)}}

/* ============ Tiết kiệm năng lượng / tắt hiệu ứng ============ */
.no-motion *,.no-motion *::before,.no-motion *::after{animation:none!important;transition:none!important}
.no-motion .vdk-m-rip{display:none!important}
.eco .card,.eco .stat,.eco .lesson,.eco .hero{box-shadow:none}

/* ============ Chấm giọng ============ */
.tool-ai{grid-column:1/-1;background:linear-gradient(120deg,var(--pri-soft),var(--accent-soft));border-color:color-mix(in srgb,var(--pri) 30%,var(--line))}
.tool-ai .ti{background:var(--pri);color:var(--pri-ink)}
.vc-opts{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.vc-opts .field{min-width:180px;flex:1}
.vc-tpl{display:flex;flex-wrap:wrap;gap:12px;flex:3}
.vc-tpl[hidden],.vc-opts .field[hidden]{display:none}
.vc-stage{display:flex;align-items:center;gap:22px;margin-top:20px;padding:18px;border-radius:18px;background:var(--surface-2)}
.vc-rec{position:relative;width:84px;height:84px;border-radius:50%;border:0;flex:none;display:grid;place-items:center;background:var(--bad);color:#fff;box-shadow:0 8px 22px color-mix(in srgb,var(--bad) 35%,transparent)}
.vc-rec .ico{width:30px;height:30px}
.vc-rec-dot{width:28px;height:28px;border-radius:50%;background:#fff}
.vc-rec.on{box-shadow:0 0 0 6px color-mix(in srgb,var(--bad) 22%,transparent),0 8px 22px color-mix(in srgb,var(--bad) 35%,transparent)}
.vc-rec:disabled{opacity:.55;cursor:wait}
.vc-live{flex:1;min-width:0}
.vc-status{font-weight:600;font-size:16px}
.vc-time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:14px;min-height:20px}
.vc-meter{height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden;margin-top:8px}
.vc-meter i{display:block;height:100%;width:100%;background:var(--ok);transform:scaleX(0);transform-origin:left center}
.vc-note{font-family:var(--display);font-size:30px;font-weight:700;min-height:38px;margin-top:4px}
.vc-prog{margin-top:14px;display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted)}
.vc-prog .bar{flex:1}
.vc-prog .bar i{width:100%;transform:scaleX(0);transform-origin:left center;transition:transform .25s ease}
.vc-sum{display:grid;grid-template-columns:180px minmax(0,1fr);gap:24px;align-items:center}
.vc-score{position:relative;width:170px;height:170px}
.vc-score svg{width:100%;height:100%;transform:rotate(-90deg)}
.vc-score circle{fill:none;stroke-width:11;stroke-linecap:round}
.vc-score .track{stroke:var(--surface-3)}
.vc-score .val{stroke:var(--pri)}
.vc-score.sc-ok .val{stroke:var(--ok)}.vc-score.sc-mid .val{stroke:var(--gold)}.vc-score.sc-bad .val{stroke:var(--bad)}
.vc-score .center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.vc-score .center b{font-size:48px;line-height:1;font-weight:700;letter-spacing:-.03em}
.vc-score .center span{font-size:13px;color:var(--muted);margin-top:4px;font-weight:600}
.vc-facts dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;margin:10px 0 0}
.vc-facts dl div{border-bottom:1px dashed var(--line);padding-bottom:6px}
.vc-facts dt{font-size:12.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.vc-facts dd{margin:2px 0 0;font-weight:600;font-size:15px}
.vc-crit{display:flex;flex-direction:column;gap:14px}
.vc-crit small{color:var(--muted);font-size:13px}
.vc-crit .bar{margin:6px 0 4px}
.vc-tips{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:12px}
.vc-tips p{margin:0 0 6px;color:var(--ink-2)}
.sc-ok{color:var(--ok)}.sc-mid{color:var(--warn)}.sc-bad{color:var(--bad)}
.bar.sc-ok > i{background:var(--ok)}.bar.sc-mid > i{background:var(--gold)}.bar.sc-bad > i{background:var(--bad)}
.roll-wrap{border-radius:14px;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.roll-wrap canvas{display:block;width:100%;height:280px}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.vc-tbl td,.vc-tbl th{white-space:nowrap}
.vc-tbl td:first-child{color:var(--muted);font-weight:500}
.pill{display:inline-block;border-radius:999px;padding:2px 8px;font-size:12px;font-weight:600;margin:1px 2px 1px 0}
.pill.ok{background:var(--ok-soft);color:var(--ok)}.pill.warn{background:var(--warn-soft);color:var(--warn)}.pill.bad{background:var(--bad-soft);color:var(--bad)}
.sess-list b.sc-ok,.sess-list b.sc-mid,.sess-list b.sc-bad{font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .vc-sum{grid-template-columns:1fr;justify-items:center;text-align:center}
  .vc-facts{width:100%;text-align:left}
  .vc-score{width:150px;height:150px}
  .vc-stage{gap:16px;padding:14px}
  .vc-rec{width:72px;height:72px}
  .vc-opts .field{min-width:140px}
  .vc-facts dl{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{
  .side,.mobilebar,.mini-session,.toasts{display:none!important}
  .app{display:block}
  .page{display:block!important}
}