.fe-overlay{
  position:fixed; inset:0; background:rgba(20,18,10,.55); backdrop-filter: blur(2px);
  display:none; align-items:center; justify-content:center; z-index:999; padding:16px;
}
.fe-overlay.fe-open{ display:flex; }

.fe-modal{
  background:#FDFCF7; border-radius:20px; width:100%; max-width:960px; max-height:92vh;
  display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.35);
}

.fe-header{
  display:flex; align-items:center; justify-content:space-between; padding:14px 20px;
  border-bottom:2px solid var(--line);
}
.fe-title{ font-weight:800; font-size:16px; }
.fe-close{
  border:none; background:transparent; font-size:18px; cursor:pointer; width:32px; height:32px;
  border-radius:8px;
}
.fe-close:hover{ background:#eee; }

/* ---------- layout utama: rail ikon | panel | kanvas ---------- */
.fe-body{ display:flex; flex:1; overflow:hidden; min-height:0; }

.fe-rail{
  flex:0 0 76px; background:#F3F1E7; border-right:2px solid var(--line);
  display:flex; flex-direction:column; align-items:stretch; padding:10px 6px; gap:4px; overflow-y:auto;
}
.fe-rail-btn{
  display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 2px;
  border:none; background:transparent; border-radius:12px; cursor:pointer;
}
.fe-rail-btn:hover{ background:#fff; }
.fe-rail-btn.active{ background: var(--vlux); }
.fe-rail-icon{ font-size:20px; line-height:1; }
.fe-rail-label{ font-size:10px; font-weight:700; }

.fe-panel{
  flex:0 0 240px; padding:16px; overflow-y:auto; border-right:2px solid var(--line);
}
.fe-panel-title{ font-weight:800; font-size:13px; margin-bottom:10px; }
.fe-panel-sub{ font-size:12px; color:rgba(26,26,30,.6); margin:12px 0 6px; }
.fe-panel-hint{ font-size:12px; color:rgba(26,26,30,.55); margin-top:12px; line-height:1.5; }

.fe-panel input[type=text]{
  width:100%; padding:9px 10px; border-radius:8px; border:2px solid var(--line); font-family:'Inter'; font-size:13px;
}
.fe-panel input[type=color]{ width:100%; height:38px; border-radius:8px; border:2px solid var(--line); padding:2px; }
.fe-panel input[type=range]{ width:100%; }

.fe-canvas-area{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:18px; gap:10px; min-width:0; }
.fe-canvas-checker{
  position:relative;
  background-image:
    linear-gradient(45deg,#e9e9e4 25%,transparent 25%),
    linear-gradient(-45deg,#e9e9e4 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#e9e9e4 75%),
    linear-gradient(-45deg,transparent 75%,#e9e9e4 75%);
  background-size:16px 16px;
  background-position:0 0, 0 8px, 8px -8px, -8px 0px;
  border-radius:12px; border:2px solid var(--line); overflow:visible; line-height:0;
}
.fe-canvas-checker canvas{ display:block; cursor:grab; touch-action:none; border-radius:10px; }
.fe-canvas-hint{ font-size:12px; color:rgba(26,26,30,.55); text-align:center; max-width:300px; }

/* ---------- tema (thumbnail warna) ---------- */
.fe-theme-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.fe-theme-btn{
  border:2px solid var(--line); border-radius:10px; height:64px; cursor:pointer;
  display:flex; align-items:flex-end; padding:0; overflow:hidden; position:relative;
}
.fe-theme-btn:hover{ border-color: var(--ink); transform: scale(1.02); }
.fe-theme-name{
  font-size:10.5px; font-weight:800; color:#fff; background:rgba(0,0,0,.45);
  width:100%; padding:4px 6px; text-align:left; line-height:1.25;
}

/* ---------- swatch gradasi latar ---------- */
.fe-swatch-row{ display:flex; gap:8px; flex-wrap:wrap; }
.fe-swatch{ width:32px; height:32px; border-radius:8px; cursor:pointer; border:2px solid var(--line); }
.fe-swatch:hover{ border-color: var(--ink); }

/* ---------- tombol ikon (susunan foto / gaya garis) ---------- */
.fe-icon-btn-row{ display:flex; gap:8px; flex-wrap:wrap; }
.fe-icon-btn{
  flex:1 1 30%; display:flex; flex-direction:column; align-items:center; gap:4px;
  border:2px solid var(--line); background:#fff; border-radius:10px; padding:10px 4px;
  font-size:17px; cursor:pointer;
}
.fe-icon-btn span{ font-size:10px; font-weight:700; }
.fe-icon-btn:hover{ border-color: var(--ink); }
.fe-icon-btn.active{ border-color: var(--ink); background: var(--vlux); }

.fe-inline-row{ display:flex; align-items:center; gap:10px; }

/* ---------- chip efek ---------- */
.fe-chip-row{ display:flex; gap:8px; flex-wrap:wrap; }
.fe-chip{
  border:2px solid var(--line); background:#fff; border-radius:100px; padding:7px 13px;
  font-size:12px; font-weight:700; cursor:pointer;
}
.fe-chip:hover{ border-color: var(--ink); }
.fe-chip.active{ border-color: var(--ink); background: var(--vlux); }

/* ---------- stiker ---------- */
.fe-sticker-palette{ display:flex; flex-wrap:wrap; gap:6px; }
.fe-sticker-btn{
  width:38px; height:38px; border-radius:8px; border:2px solid var(--line); background:#fff;
  font-size:19px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.fe-sticker-btn:hover{ border-color: var(--ink); background: var(--vlux); }

.fe-mini-btn{
  border:2px solid var(--line); background:#fff; border-radius:8px; padding:9px 12px;
  font-size:13px; font-weight:700; cursor:pointer;
}
.fe-mini-btn:hover{ border-color: var(--ink); background: var(--vlux); }

/* ---------- toolbar mengambang di atas elemen terpilih ---------- */
.fe-floating-toolbar{
  position:absolute; transform: translate(-50%, -100%);
  background:#1A1A1E; border-radius:10px; padding:6px; display:none; align-items:center; gap:4px;
  box-shadow:0 6px 18px rgba(0,0,0,.3); z-index:5; white-space:nowrap;
}
.fe-ftb-btn{
  width:28px; height:28px; border-radius:7px; border:none; background:#2E2E33; color:#fff;
  font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.fe-ftb-btn:hover{ background:#3D3D44; }
.fe-ftb-delete{ background:#7A2020; }
.fe-ftb-delete:hover{ background:#932828; }
.fe-ftb-rotate{ width:70px; }
.fe-ftb-color{ width:28px; height:28px; border-radius:7px; border:none; padding:0; }

.fe-footer{
  display:flex; justify-content:flex-end; gap:12px; padding:14px 20px; border-top:2px solid var(--line);
}

@media (max-width: 760px){
  .fe-body{ flex-direction:column; overflow-y:auto; }
  .fe-rail{ flex-direction:row; flex:0 0 auto; overflow-x:auto; border-right:none; border-bottom:2px solid var(--line); }
  .fe-rail-btn{ flex:0 0 auto; flex-direction:row; padding:8px 12px; }
  .fe-panel{ flex:0 0 auto; border-right:none; border-bottom:2px solid var(--line); max-height:220px; }
  .fe-canvas-area{ padding:14px; }
}