:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #050915;
  color: #edf4ff;
  --bg: #050915;
  --panel: rgba(10, 18, 32, .84);
  --panel-strong: rgba(14, 25, 43, .94);
  --line: rgba(255, 255, 255, .11);
  --line-strong: rgba(159, 209, 255, .25);
  --text: #edf4ff;
  --muted: #9fb0c8;
  --soft: #c9d9ef;
  --accent: #8fd8ff;
  --accent-2: #9b8cff;
  --success: #79f2c0;
  --warning: #ffd38a;
  --danger: #ff9aa7;
  --shadow: 0 24px 80px rgba(0, 0, 0, .42);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 6%, rgba(143, 216, 255, .22), transparent 28rem),
    radial-gradient(circle at 92% 8%, rgba(155, 140, 255, .20), transparent 30rem),
    linear-gradient(135deg, #050915 0%, #08111f 48%, #030711 100%);
  color: var(--text);
}

button, input, select, textarea { font: inherit; }
button { transition: transform .18s ease, border-color .18s ease, background .18s ease; }
button:hover { transform: translateY(-1px); }
a { color: inherit; text-decoration: none; }

.auth-page, .mail-placeholder {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
}

.hero-panel, .auth-card {
  width: min(100%, 720px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 2rem;
  backdrop-filter: blur(18px);
}

.auth-page {
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 1.5rem;
}

.brand-mark {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-weight: 900;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #06111f;
  box-shadow: 0 18px 48px rgba(143, 216, 255, .20);
}

.brand-mark.small { width: 36px; height: 36px; border-radius: 12px; }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 800; margin: 0 0 .5rem; }
h1 { font-size: clamp(2rem, 5vw, 4rem); line-height: 1; margin: .5rem 0 1rem; letter-spacing: -.05em; }
h2 { font-size: 1.35rem; margin: .25rem 0 .75rem; letter-spacing: -.025em; }
h3 { margin: .25rem 0 .6rem; }
.hero-copy, .muted { color: var(--muted); line-height: 1.6; }

.rail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: 1.5rem; }
.rail-grid article { padding: 1rem; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.05); }
.rail-grid span { color: var(--accent); font-weight: 800; }
.rail-grid p { color: var(--muted); }

.auth-form { display: grid; gap: 1rem; margin-top: 1.5rem; }
label { display: grid; gap: .45rem; color: #dbeafe; font-weight: 650; }
input, select, textarea {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  color: white;
  padding: .9rem 1rem;
}
textarea { resize: vertical; min-height: 110px; }
select option { color: #07101f; }
button, .button-link {
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), #d9ecff);
  color: #07101f;
  padding: .95rem 1.1rem;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
}
.ghost-button {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .06);
  color: var(--text);
}
.mini-button { padding: .55rem .75rem; border-radius: 999px; font-size: .82rem; }
.full-button { width: 100%; }
.auth-actions { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; color: #bfdbfe; font-weight: 700; }
.session-note { margin-top: 1rem; padding: 1rem; border-radius: 16px; background: rgba(147,197,253,.1); color: #cfe5ff; line-height: 1.5; }

.connect-body { overflow: hidden; }
.connect-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  position: relative;
}
.connect-rail {
  border-right: 1px solid var(--line);
  background: rgba(4, 9, 18, .72);
  backdrop-filter: blur(22px);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mail-only-rail { overflow-y: auto; }
.brand-stack { display: flex; gap: .85rem; align-items: center; margin-bottom: .5rem; }
.brand-stack strong { display: block; letter-spacing: -.02em; }
.brand-stack span { color: var(--muted); font-size: .82rem; }
.compose-rail-button { width: 100%; justify-content: center; }
.mail-folder-nav { display: grid; gap: .35rem; }
.mail-folder-nav a {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .78rem .85rem;
  border-radius: 16px;
  color: var(--soft);
  border: 1px solid transparent;
}
.mail-folder-nav a.active, .mail-folder-nav a:hover {
  color: var(--text);
  border-color: var(--line-strong);
  background: linear-gradient(135deg, rgba(143,216,255,.14), rgba(155,140,255,.09));
}
.mail-folder-nav strong { color: var(--accent); font-size: .82rem; }
.rail-card {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.055);
  border-radius: 22px;
  padding: 1rem;
  color: var(--muted);
  line-height: 1.5;
}
.rail-card h3 { color: var(--text); }
.rail-card.compact strong { display: block; color: var(--warning); margin-bottom: .35rem; }
.rail-card.compact span { font-size: .88rem; }

.connect-main {
  min-width: 0;
  height: 100vh;
  overflow: auto;
  padding: 1.25rem 1.25rem 5rem;
}
.top-command {
  border: 1px solid var(--line);
  border-radius: 26px;
  background: rgba(255,255,255,.055);
  box-shadow: var(--shadow);
  padding: 1rem;
  backdrop-filter: blur(18px);
}
.stacked-command-tray {
  display: grid;
  gap: .8rem;
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(155,140,255,.13));
}
.compact-command-tray { box-shadow: 0 18px 60px rgba(0,0,0,.28); }
.message-context-strip {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}
.message-context-strip h2 { margin: 0; font-size: 1.45rem; }
.message-context-strip p:not(.eyebrow) { color: var(--muted); margin: .35rem 0 0; }
.command-actions { display: flex; gap: .55rem; flex-wrap: wrap; }
.command-dock-wide { max-width: none; }
.grouped-command-dock { align-items: stretch; }
.command-dock-wide button { padding: .72rem .85rem; }
.command-menu-button {
  min-width: 150px;
  flex: 1 1 150px;
  position: relative;
  border-radius: 14px;
  display: grid;
  align-content: stretch;
}
details.command-menu-button { padding: 0; }
.command-menu-button summary {
  list-style: none;
  min-height: 100%;
  cursor: pointer;
  display: grid;
  justify-items: start;
  align-content: center;
  gap: .18rem;
  text-align: left;
  padding: .72rem .85rem;
}
.command-menu-button summary::-webkit-details-marker { display: none; }
.command-menu-button strong { line-height: 1.1; }
.command-menu-button span {
  color: rgba(7, 17, 31, .78);
  font-size: .72rem;
  font-weight: 800;
}
.command-menu-button.ghost-button span { color: var(--muted); }
.primary-command { flex: 1.3 1 180px; }
.command-popover {
  position: absolute;
  z-index: 30;
  top: calc(100% + .5rem);
  left: 0;
  width: min(320px, 80vw);
  display: grid;
  gap: .55rem;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: rgba(7, 13, 25, .98);
  box-shadow: var(--shadow);
  color: var(--soft);
  padding: .85rem;
}
.command-popover p { margin: 0; color: var(--soft); line-height: 1.45; }
.popover-actions, .app-menu-grid, .reply-actions, .reader-action-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.app-menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.layout-mode-bar {
  display: flex;
  gap: .55rem;
  margin: .9rem 0;
  overflow-x: auto;
}
.layout-mode-bar button {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.055);
  color: var(--text);
  padding: .68rem .95rem;
  border-radius: 999px;
  white-space: nowrap;
}
.layout-mode-bar button.active {
  background: linear-gradient(135deg, var(--accent), #d9ecff);
  color: #07101f;
}
.mail-workspace {
  display: grid;
  grid-template-columns: minmax(340px, .9fr) minmax(560px, 1.7fr);
  gap: 1rem;
  align-items: start;
}
.clean-mail-workspace { margin-top: .6rem; }
.mail-list-panel, .mail-reader-panel {
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--panel);
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
  padding: 1rem;
}
.open-mail-list, .mail-reader-panel { min-height: calc(100vh - 260px); }
.clean-reader-panel { display: grid; align-content: start; }
.focus-layout { grid-template-columns: minmax(0, 1fr); }
.focus-layout .mail-list-panel { display: none; }
.triage-layout { grid-template-columns: minmax(300px, .7fr) minmax(520px, 1.4fr); }
.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: .85rem;
}
.panel-head h2 { margin: 0; }
.message-card {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 1rem;
  background: rgba(255,255,255,.045);
  margin-bottom: .75rem;
  color: var(--muted);
  cursor: pointer;
}
.message-card.selected {
  border-color: var(--line-strong);
  background: linear-gradient(135deg, rgba(143,216,255,.12), rgba(255,255,255,.045));
}
.message-topline { display: flex; justify-content: space-between; gap: .75rem; color: var(--text); }
.message-topline span { color: var(--muted); font-size: .86rem; }
.message-tags, .thread-signal-strip { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .8rem; }
.message-tags span, .receipt-pill, .thread-signal-strip span {
  border: 1px solid rgba(143,216,255,.22);
  background: rgba(143,216,255,.10);
  color: #cfeeff;
  border-radius: 999px;
  padding: .38rem .55rem;
  font-size: .75rem;
  font-weight: 750;
}
.danger-tags span {
  border-color: rgba(255,154,167,.32);
  background: rgba(255,154,167,.10);
  color: #ffd2d8;
}
.reader-message-card { display: grid; gap: 1rem; }
.reader-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .9rem;
  align-items: start;
}
.sender-avatar {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #07101f;
}
.reader-title-stack h2 { margin: 0 0 .35rem; }
.reader-title-stack p { margin: .2rem 0; color: var(--muted); }
.reader-title-stack strong { color: var(--text); }
.reader-header-actions { display: flex; gap: .45rem; }
.icon-button { padding: .55rem .7rem; border-radius: 999px; font-size: .75rem; }
.reader-action-row { padding-bottom: .25rem; }
.reader-action-row button { border-radius: 999px; padding: .65rem .9rem; }
.email-body-card {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 1.25rem;
  background: rgba(255,255,255,.048);
  color: var(--soft);
  line-height: 1.7;
}
.clean-email-body {
  min-height: 180px;
  font-size: 1.05rem;
}
.reply-box {
  display: grid;
  gap: .7rem;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 1rem;
  background: rgba(255,255,255,.04);
}
.reply-box label { color: var(--accent); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; }
.command-sidecar {
  position: fixed;
  top: 1rem;
  right: 1rem;
  bottom: 1rem;
  width: min(410px, calc(100vw - 2rem));
  z-index: 60;
  transform: translateX(calc(100% + 2rem));
  transition: transform .22s ease;
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  background: rgba(7, 13, 25, .96);
  box-shadow: var(--shadow);
  backdrop-filter: blur(22px);
  padding: 1rem;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: .8rem;
}
.command-sidecar.open { transform: translateX(0); }
.sidecar-head { display: flex; justify-content: space-between; gap: 1rem; align-items: start; border-bottom: 1px solid var(--line); padding-bottom: .8rem; }
.sidecar-head h3 { margin: 0; }
.sidecar-body { color: var(--soft); line-height: 1.55; overflow: auto; }
.sidecar-body p { margin-top: 0; }
.receipt-list, .connect-room-preview {
  display: grid;
  gap: .5rem;
  margin-top: .75rem;
}
.receipt-list span, .connect-room-preview span, .connect-room-preview strong {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .7rem;
  background: rgba(255,255,255,.055);
}
.toast-stack {
  position: fixed;
  right: 1rem;
  bottom: 5.5rem;
  z-index: 80;
  display: grid;
  gap: .55rem;
  width: min(340px, calc(100vw - 2rem));
}
.toast {
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: rgba(7, 13, 25, .94);
  color: var(--soft);
  padding: .8rem .9rem;
  box-shadow: 0 14px 42px rgba(0,0,0,.32);
}
.connect-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  border-radius: 999px;
  padding: 1rem 1.25rem;
  box-shadow: 0 18px 60px rgba(143,216,255,.25);
  z-index: 20;
}

@media (max-width: 1280px) {
  .mail-workspace { grid-template-columns: 1fr; }
}

@media (max-width: 1180px) {
  .connect-shell { grid-template-columns: 1fr; }
  .connect-rail { position: static; border-right: 0; border-bottom: 1px solid var(--line); }
  .mail-folder-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .connect-main { height: auto; overflow: visible; }
}

@media (max-width: 900px) {
  .auth-page { grid-template-columns: 1fr; }
  .rail-grid { grid-template-columns: 1fr; }
  .message-context-strip, .reader-header { grid-template-columns: 1fr; flex-direction: column; }
  .mail-folder-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .auth-page, .connect-main, .connect-rail { padding: .85rem; }
  .hero-panel, .auth-card, .top-command, .mail-list-panel, .mail-reader-panel { border-radius: 22px; }
  .mail-folder-nav { grid-template-columns: 1fr; }
  .command-actions button, .layout-mode-bar button { width: 100%; }
  .layout-mode-bar { flex-direction: column; }
}