.abe-overlay{--line:rgba(26,21,51,.10);--ink:#171325;--muted:#8b879c;--a:#6a4bd8;--a2:#5836c4;
    position:fixed;inset:0;z-index:20000;background:#eef0f4;display:none;flex-direction:column;
    font-family:inherit;color:var(--ink)}
.abe-overlay.open{display:flex}
.abe-overlay *{box-sizing:border-box}
body.abe-lock{overflow:hidden}

.abe-top{height:56px;flex:0 0 56px;display:flex;align-items:center;gap:14px;padding:0 16px;
    background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 4px rgba(0,0,0,.03)}
.abe-brand{display:flex;align-items:center;gap:10px;min-width:0}
.abe-brand .lg{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#6a4bd8,#5836c4);
    color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px}
.abe-brand .nm{font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.abe-brand .sz{font-size:11.5px;color:var(--muted)}
.abe-tools-c{display:flex;align-items:center;gap:4px;margin:0 auto}
.abe-tbtn{width:34px;height:34px;border-radius:8px;border:1px solid transparent;background:transparent;
    color:#4a4560;display:inline-flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer}
.abe-tbtn:hover{background:#f2f0fa;border-color:var(--line)}
.abe-tbtn.on{background:#efeafc;color:var(--a2);border-color:#e2d9f7}
.abe-sep{width:1px;height:22px;background:var(--line);margin:0 4px}
.abe-top-r{display:flex;align-items:center;gap:8px}
.abe-btn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 14px;font:inherit;
    font-size:13px;font-weight:700;cursor:pointer;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.abe-btn:hover{border-color:#b7a6ec;color:var(--a2)}
.abe-btn.primary{background:var(--a2);color:#fff;border-color:var(--a2)}
.abe-btn.primary:hover{background:#4a2db0;color:#fff}
.abe-btn:disabled,.abe-btn[disabled]{opacity:.5;cursor:not-allowed;filter:grayscale(.15)}
.abe-btn:disabled:hover,.abe-btn[disabled]:hover{filter:grayscale(.15)}
.abe-btn.ai{background:linear-gradient(135deg,#7c3aed,#db2777);color:#fff;border:0}
.abe-btn.ai:hover{filter:brightness(1.07);color:#fff}
.abe-ai-card{width:min(560px,96vw)}
.abe-ai-body{padding:20px 22px}
.abe-ai-lead{margin:0 0 12px;font-size:13px;color:#6b6780;line-height:1.55}
.abe-ai-ta{width:100%;border:1px solid var(--line);border-radius:11px;padding:12px 14px;font:inherit;font-size:14px;
    resize:vertical;outline:0;background:#faf9ff;color:var(--ink)}
.abe-ai-ta:focus{border-color:#b7a6ec;background:#fff}
.abe-ai-chips{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 4px}
.abe-ai-chips button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font:inherit;
    font-size:12px;font-weight:600;color:#615c7a;cursor:pointer}
.abe-ai-chips button:hover{border-color:#c8bdec;color:var(--a2);background:#faf9ff}
.abe-ai-foot{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:16px}
.abe-ai-msg{font-size:12.5px;font-weight:600;color:#16a34a;margin-right:auto}
.abe-ai-msg.err{color:#dc2626}
.abe-btn.ghost{border-color:transparent;color:var(--muted)}
.abe-btn.ghost:hover{background:#f2f0fa}

.abe-main{flex:1;display:flex;min-height:0}
.abe-rail{flex:0 0 78px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;
    align-items:center;padding:10px 0;gap:4px}
.abe-rail button{width:60px;height:58px;border:0;background:transparent;border-radius:10px;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#5a5570;font-size:11px;font-weight:600}
.abe-rail button i{font-size:19px}
.abe-rail button:hover{background:#f4f2fc;color:var(--a2)}
.abe-rail button.on{background:#efeafc;color:var(--a2)}
.abe-panel{flex:0 0 300px;background:#fff;border-right:1px solid var(--line);overflow-y:auto;padding:16px}
.abe-panel.hidden{display:none}
.abe-panel h4{margin:0 0 10px;font-size:13px;font-weight:800}
.abe-panel .ph{font-size:12px;color:var(--muted);line-height:1.6}
.abe-badge-soon{font-size:9.5px;font-weight:700;background:#eef2ff;color:#4f46e5;border-radius:5px;padding:2px 7px;margin-left:6px}

.abe-stage{flex:1;position:relative;overflow:hidden;background:#e7e9ef;
    background-image:radial-gradient(circle,#d5d8e2 1px,transparent 1px);background-size:22px 22px;
    display:flex;align-items:center;justify-content:center}
.abe-viewport{display:grid;grid-template-columns:22px auto;grid-template-rows:22px auto;transform-origin:center center}
.abe-ruler-corner{grid-area:1/1;background:#eceaf2;border-right:1px solid #d5d3e0;border-bottom:1px solid #d5d3e0}
.abe-ruler{display:block}
.abe-ruler-top{grid-area:1/2;border-bottom:1px solid #d5d3e0}
.abe-ruler-left{grid-area:2/1;border-right:1px solid #d5d3e0}
.abe-canvas-host{grid-area:2/2;box-shadow:0 8px 30px rgba(20,16,40,.18)}
.abe-tpl-loading{margin-top:12px;font-size:12px;color:var(--a2);display:flex;align-items:center;gap:8px}
.abe-tpl-loading[hidden]{display:none}
.abe-tpl-loading .spin{display:inline-block;animation:abe-spin 1s linear infinite}
@keyframes abe-spin{to{transform:rotate(360deg)}}
.abe-empty-hint{position:absolute;bottom:64px;left:50%;transform:translateX(-50%);z-index:6;pointer-events:none;
    display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 16px;
    box-shadow:0 6px 22px rgba(20,16,40,.12);max-width:380px}
.abe-empty-hint[hidden]{display:none}
.abe-empty-hint i{font-size:22px;color:var(--a2)}
.abe-empty-hint b{font-size:13px;display:block}
.abe-empty-hint span{font-size:11.5px;color:var(--muted)}
.abe-legend{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:flex;width:max-content;align-items:center;justify-content:center;gap:16px;
    background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:11px;color:#5a5570;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.abe-legend i{font-style:normal;display:inline-flex;align-items:center;gap:6px}
.abe-legend .ln{width:14px;height:0;border-top:2px dashed}

.abe-zoom{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;
    background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.abe-zoom button{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;color:#4a4560}
.abe-zoom button:hover{border-color:#b7a6ec;color:var(--a2)}
.abe-zoom .val{font-size:12px;font-weight:700;min-width:46px;text-align:center}
.abe-zoom input[type=range]{width:130px;accent-color:var(--a2)}

.ab-open-btn{border:1px solid var(--a2);background:var(--a2);color:#fff;border-radius:10px;padding:9px 16px;
    font:inherit;font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.ab-open-btn:hover{background:#4a2db0}

.abe-tp h4{margin:0 0 12px;font-size:13px;font-weight:800}
.abe-add-btn{width:100%;border:1px solid var(--line);background:#faf9ff;border-radius:10px;padding:14px;margin-bottom:8px;
    cursor:pointer;text-align:left;color:var(--ink);transition:.12s;display:flex;align-items:center;gap:8px}
.abe-add-btn:hover{border-color:#b7a6ec;background:#f4f2fc}
.abe-add-btn.solid{background:var(--a2);color:#fff;border-color:var(--a2);justify-content:center;font-weight:700;font-size:13px}
.abe-add-btn.solid:hover{background:#4a2db0}
.abe-upload{display:flex;flex-direction:column;align-items:center;gap:4px;border:1.5px dashed #c8bdec;border-radius:12px;
    padding:22px 14px;cursor:pointer;color:var(--a2);background:#faf9ff;text-align:center}
.abe-upload:hover{background:#f4f2fc;border-color:#a98fe6}
.abe-upload i{font-size:26px}
.abe-upload span{font-weight:700;font-size:13px}
.abe-upload small{color:var(--muted);font-size:10.5px}
.abe-shape-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.abe-shape-grid button{aspect-ratio:1;border:1px solid var(--line);background:#fff;border-radius:9px;cursor:pointer;
    font-size:18px;color:#4a4560;display:flex;align-items:center;justify-content:center}
.abe-shape-grid button:hover{border-color:#b7a6ec;color:var(--a2);background:#faf9ff}
.abe-fld{margin-bottom:12px}
.abe-fld label{display:block;font-size:11.5px;font-weight:600;color:#3a3550;margin-bottom:5px}
.abe-text-in{width:100%;border:1px solid var(--line);border-radius:9px;background:#faf9ff;font:inherit;font-size:13px;padding:9px 11px;outline:0}
.abe-text-in:focus{border-color:#b7a6ec;background:#fff}
.abe-fld input[type=color]{width:100%;height:38px;border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer;padding:3px}
.abe-fld input[type=range]{width:100%;accent-color:var(--a2)}
.abe-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.abe-swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;margin-bottom:8px}
.abe-swatches .sw{aspect-ratio:1;border-radius:6px;border:1px solid rgba(0,0,0,.12);cursor:pointer;padding:0;position:relative;transition:transform .1s}
.abe-swatches .sw:hover{transform:scale(1.12)}
.abe-swatches .sw.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--a2)}
.abe-swatches .sw[data-white]{border-color:rgba(0,0,0,.18)}
.abe-color-custom{width:100%;height:34px;border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer;padding:3px}
.abe-color-custom::-webkit-color-swatch-wrapper{padding:0}
.abe-color-custom::-webkit-color-swatch{border:0;border-radius:6px}

.abe-seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:14px}
.abe-seg button{border:1px solid var(--line);background:#fff;border-radius:9px;padding:9px 8px;font:inherit;font-size:12px;font-weight:600;
    cursor:pointer;color:#4a4560;display:flex;align-items:center;justify-content:center;gap:5px}
.abe-seg button:hover{border-color:#b7a6ec;color:var(--a2)}
.abe-seg button.on{background:#efeafc;border-color:#c8bdec;color:var(--a2)}
.abe-el-seg{grid-template-columns:1fr 1fr}
.abe-el-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-height:340px;overflow-y:auto;padding:2px}
.abe-el-item{aspect-ratio:1;border:1px solid var(--line);background:#fff;border-radius:9px;cursor:pointer;padding:6px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transition:.12s;overflow:hidden}
.abe-el-item:hover{border-color:#b7a6ec;background:#faf9ff;transform:translateY(-1px)}
.abe-el-item img{max-width:100%;max-height:100%;object-fit:contain;pointer-events:none}
.abe-el-item span{font-size:9px;color:#8b879c;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.abe-el-empty{grid-column:1/-1;border:1px dashed var(--line);border-radius:10px;padding:22px 12px;text-align:center;
    color:#8b879c;font-size:12px;line-height:1.6}
.abe-el-empty i{font-size:20px;display:block;margin-bottom:6px;color:#c9c4e0}
.abe-el-empty small{font-size:10.5px;opacity:.85}

.abe-upload.drag{background:#efeafc;border-color:var(--a2);transform:scale(1.01)}

.abe-layers-panel{position:absolute;top:14px;right:14px;width:240px;max-height:calc(100% - 28px);background:#fff;border:1px solid var(--line);
    border-radius:12px;box-shadow:0 10px 34px rgba(20,16,40,.16);display:flex;flex-direction:column;overflow:hidden;z-index:12}
.abe-layers-panel[hidden]{display:none}
.abe-lp-head{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--line);font-weight:800;font-size:12.5px}
.abe-lp-head button{border:0;background:transparent;cursor:pointer;color:var(--muted);font-size:14px}
.abe-lp-head button:hover{color:var(--ink)}
.abe-lp-list{overflow-y:auto;padding:6px}
.abe-lp-empty{padding:20px 14px;font-size:11.5px;color:var(--muted);text-align:center}
.abe-lp-row{display:flex;align-items:center;gap:8px;padding:8px 8px;border-radius:8px;cursor:pointer;font-size:12.5px}
.abe-lp-row:hover{background:#f6f4fc}
.abe-lp-row.on{background:#efeafc}
.abe-lp-row .ic{width:26px;height:26px;border-radius:6px;background:#f2f0fa;display:flex;align-items:center;justify-content:center;color:#5a5570;font-size:13px;flex:0 0 26px}
.abe-lp-row .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#3a3550}
.abe-lp-row .act{display:flex;gap:2px}
.abe-lp-row .act button{width:24px;height:24px;border:0;background:transparent;border-radius:5px;cursor:pointer;color:#8b879c;font-size:12px;display:inline-flex;align-items:center;justify-content:center}
.abe-lp-row .act button:hover{background:#e9e5f6;color:var(--a2)}
.abe-lp-row .act button.danger:hover{color:#dc2626;background:#fdeaea}

.abe-cs{position:relative}
.abe-cs-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--line);
    border-radius:9px;background:#faf9ff;font:inherit;font-size:13px;padding:9px 11px;cursor:pointer;color:var(--ink);text-align:left}
.abe-cs-btn:hover{border-color:#b7a6ec}
.abe-cs-btn i{font-size:11px;color:var(--muted);flex:0 0 auto}
.abe-cs-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.abe-cs-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:40;background:#fff;border:1px solid var(--line);
    border-radius:10px;box-shadow:0 10px 30px rgba(20,16,40,.16);max-height:260px;overflow-y:auto;padding:5px;display:none}
.abe-cs-menu.open{display:block}
.abe-cs-opt{padding:8px 10px;border-radius:7px;font-size:13.5px;cursor:pointer;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.abe-cs-opt:hover{background:#f4f2fc;color:var(--a2)}
.abe-cs-opt.on{background:#efeafc;color:var(--a2);font-weight:700}

.abe-props{flex:0 0 260px;background:#fff;border-left:1px solid var(--line);overflow-y:auto;padding:16px}
.abe-props[hidden]{display:none}
.abe-props-empty{color:var(--muted);font-size:12px;text-align:center;padding:30px 10px;display:flex;flex-direction:column;gap:10px;align-items:center}
.abe-props-empty i{font-size:24px;opacity:.5}
.abe-pg{border-top:1px solid var(--line);padding:14px 0}
.abe-pg:first-child{border-top:0;padding-top:0}
.abe-pg-t{font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#6a6580;margin-bottom:10px}
.abe-btn-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.abe-btn-row button{width:34px;height:34px;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;
    font-size:15px;color:#4a4560;display:inline-flex;align-items:center;justify-content:center}
.abe-btn-row button:hover{border-color:#b7a6ec;color:var(--a2);background:#faf9ff}
.abe-btn-row button.on{background:#efeafc;color:var(--a2);border-color:#e2d9f7}
.abe-btn-row button.danger:hover{border-color:#f2b8b8;color:#dc2626;background:#fef2f2}
.abe-btn-row .abe-sep{width:1px;height:22px;background:var(--line);margin:0 2px}

.abe-modal{position:absolute;inset:0;z-index:30;background:rgba(20,16,40,.45);display:flex;align-items:center;justify-content:center;padding:24px}
.abe-modal[hidden]{display:none}
.abe-modal-card{background:#fff;border-radius:16px;width:min(760px,96vw);max-height:88vh;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3);display:flex;flex-direction:column}
.abe-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.abe-modal-head h3{margin:0;font-size:15px;font-weight:800}
.abe-modal-body{display:grid;grid-template-columns:1fr 1fr;gap:14px 40px;padding:18px 24px 24px;overflow-y:auto}
.abe-sc-g{font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--a2);margin:16px 0 6px}
.abe-sc-g:first-child{margin-top:0}
.abe-sc{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 0;font-size:12.5px;line-height:1.2}
.abe-sc .l{color:#3a3550}
.abe-sc .k{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto}
.abe-sc .k b{color:#b9b4cc;font-weight:600;font-size:11px;margin:0 1px}
.abe-sc kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;min-width:22px;text-align:center;background:#f6f4fc;border:1px solid #e2d9f7;border-bottom-width:2px;border-radius:6px;padding:2px 6px;color:#4a2db0;white-space:nowrap}
@media(max-width:620px){.abe-modal-body{grid-template-columns:1fr}}
@media(max-width:900px){.abe-panel{flex-basis:240px}.abe-rail{flex-basis:64px}.abe-props{flex-basis:220px}}

.abe-sheet-handle{display:none}
@media (max-width:760px){
    .abe-top{height:52px;flex-basis:52px;padding:0 10px;gap:8px}
    .abe-brand .nm{max-width:110px;font-size:13px}
    .abe-brand .sz{display:none}
    .abe-tools-c{gap:2px;margin:0}
    #abeHelp,#abeExport,#abeGuidesToggle{display:none}
    .abe-btn{padding:8px 12px;font-size:12.5px}
    .abe-btn.ghost{font-size:0;padding:8px 10px}
    .abe-btn.ghost i{font-size:15px}
    .abe-btn.ai{font-size:0;padding:8px 11px;gap:0}
    .abe-btn.ai i{font-size:16px}

    .abe-main{flex-direction:column;position:relative}

    .abe-ruler,.abe-ruler-corner{display:none!important}
    .abe-viewport{grid-template-columns:1fr!important;grid-template-rows:1fr!important}

    .abe-stage{flex:1;order:1}

    .abe-rail{order:2;flex:0 0 auto;flex-direction:row;width:100%;border-right:0;border-top:1px solid var(--line);
        justify-content:space-around;padding:6px 4px;gap:2px;overflow-x:auto}
    .abe-rail button{width:auto;min-width:54px;height:50px;font-size:10px;flex:1}
    .abe-rail button i{font-size:17px}

    .abe-panel,.abe-props{position:fixed;left:0;right:0;bottom:0;flex:none;width:100%;max-height:64vh;
        border:0;border-top:1px solid var(--line);border-radius:16px 16px 0 0;box-shadow:0 -8px 30px rgba(20,16,40,.2);
        transform:translateY(110%);transition:transform .22s ease;overflow-y:auto;padding-top:4px}
    .abe-panel{z-index:40}.abe-props{z-index:41}
    .abe-panel.sheet-open,.abe-props.sheet-open{transform:translateY(0)}
    .abe-props-empty{display:none}

    .abe-sheet-handle{display:flex;justify-content:center;padding:4px 0 10px;cursor:pointer}
    .abe-sheet-handle span{width:44px;height:5px;border-radius:3px;background:#d5d3e0;display:block}

    .abe-layers-panel{top:auto;bottom:74px;right:10px;left:10px;width:auto;max-height:48vh}
    .abe-zoom{bottom:12px}
    .abe-empty-hint{bottom:86px;max-width:88%;left:50%}
}