/* Base colors + font */
.ikea-pfp{
  --navy:#0E1430; --navy-2:#0B122A; --ink:#EAF1FF; --green:#2FA34A; --green-2:#3BB255;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
}
.is-hidden { display:none !important; }

/* Topbar */
.ikea-pfp__topbar{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--navy); padding:16px 20px; border-radius:10px; margin-bottom:14px;
}
.ikea-pfp__left{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

.ikea-pfp__file input{ display:none; }
.ikea-pfp__btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border:0; border-radius:8px; cursor:pointer; font-weight:600;
  background:#21324F; color:#fff;
}
.ikea-pfp__btn--primary{ background:var(--green); }

/* Mode + Name */
.ikea-pfp__select-wrap, .ikea-pfp__name-wrap{
  display:flex; align-items:center; gap:6px; background:#1a2741; padding:6px 8px; border-radius:8px;
}
.ikea-pfp__label{ font-size:12px; opacity:.8; }
.ikea-pfp__select, .ikea-pfp__name{
  background:transparent; color:#fff; border:1px solid #2e4063; border-radius:6px; padding:6px 8px; outline:none;
}
.ikea-pfp__name{ width:200px; }

/* Right-side square zoom buttons */
.ikea-pfp__icons{ display:flex; gap:12px; }
.ikea-pfp__icon{
  width:44px; height:44px; border:0; border-radius:8px; cursor:pointer;
  background:var(--green-2) no-repeat center/20px;
}
.ikea-pfp__icon[data-action="zoomIn"]{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/><line x1='11' y1='8' x2='11' y2='14'/><line x1='8' y1='11' x2='14' y2='11'/></svg>");
}
.ikea-pfp__icon[data-action="zoomOut"]{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/><line x1='8' y1='11' x2='14' y2='11'/></svg>");
}

/* Stage (outer dark + inner white card) */
.ikea-pfp__stage-wrap{ background:#0C1026; padding:18px; border-radius:14px; }
.ikea-pfp__stage-card{
  background:#fff; border-radius:6px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.ikea-pfp__canvas{ width:min(100%, 980px); height:auto; display:block; background:#0B1022; }

/* Bottom */
.ikea-pfp__bottom{ margin-top:16px; display:flex; justify-content:flex-start; }

/* Hidden controls */
.ikea-pfp__controls-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Frame list */
.ikea-pfp__frame-list{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.ikea-pfp__frame-thumb{
  width:56px; height:56px; border-radius:6px; overflow:hidden; border:2px solid transparent;
  cursor:pointer; background:#121735; display:grid; place-items:center;
}
.ikea-pfp__frame-thumb img{ max-width:100%; max-height:100%; display:block; }
.ikea-pfp__frame-thumb.is-active{ border-color:var(--green); }