:root{font-family:Arial,sans-serif;color:#202124;background:#f6f8fc}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button{border:0;border-radius:18px;padding:9px 15px;cursor:pointer;background:#e4eaf8;color:#22304b}button:hover{filter:brightness(.95)}header{height:72px;display:flex;align-items:center;gap:24px;padding:12px 26px}header strong{font-size:24px;color:#526b96}header form:first-of-type{flex:1}header input{width:min(700px,85%);background:#eaf1fb;border:0;border-radius:24px;padding:14px 22px}.layout{display:grid;grid-template-columns:260px 1fr;min-height:calc(100vh - 72px)}aside{padding:14px 20px;display:flex;flex-direction:column;gap:10px}aside a{padding:13px 16px;border-radius:20px;color:inherit;text-decoration:none}aside a:hover{background:#dfe7f5}.compose{background:#c2e7ff;align-self:flex-start;padding:20px 24px;border-radius:18px;margin-bottom:12px}.account{padding:10px;border-bottom:1px solid #dde2ed}.account small{overflow-wrap:anywhere}.mail{background:#fff;border-radius:20px 0 0 0;padding:20px;overflow:hidden}.mail h2{font-size:20px;font-weight:500}.message{display:flex;align-items:start;gap:12px;border-bottom:1px solid #e7e9ef;padding:14px 6px;background:#f8f9fb}.message.unread{background:white;font-weight:600}.message-content{flex:1;min-width:0}.message-content>b{display:inline-block;min-width:190px}.message details{display:inline}.message summary{display:inline;cursor:pointer}.message summary span{color:#68717e;font-weight:400}.message time{font-size:12px;color:#6c7480;white-space:nowrap}.star{background:none;padding:0;font-size:23px}.body-text{white-space:pre-wrap;line-height:1.6;font-weight:400}.empty{padding:70px;text-align:center;color:#7b8390}dialog{border:0;border-radius:18px;box-shadow:0 12px 45px #0003;width:min(520px,94vw)}dialog::backdrop{background:#0006}dialog form{display:grid;gap:12px}dialog input,dialog textarea,dialog select{padding:12px;border:1px solid #d5dce8;border-radius:8px;width:100%}dialog label{display:grid;gap:6px}.login{max-width:400px;margin:15vh auto;padding:35px;background:white;border-radius:20px}.login form{display:grid;gap:15px}.login input{padding:14px}.toast{position:fixed;right:20px;bottom:20px;background:#e0f4e4;padding:16px;border-radius:12px}.toast.error{background:#ffe0df}.dark{background:#171b22;color:#e5e8f0}.dark .mail,.dark .login{background:#262c36}.dark .message,.dark .message.unread{background:#303744;color:#e5e8f0}.dark dialog{background:#262c36;color:white}@media(max-width:700px){.layout{grid-template-columns:85px 1fr}aside{padding:8px;overflow:hidden}aside a{font-size:12px;padding:10px 2px}.compose{padding:10px 4px;font-size:12px}.account small{display:none}header{gap:5px;padding:8px}header strong{font-size:15px}header input{width:100%}header button{padding:7px}.message time{display:none}.message-content>b{min-width:0;display:block}}

#bulkform{display:flex;align-items:center;gap:12px;padding:8px 12px;border-bottom:1px solid #ddd}#bulkform select{max-width:190px}.msg-select{flex-shrink:0;align-self:center;margin:0 8px}.message-content details button{margin:5px 5px 0 0}dialog input[type=file]{padding:8px}
/* Phase 7: navigation, paging and responsive reading */
.mail-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.mail-count{font-size:13px;color:#68717e}.pager{display:flex;align-items:center;justify-content:flex-end;gap:18px;padding:18px;font-size:13px}.pager a{color:#2456a6;text-decoration:none;padding:9px 12px;border-radius:14px;background:#edf3fc}.pager .disabled{pointer-events:none;opacity:.35}.message:has(details[open]){background:#f0f5ff}.message details[open]{display:block;margin-top:10px}.message details[open] summary{display:block;padding:8px 0;font-weight:600}.message details[open] .body-text{padding:16px;overflow-wrap:anywhere;background:#fff;border-radius:12px}.message summary{overflow-wrap:anywhere}.dark .message:has(details[open]){background:#374252}.dark .message details[open] .body-text{background:#202733}.dark .mail-count{color:#b3becc}.dark .pager a{background:#384860;color:#c1dcff}@media(max-width:700px){.mail{padding:10px}.mail-heading{flex-wrap:wrap}.message{gap:6px}.message-content{font-size:13px}.message time{display:none}.pager{justify-content:center;gap:8px}.pager a{padding:8px}.mail-count{font-size:11px}}

/* Phase 8: full locally cached conversation and account dashboard */
.thread-dialog{position:fixed;inset:5vh 5vw;width:90vw;max-width:1050px;max-height:90vh;overflow:auto;border:1px solid #cbd5e1;border-radius:18px;padding:22px;background:var(--surface,#fff);color:inherit;z-index:50;box-shadow:0 12px 50px #0005}.thread-header{display:flex;justify-content:space-between;align-items:center;gap:12px}.thread-entry{padding:18px 8px;border-top:1px solid #9ca3af55}.thread-entry summary{cursor:pointer;display:flex;justify-content:space-between;gap:15px}.thread-entry .body-text{white-space:pre-wrap;overflow-wrap:anywhere;margin:16px 0}.dashboard-dialog{max-width:min(96vw,950px);width:90vw;border-radius:15px;padding:22px}.dashboard-dialog table{border-collapse:collapse;width:100%;font-size:14px}.dashboard-dialog td,.dashboard-dialog th{padding:10px;text-align:left;border-bottom:1px solid #9995}@media(max-width:600px){.thread-dialog{inset:1vh 1vw;width:98vw;max-height:98vh;padding:12px}.dashboard-dialog{padding:10px;overflow-x:auto}}

/* Phase 10: nonintrusive synchronization health and accessible controls */
.sync-strip{display:flex;align-items:center;gap:10px;padding:10px 16px;margin-bottom:12px;border-radius:12px;background:#edf4ff;color:#294366;font-size:13px}.sync-strip button{margin-left:auto;padding:6px 12px;background:#dbe9ff}.sync-dot{height:9px;width:9px;border-radius:50%;background:#31835d;flex-shrink:0}.sync-warning{background:#fff1e5;color:#7b421d}.sync-warning .sync-dot{background:#e68b22}.diagnostics-scroll{overflow-x:auto}.hint{font-size:12px;opacity:.75}.dark .sync-strip{background:#34465c;color:#e3efff}.dark .sync-warning{background:#573b2d;color:#ffe3ca}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #4a88ee;outline-offset:2px}@media(max-width:700px){.sync-strip{padding:8px;font-size:11px;flex-wrap:wrap}.sync-strip button{margin-left:0}}