:root {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  color: #101b2b;
  background: #eef2f0;
  font-synthesis: none;
  --green: #35ad68;
  --green-dark: #239356;
  --green-soft: #e8f7ef;
  --blue: #3478ff;
  --ink: #101b2b;
  --muted: #7c8899;
  --line: #e6ebe8;
  --surface: #ffffff;
  --shadow: 0 8px 24px rgba(31, 55, 43, 0.08), 0 1px 4px rgba(28, 47, 38, 0.06);
}

* { box-sizing: border-box; }
button, input, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
body { margin: 0; min-width: 320px; min-height: 100vh; -webkit-font-smoothing: antialiased; background: radial-gradient(circle at 50% 10%, #ffffff 0, #eef4f1 45%, #e7ece9 100%); }

.prototype-stage { min-height: 100vh; display: grid; place-content: center; gap: 14px; padding: 24px; }
.phone-caption { width: 390px; display: flex; align-items: baseline; justify-content: space-between; color: #586273; font-size: 12px; letter-spacing: .02em; }
.phone-caption strong { color: var(--ink); font-size: 13px; max-width: 240px; text-align: right; }
.mobile-prototype { width: min(100vw, 390px); height: 844px; max-height: calc(100dvh - 72px); margin-inline: auto; overflow: hidden; position: relative; background: #fbfcfb; border-radius: 36px; border: 9px solid #111619; box-shadow: 0 30px 90px rgba(20, 37, 29, .2), inset 0 0 0 1px #47504c; }
.page { position: absolute; inset: 50px 0 0; display: flex; flex-direction: column; background: #fbfcfb; overflow: hidden; }
.status-bar { position: absolute; z-index: 10; inset: 0 0 auto; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; font-size: 12px; font-weight: 800; color: #0c141f; background: #fbfcfb; }
.dynamic-island { position: absolute; left: 50%; top: 7px; width: 114px; height: 31px; border-radius: 18px; background: #050708; transform: translateX(-50%); }
.status-icons { display: flex; align-items: center; gap: 4px; }

.app-header { display: flex; justify-content: space-between; align-items: flex-end; padding: 20px 22px 38px; }
.app-header h1 { margin: 7px 0 5px; font-size: 25px; letter-spacing: -.04em; }
.app-header p { margin: 0; color: var(--muted); font-size: 12px; }
.demo-pill { display: inline-flex; align-items: center; gap: 3px; padding: 4px 7px; border: 0; border-radius: 8px; background: #edf2ef; color: #526159; font-size: 10px; font-weight: 700; cursor: pointer; }
.recovery { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.recovery > span { display: flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 14px; color: var(--green-dark); background: var(--green-soft); font-size: 11px; font-weight: 700; }
.recovery small { color: #98a2af; font-size: 10px; }
.recovery button { display: flex; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid #e4e9e6; border-radius: 12px; color: var(--green-dark); background: white; box-shadow: 0 3px 10px rgba(25, 50, 37, .04); font-size: 10px; font-weight: 700; cursor: pointer; }

.hero-card { position: relative; min-height: 377px; margin: 16px 16px 0; padding: 18px 16px 16px; border: 1px solid #e1e8e4; border-radius: 20px; background: linear-gradient(145deg, #fff 12%, #f4fcf7 58%, #e4f7eb 100%); box-shadow: var(--shadow); }
.hero-art { position: absolute; right: -10px; bottom: 145px; z-index: 1; width: 250px; height: 210px; object-fit: contain; object-position: right bottom; opacity: .9; }
.hero-top { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--green-dark); font-size: 16px; font-weight: 700; }
.hero-eyebrow svg { box-sizing: content-box; padding: 9px; border-radius: 50%; color: white; background: var(--green); }
.soft-badge { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 12px; color: var(--green-dark); background: rgba(224, 246, 234, .95); font-size: 10px; font-weight: 700; white-space: nowrap; }
.hero-card h2 { position: relative; z-index: 2; max-width: 265px; margin: 34px 0 47px; font-size: 28px; line-height: 1.2; letter-spacing: -.04em; }
.hero-body { position: relative; z-index: 2; max-width: 260px; display: flex; align-items: flex-start; gap: 8px; margin: 0; color: #435061; font-size: 13px; line-height: 1.7; }
.hero-body svg { flex: 0 0 auto; color: var(--green); margin-top: 2px; }
.hero-note { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 93px; display: flex; align-items: flex-start; gap: 8px; padding: 11px 0; border-top: 1px solid rgba(170, 198, 182, .45); color: #566354; font-size: 11px; line-height: 1.45; }
.hero-note svg { flex: 0 0 auto; color: var(--green); }
.hero-actions { position: absolute; z-index: 3; left: 16px; right: 16px; bottom: 24px; display: grid; grid-template-columns: 1.35fr .9fr; gap: 10px; }
.hero-actions .primary, .hero-actions .secondary { min-height: 46px; }
.primary, .secondary { min-height: 43px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 16px; border-radius: 13px; font-size: 13px; font-weight: 700; cursor: pointer; transition: .18s ease; }
.primary { border: 1px solid var(--green); color: white; background: linear-gradient(135deg, var(--green), #2fa960); box-shadow: 0 7px 18px rgba(49, 174, 103, .18); }
.primary:hover { background: var(--green-dark); }.primary:active, .secondary:active { transform: translateY(1px); }.primary:disabled { opacity: .45; cursor: not-allowed; }
.secondary { border: 1px solid #8fd3ad; color: var(--green-dark); background: rgba(255,255,255,.88); }
.wide { width: 100%; margin-top: 11px; }

.quick-tools { display: grid; grid-template-columns: repeat(3, 1fr); margin: 32px 16px 0; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: var(--shadow); }
.quick-tools button { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; height: 60px; padding: 0 5px; border: 0; border-right: 1px solid var(--line); color: #3c4655; background: transparent; font-size: 12px; cursor: pointer; }
.quick-tools button:last-child { border-right: 0; }.quick-tools button:nth-child(1) svg { color: #3478ff; }.quick-tools button:nth-child(2) svg { color: #f4a11b; }.quick-tools button:nth-child(3) svg { color: var(--green); }
.ai-composer { height: 52px; display: flex; align-items: center; gap: 9px; margin: 30px 16px 76px; padding: 0 10px 0 14px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: var(--shadow); }
.ai-composer > svg { color: #4380ff; }.ai-composer input, .chat-composer input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }.ai-composer input::placeholder, .chat-composer input::placeholder { color: #a5afbc; }
.icon-button { width: 38px; height: 38px; flex: 0 0 auto; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 12px; color: #5e6978; background: transparent; cursor: pointer; }
.icon-button:hover { background: #f1f5f3; }.icon-button.send { width: 32px; height: 32px; border-radius: 50%; color: white; background: #3e7df5; }

.bottom-nav { position: absolute; z-index: 6; inset: auto 0 0; height: 70px; display: grid; grid-template-columns: repeat(4, 1fr); padding: 7px 12px 9px; border-top: 1px solid #edf0ee; background: rgba(255,255,255,.96); backdrop-filter: blur(16px); }
.bottom-nav button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; color: #8d98a7; background: transparent; font-size: 10px; cursor: pointer; }
.bottom-nav button.active { color: #3478ff; font-weight: 700; }.bottom-nav button.active::after { content: ""; position: absolute; bottom: -3px; width: 20px; height: 3px; border-radius: 2px; background: #3478ff; }

.top-bar { height: 72px; display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; padding: 8px 12px; border-bottom: 1px solid #edf1ef; background: white; }
.top-bar > div { text-align: center; }.top-bar h2 { margin: 0; font-size: 17px; }.top-bar p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }.top-spacer { width: 42px; }
.chat-scroll, .content-scroll { flex: 1; overflow-y: auto; padding: 18px 16px 95px; scrollbar-width: none; }.chat-scroll::-webkit-scrollbar, .content-scroll::-webkit-scrollbar { display: none; }
.message { display: flex; gap: 9px; align-items: flex-start; }.avatar { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; color: white; background: var(--green); }.message > div { padding: 14px; border-radius: 5px 16px 16px 16px; background: #eef8f2; }.message strong { display: block; margin-bottom: 6px; font-size: 14px; }.message p { margin: 0; color: #566354; font-size: 12px; line-height: 1.65; }
.action-panel, .form-card { margin-top: 16px; padding: 15px; border: 1px solid var(--line); border-radius: 17px; background: white; box-shadow: var(--shadow); }.action-panel > h3, .form-card > h3 { margin: 0 0 12px; font-size: 14px; }
.choice-grid { display: grid; gap: 8px; }.choice-grid button { min-height: 43px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; border: 1px solid var(--line); border-radius: 12px; color: #394555; background: white; text-align: left; font-size: 12px; cursor: pointer; }.choice-grid button.selected { border-color: #7dcc9f; color: var(--green-dark); background: #f0faf4; font-weight: 700; }
.text-button { width: 100%; margin-top: 10px; padding: 8px; border: 0; color: var(--green-dark); background: transparent; font-size: 12px; font-weight: 700; cursor: pointer; }
.confirm-card { margin-top: 13px; padding: 14px; border: 1px solid #dfe9e3; border-radius: 15px; background: #fbfefc; }.confirm-title { display: flex; align-items: center; gap: 7px; }.confirm-title svg { color: var(--green); }.confirm-title h3 { margin: 0; font-size: 14px; }.confirm-card dl { margin: 12px 0; }.confirm-card dl div { display: grid; grid-template-columns: 78px 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid #edf1ef; font-size: 11px; }.confirm-card dt { color: var(--muted); }.confirm-card dd { margin: 0; color: #303c4c; font-weight: 600; }.confirm-notice, .privacy-note { color: #7d8794; font-size: 10px; line-height: 1.55; }.split-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }.split-actions button { min-height: 39px; font-size: 11px; }
.permission-card, .empty-tip, .knowledge-note { display: flex; align-items: flex-start; gap: 11px; padding: 13px; border-radius: 14px; background: #f2f8f5; }.permission-card svg, .empty-tip svg, .knowledge-note svg { flex: 0 0 auto; color: var(--green); }.permission-card strong, .empty-tip strong { font-size: 12px; }.permission-card p, .empty-tip p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }.knowledge-note { margin-top: 16px; color: #556356; font-size: 11px; line-height: 1.55; }
.field { display: grid; gap: 6px; margin-bottom: 12px; }.field > span { color: #5e6875; font-size: 10px; font-weight: 600; }.field input, .field textarea, .field select { width: 100%; border: 1px solid #e0e6e2; border-radius: 11px; outline: 0; color: var(--ink); background: #fbfcfb; font-size: 12px; }.field input, .field select { height: 40px; padding: 0 11px; }.field textarea { min-height: 76px; resize: vertical; padding: 10px 11px; line-height: 1.5; }.field input:focus, .field textarea:focus, .field select:focus { border-color: #69c38e; box-shadow: 0 0 0 3px rgba(66, 177, 112, .1); }.field small { color: #8b95a1; font-size: 9px; line-height: 1.45; }.two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.field-error { display: flex; align-items: flex-start; gap: 6px; color: #b44b3d; font-size: 10px; line-height: 1.5; }.field-error svg { flex: 0 0 auto; }.nested-form { margin-top: 10px; padding: 12px; border: 1px solid #e3ebe6; border-radius: 14px; background: #f9fcfa; }.error-card { display: grid; gap: 9px; padding: 14px; border: 1px solid #f0c9c3; border-radius: 14px; color: #93463d; background: #fff8f6; }.error-card p { margin: 0 0 3px; color: #7b625f; font-size: 10px; line-height: 1.5; }
.chat-composer { position: absolute; z-index: 4; inset: auto 12px 12px; height: 52px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 14px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 9px 28px rgba(28, 48, 38, .14); }

.list-page { padding-bottom: 70px; }.section-heading { display: flex; align-items: flex-end; justify-content: space-between; padding: 4px 20px 12px; }.section-heading.mini { padding-top: 17px; }.section-heading h2 { margin: 3px 0 0; font-size: 19px; }.kicker { color: var(--green-dark); font-size: 10px; font-weight: 700; letter-spacing: .08em; }.small-chip, .sample-label { padding: 5px 9px; border: 0; border-radius: 10px; color: #66717f; background: #eef2f0; font-size: 10px; }.calendar-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 0 16px 15px; }.calendar-row button { height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; border-radius: 13px; color: #7b8796; background: transparent; }.calendar-row button small { font-size: 9px; }.calendar-row button strong { font-size: 13px; }.calendar-row button.selected { color: white; background: var(--green); box-shadow: 0 7px 16px rgba(51, 172, 103, .2); }
.list-card, .record-card, .settings-card, .profile-card { margin: 0 16px 12px; border: 1px solid var(--line); border-radius: 17px; background: white; box-shadow: var(--shadow); }.list-card { display: flex; align-items: flex-start; gap: 11px; padding: 15px; }.list-icon { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; }.list-icon.green { color: var(--green-dark); background: var(--green-soft); }.list-icon.blue { color: #3478ff; background: #edf3ff; }.list-main { min-width: 0; flex: 1; }.list-main > span, .record-top > div > span, .profile-card span { color: var(--muted); font-size: 9px; }.list-main h3, .record-top h3 { margin: 4px 0; font-size: 14px; }.list-main p { margin: 0; color: #687382; font-size: 10px; line-height: 1.45; }.empty-tip { margin: 0 16px; }.record-card { padding: 14px; }.record-card.compact { padding-bottom: 10px; }.record-top { display: flex; align-items: center; gap: 10px; }.record-top > div:nth-child(2) { min-width: 0; flex: 1; }.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); margin: 13px 0 10px; padding: 11px 0; border-top: 1px solid #edf1ef; border-bottom: 1px solid #edf1ef; }.metric-row div { display: flex; flex-direction: column; align-items: center; border-right: 1px solid #edf1ef; }.metric-row div:last-child { border-right: 0; }.metric-row strong { font-size: 16px; }.metric-row span { margin-top: 2px; color: var(--muted); font-size: 8px; }.summary { margin: 7px 0 0; color: #687382; font-size: 10px; line-height: 1.5; }.duplicate-alert { display: flex; align-items: center; gap: 9px; margin: 0 16px; padding: 12px; border: 1px solid #f2d8ae; border-radius: 14px; color: #a06b16; background: #fff9ed; text-align: left; cursor: pointer; }.duplicate-alert > span { flex: 1; display: flex; flex-direction: column; }.duplicate-alert strong { font-size: 11px; }.duplicate-alert small { margin-top: 2px; color: #a78b5c; font-size: 9px; }
.profile-card { display: flex; align-items: center; gap: 10px; padding: 15px; }.profile-avatar { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 16px; color: var(--green); background: var(--green-soft); }.profile-card > div:nth-child(2) { min-width: 0; flex: 1; }.profile-card h2 { margin: 4px 0 0; font-size: 14px; line-height: 1.35; }.settings-card { overflow: hidden; }.settings-card button { width: 100%; min-height: 47px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(70px, 130px) 18px; align-items: center; gap: 8px; padding: 9px 13px; border: 0; border-bottom: 1px solid #edf1ef; color: #384352; background: white; text-align: left; font-size: 11px; cursor: pointer; }.settings-card button:last-child { border-bottom: 0; }.setting-value { overflow: hidden; color: #a1aab4; text-align: right; text-overflow: ellipsis; white-space: nowrap; }.setting-value.filled { color: var(--green-dark); font-weight: 700; }

.modal-backdrop, .demo-backdrop { position: absolute; z-index: 30; inset: 0; display: flex; align-items: flex-end; background: rgba(10, 20, 15, .42); backdrop-filter: blur(3px); }.modal, .demo-sheet { width: 100%; max-height: 88%; overflow-y: auto; padding: 17px 16px 24px; border-radius: 24px 24px 0 0; background: white; box-shadow: 0 -12px 42px rgba(17, 32, 24, .16); }.modal-head, .sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }.modal-head h2, .sheet-head h2 { margin: 0; font-size: 18px; }.sheet-head h2 { margin-top: 3px; }.sheet-head p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }.sheet-handle { width: 38px; height: 4px; margin: -7px auto 14px; border-radius: 3px; background: #d9dfdc; }.demo-list { display: grid; gap: 8px; }.demo-list > button { min-height: 62px; display: grid; grid-template-columns: 34px 1fr 18px; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 14px; color: #33404f; background: white; text-align: left; cursor: pointer; }.demo-list > button.active { border-color: #79c99b; background: #f1faf5; }.demo-number { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: var(--green-dark); background: var(--green-soft); font-size: 10px; font-weight: 800; }.demo-list button > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; }.demo-list strong { font-size: 11px; }.demo-list small { color: var(--muted); font-size: 9px; line-height: 1.35; }
.danger-button { display: flex; align-items: center; gap: 7px; margin: 2px 0 8px; padding: 8px 0; border: 0; color: #c15045; background: transparent; font-size: 11px; cursor: pointer; }.danger-solid { min-height: 39px; border: 0; border-radius: 11px; color: white; background: #c75a4e; font-size: 11px; font-weight: 700; cursor: pointer; }.delete-confirm { margin-bottom: 10px; padding: 11px; border: 1px solid #f0c9c3; border-radius: 12px; background: #fff8f6; }.delete-confirm p { margin: 0 0 9px; color: #7c514c; font-size: 10px; line-height: 1.45; }.compare-box { display: grid; gap: 8px; }.compare-box div { display: flex; flex-direction: column; gap: 4px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; }.compare-box span { color: var(--muted); font-size: 9px; }.compare-box strong { font-size: 12px; }
.feedback-summary { display: flex; gap: 12px; align-items: center; padding: 17px; border-radius: 18px; color: #236f49; background: #e9f7ef; }.feedback-summary span { font-size: 9px; }.feedback-summary h2 { margin: 3px 0; color: var(--ink); font-size: 20px; }.feedback-summary p { margin: 0; color: #647268; font-size: 10px; }.rpe-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 15px; }.rpe-row button { height: 42px; border: 1px solid var(--line); border-radius: 12px; color: #5f6976; background: white; font-size: 11px; }.rpe-row button.selected { border-color: var(--green); color: var(--green-dark); background: var(--green-soft); font-weight: 700; }.analysis-hero { padding: 20px; border-radius: 20px; background: linear-gradient(145deg, #effaf3, #dff3e7); }.analysis-hero > svg { color: var(--green); }.analysis-hero .soft-badge { float: right; }.analysis-hero h2 { margin: 20px 0 8px; font-size: 23px; line-height: 1.25; }.analysis-hero p, .insight-card p { margin: 0; color: #5e6b63; font-size: 11px; line-height: 1.65; }.insight-card { margin-top: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: white; }.insight-card h3 { margin: 0 0 7px; font-size: 13px; }
.toast { position: absolute; z-index: 50; left: 50%; bottom: 84px; display: flex; align-items: center; gap: 7px; max-width: 86%; padding: 10px 14px; border-radius: 13px; color: white; background: rgba(18, 34, 25, .9); box-shadow: 0 10px 30px rgba(14, 28, 20, .2); font-size: 10px; white-space: nowrap; transform: translateX(-50%); animation: toast-in .22s ease-out; }.toast svg { color: #6fe09c; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

@media (max-width: 500px) {
  body { background: #111619; }
  .prototype-stage { min-height: 100dvh; padding: 0; display: block; }
  .phone-caption { display: none; }
  .mobile-prototype { width: 100vw; height: 844px; max-height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
}