:root {
  --brand: #0B5D1E;
  --brand-dark: #084816;
  --brand-light: #1a8a3a;
  --brand-soft: #e7f3eb;
  --sidebar-bg: #ffffff;
  --sidebar-border: #e5e7eb;
  --hover: #f3f4f6;
  --text: #1f2937;
  --muted: #6b7280;
  --shell-bg: #f4f6f8;
  --accent: #2d79f3;
  --accent-soft: #eff6ff;

  /* iOS safe-area insets — used by the fixed bottom nav. */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top:    env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--shell-bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------- */
/*  App shell — sidebar + main                                            */
/* ---------------------------------------------------------------------- */
.app-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.menu-toggle {
  display: none;
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  padding: 6px 10px;
  margin-right: 6px;
  cursor: pointer;
  color: var(--text);
  border-radius: 6px;
}
.menu-toggle:hover { background: var(--hover); }
.sidebar-backdrop { display: none; }
.sidebar-close { display: none; }
.sidebar .brand {
  padding: 18px 16px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--sidebar-border);
}
.sidebar .brand img { width: 36px; height: 36px; object-fit: contain; }
.sidebar .brand .name {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .5px;
  color: var(--brand);
}
.sidebar .brand .sub {
  display: block;
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: .2px;
}

.compose-btn {
  margin: 14px;
  padding: 11px 18px;
  background: var(--brand);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(11,93,30,.18);
  transition: background .15s ease, transform .05s ease;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.compose-btn:hover { background: var(--brand-dark); color: #fff; text-decoration: none; }
.compose-btn:active { transform: translateY(1px); }

.sidebar nav { padding: 4px 8px; flex: 1; overflow-y: auto; }
.sidebar nav a.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 0 18px 18px 0;
  margin: 2px 0;
  color: var(--text);
  font-weight: 500;
}
.sidebar nav a.nav-item:hover { background: var(--hover); text-decoration: none; }
.sidebar nav a.nav-item.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.sidebar nav a.nav-item .ic { width: 18px; text-align: center; opacity: .8; }
.sidebar nav a.nav-item .nav-badge {
  margin-left: auto;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 999px;
  min-width: 20px;
  text-align: center;
}
.sidebar nav a.nav-item.active .nav-badge { background: var(--brand-dark); }
.sidebar nav .section-label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: .8px;
  padding: 14px 12px 6px;
  font-weight: 600;
}

.sidebar .who {
  border-top: 1px solid var(--sidebar-border);
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--muted);
}
.sidebar .who .addr { color: var(--text); font-weight: 600; word-break: break-all; }
.sidebar .who a { font-size: 12px; }

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.topbar {
  background: #fff;
  border-bottom: 1px solid var(--sidebar-border);
  padding: 12px 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar h1 { font-size: 18px; margin: 0; font-weight: 600; }
.topbar .count { color: var(--muted); font-size: 13px; }
.topbar .actions { margin-left: auto; display: flex; gap: 8px; }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--sidebar-border);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.btn-ghost:hover { background: var(--hover); text-decoration: none; }

/* Desktop search pill — sits inside the topbar */
.search-form {
  position: relative;
  flex: 1 1 320px;
  max-width: 420px;
  display: flex;
  align-items: center;
  background: var(--shell-bg);
  border: 1px solid var(--sidebar-border);
  border-radius: 999px;
  padding: 0 14px;
  height: 36px;
  margin-left: 8px;
}
.search-form:focus-within { border-color: var(--accent); background: #fff; }
.search-icon { opacity: .55; font-size: 13px; margin-right: 8px; }
.search-input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 14px;
  color: var(--text);
  height: 100%;
  min-width: 0;
}
.search-input::placeholder { color: var(--muted); }
.search-clear {
  font-size: 18px;
  color: var(--muted);
  text-decoration: none;
  padding: 0 4px;
  line-height: 1;
}
.search-clear:hover { color: var(--text); text-decoration: none; }

.search-summary {
  background: var(--brand-soft);
  color: var(--brand);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 13.5px;
}
.search-summary a { margin-left: 8px; font-weight: 600; }

.content { padding: 18px 22px; flex: 1; min-width: 0; }
.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; font-size: 13.5px; }
.flash.success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.flash.error   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.flash.info    { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

/* ---------------------------------------------------------------------- */
/*  Mail list                                                             */
/* ---------------------------------------------------------------------- */
.mail-list { background: #fff; border: 1px solid var(--sidebar-border); border-radius: 8px; overflow: hidden; }
.mail-list .row {
  display: grid;
  grid-template-columns: 28px 36px 220px 1fr 110px;
  gap: 14px;
  align-items: center;
  padding: 11px 16px;
  border-bottom: 1px solid var(--sidebar-border);
  font-size: 13.5px;
}
.mail-list .row:last-child { border-bottom: 0; }
.mail-list .row:hover { background: #fafafa; }
.mail-list .row .row-link { color: inherit; text-decoration: none; display: contents; }
.mail-list .row.unread { font-weight: 600; }

.mail-list .row-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mail-list .row-check__input { width: 16px; height: 16px; cursor: pointer; }

/* Bulk-action bar above the mail list */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--sidebar-border);
  border-radius: 8px;
}
.bulk-bar .bulk-select-all {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted); cursor: pointer;
  user-select: none;
}
.bulk-bar .bulk-select-all input { width: 16px; height: 16px; cursor: pointer; }
.bulk-bar .bulk-count { font-size: 12.5px; color: var(--muted); margin-right: auto; }
.bulk-bar .bulk-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.bulk-bar .bulk-actions .btn { padding: 6px 12px; font-size: 13px; }
.bulk-bar .bulk-actions .btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Pagination */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0 4px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--sidebar-border);
  border-radius: 8px;
  font-size: 13px;
}
.pager__range { color: var(--text); }
.pager__range strong { font-weight: 700; }
.pager__controls { display: flex; align-items: center; gap: 10px; }
.pager__btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--sidebar-border);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  transition: background .12s ease;
}
.pager__btn:hover { background: var(--hover); text-decoration: none; }
.pager__btn.is-disabled {
  color: var(--muted);
  background: #fafafa;
  cursor: not-allowed;
  pointer-events: none;
  opacity: .65;
}
.pager__status { color: var(--muted); white-space: nowrap; }

@media (max-width: 768px) {
  .pager { justify-content: center; text-align: center; }
}
.mail-list .from { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-list .subj { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-list .date { text-align: right; color: var(--muted); font-size: 12.5px; }
.mail-list .empty { padding: 60px 0; text-align: center; color: var(--muted); }

/* Sender avatar (initial-circle). Colorful but consistent per letter. */
.avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: .3px;
  user-select: none;
}
.mail-list .row.unread .avatar { background: var(--brand); color: #fff; }

/* ---------------------------------------------------------------------- */
/*  Message view                                                          */
/* ---------------------------------------------------------------------- */
.msg-card { background: #fff; border: 1px solid var(--sidebar-border); border-radius: 8px; padding: 22px; }
.msg-card h2 { margin: 0 0 12px; font-size: 18px; }
.msg-meta { color: var(--muted); font-size: 13px; line-height: 1.7; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--sidebar-border); }
.msg-meta strong { color: var(--text); font-weight: 600; }
.msg-body pre { white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 14px; margin: 0; }
.msg-body img { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------------- */
/*  Compose form + generic forms                                          */
/* ---------------------------------------------------------------------- */
.card { background: #fff; border: 1px solid var(--sidebar-border); border-radius: 8px; padding: 22px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; color: var(--text); }
.field .help { color: var(--muted); font-size: 12px; margin-top: 4px; }
.field .err  { color: #b91c1c; font-size: 12.5px; margin-top: 4px; }
.form-control {
  width: 100%;
  padding: 9px 11px;
  font-size: 14px;
  border: 1px solid var(--sidebar-border);
  border-radius: 6px;
  background: #fff;
  outline: none;
  transition: border-color .15s ease;
}
.form-control:focus { border-color: var(--accent); }
textarea.form-control { resize: vertical; min-height: 200px; font-family: inherit; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); color: #fff; text-decoration: none; }
.btn-danger  { background: #dc2626; color: #fff; }
.btn-danger:hover  { background: #b91c1c; color: #fff; text-decoration: none; }
.btn-outline { background: #fff; border: 1px solid var(--sidebar-border); color: var(--text); }
.btn-outline:hover { background: var(--hover); text-decoration: none; }

/* ---------------------------------------------------------------------- */
/*  Admin / Mailbox management                                            */
/* ---------------------------------------------------------------------- */
.admin-grid { display: grid; grid-template-columns: 1fr 360px; gap: 18px; }
@media (max-width: 900px) { .admin-grid { grid-template-columns: 1fr; } }
.mailbox-table { width: 100%; border-collapse: collapse; }
.mailbox-table th, .mailbox-table td { padding: 10px 12px; border-bottom: 1px solid var(--sidebar-border); text-align: left; font-size: 13.5px; }
.mailbox-table th { font-weight: 600; background: #fafafa; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.mailbox-table .pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.pill.system { background: var(--brand-soft); color: var(--brand); }
.pill.user   { background: var(--accent-soft); color: #1e40af; }
.pill.active   { background: #dcfce7; color: #166534; }
.pill.inactive { background: #f3f4f6; color: #6b7280; }

/* Admin: mailbox search bar */
.mailbox-search {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  background: #fff;
  border: 1px solid var(--sidebar-border);
  border-radius: 8px;
  padding: 4px 12px;
}
.mailbox-search .search-icon {
  font-size: 14px;
  color: var(--muted);
  margin-right: 8px;
}
.mailbox-search .search-input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
  padding: 8px 0;
  color: var(--text);
}
.mailbox-search .search-clear {
  color: var(--muted);
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
  padding: 0 8px;
}
.mailbox-search .search-clear:hover { color: var(--text); }

/* Clickable status toggle: form button styled as a slider switch.
   .is-on  → green track, thumb on right (Active)
   .is-off → gray track, thumb on left  (Inactive) */
.toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.toggle-switch__track {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: #d1d5db;
  transition: background .15s ease;
  flex-shrink: 0;
}
.toggle-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: left .15s ease;
}
.toggle-switch.is-on .toggle-switch__track { background: var(--brand); }
.toggle-switch.is-on .toggle-switch__thumb { left: 18px; }
.toggle-switch__label {
  font-size: 12.5px;
  font-weight: 600;
}
.toggle-switch.is-on  .toggle-switch__label { color: var(--brand); }
.toggle-switch.is-off .toggle-switch__label { color: #6b7280; }
.toggle-switch:hover .toggle-switch__track { opacity: .85; }

/* Audit log */
.audit-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--sidebar-border);
  border-radius: 8px;
  padding: 6px 12px;
  margin-bottom: 0;
}
.audit-filter .search-icon { color: var(--muted); font-size: 14px; }
.audit-filter .search-input {
  flex: 1;
  min-width: 200px;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
  padding: 8px 0;
}
.audit-filter__select {
  border: 1px solid var(--sidebar-border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
  background: #fff;
  color: var(--text);
}
.audit-table th, .audit-table td { font-size: 12.5px; }
.audit-action {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: #eef2ff;
  color: #3730a3;
  white-space: nowrap;
}
.audit-action--login_ok       { background: #dcfce7; color: #166534; }
.audit-action--login_fail     { background: #fee2e2; color: #991b1b; }
.audit-action--login_disabled { background: #fef3c7; color: #92400e; }
.audit-action--add            { background: #dcfce7; color: #166534; }
.audit-action--delete         { background: #fee2e2; color: #991b1b; }
.audit-action--passwd         { background: #fef3c7; color: #92400e; }
.audit-action--self_passwd    { background: #fef3c7; color: #92400e; }
.audit-action--enable         { background: #dcfce7; color: #166534; }
.audit-action--disable        { background: #f3f4f6; color: #4b5563; }
.audit-action--send           { background: #e0f2fe; color: #075985; }
.audit-action--msg_delete     { background: #fee2e2; color: #991b1b; }
.audit-action--msg_purge      { background: #fee2e2; color: #991b1b; }
.audit-action--otp_request    { background: #fef3c7; color: #92400e; }
.audit-action--otp_verify_ok  { background: #dcfce7; color: #166534; }
.audit-action--otp_verify_fail { background: #fee2e2; color: #991b1b; }

/* ---------------------------------------------------------------------- */
/*  Footer (developer credit)                                             */
/* ---------------------------------------------------------------------- */
.app-footer {
  padding: 14px 24px calc(14px + var(--safe-bottom));
  border-top: 1px solid var(--sidebar-border);
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  background: #fff;
}
.app-footer a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
  transition: color .12s ease;
}
.app-footer a:hover,
.app-footer a:focus { color: var(--brand-dark); text-decoration: underline; }

/* On the login / forgot / reset pages the footer floats below the centered
   card and uses the page background. */
.app-footer--login {
  background: transparent;
  border-top: 0;
  margin-top: 24px;
}

/* Phones: keep the footer above the fixed bottom nav so it stays readable. */
@media (max-width: 768px) {
  .app-footer { padding-bottom: calc(96px + var(--safe-bottom)); }
  .app-footer--login { padding-bottom: 28px; }
}
.mailbox-table form { display: inline; }

/* ---------------------------------------------------------------------- */
/*  Login page (NIS-styled, floating labels)                              */
/* ---------------------------------------------------------------------- */
body.login-body {
  background: linear-gradient(135deg, #f5f7f6 0%, #e7efe8 100%);
  min-height: 100vh;
  /* 2-row grid: the card occupies the stretching first row (vertically
     centered inside it), the footer pins to the bottom in row 2. Using grid
     instead of plain flex avoids the "card and footer side-by-side" bug a
     flex-row container produces when the footer is a sibling of the card. */
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 24px;
}
body.login-body > .login-card {
  justify-self: center;
  align-self: center;
}
.login-card {
  background: #ffffff;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.18);
  width: 420px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  border-radius: 12px;
}
.login-card .logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
}
.login-card .logo-wrap img { width: 96px; height: auto; }
.login-card .logo-wrap .subtitle {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.login-card .title {
  font-size: 28px;
  font-weight: 800;
  margin: 4px 0 14px;
}
.input-field {
  position: relative;
  width: 100%;
}
.input-field .input {
  margin-top: 15px;
  width: 100%;
  outline: none;
  border-radius: 8px;
  height: 45px;
  border: 1.5px solid #ecedec;
  background: transparent;
  padding-left: 10px;
  font-size: 14px;
}
.input-field .input:focus { border: 1.5px solid #2d79f3; }
.input-field .label {
  position: absolute;
  top: 25px;
  left: 15px;
  color: #ccc;
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 2;
  font-size: 14px;
  background: transparent;
}
.input-field .input:focus ~ .label,
.input-field .input:not(:placeholder-shown) ~ .label,
.input-field .input:valid ~ .label {
  top: 5px;
  left: 5px;
  font-size: 12px;
  color: #2d79f3;
  background-color: #ffffff;
  padding-left: 5px;
  padding-right: 5px;
}
.login-card .forgot { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
.login-card .forgot:hover { color: var(--brand); }
.submit-btn {
  margin-top: 24px;
  width: 100%;
  display: block;
  height: 52px;
  border-radius: 11px;
  border: 0;
  outline: none;
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  background: linear-gradient(180deg, var(--brand-light) 0%, var(--brand) 55%, var(--brand-dark) 100%);
  box-shadow: 0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #000000;
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
  cursor: pointer;
  letter-spacing: .3px;
}
.submit-btn:hover {
  box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px rgba(11,93,30,.35);
}
.login-error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 8px;
  font-size: 13px;
}

/* ---------------------------------------------------------------------- */
/*  Mobile shell components — curved hero + bottom nav                    */
/*  (Hidden on desktop. Made visible only inside the phone media query.)  */
/* ---------------------------------------------------------------------- */
.mhero, .mbottom { display: none; }

/* ---------------------------------------------------------------------- */
/*  Responsive — tablet                                                   */
/* ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .mail-list .row { grid-template-columns: 28px 36px 180px 1fr 90px; gap: 10px; }
  .content { padding: 14px 16px; }
  .topbar { padding: 11px 16px; }
  .admin-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------- */
/*  Responsive — phone                                                    */
/*  Curved hero replaces the topbar; drawer becomes a "More" panel;       */
/*  bottom-nav surfaces primary actions; mail-list rows become cards.     */
/* ---------------------------------------------------------------------- */
@media (max-width: 768px) {
  body { background: #f1f5f1; }

  .app-shell { grid-template-columns: 1fr; }

  /* Hide the desktop topbar on mobile — the hero replaces it. */
  .topbar { display: none; }

  /* Drawer (slides in from the left when "More" is tapped) */
  .menu-toggle { display: none; }
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    width: 280px;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform .22s ease;
    z-index: 1100;
    box-shadow: 2px 0 18px rgba(0,0,0,0);
    padding-top: var(--safe-top);
  }
  body.menu-open .sidebar {
    transform: translateX(0);
    box-shadow: 2px 0 18px rgba(0,0,0,0.18);
  }
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0);
    z-index: 1050;
    pointer-events: none;
    transition: background .22s ease;
  }
  body.menu-open .sidebar-backdrop {
    display: block;
    background: rgba(0,0,0,0.38);
    pointer-events: auto;
  }
  body.menu-open { overflow: hidden; }
  .sidebar-close {
    display: block;
    position: absolute;
    top: 10px; right: 10px;
    background: transparent;
    border: 0;
    font-size: 26px;
    padding: 4px 10px;
    cursor: pointer;
    color: var(--muted);
  }

  /* ----- Curved hero header ----- */
  .mhero {
    display: block;
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, var(--brand-light) 0%, var(--brand) 55%, var(--brand-dark) 100%);
    color: #fff;
    padding: calc(var(--safe-top) + 14px) 22px 64px;
    border-bottom-left-radius: 36px;
    border-bottom-right-radius: 36px;
    box-shadow: 0 10px 24px rgba(11,93,30,0.18);
  }
  /* Soft decorative curve in the top-right corner — echoes the reference. */
  .mhero::before {
    content: "";
    position: absolute;
    top: -40px; right: -40px;
    width: 160px; height: 160px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    pointer-events: none;
  }
  .mhero::after {
    content: "";
    position: absolute;
    top: 60px; right: -90px;
    width: 200px; height: 200px;
    background: rgba(255,255,255,0.06);
    border-radius: 50%;
    pointer-events: none;
  }

  .mhero__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
  }
  .mhero__menu {
    background: rgba(255,255,255,0.18);
    border: 0;
    width: 40px; height: 40px;
    border-radius: 12px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 0;
    cursor: pointer;
  }
  .mhero__menu span {
    display: block;
    width: 18px; height: 2px;
    background: #fff;
    border-radius: 2px;
  }
  .mhero__menu span:nth-child(2) { width: 12px; align-self: flex-start; margin-left: 11px; }
  .mhero__back {
    background: rgba(255,255,255,0.18);
    color: #fff;
    width: 40px; height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    line-height: 1;
    font-weight: 600;
  }
  .mhero__back:hover { text-decoration: none; color: #fff; background: rgba(255,255,255,0.28); }
  .mhero__avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: #fff;
    color: var(--brand);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  }
  .mhero__avatar:hover { text-decoration: none; color: var(--brand); }

  .mhero__body {
    position: relative;
    z-index: 1;
    margin-top: 18px;
    padding-right: 90px; /* keep clear of the decorative circles */
  }
  .mhero__greet {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .2px;
    line-height: 1.15;
  }
  .mhero__sub {
    margin-top: 4px;
    font-size: 13px;
    opacity: .88;
    word-break: break-all;
  }
  .mhero__count {
    margin-top: 4px;
    font-size: 12.5px;
    opacity: .85;
    letter-spacing: .2px;
  }

  /* Page content sits inside a rounded sheet that overlaps the hero. */
  .content {
    background: #f1f5f1;
    padding: 14px 14px calc(96px + var(--safe-bottom));
    margin-top: -36px;
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
    position: relative;
    z-index: 2;
    min-height: calc(100vh - 220px);
  }

  /* On scroll the hero stays — but pages without it (login) shouldn't get padding. */
  body.login-body .content { padding-bottom: 14px; margin-top: 0; }

  /* ----- Mail list becomes a stack of cards (Gmail-style 3-line) ----- */
  .mail-list {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  /* Card wrapper — flex so the checkbox sits left of the clickable card. */
  .mail-list .row {
    background: #fff;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 6px 14px rgba(11,93,30,0.05);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    grid-template-columns: none;
    grid-template-areas: none;
  }
  .mail-list .row .row-check { flex: 0 0 auto; }
  .mail-list .row .row-link {
    flex: 1;
    min-width: 0;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas:
      "ava from date"
      "ava subj subj";
    column-gap: 12px;
    row-gap: 4px;
    align-items: center;
    color: inherit;
  }
  .mail-list .row .avatar {
    grid-area: ava;
    width: 44px; height: 44px;
    font-size: 16px;
    align-self: start;
  }
  .mail-list .row .from {
    grid-area: from;
    min-width: 0;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mail-list .row .date {
    grid-area: date;
    font-size: 12.5px;
    color: var(--muted);
    white-space: nowrap;
    text-align: right;
    align-self: start;
    padding-top: 2px;
  }
  .mail-list .row .subj {
    grid-area: subj;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: .85;
  }
  /* Unread: stronger sender, bold subject, brand-tinted date. */
  .mail-list .row.unread .from { font-weight: 700; }
  .mail-list .row.unread .subj { font-weight: 700; color: var(--text); opacity: 1; }
  .mail-list .row.unread .date { color: var(--brand); font-weight: 600; }

  .mail-list .empty {
    background: #fff;
    border-radius: 16px;
    padding: 60px 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    text-align: center;
    color: var(--muted);
  }

  /* ----- Cards & forms ----- */
  .card, .msg-card {
    border: 0;
    border-radius: 18px;
    padding: 18px 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 20px rgba(11,93,30,0.06);
  }
  .msg-card h2 { font-size: 17px; line-height: 1.3; }
  .msg-meta { font-size: 12.5px; }

  .form-control {
    padding: 12px 14px;
    font-size: 16px; /* prevents iOS auto-zoom on focus */
    border-radius: 12px;
  }
  textarea.form-control { min-height: 160px; }
  .btn, .btn-ghost {
    padding: 11px 18px;
    font-size: 14px;
    border-radius: 12px;
  }
  .btn { width: 100%; justify-content: center; }
  .btn-ghost { width: auto; }

  /* Login card mirrors the hero aesthetic on phones. */
  body.login-body { padding: 0; }
  body.login-body > .login-card { justify-self: stretch; align-self: stretch; }
  .login-card {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    border-radius: 0;
    box-shadow: none;
    padding: calc(var(--safe-top) + 32px) 22px calc(var(--safe-bottom) + 24px);
    justify-content: flex-start;
    gap: 14px;
    background:
      radial-gradient(120% 60% at 50% 0%, rgba(11,93,30,0.10), transparent 60%),
      #ffffff;
  }
  .login-card .logo-wrap { margin-top: 12px; margin-bottom: 4px; }
  .login-card .logo-wrap img { width: 84px; }
  .login-card .title { font-size: 26px; text-align: left; }

  /* Mailbox admin: stack each row's actions vertically. */
  .mailbox-table, .mailbox-table thead, .mailbox-table tbody,
  .mailbox-table tr, .mailbox-table th, .mailbox-table td {
    display: block;
    width: 100%;
  }
  .mailbox-table thead { display: none; }
  .mailbox-table tr {
    background: #fff;
    border-radius: 14px;
    margin-bottom: 10px;
    padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }
  .mailbox-table td { border-bottom: 0; padding: 4px 0; }
  .mailbox-table td form { display: block; margin: 6px 0 0; }
  .mailbox-table input[type="password"] { width: 100% !important; display: block !important; margin-bottom: 6px; }

  /* ----- Bottom navigation ----- */
  .mbottom {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #fff;
    border-top: 1px solid var(--sidebar-border);
    padding: 8px 6px calc(8px + var(--safe-bottom));
    z-index: 900;
    box-shadow: 0 -6px 18px rgba(0,0,0,0.06);
    justify-content: space-around;
    align-items: center;
  }
  .mbottom__item {
    flex: 1;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 10px;
  }
  .mbottom__item svg { width: 22px; height: 22px; fill: currentColor; }
  .mbottom__item.is-active { color: var(--brand); }
  .mbottom__item.is-active svg { fill: var(--brand); }
  .mbottom__item:hover { text-decoration: none; }

  .mbottom__fab {
    flex: 0 0 auto;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(160deg, var(--brand-light) 0%, var(--brand) 70%, var(--brand-dark) 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(11,93,30,0.35);
    margin-top: -28px; /* lift above the bar */
    border: 4px solid #fff;
    text-decoration: none;
  }
  .mbottom__fab:hover { text-decoration: none; color: #fff; }
  .mbottom__fab svg { width: 26px; height: 26px; }

  /* Hide the desktop search bar inside the mobile hero (we render a custom pill). */
  .mhero .search-form { display: none; }

  /* Mobile search pill — frosted-white over the green hero, matches reference. */
  .search-pill {
    position: relative;
    z-index: 1;
    margin-top: 16px;
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.92);
    border-radius: 999px;
    padding: 0 16px;
    height: 44px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  }
  .search-pill__icon { opacity: .55; font-size: 14px; margin-right: 8px; color: var(--brand); }
  .search-pill__input {
    flex: 1;
    border: 0;
    background: transparent;
    outline: none;
    font-size: 15px;
    color: var(--text);
    height: 100%;
    min-width: 0;
  }
  .search-pill__input::placeholder { color: var(--muted); }
  .search-pill__clear {
    font-size: 20px;
    color: var(--muted);
    text-decoration: none;
    padding: 0 6px;
    line-height: 1;
  }
  .search-pill__clear:hover { color: var(--text); text-decoration: none; }

  /* Topbar actions inside the hero (refresh, delete, etc.) */
  .mhero .actions {
    margin-top: 14px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
  }
  .mhero .actions .btn-ghost,
  .mhero .actions .btn {
    background: rgba(255,255,255,0.16);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.28);
    padding: 8px 14px;
    font-size: 13px;
    width: auto;
    border-radius: 999px;
  }
  .mhero .actions .btn-danger {
    background: rgba(220,38,38,0.92);
    border-color: rgba(255,255,255,0.4);
  }
}

/* Tiny phones — tighten further. */
@media (max-width: 380px) {
  .sidebar { width: 84vw; }
  .content { padding: 12px 12px calc(96px + var(--safe-bottom)); }
  .mhero { padding-left: 18px; padding-right: 18px; }
  .mhero__greet { font-size: 21px; }
  .login-card .title { font-size: 22px; }
  .login-card .logo-wrap img { width: 76px; }
}