@charset "UTF-8";
:root{color-scheme:dark;--bg:#101114;--panel:#191b20;--border:#2b2e35;--text:#f0f1f3;--muted:#9399a5;--accent:#b9f577;--accent-dark:#17210d;--danger:#ff9696;font-family:Inter,"Pretendard","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-size:14px;line-height:1.6}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.36}button,input,select{outline:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button{transition:background .15s,border-color .15s,opacity .15s}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.svg-library{position:absolute;width:0;height:0;overflow:hidden}h1,h2,h3,p{margin:0}h2{font-size:16px;font-weight:650;letter-spacing:-.4px}[hidden]{display:none!important}
.app-shell{width:min(1184px,calc(100% - 80px));margin:0 auto}.topbar{height:94px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:11px;color:var(--text);text-decoration:none;font-size:21px;font-weight:750;letter-spacing:-.7px}.brand-mark{display:grid;place-items:center;width:35px;height:35px;background:var(--accent);color:var(--accent-dark);border-radius:10px}.brand-mark svg{width:24px;height:24px}.brand-light{font-weight:420;margin-left:5px}.header-actions{display:flex;align-items:center;gap:23px}.preview-badge{font-size:12px;color:#bdc2cb;display:flex;align-items:center;gap:8px}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}.preview-badge .dot{color:#d3b774}.icon-button{border:1px solid var(--border);border-radius:8px;width:35px;height:35px;background:transparent;color:#adb2bd;display:grid;place-items:center}.icon-button:hover{background:#24272d;color:var(--text)}
main{padding-top:44px}.page-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:29px}.eyebrow{color:var(--accent);font-size:10px;letter-spacing:2.2px;font-weight:700;margin-bottom:7px}h1{font-size:30px;font-weight:650;letter-spacing:-1.2px;line-height:1.4}.subtitle{font-size:13px;color:var(--muted);margin-top:7px}.channel-tag{align-self:center;display:flex;align-items:center;gap:9px;font-size:10px;font-weight:600;letter-spacing:1.3px;color:#a4abb7}.channel-tag>.dot{background:var(--accent)}.channel-number{font-size:12px;margin-left:6px;border-left:1px solid #3b3e45;padding-left:15px;color:#d2d6dc;font-variant-numeric:tabular-nums}.dashboard{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:20px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:14px}.control-panel{padding:27px 28px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:25px}.small-note{font-size:11px;color:var(--muted)}.field-label{display:block;font-size:12px;color:#c7ccd5;margin-bottom:9px;font-weight:500}.url-row{display:flex;gap:9px}.input-wrap{position:relative;flex:1;min-width:0}.input-wrap>svg{position:absolute;left:14px;top:15px;width:17px;height:17px;color:#6d7582;pointer-events:none}input[type=url],input[type=password],select{width:100%;height:47px;border:1px solid #353942;background:#131519;border-radius:8px;color:var(--text);padding:0 13px;font-size:13px;transition:border-color .15s}.input-wrap input{padding-left:41px}input::placeholder{color:#6f7785;font-size:12px}input:hover,select:hover{border-color:#565d68}input[aria-invalid=true]{border-color:var(--danger)}select{cursor:pointer;padding-right:28px}.button{height:47px;padding:0 17px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:12px;font-weight:650;white-space:nowrap;border:1px solid transparent}.button-secondary{background:#2b2e35;border-color:#393d45;color:#e4e7ec}.button-secondary:hover:not(:disabled){background:#373b43}.source-support{display:flex;align-items:center;gap:15px;margin-top:12px;font-size:10px;color:#a1a7b2}.source-support>span{display:flex;align-items:center;gap:6px}.platform-dot{width:5px;height:5px;border-radius:50%;display:inline-block}.youtube{background:#e36767}.source-support .support-note{margin-left:auto;color:#777f8d}.field-error{font-size:12px;color:var(--danger);margin-top:10px}.source-card{display:flex;align-items:center;gap:14px;min-height:105px;padding:19px 17px;border:1px dashed #343941;border-radius:9px;margin-top:24px;background:#16181d}.source-card.is-ready{border-style:solid;border-color:#3e5034}.source-icon{width:45px;height:45px;background:#252930;border:1px solid #323741;border-radius:10px;display:grid;place-items:center;color:#808b9b;flex-shrink:0}.source-card.is-ready .source-icon{color:var(--accent);background:#263021;border-color:#3a4930}.source-description{min-width:0}.source-kicker{font-size:9px;letter-spacing:1.4px;color:#7f8998;font-weight:600}.source-card h3{font-size:13px;font-weight:500;margin-top:3px;overflow-wrap:anywhere}.source-card p{font-size:11px;color:#818b99;margin-top:3px}.sample-tag{font-size:10px;padding:2px 6px;border:1px solid #4a4a39;color:#c1bd8e;border-radius:4px;margin-left:auto;flex-shrink:0}.section-divider{height:1px;background:var(--border);margin:27px 0 23px}.output-heading{margin-bottom:19px}.output-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}fieldset{padding:0;border:0;margin:0;min-width:0}legend{padding:0}.segmented{display:flex;border:1px solid #353942;background:#131519;border-radius:8px;padding:4px;height:47px;gap:4px}.segmented label{flex:1;position:relative;cursor:pointer}.segmented input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.segmented span{display:grid;place-items:center;height:100%;border-radius:5px;color:#929ba8;font-size:12px;pointer-events:none}.segmented input:checked+span{background:#32382d;color:#c6edaa;box-shadow:inset 0 0 0 1px #47583a}.segmented input:focus-visible+span{outline:2px solid var(--accent);outline-offset:1px}.preset-summary{display:flex;gap:9px;font-size:10px;color:#abb3c0;margin-top:14px}.summary-dot{color:#555e6a}.settings-note{color:#737e8d;font-size:11px;margin-top:8px;min-height:18px}.playback-actions{display:flex;gap:11px;margin-top:24px}.button-primary{background:var(--accent);color:var(--accent-dark);font-weight:750}.button-primary:hover:not(:disabled){background:#ccffa0}.playback-actions .button-primary{flex:1}.playback-actions .button{height:49px}.play-triangle{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor}.key-caption{font-size:9px;letter-spacing:1px;opacity:.6;margin-left:auto}.playback-actions .button-primary>span:nth-child(2){margin-right:auto}.button-stop{background:#202329;border-color:#414650;color:#d0d5de;min-width:102px}.button-stop:hover:not(:disabled){border-color:#8b6666;color:#ffbbbb}.stop-square{width:8px;height:8px;background:currentColor;border-radius:1px}
.status-panel{padding:27px 25px;display:flex;flex-direction:column}.status-panel .section-heading{margin-bottom:0}.demo-label{font-size:9px;letter-spacing:1.2px;color:#a99d7d;border:1px solid #484335;border-radius:4px;padding:2px 6px}.status-display{text-align:center;padding:30px 0 22px;border-bottom:1px solid var(--border)}.signal{display:flex;align-items:center;justify-content:center;gap:5px;height:41px;margin-bottom:18px}.signal span{display:block;width:5px;background:#49513f;border-radius:3px;height:12px}.signal span:nth-child(2),.signal span:nth-child(4){height:24px}.signal span:nth-child(3){height:36px}.status-pill{display:inline-flex;align-items:center;gap:7px;border:1px solid #373d35;border-radius:20px;padding:4px 11px;font-size:12px;color:#bec6b6;background:#222720}.status-display p{font-size:11px;color:#8a94a2;margin-top:11px}.elapsed{display:block;font-size:26px;letter-spacing:2px;font-weight:350;margin-top:12px;color:#657080;font-variant-numeric:tabular-nums}.status-display[data-state=playing] .signal span{background:var(--accent);animation:pulse .95s ease-in-out infinite alternate}.status-display[data-state=playing] .signal span:nth-child(even){animation-delay:.35s}.status-display[data-state=playing] .status-pill{color:var(--accent);border-color:#485c38}.status-display[data-state=playing] .elapsed{color:#e0e8d9}.status-display[data-state=starting] .signal,.status-display[data-state=probing] .signal,.status-display[data-state=stopping] .signal{animation:fade 1s ease-in-out infinite alternate}.stream-details{margin:20px 0 24px;display:grid;gap:12px;font-size:11px}.stream-details>div{display:flex;align-items:center;justify-content:space-between;gap:12px}.stream-details dt{color:#8f99a7}.stream-details dd{margin:0;color:#cbd2db;font-variant-numeric:tabular-nums;text-align:right}.demo-notice{display:flex;align-items:flex-start;gap:9px;margin-top:auto;background:#202329;border:1px solid #30343d;border-radius:8px;padding:12px 11px;font-size:10px;line-height:1.8;color:#9aa4b3}.notice-icon{width:14px;height:14px;border:1px solid #727d8b;border-radius:50%;display:grid;place-items:center;line-height:1;font-size:10px;flex-shrink:0;margin-top:2px}
.relay-panel{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-top:20px;padding:22px 25px}.relay-intro{display:flex;align-items:center;gap:13px;flex-shrink:0}.relay-link-icon{width:38px;height:38px;display:grid;place-items:center;background:#252a30;color:#a6b1be;border-radius:9px}.relay-intro h2{font-size:13px}.relay-intro p{font-size:11px;color:#8994a3;margin-top:2px}.relay-address-group{display:flex;align-items:center;gap:18px;min-width:0}.relay-address-group code{font-family:inherit;color:#8894a2;font-size:12px;overflow-wrap:anywhere;min-width:0}.relay-address-group code.has-address{font-family:ui-monospace,Consolas,monospace;color:#b9c5d5}.button-copy{height:37px;background:#262b32;border-color:#3b434d;color:#d4dce6;font-size:11px;flex-shrink:0}.button-copy svg{width:14px;height:14px}.button-copy:hover:not(:disabled){background:#353d46}.bottom-note{display:flex;align-items:center;gap:8px;font-size:10px;color:#727e8d;padding:17px 4px}.bottom-note>.dot{width:4px;height:4px;color:#647653}.bottom-right{margin-left:auto}.bottom-right>span{margin:0 8px;color:#414b58}footer{display:flex;justify-content:space-between;border-top:1px solid #242830;margin-top:31px;padding:21px 0 29px;font-size:10px;color:#586473}footer>span:first-child{letter-spacing:1.7px;font-size:9px}
dialog{background:#1b1e24;border:1px solid #3d434e;border-radius:15px;color:var(--text);padding:26px;width:min(460px,calc(100% - 32px));box-shadow:0 24px 90px #0008}dialog::backdrop{background:#080a10c9;backdrop-filter:blur(4px)}dialog .section-heading{margin-bottom:12px}.close-button{font-size:24px;line-height:1;border:0}.dialog-description{font-size:12px;color:#a2adbc;margin-bottom:23px;line-height:1.9}.settings-footnote{font-size:11px;color:#8893a2;margin:12px 0 22px}dialog .button-primary{width:100%}.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);padding:12px 22px;background:#30382a;border:1px solid #556448;border-radius:9px;color:#e0f0d4;box-shadow:0 10px 35px #0005;font-size:13px;z-index:10}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.noscript{padding:30px;text-align:center;color:var(--danger)}
@keyframes pulse{to{transform:scaleY(.45)}}@keyframes fade{to{opacity:.35}}
/* Compact vertical rhythm keeps the controls and playback address in a desktop viewport. */
.topbar{height:76px}main{padding-top:28px}.page-heading{margin-bottom:24px}.eyebrow{margin-bottom:4px}h1{font-size:28px}.subtitle{margin-top:4px}.control-panel{padding:22px 28px}.section-heading{margin-bottom:17px}.field-label{margin-bottom:7px}.source-support{margin-top:9px}.source-card{min-height:76px;padding:12px 15px;margin-top:18px}.source-icon{width:39px;height:39px}.section-divider{margin:18px 0 16px}.output-heading{margin-bottom:13px}.preset-summary{margin-top:10px}.settings-note{margin-top:4px}.playback-actions{margin-top:18px}.playback-actions .button{height:46px}.status-panel{padding:22px 25px}.status-display{padding-top:26px;padding-bottom:18px}.relay-panel{padding:18px 23px;margin-top:16px}.bottom-note{padding-top:12px;padding-bottom:12px}footer{margin-top:14px;padding:15px 0 20px}
@media(max-width:1050px){.app-shell{width:calc(100% - 48px)}.dashboard{grid-template-columns:minmax(0,1fr) 310px;gap:16px}.control-panel{padding:23px}.status-panel{padding:23px 20px}.output-grid{gap:13px}.source-support{gap:11px}.source-support .support-note{display:none}.relay-panel{align-items:flex-start}.relay-address-group{flex-direction:column;align-items:flex-end;gap:10px}}
@media(max-width:800px){.app-shell{width:calc(100% - 32px)}.topbar{height:76px}main{padding-top:30px}.dashboard{grid-template-columns:1fr}.channel-tag{display:none}.page-heading{margin-bottom:23px}.status-panel{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}.status-panel>.section-heading{grid-column:1/-1}.status-display{border-bottom:0;padding-bottom:10px}.stream-details{align-content:center}.demo-notice{grid-column:1/-1;margin-top:12px}.relay-panel{flex-direction:column;gap:18px}.relay-address-group{width:100%;flex-direction:row;align-items:center;justify-content:space-between}.bottom-right{display:none}footer{margin-top:18px}}
@media(max-width:480px){.control-panel,.status-panel{padding:20px 17px}.url-row{flex-wrap:wrap}.input-wrap{flex-basis:100%}.url-row .button-secondary{width:100%;height:38px}.output-grid{grid-template-columns:1fr;gap:16px}.small-note{font-size:10px}.status-panel{column-gap:14px}.status-display p{max-width:130px;margin-left:auto;margin-right:auto}.elapsed{font-size:21px}.stream-details{font-size:10px}.source-card{padding:14px 12px;gap:10px}.source-card h3{font-size:12px}.relay-panel{padding:20px 17px}.relay-address-group{flex-wrap:wrap}.header-actions{gap:12px}footer>span:last-child{font-size:9px}}
.brand h1{font:inherit;letter-spacing:inherit}
main{padding-bottom:32px}
main>.relay-panel{margin-top:0;margin-bottom:20px}
.playback-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.playback-actions>.button{width:100%;min-width:0}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.status-display[data-state=error] .status-pill,.status-display[data-state=offline] .status-pill{color:var(--danger)}
.error-history{margin-top:22px;border-top:1px solid var(--border);padding-top:14px}.error-history summary{cursor:pointer;color:var(--danger);font-size:12px}.error-history pre{font-size:11px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:260px;overflow:auto;color:var(--muted);user-select:text}.forget-key{width:100%;margin-top:10px}

/* Output controls each occupy a full row on every screen size. */
.output-grid{grid-template-columns:minmax(0,1fr);gap:14px}

.source-queue-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}.source-entry{min-width:0}.source-entry .url-row{flex-wrap:wrap}.source-entry .input-wrap{flex-basis:100%}.source-entry .button-secondary{width:100%}.source-entry .source-card{min-height:74px}.queue-panel{min-width:0;border-left:1px solid var(--border);padding-left:22px}.queue-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.queue-heading h3{font-size:14px}.queue-heading>span{font-size:12px;color:var(--muted)}.queue-list{list-style:none;padding:0;margin:12px 0;display:grid;gap:8px;max-height:360px;overflow:auto}.queue-empty{padding:30px 5px;font-size:12px;color:var(--muted)}.queue-item{background:#121519;border:1px solid #343b44;border-radius:10px;padding:10px;min-width:0}.queue-item.is-selected{border-color:#93bd60;background:#1b2417}.queue-item[draggable=true]{cursor:grab}.queue-select{display:flex;gap:10px;align-items:flex-start;width:100%;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;padding:0;font:inherit}.queue-number{color:var(--accent);font-size:12px;min-width:16px}.queue-copy{display:grid;gap:5px;min-width:0}.queue-copy strong{font-size:12px;line-height:1.5;overflow-wrap:anywhere}.queue-copy>span{font-size:10px;color:var(--muted)}.queue-item progress{width:100%;height:5px;accent-color:var(--accent);margin-top:9px}.queue-actions{display:flex;gap:7px;justify-content:flex-end;margin-top:7px}.queue-actions button{font:inherit;font-size:10px;color:var(--muted);background:#22272e;border:1px solid #414b58;border-radius:4px;padding:3px 8px;cursor:pointer}.queue-actions button:disabled{opacity:.4;cursor:default}.queue-error{font-size:11px;color:var(--danger);margin:7px 0;overflow-wrap:anywhere}.queue-select:focus-visible,.queue-actions button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:600px){.source-queue-grid{grid-template-columns:1fr}.queue-panel{padding-left:0;border-left:0;border-top:1px solid var(--border);padding-top:18px}}