:root {
  color-scheme: dark;
  --bg: #090a0b;
  --surface: #141516;
  --surface-soft: #101112;
  --text: #f4efe5;
  --muted: #9e998f;
  --border: #2b2925;
  --primary: #d4b06f;
  --primary-deep: #b68a45;
  --accent: #f0d89b;
  --danger: #d94252;
  --success: #13b98f;
  --focus: #e5c27d;
  --shadow: 0 28px 80px rgba(0, 0, 0, .45);
  --shadow-soft: 0 12px 30px rgba(0, 0, 0, .28);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; }
body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 32%, transparent);
  outline-offset: 2px;
}
[hidden] { display: none !important; }
.icon-sprite { position: fixed; width: 0; height: 0; overflow: hidden; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.login-page {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 32px;
  background:
    radial-gradient(circle at 12% 12%, rgba(36,216,213,.12), transparent 27%),
    radial-gradient(circle at 88% 84%, rgba(217,199,255,.22), transparent 30%),
    #eef1f5;
}
.login-layout {
  width: min(1040px, 100%);
  min-height: min(680px, calc(100dvh - 64px));
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 36px;
  background: #fff;
  box-shadow: var(--shadow);
}
.welcome-panel {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 48px 52px;
  color: #152e34;
  background:
    linear-gradient(145deg, rgba(255,255,255,.76), rgba(255,255,255,.18)),
    linear-gradient(135deg, #c9fbf3 0%, #d9eff8 55%, #e7ddff 100%);
}
.welcome-panel::after {
  content: "";
  position: absolute;
  right: -110px;
  bottom: -120px;
  z-index: -1;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(255,255,255,.32);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}
.brand-lockup { display: flex; align-items: center; gap: 13px; font-size: 17px; font-weight: 750; letter-spacing: -.01em; }
.brand-lockup .login-mark { width: 42px; height: 42px; margin: 0; border-radius: 15px; box-shadow: 0 10px 24px rgba(36,152,158,.18); }
.brand-lockup .login-mark::before { width: 6px; height: 6px; top: 14px; left: 11px; box-shadow: 14px 0 0 rgba(255,255,255,.92); }
.brand-lockup .login-mark::after { width: 18px; height: 8px; left: 12px; top: 23px; }
.brand-lockup .login-mark span:first-child, .brand-lockup .login-mark span:last-child { width: 12px; height: 12px; }
.welcome-copy { margin: auto 0; max-width: 440px; }
.welcome-copy .eyebrow { color: #27727a; }
.welcome-copy h2 { margin: 16px 0 22px; font-size: clamp(44px, 5vw, 66px); line-height: 1.12; letter-spacing: -.055em; }
.welcome-copy > p:last-child { max-width: 390px; margin: 0; color: #4d6a70; font-size: 16px; line-height: 1.9; }
.community-values { display: flex; flex-wrap: wrap; gap: 8px; }
.community-values span { padding: 9px 13px; border: 1px solid rgba(255,255,255,.72); border-radius: 999px; color: #45666b; background: rgba(255,255,255,.42); font-size: 12px; font-weight: 650; backdrop-filter: blur(8px); }
.orbit { position: absolute; z-index: -1; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; pointer-events: none; }
.orbit-one { top: 19%; right: -72px; width: 180px; height: 180px; }
.orbit-two { top: 24%; right: -23px; width: 74px; height: 74px; background: rgba(255,255,255,.18); }
.login-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 52px 50px;
  background: rgba(255,255,255,.98);
}
.login-mark {
  position: relative;
  width: 64px;
  height: 64px;
  margin-bottom: 24px;
  border-radius: 22px;
  background: linear-gradient(135deg, #2de5dc 0%, #acdff8 52%, #d9c7ff 100%);
  box-shadow: 0 12px 28px rgba(36,216,213,.28);
}
.login-mark::before, .login-mark::after, .login-mark span {
  content: "";
  position: absolute;
  background: rgba(255,255,255,.92);
}
.login-mark::before { width: 9px; height: 9px; border-radius: 50%; top: 21px; left: 17px; box-shadow: 21px 0 0 rgba(255,255,255,.92); }
.login-mark::after { width: 26px; height: 12px; border-radius: 0 0 18px 18px; left: 19px; top: 35px; }
.login-mark span:first-child { width: 18px; height: 18px; border-radius: 10px 10px 2px 10px; left: -4px; top: -3px; transform: rotate(-12deg); }
.login-mark span:last-child { width: 18px; height: 18px; border-radius: 10px 10px 10px 2px; right: -4px; top: -3px; transform: rotate(12deg); }
.mobile-brand { display: none; }
.eyebrow { margin: 0 0 10px; color: #167d80; font-size: 12px; font-weight: 750; letter-spacing: .14em; }
.login-card h1 { margin: 0; font-size: clamp(30px, 4vw, 40px); line-height: 1.18; letter-spacing: -.045em; }
.login-intro { margin: 14px 0 26px; color: var(--muted); font-size: 15px; line-height: 1.75; }
.preview-note { margin: -8px 0 18px; padding: 11px 13px; border: 1px solid #cbeae8; border-radius: 12px; color: #3b696b; background: #effaf9; font-size: 12px; line-height: 1.6; }
.login-card form { display: grid; gap: 10px; }
.login-card label { margin-top: 8px; color: #4e5564; font-size: 14px; font-weight: 600; }
.login-card input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  background: #fafbfc;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.login-card input:hover { border-color: #cfd4dd; }
.login-card input:focus { border-color: var(--primary-deep); background: #fff; box-shadow: 0 0 0 4px rgba(36,216,213,.12); outline: none; }
.password-field { position: relative; }
.password-field input { padding-right: 52px; }
.password-field .icon-button { position: absolute; right: 4px; top: 4px; }
.captcha-field { display: grid; grid-template-columns: minmax(0, 1fr) 168px; gap: 10px; }
.captcha-image-button {
  position: relative;
  width: 168px;
  height: 54px;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: #52606e;
  background: #eff9f8;
  cursor: pointer;
}
.captcha-image-button img { display: block; width: 100%; height: 100%; object-fit: cover; }
.captcha-image-button img[hidden] { display: none; }
.captcha-image-button > svg { display: none; }
#captcha-placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: var(--muted); font-size: 12px; }
.captcha-image-button:hover { border-color: #b9d7d6; }
.icon-button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #596172;
  background: transparent;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.icon-button:hover { background: rgba(119,126,143,.09); }
.icon-button:active { transform: scale(.94); }
.form-error { min-height: 22px; margin: 2px 0 0; color: var(--danger); font-size: 13px; }
.primary-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  margin-top: 2px;
  border: 0;
  border-radius: 15px;
  color: #092d32;
  background: linear-gradient(100deg, #37e4dd, #b6e6f8 58%, #e0d3ff);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(36,216,213,.22);
  transition: transform .15s ease, box-shadow .18s ease, opacity .18s ease;
}
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 15px 32px rgba(36,216,213,.3); }
.primary-button:active { transform: translateY(1px); }
.primary-button:disabled { cursor: wait; opacity: .62; }
.primary-button svg { width: 20px; height: 20px; }
.privacy-note { display: flex; align-items: center; gap: 8px; margin-top: 24px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.privacy-note svg { flex: 0 0 auto; width: 16px; height: 16px; }

.chat-page { min-height: 100dvh; display: grid; place-items: center; padding: 20px; }
.phone-shell {
  width: min(940px, 100%);
  height: min(920px, calc(100dvh - 40px));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 30px;
  background: var(--surface-soft);
  box-shadow: var(--shadow);
}
.chat-header {
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px);
}
.avatar {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 3px solid rgba(255,255,255,.9);
  border-radius: 18px;
  color: #43345e;
  background: linear-gradient(145deg, #e8dcff, #c9b8f5);
  box-shadow: var(--shadow-soft);
  font-size: 12px;
  font-weight: 800;
}
.avatar::before, .avatar::after { content: ""; position: absolute; top: 14px; width: 5px; height: 7px; border-radius: 50%; background: currentColor; }
.avatar::before { left: 12px; }
.avatar::after { right: 12px; }
.avatar span::after { content: ""; position: absolute; width: 14px; height: 7px; left: 14px; bottom: 10px; border-bottom: 2px solid currentColor; border-radius: 50%; }
.partner-info { min-width: 0; flex: 1; }
.partner-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.partner-title h1 { overflow: hidden; margin: 0; font-size: 19px; text-overflow: ellipsis; white-space: nowrap; }
.room-label { flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; color: #8062b4; background: #f0eaff; font-size: 11px; font-weight: 700; }
#presence-text { display: flex; align-items: center; gap: 6px; margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.presence-dot { width: 7px; height: 7px; border-radius: 50%; background: #a3a9b4; }
#presence-text.is-online .presence-dot { background: var(--success); box-shadow: 0 0 0 4px rgba(19,185,143,.11); }
.header-action { flex: 0 0 auto; }
.retention-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 16px;
  color: #777f90;
  background: #f6f7fa;
  font-size: 12px;
}
.retention-banner svg { width: 15px; height: 15px; }
.message-list {
  min-height: 0;
  overflow-y: auto;
  padding: 28px clamp(18px, 5vw, 54px) 34px;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}
.message-list::-webkit-scrollbar { width: 7px; }
.message-list::-webkit-scrollbar-thumb { border-radius: 99px; background: #d6d9e1; }
.empty-state { min-height: 100%; display: grid; place-content: center; justify-items: center; padding: 36px 12px; text-align: center; color: var(--muted); }
.empty-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 16px; border-radius: 24px; color: var(--primary-deep); background: #e6fbfa; }
.empty-icon svg { width: 30px; height: 30px; }
.empty-state h2 { margin: 0; color: #424957; font-size: 18px; }
.empty-state p { margin: 8px 0 0; font-size: 13px; }
.message-row { display: flex; align-items: flex-end; gap: 10px; margin: 0 0 22px; animation: message-in .2s ease both; }
.message-row.is-mine { flex-direction: row-reverse; }
.message-avatar { width: 40px; height: 40px; border-radius: 15px; font-size: 0; }
.message-row.is-mine .message-avatar { color: #15565d; background: linear-gradient(145deg, #51e4dd, #cfe8ff 58%, #dfd0ff); }
.message-content { max-width: min(72%, 580px); }
.message-row.is-mine .message-content { display: grid; justify-items: end; }
.message-bubble {
  padding: 12px 16px;
  border-radius: 7px 20px 20px 20px;
  color: #303642;
  background: #fff;
  box-shadow: 0 8px 24px rgba(48,56,74,.07);
  font-size: 16px;
  line-height: 1.62;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.message-row.is-mine .message-bubble {
  border-radius: 20px 7px 20px 20px;
  color: #1f3942;
  background: linear-gradient(105deg, #49e4df 0%, #aee9f5 58%, #e2d6ff 100%);
  box-shadow: 0 9px 26px rgba(36,216,213,.14);
}
.message-row.is-pending { opacity: .64; }
.message-row.is-failed .message-bubble { box-shadow: 0 0 0 2px rgba(217,66,82,.2); }
.message-meta { display: flex; align-items: center; gap: 5px; min-height: 22px; margin: 5px 4px 0; color: #9aA0ac; font-size: 11px; }
.message-row.is-mine .message-meta { justify-content: flex-end; }
.message-state { color: var(--muted); }
.message-row.is-failed .message-state { color: var(--danger); }
.retry-button { display: none; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; color: var(--danger); background: rgba(217,66,82,.08); cursor: pointer; }
.retry-button svg { width: 15px; height: 15px; }
.message-row.is-failed .retry-button { display: grid; }
.composer-wrap { position: relative; padding: 0 18px calc(16px + var(--safe-bottom)); border-top: 1px solid var(--border); background: rgba(255,255,255,.97); }
.quick-replies { display: flex; gap: 8px; overflow-x: auto; margin: 0 -4px; padding: 12px 4px 9px; scrollbar-width: none; }
.quick-replies::-webkit-scrollbar { display: none; }
.quick-replies button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 7px 13px;
  border: 1px solid #edf0f4;
  border-radius: 12px;
  color: #4c5360;
  background: #f6f7f9;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.quick-replies button:hover { background: #edfafa; }
.quick-replies button:active { transform: scale(.97); }
.composer {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  min-height: 58px;
  padding: 7px;
  border: 1px solid #e7e9ee;
  border-radius: 20px;
  background: #f7f8fa;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.composer:focus-within { border-color: rgba(12,185,188,.5); box-shadow: 0 0 0 4px rgba(36,216,213,.09); }
.composer textarea {
  min-width: 0;
  flex: 1;
  max-height: 128px;
  min-height: 42px;
  resize: none;
  padding: 10px 7px 7px;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  font-size: 16px;
  line-height: 1.45;
}
.composer textarea::placeholder { color: #a9aeba; }
.composer-icon { flex: 0 0 auto; }
.send-button {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 15px;
  color: #1f4b54;
  background: linear-gradient(135deg, #42e4de, #c7ddff 65%, #decfff);
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(36,216,213,.2);
  transition: opacity .15s ease, transform .1s ease;
}
.send-button:active { transform: scale(.94); }
.send-button:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; }
.send-button svg { width: 20px; height: 20px; }
.composer-error { min-height: 16px; margin: 4px 8px 0; color: var(--danger); font-size: 11px; }
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(28px + var(--safe-bottom));
  z-index: 50;
  max-width: calc(100vw - 32px);
  padding: 11px 15px;
  border-radius: 12px;
  color: #fff;
  background: rgba(31,36,46,.92);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  font-size: 13px;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Black-gold community theme */
.login-page {
  background:
    radial-gradient(circle at 10% 10%, rgba(203,164,95,.13), transparent 28%),
    radial-gradient(circle at 88% 82%, rgba(115,89,48,.12), transparent 32%),
    #090a0b;
}
.login-layout { border-color: #2c2923; background: #111213; box-shadow: 0 32px 90px rgba(0,0,0,.56); }
.welcome-panel {
  color: #f6f0e4;
  background:
    radial-gradient(circle at 80% 22%, rgba(225,190,119,.13), transparent 24%),
    linear-gradient(145deg, rgba(30,29,26,.98), rgba(12,13,14,.98));
}
.welcome-panel::before { content: ""; position: absolute; inset: 18px; z-index: -1; border: 1px solid rgba(214,177,106,.16); border-radius: 25px; pointer-events: none; }
.welcome-panel::after { background: rgba(210,170,96,.04); box-shadow: inset 0 0 0 1px rgba(219,179,105,.14); }
.brand-lockup { color: #f2eadc; }
.brand-lockup .login-mark, .login-mark { background: linear-gradient(145deg, #f1d79a 0%, #c79a50 55%, #70502a 100%); box-shadow: 0 14px 32px rgba(197,151,77,.22); }
.welcome-copy .eyebrow, .eyebrow { color: #cda65f; }
.welcome-copy > p:last-child { color: #aaa397; }
.community-values span { border-color: rgba(217,179,108,.2); color: #c6b79e; background: rgba(217,179,108,.07); }
.orbit { border-color: rgba(222,183,107,.16); }
.orbit-two { background: rgba(219,179,105,.04); }
.login-card { background: #141516; }
.login-card label { color: #c7c0b4; }
.login-card input { border-color: #302e29; color: #f4efe5; background: #0f1011; }
.login-card input::placeholder { color: #706d67; }
.login-card input:hover { border-color: #50483b; }
.login-card input:focus { border-color: #c99f57; background: #111214; box-shadow: 0 0 0 4px rgba(203,164,95,.11); }
.captcha-image-button { border-color: #39342b; background: #eee5d4; }
.captcha-image-button:hover { border-color: #b78c47; }
.primary-button { color: #18130b; background: linear-gradient(105deg, #b9883f, #efd493 55%, #b98943); box-shadow: 0 13px 30px rgba(184,137,65,.22); }
.primary-button:hover { box-shadow: 0 16px 38px rgba(193,147,74,.3); }
.privacy-note { color: #7f7b74; }
.preview-note { border-color: #5e4a28; color: #d2bd94; background: #211c14; }

.hub-page { min-height: 100dvh; padding: 24px; background: radial-gradient(circle at 82% 8%, rgba(204,164,91,.11), transparent 26%), #090a0b; }
.hub-shell { width: min(1180px, 100%); margin: 0 auto; }
.hub-header { min-height: 72px; display: flex; align-items: center; justify-content: space-between; }
.hub-brand { display: flex; align-items: center; gap: 12px; color: #eee7dc; font-weight: 750; }
.mini-mark { width: 34px; height: 34px; border-radius: 12px; background: linear-gradient(145deg, #ecd391, #a97835); box-shadow: 0 8px 22px rgba(188,141,67,.2); }
.secondary-button { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 15px; border: 1px solid #34312b; border-radius: 13px; color: #c7c0b4; background: #121314; cursor: pointer; }
.secondary-button svg { width: 18px; height: 18px; }
.secondary-button:hover { border-color: #645538; color: #efd79f; }
.hub-hero { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 32px; margin-top: 28px; padding: 54px; overflow: hidden; border: 1px solid #2e2b25; border-radius: 28px; background: linear-gradient(135deg,#171817,#101112); box-shadow: var(--shadow-soft); }
.hub-hero::after { content:""; position:absolute; right:12%; top:-120px; width:300px; height:300px; border:1px solid rgba(214,173,96,.14); border-radius:50%; box-shadow: 0 0 0 48px rgba(214,173,96,.025), 0 0 0 96px rgba(214,173,96,.018); pointer-events:none; }
.hub-hero > div { position: relative; z-index: 1; max-width: 650px; }
.hub-hero h1 { margin: 8px 0 16px; font-size: clamp(36px,5vw,58px); line-height: 1.12; letter-spacing: -.045em; }
.hub-hero > div > p:last-child { max-width: 610px; margin: 0; color: #aaa49a; font-size: 16px; line-height: 1.8; }
.community-button { position: relative; z-index: 1; min-width: 260px; min-height: 78px; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 1px solid #d5ad67; border-radius: 18px; color: #18130c; background: linear-gradient(110deg,#b9873e,#efd493); cursor:pointer; box-shadow: 0 14px 34px rgba(183,136,62,.18); }
.community-button > svg { flex:0 0 auto; }
.community-button > svg:last-child { margin-left:auto; width:18px; }
.community-button span { display:grid; gap:3px; text-align:left; }
.community-button strong { font-size:16px; }
.community-button small { color:#5d492c; font-size:12px; }
.community-button:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(190,144,70,.27); }
.learning-section { padding: 56px 0 30px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.section-heading h2 { margin:5px 0 0; font-size:30px; letter-spacing:-.03em; }
.section-heading > p { margin:0 0 5px; color:#817d75; font-size:14px; }
.learning-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.learning-card { position:relative; min-height:320px; display:flex; flex-direction:column; padding:24px; overflow:hidden; border:1px solid #2c2a26; border-radius:20px; background:#131415; }
.learning-card:hover { border-color:#53482f; transform:translateY(-3px); transition:border-color .2s ease, transform .2s ease; }
.module-index { position:absolute; right:18px; top:16px; color:#39362f; font-size:36px; font-weight:800; font-variant-numeric:tabular-nums; }
.module-icon { width:44px; height:44px; display:grid; place-items:center; margin-bottom:34px; border:1px solid #4a3d28; border-radius:14px; color:#d6ad66; background:#201b14; }
.module-icon svg { width:21px; height:21px; }
.module-kicker { margin:0 0 7px; color:#b58c4b; font-size:11px; font-weight:750; letter-spacing:.12em; }
.learning-card h3 { margin:0; font-size:20px; }
.learning-card > p:not(.module-kicker) { margin:13px 0 20px; color:#99948b; font-size:14px; line-height:1.7; }
.topic-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
.topic-list span { padding:5px 8px; border-radius:8px; color:#a8a299; background:#1c1d1e; font-size:11px; }
.learning-card-accent { background:linear-gradient(145deg,#201a12,#141414); border-color:#594625; }
.learning-card-accent button { align-self:flex-start; display:flex; align-items:center; gap:7px; margin-top:auto; padding:9px 12px; border:0; border-radius:10px; color:#1b150d; background:#d7b36f; font-weight:700; cursor:pointer; }
.learning-card-accent button svg { width:16px; height:16px; }

.chat-page { background: radial-gradient(circle at 12% 10%, rgba(205,163,88,.1), transparent 28%), #090a0b; }
.phone-shell { border-color:#2c2923; background:#0f1011; }
.chat-header { border-color:#2c2925; background:rgba(18,19,20,.96); }
.avatar { border-color:#28251f; color:#2b1e0c; background:linear-gradient(145deg,#eed393,#ad7d38); }
.room-label { color:#d6b16c; background:#241e15; }
.retention-banner { color:#8c877e; background:#101112; }
.empty-icon { color:#d4aa61; background:#211b13; }
.empty-state h2 { color:#d7d0c5; }
.message-bubble { color:#e6dfd4; background:#1a1b1c; box-shadow:0 8px 24px rgba(0,0,0,.18); }
.message-row.is-mine .message-bubble { color:#21180d; background:linear-gradient(105deg,#bd8c43,#ecd08e); box-shadow:0 9px 26px rgba(182,132,57,.15); }
.message-row.is-mine .message-avatar { color:#2b1f0e; background:linear-gradient(145deg,#f0d79b,#b47e35); }
.composer-wrap { border-color:#2c2925; background:rgba(18,19,20,.98); }
.quick-replies button { border-color:#302d27; color:#b6afa3; background:#191a1b; }
.quick-replies button:hover { color:#e4c887; background:#211d16; }
.composer { border-color:#302e29; background:#0f1011; }
.composer:focus-within { border-color:#a77b3b; box-shadow:0 0 0 4px rgba(198,154,82,.09); }
.composer textarea { color:#f2ecdf; }
.send-button { color:#1c140b; background:linear-gradient(135deg,#b9873f,#efd391); box-shadow:0 8px 18px rgba(185,136,61,.18); }
.header-action { min-height:44px; display:flex; align-items:center; gap:7px; padding:0 12px; border:1px solid #35312a; border-radius:12px; color:#bcb5aa; background:#171819; cursor:pointer; }
.header-action svg { width:18px; height:18px; }
.header-action:hover { border-color:#67583c; color:#efd49a; }

@keyframes message-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }

@media (max-width: 860px) {
  .login-page { padding: 24px; }
  .login-layout { min-height: min(700px, calc(100dvh - 48px)); grid-template-columns: minmax(0, .78fr) minmax(390px, 1fr); }
  .welcome-panel { padding: 36px 32px; }
  .welcome-copy h2 { font-size: 42px; }
  .welcome-copy > p:last-child { font-size: 15px; }
  .login-card { padding: 44px 36px; }
  .hub-hero { padding:40px; grid-template-columns:1fr; align-items:start; }
  .community-button { width:min(100%,320px); }
  .learning-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 640px) {
  .login-page { display: block; padding: 0; background: #101112; }
  .login-layout { min-height: 100dvh; display: block; border: 0; border-radius: 0; background:#101112; box-shadow: none; }
  .welcome-panel { display: none; }
  .login-card { min-height: 100dvh; justify-content: center; padding: 38px 28px; background:#101112; }
  .mobile-brand { display: block; margin-bottom: 30px; }
  .mobile-brand .login-mark { margin: 0; }
  .chat-page { display: block; padding: 0; }
  .phone-shell { width: 100%; height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
  .chat-header { min-height: 72px; padding: max(10px, env(safe-area-inset-top)) 14px 10px; }
  .avatar { width: 44px; height: 44px; border-radius: 16px; }
  .message-list { padding: 22px 14px 30px; }
  .message-content { max-width: 76%; }
  .message-avatar { width: 38px; height: 38px; border-radius: 14px; }
  .message-bubble { padding: 11px 14px; }
  .composer-wrap { padding-inline: 10px; }
  .composer-icon:first-child { display: none; }
  .quick-replies { padding-top: 10px; }
  .hub-page { padding:16px; }
  .hub-header { min-height:60px; }
  .hub-hero { margin-top:16px; padding:30px 24px; border-radius:22px; }
  .hub-hero h1 { font-size:36px; }
  .community-button { min-width:0; width:100%; }
  .learning-section { padding-top:40px; }
  .section-heading { align-items:start; }
  .section-heading > p { display:none; }
  .learning-grid { grid-template-columns:1fr; }
  .learning-card { min-height:280px; }
  .header-action span { display:none; }
  .header-action { width:44px; justify-content:center; padding:0; border-radius:50%; }
}

@media (max-width: 430px) {
  .login-card { padding: 34px 24px; }
  .captcha-field { grid-template-columns: minmax(0, 1fr) 142px; }
  .captcha-image-button { width: 142px; }
  .retention-banner { justify-content: flex-start; padding-left: 16px; }
  .room-label { display: none; }
  .message-row { gap: 8px; }
  .message-content { max-width: 79%; }
  .message-bubble { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}