:root{
  --dhfd-bg:#f5f7fb;
  --dhfd-panel:#ffffff;
  --dhfd-border:#e6eaf2;
  --dhfd-text:#1b2430;
  --dhfd-muted:#6b7a90;
  --dhfd-accent:#4f8cff;
  --dhfd-radius:14px;
}

.dhfd-embed{ width:100%; }
.dhfd-shell{ position:relative; width:100%; min-height:560px; background:var(--dhfd-bg); border:1px solid var(--dhfd-border); border-radius:18px; overflow:hidden; }
.dhfd-loading{ position:absolute; inset:0; display:flex; align-items:flex-start; justify-content:flex-start; padding:16px; color:var(--dhfd-muted); font:14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial; }

.dhfd-app{ display:flex; width:100%; height:100%; min-height:560px; font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial; color:var(--dhfd-text); }
.dhfd-panel{ width:280px; background:var(--dhfd-panel); border-right:1px solid var(--dhfd-border); padding:14px; box-sizing:border-box; display:flex; flex-direction:column; gap:12px; }
.dhfd-panel.right{ border-right:0; border-left:1px solid var(--dhfd-border); }
.dhfd-topbar{ height:56px; display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--dhfd-border); background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(8px); position:sticky; top:0; z-index:5; }
.dhfd-topbar .left, .dhfd-topbar .right{ display:flex; align-items:center; gap:10px; }
.dhfd-btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--dhfd-border); background:#fff; border-radius:999px; cursor:pointer; font-size:13px; }
.dhfd-btn.primary{ background:var(--dhfd-accent); border-color:var(--dhfd-accent); color:#fff; }
.dhfd-btn:active{ transform:translateY(1px); }
.dhfd-field{ display:flex; flex-direction:column; gap:6px; }
.dhfd-field label{ font-size:12px; color:var(--dhfd-muted); }
.dhfd-input, .dhfd-select{ width:100%; padding:10px 12px; border:1px solid var(--dhfd-border); border-radius:12px; background:#fff; font-size:13px; box-sizing:border-box; }
.dhfd-row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dhfd-swatch-row{ display:flex; gap:6px; flex-wrap:wrap; }
.dhfd-swatch{ width:18px; height:18px; border-radius:6px; border:1px solid rgba(0,0,0,.08); cursor:pointer; }
.dhfd-grad{ width:56px; height:32px; border-radius:10px; border:1px solid rgba(0,0,0,.08); cursor:pointer; }
.dhfd-canvas-wrap{ flex:1; display:flex; flex-direction:column; min-width:0; }
.dhfd-stage{ flex:1; display:flex; align-items:center; justify-content:center; padding:16px; box-sizing:border-box; }
.dhfd-stage-inner{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.dhfd-canvas{ background:transparent; border-radius:16px; box-shadow:0 10px 30px rgba(18,38,63,.08); }
.dhfd-layers{ display:flex; flex-direction:column; gap:8px; }
.dhfd-layer{ display:flex; align-items:center; justify-content:space-between; padding:10px 10px; border:1px solid var(--dhfd-border); border-radius:12px; cursor:pointer; background:#fff; }
.dhfd-layer.active{ outline:2px solid rgba(79,140,255,.25); border-color:rgba(79,140,255,.35); }
.dhfd-layer small{ color:var(--dhfd-muted); }

/* Mobile: bottom bar + drawers */
@media (max-width: 900px){
  .dhfd-panel{ display:none; }
  .dhfd-shell{ border-radius:14px; }
  .dhfd-app{ flex-direction:column; }
  .dhfd-topbar{ position:relative; }
  .dhfd-stage{ padding:10px; }
  .dhfd-mobilebar{ display:flex; gap:10px; padding:10px; border-top:1px solid var(--dhfd-border); background:#fff; }
  .dhfd-mobilebar button{ flex:1; }
}