/* Overlay for OBS browser source.
   Transparent by default, no chrome, no scrollbars. Everything is one card
   anchored bottom-left so it survives a 1280x720 canvas at any scale. */
html,body{margin:0;padding:0;background:transparent;overflow:hidden;height:100%}
.ov-body{font-family:var(--f-sans);color:var(--silk)}

.ov-stage{
  position:fixed;inset:0;
  display:flex;align-items:flex-end;justify-content:flex-start;
  padding:var(--ov-pad,28px);
  pointer-events:none;
}
.ov-stage[data-side="right"]{justify-content:flex-end}

.ov-card{
  --ov-accent:#f0a53a;
  --ov-silk:#f4f1ea;
  --ov-dim:#bdb9b1;
  display:grid;grid-template-rows:auto auto auto auto;
  min-width:calc(340px * var(--ov-scale,1));
  max-width:calc(620px * var(--ov-scale,1));
  padding:calc(15px * var(--ov-scale,1)) calc(19px * var(--ov-scale,1)) calc(14px * var(--ov-scale,1));
  border-radius:calc(10px * var(--ov-scale,1));
  background:rgba(9,9,11,.82);
  border:1px solid rgba(242,239,232,.14);
  box-shadow:0 1px 0 rgba(242,239,232,.10) inset, 0 18px 48px rgba(0,0,0,.5);
  backdrop-filter:blur(14px) saturate(1.1);
  transform-origin:bottom left;
  transition:border-color .5s var(--ease, ease), opacity .5s var(--ease, ease);
}
.ov-stage[data-side="right"] .ov-card{transform-origin:bottom right}
.ov-card[data-state="running"]{--ov-accent:#d8483a;border-color:rgba(216,72,58,.34)}
.ov-card[data-state="idle"]{--ov-accent:#8d8a83}
.ov-card[data-state="stale"]{--ov-accent:#c98a2e;opacity:.94}
.ov-card[data-state="offline"]{--ov-accent:#d8483a;opacity:.9}
.ov-card[data-bare="1"]{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;padding-left:2px}
.ov-card[data-bare="1"] .ov-bar,.ov-card[data-bare="1"] .ov-strip,.ov-card[data-bare="1"] .ov-foot{border-color:transparent}

.ov-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:calc(8px * var(--ov-scale,1));
  border-bottom:1px solid rgba(242,239,232,.10);
}
.ov-tag{
  font-family:var(--f-mono);font-size:calc(11px * var(--ov-scale,1));
  letter-spacing:.17em;color:var(--ov-accent);
  transition:color .5s ease;
}
.ov-round{
  font-family:var(--f-mono);font-size:calc(12px * var(--ov-scale,1));
  color:var(--ov-silk);letter-spacing:.02em;opacity:.82;
}
.ov-main{display:flex;align-items:baseline;gap:calc(10px * var(--ov-scale,1));padding:calc(9px * var(--ov-scale,1)) 0 0;flex-wrap:wrap}
.ov-state{
  font-size:calc(34px * var(--ov-scale,1));font-weight:500;line-height:1;
  letter-spacing:-.026em;color:var(--ov-silk);
  transition:color .5s ease;
}
.ov-card[data-state="running"] .ov-state{color:var(--ov-silk)}
.ov-card[data-state="idle"] .ov-state{color:var(--ov-dim)}
.ov-card[data-state="stale"] .ov-state{color:var(--ov-accent)}
.ov-card[data-state="offline"] .ov-state{color:var(--ov-accent)}
.ov-meta{font-family:var(--f-mono);font-size:calc(13px * var(--ov-scale,1));color:var(--ov-silk);opacity:.7}

.ov-strip{display:flex;align-items:center;gap:calc(9px * var(--ov-scale,1));padding:calc(10px * var(--ov-scale,1)) 0 calc(9px * var(--ov-scale,1))}
.ov-progress{flex:1 1 auto;height:calc(5px * var(--ov-scale,1));background:rgba(242,239,232,.14);border-radius:2px;overflow:hidden}
.ov-progress-fill{display:block;height:100%;width:0%;background:var(--ov-accent);border-radius:2px;transition:width .9s linear,background .5s ease}
.ov-count{font-family:var(--f-mono);font-size:calc(14px * var(--ov-scale,1));color:var(--ov-silk);min-width:calc(46px * var(--ov-scale,1));text-align:right;font-variant-numeric:tabular-nums}

.ov-foot{
  display:flex;align-items:center;gap:calc(14px * var(--ov-scale,1));flex-wrap:wrap;
  padding-top:calc(8px * var(--ov-scale,1));
  border-top:1px solid rgba(242,239,232,.10);
  font-family:var(--f-mono);font-size:calc(11.5px * var(--ov-scale,1));
  color:var(--ov-dim);letter-spacing:.05em;
}
.ov-age{margin-left:auto}
.ov-card[data-state="stale"] .ov-age,.ov-card[data-state="offline"] .ov-age{color:var(--ov-accent)}

@media (prefers-reduced-motion:reduce){
  .ov-progress-fill{transition:none}
  .ov-card{transition:none}
}