/* Quick-start UI diagrams use the app's existing theme and icon system. */
body.user-v1-focus-page .vg-launch {
  display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--vui-touch,44px); padding: 8px 10px;
  border: 1px solid var(--ui-line); border-radius: var(--vui-radius-control,10px);
  color: var(--ui-accent); background: var(--ui-soft); font: 700 14px/1.2 system-ui,sans-serif;
}
.vg-launch svg { width: 18px; height: 18px; }
body.user-v1-focus-page .vg-dialog {
  width: min(540px,calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px);
  margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--ui-line);
  border-radius: 24px; color: var(--ui-ink,var(--ui-accent)); background: var(--ui-panel);
  box-shadow: 0 24px 80px #0005; font: 16px/1.5 system-ui,-apple-system,sans-serif;
}
.vg-dialog::backdrop { background: #080e1c99; backdrop-filter: blur(5px); }
.vg-shell { display: flex; flex-direction: column; max-height: calc(100dvh - 26px); }
.vg-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--ui-line); }
.vg-eyebrow { margin: 0 0 3px; color: var(--ui-accent); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.vg-header h2 { margin: 0; font: 800 24px/1.2 system-ui,sans-serif; color: var(--ui-accent); }
.vg-content { padding: 18px 22px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.vg-step { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .07em; color: var(--ui-accent); }
.vg-content h3 { margin: 0 0 14px; font-size: 21px; line-height: 1.25; color: var(--ui-accent); }
.vg-picture { margin: 0 0 12px; }
.vg-diagram { padding: 14px; display: grid; gap: 10px; background: var(--ui-soft); border: 1px solid var(--ui-line); border-radius: var(--vui-radius-panel,18px); }
.vg-diagram svg { width: 24px; height: 24px; flex-shrink: 0; color: var(--ui-accent); }
.vg-diagram [data-guide-icon] { display: inline-flex; }
.vg-two { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.vg-ui-tile,.vg-test-entry { display: flex; align-items: center; justify-content: center; gap: 7px; text-align: center; padding: 10px 8px; border: 1px solid var(--ui-line); border-radius: var(--vui-radius-tile,13px); background: var(--ui-panel); font-size: 14px; font-weight: 700; color: var(--ui-accent); }
.vg-ui-chip { display: inline-flex; align-items: center; padding: 6px 8px; border: 1px solid var(--ui-line); border-radius: 9px; font-size: 12px; }
.vg-highlight { background: var(--ui-primary); color: var(--ui-primary-ink,var(--ui-accent)); }
.vg-mini-toolbar { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.vg-mini-toolbar > :last-child { margin-left: auto; }
.vg-sentence { display: grid; gap: 15px; padding: 12px; border: 2px solid var(--ui-primary); border-radius: 16px; background: var(--ui-panel); }
.vg-sentence > .vg-ui-chip { justify-self: start; }
.vg-sentence > strong { text-align: center; color: var(--ui-accent); font-size: 20px; margin: 5px 0; }
.vg-reveal { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 8px; border: 1px dashed var(--ui-line); border-radius: 10px; font-size: 14px; }
.vg-test-entry { letter-spacing: .06em; font-weight: 850; background: linear-gradient(115deg,var(--ui-panel),var(--ui-soft)); }
.vg-flow { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 3px 0; color: var(--ui-accent); }
.vg-flow > span { flex: 1; text-align: center; font-weight: 800; border: 1px solid var(--ui-line); border-radius: 12px; padding: 8px 3px; background: var(--ui-panel); }
.vg-flow small { font-size: 12px; font-weight: 500; }
.vg-answer { border: 2px solid var(--ui-accent); border-radius: 10px; padding: 9px; font-size: 14px; text-align: center; font-weight: 800; color: var(--ui-accent); }
.vg-mini-brand { background: var(--ui-accent); color: var(--ui-panel); border-radius: 12px; padding: 15px 8px; text-align: center; font-size: 14px; font-weight: 850; }
.vg-point { color: var(--ui-accent); text-align: center; font-size: 14px; font-weight: 700; }
.vg-picture figcaption { margin-top: 8px; font-size: 13px; color: var(--ui-muted,var(--ui-accent)); }
.vg-copy { margin: 10px 0; font-size: 16px; }
.vg-reminder { margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--ui-soft); font-size: 14px; }
.vg-footer { display: flex; gap: 10px; padding: 14px 22px max(16px,env(safe-area-inset-bottom)); border-top: 1px solid var(--ui-line); }
body.user-v1-focus-page .vg-dialog button { min-height: var(--vui-touch,44px); padding: 10px 14px; border: 1px solid var(--ui-line); border-radius: var(--vui-radius-control,10px); background: var(--ui-soft); color: var(--ui-accent); font: 700 15px/1.2 system-ui,sans-serif; cursor: pointer; }
body.user-v1-focus-page .vg-dialog .vg-forward { flex: 1; background: var(--ui-primary); color: var(--ui-primary-ink,var(--ui-accent)); }
body.user-v1-focus-page .vg-dialog .vg-close { width: 44px; flex: 0 0 44px; padding: 6px; font-size: 28px; }
.vg-dialog button:disabled { opacity: .4; cursor: default; }
.vg-dialog button:focus-visible,.vg-launch:focus-visible { outline: 3px solid var(--ui-focus,var(--ui-accent)); outline-offset: 2px; }
@media(max-width:360px) { .vg-header,.vg-content { padding: 14px; } .vg-footer { padding-inline: 14px; } .vg-diagram { padding: 10px; } }
.vg-video-button { width:100%; margin-bottom:12px; }
.vg-brand-mark { --s:44px;display:inline-block;flex:0 0 var(--s);width:var(--s);height:var(--s);border-radius:12px;background:#fffdf5 url('/assets/tinh-hoa-header-reference.jpeg') no-repeat;background-size:calc(var(--s)*6.657142857) calc(var(--s)*1.435714286);background-position:calc(var(--s)*-1.392857143) calc(var(--s)*-.178571429); }
.vg-mini-brand { display:flex;align-items:center;justify-content:center;gap:10px; }
.vg-header > div { flex:1;min-width:0; }
.welcome-logo { --s:clamp(100px,26vw,180px); width:var(--s);height:var(--s);flex-shrink:0;border-radius:24%;background:#fffdf5 url('/assets/tinh-hoa-header-reference.jpeg') no-repeat; background-size:calc(var(--s)*6.657142857) calc(var(--s)*1.435714286);background-position:calc(var(--s)*-1.392857143) calc(var(--s)*-.178571429);box-shadow:0 0 24px #ffd868,0 0 65px #f8b72b88,0 0 110px #a72a4533; animation:welcome-radiance 1.6s ease-out both;position:relative; }
.welcome-logo::after { content:'';position:absolute;inset:-10px;border:2px solid #ffd76a;border-radius:28%;box-shadow:0 0 18px #ffdc75;animation:welcome-ring 1.6s ease-out both; }
@keyframes welcome-radiance { from{opacity:0;transform:scale(.78);filter:brightness(1.4)} 60%{opacity:1;transform:scale(1.04);filter:brightness(1.08)} to{opacity:1;transform:scale(1);filter:brightness(1)} }
@keyframes welcome-ring { from{opacity:0;transform:scale(.86)} 45%{opacity:1} to{opacity:0;transform:scale(1.25)} }
@media(prefers-reduced-motion:reduce){.welcome-logo,.welcome-logo::after{animation:none}.welcome-logo::after{display:none}}
body.user-v1-focus-page .vg-dialog .vg-video-button { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:auto; min-height:52px; background:var(--ui-primary); }
.vg-video-button svg { width:26px; height:26px; flex:0 0 26px; }
.vg-video-button span { display:inline !important; position:static !important; width:auto !important; height:auto !important; clip:auto !important; clip-path:none !important; overflow:visible !important; }
#vg-video-panel[hidden] { display:none; }
#vg-video-panel video { display:block; width:100%; max-height:55dvh; border-radius:var(--vui-radius-panel); background:#201018; }

.vg-details{padding-left:1.4em;margin:14px 0;font-size:16px;line-height:1.6}.vg-details li{margin:0 0 12px}

.vg-video-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px;align-items:stretch}
.vg-video-option{display:grid;grid-template-rows:72px auto;gap:6px;text-align:center;min-width:0}
.vg-video-choices small{font-size:14px;line-height:1.25;color:var(--ui-muted)}
body.user-v1-focus-page .vg-dialog .vg-video-choices .vg-video-button{height:72px;min-height:72px;margin:0;padding:10px 12px;border-width:1px;border-style:solid;border-radius:14px;font-size:15px;line-height:1.2;box-shadow:0 5px 14px #30101b14}
body.user-v1-focus-page .vg-dialog .vg-video-option--overview .vg-video-button{background:linear-gradient(135deg,#f8d873,#efbd4e);border-color:#d3a53a;color:#571028}
body.user-v1-focus-page .vg-dialog .vg-video-option--detail .vg-video-button{background:linear-gradient(135deg,#8b173d,#650b29);border-color:#650b29;color:#fffaf0}
.vg-video-choices [aria-pressed="true"]{outline:3px solid var(--ui-accent);outline-offset:3px;box-shadow:0 7px 18px #30101b24}
@media(max-width:360px){.vg-video-choices{gap:9px}.vg-video-option{grid-template-rows:72px auto}body.user-v1-focus-page .vg-dialog .vg-video-choices .vg-video-button{height:72px;padding-inline:8px;font-size:14px}}