* { box-sizing: border-box; font-family: 'Noto Sans TC', sans-serif; }
body { margin:0; background:#0b0b0f; color:#f5f7fb; }
header { background:#111; border-bottom:1px solid #222; padding:12px 20px; }
.header-inner { display:flex; align-items:center; justify-content:space-between; }
.logo-img { width:48px; height:48px; border-radius:8px; }
h1,h2 { margin:8px 0; letter-spacing:.05em; }
footer { text-align:center; color:#999; padding:20px; border-top:1px solid #222; }

main { max-width:800px; margin:30px auto; padding:0 20px; }
.card { background:#14141a; border:1px solid #23232b; border-radius:14px; padding:20px; box-shadow:0 8px 20px rgba(0,0,0,.2); }
.center { text-align:center; margin:auto; max-width:400px; }
.form input { width:100%; padding:12px 14px; border-radius:10px; border:1px solid #333; margin:8px 0; background:#0e0e13; color:#fff; }
.btn { padding:10px 16px; border-radius:10px; border:1px solid #7a9bff; background:linear-gradient(180deg,#4f7cff,#7a9bff); color:#fff; cursor:pointer; }
.btn.ghost { background:transparent; border-color:#555; color:#ccc; }
.btn.small { padding:6px 10px; font-size:14px; }
.row { display:flex; justify-content:center; gap:12px; }
.msg { min-height:20px; margin-top:8px; color:#9cf; }
.marquee { background:#ff5d5d; color:white; padding:10px; display:none; font-weight:700; }
.user-row { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #333; padding:8px 0; }
.muted { color:#888; }