/* ── Frontend Editor CSS (scoped) ───────────────────────── */
.pcat-fe-wrap { --fe-accent:#E8622A; --fe-accent-dark:#c9521f; --fe-accent-light:#fff3ee; --fe-border:#ddd; --fe-bg:#f5f5f5; --fe-card:#fff; --fe-text:#1a1a1a; --fe-muted:#666; --fe-radius:8px; font-family:'Segoe UI','Helvetica Neue',Arial,sans-serif; font-size:14px; color:var(--fe-text); }

/* ── Login ── */
.pcat-fe-login-outer { display:flex; align-items:center; justify-content:center; min-height:420px; padding:24px; }
.pcat-fe-login-card { background:var(--fe-card); border:1px solid var(--fe-border); border-radius:12px; padding:36px 32px; width:100%; max-width:380px; box-shadow:0 4px 24px rgba(0,0,0,.1); }
.pcat-fe-login-icon { font-size:44px; text-align:center; margin-bottom:10px; }
.pcat-fe-login-card h2 { text-align:center; font-size:1.3rem; font-weight:800; margin-bottom:4px; }
.pcat-fe-login-sub { text-align:center; color:var(--fe-muted); margin-bottom:22px; font-size:13px; }
.pcat-fe-form-group { margin-bottom:14px; }
.pcat-fe-form-group label { display:block; font-size:12px; font-weight:700; color:var(--fe-muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:.4px; }
.pcat-fe-form-group input { width:100%; border:1px solid var(--fe-border); border-radius:6px; padding:9px 12px; font-size:14px; font-family:inherit; box-sizing:border-box; }
.pcat-fe-form-group input:focus { border-color:var(--fe-accent); outline:none; box-shadow:0 0 0 3px rgba(232,98,42,.12); }
.pcat-fe-alert { padding:10px 14px; border-radius:6px; font-size:13px; margin-bottom:14px; background:#fde8e8; border-left:4px solid #cc0000; color:#900; }

/* ── Buttons ── */
.pcat-fe-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:6px; cursor:pointer; font-weight:600; border:none; font-size:13px; font-family:inherit; transition:all .15s; white-space:nowrap; }
.pcat-fe-btn-primary { background:var(--fe-accent); color:#fff; }
.pcat-fe-btn-primary:hover { background:var(--fe-accent-dark); }
.pcat-fe-btn-secondary { background:#fff; color:var(--fe-text); border:1px solid var(--fe-border); }
.pcat-fe-btn-secondary:hover { background:#f5f5f5; }
.pcat-fe-btn-outline { background:transparent; color:var(--fe-accent); border:1px solid var(--fe-accent); }
.pcat-fe-btn-outline:hover { background:var(--fe-accent-light); }
.pcat-fe-btn-ghost { background:transparent; color:var(--fe-muted); border:1px solid transparent; }
.pcat-fe-btn-ghost:hover { color:#cc0000; }
.pcat-fe-btn-sm { padding:5px 10px; font-size:12px; }
.pcat-fe-btn-full { width:100%; justify-content:center; }
.hidden { display:none !important; }

/* ── Topbar ── */
.pcat-fe-topbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; background:#1e1e2e; color:#fff; padding:12px 18px; border-radius:var(--fe-radius) var(--fe-radius) 0 0; }
.pcat-fe-topbar-title { font-weight:700; font-size:15px; }
.pcat-fe-topbar-right { display:flex; gap:8px; }
.pcat-fe-topbar .pcat-fe-btn-ghost { color:#aaa; }
.pcat-fe-topbar .pcat-fe-btn-ghost:hover { color:#ff9b7a; background:rgba(255,255,255,.08); }

/* ── Editor wrap ── */
.pcat-fe-editor { border:1px solid var(--fe-border); border-radius:var(--fe-radius); overflow:hidden; }

/* ── Notice ── */
.pcat-fe-notice { padding:10px 16px; font-weight:600; font-size:13px; }
.pcat-fe-notice.ok  { background:#edf7ed; border-left:4px solid #46a049; color:#2a6b2b; }
.pcat-fe-notice.err { background:#fde8e8; border-left:4px solid #cc0000; color:#900; }

/* ── Toolbar ── */
.pcat-fe-toolbar { display:flex; align-items:center; gap:12px; padding:12px 16px; background:#fafafa; border-bottom:1px solid var(--fe-border); }
.pcat-fe-hint { font-size:12px; color:#aaa; }

/* ── Groups ── */
#pcat-fe-groups { display:flex; flex-direction:column; gap:10px; padding:14px 16px; background:var(--fe-bg); }
.pcat-fe-group { background:var(--fe-card); border:1px solid var(--fe-border); border-radius:var(--fe-radius); overflow:hidden; }
.pcat-fe-group.dragging { opacity:.5; }
.pcat-fe-group-over { border:2px dashed var(--fe-accent); background:var(--fe-accent-light); }

/* ── Group header ── */
.pcat-fe-group-header { display:flex; align-items:center; gap:8px; padding:10px 14px; background:#fafafa; border-bottom:1px solid #eee; }
.pcat-fe-drag { cursor:grab; font-size:16px; color:#bbb; flex-shrink:0; user-select:none; }
.pcat-fe-drag:active { cursor:grabbing; }
.pcat-fe-group-title { flex:1; border:none; background:transparent; font-size:15px; font-weight:700; padding:2px 6px; border-radius:4px; font-family:inherit; }
.pcat-fe-group-title:focus { background:#fff; border:1px solid var(--fe-accent); outline:none; }
.pcat-fe-toggle { border:none; background:none; cursor:pointer; font-size:13px; color:#888; transition:transform .2s; padding:4px; }
.pcat-fe-toggle.collapsed { transform:rotate(-90deg); }
.pcat-fe-del-group { border:none; background:none; cursor:pointer; color:#ccc; font-size:16px; padding:2px 6px; }
.pcat-fe-del-group:hover { color:#cc0000; }

/* ── Group body ── */
.pcat-fe-group-body { padding:14px 16px; }
.pcat-fe-meta { background:var(--fe-accent-light); border:1px solid #f5d0bc; border-radius:6px; padding:12px 14px; margin-bottom:12px; display:flex; flex-direction:column; gap:10px; }
.pcat-fe-meta-row { display:flex; align-items:flex-start; gap:12px; }
.pcat-fe-meta-row label { font-size:12px; font-weight:700; color:var(--fe-muted); min-width:110px; padding-top:5px; text-transform:uppercase; letter-spacing:.4px; }
.pcat-fe-group-desc { flex:1; border:1px solid var(--fe-border); border-radius:4px; padding:5px 8px; resize:vertical; font-family:inherit; font-size:13px; }
.pcat-fe-group-desc:focus { border-color:var(--fe-accent); outline:none; }
.pcat-fe-img-field { flex:1; display:flex; flex-direction:column; gap:6px; }
.pcat-fe-img-preview { max-height:80px; max-width:200px; border-radius:4px; border:1px solid #ddd; object-fit:cover; }
.pcat-fe-img-actions { display:flex; gap:6px; align-items:center; }

/* ── Items ── */
.pcat-fe-items-head { display:grid; grid-template-columns:24px 1fr 110px 56px 30px; gap:6px; padding:5px 6px; background:#f5f5f5; border-radius:4px; font-size:11px; font-weight:700; color:#aaa; text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.pcat-fe-items { display:flex; flex-direction:column; gap:3px; min-height:4px; }
.pcat-fe-item { display:grid; grid-template-columns:24px 1fr 110px 56px 30px; gap:6px; align-items:center; padding:4px 6px; background:#f9f9f9; border:1px solid #eee; border-radius:5px; }
.pcat-fe-item:hover { border-color:#ddd; background:#fff; }
.pcat-fe-item.dragging { opacity:.4; }
.pcat-fe-item-drag { cursor:grab; font-size:13px; color:#ccc; text-align:center; user-select:none; }
.pcat-fe-item-drag:active { cursor:grabbing; }
.pcat-fe-item-name { border:1px solid #ddd; border-radius:4px; padding:5px 8px; font-size:13px; font-family:inherit; width:100%; }
.pcat-fe-item-name:focus { border-color:var(--fe-accent); outline:none; }
.pcat-fe-price-wrap { display:flex; align-items:center; gap:4px; }
.pcat-fe-item-price { border:1px solid #ddd; border-radius:4px; padding:5px 6px; font-size:13px; font-weight:700; color:var(--fe-accent); text-align:right; width:100%; font-family:inherit; }
.pcat-fe-item-price:focus { border-color:var(--fe-accent); outline:none; }
.pcat-fe-price-wrap > span { font-size:13px; font-weight:700; color:var(--fe-accent); }
.pcat-fe-item-img-wrap { display:flex; justify-content:center; }
.pcat-fe-item-img-btn { border:1px dashed #ccc; border-radius:4px; background:#fff; cursor:pointer; width:46px; height:34px; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:0; font-size:16px; color:#bbb; }
.pcat-fe-item-img-btn:hover { border-color:var(--fe-accent); }
.pcat-fe-item-img-btn.has-img { border-style:solid; border-color:#ddd; }
.pcat-fe-item-img-btn img { width:46px; height:34px; object-fit:cover; }
.pcat-fe-del-item { border:none; background:none; cursor:pointer; color:#ccc; font-size:15px; }
.pcat-fe-del-item:hover { color:#cc0000; }
.pcat-fe-add-item { margin-top:10px; }

/* ── Bottom bar ── */
.pcat-fe-bottom-bar { display:flex; justify-content:space-between; padding:12px 16px; background:#fafafa; border-top:1px solid var(--fe-border); }

/* ── Mobile ── */
@media(max-width:600px){
  .pcat-fe-items-head,.pcat-fe-item { grid-template-columns:20px 1fr 80px 44px 28px; }
  .pcat-fe-meta-row { flex-direction:column; }
  .pcat-fe-meta-row label { min-width:auto; }
  .pcat-fe-topbar { border-radius:0; }
}