/* iida Mail 1.2 — calm, approachable workspace */
:root {
  --navy:#0b1f3a;
  --navy-2:#142b4a;
  --ink:#18243a;
  --muted:#69758b;
  --muted-2:#95a0b3;
  --line:#e6eaf0;
  --line-strong:#d7dde7;
  --surface:#ffffff;
  --surface-raised:#ffffff;
  --canvas:#f6f7f9;
  --canvas-strong:#eef1f5;
  --blue:#2864dc;
  --blue-hover:#1f54bf;
  --blue-soft:#edf3ff;
  --green:#15a66b;
  --green-soft:#eaf8f2;
  --orange:#e98728;
  --orange-soft:#fff4e8;
  --red:#d6473d;
  --red-soft:#fff0ee;
  --purple:#7357d9;
  --purple-soft:#f2efff;
  --sidebar:260px;
  --radius:16px;
  --shadow-sm:0 1px 2px rgba(15,32,56,.05),0 7px 20px rgba(15,32,56,.04);
  --shadow:0 20px 60px rgba(16,33,57,.14),0 2px 8px rgba(16,33,57,.05);
  font-family:Inter,"Segoe UI",ui-sans-serif,-apple-system,BlinkMacSystemFont,sans-serif;
}

html[data-theme="dark"] {
  --navy:#eef4ff;
  --navy-2:#dbe8ff;
  --ink:#edf2fb;
  --muted:#a5b0c3;
  --muted-2:#77859d;
  --line:#25334a;
  --line-strong:#34445f;
  --surface:#121d2e;
  --surface-raised:#17243a;
  --canvas:#0b1422;
  --canvas-strong:#101b2b;
  --blue:#79a6ff;
  --blue-hover:#97b9ff;
  --blue-soft:#172f57;
  --green:#4bd39b;
  --green-soft:#123b30;
  --orange:#ffad5b;
  --orange-soft:#49321d;
  --red:#ff8178;
  --red-soft:#472422;
  --purple:#aa94ff;
  --purple-soft:#302951;
  --shadow-sm:0 1px 2px rgba(0,0,0,.2);
  --shadow:0 24px 70px rgba(0,0,0,.45);
}

* { scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
*::-webkit-scrollbar { width:8px; height:8px; }
*::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:999px; border:2px solid transparent; background-clip:padding-box; }
body { background:var(--canvas); font-size:14px; letter-spacing:-.005em; }
.ui-icon { width:19px; height:19px; display:block; flex:0 0 auto; }
.hidden { display:none!important; }

.button {
  min-height:40px;
  padding:9px 15px;
  border-radius:10px;
  font-size:13px;
  font-weight:700;
  letter-spacing:-.01em;
  box-shadow:none;
}
.button:hover { transform:none; }
.button.primary { background:var(--blue); color:#fff; box-shadow:0 6px 18px rgba(40,100,220,.18); }
.button.primary:hover { background:var(--blue-hover); box-shadow:0 8px 22px rgba(40,100,220,.24); }
.button.secondary { background:var(--blue-soft); color:var(--blue); }
.button.secondary:hover { background:color-mix(in srgb,var(--blue) 14%,var(--surface)); }
.button.ghost { background:var(--surface); border:1px solid var(--line-strong); color:var(--ink); }
.button.ghost:hover { background:var(--canvas); border-color:color-mix(in srgb,var(--blue) 25%,var(--line-strong)); }
.icon-button {
  width:38px;
  height:38px;
  padding:0;
  display:inline-grid;
  place-items:center;
  border-radius:10px;
  color:var(--muted);
  transition:background-color .15s,color .15s,transform .15s;
}
.icon-button:hover { color:var(--ink); background:var(--canvas-strong); }
.icon-button:active { transform:scale(.96); }

/* Sign in */
.login-view {
  grid-template-columns:minmax(430px,43%) 1fr;
  min-height:100%;
  background:#fff;
  color:#18243a;
  color-scheme:light;
}
.login-card { width:min(410px,calc(100% - 64px)); padding:30px 0; }
.login-logo { width:205px; max-height:62px; margin:0 0 62px; object-fit:contain; object-position:left center; }
.login-card .eyebrow { color:#68758b; font-size:10px; letter-spacing:.16em; }
.login-card h1 { color:#14213a; font-size:44px; font-weight:740; line-height:1.05; letter-spacing:-.045em; margin:14px 0 12px; }
.login-intro { max-width:350px; color:#6d7890!important; font-size:15px!important; line-height:1.65; }
.login-card .stack { gap:15px; margin-top:35px; }
.login-card .stack label { gap:8px; color:#25344d; font-size:12px; }
.login-card .stack input {
  width:100%;
  min-height:48px;
  padding:12px 14px;
  border:1px solid #dce2eb;
  border-radius:11px;
  background:#fff;
  color:#17233a;
  box-shadow:0 1px 2px rgba(15,32,56,.02);
}
.login-card .stack input::placeholder { color:#a0a9b8; }
.login-card .stack input:focus { border-color:#6795ed; box-shadow:0 0 0 4px rgba(40,100,220,.1); }
.login-primary { min-height:48px; margin-top:5px; font-size:14px; justify-content:space-between; padding-inline:18px; background:#2864dc!important; color:#fff!important; }
.login-primary:hover { background:#1f54bf!important; }
.login-divider { display:flex; align-items:center; gap:12px; color:#9aa4b3; font-size:11px; text-transform:uppercase; letter-spacing:.12em; }
.login-divider:before,.login-divider:after { content:""; height:1px; flex:1; background:#e8ebf0; }
.login-card #passkey-login { min-height:46px; color:#26344b; border-color:#dce2eb; background:#fff; }
.login-card #passkey-login:hover { background:#f6f7f9; }
.login-card #passkey-login .ui-icon { width:17px; color:#7357d9; }
.security-note { max-width:360px; color:#8791a1!important; }
.login-art {
  margin:16px 16px 16px 0;
  padding:clamp(42px,6vw,90px);
  border-radius:24px;
  align-items:center;
  background:radial-gradient(circle at 76% 20%,rgba(79,131,242,.38),transparent 27%),radial-gradient(circle at 12% 86%,rgba(29,172,118,.18),transparent 29%),linear-gradient(145deg,#112d56 0%,#091b36 58%,#08162b 100%);
}
.login-art:before { background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1px); background-size:28px 28px; opacity:.28; mask-image:linear-gradient(135deg,transparent,black 30%,transparent 82%); }
.login-showcase { position:relative; z-index:1; width:min(680px,100%); margin:auto; }
.showcase-copy { color:#fff; max-width:560px; }
.showcase-pill { display:inline-flex; padding:7px 11px; border:1px solid rgba(255,255,255,.17); border-radius:999px; background:rgba(255,255,255,.08); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; backdrop-filter:blur(12px); }
.showcase-copy h2 { margin:22px 0 14px; font-size:clamp(40px,4.1vw,66px); line-height:1.03; letter-spacing:-.055em; font-weight:700; }
.showcase-copy h2 em { color:#95b9ff; font-style:normal; }
.showcase-copy p { color:#b7c6dd; font-size:15px; line-height:1.6; }
.showcase-window { width:min(560px,92%); margin:50px 0 0 auto; padding:12px; border:1px solid rgba(255,255,255,.14); border-radius:18px; background:rgba(255,255,255,.10); box-shadow:0 30px 70px rgba(0,0,0,.22); backdrop-filter:blur(22px); }
.showcase-top { display:flex; align-items:center; height:34px; padding:0 8px 8px; color:#b9c8dd; font-size:11px; }
.showcase-top i { width:8px; height:8px; border-radius:50%; background:#64d6a8; box-shadow:14px 0 #ffba68,28px 0 #ff7d74; margin-right:40px; }
.showcase-top b { margin-left:auto; letter-spacing:.1em; }
.showcase-message { display:grid; grid-template-columns:36px 1fr auto; gap:11px; align-items:center; padding:12px; border-radius:12px; color:#d9e4f4; }
.showcase-message.active { background:rgba(255,255,255,.12); color:#fff; }
.showcase-message>span { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; background:#376cc5; font-size:11px; font-weight:800; }
.showcase-message:nth-child(3)>span { background:#268868; }
.showcase-message:nth-child(4)>span { background:#8361c9; }
.showcase-message strong,.showcase-message small { display:block; }
.showcase-message strong { font-size:12px; margin-bottom:3px; }
.showcase-message small,.showcase-message time { color:#9fb0c8; font-size:10px; }

/* App shell and navigation */
.app-shell { grid-template-columns:var(--sidebar) minmax(0,1fr); background:var(--canvas); }
.sidebar {
  background:var(--surface);
  color:var(--muted);
  border-right:1px solid var(--line);
  padding:20px 15px 16px;
  overflow:auto;
}
.brand-row { height:48px; padding:0 8px; margin:0 0 12px; }
.brand-row img { width:188px; height:50px; object-position:left center; }
.brand-row .brand-dark { display:none; }
html[data-theme="dark"] .brand-row .brand-light { display:none; }
html[data-theme="dark"] .brand-row .brand-dark { display:block; }
.compose-button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  height:45px;
  margin:0 0 17px;
  border-radius:12px;
  background:var(--blue);
  color:#fff;
  font-size:13px;
  font-weight:750;
  box-shadow:0 8px 20px rgba(40,100,220,.20);
  transition:background-color .15s,box-shadow .15s,transform .15s;
}
.compose-button:hover { background:var(--blue-hover); box-shadow:0 10px 24px rgba(40,100,220,.25); }
.compose-button:active { transform:scale(.985); }
.compose-button .ui-icon { width:18px; }
.sidebar #folder-nav { display:grid; gap:2px; }
.nav-label,.sidebar-section-title { margin:0; padding:0 11px 7px; color:var(--muted-2); font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.nav-label-spaced { margin-top:9px; }
.sidebar nav button,.sidebar-bottom>button {
  width:100%;
  height:36px;
  padding:0 10px;
  gap:11px;
  border-radius:9px;
  color:var(--muted);
  font-size:12px;
  font-weight:560;
  transition:background-color .14s,color .14s;
}
.sidebar nav button .ui-icon,.sidebar-bottom>button .ui-icon { width:17px; height:17px; color:var(--muted-2); }
.sidebar nav button span,.sidebar-bottom>button span { width:auto; flex:1; text-align:left; }
.sidebar nav button:hover,.sidebar-bottom>button:hover { background:var(--canvas); color:var(--ink); }
.sidebar nav button:hover .ui-icon,.sidebar-bottom>button:hover .ui-icon { color:var(--ink); }
.sidebar nav button.active { background:var(--blue-soft); color:var(--blue); font-weight:720; }
.sidebar nav button.active .ui-icon { color:var(--blue); }
.sidebar nav button b,.sidebar-bottom>button b { margin-left:auto; min-width:20px; padding:1px 6px; border:0; border-radius:999px; background:var(--blue); color:#fff; font-size:9px; line-height:17px; }
.sidebar-section { flex:none; min-height:auto; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.sidebar-section-title { color:var(--muted-2); padding-right:6px; }
.sidebar-section-title button { color:var(--muted); }
.sidebar-section nav { max-height:82px; }
.sidebar-section nav:empty:after { color:var(--muted-2); padding:7px 11px; font-size:10px; }
.sidebar-bottom { flex:none; padding-top:10px; border-top:1px solid var(--line); gap:1px; }
.account-chip { grid-template-columns:36px 1fr 36px; margin-top:12px; padding:15px 4px 0; border-top:1px solid var(--line); }
.account-chip .avatar { width:36px; height:36px; border-radius:11px; background:linear-gradient(145deg,#326ddd,#704fc7); font-size:12px; }
.account-chip strong { color:var(--ink); font-size:11px; }
.account-chip small { color:var(--muted-2); font-size:9px; }
.account-chip button { width:34px; height:34px; display:grid; place-items:center; border-radius:9px; color:var(--muted-2); }
.account-chip button:hover { background:var(--canvas); color:var(--red); }
.account-chip button .ui-icon { width:17px; }

/* Search and mailbox */
.workspace { grid-template-rows:68px minmax(0,1fr); background:var(--canvas); }
.topbar { padding:0 22px; gap:12px; background:var(--surface); border-color:var(--line); }
.search-wrap {
  width:min(610px,58vw);
  height:42px;
  margin:auto;
  padding:0 11px 0 13px;
  border:1px solid transparent;
  border-radius:11px;
  background:var(--canvas);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.search-wrap:focus-within { background:var(--surface); border-color:color-mix(in srgb,var(--blue) 45%,var(--line)); box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 10%,transparent); }
.search-wrap>.ui-icon { width:17px; color:var(--muted-2); }
.search-wrap input { font-size:13px; }
.search-wrap input::placeholder { color:var(--muted-2); }
.search-wrap button { display:grid; place-items:center; }
.search-wrap button .ui-icon { width:15px; }
.search-wrap kbd,.welcome-hints kbd { border:1px solid var(--line-strong); border-bottom-width:2px; background:var(--surface); color:var(--muted); font-family:inherit; }
.connection-status { padding:6px 9px; border-radius:999px; background:var(--green-soft); color:color-mix(in srgb,var(--green) 80%,var(--ink)); font-size:10px; font-weight:700; }
.connection-status i { width:6px; height:6px; box-shadow:none; }
.connection-status.offline { background:var(--orange-soft); color:var(--orange); }
.theme-control { border:1px solid var(--line); background:var(--surface); }

.mail-layout { min-height:0; grid-template-columns:minmax(390px,425px) minmax(0,1fr); background:var(--canvas); }
.message-list-panel { border-color:var(--line); background:var(--surface); grid-template-rows:auto auto auto minmax(0,1fr) auto; }
.panel-heading { min-height:122px; padding:24px 20px 16px 24px; align-items:flex-start; }
.panel-heading h2 { color:var(--ink); font-size:25px; line-height:1.1; font-weight:740; letter-spacing:-.035em; }
.eyebrow-label { margin-bottom:7px; color:var(--blue); font-size:9px; letter-spacing:.15em; }
.folder-description { margin:7px 0 0; max-width:250px; color:var(--muted); font-size:11px; line-height:1.45; }
.heading-actions { display:flex; align-items:center; gap:5px; }
.heading-actions select { max-width:130px; height:36px; padding:0 28px 0 10px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--muted); font-size:10px; }
.refresh-control { width:36px; height:36px; }
.refresh-control .ui-icon { width:16px; }

.category-tabs { display:flex; grid-template-columns:none; gap:4px; padding:0 18px 13px; border-color:var(--line); overflow-x:auto; }
.category-tabs button { flex:0 0 auto; min-height:31px; padding:7px 10px; border-radius:8px; color:var(--muted); font-size:10px; }
.category-tabs button i { width:6px; height:6px; }
.category-tabs button.active { background:var(--blue-soft); color:var(--blue); }
.category-tabs button b { background:var(--surface); color:inherit; box-shadow:0 0 0 1px var(--line); }
.bulk-toolbar { height:43px; padding:0 13px; background:var(--blue-soft); border-color:color-mix(in srgb,var(--blue) 12%,var(--line)); }
.message-list { padding:8px 8px 18px; }
body .message-item {
  min-height:92px;
  grid-template-columns:18px 26px 38px minmax(0,1fr) auto!important;
  gap:8px!important;
  margin:1px 0;
  padding:12px 10px!important;
  border:1px solid transparent;
  border-radius:12px;
  transition:background-color .12s,border-color .12s,box-shadow .12s;
}
.message-item:hover { background:var(--canvas); }
.message-item.active { background:var(--blue-soft); border-color:color-mix(in srgb,var(--blue) 16%,var(--line)); box-shadow:inset 3px 0 0 var(--blue); }
.message-item.unread:before { left:4px; top:23px; width:5px; height:5px; }
.select-message { opacity:0; }
.message-item:hover .select-message,.message-item.active .select-message,.select-message:has(input:checked) { opacity:1; }
.star-button { color:#c0c7d2; }
.star-button:hover,.star-button.is-starred { color:var(--orange); }
.star-button .ui-icon { width:16px; height:16px; }
.filled-icon { fill:currentColor; }
.important-mark,.muted-mark { display:inline-flex; align-items:center; }
.important-mark .ui-icon,.muted-mark .ui-icon { width:11px; height:11px; }
.muted-mark { color:var(--muted-2); }
.sender-avatar { width:38px; height:38px; border-radius:12px; background:var(--canvas-strong); color:var(--muted); font-size:11px; }
.message-item.unread .sender-avatar { background:var(--blue-soft); color:var(--blue); }
.message-open { gap:1px; }
.message-row strong { color:var(--ink); font-size:12px; font-weight:650; }
.message-item.unread .message-row strong { font-weight:780; }
.message-subject { margin:4px 0 2px; color:var(--ink); font-size:12px; font-weight:590; }
.message-preview { color:var(--muted); font-size:10px; line-height:1.35; }
.message-meta { color:var(--muted-2); font-size:9px; font-weight:600; }
.label-strip { margin-top:5px; }
.mini-label,.nudge-chip { height:15px; line-height:15px; font-size:8px; }
.important-mark { color:var(--orange); }
.pagination { min-height:45px; padding:8px 16px; background:var(--surface); border-color:var(--line); font-size:10px; }
.pagination button { min-width:28px; height:28px; padding:0; border-radius:8px; color:var(--muted); }
.pagination button .ui-icon { width:14px; height:14px; margin:auto; }

/* Reading experience */
.reader { padding:28px clamp(22px,3vw,52px) 50px; background:var(--canvas); }
.reader-welcome { width:min(420px,80%); min-height:100%; margin:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--muted); }
.welcome-icon { position:relative; width:74px; height:74px; display:grid; place-items:center; margin-bottom:22px; border:1px solid var(--line); border-radius:24px; background:var(--surface); color:var(--blue); box-shadow:var(--shadow-sm); }
.welcome-icon .ui-icon { width:29px; height:29px; }
.welcome-icon span { position:absolute; right:3px; top:4px; width:14px; height:14px; border:3px solid var(--surface); border-radius:50%; background:var(--green); }
.reader-welcome h2 { margin:0 0 8px; color:var(--ink); font-size:21px; letter-spacing:-.025em; }
.reader-welcome p { max-width:330px; margin:0; font-size:12px; line-height:1.6; }
.welcome-hints { display:flex; gap:15px; margin-top:24px; color:var(--muted-2); font-size:9px; }
.welcome-hints span { display:flex; align-items:center; gap:3px; }
.welcome-hints kbd { padding:2px 5px; border-radius:5px; font-size:8px; }
.reader-card { max-width:900px; overflow:hidden; border:1px solid var(--line); border-radius:17px; background:var(--surface); box-shadow:var(--shadow-sm); }
.reader-toolbar { top:-28px; min-height:56px; padding:9px 13px; display:flex; align-items:center; gap:2px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--surface) 95%,transparent); }
.reader-toolbar .icon-button { width:34px; height:34px; }
.reader-toolbar .icon-button .ui-icon { width:17px; }
.reader-toolbar .active-icon { color:var(--blue); background:var(--blue-soft); }
.reader-toolbar .star-active { color:var(--orange); background:var(--orange-soft); }
.reader-toolbar .spacer { flex:1; }
.reader-toolbar select { min-height:34px; padding:0 9px; color:var(--muted); }
.message-header { padding:30px 34px 24px; }
.message-title-line h1 { max-width:720px; margin:0; color:var(--ink); font-size:25px; line-height:1.25; font-weight:710; letter-spacing:-.035em; }
.sender-line { margin-top:25px; gap:12px; }
.sender-line .sender-avatar { width:42px; height:42px; }
.sender-details strong { color:var(--ink); font-size:12px; }
.sender-details>span,.sender-line time { color:var(--muted); font-size:10px; }
.auth-chip { padding:3px 6px; border-radius:5px; font-size:7px; }
.message-body { min-height:240px; padding:8px 34px 42px; color:var(--ink); font-size:14px; line-height:1.75; }
.message-body img { max-width:100%; height:auto; }
.security-banner { padding:14px 18px; }
.attachments { padding:0 34px 28px; gap:8px; }
.attachment { min-height:56px; padding:10px 12px; border:1px solid var(--line); border-radius:11px; background:var(--canvas); color:var(--ink); text-decoration:none; }
.attachment:hover { border-color:color-mix(in srgb,var(--blue) 35%,var(--line)); background:var(--blue-soft); }
.attachment>span { color:var(--blue); }
.attachment>span .ui-icon { width:20px; height:20px; }
.quick-replies { padding:18px 34px; background:var(--canvas); border-color:var(--line); }
.quick-replies button { padding:7px 11px; border-radius:9px; color:var(--ink); }
.reader-footer { padding:18px 34px 25px; border-color:var(--line); }
.reader-footer .button:first-child { min-width:104px; }
.reader-footer .button .ui-icon { width:15px; height:15px; }
.empty-state { min-height:300px; color:var(--muted); }

/* Compose */
dialog { color:var(--ink); }
dialog::backdrop { background:rgba(7,17,31,.48); backdrop-filter:blur(5px); }
.compose-dialog {
  width:min(790px,calc(100% - 36px));
  border:1px solid color-mix(in srgb,var(--line) 80%,transparent);
  border-radius:17px;
  background:var(--surface);
  box-shadow:0 28px 90px rgba(7,20,39,.25),0 3px 12px rgba(7,20,39,.08);
}
.compose-dialog>form { min-height:620px; max-height:min(88vh,760px); grid-template-rows:58px minmax(0,1fr) 64px; }
.compose-dialog header { min-height:58px; padding:0 17px; border-bottom:1px solid var(--line); background:var(--canvas); }
.compose-dialog header>div:first-child { gap:10px; }
.compose-icon { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:var(--blue-soft); color:var(--blue); }
.compose-icon .ui-icon { width:15px; }
.compose-dialog header strong { display:block; color:var(--ink); font-size:12px; }
.compose-dialog header small { display:block; margin:2px 0 0; color:var(--muted-2); font-size:9px; }
.compose-fields { padding:8px 22px 0; }
.compose-fields>label,.compose-fields #copy-fields label { min-height:45px; padding:0; border-bottom:1px solid var(--line); }
.compose-fields label>span { width:52px; color:var(--muted); font-size:10px; font-weight:700; }
.compose-fields input,.compose-fields select { color:var(--ink); font-size:12px; }
.compose-fields input::placeholder { color:var(--muted-2); }
.compose-fields label button { color:var(--blue); font-size:10px; font-weight:700; }
.subject-input { min-height:50px; padding:0; border-bottom:1px solid var(--line); color:var(--ink); font-size:16px!important; font-weight:650; }
.subject-input::placeholder { color:var(--muted-2); font-weight:500; }
.format-toolbar { min-height:43px; padding:6px 0; background:var(--surface); border-color:var(--line); }
.format-toolbar button { color:var(--muted); }
.format-toolbar button:hover { background:var(--canvas); color:var(--ink); }
.compose-body[contenteditable] { min-height:300px; padding:20px 2px; color:var(--ink); font-size:14px; line-height:1.7; }
.compose-body:empty:before { color:var(--muted-2); }
.schedule-row { min-height:42px!important; margin:0 0 8px; padding:0 10px!important; border:1px solid color-mix(in srgb,var(--blue) 14%,var(--line))!important; }
.compose-dialog footer { min-height:64px; padding:10px 16px 10px 22px; border-top:1px solid var(--line); background:var(--canvas); }
.attach-button { display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:11px; font-weight:650; }
.attach-button .ui-icon { width:16px; }
.attach-button:hover { color:var(--ink); }
.attachment-summary { min-width:0; }
.send-button { min-width:108px; justify-content:space-between; padding-inline:15px; }
.send-button .ui-icon { width:15px; }
.compose-dialog.minimized { width:360px; right:24px; border-radius:14px 14px 0 0; }

/* Dialogs, settings, admin, and workspace */
.modal,.mini-modal { border:1px solid var(--line); border-radius:17px; background:var(--surface); box-shadow:var(--shadow); }
.modal-card>header { background:var(--canvas); border-color:var(--line); }
.modal-card>header h2 { color:var(--ink); font-size:20px; letter-spacing:-.025em; }
.modal-card>section { border-color:var(--line); }
.modal-card h3 { color:var(--ink); font-size:14px; }
.workspace-tabs { top:70px; gap:5px; padding:10px 18px; background:var(--surface); border-color:var(--line); }
.workspace-tabs button { min-height:34px; padding:7px 11px; font-size:10px; }
.settings-list>label,.label-manager article,.rule-list article,.outbox-list article,.event-list article { border-color:var(--line); }
.settings-list small,.rule-list small,.outbox-list p,.event-list p { color:var(--muted); }
.form-grid input,.form-grid select,.inline-form input,.rule-builder input,.rule-builder select,.dialog-padding input { border-color:var(--line); background:var(--surface); color:var(--ink); }
.rule-builder { background:var(--canvas); border-color:var(--line); }
.data-row { border-color:var(--line); }
.stat { border-color:var(--line); background:var(--surface); }
.toast-region { top:auto; right:22px; bottom:22px; pointer-events:none; }
.toast { min-height:48px; border-radius:11px; background:#16253c; box-shadow:var(--shadow); font-size:12px; }
.toast { pointer-events:auto; }
.toast.error { background:#a93630; }

@media (min-width:1450px) {
  .mail-layout { grid-template-columns:minmax(420px,460px) minmax(0,1fr); }
  .message-item { min-height:94px; }
}

@media (max-width:1050px) {
  :root { --sidebar:230px; }
  .sidebar { padding-inline:12px; }
  .brand-row img { width:174px; }
  .mail-layout { grid-template-columns:minmax(350px,42%) minmax(0,1fr); }
  .reader { padding:20px 18px 40px; }
  .message-header,.message-body { padding-inline:25px; }
  .attachments,.reader-footer,.quick-replies { padding-inline:25px; }
  .connection-status span { display:none; }
}

@media (max-width:780px) {
  body { overflow:hidden; }
  .login-view { display:block; overflow:auto; }
  .login-card { width:min(420px,calc(100% - 38px)); min-height:100%; padding:28px 0; }
  .login-logo { width:185px; margin-bottom:52px; }
  .login-card h1 { font-size:39px; }
  .login-art { display:none; }
  .sidebar { width:min(300px,88vw); padding:18px 14px; box-shadow:var(--shadow); }
  .sidebar.open { box-shadow:0 0 0 100vw rgba(7,17,31,.34),var(--shadow); }
  .brand-row { margin-bottom:14px; }
  .workspace { grid-template-rows:62px minmax(0,1fr); }
  .topbar { height:62px; padding:0 10px; }
  .search-wrap { width:auto; flex:1; margin:0; }
  .search-wrap kbd,.search-wrap #search-help { display:none; }
  .connection-status { padding:6px; }
  .theme-control { width:36px; height:36px; }
  .message-list-panel { height:calc(100vh - 62px); }
  .panel-heading { min-height:104px; padding:18px 14px 12px 18px; }
  .panel-heading h2 { font-size:23px; }
  .folder-description { display:none; }
  .heading-actions select { max-width:108px; }
  .category-tabs { padding-inline:12px; }
  body .message-item { min-height:86px; grid-template-columns:17px 22px 36px minmax(0,1fr) auto!important; padding:10px 7px!important; }
  .message-list { padding-inline:5px; }
  .message-preview { max-width:54vw; }
  .select-message { opacity:.32; }
  .reader { inset:62px 0 0; padding:0; background:var(--surface); }
  .reader-card { min-height:100%; border:0; border-radius:0; box-shadow:none; }
  .reader-toolbar { top:0; padding-inline:8px; }
  .message-header { padding:23px 18px 20px; }
  .message-title-line h1 { font-size:22px; }
  .message-body { padding:4px 18px 35px; }
  .attachments,.reader-footer,.quick-replies { padding-inline:18px; }
  .welcome-hints { display:none; }
  .compose-dialog { width:100%; height:100%; border:0; border-radius:0; }
  .compose-dialog>form { height:100vh; max-height:100vh; grid-template-rows:58px minmax(0,1fr) 62px; }
  .compose-fields { padding-inline:15px; }
  .compose-body[contenteditable] { min-height:calc(100vh - 350px); }
  .compose-dialog footer { padding:9px 10px 9px 15px; }
  .compose-dialog footer .attach-button span { display:none; }
  .send-button { min-width:94px; }
  .wide-modal,.modal { width:100%; height:100%; border:0; border-radius:0; }
  .toast-region { right:12px; left:12px; bottom:12px; }
  .toast { max-width:none; width:100%; }
}

@media (max-width:430px) {
  .panel-heading { padding-right:9px; }
  .heading-actions { gap:1px; }
  .heading-actions select { width:96px; padding-left:7px; }
  .category-tabs button { padding-inline:8px; }
  .category-tabs button span { display:inline; }
  .category-tabs button i { display:none; }
  .message-item { gap:5px!important; }
  .sender-avatar { width:34px; height:34px; border-radius:10px; }
  .message-meta { max-width:45px; overflow:hidden; text-overflow:ellipsis; }
}

@media (prefers-reduced-motion:reduce) {
  * { scroll-behavior:auto!important; }
}