:root {
  --mh-navy: #12334a;
  --mh-teal: #087f86;
  --mh-teal-dark: #07656b;
  --mh-canvas: #edf3f6;
  --mh-sidebar: #f3f8fa;
  --mh-border: #d6e1e7;
  --mh-selected: #e6f3f5;
  --mh-text: #172b3a;
  --mh-muted: #617581;
}

.mailhub-app { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0, 1fr); background: var(--mh-canvas); color: var(--mh-text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; }
.mailhub-sidebar { min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--mh-border); background: var(--mh-sidebar); }
.mailhub-brand { min-height: var(--app-bar-height); display: flex; align-items: center; gap: 12px; padding: 12px 22px; background: var(--mh-navy); color: #fff; font-size: 1.48rem; font-weight: 780; }
.mailhub-brand__icon { width: 34px; height: 34px; display: inline-grid; place-items: center; }
.mailhub-brand__icon svg { width: 32px; }
.mailhub-compose-button { min-height: 52px; margin: 24px 18px 18px; border: 0; border-radius: 10px; background: var(--mh-teal); color: #fff; font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; }
.mailhub-compose-button:hover, .mailhub-compose-button:focus-visible { background: var(--mh-teal-dark); }
.mailhub-compose-note { margin: 20px 18px 18px; padding: 12px 14px; border-left: 4px solid var(--mh-teal); background: #e6f3f5; color: var(--mh-text); font-size: .84rem; line-height: 1.45; }
.mailhub-folders { display: grid; gap: 5px; padding: 0 12px; }
.mailhub-folders a { min-height: 50px; display: grid; grid-template-columns: 27px 1fr auto; gap: 10px; align-items: center; padding: 10px 13px; border-radius: 9px; color: var(--mh-text); text-decoration: none; font-size: .98rem; }
.mailhub-folders a:hover, .mailhub-folders a:focus-visible { background: #e7f0f3; }
.mailhub-folders a.is-active { background: #dcecef; color: #075f66; font-weight: 750; }
.mailhub-folders a strong { min-width: 26px; padding: 3px 7px; border-radius: 12px; background: var(--mh-teal); color: #fff; text-align: center; font-size: .76rem; }
.mailhub-sidebar__footer { margin-top: auto; padding: 18px 20px 88px; border-top: 1px solid var(--mh-border); color: var(--mh-muted); font-size: .8rem; line-height: 1.45; }
.mailhub-sidebar__footer p { margin: 4px 0; }
.mailhub-main { min-width: 0; display: grid; grid-template-rows: auto 1fr; }
.mailhub-toolbar { min-height: var(--app-bar-height); display: flex; align-items: center; gap: 14px; padding: 10px 22px; border-bottom: 1px solid var(--mh-border); background: #fff; }
.mailhub-search { width: min(460px, 48vw); display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid #c9d7df; border-radius: 10px; background: #f8fbfc; }
.mailhub-search svg { width: 22px; flex: 0 0 22px; color: var(--mh-muted); }
.mailhub-search input { width: 100%; min-height: 46px; padding: 0; border: 0; background: transparent; color: var(--mh-text); font: inherit; font-size: .95rem; }
.mailhub-search input:focus { outline: 0; }
.mailhub-search:focus-within { border-color: var(--mh-teal); box-shadow: 0 0 0 3px rgba(8, 127, 134, .12); }
.mailhub-toolbar__action { min-height: 42px; display: inline-flex; align-items: center; margin-left: auto; padding: 8px 13px; border: 0; border-radius: 8px; background: transparent; color: var(--mh-navy); text-decoration: none; font: inherit; font-weight: 650; cursor: pointer; }
.mailhub-toolbar form { margin: 0; }
.mailhub-toolbar form .mailhub-toolbar__action { margin-left: 0; }
.mailhub-toolbar__action:hover, .mailhub-toolbar__action:focus-visible { background: #edf4f6; }
.mailhub-toolbar__action--danger { color: #a32738; }
.mailhub-mobile-menu, .mailhub-mobile-back { display: none; }
.mailhub-toast { position: fixed; top: 88px; left: 50%; z-index: 40; margin: 0; padding: 10px 18px; transform: translateX(-50%); border-radius: 8px; background: #176c51; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.mailhub-toast--error { background: #a32738; }
.mailhub-workspace { min-height: 0; display: grid; grid-template-columns: minmax(330px, 420px) minmax(0, 1fr); }
.mailhub-list-pane { min-width: 0; overflow: auto; border-right: 1px solid var(--mh-border); background: #fff; }
.mailhub-list-heading { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--mh-border); }
.mailhub-list-heading h1 { margin: 0; color: var(--mh-text); font-family: inherit; font-size: 1.18rem; }
.mailhub-list-heading span { color: var(--mh-muted); font-size: .82rem; }
.mailhub-message-list { margin: 0; padding: 0; list-style: none; }
.mailhub-message-row { position: relative; border-bottom: 1px solid #e6edf1; background: #fff; }
.mailhub-message-row[hidden] { display: none; }
.mailhub-message-row a { min-height: 126px; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto; column-gap: 10px; row-gap: 3px; padding: 16px 18px 50px; color: inherit; text-decoration: none; }
.mailhub-message-row:hover { background: #f7fafb; }
.mailhub-message-row.is-selected { background: var(--mh-selected); box-shadow: inset 4px 0 0 var(--mh-teal); }
.mailhub-message-row__status { grid-column: 1; grid-row: 1; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; }
.mailhub-message-row.is-unread .mailhub-message-row__status { background: var(--mh-teal); }
.mailhub-message-row__sender { grid-column: 2; grid-row: 1; min-width: 0; overflow: hidden; color: var(--mh-text); font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.mailhub-message-row__time { grid-column: 3; grid-row: 1; color: var(--mh-muted); font-size: .76rem; white-space: nowrap; }
.mailhub-message-row__address { grid-column: 2 / 4; grid-row: 2; min-width: 0; overflow: hidden; color: var(--mh-muted); font-size: .77rem; text-overflow: ellipsis; white-space: nowrap; }
.mailhub-message-row__subject { grid-column: 2 / 3; grid-row: 3; min-width: 0; overflow: hidden; margin-top: 5px; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.mailhub-message-row.is-unread .mailhub-message-row__subject { color: #073e54; }
.mailhub-message-row__attachment { grid-column: 3; grid-row: 3; }
.mailhub-message-row__preview { grid-column: 2 / 4; grid-row: 4; min-width: 0; overflow: hidden; color: var(--mh-muted); font-size: .82rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.mailhub-message-row__delete-form { position: absolute; right: 14px; bottom: 10px; z-index: 2; margin: 0; }
.mailhub-message-row__delete { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #a32738; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; }
.mailhub-message-row__delete svg { width: 16px; height: 16px; }
.mailhub-message-row__delete:hover, .mailhub-message-row__delete:focus-visible { border-color: #e6b7bd; background: #fff1f2; outline: 0; }
.mailhub-empty { min-height: 330px; display: grid; place-content: center; justify-items: center; padding: 30px; color: var(--mh-muted); text-align: center; }
.mailhub-empty > span { font-size: 2.4rem; }
.mailhub-reading-pane { min-width: 0; overflow: auto; background: #fff; }
.mailhub-reading-pane--empty { display: grid; place-items: center; background: #f8fbfc; color: var(--mh-muted); text-align: center; }
.mailhub-reading-pane--empty > div { max-width: 430px; padding: 36px; }
.mailhub-reading-pane--empty span { font-size: 3rem; color: #9bb1bd; }
.mailhub-reading-pane--empty h2 { color: var(--mh-text); font-family: inherit; font-size: 1.25rem; }
.mailhub-message-header { padding: 28px 32px 22px; border-bottom: 1px solid var(--mh-border); }
.mailhub-message-header h1 { margin: 12px 0 22px; color: var(--mh-text); font-family: inherit; font-size: 1.42rem; line-height: 1.3; }
.mailhub-external-label { display: inline-flex; width: auto; padding: 5px 8px 5px 11px; border: 1px solid #d89d26; border-radius: 6px; background: #fff8e7; color: #7b5310; font-size: .8rem; font-weight: 700; }
.mailhub-external-label .info-btn { border-color: #946612; color: #7b5310; }
.mailhub-sender { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.mailhub-sender > .mailhub-sender__avatar { width: 46px; height: 46px; display: grid; place-items: center; margin: 0; border-radius: 50%; background: #dfecef; color: #315665; font-size: 1rem; font-weight: 800; line-height: 1; }
.mailhub-sender > div strong, .mailhub-sender > div span { display: block; }
.mailhub-sender > div span { margin-top: 2px; color: var(--mh-muted); font-size: .86rem; overflow-wrap: anywhere; }
.mailhub-sender time { color: var(--mh-muted); font-size: .8rem; }
.mailhub-message-body { max-width: 820px; padding: 30px 34px 110px; color: #263b49; font-size: 1rem; line-height: 1.68; }
.mailhub-message-body table { max-width: 100% !important; }
.mailhub-message-body img { max-width: 100%; height: auto; }
.mailhub-attachment { display: flex; gap: 14px; align-items: center; margin: 0 34px 110px; padding: 16px; border: 1px solid var(--mh-border); border-radius: 8px; }
.mailhub-thread { display: grid; gap: 16px; padding: 26px 32px; }
.mailhub-thread__message { padding: 18px 20px; border: 1px solid var(--mh-border); border-radius: 10px; background: #f8fbfc; }
.mailhub-thread__message.is-mine { margin-left: 12%; background: #eaf6f6; }
.mailhub-thread__message header { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; margin-bottom: 10px; }
.mailhub-thread__message header span { grid-column: 1; color: var(--mh-muted); font-size: .8rem; }
.mailhub-thread__message header time { grid-column: 2; grid-row: 1 / 3; color: var(--mh-muted); font-size: .78rem; }
.mailhub-reply { margin: 0 32px 110px; padding-top: 20px; border-top: 1px solid var(--mh-border); }
.mailhub-reply label { display: block; margin-bottom: 6px; font-weight: 700; }
.mailhub-reply textarea { width: 100%; margin-bottom: 12px; }
.mailhub-compose-dialog { position: fixed; inset: 0; z-index: 850; display: grid; place-items: center; padding: 24px; }
.mailhub-compose-dialog[hidden] { display: none; }
.mailhub-compose-dialog__backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(9, 27, 40, .62); }
.mailhub-compose-dialog__panel { position: relative; width: min(650px, 100%); max-height: calc(100vh - 48px); overflow: auto; border-radius: 12px; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.mailhub-compose-dialog__panel > header { min-height: 58px; display: flex; align-items: center; padding: 10px 18px 10px 24px; background: var(--mh-navy); color: #fff; }
.mailhub-compose-dialog__panel > header h2 { margin: 0; color: #fff; font-family: inherit; font-size: 1.08rem; }
.mailhub-compose-dialog__panel > header button { margin-left: auto; width: 38px; height: 38px; border: 0; background: transparent; color: #fff; font-size: 1.5rem; cursor: pointer; }
.mailhub-compose-dialog__panel form { padding: 24px; }
.mailhub-compose-dialog__actions { display: flex; gap: 10px; }
.mailhub-compose-is-open { overflow: hidden; }

.mailhub-login { min-height: 100vh; display: grid; grid-template-columns: minmax(280px, .85fr) 1.15fr; background: #eef4f6; color: var(--mh-text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; }
.mailhub-login__brand { display: grid; place-content: center; padding: 48px; background: var(--mh-navy); color: #fff; }
.mailhub-login__brand .mailhub-brand { padding: 0; background: transparent; font-size: 2rem; }
.mailhub-login__brand p { max-width: 34ch; color: #d4e4eb; font-size: 1.05rem; line-height: 1.6; }
.mailhub-login__main { display: grid; place-items: center; padding: 48px 24px 100px; }
.mailhub-login__card { width: min(440px, 100%); padding: 36px; border: 1px solid var(--mh-border); border-radius: 14px; background: #fff; box-shadow: 0 12px 36px rgba(31, 64, 79, .13); }
.mailhub-login__card h1 { margin: 0 0 8px; color: var(--mh-text); font-family: inherit; font-size: 1.65rem; }
.mailhub-login__card > p { margin: 0 0 24px; color: var(--mh-muted); }
.mailhub-login__card label { color: var(--mh-text); }
.mailhub-login__card input { min-height: 48px; }
.mailhub-login__card .button { width: 100%; min-height: 48px; background: var(--mh-teal); }
.mailhub-login__card .button:hover { background: var(--mh-teal-dark); }
.mailhub-login__success { text-align: center; }
.mailhub-login__success > span { width: 62px; height: 62px; display: grid; place-items: center; margin: 0 auto 18px; border-radius: 50%; background: #e2f3ee; color: #176c51; font-size: 1.8rem; }
.mailhub-login__secondary { margin-top: 14px; text-align: center; }
.mailhub-login__secondary button { border: 0; background: transparent; color: var(--mh-muted); text-decoration: underline; cursor: pointer; }

@media (max-width: 980px) {
  .mailhub-app { grid-template-columns: 1fr; }
  .mailhub-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 500; width: min(310px, 88vw); transform: translateX(-105%); box-shadow: 12px 0 36px rgba(0,0,0,.24); transition: transform .18s ease; }
  .mailhub-sidebar.is-open { transform: translateX(0); }
  .mailhub-mobile-menu { width: 44px; height: 44px; display: inline-grid; place-items: center; border: 1px solid var(--mh-border); border-radius: 8px; background: #fff; color: var(--mh-navy); font-size: 1.2rem; }
  .mailhub-workspace { grid-template-columns: minmax(310px, 40%) minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .mailhub-toolbar { min-height: var(--app-bar-height); padding: 9px 154px 9px 12px; }
  .mailhub-search { width: 100%; }
  .mailhub-toolbar__action { display: none; }
  .mailhub-app--reading .mailhub-toolbar > form { margin-left: auto; }
  .mailhub-app--reading .mailhub-toolbar form .mailhub-toolbar__action--danger { display: inline-flex; }
  .mailhub-workspace { display: block; }
  .mailhub-list-pane { min-height: calc(100vh - var(--app-bar-height)); border-right: 0; }
  .mailhub-reading-pane--empty { display: none; }
  .mailhub-app--reading .mailhub-list-pane { display: none; }
  .mailhub-app--reading .mailhub-reading-pane { min-height: calc(100vh - var(--app-bar-height)); }
  .mailhub-mobile-back { display: inline-flex; align-items: center; color: var(--mh-teal-dark); text-decoration: none; font-weight: 700; white-space: nowrap; }
  .mailhub-app--reading .mailhub-search { display: none; }
  .mailhub-message-header { padding: 22px 18px 18px; }
  .mailhub-message-header h1 { font-size: 1.25rem; }
  .mailhub-sender { grid-template-columns: 42px minmax(0, 1fr); }
  .mailhub-sender time { grid-column: 2; }
  .mailhub-message-body { padding: 24px 18px 110px; }
  .mailhub-thread { padding: 20px 16px; }
  .mailhub-reply { margin: 0 16px 110px; }
  .mailhub-login { grid-template-columns: 1fr; }
  .mailhub-login__brand { min-height: 190px; padding: 30px 24px; }
  .mailhub-login__brand p { margin-bottom: 0; }
  .mailhub-login__main { padding: 24px 16px 100px; }
  .mailhub-login__card { padding: 28px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .mailhub-sidebar { transition: none; }
}