:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #080b10;
  color: #f7f8fa;
  --surface: #111720;
  --raised: #171f2b;
  --border: #2a3544;
  --muted: #929cac;
  --green: #31d17c;
  --red: #ff5c66;
  --amber: #f2b84b;
}

* { box-sizing: border-box; }
html { min-height: 100%; -webkit-text-size-adjust: 100%; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: radial-gradient(circle at 90% 0, rgba(49,135,255,.13), transparent 28rem), #080b10; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.settings-shell { width: min(100%, 1080px); margin: 0 auto; padding: max(22px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(36px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
.settings-header, .settings-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.settings-header { margin-bottom: 28px; }
.eyebrow, .section-label { margin: 0; color: var(--muted); font-size: .72rem; font-weight: 850; letter-spacing: .14em; }
h1 { margin: 6px 0 5px; font-size: clamp(1.75rem, 5vw, 2.6rem); letter-spacing: -.045em; }
h2 { margin: 6px 0 0; letter-spacing: -.03em; }
.intro { margin: 0; color: #a9b2c0; line-height: 1.5; }
.back-link { flex: none; padding: 11px 14px; border: 1px solid var(--border); border-radius: 11px; color: #dce2ea; font-weight: 750; text-decoration: none; }
.lock-card { max-width: 560px; padding: 24px; border: 1px solid var(--border); border-radius: 19px; background: var(--surface); }
.lock-card > p:not(.section-label) { color: #a9b2c0; line-height: 1.5; }
.unlock-form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; margin-top: 20px; }
label span { display: block; margin-bottom: 7px; color: #aeb7c4; font-size: .78rem; font-weight: 750; }
input { width: 100%; height: 50px; padding: 0 13px; border: 1px solid #414d5f; border-radius: 10px; background: #0a0f16; color: white; }
button { min-height: 48px; padding: 0 17px; border: 1px solid transparent; border-radius: 10px; background: #1977df; color: white; font-weight: 800; cursor: pointer; touch-action: manipulation; }
button:disabled { opacity: .55; cursor: wait; }
.settings-toolbar { margin-bottom: 15px; }
.deck-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.deck-card { --accent: #ff4655; overflow: hidden; padding: 19px; border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: 17px; background: var(--surface); box-shadow: 0 14px 32px rgba(0,0,0,.16); }
.deck-card[data-deck="eng1"] { --accent: #3187ff; }
.deck-card[data-deck="eng2"] { --accent: #f0ad35; }
.deck-card[data-deck="eng3"] { --accent: #9b6cff; }
.deck-card[data-deck="eng4"] { --accent: #19c3cf; }
.deck-card[data-deck="eng5"] { --accent: #33c676; }
.deck-card-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 17px; }
.deck-marker { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 14%, transparent); }
.deck-card-heading strong { letter-spacing: .06em; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.deck-actions { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; margin-top: 15px; }
.deck-actions button { min-height: 42px; padding: 0 13px; border-color: #3d495a; background: var(--raised); }
.test-result { color: var(--muted); font-size: .78rem; line-height: 1.4; }
.test-result[data-kind="success"], .message[data-kind="success"] { color: var(--green); }
.test-result[data-kind="error"], .message[data-kind="error"] { color: var(--red); }
.test-result[data-kind="working"], .message[data-kind="working"] { color: var(--amber); }
.save-button { background: #1977df; }
.mobile-save { display: none; width: 100%; margin-top: 14px; }
.message { min-height: 24px; margin: 18px 2px 0; color: var(--muted); line-height: 1.5; }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid #7bb7ff; outline-offset: 2px; }

@media (max-width: 760px) {
  .settings-header { align-items: flex-start; }
  .intro { max-width: 240px; }
  .back-link { padding: 9px 11px; font-size: .8rem; }
  .deck-settings { grid-template-columns: 1fr; }
  .settings-toolbar .save-button { display: none; }
  .mobile-save { display: block; }
}

@media (max-width: 460px) {
  .settings-shell { padding-right: 14px; padding-left: 14px; }
  .settings-header { display: block; }
  .back-link { display: inline-block; margin-top: 14px; }
  .unlock-form, .fields, .deck-actions { grid-template-columns: 1fr; }
  .deck-actions button { width: 100%; }
}