*{box-sizing:border-box}body{margin:0;background:#101116;color:#ecedf4;font:14px Inter,"Microsoft YaHei",sans-serif}header{height:68px;border-bottom:1px solid #292b33;display:flex;align-items:center;padding:0 28px;justify-content:space-between;background:#15161c}.brand{font-weight:800;font-size:19px;letter-spacing:.5px;display:flex;gap:9px;align-items:center}.brand em{font-size:9px;color:#777b8c;letter-spacing:1.5px;font-style:normal}.mark{color:#b7a0ff;font-size:23px}.notice{color:#898d9c;font-size:12px}.notice b{color:#e6be77}.actions{display:flex;gap:10px}button{font:inherit;border:0;border-radius:7px;padding:9px 13px;cursor:pointer;color:inherit;background:#292b35}.primary{background:#8f71f2;font-weight:700}.primary span{font-size:17px}.ghost{border:1px solid #3a3c46;background:transparent}main{display:grid;grid-template-columns:258px 1fr 290px;height:calc(100vh - 68px);height:calc(100dvh - 68px)}aside{background:#17181e;border-right:1px solid #2a2c34;padding:21px 18px;overflow:auto}.right{border-right:0;border-left:1px solid #2a2c34}.section-title{font-size:12px;color:#9b9ead;font-weight:700;letter-spacing:.3px}.section-row,.right-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.upload{height:132px;margin:12px 0 25px;border:1px dashed #555966;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:#c9cbd4;gap:4px;background:#1b1c23}.upload span{font-size:24px;color:#ab92ff}.upload small{font-size:10px;color:#6f7381}.add{padding:4px 0;background:none;color:#b9a4ff;font-size:12px}.layers{display:flex;flex-direction:column;gap:7px}.layer{padding:10px;border-radius:7px;background:#1e2028;cursor:pointer;display:flex;gap:8px;align-items:center}.layer.active{outline:1px solid #9a7bf3;background:#282334}.layer i{width:20px;height:20px;background:#6c56af;border-radius:4px;display:grid;place-items:center;font-style:normal;font-size:12px}.layer small{display:block;color:#888c9b;margin-top:2px}.tips{margin-top:30px;border-top:1px solid #2c2e37;padding-top:18px;display:flex;color:#7e8290;line-height:1.7;font-size:11px}.tips span{font-size:22px;color:#a78dff;margin-right:9px}.tips p{margin:0}kbd{padding:1px 3px;border:1px solid #575b68;border-radius:3px}.stage-wrap{display:flex;min-width:0;min-height:0;flex-direction:column;background:#111217}.stage-title{height:50px;display:flex;align-items:center;gap:11px;padding:0 26px;color:#c7cad3}.stage-title small{font-size:11px;color:#696d7c}#workspace{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:auto;padding:25px;background-image:radial-gradient(#2d2e36 1px,transparent 1px);background-size:16px 16px}.stage{position:relative;background:#1a1b22;box-shadow:0 10px 35px #0008;overflow:hidden;transform-origin:center}.empty{position:absolute;text-align:center;top:45%;width:100%;color:#898c99;font-size:17px}.empty small{font-size:12px;color:#666977}.stage img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}.text-item{position:absolute;white-space:pre;line-height:1;font-weight:700;cursor:move;user-select:none;padding:4px;transform:translate(-4px,-4px);z-index:2}.text-item.selected{outline:1px solid #a78dff}.selection-box{position:absolute;border:1px dashed #b39eff;background:#a184ff22;pointer-events:none;z-index:3}.stage-bottom{height:42px;border-top:1px solid #292b33;display:flex;align-items:center;justify-content:center;gap:14px;color:#777b88;font-size:11px}.zoom{display:flex;align-items:center;gap:5px}.zoom button{padding:2px 7px;background:transparent;font-size:17px}.zoom input{width:90px;accent-color:#9b7df7}.right label{display:block;color:#9ea1ad;font-size:11px;margin:12px 0 5px}.right input:not([type=color]):not([type=checkbox]):not([type=range]),select,textarea{width:100%;border:1px solid #363943;border-radius:6px;background:#21232b;color:#e6e7eb;padding:8px;outline:0;font:inherit;font-size:12px}.right textarea{resize:vertical}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.field-row label{margin-top:12px}.right input[type=color]{width:100%;height:34px;padding:3px;border:1px solid #363943;border-radius:6px;background:#21232b}.right input[type=range]{width:100%;accent-color:#9b7df7}.right hr{border:0;border-top:1px solid #30323b;margin:18px 0}.switch-line{display:flex;justify-content:space-between;align-items:center}.switch{margin:0!important}.switch input{display:none}.switch i{display:block;width:34px;height:19px;border-radius:12px;background:#4c4e56;position:relative}.switch i:after{content:'';position:absolute;width:15px;height:15px;left:2px;top:2px;border-radius:50%;background:#fff;transition:.2s}.switch input:checked+i{background:#9577f3}.switch input:checked+i:after{left:17px}.align-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:14px}.align-grid button{padding:8px 3px;background:#252730;color:#aeb1bf;font-size:10px}.delete{margin-top:19px;width:100%;background:#39222b;color:#ff9ba5}.no-select{text-align:center;padding:65px 0;color:#767a87;line-height:1.8;font-size:12px}#selectionCount{font-size:11px;color:#a68ef8}#toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);opacity:0;background:#292533;border:1px solid #7965bd;border-radius:8px;padding:11px 16px;transition:.25s;pointer-events:none}#toast.show{opacity:1;transform:translate(-50%,0)}.grid-overlay{position:absolute;inset:0;pointer-events:none;z-index:1;display:none}.grid-overlay.on{display:block}.grid-overlay.thirds{background-image:linear-gradient(to right,var(--gc) 0 1px,transparent 1px),linear-gradient(to bottom,var(--gc) 0 1px,transparent 1px);background-size:33.3333% 33.3333%}.grid-overlay.square{background-image:linear-gradient(to right,var(--gc) 0 1px,transparent 1px),linear-gradient(to bottom,var(--gc) 0 1px,transparent 1px);background-size:var(--gs,90px) var(--gs,90px)}.grid-c-red{--gc:rgba(255,59,48,.65)}.grid-c-cyan{--gc:rgba(0,229,255,.6)}.grid-c-violet{--gc:rgba(179,158,255,.7)}.grid-c-gray{--gc:rgba(255,255,255,.3)}.grid-c-gold{--gc:rgba(230,190,119,.7)}.gridbar{display:flex;align-items:center;gap:6px;margin-left:12px}.mini{height:30px;font-size:12px;background:#1c1d24;color:#cfd2dc;border:1px solid #3a3c46;border-radius:6px;padding:0 7px}.ghost.sm{padding:5px 10px;font-size:12px}.active{outline:1px solid #9a7bf3;background:#282334}.swatch-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}.swatch-row .cap{width:100%;font-size:11px;color:#9b9ead;margin-bottom:2px}.swatch{width:20px;height:20px;border-radius:4px;border:1px solid #ffffff33;cursor:pointer;padding:0}.swatch:hover{transform:scale(1.12)}.verify-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.6;mix-blend-mode:difference;z-index:6}.modal{position:fixed;inset:0;background:#000a;display:grid;place-items:center;z-index:50}.modal[hidden]{display:none}.modal-box{background:#15161c;border:1px solid #2a2c34;border-radius:12px;width:min(560px,92vw);overflow:hidden;box-shadow:0 20px 60px #000a}.modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid #292b33}.modal-head button{background:none;font-size:16px}.modal-body{padding:18px}.verify-compare{background:#0c0d11;border-radius:8px;padding:10px;display:flex;justify-content:center}.verify-compare img{max-width:100%;max-height:60vh;border-radius:4px}.verify-meta{margin-top:10px;color:#9b9ead;font-size:12px;text-align:center}.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 18px;border-top:1px solid #292b33}.palette{margin-top:10px}.palette .pal-label{font-size:11px;color:#9b9ead;margin:10px 0 5px;letter-spacing:.3px}.palette .pal-row{display:grid;grid-template-columns:repeat(10,1fr);gap:3px}.palette .p-swatch{height:20px;cursor:pointer;border:1px solid #00000040;border-radius:2px;padding:0;outline-offset:-1px;transition:transform .12s}.palette .p-swatch:hover{outline:1px solid #b39eff;z-index:1;transform:scale(1.18)}.palette .p-swatch.sel{outline:1px solid #b39eff}
/* hex 颜色输入 */
.field-row input[type="text"]{font-family:Menlo,Consolas,monospace;letter-spacing:.5px}
/* 颜色小色块 */
.hex-wrap{display:flex;align-items:center;gap:6px;flex:1}
.hex-wrap input{flex:1;min-width:0}
.hex-prev{width:20px;height:20px;border-radius:4px;border:1px solid #3a3c46;flex-shrink:0;background:#FFF;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
/* 样式管理 */
.style-mgr{margin-top:16px;padding-top:14px;border-top:1px solid #292b33}
.style-mgr .field-row.compact{margin:6px 0}
.style-mgr .field-row.compact label{flex:1}
.style-mgr .ghost.sm{padding:7px 12px;font-size:12px;white-space:nowrap;flex-shrink:0}
.saved-styles{font-size:11px;color:#9b9ead;margin-top:12px;padding:6px 0;line-height:2.2}
.saved-styles .empty-hint{color:#555966;font-style:normal}
.style-tag{display:inline-block;padding:3px 10px;margin:2px 4px 2px 0;background:#292b35;border-radius:12px;font-size:11px;color:#ecedf4;cursor:pointer;border:1px solid #3a3c46;font:inherit;transition:background .12s,border-color .12s}
.style-tag:hover{background:#9a7bf3;border-color:#9a7bf3;color:#fff}
/* ============ 手机模式 ============ */
.backdrop{display:none}
.backdrop.show{display:block;position:fixed;inset:68px 0 0 0;background:rgba(0,0,0,.55);z-index:55}
.mobile-bar{display:none}
.mobile-bar button.active{background:#8f71f2;border-color:#8f71f2;color:#fff}
#phoneBtn.active{background:#8f71f2;border-color:#8f71f2;color:#fff}
body.phone-preview main{grid-template-columns:1fr}
body.phone-preview aside{position:fixed;top:68px;bottom:0;width:84%;max-width:340px;z-index:60;transition:transform .25s ease}
body.phone-preview .left{left:0;transform:translateX(-105%);border-right:1px solid #2a2c34}
body.phone-preview .right{right:0;transform:translateX(105%);border-left:1px solid #2a2c34;width:90%;max-width:380px}
body.phone-preview aside.open{transform:translateX(0)}
body.phone-preview .stage-wrap{padding-bottom:60px}
body.phone-preview header{padding:0 10px;gap:6px}
body.phone-preview .notice{display:none}
body.phone-preview .brand{font-size:15px}
body.phone-preview .brand em{display:none}
body.phone-preview .brand .mark{display:none}
body.phone-preview .actions{gap:4px}
body.phone-preview .actions button{padding:7px 9px;font-size:11px}
body.phone-preview .actions .primary span{font-size:13px}
body.phone-preview .mobile-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;gap:10px;padding:9px 12px;background:#15161c;border-top:1px solid #292b33}
body.phone-preview .mobile-bar button{flex:1;padding:13px;font-size:14px;font-weight:600;background:#292b35;border:1px solid #3a3c46}
body.phone-preview #workspace{padding:14px}
/* 真实手机上隐藏桌面端专属的手机预览切换 */
@media (max-width:820px){
#phoneBtn{display:none}
#verifyBtn{display:none}
}