:root{
  --bg:#0b0d10;--panel:#10141a;--muted:#aab2bf;--text:#e6edf3;--accent:#59c2ff;--accent-2:#7ee787;
  --danger:#ff6b6b;--warn:#ffcc66;--chip:#182029;--border:#222a33;--shadow:0 8px 24px rgba(0,0,0,.35);
  --header-h:56px; --sidebar-w:340px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:linear-gradient(180deg,#0b0d10,#0f1318);color:var(--text);
  font:14px/1.5 "Manrope",system-ui,-apple-system,Segoe UI,Roboto,Arial;
  height:100vh; overflow:hidden;  /* only the list scrolls */
}

/* Header pinned (exact) */
header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; gap:10px; align-items:center;
  padding:10px 14px; min-height:var(--header-h);
  background:#0e1217; border-bottom:1px solid var(--border);
}
.brand{font-weight:800; letter-spacing:.2px}
.brand span{color:var(--accent)}
.searchbar{flex:1; display:flex; gap:8px}
.searchbar input{
  flex:1;border:1px solid var(--border);background:#0a0e13;color:var(--text);
  border-radius:10px;padding:10px 12px;outline:none
}
.btn{
  appearance:none;border:none;background:var(--accent);color:#072033;font-weight:800;
  padding:10px 14px;border-radius:10px;cursor:pointer;box-shadow:var(--shadow)
}
.btn.secondary{background:#1c222b;color:var(--text);border:1px solid var(--border)}
.btn.ghost{background:transparent;border:1px dashed var(--border);color:var(--muted)}
.btn.icon{padding:8px 10px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.pill{padding:6px 10px;border:1px solid var(--border);background:var(--chip);border-radius:999px;color:var(--muted)}

/* Sidebar fixed (exact) */
aside#sidebar{
  position:fixed; top:var(--header-h); bottom:0; left:0; width:var(--sidebar-w);
  background:var(--panel); border-right:1px solid var(--border);
  padding:14px; overflow:auto; scrollbar-width:none; z-index:40;
}
.modal {
  backdrop-filter: blur(8px);
  background-color: rgba(0, 0, 0, 0.6);
}
.modal .dialog {
  background: var(--surface);
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}
.accounts-table button {
  padding: 6px 12px;
  margin-left: 8px;
}
.accounts-table i {
  margin-right: 6px;
}
aside#sidebar::-webkit-scrollbar{width:0;height:0}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:12px;color:var(--muted)}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
input,select,textarea{
  border:1px solid var(--border);background:#0a0e13;color:var(--text);
  border-radius:10px;padding:10px 12px;outline:none;width:100%;min-width:0
}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{background:var(--chip);border:1px solid var(--border);padding:6px 10px;border-radius:999px;color:var(--muted)}

/* Account multiselect */
.msel{position:relative}
.msel .trigger{width:100%;text-align:left}
.msel .panel{
  position:absolute;left:0;right:0;top:calc(100% + 6px);background:#0b1117;border:1px solid var(--border);
  border-radius:10px;box-shadow:var(--shadow);padding:8px;display:none;max-height:340px;overflow:auto;z-index:60
}
.msel.open .panel{display:block}
.msel-tools{display:flex;gap:6px;align-items:center;position:sticky;top:0;background:#0b1117;padding-bottom:6px}
.msel-tools input{height:34px}
.opt{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px}
.opt label{display:flex;align-items:center;gap:10px;cursor:pointer;width:100%}
.opt input[type="checkbox"] {
    margin: 0;
    width: 20px;
}
.opt:hover{background:#0f141b}

/* Main content region (exact) */
main#content{
  position:absolute; top:var(--header-h); bottom:0; left:var(--sidebar-w); right:0;
  display:flex; flex-direction:column; min-width:0; overflow:hidden;
}
.toolbar{
  display:flex;gap:8px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--border);
  background:#0f1318; z-index:10; flex:0 0 auto;
}
.list{flex:1 1 auto; overflow:auto}
.item{
  display:grid;grid-template-columns:120px 2fr 1fr max(160px,22%);
  gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);align-items:center;cursor:pointer
}
.item:hover{background:#0f141b}
.badge{font-size:11px;background:#0a0f14;color:var(--muted);border:1px solid var(--border);padding:2px 6px;border-radius:6px;display:inline-block;max-width:110px;overflow:hidden;text-overflow:ellipsis;text-align:center}
.from,.subject{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.subject{display:flex;gap:8px;align-items:center}
.date{text-align:right;color:var(--muted)}
.mailbox{color:var(--accent-2)}
.unread .subject-text{font-weight:800}

/* Footer */
.footer{
  flex:0 0 auto; padding:10px 12px;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;background:#0f1318;z-index:5
}
.footer .group{display:flex;align-items:center;gap:8px}
.page-size__label{font-size:12px;color:var(--muted);white-space:nowrap}
.page-size__select{
  height:36px;padding:6px 12px;border-radius:10px;border:1px solid var(--border);
  background:#0a0e13;color:var(--text);outline:none
}

/* Skeleton & spinner */
.skel{position:relative;overflow:hidden;background:#0f141b;border-radius:10px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.07), rgba(255,255,255,0));animation:shimmer .8s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.sk-row{display:grid;grid-template-columns:120px 2fr 1fr max(160px,22%);gap:12px;padding:12px 16px;border-bottom:1px solid var(--border)}
.sk-dot{width:90px;height:18px;border-radius:6px}
.sk-line{height:12px;border-radius:8px}

.overlay{position:absolute;inset:42px 0 0 0;display:none;align-items:center;justify-content:center;background:transparent;z-index:2}
.overlay.show{display:flex}
.spinner{width:28px;height:28px;border:3px solid #2a3340;border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Modal (exact) */
.modal{position:fixed;inset:0;background:rgba(4,7,10,.6);display:none;align-items:center;justify-content:center;z-index:100}
.modal.open{display:flex}
.dialog{width:min(980px,95vw);max-height:92vh;background:#0b0f14;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.dialog header{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border)}
.subject-line{font-weight:800;flex:1}
.mail-meta{padding:8px 14px;display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--border)}
.viewTabs{display:flex;gap:6px}
.viewTabs .btn{padding:6px 10px}
.mail-body{padding:0 14px 14px 14px;overflow:auto;white-space:pre-wrap;word-break:break-word;min-height:220px}
.bodyFrame{width:100%;height:60vh;border:none;background:#0e1217;border-radius:10px}
.reply{padding:12px 14px;border-top:1px solid var(--border);display:grid;gap:8px}
.reply .grid2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.dialog footer{display:flex;gap:8px;justify-content:flex-end;padding:10px 14px;border-top:1px solid var(--border)}

/* Mobile drawer behavior preserved */
@media (max-width:1100px){
  main#content{left:0}
  body.drawer-open #sidebar{left:0; width:min(92vw,340px); display:block}
  body.drawer-open::after{content:"";position:fixed;inset:var(--header-h) 0 0 0;background:rgba(0,0,0,.5);z-index:35}
  #sidebar{display:none}
}

/* Ensure form controls inherit font properly */
button, input, select, textarea { font: inherit; }
/* Buttons inherit font */
button, input, select, textarea { font: inherit; }

/* Loading button */
.btn.loading {
  position: relative;
  pointer-events: none;
  opacity: .8;
}
.btn.loading::after{
  content:"";
  position:absolute; inset:auto 10px auto auto;
  width:16px; height:16px; border-radius:50%;
  border:2px solid #2a3340; border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}

/* Snackbar (toast) */
.snackbar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background: #0b0f14;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: var(--shadow);
  z-index: 9999;
  max-width: 90vw;
  font-size: 13px;
}
.snackbar.success { border-color: #174f2a; color: #b9f6c5; }
.snackbar.error   { border-color: #4f1717; color: #ffc3c3; }
/* Chips container that wraps nicely */
.chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

/* Compact chip */
.chip.small {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Chip remove button */
.chip.small .x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #11161d;
  color: var(--text);
  cursor: pointer;
  line-height: 12px;
  font-size: 12px;
  padding: 0;
}
.chip.small .x:hover { background: #1d2430; }

/* EXACT checkbox alignment as you requested */
.opt input[type="checkbox"] {
  margin: 0;
  width: 20px;
}
/* ===== Modal header lives inside modal, sticky, pill tabs with glow ===== */

.modal{
  background: rgba(6,10,16,.60);
  backdrop-filter: blur(6px);
}

.dialog{
  background: linear-gradient(180deg,#0b1016,#0d141c);
  border: 1px solid #1a2533;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(0,120,219,.10) inset;
  overflow: hidden; /* keeps header inside rounded corners */
}

/* sticky header INSIDE the modal */
.dialog-head{
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  padding: 12px 14px;
  background: linear-gradient(180deg,#0e1722,#0c131b);
  border-bottom: 1px solid #192433;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.subject-line{
  flex: 1 1 auto; min-width: 0;
  font-weight: 800; color: #e9f2ff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* segmented tabs (Text / HTML) */
.viewTabs{
  display: flex; gap: 6px;
  padding: 3px;
  border-radius: 12px;
  background: #0b121b;
  border: 1px solid #1b2a3c;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.viewTabs .btn{
  border: 0;
  background: transparent;
  color: #bcd2e7;
  padding: 6px 10px;
  border-radius: 9px;
  transition: background .15s ease, box-shadow .18s ease, color .15s ease;
}
.viewTabs .btn:hover{
  background:#122033;
  color:#def2ff;
}
/* active tab (JS sets .primary on active) */
.viewTabs .btn.primary,
.viewTabs .btn.active{
  color:#eaf5ff;
  background: linear-gradient(180deg,#2aa0ff,#0078db);
  box-shadow: 0 0 0 1px #155a8f inset, 0 6px 18px rgba(0,120,219,.35);
}

/* Reply / Close pills with subtle glow */
#replyBtn.btn.secondary,
#mmClose.btn.secondary{
  border-color: #203046;
  background: #0f1721;
  color: #d6e7ff;
}
#replyBtn.btn.secondary:hover,
#mmClose.btn.secondary:hover{
  background:#132130;
  box-shadow: 0 0 10px rgba(0,120,219,.18);
}

/* meta chips row */
.mail-meta{
  background: #0e141c;
  border-bottom: 1px solid #192433;
}
.mail-meta .chip{
  background: #0f1722;
  color:#b8cbe0;
  border:1px solid #1a2a3b;
}

/* preview container */
.mail-body{
  background:#0b1117;
  border:1px solid #1a2533;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.bodyFrame{
  background:#0c1218;
  border-radius:12px;
}

/* reply area colors (no layout changes) */
.reply{
  background:#0c1218;
  border-top:1px solid #192433;
}
.reply input,
.reply select,
.reply textarea{
  background:#0a0f14;
  border:1px solid #1a2533;
  color:#e6edf3;
  border-radius:12px;
}
.reply textarea{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.reply footer .btn{
  border-color:#1a75c5;
  color:#eaf5ff;
  background: linear-gradient(180deg,#2aa0ff,#0078db);
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 0 12px rgba(0,120,219,.28);
}
.reply footer .btn:hover{
  filter: brightness(1.03);
  box-shadow: 0 0 14px rgba(0,120,219,.35);
}
/* Filters layout & checkbox alignment */
.filters-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:10px 16px;
  align-items:center;
}
.fopt{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text);
  white-space:nowrap;
}
.fopt input[type="checkbox"]{
  margin:0;
  width:20px;
  height:20px;
  flex:0 0 auto;
}
.fopt span{line-height:1}

/* narrow screens stack */
@media (max-width:560px){
  .filters-grid{ grid-template-columns:1fr; }
}