.yt-mode-switch { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.yt-panel { padding:20px; border:1px solid var(--line); border-radius:16px; background:var(--panel-solid); color:var(--ink); }
.yt-panel[hidden], .yt-viewport[hidden] { display:none; }
.yt-panel p { line-height:1.7; margin:12px 0; }
.yt-panel label { display:block; margin:8px 0; }
.yt-panel input[type="url"] { display:block; width:100%; box-sizing:border-box; }
.yt-panel input[type="number"] { width:90px; }
.yt-panel button, .yt-panel input, .yt-panel select, .yt-mode-switch button { min-height:44px; font:inherit; max-width:100%; }
.yt-panel input[type="checkbox"] { min-height:0; }
.yt-panel fieldset { min-width:0; margin:16px 0; }
.yt-fields { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; }
.yt-viewport { width:100%; max-width:640px; margin:16px auto; background:var(--panel-solid); }
.yt-viewport iframe { display:block; width:100%; height:auto; aspect-ratio:16/9; min-height:200px; border:0; }
body.youtube-practice .stage > section:not(#youtubePanel):not(.hero-panel), body.youtube-practice .hero-source, body.youtube-practice .intro-panel { display:none !important; }
.yt-panel button, .yt-mode-switch button { padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:var(--panel-solid); color:var(--ink); cursor:pointer; }
.yt-mode-switch button[aria-pressed="true"] { background:var(--accent); color:white; }
.yt-panel input:not([type="checkbox"]), .yt-panel select { padding:8px; border:1px solid var(--line); border-radius:8px; background:var(--panel-solid); color:var(--ink); }
.yt-panel fieldset { border:1px solid var(--line); border-radius:10px; padding:12px; }
.yt-panel button:disabled { opacity:.5; cursor:default; }
.yt-panel a { color:var(--accent); }
.yt-panel :focus-visible, .yt-mode-switch :focus-visible { outline:3px solid var(--accent); outline-offset:3px; }