:root { color-scheme: dark; }

body {
  background:
    radial-gradient(circle at 20% 0%, rgba(6,182,212,.09), transparent 30rem),
    radial-gradient(circle at 90% 25%, rgba(139,92,246,.07), transparent 25rem),
    #020617;
}

.glass-card {
  background: linear-gradient(135deg, rgba(15,23,42,.95), rgba(8,47,73,.55));
  box-shadow: 0 20px 50px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.03);
}

article {
  box-shadow: 0 12px 30px rgba(0,0,0,.12), inset 0 1px rgba(255,255,255,.02);
}

button {
  transition: transform 120ms ease, background-color 160ms ease,
    border-color 160ms ease, opacity 160ms ease;
}

button:active { transform: scale(.97); }

input, select, textarea {
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

input:focus, select:focus, textarea:focus {
  border-color: rgb(6 182 212);
  box-shadow: 0 0 0 3px rgba(6,182,212,.1);
  outline: none;
}

.progress-bar { box-shadow: 0 0 12px currentColor; }

@media (display-mode: standalone) {
  header { padding-top: max(.75rem, env(safe-area-inset-top)); }
  body { padding-bottom: calc(7rem + env(safe-area-inset-bottom)); }
}