/* =====================================================
   TikTok Live Overlay — System projektowy "Puls streamu"
   Wersja premium — Mission Control
   ===================================================== */

/* ─── Tokeny ─────────────────────────────────────── */
:root {
  --bg-base:      #09090E;
  --bg-primary:   #0D0E13;
  --bg-surface:   #13141C;
  --bg-surface2:  #1A1C28;
  --bg-surface3:  #212336;
  --bg-hover:     #1E2032;

  --accent:         #8B7FF0;
  --accent-dim:     rgba(139,127,240,0.12);
  --accent-glow:    rgba(139,127,240,0.22);
  --accent-hover:   #7A6EDF;
  --accent-gift:    #F0618B;
  --accent-gift-dim:rgba(240,97,139,0.12);
  --accent-live:    #6FCF7F;
  --accent-live-dim:rgba(111,207,127,0.12);

  --text-primary: #E8E9EE;
  --text-secondary:#A0A3B1;
  --text-muted:   #5C6079;
  --text-error:   #E05C5C;

  --border:       rgba(255,255,255,0.06);
  --border-subtle:rgba(255,255,255,0.04);
  --border-accent:rgba(139,127,240,0.3);
  --border-live:  rgba(111,207,127,0.3);

  /* Skala odstępów 8px */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:20px; --s6:24px; --s7:28px; --s8:32px;
  --s10:40px; --s12:48px;

  --radius:    12px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-xs: 5px;
  --radius-pill:999px;

  --sidebar-w:    220px;
  --topbar-h:     54px;
  --t:            150ms ease;
  --t-slow:       300ms ease;

  --font-ui:      'Inter', system-ui, sans-serif;
  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Cascadia Code', monospace;

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.6);
}

/* Automation Studio refinements */
.automation-rule{padding:0;overflow:hidden;transition:border-color var(--t),background var(--t)}
.automation-rule:hover{border-color:var(--border-accent);background:var(--bg-hover)}
.automation-rule-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;cursor:pointer;list-style:none}
.automation-rule-summary::-webkit-details-marker{display:none}
.automation-rule-summary::after{content:'+';color:var(--text-muted);font-size:16px;transition:transform var(--t)}
.automation-rule[open] .automation-rule-summary::after{transform:rotate(45deg);color:var(--accent)}
.automation-rule-flow{flex:1;min-width:0}
.automation-rule-flow .automation-node{max-width:min(42vw,360px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.automation-rule-meta{flex-wrap:wrap;justify-content:flex-end}
.automation-rule-state{color:var(--accent-live);font-weight:600}
.automation-rule-state.off{color:var(--text-muted)}
.automation-rule-detail{padding:0 14px 14px;border-top:1px solid var(--border-subtle);animation:automation-reveal var(--t-slow)}
.automation-sequence-summary{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0}
.automation-summary-step{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--border-subtle);background:var(--bg-primary);border-radius:var(--radius-xs);font-size:11px;color:var(--text-muted)}
.automation-summary-step b{color:var(--accent)}
.automation-summary-step span:last-child{color:var(--text-secondary)}
.automation-rule-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.automation-form-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;grid-column:1/-1}
.automation-validation-error{margin-top:12px;padding:10px 12px;border:1px solid rgba(224,92,92,.3);background:rgba(224,92,92,.08);color:var(--text-error);font-size:12px;border-radius:var(--radius-sm)}
.automation-plan{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding:11px 12px;border:1px solid var(--border-live);background:var(--accent-live-dim);border-radius:var(--radius-sm);font-size:11px;color:var(--text-secondary)}
.automation-plan strong{color:var(--accent-live);text-transform:uppercase;letter-spacing:.5px}
.automation-plan-warnings{width:100%;color:#e9bd72}
.sequence-reorder{display:flex;align-items:center;gap:3px}
.sequence-drag,.sequence-grip{color:var(--text-muted);font-family:var(--font-mono);cursor:grab;user-select:none}
.sequence-grip{font-size:11px;flex:0 0 auto}
.automation-sequence-action{justify-content:flex-start}
.automation-icon-btn:disabled{opacity:.25;cursor:not-allowed}
@keyframes automation-reveal{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){
  .automation-rule-summary{align-items:flex-start;flex-direction:column}
  .automation-rule-summary::after{position:absolute;right:14px}
  .automation-rule-meta{justify-content:flex-start}
  .automation-form-actions .btn{flex:1;min-width:120px}
  .automation-plan{align-items:flex-start;flex-direction:column;gap:4px}
}

/* ─── Reset ──────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg-base);
  color:var(--text-primary);
  font-family:var(--font-ui);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
button{cursor:pointer;border:none;background:none;font-family:var(--font-ui);font-size:inherit;color:inherit}
input{font-family:var(--font-ui);font-size:inherit;color:inherit}
a{color:var(--accent);text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-xs)}
:focus:not(:focus-visible){outline:none}

/* ─────────────────────────────────────────────────
   AUTH — strona logowania
   ───────────────────────────────────────────────── */
#auth-screen{
  min-height:calc(100vh - var(--banner-h, 0px));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:var(--s6);
  gap:var(--s5);
  background:
    radial-gradient(ellipse 70% 50% at 20% 10%, rgba(139,127,240,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 90%, rgba(111,207,127,0.04) 0%, transparent 60%),
    var(--bg-base);
}

.auth-brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--s2);
}
.auth-brand-logo{
  display:flex;
  align-items:center;
  gap:var(--s3);
  font-family:var(--font-heading);
  font-size:18px;
  font-weight:500;
  color:var(--text-secondary);
}
.auth-brand-logo strong{color:var(--text-primary)}

.auth-card{
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  width:100%;
  max-width:400px;
  box-shadow:var(--shadow-lg),0 0 0 1px var(--border-subtle);
  overflow:hidden;
}
.auth-card-inner{padding:32px 32px 28px}

.auth-heading{
  font-family:var(--font-heading);
  font-size:22px;
  font-weight:600;
  letter-spacing:-0.4px;
  margin-bottom:4px;
}
.auth-sub{
  font-size:13px;
  color:var(--text-muted);
  margin-bottom:var(--s6);
}

.auth-tabs{
  display:flex;
  background:var(--bg-base);
  border-radius:var(--radius-sm);
  padding:3px;
  gap:3px;
  margin-bottom:var(--s6);
  border:1px solid var(--border-subtle);
}
.auth-tab{
  flex:1;
  padding:8px 0;
  text-align:center;
  border-radius:var(--radius-xs);
  font-size:13px;
  font-weight:500;
  color:var(--text-muted);
  transition:background var(--t),color var(--t);
}
.auth-tab.active{background:var(--bg-surface2);color:var(--text-primary)}
.auth-tab:hover:not(.active){color:var(--text-secondary)}

.form-group{margin-bottom:var(--s4)}
.form-label{
  display:block;
  font-size:11px;
  font-weight:500;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.6px;
  margin-bottom:6px;
}
.form-input{
  width:100%;
  background:var(--bg-primary);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:10px 14px;
  color:var(--text-primary);
  font-size:14px;
  transition:border-color var(--t),box-shadow var(--t);
}
.form-input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-dim);
  outline:none;
}
.form-input.error{border-color:var(--text-error);box-shadow:0 0 0 3px rgba(224,92,92,0.1)}
.form-error{font-size:12px;color:var(--text-error);margin-top:5px;min-height:16px}
.password-input-wrap{position:relative}
.password-input-wrap .form-input{padding-right:46px}
.password-toggle{
  position:absolute;
  right:5px;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  color:var(--text-muted);
  border-radius:var(--radius-sm);
  transition:color var(--t),background var(--t);
}
.password-toggle:hover{color:var(--text-primary);background:var(--bg-surface2)}
.password-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.password-eye{width:18px;height:18px}
.password-eye-hide{display:none}
.password-toggle.is-visible .password-eye-show{display:none}
.password-toggle.is-visible .password-eye-hide{display:block}

.btn-primary{
  width:100%;
  background:var(--accent);
  color:#fff;
  border-radius:var(--radius-sm);
  padding:11px 0;
  font-size:14px;
  font-weight:500;
  margin-top:var(--s2);
  transition:background var(--t),box-shadow var(--t),opacity var(--t);
  letter-spacing:0.1px;
}
.btn-primary:hover:not(:disabled){background:var(--accent-hover);box-shadow:0 4px 18px rgba(139,127,240,0.3)}
.btn-primary:disabled{opacity:0.4;cursor:not-allowed}

.auth-footer{padding:16px 32px;border-top:1px solid var(--border-subtle);background:var(--bg-primary)}
.auth-features{display:flex;gap:var(--s5);flex-wrap:wrap}
.auth-feat{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted)}
.auth-feat-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.auth-feat-dot.gift{background:var(--accent-gift)}
.auth-feat-dot.live{background:var(--accent-live)}
.auth-feat-dot.accent{background:var(--accent)}

/* Auth — mobile */
@media(max-width:480px){
  #auth-screen{padding:var(--s4);justify-content:flex-start;padding-top:40px}
  .auth-card-inner{padding:24px 20px 20px}
  .auth-footer{padding:14px 20px}
  .auth-heading{font-size:19px}
  .auth-features{gap:var(--s3)}
  .auth-feat{font-size:11px}
}

/* ─────────────────────────────────────────────────
   DASHBOARD — shell layout
   ───────────────────────────────────────────────── */
#dashboard-screen{
  display:none;
  height:calc(100vh - var(--banner-h, 0px));
  overflow:hidden;
  max-width:100vw;
}
#dashboard-screen.visible{display:flex}

/* Zapobiegaj poziomemu scrollowi na całej stronie */
html,body{overflow-x:hidden;max-width:100vw}

/* Ambient glow przy statusie LIVE */
#dashboard-screen.is-live::before{
  content:'';
  position:fixed;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,transparent 0%,var(--accent-live) 40%,var(--accent-live) 60%,transparent 100%);
  z-index:200;
  animation:live-bar 3s ease-in-out infinite;
}
@keyframes live-bar{
  0%,100%{opacity:0.6}
  50%{opacity:1}
}
@media(prefers-reduced-motion:reduce){
  #dashboard-screen.is-live::before{animation:none}
}

/* ─── SIDEBAR ─────────────────────────────────────── */
.sidebar{
  width:var(--sidebar-w);
  flex-shrink:0;
  background:var(--bg-surface);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  height:calc(100vh - var(--banner-h, 0px));
  position:sticky;
  top:0;
  z-index:90;
}

.sidebar-logo{
  display:flex;
  align-items:center;
  gap:var(--s3);
  padding:0 var(--s5);
  height:var(--topbar-h);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.sidebar-logo-text{
  font-family:var(--font-heading);
  font-size:14px;
  font-weight:500;
  color:var(--text-secondary);
  white-space:nowrap;
}
.sidebar-logo-text strong{color:var(--text-primary)}

.sidebar-nav{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:var(--s3) 0;
  gap:2px;
  overflow-y:auto;
}

.nav-item{
  display:flex;
  align-items:center;
  gap:var(--s3);
  padding:9px var(--s4) 9px var(--s5);
  color:var(--text-muted);
  font-size:13px;
  font-weight:500;
  border-radius:0;
  cursor:pointer;
  position:relative;
  transition:color var(--t),background var(--t);
  user-select:none;
}
.nav-item::before{
  content:'';
  position:absolute;
  left:0;top:4px;bottom:4px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:transparent;
  transition:background var(--t);
}
.nav-item:hover{
  color:var(--text-primary);
  background:rgba(255,255,255,0.03);
}
.nav-item.active{
  color:var(--accent);
  background:var(--accent-dim);
}
.nav-item.active::before{background:var(--accent)}

.nav-icon{
  width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  opacity:0.75;
  transition:opacity var(--t);
}
.nav-item.active .nav-icon,.nav-item:hover .nav-icon{opacity:1}
.nav-label{line-height:1}

.sidebar-footer{
  padding:var(--s4) var(--s5);
  border-top:1px solid var(--border);
  flex-shrink:0;
}
.sidebar-version{font-size:11px;color:var(--text-muted);font-family:var(--font-mono)}

.logout-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:34px;
  padding:6px 11px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:transparent;
  color:var(--text-muted);
  font:inherit;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  transition:color var(--t),background var(--t),border-color var(--t);
}
.logout-btn svg{width:16px;height:16px;flex-shrink:0}
.logout-btn:hover{
  color:var(--text-primary);
  background:rgba(255,255,255,0.04);
  border-color:var(--border-strong);
}
.logout-btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ─── DASHBOARD BODY ──────────────────────────────── */
.dashboard-body{
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-width:0;
}

/* ─── TOPBAR ──────────────────────────────────────── */
.topbar{
  height:var(--topbar-h);
  background:var(--bg-surface);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 var(--s5);
  gap:var(--s3);
  flex-shrink:0;
  z-index:80;
  overflow:hidden;
  min-width:0;
}

.topbar-left{
  display:flex;align-items:center;gap:var(--s4);
  flex:1;min-width:0;overflow:hidden;
}
.topbar-right{
  display:flex;align-items:center;gap:var(--s3);
  flex-shrink:0; /* nigdy nie znika */
}

.breadcrumb{
  display:flex;
  align-items:center;
  gap:var(--s2);
  font-size:13px;
  min-width:0;
  overflow:hidden;
}
.breadcrumb-app{color:var(--text-muted);white-space:nowrap;flex-shrink:0}
.breadcrumb-sep{color:var(--text-muted);opacity:0.4;flex-shrink:0}
.breadcrumb-page{
  color:var(--text-primary);
  font-weight:500;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex-shrink:1;
}

/* Status badge */
.status-badge{
  display:inline-flex;
  align-items:center;
  gap:var(--s2);
  font-size:12px;
  font-weight:500;
  color:var(--text-muted);
  padding:5px 12px;
  border-radius:var(--radius-pill);
  background:var(--bg-primary);
  border:1px solid var(--border);
  transition:color var(--t),border-color var(--t),background var(--t),box-shadow var(--t-slow);
  user-select:none;
  white-space:nowrap;
}
.status-badge.live{
  color:var(--accent-live);
  border-color:var(--border-live);
  background:var(--accent-live-dim);
  box-shadow:0 0 14px rgba(111,207,127,0.12);
}
.status-badge.connecting{
  color:var(--accent);
  border-color:var(--border-accent);
  background:var(--accent-dim);
}

.pulse-dot{
  width:7px;height:7px;
  border-radius:50%;
  background:currentColor;
  flex-shrink:0;
}
.status-badge.live .pulse-dot{
  animation:pulse-ping 2s ease-in-out infinite;
}
@keyframes pulse-ping{
  0%  {box-shadow:0 0 0 0 rgba(111,207,127,0.6)}
  60% {box-shadow:0 0 0 5px rgba(111,207,127,0)}
  100%{box-shadow:0 0 0 0 rgba(111,207,127,0)}
}

.pulse-wave{display:none;height:14px;width:40px;flex-shrink:0}
.status-badge.live .pulse-wave{display:block}
.pulse-wave path{
  fill:none;stroke:var(--accent-live);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  animation:wave-draw 2s ease-in-out infinite;
}
@keyframes wave-draw{
  0%  {d:path("M0 8 C6 8 6 3 14 3 C22 3 22 13 30 13 C38 13 38 8 44 8")}
  50% {d:path("M0 8 C6 8 6 1 14 1 C22 1 22 15 30 15 C38 15 38 8 44 8")}
  100%{d:path("M0 8 C6 8 6 3 14 3 C22 3 22 13 30 13 C38 13 38 8 44 8")}
}

@media(prefers-reduced-motion:reduce){
  .pulse-dot{animation:none!important}
  .pulse-wave path{animation:none!important}
  .spinner,.btn-loading .spinner{animation:none!important}
  #dashboard-screen.is-live::before{animation:none!important}
  .toast,.anim-goal-fill.complete,.anim-glove.visible,
  .stat-value.bump,.subathon-live-box.extended-flash .subathon-live-time,
  .anim-subathon.extended .anim-subathon-time{
    animation:none!important;
    transition:none!important;
  }
}

.lang-switcher{display:flex;gap:2px;background:var(--bg-primary);border-radius:var(--radius-xs);padding:2px;border:1px solid var(--border)}
.lang-btn{
  font-family:var(--font-mono);
  font-size:11px;font-weight:500;
  padding:4px 8px;
  border-radius:3px;
  color:var(--text-muted);
  transition:background var(--t),color var(--t);
}
.lang-btn:hover{color:var(--text-primary)}
.lang-btn.active{background:var(--bg-surface2);color:var(--text-primary)}

/* ─── MAIN CONTENT ────────────────────────────────── */
.main-content{
  flex:1;
  overflow-y:auto;
  min-width:0;
  padding:var(--s8);
  background:var(--bg-primary);
}

/* View header */
.view-header{margin-bottom:var(--s6)}
.section-title{
  font-family:var(--font-heading);
  font-size:22px;
  font-weight:600;
  color:var(--text-primary);
  letter-spacing:-0.5px;
  line-height:1.2;
}
.section-sub{
  font-size:13px;
  color:var(--text-muted);
  margin-top:4px;
}

/* ─── PANEL (karta) ───────────────────────────────── */
.panel{
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:var(--s6);
  box-shadow:var(--shadow-sm);
  position:relative;
  overflow:hidden;
}
.panel-header{
  display:flex;
  align-items:flex-start;
  gap:var(--s4);
  margin-bottom:var(--s5);
}
.panel-icon{
  width:36px;height:36px;
  border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.panel-icon.accent{background:var(--accent-dim);color:var(--accent)}
.panel-icon.gift{background:var(--accent-gift-dim);color:var(--accent-gift)}
.panel-icon.live{background:var(--accent-live-dim);color:var(--accent-live)}
.panel-icon.muted{background:rgba(255,255,255,0.04);color:var(--text-muted)}
.panel-title{
  font-family:var(--font-heading);
  font-size:15px;font-weight:600;
  color:var(--text-primary);
  letter-spacing:-0.2px;
}
.panel-sub{font-size:12px;color:var(--text-muted);margin-top:2px}

/* ─────────────────────────────────────────────────
   EKRAN START
   ───────────────────────────────────────────────── */
.start-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,340px);
  gap:var(--s5);
  align-items:start;
  min-width:0;
}
.start-col-main,.start-col-side{
  display:flex;
  flex-direction:column;
  gap:var(--s4);
  min-width:0;
}

/* Pole połączenia */
.connect-panel{}
.connect-input-wrap{
  position:relative;
  flex:1;
  min-width:0;
}
.connect-at{
  position:absolute;
  left:12px;top:50%;transform:translateY(-50%);
  font-family:var(--font-mono);
  font-size:14px;
  color:var(--text-muted);
  pointer-events:none;
  user-select:none;
}
.connect-input{
  width:100%;
  min-width:0;
  background:var(--bg-primary);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:11px 14px 11px 28px;
  font-size:14px;
  color:var(--text-primary);
  transition:border-color var(--t),box-shadow var(--t);
}
.connect-input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-dim);
  outline:none;
}
.connect-input.error{border-color:var(--text-error)}
.connect-input:disabled{opacity:0.5;cursor:not-allowed}

.connect-row{
  display:flex;
  gap:var(--s3);
  align-items:stretch;
  min-width:0;
}

/* OBS link panel */
.obs-panel{}
.overlay-link-row{
  display:flex;
  gap:var(--s3);
  align-items:center;
  min-width:0;
}
.overlay-link-input{
  flex:1;
  min-width:0;
  background:var(--bg-primary);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:9px 12px;
  font-family:var(--font-mono)!important;
  font-size:12px;
  font-weight:400;
  color:var(--accent);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  cursor:default;
  letter-spacing:0.2px;
}

/* Mini stats panel */
.mini-stats-panel{}
.mini-stats-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:var(--s5);
}
.mini-stats-title{
  font-family:var(--font-heading);
  font-size:13px;
  font-weight:600;
  color:var(--text-secondary);
}
.mini-stats-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--s3);
  margin-bottom:var(--s4);
}
.mini-stat{
  background:var(--bg-primary);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:var(--s4) var(--s3);
  text-align:center;
  transition:border-color var(--t);
  border-top:2px solid var(--mini-color,var(--accent));
}
.mini-stat-val{
  font-family:var(--font-heading);
  font-size:26px;
  font-weight:600;
  color:var(--text-primary);
  line-height:1;
  letter-spacing:-0.5px;
  transition:color 0.3s ease;
}
.mini-stat-val.bump{color:var(--mini-color,var(--accent))}
.mini-stat-label{
  font-size:11px;
  color:var(--text-muted);
  margin-top:4px;
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.mini-stats-hint{
  font-size:12px;
  color:var(--text-muted);
  text-align:center;
  line-height:1.4;
  padding-top:var(--s3);
  border-top:1px solid var(--border-subtle);
}
.mini-stats-panel.live .mini-stats-hint{display:none}

/* Status chip */
.status-chip{
  font-size:11px;
  font-weight:500;
  padding:3px 8px;
  border-radius:var(--radius-pill);
  letter-spacing:0.3px;
  text-transform:uppercase;
}
.status-chip.live{background:var(--accent-live-dim);color:var(--accent-live);border:1px solid var(--border-live)}
.status-chip.disconnected{background:rgba(255,255,255,0.04);color:var(--text-muted);border:1px solid var(--border)}

/* Quickstart */
.quickstart-panel{}
.qs-list{list-style:none;display:flex;flex-direction:column;gap:var(--s3)}
.qs-item{
  display:flex;
  align-items:flex-start;
  gap:var(--s3);
  font-size:13px;
  color:var(--text-secondary);
  line-height:1.4;
}
.qs-num{
  width:22px;height:22px;
  border-radius:50%;
  background:var(--accent-dim);
  color:var(--accent);
  font-size:11px;
  font-weight:600;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  font-family:var(--font-heading);
}

/* ─── BANER LIVE ──────────────────────────────────── */
.live-banner{
  background:transparent;
  border-color:var(--border-live);
  box-shadow:0 0 0 1px var(--border-live),0 0 32px rgba(111,207,127,0.08);
  overflow:visible;
}
.live-banner-glow{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(111,207,127,0.06) 0%,transparent 60%);
  pointer-events:none;
  border-radius:inherit;
}
.live-banner-inner{
  display:flex;
  align-items:center;
  gap:var(--s5);
  flex-wrap:wrap;
}
.live-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--accent-live);
  color:#0D1A10;
  font-family:var(--font-heading);
  font-size:12px;
  font-weight:700;
  padding:4px 10px;
  border-radius:var(--radius-pill);
  letter-spacing:1px;
  text-transform:uppercase;
}
.live-dot{
  width:7px;height:7px;
  border-radius:50%;
  background:currentColor;
  animation:pulse-ping-live 2s ease-in-out infinite;
}
@keyframes pulse-ping-live{
  0%  {box-shadow:0 0 0 0 rgba(13,26,16,0.6)}
  60% {box-shadow:0 0 0 4px rgba(13,26,16,0)}
  100%{box-shadow:0 0 0 0 rgba(13,26,16,0)}
}
.live-username{
  font-family:var(--font-heading);
  font-size:20px;
  font-weight:600;
  color:var(--accent-live);
  letter-spacing:-0.3px;
}
.live-duration-label{
  font-size:13px;
  color:var(--text-muted);
}
.live-duration-label span{
  font-family:var(--font-mono);
  color:var(--text-secondary);
}
.live-disconnect-area{
  margin-top:var(--s4);
  display:flex;
  align-items:center;
  gap:var(--s3);
  flex-wrap:wrap;
}
.disconnect-confirm-text{font-size:13px;color:var(--text-muted)}

/* ─────────────────────────────────────────────────
   PRZYCISKI
   ───────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border-radius:var(--radius-sm);
  padding:10px 18px;
  font-size:13px;font-weight:500;
  transition:background var(--t),box-shadow var(--t),opacity var(--t),border-color var(--t);
  white-space:nowrap;
  line-height:1;
}
.btn-lg{padding:11px 20px;font-size:14px}
.btn-sm{padding:6px 12px;font-size:12px}
.btn-icon{padding:9px 14px;gap:6px}

.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover:not(:disabled){background:var(--accent-hover);box-shadow:0 4px 14px rgba(139,127,240,0.3)}

.btn-gift{background:var(--accent-gift);color:#fff}
.btn-gift:hover:not(:disabled){background:#E0507A;box-shadow:0 4px 14px rgba(240,97,139,0.35)}

.btn-danger{
  background:var(--accent-gift-dim);
  color:var(--accent-gift);
  border:1px solid rgba(240,97,139,0.2);
}
.btn-danger:hover:not(:disabled){
  background:rgba(240,97,139,0.18);
  border-color:rgba(240,97,139,0.35);
}

.btn-ghost{
  background:var(--bg-surface2);
  color:var(--text-primary);
  border:1px solid var(--border);
}
.btn-ghost:hover:not(:disabled){background:var(--bg-surface3);border-color:rgba(255,255,255,0.1)}

.btn-outline{
  background:transparent;
  color:var(--text-secondary);
  border:1px solid var(--border);
}
.btn-outline:hover:not(:disabled){
  background:var(--bg-surface2);
  border-color:var(--border-accent);
  color:var(--text-primary);
}

.btn:disabled{opacity:0.35;cursor:not-allowed}

/* Spinner */
.spinner{
  display:inline-block;
  width:14px;height:14px;
  border:2px solid rgba(255,255,255,0.2);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin 0.7s linear infinite;
  flex-shrink:0;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Komunikaty inline */
.inline-error{font-size:12px;color:var(--text-error);margin-top:6px;min-height:16px}
.inline-success{font-size:12px;color:var(--accent-live);margin-top:6px;min-height:16px}

/* ─────────────────────────────────────────────────
   WIDGETY
   ───────────────────────────────────────────────── */
.widgets-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:var(--s5);
}

.widget-card{
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:border-color var(--t),box-shadow var(--t),background var(--t-slow);
}
.widget-card:hover{
  border-color:rgba(255,255,255,0.12);
  box-shadow:0 8px 32px rgba(0,0,0,0.35);
  background:var(--bg-hover);
}

.widget-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--s4);
  padding:var(--s5);
}
.widget-card-header{
  display:flex;
  align-items:flex-start;
  gap:var(--s3);
}
.widget-icon-wrap{
  width:34px;height:34px;
  border-radius:var(--radius-sm);
  background:var(--accent-dim);
  color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.widget-name{
  font-family:var(--font-heading)!important;
  font-size:14px;font-weight:600;
  color:var(--text-primary);
  letter-spacing:-0.2px;
}
.widget-desc{font-size:12px;color:var(--text-muted);margin-top:2px;line-height:1.4}

/* Toggle */
.toggle{position:relative;width:40px;height:22px;flex-shrink:0;margin-top:2px}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle-slider{
  position:absolute;inset:0;
  background:var(--bg-primary);
  border:1px solid var(--border);
  border-radius:22px;
  cursor:pointer;
  transition:background var(--t),border-color var(--t);
}
.toggle-slider::before{
  content:'';
  position:absolute;
  left:3px;top:3px;
  width:14px;height:14px;
  border-radius:50%;
  background:var(--text-muted);
  transition:transform var(--t),background var(--t);
}
.toggle input:checked + .toggle-slider{background:var(--accent);border-color:var(--accent)}
.toggle input:checked + .toggle-slider::before{transform:translateX(18px);background:#fff}

/* Widget preview area */
.widget-preview{
  flex:1;
  background:var(--bg-primary);
  border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
  padding:var(--s5) var(--s5);
  min-height:72px;
  display:flex;
  align-items:center;
}

/* Goal bar preview */
.preview-goalbar{width:100%}
.preview-goalbar-labels{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:var(--s2);
}
.preview-goalbar-title{font-size:12px;color:var(--text-muted)}
.preview-goalbar-label{
  font-family:var(--font-mono)!important;
  font-size:12px;font-weight:500;
  color:var(--text-secondary);
}
.preview-goalbar-track{
  width:100%;height:8px;
  background:var(--bg-surface2);
  border-radius:8px;overflow:hidden;
}
.preview-goalbar-fill{
  height:100%;width:40%;
  background:linear-gradient(90deg,var(--accent) 0%,#A99CF5 100%);
  border-radius:8px;
}

/* Glove multiplier preview */
.preview-multiplier{
  display:flex;align-items:baseline;gap:4px;
}
.preview-badge-x{
  font-family:var(--font-heading);
  font-size:22px;font-weight:600;
  color:var(--accent-gift);
  opacity:0.7;
}
.preview-badge{
  font-family:var(--font-heading)!important;
  font-size:40px;font-weight:700;
  color:var(--accent-gift);
  letter-spacing:-2px;
  line-height:1;
}
.preview-multiplier-label{
  font-size:12px;color:var(--text-muted);
  margin-left:var(--s2);align-self:center;
}

/* Leaderboard / Top gift card previews */
.preview-lb{width:100%;display:flex;flex-direction:column;gap:6px}
.preview-lb-row{
  display:grid;grid-template-columns:18px 1fr auto;gap:8px;
  font-size:12px;color:var(--text-secondary);
}
.preview-lb-row span:first-child{color:var(--accent-gift);font-weight:600}
.preview-lb-row span:last-child{font-family:var(--font-mono);color:var(--text-muted)}
.preview-tg{width:100%;display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--text-secondary)}
.preview-tg-line span{color:var(--accent-gift);font-weight:600;margin-right:6px}

/* Local anim previews — leaderboard / top gift */
.anim-lb{
  position:absolute;left:16px;top:16px;width:min(92%,240px);
  background:rgba(10,10,20,0.88);border:1px solid rgba(255,255,255,0.1);
  border-radius:12px;padding:10px 12px;box-shadow:0 4px 24px rgba(0,0,0,0.45);
}
.anim-lb-header{
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,0.5);margin-bottom:8px;
}
.anim-lb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.anim-lb-item{
  display:grid;grid-template-columns:18px 1fr auto;gap:6px;align-items:center;
  padding:5px 6px;border-radius:7px;background:rgba(255,255,255,0.04);
  transition:background .3s ease;
}
.anim-lb-item.lb-bump{background:rgba(240,97,139,0.16)}
.anim-lb-rank{font-size:11px;font-weight:700;color:var(--accent-gift)}
.anim-lb-name{font-size:12px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anim-lb-val{font-size:11px;color:rgba(255,255,255,0.6)}

.anim-tg{
  position:absolute;right:16px;bottom:16px;width:min(92%,260px);
  background:rgba(10,10,20,0.88);border:1px solid rgba(255,255,255,0.1);
  border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;
  box-shadow:0 4px 24px rgba(0,0,0,0.45);
}
.anim-tg-row{
  padding:7px 8px;border-radius:8px;background:rgba(255,255,255,0.04);
  transition:box-shadow .35s ease,background .35s ease;
}
.anim-tg-row.tg-pulse{
  background:rgba(240,97,139,0.16);
  box-shadow:0 0 0 1px rgba(240,97,139,0.45),0 0 16px rgba(240,97,139,0.35);
}
.anim-tg-label{
  display:block;font-size:9px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-gift);margin-bottom:2px;
}
.anim-tg-value{font-size:13px;font-weight:600;color:#fff}

/* Subathon card preview + config */
.preview-subathon{
  width:100%;text-align:center;padding:8px 0;
}
.preview-subathon-label{
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:4px;
}
.preview-subathon-time{
  font-family:var(--font-mono);font-size:22px;font-weight:700;
  color:var(--text-primary);letter-spacing:.04em;
}

.subathon-hm-row{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
}
.subathon-live-box{
  margin-top:8px;padding:18px 20px;text-align:center;
  background:var(--bg-primary);border:1px solid var(--border);
  border-radius:var(--radius-md);
  transition:border-color .3s ease,box-shadow .3s ease,background .3s ease;
}
.subathon-live-box.inactive{opacity:.55}
.subathon-live-box.warning{
  border-color:rgba(255,77,106,.45);
  box-shadow:0 0 0 1px rgba(255,77,106,.2);
}
.subathon-live-box.warning .subathon-live-time{color:#FF4D6A}
.subathon-live-box.extended-flash{
  background:var(--accent-gift-dim);
  border-color:rgba(240,97,139,.5);
  box-shadow:0 0 0 1px rgba(240,97,139,.35);
}
.subathon-live-box.extended-flash .subathon-live-time{color:var(--accent-gift)}
.subathon-live-label{
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:6px;
}
.subathon-live-time{
  font-family:var(--font-mono);font-size:36px;font-weight:700;
  color:var(--text-primary);letter-spacing:.04em;line-height:1;
}

.anim-subathon{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  min-width:200px;padding:16px 28px;text-align:center;
  background:rgba(10,10,20,0.88);border:1px solid rgba(255,255,255,0.1);
  border-radius:14px;box-shadow:0 4px 24px rgba(0,0,0,0.45);
  transition:box-shadow .35s ease,border-color .35s ease,background .35s ease;
}
.anim-subathon-label{
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,0.5);margin-bottom:6px;
}
.anim-subathon-time{
  font-family:var(--font-mono);font-size:32px;font-weight:700;color:#fff;
  letter-spacing:.04em;line-height:1;
  transition:color .25s ease,text-shadow .35s ease;
}
.anim-subathon.extended{
  background:rgba(240,97,139,0.18);
  border-color:rgba(240,97,139,0.55);
  box-shadow:0 0 0 1px rgba(240,97,139,0.4),0 0 22px rgba(240,97,139,0.4);
}
.anim-subathon.extended .anim-subathon-time{color:var(--accent-gift)}
.anim-subathon.warning .anim-subathon-time{
  color:#FF4D6A;text-shadow:0 0 14px rgba(255,77,106,0.5);
}

.preview-rotator{
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:12px;color:var(--text-secondary);
}
.preview-rotator-slot{
  padding:6px 10px;border-radius:8px;background:var(--bg-surface2);
  border:1px solid var(--border);font-weight:600;color:var(--text-primary);
}
.preview-rotator-arrow{color:var(--accent);font-weight:700}

.preview-tts{
  width:100%;display:flex;align-items:center;gap:10px;
  font-size:12px;color:var(--text-secondary);
}
.preview-tts-wave{
  width:28px;height:18px;border-radius:4px;
  background:linear-gradient(90deg,var(--accent),transparent);
  opacity:.85;flex-shrink:0;
}

.rotator-check-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.rotator-check-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:var(--radius-md);
  border:1px solid var(--border);background:var(--bg-surface2);
  cursor:pointer;font-size:13px;color:var(--text-primary);
}
.rotator-check-row input{accent-color:var(--accent);width:16px;height:16px}

/* Widget card footer */
.widget-card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--s3) var(--s5);
}
.widget-status-chip{
  font-size:11px;font-weight:500;
  padding:3px 8px;
  border-radius:var(--radius-pill);
  letter-spacing:0.3px;
}
.widget-status-chip.active{
  background:var(--accent-live-dim);
  color:var(--accent-live);
  border:1px solid var(--border-live);
}
.widget-status-chip.inactive{
  background:rgba(255,255,255,0.03);
  color:var(--text-muted);
  border:1px solid var(--border);
}

/* ─────────────────────────────────────────────────
   WIDGET CONFIG — Goal Bar i Glove Multiplier
   ───────────────────────────────────────────────── */

/* Pasek postępu w panelu konfiguracji Goal Bar */
.goal-config-progress-bar{
  width:100%;height:12px;
  background:var(--bg-surface2);
  border-radius:8px;overflow:hidden;
  margin-bottom:6px;
}
.goal-config-progress-fill{
  height:100%;
  background:linear-gradient(90deg,var(--accent) 0%,#A99CF5 100%);
  border-radius:8px;
  transition:width 0.6s cubic-bezier(0.4,0,0.2,1);
}
.goal-config-progress-meta{
  display:flex;justify-content:space-between;
  font-size:12px;color:var(--text-muted);
}

/* Przełącznik trybu Glove */
.glove-mode-toggle{
  display:flex;
  gap:10px;
  margin-bottom:20px;
}
.glove-mode-option{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  cursor:pointer;
  transition:border-color var(--t),background var(--t);
  position:relative;
}
.glove-mode-option input[type="radio"]{
  position:absolute;opacity:0;width:0;height:0;
}
.glove-mode-option.selected{
  border-color:var(--accent);
  background:var(--accent-dim);
}
.glove-mode-option:hover:not(.selected){
  border-color:rgba(255,255,255,0.15);
  background:var(--bg-hover);
}
.glove-mode-option .mode-label{
  font-size:13px;font-weight:600;
  color:var(--text-primary);
}
.glove-mode-option .mode-desc{
  font-size:11px;
  color:var(--text-muted);
  line-height:1.4;
}

/* Podpis pod inputem */
.field-hint{
  display:block;
  font-size:11px;
  color:var(--text-muted);
  font-weight:400;
  margin-top:2px;
}

/* ─────────────────────────────────────────────────
   STATYSTYKI
   ───────────────────────────────────────────────── */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:var(--s5);
}

.stat-card{
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-top:3px solid var(--stat-color,var(--accent));
  border-radius:var(--radius);
  padding:var(--s5);
  display:flex;flex-direction:column;gap:var(--s2);
  transition:border-color var(--t),box-shadow var(--t);
}
.stat-card:hover{box-shadow:0 4px 20px rgba(0,0,0,0.3)}

.stat-card-top{
  display:flex;align-items:center;
  justify-content:space-between;
}
.stat-label{
  font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:0.6px;
  color:var(--text-muted);
}
.stat-icon{font-size:16px;opacity:0.5}

.stat-value{
  font-family:var(--font-heading);
  font-size:40px;font-weight:700;
  line-height:1;letter-spacing:-2px;
  color:var(--text-primary);
  transition:color 0.3s ease;
}
.stat-value.muted{color:var(--text-muted);font-size:32px}
.stat-value.bump{color:var(--stat-color,var(--accent))}

.sparkline-container{margin-top:var(--s2)}
.sparkline{width:100%;height:32px;display:block;overflow:visible}
.sparkline polyline{
  fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.sparkline-gift   polyline{stroke:var(--accent-gift)}
.sparkline-follow polyline{stroke:var(--accent-live)}
.sparkline-viewers polyline{stroke:var(--accent)}

/* ─────────────────────────────────────────────────
   STUB EKRANY (Alerty, Ustawienia)
   ───────────────────────────────────────────────── */
.stub-screen{
  display:flex;align-items:center;justify-content:center;
  min-height:320px;
}
.stub-inner{text-align:center;max-width:280px}
.stub-icon{font-size:36px;margin-bottom:var(--s4);opacity:0.4}
.stub-title{
  font-family:var(--font-heading);
  font-size:18px;font-weight:600;
  color:var(--text-secondary);
  letter-spacing:-0.3px;
  margin-bottom:var(--s2);
}
.stub-text{font-size:13px;color:var(--text-muted)}

/* ─────────────────────────────────────────────────
   CONFIG BACK BTN
   ───────────────────────────────────────────────── */
.config-back-btn{
  display:inline-flex;align-items:center;gap:4px;
  font-size:13px;color:var(--text-muted);
  margin-bottom:var(--s5);
  cursor:pointer;
  transition:color var(--t);
}
.config-back-btn:hover{color:var(--text-primary)}

/* ─────────────────────────────────────────────────
   TOASTY
   ───────────────────────────────────────────────── */
#toast-container{
  position:fixed;bottom:var(--s5);right:var(--s5);
  z-index:9999;
  display:flex;flex-direction:column;gap:var(--s2);
  pointer-events:none;
}
.toast{
  background:var(--bg-surface2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:10px 16px;
  font-size:13px;color:var(--text-primary);
  box-shadow:var(--shadow-md);
  animation:toast-in 0.2s ease;
  pointer-events:auto;
  max-width:300px;
}
.toast.success{border-left:3px solid var(--accent-live)}
.toast.error{border-left:3px solid var(--text-error)}
@keyframes toast-in{
  from{opacity:0;transform:translateY(8px) scale(0.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* ─────────────────────────────────────────────────
   RESPONSIVE — tablet (≤1200px)
   ───────────────────────────────────────────────── */
@media(max-width:1200px){
  :root{--sidebar-w:200px}

  .start-layout{
    grid-template-columns:minmax(0,1fr) minmax(0,260px);
    gap:var(--s4);
  }

  .main-content{
    padding:var(--s6);
  }
}

/* ─────────────────────────────────────────────────
   RESPONSIVE — tablet (≤1080px) — prawa kolumna pod główną
   ───────────────────────────────────────────────── */
@media(max-width:1080px){
  :root{--sidebar-w:180px}

  .start-layout{
    grid-template-columns:minmax(0,1fr);
  }
  .start-col-side{
    order:-1;
  }

  .stats-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .main-content{
    padding:var(--s6);
  }
}

/* ─────────────────────────────────────────────────
   RESPONSIVE — wąski tablet (≤860px)
   ───────────────────────────────────────────────── */
@media(max-width:860px){
  :root{--sidebar-w:54px}

  /* sidebar ikonowy */
  .sidebar-logo-text,
  .nav-label,
  .sidebar-footer{display:none}

  .sidebar-logo{
    justify-content:center;
    padding:0;
  }

  .nav-item{
    justify-content:center;
    padding:10px 0;
    gap:0;
  }
  .nav-item::before{
    left:0;top:4px;bottom:4px;
    width:3px;height:auto;
    right:auto;
  }
  .nav-icon{width:20px;height:20px;opacity:1}

  .start-layout{
    grid-template-columns:1fr;
  }
  .start-col-side{order:-1}

  .stats-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .widgets-grid{
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  }

  .main-content{padding:var(--s5)}

  /* topbar — ukryj breadcrumb prefix */
  .breadcrumb-app,.breadcrumb-sep{display:none}

  .status-badge{
    font-size:11px;
    padding:4px 10px;
  }
}

/* ─────────────────────────────────────────────────
   RESPONSIVE — mobile (≤600px)
   ───────────────────────────────────────────────── */
@media(max-width:600px){
  :root{--sidebar-w:0px}

  /* sidebar → bottom navigation bar */
  .sidebar{
    position:fixed;
    top:auto;bottom:0;left:0;right:0;
    width:100%;height:58px;
    flex-direction:row;
    border-right:none;
    border-top:1px solid var(--border);
    z-index:200;
  }
  .sidebar-logo,.sidebar-footer{display:none}
  .sidebar-nav{
    flex-direction:row;
    padding:0;gap:0;
    align-items:stretch;
    justify-content:stretch;
    flex:1;
    overflow:visible;
  }
  .nav-item{
    flex:1;flex-direction:column;gap:2px;
    padding:6px 2px 4px;
    border-radius:0;
    justify-content:center;
    align-items:center;
  }
  .nav-item::before{
    inset:auto;
    top:0;left:8px;right:8px;bottom:auto;
    height:2px;width:auto;
    border-radius:0 0 2px 2px;
  }
  .nav-label{
    font-size:10px;
    text-align:center;
    line-height:1;
    display:block;
  }
  .nav-icon{width:18px;height:18px;opacity:1}
  .logout-btn{width:34px;padding:6px}
  .logout-btn span{display:none}

  /* Layout */
  #dashboard-screen{
    flex-direction:column;
  }
  .dashboard-body{
    flex:1;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    min-height:0;
  }
  .main-content{
    flex:1;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:var(--s4);
    padding-bottom:74px; /* wyższy od bottom nav */
  }

  /* Topbar mobile */
  .topbar{
    padding:0 var(--s3);
    gap:var(--s2);
    height:50px;
  }
  .breadcrumb-app,.breadcrumb-sep{display:none}
  .breadcrumb-page{font-size:13px}

  /* Status badge — skróć na mobile */
  .status-badge .pulse-wave{display:none}
  .status-badge{
    font-size:11px;
    padding:4px 8px;
  }
  /* Lang switcher — schowaj etykiety, pokaż ikonowo */
  .lang-btn{padding:4px 6px;font-size:10px}

  /* Connect row — input + btn w kolumnie na bardzo wąskim */
  .connect-row{
    flex-wrap:wrap;
  }
  .connect-input-wrap{
    min-width:0;
    flex:1 1 180px;
  }
  .connect-row .btn{
    flex-shrink:0;
  }

  /* Overlay link — skróć */
  .overlay-link-input{font-size:11px}

  /* Start — mniejszy gap */
  .start-layout{
    gap:var(--s3);
  }
  .start-col-main,.start-col-side{gap:var(--s3)}

  /* Mini stats — 3 kolumny nawet na mobile */
  .mini-stats-grid{grid-template-columns:repeat(3,1fr)}
  .mini-stat-val{font-size:22px}
  .mini-stat{padding:var(--s3) var(--s2)}

  /* Stats grid — 2 kolumny */
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat-value{font-size:32px;letter-spacing:-1px}

  /* Widgety — 1 kolumna */
  .widgets-grid{grid-template-columns:1fr}

  /* Tytuły */
  .section-title{font-size:17px}
  .live-username{font-size:15px}

  /* Panel padding */
  .panel{padding:var(--s4)}
  .panel-header{margin-bottom:var(--s4)}

  /* Stub centring */
  .stub-screen{min-height:200px}

  /* Toast */
  #toast-container{
    left:var(--s4);right:var(--s4);
    bottom:70px; /* nad bottom nav */
  }
  .toast{max-width:100%}
}

/* ─────────────────────────────────────────────────
   RESPONSIVE — bardzo małe (≤380px)
   ───────────────────────────────────────────────── */
@media(max-width:380px){
  .mini-stats-grid{grid-template-columns:repeat(3,1fr);gap:var(--s2)}
  .mini-stat-val{font-size:19px}
  .mini-stat-label{font-size:10px;letter-spacing:0}

  .stats-grid{grid-template-columns:1fr}
  .stat-value{font-size:36px}

  .nav-label{font-size:9px}
  .nav-icon{width:16px;height:16px}
}

/* ─────────────────────────────────────────────────
   HISTORIA SESJI (ekran Statystyki)
   ───────────────────────────────────────────────── */
.history-panel{margin-top:var(--s6)}
.history-loading{display:flex;justify-content:center;padding:var(--s8) 0}
.history-empty{
  color:var(--text-muted);font-size:13px;
  padding:var(--s6) 0;text-align:center;
}
.history-table-wrap{overflow-x:auto}
.history-table{
  width:100%;border-collapse:collapse;font-size:13px;
}
.history-table th{
  text-align:left;color:var(--text-muted);font-weight:500;
  font-size:11px;text-transform:uppercase;letter-spacing:.5px;
  padding:var(--s2) var(--s3);border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.history-table td{
  padding:var(--s3);color:var(--text-secondary);
  border-bottom:1px solid var(--border-subtle);white-space:nowrap;
}
.history-table tbody tr:last-child td{border-bottom:none}
.history-table tbody tr:hover td{background:var(--bg-hover)}

/* ─────────────────────────────────────────────────
   ALERTY I DŹWIĘK
   ───────────────────────────────────────────────── */
.alerts-section{margin-bottom:var(--s5)}
.alert-rows{display:flex;flex-direction:column;gap:var(--s2)}
.alert-row{
  background:var(--bg-surface2);border:1px solid var(--border-subtle);
  border-radius:10px;padding:var(--s3) var(--s4);
  transition:opacity .15s ease;
}
.alert-row.disabled{opacity:.55}
.alert-row-main{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);flex-wrap:wrap;
}
.alert-row-info{min-width:120px}
.alert-row-title{font-size:14px;font-weight:600;color:var(--text-primary)}
.alert-row-sub{font-size:12px;color:var(--text-muted);margin-top:2px}
.alert-row-controls{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
}
.alert-sound-btn span{
  max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.alert-threshold{display:flex;align-items:center;gap:var(--s2)}
.alert-threshold .form-label{margin:0;font-size:12px}
.alert-threshold-input{width:90px;padding:6px 10px;font-size:13px}

/* Panel wyboru dźwięku (inline, bez modali) */
.sound-picker{
  margin-top:var(--s3);padding-top:var(--s3);
  border-top:1px solid var(--border-subtle);
  display:flex;flex-direction:column;gap:var(--s2);
}
.sound-picker-group-label{
  font-size:11px;color:var(--text-muted);text-transform:uppercase;
  letter-spacing:.5px;margin-top:var(--s1);
}
.sound-picker-group{display:flex;gap:var(--s2);flex-wrap:wrap}
.sound-picker-group.vertical{flex-direction:column}
.sound-option{
  background:var(--bg-surface3);border:1px solid var(--border);
  color:var(--text-secondary);border-radius:8px;
  padding:7px 14px;font-size:13px;cursor:pointer;
  transition:all .12s ease;font-family:inherit;text-align:left;
}
.sound-option:hover{border-color:var(--border-accent);color:var(--text-primary)}
.sound-option.active{
  background:var(--accent-dim);border-color:var(--border-accent);
  color:var(--accent);
}
.sound-option-row{display:flex;align-items:center;gap:var(--s2)}
.sound-option-row .sound-option{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sound-delete{color:var(--text-muted)}
.sound-delete:hover{color:var(--text-error)}
.sound-upload{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  margin-top:var(--s2);
}
.sound-upload-btn{cursor:pointer}
.sound-upload-hint{font-size:12px;color:var(--text-muted)}

/* ─────────────────────────────────────────────────
   USTAWIENIA KONTA
   ───────────────────────────────────────────────── */
.account-layout{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--s5);max-width:900px;
}
.account-panel .form-group{margin-bottom:var(--s4)}
.plan-chip{
  display:inline-block;padding:5px 14px;border-radius:20px;
  font-size:12px;font-weight:600;letter-spacing:.4px;
}
.plan-chip.free{
  background:var(--bg-surface3);color:var(--text-secondary);
  border:1px solid var(--border);
}
.plan-chip.premium{
  background:var(--accent-dim);color:var(--accent);
  border:1px solid var(--border-accent);
}
.lang-select-row{display:flex;gap:var(--s2)}
.lang-select-btn{
  flex:1;background:var(--bg-surface2);border:1px solid var(--border);
  color:var(--text-secondary);border-radius:8px;
  padding:9px 0;font-size:13px;cursor:pointer;
  transition:all .12s ease;font-family:inherit;
}
.lang-select-btn:hover{border-color:var(--border-accent);color:var(--text-primary)}
.lang-select-btn.active{
  background:var(--accent-dim);border-color:var(--border-accent);
  color:var(--accent);font-weight:600;
}
.form-hint{font-size:12px;color:var(--text-muted);margin-top:var(--s2)}

/* ─────────────────────────────────────────────────
   PODGLĄD NA ŻYWO (iframe OBS)
   ───────────────────────────────────────────────── */
.live-preview-panel{padding:var(--s5)}
.live-preview-stage{margin-top:var(--s4)}
.live-preview-bezel{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:6px;
  overflow:hidden;
  border:3px solid #1a1b24;
  box-shadow:
    0 0 0 1px #0a0a0e,
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 8px 32px rgba(0,0,0,0.55);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.03) 25%, transparent 25%),
    linear-gradient(225deg, rgba(255,255,255,0.03) 25%, transparent 25%),
    linear-gradient(45deg, rgba(255,255,255,0.03) 25%, transparent 25%),
    linear-gradient(315deg, rgba(255,255,255,0.03) 25%, transparent 25%),
    #0a0a12;
  background-size:24px 24px;
  background-position:0 0, 0 12px, 12px -12px, -12px 0;
}
.live-preview-iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;background:transparent;
}
.live-preview-empty{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:var(--s5);text-align:center;
  color:var(--text-muted);font-size:13px;
}

/* ─────────────────────────────────────────────────
   LIVE PREVIEW STUDIO — produkcyjny renderer OBS
   ───────────────────────────────────────────────── */
.preview-studio{
  margin-bottom:var(--s6);
  overflow:hidden;
  border-color:rgba(139,127,240,.26);
  box-shadow:0 18px 60px rgba(0,0,0,.22);
}
.preview-studio-header{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s5);
  padding:20px 22px 18px;border-bottom:1px solid var(--border-subtle);
}
.preview-studio-header h2{
  margin:5px 0 4px;font-family:var(--font-heading);font-size:19px;
  letter-spacing:-.35px;color:var(--text-primary);
}
.preview-studio-header p{margin:0;max-width:720px;font-size:12px;line-height:1.55;color:var(--text-muted)}
.preview-studio-eyebrow{
  display:flex;align-items:center;gap:7px;font-size:10px;font-weight:750;
  letter-spacing:.14em;color:var(--accent);text-transform:uppercase;
}
.preview-live-dot,.preview-studio-status span,.widget-live-badge i{
  width:7px;height:7px;border-radius:50%;background:#39d98a;
  box-shadow:0 0 0 4px rgba(57,217,138,.1),0 0 14px rgba(57,217,138,.48);
}
.preview-live-dot{animation:preview-live-pulse 1.8s ease-in-out infinite}
@keyframes preview-live-pulse{50%{opacity:.45;transform:scale(.85)}}
.preview-studio-status{
  flex:none;display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:999px;
  border:1px solid rgba(57,217,138,.18);background:rgba(57,217,138,.07);
  color:#6de8ad;font-size:10px;font-weight:650;letter-spacing:.04em;
}
.preview-studio-toolbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 18px;
  background:var(--bg-surface2);border-bottom:1px solid var(--border-subtle);
}
.preview-control-group{display:flex;align-items:center;gap:6px}
.preview-control-group>span{
  margin-right:2px;font-size:10px;font-weight:650;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted);
}
.preview-chip,.preview-widget-tab,.preview-event-btn{
  border:1px solid var(--border);background:var(--bg-primary);color:var(--text-secondary);
  border-radius:8px;padding:7px 10px;font:600 11px var(--font);
  cursor:pointer;transition:border-color .14s,background .14s,color .14s,transform .14s;
}
.preview-chip:hover,.preview-widget-tab:hover,.preview-event-btn:hover{
  border-color:var(--border-accent);color:var(--text-primary);transform:translateY(-1px);
}
.preview-chip.active,.preview-widget-tab.active{
  background:var(--accent-dim);border-color:var(--border-accent);color:var(--accent);
}
.preview-select{width:auto;min-width:142px;padding:7px 30px 7px 10px;font-size:11px}
.preview-switch{display:flex;align-items:center;gap:7px;color:var(--text-secondary);font-size:11px;cursor:pointer}
.preview-switch input{accent-color:var(--accent)}
.preview-studio-workspace{
  min-height:390px;padding:24px;display:grid;place-items:center;overflow:auto;
  transition:background .2s;
}
.preview-studio-workspace.bg-checker{
  background-color:#12131a;
  background-image:linear-gradient(45deg,#1b1d27 25%,transparent 25%),linear-gradient(-45deg,#1b1d27 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1b1d27 75%),linear-gradient(-45deg,transparent 75%,#1b1d27 75%);
  background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;
}
.preview-studio-workspace.bg-dark{background:radial-gradient(circle at 50% 20%,#202234,#08090d 72%)}
.preview-studio-workspace.bg-green{background:#00b140}
.preview-stage{
  position:relative;overflow:hidden;width:min(100%,820px);border-radius:7px;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 22px 70px rgba(0,0,0,.52);
  background:transparent;transition:width .25s,aspect-ratio .25s;
}
.preview-stage.aspect-16-9{aspect-ratio:16/9}
.preview-stage.aspect-9-16{aspect-ratio:9/16;width:min(46%,360px)}
.preview-stage.aspect-1-1{aspect-ratio:1/1;width:min(68%,560px)}
.preview-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent}
.preview-safe-area{
  position:absolute;inset:7%;z-index:4;border:1px dashed rgba(255,255,255,.38);
  border-radius:3px;pointer-events:none;
}
.preview-safe-area span{
  position:absolute;top:-17px;right:0;font-size:8px;letter-spacing:.12em;
  color:rgba(255,255,255,.55);
}
.preview-resolution{
  position:absolute;right:8px;bottom:7px;z-index:5;padding:3px 6px;border-radius:4px;
  background:rgba(0,0,0,.58);color:rgba(255,255,255,.62);font:500 8px var(--font-mono);
  pointer-events:none;
}
.preview-studio-controls{padding:14px 18px 18px;background:var(--bg-surface)}
.preview-widget-tabs,.preview-event-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.preview-event-row{margin-top:12px;padding-top:12px;border-top:1px solid var(--border-subtle)}
.preview-event-row>span{
  margin-right:3px;font-size:10px;font-weight:700;letter-spacing:.1em;
  color:var(--text-muted);text-transform:uppercase;
}
.preview-event-btn.gift{color:#ffc15c;border-color:rgba(255,193,92,.28);background:rgba(255,193,92,.06)}
.preview-studio.compact .preview-studio-workspace{min-height:310px}
.preview-studio.compact .preview-stage{width:min(100%,680px)}

.widget-preview{padding:0;overflow:hidden;min-height:150px}
.widget-live-preview{position:relative;width:100%;height:150px;background:#101118;overflow:hidden}
.widget-live-preview iframe{
  position:absolute;inset:0;width:200%;height:200%;border:0;background:transparent;
  transform:scale(.5);transform-origin:top left;pointer-events:none;
}
.widget-live-badge{
  position:absolute;top:9px;right:9px;display:flex;align-items:center;gap:6px;
  padding:5px 7px;border-radius:999px;background:rgba(7,8,12,.78);
  border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.72);
  font-size:8px;font-weight:750;letter-spacing:.08em;
}
.widget-live-badge i{width:5px;height:5px;box-shadow:0 0 8px rgba(57,217,138,.5)}

@media (max-width:760px){
  .preview-studio-header{flex-direction:column}
  .preview-studio-status{align-self:flex-start}
  .preview-studio-workspace{min-height:260px;padding:14px}
  .preview-stage.aspect-9-16{width:min(72%,320px)}
  .preview-stage.aspect-1-1{width:90%}
  .preview-control-group:first-child{width:100%}
  .preview-studio-toolbar{gap:10px}
}

/* ─────────────────────────────────────────────────
   SYMULATOR EVENTÓW (inline w podglądzie)
   ───────────────────────────────────────────────── */
.simulator-inline{
  margin-top:var(--s5);
  padding-top:var(--s4);
  border-top:1px solid var(--border-subtle);
  display:flex;flex-direction:column;gap:var(--s3);
}
.sim-inline-header{display:flex;flex-direction:column;gap:4px}
.sim-inline-title{
  font-size:13px;font-weight:600;color:var(--text-primary);
  letter-spacing:.2px;
}
.sim-hint{font-size:12px;color:var(--text-muted);line-height:1.5}

.sim-type-row{display:flex;gap:var(--s2);flex-wrap:wrap}
.sim-type-btn{
  flex:1;min-width:80px;padding:7px 10px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--bg-surface2);
  color:var(--text-secondary);font-size:12px;font-weight:500;
  cursor:pointer;transition:all var(--t);font-family:inherit;
  text-align:center;white-space:nowrap;
}
.sim-type-btn:hover{border-color:var(--border-accent);color:var(--text-primary)}
.sim-type-btn.active{
  background:var(--accent-dim);border-color:var(--border-accent);
  color:var(--accent);font-weight:600;
}
.sim-type-btn.sim-type-gift.active{
  background:var(--accent-gift-dim);
  border-color:rgba(240,97,139,0.35);
  color:var(--accent-gift);
}

.sim-gift-row{display:flex;align-items:center;gap:var(--s2)}
.sim-gift-select{
  flex:1;padding:8px 10px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--bg-surface2);
  color:var(--text-primary);font-size:13px;font-family:inherit;
  cursor:pointer;outline:none;
}
.sim-gift-select:focus{border-color:var(--border-accent)}

.sim-send-row{
  display:flex;align-items:flex-end;gap:var(--s3);flex-wrap:wrap;
  margin-top:var(--s1);
}
.sim-count-wrap{display:flex;flex-direction:column;gap:4px}
.sim-count-label{font-size:11px;color:var(--text-muted);font-weight:500}
.sim-count-input{
  width:72px;padding:8px 10px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--bg-surface2);
  color:var(--text-primary);font-size:13px;font-family:inherit;
  outline:none;
}
.sim-count-input:focus{border-color:var(--border-accent)}
.sim-send-btn{align-self:flex-end;min-width:90px}
.sim-goal-note{
  margin:0;
  font-size:11px;
  line-height:1.45;
  color:var(--text-muted);
}

/* ─────────────────────────────────────────────────
   PODGLĄD ANIMACJI WIDGETÓW (lokalny, bez backendu)
   ───────────────────────────────────────────────── */
.widget-anim-preview{
  max-width:540px;margin-bottom:16px;
}
.widget-anim-preview .panel-section-label{margin-bottom:var(--s2)}
.widget-anim-hint{
  font-size:12px;color:var(--text-muted);margin-bottom:var(--s4);line-height:1.45;
}
.widget-anim-stage{
  position:relative;
  min-height:140px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  overflow:hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.03) 25%, transparent 25%),
    linear-gradient(225deg, rgba(255,255,255,0.03) 25%, transparent 25%),
    linear-gradient(45deg, rgba(255,255,255,0.03) 25%, transparent 25%),
    linear-gradient(315deg, rgba(255,255,255,0.03) 25%, transparent 25%),
    #0a0a12;
  background-size:20px 20px;
  background-position:0 0, 0 10px, 10px -10px, -10px 0;
  margin-bottom:var(--s4);
}

/* Goal Bar — styl zbliżony do overlaya */
.anim-goal-bar{
  position:absolute;left:50%;bottom:18px;
  transform:translateX(-50%);
  width:min(92%, 420px);
  background:rgba(10,10,20,0.82);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  padding:12px 16px 14px;
  box-shadow:0 4px 24px rgba(0,0,0,0.45);
}
.anim-goal-labels{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:8px;
}
.anim-goal-label{font-size:13px;font-weight:600;color:#fff}
.anim-goal-values{font-size:12px;font-weight:500;color:rgba(255,255,255,0.55)}
.anim-goal-track{
  width:100%;height:10px;
  background:rgba(255,255,255,0.10);
  border-radius:6px;overflow:hidden;
}
.anim-goal-fill{
  height:100%;width:0%;
  border-radius:6px;
  background:linear-gradient(90deg,#fe2c55 0%,#ff6b35 100%);
  box-shadow:0 0 12px rgba(254,44,85,0.55);
  transition:width 0.55s cubic-bezier(0.4,0,0.2,1);
}
.anim-goal-fill.complete{
  background:linear-gradient(90deg,#00c896 0%,#00e6a0 100%);
  box-shadow:0 0 18px rgba(0,200,150,0.65);
  animation:anim-pulse-goal 1s ease-in-out infinite alternate;
}
@keyframes anim-pulse-goal{
  from{box-shadow:0 0 10px rgba(0,200,150,0.45)}
  to{box-shadow:0 0 24px rgba(0,200,150,0.85)}
}

/* Glove — styl zbliżony do overlaya */
.anim-glove{
  position:absolute;top:16px;right:20px;
  width:140px;text-align:center;
  opacity:0;pointer-events:none;
  transform:scale(0.6) translateY(-12px);
  transition:opacity 0.25s ease;
}
.anim-glove.visible{
  opacity:1;pointer-events:auto;
  animation:anim-glove-appear 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes anim-glove-appear{
  from{transform:scale(0.6) translateY(-16px);opacity:0}
  to{transform:scale(1) translateY(0);opacity:1}
}
.anim-glove-inner{
  background:rgba(10,10,20,0.88);
  border:1px solid rgba(254,44,85,0.40);
  border-radius:16px;
  padding:14px 10px 12px;
  box-shadow:0 4px 28px rgba(254,44,85,0.22);
}
.anim-glove-icon{font-size:34px;line-height:1;margin-bottom:4px}
.anim-glove-title{
  font-size:9px;font-weight:700;color:#fe2c55;
  letter-spacing:0.14em;text-transform:uppercase;margin-bottom:2px;
}
.anim-glove-mult{
  font-size:32px;font-weight:800;color:#fff;line-height:1;
  text-shadow:0 2px 12px rgba(254,44,85,0.55);margin-bottom:8px;
}
.anim-glove-timer{
  font-size:24px;font-weight:700;color:#fe2c55;
  font-variant-numeric:tabular-nums;line-height:1;
}
.anim-glove-timer.urgent{color:#ff6b35}
.anim-glove-sec{font-size:10px;color:rgba(255,255,255,0.45);margin-top:2px}

/* ─────────────────────────────────────────────────
   PANEL ADMINA
   ───────────────────────────────────────────────── */
.admin-metrics{margin-bottom:var(--s6)}
.admin-users-panel{padding:var(--s5)}
.admin-toolbar{margin-bottom:var(--s4)}
.admin-search{max-width:320px;width:100%}
.admin-users-table .admin-email-cell{
  max-width:240px;overflow:hidden;text-overflow:ellipsis;
  color:var(--text-primary);font-weight:500;
}
.admin-plan-select{
  background:var(--bg-surface2);border:1px solid var(--border);
  color:var(--text-primary);border-radius:var(--radius-sm);
  padding:6px 10px;font-size:12px;font-family:inherit;cursor:pointer;
  outline:none;
}
.admin-plan-select:focus{border-color:var(--border-accent)}
.admin-role-chip{
  font-size:11px;font-weight:500;color:var(--text-muted);
  background:var(--bg-surface2);border:1px solid var(--border-subtle);
  border-radius:999px;padding:2px 8px;
}
.admin-live-muted{color:var(--text-muted);font-size:12px}
.admin-flags-toggle{
  display:inline-flex;align-items:center;gap:6px;
}
.admin-flags-toggle svg{transition:transform var(--t);color:var(--text-muted)}
.admin-flags-toggle svg.open{transform:rotate(180deg)}
.admin-flags-row{display:none}
.admin-flags-row.open{display:table-row}
.admin-flags-row td{
  background:var(--bg-primary);
  border-bottom:1px solid var(--border);
  padding:var(--s3) var(--s4) var(--s4);
  white-space:normal;
}
.admin-flags-inner{
  display:flex;flex-direction:column;gap:var(--s3);
  max-width:420px;
}
.admin-flags-title{
  font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.5px;color:var(--text-muted);
}
.admin-flag-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);padding:8px 10px;
  background:var(--bg-surface2);border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
}
.admin-flag-label{font-size:13px;color:var(--text-secondary)}
.admin-flags-loading{display:flex;padding:var(--s3) 0}
.admin-flags-empty{font-size:12px;color:var(--text-muted)}
.admin-user-row.expanded td{background:var(--bg-hover)}

.custom-anim-library{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.custom-anim-lib-item{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:10px 12px;background:var(--bg-surface2);
  border:1px solid var(--border-subtle);border-radius:var(--radius-sm);
}
.custom-anim-lib-item.selected{border-color:var(--border-accent)}
.custom-anim-lib-name{flex:1;min-width:120px;font-size:13px;color:var(--text-primary)}
.custom-anim-lib-meta{font-size:11px;font-family:var(--font-mono);color:var(--text-muted)}
.glove-anim-custom-slot{min-height:120px;display:flex;align-items:center;justify-content:center;background:transparent}
.glove-anim-custom-slot.hidden{display:none!important}
.custom-anim-file-preview{border:1px dashed var(--border);border-radius:var(--radius-sm);padding:8px}

/* ─────────────────────────────────────────────────
   ACTIONS & EVENTS — automatyzacje produkcyjne
   ───────────────────────────────────────────────── */
.automation-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s6)}
.eyebrow{
  color:var(--accent);font-size:10px;font-weight:600;letter-spacing:1.4px;
  margin-bottom:6px
}
.automation-health{
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-pill);
  background:var(--bg-surface);color:var(--text-secondary);font-size:12px
}
.automation-health .status-dot{width:7px;height:7px;border-radius:50%;background:var(--text-muted)}
.automation-health .status-dot.live{
  background:var(--accent-live);box-shadow:0 0 0 4px var(--accent-live-dim)
}
.automation-loading{
  min-height:240px;display:flex;align-items:center;justify-content:center;gap:10px;
  color:var(--text-muted)
}
.automation-metrics{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);
  margin-bottom:var(--s5)
}
.automation-metrics>div{
  display:flex;align-items:center;justify-content:space-between;
  min-height:74px;padding:var(--s4) var(--s5);background:
  linear-gradient(135deg,rgba(139,127,240,.07),transparent 55%),var(--bg-surface);
  border:1px solid var(--border);border-radius:var(--radius)
}
.automation-metrics span{color:var(--text-muted);font-size:12px}
.automation-metrics strong{font:600 26px/1 var(--font-heading);color:var(--text-primary)}
.automation-builder-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.automation-panel{
  padding:var(--s5);background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:0 12px 40px rgba(0,0,0,.14)
}
.automation-panel-heading{display:flex;align-items:flex-start;gap:var(--s3);margin-bottom:var(--s5)}
.automation-panel-heading h2{font:600 16px/1.3 var(--font-heading);letter-spacing:-.2px}
.automation-panel-heading p{font-size:12px;color:var(--text-muted);margin-top:3px}
.automation-activity-list{display:grid;gap:10px}
.automation-activity-row{display:grid;grid-template-columns:auto minmax(180px,1fr) auto auto;align-items:center;gap:14px;padding:12px 14px;border:1px solid rgba(190,211,238,.1);border-radius:10px;background:rgba(7,10,16,.3)}
.automation-activity-row>div{display:grid;gap:3px;min-width:0}
.automation-activity-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.automation-activity-row span{font-size:11px;color:var(--text-muted)}
.automation-run-status{padding:5px 8px;border-radius:999px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.automation-run-status.running{color:#b9adff;background:rgba(154,140,255,.13)}
.automation-run-status.succeeded{color:#67e3af;background:rgba(69,217,160,.13)}
.automation-run-status.partial{color:#ffd37a;background:rgba(255,190,70,.13)}
.automation-run-status.failed{color:#ff8eaa;background:rgba(255,107,151,.13)}
.automation-run-metrics{display:flex!important;grid-auto-flow:column;gap:10px!important}
.automation-activity-row code{max-width:180px;overflow:hidden;text-overflow:ellipsis;color:#ff9db4;font-size:11px}
@media (max-width:760px){.automation-activity-row{grid-template-columns:auto 1fr}.automation-run-metrics,.automation-activity-row code{grid-column:2}.automation-activity-row code{max-width:100%}}
.automation-step{
  display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:8px;
  color:var(--accent);background:var(--accent-dim);border:1px solid var(--border-accent);
  font:600 12px/1 var(--font-heading)
}
.automation-form{display:flex;flex-direction:column;gap:var(--s3);padding-bottom:var(--s5)}
.automation-form label,.automation-rule-form label{
  display:flex;flex-direction:column;gap:6px;color:var(--text-secondary);font-size:11px;font-weight:500
}
.automation-condition-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.automation-textarea{min-height:72px;resize:vertical;line-height:1.45}
.automation-list{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--border);padding-top:var(--s4)}
.automation-item{
  display:flex;align-items:center;gap:10px;padding:10px;
  border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--bg-primary)
}
.automation-item-icon{
  display:grid;place-items:center;flex:0 0 32px;height:32px;border-radius:9px
}
.automation-item-icon.action{background:var(--accent-dim);color:var(--accent)}
.automation-item-icon.event{background:var(--accent-gift-dim);color:var(--accent-gift)}
.automation-item-icon .pulse-dot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 5px rgba(240,97,139,.08)}
.automation-item-copy{display:flex;flex-direction:column;min-width:0;flex:1}
.automation-item-copy strong{font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.automation-item-copy span{font-size:10px;color:var(--text-muted)}
.automation-icon-btn{
  display:grid;place-items:center;width:28px;height:28px;border-radius:7px;
  color:var(--text-muted);background:transparent;transition:var(--t)
}
.automation-icon-btn:hover{background:rgba(224,92,92,.1);color:var(--text-error)}
.toggle.compact{transform:scale(.8);transform-origin:center}
.automation-empty{
  padding:24px 16px;border:1px dashed var(--border);border-radius:var(--radius-sm);
  color:var(--text-muted);font-size:12px;text-align:center
}
.automation-empty.large{padding:38px 20px}
.automation-rules-panel{margin-top:var(--s4)}
.automation-rule-form{
  display:grid;grid-template-columns:minmax(160px,1fr) minmax(300px,2fr) 130px 130px auto;
  align-items:end;gap:var(--s3);padding-bottom:var(--s5)
}
.automation-sequence-builder{display:flex;flex-direction:column;gap:8px}
.automation-sequence-step{padding:10px;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--bg-primary)}
.automation-sequence-step-head,.automation-sequence-action{display:flex;align-items:center;justify-content:space-between;gap:8px}
.automation-sequence-step-head{margin-bottom:8px;font-size:11px}
.automation-sequence-controls{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:8px}
.automation-sequence-actions{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.automation-sequence-action>select{flex:1;min-width:0}
.automation-sequence-action>[data-weight-label]{flex:0 0 90px}
.sequence-add-action{margin-top:8px}
.automation-arrow{color:var(--text-muted);font-family:var(--font-heading)}
.automation-arrow.big{padding-bottom:11px}
.automation-rules-list{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--border);padding-top:var(--s4)}
.automation-rule{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:12px 14px;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);
  background:linear-gradient(90deg,rgba(240,97,139,.04),rgba(139,127,240,.05))
}
.automation-rule-flow{display:flex;align-items:center;gap:10px;min-width:0}
.automation-node{
  max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:5px 9px;border-radius:6px;font-size:11px
}
.automation-node.event{color:var(--accent-gift);background:var(--accent-gift-dim)}
.automation-node.action{color:var(--accent);background:var(--accent-dim)}
.automation-rule-meta{display:flex;align-items:center;gap:14px;color:var(--text-muted);font-size:10px}
.automation-text-btn{color:var(--text-error);font-size:11px}
.inline-alert.error{
  margin-bottom:var(--s4);padding:10px 12px;border:1px solid rgba(224,92,92,.25);
  border-radius:var(--radius-sm);background:rgba(224,92,92,.08);color:#f08a8a;font-size:12px
}

@media(max-width:1050px){
  .automation-builder-grid{grid-template-columns:1fr}
  .automation-rule-form{grid-template-columns:1fr 1fr}
  .automation-sequence-builder{grid-column:1/3}
}

@media(max-width:640px){
  .alert-row-main{flex-direction:column;align-items:stretch}
  .alert-row-controls{justify-content:space-between}
  .account-layout{grid-template-columns:1fr}
  .sim-type-row{flex-wrap:wrap}
  .sim-type-btn{min-width:calc(50% - var(--s1))}
  .automation-header{flex-direction:column}
  .automation-metrics{grid-template-columns:1fr}
  .automation-metrics>div{min-height:58px}
  .automation-condition-grid{grid-template-columns:1fr}
  .automation-rule-form{display:flex;flex-direction:column;align-items:stretch}
  .automation-sequence-controls{grid-template-columns:1fr}
  .automation-arrow.big{align-self:center;padding:0;transform:rotate(90deg)}
  .automation-rule{align-items:flex-start;flex-direction:column}
  .automation-rule-meta{width:100%;justify-content:space-between;flex-wrap:wrap}
}

/* =====================================================
   PRODUCT POLISH — Mission Control 2.0
   Wspólna warstwa premium dla całego dashboardu
   ===================================================== */

:root {
  --bg-base: #070A10;
  --bg-primary: #0B1018;
  --bg-surface: #111925;
  --bg-surface2: #172131;
  --bg-surface3: #1D2A3C;
  --bg-hover: #1A283A;

  --accent: #9A8CFF;
  --accent-dim: rgba(154,140,255,0.13);
  --accent-glow: rgba(154,140,255,0.25);
  --accent-hover: #B0A5FF;
  --accent-gift: #FF6B97;
  --accent-gift-dim: rgba(255,107,151,0.13);
  --accent-live: #45D9A0;
  --accent-live-dim: rgba(69,217,160,0.12);
  --accent-cyan: #54C8E8;
  --accent-cyan-dim: rgba(84,200,232,0.12);

  --text-primary: #F3F6FB;
  --text-secondary: #B7C2D3;
  --text-muted: #77859A;
  --text-error: #FF7777;

  --border: rgba(190,211,238,0.11);
  --border-subtle: rgba(190,211,238,0.065);
  --border-accent: rgba(154,140,255,0.42);
  --border-live: rgba(69,217,160,0.38);

  --radius: 14px;
  --radius-sm: 9px;
  --radius-md: 11px;
  --sidebar-w: 248px;
  --topbar-h: 64px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.22);
  --shadow-md: 0 12px 32px rgba(0,0,0,0.28);
  --shadow-lg: 0 24px 70px rgba(0,0,0,0.44);
}

body {
  background:
    radial-gradient(900px 520px at 78% -12%, rgba(112,92,255,0.11), transparent 68%),
    radial-gradient(720px 480px at 8% 110%, rgba(35,161,194,0.07), transparent 70%),
    var(--bg-base);
}

#dashboard-screen {
  background: var(--bg-primary);
}

#dashboard-screen.is-live::before {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-live) 34%, var(--accent-cyan) 66%, transparent);
  box-shadow: 0 0 20px rgba(69,217,160,0.5);
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(23,33,49,0.98) 0%, rgba(12,18,28,0.98) 100%);
  border-right-color: rgba(190,211,238,0.1);
  box-shadow: 12px 0 36px rgba(0,0,0,0.13);
}

.sidebar-logo {
  height: var(--topbar-h);
  padding: 0 22px;
  border-bottom-color: rgba(190,211,238,0.1);
}

.sidebar-logo-text {
  font-size: 15px;
  letter-spacing: -0.25px;
}

.sidebar-logo-text strong {
  color: #FFFFFF;
  font-weight: 600;
}

.sidebar-nav {
  padding: 18px 12px;
  gap: 4px;
}

.nav-item {
  padding: 11px 14px;
  border-radius: 10px;
  gap: 12px;
  color: #8290A5;
  letter-spacing: -0.05px;
}

.nav-item::before {
  display: none;
}

.nav-item:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.055);
}

.nav-item.active {
  color: #FFFFFF;
  background:
    linear-gradient(90deg, rgba(154,140,255,0.2), rgba(154,140,255,0.08));
  box-shadow: inset 0 0 0 1px rgba(154,140,255,0.17);
}

.nav-item.active .nav-icon {
  color: var(--accent);
  filter: drop-shadow(0 0 7px rgba(154,140,255,0.35));
}

.nav-icon {
  width: 19px;
  height: 19px;
}

.sidebar-footer {
  padding: 18px 22px;
  border-top-color: rgba(190,211,238,0.1);
}

.dashboard-body {
  background:
    linear-gradient(180deg, rgba(11,16,24,0.88), rgba(11,16,24,0.96)),
    radial-gradient(600px 300px at 85% 0%, rgba(154,140,255,0.08), transparent 72%);
}

.topbar {
  height: var(--topbar-h);
  padding: 0 28px;
  background: rgba(17,25,37,0.82);
  border-bottom-color: rgba(190,211,238,0.1);
  backdrop-filter: blur(18px);
}

.breadcrumb {
  gap: 10px;
  font-size: 13px;
}

.breadcrumb-app {
  color: #8390A5;
  font-weight: 500;
}

.breadcrumb-sep {
  color: #4C5B70;
}

.breadcrumb-page {
  color: #F3F6FB;
  font-weight: 600;
}

.status-badge {
  min-height: 32px;
  padding: 6px 12px;
  background: rgba(7,10,16,0.38);
  border-color: rgba(190,211,238,0.13);
  font-size: 11px;
  letter-spacing: 0.15px;
}

.status-badge.live {
  background: rgba(69,217,160,0.1);
  box-shadow: 0 0 20px rgba(69,217,160,0.11);
}

.lang-switcher {
  background: rgba(7,10,16,0.4);
  border-color: rgba(190,211,238,0.12);
}

.lang-btn.active {
  background: var(--bg-surface3);
  color: #FFFFFF;
}

.main-content {
  padding: 34px 38px 56px;
  background:
    radial-gradient(760px 420px at 94% -10%, rgba(154,140,255,0.07), transparent 70%),
    var(--bg-primary);
}

#main-content > * {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

.view-header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
  align-items: flex-end;
  padding: 0 0 22px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(190,211,238,0.1);
}

.view-kicker {
  margin-bottom: 7px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.7px;
  line-height: 1;
  text-transform: uppercase;
}

.section-title {
  font-size: 29px;
  font-weight: 600;
  letter-spacing: -0.9px;
  line-height: 1.12;
}

.section-sub {
  color: #8795AA;
  font-size: 13px;
  margin-top: 8px;
}

.view-header-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 12px;
  color: var(--text-muted);
  background: rgba(119,133,154,0.08);
  border: 1px solid rgba(119,133,154,0.2);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.view-header-status.live {
  color: var(--accent-live);
  background: var(--accent-live-dim);
  border-color: var(--border-live);
}

.status-orb {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(119,133,154,0.1);
}

.status-orb.live {
  box-shadow: 0 0 0 4px rgba(69,217,160,0.12), 0 0 12px rgba(69,217,160,0.5);
}

.panel,
.automation-panel {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.025), transparent 42%),
    var(--bg-surface);
  border-color: rgba(190,211,238,0.11);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.panel::before,
.automation-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  pointer-events: none;
}

.panel-header {
  margin-bottom: 22px;
}

.panel-icon {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(154,140,255,0.18);
  background: linear-gradient(145deg, rgba(154,140,255,0.18), rgba(154,140,255,0.06));
}

.panel-icon.gift {
  border-color: rgba(255,107,151,0.2);
  background: linear-gradient(145deg, rgba(255,107,151,0.18), rgba(255,107,151,0.05));
}

.panel-icon.live {
  border-color: rgba(69,217,160,0.2);
  background: linear-gradient(145deg, rgba(69,217,160,0.18), rgba(69,217,160,0.05));
}

.panel-title {
  font-size: 15px;
  font-weight: 600;
}

.panel-sub {
  color: #8290A5;
  line-height: 1.45;
}

.btn {
  min-height: 38px;
  border-radius: 9px;
  padding: 10px 16px;
  font-weight: 600;
  letter-spacing: -0.05px;
}

.btn-sm {
  min-height: 32px;
  padding: 7px 11px;
  font-size: 11px;
}

.btn-accent {
  background: linear-gradient(135deg, #9A8CFF, #7566DF);
  box-shadow: 0 5px 18px rgba(118,102,223,0.2);
}

.btn-accent:hover:not(:disabled) {
  background: linear-gradient(135deg, #B0A5FF, #8978F3);
  box-shadow: 0 8px 22px rgba(118,102,223,0.3);
}

.btn-ghost,
.btn-outline {
  background: rgba(255,255,255,0.035);
  border-color: rgba(190,211,238,0.13);
}

.btn-ghost:hover:not(:disabled),
.btn-outline:hover:not(:disabled) {
  background: rgba(255,255,255,0.075);
  border-color: rgba(190,211,238,0.24);
}

.form-input,
.connect-input,
.sim-gift-select,
.sim-count-input,
.admin-plan-select {
  background: rgba(7,10,16,0.48);
  border-color: rgba(190,211,238,0.13);
  border-radius: 9px;
  min-height: 40px;
}

.form-input:hover,
.connect-input:hover,
.sim-gift-select:hover,
.sim-count-input:hover {
  border-color: rgba(190,211,238,0.22);
}

.form-input:focus,
.connect-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim), 0 0 18px rgba(154,140,255,0.08);
}

.form-label,
.sim-count-label {
  color: #91A0B5;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
}

.connect-row {
  gap: 12px;
}

.connect-input {
  min-height: 44px;
}

.connect-row .btn {
  min-height: 44px;
  padding-inline: 20px;
}

.live-banner {
  border-color: rgba(69,217,160,0.34);
  background:
    radial-gradient(500px 180px at 0% 0%, rgba(69,217,160,0.12), transparent 75%),
    var(--bg-surface);
  box-shadow: 0 0 0 1px rgba(69,217,160,0.08), 0 16px 44px rgba(0,0,0,0.2);
}

.live-badge {
  padding: 6px 11px;
  letter-spacing: 1.3px;
}

.live-username {
  font-size: 22px;
  letter-spacing: -0.6px;
}

.widget-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.035), transparent 44%),
    var(--bg-surface);
  border-color: rgba(190,211,238,0.12);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), border-color var(--t), box-shadow var(--t), background var(--t-slow);
}

.widget-card:hover {
  border-color: rgba(154,140,255,0.4);
  box-shadow: 0 16px 40px rgba(0,0,0,0.32), 0 0 0 1px rgba(154,140,255,0.08);
  transform: translateY(-2px);
}

.widget-card-top {
  min-height: 94px;
  padding: 20px;
}

.widget-card-header {
  min-width: 0;
}

.widget-icon-wrap {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(154,140,255,0.2);
  background: linear-gradient(145deg, rgba(154,140,255,0.22), rgba(154,140,255,0.06));
  box-shadow: 0 5px 18px rgba(154,140,255,0.08);
}

.widget-name {
  line-height: 1.25;
}

.widget-desc {
  max-width: 220px;
  color: #8290A5;
  line-height: 1.45;
}

.toggle {
  width: 42px;
  height: 23px;
}

.toggle-slider {
  background: rgba(7,10,16,0.55);
  border-color: rgba(190,211,238,0.18);
}

.toggle input:checked + .toggle-slider {
  background: linear-gradient(90deg, #45D9A0, #32B98E);
  border-color: #45D9A0;
  box-shadow: 0 0 12px rgba(69,217,160,0.25);
}

.widget-preview {
  min-height: 112px;
  padding: 22px 20px;
  background:
    linear-gradient(135deg, rgba(84,200,232,0.035), transparent 45%),
    #0B111A;
  border-top-color: rgba(190,211,238,0.08);
  border-bottom-color: rgba(190,211,238,0.08);
}

.widget-card-footer {
  min-height: 58px;
  padding: 12px 20px;
}

.widget-status-chip.active {
  color: var(--accent-live);
  background: rgba(69,217,160,0.08);
}

.stat-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.035), transparent 52%),
    var(--bg-surface);
  border-top-width: 2px;
  border-color: rgba(190,211,238,0.11);
  box-shadow: var(--shadow-sm);
}

.stat-card:hover {
  border-color: rgba(190,211,238,0.22);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.stat-label {
  color: #8593A8;
}

.stat-value {
  font-size: 42px;
  letter-spacing: -2.4px;
}

.mini-stat {
  background: rgba(7,10,16,0.35);
  border-color: rgba(190,211,238,0.1);
}

.mini-stat:hover {
  border-color: rgba(190,211,238,0.2);
  background: rgba(255,255,255,0.035);
}

.history-table th,
.history-table td {
  border-bottom-color: rgba(190,211,238,0.08);
}

.history-table th {
  color: #8492A7;
  font-size: 10px;
  letter-spacing: 0.85px;
}

.history-table tbody tr:hover td {
  background: rgba(154,140,255,0.045);
}

.config-back-btn {
  min-height: 32px;
  padding: 7px 11px;
  color: #98A6B9;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(190,211,238,0.12);
  border-radius: 8px;
}

.config-back-btn:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.07);
}

.panel-section-label {
  color: #95A3B7;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.widget-anim-preview,
.live-preview-panel {
  box-shadow: var(--shadow-md);
}

.live-preview-bezel {
  border-color: #253246;
  box-shadow: 0 0 0 1px rgba(190,211,238,0.08), 0 18px 44px rgba(0,0,0,0.42);
}

.automation-health {
  background: rgba(17,25,37,0.82);
  border-color: rgba(190,211,238,0.14);
}

.automation-metrics > div {
  background:
    linear-gradient(135deg, rgba(154,140,255,0.1), transparent 60%),
    var(--bg-surface);
  border-color: rgba(190,211,238,0.12);
}

.automation-panel {
  box-shadow: var(--shadow-sm);
}

.automation-item,
.automation-rule,
.alert-row,
.rotator-check-row,
.admin-flag-row {
  background: rgba(7,10,16,0.3);
  border-color: rgba(190,211,238,0.1);
}

.automation-item:hover,
.alert-row:hover,
.rotator-check-row:hover {
  border-color: rgba(154,140,255,0.25);
  background: rgba(154,140,255,0.045);
}

.automation-rule {
  background:
    linear-gradient(90deg, rgba(255,107,151,0.07), rgba(154,140,255,0.07)),
    rgba(7,10,16,0.3);
}

.sound-option {
  background: rgba(255,255,255,0.04);
  border-color: rgba(190,211,238,0.12);
}

.sound-option.active {
  background: var(--accent-dim);
  border-color: var(--border-accent);
}

.stub-inner {
  padding: 54px 24px;
}

@media (max-width: 1200px) {
  :root { --sidebar-w: 220px; }
  .main-content { padding-inline: 28px; }
}

@media (max-width: 860px) {
  :root { --sidebar-w: 64px; }
  .main-content { padding: 26px 22px 44px; }
  .topbar { padding-inline: 20px; }
  .sidebar-logo { padding-inline: 0; justify-content: center; }
}

@media (max-width: 600px) {
  .main-content {
    padding: 22px 16px 78px;
  }

  .view-header {
    min-height: 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 18px;
    margin-bottom: 20px;
  }

  .section-title { font-size: 24px; }
  .section-sub { max-width: 34rem; }
  .view-header-status { align-self: flex-start; }

  .panel { padding: 18px; }
  .widget-card-top { padding: 18px; }
  .widget-card-footer { padding-inline: 18px; }

  .live-username { font-size: 18px; }
  .topbar { padding-inline: 14px; }
}


/* ================================================
   ANIMATION STUDIO
   ================================================ */
.studio-layout {
  display: grid;
  grid-template-columns: 320px 1fr 280px;
  gap: var(--s4);
  align-items: start;
  min-height: calc(100vh - var(--topbar-h) - var(--s8) - 100px);
}
@media (max-width: 1024px) {
  .studio-layout { grid-template-columns: 1fr; }
}

.studio-panel-left, .studio-panel-right {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.studio-panel-left { padding: 0; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.studio-panel-right { background: var(--bg-surface); }

.studio-tabs {
  display: flex;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border);
}
.studio-tab {
  flex: 1;
  padding: 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  transition: all var(--t);
  cursor: pointer;
}
.studio-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: var(--bg-surface);
}

.studio-tab-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
.studio-filters {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.studio-filter-row {
  display: flex;
  gap: 8px;
}
.studio-search, .studio-select {
  font-size: 12px;
  padding: 6px 10px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  flex: 1;
}

.studio-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.studio-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
}
.studio-upload-area {
  padding: 12px;
  border-top: 1px solid var(--border);
  background: var(--bg-surface2);
}

/* Media Item */
.studio-media-item, .studio-preset-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--t), border-color var(--t);
}
.studio-media-item:hover, .studio-preset-item:hover {
  background: var(--bg-hover);
}
.studio-media-item.selected, .studio-preset-item.selected {
  background: var(--accent-dim);
  border-color: var(--border-accent);
}
.studio-media-thumb {
  width: 48px;
  height: 48px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.studio-media-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.studio-media-thumb .fmt {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.studio-media-info, .studio-preset-info {
  flex: 1;
  min-width: 0;
}
.studio-media-name, .studio-preset-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.studio-media-meta, .studio-preset-meta {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.studio-tag {
  font-size: 10px;
  padding: 2px 6px;
  background: var(--bg-surface3);
  border-radius: 4px;
  color: var(--text-muted);
  text-transform: uppercase;
}
.studio-tag.alpha {
  background: var(--accent-live-dim);
  color: var(--accent-live);
}
.studio-media-usage {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
}
.studio-btn-icon {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all var(--t);
  background: transparent;
  border: none;
  cursor: pointer;
}
.studio-btn-icon:hover {
  background: var(--bg-surface3);
  color: var(--text-primary);
}
.btn-del-media:hover, .btn-del-preset:hover {
  color: var(--text-error);
  background: rgba(224,92,92,0.1);
}
.studio-preset-actions {
  display: flex;
  gap: 2px;
}
.studio-preset-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Center Stage */
.studio-panel-center {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s4);
}
.studio-stage-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-image:
    linear-gradient(45deg, #111 25%, transparent 25%, transparent 75%, #111 75%, #111),
    linear-gradient(45deg, #111 25%, transparent 25%, transparent 75%, #111 75%, #111);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
  box-shadow: 0 0 20px rgba(0,0,0,0.5) inset;
}
.studio-safe-area-lines {
  position: absolute;
  top: 10%; bottom: 10%; left: 10%; right: 10%;
  border: 1px dashed rgba(255,255,255,0.3);
  pointer-events: none;
  z-index: 5;
}
.studio-safe-area-label {
  position: absolute;
  top: calc(10% - 16px);
  left: 10%;
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  font-family: var(--font-mono);
  pointer-events: none;
  z-index: 5;
}
.studio-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.studio-stage-content {
  position: absolute;
  cursor: grab;
  user-select: none;
}
.studio-stage-content:active {
  cursor: grabbing;
}
.studio-stage-content img, .studio-stage-content video, .studio-stage-content canvas {
  width: 100%;
  height: 100%;
  pointer-events: none; /* so drag events go to content div */
  object-fit: inherit;
}

/* Properties Panel */
.studio-properties-content {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.studio-prop-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.studio-prop-group:last-child {
  border-bottom: none;
}
.studio-prop-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}
.studio-prop-row {
  display: flex;
  gap: 12px;
}
.studio-prop-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.studio-prop-col label {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.studio-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px !important;
  color: var(--text-primary) !important;
  cursor: pointer;
  margin-top: 18px;
  font-family: var(--font-ui) !important;
}

.studio-view-header {
  margin-bottom: var(--s4);
}

/* =====================================================
   TikTok Account
   ===================================================== */
.tiktok-connected-card {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  background: var(--bg-surface2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--rad-lg);
  padding: var(--s4);
}

.tiktok-user-info {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.tiktok-avatar-wrapper {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-surface3);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tiktok-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tiktok-avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-secondary);
}

.tiktok-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.tiktok-display-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tiktok-status-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tiktok-status-row .pulse-dot {
  width: 6px;
  height: 6px;
  background: var(--success);
  border-radius: 50%;
  box-shadow: 0 0 0 rgba(var(--success-rgb), 0.7);
  animation: pulse-dot-anim 2s infinite;
}

.tiktok-status-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--success);
}

.tiktok-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tiktok-meta .meta-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.scopes-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.scope-chip {
  background: var(--bg-surface3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--rad-sm);
  padding: 4px 8px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.tiktok-actions {
  display: flex;
  gap: var(--s3);
  margin-top: var(--s2);
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .tiktok-connected-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .tiktok-meta {
    flex: 1;
    margin-left: var(--s4);
    margin-right: var(--s4);
  }

  .tiktok-actions {
    margin-top: 0;
    flex-direction: column;
    align-items: flex-end;
  }
}

@media (min-width: 1024px) {
  .tiktok-actions {
    flex-direction: row;
    align-items: center;
  }
}

/* Admin Panel Extended CSS */
.admin-tabs {
  display: flex;
  background: var(--bg-base);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 3px;
  margin-bottom: var(--s6);
  border: 1px solid var(--border-subtle);
  justify-content: flex-start;
  width: fit-content;
}
.admin-table-split {
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
}
.admin-user-detail-panel {
  flex: 0 0 320px;
  background: var(--bg-surface2);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-sm);
  padding: var(--s4);
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 0;
  max-height: calc(100vh - 150px);
  overflow-y: auto;
}
.detail-section {
  margin-bottom: var(--s4);
}
.detail-subtitle {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 4px;
  margin-bottom: 8px;
}
.detail-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.detail-value {
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.admin-user-row {
  cursor: pointer;
}
.admin-user-row:hover {
  background: var(--bg-surface2);
}
.admin-user-row.active {
  background: var(--bg-surface3);
  border-left: 2px solid var(--accent);
}
.admin-role-chip.owner {
  background: rgba(240,97,139,0.12);
  color: var(--accent-gift);
  border-color: rgba(240,97,139,0.3);
}

@media(max-width: 900px) {
  .admin-table-split {
    flex-direction: column;
  }
  .admin-user-detail-panel {
    width: 100%;
    flex: auto;
    position: relative;
    max-height: none;
  }
}