:root{
  --bg:#0b0f14; --panel:#121822; --muted:#93a1b1; --text:#e6edf3; --acc:#4da3ff;
  --danger:#ff6b6b; --ok:#57d38c; --line:#1d2633;
  --pill:#1b2430; --tag-sent:#374151; --tag-received:#1f6feb;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--acc);text-decoration:none}
.container{width:min(1100px, 92%);margin-inline:auto}
.site-header{background:#0b1119;border-bottom:1px solid var(--line)}
.header-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand .logo{font-size:1.2rem;margin-right:.25rem}
.site-nav{background:#0e1520;border-bottom:1px solid var(--line)}
.site-nav ul{display:flex;gap:14px;list-style:none;margin:0;padding:10px 0;align-items:center}
.site-nav li.right{margin-left:auto}
.site-nav .btn{padding:8px 14px;border:1px solid var(--line);border-radius:10px}
.pill.admin{background:var(--pill);border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:.85rem}
.site-footer{border-top:1px solid var(--line);margin-top:40px;padding:20px 0;color:var(--muted)}

.hero{padding:48px 0}
.hero .lede{color:var(--muted);max-width:700px}
.benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;padding-left:1rem}
.benefits li{background:var(--panel);border:1px solid var(--line);padding:10px 12px;border-radius:12px}

.card, .auth-card, .compose{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;margin:18px 0}
h1,h2{margin:0 0 10px}
.subtle{color:var(--muted)}
.muted{color:var(--muted);font-size:.95rem}

.form.modern label{display:block;margin:14px 0}
.form.modern input, .form.modern textarea, .form.modern select{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#0c1320;color:var(--text);outline:none
}
.form.modern input:focus, .form.modern textarea:focus{border-color:#294b7a}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:#0c1320;color:var(--text);cursor:pointer}
.btn.primary{background:linear-gradient(180deg, #2b6dde, #184a9c);border-color:#1f3f7a}
.btn.ghost{background:transparent}
.btn.danger{border-color:#432326;color:#ffb0b0}
.alert.error{background:#2a0f14;border:1px solid #471a1f;color:#ffb0b0;padding:10px 14px;border-radius:12px;margin:12px 0}
.inline{display:inline}

.inbox .mail-row{display:grid;grid-template-columns:100px 1fr auto;align-items:center;gap:14px;padding:12px;border-bottom:1px solid var(--line)}
.inbox .mail-row:hover{background:#0f1622}
.tag{display:inline-block;padding:6px 10px;border-radius:999px;font-size:.8rem;color:#fff}
.tag.sent{background:var(--tag-sent)}
.tag.received{background:var(--tag-received)}
.badge{background:#0c1320;border:1px solid var(--line);border-radius:999px;padding:2px 8px}
.line.small{color:var(--muted);font-size:.9rem}
.grid.grid-domains{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin:10px 0 16px}
.radio-tile input{display:none}
.radio-tile .tile{display:block;text-align:center;background:#0c1320;border:1px solid var(--line);padding:12px;border-radius:12px;cursor:pointer}
.radio-tile input:checked + .tile{outline:2px solid var(--acc)}

.ac-list{position:absolute;z-index:20;background:#0f1622;border:1px solid var(--line);border-radius:12px;margin-top:6px;width:min(520px, 100%);max-height:240px;overflow:auto}
.ac-item{padding:8px 12px;cursor:pointer}
.ac-item:hover, .ac-item:focus{background:#122035}

.header-actions .me{color:var(--muted);font-size:.95rem}

/* Link-styled button used for subject click */
.linklike {
  background: none; border: none; padding: 0; margin: 0;
  color: var(--acc); cursor: pointer; font: inherit;
}
.subject-link.unread { text-decoration: none; }
.subject-link.unread::after { content: ' •'; font-weight: 700; }

/* Modal layout */
.modal[aria-hidden="true"] { display: none; }
.modal[aria-hidden="false"] { display: block; }
.modal { position: fixed; inset: 0; z-index: 1000; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.modal-card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(800px, 92%); max-height: 85vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); padding: 16px 16px 12px;
}
.modal-close {
  position: absolute; right: 8px; top: 8px; width: 34px; height: 34px;
  border-radius: 10px; border: 1px solid var(--line); background: #0c1320;
  color: var(--text); font-size: 18px; cursor: pointer;
}
.modal-head { margin-right: 44px; }
.modal-head h2 { margin: 0 0 8px; }
.modal-head .meta { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted); }
.modal-body {
  background:#0c1320; border:1px solid var(--line); border-radius:12px;
  padding:14px; white-space:pre-wrap; line-height:1.5; margin:14px 0;
}
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* Add under existing styles */

.subject-link.unread { text-decoration: none; }
.subject-link.unread::after { content: ' •'; font-weight: 700; }

/* Modal thread view */
.modal-thread { display: grid; gap: 12px; max-height: 60vh; overflow: auto; }
.thread-item { background:#0c1320; border:1px solid var(--line); border-radius:12px; padding:12px; }
.thread-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; color:var(--muted); }
.thread-body { white-space:pre-wrap; line-height:1.5; }

/* Address Book */
.flex-between { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.inline-form { display:flex; gap:8px; align-items:center; }
.inline-form input { width:auto; }
.contacts-list { display:grid; gap:10px; margin-top:10px; }
.contact-row { display:flex; align-items:center; gap:10px; padding:10px; border:1px solid var(--line); border-radius:12px; background:#0c1320; }
.contact-fields { display:flex; gap:8px; flex:1; }
.contact-fields input { flex:1; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:720px) { .grid-2 { grid-template-columns:1fr; } }

/* ---------- Section header ---------- */
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-bottom:10px;
}
.section-title{ margin:0; }

/* ---------- Fancy inline form ---------- */
.inline-form.fancy{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  background: rgba(255,255,255,0.02);
  border:1px solid var(--line);
  padding:10px; border-radius:14px;
}

.input-group{
  position:relative; display:flex; align-items:center;
  background:#0c1320; border:1px solid var(--line); border-radius:12px; overflow:hidden;
}
.input-group:focus-within{ border-color:#2c4e84; box-shadow:0 0 0 3px rgba(77,163,255,.15); }

.input-group .input{
  border:0; outline:0; background:transparent; color:var(--text);
  padding:10px 12px; height:42px; min-width:220px;
}
.input-group .input::placeholder{ color:#7d8aa3; }

.input-addon{
  padding:0 10px; height:42px; display:inline-flex; align-items:center;
  color:#9fb3c8; background:rgba(255,255,255,0.03); border-right:1px solid var(--line);
  font-size:14px;
}
.hint{
  position:absolute; right:8px; bottom:4px; color:#7d8aa3; font-size:11px; pointer-events:none;
}

/* Buttons */
.btn.pill{ border-radius:999px; padding:10px 16px; }
.btn.primary{ background:linear-gradient(180deg,#2b6dde,#184a9c); border-color:#1f3f7a; }
.btn.primary:hover{ filter:brightness(1.05); }

/* ---------- Contacts list polish ---------- */
.contacts-list.pretty-list .contact-row{
  display:grid; grid-template-columns: 1fr auto; gap:10px;
  padding:12px; border:1px solid var(--line); border-radius:12px; background:#0c1320;
  transition: transform .06s ease, background .15s ease, border-color .15s ease;
}
.contacts-list.pretty-list .contact-row:hover{
  transform: translateY(-1px);
  background:#0f1827; border-color:#253146;
}

.contact-fields{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.contact-fields input{
  background:#0b1322; border:1px solid var(--line); color:var(--text);
  padding:10px 12px; border-radius:10px; height:40px;
}
.contact-fields input:disabled{ color:#9bb0c7; opacity:0.95; }

.contact-actions{ display:flex; gap:8px; align-items:center; }
.contact-actions .btn{ height:40px; }
.contact-actions .btn.ghost{ background:transparent; }

/* Small screens */
@media (max-width: 720px){
  .contact-fields{ grid-template-columns:1fr; }
  .input-group .input{ min-width:160px; }
}

/* Hide bullets for feature lists */
.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;              /* optional: makes them inline */
  flex-wrap: wrap;
  gap: 12px;
}

.feature-list li {
  list-style: none;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0c1320;
  display: flex;
  align-items: center;
  gap: 6px;
}

.card h1 { margin-bottom: 6px; }
.card h2 { margin-top: 18px; }
.card ul { margin: 8px 0 14px 18px; }
.card ul li { margin: 4px 0; }
.alert.success{ background:#0f2620; border:1px solid #1f6f57; color:#aaf0d1; padding:10px 14px; border-radius:12px; margin:12px 0; }

.policy-consent { margin: 8px 0 4px; }
.checkline {
  display: inline-flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: #0c1320;
}
.checkline input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 2px; accent-color: #2b6dde;
}
.checkline a { text-decoration: underline; }

/* ===== Header polish ===== */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: #0a0f18;               /* solid dark to remove any bright top line */
  border-bottom: 1px solid var(--line);
}

.site-header.glass {
  backdrop-filter: blur(6px);
  background: rgba(10,15,24,0.85);
}

.header-inner {
  height: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

.brand {
  font-weight: 700; font-size: 18px; letter-spacing: .2px;
  color: var(--link, #7fb3ff); text-decoration: none;
}
.brand:hover { opacity: .9; }

/* Right side user chip */
.user-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 10px; border: 1px solid var(--line);
  border-radius: 999px; background: #0c1320;
  line-height: 1; white-space: nowrap;
}

.user-pill .avatar {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #1a2233; border: 1px solid #263349; font-size: 12px;
  color: #a8c2e3; font-weight: 700;
}

.user-pill .user-id { color: var(--text, #dbe7ff); font-size: 14px; }
.user-pill .user-id .at { color: #8ea3c5; margin-left: 2px; }

.badge.admin {
  font-size: 12px; padding: 2px 8px; border-radius: 999px;
  background: #12220f; border: 1px solid #1f4e2a; color: #b7f5b7;
}

/* Small header auth buttons when logged out */
.auth-links { display:flex; align-items:center; gap:8px; }
.btn.small { padding: 6px 10px; font-size: 13px; }
.btn.ghost.small { background: transparent; }

/* Ensure no accidental top neon line from other styles */
body { border-top: 0 !important; }