:root {
  --page: #111; --header: #181818; --sidebar: #202020; --surface: #292929;
  --raised: #333; --field: #151515; --line: #5a5a5a; --soft-line: #3b3b3b;
  --text: #e2e2e2; --muted: #aaa; --accent: #dedede; --accent-soft: #474747;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: #000; color: #fff; font: 15.5px/1.4 Arial, Helvetica, sans-serif; }
button, input, textarea { font: inherit; }
button { min-height: 33px; border: 1px solid #aaa; border-radius: 0; padding: 4px 12px; background: #090909; color: #fff; cursor: pointer; }
button:hover { border-color: #fff; background: #fff; color: #000; }
button:active { background: #292d32; }
button:disabled { border-color: #555; background: #111; color: #777; cursor: wait; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 1px dotted #fff; outline-offset: -3px; }
.page-shell { height: 100vh; overflow: hidden; background: var(--page); }
.topbar { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 26px; padding: 0 17px 0 21px; border-bottom: 1px solid #fff; background: #000; }
.brand-row { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.brand-mark { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid #aaa; border-radius: 0; background: #080808; color: #eee; font-size: 17px; font-weight: bold; }
h1, h2 { margin: 0; letter-spacing: 0; }
h1 { font-size: 26px; line-height: 1; font-weight: bold; text-transform: lowercase; }
h2 { font-size: 16px; font-weight: 600; }
.domain { display: block; color: var(--muted); font-size: 11px; }
.account-box { display: flex; align-items: center; gap: 22px; color: #fff; font-size: 13px; }
.account-box a { color: #d0d0d0; text-decoration: underline; }
.account-box a:hover { color: #fff; text-decoration: underline; }
.nav-strip { height: 42px; display: flex; align-items: stretch; padding: 0; border-bottom: 1px solid #fff; background: #0a0a0a; }
.nav-tab { min-width: 145px; height: 41px; border: 0; border-right: 1px solid #777; border-radius: 0; margin: 0; background: #0a0a0a; color: #aaa; font-weight: normal; }
.nav-tab:hover { background: #fff; color: #000; }
.nav-tab.is-active { border-color: #fff; background: #fff; color: #000; }
.quota { margin-left: auto; align-self: center; padding-right: 16px; color: #bbb; font-size: 12px; }
.main-frame { display: grid; grid-template-columns: 213px minmax(0,1fr); height: calc(100vh - 114px); min-height: 0; }
.folder-pane { min-height: 0; overflow-y: auto; padding: 13px 8px 17px 9px; border-right: 1px solid #fff; background: #050505; }
.compose-main { width: calc(100% - 4px); height: 42px; margin: 0 4px 23px 0; border: 1px solid #fff; background: #fff; color: #000; font-weight: bold; text-align: left; }
.compose-main:hover { border-color: #fff; background: #f2f2f2; }
.icon { display: inline-block; width: 22px; text-align: center; }
.panel-title { margin: 15px 0 0; padding: 5px 6px; border: 1px solid #aaa; background: #000; color: #fff; font-size: 12px; font-weight: normal; }
.folder-list { margin: 0 0 17px; padding: 5px 0 8px; border: 1px solid #777; border-top: 0; list-style: none; }
.folder-list button, .server-status-link { width: 100%; border: 0; border-left: 3px solid #555; background: transparent; color: #ddd; text-align: left; }
.folder-list button:hover, .server-status-link:hover { border-left-color: #fff; background: #222; color: #fff; }
.folder-list button.is-active { border-left-color: #000; background: #fff; color: #000; font-weight: bold; }
.server-status-link.is-active { border-left-color: #000; background: #fff; color: #000; font-weight: bold; }
.folder-count { float: right; color: #aab1ba; }
.ad-box { margin: 36px 3px 0 6px; color: #aaa; font-size: 12px; line-height: 1.5; }
.ad-box strong, .ad-box span { display: block; }
.ad-box strong { color: #cbd0d6; font-size: 14px; }
.storage-meter { height: 6px; margin-top: 7px; overflow: hidden; border: 1px solid #555; border-radius: 0; background: #111; }
.storage-meter span { width: 17%; height: 100%; background: #fff; }
.workspace { position: relative; min-width: 0; min-height: 0; overflow: hidden; padding: 0; background: #000; }
.notice-bar { position: absolute; z-index: 10; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 14px; min-width: 360px; border: 1px solid #fff; padding: 9px 10px 9px 14px; background: #fff; color: #000; }
.notice-bar button { min-height: 27px; border-color: #000; background: #fff; color: #000; }
.notice-bar #noticeDismiss { width: 27px; padding: 0; border: 0; font-size: 20px; }
.search-row, .toolbar { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 0; border-bottom: 1px solid #777; background: #080808; }
.search-row { border-radius: 0; }
.search-label { color: var(--muted); padding: 0 4px; }
.search-row input { width: min(505px,100%); height: 33px; border: 1px solid #fff; border-radius: 0; padding: 4px 8px; background: #000; color: #fff; }
.search-row input::placeholder { color: #727983; }
.quiet-button { border-color: transparent; background: transparent; color: var(--muted); }
.toolbar { display: none; border-top: 0; }
.toolbar span { margin-left: auto; color: var(--muted); font-size: 14px; }
.identity-switcher { display: grid; gap: 5px; margin: 0 3px 16px 0; color: #aaa; font-size: 12px; }
.identity-switcher select { width: 100%; height: 34px; border: 1px solid #aaa; border-radius: 0; padding: 4px 5px; background: #050505; color: #fff; font: inherit; }
.mail-grid { height: calc(100vh - 156px); min-height: 0; border: 0; background: #000; }
.list-pane { height: 100%; overflow: auto; padding: 5px 8px 12px; background: #000; }
.email-table { width: 100%; table-layout: fixed; }
.email-table { border-collapse: separate; border-spacing: 0 7px; }
th { height: 36px; padding: 7px 9px; border-right: 1px solid #777; border-bottom: 1px solid #fff; background: #111; color: #fff; text-align: left; font-size: 13px; font-weight: normal; }
td { height: 42px; overflow: hidden; padding: 7px 9px; border-bottom: 1px solid #333; color: #bbb; white-space: nowrap; text-overflow: ellipsis; }
.email-table td { height: 52px; padding: 0; border: 1px solid #555; background: #080808; }
.email-table tbody tr { cursor: pointer; }
.email-table tbody tr:hover td { border-color: #fff; background: #181818; }
.email-table tbody tr.is-selected td { border-color: #fff; background: #202020; }
.email-table tbody tr.is-unread td { border-left: 5px solid #fff; color: #fff; font-weight: 600; }
.email-card { display: grid; grid-template-columns: minmax(125px,18%) minmax(0,1fr) 82px; align-items: center; gap: 14px; min-height: 50px; padding: 8px 12px; }
.email-sender, .email-summary { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.email-subject { color: #eee; }
.thread-count { margin-left: 7px; color: #aaa; font-weight: normal; }
.email-separator { color: #777; font-weight: normal; }
.email-snippet { color: #999; font-weight: normal; }
.date-cell { color: #aaa; font-size: 13px; text-align: right; }
.attachment-indicator { margin-right: 10px; color: #fff; font-size: 11px; }
.empty-row td { height: 90px; border: 1px solid #555; color: #999; text-align: center; }
.reading-pane { display: none; min-width: 0; min-height: 0; height: 100%; overflow-y: auto; background: #000; }
.back-button { display: none; margin-right: 8px; background: #fff; color: #000; font-weight: bold; }
.mail-view.is-reading .search-row { display: none; }
.mail-view.is-reading .toolbar { display: flex; }
.mail-view.is-reading .list-pane { display: none; }
.mail-view.is-reading .reading-pane { display: block; }
.mail-view.is-reading .back-button { display: inline-block; }
.empty-message { padding: 24px; color: var(--muted); text-align: center; }
.message-head { position: sticky; top: 0; z-index: 1; border-bottom: 1px solid #fff; background: #050505; }
.message-subject { padding: 20px 23px 13px; font-size: 20px; font-weight: bold; }
.message-meta { display: grid; grid-template-columns: 68px minmax(0,1fr); gap: 6px 11px; margin: 0; padding: 0 25px 20px; font-size: 15.5px; }
.message-meta dt { color: var(--muted); }
.message-meta dd { margin: 0; overflow-wrap: anywhere; color: #d5d8dc; }
.attachment-list { display: flex; flex-wrap: wrap; gap: 6px; }
.attachment-list button { min-height: 27px; padding: 3px 7px; text-align: left; }
.attachment-list button span { margin-left: 8px; color: #999; font-size: 11px; }
.message-body { max-width: 1045px; padding: 35px 30px; color: #fff; font-size: 15.5px; line-height: 1.6; white-space: pre-wrap; }
.account-view { border: 0; border-radius: 0; background: #000; }
.account-head, .system-head { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 14px; border: 0; border-bottom: 1px solid #fff; background: #080808; }
.account-head span { color: #aaa; font-size: 12px; }
.account-view { height: 100%; overflow-y: auto; padding: 0 0 28px; }
.identity-manager { width: calc(100% - 36px); max-width: 920px; margin: 22px 18px 0; border: 1px solid #fff; }
.manager-head { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 8px 11px; border-bottom: 1px solid #777; background: #080808; }
.manager-head span { color: #999; font-size: 12px; }
.new-identity-form { display: flex; align-items: end; gap: 8px; padding: 12px; border-bottom: 1px solid #777; }
.new-identity-form label { flex: 1; display: grid; gap: 5px; color: #aaa; }
.new-identity-form label span { display: flex; align-items: center; color: #ddd; }
.new-identity-form input { flex: 1; height: 35px; margin-right: 6px; border: 1px solid #aaa; padding: 5px 7px; background: #000; color: #fff; font: inherit; }
.manager-columns { display: grid; grid-template-columns: 105px minmax(0,1fr) 82px; gap: 8px; padding: 6px 10px; border-bottom: 1px solid #777; background: #111; color: #888; font-size: 11px; }
.managed-identity { display: grid; grid-template-columns: 105px minmax(0,1fr) 82px; align-items: center; gap: 8px; min-height: 54px; padding: 8px 10px; border-bottom: 1px solid #444; cursor: pointer; }
.managed-identity:last-child { border-bottom: 0; }
.managed-identity > span { color: #999; font-size: 12px; }
.managed-identity strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: normal; }
.managed-identity:hover { background: #202020; }
.managed-identity:focus-visible { outline: 1px solid #fff; outline-offset: -3px; }
.managed-identity.is-current { background: #fff; color: #000; }
.managed-identity.is-current > span { color: #333; }
.managed-identity.is-current:hover { background: #fff; }
.system-view { height: 100%; overflow-y: auto; background: #000; }
.system-head h2 { font-size: 16px; }
.system-head span { color: #aaa; font-size: 12px; }
.status-actions { display: flex; align-items: center; gap: 12px; }
.status-grid { display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid #fff; }
.status-grid div { min-height: 105px; display: flex; flex-direction: column; justify-content: space-between; padding: 14px; border-right: 1px solid #777; background: #050505; }
.status-grid div:last-child { border-right: 0; }
.status-grid span { color: #aaa; font-size: 12px; }
.status-grid strong { color: #fff; font-size: 25px; font-weight: normal; }
.system-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.system-table th:first-child { width: 16%; }
.system-table td { height: 42px; color: #ddd; }
.compose-view { height: 100%; overflow-y: auto; background: #000; }
.compose-form { padding: 18px; }
.compose-form label { display: grid; grid-template-columns: 78px minmax(0,1fr); align-items: center; max-width: 1000px; margin-bottom: 10px; color: var(--muted); }
.compose-form input, .compose-form textarea { width: 100%; border: 1px solid #777; border-radius: 0; padding: 8px 9px; background: var(--field); color: var(--text); font: inherit; }
.compose-form textarea { min-height: calc(100vh - 365px); margin-top: 8px; resize: vertical; }
.form-status { min-height: 22px; padding-top: 5px; color: #ddd; }
.compose-actions { display: flex; gap: 7px; margin-top: 10px; }
.compose-actions button[type="submit"] { border-color: #bbb; background: #ddd; color: #111; }
.login-page { min-height: 100vh; display: grid; place-items: center; background: #000; }
.login-shell { width: min(460px,calc(100vw - 32px)); border-top: 1px solid #fff; border-bottom: 1px solid #fff; }
.login-shell > header { height: 72px; display: flex; align-items: center; padding: 0 18px; border-bottom: 1px solid #777; }
.login-shell > section { padding: 24px 18px 28px; }
.login-shell h2 { margin-bottom: 22px; }
.login-shell form { display: grid; gap: 12px; }
.login-shell label { display: grid; grid-template-columns: 90px minmax(0,1fr); align-items: center; gap: 10px; color: #bbb; }
.login-shell input { min-height: 36px; border: 1px solid #fff; padding: 5px 7px; background: #000; color: #fff; font: inherit; }
.login-shell .form-status { height: 30px; min-height: 30px; overflow: hidden; padding-top: 5px; }
.login-shell button { justify-self: end; min-width: 100px; margin-top: 5px; border-color: #fff; background: #fff; color: #000; font-weight: bold; }
.auth-link { display: inline-block; margin-top: 22px; color: #ccc; text-decoration: underline; }
.registration-shell .form-status { height: 30px; min-height: 30px; overflow: hidden; }
.error-shell .error-code { margin: 0 0 10px; color: #fff; font-size: 44px; line-height: 1; font-weight: bold; }
.error-shell p { margin: 0; color: #aaa; }
.error-shell .auth-link { margin-top: 28px; }
.is-hidden { display: none; }
@media (max-width: 800px) {
  .account-name, .quota { display: none; }
  .main-frame { grid-template-columns: 198px minmax(0,1fr); }
  .mail-grid { grid-template-columns: 1fr; min-height: 0; }
  .list-pane { max-height: 385px; border-right: 0; border-bottom: 1px solid var(--line); }
  .reading-pane { min-height: 418px; }
  .search-row, .toolbar { flex-wrap: wrap; }
  .email-card { grid-template-columns: minmax(110px,30%) minmax(0,1fr) 72px; }
}
@media (max-width: 560px) {
  .page-shell { height: auto; min-height: 100vh; overflow: visible; }
  .main-frame { height: auto; min-height: calc(100vh - 114px); }
  .folder-pane, .workspace { overflow: visible; }
  .topbar { height: auto; min-height: 58px; padding: 10px 12px; }
  .account-box a:nth-of-type(1), .account-box a:nth-of-type(2) { display: none; }
  .nav-strip { padding: 0 6px; }
  .main-frame { display: block; }
  .folder-pane { padding: 9px; border-right: 0; border-bottom: 1px solid var(--line); }
  .compose-main { margin-bottom: 8px; }
  .folder-list { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); margin: 0; }
  .folder-list button { overflow: hidden; padding: 6px 4px; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
  .folder-list .icon, .folder-count, .panel-title, .ad-box { display: none; }
  .workspace { padding: 7px; }
  .search-label { display: none; }
  .search-row input { flex: 1; min-width: 130px; }
  th:nth-child(2), td:nth-child(2) { display: none; }
  .message-body { padding: 18px; }
  .email-card { grid-template-columns: minmax(0,1fr) 65px; gap: 3px 9px; }
  .email-sender, .email-summary { grid-column: 1; }
  .email-snippet, .email-separator { display: none; }
  .date-cell { grid-column: 2; grid-row: 1 / 3; }
  .identity-manager { width: 100%; margin: 12px 0 0; }
  .new-identity-form { align-items: stretch; flex-direction: column; }
  .new-identity-form label span { min-width: 0; }
  .new-identity-form input { min-width: 0; }
  .manager-columns, .managed-identity { grid-template-columns: 72px minmax(0,1fr) 72px; gap: 5px; }
}