.settings-card {
   margin-top: 18px;
   border-radius: 16px;
   border: 1px solid #e3cba9;
   background: linear-gradient(160deg, #ffffff 0%, #fff8ea 100%);
   box-shadow: 0 14px 26px rgba(95, 15, 21, 0.1);
   padding: 26px 28px;
}

.settings-card h2 {
   font-size: 19px;
   font-weight: 900;
   letter-spacing: 0.02em;
   margin: 0 0 4px;
}

.settings-card p {
   font-size: 13px;
   line-height: 1.45;
   margin: 2px 0 10px;
   opacity: 0.75;
}

.settings-card-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 8px 12px;
   margin-bottom: 8px;
}

.settings-card-head h2 {
   margin: 0;
}

.account-actions {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   flex-wrap: wrap;
   gap: 8px;
}

.rankings-admin-actions {
   gap: 7px;
}

.account-inline-text {
   color: #6b4950;
   font-size: 13px;
   font-weight: 600;
}

.account-helper-text {
   margin: 0 0 8px;
   color: #6f3a40;
   font-size: 12px;
   opacity: 0.8;
}

.account-big-actions {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   margin-top: 4px;
}

.account-big-button {
   flex: 0 1 auto;
   border: 1px solid #bb8d2d;
   border-radius: 999px;
   background: linear-gradient(135deg, #f3daa1 0%, #d8a840 100%);
   color: #4e171d;
   font-weight: 700;
   font-size: 13px;
   padding: 8px 20px;
   cursor: pointer;
   transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.account-big-button:hover {
   box-shadow: 0 11px 18px rgba(95, 15, 21, 0.2);
}

.account-big-button.secondary {
   border-color: #a42b35;
   background: linear-gradient(135deg, #ca3743 0%, #8e1822 100%);
   color: #fffaf1;
}

.account-big-button.secondary:hover {
   background: linear-gradient(135deg, #d03e4a 0%, #971d28 100%);
}

.account-form {
   margin-top: 12px;
}

.account-form[hidden] {
   display: none !important;
}

.account-form-label {
   font-size: 15px;
   font-weight: 700;
   margin: 0 0 10px;
   color: #4e171d;
}

.account-form-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 12px;
}

.account-form-actions button {
   border: 1px solid #bb8d2d;
   border-radius: 999px;
   background: linear-gradient(135deg, #f3daa1 0%, #d8a840 100%);
   color: #4e171d;
   font-weight: 700;
   padding: 9px 14px;
   cursor: pointer;
   transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.account-form-actions button:hover {
   box-shadow: 0 11px 18px rgba(95, 15, 21, 0.2);
}

.account-form-actions button.secondary.subtle {
   border-color: #8f6a25;
   background: linear-gradient(135deg, #f0deba 0%, #d5b06f 100%);
   color: #562126;
}

.account-form-actions button.secondary.subtle:hover {
   background: linear-gradient(135deg, #f5e7ca 0%, #dcb97e 100%);
}

.account-form-actions button:disabled {
   opacity: 0.55;
   cursor: not-allowed;
}

.settings-grid {
   display: grid;
   grid-template-columns: 180px minmax(0, 1fr);
   gap: 10px 14px;
   align-items: center;
}

.settings-grid label {
   font-weight: 700;
   color: #5f1f24;
   font-size: 14px;
}

.settings-grid input,
.settings-grid select,
.settings-grid textarea {
   border: 1px solid #d8b984;
   border-radius: 11px;
   font-size: 14px;
   padding: 10px 11px;
   font-family: inherit;
   width: 100%;
   background: #fffdf8;
   color: #3b181d;
   transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.settings-grid input:focus,
.settings-grid select:focus,
.settings-grid textarea:focus {
   outline: 2px solid #dbac39;
   outline-offset: 1px;
   border-color: #bc8f2f;
   background: #fffcf3;
}

.settings-grid textarea {
   resize: vertical;
   min-height: 80px;
}

.rankings-admin-grid textarea#rankingsContentInput {
   min-height: 280px;
   white-space: pre-wrap;
}

.settings-checkbox-wrap {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: #6b4950;
   font-size: 13px;
   font-weight: 600;
}

.settings-checkbox-wrap input[type="checkbox"] {
   width: 16px;
   height: 16px;
   accent-color: #8e1822;
}

.button-row {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 12px;
}

.button-row button,
.account-actions button {
   border: 1px solid #bb8d2d;
   border-radius: 999px;
   background: linear-gradient(135deg, #f3daa1 0%, #d8a840 100%);
   color: #4e171d;
   font-weight: 700;
   padding: 9px 14px;
   cursor: pointer;
   transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.button-row button:hover,
.account-actions button:hover {
   transform: none;
   box-shadow: 0 11px 18px rgba(95, 15, 21, 0.2);
}

.button-row button.secondary,
.account-actions button.secondary {
   border-color: #a42b35;
   background: linear-gradient(135deg, #ca3743 0%, #8e1822 100%);
   color: #fffaf1;
}

.button-row button.secondary:hover,
.account-actions button.secondary:hover {
   background: linear-gradient(135deg, #d03e4a 0%, #971d28 100%);
}

.account-actions button.secondary.subtle {
   border-color: #8f6a25;
   background: linear-gradient(135deg, #f0deba 0%, #d5b06f 100%);
   color: #562126;
}

.account-actions button.secondary.subtle:hover {
   background: linear-gradient(135deg, #f5e7ca 0%, #dcb97e 100%);
}

.button-row button:disabled,
.account-actions button:disabled {
   opacity: 0.55;
   cursor: not-allowed;
   transform: none;
   box-shadow: none;
}

.status-text {
   min-height: 18px;
   margin: 10px 0 0;
   font-size: 13px;
   color: #5b2a2f;
   font-weight: 600;
}

.entitlements-list {
   margin: 12px 0 0;
   padding-left: 20px;
   color: #583438;
   font-size: 13px;
}

.entitlements-list li {
   margin: 0 0 6px;
}

.entitlements-list .entitlement-empty {
   list-style: none;
   margin-left: -20px;
   color: #7a5b60;
}

.sleeper-sync-summary {
   list-style: none;
   margin: 12px 0 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 7px;
}

.sleeper-sync-summary li {
   border: 1px solid #dec9a4;
   border-radius: 10px;
   background: #fffdf6;
   color: #60383d;
   padding: 8px 10px;
   font-size: 13px;
   font-weight: 600;
}

.sleeper-sync-summary .empty {
   border-style: dashed;
   color: #7c6267;
}

.espn-advanced-toggle {
   margin-top: 10px;
}

.espn-advanced-toggle summary {
   cursor: pointer;
   font-size: 13px;
   font-weight: 700;
   color: #6b4950;
   user-select: none;
}

.espn-advanced-toggle .settings-grid {
   margin-top: 10px;
}

:root[data-theme="dark"] .settings-card {
   border-color: #bf9a4a;
   background: linear-gradient(160deg, #000000 0%, #090909 100%);
   box-shadow: 0 14px 30px rgba(0, 0, 0, 0.64);
}

:root[data-theme="dark"] .settings-card-head h2,
:root[data-theme="dark"] .settings-grid label {
   color: #bf9a4a;
}

:root[data-theme="dark"] #accountCard .settings-card-head h2 {
   color: #bf9a4a;
}

:root[data-theme="dark"] .account-inline-text,
:root[data-theme="dark"] .account-helper-text,
:root[data-theme="dark"] .account-form-label,
:root[data-theme="dark"] .espn-advanced-toggle summary,
:root[data-theme="dark"] .status-text,
:root[data-theme="dark"] .entitlements-list,
:root[data-theme="dark"] .sleeper-sync-summary li,
:root[data-theme="dark"] .sleeper-sync-summary .empty,
:root[data-theme="dark"] .settings-checkbox-wrap {
   color: #ffffff;
}

:root[data-theme="dark"] .settings-grid input,
:root[data-theme="dark"] .settings-grid select,
:root[data-theme="dark"] .settings-grid textarea {
   border-color: #bf9a4a;
   background: #000000;
   color: #ffffff;
}

:root[data-theme="dark"] .settings-grid input:focus,
:root[data-theme="dark"] .settings-grid select:focus,
:root[data-theme="dark"] .settings-grid textarea:focus {
   border-color: #bf9a4a;
   background: #050505;
   outline: none;
   box-shadow: 0 0 0 2px rgba(191, 154, 74, 0.35), 0 0 12px rgba(191, 154, 74, 0.15);
}

:root[data-theme="dark"] .button-row button,
:root[data-theme="dark"] .account-actions button,
:root[data-theme="dark"] .account-big-button,
:root[data-theme="dark"] .account-form-actions button {
   border-color: #bf9a4a;
   background: #000000;
   color: #ffffff;
}

:root[data-theme="dark"] .button-row button.secondary,
:root[data-theme="dark"] .account-actions button.secondary,
:root[data-theme="dark"] .account-big-button.secondary {
   border-color: #bf9a4a;
   background: #bf9a4a;
   color: #000000;
}

:root[data-theme="dark"] .account-actions button.secondary.subtle,
:root[data-theme="dark"] .account-form-actions button.secondary.subtle {
   border-color: #bf9a4a;
   background: #000000;
   color: #ffffff;
}

:root[data-theme="dark"] .sleeper-sync-summary li {
   border-color: #bf9a4a;
   background: #000000;
}

:root[data-theme="dark"] .button-row button:hover,
:root[data-theme="dark"] .account-actions button:hover,
:root[data-theme="dark"] .account-actions button.secondary.subtle:hover,
:root[data-theme="dark"] .account-big-button:hover,
:root[data-theme="dark"] .account-form-actions button:hover {
   border-color: #bf9a4a;
   background: #bf9a4a;
   color: #000000;
}

:root[data-theme="dark"] .status-text.error {
   color: #ff6b80;
}

/* Light mode palette lock: #C7001F #000000 #FFFFFF #BF9A4A */
:root:not([data-theme="dark"]) .settings-card {
   border-color: #bf9a4a;
   background: #ffffff;
}

:root:not([data-theme="dark"]) .settings-card-head h2,
:root:not([data-theme="dark"]) .settings-grid label,
:root:not([data-theme="dark"]) .account-inline-text,
:root:not([data-theme="dark"]) .account-helper-text,
:root:not([data-theme="dark"]) .account-form-label,
:root:not([data-theme="dark"]) .espn-advanced-toggle summary,
:root:not([data-theme="dark"]) .status-text,
:root:not([data-theme="dark"]) .entitlements-list,
:root:not([data-theme="dark"]) .settings-checkbox-wrap,
:root:not([data-theme="dark"]) .sleeper-sync-summary li,
:root:not([data-theme="dark"]) .sleeper-sync-summary .empty {
   color: #000000;
}

:root:not([data-theme="dark"]) #accountCard .settings-card-head h2 {
   color: #c7001f;
}

.settings-card .section-desc {
   font-size: 12px;
   color: #6b4950;
   margin: 0 0 12px;
   opacity: 0.7;
}

:root[data-theme="dark"] .settings-card .section-desc {
   color: #ccc;
}



:root:not([data-theme="dark"]) .status-text.error {
   color: #c7001f;
}

:root:not([data-theme="dark"]) .settings-grid input,
:root:not([data-theme="dark"]) .settings-grid select,
:root:not([data-theme="dark"]) .settings-grid textarea {
   border-color: #bf9a4a;
   background: #ffffff;
   color: #000000;
}

:root:not([data-theme="dark"]) .settings-grid input:focus,
:root:not([data-theme="dark"]) .settings-grid select:focus,
:root:not([data-theme="dark"]) .settings-grid textarea:focus {
   border-color: #c7001f;
   outline: none;
   box-shadow: 0 0 0 2px rgba(199, 0, 31, 0.2), 0 0 10px rgba(199, 0, 31, 0.08);
}

:root:not([data-theme="dark"]) .settings-checkbox-wrap input[type="checkbox"] {
   accent-color: #c7001f;
}

:root:not([data-theme="dark"]) .button-row button,
:root:not([data-theme="dark"]) .account-actions button,
:root:not([data-theme="dark"]) .account-big-button,
:root:not([data-theme="dark"]) .account-form-actions button {
   border-color: #bf9a4a;
   background: #bf9a4a;
   color: #000000;
}

:root:not([data-theme="dark"]) .button-row button.secondary,
:root:not([data-theme="dark"]) .account-actions button.secondary,
:root:not([data-theme="dark"]) .account-big-button.secondary {
   border-color: #c7001f;
   background: #c7001f;
   color: #ffffff;
}

:root:not([data-theme="dark"]) .account-actions button.secondary.subtle,
:root:not([data-theme="dark"]) .account-form-actions button.secondary.subtle {
   border-color: #bf9a4a;
   background: #ffffff;
   color: #000000;
}

:root:not([data-theme="dark"]) .button-row button:hover,
:root:not([data-theme="dark"]) .account-actions button:hover,
:root:not([data-theme="dark"]) .account-big-button:hover,
:root:not([data-theme="dark"]) .account-form-actions button:hover {
   border-color: #c7001f;
   background: #c7001f;
   color: #ffffff;
}

:root:not([data-theme="dark"]) .sleeper-sync-summary li,
:root:not([data-theme="dark"]) .sleeper-sync-summary .empty {
   border-color: #bf9a4a;
   background: #ffffff;
}

@media (max-width: 760px) {
   .settings-card-head {
      align-items: flex-start;
   }

   .account-actions {
      width: 100%;
      justify-content: flex-start;
   }

   .rankings-admin-actions {
      width: 100%;
   }

   .account-inline-text {
      width: 100%;
      order: 3;
   }

   .settings-grid {
      grid-template-columns: 1fr;
      gap: 7px;
   }

   .button-row button {
      width: 100%;
   }

   .rankings-admin-actions button {
      width: 100%;
   }
}

/* ── Onboarding Wizard ── */
.onboarding-overlay {
   position: fixed;
   inset: 0;
   z-index: 9000;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(0, 0, 0, 0.6);
   backdrop-filter: blur(4px);
   padding: 20px;
}

.onboarding-overlay.is-hidden {
   display: none;
}

.onboarding-modal {
   background: #fffefb;
   border: 2px solid #bf9a4a;
   border-radius: 20px;
   padding: 36px 32px 28px;
   max-width: 480px;
   width: 100%;
   text-align: center;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.onboarding-progress {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0;
   margin-bottom: 28px;
}

.onboarding-step-dot {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   border: 2px solid #d4c4a8;
   background: #ffffff;
   color: #8d7a6a;
   font-size: 13px;
   font-weight: 800;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s ease;
}

.onboarding-step-dot.active {
   border-color: #bf9a4a;
   background: #bf9a4a;
   color: #000000;
}

.onboarding-step-dot.done {
   border-color: #4caf50;
   background: #4caf50;
   color: #ffffff;
}

.onboarding-step-line {
   width: 40px;
   height: 2px;
   background: #d4c4a8;
}

.onboarding-step h2 {
   font-size: 22px;
   font-weight: 900;
   color: #c7001f;
   margin: 0 0 6px;
}

.onboarding-subtitle {
   font-size: 14px;
   color: #5a4a3a;
   margin: 0 0 20px;
}

.onboarding-label {
   font-size: 13px;
   font-weight: 700;
   color: #3f2f33;
   margin-bottom: 12px;
}

.onboarding-helper {
   font-size: 12px;
   color: #8a7a6a;
   margin-top: 12px;
}

.onboarding-options,
.onboarding-scoring-options {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.onboarding-option {
   padding: 12px 18px;
   border: 2px solid #e3cba9;
   border-radius: 12px;
   background: #ffffff;
   font-size: 15px;
   font-weight: 700;
   color: #3f2f33;
   cursor: pointer;
   transition: all 0.15s ease;
}

.onboarding-option:hover {
   border-color: #bf9a4a;
   background: #fdf6ec;
}

.onboarding-option.selected {
   border-color: #bf9a4a;
   background: #bf9a4a;
   color: #000000;
}

.onboarding-actions {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-top: 18px;
}

.onboarding-actions button,
.onboarding-cta {
   padding: 12px 18px;
   border: 2px solid #bf9a4a;
   border-radius: 12px;
   background: #bf9a4a;
   font-size: 15px;
   font-weight: 700;
   color: #000000;
   cursor: pointer;
   text-decoration: none;
   text-align: center;
   transition: all 0.15s ease;
}

.onboarding-actions button:hover,
.onboarding-cta:hover {
   border-color: #c7001f;
   background: #c7001f;
   color: #ffffff;
}

.onboarding-actions button.secondary {
   border-color: #d4c4a8;
   background: transparent;
   color: #5a4a3a;
}

.onboarding-actions button.secondary:hover {
   border-color: #bf9a4a;
   background: #fdf6ec;
   color: #3f2f33;
}

.onboarding-done h2 {
   color: #4caf50;
}

/* ── Onboarding dark mode ── */
:root[data-theme="dark"] .onboarding-modal {
   background: linear-gradient(155deg, #000000 0%, #080808 100%);
   border-color: #bf9a4a;
}

:root[data-theme="dark"] .onboarding-step h2 {
   color: #bf9a4a;
}

:root[data-theme="dark"] .onboarding-subtitle,
:root[data-theme="dark"] .onboarding-label {
   color: #ffffff;
}

:root[data-theme="dark"] .onboarding-helper {
   color: rgba(255, 255, 255, 0.6);
}

:root[data-theme="dark"] .onboarding-option {
   border-color: #bf9a4a;
   background: #000000;
   color: #ffffff;
}

:root[data-theme="dark"] .onboarding-option:hover {
   background: rgba(191, 154, 74, 0.15);
}

:root[data-theme="dark"] .onboarding-option.selected {
   background: #bf9a4a;
   color: #000000;
}

:root[data-theme="dark"] .onboarding-step-dot {
   border-color: #bf9a4a;
   background: #000000;
   color: #bf9a4a;
}

:root[data-theme="dark"] .onboarding-step-line {
   background: rgba(191, 154, 74, 0.3);
}

:root[data-theme="dark"] .onboarding-actions button.secondary {
   color: #ffffff;
}

:root[data-theme="dark"] .onboarding-done h2 {
   color: #4caf50;
}