/* ==========================================================================
   MailSaaS — Premium UI Stylesheet
   Design tokens + 3-pane Gmail-style layout + Dark mode + Animations
   ========================================================================== */

:root {
  --ms-brand: #4f46e5;
  --ms-brand-hi: #6366f1;
  --ms-brand-tint: #eef2ff;
  --ms-surface: #ffffff;
  --ms-surface-2: #f8fafc;
  --ms-surface-3: #f1f5f9;
  --ms-border: #e5e7eb;
  --ms-text: #0f172a;
  --ms-text-dim: #64748b;
  --ms-text-mute: #94a3b8;
  --ms-danger: #dc2626;
  --ms-star: #f59e0b;
  --ms-shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
  --ms-shadow-md: 0 4px 6px -1px rgba(15,23,42,.1), 0 2px 4px -2px rgba(15,23,42,.1);
  --ms-shadow-lg: 0 10px 15px -3px rgba(15,23,42,.1), 0 4px 6px -4px rgba(15,23,42,.1);
  --ms-shadow-xl: 0 20px 25px -5px rgba(15,23,42,.12), 0 8px 10px -6px rgba(15,23,42,.12);
  --ms-topbar-h: 64px;
  --ms-sidebar-w: 260px;
  --ms-listpane-w: 420px;
  --ms-radius: 12px;
  --ms-radius-sm: 8px;
  --ms-duration: 200ms;
}

html[data-bs-theme="dark"] {
  --ms-brand: #818cf8;
  --ms-brand-hi: #a5b4fc;
  --ms-brand-tint: #1e1b4b;
  --ms-surface: #0f172a;
  --ms-surface-2: #111827;
  --ms-surface-3: #1f2937;
  --ms-border: #1f2937;
  --ms-text: #f1f5f9;
  --ms-text-dim: #94a3b8;
  --ms-text-mute: #64748b;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--ms-surface-2);
  color: var(--ms-text);
  -webkit-font-smoothing: antialiased;
}

kbd {
  background: var(--ms-surface-3);
  border: 1px solid var(--ms-border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 12px;
  font-family: ui-monospace, Menlo, monospace;
  color: var(--ms-text-dim);
}

/* ---------------- Auth Pages ---------------- */
.auth-body {
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(99,102,241,.22), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(168,85,247,.18), transparent 60%),
    linear-gradient(180deg, #eef2ff 0%, #f8fafc 60%);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.auth-shell { width: 100%; max-width: 440px; }
.auth-card { border-radius: 20px; }

.brand-mark {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--ms-brand) 0%, #8b5cf6 100%);
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 26px;
  box-shadow: 0 10px 20px rgba(79,70,229,.35);
}
.brand-mark-sm {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--ms-brand) 0%, #8b5cf6 100%);
  display: inline-flex; align-items: center; justify-content: center;
  color: white; font-size: 16px;
}
.letter-spaced { letter-spacing: .5em; }

/* ---------------- App Shell (3-pane grid) ---------------- */
.app-shell {
  display: grid;
  grid-template-columns: var(--ms-sidebar-w) var(--ms-listpane-w) 1fr;
  grid-template-rows: var(--ms-topbar-h) 1fr;
  grid-template-areas:
    "topbar topbar topbar"
    "sidebar list read";
  height: 100vh;
  overflow: hidden;
}
.app-topbar   { grid-area: topbar;  }
.app-sidebar  { grid-area: sidebar; overflow-y: auto; }
.app-listpane { grid-area: list;    overflow: hidden; display: flex; flex-direction: column; }
.app-readpane { grid-area: read;    overflow: hidden; display: flex; flex-direction: column; }

/* ---------------- Topbar ---------------- */
.app-topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 0 16px;
  background: var(--ms-surface);
  border-bottom: 1px solid var(--ms-border);
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ms-text); }
.brand-name { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.search-wrap {
  position: relative; flex: 1; max-width: 720px;
  background: var(--ms-surface-3);
  border-radius: 999px;
  padding: 10px 16px 10px 44px;
  display: flex; align-items: center;
  transition: background var(--ms-duration);
}
.search-wrap:focus-within { background: var(--ms-surface); box-shadow: 0 0 0 2px var(--ms-brand); }
.search-wrap i.bi-search { position: absolute; left: 16px; color: var(--ms-text-dim); }
.search-wrap input {
  background: transparent; border: none; outline: none; width: 100%;
  font-size: 15px; color: var(--ms-text);
}
.search-kbd { position: absolute; right: 16px; }
.top-actions { display: flex; align-items: center; gap: 6px; }
.btn-icon {
  border: none; background: transparent; width: 40px; height: 40px;
  border-radius: 50%;
  color: var(--ms-text-dim); font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--ms-duration), color var(--ms-duration);
}
.btn-icon:hover, .btn-icon:focus { background: var(--ms-surface-3); color: var(--ms-text); }
.btn-icon-sm {
  border: none; background: transparent; width: 28px; height: 28px; border-radius: 6px;
  color: var(--ms-text-dim); font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-icon-sm:hover { background: var(--ms-surface-3); color: var(--ms-text); }
.avatar-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: none; background: linear-gradient(135deg, var(--ms-brand), #8b5cf6);
  color: white; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.avatar-btn img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------- Sidebar ---------------- */
.app-sidebar {
  background: var(--ms-surface);
  border-right: 1px solid var(--ms-border);
  padding: 16px;
}
.compose-btn {
  width: 100%; padding: 14px 20px;
  border-radius: 999px; border: none;
  background: linear-gradient(135deg, var(--ms-brand), #8b5cf6);
  color: white; font-weight: 600; font-size: 15px;
  box-shadow: var(--ms-shadow-md);
  transition: transform var(--ms-duration), box-shadow var(--ms-duration);
  display: flex; align-items: center; justify-content: center;
}
.compose-btn:hover { transform: translateY(-1px); box-shadow: var(--ms-shadow-lg); }
.compose-btn:active { transform: translateY(0); }

.folder-nav { margin-top: 20px; display: flex; flex-direction: column; gap: 2px; }
.folder-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--ms-text);
  font-size: 14px; font-weight: 500;
  transition: background var(--ms-duration), color var(--ms-duration);
  text-decoration: none;
}
.folder-item:hover { background: var(--ms-surface-3); }
.folder-item.active {
  background: var(--ms-brand-tint);
  color: var(--ms-brand);
  font-weight: 700;
}
.folder-item i { width: 20px; font-size: 16px; text-align: center; }
.folder-item .count { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--ms-text-dim); }
.folder-item.active .count { color: var(--ms-brand); }

.sidebar-section { margin-top: 24px; }
.sidebar-heading {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ms-text-mute);
  padding: 0 14px 8px;
}
.label-item, .account-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; cursor: pointer;
  border-radius: 999px; color: var(--ms-text); font-size: 14px;
  text-decoration: none;
}
.label-item:hover, .account-item:hover { background: var(--ms-surface-3); }
.account-item.active { background: var(--ms-brand-tint); color: var(--ms-brand); font-weight: 600; }
.label-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.folder-skeleton { padding: 10px 14px; }
.skeleton-line {
  height: 16px; background: var(--ms-surface-3); border-radius: 6px; margin-bottom: 12px;
  background: linear-gradient(90deg, var(--ms-surface-3) 25%, var(--ms-border) 50%, var(--ms-surface-3) 75%);
  background-size: 200% 100%;
  animation: skeleton 1.2s infinite;
}
@keyframes skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---------------- List Pane ---------------- */
.app-listpane { background: var(--ms-surface); border-right: 1px solid var(--ms-border); }
.listpane-header {
  display: flex; align-items: center;
  padding: 12px 20px; border-bottom: 1px solid var(--ms-border);
  gap: 10px;
}
.listpane-title { font-weight: 700; font-size: 16px; flex: 1; }
.listpane-count { font-size: 12px; color: var(--ms-text-dim); margin-left: 8px; }
.listpane-actions { display: flex; align-items: center; gap: 4px; }

.listpane-body { overflow-y: auto; flex: 1; }

.msg-row {
  display: grid;
  grid-template-columns: 34px 24px 1fr auto;
  gap: 10px; align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--ms-border);
  cursor: pointer;
  transition: background var(--ms-duration);
  position: relative;
}
.msg-row:hover { background: var(--ms-surface-2); }
.msg-row:hover .msg-quickact { opacity: 1; }
.msg-row.selected { background: var(--ms-brand-tint); }
.msg-row.unread .msg-from,
.msg-row.unread .msg-subject { font-weight: 700; color: var(--ms-text); }
.msg-row .msg-from { color: var(--ms-text-dim); font-weight: 500; }
.msg-row .msg-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ms-brand), #8b5cf6);
  color: white; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.msg-star { font-size: 16px; color: var(--ms-text-mute); }
.msg-star.starred { color: var(--ms-star); }
.msg-main { min-width: 0; }
.msg-from { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-subject { font-size: 14px; color: var(--ms-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-snippet { font-size: 12px; color: var(--ms-text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.msg-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.msg-time { font-size: 12px; color: var(--ms-text-dim); }
.msg-attach { font-size: 14px; color: var(--ms-text-dim); }
.msg-quickact {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  display: flex; gap: 2px;
  background: var(--ms-surface); padding: 4px; border-radius: 8px;
  box-shadow: var(--ms-shadow-md);
  opacity: 0; transition: opacity var(--ms-duration);
}

.list-skeleton .skel-row {
  display: grid; grid-template-columns: 34px 1fr; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--ms-border);
}
.list-skeleton .skel-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--ms-surface-3); }
.list-skeleton .skel-lines > div {
  height: 12px; margin-bottom: 8px; border-radius: 4px;
  background: linear-gradient(90deg, var(--ms-surface-3) 25%, var(--ms-border) 50%, var(--ms-surface-3) 75%);
  background-size: 200% 100%;
  animation: skeleton 1.2s infinite;
}
.list-skeleton .skel-lines > div:nth-child(1) { width: 60%; }
.list-skeleton .skel-lines > div:nth-child(2) { width: 85%; }
.list-skeleton .skel-lines > div:nth-child(3) { width: 40%; }

.list-empty {
  padding: 60px 20px; text-align: center; color: var(--ms-text-mute);
}

/* ---------------- Read Pane ---------------- */
.app-readpane { background: var(--ms-surface); }
.readpane-empty {
  margin: auto; text-align: center; padding: 40px;
}
.read-header {
  padding: 18px 24px; border-bottom: 1px solid var(--ms-border);
  display: flex; align-items: center; gap: 8px;
}
.read-subject { font-size: 20px; font-weight: 700; flex: 1; }
.read-toolbar { padding: 8px 24px; display: flex; gap: 4px; border-bottom: 1px solid var(--ms-border); }
.read-meta {
  padding: 16px 24px; border-bottom: 1px solid var(--ms-border);
  display: flex; gap: 14px; align-items: center;
}
.read-meta .avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ms-brand), #8b5cf6);
  color: white; font-weight: 700; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
}
.read-body {
  padding: 24px; overflow-y: auto; flex: 1;
  font-size: 15px; line-height: 1.65;
}
.read-body img { max-width: 100%; height: auto; border-radius: 6px; }
.read-body a { color: var(--ms-brand); }
.read-body blockquote {
  border-left: 3px solid var(--ms-border); padding-left: 12px;
  color: var(--ms-text-dim); margin-left: 0;
}
.read-attachments {
  display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 24px;
  border-top: 1px solid var(--ms-border);
}
.att-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: var(--ms-surface-3);
  border-radius: 8px; font-size: 13px; color: var(--ms-text);
  text-decoration: none; transition: background var(--ms-duration);
}
.att-chip:hover { background: var(--ms-brand-tint); color: var(--ms-brand); }

/* ---------------- Compose Modal ---------------- */
.compose-modal {
  position: fixed; right: 24px; bottom: 0;
  width: 560px; max-width: calc(100vw - 48px);
  background: var(--ms-surface);
  border-radius: 12px 12px 0 0;
  box-shadow: var(--ms-shadow-xl);
  z-index: 1050;
  display: flex; flex-direction: column;
  max-height: 620px;
  transition: transform var(--ms-duration);
}
.compose-modal.maximized {
  right: 50%; bottom: 50%;
  transform: translate(50%, 50%);
  width: 90vw; max-width: 900px;
  max-height: 90vh;
  border-radius: 12px;
}
.compose-modal.minimized { max-height: 44px; overflow: hidden; }
.compose-header {
  background: #202124; color: #fff;
  padding: 8px 14px;
  display: flex; align-items: center; justify-content: space-between;
  border-radius: 12px 12px 0 0;
  cursor: move; user-select: none;
}
.compose-header .btn-icon-sm { color: #fff; }
.compose-header .btn-icon-sm:hover { background: rgba(255,255,255,.12); }
.compose-title { font-size: 14px; font-weight: 600; }
.compose-body { padding: 8px 16px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.compose-field {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--ms-border);
}
.compose-field label { font-size: 13px; color: var(--ms-text-dim); width: 52px; }
.compose-field input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 14px; color: var(--ms-text);
}
.compose-extra { padding: 4px 0 0; display: flex; gap: 16px; }
.link-btn {
  background: none; border: none;
  font-size: 13px; color: var(--ms-text-dim);
}
.link-btn:hover { color: var(--ms-brand); }
.compose-editor { flex: 1; min-height: 220px; margin-top: 6px; }
.compose-editor .ql-editor { font-size: 14px; min-height: 200px; }
.compose-editor .ql-toolbar,
.compose-editor .ql-container { border-color: var(--ms-border) !important; }
.compose-attachments { padding: 8px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.attach-chip {
  background: var(--ms-surface-3); border-radius: 6px;
  padding: 6px 10px; font-size: 12px;
  display: inline-flex; align-items: center; gap: 8px;
}
.attach-chip button { border: none; background: none; color: var(--ms-text-mute); }
.compose-footer {
  padding: 10px 14px; display: flex; align-items: center; gap: 8px;
  border-top: 1px solid var(--ms-border);
}
.compose-status { font-size: 12px; color: var(--ms-text-mute); }

/* ---------------- Context Menu ---------------- */
.ctx-menu {
  position: fixed;
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: 8px;
  box-shadow: var(--ms-shadow-xl);
  list-style: none; padding: 4px 0; margin: 0;
  min-width: 200px;
  z-index: 2000;
}
.ctx-menu li {
  padding: 8px 14px;
  cursor: pointer;
  font-size: 14px; color: var(--ms-text);
}
.ctx-menu li:hover { background: var(--ms-surface-3); }
.ctx-menu li.danger { color: var(--ms-danger); }
.ctx-menu .divider { height: 1px; background: var(--ms-border); margin: 4px 0; padding: 0; cursor: default; }

/* ---------------- Toasts ---------------- */
.toast-stack {
  position: fixed; bottom: 24px; left: 24px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 2000;
}
.ms-toast {
  background: #202124; color: #fff;
  padding: 12px 18px;
  border-radius: 10px;
  box-shadow: var(--ms-shadow-xl);
  display: flex; align-items: center; gap: 14px;
  min-width: 280px; max-width: 420px;
  font-size: 14px;
  animation: slideUp .25s ease-out;
}
.ms-toast.success { background: #065f46; }
.ms-toast.danger  { background: #7f1d1d; }
.ms-toast .undo-btn {
  background: none; border: none; color: #a5b4fc;
  font-weight: 700; font-size: 13px;
}
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ---------------- Responsive ---------------- */
@media (max-width: 1200px) {
  :root { --ms-listpane-w: 360px; }
}
@media (max-width: 992px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "list"
      "read";
    grid-template-rows: var(--ms-topbar-h) 1fr;
  }
  .app-sidebar {
    position: fixed; left: 0; top: var(--ms-topbar-h); bottom: 0;
    width: 280px; z-index: 30;
    transform: translateX(-105%); transition: transform var(--ms-duration);
    box-shadow: var(--ms-shadow-xl);
  }
  .app-sidebar.open { transform: translateX(0); }
  .app-readpane { display: none; }
  .app-shell.reading .app-listpane { display: none; }
  .app-shell.reading .app-readpane { display: flex; }
  .compose-modal { right: 0; width: 100vw; max-width: 100vw; border-radius: 12px 12px 0 0; }
}

/* ---------------- Shortcuts Table ---------------- */
.shortcuts-table td:first-child { white-space: nowrap; width: 1%; }

/* ---------------- Avatars palette for variety ---------------- */
.av-0 { background: linear-gradient(135deg, #4f46e5, #8b5cf6); }
.av-1 { background: linear-gradient(135deg, #ec4899, #f43f5e); }
.av-2 { background: linear-gradient(135deg, #10b981, #14b8a6); }
.av-3 { background: linear-gradient(135deg, #f59e0b, #f97316); }
.av-4 { background: linear-gradient(135deg, #0ea5e9, #3b82f6); }
.av-5 { background: linear-gradient(135deg, #a855f7, #ec4899); }
.av-6 { background: linear-gradient(135deg, #14b8a6, #22c55e); }
.av-7 { background: linear-gradient(135deg, #6366f1, #0ea5e9); }

/* Dark theme tweaks for Quill */
html[data-bs-theme="dark"] .ql-toolbar { background: var(--ms-surface-2); }
html[data-bs-theme="dark"] .ql-editor { color: var(--ms-text); background: var(--ms-surface); }
html[data-bs-theme="dark"] .ql-snow .ql-stroke { stroke: var(--ms-text-dim); }
html[data-bs-theme="dark"] .ql-snow .ql-fill   { fill:   var(--ms-text-dim); }

/* ==========================================================================
   v2 ADDITIONS — connection status, polished dashboard, empty states
   ========================================================================== */

/* Connection status pill in topbar */
.conn-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: var(--ms-surface-3); color: var(--ms-text-dim);
  transition: all var(--ms-duration);
}
.conn-status .conn-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ms-text-mute);
}
.conn-status.load { background: #fef3c7; color: #92400e; }
.conn-status.load .conn-dot { background: #f59e0b; animation: pulse 1.4s infinite; }
.conn-status.ok   { background: #d1fae5; color: #065f46; }
.conn-status.ok   .conn-dot { background: #10b981; }
.conn-status.err  { background: #fee2e2; color: #991b1b; cursor: help; }
.conn-status.err  .conn-dot { background: #ef4444; animation: pulse 1.4s infinite; }
html[data-bs-theme="dark"] .conn-status.load { background: rgba(245,158,11,.15); color: #fbbf24; }
html[data-bs-theme="dark"] .conn-status.ok   { background: rgba(16,185,129,.15); color: #34d399; }
html[data-bs-theme="dark"] .conn-status.err  { background: rgba(239,68,68,.15); color: #f87171; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* Refresh button spin */
.btn-icon i.spinning { animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Connection error block in folder nav */
.conn-error {
  text-align: center; padding: 24px 16px;
  border: 1px dashed var(--ms-border);
  border-radius: var(--ms-radius);
  margin: 8px 4px;
}
.conn-error-icon {
  width: 48px; height: 48px; margin: 0 auto 12px;
  border-radius: 50%; background: #fee2e2; color: #dc2626;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
html[data-bs-theme="dark"] .conn-error-icon { background: rgba(239,68,68,.15); color: #f87171; }

/* Empty state styling */
.list-empty { padding: 60px 20px; text-align: center; color: var(--ms-text-dim); }
.empty-icon {
  width: 72px; height: 72px; margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--ms-brand-tint); color: var(--ms-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
}
.empty-icon.error { background: #fee2e2; color: #dc2626; }
html[data-bs-theme="dark"] .empty-icon.error { background: rgba(239,68,68,.15); color: #f87171; }

/* Reading pane empty state */
.readpane-empty {
  margin: auto; text-align: center; padding: 60px 40px;
}
.readpane-empty i { font-size: 64px; color: var(--ms-text-mute); display: block; margin-bottom: 16px; }
.readpane-empty h5 { color: var(--ms-text-dim); margin-bottom: 8px; }

.load-more-wrap { padding: 20px; text-align: center; }

/* Compose modal — improved when shown */
.compose-modal:not(.d-none) { display: flex !important; }

/* Account avatar on /accounts page */
.account-avatar {
  width: 48px; height: 48px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 18px; flex-shrink: 0;
}

/* ==========================================================================
   Polished Dashboard
   ========================================================================== */

.dash-page {
  background: var(--ms-surface-2);
  min-height: 100vh;
}

.dash-hero {
  background: linear-gradient(135deg, rgba(99,102,241,.1) 0%, rgba(168,85,247,.05) 100%);
  border-radius: 20px; padding: 28px;
  border: 1px solid var(--ms-border);
}
html[data-bs-theme="dark"] .dash-hero {
  background: linear-gradient(135deg, rgba(99,102,241,.15) 0%, rgba(168,85,247,.1) 100%);
}
.dash-hero-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5, #8b5cf6);
  color: white; font-weight: 700; font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 20px rgba(79,70,229,.35);
}

.kpi-card {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: var(--ms-shadow-sm);
  transition: transform var(--ms-duration), box-shadow var(--ms-duration);
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--ms-shadow-md); }
.kpi-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 22px; flex-shrink: 0;
}
.kpi-label { font-size: 12px; color: var(--ms-text-dim); text-transform: uppercase; font-weight: 600; letter-spacing: .03em; }
.kpi-value { font-size: 26px; font-weight: 700; color: var(--ms-text); margin-top: 2px; }

.dash-chart-legend {
  display: flex; gap: 20px; font-size: 12px; color: var(--ms-text-dim);
  justify-content: center;
}
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }

.health-row {
  display: flex; padding: 10px 0;
  border-bottom: 1px solid var(--ms-border);
}
.health-row:last-of-type { border-bottom: none; }
.health-label { flex: 1; color: var(--ms-text-dim); font-size: 14px; }
.health-value { font-weight: 600; font-size: 14px; }
.health-value i { margin-right: 4px; }

.list-group-item.unread { background: var(--ms-brand-tint); }
html[data-bs-theme="dark"] .list-group-item.unread { background: rgba(99,102,241,.1); }

/* Toast styling refinements */
.ms-toast { font-weight: 500; }
.ms-toast i { font-size: 18px; }

/* ==========================================================================
   v2 ADDITIONS — Connection status, dashboard, error states
   ========================================================================== */

/* Connection status badge in topbar */
.conn-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: var(--ms-surface-3);
  color: var(--ms-text-dim);
  margin-right: 8px;
  transition: all var(--ms-duration);
}
.conn-status .conn-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ms-text-mute);
  display: inline-block;
}
.conn-status.load { background: #fef3c7; color: #92400e; }
.conn-status.load .conn-dot { background: #f59e0b; animation: pulse 1.5s infinite; }
.conn-status.ok   { background: #dcfce7; color: #166534; }
.conn-status.ok   .conn-dot { background: #16a34a; }
.conn-status.err  { background: #fee2e2; color: #991b1b; cursor: help; }
.conn-status.err  .conn-dot { background: #dc2626; animation: pulse 1.5s infinite; }
html[data-bs-theme="dark"] .conn-status.load { background: rgba(245,158,11,.15); color: #fbbf24; }
html[data-bs-theme="dark"] .conn-status.ok   { background: rgba(34,197,94,.15); color: #4ade80; }
html[data-bs-theme="dark"] .conn-status.err  { background: rgba(220,38,38,.15); color: #f87171; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Connection error in folder pane */
.conn-error {
  padding: 24px 16px; text-align: center;
}
.conn-error-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: #fee2e2; color: #dc2626;
  font-size: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.conn-error h6 { font-weight: 700; }

/* Empty states */
.list-empty {
  padding: 60px 20px; text-align: center;
}
.empty-icon {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--ms-surface-3); color: var(--ms-text-mute);
  font-size: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.empty-icon.error { background: #fee2e2; color: #dc2626; }
.list-empty h5 { font-weight: 700; margin-bottom: 6px; }

/* Refresh button spin */
.spinning { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Toast — stronger contrast */
.ms-toast {
  background: #1e293b; color: #fff;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
  font-weight: 500;
}
.ms-toast i { font-size: 18px; }
.ms-toast.success { background: #059669; }
.ms-toast.danger  { background: #dc2626; }

/* Load more wrap */
.load-more-wrap { padding: 20px; text-align: center; }

/* Readpane empty — bigger and prettier */
.readpane-empty {
  margin: auto; text-align: center; padding: 40px;
  display: flex; flex-direction: column; align-items: center;
}
.readpane-empty i {
  font-size: 80px; color: var(--ms-text-mute); margin-bottom: 16px;
  opacity: 0.4;
}
.readpane-empty h5 { color: var(--ms-text-dim); font-weight: 700; }

/* ========================================================================
   DASHBOARD
   ======================================================================== */

.dash-page {
  background: linear-gradient(180deg, var(--ms-brand-tint) 0%, var(--ms-surface-2) 200px);
  min-height: 100vh;
}
html[data-bs-theme="dark"] .dash-page {
  background: linear-gradient(180deg, rgba(99,102,241,.08) 0%, var(--ms-surface) 200px);
}

.dash-hero {
  background: var(--ms-surface);
  border-radius: 16px;
  padding: 24px 28px;
  box-shadow: var(--ms-shadow-sm);
  border: 1px solid var(--ms-border);
}
.dash-hero-avatar {
  width: 60px; height: 60px; border-radius: 16px;
  background: linear-gradient(135deg, var(--ms-brand), #8b5cf6);
  color: white; font-weight: 700; font-size: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 16px rgba(79,70,229,.3);
}

.kpi-card {
  background: var(--ms-surface);
  border-radius: 14px;
  padding: 20px;
  display: flex; align-items: center; gap: 16px;
  border: 1px solid var(--ms-border);
  box-shadow: var(--ms-shadow-sm);
  transition: transform var(--ms-duration), box-shadow var(--ms-duration);
  height: 100%;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--ms-shadow-md); }
.kpi-icon {
  width: 52px; height: 52px; border-radius: 12px;
  color: white; font-size: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--ms-shadow-sm);
}
.kpi-label { font-size: 12px; font-weight: 600; color: var(--ms-text-dim); text-transform: uppercase; letter-spacing: .04em; }
.kpi-value { font-size: 28px; font-weight: 800; color: var(--ms-text); line-height: 1; margin-top: 4px; }

.dash-chart-legend {
  display: flex; gap: 20px; justify-content: center;
  font-size: 12px; color: var(--ms-text-dim);
}
.dash-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.health-row {
  display: flex; align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--ms-border);
}
.health-row:last-of-type { border-bottom: none; }
.health-label { flex-grow: 1; font-size: 13px; color: var(--ms-text-dim); }
.health-value { font-size: 13px; font-weight: 600; }
.health-value i { margin-right: 4px; }

.account-avatar {
  width: 48px; height: 48px; border-radius: 12px;
  color: white; font-weight: 700; font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Recent inbox row in dashboard */
.list-group-item.unread { background: var(--ms-brand-tint); }
html[data-bs-theme="dark"] .list-group-item.unread { background: rgba(99,102,241,.08); }

/* ==========================================================================
   DARK MODE FIXES — ensure high contrast everywhere
   ========================================================================== */

html[data-bs-theme="dark"] body { background: #0b1120; color: var(--ms-text); }
html[data-bs-theme="dark"] .app-topbar,
html[data-bs-theme="dark"] .app-sidebar,
html[data-bs-theme="dark"] .app-listpane,
html[data-bs-theme="dark"] .app-readpane { background: var(--ms-surface); border-color: var(--ms-border); }
html[data-bs-theme="dark"] .card { background: var(--ms-surface); border-color: var(--ms-border); color: var(--ms-text); }
html[data-bs-theme="dark"] .card-header { background: var(--ms-surface) !important; border-color: var(--ms-border); }
html[data-bs-theme="dark"] .list-group-item { background: var(--ms-surface); border-color: var(--ms-border); color: var(--ms-text); }
html[data-bs-theme="dark"] .table { color: var(--ms-text); }
html[data-bs-theme="dark"] .table-light { background: var(--ms-surface-3); color: var(--ms-text); }
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select {
  background: var(--ms-surface-2); color: var(--ms-text); border-color: var(--ms-border);
}
html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus {
  background: var(--ms-surface); color: var(--ms-text); border-color: var(--ms-brand);
}
html[data-bs-theme="dark"] .btn-light { background: var(--ms-surface-3); color: var(--ms-text); border-color: var(--ms-border); }
html[data-bs-theme="dark"] .btn-light:hover { background: var(--ms-border); }
html[data-bs-theme="dark"] code { background: var(--ms-surface-3); color: #fbbf24; }
html[data-bs-theme="dark"] .text-muted, html[data-bs-theme="dark"] .text-secondary { color: var(--ms-text-dim) !important; }
html[data-bs-theme="dark"] .alert-info { background: rgba(14,165,233,.1); color: #7dd3fc; border-color: rgba(14,165,233,.3); }
html[data-bs-theme="dark"] .alert-warning { background: rgba(245,158,11,.1); color: #fbbf24; border-color: rgba(245,158,11,.3); }
html[data-bs-theme="dark"] .alert-success { background: rgba(34,197,94,.1); color: #4ade80; border-color: rgba(34,197,94,.3); }
html[data-bs-theme="dark"] .alert-danger  { background: rgba(220,38,38,.1); color: #f87171; border-color: rgba(220,38,38,.3); }


/* ==========================================================================
   v2.1 Dark mode polish — comprehensive coverage
   ========================================================================== */
html[data-bs-theme="dark"] {
  --ms-brand: #818cf8;
  --ms-brand-hi: #a5b4fc;
  --ms-brand-tint: rgba(129,140,248,.15);
  --ms-surface: #0f172a;
  --ms-surface-2: #020617;
  --ms-surface-3: #1e293b;
  --ms-border: #334155;
  --ms-text: #f1f5f9;
  --ms-text-dim: #cbd5e1;
  --ms-text-mute: #94a3b8;
}
html[data-bs-theme="dark"] body { background: var(--ms-surface-2); }
html[data-bs-theme="dark"] .compose-header { background: #1e293b; }
html[data-bs-theme="dark"] .ms-toast { background: #1e293b; border: 1px solid #334155; }
html[data-bs-theme="dark"] .ql-toolbar { background: #1e293b !important; border-color: #334155 !important; }
html[data-bs-theme="dark"] .ql-container { border-color: #334155 !important; color: #f1f5f9; }
html[data-bs-theme="dark"] .ql-editor { color: #f1f5f9; background: #0f172a; }
html[data-bs-theme="dark"] .ql-snow .ql-stroke { stroke: #cbd5e1; }
html[data-bs-theme="dark"] .ql-snow .ql-fill { fill: #cbd5e1; }
html[data-bs-theme="dark"] .ql-snow .ql-picker { color: #cbd5e1; }
html[data-bs-theme="dark"] .ql-snow .ql-picker-options { background: #1e293b; border-color: #334155; }
html[data-bs-theme="dark"] .read-body { color: #f1f5f9; }
html[data-bs-theme="dark"] .read-body table { background: #1e293b !important; color: #f1f5f9; }
html[data-bs-theme="dark"] .read-body td, html[data-bs-theme="dark"] .read-body th { color: #f1f5f9 !important; }
html[data-bs-theme="dark"] .read-body p { color: #f1f5f9; }
html[data-bs-theme="dark"] .card { background: var(--ms-surface); border-color: var(--ms-border); color: var(--ms-text); }
html[data-bs-theme="dark"] .card-header { background: transparent !important; color: var(--ms-text); border-color: var(--ms-border); }
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select { background: var(--ms-surface-3); border-color: var(--ms-border); color: var(--ms-text); }
html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus { background: var(--ms-surface-3); color: var(--ms-text); border-color: var(--ms-brand); box-shadow: 0 0 0 .25rem rgba(129,140,248,.25); }
html[data-bs-theme="dark"] .btn-light { background: var(--ms-surface-3); border-color: var(--ms-border); color: var(--ms-text); }
html[data-bs-theme="dark"] .btn-light:hover { background: #334155; color: var(--ms-text); }
html[data-bs-theme="dark"] .table { color: var(--ms-text); }
html[data-bs-theme="dark"] .table-light { background: var(--ms-surface-3) !important; color: var(--ms-text); }
html[data-bs-theme="dark"] .list-group-item { background: var(--ms-surface); border-color: var(--ms-border); color: var(--ms-text); }
html[data-bs-theme="dark"] .alert-info { background: rgba(99,102,241,.15); border-color: rgba(99,102,241,.3); color: #c7d2fe; }
html[data-bs-theme="dark"] .alert-warning { background: rgba(245,158,11,.15); border-color: rgba(245,158,11,.3); color: #fde68a; }
html[data-bs-theme="dark"] .alert-success { background: rgba(16,185,129,.15); border-color: rgba(16,185,129,.3); color: #a7f3d0; }
html[data-bs-theme="dark"] .alert-danger { background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.3); color: #fecaca; }
html[data-bs-theme="dark"] code { background: rgba(129,140,248,.15); color: #c7d2fe; padding: 1px 6px; border-radius: 4px; }
html[data-bs-theme="dark"] .text-muted, html[data-bs-theme="dark"] .text-secondary { color: var(--ms-text-dim) !important; }

/* Auth body dark mode */
html[data-bs-theme="dark"] .auth-body {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(99,102,241,.3), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(168,85,247,.25), transparent 60%),
    var(--ms-surface-2);
}

/* ==========================================================================
   v3 — Premium SaaS top bar (Gmail/Outlook style)
   ========================================================================== */
.app-topbar {
  display: grid;
  grid-template-columns: var(--ms-sidebar-w) 1fr auto;
  align-items: center;
  padding: 0 24px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--ms-border);
  height: var(--ms-topbar-h);
}
html[data-bs-theme="dark"] .app-topbar { background: rgba(15, 23, 42, .85); }

.tb-left { display: flex; align-items: center; gap: 12px; }
.tb-search { display: flex; justify-content: center; padding: 0 24px; position: relative; }
.tb-right { display: flex; align-items: center; gap: 4px; }

/* Brand */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ms-text); }
.brand-name { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }

/* Modern search bar */
.search-wrap {
  position: relative;
  width: 100%; max-width: 720px;
  display: flex; align-items: center;
  background: var(--ms-surface-3);
  border: 1.5px solid transparent;
  border-radius: 14px;
  padding: 0 16px 0 44px;
  height: 44px;
  transition: all 0.2s;
}
.search-wrap:hover { background: var(--ms-surface-2); }
.search-wrap:focus-within {
  background: var(--ms-surface);
  border-color: var(--ms-brand);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, .12), 0 4px 12px rgba(15, 23, 42, .08);
}
.search-ic {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--ms-text-mute); font-size: 16px;
  transition: color 0.2s;
}
.search-wrap:focus-within .search-ic { color: var(--ms-brand); }
.search-wrap input {
  background: transparent; border: none; outline: none; flex: 1;
  font-size: 14px; color: var(--ms-text);
  font-weight: 500;
}
.search-wrap input::placeholder { color: var(--ms-text-mute); font-weight: 400; }
.search-clear {
  background: none; border: none; color: var(--ms-text-mute); padding: 4px;
  cursor: pointer; font-size: 14px;
}
.search-clear:hover { color: var(--ms-danger); }
.search-kbd {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  padding: 2px 7px; font-size: 11px;
  border-radius: 6px;
  color: var(--ms-text-dim); font-weight: 600;
}

/* Right cluster — buttons */
.tb-divider {
  width: 1px; height: 24px; background: var(--ms-border); margin: 0 6px;
}

.btn-icon, .icon-btn {
  position: relative;
  width: 38px; height: 38px; border-radius: 10px;
  border: none; background: transparent;
  color: var(--ms-text-dim); font-size: 17px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.2s; cursor: pointer;
  text-decoration: none;
}
.btn-icon:hover, .icon-btn:hover { background: var(--ms-surface-3); color: var(--ms-text); transform: translateY(-1px); }
.btn-icon:active, .icon-btn:active { transform: translateY(0); }

/* Notifications badge */
.tb-notif-badge {
  position: absolute; top: 4px; right: 4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: white; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--ms-surface);
}

/* Connection status pill */
.conn-status, .conn-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: var(--ms-surface-3); color: var(--ms-text-dim);
  transition: all 0.2s;
}
.conn-status .conn-dot, .conn-pill .conn-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ms-text-mute);
}
.conn-status.load,  .conn-pill.load  { background: rgba(245,158,11,.12); color: #b45309; }
.conn-status.load .conn-dot, .conn-pill.load .conn-dot { background: #f59e0b; animation: pulse-dot 1.4s infinite; }
.conn-status.ok,    .conn-pill.ok    { background: rgba(16,185,129,.12); color: #059669; }
.conn-status.ok .conn-dot, .conn-pill.ok .conn-dot { background: #10b981; box-shadow: 0 0 6px rgba(16,185,129,.5); }
.conn-status.err,   .conn-pill.err   { background: rgba(239,68,68,.12); color: #dc2626; cursor: help; }
.conn-status.err .conn-dot, .conn-pill.err .conn-dot { background: #ef4444; animation: pulse-dot 1s infinite; }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

html[data-bs-theme="dark"] .conn-status.load { background: rgba(245,158,11,.18); color: #fbbf24; }
html[data-bs-theme="dark"] .conn-status.ok   { background: rgba(16,185,129,.18); color: #34d399; }
html[data-bs-theme="dark"] .conn-status.err  { background: rgba(239,68,68,.18); color: #f87171; }

/* User chip */
.tb-user, .profile-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 12px 4px 4px;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
}
.tb-user:hover, .profile-chip:hover {
  background: var(--ms-surface-3);
  border-color: var(--ms-border);
}
.tb-user-avatar, .profile-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ms-brand), #8b5cf6);
  color: white; font-weight: 700; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.profile-avatar.lg { width: 44px; height: 44px; font-size: 18px; }
.tb-user-avatar img, .profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tb-user-info, .profile-text {
  display: flex; flex-direction: column; align-items: flex-start;
  line-height: 1.2;
}
.tb-user-name, .profile-name { font-size: 13px; font-weight: 600; color: var(--ms-text); }
.tb-user-email, .profile-email {
  font-size: 11px; color: var(--ms-text-dim);
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tb-user-chev, .profile-caret { font-size: 10px; color: var(--ms-text-mute); }

/* Dropdown */
.tb-dropdown {
  border: 1px solid var(--ms-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 40px -8px rgba(15, 23, 42, .18) !important;
  padding: 6px !important;
  min-width: 260px;
  overflow: hidden;
}
html[data-bs-theme="dark"] .tb-dropdown { background: var(--ms-surface) !important; }
.tb-dd-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px;
  font-size: 14px;
}
.link-btn {
  background: none; border: none;
  font-size: 12px; color: var(--ms-brand); font-weight: 600;
  cursor: pointer;
}
.tb-dropdown .dropdown-item {
  border-radius: 8px; padding: 8px 12px;
  font-size: 14px; color: var(--ms-text);
  transition: all .15s;
}
.tb-dropdown .dropdown-item:hover { background: var(--ms-surface-3); color: var(--ms-text); }
.tb-dropdown .dropdown-item kbd { margin-left: auto; }

/* User card inside dropdown */
.user-card {
  display: flex; gap: 12px; padding: 14px;
  background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(168,85,247,.05));
  border-radius: 10px;
  margin-bottom: 4px;
}
.user-card-avatar {
  width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(135deg, var(--ms-brand), #8b5cf6);
  color: white; font-weight: 700; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.user-card-meta { flex: 1; min-width: 0; }
.user-card-link {
  font-size: 12px; font-weight: 600; color: var(--ms-brand);
  text-decoration: none; margin-top: 4px; display: inline-block;
}
.user-card-link:hover { text-decoration: underline; }

/* Notifications dropdown */
.notif-dropdown { min-width: 320px; }
.notif-empty {
  padding: 32px 16px; text-align: center;
  color: var(--ms-text-mute);
}
.notif-empty i { font-size: 28px; opacity: .5; }

/* Profile menu (used on accounts page top bar variant) */
.profile-menu { min-width: 280px; padding: 8px !important; border-radius: 14px !important; }
.profile-menu-head {
  display: flex; gap: 12px; padding: 12px;
  background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(168,85,247,.05));
  border-radius: 10px; align-items: center;
}
.profile-menu-name { font-weight: 600; color: var(--ms-text); }
.profile-menu-email { font-size: 12px; color: var(--ms-text-dim); }

/* Small layout fixes for grid topbar */
@media (max-width: 992px) {
  .app-topbar { grid-template-columns: auto 1fr auto; padding: 0 12px; }
  .tb-search { padding: 0 8px; }
}

/* =========================================================================
 *  v3 — Modern Email-Client Topbar (replaces older topbar styles)
 * ========================================================================= */
.app-topbar {
  height: var(--ms-topbar-h);
  background: var(--ms-surface);
  border-bottom: 1px solid var(--ms-border);
  display: grid;
  grid-template-columns: 280px 1fr auto;
  align-items: center;
  padding: 0 16px;
  gap: 16px;
  z-index: 30;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Left cluster */
.tb-left { display: flex; align-items: center; gap: 8px; }
.brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ms-text);
  padding: 6px 10px; border-radius: 10px;
  transition: background var(--ms-duration);
}
.brand:hover { background: var(--ms-surface-3); color: var(--ms-text); }
.brand-mark-sm {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 100%);
  display: inline-flex; align-items: center; justify-content: center;
  color: white; font-size: 16px;
  box-shadow: 0 4px 12px rgba(99,102,241,.35);
}
.brand-name {
  font-weight: 700; font-size: 17px;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #4f46e5, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Center: search */
.tb-search { position: relative; max-width: 720px; width: 100%; justify-self: center; }
.search-wrap {
  position: relative;
  background: var(--ms-surface-2);
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 8px 56px 8px 44px;
  transition: all var(--ms-duration);
  display: flex; align-items: center;
}
.search-wrap:hover { background: var(--ms-surface-3); }
.search-wrap:focus-within {
  background: var(--ms-surface);
  border-color: var(--ms-brand);
  box-shadow: 0 0 0 4px rgba(99,102,241,.15);
}
.search-ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ms-text-mute); font-size: 16px; }
.search-wrap input {
  background: transparent; border: none; outline: none; width: 100%;
  font-size: 14px; color: var(--ms-text);
  font-weight: 500;
}
.search-wrap input::placeholder { color: var(--ms-text-mute); font-weight: 400; }
.search-clear {
  position: absolute; right: 38px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--ms-text-mute); padding: 0;
  cursor: pointer; font-size: 16px;
}
.search-kbd {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: var(--ms-surface-3); border: 1px solid var(--ms-border);
  border-radius: 5px; padding: 2px 7px;
  font-family: ui-monospace, monospace; font-size: 11px;
  color: var(--ms-text-dim);
}

/* Right cluster */
.tb-right {
  display: flex; align-items: center; gap: 4px;
  justify-self: end;
}
.tb-divider {
  width: 1px; height: 24px;
  background: var(--ms-border);
  margin: 0 6px;
}

.btn-icon {
  border: none; background: transparent;
  width: 38px; height: 38px;
  border-radius: 10px;
  color: var(--ms-text-dim); font-size: 17px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--ms-duration);
  cursor: pointer; position: relative;
}
.btn-icon:hover { background: var(--ms-surface-3); color: var(--ms-text); transform: translateY(-1px); }
.btn-icon:active { transform: translateY(0); }

/* Notification bell with badge */
.tb-notif-badge {
  position: absolute; top: 4px; right: 4px;
  min-width: 18px; height: 18px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white; font-size: 10px; font-weight: 700;
  border-radius: 9px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ms-surface);
  box-shadow: 0 2px 6px rgba(239,68,68,.4);
}

/* User pill */
.tb-user {
  display: flex; align-items: center; gap: 10px;
  background: transparent;
  border: 1.5px solid transparent;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--ms-duration);
}
.tb-user:hover { background: var(--ms-surface-3); border-color: var(--ms-border); }
.tb-user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5, #8b5cf6);
  color: white; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(99,102,241,.3);
}
.tb-user-info {
  flex-direction: column; gap: 0; line-height: 1.2;
  align-items: flex-start; min-width: 0; max-width: 160px;
}
.tb-user-name {
  font-weight: 600; font-size: 13px; color: var(--ms-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-user-email {
  font-size: 11px; color: var(--ms-text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 160px;
}
.tb-user-chev { font-size: 12px; color: var(--ms-text-mute); }

/* Topbar dropdowns */
.tb-dropdown {
  border: 1px solid var(--ms-border);
  border-radius: 14px;
  padding: 8px;
  margin-top: 8px;
  min-width: 280px;
  box-shadow: 0 20px 40px -10px rgba(15,23,42,.18), 0 8px 16px -8px rgba(15,23,42,.1);
  background: var(--ms-surface);
}
.tb-dropdown .dropdown-item {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--ms-text);
  display: flex; align-items: center;
  transition: all .15s;
}
.tb-dropdown .dropdown-item:hover {
  background: var(--ms-surface-3);
  color: var(--ms-text);
}
.tb-dropdown .dropdown-divider {
  border-color: var(--ms-border);
  margin: 4px 0;
}
.tb-dropdown kbd {
  background: var(--ms-surface-3);
  border: 1px solid var(--ms-border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
}
.tb-dd-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px 8px; font-size: 13px; color: var(--ms-text-dim);
}
.link-btn {
  background: none; border: none; padding: 0;
  color: var(--ms-brand); font-weight: 600; font-size: 12px;
  cursor: pointer;
}

/* User-card inside dropdown */
.user-dropdown { min-width: 320px; padding: 12px; }
.user-card {
  display: flex; gap: 12px; padding: 10px 8px 14px;
  list-style: none;
}
.user-card-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5, #8b5cf6);
  color: white; font-weight: 700; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(99,102,241,.35);
  flex-shrink: 0;
}
.user-card-meta { min-width: 0; }
.user-card-link {
  display: inline-block; margin-top: 4px;
  font-size: 12px; font-weight: 600;
  color: var(--ms-brand); text-decoration: none;
}
.user-card-link:hover { text-decoration: underline; }

/* Notification dropdown */
.notif-dropdown { min-width: 360px; max-height: 480px; overflow-y: auto; }
.notif-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--ms-text-mute);
}
.notif-empty i { font-size: 36px; opacity: .5; }

/* Connection status pill — modernized */
.conn-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: var(--ms-surface-3);
  color: var(--ms-text-dim);
  border: 1px solid transparent;
  transition: all .25s;
  cursor: default;
}
.conn-status .conn-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ms-text-mute);
}
.conn-status.load { background: #fef3c7; color: #92400e; border-color: rgba(245,158,11,.2); }
.conn-status.load .conn-dot { background: #f59e0b; animation: pulse 1.4s infinite; }
.conn-status.ok   { background: rgba(16,185,129,.12); color: #047857; border-color: rgba(16,185,129,.25); }
.conn-status.ok   .conn-dot { background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.2); }
.conn-status.err  { background: rgba(239,68,68,.12); color: #b91c1c; border-color: rgba(239,68,68,.25); cursor: help; }
.conn-status.err  .conn-dot { background: #ef4444; animation: pulse 1.4s infinite; }
html[data-bs-theme="dark"] .conn-status.load { background: rgba(245,158,11,.15); color: #fbbf24; border-color: rgba(245,158,11,.25); }
html[data-bs-theme="dark"] .conn-status.ok   { background: rgba(16,185,129,.18); color: #6ee7b7; border-color: rgba(16,185,129,.3); }
html[data-bs-theme="dark"] .conn-status.err  { background: rgba(239,68,68,.18); color: #fca5a5; border-color: rgba(239,68,68,.3); }

/* Responsive topbar */
@media (max-width: 1200px) {
  .app-topbar { grid-template-columns: 240px 1fr auto; }
}
@media (max-width: 992px) {
  .app-topbar { grid-template-columns: auto 1fr auto; gap: 8px; padding: 0 8px; }
  .tb-search { max-width: 100%; }
  .brand-name { display: none; }
  .tb-user-info { display: none !important; }
  .tb-user { padding: 0; border: none; }
  .tb-user:hover { background: transparent; }
}
@media (max-width: 600px) {
  .conn-status { padding: 6px 8px; }
  .conn-text { display: none !important; }
  .search-wrap { padding: 6px 12px 6px 38px; }
  .search-wrap input { font-size: 13px; }
}

/* ==========================================================================
   Premium Accounts + Add Account Wizard
   ========================================================================== */
.accounts-page{padding:24px;max-width:1280px;margin:0 auto;color:var(--ms-text)}
.accounts-topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:24px;flex-wrap:wrap}
.back-link{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:var(--ms-surface-2);color:var(--ms-text);text-decoration:none;border:1px solid var(--ms-border)}
.back-link:hover{background:var(--ms-surface-3);color:var(--ms-text)}
.page-title{display:flex;align-items:center;gap:14px;min-width:0}
.title-mark{width:52px;height:52px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#4f46e5,#8b5cf6);color:#fff;font-size:22px;box-shadow:0 14px 34px rgba(99,102,241,.25)}
.page-title h1{margin:0;font-size:30px;line-height:1.05;letter-spacing:-.03em}
.subtitle{display:block;color:var(--ms-text-dim);font-size:14px;margin-top:4px}
.btn-primary-pill,.btn-primary-lg,.btn-ghost,.btn-ghost-sm{border:none;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:all .2s ease}
.btn-primary-pill,.btn-primary-lg{background:linear-gradient(135deg,#4f46e5,#8b5cf6);color:#fff;box-shadow:0 10px 30px rgba(99,102,241,.24)}
.btn-primary-pill{padding:12px 18px;border-radius:999px;font-weight:700}
.btn-primary-lg{padding:14px 20px;border-radius:16px;font-weight:700}
.btn-primary-pill:hover,.btn-primary-lg:hover{transform:translateY(-1px);color:#fff;box-shadow:0 16px 34px rgba(99,102,241,.3)}
.btn-ghost,.btn-ghost-sm{background:var(--ms-surface-2);color:var(--ms-text);border:1px solid var(--ms-border)}
.btn-ghost{padding:13px 18px;border-radius:14px}
.btn-ghost-sm{padding:8px 12px;border-radius:12px;font-size:13px}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.accounts-container{display:grid;gap:22px}
.empty-hero{position:relative;overflow:hidden;padding:44px;border-radius:28px;background:linear-gradient(180deg,var(--ms-surface),var(--ms-surface-2));border:1px solid var(--ms-border);box-shadow:0 24px 60px rgba(15,23,42,.08);text-align:center}
.empty-orb{width:92px;height:92px;border-radius:28px;background:radial-gradient(circle at top left,rgba(99,102,241,.95),rgba(168,85,247,.9));display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:38px;box-shadow:0 20px 50px rgba(99,102,241,.28);margin-bottom:22px}
.empty-hero h2{font-size:36px;letter-spacing:-.04em;margin:0 0 12px}
.empty-hero p{max-width:760px;margin:0 auto 18px;color:var(--ms-text-dim);font-size:16px}
.provider-strip{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.provider-chip{padding:10px 14px;border-radius:999px;background:var(--ms-surface-2);border:1px solid var(--ms-border);font-size:13px;font-weight:600;color:var(--ms-text-dim)}
.accounts-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.summary-card{padding:20px;border-radius:22px;background:var(--ms-surface);border:1px solid var(--ms-border);box-shadow:0 18px 45px rgba(15,23,42,.06);display:grid;gap:8px}
.summary-card strong{font-size:32px;line-height:1;letter-spacing:-.04em}
.summary-kicker{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--ms-text-mute)}
.summary-sub{color:var(--ms-text-dim);font-size:13px}
.summary-card.accent{background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(168,85,247,.1))}
.account-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
.account-card{padding:22px;border-radius:24px;background:var(--ms-surface);border:1px solid var(--ms-border);box-shadow:0 18px 44px rgba(15,23,42,.08);display:grid;gap:16px}
.card-online{border-color:rgba(16,185,129,.25)}
.card-offline{border-color:rgba(239,68,68,.22)}
.account-card-head{display:flex;align-items:flex-start;gap:14px}
.account-avatar{width:52px;height:52px;border-radius:18px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:800;flex-shrink:0}
.av-0{background:linear-gradient(135deg,#4f46e5,#8b5cf6)} .av-1{background:linear-gradient(135deg,#0891b2,#2563eb)} .av-2{background:linear-gradient(135deg,#059669,#10b981)} .av-3{background:linear-gradient(135deg,#ea580c,#f97316)} .av-4{background:linear-gradient(135deg,#db2777,#ec4899)} .av-5{background:linear-gradient(135deg,#7c3aed,#a855f7)} .av-6{background:linear-gradient(135deg,#0f766e,#14b8a6)} .av-7{background:linear-gradient(135deg,#475569,#64748b)}
.account-info{flex:1;min-width:0}.account-name{font-weight:700;font-size:17px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.account-email{color:var(--ms-text-dim);font-size:13px;margin-top:4px;word-break:break-word}
.badge-default{padding:4px 10px;border-radius:999px;background:rgba(99,102,241,.12);color:var(--ms-brand);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.account-actions{display:flex;gap:8px;align-items:center}.account-delete{width:38px;height:38px;border-radius:12px;border:1px solid var(--ms-border);background:var(--ms-surface-2);color:var(--ms-danger);display:inline-flex;align-items:center;justify-content:center}
.account-status{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}.status-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.status-ok{background:rgba(16,185,129,.12);color:#059669}.status-err{background:rgba(239,68,68,.12);color:#dc2626}.pulse-dot{width:8px;height:8px;border-radius:50%;background:currentColor;animation:pulse-dot 1.4s infinite}.status-meta{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ms-text-dim)}
.status-detail{width:100%;padding:12px 14px;border-radius:16px;background:var(--ms-surface-2);border:1px solid var(--ms-border)}.status-detail summary{cursor:pointer;font-weight:700;color:var(--ms-text)}.status-detail code{display:block;margin-top:10px;white-space:pre-wrap;color:var(--ms-text-dim)}
.account-meta{display:grid;gap:10px}.meta-row{display:grid;grid-template-columns:18px 64px 1fr;gap:12px;align-items:center;color:var(--ms-text-dim);font-size:13px}.meta-row code{padding:8px 10px;border-radius:12px;background:var(--ms-surface-2);border:1px solid var(--ms-border);color:var(--ms-text)}
.account-footer-note{display:flex;gap:10px;align-items:flex-start;color:var(--ms-text-dim);font-size:13px;padding-top:4px}
.accounts-footer-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;border-radius:24px;background:linear-gradient(135deg,var(--ms-surface),var(--ms-surface-2));border:1px solid var(--ms-border)}
.accounts-footer-bar strong{display:block;font-size:16px;margin-bottom:4px}.accounts-footer-bar span{color:var(--ms-text-dim);font-size:14px}

.wiz-shell{min-height:calc(100vh - 72px);padding:24px;position:relative;overflow:hidden}.wiz-bg{position:absolute;inset:0;background:radial-gradient(circle at top left,rgba(99,102,241,.12),transparent 34%),radial-gradient(circle at top right,rgba(168,85,247,.10),transparent 36%),linear-gradient(180deg,var(--ms-bg),var(--ms-surface-2));pointer-events:none}.wiz-topbar,.wiz-main{position:relative;z-index:1}.wiz-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 auto 22px;max-width:1280px}.wiz-back{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:var(--ms-surface);border:1px solid var(--ms-border);text-decoration:none;color:var(--ms-text)}.wiz-title-wrap{display:flex;align-items:center;gap:12px}.wiz-title{font-size:22px;font-weight:800;letter-spacing:-.03em}.wiz-help{display:flex;align-items:center}
.wiz-main{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:240px minmax(0,1fr);gap:22px;align-items:start}.wiz-stepper{list-style:none;margin:0;padding:18px;border-radius:26px;background:var(--ms-surface);border:1px solid var(--ms-border);box-shadow:0 18px 44px rgba(15,23,42,.07);display:grid;gap:10px;position:sticky;top:96px}.wiz-stepper li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;color:var(--ms-text-dim);font-weight:700}.wiz-stepper .dot{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--ms-surface-2);border:1px solid var(--ms-border)}.wiz-stepper li.active{background:rgba(99,102,241,.1);color:var(--ms-brand)}.wiz-stepper li.active .dot,.wiz-stepper li.done .dot{background:linear-gradient(135deg,#4f46e5,#8b5cf6);color:#fff;border-color:transparent}.wiz-stepper li.done{color:var(--ms-text)}
.wiz-card{display:none;padding:28px;border-radius:30px;background:var(--ms-surface);border:1px solid var(--ms-border);box-shadow:0 24px 60px rgba(15,23,42,.08)}.wiz-card.active{display:block}.wiz-card-head h2{font-size:34px;letter-spacing:-.04em;margin:0 0 8px}.wiz-sub{margin:0;color:var(--ms-text-dim)}
.provider-select-wrap{margin-top:24px}.provider-select-wrap select,.wiz-field input,.wiz-field select{width:100%;padding:14px 16px;border-radius:16px;border:1px solid var(--ms-border);background:var(--ms-surface-2);color:var(--ms-text);outline:none;transition:.2s}.provider-select-wrap select:focus,.wiz-field input:focus,.wiz-field select:focus{border-color:var(--ms-brand);box-shadow:0 0 0 4px rgba(99,102,241,.12)}
.provider-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:16px}.provider-tile{padding:18px;border-radius:22px;border:1px solid var(--ms-border);background:var(--ms-surface-2);color:var(--ms-text);display:flex;align-items:center;gap:14px;text-align:left;transition:.2s;box-shadow:0 10px 24px rgba(15,23,42,.04)}.provider-tile:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 45%,var(--ms-border));box-shadow:0 18px 34px rgba(15,23,42,.08)}.provider-tile.selected{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,transparent),rgba(255,255,255,.02));border-color:color-mix(in srgb,var(--accent) 52%,var(--ms-border));box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}.provider-logo{width:42px;height:42px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:#fff;flex-shrink:0}.provider-name{font-weight:700;line-height:1.3}
.wiz-form,.wiz-grid{display:grid;gap:18px}.wiz-form{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:18px}.wiz-field{display:grid;gap:8px}.wiz-field label{font-weight:700;font-size:14px}.wiz-field small,.wiz-hint,.text-muted{color:var(--ms-text-dim)}.wiz-tag{padding:4px 8px;border-radius:999px;background:rgba(99,102,241,.12);color:var(--ms-brand);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.wiz-pw{position:relative}.pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%)}.btn-icon-sm{width:36px;height:36px;border-radius:12px;border:1px solid var(--ms-border);background:var(--ms-surface);color:var(--ms-text)}
.provider-note-inline,.provider-banner{margin-top:18px;padding:16px 18px;border-radius:18px;background:rgba(99,102,241,.08);border:1px solid rgba(99,102,241,.18);color:var(--ms-text)}.provider-banner{display:flex;align-items:center;gap:14px}.provider-banner-logo{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:14px}
.wiz-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:18px}.wiz-section{padding:18px;border-radius:22px;background:var(--ms-surface-2);border:1px solid var(--ms-border);display:grid;gap:14px}.wiz-section-h{display:flex;align-items:center;gap:10px;margin:0;font-size:15px}.wiz-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.wiz-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24px;flex-wrap:wrap}
.wiz-progress-wrap{display:flex;align-items:center;gap:14px;margin:18px 0 12px}.wiz-progress{height:14px;flex:1;background:var(--ms-surface-2);border-radius:999px;overflow:hidden;border:1px solid var(--ms-border)}.wiz-progress-bar{height:100%;width:0;background:linear-gradient(90deg,#4f46e5,#8b5cf6,#06b6d4);transition:width .35s ease}.wiz-progress-pct{font-weight:800;color:var(--ms-text-dim)}
.wiz-checks{list-style:none;margin:0;padding:0;display:grid;gap:12px}.wiz-checks li{display:grid;grid-template-columns:40px 1fr;grid-template-areas:'icon label' 'icon detail';gap:4px 12px;padding:16px 18px;border-radius:18px;background:var(--ms-surface-2);border:1px solid var(--ms-border);transition:.2s}.check-icon{grid-area:icon;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:14px;background:var(--ms-surface);border:1px solid var(--ms-border)}.check-label{grid-area:label;font-weight:700}.check-detail{grid-area:detail;color:var(--ms-text-dim);font-size:13px}.wiz-checks li.running{border-color:rgba(59,130,246,.35);box-shadow:0 0 0 4px rgba(59,130,246,.12)}.wiz-checks li.ok{border-color:rgba(16,185,129,.28)}.wiz-checks li.error{border-color:rgba(239,68,68,.26)}.wiz-checks li.warn{border-color:rgba(245,158,11,.26)}.wiz-checks li.ok .check-icon{color:#10b981}.wiz-checks li.error .check-icon{color:#ef4444}.wiz-checks li.warn .check-icon{color:#f59e0b}.spinner{width:18px;height:18px;border:2px solid rgba(99,102,241,.18);border-top-color:#4f46e5;border-radius:50%;display:inline-block;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.live-status{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:10px 14px;border-radius:999px;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.16);font-weight:700;color:#2563eb}.live-pulse{width:10px;height:10px;border-radius:50%;background:#2563eb;box-shadow:0 0 0 0 rgba(37,99,235,.45);animation:livepulse 1.4s infinite}@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(37,99,235,.4)}70%{box-shadow:0 0 0 10px rgba(37,99,235,0)}100%{box-shadow:0 0 0 0 rgba(37,99,235,0)}}
.result-card{padding:18px 2px 2px;display:grid;gap:18px}.result-icon{display:flex;justify-content:center}.result-card h2{font-size:34px;letter-spacing:-.04em;margin:0;text-align:center}.result-sub{text-align:center;color:var(--ms-text-dim);max-width:760px;margin:0 auto}.success-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.success-item,.fix-card,.ext-warning{padding:16px 18px;border-radius:18px;background:var(--ms-surface-2);border:1px solid var(--ms-border)}.success-item{display:flex;gap:12px;align-items:flex-start}.diag-list{display:grid;gap:10px}.diag-row{display:grid;grid-template-columns:24px 220px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;background:var(--ms-surface-2);border:1px solid var(--ms-border)}.diag-row .diag-name{font-weight:700}.diag-row .diag-detail{color:var(--ms-text-dim)}.diag-row.ok{border-color:rgba(16,185,129,.18)}.diag-row.warn{border-color:rgba(245,158,11,.18)}.diag-row.error{border-color:rgba(239,68,68,.18)}.diag-dur{font-size:12px;color:var(--ms-text-mute);font-weight:700}
.fix-head{font-weight:800;display:flex;align-items:center;gap:10px;margin-bottom:8px}.fix-body{margin:0;color:var(--ms-text-dim)}.btn-ghost-sm{padding:9px 12px;border-radius:12px}.tech-details{padding:14px 16px;border-radius:18px;background:var(--ms-surface-2);border:1px solid var(--ms-border)}.tech-details summary{cursor:pointer;font-weight:800}.tech-body{margin-top:12px;color:var(--ms-text-dim)}.tech-body pre{white-space:pre-wrap;margin:12px 0 0;padding:14px;border-radius:14px;background:var(--ms-surface);border:1px solid var(--ms-border);color:var(--ms-text)}.result-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.wiz-flash{position:fixed;right:20px;bottom:20px;padding:12px 16px;border-radius:14px;background:#111827;color:#fff;transform:translateY(14px);opacity:0;transition:.25s;z-index:80;box-shadow:0 16px 40px rgba(15,23,42,.28)}.wiz-flash.show{transform:translateY(0);opacity:1}.wiz-flash.success{background:#065f46}.wiz-flash.error{background:#991b1b}
.shake{animation:shake .25s linear 2}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

html[data-bs-theme="dark"] .provider-logo,html[data-bs-theme="dark"] .provider-banner-logo{background:#0f172a}
html[data-bs-theme="dark"] .title-mark{box-shadow:0 16px 42px rgba(99,102,241,.4)}
html[data-bs-theme="dark"] .empty-hero,html[data-bs-theme="dark"] .summary-card,html[data-bs-theme="dark"] .account-card,html[data-bs-theme="dark"] .accounts-footer-bar,html[data-bs-theme="dark"] .wiz-card,html[data-bs-theme="dark"] .wiz-stepper{box-shadow:none}

@media (max-width: 1100px){.wiz-main{grid-template-columns:1fr}.wiz-stepper{position:static;grid-template-columns:repeat(4,minmax(0,1fr));overflow:auto}.wiz-stepper li{min-width:180px}.wiz-form,.wiz-grid,.success-grid{grid-template-columns:1fr}}
@media (max-width: 768px){.accounts-page,.wiz-shell{padding:16px}.accounts-topbar,.accounts-footer-bar,.wiz-topbar,.wiz-actions{flex-direction:column;align-items:stretch}.page-title h1,.wiz-card-head h2,.result-card h2,.empty-hero h2{font-size:28px}.accounts-summary-grid,.provider-grid,.account-grid{grid-template-columns:1fr}.wiz-row{grid-template-columns:1fr}.diag-row{grid-template-columns:24px 1fr;grid-template-areas:'icon name' '. detail' '. dur'}.diag-row i{grid-area:icon}.diag-row .diag-name{grid-area:name}.diag-row .diag-detail{grid-area:detail}.diag-row .diag-dur{grid-area:dur}.meta-row{grid-template-columns:18px 56px 1fr}}

/* ===== MailSaaS SPA polish layer ===== */
:root {
  --mail-row-height: 64px;
}

html[data-density="compact"] { --mail-row-height: 52px; }
html[data-density="comfortable"] { --mail-row-height: 64px; }
html[data-density="spacious"] { --mail-row-height: 80px; }

html[data-theme-preset="contrast"] {
  --ms-brand: #0f172a;
  --ms-brand-hi: #111827;
  --ms-brand-tint: #e2e8f0;
  --ms-surface: #ffffff;
  --ms-surface-2: #f8fafc;
  --ms-surface-3: #e2e8f0;
  --ms-border: #0f172a;
  --ms-text: #020617;
  --ms-text-dim: #1e293b;
  --ms-text-mute: #334155;
}

html[data-theme-preset="soft"] {
  --ms-brand: #7c3aed;
  --ms-brand-hi: #8b5cf6;
  --ms-brand-tint: #f5f3ff;
  --ms-surface: #fffdfd;
  --ms-surface-2: #faf7ff;
  --ms-surface-3: #f3ecff;
  --ms-border: #eadcff;
  --ms-text: #221b2f;
  --ms-text-dim: #6b5a86;
  --ms-text-mute: #9889b2;
}

html[data-reading-pane="bottom"] .app-shell {
  grid-template-columns: var(--ms-sidebar-w) 1fr;
  grid-template-rows: var(--ms-topbar-h) minmax(280px, 44vh) minmax(240px, 1fr);
  grid-template-areas:
    "topbar topbar"
    "sidebar list"
    "sidebar read";
}

html[data-reading-pane="full"] .app-shell {
  grid-template-columns: var(--ms-sidebar-w) 1fr;
  grid-template-areas:
    "topbar topbar"
    "sidebar read";
}

html[data-reading-pane="full"] .app-listpane {
  display: none;
}

html.mail-preview-off .msg-snippet {
  display: none;
}

.preset-chip.active {
  background: var(--ms-brand);
  color: #fff;
  border-color: var(--ms-brand);
}

.msg-row {
  min-height: var(--mail-row-height, 64px);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.msg-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}

.msg-row .msg-main,
.read-body,
.app-sidebar,
.listpane-body,
.app-readpane {
  content-visibility: auto;
  contain-intrinsic-size: 180px;
}

.mail-modal-open {
  overflow: hidden;
}

.mail-modal-root {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
}

.mail-modal-shell {
  position: absolute;
  inset: 0;
  pointer-events: auto;
}

.mail-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .5);
  backdrop-filter: blur(8px);
}

.mail-modal-card {
  position: relative;
  width: min(560px, calc(100vw - 28px));
  margin: min(10vh, 88px) auto 0;
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: 20px;
  box-shadow: 0 32px 80px rgba(15, 23, 42, .24);
  overflow: hidden;
}

.mail-modal-card.danger .mail-modal-head {
  background: linear-gradient(135deg, rgba(239, 68, 68, .1), rgba(248, 113, 113, .05));
}

.mail-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--ms-border);
}

.mail-modal-head h3 {
  margin: 4px 0 0;
  font-size: 1.25rem;
}

.mail-modal-kicker {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ms-text-dim);
  font-weight: 700;
}

.mail-modal-body {
  padding: 20px 22px;
}

.mail-modal-copy {
  margin: 0;
  color: var(--ms-text-dim);
  line-height: 1.6;
}

.mail-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 22px 22px;
}

.mail-inline-label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

.mail-inline-error {
  min-height: 20px;
  color: var(--ms-danger);
  font-size: 13px;
  margin-top: 8px;
}

@media (max-width: 992px) {
  html[data-reading-pane="bottom"] .app-shell,
  html[data-reading-pane="full"] .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: var(--ms-topbar-h) 1fr;
    grid-template-areas:
      "topbar"
      "list";
  }

  html[data-reading-pane="bottom"] .app-sidebar,
  html[data-reading-pane="full"] .app-sidebar {
    display: none;
  }
}

/* ===== Virtualized list + keyboard focus polish ===== */
.msg-virtual-viewport {
  position: relative;
  overflow-y: auto;
  height: 100%;
  scroll-behavior: smooth;
  outline: none;
}
.msg-virtual-spacer {
  width: 100%;
  position: relative;
}
.msg-virtual-window {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  will-change: transform;
}
.msg-list { display: block; }

.msg-row {
  outline: none;
}
.msg-row.focused {
  background: var(--ms-brand-tint);
  box-shadow: inset 3px 0 0 var(--ms-brand);
}
.msg-row.row-selected {
  background: rgba(99, 102, 241, .08);
}
.msg-row.is-active {
  background: var(--ms-brand-tint);
}

html[data-theme-preset="contrast"] .msg-row.focused {
  outline: 2px solid var(--ms-brand);
  outline-offset: -2px;
}

.msg-row[aria-selected="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-left: 3px solid var(--ms-brand);
  pointer-events: none;
}

.shortcuts-table kbd { margin-right: 4px; }

@media (prefers-reduced-motion: reduce) {
  .msg-row,
  .compose-modal,
  .ms-toast,
  .mail-modal-card { transition: none !important; animation: none !important; }
}