:root { --ink:#19231e; --muted:#738078; --green:#176b4a; --green-2:#dff3e8; --line:#e7ebe7; --cream:#f6f7f3; --orange:#ef7b46; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#f3f5f2; font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif; }
button, input, select { font:inherit; }
button { color:inherit; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:238px 1fr; }
.sidebar { position:fixed; inset:0 auto 0 0; width:238px; padding:28px 20px 22px; background:#fbfcfa; border-right:1px solid var(--line); display:flex; flex-direction:column; z-index:3; }
.brand { display:flex; align-items:center; gap:11px; padding:0 8px 28px; text-decoration:none; color:var(--ink); }
.brand-mark { width:39px; height:39px; display:grid; place-items:center; color:white; border-radius:12px 4px 12px 4px; background:var(--green); font-family:serif; font-weight:800; box-shadow:0 8px 18px #176b4a33; }
.brand strong,.brand small { display:block; }.brand strong { font-size:18px; letter-spacing:2px; }.brand small { color:#9aa39d; font-size:9px; letter-spacing:1.2px; margin-top:2px; }
.nav-label { margin:18px 12px 8px; color:#a4aca7; font-size:11px; font-weight:700; letter-spacing:1.5px; }
.nav-item { height:43px; padding:0 13px; margin:3px 0; display:flex; align-items:center; gap:13px; border-radius:9px; color:#667169; text-decoration:none; font-size:14px; font-weight:600; }
.nav-item span { width:18px; text-align:center; font-size:17px; }.nav-item em { margin-left:auto; font-size:10px; font-style:normal; padding:2px 7px; color:var(--green); background:#e3f2e9; border-radius:10px; }
.nav-item.active { color:var(--green); background:#e9f4ee; }.nav-item:hover { background:#f0f3f0; }
.usage-card { margin-top:auto; padding:16px; border:1px solid #dfe7e1; background:linear-gradient(145deg,#f4f9f5,#fff); border-radius:12px; }
.usage-card>div:first-child { display:flex; justify-content:space-between; font-size:11px; }.usage-card .progress { height:5px; margin:10px 0 8px; overflow:hidden; background:#e5ece7; border-radius:9px; }.progress i { display:block; width:68%; height:100%; background:var(--green); }.usage-card small { color:#98a099; font-size:10px; }.usage-card button { margin-top:12px; padding:0; border:0; background:none; color:var(--green); font-size:11px; font-weight:700; }
.profile { display:flex; align-items:center; gap:9px; padding:19px 4px 0; }.profile .avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:white; background:#b6764f; }.profile strong,.profile small { display:block; font-size:11px; }.profile small { color:#a0a8a2; margin-top:3px; font-size:9px; }.profile button { margin-left:auto; border:0; background:none; color:#929a94; }
main { grid-column:2; min-width:0; padding:0 42px 80px; }
.topbar { height:104px; display:flex; align-items:center; justify-content:space-between; }.topbar p { margin:0 0 7px; color:#8c9690; font-size:11px; }.topbar p span { color:#4d5b52; }.topbar h1 { margin:0; font-family:Georgia,"Songti SC",serif; font-size:24px; letter-spacing:.5px; }.top-actions { display:flex; align-items:center; gap:9px; }.icon-button,.draft-button { height:36px; border:1px solid var(--line); background:white; border-radius:8px; }.icon-button { width:36px; }.notification { position:relative; }.notification:after { content:""; position:absolute; right:8px; top:7px; width:5px; height:5px; background:#e86652; border-radius:50%; }.draft-button { padding:0 14px; color:#5f6a62; }.draft-button b { margin-left:6px; color:var(--green); }
.hero-card { position:relative; height:163px; overflow:hidden; display:flex; align-items:center; padding:30px 41px; color:white; border-radius:16px; background:linear-gradient(115deg,#174f3b,#1b684b 70%,#257b58); box-shadow:0 12px 32px #174f3b20; }
.hero-card:before { content:""; position:absolute; inset:0; opacity:.18; background-image:radial-gradient(#fff 0.7px,transparent .7px); background-size:13px 13px; mask-image:linear-gradient(90deg,transparent,black); }.hero-copy { z-index:1; }.eyebrow { padding:5px 10px; background:#ffffff16; border:1px solid #ffffff2c; border-radius:12px; color:#bde0cf; font-size:8px; letter-spacing:2px; }.hero-copy h2 { margin:14px 0 8px; font-family:Georgia,"Songti SC",serif; font-size:27px; font-weight:500; }.hero-copy p { margin:0; color:#c8ddd3; font-size:12px; }
.hero-orbit { position:absolute; right:64px; width:160px; height:160px; border:1px solid #ffffff1f; border-radius:50%; }.hero-orbit:before,.hero-orbit:after { content:""; position:absolute; inset:23px; border:1px solid #ffffff1f; border-radius:50%; }.hero-orbit:after { inset:53px; background:#ffffff10; box-shadow:0 0 45px #d5ffe83d; }.hero-orbit b { position:absolute; z-index:2; inset:0; display:grid; place-items:center; color:#d6f1e4; font-size:29px; }.hero-orbit i,.hero-orbit span { position:absolute; width:7px; height:7px; background:#83c7a5; border-radius:50%; }.hero-orbit i { left:2px; top:65px; }.hero-orbit span { right:25px; bottom:25px; }
.creation-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(310px,.85fr); gap:18px; margin-top:18px; }.card { background:white; border:1px solid var(--line); border-radius:14px; box-shadow:0 4px 14px #23332808; }.setup-panel,.platform-panel { padding:25px 27px; }.section-heading { display:flex; gap:13px; align-items:flex-start; padding-bottom:22px; border-bottom:1px solid #edf0ed; }.section-heading.compact { padding-bottom:18px; }.step { display:grid; place-items:center; width:31px; height:31px; flex:0 0 auto; color:var(--green); background:#e5f3eb; border-radius:8px; font-size:10px; font-weight:800; }.section-heading h3 { margin:0 0 5px; font-family:Georgia,"Songti SC",serif; font-size:17px; }.section-heading p { margin:0; color:#909991; font-size:10px; }
fieldset { padding:0; margin:21px 0 18px; border:0; } legend,.topic-field { display:block; margin-bottom:11px; font-size:11px; font-weight:700; } legend span,.topic-field>span { margin-left:5px; color:#bc895c; font-size:9px; }.domain-options { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.domain-options label { position:relative; min-height:60px; display:flex; align-items:center; gap:9px; padding:10px 11px; border:1px solid var(--line); border-radius:9px; cursor:pointer; transition:.2s; }.domain-options label:hover,.domain-options label.selected { border-color:#65a286; background:#f2f8f5; box-shadow:0 0 0 1px #65a28622; }.domain-options input { position:absolute; opacity:0; }.domain-options b { display:grid; place-items:center; width:29px; height:29px; border-radius:7px; color:#4c795f; background:#edf5f0; }.domain-options span { font-size:11px; font-weight:700; }.domain-options small { display:block; margin-top:4px; color:#9ba39e; font-size:8px; font-weight:400; }.domain-options i { display:none; position:absolute; right:7px; top:6px; color:var(--green); font-size:9px; font-style:normal; }.domain-options label.selected i { display:block; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:17px; }.field-row label { font-size:11px; font-weight:700; }.field-row select { width:100%; height:39px; margin-top:8px; padding:0 11px; border:1px solid var(--line); border-radius:7px; background:white; color:#4d5851; font-size:11px; outline:none; }.topic-input { display:flex; align-items:center; height:41px; border:1px solid #cad4cd; border-radius:8px; overflow:hidden; }.topic-input:focus-within { border-color:#5b9a7b; box-shadow:0 0 0 3px #5b9a7b15; }.topic-input>span { padding-left:13px; color:#74a68b; }.topic-input input { flex:1; min-width:0; height:100%; border:0; padding:0 8px; outline:0; font-size:11px; }.topic-input button { margin-right:5px; height:29px; padding:0 10px; color:var(--green); border:0; border-radius:6px; background:#e9f4ee; font-size:9px; font-weight:700; }.hotspots { display:flex; gap:7px; margin-top:-3px; }.hotspots button { padding:5px 9px; color:#7e8982; border:0; background:#f5f7f5; border-radius:5px; font-size:8px; }.hotspots small { color:#ea6d48; }
.emotion-radar { margin:-5px 0 18px; padding:14px; border:1px solid #ecdcd4; border-radius:10px; background:#fffaf7; }.radar-heading { display:flex; align-items:center; justify-content:space-between; }.radar-heading div>span,.radar-heading small { display:block; }.radar-heading div>span { font-size:11px; font-weight:800; }.radar-heading small { margin-top:4px; color:#9b8d86; font-size:8px; }.live { color:#a25c42; font-size:8px; }.live i { display:inline-block; width:6px; height:6px; margin-right:4px; background:#e26d4d; border-radius:50%; box-shadow:0 0 0 4px #e26d4d19; }.emotion-categories { display:flex; flex-wrap:wrap; gap:5px; margin:12px 0 9px; }.emotion-categories button { padding:5px 8px; border:1px solid #eadfd9; border-radius:12px; color:#826d64; background:white; font-size:8px; cursor:pointer; }.emotion-categories button.active { color:white; border-color:#a25c42; background:#a25c42; }.emotion-trends { display:grid; gap:5px; }.trend-item { display:grid; grid-template-columns:20px 1fr auto; gap:8px; align-items:center; padding:8px; border:1px solid transparent; border-radius:7px; background:white; cursor:pointer; }.trend-item:hover,.trend-item.selected { border-color:#cc927b; }.trend-rank { color:#bd6b4d; font-family:Georgia,serif; font-weight:800; }.trend-item strong,.trend-item small { display:block; }.trend-item strong { font-size:9px; }.trend-item small { margin-top:3px; color:#a39994; font-size:7px; }.trend-heat { color:#d46345; font-size:8px; font-style:normal; }.radar-disclaimer { margin:9px 0 0; color:#b0a49e; font-size:7px; line-height:1.5; }.continuous-output { display:grid; grid-template-columns:1.4fr .6fr; gap:10px; margin:-5px 0 17px; padding:11px; border:1px solid #e7ddd8; border-radius:8px; background:#fdfaf8; }.continuous-output>label:last-child { font-size:9px; font-weight:700; }.continuous-output select { width:100%; height:29px; margin-top:5px; border:1px solid #e3ddd9; border-radius:5px; background:white; font-size:8px; }.switch-row { display:flex; align-items:center; gap:8px; }.switch-row span { flex:1; }.switch-row strong,.switch-row small { display:block; font-size:9px; }.switch-row small { margin-top:4px; color:#9c918b; font-size:7px; }.switch-row input { position:absolute; opacity:0; }.switch-row i { position:relative; width:30px; height:17px; background:#d8ddd9; border-radius:10px; }.switch-row i:after { content:""; position:absolute; width:13px; height:13px; left:2px; top:2px; background:white; border-radius:50%; transition:.2s; }.switch-row input:checked+i { background:#a25c42; }.switch-row input:checked+i:after { transform:translateX(13px); }
.platform-list { display:grid; gap:8px; margin:17px 0; }.platform-list label { position:relative; min-height:59px; padding:9px 10px; display:flex; gap:10px; align-items:center; border:1px solid #d9e6de; background:#f8fbf9; border-radius:9px; cursor:pointer; }.platform-list input { position:absolute; opacity:0; }.platform-icon { width:33px; height:33px; flex:0 0 auto; display:grid; place-items:center; color:white; border-radius:8px; font-size:12px; font-weight:800; }.wechat { background:#1aad68; }.toutiao { background:#ef4b4e; }.baijia { background:#3f6fe5; }.platform-list strong,.platform-list small { display:block; font-size:11px; }.platform-list small { color:#99a09b; margin-top:5px; font-size:8px; }.platform-list i { margin-left:auto; padding:3px 6px; color:#397658; background:#e5f2ea; border-radius:9px; font-size:8px; font-style:normal; }.platform-list label:has(input:not(:checked)) { opacity:.55; background:white; }.platform-list label:has(input:not(:checked)) i { display:none; }
.feature-note { display:flex; gap:10px; padding:12px; color:#4c6e5a; background:#f2f7f3; border-radius:8px; }.feature-note>span { font-size:15px; }.feature-note p { margin:0; }.feature-note strong,.feature-note small { display:block; font-size:9px; }.feature-note small { margin-top:5px; color:#8d9a91; line-height:1.5; }.generate-button { position:relative; width:100%; height:49px; margin-top:16px; color:white; border:0; border-radius:9px; background:linear-gradient(100deg,#176b4a,#20835c); box-shadow:0 8px 18px #176b4a2c; font-size:12px; font-weight:700; cursor:pointer; }.generate-button:hover { transform:translateY(-1px); }.generate-button small { position:absolute; right:13px; top:18px; color:#bcd8ca; font-size:8px; font-weight:400; }.safe-note { margin:10px 0 0; text-align:center; color:#9ca49f; font-size:8px; }
.results { display:none; margin-top:18px; overflow:hidden; }.results.visible { display:block; animation:rise .45s ease both; }@keyframes rise { from { opacity:0; transform:translateY(12px); } }
.results-header { padding:21px 27px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }.results-header>div:first-child { display:flex; gap:12px; }.results-header h3 { margin:0 0 5px; font-family:Georgia,"Songti SC",serif; font-size:17px; }.results-header p { margin:0; color:#939c96; font-size:9px; }.status-pill { padding:7px 11px; color:#3e775b; background:#eef7f2; border-radius:16px; font-size:9px; }.status-pill i { display:inline-block; width:6px; height:6px; margin-right:5px; background:#35a66d; border-radius:50%; }
.article-switcher { display:flex; gap:4px; padding:11px 27px 0; }.article-switcher button { padding:7px 13px; border:0; border-radius:6px; color:#89928c; background:#f4f6f4; font-size:9px; }.article-switcher button.active { color:white; background:#2f6f51; }
.preview-tabs { display:grid; grid-template-columns:repeat(3,1fr); margin:10px 27px 0; border:1px solid var(--line); border-radius:9px 9px 0 0; overflow:hidden; }.preview-tabs button { position:relative; display:flex; align-items:center; gap:9px; padding:12px 14px; text-align:left; border:0; border-right:1px solid var(--line); background:#fafbfa; cursor:pointer; }.preview-tabs button:last-child { border:0; }.preview-tabs button.active { background:#eff7f3; box-shadow:inset 0 -2px var(--green); }.preview-tabs .platform-icon { width:27px; height:27px; font-size:9px; }.preview-tabs small { display:block; margin-left:auto; color:#9ba39e; font-size:8px; }
.preview-body { min-height:500px; display:grid; grid-template-columns:1.35fr .85fr; background:#f5f7f5; }.phone-preview { width:440px; min-height:520px; margin:25px auto; background:white; box-shadow:0 10px 30px #26362c17; }.phone-top { display:flex; justify-content:space-between; padding:9px 18px; font-size:7px; }.article-head { padding:13px 27px 10px; }.article-head>span { color:var(--green); font-size:8px; font-weight:700; }.article-head h2 { margin:8px 0; font-family:Georgia,"Songti SC",serif; font-size:20px; line-height:1.35; }.article-head p { margin:0; color:#aaa; font-size:7px; }.article-head p b { color:#557666; }.cover-art { position:relative; height:154px; overflow:hidden; display:flex; flex-direction:column; justify-content:center; padding-left:36px; margin:0 27px; color:white; background:linear-gradient(120deg,#122f28,#275d46); }.cover-art:before { content:""; position:absolute; width:135px; height:135px; right:25px; border:1px solid #ffffff35; border-radius:50%; box-shadow:0 0 0 22px #ffffff0b,0 0 0 44px #ffffff08; }.cover-art span { color:#9ed0b5; font-size:9px; letter-spacing:5px; }.cover-art b { margin-top:9px; font-family:Georgia,"Songti SC",serif; font-size:24px; line-height:1.35; letter-spacing:3px; }.cover-art i { position:absolute; right:73px; font-size:28px; color:#b2e0c8; font-style:normal; }.preview-content { padding:19px 31px 28px; color:#3b463f; font-family:Georgia,"Songti SC",serif; font-size:10px; line-height:2; }.preview-content p { margin:0 0 12px; }.preview-content h3 { margin:17px 0 8px; color:#1b6649; font-size:13px; }.preview-content blockquote { margin:14px 0; padding:10px 14px; color:#225c45; background:#edf6f1; border-left:3px solid #2d8a61; }
.editor-panel { padding:25px 24px; background:white; border-left:1px solid var(--line); }.editor-heading { display:flex; justify-content:space-between; }.editor-heading h4 { margin:0 0 5px; font-size:13px; }.editor-heading p { margin:0; color:#98a19a; font-size:8px; }.editor-heading>span { color:#9ba39d; font-size:8px; }.score { display:flex; margin:17px 0; padding:13px; background:#f4f8f5; border-radius:8px; }.score>div { width:73px; text-align:center; border-right:1px solid #dce7df; }.score strong,.score small { display:block; }.score strong { color:var(--green); font-family:Georgia,serif; font-size:24px; }.score small { color:#8f9992; font-size:7px; }.score ul { flex:1; list-style:none; margin:0; padding:0 0 0 15px; }.score li { display:flex; justify-content:space-between; margin:3px 0; color:#89938c; font-size:8px; }.score b { color:#4d6558; }.editor-panel h5 { margin:16px 0 9px; font-size:9px; }.editor-panel h5 span { color:#9ca49f; font-weight:400; }.layout-options { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }.layout-options button { height:31px; border:1px solid var(--line); background:white; border-radius:5px; font-size:8px; }.layout-options button.active { color:var(--green); border-color:#65a286; background:#f1f8f4; }.image-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:6px; height:72px; }.image-grid button { border:0; border-radius:6px; color:white; }.image-a { position:relative; background:linear-gradient(140deg,#163a2e,#468566); }.image-a i { position:absolute; left:5px; top:5px; padding:2px 4px; background:#0005; border-radius:3px; font-size:6px; font-style:normal; }.image-a span { font-size:18px; }.image-b { background:linear-gradient(135deg,#d8b46f,#76513c); }.add-image { display:flex; flex-direction:column; place-items:center; justify-content:center; color:#9ba49e!important; background:white; border:1px dashed #cfd6d1!important; }.add-image small { font-size:7px; }.action-row { display:flex; gap:7px; margin-top:23px; }.action-row button { flex:1; height:37px; border:1px solid var(--line); background:white; border-radius:7px; font-size:8px; }.action-row .primary { color:white; border-color:var(--green); background:var(--green); }
#toast { position:fixed; left:50%; bottom:28px; z-index:10; transform:translate(-50%,20px); padding:10px 17px; color:white; background:#1f3329; border-radius:7px; opacity:0; pointer-events:none; font-size:11px; transition:.25s; }#toast.show { opacity:1; transform:translate(-50%,0); }
@media(max-width:1000px){.app-shell{grid-template-columns:1fr}.sidebar{display:none}main{grid-column:1;padding:0 20px 50px}.creation-grid{grid-template-columns:1fr}.preview-body{grid-template-columns:1fr}.editor-panel{border:0}.hero-orbit{right:10px;opacity:.65}}
@media(max-width:650px){main{padding:0 12px 40px}.topbar{height:86px}.topbar h1{font-size:19px}.top-actions .icon-button{display:none}.hero-card{padding:25px;height:150px}.hero-copy h2{font-size:21px}.hero-orbit{display:none}.setup-panel,.platform-panel{padding:20px 16px}.domain-options{grid-template-columns:repeat(2,1fr)}.field-row{grid-template-columns:1fr}.preview-tabs{margin:10px 10px 0}.preview-tabs button{padding:8px}.preview-tabs small{display:none}.phone-preview{width:calc(100% - 20px)}.results-header{padding:18px 15px}.status-pill{display:none}}