:root {
    --t-bg:     0.9s cubic-bezier(0.4, 0, 0.2, 1);
    --t-thumb:  0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    --t-fast:   0.2s ease;
    --t-glow:   1.2s ease;
  
    --sw-width:  160px;
    --sw-height:  80px;
    --sw-thumb:   68px;
    --sw-pad:       6px;
  
    --r-pill: 9999px;
    --r-card: 32px;
  
    --f-display: 'Cormorant Garamond', Georgia, serif;
    --f-ui:      'DM Sans', system-ui, sans-serif;
}
  
body.dark {
    --bg:            #0d0d0f;
    --bg-2:          #141417;
    --text-primary: rgba(255,255,255,0.88);
    --text-muted:   rgba(255,255,255,0.28);
    --track-off:    #1f1f24;
    --track-border: rgba(255,255,255,0.06);
    --thumb-bg:     #2a2a30;
    --thumb-shadow: 0 4px 24px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.4);
    --thumb-icon:   rgba(255,255,255,0.35);
    --status-off:   rgba(255,255,255,0.22);
    --counter-bg:   rgba(255,255,255,0.05);
    --counter-dot:  #3a7aff;
    --conn-ok:      #34d399;
    --conn-err:     #f87171;
    --glow-color:   transparent;
}
  
body.light {
    --bg:            #f5f0e8;
    --bg-2:          #ede8de;
    --text-primary: rgba(20,18,14,0.9);
    --text-muted:   rgba(20,18,14,0.35);
    --track-off:    #d9d2c4;
    --track-border: rgba(0,0,0,0.06);
    --thumb-bg:     #ffffff;
    --thumb-shadow: 0 4px 24px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.08);
    --thumb-icon:   rgba(20,18,14,0.45);
    --status-off:   rgba(20,18,14,0.3);
    --counter-bg:   rgba(0,0,0,0.05);
    --counter-dot:  #1a56f0;
    --conn-ok:      #059669;
    --conn-err:     #dc2626;
    --glow-color:   rgba(255, 240, 180, 0.55);
}
  
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
  
html {
    height: 100%;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
  
body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-ui);
    background-color: var(--bg);
    color: var(--text-primary);
    transition:
      background-color var(--t-bg),
      color var(--t-bg);
    overflow: hidden;
}
  
.glow-orb {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
      ellipse 70% 60% at 50% -5%,
      var(--glow-color),
      transparent 80%
    );
    opacity: 0;
    transition: opacity var(--t-glow), background var(--t-glow);
}
  
.glow-orb.active {
    opacity: 1;
}
  
.stage {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 48px;
    padding: 40px 24px;
    width: 100%;
}
  
.header {
    text-align: center;
    user-select: none;
}
  
.title {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(2rem, 6vw, 3.5rem);
    letter-spacing: 0.01em;
    line-height: 1.1;
    color: var(--text-primary);
    transition: color var(--t-bg);
}
  
.subtitle {
    margin-top: 12px;
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(0.95rem, 2.5vw, 1.2rem);
    letter-spacing: 0.02em;
    color: var(--text-muted);
    transition: color var(--t-bg);
}
  
.switch-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
  
.switch-track {
    position: relative;
    display: block;
    width: var(--sw-width);
    height: var(--sw-height);
    border-radius: var(--r-pill);
    background-color: var(--track-off);
    border: 1.5px solid var(--track-border);
    cursor: pointer;
    outline: none;
    transition:
      background-color var(--t-bg),
      border-color var(--t-bg),
      box-shadow var(--t-fast);
}
  
body.light .switch-track {
    background-color: #e8c84a;
    border-color: rgba(220, 180, 0, 0.3);
    box-shadow:
      0 0 0 6px rgba(232, 200, 74, 0.15),
      0 0 48px rgba(232, 200, 74, 0.25);
}
  
.switch-track:focus-visible {
    box-shadow: 0 0 0 3px rgba(99, 162, 255, 0.5);
}
  
.switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
  
.switch-thumb {
    position: absolute;
    top: var(--sw-pad);
    left: var(--sw-pad);
    width: var(--sw-thumb);
    height: var(--sw-thumb);
    border-radius: var(--r-pill);
    background-color: var(--thumb-bg);
    box-shadow: var(--thumb-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
      transform var(--t-thumb),
      background-color var(--t-bg),
      box-shadow var(--t-bg);
}
  
body.light .switch-thumb {
    transform: translateX(calc(var(--sw-width) - var(--sw-thumb) - var(--sw-pad) * 2));
    background-color: #fff8e1;
    box-shadow:
      0 4px 24px rgba(220, 180, 0, 0.3),
      0 1px 4px rgba(0,0,0,0.1);
}
  
.thumb-icon {
    position: relative;
    width: 26px;
    height: 26px;
    color: var(--thumb-icon);
    transition: color var(--t-bg);
}
  
.icon-off,
.icon-on {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: opacity var(--t-fast);
}
  
body.dark  .icon-off { opacity: 1; }
body.dark  .icon-on  { opacity: 0; }
  
body.light .icon-off { opacity: 0; }
body.light .icon-on  { opacity: 1; }
  
body.light .thumb-icon {
    color: #b8860b;
}
  
.switch-status {
    font-family: var(--f-ui);
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--status-off);
    user-select: none;
    transition: color var(--t-bg);
}
  
.switch-status.on {
    color: #b8860b;
}
  
body.dark .switch-status.on {
    color: #e8c84a;
}
  
.footer {
    display: flex;
    align-items: center;
    gap: 7px;
    user-select: none;
}
  
.conn-indicator {
    width: 7px;
    height: 7px;
    border-radius: var(--r-pill);
    background-color: var(--text-muted);
    transition: background-color 0.4s ease;
    flex-shrink: 0;
}
  
.conn-indicator.connected {
    background-color: var(--conn-ok);
    box-shadow: 0 0 8px var(--conn-ok);
    animation: pulse-dot 2.5s ease infinite;
}
  
.conn-indicator.disconnected {
    background-color: var(--conn-err);
}
  
.conn-text {
    font-family: var(--f-ui);
    font-size: 0.75rem;
    font-weight: 300;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    transition: color var(--t-bg);
}
  
.user-counter {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--r-pill);
    background-color: var(--counter-bg);
    border: 1px solid var(--track-border);
    font-family: var(--f-ui);
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background-color var(--t-bg), color var(--t-bg), border-color var(--t-bg);
}
  
.counter-dot {
    width: 7px;
    height: 7px;
    border-radius: var(--r-pill);
    background-color: var(--counter-dot);
    flex-shrink: 0;
    animation: pulse-dot 2.5s ease infinite;
    transition: background-color var(--t-bg);
}
  
#userCount {
    font-weight: 400;
    color: var(--text-primary);
    min-width: 1ch;
    text-align: center;
    display: inline-block;
    transition: color var(--t-bg);
}
  
#userCount.pop {
    animation: pop-number 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
  
.counter-label {
    font-weight: 300;
}
  
@keyframes pulse-dot {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%       { transform: scale(1.35); opacity: 0.6; }
}
  
@keyframes pop-number {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.4); }
    100% { transform: scale(1); }
}
  
.switch-track:active .switch-thumb {
    transform: scale(0.93);
}

body.light .switch-track:active .switch-thumb {
    transform: translateX(calc(var(--sw-width) - var(--sw-thumb) - var(--sw-pad) * 2)) scale(0.93);
}
  
@media (max-width: 480px) {
    :root {
      --sw-width:  130px;
      --sw-height:  66px;
      --sw-thumb:   55px;
      --sw-pad:      5px;
    }
  
    .user-counter {
      top: 16px;
      right: 16px;
      padding: 6px 13px;
      font-size: 0.75rem;
    }
}