.secondary { background: var(--wash); color: var(--ink); }
.secondary:hover { background: #dfeae6; }
.danger { background: #b94b4b; }
.danger:hover { background: #973b3b; }
.softphone-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 28px; margin-top: 24px; }
.button-row { display: flex; gap: 9px; margin-top: 18px; }
.button-row button { flex: 1; }
.phone-pad { padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: #fbfdfc; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.keypad button { padding: 11px; background: var(--wash); color: var(--ink); font-size: 16px; }
.keypad button:hover { background: #dcebe5; }
.prefix-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
#settings-form { margin-top: 24px; padding-top: 8px; border-top: 1px solid var(--line); }
.account-form { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.recording-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.recording audio { width: min(330px, 45%); margin-left: auto; height: 36px; }
.download { color: var(--accent); font-weight: 700; text-decoration: none; white-space: nowrap; }
#theme-select { width: auto; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--surface); }
label select { width: 100%; margin-top: 7px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: var(--surface); }

html[data-theme="dark"] {
  --ink: #edf6f2; --muted: #9baca5; --line: #30443c; --surface: #17251f;
  --accent: #59d2a7; --accent2: #76dfba; --wash: #21362e; --danger: #ef8585;
}
html[data-theme="dark"] body { background: #0d1713; }
html[data-theme="dark"] .ambient.one { background: #174735; opacity: .45; }
html[data-theme="dark"] .ambient.two { background: #182f50; opacity: .4; }
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .app { background: rgba(20, 34, 28, .94); border-color: #2b4037; box-shadow: 0 24px 70px #0008; }
html[data-theme="dark"] input,
html[data-theme="dark"] .phone-pad { background: #111d18; color: var(--ink); }
html[data-theme="dark"] .type-grid input:checked + span,
html[data-theme="dark"] .banner,
html[data-theme="dark"] .credential { background: #18382d; }

@media (max-width: 650px) {
  .softphone-grid, .prefix-row, .recording-filters { grid-template-columns: 1fr; }
  .recording { flex-wrap: wrap; }
  .recording audio { width: 100%; }
}