@import url("overlay.css");
.bo-editor {
  --bo-panel:var(--panel); --bo-soft:var(--panel-soft); --bo-input:var(--input);
  --bo-text:var(--text); --bo-muted:var(--muted); --bo-border:var(--border); --bo-hover:var(--border-hover);
  --bo-accent:var(--primary); --bo-accent-hover:var(--primary-hover); --bo-on-accent:var(--on-primary);
  --bo-focus:var(--sage); --bo-tint:var(--sage-2); --bo-success:var(--success);
  color:var(--bo-text); font:inherit; font-size:13px; line-height:1.45;
}
.bo-editor * { box-sizing:border-box; }
.bo-editor .bo-icon { width:17px; height:17px; flex:none; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; transition:transform 200ms cubic-bezier(.23,1,.32,1); }
.bo-editor .bo-preview { width:100%; border-radius:12px; background:radial-gradient(ellipse at 26% 32%,#826953 0%,transparent 42%),linear-gradient(145deg,#253c35,#152b32 45%,#536559); cursor:grab; touch-action:none; }
.bo-editor .bo-preview.bo-dragging { cursor:grabbing; }
.bo-editor .bo-preview:before { content:"Logos Translate"; position:absolute; top:10%; left:8%; font-size:clamp(10px,1.5vw,18px); color:#ffffffb3; }
.bo-editor .bo-preview:after { content:"Caption preview · 16:9"; position:absolute; right:4%; top:5%; color:#ffffffb3; font-size:12px; }
.bo-editor .bo-guides::before { content:"Drag to position"; font-size:20px; letter-spacing:0; }
.bo-editor .bo-form { display:grid; gap:12px; margin-top:12px; }
.bo-editor .bo-section { min-width:0; margin:0; padding:12px; border:1px solid var(--bo-border); border-radius:12px; background:var(--bo-panel); }
.bo-editor .bo-section legend { float:left; display:flex; align-items:center; gap:8px; width:100%; margin:0 0 12px; padding:0; font-size:13px; line-height:20px; font-weight:600; color:var(--bo-text); }
.bo-editor .bo-section legend .bo-icon { color:var(--bo-focus); }
.bo-editor .bo-section:hover legend .bo-icon,.bo-editor .bo-section:focus-within legend .bo-icon { transform:translateY(-1px) rotate(-5deg); }
.bo-editor .bo-section-timing:hover legend .bo-icon { transform:rotate(12deg); }
.bo-editor .bo-section-layout:hover legend .bo-icon { transform:scale(1.08); }
.bo-editor .bo-fields { clear:both; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 18px; }
.bo-editor .bo-section-layout>.bo-fields { grid-template-columns:repeat(4,minmax(0,1fr)); }
.bo-editor .bo-section-background>.bo-fields,.bo-editor .bo-advanced>.bo-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
.bo-editor .bo-section-broadcast>.bo-fields,.bo-editor .bo-section-save>.bo-fields { display:block; }
.bo-editor .bo-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.bo-editor .bo-label { font-size:12px; font-weight:500; color:var(--bo-text); }
.bo-editor .bo-help { margin:4px 0 0; font-size:11px; line-height:1.45; color:var(--bo-muted); }
.bo-editor .bo-field-head { display:flex; align-items:center; justify-content:space-between; gap:4px; min-height:24px; }
.bo-editor .bo-value { display:flex; align-items:center; gap:3px; color:var(--bo-muted); font-size:11px; white-space:nowrap; }
.bo-editor input,.bo-editor select { font:inherit; color:var(--bo-text); }
.bo-editor .bo-value input { width:46px; min-height:24px; height:24px; padding:2px; border:1px solid transparent; border-radius:4px; background:var(--bo-soft); text-align:right; font-size:12px; }
.bo-editor .bo-value input::-webkit-inner-spin-button { opacity:0; }
.bo-editor .bo-value input:hover::-webkit-inner-spin-button,.bo-editor .bo-value input:focus::-webkit-inner-spin-button { opacity:1; }
.bo-editor .bo-field select { width:100%; height:34px; min-height:34px; padding:5px 8px; border:1px solid var(--bo-border); border-radius:7px; background:var(--bo-input); }
.bo-editor input.bo-range { appearance:none; width:100%; height:22px; min-height:22px; padding:0; margin:0; border:0; border-radius:0; background:transparent; cursor:pointer; }
.bo-editor input.bo-range::-webkit-slider-runnable-track { height:4px; border-radius:4px; background:linear-gradient(to right,var(--bo-focus) var(--bo-fill,0%),var(--bo-border) var(--bo-fill,0%)); }
.bo-editor input.bo-range::-webkit-slider-thumb { appearance:none; width:13px; height:13px; margin-top:-4.5px; border:2px solid var(--bo-panel); border-radius:50%; background:var(--bo-focus); box-shadow:0 0 0 1px var(--bo-focus); transition:transform 180ms; }
.bo-editor input.bo-range:hover::-webkit-slider-thumb { transform:scale(1.12); }
.bo-editor .bo-colour { display:flex; align-items:center; gap:6px; height:34px; border:1px solid var(--bo-border); border-radius:7px; padding:4px 6px; background:var(--bo-input); }
.bo-editor .bo-colour input[type=color] { width:24px; height:24px; min-height:24px; padding:0; border:0; flex:none; background:transparent; cursor:pointer; }
.bo-editor .bo-colour input[type=color]::-webkit-color-swatch-wrapper { padding:0; }
.bo-editor .bo-colour input[type=color]::-webkit-color-swatch { border:1px solid var(--bo-hover); border-radius:4px; }
.bo-editor .bo-colour input[type=text] { min-width:0; width:100%; min-height:24px; padding:0; border:0; background:transparent; font-size:12px; }
.bo-editor button { font:inherit; cursor:pointer; }
.bo-editor .bo-segments { display:grid; grid-template-columns:repeat(4,1fr); height:34px; padding:2px; gap:2px; border:1px solid var(--bo-border); border-radius:7px; background:var(--bo-soft); }
.bo-editor .bo-segments button { padding:0; min-height:26px; border:0; border-radius:4px; color:var(--bo-muted); background:transparent; transition:background 180ms,color 180ms,transform 180ms; }
.bo-editor .bo-segments button[aria-checked=true] { background:var(--bo-accent); color:var(--bo-on-accent); }
.bo-editor .bo-switch-field { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.bo-editor button.bo-switch { width:38px; height:22px; min-height:22px; flex:none; padding:2px; border:1px solid var(--bo-hover); border-radius:20px; background:var(--bo-soft); transition:background 200ms,border-color 200ms; }
.bo-editor button.bo-switch[aria-checked=true] { background:var(--bo-accent); border-color:var(--bo-accent); }
.bo-editor .bo-switch-thumb { display:grid; place-items:center; width:16px; height:16px; border-radius:50%; background:var(--bo-muted); transition:transform 200ms cubic-bezier(.23,1,.32,1),background 200ms; }
.bo-editor .bo-switch-thumb .bo-icon { width:11px; height:11px; color:var(--bo-accent); opacity:0; transition:opacity 180ms; }
.bo-editor [aria-checked=true] .bo-switch-thumb { transform:translateX(16px); background:var(--bo-on-accent); }
.bo-editor [aria-checked=true] .bo-switch-thumb .bo-icon { opacity:1; }
.bo-editor .bo-advanced { grid-column:1/-1; border-top:1px solid var(--bo-border); padding-top:8px; }
.bo-editor .bo-advanced summary { display:flex; align-items:center; justify-content:space-between; cursor:pointer; color:var(--bo-muted); font-size:12px; list-style:none; }
.bo-editor .bo-advanced summary::-webkit-details-marker { display:none; }
.bo-editor .bo-advanced[open] summary { margin-bottom:12px; }
.bo-editor .bo-advanced[open] summary .bo-icon { transform:rotate(180deg); }
.bo-editor .bo-actions { display:flex; flex-wrap:wrap; gap:6px; }
.bo-editor button.bo-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:32px; padding:5px 9px; border:1px solid var(--bo-border); border-radius:7px; color:var(--bo-text); background:var(--bo-soft); font-size:12px; transition:background 180ms,border-color 180ms,transform 180ms; }
.bo-editor button.bo-button[type=submit] { background:var(--bo-accent); color:var(--bo-on-accent); border-color:transparent; }
.bo-editor button.bo-button:hover { border-color:var(--bo-hover); background:var(--bo-tint); }
.bo-editor button.bo-button[type=submit]:hover { background:var(--bo-accent-hover); }
.bo-editor .bo-button:hover .bo-icon,.bo-editor .bo-button:focus-visible .bo-icon { transform:translateY(-1px); }
.bo-editor .bo-button:hover .bo-icon-reset,.bo-editor .bo-button:hover .bo-icon-reload { transform:rotate(-15deg); }
.bo-editor .bo-button:active,.bo-editor .bo-segments button:active { transform:scale(.97); }
.bo-editor button:disabled { opacity:.45; cursor:default; }
.bo-editor :focus-visible { outline:2px solid var(--bo-focus); outline-offset:2px; }
.bo-editor .bo-info { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; padding-top:10px; border-top:1px solid var(--bo-border); }
.bo-editor .bo-link,.bo-editor .bo-sync { display:flex; align-items:center; gap:8px; min-width:0; color:var(--bo-muted); }
.bo-editor .bo-link>div { display:flex; flex-direction:column; min-width:0; }
.bo-editor .bo-url { font-size:11px; overflow-wrap:anywhere; }
.bo-editor .bo-sync { max-width:48%; }
.bo-editor .bo-sync[data-state=ready] { color:var(--bo-success); }
.bo-editor .bo-status { margin:0; font-size:11px; line-height:1.5; }
.bo-dialog { width:min(940px,95vw); max-height:92dvh; padding:16px; border:1px solid var(--border); border-radius:14px; background:var(--bg); color:var(--text); box-shadow:var(--shadow); }
.bo-dialog::backdrop { background:#0009; }
.bo-dialog header { position:sticky; top:-16px; z-index:2; display:flex; align-items:center; justify-content:space-between; margin:-16px -16px 12px; padding:12px 16px; border-bottom:1px solid var(--border); background:var(--panel); }
.bo-dialog h2 { margin:0; font-size:16px; }
.bo-dialog header button { width:28px; height:28px; padding:0; border:1px solid var(--border); border-radius:7px; background:var(--panel-soft); color:var(--text); font-size:22px; cursor:pointer; }
.bo-dialog header button:focus-visible { outline:2px solid var(--sage); outline-offset:2px; }
@media(max-width:650px) { .bo-editor .bo-fields,.bo-editor .bo-section-layout>.bo-fields { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:420px) { .bo-editor .bo-fields,.bo-editor .bo-section-layout>.bo-fields,.bo-editor .bo-section-background>.bo-fields,.bo-editor .bo-advanced>.bo-fields { grid-template-columns:1fr; } .bo-editor .bo-info { align-items:flex-start; flex-direction:column; } .bo-editor .bo-sync { max-width:100%; } }
@media(prefers-reduced-motion:reduce) { .bo-editor *, .bo-editor *::before,.bo-editor *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }