:root {
  font-family:Inter,"Segoe UI",system-ui,sans-serif;
  color:#203047;
  background:#f6f8fb;
  font-size:14px;
  --blue:#315ac8;
  --line:#e4e9f1;
  --muted:#6a788e
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
button,input {
  font:inherit
}
button {
  cursor:pointer;
  background:white;
  border:1px solid #d8dfea;
  border-radius:7px;
  padding:8px 11px;
  color:#425471;
  white-space:nowrap
}
button:hover:not(:disabled) {
  border-color:#7899e9;
  background:#f2f6ff
}
button:disabled {
  opacity:.45;
  cursor:default
}
button:focus-visible,input:focus-visible {
  outline:3px solid #aac2ff;
  outline-offset:2px
}
input {
  min-width:0;
  border:1px solid #d8dfea;
  border-radius:7px;
  padding:10px 12px;
  background:white;
  color:inherit;
  width:100%
}
h1,h2,p {
  margin:0
}
h1 {
  font-size:17px
}
h2 {
  font-size:21px;
  letter-spacing:-.4px
}
small {
  display:block;
  font-size:9px;
  letter-spacing:1.6px;
  margin-top:5px;
  color:var(--muted)
}
[hidden] {
  display:none!important
}
.muted {
  color:var(--muted);
  line-height:1.6
}
.eyebrow {
  font-size:10px;
  font-weight:700;
  letter-spacing:1.8px;
  color:var(--muted);
  margin-bottom:9px
}
.badge {
  background:#e8edf6;
  border-radius:5px;
  padding:3px 7px;
  font-size:11px
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.topbar {
  height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 28px;
  background:white;
  border-bottom:1px solid var(--line);
  gap:16px
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:19px;
  font-weight:650
}
.brand-icon {
  display:grid;
  place-items:center;
  width:39px;
  height:39px;
  border-radius:12px;
  background:var(--blue);
  color:white;
  font-size:23px
}
.top-actions {
  display:flex;
  align-items:center;
  gap:10px
}
.top-actions span {
  color:var(--muted);
  font-size:12px;
  margin-right:8px
}
#status {
  font-size:12px;
  background:#edf3ff;
  color:#2c4c94;
  padding:0 28px
}
#status:not(:empty) {
  padding-top:9px;
  padding-bottom:9px
}
.workspace {
  display:flex;
  min-height:calc(100vh - 82px)
}
.sidebar {
  width:255px;
  flex-shrink:0;
  padding:27px 19px;
  display:flex;
  flex-direction:column;
  border-right:1px solid var(--line)
}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:22px
}
#mailbox-search {
  font-size:12px
}
#mailboxes {
  margin:18px -8px;
  max-height:55vh;
  overflow-y:auto
}
.mailbox {
  width:100%;
  text-align:left;
  border:1px solid transparent;
  background:transparent;
  padding:13px 10px;
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:4px
}
.mailbox[aria-current=true] {
  background:#e8eefc;
  border-color:#dce5fc;
  color:#254db5
}
.mailbox-text {
  min-width:0;
  flex:1
}
.mailbox-title {
  display:block;
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.mailbox-address {
  display:block;
  font-size:11px;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:5px;
  color:var(--muted)
}
.mailbox .badge {
  background:white;
  color:var(--blue)
}
#mailbox-empty {
  font-size:12px;
  padding:8px 0
}
.sidebar-note {
  margin-top:auto;
  padding-top:35px;
  font-size:11px;
  line-height:1.7;
  color:var(--muted)
}
.sidebar-note strong {
  display:block;
  color:#50617a;
  margin-bottom:5px
}
.inbox {
  min-width:0;
  flex:1;
  background:white
}
.inbox-heading {
  padding:29px 30px 23px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center
}
.inbox-heading h2 {
  overflow-wrap:anywhere
}
#mailbox-address {
  font-size:12px;
  margin-top:7px
}
.mailbox-actions {
  display:flex;
  gap:8px
}
.folders {
  display:flex;
  gap:25px;
  padding:0 30px;
  border-bottom:1px solid var(--line);
  overflow-x:auto
}
.folders button {
  border:0;
  border-radius:0;
  padding:14px 0;
  border-bottom:3px solid transparent;
  font-size:13px
}
.folders button[aria-pressed=true] {
  border-bottom-color:var(--blue);
  color:var(--blue);
  font-weight:650
}
.mail-content {
  display:grid;
  grid-template-columns:minmax(290px,37%) minmax(0,1fr);
  min-height:calc(100vh - 269px)
}
.message-column {
  border-right:1px solid var(--line);
  min-width:0;
  display:flex;
  flex-direction:column
}
.search {
  padding:19px 18px 13px;
  display:flex;
  gap:6px
}
.search input,.search button {
  font-size:12px
}
.list-caption {
  font-size:10px;
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  padding:5px 20px 16px
}
.message-row {
  display:block;
  width:100%;
  text-align:left;
  border:0;
  border-radius:0;
  border-top:1px solid #f0f2f6;
  padding:18px 20px;
  background:#fff;
  white-space:normal
}
.message-row[aria-current=true] {
  background:#f0f4ff;
  box-shadow:inset 3px 0 var(--blue)
}
.message-row .row-top {
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:11px;
  color:var(--muted);
  margin-bottom:8px
}
.row-from {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.row-date {
  white-space:nowrap
}
.row-subject {
  display:block;
  font-size:13px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-bottom:6px
}
.unread .row-subject {
  font-weight:750;
  color:#17283f
}
.unread .row-subject::before {
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--blue);
  margin:0 7px 2px 0
}
.row-preview {
  display:block;
  font-size:12px;
  line-height:1.6;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:var(--muted)
}
.pagination {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:5px;
  padding:17px;
  border-top:1px solid var(--line);
  margin-top:auto;
  font-size:11px
}
.pagination button {
  font-size:11px
}
.empty {
  padding:45px 25px;
  text-align:center;
  font-size:13px;
  color:var(--muted);
  line-height:1.8
}
.reader {
  min-width:0;
  padding:22px 30px 40px
}
.reader-empty {
  display:flex;
  min-height:370px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  color:var(--muted);
  gap:12px
}
.reader-empty h2 {
  font-size:18px;
  color:#65758e
}
.reader-empty p {
  font-size:12px
}
.envelope {
  font-size:43px;
  color:#8da6db;
  background:#f0f4fc;
  border-radius:50%;
  width:85px;
  height:85px;
  display:grid;
  place-items:center;
  margin-bottom:6px
}
.reader-actions {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:30px
}
.reader-actions button {
  font-size:11px
}
#subject {
  font-size:23px;
  line-height:1.4;
  overflow-wrap:anywhere
}
.message-meta {
  display:grid;
  grid-template-columns:65px minmax(0,1fr);
  font-size:12px;
  gap:9px;
  margin:24px 0 27px
}
.message-meta dt {
  color:var(--muted)
}
.message-meta dd {
  margin:0;
  overflow-wrap:anywhere
}
.safe-view {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border-top:1px solid var(--line);
  padding-top:16px;
  font-size:10px;
  color:var(--muted)
}
.safe-view button {
  font-size:10px
}
#body {
  font:14px/1.9 "Segoe UI",system-ui,sans-serif;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  margin-top:25px
}
dialog {
  border:1px solid var(--line);
  border-radius:15px;
  padding:32px;
  max-width:440px;
  width:calc(100% - 32px);
  box-shadow:0 20px 90px #23335526
}
dialog::backdrop {
  background:#18294670;
  backdrop-filter:blur(4px)
}
dialog p {
  color:var(--muted);
  line-height:1.7;
  margin:14px 0;
  font-size:13px
}
dialog label {
  display:block;
  font-size:12px;
  margin:20px 0 8px
}
dialog input {
  margin-bottom:8px
}
.primary {
  background:var(--blue);
  color:white;
  border-color:var(--blue)
}
#login-form .primary {
  width:100%;
  margin-top:12px
}
#login-error {
  color:#a62d39
}
.dialog-actions {
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:22px
}
@media(min-width:1500px) {
  .reader {
    padding-left:45px;
    padding-right:45px
  }
  .sidebar {
    width:275px
  }
}
@media(max-width:1050px) {
  .sidebar {
    width:210px;
    padding:24px 12px
  }
  .inbox-heading {
    padding:24px 20px
  }
  .mailbox-actions {
    flex-direction:column
  }
  .mail-content {
    grid-template-columns:minmax(250px,42%) minmax(0,1fr)
  }
  .reader {
    padding:20px
  }
  .folders {
    padding:0 20px;
    gap:19px
  }
  .safe-view {
    align-items:flex-start;
    flex-direction:column
  }
  .top-actions span {
    display:none
  }
}
@media(max-width:760px) {
  .topbar {
    height:72px;
    padding:0 16px
  }
  .brand {
    font-size:16px
  }
  .brand small {
    font-size:8px
  }
  .top-actions {
    gap:5px
  }
  .top-actions button {
    font-size:11px;
    padding:7px
  }
  .workspace {
    display:block
  }
  .sidebar {
    width:100%;
    padding:20px;
    border-right:0;
    border-bottom:1px solid var(--line)
  }
  .section-heading {
    margin-bottom:12px
  }
  #mailboxes {
    max-height:170px;
    margin:10px -8px
  }
  .sidebar-note {
    padding-top:5px
  }
  .sidebar-note p {
    margin:0
  }
  .sidebar-note strong {
    display:none
  }
  .mail-content {
    grid-template-columns:1fr
  }
  .message-column {
    border-right:0;
    border-bottom:1px solid var(--line)
  }
  #messages {
    max-height:360px;
    overflow:auto
  }
  .inbox-heading h2 {
    font-size:18px
  }
  .reader-empty {
    min-height:220px
  }
  .reader {
    padding:25px 20px
  }
  .folders {
    gap:22px
  }
  .safe-view {
    flex-direction:row
  }
}