[hidden] { display: none !important; }
:root {
  --bg: #f7f7f8;
  --panel: #ffffff;
  --sidebar: #f2f2f3;
  --line: #e4e4e7;
  --line-dark: #d2d2d7;
  --text: #202123;
  --muted: #73757c;
  --subtle: #9a9ca3;
  --accent: #6d5dfc;
  --accent-soft: #f0eeff;
  --warm: #df7c4d;
  --warm-soft: #fff1e9;
  --green: #29966e;
  --green-soft: #eaf7f1;
  --shadow: 0 12px 36px rgba(31, 35, 49, .08);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
}
.writer-boot .landing-screen, .writer-boot .auth-screen, .writer-boot .app-shell { display: none !important; }

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--bg); }
body { font-size: 14px; }
button, textarea, input, select { font: inherit; }
button { border: 0; cursor: pointer; }
.landing-screen { height: 100vh; min-height: 100vh; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; color: #1f2230; background: #fff; }
.landing-nav { display: flex; align-items: center; justify-content: space-between; max-width: 1180px; margin: 0 auto; padding: 22px 28px; }
.landing-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text); background: transparent; font-size: 18px; letter-spacing: -.04em; }
.landing-nav-links { display: flex; gap: 29px; margin-left: 80px; }
.landing-nav-links a { color: #777887; text-decoration: none; font-size: 12px; }
.landing-nav-links a:hover { color: var(--text); }
.landing-nav-actions { display: flex; align-items: center; gap: 8px; }
.landing-login, .hero-secondary { padding: 9px 13px; color: #626472; background: transparent; font-size: 12px; }
.landing-login:hover, .hero-secondary:hover { color: var(--text); }
.landing-cta { display: inline-flex; align-items: center; gap: 18px; padding: 13px 17px; border-radius: 9px; color: #fff; background: #2c2d36; box-shadow: 0 8px 18px rgba(39,40,50,.15); font-size: 12px; font-weight: 700; }
.landing-cta:hover { background: #494b5a; transform: translateY(-1px); }
.landing-cta.small { padding: 9px 13px; background: var(--accent); box-shadow: none; }
.landing-hero { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 54px; max-width: 1180px; margin: 0 auto; padding: 88px 28px 76px; }
.hero-kicker { display: flex; align-items: center; gap: 8px; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.hero-kicker > span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.hero-copy h1 { max-width: 530px; margin: 17px 0 16px; color: #242634; font-size: clamp(37px, 4.2vw, 62px); letter-spacing: -.065em; line-height: 1.1; }
.hero-copy h1 em, .section-intro h2 em, .workflow-copy h2 em, .pricing-heading h2 em, .security-section h2 em { color: var(--accent); font-style: normal; }
.hero-copy p { max-width: 485px; color: #777887; font-size: 14px; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; gap: 13px; margin-top: 28px; }.hero-secondary { padding: 12px 4px; }
.hero-proof { display: flex; align-items: center; gap: 10px; margin-top: 28px; color: #999aa3; font-size: 10px; }.proof-avatars { display: flex; }.proof-avatars i { display: grid; place-items: center; width: 25px; height: 25px; margin-right: -5px; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #6675b9; font-size: 9px; font-style: normal; }.proof-avatars i:nth-child(2) { background: #d88764; }.proof-avatars i:nth-child(3) { background: #6ca68e; }
.hero-product { position: relative; min-width: 0; }.product-window { position: relative; z-index: 1; overflow: hidden; border: 1px solid #dedee7; border-radius: 14px; background: #fff; box-shadow: 0 24px 60px rgba(55,59,93,.16); transform: perspective(1300px) rotateY(-5deg) rotateX(2deg); }.product-window-top { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; color: #9b9ca4; border-bottom: 1px solid #eeeeef; font-size: 9px; }.window-dots { display: flex; gap: 4px; }.window-dots i { width: 6px; height: 6px; border-radius: 50%; background: #dedee4; }.live-label { color: #3b9d76; }.product-window-body { display: grid; grid-template-columns: 150px minmax(0,1fr); min-height: 318px; }.fake-side { padding: 19px 13px; color: #9b9ca4; background: #f5f5f6; font-size: 9px; }.fake-side b { display: block; margin-bottom: 15px; color: #878892; }.fake-side strong { display: flex; align-items: center; gap: 6px; color: #333541; font-size: 10px; }.fake-side strong span { display: grid; place-items: center; width: 21px; height: 25px; border-radius: 3px; color: #fff; background: #4d4888; font-family: serif; font-size: 12px; }.fake-side small { display: block; margin: 4px 0 17px; color: #a9aab1; font-size: 8px; }.fake-side hr { border: 0; border-top: 1px solid #e5e5e7; margin: 17px 0; }.fake-side p { padding: 7px 6px; margin: 0; border-radius: 5px; color: #777984; }.fake-side p:first-of-type { color: #30313c; background: #e9e9ec; }.fake-chat { padding: 42px 39px 30px; background: #fff; }.fake-chat > small { color: #aaaab1; font-size: 9px; }.fake-chat h3 { margin: 39px 0 9px; font-size: 22px; letter-spacing: -.06em; }.fake-chat > p { margin: 0; color: #92939b; font-size: 10px; }.fake-cards { display: flex; gap: 6px; margin-top: 27px; }.fake-cards span { padding: 10px 8px; border: 1px solid #e6e5ea; border-radius: 6px; color: #777985; background: #fcfcfd; font-size: 8px; }.fake-cards span:first-child { color: #6258d8; background: #f6f4ff; }.fake-input { display: flex; align-items: center; justify-content: space-between; margin-top: 53px; padding: 12px 13px; border: 1px solid #d5d4dc; border-radius: 8px; color: #aaaab1; font-size: 10px; box-shadow: 0 4px 10px rgba(30,30,50,.05); }.fake-input b { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 6px; color: #fff; background: var(--accent); font-size: 14px; }.product-glow { position: absolute; right: -10%; bottom: -20%; width: 75%; height: 58%; border-radius: 50%; background: #e2deff; filter: blur(55px); opacity: .65; }
.landing-trust { display: flex; align-items: center; justify-content: space-between; max-width: 1180px; margin: 0 auto; padding: 19px 28px; border-top: 1px solid #f0f0f2; border-bottom: 1px solid #f0f0f2; color: #a3a4ac; font-size: 10px; }.landing-trust div { display: flex; gap: 30px; color: #666874; font-size: 11px; }
.landing-section, .workflow-section, .security-section { max-width: 1180px; margin: 0 auto; padding: 110px 28px; }.section-intro { display: flex; align-items: end; justify-content: space-between; gap: 40px; }.section-intro h2, .workflow-copy h2, .security-section h2 { margin: 14px 0 0; font-size: 41px; letter-spacing: -.06em; line-height: 1.12; }.section-intro p { max-width: 330px; margin: 0; color: #8b8c95; font-size: 13px; line-height: 1.7; }.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 49px; }.feature-grid article { min-height: 215px; padding: 23px; border: 1px solid #e8e8eb; border-radius: 12px; background: #fff; }.feature-grid article:hover { border-color: #cac5ff; box-shadow: 0 13px 30px rgba(76,67,175,.08); }.feature-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; font-size: 16px; }.feature-icon.purple { color: #6459df; background: #f0eeff; }.feature-icon.orange { color: #c46b44; background: #fff0e8; }.feature-icon.green { color: #318866; background: #e9f7f1; }.feature-grid h3 { margin: 31px 0 9px; font-size: 15px; }.feature-grid p { margin: 0; color: #858691; font-size: 12px; line-height: 1.75; }
.workflow-section { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 90px; background: #faf9ff; max-width: none; padding-left: max(28px, calc((100% - 1124px)/2)); padding-right: max(28px, calc((100% - 1124px)/2)); }.workflow-copy p { max-width: 300px; color: #8b8c95; font-size: 13px; line-height: 1.7; }.workflow-steps { display: grid; gap: 0; }.workflow-steps > div { display: flex; align-items: center; gap: 22px; padding: 21px 0; border-bottom: 1px solid #e9e6f3; }.workflow-steps > div:first-child { border-top: 1px solid #e9e6f3; }.workflow-steps b { color: #aaa6c7; font-size: 11px; }.workflow-steps span { display: grid; gap: 5px; }.workflow-steps strong { font-size: 14px; }.workflow-steps small { color: #8b8c95; font-size: 11px; }
.pricing-section { max-width: 1180px; margin: 0 auto; padding: 110px 28px 100px; background: #fff; }.pricing-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; }.pricing-heading h2 { margin: 14px 0 0; font-size: 41px; letter-spacing: -.06em; line-height: 1.12; }.pricing-heading-side { display: grid; justify-items: end; gap: 18px; }.pricing-heading-side > p { max-width: 355px; margin: 0; color: #8b8c95; font-size: 13px; line-height: 1.7; }.billing-toggle { display: inline-flex; padding: 3px; border: 1px solid #e2e1e9; border-radius: 9px; background: #f8f8fb; }.billing-option { padding: 7px 10px; border-radius: 6px; color: #8b8c95; background: transparent; font-size: 10px; }.billing-option.is-active { color: #5147c8; background: #fff; box-shadow: 0 2px 8px rgba(42,39,85,.08); font-weight: 800; }.billing-option span { margin-left: 3px; color: #318866; font-size: 9px; }.pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-top: 49px; }.price-card { position: relative; display: flex; min-height: 407px; flex-direction: column; padding: 22px; border: 1px solid #e8e8eb; border-radius: 13px; background: #fff; }.price-card:hover { border-color: #cac5ff; box-shadow: 0 13px 30px rgba(76,67,175,.08); }.price-card.featured { border-color: #c9c3ff; background: linear-gradient(150deg, #fbfaff 0%, #f5f3ff 100%); box-shadow: 0 13px 30px rgba(76,67,175,.10); }.price-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.price-label { color: var(--text); font-size: 11px; font-weight: 800; }.price-fit { color: #9a9aa4; font-size: 9px; }.price-card h3 { margin: 29px 0 8px; font-size: 20px; letter-spacing: -.05em; }.price-desc { min-height: 43px; margin: 0; color: #858691; font-size: 11px; line-height: 1.65; }.price-value { display: flex; align-items: baseline; gap: 4px; min-height: 60px; margin: 20px 0 18px; }.price-value strong { color: #242634; font-size: 30px; letter-spacing: -.06em; }.price-value span { color: #999aa3; font-size: 11px; }.price-button { width: 100%; padding: 11px 12px; border-radius: 8px; font-size: 11px; font-weight: 800; }.price-button.primary { color: #fff; background: var(--accent); }.price-button.primary:hover { background: #5b4ee5; }.price-button.secondary { color: #595b68; border: 1px solid #dedee6; background: #fff; }.price-button.secondary:hover { color: var(--accent); border-color: #bdb7ff; }.price-card ul { display: grid; gap: 10px; margin: 22px 0 0; padding: 19px 0 0; border-top: 1px solid #ececf0; list-style: none; }.price-card li { color: #666874; font-size: 11px; line-height: 1.45; }.price-card li::before { margin-right: 7px; color: var(--green); content: '✓'; font-weight: 800; }.price-badge { position: absolute; top: -11px; right: 16px; padding: 5px 8px; border-radius: 5px; color: #fff; background: var(--accent); font-size: 9px; font-weight: 800; }.pricing-note { display: flex; justify-content: space-between; gap: 20px; margin-top: 18px; color: #9a9aa3; font-size: 10px; line-height: 1.6; }.pricing-faq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-top: 34px; padding-top: 28px; border-top: 1px solid #efeff2; }.pricing-faq > div { display: grid; gap: 7px; }.pricing-faq strong { color: #4a4b57; font-size: 11px; }.pricing-faq span { color: #92939b; font-size: 10px; line-height: 1.65; }
.security-section { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }.security-section p { max-width: 450px; color: #858691; font-size: 13px; line-height: 1.8; }.security-points { display: grid; gap: 13px; }.security-points div { display: flex; align-items: center; gap: 13px; padding: 15px; border: 1px solid #e8e8eb; border-radius: 9px; font-size: 12px; }.security-points b { color: var(--green); }.landing-footer { display: flex; align-items: center; justify-content: space-between; max-width: 1180px; margin: 0 auto; padding: 23px 28px 28px; border-top: 1px solid #efeff1; color: #a5a6ad; font-size: 10px; }.landing-footer .landing-brand { font-size: 14px; }
.admin-only[hidden] { display: none !important; }
.auth-screen { position: fixed; inset: 0; display: none; place-items: center; padding: 20px; background: radial-gradient(circle at 20% 10%, #f0eeff 0, transparent 34%), var(--bg); z-index: 20; }
.auth-screen, .auth-card, .auth-card input { pointer-events: auto; }
.auth-card input { user-select: text; -webkit-user-select: text; }
.auth-card { width: min(390px, 100%); padding: 34px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 18px 60px rgba(40,42,65,.12); }
.auth-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 30px; font-size: 17px; }
.auth-card h1 { margin: 0; font-size: 23px; letter-spacing: -.04em; }
.auth-card > p { margin: 8px 0 22px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.auth-card label { display: grid; gap: 7px; margin-top: 14px; color: var(--muted); font-size: 11px; font-weight: 700; }
.auth-card input { width: 100%; padding: 10px 11px; border: 1px solid var(--line-dark); border-radius: 8px; outline: 0; color: var(--text); background: #fff; font-size: 13px; font-weight: 400; }
.auth-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.auth-submit { width: 100%; margin-top: 20px; padding: 11px; border-radius: 8px; color: #fff; background: var(--accent); font-size: 13px; font-weight: 700; }
.auth-submit:hover { background: #5a4ee4; }
.auth-switch { width: 100%; margin-top: 13px; padding: 6px; color: var(--accent); background: transparent; font-size: 11px; }
.auth-error { min-height: 16px; margin-top: 11px; color: #b34d57; font-size: 11px; }
.auth-note { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--subtle); font-size: 10px; line-height: 1.5; }
.app-shell { display: grid; grid-template-columns: 264px minmax(0, 1fr) 0; width: 100vw; height: 100vh; background: var(--panel); transition: grid-template-columns .22s ease; }
.app-shell.context-open { grid-template-columns: 264px minmax(0, 1fr) 312px; }
.sidebar { display: flex; flex-direction: column; min-width: 0; background: var(--sidebar); border-right: 1px solid var(--line); padding: 14px 12px 10px; overflow: hidden; }
.sidebar-top { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 20px; }
.brand { display: inline-flex; align-items: center; gap: 9px; padding: 0; color: var(--text); background: transparent; font-weight: 750; font-size: 17px; letter-spacing: -.04em; }
.brand-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #fff; background: linear-gradient(135deg, #7469ff, #5148d9); font-family: Georgia, serif; font-size: 17px; font-style: italic; }
.brand-logo { background: #5b50df url('/assets/xujing-logo.svg') center / cover no-repeat !important; font-size: 0 !important; }
.brand-word { white-space: nowrap; }
.icon-button { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--muted); background: transparent; font-size: 17px; }
.icon-button:hover { color: var(--text); background: #e7e7e9; }
.sidebar-collapse { font-size: 24px; line-height: 1; }
.new-chat { display: flex; align-items: center; gap: 9px; width: 100%; padding: 11px 12px; border: 1px solid var(--line-dark); border-radius: 9px; color: var(--text); background: #fff; font-size: 13px; font-weight: 650; box-shadow: 0 1px 2px rgba(0,0,0,.02); }
.new-chat:hover { background: #fbfbff; border-color: #bdb7ff; }
.new-chat-icon { color: var(--accent); font-size: 19px; font-weight: 400; }
kbd { margin-left: auto; color: var(--subtle); background: #f0f0f1; padding: 2px 5px; border-radius: 4px; font-size: 10px; font-family: inherit; }
.sidebar-section { margin-top: 25px; }
.section-caption { padding: 0 8px 8px; color: var(--subtle); font-size: 11px; font-weight: 700; }
.project-card { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 8px; border-radius: 8px; color: var(--text); background: transparent; text-align: left; }
.project-card:hover, .project-card.is-active { background: #e6e6e8; }
.project-empty { padding: 13px 8px 8px; color: var(--subtle); font-size: 11px; line-height: 1.6; }.project-empty small { font-size: 10px; }
.project-cover { display: grid; place-items: center; width: 30px; height: 34px; color: #fff; background: linear-gradient(135deg, #302b64, #7872c5); border-radius: 4px; font-family: serif; font-size: 18px; }
.project-card-text { display: grid; min-width: 0; gap: 2px; }
.project-card-text strong { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-card-text small { color: var(--muted); font-size: 10px; }
.more-dots { margin-left: auto; color: var(--subtle); letter-spacing: 1px; }
.add-project { display: flex; gap: 7px; align-items: center; width: 100%; margin-top: 5px; padding: 7px 8px; color: var(--muted); background: transparent; text-align: left; font-size: 12px; }
.add-project:hover { color: var(--accent); }
.conversation-section { flex: 1; min-height: 0; overflow: hidden; }
.conversation-heading { display: flex; align-items: center; justify-content: space-between; }
.mini-action { display: inline-grid; place-items: center; width: 23px; height: 23px; border-radius: 6px; color: var(--subtle); background: transparent; font-size: 17px; }
.mini-action:hover { color: var(--text); background: #e5e5e7; }
.conversation-list { display: grid; gap: 2px; max-height: 100%; overflow-y: auto; }
.conversation-item { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 6px; width: 100%; padding: 9px 8px; border-radius: 7px; color: var(--muted); background: transparent; text-align: left; }
.conversation-item:hover, .conversation-item.is-active { color: var(--text); background: #e5e5e7; }
.conversation-empty { padding: 12px 8px; color: var(--subtle); font-size: 11px; }
.conversation-icon { color: var(--subtle); font-size: 12px; padding-top: 2px; }
.conversation-copy { display: grid; gap: 2px; min-width: 0; }
.conversation-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 550; }
.conversation-copy small { color: var(--subtle); font-size: 10px; }
.sidebar-bottom { display: grid; gap: 3px; padding-top: 11px; border-top: 1px solid var(--line); }
.storage-status { display: flex; align-items: center; gap: 7px; padding: 4px 7px 8px; color: var(--subtle); font-size: 10px; }
.online-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(41,150,110,.12); }
.sidebar-link { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px; border-radius: 7px; color: var(--muted); background: transparent; text-align: left; font-size: 12px; }
.sidebar-link:hover { color: var(--text); background: #e6e6e8; }
.sidebar-link-icon { width: 17px; color: var(--subtle); text-align: center; font-size: 15px; }
.user-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 9px 7px 2px; border-top: 1px solid var(--line); }
.avatar { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: #374151; font-size: 12px; }
.user-row > span:nth-child(2) { display: grid; gap: 1px; min-width: 0; }
.user-row strong { font-size: 11px; font-weight: 650; }
.user-row small { color: var(--subtle); font-size: 10px; }
.user-row .mini-action { margin-left: auto; }
.main-panel { display: flex; flex-direction: column; min-width: 0; height: 100vh; background: #fff; }
.topbar { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 26px; border-bottom: 1px solid var(--line); }
.mobile-menu { display: none; }
.conversation-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; font-weight: 650; }
.title-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warm); }
.title-edit { padding: 2px 4px; color: var(--subtle); background: transparent; opacity: 0; }
.conversation-title:hover .title-edit { opacity: 1; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.top-link { padding: 7px 9px; border-radius: 7px; color: var(--muted); background: transparent; font-size: 11px; }
.top-link:hover { color: var(--text); background: var(--bg); }
.small-avatar { width: 27px; height: 27px; color: #fff; background: #374151; font-size: 11px; }
.account-trigger { cursor: pointer; }
.account-menu { position: fixed; z-index: 20; width: 238px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 18px 45px rgba(28,30,46,.18); }
.account-menu-head { display: grid; gap: 4px; padding: 10px 11px 12px; border-bottom: 1px solid var(--line); }
.account-menu-head strong { font-size: 12px; }.account-menu-head small { color: var(--muted); font-size: 10px; }
.account-menu > button { display:flex; align-items:center; gap:9px; width:100%; padding:10px 11px; border-radius:8px; color:var(--text); background:transparent; text-align:left; font-size:11px; }
.account-menu > button:hover { background:var(--bg); }.account-menu > button > span:first-child { width:16px; color:var(--accent); text-align:center; }.account-menu .danger { color:#b34d57; }.account-menu .danger > span:first-child { color:#b34d57; }
.menu-soon { margin-left:auto; color:var(--subtle); font-size:9px; }.account-menu-divider { height:1px; margin:4px 0; background:var(--line); }
.chat-scroll { flex: 1; overflow-y: auto; }
.chat-inner { width: min(850px, calc(100% - 48px)); margin: 0 auto; padding: 42px 0 160px; }
.welcome { padding: 40px 0 25px; text-align: center; }
.welcome-mark { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 17px; border-radius: 15px; color: #fff; background: linear-gradient(135deg, #7469ff, #5148d9); font-family: Georgia, serif; font-size: 26px; font-style: italic; box-shadow: 0 10px 24px rgba(91,80,226,.22); }
.welcome h1 { margin: 0; font-size: 28px; letter-spacing: -.05em; font-weight: 730; }
.welcome p { margin: 9px 0 0; color: var(--muted); font-size: 13px; }
.quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; max-width: 620px; margin: 26px auto 0; text-align: left; }
.quick-card { display: flex; align-items: flex-start; gap: 10px; min-height: 76px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; color: var(--text); background: #fff; transition: .15s; }
.quick-card:hover { border-color: #bdb7ff; background: #fcfbff; transform: translateY(-1px); box-shadow: var(--shadow); }
.quick-icon { display: grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; color: var(--accent); background: var(--accent-soft); font-size: 14px; }
.quick-card strong { display: block; font-size: 12px; font-weight: 700; }
.quick-card small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.message { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; margin: 30px 0; }
.message-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 11px; font-weight: 700; }
.message.user .message-avatar { color: #fff; background: #374151; }
.message.assistant .message-avatar { color: #fff; background: linear-gradient(135deg, #7469ff, #5148d9); font-family: Georgia, serif; font-style: italic; }
.message-body { min-width: 0; padding-top: 4px; }
.message-role { margin-bottom: 7px; color: var(--muted); font-size: 11px; font-weight: 700; }
.message-text { color: #27282c; font-size: 14px; line-height: 1.85; white-space: pre-wrap; }
.message-text strong { font-weight: 750; }
.message-actions { display: flex; gap: 6px; margin-top: 10px; }
.message-action { padding: 3px 7px; border-radius: 5px; color: var(--subtle); background: transparent; font-size: 11px; }
.message-action:hover { color: var(--text); background: var(--bg); }
.typing { display: inline-flex; gap: 4px; align-items: center; height: 21px; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: bounce 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-4px); opacity: 1; } }
.composer-area { position: relative; width: min(850px, calc(100% - 48px)); margin: -124px auto 0; padding-bottom: 18px; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 24%); z-index: 2; }
.composer-tools { display: flex; align-items: center; gap: 9px; padding: 0 5px 8px; }
.mode-select { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 6px; color: var(--muted); background: transparent; font-size: 11px; }
.mode-select:hover { color: var(--text); background: var(--bg); }
.mode-icon { color: var(--accent); font-size: 13px; }.chevron { color: var(--subtle); font-size: 12px; }
.context-hint { color: var(--subtle); font-size: 10px; }
.composer-box { border: 1px solid #cfcfd5; border-radius: 14px; background: #fff; box-shadow: 0 4px 18px rgba(34,37,53,.08); transition: border-color .15s, box-shadow .15s; }
.composer-box:focus-within { border-color: #aea8f9; box-shadow: 0 4px 20px rgba(91,80,226,.13); }
#composer { display: block; width: 100%; min-height: 28px; max-height: 160px; padding: 14px 15px 4px; border: 0; outline: 0; resize: none; color: var(--text); background: transparent; font-size: 14px; line-height: 1.6; }
#composer::placeholder { color: #a1a3aa; }
.composer-bottom { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 8px 10px; }
.composer-left { display: flex; align-items: center; gap: 8px; }.round-tool { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; color: var(--muted); background: transparent; font-size: 19px; }.round-tool:hover { color: var(--text); background: var(--bg); }
.composer-tip { color: var(--subtle); font-size: 10px; }.send-button { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; color: #fff; background: #b8b8bd; font-size: 21px; line-height: 1; transition: .15s; }.send-button.ready { background: var(--accent); }.send-button.ready:hover { background: #5b4ee5; transform: translateY(-1px); }
.composer-note { padding: 9px 0 0; color: #a3a4aa; text-align: center; font-size: 10px; }
.context-panel { min-width: 0; overflow: hidden; background: #fbfbfc; border-left: 1px solid var(--line); }
.context-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 25px 18px 12px; }.context-header h2 { margin: 5px 0 0; font-size: 16px; letter-spacing: -.03em; }.eyebrow { color: var(--subtle); font-size: 9px; letter-spacing: .12em; font-weight: 800; }
.context-tabs { display: flex; gap: 2px; padding: 0 18px; border-bottom: 1px solid var(--line); }.context-tab { padding: 9px 5px 10px; margin-right: 13px; color: var(--muted); background: transparent; border-bottom: 2px solid transparent; font-size: 11px; }.context-tab.is-active { color: var(--text); border-color: var(--accent); font-weight: 700; }
.context-content { padding: 19px 18px; }.context-block { margin-bottom: 21px; }.context-block h3 { margin: 0 0 8px; font-size: 12px; }.context-block p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }.context-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }.context-list li { padding: 8px 9px; border-radius: 8px; color: #51535b; background: #f1f1f4; font-size: 11px; line-height: 1.5; }.context-list li b { display: block; color: var(--text); font-size: 11px; margin-bottom: 2px; }.context-edit { width: calc(100% - 36px); margin: 0 18px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: #fff; text-align: left; font-size: 11px; }.context-edit:hover { border-color: #bdb7ff; color: var(--accent); }
.modal-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(26,28,38,.42); z-index: 10; }.modal { width: min(540px, 100%); max-height: 90vh; overflow: auto; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 22px 70px rgba(0,0,0,.2); }.modal h2 { margin: 0 0 6px; font-size: 18px; }.modal p { margin: 0 0 19px; color: var(--muted); font-size: 12px; line-height: 1.6; }.modal-field { display: grid; gap: 7px; margin: 12px 0; }.modal-field label { color: var(--muted); font-size: 11px; font-weight: 700; }.modal-field input, .modal-field textarea, .modal-field select { width: 100%; padding: 9px 10px; border: 1px solid var(--line-dark); border-radius: 8px; outline: 0; color: var(--text); background: #fff; font-size: 12px; }.modal-field textarea { min-height: 84px; resize: vertical; }.modal-field input:focus, .modal-field textarea:focus, .modal-field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 19px; }.modal-button { padding: 9px 13px; border-radius: 8px; font-size: 12px; font-weight: 700; }.modal-button.secondary { color: var(--muted); background: var(--bg); }.modal-button.primary { color: #fff; background: var(--accent); }
.library-grid { display: grid; gap: 11px; }.library-item { padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: #fafafa; }.library-item h4 { margin: 0 0 5px; font-size: 12px; }.library-item p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }.library-label { margin-bottom: 5px; color: var(--accent); font-size: 10px; font-weight: 800; }
.library-section { display:grid; gap:10px; margin:16px 0; }.library-section h3 { margin:0; font-size:13px; }.library-editor-item { display:grid; gap:8px; }.library-title, .library-body, .library-add-row input, .library-add-row select { width:100%; box-sizing:border-box; padding:8px 9px; border:1px solid var(--line-dark); border-radius:7px; background:#fff; color:var(--text); font-size:12px; }.library-body { resize:vertical; min-height:70px; line-height:1.5; }.library-add-row { display:grid; grid-template-columns:1fr 1.4fr auto; gap:7px; align-items:center; }.library-item-actions { display:flex; gap:7px; }.modal-button.danger { color:#b34d57; background:#fff0f1; }.library-editor-item .modal-button { justify-self:start; }
.toast-root { position: fixed; right: 22px; bottom: 22px; display: grid; gap: 8px; z-index: 12; }.toast { padding: 10px 13px; border-radius: 8px; color: #fff; background: #292b33; box-shadow: 0 8px 24px rgba(0,0,0,.18); font-size: 11px; animation: toast-in .2s ease; }@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.app-shell.sidebar-collapsed { grid-template-columns: 68px minmax(0, 1fr) 0; }.app-shell.sidebar-collapsed.context-open { grid-template-columns: 68px minmax(0, 1fr) 312px; }.sidebar-collapsed .brand-word, .sidebar-collapsed .new-chat span:not(.new-chat-icon), .sidebar-collapsed .new-chat kbd, .sidebar-collapsed .section-caption, .sidebar-collapsed .project-card-text, .sidebar-collapsed .more-dots, .sidebar-collapsed .add-project, .sidebar-collapsed .conversation-copy, .sidebar-collapsed .sidebar-link:not(:last-of-type), .sidebar-collapsed .sidebar-link-icon + *, .sidebar-collapsed .storage-status span:last-child, .sidebar-collapsed .user-row span:nth-child(2), .sidebar-collapsed .user-row .mini-action { display: none; }.sidebar-collapsed .sidebar { padding-left: 10px; padding-right: 10px; }.sidebar-collapsed .sidebar-top { justify-content: center; }.sidebar-collapsed .sidebar-collapse { transform: rotate(180deg); }.sidebar-collapsed .new-chat { justify-content: center; padding: 10px; }.sidebar-collapsed .project-card { justify-content: center; }.sidebar-collapsed .conversation-item { display: flex; justify-content: center; }.sidebar-collapsed .sidebar-link { justify-content: center; font-size: 18px; }.sidebar-collapsed .user-row { justify-content: center; }
@media (max-width: 950px) { .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .app-shell.context-open { grid-template-columns: 264px minmax(0, 1fr) 280px; }.context-panel { position: absolute; inset: 64px 0 0 auto; width: 300px; box-shadow: -10px 0 30px rgba(0,0,0,.1); z-index: 4; } }
@media (max-width: 720px) { html, body { overflow: hidden; }.landing-nav-links { display: none; }.landing-hero { grid-template-columns: 1fr; padding-top: 55px; }.landing-trust { display: block; }.landing-trust div { flex-wrap: wrap; gap: 12px; margin-top: 12px; }.section-intro, .pricing-heading { display: block; }.pricing-heading-side { display: block; }.pricing-heading-side > p { margin-top: 18px; }.billing-toggle { margin-top: 16px; }.pricing-grid { grid-template-columns: 1fr; margin-top: 31px; }.pricing-note { display: grid; gap: 5px; }.pricing-faq { grid-template-columns: 1fr; gap: 17px; }.app-shell, .app-shell.context-open, .app-shell.sidebar-collapsed, .app-shell.sidebar-collapsed.context-open { display: block; }.sidebar { position: fixed; inset: 0 auto 0 0; width: 264px; transform: translateX(-102%); z-index: 8; box-shadow: 10px 0 30px rgba(0,0,0,.12); transition: transform .2s; }.sidebar.mobile-open { transform: translateX(0); }.main-panel { width: 100vw; }.mobile-menu { display: inline-grid; margin-right: 7px; }.topbar { height: 56px; padding: 0 14px; }.conversation-title { flex: 1; }.top-link { display: none; }.chat-inner, .composer-area { width: calc(100% - 28px); }.chat-inner { padding-top: 18px; }.welcome { padding-top: 35px; }.welcome h1 { font-size: 24px; }.quick-grid { grid-template-columns: 1fr; margin-top: 21px; }.quick-card { min-height: 62px; }.message { grid-template-columns: 27px minmax(0, 1fr); gap: 10px; margin: 24px 0; }.message-avatar { width: 27px; height: 27px; }.message-text { font-size: 13px; }.composer-area { margin-top: -112px; }.composer-tip { display: none; }.context-panel { inset: 56px 0 0 auto; width: min(310px, 92vw); }.app-shell.context-open .main-panel { filter: brightness(.96); } }