:root { color-scheme: light; font-family: Arial, "Microsoft JhengHei", sans-serif; }
body { margin: 0; background: #f6f7fb; color: #172033; }
a { color: #2058c9; text-decoration: none; }
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-panel { width: min(420px, 100%); background: white; border: 1px solid #dde2ee; border-radius: 8px; padding: 28px; box-shadow: 0 16px 40px rgba(23, 32, 51, .10); }
.eyebrow { margin: 0 0 8px; color: #68748a; font-size: 13px; }
h1 { margin: 0 0 24px; font-size: 30px; }
.stack { display: grid; gap: 14px; }
label { display: grid; gap: 6px; font-weight: 700; }
input { border: 1px solid #c8cfdd; border-radius: 6px; padding: 12px; font: inherit; }
button { border: 0; border-radius: 6px; background: #143f8f; color: white; padding: 11px 16px; font: inherit; font-weight: 700; cursor: pointer; }
.hint { color: #68748a; font-size: 13px; line-height: 1.6; }
.topbar { height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 22px; background: white; border-bottom: 1px solid #dde2ee; }
.topbar nav { display: flex; align-items: center; gap: 14px; }
.topbar form { margin: 0; }
.topbar button { padding: 8px 12px; background: #5b6373; }
.chat-layout { height: calc(100vh - 59px); display: grid; grid-template-rows: 1fr auto; }
.messages { overflow: auto; padding: 22px; display: grid; gap: 12px; align-content: start; }
.message { background: white; border: 1px solid #dde2ee; border-radius: 8px; padding: 12px 14px; }
.meta { color: #68748a; font-size: 12px; margin-bottom: 6px; }
.composer { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 16px 22px; background: white; border-top: 1px solid #dde2ee; }
@media (max-width: 640px) {
  .topbar { height: auto; align-items: flex-start; flex-direction: column; padding: 14px; }
  .topbar nav { flex-wrap: wrap; }
  .chat-layout { height: calc(100vh - 109px); }
}