:root {
  --bg: #070a12;
  --panel: #0d121e;
  --panel-2: #111827;
  --line: rgba(255,255,255,.085);
  --line-strong: rgba(255,255,255,.13);

  --text: #f4f6fb;
  --muted: #7f8aa0;
  --muted-2: #5e697d;

  --accent: #7b61ff;
  --accent-2: #3dd8c4;

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


* {
  box-sizing: border-box;
}


html {
  background: var(--bg);
}


body {
  margin: 0;

  min-height: 100vh;

  background:
    radial-gradient(
      900px 420px at 50% -180px,
      rgba(102,82,255,.18),
      transparent 68%
    ),
    linear-gradient(
      180deg,
      #090c15 0%,
      #070a11 100%
    );

  color: var(--text);

  overflow-x: hidden;
}


button,
input {
  font: inherit;
}


button {
  cursor: pointer;
}


/* =========================
   AMBIENT
========================= */

.ambient {
  position: fixed;

  width: 420px;
  height: 420px;

  border-radius: 50%;

  filter: blur(120px);

  opacity: .12;

  pointer-events: none;
}


.ambient-a {
  background: #7658ff;

  left: -280px;
  top: 170px;
}


.ambient-b {
  background: #18cbb7;

  right: -300px;
  bottom: -80px;
}


/* =========================
   HEADER
========================= */

.topbar {
  height: 68px;

  border-bottom: 1px solid var(--line);

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding:
    0
    max(22px, calc((100% - 900px) / 2));

  background:
    rgba(7,10,18,.72);

  backdrop-filter: blur(18px);

  position: relative;

  z-index: 2;
}


.brand {
  display: flex;

  align-items: center;

  gap: 10px;

  text-decoration: none;

  color: var(--text);
}


.brand-mark {
  width: 34px;
  height: 34px;

  border-radius: 10px;

  display: grid;

  place-items: center;

  background:
    linear-gradient(
      135deg,
      #775cff,
      #38d7c3
    );

  font-size: 15px;

  font-weight: 800;

  box-shadow:
    0 8px 24px rgba(92,74,230,.2);
}


.brand-name {
  font-size: 14px;

  font-weight: 700;

  letter-spacing: -.02em;
}


.brand-name strong {
  color: #8792a8;

  font-weight: 500;
}


.system-status {
  font-size: 11px;

  color: #7e899e;

  display: flex;

  align-items: center;

  gap: 7px;
}


.system-status i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #35d29b;

  box-shadow:
    0 0 12px rgba(53,210,155,.8);
}


/* =========================
   LAYOUT
========================= */

.container {
  width: min(
    900px,
    calc(100% - 36px)
  );

  margin: 0 auto;

  padding:
    42px
    0
    34px;
}


.workspace {
  max-width: 790px;

  margin: 0 auto;
}


/* =========================
   MAIL CARD
========================= */

.mail-card {
  padding: 22px;

  border:
    1px solid var(--line);

  background:
    linear-gradient(
      150deg,
      rgba(17,24,39,.94),
      rgba(10,14,23,.96)
    );

  border-radius: 20px;

  box-shadow:
    0 25px 70px rgba(0,0,0,.28),
    inset 0 1px rgba(255,255,255,.035);
}


.card-topline {
  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 13px;
}


.card-kicker,
.mail-label {
  font-size: 10px;

  letter-spacing: .15em;

  font-weight: 800;

  color: #6f7b91;
}


.privacy-badge {
  font-size: 10px;

  color: #9ca7ba;

  border:
    1px solid var(--line);

  padding:
    6px
    9px;

  border-radius: 999px;

  background:
    rgba(255,255,255,.025);
}


.privacy-badge span {
  color: #35d29b;

  margin-right: 4px;
}


/* =========================
   EMAIL
========================= */

.address-row {
  display: flex;

  align-items: center;

  gap: 10px;
}


.email-address {
  font-size:
    clamp(19px, 3vw, 28px);

  font-weight: 700;

  letter-spacing: -.035em;

  line-height: 1.2;

  word-break: break-all;

  flex: 1;
}


.icon-btn {
  width: 42px;
  height: 42px;

  flex: none;

  border:
    1px solid var(--line-strong);

  border-radius: 11px;

  background:
    rgba(255,255,255,.035);

  color: #dce2ed;

  font-size: 19px;
}


.icon-btn:hover,
.small-btn:hover {
  background:
    rgba(255,255,255,.075);

  border-color:
    rgba(255,255,255,.18);
}


/* =========================
   TIMER
========================= */

.timer-row {
  margin-top: 18px;
}


.timer-track {
  height: 4px;

  border-radius: 99px;

  background: #1c2434;

  overflow: hidden;
}


.timer-track div {
  height: 100%;

  width: 100%;

  background:
    linear-gradient(
      90deg,
      var(--accent),
      var(--accent-2)
    );

  border-radius: 99px;

  transition:
    width 1s linear;
}


.mail-meta {
  display: flex;

  justify-content: space-between;

  gap: 12px;

  margin-top: 8px;

  color: #707c91;

  font-size: 11px;
}


/* =========================
   CUSTOM EMAIL
========================= */

.custom-box {
  margin-top: 21px;

  padding: 15px;

  border:
    1px solid rgba(124,92,255,.18);

  background:
    rgba(124,92,255,.035);

  border-radius: 14px;
}


.custom-head {
  margin-bottom: 10px;
}


.custom-note {
  font-size: 11px;

  color: #69758b;

  margin-top: 4px;
}


.custom-row {
  display: flex;

  align-items: center;

  gap: 8px;
}


.custom-row input {
  height: 41px;

  min-width: 0;

  flex: 1;

  padding:
    0
    11px;

  border:
    1px solid var(--line);

  border-radius: 9px;

  background: #080c14;

  color: #fff;

  outline: none;

  font-size: 13px;
}


.custom-row input::placeholder {
  color: #4f5a6d;
}


.custom-row input:focus {
  border-color:
    rgba(124,92,255,.75);

  box-shadow:
    0 0 0 3px
    rgba(124,92,255,.08);
}


.custom-row > span {
  font-size: 11px;

  color: #7d899e;

  white-space: nowrap;
}


.claim {
  height: 41px;

  padding:
    0
    16px;

  border: 0;

  border-radius: 9px;

  background: #f3f5fa;

  color: #080b13;

  font-weight: 800;

  font-size: 12px;
}


.claim:hover {
  background: #fff;
}


/* =========================
   ACTIONS
========================= */

.actions {
  display: flex;

  gap: 9px;

  margin-top: 14px;
}


.actions button {
  height: 45px;

  flex: 1;

  border-radius: 11px;

  font-size: 12px;

  font-weight: 700;

  transition:
    .15s ease;
}


.actions button:disabled,
.small-btn:disabled {
  opacity: .55;

  cursor: wait;
}


.primary {
  border: 0;

  color: #fff;

  background:
    linear-gradient(
      135deg,
      #7358f7,
      #6248e5
    );

  box-shadow:
    0 8px 25px
    rgba(100,76,226,.18);
}


.primary:hover {
  filter: brightness(1.07);
}


.secondary {
  border:
    1px solid var(--line);

  background:
    rgba(255,255,255,.025);

  color: #d5dbea;
}


.secondary:hover {
  background:
    rgba(255,255,255,.055);
}


/* =========================
   INBOX
========================= */

.inbox-section {
  margin-top: 54px;
}


.section-head {
  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  margin-bottom: 13px;
}


.eyebrow {
  font-size: 10px;

  letter-spacing: .18em;

  font-weight: 800;

  color: #68758d;
}


.section-head h2 {
  font-size: 23px;

  letter-spacing: -.04em;

  margin:
    7px
    0
    0;
}


.small-btn {
  border:
    1px solid var(--line);

  background:
    rgba(255,255,255,.025);

  color: #bfc7d6;

  border-radius: 10px;

  padding:
    8px
    11px;

  font-size: 11px;
}


/* =========================
   EMPTY
========================= */

.empty {
  padding:
    48px
    20px;

  text-align: center;

  border:
    1px dashed
    rgba(255,255,255,.09);

  border-radius: 15px;

  background:
    rgba(255,255,255,.012);

  color: var(--muted);
}


.empty-icon {
  width: 40px;
  height: 40px;

  border-radius: 12px;

  display: grid;

  place-items: center;

  margin:
    0
    auto
    11px;

  border:
    1px solid var(--line);

  background:
    rgba(255,255,255,.025);

  font-size: 19px;

  color: #7d89a0;
}


.empty h3 {
  margin:
    0
    0
    6px;

  color: #cfd6e3;

  font-size: 14px;
}


.empty p {
  margin: 0;

  font-size: 11px;
}


/* =========================
   MESSAGE LIST
========================= */

.message-list {
  display: grid;

  gap: 8px;
}


.message {
  display: flex;

  align-items: center;

  gap: 13px;

  padding: 14px;

  border:
    1px solid var(--line);

  background:
    rgba(13,18,30,.86);

  border-radius: 13px;

  cursor: pointer;

  transition: .16s;
}


.message:hover {
  transform:
    translateY(-1px);

  border-color:
    rgba(124,92,255,.38);

  background:
    #101726;
}


.avatar {
  width: 38px;
  height: 38px;

  border-radius: 11px;

  display: grid;

  place-items: center;

  background:
    rgba(124,92,255,.11);

  color: #a89cff;

  font-weight: 800;

  flex: none;
}


.msg-main {
  min-width: 0;

  flex: 1;
}


.msg-top {
  display: flex;

  justify-content: space-between;

  gap: 10px;
}


.msg-sender {
  font-size: 12px;

  font-weight: 700;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.msg-time {
  font-size: 10px;

  color: #68748a;

  white-space: nowrap;
}


.msg-subject {
  margin-top: 4px;

  font-size: 12px;

  color: #8f9ab0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================
   FOOTER
========================= */

.utility-row {
  display: flex;

  justify-content: center;

  gap: 8px;

  margin:
    28px
    0
    0;

  color: #4f5b70;

  font-size: 10px;
}


/* =========================
   TOAST
========================= */

.toast {
  position: fixed;

  left: 50%;

  bottom: 24px;

  transform:
    translate(-50%, 18px);

  background:
    #121a2a;

  border:
    1px solid var(--line-strong);

  padding:
    10px
    14px;

  border-radius: 10px;

  font-size: 11px;

  color: #e2e7f0;

  opacity: 0;

  pointer-events: none;

  transition: .2s;

  z-index: 20;

  box-shadow:
    0 14px 35px
    rgba(0,0,0,.35);
}


.toast.show {
  opacity: 1;

  transform:
    translate(-50%, 0);
}


/* =========================
   MODAL
========================= */

.modal {
  position: fixed;

  inset: 0;

  z-index: 10;
}


.hidden {
  display: none !important;
}


.modal-backdrop {
  position: absolute;

  inset: 0;

  background:
    rgba(0,0,0,.72);

  backdrop-filter:
    blur(8px);
}


.reader {
  position: relative;

  z-index: 2;

  width:
    min(
      820px,
      calc(100% - 28px)
    );

  max-height: 88vh;

  overflow: auto;

  margin: 6vh auto;

  background: #0d1422;

  border:
    1px solid var(--line);

  border-radius: 18px;

  box-shadow:
    0 40px 100px #000;

  padding: 25px;
}


.close {
  position: absolute;

  right: 16px;

  top: 16px;

  width: 34px;
  height: 34px;

  border:
    1px solid var(--line);

  background:
    rgba(255,255,255,.04);

  color: #dce2ed;

  border-radius: 10px;

  font-size: 22px;
}


.reader-head {
  display: flex;

  gap: 12px;

  align-items: center;

  padding-right: 38px;
}


.reader-head h3 {
  margin:
    0
    0
    4px;

  font-size: 19px;
}


.muted {
  font-size: 11px;

  color: var(--muted);
}


.reader-meta {
  font-size: 10px;

  color: #69758c;

  border-bottom:
    1px solid var(--line);

  padding:
    15px
    0;
}


.reader-body {
  padding-top: 20px;

  line-height: 1.7;

  font-size: 13px;

  color: #dbe1ed;
}


.reader-body pre {
  white-space: pre-wrap;

  font-family: inherit;
}


.reader-body iframe {
  width: 100%;

  min-height: 480px;

  border:
    1px solid var(--line);

  border-radius: 11px;

  background: #fff;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 650px) {

  .container {
    width:
      calc(100% - 24px);

    padding:
      28px
      0
      25px;
  }


  .topbar {
    padding:
      0
      14px;
  }


  .system-status {
    display: none;
  }


  .mail-card {
    padding: 17px;

    border-radius: 17px;
  }


  .custom-row {
    flex-wrap: wrap;
  }


  .custom-row input {
    width: 100%;

    flex-basis: 100%;
  }


  .custom-row > span {
    flex: 1;
  }


  .actions {
    flex-direction: column;
  }


  .message {
    padding: 12px;
  }


  .msg-time {
    display: none;
  }


  .utility-row {
    flex-wrap: wrap;
  }

}