:root {
    --bg-primary: #0f0f23;
    --bg-secondary: #1a1a3e;
    --bg-card: #22224a;
    --bg-hover: #2d2d66;
    --accent: #7c6aef;
    --accent-hover: #9580ff;
    --accent-glow: rgba(124,106,239,0.25);
    --text-primary: #e8e6f0;
    --text-secondary: #9896b0;
    --text-muted: #6b6988;
    --border: #33335a;
    --danger: #ef4444;
    --success: #22c55e;
    --warning: #f59e0b;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body {
    font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
  }
  a { color: var(--accent); text-decoration:none; transition:color .2s; }
  a:hover { color: var(--accent-hover); }

  /* ---------- Navbar ---------- */
  .navbar {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    padding: 0 2rem;
    display: flex; align-items: center; justify-content: space-between;
    height: 56px;
    backdrop-filter: blur(12px);
    position: sticky; top:0; z-index:100;
  }
  .navbar .logo {
    font-weight:700; font-size:1.15rem; color:var(--accent);
    display:flex; align-items:center; gap:.5rem;
  }
  .navbar .logo span { font-size:1.3rem; }
  .nav-links { display:flex; gap:.5rem; align-items:center; }
  .nav-links a, .nav-links button {
    padding: .45rem 1rem; border-radius:8px;
    font-size:.85rem; font-weight:500;
    border:none; cursor:pointer;
    color: var(--text-secondary);
    background: transparent;
    transition: all .2s;
  }
  .nav-links a:hover, .nav-links button:hover {
    background: var(--bg-hover); color: var(--text-primary);
  }
  .nav-links .btn-accent {
    background: var(--accent); color:#fff;
  }
  .nav-links .btn-accent:hover {
    background: var(--accent-hover);
    box-shadow: 0 0 18px var(--accent-glow);
  }

  /* ---------- Container ---------- */
  .container { max-width:960px; margin:0 auto; padding:1.5rem 1rem; }

  /* ---------- Card ---------- */
  .card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.8rem;
    margin-bottom: 1.2rem;
    transition: transform .15s, box-shadow .15s;
  }
  .card h2 {
    font-size:1.15rem; font-weight:600;
    margin-bottom:1rem; color:var(--text-primary);
  }

  /* ---------- Flash ---------- */
  .flash {
    padding:.75rem 1rem; border-radius:10px;
    margin-bottom:1rem; font-size:.88rem; font-weight:500;
  }
  .flash-error { background:rgba(239,68,68,.15); color:#fca5a5; border:1px solid rgba(239,68,68,.3); }
  .flash-success { background:rgba(34,197,94,.12); color:#86efac; border:1px solid rgba(34,197,94,.25); }

  /* ---------- Forms ---------- */
  input, textarea, select {
    width:100%; padding:.65rem .9rem;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius:10px; color:var(--text-primary);
    font-size:.9rem; outline:none;
    transition: border-color .2s, box-shadow .2s;
    font-family:inherit;
  }
  input:focus, textarea:focus, select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
  }
  label {
    display:block; margin-bottom:.35rem;
    font-size:.82rem; color:var(--text-secondary); font-weight:500;
  }
  .form-group { margin-bottom:1rem; }
  .btn {
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.6rem 1.4rem; border-radius:10px;
    font-weight:600; font-size:.88rem;
    border:none; cursor:pointer;
    transition: all .2s; color:#fff;
  }
  .btn-primary { background:var(--accent); }
  .btn-primary:hover { background:var(--accent-hover); box-shadow:0 0 18px var(--accent-glow); }
  .btn-danger { background:var(--danger); }
  .btn-danger:hover { background:#dc2626; }
  .btn-sm { padding:.4rem .8rem; font-size:.8rem; }

  /* ---------- Mail Table ---------- */
  .mail-table { width:100%; border-collapse:collapse; }
  .mail-table th {
    text-align:left; font-size:.75rem; font-weight:600;
    color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px;
    padding:.6rem .8rem; border-bottom:1px solid var(--border);
  }
  .mail-table td {
    padding:.7rem .8rem; border-bottom:1px solid rgba(51,51,90,.4);
    font-size:.88rem; vertical-align:middle;
  }
  .mail-table tr { transition:background .15s; cursor:pointer; }
  .mail-table tbody tr:hover { background:var(--bg-hover); }
  .mail-subject { font-weight:500; color:var(--text-primary); max-width:400px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mail-from { color:var(--text-secondary); max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mail-date { color:var(--text-muted); font-size:.82rem; white-space:nowrap; }
  .mail-unread .mail-subject { color:var(--accent); font-weight:700; }

  /* ---------- Read View ---------- */
  .msg-header { margin-bottom:1.2rem; }
  .msg-header h1 { font-size:1.2rem; font-weight:600; margin-bottom:.6rem; }
  .msg-meta { font-size:.82rem; color:var(--text-secondary); line-height:1.8; }
  .msg-meta strong { color:var(--text-primary); }
  .msg-body {
    background:var(--bg-primary); border-radius:10px;
    padding:1.2rem; line-height:1.7; font-size:.9rem;
    border:1px solid var(--border); overflow-x:auto;
    min-height:120px;
  }
  .msg-body iframe {
    width:100%; min-height:300px; border:none;
    background:#fff; border-radius:8px;
  }
  .attachments { margin-top:1rem; }
  .attachments .att-item {
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.4rem .8rem; background:var(--bg-hover);
    border-radius:8px; font-size:.82rem; margin-right:.5rem;
    margin-bottom:.4rem; border:1px solid var(--border);
  }

  /* ---------- Login ---------- */
  .login-wrap {
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    background: transparent;
    position: relative;
    overflow: hidden;
  }
  #bg-video {
    position: absolute; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    object-fit: cover; transform: scale(1.05) translate(2%, 2%);
  }
  .login-card {
    background: rgba(34,34,74, 0.75); border:1px solid rgba(255,255,255, 0.1);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-radius:18px; padding:2.4rem 2rem; width:380px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    z-index: 10;
  }
  .login-card h1 {
    text-align:center; font-size:1.3rem; margin-bottom:.3rem;
  }
  .login-card .subtitle {
    text-align:center; color:var(--text-muted); font-size:.82rem;
    margin-bottom:1.8rem;
  }
  .empty { text-align:center; padding:3rem; color:var(--text-muted); font-size:.92rem; }

  /* ---------- Bulk Toolbar ---------- */
  .bulk-toolbar {
    display:flex; align-items:center; gap:.8rem;
    padding:.5rem .4rem; margin-bottom:.5rem;
    border-bottom: 1px solid var(--border); flex-wrap:wrap;
  }
  .bulk-toolbar label {
    display:flex; align-items:center; gap:.4rem;
    font-size:.85rem; color:var(--text-secondary);
    margin:0; cursor:pointer;
  }
  .sel-count { color:var(--text-muted); font-size:.82rem; }
  input[type="checkbox"] {
    width:15px; height:15px; cursor:pointer;
    accent-color: var(--accent); flex-shrink:0;
  }

  /* ---------- Responsive ---------- */
  @media(max-width:640px){
    .navbar { padding:0 1rem; }
    .container { padding:1rem .6rem; }
    .card { padding:1.2rem; }
    .login-card { width:95%; padding:1.8rem 1.4rem; }
  }

/* ==================================================================
   Mobile / responsive
   ------------------------------------------------------------------
   The original stylesheet had a single @media block that only touched
   the navbar padding and card width. The message table never collapsed,
   so on a phone the inbox scrolled sideways and the action buttons sat
   off-screen. Below, the table turns into stacked cards and the nav
   collapses behind a hamburger.
   ================================================================== */

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--text-primary);
  font-size: 1.4rem;
  cursor: pointer;
  padding: .2rem .5rem;
}

/* toolbar above the message list */
.mail-toolbar {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: .9rem;
}
.mail-toolbar .search-box {
  display: flex;
  gap: .35rem;
  align-items: center;
  flex: 1 1 260px;
}
.mail-toolbar input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: .45rem .7rem;
  font-size: .85rem;
}

.star-btn {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 .2rem;
  color: var(--text-muted);
}
.star-btn.on { color: #f5c542; }

.pager {
  display: flex;
  gap: .5rem;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  font-size: .85rem;
  color: var(--text-secondary);
}
.pager a {
  padding: .35rem .8rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  text-decoration: none;
}
.pager a:hover { background: var(--bg-hover); }
.pager .disabled { opacity: .35; pointer-events: none; }

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}

@media (max-width: 780px) {
  .navbar { flex-wrap: wrap; padding: .6rem .8rem; }
  .nav-toggle { display: block; margin-left: auto; }
  .nav-links {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: .2rem;
    padding-top: .6rem;
  }
  .nav-links.open { display: flex; }
  .nav-links a,
  .nav-links button { display: block; width: 100%; text-align: left; }

  .container { padding: .8rem .6rem; }
  .card { padding: 1rem .8rem; }

  /* Message table -> stacked cards */
  .mail-table thead { display: none; }
  .mail-table, .mail-table tbody, .mail-table tr, .mail-table td {
    display: block;
    width: 100%;
  }
  .mail-table tr {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: .6rem;
    padding: .6rem .7rem;
    position: relative;
  }
  .mail-table td { border: 0; padding: .15rem 0; }
  .mail-table td.mail-from  { font-size: .82rem; color: var(--text-secondary); }
  .mail-table td.mail-subject { font-size: .95rem; font-weight: 600; }
  .mail-table td.mail-date  { font-size: .75rem; color: var(--text-muted); }
  .mail-table td:first-child {
    position: absolute; right: .6rem; top: .6rem; width: auto;
  }

  .mail-toolbar { flex-direction: column; align-items: stretch; }
  .mail-toolbar .search-box { flex: 1 1 auto; }
}

.media-btn {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.2rem;
  transition: all .3s;
}
.media-btn:hover { color: var(--text-primary); }

/* signature editor */
.sig-box { width: 100%; min-height: 120px; font-family: inherit; }