*{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0);}
html,body{margin:0;padding:0;height:100%;overflow:hidden;font-family:'Heebo','Rubik',sans-serif;background:#f4f5fb;color:#1d2033;-webkit-user-select:none;user-select:none;font-size:15px;}
input,textarea,select,button{font-family:inherit;font-size:15px;}
textarea,input[type=text],input[type=number]{-webkit-user-select:text;user-select:text;}
.hidden{display:none !important;}
.screen{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;flex-direction:column;}
svg.ic{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.ibtn{border:0;background:transparent;color:inherit;width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;padding:0;flex-shrink:0;}
.ibtn:active{background:rgba(91,76,240,.15);}
.ibtn.sm{width:36px;height:36px;}
.ibtn.on{background:rgba(91,76,240,.18);color:#5b4cf0;}
.ibtn:disabled{opacity:.35;}
.btn{border:1px solid #d9dcea;background:#fff;color:#1d2033;height:44px;padding:0 16px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-weight:500;}
.btn i{display:inline-flex;margin:0 6px;}
.btn.primary{background:#5b4cf0;border-color:#5b4cf0;color:#fff;}
.btn.danger{color:#e0344f;}
.btn:active{opacity:.8;}
.btn.sm{height:36px;padding:0 10px;font-size:14px;}
.btn.full{width:100%;margin-top:8px;}
/* home */
.home-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#fff;border-bottom:1px solid #e3e5ef;}
.logo{display:flex;align-items:center;font-weight:700;font-size:20px;}
.logo-mark{width:30px;height:30px;border-radius:0;background:url(/apps/img/mark.svg) center/contain no-repeat;margin:0 10px;display:inline-block;}
.head-btns{display:flex;}
.home-body{flex:1;overflow-y:auto;padding:14px;-webkit-overflow-scrolling:touch;}
.home-body h3{margin:18px 4px 8px;font-size:16px;}
.home-actions{display:flex;flex-wrap:wrap;margin:0 -5px;}
.big-btn{flex:1;min-width:130px;margin:5px;height:78px;border-radius:16px;border:1px solid #e3e5ef;background:#fff;color:#1d2033;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:600;font-size:15px;}
.big-btn svg{width:28px;height:28px;margin-bottom:4px;}
.big-btn.primary{background:linear-gradient(135deg,#5b4cf0,#8a4cf0);color:#fff;border:0;}
.restore{margin:10px 5px;padding:12px;background:#fff6dd;border-radius:12px;display:flex;align-items:center;justify-content:space-between;}
.size-row{display:flex;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;}
.size-card{flex-shrink:0;width:96px;margin:4px;padding:8px 4px;background:#fff;border:1px solid #e3e5ef;border-radius:14px;text-align:center;font-size:12.5px;line-height:1.25;}
.size-card .shape{margin:4px auto 6px;background:#eceaff;border:2px solid #5b4cf0;border-radius:3px;}
.size-card small{color:#6b7090;display:block;}
.size-grid{display:flex;flex-wrap:wrap;}
.size-grid .size-card{width:calc(33.33% - 8px);}
.proj-list{display:flex;flex-wrap:wrap;margin:0 -4px;}
.proj{width:calc(50% - 8px);margin:4px;background:#fff;border:1px solid #e3e5ef;border-radius:14px;overflow:hidden;position:relative;}
.proj .thumb{height:120px;background:#eceef5 center/contain no-repeat;}
.proj .pname{padding:6px 8px;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.proj .pmore{position:absolute;top:4px;right:4px;background:rgba(255,255,255,.9);}
.empty{color:#6b7090;padding:20px;text-align:center;width:100%;}
/* editor */
.topbar{height:52px;display:flex;align-items:center;padding:0 4px;background:#fff;border-bottom:1px solid #e3e5ef;flex-shrink:0;}
.spacer{flex:1;text-align:center;}
.zoom-lbl{font-size:13px;color:#6b7090;}
.export-btn{height:38px;padding:0 10px;margin:0 4px;}
.export-btn i{margin:0 4px 0 0;}
#stage{flex:1;position:relative;overflow:hidden;background:#e4e6ee;touch-action:none;}
#stage .canvas-container{position:absolute !important;left:0;top:0;}
#overlay{position:absolute;left:0;top:0;z-index:5;}
.mode-bar{position:absolute;left:8px;right:8px;top:8px;z-index:6;background:#fff;border-radius:14px;box-shadow:0 4px 16px rgba(0,0,0,.15);display:flex;align-items:center;flex-wrap:wrap;padding:4px;}
.mode-bar .lbl{padding:0 8px;font-weight:600;font-size:14px;}
.mode-bar .grow{flex:1;}
.toolbar{height:68px;display:flex;align-items:stretch;overflow-x:auto;background:#fff;border-top:1px solid #e3e5ef;flex-shrink:0;-webkit-overflow-scrolling:touch;}
.tool{flex-shrink:0;min-width:64px;border:0;background:transparent;color:#1d2033;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11.5px;padding:0 6px;}
.tool svg{margin-bottom:3px;}
.tool:active,.tool.on{color:#5b4cf0;background:rgba(91,76,240,.08);}
.tool.danger{color:#e0344f;}
.tool-sep{width:1px;background:#e3e5ef;margin:10px 2px;flex-shrink:0;}
.sheet{position:absolute;left:0;right:0;bottom:68px;max-height:55%;background:#fff;border-radius:18px 18px 0 0;box-shadow:0 -6px 24px rgba(0,0,0,.14);z-index:10;display:flex;flex-direction:column;}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 0 14px;font-weight:600;}
.sheet-body{overflow-y:auto;padding:4px 12px 12px;-webkit-overflow-scrolling:touch;}
.row{display:flex;align-items:center;margin:6px 0;flex-wrap:wrap;}
.row label,.lab{min-width:84px;font-size:13.5px;color:#6b7090;margin:0 6px;}
.row input[type=range]{flex:1;min-width:120px;}
.row .val{width:44px;text-align:center;font-size:13px;}
input[type=range]{-webkit-appearance:none;height:30px;background:transparent;}
input[type=range]::-webkit-slider-runnable-track{height:6px;background:#dfe1ee;border-radius:3px;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#5b4cf0;margin-top:-9px;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);}
input[type=text],input[type=number],select,textarea{border:1px solid #d9dcea;border-radius:10px;padding:8px 10px;background:#fff;color:#1d2033;height:42px;}
textarea{height:auto;width:100%;resize:vertical;}
.seg{display:flex;flex-wrap:wrap;}
.seg .btn{margin:3px;}
.seg .btn.on,.chip.on{background:#5b4cf0;border-color:#5b4cf0;color:#fff;}
.chips{display:flex;overflow-x:auto;padding:4px 0;-webkit-overflow-scrolling:touch;}
.chip{flex-shrink:0;border:1px solid #d9dcea;background:#fff;color:#1d2033;border-radius:18px;height:34px;padding:0 12px;margin:2px 3px;font-size:13.5px;}
.swatches{display:flex;flex-wrap:wrap;}
.sw{width:36px;height:36px;border-radius:50%;margin:4px;border:2px solid rgba(0,0,0,.08);position:relative;}
.sw.on{box-shadow:0 0 0 3px #5b4cf0;}
.sw.none{background:#fff;}
.sw.none:after{content:'';position:absolute;left:15px;top:-2px;width:3px;height:38px;background:#e0344f;-webkit-transform:rotate(45deg);transform:rotate(45deg);}
.sw.add{display:flex;align-items:center;justify-content:center;background:#f4f5fb;}
.grid-items{display:flex;flex-wrap:wrap;}
.gi{width:62px;height:62px;margin:3px;border-radius:12px;background:#f4f5fb;border:1px solid #eceef5;display:flex;align-items:center;justify-content:center;padding:6px;overflow:hidden;}
.gi svg{width:100%;height:100%;}
.gi img{max-width:100%;max-height:100%;}
.gi.wide{width:96px;}
.gi.tall{height:96px;}
.font-list{max-height:none;}
.font-item{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid #eceef5;font-size:22px;}
.font-item small{font-family:'Heebo',sans-serif;font-size:11px;color:#6b7090;}
.font-item.on{background:#eceaff;}
.sub-tabs{display:flex;overflow-x:auto;border-bottom:1px solid #eceef5;margin-bottom:6px;}
.sub-tab{flex-shrink:0;border:0;background:transparent;padding:10px 12px;font-size:14px;color:#6b7090;border-bottom:3px solid transparent;}
.sub-tab.on{color:#5b4cf0;border-bottom-color:#5b4cf0;font-weight:600;}
.hsv{position:relative;height:150px;border-radius:12px;margin:6px 0;touch-action:none;}
.hsv canvas{width:100%;height:100%;border-radius:12px;display:block;}
.hsv .dot{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 3px rgba(0,0,0,.6);pointer-events:none;}
.hue{height:30px;}
.hue::-webkit-slider-runnable-track{background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00) !important;height:14px !important;border-radius:7px !important;}
.hue::-webkit-slider-thumb{margin-top:-5px !important;}
/* side */
.side{position:absolute;top:52px;bottom:68px;right:0;width:300px;max-width:88%;background:#fff;z-index:20;box-shadow:-6px 0 24px rgba(0,0,0,.15);display:flex;flex-direction:column;}
html[dir=rtl] .side{right:auto;left:0;}
.side-head{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 6px 14px;font-weight:700;border-bottom:1px solid #eceef5;}
.layer-tools{display:flex;flex-wrap:wrap;padding:4px;border-bottom:1px solid #eceef5;}
.layer-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.layer{display:flex;align-items:center;padding:4px 6px;border-bottom:1px solid #f0f1f6;}
.layer.sel{background:#eceaff;}
.layer .lthumb{width:40px;height:40px;border-radius:8px;background:#f4f5fb;display:flex;align-items:center;justify-content:center;overflow:hidden;margin:0 6px;flex-shrink:0;}
.layer .lthumb img{max-width:100%;max-height:100%;}
.layer .lname{flex:1;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.layer.hid .lname,.layer.hid .lthumb{opacity:.4;}
/* modal */
.modal{position:absolute;left:0;top:0;right:0;bottom:0;background:rgba(10,12,25,.5);z-index:50;display:flex;align-items:center;justify-content:center;padding:10px;}
.modal-box{background:#fff;border-radius:18px;width:100%;max-width:520px;max-height:100%;display:flex;flex-direction:column;box-shadow:0 10px 40px rgba(0,0,0,.3);}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 4px 16px;font-weight:700;font-size:17px;}
.modal-body{padding:4px 16px 8px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.modal-foot{display:flex;justify-content:flex-end;padding:8px 12px 12px;flex-wrap:wrap;}
.modal-foot .btn{margin:3px;}
.modal.full{padding:0;}
.modal.full .modal-box{max-width:none;height:100%;border-radius:0;}
.menu{position:absolute;top:50px;right:6px;z-index:40;background:#fff;border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.2);min-width:220px;max-height:80%;overflow-y:auto;padding:4px 0;}
html[dir=rtl] .menu{right:auto;left:6px;}
.mi{display:flex;align-items:center;width:100%;border:0;background:transparent;color:inherit;padding:11px 14px;font-size:15px;text-align:start;}
.mi svg{margin:0 12px 0 0;}
html[dir=rtl] .mi svg{margin:0 0 0 12px;}
.mi:active{background:#f0f1f6;}
.mi .chk{margin-left:auto;color:#5b4cf0;}
.mi-sep{height:1px;background:#eceef5;margin:4px 0;}
.toast{position:absolute;left:50%;bottom:90px;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:#1d2033;color:#fff;padding:10px 18px;border-radius:22px;z-index:60;font-size:14px;max-width:90%;text-align:center;}
.busy{position:absolute;left:0;top:0;right:0;bottom:0;background:rgba(10,12,25,.55);z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;}
.spinner{width:44px;height:44px;border-radius:50%;border:4px solid rgba(255,255,255,.3);border-top-color:#fff;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;margin-bottom:12px;}
@-webkit-keyframes spin{to{-webkit-transform:rotate(360deg);}}
@keyframes spin{to{transform:rotate(360deg);}}
.hint{font-size:12.5px;color:#6b7090;margin:4px 6px;}
.field{margin:8px 0;}
.field>label{display:block;font-size:13px;color:#6b7090;margin:0 2px 4px;}
.inline{display:flex;align-items:center;}
.inline>*{margin:0 3px;}
.inline input[type=number]{width:90px;}
.tpl-grid{display:flex;flex-wrap:wrap;}
.tpl{width:calc(50% - 8px);margin:4px;border-radius:12px;border:1px solid #e3e5ef;overflow:hidden;background:#fff;}
.tpl .thumb{height:150px;background:#eceef5 center/contain no-repeat;}
.tpl div.t{padding:6px 8px;font-size:13.5px;}
.cutout-wrap{flex:1;position:relative;overflow:hidden;background:#888;touch-action:none;}
.cutout-wrap canvas{position:absolute;left:0;top:0;}
.checker{background-color:#fff;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%),linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%);background-size:20px 20px;background-position:0 0,10px 10px;}
/* dark */
body.dark{background:#141722;color:#eef0f8;}
body.dark .home-head,body.dark .topbar,body.dark .toolbar,body.dark .sheet,body.dark .side,body.dark .modal-box,body.dark .menu,body.dark .mode-bar{background:#1f2333;border-color:#2d3247;color:#eef0f8;}
body.dark .big-btn,body.dark .size-card,body.dark .proj,body.dark .tpl,body.dark .btn,body.dark .chip,body.dark input[type=text],body.dark input[type=number],body.dark select,body.dark textarea{background:#262b3e;border-color:#353b55;color:#eef0f8;}
body.dark .btn.primary,body.dark .chip.on,body.dark .seg .btn.on{background:#6f62ff;border-color:#6f62ff;color:#fff;}
body.dark .big-btn.primary{background:linear-gradient(135deg,#5b4cf0,#8a4cf0);}
body.dark .tool{color:#eef0f8;}
body.dark .gi,body.dark .layer .lthumb,body.dark .proj .thumb,body.dark .tpl .thumb{background-color:#2a2f45;border-color:#353b55;}
body.dark #stage{background:#0f111a;}
body.dark .font-item,body.dark .layer,body.dark .sub-tabs,body.dark .layer-tools,body.dark .side-head{border-color:#2d3247;}
body.dark .font-item.on,body.dark .layer.sel{background:#2f2a5c;}
body.dark .mi:active{background:#2a2f45;}
body.dark .restore{background:#3a3420;}
body.dark .size-card .shape{background:#2f2a5c;}
body.dark input[type=range]::-webkit-slider-runnable-track{background:#353b55;}
body.dark .hint,body.dark .lab,body.dark .row label,body.dark .field>label,body.dark .zoom-lbl{color:#9aa0c0;}
@media (min-width:700px){ .size-grid .size-card{width:calc(20% - 8px);} .proj,.tpl{width:calc(25% - 8px);} .sheet{left:50%;width:640px;margin-left:-320px;} }
@media (max-height:420px){ .sheet{max-height:70%;} .toolbar{height:58px;} .sheet{bottom:58px;} .side{bottom:58px;} }

.modal-body label.hint{display:block;margin:8px 4px;}
.modal-body h4{margin:12px 4px 4px;font-size:14px;}

/* v1.1 kits */
.big-btn.kits{background:linear-gradient(135deg,#d4a017,#b8860b);color:#fff;border:0;}
.kit-grid{display:flex;flex-wrap:wrap;margin:0 -4px;}
.kit-card{width:calc(50% - 8px);margin:4px;min-height:96px;border:1px solid #e3e5ef;border-radius:14px;background:#fff;color:#1d2033;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:10px 6px;text-align:center;}
.kit-card .kit-ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:6px;}
.kit-card .kit-ic svg{width:26px;height:26px;}
.kit-card .kit-n{font-weight:700;font-size:15px;}
.kit-card .kit-d{font-size:12px;color:#6b7088;margin-top:2px;line-height:1.25;}
.kit-tools{display:flex;flex-direction:column;}
.kit-tool{display:flex;align-items:center;flex-wrap:wrap;text-align:start;border:1px solid #e3e5ef;background:#fff;color:#1d2033;border-radius:12px;padding:10px 12px;margin:4px 0;font-size:15px;font-weight:600;}
.kit-tool svg{width:22px;height:22px;margin:0 8px;flex:none;color:#5b4cf0;}
.kit-tool small{display:block;width:100%;font-weight:400;font-size:12px;color:#6b7088;margin:2px 38px 0 38px;}
.tool.kitbtn svg{color:#b8860b;}
body.dark .kit-card,body.dark .kit-tool{background:#262b3e;border-color:#353b55;color:#eef0f8;}
body.dark .kit-card .kit-d,body.dark .kit-tool small{color:#a9aec8;}
.tpl .thumb.noimg{display:flex;align-items:center;justify-content:center;}

.copyline{font-size:11px;color:#9a9fb0;text-align:center;padding:18px 8px 10px;}
.about-box{font-size:12.5px;color:#6b7088;line-height:1.5;margin-top:12px;border-top:1px solid rgba(128,128,128,.25);padding-top:10px;}
.about-box .copyline{padding:6px 0 0;}
.about-box{text-align:center;}

/* ===== v1.2 advanced controls ===== */
.axgrid{display:flex;flex-wrap:wrap;align-items:center;margin:4px -3px;}
.axnum{display:flex;align-items:center;width:calc(50% - 6px);margin:3px;background:#f4f5fb;border-radius:10px;padding:2px 4px;}
.axnum.wide{width:calc(100% - 6px);}
.axnum .axl{flex:1;font-size:12.5px;color:#6b7090;margin:0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.axnum input{width:64px;height:34px;text-align:center;border:1px solid #d9dcea;border-radius:8px;padding:0 2px;font-size:14px;background:#fff;color:inherit;-moz-appearance:textfield;}
.axnum input::-webkit-outer-spin-button,.axnum input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.axb{width:34px;height:34px;border:0;border-radius:8px;background:#e6e4ff;color:#5b4cf0;font-size:20px;font-weight:700;margin:0 2px;padding:0;}
.axb:active{background:#cfcaff;}
.axgrid > .btn{margin:3px;}
.btn.on{background:#eceaff;border-color:#5b4cf0;color:#5b4cf0;}
.axsec{border:1px solid #e3e5ef;border-radius:12px;margin:8px 0;overflow:hidden;}
.axsec-h{width:100%;display:flex;align-items:center;justify-content:space-between;border:0;background:#f7f7fc;color:inherit;height:42px;padding:0 12px;font-weight:600;font-size:14px;}
.axsec-h svg{transition:transform .15s;}
.axsec.open > .axsec-h svg{transform:rotate(180deg);}
.axsec-b{display:none;padding:4px 10px 10px;}
.axsec.open > .axsec-b{display:block;}
.axchk{display:flex;align-items:center;margin:6px 0;}
.axnudge .btn{margin:2px;}
.axnudge select{margin:0 6px;height:36px;}
.axgprev{height:30px;border-radius:8px;border:1px solid #d9dcea;margin:6px 0;}
.axstop{flex-wrap:nowrap;}
.axstop.on .sw{box-shadow:0 0 0 3px #5b4cf0;}
.axstop select{height:32px;margin:0 4px;}
.axpat .sw{background-size:auto;background-repeat:repeat;}
.axduo{display:inline-block;width:18px;height:12px;border-radius:3px;margin:0 4px;vertical-align:middle;}
.axeye{margin:2px 0 6px;}
.axeye .btn{margin:2px;}
.axeye-cover{position:absolute;left:0;top:0;right:0;bottom:0;z-index:30;cursor:crosshair;}
.axeye-msg{position:absolute;left:8px;right:8px;top:8px;background:#fff;border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.18);padding:8px 10px;font-size:14px;display:flex;align-items:center;justify-content:space-between;}
.axeye-lens{position:absolute;width:44px;height:44px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #000,0 3px 10px rgba(0,0,0,.3);pointer-events:none;}
.gi{position:relative;}
.axdel{position:absolute;top:0;right:4px;font-size:16px;color:#e0344f;padding:2px 4px;}
.axlist{margin:6px 0;}
.axitem{display:flex;align-items:center;padding:8px 6px;border-bottom:1px solid #eef0f6;font-size:14px;}
.axitem .grow{flex:1;margin:0 8px;}
.axitem.cur{background:#eceaff;border-radius:8px;}
.axitem img{width:44px;height:44px;object-fit:contain;background:#eceef5;border-radius:6px;}
.axwarn{color:#c77700;} .axbad{color:#e0344f;} .axok{color:#2e7d32;}
.axpages{display:flex;overflow-x:auto;padding:6px 2px;-webkit-overflow-scrolling:touch;}
.axpage{flex-shrink:0;width:84px;margin:4px;border:2px solid #e3e5ef;border-radius:10px;background:#fff;text-align:center;font-size:12px;padding:4px;}
.axpage.cur{border-color:#5b4cf0;}
.axpage .pth{height:84px;background:#eceef5 center/contain no-repeat;border-radius:6px;margin-bottom:3px;}
.pages-btn{min-width:44px;height:34px;border-radius:10px;border:1px solid #d9dcea;background:#fff;color:#1d2033;font-size:13px;padding:0 6px;margin:0 2px;display:inline-flex;align-items:center;}
.pages-btn svg{width:18px;height:18px;margin:0 2px;}
.axmock{width:100%;border-radius:10px;background:#eee;}
.axharm .sw{width:40px;height:40px;}
.axsettings .row select,.axsettings .row input[type=text]{flex:1;min-width:120px;height:38px;}
body.bigui .tool{min-width:76px;font-size:13px;}
body.bigui .toolbar{height:78px;}
body.bigui .sheet{bottom:78px;}
body.bigui .tool svg{width:28px;height:28px;}
body.bigui .btn.sm{height:42px;}
body.bigui .ibtn{width:50px;height:50px;}
.dark .axnum{background:#232638;} .dark .axnum input{background:#1b1d2b;border-color:#3a3e57;} .dark .axsec{border-color:#2f3348;} .dark .axsec-h{background:#232638;}
.dark .axb{background:#2f2b5c;color:#c9c2ff;} .dark .axeye-msg{background:#1b1d2b;} .dark .axpage{background:#1b1d2b;border-color:#2f3348;} .dark .pages-btn{background:#1b1d2b;border-color:#3a3e57;color:inherit;}
.dark .axitem{border-color:#2f3348;} .dark .axitem.cur{background:#2f2b5c;}

.ldrag{display:inline-flex;align-items:center;justify-content:center;width:30px;height:40px;color:#9aa0c0;touch-action:none;flex-shrink:0;}
.layer.dragging{background:#eceaff;box-shadow:0 4px 14px rgba(0,0,0,.18);position:relative;z-index:3;}

@media (max-width: 430px){
  .axnum{width:calc(100% - 6px);}
  .zoom-lbl{display:none;}
  .export-btn span{display:none;}
  .export-btn{padding:0 8px;}
  .export-btn i{margin:0;}
  .pages-btn{min-width:0;padding:0 4px;}
  .topbar .ibtn{width:40px;}
}
@media (max-width: 360px){
  #tHistory{display:none;}
  .topbar .ibtn{width:36px;}
  .axsettings .row .lab{min-width:70px;}
}

.nkb{display:inline-block;margin:0 5px;padding:0 5px;border-radius:6px;background:#e8f5e9;color:#2e7d32;font-size:10px;font-weight:700;line-height:16px;vertical-align:middle;}
body.dark .nkb{background:#1f3b26;color:#9be3a6;}

.nkkbd{margin-top:8px;}
.nkrow{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0;}
.nkkey{min-width:52px;height:56px;border:1px solid #d9dcea;border-radius:10px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2px 4px;}
.nkkey span{font-family:'Heebo','FrankRuhlLibre',serif;font-size:26px;line-height:30px;}
.nkkey small{font-size:9.5px;color:#6b7090;line-height:11px;white-space:nowrap;}
body.dark .nkkey{background:#23263a;border-color:#3a3e58;color:#eee;}

.axtoolgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;}
.axtg{min-height:72px;border:1px solid #e1e3ef;border-radius:12px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:13px;padding:6px 4px;color:#1d2033;}
.axtg i,.axtg svg{width:26px;height:26px;}
.axtg.danger{color:#c62828;}
body.dark .axtg{background:#23263a;border-color:#3a3e58;color:#eee;}

/* v1.2 small-screen comfort: bigger tap targets and readable text in panels and dialogs */
#tSave{position:relative;}
#tSave.dirty:after{content:'';position:absolute;top:9px;right:8px;width:8px;height:8px;border-radius:50%;background:#ff9800;}
.hint{font-size:13.5px;}
.modal-body label.hint, .axchk{display:flex !important;align-items:center;gap:10px;min-height:44px;font-size:14.5px;color:#2b2f45;margin:2px 4px !important;}
body.dark .modal-body label.hint, body.dark .axchk{color:#e6e8f2;}
.modal-body input[type=checkbox], .sheet input[type=checkbox], #sheetBody input[type=checkbox]{width:22px;height:22px;flex-shrink:0;margin:0;}
.btn.sm{min-height:40px;}
.chip{height:38px;}
.tool{min-height:56px;font-size:12px;}
.modal-body select, #sheetBody select{min-height:42px;font-size:15px;}
.modal-body input[type=text], .modal-body input[type=number], #sheetBody input[type=text], #sheetBody input[type=number]{min-height:42px;font-size:15px;}
@media (max-width: 430px){ #tHistory{display:none;} .pages-btn{font-size:12px;} }

/* ===== v1.2 lead: small-screen pass (tap targets >=44px, readable text) ===== */
.topbar{padding:0 2px;}
.topbar .ibtn{width:44px;}
#modalClose,#sheetClose,.sheet-head .ibtn.sm,.modal-head .ibtn.sm{width:44px;height:44px;}
.pages-btn{height:40px;min-width:44px;font-size:13px;}
@media (max-width:520px){ #tHistory{display:none!important;} .zoom-lbl{display:none!important;} }
@media (max-width:400px){ .topbar .ibtn{width:42px;} #tExport{min-width:44px;padding:0 10px;} #tExport span{display:none;} #tExport i, #tExport svg{margin:0!important;} }
.tool span{font-size:13px;}
.axnum .axl{font-size:14px;}
.kit-card .kit-d{font-size:13.5px;}
.chip{height:42px;}
.sw{width:42px;height:42px;}
.axb{width:44px;height:44px;}
.size-card{font-size:14px;}
.size-card small{font-size:12.5px;}
.modal-body input[type=checkbox], .sheet input[type=checkbox], #sheetBody input[type=checkbox]{width:26px;height:26px;}
.modal-body input[type=color], #sheetBody input[type=color]{min-height:44px;}
.hint{font-size:14px;}

.grid-items .gi.wide > div > svg{width:36px!important;height:36px!important;display:block;margin:0 auto;}
.grid-items .gi.wide > div > div{font-size:14px!important;}
.ih-x{min-width:44px;min-height:44px;}