/* Inkpetal Card Editor – standalone editor screen styles */
@font-face{font-family:"Poppins";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/poppins-regular.woff) format("woff")}
@font-face{font-family:"Poppins";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/poppins-medium.woff) format("woff")}
@font-face{font-family:"Poppins";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/poppins-bold.woff) format("woff")}
@font-face{font-family:"Poppins";font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/poppins-italic.woff) format("woff")}
@font-face{font-family:"Lora";font-weight:400 700;font-style:normal;font-display:swap;src:url(../fonts/lora-variable.woff) format("woff")}
@font-face{font-family:"Lora";font-weight:400 700;font-style:italic;font-display:swap;src:url(../fonts/lora-italic-variable.woff) format("woff")}

html,body.ipce-body-wrap{height:100%;margin:0}
body.ipce-body-wrap{overflow:hidden;background:#f4f2f9}
.ipce{--ink:#2b2440;--muted:#6b6780;--line:#e6e2f0;--accent:#6c5ce7;--accent-d:#5847d6;--rose:#f0607f;--bg:#f4f2f9;
	position:fixed;inset:0;display:flex;flex-direction:column;font:14px/1.45 "Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);-webkit-tap-highlight-color:transparent}
.ipce *,.ipce *::before,.ipce *::after{box-sizing:border-box}
.ipce [hidden]{display:none!important}
.ipce button,.ipce input,.ipce select{font:inherit;color:inherit}
.ipce button{cursor:pointer}
.ipce-ic{width:20px;height:20px;flex:none}

/* top bar */
.ipce-top{display:flex;align-items:center;gap:12px;height:56px;padding:0 14px;background:#fff;border-bottom:1px solid var(--line);flex:none}
.ipce-brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:16px;color:var(--ink);text-decoration:none}
.ipce-brand svg{width:26px;height:26px}
.ipce-title{flex:1;min-width:0;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:12px;border-left:1px solid var(--line)}
.ipce-actions{display:flex;align-items:center;gap:6px}
.ipce-tb{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:0;border-radius:9px;background:transparent;flex:none}
.ipce-tb:hover{background:#f0edf9}
.ipce-tb.on{background:#e7e2fb;color:var(--accent-d)}
.ipce-tb:disabled{opacity:.35;cursor:default;background:transparent}
.ipce-zoom{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;margin:0 4px}
.ipce-zoomval{border:0;background:none;min-width:48px;font-size:12px;font-weight:500;padding:0}
.ipce-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:#fff;font-weight:500;text-decoration:none;color:var(--ink);white-space:nowrap}
.ipce-btn:hover{border-color:#cfc8e6;background:#faf9fe}
.ipce-primary{background:var(--rose);border-color:var(--rose);color:#fff}
.ipce-primary:hover{background:#e04e6f;border-color:#e04e6f}
.ipce-btn:disabled{opacity:.6;cursor:progress}
.ipce-block{width:100%;height:46px;font-size:15px}
.ipce-link{border:0;background:none;padding:0;color:var(--accent-d);text-decoration:underline;font-weight:500}

/* layout */
.ipce-body{flex:1;display:flex;min-height:0}
.ipce-tabs{width:76px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px;padding:8px 6px;flex:none}
.ipce-tabs button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 2px;border:0;border-radius:10px;background:none;font-size:11px;color:var(--muted)}
.ipce-tabs button:hover{background:#f6f4fc}
.ipce-tabs button.on{background:#efeafd;color:var(--accent-d);font-weight:500}
.ipce-panel{width:292px;background:#fff;border-right:1px solid var(--line);padding:18px 16px;overflow-y:auto;flex:none;position:relative}
.ipce-panel h2{font-size:16px;margin:0 0 14px}
.ipce-panel h3{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:16px 0 8px}
.ipce-panel-close{display:none}
.ipce-hint{color:var(--muted);font-size:12.5px;margin:14px 0 0}
.ipce-add-text{display:block;width:100%;text-align:left;border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px 14px;margin-bottom:8px}
.ipce-add-text:hover{border-color:var(--accent);background:#faf9fe}
.ipce-add-text.t1{font:700 22px "Lora",serif}
.ipce-add-text.t2{font-size:16px;font-weight:500}
.ipce-add-text.t3{font-size:13px}
.ipce-upload{display:flex;flex-direction:column;align-items:center;gap:4px;padding:20px 12px;border:1.5px dashed #cfc8e6;border-radius:14px;background:#faf9fe;text-align:center;cursor:pointer;position:relative}
.ipce-upload:hover{border-color:var(--accent);background:#f3effe}
.ipce-upload span{color:var(--muted);font-size:12px}
.ipce-upload input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.ipce-upload.small{padding:14px 12px;margin:14px 0 10px}
.ipce-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.ipce-stickers,.ipce-shapes{margin-top:0}
.ipce-tile{aspect-ratio:1;border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px;display:flex;align-items:center;justify-content:center}
.ipce-tile:hover{border-color:var(--accent);background:#faf9fe;transform:translateY(-1px)}
.ipce-tile svg{width:100%;height:100%;overflow:visible}
.ipce-tile.photo{padding:0;overflow:hidden}
.ipce-tile.photo img{width:100%;height:100%;object-fit:cover}
.ipce-swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.ipce-swatch{aspect-ratio:1;border-radius:50%;border:1px solid rgba(43,36,64,.16);padding:0}
.ipce-swatch:hover{transform:scale(1.1)}
.ipce-row{display:flex;align-items:center;justify-content:space-between;margin-top:16px;font-weight:500}
.ipce input[type=color]{width:36px;height:36px;padding:2px;border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer;flex:none}
.ipce-size{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1px solid var(--line);border-radius:12px;background:#fff;padding:9px 12px;margin-bottom:6px}
.ipce-size:hover,.ipce-size.on{border-color:var(--accent);background:#faf9fe}
.ipce-size.on{box-shadow:inset 0 0 0 1px var(--accent)}
.ipce-size i{display:block;width:auto;height:34px;max-width:44px;background:#e7e2fb;border:1px solid #cfc8e6;border-radius:3px;flex:none}
.ipce-size span{display:flex;flex-direction:column;min-width:0}
.ipce-size em{font-style:normal;font-size:11.5px;color:var(--muted)}

.ipce-fx{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ipce-fxbtn{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:10px 12px;text-align:left;font-size:13px}
.ipce-fxbtn i{width:14px;height:14px;border-radius:50%;flex:none;border:1px solid rgba(43,36,64,.15)}
.ipce-fxbtn:hover,.ipce-fxbtn.on{border-color:var(--accent);background:#faf9fe}
.ipce-fxbtn.on{box-shadow:inset 0 0 0 1px var(--accent);font-weight:500}
.ipce-row input[type=range]{width:150px;accent-color:var(--accent)}
/* main / toolbar / stage */
.ipce-main{flex:1;min-width:0;display:flex;flex-direction:column}
.ipce-toolbar{display:flex;align-items:center;gap:4px;height:52px;padding:0 12px;background:#fff;border-bottom:1px solid var(--line);flex:none;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.ipce-toolbar .ipce-tb{width:32px;height:34px}
.ipce-tb-hint{color:var(--muted);white-space:nowrap}
.ipce-group{display:inline-flex;align-items:center;gap:3px;padding-right:6px;margin-right:2px;border-right:1px solid var(--line);flex:none}
.ipce-group:last-child{border-right:0}
.ipce-toolbar select{height:36px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:0 6px;max-width:132px}
.ipce-num{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:9px}
.ipce-num .ipce-tb{width:28px;height:34px}
.ipce-num input{width:44px;height:34px;border:0;text-align:center;background:none;-moz-appearance:textfield;appearance:textfield;padding:0}
.ipce-num input::-webkit-inner-spin-button{-webkit-appearance:none}
.ipce-mini{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--muted);white-space:nowrap;margin:0 2px}
.ipce-mini input[type=number]{width:50px;height:34px;border:1px solid var(--line);border-radius:9px;padding:0 6px;color:var(--ink)}
.ipce-mini input[type=range]{width:64px;accent-color:var(--accent)}
.ipce-stage{flex:1;min-height:0;overflow:auto;display:flex;position:relative}
.ipce-holder{position:relative;margin:auto;line-height:0}
.ipce-canvas{display:block;touch-action:none}
.ipce-textedit{display:none;position:absolute;z-index:5;margin:0;padding:1px;border:0;outline:0;background:transparent;resize:none;overflow:hidden;white-space:pre-wrap;word-break:normal;overflow-wrap:normal;caret-color:var(--accent);border-radius:0;box-shadow:none}

/* modals + toast */
.ipce-modal{position:fixed;inset:0;z-index:50;background:rgba(43,36,64,.5);display:flex;align-items:center;justify-content:center;padding:16px}
.ipce-dialog{position:relative;background:#fff;border-radius:20px;padding:26px;width:100%;max-width:440px;max-height:calc(100vh - 32px);overflow:auto;box-shadow:0 24px 70px rgba(43,36,64,.3)}
.ipce-dialog.wide{max-width:720px}
.ipce-dialog h2{margin:0 0 14px;font:700 22px "Lora",serif}
.ipce-dialog p{color:var(--muted);margin:0 0 6px}
.ipce-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border:0;border-radius:50%;background:#f4f2f9;display:flex;align-items:center;justify-content:center}
.ipce-dialog fieldset{border:0;padding:0;margin:0 0 14px}
.ipce-dialog legend{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:8px;padding:0}
.ipce-choice{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:9px 12px;margin-bottom:6px;cursor:pointer}
.ipce-choice:has(input:checked){border-color:var(--accent);background:#faf9fe;box-shadow:inset 0 0 0 1px var(--accent)}
.ipce-choice input{accent-color:var(--accent);width:16px;height:16px;margin:0}
.ipce-choice span{display:flex;flex-direction:column}
.ipce-choice em{font-style:normal;font-size:12px;color:var(--muted)}
.ipce-dialog-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.ipce-preview{background:var(--bg);border-radius:14px;padding:18px;text-align:center}
.ipce-preview img{max-width:100%;max-height:62vh;box-shadow:0 10px 30px rgba(43,36,64,.18)}
.ipce-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;background:var(--ink);color:#fff;padding:12px 18px;border-radius:14px;max-width:calc(100vw - 32px);box-shadow:0 10px 30px rgba(43,36,64,.3)}
.ipce-toast .ipce-link,.ipce-toast a{color:#ffd0da;margin-left:8px}
.ipce-btn.busy span::after{content:"…"}

/* tablet / mobile */
@media (max-width:860px){
	.ipce-title,.ipce-brand span,.ipce-zoom,.ipce-btn[data-act=preview] span,.ipce-btn[data-act=save-template] span{display:none}
	.ipce-top{gap:6px;padding:0 10px}
	.ipce-actions{flex:1;justify-content:flex-end}
	.ipce-btn{padding:0 12px}
	.ipce-body{flex-direction:column-reverse;position:relative}
	.ipce-tabs{width:100%;flex-direction:row;border-right:0;border-top:1px solid var(--line);padding:4px 6px calc(4px + env(safe-area-inset-bottom));justify-content:space-around;z-index:21}
	.ipce-tabs button{flex:1;padding:6px 2px;font-size:10.5px}
	.ipce-panel{position:absolute;left:0;right:0;bottom:60px;width:auto;max-height:56%;border-right:0;border-top:1px solid var(--line);border-radius:18px 18px 0 0;box-shadow:0 -12px 40px rgba(43,36,64,.16);z-index:20;display:none;padding-top:16px}
	.ipce.panel-open .ipce-panel{display:block}
	.ipce-panel-close{display:flex;position:absolute;top:10px;right:10px;width:34px;height:34px;border:0;border-radius:50%;background:#f4f2f9;align-items:center;justify-content:center}
	.ipce-grid{grid-template-columns:repeat(5,1fr)}
	.ipce-swatches{grid-template-columns:repeat(10,1fr)}
	.ipce-toolbar{padding:0 8px;height:46px;scrollbar-width:none}
	.ipce-tb-hint{font-size:12.5px}
	.ipce-dialog{padding:20px}
}
@media (prefers-reduced-motion:no-preference){
	.ipce-tile,.ipce-swatch,.ipce-btn,.ipce-tb{transition:transform .12s,background-color .12s,border-color .12s}
}