/* ============================================================
   Sparkle for Divi 5 — Admin CSS v0.0.6
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}

.sfd-wrap{
  max-width:1100px;
  margin:0 20px 40px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* ── Header ── */
.sfd-header{
  background:linear-gradient(135deg,#0d0d1a 0%,#1a1040 55%,#0f2a50 100%);
  color:#fff;border-radius:14px;margin-bottom:24px;overflow:hidden;
}
.sfd-header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 28px 14px;gap:16px;
}
.sfd-header::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 80% 40%,rgba(255,215,0,.14) 0%,transparent 60%);
}
.sfd-header-logo{display:flex;align-items:center;gap:14px;position:relative}
.sfd-logo-img{width:52px;height:52px;border-radius:12px;object-fit:cover;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.sfd-header-logo h1{margin:0 0 3px;font-size:22px;font-weight:700;color:#fff}
.sfd-tagline{margin:0;font-size:13px;opacity:.7}
.sfd-header-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;position:relative}
.sfd-version{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:2px 10px;font-size:11px;color:rgba(255,255,255,.65)}
.sfd-author{font-size:11px;color:rgba(255,255,255,.45);font-style:italic}

/* Sub-nav */
.sfd-subnav{display:flex;gap:0;border-top:1px solid rgba(255,255,255,.1)}
.sfd-subnav-link{
  padding:10px 22px;font-size:13px;font-weight:600;color:rgba(255,255,255,.6);
  text-decoration:none;border-top:3px solid transparent;transition:all .18s;
}
.sfd-subnav-link:hover{color:#fff;background:rgba(255,255,255,.06)}
.sfd-subnav-link.active{color:#fff;border-top-color:#a78bfa;background:rgba(255,255,255,.06)}

/* ── Layout ── */
.sfd-layout{display:grid;grid-template-columns:1fr 330px;gap:20px;align-items:start}
@media(max-width:960px){.sfd-layout{grid-template-columns:1fr}}

/* ── Panel ── */
.sfd-panel{background:#fff;border:1px solid #d1d9e6;border-radius:13px;padding:22px;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.sfd-panel h2{margin:0 0 4px;font-size:16px;color:#1a1a2e}
.sfd-panel>p{margin:0 0 16px;color:#64748b;font-size:13px}
.sfd-panel-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.sfd-panel-top h2{margin:0 0 3px}
.sfd-panel-top p{margin:0;color:#64748b;font-size:13px}

/* ── Filters ── */
.sfd-filters{display:flex;gap:6px;flex-wrap:wrap}
.sfd-filter{padding:4px 13px;border-radius:20px;border:2px solid #d1d9e6;background:#f4f6fa;cursor:pointer;font-size:12px;font-weight:600;color:#475569;transition:all .16s}
.sfd-filter.active,.sfd-filter:hover{border-color:#6366f1;background:#eef2ff;color:#6366f1}

/* ── Section divider ── */
.sfd-section-divider{
  display:flex;align-items:center;gap:12px;
  margin:26px 0 16px;font-size:13px;font-weight:700;color:#fff;
}
.sfd-section-divider::before,.sfd-section-divider::after{
  content:'';flex:1;height:2px;background:linear-gradient(90deg,#2d2d4e,#6366f1,#2d2d4e);
}
.sfd-section-divider span{
  background:linear-gradient(135deg,#1a1040,#2d2060);
  padding:5px 18px;border-radius:20px;border:1px solid #4f46e5;
  white-space:nowrap;box-shadow:0 2px 8px rgba(99,102,241,.3);
}

/* ── Accordion card list ── */
.sfd-card-list{display:flex;flex-direction:column;gap:8px}
.sfd-card-list.hidden-cat{display:none}

/* ── Card ── */
.sfd-card{border:2px solid #c8d0df;border-radius:11px;overflow:visible;transition:border-color .18s,box-shadow .18s}
.sfd-card:hover{border-color:#818cf8;box-shadow:0 4px 18px rgba(99,102,241,.14)}
.sfd-card.open{border-color:#6366f1;box-shadow:0 4px 18px rgba(99,102,241,.18)}

/* Card header */
.sfd-card-header{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;cursor:pointer;
  background:#f8fafc;border-bottom:2px solid transparent;
  border-radius:9px 9px 0 0;
  transition:background .15s;user-select:none;
}
.sfd-card.open .sfd-card-header{background:#eef2ff;border-bottom-color:#e0e7ff}
.sfd-card-header:hover{background:#eef2ff}
.sfd-card-emoji{font-size:18px;flex-shrink:0}
.sfd-card-title{flex:1;font-size:13px;font-weight:700;color:#1a1a2e}
.sfd-card-chevron{font-size:10px;color:#94a3b8;transition:transform .25s}
.sfd-card.open .sfd-card-chevron{transform:rotate(180deg)}

/* Card body */
.sfd-card-body{padding:14px;display:flex;flex-direction:column;gap:10px;overflow:visible}
.sfd-card-desc{margin:0;font-size:12px;color:#64748b;line-height:1.5}
.sfd-desc-edit-wrap{margin:4px 0 10px}
.sfd-desc-input{width:100%;font-size:12px;color:#64748b;border:1px solid transparent;border-radius:6px;padding:5px 8px;background:transparent;transition:border-color .2s,background .2s;box-sizing:border-box}
.sfd-desc-input:hover{border-color:#e2e8f0;background:#f8fafc}
.sfd-desc-input:focus{border-color:#6366f1;background:#fff;outline:none;color:#374151}

/* Preview box */
.sfd-preview{
  height:144px;border-radius:9px;
  background:linear-gradient(135deg,#0d0d1a,#1a1040);
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.sfd-preview-hint{color:rgba(255,255,255,.3);font-size:11px;letter-spacing:3px}

/* Info button wrapper — sits between preview and description */
.sfd-preview-info-wrap{
  display:flex;align-items:center;justify-content:center;
  height:0;position:relative;z-index:10;
}

/* ── Controls ── */
.sfd-control-group{display:flex;flex-direction:column;gap:4px}
.sfd-control-label{font-size:11px;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:.4px;display:flex;justify-content:space-between}
.sfd-val{color:#6366f1;font-weight:700}
.sfd-slider{width:100%;accent-color:#6366f1;cursor:pointer;height:4px}
.sfd-hidden{display:none!important}

/* Button group (shape / motion) */
.sfd-btn-group{display:flex;gap:5px;flex-wrap:wrap}
.sfd-btn-opt{
  padding:4px 9px;border-radius:6px;border:2px solid #d1d9e6;background:#fff;
  font-size:11px;font-weight:600;color:#475569;cursor:pointer;transition:all .15s;
}
.sfd-btn-opt:hover{border-color:#818cf8;color:#6366f1}
.sfd-btn-opt.active{border-color:#6366f1;background:#eef2ff;color:#6366f1}

/* Color swatches */
.sfd-color-row{display:flex;gap:5px;flex-wrap:wrap;margin-top:2px}
.sfd-swatch{
  width:22px;height:22px;border-radius:50%;border:2px solid rgba(0,0,0,0.25);outline:1px solid rgba(0,0,0,0.08);
  cursor:pointer;transition:transform .15s,border-color .15s;
  font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sfd-swatch:hover{transform:scale(1.2)}
.sfd-swatch.active{border-color:#6366f1;transform:scale(1.15);box-shadow:0 0 0 2px #fff,0 0 0 4px #6366f1}
.sfd-swatch.rainbow{background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red)}

/* Card actions */
.sfd-card-actions{display:flex;flex-direction:column;gap:8px;padding-top:4px;border-top:1px solid #f1f5f9}
.sfd-class-row{display:flex;align-items:center;gap:7px}
.sfd-class-badge{
  background:#f1f5f9;border:1px solid #cbd5e1;border-radius:5px;
  padding:3px 8px;font-size:11px;color:#0f172a;
  font-family:'Courier New',monospace;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sfd-copy-btn{
  background:#6366f1;color:#fff;border:none;border-radius:7px;
  padding:5px 11px;font-size:12px;font-weight:600;cursor:pointer;
  white-space:nowrap;transition:background .15s,transform .1s;flex-shrink:0;
}
.sfd-copy-btn:hover{background:#4f46e5}
.sfd-copy-btn:active{transform:scale(.95)}
.sfd-copy-btn.copied{background:#10b981}
.sfd-save-row{display:flex;align-items:center;gap:8px}
.sfd-save-btn-sm{
  background:#6366f1;color:#fff;border:none;border-radius:7px;
  padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s;
}
.sfd-save-btn-sm:hover{background:#4f46e5}
.sfd-reset-btn{
  background:#f1f5f9;color:#475569;border:1px solid #d1d9e6;
  border-radius:7px;padding:5px 10px;font-size:12px;cursor:pointer;transition:background .15s;
}
.sfd-reset-btn:hover{background:#e2e8f0}
.sfd-save-msg{font-size:11px;color:#10b981}

/* ── Sidebar ── */
.sfd-sidebar{display:flex;flex-direction:column;gap:16px}
.sfd-steps{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.sfd-steps li{display:flex;gap:10px;align-items:flex-start}
.sfd-step-num{min-width:22px;height:22px;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;margin-top:1px}
.sfd-steps li>div strong{display:block;font-size:12px;color:#1a1a2e;margin-bottom:1px}
.sfd-steps li>div p{font-size:12px;color:#64748b;margin:0;line-height:1.5}
.sfd-divi5-hint{margin-top:5px;background:#f0f4ff;border:1px solid #c7d2fe;border-radius:7px;padding:5px 9px;font-size:11px;color:#3730a3;font-style:italic}
.sfd-tip-box{margin-top:14px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:11px 13px;font-size:12px;color:#166534;line-height:1.7}

/* ── Settings page ── */
.sfd-setting-block{border-bottom:1px solid #f1f5f9;padding:12px 0}
.sfd-setting-block:last-of-type{border-bottom:none}
.sfd-toggle-row{display:flex;justify-content:space-between;align-items:flex-start;cursor:pointer;gap:12px}
.sfd-toggle-row div{flex:1}
.sfd-toggle-row div strong{display:block;font-size:13px;color:#1a1a2e;margin-bottom:2px}
.sfd-toggle-row div p{font-size:12px;color:#64748b;margin:0;line-height:1.5}
.sfd-toggle-row input[type=checkbox]{width:18px;height:18px;accent-color:#6366f1;cursor:pointer;flex-shrink:0;margin-top:1px}
.sfd-save-global-btn{
  margin-top:16px;background:linear-gradient(135deg,#6366f1,#8b5cf6);
  color:#fff;border:none;border-radius:9px;padding:10px 18px;
  font-size:13px;font-weight:600;cursor:pointer;transition:opacity .18s;width:100%;
}
.sfd-save-global-btn:hover{opacity:.88}
.sfd-save-msg{display:block;text-align:center;margin-top:6px;font-size:12px;color:#10b981;min-height:16px}

/* ── Docs page ── */
.sfd-docs h3{font-size:14px;color:#1a1a2e;margin:20px 0 8px;border-bottom:2px solid #e2e8f0;padding-bottom:4px}
.sfd-docs h3:first-of-type{margin-top:0}
.sfd-docs ol,.sfd-docs ul{margin:0 0 12px;padding-left:20px}
.sfd-docs li{font-size:13px;color:#374151;line-height:1.7;margin-bottom:4px}
.sfd-docs-table{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:16px}
.sfd-docs-table th{background:#f8fafc;padding:7px 10px;text-align:left;color:#475569;font-size:11px;text-transform:uppercase;letter-spacing:.4px;border-bottom:2px solid #e2e8f0}
.sfd-docs-table td{padding:7px 10px;border-bottom:1px solid #f1f5f9;color:#374151;vertical-align:top}
.sfd-docs-table tr:last-child td{border-bottom:none}
.sfd-docs-footer{margin-top:20px;padding-top:12px;border-top:1px solid #e2e8f0;font-size:12px;color:#94a3b8;text-align:right}

/* ── Workflow tabs ── */
.sfd-wf-tabs{display:flex;gap:0;border-bottom:2px solid #e2e8f0;margin:14px 0 0}
.sfd-wf-tab{padding:7px 18px;font-size:12px;font-weight:600;color:#64748b;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .15s,border-color .15s;user-select:none;background:none;border-top:none;border-left:none;border-right:none}
.sfd-wf-tab:hover{color:#6366f1}
.sfd-wf-tab.sfd-wf-active{color:#6366f1;border-bottom-color:#6366f1}
.sfd-wf-panels{margin-top:16px}
.sfd-wf-panel{display:none}
.sfd-wf-panel.sfd-wf-show{display:block}
.sfd-wf-slogan{font-size:12px;color:#6366f1;font-style:italic;margin:0 0 14px;font-weight:500}
.sfd-wf-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.sfd-wf-steps li{display:flex;gap:11px;align-items:flex-start}
.sfd-wf-num{min-width:22px;height:22px;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;margin-top:1px}
.sfd-wf-body{flex:1}
.sfd-wf-body strong{display:block;font-size:13px;color:#1a1a2e;margin-bottom:2px}
.sfd-wf-body p{font-size:12px;color:#64748b;margin:0;line-height:1.55}
.sfd-wf-hint{margin-top:5px;background:#f0f4ff;border:1px solid #c7d2fe;border-radius:7px;padding:5px 10px;font-size:11px;color:#3730a3;font-style:italic}

/* ── Inline reset confirm (floating above button row) ── */
.sfd-reset-confirm-row{
  position:absolute;bottom:calc(100% + 6px);left:0;right:0;
  display:flex;align-items:center;gap:8px;
  background:#fff;border:1.5px solid #fca5a5;border-radius:8px;
  padding:7px 12px;box-shadow:0 4px 16px rgba(0,0,0,.12);
  z-index:20;white-space:nowrap;
}
.sfd-reset-confirm-text{flex:1;font-size:12px;font-weight:600;color:#374151}
.sfd-reset-yes{padding:3px 11px;border-radius:6px;border:none;background:#ef4444;color:#fff;font-size:11px;font-weight:700;cursor:pointer;flex-shrink:0}
.sfd-reset-yes:hover{background:#dc2626}
.sfd-reset-no{padding:3px 11px;border-radius:6px;border:1px solid #d1d9e6;background:#f8fafc;color:#475569;font-size:11px;cursor:pointer;flex-shrink:0}
.sfd-reset-no:hover{background:#e2e8f0}

/* ── Toast ── */
.sfd-toast{position:fixed;bottom:26px;right:26px;background:#1a1a2e;color:#fff;padding:10px 18px;border-radius:9px;font-size:13px;font-weight:600;box-shadow:0 8px 22px rgba(0,0,0,.32);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .26s,transform .26s;z-index:999999}
.sfd-toast.sfd-toast-error{background:#b91c1c;color:#fff;}
.sfd-toast.show{opacity:1;transform:translateY(0)}

/* ── Opacity toggle switch ── */
.sfd-toggle-row-inline {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.sfd-toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
.sfd-toggle-switch input { opacity:0; width:0; height:0; }
.sfd-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #cbd5e1;
  border-radius: 20px;
  transition: background .2s;
}
.sfd-toggle-slider::before {
  content: '';
  position: absolute;
  height: 14px; width: 14px;
  left: 3px; bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.sfd-toggle-switch input:checked + .sfd-toggle-slider { background: #6366f1; }
.sfd-toggle-switch input:checked + .sfd-toggle-slider::before { transform: translateX(16px); }

/* ── FAQ ── */
.sfd-faq-list { display:flex; flex-direction:column; gap:0; }
.sfd-faq-item { border-bottom: 1px solid #f1f5f9; }
.sfd-faq-item:last-child { border-bottom: none; }
.sfd-faq-q {
  font-size: 13px; font-weight: 700; color: #1a1a2e;
  padding: 13px 0 10px;
  cursor: default;
}
.sfd-faq-q::before { content: 'Q  '; color: #6366f1; font-weight:900; }
.sfd-faq-a {
  font-size: 13px; color: #374151; line-height: 1.7;
  padding-bottom: 13px;
}
.sfd-faq-a code {
  background: #f1f5f9; border: 1px solid #cbd5e1;
  border-radius: 4px; padding: 2px 6px; font-size: 11px;
  font-family: 'Courier New', monospace;
}
.sfd-faq-a ol, .sfd-faq-a ul { margin: 6px 0 0 18px; padding: 0; }
.sfd-faq-a li { margin-bottom: 4px; }

/* ── Duplicate & Delete buttons ── */
.sfd-duplicate-btn {
  background: #f0f9ff; color: #0369a1;
  border: 1px solid #bae6fd; border-radius: 7px;
  padding: 5px 10px; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.sfd-duplicate-btn:hover { background: #e0f2fe; }

.sfd-delete-btn {
  background: #fff1f2; color: #be123c;
  border: 1px solid #fecdd3; border-radius: 7px;
  padding: 5px 10px; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.sfd-delete-btn:hover { background: #ffe4e6; }

/* ── Duplicate modal ── */
.sfd-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 999999;
  animation: sfd-fade-in .15s ease;
}
@keyframes sfd-fade-in { from{opacity:0} to{opacity:1} }
.sfd-modal {
  background: #fff; border-radius: 14px;
  padding: 24px 28px; width: 420px; max-width: 90vw;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.sfd-modal h3 { margin: 0 0 6px; font-size: 16px; color: #1a1a2e; }
.sfd-modal p  { margin: 0 0 16px; font-size: 13px; color: #64748b; }
.sfd-modal-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.sfd-modal-field label { font-size: 11px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: .4px; }
.sfd-modal-field input {
  border: 2px solid #d1d9e6; border-radius: 8px;
  padding: 8px 10px; font-size: 13px; color: #1a1a2e;
  transition: border-color .15s; outline: none;
}
.sfd-modal-field input:focus { border-color: #6366f1; }
.sfd-modal-hint { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.sfd-modal-error { font-size: 12px; color: #ef4444; min-height: 16px; margin-bottom: 4px; }
.sfd-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.sfd-modal-confirm {
  background: #6366f1; color: #fff; border: none;
  border-radius: 8px; padding: 8px 18px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.sfd-modal-confirm:hover { background: #4f46e5; }
.sfd-modal-cancel {
  background: #f1f5f9; color: #475569;
  border: 1px solid #d1d9e6; border-radius: 8px;
  padding: 8px 14px; font-size: 13px; cursor: pointer;
  transition: background .15s;
}
.sfd-modal-cancel:hover { background: #e2e8f0; }

/* ── User preset badge ── */
.sfd-user-badge {
  font-size: 10px; background: #eef2ff; color: #6366f1;
  border: 1px solid #c7d2fe; border-radius: 10px;
  padding: 1px 7px; margin-left: 6px; font-weight: 700;
}


/* ============================================================
   DUAL RANGE SLIDER
============================================================ */
.sfd-dual-range {
  position: relative;
  height: 32px;
  display: flex;
  align-items: center;
  margin-top: 4px;
}
.sfd-dual-track {
  position: absolute;
  left: 0; right: 0;
  height: 4px;
  background: #e2e8f0;
  border-radius: 2px;
  pointer-events: none;
  z-index: 0;
}
.sfd-dual-fill {
  position: absolute;
  height: 100%;
  background: #6366f1;
  border-radius: 2px;
}
.sfd-dual-range input[type=range] {
  position: absolute;
  width: 100%;
  height: 4px;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
  margin: 0; padding: 0;
  z-index: 1;
}
.sfd-dual-range input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #6366f1;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(99,102,241,.4);
  cursor: pointer;
  pointer-events: all;
  z-index: 2;
}
.sfd-dual-range input[type=range]::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #6366f1;
  border: 2px solid #fff;
  cursor: pointer;
  pointer-events: all;
}
.sfd-range-high { z-index: 3 !important; }
.sfd-range-low  { z-index: 2 !important; }

/* ============================================================
   OPACITY TOGGLE SWITCH
============================================================ */
.sfd-toggle-row-inline {
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
}
.sfd-toggle-switch {
  position: relative;
  display: inline-block;
  width: 38px; height: 22px;
  flex-shrink: 0;
}
.sfd-toggle-switch input { opacity:0; width:0; height:0; }
.sfd-toggle-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: #cbd5e1; border-radius: 22px; transition: background .2s;
}
.sfd-toggle-slider::before {
  content: '';
  position: absolute;
  height: 16px; width: 16px;
  left: 3px; bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.sfd-toggle-switch input:checked + .sfd-toggle-slider { background: #6366f1; }
.sfd-toggle-switch input:checked + .sfd-toggle-slider::before { transform: translateX(16px); }

/* ============================================================
   DUPLICATE / DELETE BUTTONS
============================================================ */
.sfd-duplicate-btn {
  background: #f0f9ff; color: #0369a1;
  border: 1px solid #bae6fd; border-radius: 7px;
  padding: 5px 10px; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.sfd-duplicate-btn:hover { background: #e0f2fe; }
.sfd-delete-btn {
  background: #fff1f2; color: #be123c;
  border: 1px solid #fecdd3; border-radius: 7px;
  padding: 5px 10px; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.sfd-delete-btn:hover { background: #ffe4e6; }

/* ============================================================
   DUPLICATE MODAL
============================================================ */
.sfd-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 999999;
  animation: sfd-fade-in .15s ease;
}

.sfd-modal {
  background: #fff; border-radius: 14px;
  padding: 24px 28px; width: 420px; max-width: 90vw;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.sfd-modal h3 { margin: 0 0 6px; font-size: 16px; color: #1a1a2e; }
.sfd-modal p  { margin: 0 0 16px; font-size: 13px; color: #64748b; }
.sfd-modal-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.sfd-modal-field label { font-size: 11px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: .4px; }
.sfd-modal-field input {
  border: 2px solid #d1d9e6; border-radius: 8px;
  padding: 8px 10px; font-size: 13px; color: #1a1a2e;
  transition: border-color .15s; outline: none;
}
.sfd-modal-field input:focus { border-color: #6366f1; }
.sfd-modal-hint  { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.sfd-modal-error { font-size: 12px; color: #ef4444; min-height: 16px; margin-bottom: 4px; }
.sfd-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.sfd-modal-confirm {
  background: #6366f1; color: #fff; border: none;
  border-radius: 8px; padding: 8px 18px;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s;
}
.sfd-modal-confirm:hover { background: #4f46e5; }
.sfd-modal-cancel {
  background: #f1f5f9; color: #475569;
  border: 1px solid #d1d9e6; border-radius: 8px;
  padding: 8px 14px; font-size: 13px; cursor: pointer; transition: background .15s;
}
.sfd-modal-cancel:hover { background: #e2e8f0; }

/* ── User preset badge ── */
.sfd-user-badge {
  font-size: 10px; background: #eef2ff; color: #6366f1;
  border: 1px solid #c7d2fe; border-radius: 10px;
  padding: 1px 7px; margin-left: 6px; font-weight: 700;
}

/* ============================================================
   FAQ PAGE
============================================================ */
.sfd-faq-list { display:flex; flex-direction:column; gap:0; }
.sfd-faq-item { border-bottom: 1px solid #f1f5f9; }
.sfd-faq-item:last-child { border-bottom: none; }
.sfd-faq-q { font-size:13px; font-weight:700; color:#1a1a2e; padding:13px 0 8px; }
.sfd-faq-q::before { content:'Q  '; color:#6366f1; font-weight:900; }
.sfd-faq-a { font-size:13px; color:#374151; line-height:1.7; padding-bottom:13px; }
.sfd-faq-a code { background:#f1f5f9; border:1px solid #cbd5e1; border-radius:4px; padding:2px 6px; font-size:11px; }
.sfd-faq-a ol, .sfd-faq-a ul { margin:6px 0 0 18px; padding:0; }
.sfd-faq-a li { margin-bottom:4px; }

/* ── Slider hint (slow — fast) ── */
.sfd-slider-hint {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 400;
  margin-left: 8px;
  letter-spacing: .3px;
}

/* ── In-use badge ── */
.sfd-inuse-badge {
  font-size: 10px;
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
  border-radius: 10px;
  padding: 1px 7px;
  margin-left: 6px;
  font-weight: 700;
  vertical-align: middle;
}
.sfd-inuse-count {
  font-size:      10px;
  background:     #dcfce7;
  color:          #15803d;
  border:         1px solid #86efac;
  border-radius:  10px;
  padding:        1px 7px;
  margin-left:    4px;
  font-weight:    700;
  vertical-align: middle;
  cursor:         pointer;
  position:       relative;
  transition:     background .15s, color .15s;
}
.sfd-inuse-count:hover {
  background: #bbf7d0;
  color:      #166534;
}

/* ── Hint text (inline label subtext) ── */
.sfd-hint-text {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 400;
  margin-left: 6px;
}

/* ── Danger zone / Uninstall ── */
.sfd-danger-zone {
  margin-top: 32px;
  border-top: 2px solid #fecaca;
  padding-top: 20px;
}
.sfd-danger-zone h3 {
  color: #dc2626;
  margin: 0 0 8px;
  font-size: 15px;
}
.sfd-danger-zone p {
  font-size: 13px;
  color: #374151;
  line-height: 1.6;
  margin: 0 0 10px;
}
.sfd-uninstall-box {
  background: #f9fafb;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
  transition: border-color .2s, background .2s;
}
.sfd-uninstall-box.sfd-uninstall-armed {
  background: #fff7ed;
  border-color: #fb923c;
}
.sfd-uninstall-check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: #374151;
  font-weight: 600;
}
.sfd-uninstall-check-row input[type=checkbox] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #dc2626;
  flex-shrink: 0;
  cursor: pointer;
}
.sfd-uninstall-check-row small {
  font-weight: 400;
  color: #6b7280;
}
.sfd-uninstall-warning {
  margin-top: 12px;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 7px;
  padding: 10px 12px;
  font-size: 12px;
  color: #991b1b;
  line-height: 1.6;
}
.sfd-uninstall-oops {
  margin-top: 10px;
}
.sfd-oops-btn {
  background: #dcfce7;
  border: 1px solid #86efac;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #15803d;
  cursor: pointer;
  transition: background .15s;
}
.sfd-oops-btn:hover { background: #bbf7d0; }
.sfd-save-uninstall-btn {
  background: #374151;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.sfd-save-uninstall-btn:hover { background: #1f2937; }

/* ── Donation banner ── */

/* ── Donation banner ── */
.sfd-donation-banner {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin:      0 20px 0;
  padding:     7px 16px;
  background:  rgba(255,182,193,.08);
  border:      1px solid rgba(255,182,193,.2);
  border-radius: 8px;
}
.sfd-donation-ribbon {
  width:       18px;
  height:      22px;
  object-fit:  contain;
  flex-shrink: 0;
  opacity:     .9;
}
.sfd-donation-text {
  font-size:   12px;
  color:       rgba(255,255,255,.6);
  line-height: 1;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}
.sfd-donation-link {
  color:           #f9a8c9 !important;
  text-decoration: underline !important;
  font-weight:     600;
  transition:      color .15s;
}
.sfd-donation-link:hover {
  color: #fce7f3 !important;
}
.sfd-donation-banner + .sfd-subnav {
  margin-top: 10px;
}

/* ── Live Preview modal v0.6.3 — direct page list (like AnimatedBg) ── */
.sfd-live-modal {
  padding: 0 !important;
  overflow: hidden;
  min-width: 380px;
  max-width: 500px;
  background: #0f172a !important;
  border: 1px solid #1e293b;
}
.sfd-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #1e293b;
  background: #0a0f1e;
}
.sfd-modal-header h3 { flex: 1; color: #e2e8f0 !important; }
.sfd-modal-x {
  background: none;
  border: none;
  color: #f87171;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
}
.sfd-modal-x:hover { background: rgba(248,113,113,.15); }
.sfd-page-loading { padding: 16px; color: #94a3b8; font-size: 13px; }

.sfd-page-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  text-decoration: none;
  color: #cbd5e1;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .1s;
  background: transparent;
}
.sfd-page-row:hover { background: rgba(124,58,237,.18); color: #e2e8f0; }
.sfd-page-row-arrow {
  font-size: 11px;
  color: #a78bfa;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 12px;
}

/* ── Custom PNG shape upload (v0.7.0) ── */
.sfd-custom-shape-wrap {
  margin:        8px 0 4px;
  padding:       10px 12px;
  background:    rgba(124,58,237,.07);
  border:        1px solid rgba(124,58,237,.2);
  border-radius: 8px;
}
.sfd-custom-shape-preview {
  min-height: 44px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sfd-shape-thumb {
  width:         44px;
  height:        44px;
  object-fit:    contain;
  border-radius: 6px;
  border:        1px solid #334155;
  background:    repeating-conic-gradient(#1e293b 0% 25%, #0f172a 0% 50%) 0 0 / 10px 10px;
}
.sfd-custom-shape-label {
  display:       flex;
  flex-direction: column;
  gap:           4px;
  cursor:        pointer;
}
.sfd-custom-shape-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  padding:       5px 12px;
  background:    #1e293b;
  border:        1px solid #334155;
  border-radius: 6px;
  font-size:     12px;
  color:         #94a3b8;
  cursor:        pointer;
  transition:    border-color .15s, color .15s;
  width:         fit-content;
}
.sfd-custom-shape-btn:hover {
  border-color: #a78bfa;
  color:        #e2e8f0;
}
.sfd-custom-shape-hint {
  font-size:    11px;
  color:        #94a3b8;
}
.sfd-custom-shape-label {
  display:      flex;
  align-items:  center;
  gap:          8px;
  flex-wrap:    wrap;
}
.sfd-custom-shape-error {
  display:      none;
  font-size:    11px;
  font-weight:  600;
  color:        #fff;
  background:   #b91c1c;
  border-radius: 6px;
  padding:      3px 9px;
  line-height:  1.4;
  max-width:    220px;
}
.sfd-custom-shape-error:not(:empty) {
  display: inline-block;
}


/* ══════════════════════════════════════════════════════════════
   PRESET CARD PREVIEW — particle animation keyframes
   All rules are scoped to .sfd-preview so they never leak into
   the WordPress dashboard styles.
   These mirror sparkle.css which is NOT loaded in the admin.
   ══════════════════════════════════════════════════════════════ */

/* ── Base particle elements ── */
.sfd-preview .sparkle-star  { position: absolute; pointer-events: none; opacity: 0; }
.sfd-preview .sparkle-shape { position: absolute; pointer-events: none; opacity: 0; }

/* ── STAR — 3-layer rotate ── */
.sfd-preview .sparkle-star.animate {
  animation: sfd-star-fade var(--sfd-duration, 2.5s) ease-out forwards;
}
@keyframes sfd-star-fade {
  0%  { opacity: 0 } 10% { opacity: 1 } 50% { opacity: 1 } 75% { opacity: .5 } 100% { opacity: 0 }
}
.sfd-preview .sparkle-star .large   { animation: sfd-large   var(--sfd-duration, 2.5s) ease-out forwards; transform-origin: 42.5px 42.5px; }
.sfd-preview .sparkle-star .large-2 { animation: sfd-large-2 var(--sfd-duration, 2.5s) ease-out forwards; transform-origin: 42.5px 42.5px; }
.sfd-preview .sparkle-star .small   { animation: sfd-small   var(--sfd-duration, 2.5s) ease-out forwards; transform-origin: 42.5px 42.5px; }
@keyframes sfd-large   { 0%{opacity:0;transform:rotate(0deg) scale(0)}   20%{opacity:1} 40%{opacity:1;transform:rotate(360deg) scale(1.5)}  100%{opacity:0;transform:rotate(360deg) scale(0)} }
@keyframes sfd-large-2 { 0%{opacity:0;transform:rotate(45deg) scale(0)}  20%{opacity:.8} 40%{opacity:.8;transform:rotate(405deg) scale(1.2)} 100%{opacity:0;transform:rotate(405deg) scale(0)} }
@keyframes sfd-small   { 0%{opacity:0;transform:rotate(0deg) scale(0)}   20%{opacity:1} 40%{opacity:1;transform:rotate(-360deg) scale(1.5)} 100%{opacity:0;transform:rotate(-360deg) scale(0)} }

/* ── SPARKLE motion ── */
.sfd-preview .sparkle-shape.motion-sparkle.animate {
  animation:
    sfd-sparkle-scale var(--sfd-duration, 2.5s) ease-out     forwards,
    sfd-sparkle-fade  var(--sfd-duration, 2.5s) ease-in-out  forwards;
}
@keyframes sfd-sparkle-scale {
  0%   { transform: scale(0)   }
  20%  { transform: scale(1.4) }
  50%  { transform: scale(1.0) }
  80%  { transform: scale(1.1) }
  100% { transform: scale(0)   }
}
@keyframes sfd-sparkle-fade {
  0%   { opacity: 0 } 15% { opacity: 1 } 70% { opacity: 1 } 100% { opacity: 0 }
}

/* ── FLOAT motion (drift upward) ── */
.sfd-preview .sparkle-shape.motion-float.animate {
  animation:
    sfd-float-move var(--sfd-duration, 2.5s) ease-out     forwards,
    sfd-float-fade var(--sfd-duration, 2.5s) ease-in-out  forwards;
}
@keyframes sfd-float-move {
  0%   { transform: translateY(0)                       scale(0)  }
  15%  { transform: translateY(var(--sfd-t15,  -6px))  scale(1)  }
  100% { transform: translateY(var(--sfd-t100, -60px)) scale(.8) }
}
@keyframes sfd-float-fade {
  0%  { opacity: 0 } 15% { opacity: 1 } 75% { opacity: 1 } 100% { opacity: 0 }
}

/* ── FALL motion (drop downward) ── */
.sfd-preview .sparkle-shape.motion-fall.animate {
  animation:
    sfd-fall-move var(--sfd-duration, 2.5s) ease-in       forwards,
    sfd-fall-fade var(--sfd-duration, 2.5s) ease-in-out   forwards;
}
@keyframes sfd-fall-move {
  0%   { transform: translateY(var(--sfd-t0,   -9px)) rotate(0deg) }
  100% { transform: translateY(var(--sfd-t100, 60px)) rotate(var(--sfd-fall-rot, 180deg)) }
}
@keyframes sfd-fall-fade {
  0%  { opacity: 0 } 12% { opacity: 1 } 75% { opacity: 1 } 100% { opacity: 0 }
}

/* ── SPIN motion (rotate in place) ── */
.sfd-preview .sparkle-shape.motion-spin.animate {
  animation:
    sfd-spin-rotate var(--sfd-duration, 2.5s) ease-out     forwards,
    sfd-spin-fade   var(--sfd-duration, 2.5s) ease-in-out  forwards;
}
@keyframes sfd-spin-rotate {
  0%   { transform: scale(0)   rotate(0deg)   }
  15%  { transform: scale(1.2) rotate(120deg) }
  50%  { transform: scale(1.0) rotate(360deg) }
  80%  { transform: scale(0.9) rotate(540deg) }
  100% { transform: scale(0)   rotate(720deg) }
}
@keyframes sfd-spin-fade {
  0%  { opacity: 0 } 15% { opacity: 1 } 75% { opacity: 1 } 100% { opacity: 0 }
}

/* ── Star inside float/fall wrapper: let wrapper handle movement ── */
.sfd-preview .sparkle-shape.motion-float > .sparkle-star,
.sfd-preview .sparkle-shape.motion-fall  > .sparkle-star {
  position: static;
}


/* ── FLOAT-SPIN / FALL-SPIN (preview) — two-layer architecture ── */
/* Base: outer needs position+opacity like sparkle-shape; inner fills the outer */
.sfd-preview .sfd-combo-outer {
  position:       absolute;
  pointer-events: none;
  opacity:        0;
}
.sfd-preview .sfd-combo-inner {
  width:    100%;
  height:   100%;
  display:  block;
}

/* Outer: movement + fade */
.sfd-preview .sfd-combo-outer.motion-float-spin.animate {
  animation:
    sfd-floatspin-move var(--sfd-move-dur, 2.5s) ease-out    forwards,
    sfd-floatspin-fade var(--sfd-move-dur, 2.5s) ease-in-out forwards;
}
@keyframes sfd-floatspin-move {
  0%   { transform: translateY(0)                        }
  15%  { transform: translateY(var(--sfd-t15,  -6px))   }
  100% { transform: translateY(var(--sfd-t100, -60px))  }
}
@keyframes sfd-floatspin-fade {
  0%   { opacity: 0 } 15% { opacity: 1 } 75% { opacity: 1 } 100% { opacity: 0 }
}

.sfd-preview .sfd-combo-outer.motion-fall-spin.animate {
  animation:
    sfd-fallspin-move  var(--sfd-move-dur, 2.5s) ease-in     forwards,
    sfd-fallspin-fade  var(--sfd-move-dur, 2.5s) ease-in-out forwards;
}
@keyframes sfd-fallspin-move {
  0%   { transform: translateY(var(--sfd-t0,    0px)) }
  100% { transform: translateY(var(--sfd-t100, 60px)) }
}
@keyframes sfd-fallspin-fade {
  0%   { opacity: 0 } 12% { opacity: 1 } 75% { opacity: 1 } 100% { opacity: 0 }
}

/* Inner: rotation only */
.sfd-preview .sfd-combo-inner.animate {
  animation: sfd-combo-spin var(--sfd-spin-dur, 1.0s) linear infinite;
}
@keyframes sfd-combo-spin {
  from { transform: rotate(0deg)   }
  to   { transform: rotate(360deg) }
}

/* ── Accessibility ── */
@media (prefers-reduced-motion: reduce) {
  .sfd-preview .sparkle-star,
  .sfd-preview .sparkle-star.animate,
  .sfd-preview .sparkle-star .large,
  .sfd-preview .sparkle-star .large-2,
  .sfd-preview .sparkle-star .small,
  .sfd-preview .sparkle-shape,
  .sfd-preview .sparkle-shape.animate {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ══ Rich page-usage tooltip on the preset card count badge ══
   Uses position:fixed to escape .sfd-card overflow:hidden.
   Tail points downward toward the badge via CSS clip-path on ::after.
   All text uses explicit color to override WordPress admin link styles.
   ══ */

/* ── Tail geometry custom properties ── */
.sfd-page-tooltip {
  --sfd-tip-b:      2.0em;                    /* tail base width          */
  --sfd-tip-h:      1.0em;                    /* tail height              */
  --sfd-tip-p:      22%;                      /* tail left position       */
  --sfd-tip-r:      12px;                     /* box border-radius        */
  --sfd-tip-bg-a:   #1e1340;                  /* gradient start           */
  --sfd-tip-bg-b:   #2a1a5e;                  /* gradient end + tail fill */
  --sfd-tip-border: rgba(155,114,247,.50);    /* border color             */

  position:         fixed;
  z-index:          999999;
  min-width:        200px;
  max-width:        280px;
  background:       linear-gradient(160deg, var(--sfd-tip-bg-a) 0%, var(--sfd-tip-bg-b) 100%);
  border:           1px solid var(--sfd-tip-border);
  border-radius:    var(--sfd-tip-r);
  box-shadow:       0 10px 36px rgba(0,0,0,.55), 0 0 0 1px rgba(155,114,247,.12);
  padding:          0;
  /* overflow must be visible so the tail protrudes below the box */
  overflow:         visible;
  opacity:          0;
  pointer-events:   none;
  transform:        translateY(-6px);
  transition:       opacity .18s ease, transform .18s ease;
}
.sfd-page-tooltip-visible {
  opacity:          1;
  pointer-events:   auto;
  transform:        translateY(0);
}

/* Tail — triangle pointing DOWN toward the badge (tooltip is above badge) */
.sfd-page-tooltip::after {
  content:          '';
  position:         absolute;
  bottom:           calc(-1 * var(--sfd-tip-h));
  left:             var(--sfd-tip-p);
  width:            var(--sfd-tip-b);
  height:           var(--sfd-tip-h);
  background:       var(--sfd-tip-bg-b);
  clip-path:        polygon(0 0, 100% 0, 50% 100%);
  pointer-events:   none;
}
/* Tail border layer (1px larger, behind) */
.sfd-page-tooltip::before {
  content:          '';
  position:         absolute;
  bottom:           calc(-1 * var(--sfd-tip-h) - 1.5px);
  left:             calc(var(--sfd-tip-p) - 1.5px);
  width:            calc(var(--sfd-tip-b) + 3px);
  height:           calc(var(--sfd-tip-h) + 1.5px);
  background:       var(--sfd-tip-border);
  clip-path:        polygon(0 0, 100% 0, 50% 100%);
  pointer-events:   none;
  z-index:          -1;
}

/* ── Content ── */
.sfd-page-tooltip-label {
  padding:          8px 12px 4px;
  font-size:        10px;
  font-weight:      700;
  letter-spacing:   .06em;
  text-transform:   uppercase;
  color:            #a78bfa !important;
  border-bottom:    1px solid rgba(155,114,247,.18);
  background:       rgba(155,114,247,.07);
  border-radius:    var(--sfd-tip-r) var(--sfd-tip-r) 0 0;
}
.sfd-page-tooltip-list {
  list-style:       none !important;
  margin:           0 !important;
  padding:          5px 0 6px !important;
  max-height:       160px;
  overflow-y:       auto;
  scrollbar-width:  thin;
  scrollbar-color:  rgba(155,114,247,.3) transparent;
}
.sfd-page-tooltip-list li {
  padding:          0 !important;
  margin:           0 !important;
  list-style:       none !important;
}
.sfd-page-tooltip-item {
  display:          flex;
  align-items:      center;
  padding:          4px 12px;
  font-size:        12px;
  font-weight:      500;
  color:            #ddd6fe !important;
  line-height:      1.5;
}
.sfd-page-tooltip-link:hover {
  background:       rgba(155,114,247,.15);
  color:            #fff !important;
  border-radius:    4px;
}
.sfd-ptip-title {
  flex:             1;
  min-width:        0;
  overflow:         hidden;
  text-overflow:    ellipsis;
  white-space:      nowrap;
}
.sfd-ptip-hint {
  font-size:        10px;
  color:            rgba(155,114,247,.8);
  white-space:      nowrap;
  margin-left:      8px;
  flex-shrink:      0;
}
.sfd-page-tooltip-item::before {
  content:          '·  ';
  color:            #7c3aed;
  font-weight:      700;
}

/* Card header — position:relative kept for other absolute children */
.sfd-card-header { position: relative; }

/* ══ Free colour picker swatch ══ */
.sfd-swatch-picker-wrap {
  display:        inline-flex;
  align-items:    center;
  cursor:         pointer;
  position:       relative;
}
.sfd-swatch-picker-wrap input[type="color"] {
  position:       absolute;
  width:          1px;
  height:         1px;
  opacity:        0;
  pointer-events: none;
}
.sfd-swatch-picker-wrap:hover .sfd-swatch-picker { transform: scale(1.2); }

/* ══ Undo button ══ */
.sfd-undo-btn {
  background:     transparent;
  border:         1px solid #e0e7ff;
  color:          #6366f1;
  border-radius:  6px;
  padding:        4px 10px;
  font-size:      12px;
  cursor:         pointer;
  transition:     background .15s, color .15s;
}
.sfd-undo-btn:hover { background:#e0e7ff; color:#4338ca; }
.sfd-undo-btn:disabled { opacity:.5; cursor:default; }

/* ══ Lazy loading — card visible indicator ══ */
.sfd-card-visible .sfd-preview { background: linear-gradient(135deg,#0d0d1a,#1a1040); }

/* ══ Onboarding corner panel (non-blocking — page stays fully interactive) ══ */
.sfd-onboard-box {
  position:       fixed;
  bottom:         28px;
  right:          28px;
  z-index:        99999;
  width:          300px;
  background:     #fff;
  border:         1px solid #e0e7ff;
  border-radius:  14px;
  box-shadow:     0 12px 36px rgba(99,102,241,.18), 0 2px 8px rgba(0,0,0,.08);
  padding:        20px 20px 14px;
  font-size:      13px;
  display:        none;
  /* Subtle entrance animation */
  animation:      sfd-onboard-slide-in .35s ease both;
}
@keyframes sfd-onboard-slide-in {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}
.sfd-onboard-box.sfd-onboard-visible { display: block; }
.sfd-onboard-step {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          #a5b4fc;
  margin-bottom:  6px;
}
.sfd-onboard-title {
  font-size:      14px;
  font-weight:    700;
  color:          #1e1b4b;
  margin-bottom:  7px;
  line-height:    1.35;
}
.sfd-onboard-text {
  font-size:      12px;
  color:          #4b5563;
  line-height:    1.65;
  margin-bottom:  14px;
}
.sfd-onboard-text strong { color:#312e81; }
.sfd-onboard-text em     { color:#6366f1; font-style:normal; font-weight:600; }
.sfd-onboard-actions {
  display:        flex;
  gap:            7px;
  justify-content: flex-end;
  align-items:    center;
}
.sfd-onboard-back,
.sfd-onboard-skip {
  background:     transparent;
  border:         1px solid #e5e7eb;
  border-radius:  7px;
  padding:        5px 12px;
  font-size:      12px;
  color:          #6b7280;
  cursor:         pointer;
  transition:     background .12s;
}
.sfd-onboard-back:hover,
.sfd-onboard-skip:hover { background:#f3f4f6; }
.sfd-onboard-next {
  background:     #6366f1;
  border:         none;
  border-radius:  7px;
  padding:        5px 14px;
  font-size:      12px;
  font-weight:    600;
  color:          #fff;
  cursor:         pointer;
  transition:     background .12s;
}
.sfd-onboard-next:hover { background:#4f46e5; }

/* ══ To-top button ══ */
.sfd-to-top-btn {
  position:       fixed;
  bottom:         28px;
  right:          28px;
  z-index:        9999;
  width:          42px;
  height:         42px;
  border-radius:  50%;
  background:     linear-gradient(135deg, #6366f1, #8b5cf6);
  color:          #fff;
  font-size:      18px;
  font-weight:    700;
  line-height:    1;
  border:         none;
  cursor:         pointer;
  box-shadow:     0 4px 16px rgba(99,102,241,.40);
  opacity:        0;
  pointer-events: none;
  transform:      translateY(10px);
  transition:     opacity .22s ease, transform .22s ease, background .15s;
}
.sfd-to-top-btn.sfd-to-top-visible {
  opacity:        1;
  pointer-events: auto;
  transform:      translateY(0);
}
.sfd-to-top-btn:hover {
  background:     linear-gradient(135deg, #4f46e5, #7c3aed);
  box-shadow:     0 6px 20px rgba(99,102,241,.55);
}

/* ══ Term tooltips — dashed underline labels with hover bubble ══ */

/* The term wrapper — inline so it fits inside existing label flow */
.sfd-tt {
  position:        relative;
  display:         inline;
  border-bottom:   2px dashed rgba(155,114,247,.95);
  cursor:          default;
}

/* The bubble — appears above the label */
.sfd-tt-bubble {
  display:         none; /* shown via JS class */
  position:        fixed; /* escapes overflow:hidden on cards */
  z-index:         999998;
  width:           240px;
  background:      linear-gradient(160deg,#1e1340 0%,#2a1a5e 100%);
  border:          1px solid rgba(155,114,247,.50);
  border-radius:   10px;
  padding:         10px 13px;
  font-size:       12px;
  font-weight:     400;
  color:           #d4d0ee;
  line-height:     1.6;
  box-shadow:      0 10px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(155,114,247,.10);
  pointer-events:  none;
  opacity:         0;
  transform:       translateY(-4px);
  transition:      opacity .18s ease, transform .18s ease;
  white-space:     normal;
  text-transform:  none;
  letter-spacing:  normal;
}
.sfd-tt-bubble.sfd-tt-visible {
  opacity:         1;
  transform:       translateY(0);
}

/* Downward pointing tail */
.sfd-tt-bubble::after {
  content:       '';
  position:      absolute;
  bottom:        -7px;
  left:          50%;
  transform:     translateX(-50%);
  width:         14px;
  height:        7px;
  background:    #2a1a5e;
  clip-path:     polygon(0 0, 100% 0, 50% 100%);
  pointer-events: none;
}
.sfd-tt-bubble::before {
  content:       '';
  position:      absolute;
  bottom:        -8.5px;
  left:          50%;
  transform:     translateX(-50%);
  width:         16px;
  height:        8px;
  background:    rgba(155,114,247,.50);
  clip-path:     polygon(0 0, 100% 0, 50% 100%);
  pointer-events: none;
  z-index:       -1;
}
/* Flipped variant — tail points UP (tooltip is below the label) */
.sfd-tt-bubble.sfd-tt-flipped::after {
  bottom:        auto;
  top:           -7px;
  clip-path:     polygon(50% 0, 100% 100%, 0 100%);
}
.sfd-tt-bubble.sfd-tt-flipped::before {
  bottom:        auto;
  top:           -8.5px;
  clip-path:     polygon(50% 0, 100% 100%, 0 100%);
}

/* ══ Preview info icon ══ */
.sfd-preview-info-btn {
  position:        relative;
  top:             -20px;
  width:           40px;
  height:          40px;
  border-radius:   50%;
  background:      #3b2d6b;
  border:          2px solid #9b72f7;
  color:           #e0d4ff;
  font-size:       17px;
  font-style:      italic;
  font-family:     Georgia, serif;
  font-weight:     700;
  line-height:     1;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  box-shadow:      0 0 0 3px rgba(155,114,247,.25), 0 2px 8px rgba(0,0,0,.6);
  z-index:         10;
  transition:      background .15s, box-shadow .15s;
  user-select:     none;
}
.sfd-preview-info-btn:hover {
  background:      #5a3ea0;
  box-shadow:      0 0 0 4px rgba(155,114,247,.45), 0 2px 12px rgba(0,0,0,.7);
}