:root{--bg:#f3f6f3;--surface:#fff;--text:#23352c;--muted:#63746a;--line:#e1e8e0;--accent:#315b48;--on-accent:#fff;--soft:#e8f0e7;--selected:#f0f5ef;--focus:#0877bc;--banner:#e6eee3;font:14px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:light}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--bg);color:var(--text)}body[data-theme=dark]{--bg:#131c18;--surface:#1a2620;--text:#ecf2ed;--muted:#b0c0b4;--line:#334639;--accent:#acd6b8;--on-accent:#163020;--soft:#2b4131;--selected:#25372a;--focus:#8bcaff;--banner:#223729;color-scheme:dark}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{min-height:38px;border:1px solid transparent;border-radius:8px;padding:8px 12px;background:transparent;color:inherit;cursor:pointer}button:hover:not(:disabled){background:var(--soft)}button:disabled{cursor:not-allowed;opacity:.55}a{color:inherit}input,textarea{color:var(--text);background:transparent}input::placeholder,textarea::placeholder{color:var(--muted)}:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.skip{position:fixed;top:-60px;left:12px;background:var(--surface);padding:12px;z-index:20}.skip:focus{top:12px}.demo-banner{min-height:38px;display:flex;gap:18px;align-items:center;padding:8px 22px;background:var(--banner);color:var(--text);font-size:11px}.demo-banner strong{letter-spacing:1.2px;font-size:10px;white-space:nowrap}.demo-banner a{margin-left:auto;white-space:nowrap}.topbar{height:76px;padding:0 24px;display:flex;align-items:center;gap:28px;border-bottom:1px solid var(--line);background:var(--surface)}.brand{width:178px;flex-shrink:0;display:flex;align-items:center;gap:10px;text-decoration:none;font-size:23px;font-weight:650;letter-spacing:-.7px}.brand-mark{background:var(--accent);color:var(--on-accent);border-radius:11px;width:35px;height:35px;display:grid;place-items:center;font:italic 27px Georgia,serif}.brand small{font-size:9px;letter-spacing:2px;color:var(--muted)}.search{display:flex;align-items:center;gap:10px;flex:1;max-width:520px;padding:10px 16px;background:var(--bg);border:1px solid var(--line);border-radius:10px}.search>span{font-size:24px;line-height:1}.search input{border:0;min-width:0;width:100%;font-size:13px}.search:focus-within{outline:2px solid var(--focus)}.search input:focus{outline:none}.view-controls{margin-left:auto;display:flex;align-items:center;gap:3px}.view-controls button{font-size:11px}.view-controls button[aria-pressed=true]{background:var(--soft)}.profile,.sender-avatar{display:grid;place-items:center;flex-shrink:0;width:37px;height:37px;border-radius:50%;background:var(--soft);color:var(--accent);font-size:12px;font-weight:700}.profile{margin-left:10px}.preview-app{height:calc(100dvh - 155px);min-height:480px;margin:0 auto}.workspace{display:grid;grid-template-columns:205px minmax(285px,365px) minmax(300px,1fr);height:100%;position:relative}.sidebar{display:flex;flex-direction:column;padding:25px 16px 14px;border-right:1px solid var(--line);background:var(--bg)}.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:600}.primary:hover:not(:disabled){background:var(--accent);filter:brightness(1.12)}.compose{width:100%;text-align:left;padding:11px 15px;display:flex;align-items:center;gap:12px}.compose>span{font-size:24px;line-height:1}.nav-caption{font-size:9px;letter-spacing:1.5px;color:var(--muted);font-weight:700;margin:32px 12px 12px}.sidebar nav{display:grid;gap:4px}.sidebar nav button{display:flex;align-items:center;gap:13px;text-align:left;font-size:13px;padding:10px 12px}.sidebar nav button>span:first-child{font-size:18px;width:20px}.sidebar nav button[aria-current]{background:var(--soft);font-weight:650}.count{margin-left:auto;font-size:11px}.sidebar-bottom{margin-top:auto;padding:24px 8px 0;color:var(--muted);font-size:10px}.sidebar-bottom p{overflow-wrap:anywhere}.sidebar-bottom small{display:block;font-size:9px;margin-top:16px}.demo-pill{padding:4px 7px;border:1px solid var(--line);border-radius:5px;font-size:9px}.quiet{font-size:10px;padding:5px 0}.message-list{border-right:1px solid var(--line);background:var(--surface);overflow:auto;min-width:0}.list-heading{padding:24px 22px 18px;display:flex;align-items:center;gap:12px}.list-heading h1{font-size:24px;letter-spacing:-.7px;margin:0}.list-heading p{font-size:11px;color:var(--muted);margin:3px 0 0}.live-dot{margin-left:auto;width:7px;height:7px;background:var(--accent);border-radius:50%}.list-filters{display:flex;align-items:center;gap:4px;padding:0 16px 14px;border-bottom:1px solid var(--line)}.list-filters button{font-size:11px;padding:5px 10px;min-height:32px}.list-filters button[aria-pressed=true]{background:var(--soft);font-weight:650}.list-filters span{margin-left:auto;color:var(--muted);font-size:10px}#message-list{list-style:none;margin:0;padding:0}.mail-row{position:relative;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 10px 0 5px;border-left:3px solid transparent}.mail-row.selected{background:var(--selected);border-left-color:var(--accent)}.row-open{display:block;min-width:0;flex:1;text-align:left;padding:18px 12px;border-radius:0}.row-top{display:flex;align-items:center;gap:8px;margin-bottom:5px}.row-sender{font-size:12px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row-time{margin-left:auto;font-size:10px;color:var(--muted);white-space:nowrap}.row-subject{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}.row-snippet{display:block;font-size:11px;color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.unread .row-sender,.unread .row-subject{font-weight:750}.unread-dot{width:6px;height:6px;background:var(--accent);border-radius:50%;flex-shrink:0}.row-star{font-size:18px;padding:5px;min-width:30px;align-self:center}.row-star[aria-pressed=true]{color:var(--accent)}.reader{background:var(--surface);overflow:auto;min-width:0}.reader-toolbar{display:flex;align-items:center;justify-content:space-between;padding:15px 25px;border-bottom:1px solid var(--line);min-height:68px;gap:8px}.reader-toolbar .muted{font-size:10px}.reader-toolbar button{font-size:11px}.reader-toolbar>div{display:flex;gap:6px}.subject-line{padding:33px 35px 24px}.topic-tag{font-size:9px;letter-spacing:1.3px;font-weight:700;color:var(--accent)}.subject-line h2{font-size:25px;line-height:1.3;letter-spacing:-.65px;margin:10px 0 0;overflow-wrap:anywhere}.sender-line{display:flex;align-items:flex-start;gap:12px;margin:0 35px 28px}.sender-line strong{font-size:12px}.sender-line p{font-size:10px;color:var(--muted);margin:2px 0;overflow-wrap:anywhere}.sender-line time{margin-left:auto;font-size:10px;color:var(--muted);white-space:nowrap}.sender-line>div{min-width:0}.message-body{padding:0 35px;color:var(--text);font-size:13px;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere}.attachments{padding:12px 35px 0;display:flex;flex-wrap:wrap;gap:8px}.attachment{display:block;text-align:left;border:1px solid var(--line);padding:10px 14px;background:var(--bg);font-size:11px}.reply-actions{padding:30px 35px;display:flex;gap:10px}.secondary{border:1px solid var(--line);background:var(--surface);font-size:12px;min-width:90px}.reader-empty,.empty-list{padding:65px 25px;text-align:center;color:var(--muted)}.reader-empty>span{font-size:40px}.reader-empty h2{font:28px Georgia,serif;color:var(--text)}.reader-empty p{font-size:12px}.toast{min-height:41px;display:block;border-top:1px solid var(--line);padding:11px 22px;background:var(--surface);font-size:11px;color:var(--muted)}.menu-button,.back-button{display:none}.compact .row-open{padding-block:10px}.compact .row-snippet{display:none}dialog{border:1px solid var(--line);border-radius:16px;padding:0;width:min(640px,calc(100vw - 24px));max-height:calc(100dvh - 30px);overflow:auto;background:var(--surface);color:var(--text);box-shadow:0 25px 80px #0003}dialog::backdrop{background:#10251a66}.composer-heading{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line)}.composer-heading h2{font-size:20px;letter-spacing:-.4px;margin:4px 0 0}.composer-heading button{font-size:25px}.compose-warning{font-size:11px;color:var(--muted);background:var(--bg);padding:10px 24px;margin:0}.compose-field{display:flex;align-items:center;padding:13px 24px;border-bottom:1px solid var(--line);gap:15px;font-size:12px}.compose-field span{width:50px;color:var(--muted);flex-shrink:0}.compose-field input{flex:1;min-width:0;border:0;padding:4px}.body-label{display:block;padding:12px 24px 0;font-size:11px;color:var(--muted)}textarea{display:block;width:calc(100% - 48px);margin:8px 24px 18px;border:0;min-height:190px;resize:vertical;font-size:13px;line-height:1.8}.composer-footer{border-top:1px solid var(--line);padding:18px 24px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.composer-footer>span{margin-left:auto;font-size:10px;color:var(--muted)}
.phone-mode{max-width:390px;border-inline:1px solid var(--line)}.phone-mode .workspace{display:block}.phone-mode .sidebar{display:none;position:absolute;inset:0 auto 0 0;width:230px;z-index:3;box-shadow:15px 0 40px #0003}.phone-mode .sidebar.open{display:flex}.phone-mode .message-list{height:100%}.phone-mode .reader{display:none;height:100%}.phone-mode .reader-open .message-list{display:none}.phone-mode .reader-open .reader{display:block}.phone-mode .menu-button,.phone-mode .back-button{display:inline-block}.phone-mode .reader-toolbar{padding:10px}.phone-mode .reader-toolbar>.muted{display:none}.phone-mode .subject-line{padding:25px 20px}.phone-mode .sender-line{margin-inline:20px}.phone-mode .message-body{padding-inline:20px}.phone-mode .attachments,.phone-mode .reply-actions{padding-inline:20px}
@media(max-width:1000px){.workspace{grid-template-columns:175px 300px minmax(280px,1fr)}.topbar{gap:12px;padding-inline:16px}.brand{width:auto;margin-right:8px}.brand small,.profile{display:none}.view-controls button{padding-inline:7px}.subject-line{padding-inline:24px}.message-body{padding-inline:24px}.sender-line{margin-inline:24px}}
@media(max-width:800px){.demo-banner{flex-wrap:wrap;gap:5px 12px;padding:8px 15px}.demo-banner span{order:3;width:100%;font-size:10px}.topbar{height:auto;min-height:110px;flex-wrap:wrap;padding:12px 16px;gap:10px}.brand{font-size:20px}.search{order:3;flex-basis:100%;max-width:none;padding-block:7px}.view-controls{gap:0}.view-controls button{min-height:36px;font-size:10px}.preview-app{height:calc(100dvh - 210px);min-height:440px}.workspace{display:block}.sidebar{display:none;position:absolute;inset:0 auto 0 0;width:230px;z-index:3;box-shadow:15px 0 40px #0003}.sidebar.open{display:flex}.message-list{height:100%}.reader{display:none;height:100%}.reader-open .message-list{display:none}.reader-open .reader{display:block}.menu-button,.back-button{display:inline-block}.reader-toolbar{padding:10px}.reader-toolbar>.muted{display:none}.subject-line{padding:25px 20px}.sender-line{margin-inline:20px}.message-body{padding-inline:20px}.attachments,.reply-actions{padding-inline:20px}.toast{padding-bottom:max(11px,env(safe-area-inset-bottom))}.composer-footer>span{width:100%;margin:0}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}@media(forced-colors:active){button,.search,.mail-row.selected{border:1px solid CanvasText}.mail-row.selected{outline:2px solid Highlight}button:disabled{color:GrayText}}
.sidebar-close{display:none;align-self:flex-end;font-size:24px;line-height:1}
.phone-mode .sidebar-close{display:block}
@media(max-width:800px){.sidebar-close{display:block}}
/* Fictional brand studio: palette changes are scoped to this preview page. */
body[data-palette=ocean]{--bg:#f0f5f9;--text:#203747;--muted:#5c7180;--line:#dbe6ed;--accent:#245d7b;--soft:#e1eef5;--selected:#eaf3f8;--banner:#dfeef6}
body[data-palette=slate]{--bg:#f5f3f8;--text:#343043;--muted:#706a7e;--line:#e5e0eb;--accent:#625079;--soft:#eee9f3;--selected:#f2edf6;--banner:#eee8f4}
body[data-theme=dark][data-palette=ocean]{--bg:#101e28;--surface:#172b38;--text:#eaf4f9;--muted:#b0c7d4;--line:#324f5d;--accent:#abd9ee;--on-accent:#143042;--soft:#294859;--selected:#233e4e;--banner:#203d4e}
body[data-theme=dark][data-palette=slate]{--bg:#1b1723;--surface:#292334;--text:#f5effa;--muted:#ccc1d8;--line:#4b3f58;--accent:#dbbff1;--on-accent:#30233d;--soft:#40344e;--selected:#392e46;--banner:#352a43}
.topbar .brand{width:auto;max-width:260px}.brand{min-width:0}.brand #preview-brand-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.brand-studio-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,0.9fr);gap:25px;padding:24px}.brand-studio-fields{display:flex;flex-direction:column;gap:8px;min-width:0}.brand-studio-fields label{font-size:12px;font-weight:700;margin-top:9px}.brand-studio-fields input,.brand-studio-fields select{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--surface);color:var(--text)}.brand-studio-fields small{font-size:10px;color:var(--muted)}.brand-error{font-size:11px;color:#b22335;margin:4px 0}.brand-studio-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.brand-studio-card{display:flex;flex-direction:column;align-items:center;align-self:stretch;justify-content:center;gap:13px;min-height:270px;padding:22px;border:1px solid var(--line);border-radius:14px;background:var(--bg);text-align:center}.brand-studio-card .brand-mark{width:45px;height:45px;font-size:32px}.brand-studio-card strong{font-size:20px;overflow-wrap:anywhere;line-height:1.2}.brand-studio-card>span:not(.brand-mark){font-size:12px;color:var(--muted)}.brand-card-line{width:100%;height:28px;border:1px solid var(--line);border-radius:7px;background:var(--surface)}.brand-card-button{width:100%;border-radius:7px;background:var(--accent);color:var(--on-accent);padding:8px;font-size:12px;font-weight:700}.brand-studio-card small{font-size:9px;color:var(--muted)}
@media(max-width:600px){.brand-studio-grid{grid-template-columns:1fr;padding:16px}.brand-studio-card{min-height:180px}.topbar .brand{max-width:165px}.view-controls{flex-wrap:wrap;justify-content:flex-end}}
.settings-preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:20px}.settings-preview-grid section{min-width:0;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}.settings-preview-grid h3{margin:0 0 12px;font-size:15px}.settings-preview-grid p{margin:0 0 12px;font-size:11px;line-height:1.6;color:var(--muted)}.settings-preview-grid label{display:block;margin:12px 0 5px;font-size:11px;font-weight:650}.settings-preview-grid select{width:100%;min-height:38px;padding:7px 10px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--text);font:inherit}.settings-preview-grid .secondary{max-width:100%;min-height:38px}body[data-reading-size=large] .message-body{font-size:16px;line-height:1.8}
@media(max-width:600px){.settings-preview-grid{grid-template-columns:1fr;padding:14px}.settings-preview-grid section{padding:14px}.view-controls #settings-open{font-weight:700;background:var(--soft)}}