:root { --ink:#18251e; --forest:#17372b; --moss:#54715b; --cream:#f7f4ed; --paper:#fffdf8; --line:#d9ded4; --orange:#ed6843; --soft-orange:#fff0e9; --muted:#718077; --shadow:0 12px 34px rgba(22,47,37,.08); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:linear-gradient(120deg,#f3f1e9 0%,#faf9f4 45%,#eff4ed 100%); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; line-height:1.5; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
.site-header { color:#fff; background:var(--forest); }
.header-inner { max-width:1260px; min-height:88px; padding:16px 20px; margin:auto; display:flex; align-items:center; gap:12px; }
.brand-mark { height:42px; width:42px; border:2px solid #b9cf91; border-radius:50% 50% 43% 43%; color:#b9cf91; display:grid; place-items:center; font-size:32px; line-height:1; transform:rotate(-8deg); }
h1,h2,p { margin:0; } h1 { font-size:20px; letter-spacing:.02em; } h2 { font-size:18px; letter-spacing:.01em; }
.eyebrow { font-size:10px; line-height:1.3; letter-spacing:.13em; font-weight:700; color:#aabfaa; }
.offline-badge { margin-left:auto; white-space:nowrap; padding:5px 9px; border:1px solid rgba(255,255,255,.3); border-radius:20px; font-size:12px; color:#dce9ce; }
.page-shell { max-width:1260px; padding:22px 16px 48px; margin:auto; }
.intro { padding:0 4px 18px; color:#53645a; font-size:14px; max-width:750px; }
.workspace { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(340px,.9fr); gap:18px; align-items:start; }
.editor-column { display:grid; gap:18px; }.panel,.output-card { background:rgba(255,253,248,.93); border:1px solid rgba(217,222,212,.9); border-radius:18px; box-shadow:var(--shadow); }
.panel { padding:20px; }.section-heading { display:flex; gap:11px; align-items:flex-start; margin-bottom:18px; }.section-heading p { margin-top:2px; font-size:12px; color:var(--muted); }
.step { flex:none; display:grid; place-items:center; height:27px; width:27px; border-radius:50%; background:#e5ecdf; color:#355440; font-size:12px; font-weight:800; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }.full-width { display:block; margin-top:13px; }
label { display:block; color:#526057; font-size:12px; font-weight:700; } input,select,textarea { width:100%; margin-top:5px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:#fffefa; outline:none; padding:10px 11px; font-size:14px; transition:border .15s,box-shadow .15s; } textarea { resize:vertical; line-height:1.5; } input:focus,select:focus,textarea:focus { border-color:#80996f; box-shadow:0 0 0 3px rgba(128,153,111,.15); }
.reference-guidance { padding:11px 12px; margin-top:14px; border-left:3px solid #91a87b; border-radius:0 9px 9px 0; background:#f0f4ea; color:#405742; font-size:12px; }.reference-guidance strong { display:block; font-size:12px; }.reference-guidance p { margin-top:3px; color:#64756a; font-size:11px; line-height:1.55; }
.watermark-option { margin-top:13px; border:1px solid #d7dfd2; border-radius:9px; background:#f8faf5; }.watermark-option summary { list-style:none; cursor:pointer; }.watermark-option summary::-webkit-details-marker { display:none; }.watermark-option .check-row { margin:0; border-radius:8px; }.watermark-spec { padding:0 12px 11px; color:#5c6c61; font-size:11px; }.watermark-spec strong { color:#435743; }.watermark-spec p { margin-top:3px; line-height:1.55; }
.advanced-section { margin-top:18px; padding-top:16px; border-top:1px solid #e5e8e1; }.advanced-heading { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:10px; }.advanced-heading h3 { margin:0; font-size:14px; }.advanced-heading p { margin-top:2px; color:var(--muted); font-size:11px; }.advanced-heading span { flex:none; padding:3px 7px; border-radius:20px; color:#4d664e; background:#e8efe3; font-size:10px; font-weight:700; }.advanced-category { margin-top:8px; border:1px solid #dfe4da; border-radius:9px; background:#fffefa; }.advanced-category summary { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 11px; cursor:pointer; color:#3f5245; font-size:12px; font-weight:800; list-style:none; }.advanced-category summary::-webkit-details-marker { display:none; }.advanced-category summary::after { content:'＋'; color:#6e806f; font-size:16px; font-weight:400; }.advanced-category[open] summary::after { content:'−'; }.advanced-category summary small { margin-left:auto; color:#7a887c; font-size:10px; font-weight:500; }.advanced-category-body { padding:0 11px 11px; }.advanced-group + .advanced-group { margin-top:11px; }.advanced-group-title { margin-bottom:6px; color:#67776c; font-size:11px; font-weight:800; }.advanced-chips { display:flex; flex-wrap:wrap; gap:6px; }.advanced-chip { position:relative; display:block; }.advanced-chip input { position:absolute; opacity:0; pointer-events:none; }.advanced-chip span { display:block; padding:6px 8px; border:1px solid var(--line); border-radius:999px; color:#59685e; background:#fffefa; font-size:11px; font-weight:600; }.advanced-chip input:checked + span { color:var(--forest); border-color:#789071; background:#e8efe3; }
.template-list { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.template-card { position:relative; min-height:100px; padding:12px; text-align:left; border:1px solid var(--line); border-radius:11px; background:#fffefa; color:var(--ink); }.template-card:hover { border-color:#8a9d82; }.template-card.active { border-color:var(--forest); background:#eaf1e5; box-shadow:inset 0 0 0 1px var(--forest); }.template-card .template-icon { color:var(--orange); font-size:18px; }.template-card strong,.template-card small { display:block; }.template-card strong { margin:5px 0 2px; font-size:13px; }.template-card small { color:#65756b; font-size:11px; line-height:1.35; }
.choice-group { padding:13px 0; border-top:1px solid #e5e8e1; }.choice-group:first-child { padding-top:0; border-top:0; }.group-label { margin-bottom:8px; font-size:13px; font-weight:800; }.chips { display:flex; flex-wrap:wrap; gap:7px; }.chip { position:relative; display:block; }.chip input { position:absolute; opacity:0; pointer-events:none; }.chip span { display:block; padding:7px 10px; border:1px solid var(--line); border-radius:999px; color:#59685e; background:#fffefa; font-size:12px; font-weight:600; }.chip input:checked + span { color:var(--forest); border-color:#789071; background:#e8efe3; }.check-row { display:flex; align-items:flex-start; gap:9px; padding:12px; margin-top:13px; border-radius:9px; background:#f1f5eb; color:var(--ink); }.check-row input { flex:none; width:16px; margin:3px 0 0; }.check-row strong,.check-row small { display:block; }.check-row small { color:#68776d; margin-top:1px; font-weight:400; }
.choice-group { padding:13px 0; border-top:1px solid #e5e8e1; }.choice-group:first-child { padding-top:0; border-top:0; }.group-label { margin-bottom:8px; font-size:13px; font-weight:800; }.chips { display:flex; flex-wrap:wrap; gap:7px; }.chip { position:relative; display:block; }.chip input { position:absolute; opacity:0; pointer-events:none; }.chip span { display:block; padding:7px 10px; border:1px solid var(--line); border-radius:999px; color:#59685e; background:#fffefa; font-size:12px; font-weight:600; }.chip input:checked + span { color:var(--forest); border-color:#789071; background:#e8efe3; }.choice-extra,.advanced-extra { margin-top:8px; }.choice-extra summary,.advanced-extra summary { width:max-content; cursor:pointer; color:#728372; font-size:11px; font-weight:700; list-style:none; }.choice-extra summary::-webkit-details-marker,.advanced-extra summary::-webkit-details-marker { display:none; }.choice-extra summary::before,.advanced-extra summary::before { content:'＋ '; }.choice-extra[open] summary::before,.advanced-extra[open] summary::before { content:'− '; }.choice-extra input,.advanced-extra input { margin-top:7px; padding:8px 9px; font-size:12px; }.check-row { display:flex; align-items:flex-start; gap:9px; padding:12px; margin-top:13px; border-radius:9px; background:#f1f5eb; color:var(--ink); }.check-row input { flex:none; width:16px; margin:3px 0 0; }.check-row strong,.check-row small { display:block; }.check-row small { color:#68776d; margin-top:1px; font-weight:400; }
.output-column { position:sticky; top:16px; }.output-card { overflow:hidden; padding:20px; background:#19382c; border-color:#19382c; color:#f6f4ed; }.output-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:14px; }.output-heading .eyebrow { color:#aebf9f; }.output-actions { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }.language-select { display:flex; align-items:center; gap:4px; color:#c8d8c2; font-size:11px; font-weight:600; }.language-select select { width:auto; margin:0; padding:4px 20px 4px 7px; border-color:rgba(220,233,211,.3); color:#eff5e9; background:#112a20; font-size:11px; }.text-button { padding:0; border:0; background:transparent; color:#c8d8c2; font-size:11px; text-decoration:underline; }.selection-summary { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:13px; }.selection-summary span { padding:3px 7px; border-radius:20px; color:#d4e1cb; background:rgba(255,255,255,.1); font-size:10px; }.warnings { padding:9px 10px; margin-bottom:12px; border-radius:8px; color:#8c361e; background:#ffdfd2; font-size:12px; }.warnings ul { margin:0; padding-left:16px; }.primary-copy { width:100%; padding:10px 12px; border:0; border-radius:9px; color:#17372b; background:#c9d9ad; font-size:13px; font-weight:800; }.primary-copy:hover { background:#d9e7c2; }.copy-hint { margin:7px 1px 0; color:#aec2ad; font-size:10px; line-height:1.5; }.output-block { margin-top:14px; }.output-label { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; font-size:12px; color:#d5e0cd; font-weight:700; }.copy-button,.secondary-button { border:1px solid rgba(223,235,213,.37); border-radius:7px; color:#eff5e9; background:transparent; padding:5px 8px; font-size:11px; }.copy-button:hover,.secondary-button:hover { background:rgba(255,255,255,.1); }.output-block textarea { display:block; min-height:0; border-color:rgba(220,233,211,.18); background:#112a20; color:#e9efe2; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; line-height:1.55; }.compact textarea { color:#d6e0d2; font-family:inherit; }.saved-row { display:grid; grid-template-columns:auto 1fr auto; gap:7px; margin-top:16px; }.saved-row select { margin:0; padding:6px; min-width:0; border-color:rgba(220,233,211,.3); color:#eff5e9; background:#112a20; font-size:11px; }.output-note { margin-top:14px; color:#aec2ad; font-size:11px; }.toast { position:fixed; left:50%; bottom:22px; transform:translate(-50%,120px); z-index:10; padding:9px 14px; border-radius:99px; color:#fff; background:#172b21; box-shadow:0 6px 18px rgba(0,0,0,.2); font-size:13px; transition:transform .2s; }.toast.show { transform:translate(-50%,0); }
@media (max-width:820px) { .workspace { display:block; }.output-column { position:static; margin-top:18px; }.page-shell { padding-top:17px; }.panel,.output-card { border-radius:15px; }.template-list { grid-template-columns:repeat(2,1fr); }.template-card { min-height:88px; }.output-card { padding:17px; } }

/* Manual mode replaces a category's chips without discarding the prior selection. */
.group-label,.advanced-group-title { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.add-custom-button,.restore-options-button { flex:none; border:0; color:#557258; background:transparent; font-size:11px; font-weight:800; }
.add-custom-button::before { content:'＋ '; }
.choice-custom,.advanced-custom { display:none; margin-top:8px; }
.choice-custom input,.advanced-custom input { padding:8px 9px; font-size:12px; }
.restore-options-button { display:block; padding:7px 0 0; color:#728372; text-decoration:underline; text-underline-offset:2px; }
.choice-group.is-custom-mode .chips,.advanced-group.is-custom-mode .advanced-chips { display:none; }
.choice-group.is-custom-mode .choice-custom,.advanced-group.is-custom-mode .advanced-custom { display:block; }
.preset-picker { display:grid; grid-template-columns:1fr auto; gap:8px; }
.preset-picker select { margin:0; min-width:0; }
.preset-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:12px; }
.preset-actions .secondary-button { color:var(--forest); border-color:#9caf95; background:#f7faf3; }
.preset-actions .secondary-button:hover { background:#e8efe3; }
.preset-actions .reset-button { color:#7a5143; }
.section-heading-actions { justify-content:space-between; gap:16px; }
.section-heading-actions .reset-button { flex:none; color:#7a5143; }
.preset-list { display:flex; flex-wrap:wrap; gap:8px; }
.preset-option { position:relative; display:block; }
.preset-option input { position:absolute; width:auto; margin:0; opacity:0; pointer-events:none; }
.preset-option span { display:block; padding:8px 11px; border:1px solid var(--line); border-radius:9px; color:#59685e; background:#fffefa; font-size:12px; font-weight:700; }
.preset-option input:checked + span { color:var(--forest); border-color:#789071; background:#e8efe3; box-shadow:inset 0 0 0 1px #789071; }
.preset-empty { width:100%; padding:11px 12px; border-radius:9px; color:#68776d; background:#f1f5eb; font-size:12px; }
.save-current-row { margin-top:16px; }
.prompt-group { overflow:hidden; }
.prompt-group-title { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 11px 7px; color:#3f5245; font-size:12px; font-weight:800; }
.prompt-group-custom { display:none; padding:0 11px 11px; }
.prompt-group-custom input { padding:8px 9px; font-size:12px; }
.prompt-group.is-custom-mode .advanced-category-body { display:none; }
.prompt-group.is-custom-mode .prompt-group-custom { display:block; }
.watermark-option:not(.is-enabled) .watermark-spec { display:none; }
.watermark-spec label { display:block; margin-top:8px; color:#435743; font-size:11px; font-weight:800; }
.watermark-spec input { margin-top:4px; padding:7px 8px; font-size:12px; }
@media (max-width:430px) { .header-inner { min-height:75px; padding:13px 16px; }.brand-mark { width:35px; height:35px; font-size:27px; }.offline-badge { display:none; }.page-shell { padding:15px 12px 35px; }.intro { padding-left:2px; padding-bottom:14px; font-size:13px; }.panel { padding:16px; }.form-grid { grid-template-columns:1fr; gap:10px; }.template-list { gap:7px; }.template-card { padding:9px; min-height:82px; }.template-card strong { font-size:12px; }.template-card small { font-size:10px; }.chip span { padding:6px 9px; }.output-block textarea { font-size:11px; } }