:root {
  --ink: #352d24;
  --muted: #776c60;
  --line: #e9dec9;
  --surface: #fffefa;
  --canvas: #f8f3e9;
  --green: #98691b;
  --green-dark: #704a10;
  --green-soft: #fff2d2;
  --gold: #e5be61;
  font-family: "Noto Sans SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--canvas); }
button, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 246px 1fr; }
.sidebar { background: linear-gradient(180deg, #f1d887 0%, #e4c16a 100%); color: #352d24; padding: 26px 18px 20px; display: flex; flex-direction: column; min-height: 100vh; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 8px; }
.brand-mark { width: 38px; height: 38px; border-radius: 12px 12px 12px 4px; background: #3d3127; color: #f3d57f; display: grid; place-items: center; font-weight: 800; font-size: 19px; }
.brand strong, .brand span { display: block; }
.brand strong { font-size: 18px; letter-spacing: .08em; }
.brand span { color: #725d34; font-size: 11px; margin-top: 2px; }
.main-nav { margin-top: 42px; display: grid; gap: 8px; }
.nav-item { border: 0; background: transparent; color: #624f2f; border-radius: 10px; padding: 12px 14px; text-align: left; display: flex; gap: 12px; align-items: center; }
.nav-item.active { background: rgba(255,255,255,.43); color: #2f2b1d; font-weight: 700; box-shadow: 0 7px 18px rgba(101,79,0,.09); }
.nav-item span { width: 20px; text-align: center; }
.sidebar-card { margin-top: auto; background: rgba(255,255,255,.34); border: 1px solid rgba(255,255,255,.43); border-radius: 14px; padding: 16px; }
.eyebrow { color: #765116; font-size: 11px; }
.sidebar-card strong { display: block; font-size: 13px; margin: 6px 0; }
.sidebar-card p { font-size: 11px; line-height: 1.6; color: #65563c; margin: 0 0 12px; }
.sidebar-card button { border: 0; color: #765116; background: transparent; padding: 0; font-size: 11px; }
.profile { border-top: 1px solid rgba(72,60,15,.15); margin-top: 18px; padding: 18px 4px 0; display: flex; gap: 10px; align-items: center; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: #3d3127; color: #f3d57f; display: grid; place-items: center; font-size: 12px; }
.profile div:nth-child(2) { flex: 1; }
.profile strong, .profile span { display: block; }
.profile strong { font-size: 12px; }.profile span { color: #725d34; font-size: 9px; margin-top: 3px; }
.profile .login-button { color: #5c4518; background: rgba(255,255,255,.48); border: 1px solid rgba(92,69,24,.2); border-radius: 999px; padding: 5px 9px; font-size: 10px; cursor: pointer; white-space: nowrap; }
.profile .login-button:hover { background: rgba(255,255,255,.72); }

.main-content { display: grid; grid-template-columns: minmax(520px, 1fr) 300px; min-height: 100vh; }
.chat-panel { background: var(--surface); display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; }
.chat-header { height: 92px; padding: 21px 34px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.title-line { display: flex; align-items: center; gap: 12px; }
.title-line h1 { font-family: Georgia, "Noto Sans SC", serif; margin: 0; font-size: 22px; }
.online { color: #2f6945; background: #eaf5e9; font-size: 10px; border-radius: 99px; padding: 4px 8px; }
.online i { display: inline-block; width: 5px; height: 5px; background: #2aa36d; border-radius: 50%; margin-right: 4px; }
.chat-header p { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.ghost-button { background: white; border: 1px solid var(--line); border-radius: 9px; color: #655a36; padding: 8px 12px; font-size: 11px; }
.messages { padding: 30px 8%; overflow-y: auto; max-height: calc(100vh - 230px); }
.welcome { max-width: 720px; margin: 1vh auto 0; text-align: center; }
.assistant-orb { margin: auto; width: 52px; height: 52px; border-radius: 50%; background: #e4bd5b; color: #352d24; display: grid; place-items: center; box-shadow: 0 10px 26px rgba(147,102,24,.18); }
.welcome h2 { font-family: Georgia, "Noto Sans SC", serif; font-size: 25px; margin: 16px 0 6px; }
.welcome > p { color: var(--muted); font-size: 12px; margin: 0; }
.suggestions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
.suggestion { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; text-align: left; transition: .2s ease; }
.suggestion:hover { border-color: #d7bb7a; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(111,76,20,.08); }
.suggestion > span { width: 34px; height: 34px; border-radius: 9px; background: #fff4d9; display: grid; place-items: center; }
.suggestion strong, .suggestion small { display: block; }.suggestion strong { font-size: 12px; }.suggestion small { color: var(--muted); font-size: 10px; margin-top: 4px; }.suggestion b { color: #9aa49f; }
.message {
  --message-primary: var(--green);
  --message-soft: #fff8e8;
  --message-border: #ead8ae;
  --message-avatar-bg: #e4bd5b;
  --message-avatar-ink: #352d24;
  max-width: 720px;
  margin: 0 auto 22px;
  display: flex;
  gap: 12px;
  animation: rise .25s ease;
}
.message.theme-fancy,
.message.theme-ulul,
.message.theme-dudu,
.message.theme-keym,
.message.theme-weiziyuan {
  --message-primary: var(--green);
  --message-soft: #fff8e8;
  --message-border: #ead8ae;
  --message-avatar-bg: #e4bd5b;
  --message-avatar-ink: #352d24;
}
.message.user { justify-content: flex-end; }
.message-bubble { max-width: 82%; border: 1px solid var(--message-border); border-radius: 4px 16px 16px 16px; background: var(--message-soft); padding: 15px 17px; font-size: 13px; line-height: 1.75; }
.message.user .message-bubble { background: var(--message-primary); border-color: var(--message-primary); color: white; border-radius: 16px 4px 16px 16px; box-shadow: 0 7px 18px color-mix(in srgb, var(--message-primary) 16%, transparent); }
.mini-orb { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--message-avatar-bg); color: var(--message-avatar-ink); display: grid; place-items: center; font-size: 9px; font-weight: 800; letter-spacing: -.02em; box-shadow: 0 5px 13px color-mix(in srgb, var(--message-avatar-bg) 18%, transparent); }
.answer-title { display: block; margin-bottom: 7px; font-size: 14px; }
.mode-label { display: inline-block; margin-bottom: 8px; padding: 3px 7px; border-radius: 99px; font-size: 9px; font-weight: 600; }
.mode-knowledge { background: white; color: var(--message-primary); box-shadow: inset 0 0 0 1px var(--message-border); }
.mode-general { background: #eaf0fb; color: #355f9c; }
.mode-human { background: #fff0d7; color: #8b5b13; }
.mode-system { background: #eef0ef; color: #5e6762; }
.risk-notice { margin: 8px 0 11px; padding: 8px 10px; border-left: 3px solid #c59546; border-radius: 5px; background: #fff8e9; color: #765a27; font-size: 10px; line-height: 1.55; }
.answer-text { white-space: pre-line; }
.answer-link { color: var(--message-primary); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--message-primary) 38%, transparent); text-underline-offset: 3px; overflow-wrap: anywhere; }
.answer-link:hover { color: var(--green-dark); text-decoration-color: currentColor; }
.answer-link-title { text-decoration-style: solid; }
.answer-link-url { font-size: .94em; }
.answer-shortcuts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.answer-shortcuts button { border: 1px solid var(--message-border); border-radius: 9px; background: white; color: var(--message-primary); padding: 7px 10px; font-size: 10px; font-weight: 600; }
.answer-shortcuts button:hover { border-color: var(--message-primary); background: color-mix(in srgb, var(--message-soft) 70%, white); }
.sources { margin-top: 13px; padding-top: 12px; border-top: 1px solid #dfe7e2; }
.sources-label { color: var(--muted); font-size: 10px; display: block; margin-bottom: 7px; }
.source-chip { display: inline-block; background: white; border: 1px solid var(--message-border); border-radius: 7px; padding: 5px 8px; margin: 0 5px 5px 0; color: var(--message-primary); font-size: 10px; }
.source-chip .answer-link { font-size: inherit; }
.answer-actions { display: flex; gap: 8px; margin-top: 10px; }
.answer-actions button { border: 0; background: transparent; color: var(--muted); font-size: 11px; padding: 2px; }
.typing { display: flex; gap: 4px; padding: 4px 0; }.typing i { width: 6px; height: 6px; border-radius: 50%; background: #7fa08f; animation: pulse 1s infinite; }.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
.composer-wrap { padding: 10px 8% 17px; background: white; }
.scope-note { width: fit-content; background: #fff0c9; color: #765c2b; border-radius: 7px 7px 0 0; padding: 6px 10px; font-size: 9px; margin-left: 8px; }
.scope-note span { color: var(--green); }
.composer { display: flex; align-items: flex-end; border: 1px solid #dfcfac; border-radius: 13px; padding: 8px 8px 8px 15px; box-shadow: 0 8px 24px rgba(111,76,20,.06); }
.composer:focus-within { border-color: #c69a42; box-shadow: 0 0 0 3px rgba(229,190,97,.16); }
.composer textarea { border: 0; outline: 0; resize: none; flex: 1; min-height: 28px; max-height: 100px; padding: 5px 0; font-size: 12px; color: var(--ink); }
.composer button { flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 9px; background: var(--green); color: white; font-size: 18px; }
.composer button:disabled { opacity: .45; }
.disclaimer { text-align: center; color: #a0a8a4; margin: 7px 0 0; font-size: 8px; }

.catalog-page { padding: 34px 6% 44px; overflow-y: auto; max-height: calc(100vh - 92px); background: linear-gradient(180deg, #fffefa 0%, #fbf7ee 100%); }
.catalog-page[hidden] { display: none; }
.chat-panel.catalog-mode { grid-template-rows: auto 1fr; }
.chat-panel.catalog-mode .messages,
.chat-panel.catalog-mode .composer-wrap { display: none; }
.catalog-intro { max-width: 760px; margin: 0 auto 30px; }
.catalog-eyebrow { display: inline-block; color: var(--green); background: var(--green-soft); border-radius: 99px; padding: 5px 10px; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.catalog-intro h2 { margin: 13px 0 7px; font-family: Georgia, "Noto Sans SC", serif; font-size: 27px; }
.catalog-intro p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.catalog-groups { max-width: 760px; margin: 0 auto; display: grid; gap: 26px; }
.catalog-group-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 11px; }
.catalog-group-head h3 { margin: 0; font-size: 14px; }
.catalog-group-head span { color: var(--muted); font-size: 9px; }
.catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.catalog-card { min-height: 112px; border: 1px solid var(--line); border-radius: 14px; background: white; padding: 16px; text-align: left; display: grid; grid-template-columns: 38px 1fr auto; grid-template-rows: auto 1fr; column-gap: 12px; transition: .2s ease; box-shadow: 0 7px 20px rgba(76,54,20,.035); }
.catalog-card:hover { transform: translateY(-2px); border-color: #d6b978; box-shadow: 0 12px 28px rgba(76,54,20,.09); }
.catalog-card-icon { grid-row: 1 / 3; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: #fff2d2; color: var(--green-dark); font-size: 15px; font-weight: 800; }
.catalog-card strong { align-self: end; font-size: 13px; }
.catalog-card p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.catalog-card b { grid-column: 3; grid-row: 1 / 3; align-self: center; color: #b3a78d; font-size: 15px; }

.right-panel { padding: 28px 22px; background: #f8f3e9; border-left: 1px solid var(--line); }
.status-card { border-radius: 14px; padding: 17px; color: #352d24; background: linear-gradient(145deg, #f0d58a, #e2b95c); box-shadow: 0 12px 26px rgba(128,86,18,.14); }
.status-heading { display: flex; justify-content: space-between; font-size: 11px; }.status-heading b { color: #315f42; font-size: 9px; }
.status-stat { margin-top: 20px; display: flex; align-items: baseline; gap: 7px; }.status-stat strong { font-family: Georgia, serif; font-size: 28px; }.status-stat span { color: #62552a; font-size: 9px; }
.progress { height: 3px; border-radius: 3px; background: rgba(57,48,15,.16); margin-top: 13px; }.progress i { display:block; width: 82%; height:100%; background:#4f461f; border-radius:3px; }
.status-card p { color: #675a2e; font-size: 8px; margin: 8px 0 0; }
.side-section { margin-top: 28px; }.section-title { display:flex; justify-content:space-between; align-items:center; }.section-title h3 { font-size: 13px; margin:0; }.section-title button { border:0; background:none; color:var(--green); font-size:9px; }
.hot-list { margin: 12px 0 0; padding:0; list-style:none; }.hot-list li { display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--line); padding:10px 0; }.hot-list b { color:#aa8a50; font-family:Georgia,serif; font-size:11px; }.hot-list button { text-align:left; border:0; background:none; color:#49534e; padding:0; font-size:10px; }
.mentor-card { margin-top: 26px; background: white; border: 1px solid var(--line); border-radius: 13px; padding: 14px; display: grid; grid-template-columns: 34px 1fr; gap: 9px; }
.mentor-icon { width:34px;height:34px;border-radius:50%;background:#f4ead9;color:#9b753c;display:grid;place-items:center; }.mentor-card strong { font-size:10px; }.mentor-card p { font-size:8px;color:var(--muted);margin:3px 0 0; }.mentor-card button { grid-column:1/-1;border:1px solid #d8e1db;background:white;color:var(--green);border-radius:8px;padding:8px;font-size:9px; }
.mobile-header { display:none; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: #3d3127; color: white; padding: 10px 16px; border-radius: 9px; font-size: 11px; opacity: 0; pointer-events:none; transition:.25s; box-shadow:0 10px 30px rgba(0,0,0,.18); }.toast.show { opacity:1; transform:translate(-50%,0); }
@keyframes rise { from { opacity:0; transform:translateY(7px); } } @keyframes pulse { 0%,70%,100%{opacity:.3;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)} }

@media (max-width: 1050px) { .right-panel { display:none; }.main-content { grid-template-columns:1fr; } }
@media (max-width: 720px) {
  .app-shell { display:block; }.sidebar { display:none; }.sidebar.mobile-open { display:flex; position:fixed; z-index:30; inset:0 auto 0 0; width:min(84vw,320px); box-shadow:18px 0 50px rgba(53,45,36,.24); }.main-content { display:block; }.chat-panel { min-height:100dvh; grid-template-rows:auto auto 1fr auto; }
  .mobile-header { display:flex; height:58px; padding:10px 16px; justify-content:space-between; align-items:center; background:#e8c66f; color:#352d24; }.mobile-header .brand { padding:0; }.mobile-header .brand-mark { width:32px;height:32px;font-size:15px; }.mobile-header button { border:0;background:transparent;color:#352d24;font-size:19px; }
  .chat-header { height:72px;padding:14px 18px; }.title-line h1 { font-size:18px; }.chat-header p { font-size:9px; }.ghost-button { padding:7px 9px;font-size:9px; }
  .messages { padding:22px 15px; max-height:calc(100dvh - 264px); }.welcome { margin-top:0; }.welcome h2 { font-size:22px; }.suggestions { grid-template-columns:1fr; margin-top:20px; }.suggestion { padding:12px; }
  .composer-wrap { padding:8px 13px 12px; }.message-bubble { max-width:88%; }.disclaimer { font-size:7px; }
  .chat-panel.catalog-mode { grid-template-rows:auto auto 1fr; }
  .catalog-page { padding:24px 15px 35px; max-height:calc(100dvh - 130px); }
  .catalog-intro { margin-bottom:23px; }.catalog-intro h2 { font-size:23px; }
  .catalog-grid { grid-template-columns:1fr; }
  .catalog-card { min-height:96px; }
}