:root{--navy:#0c3a52;--navy-800:#134a64;--teal:#0e9bc4;--gold:#d9a521;--ink:#18222a;--ink-soft:#4a5860;--line:#d7e0e6;--sidebar:#eef5f8;--paper:#fff}*{box-sizing:border-box}body,html{margin:0;padding:0;height:100%}body{font-family:-apple-system,PingFang TC,Noto Sans CJK TC,Segoe UI,sans-serif;color:var(--ink);background:#f4f7f9}a{color:var(--teal)}button{font:inherit}.app{max-width:1180px;margin:0 auto;padding:24px}.topbar{display:flex;align-items:center;gap:12px;margin-bottom:18px}.brand{font-weight:800;color:var(--navy);font-size:20px;letter-spacing:.02em}.brand .dot{color:var(--teal)}.tag{font-size:12px;color:var(--ink-soft)}.steps{display:flex;gap:8px;margin:6px 0 22px;flex-wrap:wrap}.step{font-size:12px;padding:5px 12px;border-radius:999px;background:#e6eef2;color:var(--ink-soft)}.step.active{background:var(--navy);color:#fff}.step.done{background:var(--teal);color:#fff}.card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:20px}h1.title{font-size:22px;color:var(--navy);margin:0 0 4px}.sub{color:var(--ink-soft);font-size:13px;margin:0 0 16px}label.field{display:block;margin-bottom:12px}label.field span{display:block;font-size:12px;color:var(--ink-soft);margin-bottom:4px}input[type=text],textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font:inherit;color:var(--ink);background:#fff;resize:vertical}textarea{line-height:1.5}textarea.mono{font-family:SF Mono,ui-monospace,Menlo,monospace;font-size:12.5px}.meta-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;gap:12px}.btn{border:none;border-radius:8px;padding:10px 18px;font-weight:600;cursor:pointer;background:var(--navy);color:#fff}.btn:hover{background:var(--navy-800)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.ghost{background:#fff;color:var(--navy);border:1px solid var(--line)}.btn.teal{background:var(--teal)}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.spacer{flex:1 1}.style-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:14px;gap:14px;margin:6px 0 18px}.style-card{border:2px solid var(--line);border-radius:12px;padding:16px;cursor:pointer;background:#fff;transition:border-color .12s}.style-card.sel,.style-card:hover{border-color:var(--teal)}.style-card.sel{box-shadow:0 0 0 3px rgba(14,155,196,.12)}.style-card h3{margin:0 0 6px;color:var(--navy);font-size:15px}.style-card p{margin:0;font-size:12px;color:var(--ink-soft);line-height:1.45}.style-card .chip{display:inline-block;margin-top:8px;font-size:11px;color:var(--teal);background:var(--sidebar);padding:2px 8px;border-radius:999px}.workspace{display:grid;grid-template-columns:minmax(360px,460px) 1fr;grid-gap:16px;gap:16px;align-items:start}.pane{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}.pane .pane-head{padding:10px 14px;border-bottom:1px solid var(--line);font-size:12px;color:var(--ink-soft);display:flex;align-items:center;gap:8px}.editor{flex:1 1}.editor textarea{border:none;border-radius:0;height:64vh}.preview{min-height:64vh}.preview iframe{width:100%;height:78vh;border:none;background:#59636b;display:block}.warnings{margin:10px 0 0;padding:10px 12px;background:#fff8e6;border:1px solid #f0e0b0;border-radius:8px;font-size:12px;color:#7a5b10}.warnings ul{margin:4px 0 0;padding-left:18px}.err{background:#fdecea;border-color:#f5c2bd;color:#a3271b}.muted{color:var(--ink-soft);font-size:12px}.loading{display:inline-block}@media (max-width:860px){.meta-grid,.style-grid,.workspace{grid-template-columns:1fr}}