:root{
  --vrch-safe-vh:1vh;
  --bg:#202020;
  --panel:#1a1a1a;
  --surface-0:#141414;
  --surface-1:#1a1a1a;
  --surface-2:#1f1f1f;
  --surface-3:#252525;
  --border:#2a2a2a;
  --border2:#3a3a3a;
  --text:#e9ecf2;
  --muted:#a7adb7;

  --mint:#37f6c2;
  --mint-soft-bg:rgba(55, 246, 194, 0.12);
  --blue:#7aa2ff;
  --danger:#ff4d6d;
  --warn:#ffd166;
  --status-idle:#7c828c;
  --status-idle-border:#5b5f68;
  --status-online:#78c9b0;
  --status-online-border:#5f9a8d;
  --status-connecting:#d1b073;
  --status-connecting-border:#8f7446;
  --status-error:#df8fa0;
  --status-error-border:#975968;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, Arial;

  --r:4px;
  --r2:2px;
  --gap: 12px;
  --cardH: 360px;
  --sz-tag:24px;
  --sz-btn-sm:28px;
  --sz-field:36px;
  --sz-header:44px;
  --sz-action:52px;
}

*{ box-sizing:border-box; }
.hidden{ display:none !important; }
html,body{ height:100%; }
body{ margin:0; font-family:var(--sans); color:var(--text); background: var(--bg); }
body.viewer-page{
  height:100vh;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow:hidden;
}
body.live-console-page{
  min-height:calc(var(--vrch-safe-vh, 1vh) * 100);
  overflow:hidden;
}
body.live-console-page.no-select,
body.live-console-page.no-select *{
  user-select:none;
  -webkit-user-select:none;
}
body.live-console-page.no-select input,
body.live-console-page.no-select textarea,
body.live-console-page.no-select select,
body.live-console-page.no-select button,
body.live-console-page.no-select [contenteditable="true"]{
  user-select:text;
  -webkit-user-select:text;
}

body,
.ui-tabs,
textarea,
pre,
#codeEdit,
.logWindow,
dialog,
.ui-dialog__body{
  scrollbar-width: thin;
  scrollbar-color: #4a4a4a #141414;
}

body::-webkit-scrollbar,
.ui-tabs::-webkit-scrollbar,
textarea::-webkit-scrollbar,
pre::-webkit-scrollbar,
#codeEdit::-webkit-scrollbar,
.logWindow::-webkit-scrollbar,
dialog::-webkit-scrollbar,
.ui-dialog__body::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}

body::-webkit-scrollbar-track,
.ui-tabs::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track,
pre::-webkit-scrollbar-track,
#codeEdit::-webkit-scrollbar-track,
.logWindow::-webkit-scrollbar-track,
dialog::-webkit-scrollbar-track,
.ui-dialog__body::-webkit-scrollbar-track{
  background: #141414;
}

body::-webkit-scrollbar-thumb,
.ui-tabs::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb,
pre::-webkit-scrollbar-thumb,
#codeEdit::-webkit-scrollbar-thumb,
.logWindow::-webkit-scrollbar-thumb,
dialog::-webkit-scrollbar-thumb,
.ui-dialog__body::-webkit-scrollbar-thumb{
  background: #3a3a3a;
  border: 2px solid #141414;
  border-radius: 999px;
}

body::-webkit-scrollbar-thumb:hover,
.ui-tabs::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover,
pre::-webkit-scrollbar-thumb:hover,
#codeEdit::-webkit-scrollbar-thumb:hover,
.logWindow::-webkit-scrollbar-thumb:hover,
dialog::-webkit-scrollbar-thumb:hover,
.ui-dialog__body::-webkit-scrollbar-thumb:hover{
  background: #4a4a4a;
}

body::-webkit-scrollbar-corner,
.ui-tabs::-webkit-scrollbar-corner,
textarea::-webkit-scrollbar-corner,
pre::-webkit-scrollbar-corner,
#codeEdit::-webkit-scrollbar-corner,
.logWindow::-webkit-scrollbar-corner,
dialog::-webkit-scrollbar-corner,
.ui-dialog__body::-webkit-scrollbar-corner{
  background: #141414;
}

.ui-layout{
  max-width:800px;
  margin:0 auto;
  padding: var(--gap);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: var(--gap);
}

.ui-topbar{
  padding: 12px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r) var(--r) 0 0;
  background: var(--surface-1);
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap: 10px;
}

.barIdentity{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  flex:1 1 100%;
}
.title{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ui-sender-header__row,
.shader-page-head-row{
  display:flex;
  align-items:center;
  gap:10px;
  row-gap:6px;
  flex-wrap:wrap;
  min-width:0;
}
.titleStatusIndicator{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:var(--sz-tag);
  min-width:10px;
  flex:0 0 auto;
  margin-right:-4px;
}
.title h1{ margin:0; font-size:15px; font-weight:900; font-family: var(--mono); text-transform: uppercase; }
.ui-sender-header__version{
  display:inline-flex;
  align-items:flex-end;
  align-self:flex-end;
  justify-content:center;
  position:relative;
  top:0;
  padding:0;
  margin-bottom:5px;
  color: var(--muted);
  font-size:10px;
  font-family: var(--mono);
  letter-spacing:.18px;
  line-height:1;
  text-transform:none;
  opacity:.88;
}
.subtitle{
  margin:0;
  font-size:12px;
  color:var(--muted);
  font-family:var(--sans);
  letter-spacing:.1px;
  text-transform:none;
  line-height:1.45;
}

.ui-tag{
  height:var(--sz-tag);
  gap:5px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  background: transparent;
  color: var(--text);
  border-radius:0;
  box-shadow:none;
  text-transform:none;
  letter-spacing:.15px;
  white-space:nowrap;
  font-family: var(--mono);
  font-size:11px;
  line-height:1;
  appearance:none;
  -webkit-appearance:none;
}
button.ui-tag{
  cursor:pointer;
  transform: translateY(0);
  opacity: 1;
  transition: transform .04s ease, color .05s ease, opacity .05s ease;
}
button.ui-tag:hover,
button.ui-tag:active,
button.ui-tag:focus-visible{
  border:0;
  background: transparent;
  color: var(--text);
  box-shadow:none;
  outline:none;
}
button.ui-tag:hover{ opacity:.92; }
button.ui-tag:active{
  transform: translateY(1px);
  opacity:.74;
}
.titleStatusTag{
  height:var(--sz-tag);
  gap:4px;
}
.titleTimingTag{
  gap:5px;
  font-variant-numeric: tabular-nums;
}
.timingIcon{
  font-size:10px;
  opacity:.76;
}
.lampSlot{
  width: 6px;
  height: 16px;
  border: 1px solid #5b5f68;
  background: #111111;
  padding: 1px;
  display:inline-flex;
  align-items:flex-end;
  justify-content:center;
  border-radius: 1px;
}
.lamp{
  width: 100%;
  height: 100%;
  border-radius: 0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap: 1px;
}
.lamp .seg{
  flex:1;
  min-height:0;
  border: 1px solid #4f535b;
  background: #343840;
}
.lamp.idle .seg{
  background: #7b8088;
  border-color: #636870;
}
.lamp.ok .seg{
  background: var(--mint);
  border-color: #62a090;
}
.lamp.err .seg{
  background: var(--danger);
  border-color: #9f5e6d;
}
.lamp.busy .seg{
  background: #38524a;
  border-color: #486e63;
}
.lamp.busy .seg.on{
  background: var(--mint);
  border-color: #62a090;
}
@keyframes lampIdlePulse{
  0%,100%{ opacity: .52; }
  50%{ opacity: .86; }
}
.lamp.idle{ animation: lampIdlePulse 2.2s ease-in-out infinite; }

.ui-pill{
  font-family:var(--mono);
  font-size:11px;
  height: var(--sz-btn-sm);
  display:inline-flex;
  align-items:center;
  padding:0 10px;
  border-radius:var(--r2);
  border:1px solid var(--border);
  background: var(--surface-2);
  color:var(--muted);
  white-space:nowrap;
  letter-spacing:.2px;
  text-transform: uppercase;
}
.ui-pill--ok{
  background:#243730;
  border-color:#5f9a8d;
  color:#d8fcef;
}
.ui-pill--warn{
  background:#3c3220;
  border-color:#8f7446;
  color:#fff0c7;
}
.ui-pill--danger{
  background:#352027;
  border-color:#975968;
  color:#ffe5ea;
}
.ui-pill--xs{
  height:18px;
  padding:0 7px;
  font-size:10px;
  letter-spacing:.15px;
}

.ui-btn--sm{
  font-size:11px;
  height: var(--sz-btn-sm);
  padding: 0 10px;
  border-radius:var(--r2);
  border:1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  cursor:pointer;
  font-family: var(--mono);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height: 1;
  user-select:none;
  letter-spacing:.2px;
  text-transform: uppercase;
  position: relative;
  transform: translateY(0);
  transition: transform .04s ease, background .05s ease, border-color .05s ease, color .05s ease;
}
.ui-btn--sm:hover{ border-color: #4d5159; color: var(--text); background: #2c2c2c; }
.ui-btn--sm:active{ transform: translateY(1px); }
.ui-btn--sm.is-selected,
.ui-dock-item.is-selected{
  background:#222222;
  border-color:#5a5a5a;
  color:#f2f2f2;
}
.ui-btn--sm.is-active,
.ui-dock-item.is-active{
  background:#2a2a2a;
  border-color:#7a7a7a;
  color:#ffffff;
}
.ui-dock-item.is-selected .ui-dock-item__badge{
  border-color:#5a5a5a;
}
.ui-dock-item.is-active .ui-dock-item__badge{
  border-color:#7a7a7a;
}
.ui-btn--icon{
  width: var(--sz-btn-sm);
  min-width: var(--sz-btn-sm);
  padding: 0;
}
.ui-btn--icon i{
  pointer-events:none;
  font-size: 12px;
}
.ui-btn--sm.copy-ok{
  border-color: #3e7f6c;
  background: #1d332d;
  color: var(--text);
}
.ui-btn--sm.copy-fail{
  border-color: #7d4b56;
  background: #342026;
  color: #ffeef2;
}
.ui-btn--sm.copy-ok::after,
.ui-btn--sm.copy-fail::after{
  position:absolute;
  right:2px;
  top:1px;
  font-size:11px;
  font-weight:700;
  line-height:1;
  pointer-events:none;
}
.ui-btn--sm.copy-ok::after{
  content:'✓';
  color: var(--mint);
}
.ui-btn--sm.copy-fail::after{
  content:'✕';
  color: var(--danger);
}

.ui-tag .ws-route-text,
.ui-tag .ui-tag__text{
  display:inline-flex;
  align-items:center;
  min-width:0;
  font-size:11px;
  letter-spacing:.18px;
  text-transform: uppercase;
}
.ui-tag i{
  font-size:11px;
  line-height:1;
}
.ui-tag__bracket{
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.ws-status-overlay{
  position:fixed;
  top:8px;
  left:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:96px;
  min-height:24px;
  padding:4px 10px;
  border:1px solid var(--border2);
  border-radius:var(--r2);
  background:#171717;
  width:auto;
  height:auto;
  flex:0 0 auto;
  opacity:1;
  transition: opacity .2s ease;
  pointer-events:none;
  z-index:18;
}
.ws-status-overlay.hidden{ opacity:0; }
.ws-status-content{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.ws-status-icon{
  font-size:0;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  width:12px;
  height:12px;
}
.ws-status-icon::before{
  content:'';
  width:10px;
  height:10px;
  border-radius:50%;
  background-color: currentColor;
  display:block;
  transition: background-color .3s ease, transform .3s ease;
}
.ws-status-overlay.disconnected .ws-status-icon{ color:var(--status-error); }
.ws-status-overlay.connecting .ws-status-icon{ color:var(--status-connecting); }
.ws-status-overlay.waiting .ws-status-icon,
.ws-status-overlay.connected .ws-status-icon{ color:var(--status-online); }
.ws-status-overlay.error .ws-status-icon{ color:var(--status-error); }
.ws-status-overlay.connecting .ws-status-icon::before{ animation: connecting-pulse 1.5s infinite; }
.ws-status-overlay.waiting .ws-status-icon::before{ animation: waiting-pulse 2s infinite; }
.ws-status-overlay.connected .ws-status-icon::before{ animation: connected-pulse 5s infinite; }
.ws-status-overlay.error .ws-status-icon::before{ animation: error-shake .6s ease-in-out; }
.ws-status-overlay.ws-inline{
  position:static;
  display:inline-flex;
  width:auto;
  height:auto;
  min-width:0;
  min-height:0;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  z-index:auto;
}
.ws-status-overlay.ws-inline,
.ws-status-overlay.ws-inline:hover,
.ws-status-overlay.ws-inline:active,
.ws-status-overlay.ws-inline:focus-visible{
  border:none;
  background:transparent;
  box-shadow:none;
}
.ws-status-overlay.ws-inline .ws-status-content{
  gap:0;
  padding:0;
  background:transparent;
  box-shadow:none;
}
.ws-status-overlay.ws-inline .ws-status-icon{
  width:12px;
  height:12px;
}
.ws-channel-badge{
  color:var(--text);
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.12px;
  line-height:1;
  white-space:nowrap;
}
.ws-channel-badge.hidden{
  display:none;
}

@keyframes connecting-pulse{
  0%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.1); opacity: .7; }
  100%{ transform: scale(1); opacity: 1; }
}
@keyframes waiting-pulse{
  0%{ transform: scale(1); opacity: .8; }
  50%{ transform: scale(1.05); opacity: 1; }
  100%{ transform: scale(1); opacity: .8; }
}
@keyframes connected-pulse{
  0%,100%{ transform: scale(1); opacity: .9; }
  50%{ transform: scale(1.03); opacity: 1; }
}
@keyframes error-shake{
  0%,100%{ transform: translateX(0); }
  10%,30%,50%,70%,90%{ transform: translateX(-2px); }
  20%,40%,60%,80%{ transform: translateX(2px); }
}
@keyframes sent-pop{
  0%{ transform:scale(.4); opacity:0; }
  40%{ transform:scale(1.15); opacity:1; }
  70%{ transform:scale(.95); }
  100%{ transform:scale(1); opacity:1; }
}
@keyframes sent-pop-inline{
  0%{ transform:translateY(-50%) scale(.4); opacity:0; }
  40%{ transform:translateY(-50%) scale(1.15); opacity:1; }
  70%{ transform:translateY(-50%) scale(.95); }
  100%{ transform:translateY(-50%) scale(1); opacity:1; }
}

button:focus,
button:focus-visible,
summary:focus,
summary:focus-visible,
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible{
  outline: none;
}

.ui-btn--sm:focus-visible,
.ui-dialog__close:focus-visible{
  border-color: var(--border2);
  box-shadow: none;
}

.ui-tab:focus-visible{
  border-color: var(--border2);
  background: var(--surface-3);
  box-shadow: none;
}

.ui-action:focus-visible{
  box-shadow: inset 0 0 0 1px #7a808a;
}

#authInput:focus-visible,
#req:focus-visible,
#codeEdit:focus-visible{
  box-shadow: inset 0 0 0 1px #7a808a;
}

.shader-editor__grid{
  margin-top: 0;
  display:grid;
  grid-template-columns: 380px 1fr;
  gap: var(--gap);
  align-items: stretch;
}
.shader-editor__topbar{
  align-self:flex-start;
  width:auto;
  max-width:100%;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  gap:0;
}
.shader-editor__topbar .barIdentity{
  flex:0 1 auto;
}
.shader-editor__topbar .title{
  gap:0;
}
.shader-editor__topbar .shader-page-head-row{
  gap:8px;
  row-gap:8px;
}
.shader-editor__topbar .titleStatusIndicator{
  margin-right:0;
}
.shader-editor__topbar .ui-sender-header__version{
  align-self:center;
  margin-bottom:0;
}
@media (max-width: 768px){
  .shader-editor__grid{ grid-template-columns: 1fr; }
  .barIdentity{ min-width:0; }
  .shader-page-head-row .shader-header-title,
  .shader-page-head-row .shader-header-version{
    display:none;
  }
  .shader-page-head-row{
    justify-content:flex-start;
  }
  .settingsActions{
    justify-content:flex-end;
    flex-wrap:wrap;
  }
  .ui-tabs{ gap:6px; }
  .ui-tab{ min-width: 0; font-size:11px; padding: 0 8px; }
}

.ui-panel{
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: var(--r) var(--r) 0 0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height: var(--cardH);
  min-height: var(--cardH);
}

.ui-popover{
  display:none;
  position:absolute;
  padding:12px;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:var(--surface-0);
  color:var(--text);
  z-index:20;
  pointer-events:auto;
  box-sizing:border-box;
}
.ui-popover.is-open{ display:block; }
.ui-popover__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.ui-popover__title-wrap{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.ui-popover__title{
  font-family:var(--mono);
  font-size:12px;
  font-weight:900;
  letter-spacing:.16px;
  text-transform:uppercase;
  color:var(--text);
}
.ui-popover__subtitle{
  font-family:var(--sans);
  font-size:11px;
  line-height:1.4;
  color:var(--muted);
}
.ui-popover__actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:6px;
}
.ui-popover__body{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:0;
}

.ui-section-shell{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:var(--surface-0);
}
.ui-section-shell--plain{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}
.ui-section-shell--tight{
  gap:8px;
}
.ui-section-shell__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.ui-section-shell__copy{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.ui-section-shell__subhint{
  margin:0;
  font-size:11px;
  line-height:1.4;
  color:#8fd2c1;
}

.ui-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.ui-list--scroll{
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
}
.ui-list--scroll::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}
.ui-list-section{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.ui-list-section__title{
  font-family:var(--mono);
  font-size:11px;
  font-weight:900;
  color:var(--muted);
  letter-spacing:.16px;
  text-transform:uppercase;
}
.ui-status-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  border:1px solid var(--status-idle-border);
  background:var(--status-idle);
  flex:0 0 auto;
  transition: background .2s ease, border-color .2s ease;
}
.ui-status-dot.status-connecting,
.ui-status-dot.is-connecting{
  background:var(--status-connecting);
  border-color:var(--status-connecting-border);
}
.ui-status-dot.status-online,
.ui-status-dot.is-online{
  background:var(--status-online);
  border-color:var(--status-online-border);
}
.ui-status-dot.status-offline,
.ui-status-dot.is-offline{
  background:var(--status-error);
  border-color:var(--status-error-border);
}
.ui-list-item{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:0;
  min-height:40px;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:var(--surface-0);
  color:var(--text);
  overflow:hidden;
}
.ui-list-item:hover{
  border-color:#4d5159;
  background:#202020;
}
.ui-list-item.is-active{
  border-color:#5f9a8d;
  background:#243730;
}
.ui-list-item__main{
  flex:1 1 auto;
  min-width:0;
  min-height:inherit;
  margin:0;
  padding:10px 12px;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
}
.ui-list-item__main--dense{
  padding:8px 10px;
  gap:8px;
}
.ui-list-item__main:active{
  transform:translateY(1px);
}
.ui-list-item__main:disabled{
  cursor:default;
}
.ui-list-item--solo{
  width:100%;
  margin:0;
  padding:10px 12px;
  text-align:left;
  justify-content:space-between;
  cursor:pointer;
}
.ui-list-item__body{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.ui-list-item__title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
}
.ui-list-item__title{
  display:block;
  min-width:0;
  font-size:13px;
  font-weight:700;
  color:inherit;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ui-list-item__meta{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:8px;
  min-width:0;
}
.ui-list-item__subtext{
  display:block;
  min-width:0;
  font-size:10px;
  line-height:1.2;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ui-list-empty{
  padding:8px 0 2px;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}

.ui-card-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:var(--surface-0);
  color:var(--text);
}
.ui-card-row__main{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.ui-card-row__icon{
  width:40px;
  height:40px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:var(--surface-1);
  color:var(--text);
  font-size:15px;
}
.ui-card-row__body{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.ui-card-row__title-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.ui-card-row__title{
  font-size:14px;
  font-weight:700;
  color:var(--text);
}
.ui-card-row__description,
.ui-card-row__summary{
  margin:0;
  font-size:12px;
  line-height:1.5;
}
.ui-card-row__description{
  color:#b8b8b8;
}
.ui-card-row__summary{
  color:var(--muted);
}
.ui-card-row__actions{
  flex:0 0 auto;
  display:flex;
  align-items:flex-start;
}
.web-viewer-page{
  min-height:100vh;
  display:block;
}
.web-viewer-page{
  background:var(--bg);
}
.web-viewer-page .wrapper{
  width:100%;
  min-height:100vh;
  display:flex;
  justify-content:center;
}
.web-viewer-page .wv-tabs{
  width:min(1280px, 100%);
  margin:0 auto;
  padding:16px 16px 40px;
  box-sizing:border-box;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.web-viewer-page .wv-tablist.ui-tabs{
  position:fixed;
  top:18px;
  left:50%;
  z-index:120;
  gap:0;
  padding:0;
  margin:0;
  transform:translateX(-50%);
  max-width:calc(100vw - 24px);
  border:1px solid var(--border);
  border-radius:var(--r);
  background:var(--surface-0);
  overflow:hidden;
  box-shadow:none;
}
.web-viewer-page .wv-tab.ui-tab{
  min-width:96px;
  flex:1 1 0;
  height:40px;
  padding:0 12px;
  border:0;
  border-left:1px solid var(--border);
  border-radius:0;
  background:transparent;
  color:var(--muted);
  font-family:var(--sans);
  font-size:13px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  gap:6px;
}
.web-viewer-page .wv-tab.ui-tab:first-child{
  border-left:0;
}
.web-viewer-page .wv-tab.ui-tab::after{
  height:0;
}
.web-viewer-page .wv-tab.ui-tab:hover{
  background:var(--surface-2);
  border-color:var(--border);
}
.web-viewer-page .wv-tab.ui-tab.active{
  background:var(--mint-soft-bg);
  border-color:var(--status-online-border);
  color:var(--text);
}
.web-viewer-page .wv-tab.ui-tab.active + .wv-tab.ui-tab{
  border-left-color:var(--status-online-border);
}
.web-viewer-page .wv-tabpanes{
  padding-top:84px;
  flex:1 1 auto;
  display:flex;
  min-height:0;
}
.web-viewer-page .wv-tabpanel{
  animation:fadeTab .22s ease;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.web-viewer-page .wv-tabpanel[hidden]{
  display:none !important;
}
.web-viewer-page .wv-tabpanel.is-overflow{
  justify-content:flex-start;
}
.web-viewer-page .showcase-container{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 460px));
  gap:12px;
  width:100%;
  justify-content:center;
}
.web-viewer-page .showcase-container.is-single-card{
  grid-template-columns:minmax(320px, 460px);
  justify-content:center;
}
.web-viewer-page .web-viewer-card{
  min-height:152px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  padding:14px 14px;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:var(--surface-3);
  color:var(--text);
  text-align:center;
  box-shadow:none;
  transition:background-color .2s ease, border-color .2s ease, transform .04s ease;
}
.web-viewer-page .web-viewer-card:hover{
  background:var(--surface-2);
  border-color:var(--border2);
}
.web-viewer-page .web-viewer-card:active{
  transform:translateY(1px);
}
.web-viewer-page .web-viewer-card__title{
  width:100%;
  margin:0;
  color:var(--text);
  font-size:22px;
  font-weight:700;
  line-height:1.1;
}
.web-viewer-page .web-viewer-card__subtitle{
  width:100%;
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}
.web-viewer-page .web-viewer-card__subtitle a{
  color:var(--status-online);
  text-decoration:none;
}
.web-viewer-page .web-viewer-card__subtitle a:hover{
  color:var(--mint);
}
.web-viewer-page .web-viewer-card__action{
  width:100%;
  min-width:0;
  min-height:40px;
  justify-content:center;
  align-self:stretch;
  border-radius:var(--r2);
  color:var(--text);
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.18px;
  box-shadow:none;
  margin-top:auto;
  text-decoration:none;
}
.web-viewer-page .web-viewer-card__action:hover,
.web-viewer-page .web-viewer-card__action:focus-visible{
  color:var(--text);
  text-decoration:none;
}
.web-viewer-page .web-viewer-card__action:visited{
  color:var(--text);
  text-decoration:none;
}
@keyframes fadeTab{
  from{
    opacity:0;
    transform:translateY(4px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
@media (max-width: 720px){
  .web-viewer-page .wv-tablist.ui-tabs{
    top:10px;
    gap:6px;
    padding:0;
  }
  .web-viewer-page .wv-tab.ui-tab{
    min-width:0;
    padding:0 10px;
  }
  .web-viewer-page .wv-tabpanes{
    padding-top:70px;
  }
  .web-viewer-page .showcase-container{
    grid-template-columns:1fr;
  }
  .web-viewer-page .web-viewer-card{
    min-height:144px;
    padding:13px 13px;
  }
  .web-viewer-page .web-viewer-card__title{
    font-size:20px;
  }
}
@media (max-width: 480px){
  .web-viewer-page .wv-tabs{
    padding:12px 12px 28px;
  }
  .web-viewer-page .web-viewer-card{
    min-height:136px;
    gap:8px;
    padding:12px 12px;
  }
  .web-viewer-page .web-viewer-card__title{
    font-size:18px;
  }
}
.live-console-device-access-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:12px;
}
.live-console-device-access-card__badge{
  display:inline-flex;
  align-items:center;
  min-height:18px;
}
.live-console-device-access-card__action{
  min-width:108px;
}
.live-console-device-access-card__action:disabled{
  cursor:default;
}
.live-console-device-access-card__action.is-busy{
  cursor:progress;
}

.ui-dock-item{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:32px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:var(--surface-1);
  color:var(--text);
  cursor:pointer;
  position:relative;
  appearance:none;
  -webkit-appearance:none;
  font-family:var(--mono);
  font-size:12px;
  line-height:1;
  transition:background .08s ease, border-color .08s ease, color .08s ease, transform .04s ease, opacity .08s ease;
}
.ui-dock-item:hover{
  background:var(--surface-3);
  border-color:#4d5159;
}
.ui-dock-item:active{
  transform:translateY(1px);
}
.ui-dock-item.minimized{
  opacity:.62;
}
.ui-dock-item--icon-only{
  justify-content:center;
  width:100%;
  min-width:0;
  padding:8px 0;
  gap:0;
}
.ui-dock-item--icon-only .ui-dock-item__icon-wrap{
  min-width:auto;
}
.ui-dock-item__icon-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  font-size:14px;
  color:var(--text);
}
.ui-dock-item__badge{
  position:absolute;
  top:-12px;
  right:-12px;
  width:17px;
  height:17px;
  border:1px solid #4d5159;
  border-radius:50%;
  background:var(--surface-2);
  color:var(--text);
  font-family:var(--mono);
  font-size:10px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.ui-dock-item__label{
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}
.ui-brand-tile{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  aspect-ratio:1 / 1;
  margin-bottom:8px;
  padding:6px;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:var(--surface-2);
  color:var(--text);
  cursor:pointer;
  transition:background .08s ease, border-color .08s ease, transform .04s ease;
}
.ui-brand-tile:hover{
  background:var(--surface-3);
  border-color:#4d5159;
  transform:translateY(-1px);
}
.ui-brand-tile img{
  width:38px;
  height:38px;
  object-fit:contain;
  display:block;
}

.ui-pane-footer{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 8px;
  border:1px solid var(--border2);
  border-radius:0;
  background:var(--surface-2);
  color:var(--text);
}
.ui-pane-footer__meta{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  color:var(--text);
  font-family:var(--mono);
  font-size:11px;
  line-height:1;
  letter-spacing:.1px;
  text-transform:uppercase;
}
.ui-pane-footer__name{
  max-width:200px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-transform:none;
  letter-spacing:0;
}

.ui-pane-menubar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 2px;
}

/* Live Console workflow list */
.live-console-workflows-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:5px;
  max-height:min(320px, 50vh);
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
}
.live-console-workflows-list::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}
.live-console-workflow-item{
  display:flex;
  align-items:stretch;
  gap:10px;
  margin-left:var(--workflow-indent, 0px);
  width:calc(100% - var(--workflow-indent, 0px));
  box-sizing:border-box;
  min-width:0;
  min-height:var(--workflow-row-height);
}
.live-console-workflow-row{
  min-height:var(--workflow-row-height);
  height:var(--workflow-row-height);
  box-sizing:border-box;
  flex:1 1 0;
  min-width:0;
  padding:4px 12px;
}
.live-console-workflow-name{
  flex:1 1 auto;
  min-width:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  white-space:normal;
  overflow:hidden;
  text-overflow:ellipsis;
  overflow-wrap:anywhere;
  word-break:break-word;
  max-height:calc(1.1em * 2);
  line-height:1.1;
  font-size:13px;
  color:#dcdcdc;
}
.live-console-workflow-name.clickable{
  color:#cfcfcf;
  cursor:pointer;
}
.live-console-workflow-actions{
  flex:0 0 auto;
  display:flex;
  align-items:stretch;
  gap:6px;
}
.live-console-workflow-action{
  flex:0 0 auto;
  width:var(--workflow-row-height);
  min-width:var(--workflow-row-height);
  height:var(--workflow-row-height);
}
.live-console-workflow-action:disabled{
  opacity:0.4;
  cursor:default;
}
.live-console-workflow-empty{
  padding:10px 0;
  text-align:left;
}
.live-console-workflow-folder{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.live-console-workflow-folder-header{
  color:#dcdcdc;
  width:calc(100% - var(--workflow-indent, 0px));
  text-align:left;
  min-height:var(--workflow-row-height);
  height:var(--workflow-row-height);
  box-sizing:border-box;
  margin-left:var(--workflow-indent, 0px);
  padding:8px 12px;
  align-items:center;
  gap:10px;
}
.live-console-workflow-folder-header i{
  flex:0 0 12px;
  width:12px;
  text-align:center;
  transition:transform .2s ease;
}
.live-console-workflow-folder-header[aria-expanded="true"] i{
  transform:rotate(90deg);
}
.live-console-workflow-folder-name{
  flex:1 1 auto;
  min-width:0;
  font-size:13px;
  font-weight:600;
  color:#dcdcdc;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.live-console-workflow-folder-count{
  flex:0 0 auto;
  margin-left:auto;
  font-size:12px;
  color:#8a8a8a;
}
.live-console-workflow-folder-children{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-top:0;
}
.live-console-workflow-folder-children.is-collapsed{
  display:none;
}
.live-console-workflow-filter{
  display:flex;
  align-items:center;
  gap:10px;
}
.live-console-workflow-filter .live-console-settings__input{
  height:var(--workflow-row-height);
  flex:1 1 auto;
}
.live-console-workflow-filter .live-console-workflow-action{
  flex:0 0 auto;
}

/* Live Console settings shell */
.live-console-settings{
  display:flex;
  flex-direction:column;
}
.ui-modal__dialog.live-console-settings{
  width:min(640px, calc(100% - 32px));
  max-width:640px;
  padding:0;
}
.ui-modal__dialog.live-console-settings{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.ui-modal__dialog.live-console-settings::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}
.live-console-settings__header{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  column-gap:12px;
  row-gap:4px;
  padding:12px 12px;
  text-align:left;
}
.live-console-settings__title{
  grid-column:1;
  grid-row:1;
}
.live-console-settings__subtitle{
  grid-column:1 / -1;
  grid-row:2;
  text-align:left;
}
.live-console-settings__header .ui-modal__close{
  position:static;
  grid-column:2;
  grid-row:1;
  align-self:center;
  justify-self:end;
}
.live-console-settings__form{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:12px 12px;
}
.live-console-settings__layout{
  display:flex;
  align-items:stretch;
  gap:0;
  border-top:0;
  padding-top:0;
  height:48vh;
}
.live-console-settings__nav{
  flex:0 0 136px;
  display:flex;
  flex-direction:column;
  gap:0;
  padding-right:18px;
  border-right:1px solid #2a2a2a;
}
.live-console-settings__nav-btn{
  width:100%;
  text-align:left;
  padding:10px 8px;
  border-radius:2px;
  border:0;
  background:transparent;
  color:#cfcfcf;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
  display:flex;
  align-items:center;
  gap:8px;
}
.live-console-settings__nav-btn .nav-label{
  white-space:nowrap;
}
.live-console-settings__nav-btn:hover{
  background:#1c1c1c;
  color:#fff;
}
.live-console-settings__nav-btn.is-active{
  background:#202020;
  color:#fff;
  box-shadow:0 0 0 1px rgba(76,175,80,0.25) inset;
}
.live-console-settings__content{
  flex:1 1 auto;
  min-width:0;
  height:100%;
  overflow-y:auto;
  padding-left:18px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.live-console-settings__content::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}
.live-console-settings__section{
  display:none;
  flex-direction:column;
  gap:18px;
  min-height:0;
}
.live-console-settings__section.is-active{
  display:flex;
  flex:1 1 auto;
}
.live-console-settings__section[data-section="workflows"]{
  flex:1 1 auto;
}
.live-console-settings__section[data-section="workflows"] #liveConsoleWorkflowsWrapper{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
}
.live-console-settings__section[data-section="workflows"] #liveConsoleWorkflowsGroup{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
}
.live-console-settings__section[data-section="workflows"] #liveConsoleWorkflowList{
  flex:1 1 auto;
  max-height:none;
}
.live-console-settings__section[data-section="workflows"] #liveConsoleWorkflowHint{
  margin-top:2px;
  margin-bottom:8px;
}
.live-console-settings__groups{
  display:none;
}
.live-console-settings__group:not(.ui-section-shell){
  display:flex;
  flex-direction:column;
  gap:6px;
}
.live-console-settings__group--toggle{
  gap:0;
}
.live-console-settings__group-header--device-access{
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.live-console-settings__btn--icon{
  width:56px;
  height:36px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.live-console-settings__btn--icon i{
  pointer-events:none;
}
.live-console-settings__btn--icon:disabled{
  opacity:0.4;
  cursor:default;
}
.live-console-settings__preset-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}
.live-console-settings__preset-group{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.live-console-settings__preset-group-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.live-console-settings__preset-check-btn{
  min-width:72px;
  cursor:pointer;
}
.live-console-settings__preset-check-btn *{ cursor:pointer; }
.live-console-settings__preset-check-btn:focus-visible{
  outline:none;
  border-color:#5f9a8d;
}
.live-console-settings__preset-check-btn:disabled{
  opacity:0.7;
  cursor:not-allowed;
}
.live-console-settings__preset-check-btn:disabled *{ cursor:not-allowed; }
.live-console-settings__preset-check-btn.is-checking{
  cursor:progress;
}
.live-console-settings__preset-check-btn.is-checking *{ cursor:progress; }
.live-console-settings__preset-check-btn i{
  font-size:12px;
}
.live-console-settings__device-access-refresh-btn{
  flex:0 0 auto;
}
.live-console-settings__btn{
  min-width:84px;
}
.live-console-settings__preset-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}
.live-console-settings__preset-item{
  width:100%;
  min-width:0;
  min-height:52px;
  box-sizing:border-box;
  position:relative;
}
.live-console-settings__preset-item-card{
  position:relative;
  padding:8px 6px 8px 10px;
}
.live-console-settings__preset-item-comfy-btn{
  flex:0 0 44px;
  width:44px;
  border:0;
  border-left:1px solid #2a2a2a;
  margin:0;
  padding:0;
  line-height:0;
  background:transparent;
  color:inherit;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  touch-action:manipulation;
  transition:background .15s ease, opacity .15s ease, transform .08s ease;
  appearance:none;
  -webkit-appearance:none;
}
.live-console-settings__preset-item-comfy-btn:hover:not(.is-disabled){
  background:#1f1f1f;
}
.live-console-settings__preset-item-comfy-btn:active:not(.is-disabled){
  transform:translateY(1px);
}
.live-console-settings__preset-item-comfy-btn:focus-visible{
  outline:none;
  box-shadow:none;
  border-left-color:#5f9a8d;
}
.live-console-settings__preset-item-comfy-btn.is-disabled{
  opacity:0.55;
  cursor:not-allowed;
}
.live-console-settings__preset-item-comfy-logo{
  width:30px;
  height:30px;
  display:block;
  margin:0;
  padding:0;
  object-fit:contain;
  filter:grayscale(1) saturate(0) brightness(1.2) contrast(1.15);
}
.live-console-settings__preset-item-comfy-btn.is-active .live-console-settings__preset-item-comfy-logo{
  opacity:0.86;
  filter:grayscale(1) saturate(0) brightness(1.12) contrast(1.08);
}
.live-console-settings__preset-item-comfy-btn.is-disabled .live-console-settings__preset-item-comfy-logo{
  opacity:0.5;
  filter:grayscale(1) saturate(0) brightness(0.95) contrast(1.05);
}
.live-console-settings__preset-item-body{
  width:100%;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
}
.live-console-settings__preset-item-title-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  column-gap:4px;
  min-width:0;
}
.live-console-settings__preset-item-title-group{
  display:flex;
  align-items:center;
  gap:6px;
  flex:1 1 auto;
  min-width:0;
  justify-content:flex-start;
}
.live-console-settings__preset-item-title{
  display:block;
  flex:0 1 auto;
  min-width:0;
  max-width:100%;
  font-size:13px;
  font-weight:600;
  color:inherit;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.live-console-settings__preset-item-status-stack{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  flex:0 0 auto;
  min-width:12px;
  margin-left:auto;
  text-align:right;
}
.live-console-settings__preset-item-status-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:none;
  position:static;
  flex:0 0 auto;
  margin-top:0;
  order:2;
}
.live-console-settings__preset-item-meta{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:8px;
  min-width:0;
}
.live-console-settings__preset-item-subtext{
  display:block;
  flex:1 1 auto;
  min-width:0;
  font-size:10px;
  line-height:1.1;
  color:#8a8a8a;
  letter-spacing:0.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.live-console-settings__preset-item-latency{
  display:block;
  flex:0 0 auto;
  width:auto;
  min-width:28px;
  max-width:none;
  font-size:9px;
  line-height:1;
  color:#7a7a7a;
  letter-spacing:0.01em;
  white-space:nowrap;
  text-align:right;
  font-variant-numeric:tabular-nums;
  opacity:0;
  order:1;
}
.live-console-settings__preset-item-latency.is-visible{
  opacity:1;
}
.live-console-settings__preset-item.is-active{
  color:#f1f1f1;
}
.live-console-settings__preset-item.is-active .live-console-settings__preset-item-comfy-btn{
  border-left-color:#5f9a8d;
}
.live-console-settings__preset-item.is-status-hidden .live-console-settings__preset-item-status-stack{
  display:none !important;
}
.live-console-settings__preset-item.is-status-hidden .live-console-settings__preset-item-status-dot,
.live-console-settings__preset-item.is-status-hidden .live-console-settings__preset-item-latency{
  display:none !important;
}
.live-console-settings__preset-item.is-status-checking .live-console-settings__preset-item-status-dot{
  display:block;
  background:#7e7e7e;
  border:1px solid #5d5d5d;
  animation:live-console-preset-probe-pulse 0.9s ease-in-out infinite;
}
.live-console-settings__preset-item.is-status-checking .live-console-settings__preset-item-latency.is-visible{
  animation:none;
}
.live-console-settings__preset-item.is-status-online .live-console-settings__preset-item-status-dot{
  display:block;
  background:#37f6c2;
  border:1px solid #5f9a8d;
}
.live-console-settings__preset-item.is-status-offline .live-console-settings__preset-item-status-dot,
.live-console-settings__preset-item.is-status-offline .live-console-settings__preset-item-latency{
  display:none !important;
}
@keyframes live-console-preset-probe-pulse{
  0%{ opacity:0.55; transform:scale(0.92); }
  50%{ opacity:1; transform:scale(1); }
  100%{ opacity:0.55; transform:scale(0.92); }
}
#liveConsoleWorkflowsWrapper{
  --workflow-row-height: 40px;
}
.live-console-settings__channels-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:8px;
  border-top:1px solid #242424;
  border-bottom:1px solid #242424;
  padding-top:6px;
  padding-bottom:6px;
}
.live-console-settings__channels-row{
  display:grid;
  grid-template-columns:28px minmax(0, 1fr) 56px;
  align-items:center;
  column-gap:8px;
  min-height:34px;
}
.live-console-settings__channels-row + .live-console-settings__channels-row{
  border-top:1px solid #242424;
  padding-top:6px;
}
.live-console-settings__channels-label{
  min-width:0;
  font-size:13px;
  font-weight:600;
  color:#dcdcdc;
}
.live-console-settings__channels-visibility-btn{
  width:32px;
  height:32px;
  border:0;
  background:transparent;
  color:#a0a0a0;
  font-size:13px;
  border-radius:2px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:color .15s ease, background-color .15s ease;
}
.live-console-settings__channels-visibility-btn:hover{
  color:#d2d2d2;
  background:rgba(255,255,255,0.03);
}
.live-console-settings__channels-visibility-btn.is-hidden{
  color:#6f6f6f;
}
.live-console-settings__channels-visibility-btn.is-empty{
  cursor:default;
  pointer-events:none;
  color:#666;
  background:transparent;
}
#liveConsolePaneHotkey{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:none;
}
.live-console-settings__label{
  font-size:13px;
  font-weight:600;
  color:#dcdcdc;
}
.live-console-settings__hint{
  margin:0;
  font-size:12px;
  color:#8a8a8a;
  line-height:1.5;
}
.live-console-settings__value{
  font-size:13px;
  color:#a0a0a0;
}
.live-console-settings__input,
.live-console-settings__select{
  width:100%;
  padding:10px 12px;
  border-radius:2px;
  border:1px solid #2a2a2a;
  background:#141414;
  color:#f1f1f1;
  font-size:12px;
  font-family:var(--mono);
  box-sizing:border-box;
  min-height:36px;
}
.live-console-settings__input:focus,
.live-console-settings__select:focus{
  outline:none;
  border-color:#3a3a3a;
  box-shadow:none;
}
.live-console-settings__token-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.live-console-settings__token-row .live-console-settings__input{
  flex:1 1 auto;
  min-width:0;
}
.live-console-settings__token-toggle{
  flex:0 0 38px;
  width:36px;
  height:36px;
  padding:0;
  border-radius:2px;
  border:1px solid #2a2a2a;
  background:#1f1f1f;
  color:#a7adb7;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .08s ease;
}
.live-console-settings__token-toggle:hover{
  background:#252525;
  border-color:#3a3a3a;
  color:#f1f1f1;
}
.live-console-settings__token-toggle:active{
  transform:translateY(1px);
}
.live-console-settings__token-toggle.is-active{
  color:#f1f1f1;
  border-color:#4f8377;
  background:#1f3530;
}
.live-console-settings__token-preview-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
}
.live-console-settings__select.live-console-settings__channel-input{
  width:56px;
  min-width:56px;
  max-width:56px;
  height:36px;
  padding:0;
  border-radius:2px;
  font-size:13px;
  text-align:center;
  text-align-last:center;
  line-height:36px;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:none;
}
.live-console-settings__select--hidden{
  display:none;
}

/* Live Console about modal */
.live-console__about-header{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:22px;
}
.live-console__about-heading{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  flex:1 1 auto;
}
.live-console__about-logo-wrap{
  width:68px;
  height:68px;
  border-radius:2px;
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid;
  border-color:#eceff4 #c7ccd5 #aeb4bd #d7dce4;
  padding:3px;
  overflow:hidden;
  text-decoration:none;
  box-shadow:inset 0 1px 0 #ffffff, inset 0 -2px 0 #d2d7df, 0 1px 0 #050505;
  transition:background .08s ease, border-color .08s ease, transform .04s ease, box-shadow .08s ease;
}
.live-console__about-logo-wrap:hover{
  background:#fcfcfd;
  border-color:#f3f5f8 #c6ccd4 #abb1bb #d5dae2;
  box-shadow:inset 0 1px 0 #ffffff, inset 0 -2px 0 #ced4dc, 0 2px 0 #050505;
}
.live-console__about-logo-wrap:active{
  background:#edf0f4;
  border-color:#c5cbd4 #b9bfc8 #d8dde5 #c1c7d0;
  box-shadow:inset 0 2px 0 #d0d6de, inset 0 -1px 0 #ffffff, 0 0 0 #050505;
  transform:translateY(1px);
}
.live-console__about-logo-wrap:focus-visible{
  outline:1px solid #8b93a2;
  outline-offset:2px;
}
.live-console__about-logo{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  transform:scale(1.06);
}
.live-console__about-title{
  margin:0;
  font-size:18px;
  font-weight:800;
  font-family:var(--mono);
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:#f2f2f2;
}
.live-console__about-subtitle{
  margin:4px 0 0;
  font-size:14px;
  color:#a0a0a0;
}
.live-console__about-cards{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.live-console__about-card{
  padding:18px;
  border-radius:var(--r);
  border:1px solid #2f2f2f;
  background:#1a1a1a;
}
.live-console__about-card--vrch,
.live-console__about-card--web-viewer,
.live-console__about-card--contact{
  background:#1a1a1a;
  border-color:#2f2f2f;
}
.live-console__about-card h3{
  margin:0 0 10px;
  font-size:14px;
  font-family:var(--mono);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:#e8e8e8;
}
.live-console__about-card p{
  margin:0 0 14px;
  color:#cfcfcf;
  font-size:14px;
  line-height:1.6;
}
.live-console__about-card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.live-console__about-card-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  padding:0 14px;
  border:1px solid #2a2a2a;
  border-radius:var(--r2);
  background:#1f1f1f;
  color:#fff;
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  text-decoration:none;
  letter-spacing:0.02em;
  text-transform:uppercase;
  transition:background .08s ease, border-color .08s ease, color .08s ease, transform .04s ease;
}
.live-console__about-card-link:hover{
  background:#2c2c2c;
  border-color:#4d5159;
  transform:none;
}
.live-console__about-card-link:active{
  transform:translateY(1px);
}

.ui-splitter{
  position:relative;
  background:var(--border);
  transition:none;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
}
.ui-splitter::before{
  content:'';
  position:absolute;
  inset:-16px;
}
.ui-splitter:hover,
.ui-splitter.is-dragging{
  background:#303030;
}
.ui-splitter::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
}
.ui-splitter.vertical::after{
  width:4px;
  height:4px;
  border-radius:999px;
  background:#8f949d;
  box-shadow:0 -6px 0 #8f949d, 0 6px 0 #8f949d;
}
.ui-splitter.horizontal::after{
  width:4px;
  height:4px;
  border-radius:999px;
  background:#8f949d;
  box-shadow:-6px 0 0 #8f949d, 6px 0 0 #8f949d;
}
.ui-splitter:hover::after,
.ui-splitter.is-dragging::after{
  opacity:1;
}

.ui-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(16, 16, 16, 0.72);
  z-index:99;
  padding:clamp(8px, 2vw, 14px);
  box-sizing:border-box;
}
.ui-modal.is-visible{
  display:flex;
}
.ui-modal__dialog{
  position:relative;
  width:min(480px, calc(100% - 16px));
  max-width:480px;
  max-height:min(92vh, calc(var(--vrch-safe-vh, 1vh) * 100 - 16px));
  background:#181818;
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:none;
  padding:10px 10px 12px;
  color:var(--text);
  line-height:1.6;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable both-edges;
}
.ui-modal__dialog .ui-btn--md,
.ui-modal__dialog .ui-btn--sm{
  text-transform:uppercase;
}
.ui-modal__close{
  position:absolute;
  top:12px;
  right:12px;
  width:36px;
  height:36px;
  border-radius:var(--r2);
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
}
.ui-modal__close:hover{
  background:#252525;
}

#promptCard,
#shaderCard{ position: relative; }
.ui-overlay{
  position: absolute;
  inset: 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: #101010;
  pointer-events: auto;
}
.ui-overlay.show{ display:flex; }
.ui-overlay__box{
  width: min(360px, 92%);
  min-height: 112px;
  border: 2px solid #486e63;
  background: #171717;
  border-radius: var(--r);
  padding: 14px 12px;
  font-family: var(--mono);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 8px;
  text-align:center;
  position: relative;
}
.ui-overlay__box::before{
  content:none;
}
.ui-overlay__box::after{
  content:none;
}
.overlayOne{
  font-weight: 900;
  letter-spacing: 1.8px;
  font-size: 12px;
  color: var(--text);
  text-transform: uppercase;
}
.overlayTwo{
  min-height: 14px;
  font-size: 11px;
  letter-spacing: 1.2px;
  color: var(--mint);
  text-transform: uppercase;
  display: inline-block;
  width: 14ch;
  text-align: left;
  white-space: pre;
}
.ui-overlay__progress{
  width: 100%;
  height: 8px;
  border: 1px solid #486e63;
  background: #111111;
  overflow: hidden;
  position: relative;
}
.ui-overlay__progress-bar{
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: -34%;
  width: 32%;
  background:
    linear-gradient(
      90deg,
      #1f6e5d 0 12.5%,
      #2a8d76 12.5% 25%,
      #31c59f 25% 37.5%,
      #37f6c2 37.5% 50%,
      #9bffe8 50% 62.5%,
      #37f6c2 62.5% 75%,
      #31c59f 75% 87.5%,
      #2a8d76 87.5% 100%
    );
  animation: overlay-progress-sweep .9s linear infinite;
}
@keyframes overlay-progress-sweep{
  from{ transform: translateX(0); }
  to{ transform: translateX(420%); }
}

.statusStrip{
  display:none;
  padding: 8px 10px;
  border-top: 1px solid #7d4b56;
  border-bottom: 1px solid var(--border);
  background: #2b1a20;
  font-family: var(--mono);
  font-size: 12px;
  color: #ffe3ea;
}
.statusStrip.show{ display:block; }

.ui-panel__header{
  padding: 10px 12px;
  min-height: var(--sz-header);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.h{
  font-size: 12px;
  font-family: var(--mono);
  color: var(--muted);
  letter-spacing: .8px;
  text-transform: uppercase;
  line-height: 1;
}
.ui-panel__actions,
.ui-panel__actions{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.hVersion{
  display:inline-block;
  margin-left:8px;
  color: #b6bcc7;
  letter-spacing: .7px;
  font-variant-numeric: tabular-nums;
  text-transform: none;
}

.ui-divider,
.divider{ height:1px; background: var(--border2); opacity: 1; }

.ui-tabs{
  display:flex;
  gap:8px;
  overflow:auto;
  padding: 8px 10px 12px;
  background: var(--surface-0);
}

.ui-tab{
  border: 1px solid #4b4f57;
  background: var(--surface-2);
  color: #bfc4cf;
  padding: 0 10px;
  height: var(--sz-field);
  min-width: 88px;
  border-radius: var(--r2);
  cursor:pointer;
  font-family: var(--mono);
  font-size:12px;
  white-space:nowrap;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  line-height: 1;
  user-select:none;
  position: relative;
  transform: translateY(0);
  transition: transform .04s ease, background .05s ease, border-color .05s ease;
}
.ui-tab::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:#40444c;
}

#focusTabs .ui-tab{
  min-width: 0;
  padding: 0 8px;
}
.ui-tab:hover{ border-color: #515151; background: #2b2b2b; }
.ui-tab:active{ transform: translateY(1px); }

.ui-tab.active{
  color: var(--text);
  background: #2d3e58;
  border-color: #5873a5;
}
.ui-tab.active::after{ background:#7aa2ff; }

#focusTabs .ui-tab.active{
  background: #27423b;
  border-color: #5f9a8d;
}
#focusTabs .ui-tab.active::after{ background:#37f6c2; }

.chgSlot{
  width: 6px;
  height: 14px;
  border: 1px solid #5b5f68;
  background: #121212;
  padding: 1px;
  display:inline-flex;
  align-items:flex-end;
  justify-content:center;
  border-radius: 1px;
}
.chg{
  width: 2px;
  height: 100%;
  border-radius: 0;
  background: #6d7380;
  border: none;
  display:inline-block;
}
.chg.on{ background: var(--mint); }

.ui-panel__body{
  flex: 1;
  min-height: 0;
  padding: 0;
  display:flex;
  flex-direction:column;
}

.ui-toolbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  padding: 8px 10px;
  min-height: var(--sz-header);
  border-bottom: 1px solid var(--border);
  background: var(--surface-0);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

.ui-toolbar .meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ui-toolbar .meta .t{ color: var(--text); font-weight: 900; letter-spacing:.12px; }
.ui-toolbar .meta .d{ color: var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width: 720px; }
.live-console__statusbar{
  --status-bar-inline-size:100vw;
  --status-bar-inline-start:0px;
  flex:0 0 auto;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  min-height:40px;
  padding:6px 12px;
  border-top:1px solid #2a2a2a;
  border-bottom:0;
  background:#121212;
  color:#d7d7d7;
  font-size:13px;
  letter-spacing:0.01em;
  overflow:visible;
  box-sizing:border-box;
}
.live-console__statusbar.is-hidden{
  display:none !important;
}
.live-console__status-block{
  display:flex;
  align-items:center;
  min-width:0;
}
.live-console__status-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
}
.live-console__status-actions button{
  width:var(--sz-btn-sm);
  min-width:var(--sz-btn-sm);
}
.live-console__status-actions button.is-running{
  color:#d8fcef;
  border-color:#5f9a8d;
  background:#27423b;
}
.live-console__status-actions button.is-paused{
  color:#fff0c7;
  border-color:#8f7446;
  background:#3c3220;
}
.live-console__status-actions button:disabled{
  opacity:0.5;
  cursor:default;
}
.live-console__status-marquee{
  flex:1 1 auto;
  min-width:140px;
  overflow:hidden;
  white-space:nowrap;
  cursor:grab;
  scrollbar-width:none;
  touch-action:pan-x;
  padding-right:6px;
  text-overflow:ellipsis;
}
.live-console__status-marquee::-webkit-scrollbar{
  display:none;
}
.live-console__status-marquee.is-dragging{
  cursor:grabbing;
}
.live-console__status-text-inner{
  display:inline-block;
}
.live-console__runner-state{
  flex:0 0 auto;
  min-width:86px;
  justify-content:center;
}
.live-console__runner-state.paused{
  color:#fff0c7;
  border-color:#8f7446;
  background:#3c3220;
}
.live-console__runner-state.error{
  color:#ffe5ea;
  border-color:#975968;
  background:#352027;
}
.live-console__runner-state.running{
  color:#d8fcef;
  border-color:#5f9a8d;
  background:#27423b;
}
.live-console__status-workflow{
  flex:0 1 330px;
  font-size:12px;
  color:#c8c8c8;
  cursor:pointer;
  position:relative;
  gap:6px;
  overflow:visible;
}
.live-console__status-workflow-toggle{
  flex:0 0 auto;
}
.live-console__status-workflow #statusWorkflowValue{
  flex:1 1 auto;
  min-width:0;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.live-console__status-workflow:focus-visible{
  outline:2px solid #5f9a8d;
  outline-offset:2px;
  border-radius:2px;
}
.live-console__status-server-trigger{
  flex:0 0 auto;
  font-size:12px;
  color:#c8c8c8;
  cursor:pointer;
  position:relative;
  gap:6px;
  overflow:visible;
}
.live-console__status-server-toggle{
  flex:0 0 auto;
}
.live-console__status-server-label{
  display:block;
  max-width:180px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#c0c0c0;
}
.live-console__status-server-trigger:focus-visible{
  outline:2px solid #5f9a8d;
  outline-offset:2px;
  border-radius:2px;
}
.live-console__status-actions button:hover:not(:disabled),
.live-console__status-workflow:hover .live-console__status-workflow-toggle,
.live-console__status-server-trigger:hover .live-console__status-server-toggle{
  border-color:#4d5159;
  color:#e9ecf2;
  background:#2c2c2c;
}
.live-console__status-actions button:active:not(:disabled),
.live-console__status-workflow:active .live-console__status-workflow-toggle,
.live-console__status-server-trigger:active .live-console__status-server-toggle{
  transform:translateY(1px);
}
.live-console__status-actions button:focus-visible,
.live-console__status-workflow:focus-visible .live-console__status-workflow-toggle,
.live-console__status-server-trigger:focus-visible .live-console__status-server-toggle,
.live-console__status-workflow[aria-expanded="true"] .live-console__status-workflow-toggle,
.live-console__status-server-trigger[aria-expanded="true"] .live-console__status-server-toggle{
  border-color:#5f9a8d;
  box-shadow:none;
}
.live-console-workflow-popover{
  position:absolute;
  right:0;
  bottom:calc(100% + 8px);
  width:min(400px, 90vw);
  --workflow-row-height:40px;
}
.live-console-workflow-popover,
.live-console-server-popover{
  overflow:visible;
}
.live-console-server-popover__subtitle{
  white-space:nowrap;
}
.live-console-workflow-popover .live-console-workflow-filter{
  margin-top:0;
}
.live-console-workflow-popover .live-console-workflows-list{
  max-height:min(320px, 45vh);
}
.live-console-server-popover{
  position:absolute;
  right:0;
  bottom:calc(100% + 8px);
  width:min(360px, 92vw);
}
.live-console-server-popover__actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
}
.live-console-server-popover__refresh{
  flex:0 0 auto;
  min-width:84px;
  gap:6px;
}
.live-console-server-popover__refresh:disabled{
  opacity:0.6;
  cursor:default;
}
.live-console-popover-close{
  flex:0 0 auto;
}
.live-console-popover-close:active{
  transform:translateY(1px);
}
.live-console-server-popover__list{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:min(340px, 46vh);
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
}
.live-console-server-popover__list::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}
.live-console-server-popover__section{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.live-console-server-popover__item{
  min-height:50px;
}
.live-console-server-popover__item-card{
  width:100%;
}
.live-console-server-popover__item-card:disabled{
  cursor:default;
  opacity:1;
}
.live-console-server-popover__item-card:disabled:hover,
.live-console-server-popover__item-card:disabled:active{
  background:transparent;
}
.live-console-server-current-badge{
  flex:0 0 auto;
}
.live-console-server-current-badge[hidden]{
  display:none !important;
}
.live-console-server-popover__empty{
  padding:8px 0 2px;
}

/* Live Console page layout */
#liveConsole{
  height:calc(var(--vrch-safe-vh, 1vh) * 100);
  min-height:calc(var(--vrch-safe-vh, 1vh) * 100);
  display:flex;
  flex-direction:column;
  position:relative;
  padding-left:var(--dock-width, 184px);
  box-sizing:border-box;
  overflow:hidden;
}
#topRow{
  display:flex;
  min-height:0;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
#topRow::-webkit-scrollbar{
  height:8px;
}
#topRow::-webkit-scrollbar-thumb{
  background:#4a4f5d;
  border-radius:4px;
}
#topRow::-webkit-scrollbar-track{
  background:#1a1c22;
}
#topRow{
  scrollbar-color:#4a4f5d #1a1c22;
}
.pane{
  position:relative;
  overflow:hidden;
  background:#141416;
  border:0;
  box-sizing:border-box;
}
.pane::after{
  content:'';
  position:absolute;
  inset:0;
  border:1px solid #4a4a4a;
  pointer-events:none;
  z-index:2;
}
.pane.active{
  box-shadow:none;
}
.pane.active::after{
  content:'';
  position:absolute;
  inset:0;
  border:1px solid #7a7a7a;
  pointer-events:none;
  z-index:2;
}
.pane > iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
  background:#000;
  position:relative;
  z-index:1;
}
.live-console__pane-footer{
  position:absolute;
  right:0;
  bottom:0;
  z-index:3;
  pointer-events:auto;
  background:#2a2a2a;
  color:#d9d9d9;
}
.live-console__pane-footer-left{
  color:#d9d9d9;
}
.pane:not(.active) .live-console__pane-footer-left{
  display:none;
}
.pane:not(.active) .live-console__pane-footer{
  border-color:#4a4a4a;
  border-right-color:#2a2a2a;
  border-bottom-color:#2a2a2a;
}
.pane.active .live-console__pane-footer{
  border-color:#7a7a7a;
  border-right-color:#2a2a2a;
  border-bottom-color:#2a2a2a;
}
.live-console__pane-condensed-ghost{
  border:0 !important;
  pointer-events:none;
  background:transparent !important;
  min-width:0 !important;
}
#statusBar.is-compact{
  gap:6px;
  padding:6px 8px;
}
#statusBar.is-compact .live-console__status-marquee{
  min-width:72px;
  flex:1 1 72px;
  padding-right:0;
}
#statusBar.is-compact .live-console__runner-state{
  display:none;
}
#statusBar.is-compact .live-console__status-workflow{
  flex:0 1 auto;
  min-width:32px;
  margin-left:auto;
}
#statusBar.is-compact .live-console__status-workflow #statusWorkflowValue{
  max-width:96px;
}
#statusBar.is-compact .live-console__status-server-label{
  display:none;
}
#statusBar.is-compact .live-console__status-server-trigger{
  flex:0 0 auto;
}
#statusBar.is-tight .live-console__status-marquee{
  min-width:48px;
  flex:1 1 48px;
}
#statusBar.is-tight .live-console__status-workflow #statusWorkflowValue{
  display:none;
}
#statusBar.is-tight .live-console-workflow-popover,
#statusBar.is-tight .live-console-server-popover{
  position:fixed;
  left:0;
  right:0;
  bottom:48px;
  transform:none;
  width:auto;
  max-width:none;
  margin:0;
}
.live-console-condensed #topRow{
  flex:1 1 auto;
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  padding:0 16px 10px;
}
.live-console-condensed #topRow .pane{
  flex:0 0 clamp(280px, 42vw, 520px);
  min-width:260px;
}
.live-console-condensed #bottomRow{
  display:none !important;
}
.live-console-condensed #splitter-horizontal{
  display:none !important;
}
.live-console-condensed #topRow::-webkit-scrollbar{
  height:8px;
}
.live-console-condensed #topRow::-webkit-scrollbar-thumb{
  background:#545b6c;
  border-radius:4px;
}
.live-console-condensed #topRow::-webkit-scrollbar-track{
  background:#1b1d24;
}
.live-console-condensed #topRow{
  scrollbar-color:#545b6c #1b1d24;
}
.live-console__dock{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:var(--dock-width, 184px);
  background:#121212;
  border-right:1px solid #2a2a2a;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px 8px;
  box-sizing:border-box;
  z-index:9;
}
.live-console__dock-title{
  font-size:12px;
  color:#b0b0b0;
  padding:0;
}
.live-console__dock-handle{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  color:#b0b0b0;
  padding:6px 0 4px;
}
.live-console__dock-handle i{
  pointer-events:none;
}
.live-console__dock-items{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:0;
  flex:1 1 auto;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.live-console__dock-items::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}
.live-console__dock .live-console__dock-footer{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.live-console__dock.live-console__dock--thin .live-console__dock-brand{
  padding:0;
  border-radius:0;
  background:transparent;
  border:0;
}
.live-console__dock.live-console__dock--thin .live-console__dock-brand:hover{
  background:transparent;
  box-shadow:none;
  transform:none;
}
.live-console__dock.live-console__dock--thin .live-console__dock-brand img{
  width:100%;
  height:100%;
}
.live-console__dock-fullscreen{
  margin-top:8px;
}
.live-console__dock-settings{
  margin-top:8px;
}
.live-console__pane-menubar{
  position:absolute;
  top:0;
  right:0;
  z-index:6;
}
.live-console__pane-menubar .live-console__pane-menubar-btn,
.live-console__pane-footer-close{
  border:none;
  border-color:transparent;
  background:transparent;
  box-shadow:none;
  color:#e8e8e8;
}
.live-console__pane-footer-close i{
  font-size:15px;
}
.live-console__pane-menubar .live-console__pane-menubar-btn:hover,
.live-console__pane-footer-close:hover,
.live-console__pane-menubar .live-console__pane-menubar-btn.ui-btn--md:hover:not(:disabled),
.live-console__pane-footer-close.ui-btn--md:hover:not(:disabled){
  border:none;
  border-color:transparent;
  background:transparent;
  box-shadow:none;
  color:#ffffff;
}
.live-console__pane-menubar .live-console__pane-menubar-btn:active,
.live-console__pane-footer-close:active{
  transform:translateY(1px);
}
.live-console__dock.live-console__dock--thin{
  width:14px;
  padding:0;
  cursor:pointer;
}
.live-console__dock.live-console__dock--icons{
  width:56px;
  padding:8px;
  gap:8px;
}
.live-console__dock.live-console__dock--icons .live-console__dock-brand{
  width:100%;
  min-width:0;
  max-width:none;
  height:auto;
  min-height:0;
  max-height:none;
  aspect-ratio:1 / 1;
  margin:0;
  margin-bottom:0;
  padding:2px;
  border:1px solid;
  border-color:#eceff4 #c7ccd5 #aeb4bd #d7dce4;
  border-radius:2px;
  background:#ffffff;
  overflow:hidden;
  flex:0 0 auto;
  align-self:stretch;
  box-shadow:inset 0 1px 0 #ffffff, inset 0 -2px 0 #d2d7df, 0 1px 0 #050505;
  transition:background .08s ease, border-color .08s ease, transform .04s ease, box-shadow .08s ease;
}
.live-console__dock.live-console__dock--icons .live-console__dock-brand:hover{
  background:#fcfcfd;
  border-color:#f3f5f8 #c6ccd4 #abb1bb #d5dae2;
  box-shadow:inset 0 1px 0 #ffffff, inset 0 -2px 0 #ced4dc, 0 2px 0 #050505;
}
.live-console__dock.live-console__dock--icons .live-console__dock-brand:active{
  background:#edf0f4;
  border-color:#c5cbd4 #b9bfc8 #d8dde5 #c1c7d0;
  box-shadow:inset 0 2px 0 #d0d6de, inset 0 -1px 0 #ffffff, 0 0 0 #050505;
  transform:translateY(1px);
}
.live-console__dock.live-console__dock--icons .live-console__dock-brand:focus-visible{
  outline:1px solid #8b93a2;
  outline-offset:2px;
}
.live-console__dock.live-console__dock--icons .live-console__dock-brand img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  transform:scale(1.06);
}
.live-console__dock.live-console__dock--icons .live-console__dock-items{
  padding:0;
  gap:8px;
}
.live-console__dock.live-console__dock--icons .live-console__dock-footer{
  padding:0;
  gap:8px;
}
.live-console__dock.live-console__dock--icons .live-console__dock-item{
  justify-content:center;
  padding:8px 0;
  gap:0;
}
.live-console__dock.live-console__dock--icons .live-console__dock-icon-wrap{
  min-width:auto;
}
.live-console__dock.live-console__dock--icons .live-console__dock-fullscreen,
.live-console__dock.live-console__dock--icons .live-console__dock-settings,
.live-console__dock.live-console__dock--icons .live-console__dock-close{
  width:100%;
  min-width:0;
}
.live-console__dock-brand.ui-brand-tile{
  margin:0;
  margin-bottom:0;
  border:1px solid #d9dce4;
  background:#ffffff;
}
.live-console__dock-brand.ui-brand-tile:hover{
  background:#fcfcfd;
  border-color:#c6ccd4;
}
.live-console__dock-brand.ui-brand-tile:active{
  background:#edf0f4;
  border-color:#b9bfc8;
}
.live-console__dock.live-console__dock--thin .live-console__dock-item,
.live-console__dock.live-console__dock--thin .live-console__dock-title,
.live-console__dock.live-console__dock--thin .live-console__dock-items,
.live-console__dock.live-console__dock--thin .live-console__dock-close,
.live-console__dock.live-console__dock--thin .live-console__dock-footer{
  display:none;
}
.live-console__dock.live-console__dock--icons .live-console__dock-label{
  display:none;
}
.live-console__dock-close{
  margin-top:auto;
}
.live-console__dock .live-console__dock-footer .live-console__dock-close{
  margin-top:0;
}
.live-console__splitter{
  flex:0 0 12px;
}
.live-console__splitter.horizontal{
  cursor:row-resize;
}
.live-console__splitter.vertical{
  cursor:col-resize;
}
.live-console-splitters-locked .live-console__splitter{
  pointer-events:none;
  cursor:default;
}
.live-console-splitters-locked .live-console__splitter::after{
  opacity:0 !important;
}
#bottomRow{
  display:flex;
  min-height:0;
  flex:1 1 auto;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
#bottomRow::-webkit-scrollbar{
  height:8px;
}
#bottomRow::-webkit-scrollbar-thumb{
  background:#4a4a4a;
  border-radius:4px;
}
#bottomRow::-webkit-scrollbar-track{
  background:#1a1a1a;
}
#bottomRow{
  scrollbar-color:#4a4a4a #1a1a1a;
}
.pane:focus{
  outline:none;
}
.live-console__pane-label{
  display:none;
  position:absolute;
  top:8px;
  left:10px;
  padding:2px 6px;
  font-size:12px;
  color:#d0d0d0;
  background:#1e1e1e;
  border-radius:2px;
  pointer-events:none;
}
.pane.maximized{
  position:absolute !important;
  inset:0;
  z-index:50;
  border-color:#4CAF50;
}
.live-console-maximized .live-console__splitter{
  display:none !important;
}
.live-console-maximized .pane:not(.maximized){
  visibility:hidden;
  pointer-events:none;
}

.ioRight{ width: 160px; display:flex; justify-content:flex-end; gap: 6px; }

textarea{
  flex: 1;
  min-height: 0;
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  padding: 10px;
  font-size: 13px;
  font-family: var(--sans);
  line-height: 1.35;
  resize: none;
  overflow: auto;
}

pre{
  margin:0;
  flex:1;
  min-height:0;
  padding: 10px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.35;
  overflow: auto;
  color: var(--text);
  white-space: pre;
}

#codeEdit{
  margin:0;
  flex:1;
  min-height:0;
  display:none;
  padding: 10px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.35;
  resize: none;
  overflow: auto;
  white-space: pre;
}

.ui-panel__footer{ padding: 0; height: var(--sz-action); display:flex; }

.ui-action{
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--mono);
  font-weight: 900;
  letter-spacing: 1.8px;
  font-size: 16px;
  cursor: pointer;
  user-select:none;
}

.ui-action.plan{ background: #1f5145; box-shadow: inset 0 -2px 0 0 #37f6c2; }
.ui-action.apply{ background: #2b3c5c; box-shadow: inset 0 -2px 0 0 #7aa2ff; }

.ui-action:hover{ filter: none; }
.ui-action.plan:hover{ background: #2c6957; }
.ui-action.apply:hover{ background: #3a4f77; }
.ui-action:active{ transform: translateY(1px); box-shadow: inset 0 2px 0 0 #101010; }
.ui-action:disabled{ opacity: .45; cursor:not-allowed; transform:none; }

.quickOnly{ display:none; }
body[data-ui-mode="quick"] .advancedOnly{ display:none !important; }
body[data-ui-mode="quick"] .quickOnly{ display:block; }
body[data-ui-mode="quick"] .shader-editor__layout{
  max-width: 640px;
}
body[data-ui-mode="quick"] .shader-editor__grid{ grid-template-columns: 1fr; }
body[data-ui-mode="quick"] .shader-editor__panel--prompt{
  grid-column: 1 / -1;
}
body[data-ui-mode="quick"] #promptTitle{ color: var(--text); }
body[data-ui-mode="quick"] .shader-editor__panel--shader{ display:none; }
body[data-ui-mode="quick"] .shader-editor__panel--feedback{
  display:block;
  grid-column: 1 / -1;
}
body[data-ui-mode="quick"] .shader-editor__request{
  font-size: 14px;
  line-height: 1.5;
}
body[data-ui-mode="quick"] #quickSendBtn{
  display:block;
}
body[data-ui-mode="quick"] .shader-editor__feedback .ui-panel__header{
  align-items:center;
}
body[data-ui-mode="quick"] #stStatus,
body[data-ui-mode="quick"] #stMeta{
  display:none;
}
body[data-ui-mode="quick"] #logDetails{
  display:none;
}
body[data-ui-mode="quick"] .shader-editor__feedback .fbMeta{
  gap:4px;
}

.shader-editor__feedback{ margin-top: 0; height: auto; min-height: unset; }
.shader-editor__overlay{
  background:rgba(16, 16, 16, 0.58);
}
.feedbackBody{ padding: 10px 12px; }
.ui-push-right{ margin-left:auto; }
.ui-divider--spaced{ margin: 10px 0; }
.resetDialogText{
  font-family:var(--mono);
  font-size:12px;
  color:var(--text);
  line-height:1.6;
}
.resetDialogHint{
  margin-top:8px;
  font-family:var(--mono);
  font-size:12px;
  color:var(--muted);
  line-height:1.5;
}
.fbMeta{
  margin: 0 0 10px 0;
  display:flex;
  flex-direction:column;
  gap: 4px;
}
.fbMetaName,
.fbMetaDesc{
  font-family: var(--mono);
  font-size: 12px;
  color: #c4c9d2;
  word-break: break-word;
  white-space: pre-wrap;
}

.muted{ color: var(--muted); font-family: var(--mono); font-size: 12px; }
.list{ margin:0; padding-left: 18px; color: #dde1e8; }
.list li{ margin: 6px 0; }
.okbox{ margin-top:10px; padding:10px 10px; border-radius: var(--r2); border:1px solid #4f8377; background: #1a2c28; color: #edf0f5; font-family: var(--mono); font-size:12px; }
.errbox{ margin-top:10px; padding:10px 10px; border-radius: var(--r2); border:1px solid #7d4b56; background: #2b1a20; color: #ffe3ea; font-family: var(--mono); font-size:12px; white-space: pre-wrap; }

details{ border-top:1px solid var(--border); }
summary{ cursor:pointer; padding: 10px 12px; font-family:var(--mono); font-size:12px; color:var(--muted); list-style:none; user-select:none; }
summary::-webkit-details-marker{ display:none; }

.logtabs{ display:flex; gap:6px; padding: 0 12px 10px; flex-wrap:wrap; }
.ui-logtab{ padding:0 10px; }
.ui-logtab.active{
  color: var(--text);
  border-color: #5f9a8d;
  background: #27423b;
}
.logpane{ display:none; }
.logpane.active{ display:block; }

.logWindow{
  height: 220px;
  overflow: auto;
  border: 1px solid var(--border);
  background: var(--surface-0);
  border-radius: var(--r2);
  margin: 0 var(--gap) var(--gap);
  padding: 10px;
}

#logDetails .logWindow pre{
  margin: 0;
  padding: 0;
  overflow: visible;
  max-height: none;
  border: none;
  background: transparent;
}

.timeline{
  font-family: var(--mono);
  font-size:12px;
  color: #d8dde6;
  white-space: pre-wrap;
}

dialog{
  border: 1px solid var(--border2);
  background: var(--surface-1);
  color: var(--text);
  border-radius: var(--r);
  padding: 0;
  width: min(560px, calc(100vw - 28px));
}
dialog::backdrop{ background: #121212; }
.ui-dialog__header{ padding: 12px 12px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ui-dialog__body{ padding: 12px 12px; }
.ui-dialog__header-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  min-width:0;
  flex:1 1 auto;
}
.ui-dialog__title{
  margin:0;
  font-size:14px;
  font-weight:900;
  color:var(--text);
  letter-spacing:.16px;
  font-family:var(--mono);
  text-transform:uppercase;
  line-height:1.15;
  text-align:left;
}
.ui-dialog__subtitle{
  margin:0;
  font-family:var(--sans);
  font-size:11px;
  line-height:1.4;
  color:var(--muted);
  text-align:left;
}
.ui-dialog__actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin-top:6px;
}
.ui-dialog__header .t{ font-family: var(--mono); font-weight:900; letter-spacing:.16px; }
.ui-dialog__button-row{ display:flex; gap:8px; justify-content:flex-end; padding-top:10px; }

.ui-dialog__close{
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.ui-dialog__close:hover{ border-color: var(--border2); color: var(--text); background: var(--surface-3); }
.ui-dialog__close:focus,
.ui-dialog__close:focus-visible{
  outline: none;
  box-shadow: none;
  border-color: var(--border2);
}

.ui-btn--sm.ghost{ background: var(--surface-2); }
.ui-btn--sm.primary{
  border-color: #5f9a8d;
  background: #27423b;
  color: var(--text);
}
.ui-btn--sm.primary:hover{ background: #2e4e46; border-color: #79b7aa; }
.ui-btn--sm.is-on{
  border-color: #5f9a8d;
  background: #27423b;
  color: var(--text);
}
.ui-btn--sm.is-on:hover{
  background: #2e4e46;
  border-color: #79b7aa;
}

.ui-btn--sm.danger{
  border-color: #975968;
  background: #352027;
  color: #ffdbe3;
}
.ui-btn--sm.danger:hover{
  border-color: #bb6e80;
  background: #41262e;
  color: #ffeef2;
}

.ui-btn--md{
  min-width:96px;
  min-height:var(--sz-field);
  padding:0 14px;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:var(--surface-1);
  color:var(--text);
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
  transition: background .08s ease, border-color .08s ease, color .08s ease, transform .04s ease;
}
.ui-btn--md:hover:not(:disabled){
  border-color:#4d5159;
  background:#2c2c2c;
  color:var(--text);
}
.ui-btn--md:active:not(:disabled){
  transform:translateY(1px);
}
.ui-btn--md:focus,
.ui-btn--md:focus-visible{
  outline:none;
  box-shadow:none;
  border-color:#5f9a8d;
}
.ui-btn--md:disabled{
  opacity:.72;
  cursor:default;
}
.ui-btn--md.ui-btn--icon{
  min-width:var(--sz-field);
  width:var(--sz-field);
  padding:0;
}

.ui-field-label{
  display:block;
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .16px;
  text-transform: uppercase;
}
.ui-input{
  width:100%;
  border:1px solid var(--border);
  background: var(--surface-0);
  color: var(--text);
  padding: 10px;
  border-radius: var(--r2);
  font-family: var(--mono);
  font-size: 12px;
  min-height: var(--sz-field);
}
.ui-input-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.ui-input-row .ui-input{
  flex:1 1 auto;
  min-width:0;
}
.ui-token-toggle{
  flex:0 0 36px;
  width:36px;
  height:36px;
  padding:0;
  border-radius:var(--r2);
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  line-height:1;
  transform: translateY(0);
  transition: transform .04s ease, background .05s ease, border-color .05s ease, color .05s ease;
}
.ui-token-toggle:hover{ border-color: var(--border2); color: var(--text); background: var(--surface-3); }
.ui-token-toggle:active{ transform: translateY(1px); }
.ui-token-toggle.is-active{
  color: var(--text);
  border-color: #4f8377;
  background: #1f3530;
}
.ui-token-preview-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
}
.ui-token-preview-row[hidden]{ display:none !important; }
.ui-token-preview{
  flex:0 1 auto;
  min-width:0;
  max-width:calc(100% - 24px);
  min-height:16px;
  font-family: var(--mono);
  font-size:12px;
  line-height:1.45;
  color: var(--muted);
  word-break: break-all;
}
.ui-token-preview[hidden]{ display:none !important; }
.ui-token-copy{
  flex:0 0 auto;
  min-width:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  color:var(--muted);
  cursor:pointer;
}
.ui-token-copy:hover{
  color:var(--text);
}
.ui-token-copy.copy-ok{
  color:#37f6c2;
}
.ui-token-copy.copy-fail{
  color:#ff8ea4;
}
select.ui-input{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  padding-right: 34px;
  background-color: var(--surface-0);
  background-image:
    linear-gradient(45deg, transparent 50%, #c3c8d1 50%),
    linear-gradient(135deg, #c3c8d1 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 11px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select.ui-input option{
  background: var(--surface-1);
  color: var(--text);
}
select.ui-input:focus,
select.ui-input:focus-visible{
  outline: none;
  box-shadow: inset 0 0 0 1px #676c76;
  border-color: var(--border2);
}
.ui-toggle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  min-height:48px;
  margin-top:12px;
  padding: 0 14px;
  border:1px solid var(--border);
  border-radius: var(--r2);
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  cursor:pointer;
  user-select:none;
  touch-action: manipulation;
}
.ui-toggle-row:hover{
  border-color: #4d5159;
  background: #2c2c2c;
}
.ui-toggle-row:focus-within{
  border-color: #5b6069;
  box-shadow: inset 0 0 0 1px #5b6069;
}
.ui-toggle-row__text{
  display:inline-flex;
  align-items:center;
  min-height:48px;
  padding-right:12px;
}
.ui-switch,
.ui-toggle-row input{
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  width:42px;
  height:24px;
  border-radius:999px;
  border:1px solid #676c76;
  background: #171717;
  position:relative;
  cursor:pointer;
  flex:0 0 auto;
  transition: background .12s ease, border-color .12s ease;
}
.ui-switch::before,
.ui-toggle-row input::before{
  content:'';
  position:absolute;
  top:2px;
  left:2px;
  width:18px;
  height:18px;
  border-radius:50%;
  background: #d8dde6;
  transition: transform .12s ease, background .12s ease;
}
.ui-switch:checked,
.ui-toggle-row input:checked{
  background: #27423b;
  border-color: #5f9a8d;
}
.ui-switch:checked::before,
.ui-toggle-row input:checked::before{
  transform: translateX(18px);
  background: var(--mint);
}
.ui-switch:focus,
.ui-switch:focus-visible,
.ui-toggle-row input:focus,
.ui-toggle-row input:focus-visible{
  outline:none;
  box-shadow:none;
}
.ui-dialog__note{
  margin-top:12px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.ui-btn--md.primary{
  border-color:#5f9a8d;
  background:#27423b;
  color:var(--text);
}
.ui-btn--md.primary:hover:not(:disabled){
  background:#2e4e46;
  border-color:#79b7aa;
}
.ui-btn--md.danger{
  border-color:#975968;
  background:#352027;
  color:#ffdbe3;
}
.ui-btn--md.danger:hover:not(:disabled){
  border-color:#bb6e80;
  background:#41262e;
  color:#ffeef2;
}
.ui-btn--md.ghost{
  background:var(--surface-2);
}

.no-select,
.no-select *{
  user-select:none;
  -webkit-user-select:none;
}
.no-select input,
.no-select textarea,
.no-select select,
.no-select button,
.no-select [contenteditable="true"]{
  user-select:text;
  -webkit-user-select:text;
}

.ui-settings-screen{
  width:100%;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  flex:1 1 auto;
  min-height:0;
  justify-content:center;
  gap:12px;
  padding:20px 16px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.ui-settings-screen > *{
  flex-shrink:0;
}
.ui-settings-screen.is-overflow{
  justify-content:flex-start;
}
.ui-settings-screen.shader-editor__settings{
  min-height:calc(var(--vrch-safe-vh, 1vh) * 100);
}
.ui-settings-card{
  width:min(680px, 100%);
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:var(--r);
  overflow:hidden;
}
.ui-settings-card--viewer{
  width:min(468px, 100%);
}
.ui-settings-screen--viewer .ui-tip-text,
.ui-settings-screen--viewer .ui-shortcut-box{
  width:min(468px, 100%);
}
.ui-settings-header{
  padding:12px;
  border-bottom:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:4px;
}
.ui-settings-title{
  margin:0;
  color:var(--text);
  font-family:var(--mono);
  font-size:16px;
  font-weight:900;
  letter-spacing:.16px;
  line-height:1.15;
  text-transform:uppercase;
}
.ui-settings-subtitle{
  margin:0;
  color:var(--muted);
  font-family:var(--sans);
  font-size:12px;
  line-height:1.45;
}
.ui-subtitle-link{
  color:var(--text);
  text-decoration:none;
  border-bottom:1px solid var(--border2);
  padding-bottom:1px;
  transition:color .12s ease, border-color .12s ease, opacity .12s ease;
}
.ui-subtitle-link:hover,
.ui-subtitle-link:focus-visible{
  color:var(--mint);
  border-color:var(--mint);
  outline:none;
}
.ui-settings-body{
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ui-settings-row{
  width:100%;
}
.ui-settings-row--split{
  display:grid;
  grid-template-columns:minmax(150px, 190px) minmax(0, 1fr);
  gap:10px;
  align-items:center;
}
.ui-settings-row--stack{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.ui-settings-label{
  color:var(--muted);
  font-family:var(--mono);
  font-size:12px;
  line-height:1.35;
}
.ui-settings-copy{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}
.ui-settings-control{
  min-width:0;
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
}
.ui-settings-control > .ui-input,
.ui-settings-control > select.ui-input,
.ui-settings-control > input.ui-input{
  width:100%;
}
.ui-color-input{
  padding:4px;
  min-height:var(--sz-field);
}
.ui-range{
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  height:34px;
  cursor:pointer;
}
.ui-range::-webkit-slider-runnable-track{
  height:8px;
  border:1px solid #3a3e45;
  border-radius:var(--r2);
  background:#24272d;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), inset 0 1px 3px rgba(0,0,0,0.45);
}
.ui-range::-moz-range-track{
  height:8px;
  border:1px solid #3a3e45;
  border-radius:var(--r2);
  background:#24272d;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), inset 0 1px 3px rgba(0,0,0,0.45);
}
.ui-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:22px;
  height:34px;
  margin-top:-14px;
  border:1px solid #121419;
  border-radius:var(--r2);
  background:#eef2f7;
  box-shadow:0 0 0 1px rgba(255,255,255,0.08), 0 3px 8px rgba(0,0,0,0.5);
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.ui-range::-moz-range-thumb{
  width:22px;
  height:34px;
  border:1px solid #121419;
  border-radius:var(--r2);
  background:#eef2f7;
  box-shadow:0 0 0 1px rgba(255,255,255,0.08), 0 3px 8px rgba(0,0,0,0.5);
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.ui-range:hover::-webkit-slider-thumb{
  background:#ffffff;
  box-shadow:0 0 0 1px rgba(255,255,255,0.14), 0 4px 10px rgba(0,0,0,0.56);
  transform:scale(1.04);
}
.ui-range:hover::-moz-range-thumb{
  background:#ffffff;
  box-shadow:0 0 0 1px rgba(255,255,255,0.14), 0 4px 10px rgba(0,0,0,0.56);
  transform:scale(1.04);
}
.ui-range:active::-webkit-slider-thumb{
  background:#ffffff;
  transform:scale(.98);
}
.ui-range:active::-moz-range-thumb{
  background:#ffffff;
  transform:scale(.98);
}
.ui-range:hover::-webkit-slider-runnable-track{
  background:#2a2d33;
}
.ui-range:hover::-moz-range-track{
  background:#2a2d33;
}
.ui-range:active::-webkit-slider-runnable-track{
  background:#30343b;
  border-color:#4d5159;
}
.ui-range:active::-moz-range-track{
  background:#30343b;
  border-color:#4d5159;
}
.ui-range.ui-range--compact,
.ui-range.ui-range--hard{
  height:22px;
}
.ui-range.ui-range--compact::-webkit-slider-runnable-track,
.ui-range.ui-range--hard::-webkit-slider-runnable-track{
  height:8px;
  border:1px solid #343840;
  border-radius:var(--r2);
  background:#1e2127;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), inset 0 1px 3px rgba(0,0,0,0.45);
}
.ui-range.ui-range--compact::-moz-range-track,
.ui-range.ui-range--hard::-moz-range-track{
  height:8px;
  border:1px solid #343840;
  border-radius:var(--r2);
  background:#1e2127;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), inset 0 1px 3px rgba(0,0,0,0.45);
}
.ui-range.ui-range--compact::-webkit-slider-thumb,
.ui-range.ui-range--hard::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:22px;
  height:22px;
  margin-top:-8px;
  border:1px solid #121419;
  border-radius:var(--r2);
  background:#eef2f7;
  box-shadow:0 0 0 1px rgba(255,255,255,0.08), 0 3px 8px rgba(0,0,0,0.5);
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.ui-range.ui-range--compact::-moz-range-thumb,
.ui-range.ui-range--hard::-moz-range-thumb{
  width:22px;
  height:22px;
  border:1px solid #121419;
  border-radius:var(--r2);
  background:#eef2f7;
  box-shadow:0 0 0 1px rgba(255,255,255,0.08), 0 3px 8px rgba(0,0,0,0.5);
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.ui-range.ui-range--compact:hover::-webkit-slider-thumb,
.ui-range.ui-range--hard:hover::-webkit-slider-thumb{
  background:#ffffff;
  box-shadow:0 0 0 1px rgba(255,255,255,0.14), 0 4px 10px rgba(0,0,0,0.56);
  transform:scale(1.04);
}
.ui-range.ui-range--compact:hover::-moz-range-thumb,
.ui-range.ui-range--hard:hover::-moz-range-thumb{
  background:#ffffff;
  box-shadow:0 0 0 1px rgba(255,255,255,0.14), 0 4px 10px rgba(0,0,0,0.56);
  transform:scale(1.04);
}
.ui-range.ui-range--compact:active::-webkit-slider-thumb,
.ui-range.ui-range--hard:active::-webkit-slider-thumb{
  background:#ffffff;
  transform:scale(.98);
}
.ui-range.ui-range--compact:active::-moz-range-thumb,
.ui-range.ui-range--hard:active::-moz-range-thumb{
  background:#ffffff;
  transform:scale(.98);
}
.ui-range.ui-range--compact:hover::-webkit-slider-runnable-track,
.ui-range.ui-range--hard:hover::-webkit-slider-runnable-track{
  background:#24282f;
}
.ui-range.ui-range--compact:hover::-moz-range-track,
.ui-range.ui-range--hard:hover::-moz-range-track{
  background:#24282f;
}
.ui-range.ui-range--compact:active::-webkit-slider-runnable-track,
.ui-range.ui-range--hard:active::-webkit-slider-runnable-track{
  background:#2a2e36;
  border-color:#4d5159;
}
.ui-range.ui-range--compact:active::-moz-range-track,
.ui-range.ui-range--hard:active::-moz-range-track{
  background:#2a2e36;
  border-color:#4d5159;
}
.ui-settings-control--range{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  align-items:center;
  gap:10px;
}
.player-progress > input[type="range"]{
  flex:1 1 auto;
  min-width:140px;
  height:18px;
  margin:0;
  -webkit-appearance:none;
  appearance:none;
  background:transparent;
  cursor:pointer;
}
.player-progress > input[type="range"]::-webkit-slider-runnable-track{
  height:8px;
  border:1px solid #3a3e45;
  border-radius:var(--r2);
  background:#24272d;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), inset 0 1px 3px rgba(0,0,0,0.45);
}
.player-progress > input[type="range"]::-moz-range-track{
  height:8px;
  border:1px solid #3a3e45;
  border-radius:var(--r2);
  background:#24272d;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), inset 0 1px 3px rgba(0,0,0,0.45);
}
.player-progress > input[type="range"]:focus-visible{
  outline:2px solid rgba(223,231,244,0.9);
  outline-offset:2px;
}
.player-progress > input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:22px;
  height:34px;
  margin-top:-13px;
  border:1px solid #121419;
  border-radius:var(--r2);
  background:#eef2f7;
  box-shadow:0 0 0 1px rgba(255,255,255,0.08), 0 3px 8px rgba(0,0,0,0.5);
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.player-progress > input[type="range"]:hover::-webkit-slider-thumb{
  background:#ffffff;
  box-shadow:0 0 0 1px rgba(255,255,255,0.14), 0 4px 10px rgba(0,0,0,0.56);
  transform:scale(1.04);
}
.player-progress > input[type="range"]:active::-webkit-slider-thumb{
  background:#ffffff;
  transform:scale(.98);
}
.player-progress > input[type="range"]::-moz-range-thumb{
  width:22px;
  height:34px;
  border:1px solid #121419;
  border-radius:var(--r2);
  background:#eef2f7;
  box-shadow:0 0 0 1px rgba(255,255,255,0.08), 0 3px 8px rgba(0,0,0,0.5);
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.player-progress > input[type="range"]:hover::-moz-range-thumb{
  background:#ffffff;
  box-shadow:0 0 0 1px rgba(255,255,255,0.14), 0 4px 10px rgba(0,0,0,0.56);
  transform:scale(1.04);
}
.player-progress > input[type="range"]:active::-moz-range-thumb{
  background:#ffffff;
  transform:scale(.98);
}
.ui-settings-value{
  color:var(--text);
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
.ui-settings-row--server .ui-settings-control{
  position:relative;
  display:block;
}
.ui-settings-row--server .ui-input{
  padding-right:30px;
}
.ui-settings-status-indicator{
  position:absolute;
  top:0;
  bottom:0;
  right:10px;
  margin:auto 0;
  width:10px;
  height:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:currentColor;
  color:transparent;
  font-size:0;
  line-height:0;
  pointer-events:none;
}
.ui-settings-status-indicator.is-checking{
  color:var(--status-idle);
  animation:ui-status-breathe 1.4s ease-in-out infinite;
}
.ui-settings-status-indicator.is-ok{
  color:var(--status-online);
}
.ui-settings-status-indicator.is-error{
  color:var(--status-error);
}
.ui-settings-disclosure{
  margin-top:2px;
  border-top:1px solid var(--border);
}
.ui-settings-disclosure > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 0 0;
  color:var(--muted);
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.12px;
  text-transform:uppercase;
}
.ui-settings-disclosure > summary::after{
  content:'';
  width:0;
  height:0;
  flex:0 0 auto;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-left:7px solid currentColor;
  transform:rotate(0deg);
  transform-origin:center;
  transition:transform .12s ease, color .12s ease;
  opacity:.9;
}
.ui-settings-disclosure > summary::-webkit-details-marker{
  display:none;
}
.ui-settings-disclosure[open] > summary{
  color:var(--text);
  margin-bottom:8px;
}
.ui-settings-disclosure[open] > summary::after{
  transform:rotate(90deg);
}
.ui-settings-group{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-top:8px;
}
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items){
  --ui-viewer-advanced-row-height:38px;
  gap:4px;
  padding-top:4px;
}
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items) .ui-toggle-row{
  min-height:var(--ui-viewer-advanced-row-height);
  margin-top:0;
  padding:0 10px;
}
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items) .ui-settings-row--split{
  min-height:var(--ui-viewer-advanced-row-height);
  margin-top:0;
  padding:0 10px;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:var(--surface-2);
  grid-template-columns:minmax(0, 1fr) minmax(152px, 196px);
  gap:8px;
  align-items:center;
}
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items) .ui-settings-row--split:hover{
  border-color:#4d5159;
  background:#2c2c2c;
}
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items) .ui-settings-row--split:focus-within{
  border-color:#5b6069;
  box-shadow:inset 0 0 0 1px #5b6069;
}
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items) .ui-settings-row--split > .ui-settings-label{
  display:flex;
  align-items:center;
  min-height:var(--ui-viewer-advanced-row-height);
}
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items) .ui-settings-row--split > .ui-settings-label.ui-settings-copy{
  align-items:flex-start;
  justify-content:center;
  text-align:left;
}
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items) .ui-settings-row--split > .ui-settings-control{
  min-width:0;
  min-height:var(--ui-viewer-advanced-row-height);
}
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items) .ui-settings-row--split > .ui-settings-control > .ui-input,
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items) .ui-settings-row--split > .ui-settings-control > select.ui-input,
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items) .ui-settings-row--split > .ui-settings-control > input.ui-input{
  min-height:34px;
  height:34px;
  padding-top:0;
  padding-bottom:0;
  line-height:34px;
}
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items) .ui-settings-row--split > .ui-settings-control > select.ui-input{
  padding-right:34px;
  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 11px) calc(50% - 2px);
}
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items) .ui-settings-row--split > .ui-settings-control > .ui-color-input{
  padding:4px;
  line-height:normal;
}
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items) .ui-settings-row--split > .ui-settings-control > .ui-range,
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items) .ui-settings-row--split > .ui-settings-control.ui-settings-control--range > .ui-range{
  height:22px;
}
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items) .ui-settings-row--split > .ui-settings-control > .ui-range::-webkit-slider-runnable-track,
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items) .ui-settings-row--split > .ui-settings-control.ui-settings-control--range > .ui-range::-webkit-slider-runnable-track{
  height:8px;
  border:1px solid #343840;
  border-radius:var(--r2);
  background:#1e2127;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), inset 0 1px 3px rgba(0,0,0,0.45);
}
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items) .ui-settings-row--split > .ui-settings-control > .ui-range::-moz-range-track,
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items) .ui-settings-row--split > .ui-settings-control.ui-settings-control--range > .ui-range::-moz-range-track{
  height:8px;
  border:1px solid #343840;
  border-radius:var(--r2);
  background:#1e2127;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), inset 0 1px 3px rgba(0,0,0,0.45);
}
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items) .ui-settings-row--split > .ui-settings-control > .ui-range::-webkit-slider-thumb,
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items) .ui-settings-row--split > .ui-settings-control.ui-settings-control--range > .ui-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:22px;
  height:22px;
  margin-top:-8px;
  border:1px solid #121419;
  border-radius:var(--r2);
  background:#eef2f7;
  box-shadow:0 0 0 1px rgba(255,255,255,0.08), 0 3px 8px rgba(0,0,0,0.5);
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
}
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items) .ui-settings-row--split > .ui-settings-control > .ui-range::-moz-range-thumb,
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items) .ui-settings-row--split > .ui-settings-control.ui-settings-control--range > .ui-range::-moz-range-thumb{
  width:22px;
  height:22px;
  border:1px solid #121419;
  border-radius:var(--r2);
  background:#eef2f7;
  box-shadow:0 0 0 1px rgba(255,255,255,0.08), 0 3px 8px rgba(0,0,0,0.5);
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
}
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items) .ui-settings-row--split > .ui-settings-control > .ui-range:hover::-webkit-slider-thumb,
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items) .ui-settings-row--split > .ui-settings-control.ui-settings-control--range > .ui-range:hover::-webkit-slider-thumb{
  background:#ffffff;
  box-shadow:0 0 0 1px rgba(255,255,255,0.14), 0 4px 10px rgba(0,0,0,0.56);
  transform:scale(1.04);
}
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items) .ui-settings-row--split > .ui-settings-control > .ui-range:hover::-moz-range-thumb,
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items) .ui-settings-row--split > .ui-settings-control.ui-settings-control--range > .ui-range:hover::-moz-range-thumb{
  background:#ffffff;
  box-shadow:0 0 0 1px rgba(255,255,255,0.14), 0 4px 10px rgba(0,0,0,0.56);
  transform:scale(1.04);
}
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items) .ui-settings-row--split > .ui-settings-control > .ui-range:active::-webkit-slider-thumb,
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items) .ui-settings-row--split > .ui-settings-control.ui-settings-control--range > .ui-range:active::-webkit-slider-thumb{
  background:#ffffff;
  transform:scale(.98);
}
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items) .ui-settings-row--split > .ui-settings-control > .ui-range:active::-moz-range-thumb,
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items) .ui-settings-row--split > .ui-settings-control.ui-settings-control--range > .ui-range:active::-moz-range-thumb{
  background:#ffffff;
  transform:scale(.98);
}
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items) .ui-toggle-row__text{
  min-height:var(--ui-viewer-advanced-row-height);
  padding-right:8px;
}
.ui-settings-group--advanced-items .ui-toggle-row__text.ui-settings-copy{
  align-items:flex-start;
  justify-content:center;
  text-align:left;
}
.live-console-settings__section.ui-settings-group--advanced-items{
  gap:6px;
}
.live-console-settings__section.ui-settings-group--advanced-items .ui-settings-copy{
  gap:0;
}
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items) .ui-toggle-row input{
  width:40px;
  height:24px;
}
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items) .ui-toggle-row input::before{
  top:50%;
  left:2px;
  width:16px;
  height:16px;
  transform:translateY(-50%);
}
:is(.ui-settings-screen--viewer .ui-settings-group, .ui-settings-group--advanced-items) .ui-toggle-row input:checked::before{
  transform:translate(18px, -50%);
}
.ui-settings-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding-top:4px;
  flex-wrap:wrap;
}
.ui-settings-screen--viewer .ui-settings-actions{
  padding-top:8px;
}
.ui-settings-screen--viewer .ui-settings-actions .ui-btn--md{
  width:100%;
  text-transform:uppercase;
}
.ui-tip-text{
  width:min(680px, 100%);
  color:var(--muted);
  font-family:var(--sans);
  font-size:12px;
  line-height:1.45;
  text-align:center;
}
.ui-shortcut-box{
  width:min(680px, 100%);
  color:var(--muted);
  font-family:var(--mono);
  font-size:12px;
  line-height:1.45;
}
.ui-shortcut-box__title{
  margin:0 0 8px;
  color:var(--text);
  font-family:var(--mono);
  font-size:13px;
  font-weight:900;
  letter-spacing:.16px;
  text-transform:uppercase;
}
.ui-shortcut-list{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.ui-shortcut-list li{
  margin:0;
}
.ui-shortcut-details{
  margin-top:4px;
  padding-left:12px;
}
.ui-shortcut-details > summary{
  cursor:pointer;
  color:var(--muted);
}
.ui-shortcut-details-lines{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding-top:6px;
}

body.sender-page,
body.prompt-mode{
  /* Sender panes must scroll vertically at the document level.
     Keep horizontal swipe free for outer live-console rows instead of trapping it
     inside a full-screen inner scroll container. */
  width:100%;
  max-width:100%;
  min-height:100vh;
  min-height:calc(var(--vrch-safe-vh, 1vh) * 100);
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:auto;
  overscroll-behavior-y:contain;
}

.ui-settings-card--sender{
  width:min(520px, 100%);
}
.ui-settings-screen--sender .ui-tip-text,
.ui-settings-screen--sender .ui-shortcut-box{
  width:min(520px, 100%);
}

.ui-sender-screen{
  /* Alignment shell only: center when there is spare height, top-align on overflow.
     Do not make this the scrolling layer. */
  position:relative;
  width:100%;
  max-width:100%;
  height:100vh;
  height:calc(var(--vrch-safe-vh, 1vh) * 100);
  min-height:100vh;
  min-height:calc(var(--vrch-safe-vh, 1vh) * 100);
  flex:0 0 auto;
  padding:20px 16px 40px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  overflow:visible;
}
.ui-sender-screen.is-overflow{
  justify-content:flex-start;
}
.ui-sender-screen > *{
  flex-shrink:0;
}
.ui-sender-shell{
  width:min(1080px, 100%);
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}
.ui-sender-shell--wide{
  width:min(1200px, 100%);
}
.ui-sender-header{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.ui-sender-header__row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.ui-sender-title{
  margin:0;
  color:var(--text);
  font-family:var(--mono);
  font-size:18px;
  font-weight:900;
  letter-spacing:.16px;
  line-height:1.15;
  text-transform:uppercase;
}
.ui-sender-subtitle{
  margin:0;
  color:var(--muted);
  font-family:var(--sans);
  font-size:13px;
  line-height:1.5;
}
.ui-sender-subtitle span{
  color:var(--mint);
}
.ui-inline-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
  min-height:24px;
}
.ui-inline-status__label{
  color:var(--muted);
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14px;
  line-height:1;
  text-transform:uppercase;
}
.ui-chip-row,
.ui-runtime-chip-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.ui-runtime-chip-row--equal{
  display:inline-grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(84px, 1fr);
  align-items:stretch;
}
.ui-runtime-chip,
.ui-runtime-icon-btn{
  min-height:var(--sz-btn-sm);
  min-width:var(--sz-btn-sm);
  padding:0 10px;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:var(--surface-2);
  color:var(--muted);
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
  text-transform:uppercase;
  white-space:nowrap;
  transform:translateY(0);
  transition:transform .04s ease, background .08s ease, border-color .08s ease, color .08s ease;
}
.ui-runtime-badge{
  min-height:10px;
  min-width:22px;
  max-width:100%;
  padding:0 2px;
  border:1px solid #353942;
  border-radius:var(--r2);
  background:#181818;
  color:#cfcfcf;
  font-family:var(--mono);
  font-size:7px;
  font-weight:700;
  letter-spacing:.12px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-transform:uppercase;
  cursor:pointer;
  transform:translateY(0);
  transition:transform .04s ease, background .08s ease, border-color .08s ease, color .08s ease, opacity .15s ease;
}
.ui-reset-btn{
  width:46px;
  min-width:46px;
  height:30px;
  min-height:30px;
  padding:0 8px;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:var(--surface-2);
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transform:translateY(0);
  transition:transform .04s ease, background .08s ease, border-color .08s ease, color .08s ease;
}
.ui-reset-btn:hover{
  border-color:#4d5159;
  background:#2c2c2c;
  color:var(--text);
}
.ui-reset-btn:active{
  transform:translateY(1px);
}
.ui-reset-btn i{
  font-size:12px;
}
.ui-runtime-chip:hover,
.ui-runtime-icon-btn:hover,
.ui-runtime-badge:hover{
  border-color:#4d5159;
  background:#2c2c2c;
  color:var(--text);
}
.ui-runtime-chip:active,
.ui-runtime-icon-btn:active,
.ui-runtime-badge:active{
  transform:translateY(1px);
}
.ui-runtime-chip[aria-pressed="true"],
.ui-runtime-chip.active,
.ui-runtime-chip.is-active,
.ui-runtime-chip.is-selected,
.ui-runtime-chip[aria-checked="true"],
.ui-runtime-icon-btn.active,
.ui-runtime-icon-btn.is-active,
.ui-runtime-icon-btn.is-selected,
.ui-runtime-icon-btn[aria-pressed="true"]{
  border-color:#5f9a8d;
  background:#305249;
  color:var(--text);
  box-shadow:inset 0 0 0 1px rgba(55,246,194,0.10);
}
.ui-runtime-chip-row--equal .ui-runtime-chip--mode{
  width:100%;
  min-width:0;
}
.ui-runtime-icon-btn{
  width:var(--sz-btn-sm);
  padding:0;
}
.ui-runtime-action-btn{
  min-height:42px;
  padding:0 14px;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:var(--surface-2);
  color:var(--text);
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
  white-space:nowrap;
  transform:translateY(0);
  transition:transform .04s ease, background .08s ease, border-color .08s ease, color .08s ease;
}
.ui-runtime-action-btn:hover:not(:disabled){
  border-color:#4d5159;
  background:#2c2c2c;
  color:var(--text);
}
.ui-runtime-action-btn:active:not(:disabled){
  transform:translateY(1px);
}
.ui-runtime-action-btn:disabled{
  opacity:.46;
  cursor:not-allowed;
}
.ui-runtime-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:32px;
  padding:0 10px;
  border:1px solid #3e3e3e;
  border-radius:var(--r2);
  background:#171717;
  color:#cccccc;
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14px;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
}
.ui-runtime-status[data-status="disconnected"]{
  border-color:#3e3e3e;
  background:#151515;
  color:#989898;
}
.ui-runtime-status[data-status="connected"]{
  border-color:#5f9a8d;
  background:#223730;
  color:#e8f1ee;
}
.ui-runtime-status[data-status="virtual"]{
  border-color:#474747;
  background:#181818;
  color:#cfcfcf;
}
.send-btn{
  min-width:104px;
  min-height:var(--sz-field);
  padding:0 20px;
  border:1px solid #5f9a8d;
  border-radius:var(--r2);
  background:#27423b;
  color:var(--text);
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.16px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
  text-transform:uppercase;
  transform:translateY(0);
  position:relative;
  overflow:hidden;
  transition:transform .04s ease, background .08s ease, border-color .08s ease, color .08s ease;
}
.send-btn:hover{
  border-color:#79b7aa;
  background:#2e4e46;
}
.send-btn:active{
  transform:translateY(1px);
}
.send-btn.sent-success{
  border-color:#3e7f6c;
  background:#1d332d;
  color:var(--text);
}
.send-btn__label{
  grid-column:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  white-space:nowrap;
}
.send-btn__content{
  display:grid;
  grid-template-columns:12px auto 12px;
  column-gap:6px;
  align-items:center;
  justify-items:center;
}
.send-btn__content::before{
  content:"";
  grid-column:1;
  width:10px;
  height:8px;
  display:block;
}
.send-btn__check{
  grid-column:3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:10px;
  height:8px;
  opacity:0;
  transform:scale(.85);
  transform-origin:center;
  pointer-events:none;
}
.send-btn__check svg{
  display:block;
  width:10px;
  height:8px;
}
.send-btn__check path{
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.send-btn.sent-success .send-btn__label{
  transform:none;
}
.send-btn.sent-success .send-btn__check{
  opacity:1;
  transform:scale(1);
  animation:sent-pop .6s ease;
}
#imageSettingsSendBtn{
  position:relative;
  overflow:hidden;
  box-sizing:border-box;
}
#imageSettingsSendBtn.send-btn--hold{
  background-image:linear-gradient(90deg, rgba(55,246,194,0.26), rgba(122,162,255,0.22));
  background-repeat:no-repeat;
  background-position:left center;
  background-size:0% 100%;
  animation:send-hold-fill var(--hold-duration) linear forwards;
}
#imageSettingsSendBtn.send-btn--hold:active{
  transform:none;
}
@keyframes send-hold-fill{
  from{ background-size:0% 100%; }
  to{ background-size:100% 100%; }
}
.ui-sender-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:8px 0;
}
.ui-sender-toolbar .ui-runtime-toolbar__left,
.ui-sender-toolbar .ui-runtime-toolbar__center,
.ui-sender-toolbar .ui-runtime-toolbar__right{
  display:flex;
  align-items:center;
  gap:8px;
}
.ui-sender-toolbar .ui-runtime-toolbar__center{
  flex:1 1 auto;
  justify-content:center;
}
.ui-sender-toolbar .ui-runtime-toolbar__right{
  justify-content:flex-end;
}
.ui-sender-toolbar.ui-sender-toolbar--balanced{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.ui-runtime-toolbar{
  width:100%;
  margin:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:10px 12px;
}
.ui-runtime-toolbar__left,
.ui-runtime-toolbar__center,
.ui-runtime-toolbar__right{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.ui-runtime-toolbar__left{
  justify-content:flex-start;
  justify-self:start;
}
.ui-runtime-toolbar__center{
  justify-content:center;
  justify-self:center;
}
.ui-runtime-toolbar__right{
  justify-content:flex-end;
  justify-self:end;
}
@media (min-width: 641px){
  .ui-sender-toolbar.ui-sender-toolbar--balanced{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    gap:12px;
  }
  .ui-sender-toolbar.ui-sender-toolbar--balanced .ui-runtime-toolbar__left,
  .ui-sender-toolbar.ui-sender-toolbar--balanced .ui-runtime-toolbar__center,
  .ui-sender-toolbar.ui-sender-toolbar--balanced .ui-runtime-toolbar__right{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .ui-sender-toolbar.ui-sender-toolbar--balanced .ui-runtime-toolbar__left{
    justify-content:flex-start;
    justify-self:start;
  }
  .ui-sender-toolbar.ui-sender-toolbar--balanced .ui-runtime-toolbar__center{
    justify-content:center;
    justify-self:center;
    width:auto;
  }
  .ui-sender-toolbar.ui-sender-toolbar--balanced .ui-runtime-toolbar__right{
    justify-content:flex-end;
    justify-self:end;
  }
}
.overlay-tool-btn{
  position:absolute;
  top:8px;
  right:8px;
  z-index:4;
  width:36px;
  height:36px;
  padding:0;
  border:1px solid #404040;
  border-radius:var(--r2);
  background:#161616;
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transform:translateY(0);
  transition:transform .04s ease, background .08s ease, border-color .08s ease, color .08s ease;
}
.overlay-tool-btn:hover{
  border-color:#5a5a5a;
  background:#202020;
}
.overlay-tool-btn:active{
  transform:translateY(1px);
}
.overlay-tool-btn i{
  font-size:16px;
  pointer-events:none;
}
.overlay-tool-btn.left{
  left:8px;
  right:auto;
}
.overlay-tool-btn.bottom{
  top:auto;
  bottom:8px;
}
.gamepad-index-toolbar{
  display:flex;
  align-items:center;
  gap:10px;
}
.gamepad-index-toolbar .gamepad-index-chips{
  display:flex;
  gap:8px;
  justify-content:flex-start;
  flex-wrap:wrap;
}
.gamepad-index-toolbar .gamepad-index-chip{
  min-width:44px;
  flex:0 0 auto;
}
.gamepad-index-toolbar .gamepad-index-chip.connected{
  border-color:#5f9a8d;
  color:var(--text);
}
.gamepad-index-toolbar .gamepad-index-chip.virtual{
  opacity:.8;
}
.gamepad-index-toolbar .gamepad-index-chip.virtual.active,
.gamepad-index-toolbar .gamepad-index-chip.virtual[aria-checked="true"]{
  opacity:1;
}
.controller-wrapper{
  display:flex;
  flex-direction:column;
  gap:16px;
  width:100%;
}
.controller-stage{
  background:#101010;
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:16px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02);
  touch-action:none;
}
.controller-stage svg{
  width:100%;
  height:auto;
  max-width:520px;
  margin:0 auto;
  display:block;
}
.controller-mode{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
.controller-status-group{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:0 auto;
}
.ui-runtime-log{
  background:var(--surface-3);
  background-image:none;
  border:1px solid var(--border);
  border-radius:var(--r2);
  padding:10px 12px;
  max-height:240px;
  overflow:auto;
  font-family:var(--mono);
  font-size:12px;
  line-height:1.45;
  color:#c6cbc8;
  white-space:pre;
  box-shadow:none;
}
.ui-runtime-log.hidden{
  display:none !important;
}
.ui-runtime-log--textarea{
  width:100%;
  min-height:220px;
  resize:vertical;
  outline:none;
}
.ui-runtime-log--plain{
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  box-shadow:none;
}
.ui-runtime-log:focus-visible,
.ui-runtime-log--textarea:focus-visible{
  border-color:#5f9a8d;
}
.gamepad-index-toolbar,
.midi-device-toolbar{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
}
.gamepad-sender-page .gamepad-index-chips,
.midi-sender-page .midi-device-chips{
  gap:6px;
}
.gamepad-sender-page .ui-runtime-icon-btn,
.midi-sender-page .ui-runtime-icon-btn,
.midi-sender-page .midi-toolbar-permission-btn,
.gamepad-sender-page .gamepad-index-chip,
.midi-sender-page .midi-device-chip,
.gamepad-sender-page .ui-runtime-chip--mode,
.midi-sender-page .ui-runtime-chip--mode{
  min-height:32px;
}
.gamepad-sender-page .gamepad-index-chip,
.midi-sender-page .midi-device-chip{
  min-width:40px;
  padding:0 10px;
}
.midi-sender-page .midi-toolbar-permission-btn,
.midi-sender-page #midiPermissionEntryBtn{
  width:auto;
  min-width:0;
  padding:0 12px;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.gamepad-sender-page .ui-runtime-toolbar .send-btn,
.midi-sender-page .ui-runtime-toolbar .send-btn{
  min-width:112px;
}
.controller-overlay path:not(.controller-body),
.controller-overlay rect,
.controller-overlay circle{
  stroke:#666666;
  stroke-width:2;
  fill:none;
  pointer-events:all;
}
.controller-overlay .controller-body{
  fill:#222222;
  stroke:none;
}
.controller-overlay circle.stick-thumb{
  stroke:#7e9d94;
  stroke-width:2;
}
.controller-overlay circle.stick-thumb.active{
  fill:rgba(95,154,141,0.28);
}
.ui-runtime-log-wrap{
  width:100%;
}
.gyro-controls{
  width:min(1200px, 100%);
  margin:8px 0;
}
.gyro-controls .ui-runtime-toolbar__left,
.gyro-controls .ui-runtime-toolbar__center,
.gyro-controls .ui-runtime-toolbar__right{
  flex-wrap:wrap;
}
.gyro-controls #togglePauseBtn{
  min-width:128px;
}
.gyro-controls #gyroPermStatus{
  color:var(--muted);
  font-family:var(--sans);
  font-size:12px;
  line-height:1.45;
}
.gyro-sender__canvas-host{
  width:min(1200px, 100%);
  min-height:360px;
  height:calc(100vh - 220px);
  border:1px solid var(--border);
  border-radius:var(--r);
  background:#111111;
  overflow:hidden;
}
.image-dropzone{
  flex:1 1 auto;
  height:420px;
  background:#111111;
  border:1px solid var(--border);
  border-radius:var(--r);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  cursor:pointer;
  overflow:hidden;
}
.image-dropzone.dragover{
  border-color:#4d5159;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.04);
}
.image-dropzone .preview-info{
  position:absolute;
  left:50%;
  bottom:8px;
  transform:translateX(-50%);
  padding:6px 10px;
  border:1px solid #383838;
  border-radius:var(--r2);
  background:#121212;
  color:var(--text);
  font-family:var(--mono);
  font-size:11px;
  line-height:1.2;
  pointer-events:none;
  white-space:nowrap;
}
.image-dropzone .preview-info.hidden{
  display:none;
}
.hidden-input{
  display:none !important;
}
.image-websocket-sender-page .image-sender-shell{
  gap:14px;
  padding:0;
  border:0;
  background:transparent;
}
.image-websocket-sender-page #imagePane{
  display:block;
}
.image-websocket-sender-page #videoPane,
.image-websocket-sender-page #screenPane,
.image-websocket-sender-page #cameraPane{
  display:none;
}
.image-websocket-sender-page .tabs.ui-tabs{
  gap:0;
  padding:0;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:#141414;
  overflow:hidden;
}
.image-websocket-sender-page .tab-btn.ui-tab{
  flex:1 1 0;
  min-width:0;
  height:40px;
  padding:0 12px;
  border:0;
  border-left:1px solid #2a2a2a;
  border-radius:0;
  background:transparent;
  color:var(--muted);
  font-family:var(--sans);
  font-size:13px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  gap:6px;
}
.image-websocket-sender-page .tab-btn.ui-tab:first-child{
  border-left:0;
}
.image-websocket-sender-page .tab-btn.ui-tab::after{
  height:0;
}
.image-websocket-sender-page .tab-btn.ui-tab:hover{
  background:#1f1f1f;
  border-color:#2a2a2a;
}
.image-websocket-sender-page .tab-btn.ui-tab.active{
  background:#27423b;
  border-color:#5f9a8d;
  color:var(--text);
}
.image-websocket-sender-page .tab-btn.ui-tab.active + .tab-btn.ui-tab{
  border-left-color:#5f9a8d;
}
.image-websocket-sender-page .tab-icon{
  font-size:14px;
}
.image-websocket-sender-page .tab-label{
  line-height:1;
}
.image-websocket-sender-page .image-dropzone .drop-hint{
  color:#bdbdbd;
  font-size:14px;
  pointer-events:none;
  cursor:pointer;
}
.image-websocket-sender-page .image-dropzone .image-preview{
  width:100%;
  height:100%;
  object-fit:contain;
  display:none;
}
.image-websocket-sender-page .image-dropzone .image-clear-btn{
  display:none;
}
.image-websocket-sender-page .camera-zone{
  cursor:default;
}
.image-websocket-sender-page #videoDropzone,
.image-websocket-sender-page #screenZone{
  cursor:pointer;
}
.image-websocket-sender-page .playpause-overlay{
  position:absolute;
  left:50%;
  top:50%;
  width:84px;
  height:84px;
  border:1px solid rgba(255,255,255,0.18);
  border-radius:999px;
  background:rgba(0,0,0,0.55);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,0.45);
  transform:translate(-50%, -50%);
  transition:background .12s ease, transform .04s ease;
  z-index:3;
}
.image-websocket-sender-page .playpause-overlay:hover{
  background:rgba(0,0,0,0.72);
}
.image-websocket-sender-page .playpause-overlay:active{
  transform:translate(-50%, calc(-50% + 1px));
}
.image-websocket-sender-page .playpause-overlay i{
  font-size:34px;
  pointer-events:none;
}
.image-websocket-sender-page .playpause-overlay.hidden{
  display:none;
}
.image-websocket-sender-page .video-controls,
.image-websocket-sender-page .screen-controls,
.image-websocket-sender-page .camera-controls,
.image-websocket-sender-page .image-crop-controls,
.image-websocket-sender-page .video-crop-controls{
  margin-top:10px;
  padding:8px 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  position:relative;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:var(--surface-1);
}
.image-websocket-sender-page .video-crop-controls.video-controls--stack{
  flex-direction:column;
  gap:0;
  align-items:center;
}
.image-websocket-sender-page .video-controls-row{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:nowrap;
}
.image-websocket-sender-page .video-controls-row--playback{
  padding-bottom:8px;
}
.image-websocket-sender-page .video-controls-row--playback .player-progress{
  flex:1 1 auto;
  min-width:160px;
}
.image-websocket-sender-page .video-controls-row--primary{
  padding-top:8px;
  border-top:1px solid var(--border);
}
.image-websocket-sender-page .video-control-btn{
  height:44px;
  min-width:72px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:var(--surface-2);
  color:var(--muted);
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
  text-transform:uppercase;
  transform:translateY(0);
  transition:transform .04s ease, background .08s ease, border-color .08s ease, color .08s ease;
}
.image-websocket-sender-page .video-control-btn:hover{
  border-color:#4d5159;
  background:#2c2c2c;
  color:var(--text);
}
.image-websocket-sender-page .video-control-btn:active{
  transform:translateY(1px);
}
.image-websocket-sender-page .video-control-btn.active{
  border-color:#5f9a8d;
  background:#27423b;
  color:var(--text);
}
.image-websocket-sender-page .video-control-btn:disabled{
  opacity:0.45;
  cursor:not-allowed;
}
.image-websocket-sender-page .video-control-btn .btn-label{
  font-weight:700;
}
.image-websocket-sender-page .video-control-btn .btn-sub{
  font-size:10px;
  opacity:.78;
}
.image-websocket-sender-page .player-progress{
  width:100%;
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:0 8px;
  touch-action:pan-y;
}
.image-websocket-sender-page .player-progress span{
  min-width:40px;
  text-align:center;
  color:#c2c6cd;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08px;
  font-variant-numeric:tabular-nums;
}
.image-websocket-sender-page .screen-crop-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}
.image-websocket-sender-page .screen-crop-overlay.hidden{
  display:none;
}
.image-websocket-sender-page .screen-crop-overlay.active{
  pointer-events:auto;
}
.image-websocket-sender-page .screen-crop-box{
  position:absolute;
  border:1px solid #4caf50;
  background:transparent;
  box-shadow:0 0 0 9999px rgba(0,0,0,0.45);
  pointer-events:auto;
  touch-action:none;
  cursor:move;
}
.image-websocket-sender-page .screen-crop-float{
  position:absolute;
  left:0;
  top:0;
  z-index:6;
  display:flex;
  flex-direction:column;
  gap:0;
  padding:8px;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:#151515;
  color:var(--text);
  font-size:12px;
  pointer-events:auto;
}
.image-websocket-sender-page .screen-crop-float-options{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.image-websocket-sender-page .screen-crop-chip{
  width:56px;
  height:36px;
  padding:0;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--muted);
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14px;
  cursor:pointer;
  text-transform:uppercase;
}
.image-websocket-sender-page .screen-crop-chip.active{
  border-color:#5f9a8d;
  background:#27423b;
  color:var(--text);
}
.image-websocket-sender-page .screen-crop-handle{
  position:absolute;
  width:16px;
  height:16px;
  border-radius:2px;
  background:#4caf50;
}
.image-websocket-sender-page .screen-crop-handle.active{
  background:#7cff7c;
  box-shadow:0 0 0 2px rgba(124,255,124,0.35);
}
.image-websocket-sender-page .screen-crop-handle::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:36px;
  height:36px;
  transform:translate(-50%, -50%);
  background:transparent;
}
.image-websocket-sender-page .screen-crop-handle.tl{
  left:0;
  top:0;
  transform:translate(-50%, -50%);
  cursor:nwse-resize;
}
.image-websocket-sender-page .screen-crop-handle.tr{
  right:0;
  top:0;
  transform:translate(50%, -50%);
  cursor:nesw-resize;
}
.image-websocket-sender-page .screen-crop-handle.bl{
  left:0;
  bottom:0;
  transform:translate(-50%, 50%);
  cursor:nesw-resize;
}
.image-websocket-sender-page .screen-crop-handle.br{
  right:0;
  bottom:0;
  transform:translate(50%, 50%);
  cursor:nwse-resize;
}
.image-websocket-sender-page .screen-crop-handle.edge{
  border-radius:3px;
}
.image-websocket-sender-page .screen-crop-handle.edge.top{
  width:22px;
  height:8px;
  left:50%;
  top:0;
  transform:translate(-50%, -50%);
  cursor:ns-resize;
}
.image-websocket-sender-page .screen-crop-handle.edge.bottom{
  width:22px;
  height:8px;
  left:50%;
  bottom:0;
  transform:translate(-50%, 50%);
  cursor:ns-resize;
}
.image-websocket-sender-page .screen-crop-handle.edge.left{
  width:8px;
  height:22px;
  left:0;
  top:50%;
  transform:translate(-50%, -50%);
  cursor:ew-resize;
}
.image-websocket-sender-page .screen-crop-handle.edge.right{
  width:8px;
  height:22px;
  right:0;
  top:50%;
  transform:translate(50%, -50%);
  cursor:ew-resize;
}
.image-websocket-sender-page .camera-source-float{
  position:absolute;
  z-index:7;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:180px;
  padding:6px;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:#151515;
}
.image-websocket-sender-page .camera-source-options{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.image-websocket-sender-page .camera-source-option{
  width:100%;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:var(--surface-2);
  color:var(--muted);
  text-align:left;
  cursor:pointer;
}
.image-websocket-sender-page .camera-source-option:hover{
  border-color:#4d5159;
  background:#2c2c2c;
  color:var(--text);
}
.image-websocket-sender-page .camera-source-option.active{
  border-color:#5f9a8d;
  background:#27423b;
  color:var(--text);
}
.image-websocket-sender-page .recents-section{
  width:min(1200px, 100%);
  margin:0;
  padding:0 4px;
  box-sizing:border-box;
}
.image-websocket-sender-page .recents-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 8px;
}
.image-websocket-sender-page .recents-title{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  font-size:14px;
  font-weight:600;
  color:var(--text);
}
.image-websocket-sender-page .favorites-hint{
  color:var(--muted);
  font-size:12px;
  font-weight:400;
  opacity:.75;
}
.image-websocket-sender-page .recents-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
  width:100%;
}
.image-websocket-sender-page .recent-slot{
  position:relative;
  aspect-ratio:3 / 2;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:var(--surface-1);
  box-shadow:0 2px 6px rgba(0,0,0,0.35);
  cursor:pointer;
}
.image-websocket-sender-page .recent-slot:hover{
  border-color:#5f9a8d;
}
.image-websocket-sender-page .recent-slot.empty{
  border-style:dashed;
  border-color:#3a3a3a;
}
.image-websocket-sender-page .recent-slot.empty:hover{
  border-color:#4a4a4a;
}
.image-websocket-sender-page .recent-thumb{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.image-websocket-sender-page .recent-thumb.portrait{
  object-position:center top;
}
.image-websocket-sender-page .recent-index{
  position:absolute;
  top:6px;
  left:6px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:2px 6px;
  border-radius:6px;
  background:rgba(0,0,0,0.6);
  color:#fff;
  font-family:var(--mono);
  font-size:11px;
}
.image-websocket-sender-page .recent-index .lock-mini{
  font-size:12px;
  opacity:.9;
}
.image-websocket-sender-page .recent-hover-overlay{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:rgba(0,0,0,0.55);
  border-radius:inherit;
  pointer-events:none;
}
.image-websocket-sender-page .recent-hover-num{
  color:rgba(255,255,255,0.9);
  font-size:44px;
  font-weight:800;
  letter-spacing:1px;
  text-shadow:0 2px 8px rgba(0,0,0,0.6);
}
.image-websocket-sender-page .recent-slot:not(.empty):hover .recent-hover-overlay{
  display:flex;
}
.image-websocket-sender-page .recent-hover-lock,
.image-websocket-sender-page .recent-hover-clear{
  position:absolute;
  top:8px;
  width:42px;
  height:42px;
  pointer-events:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,0.25);
  border-radius:10px;
  background:rgba(0,0,0,0.5);
  color:#fff;
  cursor:pointer;
  transition:background .12s ease, transform .04s ease;
}
.image-websocket-sender-page .recent-hover-lock{
  left:8px;
}
.image-websocket-sender-page .recent-hover-clear{
  right:8px;
}
.image-websocket-sender-page .recent-hover-lock:hover,
.image-websocket-sender-page .recent-hover-clear:hover{
  background:rgba(0,0,0,0.72);
}
.image-websocket-sender-page .recent-hover-lock:active,
.image-websocket-sender-page .recent-hover-clear:active{
  transform:translateY(1px);
}
.image-websocket-sender-page .recent-hover-lock i,
.image-websocket-sender-page .recent-hover-clear i{
  font-size:18px;
  pointer-events:none;
}
.sketch-top-center{
  position:absolute;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  z-index:5;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
}
.sketch-top-center .overlay-tool-btn{
  position:static;
}
.sketch-ar-wrap{
  width:auto;
  max-width:100%;
  aspect-ratio:var(--sketch-ar, 1 / 1);
  max-height:clamp(240px, 58vh, 640px);
  margin:0 auto;
  border:0;
  border-radius:0;
  background:transparent;
  overflow:visible;
}
.image-dropzone.sketch-zone{
  flex:0 0 auto;
  width:100%;
  height:100% !important;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
  border:none !important;
  background:transparent !important;
  cursor:crosshair;
  touch-action:none;
  position:relative;
}
.sketch-zone canvas{
  width:100%;
  height:100%;
  display:block;
}
.sketch-width-overlay{
  position:fixed;
  z-index:4000;
  width:248px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:var(--surface-0);
  box-shadow:0 12px 24px rgba(0,0,0,0.32);
  display:none;
  flex-direction:column;
  gap:8px;
}
.sketch-width-overlay.visible{
  display:flex;
}
.sketch-width-overlay__title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.sketch-width-overlay__value{
  flex:0 0 auto;
  min-width:52px;
  font-family:var(--mono);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  line-height:1;
  text-align:right;
  text-transform:uppercase;
  color:var(--text);
}
.sketch-width-overlay__slider-row{
  display:flex;
  align-items:stretch;
  width:100%;
}
.sketch-width-overlay__slider{
  flex:1 1 auto;
  min-width:0;
  margin:0;
}
.prompt-textarea-wrapper{
  position:relative;
  width:100%;
  display:block;
}
.prompt-textarea{
  width:100%;
  min-height:clamp(100px, 28vh, 160px);
  resize:vertical;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:#101010;
  color:var(--text);
  padding:12px 44px 24px 14px;
  font-family:var(--sans);
  font-size:14px;
  line-height:1.45;
  box-sizing:border-box;
}
.prompt-textarea:focus{
  outline:none;
  border-color:#4d5159;
  box-shadow:inset 0 0 0 1px #4d5159;
  background:#141414;
}
.prompt-textarea-wrapper #aiEnhanceToggle{
  position:absolute;
  right:8px;
  bottom:12px;
  min-width:92px;
}
.icon-clear-btn,
.prompt-clear-btn{
  background:#181818;
  color:var(--muted);
  border:1px solid #3a3a3a;
  width:28px;
  height:28px;
  padding:0;
  line-height:1;
  font-size:15px;
  border-radius:var(--r2);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateY(0);
  transition:transform .04s ease, background .08s ease, color .08s ease, border-color .08s ease;
}
.icon-clear-btn:hover,
.prompt-clear-btn:hover{
  background:#232323;
  color:var(--text);
  border-color:#4a4a4a;
}
.icon-clear-btn:active,
.prompt-clear-btn:active{
  transform:translateY(1px);
}
.prompt-clear-btn{
  position:absolute;
  top:6px;
  right:6px;
}
.style-wrap{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:0 10px;
  min-height:var(--sz-btn-sm);
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:var(--surface-2);
  color:var(--text);
}
.ui-style-trigger,
.prompt-sender__shell .style-wrap,
.srt-player .ui-runtime-toolbar__right .style-wrap{
  cursor:pointer;
  transition:transform .04s ease, background .08s ease, border-color .08s ease, color .08s ease;
}
.ui-style-trigger:hover,
.ui-style-trigger:focus-within,
.prompt-sender__shell .style-wrap:hover,
.prompt-sender__shell .style-wrap:focus-within,
.srt-player .ui-runtime-toolbar__right .style-wrap:hover,
.srt-player .ui-runtime-toolbar__right .style-wrap:focus-within{
  border-color:#4d5159;
  background:#2c2c2c;
}
.ui-style-trigger.is-pressed,
.ui-style-trigger:active,
.prompt-sender__shell .style-wrap.is-pressed,
.prompt-sender__shell .style-wrap:active,
.srt-player .ui-runtime-toolbar__right .style-wrap.is-pressed,
.srt-player .ui-runtime-toolbar__right .style-wrap:active{
  transform:translateY(1px);
}
.ui-style-trigger__button,
.prompt-sender__shell #promptStyleSelect,
.srt-player .ui-runtime-toolbar__right #srtStyleSelect{
  min-height:0;
  height:auto;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  color:inherit;
  box-shadow:none;
}
.ui-style-trigger__button:hover,
.ui-style-trigger__button:focus-visible,
.ui-style-trigger__button:active,
.prompt-sender__shell #promptStyleSelect:hover,
.prompt-sender__shell #promptStyleSelect:focus-visible,
.prompt-sender__shell #promptStyleSelect:active,
.srt-player .ui-runtime-toolbar__right #srtStyleSelect:hover,
.srt-player .ui-runtime-toolbar__right #srtStyleSelect:focus-visible,
.srt-player .ui-runtime-toolbar__right #srtStyleSelect:active{
  border:none;
  background:transparent;
  color:inherit;
  transform:none;
  box-shadow:none;
}
.style-wrap .style-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
}
.style-wrap .style-label{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14px;
  text-transform:uppercase;
}
.srt-player__favorites-section{
  width:100%;
  max-width:none;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0 auto 28px;
}
.srt-player__favorites-header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 16px;
  color:var(--muted);
  font-family:var(--sans);
  font-size:13px;
}
.srt-player__favorites-header-left{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.config-section-toggle-btn{
  width:32px;
  height:32px;
  padding:0;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:var(--surface-2);
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .04s ease, background .08s ease, border-color .08s ease, color .08s ease;
}
.config-section-toggle-btn:hover{
  background:#2c2c2c;
  border-color:#4d5159;
  color:var(--text);
}
.config-section-toggle-btn:active{
  transform:translateY(1px);
}
.srt-player__favorites-title{
  color:var(--text);
  font-family:var(--mono);
  font-size:13px;
  font-weight:900;
  letter-spacing:.16px;
  text-transform:uppercase;
}
.favorites-modules-inline{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.favorites-modules-select{
  width:180px;
  background:#141414;
  border:1px solid #2f2f2f;
  border-radius:var(--r2);
  color:var(--text);
  padding:7px 28px 7px 10px;
  font-family:var(--mono);
  font-size:12px;
}
.srt-player__favorites-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.srt-player__favorites-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  width:100%;
}
.srt-player__favorite-slot{
  position:relative;
  height:110px;
  min-height:110px;
  box-sizing:border-box;
  overflow:hidden;
  padding:10px 12px 12px;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:#161616;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  cursor:pointer;
  transition:border-color .12s ease, background .12s ease, transform .04s ease;
}
.srt-player__favorite-slot:not(.empty):hover{
  border-color:#4d5159;
  background:#1b1b1b;
  transform:translateY(-1px);
}
.srt-player__favorite-slot.empty{
  border-style:dashed;
  background:#111111;
  color:#666666;
  cursor:default;
}
.srt-player__favorite-slot.empty:hover{
  border-color:#444444;
}
.srt-player__favorite-slot-header{
  position:absolute;
  top:6px;
  left:8px;
  right:36px;
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  color:var(--muted);
  font-family:var(--mono);
  font-size:11px;
  line-height:1.2;
}
.srt-player__favorite-slot-header .srt-player__favorite-slot-num-label{
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.srt-player__favorite-slot-header .srt-player__favorite-slot-title-edit-btn{
  flex:0 0 auto;
  min-width:20px;
  height:20px;
  padding:0 5px;
  border:1px solid #3a3a3a;
  border-radius:var(--r2);
  background:#1d1d1d;
  color:var(--muted);
  font-family:var(--mono);
  font-size:10px;
  cursor:pointer;
}
.srt-player__favorite-slot-header .srt-player__favorite-slot-title-edit-btn:hover{
  background:#242424;
  color:var(--text);
}
.srt-player__favorite-slot-title-input{
  pointer-events:auto;
  flex:1 1 auto;
  min-width:40px;
  padding:2px 4px;
  border:1px solid #3a3a3a;
  border-radius:var(--r2);
  background:#111111;
  color:var(--text);
  font-family:var(--mono);
  font-size:11px;
  line-height:14px;
}
.srt-player__favorite-slot-title-input:focus{
  outline:none;
  border-color:#4d5159;
}
.srt-player__favorite-text{
  flex:1 1 auto;
  min-height:0;
  width:100%;
  padding-top:16px;
  overflow-y:auto;
  overflow-x:hidden;
  white-space:normal;
  word-break:break-word;
  color:var(--text);
  font-family:var(--sans);
  font-size:13px;
  line-height:1.38;
  scrollbar-width:thin;
}
.srt-player__favorite-text::-webkit-scrollbar{
  width:6px;
}
.srt-player__favorite-text::-webkit-scrollbar-track{
  background:transparent;
}
.srt-player__favorite-text::-webkit-scrollbar-thumb{
  background:#3a3a3a;
  border-radius:4px;
}
.srt-player__favorite-hover{
  position:absolute;
  inset:0;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:8px 10px;
  border-radius:inherit;
  background:#111111;
  color:rgba(255,255,255,0.88);
  text-align:center;
  pointer-events:none;
  z-index:2;
}
.srt-player__favorite-hover .srt-player__favorite-hover-num{
  font-family:var(--mono);
  font-size:36px;
  font-weight:900;
  line-height:1;
}
.srt-player__favorite-hover .srt-player__favorite-hover-title{
  max-width:90%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:var(--sans);
  font-size:14px;
  opacity:.9;
}
.srt-player__favorite-slot:not(.empty):hover .srt-player__favorite-hover{
  display:flex;
}
.srt-player__favorite-slot:not(.empty):hover > .srt-player__favorite-text{
  opacity:.58;
}
.srt-player__favorite-clear-btn{
  position:absolute;
  top:8px;
  right:8px;
  opacity:0;
  pointer-events:none;
  z-index:4;
}
.srt-player__favorite-edit-btn{
  position:absolute;
  top:8px;
  left:8px;
  right:auto;
  opacity:0;
  pointer-events:none;
  z-index:4;
}
.srt-player__favorite-slot:hover .srt-player__favorite-clear-btn,
.srt-player__favorite-clear-btn:focus,
.srt-player__favorite-slot:focus-within .srt-player__favorite-clear-btn,
.srt-player__favorite-slot:hover .srt-player__favorite-edit-btn,
.srt-player__favorite-edit-btn:focus,
.srt-player__favorite-slot:focus-within .srt-player__favorite-edit-btn{
  opacity:1;
  pointer-events:auto;
}
.srt-player__favorite-empty-label{
  opacity:.55;
}
.prompt-sender__favorites-section{
  width:min(980px, 100%);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.prompt-sender__favorites-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.prompt-sender__favorites-header-left{
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.prompt-sender__favorites-title{
  color:var(--text);
  font-family:var(--mono);
  font-size:13px;
  font-weight:900;
  letter-spacing:.16px;
  text-transform:uppercase;
}
.prompt-sender__favorites-modules{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.prompt-sender__favorites-modules-select{
  width:180px;
}
.prompt-sender__favorites-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.prompt-sender__favorites-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  width:100%;
}
.prompt-sender__favorite-slot{
  position:relative;
  height:100px;
  padding:10px 10px 12px;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:#161616;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  cursor:pointer;
  transition:border-color .12s ease, background .12s ease, transform .04s ease;
}
.prompt-sender__favorite-slot:not(.empty):hover{
  border-color:#4d5159;
  background:#1b1b1b;
  transform:translateY(-1px);
}
.prompt-sender__favorite-slot.empty{
  border-style:dashed;
  background:#111111;
  color:#666666;
  cursor:default;
}
.prompt-sender__favorite-slot.empty:hover{
  border-color:#444444;
}
.prompt-sender__favorite-slot-header{
  position:absolute;
  top:4px;
  left:6px;
  right:28px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  min-width:0;
  padding-right:34px;
  color:var(--muted);
  font-family:var(--mono);
  font-size:11px;
  line-height:1.2;
  text-align:left;
  z-index:3;
}
.prompt-sender__favorite-slot-label{
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.prompt-sender__favorite-slot-input{
  pointer-events:auto;
  flex:1 1 auto;
  min-width:40px;
  padding:2px 4px;
  border:1px solid #3a3a3a;
  border-radius:var(--r2);
  background:#111111;
  color:var(--text);
  font-family:var(--mono);
  font-size:11px;
  line-height:14px;
}
.prompt-sender__favorite-slot-input:focus{
  outline:none;
  border-color:#4d5159;
}
.prompt-sender__favorite-text{
  flex:1 1 auto;
  width:100%;
  padding-top:20px;
  overflow:hidden;
  overflow-x:hidden;
  white-space:normal;
  word-break:break-word;
  color:var(--text);
  font-family:var(--sans);
  font-size:13px;
  line-height:1.38;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}
.prompt-sender__favorite-hover{
  position:absolute;
  inset:0;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:8px 10px;
  border-radius:inherit;
  background:#111111;
  color:rgba(255,255,255,0.88);
  text-align:center;
  pointer-events:none;
  z-index:2;
}
.prompt-sender__favorite-hover-num{
  font-family:var(--mono);
  font-size:36px;
  font-weight:900;
  line-height:1;
}
.prompt-sender__favorite-hover-title{
  max-width:90%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:var(--sans);
  font-size:14px;
  opacity:.9;
}
.prompt-sender__favorite-slot:not(.empty):hover .prompt-sender__favorite-hover{
  display:flex;
}
.prompt-sender__favorite-slot:not(.empty):hover > .prompt-sender__favorite-text{
  opacity:.58;
}
.prompt-sender__favorite-clear{
  position:absolute;
  top:8px;
  right:8px;
  opacity:0;
  pointer-events:none;
  z-index:5;
}
.prompt-sender__favorite-edit{
  position:absolute;
  top:8px;
  left:8px;
  right:auto;
  opacity:0;
  pointer-events:none;
  z-index:5;
}
.prompt-sender__favorite-slot:hover .prompt-sender__favorite-clear,
.prompt-sender__favorite-clear:focus,
.prompt-sender__favorite-slot:focus-within .prompt-sender__favorite-clear,
.prompt-sender__favorite-slot:hover .prompt-sender__favorite-edit,
.prompt-sender__favorite-edit:focus,
.prompt-sender__favorite-slot:focus-within .prompt-sender__favorite-edit{
  opacity:1;
  pointer-events:auto;
}
.prompt-sender__favorite-empty-label{
  margin:auto 0;
  padding:0 10px;
  opacity:.55;
}
.ui-inline-danger-action{
  background:none;
  border:none;
  color:#d98282;
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14px;
  text-transform:uppercase;
  cursor:pointer;
  text-decoration:underline;
  padding:4px 10px;
  border-radius:var(--r2);
}
.ui-inline-danger-action:hover{
  color:#ff9b9b;
  background:#262020;
}
.prompt-sender__shell{
  position:relative;
  width:min(980px, 100%);
  padding:0;
  gap:8px;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.prompt-sender-screen{
  justify-content:center;
}
.prompt-sender-screen.is-overflow{
  justify-content:flex-start;
}
.prompt-sender__divider{
  width:100%;
  height:1px;
  flex:0 0 auto;
  background:var(--border);
}
.ui-sender-header{
  width:100%;
  align-self:stretch;
  margin:0;
  padding:0;
  background:transparent;
}
.ui-sender-header .title{
  width:auto;
  max-width:100%;
}
.ui-sender-header .ui-sender-header__row{
  width:fit-content;
  max-width:100%;
  justify-content:flex-start;
  align-items:center;
}
.ui-sender-header .ui-sender-title{
  font-size:15px;
}
.ui-sender-header__status{
  flex:0 0 auto;
}
.ui-sender-header__status,
.ui-sender-header__status:hover,
.ui-sender-header__status:active,
.ui-sender-header__status:focus-visible{
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.ui-sender-header__status .ws-status-content{
  gap:0;
}
.ui-sender-header__status .ws-status-icon{
  width:12px;
  height:12px;
}
.ui-sender-header__status .ws-status-icon::before{
  width:10px;
  height:10px;
}
.ui-sender-header__settings{
  flex:0 0 auto;
}
.ui-sender-header__settings .ui-tag__text{
  min-width:0;
}
.ui-tag--keep-text-mobile .ui-tag__text{
  display:inline-flex;
}
.prompt-sender__shell .ui-runtime-toolbar__center .ui-runtime-chip-row--equal{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  width:136px;
  max-width:100%;
}
.prompt-sender__shell .ui-runtime-toolbar__center .ui-runtime-chip--mode{
  min-width:0;
  width:100%;
}
.prompt-sender__shell .prompt-footer{
  margin-bottom:0;
}
.prompt-sender__dialog-modal{
  z-index:50;
}
.prompt-sender__replace-dialog{
  width:min(520px, calc(100vw - 28px));
}
.prompt-sender__replace-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.prompt-sender__replace-header h3{
  margin:0;
}
.prompt-sender__replace-footer{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:12px;
}
.prompt-sender__replace-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:10px;
  margin-top:12px;
}
.prompt-sender__replace-slot{
  min-height:72px;
}
.prompt-sender__replace-slot .slot-label{
  color:var(--mint);
  font-family:var(--mono);
  font-size:11px;
  font-weight:900;
  letter-spacing:.12px;
  text-transform:uppercase;
}
.prompt-sender__replace-slot .slot-text{
  color:var(--text);
  font-family:var(--sans);
  font-size:12px;
  line-height:1.45;
}
.ui-prompt-style-dialog,
.prompt-sender__style-dialog{
  width:min(720px, calc(100vw - 28px));
  max-width:720px;
  max-height:min(72vh, 760px);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.prompt-sender__dialog-title{
  margin:0;
}
.dialog-icon-close-btn{
  position:absolute;
  top:8px;
  right:8px;
  width:36px;
  height:36px;
  padding:0;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:var(--surface-2);
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .04s ease, background .08s ease, border-color .08s ease, color .08s ease;
}
.dialog-icon-close-btn:hover{
  background:#2c2c2c;
  border-color:#4d5159;
  color:var(--text);
}
.dialog-icon-close-btn:active{
  transform:translateY(1px);
}
.dialog-icon-close-btn i{
  font-size:16px;
}
.srt-player-shell-wrap{
  width:min(1080px, 100%);
}
.srt-player .srt-player-shell{
  display:flex;
  flex-direction:column;
  gap:0;
}
.srt-player .srt-display-row{
  flex:1 1 auto;
  min-height:0;
  height:auto;
}
.srt-player .srt-dropzone{
  min-height:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-radius:0;
}
.srt-player .srt-player-panel{
  height:100%;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:0;
  position:relative;
}
.srt-player .srt-video-controls{
  position:relative;
}
.srt-player .srt-player-top{
  display:flex;
  flex-direction:column;
  gap:0;
  height:var(--srt-panel-height, 360px);
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:var(--surface-0);
}
.srt-player .srt-player-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:5px;
  border-bottom:1px solid var(--border);
  position:relative;
}
.srt-player .srt-player-title{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  color:#d0d0d0;
  font-size:16px;
}
.srt-player .srt-player-title .srt-dirty-dot{
  margin-right:2px;
}
.srt-player .srt-player__favorites-header-left .config-section-toggle-btn i{
  transition:transform .2s ease;
}
.srt-player .srt-player__favorites-header-left .config-section-toggle-btn i.collapsed{
  transform:rotate(-90deg);
}
.srt-player .srt-file-name{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:600;
  color:#f2f2f2;
}
.srt-player .srt-dirty-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#f2c94c;
  box-shadow:0 0 0 1px rgba(0,0,0,0.45);
}
.srt-player .srt-dirty-dot.hidden{
  display:none;
}
.srt-player .srt-dirty-dot--corner{
  position:absolute;
  top:20px;
  left:8px;
  width:10px;
  height:10px;
  z-index:5;
}
.srt-player .srt-player-actions{
  display:flex;
  align-items:center;
  gap:6px;
  opacity:1;
  pointer-events:auto;
  transition:opacity .2s ease;
}
.srt-player .srt-player-header .ui-runtime-icon-btn,
.srt-player #srtEnhanceToggle{
  width:40px;
  min-width:40px;
  height:40px;
  padding:0;
  border:none;
  background:transparent;
  color:#d0d5de;
  box-shadow:none;
}
.srt-player .srt-player-header .ui-runtime-icon-btn i,
.srt-player #srtEnhanceToggle i{
  font-size:17px;
}
.srt-player #srtExternalControlBtn,
.srt-player #srtRawEditBtn,
.srt-player #exportSrtBtn,
.srt-player #srtSyncBtn,
.srt-player #srtCueListPopupBtn,
.srt-player #clearSrtBtn,
.srt-player #srtEnhanceToggle{
  width:40px;
  min-width:40px;
  height:40px;
  padding:0;
  border:none;
  border-radius:var(--r2);
  background:transparent;
  color:#d0d5de;
  box-shadow:none;
}
.srt-player #srtExternalControlBtn i,
.srt-player #srtRawEditBtn i,
.srt-player #exportSrtBtn i,
.srt-player #srtSyncBtn i,
.srt-player #srtCueListPopupBtn i,
.srt-player #clearSrtBtn i,
.srt-player #srtEnhanceToggle i{
  font-size:17px;
}
.srt-player #srtExternalControlBtn:hover,
.srt-player #srtRawEditBtn:hover,
.srt-player #exportSrtBtn:hover,
.srt-player #srtSyncBtn:hover,
.srt-player #srtCueListPopupBtn:hover,
.srt-player #clearSrtBtn:hover,
.srt-player #srtEnhanceToggle:hover{
  border-color:transparent;
  background:transparent;
  color:#eef2f8;
}
.srt-player .srt-player-header .ui-runtime-icon-btn.active,
.srt-player #srtEnhanceToggle.active{
  color:var(--mint);
}
.srt-player #srtExternalControlBtn.active,
.srt-player #srtExternalControlBtn[aria-pressed="true"],
.srt-player #srtEnhanceToggle.active,
.srt-player #srtEnhanceToggle[aria-pressed="true"]{
  color:var(--mint);
  text-shadow:0 0 10px rgba(55,246,194,0.18);
}
.srt-player .srt-controls-mask{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--r);
  background:rgba(0,0,0,0.55);
  color:#e6e6e6;
  font-size:14px;
  letter-spacing:.03em;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.srt-player .srt-video-controls.external-locked .srt-controls-mask{
  opacity:1;
  pointer-events:auto;
}
.srt-player .srt-ai-toggle{
  width:40px;
  min-width:40px;
  height:40px;
  padding:0;
}
.srt-player .srt-ai-floating{
  position:absolute;
  top:6px;
  right:6px;
  z-index:2;
}
.srt-player .srt-player-now{
  height:96px;
  padding:4px 28px;
  border-bottom:1px solid var(--border);
  background:var(--surface-0);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  cursor:pointer;
}
.srt-player .srt-now-progress{
  position:absolute;
  inset:0;
  z-index:0;
  opacity:0;
  pointer-events:none;
  background:var(--mint-soft-bg);
  transform:scaleX(0);
  transform-origin:left center;
  transition:opacity .15s ease;
}
.srt-player .srt-player-panel.dragover .srt-player-now{
  border-color:#3d3d3d;
  box-shadow:0 0 0 1px rgba(255,255,255,0.06) inset;
}
.srt-player .srt-current-text{
  width:100%;
  max-height:calc(1.25em * 3);
  overflow:auto;
  white-space:pre-wrap;
  color:var(--text);
  font-size:18px;
  line-height:1.25;
  cursor:pointer;
  position:relative;
  z-index:1;
}
.srt-player .srt-copy-toast,
.srt-player .srt-cue-copy-toast{
  position:absolute;
  min-height:24px;
  padding:0 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14px;
  text-transform:uppercase;
  color:var(--text);
  background:var(--surface-0);
  border:1px solid var(--border2);
  border-radius:var(--r2);
  box-shadow:none;
  opacity:0;
  pointer-events:none;
  transform:translateY(-2px);
  transition:opacity .16s ease, transform .16s ease, border-color .08s ease, background .08s ease;
}
.srt-player .srt-copy-toast{
  top:6px;
  left:50%;
  transform:translateX(-50%);
}
.srt-player .srt-copy-toast.visible,
.srt-player .srt-cue-copy-toast.visible{
  opacity:1;
  transform:translateX(0) translateY(0);
}
.srt-player .srt-cue-copy-toast{
  top:6px;
  right:6px;
  transform:translateY(-2px);
}
.srt-player .srt-copy-toast.visible{
  transform:translateX(-50%) translateY(0);
}
.srt-player .srt-cue-list-wrap{
  flex:1;
  min-height:0;
  padding:0;
  border:none;
  background:transparent;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:0;
  position:relative;
}
.srt-player .srt-cue-list{
  flex:1;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:0;
  padding-right:2px;
}
.srt-player .srt-cue-list--dialog{
  padding-top:0;
  padding-right:0;
}
.srt-player .srt-cue-list-dialog{
  width:min(900px, 92vw);
  max-height:80vh;
  position:relative;
}
.srt-player .srt-player__dialog-title{
  margin:0;
  font-size:16px;
  line-height:1.15;
  letter-spacing:.08em;
  font-family:var(--mono);
  font-weight:900;
  text-transform:none;
  color:var(--text);
}
.srt-player .srt-raw-dialog-header .srt-player__dialog-title{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.srt-player .srt-cue-list-dialog-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:36px;
  margin-bottom:12px;
}
.srt-player .srt-cue-list-dialog-header .dialog-icon-close-btn{
  position:static;
}
.srt-player .srt-cue-list-dialog-body{
  margin-top:0;
  max-height:70vh;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:#1a1a1a;
}
.srt-player__dialog-body{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.srt-player .srt-cue-list-dialog-body .srt-cue-list{
  height:auto;
  max-height:70vh;
}
.srt-player .srt-raw-dialog{
  width:min(520px, calc(100vw - 28px));
  max-width:520px;
  max-height:min(80vh, calc(var(--vrch-safe-vh, 1vh) * 100 - 24px));
  height:auto;
  position:relative;
  display:flex;
  flex-direction:column;
}
.srt-player .srt-raw-dialog-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:36px;
  margin-bottom:10px;
}
.srt-player .srt-raw-dialog-header .dialog-icon-close-btn{
  position:static;
}
.srt-player .favorites-collapsed-row,
.srt-player .srt-player__favorites-collapsed-row{
  width:100%;
  max-width:100%;
  min-height:48px;
  box-sizing:border-box;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:var(--surface-1);
  color:var(--muted);
  font-size:14px;
  display:flex;
  align-items:center;
  gap:8px;
}
.srt-player .srt-cue-item{
  position:relative;
  display:grid;
  grid-template-columns:24px 56px 1fr;
  align-items:center;
  gap:6px;
  padding:6px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  border-left:none;
  border-right:none;
  border-radius:0;
  background:var(--surface-1);
  cursor:pointer;
}
.srt-player .srt-cue-item:hover{
  border-color:var(--border2);
  background:var(--surface-2);
}
.srt-player .srt-cue-item.is-active{
  background:var(--mint-soft-bg);
  box-shadow:inset 2px 0 0 var(--status-online-border);
}
.srt-player .srt-cue-id{
  color:var(--text);
  font-size:14px;
  font-weight:700;
  text-align:center;
}
.srt-player .srt-cue-time-axis{
  display:flex;
  flex-direction:column;
  align-items:center;
  color:var(--muted);
  font-size:10px;
  line-height:1.05;
}
.srt-player .srt-cue-time-arrow{
  padding:2px 0;
  color:var(--muted);
  font-size:12px;
  line-height:1;
}
.srt-player .srt-cue-time-start,
.srt-player .srt-cue-time-end{
  font-variant-numeric:tabular-nums;
}
.srt-player .srt-cue-text{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  white-space:pre-wrap;
  color:var(--text);
  font-size:13px;
}
.srt-player .srt-cue-dialog-fields{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.srt-player .srt-cue-dialog-time{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.srt-player .srt-cue-time-col{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.srt-player .srt-cue-time-input{
  display:flex;
  align-items:center;
  gap:6px;
}
.srt-player .srt-cue-time-input .ui-input{
  margin-top:0;
}
.srt-player .srt-cue-time-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.srt-player .srt-cue-time-controls .srt-time-adjust-btn{
  position:static;
  width:32px;
  height:32px;
  padding:0;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:var(--surface-2);
  color:var(--muted);
  box-shadow:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transform:translateY(0);
  transition:transform .04s ease, background .08s ease, border-color .08s ease, color .08s ease;
}
.srt-player .srt-cue-time-controls .srt-time-adjust-btn:hover{
  background:#232323;
  border-color:#4d5159;
  color:var(--text);
}
.srt-player .srt-cue-time-controls .srt-time-adjust-btn:active{
  transform:translateY(1px);
}
.srt-player .srt-cue-time-controls .srt-time-adjust-btn:focus-visible{
  outline:none;
  border-color:#5b6069;
  box-shadow:inset 0 0 0 1px #5b6069;
}
.srt-player .srt-cue-time-input input{
  width:100%;
  min-width:0;
  flex:1;
  text-align:center;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.srt-player .srt-cue-textarea{
  min-height:78px;
  padding:10px 12px;
  line-height:1.45;
  resize:vertical;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.srt-player .srt-cue-time-controls .srt-time-adjust-btn i{
  font-size:12px;
}
.srt-player .srt-cue-error{
  color:#f2c94c;
  font-size:12px;
}
.srt-player .srt-cue-error.hidden{
  display:none;
}
.srt-player .srt-cue-dialog-fields input,
.srt-player .srt-cue-dialog-fields textarea{
  width:100%;
  box-sizing:border-box;
}
.srt-player .cue-edit-actions > .ui-btn--md,
.srt-player #cueEditCancel,
.srt-player #cueEditSave{
  width:128px;
  min-width:128px;
  min-height:36px;
  height:36px;
  flex:0 0 auto;
}
.srt-player .srt-raw-dialog-fields{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.srt-player .srt-raw-file-row{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.srt-player .srt-raw-file-row label{
  color:#a9a9a9;
  font-size:12px;
}
.srt-player .srt-raw-file-row .ui-input{
  width:100%;
  margin-top:0;
}
.srt-player .srt-raw-file-input{
  width:100%;
  box-sizing:border-box;
}
.srt-player .srt-raw-editor{
  flex:1;
  min-height:0;
  display:flex;
  align-items:stretch;
  gap:0;
  overflow:hidden;
  border:1px solid #2b2b2b;
  border-radius:var(--r2);
  background:#1a1a1a;
}
.srt-player .srt-raw-textarea{
  flex:1;
  min-height:clamp(260px, 42vh, 420px);
  height:100%;
  padding:10px 12px;
  border:0;
  background:transparent;
  line-height:1.4;
  resize:vertical;
  white-space:pre-wrap;
  word-break:break-word;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.srt-player .cue-edit-actions{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;
}
.srt-player .srt-raw-dialog-actions{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;
}
.srt-player .srt-raw-dialog-actions > .ui-btn--md{
  width:128px;
  min-width:128px;
  min-height:36px;
  height:36px;
  line-height:1;
  flex:0 0 auto;
}
@media (max-width: 640px){
  .srt-player .cue-edit-actions,
  .srt-player .srt-raw-dialog-actions{
    width:100%;
    flex-wrap:nowrap;
    gap:8px;
  }
  .srt-player .cue-edit-actions > .ui-btn--md,
  .srt-player .srt-raw-dialog-actions > .ui-btn--md{
    width:auto;
    min-width:0;
    flex:1 1 0;
  }
}
.srt-player .player-progress{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:0;
  touch-action:pan-y;
}
.srt-player .player-progress span{
  min-width:44px;
  text-align:center;
  color:#d8d8d8;
  font-variant-numeric:tabular-nums;
}
@media (max-width: 820px){
  .srt-player .srt-display-row{
    height:var(--srt-panel-height, 360px);
  }
}
@media (max-width: 520px){
  .srt-player .srt-cue-dialog-time{
    grid-template-columns:1fr;
  }
}
.audio-recorder-shell{
  gap:14px;
}
.audio-recorder .audio-recorder-reset-row{
  padding-top:4px;
}
.audio-recorder .audio-recorder-reset-row > .ui-btn--md{
  width:100%;
  justify-content:center;
}
.audio-recorder .audio-recorder-settings-heading{
  padding-top:8px;
  border-top:1px solid var(--border);
}
.audio-recorder .audio-recorder-settings-heading .ui-settings-label{
  color:var(--text);
  font-weight:700;
}
.audio-recorder .recorder-wrapper{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  width:100%;
  min-height:360px;
  padding:14px;
  border:1px solid rgba(255,255,255,0.05);
  border-radius:var(--r2);
  background:#121212;
  overflow:hidden;
}
.audio-recorder .recorder-visualizer{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.62;
}
.audio-recorder .recorder-visualizer canvas{
  display:block;
  width:100%;
  height:100%;
}
.audio-recorder .recorder-status-line{
  position:relative;
  z-index:6;
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:10px;
}
.audio-recorder .recorder-status-line .bpm-indicator-wrap{
  grid-column:1;
  justify-self:start;
}
.audio-recorder .recorder-status-line #statusText{
  grid-column:2;
  justify-self:center;
}
.audio-recorder .recorder-status-line #countdownText{
  grid-column:3;
  justify-self:end;
}
.audio-recorder .bpm-indicator-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  z-index:7;
}
.audio-recorder .bpm-indicator-wrap .recorder-bpm-indicator{
  cursor:pointer;
}
.audio-recorder .recorder-bpm-indicator{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:64px;
  min-height:30px;
  padding:0 10px;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:rgba(255,255,255,0.04);
  color:var(--text);
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.12px;
  line-height:1;
  transform:translateY(0);
  transition:transform .04s ease, background .08s ease, border-color .08s ease, color .08s ease;
}
.audio-recorder .recorder-bpm-indicator:hover{
  border-color:#5a5a5a;
  background:#202020;
}
.audio-recorder .recorder-bpm-indicator:active,
.audio-recorder .recorder-bpm-indicator.active{
  transform:translateY(1px);
}
.audio-recorder .recorder-bpm-indicator.active{
  border-color:#5f9a8d;
  background:#27423b;
}
.audio-recorder .recorder-bpm-indicator.hidden{
  display:none;
}
.audio-recorder .bpm-sync-btn{
  width:24px;
  height:24px;
  padding:0;
  border:none;
  background:transparent;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.audio-recorder .bpm-sync-btn.active{
  color:#8ed2bf;
}
.audio-recorder .recorder-status-pill{
  min-height:30px;
  padding:0 10px;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:rgba(255,255,255,0.04);
  color:var(--text);
  font-family:var(--mono);
  font-size:12px;
  line-height:30px;
  letter-spacing:.02em;
  white-space:nowrap;
}
.audio-recorder .recorder-status-pill:empty{
  display:none;
}
.audio-recorder .recorder-status-pill--countdown{
  color:#bde7c8;
}
.audio-recorder .bpm-popover{
  position:absolute;
  left:0;
  top:calc(100% + 8px);
  width:244px;
  padding:12px;
  border:1px solid var(--border2);
  border-radius:var(--r2);
  background:#121212;
  box-shadow:0 12px 28px rgba(0,0,0,0.42);
  z-index:12;
}
.audio-recorder .bpm-popover .volume-popover-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
  font-family:var(--mono);
  font-size:11px;
  color:var(--muted);
}
.audio-recorder .bpm-popover .volume-popover-value{
  color:var(--text);
}
.audio-recorder .bpm-popover input[type="range"]{
  width:100%;
  margin:0 0 10px;
}
.audio-recorder .bpm-popover input[type="range"]:last-of-type{
  margin-bottom:0;
}
.audio-recorder .recorder-overlay{
  position:relative;
  z-index:2;
  width:100%;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.audio-recorder .recorder-preview{
  width:100%;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.audio-recorder .recorder-preview audio{
  width:min(100%, 360px);
  height:60px;
}
.audio-recorder .recorder-preview audio::-webkit-media-controls-panel{
  background:#dddddd;
  border-radius:12px;
}
.audio-recorder .audio-recorder-runtime-controls{
  width:100%;
  max-width:none;
  margin:0 auto;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:var(--surface-1);
}
.audio-recorder .recorder-float-controls{
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding-inline:0;
  box-sizing:border-box;
}
.audio-recorder .audio-recorder-runtime-controls > .ui-runtime-icon-btn{
  position:static;
  flex:0 0 40px;
  width:40px;
  height:40px;
}
.audio-recorder .audio-recorder-runtime-controls > .ui-runtime-icon-btn:disabled{
  opacity:.38;
  cursor:not-allowed;
}
.audio-recorder .audio-recorder-runtime-controls > .ui-runtime-icon-btn.active{
  border-color:#5f9a8d;
  background:#27423b;
}
.audio-recorder #muteToggle.active{
  border-color:#8a6448;
  background:#3f2a20;
  color:#ffd2b5;
}
.audio-recorder .recorder-ptt-btn{
  flex:1 1 220px;
  min-width:0;
  max-width:260px;
}
.audio-recorder .recorder-ptt-btn.active{
  border-color:#5f9a8d;
  background:#27423b;
  color:var(--text);
}
.audio-recorder #replayRecordingBtn{
  position:static;
  transform:none;
}
.audio-recorder #replayRecordingBtn:active:not(:disabled){
  transform:translateY(1px);
}
.audio-recorder .audio-toolbar{
  width:100%;
}
@media (max-width: 640px){
  .audio-recorder .recorder-wrapper{
    padding:12px;
    min-height:260px;
  }
  .audio-recorder .recorder-float-controls{
    width:100%;
    gap:6px;
    padding-inline:10px;
  }
  .audio-recorder .recorder-ptt-btn{
    max-width:none;
    font-size:11px;
    padding:0 10px;
  }
}
@media (max-width: 520px){
  .audio-recorder .recorder-status-line{
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:start;
    justify-items:stretch;
  }
  .audio-recorder .recorder-status-line .bpm-indicator-wrap{
    grid-column:1;
    justify-self:start;
  }
  .audio-recorder .recorder-status-line #statusText{
    display:none;
  }
  .audio-recorder .recorder-status-line #countdownText{
    grid-column:2;
    justify-self:end;
  }
  .audio-recorder .recorder-float-controls{
    width:100%;
    padding-inline:10px;
  }
  .audio-recorder .audio-recorder-runtime-controls > .ui-runtime-icon-btn{
    flex-basis:36px;
    width:36px;
    height:36px;
  }
  .audio-recorder .recorder-ptt-btn{
    height:40px;
  }
}
.audio-player-shell{
  gap:14px;
}
.audio-player .audio-player-reset-row{
  padding-top:4px;
}
.audio-player .audio-player-reset-row > .ui-btn--md{
  width:100%;
  justify-content:center;
}
.audio-player .audio-player-settings-heading{
  margin-top:4px;
  padding-top:8px;
  border-top:1px solid var(--border);
}
.audio-player .audio-player-settings-heading .ui-settings-label{
  color:var(--text);
  font-weight:700;
}
.audio-player .audio-player-stack{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.audio-player .recorder-wrapper{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  padding:14px;
  border:1px solid rgba(255,255,255,0.05);
  border-radius:var(--r2);
  background:#121212;
  overflow:hidden;
}
.audio-player .audio-player-visualizer-wrapper{
  min-height:260px;
  overflow:visible;
  justify-content:flex-start;
}
.audio-player .audio-player-runtime-controls{
  align-self:center;
}
.audio-player .recorder-wrapper.audio-player-wrapper{
  width:min(100%, 1200px);
  margin:0 auto;
  min-height:0;
  gap:12px;
  padding:0;
  overflow:visible;
  border:none;
  background:transparent;
}
.audio-player .recorder-visualizer{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.62;
  overflow:hidden;
  border-radius:inherit;
}
.audio-player .recorder-visualizer canvas{
  display:block;
  width:100%;
  height:100%;
}
.audio-player .recorder-status-line{
  position:relative;
  z-index:2;
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:10px;
}
.audio-player .recorder-status-line .bpm-indicator-wrap{
  grid-column:1;
  justify-self:start;
}
.audio-player .recorder-status-line #statusText{
  grid-column:2;
  justify-self:center;
}
.audio-player .recorder-status-line #countdownText{
  grid-column:3;
  justify-self:end;
}
.audio-player .bpm-indicator-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.audio-player .recorder-bpm-indicator{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:64px;
  min-height:30px;
  padding:0 10px;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:rgba(255,255,255,0.04);
  color:var(--text);
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.12px;
  line-height:1;
  cursor:pointer;
  transform:translateY(0);
  transition:transform .04s ease, background .08s ease, border-color .08s ease, color .08s ease;
}
.audio-player .recorder-bpm-indicator:hover{
  border-color:#5a5a5a;
  background:#202020;
}
.audio-player .recorder-bpm-indicator:active,
.audio-player .recorder-bpm-indicator.active{
  transform:translateY(1px);
}
.audio-player .recorder-bpm-indicator.active{
  border-color:#5f9a8d;
  background:#27423b;
}
.audio-player .recorder-bpm-indicator.hidden{
  display:none;
}
.audio-player .bpm-sync-btn{
  width:30px;
  height:30px;
  padding:0;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:rgba(255,255,255,0.04);
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transform:translateY(0);
  transition:transform .04s ease, background .08s ease, border-color .08s ease, color .08s ease;
}
.audio-player .bpm-sync-btn:hover{
  border-color:#5a5a5a;
  background:#202020;
  color:var(--text);
}
.audio-player .bpm-sync-btn:active{
  transform:translateY(1px);
}
.audio-player .bpm-sync-btn.active{
  border-color:#5f9a8d;
  background:#27423b;
  color:var(--text);
}
.audio-player .recorder-status-pill{
  min-height:30px;
  padding:0 10px;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:rgba(255,255,255,0.04);
  color:var(--text);
  font-family:var(--mono);
  font-size:12px;
  line-height:30px;
  letter-spacing:.02em;
  white-space:nowrap;
}
.audio-player .recorder-status-pill:empty{
  display:none;
}
.audio-player .recorder-status-pill--countdown{
  color:#bde7c8;
}
.audio-player .bpm-popover{
  position:absolute;
  left:0;
  top:calc(100% + 8px);
  width:244px;
  padding:12px;
  border:1px solid var(--border2);
  border-radius:var(--r2);
  background:#121212;
  box-shadow:0 12px 28px rgba(0,0,0,0.42);
  z-index:8;
}
.audio-player .volume-popover-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
  font-family:var(--mono);
  font-size:11px;
  color:var(--muted);
}
.audio-player .volume-popover-value{
  color:var(--text);
}
.audio-player .bpm-popover input[type="range"]{
  width:100%;
  margin:0 0 10px;
}
.audio-player .bpm-popover input[type="range"]:last-of-type{
  margin-bottom:0;
}
.audio-player .audio-player-panel{
  position:relative;
  z-index:2;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.audio-player .player-progress{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:45px;
  margin:0;
}
.audio-player .player-progress span{
  min-width:44px;
  text-align:center;
  color:#d8d8d8;
  font-variant-numeric:tabular-nums;
}
.audio-player .player-progress input[type="range"]{
  flex:1 1 auto;
  min-width:140px;
  margin:0;
}
.audio-player .player-progress-actions{
  position:relative;
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}
.audio-player .player-progress-btn{
  width:40px;
  min-width:40px;
  height:40px;
  padding:0;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:var(--surface-2);
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .04s ease, background .08s ease, border-color .08s ease, color .08s ease;
}
.audio-player .player-progress-btn:hover{
  background:#2c2c2c;
  color:#fff;
  border-color:#4d5159;
}
.audio-player .player-progress-btn:active{
  transform:translateY(1px);
}
.audio-player .player-progress-btn.active{
  background:#27423b;
  color:#fff;
  border-color:#5f9a8d;
}
.audio-player #muteBtn.active{
  background:#3f2a20;
  border-color:#8a6448;
  color:#ffd2b5;
}
.audio-player .volume-popover{
  position:absolute;
  right:0;
  bottom:48px;
  width:244px;
  padding:12px;
  border:1px solid var(--border2);
  border-radius:var(--r2);
  background:#121212;
  box-shadow:0 12px 28px rgba(0,0,0,0.42);
  z-index:8;
}
.audio-player .volume-popover-section{
  margin-top:10px;
  padding-top:8px;
  border-top:1px solid #1f1f1f;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.audio-player .volume-popover-section .volume-popover-row{
  margin-bottom:4px;
  gap:8px;
}
.audio-player .audio-player__popover-switch{
  flex:0 0 auto;
}
.audio-player .audio-player-library{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.audio-player .library-panel{
  width:100%;
  position:relative;
}
.audio-player .library-head{
  width:100%;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.audio-player .library-head-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1 1 auto;
}
.audio-player .library-title{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.14px;
  color:var(--text);
}
.audio-player .library-head-left .config-section-toggle-btn i{
  transition:transform .2s ease;
}
.audio-player .library-head-left .config-section-toggle-btn i.collapsed{
  transform:rotate(-90deg);
}
.audio-player .library-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}
.audio-player .library-actions .ui-runtime-chip--action{
  min-width:auto;
  padding:0 12px;
  gap:6px;
}
.audio-player .library-collapsed-row{
  position:relative;
  width:100%;
  min-height:56px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:#171717;
  display:flex;
  align-items:center;
  gap:8px;
  color:#d8d8d8;
  box-sizing:border-box;
}
.audio-player .library-collapsed-prefix{
  opacity:.75;
  flex:0 0 auto;
}
.audio-player .library-collapsed-title{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.audio-player .library-collapsed-time{
  opacity:.75;
  flex:0 0 auto;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.audio-player .library-collapsed-state{
  opacity:.75;
  flex:0 0 auto;
}
.audio-player .library-collapsed-hint{
  width:100%;
  text-align:center;
  opacity:.75;
}
.audio-player .library-collapsed-row.dragover{
  background:#1c1c1c;
}
.audio-player .library-collapsed-row.dragover::after,
.audio-player .library-panel.dragover::after{
  content:"";
  position:absolute;
  inset:0;
  border:2px dashed rgba(255,255,255,0.22);
  border-radius:var(--r2);
  pointer-events:none;
}
.audio-player .library-collapsed-row .track-badge{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  padding:1px 8px;
  border-radius:var(--r2);
  border:1px solid var(--border);
  background:#202020;
  color:#d8d8d8;
  font-size:11px;
  line-height:1.2;
}
.audio-player .playlist{
  list-style:none;
  margin:0;
  padding:0;
  min-height:100px;
  max-height:300px;
  overflow-y:auto;
  overflow-x:hidden;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:#171717;
}
.audio-player .playlist-item{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:8px 10px 6px 4px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  margin:0;
  cursor:pointer;
}
.audio-player .playlist-item:last-child{
  border-bottom:none;
}
.audio-player .playlist-item.active{
  background:#223730;
  box-shadow:inset 2px 0 0 #79b7aa;
}
.audio-player .playlist-item.is-disabled .track-main,
.audio-player .playlist-item.is-disabled .track-index{
  opacity:.62;
}
.audio-player .playlist-item.drop-before{
  box-shadow:inset 0 2px 0 rgba(255,255,255,0.3);
}
.audio-player .playlist-item.drop-after{
  box-shadow:inset 0 -2px 0 rgba(255,255,255,0.3);
}
.audio-player .playlist-item.dragging{
  opacity:.28;
}
.audio-player .playlist-item.is-disabled.active{
  background:#1d2926;
  box-shadow:inset 2px 0 0 #56796f;
}
.audio-player .playlist-item.active .track-name{
  color:#f3fffb;
}
.audio-player .playlist-item.active .track-badge--duration{
  color:#dff5ef;
}
.audio-player .playlist .track-index{
  flex:0 0 auto;
  width:32px;
  margin-left:-8px;
  text-align:center;
  font-family:var(--mono);
  font-size:16px;
  font-weight:700;
  color:#dddddd;
  font-variant-numeric:tabular-nums;
}
.audio-player .playlist .track-main{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.audio-player .playlist .track-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  margin-left:auto;
}
.audio-player .playlist .track-top{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.audio-player .playlist .track-name{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text);
}
.audio-player .playlist .track-badge--duration{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-width:48px;
  padding:0;
  border:none;
  background:transparent;
  color:#c8c8c8;
  font-family:var(--mono);
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  text-align:right;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.audio-player .playlist .track-meta{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  opacity:.9;
}
.audio-player .playlist .track-badge{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  padding:1px 8px;
  border-radius:var(--r2);
  border:1px solid var(--border);
  background:#202020;
  color:#d8d8d8;
  font-size:11px;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.audio-player .playlist-empty{
  height:100px;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  opacity:.75;
  cursor:default;
}
.audio-player .track-drag-handle{
  width:32px;
  height:44px;
  border:none;
  background:transparent;
  color:#e6e6e6;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:grab;
  flex:0 0 auto;
  opacity:.78;
  user-select:none;
  transition:opacity .15s ease, transform .15s ease;
}
.audio-player .track-drag-handle:hover{
  opacity:1;
}
.audio-player .track-drag-handle:active{
  cursor:grabbing;
  transform:translateY(1px);
}
.audio-player .playlist-item.is-disabled .track-drag-handle{
  opacity:.18;
  cursor:not-allowed;
  pointer-events:none;
}
.audio-player .track-enabled-btn{
  position:relative;
  width:40px;
  height:40px;
  border:1px solid #3a3a3a;
  border-radius:var(--r2);
  background:#2b2b2b;
  color:#cfcfcf;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex:0 0 auto;
  transition:background .08s ease, color .08s ease, border-color .08s ease, transform .04s ease;
}
.audio-player .track-enabled-btn::before{
  content:"";
  position:absolute;
  top:4px;
  left:4px;
  width:5px;
  height:5px;
  border-radius:2px;
  background:#444444;
  opacity:.6;
  transition:background .08s ease, transform .08s ease, opacity .08s ease;
}
.audio-player .track-enabled-btn:hover{
  background:#323232;
  color:#fff;
  border-color:#4a4a4a;
}
.audio-player .track-enabled-btn:active{
  transform:translateY(1px);
}
.audio-player .track-enabled-btn.is-enabled::before{
  background:#4caf50;
  opacity:1;
  transform:scale(1.15);
}
.audio-player .playlist-item.is-disabled .track-enabled-btn{
  background:#242424;
  border-color:#333333;
  color:#9a9a9a;
}
.audio-player .track-remove-btn{
  width:40px;
  height:40px;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:#1b1b1b;
  color:#e6e6e6;
  font-size:18px;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex:0 0 auto;
  transition:background .08s ease, transform .04s ease;
}
.audio-player .track-remove-btn:hover{
  background:#242424;
}
.audio-player .track-remove-btn:active{
  transform:translateY(1px);
}
.audio-player .track-remove-btn:disabled{
  opacity:.22;
  cursor:not-allowed;
}
.audio-player #musicPlayer{
  display:none;
}
@media (min-width: 641px){
  .audio-player .audio-player-visualizer-wrapper{
    min-height:360px;
  }
}
@media (max-width: 640px){
  .audio-player .player-progress{
    max-width:100%;
  }
  .audio-player .audio-player-runtime-controls{
    width:100%;
    max-width:none;
  }
  .audio-player .playlist{
    height:240px;
  }
  .audio-player .library-actions .ui-runtime-chip--action span{
    display:none;
  }
  .audio-player .library-actions .ui-runtime-chip--action{
    min-width:44px;
    width:44px;
    padding:0;
    gap:0;
  }
}
@media (max-width: 520px){
  .audio-player .recorder-status-line{
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:start;
    justify-items:stretch;
  }
  .audio-player .recorder-status-line .bpm-indicator-wrap{
    grid-column:1;
    justify-self:start;
  }
  .audio-player .recorder-status-line #statusText{
    display:none;
  }
  .audio-player .recorder-status-line #countdownText{
    grid-column:2;
    justify-self:end;
  }
  .audio-player .player-progress{
    flex-wrap:nowrap;
    gap:6px;
  }
  .audio-player .player-progress span{
    min-width:36px;
    font-size:11px;
  }
  .audio-player .player-progress input[type="range"]{
    min-width:0;
  }
  .audio-player .player-progress-actions{
    gap:4px;
  }
  .audio-player .player-progress-btn{
    width:36px;
    min-width:36px;
    height:36px;
  }
}
.midi-sender-shell{
  gap:14px;
}
.midi-sender-page .ui-runtime-log-wrap{
  width:100%;
  margin-top:8px;
}
.midi-sender-page .midi-panel{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.midi-sender-page .midi-status-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.midi-sender-page .midi-status-left{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1 1 auto;
  flex-wrap:wrap;
}
.midi-sender-page .midi-status-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.midi-sender-page .midi-assign-label{
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14px;
  color:var(--muted);
  text-transform:uppercase;
}
.midi-sender-page .midi-assign-toggle{
  flex:0 0 auto;
  transform:scale(0.92);
  transform-origin:center;
}
.midi-sender-page .midi-assign-status{
  font-size:12px;
  color:#f5c05a;
}
.midi-sender-page .midi-assign-status.hidden{
  display:none;
}
.midi-sender-page .midi-toolbar-permission-btn .btn-label{
  display:inline;
}
.midi-sender-page .midi-device-chips .midi-device-chip{
  width:auto;
  min-width:44px;
}
.midi-sender-page .midi-device-chips .midi-device-chip.connected{
  border-color:#5f9a8d;
  color:var(--text);
}
.midi-sender-page .midi-controls{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.midi-sender-page .config-section{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
}
.midi-sender-page .config-section-header{
  display:flex;
  align-items:center;
  gap:10px;
}
.midi-sender-page .config-section-title{
  color:var(--text);
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.14px;
  text-transform:uppercase;
}
.midi-sender-page .config-section-body{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.midi-sender-page .config-section.collapsed .config-section-body{
  display:none;
}
.midi-sender-page .config-section-header i.collapsed{
  transform:rotate(-90deg);
}
.midi-sender-page .ui-grid-btn{
  border-radius:var(--r2);
  background:var(--surface-3);
}
.midi-sender-page .ui-grid-btn:hover:not(.is-active){
  background:var(--surface-3);
  border-color:#4d5159;
}
.midi-sender-page .ui-grid-btn.is-active{
  background:#27423b;
  border-color:#5f9a8d;
  color:var(--text);
}
.ui-preset-action.is-disabled{
  opacity:0;
  pointer-events:none;
}
.ui-preset-item:hover .ui-preset-action.is-disabled,
.ui-preset-item:focus-within .ui-preset-action.is-disabled{
  opacity:.35;
}
.midi-sender-page .midi-preset-toolbar{
  gap:8px;
  margin-top:2px;
}
.midi-sender-page .midi-preset-toolbar > .ui-runtime-icon-btn,
.midi-sender-page #midiPresetImportBtn,
.midi-sender-page #midiPresetExportBtn,
.midi-sender-page #midiPresetSyncBtn{
  width:40px;
  height:40px;
}
.midi-sender-page .midi-presets-section .ui-grid-btn-group .ui-grid-btn i,
.midi-sender-page .midi-preset-toolbar > .ui-runtime-icon-btn i,
.midi-sender-page #midiPresetImportBtn i,
.midi-sender-page #midiPresetExportBtn i,
.midi-sender-page #midiPresetSyncBtn i{
  font-size:16px;
}
.midi-sender-page .midi-control-section{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.midi-sender-page .midi-control-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(86px, 1fr));
  gap:12px;
}
.midi-sender-page .midi-control-grid--xy{
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
}
.midi-sender-page .midi-control-cell{
  position:relative;
  overflow:visible;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:6px 6px 4px;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:var(--surface-3);
}
.midi-sender-page .midi-control-cell--xy{
  --xy-axis-size:24px;
  --xy-cell-padding:5px;
  align-items:stretch;
  padding:var(--xy-cell-padding) calc(var(--xy-cell-padding) + var(--xy-axis-size)) 4px var(--xy-cell-padding);
}
.midi-sender-page .midi-control-cell--flat{
  padding:0;
  border:none;
  background:transparent;
}
.midi-sender-page .midi-control-label{
  min-height:14px;
  margin-top:2px;
  color:#cfcfcf;
  font-family:var(--mono);
  font-size:11px;
  text-align:center;
  white-space:nowrap;
}
.midi-sender-page .midi-control-value{
  min-height:14px;
  color:#d0d0d0;
  font-family:var(--mono);
  font-size:12px;
}
.midi-sender-page .ui-reset-btn{
  margin-top:2px;
}
.midi-sender-page .midi-xy-layout{
  display:grid;
  grid-template-columns:var(--xy-axis-size) 1fr;
  grid-template-rows:1fr var(--xy-axis-size);
  width:100%;
  gap:0;
  align-items:stretch;
}
.midi-sender-page .midi-xy-pad{
  position:relative;
  grid-column:2 / 3;
  grid-row:1 / 2;
  z-index:1;
  width:100%;
  aspect-ratio:1 / 1;
  border:1px solid #2b2f35;
  background-color:#101010;
  border-radius:0;
  overflow:hidden;
  cursor:crosshair;
  touch-action:none;
}
.midi-sender-page .midi-xy-pad::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:var(--xy-grid-background, none);
  background-repeat:no-repeat;
}
.midi-sender-page .midi-xy-guide{
  position:absolute;
  pointer-events:none;
  background:rgba(76,175,80,0.5);
}
.midi-sender-page .midi-xy-guide--x{
  top:0;
  bottom:0;
  width:2px;
}
.midi-sender-page .midi-xy-guide--y{
  left:0;
  right:0;
  height:2px;
}
.midi-sender-page .midi-xy-indicator{
  position:absolute;
  left:50%;
  top:50%;
  z-index:3;
  width:18px;
  height:18px;
  border-radius:2px;
  border:0;
  background:#5f9a8d;
  transform:translate(-50%, -50%);
  pointer-events:none;
}
.midi-sender-page .midi-xy-trail{
  position:absolute;
  width:14px;
  height:14px;
  border-radius:2px;
  background:rgba(95,154,141,0.82);
  transform:translate(-50%, -50%);
  pointer-events:none;
  animation:midiXYTrailFade .45s ease-out forwards;
}
.midi-sender-page .midi-xy-axis-label{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  box-sizing:border-box;
  padding:0 6px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#cfcfcf;
  font-size:11px;
  line-height:1.1;
  text-align:center;
  white-space:nowrap;
  user-select:none;
  cursor:pointer;
}
.midi-sender-page .midi-xy-axis-wrap{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.midi-sender-page .midi-xy-axis-label-text{
  font-size:11px;
  color:#cfcfcf;
  text-align:center;
}
.midi-sender-page .midi-xy-axis-badge{
  padding:1px 6px;
  border:1px solid #2a2a2a;
  border-radius:var(--r2);
  background:#161616;
  color:#bdbdbd;
  font-size:10px;
  line-height:1;
  white-space:nowrap;
  text-align:center;
}
.midi-sender-page .midi-xy-axis-label--y .midi-xy-axis-badge{
  padding:6px 1px;
}
.midi-sender-page .midi-xy-axis-label--x{
  grid-column:2 / 3;
  grid-row:2 / 3;
  transform:translateY(1px);
}
.midi-sender-page .midi-xy-axis-label--y{
  grid-column:1 / 2;
  grid-row:1 / 2;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  transform:rotate(180deg) translateX(1px);
  transform-origin:center;
}
.midi-sender-page .midi-assign-hint .midi-xy-axis-label--x,
.midi-sender-page .midi-assign-hint .midi-xy-axis-label--y{
  box-shadow:0 0 0 1px rgba(255,183,77,0.35);
}
.midi-sender-page .midi-knob{
  position:relative;
  width:72px;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  touch-action:none;
}
.midi-sender-page .midi-knob-dial{
  position:relative;
  z-index:1;
  width:64px;
  height:64px;
  border:1px solid #454950;
  border-radius:50%;
  background:var(--surface-3);
  box-shadow:none;
}
.midi-sender-page .midi-knob-indicator{
  position:absolute;
  top:10px;
  left:50%;
  width:4px;
  height:22px;
  border-radius:2px;
  background:#5f9a8d;
  transform:translateX(-50%) rotate(var(--knob-angle, -135deg));
  transform-origin:50% 22px;
  box-shadow:none;
}
.midi-sender-page .midi-knob-ticks{
  position:absolute;
  top:0;
  left:0;
  z-index:2;
  width:72px;
  height:72px;
  pointer-events:none;
}
.midi-sender-page .midi-knob-tick{
  position:absolute;
  top:calc(50% - 2px);
  left:calc(50% - 2px);
  width:6px;
  height:1px;
  border-radius:2px;
  background:#3a3a3a;
  opacity:.5;
  transform:translate(-50%, -50%) rotate(var(--tick-angle)) translate(0, -33px) rotate(90deg);
  transform-origin:center;
}
.midi-sender-page .midi-knob-tick--major{
  width:12px;
  height:2px;
}
.midi-sender-page .midi-knob-tick.is-active{
  background:#7fb1a3;
  opacity:1;
  box-shadow:none;
}
.midi-sender-page .midi-pad,
.midi-sender-page .midi-toggle{
  position:relative;
  overflow:hidden;
  touch-action:none;
}
.midi-sender-page .midi-btn-label{
  pointer-events:none;
}
.midi-sender-page .midi-pad.is-active{
  background:#27423b;
  border-color:#5f9a8d;
  box-shadow:none;
}
.midi-sender-page .midi-pad.is-active:hover{
  background:#2e4e46;
  border-color:#79b7aa;
  box-shadow:none;
}
.midi-sender-page .midi-bind-btn{
  position:absolute;
  top:-3px;
  right:-3px;
  z-index:2;
  opacity:0;
  pointer-events:none;
  min-height:18px;
  min-width:30px;
  height:18px;
  padding:0 6px;
  border:0;
  background:transparent;
  font-size:7px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  overflow:visible;
}
.midi-sender-page .midi-bind-btn::before{
  content:"";
  position:absolute;
  inset:4px;
  border:1px solid #5f9a8d;
  border-radius:var(--r2);
  background:#223730;
  z-index:-1;
}
.midi-sender-page .midi-control-cell--xy .midi-bind-btn{
  right:-3px;
}
.midi-sender-page .midi-bind-btn i{
  display:none;
}
.midi-sender-page .midi-bind-btn.is-visible,
.midi-sender-page .midi-control-cell.is-bound .midi-bind-btn,
.midi-sender-page .midi-toggle.is-bound .midi-bind-btn,
.midi-sender-page .midi-pad.is-bound .midi-bind-btn{
  opacity:1;
  pointer-events:auto;
  color:var(--text);
}
.midi-sender-page .midi-toggle .midi-bind-btn,
.midi-sender-page .midi-pad .midi-bind-btn{
  min-height:16px;
  top:-3px;
  right:-3px;
  height:16px;
  min-width:24px;
  padding:0 4px;
  font-size:6px;
}
.midi-sender-page .midi-toggle .midi-bind-btn::before,
.midi-sender-page .midi-pad .midi-bind-btn::before{
  inset:3px;
}
.midi-sender-page .midi-assigning{
  box-shadow:0 0 0 2px rgba(255,183,77,0.9), 0 0 12px rgba(255,183,77,0.45);
  animation:midiAssignPulse 1s ease-in-out infinite;
}
.midi-sender-page .midi-dialog-row{
  margin:2px 0;
}
.midi-sender-page .midi-dialog-row.ui-settings-row--split{
  gap:10px;
}
.midi-sender-page .midi-dialog-row.ui-settings-row--split > .ui-settings-label{
  width:120px;
  min-width:120px;
  font-size:13px;
}
.midi-sender-page .midi-dialog-row.ui-settings-row--split > .ui-settings-control{
  justify-content:flex-start;
  gap:8px;
}
.midi-sender-page .midi-dialog-row.ui-toggle-row{
  min-height:38px;
  padding:0 10px;
}
.midi-sender-page .midi-dialog-row.ui-toggle-row .ui-toggle-row__text{
  font-size:13px;
}
.midi-sender-page .midi-dialog-value{
  color:#dcdcdc;
  font-size:13px;
}
.midi-sender-page .midi-dialog-edit{
  display:block;
  width:100%;
}
.midi-sender-page .midi-dialog-row .ui-input{
  min-height:36px;
}
.midi-sender-page .midi-dialog-control-inline{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  width:100%;
}
.midi-sender-page .midi-dialog-control-inline > .ui-btn--sm{
  width:auto;
  min-width:52px;
  height:25px;
  padding:2px 10px;
  margin-left:8px;
  font-size:12px;
}
.midi-sender__dialog-body{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.midi-sender-page .midi-dialog-actions{
  justify-content:flex-end;
}
.midi-sender-page .midi-sender__dialog .ui-btn--md{
  min-width:128px;
}
.midi-sender-page .midi-permission-dialog .ui-btn--md{
  min-width:0;
}
.midi-sender-page .midi-sender__dialog .ui-input-row .ui-input{
  width:100%;
}
.midi-sender-page .midi-sender__dialog .ui-dialog__note{
  margin:0;
}
.midi-sender-page .midi-sender__dialog .ui-dialog__title{
  text-transform:none;
}
@keyframes midiXYTrailFade{
  0%{ opacity:.55; transform:translate(-50%, -50%) scale(1); }
  60%{ opacity:.5; transform:translate(-50%, -50%) scale(.95); }
  85%{ opacity:.18; transform:translate(-50%, -50%) scale(.45); }
  100%{ opacity:0; transform:translate(-50%, -50%) scale(.2); }
}
@keyframes midiAssignPulse{
  0%{ box-shadow:0 0 0 2px rgba(255,183,77,0.9), 0 0 8px rgba(255,183,77,0.3); }
  50%{ box-shadow:0 0 0 2px rgba(255,183,77,0.9), 0 0 14px rgba(255,183,77,0.6); }
  100%{ box-shadow:0 0 0 2px rgba(255,183,77,0.9), 0 0 8px rgba(255,183,77,0.3); }
}
@media (max-width: 820px) and (min-width: 641px){
  .midi-sender-page .midi-control-grid{
    grid-template-columns:repeat(8, minmax(0, 1fr));
    gap:8px;
  }
  .midi-sender-page .midi-control-grid--xy{
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    justify-items:start;
  }
  .midi-sender-page .midi-control-cell--xy{
    max-width:300px;
    width:100%;
  }
  .midi-sender-page .midi-xy-pad{
    max-width:250px;
    max-height:250px;
    margin:0 auto;
  }
  .midi-sender-page .midi-control-cell{
    padding:6px;
    gap:4px;
  }
  .midi-sender-page .midi-knob{
    width:60px;
    height:60px;
  }
  .midi-sender-page .midi-knob-dial{
    width:54px;
    height:54px;
  }
  .midi-sender-page .midi-knob-ticks{
    width:60px;
    height:60px;
  }
  .midi-sender-page .midi-knob-tick{
    transform:translate(-50%, -50%) rotate(var(--tick-angle)) translate(0, -28px) rotate(90deg);
  }
  .midi-sender-page .ui-range-wrap--vertical{
    width:28px;
    height:140px;
  }
}
@media (max-width: 640px){
  .gamepad-sender-page .ui-runtime-toolbar,
  .midi-sender-page .ui-runtime-toolbar,
  .gyro-controls.ui-sender-toolbar{
    padding:0;
    display:flex !important;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .gamepad-sender-page .ui-runtime-toolbar__left,
  .gamepad-sender-page .ui-runtime-toolbar__center,
  .gamepad-sender-page .ui-runtime-toolbar__right,
  .midi-sender-page .ui-runtime-toolbar__left,
  .midi-sender-page .ui-runtime-toolbar__center,
  .midi-sender-page .ui-runtime-toolbar__right,
  .gyro-controls.ui-sender-toolbar .ui-runtime-toolbar__left,
  .gyro-controls.ui-sender-toolbar .ui-runtime-toolbar__center,
  .gyro-controls.ui-sender-toolbar .ui-runtime-toolbar__right{
    justify-self:auto;
    width:100%;
  }
  .gyro-controls #togglePauseBtn{
    width:100%;
    min-width:0;
  }
  .gamepad-index-toolbar,
  .midi-device-toolbar{
    flex-wrap:wrap;
  }
  .midi-sender-page .midi-control-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
  }
  .midi-sender-page .midi-control-grid--xy{
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    justify-items:start;
  }
  .midi-sender-page .midi-control-cell--xy{
    max-width:300px;
    width:100%;
  }
  .midi-sender-page .midi-xy-pad{
    max-width:250px;
    max-height:250px;
    margin:0 auto;
  }
  .midi-sender-page #midiPermissionEntryBtn .btn-label{
    display:none;
  }
  .midi-sender-page #midiPermissionEntryBtn{
    min-width:40px;
    padding:0 10px;
    gap:0;
  }
}
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
  white-space:nowrap;
}
.image-settings-sender-shell{
  gap:14px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}
.image-settings-sender-page .image-settings-sender__audio-toggle{
  margin-bottom:10px;
}
.image-settings-sender-page .image-settings-toggle-grid .ui-grid-btn{
  min-width:72px;
  height:72px;
}
.ui-preset-feedback{
  animation:uiPresetFeedback .22s ease-out;
}
@keyframes uiPresetFeedback{
  0%{ transform:translateY(0) scale(1); }
  45%{ transform:translateY(1px) scale(.94); filter:brightness(1.14); }
  100%{ transform:translateY(0) scale(1); }
}
.ui-preset-dirty{
  position:absolute;
  top:4px;
  left:4px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ffb74d;
  box-shadow:0 0 6px rgba(255,183,77,0.6);
  opacity:0;
}
.is-dirty > .ui-preset-dirty{
  opacity:1;
}
.ui-preset-item{
  position:relative;
  width:72px;
  height:72px;
}
.ui-preset-item-btn{
  width:100%;
  height:100%;
  border-radius:var(--r2);
}
.ui-preset-item-btn--add i{
  font-size:16px;
}
.ui-preset-action{
  position:absolute;
  width:20px;
  height:20px;
  padding:0;
  border:1px solid rgba(255,255,255,0.2);
  border-radius:var(--r2);
  color:#f0f0f0;
  font-size:10px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease, transform .04s ease;
  background:rgba(0,0,0,0.55);
}
.ui-preset-item:hover .ui-preset-action,
.ui-preset-item:focus-within .ui-preset-action{
  opacity:1;
  pointer-events:auto;
}
.ui-preset-action--save{
  right:3px;
  bottom:3px;
}
.ui-preset-action--edit{
  left:3px;
  bottom:3px;
}
.ui-preset-action--delete{
  top:3px;
  right:3px;
  color:#ffb0b0;
  border-color:#7d4b56;
  background:#342026;
}
.ui-preset-action:active{
  transform:scale(.96);
}
.image-settings-sender-page #v2PresetCustomShaderReloadBtn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.image-settings-sender-page #v2PresetCustomShaderReloadBtn i{
  position:relative;
  z-index:2;
}
.image-settings-sender-page #v2PresetCustomShaderReloadBtn::before{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:7px;
  background:radial-gradient(circle at center, rgba(92,214,102,0.34), rgba(92,214,102,0));
  opacity:0;
  transition:opacity .16s ease;
  pointer-events:none;
  z-index:0;
}
.image-settings-sender-page #v2PresetCustomShaderReloadBtn::after{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:7px;
  background:conic-gradient(
    from 0deg,
    rgba(92,214,102,0.2) calc((1 - var(--reload-cooldown-progress, 0)) * 1turn),
    rgba(92,214,102,0.96) 0turn
  );
  opacity:0;
  transition:opacity .16s ease;
  pointer-events:none;
  z-index:1;
}
.image-settings-sender-page #v2PresetCustomShaderReloadBtn.custom-shader-reload-btn--auto{
  box-shadow:0 0 0 1px rgba(92,214,102,0.52), 0 0 14px rgba(92,214,102,0.3), inset 0 0 0 1px rgba(255,255,255,0.08);
}
.image-settings-sender-page #v2PresetCustomShaderReloadBtn.custom-shader-reload-btn--auto::before,
.image-settings-sender-page #v2PresetCustomShaderReloadBtn.custom-shader-reload-btn--auto::after{
  opacity:1;
}
.image-settings-sender-page #v2PresetCustomShaderReloadBtn.custom-shader-reload-btn--idle::after{
  background:conic-gradient(
    from 0deg,
    rgba(190,190,190,0.14) calc((1 - var(--reload-cooldown-progress, 0)) * 1turn),
    rgba(190,190,190,0.75) 0turn
  );
}
.image-settings-sender-page #v2PresetCustomShaderReloadBtn.custom-shader-reload-btn--cast{
  animation:custom-shader-reload-cast .24s ease-out;
}
@keyframes custom-shader-reload-cast{
  0%{ transform:translateY(0) scale(1); filter:brightness(1); }
  45%{ transform:translateY(1px) scale(.94); filter:brightness(1.22); }
  100%{ transform:translateY(0) scale(1); filter:brightness(1); }
}
.image-settings-sender-page .filters-wrap{
  width:100%;
  max-width:980px;
  margin:8px auto 0;
}
.image-settings-sender-page .filter-sliders-grid{
  display:grid;
  grid-template-columns:repeat(8, minmax(60px, 1fr));
  gap:18px;
  width:100%;
  box-sizing:border-box;
}
.image-settings-sender-page .filter-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:10px 8px;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:var(--surface-3);
  touch-action:none;
  overscroll-behavior:contain;
  transition:border-color .08s ease, background .08s ease, transform .04s ease;
}
.image-settings-sender-page .ui-grid-btn,
.image-settings-sender-page .ui-preset-item-btn{
  background:var(--surface-3);
}
.image-settings-sender-page .ui-grid-btn:hover:not(.is-active),
.image-settings-sender-page .ui-preset-item-btn:hover:not(.is-active){
  background:var(--surface-3);
  border-color:#4d5159;
}
.image-settings-sender-page .filter-card.held{
  border-color:#5f9a8d;
  background:#1f3530;
}
.image-settings-sender-page .filter-card.adjusting{
  border-color:#4d5159;
  background:#26282c;
}
.image-settings-sender-page .filter-name{
  width:100%;
  margin-bottom:2px;
  color:var(--muted);
  font-family:var(--mono);
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.image-settings-sender-page .filter-name .filter-index{
  display:inline-block;
  margin-right:6px;
  color:#7fb1a3;
  font-weight:700;
}
.image-settings-sender-page .filter-value{
  min-height:14px;
  margin-top:2px;
  margin-bottom:8px;
  color:var(--text);
  font-family:var(--mono);
  font-size:12px;
}
.ui-range-wrap--vertical{
  position:relative;
  width:34px;
  height:160px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ui-range.ui-range--vertical{
  appearance:none;
  -webkit-appearance:none;
  width:160px;
  height:34px;
  transform:rotate(-90deg);
  transform-origin:center;
  background:transparent;
  touch-action:none;
}
.ui-range.ui-range--vertical::-webkit-slider-runnable-track{
  height:8px;
  border:1px solid #343840;
  border-radius:var(--r2);
  background:#1e2127;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), inset 0 1px 3px rgba(0,0,0,0.45);
}
.ui-range.ui-range--vertical::-moz-range-track{
  height:8px;
  border:1px solid #343840;
  border-radius:var(--r2);
  background:#1e2127;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), inset 0 1px 3px rgba(0,0,0,0.45);
}
.ui-range.ui-range--vertical::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:22px;
  height:34px;
  margin-top:-14px;
  border:1px solid #121419;
  border-radius:var(--r2);
  background:#eef2f7;
  box-shadow:0 0 0 1px rgba(255,255,255,0.08), 0 3px 8px rgba(0,0,0,0.5);
  touch-action:none;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.ui-range.ui-range--vertical::-moz-range-thumb{
  width:22px;
  height:34px;
  border:1px solid #121419;
  border-radius:var(--r2);
  background:#eef2f7;
  box-shadow:0 0 0 1px rgba(255,255,255,0.08), 0 3px 8px rgba(0,0,0,0.5);
  touch-action:none;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.ui-range.ui-range--vertical:hover::-webkit-slider-thumb{
  background:#ffffff;
  box-shadow:0 0 0 1px rgba(255,255,255,0.14), 0 4px 10px rgba(0,0,0,0.56);
  transform:scale(1.04);
}
.ui-range.ui-range--vertical:hover::-moz-range-thumb{
  background:#ffffff;
  box-shadow:0 0 0 1px rgba(255,255,255,0.14), 0 4px 10px rgba(0,0,0,0.56);
  transform:scale(1.04);
}
.ui-range.ui-range--vertical:active::-webkit-slider-thumb{
  background:#ffffff;
  transform:scale(.98);
}
.ui-range.ui-range--vertical:active::-moz-range-thumb{
  background:#ffffff;
  transform:scale(.98);
}
.image-settings-sender-page .filter-card.adjusting .ui-range.ui-range--vertical::-webkit-slider-thumb{
  background:#ffffff;
}
.image-settings-sender-page .filter-card.adjusting .ui-range.ui-range--vertical::-moz-range-thumb{
  background:#ffffff;
}
.ui-range.ui-range--vertical:hover::-webkit-slider-runnable-track{
  background:#24282f;
}
.ui-range.ui-range--vertical:hover::-moz-range-track{
  background:#24282f;
}
.ui-range.ui-range--vertical:active::-webkit-slider-runnable-track,
.image-settings-sender-page .filter-card.adjusting .ui-range.ui-range--vertical::-webkit-slider-runnable-track{
  background:#2a2e36;
  border-color:#4d5159;
}
.ui-range.ui-range--vertical:active::-moz-range-track,
.image-settings-sender-page .filter-card.adjusting .ui-range.ui-range--vertical::-moz-range-track{
  background:#2a2e36;
  border-color:#4d5159;
}
.ui-range.ui-range--vertical:focus{
  outline:none;
}
.image-settings-sender-page .image-settings-toolbar{
  margin-top:10px;
}
.image-settings-sender-page .config-section{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:5px;
}
.image-settings-sender-page .config-section:first-of-type{
  margin-top:8px;
}
.image-settings-sender-page .config-section-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:0;
  border:none;
  background:none;
  color:#d0d0d0;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
}
.image-settings-sender-page .config-section-title{
  flex:1 1 auto;
  text-align:left;
}
.image-settings-sender-page .config-section-header i{
  transition:transform .2s ease;
}
.image-settings-sender-page .config-section-header i.collapsed{
  transform:rotate(-90deg);
}
.image-settings-sender-page .config-section-body{
  width:100%;
  margin-left:10px;
  transition:max-height .25s ease, opacity .25s ease;
}
.image-settings-sender-page .config-section.collapsed .config-section-body{
  display:none;
}
.image-settings-sender-page #v2SectionsWrap{
  display:contents;
}
.image-settings-sender-page .sub-label{
  display:block;
  margin:10px 0;
  color:#d0d0d0;
  font-size:13px;
  font-weight:600;
}
.image-settings-sender-page .bg-control{
  align-self:stretch;
  width:100%;
  margin:0;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:var(--surface-2);
  box-sizing:border-box;
  display:flex;
  gap:10px;
}
.image-settings-sender-page .bg-control-left{
  display:flex;
  flex:0 0 auto;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
}
.image-settings-sender-page .bg-control-hex{
  color:var(--text);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.04em;
}
.image-settings-sender-page .bg-control-belt-wrap{
  flex:1 1 auto;
  min-height:92px;
  display:flex;
  align-items:center;
}
.image-settings-sender-page .bg-control-swatch{
  width:34px;
  height:34px;
  border:1px solid #4a4a4a;
  border-radius:var(--r2);
  background:#222222;
  cursor:pointer;
  transition:border-color .12s ease, background .12s ease;
}
.image-settings-sender-page .bg-control-swatch:hover{
  border-color:#5b6069;
}
.image-settings-sender-page .bg-control-swatch:focus-visible{
  outline:2px solid rgba(223,231,244,0.9);
  outline-offset:2px;
}
.image-settings-sender-page .bg-control-belt{
  position:relative;
  flex:1 1 auto;
  height:92px;
  overflow:visible;
  border:1px solid #4a4a4a;
  border-radius:var(--r2);
  cursor:pointer;
  touch-action:none;
  background:
    linear-gradient(0deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.25) 45%, rgba(255,255,255,0.25) 55%, rgba(255,255,255,0.95) 100%),
    linear-gradient(90deg,#ff3b30 0%,#ff9500 12%,#ffcc00 24%,#4cd964 36%,#34c759 48%,#0ab4ff 60%,#5856d6 72%,#af52de 84%,#ff3b30 100%);
}
.image-settings-sender-page .bg-control-belt:focus-visible{
  outline:2px solid rgba(223,231,244,0.9);
  outline-offset:2px;
}
.image-settings-sender-page .bg-control-indicator{
  position:absolute;
  width:14px;
  height:14px;
  border:2px solid rgba(255,255,255,0.85);
  border-radius:4px;
  background:#fff;
  box-shadow:0 0 0 2px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.4);
  transform:translate(-50%, -50%);
  pointer-events:none;
  transition:transform .15s ease, background .15s ease;
}
.image-settings-sender-page .bg-control-indicator.hidden{
  display:none;
}
.image-settings-sender-page .bg-control-reset{
  margin-top:0 !important;
  cursor:pointer;
}
.image-settings-sender-page .bg-randomizer{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:var(--surface-2);
  display:flex;
  flex-direction:column;
  gap:12px;
  touch-action:pan-y;
}
.image-settings-sender-page .bg-randomizer-row{
  display:flex;
  align-items:center;
  gap:16px;
  margin:10px 0;
}
.image-settings-sender-page .bg-randomizer-row--slider{
  touch-action:pan-y;
  overscroll-behavior-x:contain;
}
.image-settings-sender-page .bg-randomizer-label{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  color:#f1f5f9;
  font-size:14px;
  font-weight:600;
  letter-spacing:.01em;
  user-select:none;
}
.image-settings-sender-page .bg-randomizer-speed{
  align-items:center;
  gap:12px;
}
.image-settings-sender-page .bg-randomizer-quick{
  gap:10px;
  flex-wrap:wrap;
}
.image-settings-sender-page .bg-randomizer-quick-btn{
  flex:1 1 calc(33.33% - 8px);
  min-height:34px;
  padding:6px 10px;
  border-radius:var(--r2);
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.image-settings-sender-page .bg-randomizer-quick-btn.disabled,
.image-settings-sender-page .bg-randomizer-quick-btn:disabled{
  opacity:.5;
  cursor:default;
}
.image-settings-sender-page .bg-randomizer-quick-btn.active{
  border-color:#5f9a8d;
  background:#27423b;
  color:var(--text);
  box-shadow:none;
}
.image-settings-sender-page .bg-randomizer-quick-factor{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
}
.image-settings-sender-page .bg-randomizer-quick-sep{
  font-weight:600;
  opacity:.7;
}
.image-settings-sender-page .bg-randomizer-quick-btn--baseline .bg-randomizer-quick-sep{
  display:none;
}
.image-settings-sender-page .bg-randomizer-quick-value{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.02em;
}
.image-settings-sender-page .bg-randomizer-quick-number{
  display:inline-block;
  width:5ch;
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.image-settings-sender-page .bg-randomizer-reset{
  flex:0 0 auto;
  width:44px;
  height:44px;
  padding:0;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.image-settings-sender-page .bg-randomizer-slider-wrap{
  position:relative;
  flex:1 1 auto;
  display:flex;
  align-items:center;
}
.image-settings-sender-page .bg-randomizer-slider-wrap input[type="range"]{
  width:100%;
}
.image-settings-sender-page .bg-randomizer-marker{
  position:absolute;
  top:-18px;
  min-width:24px;
  padding:2px 6px;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:var(--surface-0);
  color:var(--muted);
  font-family:var(--mono);
  font-size:11px;
  text-align:center;
  pointer-events:none;
  transform:translate(-50%, -50%);
  box-shadow:none;
  z-index:1;
}
.image-settings-sender-page .bg-randomizer-marker span{
  display:block;
}
.image-settings-sender-page .bg-randomizer-marker.marker-default{
  background:var(--surface-0);
  border-color:#3b3b3b;
  color:var(--muted);
}
.image-settings-sender-page .bg-randomizer-marker.marker-custom{
  background:#243730;
  border-color:#48675d;
  color:var(--text);
}
.image-settings-sender-page .bg-randomizer-marker.is-active{
  border-color:#5f9a8d;
  background:#27423b;
  color:var(--text);
  box-shadow:none;
}
.image-settings-sender-page .bg-randomizer-slider{
  flex:1 1 auto;
  -webkit-appearance:none;
  appearance:none;
  height:18px;
  background:transparent;
  z-index:0;
}
.image-settings-sender-page .bg-randomizer-slider:focus-visible{
  outline:2px solid rgba(223,231,244,0.9);
  outline-offset:2px;
}
.image-settings-sender-page .bg-randomizer-slider::-webkit-slider-runnable-track{
  height:8px;
  border:1px solid #3a3e45;
  border-radius:var(--r2);
  background:#24272d;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), inset 0 1px 3px rgba(0,0,0,0.45);
}
.image-settings-sender-page .bg-randomizer-slider::-moz-range-track{
  height:8px;
  border:1px solid #3a3e45;
  border-radius:var(--r2);
  background:#24272d;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), inset 0 1px 3px rgba(0,0,0,0.45);
}
.image-settings-sender-page .bg-randomizer-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:22px;
  height:34px;
  margin-top:-14px;
  border:1px solid #121419;
  border-radius:var(--r2);
  background:#eef2f7;
  box-shadow:0 0 0 1px rgba(255,255,255,0.08), 0 3px 8px rgba(0,0,0,0.5);
  cursor:pointer;
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.image-settings-sender-page .bg-randomizer-slider:hover::-webkit-slider-thumb{
  background:#ffffff;
  box-shadow:0 0 0 1px rgba(255,255,255,0.14), 0 4px 10px rgba(0,0,0,0.56);
  transform:scale(1.04);
}
.image-settings-sender-page .bg-randomizer-slider:active::-webkit-slider-thumb{
  transform:scale(.98);
  background:#ffffff;
}
.image-settings-sender-page .bg-randomizer-slider::-moz-range-thumb{
  width:22px;
  height:34px;
  border:1px solid #121419;
  border-radius:var(--r2);
  background:#eef2f7;
  box-shadow:0 0 0 1px rgba(255,255,255,0.08), 0 3px 8px rgba(0,0,0,0.5);
  cursor:pointer;
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.image-settings-sender-page .bg-randomizer-slider:hover::-moz-range-thumb{
  background:#ffffff;
  box-shadow:0 0 0 1px rgba(255,255,255,0.14), 0 4px 10px rgba(0,0,0,0.56);
  transform:scale(1.04);
}
.image-settings-sender-page .bg-randomizer-slider:active::-moz-range-thumb{
  transform:scale(.98);
  background:#ffffff;
}
.image-settings-sender-page .bg-randomizer-info{
  flex:0 0 28ch;
  width:28ch;
  max-width:28ch;
  min-width:28ch;
  color:#b9bec6;
  font-family:var(--mono);
  font-size:12px;
  white-space:nowrap;
  text-align:right;
}
.image-settings-sender-page .bg-randomizer-info-wrap{
  display:flex;
  align-items:center;
  gap:8px;
}
.image-settings-sender-page .bg-randomizer-edit-btn{
  width:46px;
  min-width:46px;
  height:30px;
  min-height:30px;
  padding:0 8px;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:var(--surface-2);
  color:var(--muted);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .04s ease, background .08s ease, color .08s ease, border-color .08s ease;
}
.image-settings-sender-page .bg-randomizer-edit-btn i{
  font-size:12px;
}
.image-settings-sender-page .bg-randomizer-edit-btn:hover{
  background:#2c2c2c;
  color:var(--text);
  border-color:#4d5159;
}
.image-settings-sender-page .bg-randomizer-edit-btn:active{
  transform:translateY(1px);
}
.image-settings-sender-page .bg-randomizer-switch{
  width:46px;
  height:25px;
  margin-left:0;
  flex:0 0 auto;
}
.image-settings-sender-page .bg-randomizer-switch::before{
  width:17px;
  height:17px;
  left:4px;
  top:3px;
}
.image-settings-sender-page .bg-randomizer-switch:checked::before{
  transform:translateX(21px);
}
.image-settings-sender-page .bg-randomizer-label:focus-visible{
  outline:2px solid #66bb6a;
  outline-offset:3px;
}
.image-settings-sender-page .ui-settings-row--split > .ui-settings-control > .ui-input.ui-color-input{
  width:100%;
  min-width:0;
  padding:4px;
}
.image-settings-sender-page .blend-control{
  margin:0;
  padding:10px 12px;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.image-settings-sender-page .blend-mode-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.image-settings-sender__dialog{
  width:min(560px, calc(100vw - 28px));
}
.image-settings-sender__prompt-dialog{
  width:min(420px, calc(100vw - 28px));
}
.image-settings-sender__shader-dialog{
  width:min(760px, calc(100vw - 28px));
}
.image-settings-sender__dialog-body{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.image-settings-sender__dialog-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.image-settings-sender__dialog-field > .ui-input{
  width:100%;
}
.image-settings-sender__dialog-textarea{
  min-height:140px;
  resize:vertical;
}
.image-settings-sender__preset-dialog-body > .ui-toggle-row,
.image-settings-sender__preset-dialog-body > .ui-settings-row--split{
  margin:0;
}
.image-settings-sender__dialog-row > .ui-settings-label{
  align-items:flex-start;
  text-align:left;
  gap:4px;
}
.image-settings-sender__dialog-row > .ui-settings-control{
  display:flex;
  justify-content:flex-end;
}
.image-settings-sender__dialog-row > .ui-settings-control > .ui-btn--md{
  width:auto;
}
.image-settings-sender__shader-dialog-body .custom-shader-panel{
  display:flex;
  flex-direction:column;
  gap:10px;
}
@media (max-width: 640px){
  .image-settings-sender-page .bg-control{
    align-items:stretch;
    gap:12px;
    padding:10px 12px;
  }
  .image-settings-sender-page .bg-randomizer{
    gap:12px;
    padding:10px 12px;
  }
  .image-settings-sender-page .bg-randomizer-row{
    flex-wrap:wrap;
    gap:12px;
  }
  .image-settings-sender-page .bg-randomizer-info{
    font-size:12px;
  }
  .image-settings-sender-page .bg-control-left{
    align-self:stretch;
    gap:10px;
    min-height:108px;
    justify-content:space-between;
  }
  .image-settings-sender-page .bg-control-belt-wrap{
    align-self:stretch;
    min-height:108px;
  }
  .image-settings-sender-page .bg-control-belt{
    height:100%;
    min-height:108px;
  }
  .image-settings-sender-page #imageSettingsSendBtn{
    width:100%;
    min-width:0;
    flex:1 1 auto;
  }
  .image-settings-sender__shader-dialog{
    width:min(85vw, 760px);
  }
}
#styleDialogOverlay .style-dialog-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:36px;
  gap:10px;
}
#styleDialogOverlay .dialog-icon-close-btn{
  position:static;
  flex:0 0 auto;
}
#styleDialogOverlay .ui-dialog__title,
#styleDialogOverlay .prompt-sender__dialog-title{
  margin:0;
}
#styleDialogOverlay .ui-settings-row{
  margin-top:8px;
}
#promptStyleOptionsScroll{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:2px;
}
#promptStyleOptionsGroup{
  display:flex;
  flex-direction:column;
  gap:10px;
}
#styleDialogOverlay .prompt-style-section{
  display:flex;
  flex-direction:column;
  gap:8px;
}
#styleDialogOverlay .prompt-style-section-header{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  max-width:640px;
  margin:0 auto;
}
#styleDialogOverlay .prompt-style-section-line{
  flex:1 1 auto;
  height:1px;
  background:#2e2e2e;
}
#styleDialogOverlay .prompt-style-section-title{
  white-space:nowrap;
}
.ui-grid-btn-group{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:5px 0;
}
.ui-grid-btn-group.prompt-style-tile-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, 72px);
  gap:8px;
  width:100%;
  max-width:640px;
  margin:0 auto;
  justify-content:center;
}
.ui-grid-btn{
  width:72px;
  height:72px;
  padding:8px;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:#1c1c1c;
  color:var(--text);
  font-family:var(--sans);
  font-size:12px;
  line-height:1.2;
  font-weight:500;
  letter-spacing:.02em;
  text-align:center;
  white-space:normal;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .04s ease, background .08s ease, border-color .08s ease, color .08s ease;
}
.ui-grid-btn-group.prompt-style-tile-grid .ui-grid-btn{
  font-size:11px;
}
.ui-grid-btn:hover:not(.is-active){
  background:#252525;
  border-color:#4d5159;
}
.ui-grid-btn:active{
  transform:translateY(1px);
}
.ui-grid-btn.is-active{
  background:#27423b;
  border-color:#5f9a8d;
  color:var(--text);
}
@media (max-width: 640px){
  .ui-sender-screen{
    padding:16px 12px 28px;
    gap:12px;
  }
  .ui-sender-shell{
    padding:12px;
    gap:12px;
  }
  .ui-sender-header__row{
    flex-direction:column;
    align-items:flex-start;
  }
  .ui-sender-toolbar,
  .ui-sender-toolbar.ui-sender-toolbar--balanced{
    display:flex !important;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  .ui-sender-toolbar .ui-runtime-toolbar__left,
  .ui-sender-toolbar .ui-runtime-toolbar__center,
  .ui-sender-toolbar .ui-runtime-toolbar__right{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  .ui-sender-toolbar .ui-runtime-toolbar__center .ui-runtime-chip-row--equal{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(0, 1fr);
    width:100%;
  }
  .ui-sender-toolbar .ui-runtime-toolbar__center .ui-runtime-chip--mode{
    flex:1 1 0;
    min-width:0;
  }
  .ui-sender-toolbar .ui-runtime-toolbar__right .send-btn{
    width:100%;
  }
  .ui-sender-header__row .ui-sender-header__title,
  .ui-sender-header__row .ui-sender-header__version{
    display:none;
  }
  .ui-tag--keep-text-mobile .ui-tag__text{
    display:inline-flex !important;
  }
  .ui-sender-header__row{
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    flex-wrap:nowrap;
    margin-left:0;
  }
  .ui-sender-header{
    display:block;
    min-height:0;
    width:100%;
    align-self:stretch;
    padding:0;
  }
  .prompt-sender__shell{
    padding:0;
    gap:8px;
  }
  .prompt-sender__shell .ui-runtime-toolbar__right{
    flex-wrap:nowrap;
    align-items:stretch;
  }
  .prompt-sender__shell .ui-runtime-toolbar__right .style-wrap{
    flex:0 1 168px;
    min-width:0;
    max-width:168px;
  }
  .prompt-sender__shell .ui-runtime-toolbar__right #promptStyleSelect{
    width:100%;
  }
  .prompt-sender__shell .ui-runtime-toolbar__right .send-btn{
    flex:1 1 auto;
    width:auto;
    min-width:104px;
  }
  .prompt-sender__shell .ui-runtime-toolbar__center .ui-runtime-chip-row--equal{
    width:100%;
  }
  .srt-player .ui-runtime-toolbar__right{
    flex-wrap:nowrap;
    align-items:stretch;
  }
  .srt-player .ui-runtime-toolbar__right .style-wrap{
    flex:0 1 168px;
    min-width:0;
    max-width:168px;
  }
  .srt-player .ui-runtime-toolbar__right #srtStyleSelect{
    width:100%;
  }
  .srt-player .ui-runtime-toolbar__right .send-btn{
    flex:1 1 auto;
    width:auto;
    min-width:104px;
  }
  .gyro-sender__canvas-host{
    height:52vh;
    min-height:300px;
  }
  .image-dropzone{
    height:300px;
  }
  .sketch-ar-wrap{
    max-height:clamp(200px, 50vh, 540px);
  }
  .srt-player__favorites-grid,
  .prompt-sender__favorites-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .srt-player__favorites-header,
  .prompt-sender__favorites-header{
    flex-direction:column;
    align-items:stretch;
  }
  .srt-player__favorites-header-left,
  .srt-player__favorites-actions,
  .prompt-sender__favorites-header-left,
  .prompt-sender__favorites-actions{
    width:100%;
  }
  .favorites-modules-inline,
  .prompt-sender__favorites-modules{
    width:100%;
    justify-content:flex-start;
  }
  .favorites-modules-select,
  .prompt-sender__favorites-modules-select{
    width:min(220px, 100%);
  }
  .style-wrap .style-icon{
    display:none;
  }
}

@keyframes ui-status-breathe{
  0%, 100%{ transform:scale(0.84); opacity:0.48; }
  50%{ transform:scale(1); opacity:1; }
}

.ui-viewer-stage{
  position:relative;
  width:100vw;
  height:100vh;
  background:#202020;
  overflow:hidden;
}
.ui-viewer-actions{
  position:fixed;
  top:10px;
  left:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  z-index:20;
  padding:10px;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:#171717;
  transform:translateX(0);
  opacity:1;
  transition:transform .18s ease, opacity .18s ease;
}
.ui-viewer-actions.hidden{
  display:flex !important;
  transform:translateX(calc(-100% - 14px));
  opacity:0;
  pointer-events:none;
}
.ui-viewer-actions .ui-btn--sm.ui-btn--icon{
  width:44px;
  min-width:44px;
  height:44px;
  padding:0;
  font-size:0;
}
.ui-viewer-actions .ui-btn--sm.ui-btn--icon i{
  font-size:18px;
}
@media (hover:none), (pointer:coarse){
  .ui-viewer-actions{
    gap:12px;
    padding:12px;
  }
  .ui-viewer-actions .ui-btn--sm.ui-btn--icon{
    width:48px;
    min-width:48px;
    height:48px;
  }
  .ui-viewer-actions .ui-btn--sm.ui-btn--icon i{
    font-size:20px;
  }
}
.ui-floating-chip{
  position:fixed;
  top:8px;
  left:10px;
  z-index:22;
  display:none;
  padding:4px 10px;
  border:1px solid #66592d;
  border-radius:var(--r2);
  background:#231d0d;
  color:#f4d04f;
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08px;
  pointer-events:none;
}
.ui-floating-chip.visible{
  display:inline-flex;
  align-items:center;
}
.image-websocket-viewer__fps{
  top:8px;
  left:8px;
  z-index:18;
  min-width:96px;
  justify-content:flex-start;
}
.image-websocket-viewer__stage.image-websocket-viewer__stage--status-visible .image-websocket-viewer__fps{
  top:34px;
}

.draggable-box{
  position:fixed;
  top:10px;
  left:100px;
  z-index:24;
  display:none;
  min-width:320px;
  min-height:220px;
  width:350px;
  height:250px;
  overflow:hidden;
  border:1px solid var(--border2);
  border-radius:var(--r);
  background:var(--surface-1);
  color:var(--text);
  font-family:var(--mono);
}
.draggable-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:32px;
  padding:4px 8px;
  border-bottom:1px solid var(--border);
  cursor:move;
}
.draggable-title{
  display:flex;
  align-items:center;
  min-height:24px;
  flex:1 1 auto;
  color:var(--text);
  font-family:var(--mono);
  font-size:12px;
  font-weight:900;
  letter-spacing:.16px;
  text-transform:uppercase;
}
.header-controls{
  display:flex;
  align-items:center;
  gap:6px;
}
.draggable-header .function-button{
  min-width:24px;
  width:24px;
  height:24px;
  padding:0;
}
.draggable-header .copy-button.copied{
  color:#37f6c2;
}
.draggable-content{
  height:calc(100% - 33px);
  padding:10px;
  overflow:auto;
  color:var(--text);
  font-family:var(--mono);
  font-size:12px;
  line-height:1.45;
  white-space:pre-wrap;
  word-break:break-word;
  user-select:text;
  -webkit-user-select:text;
}
.resize-handle{
  position:absolute;
  right:0;
  bottom:0;
  width:12px;
  height:12px;
  cursor:nwse-resize;
  background:
    linear-gradient(135deg, transparent 50%, #6a6a6a 50%) bottom right/12px 12px no-repeat;
}

.srt-player__replace-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:10px;
  margin-top:12px;
}
.prompt-sender__replace-slot,
.srt-player__replace-slot{
  width:100%;
  min-height:72px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:#161616;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:6px;
  text-align:left;
  cursor:pointer;
  transition:transform .04s ease, border-color .08s ease, background .08s ease;
}
.prompt-sender__replace-slot:hover,
.srt-player__replace-slot:hover{
  border-color:#4d5159;
  background:#1d1d1d;
}
.prompt-sender__replace-slot:active,
.srt-player__replace-slot:active{
  transform:translateY(1px);
}
.prompt-sender__replace-slot:focus-visible,
.srt-player__replace-slot:focus-visible{
  outline:none;
  border-color:#5b6069;
  box-shadow:inset 0 0 0 1px #5b6069;
}
.prompt-sender__replace-slot .slot-label,
.srt-player__replace-slot .slot-label{
  color:var(--mint);
  font-family:var(--mono);
  font-size:11px;
  font-weight:900;
  letter-spacing:.12px;
  text-transform:uppercase;
}
.prompt-sender__replace-slot .slot-text,
.srt-player__replace-slot .slot-text{
  color:var(--text);
  font-family:var(--sans);
  font-size:12px;
  line-height:1.45;
}

.image-websocket-viewer__frame{
  position:absolute;
  inset:0;
  isolation:isolate;
  z-index:2;
}
.image-websocket-viewer__stage{
  display:none;
}
.image-websocket-viewer__image{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  opacity:1;
  backface-visibility:hidden;
  transform:translateZ(0);
  will-change:opacity;
}
#backImage.image-websocket-viewer__image{ z-index:1; }
#frontImage.image-websocket-viewer__image{ z-index:2; }
.ui-viewer-stage .image-websocket-viewer__image.fade-out{
  opacity:0 !important;
  transition:opacity var(--fade-duration, 300ms) cubic-bezier(0.4,0,0.2,1);
}
.ui-viewer-stage .image-websocket-viewer__image.fade-in{
  opacity:1 !important;
  transition:opacity var(--fade-duration, 300ms) cubic-bezier(0.4,0,0.2,1);
}
.ui-viewer-stage .image-websocket-viewer__image.hidden{
  display:none;
}
.ui-image-viewer-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background-color:#222222;
  overflow:hidden;
  isolation:isolate;
  z-index:2;
}
.ui-viewer-stage .ui-image-viewer-image{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  opacity:1;
  backface-visibility:hidden;
  transform:translateZ(0);
  will-change:opacity;
}
#backImage.ui-image-viewer-image{ z-index:1; }
#frontImage.ui-image-viewer-image{ z-index:2; }
.ui-viewer-stage .ui-image-viewer-image.fade-out{
  opacity:0 !important;
  transition:opacity var(--fade-duration, 300ms) cubic-bezier(0.4,0,0.2,1);
}
.ui-viewer-stage .ui-image-viewer-image.fade-in{
  opacity:1 !important;
  transition:opacity var(--fade-duration, 300ms) cubic-bezier(0.4,0,0.2,1);
}
.ui-viewer-stage .ui-image-viewer-image.hidden{
  display:none;
}

.video-viewer__stage,
.model-viewer__stage,
.depthmap-viewer__stage{
  background:#222222;
}
.ui-video-viewer-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background:#222222;
  overflow:hidden;
  z-index:2;
}
.ui-video-viewer-player{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:#222222;
}
.video-viewer__buffer{
  display:none;
}
.audio-viewer__stage{
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  background:#202020;
}
.audio-viewer__visualizer{
  width:min(320px, calc(100vw - 48px));
  height:min(320px, calc(100vw - 48px));
  display:block;
  margin:0 auto;
  background:transparent;
  z-index:2;
}
.audio-viewer__track{
  width:min(420px, calc(100vw - 48px));
  max-width:100%;
  z-index:2;
}
.audio-viewer__buffer{
  display:none;
}
#audioInteractionPrompt{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.72);
  z-index:30;
  cursor:pointer;
}
.audio-viewer__interaction-card{
  min-width:220px;
  padding:18px 24px;
  border:1px solid var(--border2);
  border-radius:2px;
  background:#2a2a2a;
  color:var(--text);
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.32);
  animation:audio-viewer-prompt-pulse 1.4s ease-in-out infinite;
}
.audio-viewer__interaction-card i{
  display:block;
  margin-bottom:10px;
  color:var(--mint);
  font-size:28px;
}
.audio-viewer__interaction-card p{
  margin:0;
  font-family:var(--mono);
  font-size:13px;
  font-weight:700;
  letter-spacing:.08px;
  text-transform:uppercase;
}
@keyframes audio-viewer-prompt-pulse{
  0%,100%{ transform:translateY(0); opacity:1; }
  50%{ transform:translateY(-1px); opacity:0.92; }
}
.model-viewer__canvas-host{
  position:absolute;
  inset:0;
  width:100%;
  height:100vh;
  overflow:visible;
  z-index:2;
}
.model-viewer__canvas-host canvas{
  display:block;
}
.depthmap-viewer__stage{
  isolation:isolate;
}
.depthmap-viewer__stage canvas{
  display:block;
}
.depthmap-viewer__thread-cache{
  display:none;
}
.depthmap-viewer__debug-panel{
  position:fixed;
  z-index:18;
  min-width:140px;
  padding:6px 8px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:2px;
  background:rgba(12,12,12,0.68);
  color:#f0f0f0;
  font-family:var(--mono);
  font-size:11px;
  line-height:1.3;
  backdrop-filter:blur(2px);
}
.depthmap-viewer__debug-panel h3{
  margin:0 0 4px;
  font-size:12px;
}
.depthmap-viewer__debug-panel p{
  margin:2px 0;
}
.depthmap-viewer__gyro-debug{
  right:10px;
  bottom:10px;
}
.depthmap-viewer__head-debug{
  left:10px;
  bottom:10px;
}
.depthmap-viewer__video-shell{
  position:fixed;
  left:10px;
  bottom:10px;
  z-index:18;
}
.depthmap-viewer__video-feed{
  display:none;
  object-fit:cover;
}
.depthmap-viewer__video-shell video{
  object-fit:cover;
}
.rotate-90{
  transform:rotate(90deg);
}
.rotate-180{
  transform:rotate(180deg);
}
.rotate-270{
  transform:rotate(270deg);
}

.settingsField + .settingsField{ margin-top:12px; }
.settingsActions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding-top:14px;
  flex-wrap:wrap;
}

@media (max-width: 960px){
  .ui-modal{
    align-items:center;
    padding:clamp(8px, 2vw, 12px);
  }
  .ui-modal__dialog{
    width:100%;
    max-width:none;
    padding:10px 10px 12px;
    max-height:calc(var(--vrch-safe-vh, 1vh) * 100 - 16px);
  }
  .prompt-sender__replace-dialog,
  .ui-prompt-style-dialog,
  .prompt-sender__style-dialog{
    width:85vw;
    max-width:85vw;
    max-height:85vh;
  }
  .prompt-sender__shell .ui-runtime-toolbar__right{
    flex-wrap:nowrap;
    align-items:stretch;
  }
  .prompt-sender__shell .ui-runtime-toolbar__right .style-wrap{
    flex:0 1 168px;
    min-width:0;
    max-width:168px;
  }
  .prompt-sender__shell .ui-runtime-toolbar__right #promptStyleSelect{
    width:100%;
  }
  .prompt-sender__shell .ui-runtime-toolbar__right .send-btn{
    flex:1 1 auto;
    width:auto;
    min-width:104px;
  }
}

@media (max-width: 640px){
  .ui-settings-screen{
    padding:14px 12px 24px;
  }
  .ui-settings-row--split{
    grid-template-columns:1fr;
    gap:6px;
  }
  .ui-modal__dialog{
    padding:8px 8px 10px;
  }
  .prompt-sender__replace-dialog,
  .ui-prompt-style-dialog,
  .prompt-sender__style-dialog{
    width:85vw;
    max-width:85vw;
    max-height:85vh;
  }
  .live-console-settings__preset-grid{
    grid-template-columns:minmax(0, 1fr);
  }
  .live-console-settings__preset-check-btn{
    min-width:64px;
    height:26px;
    padding:0 8px;
  }
  .live-console-settings__preset-item-comfy-btn{
    flex-basis:46px;
    width:46px;
  }
  .live-console-settings__preset-item-comfy-logo{
    width:32px;
    height:32px;
  }
  .live-console__about-header{
    align-items:flex-start;
    gap:12px;
  }
  .live-console__about-heading{
    min-width:0;
  }
  .live-console__about-title{
    font-size:16px;
  }
  .live-console__about-subtitle{
    font-size:13px;
  }
  .live-console__about-cards{
    gap:12px;
  }
  .live-console-settings__nav{
    flex-basis:40px;
    padding-right:8px;
  }
  .live-console-settings__nav-btn{
    width:40px;
    height:40px;
    padding:0;
    border-radius:2px;
    justify-content:center;
    gap:0;
    margin:0 auto;
  }
  .live-console-settings__nav-btn .nav-label{
    display:none;
  }
  .live-console-settings__content{
    padding-left:12px;
  }
  .image-websocket-sender-page .tab-btn.ui-tab{
    justify-content:center;
    padding:0 10px;
  }
  .image-websocket-sender-page .tab-label,
  .image-websocket-sender-page .video-control-btn .btn-label,
  .image-websocket-sender-page .video-control-btn .btn-sub{
    display:none;
  }
  .image-websocket-sender-page .video-control-btn{
    min-width:44px;
    padding:0 10px;
    gap:0;
  }
  .srt-player .ui-runtime-toolbar__right{
    flex-wrap:nowrap;
    align-items:stretch;
  }
  .srt-player .ui-runtime-toolbar__right .style-wrap{
    flex:0 1 168px;
    min-width:0;
    max-width:168px;
  }
  .srt-player .ui-runtime-toolbar__right #srtStyleSelect{
    width:100%;
  }
  .srt-player .ui-runtime-toolbar__right .send-btn{
    flex:1 1 auto;
    width:auto;
    min-width:104px;
  }
}

@media (max-width: 480px){
  .ui-modal{
    padding:8px;
  }
  .ui-modal__dialog{
    padding:8px 8px 10px;
  }
  .live-console-settings__layout{
    padding-top:12px;
  }
  .live-console-settings__header{
    margin-bottom:8px;
    gap:3px;
  }
  .live-console-settings__subtitle{
    font-size:11px;
  }
  .live-console-settings__section{
    gap:12px;
  }
  .live-console-settings__group-header--device-access{
    flex-direction:column;
    align-items:stretch;
  }
  .live-console-settings__device-access-refresh-btn{
    width:100%;
  }
  .live-console-settings__channels-row{
    grid-template-columns:26px minmax(0, 1fr) 48px;
    column-gap:6px;
  }
  .live-console-settings__channels-visibility-btn{
    width:30px;
    height:30px;
  }
  .live-console-settings__select.live-console-settings__channel-input{
    width:48px;
    min-width:48px;
    max-width:48px;
    height:36px;
    line-height:36px;
    padding:0;
  }
  .live-console-device-access-card{
    flex-direction:column;
  }
  .live-console-device-access-card__actions{
    width:100%;
  }
  .live-console-device-access-card__action{
    width:100%;
  }
  .live-console__about-cards{
    gap:10px;
  }
}

.image-websocket-viewer-v2__card{
  width:min(560px, 100%);
}
.image-websocket-viewer-v2__settings .ui-tip-text{
  width:min(560px, 100%);
}
.image-websocket-viewer-v2__stage{
  display:none;
  background:#222222;
}
.image-websocket-viewer-v2__frame{
  background:#050505;
}
.image-websocket-viewer-v2__fps{
  top:8px;
  left:8px;
  right:auto;
  z-index:18;
  min-width:96px;
  justify-content:flex-start;
}
.image-websocket-viewer-v2__stage.image-websocket-viewer-v2__stage--status-visible .image-websocket-viewer-v2__fps{
  top:34px;
}
.image-websocket-viewer-v2__advanced{
  gap:6px;
}
.image-websocket-viewer-v2__advanced .ui-settings-row--split > .ui-settings-label{
  color:var(--text);
  font-family:var(--sans);
  font-size:13px;
  line-height:1.35;
}
.image-websocket-viewer-v2__advanced .ui-settings-row--split > .ui-settings-control{
  justify-content:flex-end;
}
.image-websocket-viewer-v2__setting-value{
  color:var(--text);
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  line-height:1;
}
.image-websocket-viewer-v2__advanced .ui-settings-row--split > .ui-settings-control.ui-settings-control--range{
  min-width:0;
}
.image-websocket-viewer-v2__advanced .ui-settings-row--split > .ui-settings-control > .ui-color-input{
  width:100%;
  min-width:0;
  height:34px;
}
.image-websocket-viewer-v2__settings-row--checkbox-group{
  align-items:flex-start;
  padding-top:10px;
  padding-bottom:10px;
}
.image-websocket-viewer-v2__settings-row--checkbox-group > .ui-settings-label{
  align-items:flex-start;
  min-height:0;
  padding-top:2px;
}
.image-websocket-viewer-v2__settings-row--checkbox-group > .ui-settings-control{
  align-items:flex-start;
}
.image-websocket-viewer-v2__advanced .input-row{
  margin-top:0;
}
.image-websocket-viewer-v2__advanced .toggle-container{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(168px, 224px);
  gap:10px;
  align-items:center;
  min-height:38px;
  padding:0 10px;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:var(--surface-2);
}
.image-websocket-viewer-v2__advanced .toggle-container:hover{
  border-color:#4d5159;
  background:#2c2c2c;
}
.image-websocket-viewer-v2__advanced .toggle-container:focus-within{
  border-color:#5b6069;
  box-shadow:inset 0 0 0 1px #5b6069;
}
.image-websocket-viewer-v2__advanced .label-cell{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;
  color:var(--text);
  font-family:var(--sans);
  font-size:13px;
  line-height:1.35;
}
.image-websocket-viewer-v2__advanced .label-cell label{
  color:inherit;
}
.image-websocket-viewer-v2__advanced .switch-cell{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.image-websocket-viewer-v2__advanced .switch-cell > select,
.image-websocket-viewer-v2__advanced .switch-cell > input[type="color"],
.image-websocket-viewer-v2__advanced .switch-cell > input[type="range"]{
  width:100%;
}
.image-websocket-viewer-v2__advanced .switch-cell > select{
  min-height:34px;
  height:34px;
  padding:0 34px 0 10px;
  border:1px solid #4a4a4a;
  border-radius:var(--r2);
  background:
    linear-gradient(45deg, transparent 50%, #c8ccd2 50%) calc(100% - 16px) calc(50% - 2px)/6px 6px no-repeat,
    linear-gradient(135deg, #c8ccd2 50%, transparent 50%) calc(100% - 11px) calc(50% - 2px)/6px 6px no-repeat,
    #1d1d1d;
  color:var(--text);
  appearance:none;
}
.image-websocket-viewer-v2__advanced .switch-cell > input[type="color"]{
  min-height:34px;
  height:34px;
  padding:4px;
  border:1px solid #4a4a4a;
  border-radius:var(--r2);
  background:#1d1d1d;
}
.image-websocket-viewer-v2__advanced .switch-cell > input[type="range"]{
  accent-color:var(--mint);
}
.image-websocket-viewer-v2__advanced .toggle-switch{
  position:relative;
  width:40px;
  height:24px;
  margin-left:auto;
  flex:0 0 auto;
}
.image-websocket-viewer-v2__advanced .toggle-switch input{
  display:none;
}
.image-websocket-viewer-v2__advanced .toggle-switch-slider{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:#4b4f55;
  cursor:pointer;
  transition:background-color .14s ease;
}
.image-websocket-viewer-v2__advanced .toggle-switch-slider::before{
  content:'';
  position:absolute;
  top:50%;
  left:2px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#ffffff;
  transform:translateY(-50%);
  transition:transform .14s ease;
}
.image-websocket-viewer-v2__advanced .toggle-switch input:checked + .toggle-switch-slider{
  background:#3e8f58;
}
.image-websocket-viewer-v2__advanced .toggle-switch input:checked + .toggle-switch-slider::before{
  transform:translate(18px, -50%);
}
.image-websocket-viewer-v2__advanced .filter-value{
  color:var(--muted);
  font-family:var(--mono);
  font-size:11px;
  line-height:1.2;
}
.image-websocket-viewer-v2__nested-group{
  margin-top:2px;
}
.image-websocket-viewer-v2__nested-group > summary{
  padding-top:6px;
}
.image-websocket-viewer-v2__nested-group[open] > summary{
  margin-bottom:6px;
}
.image-websocket-viewer-v2__advanced .checkbox-group{
  display:flex;
  flex-direction:column;
  gap:6px;
  width:100%;
}
.image-websocket-viewer-v2__advanced .checkbox-group label{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--text);
  font-size:12px;
  line-height:1.3;
}
.image-websocket-viewer-v2__advanced .checkbox-group input[type="checkbox"]{
  accent-color:var(--mint);
}
.image-websocket-viewer-v2__advanced #advancedFiltersMount{
  margin-top:6px;
}
.image-websocket-viewer-v2 .projection-grid-overlay{
  position:absolute;
  inset:0;
  z-index:6;
  display:none;
  pointer-events:none;
}
.image-websocket-viewer-v2 .projection-grid-overlay.active{
  display:block;
}
.image-websocket-viewer-v2 .projection-grid-svg{
  width:100%;
  height:100%;
  display:block;
}
.image-websocket-viewer-v2 .projection-grid-line{
  vector-effect:non-scaling-stroke;
  shape-rendering:geometricPrecision;
}
.image-websocket-viewer-v2 .projection-grid-line--major{
  stroke:rgba(166, 196, 171, 0.27);
  stroke-width:1px;
}
.image-websocket-viewer-v2 .projection-grid-line--minor{
  stroke:rgba(166, 196, 171, 0.14);
  stroke-width:1px;
}
.image-websocket-viewer-v2 .projection-overlay{
  position:absolute;
  inset:0;
  z-index:8;
  display:none;
  pointer-events:none;
}
.image-websocket-viewer-v2 .projection-overlay.active{
  display:block;
  pointer-events:auto;
  cursor:default;
  touch-action:none;
  overscroll-behavior:contain;
}
.image-websocket-viewer-v2 .projection-overlay.active.projection-overlay--moveable{
  cursor:move;
}
body.image-websocket-viewer-v2.projection-edit-touch-lock{
  touch-action:none;
  overscroll-behavior:none;
  overflow:hidden;
}
.image-websocket-viewer-v2 .projection-guides{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}
.image-websocket-viewer-v2 .projection-guides line{
  stroke:rgba(125, 205, 140, 0.72);
  stroke-width:1.2px;
  vector-effect:non-scaling-stroke;
  shape-rendering:geometricPrecision;
}
.image-websocket-viewer-v2 .projection-guides line[data-guide="crossV"],
.image-websocket-viewer-v2 .projection-guides line[data-guide="crossH"]{
  stroke:rgba(125, 205, 140, 0.48);
  stroke-dasharray:4 3;
}
.image-websocket-viewer-v2 .projection-reset-btn{
  position:absolute;
  transform:translate(-50%, -50%);
  width:30px;
  height:30px;
  min-width:30px;
  min-height:30px;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9;
  border:1px solid #39443c;
  border-radius:var(--r2);
  background:#141816;
  color:#dce7df;
  cursor:pointer;
  touch-action:manipulation;
  box-shadow:0 1px 0 rgba(255,255,255,0.06) inset, 0 6px 18px rgba(0,0,0,0.26);
  transition:transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.image-websocket-viewer-v2 .projection-reset-btn.visible{
  display:inline-flex;
}
.image-websocket-viewer-v2 .projection-reset-btn::before{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:44px;
  height:44px;
  transform:translate(-50%, -50%);
}
.image-websocket-viewer-v2 .projection-reset-btn i{
  font-size:14px;
  line-height:1;
}
.image-websocket-viewer-v2 .projection-reset-btn:hover{
  border-color:#506050;
  background:#19201c;
}
.image-websocket-viewer-v2 .projection-reset-btn:active{
  transform:translate(-50%, calc(-50% + 1px));
}
.image-websocket-viewer-v2 .projection-sync-btn.projection-sync-btn--enabled,
.image-websocket-viewer-v2 .projection-grid-btn.projection-grid-btn--enabled,
.image-websocket-viewer-v2 .projection-sync-btn.projection-sync-btn--owner{
  color:#7fd28f;
  background:#17231a;
  border-color:#4f7759;
}
.image-websocket-viewer-v2 .projection-sync-btn.projection-sync-btn--follow{
  color:#c9d5cc;
  background:#202421;
  border-color:#475049;
}
.image-websocket-viewer-v2 .projection-handle{
  position:absolute;
  transform:translate(-50%, -50%);
  pointer-events:auto;
  box-sizing:border-box;
  touch-action:none;
}
.image-websocket-viewer-v2 .projection-handle::before{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:40px;
  height:40px;
  transform:translate(-50%, -50%);
}
.image-websocket-viewer-v2 .projection-handle--corner{
  width:16px;
  height:16px;
  border-radius:50%;
  background:#7fd28f;
  border:2px solid #0e1410;
  box-shadow:0 0 0 1px rgba(20, 26, 22, 0.55);
  cursor:grab;
}
.image-websocket-viewer-v2 .projection-handle--edge{
  width:13px;
  height:13px;
  border-radius:2px;
  background:#dce7df;
  border:2px solid #101713;
  box-shadow:0 0 0 1px rgba(20, 26, 22, 0.45);
  cursor:grab;
}
.image-websocket-viewer-v2 .projection-handle:active{
  cursor:grabbing;
}
.image-websocket-viewer-v2 .audio-permission-notice{
  position:absolute;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:#151515;
  color:#ddd;
  font-size:12px;
  cursor:pointer;
  z-index:12;
}
.image-websocket-viewer-v2 .audio-permission-notice i{
  font-size:14px;
  color:#bbb;
}
.image-websocket-viewer-v2 .audio-permission-notice.hidden{
  display:none;
}
@media (max-width: 640px){
  .image-websocket-viewer-v2__card{
    width:min(100%, 560px);
  }
  .image-websocket-viewer-v2__settings .ui-tip-text{
    width:100%;
  }
  .image-websocket-viewer-v2__advanced .toggle-container{
    grid-template-columns:1fr;
    align-items:stretch;
    gap:6px;
    padding:10px;
  }
  .image-websocket-viewer-v2__advanced .switch-cell{
    justify-content:stretch;
  }
}
@media (max-width: 640px){
  .srt-player .srt-controls-actions{
    gap:6px;
  }
  .srt-player .srt-controls-actions .srt-player-control-btn{
    min-width:0;
    width:auto;
    padding:0;
  }
  .srt-player .srt-controls-actions .srt-player-control-btn > span{
    display:none !important;
  }
}
/* Shared runtime control panel for playback-style transport bars */
.ui-runtime-control-panel{
  width:min(100%, 1200px);
  max-width:100%;
  margin:10px auto 0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:var(--surface-1);
  position:relative;
}
.ui-runtime-control-progress{
  width:100%;
  padding-bottom:8px;
  border-bottom:1px solid var(--border);
}
.ui-runtime-control-progress .player-progress{
  width:100%;
  min-height:45px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:0;
}
.ui-runtime-control-progress .player-progress > span{
  min-width:44px;
  text-align:center;
  color:#d8d8d8;
  font-variant-numeric:tabular-nums;
}
.ui-runtime-control-progress .player-progress > input[type="range"]{
  flex:1 1 auto;
  min-width:0;
  margin:0;
}
.ui-runtime-control-actions{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:nowrap;
}
.ui-runtime-control-btn{
  width:104px;
  min-width:104px;
  min-height:40px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:var(--r2);
  background:var(--surface-2);
  color:var(--muted);
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
  white-space:nowrap;
  text-transform:uppercase;
  transform:translateY(0);
  transition:transform .04s ease, background .08s ease, border-color .08s ease, color .08s ease;
}
.ui-runtime-control-btn:hover{
  border-color:#4d5159;
  background:#2c2c2c;
  color:var(--text);
}
.ui-runtime-control-btn:active{
  transform:translateY(1px);
}
.ui-runtime-control-btn.active,
.ui-runtime-control-btn.is-active,
.ui-runtime-control-btn.is-selected,
.ui-runtime-control-btn[aria-pressed="true"],
.ui-runtime-control-btn[aria-checked="true"]{
  border-color:#5f9a8d;
  background:#305249;
  color:var(--text);
  box-shadow:inset 0 0 0 1px rgba(55,246,194,0.10);
}
@media (max-width: 900px) and (min-width: 641px){
  .ui-runtime-control-btn--secondary > span{
    display:none;
  }
  .ui-runtime-control-btn--secondary{
    min-width:40px;
    width:40px;
    padding:0;
    gap:0;
  }
}
@media (max-width: 640px){
  .ui-runtime-control-panel{
    width:100%;
    max-width:none;
    margin-top:8px;
  }
  .ui-runtime-control-actions{
    gap:6px;
    justify-content:space-between;
  }
  .ui-runtime-control-actions .ui-runtime-control-btn{
    flex:1 1 0;
    min-width:0;
    width:auto;
    padding:0;
    gap:0;
  }
  .ui-runtime-control-actions .ui-runtime-control-btn > span{
    display:none !important;
  }
}
@media (max-width: 520px){
  .ui-runtime-control-progress .player-progress{
    flex-wrap:nowrap;
    gap:6px;
  }
  .ui-runtime-control-progress .player-progress > span{
    min-width:36px;
    font-size:11px;
  }
  .ui-runtime-control-btn{
    min-height:38px;
  }
}