/* app.css —— 主人控制台 + 登录页 */

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #2b2b2b;
  background: #FBF8F6;
  font-size: 14px;
  line-height: 1.55;
}

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* ============ Top bar ============ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  background: #FFF;
  border-bottom: 1px solid #EFE7E2;
}
.topbar h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.link-btn {
  background: transparent;
  border: none;
  color: #998A82;
  cursor: pointer;
  font-size: 13px;
}
.link-btn:hover { color: #2b2b2b; }

/* ============ Tabs ============ */
.tabs {
  display: flex;
  background: #FFF;
  border-bottom: 1px solid #EFE7E2;
  padding: 0 22px;
}
.tab {
  padding: 12px 18px;
  background: transparent;
  border: none;
  color: #8A7E78;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-size: 14px;
}
.tab:hover { color: #555; }
.tab-active {
  color: #2b2b2b;
  font-weight: 600;
  border-bottom-color: #E26077;
}

/* ============ Panels ============ */
.panel {
  max-width: 640px;
  margin: 24px auto;
  padding: 0 22px;
}
.panel.hidden { display: none; }

#write-text {
  width: 100%;
  padding: 14px;
  border: 1px solid #E2D7D1;
  border-radius: 12px;
  background: #FFF;
  resize: vertical;
  min-height: 130px;
  outline: none;
}
#write-text:focus { border-color: #E26077; }

.row {
  display: flex;
  align-items: center;
  margin-top: 12px;
  gap: 12px;
}
.row.right { justify-content: flex-end; }

#btn-send {
  padding: 8px 18px;
  background: #E26077;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
#btn-send:hover     { background: #D34A65; }
#btn-send:disabled  { background: #DDD; cursor: default; }

.status {
  font-size: 13px;
  color: #998A82;
}

/* ============ Inbox ============ */
.hint {
  font-size: 13px;
  color: #998A82;
  background: #FFF8F4;
  padding: 12px 14px;
  border-radius: 10px;
  border-left: 3px solid #E26077;
  margin-bottom: 16px;
}
.hint strong { color: #C8584F; }

.inbox-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mail-item {
  background: #FFF;
  border: 1px solid #EFE7E2;
  border-radius: 12px;
  padding: 12px 14px;
}
.mail-meta {
  font-size: 11.5px;
  color: #998A82;
  margin-bottom: 6px;
}
.mail-content {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14px;
  color: #2b2b2b;
}
.muted {
  color: #998A82;
  text-align: center;
  padding: 30px;
}
.err { color: #C8584F; }

/* ============ Login page ============ */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(180deg, #FFF3EE 0%, #FBF8F6 100%);
}
.login-card {
  width: 320px;
  padding: 30px 28px;
  background: #FFF;
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
  text-align: center;
}
.login-card h1 {
  margin: 0 0 6px 0;
  font-size: 22px;
}
.login-card .sub {
  margin: 0 0 22px 0;
  color: #998A82;
  font-size: 13px;
}
.login-card input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #E2D7D1;
  border-radius: 12px;
  outline: none;
  margin-bottom: 12px;
}
.login-card input:focus { border-color: #E26077; }
.login-card button {
  width: 100%;
  padding: 11px;
  background: #E26077;
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
}
.login-card button:hover { background: #D34A65; }
.login-card .err {
  margin-top: 10px;
  color: #C8584F;
  font-size: 13px;
  min-height: 18px;
}