:root{--border:#dfe5ee;--surface:#fff;--surface-alt:#f3f6fa;--muted:#7a8799;--text:#172033;--accent:#173b76}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f3f6fa;color:#172033}button,input{font:inherit}body{padding:22px}.mail-shell{width:min(1380px,100%);height:calc(100vh - 44px);min-height:650px;margin:auto;background:#fff;border:1px solid #dfe5ee;border-radius:18px;box-shadow:0 18px 55px rgba(25,42,70,.11);overflow:hidden}.mail-header{height:72px;border-bottom:1px solid #e7ebf1;display:flex;align-items:center;gap:24px;padding:0 24px}.brand{font-size:21px;font-weight:800;letter-spacing:-.4px;color:#172b4d;white-space:nowrap}.brand span{font-weight:500;color:#7a8799}.search{flex:1;max-width:650px;margin:auto}.search input{width:100%;height:42px;border:1px solid #dce3ec;border-radius:11px;padding:0 16px;background:#f7f9fc;color:#172033;outline:none}.search input:focus{border-color:#8ba8d5;background:#fff}.layout{display:grid;grid-template-columns:230px 1fr;height:calc(100% - 72px)}.sidebar{border-right:1px solid #e7ebf1;padding:22px 14px;background:#fbfcfe}.compose{width:100%;height:44px;border:0;border-radius:11px;background:#173b76;color:#fff;font-weight:700;cursor:pointer;box-shadow:0 6px 14px rgba(23,59,118,.18);margin-bottom:20px}.compose:hover{background:#102f61}.nav-item{display:flex;align-items:center;justify-content:space-between;padding:11px 12px;border-radius:9px;margin:3px 0;color:#58667a;font-size:14px;cursor:pointer}.nav-item:hover{background:#f0f4f9;color:#243a5d}.nav-item.active{background:#eaf1ff;color:#173b76;font-weight:700}.nav-item b{font-size:11px}.main{padding:28px 30px;overflow:auto}.main h2{margin:0;font-size:25px;letter-spacing:-.5px}.subtitle{margin-top:7px;color:#7a8799;font-size:13px}.empty{height:calc(100% - 82px);min-height:400px;margin-top:24px;border:1px dashed #d6dee9;border-radius:15px;display:flex;align-items:center;justify-content:center;text-align:center;background:#fcfdff;color:#78869a}.empty strong{display:block;color:#34445d;font-size:16px;margin-bottom:7px}.empty p{margin:0;font-size:13px}@media(max-width:760px){body{padding:0}.mail-shell{width:100%;height:100vh;min-height:100vh;border:0;border-radius:0}.mail-header{height:64px;padding:0 16px;gap:12px}.brand{font-size:18px}.search{display:none}.layout{height:calc(100% - 64px);grid-template-columns:1fr}.sidebar{display:none}.main{padding:22px 16px}.main h2{font-size:22px}.empty{min-height:420px;height:calc(100% - 70px)}}
.mail-toolbar{height:46px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #e7ebf1;margin-top:22px}.mail-toolbar button{width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:#68768a;font-size:18px;cursor:pointer}.mail-toolbar button:hover{background:#eef2f7;color:#173b76}.mail-toolbar span{flex:1}
.compose-modal{position:fixed;inset:0;background:rgba(15,27,45,.42);display:flex;align-items:flex-end;justify-content:flex-end;padding:24px;z-index:100}.compose-modal[hidden]{display:none}.compose-card{width:min(560px,100%);background:#fff;border-radius:14px;box-shadow:0 22px 70px rgba(10,25,45,.25);overflow:hidden;border:1px solid #dfe5ee}.compose-head{height:54px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;background:#f7f9fc;border-bottom:1px solid #e5eaf1}.compose-head strong{font-size:14px}.compose-head button{border:0;background:transparent;font-size:25px;color:#657389;cursor:pointer}.compose-card input,.compose-card textarea{display:block;width:100%;border:0;border-bottom:1px solid #e8edf3;padding:13px 16px;outline:0;color:#172033}.compose-card textarea{height:240px;resize:vertical;border-bottom:0}.compose-foot{display:flex;gap:10px;padding:12px 16px;border-top:1px solid #e5eaf1}.compose-foot button{border:0;border-radius:8px;padding:10px 18px;font-weight:700;cursor:pointer}.compose-foot button:first-child{background:#173b76;color:#fff}.compose-foot button:last-child{background:#eef2f7;color:#34445d}@media(max-width:600px){.compose-modal{padding:0}.compose-card{width:100%;border-radius:14px 14px 0 0}}
.mail-content{display:grid;grid-template-columns:minmax(320px,1fr) minmax(360px,1.15fr);flex:1;min-height:0;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface)}.message-list{border-right:1px solid var(--border);min-width:0}.list-head{height:56px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);font-size:14px}.list-head span{color:var(--muted);font-size:12px}.message-empty{height:calc(100% - 56px);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px}.reader{min-width:0;background:var(--surface)}.reader-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;color:var(--muted)}.reader-icon{width:52px;height:52px;border:1px solid var(--border);border-radius:50%;display:grid;place-items:center;margin-bottom:14px;font-size:22px;color:var(--accent)}.reader-empty h3{margin:0 0 7px;color:var(--text);font-size:16px}.reader-empty p{margin:0;font-size:13px}@media(max-width:760px){.mail-content{grid-template-columns:1fr}.reader{display:none}.message-list{border-right:0}.message-empty{min-height:260px}}
.compose-recipient-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.compose-recipient-row input{min-width:0}@media(max-width:600px){.compose-recipient-row{grid-template-columns:1fr}}
.attach-btn{display:inline-flex;align-items:center;justify-content:center;padding:9px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-size:12px;cursor:pointer}.attach-btn:hover{background:var(--surface-alt)}

.uc-mail-brand{display:flex;align-items:center;gap:.65rem}.uc-mail-brand-mark{width:38px;height:38px;flex:0 0 38px;display:inline-flex;align-items:center;justify-content:center}.uc-mail-brand-mark svg{width:100%;height:100%;display:block}.uc-mail-brand-mark rect{fill:#111827;stroke:#c9a227;stroke-width:2}.uc-mail-brand-mark path{fill:none;stroke:#fff;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}.uc-mail-brand-mark path:first-of-type{fill:#b30000;stroke:#fff;stroke-width:1.8}.uc-mail-brand-mark circle{fill:#c9a227;stroke:#111827;stroke-width:1.5}.uc-mail-brand-copy{display:flex;flex-direction:column;gap:.16rem}.uc-mail-brand-copy strong{color:#f5f7fa;font-size:.9rem;font-weight:900;letter-spacing:.07em}.uc-mail-brand-copy small{color:#c9a227;font-size:.52rem;font-weight:800;letter-spacing:.12em}

.mail-login{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at top right, rgba(201,162,39,.12), transparent 34%),
    linear-gradient(135deg,#0b1220 0%,#111827 52%,#0b1220 100%);
}

.mail-login-card{
  width:min(100%,460px);
  padding:36px;
  border:1px solid rgba(201,162,39,.28);
  border-radius:22px;
  background:rgba(17,24,39,.96);
  box-shadow:0 24px 70px rgba(0,0,0,.38);
}

.mail-login-brand{
  margin-bottom:30px;
}

.mail-login-heading{
  margin-bottom:24px;
}

.mail-login-eyebrow{
  margin:0 0 8px;
  color:#c9a227;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.mail-login-heading h1{
  margin:0 0 10px;
  color:#fff;
  font-size:clamp(1.7rem,5vw,2.2rem);
  line-height:1.1;
}

.mail-login-heading p:last-child{
  margin:0;
  color:#aeb7c5;
  line-height:1.6;
}

.mail-login-field{
  display:block;
  margin-bottom:18px;
}

.mail-login-field>span{
  display:block;
  margin-bottom:8px;
  color:#e5e7eb;
  font-size:.85rem;
  font-weight:700;
}

.mail-login-field input{
  width:100%;
  box-sizing:border-box;
  padding:13px 14px;
  border:1px solid #374151;
  border-radius:11px;
  background:#0b1220;
  color:#fff;
  outline:none;
  font:inherit;
}

.mail-login-field input::placeholder{
  color:#687386;
}

.mail-login-field input:focus{
  border-color:#c9a227;
  box-shadow:0 0 0 3px rgba(201,162,39,.12);
}

.mail-login-password{
  position:relative;
}

.mail-login-password input{
  padding-right:76px;
}

.mail-login-password button{
  position:absolute;
  top:50%;
  right:8px;
  transform:translateY(-50%);
  border:0;
  background:transparent;
  color:#c9a227;
  font-size:.7rem;
  font-weight:900;
  cursor:pointer;
}

.mail-login-submit{
  width:100%;
  margin-top:4px;
  padding:14px 18px;
  border:0;
  border-radius:11px;
  background:#c9a227;
  color:#111827;
  font-weight:900;
  cursor:pointer;
  transition:transform .15s ease,filter .15s ease;
}

.mail-login-submit:hover{
  filter:brightness(1.08);
  transform:translateY(-1px);
}

.mail-login-submit:disabled{
  opacity:.65;
  cursor:wait;
  transform:none;
}

.mail-login-status{
  min-height:22px;
  margin-top:14px;
  color:#aeb7c5;
  font-size:.82rem;
  line-height:1.5;
}

.mail-login-status.error{
  color:#ff8b8b;
}

.mail-login-status.success{
  color:#8fe0ad;
}

.mail-login-security{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
  color:#8f9aaa;
  font-size:.75rem;
}

.mail-login-security span{
  color:#8fe0ad;
}

@media(max-width:520px){
  .mail-login{
    padding:16px;
  }

  .mail-login-card{
    padding:26px 20px;
    border-radius:18px;
  }
}

[hidden]{display:none !important}
.reader-thread{
  height:100%;
  overflow:auto;
  background:var(--surface);
}

.reader-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
  border-bottom:1px solid var(--border);
}

.reader-heading{
  min-width:0;
}

.reader-heading h3{
  margin:0 0 5px;
  color:var(--text);
  font-size:17px;
  line-height:1.3;
}

.reader-heading span{
  color:var(--muted);
  font-size:12px;
}

.reader-actions{
  display:flex;
  gap:8px;
  flex-shrink:0;
}

.reader-action{
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--accent);
  padding:8px 13px;
  font-weight:700;
  cursor:pointer;
}

.reader-action:hover{
  background:var(--surface-alt);
}

.thread-message{
  margin:16px 18px;
  padding:17px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
}

.thread-message.selected{
  box-shadow:0 5px 18px rgba(25,42,70,.06);
}

.thread-meta{
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin-bottom:7px;
}

.thread-sender{
  min-width:0;
  color:var(--text);
  font-size:13px;
  font-weight:700;
  overflow-wrap:anywhere;
}

.thread-meta time{
  flex-shrink:0;
  color:var(--muted);
  font-size:11px;
}

.thread-recipients{
  margin-bottom:14px;
  color:var(--muted);
  font-size:11px;
  overflow-wrap:anywhere;
}

.reader-body{
  color:#303b4d;
  font-size:14px;
  line-height:1.7;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.reader-body p{
  margin:0;
}

.reader-attachments{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid #edf0f4;
}

.reader-attachment{
  display:inline-flex;
  align-items:center;
  padding:6px 9px;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--surface-alt);
  color:#46546a;
  font-size:11px;
}

@media(max-width:760px){
  .mail-content.reader-open .message-list{
    display:none;
  }

  .mail-content.reader-open .reader{
    display:block;
  }

  .reader-head{
    padding:15px;
  }

  .thread-message{
    margin:12px;
    padding:14px;
  }

  .thread-meta{
    flex-direction:column;
    gap:4px;
  }
}


/* MAILBOX ACTION CONTROLS */
.message-row-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  border-bottom: 1px solid #e7ebf1;
}

.message-row-wrap .message-row {
  min-width: 0;
  width: 100%;
}

.message-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 8px 10px 8px 0;
  flex-shrink: 0;
}

.message-action {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #718096;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  transition:
    background-color .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .15s ease;
}

.message-action:hover {
  background: #f3f6fa;
  border-color: #dbe2ea;
  color: #173b76;
}

.message-action:focus-visible {
  outline: 2px solid #173b76;
  outline-offset: 2px;
}

.message-action:active {
  transform: scale(.95);
}

.message-action-danger:hover {
  background: #fff2f2;
  border-color: #f3c7c7;
  color: #b42318;
}

.message-action[disabled] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

.message-row-wrap .message-row.unread {
  font-weight: 600;
}

.message-row-wrap .message-row.unread + .message-row-actions {
  background: rgba(23, 59, 118, .025);
}

.message-star {
  color: #8a96a8;
}

.message-star.is-starred,
.message-action[aria-pressed="true"] {
  color: #b7791f;
}

.message-star.is-starred:hover,
.message-action[aria-pressed="true"]:hover {
  color: #9c5f08;
  background: #fff8e8;
  border-color: #f1dfb5;
}

/* Keep mailbox controls usable on narrow screens. */
@media (max-width: 900px) {
  .message-row-wrap {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .message-row-actions {
    gap: 2px;
    padding-right: 6px;
  }

  .message-action {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }
}

@media (max-width: 600px) {
  .message-row-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .message-row-actions {
    justify-content: flex-end;
    padding: 0 10px 8px;
  }

  .message-action {
    width: 34px;
    height: 30px;
  }
}