:root{color-scheme:dark;--bg:#142941;--panel:#0c2237;--surface:#112c44;--line:#294359;--line-soft:#20394f;--text:#e9f1f8;--muted:#9fb2c5;--blue:#299af5;--cyan:#36c7e8;--red:#ff4c52;--amber:#f5c43b;--green:#19e2a2;--input-color:var(--amber);--pvw-color:var(--green);--pgm-color:var(--red);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-size:14px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible,a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}input,select{min-width:0;background:#0a1e30;color:var(--text);border:1px solid #385368;border-radius:4px;padding:9px 10px}input[type=checkbox]{accent-color:var(--blue);width:15px;height:15px;margin:0;vertical-align:middle}input[type=range]{accent-color:var(--blue);padding:0;height:15px;cursor:pointer}button{color:inherit}.icon{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block;flex-shrink:0}small,.secondary{font-size:12px;color:var(--muted)}[hidden]{display:none!important}kbd{font:11px ui-monospace,SFMono-Regular,monospace;color:var(--muted)}h1,h2,p{margin:0}h1{font-size:21px;font-weight:600}h2{font-size:18px;font-weight:600}h1 span{font-size:13px;font-weight:400;color:var(--muted);margin-left:9px}h2 span{font-size:12px;font-weight:500;color:#8099ad;margin-left:7px}.button,.icon-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:#16334d;border:1px solid #35526b;border-radius:4px;min-height:35px;white-space:nowrap;padding:7px 11px;transition:background .12s,border-color .12s}.button:hover:not(:disabled),.icon-button:hover:not(:disabled){background:#234761;border-color:#547b97}.icon-button{padding:7px;width:35px;flex-shrink:0}.primary{background:#187fda;border-color:#2a9fff;font-weight:600}.primary:hover:not(:disabled){background:#278de3}.text-button{border:0;background:none;color:var(--muted);padding:4px;display:inline-flex;align-items:center;gap:5px;font-size:12px;white-space:nowrap}.text-button:hover{color:var(--text)}.text-button .icon{width:15px;height:15px}
.topbar{min-height:68px;padding:12px 22px;display:flex;align-items:center;justify-content:space-between;background:#0b2034;border-bottom:1px solid #284258;gap:15px}.brand{display:flex;align-items:center;gap:16px;white-space:nowrap;font-size:20px;letter-spacing:1px}.brand img{width:99.144px;height:auto;display:block}.brand-divider{width:1px;height:28px;background:#6d879b;margin:0 1px}.brand-title{display:inline-flex;align-items:baseline;gap:8px}.brand-cloud{font-size:13px;font-weight:600;letter-spacing:0;color:#58b9ff}.header-right{display:flex;align-items:center;gap:16px;white-space:nowrap;font-size:12px}.hostname{color:var(--muted);font-size:11px}.clock-block{border-left:1px solid var(--line);padding-left:16px;display:flex;flex-direction:column;gap:4px;font-variant-numeric:tabular-nums}.clock-block small{font-size:10px;color:#c4a571}.sync{display:flex;align-items:center;gap:6px;font-size:13px}.sync i{height:7px;width:7px;background:#738b9c;border-radius:50%}.sync small{font-size:10px}.header-right .button{font-size:12px}.header-right .icon{width:17px;height:17px}main{padding:13px 14px 0}.monitors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.monitor{border:1px solid var(--line);border-top:2px solid var(--accent);border-radius:5px;background:var(--panel);min-width:0;overflow:hidden;--accent:var(--input-color)}.preview-monitor{--accent:var(--pvw-color)}.pgm-monitor{--accent:var(--pgm-color)}.panel-title{padding:12px 12px 10px;display:flex;align-items:center;justify-content:space-between;gap:8px}.chip{font-size:11px;border:1px solid #385266;padding:3px 6px;border-radius:3px;white-space:nowrap}.muted{color:var(--muted)}.amber-text{color:var(--pvw-color)}.pgm-text{color:var(--pgm-color)}.screen-row{display:flex;gap:8px;padding:0 10px}.screen{position:relative;flex:1;min-width:0;aspect-ratio:16/9;background:#030a10;overflow:hidden;border:1px solid #2c4053;border-radius:3px}.screen video,.screen>canvas{position:absolute;width:100%;height:100%;object-fit:contain}.empty-screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;background:#02090f}.empty-screen>.icon{width:28px;height:28px;color:#5e768d}.empty-screen strong{font-size:15px;font-weight:500}.meter{--meter-colours:linear-gradient(to top,#06c7a6 0%,#27eaa1 75%,#e7d335 75%,#e7d335 93.75%,#ff4c52 93.75%,#ff4c52 100%);width:42px;position:relative;padding:18px 0 15px;display:flex;gap:3px;flex-shrink:0;overflow:hidden}.meter-title{position:absolute;top:0;font-size:10px;color:var(--muted);left:1px}.meter-bar{position:relative;width:7px;height:100%;flex-shrink:0;background:#0c2237;overflow:hidden}.meter-bar::before,.meter-fill{position:absolute;inset:0;height:100%;background:var(--meter-colours)}.meter-bar::before{content:"";opacity:.24}.meter-fill{clip-path:inset(var(--meter-hidden,100%) 0 0 0)}.meter-peak{position:absolute;left:0;right:0;top:clamp(0px,var(--meter-peak-top,100%),calc(100% - 3px));height:3px;background:#ff4c52;opacity:0;pointer-events:none}.meter-ticks{position:relative;flex:1;min-width:calc(3ch + 2px);height:100%;font:9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;white-space:nowrap;color:#97adc0;padding-left:2px}.meter-ticks>span{position:absolute;left:2px;transform:translateY(-50%)}.meter-ticks>span:first-child{transform:none}.meter-ticks>span:last-child{transform:translateY(-100%)}.meter-lr{position:absolute;bottom:0;left:0;font-size:9px;color:#92a8bb;letter-spacing:5px}.transport{display:flex;align-items:center;gap:11px;min-height:86px;padding:13px 11px}.transport-square{--transport-width:44px;height:calc(var(--transport-width) * 9 / 16);width:var(--transport-width);min-width:var(--transport-width);padding:0;display:flex;align-items:center;justify-content:center;border:1px solid currentColor;border-radius:3px;background:#102c41;color:var(--accent)}.transport-square .icon{width:23px;height:23px;stroke-width:1.6;transform:scale(1.04);transform-origin:center}.transport-square:hover{background:#214056}.transport-square.input-control{color:var(--input-color)}.transport-square.input-control.active{background:#103c36;border-color:var(--input-color)}.transport-square.amber{color:var(--pvw-color)}.transport-square.pgm-control{color:var(--pgm-color)}.transport-square.pgm-control.active{background:#502633}.transport-main{display:flex;flex-direction:column;gap:5px;min-width:0}.transport-main strong{font-size:14px;font-weight:600;white-space:nowrap}.input-monitor .transport-main strong{color:var(--input-color)}.input-monitor.recording .transport-main strong{color:var(--input-color)}.timecode{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:16px;font-weight:500;letter-spacing:-.5px;white-space:nowrap;font-variant-numeric:tabular-nums}.input-monitor .timecode{color:var(--input-color)}.preview-monitor .timecode{color:var(--pvw-color)}.pgm-monitor .timecode,.pgm-time strong{color:var(--pgm-color)}.transport-side{margin-left:auto;text-align:right;display:flex;flex-direction:column;gap:8px;font-size:11px;white-space:nowrap}.transport-side small{font-size:10px}.frame-controls{display:flex;gap:5px}.frame-controls .icon-button{width:29px;height:32px;min-height:32px;padding:5px}.frame-controls .icon{width:16px;height:16px}.preview-transport{gap:7px}.timecode-input{border:1px solid transparent;background:transparent;width:157px;padding:0 3px;border-radius:2px;font-size:15.2px}.timecode-input:hover,.timecode-input:focus{border-color:color-mix(in srgb,var(--pvw-color) 50%,transparent)}.preview-transport .transport-main small{font-size:10px;white-space:nowrap}.take-button{display:flex;align-items:center;gap:8px;margin-left:auto;padding:11px 10px;background:color-mix(in srgb,var(--pgm-color) 20%,transparent);border:1px solid currentColor;color:var(--pgm-color);border-radius:4px;font-size:12px;white-space:nowrap}.take-button:hover{background:color-mix(in srgb,var(--pgm-color) 30%,transparent)}.take-button .icon{width:15px;height:15px}.pgm-time{display:flex;align-items:center;gap:8px}.pgm-time .timecode{font-size:14.4px}.pgm-monitor .transport{gap:9px}.pgm-monitor .transport-main small{font-size:10px;white-space:nowrap}.delay-box{margin-left:auto;padding-left:11px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:7px;font-size:11px;white-space:nowrap}.delay-box b{display:block;color:var(--pgm-color);font-family:ui-monospace,SFMono-Regular,monospace;font-size:17px;font-weight:500;margin-top:3px}.delay-box small{font-size:10px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:5px;min-width:0;overflow:hidden}.media-pool{display:flex;flex-direction:column}.workspace-heading{display:flex;align-items:center;justify-content:space-between;gap:7px;padding:12px}.import-button{font-size:12px;padding:6px 8px;min-height:32px}.import-button .icon{width:17px;height:17px}.search{display:flex;align-items:center;gap:7px;margin:0 11px;background:#0b1e2f;border:1px solid #385166;border-radius:4px;padding:7px 9px;color:#9bb3c7}.search input{padding:0;border:0;background:transparent;width:100%;outline:none;font-size:12px}.search .icon{width:16px;height:16px}.pool-caption{display:flex;justify-content:space-between;color:#6f8aa0;padding:13px 13px 9px;font-size:10px}.media-list{flex:1;min-height:120px;max-height:275px;overflow:auto;padding:0 7px}.asset-card{display:flex;align-items:center;gap:10px;border:1px solid transparent;border-radius:4px;padding:7px;margin-bottom:6px;cursor:grab;position:relative;user-select:none}.asset-card:hover{background:#183249}.asset-card.selected{border-color:var(--cyan);background:#163b52}.asset-card:active{cursor:grabbing}.asset-card.failed{opacity:.7;cursor:default}.asset-thumb{width:80px;aspect-ratio:16/10;background:#0b1728;border-radius:3px;object-fit:cover;flex-shrink:0;overflow:hidden}.asset-thumb.pattern-thumb{background:linear-gradient(90deg,#c7c7c7 14.28%,#c0bb27 14.28%,#c0bb27 28.56%,#1eb5b5 28.56%,#1eb5b5 42.84%,#25ac46 42.84%,#25ac46 57.12%,#b14fa8 57.12%,#b14fa8 71.4%,#bc4245 71.4%,#bc4245 85.68%,#424aa7 85.68%)}.asset-detail{min-width:0;flex:1}.asset-name{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.asset-length{font:11px ui-monospace,monospace;color:#a7bdcf;margin-top:7px}.asset-state{font-size:10px;color:var(--green);margin-top:4px;display:flex;align-items:center;gap:4px}.asset-state i{width:5px;height:5px;background:currentColor;border-radius:50%}.asset-state.failed{color:#f19b8a}.asset-trim{font-size:10px;position:absolute;right:8px;bottom:7px;color:#8dcbe5;background:none;border:0;padding:2px}.asset-trim:hover{color:white}.pool-bottom{display:flex;align-items:center;flex-wrap:wrap;gap:6px;color:#9db3c6;padding:12px;border-top:1px solid var(--line-soft);font-size:11px;margin-top:8px}.pool-bottom>.icon{width:13px;height:13px}.pool-bottom .secondary{display:block;width:100%;font-size:10px;color:#69869d;padding-left:19px}.timeline:focus{outline:none}.timeline-toolbar{min-height:57px;display:flex;align-items:center;gap:11px;padding:10px 12px;border-bottom:1px solid var(--line-soft)}.timeline-toolbar h2{font-size:18px;padding-right:12px;border-right:1px solid var(--line);white-space:nowrap}.tool-group{display:flex;gap:5px;padding-right:10px;border-right:1px solid var(--line)}.tool{font-size:12px;padding:7px 9px;gap:6px}.tool kbd{margin-left:2px}.tool.active,.icon-button.selected{background:#113f5f;border-color:#2697cc;color:#70d9fa}.tool .icon{width:17px;height:17px}.listen{display:flex;align-items:center;gap:5px;color:#99b3c6}.publish-tools{margin-left:auto;display:flex;align-items:center;gap:13px;white-space:nowrap}.publish-tools>span{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px}.publish-tools i{background:#729ab0;height:6px;width:6px;border-radius:50%}.publish-tools>span.dirty{color:var(--amber)}.publish-tools>span.dirty i{background:var(--amber)}.publish-tools .button{font-size:12px}.timeline-surface{width:100%;height:265px;position:relative;background:#0a1d2e;overflow:hidden}.timeline-surface canvas{display:block;width:100%;height:100%;touch-action:none}.timeline-bottom{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 5px;gap:12px}.zoom-controls{display:flex;align-items:center;gap:8px}.zoom-controls>.icon-button{height:25px;min-height:25px;width:26px;padding:4px}.zoom-controls .icon{width:14px;height:14px}.zoom-controls input{width:170px}.zoom-controls .text-button{font-size:10px}#zoom-label{font:10px ui-monospace,monospace;color:#718ca1;min-width:36px}.follow-controls{display:flex;align-items:center;gap:20px;font-size:11px;color:#b5c7d7}.follow-controls label{display:flex;align-items:center;gap:7px;white-space:nowrap}.timeline-scroll{padding:2px 14px 12px}.timeline-scroll input{height:8px;width:100%;accent-color:#54718e;display:block}.statusbar{display:flex;align-items:center;gap:18px;min-height:79px;padding:13px 7px;font-size:12px}.disk-info{display:flex;align-items:center;gap:10px;white-space:nowrap}.disk-info>.icon{color:#b5cbdc;width:22px;height:22px}.disk-info>span{font-size:17px}.disk-info small{font-size:10px}.disk-track{width:102px;height:7px;background:#28445a;border:1px solid #375367;border-radius:4px;position:relative;margin-left:1px}.disk-track i{display:block;background:var(--green);height:100%;width:79.2%;border-radius:3px}.disk-track span{position:absolute;left:74%;top:11px;font-size:9px;color:#9eb4c5}.footer-separator{height:30px;width:1px;background:var(--line)}.retention,.codec-info>span{display:flex;flex-direction:column;gap:6px;white-space:nowrap}.retention small,.codec-info small{font-size:10px;color:#7590a6}.codec-info{display:flex;align-items:center;gap:9px}.codec-info .icon{height:21px;width:21px}.alerts{display:flex;align-items:center;gap:8px;background:none;border:0;font-size:12px;white-space:nowrap;padding:8px}.alerts>span:last-child{font:12px ui-monospace,monospace;color:var(--muted)}.copyright{font-size:10px;color:#90a9bc;text-align:right;line-height:1.8;margin-left:auto;white-space:nowrap}.toast{background:#183f53;color:#e5f6ff;padding:5px 10px;max-width:100%;border:1px solid #4e91a8;border-radius:4px;font-size:12px;line-height:1.45;text-align:center;overflow-wrap:anywhere}.toast.error{background:#432e2d;border-color:#b67b67;color:#ffd7c8}
dialog{width:min(690px,calc(100vw - 32px));max-height:90vh;padding:0;background:#10283e;color:var(--text);border:1px solid #476479;border-radius:7px;box-shadow:0 24px 90px #0008}dialog::backdrop{background:#020c17b5;backdrop-filter:blur(3px)}.modal-header{padding:22px 24px 17px;display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--line)}.modal-header h2{font-size:20px}.modal-header p{font-size:12px;color:var(--muted);margin-top:7px;line-height:1.6}.modal-content{padding:22px 24px}.modal-actions{padding:16px 24px;display:flex;gap:9px;justify-content:flex-end;border-top:1px solid var(--line);flex-wrap:wrap}.modal-actions .danger{margin-right:auto;color:#f0b194;border-color:#785343}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.field{display:flex;flex-direction:column;gap:8px;font-size:13px}.field.full{grid-column:1/-1}.field small{font-size:11px;line-height:1.65}.field input,.field select{width:100%}.config-note{margin-top:20px;padding:12px 14px;background:#0b1f32;border-left:2px solid #b7a05d;line-height:1.8;font-size:12px;color:#b7cad8}.config-mapping{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:17px}.config-mapping span{border:1px solid var(--line);padding:8px;text-align:center;font-size:11px;color:#91abc0}.config-mapping b{display:block;margin-bottom:5px;color:#d7e5ef}.config-status{font-size:12px;color:var(--amber);margin-bottom:18px;line-height:1.7}.inline-error{color:#ffb299;font-size:12px;line-height:1.7;margin-top:16px}.help-list{padding-left:20px;font-size:13px;line-height:2.2;margin:0}.help-list strong{color:#cce5fa}.shortcut-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}.shortcut-grid span{font-size:12px;color:#a9c0d3;display:flex;align-items:center;gap:10px}.shortcut-grid kbd{background:#1b3b52;padding:5px 8px;border-radius:3px;color:#d6e6f1}.demo-choice{width:100%;text-align:left;padding:16px;margin-bottom:12px;border:1px solid var(--line);background:#163349;border-radius:5px;display:flex;flex-direction:column;gap:7px}.demo-choice:hover{border-color:#4ea8d1;background:#1c3d53}.demo-choice b{font-size:14px}.demo-choice span{font-size:12px;color:var(--muted);line-height:1.7}.trim-preview{width:100%;max-height:180px;object-fit:contain;background:#030b14;border-radius:3px;margin-bottom:18px}.log-list{display:flex;flex-direction:column;gap:0;max-height:380px;overflow:auto}.log-entry{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:12px;border-bottom:1px solid var(--line);padding:13px 0;line-height:1.6;font-size:12px}.log-entry time{color:#738fa4;font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums}.log-entry.warning{color:#ebbb74}.no-assets{padding:30px 10px;text-align:center;color:#7f9bb0;font-size:12px}
@media(min-width:1700px){.timeline-surface{height:320px}.media-list{max-height:330px}.transport{min-height:98px}.brand img{width:110.16px}.timecode{font-size:18.4px}.timecode-input{font-size:17.6px;width:177px}.pgm-time .timecode{font-size:17.6px}.transport-square{--transport-width:50px}.transport-side{font-size:13px}.panel-title{padding:14px}.timeline-toolbar{gap:15px}}
@media(max-width:1400px){.brand{font-size:17px;gap:11px}.brand img{width:87.48px}.hostname{display:none}.topbar{padding:11px 15px}.header-right{gap:12px}.brand-title{gap:6px}.brand-cloud{font-size:12px}.frame-controls{display:none}.transport-side{font-size:10px}.pgm-time{flex-direction:column;align-items:flex-start;gap:4px}.pgm-time .timecode{font-size:13.6px}.pgm-monitor .transport-main small{font-size:9px}.delay-box{font-size:10px}.delay-box b{font-size:15px}.publish-tools{gap:8px}.timeline-toolbar{gap:7px;padding:10px 9px}.tool-group{padding-right:7px}.tool{padding:7px}.tool kbd{display:none}.listen{display:none}.statusbar{gap:13px}.disk-track{width:75px}.copyright{font-size:9px}.codec-info{font-size:11px}}
@media(max-width:1100px){.topbar{flex-wrap:wrap}.header-right{margin-left:auto}.screen-row{padding:0 7px;gap:5px}.meter{width:36px}.meter-ticks{font-size:7px}.meter-bar{width:5px}.panel-title{padding:10px 8px}.panel-title h1{font-size:18px}.panel-title h1 span{font-size:10px}.chip{font-size:9px}.transport{padding:10px 8px;gap:7px}.transport-square{--transport-width:36px}.timecode{font-size:12.8px}.timecode-input{font-size:12.8px;width:127px}.transport-side{display:none}.take-button{padding:9px 7px;font-size:10px}.take-button .icon{display:none}.transport-main strong{font-size:12px}.preview-transport .transport-main small{font-size:8px}.pgm-time .timecode{font-size:11.2px}.delay-box{font-size:9px;padding-left:7px}.delay-box b{font-size:13px}.pgm-monitor .transport-main small{display:none}.asset-thumb{width:64px}.asset-name{font-size:11px}.workspace-heading h2{font-size:16px}.workspace-heading{padding:10px}.import-button{font-size:11px;padding:5px}.timeline-toolbar h2{font-size:16px;padding-right:8px}.tool span:not([data-icon]){display:none}.publish-tools>span{display:none}.zoom-controls input{width:90px}.follow-controls{gap:10px;font-size:10px}.statusbar{flex-wrap:wrap;gap:12px;min-height:90px}.copyright{margin-left:auto}.codec-info{display:none}.footer-separator:nth-of-type(2){display:none}}
@media(max-width:760px){main{padding:10px}.topbar{gap:10px;padding:11px}.brand{font-size:16px}.brand img{width:75.816px}.brand-divider{height:24px}.header-right{width:100%;justify-content:space-between;gap:8px}.clock-block{border:0;padding:0}.monitors{grid-template-columns:1fr;gap:10px}.monitor{max-width:100%}.screen-row{gap:10px;padding:0 11px}.screen{aspect-ratio:16/8.2}.panel-title h1{font-size:21px}.panel-title h1 span{font-size:12px}.chip{font-size:11px}.meter{width:42px}.meter-bar{width:7px}.meter-ticks{font-size:9px}.transport{min-height:78px;padding:12px;gap:12px}.transport-square{--transport-width:44px}.transport-main strong{font-size:14px}.timecode,.pgm-time .timecode{font-size:16.8px}.timecode-input{width:170px;font-size:16.8px}.transport-side{display:flex;font-size:11px}.preview-transport .transport-main small{font-size:10px}.take-button{font-size:12px;padding:12px}.delay-box{font-size:11px}.delay-box b{font-size:18px}.pgm-time{flex-direction:row;gap:9px}.pgm-monitor .transport-main small{display:block;font-size:9px}.media-pool{max-height:310px}.media-list{display:flex;overflow:auto;min-height:90px;padding:0 6px;gap:5px}.asset-card{min-width:205px}.pool-caption{padding:8px 13px}.pool-bottom{padding:9px;margin-top:0}.pool-bottom .secondary{width:auto;padding-left:8px}.search{margin-bottom:0}.timeline-toolbar{flex-wrap:wrap;gap:8px}.publish-tools{margin-left:auto}.timeline-surface{height:270px}.timeline-bottom{flex-wrap:wrap;padding:12px}.zoom-controls{width:100%}.zoom-controls input{flex:1;width:auto}.follow-controls{font-size:12px;margin-bottom:7px}.statusbar{gap:18px;padding:17px 3px}.disk-track{width:80px}.disk-info{gap:8px}.disk-info>span{font-size:15px}.footer-separator{display:none}.retention{font-size:11px}.copyright{font-size:10px;width:100%;margin:0}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.modal-content{padding:18px}.modal-header{padding:18px}.modal-actions{padding:15px 18px}.shortcut-grid{grid-template-columns:1fr}}

.icon-button.gap-delete{width:auto;gap:6px;padding:7px 9px;border-color:#4b8dab;color:#b9e8f7}.gap-delete #delete-label{font-size:11px;white-space:nowrap}



/* Source controls always keep the same left-to-right order. */
.preview-tools{display:flex;flex-direction:row;gap:4px;flex-shrink:0}
.preview-tools .icon-button{width:34px;height:27px;min-height:27px;padding:4px;justify-content:center}
.preview-tools .mark-button{font-size:10px;white-space:nowrap;color:var(--pvw-color);border-color:color-mix(in srgb,var(--pvw-color) 50%,transparent);border-radius:3px;background:color-mix(in srgb,var(--pvw-color) 12%,transparent)}
.preview-tools .mark-button:hover:enabled{background:color-mix(in srgb,var(--pvw-color) 22%,transparent);border-color:var(--pvw-color)}
.preview-tools .mark-button:disabled{color:var(--muted);border-color:var(--line);background:#102c41}
.source-range{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;padding:8px 8px 6px;border:0;background:linear-gradient(transparent,#071320db 40%);color:#dbe8f3}
.source-range-labels{display:flex;justify-content:space-between;gap:6px;margin-top:7px;font-size:10px;color:var(--muted);flex-wrap:wrap}
.source-range-labels b{color:var(--pvw-color);font:10px ui-monospace,SFMono-Regular,monospace;white-space:nowrap}
#source-scrub{--range-in:0%;--range-out:100%;display:block;width:100%;margin:0;height:16px;appearance:none;background:transparent;cursor:ew-resize}
#source-scrub::-webkit-slider-runnable-track{height:5px;border-radius:2px;background:linear-gradient(to right,#294454 0 var(--range-in),color-mix(in srgb,var(--pvw-color) 80%,#294454) var(--range-in) var(--range-out),#294454 var(--range-out) 100%)}
#source-scrub::-moz-range-track{height:5px;border-radius:2px;background:linear-gradient(to right,#294454 0 var(--range-in),color-mix(in srgb,var(--pvw-color) 80%,#294454) var(--range-in) var(--range-out),#294454 var(--range-out) 100%)}
#source-scrub::-webkit-slider-thumb{appearance:none;width:7px;height:15px;margin-top:-5px;background:#edf3f7;border:1px solid #0b2034;border-radius:1px}
#source-scrub::-moz-range-thumb{width:7px;height:15px;background:#edf3f7;border:1px solid #0b2034;border-radius:1px}
@media(min-width:1850px){.source-range-labels,.source-range-labels b{font-size:11px}}

/* Full-width header above the media pool and the aligned right workspace. */
body{display:grid;grid-template-columns:clamp(224px,16vw,280px) minmax(0,1fr);grid-template-rows:auto auto 1fr;min-height:100dvh}
body>.media-pool{grid-column:1;grid-row:2;margin:13px 0 0 12px;min-height:0;max-height:none}
body>.topbar{grid-column:1 / -1;grid-row:1;min-width:0}
body>main{grid-column:2;grid-row:2;min-width:0;display:flex;flex-direction:column;gap:13px;padding:13px 14px 0}
body>.media-pool .media-list{min-height:0;max-height:none;contain:size;overflow:auto}
body>.media-pool .workspace-heading{flex-wrap:wrap}
body>.media-pool .asset-card{gap:8px}
body>.media-pool .asset-thumb{width:64px}
main>.monitors,main>.timeline{width:100%;min-width:0}
body>.statusbar{grid-column:1 / -1;grid-row:3;align-self:start;flex-wrap:wrap;row-gap:12px;margin:13px 14px 0;min-width:0}
.monitor{container-type:inline-size}
.preview-transport{display:grid;grid-template-columns:auto max-content minmax(max-content,1fr) auto;grid-template-areas:"play tc tools mode";column-gap:8px;row-gap:7px;min-height:98px}
.preview-transport>.transport-square{grid-area:play}
.preview-transport>.preview-tools{grid-area:tools;align-self:center;justify-self:center}
.preview-transport>.preview-mode-controls{grid-area:mode;justify-self:end}
#preview-av-mode{font-size:10px;font-weight:600;white-space:nowrap}
.preview-transport>.transport-main{grid-area:tc;align-self:center}
.preview-transport .preview-tools .icon-button{width:32px;height:30px;min-height:30px}
.preview-transport .preview-tools .icon{width:16px;height:16px}
.preview-transport .timecode-input{width:11ch;max-width:100%;font-size:14.4px;padding:0}
@container (min-width:550px){.preview-transport .timecode-input{font-size:17.6px}.preview-transport .preview-tools .icon-button{width:34px;height:34px;min-height:34px}}
@container (max-width:380px){.transport-side{display:none}.panel-title{padding:10px 9px}.panel-title h1{font-size:18px}.panel-title h1 span{font-size:10px;margin-left:6px}.chip{font-size:9px}.screen-row{padding:0 8px;gap:5px}.meter{width:36px}.meter-ticks{font-size:8px}.meter-bar{width:5px}.preview-transport{column-gap:6px;padding:12px 8px}.preview-transport .timecode-input{font-size:12.8px}.preview-transport .transport-main small{font-size:9px}.pgm-monitor .transport-main small{font-size:8px}.pgm-time{flex-direction:column;align-items:flex-start;gap:4px}.pgm-time .timecode{font-size:12.8px}.delay-box{padding-left:7px;font-size:10px}.delay-box b{font-size:14px}.pgm-monitor .transport{gap:7px;padding:12px 8px}}
@media(max-width:1100px) and (min-width:761px){.monitors{grid-template-columns:1fr}.monitor{max-width:100%}.screen{max-height:340px}.topbar{flex-wrap:wrap}.statusbar .copyright{white-space:normal}}
@media(max-width:760px){body{display:flex;flex-direction:column}.topbar{order:0}body>.media-pool{order:1;margin:10px 10px 0;max-height:300px;min-height:180px}body>.media-pool .media-list{contain:none;display:flex;min-height:90px;max-height:150px}body>main{order:2;padding:10px;gap:10px}body>.statusbar{order:3;margin:0 10px;align-self:stretch}.preview-transport .timecode-input{max-width:177px}.preview-transport .transport-main small{font-size:9px}}

/* Input status and timecode share one row, using PGM's text scale. */
.input-monitor .transport-main{flex-direction:column;align-items:flex-start;gap:5px}
.input-time{display:flex;align-items:center;gap:8px}
.input-monitor .transport-main small{font-size:10px;white-space:nowrap}
.input-monitor .timecode{font-size:14.4px}
@media(min-width:1700px){.input-monitor .timecode{font-size:17.6px}}
@media(max-width:1400px){.input-monitor .timecode{font-size:13.6px}}
@media(max-width:1100px){.input-monitor .timecode{font-size:11.2px}}
@media(max-width:760px){.input-monitor .timecode{font-size:16.8px}}
@container (max-width:380px){.input-monitor .timecode{font-size:12.8px}}

@media(max-width:1400px){.input-monitor .transport-main small{font-size:9px}}
@container (max-width:380px){.input-monitor .transport-main small{font-size:8px}}

/* Disk usage follows the PGM side readout layout, with the Input theme. */
.input-monitor .transport{gap:9px}
.input-storage{flex-shrink:0}
.input-storage b{color:var(--input-color)}
.storage-meter{display:flex;align-items:center;gap:5px}
.storage-meter>small{font-size:9px}
.storage-track{position:relative;width:60px;height:6px;background:#28445a;border:1px solid #375367;border-radius:3px;overflow:hidden}
.storage-track>i{display:block;width:79.2%;height:100%;background:var(--input-color)}
.storage-threshold{position:absolute;left:80%;top:0;bottom:0;width:1px;background:var(--red)}
@container (max-width:380px){.input-monitor .transport{gap:7px;padding:12px 8px}.storage-track{width:54px}}
@container (max-width:330px){.input-monitor .transport{gap:6px}.input-monitor .transport-square{--transport-width:36px}.input-time{gap:6px}.input-monitor .transport-main strong{font-size:12px}.input-monitor .timecode{font-size:11.2px}.storage-track{width:42px}}

.statusbar>.log-separator{display:block;flex-shrink:0}

/* Keep shortcut letters visible on the compact editing tools. */
.timeline-toolbar .tool kbd{display:inline}

/* Preserve the picture ratio independently of the surrounding monitor card. */
.screen{aspect-ratio:16/9;max-height:none;border:0;outline:1px solid #2c4053}
.screen video,.screen>canvas{object-fit:cover}

/* Desktop console: header and status stay visible; the timeline uses the remainder. */
@media(min-width:1101px) and (min-height:600px){
  html{height:100%;overflow:hidden}
  body{height:100dvh;min-height:0;grid-template-rows:56px minmax(0,1fr) 52px;overflow:hidden}
  body>.topbar{min-height:0;padding:8px 16px}
  body>.media-pool{margin:10px 0 0 12px;overflow:hidden}
  body>main{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px;padding:10px 14px 0;container-type:inline-size}
  .monitors{height:min(calc(((100cqw - 24px) / 3 - 68px) * 9 / 16 + 134px),calc(100dvh - 380px));min-height:0}
  .monitor{min-height:0;display:grid;grid-template-rows:42px minmax(0,1fr) 90px}
  .monitor .panel-title{padding:8px 10px}
  .monitor .screen-row{--meter-width:42px;container-type:size;min-height:0;padding:0 8px;gap:8px;align-items:center;justify-content:center}
  .monitor .screen{flex:none;width:min(calc(100cqw - var(--meter-width) - 8px),calc(100cqh * 16 / 9));height:auto;aspect-ratio:16/9;max-height:none}
  .monitor .meter{width:var(--meter-width);height:min(100cqh,calc((100cqw - var(--meter-width) - 8px) * 9 / 16));align-self:center}
  .monitor .transport{min-height:0;padding-top:8px;padding-bottom:8px}
  .source-range-labels{margin-top:3px;flex-wrap:nowrap;font-size:9px}
  .source-range-labels b{font-size:9px}
  main>.timeline{min-height:0;display:grid;grid-template-rows:44px minmax(0,1fr) 34px 32px}
  .timeline-toolbar{min-height:0;padding:4px 10px;gap:9px}
  .timeline-toolbar .tool-group{gap:4px;padding-right:8px}
  .timeline-toolbar .button,.timeline-toolbar .icon-button{min-height:30px;height:30px;padding-top:5px;padding-bottom:5px}
  
  .timeline-surface{height:auto;min-height:0}
  .timeline-surface canvas{position:absolute;inset:0;width:100%;height:100%}
  .timeline-bottom{min-height:0;padding:4px 12px 3px}
  .timeline-scroll{padding:2px 12px 12px}
  body>.statusbar{height:52px;min-height:0;align-self:stretch;flex-wrap:nowrap;margin:0 14px;padding:7px;gap:16px}
  .statusbar .copyright{font-size:9px}
  .statusbar .footer-separator{height:28px;flex-shrink:0}
}
@media(min-width:1101px) and (min-height:600px){
  .monitor .preview-transport{padding-top:4px;padding-bottom:4px;row-gap:3px}
}

/* The horizontal scrollbar is a position control, with one continuous track colour. */
.timeline-scroll input,#zoom{appearance:none;-webkit-appearance:none;height:18px;margin:0;border:0;border-radius:0;background:transparent;cursor:ew-resize}
.timeline-scroll input::-webkit-slider-runnable-track,#zoom::-webkit-slider-runnable-track{height:6px;border:0;border-radius:3px;background:#354b60}
.timeline-scroll input::-webkit-slider-thumb,#zoom::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:24px;height:14px;margin-top:-4px;border:1px solid #d7e5ed;border-radius:7px;background:#f4f8fb;box-shadow:none}
.timeline-scroll input::-moz-range-track,.timeline-scroll input::-moz-range-progress,#zoom::-moz-range-track,#zoom::-moz-range-progress{height:6px;border:0;border-radius:3px;background:#354b60}
.timeline-scroll input::-moz-range-thumb,#zoom::-moz-range-thumb{width:24px;height:14px;border:1px solid #d7e5ed;border-radius:7px;background:#f4f8fb;box-shadow:none}

/* Pool source name is in the heading; the only picture overlay is its scrubber. */
.preview-monitor .panel-title h1{display:flex;align-items:baseline;gap:9px;flex:1;min-width:0;white-space:nowrap}
.preview-monitor .panel-title h1>span{margin-left:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.preview-monitor .panel-title .chip{flex-shrink:0}
.source-range-labels{gap:4px;margin-top:3px;flex-wrap:nowrap;color:#dbe8f3;text-shadow:0 1px 2px #000}
.source-range-labels,.source-range-labels b{font-size:clamp(8px,2cqw,11px)}

/* The source picture is draggable; its scrubber remains an independent control. */
#preview-screen[draggable=true]{cursor:grab;user-select:none;-webkit-user-select:none}
#preview-screen[draggable=true]:active{cursor:grabbing}
#preview-screen[draggable=true]>video,#preview-screen[draggable=true]>canvas{pointer-events:none}
#preview-screen .source-range{cursor:default;user-select:none;-webkit-user-select:none}

/* Source-only loop control, between In and Out. */
.preview-tools .loop-button.active{color:var(--pvw-color);background:color-mix(in srgb,var(--pvw-color) 20%,transparent);border-color:var(--pvw-color)}
@container (max-width:420px){.preview-transport .preview-tools{gap:3px}.preview-transport .preview-tools .icon-button{width:26px;min-width:26px;padding:4px}.preview-transport .preview-tools .icon{width:14px;height:14px}.preview-transport .mark-button{font-size:10px}}


@container (max-width:330px){.preview-transport{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"play tc tc" ". tools mode"}.preview-transport>.transport-main{justify-self:start}}

/* Each monitor keeps the same meter footprint for 2, 8 and 16 channels. */
.monitor .panel-title{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:6px;align-items:center}
.monitor .panel-title h1{display:flex;align-items:baseline;gap:8px;min-width:0;white-space:nowrap}
.monitor .panel-title h1>span{margin-left:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.monitor .panel-title>.chip{justify-self:center;text-align:center}
.publish-tools>.take-button{margin:0;padding:7px 11px;font-size:12px}
.meter-channel-select{justify-self:end;width:62px;max-width:100%;height:26px;padding:2px 4px;font-size:11px;line-height:1.2;cursor:pointer;background:#0a1e30;color:var(--muted);border-color:#385266}
.meter-channel-select:focus,.meter-channel-select:focus-visible{outline:none;box-shadow:none}
.meter-banks{display:grid;grid-template-rows:repeat(var(--meter-bank-count),minmax(0,1fr));gap:6px;width:100%;height:100%;min-width:0;min-height:0}
.meter-bank{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:1px;min-width:0;min-height:0}
.meter-bank>.meter-bar{width:100%;height:100%;min-width:0;min-height:0}
@container (max-width:380px){.meter-channel-select{width:55px;font-size:10px}.monitor .panel-title h1{gap:5px}}

/* Enlarge only the Input record circle by another 10%. */
#record-toggle[data-symbol="record"] .icon{transform:scale(1.144)}

/* Connection status is explicit; stale monitor frames are not live signals. */


.backend-offline .screen{opacity:.5}

#input-live-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#input-live-empty{z-index:2}

#input-live-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.clock-settings{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:22px}.clock-settings h3,.modal-content>h3{font-size:16px;margin:0 0 16px}.clock-actions{display:flex;gap:10px;margin-top:16px}.clock-manual{margin-top:20px}.clock-auto input{width:auto}.clock-auto span{display:flex;align-items:center;gap:8px}.clock-auto{justify-content:center}

.publish-tools .apply-edits{color:var(--pgm-color);border-color:currentColor;background:color-mix(in srgb,var(--pgm-color) 12%,transparent);font-weight:600}
.publish-tools .apply-edits:hover:not(:disabled){background:color-mix(in srgb,var(--pgm-color) 22%,transparent);border-color:currentColor}
.publish-tools .revert-edits{color:var(--input-color);border-color:currentColor;background:color-mix(in srgb,var(--input-color) 12%,transparent);font-weight:600}
.publish-tools .revert-edits:hover:not(:disabled){background:color-mix(in srgb,var(--input-color) 22%,transparent);border-color:currentColor}

.timeline-toolbar>.tool-group,.timeline-toolbar>.listen,.timeline-toolbar>.publish-tools{flex-shrink:0}
@media(max-width:1100px){.timeline-toolbar{flex-wrap:wrap}}

.config-run-actions{display:flex;gap:9px;margin-right:auto}
.config-run-actions .danger{margin-right:0}
@media(max-width:760px){.modal-actions:has(.config-run-actions){flex-wrap:wrap}.config-run-actions{width:100%}}

.transport-square.input-control,.transport-square.input-control.active{color:var(--input-color);border-color:currentColor;background:color-mix(in srgb,var(--input-color) 12%,transparent)}
.transport-square.input-control:hover{background:color-mix(in srgb,var(--input-color) 22%,transparent)}
#clear-confirm-dialog{width:min(460px,calc(100vw - 32px))}
#clear-confirm-description{line-height:1.8;font-size:14px;color:var(--muted)}
.clear-confirm-button{color:var(--pgm-color);border-color:currentColor;background:color-mix(in srgb,var(--pgm-color) 12%,transparent)}

/* Keep timeline position and monitoring available at laptop widths too. */
.timeline-toolbar h2.timeline-heading{font:600 14.4px ui-monospace,monospace;color:var(--pvw-color);font-variant-numeric:tabular-nums}
#timeline-tc{display:inline-block;width:11ch;min-width:11ch;margin-left:.5em;font:inherit;color:inherit;font-variant-numeric:inherit;white-space:nowrap}
.timeline-toolbar>.listen{display:flex;gap:4px}
.listen>.listen-button{padding-left:8px;padding-right:8px;font-size:11px;font-weight:600;color:var(--muted);border-color:currentColor;background:transparent;opacity:.65}
.listen>.listen-button[data-monitor="input"]{color:var(--input-color)}
.listen>.listen-button[data-monitor="preview"]{color:var(--pvw-color)}
.listen>.listen-button[data-monitor="pgm"]{color:var(--pgm-color)}
.listen>.listen-button[aria-checked="true"]{background:color-mix(in srgb,currentColor 20%,transparent);opacity:1;filter:brightness(1.3)}
.listen>.listen-button:hover{border-color:currentColor;background:color-mix(in srgb,currentColor 30%,transparent);opacity:1}
.listen>.listen-button:focus-visible{outline:none}
@media(max-width:1400px){.timeline-toolbar{flex-wrap:wrap}.timeline-toolbar h2{font-size:15px}.timeline-toolbar .publish-tools{margin-left:auto}}

/* Shared outlined colour treatment for the ten marked controls and TO PGM. */
:is(.transport-square,.take-button,.panel-title>.chip,.publish-tools>.button,.follow-controls input).tinted-control{border-color:currentColor;background:color-mix(in srgb,currentColor 20%,transparent)}
:is(.transport-square,.take-button,.publish-tools>.button).tinted-control:hover:not(:disabled){border-color:currentColor;background:color-mix(in srgb,currentColor 30%,transparent)}
.follow-controls input.tinted-control{appearance:none;-webkit-appearance:none;display:grid;place-content:center;flex-shrink:0;padding:0;color:inherit;cursor:pointer}
.follow-controls input.tinted-control::after{content:"";width:7px;height:4px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-1px) rotate(-45deg);visibility:hidden}
.follow-controls input.tinted-control:checked::after{visibility:visible}
@media(max-width:1400px){.timeline-toolbar h2.timeline-heading{font-size:12px}}

/* System settings: aligned controls and compact NTP rows. */
#modal[data-kind="config"]{width:min(800px,calc(100vw - 32px))}
#modal[data-kind="config"] input:not([type="checkbox"]),#modal[data-kind="config"] select{height:40px;box-sizing:border-box;padding:8px 10px;line-height:22px}
#modal[data-kind="config"] .clock-settings button{height:40px;white-space:nowrap}
.clock-server-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:end;gap:16px}
.clock-server-row .clock-auto{display:flex;align-items:center;gap:7px;min-height:40px;font-size:13px;white-space:nowrap}
.clock-timezone-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:end;gap:12px;margin-top:18px}
#modal[data-kind="config"] .config-run-actions{flex-wrap:wrap}
#format-confirm-dialog{width:min(580px,calc(100vw - 32px))}
#format-volume{white-space:pre-line;line-height:1.8;color:var(--amber);margin-bottom:14px}
#format-confirm-description{font-size:14px;line-height:1.8}
#format-status{font-size:13px;line-height:1.7;margin-top:14px;color:var(--amber)}
.format-confirm-button{color:var(--pgm-color);border-color:currentColor;background:color-mix(in srgb,currentColor 20%,transparent)}
@media(max-width:600px){.clock-server-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.clock-server-row .clock-auto{grid-column:1/-1}.clock-timezone-row{grid-template-columns:1fr 1fr}.clock-timezone-row>.field{grid-column:1/-1}}

.settings-section-heading{display:flex;align-items:baseline;gap:16px;margin-bottom:18px}
.settings-section-heading h3{flex-shrink:0;font-size:16px;margin:0}
.settings-section-heading .config-status{min-width:0;margin:0}

/* Media volume folders, presented as two independent library tabs. */
.pool-tabs{display:flex;gap:8px;margin:0 11px 12px;padding:0;border-bottom:1px solid var(--line)}
.pool-tabs [role="tab"]{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:5px;padding:10px 4px 9px;margin-bottom:-1px;font-size:12px;white-space:nowrap;border:0;border-bottom:2px solid transparent;border-radius:0;color:var(--muted);background:transparent}
.pool-tabs [role="tab"][aria-selected="true"]{color:var(--cyan);border-bottom-color:currentColor;background:transparent}
.pool-tabs [role="tab"] span{font:10px ui-monospace,monospace;opacity:.8}
.pool-tabs [role="tab"]:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.asset-state.recording{color:var(--input-color)}
.asset-card{display:grid;grid-template-columns:64px minmax(0,1fr);gap:6px 8px}
.asset-card .asset-thumb{width:64px}
.asset-card .asset-state{margin-top:0;grid-column:1;font-size:10px;white-space:nowrap}
.asset-actions{grid-column:2;display:flex;align-items:center;justify-content:flex-end;gap:6px;white-space:nowrap}
.asset-actions button{position:static;padding:2px;border:0;background:none;font-size:10px;line-height:16px;cursor:pointer}
.asset-actions .asset-transcode{color:#8dcbe5}
.asset-actions .asset-trim{color:#8dcbe5}
.asset-actions .asset-delete{color:#a7bdcf}
.asset-actions button:hover{color:#fff}
.asset-actions button:focus-visible{outline:1px solid currentColor;outline-offset:2px;border-radius:2px}
#delete-asset-name{overflow-wrap:anywhere}

.pool-panel{display:flex;flex-direction:column;flex:1;min-height:0}
.pool-panel>.search{flex-shrink:0;margin-bottom:11px}
.pool-tabs [role="tab"]:hover{color:var(--cyan)}

/* Transfer and encode telemetry stays inside the media pool. */
.upload-progress{flex-shrink:0;margin:0 11px 10px;padding:8px;border:1px solid #8dcbe566;border-radius:4px;background:#8dcbe51a}
.upload-progress[hidden]{display:none}
.media-progress{grid-column:1/-1;min-width:0;color:#8dcbe5}
.media-progress-label{font-size:10px;line-height:1.5;margin:3px 0 4px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.media-progress progress{display:block;width:100%;height:6px;border:0;border-radius:3px;overflow:hidden;appearance:none;background:#8dcbe526;accent-color:#8dcbe5}
.media-progress progress::-webkit-progress-bar{background:#8dcbe526;border-radius:3px}
.media-progress progress::-webkit-progress-value{background:#8dcbe5;border-radius:3px}
.media-progress progress::-moz-progress-bar{background:#8dcbe5;border-radius:3px}
.media-progress progress:indeterminate{background:linear-gradient(90deg,#8dcbe526 25%,#8dcbe56b 50%,#8dcbe526 75%);background-size:200% 100%;animation:media-progress-pending 1.8s linear infinite}
.media-progress.paused{opacity:.65}
.media-progress.paused progress{animation:none}
@keyframes media-progress-pending{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.media-progress progress{animation:none}}

/* Keep copyright centered on the page, independent of the side groups. */
body>.statusbar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:16px}
.footer-status,.footer-logs{display:flex;align-items:center;gap:16px;min-width:0}
.footer-logs{justify-self:end}
.statusbar .copyright{margin:0;text-align:center;width:auto}
@media(max-width:1100px){.footer-status>.footer-separator{display:none}}
@media(max-width:760px){body>.statusbar{grid-template-columns:minmax(0,1fr) auto}.footer-status{grid-column:1;grid-row:1}.footer-logs{grid-column:2;grid-row:1}.statusbar .copyright{grid-column:1/-1;grid-row:2;white-space:normal}}

/* Match the HUB wordmark's font treatment. */
.brand .brand-name{font-family:-apple-system,system-ui,"Segoe UI",sans-serif;font-size:22.4px;font-weight:700;line-height:22.4px;letter-spacing:.5px}
.header-right .hostname{display:block;max-width:240px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clock-manual{display:grid;grid-template-columns:minmax(0,1fr) 225px auto;gap:8px 12px;align-items:start}
.clock-manual>.field{min-width:0}
.hostname-edit{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.hostname-edit input{min-width:0}
.clock-manual-note{grid-column:2/-1;font-size:11px;line-height:1.65;color:var(--muted)}
#hostname-state{grid-column:1;font-size:11px;line-height:1.65;color:var(--muted);overflow-wrap:anywhere}
@media(max-width:760px){.clock-manual{grid-template-columns:minmax(0,1fr) auto}.clock-manual .hostname-field{grid-column:1/-1}.clock-manual #hostname-state{grid-column:1/-1;grid-row:2}.clock-manual-note{grid-column:1/-1}.header-right .hostname{max-width:35vw}}

.input-monitor .chip.live-input{color:var(--input-color)}

.storage-settings{border-top:1px solid var(--line);margin-top:22px;padding-top:20px}
.storage-device-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px}
.storage-device-row button,.storage-cleanup-row button{height:40px;white-space:nowrap}
.storage-capacity{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0 12px;font-size:12px;color:var(--muted)}
.storage-capacity strong{display:block;margin-top:6px;font-size:18px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--text)}
.storage-usage{height:6px;overflow:hidden;background:#061a2d;border-radius:3px}.storage-usage i{display:block;height:100%;width:0;background:var(--cyan);transition:width .3s}
.storage-cleanup-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;margin-top:18px;font-size:13px}
.storage-cleanup-enable{display:flex;align-items:center;gap:8px;white-space:nowrap}.storage-cleanup-threshold{display:flex;align-items:center;gap:10px;white-space:nowrap}.storage-cleanup-threshold output{color:var(--amber);min-width:32px;font-variant-numeric:tabular-nums}
#modal[data-kind="config"] #storage-threshold{min-width:65px;width:100%;height:24px;padding:0;accent-color:var(--cyan);background:transparent;border:0}
.storage-policy{font-size:11px;line-height:1.7;color:var(--muted);margin:10px 0 0}.storage-settings .inline-error:empty{display:none}
@media(max-width:600px){.storage-cleanup-row{grid-template-columns:1fr auto;gap:12px}.storage-cleanup-threshold{grid-row:2;grid-column:1/-1}.storage-cleanup-row button{grid-column:2;grid-row:1}}

.delay-settings{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:22px}
.delay-settings-row{display:grid;grid-template-columns:1fr 1fr auto;gap:16px;align-items:end}
#modal[data-kind="config"] .delay-settings-row button{height:40px;white-space:nowrap}
@media(max-width:700px){.delay-settings-row{grid-template-columns:1fr 1fr}.delay-settings-row button{grid-column:1/-1}}

#transport-confirm-dialog{width:min(460px,calc(100vw - 32px))}
#transport-confirm-description{line-height:1.8;font-size:14px;color:var(--muted)}
.format-mismatch { color: var(--red, #ff6269) !important; }
.format-warning { color: #ff6269; font-size: 12px; line-height: 1.6; position: absolute; top: 50%; left: 12px; right: 12px; transform: translateY(-50%); padding: 8px 10px; text-align: center; background: #241013ed; border-radius: 3px; z-index: 4; pointer-events: none; }

.input-monitor .transport { position: relative; }

/* Link state stays visible through icon tint and the accessible tooltip. */
.timeline-toolbar .link-clips{width:35px;padding:7px;color:#80a6bd;border-color:currentColor;background:color-mix(in srgb,currentColor 20%,transparent)}
.timeline-toolbar .link-clips[aria-pressed="true"]{color:#72d9fa;background:color-mix(in srgb,currentColor 20%,transparent)}
.timeline-toolbar .link-clips .icon{width:19px;height:19px}

.razor-preview{position:absolute;width:36px;height:36px;background-repeat:no-repeat;pointer-events:none;z-index:3}

.marker-note-field textarea{width:100%;resize:vertical;min-height:110px;padding:10px;background:#0a1e30;color:var(--text);border:1px solid #385368;border-radius:4px;font:inherit}

/* Notices float over the toolbar instead of consuming its remaining width. */



/* Block uploads in the handler so a click can explain the current restriction. */
#import-button[aria-disabled="true"]{opacity:.45;cursor:not-allowed}

/* All global notices share the free space between the brand and server controls. */
.topbar{position:relative}
.topbar>.brand,.topbar>.header-right{flex-shrink:0}
.header-notice{position:relative;flex:1;min-width:0;align-self:stretch;z-index:10000;pointer-events:none}
.header-notice>.toast{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content;max-width:calc(100vw - 32px);white-space:normal;overflow-wrap:anywhere;box-shadow:0 3px 14px #0006}
.header-notice:has(#drop-message:not([hidden])) #toast{display:none}
.header-notice:has(#backend-status:not([hidden])) :is(#toast,#drop-message){display:none}
@media(max-width:1100px){.topbar>.header-notice{position:absolute;left:12px;right:12px;top:0;bottom:0}}

/* Keep the capacity estimate and its meter aligned across the whole readout. */
.input-monitor .input-storage b{font-size:clamp(9px,2.7cqw,13px);font-variant-numeric:tabular-nums}
.input-storage .storage-meter{align-self:stretch;width:100%}
.input-storage .storage-track{width:auto;flex:1;min-width:0}

.input-storage>span{font-size:clamp(8px,2.3cqw,11px)}
.input-storage>span>small{font-size:inherit}

/* Animate the real usage fill while a threshold cleanup round is running. */
.input-storage .storage-track.cleaning>i{background-image:repeating-linear-gradient(115deg,transparent 0 6px,var(--red) 6px 10px,transparent 10px 16px);background-size:18px 100%;animation:storage-cleanup-sweep .8s linear infinite}
@keyframes storage-cleanup-sweep{to{background-position:-18px 0}}
@media(prefers-reduced-motion:reduce){.input-storage .storage-track.cleaning>i{animation:none}}

/* System management menu; inactive actions await their individual workflows. */
.system-management{position:relative;z-index:10001}
.management-chevron{width:6px;height:6px;margin:0 2px 3px 5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
#system-management-toggle[aria-expanded="true"] .management-chevron{transform:rotate(225deg);margin-top:5px}
.system-management-menu{position:absolute;right:0;top:calc(100% + 7px);min-width:160px;padding:5px;background:#10283e;border:1px solid #476479;border-radius:5px;box-shadow:0 8px 24px #0007}
.system-management-menu>button{display:block;width:100%;padding:10px 14px;border:0;border-radius:3px;background:transparent;text-align:left;font-size:12px;white-space:nowrap}
.system-management-menu>button:hover:enabled,.system-management-menu>button:focus-visible{background:#234761;outline:none}
.system-management-menu>button:disabled{opacity:.55}

.password-fields{display:grid;gap:16px}.password-fields input{width:100%}.power-confirm-description{line-height:1.8;font-size:14px}.power-confirm-description strong{color:var(--red)}

.storage-device-actions{display:flex;gap:9px;align-items:center}
.storage-device-actions .danger,.media-config-action [id="cfg-apply"]{color:#f0b194;border-color:#785343}
@media(max-width:600px){.storage-device-row{grid-template-columns:minmax(0,1fr)}.storage-device-actions{justify-content:flex-end;flex-wrap:wrap}}

/* Keep each media action beside its related settings row. */
#modal[data-kind="config"] .config-run-actions{margin-right:0;width:auto}
#media-config{grid-template-columns:minmax(0,1fr) minmax(85px,1fr) auto;gap:20px 16px}
#media-config .field{min-width:0}
#media-config .media-config-action button{height:40px;white-space:nowrap}
@media(max-width:600px){#media-config{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}#media-config .media-config-action{grid-column:1/-1;justify-self:end}#media-config .media-config-action>span{display:none}}

#modal[data-kind="config"] .modal-actions{align-items:center}
#modal[data-kind="config"] .config-run-message{flex:1 1 160px;min-width:0;margin:0;overflow-wrap:anywhere;text-align:left}
#modal[data-kind="config"] .config-run-message:empty{display:none}
#modal[data-kind="config"] .config-run-actions,#modal[data-kind="config"] #cfg-cancel{flex-shrink:0}

/* Monitor timecodes use the existing PVW size at every panel width. */
.monitor .transport .timecode,.pgm-output-info>.delay-box>span,#actual-delay{font-size:14.4px}
@container (min-width:550px){.monitor .transport .timecode,.pgm-output-info>.delay-box>span,#actual-delay{font-size:17.6px}}
@container (max-width:380px){.monitor .transport .timecode,.pgm-output-info>.delay-box>span,#actual-delay{font-size:12.8px}}

/* Keep transport timecodes centered beside their buttons. */
.monitor .transport .transport-main{align-self:center;justify-content:center;gap:0}
.monitor .transport .timecode{line-height:1.2}
.preview-transport{align-content:center}
.pgm-output-info{margin-left:auto;display:flex;align-items:center;gap:10px;min-width:0}
.output-format-box{display:flex;flex-direction:column;align-self:flex-end;gap:7px;min-width:0;font-size:11px;color:var(--text)}
.output-format-box small{font-size:10px;line-height:1.3;white-space:nowrap;color:var(--muted)}
.pgm-output-info>.delay-box{margin-left:0;flex-shrink:0}
@container (max-width:420px){.pgm-output-info{gap:7px}.output-format-box{font-size:10px}.output-format-box small{font-size:9px}}
@container (max-width:350px){.output-format-box small{white-space:normal}.pgm-output-info{gap:5px}}

/* Keep output selectors visually unchanged while only Apply is dimmed. */
#output-settings select:disabled{color:var(--text);-webkit-text-fill-color:var(--text);border-color:#385368;background:#0a1e30;opacity:1}

/* Both media settings rows share columns, including the action buttons. */
.media-encoding-row{display:contents}
@media(max-width:600px){.media-encoding-row{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;align-items:start;min-width:0}}

.asset-length{display:flex;align-items:center;justify-content:space-between;gap:6px;white-space:nowrap}
.asset-duration{min-width:0}
.asset-range-label{margin-left:auto;flex-shrink:0;font-size:10px;font-weight:600;text-align:right}
.asset-range-label.sdr{color:#9ba5ad}
.asset-range-label.hdr{color:#f4c34e}

.media-config-buttons{display:flex;gap:8px;align-items:center}

/* Fixed-width two-row server utilization beside PGM delay. */
.system-usage{display:grid;grid-template-columns:repeat(2,max-content);column-gap:10px;row-gap:7px;align-self:flex-end;flex-shrink:0;color:var(--muted);font-size:10px;line-height:1.3}
.system-usage>span{white-space:nowrap}
.system-usage strong{color:#fff;font-weight:700}
.system-usage b{display:inline-block;width:4ch;text-align:left;font:inherit;font-variant-numeric:tabular-nums}
.system-usage b[data-network]{width:auto;min-width:7ch}
@container (max-width:420px){.system-usage{font-size:9px;column-gap:6px}}

.system-usage .usage-output-format{grid-column:1/-1}

/* Recording format remains visible in the media pool at every screen width. */
.pool-bottom .codec-info{display:flex;min-width:0}
.pool-bottom #codec-info{min-width:0;white-space:normal}
.pool-bottom .codec-info>.icon{flex-shrink:0}

/* Read-only hardware temperatures in the left footer. */
.footer-status.hardware-temperatures{gap:16px;font-size:11px;color:var(--muted);flex-wrap:wrap}
.hardware-temperatures>span{white-space:nowrap}
.hardware-temperatures strong{color:var(--text);font-weight:600}
.hardware-temperatures b{font-weight:400;font-variant-numeric:tabular-nums;display:inline-block;min-width:4ch}
@media(max-width:1100px){.footer-status.hardware-temperatures{gap:9px;font-size:10px}}

.hardware-temperatures>span{display:inline-flex;align-items:center;gap:4px}
.hardware-temperatures [data-icon]{display:inline-flex;flex-shrink:0}
.hardware-temperatures .icon{width:15px;height:15px}

/* Put each monitor timecode directly above its primary transport button. */
.monitor .transport{display:grid;grid-template-columns:max-content minmax(0,1fr);grid-template-rows:max-content max-content;grid-template-areas:"tc side" "play side";align-content:center;align-items:center;column-gap:11px;row-gap:6px}
.monitor .transport>.transport-main{grid-area:tc;align-items:center;justify-self:center}
.monitor .transport>.transport-square{grid-area:play;justify-self:start;align-self:start}
.monitor .transport>.input-storage,.monitor .transport>.pgm-output-info{grid-area:side;justify-self:end;align-self:center}
.monitor .preview-transport{grid-template-columns:max-content minmax(0,1fr) auto;grid-template-areas:"tc tools mode" "play tools mode";column-gap:8px}
.input-monitor .input-storage{border-left:0;padding-left:0}

/* Encoding preset follows the bitrate without shifting the existing settings columns. */

.peer-settings-row{display:grid;grid-template-columns:minmax(150px,1fr) auto auto;gap:16px;align-items:end}.peer-settings-row>.check{align-self:end;display:flex;align-items:center;gap:7px;min-height:40px;white-space:nowrap}.peer-settings-row>.check>input{margin:0;flex-shrink:0}.peer-source-row{display:flex;gap:16px;align-items:end;margin-top:16px}.peer-source-row .field{flex:1}.peer-source-row[hidden],.peer-confirmation[hidden]{display:none}.peer-confirmation{border:1px solid var(--amber,#f9c849);background:#f9c84918;padding:12px;margin-top:12px}.peer-confirmation>div{display:flex;gap:8px;justify-content:flex-end}.peer-settings>small{display:block;margin-top:12px;color:#91a9ba}.peer-link-status{font-size:12px;color:#f9c849;white-space:nowrap}.peer-link-status[data-phase="ready"]{color:#00d6a2}

.peer-settings{margin-top:24px;padding-top:20px;border-top:1px solid #304a5e}.peer-settings [data-peer="status"][data-phase="ready"]{color:#00d6a2}



#record-state{font-family:inherit;cursor:pointer}#record-state:disabled{cursor:default;opacity:.55}

/* The connector leaders share the image's coordinate system at every size. */
#modal[data-kind="interfaces"]{width:min(1000px,calc(100vw - 32px))}
#modal[data-kind="interfaces"] .modal-content{padding:12px 20px}
#modal[data-kind="interfaces"] .modal-header{padding:16px 24px}
.interface-scroll{overflow-x:auto}
.interface-diagram{position:relative;width:100%;min-width:660px;aspect-ratio:3/2}
.interface-image{position:absolute;left:0;top:0;width:54.5945%;height:100%;object-fit:contain;border-radius:5px}
.interface-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.interface-links path{fill:none;stroke:#99b6c9;stroke-width:2;stroke-dasharray:7 6;vector-effect:non-scaling-stroke}
.interface-links circle{fill:var(--input-color);stroke:#10283e;stroke-width:2}
.interface-policy{position:absolute;left:56%;top:2%;right:0;font-size:12px}
.interface-policy h3{font-size:15px;margin:0 0 8px}.interface-policy p{margin:0 0 10px;color:var(--muted)}
.interface-policy fieldset{padding:0;margin:0;border:0;display:grid;gap:12px}
.interface-policy label{display:flex;align-items:flex-start;gap:8px;line-height:1.7;cursor:pointer}
.interface-policy input[type="radio"]{margin:4px 0 0;flex:0 0 auto;accent-color:var(--input-color)}
.interface-policy #interface-delay{width:70px;min-height:30px;height:30px;padding:4px 6px;margin:0 4px;font:inherit}
.interface-delay-rule{align-items:center!important}.interface-delay-rule>input{margin-top:0!important}
.interface-policy .interface-policy-note{margin:14px 0 8px;font-size:11px;line-height:1.6}
#interface-policy-status{font-size:11px;color:var(--input-color);line-height:1.5}
.interface-port{position:absolute;left:65.5%;right:0;transform:translateY(-50%);display:flex;flex-direction:column;gap:4px;font-size:13px;line-height:1.25;padding:4px 6px;background:#10283e}
.interface-port strong{font-size:15px;letter-spacing:.04em}.interface-port>span{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.interface-port.input-port strong{color:var(--input-color)}.interface-port.output-port strong{color:var(--pgm-color)}
.interface-port.selected-input strong:after{content:' · 当前 REC 输入';font-size:10px;font-weight:400;letter-spacing:0}
@media(max-height:800px){#modal[data-kind="interfaces"]{width:min(870px,calc(100vw - 32px))}.interface-policy fieldset{gap:8px}.interface-policy h3{font-size:14px}}

/* Interface V2: input protection and output controls share the right column. */
.interface-diagram{min-width:840px}
.interface-controls{position:absolute;left:56%;top:2%;right:0}
.interface-controls .interface-policy{position:static}
.interface-controls .interface-policy fieldset{gap:8px}
.interface-controls #output-settings{margin-top:14px;padding-top:12px}
.interface-controls #output-settings .settings-section-heading{display:block;margin-bottom:10px}
.interface-controls #output-settings h3{font-size:14px}
.interface-controls #output-settings .config-status{font-size:11px;line-height:1.5;margin-top:5px}
.interface-controls #output-settings .delay-settings-row{grid-template-columns:1fr 1fr auto;gap:8px}
.interface-controls #output-settings .field{font-size:11px;gap:5px}
.interface-controls #output-settings select{height:32px;min-height:32px;padding:4px 6px;font-size:12px}
.interface-controls #output-settings button{height:32px;min-height:32px;padding:4px 9px;font-size:11px;white-space:nowrap;grid-column:auto}
.interface-controls #output-settings>small{font-size:10px;line-height:1.5;display:block;margin-top:8px;color:var(--muted)}
@media(max-height:800px){#modal[data-kind="interfaces"]{width:min(1000px,calc(100vw - 32px))}}

.interface-port.output-port strong:after{content:' · 当前 PGM 输出';font-size:10px;font-weight:400;letter-spacing:0}

.interface-policy-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.interface-policy-actions label{align-items:center;font-size:12px}
.interface-policy-actions input[type="checkbox"]{margin:0;accent-color:var(--input-color)}
.interface-policy-actions button{height:32px;min-height:32px;padding:4px 9px;font-size:11px;white-space:nowrap;margin-left:auto}

#interface-sync-status{font-size:11px;line-height:1.5;color:var(--input-color);margin-top:5px}

#modal[data-kind="interfaces"]{width:min(1080px,calc(100vw - 32px))}
.interface-diagram{min-width:1000px}

#modal[data-kind="config"] .modal-content>.peer-settings:first-child{margin-top:0;padding-top:0;border-top:0;border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:22px}


/* Allow interface labels and leaders to follow the settings content height. */
.interface-controls{top:14px}
.interface-diagram{aspect-ratio:auto;min-height:666px}

/* Align connector captions with the settings column above. */
.interface-port{left:56%;padding-left:0}

/* Keep system disk warnings in the header, beneath current operation/connection messages. */
.header-notice:has(:is(#toast,#drop-message,#backend-status):not([hidden])) #system-disk-warning{display:none}

/* Cleanup threshold follows the storage capacity meter. */
#modal[data-kind="config"] #storage-threshold{appearance:none;-webkit-appearance:none;cursor:pointer;--threshold-fill:66.6667%}
#modal[data-kind="config"] #storage-threshold::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(to right,var(--cyan) 0 var(--threshold-fill),#061a2d var(--threshold-fill) 100%)}
#modal[data-kind="config"] #storage-threshold::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:14px;margin-top:-4px;border:2px solid var(--cyan);border-radius:50%;background:var(--cyan);box-shadow:0 0 0 3px #061a2d}
#modal[data-kind="config"] #storage-threshold::-moz-range-track{height:6px;border:0;border-radius:3px;background:#061a2d}
#modal[data-kind="config"] #storage-threshold::-moz-range-progress{height:6px;border-radius:3px;background:var(--cyan)}
#modal[data-kind="config"] #storage-threshold::-moz-range-thumb{width:10px;height:10px;border:2px solid var(--cyan);border-radius:50%;background:var(--cyan);box-shadow:0 0 0 3px #061a2d}
#modal[data-kind="config"] #storage-threshold:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}

/* Use the same track and fill as the storage capacity meter. */
.peer-settings progress[data-peer="progress-bar"]{appearance:none;-webkit-appearance:none;display:block;border:0;border-radius:3px;overflow:hidden;background:#061a2d;color:var(--cyan)}
.peer-settings progress[data-peer="progress-bar"]::-webkit-progress-bar{background:#061a2d;border-radius:3px}
.peer-settings progress[data-peer="progress-bar"]::-webkit-progress-value{background:var(--cyan);border-radius:3px;transition:width .3s}
.peer-settings progress[data-peer="progress-bar"]::-moz-progress-bar{background:var(--cyan);border-radius:3px}

.peer-source-row{flex-wrap:wrap}.peer-source-row .field{min-width:160px}


/* The dialog itself receives initial focus; controls keep their focus indicators. */
#modal[data-kind="config"]:focus,#modal[data-kind="password"]:focus,#modal[data-kind="power"]:focus{outline:none}

/* HYRAY.HUB glass material for dialogs and all popup menus. */
:root{--glass-surface:linear-gradient(135deg,#dceeff0d,#152f4826 45%,#b7d8f008);--glass-edge:#e0f2ff52;--glass-shadow:0 12px 36px #0003,inset 0 1px 0 #ffffff40,inset 0 -1px 0 #ffffff14;--glass-menu:linear-gradient(135deg,#ffffff08,#ffffff00)}
body dialog{background:var(--glass-surface);border-color:var(--glass-edge);border-radius:22px;box-shadow:0 24px 80px #0007,inset 0 1px 0 #ffffff66,inset 0 -1px 0 #ffffff14;-webkit-backdrop-filter:blur(8px) saturate(125%);backdrop-filter:blur(8px) saturate(125%)}
body .glass-select-menu{position:fixed;inset:auto;margin:0;width:max-content;overflow:auto;z-index:1000;overscroll-behavior:contain;padding:6px;color:var(--text);animation:hub-menu-enter 150ms ease-out}
body .glass-select-menu button,body header #settingsMenu button{display:block;width:100%;margin:0;padding:8px 12px;border:0;border-radius:6px;background:transparent;box-shadow:none;color:var(--text);font:13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-align:left;white-space:nowrap}
body .glass-select-menu button[aria-selected=true]{background:#6fbce530;color:#e7f7ff}
body .glass-select-menu button:is(:hover,:focus-visible):not(:disabled),body header #settingsMenu button:is(:hover,:focus-visible){background:#a2d6f03d;outline:0}
body .glass-select-menu button:disabled{color:#91a3b17d;cursor:default}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root{--glass-surface:#152d43f5;--glass-menu:#152d43}}
@media(prefers-reduced-transparency:reduce){:root{--glass-surface:#152d43;--glass-menu:#152d43}body *,body *::backdrop{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
body .glass-select-menu button[aria-selected=false],body .glass-select-menu button[aria-selected=false]:is(:hover,:focus-visible){background:transparent;box-shadow:none}
body .glass-select-menu button[aria-selected=false]:hover:not(:disabled){color:#e7f7ff}
body .glass-select-menu button[aria-selected=false]:focus-visible{outline:1px solid #a5e2f1;outline-offset:-2px}
body .system-management-menu{background:var(--glass-menu);border:1px solid var(--glass-edge);border-radius:12px;box-shadow:0 8px 24px #0002,inset 0 1px 0 #ffffff45;-webkit-backdrop-filter:blur(8px) saturate(125%);backdrop-filter:blur(8px) saturate(125%)}
body .glass-select-menu{background:var(--glass-menu);border:1px solid var(--glass-edge);border-radius:12px;box-shadow:0 8px 24px #0002,inset 0 1px 0 #ffffff45;-webkit-backdrop-filter:blur(8px) saturate(125%);backdrop-filter:blur(8px) saturate(125%);animation:none}
body .system-management-menu>button:hover:enabled,body .system-management-menu>button:focus-visible{background:#a2d6f03d}
body dialog::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}

/* Glass scrollbars for dialogs, their scrollable content and option menus. */
:where(dialog,dialog *,.glass-select-menu){scrollbar-width:thin;scrollbar-color:#dceeff70 #dceeff0d}
@supports selector(::-webkit-scrollbar){
 :where(dialog,dialog *,.glass-select-menu){scrollbar-width:auto;scrollbar-color:auto}
 :where(dialog,dialog *,.glass-select-menu)::-webkit-scrollbar{width:10px;height:10px}
 :where(dialog,dialog *,.glass-select-menu)::-webkit-scrollbar-track{background:#dceeff0d;border-radius:10px;margin:14px 0;box-shadow:inset 0 0 0 1px #e0f2ff12}
 :where(dialog,dialog *,.glass-select-menu)::-webkit-scrollbar-thumb{min-height:32px;min-width:32px;border:2px solid transparent;border-radius:10px;background:linear-gradient(135deg,#eff9ff88,#b7d8f04d);background-clip:padding-box;box-shadow:inset 0 0 0 1px #e0f2ff40}
 :where(dialog,dialog *,.glass-select-menu)::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#eff9ffb3,#b7d8f078);background-clip:padding-box}
 :where(dialog,dialog *,.glass-select-menu)::-webkit-scrollbar-thumb:active{background:#dceeffb3;background-clip:padding-box}
 :where(dialog,dialog *,.glass-select-menu)::-webkit-scrollbar-corner{background:transparent}
}

/* Keep the page outside dialogs sharp; glass blur stays on popup surfaces. */
body dialog::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}

/* Glass thumbs for timeline position and zoom. */
.timeline-scroll input::-webkit-slider-thumb,#zoom::-webkit-slider-thumb{border:1px solid #e0f2ff70;background:linear-gradient(135deg,#eff9ff88,#b7d8f04d);box-shadow:0 2px 6px #0003,inset 0 1px 0 #ffffff66,inset 0 -1px 0 #ffffff14}
.timeline-scroll input:hover::-webkit-slider-thumb,#zoom:hover::-webkit-slider-thumb{background:linear-gradient(135deg,#eff9ffb3,#b7d8f078)}
.timeline-scroll input::-moz-range-thumb,#zoom::-moz-range-thumb{border:1px solid #e0f2ff70;background:linear-gradient(135deg,#eff9ff88,#b7d8f04d);box-shadow:0 2px 6px #0003,inset 0 1px 0 #ffffff66,inset 0 -1px 0 #ffffff14}
.timeline-scroll input:hover::-moz-range-thumb,#zoom:hover::-moz-range-thumb{background:linear-gradient(135deg,#eff9ffb3,#b7d8f078)}

/* Modal backdrop keeps the surrounding page at its original brightness. */
body dialog::backdrop{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}

/* Glass form fields: dialog text entry and all dropdown triggers. */
body dialog input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),body dialog textarea,body select{
 background:linear-gradient(135deg,#dceeff14,#152f4826 45%,#b7d8f00d)!important;
 border-color:#e0f2ff52!important;
 box-shadow:inset 0 1px 0 #ffffff26,inset 0 -1px 0 #ffffff0d;
 -webkit-backdrop-filter:blur(8px) saturate(125%);backdrop-filter:blur(8px) saturate(125%);
}
body dialog input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus,body dialog textarea:focus,body select:focus-visible{border-color:#a5e2f1!important}
body dialog input::placeholder,body dialog textarea::placeholder{color:#a6bdcc;opacity:.75}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 body dialog input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),body dialog textarea,body select{background:#152d43f5!important}
}
@media(prefers-reduced-transparency:reduce){
 body dialog input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),body dialog textarea,body select{background:#152d43!important;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* System settings actions share the glass material of their fields. */
#modal[data-kind="config"] :is(.button,.icon-button){
 background:linear-gradient(135deg,#dceeff18,#152f4826 45%,#b7d8f00d)!important;
 border-color:var(--glass-edge);box-shadow:inset 0 1px 0 #ffffff30,inset 0 -1px 0 #ffffff0d;
 -webkit-backdrop-filter:blur(8px) saturate(125%);backdrop-filter:blur(8px) saturate(125%);
}
#modal[data-kind="config"] :is(.button,.icon-button):hover:not(:disabled){background:linear-gradient(135deg,#dceeff30,#b7d8f018)!important;border-color:#e0f2ff80}
#modal[data-kind="config"] :is(.button,.icon-button):active:not(:disabled){background:#b7d8f026!important}
#modal[data-kind="config"] .button.danger{color:#f0b194;border-color:#eaa18b70}
#modal[data-kind="config"] .button.danger:hover:not(:disabled){background:linear-gradient(135deg,#f0b19426,#b96d5814)!important;border-color:#f0b194a6}
#modal[data-kind="config"] .button.primary{border-color:#8bd9f080;color:#c8efff}
@media(prefers-reduced-transparency:reduce){#modal[data-kind="config"] :is(.button,.icon-button){background:#152d43!important;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* Connector labels share the interface dialog glass without opaque patches. */
#modal[data-kind="interfaces"] .interface-port{background:transparent}

/* Keep system settings actions visible while only its content scrolls. */
#modal[data-kind="config"]{overflow:hidden}
#modal[data-kind="config"]>#modal-body{display:flex;flex-direction:column;max-height:calc(90vh - 2px);min-height:0;overflow:hidden}
#modal[data-kind="config"]>#modal-body>.modal-content{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
#modal[data-kind="config"]>#modal-body>.modal-actions{flex:0 0 auto;position:relative;z-index:1;background:var(--glass-surface);border-top-color:var(--glass-edge)}

/* System settings header matches interface management and stays visible. */
#modal[data-kind="config"]>#modal-body>.modal-header{flex:0 0 auto;padding:16px 24px;background:var(--glass-surface);border-bottom-color:var(--glass-edge)}

/* Translucent glass separators inside every dialog. */
body dialog{--line:#e0f2ff26;--line-soft:#e0f2ff14;--glass-divider:#e0f2ff26}
body dialog :is(.modal-header,.modal-actions,.clock-settings,.storage-settings,.delay-settings,.peer-settings,.log-entry){border-top-color:var(--glass-divider)!important;border-bottom-color:var(--glass-divider)!important}
body dialog hr{height:1px;border:0;background:linear-gradient(90deg,#e0f2ff0d,#e0f2ff40 50%,#e0f2ff0d)}

/* Glass capacity meter and cleanup threshold, retaining their live fill values. */
#modal[data-kind="config"] .storage-usage{background:#dceeff12;box-shadow:inset 0 0 0 1px #e0f2ff26}
#modal[data-kind="config"] .storage-usage i{background:linear-gradient(180deg,#eff9ff88,#b7d8f04d);border-radius:3px;box-shadow:inset 0 1px 0 #ffffff66,inset 0 -1px 0 #ffffff26}
#modal[data-kind="config"] #storage-threshold::-webkit-slider-runnable-track{background:linear-gradient(180deg,#ffffff1a,#ffffff00),linear-gradient(to right,#b7d8f066 0 var(--threshold-fill),#dceeff12 var(--threshold-fill) 100%);box-shadow:inset 0 0 0 1px #e0f2ff26}
#modal[data-kind="config"] #storage-threshold::-moz-range-track{background:#dceeff12;box-shadow:inset 0 0 0 1px #e0f2ff26}
#modal[data-kind="config"] #storage-threshold::-moz-range-progress{background:linear-gradient(180deg,#eff9ff88,#b7d8f04d);box-shadow:inset 0 1px 0 #ffffff66}
#modal[data-kind="config"] #storage-threshold::-webkit-slider-thumb{border-color:#e0f2ff99;background:linear-gradient(135deg,#eff9ffb3,#b7d8f066);box-shadow:0 2px 6px #0003,inset 0 1px 0 #ffffff66}
#modal[data-kind="config"] #storage-threshold::-moz-range-thumb{border-color:#e0f2ff99;background:linear-gradient(135deg,#eff9ffb3,#b7d8f066);box-shadow:0 2px 6px #0003,inset 0 1px 0 #ffffff66}
#modal[data-kind="config"] #storage-threshold:hover::-webkit-slider-thumb{background:linear-gradient(135deg,#eff9ffd9,#b7d8f08c)}
#modal[data-kind="config"] #storage-threshold:hover::-moz-range-thumb{background:linear-gradient(135deg,#eff9ffd9,#b7d8f08c)}

/* Cleanup threshold uses the same pill thumb as the timeline sliders. */
#modal[data-kind="config"] #storage-threshold::-webkit-slider-thumb{box-sizing:border-box;width:24px;height:14px;border:1px solid #e0f2ff70;border-radius:7px;background:linear-gradient(135deg,#eff9ff88,#b7d8f04d);box-shadow:0 2px 6px #0003,inset 0 1px 0 #ffffff66,inset 0 -1px 0 #ffffff14}
#modal[data-kind="config"] #storage-threshold:hover::-webkit-slider-thumb{background:linear-gradient(135deg,#eff9ffb3,#b7d8f078)}
#modal[data-kind="config"] #storage-threshold::-moz-range-thumb{box-sizing:border-box;width:24px;height:14px;border:1px solid #e0f2ff70;border-radius:7px;background:linear-gradient(135deg,#eff9ff88,#b7d8f04d);box-shadow:0 2px 6px #0003,inset 0 1px 0 #ffffff66,inset 0 -1px 0 #ffffff14}
#modal[data-kind="config"] #storage-threshold:hover::-moz-range-thumb{background:linear-gradient(135deg,#eff9ffb3,#b7d8f078)}

/* Enlarge all three glass slider thumbs by 20 percent. */
.timeline-scroll input::-webkit-slider-thumb,#zoom::-webkit-slider-thumb,#modal[data-kind="config"] #storage-threshold::-webkit-slider-thumb{box-sizing:border-box;width:28.8px;height:16.8px;border-radius:8.4px;margin-top:-5.4px}
.timeline-scroll input::-moz-range-thumb,#zoom::-moz-range-thumb,#modal[data-kind="config"] #storage-threshold::-moz-range-thumb{box-sizing:border-box;width:28.8px;height:16.8px;border-radius:8.4px}

/* Native checkbox behavior with a translucent glass surface in dialogs. */
body dialog input[type="checkbox"]{appearance:none;-webkit-appearance:none;display:inline-grid;place-content:center;box-sizing:border-box;flex:0 0 auto;width:16px;height:16px;min-width:16px;padding:0;vertical-align:middle;border:1px solid #e0f2ff70;border-radius:4px;background:linear-gradient(135deg,#dceeff18,#152f4826 45%,#b7d8f00d);box-shadow:inset 0 1px 0 #ffffff40,inset 0 -1px 0 #ffffff14;cursor:pointer;-webkit-backdrop-filter:blur(8px) saturate(125%);backdrop-filter:blur(8px) saturate(125%)}
body dialog input[type="checkbox"]::after{content:"";box-sizing:border-box;width:8px;height:5px;border-left:2px solid #effaff;border-bottom:2px solid #effaff;transform:translateY(-1px) rotate(-45deg);visibility:hidden}
body dialog input[type="checkbox"]:checked,body dialog input[type="checkbox"]:indeterminate{background:linear-gradient(135deg,#dceeff55,#b7d8f02e);border-color:#e0f2ffb3}
body dialog input[type="checkbox"]:checked::after{visibility:visible}
body dialog input[type="checkbox"]:indeterminate::after{visibility:visible;width:8px;height:2px;background:#effaff;border:0;transform:none}
body dialog input[type="checkbox"]:hover:not(:disabled){border-color:#effaff;background:linear-gradient(135deg,#dceeff55,#b7d8f026)}
body dialog input[type="checkbox"]:focus-visible{outline:2px solid #a5e2f1;outline-offset:3px}
body dialog input[type="checkbox"]:disabled{opacity:.4;cursor:default}
@media(prefers-reduced-transparency:reduce){body dialog input[type="checkbox"]{background:#152d43;-webkit-backdrop-filter:none;backdrop-filter:none}body dialog input[type="checkbox"]:checked,body dialog input[type="checkbox"]:indeterminate{background:#466278}}
@media(forced-colors:active){body dialog input[type="checkbox"]{appearance:auto;-webkit-appearance:checkbox;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}body dialog input[type="checkbox"]::after{display:none}}

/* Glass radio controls for automatic input switching. */
#modal[data-kind="interfaces"] .interface-policy input[type="radio"]{appearance:none;-webkit-appearance:none;display:inline-grid;place-content:center;box-sizing:border-box;flex:0 0 auto;width:16px;height:16px;min-width:16px;padding:0;border:1px solid #e0f2ff70;border-radius:50%;background:linear-gradient(135deg,#dceeff18,#152f4826 45%,#b7d8f00d);box-shadow:inset 0 1px 0 #ffffff40,inset 0 -1px 0 #ffffff14;cursor:pointer;-webkit-backdrop-filter:blur(8px) saturate(125%);backdrop-filter:blur(8px) saturate(125%)}
#modal[data-kind="interfaces"] .interface-policy input[type="radio"]::after{content:"";width:6px;height:6px;border-radius:50%;background:#effaff;visibility:hidden}
#modal[data-kind="interfaces"] .interface-policy input[type="radio"]:checked{background:linear-gradient(135deg,#dceeff55,#b7d8f02e);border-color:#e0f2ffb3}
#modal[data-kind="interfaces"] .interface-policy input[type="radio"]:checked::after{visibility:visible}
#modal[data-kind="interfaces"] .interface-policy input[type="radio"]:hover:not(:disabled){border-color:#effaff;background:linear-gradient(135deg,#dceeff55,#b7d8f026)}
#modal[data-kind="interfaces"] .interface-policy input[type="radio"]:focus-visible{outline:2px solid #a5e2f1;outline-offset:3px}
#modal[data-kind="interfaces"] .interface-policy input[type="radio"]:disabled{opacity:.4;cursor:default}
@media(prefers-reduced-transparency:reduce){#modal[data-kind="interfaces"] .interface-policy input[type="radio"]{background:#152d43;-webkit-backdrop-filter:none;backdrop-filter:none}#modal[data-kind="interfaces"] .interface-policy input[type="radio"]:checked{background:#466278}}
@media(forced-colors:active){#modal[data-kind="interfaces"] .interface-policy input[type="radio"]{appearance:auto;-webkit-appearance:radio;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}#modal[data-kind="interfaces"] .interface-policy input[type="radio"]::after{display:none}}

/* Translucent chassis illustration in interface management. */
#modal[data-kind="interfaces"] .interface-image{opacity:.65}

/* Cloud receive and PGM addresses use the existing dialog controls. */
#modal[data-kind="interfaces"]{width:min(760px,calc(100vw - 32px))}
#modal[data-kind="interfaces"] .modal-content{padding:20px 24px}
.stream-addresses{display:grid;gap:20px;min-width:0}
.stream-address-section{display:grid;gap:10px;min-width:0}
.stream-address-section+.stream-address-section{border-top:1px solid #304a5e;padding-top:20px}
.stream-address-section input{width:100%;min-width:0;font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.stream-address-section>small,.stream-address-note{font-size:12px;line-height:1.6;color:var(--muted)}
.stream-address-note{margin:0}
.stream-address-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
#stream-address-status{font-size:12px;color:var(--input-color);line-height:1.5}
#stream-address-status:empty,#stream-address-error:empty{display:none}
@media(max-width:600px){#modal[data-kind="interfaces"] .modal-content{padding:16px}.stream-address-actions .button{flex:1;white-space:nowrap}}