.glass-card,
.glass-strip {
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass-card,
  .glass-strip {
    background: var(--glass);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    backdrop-filter: blur(22px) saturate(145%);
  }
}

.glass-card {
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.42), transparent 35%, transparent 70%, rgba(189, 139, 50, 0.05));
}

.glass-card > * { position: relative; }

.primary-button,
.secondary-button,
.danger-button,
.text-button,
.icon-button,
.nav-item,
.answer-segment button,
.period-switcher button,
.file-button {
  min-height: var(--tap-min);
  border: 0;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.primary-button,
.secondary-button,
.danger-button,
.file-button {
  border-radius: 16px;
  padding: 13px 18px;
  font-weight: 720;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
}

.primary-button {
  color: white;
  background: linear-gradient(145deg, var(--navy-800), var(--navy-950));
  box-shadow: 0 10px 22px rgba(7, 29, 56, 0.24), inset 0 1px rgba(255, 255, 255, 0.18);
}

.primary-button:active { transform: scale(0.985); }
.primary-button:disabled, .secondary-button:disabled { opacity: 0.42; cursor: default; }
.secondary-button { color: var(--ink); background: var(--mist-100); border: 1px solid var(--line); }
.danger-button { color: var(--no); background: var(--no-soft); }
.danger-button.solid { color: white; background: var(--no); }
.wide { width: 100%; }
.text-button { background: transparent; color: var(--navy-700); padding: 8px 14px; }
.icon-button { width: var(--tap-min); border-radius: 50%; background: var(--glass-strong); color: var(--ink); font-size: 26px; }

button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  button, a, .glass-card, .progress-track span, .question-progress span { transition: transform 160ms ease, opacity 160ms ease, background 200ms ease, width 300ms ease; }
}