*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,system-ui,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Arial,sans-serif;background:#f0f2f5;color:#333;height:100vh;overflow:hidden;display:flex;flex-direction:column}
.header{background:#fff;padding:12px 24px;display:flex;align-items:center;gap:16px;border-bottom:1px solid #e8e8e8;flex-shrink:0}
.header h1{font-size:18px;font-weight:600;white-space:nowrap}
.header .controls{display:flex;align-items:center;gap:12px;margin-left:auto}
.header select{padding:6px 12px;border:1px solid #d9d9d9;border-radius:6px;font-size:14px;outline:none;background:#fff;cursor:pointer}
.header select:focus{border-color:#4096ff}
.btn{padding:7px 20px;border:none;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s;font-weight:500}
.btn-primary{background:#1677ff;color:#fff}
.btn-primary:hover{background:#4096ff}
.btn-success{background:#52c41a;color:#fff}
.btn-success:hover{background:#73d13d}
.btn-success.copied{background:#13c2c2}
.main{display:flex;flex:1;overflow:hidden}
.panel{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.panel+.panel{border-left:1px solid #e8e8e8}
.panel-label{padding:8px 16px;font-size:13px;font-weight:600;color:#666;background:#fafafa;border-bottom:1px solid #e8e8e8;flex-shrink:0;display:flex;align-items:center;justify-content:space-between}
.panel-label .badge{font-weight:400;font-size:12px;color:#999}
#input{flex:1;border:none;outline:none;padding:16px;font-size:15px;font-family:'Cascadia Code','Fira Code','JetBrains Mono',Consolas,Monaco,monospace;resize:none;line-height:1.7;tab-size:2;background:#fff}
#input:focus{background:#fff}
#preview{flex:1;overflow-y:auto;padding:0 20px;background:#fff}
#htmlOutput{flex:0 0 45%;border:none;border-top:1px solid #e8e8e8;outline:none;padding:12px 16px;font-size:13px;font-family:'Cascadia Code','Fira Code','JetBrains Mono',Consolas,Monaco,monospace;resize:none;line-height:1.6;background:#fafafa;color:#333;tab-size:2}
.split-right{display:flex;flex-direction:column;flex:1;overflow:hidden}
.split-right .tabs{display:flex;border-bottom:1px solid #e8e8e8;background:#fafafa;flex-shrink:0}
.split-right .tabs button{padding:8px 20px;border:none;background:none;font-size:13px;cursor:pointer;color:#666;border-bottom:2px solid transparent;transition:all .2s}
.split-right .tabs button.active{color:#1677ff;border-bottom-color:#1677ff;font-weight:600}
.split-right .tabs button:hover{color:#1677ff}
#wordCount{font-size:12px;color:#999;padding:0 4px}
.subtitle{display:none}
.btn-secondary{background:#fff;color:#333;border:1px solid #d9d9d9}
.btn-secondary:hover{color:#1677ff;border-color:#1677ff}
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.45);z-index:1000;display:none;align-items:center;justify-content:center}
.modal-overlay.show{display:flex}
.modal-wrap{background:#fff;border-radius:12px;width:680px;max-width:90vw;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 8px 40px rgba(0,0,0,0.15)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid #e8e8e8;flex-shrink:0}
.modal-head h2{font-size:18px;font-weight:600}
.modal-close{width:32px;height:32px;border:none;background:none;font-size:20px;cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#666}
.modal-close:hover{background:#f5f5f5;color:#333}
.modal-body{padding:4px 24px;overflow-y:auto;flex:1}
.modal-foot{display:flex;align-items:center;justify-content:flex-end;padding:16px 24px;border-top:1px solid #e8e8e8;flex-shrink:0}
.sec{border:1px solid #e8e8e8;border-radius:8px;margin:12px 0;overflow:hidden}
.sec-h{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#fafafa;cursor:pointer;font-size:14px;font-weight:600;user-select:none}
.sec-h:hover{background:#f0f0f0}
.sec-h .arrow{font-size:10px;transition:transform .2s;color:#999}
.sec-h .arrow.open{transform:rotate(90deg)}
.sec-b{display:none;padding:12px 16px;flex-wrap:wrap;gap:12px}
.sec-b.open{display:flex}
.fld{display:flex;flex-direction:column;gap:4px;min-width:140px;flex:1}
.fld label{font-size:12px;color:#666;font-weight:500}
.fld input[type="color"]{width:100%;height:36px;border:1px solid #d9d9d9;border-radius:6px;padding:2px;cursor:pointer}
.fld input[type="number"]{width:100%;height:36px;border:1px solid #d9d9d9;border-radius:6px;padding:0 8px;font-size:14px;outline:none}
.fld input[type="text"]{width:100%;height:36px;border:1px solid #d9d9d9;border-radius:6px;padding:0 8px;font-size:14px;outline:none}
.fld input:focus{border-color:#4096ff}
@media(max-width:900px){.main{flex-direction:column}}