* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body.widget {
  display: grid;
  min-height: 100vh;
  place-items: center;
  overflow: hidden;
  background: transparent;
}

#counter {
  color: #b5bac3;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(4rem, 38vw, 30rem);
  font-weight: 900;
  letter-spacing: -0.08em;
  line-height: 0.85;
  padding: 0 3vw;
  text-align: center;
  text-shadow:
    -2px -2px 0 #272b33,
    2px -2px 0 #272b33,
    -2px 2px 0 #272b33,
    2px 2px 0 #272b33,
    0 0 10px rgba(0, 0, 0, 0.55);
  transition: color 180ms ease;
  white-space: nowrap;
}

#counter.bump {
  animation: bump var(--bump-duration, 260ms) cubic-bezier(.2, .85, .35, 1) both;
}

@keyframes bump {
  0% { color: #fff; transform: scale(1) rotate(0deg); }
  30% { color: #fff; transform: scale(1.11) rotate(var(--tilt, 5deg)); }
  62% { color: #fff; transform: scale(1.05) rotate(calc(var(--tilt, 5deg) * .55)); }
  100% { color: #b5bac3; transform: scale(1) rotate(0deg); }
}

body.admin {
  display: grid;
  min-height: 100vh;
  place-items: center;
  background: #15171c;
  color: #f4f5f7;
  font-family: Arial, Helvetica, sans-serif;
}

.panel { width: min(92vw, 480px); text-align: center; }
.panel h1 { margin: 0 0 2.5rem; font-size: clamp(1.5rem, 5vw, 2.2rem); }
.admin-count { margin: 0 0 2rem; color: #fff; font-size: clamp(5rem, 22vw, 9rem); font-weight: 900; line-height: .9; }
.controls { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
button, input { border: 0; border-radius: .65rem; font: inherit; }
button { min-height: 3.2rem; cursor: pointer; color: #fff; background: #343943; font-weight: 700; }
button:hover { background: #4a505c; }
.primary { background: #5865f2; }
.primary:hover { background: #6975ff; }
.set-row { display: flex; gap: .8rem; margin-top: .8rem; }
input { min-width: 0; flex: 1; padding: 0 1rem; background: #292d35; color: #fff; outline: 2px solid transparent; }
input:focus { outline-color: #5865f2; }
.error { min-height: 1.3rem; margin: 1rem 0 0; color: #ff7b83; }
.logout { margin-top: 2rem; min-height: auto; padding: .4rem 1rem; background: transparent; color: #aab0ba; font-weight: 400; }
.login-form { display: grid; gap: .8rem; }
.login-form input, .login-form button { min-height: 3.2rem; }