*{box-sizing:border-box}
:root{--red:#e60012;--blue:#0b84ff;--blue2:#0068d8;--ink:#111827;--muted:#667085;--line:#e6e9f0;--bg:#f4f6fb;--white:#fff;--green:#00a878}
html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at top left,#fff 0,#f7f8fc 40%,#edf1f7 100%);color:var(--ink)}
.hero{text-align:center;padding:26px 14px 10px}.logo{display:inline-block;color:var(--red);font-size:36px;font-weight:1000;letter-spacing:1px;transform:skew(-8deg);filter:drop-shadow(0 8px 14px #e6001230)}h1{margin:0;font-size:31px;letter-spacing:-.03em}.hero p{margin:6px 0 0;color:var(--muted);font-weight:800}
.layoutClean{display:flex;flex-direction:column;gap:28px;max-width:980px;margin:auto;padding:18px 18px 44px}.panel{width:100%;background:rgba(255,255,255,.96);border:1px solid #fff;border-radius:28px;box-shadow:0 20px 55px #10182814;backdrop-filter:blur(10px)}.block{border:1px solid var(--line);background:linear-gradient(180deg,#fff,#fbfcff);border-radius:24px;padding:18px}.blockTitle{display:block;margin:0 0 18px;font-size:22px;font-weight:1000}.mockupTitle{margin-bottom:14px}
.settingGrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}label{display:block;font-weight:900;font-size:14px}select{width:100%;margin-top:7px;padding:12px 13px;border:1px solid var(--line);border-radius:15px;background:#fff;font-weight:850;outline:none}select:focus{border-color:var(--blue);box-shadow:0 0 0 4px #0b84ff18}.sideTabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;max-width:520px}.sideTabs button{background:#eef2f7;color:#111;box-shadow:none}.sideTabs button.active{background:var(--red);color:#fff;box-shadow:0 9px 18px #e6001230}.hiddenFile{display:none}.info{margin-top:14px;font-size:13px;line-height:1.55;background:#f5f8fc;border:1px solid #e6ecf5;border-radius:18px;padding:13px;color:#344054}
button{border:0;border-radius:14px;padding:11px 13px;font-weight:1000;cursor:pointer;background:#111;color:#fff;box-shadow:0 8px 16px #10182814;transition:.15s transform,.15s filter}button:hover{transform:translateY(-1px);filter:brightness(1.05)}button:active{transform:translateY(0) scale(.985)}
.canvasCard{position:relative;max-width:768px;margin:auto;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 16px 38px #10182818}canvas{display:block;width:100%;height:auto;background:#fff;touch-action:none}.addArtworkBtn{position:absolute;width:54px;height:54px;border-radius:999px;padding:0;font-size:35px;line-height:49px;background:linear-gradient(135deg,var(--red),#b60010);color:#fff;box-shadow:0 12px 28px #0005;border:4px solid #fff;z-index:4;transform:translate(-50%,-50%)}.addArtworkBtn:hover{transform:translate(-50%,-50%) scale(1.06)}
.floatTools{position:absolute;z-index:5;display:none;flex-direction:row;align-items:center;justify-content:center;gap:8px;width:max-content;min-width:0;max-width:none;white-space:nowrap;flex-wrap:nowrap;background:#111;border-radius:18px;padding:8px 10px;box-shadow:0 14px 30px #0006;transform:translate(-50%,-120%);left:50%}.floatTools.show{display:flex!important}.floatTools button{display:inline-flex;align-items:center;justify-content:center;min-width:62px;height:38px;text-align:center;padding:9px 12px;font-size:12px;border-radius:12px;background:#fff;color:#111;box-shadow:none;white-space:nowrap}.floatTools .plusTool,.floatTools button[data-action="upload"]{min-width:42px;width:42px;background:var(--red)!important;color:#fff!important;font-size:18px!important;line-height:1!important}.floatTools button[data-action="delete"]{background:#b00020!important;color:#fff!important}.floatTools button[data-action="smaller"]{background:#eef2f7!important;color:#111!important}.floatTools button[data-action="bigger"]{background:var(--blue)!important;color:#fff!important}.floatTools button[data-action="center"]{min-width:88px;background:var(--green)!important;color:#fff!important}
.miniLabel{color:var(--muted);font-size:13px;font-weight:800;margin-bottom:10px}.quickTools,.alignGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quickTools button,.alignGrid button{background:#eef2f7;color:#111;box-shadow:none;border:1px solid #e2e7f0}.quickTools button:hover,.alignGrid button:hover{background:#e5eefb;color:#0756b4}.rangeGrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:12px 0 14px}input[type=range]{width:100%;accent-color:var(--red)}
.downloadBlock{display:grid!important;grid-template-columns:1fr!important;gap:24px!important;padding:20px!important}.downloadBlock button{width:100%;min-height:60px!important;text-align:center;font-size:15px!important;line-height:1.35!important;border-radius:16px!important;color:#fff!important}.downloadBlock .blueBtn,.blueBtn{background:linear-gradient(135deg,var(--blue),var(--blue2))!important;color:#fff!important}.downloadBlock .redBtn,.redBtn{background:linear-gradient(135deg,#ff2536,#d40011)!important;color:#fff!important}
@media(max-width:760px){.settingGrid,.rangeGrid{grid-template-columns:1fr}.layoutClean{padding:12px;gap:22px}.blockTitle{font-size:20px}.quickTools,.alignGrid{grid-template-columns:1fr}.floatTools{gap:6px;padding:7px;overflow:visible}.floatTools button{min-width:50px;padding:8px 9px;font-size:11px}.floatTools button[data-action="center"]{min-width:72px}.floatTools .plusTool{width:36px;min-width:36px}}


/* FINAL FIX: one real plus button, toolbar centered on one row, exact download colors */
.addArtworkBtn{display:none!important;pointer-events:none!important;visibility:hidden!important;}
.floatTools{
  display:none;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  white-space:nowrap!important;
  left:50%;
  transform:translate(-50%,-120%)!important;
  padding:8px 10px!important;
}
.floatTools.show{display:flex!important;}
.floatTools.noArtwork{display:flex!important;transform:translate(-50%,-50%)!important;}
.floatTools.noArtwork button:not(.plusTool){display:none!important;}
.floatTools button{display:inline-flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important;margin:0!important;}
.floatTools .plusTool{display:inline-flex!important;width:44px!important;min-width:44px!important;height:40px!important;background:#e60012!important;color:#fff!important;font-size:20px!important;}
.floatTools button[data-action="delete"]{background:#b00020!important;color:#fff!important;min-width:58px!important;}
.floatTools button[data-action="smaller"]{background:#eef2f7!important;color:#111!important;min-width:58px!important;}
.floatTools button[data-action="bigger"]{background:#0b84ff!important;color:#fff!important;min-width:68px!important;}
.floatTools button[data-action="center"]{background:#00a878!important;color:#fff!important;min-width:88px!important;}
.downloadBlock{display:grid!important;grid-template-columns:1fr!important;gap:22px!important;padding:22px!important;}
.downloadBlock button{width:100%!important;min-height:62px!important;margin:0!important;color:#fff!important;font-weight:1000!important;font-size:15px!important;}
.downloadBlock .blueBtn,#downloadFrontArtwork,#downloadBackArtwork{background:#0b84ff!important;background-image:linear-gradient(135deg,#0b84ff,#0068d8)!important;color:#fff!important;}
.downloadBlock .redBtn,#downloadMockup,#downloadAll{background:#e60012!important;background-image:linear-gradient(135deg,#ff2636,#d40011)!important;color:#fff!important;}

/* BUGFIX 2026-05-25: keep the good design, but make toolbar and default state reliable */
.floatTools{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  width:max-content!important;
  max-width:calc(100% - 24px)!important;
  white-space:nowrap!important;
  left:50%;
  z-index:8!important;
  transform:translate(-50%,-120%)!important;
}
.floatTools.noArtwork{transform:translate(-50%,-50%)!important;}
.floatTools button{display:inline-flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important;flex:0 0 auto!important;margin:0!important;}
.floatTools .plusTool{display:inline-flex!important;width:44px!important;min-width:44px!important;height:40px!important;background:#e60012!important;color:#fff!important;font-size:20px!important;}
.floatTools button[data-action="delete"]{background:#b00020!important;color:#fff!important;min-width:58px!important;}
.floatTools button[data-action="smaller"]{background:#eef2f7!important;color:#111!important;min-width:58px!important;}
.floatTools button[data-action="bigger"]{background:#0b84ff!important;color:#fff!important;min-width:68px!important;}
.floatTools button[data-action="center"]{background:#00a878!important;color:#fff!important;min-width:88px!important;}
.floatTools button:disabled{opacity:.45!important;filter:grayscale(.1);cursor:not-allowed!important;transform:none!important;}
.downloadBlock{gap:24px!important;}
#downloadFrontArtwork,#downloadBackArtwork{background:linear-gradient(135deg,#0b84ff,#0068d8)!important;color:#fff!important;}
#downloadMockup,#downloadAll{background:linear-gradient(135deg,#ff2636,#d40011)!important;color:#fff!important;}