* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans TC", sans-serif;
  background: #f4f6f8;
  color: #20242a;
}
.home, .page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 28px 16px;
}
.card, .chat-shell {
  width: 100%;
  max-width: 480px;
  background: white;
  border-radius: 20px;
  padding: 28px 20px;
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
}
h1 { text-align: center; margin: 8px 0; font-size: 32px; }
.subtitle { text-align: center; color: #68707a; margin: 0 0 28px; }
.choice {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  border: 1px solid #e3e7eb;
  border-radius: 16px;
  padding: 20px;
  margin: 14px 0;
}
.choice:active { transform: scale(.99); }
.icon { font-size: 34px; }
.choice strong { display: block; font-size: 20px; }
.choice small { display: block; color: #737b84; margin-top: 5px; }
.topbar { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.back { text-decoration: none; font-size: 24px; color: #20242a; }
.topbar h2 { margin: 0; }
.message {
  background: #f0f2f4;
  border-radius: 14px;
  padding: 14px;
  margin: 12px 0;
}
.input-row { display: flex; gap: 8px; margin-top: 28px; }
.input-row input {
  flex: 1; min-width: 0; padding: 13px; border: 1px solid #d7dce1; border-radius: 12px;
}
button {
  border: 0; border-radius: 12px; padding: 13px 16px; font-size: 16px; cursor: pointer;
}
.mic {
  display: block; width: 150px; height: 150px; margin: 38px auto 18px;
  border-radius: 50%; font-size: 50px;
}
.status { text-align: center; color: #68707a; }
.note { text-align: center; color: #8a9199; font-size: 14px; margin-top: 28px; }

.auth-input {
  width: 100%; padding: 13px; margin: 7px 0; border: 1px solid #d7dce1; border-radius: 12px; font-size: 16px;
}
.auth-button, .secondary-button { width: 100%; margin-top: 10px; }
.link-button { width: 100%; background: transparent; color: #59636e; margin-top: 4px; }
.compact-note { margin-top: 10px; min-height: 20px; }
.welcome { text-align: center; font-weight: 600; margin-bottom: 18px; }
.topbar small { color: #737b84; }
.topbar h2 { margin-bottom: 2px; }

/* CJ Brilliant Lab Lobby */
.lobby-body { margin:0; min-height:100vh; background:#17130f; color:#f7f1e7; }
.lobby-shell { min-height:100vh; display:grid; grid-template-columns:minmax(360px, 46%) 1fr; background:#17130f; }
.lobby-visual { position:relative; min-height:100vh; background-image:linear-gradient(90deg, rgba(16,11,7,.04), rgba(16,11,7,.18)), url('lobby-reception.png'); background-size:cover; background-position:center top; }
.lobby-brand { position:absolute; top:32px; left:34px; display:flex; flex-direction:column; color:#f4dfb8; text-shadow:0 2px 16px rgba(0,0,0,.45); }
.brand-mark { font-family:Georgia,serif; font-size:64px; line-height:.9; }
.brand-name { margin-top:10px; font-size:14px; letter-spacing:.32em; }
.lobby-content { min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:64px clamp(28px,6vw,90px) 28px; background:radial-gradient(circle at 15% 20%, #33271b 0, #1b1611 45%, #110e0b 100%); }
.lobby-copy { width:100%; max-width:720px; margin:auto; }
.eyebrow { margin:0 0 12px; color:#c9a76e; letter-spacing:.28em; font-size:12px; font-weight:700; }
.lobby-content h1 { text-align:left; margin:0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(42px,5vw,72px); font-weight:500; line-height:1.03; color:#fff8ed; }
.lobby-tagline { margin:16px 0 38px; color:#cbbda9; letter-spacing:.08em; }
.reception-message { opacity:0; transform:translateY(12px); transition:opacity .8s ease, transform .8s ease; padding:22px 24px; border:1px solid rgba(214,180,123,.25); border-radius:20px; background:rgba(255,255,255,.07); backdrop-filter:blur(10px); box-shadow:0 18px 50px rgba(0,0,0,.18); }
.reception-message.show { opacity:1; transform:none; }
.reception-message p { margin:5px 0; font-size:clamp(17px,1.6vw,21px); line-height:1.65; }
.reception-message .question { margin-top:13px; color:#f1d6a6; font-weight:700; }
.service-menu { opacity:0; transform:translateY(16px); transition:opacity .8s ease, transform .8s ease; margin-top:24px; display:grid; gap:14px; }
.service-menu.show { opacity:1; transform:none; }
.service-card { display:grid; grid-template-columns:52px 1fr auto; align-items:center; gap:16px; padding:18px 20px; border-radius:18px; text-decoration:none; color:#fff; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.07); transition:transform .2s ease, background .2s ease, border-color .2s ease; }
.service-card:hover { transform:translateY(-2px); background:rgba(255,255,255,.11); border-color:rgba(222,185,120,.5); }
.service-card strong { display:block; font-size:20px; }
.service-card small { display:block; margin-top:4px; color:#c9c1b7; font-size:14px; }
.service-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:#223d67; font-weight:800; font-size:13px; }
.line-service .service-icon { background:#06c755; color:white; }
.service-arrow { color:#d9b77c; font-size:26px; }
.lobby-content footer { margin-top:36px; text-align:right; color:#7f7468; font-size:12px; }
.back-link { display:inline-block; margin-bottom:18px; color:#59636e; text-decoration:none; }
.line-page-card { text-align:center; }
.line-badge { width:72px; height:72px; margin:8px auto 18px; border-radius:22px; display:grid; place-items:center; background:#06c755; color:#fff; font-weight:800; }
.qr-placeholder { width:230px; height:230px; margin:24px auto; border:2px dashed #cfd5da; border-radius:18px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:#7b838b; background:#fafbfc; }
.qr-placeholder span { font-size:46px; font-weight:800; color:#c1c7cc; }
.qr-placeholder small { line-height:1.5; }

@media (max-width: 820px) {
  .lobby-shell { display:block; }
  .lobby-visual { min-height:44vh; background-position:center 10%; }
  .lobby-brand { top:20px; left:20px; }
  .brand-mark { font-size:48px; }
  .brand-name { font-size:11px; }
  .lobby-content { min-height:56vh; padding:34px 20px 24px; }
  .lobby-content h1 { font-size:42px; }
  .lobby-tagline { margin-bottom:26px; }
  .lobby-content footer { text-align:center; }
}

@media (prefers-reduced-motion: reduce) {
  .reception-message, .service-menu { transition:none; opacity:1; transform:none; }
}


/* CJ Brilliant Lab Lobby — full-image interactive landing page */
.lobby-image-page {
  margin: 0;
  min-height: 100vh;
  background: #17110d;
  overflow: auto;
}

.lobby-stage {
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #17110d;
}

.lobby-art {
  position: relative;
  width: min(100vw, calc(100vh * 1.775862));
  aspect-ratio: 1648 / 928;
  line-height: 0;
  overflow: hidden;
}

.lobby-art > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.lobby-hotspot {
  position: absolute;
  z-index: 5;
  display: block;
  border-radius: 6%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.lobby-hotspot-html {
  left: 50.7%;
  top: 47.3%;
  width: 16.2%;
  height: 24.5%;
}

.lobby-hotspot-line {
  left: 68.2%;
  top: 47.3%;
  width: 16.2%;
  height: 24.5%;
}

.lobby-hotspot:focus-visible {
  outline: 4px solid #fff;
  outline-offset: -4px;
}

@media (orientation: portrait) {
  .lobby-art {
    width: 100vw;
    height: auto;
  }
}