:root{--ink:#111827;--muted:#64748b;--line:#e2e8f0;--surface:#fff;--bg:#f3f6fa;--orange:#ff5a36;--navy:#071a39;--green:#059669}
*{box-sizing:border-box}html{font-family:Inter,"Microsoft YaHei",system-ui,sans-serif;color:var(--ink);background:var(--bg)}body{margin:0;min-width:320px}button,input,textarea,select{font:inherit}button{cursor:pointer}
.topbar{position:sticky;top:0;z-index:20;height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.92);backdrop-filter:blur(18px)}
.brand{display:flex;align-items:center;gap:11px;border:0;background:none;font-size:18px;font-weight:900}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:#fff;background:var(--orange);box-shadow:0 9px 24px rgba(255,90,54,.28)}
.tabs{display:flex;padding:4px;border-radius:12px;background:#eef2f6}.tab{border:0;border-radius:9px;padding:9px 17px;color:var(--muted);font-weight:700;background:transparent}.tab.active{color:var(--ink);background:#fff;box-shadow:0 2px 8px rgba(15,23,42,.08)}
.save-state{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}.save-state i{width:8px;height:8px;border-radius:50%;background:var(--green)}
.workspace{max-width:1540px;margin:auto;display:grid;grid-template-columns:260px minmax(440px,1fr) 320px;gap:20px;padding:24px}.panel{border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:0 10px 35px rgba(15,23,42,.045)}
.templates-panel,.fields-panel{padding:18px;align-self:start;max-height:calc(100vh - 114px);overflow:auto}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}.panel-title h2,.panel-title h3{margin:0;font-size:16px}.badge{padding:3px 9px;border-radius:999px;background:#eef2f6;color:var(--muted);font-size:11px;font-weight:800}
.search{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#f8fafc;color:#94a3b8}.search input{width:100%;border:0;outline:0;background:transparent}
.chips{display:flex;gap:6px;overflow:auto;margin-bottom:13px}.chip{white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:5px 9px;background:#fff;color:var(--muted);font-size:11px}.chip.active{border-color:var(--orange);color:var(--orange);background:#fff4f1}
.template-list{display:grid;gap:11px}.template-card{overflow:hidden;border:2px solid transparent;border-radius:13px;background:#f8fafc;text-align:left;padding:0}.template-card:hover{border-color:#cbd5e1}.template-card.active{border-color:var(--orange);box-shadow:0 8px 22px rgba(255,90,54,.13)}.template-card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}.template-card b{display:block;padding:9px 11px 3px;font-size:13px}.template-card small{display:block;padding:0 11px 9px;color:var(--muted)}
.preview-panel{min-height:690px;display:flex;flex-direction:column;padding:18px}.preview-head,.preview-foot,.admin-head,.editor-top,.row{display:flex;align-items:center;justify-content:space-between;gap:14px}.preview-head{margin-bottom:14px}.preview-head h1,.admin-head h1{margin:3px 0 0}.preview-head small,.admin-head small,.dialog-head small{color:var(--orange);font-weight:900;letter-spacing:.1em;text-transform:uppercase}.preview-actions{display:flex;gap:8px}.button{border:1px solid var(--line);border-radius:11px;padding:10px 14px;font-weight:800;background:#fff}.button.primary{border-color:var(--orange);color:#fff;background:var(--orange)}.button.primary:hover{background:#e84b28}.button.ghost:hover{background:#f8fafc}.button.wide{width:100%}
.canvas-stage,.mini-stage{display:grid;min-height:0;place-items:center;flex:1;padding:18px;border-radius:15px;background-color:#edf1f5;background-image:linear-gradient(45deg,#e1e6ec 25%,transparent 25%),linear-gradient(-45deg,#e1e6ec 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e1e6ec 75%),linear-gradient(-45deg,transparent 75%,#e1e6ec 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}
#canvas{display:block;max-width:100%;max-height:570px;border-radius:5px;box-shadow:0 20px 50px rgba(15,23,42,.22)}.preview-foot{padding-top:12px;color:var(--muted);font-size:11px}
.control{display:grid;gap:7px;margin-bottom:14px;font-size:13px;font-weight:750}.control input,.control textarea,.control select{width:100%;border:1px solid var(--line);border-radius:11px;padding:10px 11px;outline:0;background:#f8fafc}.control input:focus,.control textarea:focus,.control select:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,90,54,.1)}
.field-input{padding:13px 0;border-bottom:1px solid #f1f5f9}.field-input:last-child{border-bottom:0}.source-tag{display:inline-flex;margin-left:6px;padding:2px 6px;border-radius:5px;background:#eef2ff;color:#4f46e5;font-size:10px}.notice-card{margin-top:16px;padding:14px;border:1px solid #fed7aa;border-radius:14px;background:#fff7ed;color:#9a3412}.notice-card p{margin:6px 0 0;font-size:12px;line-height:1.7}.text-button{border:0;background:none;color:var(--orange);font-size:12px;font-weight:800}
.hidden{display:none!important}.admin{max-width:1540px;margin:auto;padding:28px}.login-card{max-width:430px;margin:8vh auto;padding:34px;text-align:center}.login-icon{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 18px;border-radius:17px;background:var(--navy);color:#fff;font-size:20px;font-weight:900}.login-card h1{margin:0}.login-card>p{color:var(--muted);line-height:1.7}.login-card form{text-align:left;margin-top:22px}.error{min-height:18px;color:#dc2626;font-size:12px}
.admin-head{margin-bottom:20px}.admin-head p{margin:5px 0 0;color:var(--muted)}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}.stats article{display:flex;align-items:baseline;gap:10px;padding:18px}.stats b{font-size:28px}.stats span{color:var(--muted);font-size:13px}.admin-grid{display:grid;grid-template-columns:330px 1fr;gap:18px}.admin-list-panel,.editor-panel{padding:18px}.admin-list-item{display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:10px;width:100%;padding:9px;border:1px solid transparent;border-radius:12px;background:none;text-align:left}.admin-list-item:hover,.admin-list-item.active{border-color:var(--line);background:#f8fafc}.admin-list-item.active{border-color:var(--orange)}.admin-list-item img{width:58px;height:58px;border-radius:9px;object-fit:cover}.admin-list-item b,.admin-list-item small{display:block}.admin-list-item small{margin-top:4px;color:var(--muted)}.dot{width:8px;height:8px;border-radius:50%;background:#d6d3d1}.dot.live{background:#10b981}
.empty{padding:110px 20px;text-align:center;color:var(--muted)}.empty b{color:var(--ink)}.editor-top{align-items:end;display:grid;grid-template-columns:1fr 1fr auto}.switch{display:flex;align-items:center;gap:8px;padding-bottom:17px;font-size:13px;font-weight:800}.switch input{width:18px;height:18px;accent-color:var(--orange)}.editor-work{display:grid;grid-template-columns:minmax(300px,.8fr) 1.2fr;gap:18px;margin:4px 0 18px}.mini-stage{height:620px}.mini-stage canvas{display:block;max-width:100%;max-height:580px;box-shadow:0 16px 38px rgba(15,23,42,.2)}
.field-list{max-height:570px;overflow:auto}.field-card{margin-bottom:10px;padding:13px;border:1px solid var(--line);border-radius:13px}.field-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.field-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.field-card .control{margin:0}.field-card .control span{font-size:11px;color:var(--muted)}
dialog{width:min(520px,calc(100% - 32px));border:0;border-radius:20px;padding:0;box-shadow:0 28px 90px rgba(15,23,42,.32)}dialog::backdrop{background:rgba(7,15,31,.58);backdrop-filter:blur(5px)}.dialog-body{padding:24px}.dialog-head{display:flex;justify-content:space-between;margin-bottom:20px}.dialog-head h2{margin:4px 0}.close{border:0;background:none;font-size:27px;color:var(--muted)}.dropzone{display:grid;place-items:center;padding:30px;margin:10px 0 16px;border:2px dashed #cbd5e1;border-radius:15px;background:#f8fafc;text-align:center;cursor:pointer}.dropzone input{margin-bottom:12px;max-width:100%}.dropzone span{margin-top:5px;color:var(--muted);font-size:12px}
#toast{position:fixed;right:22px;bottom:22px;z-index:50;transform:translateY(30px);opacity:0;padding:12px 16px;border-radius:11px;color:#fff;background:#0f172a;box-shadow:0 12px 30px rgba(15,23,42,.25);transition:.25s}#toast.show{transform:none;opacity:1}
.batch{max-width:1180px;margin:auto;padding:28px}.batch-hero{display:flex;align-items:center;justify-content:space-between;padding:25px 28px;margin-bottom:18px;background:linear-gradient(135deg,#062e2b,#0f766e);color:#fff}.batch-hero small,.api-docs small{font-weight:900;letter-spacing:.12em;color:#5eead4}.batch-hero h1{margin:5px 0}.batch-hero p{margin:0;color:#ccfbf1}.api-badge{padding:8px 12px;border:1px solid rgba(255,255,255,.3);border-radius:999px;font-size:11px;font-weight:900}.batch-form{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:22px}.batch-form .control{margin:0}.key-control div{display:flex;gap:8px}.key-control input{min-width:0;flex:1}.key-control button{white-space:nowrap}.batch-submit{align-self:end;height:43px}.batch-meta{display:flex;justify-content:space-between;padding:10px 8px 18px;color:var(--muted);font-size:12px}.batch-results,.api-docs{padding:22px;margin-bottom:18px}.batch-results .panel-title p{margin:5px 0 0;color:var(--muted);font-size:12px}.batch-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.batch-card{overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#f8fafc}.batch-card img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top}.batch-card>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px}.batch-card .button{padding:7px 10px;text-decoration:none;font-size:11px}.api-docs{background:#0b1220;color:#dbeafe}.api-docs h2{margin:5px 0}.api-docs p{color:#94a3b8}.api-docs pre{overflow:auto;margin:16px 0 0;padding:16px;border-radius:12px;background:#030712;color:#a7f3d0;line-height:1.65;white-space:pre-wrap;word-break:break-all}
.rules-dialog{width:min(940px,calc(100% - 32px))}.rules-dialog .dialog-body{max-height:88vh;overflow:auto}.rules-dialog h2{margin:4px 0}.rules-dialog h3{margin:18px 0 10px}.rules-card{}.rules-error{}.rules-help{margin:-8px 0 18px;padding:11px 13px;border-radius:10px;background:#fff7ed;color:#9a3412;font-size:12px}.rule-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.rule-grid .control{margin:0}.zodiac-rule{}.zodiac-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:1100px){.workspace{grid-template-columns:220px 1fr}.fields-panel{grid-column:1/-1;max-height:none}.admin-grid{grid-template-columns:1fr}.editor-work{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.topbar{padding:0 14px}.save-state{display:none}.brand span:last-child{display:none}.tabs{overflow:auto}.tab{padding:8px 10px;white-space:nowrap;font-size:12px}.workspace{display:flex;flex-direction:column;padding:12px}.preview-panel{order:1;min-height:600px}.templates-panel{order:2;max-height:none}.fields-panel{order:3}.template-list{grid-template-columns:repeat(2,1fr)}.preview-head{align-items:flex-start}.preview-actions{flex-direction:column}.preview-foot{display:grid}.admin,.batch{padding:12px}.batch-hero{align-items:flex-start}.api-badge{display:none}.batch-form{grid-template-columns:1fr}.batch-gallery{grid-template-columns:1fr}.rule-grid,.zodiac-grid{grid-template-columns:1fr}.stats{grid-template-columns:1fr}.admin-head{align-items:flex-start;flex-direction:column}.editor-top,.editor-work{grid-template-columns:1fr}.mini-stage{height:500px}.field-card-grid{grid-template-columns:1fr 1fr}}