/* XIRONIC OBS shared design base */
:root{
  --xr-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --xr-accent-a: #22d3ee;
  --xr-accent-b: #b700fa;
  --xr-accent-warm: #ffd54a;
  --xr-frame-a: #ffd54a;
  --xr-frame-b: #f59e0b;
  --xr-panel: #0f172a;
  --xr-text: #e2e8f0;
  --xr-muted: #94a3b8;
  --xr-live: #67ff9a;
  --xr-radius: 6px;
  --xr-pad: 14px;
  --xr-blur: 10px;
  --xr-glow: 10px;
  --xr-glass-bg: rgba(15,23,42,.34);
  --xr-ticker-bg: rgba(15,23,42,.28);
  --xr-line: rgba(255,255,255,.12);
  --xr-glass-surface: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  --xr-overlay-radius: 6px;
  --xr-overlay-radius-soft: 4px;
  --xr-overlay-border: rgba(255,213,74,.46);
  --xr-overlay-border-soft: rgba(255,213,74,.30);
  --xr-overlay-line: rgba(255,213,74,.18);
  --xr-overlay-surface: linear-gradient(180deg, rgba(31,41,55,.74), rgba(12,17,28,.72));
  --xr-overlay-bg: rgba(6,10,18,.62);
  --xr-overlay-bg-strong: rgba(15,19,31,.90);
  --xr-overlay-shadow: 0 18px 40px rgba(0,0,0,.42);
  --xr-overlay-inset: inset 0 0 0 1px rgba(255,255,255,.035);
  --xr-overlay-status-bg: rgba(255,213,74,.10);
  --xr-overlay-status-inner: rgba(8,13,23,.58);
  --xr-preview-bg:
    radial-gradient(1200px 800px at 20% 20%, rgba(34,211,238,.07), transparent 55%),
    radial-gradient(1000px 700px at 80% 30%, rgba(183,0,250,.055), transparent 55%),
    radial-gradient(900px 620px at 82% 82%, rgba(250,204,21,.045), transparent 58%),
    linear-gradient(180deg, rgba(2,6,23,.16), rgba(15,23,42,.12));
}

html,
body{
  width:100%;
  height:100%;
  margin:0;
  background:transparent;
  overflow:hidden;
  font-family:var(--xr-font);
  color:var(--xr-text);
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

body.preview-bg{
  background:var(--xr-preview-bg);
}

.xr-fullscreen{
  position:fixed;
  inset:0;
  pointer-events:none;
}

.xr-stage{
  width:100%;
  height:100%;
  padding:var(--xr-pad);
}

.xr-glass{
  background:var(--xr-glass-surface), var(--xr-glass-bg);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.055) inset,
    0 0 var(--xr-blur) color-mix(in srgb, var(--xr-frame-a) 14%, transparent);
  backdrop-filter:blur(var(--xr-blur)) saturate(1.08);
  -webkit-backdrop-filter:blur(var(--xr-blur)) saturate(1.08);
}

.xr-overlay-shell{
  box-sizing:border-box;
  border:1px solid var(--xr-overlay-border);
  border-radius:var(--xr-overlay-radius);
  background:var(--xr-overlay-surface), var(--xr-overlay-bg);
  box-shadow:var(--xr-overlay-shadow), var(--xr-overlay-inset);
  backdrop-filter:blur(12px) saturate(1.18);
  -webkit-backdrop-filter:blur(12px) saturate(1.18);
}

.xr-overlay-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--xr-overlay-line);
  color:#e8eefc;
  font-weight:900;
}

.xr-overlay-title{
  min-width:0;
  display:grid;
  gap:1px;
}

.xr-overlay-title span{
  color:var(--xr-accent-warm);
  line-height:1;
  font-weight:900;
}

.xr-overlay-title strong{
  min-width:0;
  overflow:hidden;
  color:#f4f7ff;
  font-weight:950;
  letter-spacing:0;
  line-height:1.08;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.xr-overlay-status{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  border:1px solid color-mix(in srgb, var(--xr-frame-a) 30%, rgba(255,255,255,.12));
  border-radius:999px;
  background:var(--xr-overlay-status-bg);
}

.xr-overlay-status strong{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:var(--xr-overlay-status-inner);
  color:#ffe9a6;
  font-weight:900;
}

.xr-overlay-status span{
  color:rgba(232,238,252,.78);
  font-weight:850;
  white-space:nowrap;
}

.xr-overlay-live{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid color-mix(in srgb, var(--xr-live) 32%, rgba(255,255,255,.12));
  border-radius:var(--xr-overlay-radius-soft);
  background:rgba(0,0,0,.26);
  color:var(--xr-text);
  font-weight:900;
  letter-spacing:0;
  text-transform:uppercase;
}

.xr-overlay-live i,
.xr-overlay-live::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:999px;
  background:var(--xr-live);
  box-shadow:0 0 14px color-mix(in srgb, var(--xr-live) 78%, transparent);
}

.xr-overlay-frame{
  box-sizing:border-box;
  border-radius:var(--xr-overlay-radius);
  --xr-outline-radius:var(--xr-overlay-radius);
  --xr-outline-thickness:2px;
  --xr-outline-a:var(--xr-frame-a);
  --xr-outline-b:var(--xr-frame-b);
  --xr-outline-glow:var(--xr-glow);
  --xr-outline-opacity:.88;
  --xr-outline-z:2;
}

.xr-gradient-outline{
  --xr-outline-radius: var(--xr-overlay-radius);
  --xr-outline-thickness: 2px;
  --xr-outline-a: var(--xr-frame-a);
  --xr-outline-b: var(--xr-frame-b);
  --xr-outline-glow: var(--xr-glow);
  --xr-outline-opacity: .88;
  --xr-outline-z: 2;
  position:relative;
  border-radius:var(--xr-outline-radius);
}

.xr-gradient-outline::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:var(--xr-outline-thickness);
  background:linear-gradient(90deg, var(--xr-outline-a), var(--xr-outline-b));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  filter:drop-shadow(0 0 var(--xr-outline-glow) var(--xr-outline-a));
  opacity:var(--xr-outline-opacity);
  pointer-events:none;
  z-index:var(--xr-outline-z);
}

.xrEmbedPreviewPaused{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:14px;
  overflow:auto;
  color:#b6c2cc;
  background:rgba(8,15,20,.94);
  text-align:center;
  font:12px/1.4 system-ui,sans-serif;
}
.xrEmbedPreviewPaused strong{color:#e7cb8d;}
.xrEmbedPreviewPaused a{color:#e7cb8d;text-decoration:underline;}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
}