:root {
  color-scheme: dark;
  --bg: #07111f;
  --bg-soft: #0a1628;
  --panel: rgba(12, 26, 47, .88);
  --panel-2: #0e1c31;
  --panel-3: #11233d;
  --line: rgba(151, 175, 221, .15);
  --line-strong: rgba(151, 175, 221, .25);
  --text: #f1f5ff;
  --muted: #8b9ab8;
  --muted-2: #687896;
  --accent: #4d8dff;
  --accent-2: #3778f5;
  --accent-soft: rgba(61, 129, 255, .16);
  --cyan: #4ed4ff;
  --danger: #fa6e9a;
  --green: #5bd4ae;
  --yellow: #ffc34d;
  --purple: #a97dff;
  --shadow: 0 20px 70px rgba(0, 0, 0, .26);
  --radius: 16px;
}

:root.light {
  color-scheme: light;
  --bg: #edf3fc;
  --bg-soft: #f5f8fd;
  --panel: rgba(255,255,255,.9);
  --panel-2: #ffffff;
  --panel-3: #eff5ff;
  --line: rgba(39, 72, 123, .14);
  --line-strong: rgba(39, 72, 123, .22);
  --text: #12213b;
  --muted: #62718c;
  --muted-2: #8b99b0;
  --accent: #286cf4;
  --accent-2: #155be6;
  --accent-soft: rgba(40,108,244,.10);
  --shadow: 0 20px 70px rgba(34, 63, 115, .12);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: radial-gradient(circle at 18% 0%, rgba(36, 94, 196, .15), transparent 35%), var(--bg); color: var(--text); font-family: Tahoma, "Segoe UI", Arial, sans-serif; font-size: 13px; }
button, input, textarea { font: inherit; }
button { border: 0; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { height: 82px; border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 30px; gap: 34px; background: rgba(6, 17, 31, .54); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 20; }
.light .topbar { background: rgba(255,255,255,.75); }
.brand-area { width: 263px; display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand-mark { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: white; background: linear-gradient(135deg, #31a5ff, #2b59dc); box-shadow: 0 9px 22px rgba(38, 113, 255, .32); }
.brand-mark .icon { width: 25px; height: 25px; }
.brand-copy { display: flex; flex-direction: column; gap: 2px; }
.brand-copy strong { font-size: 19px; letter-spacing: -.5px; }
.brand-copy span { font-size: 10px; color: var(--muted); }
.search-box { height: 46px; max-width: 660px; flex: 1 1 auto; display: flex; align-items: center; padding: 0 14px; gap: 10px; background: rgba(23, 48, 85, .68); border: 1px solid rgba(97, 142, 226, .23); border-radius: 999px; color: var(--muted); box-shadow: inset 0 1px rgba(255,255,255,.025); }
.light .search-box { background: #eef4ff; }
.search-box .icon { color: #b8c6df; width: 20px; height: 20px; }
.search-box input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 13px; }
.search-box input::placeholder { color: #8d9dbc; }
.search-box kbd { direction: ltr; border: 1px solid var(--line-strong); border-radius: 6px; padding: 4px 8px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.top-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.ghost-icon, .icon-btn, .tiny-btn { background: transparent; color: var(--muted); display: inline-grid; place-items: center; border-radius: 9px; transition: .18s ease; }
.ghost-icon { width: 38px; height: 38px; position: relative; }
.ghost-icon:hover, .icon-btn:hover, .tiny-btn:hover { color: var(--text); background: var(--accent-soft); }
.notification-btn i { width: 6px; height: 6px; border-radius: 50%; position: absolute; top: 7px; inset-inline-end: 8px; background: #ff567f; box-shadow: 0 0 0 3px var(--bg); }
.lang-btn { background: transparent; color: var(--muted); font-size: 10px; padding: 7px 5px; border-radius: 7px; white-space: nowrap; }.lang-btn:hover { color: var(--text); background: var(--accent-soft); }
.profile-menu { display: flex; align-items: center; gap: 10px; margin-inline-start: 5px; padding-inline-start: 13px; border-inline-start: 1px solid var(--line); cursor: pointer; min-width: 190px; }
.avatar { display: grid; place-items: center; border-radius: 50%; font-weight: 700; color: white; }
.avatar-user { width: 38px; height: 38px; background: linear-gradient(140deg, #6e62ff, #286bea); box-shadow: 0 4px 13px rgba(61, 104, 255, .32); }
.profile-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.profile-copy strong { font-size: 12px; }
.profile-copy span { color: var(--muted); font-size: 10px; direction: ltr; text-align: right; }
.profile-menu .caret { margin-inline-start: auto; width: 14px; }
.mobile-menu { display: none; }

.layout { flex: 1; display: flex; min-height: calc(100vh - 82px); }
.sidebar { width: 263px; flex: 0 0 263px; display: flex; flex-direction: column; padding: 26px 18px 17px; border-inline-end: 1px solid var(--line); background: linear-gradient(180deg, rgba(7, 19, 36, .66), rgba(5, 14, 27, .26)); }
.compose-btn { height: 51px; padding: 0 18px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 12px; background: linear-gradient(135deg, #2d79ff, #1e61e1); box-shadow: 0 13px 25px rgba(26, 99, 239, .22); color: white; font-weight: 700; transition: transform .18s ease, box-shadow .18s ease; }
.compose-btn:hover { transform: translateY(-2px); box-shadow: 0 17px 32px rgba(26, 99, 239, .34); }
.compose-btn .icon { width: 17px; height: 17px; }
.compose-btn .shortcut { display: none; color: rgba(255,255,255,.65); font-size: 10px; margin-inline-start: auto; }
.primary-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 20px; }
.nav-item, .label-nav, .more-link { display: flex; align-items: center; width: 100%; min-height: 43px; border-radius: 9px; background: transparent; color: var(--muted); padding: 0 12px; transition: .18s ease; text-align: start; }
.nav-item:hover, .label-nav:hover, .more-link:hover { color: var(--text); background: rgba(82, 124, 202, .10); }
.nav-item.active { color: #eef5ff; background: linear-gradient(90deg, rgba(53, 111, 236, .32), rgba(42, 82, 164, .15)); box-shadow: inset -3px 0 var(--accent); }
.light .nav-item.active { color: var(--accent-2); }
.nav-leading { display: flex; align-items: center; gap: 13px; }
.nav-leading .icon { width: 18px; height: 18px; }
.nav-item .count, .label-nav b { margin-inline-start: auto; min-width: 23px; height: 22px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: 7px; background: #2a72e9; color: white; font-size: 11px; }
.nav-item .muted-count { color: #9ebeff; background: rgba(54, 111, 228, .19); }
.sidebar-divider { height: 1px; background: var(--line); margin: 19px 7px 18px; }
.sidebar-section-head { padding: 0 12px 9px; display: flex; align-items: center; color: var(--muted); font-size: 11px; justify-content: space-between; }
.tiny-btn { width: 26px; height: 26px; }
.tiny-btn .icon { width: 14px; height: 14px; }
.label-list { display: flex; flex-direction: column; gap: 3px; }
.label-nav { min-height: 37px; gap: 12px; }
.label-nav .dot { width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,255,255,.03); }
.dot-blue { background: #327be9; }.dot-mint { background: #42ceaa; }.dot-amber { background: #f0b647; }.dot-purple { background: #a46cff; }
.label-nav b { background: transparent; color: var(--muted); padding: 0; min-width: auto; font-weight: 400; }
.more-link { gap: 12px; margin-top: 9px; font-size: 12px; }
.more-link .icon { width: 17px; }
.sidebar-spacer { min-height: 20px; flex: 1; }
.storage-card { border: 1px solid var(--line); background: linear-gradient(145deg, rgba(23, 47, 83, .65), rgba(10, 24, 43, .72)); padding: 14px 13px 11px; border-radius: 13px; }
.light .storage-card { background: linear-gradient(145deg, #f0f6ff, #fff); }
.storage-top { display: flex; align-items: center; gap: 9px; }
.storage-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; color: #69afff; background: rgba(45, 117, 240, .15); }
.storage-icon .icon { width: 18px; height: 18px; }
.storage-top div { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.storage-top strong { font-size: 11px; }.storage-top span { color: var(--muted); font-size: 10px; white-space: nowrap; }.storage-top > b { color: var(--muted); font-size: 10px; }
.progress { height: 7px; border-radius: 99px; background: #1a3152; margin: 12px 0 9px; overflow: hidden; }.light .progress { background: #dde8fb; }.progress i { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #258dff, #42c9ff); }
.storage-bottom { display: flex; align-items: center; justify-content: space-between; color: var(--muted-2); font-size: 9px; }.storage-bottom button { color: var(--muted); background: transparent; }.storage-bottom .icon { width: 13px; height: 13px; }

.main-area { min-width: 0; flex: 1; display: grid; grid-template-columns: minmax(470px, 1.08fr) minmax(420px, .92fr); gap: 19px; padding: 20px 20px 23px; }
.mail-column, .reader-column { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(8, 20, 37, .64); overflow: hidden; box-shadow: var(--shadow); }
.light .mail-column, .light .reader-column { background: rgba(255,255,255,.82); }
.mail-column { display: flex; flex-direction: column; }
.mail-toolbar { height: 73px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--line); }
.toolbar-leading { display: flex; align-items: center; gap: 14px; }.check-btn { width: 19px; height: 19px; border: 2px solid #7390bb; background: transparent; border-radius: 4px; padding: 0; position: relative; }.check-btn.checked { background: var(--accent); border-color: var(--accent); }.check-btn.checked:after { content: ""; position: absolute; width: 8px; height: 4px; border-inline-start: 2px solid white; border-bottom: 2px solid white; transform: rotate(-45deg); top: 4px; inset-inline-start: 4px; }
.icon-btn { width: 34px; height: 34px; }.icon-btn .icon { width: 18px; height: 18px; }
.mail-sort { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }.mail-sort button { display: flex; align-items: center; gap: 5px; color: var(--text); background: transparent; }.mail-sort .icon { width: 12px; height: 12px; color: var(--muted); }
.mail-tabs { height: 49px; display: flex; align-items: stretch; padding: 0 20px; gap: 20px; border-bottom: 1px solid var(--line); overflow-x: auto; }.tab { display: flex; align-items: center; gap: 7px; position: relative; white-space: nowrap; color: var(--muted); background: transparent; font-size: 11px; }.tab.active { color: var(--text); font-weight: 700; }.tab.active:after { content: ""; position: absolute; bottom: -1px; inset-inline: 0; height: 2px; background: var(--accent); border-radius: 2px; }.tab b { min-width: 20px; padding: 3px 5px; border-radius: 5px; background: var(--accent-soft); color: #81adff; font-size: 10px; }
.email-list { overflow-y: auto; flex: 1; min-height: 360px; }.email-row { min-height: 92px; display: grid; grid-template-columns: 20px 45px minmax(0, 1fr) 44px; gap: 12px; align-items: center; padding: 14px 18px; border-bottom: 1px solid rgba(150, 173, 220, .09); cursor: pointer; position: relative; transition: background .18s ease; }.email-row:hover { background: rgba(69, 121, 215, .08); }.email-row.selected { background: linear-gradient(90deg, rgba(45, 106, 229, .23), rgba(31, 71, 145, .10)); }.email-row.selected:before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }.email-row.unread .sender, .email-row.unread .subject { font-weight: 700; color: var(--text); }.row-check { width: 18px; height: 18px; border: 2px solid #667fa8; border-radius: 4px; position: relative; }.row-check.on { border-color: var(--accent); background: var(--accent); }.row-check.on:after { content: ""; position: absolute; width: 7px; height: 4px; border-inline-start: 2px solid white; border-bottom: 2px solid white; transform: rotate(-45deg); inset: 3px; }
.sender-avatar { width: 42px; height: 42px; font-size: 15px; background: linear-gradient(140deg, #516b95, #273c64); }.avatar-google { background: #fff; color: #4c75db; font-size: 19px; font-family: Arial, sans-serif; }.avatar-blue { background: linear-gradient(145deg, #42b7ff, #1970e9); }.avatar-mint { background: linear-gradient(145deg, #67e7c7, #27b995); }.avatar-amber { background: linear-gradient(145deg, #e6b658, #bd6b19); }.avatar-purple { background: linear-gradient(145deg, #a969fd, #6536cd); }.avatar-pink { background: linear-gradient(145deg, #f86f9d, #be3d78); }.avatar-cyan { background: linear-gradient(145deg, #52d3ef, #2387c8); }
.row-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }.row-head { display: flex; align-items: center; gap: 8px; min-width: 0; }.sender { font-size: 12px; color: #dce7fb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.light .sender { color: #243654; }.email-address { display: none; }.row-time { color: var(--muted); font-size: 10px; margin-inline-start: auto; white-space: nowrap; }.subject { font-size: 12px; color: #d6e0f3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.light .subject { color: #344562; }.preview { color: var(--muted); font-size: 10px; line-height: 1.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.row-meta { display: flex; align-items: flex-start; justify-content: flex-start; height: 100%; position: relative; }.row-star { background: transparent; color: #52709d; padding: 3px; margin-top: 1px; }.row-star:hover { color: var(--yellow); }.row-star.starred { color: var(--yellow); }.row-star .icon { width: 16px; height: 16px; }.tag { align-self: flex-start; font-size: 9px; padding: 4px 8px; border-radius: 999px; white-space: nowrap; }.tag-red { background: rgba(225, 54, 103, .22); color: #ff86ac; }.tag-blue { background: rgba(39, 110, 238, .20); color: #7baaff; }.tag-mint { background: rgba(38, 183, 144, .20); color: #6bddc0; }.tag-purple { background: rgba(140, 87, 226, .22); color: #c2a2ff; }.tag-amber { background: rgba(203, 145, 42, .20); color: #f2c667; }
.list-footer { min-height: 39px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; color: var(--muted-2); font-size: 9px; border-top: 1px solid var(--line); }.list-footer > span:first-child { display: flex; align-items: center; gap: 5px; color: var(--green); }.list-footer .icon { width: 13px; height: 13px; }
.empty-state { display: grid; place-items: center; align-content: center; gap: 10px; min-height: 390px; color: var(--muted); text-align: center; }.empty-state .empty-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }.empty-state p { margin: 0; }

.reader-column { display: flex; flex-direction: column; }
.reader-empty { flex: 1; display: grid; place-items: center; color: var(--muted); text-align: center; padding: 30px; }.reader-empty .empty-icon { width: 76px; height: 76px; border-radius: 24px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); margin-bottom: 12px; }.reader-empty .icon { width: 34px; height: 34px; }.reader-empty h3 { margin: 0 0 8px; color: var(--text); font-size: 16px; }.reader-empty p { max-width: 260px; line-height: 1.9; margin: 0; font-size: 11px; }
.reader-head { min-height: 75px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid var(--line); }.reader-title { font-size: 16px; margin: 0; letter-spacing: -.3px; }.reader-actions { display: flex; gap: 3px; }.reader-actions .icon-btn { color: var(--muted); }
.message-meta { padding: 19px 22px 13px; display: flex; gap: 12px; }.message-meta .sender-avatar { width: 43px; height: 43px; }.message-by { min-width: 0; flex: 1; }.message-by strong { font-size: 13px; display: block; margin-bottom: 4px; }.message-by div { color: var(--muted); font-size: 10px; direction: ltr; text-align: right; overflow: hidden; text-overflow: ellipsis; }.message-time { color: var(--muted); font-size: 10px; white-space: nowrap; }.message-content { flex: 1; overflow-y: auto; margin: 0 18px; padding: 21px 21px 27px; border-radius: 11px; background: linear-gradient(145deg, rgba(23, 48, 84, .52), rgba(12, 28, 50, .7)); border: 1px solid rgba(117, 153, 217, .11); }.light .message-content { background: linear-gradient(145deg, #f6f9ff, #edf4ff); }.message-content .message-greeting { font-size: 19px; font-weight: 700; margin: 0 0 22px; }.message-content p { color: #bcc9df; line-height: 2.1; font-size: 12px; margin: 0 0 19px; }.light .message-content p { color: #52627c; }.info-grid { display: flex; flex-direction: column; gap: 13px; padding: 16px 0 19px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 4px 0 20px; }.info-line { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; }.info-line .icon { color: #8eb6ff; width: 18px; height: 18px; }.info-line b { color: #dce6f8; font-weight: 400; }.light .info-line b { color: #344766; }.security-note { color: var(--muted); font-size: 11px; line-height: 1.9; text-align: center; margin: 0 0 15px; }.security-note strong { color: var(--text); }.primary-cta { display: flex; justify-content: center; align-items: center; margin: 0 auto 19px; min-height: 46px; padding: 0 20px; border-radius: 9px; background: linear-gradient(135deg, #2e78f4, #2565df); color: white; font-weight: 700; box-shadow: 0 10px 24px rgba(37, 101, 223, .25); }.message-signature { color: var(--muted); text-align: center; line-height: 1.8; font-size: 11px; margin: 0; }.reader-bottom { display: flex; justify-content: space-between; align-items: center; padding: 14px 21px; border-top: 1px solid var(--line); }.reply-btn { display: flex; gap: 7px; align-items: center; color: var(--accent); background: var(--accent-soft); padding: 9px 15px; border-radius: 8px; font-size: 11px; }.reply-btn:hover { background: rgba(62, 131, 255, .24); }.reader-bottom .muted-action { color: var(--muted); background: transparent; font-size: 11px; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(2, 8, 18, .74); backdrop-filter: blur(10px); display: none; align-items: center; justify-content: center; z-index: 40; padding: 20px; }.modal-backdrop.open { display: flex; }.compose-modal { width: min(680px, 100%); border: 1px solid var(--line-strong); border-radius: 18px; background: #0d1c32; box-shadow: 0 30px 100px rgba(0, 0, 0, .46); overflow: hidden; animation: rise .22s ease; }.light .compose-modal { background: white; }.modal-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 23px 25px 18px; border-bottom: 1px solid var(--line); }.eyebrow { color: var(--accent); font-size: 9px; letter-spacing: 1.5px; direction: ltr; display: block; margin-bottom: 8px; }.modal-head h2 { margin: 0; font-size: 18px; }.compose-fields { display: flex; flex-direction: column; padding: 5px 25px 0; }.compose-fields label { display: grid; grid-template-columns: 65px 1fr; align-items: center; min-height: 52px; border-bottom: 1px solid var(--line); gap: 12px; }.compose-fields label > span { color: var(--muted); font-size: 11px; }.compose-fields input, .compose-fields textarea { border: 0; outline: 0; width: 100%; color: var(--text); background: transparent; resize: vertical; }.compose-fields input::placeholder, .compose-fields textarea::placeholder { color: var(--muted-2); }.compose-fields .body-field { align-items: start; padding-top: 17px; min-height: 190px; }.compose-fields textarea { min-height: 150px; line-height: 1.9; }.compose-options { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 15px 25px; color: var(--muted); }.option-btn { display: flex; align-items: center; gap: 6px; background: transparent; color: var(--muted); font-size: 11px; }.option-btn:hover { color: var(--text); }.option-btn .icon { width: 16px; height: 16px; }.schedule-toggle { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 11px; margin-inline-start: auto; }.schedule-toggle input { display: none; }.toggle { width: 30px; height: 17px; background: #294263; border-radius: 99px; padding: 3px; transition: .2s; }.toggle:before { content: ""; display: block; height: 11px; width: 11px; border-radius: 50%; background: #a5b5cc; transition: .2s; }.schedule-toggle input:checked + .toggle { background: var(--accent); }.schedule-toggle input:checked + .toggle:before { transform: translateX(-13px); background: white; }.schedule-input { display: none; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-3); color: var(--text); font-size: 10px; }.schedule-input.open { display: block; }.modal-foot { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 17px 25px; border-top: 1px solid var(--line); }.secondary-btn, .send-btn { min-height: 40px; padding: 0 16px; border-radius: 8px; font-size: 11px; }.secondary-btn { background: transparent; color: var(--muted); }.secondary-btn:hover { background: var(--accent-soft); color: var(--text); }.send-btn { display: flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #2e78f4, #2565df); color: white; box-shadow: 0 8px 19px rgba(37, 101, 223, .22); }.send-btn .icon { width: 15px; height: 15px; }
.toast-stack { position: fixed; bottom: 24px; inset-inline-end: 24px; display: flex; flex-direction: column; align-items: flex-end; gap: 9px; z-index: 60; }.toast { display: flex; align-items: center; gap: 9px; min-width: 230px; max-width: 360px; padding: 12px 15px; border: 1px solid var(--line-strong); border-radius: 10px; background: #142844; box-shadow: 0 16px 40px rgba(0,0,0,.25); color: var(--text); font-size: 11px; animation: toast-in .22s ease; }.light .toast { background: #fff; }.toast .icon { color: var(--green); width: 16px; height: 16px; }
@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

@media (max-width: 1180px) { .main-area { grid-template-columns: minmax(400px, 1fr) minmax(360px, .86fr); gap: 14px; padding: 14px; }.topbar { padding: 0 18px; gap: 20px; }.brand-area { width: 220px; }.profile-copy { display: none; }.profile-menu { min-width: auto; }.sidebar { width: 225px; flex-basis: 225px; } }
@media (max-width: 900px) { .main-area { grid-template-columns: 1fr; }.reader-column { min-height: 650px; }.sidebar { position: fixed; z-index: 30; top: 82px; bottom: 0; inset-inline-start: -270px; width: 263px; transition: inset-inline-start .24s ease; box-shadow: 20px 0 60px rgba(0,0,0,.25); }.sidebar.open { inset-inline-start: 0; }.mobile-menu { display: inline-grid; }.brand-area { width: auto; }.search-box { max-width: none; }.top-actions .ghost-icon:nth-child(3) { display: none; } }
@media (max-width: 620px) { .topbar { height: 68px; padding: 0 12px; gap: 10px; }.layout { min-height: calc(100vh - 68px); }.brand-copy { display: none; }.brand-area { flex: 0 0 auto; }.brand-mark { width: 36px; height: 36px; }.search-box { height: 38px; padding: 0 9px; }.search-box kbd { display: none; }.top-actions { gap: 0; }.top-actions .ghost-icon:nth-child(2) { display: none; }.profile-menu { padding-inline-start: 5px; border: 0; }.avatar-user { width: 34px; height: 34px; }.main-area { padding: 9px; }.mail-toolbar { height: 59px; padding: 0 12px; }.mail-tabs { padding: 0 12px; gap: 14px; }.email-row { grid-template-columns: 18px 39px minmax(0,1fr) 23px; gap: 8px; padding: 12px 10px; }.sender-avatar { width: 37px; height: 37px; }.row-time { display: none; }.tag { display: none; }.list-footer { padding: 0 10px; }.list-footer > span:last-child { display: none; }.reader-head { padding: 0 14px; }.reader-title { font-size: 14px; }.message-meta { padding: 15px 14px 10px; }.message-content { margin: 0 10px; padding: 16px 14px 20px; }.reader-bottom { padding: 12px 14px; }.compose-fields, .compose-options, .modal-foot { padding-inline: 16px; }.schedule-toggle { margin-inline-start: 0; }.profile-menu .caret { display: none; } }