:root{--surface:#f5f3ec;--ink:#28382f;--input:#fffdf8;--control:#e9eddf;--hover:#dce5cd;--selected:#dce6cb;--line:#bac4b4;--focus:#497c60;--link:#39634c;--error:#a03f34;--stage:#111713;--muted:#bcc6b8;font-family:Segoe UI,Arial,sans-serif;color:var(--ink);background:var(--surface);color-scheme:light;font-size:12px}
@media(prefers-color-scheme:dark){:root:not([data-theme]){--surface:#182820;--ink:#e1ead8;--input:#10221c;--control:#22352b;--hover:#2c4234;--selected:#334a32;--line:#657b5e;--focus:#a9c986;--link:#bfd7a2;--error:#ffae9f;--stage:#0c1510;--muted:#a9baa0;color-scheme:dark}}
:root[data-theme="dark"]{--surface:#182820;--ink:#e1ead8;--input:#10221c;--control:#22352b;--hover:#2c4234;--selected:#334a32;--line:#657b5e;--focus:#a9c986;--link:#bfd7a2;--error:#ffae9f;--stage:#0c1510;--muted:#a9baa0;color-scheme:dark}
:root[data-theme="amber"]{--surface:#211b12;--ink:#f1d6a0;--input:#15110b;--control:#2c2317;--hover:#3a2c1a;--selected:#463319;--line:#8d6b37;--focus:#e8b357;--link:#edb95f;--error:#ffac8d;--stage:#100d08;--muted:#bba16f;color-scheme:dark}
:root[data-theme="matrix"]{--surface:#0b1b10;--ink:#bbecc7;--input:#06100a;--control:#102617;--hover:#17321e;--selected:#173b22;--line:#438558;--focus:#7ee497;--link:#82e596;--error:#ffb297;--stage:#030d07;--muted:#81aa8b;color-scheme:dark}
*{box-sizing:border-box}html,body{height:100%;margin:0}button,input{font:inherit}button,a{touch-action:manipulation}
button{flex:none;height:28px;cursor:pointer;border:1px solid var(--line);border-radius:4px;background:var(--control);color:var(--ink);padding:3px 9px;white-space:nowrap}
button:hover:enabled{background:var(--hover)}button:disabled{opacity:.45;cursor:default}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
[hidden]{display:none!important}
.app-shell{height:100dvh;min-height:240px;padding:6px;display:flex;flex-direction:column}
.toolbar{display:flex;align-items:center;gap:5px;flex:none;margin-bottom:6px;min-width:0}
.app-icon{flex:none;object-fit:contain}
.url-form{display:flex;flex:1;gap:5px;min-width:0}
.url-form input{flex:1;min-width:0;width:100%;height:28px;background:var(--input);color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:4px 7px}
.url-form input[aria-invalid="true"]{border-color:var(--error)}
.url-form button{background:var(--selected)}
#open-youtube{flex:none;color:var(--link);text-decoration:none;white-space:nowrap;padding:4px 2px;line-height:20px}
#open-youtube:hover{text-decoration:underline}
.status:not(.error),.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.status.error{flex:none;color:var(--error);line-height:16px;margin:0 1px 5px}
.player-stage{position:relative;flex:1;min-height:200px;background:var(--stage);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.player-host,.player-host iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--muted);text-align:center;padding:12px}
.empty img{opacity:.65}.empty p{font-size:12px;margin:4px 0;line-height:1.4}noscript{display:block;padding:6px}
@media(max-width:420px){.app-icon{display:none}.app-shell{padding:4px}.toolbar{gap:4px;margin-bottom:4px}.url-form{gap:4px}button{padding-inline:7px}#open-youtube{font-size:11px}}
@media(max-width:280px){.toolbar{flex-wrap:wrap}.url-form{flex-basis:calc(100% - 44px)}#open-youtube{margin-left:auto}}