/* Ureka Stream Studio v4.3 stable */
:root{
  --bg:#0d0f12;--panel:#1a1d21;--panel2:#22262c;--border:rgba(255,255,255,.10);
  --text:#f5f7fa;--muted:#9ea5b0;--accent:#2f80ed;--success:#24c17a;--danger:#eb5757;
  --radius:16px;--shadow:0 14px 40px rgba(0,0,0,.34);
  --font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at top left,rgba(47,128,237,.12),transparent 32rem),linear-gradient(135deg,#07080a,#111315);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit}
button{border:0;cursor:pointer}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 14px;border-radius:12px;background:rgba(255,255,255,.07);color:var(--text);border:1px solid var(--border);font-weight:800;transition:.15s}
.btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.1)}
.btn.primary{background:var(--accent);color:#fff}
.btn.danger{background:var(--danger);color:#fff}
.btn.ghost{background:transparent}
.input,.textarea,.select{width:100%;background:rgba(0,0,0,.24);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:11px 12px;outline:none}
.textarea{min-height:180px;resize:vertical;white-space:pre;overflow-wrap:normal;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.label{color:var(--muted);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;margin-bottom:7px;display:block}
.panel{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015)),var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.badge{display:inline-flex;align-items:center;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06);padding:5px 10px;color:var(--muted);font-size:12px;font-weight:800}
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;padding:20px;border-right:1px solid var(--border);background:rgba(10,12,15,.72);backdrop-filter:blur(18px);display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.mark{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--accent);font-weight:900;font-size:20px;box-shadow:0 8px 22px rgba(47,128,237,.32)}
.brand-title{font-weight:950;letter-spacing:-.03em}.brand-sub{color:var(--muted);font-size:12px;font-weight:700}
.nav{display:grid;gap:8px}.nav button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;border-radius:12px;background:transparent;color:var(--muted);font-weight:850;text-align:left}
.nav button.active{background:rgba(47,128,237,.16);color:#fff;border:1px solid rgba(47,128,237,.28)}
.nav button:hover{background:rgba(255,255,255,.05);color:#fff}
.main{padding:24px;min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:24px}
.kicker{color:var(--muted);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.h1{font-size:32px;line-height:1.05;font-weight:950;letter-spacing:-.05em;margin:5px 0 0}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.workbench{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:24px;align-items:start}
.workspace{padding:24px;min-height:calc(100vh - 132px)}
.workspace-head{display:flex;justify-content:space-between;gap:16px;margin-bottom:22px}
.workspace-head h2{margin:0;font-size:24px;letter-spacing:-.03em}
.help{color:var(--muted);margin:6px 0 0}
.module-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px}
.module{display:none}.module.active{display:block}
.meta{display:flex;gap:10px;align-items:center;margin:14px 0;flex-wrap:wrap}
.counter{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;color:var(--success);background:rgba(36,193,122,.14);border:1px solid rgba(36,193,122,.24);font-weight:950;white-space:nowrap}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-height:230px}
.item{display:flex;align-items:center;justify-content:center;min-height:58px;padding:12px 14px;background:var(--accent);color:#fff;border-radius:12px;font-weight:950;text-align:center;line-height:1.15;transition:.18s}
.item:hover{filter:brightness(1.07);transform:translateY(-1px)}
.item.selected{min-height:30px;padding:6px 8px;border-radius:8px;font-size:12px;background:rgba(255,255,255,.22);opacity:.86}
.selected-wrap{margin-top:24px}
.selected-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.controls>*{flex:1 1 130px}
.progress-list,.hit-list{display:grid;gap:10px;margin-top:16px}
.row{display:flex;align-items:center;gap:12px;min-height:54px;padding:12px 14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);border-radius:12px;color:#fff;font-weight:900;text-align:left}
.row.done{opacity:.65}.row.done .row-name{text-decoration:line-through}
.check{display:grid;place-items:center;width:26px;height:26px;flex:0 0 26px;border:1px solid rgba(255,255,255,.18);border-radius:8px}.done .check{background:var(--success);border-color:var(--success);color:#071}
.hit{padding:16px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border:1px solid var(--border);border-radius:14px}.hit small{color:#f2c94c;text-transform:uppercase;font-weight:950;letter-spacing:.08em}.hit div{font-size:20px;font-weight:950;margin-top:3px}
.side-card{padding:18px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);border-radius:16px}
.stack{display:grid;gap:14px}
.obs-box{margin-top:20px;padding:16px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-radius:14px}.link-row{display:flex;gap:10px;margin-top:10px}
.preview{position:sticky;top:24px;padding:20px}
.preview-head{display:flex;justify-content:space-between;gap:14px;margin-bottom:18px}
.preview-frame{min-height:620px;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.06);background-size:24px 24px;background-image:linear-gradient(45deg,rgba(255,255,255,.035) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.035) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.035) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.035) 75%);background-position:0 0,0 12px,12px -12px,-12px 0}
.stage{position:relative;min-height:620px;padding:24px;background:radial-gradient(circle at top,rgba(47,128,237,.08),transparent 260px)}
.preview-title{text-align:center;font-size:32px;font-weight:950;letter-spacing:-.04em;margin:0 0 8px}
.preview-counter{text-align:center;font-weight:950;margin-bottom:20px}
.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.preview-selected{position:absolute;left:20px;right:20px;bottom:20px;display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.drawer{position:fixed;top:0;right:0;width:min(390px,calc(100vw - 32px));height:100vh;background:var(--panel);border-left:1px solid var(--border);box-shadow:0 24px 70px rgba(0,0,0,.45);transform:translateX(105%);transition:.24s;z-index:50;display:flex;flex-direction:column}
.drawer.open{transform:translateX(0)}.drawer-head{padding:24px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;gap:12px}.drawer-body{padding:24px;overflow:auto;display:grid;gap:14px}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.toggle{display:flex;align-items:center;gap:10px;color:var(--muted);font-weight:800}.toggle input{width:18px;height:18px;accent-color:var(--accent)}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:.2s;z-index:40}.scrim.open{opacity:1;pointer-events:auto}
.empty{display:grid;place-items:center;min-height:160px;border:1px dashed rgba(255,255,255,.18);border-radius:14px;color:var(--muted);font-weight:850;text-align:center}
@media(max-width:1100px){.app{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.nav{grid-template-columns:repeat(5,1fr)}.nav button span.txt{display:none}.workbench{grid-template-columns:1fr}.preview{position:relative;top:auto}.module-grid{grid-template-columns:1fr}}
@media(max-width:650px){.topbar{flex-direction:column}.toolbar{justify-content:flex-start}.grid{grid-template-columns:repeat(2,1fr)}.selected-grid,.preview-selected{grid-template-columns:repeat(3,1fr)}.link-row{flex-direction:column}}

/* v4.4 league + readability fixes */
.item{
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
  line-height:1.1;
  hyphens:auto;
}
.grid,.preview-grid{
  align-items:stretch;
}
.preview-frame{
  min-height:700px;
}
.stage{
  min-height:700px;
  overflow:hidden;
}
.preview-grid{
  max-height:510px;
  overflow:auto;
  padding-right:2px;
}
.preview-selected{
  max-height:112px;
  overflow:auto;
}
.league-controls .btn{
  flex-basis:86px;
}
@media(max-width:650px){
  .preview-frame,.stage{min-height:600px}
  .preview-grid{max-height:430px}
}

/* v4.5 layout/settings cleanup */
.workbench{
  grid-template-columns:minmax(0,1fr) 360px;
}
.preview{display:none!important}
.settings-panel{
  position:sticky;
  top:24px;
  max-height:calc(100vh - 48px);
  padding:18px;
  overflow:hidden;
}
.settings-panel.collapsed{
  display:none;
}
.settings-panel-head{
  margin-bottom:14px;
}
.settings-scroll{
  display:grid;
  gap:14px;
  max-height:calc(100vh - 132px);
  overflow:auto;
  padding-right:4px;
}
.color-input{
  width:100%;
  height:46px;
  padding:4px;
  border-radius:12px;
  background:rgba(255,255,255,.08);
}
.item{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
  line-height:1.05!important;
  text-wrap:balance;
}
.item.selected{
  white-space:nowrap!important;
  text-overflow:ellipsis;
}
.grid{
  align-items:stretch;
}
.workspace{
  min-height:calc(100vh - 132px);
}
.module-grid{
  grid-template-columns:minmax(0,1fr) 340px;
}
@media(max-width:1180px){
  .workbench{grid-template-columns:1fr}
  .settings-panel{position:relative;top:auto;max-height:none}
  .settings-scroll{max-height:none}
}

/* v5 clean UI */
.sidebar-source{
  margin-top:auto;
  padding:14px;
  border-radius:14px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
}
.sidebar-source p{
  margin:6px 0 12px;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}
.sidebar-source .btn{
  width:100%;
}
.workspace{
  padding-bottom:32px;
}
.toolbar .btn.primary{
  box-shadow:0 8px 22px rgba(47,128,237,.25);
}
.settings-panel{
  border-radius:18px;
}
.settings-scroll{
  scrollbar-width:thin;
}
.obs-box{display:none!important}
@media(max-width:1100px){
  .sidebar-source{
    margin-top:16px;
  }
}

/* v5.1 break box naming */
#breakBoxCount{
  max-width: 140px;
}

/* v5.2 team logos */
.item.with-logo{
  flex-direction:column;
  gap:6px;
  padding:8px 8px!important;
}
.team-logo-wrap{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  flex:0 0 30px;
}
.team-logo{
  max-width:30px;
  max-height:30px;
  object-fit:contain;
  display:block;
}
.logo-fallback{
  border-radius:999px;
  background:rgba(255,255,255,.18);
  color:#fff;
  font-size:10px;
  font-weight:950;
}
.team-label{
  display:block;
  max-width:100%;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.05;
}
@media(max-width:700px){
  .team-logo-wrap{width:24px;height:24px}
  .team-logo{max-width:24px;max-height:24px}
}

/* v5.3 team colors + collapsible settings */
.workbench.settings-hidden{
  grid-template-columns:minmax(0,1fr)!important;
}
.settings-panel.collapsed{
  display:none!important;
}
.item.with-logo{
  min-height:76px!important;
}
.item.with-logo .team-logo-wrap{
  width:34px;
  height:34px;
}
.item.with-logo .team-logo{
  max-width:34px;
  max-height:34px;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.item.with-logo .team-label{
  font-weight:950;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}
.logo-fallback{
  width:34px;
  height:34px;
}

/* v5.4 fixes */
.settings-panel.collapsed{display:none!important}
.workbench.settings-hidden{grid-template-columns:minmax(0,1fr)!important}
.item.with-logo{
  border:1px solid rgba(255,255,255,.26)!important;
}
.item.with-logo .team-logo-wrap{
  background:rgba(255,255,255,.90);
  border-radius:999px;
  padding:3px;
}
.item.with-logo .team-label{
  color:inherit;
}

/* v5.5 fixes */
.toolbar{
  gap:8px;
}
.item.with-logo{
  background-image:none!important;
}

/* v5.6 active league + forced team color */
.league-controls .btn.active-league{
  background:var(--accent)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.22)!important;
  box-shadow:0 8px 22px rgba(47,128,237,.32);
}
.item.with-logo{
  background-image:none!important;
}

/* v5.8 Team Board display fix */
.team-card{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  min-height:72px!important;
  border:1px solid rgba(255,255,255,.26)!important;
}
.team-card .team-logo-wrap{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  padding:3px;
  flex:0 0 34px;
}
.team-card .team-logo{
  max-width:30px;
  max-height:30px;
  object-fit:contain;
}
.team-card .team-label{
  display:block;
  max-width:100%;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:950;
}
.league-controls .btn.active-league{
  background:var(--accent)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.22)!important;
  box-shadow:0 8px 22px rgba(47,128,237,.32);
}

/* v5.9 runtime map fix */
.team-card{display:flex!important;visibility:visible!important;opacity:1!important}

/* v6 stable team board */
.team-card{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:6px!important;border:1px solid rgba(255,255,255,.26)!important;padding:8px!important}
.team-logo-wrap{display:grid;place-items:center;width:34px;height:34px;border-radius:999px;background:rgba(255,255,255,.92);color:#111;font-size:11px;font-weight:950;padding:3px}
.team-label{display:block;max-width:100%;text-align:center;overflow:hidden;text-overflow:ellipsis;font-weight:950;line-height:1.05}
.league-controls .btn.active-league{background:var(--accent)!important;color:#fff!important;border-color:rgba(255,255,255,.22)!important;box-shadow:0 8px 22px rgba(47,128,237,.32)}
.workbench.settings-hidden{grid-template-columns:minmax(0,1fr)!important}
.settings-panel.collapsed{display:none!important}

/* v6.1 settings restored */
.color-input{width:100%;height:44px;padding:4px;border-radius:12px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.settings-scroll{display:grid;gap:14px}

/* v6.2 selected/taken state */
.item.taken{
  position:relative;
  overflow:hidden;
  filter:saturate(.75);
}
.item.taken::after{
  content:"";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.75);
  color:#fff;
  font-size:11px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
  z-index:3;
}
.item.taken .team-logo-wrap,
.item.taken .team-label{
  opacity:.55;
}
.selected-grid,
.display-selected{
  margin-top:18px;
}

/* v6.3 active league fix + optional title */
.league-controls .btn:not(.active-league){
  background:rgba(255,255,255,.07)!important;
  color:var(--text)!important;
  box-shadow:none!important;
}
.league-controls .btn.active-league{
  background:var(--accent)!important;
  color:#fff!important;
}

/* v6.3.1 hard hide display title */
body.hide-display-title #title,
body.hide-display-title .display-title{
  display:none!important;
}

/* v6.4 background opacity */
input[data-setting="backgroundOpacity"]{
  accent-color:var(--accent);
}

/* v6.5 actual team logos */
.team-logo-wrap{
  background:rgba(255,255,255,.95)!important;
  overflow:hidden;
}
.team-logo{
  display:block;
  max-width:30px;
  max-height:30px;
  object-fit:contain;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.20));
}

/* v6.6 Team counter under board */
.team-counter-bottom{
  display:flex;
  justify-content:center;
  margin:16px 0 0;
}

.team-counter-bottom .counter{
  min-width:120px;
  justify-content:center;
}

body.team-display-mode .display{
  display:flex;
  flex-direction:column;
}

body.team-display-mode #title{
  order:1;
}

body.team-display-mode #grid{
  order:2;
}

body.team-display-mode #counter{
  order:3;
  align-self:center;
  margin-top:16px;
  margin-bottom:0;
}

body.team-display-mode #selected{
  order:4;
}

/* v6.7 Logos Only mode */
.team-card.logos-only{
  min-height:64px!important;
  padding:8px!important;
}

.team-card.logos-only .team-label{
  display:none!important;
}

.team-card.logos-only .team-logo-wrap{
  width:44px!important;
  height:44px!important;
  flex:0 0 44px!important;
}

.team-card.logos-only .team-logo{
  max-width:40px!important;
  max-height:40px!important;
}

.team-card.logos-only.logo-fallback,
.team-card.logos-only .logo-fallback{
  font-size:12px!important;
}


/* v6.7.1 - tighten team counter spacing */
.team-counter-bottom{
    margin-top:8px !important;
    margin-bottom:6px !important;
}

body.team-display-mode #counter{
    margin-top:8px !important;
    margin-bottom:6px !important;
}

body.team-display-mode #grid{
    margin-bottom:4px !important;
}


/* v6.7.2 - Counter exactly 25px below team buttons */
.team-counter-bottom{
    margin-top:25px !important;
    margin-bottom:4px !important;
}

body.team-display-mode #grid{
    margin-bottom:0 !important;
}

body.team-display-mode #counter{
    margin-top:25px !important;
    margin-bottom:4px !important;
    align-self:center;
}


/* v6.7.3 - Counter aligned with logo row spacing */
.team-counter-bottom{
    margin-top:12px !important;
    margin-bottom:0 !important;
}

.team-counter-bottom .counter{
    padding:6px 14px;
}

body.team-display-mode #grid{
    margin-bottom:0 !important;
}

body.team-display-mode #counter{
    margin-top:12px !important;
    margin-bottom:0 !important;
    align-self:center;
    padding:6px 14px;
}


/* v6.7.4 - Counter almost flush with last logo row */
.team-counter-bottom{
    margin-top:4px !important;
    margin-bottom:0 !important;
}

.team-counter-bottom .counter{
    padding:5px 14px;
}

body.team-display-mode #grid{
    margin-bottom:0 !important;
}

body.team-display-mode #counter{
    margin-top:4px !important;
    margin-bottom:0 !important;
    padding:5px 14px;
    align-self:center;
}


/* v6.7.5 - Counter directly under logo grid */
.team-counter-bottom{
    margin-top:-8px !important;
    margin-bottom:0 !important;
    padding-top:0 !important;
}

.team-counter-bottom .counter{
    margin:0 !important;
    padding:4px 12px !important;
}

body.team-display-mode #grid{
    margin-bottom:-8px !important;
    padding-bottom:0 !important;
}

body.team-display-mode #counter{
    margin-top:0 !important;
    margin-bottom:0 !important;
    transform:translateY(-8px);
    padding:4px 12px !important;
    align-self:center;
}


/* v6.7.6 - Match logo row spacing */
.team-counter-bottom{
    margin-top:12px !important;
    margin-bottom:0 !important;
    padding-top:0 !important;
}

.team-counter-bottom .counter{
    margin:0 !important;
    padding:4px 12px !important;
}

body.team-display-mode #grid{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
}

body.team-display-mode #counter{
    transform:none !important;
    margin-top:12px !important;
    margin-bottom:0 !important;
    padding:4px 12px !important;
    align-self:center;
}


/* ==========================================================================
   v7 Display Rebuild
   ========================================================================== */

.display{
  min-height:100vh;
  width:100vw;
  padding:28px;
  overflow:hidden;
}

.display-shell{
  width:100%;
  min-height:100%;
}

.display-classic .display-header{
  text-align:center;
  margin-bottom:20px;
}

.display-classic .display-kicker,
.display-classic .display-rule{
  display:none!important;
}

.display-classic .display-grid{
  display:grid;
}

.display-classic .display-counter{
  width:max-content;
  margin:12px auto 0!important;
  padding:6px 14px!important;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-weight:900;
}

.display-classic .team-card{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  border:1px solid rgba(255,255,255,.26)!important;
  padding:8px!important;
  border-radius:12px!important;
}

.display-classic .team-logo-wrap{
  display:grid!important;
  place-items:center!important;
  width:44px!important;
  height:44px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.95)!important;
  padding:3px!important;
  overflow:hidden!important;
}

.display-classic .team-logo{
  display:block;
  max-width:40px!important;
  max-height:40px!important;
  object-fit:contain!important;
}

.display-classic .team-label{
  display:block;
  max-width:100%;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:950;
  line-height:1.05;
}

.display-classic .team-card.logos-only .team-label{
  display:none!important;
}

.display-classic .team-card.logos-only .team-logo-wrap{
  width:44px!important;
  height:44px!important;
}

.remaining-number{
  color:#57f26f!important;
  font-weight:950!important;
}

/* Broadcast skin only applies to Team Board */
.display-broadcast .display{
  display:grid;
  place-items:center;
  padding:18px;
}

.display-broadcast .display-shell{
  position:relative;
  width:min(94vw, 1060px);
  min-height:min(94vh, 900px);
  padding:34px 48px 30px;
  border-radius:28px;
  border:2px solid rgba(255,255,255,.24);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,190,70,.14), transparent 32%),
    radial-gradient(circle at 50% 100%, rgba(255,178,45,.10), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008)),
    rgba(4,7,10,.92);
  box-shadow:
    inset 0 0 0 1px rgba(255,196,80,.20),
    inset 0 0 80px rgba(0,0,0,.65),
    0 28px 80px rgba(0,0,0,.55);
  overflow:hidden;
}

.display-broadcast .display-shell::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(255,187,55,.55), transparent 18%) top left/240px 160px no-repeat,
    linear-gradient(225deg, rgba(255,187,55,.55), transparent 18%) top right/240px 160px no-repeat,
    linear-gradient(45deg, rgba(255,187,55,.35), transparent 18%) bottom left/260px 180px no-repeat,
    linear-gradient(315deg, rgba(255,187,55,.35), transparent 18%) bottom right/260px 180px no-repeat;
  opacity:.7;
  pointer-events:none;
}

.display-broadcast .display-header{
  position:relative;
  z-index:2;
  text-align:center;
  margin-bottom:22px;
}

.display-broadcast .display-kicker{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  color:#f6c65a;
  text-transform:uppercase;
  letter-spacing:.32em;
  font-size:16px;
  font-weight:900;
  margin-bottom:8px;
  text-shadow:0 0 18px rgba(246,198,90,.26);
}

.display-broadcast .display-title{
  margin:0!important;
  color:#f4f4f0!important;
  font-family:Impact, "Arial Black", system-ui, sans-serif!important;
  font-size:clamp(46px, 6vw, 82px)!important;
  line-height:.9!important;
  letter-spacing:.035em!important;
  text-transform:uppercase;
  transform:skewX(-8deg);
  text-shadow:0 3px 0 rgba(0,0,0,.8), 0 10px 30px rgba(0,0,0,.55);
}

.display-broadcast .display-rule{
  width:min(520px, 72%);
  height:12px;
  margin:8px auto 0;
  border-bottom:2px solid rgba(246,198,90,.72);
}

.display-broadcast .display-content{
  position:relative;
  z-index:2;
}

.display-broadcast .display-grid{
  display:grid;
  gap:14px!important;
  padding:0 8px!important;
  overflow:visible!important;
}

.display-broadcast .broadcast-team-card{
  position:relative;
  min-height:94px!important;
  border-radius:12px!important;
  border:1px solid rgba(246,198,90,.52)!important;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.09), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01)),
    rgba(19,22,22,.92)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), inset 0 -24px 50px rgba(0,0,0,.38), 0 8px 18px rgba(0,0,0,.30)!important;
  overflow:hidden;
}

.display-broadcast .broadcast-team-card .team-logo-wrap{
  width:62px!important;
  height:62px!important;
  padding:0!important;
  background:transparent!important;
  border-radius:0!important;
  overflow:visible!important;
}

.display-broadcast .broadcast-team-card .team-logo{
  max-width:62px!important;
  max-height:62px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 2px 1px rgba(255,255,255,.20)) drop-shadow(0 8px 8px rgba(0,0,0,.65))!important;
}

.display-broadcast .broadcast-team-card .team-label{
  display:none!important;
}

.display-broadcast .display-counter{
  width:max-content;
  min-width:280px;
  margin:14px auto 0!important;
  padding:10px 30px!important;
  border-radius:999px;
  border:2px solid rgba(246,178,45,.92)!important;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.01)), rgba(4,7,10,.92)!important;
  color:#fff!important;
  font-size:20px!important;
  font-weight:900!important;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.display-selected{
  margin-top:18px!important;
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:8px!important;
  max-height:110px!important;
  overflow:auto!important;
}

.item.taken{
  position:relative;
  overflow:hidden;
  filter:saturate(.75);
}

.item.taken::after{
  content:"";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.75);
  z-index:3;
}

.item.taken .team-logo-wrap,
.item.taken .team-label{
  opacity:.55;
}

body.hide-display-title .display-header{
  display:none!important;
}

@media (max-width:900px){
  .display-broadcast .display-shell{
    padding:26px 22px 24px;
  }

  .display-broadcast .broadcast-team-card{
    min-height:76px!important;
  }

  .display-broadcast .broadcast-team-card .team-logo-wrap,
  .display-broadcast .broadcast-team-card .team-logo{
    width:50px!important;
    height:50px!important;
    max-width:50px!important;
    max-height:50px!important;
  }
}


/* ==========================================================================
   v7.1 Classic logo centering + selected teams fixed bottom
   ========================================================================== */

/* Better logo centering for classic team board */
.display-classic .team-card{
  position:relative;
  display:grid!important;
  place-items:center!important;
  align-content:center!important;
  justify-items:center!important;
  gap:6px!important;
  text-align:center!important;
}

.display-classic .team-card .team-logo-wrap{
  display:grid!important;
  place-items:center!important;
  justify-content:center!important;
  align-content:center!important;
  padding:0!important;
  line-height:0!important;
}

.display-classic .team-card .team-logo{
  display:block!important;
  width:38px!important;
  height:38px!important;
  max-width:38px!important;
  max-height:38px!important;
  object-fit:contain!important;
  margin:auto!important;
}

.display-classic .team-card.logos-only .team-logo-wrap{
  width:52px!important;
  height:52px!important;
  padding:0!important;
}

.display-classic .team-card.logos-only .team-logo{
  width:46px!important;
  height:46px!important;
  max-width:46px!important;
  max-height:46px!important;
}

/* Move selected/taken teams to true bottom of browser source */
.tool-teams .display-selected{
  position:fixed!important;
  left:28px!important;
  right:28px!important;
  bottom:24px!important;
  margin-top:0!important;
  z-index:50!important;
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:8px!important;
  max-height:104px!important;
  overflow:auto!important;
  pointer-events:auto;
}

/* Make room so bottom fixed selected row does not cover board */
.tool-teams .display-content{
  padding-bottom:128px!important;
}

/* Broadcast shell should not contain selected row visually */
.display-broadcast.tool-teams .display-selected{
  left:40px!important;
  right:40px!important;
  bottom:24px!important;
}

/* Selected buttons cleaner at bottom */
.tool-teams .display-selected .item.selected{
  min-height:30px!important;
  padding:6px 10px!important;
  border-radius:999px!important;
  font-size:12px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  background:rgba(0,0,0,.70)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}

@media(max-width:900px){
  .tool-teams .display-selected{
    left:16px!important;
    right:16px!important;
    bottom:16px!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  .tool-teams .display-content{
    padding-bottom:150px!important;
  }
}


/* ==========================================================================
   v7.2 Logo tiles + top floating Team Breaks window
   ========================================================================== */

/* Display window floats near top, not centered vertically */
.tool-teams .display{
  display:block!important;
  padding-top:24px!important;
}

.tool-teams .display-shell{
  margin:0 auto!important;
}

/* Classic team board should float at the top */
.display-classic.tool-teams .display-shell{
  width:min(96vw, 1120px)!important;
}

/* Broadcast board also floats at the top */
.display-broadcast.tool-teams .display{
  display:block!important;
  padding-top:20px!important;
}

.display-broadcast.tool-teams .display-shell{
  margin:0 auto!important;
}

/* Remove white circles from classic logos */
.display-classic .team-card .team-logo-wrap,
.display-classic .team-card.logos-only .team-logo-wrap{
  background:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}

/* Logo sits directly on the colored tile */
.display-classic .team-card .team-logo{
  width:44px!important;
  height:44px!important;
  max-width:44px!important;
  max-height:44px!important;
  object-fit:contain!important;
  filter:
    drop-shadow(0 1px 1px rgba(255,255,255,.20))
    drop-shadow(0 6px 7px rgba(0,0,0,.55))!important;
}

.display-classic .team-card.logos-only .team-logo{
  width:54px!important;
  height:54px!important;
  max-width:54px!important;
  max-height:54px!important;
}

/* Make classic tile backgrounds more premium so logos pop */
.display-classic .team-card{
  isolation:isolate;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.22)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 -18px 36px rgba(0,0,0,.28),
    0 8px 18px rgba(0,0,0,.24)!important;
}

.display-classic .team-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.20), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.16));
  pointer-events:none;
}

.display-classic .team-card::after{
  content:"";
  position:absolute;
  inset:auto 8px 8px;
  height:1px;
  z-index:-1;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  opacity:.65;
}

/* Initials fallback should also avoid white circles */
.display-classic .team-card .logo-fallback{
  width:48px!important;
  height:48px!important;
  border-radius:12px!important;
  background:rgba(0,0,0,.26)!important;
  border:1px solid rgba(255,255,255,.20)!important;
  color:#fff!important;
  display:grid!important;
  place-items:center!important;
  font-size:15px!important;
  line-height:1!important;
}

/* Broadcast skin already uses transparent logo placement, but make it stricter */
.display-broadcast .broadcast-team-card .team-logo-wrap{
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
}

/* Keep selected/taken teams fixed to bottom of page */
.tool-teams .display-selected{
  bottom:18px!important;
}

@media(max-width:900px){
  .tool-teams .display{
    padding-top:14px!important;
  }

  .display-classic .team-card .team-logo{
    width:38px!important;
    height:38px!important;
    max-width:38px!important;
    max-height:38px!important;
  }

  .display-classic .team-card.logos-only .team-logo{
    width:46px!important;
    height:46px!important;
    max-width:46px!important;
    max-height:46px!important;
  }
}


/* v7.3 Floating Clear Teams button */
.display-toolbar{
  position:fixed;
  left:24px;
  bottom:20px;
  z-index:120;
}

.display-toolbar .btn{
  border-radius:999px;
  padding:10px 18px;
  background:rgba(15,15,18,.82);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-weight:700;
  backdrop-filter:blur(8px);
  cursor:pointer;
}

.display-toolbar .btn:hover{
  background:rgba(40,40,46,.9);
}


/* v7.3.1 Reset button no longer overlaps selected teams */
.display-toolbar{
  left:24px !important;
  bottom:140px !important;
}

.tool-teams .display-selected{
  left:120px !important;
}

@media (max-width:900px){
  .display-toolbar{
    left:16px !important;
    bottom:180px !important;
  }

  .tool-teams .display-selected{
    left:16px !important;
    right:16px !important;
    bottom:64px !important;
  }
}

/* v7.4 inline reset icon */
.display-toolbar{display:none!important;}

.tool-teams .display-selected{
  display:flex!important;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

.reset-pill{
  width:34px!important;
  min-width:34px!important;
  padding:0!important;
  display:flex!important;
  align-items:center;
  justify-content:center;
  border-radius:999px!important;
  font-size:18px!important;
  font-weight:700!important;
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  cursor:pointer;
}

.reset-pill:hover{
  background:rgba(220,53,69,.85)!important;
  color:#fff!important;
}


/* ==========================================================================
   v8 Team Board Redesign
   Premium card tiles, smart logo contrast, abbreviations, bottom bar
   ========================================================================== */

/* Top-floating team board remains */
.tool-teams .display{
  display:block!important;
  padding:22px 28px 130px!important;
}

.tool-teams .display-shell{
  margin:0 auto!important;
  width:min(96vw, 1160px)!important;
}

/* Make team display more compact vertically */
.tool-teams .display-header{
  margin-bottom:16px!important;
}

.tool-teams .display-title{
  line-height:.95!important;
}

/* V8 Card Wall tile */
.tool-teams .v8-team-tile{
  position:relative!important;
  isolation:isolate!important;
  display:grid!important;
  grid-template-rows:1fr auto!important;
  align-items:center!important;
  justify-items:center!important;
  gap:0!important;
  min-height:96px!important;
  padding:10px 8px 0!important;
  border-radius:16px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.20)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07),
    inset 0 -22px 44px rgba(0,0,0,.34),
    0 10px 22px rgba(0,0,0,.28)!important;
  transition:transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

/* Layered sports-card style treatment */
.tool-teams .v8-team-tile::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 50% 22%, rgba(255,255,255,.26), transparent 38%),
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.16), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(0,0,0,.22));
  pointer-events:none;
}

.tool-teams .v8-team-tile::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:28px;
  z-index:-1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.42));
  border-top:1px solid rgba(255,255,255,.16);
  pointer-events:none;
}

/* Logo is the hero, no white circles */
.tool-teams .v8-team-tile .team-logo-wrap{
  display:grid!important;
  place-items:center!important;
  width:68px!important;
  height:58px!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  line-height:0!important;
}

.tool-teams .v8-team-tile .team-logo{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:66px!important;
  max-height:54px!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:auto!important;
  filter:
    drop-shadow(0 0 7px rgba(255,255,255,.30))
    drop-shadow(0 5px 7px rgba(0,0,0,.72))!important;
}

/* Abbreviation footer */
.tool-teams .v8-team-tile .team-label{
  display:none!important;
}

.tool-teams .v8-team-tile .team-abbr{
  position:relative;
  z-index:2;
  display:block!important;
  width:100%;
  padding:6px 0 7px;
  color:#fff!important;
  font-family:Impact, "Arial Black", system-ui, sans-serif!important;
  font-size:16px!important;
  line-height:1!important;
  text-align:center;
  letter-spacing:.08em;
  text-shadow:0 2px 4px rgba(0,0,0,.65);
}

/* Fallback initials get premium plate, not circle */
.tool-teams .v8-team-tile .logo-fallback{
  width:58px!important;
  height:46px!important;
  border-radius:12px!important;
  display:grid!important;
  place-items:center!important;
  background:rgba(0,0,0,.22)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  color:#fff!important;
  font-size:17px!important;
  font-weight:950!important;
  letter-spacing:-.02em!important;
  line-height:1!important;
}

/* Smart contrast help for teams with low-contrast logo/color combos */
.tool-teams .v8-team-tile[data-team-name="Los Angeles Rams"],
.tool-teams .v8-team-tile[data-team-name="New York Jets"],
.tool-teams .v8-team-tile[data-team-name="New York Giants"],
.tool-teams .v8-team-tile[data-team-name="Los Angeles Chargers"],
.tool-teams .v8-team-tile[data-team-name="Tampa Bay Lightning"],
.tool-teams .v8-team-tile[data-team-name="Toronto Maple Leafs"]{
  background-blend-mode:multiply!important;
}

.tool-teams .v8-team-tile[data-team-name="Los Angeles Rams"] .team-logo,
.tool-teams .v8-team-tile[data-team-name="New York Jets"] .team-logo,
.tool-teams .v8-team-tile[data-team-name="New York Giants"] .team-logo{
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,.58))
    drop-shadow(0 0 2px rgba(255,255,255,.75))
    drop-shadow(0 7px 8px rgba(0,0,0,.86))!important;
}

/* Add subtle internal darkening for problem tiles */
.tool-teams .v8-team-tile[data-team-name="Los Angeles Rams"]::before,
.tool-teams .v8-team-tile[data-team-name="New York Jets"]::before,
.tool-teams .v8-team-tile[data-team-name="New York Giants"]::before{
  background:
    radial-gradient(circle at 50% 22%, rgba(255,255,255,.20), transparent 34%),
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.36))!important;
}

/* Taken state: polished disabled card */
.tool-teams .v8-team-tile.taken{
  filter:saturate(.75) brightness(.88)!important;
}

.tool-teams .v8-team-tile.taken::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  height:auto;
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.04) 0, rgba(255,255,255,.04) 5px, transparent 5px, transparent 11px),
    rgba(0,0,0,.75)!important;
  border-top:0;
}

.tool-teams .v8-team-tile.taken .team-logo,
.tool-teams .v8-team-tile.taken .team-logo-wrap,
.tool-teams .v8-team-tile.taken .team-abbr{
  opacity:.38!important;
}

/* Counter as broadcast status pill */
.tool-teams .display-counter{
  margin:12px auto 0!important;
  width:max-content!important;
  min-width:132px!important;
  padding:7px 18px!important;
  border-radius:999px!important;
  background:rgba(0,0,0,.56)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  color:#fff!important;
  font-weight:950!important;
  font-size:16px!important;
  letter-spacing:.03em!important;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}

.tool-teams .remaining-number{
  color:#57f26f!important;
  text-shadow:0 0 12px rgba(87,242,111,.24);
}

/* Unified bottom bar */
.tool-teams .display-selected{
  position:fixed!important;
  left:20px!important;
  right:20px!important;
  bottom:18px!important;
  z-index:80!important;
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:8px!important;
  max-height:88px!important;
  overflow:auto!important;
  padding:10px!important;
  border-radius:18px!important;
  background:rgba(0,0,0,.38)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  backdrop-filter:blur(10px);
}

/* Inline reset + selected abbreviation pills */
.tool-teams .display-selected .item.selected,
.tool-teams .display-selected .reset-pill{
  min-height:30px!important;
  height:30px!important;
  padding:0 12px!important;
  border-radius:999px!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.04em!important;
  white-space:nowrap!important;
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  color:#fff!important;
  box-shadow:none!important;
}

.tool-teams .display-selected .reset-pill{
  width:32px!important;
  min-width:32px!important;
  padding:0!important;
  font-size:18px!important;
  color:#57f26f!important;
}

/* Controller hover only */
@media (hover:hover){
  .tool-teams .v8-team-tile:hover{
    transform:translateY(-2px);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.09),
      inset 0 -22px 44px rgba(0,0,0,.34),
      0 14px 26px rgba(0,0,0,.34)!important;
  }
}

@media(max-width:900px){
  .tool-teams .v8-team-tile{
    min-height:80px!important;
  }

  .tool-teams .v8-team-tile .team-logo-wrap{
    width:54px!important;
    height:48px!important;
  }

  .tool-teams .v8-team-tile .team-logo{
    max-width:52px!important;
    max-height:44px!important;
  }

  .tool-teams .v8-team-tile .team-abbr{
    font-size:13px!important;
  }
}


/* ==========================================================================
   v8.1 Display centering fix
   Keeps Team Board floating at top and centered left/right
   ========================================================================== */

html,
body{
  width:100%!important;
  min-width:0!important;
  overflow-x:hidden!important;
}

.tool-teams .display{
  position:relative!important;
  width:100%!important;
  min-height:100vh!important;
  padding:0!important;
  display:block!important;
  overflow:visible!important;
}

.tool-teams .display-shell{
  position:absolute!important;
  top:22px!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  width:min(96%, 1160px)!important;
  margin:0!important;
  box-sizing:border-box!important;
}

.tool-teams .display-content,
.tool-teams .display-grid{
  width:100%!important;
  box-sizing:border-box!important;
}

.tool-teams .display-header{
  width:100%!important;
  box-sizing:border-box!important;
}

/* Bottom bar spans the real viewport and no longer affects board centering */
.tool-teams .display-selected{
  left:20px!important;
  right:20px!important;
  width:auto!important;
  transform:none!important;
}

/* Broadcast skin uses same true centering */
.display-broadcast.tool-teams .display-shell{
  left:50%!important;
  transform:translateX(-50%)!important;
  margin:0!important;
}

/* Keep enough space for bottom bar without shifting shell */
.tool-teams .display-content{
  padding-bottom:128px!important;
}

@media(max-width:900px){
  .tool-teams .display-shell{
    top:14px!important;
    width:calc(100% - 24px)!important;
  }

  .tool-teams .display-selected{
    left:12px!important;
    right:12px!important;
  }
}


/* ==========================================================================
   v8.2 Chase List bottom selected bar
   ========================================================================== */

.tool-chase .display-selected{
  position:fixed!important;
  left:20px!important;
  right:20px!important;
  bottom:18px!important;
  z-index:80!important;
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:8px!important;
  max-height:88px!important;
  overflow:auto!important;
  padding:10px!important;
  border-radius:18px!important;
  background:rgba(0,0,0,.38)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  backdrop-filter:blur(10px);
}

.tool-chase .display-content{
  padding-bottom:128px!important;
}

.tool-chase .display-selected .item.selected,
.tool-chase .display-selected .reset-pill{
  min-height:30px!important;
  height:30px!important;
  padding:0 12px!important;
  border-radius:999px!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.04em!important;
  white-space:nowrap!important;
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  color:#fff!important;
  box-shadow:none!important;
}

.tool-chase .display-selected .reset-pill{
  width:32px!important;
  min-width:32px!important;
  padding:0!important;
  font-size:18px!important;
  color:#57f26f!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.tool-chase .display-selected .reset-pill:hover{
  background:rgba(220,53,69,.85)!important;
  color:#fff!important;
}

@media(max-width:900px){
  .tool-chase .display-selected{
    left:12px!important;
    right:12px!important;
    bottom:12px!important;
  }

  .tool-chase .display-content{
    padding-bottom:150px!important;
  }
}


/* v8.2.1 stable revert cleanup */
.display-toolbar{
  display:none!important;
}

/* Restore v8.2 selected bar behavior without row/grid experiments */
.tool-teams .display-selected,
.tool-chase .display-selected{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:8px!important;
}

/* Keep the reset icon inline and consistent */
.tool-teams .display-selected .reset-pill,
.tool-chase .display-selected .reset-pill{
  width:32px!important;
  min-width:32px!important;
  height:30px!important;
  min-height:30px!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  font-size:18px!important;
  line-height:1!important;
}

/* Avoid duplicate visual reset if a browser cached old toolbar */
#toolbar{
  display:none!important;
}


/* ==========================================================================
   v9 Phase 1 — Properties Panel
   ========================================================================== */

:root{
  --uss-bg:#101317;
  --uss-panel:#181d22;
  --uss-panel-2:#12171c;
  --uss-border:rgba(255,255,255,.08);
  --uss-border-strong:rgba(255,255,255,.14);
  --uss-text:#edf2f7;
  --uss-muted:#8d99a6;
  --uss-accent:#1e90ff;
  --uss-success:#57f26f;
  --uss-danger:#ff5a5f;
  --uss-radius-sm:8px;
  --uss-radius-md:12px;
  --uss-radius-lg:18px;
  --uss-shadow-md:0 16px 36px rgba(0,0,0,.28);
}

.settings-panel.properties-panel{
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)), var(--uss-panel)!important;
  border:1px solid var(--uss-border)!important;
  border-radius:var(--uss-radius-lg)!important;
  box-shadow:var(--uss-shadow-md)!important;
  overflow:hidden!important;
}

.properties-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 18px 14px;
  border-bottom:1px solid var(--uss-border);
  background:rgba(255,255,255,.025);
}

.properties-head h2{
  margin:4px 0 0;
  font-size:18px;
  letter-spacing:-.02em;
}

.version-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:26px;
  min-width:38px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(30,144,255,.12);
  border:1px solid rgba(30,144,255,.28);
  color:#b9dcff;
  font-size:12px;
  font-weight:800;
}

.properties-search-wrap{
  padding:14px 16px;
  border-bottom:1px solid var(--uss-border);
}

.properties-search{
  width:100%;
  height:38px;
  border-radius:999px!important;
  background:rgba(0,0,0,.20)!important;
  border:1px solid var(--uss-border)!important;
  padding:0 14px!important;
}

.properties-scroll{
  display:grid;
  gap:10px;
  padding:14px;
  max-height:calc(100vh - 190px);
  overflow:auto;
}

.prop-section{
  border:1px solid var(--uss-border);
  border-radius:var(--uss-radius-md);
  background:rgba(255,255,255,.025);
  overflow:hidden;
}

.prop-section summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  color:#dce6ef;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;
  font-weight:900;
  user-select:none;
}

.prop-section summary::-webkit-details-marker{
  display:none;
}

.prop-section summary::after{
  content:"▾";
  color:var(--uss-muted);
  font-size:12px;
  transition:transform .16s ease;
}

.prop-section:not([open]) summary::after{
  transform:rotate(-90deg);
}

.prop-body{
  display:grid;
  gap:1px;
  padding:0 10px 10px;
}

.prop-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(96px,140px);
  align-items:center;
  gap:12px;
  min-height:54px;
  padding:10px 6px;
  border-top:1px solid rgba(255,255,255,.05);
}

.prop-row span{
  display:grid;
  gap:3px;
  min-width:0;
}

.prop-row strong{
  color:var(--uss-text);
  font-size:13px;
  font-weight:800;
}

.prop-row small{
  color:var(--uss-muted);
  font-size:11px;
  line-height:1.2;
}

.prop-row .select,
.prop-row .input{
  width:100%;
}

.prop-note{
  margin:8px 4px 0;
  color:var(--uss-muted);
  font-size:12px;
  line-height:1.35;
}

.full-width{
  width:100%;
}

/* Toggle switch styling */
.toggle-input{
  appearance:none;
  width:46px!important;
  height:26px!important;
  justify-self:end;
  border-radius:999px;
  border:1px solid var(--uss-border-strong);
  background:rgba(255,255,255,.08);
  position:relative;
  cursor:pointer;
  transition:background .16s ease, border-color .16s ease;
}

.toggle-input::after{
  content:"";
  position:absolute;
  width:20px;
  height:20px;
  top:2px;
  left:2px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
  transition:transform .16s ease;
}

.toggle-input:checked{
  background:rgba(30,144,255,.80);
  border-color:rgba(30,144,255,.95);
}

.toggle-input:checked::after{
  transform:translateX(20px);
}

/* Better sliders and color controls */
.properties-panel input[type="range"]{
  accent-color:var(--uss-accent);
}

.properties-panel .color-input{
  height:34px!important;
  min-height:34px!important;
  padding:3px!important;
  border-radius:10px!important;
  cursor:pointer;
}

.properties-panel .select,
.properties-panel .input{
  background:rgba(0,0,0,.24)!important;
  border:1px solid var(--uss-border)!important;
  color:var(--uss-text)!important;
  border-radius:10px!important;
}

.properties-panel .select:focus,
.properties-panel .input:focus{
  outline:none!important;
  border-color:rgba(30,144,255,.65)!important;
  box-shadow:0 0 0 3px rgba(30,144,255,.14)!important;
}

/* Better collapsed state */
.settings-panel.collapsed{
  display:none!important;
}

.workbench.settings-hidden{
  grid-template-columns:minmax(0,1fr)!important;
}

@media(max-width:1100px){
  .prop-row{
    grid-template-columns:1fr;
  }

  .toggle-input{
    justify-self:start;
  }
}


/* ==========================================================================
   v9.1 Floating Properties + Collapsible Sidebar
   ========================================================================== */

/* Main app layout no longer changes when Properties opens */
.workbench{
  position:relative!important;
  grid-template-columns:minmax(0,1fr)!important;
}

.workbench.settings-hidden{
  grid-template-columns:minmax(0,1fr)!important;
}

/* Properties floats over the preview instead of taking layout width */
.settings-panel.properties-panel{
  position:fixed!important;
  top:82px!important;
  right:28px!important;
  width:min(390px, calc(100vw - 56px))!important;
  max-height:calc(100vh - 112px)!important;
  z-index:250!important;
  transform-origin:top right;
  animation:propertiesDrop .18s ease-out;
}

@keyframes propertiesDrop{
  from{
    opacity:0;
    transform:translateY(-10px) scale(.985);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.properties-scroll{
  max-height:calc(100vh - 260px)!important;
}

/* Add subtle floating backdrop feel */
.settings-panel.properties-panel::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
}

/* Sidebar collapse button */
.brand{
  position:relative;
  gap:10px!important;
}

.sidebar-collapse-btn{
  margin-left:auto;
  width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  font-size:20px;
  line-height:1;
  display:grid;
  place-items:center;
  transition:background .16s ease, transform .16s ease;
}

.sidebar-collapse-btn:hover{
  background:rgba(255,255,255,.12);
}

/* Collapse the left sidebar to icon rail */
body.sidebar-collapsed .sidebar{
  width:76px!important;
  min-width:76px!important;
  padding-left:12px!important;
  padding-right:12px!important;
}

body.sidebar-collapsed .app{
  grid-template-columns:76px minmax(0,1fr)!important;
}

body.sidebar-collapsed .brand-copy,
body.sidebar-collapsed .nav .txt,
body.sidebar-collapsed .sidebar-source,
body.sidebar-collapsed .badge:not(.version-chip){
  display:none!important;
}

body.sidebar-collapsed .brand{
  justify-content:center;
}

body.sidebar-collapsed .sidebar-collapse-btn{
  position:absolute;
  right:-8px;
  top:0;
  width:24px;
  height:24px;
  font-size:16px;
  z-index:10;
}

body.sidebar-collapsed .nav button{
  justify-content:center!important;
  padding:12px 0!important;
}

body.sidebar-collapsed .mark{
  margin:0 auto;
}

/* Preview gets more canvas-like when panels are collapsed */
body.sidebar-collapsed .main{
  padding-left:18px!important;
}

@media(max-width:900px){
  .settings-panel.properties-panel{
    top:72px!important;
    right:14px!important;
    left:14px!important;
    width:auto!important;
  }

  body.sidebar-collapsed .app{
    grid-template-columns:64px minmax(0,1fr)!important;
  }

  body.sidebar-collapsed .sidebar{
    width:64px!important;
    min-width:64px!important;
  }
}


/* ==========================================================================
   v9.2 — Design Tokens
   A consistent design system layer for the full controller UI.
   ========================================================================== */

:root{
  /* Brand / semantic colors */
  --color-bg-app:#0f1318;
  --color-bg-sidebar:#11161c;
  --color-bg-panel:#181d23;
  --color-bg-panel-soft:#141920;
  --color-bg-control:rgba(0,0,0,.24);

  --color-text-primary:#eef4f8;
  --color-text-secondary:#a5b0bd;
  --color-text-muted:#727d8a;

  --color-border-subtle:rgba(255,255,255,.075);
  --color-border-medium:rgba(255,255,255,.13);
  --color-border-strong:rgba(255,255,255,.20);

  --color-accent:#1e90ff;
  --color-accent-soft:rgba(30,144,255,.14);
  --color-accent-border:rgba(30,144,255,.45);
  --color-success:#57f26f;
  --color-warning:#f2c94c;
  --color-danger:#ff5a5f;

  /* Spacing scale */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;

  /* Radius scale */
  --radius-xs:6px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;
  --radius-xl:24px;
  --radius-pill:999px;

  /* Shadow scale */
  --shadow-sm:0 4px 10px rgba(0,0,0,.18);
  --shadow-md:0 12px 28px rgba(0,0,0,.24);
  --shadow-lg:0 24px 64px rgba(0,0,0,.42);
  --shadow-inset:inset 0 0 0 1px rgba(255,255,255,.045);

  /* Type scale */
  --font-ui:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display:Impact, "Arial Black", system-ui, sans-serif;

  --text-xs:11px;
  --text-sm:12px;
  --text-md:14px;
  --text-lg:16px;
  --text-xl:20px;
  --text-2xl:28px;

  /* Control sizes */
  --control-height-sm:32px;
  --control-height-md:38px;
  --control-height-lg:44px;

  /* Motion */
  --motion-fast:120ms ease;
  --motion-med:180ms ease;
}

/* Global surface consistency */
body{
  background:var(--color-bg-app);
  color:var(--color-text-primary);
  font-family:var(--font-ui);
}

.app{
  background:
    radial-gradient(circle at 35% 0%, rgba(30,144,255,.08), transparent 32%),
    var(--color-bg-app);
}

/* Panels and cards */
.panel,
.side-card,
.workspace,
.settings-panel,
.properties-panel{
  border:1px solid var(--color-border-subtle)!important;
  border-radius:var(--radius-lg)!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
    var(--color-bg-panel)!important;
  box-shadow:var(--shadow-md), var(--shadow-inset)!important;
}

.side-card{
  border-radius:var(--radius-md)!important;
  padding:var(--space-4)!important;
}

.workspace-head,
.topbar,
.properties-head{
  border-color:var(--color-border-subtle)!important;
}

/* Typography consistency */
.kicker{
  color:var(--color-text-muted)!important;
  font-size:var(--text-xs)!important;
  font-weight:900!important;
  letter-spacing:.11em!important;
  text-transform:uppercase!important;
}

.h1,
.workspace h2,
.properties-head h2{
  color:var(--color-text-primary)!important;
  letter-spacing:-.025em!important;
}

.help,
.prop-note,
.prop-row small{
  color:var(--color-text-secondary)!important;
}

/* Buttons */
.btn,
.nav button,
.item,
.row{
  border-radius:var(--radius-md)!important;
  transition:
    background var(--motion-fast),
    border-color var(--motion-fast),
    transform var(--motion-fast),
    box-shadow var(--motion-fast)!important;
}

.btn{
  min-height:var(--control-height-md);
  border:1px solid var(--color-border-medium)!important;
  background:rgba(255,255,255,.065)!important;
  color:var(--color-text-primary)!important;
  font-weight:800!important;
}

.btn:hover{
  background:rgba(255,255,255,.10)!important;
  border-color:var(--color-border-strong)!important;
  transform:translateY(-1px);
}

.btn.primary{
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.02)), var(--color-accent)!important;
  border-color:var(--color-accent-border)!important;
  color:#fff!important;
  box-shadow:0 10px 22px rgba(30,144,255,.20)!important;
}

.btn.danger{
  background:rgba(255,90,95,.14)!important;
  border-color:rgba(255,90,95,.35)!important;
  color:#ffd3d5!important;
}

/* Inputs */
.input,
.select,
.textarea,
.properties-panel .input,
.properties-panel .select{
  min-height:var(--control-height-md);
  border:1px solid var(--color-border-subtle)!important;
  border-radius:var(--radius-md)!important;
  background:var(--color-bg-control)!important;
  color:var(--color-text-primary)!important;
  transition:border-color var(--motion-fast), box-shadow var(--motion-fast), background var(--motion-fast)!important;
}

.input:focus,
.select:focus,
.textarea:focus{
  border-color:var(--color-accent-border)!important;
  box-shadow:0 0 0 3px var(--color-accent-soft)!important;
  outline:none!important;
}

.textarea{
  line-height:1.45!important;
}

/* Navigation */
.sidebar{
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.006)),
    var(--color-bg-sidebar)!important;
  border-right:1px solid var(--color-border-subtle)!important;
}

.nav button{
  color:var(--color-text-secondary)!important;
  border:1px solid transparent!important;
}

.nav button:hover{
  background:rgba(255,255,255,.055)!important;
  color:var(--color-text-primary)!important;
}

.nav button.active{
  background:var(--color-accent-soft)!important;
  border-color:var(--color-accent-border)!important;
  color:#d9ecff!important;
}

/* Badges */
.badge,
.version-chip{
  border-radius:var(--radius-pill)!important;
  border:1px solid var(--color-border-medium)!important;
  background:rgba(255,255,255,.06)!important;
  color:var(--color-text-secondary)!important;
  font-size:var(--text-sm)!important;
  font-weight:900!important;
}

/* Properties panel refinements using tokens */
.properties-panel{
  width:min(400px, calc(100vw - 56px))!important;
}

.prop-section{
  border-radius:var(--radius-md)!important;
  border-color:var(--color-border-subtle)!important;
  background:var(--color-bg-panel-soft)!important;
}

.prop-section summary{
  padding:var(--space-3) var(--space-4)!important;
}

.prop-row{
  min-height:56px!important;
  padding:var(--space-3) var(--space-2)!important;
}

.toggle-input{
  border-color:var(--color-border-medium)!important;
}

/* Controller preview buttons/cards */
.item{
  border:1px solid var(--color-border-medium)!important;
  box-shadow:var(--shadow-sm)!important;
}

.item:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-md)!important;
}

/* League buttons */
.league-controls .btn.active-league{
  background:var(--color-accent)!important;
  border-color:var(--color-accent-border)!important;
  color:#fff!important;
}

/* Selection / status colors */
.counter{
  border-radius:var(--radius-pill)!important;
  background:rgba(255,255,255,.065)!important;
  border:1px solid var(--color-border-medium)!important;
  color:var(--color-text-primary)!important;
}

.remaining-number{
  color:var(--color-success)!important;
}

/* Tables/lists */
.row{
  border:1px solid var(--color-border-subtle)!important;
  background:rgba(255,255,255,.035)!important;
}

.row.done{
  opacity:.58;
}

/* Scrollbars */
.properties-scroll::-webkit-scrollbar,
.textarea::-webkit-scrollbar,
.display-selected::-webkit-scrollbar{
  width:8px;
  height:8px;
}

.properties-scroll::-webkit-scrollbar-thumb,
.textarea::-webkit-scrollbar-thumb,
.display-selected::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.16);
  border-radius:var(--radius-pill);
}

.properties-scroll::-webkit-scrollbar-track,
.textarea::-webkit-scrollbar-track,
.display-selected::-webkit-scrollbar-track{
  background:transparent;
}

/* More consistent collapsed sidebar */
.sidebar-collapse-btn{
  border-radius:var(--radius-pill)!important;
  border-color:var(--color-border-medium)!important;
  background:rgba(255,255,255,.065)!important;
}

.sidebar-collapse-btn:hover{
  background:rgba(255,255,255,.12)!important;
}


/* ==========================================================================
   v9.3 — UI Polish Pass
   More finished product feel: preview canvas, clearer hierarchy, refined panels.
   ========================================================================== */

/* App shell refinement */
.app{
  min-height:100vh;
  background:
    radial-gradient(circle at 18% 0%, rgba(30,144,255,.10), transparent 26%),
    radial-gradient(circle at 80% 10%, rgba(87,242,111,.045), transparent 24%),
    linear-gradient(180deg, #101317 0%, #0b0e12 100%)!important;
}

.main{
  min-width:0;
}

/* Top bar becomes a true command bar */
.topbar{
  position:sticky;
  top:0;
  z-index:110;
  margin:-1px -1px 18px;
  padding:16px 20px!important;
  border:1px solid var(--color-border-subtle)!important;
  border-radius:0 0 var(--radius-lg) var(--radius-lg)!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)),
    rgba(15,19,24,.82)!important;
  backdrop-filter:blur(14px);
  box-shadow:0 14px 28px rgba(0,0,0,.18);
}

.topbar .toolbar{
  gap:10px!important;
}

#toggleSettings{
  min-width:138px;
}

/* Preview/workspace should feel like an OBS canvas */
.workspace{
  position:relative;
  overflow:hidden!important;
  background:
    linear-gradient(45deg, rgba(255,255,255,.018) 25%, transparent 25%) 0 0/28px 28px,
    linear-gradient(-45deg, rgba(255,255,255,.018) 25%, transparent 25%) 0 14px/28px 28px,
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
    #11161c!important;
}

.workspace::before{
  content:"LIVE PREVIEW";
  position:absolute;
  top:14px;
  right:18px;
  z-index:1;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(87,242,111,.32);
  background:rgba(87,242,111,.08);
  color:#a9ffb8;
  font-size:10px;
  font-weight:950;
  letter-spacing:.14em;
  pointer-events:none;
}

.workspace-head{
  position:relative;
  z-index:2;
  padding:22px 22px 16px!important;
  background:linear-gradient(180deg, rgba(0,0,0,.20), transparent);
}

.workspace-head h2{
  font-size:24px!important;
  margin:0 0 4px!important;
}

.module{
  position:relative;
  z-index:2;
  padding:0 22px 22px!important;
}

/* Center module preview content better */
.module-grid{
  gap:18px!important;
}

.grid,
.progress-list,
.hit-list{
  padding:12px!important;
  border-radius:var(--radius-lg)!important;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.16);
}

/* List and team buttons become more intentional in controller */
.item{
  font-weight:900!important;
  letter-spacing:.01em;
  border-radius:14px!important;
  overflow:hidden;
}

.item:not(.team-card){
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)),
    var(--color-accent)!important;
}

.selected-grid{
  padding-top:12px;
}

/* Inputs/layout editor polish */
.title-input{
  height:44px!important;
  font-size:18px!important;
  font-weight:800!important;
}

.textarea{
  min-height:260px!important;
  resize:vertical;
}

/* Side editor cards */
.side-card.stack{
  gap:14px!important;
}

.side-card .controls{
  gap:8px!important;
}

.controls .btn{
  white-space:nowrap;
}

/* Properties panel: more like professional app inspector */
.settings-panel.properties-panel{
  top:78px!important;
  right:24px!important;
  width:min(410px, calc(100vw - 48px))!important;
  border-radius:22px!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    rgba(20,25,31,.96)!important;
  backdrop-filter:blur(18px);
}

.properties-head{
  padding:16px 18px 13px!important;
}

.properties-head h2{
  font-size:17px!important;
}

.properties-search-wrap{
  padding:12px 14px!important;
}

.properties-search{
  height:36px!important;
  font-size:13px!important;
}

/* Property sections: smoother and cleaner */
.prop-section{
  transition:border-color var(--motion-fast), background var(--motion-fast);
}

.prop-section[open]{
  border-color:rgba(30,144,255,.22)!important;
  background:
    linear-gradient(180deg, rgba(30,144,255,.035), rgba(255,255,255,.015)),
    var(--color-bg-panel-soft)!important;
}

.prop-section summary{
  min-height:42px;
}

.prop-section summary:hover{
  background:rgba(255,255,255,.035);
}

.prop-body{
  padding:0 12px 12px!important;
}

.prop-row{
  grid-template-columns:minmax(0,1fr) minmax(108px,150px)!important;
  border-top:1px solid rgba(255,255,255,.045)!important;
}

.prop-row:first-child{
  border-top:0!important;
}

.prop-row strong{
  font-size:12.5px!important;
}

.prop-row small{
  font-size:10.5px!important;
}

/* Better color swatches */
.properties-panel .color-input{
  width:54px!important;
  justify-self:end;
  border-radius:999px!important;
  padding:2px!important;
  overflow:hidden;
}

/* Button groups and league controls */
.league-controls{
  padding:10px;
  border-radius:var(--radius-lg);
  background:rgba(0,0,0,.14);
  border:1px solid rgba(255,255,255,.06);
}

.league-controls .btn{
  min-height:34px;
}

/* Sidebar polish */
.sidebar{
  box-shadow:inset -1px 0 0 rgba(255,255,255,.04), 10px 0 34px rgba(0,0,0,.18);
}

.brand{
  padding-bottom:14px;
  border-bottom:1px solid var(--color-border-subtle);
}

.mark{
  box-shadow:0 10px 24px rgba(30,144,255,.24);
}

.nav{
  padding-top:12px!important;
}

.nav button{
  min-height:42px;
  border-radius:14px!important;
}

.nav button.active{
  box-shadow:inset 0 0 0 1px rgba(30,144,255,.18), 0 10px 22px rgba(30,144,255,.10);
}

/* Collapsed sidebar polish */
body.sidebar-collapsed .nav button{
  min-height:46px;
}

body.sidebar-collapsed .nav button::after{
  content:"";
  position:absolute;
  right:8px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:transparent;
}

body.sidebar-collapsed .nav button.active::after{
  background:var(--color-accent);
}

/* Counter and status */
.counter{
  height:34px;
  display:inline-flex!important;
  align-items:center;
  gap:4px;
  padding:0 12px!important;
  font-size:12px!important;
  letter-spacing:.02em;
}

/* Make preview closer to OBS output when sidebar collapsed */
body.sidebar-collapsed .workspace{
  max-width:1280px;
  margin:0 auto;
}

/* Small details */
.btn:active,
.item:active,
.nav button:active{
  transform:translateY(0) scale(.99)!important;
}

input[type="range"]{
  cursor:pointer;
}

select{
  cursor:pointer;
}

/* Improve responsive behavior */
@media(max-width:1100px){
  .topbar{
    position:relative;
    border-radius:var(--radius-lg)!important;
    margin:0 0 14px!important;
  }

  .module-grid{
    grid-template-columns:1fr!important;
  }

  .settings-panel.properties-panel{
    top:70px!important;
  }
}

@media(max-width:760px){
  .workspace::before{
    display:none;
  }

  .topbar{
    flex-direction:column;
    align-items:stretch!important;
  }

  .topbar .toolbar{
    width:100%;
  }

  .topbar .toolbar .btn{
    flex:1;
  }
}


/* ==========================================================================
   v9.3.1 — Editor spacing stability fix
   Prevents right editor card and action buttons from resizing when content changes.
   ========================================================================== */

/* Stop the right editor card from stretching to match the preview column */
.module-grid{
  align-items:start!important;
}

.module-grid > aside.side-card,
.module-grid .side-card.stack{
  align-self:start!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
}

/* Give editor panels a consistent card width/height behavior */
.module-grid > aside.side-card{
  width:100%!important;
  box-sizing:border-box!important;
}

/* Lock textareas to a predictable editor height */
.side-card textarea.textarea,
#chaseEditor,
#teamsEditor,
#progressEditor,
#checklistEditor{
  height:260px!important;
  min-height:260px!important;
  max-height:260px!important;
  resize:none!important;
  box-sizing:border-box!important;
  overflow:auto!important;
}

/* Prevent empty textareas from visually collapsing */
.side-card .textarea:placeholder-shown{
  min-height:260px!important;
}

/* Keep side-card controls from stretching vertically */
.side-card .controls{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  align-items:center!important;
}

/* Make primary update buttons span nicely but stay normal height */
.side-card .controls .btn{
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
  padding:0 14px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
  box-sizing:border-box!important;
}

/* First button in editor controls can span, but not grow vertically */
#chaseUpdate,
#teamsUpdate,
#progressUpdate,
#checklistUpdate{
  grid-column:span 1!important;
}

/* Clear button no longer expands into a giant block */
#chaseClear,
#teamsClear,
#progressClear,
#checklistClear{
  grid-column:span 2!important;
}

/* Fix the card internal spacing so it does not jump when the list changes */
.side-card.stack{
  display:grid!important;
  grid-auto-rows:max-content!important;
  align-content:start!important;
}

/* The preview grid should scroll within its own area instead of changing the editor */
.workspace .grid{
  min-height:260px!important;
  max-height:520px!important;
  overflow:auto!important;
}

/* Chase preview specifically should maintain a stable area */
#chaseGrid,
#teamsGrid{
  min-height:260px!important;
}

/* Keep empty preview states from changing layout dramatically */
#chaseGrid:empty,
#teamsGrid:empty{
  min-height:260px!important;
}

/* Mobile still allows natural height */
@media(max-width:1100px){
  .side-card textarea.textarea,
  #chaseEditor,
  #teamsEditor,
  #progressEditor,
  #checklistEditor{
    height:220px!important;
    min-height:220px!important;
    max-height:220px!important;
  }

  .workspace .grid{
    max-height:none!important;
  }
}


/* ==========================================================================
   v9.3.2 — Gold Brand Update
   Gold Ureka Stream Studio identity applied to stable v9.3.1.
   ========================================================================== */

:root{
  --gold-50:#fff3c4;
  --gold-100:#ffe68a;
  --gold-300:#f2c94c;
  --gold-500:#d4af37;
  --gold-700:#9a6b12;
  --gold-900:#3a2908;

  --color-accent:#d4af37!important;
  --color-accent-soft:rgba(212,175,55,.15)!important;
  --color-accent-border:rgba(212,175,55,.48)!important;
}

/* App background with warm premium glow */
.app{
  background:
    radial-gradient(circle at 18% 0%, rgba(212,175,55,.14), transparent 28%),
    radial-gradient(circle at 84% 8%, rgba(255,230,138,.06), transparent 22%),
    linear-gradient(180deg, #101317 0%, #090c10 100%)!important;
}

/* Premium gold brand mark */
.brand-mark,
.mark{
  background:
    radial-gradient(circle at 35% 22%, rgba(255,255,255,.26), transparent 28%),
    linear-gradient(145deg, rgba(255,230,138,.20), rgba(212,175,55,.08)),
    rgba(13,17,22,.88)!important;
  border:1px solid rgba(212,175,55,.36)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,230,138,.13),
    0 0 0 1px rgba(0,0,0,.25),
    0 14px 32px rgba(212,175,55,.18)!important;
  color:transparent!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
}

.brand-mark svg,
.mark svg{
  width:34px;
  height:34px;
  display:block;
  filter:
    drop-shadow(0 0 8px rgba(212,175,55,.32))
    drop-shadow(0 4px 8px rgba(0,0,0,.38));
}

.brand-title{
  font-size:15px!important;
  letter-spacing:-.025em!important;
}

.brand-sub{
  color:rgba(255,230,138,.70)!important;
  font-size:10px!important;
  letter-spacing:.04em!important;
  text-transform:uppercase;
}

/* Active navigation uses gold instead of blue */
.nav button.active{
  background:
    linear-gradient(90deg, rgba(212,175,55,.18), rgba(212,175,55,.06)),
    rgba(255,255,255,.03)!important;
  border-color:rgba(212,175,55,.45)!important;
  color:#ffeec0!important;
  box-shadow:
    inset 0 0 0 1px rgba(212,175,55,.16),
    0 10px 22px rgba(212,175,55,.08)!important;
}

.nav button.active::before{
  background:linear-gradient(180deg, #ffe68a, #d4af37)!important;
  box-shadow:0 0 16px rgba(212,175,55,.55)!important;
}

body.sidebar-collapsed .nav button.active::after{
  background:var(--gold-500)!important;
}

/* Buttons */
.btn.primary{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.24), transparent 35%),
    linear-gradient(180deg, #f2c94c, #b88713)!important;
  border-color:rgba(212,175,55,.55)!important;
  color:#16120a!important;
  text-shadow:0 1px 0 rgba(255,255,255,.24);
  box-shadow:
    inset 0 0 0 1px rgba(255,230,138,.18),
    0 12px 26px rgba(212,175,55,.22)!important;
}

.btn.primary:hover{
  box-shadow:
    inset 0 0 0 1px rgba(255,230,138,.25),
    0 16px 32px rgba(212,175,55,.28)!important;
  filter:brightness(1.04);
}

/* Top command bar accent */
#toolKicker,
.properties-head .kicker{
  color:#f2c94c!important;
}

/* Focus states and active league */
.input:focus,
.select:focus,
.textarea:focus{
  border-color:rgba(212,175,55,.62)!important;
  box-shadow:0 0 0 3px rgba(212,175,55,.14)!important;
}

.league-controls .btn.active-league{
  background:linear-gradient(180deg, #f2c94c, #b88713)!important;
  border-color:rgba(212,175,55,.55)!important;
  color:#16120a!important;
}

/* Properties panel gold refinements */
.settings-panel.properties-panel{
  border-color:rgba(212,175,55,.18)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,230,138,.04),
    0 30px 80px rgba(0,0,0,.48),
    0 0 60px rgba(212,175,55,.06)!important;
}

.version-chip{
  background:rgba(212,175,55,.15)!important;
  color:#ffeec0!important;
  border-color:rgba(212,175,55,.36)!important;
}

.prop-section[open]{
  border-color:rgba(212,175,55,.22)!important;
  background:
    linear-gradient(180deg, rgba(212,175,55,.045), rgba(255,255,255,.012)),
    rgba(13,18,24,.52)!important;
}

.prop-section summary::after{
  color:#d4af37!important;
}

.toggle-input:checked{
  background:
    radial-gradient(circle at 80% 50%, rgba(255,255,255,.28), transparent 30%),
    #d4af37!important;
  border-color:rgba(212,175,55,.85)!important;
}

.properties-panel input[type="range"]{
  accent-color:#d4af37!important;
}

/* Workspace premium warm glow */
.workspace{
  background:
    linear-gradient(45deg, rgba(255,255,255,.018) 25%, transparent 25%) 0 0/30px 30px,
    linear-gradient(-45deg, rgba(255,255,255,.018) 25%, transparent 25%) 0 15px/30px 30px,
    radial-gradient(circle at 50% 0%, rgba(212,175,55,.06), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
    #131920!important;
}

.workspace::before{
  border-color:rgba(212,175,55,.34)!important;
  background:
    linear-gradient(180deg, rgba(212,175,55,.15), rgba(212,175,55,.06))!important;
  color:#ffe68a!important;
  box-shadow:0 0 18px rgba(212,175,55,.10)!important;
}

/* Primary list buttons retain blue for overlay output preview, but controller chrome shifts gold */
.sidebar-source .btn.primary,
#copyUrl,
#copySidebarSource{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.24), transparent 35%),
    linear-gradient(180deg, #f2c94c, #b88713)!important;
  color:#16120a!important;
}

/* Counter success remains green, accent trims warm */
.counter{
  border-color:rgba(212,175,55,.15)!important;
}

/* Sidebar source and badges */
.badge{
  border-color:rgba(212,175,55,.18)!important;
}

.sidebar-source{
  border-color:rgba(212,175,55,.13)!important;
}

/* Selection */
::selection{
  background:rgba(212,175,55,.35)!important;
  color:#fff!important;
}


/* ==========================================================================
   v9.3.3 — Logo Square Fix
   Matches gold brand mockup more closely.
   ========================================================================== */

.brand{
  align-items:center!important;
}

.uss-app-icon,
.brand-mark.mark,
.mark.brand-mark{
  width:52px!important;
  height:52px!important;
  min-width:52px!important;
  border-radius:16px!important;
  padding:0!important;
  background:
    radial-gradient(circle at 32% 20%, rgba(255,230,138,.16), transparent 28%),
    linear-gradient(145deg, rgba(255,230,138,.08), rgba(0,0,0,.10)),
    #0d1117!important;
  border:1px solid rgba(212,175,55,.42)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,242,166,.08),
    inset 0 -18px 28px rgba(0,0,0,.30),
    0 12px 28px rgba(0,0,0,.32),
    0 0 28px rgba(212,175,55,.16)!important;
  overflow:hidden!important;
}

.uss-logo-svg{
  width:48px!important;
  height:48px!important;
  display:block!important;
  overflow:visible!important;
}

.uss-app-icon svg,
.brand-mark svg,
.mark svg{
  width:48px!important;
  height:48px!important;
  filter:none!important;
}

.uss-app-icon::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.14), transparent 32%),
    radial-gradient(circle at 70% 78%, rgba(212,175,55,.12), transparent 36%);
  pointer-events:none;
}

.brand-title{
  font-size:15px!important;
  line-height:1.05!important;
}

.brand-sub{
  margin-top:3px!important;
  font-size:9px!important;
  line-height:1.05!important;
  letter-spacing:.075em!important;
  color:#f2c94c!important;
}

/* Collapsed rail keeps the new icon centered and legible */
body.sidebar-collapsed .uss-app-icon,
body.sidebar-collapsed .brand-mark.mark,
body.sidebar-collapsed .mark.brand-mark{
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  border-radius:14px!important;
}

body.sidebar-collapsed .uss-logo-svg,
body.sidebar-collapsed .uss-app-icon svg,
body.sidebar-collapsed .brand-mark svg,
body.sidebar-collapsed .mark svg{
  width:40px!important;
  height:40px!important;
}


/* ==========================================================================
   v9.3.4 — Logo Match Attachment
   Clean, mockup-aligned gold app icon.
   ========================================================================== */

.uss-app-icon.brand-mark,
.brand-mark.uss-app-icon,
.mark.uss-app-icon{
  position:relative!important;
  width:58px!important;
  height:58px!important;
  min-width:58px!important;
  border-radius:18px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  color:transparent!important;
  background:
    radial-gradient(circle at 32% 18%, rgba(255,230,138,.12), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(0,0,0,.20)),
    #0e1217!important;
  border:1px solid rgba(212,175,55,.38)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,242,166,.065),
    inset 0 -20px 34px rgba(0,0,0,.34),
    0 14px 30px rgba(0,0,0,.34),
    0 0 30px rgba(212,175,55,.13)!important;
}

.uss-app-icon::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.13), transparent 31%),
    radial-gradient(circle at 76% 78%, rgba(212,175,55,.10), transparent 38%);
  pointer-events:none;
}

.uss-logo-svg{
  position:relative;
  z-index:1;
  width:54px!important;
  height:54px!important;
  display:block!important;
  overflow:visible!important;
}

.uss-logo-svg .logo-frame{
  fill:none;
  stroke:url(#goldStroke);
  stroke-width:7.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:url(#softGoldShadow);
}

.uss-logo-svg .logo-u{
  fill:none;
  stroke:url(#goldStroke);
  stroke-width:10.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:url(#softGoldShadow);
}

.uss-logo-svg .logo-u-highlight{
  fill:none;
  stroke:url(#goldHot);
  stroke-width:3.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.9;
}

.uss-logo-svg .logo-wedge{
  fill:url(#goldStroke);
  filter:url(#softGoldShadow);
}

.uss-logo-svg .logo-wedge-highlight{
  fill:rgba(255,255,255,.16);
}

.brand-title{
  font-size:15px!important;
  line-height:1.05!important;
  letter-spacing:-.02em!important;
}

.brand-sub{
  color:#f2c94c!important;
  letter-spacing:.075em!important;
  text-transform:uppercase!important;
}

/* Keep collapsed state clean */
body.sidebar-collapsed .uss-app-icon.brand-mark,
body.sidebar-collapsed .brand-mark.uss-app-icon,
body.sidebar-collapsed .mark.uss-app-icon{
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  border-radius:15px!important;
}

body.sidebar-collapsed .uss-logo-svg{
  width:43px!important;
  height:43px!important;
}


/* ==========================================================================
   v9.3.5 — Logo + Gold Color Refinement
   Cleaner mark, restrained premium gold, less yellow/blue clash.
   ========================================================================== */

:root{
  --gold-primary:#D4AF37!important;
  --gold-bright:#F2C94C!important;
  --gold-soft:#FFE08A!important;
  --gold-dark:#8A6418!important;
  --gold-deep:#2B210B!important;

  --color-accent:#D4AF37!important;
  --color-accent-soft:rgba(212,175,55,.12)!important;
  --color-accent-border:rgba(212,175,55,.34)!important;

  --color-bg-app:#0B0E10!important;
  --color-bg-sidebar:#101418!important;
  --color-bg-panel:#171C21!important;
  --color-bg-panel-soft:#12171B!important;
}

/* Overall color rebalance: darker graphite, restrained gold accents */
.app{
  background:
    radial-gradient(circle at 18% 0%, rgba(212,175,55,.09), transparent 28%),
    radial-gradient(circle at 85% 8%, rgba(242,201,76,.035), transparent 24%),
    linear-gradient(180deg, #0e1215 0%, #080a0d 100%)!important;
}

.sidebar{
  background:
    linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.004)),
    #101418!important;
}

/* Clean app-icon logo. No complicated SVG, no sloppy paths. */
.uss-app-icon.brand-mark,
.brand-mark.uss-app-icon,
.mark.uss-app-icon,
.mark.brand-mark{
  position:relative!important;
  width:54px!important;
  height:54px!important;
  min-width:54px!important;
  border-radius:15px!important;
  display:block!important;
  padding:0!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 35% 20%, rgba(255,224,138,.12), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(0,0,0,.22)),
    #0D1116!important;
  border:1px solid rgba(212,175,55,.28)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,224,138,.055),
    inset 0 -18px 28px rgba(0,0,0,.34),
    0 12px 28px rgba(0,0,0,.30),
    0 0 22px rgba(212,175,55,.10)!important;
}

/* Subtle highlight, not overpowering */
.uss-app-icon::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), transparent 34%),
    radial-gradient(circle at 74% 74%, rgba(212,175,55,.08), transparent 36%);
  pointer-events:none;
}

/* Four broken frame corners, like the mockup */
.uss-corner{
  position:absolute;
  width:16px;
  height:16px;
  border-color:transparent;
  border-style:solid;
  pointer-events:none;
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,.45))
    drop-shadow(0 0 4px rgba(212,175,55,.26));
}

.uss-corner::after{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:6px;
}

.uss-corner-tl{
  left:11px;
  top:11px;
  border-left:4px solid var(--gold-primary);
  border-top:4px solid var(--gold-primary);
  border-top-left-radius:7px;
}

.uss-corner-tr{
  right:11px;
  top:11px;
  border-right:4px solid var(--gold-primary);
  border-top:4px solid var(--gold-primary);
  border-top-right-radius:7px;
}

.uss-corner-bl{
  left:11px;
  bottom:11px;
  border-left:4px solid var(--gold-primary);
  border-bottom:4px solid var(--gold-primary);
  border-bottom-left-radius:7px;
}

.uss-corner-br{
  right:11px;
  bottom:11px;
  border-right:4px solid var(--gold-primary);
  border-bottom:4px solid var(--gold-primary);
  border-bottom-right-radius:7px;
}

/* Bold monogram. Clean at small size. */
.uss-u{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-52%,-52%);
  font-family:Inter, system-ui, sans-serif;
  font-size:34px;
  line-height:1;
  font-weight:950;
  letter-spacing:-.08em;
  background:linear-gradient(180deg, #FFE08A 0%, #D4AF37 58%, #8A6418 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:
    0 1px 0 rgba(255,255,255,.12),
    0 4px 8px rgba(0,0,0,.42);
  filter:drop-shadow(0 0 5px rgba(212,175,55,.18));
}

/* Camera/play wedge */
.uss-camera{
  position:absolute;
  right:3px;
  top:50%;
  transform:translateY(-50%);
  width:0;
  height:0;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-left:12px solid var(--gold-primary);
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,.45))
    drop-shadow(0 0 4px rgba(212,175,55,.18));
}

/* Brand typography now matches the mockup better */
.brand{
  align-items:center!important;
  gap:12px!important;
}

.brand-title{
  font-size:14px!important;
  line-height:1.05!important;
  font-weight:950!important;
  letter-spacing:-.025em!important;
  color:#F4F1E8!important;
}

.brand-sub{
  margin-top:3px!important;
  font-size:8.5px!important;
  line-height:1.1!important;
  font-weight:900!important;
  letter-spacing:.105em!important;
  color:#D4AF37!important;
  text-transform:uppercase!important;
}

/* Collapse mode */
body.sidebar-collapsed .uss-app-icon.brand-mark,
body.sidebar-collapsed .brand-mark.uss-app-icon,
body.sidebar-collapsed .mark.uss-app-icon,
body.sidebar-collapsed .mark.brand-mark{
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  border-radius:13px!important;
}

body.sidebar-collapsed .uss-corner{
  width:13px;
  height:13px;
}

body.sidebar-collapsed .uss-corner-tl{left:9px;top:9px;}
body.sidebar-collapsed .uss-corner-tr{right:9px;top:9px;}
body.sidebar-collapsed .uss-corner-bl{left:9px;bottom:9px;}
body.sidebar-collapsed .uss-corner-br{right:9px;bottom:9px;}
body.sidebar-collapsed .uss-u{font-size:29px;}
body.sidebar-collapsed .uss-camera{
  border-top-width:6px;
  border-bottom-width:6px;
  border-left-width:9px;
  right:2px;
}

/* Gold should feel premium, not loud */
.nav button.active{
  background:
    linear-gradient(90deg, rgba(212,175,55,.14), rgba(212,175,55,.045)),
    rgba(255,255,255,.025)!important;
  border-color:rgba(212,175,55,.28)!important;
  color:#F4E6B1!important;
  box-shadow:
    inset 0 0 0 1px rgba(212,175,55,.08),
    0 10px 20px rgba(0,0,0,.15)!important;
}

.nav button.active::before{
  background:linear-gradient(180deg, #F2C94C, #B6881F)!important;
  box-shadow:0 0 12px rgba(212,175,55,.38)!important;
}

.btn.primary,
.sidebar-source .btn.primary,
#copyUrl,
#copySidebarSource{
  background:
    linear-gradient(180deg, #E2BC40, #A47718)!important;
  border-color:rgba(212,175,55,.36)!important;
  color:#151009!important;
  text-shadow:0 1px 0 rgba(255,255,255,.20)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,224,138,.14),
    0 10px 22px rgba(0,0,0,.22)!important;
}

.btn.primary:hover,
#copyUrl:hover,
#copySidebarSource:hover{
  background:
    linear-gradient(180deg, #F2C94C, #B8871C)!important;
  filter:none!important;
}

#toolKicker,
.properties-head .kicker{
  color:#D4AF37!important;
}

.workspace{
  background:
    linear-gradient(45deg, rgba(255,255,255,.014) 25%, transparent 25%) 0 0/30px 30px,
    linear-gradient(-45deg, rgba(255,255,255,.014) 25%, transparent 25%) 0 15px/30px 30px,
    radial-gradient(circle at 50% 0%, rgba(212,175,55,.035), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.010)),
    #13181D!important;
}

.workspace::before{
  border-color:rgba(212,175,55,.24)!important;
  background:rgba(212,175,55,.075)!important;
  color:#E8D18A!important;
  box-shadow:none!important;
}

.settings-panel.properties-panel{
  border-color:rgba(212,175,55,.11)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,224,138,.025),
    0 28px 70px rgba(0,0,0,.44)!important;
}

.version-chip{
  background:rgba(212,175,55,.10)!important;
  color:#EBD88D!important;
  border-color:rgba(212,175,55,.24)!important;
}

.prop-section[open]{
  border-color:rgba(212,175,55,.16)!important;
  background:
    linear-gradient(180deg, rgba(212,175,55,.025), rgba(255,255,255,.010)),
    rgba(13,18,24,.48)!important;
}

.input:focus,
.select:focus,
.textarea:focus{
  border-color:rgba(212,175,55,.42)!important;
  box-shadow:0 0 0 3px rgba(212,175,55,.095)!important;
}

.toggle-input:checked{
  background:#D4AF37!important;
  border-color:rgba(212,175,55,.58)!important;
}

.league-controls .btn.active-league{
  background:linear-gradient(180deg, #E2BC40, #A47718)!important;
  border-color:rgba(212,175,55,.36)!important;
  color:#151009!important;
}


/* ==========================================================================
   v9.3.6 — Master SVG Logo + Color Balance
   Uses a single source-of-truth SVG asset for the site logo.
   ========================================================================== */

:root{
  --uss-gold:#D4AF37!important;
  --uss-gold-light:#F2C94C!important;
  --uss-gold-soft:#FFE08A!important;
  --uss-gold-dark:#8A6418!important;

  --color-accent:#D4AF37!important;
  --color-accent-soft:rgba(212,175,55,.105)!important;
  --color-accent-border:rgba(212,175,55,.30)!important;
}

/* Hide old CSS-built logo pieces if browser keeps old markup cached */
.uss-corner,
.uss-u,
.uss-camera,
.uss-logo-svg{
  display:none!important;
}

/* Site logo now comes from the master SVG file */
.uss-app-icon.brand-mark,
.brand-mark.uss-app-icon,
.mark.uss-app-icon,
.mark.brand-mark{
  width:58px!important;
  height:58px!important;
  min-width:58px!important;
  border-radius:18px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  background:#0E1217!important;
  border:1px solid rgba(212,175,55,.24)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,224,138,.045),
    0 14px 30px rgba(0,0,0,.30)!important;
}

.uss-app-icon::before,
.uss-app-icon::after{
  display:none!important;
}

.uss-logo-img{
  display:block!important;
  width:58px!important;
  height:58px!important;
  object-fit:contain!important;
  pointer-events:none!important;
  user-select:none!important;
}

/* Collapsed sidebar logo */
body.sidebar-collapsed .uss-app-icon.brand-mark,
body.sidebar-collapsed .brand-mark.uss-app-icon,
body.sidebar-collapsed .mark.uss-app-icon,
body.sidebar-collapsed .mark.brand-mark{
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  border-radius:15px!important;
}

body.sidebar-collapsed .uss-logo-img{
  width:46px!important;
  height:46px!important;
}

/* Color balance: graphite UI with restrained gold highlights */
.app{
  background:
    radial-gradient(circle at 16% 0%, rgba(212,175,55,.075), transparent 28%),
    radial-gradient(circle at 84% 8%, rgba(242,201,76,.030), transparent 24%),
    linear-gradient(180deg, #0E1215 0%, #080A0D 100%)!important;
}

.sidebar{
  background:
    linear-gradient(180deg, rgba(255,255,255,.026), rgba(255,255,255,.004)),
    #101418!important;
}

.brand-title{
  color:#F5F2E8!important;
  font-weight:950!important;
}

.brand-sub{
  color:#D4AF37!important;
  font-weight:900!important;
  letter-spacing:.10em!important;
}

/* Reduce overly yellow UI while keeping gold brand language */
.nav button.active{
  background:
    linear-gradient(90deg, rgba(212,175,55,.125), rgba(212,175,55,.040)),
    rgba(255,255,255,.025)!important;
  border-color:rgba(212,175,55,.25)!important;
  color:#F3E5B4!important;
}

.nav button.active::before{
  background:linear-gradient(180deg, #E4C45D, #A77A1B)!important;
  box-shadow:0 0 12px rgba(212,175,55,.30)!important;
}

.btn.primary,
.sidebar-source .btn.primary,
#copyUrl,
#copySidebarSource{
  background:
    linear-gradient(180deg, #DAB64A, #A47718)!important;
  border-color:rgba(212,175,55,.32)!important;
  color:#151009!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,224,138,.12),
    0 10px 22px rgba(0,0,0,.22)!important;
}

.btn.primary:hover,
#copyUrl:hover,
#copySidebarSource:hover{
  background:linear-gradient(180deg, #E5C259, #AE811F)!important;
}

.workspace{
  background:
    linear-gradient(45deg, rgba(255,255,255,.013) 25%, transparent 25%) 0 0/30px 30px,
    linear-gradient(-45deg, rgba(255,255,255,.013) 25%, transparent 25%) 0 15px/30px 30px,
    radial-gradient(circle at 50% 0%, rgba(212,175,55,.030), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.010)),
    #13181D!important;
}

.workspace::before{
  border-color:rgba(212,175,55,.22)!important;
  background:rgba(212,175,55,.065)!important;
  color:#E0CA81!important;
  box-shadow:none!important;
}

#toolKicker,
.properties-head .kicker{
  color:#D4AF37!important;
}

.input:focus,
.select:focus,
.textarea:focus{
  border-color:rgba(212,175,55,.38)!important;
  box-shadow:0 0 0 3px rgba(212,175,55,.085)!important;
}

.toggle-input:checked{
  background:#CBA637!important;
  border-color:rgba(212,175,55,.55)!important;
}

.league-controls .btn.active-league{
  background:linear-gradient(180deg, #DAB64A, #A47718)!important;
  border-color:rgba(212,175,55,.32)!important;
  color:#151009!important;
}

.settings-panel.properties-panel{
  border-color:rgba(212,175,55,.10)!important;
}

.version-chip{
  background:rgba(212,175,55,.09)!important;
  color:#E5D08A!important;
  border-color:rgba(212,175,55,.22)!important;
}

.prop-section[open]{
  border-color:rgba(212,175,55,.145)!important;
}


/* ==========================================================================
   v9.3.7 — Uploaded Brand Assets
   Uses provided logo.png and logo_lockup.png directly.
   ========================================================================== */

/* Replace code-built/sidebar text logo with real brand image */
.brand{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  min-height:74px!important;
  padding:16px 0 18px!important;
  border-bottom:1px solid rgba(212,175,55,.14)!important;
}

.brand-lockup{
  display:block!important;
  width:178px!important;
  max-width:calc(100% - 36px)!important;
  height:auto!important;
  object-fit:contain!important;
  user-select:none!important;
  pointer-events:none!important;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.28));
}

.brand-icon-img{
  display:none!important;
  width:46px!important;
  height:46px!important;
  object-fit:contain!important;
  user-select:none!important;
  pointer-events:none!important;
}

/* Hide old generated logo pieces if present */
.uss-app-icon,
.brand-mark,
.mark,
.brand-copy{
  display:none!important;
}

/* Keep collapse button aligned with image lockup */
.sidebar-collapse-btn{
  position:absolute!important;
  right:0!important;
  top:20px!important;
  z-index:5!important;
}

/* Collapsed sidebar uses icon-only uploaded asset */
body.sidebar-collapsed .brand{
  justify-content:center!important;
  min-height:70px!important;
  padding:14px 0 16px!important;
}

body.sidebar-collapsed .brand-lockup{
  display:none!important;
}

body.sidebar-collapsed .brand-icon-img{
  display:block!important;
  width:44px!important;
  height:44px!important;
}

body.sidebar-collapsed .sidebar-collapse-btn{
  right:-8px!important;
  top:8px!important;
}

/* Harmonize app colors with the uploaded gold logo */
:root{
  --color-accent:#D4AF37!important;
  --color-accent-soft:rgba(212,175,55,.11)!important;
  --color-accent-border:rgba(212,175,55,.30)!important;
}

.app{
  background:
    radial-gradient(circle at 16% 0%, rgba(212,175,55,.075), transparent 28%),
    radial-gradient(circle at 84% 8%, rgba(242,201,76,.030), transparent 24%),
    linear-gradient(180deg, #0E1215 0%, #080A0D 100%)!important;
}

.nav button.active{
  background:
    linear-gradient(90deg, rgba(212,175,55,.125), rgba(212,175,55,.040)),
    rgba(255,255,255,.025)!important;
  border-color:rgba(212,175,55,.25)!important;
  color:#F3E5B4!important;
}

.nav button.active::before{
  background:linear-gradient(180deg, #F2C94C, #A47718)!important;
  box-shadow:0 0 12px rgba(212,175,55,.30)!important;
}

.btn.primary,
.sidebar-source .btn.primary,
#copyUrl,
#copySidebarSource{
  background:linear-gradient(180deg, #DAB64A, #A47718)!important;
  border-color:rgba(212,175,55,.32)!important;
  color:#151009!important;
}

#toolKicker,
.properties-head .kicker{
  color:#D4AF37!important;
}


/* ==========================================================================
   v9.3.8 — Luxury Black Background
   Darkens the app so uploaded gold logo blends naturally into the UI.
   ========================================================================== */

:root{
  --lux-black:#080B0D;
  --lux-black-2:#0A0D10;
  --lux-graphite:#101316;
  --lux-panel:#111518;
  --lux-panel-soft:#0F1316;
  --lux-border:rgba(255,255,255,.055);
  --lux-border-strong:rgba(255,255,255,.095);
  --lux-gold:#D4AF37;
  --lux-gold-soft:rgba(212,175,55,.10);
}

/* Base background now matches the black in the uploaded logo assets */
html,
body{
  background:#080B0D!important;
}

.app{
  background:
    radial-gradient(circle at 13% 0%, rgba(212,175,55,.045), transparent 28%),
    radial-gradient(circle at 88% 8%, rgba(255,224,138,.018), transparent 32%),
    linear-gradient(180deg, #0B0D0F 0%, #080B0D 100%)!important;
}

/* Remove cool blue/gray cast from major surfaces */
.sidebar{
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.004)),
    #0B0D0F!important;
  border-right:1px solid rgba(255,255,255,.05)!important;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.025), 10px 0 34px rgba(0,0,0,.16)!important;
}

.main{
  background:transparent!important;
}

.topbar{
  background:
    linear-gradient(180deg, rgba(255,255,255,.030), rgba(255,255,255,.008)),
    rgba(10,13,16,.88)!important;
  border-color:rgba(255,255,255,.055)!important;
  box-shadow:0 14px 28px rgba(0,0,0,.22)!important;
}

.workspace,
.panel,
.side-card,
.settings-panel,
.properties-panel{
  background:
    linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.008)),
    #111518!important;
  border-color:rgba(255,255,255,.055)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.018),
    0 18px 40px rgba(0,0,0,.34)!important;
}

/* Preview canvas stays dark and subtle */
.workspace{
  background:
    linear-gradient(45deg, rgba(255,255,255,.010) 25%, transparent 25%) 0 0/30px 30px,
    linear-gradient(-45deg, rgba(255,255,255,.010) 25%, transparent 25%) 0 15px/30px 30px,
    radial-gradient(circle at 50% 0%, rgba(212,175,55,.022), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.024), rgba(255,255,255,.006)),
    #0F1316!important;
}

.workspace::after{
  opacity:.28!important;
}

.workspace-head{
  background:linear-gradient(180deg, rgba(0,0,0,.16), transparent)!important;
}

/* Right editor cards blend with the new darker tone */
.module-grid > aside.side-card,
.side-card.stack{
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.010)),
    #121619!important;
  border-color:rgba(255,255,255,.065)!important;
}

.grid,
.progress-list,
.hit-list{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.020), transparent 42%),
    rgba(0,0,0,.22)!important;
  border-color:rgba(255,255,255,.050)!important;
}

.input,
.select,
.textarea,
.properties-panel .input,
.properties-panel .select{
  background:rgba(0,0,0,.28)!important;
  border-color:rgba(255,255,255,.060)!important;
}

.textarea{
  background:
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.18)),
    rgba(0,0,0,.18)!important;
}

/* Uploaded logo should sit on the same black without a sticker effect */
.brand{
  border-bottom:1px solid rgba(255,255,255,.055)!important;
}

.brand-lockup{
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.18))!important;
}

/* Keep gold restrained to accents only */
.nav button.active{
  background:
    linear-gradient(90deg, rgba(212,175,55,.105), rgba(212,175,55,.030)),
    rgba(255,255,255,.018)!important;
  border-color:rgba(212,175,55,.22)!important;
  color:#F0DFAC!important;
}

.nav button.active::before{
  background:linear-gradient(180deg, #E8C958, #A87A1B)!important;
  box-shadow:0 0 10px rgba(212,175,55,.28)!important;
}

.btn.primary,
.sidebar-source .btn.primary,
#copyUrl,
#copySidebarSource{
  background:linear-gradient(180deg, #D6B348, #9D7117)!important;
  border-color:rgba(212,175,55,.28)!important;
  color:#130F08!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,224,138,.10),
    0 10px 22px rgba(0,0,0,.24)!important;
}

.btn.primary:hover,
#copyUrl:hover,
#copySidebarSource:hover{
  background:linear-gradient(180deg, #E0BE55, #A97C1E)!important;
}

.btn,
.nav button,
.badge,
.version-chip,
.sidebar-source{
  border-color:rgba(255,255,255,.070)!important;
}

.sidebar-source{
  background:
    linear-gradient(180deg, rgba(255,255,255,.026), rgba(255,255,255,.008)),
    #111518!important;
}

/* Properties panel */
.settings-panel.properties-panel{
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.010)),
    rgba(13,16,19,.965)!important;
  border-color:rgba(255,255,255,.070)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.018),
    0 28px 70px rgba(0,0,0,.48)!important;
}

.prop-section{
  background:
    linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.006)),
    rgba(8,11,13,.42)!important;
  border-color:rgba(255,255,255,.052)!important;
}

.prop-section[open]{
  border-color:rgba(212,175,55,.135)!important;
  background:
    linear-gradient(180deg, rgba(212,175,55,.020), rgba(255,255,255,.006)),
    rgba(9,12,15,.56)!important;
}

.workspace::before{
  border-color:rgba(212,175,55,.18)!important;
  background:rgba(212,175,55,.055)!important;
  color:#DCC778!important;
  box-shadow:none!important;
}

#toolKicker,
.properties-head .kicker{
  color:#D4AF37!important;
}

/* Remove remaining strong blue feel from focus/active accents */
.input:focus,
.select:focus,
.textarea:focus{
  border-color:rgba(212,175,55,.34)!important;
  box-shadow:0 0 0 3px rgba(212,175,55,.075)!important;
}

.toggle-input:checked{
  background:#C7A233!important;
  border-color:rgba(212,175,55,.48)!important;
}

.league-controls .btn.active-league{
  background:linear-gradient(180deg, #D6B348, #9D7117)!important;
  border-color:rgba(212,175,55,.28)!important;
  color:#130F08!important;
}

/* Outer frame becomes very subtle */
.app::before{
  border-color:rgba(255,255,255,.050)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.018),
    0 0 80px rgba(0,0,0,.18)!important;
}


/* ==========================================================================
   v9.4 — Design System Finalization
   Unified typography, spacing, colors, buttons, cards, borders, and shadows.
   ========================================================================== */

:root{
  /* Core palette */
  --ds-black-950:#07090B;
  --ds-black-900:#090B0D;
  --ds-black-850:#0B0E10;
  --ds-graphite-800:#101316;
  --ds-graphite-750:#121518;
  --ds-graphite-700:#15191D;
  --ds-graphite-650:#191E23;

  --ds-white:#F5F2E8;
  --ds-text:#ECE8DD;
  --ds-text-soft:#B9B4A8;
  --ds-text-muted:#7D786D;

  --ds-gold:#D4AF37;
  --ds-gold-hover:#E0BE55;
  --ds-gold-dark:#9D7117;
  --ds-gold-soft:rgba(212,175,55,.11);
  --ds-gold-border:rgba(212,175,55,.28);

  --ds-success:#57F26F;
  --ds-danger:#FF5A5F;

  /* Spacing */
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:24px;
  --s-6:32px;
  --s-7:48px;
  --s-8:64px;

  /* Radius */
  --r-input:8px;
  --r-button:10px;
  --r-card:12px;
  --r-panel:16px;
  --r-float:20px;
  --r-pill:999px;

  /* Typography */
  --font-ui:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --type-hero:32px;
  --type-section:24px;
  --type-card:18px;
  --type-body:14px;
  --type-small:12px;
  --type-micro:11px;

  /* Shadows */
  --shadow-sm:0 6px 14px rgba(0,0,0,.20);
  --shadow-md:0 16px 34px rgba(0,0,0,.30);
  --shadow-lg:0 28px 70px rgba(0,0,0,.46);
  --shadow-inset:inset 0 0 0 1px rgba(255,255,255,.018);

  /* Borders */
  --border-subtle:1px solid rgba(255,255,255,.055);
  --border-medium:1px solid rgba(255,255,255,.085);
  --border-gold:1px solid rgba(212,175,55,.22);

  /* Motion */
  --ease:180ms ease;
}

/* Base */
html,
body{
  background:var(--ds-black-900)!important;
  color:var(--ds-text)!important;
  font-family:var(--font-ui)!important;
}

.app{
  background:
    radial-gradient(circle at 15% 0%, rgba(212,175,55,.048), transparent 28%),
    radial-gradient(circle at 86% 6%, rgba(255,224,138,.018), transparent 30%),
    linear-gradient(180deg, var(--ds-black-850) 0%, var(--ds-black-950) 100%)!important;
}

/* Global type hierarchy */
.h1,
.workspace-head h2,
.properties-head h2{
  font-size:var(--type-section)!important;
  line-height:1.05!important;
  letter-spacing:-.035em!important;
  color:var(--ds-white)!important;
  font-weight:900!important;
}

.topbar .h1{
  font-size:var(--type-hero)!important;
}

.kicker,
.prop-section summary,
.sidebar-source .kicker{
  font-size:var(--type-micro)!important;
  line-height:1.1!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
  color:var(--ds-gold)!important;
  font-weight:900!important;
}

.help,
.prop-row small,
.prop-note{
  font-size:var(--type-body)!important;
  line-height:1.35!important;
  color:var(--ds-text-soft)!important;
}

.prop-row small{
  font-size:var(--type-small)!important;
  color:var(--ds-text-muted)!important;
}

/* Sidebar */
.sidebar{
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.004)),
    var(--ds-black-850)!important;
  border-right:var(--border-subtle)!important;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.018), 10px 0 30px rgba(0,0,0,.16)!important;
}

.brand{
  min-height:74px!important;
  padding:var(--s-4) 0 var(--s-5)!important;
  border-bottom:var(--border-subtle)!important;
}

.brand-lockup{
  width:178px!important;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.18))!important;
}

/* Navigation */
.nav{
  gap:var(--s-2)!important;
}

.nav button{
  min-height:42px!important;
  padding:0 var(--s-3)!important;
  border-radius:var(--r-button)!important;
  border:1px solid transparent!important;
  background:transparent!important;
  color:var(--ds-text-soft)!important;
  font-size:var(--type-body)!important;
  font-weight:800!important;
  transition:background var(--ease), color var(--ease), border-color var(--ease), transform var(--ease)!important;
}

.nav button:hover{
  background:rgba(255,255,255,.045)!important;
  color:var(--ds-white)!important;
}

.nav button.active{
  background:
    linear-gradient(90deg, rgba(212,175,55,.115), rgba(212,175,55,.032)),
    rgba(255,255,255,.018)!important;
  border-color:rgba(212,175,55,.22)!important;
  color:#F0DFAC!important;
}

.nav button.active::before{
  background:linear-gradient(180deg, var(--ds-gold-hover), var(--ds-gold-dark))!important;
  box-shadow:0 0 10px rgba(212,175,55,.28)!important;
}

/* Panels / cards */
.panel,
.workspace,
.side-card,
.settings-panel,
.properties-panel,
.sidebar-source{
  border:var(--border-subtle)!important;
  border-radius:var(--r-panel)!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.026), rgba(255,255,255,.007)),
    var(--ds-graphite-750)!important;
  box-shadow:var(--shadow-md), var(--shadow-inset)!important;
}

.side-card,
.sidebar-source{
  border-radius:var(--r-card)!important;
}

.topbar{
  padding:var(--s-4) var(--s-5)!important;
  margin-bottom:var(--s-4)!important;
  border:var(--border-subtle)!important;
  border-radius:0 0 var(--r-panel) var(--r-panel)!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.030), rgba(255,255,255,.008)),
    rgba(10,13,16,.88)!important;
  box-shadow:var(--shadow-sm)!important;
}

.workspace{
  background:
    linear-gradient(45deg, rgba(255,255,255,.010) 25%, transparent 25%) 0 0/30px 30px,
    linear-gradient(-45deg, rgba(255,255,255,.010) 25%, transparent 25%) 0 15px/30px 30px,
    radial-gradient(circle at 50% 0%, rgba(212,175,55,.020), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.024), rgba(255,255,255,.006)),
    var(--ds-graphite-800)!important;
}

.workspace-head{
  padding:var(--s-5) var(--s-5) var(--s-4)!important;
}

.module{
  padding:0 var(--s-5) var(--s-5)!important;
}

.module-grid{
  gap:var(--s-5)!important;
}

/* Editor cards and preview areas */
.module-grid > aside.side-card,
.side-card.stack{
  background:
    linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.008)),
    var(--ds-graphite-750)!important;
  border:var(--border-medium)!important;
  box-shadow:var(--shadow-md), var(--shadow-inset)!important;
}

.grid,
.progress-list,
.hit-list{
  padding:var(--s-3)!important;
  border-radius:var(--r-card)!important;
  border:var(--border-subtle)!important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.018), transparent 42%),
    rgba(0,0,0,.22)!important;
}

/* Buttons */
.btn{
  min-height:40px!important;
  padding:0 var(--s-4)!important;
  border-radius:var(--r-button)!important;
  border:var(--border-medium)!important;
  background:rgba(255,255,255,.055)!important;
  color:var(--ds-text)!important;
  font-size:var(--type-body)!important;
  font-weight:850!important;
  letter-spacing:-.01em!important;
  box-shadow:none!important;
  transition:background var(--ease), border-color var(--ease), transform var(--ease), box-shadow var(--ease)!important;
}

.btn:hover{
  background:rgba(255,255,255,.085)!important;
  border-color:rgba(255,255,255,.12)!important;
  transform:translateY(-1px)!important;
}

.btn.primary,
.sidebar-source .btn.primary,
#copyUrl,
#copySidebarSource{
  background:linear-gradient(180deg, #D6B348, #9D7117)!important;
  border-color:rgba(212,175,55,.30)!important;
  color:#130F08!important;
  text-shadow:0 1px 0 rgba(255,255,255,.16)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,224,138,.10),
    0 10px 22px rgba(0,0,0,.22)!important;
}

.btn.primary:hover,
#copyUrl:hover,
#copySidebarSource:hover{
  background:linear-gradient(180deg, #E0BE55, #A97C1E)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,224,138,.14),
    0 12px 26px rgba(0,0,0,.28)!important;
}

.btn.danger,
#chaseClear,
#teamsClear,
#progressClear,
#checklistClear{
  background:rgba(255,90,95,.105)!important;
  border-color:rgba(255,90,95,.28)!important;
  color:#FFD6D8!important;
}

/* Inputs */
.input,
.select,
.textarea,
.properties-panel .input,
.properties-panel .select{
  min-height:40px!important;
  border-radius:var(--r-input)!important;
  border:var(--border-subtle)!important;
  background:rgba(0,0,0,.28)!important;
  color:var(--ds-text)!important;
  font-size:var(--type-body)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.010)!important;
  transition:border-color var(--ease), box-shadow var(--ease), background var(--ease)!important;
}

.input:hover,
.select:hover,
.textarea:hover{
  border-color:rgba(255,255,255,.10)!important;
}

.input:focus,
.select:focus,
.textarea:focus{
  border-color:rgba(212,175,55,.34)!important;
  box-shadow:0 0 0 3px rgba(212,175,55,.075)!important;
  outline:none!important;
}

.textarea{
  line-height:1.42!important;
  background:
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.18)),
    rgba(0,0,0,.18)!important;
}

/* Preview buttons/items */
.item{
  border-radius:var(--r-button)!important;
  border:var(--border-medium)!important;
  box-shadow:var(--shadow-sm)!important;
  font-weight:900!important;
  transition:transform var(--ease), box-shadow var(--ease), filter var(--ease)!important;
}

.item:not(.team-card){
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.030)),
    #2F80ED!important;
}

.item:hover{
  transform:translateY(-1px)!important;
  box-shadow:var(--shadow-md)!important;
}

/* Pills / counters / badges */
.counter,
.badge,
.version-chip,
#workspaceBadge{
  border-radius:var(--r-pill)!important;
  border:var(--border-subtle)!important;
  background:rgba(255,255,255,.050)!important;
  color:var(--ds-text-soft)!important;
  font-size:var(--type-small)!important;
  font-weight:900!important;
}

.remaining-number{
  color:var(--ds-success)!important;
}

.workspace::before{
  border-color:rgba(212,175,55,.18)!important;
  background:rgba(212,175,55,.055)!important;
  color:#DCC778!important;
  box-shadow:none!important;
}

/* Properties panel */
.settings-panel.properties-panel{
  border-radius:var(--r-float)!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.034), rgba(255,255,255,.010)),
    rgba(13,16,19,.965)!important;
  border:var(--border-medium)!important;
  box-shadow:var(--shadow-lg), var(--shadow-inset)!important;
}

.prop-section{
  border-radius:var(--r-card)!important;
  border:var(--border-subtle)!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.020), rgba(255,255,255,.006)),
    rgba(8,11,13,.42)!important;
}

.prop-section[open]{
  border-color:rgba(212,175,55,.135)!important;
}

.prop-row{
  min-height:56px!important;
  padding:var(--s-3) var(--s-2)!important;
}

.toggle-input{
  width:46px!important;
  height:26px!important;
  border-radius:var(--r-pill)!important;
}

.toggle-input:checked{
  background:#C7A233!important;
  border-color:rgba(212,175,55,.48)!important;
}

/* Spacing consistency */
.side-card.stack{
  gap:var(--s-4)!important;
}

.side-card .controls{
  gap:var(--s-2)!important;
}

.league-controls{
  padding:var(--s-3)!important;
  gap:var(--s-2)!important;
  border-radius:var(--r-card)!important;
  border:var(--border-subtle)!important;
  background:rgba(0,0,0,.16)!important;
}

.league-controls .btn.active-league{
  background:linear-gradient(180deg, #D6B348, #9D7117)!important;
  border-color:rgba(212,175,55,.30)!important;
  color:#130F08!important;
}

/* Scrollbar consistency */
*::-webkit-scrollbar{
  width:8px;
  height:8px;
}

*::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.14);
  border-radius:var(--r-pill);
}

*::-webkit-scrollbar-track{
  background:transparent;
}

/* Interaction polish */
.btn:active,
.item:active,
.nav button:active{
  transform:translateY(0) scale(.99)!important;
}

::selection{
  background:rgba(212,175,55,.30)!important;
  color:#fff!important;
}


/* ==========================================================================
   v9.4.3 — Remove Page Background Only
   Keeps Broadcast Team Board container; removes only the actual page background.
   ========================================================================== */

/* Transparent OBS/page background */
html.remove-page-background,
html.remove-page-background body,
body.remove-page-background{
  background:transparent!important;
}

/* The display canvas itself should not paint black behind the overlay */
body.remove-page-background .display,
body.remove-page-background #displayRoot{
  background:transparent!important;
}

/* Important: preserve Broadcast Team Board container/frame styling */
body.remove-page-background.display-broadcast .display-shell,
body.remove-page-background .broadcast-frame,
body.remove-page-background .display-shell{
  /* intentionally do NOT override background/border/shadow here */
}

/* Remove only any full-page pseudo/background layers, not the broadcast box */
body.remove-page-background::before,
body.remove-page-background::after,
html.remove-page-background::before,
html.remove-page-background::after{
  background:transparent!important;
}

/* Guard against old app-level background tokens leaking into display page */
body.remove-page-background .app,
body.remove-page-background main.display{
  background:transparent!important;
}

/* Keep the Broadcast Team Board visual container, header, grid, counter, and selected bar visible */
body.remove-page-background .display-shell,
body.remove-page-background .display-header,
body.remove-page-background .display-grid,
body.remove-page-background .display-counter,
body.remove-page-background .display-selected,
body.remove-page-background .team-card,
body.remove-page-background .broadcast-team-card,
body.remove-page-background .v8-team-tile{
  visibility:visible!important;
}


/* ==========================================================================
   v9.5.2 — Clean Recovery
   Sidebar is untouched from stable v9.4.3. Settings scroll safety only.
   ========================================================================== */

/* Settings panel scroll safety only */
.settings-panel.properties-panel{
  max-height:calc(100vh - 108px)!important;
  overflow:hidden!important;
}

.properties-scroll{
  max-height:calc(100vh - 250px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-bottom:32px!important;
}

.prop-section:last-child{
  margin-bottom:32px!important;
}

/* Emergency override: neutralize any browser-cached v9.5 sidebar rail styles */
.nav::before,
.nav::after,
.nav button::before,
.nav button::after{
  box-sizing:border-box;
}

/* Keep the existing stable sidebar width and prevent broken overflow clipping */
.sidebar{
  box-sizing:border-box!important;
}

.nav,
.nav button{
  box-sizing:border-box!important;
}


/* ==========================================================================
   v9.6 — Workspace Manager UI
   Adds project/workspace controls without changing sidebar layout.
   ========================================================================== */

.workspace-manager{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  margin-right:10px;
  min-width:0;
}

.workspace-select-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:230px;
  padding:4px 4px 4px 12px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:999px;
  background:rgba(0,0,0,.18);
}

.workspace-label{
  color:rgba(245,242,232,.48);
  font-size:10px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.workspace-select{
  min-height:30px!important;
  height:30px!important;
  width:180px!important;
  border:0!important;
  background:transparent!important;
  color:var(--ds-white, #F5F2E8)!important;
  font-size:13px!important;
  font-weight:850!important;
  padding:0 8px!important;
  box-shadow:none!important;
}

.save-status{
  min-width:72px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.065);
  background:rgba(255,255,255,.035);
  color:rgba(245,242,232,.62);
  font-size:11px;
  font-weight:900;
}

.save-status[data-status="saving..."],
.save-status[data-status="saving"]{
  color:#D4AF37;
  border-color:rgba(212,175,55,.22);
  background:rgba(212,175,55,.055);
}

.save-status[data-status="saved"]{
  color:#57F26F;
  border-color:rgba(87,242,111,.18);
  background:rgba(87,242,111,.045);
}

.btn.small{
  min-height:32px!important;
  height:32px!important;
  padding:0 12px!important;
  font-size:12px!important;
  border-radius:999px!important;
}

.btn.danger-lite{
  border-color:rgba(255,90,95,.22)!important;
  color:#FFD6D8!important;
  background:rgba(255,90,95,.075)!important;
}

.btn.danger-lite:hover{
  background:rgba(255,90,95,.12)!important;
}

@media(max-width:1150px){
  .workspace-manager{
    order:3;
    width:100%;
    margin:12px 0 0;
    flex-wrap:wrap;
  }

  .workspace-select-wrap{
    flex:1;
    min-width:220px;
  }

  .workspace-select{
    width:100%!important;
  }
}

@media(max-width:720px){
  .workspace-manager{
    gap:6px;
  }

  .save-status{
    min-width:64px;
  }

  .btn.small{
    flex:1;
  }
}


/* ==========================================================================
   v9.7.7 — Background Opacity Fixed
   The opacity slider controls only the display page background.
   ========================================================================== */

html.uss-transparent-page,
html.uss-transparent-page body,
body.uss-transparent-page{
  background:transparent!important;
  background-color:transparent!important;
}

/* Page/root canvas only. Keeps broadcast/team containers visible. */
html.uss-transparent-page .display,
html.uss-transparent-page #displayRoot,
html.uss-transparent-page main,
body.uss-transparent-page .display,
body.uss-transparent-page #displayRoot,
body.uss-transparent-page main{
  background:transparent!important;
  background-color:transparent!important;
}


/* ==========================================================================
   v9.7.8 — Broadcast Background Opacity Fix
   The opacity slider now controls the Broadcast Team Board shell background.
   ========================================================================== */

:root{
  --uss-display-bg-rgb:5, 7, 10;
  --uss-display-bg-alpha:1;
  --uss-display-bg:rgba(5, 7, 10, 1);
}

/* Page background also follows the slider */
body,
.display,
#displayRoot{
  background-color:var(--uss-display-bg)!important;
}

/* Broadcast shell keeps its container/border but the black fill now follows opacity */
.display-broadcast .display-shell{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,190,70,calc(.14 * var(--uss-display-bg-alpha))), transparent 32%),
    radial-gradient(circle at 50% 100%, rgba(255,178,45,calc(.10 * var(--uss-display-bg-alpha))), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,calc(.035 * var(--uss-display-bg-alpha))), rgba(255,255,255,calc(.008 * var(--uss-display-bg-alpha)))),
    rgba(var(--uss-display-bg-rgb), var(--uss-display-bg-alpha))!important;
}

/* At 0 opacity, only the fill disappears. Border, content, teams, and layout stay. */
html.uss-bg-transparent,
html.uss-bg-transparent body,
body.uss-bg-transparent,
html.uss-bg-transparent .display,
body.uss-bg-transparent .display,
html.uss-bg-transparent #displayRoot,
body.uss-bg-transparent #displayRoot{
  background:transparent!important;
  background-color:transparent!important;
}

/* v9.7.9: transparent broadcast shell override disabled */

/* Preserve the container identity even when transparent */
html.uss-bg-transparent .display-broadcast .display-shell,
body.uss-bg-transparent.display-broadcast .display-shell{
  border-color:rgba(255,255,255,.24)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,196,80,.20),
    0 28px 80px rgba(0,0,0,.28)!important;
}

/* Decorative corner glow should fade with the background */
html.uss-bg-transparent .display-broadcast .display-shell::before,
body.uss-bg-transparent.display-broadcast .display-shell::before{
  opacity:.18!important;
}


/* ==========================================================================
   v9.7.9 — Keep Team Container Background
   Remove Background affects only the page behind the overlay.
   Broadcast Team Board container background stays visible.
   ========================================================================== */

html.uss-bg-transparent,
html.uss-bg-transparent body,
body.uss-bg-transparent,
html.uss-transparent-page,
html.uss-transparent-page body,
body.uss-transparent-page{
  background:transparent!important;
  background-color:transparent!important;
}

html.uss-bg-transparent .display,
body.uss-bg-transparent .display,
html.uss-transparent-page .display,
body.uss-transparent-page .display,
html.uss-bg-transparent #displayRoot,
body.uss-bg-transparent #displayRoot,
html.uss-transparent-page #displayRoot,
body.uss-transparent-page #displayRoot{
  background:transparent!important;
  background-color:transparent!important;
}

.display-broadcast .display-shell,
html.uss-bg-transparent .display-broadcast .display-shell,
body.uss-bg-transparent.display-broadcast .display-shell,
html.uss-transparent-page .display-broadcast .display-shell,
body.uss-transparent-page.display-broadcast .display-shell{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,190,70,.14), transparent 32%),
    radial-gradient(circle at 50% 100%, rgba(255,178,45,.10), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008)),
    rgba(4,7,10,.92)!important;
  border:2px solid rgba(255,255,255,.24)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,196,80,.20),
    inset 0 0 80px rgba(0,0,0,.65),
    0 28px 80px rgba(0,0,0,.55)!important;
}

.display-broadcast .display-shell::before,
html.uss-bg-transparent .display-broadcast .display-shell::before,
body.uss-bg-transparent.display-broadcast .display-shell::before,
html.uss-transparent-page .display-broadcast .display-shell::before,
body.uss-transparent-page.display-broadcast .display-shell::before{
  display:block!important;
  opacity:.7!important;
}


/* ==========================================================================
   v10 — Desktop Shell
   New application shell while preserving stable v9.7.9 functionality.
   ========================================================================== */

:root{
  --v10-bg:#080A0C;
  --v10-surface:#0E1114;
  --v10-border:rgba(255,255,255,.065);
  --v10-text:#F5F2E8;
  --v10-muted:rgba(245,242,232,.56);
  --v10-soft:rgba(245,242,232,.34);
  --v10-gold:#D4AF37;
  --v10-shadow:0 24px 70px rgba(0,0,0,.42);
}

html, body{background:var(--v10-bg)!important;}

.app{
  min-height:100vh!important;
  display:grid!important;
  grid-template-columns:236px minmax(0,1fr)!important;
  background:
    radial-gradient(circle at 16% 0%, rgba(212,175,55,.055), transparent 28%),
    radial-gradient(circle at 85% 6%, rgba(255,224,138,.018), transparent 28%),
    linear-gradient(180deg, #0B0D0F, #07090B)!important;
}

.sidebar{
  width:236px!important;
  min-width:236px!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.020), rgba(255,255,255,.004)),
    rgba(9,12,14,.94)!important;
  border-right:1px solid rgba(255,255,255,.055)!important;
  padding:18px 16px!important;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.018)!important;
}

.brand{
  padding-bottom:18px!important;
  margin-bottom:18px!important;
  border-bottom:1px solid rgba(255,255,255,.055)!important;
}

.brand-lockup{width:170px!important;}

.nav{gap:8px!important;}

.nav button{
  height:42px!important;
  min-height:42px!important;
  border-radius:12px!important;
  padding:0 12px!important;
  color:var(--v10-muted)!important;
}

.nav button:hover{
  background:rgba(255,255,255,.045)!important;
  color:var(--v10-text)!important;
}

.nav button.active{
  background:
    linear-gradient(90deg, rgba(212,175,55,.14), rgba(212,175,55,.035)),
    rgba(255,255,255,.020)!important;
  border-color:rgba(212,175,55,.22)!important;
  color:#F0DFAC!important;
}

.main{
  min-width:0!important;
  padding:0 22px 74px!important;
  position:relative!important;
}

.topbar{
  position:sticky!important;
  top:0!important;
  z-index:70!important;
  min-height:76px!important;
  display:flex!important;
  align-items:center!important;
  gap:16px!important;
  margin:0 -22px 18px!important;
  padding:18px 22px!important;
  border-radius:0!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.060)!important;
  background:
    linear-gradient(180deg, rgba(12,15,18,.96), rgba(10,12,15,.88))!important;
  box-shadow:0 12px 34px rgba(0,0,0,.22)!important;
  backdrop-filter:blur(18px)!important;
}

.topbar .h1{
  font-size:28px!important;
  letter-spacing:-.045em!important;
}

#toolKicker{color:var(--v10-gold)!important;}

.topbar .toolbar{
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}

.workspace{
  min-height:calc(100vh - 180px)!important;
  border-radius:22px!important;
  border:1px solid rgba(255,255,255,.070)!important;
  background:
    linear-gradient(45deg, rgba(255,255,255,.010) 25%, transparent 25%) 0 0/32px 32px,
    linear-gradient(-45deg, rgba(255,255,255,.010) 25%, transparent 25%) 0 16px/32px 32px,
    radial-gradient(circle at 50% 0%, rgba(212,175,55,.025), transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.006)),
    #0E1215!important;
  box-shadow:var(--v10-shadow), inset 0 0 0 1px rgba(255,255,255,.018)!important;
  overflow:hidden!important;
}

.workspace-head{padding:24px 28px 18px!important;}
.workspace-head h2{font-size:26px!important;letter-spacing:-.04em!important;}
.module{padding:0 28px 28px!important;}
.module-grid{gap:24px!important;align-items:start!important;}

.module-grid > aside.side-card,
.side-card.stack{
  border-radius:18px!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.010)),
    rgba(13,16,19,.96)!important;
  border:1px solid rgba(255,255,255,.075)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.018)!important;
}

.settings-panel.properties-panel{
  border-radius:22px!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.040), rgba(255,255,255,.010)),
    rgba(10,13,16,.97)!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.55)!important;
}

.v10-statusbar{
  position:fixed;
  left:236px;
  right:0;
  bottom:0;
  z-index:80;
  height:54px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 22px;
  border-top:1px solid rgba(255,255,255,.060);
  background:
    linear-gradient(180deg, rgba(14,17,20,.94), rgba(8,10,12,.98));
  backdrop-filter:blur(18px);
  box-shadow:0 -12px 34px rgba(0,0,0,.26);
}

.v10-workspace-pill,
.v10-save-pill{
  height:32px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.070);
  background:rgba(255,255,255,.035);
  color:var(--v10-muted);
  font-size:12px;
  font-weight:850;
}

.v10-status-label{
  color:var(--v10-soft);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:950;
}

.v10-workspace-pill strong{color:var(--v10-text);}

.save-dot{
  width:7px;
  height:7px;
  border-radius:999px;
  background:#57F26F;
  box-shadow:0 0 10px rgba(87,242,111,.45);
}

#v10CopySource{
  margin-left:auto;
  height:32px!important;
  min-height:32px!important;
  border-radius:999px!important;
}

body.v10-focus-mode .sidebar,
body.v10-focus-mode .topbar,
body.v10-focus-mode .v10-statusbar{display:none!important;}

body.v10-focus-mode .app{grid-template-columns:1fr!important;}
body.v10-focus-mode .main{padding:22px!important;}
body.v10-focus-mode .workspace{min-height:calc(100vh - 44px)!important;}

body.sidebar-collapsed .app{grid-template-columns:76px minmax(0,1fr)!important;}
body.sidebar-collapsed .sidebar{width:76px!important;min-width:76px!important;}
body.sidebar-collapsed .v10-statusbar{left:76px!important;}

.sidebar-source{display:none!important;}

.btn{border-radius:12px!important;}
.btn.primary{background:linear-gradient(180deg, #D6B348, #9D7117)!important;color:#120F08!important;}

@media(max-width:980px){
  .app{grid-template-columns:76px minmax(0,1fr)!important;}
  .sidebar{width:76px!important;min-width:76px!important;padding-left:12px!important;padding-right:12px!important;}
  .brand-lockup{display:none!important;}
  .brand-icon-img{display:block!important;width:44px!important;height:44px!important;}
  .nav button .txt{display:none!important;}
  .nav button{justify-content:center!important;padding:0!important;}
  .v10-statusbar{left:76px!important;}
}

@media(max-width:760px){
  .main{padding:0 14px 74px!important;}
  .topbar{margin:0 -14px 14px!important;padding:14px!important;flex-wrap:wrap!important;}
  .topbar .toolbar{width:100%;margin-left:0!important;justify-content:flex-start;}
  .module-grid{grid-template-columns:1fr!important;}
  .v10-statusbar{left:0!important;height:auto;min-height:58px;flex-wrap:wrap;padding:10px 14px;}
}


/* ==========================================================================
   v10.1 — Desktop Experience
   Collapsible nav polish, collapsible inspector, shortcuts, toasts.
   ========================================================================== */

/* Smooth shell transitions */
.app,
.sidebar,
.main,
.v10-statusbar,
.settings-panel.properties-panel,
.workspace{
  transition:
    grid-template-columns 220ms ease,
    width 220ms ease,
    min-width 220ms ease,
    left 220ms ease,
    transform 220ms ease,
    opacity 180ms ease,
    box-shadow 180ms ease!important;
}

/* Collapsed navigation feels intentional */
body.sidebar-collapsed .sidebar{
  overflow:visible!important;
}

body.sidebar-collapsed .brand{
  display:flex!important;
  justify-content:center!important;
  padding-bottom:14px!important;
}

body.sidebar-collapsed .brand-lockup{
  display:none!important;
}

body.sidebar-collapsed .brand-icon-img{
  display:block!important;
  width:44px!important;
  height:44px!important;
}

body.sidebar-collapsed .nav button{
  position:relative!important;
}

body.sidebar-collapsed .nav button .txt{
  display:none!important;
}

body.sidebar-collapsed .nav button:hover::after{
  content:attr(title);
  position:absolute;
  left:calc(100% + 10px);
  top:50%;
  transform:translateY(-50%);
  white-space:nowrap;
  padding:7px 10px;
  border-radius:10px;
  background:#101316;
  border:1px solid rgba(255,255,255,.10);
  color:#F5F2E8;
  font-size:12px;
  font-weight:850;
  box-shadow:0 14px 30px rgba(0,0,0,.35);
  z-index:999;
}

/* Inspector collapse */
.v10-inspector-collapse{
  width:30px!important;
  height:30px!important;
  min-height:30px!important;
  padding:0!important;
  border-radius:999px!important;
  margin-right:8px!important;
}

body.v10-inspector-hidden .settings-panel.properties-panel{
  transform:translateX(calc(100% + 28px))!important;
  opacity:0!important;
  pointer-events:none!important;
}

body.v10-inspector-hidden .workspace{
  box-shadow:
    0 28px 90px rgba(0,0,0,.50),
    inset 0 0 0 1px rgba(255,255,255,.020)!important;
}

/* Preview frame upgrade */
.workspace::before{
  content:"LIVE PREVIEW • 1920 × 1080";
  position:absolute;
  top:16px;
  right:18px;
  z-index:3;
  height:26px;
  display:inline-flex;
  align-items:center;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.28);
  color:rgba(245,242,232,.58);
  font-size:10px;
  font-weight:950;
  letter-spacing:.10em;
  text-transform:uppercase;
  backdrop-filter:blur(12px);
}

/* Better status bar */
.v10-save-pill{
  color:#BFFFD0!important;
  border-color:rgba(87,242,111,.18)!important;
  background:rgba(87,242,111,.045)!important;
}

.v10-statusbar::before{
  content:"Ctrl/⌘ + Shift + C copies browser source • Space toggles Properties";
  color:rgba(245,242,232,.38);
  font-size:11px;
  font-weight:800;
  margin-left:4px;
}

@media(max-width:1120px){
  .v10-statusbar::before{
    display:none;
  }
}

/* Toast notifications */
.v10-toast-root{
  position:fixed;
  right:22px;
  bottom:72px;
  z-index:9999;
  display:grid;
  gap:8px;
  pointer-events:none;
}

.v10-toast{
  transform:translateY(10px);
  opacity:0;
  min-width:210px;
  padding:11px 14px;
  border-radius:14px;
  border:1px solid rgba(212,175,55,.26);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.014)),
    #101316;
  color:#F5F2E8;
  font-size:13px;
  font-weight:900;
  box-shadow:0 22px 54px rgba(0,0,0,.45);
  transition:opacity 180ms ease, transform 180ms ease;
}

.v10-toast.show{
  transform:translateY(0);
  opacity:1;
}

/* Premium button feedback */
.btn{
  transition:
    transform 150ms ease,
    background 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease!important;
}

.btn:hover{
  box-shadow:0 10px 22px rgba(0,0,0,.20)!important;
}

.btn:active{
  transform:translateY(0) scale(.985)!important;
}

/* Empty state polish for blank grids */
.grid:empty::before,
.progress-list:empty::before,
.hit-list:empty::before{
  content:"Nothing added yet";
  display:grid;
  place-items:center;
  min-height:140px;
  border:1px dashed rgba(255,255,255,.12);
  border-radius:16px;
  color:rgba(245,242,232,.42);
  font-weight:900;
  letter-spacing:.02em;
}

/* Slightly stronger inspector section rhythm */
.prop-section{
  overflow:hidden!important;
}

.prop-section summary{
  cursor:pointer!important;
}

.prop-section[open]{
  box-shadow:inset 0 0 0 1px rgba(212,175,55,.045)!important;
}


/* ==========================================================================
   v10.1.1 — QA Fixes
   ========================================================================== */

#focusModeBtn{
  white-space:nowrap!important;
}

.topbar .toolbar{
  flex-wrap:wrap!important;
}

.version-chip{
  white-space:nowrap!important;
}

/* Keep collapsed sidebar tooltips readable */
body.sidebar-collapsed .nav button:hover::after{
  min-width:max-content!important;
}


/* ==========================================================================
   v10.2 — Security + OBS Stability
   ========================================================================== */

.display-error{
  position:fixed;
  inset:24px;
  z-index:99999;
  display:grid;
  place-items:center;
  padding:24px;
  border-radius:20px;
  border:1px solid rgba(255,90,95,.35);
  background:rgba(8,10,12,.94);
  color:#FFD6D8;
  font:800 16px/1.35 Inter,system-ui,sans-serif;
  text-align:center;
  box-shadow:0 28px 80px rgba(0,0,0,.55);
}

.display-error[hidden]{
  display:none!important;
}

.v10-toast-error{
  border-color:rgba(255,90,95,.32)!important;
  color:#FFD6D8!important;
}

.full-width{
  width:100%;
}

.prop-note{
  color:rgba(245,242,232,.52);
  font-size:12px;
  line-height:1.35;
}


/* ==========================================================================
   v10.3 — Workspace + Status Bar Refactor
   Workspace actions live in the bottom status bar. Topbar remains minimal.
   ========================================================================== */

.main{
  padding-bottom:78px!important;
}

.topbar .workspace-manager{
  display:none!important;
}

.v103-statusbar{
  position:fixed;
  left:236px;
  right:0;
  bottom:0;
  z-index:90;
  min-height:58px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 22px;
  border-top:1px solid rgba(255,255,255,.065);
  background:
    linear-gradient(180deg, rgba(14,17,20,.95), rgba(8,10,12,.98));
  backdrop-filter:blur(18px);
  box-shadow:0 -14px 36px rgba(0,0,0,.28);
}

.v103-workspace{
  position:relative;
  flex:0 1 auto;
}

.v103-workspace-trigger{
  min-height:36px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 13px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:#F5F2E8;
  font-weight:900;
}

.v103-workspace-trigger:hover{
  background:rgba(255,255,255,.07);
}

.v103-label{
  color:rgba(245,242,232,.45);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:950;
}

.v103-workspace-menu{
  position:absolute;
  left:0;
  bottom:calc(100% + 10px);
  width:244px;
  display:grid;
  gap:5px;
  padding:10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
    #101316;
  box-shadow:0 24px 70px rgba(0,0,0,.48);
}

.v103-workspace-menu[hidden]{
  display:none!important;
}

.v103-workspace-select{
  min-height:36px!important;
  height:36px!important;
  margin-bottom:4px;
}

.v103-workspace-menu button{
  min-height:34px;
  padding:0 10px;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  color:#F5F2E8;
  text-align:left;
  font-size:13px;
  font-weight:850;
}

.v103-workspace-menu button:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.08);
}

.v103-workspace-menu .danger-menu{
  color:#FFD6D8;
}

.v103-workspace-menu .danger-menu:hover{
  background:rgba(255,90,95,.11);
  border-color:rgba(255,90,95,.22);
}

.v103-status-pill{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(87,242,111,.18);
  background:rgba(87,242,111,.045);
  color:#BFFFD0;
  font-size:12px;
  font-weight:900;
}

.v103-copy-source{
  margin-left:auto;
  min-height:38px!important;
  height:38px!important;
  padding:0 18px!important;
  border-radius:999px!important;
  font-weight:950!important;
}

/* hide older statusbar if it exists */
.v10-statusbar{
  display:none!important;
}

body.sidebar-collapsed .v103-statusbar{
  left:76px;
}

@media(max-width:980px){
  .v103-statusbar{
    left:76px;
  }
}

@media(max-width:760px){
  .main{
    padding-bottom:118px!important;
  }

  .v103-statusbar{
    left:0;
    flex-wrap:wrap;
    align-items:center;
    padding:10px 14px;
  }

  .v103-workspace{
    flex:1 1 100%;
  }

  .v103-workspace-trigger{
    width:100%;
    justify-content:space-between;
  }

  .v103-workspace-menu{
    width:calc(100vw - 28px);
  }

  .v103-status-pill{
    flex:1;
  }

  .v103-copy-source{
    flex:1;
    margin-left:0;
  }
}


/* ==========================================================================
   v10.3.1 — Workspace Status Bar Patch
   Removes duplicate topbar workspace controls and keeps dropdown actions bound.
   ========================================================================== */

.topbar > .save-status,
.topbar > #newWorkspaceBtn,
.topbar > #duplicateWorkspaceBtn,
.topbar > #deleteWorkspaceBtn{
  display:none!important;
}


/* ==========================================================================
   v10.4 — Asset Reliability: Logo fallback badges
   Minimal styling only. Keeps existing layout intact.
   ========================================================================== */

.team-logo-wrap{
  display:inline-grid;
  place-items:center;
  width:100%;
  height:100%;
  min-width:28px;
  min-height:28px;
}

.logo-fallback{
  display:inline-grid;
  place-items:center;
  min-width:32px;
  height:32px;
  padding:0 7px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,224,138,.14), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.018)),
    rgba(0,0,0,.22);
  color:rgba(245,242,232,.92);
  font-size:11px;
  line-height:1;
  font-weight:950;
  letter-spacing:.04em;
  text-transform:uppercase;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);
}

.logo-fallback.team-card-logo,
.logo-fallback.broadcast-team-logo{
  min-width:38px;
  height:38px;
  font-size:12px;
}

img.team-logo,
img[class*="logo"]{
  object-fit:contain;
}

[data-logo-state="fallback"] img{
  display:none!important;
}

.hybrid-source-actions{
  display:grid;
  gap:8px;
  margin-top:10px;
}

.hybrid-source-actions .btn{
  width:100%;
}

/* ==========================================================================
   Final OBS Display Background Control
   JS is the only source of display background opacity.
   ========================================================================== */

html,
body,
#displayRoot,
.display,
.display-shell,
.display-broadcast .display-shell,
.stage,
.display-grid {
  background: transparent !important;
  background-color: transparent !important;
}

.display-shell::before,
.display-broadcast .display-shell::before {
  content: none !important;
  background: none !important;
}