/* mira mail 0.2.0 — seven complete interface families, five palettes each. */
html[data-design] {background:var(--mira-side);color:var(--mira-text)}
html[data-design] body {background:var(--mira-side);color:var(--mira-text)}
html[data-mira-design-loading] body {visibility:hidden!important}
html[data-design] :is(button,input,select,textarea) {font-family:var(--mira-font)}
html[data-design] .app {grid-template-columns:54px var(--sidebar-width) 4px minmax(0,1fr);grid-template-rows:46px minmax(0,1fr);background:var(--mira-side)}
html[data-design] .app>.rail {grid-column:1;grid-row:2;padding-top:15px;gap:5px}
html[data-design] .app>.sidebar {grid-column:2;grid-row:2}
html[data-design] .app>.column-divider {grid-column:3;grid-row:2}
html[data-design] .app>.main {grid-column:4;grid-row:2}
html[data-design] .rail-icon {width:40px;height:40px;border-radius:var(--design-radius);font-size:20px}
html[data-design] .rail-mark {width:35px;height:35px;margin-bottom:12px;border-radius:var(--design-radius)}
html[data-design] .sidebar-head {padding:17px 17px 11px}
html[data-design] .sidebar-head .brand {font-size:22px;letter-spacing:-1px}
html[data-design] .sidebar-head>span {display:none}
html[data-design] .sidebar .nav-link {font-size:13px;border-radius:var(--design-radius)}
html[data-design] .sidebar-group summary {border-radius:var(--design-radius)}
html[data-design] .sidebar .nav-link.current {background:var(--design-selected);color:var(--mira-accent)}
html[data-design] .sidebar .nav-link:hover {background:var(--mira-subtle)}
html[data-design] .compose-link,html[data-design] .primary {background:var(--design-button);color:var(--design-button-text);border-radius:var(--design-radius)}
html[data-design] :is(.soft-button,.account-card,.settings-card,.contact-editor,.server-status-card,.rule-card,.rule-accordion,.auth-card,.voice-dialog,.nas-dialog,.assistant-input,.chat-bubble) {border-radius:var(--design-radius)}
html[data-design] :is(.compose-field input,.compose-field textarea,.compose-field select,.stacked-form input,.stacked-form select,.stacked-form textarea,.rule-field input,.rule-field select,.auth-card input,.contact-editor input,.contact-editor textarea) {border-radius:calc(var(--design-radius) * .6);color:var(--mira-text);background:var(--mira-input);border-color:var(--mira-line)}
html[data-design] :is(.forward-options,.move-folder-options,.compose-recipient-suggestions,.rule-name-suggestions,.contact-suggestions) {background:var(--mira-paper);color:var(--mira-text);border-color:var(--mira-line);border-radius:var(--design-radius)}
html[data-design] input[type=checkbox] {accent-color:var(--mira-accent)}
html[data-design] .detail-pane {background:var(--mira-paper)}
html[data-design] .list-pane {background:var(--mira-subtle)}
html[data-design] .mail-workspace {grid-template-columns:var(--list-width) 4px minmax(0,1fr)}
html[data-design] .column-divider {background:var(--mira-line)}
html[data-design] .column-divider:hover {background:var(--mira-accent)}
html[data-design] .list-pane-head {padding:12px 12px 9px}
html[data-design] .list-search {border:1px solid var(--mira-line);background:var(--mira-paper);border-radius:var(--design-radius);height:37px}
html[data-design] .mail-row {min-height:102px;padding:13px 14px 13px 29px;border-bottom:1px solid var(--mira-line);color:var(--mira-text)}
html[data-design] .mail-meta {padding-left:41px;gap:5px;min-height:74px}
html[data-design] .mail-topline strong {font-size:13px;line-height:1.45}
html[data-design] .mail-meta .mail-subject {font-size:13px;font-weight:600}
html[data-design] .mail-meta small {font-size:12px;line-height:1.5;padding-right:0;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html[data-design] .mail-topline time {font-size:10px}
html[data-design] .design-sender-avatar {position:absolute;left:29px;top:14px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font-size:11px;font-weight:650;color:hsl(var(--avatar-hue) 45% 29%);background:hsl(var(--avatar-hue) 42% 86%);border:1px solid hsl(var(--avatar-hue) 27% 75%);user-select:none}
html[data-theme=dark][data-design] .design-sender-avatar {color:hsl(var(--avatar-hue) 55% 85%);background:hsl(var(--avatar-hue) 23% 27%);border-color:hsl(var(--avatar-hue) 21% 37%)}
html[data-design] .mail-row.current,html[data-design] .mail-row.selected {background:var(--design-selected)}
html[data-design] .mail-row.current::after {content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--mira-accent)}
html[data-design] .mail-row .quick-actions {background:var(--mira-subtle);border:1px solid var(--mira-line)}
html[data-design] .detail-content {padding:20px clamp(16px,2.5vw,35px)}
html[data-design] .reading-card h1 {font-family:var(--design-font);font-size:25px;line-height:1.2;margin:22px 0 17px;letter-spacing:-.7px}
html[data-design] .reading-card .avatar {background:var(--design-selected);color:var(--mira-accent)}
html[data-design] .reading-card .sender-block {padding-bottom:17px}
html[data-design] .detail-toolbar {gap:3px;padding-bottom:12px}
html[data-design] .detail-toolbar :is(a,button,summary) {border-radius:calc(var(--design-radius) * .65)}
html[data-design] .attachments {border-color:var(--mira-line)}
html[data-design] .attachment {border-color:var(--mira-line);background:var(--mira-subtle);border-radius:calc(var(--design-radius) * .6)}
html[data-design] .nav-symbol .design-icon {width:16px;height:16px;display:block}
html[data-design] .design-chrome {grid-column:1/-1;grid-row:1;z-index:12;min-width:0;background:var(--mira-paper);border-bottom:1px solid var(--mira-line);color:var(--mira-text)}
html[data-design] .design-menu-line {height:46px;display:flex;gap:17px;align-items:center;padding:0 16px;min-width:0}
html[data-design] .design-wordmark {display:flex;align-items:center;gap:8px;white-space:nowrap}
html[data-design] .design-wordmark strong {font-family:var(--mira-font);font-size:18px;letter-spacing:-.7px;font-weight:750}
html[data-design] .design-icon {width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
html[data-design] .design-wordmark .design-icon {color:var(--mira-accent)}
html[data-design] .design-menu-line nav {display:flex;gap:3px;min-width:0}
html[data-design] .design-command-status {margin-left:auto;font-size:11px;color:var(--mira-muted)}
html[data-design] .design-command-status:empty {display:none}
html[data-design] .design-menu-line nav :is(a,button) {font-size:11px;padding:6px 8px;border:0;background:none;color:var(--mira-muted);border-radius:5px;white-space:nowrap}
html[data-design] .design-menu-line nav :is(a,button):hover {background:var(--design-selected);color:var(--mira-text)}
html[data-design] :is(.design-mobile-menu,.design-mobile-compose,.design-mobile-window-menu,.design-mobile-sidebar-head,.design-row-more) {display:none}
html[data-design] .design-app-menu {width:min(360px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--mira-line);border-radius:14px;background:var(--mira-paper);color:var(--mira-text);box-shadow:0 18px 70px #0005}
html[data-design] .design-app-menu::backdrop {background:#07111b77}
html[data-design] .design-app-menu[open] {display:flex;flex-direction:column}
html[data-design] .design-app-menu>header {display:flex;align-items:center;justify-content:space-between;flex:none;padding:10px 14px;border-bottom:1px solid var(--mira-line)}
html[data-design] .design-app-menu h2 {margin:0;font-size:19px;font-weight:600}
html[data-design] .design-app-menu>header button {width:44px;height:44px;border:0;border-radius:8px;background:transparent;color:inherit;font-size:28px}
html[data-design] .design-app-menu>nav {display:grid;gap:2px;padding:8px;overflow-y:auto}
html[data-design] .design-app-menu nav :is(a,button) {display:flex;align-items:center;gap:12px;min-height:46px;padding:10px 12px;text-align:left;border:0;border-radius:8px;background:transparent;color:inherit;font-size:15px;line-height:1.35}
html[data-design] .design-app-menu nav :is(a,button):hover {background:var(--design-selected)}
html[data-design] .design-app-menu hr {width:100%;border:0;border-top:1px solid var(--mira-line);margin:6px 0}
html[data-design] .design-commandbar {display:none}
html[data-design] .design-tree-head,html[data-design] .design-folder-tabs {display:none}
html[data-design] .design-dialog {width:min(760px,calc(100vw - 32px));max-height:90dvh;padding:0;border:1px solid var(--mira-line);border-radius:max(8px,var(--design-radius));background:var(--mira-paper);color:var(--mira-text);box-shadow:0 24px 90px #0005}
html[data-design] .design-dialog::backdrop {background:#07111b77;backdrop-filter:blur(5px)}
html[data-design] .design-dialog>header {display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--mira-line)}
html[data-design] .design-dialog>header small {color:var(--mira-accent);font-size:11px;font-weight:650}
html[data-design] .design-dialog h2 {font-family:var(--design-font);font-size:24px;letter-spacing:-.6px;margin:3px 0 0}
html[data-design] .design-dialog>header button {border:0;background:var(--mira-subtle);color:var(--mira-text);border-radius:50%;width:32px;height:32px;font-size:24px;line-height:1}
html[data-design] .design-dialog-content {padding:19px 24px 24px;overflow:auto}
html[data-design] .design-dialog fieldset {border:0;margin:0 0 21px;padding:0;min-width:0}
html[data-design] .design-dialog legend {font-size:13px;font-weight:650;margin-bottom:10px;padding:0}
html[data-design] .design-options {display:grid;grid-template-columns:1fr 1fr;gap:8px}
html[data-design] .design-options>button {display:flex;align-items:center;gap:11px;text-align:left;border:1px solid var(--mira-line);border-radius:10px;padding:10px;background:var(--mira-subtle);color:var(--mira-text)}
html[data-design] .design-options>button[aria-pressed=true] {border-color:var(--mira-accent);box-shadow:inset 0 0 0 1px var(--mira-accent);background:var(--design-selected)}
html[data-design] .design-options strong {display:block;font-size:13px}
html[data-design] .design-options small {display:block;font-size:11px;line-height:1.4;color:var(--mira-muted);margin-top:4px}
html[data-design] .design-option-visual {display:flex;gap:3px;width:64px;height:43px;padding:5px;border:1px solid var(--mira-line);background:var(--mira-paper);border-radius:5px;flex:none;overflow:hidden}
html[data-design] .design-option-visual i {height:100%;background:var(--design-selected);border-radius:2px}
html[data-design] .design-option-visual i:nth-child(1) {width:20%}
html[data-design] .design-option-visual i:nth-child(2) {width:33%;background:var(--mira-accent);opacity:.6}
html[data-design] .design-option-visual i:nth-child(3) {flex:1}
html[data-design] .visual-prism {background:linear-gradient(140deg,#a3b6f555,#dbadf555)}
html[data-design] .visual-orbit {border-radius:15px;padding:5px}
html[data-design] .visual-orbit i {border-radius:8px}
html[data-design] .visual-monolith {border-radius:0;border-color:currentColor}
html[data-design] .visual-monolith i {border-radius:0}
html[data-design] .visual-atelier {background:#d4bca555;border-radius:0}
html[data-design] .visual-atelier i:nth-child(3) {background:repeating-linear-gradient(0deg,#99715255 0 2px,transparent 2px 5px)}
html[data-design] .visual-flow {border-radius:12px;transform:skewY(-3deg)}
html[data-design] .visual-bat {border-radius:0;background:#282828}
html[data-design] .visual-bat i {border-radius:0;background:repeating-linear-gradient(0deg,#777 0 1px,#333 1px 5px)}
html[data-design] .design-palettes {display:flex;flex-wrap:wrap;gap:7px}
html[data-design] .design-palettes button,html[data-design] .design-theme-options button {display:flex;align-items:center;gap:7px;font-size:12px;border:1px solid var(--mira-line);border-radius:8px;padding:9px 11px;background:var(--mira-subtle);color:var(--mira-text)}
html[data-design] .design-palettes button[aria-pressed=true],html[data-design] .design-theme-options button[aria-pressed=true] {border-color:var(--mira-accent);box-shadow:inset 0 0 0 1px var(--mira-accent)}
html[data-design] .design-palettes i {display:inline-block;width:16px;height:16px;border-radius:50%;background:var(--palette-color);box-shadow:inset 0 0 0 1px #0002}
html[data-design] .design-palette-count {color:var(--mira-muted);font-size:11px;font-weight:400;margin-left:6px}
html[data-design] .design-theme-options {display:flex;gap:7px;flex-wrap:wrap}
html[data-design] .design-motion {display:flex;align-items:center;gap:8px;font-size:12px}
html[data-design] .design-save-note {color:var(--mira-muted);font-size:11px;margin:17px 0 0}
html[data-design] .design-window-options {display:inline-grid;place-items:center;flex:none;border:1px solid var(--mira-line);background:var(--mira-subtle);color:var(--mira-accent);border-radius:7px;width:32px;height:32px}
html[data-design] .auth-card>.design-window-options {justify-self:end;margin-top:-8px}
html[data-design] .appearance-settings {gap:14px;flex-wrap:wrap}
html[data-design] body.compose-window {height:100dvh;min-height:0;overflow:hidden;padding:0}
html[data-design] .compose-shell {display:flex;flex-direction:column;width:min(100%,940px);height:var(--design-compose-height,100dvh);min-height:0;margin:auto;overflow:hidden;background:var(--mira-paper)}
html[data-design] .compose-header {flex:none;gap:12px;padding:17px 22px}
html[data-design] .compose-header h1 {font-family:var(--design-font)}
html[data-design] .compose-content {min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;padding:17px 22px 22px}
html[data-design] .compose-form {gap:13px}
html[data-design] .compose-shell>.compose-actions {position:relative;flex:none;bottom:auto;margin:0;padding:12px 22px calc(12px + env(safe-area-inset-bottom,0px));background:var(--mira-paper);border-top:1px solid var(--mira-line);box-shadow:0 -6px 18px #0000000a;z-index:5}
html[data-design] .compose-shell>.compose-actions .primary {margin-left:auto;min-height:42px;order:2}
html[data-design] .compose-shell>.compose-actions>span {font-size:11px}
html[data-design] .compose-body-field textarea {min-height:190px}
html[data-design] .compose-recipient-suggestions {z-index:50;max-height:260px}
html[data-design] .rule-shell {background:var(--mira-paper)}
html[data-design] .auth-page {background:radial-gradient(at 10% 0%,var(--design-selected),transparent 60%),var(--mira-side)}
html[data-design] .nas-transfer-widget {background:var(--mira-paper);border-color:var(--mira-line);color:var(--mira-text)}
html[data-design-motion=on] :is(.mail-row,.nav-link,.design-options>button,.soft-button,.primary) {transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
html[data-design-motion=on] .detail-content {animation:design-reveal .2s ease-out both}
html[data-design-motion=on] dialog[open] {animation:design-dialog-in .2s ease-out both}
html[data-design-motion=on] .compose-shell {animation:design-compose-in .22s ease-out both}
@keyframes design-reveal {from{opacity:.35;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}
@keyframes design-dialog-in {from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes design-compose-in {from{opacity:.3;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
/* FOCUS — deliberate hierarchy and an uninterrupted reading surface. */
html[data-design=focus] .sidebar {background:var(--mira-paper);border-right:1px solid var(--mira-line)}
html[data-design=focus] .sidebar-head {display:none}
html[data-design=focus] .compose-link {margin:18px 12px 8px}
html[data-design=focus] .reading-card h1 {font-size:27px}
html[data-design=focus] .mail-row.current {background:var(--design-selected)}
html[data-design=focus] .detail-toolbar {position:relative}
/* PRISM — optical layers with solid, readable content. */
html[data-design=prism] .app {background:radial-gradient(at 10% 0%,hsl(var(--design-hue) 75% 70% / .28),transparent 52%),var(--mira-side)}
html[data-design=prism] .sidebar {background:linear-gradient(155deg,hsl(var(--design-hue) 70% 70% / .18),transparent),var(--mira-side)}
html[data-design=prism] .detail-pane {background:linear-gradient(140deg,hsl(var(--design-hue) 45% 70% / .09),transparent),var(--mira-subtle);padding:12px}
html[data-design=prism] .detail-content {border:1px solid var(--mira-line);border-radius:20px;background:var(--mira-paper);box-shadow:0 14px 42px #0000000c}
html[data-design=prism] .mail-row {margin:4px 9px 7px;border:1px solid transparent;border-radius:16px}
html[data-design=prism] .mail-row.current {border-color:var(--mira-line);box-shadow:0 4px 15px #00000009}
html[data-design=prism] .mail-row.current::after {display:none}
html[data-design=prism] .design-chrome {background:linear-gradient(110deg,hsl(var(--design-hue) 60% 60% / .07),transparent),var(--mira-paper)}
html[data-design=prism] .compose-shell {box-shadow:0 0 70px hsl(var(--design-hue) 40% 30% / .13)}
/* MONOLITH — strict geometry, a strong typographic hierarchy. */
html[data-design=monolith] .design-wordmark strong {font-size:21px;font-weight:900;letter-spacing:-1px}
html[data-design=monolith] .reading-card h1 {font-size:30px;letter-spacing:-1.1px;font-weight:800}
html[data-design=monolith] .sidebar {background:var(--mira-paper)}
html[data-design=monolith] .rail {background:var(--mira-text);color:var(--mira-paper)}
html[data-design=monolith] .compose-link {font-weight:750;text-transform:uppercase;letter-spacing:.6px}
html[data-design=monolith] .mail-row {border-bottom:1px solid var(--mira-line)}
html[data-design=monolith] .design-sender-avatar {border-radius:2px}
html[data-design=monolith] .sidebar .nav-title {letter-spacing:2px}
html[data-design=monolith] .design-chrome {border-bottom:2px solid var(--mira-text)}
html[data-design=monolith] .primary {font-weight:750}
/* ORBIT — floating rounded surfaces and layered conversation context. */
html[data-design=orbit] .app {gap:0;background:var(--mira-side)}
html[data-design=orbit] .sidebar {background:var(--mira-side)}
html[data-design=orbit] .list-pane {padding:5px 4px;background:var(--mira-side)}
html[data-design=orbit] .mail-row {margin:4px 7px;border:0;border-radius:18px;background:var(--mira-paper);box-shadow:0 2px 8px #00000008}
html[data-design=orbit] .mail-row.current {background:var(--design-selected);box-shadow:0 6px 15px #0000000b;transform:translateX(2px)}
html[data-design=orbit] .mail-row.current::after {display:none}
html[data-design=orbit] .detail-pane {margin:12px 12px 12px 5px;border:1px solid var(--mira-line);border-radius:25px;box-shadow:0 8px 24px #0000000a}
html[data-design=orbit] .column-divider {background:transparent}
html[data-design=orbit] .rail-icon {border-radius:50%}
html[data-design=orbit] .compose-link {border-radius:50px}
html[data-design=orbit] .reading-card h1 {font-size:27px}
/* ATELIER — editorial paper, serif subjects and fine rules. */
html[data-design=atelier] .design-wordmark strong {font-family:Georgia,serif;font-size:23px;font-weight:400}
html[data-design=atelier] .sidebar {background:var(--mira-side)}
html[data-design=atelier] .mail-meta .mail-subject {font-family:Georgia,serif;font-size:15px;font-weight:400}
html[data-design=atelier] .reading-card h1 {font-size:32px;font-weight:400;letter-spacing:-.5px}
html[data-design=atelier] .detail-content {padding:23px 32px}
html[data-design=atelier] .plain-letter {line-height:1.8}
html[data-design=atelier] .account-stripe {width:3px}
html[data-design=atelier] .mail-row .design-sender-avatar {border-radius:2px}
html[data-design=atelier] .design-chrome {border-bottom:1px solid var(--mira-text)}
html[data-design=atelier] .compose-header h1,html[data-design=atelier] .rule-header h1 {font-weight:400;font-size:26px}
/* FLOW — soft curves and consistent folder color cues. */
html[data-design=flow] .sidebar {background:linear-gradient(160deg,var(--design-selected),transparent 80%),var(--mira-side)}
html[data-design=flow] .mail-row {margin:2px 7px;border-bottom:1px solid var(--mira-line);border-radius:14px}
html[data-design=flow] .mail-row.current::after {border-radius:8px;width:4px;top:14px;bottom:14px}
html[data-design=flow] .compose-link {border-radius:24px}
html[data-design=flow] .detail-toolbar {padding:7px;background:var(--mira-subtle);border-radius:20px;border:0}
html[data-design=flow] .nav-symbol [class*=icon-] {stroke-width:2}
html[data-design=flow] .nav-symbol[data-folder-color="0"] {color:#18846d}
html[data-design=flow] .nav-symbol[data-folder-color="1"] {color:#4d7ed0}
html[data-design=flow] .nav-symbol[data-folder-color="2"] {color:#b67242}
html[data-design=flow] .nav-symbol[data-folder-color="3"] {color:#9e63b8}
html[data-design=flow] .nav-symbol[data-folder-color="4"] {color:#b45e72}
/* THE BAT! — based on the user's actual screenshot, not a generic table layout. */
html[data-design=bat] {font-size:12px}
html[data-design=bat] .app {grid-template-columns:var(--sidebar-width) 4px minmax(0,1fr);grid-template-rows:74px minmax(0,1fr)}
html[data-design=bat] .app>.rail {display:none}
html[data-design=bat] .app>.sidebar {grid-column:1;grid-row:2}
html[data-design=bat] .app>.column-divider {grid-column:2;grid-row:2}
html[data-design=bat] .app>.main {grid-column:3;grid-row:2}
html[data-design=bat] .design-menu-line {height:29px;padding:0 8px;gap:13px;background:var(--mira-rail)}
html[data-design=bat][data-theme=dark] .design-menu-line {color:#eee}
html[data-design=bat] .design-menu-line .design-wordmark strong {font-family:Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:0}
html[data-design=bat] .design-menu-line .design-wordmark .design-icon {width:17px;height:17px}
html[data-design=bat] .design-menu-line nav :is(a,button) {font-size:12px;padding:3px 5px;border-radius:0;color:inherit}
html[data-design=bat] .design-commandbar {height:45px;display:flex;align-items:center;gap:2px;padding:3px 8px;background:var(--mira-subtle);border-top:1px solid var(--mira-line)}
html[data-design=bat] .design-commandbar button {display:flex;align-items:center;gap:4px;padding:4px 10px 4px 4px;min-height:31px;border:0;border-right:1px solid var(--mira-line);border-radius:0;background:none;color:var(--mira-text);font-size:11px}
html[data-design=bat] .design-commandbar button:hover {background:var(--design-selected)}
html[data-design=bat] .design-commandbar .design-icon {width:23px;height:23px;filter:drop-shadow(0 1px 0 #ffffff66);stroke-width:1.2}
html[data-design=bat] .design-commandbar .icon-receive {stroke:#378a39;fill:#74bb72}
html[data-design=bat] .design-commandbar .icon-compose {stroke:#7294ad;fill:#d3e8f7}
html[data-design=bat] .design-commandbar .icon-reply {stroke:#5d9880;fill:#a4d6b7}
html[data-design=bat] .design-commandbar .icon-forward {stroke:#93699b;fill:#c69ed1}
html[data-design=bat] .design-commandbar .icon-clip {stroke:#2486cc;stroke-width:2}
html[data-design=bat] .design-commandbar .icon-contacts {stroke:#9e7320;fill:#edc752}
html[data-design=bat] .design-commandbar .icon-rules {stroke:#3573ab;fill:#82b5e3}
html[data-design=bat] .design-commandbar .icon-settings {stroke:#617b88;fill:#c4d3dc}
html[data-design=bat] .sidebar-head,html[data-design=bat] .sidebar>.compose-link {display:none}
html[data-design=bat] .sidebar {background:var(--mira-subtle)}
html[data-design=bat] .sidebar-scroll {padding:2px 4px}
html[data-design=bat] .design-tree-head {display:grid;grid-template-columns:minmax(0,1fr) 44px 44px;height:25px;align-items:center;padding:0 6px;font-size:11px;border-bottom:1px solid var(--mira-line)}
html[data-design=bat] .sidebar .nav-title {font-size:10px;font-weight:500;letter-spacing:.6px;margin:8px 4px 4px}
html[data-design=bat] .sidebar .nav-link {border-radius:0;font-size:12px;min-height:22px;height:24px;padding:2px 6px;line-height:20px}
html[data-design=bat] .sidebar .folder-link {padding-left:24px}
html[data-design=bat] .sidebar-group .nav-subtitle,html[data-design=bat] .sidebar-group .account-summary {border-radius:0;font-size:12px;font-weight:400;height:24px;padding:1px 4px;letter-spacing:0;text-transform:none}
html[data-design=bat] .sidebar-letter > .letter-summary {font-weight:400}
html[data-design=bat] .sidebar .has-unread,html[data-design=bat] .sidebar .unread-badge,html[data-design=bat] .sidebar-group .account-summary b {background:none!important;color:inherit!important;font-size:11px;font-weight:400;padding:0;min-width:30px;border-radius:0}
html[data-design=bat] .sidebar .nav-link.current {background:#90c4f0;color:#142332}
html[data-design=bat][data-theme=dark] .sidebar .nav-link.current {color:#f9fcff;background:#3d6f95}
html[data-design=bat] .sidebar .nav-link[href*="folder=sent"] {background:#e89ca444}
html[data-design=bat] .sidebar-group[data-live-key="group:family"]>summary {background:#bf8ec455}
html[data-design=bat] .sidebar .nav-symbol {color:#68a2d4}
html[data-design=bat] .sidebar .nav-symbol .design-icon {fill:#6fa1ca55;stroke-width:1.2}
html[data-design=bat] .sidebar .nav-link[href*="folder=sent"] .nav-symbol {color:#71a48d}
html[data-design=bat] .mail-workspace {grid-template-columns:var(--list-width) 4px minmax(0,1fr)}
html[data-design=bat] .list-pane {background:var(--mira-paper)}
html[data-design=bat] .list-pane-head {padding:7px 12px;border-bottom:1px solid var(--mira-line);background:var(--mira-side)}
html[data-design=bat] .list-search {height:27px;padding:0 5px;border-radius:0;background:var(--mira-side);border:1px solid var(--mira-line)}
html[data-design=bat] .list-search input {font-size:12px}
html[data-design=bat] .mail-row {min-height:91px;padding:9px 10px 9px 22px;margin:0 10px 0 3px;border-bottom:1px solid var(--mira-line)}
html[data-design=bat] .mail-row .account-stripe {display:none}
html[data-design=bat] .mail-row .row-picker {top:11px;left:4px;width:12px;height:12px;background:transparent;border:1px solid var(--mira-muted)}
html[data-design=bat] .mail-meta {padding-left:41px;gap:3px;min-height:72px}
html[data-design=bat] .mail-topline strong {font-size:12px;font-weight:400}
html[data-design=bat] .mail-row.unread .mail-topline strong {font-weight:700}
html[data-design=bat] .mail-topline time {font-size:11px}
html[data-design=bat] .mail-meta .mail-subject {font-size:12px;font-weight:400}
html[data-design=bat] .mail-meta small {font-size:12px;line-height:1.3}
html[data-design=bat] .design-sender-avatar {left:23px;top:25px;width:32px;height:32px;border:1px solid #777;font-size:11px}
html[data-design=bat] .mail-row.current {background:var(--design-selected)}
html[data-design=bat] .mail-row.current::after {display:none}
html[data-design=bat] .mail-row .quick-actions {right:0;bottom:2px;border-radius:0}
html[data-design=bat] .list-pane > .design-folder-tabs {display:flex;align-items:stretch;flex:none;height:23px;overflow:hidden;border-top:1px solid var(--mira-line);background:var(--mira-side)}
html[data-design=bat] .design-folder-tabs a {font-size:10px;padding:3px 10px 3px 6px;white-space:nowrap;color:var(--mira-text);background:var(--mira-subtle);border-right:1px solid var(--mira-line);clip-path:polygon(0 0,100% 0,calc(100% - 7px) 100%,0 100%)}
html[data-design=bat] .design-folder-tabs .design-tab-1 {background:#4d916244}
html[data-design=bat] .design-folder-tabs .design-tab-2 {background:#c4525a55}
html[data-design=bat] .design-folder-tabs .design-tab-3 {background:#608ab855}
html[data-design=bat] .design-folder-tabs a.active {box-shadow:inset 0 -2px 0 var(--mira-accent);font-weight:700}
html[data-design=bat] .list-pane .pagination {min-height:27px;font-size:10px;padding:3px 8px}
html[data-design=bat] .detail-content {padding:9px 12px}
html[data-design=bat] .reading-card h1 {font-family:var(--mira-font);font-size:15px;letter-spacing:0;line-height:1.3;margin:12px 0 8px}
html[data-design=bat] .reading-card .sender-block {padding:3px 0 10px;gap:8px}
html[data-design=bat] .reading-card .avatar {border-radius:0;width:30px;height:30px;font-size:12px}
html[data-design=bat] .reading-card .plain-letter {font-size:14px;line-height:1.45}
html[data-design=bat] .detail-toolbar {padding:2px 0 8px;gap:1px}
html[data-design=bat] .detail-toolbar :is(a,button,summary) {padding:5px;border-radius:0;font-size:11px}
html[data-design=bat] .detail-toolbar .action-icon {width:17px;height:17px}
html[data-design=bat] .detail-toolbar .forward-menu summary {color:#c79cd2}
html[data-design=bat] .attachments {padding-top:8px;margin-top:8px}
html[data-design=bat] .compose-header,html[data-design=bat] .rule-header {padding:11px 16px}
html[data-design=bat] .compose-header h1,html[data-design=bat] .rule-header h1 {font-family:var(--mira-font);font-size:18px}
html[data-design=bat] .compose-mark,html[data-design=bat] .rule-mark {border-radius:0;background:var(--mira-subtle);color:var(--mira-accent)}
html[data-design=bat] .primary,html[data-design=bat] .soft-button {border:1px solid var(--mira-line);box-shadow:inset 0 1px 0 #ffffff22}
html[data-design=bat] .compose-content,html[data-design=bat] .rule-content {padding:13px 16px}
html[data-design=bat] .compose-field {font-size:12px}
html[data-design=bat] .contact-editor h2,html[data-design=bat] .contacts-page h1 {font-size:20px}
/* Phone: one visible work area; composer footer is outside the scrollable form. */
@media(max-width:1000px) and (min-width:721px){
  html[data-design] .design-menu-line {gap:8px;padding:0 10px}
  html[data-design] .design-menu-line nav :is(a,button) {padding:6px}
  html[data-design] .app {grid-template-columns:48px minmax(170px,var(--sidebar-width)) 4px minmax(0,1fr)}
  html[data-design=bat] .app {grid-template-columns:minmax(215px,var(--sidebar-width)) 4px minmax(0,1fr)}
  html[data-design=bat] .design-commandbar button span {display:none}
  html[data-design=bat] .design-commandbar button {padding:4px 10px}
}
@media(max-width:720px){
  html[data-design] .app {display:grid;width:100%;margin:0;height:100dvh;min-height:0;grid-template-columns:48px minmax(0,1fr);grid-template-rows:52px minmax(0,1fr)}
  html[data-design] .app>.rail {display:flex;grid-column:1;grid-row:2;position:relative;inset:auto;width:48px;height:100%;padding:6px 2px;gap:3px;overflow-y:auto;scrollbar-width:none;z-index:20}
  html[data-design] .rail-mark {display:none}
  html[data-design] .rail-icon {width:44px;min-height:44px;height:44px;flex:none;border-radius:8px;color:var(--mira-muted)}
  html[data-design] .rail-icon.active {background:var(--design-selected);color:var(--mira-accent)}
  html[data-design] .rail .rail-bottom-action,html[data-design] .rail-logout {display:none}
  html[data-design] .rail a[href*="/contacts"] {display:grid}
  html[data-design] #sidebar-toggle {display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;height:52px;padding:3px 0;font-size:10px;line-height:1.2}
  html[data-design] #sidebar-toggle .design-icon {width:22px;height:22px}
  html[data-design] .app>.main {grid-column:2;grid-row:2;height:100%;min-height:0}
  html[data-design] .app>.column-divider {display:none}
  html[data-design] .design-menu-line {height:52px;padding:0 8px;gap:8px}
  html[data-design] .design-menu-line nav {display:none}
  html[data-design] .design-window-options {display:none}
  html[data-design] .design-mobile-menu {display:flex;align-items:center;gap:5px;flex:none;min-height:44px;padding:0 5px;border:0;background:transparent;color:var(--mira-text);font-size:12px}
  html[data-design] .design-mobile-compose,html[data-design] .design-mobile-window-menu {display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--mira-line);border-radius:8px;background:var(--mira-subtle);color:var(--mira-accent)}
  html[data-design] .design-mobile-compose {margin-left:auto}
  html[data-design] .design-wordmark strong {font-size:17px}
  html[data-design] .sidebar {position:fixed!important;left:48px!important;top:52px!important;bottom:0!important;height:calc(100dvh - 52px)!important;width:min(320px,calc(100vw - 48px))!important}
  html[data-design] .app.mobile-nav-open>.sidebar {display:flex!important;z-index:40}
  html[data-design] .app.mobile-nav-open>.sidebar-backdrop {position:fixed;inset:52px 0 0 48px;z-index:30;background:#07111b77}
  html[data-design] .design-mobile-sidebar-head {display:flex;align-items:center;justify-content:space-between;flex:none;min-height:48px;padding:0 8px 0 12px;border-bottom:1px solid var(--mira-line);font-size:14px}
  html[data-design] .design-mobile-sidebar-head button {width:44px;height:44px;border:0;background:transparent;color:inherit;font-size:27px}
  html[data-design] .sidebar .nav-link,html[data-design] .sidebar-group .nav-subtitle,html[data-design] .sidebar-group .account-summary {height:40px;min-height:40px;font-size:14px}
  html[data-design] .mail-workspace {height:100%;grid-template-columns:minmax(0,1fr)}
  html[data-design] .list-pane {min-height:0;max-height:none;height:100%;padding:0}
  html[data-design] .detail-pane {min-height:0;border:0;border-radius:0;margin:0;padding:0}
  html[data-design] .mail-row {min-height:108px;padding:11px 10px 11px 22px;margin:0;border-radius:0}
  html[data-design] .mail-meta {min-width:0;min-height:82px;padding-left:39px;gap:4px}
  html[data-design] .mail-topline {min-width:0;padding-right:44px;gap:6px}
  html[data-design] .mail-topline strong {font-size:13px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  html[data-design] .mail-topline time {font-size:10px;flex:none}
  html[data-design] .mail-meta .mail-subject {font-size:13px}
  html[data-design] .mail-meta small {font-size:12px;line-height:1.4;padding-right:0}
  html[data-design] .design-sender-avatar {left:23px;top:35px;width:30px;height:30px}
  html[data-design] .mail-row .quick-actions {display:none}
  html[data-design] .mail-row .design-row-more {display:grid;place-items:center;position:absolute;right:0;top:1px;width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--mira-muted);font-size:25px;line-height:1}
  html[data-design] .mail-row.design-row-actions-open .quick-actions {display:flex;position:static;opacity:1;width:max-content;max-width:100%;margin:7px 0 0 39px;border-radius:8px}
  html[data-design] .mail-row .quick-actions button {min-width:40px;min-height:40px;font-size:18px;padding:7px}
  html[data-design] .reading-card h1 {font-size:23px}
  html[data-design] .detail-content {padding:16px}
  html[data-design] .compose-content {padding:13px 14px}
  html[data-design] .compose-header {padding:12px 14px}
  html[data-design] .compose-header h1 {font-size:19px}
  html[data-design] .compose-shell>.compose-actions {padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));gap:10px;flex-wrap:nowrap}
  html[data-design] .compose-shell>.compose-actions .primary {min-height:44px;min-width:132px}
  html[data-design] .compose-shell>.compose-actions>span {font-size:10px;line-height:1.35;width:auto;min-width:0}
  html[data-design] .compose-body-field textarea {min-height:150px}
  html[data-design] .compose-field input,html[data-design] .compose-field select,html[data-design] .compose-field textarea {font-size:16px}
  html[data-design] .design-dialog {width:calc(100vw - 20px);max-height:calc(100dvh - 20px);margin:auto}
  html[data-design] .design-dialog>header {padding:15px}
  html[data-design] .design-dialog-content {padding:14px 15px 20px}
  html[data-design] .design-options {grid-template-columns:1fr}
  html[data-design] .design-options button {min-height:66px}
  html[data-design] .design-palettes button,html[data-design] .design-theme-options button {min-height:44px}
  html[data-design=bat] .app {grid-template-columns:48px minmax(0,1fr);grid-template-rows:52px minmax(0,1fr)}
  html[data-design=bat] .app>.main {grid-column:2;grid-row:2}
  html[data-design=bat] .design-menu-line {height:52px;background:var(--mira-paper);color:var(--mira-text)}
  html[data-design=bat] .design-menu-line .design-wordmark strong {font-size:17px}
  html[data-design=bat] .design-commandbar {display:none}
  html[data-design=bat] .list-search {height:36px}
  html[data-design=bat] .list-search input {font-size:16px}
  html[data-design=bat] .reading-card h1 {font-size:19px}
}
@media(prefers-reduced-motion:reduce){
  html[data-design] *,html[data-design] *::before,html[data-design] *::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
html[data-design-motion=off] *,html[data-design-motion=off] *::before,html[data-design-motion=off] *::after {animation:none!important;transition:none!important}
html[data-design=bat]:not([data-palette=classic]) .sidebar .nav-link.current {background:var(--design-selected);color:var(--mira-accent)}

/* The Bat hides the rail; its Receive button must expose the same live state. */
html[data-design] [data-design-command=sync].is-syncing .design-icon{animation:mira-refresh 1s linear infinite}
html[data-design] [data-design-command=sync].has-error,html[data-design] [data-design-command=sync].has-error .design-icon{color:#c83e49;stroke:#c83e49;fill:none}