:root {
  --ink-900: #27332c;
  --ink-700: #4c5a51;
  --ink-500: #748077;
  --paper-0: #fffefa;
  --paper-50: #f7f4ec;
  --sand-100: #eee7d9;
  --sand-200: #e5dac7;
  --sage-100: #e5eee2;
  --sage-300: #b8c9b3;
  --sage-600: #59755d;
  --terracotta-100: #fae8dd;
  --terracotta-300: #d6a080;
  --terracotta-700: #925b43;
  --sky-100: #e7f1f1;
  --sky-200: #c9dde0;
  --line: rgba(54, 68, 57, 0.12);
  --shadow: 0 14px 40px rgba(51, 67, 52, 0.08);
  --shadow-soft: 0 8px 22px rgba(51, 67, 52, 0.06);
  --radius-xl: 32px;
  --radius-lg: 22px;
  --radius-md: 15px;
  --radius-sm: 11px;
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink-900);
  background: var(--paper-0);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper-0); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.eyebrow { font-size: 13px; letter-spacing: .12em; font-weight: 700; color: var(--sage-600); }
.muted { color: var(--ink-500); }
.small { font-size: 13px; line-height: 1.65; }
.serif { font-family: inherit; font-style: normal; font-weight: 600; color: var(--sage-300); }

.site-header { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; letter-spacing: .04em; }
.brand-mark { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; }
.brand-mark img { display: block; width: 32px; height: 32px; }
.main-nav { display: flex; align-items: center; gap: 24px; color: var(--ink-700); font-size: 14px; }
.main-nav a:hover { color: var(--sage-600); }

.btn { min-height: 45px; padding: 0 19px; border-radius: 14px; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 14px; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--sage-600); color: white; box-shadow: 0 8px 18px rgba(89,117,93,.18); }
.btn-primary:hover { background: #46634b; }
.btn-secondary { border-color: var(--line); color: var(--ink-900); background: rgba(255,255,255,.58); }
.btn-quiet { background: transparent; color: var(--ink-700); padding-left: 4px; padding-right: 4px; }
.btn-wide { width: 100%; }
.btn-sm { min-height: 35px; padding: 0 13px; border-radius: 11px; font-size: 13px; }

/* Landing */
.hero { position: relative; overflow: hidden; padding: 58px 0 80px; min-height: 600px; }
.hero::before { content: ""; position: absolute; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(184,201,179,.55) 0%, rgba(184,201,179,0) 68%); top: -220px; right: -80px; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.03fr .97fr; gap: 50px; align-items: center; }
.hero h1 { font-size: clamp(40px, 5vw, 66px); line-height: 1.15; letter-spacing: -.055em; margin: 15px 0 23px; font-weight: 700; }
.hero h1 .emphasis { color: var(--sage-600); font-family: inherit; font-weight: 700; font-style: normal; letter-spacing: -.055em; }
.hero-copy { font-size: 18px; line-height: 1.85; color: var(--ink-700); max-width: 520px; margin: 0 0 28px; }
.hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero-hint { margin-top: 18px; color: var(--ink-500); font-size: 13px; }

.hero-visual { height: 478px; border-radius: var(--radius-xl); background: #e9e7dd; position: relative; overflow: hidden; box-shadow: var(--shadow); }
.sun { position: absolute; width: 196px; height: 196px; right: 48px; top: 36px; border-radius: 50%; background: #f7d9a8; opacity: .8; filter: blur(1px); }
.window { position: absolute; inset: 32px 30px 0 46%; border-radius: 90px 90px 0 0; background: linear-gradient(145deg, #b8d0ca, #dfe8dc 63%, #f1e6c8); border: 9px solid #f4f1e9; }
.window::before { content: ""; position: absolute; inset: 0 48% 0 auto; width: 3px; background: rgba(255,255,255,.7); }
.window::after { content: ""; position: absolute; bottom: 15%; left: -12%; width: 124%; height: 32%; background: radial-gradient(ellipse at 50% 100%, #75916d 0 18%, transparent 19%), radial-gradient(ellipse at 18% 100%, #66855f 0 16%, transparent 17%), radial-gradient(ellipse at 85% 100%, #819e73 0 21%, transparent 22%); opacity: .8; }
.visual-floor { position: absolute; left: -6%; right: -6%; bottom: -18%; height: 47%; background: repeating-linear-gradient(80deg, #b28a67 0 9px, #cba983 10px 49px); transform: perspective(340px) rotateX(52deg); opacity: .84; }
.sofa { position: absolute; left: 47px; bottom: 72px; width: 235px; height: 140px; background: #efe5d5; border-radius: 75px 75px 16px 16px; z-index: 2; box-shadow: inset 0 -12px 0 rgba(184,156,123,.12); }
.sofa::before, .sofa::after { content: ""; position: absolute; width: 63px; height: 73px; background: #e5d5be; border-radius: 34px 34px 12px 12px; top: 22px; }
.sofa::before { left: -16px; }.sofa::after { right: -16px; }
.hero-plant { position: absolute; width: 80px; height: 170px; right: 56px; bottom: 54px; z-index: 3; }
.hero-plant::before { content: ""; position: absolute; bottom: 0; left: 22px; border-left: 18px solid transparent; border-right: 18px solid transparent; border-bottom: 44px solid #af855d; }
.hero-plant::after { content: "✦"; font-size: 142px; position: absolute; line-height: .8; top: -3px; left: -19px; color: #688160; transform: rotate(12deg); }
.floating-card { position: absolute; z-index: 5; border: 1px solid rgba(255,255,255,.75); backdrop-filter: blur(8px); background: rgba(255,255,255,.74); border-radius: 18px; padding: 14px 16px; box-shadow: var(--shadow-soft); }
.floating-card strong { display: block; font-size: 13px; }.floating-card span { display: block; font-size: 12px; color: var(--ink-500); margin-top: 4px; }
.floating-card.card-1 { left: 22px; top: 30px; }.floating-card.card-2 { right: 20px; bottom: 22px; }

.trust-strip { padding: 20px 0 88px; }
.trust-inner { display: flex; gap: 20px; align-items: center; justify-content: space-between; padding: 18px 24px; background: var(--paper-50); border-radius: 20px; color: var(--ink-700); font-size: 14px; }
.trust-points { display: flex; gap: 25px; flex-wrap: wrap; }.trust-points span::before { content: "●"; color: var(--sage-600); font-size: 9px; margin-right: 8px; }

.section { padding: 92px 0; }.section.tinted { background: var(--paper-50); }
.section-heading { max-width: 660px; margin-bottom: 38px; }.section-heading h2 { font-size: clamp(27px,3.1vw,40px); line-height: 1.28; letter-spacing: -.04em; margin: 10px 0 14px; }.section-heading p { color: var(--ink-700); line-height: 1.8; margin: 0; }
.ip-intro { display: grid; grid-template-columns: 1fr .92fr; gap: 54px; align-items: center; }.ip-figure { margin: 0; padding: 14px 14px 11px; background: var(--paper-0); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); }.ip-figure img { display: block; width: 100%; aspect-ratio: 1.5 / 1; object-fit: cover; object-position: center; border-radius: 21px; }.ip-figure figcaption { color: var(--ink-500); font-size: 12px; margin: 10px 4px 1px; }
.mascot-pose { display: inline-block; width: 144px; aspect-ratio: 1.5 / 1; background-image: url("./assets/xiaozhu-q-ip-concept-v1.png"); background-size: 200% 200%; background-repeat: no-repeat; }.mascot-pose.welcome { background-position: 0 0; }.mascot-pose.plan { background-position: 100% 0; }.mascot-pose.waiting, .mascot-pose.plant { background-position: 0 100%; }.mascot-pose.success { background-position: 100% 100%; }
.three-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.step-card { background: var(--paper-0); border: 1px solid var(--line); padding: 28px; border-radius: var(--radius-lg); min-height: 230px; }.step-no { color: var(--terracotta-700); font-family: inherit; font-weight: 700; font-style: normal; font-size: 24px; }.step-card h3 { margin: 35px 0 8px; font-size: 19px; }.step-card p { color: var(--ink-700); font-size: 14px; line-height: 1.75; margin: 0; }
.example-panel { border-radius: var(--radius-xl); background: var(--ink-900); padding: 46px; color: white; display: grid; grid-template-columns: .92fr 1.08fr; gap: 55px; align-items: center; }.example-panel .eyebrow { color: var(--sage-300); }.example-panel h2 { font-size: 36px; line-height: 1.3; margin: 10px 0 14px; }.example-panel p { color: rgba(255,255,255,.72); line-height: 1.8; }.recipe-preview { background: #fffefa; border-radius: 21px; padding: 24px; color: var(--ink-900); box-shadow: 0 15px 30px rgba(0,0,0,.14); }.recipe-preview h3 { margin: 0 0 16px; font-size: 18px; }.recipe-row { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 13px; }.recipe-row b { width: 66px; flex: 0 0 auto; color: var(--ink-500); font-weight: 500; }.color-dots { display: flex; gap: 7px; padding-top: 3px; }.color-dots i { width: 19px; height: 19px; border-radius: 50%; display: block; border: 1px solid rgba(0,0,0,.07); }
.ai-section { background: linear-gradient(180deg, var(--paper-0) 0%, #f4f1e8 100%); }
.ai-panel { display:grid; grid-template-columns:1.02fr .98fr; gap:22px; align-items:stretch; }
.ai-copy { border:1px solid var(--line); border-radius:var(--radius-xl); padding:38px; background:rgba(255,254,250,.78); box-shadow:var(--shadow-soft); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.ai-copy h2 { font-size:clamp(28px,3.4vw,43px); line-height:1.28; letter-spacing:-.045em; margin:12px 0 16px; }
.ai-copy p { color:var(--ink-700); line-height:1.85; margin:0 0 24px; max-width:620px; }
.ai-capabilities { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.ai-capabilities article { min-height:150px; border:1px solid var(--line); border-radius:18px; background:var(--paper-0); padding:18px; }
.ai-capabilities b { display:block; font-size:15px; margin-bottom:8px; }
.ai-capabilities span { display:block; color:var(--ink-700); font-size:13px; line-height:1.68; }
.ai-visual { grid-column:1 / -1; display:grid; grid-template-columns:.78fr 1.22fr; gap:14px; align-items:center; border:1px solid rgba(89,117,93,.18); border-radius:var(--radius-xl); padding:18px; background:#eaf0e5; }
.ai-orbit { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.ai-orbit span { min-height:58px; display:grid; place-items:center; border:1px solid rgba(89,117,93,.18); border-radius:14px; background:rgba(255,254,250,.72); color:#3f5f44; font-weight:700; font-size:14px; }
.ai-card { border:1px solid rgba(255,255,255,.74); border-radius:20px; background:var(--paper-0); padding:22px; box-shadow:var(--shadow-soft); }
.ai-card small { display:block; color:var(--sage-600); font-size:12px; font-weight:800; letter-spacing:.1em; }
.ai-card strong { display:block; font-size:21px; letter-spacing:-.03em; margin:8px 0 9px; }
.ai-card p { color:var(--ink-700); line-height:1.7; margin:0; font-size:14px; }
.mini-link-section { background:var(--paper-0); overflow:hidden; }
.mini-link-panel { display:grid; grid-template-columns:1.02fr .98fr; gap:38px; align-items:center; }
.mini-link-copy h2 { font-size:clamp(29px,3.5vw,44px); line-height:1.28; letter-spacing:-.045em; margin:12px 0 16px; }
.mini-link-copy p { max-width:650px; margin:0 0 22px; color:var(--ink-700); line-height:1.85; }
.mini-flow { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
.mini-flow span { border:1px solid rgba(89,117,93,.18); border-radius:999px; background:var(--sage-100); color:#3f5f44; padding:8px 11px; font-size:12px; font-weight:800; }
.mini-scene-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.mini-scene-grid article { border:1px solid var(--line); border-radius:16px; background:var(--paper-50); padding:14px; }
.mini-scene-grid b { display:block; font-size:14px; margin-bottom:6px; }
.mini-scene-grid span { display:block; color:var(--ink-700); font-size:12px; line-height:1.6; }
.mini-phone { width:min(390px, 100%); justify-self:center; border:9px solid #1f2b25; border-radius:42px; background:#fbfaf5; box-shadow:0 34px 80px rgba(39,51,44,.2); padding:18px; }
.mini-phone-top { display:flex; align-items:center; justify-content:space-between; color:var(--ink-900); font-size:12px; font-weight:800; margin-bottom:12px; }
.mini-project-card { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:15px; border:1px solid var(--line); border-radius:22px; background:linear-gradient(135deg,#eff5ec,#fff9f3); }
.mini-project-card span,.mini-confirm-card span,.mini-week-card span,.mini-record-card span { display:block; color:var(--sage-600); font-size:11px; font-weight:800; }
.mini-project-card strong { display:block; margin-top:5px; font-size:14px; line-height:1.45; }
.mini-project-card img { width:62px; height:62px; border:1px solid var(--line); border-radius:20px; background:var(--paper-0); object-fit:contain; box-shadow:var(--shadow-soft); }
.mini-confirm-card,.mini-week-card,.mini-record-card { border:1px solid var(--line); border-radius:20px; background:rgba(255,254,250,.86); box-shadow:0 10px 24px rgba(51,67,52,.05); }
.mini-confirm-card { margin-top:12px; padding:16px; }
.mini-confirm-card b { display:block; margin-top:7px; font-size:16px; line-height:1.45; }
.mini-action-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:9px; margin-top:12px; }
.mini-action-grid span { min-height:56px; display:grid; place-items:center; text-align:center; border:1px solid var(--line); border-radius:17px; background:var(--sage-100); color:#3f5f44; font-size:12px; font-weight:800; padding:8px; }
.mini-action-grid span:nth-child(3),.mini-action-grid span:nth-child(6) { background:var(--terracotta-100); color:var(--terracotta-700); }
.mini-action-grid span:nth-child(4) { background:var(--sky-100); color:#386168; }
.mini-week-card { margin-top:12px; padding:16px; }
.mini-week-card b { display:block; margin-top:4px; font-size:15px; }
.mini-week-card ul { list-style:none; padding:0; margin:12px 0 0; display:grid; gap:8px; }
.mini-week-card li { position:relative; min-height:34px; display:flex; align-items:center; border:1px solid var(--line); border-radius:13px; background:var(--paper-50); color:var(--ink-700); font-size:12px; padding:8px 10px 8px 30px; }
.mini-week-card li::before { content:""; position:absolute; left:10px; width:11px; height:11px; border:1.5px solid var(--sage-600); border-radius:4px; }
.mini-week-card li.done::before { background:var(--sage-600); }
.mini-record-card { margin-top:12px; padding:13px; display:flex; align-items:center; gap:12px; }
.mini-record-card img { width:50px; height:50px; border:1px solid var(--line); border-radius:16px; background:var(--paper-0); object-fit:contain; flex:0 0 auto; }
.mini-record-card b { display:block; font-size:14px; margin-bottom:4px; }
.mini-record-card span { color:var(--ink-500); line-height:1.45; font-weight:600; }
.membership-section { background:var(--paper-50); }
.membership-panel { display:grid; grid-template-columns:1fr 340px; gap:18px; align-items:stretch; }
.membership-copy { border:1px solid var(--line); border-radius:var(--radius-xl); background:var(--paper-0); padding:38px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; box-shadow:var(--shadow-soft); }
.membership-copy h2 { font-size:clamp(29px,3.5vw,44px); line-height:1.28; letter-spacing:0; margin:12px 0 16px; }
.membership-copy p { color:var(--ink-700); line-height:1.85; margin:0 0 24px; max-width:700px; }
.membership-actions { display:flex; flex-wrap:wrap; gap:12px; }
.pricing-card { border:1px solid rgba(89,117,93,.18); border-radius:var(--radius-xl); background:#edf3e9; padding:26px; box-shadow:var(--shadow-soft); display:flex; flex-direction:column; justify-content:center; }
.price-line { display:flex; align-items:flex-end; gap:8px; margin:16px 0 8px; }
.price-line b { font-size:56px; line-height:.9; letter-spacing:0; }
.price-line span { color:var(--ink-700); font-weight:800; padding-bottom:5px; }
.pricing-card small,.member-price-box p { color:var(--ink-700); line-height:1.65; }
.member-paths { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.member-paths span { border:1px solid rgba(89,117,93,.18); border-radius:999px; background:rgba(255,254,250,.72); color:#3f5f44; padding:7px 9px; font-size:12px; font-weight:800; }
.membership-compare { grid-column:1 / -1; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
.membership-compare article { border:1px solid var(--line); border-radius:20px; background:var(--paper-0); padding:22px; }
.membership-compare article.premium { background:linear-gradient(135deg,#fffefa,#e8f0e4); border-color:rgba(89,117,93,.22); }
.compare-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:15px; }
.compare-head b { display:block; font-size:18px; }
.compare-head span { color:var(--ink-500); font-size:12px; line-height:1.55; text-align:right; }
.membership-compare ul { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.membership-compare li { position:relative; color:var(--ink-700); font-size:13px; line-height:1.6; padding-left:19px; }
.membership-compare li::before { content:""; position:absolute; left:0; top:.58em; width:8px; height:8px; border-radius:50%; background:var(--sage-600); }
.workspace-status-stack { display:flex; align-items:center; justify-content:flex-end; flex-direction:row; gap:8px; flex-wrap:wrap; }
.member-status-pill { border:1px solid rgba(214,160,128,.28); border-radius:999px; background:var(--terracotta-100); color:var(--terracotta-700); min-height:30px; padding:0 10px; font-size:12px; font-weight:800; white-space:nowrap; }
.member-nudge { min-height:auto; display:flex; align-items:center; justify-content:space-between; gap:20px; background:linear-gradient(135deg,#fffefa,#edf3e9); }
.member-nudge h2 { margin:9px 0 7px; font-size:21px; letter-spacing:0; }
.member-nudge p { margin:0; max-width:680px; }
.membership-page { max-width:1120px; }
.membership-hero { display:grid; grid-template-columns:minmax(0, 1fr) 310px; gap:18px; align-items:stretch; border:1px solid var(--line); border-radius:var(--radius-xl); background:linear-gradient(135deg,#f3eee3,#e4eee1); padding:28px; }
.membership-hero h2 { font-size:32px; line-height:1.25; letter-spacing:0; margin:13px 0 10px; }
.membership-hero p { color:var(--ink-700); line-height:1.8; margin:0; max-width:680px; }
.member-price-box { border:1px solid rgba(255,255,255,.75); border-radius:22px; background:rgba(255,254,250,.72); padding:22px; box-shadow:var(--shadow-soft); }
.member-price-box small { display:block; color:var(--sage-600); font-size:12px; font-weight:800; letter-spacing:.08em; }
.member-status-row { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 18px; }
.member-status-row span { border:1px solid var(--line); border-radius:999px; background:var(--paper-0); color:var(--ink-500); padding:8px 11px; font-size:12px; font-weight:800; }
.member-status-row span.active { border-color:rgba(89,117,93,.22); background:var(--sage-100); color:#3f5f44; }
.member-path-grid { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px; }
.member-path-card { border:1px solid var(--line); border-radius:15px; background:var(--paper-50); padding:14px; text-align:left; color:var(--ink-900); min-height:108px; }
.member-path-card b { display:block; font-size:14px; margin-bottom:7px; }
.member-path-card span { display:block; color:var(--ink-500); font-size:12px; line-height:1.55; }
.member-badge-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:9px; margin-top:12px; }
.member-badge-grid span { border:1px solid rgba(89,117,93,.18); border-radius:999px; background:var(--sage-100); color:#3f5f44; padding:9px 11px; font-size:12px; font-weight:800; text-align:center; }
.member-reminder-layer { position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:24px; }
.member-reminder-scrim { position:absolute; inset:0; border:0; background:rgba(39,51,44,.28); backdrop-filter:blur(6px); cursor:default; }
.member-reminder-card { position:relative; width:min(560px, 100%); border:1px solid rgba(255,255,255,.72); border-radius:24px; background:var(--paper-0); box-shadow:0 28px 80px rgba(39,51,44,.24); padding:26px; }
.member-reminder-card h2 { font-size:25px; line-height:1.28; letter-spacing:0; margin:12px 0 10px; }
.member-reminder-card p { color:var(--ink-700); line-height:1.8; margin:0; }
.member-reminder-actions { display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; margin-top:20px; }
.footer { padding: 33px 0; border-top: 1px solid var(--line); color: var(--ink-500); font-size: 13px; }.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }.footer a { color: inherit; text-decoration: none; white-space: nowrap; }.footer a:hover { text-decoration: underline; }

/* Questionnaire */
.app-shell { min-height: 100vh; background: var(--paper-50); }.onboard-head { height: 74px; display: flex; align-items: center; justify-content: space-between; }.onboard-companion { margin-left: auto; margin-right: 14px; width: 68px; height: 45px; overflow: hidden; border-radius: 14px; background: var(--paper-0); border: 1px solid var(--line); }.onboard-companion .mascot-pose { width: 68px; height: 45px; }.onboard-main { width: min(762px, calc(100% - 42px)); margin: 20px auto 80px; }.progress-rail { height: 5px; background: var(--sand-200); border-radius: 100px; overflow: hidden; margin: 25px 0 52px; }.progress-rail span { height: 100%; display: block; background: var(--sage-600); border-radius: 100px; transition: width .3s ease; }.question-meta { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--ink-500); }.question h1 { font-size: clamp(29px, 4vw, 42px); line-height: 1.33; letter-spacing: -.045em; margin: 12px 0 12px; }.question .help { color: var(--ink-700); line-height: 1.8; margin-bottom: 28px; }.option-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }.option-grid.three { grid-template-columns: repeat(3, 1fr); }.option-card { min-height: 82px; border: 1px solid var(--line); background: var(--paper-0); padding: 16px 17px; border-radius: var(--radius-md); text-align: left; color: var(--ink-900); transition: border .17s, background .17s, transform .17s; }.option-card:hover { transform: translateY(-1px); border-color: var(--sage-300); }.option-card.selected { border-color: var(--sage-600); background: var(--sage-100); box-shadow: 0 0 0 2px rgba(89,117,93,.08); }.option-card b { display: block; font-size: 15px; }.option-card small { color: var(--ink-500); display: block; margin-top: 5px; line-height: 1.45; }.visual-option { height: 158px; padding: 0; overflow: hidden; position: relative; }.visual-art { height: 107px; width: 100%; position: relative; }.visual-label { padding: 11px 14px; display: flex; align-items: center; justify-content: space-between; }.visual-label b { font-size: 14px; }.visual-art.modern { background: linear-gradient(135deg,#e4e2d9,#d4ddd3); }.visual-art.modern::after { content:""; width: 55%; height: 78%; position:absolute; bottom:0; right:18%; background:#f9f8f2; border-radius: 60px 60px 0 0; box-shadow: -45px 35px 0 #b5c5b4; }.visual-art.natural { background: linear-gradient(135deg,#e7dfcd,#bdc9b0); }.visual-art.natural::after { content:""; width: 48%; height: 74%; position:absolute; bottom:0; left:25%; background: repeating-linear-gradient(90deg,#bd956b 0 6px,#e7c891 7px 12px); border-radius: 55px 55px 0 0; }.visual-art.french { background: #f5e9e2; }.visual-art.french::after { content:""; width: 48%; height: 75%; position:absolute; bottom:0; left:26%; background:#dec1ad; border: 10px solid #f8f4ed; border-bottom: 0; border-radius: 80px 80px 0 0; }.visual-art.vintage { background: #c8b499; }.visual-art.vintage::after { content:""; width: 65%; height: 45%; position:absolute; bottom:0; left:18%; background:#5e4b3b; border-radius: 35px 35px 0 0; box-shadow: 32px -45px 0 -5px #bf6f54; }.visual-art.italian { background: #a79e92; }.visual-art.italian::after { content:""; width: 62%; height: 60%; position:absolute; bottom:0; left:19%; background:#463d34; border-radius: 52px 52px 0 0; box-shadow: 55px -28px 0 -14px #d0c6b6; }.visual-art.eastern { background: #d9d1bc; }.visual-art.eastern::after { content:""; width: 54%; height: 86%; position:absolute; bottom:0; left:23%; background: repeating-linear-gradient(90deg,#735c47 0 7px,#d5c2a4 8px 23px); }.input { width: 100%; min-height: 52px; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0 16px; outline: none; background: var(--paper-0); color: var(--ink-900); }.input:focus { border-color: var(--sage-600); box-shadow: 0 0 0 3px rgba(89,117,93,.11); }.text-area { min-height: 108px; padding-top: 14px; resize: vertical; }.selection-count { font-size: 13px; color: var(--ink-500); margin: -16px 0 18px; }.onboard-actions { display: flex; justify-content: space-between; gap: 16px; margin-top: 37px; }.onboard-actions .right-actions { display: flex; gap: 12px; }

/* Result */
.result-page { min-height: 100vh; background: var(--paper-50); }.result-wrap { width: min(1000px, calc(100% - 42px)); margin: 20px auto 80px; }.result-hero { padding: 44px; border-radius: var(--radius-xl); background: linear-gradient(135deg, #f1eadc, #dce7d9); position: relative; overflow: hidden; }.result-hero::after { content:""; width: 280px; height: 280px; position:absolute; right:-80px; top:-100px; border: 1px solid rgba(89,117,93,.18); border-radius:50%; box-shadow: 0 0 0 32px rgba(255,255,255,.15), 0 0 0 64px rgba(255,255,255,.12); }.result-hero > * { position: relative; z-index: 1; }.result-hero h1 { font-size: clamp(31px,4vw,47px); max-width: 670px; line-height: 1.3; letter-spacing: -.045em; margin: 12px 0 14px; }.result-hero p { max-width: 650px; line-height: 1.85; color: var(--ink-700); font-size: 16px; }.result-grid { margin-top: 18px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 18px; }.result-card { background: var(--paper-0); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 27px; }.result-card h2 { font-size: 19px; margin: 0 0 18px; }.principle { display: flex; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); line-height: 1.65; font-size: 14px; }.principle:first-of-type { border-top: 0; padding-top: 0; }.principle span { flex: 0 0 auto; width: 25px; height: 25px; border-radius: 9px; display:grid; place-items:center; background: var(--sage-100); color: var(--sage-600); font-size: 12px; font-weight: 700; }.tag-row { display: flex; gap: 8px; flex-wrap: wrap; }.tag { background: var(--paper-50); padding: 7px 10px; font-size: 12px; border-radius: 100px; color: var(--ink-700); }.tag.green { background: var(--sage-100); color: #3f5f44; }.tag.terra { background: var(--terracotta-100); color: var(--terracotta-700); }.next-list { margin: 0; padding: 0; list-style: none; }.next-list li { border-top: 1px solid var(--line); padding: 13px 0; display:flex; gap:11px; font-size:14px; }.next-list i { width: 21px; height: 21px; border-radius:50%; border: 1.5px solid var(--sage-600); display:inline-block; flex:0 0 auto; }.result-footer { margin-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 26px; border-radius: 20px; background: var(--ink-900); color: white; }.result-footer p { color: rgba(255,255,255,.67); margin: 5px 0 0; font-size: 13px; }

/* Auth */
.auth-page { min-height: 100vh; background: var(--paper-50); display: grid; grid-template-columns: 1fr 1fr; }.auth-aside { padding: 54px; background: var(--ink-900); color: white; display: flex; flex-direction: column; justify-content: space-between; }.auth-aside .brand { color: white; }.auth-aside .brand-mark { background: var(--sage-300); color: var(--ink-900); }.auth-aside h1 { font-size: clamp(32px,4vw,51px); line-height:1.25; margin: 0; letter-spacing: -.05em; }.auth-aside p { max-width: 390px; color: rgba(255,255,255,.7); line-height: 1.8; }.auth-note { font-size: 13px; color: rgba(255,255,255,.48); }.auth-main { display: grid; place-items: center; padding: 32px; }.auth-box { width: min(420px,100%); }.auth-box h2 { font-size: 31px; letter-spacing: -.04em; margin: 0 0 9px; }.auth-box > p { color: var(--ink-700); margin: 0 0 28px; }.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 4px; background: var(--sand-100); border-radius: 13px; margin-bottom: 23px; }.auth-tab { min-height: 39px; border: 0; background: transparent; border-radius: 9px; color: var(--ink-700); font-size: 14px; }.auth-tab.active { background: var(--paper-0); color: var(--ink-900); box-shadow: 0 2px 7px rgba(60,70,60,.08); font-weight: 600; }.field-label { font-size: 13px; font-weight: 600; display:block; margin: 16px 0 8px; }.input-row { display: flex; gap: 9px; }.input-row .input { min-width: 0; }.auth-legal { font-size: 12px; color: var(--ink-500); line-height: 1.7; margin: 17px 0; }.divider { display:flex; gap: 12px; align-items:center; color:var(--ink-500); font-size:12px; margin: 25px 0; }.divider::before, .divider::after { content:""; height:1px; background:var(--line); flex:1; }.weixin { border-color: var(--line); background: var(--paper-0); }

/* Workspace */
.workspace { min-height: 100vh; background: var(--paper-50); display: grid; grid-template-columns: 242px minmax(0, 1fr); }.sidebar { position:sticky; top:0; height:100vh; border-right: 1px solid var(--line); padding: 24px 14px; background: rgba(255,254,250,.72); display: flex; flex-direction: column; }.side-brand { padding: 0 9px; margin-bottom: 31px; }.side-nav { display:grid; gap: 4px; }.side-nav button { color: var(--ink-700); background: transparent; border:0; border-radius: 12px; min-height:43px; text-align:left; padding: 0 12px; font-size:14px; display:flex; gap:10px; align-items:center; }.side-nav button:hover { background: var(--paper-50); }.side-nav button.active { background: var(--sage-100); color: #35533b; font-weight: 600; }.side-icon { width:19px; text-align:center; font-size:15px; }.sidebar-bottom { margin-top:auto; padding: 16px 7px 0; border-top:1px solid var(--line); }.user-chip { display:flex; align-items:center; gap:9px; font-size:13px; }.avatar { width:31px; height:31px; display:grid; place-items:center; border-radius:50%; background: var(--terracotta-300); color:white; font-weight:700; }.workspace-main { padding: 35px 45px 55px; min-width:0; }.workspace-top { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; margin-bottom: 28px; }.workspace-top h1 { margin:5px 0 0; font-size: 29px; letter-spacing:-.04em; }.status-pill { font-size:12px; padding:7px 10px; border-radius:100px; color:#3e6744; background:var(--sage-100); white-space:nowrap; }.dashboard-grid { display:grid; grid-template-columns: 1.18fr .82fr; gap:18px; }.dash-card { border:1px solid var(--line); background:var(--paper-0); padding:25px; border-radius:var(--radius-lg); }.dash-card h2 { font-size:17px; margin:0 0 16px; }.focus-card { background:linear-gradient(135deg,#eff3e9,#fcfaf3); min-height: 246px; }.focus-card h2 { font-size:22px; letter-spacing:-.03em; }.focus-tasks { display:grid; gap:9px; margin-top:19px; }.focus-task { background:rgba(255,255,255,.76); border:1px solid rgba(89,117,93,.14); padding:11px 12px; border-radius:12px; display:flex; align-items:center; gap:10px; font-size:14px; }.focus-task .check { width:19px; height:19px; border-radius:6px; border:1.5px solid var(--sage-600); flex:0 0 auto; }.focus-task.done { color:var(--ink-500); text-decoration:line-through; }.focus-task.done .check { background:var(--sage-600); position:relative; }.focus-task.done .check::after { content:"✓"; color:white; font-size:12px; position:absolute; left:3px; top:0; text-decoration:none; }.budget-summary { margin-top: 16px; display:flex; align-items:flex-end; justify-content:space-between; }.budget-number { font-size:31px; letter-spacing:-.05em; font-weight:700; }.bar { height:8px; border-radius:20px; background:var(--sand-100); overflow:hidden; margin:16px 0 7px; }.bar span { display:block; height:100%; width:42%; background:var(--terracotta-300); border-radius:20px; }.principle-mini { padding:12px 0; border-top:1px solid var(--line); color:var(--ink-700); font-size:13px; line-height:1.6; }.principle-mini:first-of-type{border-top:0;}.panel-full { grid-column:1/-1; }.space-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; }.space-mini { border:1px solid var(--line); padding:14px; border-radius:14px; background:var(--paper-50); }.space-mini b{display:block;font-size:14px;}.space-mini small{display:block;color:var(--ink-500);margin-top:5px;}.workspace-page { max-width: 1000px; }.section-top { display:flex; justify-content:space-between; gap:15px; align-items:center; margin-bottom:20px; }.section-top h2 { font-size:24px; margin:0; letter-spacing:-.03em; }.section-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; }.block-actions { justify-content:flex-start; margin-top:18px; }.editable-list { display:grid; gap:10px; }.list-item { border:1px solid var(--line); background:var(--paper-0); padding:15px 17px; border-radius:14px; display:flex; align-items:center; justify-content:space-between; gap:10px; }.rich-item { align-items:flex-start; }.list-item .item-title { font-size:14px; font-weight:600; }.list-item .item-sub { color:var(--ink-500); font-size:12px; margin-top:4px; line-height:1.55; }.item-meta { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }.item-meta span { border-radius:999px; background:var(--paper-50); color:var(--ink-700); border:1px solid var(--line); padding:5px 8px; font-size:12px; line-height:1.2; }.item-actions { display:flex; align-items:center; gap:10px; flex:0 0 auto; }.money { font-variant-numeric:tabular-nums; font-weight:700; }.task-toggle { border: 1.5px solid var(--sage-600); width:20px; height:20px; border-radius:6px; background:transparent; flex:0 0 auto; margin-top:2px; }.task-toggle.done { background:var(--sage-600); color:white; }.add-row { display:flex; gap:10px; margin-top:13px; }.add-row .input { min-height:44px; }.empty { padding:35px; text-align:center; color:var(--ink-500); border:1px dashed var(--sand-200); border-radius:15px; background:rgba(255,255,255,.5); }

.modal-layer { position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:24px; }
.modal-scrim { position:absolute; inset:0; border:0; background:rgba(39,51,44,.42); backdrop-filter:blur(8px); cursor:default; }
.modal-card { position:relative; width:min(760px, 100%); max-height:min(88vh, 760px); overflow:auto; border:1px solid rgba(255,255,255,.62); border-radius:24px; background:var(--paper-0); box-shadow:0 28px 80px rgba(39,51,44,.24); padding:25px; }
.modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding-bottom:17px; border-bottom:1px solid var(--line); }
.modal-head h2 { margin:7px 0 0; font-size:25px; letter-spacing:-.035em; }
.modal-head p { color:var(--ink-700); line-height:1.7; margin:9px 0 0; max-width:560px; font-size:13px; }
.modal-close { width:36px; height:36px; border-radius:12px; border:1px solid var(--line); background:var(--paper-50); color:var(--ink-700); font-size:22px; line-height:1; flex:0 0 auto; }
.modal-form { padding-top:5px; }
.form-grid { display:grid; gap:13px; }
.form-grid.two { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.form-grid.three { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.form-grid.four { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.modal-actions { display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:24px; padding-top:18px; border-top:1px solid var(--line); }

.budget-page { max-width: 1120px; }
.budget-hero { border:1px solid var(--line); border-radius:var(--radius-xl); background:linear-gradient(135deg,#f3eee3,#e3eddf); padding:27px; margin-bottom:18px; }
.budget-hero h3 { margin:8px 0 8px; font-size:34px; letter-spacing:-.05em; }
.budget-hero p { color:var(--ink-700); line-height:1.75; max-width:680px; margin:0; }
.budget-meter { height:10px; border-radius:999px; background:rgba(255,255,255,.7); overflow:hidden; margin:23px 0 18px; }
.budget-meter span { display:block; height:100%; max-width:100%; border-radius:999px; background:var(--sage-600); }
.budget-stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
.budget-stats div { background:rgba(255,254,250,.76); border:1px solid rgba(89,117,93,.13); border-radius:15px; padding:13px; }
.budget-stats b { display:block; font-size:18px; letter-spacing:-.03em; }
.budget-stats small { display:block; color:var(--ink-500); margin-top:4px; }
.budget-grid { display:grid; grid-template-columns:1.12fr .88fr; gap:18px; margin-bottom:18px; }
.section-top.compact { margin-bottom:14px; }
.section-top.compact p { margin:6px 0 0; }
.template-grid { display:grid; gap:10px; }
.template-card { display:flex; align-items:center; justify-content:space-between; gap:13px; border:1px solid var(--line); border-radius:15px; background:var(--paper-50); padding:14px; }
.template-card b { display:block; font-size:14px; }
.template-card small { display:block; color:var(--ink-500); margin-top:4px; line-height:1.45; }
.tip-list { display:grid; gap:9px; }
.tip-item { border:1px solid rgba(214,160,128,.28); background:var(--terracotta-100); color:var(--terracotta-700); padding:12px 13px; border-radius:14px; font-size:13px; line-height:1.65; }
.calc-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:11px; margin-top:14px; }
.calc-grid article { border:1px solid var(--line); background:var(--paper-50); border-radius:14px; padding:14px; }
.calc-grid b { display:block; font-size:14px; }
.calc-grid span { display:block; color:var(--ink-500); font-size:12px; line-height:1.55; margin-top:5px; }
.audit-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:11px; margin-top:14px; }
.audit-grid article { border:1px solid var(--line); background:var(--paper-50); border-radius:14px; padding:14px; }
.audit-grid b { display:block; font-size:22px; letter-spacing:0; }
.audit-grid small { display:block; color:var(--ink-500); line-height:1.45; margin-top:5px; }
.category-list { display:grid; gap:9px; }
.category-list article { display:grid; grid-template-columns:170px minmax(0,1fr); gap:14px; align-items:center; border:1px solid var(--line); background:var(--paper-50); border-radius:14px; padding:12px 14px; }
.category-list b { display:block; font-size:14px; }
.category-list small { color:var(--ink-500); }
.category-list strong { display:block; font-size:14px; margin-bottom:7px; }
.category-list span { display:block; height:7px; max-width:100%; border-radius:999px; background:var(--sage-600); }

.linked-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.link-card { border:1px solid var(--line); background:var(--paper-0); border-radius:16px; padding:16px; display:grid; gap:12px; }
.link-card > b { display:block; font-size:15px; }
.link-card > p { color:var(--ink-700); font-size:13px; line-height:1.65; margin:0; }
.link-counts { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:7px; }
.link-counts span { border:1px solid var(--line); border-radius:12px; background:var(--paper-50); padding:9px 7px; color:var(--ink-700); font-size:12px; line-height:1.35; }
.resource-inline { display:grid; gap:9px; margin-top:12px; }
.resource-inline article { border:1px solid var(--line); border-radius:14px; background:var(--paper-50); padding:12px 13px; }
.resource-inline b { display:block; font-size:14px; }
.resource-inline small { display:block; color:var(--ink-500); line-height:1.55; margin-top:4px; }
.resources-page { max-width:1120px; }
.resource-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:13px; }
.resource-card { border:1px solid var(--line); border-radius:18px; background:var(--paper-0); padding:18px; box-shadow:var(--shadow-soft); }
.resource-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.resource-head b { display:block; font-size:16px; }
.resource-head small { display:block; color:var(--ink-500); line-height:1.55; margin-top:4px; }
.resource-phone { border:1px dashed rgba(89,117,93,.28); background:var(--sage-100); color:#3f5f44; border-radius:13px; padding:10px 12px; font-size:13px; margin-bottom:10px; }
.resource-card p { color:var(--ink-700); font-size:13px; line-height:1.65; margin:12px 0 0; }
.link-flow { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.link-flow span { position:relative; border:1px solid rgba(89,117,93,.18); background:rgba(255,254,250,.76); color:#3f5f44; border-radius:999px; padding:8px 11px; font-size:12px; font-weight:700; }
.layout-lite-panel { margin-top:20px; background:linear-gradient(135deg,#fffefa,#f2f6ef); }
.layout-lite-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; margin-top:12px; }
.layout-lite-grid article { border:1px solid var(--line); border-radius:14px; background:rgba(255,254,250,.75); padding:13px; }
.layout-lite-grid span,
.layout-lite-grid small { display:block; color:var(--ink-500); font-size:12px; line-height:1.55; }
.layout-lite-grid b { display:block; font-size:16px; letter-spacing:0; margin:4px 0 3px; }
.layout-drawing-card { border:1px solid rgba(89,117,93,.18); border-radius:16px; background:rgba(255,254,250,.72); padding:14px; margin-top:12px; display:flex; justify-content:space-between; gap:14px; align-items:flex-start; }
.layout-drawing-card span,
.layout-drawing-card small,
.layout-drawing-card em { display:block; color:var(--ink-500); font-size:12px; line-height:1.55; font-style:normal; }
.layout-drawing-card b { display:block; font-size:16px; letter-spacing:0; margin:4px 0 3px; }
.layout-drawing-card em { margin-top:5px; color:#6f8a72; }
.layout-drawing-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.layout-drawing-actions .btn { min-height:52px; border-radius:14px; padding:0 18px; font-size:14px; font-weight:700; box-shadow:0 5px 14px rgba(53,83,59,.06); }
.layout-drawing-actions .btn-quiet { border:1px solid var(--line); background:var(--paper-0); color:var(--ink-700); }
.layout-drawing-actions .btn-quiet:hover { border-color:rgba(89,117,93,.25); background:var(--sage-100); color:#35533b; }
.layout-lite-notes { display:grid; gap:8px; margin-top:12px; }
.layout-lite-notes p { border:1px solid var(--line); border-radius:12px; background:rgba(255,254,250,.62); color:var(--ink-700); font-size:13px; line-height:1.65; margin:0; padding:10px 12px; }
.layout-lite-notes b { color:var(--ink-900); margin-right:8px; }
.layout-subsection { border-top:1px solid var(--line); margin-top:16px; padding-top:15px; }
.layout-subsection-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.layout-subsection h3 { margin:0 0 5px; font-size:17px; letter-spacing:0; }
.layout-subsection p { margin:0; }
.layout-room-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin-top:12px; }
.layout-room-card { border:1px solid var(--line); border-radius:14px; background:rgba(255,254,250,.72); padding:13px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.layout-room-card.filled { background:rgba(232,239,227,.66); border-color:rgba(89,117,93,.22); }
.layout-room-card b,
.layout-room-card small { display:block; }
.layout-room-card small { color:var(--ink-500); line-height:1.55; margin-top:4px; }
.layout-next-hint { border:1px solid rgba(205,143,105,.24); background:rgba(255,244,236,.78); border-radius:15px; padding:13px 14px; margin-top:12px; }
.layout-next-hint b,
.layout-next-hint span { display:block; }
.layout-next-hint span { color:var(--ink-700); line-height:1.65; margin-top:3px; }
.layout-next-hint div { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.layout-next-hint small { border:1px solid rgba(205,143,105,.25); border-radius:999px; background:rgba(255,254,250,.62); color:#8b5b42; padding:6px 9px; font-size:12px; font-weight:700; }
.layout-modal-section { border:1px solid var(--line); border-radius:16px; background:var(--paper-50); padding:14px; display:grid; gap:12px; }
.layout-modal-section + .layout-modal-section { margin-top:12px; }
.layout-modal-section.primary { background:var(--sage-100); border-color:rgba(89,117,93,.18); }
.layout-modal-section.soft { background:rgba(255,254,250,.62); }
.layout-modal-section h3 { margin:0 0 -4px; font-size:16px; letter-spacing:0; }
.layout-modal-section p { color:var(--ink-500); font-size:13px; line-height:1.6; margin:0; }
.layout-modal-section.optional .form-grid.two { align-items:stretch; }
.layout-modal-section.optional .form-grid.two > div { display:flex; flex-direction:column; }
.layout-modal-section.optional .form-grid.two .input { flex:1; min-height:112px; }
.layout-modal-section.optional .form-grid.two input.input { display:flex; align-items:flex-start; padding-top:21px; padding-bottom:21px; }
.layout-upload-placeholder,
.layout-puzzle-placeholder { border:1px dashed rgba(89,117,93,.26); border-radius:15px; background:var(--paper-50); padding:14px; display:grid; gap:8px; }
.layout-upload-placeholder span,
.layout-puzzle-placeholder span { color:var(--ink-500); font-size:13px; line-height:1.65; }
.space-measure-single-head { border:1px solid var(--line); border-radius:14px; background:var(--sage-100); padding:13px; }
.space-measure-single-head b,
.space-measure-single-head span { display:block; }
.space-measure-single-head span { color:var(--ink-500); font-size:13px; line-height:1.6; margin-top:4px; }
.space-measure-section { border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:18px 0; padding:16px 0; }
.space-measure-section h3 { margin:0 0 6px; font-size:17px; letter-spacing:0; }
.space-measure-form { border:1px solid var(--line); border-radius:16px; background:var(--paper-50); padding:14px; margin-top:12px; display:grid; gap:12px; }
.space-measure-form b,
.space-measure-form small { display:block; }
.space-measure-form small { color:var(--ink-500); line-height:1.55; margin-top:3px; }

.toast { position:fixed; z-index:100; left:50%; bottom:28px; transform:translate(-50%,20px); opacity:0; transition:all .24s ease; padding:11px 15px; border-radius:12px; background:var(--ink-900); color:white; font-size:13px; box-shadow:var(--shadow); pointer-events:none; }.toast.show { opacity:1; transform:translate(-50%,0); }
.mascot-empty { display: flex; flex-direction: column; align-items: center; gap: 9px; }.mascot-empty .mascot-pose { width: 108px; }
.thinking-page { min-height: 100vh; background: radial-gradient(circle at 76% 18%, #dfeadd 0, rgba(223,234,221,0) 28%), var(--paper-50); padding: 0 28px; }.thinking-brand { width: min(1180px, 100%); margin: 0 auto; height: 78px; display: flex; align-items: center; }.thinking-card { width: min(700px, 100%); margin: 8vh auto 0; text-align: center; background: rgba(255,254,250,.72); border: 1px solid rgba(89,117,93,.14); border-radius: var(--radius-xl); padding: 42px 48px; box-shadow: var(--shadow-soft); }.thinking-card .mascot-pose { width: 210px; margin-bottom: 9px; }.thinking-card h1 { font-size: clamp(28px, 4vw, 42px); letter-spacing: -.045em; line-height: 1.35; margin: 12px 0; }.thinking-card p { color: var(--ink-700); line-height: 1.8; margin: 0 auto; max-width: 480px; }.thinking-steps { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 26px; }.thinking-steps span { color: var(--ink-500); background: var(--paper-0); border: 1px solid var(--line); padding: 8px 11px; border-radius: 100px; font-size: 12px; }.thinking-steps span.active { color: #3e6744; background: var(--sage-100); border-color: rgba(89,117,93,.2); }

@media (max-width: 820px) {
  .container { width:min(100% - 36px, 650px); }.main-nav { display:none; }.hero { padding:28px 0 58px; }.hero-grid { grid-template-columns:1fr; gap:36px; }.hero-visual { height:360px; }.trust-strip { padding-bottom:58px; }.trust-inner { align-items:flex-start; flex-direction:column; }.three-steps,.example-panel,.result-grid,.dashboard-grid,.ip-intro,.budget-grid,.ai-panel,.mini-link-panel,.membership-panel,.membership-compare,.membership-hero,.linked-grid,.resource-grid { grid-template-columns:1fr; }.section { padding:65px 0; }.example-panel { padding:30px; gap:26px; }.ai-copy,.membership-copy { padding:30px; }.ai-capabilities { grid-template-columns:1fr 1fr; }.ai-visual { grid-template-columns:1fr; }.mini-phone { justify-self:start; }.auth-page { grid-template-columns:1fr; }.auth-aside { display:none; }.auth-main { min-height:100vh; }.workspace { display:block; }.sidebar { position:sticky; top:0; z-index:20; height:64px; padding:9px 14px; border-right:0; border-bottom:1px solid var(--line); flex-direction:row; align-items:center; background:rgba(255,254,250,.93); backdrop-filter:blur(12px); }.side-brand { padding:0; margin:0; }.side-brand .brand-mark { width:27px;height:27px;font-size:15px; }.side-brand .brand { font-size:18px; }.side-nav { margin-left:auto; display:flex; gap:2px; }.side-nav button { width:32px; min-height:36px; padding:0; justify-content:center; }.side-nav .nav-text { display:none; }.sidebar-bottom { display:none; }.workspace-main { padding:27px 19px 48px; }.workspace-top { display:block; }.workspace-top .status-pill { display:inline-flex; margin-top:12px; }.workspace-status-stack { align-items:flex-start; margin-top:12px; }.member-nudge { align-items:flex-start; flex-direction:column; }.member-path-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }.space-grid { grid-template-columns:1fr 1fr; }.result-hero { padding:31px 25px; }.result-footer { align-items:flex-start; flex-direction:column; }.option-grid.three { grid-template-columns:repeat(2,1fr); }.onboard-main { margin-top:0; }.onboard-head { height:65px; }.progress-rail { margin:19px 0 36px; }.footer-inner { align-items:flex-start; flex-direction:column; }.form-grid.two,.form-grid.three,.form-grid.four { grid-template-columns:1fr; }.modal-layer { align-items:end; padding:14px; }.modal-card { max-height:86vh; border-radius:22px; padding:21px; }.section-top { align-items:flex-start; flex-direction:column; }.section-actions { justify-content:flex-start; }.budget-stats,.calc-grid,.audit-grid,.member-badge-grid,.layout-lite-grid,.layout-room-grid { grid-template-columns:1fr 1fr; }.category-list article { grid-template-columns:1fr; }.link-counts { grid-template-columns:1fr 1fr; }
}

@media (max-width: 470px) {
  .option-grid,.option-grid.three { grid-template-columns:1fr; }.hero h1 { font-size:42px; }.hero-visual { height:310px; }.window{left:44%;}.sofa{transform:scale(.82);transform-origin:left bottom;}.hero-plant{right:25px;transform:scale(.75);transform-origin:right bottom;}.floating-card.card-2{right:12px;bottom:13px}.result-wrap { width:calc(100% - 28px); }.result-hero{padding:27px 21px}.result-card{padding:21px}.space-grid,.budget-stats,.calc-grid,.audit-grid,.ai-capabilities,.ai-orbit,.mini-scene-grid,.mini-action-grid,.member-path-grid,.member-badge-grid,.layout-lite-grid,.layout-room-grid,.link-counts{grid-template-columns:1fr;}.layout-room-card{align-items:flex-start;flex-direction:column}.ai-copy,.membership-copy{padding:24px}.pricing-card,.membership-hero{padding:22px}.price-line b{font-size:48px}.ai-capabilities article{min-height:auto}.mini-phone{border-width:7px;border-radius:34px;padding:13px}.mini-project-card{align-items:flex-start}.budget-hero{padding:22px}.budget-hero h3{font-size:28px}.onboard-actions{flex-direction:column-reverse}.onboard-actions .right-actions{display:flex}.onboard-actions .right-actions .btn{flex:1}.workspace-main{padding-left:14px;padding-right:14px}.add-row{flex-direction:column}.add-row .btn{width:100%}.list-item,.rich-item{align-items:flex-start;flex-direction:column}.item-actions{width:100%;justify-content:space-between}.modal-actions{flex-direction:column-reverse}.modal-actions .btn{width:100%}
  .layout-drawing-card,.layout-subsection-head{align-items:flex-start;flex-direction:column}.layout-drawing-actions{justify-content:flex-start}.layout-drawing-actions .btn{width:100%}
}

@media (max-width: 520px) {
  .onboard-companion { width: 55px; height: 37px; margin-right: 6px; }
  .onboard-companion .mascot-pose { width: 55px; height: 37px; }
  .thinking-page { padding: 0 16px; }.thinking-card { padding: 31px 20px; margin-top: 5vh; }.thinking-card .mascot-pose { width: 176px; }
}

@media (max-width: 820px) {
  .side-nav { overflow-x: auto; max-width: calc(100vw - 136px); scrollbar-width: none; }
  .side-nav::-webkit-scrollbar { display: none; }
  .side-nav button { min-width: 32px; }
  .side-brand .brand-mark img { width: 27px; height: 27px; }
}

/* Keep multi-select progress with the question explanation, never inside the card grid. */
.question-help-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.question .question-help-row .help { margin-bottom: 0; }

.selection-status {
  flex: 0 0 auto;
  white-space: nowrap;
  margin-top: 2px;
  padding: 7px 10px;
  border: 1px solid rgba(89, 117, 93, .22);
  border-radius: 999px;
  background: var(--sage-100);
  color: #3e6744;
  font-size: 12px;
  line-height: 1.2;
}

@media (max-width: 520px) {
  .question-help-row { flex-direction: column; gap: 8px; }
  .selection-status { margin-top: 0; }
}

/* CRM demo */
.crm-app {
  --crm-bg: #f6f7f4;
  --crm-panel: #ffffff;
  --crm-ink: #1f2a2d;
  --crm-muted: #687478;
  --crm-line: rgba(31, 42, 45, .11);
  --crm-green: #4d7358;
  --crm-blue: #376c86;
  --crm-amber: #a66a3f;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  background: var(--crm-bg);
  color: var(--crm-ink);
}

.crm-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid var(--crm-line);
  background: #ffffff;
  padding: 22px 14px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.crm-brand {
  display: grid;
  gap: 4px;
  padding: 4px 10px 12px;
  border-bottom: 1px solid var(--crm-line);
}

.crm-brand span {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0;
}

.crm-brand small {
  color: var(--crm-muted);
  font-size: 12px;
}

.crm-nav {
  display: grid;
  gap: 5px;
}

.crm-nav a {
  min-height: 40px;
  display: flex;
  align-items: center;
  border-radius: 8px;
  color: var(--crm-muted);
  padding: 0 12px;
  font-size: 14px;
  font-weight: 650;
}

.crm-nav a:hover,
.crm-nav a.active {
  background: #e9f0e7;
  color: #2f5c39;
}

.crm-side-note {
  margin-top: auto;
  border: 1px solid var(--crm-line);
  border-radius: 8px;
  padding: 13px;
  background: #f7f8f2;
}

.crm-side-note b,
.crm-side-note span {
  display: block;
}

.crm-side-note b {
  font-size: 13px;
  margin-bottom: 6px;
}

.crm-side-note span {
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 1.65;
}

.crm-main {
  min-width: 0;
  padding: 28px 34px 46px;
}

.crm-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.crm-topbar h1 {
  margin: 5px 0 0;
  font-size: 30px;
  letter-spacing: 0;
  line-height: 1.25;
}

.crm-kicker {
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 1.55;
}

.crm-open-front {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--crm-line);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  color: var(--crm-muted);
  font-size: 13px;
  white-space: nowrap;
}

.crm-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.crm-stat,
.crm-panel,
.crm-table-wrap,
.crm-tag-card,
.crm-resource-card,
.crm-module-card,
.crm-campaign-card {
  border: 1px solid var(--crm-line);
  border-radius: 8px;
  background: var(--crm-panel);
}

.crm-stat {
  padding: 17px;
}

.crm-stat span,
.crm-stat small {
  display: block;
}

.crm-stat span {
  color: var(--crm-muted);
  font-size: 13px;
}

.crm-stat b {
  display: block;
  margin: 8px 0 3px;
  font-size: 29px;
  letter-spacing: 0;
  line-height: 1;
}

.crm-stat small {
  color: var(--crm-muted);
  font-size: 12px;
}

.crm-grid {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}

.crm-grid.two {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
}

.crm-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.crm-grid.customer {
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
}

.crm-grid.tags,
.crm-grid.resources-head {
  grid-template-columns: minmax(0, 1fr) minmax(320px, .52fr);
}

.crm-panel {
  padding: 18px;
}

.crm-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 15px;
}

.crm-panel-head h2,
.crm-module-card h2,
.crm-campaign-card h2,
.crm-resource-body h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0;
}

.crm-panel-head p,
.crm-module-card p,
.crm-campaign-card span,
.crm-resource-body p,
.database-note p {
  margin: 5px 0 0;
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 1.65;
}

.crm-panel-head a {
  color: var(--crm-blue);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.crm-funnel-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  font-size: 13px;
}

.crm-funnel-row > span {
  color: var(--crm-muted);
}

.crm-funnel-row div {
  height: 9px;
  border-radius: 99px;
  background: #eef0ed;
  overflow: hidden;
}

.crm-funnel-row i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--crm-green), var(--crm-blue));
}

.crm-funnel-row b {
  font-size: 13px;
  text-align: right;
}

.crm-list.compact {
  display: grid;
  gap: 8px;
}

.crm-list-row {
  min-height: 54px;
  border: 1px solid var(--crm-line);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  background: #fbfcfa;
}

.crm-list-row b,
.crm-list-row small,
.crm-list-row i {
  display: block;
}

.crm-list-row small {
  margin-top: 4px;
  color: var(--crm-muted);
  font-size: 12px;
}

.crm-list-row i {
  color: var(--crm-amber);
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.crm-tag-cloud,
.crm-mini-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.crm-tag-cloud span,
.crm-mini-tags span {
  border: 1px solid var(--crm-line);
  border-radius: 999px;
  background: #f8faf8;
  color: #365642;
  padding: 6px 9px;
  font-size: 12px;
  line-height: 1.2;
}

.crm-tag-cloud span {
  font-weight: 700;
  padding: 8px 10px;
}

.crm-tag-cloud small {
  margin-left: 6px;
  color: var(--crm-muted);
  font-weight: 600;
}

.crm-resource-summary,
.crm-campaign-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.crm-campaign-metrics {
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  margin: 15px 0 14px;
}

.crm-campaign-metrics.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.crm-resource-summary article,
.crm-campaign-metrics article {
  border: 1px solid var(--crm-line);
  border-radius: 8px;
  background: #f7f8f7;
  padding: 12px;
}

.crm-resource-summary b,
.crm-campaign-metrics b {
  display: block;
  font-size: 22px;
}

.crm-resource-summary span,
.crm-campaign-metrics span {
  display: block;
  color: var(--crm-muted);
  font-size: 12px;
  margin-top: 4px;
}

.crm-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.crm-toolbar span {
  border: 1px solid var(--crm-line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--crm-muted);
  padding: 8px 11px;
  font-size: 13px;
}

.crm-table-wrap {
  overflow: auto;
}

.crm-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 920px;
}

.crm-table th,
.crm-table td {
  border-bottom: 1px solid var(--crm-line);
  padding: 14px;
  text-align: left;
  vertical-align: middle;
  font-size: 13px;
}

.crm-table th {
  color: var(--crm-muted);
  background: #f8faf8;
  font-size: 12px;
  font-weight: 800;
}

.crm-table tr:last-child td {
  border-bottom: 0;
}

.crm-table td small,
.crm-customer-link small {
  display: block;
  color: var(--crm-muted);
  font-size: 12px;
  margin-top: 4px;
  line-height: 1.45;
}

.crm-customer-link b {
  display: block;
  color: var(--crm-blue);
}

.crm-status {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  border-radius: 999px;
  background: #eef3f4;
  color: var(--crm-blue);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.crm-status.intent-高 {
  background: #fff0e6;
  color: var(--crm-amber);
}

.crm-status.intent-中 {
  background: #eaf0e7;
  color: var(--crm-green);
}

.crm-status.member-免费用户 {
  background: #eef0ed;
  color: var(--crm-muted);
}

.crm-status.member-限免体验中,
.crm-status.member-人工赠送 {
  background: #edf3ff;
  color: #3760a0;
}

.crm-status.member-早鸟会员,
.crm-status.member-标准高级会员,
.crm-status.member-创始会员 {
  background: #fff0e6;
  color: var(--crm-amber);
}

.membership-note {
  margin-top: 13px;
}

.crm-entitlement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.crm-entitlement-grid span {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--crm-line);
  border-radius: 8px;
  background: #fbfcfa;
  color: var(--crm-muted);
  padding: 10px;
  font-size: 13px;
}

.crm-entitlement-grid span.enabled {
  background: #f0f6ee;
  color: #2f5c39;
  border-color: rgba(77, 115, 88, .22);
}

.crm-entitlement-grid b {
  flex: 0 0 auto;
  font-size: 12px;
}

.crm-audit-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.crm-audit-list article {
  border: 1px solid var(--crm-line);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 10px;
  display: grid;
  grid-template-columns: 118px 80px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.crm-audit-list time,
.crm-audit-list span {
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 1.5;
}

.crm-audit-list b {
  font-size: 12px;
}

.crm-save-message {
  min-height: 35px;
  display: inline-flex;
  align-items: center;
  margin: 0 0 12px;
  border: 1px solid var(--crm-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--crm-muted);
  padding: 0 12px;
  font-size: 12px;
}

.crm-save-message.show {
  color: #2f5c39;
  background: #f0f6ee;
  border-color: rgba(77, 115, 88, .22);
}

.crm-field {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--crm-line);
  border-radius: 7px;
  background: #ffffff;
  color: var(--crm-ink);
  padding: 0 9px;
  font-size: 13px;
  outline: none;
}

.crm-field:focus {
  border-color: rgba(77, 115, 88, .48);
  box-shadow: 0 0 0 3px rgba(77, 115, 88, .11);
}

.crm-action {
  min-height: 34px;
  border: 1px solid rgba(77, 115, 88, .28);
  border-radius: 7px;
  background: #eaf0e7;
  color: #2f5c39;
  padding: 0 11px;
  font-weight: 800;
  font-size: 13px;
}

.crm-action:disabled {
  opacity: .58;
  cursor: wait;
}

.crm-action.inline {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.crm-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--crm-line);
}

.crm-form-grid .wide {
  grid-column: 1 / -1;
}

.crm-edit-table {
  min-width: 1100px;
}

.crm-campaign-form label {
  display: grid;
  gap: 6px;
}

.crm-campaign-form label > span {
  color: var(--crm-muted);
  font-size: 12px;
  font-weight: 700;
}

.crm-entitlement-edit label {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--crm-line);
  border-radius: 8px;
  background: #fbfcfa;
  color: var(--crm-muted);
  padding: 10px;
  font-size: 13px;
  font-weight: 700;
}

.crm-entitlement-edit label.enabled {
  background: #f0f6ee;
  color: #2f5c39;
  border-color: rgba(77, 115, 88, .22);
}

.crm-entitlement-edit input {
  width: 16px;
  height: 16px;
  accent-color: var(--crm-green);
}

.crm-entitlement-edit b {
  font-size: 13px;
}

.crm-campaign-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.crm-campaign-editor {
  display: grid;
  gap: 14px;
}

.crm-form-note {
  border: 1px solid var(--crm-line);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 10px 12px;
}

.crm-form-note b,
.crm-form-note span {
  display: block;
}

.crm-form-note b {
  font-size: 13px;
  margin-bottom: 4px;
}

.crm-form-note span {
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 1.6;
}

.crm-compact-editor {
  margin: 14px 0;
}

.crm-page-map {
  margin-bottom: 12px;
}

.crm-card-note {
  margin: 10px 0 0;
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 1.6;
}

.crm-trace-grid {
  margin-top: 14px;
}

.crm-trace-card h2 {
  margin: 0 0 11px;
  font-size: 15px;
  letter-spacing: 0;
}

.crm-layout-panel {
  margin: 14px 0;
}

.crm-layout-summary {
  margin-bottom: 16px;
}

.crm-layout-notes {
  display: grid;
  gap: 9px;
}

.crm-layout-notes article,
.crm-layout-files,
.crm-wall-grid article {
  border: 1px solid var(--crm-line);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 12px;
}

.crm-layout-notes b,
.crm-layout-notes span,
.crm-layout-files b,
.crm-layout-files span,
.crm-wall-grid b,
.crm-wall-grid span,
.crm-wall-grid small {
  display: block;
}

.crm-layout-notes b,
.crm-layout-files b,
.crm-wall-grid b {
  font-size: 13px;
}

.crm-layout-notes span,
.crm-layout-files span,
.crm-wall-grid p,
.crm-wall-grid small {
  color: var(--crm-muted);
  font-size: 12px;
  line-height: 1.6;
}

.crm-layout-files {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.crm-layout-files .crm-mini-tags {
  margin-top: 8px;
}

.crm-wall-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.crm-wall-grid header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.crm-wall-grid header span {
  color: var(--crm-amber);
  font-weight: 800;
  white-space: nowrap;
}

.crm-status.layout-资料完整 {
  background: #eaf0e7;
  color: var(--crm-green);
}

.crm-status.layout-图纸未上传,
.crm-status.layout-待补量房,
.crm-status.layout-承重待复核,
.crm-status.layout-特殊户型待人工协助 {
  background: #fff0e6;
  color: var(--crm-amber);
}

.crm-detail-edit-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-bottom: 0;
}

.crm-detail-edit-form label {
  display: grid;
  gap: 6px;
}

.crm-detail-edit-form label > span {
  color: var(--crm-muted);
  font-size: 12px;
  font-weight: 700;
}

.crm-mini-tags.large {
  margin-top: 16px;
}

.crm-detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  margin: 0;
}

.crm-detail-list.compact {
  grid-template-columns: 1fr;
  margin-top: 14px;
}

.crm-detail-list div {
  border: 1px solid var(--crm-line);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 10px;
}

.crm-detail-list dt {
  color: var(--crm-muted);
  font-size: 12px;
  margin-bottom: 5px;
}

.crm-detail-list dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.crm-signal-group {
  padding: 12px 0;
  border-top: 1px solid var(--crm-line);
}

.crm-signal-group:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.crm-signal-group > b {
  display: block;
  margin-bottom: 9px;
  font-size: 13px;
}

.crm-answer-list,
.crm-note-list,
.crm-timeline {
  display: grid;
  gap: 9px;
}

.crm-answer-list article,
.crm-note-list p,
.crm-timeline article {
  margin: 0;
  border: 1px solid var(--crm-line);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 12px;
}

.crm-answer-list b,
.crm-answer-list span {
  display: block;
}

.crm-answer-list b {
  margin-bottom: 6px;
  font-size: 13px;
}

.crm-answer-list span,
.crm-note-list p,
.crm-timeline span {
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 1.65;
}

.crm-timeline article {
  display: grid;
  grid-template-columns: 116px 130px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
}

.crm-timeline time {
  color: var(--crm-muted);
  font-size: 12px;
}

.crm-timeline b {
  font-size: 13px;
}

.crm-tag-groups {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.crm-tag-groups article {
  border: 1px solid var(--crm-line);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 12px;
}

.crm-tag-groups b,
.crm-tag-groups span {
  display: block;
}

.crm-tag-groups b {
  font-size: 14px;
}

.crm-tag-groups span {
  color: var(--crm-muted);
  font-size: 12px;
  margin-top: 4px;
}

.database-note h2 {
  margin: 0;
  font-size: 20px;
}

.crm-tag-table {
  display: grid;
  gap: 11px;
}

.crm-tag-card {
  display: grid;
  grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr);
  gap: 20px;
  padding: 17px;
}

.crm-tag-card span,
.crm-module-card header span,
.crm-campaign-card header span {
  color: var(--crm-muted);
  font-size: 12px;
  font-weight: 800;
}

.crm-tag-card h3 {
  margin: 6px 0 8px;
  font-size: 19px;
}

.crm-tag-card p {
  margin: 0;
  color: var(--crm-muted);
  font-size: 13px;
  line-height: 1.65;
}

.crm-tag-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
}

.crm-tag-card dl div {
  border: 1px solid var(--crm-line);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 10px;
}

.crm-tag-card dt {
  color: var(--crm-muted);
  font-size: 12px;
  margin-bottom: 5px;
}

.crm-tag-card dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.crm-resource-grid,
.crm-module-grid,
.crm-campaign-list {
  display: grid;
  gap: 12px;
}

.crm-resource-card {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  overflow: hidden;
}

.crm-resource-thumb {
  min-height: 174px;
  background:
    linear-gradient(135deg, rgba(55, 108, 134, .18), rgba(77, 115, 88, .18)),
    repeating-linear-gradient(45deg, #f2f4f1 0 12px, #e9ede8 12px 24px);
  display: grid;
  place-items: center;
}

.crm-resource-thumb span {
  border-radius: 999px;
  background: rgba(255, 255, 255, .84);
  border: 1px solid var(--crm-line);
  padding: 7px 10px;
  color: var(--crm-muted);
  font-size: 12px;
  font-weight: 800;
}

.crm-resource-body {
  padding: 17px;
}

.crm-module-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crm-module-card {
  padding: 17px;
}

.crm-module-card header,
.crm-campaign-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.crm-module-card header b,
.crm-campaign-card header b {
  border-radius: 999px;
  background: #eef3f4;
  color: var(--crm-blue);
  padding: 6px 9px;
  font-size: 12px;
  white-space: nowrap;
}

.crm-module-card h2 {
  margin-bottom: 13px;
}

.crm-module-card p {
  border-top: 1px solid var(--crm-line);
  padding-top: 13px;
  margin-top: 14px;
}

.crm-campaign-card {
  padding: 18px;
}

@media (max-width: 980px) {
  .crm-app {
    display: block;
  }

  .crm-sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--crm-line);
  }

  .crm-nav {
    display: flex;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .crm-nav a {
    flex: 0 0 auto;
  }

  .crm-side-note {
    display: none;
  }

  .crm-main {
    padding: 22px 18px 36px;
  }

  .crm-stat-grid,
  .crm-grid.two,
  .crm-grid.three,
  .crm-grid.customer,
  .crm-grid.tags,
  .crm-grid.resources-head,
  .crm-layout-files,
  .crm-wall-grid,
  .crm-module-grid,
  .crm-campaign-form,
  .crm-detail-edit-form {
    grid-template-columns: 1fr;
  }

  .crm-campaign-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .crm-topbar {
    display: block;
  }

  .crm-open-front {
    margin-top: 13px;
  }

  .crm-stat-grid,
  .crm-resource-summary,
  .crm-campaign-metrics,
  .crm-detail-list,
  .crm-tag-groups,
  .crm-tag-card dl {
    grid-template-columns: 1fr;
  }

  .crm-tag-card,
  .crm-resource-card,
  .crm-timeline article {
    grid-template-columns: 1fr;
  }

  .crm-resource-thumb {
    min-height: 120px;
  }
}