:root {
  --bg: #f5f7fb;
  --panel: #ffffff;
  --panel-soft: #f8fafc;
  --line: #e6eaf0;
  --text: #152033;
  --muted: #6e7a8d;
  --brand: #2857d7;
  --brand-2: #163ea8;
  --brand-soft: #eaf0ff;
  --success: #15955a;
  --warning: #d78a00;
  --danger: #d23c4a;
  --shadow: 0 18px 55px rgba(31, 47, 79, .11);
  --radius: 16px;
  --sidebar-w: 250px; --list-w: 380px; --bottom-list: 42%; --message-font-scale: 1;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.tiny { font-size: 12px; }

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 32px; background: radial-gradient(circle at 15% 15%, #e8eeff 0, transparent 34%), radial-gradient(circle at 90% 10%, #f0f4ff 0, transparent 30%), linear-gradient(180deg, #fafbfe 0%, #f3f6fb 100%); }
.login-card { width: min(440px, 100%); background: rgba(255,255,255,.96); border: 1px solid rgba(231,235,243,.95); border-radius: 24px; padding: 34px; box-shadow: var(--shadow); }
.brand-lockup, .top-brand { display: flex; align-items: center; gap: 13px; }
.brand-mark { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand), #6d8eff); color: white; font-weight: 800; letter-spacing: -.04em; box-shadow: 0 10px 24px rgba(40,87,215,.28); }
.brand-mark.small { width: 38px; height: 38px; border-radius: 11px; font-size: 13px; }
.brand-name { font-weight: 800; letter-spacing: .055em; }
.brand-name.small-text { font-size: 13px; }
.brand-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.brand-sub.tiny { font-size: 11px; }
.login-card h1 { margin: 30px 0 8px; font-size: 29px; letter-spacing: -.03em; }
.login-card form { display: grid; gap: 10px; margin-top: 24px; }
label { font-size: 13px; font-weight: 700; margin-top: 6px; }
input, textarea { width: 100%; border: 1px solid var(--line); background: white; border-radius: 12px; padding: 13px 14px; color: var(--text); outline: none; transition: .18s ease; }
input:focus, textarea:focus { border-color: #91a7ed; box-shadow: 0 0 0 4px rgba(40,87,215,.10); }
.password-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.primary { border: 0; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: white; border-radius: 12px; padding: 12px 16px; font-weight: 750; box-shadow: 0 9px 22px rgba(40,87,215,.22); }
.primary:hover { transform: translateY(-1px); }
.full { width: 100%; margin-top: 10px; }
.link-btn { border: 0; background: transparent; color: var(--brand); padding: 7px 0; font-weight: 700; }
.demo-security { margin-top: 22px; border-radius: 14px; padding: 13px 14px; background: #f2f6ff; color: #52627d; display: grid; gap: 3px; font-size: 12px; }
.login-footer { position: fixed; bottom: 18px; color: var(--muted); font-size: 12px; }

.mail-shell { min-height: 100vh; background: #f5f7fb; }
.topbar { height: 76px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 280px minmax(320px, 1fr) auto; align-items: center; gap: 22px; padding: 0 22px; position: sticky; top: 0; z-index: 20; backdrop-filter: blur(15px); }
.search-wrap { max-width: 700px; width: 100%; position: relative; justify-self: center; }
.search-wrap input { padding-left: 42px; background: #f7f9fc; }
.search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 22px; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn { width: 38px; height: 38px; border: 1px solid var(--line); background: white; border-radius: 11px; display: inline-grid; place-items: center; color: #536074; position: relative; }
.icon-btn:hover { background: #f7f9fd; }
.icon-btn.compact { width: 46px; height: auto; }
.badge-dot { position: absolute; right: -3px; top: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--brand); color: white; display: grid; place-items: center; font-size: 10px; border: 2px solid white; }
.profile-btn { border: 0; background: transparent; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 12px; }
.profile-btn:hover { background: #f5f7fb; }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #dce6ff, #eef2ff); color: var(--brand-2); font-weight: 800; }
.profile-copy { display: grid; text-align: left; line-height: 1.15; }
.profile-copy strong { font-size: 12px; }
.profile-copy span { color: var(--muted); font-size: 11px; }

.mail-grid { height: calc(100vh - 76px); display: grid; grid-template-columns: var(--sidebar-w) 7px var(--list-w) 7px minmax(420px, 1fr) 230px; gap: 7px; padding: 14px; overflow: hidden; }
.splitter { border-radius:999px; position:relative; z-index:4; touch-action:none; user-select:none; transition:background .15s ease; }
.splitter::after { content:""; position:absolute; inset:0; margin:auto; border-radius:999px; background:transparent; transition:.15s ease; }
.splitter-vertical { cursor:col-resize; }
.splitter-vertical::after { width:2px; height:52px; }
.splitter:hover::after, body.resizing-layout .splitter::after { background:var(--brand); opacity:.55; }
body.resizing-layout { cursor:col-resize; user-select:none; }
.mail-grid[data-layout="bottom"] { grid-template-columns:var(--sidebar-w) 7px minmax(520px,1fr) 230px; grid-template-rows:minmax(180px,var(--bottom-list)) 7px minmax(220px,1fr); }
.mail-grid[data-layout="bottom"] .sidebar { grid-column:1; grid-row:1 / 4; }
.mail-grid[data-layout="bottom"] #sidebarSplitter { grid-column:2; grid-row:1 / 4; }
.mail-grid[data-layout="bottom"] .message-list-panel { grid-column:3; grid-row:1; }
.mail-grid[data-layout="bottom"] #previewSplitter { grid-column:3; grid-row:2; cursor:row-resize; }
.mail-grid[data-layout="bottom"] #previewSplitter::after { width:56px; height:2px; }
.mail-grid[data-layout="bottom"] .reading-panel { grid-column:3; grid-row:3; }
.mail-grid[data-layout="bottom"] .right-rail { grid-column:4; grid-row:1 / 4; }
.mail-grid[data-layout="focus"] { grid-template-columns:var(--sidebar-w) 7px minmax(560px,1fr) 230px; }
.mail-grid[data-layout="focus"] .sidebar { grid-column:1; }
.mail-grid[data-layout="focus"] #sidebarSplitter { grid-column:2; }
.mail-grid[data-layout="focus"] .message-list-panel { grid-column:3; }
.mail-grid[data-layout="focus"] #previewSplitter { display:none; }
.mail-grid[data-layout="focus"] .reading-panel { display:none; grid-column:3; }
.mail-grid[data-layout="focus"] .right-rail { grid-column:4; }
.mail-grid[data-layout="focus"].reading-open .message-list-panel { display:none; }
.mail-grid[data-layout="focus"].reading-open .reading-panel { display:flex; }

.sidebar, .message-list-panel, .reading-panel, .right-rail { min-height: 0; }
.sidebar { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; }
.compose { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 12px; }
.folders, .sidebar-section { display: grid; gap: 4px; }
.nav-item { width: 100%; border: 0; background: transparent; border-radius: 10px; padding: 10px 11px; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; color: #465268; text-align: left; }
.nav-item:hover { background: #f7f9fc; }
.nav-item.active { background: var(--brand-soft); color: var(--brand-2); font-weight: 750; }
.nav-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: #eef1f5; font-size: 11px; }
.nav-item.active .nav-count { background: var(--brand); color: white; }
.sidebar-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.sidebar-title { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 0 10px 5px; }
.storage-card { margin-top: auto; border: 1px solid var(--line); background: #fbfcfe; border-radius: 14px; padding: 13px; display: grid; gap: 9px; }
.storage-head { display: flex; justify-content: space-between; font-size: 12px; }
.progress { height: 7px; background: #e9edf5; border-radius: 999px; overflow: hidden; }
.progress-fill { width: 24%; height: 100%; background: linear-gradient(90deg, var(--brand), #77a0ff); border-radius: inherit; }
.storage-card small { color: var(--muted); }
.small-link { text-align: left; font-size: 11px; padding: 0; }
.status-card { margin-top: 10px; border-radius: 14px; padding: 12px; background: #eff9f3; display: flex; align-items: center; gap: 9px; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(21,149,90,.12); }
.status-card div { display: grid; gap: 2px; }
.status-card strong { font-size: 12px; }
.status-card small { font-size: 10px; color: #5c7b6b; }

.message-list-panel, .reading-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.list-toolbar, .reading-toolbar { min-height: 70px; border-bottom: 1px solid var(--line); padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.list-toolbar h2 { margin: 0; font-size: 18px; }
.toolbar-actions { display: flex; gap: 7px; align-items: center; }
.message-list { height: calc(100% - 70px); overflow-y: auto; }
.message-row { border-bottom: 1px solid #edf0f4; padding: 14px 14px 13px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 11px; cursor: pointer; position: relative; transition: .15s ease; }
.message-row:hover { background: #fafbfd; }
.message-row.active { background: #f1f5ff; }
.message-row.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand); }
.sender-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #edf1f8; color: #526076; font-weight: 800; font-size: 12px; }
.sender-avatar.unread { background: #e8efff; color: var(--brand); }
.message-main { min-width: 0; }
.message-main .sender { font-weight: 750; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); display: inline-block; }
.subject { margin-top: 4px; font-size: 12px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.message-meta { display: grid; justify-items: end; align-content: space-between; min-width: 54px; }
.message-meta time { color: var(--muted); font-size: 10px; }
.star { color: #9ba6b7; font-size: 17px; }
.star.on { color: var(--warning); }

.reading-panel { display: flex; flex-direction: column; }
.reading-toolbar { min-height: 60px; padding: 10px 16px; }
.counter { font-size: 11px; color: var(--muted); }
.message-content { padding: 24px; overflow-y: auto; font-size:calc(14px * var(--message-font-scale)); }
.message-header { display: grid; gap: 18px; }
.subject-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.subject-line h1 { font-size: 23px; line-height: 1.22; margin: 0; letter-spacing: -.025em; }
.external-pill { font-size: 10px; background: #fff3d7; color: #9b6300; border-radius: 999px; padding: 5px 8px; white-space: nowrap; }
.sender-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.sender-person { display: flex; align-items: center; gap: 11px; }
.sender-person .avatar { background: #f1e8ff; color: #744ab0; }
.sender-copy { display: grid; gap: 2px; }
.sender-copy strong { font-size: 13px; }
.sender-copy span { color: var(--muted); font-size: 11px; }
.message-date { color: var(--muted); font-size: 10px; }
.message-body { margin-top: 25px; line-height: 1.66; font-size: 13px; color: #273247; }
.message-body p { margin: 0 0 14px; }
.attachments { margin-top: 26px; padding-top: 18px; border-top: 1px dashed #dfe4ec; }
.attachments h4 { margin: 0 0 10px; font-size: 12px; }
.attachment-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 10px; }
.attachment { border: 1px solid var(--line); background: #fafbfd; border-radius: 12px; padding: 11px; display: flex; align-items: center; gap: 10px; }
.file-icon { width: 34px; height: 34px; border-radius: 9px; background: #ffe9ea; color: #d83a47; display: grid; place-items: center; font-weight: 800; font-size: 10px; }
.attachment div { display: grid; gap: 2px; min-width: 0; }
.attachment strong { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attachment small { color: var(--muted); }
.message-actions { margin-top: 26px; display: flex; gap: 9px; flex-wrap: wrap; }
.secondary { border: 1px solid var(--line); background: white; color: #3f4a5f; border-radius: 11px; padding: 11px 14px; font-weight: 700; }

.right-rail { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.rail-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.rail-card h3 { margin: 0 0 12px; font-size: 13px; }
.rail-card > button { width: 100%; border: 0; background: transparent; text-align: left; padding: 9px 4px; color: #49566b; border-radius: 8px; font-size: 11px; }
.rail-card > button:hover { background: #f5f7fb; }
.stats div { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; color: var(--muted); font-size: 11px; }
.stats strong { font-size: 20px; color: var(--text); }
.promo { background: linear-gradient(145deg, #eff4ff 0%, #f8faff 100%); }
.promo p { font-size: 11px; line-height: 1.5; color: #5e6c83; }
.eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--brand); font-weight: 800; }
.promo .secondary { margin-top: 6px; text-align: center; background: white; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(19,29,47,.28); display: grid; place-items: end center; z-index: 50; padding: 30px; backdrop-filter: blur(2px); }
.compose-modal { width: min(690px, calc(100vw - 40px)); height: min(650px, calc(100vh - 70px)); background: white; border-radius: 18px; box-shadow: 0 28px 80px rgba(20,32,55,.26); overflow: hidden; display: flex; flex-direction: column; }
.modal-head { min-height: 66px; padding: 13px 16px; background: #f7f9fc; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.modal-head div { display: grid; gap: 2px; }
.modal-head small { color: var(--muted); }
.compose-fields { display: flex; flex-direction: column; flex: 1; }
.compose-fields input { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.compose-fields textarea { flex: 1; border: 0; border-radius: 0; resize: none; box-shadow: none; padding-top: 18px; }
.compose-footer { min-height: 66px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 100; background: #142137; color: white; border-radius: 12px; padding: 12px 16px; font-size: 12px; box-shadow: 0 15px 45px rgba(20,33,55,.25); }

html[data-density="compact"] .message-row { padding:9px 11px 8px; gap:8px; }
html[data-density="compact"] .sender-avatar { width:32px; height:32px; }
html[data-density="compact"] .preview { -webkit-line-clamp:1; }
html[data-density="comfortable"] .message-row { padding:18px 16px 17px; gap:13px; }
html[data-density="comfortable"] .sender-avatar { width:42px; height:42px; }
.settings-section { margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.settings-section-head { display:flex; justify-content:space-between; gap:14px; align-items:center; margin-bottom:14px; }
.settings-section-head div { display:grid; gap:3px; } .settings-section-head small { color:var(--muted); }
.layout-choice-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.layout-card { border:1px solid var(--line); background:var(--panel-soft); color:var(--text); border-radius:13px; padding:10px; display:grid; gap:7px; text-align:left; }
.layout-card.selected { border-color:var(--brand); box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 15%,transparent); }
.layout-card small { color:var(--muted); font-size:10px; }
.layout-preview { height:62px; border-radius:9px; border:1px solid var(--line); background:var(--panel); position:relative; overflow:hidden; display:block; }
.layout-preview::before { content:""; position:absolute; left:0; top:0; bottom:0; width:18%; background:var(--brand-soft); border-right:1px solid var(--line); }
.preview-right i { position:absolute; left:20%; top:0; bottom:0; width:29%; background:color-mix(in srgb,var(--panel-soft) 84%,var(--brand-soft)); border-right:2px solid var(--brand); }
.preview-right b { position:absolute; left:52%; top:0; right:0; bottom:0; background:var(--panel-soft); }
.preview-bottom i { position:absolute; left:20%; right:0; top:0; height:43%; background:color-mix(in srgb,var(--panel-soft) 84%,var(--brand-soft)); border-bottom:2px solid var(--brand); }
.preview-bottom b { position:absolute; left:20%; right:0; top:47%; bottom:0; background:var(--panel-soft); }
.preview-focus i { position:absolute; left:20%; right:0; top:0; bottom:0; background:color-mix(in srgb,var(--panel-soft) 88%,var(--brand-soft)); }
.layout-controls { margin-top:16px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 20px; }
.layout-controls label { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; margin:0; }
.layout-controls input[type=range], .layout-controls select { grid-column:1 / -1; width:100%; }
.layout-controls select { border:1px solid var(--line); background:var(--panel); color:var(--text); border-radius:10px; padding:10px; }
.layout-controls output { color:var(--muted); font-size:11px; font-weight:600; }
.layout-note { margin-top:14px; }
@media (max-width: 1300px) {
  .mail-grid { grid-template-columns: min(var(--sidebar-w),220px) 7px min(var(--list-w),340px) 7px minmax(430px,1fr); }
  .mail-grid[data-layout="bottom"], .mail-grid[data-layout="focus"] { grid-template-columns:min(var(--sidebar-w),220px) 7px minmax(430px,1fr); }
  .right-rail { display: none; }
}
@media (max-width: 980px) {
  .topbar { grid-template-columns: auto 1fr auto; }
  .profile-copy { display: none; }
  .mail-grid { grid-template-columns:190px 7px min(var(--list-w),330px) 7px minmax(360px,1fr); }
  .mail-grid[data-layout="bottom"], .mail-grid[data-layout="focus"] { grid-template-columns:190px 7px minmax(420px,1fr); }
}
@media (max-width: 760px) {
  .topbar { grid-template-columns: auto 1fr; padding: 0 12px; height: 64px; }
  .search-wrap { grid-column: 1 / -1; position: fixed; left: 12px; right: 12px; top: 70px; z-index: 30; display: none; }
  .top-actions .icon-btn { display: none; }
  .mail-grid, .mail-grid[data-layout="bottom"], .mail-grid[data-layout="focus"] { height:calc(100vh - 64px); grid-template-columns:74px 1fr !important; grid-template-rows:1fr !important; padding:8px; gap:8px; }
  .splitter { display:none !important; }
  .mail-grid .sidebar { grid-column:1 !important; grid-row:1 !important; }
  .mail-grid .message-list-panel, .mail-grid[data-layout="bottom"] .message-list-panel, .mail-grid[data-layout="focus"] .message-list-panel { grid-column:2 !important; grid-row:1 !important; display:block; }
  .mail-grid .reading-panel, .mail-grid[data-layout="bottom"] .reading-panel, .mail-grid[data-layout="focus"] .reading-panel { grid-column:2 !important; grid-row:1 !important; display:none; }
  .mail-grid.reading-open .message-list-panel { display:none !important; }
  .mail-grid.reading-open .reading-panel { display:flex !important; }
  .sidebar { padding: 8px; }
  .compose span, .nav-item span:nth-child(2), .nav-count, .sidebar-section, .storage-card, .status-card { display: none; }
  .compose { width: 46px; height: 46px; margin-inline: auto; }
  .nav-item { grid-template-columns: 1fr; justify-items: center; padding: 12px 8px; }
  .message-list-panel { display: block; }
  .reading-panel { display: none; }
  .mail-grid.reading-open .message-list-panel { display: none; }
  .mail-grid.reading-open .reading-panel { display: flex; grid-column: 2; }
  .message-row { grid-template-columns: 36px 1fr auto; }
}

@media (prefers-color-scheme: dark) {
  :root { --bg:#0f1520; --panel:#151d2a; --panel-soft:#17202e; --line:#273142; --text:#edf2fb; --muted:#96a2b5; --brand-soft:#1a2b55; --shadow:0 18px 60px rgba(0,0,0,.28); }
  body, .mail-shell { background:#0f1520; }
  .topbar, .sidebar, .message-list-panel, .reading-panel, .rail-card, .compose-modal, .login-card { background:#151d2a; }
  input, textarea, .icon-btn, .secondary { background:#111824; color:var(--text); }
  .search-wrap input, .storage-card, .modal-head { background:#111824; }
  .message-row:hover { background:#192231; }
  .message-row.active { background:#1a2843; }
  .attachment { background:#111824; }
  .promo { background:linear-gradient(145deg,#18243a,#121a28); }
}

/* v0.2 Security PoC additions */
.security-banner { margin-top: 18px; padding: 11px 13px; border-radius: 12px; font-size: 12px; line-height: 1.45; border: 1px solid var(--line); }
.security-banner.neutral { background: #f6f8fc; color: #5f6e84; }
.security-banner.success { background: #edf9f2; color: #276946; border-color: #cfead9; }
.security-banner.warning { background: #fff8e7; color: #8a6200; border-color: #f2deb0; }
.security-banner.danger { background: #fff0f1; color: #9f2f3a; border-color: #f1c8cd; }
button:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }
.diagnostic-card .diag-row { display:flex; align-items:center; justify-content:space-between; padding:7px 0; font-size:11px; border-bottom:1px solid var(--line); }
.diagnostic-card .diag-row strong { font-size:11px; }
.diag-ok { color: var(--success); }
.diag-bad { color: var(--danger); }
.diag-pending { color: var(--warning); }
.diag-detail { display:block; margin-top:10px; color:var(--muted); font-size:10px; line-height:1.45; }
@media (prefers-color-scheme: dark) {
  .security-banner.neutral { background:#111824; }
  .security-banner.success { background:#14281f; color:#8ed1ad; border-color:#254735; }
  .security-banner.warning { background:#2a2414; color:#e4c36b; border-color:#493d1e; }
  .security-banner.danger { background:#2d171b; color:#e59aa2; border-color:#51262c; }
}

/* v0.3 Real Mailbox additions */
.loading-row, .empty-row { padding: 30px 18px; color: var(--muted); font-size: 12px; text-align: center; }
.message-placeholder { min-height: 320px; height: 100%; display: grid; place-items: center; color: var(--muted); font-size: 13px; text-align: center; padding: 24px; }
.real-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.safe-view-note { margin-top: 22px; padding: 10px 12px; border: 1px solid #cfe0ff; background: #f2f6ff; border-radius: 10px; color: #4e648c; font-size: 11px; line-height: 1.45; }
.live-fill { width: 100% !important; }
@media (prefers-color-scheme: dark) {
  .safe-view-note { background: #16233a; border-color: #2a426c; color: #a9bee5; }
}

/* v0.5 Usable Mailbox + SMTP Send */
.message-body { color: var(--text); }
.html-message { color: var(--text); overflow-wrap: anywhere; }
.html-message a { color: var(--brand); }
.html-message img { max-width: 100%; height: auto; border-radius: 8px; }
.html-message blockquote { border-left: 3px solid var(--line); margin-left: 0; padding-left: 14px; color: var(--muted); }
.html-message table { max-width: 100%; border-collapse: collapse; }
.html-message td, .html-message th { border: 1px solid var(--line); padding: 5px 7px; }
.safe-view-note { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.inline-link { width: auto !important; padding: 0; font-size: 11px; }
.download-attachment { width: 100%; color: var(--text); text-align: left; cursor: pointer; }
.download-attachment:hover { border-color: #9eb8ef; background: var(--brand-soft); }
.download-mark { margin-left: auto; font-size: 18px; color: var(--brand); }
.load-more-wrap { padding: 14px; display: grid; place-items: center; border-top: 1px solid var(--line); }
.load-more { width: 100%; }
.compose-status { color: var(--muted); font-size: 11px; line-height: 1.35; flex: 1; padding-right: 12px; }
#sendMessage { min-width: 105px; }
@media (prefers-color-scheme: dark) {
  .message-body, .html-message { color: #edf2fb; }
  .html-message a { color: #8fb1ff; }
  .download-attachment:hover { background: #1a2843; border-color: #365c9e; }
}

/* v0.6 Personalizacja, Do/DW/UDW, Kontakty, Reguły */
html[data-theme="light"] {
  --bg:#f5f7fb; --panel:#ffffff; --panel-soft:#f8fafc; --line:#e6eaf0; --text:#152033; --muted:#6e7a8d;
  --brand:#2857d7; --brand-2:#163ea8; --brand-soft:#eaf0ff; --shadow:0 18px 55px rgba(31,47,79,.11);
}
html[data-theme="dark"] {
  --bg:#0f1520; --panel:#151d2a; --panel-soft:#17202e; --line:#273142; --text:#edf2fb; --muted:#96a2b5;
  --brand:#4977f5; --brand-2:#2857d7; --brand-soft:#1a2b55; --shadow:0 18px 60px rgba(0,0,0,.28);
}
html[data-theme="graphite"] {
  --bg:#151719; --panel:#1d2023; --panel-soft:#24282c; --line:#34393f; --text:#f1f3f4; --muted:#a7adb3;
  --brand:#9ea8b3; --brand-2:#6e7882; --brand-soft:#30353a; --shadow:0 18px 60px rgba(0,0,0,.32);
}
html[data-theme="mpower"] {
  --bg:#0b1017; --panel:#121923; --panel-soft:#17212d; --line:#263646; --text:#f3f7fb; --muted:#93a4b7;
  --brand:#0066b1; --brand-2:#003f7d; --brand-soft:#102c44; --shadow:0 20px 65px rgba(0,0,0,.36);
  --mp-light:#00a5df; --mp-dark:#003f7d; --mp-red:#e32636;
}
html[data-theme="light"] body, html[data-theme="light"] .mail-shell { background:#f5f7fb; }
html[data-theme="light"] .topbar, html[data-theme="light"] .sidebar, html[data-theme="light"] .message-list-panel, html[data-theme="light"] .reading-panel, html[data-theme="light"] .rail-card, html[data-theme="light"] .compose-modal, html[data-theme="light"] .manager-modal, html[data-theme="light"] .settings-modal, html[data-theme="light"] .login-card { background:#fff; }
html[data-theme="light"] input, html[data-theme="light"] textarea, html[data-theme="light"] .icon-btn, html[data-theme="light"] .secondary { background:#fff; color:var(--text); }
html[data-theme="light"] .search-wrap input, html[data-theme="light"] .storage-card, html[data-theme="light"] .modal-head { background:#f7f9fc; }
html[data-theme="light"] .message-row:hover { background:#fafbfd; }
html[data-theme="light"] .message-row.active { background:#f1f5ff; }
html[data-theme="light"] .attachment { background:#fafbfd; }
html[data-theme="light"] .promo { background:linear-gradient(145deg,#eff4ff,#f8faff); }
html[data-theme="light"] .message-body, html[data-theme="light"] .html-message { color:var(--text); }

html[data-theme="dark"] body, html[data-theme="dark"] .mail-shell,
html[data-theme="graphite"] body, html[data-theme="graphite"] .mail-shell,
html[data-theme="mpower"] body, html[data-theme="mpower"] .mail-shell { background:var(--bg); }
html[data-theme="dark"] .topbar, html[data-theme="dark"] .sidebar, html[data-theme="dark"] .message-list-panel, html[data-theme="dark"] .reading-panel, html[data-theme="dark"] .rail-card, html[data-theme="dark"] .compose-modal, html[data-theme="dark"] .manager-modal, html[data-theme="dark"] .settings-modal, html[data-theme="dark"] .login-card,
html[data-theme="graphite"] .topbar, html[data-theme="graphite"] .sidebar, html[data-theme="graphite"] .message-list-panel, html[data-theme="graphite"] .reading-panel, html[data-theme="graphite"] .rail-card, html[data-theme="graphite"] .compose-modal, html[data-theme="graphite"] .manager-modal, html[data-theme="graphite"] .settings-modal, html[data-theme="graphite"] .login-card,
html[data-theme="mpower"] .topbar, html[data-theme="mpower"] .sidebar, html[data-theme="mpower"] .message-list-panel, html[data-theme="mpower"] .reading-panel, html[data-theme="mpower"] .rail-card, html[data-theme="mpower"] .compose-modal, html[data-theme="mpower"] .manager-modal, html[data-theme="mpower"] .settings-modal, html[data-theme="mpower"] .login-card { background:var(--panel); }
html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] .icon-btn, html[data-theme="dark"] .secondary,
html[data-theme="graphite"] input, html[data-theme="graphite"] textarea, html[data-theme="graphite"] .icon-btn, html[data-theme="graphite"] .secondary,
html[data-theme="mpower"] input, html[data-theme="mpower"] textarea, html[data-theme="mpower"] .icon-btn, html[data-theme="mpower"] .secondary { background:#0f1620; color:var(--text); }
html[data-theme="graphite"] input, html[data-theme="graphite"] textarea, html[data-theme="graphite"] .icon-btn, html[data-theme="graphite"] .secondary { background:#181b1e; }
html[data-theme="dark"] .search-wrap input, html[data-theme="dark"] .storage-card, html[data-theme="dark"] .modal-head,
html[data-theme="graphite"] .search-wrap input, html[data-theme="graphite"] .storage-card, html[data-theme="graphite"] .modal-head,
html[data-theme="mpower"] .search-wrap input, html[data-theme="mpower"] .storage-card, html[data-theme="mpower"] .modal-head { background:var(--panel-soft); }
html[data-theme="dark"] .message-row:hover, html[data-theme="graphite"] .message-row:hover, html[data-theme="mpower"] .message-row:hover { background:var(--panel-soft); }
html[data-theme="dark"] .message-row.active, html[data-theme="graphite"] .message-row.active, html[data-theme="mpower"] .message-row.active { background:var(--brand-soft); }
html[data-theme="dark"] .attachment, html[data-theme="graphite"] .attachment, html[data-theme="mpower"] .attachment { background:#0f1620; }
html[data-theme="dark"] .message-body, html[data-theme="dark"] .html-message,
html[data-theme="graphite"] .message-body, html[data-theme="graphite"] .html-message,
html[data-theme="mpower"] .message-body, html[data-theme="mpower"] .html-message { color:var(--text); }
html[data-theme="mpower"] .brand-mark { background:linear-gradient(135deg,var(--mp-light) 0 33%,var(--mp-dark) 33% 66%,var(--mp-red) 66%); box-shadow:0 10px 28px rgba(0,102,177,.32); }
html[data-theme="mpower"] .primary { background:linear-gradient(110deg,var(--mp-light) 0 12%,var(--brand) 12% 76%,var(--mp-red) 76% 100%); }
html[data-theme="mpower"] .message-row.active::before { background:linear-gradient(180deg,var(--mp-light),var(--mp-dark),var(--mp-red)); width:4px; }
html[data-theme="mpower"] .progress-fill { background:linear-gradient(90deg,var(--mp-light),var(--mp-dark),var(--mp-red)); }
html[data-theme="mpower"] .external-pill { border:1px solid rgba(227,38,54,.45); }

.recipient-line { position:relative; min-height:48px; display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:start; border-bottom:1px solid var(--line); }
.recipient-line label { margin:0; padding:15px 0 0 14px; color:var(--muted); font-weight:700; }
.recipient-line input { border:0 !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important; }
.recipient-box { position:relative; min-width:0; }
.compact-link { padding:14px 14px 0 8px; white-space:nowrap; font-size:11px; }
.contact-suggestions { position:absolute; left:6px; right:6px; top:44px; z-index:80; background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:5px; max-height:240px; overflow:auto; }
.contact-suggestion { width:100%; border:0; background:transparent; color:var(--text); border-radius:8px; padding:8px 10px; display:flex; justify-content:space-between; gap:12px; text-align:left; }
.contact-suggestion:hover { background:var(--brand-soft); }
.contact-suggestion span { color:var(--muted); font-size:11px; }
.sender-actions { display:flex; align-items:center; gap:9px; }
.mini-action { padding:6px 9px; font-size:10px; }

.manager-modal { width:min(920px,calc(100vw - 42px)); height:min(680px,calc(100vh - 70px)); background:var(--panel); color:var(--text); border-radius:18px; box-shadow:0 28px 80px rgba(20,32,55,.32); overflow:hidden; display:flex; flex-direction:column; }
.manager-toolbar { display:grid; grid-template-columns:1fr auto; gap:12px; padding:14px; border-bottom:1px solid var(--line); }
.manager-layout { min-height:0; flex:1; display:grid; grid-template-columns:340px 1fr; }
.manager-list { border-right:1px solid var(--line); overflow:auto; padding:8px; }
.contact-row { width:100%; border:0; background:transparent; color:var(--text); border-radius:12px; display:grid; grid-template-columns:40px 1fr; gap:10px; padding:10px; text-align:left; }
.contact-row:hover { background:var(--brand-soft); }
.contact-avatar { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--brand-soft); color:var(--brand); font-weight:800; font-size:12px; }
.contact-row-copy { min-width:0; display:grid; gap:2px; }
.contact-row-copy strong { font-size:12px; }
.contact-row-copy small { color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.manager-form { padding:20px; overflow:auto; display:grid; align-content:start; gap:8px; }
.form-actions { display:grid; grid-template-columns:auto 1fr auto auto; gap:9px; align-items:center; margin-top:18px; }
.manager-empty { display:grid; place-items:center; color:var(--muted); font-size:12px; padding:24px; text-align:center; }
.compact-empty { min-height:110px; }
.danger-btn { border:1px solid rgba(210,60,74,.3); background:rgba(210,60,74,.09); color:var(--danger); border-radius:10px; padding:10px 12px; font-weight:750; }
.small-danger { padding:7px 10px; font-size:10px; }

.settings-modal { width:min(720px,calc(100vw - 42px)); background:var(--panel); color:var(--text); border-radius:18px; box-shadow:0 28px 80px rgba(20,32,55,.32); overflow:hidden; }
.theme-grid { padding:18px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.theme-card { border:1px solid var(--line); background:var(--panel-soft); color:var(--text); border-radius:14px; padding:12px; text-align:left; display:grid; gap:5px; }
.theme-card:hover, .theme-card.selected { border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent); }
.theme-card strong { font-size:13px; }
.theme-card small { color:var(--muted); }
.theme-preview { height:62px; border-radius:10px; border:1px solid var(--line); margin-bottom:6px; display:block; position:relative; overflow:hidden; }
.light-preview { background:linear-gradient(90deg,#fff 0 28%,#edf2f8 28% 31%,#fff 31%); }
.dark-preview { background:linear-gradient(90deg,#151d2a 0 28%,#273142 28% 31%,#151d2a 31%); }
.graphite-preview { background:linear-gradient(90deg,#1d2023 0 28%,#454b51 28% 31%,#24282c 31%); }
.system-preview { background:linear-gradient(90deg,#fff 0 49%,#202936 49% 100%); }
.mpower-preview { background:#101822; display:flex; align-items:stretch; gap:4px; padding:0 14px; }
.mpower-preview i { display:block; width:12px; transform:skew(-14deg); }
.mpower-preview i:nth-child(1){background:#00a5df}.mpower-preview i:nth-child(2){background:#003f7d}.mpower-preview i:nth-child(3){background:#e32636}
.settings-note { margin:0 18px 18px; border:1px solid var(--line); border-radius:12px; padding:11px 12px; color:var(--muted); font-size:11px; line-height:1.5; }

.rules-modal { height:min(700px,calc(100vh - 70px)); overflow:auto; }
.rule-capability { margin:14px 16px 0; border-radius:11px; padding:10px 12px; font-size:11px; line-height:1.45; }
.rule-capability.ok { background:#edf9f2; color:#276946; border:1px solid #cfead9; }
.rule-capability.warn { background:#fff8e7; color:#8a6200; border:1px solid #f2deb0; }
html[data-theme="dark"] .rule-capability.ok, html[data-theme="graphite"] .rule-capability.ok, html[data-theme="mpower"] .rule-capability.ok { background:#14281f; color:#8ed1ad; border-color:#254735; }
html[data-theme="dark"] .rule-capability.warn, html[data-theme="graphite"] .rule-capability.warn, html[data-theme="mpower"] .rule-capability.warn { background:#2a2414; color:#e4c36b; border-color:#493d1e; }
.rule-form { margin:14px 16px; display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:end; }
.rule-form > div { display:grid; gap:6px; }
.check-line { grid-column:1 / -1; display:flex; align-items:center; gap:8px; font-weight:600; }
.check-line input { width:auto; }
.rule-form .primary { justify-self:start; }
.section-heading { margin:18px 16px 8px; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:800; }
.rules-list { padding:0 16px 20px; display:grid; gap:9px; }
.rule-row { border:1px solid var(--line); border-radius:12px; padding:11px 12px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.rule-copy { display:grid; gap:2px; min-width:0; }
.rule-copy strong { font-size:12px; }.rule-copy span { color:var(--brand); font-size:11px; }.rule-copy small { color:var(--muted); }

@media (max-width:760px) {
  .manager-modal, .settings-modal { width:calc(100vw - 16px); height:calc(100vh - 24px); }
  .manager-layout { grid-template-columns:1fr; }
  .manager-list { border-right:0; border-bottom:1px solid var(--line); max-height:38vh; }
  .theme-grid { grid-template-columns:1fr; overflow:auto; max-height:70vh; }
  .rule-form { grid-template-columns:1fr; }.check-line{grid-column:auto}.rule-form .primary{width:100%}
  .recipient-line { grid-template-columns:38px minmax(0,1fr) auto; }
}
html[data-theme="dark"] .login-shell, html[data-theme="graphite"] .login-shell, html[data-theme="mpower"] .login-shell {
  background:radial-gradient(circle at 15% 15%,var(--brand-soft) 0,transparent 32%),linear-gradient(180deg,var(--bg),#080c12);
}
html[data-theme="graphite"] .login-shell { background:linear-gradient(180deg,#1a1d20,#101214); }
html[data-theme="light"] .security-banner.neutral { background:#f6f8fc; color:#5f6e84; }
html[data-theme="light"] .security-banner.success { background:#edf9f2; color:#276946; border-color:#cfead9; }
html[data-theme="light"] .security-banner.warning { background:#fff8e7; color:#8a6200; border-color:#f2deb0; }
html[data-theme="light"] .security-banner.danger { background:#fff0f1; color:#9f2f3a; border-color:#f1c8cd; }
@media (max-width:760px) {
  .sidebar-section { display:grid; margin-top:10px; padding-top:10px; }
  .sidebar-section .sidebar-title { display:none; }
  .sidebar-section .nav-item span:nth-child(2) { display:none; }
  .sidebar-section .nav-item { display:grid; }
}

/* Performance themes inherited from the 0.7 baseline */
html[data-theme="performance"] {
  --bg:#090a0c; --panel:#111417; --panel-soft:#181c20; --line:#2a3035; --text:#f3f5f6; --muted:#9ba3aa;
  --brand:#16c7b0; --brand-2:#0e8f82; --brand-soft:#102b29; --shadow:0 22px 70px rgba(0,0,0,.48);
  --perf-mint:#16d7bd; --perf-silver:#c7cdd2; --perf-gun:#242a2f; --perf-red:#f23a52;
}

/* Both performance families use the whole viewport, not only buttons */
html[data-theme="mpower"] body,
html[data-theme="performance"] body { background:var(--bg); }
html[data-theme="mpower"] .mail-shell,
html[data-theme="performance"] .mail-shell { position:relative; isolation:isolate; overflow:hidden; background:var(--bg); }
html[data-theme="mpower"] .mail-shell::before,
html[data-theme="performance"] .mail-shell::before { content:""; position:fixed; inset:76px 0 0; pointer-events:none; z-index:0; opacity:.72; }
html[data-theme="mpower"] .mail-grid,
html[data-theme="performance"] .mail-grid { position:relative; z-index:1; }

/* Motorsport / M-Power: racing bands and color carried through every column */
html[data-theme="mpower"] .mail-shell {
  background:
    radial-gradient(circle at 8% 22%,rgba(0,165,223,.14),transparent 27%),
    radial-gradient(circle at 76% 96%,rgba(227,38,54,.09),transparent 32%),
    linear-gradient(135deg,#080d13 0%,#0d141d 52%,#091018 100%);
}
html[data-theme="mpower"] .mail-shell::before {
  background:
    linear-gradient(116deg,transparent 0 10%,rgba(0,165,223,.075) 10% 13%,transparent 13% 15%,rgba(0,63,125,.10) 15% 18%,transparent 18% 20%,rgba(227,38,54,.055) 20% 22.5%,transparent 22.5% 100%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.012) 0 1px,transparent 1px 14px);
}
html[data-theme="mpower"] .topbar {
  background:linear-gradient(90deg,rgba(10,17,25,.97),rgba(17,27,39,.96) 48%,rgba(10,15,22,.97));
  border-bottom-color:#263746; box-shadow:0 12px 30px rgba(0,0,0,.26);
}
html[data-theme="mpower"] .topbar::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:linear-gradient(90deg,var(--mp-light) 0 15%,var(--mp-dark) 15% 31%,var(--mp-red) 31% 39%,transparent 62%); opacity:.95; }
html[data-theme="mpower"] .sidebar,
html[data-theme="mpower"] .message-list-panel,
html[data-theme="mpower"] .reading-panel,
html[data-theme="mpower"] .rail-card,
html[data-theme="mpower"] .compose-modal,
html[data-theme="mpower"] .manager-modal,
html[data-theme="mpower"] .settings-modal,
html[data-theme="mpower"] .login-card {
  background:linear-gradient(160deg,rgba(19,27,38,.97),rgba(13,20,29,.98));
  border-color:#263746;
}
html[data-theme="mpower"] .sidebar { box-shadow:inset 3px 0 0 rgba(0,165,223,.82),0 20px 50px rgba(0,0,0,.18); }
html[data-theme="mpower"] .message-list-panel { box-shadow:inset 0 2px 0 rgba(0,63,125,.65); }
html[data-theme="mpower"] .reading-panel { background:radial-gradient(circle at 92% 8%,rgba(0,165,223,.075),transparent 28%),linear-gradient(155deg,#121a25,#0e151e); box-shadow:inset 0 2px 0 rgba(227,38,54,.36); }
html[data-theme="mpower"] .right-rail .rail-card:nth-child(1) { border-top:2px solid var(--mp-light); }
html[data-theme="mpower"] .right-rail .rail-card:nth-child(2) { border-top:2px solid var(--mp-dark); }
html[data-theme="mpower"] .right-rail .rail-card:nth-child(3) { border-top:2px solid var(--mp-red); }
html[data-theme="mpower"] .nav-item { color:#b6c2cf; }
html[data-theme="mpower"] .nav-item:hover { background:linear-gradient(90deg,rgba(0,165,223,.08),rgba(0,63,125,.06),transparent); }
html[data-theme="mpower"] .nav-item.active { background:linear-gradient(90deg,rgba(0,165,223,.16),rgba(0,63,125,.19) 68%,rgba(227,38,54,.08)); color:#eef8ff; box-shadow:inset 3px 0 0 var(--mp-light); }
html[data-theme="mpower"] .message-row { border-bottom-color:#21303e; }
html[data-theme="mpower"] .message-row:hover { background:linear-gradient(90deg,rgba(0,165,223,.055),rgba(0,63,125,.035),rgba(227,38,54,.018)); }
html[data-theme="mpower"] .message-row.active { background:linear-gradient(100deg,rgba(0,165,223,.13),rgba(0,63,125,.16) 64%,rgba(227,38,54,.07)); box-shadow:inset 0 0 0 1px rgba(0,165,223,.08); }
html[data-theme="mpower"] .sender-avatar.unread,
html[data-theme="mpower"] .contact-avatar { background:linear-gradient(145deg,#112b40,#132034); color:#7edcff; border:1px solid rgba(0,165,223,.22); }
html[data-theme="mpower"] .avatar { box-shadow:0 0 0 2px #0e151e,0 0 0 4px rgba(0,165,223,.28),0 0 0 5px rgba(227,38,54,.14); }
html[data-theme="mpower"] .search-wrap input:focus,
html[data-theme="mpower"] input:focus,
html[data-theme="mpower"] textarea:focus { border-color:rgba(0,165,223,.72); box-shadow:0 0 0 4px rgba(0,165,223,.10),0 0 28px rgba(0,102,177,.09); }
html[data-theme="mpower"] .modal-head { position:relative; }
html[data-theme="mpower"] .modal-head::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:linear-gradient(90deg,var(--mp-light),var(--mp-dark) 46%,var(--mp-red) 76%,transparent); }
html[data-theme="mpower"] .toast { background:linear-gradient(105deg,#102435,#102033 72%,#411621); border:1px solid #284458; }
html[data-theme="mpower"] .login-shell {
  background:
    linear-gradient(116deg,transparent 0 18%,rgba(0,165,223,.11) 18% 22%,transparent 22% 25%,rgba(0,63,125,.15) 25% 30%,transparent 30% 33%,rgba(227,38,54,.09) 33% 36%,transparent 36%),
    radial-gradient(circle at 75% 20%,rgba(0,102,177,.17),transparent 32%),
    linear-gradient(145deg,#070b10,#0e1721 58%,#080c11);
}
html[data-theme="mpower"] .login-card { box-shadow:0 34px 100px rgba(0,0,0,.56),0 0 0 1px rgba(0,165,223,.06); }
html[data-theme="mpower"] .login-card::before { content:""; display:block; height:3px; margin:-34px -34px 28px; border-radius:24px 24px 0 0; background:linear-gradient(90deg,var(--mp-light) 0 24%,var(--mp-dark) 24% 52%,var(--mp-red) 52% 69%,transparent 69%); }

/* Performance Black — AMG-inspired, restrained executive performance */
html[data-theme="performance"] .mail-shell {
  background:
    radial-gradient(circle at 80% -5%,rgba(22,215,189,.10),transparent 30%),
    radial-gradient(circle at 5% 88%,rgba(242,58,82,.045),transparent 28%),
    linear-gradient(145deg,#070809,#0d1012 52%,#090a0c);
}
html[data-theme="performance"] .mail-shell::before {
  background:
    linear-gradient(124deg,transparent 0 72%,rgba(22,215,189,.035) 72% 73%,transparent 73% 79%,rgba(199,205,210,.028) 79% 79.5%,transparent 79.5%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.010) 0 1px,transparent 1px 18px);
}
html[data-theme="performance"] .topbar,
html[data-theme="performance"] .sidebar,
html[data-theme="performance"] .message-list-panel,
html[data-theme="performance"] .reading-panel,
html[data-theme="performance"] .rail-card,
html[data-theme="performance"] .compose-modal,
html[data-theme="performance"] .manager-modal,
html[data-theme="performance"] .settings-modal,
html[data-theme="performance"] .login-card { background:linear-gradient(160deg,rgba(19,22,25,.985),rgba(13,15,17,.985)); border-color:#2b3034; }
html[data-theme="performance"] .topbar { background:linear-gradient(90deg,#0d0f11,#171a1d 50%,#0d0f11); box-shadow:0 12px 34px rgba(0,0,0,.34); position:sticky; }
html[data-theme="performance"] .topbar::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:linear-gradient(90deg,transparent 0 7%,var(--perf-silver) 7% 18%,#555d63 18% 58%,var(--perf-mint) 58% 80%,transparent 93%); opacity:.75; }
html[data-theme="performance"] .brand-mark { background:linear-gradient(145deg,#343a3f,#111416 65%); color:#f1f4f5; border:1px solid #485057; box-shadow:0 10px 28px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08); position:relative; overflow:hidden; }
html[data-theme="performance"] .brand-mark::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg,var(--perf-silver),var(--perf-mint) 68%,var(--perf-red)); }
html[data-theme="performance"] .primary { background:linear-gradient(145deg,#23282c,#111416); border:1px solid rgba(22,215,189,.58); color:#f5ffff; box-shadow:0 10px 28px rgba(0,0,0,.34),0 0 20px rgba(22,215,189,.08); }
html[data-theme="performance"] .primary:hover { border-color:var(--perf-mint); box-shadow:0 12px 32px rgba(0,0,0,.4),0 0 26px rgba(22,215,189,.13); }
html[data-theme="performance"] input,
html[data-theme="performance"] textarea,
html[data-theme="performance"] .icon-btn,
html[data-theme="performance"] .secondary { background:#0c0f11; color:var(--text); border-color:#30363b; }
html[data-theme="performance"] .search-wrap input,
html[data-theme="performance"] .storage-card,
html[data-theme="performance"] .modal-head { background:#14181b; }
html[data-theme="performance"] input:focus,
html[data-theme="performance"] textarea:focus { border-color:rgba(22,215,189,.7); box-shadow:0 0 0 4px rgba(22,215,189,.08); }
html[data-theme="performance"] .sidebar { box-shadow:inset 2px 0 0 rgba(199,205,210,.28); }
html[data-theme="performance"] .nav-item { color:#b9c0c5; }
html[data-theme="performance"] .nav-item:hover { background:rgba(255,255,255,.028); }
html[data-theme="performance"] .nav-item.active { color:#f2fffd; background:linear-gradient(90deg,rgba(22,215,189,.13),rgba(255,255,255,.025)); box-shadow:inset 3px 0 0 var(--perf-mint); }
html[data-theme="performance"] .message-row { border-bottom-color:#23282c; }
html[data-theme="performance"] .message-row:hover { background:rgba(255,255,255,.018); }
html[data-theme="performance"] .message-row.active { background:linear-gradient(100deg,rgba(22,215,189,.10),rgba(255,255,255,.018)); box-shadow:inset 0 0 0 1px rgba(22,215,189,.06); }
html[data-theme="performance"] .message-row.active::before { width:3px; background:linear-gradient(180deg,var(--perf-silver),var(--perf-mint) 65%,var(--perf-red)); }
html[data-theme="performance"] .unread-dot,
html[data-theme="performance"] .progress-fill { background:var(--perf-mint); }
html[data-theme="performance"] .sender-avatar.unread,
html[data-theme="performance"] .contact-avatar { background:#172523; color:#69ead8; border:1px solid rgba(22,215,189,.18); }
html[data-theme="performance"] .avatar { background:linear-gradient(145deg,#2e3438,#121517); color:#ecf2f3; box-shadow:0 0 0 2px #111416,0 0 0 3px rgba(22,215,189,.32); }
html[data-theme="performance"] .reading-panel { background:radial-gradient(circle at 92% 7%,rgba(22,215,189,.045),transparent 25%),linear-gradient(160deg,#111416,#0d1012); }
html[data-theme="performance"] .right-rail .rail-card { box-shadow:inset 0 1px 0 rgba(199,205,210,.07); }
html[data-theme="performance"] .right-rail .rail-card:first-child { border-top:2px solid rgba(22,215,189,.72); }
html[data-theme="performance"] .external-pill { background:rgba(242,58,82,.08); color:#ff8a9b; border:1px solid rgba(242,58,82,.26); }
html[data-theme="performance"] .attachment { background:#0d1012; border-color:#2b3034; }
html[data-theme="performance"] .promo { background:linear-gradient(145deg,#15191c,#101315); }
html[data-theme="performance"] .promo p { color:#a7afb5; }
html[data-theme="performance"] .eyebrow,
html[data-theme="performance"] .link-btn,
html[data-theme="performance"] .download-mark { color:var(--perf-mint); }
html[data-theme="performance"] .modal-head { position:relative; }
html[data-theme="performance"] .modal-head::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:linear-gradient(90deg,var(--perf-silver),#51585d 45%,var(--perf-mint) 80%,transparent); }
html[data-theme="performance"] .toast { background:#121719; border:1px solid #30383c; color:#f3f7f7; box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 22px rgba(22,215,189,.07); }
html[data-theme="performance"] .login-shell {
  background:
    linear-gradient(126deg,transparent 0 68%,rgba(22,215,189,.05) 68% 69%,transparent 69% 75%,rgba(199,205,210,.035) 75% 75.5%,transparent 75.5%),
    radial-gradient(circle at 78% 18%,rgba(22,215,189,.10),transparent 30%),
    linear-gradient(145deg,#070809,#111416 60%,#08090a);
}
html[data-theme="performance"] .login-card { box-shadow:0 34px 100px rgba(0,0,0,.62),0 0 0 1px rgba(199,205,210,.04); }
html[data-theme="performance"] .login-card::before { content:""; display:block; height:2px; margin:-34px -34px 29px; background:linear-gradient(90deg,var(--perf-silver),#51585d 50%,var(--perf-mint) 78%,var(--perf-red)); }
html[data-theme="performance"] .demo-security { background:#11181a; color:#aab5b8; border:1px solid #283033; }
html[data-theme="performance"] .security-banner.neutral { background:#111619; color:#aab3b8; }
html[data-theme="performance"] .security-banner.success { background:#10211e; color:#8be3d5; border-color:#23443e; }
html[data-theme="performance"] .security-banner.warning { background:#292313; color:#e4c36b; border-color:#493d1e; }
html[data-theme="performance"] .security-banner.danger { background:#2b141a; color:#f29aa7; border-color:#51262c; }
html[data-theme="performance"] .rule-capability.ok { background:#10211e; color:#8be3d5; border-color:#23443e; }
html[data-theme="performance"] .rule-capability.warn { background:#292313; color:#e4c36b; border-color:#493d1e; }

/* Theme cards */
.performance-preview { background:linear-gradient(90deg,#0b0d0f 0 28%,#343a3f 28% 31%,#15191c 31%); }
.performance-preview::before { content:""; position:absolute; left:16px; right:16px; bottom:12px; height:2px; background:linear-gradient(90deg,#c7cdd2,#555d63 48%,#16d7bd 78%,#f23a52); }
.performance-preview i:first-child { position:absolute; width:28px; height:28px; right:16px; top:11px; border:1px solid #4b5358; border-radius:50%; box-shadow:inset 0 0 0 4px #161a1d; }
.performance-preview i:last-child { position:absolute; width:18px; height:2px; right:21px; top:24px; background:#16d7bd; transform:rotate(-18deg); transform-origin:right center; }
html[data-theme="mpower"] .theme-card.selected { box-shadow:0 0 0 2px rgba(0,165,223,.24),0 0 26px rgba(0,102,177,.10); }
html[data-theme="performance"] .theme-card.selected { box-shadow:0 0 0 2px rgba(22,215,189,.20),0 0 25px rgba(22,215,189,.08); }

@media (max-width:760px) {
  html[data-theme="mpower"] .mail-shell::before,
  html[data-theme="performance"] .mail-shell::before { inset:64px 0 0; opacity:.45; }
  html[data-theme="mpower"] .sidebar { box-shadow:inset 2px 0 0 rgba(0,165,223,.74); }
}

@media (max-width:760px){ .layout-choice-grid{grid-template-columns:1fr}.layout-controls{grid-template-columns:1fr}.settings-section-head{align-items:flex-start;flex-direction:column}.settings-section-head .secondary{width:100%} }

/* alpha.2.3 — Settings UX + mailbox password change */
.settings-backdrop { place-items:center; padding:20px; background:rgba(5,10,18,.54); backdrop-filter:blur(7px); }
.settings-modal {
  width:min(820px,calc(100vw - 36px));
  height:min(820px,calc(100vh - 40px));
  max-height:calc(100vh - 40px);
  display:flex;
  flex-direction:column;
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 34px 100px rgba(7,15,28,.42);
  overflow:hidden;
}
.settings-modal-head { min-height:84px; padding:16px 18px 15px 20px; display:flex; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--panel) 92%,var(--panel-soft)); flex:0 0 auto; }
.settings-title-copy { display:grid; gap:3px; min-width:0; }
.settings-title-copy > strong { font-size:18px; line-height:1.15; }
.settings-title-copy > small { color:var(--muted); font-size:11px; line-height:1.4; }
.settings-title-copy .eyebrow { font-size:9px; letter-spacing:.14em; text-transform:uppercase; font-weight:850; color:var(--brand); }
.modal-close-button { border:1px solid var(--line); background:var(--panel-soft); color:var(--text); border-radius:12px; min-height:42px; padding:7px 12px 7px 9px; display:flex; align-items:center; gap:8px; font-weight:750; cursor:pointer; flex:0 0 auto; }
.modal-close-button span { width:26px; height:26px; display:grid; place-items:center; border-radius:8px; font-size:22px; line-height:1; color:var(--muted); }
.modal-close-button b { font-size:11px; }
.modal-close-button:hover { border-color:var(--brand); background:var(--brand-soft); }
.modal-close-button:hover span { color:var(--brand); }
.settings-tabs { display:flex; gap:7px; padding:10px 18px; border-bottom:1px solid var(--line); background:var(--panel); overflow-x:auto; flex:0 0 auto; }
.settings-tab { border:1px solid transparent; background:transparent; color:var(--muted); border-radius:11px; padding:9px 13px; display:flex; align-items:center; gap:7px; font-size:11px; font-weight:760; white-space:nowrap; cursor:pointer; }
.settings-tab span { font-size:13px; }
.settings-tab:hover { background:var(--panel-soft); color:var(--text); }
.settings-tab.selected { color:var(--brand); border-color:color-mix(in srgb,var(--brand) 28%,var(--line)); background:var(--brand-soft); }
.settings-scroll { flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; background:color-mix(in srgb,var(--panel) 97%,var(--bg)); }
.settings-panel { padding:20px; }
.settings-panel-intro { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.settings-panel-intro > div { display:grid; gap:4px; }
.settings-panel-intro strong { font-size:14px; }
.settings-panel-intro small { color:var(--muted); font-size:11px; line-height:1.45; }
.settings-modal .theme-grid { padding:0; grid-template-columns:repeat(2,minmax(0,1fr)); }
.settings-modal .theme-card { min-height:128px; padding:11px; }
.settings-modal .theme-card strong { font-size:12px; }
.settings-modal .theme-card small { line-height:1.38; }
.settings-modal .settings-section { margin:0; padding:0; border:0; }
.settings-modal .settings-section-head { margin-bottom:16px; }
.settings-modal .settings-note { margin:16px 0 0; background:var(--panel-soft); }
.settings-modal .layout-controls { padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--panel-soft); }
.settings-modal .layout-controls label { font-size:11px; font-weight:720; }
.settings-modal .layout-choice-grid { margin-bottom:14px; }
.settings-modal .layout-card { min-height:118px; }
.settings-footer { min-height:62px; padding:10px 14px 10px 20px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:16px; background:color-mix(in srgb,var(--panel) 94%,var(--panel-soft)); flex:0 0 auto; }
.settings-footer span { color:var(--muted); font-size:10px; }
.settings-footer .secondary { width:auto; min-width:105px; }

.password-capability { margin-bottom:14px; border:1px solid var(--line); border-radius:12px; padding:10px 12px; font-size:11px; line-height:1.45; }
.password-capability.neutral { background:var(--panel-soft); color:var(--muted); }
.password-capability.ok { background:color-mix(in srgb,var(--success) 9%,var(--panel)); color:var(--success); border-color:color-mix(in srgb,var(--success) 34%,var(--line)); }
.password-capability.warn { background:color-mix(in srgb,var(--warning) 8%,var(--panel)); color:var(--warning); border-color:color-mix(in srgb,var(--warning) 30%,var(--line)); }
.password-form { display:grid; gap:13px; padding:17px; border:1px solid var(--line); border-radius:16px; background:var(--panel-soft); }
.password-form > label:not(.password-option) { display:grid; gap:6px; margin:0; font-size:11px; font-weight:760; }
.password-form input[type=password], .password-form input[type=text] { width:100%; min-height:43px; }
.password-mailbox-card { display:grid; grid-template-columns:auto 1fr; gap:3px 12px; padding:11px 12px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.password-mailbox-card span { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; font-weight:800; }
.password-mailbox-card strong { font-size:12px; overflow-wrap:anywhere; }
.password-mailbox-card small { grid-column:1 / -1; color:var(--muted); font-size:10px; line-height:1.4; margin-top:3px; }
.password-strength { display:grid; gap:6px; margin-top:-4px; }
.password-strength-track { height:6px; background:color-mix(in srgb,var(--line) 72%,transparent); border-radius:999px; overflow:hidden; }
.password-strength-track i { display:block; width:0; height:100%; border-radius:inherit; background:var(--danger); transition:width .18s ease,background .18s ease; }
.password-strength-track i[data-score="1"] { width:25%; }
.password-strength-track i[data-score="2"] { width:50%; }
.password-strength-track i[data-score="3"] { width:75%; }
.password-strength-track i[data-score="4"] { width:100%; }
.password-strength-track i[data-score="2"] { background:var(--warning); }
.password-strength-track i[data-score="3"] { background:#56b878; }
.password-strength-track i[data-score="4"] { background:var(--success); }
.password-strength span { color:var(--muted); font-size:10px; }
.password-server-policy { border:1px solid var(--line); border-radius:10px; padding:9px 11px; font-size:10px; line-height:1.45; }
.password-server-policy.neutral { background:var(--panel); color:var(--muted); }
.password-server-policy.ok { background:color-mix(in srgb,var(--success) 7%,var(--panel)); color:var(--text); border-color:color-mix(in srgb,var(--success) 24%,var(--line)); }
.password-server-policy strong { color:var(--muted); }
.password-server-policy b { color:var(--success); }
.password-option { display:flex; align-items:flex-start; gap:9px; margin:0; color:var(--text); font-size:11px; line-height:1.35; font-weight:600; }
.password-option input { width:auto; margin-top:1px; flex:0 0 auto; }
.password-actions { display:flex; justify-content:flex-end; padding-top:2px; }
.password-actions .primary { width:auto; min-width:150px; }
.password-change-status { min-height:0; border-radius:10px; font-size:11px; line-height:1.45; }
.password-change-status:not(:empty) { padding:9px 11px; border:1px solid var(--line); }
.password-change-status.pending { color:var(--muted); background:var(--panel); }
.password-change-status.success { color:var(--success); background:color-mix(in srgb,var(--success) 8%,var(--panel)); border-color:color-mix(in srgb,var(--success) 30%,var(--line)); }
.password-change-status.error { color:var(--danger); background:color-mix(in srgb,var(--danger) 7%,var(--panel)); border-color:color-mix(in srgb,var(--danger) 30%,var(--line)); }
.security-info-card { display:grid; gap:5px; margin-top:14px; padding:13px 14px; border:1px solid var(--line); border-radius:13px; background:var(--panel-soft); }
.security-info-card strong { font-size:11px; }
.security-info-card span { color:var(--muted); font-size:10px; line-height:1.5; }

html[data-theme="mpower"] .settings-modal-head::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:linear-gradient(90deg,var(--mp-light),var(--mp-dark) 46%,var(--mp-red) 76%,transparent); }
html[data-theme="mpower"] .settings-modal-head { position:relative; background:linear-gradient(100deg,#111c28,#111824 65%,#1b1119); }
html[data-theme="performance"] .settings-modal-head { position:relative; background:#14181b; }
html[data-theme="performance"] .settings-modal-head::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:linear-gradient(90deg,var(--perf-silver),#51585d 45%,var(--perf-mint) 80%,transparent); }
html[data-theme="mpower"] .settings-tab.selected { color:#7edcff; border-color:rgba(0,165,223,.32); background:rgba(0,102,177,.13); }
html[data-theme="performance"] .settings-tab.selected { color:var(--perf-mint); border-color:rgba(22,215,189,.28); background:rgba(22,215,189,.08); }

@media (max-width:760px) {
  .settings-backdrop { padding:8px; }
  .settings-modal { width:calc(100vw - 16px); height:calc(100vh - 16px); max-height:calc(100vh - 16px); border-radius:16px; }
  .settings-modal-head { min-height:76px; padding:13px 12px 13px 15px; }
  .settings-title-copy > strong { font-size:16px; }
  .modal-close-button b { display:none; }
  .modal-close-button { padding:6px; min-height:40px; }
  .settings-tabs { padding:8px 10px; }
  .settings-tab { flex:1 0 auto; justify-content:center; padding:9px 10px; }
  .settings-panel { padding:14px; }
  .settings-modal .theme-grid { grid-template-columns:1fr; max-height:none; overflow:visible; }
  .settings-panel-intro { align-items:flex-start; flex-direction:column; }
  .settings-panel-intro .secondary { width:100%; }
  .layout-choice-grid { grid-template-columns:1fr; }
  .layout-controls { grid-template-columns:1fr; }
  .settings-footer span { display:none; }
  .settings-footer { justify-content:flex-end; }
  .settings-footer .secondary { width:100%; }
  .password-actions .primary { width:100%; }
}

.field-hint{margin:-2px 0 8px;color:var(--muted);font-size:10px;line-height:1.45;}