.creator-setup{box-sizing:border-box;width:min(620px,calc(100% - 24px));max-height:calc(100dvh - 24px);overflow:auto;background:#101c17;color:#eef5ef;border:2px solid #f2b632;border-radius:18px;padding:20px;font:16px/1.5 system-ui,sans-serif;z-index:10050}
.creator-setup::backdrop{background:#000b}
.creator-setup h2{font-size:24px;margin:0 0 12px}
.creator-setup p{margin:12px 0}
.creator-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.creator-options label{display:flex;flex-direction:column;gap:6px;min-width:0}
.creator-options label:has([type=checkbox]){flex-direction:row;align-items:center}
.creator-options input[type=checkbox]{width:24px;height:24px;accent-color:#f2b632}
.creator-options input[type=range]{width:100%;min-height:32px;accent-color:#f2b632}
.creator-setup select,.creator-setup button,.creator-live button{font:inherit;min-height:44px;border:1px solid #8faaa0;border-radius:8px;background:#1d3529;color:#fff;padding:8px 12px}
.creator-setup select{width:100%}
.creator-actions{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.creator-setup button[type=submit]{background:#f2b632;color:#171b10}
.creator-setup button:disabled{opacity:.6}
.creator-setup :focus-visible,.creator-live :focus-visible{outline:3px solid #f2b632;outline-offset:3px}
.creator-live{position:fixed;z-index:10000;top:max(8px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);box-sizing:border-box;max-width:calc(100% - 20px);width:max-content;display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap;background:#101c17f5;border:2px solid #ff6959;color:#fff;border-radius:12px;padding:6px;font:14px/1.3 system-ui,sans-serif}
.creator-live [data-time]{flex-basis:100%;text-align:center;color:#ffb3a9}
.creator-live [data-warning]:not(:empty){flex-basis:100%;text-align:center;color:#f2b632}
.creator-live meter{width:54px}
@media(max-width:420px){.creator-options{grid-template-columns:1fr}.creator-setup{padding:14px}.creator-live{gap:4px}.creator-live button{padding:6px 8px}}

/* Reserve space so the live strip never covers the phone Pause/More buttons or gauges. */
body:has(.creator-live) #garage{padding-top:var(--creator-top,100px)}
body:has(.creator-live) #chase .hud,body:has(.creator-live) #chase .corner{top:var(--creator-top,100px)}
@media (pointer:coarse) and (max-height:540px),(max-width:640px){
  body:has(.creator-live) #chase #mini{top:calc(var(--creator-top,100px) + 44px)}
  body:has(.creator-live) #chase .rsc{top:calc(var(--creator-top,100px) + 142px)}
}