* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: #f4f5f7;
  color: #111827;
}

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at top left, rgba(97, 64, 255, 0.12), transparent 30%),
    linear-gradient(135deg, #f8fafc, #eef2ff);
}

.login-card {
  width: 100%;
  max-width: 440px;
  background: #ffffff;
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 20px 55px rgba(15, 23, 42, 0.12);
  border: 1px solid #e5e7eb;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #4f46e5;
  color: #fff;
  font-weight: 700;
}

h1 {
  font-size: 24px;
  margin: 0;
  line-height: 1.2;
}

.subtitle {
  color: #6b7280;
  margin: 6px 0 0;
  font-size: 14px;
}

label {
  display: block;
  margin: 16px 0 7px;
  font-weight: 700;
  font-size: 14px;
}

input {
  width: 100%;
  padding: 13px 14px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  font-size: 16px;
}

input:focus {
  outline: 2px solid #c7d2fe;
  border-color: #6366f1;
}

button {
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 13px 16px;
  margin-top: 22px;
  background: #4f46e5;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}

button.secondary {
  background: #111827;
}

button.danger {
  background: #b91c1c;
}

button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.message {
  margin-top: 16px;
  padding: 12px;
  border-radius: 10px;
  display: none;
  font-size: 14px;
}

.message.error {
  display: block;
  background: #fee2e2;
  color: #991b1b;
}

.message.success {
  display: block;
  background: #dcfce7;
  color: #166534;
}

.dashboard {
  min-height: 100vh;
}

.topbar {
  background: #111827;
  color: #fff;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar h1 {
  font-size: 20px;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 18px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.card {
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.card .number {
  font-size: 32px;
  font-weight: 800;
  margin-top: 8px;
}

.card .label {
  color: #6b7280;
  font-size: 14px;
}

.panel {
  background: #fff;
  border-radius: 14px;
  padding: 22px;
  margin-top: 20px;
  border: 1px solid #e5e7eb;
}

.row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.row button {
  width: auto;
}

@media (max-width: 760px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
}


.nav-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.nav-links a {
  color: #ffffff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.14);
  padding: 9px 12px;
  border-radius: 9px;
  font-weight: 700;
  font-size: 14px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 14px;
}

.form-grid .full {
  grid-column: 1 / -1;
}

select,
textarea {
  width: 100%;
  padding: 13px 14px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  font-size: 16px;
  font-family: inherit;
  background: #ffffff;
}

textarea {
  min-height: 84px;
  resize: vertical;
}

.toolbar {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.toolbar label {
  margin-top: 0;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th,
td {
  padding: 11px 9px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: top;
}

th {
  background: #f9fafb;
  font-weight: 800;
}

.status-badge {
  display: inline-block;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.status-pending {
  background: #fef3c7;
  color: #92400e;
}

.status-verified {
  background: #dcfce7;
  color: #166534;
}

.status-not_found {
  background: #fee2e2;
  color: #991b1b;
}

.status-needs_review {
  background: #e0e7ff;
  color: #3730a3;
}

.status-voided {
  background: #e5e7eb;
  color: #374151;
}

.inline-actions {
  display: flex;
  gap: 8px;
  min-width: 260px;
}

.inline-actions select,
.inline-actions input {
  font-size: 14px;
  padding: 8px;
}

.inline-actions button {
  margin-top: 0;
  padding: 8px 10px;
  font-size: 13px;
  width: auto;
}

.btn-small {
  margin-top: 0;
  padding: 8px 10px;
  font-size: 13px;
  width: auto;
}

@media (max-width: 760px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .toolbar {
    align-items: stretch;
  }
}

.status-registered {
  background: #e0e7ff;
  color: #3730a3;
}

.status-paid {
  background: #dcfce7;
  color: #166534;
}


.report-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.report-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 18px;
}

.report-card .label {
  color: #6b7280;
  font-size: 14px;
}

.report-card .amount {
  font-size: 26px;
  font-weight: 900;
  margin-top: 8px;
}

.report-card.positive .amount {
  color: #166534;
}

.report-card.negative .amount {
  color: #991b1b;
}

.report-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 860px) {
  .report-summary {
    grid-template-columns: 1fr 1fr;
  }

  .report-grid {
    grid-template-columns: 1fr;
  }
}


/* v14 professional UI improvements */
.topbar {
  gap: 18px;
  flex-wrap: wrap;
}

.topbar > div:first-child {
  min-width: 260px;
}

.topbar h1 {
  letter-spacing: 0.2px;
  margin-bottom: 4px;
}

.nav-links {
  align-items: center;
}

.nav-links a {
  color: #f9fafb !important;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-decoration: none !important;
  transition: 0.15s ease;
}

.nav-links a:hover {
  background: rgba(255, 255, 255, 0.24);
}

.nav-links a.active {
  background: #4f46e5;
  color: #ffffff !important;
  border-color: #818cf8;
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35);
}

.home-hero {
  background: linear-gradient(135deg, #ffffff, #eef2ff);
  border: 1px solid #e5e7eb;
}

.home-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.action-card {
  display: block;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #111827;
  border-radius: 14px;
  padding: 18px;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
  transition: 0.15s ease;
}

.action-card:hover {
  transform: translateY(-2px);
  border-color: #a5b4fc;
}

.action-card strong {
  display: block;
  font-size: 16px;
  margin-bottom: 6px;
}

.action-card span {
  display: block;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.35;
}

.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.profile-field {
  padding: 14px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.profile-field .label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.profile-field .value {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 700;
}

.export-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(210px, 1fr));
  gap: 16px;
}

.export-box {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 16px;
}

.export-box h3 {
  margin-top: 0;
  margin-bottom: 8px;
}

.export-box p {
  margin-top: 0;
  color: #6b7280;
  font-size: 13px;
  min-height: 34px;
}

.export-box button {
  margin-top: 12px;
}

.report-summary {
  align-items: stretch;
}

.report-card {
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.compact-summary {
  display: grid;
  gap: 10px;
}

.compact-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #e5e7eb;
}

.compact-summary-row:last-child {
  border-bottom: 0;
}

.compact-summary-row strong {
  font-size: 16px;
}

@media (max-width: 920px) {
  .home-actions,
  .export-grid {
    grid-template-columns: 1fr 1fr;
  }

  .profile-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .home-actions,
  .export-grid,
  .report-summary {
    grid-template-columns: 1fr;
  }

  .topbar {
    padding: 18px;
  }

  .nav-links a {
    padding: 8px 10px;
    font-size: 13px;
  }
}

/* v15 navbar orange button fix */
.topbar {
  background: linear-gradient(180deg, #0f172a 0%, #111827 100%) !important;
  align-items: flex-start;
}

.topbar .row {
  align-items: flex-start;
}

.nav-links {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
  justify-content: flex-end;
}

.nav-links a.nav-button,
.nav-links a,
.nav-links a:visited,
.nav-links a:link,
.nav-links a:hover,
.nav-links a:active {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 118px;
  padding: 12px 18px !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  letter-spacing: 0.01em;
  color: #fff7ed !important;
  background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%) !important;
  border: 1px solid #fdba74 !important;
  box-shadow: 0 10px 22px rgba(234, 88, 12, 0.28) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease !important;
}

.nav-links a.nav-button:hover,
.nav-links a:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 14px 26px rgba(234, 88, 12, 0.34) !important;
}

.nav-links a.nav-button.active,
.nav-links a.active,
.nav-links a.nav-button[aria-current="page"] {
  background: linear-gradient(180deg, #c2410c 0%, #9a3412 100%) !important;
  color: #ffffff !important;
  border: 2px solid #ffedd5 !important;
  box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.32), 0 14px 26px rgba(154, 52, 18, 0.38) !important;
}

@media (max-width: 900px) {
  .topbar {
    gap: 14px;
  }

  .topbar .row {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .nav-links {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .nav-links {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .nav-links a.nav-button,
  .nav-links a {
    min-width: 0;
    width: 100%;
    font-size: 15px !important;
    min-height: 46px;
    padding: 11px 14px !important;
  }
}


/* v16 premium header with church logo */
.premium-header {
  padding: 22px 30px !important;
  background:
    linear-gradient(90deg, rgba(15, 23, 42, 0.98), rgba(17, 24, 39, 0.98)),
    radial-gradient(circle at top left, rgba(251, 146, 60, 0.20), transparent 34%) !important;
  border-bottom: 1px solid rgba(253, 186, 116, 0.20);
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
}

.brand-area {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 320px;
}

.church-logo {
  width: 76px;
  height: 76px;
  object-fit: contain;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  padding: 3px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.25), 0 0 0 2px rgba(253, 186, 116, 0.35);
  flex: 0 0 auto;
}

.brand-copy h1 {
  margin: 0;
  font-size: 24px !important;
  color: #ffffff;
  letter-spacing: 0.01em;
}

.church-name {
  margin-top: 4px;
  color: #fed7aa;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.user-line {
  margin-top: 6px;
  color: #e5e7eb;
  font-size: 14px;
  line-height: 1.25;
}

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

.header-actions .nav-links {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  justify-content: flex-end;
  margin-right: 4px;
}

.header-actions .nav-links a.nav-button,
.header-actions .nav-links a,
.header-actions .nav-links a:visited,
.header-actions .nav-links a:link {
  min-height: 48px !important;
  min-width: 112px !important;
  padding: 13px 18px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #f97316 0%, #ea580c 100%) !important;
  border: 1px solid rgba(255, 237, 213, 0.65) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  box-shadow: 0 12px 22px rgba(234, 88, 12, 0.30) !important;
}

.header-actions .nav-links a.nav-button.active,
.header-actions .nav-links a.active {
  background: linear-gradient(180deg, #fff7ed 0%, #fed7aa 100%) !important;
  color: #9a3412 !important;
  border: 2px solid #fb923c !important;
  box-shadow: 0 0 0 4px rgba(251, 146, 60, 0.22), 0 14px 28px rgba(251, 146, 60, 0.25) !important;
}

.notification-button,
.user-chip,
.logout-button {
  min-height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.20);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 900;
}

.notification-button {
  position: relative;
  width: 52px;
  padding: 0;
  margin: 0;
  background: rgba(255,255,255,0.10);
  color: #ffffff;
  box-shadow: none;
}

.notification-dot {
  position: absolute;
  top: 11px;
  right: 12px;
  width: 9px;
  height: 9px;
  background: #ef4444;
  border: 2px solid #111827;
  border-radius: 50%;
}

.user-chip {
  gap: 9px;
  padding: 6px 14px 6px 8px;
  background: rgba(255,255,255,0.10);
  color: #ffffff !important;
}

.avatar-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(180deg, #fb923c, #c2410c);
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
}

.logout-button {
  width: auto !important;
  margin: 0 !important;
  padding: 0 20px !important;
  background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%) !important;
  color: #ffffff !important;
  border-color: rgba(254, 202, 202, 0.55) !important;
  box-shadow: 0 12px 22px rgba(185, 28, 28, 0.28) !important;
}

.login-logo {
  width: 70px;
  height: 70px;
  object-fit: contain;
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
  flex: 0 0 auto;
}

@media (max-width: 1120px) {
  .premium-header {
    align-items: flex-start !important;
    flex-direction: column;
  }

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

  .header-actions .nav-links {
    justify-content: flex-start;
  }
}

@media (max-width: 700px) {
  .premium-header {
    padding: 18px !important;
  }

  .brand-area {
    min-width: 0;
    width: 100%;
    align-items: flex-start;
  }

  .church-logo {
    width: 62px;
    height: 62px;
  }

  .brand-copy h1 {
    font-size: 20px !important;
  }

  .church-name {
    font-size: 12px;
  }

  .header-actions .nav-links {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .header-actions .nav-links a.nav-button,
  .header-actions .nav-links a {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    font-size: 14px !important;
  }

  .notification-button,
  .user-chip,
  .logout-button {
    min-height: 46px;
  }

  .logout-button {
    flex: 1;
  }
}


/* v17 verified header correction */
.premium-header{background:linear-gradient(180deg,#0f172a 0%,#111827 100%)!important;color:#fff!important;padding:18px 28px!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:16px!important;border-bottom:1px solid rgba(253,186,116,.22)!important;}
.brand-area{display:flex!important;align-items:center!important;gap:16px!important;width:100%!important;min-width:0!important;}
.church-logo{width:76px!important;height:76px!important;max-width:76px!important;max-height:76px!important;object-fit:contain!important;border-radius:50%!important;background:rgba(255,255,255,.07)!important;padding:3px!important;box-shadow:0 10px 26px rgba(0,0,0,.25),0 0 0 2px rgba(253,186,116,.32)!important;flex:0 0 76px!important;display:block!important;}
.brand-copy{min-width:0!important;}.brand-copy h1{margin:0!important;font-size:25px!important;line-height:1.15!important;color:#fff!important;letter-spacing:.01em!important;}.church-name{margin-top:4px!important;color:#fed7aa!important;font-size:13px!important;font-weight:800!important;line-height:1.25!important;}.user-line{margin-top:6px!important;color:#e5e7eb!important;font-size:14px!important;line-height:1.25!important;}.header-actions{display:grid!important;grid-template-columns:1fr auto auto auto!important;align-items:center!important;gap:12px!important;width:100%!important;}.header-actions .nav-links{display:flex!important;flex-wrap:wrap!important;justify-content:flex-start!important;align-items:center!important;gap:10px!important;margin:0!important;}.header-actions .nav-links a.nav-button,.header-actions .nav-links a,.header-actions .nav-links a:visited,.header-actions .nav-links a:link,.header-actions .nav-links a:hover,.header-actions .nav-links a:active{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:46px!important;min-width:104px!important;padding:12px 16px!important;border-radius:999px!important;text-decoration:none!important;font-size:15px!important;font-weight:900!important;line-height:1!important;color:#fff!important;background:linear-gradient(180deg,#fb923c 0%,#ea580c 100%)!important;border:1px solid rgba(255,237,213,.70)!important;box-shadow:0 10px 20px rgba(234,88,12,.28)!important;}.header-actions .nav-links a.nav-button.active,.header-actions .nav-links a.active{background:linear-gradient(180deg,#fff7ed 0%,#fed7aa 100%)!important;color:#9a3412!important;border:2px solid #fb923c!important;box-shadow:0 0 0 4px rgba(251,146,60,.22),0 12px 24px rgba(251,146,60,.24)!important;}.notification-button,.user-chip,.logout-button{min-height:46px!important;border-radius:999px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;text-decoration:none!important;font-weight:900!important;white-space:nowrap!important;}.notification-button{position:relative!important;width:50px!important;padding:0!important;margin:0!important;background:rgba(255,255,255,.10)!important;color:#fff!important;border:1px solid rgba(255,255,255,.22)!important;box-shadow:none!important;}.notification-dot{position:absolute!important;top:10px!important;right:11px!important;width:9px!important;height:9px!important;background:#ef4444!important;border:2px solid #111827!important;border-radius:50%!important;}.user-chip{gap:8px!important;padding:6px 14px 6px 8px!important;background:rgba(255,255,255,.10)!important;color:#fff!important;border:1px solid rgba(255,255,255,.22)!important;}.avatar-circle{width:32px!important;height:32px!important;border-radius:50%!important;display:inline-grid!important;place-items:center!important;background:linear-gradient(180deg,#fb923c,#c2410c)!important;color:#fff!important;font-size:13px!important;font-weight:900!important;}.logout-button{width:auto!important;margin:0!important;padding:0 20px!important;background:linear-gradient(180deg,#dc2626 0%,#991b1b 100%)!important;color:#fff!important;border:1px solid rgba(254,202,202,.55)!important;box-shadow:0 10px 20px rgba(185,28,28,.26)!important;}.login-logo{width:74px!important;height:74px!important;max-width:74px!important;max-height:74px!important;object-fit:contain!important;border-radius:50%!important;flex:0 0 74px!important;display:block!important;}@media(max-width:900px){.premium-header{padding:16px 22px!important}.brand-copy h1{font-size:22px!important}.header-actions{grid-template-columns:1fr!important}.notification-button,.user-chip,.logout-button{justify-self:start!important}.header-actions .nav-links{width:100%!important}.header-actions .nav-links a.nav-button,.header-actions .nav-links a{min-width:112px!important}}@media(max-width:620px){.brand-area{align-items:flex-start!important}.church-logo{width:62px!important;height:62px!important;max-width:62px!important;max-height:62px!important;flex-basis:62px!important}.brand-copy h1{font-size:19px!important}.church-name{font-size:12px!important}.header-actions .nav-links{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important}.header-actions .nav-links a.nav-button,.header-actions .nav-links a{width:100%!important;min-width:0!important;font-size:14px!important}.logout-button{width:100%!important}}

/* v17 final exact nav widths */

.header-actions .nav-links a.nav-button,.header-actions .nav-links a,.header-actions .nav-links a:visited,.header-actions .nav-links a:link,.header-actions .nav-links a:hover,.header-actions .nav-links a:active{width:112px!important;min-width:112px!important;max-width:112px!important;padding-left:10px!important;padding-right:10px!important;}
@media(max-width:900px){.header-actions{grid-template-columns:1fr!important}.header-actions .nav-links{display:flex!important;width:100%!important}.header-actions .nav-links a.nav-button,.header-actions .nav-links a{width:112px!important;min-width:112px!important;max-width:112px!important}}
@media(max-width:620px){.header-actions .nav-links a.nav-button,.header-actions .nav-links a{width:100%!important;min-width:0!important;max-width:none!important}}



/* v18 clean header + Configuración profile photo + income form alignment */
.header-actions {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
}

.notification-button,
.user-chip {
  display: none !important;
}

.header-actions .nav-links {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  margin: 0 !important;
}

.header-actions .nav-links a.nav-button,
.header-actions .nav-links a,
.header-actions .nav-links a:visited,
.header-actions .nav-links a:link,
.header-actions .nav-links a:hover,
.header-actions .nav-links a:active {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
  min-height: 48px !important;
  padding: 13px 12px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%) !important;
  border: 1px solid rgba(255, 237, 213, 0.75) !important;
  box-shadow: 0 10px 22px rgba(234, 88, 12, 0.30) !important;
}

.header-actions .nav-links a.nav-button.active,
.header-actions .nav-links a.active {
  background: linear-gradient(180deg, #fff7ed 0%, #fed7aa 100%) !important;
  color: #9a3412 !important;
  border: 2px solid #fb923c !important;
  box-shadow: 0 0 0 4px rgba(251, 146, 60, 0.22), 0 12px 24px rgba(251, 146, 60, 0.24) !important;
}

.logout-button {
  justify-self: end !important;
  min-height: 48px !important;
  width: auto !important;
  min-width: 170px !important;
  margin: 0 !important;
  padding: 0 24px !important;
  border-radius: 999px !important;
}

#incomeForm .form-grid,
.income-form-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: start !important;
  column-gap: 20px !important;
  row-gap: 18px !important;
}

#incomeForm .form-grid > div,
.income-form-grid > div {
  min-width: 0 !important;
}

#incomeForm input,
#incomeForm select,
#incomeForm textarea {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 54px !important;
  display: block !important;
}

#incomeForm textarea {
  min-height: 118px !important;
}

#incomeForm .full,
.income-form-grid .full {
  grid-column: 1 / -1 !important;
}

.profile-photo-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: center;
  padding: 18px;
  background: linear-gradient(135deg, #fff7ed, #ffffff);
  border: 1px solid #fed7aa;
  border-radius: 16px;
  margin-bottom: 20px;
}

.profile-photo-preview {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #fb923c, #c2410c);
  color: #ffffff;
  font-size: 28px;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(234, 88, 12, 0.22);
  border: 3px solid #ffffff;
}

.profile-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.profile-photo-actions h3 {
  margin: 0 0 6px;
  font-size: 20px;
}

.profile-photo-actions p {
  margin: 0 0 12px;
  color: #6b7280;
}

.profile-photo-actions input[type="file"] {
  padding: 12px;
  background: #ffffff;
}

.photo-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.photo-buttons button {
  width: auto !important;
  margin-top: 0 !important;
}

@media (max-width: 900px) {
  .header-actions {
    grid-template-columns: 1fr !important;
  }

  .logout-button {
    justify-self: start !important;
  }

  #incomeForm .form-grid,
  .income-form-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 620px) {
  .header-actions .nav-links {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
  }

  .header-actions .nav-links a.nav-button,
  .header-actions .nav-links a {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .logout-button {
    width: 100% !important;
    min-width: 0 !important;
  }

  #incomeForm .form-grid,
  .income-form-grid {
    grid-template-columns: 1fr !important;
  }

  .profile-photo-card {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }

  .photo-buttons {
    justify-content: center;
  }
}