/* Portfurlio — "Hearth" theme
   Warm, lamp-lit cozy night. Rich espresso-charcoal base, cream text, ONE
   signature accent (honey-amber). Earthy semantics: sage = go/publish,
   terracotta = danger, marigold = warning, dusty blue = info — used sparingly.

   Token note: legacy names from earlier themes (honey/sage/clay/oat/lilac and
   aurora/lime/rose/amber/iris) are kept as ALIASES so existing inline refs in
   the HTML keep resolving. New code uses the semantic names below. */

:root,
[data-bs-theme="dark"] {
  /* ---- warm espresso base ---- */
  --pf-bg: #1C1714;
  --pf-bg-deep: #15110E;        /* inputs, nav, deepest panels */
  --pf-surface: #251E19;        /* cards */
  --pf-surface-2: #2F2620;      /* lifted / hover */
  --pf-text: #EFE6D8;
  --pf-text-bright: #FBF4E9;
  --pf-muted: #ADA08F;
  --pf-border: rgba(239, 230, 216, .09);
  --pf-border-strong: rgba(239, 230, 216, .2);

  /* ---- signature accent (honey-amber ember) — brand / primary / links ---- */
  --pf-accent: #EFA94E;
  --pf-accent-bright: #F4BC6E;
  --pf-accent-dim: #DE9636;
  --pf-accent-ink: #2A1B08;     /* dark warm text on amber fills */
  --pf-accent-deep: #9A6212;    /* canvas selection — must read on the white site canvas */

  /* ---- sage — go / publish / success ---- */
  --pf-go: #93BE74;
  --pf-go-bright: #A8CC8E;
  --pf-go-ink: #15280A;

  /* ---- terracotta — danger ---- */
  --pf-danger: #E37058;
  --pf-danger-bright: #EA8A75;
  --pf-danger-ink: #2E0D06;

  /* ---- marigold — warning ---- */
  --pf-warn: #E8C155;
  --pf-warn-bright: #EFCF77;
  --pf-warn-ink: #2C2206;

  /* ---- dusty blue — info ---- */
  --pf-info: #94A7CC;
  --pf-info-bright: #ABBBD8;
  --pf-info-ink: #121A2B;

  --pf-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --pf-ease: cubic-bezier(.22, 1, .36, 1);
  --pf-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* ---- legacy aliases ---- */
  --pf-honey: var(--pf-accent);          --pf-aurora: var(--pf-accent);
  --pf-honey-bright: var(--pf-accent-bright); --pf-aurora-bright: var(--pf-accent-bright);
  --pf-honey-dim: var(--pf-accent-dim);  --pf-aurora-dim: var(--pf-accent-dim);
  --pf-honey-ink: var(--pf-accent-ink);  --pf-aurora-ink: var(--pf-accent-ink);
  --pf-honey-deep: var(--pf-accent-deep);--pf-aurora-deep: var(--pf-accent-deep);
  --pf-sage: var(--pf-go);               --pf-lime: var(--pf-go);
  --pf-sage-bright: var(--pf-go-bright); --pf-lime-bright: var(--pf-go-bright);
  --pf-sage-ink: var(--pf-go-ink);       --pf-lime-ink: var(--pf-go-ink);
  --pf-clay: var(--pf-danger);           --pf-rose: var(--pf-danger);
  --pf-clay-bright: var(--pf-danger-bright); --pf-rose-bright: var(--pf-danger-bright);
  --pf-clay-ink: var(--pf-danger-ink);   --pf-rose-ink: var(--pf-danger-ink);
  --pf-oat: var(--pf-warn);              --pf-amber: var(--pf-warn);
  --pf-oat-ink: var(--pf-warn-ink);      --pf-amber-ink: var(--pf-warn-ink);
  --pf-lilac: var(--pf-info);            --pf-iris: var(--pf-info);
  --pf-lilac-ink: var(--pf-info-ink);    --pf-iris-ink: var(--pf-info-ink);

  /* ---- Bootstrap rewiring ---- */
  --bs-body-bg: var(--pf-bg);
  --bs-body-color: var(--pf-text);
  --bs-body-font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --bs-font-monospace: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --bs-emphasis-color: var(--pf-text-bright);
  --bs-secondary-color: rgba(239, 230, 216, .64);
  --bs-tertiary-color: rgba(239, 230, 216, .44);
  --bs-secondary-bg: var(--pf-surface);
  --bs-tertiary-bg: var(--pf-bg-deep);
  --bs-border-color: var(--pf-border);
  --bs-border-color-translucent: var(--pf-border);
  --bs-heading-color: var(--pf-text-bright);
  --bs-link-color: var(--pf-accent);
  --bs-link-hover-color: var(--pf-accent-bright);
  --bs-link-color-rgb: 239, 169, 78;
  --bs-link-hover-color-rgb: 244, 188, 110;
  --bs-code-color: var(--pf-accent);
  --bs-primary: var(--pf-accent);
  --bs-primary-rgb: 239, 169, 78;
  --bs-success-rgb: 147, 190, 116;
  --bs-danger-rgb: 227, 112, 88;
  --bs-warning-rgb: 232, 193, 85;
  --bs-info-rgb: 148, 167, 204;
  --bs-secondary-rgb: 74, 63, 54;
  --bs-focus-ring-color: rgba(239, 169, 78, .32);
}

/* ---------- base ---------- */
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  background:
    radial-gradient(1200px 760px at 50% -12%, rgba(239, 169, 78, .09), transparent 62%),
    var(--pf-bg);
  background-attachment: fixed;
}
::selection { background: rgba(239, 169, 78, .3); color: var(--pf-text-bright); }

h1, h2, h3, .h1, .h2, .h3, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--pf-display);
  font-weight: 600;
  letter-spacing: -.02em;
}
.display-1, .display-2, .display-3, .display-4 { font-weight: 700; letter-spacing: -.035em; line-height: 1.02; }

a { text-decoration: none; transition: color .15s ease; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code.txt { user-select: all; }
.cursor-grab { cursor: grab; }
.spinner-border { color: var(--pf-accent); }

/* ---------- motion ---------- */
@keyframes pf-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pf-pulse { 0%, 100% { opacity: .4; } 50% { opacity: .85; } }

main > *:not(.reveal) { animation: pf-rise .55s var(--pf-ease) backwards; }
main > *:nth-child(2) { animation-delay: .05s; }
main > *:nth-child(3) { animation-delay: .10s; }
main > *:nth-child(4) { animation-delay: .15s; }
main > *:nth-child(5) { animation-delay: .20s; }
main > *:nth-child(n+6) { animation-delay: .25s; }
.pf-pulse { animation: pf-pulse 1.6s ease-in-out infinite; }

/* scroll-reveal utility (driven by IntersectionObserver -> .in).
   Hidden state is gated behind html.js so content stays visible without JS. */
.reveal { transition: opacity .7s var(--pf-ease), transform .7s var(--pf-ease); }
html.js .reveal { opacity: 0; transform: translateY(22px); }
html.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  html.js .reveal, html.js .reveal.in { opacity: 1 !important; transform: none !important; }
}

/* ---------- navbar ---------- */
.pf-nav {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(21, 17, 14, .8);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--pf-border);
  margin-bottom: 1.75rem;
}
.pf-nav .navbar-brand {
  font-family: var(--pf-display); font-weight: 800; font-size: 1.3rem;
  letter-spacing: -.03em; color: var(--pf-text-bright);
  display: inline-flex; align-items: center; gap: .5rem;
}
.pf-nav .navbar-brand::before {
  content: ""; width: 1.05rem; height: 1.05rem; border-radius: 5px;
  background: var(--pf-accent); box-shadow: 0 0 0 4px rgba(239, 169, 78, .16);
  transition: transform .3s var(--pf-spring);
}
.pf-nav .navbar-brand:hover { text-decoration: none; color: var(--pf-text-bright); }
.pf-nav .navbar-brand:hover::before { transform: rotate(-12deg) scale(1.12); }
.pf-nav .nav-link { color: var(--pf-muted); transition: color .15s ease; }
.pf-nav .nav-link:hover { color: var(--pf-text); text-decoration: none; }
.pf-nav .nav-link.active { color: var(--pf-accent); }
.pf-nav .navbar-toggler { border-color: var(--pf-border-strong); }
.pf-nav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23EFA94E' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---------- cards ---------- */
.card { --bs-card-bg: var(--pf-surface); --bs-card-border-color: var(--pf-border); --bs-card-cap-bg: transparent; border-radius: 1rem; }
.card-footer { background: rgba(0, 0, 0, .18); }
.pf-lift { transition: transform .28s var(--pf-ease), border-color .28s ease, box-shadow .28s ease; }
.pf-lift:hover {
  transform: translateY(-4px);
  border-color: rgba(239, 169, 78, .42);
  box-shadow: 0 22px 46px -22px rgba(0, 0, 0, .75), 0 0 0 1px rgba(239, 169, 78, .12);
}
.pf-panel { background: var(--pf-surface); border: 1px solid var(--pf-border); border-radius: 1rem; }

/* featured pricing card */
.card.border-primary { border: 1px solid rgba(239, 169, 78, .55) !important; }
.pf-popular {
  position: absolute; top: -.7rem; left: 50%; transform: translateX(-50%);
  background: var(--pf-accent); color: var(--pf-accent-ink);
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .2rem .7rem; border-radius: 999px; box-shadow: 0 6px 18px -8px rgba(239, 169, 78, .7);
}
.pf-check { color: var(--pf-accent); font-weight: 700; margin-right: .45rem; }
.pf-price { font-family: var(--pf-display); font-weight: 700; font-size: 2.6rem; letter-spacing: -.04em; color: var(--pf-text-bright); }

/* ---------- buttons ---------- */
.btn {
  --bs-btn-border-radius: .65rem; font-weight: 600; letter-spacing: -.005em;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .14s var(--pf-spring), box-shadow .2s ease;
}
.btn:active { transform: scale(.96); }
.btn:focus-visible { box-shadow: 0 0 0 .2rem rgba(239, 169, 78, .35); }

.btn-primary {
  --bs-btn-bg: var(--pf-accent); --bs-btn-border-color: var(--pf-accent); --bs-btn-color: var(--pf-accent-ink);
  --bs-btn-hover-bg: var(--pf-accent-bright); --bs-btn-hover-border-color: var(--pf-accent-bright); --bs-btn-hover-color: var(--pf-accent-ink);
  --bs-btn-active-bg: var(--pf-accent-dim); --bs-btn-active-border-color: var(--pf-accent-dim); --bs-btn-active-color: var(--pf-accent-ink);
  --bs-btn-disabled-bg: #3A312A; --bs-btn-disabled-border-color: #3A312A; --bs-btn-disabled-color: rgba(239, 230, 216, .45);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -10px rgba(239, 169, 78, .75); }
.btn-success {
  --bs-btn-bg: var(--pf-go); --bs-btn-border-color: var(--pf-go); --bs-btn-color: var(--pf-go-ink);
  --bs-btn-hover-bg: var(--pf-go-bright); --bs-btn-hover-border-color: var(--pf-go-bright); --bs-btn-hover-color: var(--pf-go-ink);
  --bs-btn-active-bg: #85B167; --bs-btn-active-border-color: #85B167; --bs-btn-active-color: var(--pf-go-ink);
}
.btn-success:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -10px rgba(147, 190, 116, .55); }
.btn-danger {
  --bs-btn-bg: var(--pf-danger); --bs-btn-border-color: var(--pf-danger); --bs-btn-color: var(--pf-danger-ink);
  --bs-btn-hover-bg: var(--pf-danger-bright); --bs-btn-hover-border-color: var(--pf-danger-bright); --bs-btn-hover-color: var(--pf-danger-ink);
  --bs-btn-active-bg: #D5644D; --bs-btn-active-border-color: #D5644D; --bs-btn-active-color: var(--pf-danger-ink);
}
.btn-outline-primary {
  --bs-btn-color: var(--pf-accent); --bs-btn-border-color: rgba(239, 169, 78, .45);
  --bs-btn-hover-bg: rgba(239, 169, 78, .12); --bs-btn-hover-border-color: var(--pf-accent); --bs-btn-hover-color: var(--pf-accent-bright);
  --bs-btn-active-bg: rgba(239, 169, 78, .2); --bs-btn-active-border-color: var(--pf-accent); --bs-btn-active-color: var(--pf-accent-bright);
}
.btn-outline-secondary {
  --bs-btn-color: var(--pf-text); --bs-btn-border-color: var(--pf-border-strong);
  --bs-btn-hover-bg: rgba(239, 230, 216, .08); --bs-btn-hover-border-color: rgba(239, 230, 216, .4); --bs-btn-hover-color: var(--pf-text-bright);
  --bs-btn-active-bg: rgba(239, 230, 216, .12); --bs-btn-active-border-color: rgba(239, 230, 216, .4); --bs-btn-active-color: var(--pf-text-bright);
}
.btn-outline-danger {
  --bs-btn-color: var(--pf-danger); --bs-btn-border-color: rgba(227, 112, 88, .45);
  --bs-btn-hover-bg: rgba(227, 112, 88, .14); --bs-btn-hover-border-color: var(--pf-danger); --bs-btn-hover-color: var(--pf-danger-bright);
  --bs-btn-active-bg: rgba(227, 112, 88, .22); --bs-btn-active-border-color: var(--pf-danger); --bs-btn-active-color: var(--pf-danger-bright);
}
.btn-outline-success {
  --bs-btn-color: var(--pf-go); --bs-btn-border-color: rgba(147, 190, 116, .5);
  --bs-btn-hover-bg: rgba(147, 190, 116, .14); --bs-btn-hover-border-color: var(--pf-go); --bs-btn-hover-color: var(--pf-go-bright);
  --bs-btn-active-bg: rgba(147, 190, 116, .22); --bs-btn-active-border-color: var(--pf-go); --bs-btn-active-color: var(--pf-go-bright);
}
.btn-outline-warning {
  --bs-btn-color: var(--pf-warn); --bs-btn-border-color: rgba(232, 193, 85, .5);
  --bs-btn-hover-bg: rgba(232, 193, 85, .14); --bs-btn-hover-border-color: var(--pf-warn); --bs-btn-hover-color: var(--pf-warn-bright);
  --bs-btn-active-bg: rgba(232, 193, 85, .22); --bs-btn-active-border-color: var(--pf-warn); --bs-btn-active-color: var(--pf-warn-bright);
}
.btn-light {
  --bs-btn-bg: rgba(239, 230, 216, .1); --bs-btn-border-color: transparent; --bs-btn-color: var(--pf-text);
  --bs-btn-hover-bg: rgba(239, 230, 216, .18); --bs-btn-hover-color: var(--pf-text-bright);
  --bs-btn-active-bg: rgba(239, 230, 216, .24); --bs-btn-active-color: var(--pf-text-bright);
}
.btn-link { --bs-btn-color: var(--pf-accent); --bs-btn-hover-color: var(--pf-accent-bright); }

/* ---------- forms ---------- */
.form-control, .form-select {
  background-color: var(--pf-bg-deep); border-color: rgba(239, 230, 216, .14); color: var(--pf-text);
  border-radius: .55rem; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.form-control:focus, .form-select:focus {
  background-color: #1A140F; border-color: rgba(239, 169, 78, .6);
  box-shadow: 0 0 0 .2rem rgba(239, 169, 78, .16); color: var(--pf-text);
}
.form-control::placeholder { color: rgba(173, 160, 143, .7); }
.form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ADA08F' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.input-group-text { background-color: var(--pf-bg-deep); border-color: rgba(239, 230, 216, .14); color: var(--pf-muted); }
.form-control[readonly] { background-color: var(--pf-bg-deep); color: var(--pf-muted); }
.form-check-input { background-color: var(--pf-bg-deep); border-color: var(--pf-border-strong); }
.form-check-input:checked { background-color: var(--pf-accent); border-color: var(--pf-accent); }
.form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(239, 169, 78, .16); }
.form-switch .form-check-input:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%232A1B08'/%3e%3c/svg%3e"); }
.form-control-color { padding: .15rem .25rem; }

/* ---------- badges ---------- */
.badge { font-weight: 700; letter-spacing: .02em; border-radius: .45rem; padding: .32em .55em; }
.badge.bg-success { color: var(--pf-go-ink) !important; }
.badge.bg-danger { color: var(--pf-danger-ink) !important; }
.badge.bg-warning { color: var(--pf-warn-ink) !important; }
.badge.bg-info { color: var(--pf-info-ink) !important; }
.badge.bg-secondary { background-color: #4A3F36 !important; color: #EFE6D8; }
.badge.bg-primary { color: var(--pf-accent-ink) !important; }

/* ---------- alerts ---------- */
.alert { border: 0; border-left: 3px solid; border-radius: .65rem; animation: pf-rise .3s var(--pf-ease) backwards; }
.alert-success { background: rgba(147, 190, 116, .13); border-color: var(--pf-go); color: #CBE3B8; }
.alert-danger { background: rgba(227, 112, 88, .13); border-color: var(--pf-danger); color: #F2B7A8; }
.alert-warning { background: rgba(232, 193, 85, .13); border-color: var(--pf-warn); color: #F0DB9F; }
.alert-info { background: rgba(148, 167, 204, .14); border-color: var(--pf-info); color: #CAD5EA; }
.alert .text-muted, .alert small { color: inherit; opacity: .75; }

/* ---------- tabs ---------- */
.nav-tabs { border: 0; gap: 4px; flex-wrap: wrap; }
.nav-tabs .nav-link { border: 0; border-radius: .6rem; color: var(--pf-muted); padding: .45rem .9rem; transition: background-color .15s ease, color .15s ease; }
.nav-tabs .nav-link:hover { color: var(--pf-text); background: rgba(239, 230, 216, .06); }
.nav-tabs .nav-link.active { background: var(--pf-surface); color: var(--pf-accent); }
.tab-pane { animation: pf-rise .3s var(--pf-ease) backwards; }
.tab-pane table { font-size: .9rem; }

/* ---------- tables ---------- */
.table {
  --bs-table-bg: transparent; --bs-table-color: var(--pf-text); --bs-table-border-color: var(--pf-border);
  --bs-table-hover-bg: rgba(239, 230, 216, .04); --bs-table-hover-color: var(--pf-text);
}
.table thead th { color: var(--pf-muted); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; border-bottom-color: var(--pf-border-strong); }

/* ---------- modals ---------- */
.modal-content { background: var(--pf-surface); border: 1px solid var(--pf-border-strong); border-radius: 1rem; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .85); }
.modal-backdrop { --bs-backdrop-bg: #0B0805; --bs-backdrop-opacity: .7; }
.modal-title { font-family: var(--pf-display); font-weight: 600; letter-spacing: -.02em; }

/* ---------- work queue ---------- */
.pf-slot { border-left: 3px solid var(--pf-border-strong); padding-left: 8px; }
.pf-st-open { border-left-color: var(--pf-go); }
.pf-st-taken { border-left-color: var(--pf-warn); }
.pf-st-in_progress { border-left-color: var(--pf-accent); }
.pf-st-done { border-left-color: var(--pf-border-strong); opacity: .7; }
.form-range::-webkit-slider-runnable-track { background: var(--pf-bg-deep); }
.form-range::-moz-range-track { background: var(--pf-bg-deep); }
.form-range::-webkit-slider-thumb { background: var(--pf-accent); }
.form-range::-moz-range-thumb { background: var(--pf-accent); border: 0; }

/* ---------- dropdowns ---------- */
.dropdown-menu {
  max-height: min(420px, 65vh); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(239, 230, 216, .2) transparent;
  --bs-dropdown-bg: var(--pf-bg-deep); --bs-dropdown-border-color: var(--pf-border);
  --bs-dropdown-link-color: var(--pf-text);
  --bs-dropdown-link-hover-bg: rgba(239, 169, 78, .1); --bs-dropdown-link-hover-color: var(--pf-accent-bright);
  --bs-dropdown-link-active-bg: rgba(239, 169, 78, .18); --bs-dropdown-link-active-color: var(--pf-accent-bright);
  --bs-dropdown-link-disabled-color: rgba(173, 160, 143, .5); --bs-dropdown-divider-bg: var(--pf-border);
  border-radius: .75rem; padding: .4rem; box-shadow: 0 18px 44px -16px rgba(0, 0, 0, .75);
}
.dropdown-item { border-radius: .5rem; transition: background-color .12s ease; }

/* ---------- canvas editor ---------- */
.pf-canvas-outer { border: 1px solid var(--pf-border); border-radius: 14px; background: var(--pf-bg-deep); padding: 14px; overflow: auto; min-height: 72vh; }
.pf-canvas-scaler { position: relative; margin: 0 auto; }
.pf-canvas-edit { position: relative; transform-origin: 0 0; background: #fff; border-radius: 6px; box-shadow: 0 16px 50px -16px rgba(0, 0, 0, .75); }
.pf-canvas-edit::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(0, 0, 0, .1) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; }
.pf-box { position: absolute; cursor: move; user-select: none; outline: 1px dashed rgba(0, 0, 0, .14); border-radius: 4px; transition: outline-color .12s ease; }
.pf-box:hover { outline: 1px dashed var(--pf-accent-deep); }
.pf-box.selected { outline: 2px solid var(--pf-accent-deep); }
.pf-box .pf-prev { width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.pf-box .pf-resize { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; background: var(--pf-accent-deep); border: 2px solid #fff; border-radius: 50%; cursor: nwse-resize; display: none; transition: transform .12s ease; }
.pf-box .pf-resize:hover { transform: scale(1.2); }
.pf-box.selected .pf-resize { display: block; }
.pf-box .pf-tag { position: absolute; top: -20px; left: 0; font-size: 11px; background: var(--pf-accent-deep); color: #fff; border-radius: 4px 4px 0 0; padding: 1px 7px; display: none; white-space: nowrap; }
.pf-box.selected .pf-tag { display: block; }

/* preview overlay */
#previewOverlay { position: fixed; inset: 0; z-index: 2000; background: rgba(14, 10, 7, .82); display: flex; flex-direction: column; animation: pf-fade .2s ease backwards; }
@keyframes pf-fade { from { opacity: 0; } to { opacity: 1; } }
#previewOverlay .pv-bar { background: var(--pf-bg-deep); color: var(--pf-text); border-bottom: 1px solid var(--pf-border); padding: 8px 14px; display: flex; align-items: center; gap: 12px; }
#previewOverlay .pv-body { flex: 1; overflow: auto; background: #fff; }

/* ---------- misc ---------- */
.pf-auth { max-width: 430px; }
footer { border-color: var(--pf-border) !important; }
footer .link-secondary { color: var(--pf-muted) !important; }
footer .link-secondary:hover { color: var(--pf-text) !important; }
.pf-canvas-outer::-webkit-scrollbar { height: 10px; width: 10px; }
.pf-canvas-outer::-webkit-scrollbar-thumb { background: rgba(239, 230, 216, .15); border-radius: 5px; }
.pf-canvas-outer::-webkit-scrollbar-track { background: transparent; }