/* FaxManager 0.2 — graphite / cool silver / cobalt. */
:root {
    --ink: #202b3a;
    --muted: #697586;
    --line: #e0e5ec;
    --surface: #ffffff;
    --canvas: #f3f5f8;
    --accent: #285de5;
    --nav: #151e2d;
    --rz-primary: #285de5;
    --rz-primary-light: #edf2ff;
    --rz-primary-lighter: #f4f7ff;
    --rz-on-primary: #fff;
    --rz-text-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --rz-border-radius: 5px;
    --rz-body-font-size: 13px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 13px/1.45 var(--rz-text-font-family); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #6891fc; outline-offset: 3px; }
.shell { display: flex; min-height: 100vh; }
.sidebar { width: 208px; background: var(--nav); color: #c4cedd; position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; padding: 19px 12px 14px; z-index: 10; border-right: 1px solid #111a28; }
.brand { display: flex; align-items: center; gap: 9px; font-size: 18px; letter-spacing: -.6px; font-weight: 650; color: #f3f6fc; padding: 0 7px; }
.brand-icon { display: inline-flex; width: 27px; height: 27px; align-items: center; justify-content: center; background: #2e62e9; color: white; border-radius: 5px; }
.brand-icon .rzi { font-size: 19px; }
.workspace { display: flex; align-items: center; gap: 8px; border: 1px solid #303b4d; padding: 10px 8px; border-radius: 5px; margin: 23px 0 22px; background: #1c2738; }
.workspace strong { font-size: 11px; font-weight: 550; color: #e6edf8; }
.workspace small, .profile small { display: block; font-size: 10px; color: #8f9eb3; margin-top: 2px; }
.workspace-avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid #48556b; border-radius: 4px; color: #c0d0ee; background: #28364b; font-size: 12px; }
.workspace .rzi { margin-left: auto; font-size: 15px; color: #8492a7; }
.nav-caption { color: #7c8a9f; font-size: 9px; letter-spacing: 1.2px; font-weight: 650; margin: 0 10px 9px; }
nav a { display: flex; align-items: center; gap: 10px; min-height: 35px; padding: 8px 10px; margin: 2px 0; font-size: 12px; border-radius: 4px; font-weight: 500; color: #a8b5c7; transition: background .12s, color .12s; }
nav a.active { background: #2a3a56; color: #f3f7ff; box-shadow: inset 2px 0 0 #749bfd; }
nav a.active .rzi { color: #9dbbff; }
nav a:hover:not(.active) { background: #202d41; color: #e7edf6; }
nav .rzi { font-size: 17px; color: #8697ae; }
.nav-divider { height: 1px; background: #2b3648; margin: 15px 9px; }
.sidebar-bottom { margin-top: auto; padding-top: 24px; }
.sandbox-card { padding: 11px 9px; border: 1px solid #2d3c50; border-radius: 5px; background: #1a2637; }
.sandbox-card strong { font-size: 10px; font-weight: 550; color: #bcc9dc; }
.sandbox-card p { color: #91a1b8; font-size: 10px; margin: 6px 0 9px; }
.sandbox-card a { display: flex; justify-content: space-between; font-size: 10px; color: #abc4f9; }
.live-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #5885ee; margin-right: 6px; }
.profile { display: flex; align-items: center; gap: 8px; border-top: 1px solid #2b3648; padding: 13px 5px 0; margin-top: 14px; }
.avatar, .top-avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 5px; background: #34435c; color: #d6e1f6; font-size: 11px; font-weight: 600; }
.profile strong { font-size: 11px; color: #d3ddeb; font-weight: 500; }
.profile form { margin-left: auto; }
.profile .icon-button { color: #92a2bb; }
.main { margin-left: 208px; width: calc(100% - 208px); }
.topbar { height: 48px; background: white; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 11px; color: #7b8798; }
.topbar strong { color: #48566b; font-weight: 500; }
.topbar>span .muted { margin: 0 11px; color: #c4ccd7; }
.topbar>div { display: flex; align-items: center; gap: 14px; }
.demo-badge { display: inline-flex; align-items: center; border: 1px solid #dce4f3; border-radius: 4px; padding: 3px 7px; font-size: 10px; background: #f6f8fd; color: #607496; font-weight: 500; line-height: 1.4; }
.top-avatar { width: 25px; height: 25px; background: #edf1f7; color: #5d6e87; font-size: 10px; }
main { padding: 23px 24px 18px; max-width: 1920px; margin: auto; }
.page-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 16px; }
.eyebrow { font-size: 9px; letter-spacing: 1.3px; font-weight: 650; color: #7d8ca0; margin-bottom: 10px; }
h1 { font-size: 23px; line-height: 1.25; letter-spacing: -.75px; margin: 0; font-weight: 650; }
.page-heading p { font-size: 11px; color: var(--muted); margin: 6px 0 0; }
.heading-actions { display: flex; gap: 8px; }
.primary, .rz-button { background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: 5px; min-height: 32px; font-size: 11px; text-transform: none; box-shadow: 0 1px 2px #172b4710; font-weight: 550; padding: 0 12px; letter-spacing: 0; }
.rz-button .rzi { font-size: 16px; }
.rz-button.rz-light { background: #f5f7fa; border-color: var(--line); color: #4d5c70; }
.primary:hover, .rz-button:not(:disabled):hover { filter: brightness(.95); }
.secondary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #d8dfe9; border-radius: 5px; background: #fff; min-height: 32px; padding: 6px 10px; font-size: 11px; color: #4d5b70; font-weight: 500; box-shadow: 0 1px 2px #172b4707; }
.secondary:hover { background: #f6f8fc; }
.secondary .rzi { font-size: 15px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 6px; background: #fff; margin-bottom: 18px; box-shadow: 0 1px 3px #1b2f4b03; }
.stat { padding: 13px 18px; border-right: 1px solid var(--line); }
.stat:last-child { border: 0; }
.stat>div { display: flex; justify-content: space-between; font-size: 11px; color: #617084; }
.stat .rzi { font-size: 16px; color: #90a0b5; }
.stat strong { display: flex; align-items: center; gap: 12px; font-size: 26px; font-weight: 600; letter-spacing: -.9px; line-height: 1.15; margin: 8px 0 4px; font-variant-numeric: tabular-nums; }
.stat-trend { color: #75869d; font-weight: 400; font-size: 10px; letter-spacing: 0; }
.stat small { font-size: 10px; color: #8591a2; }
.accent-stat strong { color: #285de5; }
.fax-panel { background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; box-shadow: 0 2px 4px #1b2f4b04; }
.panel-title { display: flex; justify-content: space-between; padding: 13px 16px 11px; align-items: center; gap: 12px; }
.panel-title>div { display: flex; align-items: center; gap: 8px; }
h2 { font-size: 13px; font-weight: 600; letter-spacing: -.15px; margin: 0; }
.count { font-size: 10px; background: #f0f3f8; border: 1px solid #e4e9f0; border-radius: 4px; padding: 0 5px; color: #718197; font-variant-numeric: tabular-nums; }
.import-link, .text-action { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; cursor: pointer; color: #536783; line-height: 24px; }
.text-action { background: transparent; border: 0; padding: 0 10px 0 0; border-right: 1px solid var(--line); }
.import-link .rzi, .text-action .rzi { font-size: 16px; }
.import-link input, .upload-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.import-link:focus-within, .upload-zone:focus-within { outline: 2px solid #6891fc; outline-offset: 3px; }
.toolbar { display: flex; justify-content: space-between; align-items: center; padding: 0 16px 11px; gap: 12px; }
.tabs { display: flex; gap: 3px; background: #f1f4f8; padding: 3px; border-radius: 5px; }
.tabs button { background: transparent; border: 1px solid transparent; border-radius: 3px; color: #748095; font-size: 10px; padding: 4px 10px; line-height: 16px; }
.tabs button.selected { background: #fff; border-color: #e0e6ef; color: #2b3b52; font-weight: 550; box-shadow: 0 1px 2px #20385807; }
.search-box { display: flex; align-items: center; border: 1px solid #dde3ec; border-radius: 4px; padding: 6px 9px; gap: 7px; color: #8c9ab0; background: #fcfdff; }
.search-box .rzi { font-size: 16px; }
.search-box input { border: 0; outline: 0; font-size: 11px; width: 212px; background: none; color: var(--ink); }
.search-box:focus-within { border-color: #6891fc; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th { font-size: 9px; font-weight: 550; color: #7a879b; letter-spacing: .5px; background: #f8f9fc; padding: 9px 10px; border-top: 1px solid #e7ebf1; border-bottom: 1px solid #e4e9f0; white-space: nowrap; }
td { padding: 9px 10px; border-bottom: 1px solid #edf0f5; font-size: 11px; }
tr:hover td { background: #f8faff; }
.star-cell { width: 34px; }
.star-button { font-size: 18px; border: 0; background: none; color: #bec8d5; padding: 3px; }
.starred { color: #be9440; }
.document-cell { border: 0; background: none; display: flex; align-items: center; text-align: left; gap: 9px; color: var(--ink); padding: 0; }
.document-cell strong { font-size: 11px; font-weight: 500; }
.unread .document-cell strong { font-weight: 600; }
.document-icon { width: 27px; height: 31px; display: flex; align-items: center; justify-content: center; border: 1px solid #dfe6f1; border-radius: 4px; background: #f5f8fd; color: #8194b1; flex-shrink: 0; }
.document-icon .rzi { font-size: 16px; }
.document-cell small { display: block; color: #8792a3; font-size: 10px; margin-top: 2px; }
.document-cell small span { margin: 0 4px; color: #bdc6d3; }
.status { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; padding: 2px 6px; border-radius: 4px; background: #f0f3f7; color: #69788e; white-space: nowrap; line-height: 16px; }
.status span { font-size: 6px; }
.status.received { background: #edf3ff; color: #4b70b1; }
.status.delivered { background: #eaf6f2; color: #36836c; }
.status.failed { background: #fff0ef; color: #bb665e; }
.status.queued { background: #fcf5e7; color: #ab823a; }
.date { font-size: 10px; color: #66768d; font-variant-numeric: tabular-nums; }
.time { display: block; font-size: 9px; color: #99a5b6; margin-top: 2px; font-variant-numeric: tabular-nums; }
.muted { color: #7d8b9f; }
.muted-light { color: #9fabbc; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: #8d9db4; padding: 5px; border-radius: 4px; }
.icon-button:hover { background: #edf2fa; color: #4874c5; }
.icon-button .rzi { font-size: 16px; }
.unread-dot { display: inline-block; height: 4px; width: 4px; background: #5281eb; border-radius: 50%; margin: 0 0 2px 5px; }
.table-footer { display: flex; justify-content: space-between; padding: 10px 16px; font-size: 10px; color: #8a97aa; background: #fcfdff; }
.table-footer>span:last-child { display: flex; align-items: center; gap: 6px; }
.table-footer .rzi { font-size: 12px; }
footer { display: flex; justify-content: space-between; padding: 0 24px 16px; color: #9aa6b7; font-size: 9px; letter-spacing: .2px; }
.empty { text-align: center; padding: 38px 16px; color: #8190a6; }
.empty>.rzi { font-size: 29px; }
.empty h3 { font-size: 14px; color: #586981; font-weight: 500; }
.empty p { font-size: 11px; }
.overlay, .modal-shade { position: fixed; inset: 0; background: #0d182955; backdrop-filter: blur(2px); z-index: 30; }
.detail-drawer { position: fixed; right: 0; top: 0; bottom: 0; width: 540px; max-width: 100%; background: #fff; z-index: 31; padding: 21px; overflow: auto; box-shadow: -12px 0 50px #0d19271a; }
.drawer-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.drawer-header .eyebrow { margin: 0; }
.detail-drawer>h2, .compose-modal h2 { font-size: 20px; font-weight: 600; letter-spacing: -.5px; }
.detail-drawer>p, .compose-modal>p { font-size: 11px; color: #7e8ba0; margin: 7px 0 13px; }
.preview { margin: 15px 0; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: #eef2f7; }
.preview iframe { display: block; width: 100%; height: 400px; border: 0; }
.preview img { display: block; width: 100%; max-height: 400px; object-fit: contain; }
.detail-meta { display: flex; gap: 38px; padding-bottom: 8px; }
.detail-meta span { font-size: 10px; color: #8795a9; }
.detail-meta strong { display: block; font-size: 11px; color: #495b74; font-weight: 500; margin-top: 4px; }
.field-label { display: flex; flex-direction: column; gap: 6px; margin: 13px 0; font-size: 11px; font-weight: 500; color: #546277; }
.field-label input, .field-label textarea, textarea { width: 100%; border: 1px solid #d9e0ea; border-radius: 4px; padding: 8px 10px; background: #fff; color: var(--ink); font-size: 12px; min-height: 34px; }
textarea { resize: vertical; }
.drawer-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.modal-shade { display: flex; justify-content: center; align-items: center; padding: 16px; overflow: auto; }
.compose-modal { background: #fff; border: 1px solid #e1e7ef; border-radius: 8px; padding: 24px; width: 440px; max-height: calc(100dvh - 32px); overflow: auto; box-shadow: 0 20px 70px #101c3733; }
.upload-zone { border: 1px dashed #b9c8e0; background: #f8faff; border-radius: 5px; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.upload-zone .rzi { font-size: 24px; color: #819ac2; }
.upload-zone strong { font-size: 11px; font-weight: 500; }
.upload-zone>span { font-size: 10px; color: #8798b0; }
.demo-info { color: #8391a7; font-size: 10px; padding: 5px 0; }
.send-button { width: 100%; margin-top: 10px; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 50; background: #202e44; border: 1px solid #364864; color: #fff; padding: 11px 16px; border-radius: 6px; box-shadow: 0 8px 30px #15233a30; display: flex; align-items: center; gap: 20px; font-size: 11px; }
.toast button { color: #bdcbe0; background: none; border: 0; font-size: 18px; }
.error { color: #b2514a; font-size: 11px; }
.contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.contact-card { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 17px; }
.contact-avatar { display: flex; align-items: center; justify-content: center; width: 33px; height: 33px; border-radius: 5px; background: #edf2fa; border: 1px solid #dfe7f4; color: #6781a7; font-size: 14px; font-weight: 500; }
.contact-card h3 { margin: 11px 0 3px; font-size: 12px; font-weight: 600; }
.contact-card p { font-size: 11px; color: #8a97aa; margin: 0; }
.contact-card>div { display: flex; align-items: center; gap: 7px; border-top: 1px solid #ecf0f5; padding-top: 12px; margin-top: 14px; font-size: 10px; color: #75869d; }
.contact-card .rzi { font-size: 15px; }
.settings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.settings-card { border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 20px; }
.settings-icon { display: inline-flex; padding: 7px; background: #f1f5fc; border: 1px solid #e3eaf5; border-radius: 5px; color: #6d85aa; margin-bottom: 13px; }
.settings-icon .rzi { font-size: 19px; }
.settings-card h2 { margin-bottom: 12px; font-size: 14px; }
.settings-card p { font-size: 11px; line-height: 1.7; color: #7e8ca0; }
.settings-card dl { font-size: 11px; }
.settings-card dt { margin-top: 15px; color: #8b98ab; }
.settings-card dd { margin: 4px 0; color: #4d5f78; }
.settings-card small { font-size: 10px; line-height: 1.65; color: #8d9bb0; }
.login-page { min-height: 100dvh; display: grid; grid-template-columns: minmax(360px, 46%) 1fr; background: #fff; }
.login-art { display: flex; flex-direction: column; position: relative; overflow: hidden; padding: 38px 48px 26px; background: #151e2d; color: #e9eef8; }
.login-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 90% 35%, #355f9b22, transparent 65%); }
.login-art>* { position: relative; z-index: 1; }
.login-art .brand { padding: 0; font-size: 21px; }
.login-intro { margin: auto 0; padding: 70px 0; }
.login-intro .eyebrow { display: block; color: #7c93b8; font-size: 9px; letter-spacing: 1.8px; margin-bottom: 22px; }
.login-intro h1 { font-size: clamp(32px, 3.2vw, 49px); line-height: 1.14; letter-spacing: -1.8px; font-weight: 550; color: #eef3fc; }
.login-intro>p { color: #93a5c0; font-size: 13px; line-height: 1.8; margin: 20px 0 36px; }
.login-capabilities { max-width: 360px; border-top: 1px solid #334157; padding-top: 9px; }
.login-capabilities>div { display: flex; align-items: center; gap: 13px; margin: 20px 0; }
.login-capabilities .rzi { font-size: 18px; color: #7898cb; }
.login-capabilities strong { display: block; font-size: 11px; color: #c3d0e4; font-weight: 500; }
.login-capabilities small { display: block; color: #7e92af; font-size: 10px; margin-top: 3px; }
.login-art-footer { display: flex; justify-content: space-between; border-top: 1px solid #2d3b50; padding-top: 16px; font-size: 8px; letter-spacing: 1.4px; color: #7286a4; }
.login-form { display: flex; align-items: center; justify-content: center; padding: 40px; background: #fdfdfe; }
.login-form>div { width: 330px; }
.login-form h2 { font-size: 24px; font-weight: 600; letter-spacing: -.7px; margin: 23px 0 9px; }
.login-form>div>p { font-size: 11px; color: #8390a3; margin: 0 0 28px; }
.login-form label { display: block; font-size: 11px; font-weight: 500; color: #536176; margin: 17px 0; }
.login-form input { display: block; width: 100%; margin-top: 7px; padding: 10px 11px; border: 1px solid #d8e0eb; border-radius: 5px; background: #fff; font-size: 12px; color: var(--ink); }
.login-submit { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; margin-top: 24px; min-height: 38px; }
.login-submit .rzi { font-size: 17px; }
.demo-credentials { display: flex; align-items: flex-start; gap: 9px; background: #f4f7fc; border: 1px solid #e2e8f2; border-radius: 5px; padding: 12px; margin-top: 23px; }
.demo-credentials>.rzi { font-size: 16px; color: #7a90b0; margin-top: 1px; }
.demo-credentials strong { font-size: 10px; font-weight: 550; color: #657b9a; }
.demo-credentials p { font-size: 10px; color: #8595ac; margin: 5px 0 0; }
.demo-credentials b { color: #435d82; font-weight: 550; }
.credential-divider { margin: 0 8px; color: #b1bed0; }
.login-note { display: block; color: #98a4b6; font-size: 9px; margin-top: 19px; }
@media (min-width: 1700px) {
    main { padding: 28px 32px 20px; }
    .topbar { padding: 0 32px; }
    footer { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 1200px) {
    .stat-trend { display: none; }
    .contact-grid, .settings-grid { grid-template-columns: repeat(2, 1fr); }
    .stat { padding: 12px 14px; }
}
@media (max-width: 900px) {
    .sidebar { width: 180px; padding: 18px 10px 12px; }
    .brand { font-size: 16px; gap: 7px; padding: 0 4px; }
    .brand-icon { width: 24px; height: 24px; }
    .workspace-avatar { display: none; }
    .main { margin-left: 180px; width: calc(100% - 180px); }
    main { padding: 20px 16px 16px; }
    .topbar { padding: 0 16px; }
    .page-heading { align-items: flex-start; }
    .heading-actions { flex-direction: column; }
    .table-scroll { overflow-x: auto; }
    table { min-width: 620px; }
    .search-box input { width: 150px; }
    .panel-title { align-items: flex-start; }
    .panel-title .panel-actions { flex-wrap: wrap; justify-content: flex-end; }
    .login-art { padding: 30px; }
    .login-form { padding: 30px; }
    .login-form h2 { font-size: 22px; }
    .login-intro h1 { font-size: 36px; }
}
@media (max-width: 640px) {
    .shell { display: block; }
    .sidebar { position: static; width: 100%; padding: 12px 14px 8px; display: block; }
    .sidebar .brand { font-size: 17px; }
    .workspace, .nav-caption, .sidebar-bottom, .nav-divider { display: none; }
    nav { display: flex; overflow-x: auto; gap: 4px; margin-top: 11px; scrollbar-width: thin; }
    nav a { padding: 6px 8px; min-height: 31px; white-space: nowrap; font-size: 10px; gap: 5px; }
    nav a.active { box-shadow: inset 0 -2px 0 #749bfd; }
    nav .rzi { font-size: 15px; }
    .main { margin: 0; width: 100%; }
    .topbar { height: 40px; padding: 0 14px; font-size: 10px; }
    main { padding: 18px 12px 14px; }
    h1 { font-size: 21px; }
    .page-heading { flex-direction: column; gap: 12px; margin-bottom: 15px; }
    .heading-actions { flex-direction: row; }
    .stats { grid-template-columns: repeat(2, 1fr); margin-bottom: 14px; }
    .stat { padding: 11px 13px; }
    .stat:nth-child(2) { border-right: 0; }
    .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .stat strong { font-size: 23px; margin: 6px 0 3px; }
    .panel-title { flex-wrap: wrap; padding: 12px; }
    .panel-title .panel-actions { gap: 10px; }
    .toolbar { padding: 0 12px 11px; flex-wrap: wrap; }
    .search-box { width: 100%; }
    .search-box input { width: 100%; }
    .table-footer { padding: 10px 12px; }
    .table-footer .muted-light { display: none; }
    footer { padding: 0 12px 14px; font-size: 8px; }
    .contact-grid { gap: 9px; }
    .contact-card { padding: 13px; }
    .settings-grid { grid-template-columns: 1fr; }
    .settings-card { padding: 17px; }
    .toast { width: calc(100% - 24px); bottom: 12px; }
    .compose-modal { padding: 20px; }
    .login-page { grid-template-columns: 1fr; }
    .login-art { padding: 22px 26px; }
    .login-intro, .login-art-footer { display: none; }
    .login-form { padding: 38px 26px 50px; align-items: flex-start; }
    .login-form>div { width: 100%; max-width: 360px; }
    .login-form h2 { font-size: 23px; }
}
/* Route focus is programmatic; controls retain visible keyboard focus. */
h1:focus { outline: none; }
.field-label .rz-textbox { height: 34px; }

/* Full-window document workspace; details are optional. */
body:has(.fax-viewer) { overflow: hidden; }
.fax-viewer { position: fixed; inset: 0; z-index: 31; display: flex; flex-direction: column; background: #e8edf3; outline: none; }
.viewer-toolbar { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: #fff; }
.viewer-heading { min-width: 0; }
.viewer-heading h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.viewer-heading small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.viewer-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.viewer-close { width: 32px; height: 32px; margin-left: 4px; border: 1px solid var(--line); }
.viewer-body { display: flex; flex: 1; min-height: 0; position: relative; }
.fax-viewer .preview { flex: 1; min-width: 0; min-height: 0; margin: 0; border: 0; border-radius: 0; background: #e8edf3; }
.fax-viewer .preview iframe { width: 100%; height: 100%; display: block; border: 0; }
.fax-viewer .preview img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.viewer-details { width: 300px; flex-shrink: 0; padding: 18px; border-left: 1px solid var(--line); background: #fff; overflow-y: auto; }
.viewer-details .detail-meta { gap: 22px; }
.viewer-details .drawer-actions { flex-direction: column; align-items: stretch; }
@media (max-width: 640px) {
    .viewer-toolbar { padding: 8px 10px; gap: 8px; }
    .viewer-heading h2 { font-size: 11px; }
    .viewer-heading small { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
    .viewer-actions { gap: 5px; }
    .viewer-actions .status, .viewer-actions .secondary span:not(.rzi) { display: none; }
    .viewer-actions .secondary { width: 30px; padding: 6px; }
    .viewer-close { margin-left: 0; width: 30px; }
    .viewer-details { position: absolute; inset: 0 0 0 auto; width: min(300px, 100%); box-shadow: -8px 0 24px #15233a18; }
}
/* Mail workspace: independent list and document scrolling. */
body:has(.mail-workspace) main { height: calc(100dvh - 48px); min-height: 560px; max-width: none; display: flex; flex-direction: column; padding: 20px 22px 22px; }
body:has(.mail-workspace) footer { display: none; }
body:has(.fax-viewer:not(.is-expanded)) { overflow: auto; }
body:has(.fax-viewer.is-expanded) { overflow: hidden; }
.mail-heading { flex-shrink: 0; margin-bottom: 16px; }
.mail-heading .eyebrow { margin-bottom: 5px; font-size: 8px; letter-spacing: 1.6px; }
.mail-heading h1 { font-size: 25px; font-weight: 550; letter-spacing: -.8px; }
.activity-strip { display: flex; flex-shrink: 0; align-items: center; gap: 20px; padding: 0 2px 16px; font-size: 10px; color: #8a98ac; }
.activity-strip>span:first-child { color: #5a6b83; }
.activity-strip strong { color: #445973; font-size: 12px; margin-right: 3px; font-variant-numeric: tabular-nums; }
.activity-strip .text-action { margin-left: auto; border: 0; padding: 0; font-size: 10px; }
.activity-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #4879d9; margin: 0 5px 2px 0; }
.mail-workspace { display: flex; flex: 1; min-height: 0; overflow: hidden; border: 1px solid #dce3ed; border-radius: 8px; background: #fff; box-shadow: 0 3px 12px #19385e05; }
.mail-list { display: flex; flex-direction: column; flex: 0 0 324px; min-height: 0; border-right: 1px solid #dce3ed; background: #fff; }
.mail-list-heading { display: flex; align-items: center; gap: 8px; padding: 16px 15px 13px; font-size: 11px; }
.mail-list-heading strong { font-weight: 600; }
.list-sort { font-size: 9px; color: #99a7ba; margin-left: auto; }
.mail-list>.search-box { margin: 0 13px 10px; flex-shrink: 0; padding: 8px; }
.mail-list>.search-box input { width: 100%; min-width: 0; font-size: 10px; }
.mail-list>.tabs { margin: 0 13px 12px; align-self: flex-start; flex-shrink: 0; }
.mail-list>.tabs button { padding: 3px 13px; }
.mail-items { overflow-y: auto; flex: 1; min-height: 0; border-top: 1px solid #e8edf4; scrollbar-width: thin; scrollbar-color: #d1dbe9 transparent; }
.mail-item { position: relative; border-bottom: 1px solid #edf1f7; background: #fff; }
.mail-item.is-selected { background: #edf3ff; box-shadow: inset 3px 0 #3b6ce6; }
.mail-item:hover:not(.is-selected) { background: #f8fafd; }
.mail-item-open { display: block; text-align: left; width: 100%; padding: 13px 15px 12px; border: 0; background: none; color: var(--ink); }
.mail-item-top { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.sender-avatar { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: #f1f4f9; border: 1px solid #e1e7f0; border-radius: 6px; font-size: 10px; color: #7890af; flex-shrink: 0; }
.mail-item-top strong { font-size: 11px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-item-top time { margin-left: auto; white-space: nowrap; font-size: 8px; color: #91a1b7; }
.mail-subject { display: block; font-size: 11px; padding-right: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #53667e; }
.is-unread .mail-subject { color: #23364e; font-weight: 600; }
.mail-subject .unread-dot { margin-left: 0; margin-right: 5px; }
.mail-number { display: block; font-size: 9px; color: #9aa9bd; margin: 4px 0 10px; }
.mail-item-bottom { display: flex; align-items: center; gap: 10px; font-size: 9px; color: #8fa0b7; }
.mail-item-bottom .status { font-size: 8px; padding: 0 5px; }
.mail-separator { color: #c1cbd8; margin: 0 4px; }
.mail-item>.star-button { position: absolute; right: 9px; top: 46px; font-size: 17px; }
.mail-list-footer { display: flex; justify-content: space-between; padding: 9px 14px; font-size: 9px; color: #94a3b9; border-top: 1px solid #e5ebf3; background: #fcfdff; }
.mail-document { min-width: 0; flex: 1; position: relative; display: flex; background: #f2f5f9; }
.document-placeholder { margin: auto; padding: 30px; text-align: center; color: #7f92ad; }
.placeholder-paper { margin: 0 auto 28px; width: 106px; height: 133px; border: 1px solid #dbe4f0; border-radius: 8px; background: #fff; box-shadow: 9px 9px 0 #e9eef6, 0 8px 25px #19385e05; padding: 17px; text-align: left; }
.placeholder-paper .rzi { color: #96aed1; font-size: 28px; margin-bottom: 13px; }
.placeholder-paper span { display: block; height: 3px; background: #e9eef6; margin-top: 8px; border-radius: 2px; }
.placeholder-paper span:last-child { width: 65%; }
.document-placeholder .eyebrow { display: block; font-size: 8px; letter-spacing: 1.8px; color: #99aac0; }
.document-placeholder h2 { font-size: 21px; font-weight: 500; letter-spacing: -.6px; color: #5b6f8c; }
.document-placeholder p { font-size: 11px; line-height: 1.8; color: #92a3bb; margin-top: 13px; }
.placeholder-hint { display: flex; justify-content: center; align-items: center; gap: 7px; font-size: 9px; color: #9cacc1; margin-top: 27px; }
.placeholder-hint .rzi { font-size: 16px; }
.fax-viewer { position: relative; inset: auto; z-index: auto; flex: 1; min-width: 0; }
.fax-viewer.is-expanded { position: fixed; inset: 0; z-index: 31; }
.viewer-toolbar { padding: 11px 13px; gap: 12px; min-height: 62px; }
.viewer-heading h2 { font-size: 12px; }
.viewer-actions { gap: 5px; }
.viewer-actions .secondary { width: 30px; min-height: 30px; padding: 5px; }
.viewer-actions .secondary span:not(.rzi) { display: none; }
.viewer-actions .icon-button { height: 30px; width: 28px; }
.viewer-pager { display: flex; border-right: 1px solid #e3e9f2; padding-right: 5px; margin-right: 3px; }
.viewer-pager button:disabled { opacity: .3; cursor: default; }
.viewer-details { width: 270px; }
.viewer-details>.status { margin-bottom: 17px; }
@media (min-width: 1700px) { .mail-list { flex-basis: 356px; }.mail-item-open { padding: 15px 18px; }.mail-item>.star-button { top: 48px; } }
@media (max-width: 1200px) { .mail-list { flex-basis: 280px; }.viewer-toolbar { align-items: flex-start; flex-direction: column; gap: 8px; }.viewer-heading { width: 100%; }.viewer-actions { align-self: flex-end; }.viewer-details { position: absolute; inset: 0 0 0 auto; box-shadow: -8px 0 24px #15233a18; }.activity-strip { gap: 12px; }.activity-strip>span:first-child { display: none; } }
@media (max-width: 760px) { .mail-workspace { flex-direction: column; }.mail-list { flex: 0 0 260px; width: 100%; border-right: 0; border-bottom: 1px solid #dce3ed; }.mail-list-heading { padding: 10px 12px; }.mail-list>.tabs { display: none; }.mail-item-open { padding: 9px 13px; }.mail-number { display: none; }.mail-item-top { margin-bottom: 5px; }.mail-item-bottom { margin-top: 7px; }.mail-item>.star-button { top: 35px; }.mail-list-footer { display: none; }.mail-document { min-height: 300px; }.viewer-toolbar { flex-direction: row; align-items: center; }.viewer-heading { width: auto; }.viewer-actions { align-self: auto; }.viewer-pager { display: none; }.placeholder-paper { display: none; }.document-placeholder { padding: 20px; }.document-placeholder h2 { font-size: 18px; }.placeholder-hint { margin-top: 16px; } }
@media (max-width: 640px) { body:has(.mail-workspace) main { height: auto; min-height: calc(100dvh - 130px); padding: 16px 10px; }.mail-heading { flex-direction: row; align-items: center; gap: 9px; }.mail-heading h1 { font-size: 21px; }.mail-heading .eyebrow { font-size: 6px; }.mail-heading .heading-actions { gap: 4px; }.mail-heading .heading-actions>a { display: none; }.mail-heading .secondary,.mail-heading .rz-button { font-size: 10px; padding: 0 8px; }.activity-strip { flex-wrap: wrap; gap: 8px 14px; padding-bottom: 12px; font-size: 9px; }.activity-strip .text-action { font-size: 9px; }.mail-workspace { min-height: 600px; }.mail-document { height: 420px; flex: 0 0 420px; }.viewer-heading small { max-width: 140px; }.viewer-actions { gap: 3px; }.viewer-actions .icon-button { width: 25px; }.viewer-actions .secondary { width: 26px; } }

/* Compact action controls and workspace toolbars. */
.shell .rz-button, .shell .primary, .shell .secondary {
    height: 26px; min-height: 26px; padding: 0 9px; line-height: 16px; font-size: 11px;
}
.shell .rz-button .rz-button-box { line-height: 16px; gap: 5px; }
.shell .rz-button .rzi, .shell .secondary .rzi { font-size: 15px; }
.topbar { height: 36px; }
.top-avatar { width: 22px; height: 22px; }
body:has(.mail-workspace) main { height: calc(100dvh - 36px); padding-top: 12px; }
.mail-heading { min-height: 26px; margin-bottom: 10px; align-items: center; }
.mail-heading .eyebrow { display: none; }
.mail-heading h1 { font-size: 20px; line-height: 26px; }
.mail-heading .heading-actions { flex-direction: row; align-items: center; }
.activity-strip { padding-bottom: 9px; }
.activity-strip .text-action { line-height: 18px; }
.viewer-toolbar { min-height: 40px; padding: 4px 10px; gap: 8px; }
.viewer-heading h2 { line-height: 16px; }
.viewer-heading small { line-height: 13px; margin-top: 1px; }
.viewer-actions .secondary, .viewer-actions .icon-button { height: 26px; min-height: 26px; width: 26px; padding: 3px; }
.viewer-actions .rzi { font-size: 15px; }
.viewer-pager { padding-right: 4px; margin-right: 1px; }
@media (max-width: 640px) {
    body:has(.mail-workspace) main { height: auto; padding-top: 10px; }
    .mail-heading h1 { font-size: 19px; }
    .mail-heading .secondary, .mail-heading .rz-button { font-size: 10px; padding: 0 7px; }
    .viewer-toolbar { padding: 4px 7px; }
}
/* Navigation feedback begins in the browser, before a server round trip. */
.navigation-progress { display: none; position: fixed; top: 35px; left: 208px; right: 0; height: 2px; overflow: hidden; z-index: 25; background: #dfe9ff; }
.navigation-progress::after { content: ''; position: absolute; height: 100%; width: 32%; background: #356ceb; animation: navigation-progress 1s ease-in-out infinite; }
.navigation-status { display: none; position: fixed; top: 44px; right: 24px; z-index: 26; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid #dce5f2; border-radius: 5px; background: #fff; color: #657c9c; font-size: 11px; box-shadow: 0 2px 9px #19385e0a; }
.navigation-spinner { width: 12px; height: 12px; border: 2px solid #e3eafa; border-top-color: #487be2; border-radius: 50%; animation: navigation-spin .7s linear infinite; }
.navigation-loading .navigation-progress { display: block; }
.navigation-loading .navigation-status { display: flex; }
.navigation-loading .main main { opacity: .55; pointer-events: none; }
.sidebar nav a.navigation-pending { background: #263951; color: #eaf1ff; }
.sidebar nav a.navigation-pending::after { content: ''; width: 10px; height: 10px; margin-left: auto; border: 1.5px solid #6985b0; border-top-color: #e4eeff; border-radius: 50%; animation: navigation-spin .7s linear infinite; }
.navigation-status [hidden] { display: none; }
@keyframes navigation-spin { to { transform: rotate(360deg); } }
@keyframes navigation-progress { from { transform: translateX(-110%); } to { transform: translateX(420%); } }
@media (max-width: 900px) { .navigation-progress { left: 180px; } }
@media (max-width: 640px) { .navigation-progress { left: 0; top: 0; }.navigation-status { top: 94px; right: 10px; max-width: calc(100% - 20px); }.navigation-slow .navigation-status { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .navigation-spinner,.navigation-progress::after,.sidebar nav a.navigation-pending::after { animation: none; }.navigation-progress::after { width: 100%; } }
/* Compact searchable contact directory. */
.contacts-heading { margin-bottom: 14px; }
.contacts-panel { background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.contacts-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 13px; }
.contacts-toolbar>div:first-child { display: flex; align-items: center; gap: 7px; font-size: 11px; }
.contacts-toolbar strong { font-weight: 550; }
.contacts-toolbar .search-box { height: 28px; min-width: 290px; padding: 3px 8px; }
.contacts-toolbar .search-box input { width: 240px; min-width: 0; font-size: 10px; }
.contacts-toolbar .clear-contact-search { padding: 1px; width: 18px; height: 18px; }
.contacts-toolbar .clear-contact-search .rzi { font-size: 13px; }
.contacts-scroll { overflow-x: auto; }
.contacts-table { table-layout: fixed; }
.contacts-table th { padding: 8px 13px; }
.contacts-table th:first-child { width: 38%; }
.contacts-table th:nth-child(2) { width: 30%; }
.contacts-table td { padding: 7px 13px; height: 37px; color: #72829a; font-size: 11px; overflow-wrap: anywhere; }
.contact-name { display: flex; align-items: center; gap: 8px; }
.contact-name strong { font-size: 11px; font-weight: 500; color: #344862; }
.contact-initial { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 22px; height: 22px; border: 1px solid #e1e7f0; border-radius: 4px; background: #f5f7fb; color: #8399b7; font-size: 10px; }
.contacts-table .contact-number { font-variant-numeric: tabular-nums; white-space: nowrap; }
.contacts-footer { padding: 8px 13px; font-size: 10px; color: #98a5b8; background: #fcfdff; }
@media (max-width: 640px) {
    .contacts-heading { flex-direction: row; align-items: center; }
    .contacts-heading p { display: none; }
    .contacts-toolbar { flex-wrap: wrap; padding: 10px; }
    .contacts-toolbar .search-box { width: 100%; min-width: 0; }
    .contacts-toolbar .search-box input { flex: 1; width: 0; }
    .contacts-table { min-width: 460px; }
    .contacts-table td,.contacts-table th { padding-left: 10px; padding-right: 10px; }
}
/* Contact lookup in New fax. The recipient fields remain editable. */
.recipient-picker { position: relative; margin: 13px 0; }
.recipient-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 500; color: #546277; margin-bottom: 6px; }
.recipient-label small { color: #96a4b8; font-size: 9px; font-weight: 400; }
.recipient-picker>.search-box { height: 34px; background: #f9fbff; }
.recipient-picker input { width: 100%; flex: 1; min-width: 0; }
.recipient-picker .icon-button { width: 19px; height: 19px; padding: 1px; }
.recipient-picker .icon-button .rzi { font-size: 14px; }
.recipient-results { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; max-height: 208px; overflow-y: auto; border: 1px solid #d9e3f1; border-radius: 5px; background: #fff; z-index: 2; box-shadow: 0 8px 24px #20385320; }
.recipient-option { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 11px; border: 0; border-bottom: 1px solid #edf1f7; background: #fff; color: #526880; }
.recipient-option:hover,.recipient-option.is-active { background: #eef4ff; }
.recipient-option strong { display: block; font-size: 11px; font-weight: 500; }
.recipient-option small { display: block; color: #94a4b9; font-size: 10px; margin-top: 2px; }
.recipient-phone { font-size: 10px; white-space: nowrap; color: #7e94b1; font-variant-numeric: tabular-nums; }
.recipient-hint { display: flex; align-items: center; gap: 7px; padding: 12px; font-size: 11px; color: #8193aa; }
@media (max-width: 640px) { .recipient-label { flex-wrap: wrap; gap: 3px; }.recipient-phone { font-size: 9px; } }
/* Drop anywhere in the Send a fax dialog. */
.fax-compose.file-drag-over { outline: 2px solid #477dec; outline-offset: -2px; box-shadow: 0 0 0 5px #477dec20, 0 20px 70px #101c3733; }
.fax-compose.file-drag-over .upload-zone { border-color: #477dec; background: #eaf2ff; }
.fax-compose.file-drag-over .upload-zone .rzi { color: #285de5; }
.fax-compose[data-uploading="true"] .upload-zone { opacity: .65; cursor: progress; }
.upload-zone strong { max-width: 100%; overflow-wrap: anywhere; }
.fax-compose-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.fax-compose .field-label { position: relative; }
.required-label,.optional-label { position: absolute; top: 0; right: 0; font-size: 9px; color: #94a2b5; font-weight: 400; }
.field-error { font-size: 10px; color: #b2514a; font-weight: 400; }
.fax-compose input[aria-invalid="true"],.fax-compose input[aria-invalid="True"] { border-color: #c6776d; background: #fffafa; }
.compose-submit-footer { position: sticky; bottom: -24px; padding: 6px 0 0; background: #fff; z-index: 3; }
.compose-error { margin: 4px 0; font-size: 11px; }
.submit-progress { display: none; align-items: center; gap: 7px; padding: 5px 0; font-size: 11px; color: #7388a4; }
.shell .submit-resume { display: none; }
.fax-compose[data-submit-pending] .submit-progress { display: flex; }
.fax-compose[data-submit-slow] .submit-resume { display: inline-flex; }
.fax-compose[data-submit-pending] .send-button { position: relative; pointer-events: none; opacity: .75; }
.fax-compose[data-submit-pending] .send-button .rz-button-box { visibility: hidden; }
.fax-compose[data-submit-pending] .send-button::after { content: 'Queuing…'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
@keyframes login-autofill-detected { from { opacity: .999; } to { opacity: 1; } }
[data-login-form] input:-webkit-autofill { animation: login-autofill-detected .01s; }
.status.sending{color:#245fc7;background:#edf3ff}.status.unconfirmed{color:#8a5a00;background:#fff4d6}.fax-result{font-size:12px;overflow-wrap:anywhere;color:var(--muted)}