.t180-pfp-wrap{ width:100%; max-width: 100%; }
.t180-pfp-toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin: 8px 0 10px;
}
.t180-btn{
  appearance:none;
  border: 2px solid #1d4ed8;
  background: #1d4ed8;
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor:pointer;
}
.t180-btn:active{ transform: translateY(1px); }
.t180-btn:focus{ outline: 3px solid rgba(29,78,216,.35); outline-offset: 2px; }

.t180-pfp-stage{
  position: relative;
  width: 100%;
  height: min(70vh, 720px);
  border: 2px solid rgba(0,0,0,.1);
  border-radius: 14px;
  background: #f8fafc;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: none;
}

.t180-pfp-item{
  position:absolute;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.t180-pfp-item img{
  width:100%;
  height:100%;
  object-fit: fill;
  display:block;
  pointer-events:none;
  background: transparent;
  box-shadow: none;
}
.t180-pfp-item.is-flash img{
  box-shadow: none;
}
.t180-pfp-rot{
  position:absolute;
  width:12px;
  height:12px;
  left:50%;
  top:-8px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#2563eb;
  cursor:grab;
  z-index:4;
}
.t180-pfp-hint{
  margin-top: 8px;
  font-size: 14px;
  color: rgba(0,0,0,.65);
  min-height: 20px;
}


.t180-pfp-scale-wrap{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border: 2px solid #1d4ed8;
  border-radius: 10px;
  padding: 8px 10px;
  background: #ffffff;
}
.t180-pfp-scale-label{
  font-weight: 800;
  color: #1d4ed8;
  font-size: 14px;
}
.t180-pfp-flashscale{
  border: 2px solid #1d4ed8;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 16px;
  font-weight: 800;
  color: #1d4ed8;
  background: #ffffff;
}


.t180-pfp-flashmode{
  display:inline-flex;
  gap:6px;
  align-items:center;
}
.t180-btn--seg{
  padding: 10px 12px;
  border-radius: 999px;
  background: #ffffff;
  color: #1d4ed8;
}
.t180-btn--seg.is-active{
  background: #1d4ed8;
  color: #ffffff;
}
.t180-pfp-flashnav{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-top: 10px;
}
.t180-btn--nav{
  padding: 12px 18px;
  border-radius: 999px;
}


.t180-pfp-eq{
  position:absolute;
  left: 8%;
  right: 8%;
  bottom: 10px;
  height: 56px;
  width: 84%;
  opacity: 0.9;
  pointer-events:none;
}

.t180-pfp-done{
  position: fixed;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  padding: 14px 22px;
  border-radius: 999px;
  background: rgba(0,0,0,.75);
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  z-index: 999999;
  animation: t180Pop .9s ease both;
}
@keyframes t180Pop{
  0%{ transform: translateX(-50%) scale(.7); opacity:0; }
  20%{ opacity:1; transform: translateX(-50%) scale(1.05); }
  100%{ opacity:0; transform: translateX(-50%) scale(1); }
}
.t180-snap{
  outline: 4px solid rgba(255, 215, 0, .8);
  outline-offset: 2px;
}


/* Gentle (soft) toolbar style */
.t180-pfp-toolbar.t180-soft{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.t180-pfp-toolbar.t180-soft .t180-btn{
  background: #2fb7c8;
  border: 0;
  color: #fff;
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 800;
  display:inline-flex;
  align-items:center;
  gap:8px;
  line-height: 1;
  box-shadow: 0 6px 14px rgba(0,0,0,.10);
}
.t180-pfp-toolbar.t180-soft .t180-btn:hover{ filter: brightness(0.98); }
.t180-pfp-toolbar.t180-soft .t180-btn:active{ transform: translateY(1px); }
.t180-pfp-toolbar.t180-soft .t180-ico{ font-size: 18px; }
.t180-pfp-toolbar.t180-soft .t180-txt{ font-size: 15px; white-space: nowrap; }

.t180-pfp-toolbar.t180-soft .t180-btn--seg{
  background: #34c2d3;
  border-radius: 14px;
  box-shadow: none;
}
.t180-pfp-toolbar.t180-soft .t180-btn--seg.is-active{
  background: #1ea2b3;
}

.t180-pfp-scale-wrap{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(47,183,200,.14);
}
.t180-pfp-scale-label{ font-weight: 800; }
.t180-pfp-flashscale{
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  padding: 6px 10px;
}


/* Flashcard: allow toggling the blue handle (rotation dot) */
.t180-pfp-item.t180-hide-handles .t180-pfp-rot{ display:none !important; }


/* Hide "frame" + blue handle: show image only */
.t180-pfp-item.t180-hide-handles .t180-pfp-rot{ display:none !important; }
/* images always transparent (PNG support) */


/* Provide a larger workspace so front stage can scroll vertically/horizontally */
.t180-pfp-stage::after{
  content:'';
  display:block;
  width: 1600px;
  height: 1400px;
}

/* Mobile/touch: ensure toolbar stays clickable above stage */
.t180-pfp-toolbar{ position: relative; z-index: 20; }
.t180-pfp-stage{ position: relative; z-index: 1; }
.t180-btn{ touch-action: manipulation; }

.t180-pfp-wrap{ position: relative; }

/* Ensure toolbar stays clickable on mobile */
.t180-pfp-toolbar{ pointer-events:auto; }


.t180-pfp-item img.is-flipped{
  transform: scaleX(-1);
}

.t180-pfp-flip{
  position:absolute;
  left:-8px;
  top:-8px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#16a34a;
  cursor:pointer;
  z-index:4;
  font-size:0;
}

.t180-pfp-item.t180-hide-handles .t180-pfp-flip{
  display:none;
}

/* resize dot: bottom-right */
.t180-pfp-resize{
  position:absolute;
  width:12px;
  height:12px;
  right:-6px;
  bottom:-6px;
  border-radius:50%;
  background:#2563eb;
  cursor:nwse-resize;
  z-index:4;
}
.t180-pfp-item.t180-hide-handles .t180-pfp-resize{
  display:none;
}