/* Extracted from jobseeker-dashboard/settings/index.html. */
.del-backdrop[hidden],.del-modal[hidden]{display:none!important}
    .del-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:1199}
    .del-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border-radius:14px;max-width:420px;width:92%;z-index:1200;box-shadow:0 20px 60px rgba(0,0,0,0.25);font-family:'Figtree',system-ui,sans-serif}
    .del-modal__body{padding:24px;display:grid;gap:14px;text-align:center}
    .del-modal__icon{width:48px;height:48px;border-radius:50%;background:rgba(220,38,38,0.08);display:flex;align-items:center;justify-content:center;margin:0 auto}
    .del-modal__title{font-size:1.0625rem;font-weight:700;color:#111827;margin:0}
    .del-modal__desc{font-size:0.875rem;color:#6b7280;margin:0;line-height:1.6}
    .del-modal__input{width:100%;padding:10px 14px;border:1px solid #e5e7eb;border-radius:8px;font-family:inherit;font-size:0.875rem;text-align:center;box-sizing:border-box}
    .del-modal__input:focus{border-color:rgba(220,38,38,0.4);outline:none}
    .del-modal__actions{display:flex;gap:8px;justify-content:center;padding:0 24px 20px}
    .del-modal__btn{padding:8px 18px;border-radius:8px;font-family:inherit;font-size:0.8125rem;font-weight:600;cursor:pointer;border:none}
	    .del-modal__btn--ghost{background:transparent;color:#374151;border:1px solid #d1d5db}
	    .del-modal__btn--danger{background:#dc2626;color:#fff;opacity:0.5;pointer-events:none}
	    .del-modal__btn--danger.is-enabled{opacity:1;pointer-events:auto}

body[data-page="settings"] .settings-section__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

body[data-page="settings"] .settings-section__head > div {
  min-width: 0;
  max-width: 620px;
}

body[data-page="settings"] .settings-section__head > .button {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: flex-start;
  box-shadow: 0 8px 18px rgba(1, 56, 44, 0.08);
}

.settings-action-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.settings-action-card {
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 14px;
  row-gap: 4px;
  align-content: start;
  min-height: 116px;
  padding: 18px 20px;
  border: 1px solid rgba(1, 56, 44, 0.1);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(1, 56, 44, 0.04), 0 8px 20px rgba(1, 56, 44, 0.05);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.settings-action-card:hover {
  transform: translateY(-1px);
  border-color: rgba(5, 150, 105, 0.28);
  box-shadow: 0 1px 2px rgba(1, 56, 44, 0.05), 0 14px 32px rgba(1, 56, 44, 0.10);
}

/* Icon sits in the left column, spanning all 3 rows. (Tickets:
   t1778259837529, t1778259861468 — cards felt unfinished without
   a visual anchor.) */
.settings-action-card__icon {
  grid-row: 1 / span 3;
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(5, 150, 105, 0.10);
  color: #047857;
  flex-shrink: 0;
}

.settings-action-card__eyebrow,
.settings-action-card strong,
.settings-action-card p {
  grid-column: 2;
}

.settings-action-card--support {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.08), rgba(255, 255, 255, 0.98));
  border-color: rgba(5, 150, 105, 0.22);
}
.settings-action-card--support .settings-action-card__icon {
  background: rgba(5, 150, 105, 0.16);
}

.settings-action-card__eyebrow {
  color: #047857;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.settings-action-card strong {
  color: #01382c;
  font-size: 0.95rem;
}

.settings-action-card p {
  margin: 0;
  color: rgba(1, 56, 44, 0.62);
  font-size: 0.84rem;
  line-height: 1.5;
  max-width: 56ch;
}

@media (max-width: 720px) {
  body[data-page="settings"] .settings-section__head {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-page="settings"] .settings-section__head > .button {
    align-self: flex-end;
    margin-left: 0;
  }
}