/* ═══════════════════════════════════════════════════════
   DIELINE GENERATOR PRO — Full-page Pacdora-style UI
   Tanur Graphics | https://tanur.graphics
═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Page override: full width ────────────────────────── */
.dlg-root, .dlg-root *, .dlg-root *::before, .dlg-root *::after { box-sizing:border-box; margin:0; padding:0; }
.dlg-root {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:13px; color:#111827; background:#F9FAFB;
  width:100%; min-height:100vh;
  position:relative; overflow:hidden;
}

/* Full-page override — remove WP container padding */
.dlg-root ~ *, .entry-content .dlg-root { max-width:none !important; }

/* ── Views ────────────────────────────────────────────── */
.dlg-view { display:none; }
.dlg-view-active { display:flex; flex-direction:column; min-height:100vh; }

/* ═══ AUTH WALL ═══════════════════════════════════════ */
.dlg-auth-wall {
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; background:linear-gradient(135deg,#F5F3FF,#EDE9FE 40%,#fff);
}
.dlg-auth-box {
  background:#fff; border-radius:20px; padding:52px 44px;
  max-width:480px; width:100%; text-align:center;
  box-shadow:0 8px 48px rgba(124,58,237,.13); border:1px solid #EDE9FE;
}
.dlg-auth-logo { display:flex;align-items:center;justify-content:center;gap:10px;font-size:18px;font-weight:700;color:#7C3AED;margin-bottom:24px; }
.dlg-auth-box h2 { font-size:24px;font-weight:800;margin-bottom:10px; }
.dlg-auth-box > p { color:#6B7280;line-height:1.6;margin-bottom:28px; }
.dlg-auth-btns { display:flex;gap:12px;justify-content:center;margin-bottom:32px; }
.dlg-auth-feats { display:flex;flex-wrap:wrap;gap:8px;justify-content:center; }
.dlg-auth-feats span { background:#F5F3FF;border:1px solid #EDE9FE;border-radius:20px;padding:6px 14px;font-size:12px;color:#5B21B6; }

/* ═══ LIBRARY LAYOUT ═══════════════════════════════════ */
.dlg-layout { display:flex; min-height:100vh; }

/* ── Sidebar ──────────────────────────────────────────── */
.dlg-sidebar {
  width:210px; flex-shrink:0; background:#fff;
  border-right:1px solid #E5E7EB; overflow-y:auto;
  position:sticky; top:0; height:100vh;
}
.dlg-sidebar-head {
  font-size:10px; font-weight:700; letter-spacing:.9px; text-transform:uppercase;
  color:#9CA3AF; padding:20px 16px 12px; border-bottom:1px solid #F3F4F6;
}
.dlg-cat-list { list-style:none; padding:6px 0; }
.dlg-cat-item {
  display:flex; align-items:center; gap:6px; padding:8px 16px;
  cursor:pointer; font-size:13px; color:#4B5563; font-weight:500;
  transition:background .1s,color .1s; border-left:3px solid transparent; position:relative;
}
.dlg-cat-item:hover { background:#F5F3FF; color:#7C3AED; }
.dlg-cat-active { background:#F5F3FF!important; color:#7C3AED!important; font-weight:600; border-left-color:#7C3AED!important; }
.dlg-cat-hash { font-size:14px; color:#C4B5FD; flex-shrink:0; }
.dlg-cat-name { flex:1; }
.dlg-cat-cnt { font-size:11px; color:#9CA3AF; background:#F3F4F6; border-radius:10px; padding:1px 6px; }
.dlg-cat-active .dlg-cat-cnt { background:#EDE9FE; color:#7C3AED; }

/* ── Main ─────────────────────────────────────────────── */
.dlg-main { flex:1; overflow-y:auto; display:flex; flex-direction:column; }

/* ── Hero ─────────────────────────────────────────────── */
.dlg-hero {
  display:flex; gap:0; align-items:stretch;
  background:linear-gradient(120deg,#FAFAFE 60%,#F0EBFF);
  border:1px solid #E5E7EB; border-radius:12px; margin:16px; overflow:hidden;
  min-height:180px;
}
.dlg-hero-content { flex:1; padding:24px 28px; display:flex; flex-direction:column; justify-content:center; }
.dlg-hero-tag {
  display:inline-flex; align-items:center; gap:6px;
  background:#7C3AED; color:#fff; border-radius:4px;
  padding:4px 12px; font-size:11px; font-weight:600; letter-spacing:.3px;
  margin-bottom:12px; width:fit-content;
}
.dlg-hero-content h1 { font-size:20px; font-weight:800; color:#111827; margin-bottom:6px; letter-spacing:-.3px; line-height:1.3; }
.dlg-hero-content p  { font-size:12px; color:#6B7280; line-height:1.6; margin-bottom:16px; max-width:420px; }
.dlg-hero-dims { display:flex; gap:8px; flex-wrap:wrap; }
.dlg-hdim {
  display:flex; align-items:center; gap:5px;
  background:#fff; border:1px solid #DDD6FE; border-radius:8px; padding:5px 10px;
}
.dlg-hdim label { font-size:12px; font-weight:700; color:#7C3AED; min-width:12px; }
.dlg-hdim input { width:52px; border:none; outline:none; font-size:13px; font-weight:600; color:#111827; font-family:inherit; text-align:center; -moz-appearance:textfield; }
.dlg-hdim input::-webkit-inner-spin-button { display:none; }
.dlg-hdim span { font-size:11px; color:#9CA3AF; }
.dlg-hero-img { width:280px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:16px; }

/* ── Bar ──────────────────────────────────────────────── */
.dlg-bar {
  display:flex; align-items:center; gap:12px; padding:12px 20px;
  background:#fff; border-bottom:1px solid #E5E7EB; position:sticky; top:0; z-index:10;
}
.dlg-search-wrap { flex:1; max-width:560px; position:relative; }
.dlg-search-ic { position:absolute; left:12px; top:50%; transform:translateY(-50%); pointer-events:none; }
.dlg-search {
  width:100%; padding:9px 14px 9px 36px; border:1.5px solid #E5E7EB; border-radius:24px;
  background:#F9FAFB; font-family:inherit; font-size:13px; color:#374151; outline:none;
  transition:border-color .15s,background .15s;
}
.dlg-search::placeholder { color:#9CA3AF; }
.dlg-search:focus { border-color:#7C3AED; background:#fff; box-shadow:0 0 0 3px rgba(124,58,237,.08); }
.dlg-bar-r { display:flex; align-items:center; gap:10px; margin-left:auto; }
.dlg-result-cnt { font-size:12px; color:#9CA3AF; }
.dlg-plan-pill { font-size:11px; font-weight:700; padding:4px 12px; border-radius:20px; background:#F3F4F6; color:#6B7280; border:1px solid #E5E7EB; }
.dlg-plan-pill.pro { background:#FEF3C7; color:#92400E; border-color:#FDE68A; }

/* ── Trial bar ────────────────────────────────────────── */
.dlg-trial-bar {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:linear-gradient(90deg,#FFFBEB,#FFF7ED); border-bottom:1px solid #FDE68A;
  padding:10px 20px; font-size:12px; color:#78350F;
}
.dlg-trial-btn {
  background:#F59E0B; color:#fff; border:none; border-radius:6px;
  padding:6px 14px; font-size:12px; font-weight:700; cursor:pointer;
  font-family:inherit; white-space:nowrap; flex-shrink:0;
}
.dlg-trial-btn:hover { background:#D97706; }

/* ── Grid ─────────────────────────────────────────────── */
.dlg-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:16px; padding:20px; flex:1;
}
.dlg-loading { grid-column:1/-1; text-align:center; padding:60px 20px; color:#9CA3AF; }

.dlg-card {
  background:#fff; border:1.5px solid #E5E7EB; border-radius:12px;
  overflow:hidden; cursor:pointer; transition:transform .15s,box-shadow .15s,border-color .15s;
}
.dlg-card:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(124,58,237,.1); border-color:#C4B5FD; }
.dlg-card-thumb {
  background:#F9FAFB; min-height:170px; display:flex; align-items:center;
  justify-content:center; padding:16px; position:relative; border-bottom:1px solid #F3F4F6;
  overflow:hidden;
}
.dlg-card-thumb svg { max-width:100%; max-height:145px; }
.dlg-card-badges { position:absolute; top:8px; right:8px; display:flex; flex-direction:column; gap:3px; align-items:flex-end; }
.dlg-badge { font-size:10px; font-weight:700; padding:2px 7px; border-radius:4px; }
.dlg-badge-print { background:#ECFDF5; color:#059669; border:1px solid #A7F3D0; }
.dlg-badge-dl    { background:#EFF6FF; color:#2563EB; border:1px solid #BFDBFE; }
.dlg-badge-pro   { background:#FEF3C7; color:#92400E; border:1px solid #FDE68A; }
.dlg-badge-new   { background:#F5F3FF; color:#7C3AED; border:1px solid #DDD6FE; }
.dlg-card-lock { position:absolute; inset:0; background:rgba(255,255,255,.65); display:flex; align-items:center; justify-content:center; font-size:28px; backdrop-filter:blur(2px); }
.dlg-card-info { padding:12px 14px; }
.dlg-card-name { font-size:13px; font-weight:600; color:#111827; margin-bottom:3px; line-height:1.4; }
.dlg-card-desc { font-size:11px; color:#9CA3AF; line-height:1.5; }

/* ═══ EDITOR ════════════════════════════════════════════ */
.dlg-editor-wrap { display:flex; min-height:100vh; width:100%; }

/* ── Left panel ───────────────────────────────────────── */
.dlg-ed-panel {
  width:272px; flex-shrink:0; background:#fff; border-right:1px solid #E5E7EB;
  display:flex; flex-direction:column; overflow-y:auto;
}
.dlg-ed-panel-inner { flex:1; padding:0 0 12px; }

.dlg-ed-top {
  display:flex; align-items:center; gap:10px;
  padding:14px 16px 12px; border-bottom:1px solid #F3F4F6;
}
.dlg-back-btn {
  display:flex; align-items:center; gap:4px; background:none;
  border:1.5px solid #E5E7EB; border-radius:6px; padding:5px 10px;
  font-size:12px; color:#6B7280; cursor:pointer; font-family:inherit;
  font-weight:500; white-space:nowrap; transition:all .1s; flex-shrink:0;
}
.dlg-back-btn:hover { border-color:#C4B5FD; color:#7C3AED; }
.dlg-ed-title { font-size:13px; font-weight:700; color:#111827; line-height:1.4; }

/* Tabs */
.dlg-ed-tabs { display:flex; padding:12px 16px 0; gap:4px; border-bottom:1px solid #F3F4F6; }
.dlg-ed-tab {
  display:flex; align-items:center; gap:5px; padding:8px 12px;
  border:none; background:none; font-family:inherit; font-size:12px;
  font-weight:500; color:#9CA3AF; cursor:pointer; border-bottom:2px solid transparent;
  margin-bottom:-1px; transition:color .1s,border-color .1s;
}
.dlg-ed-tab:hover { color:#374151; }
.dlg-ed-tab.active { color:#7C3AED; border-bottom-color:#7C3AED; }

.dlg-tab-pane { padding:14px 16px; }

/* Field groups */
.dlg-field-group { margin-bottom:18px; }
.dlg-field-label {
  font-size:12px; font-weight:600; color:#374151; margin-bottom:8px;
  display:flex; align-items:center; justify-content:space-between;
}
.dlg-field-hint { font-size:11px; font-weight:400; color:#9CA3AF; }
.dlg-unit-sw { display:flex; background:#F3F4F6; border-radius:6px; padding:2px; gap:2px; }
.dlg-unit-btn { background:none; border:none; border-radius:4px; padding:3px 9px; font-size:11px; font-weight:600; cursor:pointer; color:#9CA3AF; font-family:inherit; transition:all .1s; }
.dlg-unit-btn.active { background:#fff; color:#7C3AED; box-shadow:0 1px 3px rgba(0,0,0,.1); }

.dlg-dim-fields { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.dlg-dim-f { display:flex; flex-direction:column; gap:4px; }
.dlg-dim-f label { font-size:11px; color:#9CA3AF; }
.dlg-dim-input {
  display:flex; align-items:center; gap:4px;
  border:1.5px solid #E5E7EB; border-radius:7px;
  padding:6px 10px; background:#F9FAFB; transition:border-color .1s;
}
.dlg-dim-input:focus-within { border-color:#7C3AED; background:#fff; }
.dlg-dim-input input { flex:1; border:none; outline:none; font-size:13px; font-weight:600; color:#111827; font-family:inherit; background:transparent; -moz-appearance:textfield; min-width:0; }
.dlg-dim-input input::-webkit-inner-spin-button { display:none; }
.dlg-dim-input span { font-size:11px; color:#9CA3AF; white-space:nowrap; }

/* Stepper */
.dlg-stepper { display:flex; align-items:center; gap:8px; border:1.5px solid #E5E7EB; border-radius:7px; padding:4px 10px; }
.dlg-stepper button { background:none; border:none; font-size:18px; cursor:pointer; color:#374151; padding:0 4px; line-height:1; transition:color .1s; font-family:inherit; }
.dlg-stepper button:hover { color:#7C3AED; }
.dlg-stepper input { flex:1; border:none; outline:none; text-align:center; font-size:13px; font-weight:600; color:#111827; font-family:inherit; background:transparent; -moz-appearance:textfield; }
.dlg-stepper input::-webkit-inner-spin-button { display:none; }

/* Select */
.dlg-select {
  width:100%; padding:8px 12px; border:1.5px solid #E5E7EB; border-radius:7px;
  background:#F9FAFB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239CA3AF' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  font-family:inherit; font-size:13px; color:#374151; outline:none; appearance:none; cursor:pointer;
}
.dlg-select:focus { border-color:#7C3AED; }

/* Size mode grid */
.dlg-size-mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.dlg-size-mode {
  border:1.5px solid #E5E7EB; border-radius:7px; padding:8px 6px;
  font-family:inherit; font-size:11px; font-weight:500; color:#6B7280;
  cursor:pointer; background:#F9FAFB; transition:all .1s; line-height:1.4; text-align:center;
}
.dlg-size-mode:hover { border-color:#C4B5FD; color:#7C3AED; }
.dlg-size-mode.active { border-color:#7C3AED; background:#F5F3FF; color:#7C3AED; font-weight:600; }
.dlg-size-mode:last-child { grid-column:1/-1; }

/* Dims info */
.dlg-dims-info { border-top:1px solid #F3F4F6; padding:14px 16px; }
.dlg-dims-row { display:flex; justify-content:space-between; align-items:center; padding:4px 0; font-size:12px; }
.dlg-dims-row span { color:#9CA3AF; }
.dlg-dims-row strong { color:#374151; }

/* Text input */
.dlg-text-input { width:100%; padding:8px 12px; border:1.5px solid #E5E7EB; border-radius:7px; font-family:inherit; font-size:13px; color:#374151; outline:none; background:#F9FAFB; }
.dlg-text-input:focus { border-color:#7C3AED; background:#fff; }

/* ── File formats (bottom of panel) ──────────────────── */
.dlg-file-formats {
  border-top:1px solid #E5E7EB; padding:16px;
  background:#F9FAFB;
}
.dlg-ff-title { font-size:11px; font-weight:700; color:#9CA3AF; text-transform:uppercase; letter-spacing:.7px; margin-bottom:10px; }
.dlg-ff-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:12px; }
.dlg-ff-btn {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  border:1.5px solid #E5E7EB; border-radius:8px; background:#fff;
  padding:10px 6px; cursor:pointer; font-family:inherit; font-size:11px;
  color:#6B7280; font-weight:500; transition:all .12s;
}
.dlg-ff-btn:hover { border-color:#C4B5FD; color:#7C3AED; background:#F5F3FF; }
.dlg-ff-ic {
  font-size:11px; font-weight:800; border-radius:4px; padding:3px 6px;
  color:#fff; letter-spacing:.5px;
}
.dlg-ff-ai  { background:#F97316; }
.dlg-ff-pdf { background:#EF4444; }
.dlg-ff-dxf { background:#3B82F6; }
.dlg-ff-3d  { background:#8B5CF6; }
.dlg-ff-note { font-size:11px; color:#9CA3AF; line-height:1.7; }
.dlg-ff-note ul { list-style:disc; padding-left:14px; }

/* ── Canvas area ──────────────────────────────────────── */
.dlg-canvas-area {
  flex:1; display:flex; flex-direction:column; background:#F3F4F6; position:relative; overflow:hidden;
}

/* Legend bar */
.dlg-legend-bar {
  display:flex; align-items:center; gap:20px; padding:8px 20px;
  background:#fff; border-bottom:1px solid #E5E7EB;
  font-size:12px; color:#6B7280;
}
.dlg-leg { display:flex; align-items:center; gap:6px; }
.dlg-leg-line { display:inline-block; width:28px; height:2px; }
.dlg-leg-bleed  { background:#22C55E; }
.dlg-leg-trim   { background:#2563EB; }
.dlg-leg-crease { background:repeating-linear-gradient(90deg,#EF4444 0,#EF4444 4px,transparent 4px,transparent 6px); }
.dlg-leg-perf   { background:repeating-linear-gradient(90deg,#A855F7 0,#A855F7 3px,transparent 3px,transparent 5px); }

/* Canvas toolbar */
.dlg-canvas-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 16px; background:#fff; border-bottom:1px solid #E5E7EB;
}
.dlg-zoom-ctrl { display:flex; align-items:center; gap:4px; }
.dlg-icon-btn {
  width:28px; height:28px; border:1px solid #E5E7EB; border-radius:6px;
  background:#fff; cursor:pointer; font-size:14px; color:#6B7280;
  display:flex; align-items:center; justify-content:center;
  transition:all .1s; font-family:inherit; line-height:1;
}
.dlg-icon-btn:hover { border-color:#C4B5FD; color:#7C3AED; background:#F5F3FF; }
.dlg-divider { width:1px; height:20px; background:#E5E7EB; margin:0 2px; }
.dlg-zoom-label { font-size:12px; font-weight:600; color:#6B7280; }

/* Canvas scroll area */
.dlg-canvas-scroll {
  flex:1; overflow:auto; display:flex; align-items:flex-start; justify-content:center;
  padding:40px;
  background-image:radial-gradient(circle,#D1D5DB 1px,transparent 1px);
  background-size:20px 20px;
}
.dlg-canvas {
  background:#fff; border-radius:4px;
  box-shadow:0 2px 16px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.06);
  min-width:300px; min-height:200px;
  display:flex; align-items:center; justify-content:center; padding:24px;
  transition:width .2s;
}
.dlg-canvas-empty { text-align:center; padding:48px 32px; color:#9CA3AF; }
.dlg-canvas-empty p { margin-top:14px; font-size:13px; line-height:1.6; }
#dlg-svg-wrap { width:100%; }
#dlg-svg-wrap svg { width:100%; height:auto; display:block; }

/* 3D panel */
.dlg-3d-panel {
  position:absolute; top:0; right:0; bottom:0; width:280px;
  background:#fff; border-left:1px solid #E5E7EB;
  box-shadow:-4px 0 20px rgba(0,0,0,.06); padding:16px;
}
.dlg-3d-label { font-size:12px; font-weight:700; color:#374151; margin-bottom:12px; }
.dlg-3d-placeholder { text-align:center; padding:20px; color:#9CA3AF; }
.dlg-3d-placeholder p { font-size:12px; margin-top:8px; }
.dlg-open-close-row { display:flex; align-items:center; gap:8px; margin-top:12px; font-size:11px; color:#9CA3AF; }
.dlg-open-close-row input { flex:1; }

/* ── Buttons ──────────────────────────────────────────── */
.dlg-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 18px; border-radius:8px; font-family:inherit; font-size:13px;
  font-weight:600; cursor:pointer; transition:all .15s; border:none;
  text-decoration:none; white-space:nowrap; line-height:1.4;
}
.dlg-btn-full { width:100%; }
.dlg-btn-primary { background:#7C3AED; color:#fff; }
.dlg-btn-primary:hover { background:#6D28D9; box-shadow:0 4px 14px rgba(124,58,237,.3); }
.dlg-btn-outline { background:#fff; border:1.5px solid #C4B5FD; color:#7C3AED; }
.dlg-btn-outline:hover { background:#F5F3FF; }
.dlg-btn-ghost { background:none; border:1.5px solid #E5E7EB; color:#6B7280; }
.dlg-btn-ghost:hover { border-color:#C4B5FD; color:#7C3AED; }
.dlg-gen-btn { margin-top:4px; }

/* ── Projects Panel ───────────────────────────────────── */
.dlg-proj-panel {
  position:fixed; top:0; right:0; bottom:0; width:360px; z-index:100;
  background:#fff; border-left:1px solid #E5E7EB;
  box-shadow:-8px 0 32px rgba(0,0,0,.1); display:flex; flex-direction:column;
}
.dlg-proj-head { display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #E5E7EB;font-weight:700;font-size:14px; }
.dlg-proj-head button { background:#F3F4F6;border:none;border-radius:6px;width:28px;height:28px;cursor:pointer;font-size:14px;color:#374151; }
.dlg-proj-list { flex:1;overflow-y:auto;padding:12px; }
.dlg-proj-card { background:#F9FAFB;border:1.5px solid #E5E7EB;border-radius:8px;padding:12px;margin-bottom:8px;cursor:pointer;transition:border-color .1s; }
.dlg-proj-card:hover { border-color:#C4B5FD; }
.dlg-proj-name { font-size:13px;font-weight:600;color:#111827;margin-bottom:4px; }
.dlg-proj-meta { font-size:11px;color:#9CA3AF; }
.dlg-proj-btns { display:flex;gap:6px;margin-top:8px; }
.dlg-proj-btn { font-size:11px;padding:4px 10px;border-radius:5px;cursor:pointer;border:1.5px solid #E5E7EB;background:#fff;color:#6B7280;font-family:inherit;transition:all .1s; }
.dlg-proj-btn:hover { border-color:#C4B5FD;color:#7C3AED; }
.dlg-proj-del:hover { border-color:#EF4444!important;color:#EF4444!important; }

/* ── Upgrade Modal ────────────────────────────────────── */
.dlg-modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:200;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px);
}
.dlg-modal {
  background:#fff; border-radius:20px; padding:36px 32px;
  width:560px; max-width:95vw; max-height:90vh; overflow-y:auto;
  position:relative; box-shadow:0 24px 64px rgba(0,0,0,.2);
}
.dlg-modal-x { position:absolute;top:16px;right:16px;background:#F3F4F6;border:none;border-radius:8px;width:32px;height:32px;cursor:pointer;font-size:16px;color:#374151;display:flex;align-items:center;justify-content:center; }
.dlg-modal-head { text-align:center;margin-bottom:28px; }
.dlg-modal-head h2 { font-size:22px;font-weight:800;margin:10px 0 6px; }
.dlg-modal-head p { color:#6B7280; }
#dlg-plan-cards { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px; }
.dlg-plan-card { border:1.5px solid #E5E7EB;border-radius:12px;padding:20px;position:relative; }
.dlg-plan-feat  { border-color:#F59E0B; }
.dlg-plan-best { position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:#F59E0B;color:#fff;font-size:10px;font-weight:800;padding:2px 12px;border-radius:10px;white-space:nowrap; }
.dlg-plan-name  { font-size:11px;font-weight:700;color:#9CA3AF;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px; }
.dlg-plan-price { font-size:28px;font-weight:800;color:#111827; }
.dlg-plan-per   { font-size:12px;color:#9CA3AF;margin-bottom:16px; }
.dlg-plan-card ul { list-style:none;margin-bottom:16px; }
.dlg-plan-card ul li { font-size:12px;color:#6B7280;padding:3px 0; }
#dlg-stripe-el { background:#F9FAFB;border:1.5px solid #E5E7EB;border-radius:8px;padding:14px;margin-bottom:8px; }
.dlg-err { color:#EF4444;font-size:12px;min-height:18px; }

/* ── Toast ────────────────────────────────────────────── */
.dlg-toast {
  position:fixed; bottom:20px; right:20px; z-index:300;
  background:#111827; color:#fff; border-radius:8px; padding:10px 18px;
  font-size:13px; opacity:0; transform:translateY(6px); transition:all .2s;
  max-width:320px; pointer-events:none; box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.dlg-toast.show { opacity:1; transform:translateY(0); }
.dlg-toast.ok  { background:#059669; }
.dlg-toast.err { background:#DC2626; }
.dlg-toast.inf { background:#2563EB; }

/* ── Responsive ───────────────────────────────────────── */
@media(max-width:768px) {
  .dlg-sidebar { display:none; }
  .dlg-ed-panel { width:100%; border-right:none; border-bottom:1px solid #E5E7EB; }
  .dlg-editor-wrap { flex-direction:column; }
  .dlg-hero { flex-direction:column; }
  .dlg-hero-img { display:none; }
  #dlg-plan-cards { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════════
   FULL-PAGE LAYOUT FIXES
   Forces plugin to own the full page width
═══════════════════════════════════════════════════════ */

/* Override the WP theme container on the dieline page */
body.dlg-fullpage .site-main,
body.dlg-fullpage #main,
body.dlg-fullpage #primary,
body.dlg-fullpage .entry-content,
body.dlg-fullpage article.page,
body.dlg-fullpage .post-content,
body.dlg-fullpage .wp-block-post-content,
body.dlg-fullpage .container,
body.dlg-fullpage .container-fluid {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Remove page title & breadcrumb area margin */
body.dlg-fullpage .entry-header,
body.dlg-fullpage .page-header,
body.dlg-fullpage .breadcrumb-wrap {
  display: none !important;
}

/* The root container — add breathing room via inner padding */
.dlg-root {
  border-radius: 0;
  border: none;
  margin: 0;
}

/* Sidebar: add top padding */
.dlg-sidebar {
  padding-top: 8px;
}

/* Main area: all content has consistent horizontal padding */
.dlg-hero {
  margin: 16px 20px;
}

.dlg-bar {
  padding: 12px 24px;
}

.dlg-trial-bar {
  padding: 10px 24px;
}

.dlg-grid {
  padding: 20px 24px 40px;
}

/* Hero: fix the large input fields being too wide */
.dlg-hdim input {
  width: 60px;
}

/* Sidebar category list items — remove duplicate entries */
.dlg-cat-list .dlg-cat-item + .dlg-cat-item {
  border-top: none;
}

/* Fix: library view should be full height flex column */
#dlg-view-library.dlg-view-active {
  min-height: 100vh;
  flex-direction: column;
}

.dlg-view-active > .dlg-layout {
  flex: 1;
  min-height: calc(100vh - 0px);
}

/* Sidebar should scroll independently */
.dlg-sidebar {
  max-height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════
   PACDORA-INSPIRED STUDIO SHELL
═══════════════════════════════════════════════════════ */
#dlg-view-editor.dlg-view-active {
  background:#eceeef;
  min-height:100vh;
}

.dlg-studio-header {
  height:64px;
  flex:0 0 64px;
  background:#1f1f1f;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 22px;
  border-bottom:1px solid #303030;
  position:relative;
  z-index:40;
}

.dlg-studio-brand,
.dlg-studio-actions {
  display:flex;
  align-items:center;
  gap:13px;
}

.dlg-studio-brand {
  font-size:17px;
  font-weight:600;
}

.dlg-studio-mark {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  color:#191919;
  font-weight:800;
  font-size:18px;
}

.dlg-head-icon {
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:0;
  background:transparent;
  color:#f2f2f2;
  border-radius:8px;
  cursor:pointer;
}

.dlg-head-icon:hover {
  background:#343434;
}

.dlg-cloud-state {
  color:#a9a9a9;
  font-size:11px;
  display:flex;
  align-items:center;
  gap:5px;
}

.dlg-studio-download {
  border:0;
  border-radius:8px;
  padding:11px 18px;
  cursor:pointer;
  color:#fff;
  background:linear-gradient(100deg,#4aa8ed,#20c4c6);
  font:600 13px/1 'Inter',sans-serif;
  display:flex;
  align-items:center;
  gap:7px;
  box-shadow:0 5px 16px rgba(35,190,200,.2);
}

.dlg-editor-wrap {
  min-height:calc(100vh - 64px);
  height:calc(100vh - 64px);
}

.dlg-tool-rail {
  width:82px;
  flex:0 0 82px;
  padding:14px 8px 10px;
  background:#1f1f1f;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  color:#aaa;
}

.dlg-rail-btn {
  width:66px;
  min-height:60px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#b8b8b8;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  font:500 10px/1.1 'Inter',sans-serif;
}

.dlg-rail-btn .dashicons {
  width:22px;
  height:22px;
  font-size:22px;
}

.dlg-rail-btn:hover {
  background:#2b2b2b;
  color:#fff;
}

.dlg-rail-btn.active {
  color:#19b8b5;
  background:#292929;
}

.dlg-rail-rule {
  width:56px;
  height:1px;
  background:#3a3a3a;
  margin:7px 0;
}

.dlg-rail-spacer {
  flex:1;
}

.dlg-ed-panel {
  width:286px;
  background:#fff;
}

.dlg-dim-fields {
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}

.dlg-dim-f {
  min-width:0;
}

.dlg-ed-tabs {
  padding-top:8px;
}

.dlg-ed-tab.active,
.dlg-unit-btn.active,
.dlg-size-mode.active {
  color:#139c9b;
  border-color:#19b8b5;
}

.dlg-btn-primary {
  background:#18aaa8;
}

.dlg-btn-primary:hover {
  background:#128d8b;
  box-shadow:0 4px 14px rgba(24,170,168,.25);
}

.dlg-canvas-area {
  min-width:360px;
  background:#ededed;
}

.dlg-legend-bar {
  padding:10px 22px;
  background:#f8f8f8;
  border-bottom:1px solid #dedede;
}

.dlg-canvas-bar {
  position:absolute;
  z-index:12;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  justify-content:center;
  gap:16px;
  padding:8px 10px;
  background:#fff;
  border:1px solid #ddd;
  border-radius:10px;
  box-shadow:0 6px 24px rgba(0,0,0,.12);
}

.dlg-canvas-scroll {
  padding:34px 42px 86px;
  background:#ededed;
  background-image:none;
}

.dlg-canvas {
  width:100%;
  min-height:calc(100% - 8px);
  padding:18px;
  background:transparent;
  border-radius:2px;
  box-shadow:none;
}

#dlg-svg-wrap {
  max-width:840px;
  margin:0 auto;
}

.dlg-output-panel {
  width:292px;
  flex:0 0 292px;
  padding:20px 18px;
  background:#f2f2f2;
  border-left:1px solid #ddd;
  overflow-y:auto;
}

.dlg-preview-card {
  background:#fff;
  border-radius:14px;
  padding:12px;
  margin-bottom:16px;
  box-shadow:0 1px 4px rgba(0,0,0,.04);
}

.dlg-preview-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  font-weight:600;
  margin-bottom:8px;
}

.dlg-3d-badge {
  font-size:11px;
  font-weight:800;
  color:#222;
}

.dlg-preview-image {
  display:block;
  width:100%;
  height:165px;
  border-radius:9px;
  background:#eee;
}

.dlg-preview-card .dlg-open-close-row {
  background:#fff;
  border-radius:20px;
  padding:8px 4px 2px;
}

.dlg-output-panel .dlg-file-formats {
  border:0;
  padding:18px;
  background:#fff;
  border-radius:14px;
}

.dlg-output-panel .dlg-ff-title {
  font-size:15px;
  font-weight:600;
  color:#252525;
  text-transform:none;
  letter-spacing:0;
  margin-bottom:13px;
}

.dlg-output-panel .dlg-ff-btn {
  flex-direction:row;
  justify-content:flex-start;
  gap:7px;
  padding:12px 9px;
}

.dlg-output-panel .dlg-ff-btn:hover,
.dlg-output-panel .dlg-ff-btn.selected {
  border-color:#178ee8;
  color:#1683cf;
  background:#f5fbff;
}

.dlg-output-panel .dlg-ff-note {
  color:#777;
  line-height:1.55;
  border-top:1px solid #eee;
  padding-top:14px;
}

.dlg-output-panel .dlg-ff-note strong {
  display:block;
  color:#333;
  font-size:13px;
  margin-bottom:8px;
}

.dlg-output-panel .dlg-ff-note ul {
  padding-left:16px;
}

.dlg-production-note {
  margin-top:10px !important;
  padding-top:9px !important;
  border-top:1px solid #eee;
  color:#9a6519;
  font-size:10px;
  line-height:1.45;
}

@media(max-width:1100px) {
  .dlg-output-panel {
    width:244px;
    flex-basis:244px;
    padding:14px 12px;
  }

  .dlg-ed-panel {
    width:260px;
  }
}

@media(max-width:900px) {
  .dlg-output-panel {
    display:none;
  }
}

@media(max-width:768px) {
  .dlg-studio-header {
    padding:0 12px;
  }

  .dlg-cloud-state,
  .dlg-studio-brand > span:nth-child(2) {
    display:none;
  }

  .dlg-tool-rail {
    width:62px;
    flex:0 0 62px;
    display:none;
  }

  .dlg-editor-wrap {
    height:auto;
    min-height:calc(100vh - 64px);
  }

  .dlg-ed-panel {
    width:100%;
  }
}