:root { --ink:#102521; --muted:#64736f; --paper:#f5f3eb; --card:#fffef9; --green:#0c5a45; --green2:#123c33; --lime:#d7ee68; --line:#dfe4dc; --orange:#ec6f35; --shadow:0 16px 40px rgba(16,37,33,.10); }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:#dfe7e1; color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
button,textarea { font:inherit; }
button { cursor:pointer; }
.app-shell { width:100%; max-width:520px; margin:0 auto; min-height:100dvh; background:var(--paper); position:relative; overflow:hidden; box-shadow:0 0 50px rgba(0,0,0,.08); }
.topbar { height:72px; display:flex; align-items:center; padding:12px 18px; justify-content:space-between; background:rgba(245,243,235,.94); backdrop-filter:blur(16px); position:sticky; top:0; z-index:10; border-bottom:1px solid rgba(16,37,33,.07); }
.brand { display:flex; align-items:center; gap:10px; }
.brand-mark { width:37px; height:37px; border-radius:12px; display:grid; place-items:center; background:var(--green2); color:var(--lime); font-weight:900; }
.brand strong,.brand small { display:block; }.brand strong{font-size:15px;letter-spacing:.03em}.brand small{font-size:11px;color:var(--muted);margin-top:2px}
.icon-btn { border:0; background:transparent; color:var(--ink); min-width:40px; min-height:40px; border-radius:12px; font-size:24px; }
.icon-btn:active { background:#e4e7df; }
.screen { padding:0 22px; }
.hidden { display:none !important; }
[hidden] { display:none !important; }
.onboarding { min-height:calc(100dvh - 72px); display:flex; flex-direction:column; padding-bottom:max(26px,env(safe-area-inset-bottom)); }
.hero { padding:50px 4px 34px; }
.eyebrow { display:inline-block; color:var(--green); font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; margin-bottom:16px; }
.hero h1 { font-size:45px; line-height:1.08; letter-spacing:-.045em; margin:0; max-width:420px; }
.hero h1 em { color:var(--green); font-style:normal; position:relative; }
.hero h1 em:after { content:""; position:absolute; left:0; right:0; bottom:-4px; height:6px; background:var(--lime); z-index:-1; border-radius:9px; transform:rotate(-1deg); }
.hero p,.home-head p { color:var(--muted); font-size:15px; line-height:1.7; margin:22px 0 0; max-width:390px; }
.persona-grid { display:grid; gap:13px; margin-top:auto; }
.persona-card { display:grid; grid-template-columns:56px 1fr 24px; align-items:center; text-align:left; gap:14px; border:1px solid var(--line); border-radius:20px; padding:19px; background:var(--card); color:var(--ink); box-shadow:0 7px 18px rgba(16,37,33,.04); transition:.18s ease; }
.persona-card:active { transform:scale(.985); border-color:var(--green); }
.persona-icon { width:54px; height:54px; border-radius:17px; display:grid; place-items:center; font-size:19px; font-weight:900; background:#e2eee8; color:var(--green); }
.persona-card.coach .persona-icon { background:#f8dfd1;color:#994820; }
.persona-card strong,.persona-card small { display:block; }.persona-card strong{font-size:18px}.persona-card small{font-size:12px;color:var(--muted);margin-top:5px}.persona-card b{font-size:22px;color:var(--green)}
.privacy-note,.input-reminder { color:#78847f; font-size:11px; line-height:1.55; text-align:center; margin:18px 10px 0; }
.home-head { padding:30px 0 18px; }
.home-head .eyebrow { margin-bottom:10px; }.home-head h2{font-size:29px;letter-spacing:-.03em;margin:0}.home-head p{margin-top:8px}
.free-ask { margin:4px 0 18px; padding:17px; border-radius:19px; background:var(--green2); color:white; box-shadow:0 13px 28px rgba(18,60,51,.18); }
.free-ask-label { display:flex; justify-content:space-between; align-items:center; margin-bottom:11px; }
.free-ask-label span { color:var(--lime); font-size:11px; font-weight:900; letter-spacing:.12em; }
.free-ask-label b { font-size:15px; }
.home-composer { display:flex; align-items:stretch; gap:8px; }
.home-composer textarea { flex:1; min-width:0; resize:none; border:0; outline:0; border-radius:12px; background:#fffef9; color:var(--ink); padding:11px 12px; line-height:1.45; font-size:14px; }
.home-composer textarea::placeholder { color:#84908c; }
.home-composer button { flex:0 0 82px; border:0; border-radius:12px; background:var(--lime); color:var(--green2); font-size:13px; font-weight:900; padding:0 10px; }
.home-composer button:active { transform:scale(.98); }
.free-ask small { display:block; color:#b9ccc5; font-size:10px; line-height:1.45; margin:9px 2px 0; }
.question-grid { display:grid; gap:10px; padding:8px 0; }
.question-card { width:100%; border:1px solid var(--line); border-radius:16px; background:var(--card); color:var(--ink); padding:17px 18px; display:grid; grid-template-columns:30px 1fr 20px; align-items:center; gap:10px; text-align:left; font-weight:650; line-height:1.4; box-shadow:0 4px 13px rgba(16,37,33,.035); }
.question-card .num { color:var(--green);font-size:11px;font-weight:900;letter-spacing:.1em}.question-card .arr{color:#9aa59f;font-size:18px}.question-card:active{border-color:var(--green);transform:scale(.99)}
.text-btn { display:block; margin:18px auto 30px; border:0; background:transparent; color:var(--green); padding:12px; font-size:13px;font-weight:700; }
.chat-screen { padding:0; min-height:calc(100dvh - 72px); display:flex; flex-direction:column; }
.messages { flex:1; padding:20px 18px 190px; overflow-y:auto; }
.message { margin:0 0 20px; animation:rise .22s ease both; }
@keyframes rise { from{opacity:0;transform:translateY(6px)} }
.message.user { display:flex; justify-content:flex-end; }
.message.user .bubble { max-width:88%; background:var(--green2); color:white; border-radius:18px 18px 5px 18px; padding:13px 16px; line-height:1.6; font-size:14px; }
.message.assistant { background:var(--card); border:1px solid var(--line); border-radius:19px; padding:18px; box-shadow:0 7px 20px rgba(16,37,33,.055); }
.assistant-label { color:var(--green);font-size:11px;font-weight:900;letter-spacing:.12em;margin-bottom:10px; }
.answer { white-space:pre-wrap; font-size:14px; line-height:1.75; word-break:break-word; }
.answer:empty:after { content:"正在想一个能落地的办法"; color:var(--muted); }
.answer.streaming:after { content:"";display:inline-block;width:6px;height:15px;background:var(--green);margin-left:4px;vertical-align:-2px;animation:blink 1s infinite; }
@keyframes blink{50%{opacity:0}}
.message-actions { display:flex; gap:6px; margin-top:14px; padding-top:12px; border-top:1px solid #ebeee9; }
.mini-btn { border:0;background:#f0f2ed;color:#53635e;border-radius:9px;padding:7px 10px;font-size:12px; }.mini-btn.active{background:#dcebe3;color:var(--green)}
.context-actions { margin-top:14px; padding-top:13px; border-top:1px solid #ebeee9; }
.context-title { margin:0 0 9px; color:var(--muted); font-size:12px; font-weight:700; }
.context-chips { display:flex; flex-wrap:wrap; gap:8px; }
.context-chip,.switch-btn { border:1px solid #c9d9d1; background:#f1f7f3; color:var(--green); border-radius:999px; padding:8px 11px; font-size:12px; font-weight:700; line-height:1.2; }
.context-chip:active,.switch-btn:active { transform:scale(.97); }
.context-chip.selected { background:var(--green); color:white; border-color:var(--green); }
.context-chip:disabled,.switch-btn:disabled { cursor:default; opacity:.55; }
.persona-switch { background:#eef4d5; border:1px solid #d7e4a0; border-radius:13px; padding:11px 12px; margin-bottom:12px; }
.persona-switch p { margin:0 0 9px; color:#40513e; font-size:12px; line-height:1.55; }
.persona-switch .switch-btn { background:var(--green2); color:white; border-color:var(--green2); }
.composer-wrap { position:fixed; z-index:8; bottom:0; width:100%; max-width:520px; padding:8px 16px max(14px,env(safe-area-inset-bottom)); background:linear-gradient(180deg,rgba(245,243,235,0),var(--paper) 20%); }
.input-reminder { margin:0 4px 7px; text-align:left; }
.composer { display:flex; align-items:flex-end; background:var(--card); border:1px solid #cfd7d1; border-radius:18px; padding:8px 8px 8px 14px; box-shadow:var(--shadow); }
.composer:focus-within { border-color:var(--green); }
.composer textarea { flex:1; border:0; outline:0; resize:none; background:transparent; padding:7px 6px 6px 0; max-height:120px; min-height:38px; line-height:1.5; color:var(--ink); }
.composer button { border:0;border-radius:12px;width:42px;height:42px;background:var(--green);color:white;font-size:22px;font-weight:800; }.composer button:disabled{opacity:.45}
.backdrop { position:fixed;inset:0;background:rgba(6,24,19,.35);z-index:19;backdrop-filter:blur(2px); }
.drawer { position:fixed;top:0;right:0;bottom:0;width:min(86vw,380px);background:var(--paper);z-index:20;transform:translateX(105%);transition:.24s ease;padding:18px;box-shadow:-18px 0 45px rgba(0,0,0,.16);overflow:auto; }.drawer.open{transform:translateX(0)}
.drawer-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;font-size:19px}.drawer-action{width:100%;border:1px solid var(--line);background:var(--card);border-radius:13px;padding:13px 14px;text-align:left;margin:0 0 8px;color:var(--ink)}.drawer-action.primary{background:var(--green2);color:white;border-color:var(--green2)}
.drawer-section{margin-top:26px}.drawer-section>span{font-size:12px;color:var(--muted);font-weight:800;letter-spacing:.1em}.history-list{margin-top:10px}.history-item{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;padding:12px 3px;text-align:left;color:var(--ink)}.history-item strong,.history-item small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-item strong{font-size:13px}.history-item small{color:var(--muted);font-size:10px;margin-top:4px}.muted{color:var(--muted);font-size:12px}
.memory-dialog { width:min(92vw,460px);border:0;border-radius:22px;padding:24px;background:var(--paper);color:var(--ink);box-shadow:var(--shadow); }.memory-dialog::backdrop{background:rgba(6,24,19,.5);backdrop-filter:blur(3px)}.dialog-close{position:absolute;right:16px;top:13px;border:0;background:transparent;font-size:25px}.memory-dialog .eyebrow{margin-bottom:6px}.memory-dialog h3{font-size:25px;margin:0}.memory-dialog p{font-size:13px;line-height:1.6;color:var(--muted)}.memory-dialog textarea{width:100%;border:1px solid var(--line);background:var(--card);border-radius:14px;padding:13px;resize:vertical;outline:0;line-height:1.6}.dialog-actions{display:flex;justify-content:space-between;gap:10px;margin-top:14px}.dialog-actions button{border-radius:11px;padding:11px 15px}.danger-btn{border:1px solid #e1b9ab;background:transparent;color:#a74425}.solid-btn{border:0;background:var(--green);color:white;margin-left:auto}
.toast { position:fixed;left:50%;bottom:100px;transform:translateX(-50%);z-index:40;background:#122c25;color:white;border-radius:12px;padding:10px 15px;font-size:12px;box-shadow:var(--shadow);white-space:nowrap; }
.site-footer { display:flex; flex-direction:column; align-items:center; gap:6px; padding:18px 22px max(22px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); color:var(--muted); font-size:11px; line-height:1.5; text-align:center; }
.site-footer a { color:var(--green); text-decoration:none; }
.site-footer a:hover,.site-footer a:focus-visible { text-decoration:underline; outline:none; }
@media (min-width:700px){body{padding:18px 0}.app-shell{min-height:calc(100dvh - 36px);border-radius:24px}.onboarding{min-height:calc(100dvh - 108px)}.composer-wrap{bottom:18px;border-radius:0 0 24px 24px}}
.video-entry{display:grid;grid-template-columns:44px 1fr 16px;align-items:center;gap:12px;padding:15px;border:1px solid #d7e5dc;border-radius:17px;background:#eef6ed;color:var(--ink);text-decoration:none;box-shadow:0 5px 16px rgba(16,37,33,.035)}
.video-entry:hover,.video-entry:focus-visible{border-color:var(--green);outline:none}
.video-entry-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:var(--green);color:white;font-size:14px}
.video-entry strong,.video-entry small{display:block}.video-entry strong{font-size:14px}.video-entry small{margin-top:4px;color:var(--muted);font-size:11px;line-height:1.4}.video-entry b{font-size:22px;color:var(--green)}
.onboarding-video-entry{margin-top:16px}
.video-feature{display:grid;gap:7px;margin:0 0 20px;padding:19px 20px;border:1px solid #e8c7a9;border-radius:19px;background:linear-gradient(135deg,#fff1e4,#f9e2ce);color:var(--ink);text-decoration:none;box-shadow:0 9px 22px rgba(118,65,28,.08)}
.video-feature:hover,.video-feature:focus-visible{border-color:#c75e29;outline:none}
.video-feature-tag{width:max-content;padding:5px 9px;border-radius:999px;background:#f1d1b8;color:#8f421e;font-size:10px;font-weight:900;letter-spacing:.08em}
.video-feature strong{font-size:19px;line-height:1.35}.video-feature small{color:#695c50;font-size:12px;line-height:1.55}
.video-feature-action{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:9px;padding:11px 14px;border-radius:11px;background:#a64a24;color:white;font-size:13px;font-weight:800}.video-feature-action b{font-size:19px;line-height:1}
.video-back,.video-header-spacer{width:40px;height:40px}.video-back{display:grid;place-items:center;border-radius:12px;color:var(--ink);text-decoration:none;font-size:29px}.video-back:focus-visible{outline:2px solid var(--green)}
.video-main{padding-bottom:max(34px,env(safe-area-inset-bottom))}
.video-hero{padding:39px 0 23px}.video-hero .eyebrow{margin-bottom:12px}.video-hero h1{font-size:clamp(30px,8vw,41px);line-height:1.16;letter-spacing:-.04em;margin:0}.video-hero h1 em{font-style:normal;color:var(--green)}.video-hero p{max-width:430px;margin:17px 0 0;color:var(--muted);font-size:14px;line-height:1.7}
.video-panel{padding:20px;border:1px solid #d6e8df;border-radius:19px;background:#f4faf6;display:grid;gap:12px;box-shadow:0 8px 24px rgba(16,37,33,.04)}
.video-panel label{font-weight:750;color:#244c40;font-size:14px}
.recommended{display:inline-block;margin-left:4px;padding:2px 6px;border-radius:6px;background:#dbedb3;color:#386044;font-size:10px;vertical-align:1px}
.video-prompt{width:100%;min-height:112px;padding:12px;border:1px solid #b5cfc1;border-radius:11px;background:#fff;color:var(--ink);resize:vertical;outline:none;line-height:1.55;font-size:14px}
.video-prompt:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(12,90,69,.1)}
.video-panel .video-input-hint{color:#627b70;font-size:11px;line-height:1.5}
.video-presets{display:grid;gap:9px;margin:3px 0 5px;padding-top:14px;border-top:1px solid #dce9e1}
.video-presets>span{color:#426153;font-size:12px;font-weight:700}
.video-preset-list{display:flex;flex-wrap:wrap;gap:8px}
.video-preset-list button{border:1px solid #c7d9ce;border-radius:999px;padding:8px 11px;background:#fff;color:#225443;font-size:12px;font-weight:700}
.video-preset-list button.selected{background:#dceebd;border-color:#9cbc6e}
.video-panel p{margin:2px 0;color:#31594b;line-height:1.5;font-size:13px}
.video-optimized{display:grid;gap:6px;padding:12px;border:1px solid #d7e7d9;border-radius:11px;background:#fff}
.video-optimized strong{color:#245141;font-size:12px}.video-optimized p{font-size:13px;line-height:1.6}
.video-panel .video-job-info{margin:0;color:#6a7d73;font-size:11px;overflow-wrap:anywhere}
.video-lookup{display:grid;gap:8px;padding:13px;border:1px solid #b8d5c6;border-radius:11px;background:#fff}.video-lookup[hidden]{display:none}.video-lookup strong{color:#174d3b;font-size:13px}.video-panel .video-lookup p{margin:0;color:#587066;font-size:11px;line-height:1.55}.video-lookup-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.video-lookup-row input{min-width:0;padding:10px;border:1px solid #c4d8ce;border-radius:9px;background:#f6faf8;color:#38584c;font:inherit;font-size:12px}.video-lookup-row button{border:0;border-radius:9px;padding:0 13px;background:#174d3b;color:#fff;font:inherit;font-size:12px;font-weight:750;white-space:nowrap;cursor:pointer}.video-lookup-row button:focus-visible,.video-lookup-row input:focus-visible{outline:2px solid #83aa96;outline-offset:1px}
.video-panel #videoResult a{display:block;padding:12px;border:1px solid #0b694b;border-radius:11px;background:#fff;color:#075c42;text-align:center;text-decoration:none;font-weight:700;font-size:14px}
.video-new-btn{width:100%;padding:13px;border:0;border-radius:11px;background:#0b694b;color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.video-new-btn:disabled{opacity:.55;cursor:not-allowed}
.video-note{color:var(--muted);font-size:12px;line-height:1.65;margin:16px 2px 0}.video-return{display:inline-block;margin:21px 0;color:var(--green);font-size:13px;font-weight:700;text-decoration:none}