/* Refined hierarchy: alignment, density and readable weights */
.nav-item { gap: 13px; letter-spacing: -.1px; line-height: 1; }
.nav-item:not(.group-toggle):not(.active) { background: transparent !important; box-shadow: none !important; }
.group-toggle:not(.active) { background: transparent !important; box-shadow: none !important; }
.group-toggle.active { background: #3c6fa8 !important; box-shadow: inset 0 0 0 1px #94b7df20; }
.nav-icon { display: grid !important; place-items: center; width: 22px !important; height: 22px; line-height: 1; color: #d7e9ff; }
.nav-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav { min-height: 0; overflow-y: auto; padding-bottom: 10px; scrollbar-width: thin; }
.subnav button { align-items: center; line-height: 1.1; padding: 9px 18px; }
.subnav button span { padding-top: 1px; }

.topbar { gap: 9px; }
.search { flex: 0 1 365px; min-width: 250px; background: #f3f7fe; border-color: #bfcee6; box-shadow: inset 0 1px 1px #fff; }
.search > span { font-weight: 900; color: #174b89; }
.search input { font-size: 14px; font-weight: 750; color: #12284d; letter-spacing: .05px; }
.search input::placeholder { color: #334968; opacity: 1; }
.tool-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.topbar .icon-btn, .topbar .avatar { display: inline-grid; place-items: center; width: 37px; height: 37px; padding: 0; color: #18375c; }
.topbar .privacy, .topbar .privacy.active { background: transparent; border-radius: 0; color: #18375c; }
.topbar .menu-toggle { background: transparent; border-radius: 0; color: #18375c; }
.topbar .icon-btn:hover, .topbar .menu-toggle:hover { color: #1769d8; }
.ticker strong, .ticker .ticker-alert { display: inline-flex; align-items: center; height: 20px; font: 600 15px/1 inherit; color: #182641; white-space: nowrap; vertical-align: middle; }
.ticker .ticker-alert { gap: 4px; padding: 0; border-radius: 0; background: transparent; }
.ticker .ticker-alert b { font-weight: 600; }
.card .card-head h2 { display: inline-flex; align-items: center; gap: 7px; font-family: "SF Pro Display", "Segoe UI", sans-serif; font-size: 18px; font-weight: 500; letter-spacing: -.2px; }
.title-icon { width: 18px; height: 18px; fill: none; stroke: #355779; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.calendar-head h2 { font-family: "SF Pro Display", "Segoe UI", sans-serif; font-size: 18px; font-weight: 500; letter-spacing: -.2px; }
.panel-action, .calendar-head .outline { width: 112px; min-width: 112px; height: 31px; margin-left: auto; padding: 0 8px; font-family: "Avenir Next", Avenir, sans-serif; font-size: 12px !important; font-weight: 500; }

.tabs { align-items: center; }
.tab { display: inline-flex; align-items: center; gap: 7px; font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif; font-weight: 750; font-size: 14px; letter-spacing: -.18px; line-height: 1; }
.tab b { display: inline-flex; align-items: center; margin-left: 20px; line-height: 1; }

.card-head h2, .messages .card-head h2 { font-weight: 850; }
.mail-card { min-height: 292px; }
.mail-row { grid-template-columns: 24px minmax(0, 1fr) 72px; gap: 8px; padding: 11px 13px; align-items: center; min-height: 66px; }
.mail-row > span { font-size: 17px; align-self: start; padding-top: 2px; }
.mail-row strong { font-size: 13px; line-height: 1.2; font-weight: 800; letter-spacing: -.1px; }
.mail-row small { font-size: 11px; line-height: 1.25; margin-top: 3px; color: #566680; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-meta { display: flex; flex-direction: column; align-items: stretch; gap: 6px; text-align: center; }
.mail-row time { font-size: 10px; font-weight: 800; color: #63718a; }
.mail-row button { grid-column: auto; padding: 4px 4px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.top-mail .mail-row strong { font-size: 12px; font-weight: 500; }
.top-mail .mail-row small { font-size: 11px; line-height: 1.3; margin-top: 2px; font-weight: 500; }
.top-mail .mail-row button { font-weight: 500; }

.contact-tabs button { font-weight: 750; font-size: 12px; letter-spacing: -.1px; }
.bubble p { line-height: 1.25; font-size: 13px; font-weight: 560; }
.bubble b { font-size: 13px; font-weight: 850; }
.composer input[type=text], .composer input:not([type]) { font-size: 13px; font-weight: 650; }
.composer input::placeholder { color: #4f607b; opacity: 1; }

@media (max-width: 640px) {
  .search { flex: 1 1 auto; min-width: 0; }
  .mail-row { grid-template-columns: 22px minmax(0, 1fr) 65px; }
  .mail-row small { white-space: normal; }
  .tab { font-size: 12px; }
}