/* =========================================================
   Flowear Social — front-end styles
   Replicates the Flowear UI (violet → fuchsia, soft cards)
   Scoped under .flowear so it never fights the active theme.
   ========================================================= */

.flowear {
  --fw-radius: 1rem;
  --fw-bg: oklch(0.985 0.004 280);
  --fw-fg: oklch(0.22 0.03 285);
  --fw-card: oklch(1 0 0);
  --fw-muted: oklch(0.965 0.008 285);
  --fw-muted-fg: oklch(0.55 0.03 285);
  --fw-accent: oklch(0.95 0.04 305);
  --fw-accent-fg: oklch(0.4 0.12 300);
  --fw-border: oklch(0.92 0.01 290);
  --fw-primary: oklch(0.55 0.27 300);
  --fw-primary-fg: oklch(0.99 0 0);
  --fw-primary-glow: oklch(0.62 0.25 330);
  --fw-destructive: oklch(0.62 0.24 18);
  --fw-ring: oklch(0.55 0.27 300);
  --fw-gradient: linear-gradient(135deg, var(--fw-primary), var(--fw-primary-glow));
  --fw-gradient-page: linear-gradient(150deg, oklch(0.97 0.03 300), oklch(0.97 0.02 250), oklch(0.98 0.025 30));
  --fw-shadow-soft: 0 10px 40px -12px color-mix(in oklab, var(--fw-primary) 22%, transparent);
  --fw-shadow-card: 0 4px 24px -8px color-mix(in oklab, oklch(0.5 0.1 285) 18%, transparent);

  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--fw-fg);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
.flowear.flowear--dark {
  --fw-bg: oklch(0.18 0.02 285);
  --fw-fg: oklch(0.97 0.01 285);
  --fw-card: oklch(0.22 0.025 285);
  --fw-muted: oklch(0.27 0.02 285);
  --fw-muted-fg: oklch(0.7 0.02 285);
  --fw-accent: oklch(0.3 0.06 300);
  --fw-accent-fg: oklch(0.95 0.02 305);
  --fw-border: oklch(1 0 0 / 12%);
  --fw-primary: oklch(0.62 0.26 305);
  --fw-primary-glow: oklch(0.65 0.24 335);
  --fw-gradient-page: linear-gradient(150deg, oklch(0.2 0.03 300), oklch(0.18 0.02 270), oklch(0.2 0.03 320));
}
.flowear *,
.flowear *::before,
.flowear *::after { box-sizing: border-box; }

/* ---------- layout shell ---------- */
.flowear {
  background-image: var(--fw-gradient-page);
  min-height: 100%;
  border-radius: var(--fw-radius);
  width: 100%;
}
@media (max-width: 639px) { .flowear { min-height: auto; } }
.fw-shell {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  gap: 1.5rem;
  padding: 0.75rem;
}
@media (min-width: 640px) { .fw-shell { padding: 1.5rem; } }
@media (max-width: 639px) { .fw-shell { padding: 0.5rem; } }

.fw-main { min-width: 0; flex: 1; padding-bottom: 7rem; }
@media (min-width: 1024px) { .fw-main { padding-bottom: 0; } }
@media (max-width: 639px) { .fw-main { padding-bottom: 3.5rem; } }

/* ---------- sidebar ---------- */
.fw-sidebar {
  display: none;
  width: 18rem;
  flex-shrink: 0;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: 1.5rem;
  background: var(--fw-card);
  padding: 1.25rem;
  box-shadow: var(--fw-shadow-card);
  align-self: flex-start;
  position: sticky;
  top: 1.5rem;
}
@media (min-width: 1024px) { .fw-sidebar { display: flex; } }
.fw-side-profile {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem; margin-bottom: 1rem; border-radius: 1rem;
  text-decoration: none; color: var(--fw-fg); transition: background .15s;
}
.fw-side-profile:hover { background: var(--fw-muted); }
.fw-side-profile img { width: 2.75rem; height: 2.75rem; border-radius: 999px; object-fit: cover; }
.fw-side-profile span { font-weight: 600; }
.fw-nav { display: flex; flex-direction: column; gap: 0.25rem; }
.fw-nav a, .fw-nav button {
  display: flex; align-items: center; gap: 0.75rem;
  border-radius: 1rem; padding: 0.75rem 1rem; font-weight: 500;
  color: var(--fw-fg); text-decoration: none; background: none; border: 0;
  cursor: pointer; font-size: 1rem; transition: background .15s, color .15s;
  font-family: inherit;
}
.fw-nav a:hover, .fw-nav button:hover { background: var(--fw-accent); color: var(--fw-accent-fg); }
.fw-nav a.is-active {
  background-image: var(--fw-gradient); color: var(--fw-primary-fg);
  box-shadow: var(--fw-shadow-soft);
}
.fw-nav a.is-active:hover { color: var(--fw-primary-fg); }
.fw-nav svg { width: 1.25rem; height: 1.25rem; }
.fw-create-btn {
  margin-top: 1rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 1rem; padding: 0.75rem 1rem; font-weight: 600; cursor: pointer; border: 0;
  background-image: var(--fw-gradient); color: var(--fw-primary-fg);
  box-shadow: var(--fw-shadow-soft); transition: transform .15s; font-family: inherit; font-size: 1rem;
}
.fw-create-btn:hover { transform: translateY(-2px); }
.fw-side-theme {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin-top: 1rem; padding: .65rem .85rem; border-radius: 1rem; background: var(--fw-muted);
  font-size: .85rem; font-weight: 600; color: var(--fw-fg);
}
.fw-side-foot { margin-top: auto; padding-top: 1.5rem; color: var(--fw-muted-fg); font-size: .75rem; }
.fw-side-foot .fw-links { display: flex; gap: 1rem; margin-bottom: .5rem; }
.fw-side-foot a { color: inherit; text-decoration: none; }

/* ---------- theme toggle switch ---------- */
.fw-theme-toggle {
  position: relative; display: inline-flex; align-items: center; gap: 0; width: 3.4rem; height: 1.8rem;
  border: 0; background: none; padding: 0; cursor: pointer; flex-shrink: 0;
}
.fw-theme-track {
  position: absolute; inset: 0; border-radius: 999px; background: var(--fw-border);
  transition: background .2s;
}
.flowear--dark .fw-theme-track { background-image: var(--fw-gradient); }
.fw-theme-thumb {
  position: absolute; top: 50%; left: 3px; transform: translateY(-50%);
  width: 1.35rem; height: 1.35rem; border-radius: 999px; background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.3); transition: left .2s;
}
.flowear--dark .fw-theme-thumb { left: calc(100% - 1.35rem - 3px); }
.fw-theme-ico { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; color: var(--fw-muted-fg); pointer-events: none; }
.fw-theme-sun { left: 6px; }
.fw-theme-moon { right: 6px; }
.flowear--dark .fw-theme-moon { color: #fff; }
.fw-theme-toggle[aria-pressed="false"] .fw-theme-sun { color: var(--fw-primary); }

/* ---------- cards / panels ---------- */
.fw-panel {
  border-radius: 1.5rem; background: var(--fw-card);
  padding: 1rem; box-shadow: var(--fw-shadow-card);
  max-width: 100%;
}
@media (min-width: 640px) { .fw-panel { padding: 1.5rem; } }
@media (max-width: 420px) { .fw-panel { padding: 0.8rem; border-radius: 1.2rem; } }
@media (max-width: 639px) { .fw-vendor2, .fw-ai-studio { padding: .25rem; border-radius: .75rem; } }
.fw-profile-panel { padding: 0; overflow: hidden; }

/* ---------- discover header ---------- */
.fw-disc-head { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }
.fw-disc-head h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.fw-disc-tools { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
@media (min-width: 640px) {
  .fw-disc-head { flex-direction: row; align-items: center; }
  .fw-disc-tools { flex: 1; margin-left: auto; }
}
.fw-search { position: relative; flex: 1; max-width: 36rem; }
.fw-search svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: var(--fw-muted-fg); }
.fw-search input {
  width: 100%; border-radius: 999px; background: var(--fw-muted); border: 0;
  padding: 0.75rem 1rem 0.75rem 2.75rem; font-size: 0.875rem; outline: none; color: var(--fw-fg); font-family: inherit;
}
.fw-search input:focus { box-shadow: 0 0 0 2px color-mix(in oklab, var(--fw-ring) 40%, transparent); }
.fw-theme-toggle--head { align-self: center; }
.fw-icon-btn {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex-shrink: 0;
  border-radius: 999px; background: var(--fw-muted); color: var(--fw-fg); border: 0; cursor: pointer; transition: background .15s;
}
.fw-icon-btn:hover { background: var(--fw-accent); }

/* ---------- stories ---------- */
.fw-stories { display: flex; gap: 1rem; overflow-x: auto; padding: 0 0.25rem 0.5rem; margin: 0 -0.25rem; }
.fw-stories::-webkit-scrollbar { display: none; }
.fw-stories { scrollbar-width: none; }
.fw-story { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; flex-shrink: 0; background: none; border: 0; cursor: pointer; padding: 0; }
.fw-story-addring {
  position: relative; width: 4rem; height: 4rem; border-radius: 999px;
  display: grid; place-items: center; background: var(--fw-accent); color: var(--fw-primary);
  border: 2px dashed color-mix(in oklab, var(--fw-primary) 45%, transparent); overflow: hidden;
}
.fw-story-addring img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px; }
.fw-story-plus {
  position: absolute; bottom: -2px; right: -2px; width: 1.4rem; height: 1.4rem; border-radius: 999px;
  display: grid; place-items: center; background-image: var(--fw-gradient); color: #fff; border: 2px solid var(--fw-card);
}
.fw-story-ring { position: relative; border-radius: 999px; padding: 2px; background: linear-gradient(to top right, var(--fw-primary), var(--fw-primary-glow)); }
.fw-story-ring img { width: 4rem; height: 4rem; border-radius: 999px; border: 2px solid var(--fw-card); object-fit: cover; display: block; }
.fw-live { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); background: var(--fw-destructive); color: #fff; font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 6px; }
.fw-story-name { font-size: 0.75rem; font-weight: 500; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fw-fg); }
.fw-story-add .fw-story-name { color: var(--fw-muted-fg); }

/* ---------- create row (below stories) ---------- */
.fw-create-row {
  display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0 0.25rem;
  padding: 0.6rem 0.75rem; border-radius: 999px; background: var(--fw-muted);
}
.fw-create-row-av { width: 2.5rem; height: 2.5rem; border-radius: 999px; object-fit: cover; flex-shrink: 0; }
.fw-create-row-input {
  flex: 1; text-align: left; border: 0; background: var(--fw-card); color: var(--fw-muted-fg);
  border-radius: 999px; padding: 0.7rem 1rem; font-family: inherit; font-size: 0.9rem; cursor: pointer; min-width: 0;
}
.fw-create-row-input:hover { color: var(--fw-fg); }
.fw-create-row-btn {
  display: inline-flex; align-items: center; gap: 0.35rem; flex-shrink: 0; border: 0; cursor: pointer;
  border-radius: 999px; padding: 0.65rem 1.1rem; font-weight: 600; font-family: inherit; font-size: 0.9rem;
  background-image: var(--fw-gradient); color: var(--fw-primary-fg); box-shadow: var(--fw-shadow-soft);
}
.fw-create-row-btn:hover { transform: translateY(-1px); }
@media (max-width: 520px) { .fw-create-row-btn span { display: none; } }

/* ---------- feed grid ---------- */
.fw-feed { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
@media (min-width: 640px) { .fw-feed { grid-template-columns: 1fr 1fr; } }

/* ---------- infinite scroll spinner ---------- */
.fw-feed-spinner { display: none; text-align: center; padding: 2rem 0; grid-column: 1 / -1; }
.fw-spinner-dot { display: inline-block; width: 10px; height: 10px; margin: 0 4px; border-radius: 50%; background: var(--fw-primary, #7c3aed); animation: fw-bounce 1.2s ease-in-out infinite; }
.fw-spinner-dot:nth-child(2) { animation-delay: 0.15s; }
.fw-spinner-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes fw-bounce { 0%, 80%, 100% { transform: scale(0.4); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }

.fw-post { position: relative; overflow: hidden; border-radius: 1.5rem; box-shadow: var(--fw-shadow-card); background: #000; }
.fw-post-stage { position: relative; }
.fw-post > img, .fw-post-media { width: 100%; height: 24rem; object-fit: cover; display: block; }
@media (min-width: 640px) { .fw-post > img, .fw-post-media { height: 30rem; } }
.fw-post-yt { position: relative; width: 100%; aspect-ratio: 9 / 14; max-height: 30rem; }
.fw-post-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fw-post-grad { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.05) 55%, rgba(0,0,0,.22)); }
.fw-post--media .fw-post-grad { background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0) 45%); }
.fw-post-more {
  position: absolute; right: 1rem; top: 1rem; display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem; border-radius: 999px; background: rgba(255,255,255,.2);
  color: #fff; backdrop-filter: blur(6px); border: 0; cursor: pointer; z-index: 3;
}
.fw-post-menu {
  position: absolute; right: .75rem; top: 3.75rem; z-index: 10;
  min-width: 9rem; border-radius: .85rem; padding: .35rem;
  background: #fff; box-shadow: 0 8px 30px rgba(0,0,0,.18);
  display: none; flex-direction: column; gap: .15rem;
}
.fw-post-menu.is-open { display: flex; }
.fw-post-menu-item {
  display: flex; align-items: center; gap: .5rem; width: 100%; padding: .5rem .7rem;
  border: 0; border-radius: .65rem; background: none; color: #1a1a2e; font: inherit;
  font-size: .82rem; font-weight: 600; cursor: pointer; text-align: left; white-space: nowrap;
}
.fw-post-menu-item:hover { background: #f3f0ff; }
.fw-post-menu-item--danger:hover { background: #fef2f2; color: #dc2626; }
.fw-post-menu-item svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.fw-rail { position: absolute; bottom: 7.5rem; right: 1rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; color: #fff; z-index: 3; }
.fw-rail button, .fw-rail a { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; background: none; border: 0; color: #fff; cursor: pointer; text-decoration: none; }
.fw-rail svg { width: 1.6rem; height: 1.6rem; filter: drop-shadow(0 1px 3px rgba(0,0,0,.4)); }
.fw-rail .fw-count { font-size: 0.875rem; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.fw-rail .fw-heart.is-liked svg { fill: var(--fw-destructive); color: var(--fw-destructive); }
.fw-rail .fw-heart svg { fill: rgba(255,255,255,.25); }
.fw-rail .fw-buy svg { fill: none; }
.fw-rail .fw-buy:hover { color: var(--fw-primary-glow); }
.fw-post-meta { position: absolute; inset-inline: 0; bottom: 0; padding: 1.25rem; color: #fff; pointer-events: none; z-index: 2; }
.fw-post--media .fw-post-meta { position: relative; background: var(--fw-card); color: var(--fw-fg); }
.fw-post-author { display: flex; align-items: center; gap: 0.5rem; }
.fw-post-author img { width: 2.25rem; height: 2.25rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.4); object-fit: cover; }
.fw-post--media .fw-post-author img { border-color: var(--fw-border); }
.fw-post-author .fw-name { font-weight: 600; }
.fw-verify { width: 1rem; height: 1rem; color: var(--fw-primary-glow); }
.fw-post-cap { margin: 0.35rem 0 0; max-width: 90%; font-size: 0.875rem; color: rgba(255,255,255,.92); }
.fw-post--media .fw-post-cap { color: var(--fw-muted-fg); }
.fw-post-tag { margin: 0.25rem 0 0; font-size: 0.875rem; font-weight: 600; color: var(--fw-primary-glow); }

/* comments panel inside post (toggle) */
.fw-comments { display: none; padding: 1rem; background: var(--fw-card); position: relative; z-index: 4; }
.fw-comments.is-open { display: block; }
.fw-comment-head { font-weight: 700; font-size: .9rem; margin-bottom: .5rem; }
.fw-comment-list { display: flex; flex-direction: column; gap: .15rem; max-height: 16rem; overflow-y: auto; }
.fw-comment { display: flex; gap: .6rem; padding: .55rem 0; align-items: flex-start; }
.fw-comment--reply { margin-left: 2.2rem; }
.fw-comment--reply::before { content: ""; position: absolute; left: -1.2rem; top: .1rem; bottom: .5rem; width: 2px; background: var(--fw-border); border-radius: 2px; }
.fw-comment { position: relative; }
.fw-comment-av { width: 1.9rem; height: 1.9rem; border-radius: 999px; object-fit: cover; flex-shrink: 0; }
.fw-comment-body { min-width: 0; }
.fw-comment-text { font-size: .85rem; line-height: 1.35; }
.fw-comment-text strong { font-weight: 700; }
.fw-comment-actions { display: flex; align-items: center; gap: 1rem; margin-top: .2rem; }
.fw-comment-reply { background: none; border: 0; padding: 0; cursor: pointer; color: var(--fw-muted-fg); font-size: .72rem; font-weight: 600; font-family: inherit; }
.fw-comment-reply:hover { color: var(--fw-primary); }
.fw-comment-like { display: inline-flex; align-items: center; gap: .25rem; background: none; border: 0; padding: 0; cursor: pointer; color: var(--fw-muted-fg); font-size: .72rem; font-weight: 600; font-family: inherit; }
.fw-comment-like svg { width: 14px; height: 14px; }
.fw-comment-like:hover { color: var(--fw-destructive); }
.fw-comment-like.is-liked { color: var(--fw-destructive); }
.fw-comment-like.is-liked svg { fill: var(--fw-destructive); }
.fw-comment-empty { color: var(--fw-muted-fg); font-size: .82rem; padding: .5rem 0; }
.fw-comment-form { display: flex; gap: .5rem; margin-top: .75rem; }
.fw-comment-form input { flex: 1; min-width: 0; border: 1px solid var(--fw-border); border-radius: 999px; padding: .55rem .9rem; font-family: inherit; background: var(--fw-bg); color: var(--fw-fg); outline: none; }
.fw-comment-form input:focus { box-shadow: 0 0 0 2px color-mix(in oklab, var(--fw-ring) 30%, transparent); }
.fw-comment-form button { display: grid; place-items: center; border: 0; border-radius: 999px; width: 2.4rem; height: 2.4rem; flex-shrink: 0; background-image: var(--fw-gradient); color: #fff; cursor: pointer; }

/* ---------- profile / dashboard ---------- */
.fw-cover { position: relative; height: 11rem; }
@media (min-width: 640px) { .fw-cover { height: 15rem; } }
.fw-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fw-cover-actions { position: absolute; top: 1rem; right: 1rem; display: flex; gap: .5rem; }
.fw-cover-back { position: absolute; top: 1rem; left: 1rem; }
.fw-cover-btn {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: 999px; background: rgba(0,0,0,.3); color: #fff; backdrop-filter: blur(6px); border: 0; cursor: pointer; text-decoration: none;
}
.fw-cover-btn:hover { background: rgba(0,0,0,.45); }
.fw-cover-edit {
  position: absolute; bottom: 1rem; right: 1rem; display: inline-flex; align-items: center; gap: .4rem;
  border: 0; cursor: pointer; border-radius: 999px; padding: .5rem .9rem; font-family: inherit; font-size: .8rem; font-weight: 600;
  background: rgba(0,0,0,.45); color: #fff; backdrop-filter: blur(6px);
}
.fw-cover-edit:hover { background: rgba(0,0,0,.6); }

.fw-profile-body { padding: 0 1.25rem 1rem; }
@media (min-width: 640px) { .fw-profile-body { padding: 0 2rem 1rem; } }
.fw-profile-top { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
@media (min-width: 640px) { .fw-profile-top { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.fw-profile-id { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
@media (min-width: 640px) { .fw-profile-id { flex-direction: row; align-items: flex-end; gap: 1rem; } }
.fw-avatar-wrap { position: relative; margin-top: -3rem; }
@media (min-width: 640px) { .fw-avatar-wrap { margin-top: -4rem; } }
.fw-avatar-lg { width: 6rem; height: 6rem; border-radius: 999px; border: 4px solid var(--fw-card); object-fit: cover; display: block; box-shadow: var(--fw-shadow-card); }
@media (min-width: 640px) { .fw-avatar-lg { width: 7.5rem; height: 7.5rem; } }
.fw-avatar-edit {
  position: absolute; bottom: 2px; right: 2px; width: 2rem; height: 2rem; border-radius: 999px; cursor: pointer; border: 3px solid var(--fw-card);
  display: grid; place-items: center; background-image: var(--fw-gradient); color: #fff;
}
.fw-profile-name { display: flex; align-items: center; gap: 0.375rem; justify-content: center; }
@media (min-width: 640px) { .fw-profile-name { justify-content: flex-start; } .fw-profile-nameblock { text-align: left; padding-bottom: .35rem; } }
.fw-profile-nameblock { text-align: center; }
.fw-profile-name h1 { font-size: 1.35rem; font-weight: 700; margin: 0; }
@media (min-width: 640px) { .fw-profile-name h1 { font-size: 1.6rem; } }
.fw-profile-name .fw-verify { color: var(--fw-primary); width: 1.25rem; height: 1.25rem; }
.fw-handle { font-size: 0.875rem; color: var(--fw-muted-fg); margin: 0.1rem 0 0; }

.fw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border-radius: 999px; padding: 0.65rem 1.75rem; font-size: 0.875rem; font-weight: 600;
  border: 0; cursor: pointer; font-family: inherit; transition: transform .15s, background .15s;
}
.fw-btn-primary { background-image: var(--fw-gradient); color: var(--fw-primary-fg); box-shadow: var(--fw-shadow-soft); }
.fw-btn-primary:hover { transform: translateY(-2px); }
.fw-btn-primary.is-following { background: var(--fw-card); color: var(--fw-primary); box-shadow: none; border: 2px solid var(--fw-primary); }
.fw-btn-primary.is-following:hover { background: var(--fw-primary); color: var(--fw-primary-fg, #fff); }
.fw-btn-muted { background: var(--fw-muted); color: var(--fw-fg); }
.fw-btn-muted:hover { background: var(--fw-accent); }
.fw-btn-block { width: 100%; padding: 0.85rem; }

.fw-stats { margin-top: 1.25rem; display: flex; align-items: center; gap: 2.5rem; justify-content: center; }
@media (min-width: 640px) { .fw-stats { justify-content: flex-start; gap: 3rem; } }
.fw-stat { text-align: center; }
.fw-stat .fw-stat-v { font-size: 1.125rem; font-weight: 700; }
.fw-stat .fw-stat-l { font-size: 0.75rem; color: var(--fw-muted-fg); }
.fw-stat--clickable { cursor: pointer; padding: .25rem .5rem; border-radius: .5rem; transition: background .2s; }
.fw-stat--clickable:hover { background: var(--fw-muted); }
.fw-stat--clickable:active { transform: scale(.97); }
.fw-mobile-actions { margin-top: 1.25rem; display: flex; gap: 0.75rem; }
.fw-desktop-actions { display: none; gap: .5rem; }
@media (min-width: 640px) { .fw-mobile-actions { display: none; } .fw-desktop-actions { display: flex; } }

.fw-tabs { margin-top: 1.5rem; display: flex; border-bottom: 1px solid var(--fw-border); overflow-x: auto; scrollbar-width: none; }
.fw-tabs::-webkit-scrollbar { display: none; }
.fw-tab {
  position: relative; flex: 1; min-width: max-content; padding: 0 .75rem 0.75rem; font-size: 0.875rem; font-weight: 600;
  background: none; border: 0; cursor: pointer; color: var(--fw-muted-fg); font-family: inherit; transition: color .15s;
}
.fw-tab:hover { color: var(--fw-fg); }
.fw-tab.is-active { color: var(--fw-primary); }
.fw-tab.is-active::after { content: ""; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); height: 2px; width: 3rem; border-radius: 999px; background-image: var(--fw-gradient); }

.fw-tabpanel { padding: 1.25rem; display: none; }
.fw-tabpanel.is-active { display: block; }
@media (max-width: 639px) { .fw-tabpanel { padding: .5rem; } }
.fw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (min-width: 640px) { .fw-grid { grid-template-columns: 1fr 1fr 1fr; } }
.fw-grid-item { position: relative; overflow: hidden; border-radius: 1rem; }
.fw-grid-item img { aspect-ratio: 1/1; width: 100%; object-fit: cover; transition: transform .3s; display: block; }
.fw-grid-item:hover img { transform: scale(1.05); }
.fw-views { position: absolute; bottom: 0.5rem; left: 0.5rem; display: flex; align-items: center; gap: 0.25rem; border-radius: 999px; background: rgba(0,0,0,.45); padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: #fff; backdrop-filter: blur(4px); }
.fw-views svg { width: .9rem; height: .9rem; }
.fw-empty { display: grid; place-items: center; padding: 4rem 0; text-align: center; color: var(--fw-muted-fg); font-size: .875rem; }

/* ---------- settings panel ---------- */
.fw-settings { display: grid; gap: 1.5rem; max-width: 36rem; }
.fw-settings-form { border: 1px solid var(--fw-border); border-radius: 1.25rem; padding: 1.25rem; background: var(--fw-card); }
.fw-settings-title { margin: 0 0 1rem; font-size: 1rem; font-weight: 700; }
.fw-pref-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-top: 1px solid var(--fw-border); }
.fw-pref-row:first-of-type { border-top: 0; padding-top: 0; }
.fw-pref-row strong { font-size: .9rem; }
.fw-pref-sub { margin: .15rem 0 0; font-size: .78rem; color: var(--fw-muted-fg); }

/* store tab (woocommerce) */
.fw-store-cats { display: flex; gap: .5rem; overflow-x: auto; padding: .5rem 0 1.25rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.fw-store-cats::-webkit-scrollbar { display: none; }
.fw-store-cat { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .65rem .8rem; border-radius: 1rem; border: 2px solid transparent; background: var(--fw-card); cursor: pointer; font-family: inherit; font-size: .7rem; font-weight: 600; color: var(--fw-muted-fg); white-space: nowrap; scroll-snap-align: start; transition: all .25s cubic-bezier(.4,0,.2,1); flex: 0 0 auto; min-width: 76px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.fw-store-cat img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; transition: transform .25s ease; }
.fw-store-cat:hover { border-color: color-mix(in oklab, var(--fw-primary) 30%, transparent); color: var(--fw-primary); transform: translateY(-1px); }
.fw-store-cat.is-active { border-color: var(--fw-primary); background: var(--fw-card); color: var(--fw-primary); box-shadow: 0 4px 16px -4px color-mix(in oklab, var(--fw-primary) 25%, transparent); }
.fw-store-cat.is-active img { transform: scale(1.05); }

.fw-store-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (min-width: 768px) { .fw-store-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

.fw-product { position: relative; border-radius: 1.25rem; overflow: hidden; background: var(--fw-card); border: 2px solid color-mix(in oklab, var(--fw-primary) 18%, var(--fw-border, #e2e2e2)); text-decoration: none; color: var(--fw-fg); display: flex; flex-direction: column; transition: all .3s cubic-bezier(.4,0,.2,1); box-shadow: 0 1px 4px rgba(0,0,0,.04), 0 6px 20px -6px rgba(0,0,0,.06); }
.fw-product:hover { transform: translateY(-4px); border-color: var(--fw-primary); box-shadow: 0 2px 8px rgba(0,0,0,.04), 0 16px 40px -10px color-mix(in oklab, var(--fw-primary) 25%, rgba(0,0,0,.12)); }
.fw-product-link { text-decoration: none; color: inherit; display: block; }

.fw-product-img { position: relative; overflow: hidden; background: linear-gradient(145deg, color-mix(in oklab, var(--fw-primary) 6%, #f8f7fc), color-mix(in oklab, var(--fw-primary-glow, var(--fw-primary)) 4%, #f5f3fa)); padding: .4rem; }
.fw-product-img img { aspect-ratio: 1/1; object-fit: cover; width: 100%; display: block; border-radius: .85rem; transition: transform .4s cubic-bezier(.4,0,.2,1); }
.fw-product:hover .fw-product-img img { transform: scale(1.06); }

.fw-price-badge { position: absolute; bottom: .75rem; left: .75rem; background: var(--fw-gradient); color: #fff; font-weight: 800; font-size: .82rem; padding: .4rem .7rem; border-radius: 999px; box-shadow: 0 4px 20px -2px color-mix(in oklab, var(--fw-primary) 50%, transparent), 0 2px 6px rgba(0,0,0,.1); letter-spacing: -.01em; max-width: calc(100% - 1.5rem); text-align: center; }
.fw-price-badge del { font-size: .65rem; opacity: .7; text-decoration: line-through; font-weight: 600; }
.fw-price-badge ins { text-decoration: none; }

.fw-product-body { padding: .8rem .85rem .9rem; display: flex; flex-direction: column; gap: .3rem; }
.fw-product-stock { font-size: .72rem; font-weight: 600; color: var(--fw-muted-fg); letter-spacing: .01em; }
.fw-product-title { font-weight: 800; font-size: .95rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--fw-fg); letter-spacing: -.01em; }
.fw-product-title a { text-decoration: none; color: inherit; transition: color .2s ease; }
.fw-product-title a:hover { color: var(--fw-primary); }

.fw-store-rating { display: inline-flex; align-items: center; gap: .15rem; margin-top: .1rem; padding: .2rem .5rem; background: color-mix(in oklab, var(--fw-primary) 6%, transparent); border-radius: 999px; width: fit-content; }
.fw-star { display: inline-flex; color: #d4d4d4; }
.fw-star--filled { color: #f5a623; }
.fw-star svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.fw-store-rating-txt { font-size: .72rem; font-weight: 700; color: var(--fw-fg); margin-left: .15rem; }

.fw-product.is-hidden { display: none; }

/* ---------- mobile bottom nav ---------- */
.fw-mobnav {
  position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); z-index: 40;
  display: flex; align-items: center; justify-content: center; gap: .25rem;
  background: var(--fw-gradient);
  padding: .5rem .75rem; padding-bottom: max(.5rem, env(safe-area-inset-bottom));
  border-radius: 999px; box-shadow: 0 8px 32px -8px rgba(122,82,204,.45), 0 2px 8px rgba(0,0,0,.08);
  backdrop-filter: blur(12px);
}
@media (max-width: 639px) {
  .fw-mobnav {
    max-width: calc(100vw - 1rem);
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    gap: .1rem; padding-left: .45rem; padding-right: .45rem;
  }
  .fw-mobnav::-webkit-scrollbar { display: none; }
  .fw-mobnav a, .fw-mobnav button { width: 2.1rem; height: 2.1rem; }
  .fw-mobnav-create { width: 2.3rem !important; height: 2.3rem !important; }
}
@media (min-width: 1024px) { .fw-mobnav { display: none; } }
.fw-mobnav a, .fw-mobnav button {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: 0 0 auto;
  border-radius: 999px; border: none; background: transparent;
  color: #fff; text-decoration: none; cursor: pointer;
  transition: all .2s ease; font-size: 0; line-height: 0; padding: 0;
}
.fw-mobnav a.is-active {
  background: rgba(255,255,255,.22); color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.fw-mobnav a:not(.is-active):hover { background: rgba(255,255,255,.12); }
.fw-mobnav-create { background: #fff !important; box-shadow: 0 4px 12px rgba(0,0,0,.18); width: 2.75rem !important; height: 2.75rem !important; }
.fw-mobnav-create svg { color: var(--fw-primary); stroke-width: 2.8 !important; }
.fw-mobnav-create:hover { background: #f0eaff !important; box-shadow: 0 4px 16px rgba(0,0,0,.22); }
.fw-mobnav svg { width: 1.25rem; height: 1.25rem; pointer-events: none; stroke-width: 2.6 !important; }

/* ---------- modal / dialog ---------- */
.fw-modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 1rem; }
.fw-modal.is-open { display: flex; }
.fw-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(2px); }
.fw-modal-card {
  position: relative; width: 100%; max-width: 32rem; border-radius: 1.5rem; background: var(--fw-card);
  padding: 1.5rem; box-shadow: var(--fw-shadow-soft); max-height: 90vh; overflow-y: auto; color: var(--fw-fg);
}
.fw-modal-card h2 { margin: 0 0 .25rem; font-size: 1.125rem; font-weight: 700; }
.fw-modal-card .fw-modal-sub { margin: 0 0 1rem; color: var(--fw-muted-fg); font-size: .875rem; }
.fw-modal-close { position: absolute; right: 1rem; top: 1rem; background: var(--fw-muted); border: 0; border-radius: 999px; width: 2rem; height: 2rem; cursor: pointer; color: var(--fw-fg); display: grid; place-items: center; z-index: 2; }

/* ---------- followers / following modal ---------- */
.fw-fl-modal { max-width: 24rem; width: min(94vw, 24rem); }
.fw-fl-title { margin: 0 0 1rem; font-size: 1.1rem; font-weight: 700; }
.fw-fl-body { max-height: 60vh; overflow-y: auto; }
.fw-fl-list { display: flex; flex-direction: column; gap: .15rem; }
.fw-fl-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem .5rem; border-radius: .75rem; transition: background .15s; }
.fw-fl-row:hover { background: var(--fw-muted); }
.fw-fl-user { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--fw-fg); flex: 1; min-width: 0; }
.fw-fl-av { width: 2.5rem; height: 2.5rem; border-radius: 999px; object-fit: cover; flex-shrink: 0; border: 2px solid var(--fw-muted); }
.fw-fl-name { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-fl-empty { text-align: center; padding: 2rem 1rem; color: var(--fw-muted-fg); font-size: .9rem; }
.fw-fl-loading { text-align: center; padding: 2rem 1rem; color: var(--fw-muted-fg); font-size: .9rem; }
.fw-btn-xs { padding: .4rem .9rem; font-size: .78rem; border-radius: 999px; border: none; cursor: pointer; font-weight: 600; font-family: inherit; background: var(--fw-primary); color: #fff; white-space: nowrap; flex-shrink: 0; transition: all .2s; }
.fw-btn-xs.is-following { background: var(--fw-card); color: var(--fw-primary); border: 2px solid var(--fw-primary); padding: calc(.4rem - 2px) calc(.9rem - 2px); }
.fw-btn-xs.is-following:hover { background: var(--fw-primary); color: #fff; }
.fw-btn-xs:hover { opacity: .85; }

.fw-field { margin-bottom: 1rem; }
.fw-field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .35rem; }
.fw-input-wrap { position: relative; display: flex; align-items: center; }
.fw-input-wrap .fw-input { padding-right: 2.5rem; }
.fw-textarea, .fw-input {
  width: 100%; border: 1px solid var(--fw-border); border-radius: 1rem; padding: .75rem 1rem;
  font-family: inherit; font-size: .9rem; background: var(--fw-bg); color: var(--fw-fg); outline: none; resize: none;
  transition: border-color .2s, box-shadow .2s;
}
.fw-textarea:focus, .fw-input:focus { border-color: var(--fw-primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--fw-ring) 25%, transparent); }
.fw-textarea { min-height: 90px; }

/* media segmented control */
.fw-segment { display: flex; gap: .35rem; padding: .3rem; background: var(--fw-muted); border-radius: 999px; margin-bottom: 1rem; }
.fw-seg {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  border: 0; cursor: pointer; border-radius: 999px; padding: .5rem .5rem; font-family: inherit; font-size: .82rem; font-weight: 600;
  background: none; color: var(--fw-muted-fg); transition: background .15s, color .15s;
}
.fw-seg.is-active { background: var(--fw-card); color: var(--fw-primary); box-shadow: var(--fw-shadow-card); }
.fw-seg svg { width: 1rem; height: 1rem; }

.fw-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; width: 100%;
  min-height: 150px; border: 2px dashed var(--fw-border); border-radius: 1rem; cursor: pointer;
  color: var(--fw-muted-fg); background: color-mix(in oklab, var(--fw-muted) 40%, transparent); transition: border-color .15s, color .15s; font-family: inherit; font-size: .85rem;
}
.fw-dropzone:hover { border-color: var(--fw-primary); color: var(--fw-primary); }
.fw-preview { position: relative; border-radius: 1rem; overflow: hidden; }
.fw-preview img, .fw-preview video { width: 100%; max-height: 18rem; object-fit: cover; display: block; background: #000; }
.fw-preview .fw-preview-x { position: absolute; right: .75rem; top: .75rem; width: 2rem; height: 2rem; border-radius: 999px; background: rgba(0,0,0,.5); color: #fff; border: 0; cursor: pointer; display: grid; place-items: center; }

/* ---------- auth (login / register tabs) ---------- */
.fw-auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f5f0ff 0%, #ede5ff 50%, #f0e8ff 100%); position: relative; overflow: hidden; border-radius: 0 !important; }
.fw-auth-page.flowear--dark { background: linear-gradient(135deg, #1a1530 0%, #16112a 50%, #1c1635 100%); }
.fw-auth-container { position: relative; z-index: 1; width: 100%; max-width: 440px; margin: 2rem auto; padding: 0 1.25rem; }
.fw-auth-bg-shape { position: absolute; border-radius: 50%; z-index: 0; pointer-events: none; }
.fw-auth-bg-shape--1 { width: 380px; height: 380px; background: radial-gradient(circle, color-mix(in oklab, var(--fw-primary) 18%, transparent), transparent 70%); top: -100px; right: -80px; animation: fw-auth-float 8s ease-in-out infinite alternate; }
.fw-auth-bg-shape--2 { width: 300px; height: 300px; background: radial-gradient(circle, color-mix(in oklab, var(--fw-primary-glow) 14%, transparent), transparent 70%); bottom: -60px; left: -100px; animation: fw-auth-float 10s ease-in-out infinite alternate-reverse; }
.fw-auth-bg-shape--3 { width: 200px; height: 200px; background: radial-gradient(circle, color-mix(in oklab, var(--fw-primary) 10%, transparent), transparent 70%); bottom: 30%; right: -40px; animation: fw-auth-float 7s ease-in-out infinite alternate; }
@keyframes fw-auth-float { from { transform: translateY(0) scale(1); } to { transform: translateY(-12px) scale(1.03); } }
.fw-auth { margin: 0 auto; }
.fw-auth-card { border-radius: 1.75rem; background: var(--fw-card); box-shadow: 0 25px 70px -16px color-mix(in oklab, var(--fw-primary) 30%, transparent), 0 0 0 1px var(--fw-border), 0 0 80px -20px color-mix(in oklab, var(--fw-primary) 12%, transparent); overflow: hidden; transition: box-shadow .4s ease, transform .3s ease; }
.fw-auth-card:hover { box-shadow: 0 30px 80px -16px color-mix(in oklab, var(--fw-primary) 35%, transparent), 0 0 0 1px var(--fw-border), 0 0 100px -20px color-mix(in oklab, var(--fw-primary) 18%, transparent); }
.fw-auth-head { background-image: linear-gradient(135deg, #7c3aed 0%, #9333ea 40%, #a855f7 70%, #c084fc 100%); color: #fff; padding: 2.75rem 2rem 2.25rem; text-align: center; position: relative; overflow: hidden; }
.fw-auth-head::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.12) 0%, transparent 60%); pointer-events: none; }
.fw-auth-head::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 2rem; background: var(--fw-card); border-radius: 1.5rem 1.5rem 0 0; }
.fw-auth-brand-icon { width: 56px; height: 56px; margin: 0 auto 1rem; background: rgba(255,255,255,.18); backdrop-filter: blur(12px); border-radius: 1.15rem; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.5rem; box-shadow: 0 8px 24px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.15); position: relative; z-index: 1; }
.fw-auth-head h1 { margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; position: relative; z-index: 1; text-shadow: 0 2px 8px rgba(0,0,0,.1); }
.fw-auth-head p { margin: .4rem 0 0; opacity: .88; font-size: .88rem; font-weight: 500; letter-spacing: .005em; position: relative; z-index: 1; }
.fw-auth-tabs { display: flex; border-bottom: 1px solid var(--fw-border); background: var(--fw-muted); position: relative; }
.fw-auth-tab { flex: 1; padding: 1rem; font-weight: 650; background: none; border: 0; cursor: pointer; color: var(--fw-muted-fg); font-family: inherit; position: relative; font-size: .92rem; transition: color .2s, background .2s; letter-spacing: .01em; }
.fw-auth-tab:hover { color: var(--fw-fg); background: color-mix(in oklab, var(--fw-primary) 5%, transparent); }
.fw-auth-tab.is-active { color: var(--fw-primary); background: var(--fw-card); font-weight: 700; }
.fw-auth-tab.is-active::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 2.5px; background-image: var(--fw-gradient); border-radius: 2px 2px 0 0; }
.fw-auth-body { padding: 1.75rem; }
.fw-auth-form { padding: 1.75rem 2rem 2rem; display: none; animation: fw-auth-fade .35s ease; }
.fw-auth-form.is-active { display: block; }
.fw-auth-form .fw-field label { font-size: .82rem; font-weight: 650; letter-spacing: .015em; text-transform: uppercase; color: var(--fw-muted-fg); margin-bottom: .4rem; }
.fw-auth-form .fw-input { padding: .85rem 1.1rem; font-size: .92rem; border-radius: .85rem; border: 1.5px solid var(--fw-border); background: var(--fw-muted); font-weight: 500; letter-spacing: .005em; transition: border-color .2s, box-shadow .2s, background .2s; }
.fw-auth-form .fw-input:focus { border-color: var(--fw-primary); box-shadow: 0 0 0 4px color-mix(in oklab, var(--fw-primary) 12%, transparent); background: var(--fw-card); }
.fw-auth-form .fw-input::placeholder { font-weight: 400; opacity: .55; }
.fw-auth-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.fw-auth-remember { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--fw-muted-fg); cursor: pointer; font-weight: 500; }
.fw-auth-remember input { width: 16px; height: 16px; accent-color: var(--fw-primary); border-radius: 4px; }
.fw-auth-forgot-link { background: none; border: none; padding: 0; font-size: .85rem; color: var(--fw-primary); font-weight: 600; cursor: pointer; transition: color .15s; font-family: inherit; }
.fw-auth-forgot-link:hover { color: var(--fw-primary-glow); }
.fw-auth-forgot-intro { text-align: center; margin-bottom: 1.5rem; }
.fw-auth-forgot-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: color-mix(in oklab, var(--fw-primary) 10%, transparent); color: var(--fw-primary); margin-bottom: .85rem; }
.fw-auth-forgot-intro p { font-size: .88rem; color: var(--fw-muted-fg); line-height: 1.55; font-weight: 450; max-width: 280px; margin: 0 auto; }
.fw-auth-back-link { display: block; width: 100%; text-align: center; background: none; border: none; padding: .75rem 0 0; font-size: .88rem; color: var(--fw-muted-fg); font-weight: 600; cursor: pointer; transition: color .15s; font-family: inherit; }
.fw-auth-back-link:hover { color: var(--fw-primary); }
.fw-auth-form .fw-btn-block { padding: .9rem; font-size: .95rem; font-weight: 700; letter-spacing: .01em; border-radius: .85rem; background-image: var(--fw-gradient); color: var(--fw-primary-fg); box-shadow: 0 8px 28px -8px color-mix(in oklab, var(--fw-primary) 40%, transparent); transition: transform .2s, box-shadow .2s; }
.fw-auth-form .fw-btn-block:hover { transform: translateY(-2px); box-shadow: 0 12px 36px -8px color-mix(in oklab, var(--fw-primary) 50%, transparent); }
.fw-auth-form .fw-btn-block:active { transform: translateY(0); }
@keyframes fw-auth-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-height: 600px) {
  .fw-auth-page { min-height: auto; padding: 2rem 0; }
  .fw-auth-bg-shape { display: none; }
}
@media (max-width: 480px) {
  .fw-auth-page { align-items: flex-start; padding-top: 1rem; }
  .fw-auth-container { max-width: 100%; padding: 0 1rem; margin: 0 auto; }
  .fw-auth-card { border-radius: 1.5rem; display: flex; flex-direction: column; }
  .fw-auth-head { padding: 1.5rem 1.25rem 1.5rem; flex-shrink: 0; }
  .fw-auth-head::after { height: 1.5rem; border-radius: 1.25rem 1.25rem 0 0; }
  .fw-auth-brand-icon { width: 48px; height: 48px; margin-bottom: .75rem; }
  .fw-auth-brand-icon svg { width: 28px; height: 28px; }
  .fw-auth-head h1 { font-size: 1.3rem; }
  .fw-auth-head p { font-size: .8rem; margin-top: .3rem; }
  .fw-auth-tab { padding: .75rem; font-size: .85rem; font-weight: 650; }
  .fw-auth-form { padding: 1.25rem 1.25rem 1.5rem; }
  .fw-auth-form.is-active { display: block; }
  .fw-field { margin-bottom: .85rem; }
  .fw-field label { font-size: .75rem; margin-bottom: .3rem; }
  .fw-input { padding: .7rem .9rem; font-size: .88rem; border-radius: .8rem; }
  .fw-auth-row { margin-bottom: 1rem; }
  .fw-auth-remember { font-size: .82rem; }
  .fw-btn-block { padding: .75rem; font-size: .9rem; border-radius: .8rem; }
  .fw-auth-bg-shape { display: none; }
}
@media (min-width: 481px) and (max-width: 768px) {
  .fw-auth-container { max-width: 400px; margin: 1rem auto; }
  .fw-auth-head { padding: 2.25rem 1.5rem 2rem; }
  .fw-auth-form { padding: 1.5rem 1.75rem 1.75rem; }
}
.fw-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: .35rem; margin-top: 2.5rem; }
.fw-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.3rem; height: 2.3rem; padding: 0 .5rem; border-radius: 999px; background: var(--fw-card); border: 1px solid var(--fw-border); font-size: .85rem; font-weight: 600; color: var(--fw-fg); text-decoration: none; transition: all .2s ease; }
.fw-pagination .page-numbers:hover { border-color: var(--fw-primary); color: var(--fw-primary); background: color-mix(in oklab, var(--fw-primary) 6%, transparent); }
.fw-pagination .page-numbers.current { background-image: var(--fw-gradient); color: #fff; border-color: transparent; box-shadow: 0 4px 14px -4px color-mix(in oklab, var(--fw-primary) 40%, transparent); }
.fw-pagination .page-numbers.prev,
.fw-pagination .page-numbers.next { font-weight: 700; font-size: .9rem; }
.fw-pagination .page-numbers.dots { background: none; border-color: transparent; color: var(--fw-muted-fg); }
.fw-msg { font-size: .85rem; padding: .6rem .9rem; border-radius: .75rem; margin-bottom: 1rem; display: none; }
.fw-msg.is-error { display: block; background: color-mix(in oklab, var(--fw-destructive) 12%, transparent); color: var(--fw-destructive); }
.fw-msg.is-success { display: block; background: color-mix(in oklab, var(--fw-primary) 12%, transparent); color: var(--fw-primary); }

/* toast */
.fw-toast-wrap { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; flex-direction: column; gap: .625rem; pointer-events: none; max-width: 400px; width: calc(100vw - 2rem); }
.fw-toast { pointer-events: auto; display: flex; align-items: center; gap: .75rem; background: var(--fw-card, #1a1a2e); color: var(--fw-fg, #f0f0f5); border: none; border-radius: .875rem; padding: .875rem 1.25rem; box-shadow: 0 8px 32px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.15); font-size: .9375rem; font-weight: 700; letter-spacing: .01em; animation: fw-toast-in .35s cubic-bezier(.22,1,.36,1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-left: 4px solid var(--fw-primary, #9333ea); position: relative; overflow: hidden; }
.fw-toast::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in oklab, var(--fw-primary, #9333ea) 8%, transparent), transparent 60%); pointer-events: none; }
.fw-toast-icon { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; line-height: 1; }
.fw-toast--success .fw-toast-icon { background: var(--fw-primary, #9333ea); color: #fff; }
.fw-toast--error .fw-toast-icon { background: var(--fw-destructive, #ef4444); color: #fff; }
.fw-toast--info .fw-toast-icon { background: var(--fw-muted-fg, #94a3b8); color: #fff; }
.fw-toast-msg { flex: 1; position: relative; z-index: 1; line-height: 1.35; }
.fw-toast-timer { position: absolute; bottom: 0; left: 0; height: 3px; background: var(--fw-primary, #9333ea); border-radius: 0 0 0 .875rem; animation: fw-toast-timer 3.5s linear forwards; }
.fw-toast--error .fw-toast-timer { background: var(--fw-destructive, #ef4444); }
@keyframes fw-toast-in { from { opacity: 0; transform: translateX(40px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes fw-toast-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(40px) scale(.95); } }
@keyframes fw-toast-timer { from { width: 100%; } to { width: 0%; } }
.fw-toast.is-error { border-left-color: var(--fw-destructive, #ef4444); }
@media (max-width: 480px) { .fw-toast-wrap { bottom: 1rem; right: 1rem; left: 1rem; max-width: none; width: auto; } }

/* upload progress overlay */
.fw-upload-overlay { position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; animation: fw-toast-in .25s ease; }
.fw-upload-card { background: var(--fw-card, #1a1a2e); border-radius: 1rem; padding: 1.75rem 2rem; min-width: 280px; max-width: 360px; box-shadow: 0 16px 48px rgba(0,0,0,.3); text-align: center; }
.fw-upload-card-icon { width: 48px; height: 48px; margin: 0 auto 1rem; border-radius: 50%; background: color-mix(in oklab, var(--fw-primary, #9333ea) 15%, transparent); display: flex; align-items: center; justify-content: center; animation: fw-upload-pulse 1.5s ease-in-out infinite; }
.fw-upload-card-icon svg { width: 24px; height: 24px; color: var(--fw-primary, #9333ea); }
.fw-upload-card-title { font-size: 1rem; font-weight: 700; color: var(--fw-fg, #f0f0f5); margin-bottom: .375rem; }
.fw-upload-card-file { font-size: .8125rem; color: var(--fw-muted-fg, #94a3b8); margin-bottom: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fw-upload-bar { height: 6px; border-radius: 3px; background: color-mix(in oklab, var(--fw-primary, #9333ea) 15%, transparent); overflow: hidden; position: relative; }
.fw-upload-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--fw-primary, #9333ea), var(--fw-glow, #d946ef)); transition: width .3s ease; position: relative; }
.fw-upload-bar-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); animation: fw-upload-shine 1.2s ease-in-out infinite; }
.fw-upload-card-pct { font-size: .8125rem; font-weight: 700; color: var(--fw-primary, #9333ea); margin-top: .75rem; }
.fw-upload-card-status { font-size: .75rem; color: var(--fw-muted-fg, #94a3b8); margin-top: .25rem; }
@keyframes fw-upload-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .7; } }
@keyframes fw-upload-shine { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } }

.fw-spin { animation: fw-spin 1s linear infinite; }
@keyframes fw-spin { to { transform: rotate(360deg); } }
.fw-hidden { display: none !important; }

/* =========================================================
   v1.2 — mobile fixes, save, badges, story viewer, messages,
   notifications
   ========================================================= */

/* prevent horizontal overflow on small screens */
.flowear { overflow-x: hidden; }
.fw-shell { width: 100%; }
.fw-main { max-width: 100%; }

/* discover tools wrap cleanly on mobile */
.fw-disc-tools { flex-wrap: wrap; width: 100%; }
.fw-search { flex: 1 1 100%; max-width: 100%; order: 3; }
.fw-disc-tools .fw-icon-btn, .fw-disc-tools .fw-theme-toggle { order: 2; }
@media (min-width: 640px) {
  .fw-disc-tools { flex-wrap: nowrap; }
  .fw-search { flex: 1 1 auto; max-width: 36rem; order: 0; }
  .fw-disc-tools .fw-icon-btn, .fw-disc-tools .fw-theme-toggle { order: 0; }
}

/* keep theme/header combinations from clipping the social panels on phones */
@media (max-width: 639px) {
  body { overflow-x: hidden; }
  .ft-site-main { padding: .75rem 0; }
  .ft-site-main > .flowear { border-radius: 0; margin-inline: calc(50% - 50vw); width: 100vw; }
  .flowear { max-width: 100vw; }
  .fw-shell, .fw-main, .fw-panel, .fw-feed, .fw-blog, .fw-messages { min-width: 0; }
  .fw-disc-head, .fw-blog-head { display: grid; grid-template-columns: minmax(0,1fr); align-items: start; }
  .fw-disc-head h1, .fw-blog-head h1 { min-width: 0; font-size: 1.35rem; }
  .fw-create-row { gap: .45rem; padding: .45rem; }
  .fw-create-row-av { width: 2.1rem; height: 2.1rem; }
  .fw-create-row-input { padding: .6rem .75rem; font-size: .82rem; }
  .fw-create-row-btn { padding: .6rem .8rem; }
}

/* badged icon buttons in the header */
.fw-icon-btn--badged { position: relative; text-decoration: none; }
.fw-icon-btn--badged .fw-nav-badge { position: absolute; top: -3px; right: -3px; }

/* post cards: slimmer two-up cards on phones so they fit the screen width */
.fw-feed { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0.5rem; width: 100%; }
@media (min-width: 640px) { .fw-feed { gap: 1.25rem; } }
.fw-post > img, .fw-post-media { height: 15rem; }
@media (min-width: 480px) { .fw-post > img, .fw-post-media { height: 17rem; } }
@media (min-width: 640px) { .fw-post > img, .fw-post-media { height: 30rem; } }

/* scale the overlay UI down on the slimmer mobile cards */
@media (max-width: 639px) {
  .fw-post { border-radius: 1.1rem; min-width: 0; }
  .fw-rail { bottom: 5.5rem; right: .5rem; gap: .6rem; }
  .fw-rail svg { width: 1.25rem; height: 1.25rem; }
  .fw-rail .fw-count { font-size: .68rem; }
  .fw-post-more { width: 1.75rem; height: 1.75rem; right: .5rem; top: .5rem; }
  .fw-post-meta { padding: .6rem; }
  .fw-post-author img { width: 1.4rem; height: 1.4rem; }
  .fw-post-author .fw-name { font-size: .72rem; }
  .fw-post-author .fw-verify { width: .85rem; height: .85rem; }
  .fw-post-cap { font-size: .68rem; max-width: 100%; -webkit-line-clamp: 2; line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .fw-post-tag { font-size: .68rem; }
}

/* clickable overlay that opens the full post page (sits under rail/meta) */
.fw-post-open { position: absolute; inset: 0; z-index: 1; cursor: pointer; }

/* make the author link tappable (meta layer is pointer-events:none) */
.fw-post-author { pointer-events: auto; text-decoration: none; color: inherit; position: relative; z-index: 2; }
.fw-post--media .fw-post-author { color: var(--fw-fg); }
.fw-post-author:hover .fw-name { text-decoration: underline; }

/* save / bookmark button on the rail */
.fw-save svg { fill: currentColor; }

.fw-save.is-saved svg { fill: currentColor; color: #7c3aed; }
/* nav unread badges */
.fw-nav a { position: relative; }
.fw-nav-badge {
  display: inline-grid; place-items: center; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem;
  border-radius: 999px; background: var(--fw-destructive); color: #fff; font-size: .68rem; font-weight: 700; line-height: 1;
}
.fw-nav-badge[hidden] { display: none !important; }
.fw-nav .fw-nav-badge { margin-left: auto; }
.fw-mobnav-ico { position: relative; display: inline-grid; place-items: center; }
.fw-mobnav-ico .fw-nav-badge { display: none !important; }

/* ---------- story viewer ---------- */
.fw-storyview-card {
  position: relative; width: 100%; max-width: 26rem; border-radius: 1.5rem; overflow: hidden;
  background: var(--fw-card); box-shadow: var(--fw-shadow-soft); max-height: 92vh; display: flex; flex-direction: column; color: var(--fw-fg);
}
.fw-storyview-head { display: flex; align-items: center; gap: .6rem; padding: .85rem 3.5rem .85rem 1rem; }
.fw-storyview-head .fw-storyview-av { width: 2.2rem; height: 2.2rem; border-radius: 999px; object-fit: cover; }
.fw-storyview-head .fw-storyview-av[src=""] { display: none; }
.fw-storyview-name { font-weight: 700; font-size: .95rem; }
.fw-storyview-media { background: #000; display: grid; place-items: center; max-height: 60vh; overflow: hidden; }
.fw-storyview-media img { width: 100%; max-height: 60vh; object-fit: contain; display: block; }
.fw-storyview-actions { display: flex; align-items: center; gap: .6rem; padding: .75rem 1rem; }
.fw-storyview-like { display: inline-flex; align-items: center; gap: .35rem; border: 0; background: none; cursor: pointer; color: var(--fw-fg); font-weight: 600; }
.fw-storyview-like svg { fill: transparent; transition: fill .15s; }
.fw-storyview-like.is-liked svg { fill: var(--fw-destructive); color: var(--fw-destructive); }
.fw-storyview-form { flex: 1; display: flex; gap: .5rem; }
.fw-storyview-form input { flex: 1; min-width: 0; border: 1px solid var(--fw-border); border-radius: 999px; padding: .5rem .9rem; font-family: inherit; background: var(--fw-bg); color: var(--fw-fg); outline: none; }
.fw-storyview-form button { display: grid; place-items: center; border: 0; border-radius: 999px; width: 2.2rem; height: 2.2rem; flex-shrink: 0; background-image: var(--fw-gradient); color: #fff; cursor: pointer; }
.fw-storyview-comments { padding: 0 1rem 1rem; overflow-y: auto; max-height: 22vh; display: flex; flex-direction: column; gap: .5rem; }
.fw-storyview-comment { display: flex; gap: .5rem; align-items: flex-start; font-size: .85rem; }
.fw-storyview-comment img { width: 1.7rem; height: 1.7rem; border-radius: 999px; object-fit: cover; flex-shrink: 0; }
.fw-storyview-comment img[src=""] { display: none; }
.fw-storyview-comment strong { font-weight: 700; }

/* ---------- messages ---------- */
.fw-msg-title { font-size: 1.4rem; font-weight: 700; margin: 0 0 1rem; }
.fw-msg-layout { display: grid; grid-template-columns: 1fr; gap: 1rem; min-height: 60vh; }
@media (min-width: 768px) { .fw-msg-layout { grid-template-columns: 18rem 1fr; } }
.fw-msg-side { display: flex; flex-direction: column; gap: .25rem; border-radius: 1rem; background: var(--fw-muted); padding: .5rem; max-height: 70vh; overflow-y: auto; }
.fw-convo { display: flex; align-items: center; gap: .65rem; padding: .6rem .65rem; border: 0; background: none; border-radius: .85rem; cursor: pointer; text-align: left; font-family: inherit; color: var(--fw-fg); width: 100%; }
.fw-convo:hover { background: var(--fw-card); }
.fw-convo.is-active { background: var(--fw-card); box-shadow: var(--fw-shadow-card); }
.fw-convo img { width: 2.5rem; height: 2.5rem; border-radius: 999px; object-fit: cover; flex-shrink: 0; }
.fw-convo-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fw-convo-name { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-convo-last { font-size: .78rem; color: var(--fw-muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-msg-thread { display: flex; flex-direction: column; border-radius: 1rem; border: 1px solid var(--fw-border); overflow: hidden; min-height: 60vh; }
.fw-thread-head { display: flex; align-items: center; gap: .6rem; padding: .75rem 1rem; border-bottom: 1px solid var(--fw-border); }
.fw-thread-head img { width: 2.2rem; height: 2.2rem; border-radius: 999px; object-fit: cover; }
.fw-thread-name { font-weight: 700; }
.fw-thread-back { display: none; border: 0; background: none; cursor: pointer; color: var(--fw-fg); padding: 0; }
.fw-thread-body { flex: 1; padding: 1rem; display: flex; flex-direction: column; gap: .5rem; overflow-y: auto; max-height: 56vh; }
.fw-msg-bubble { max-width: 75%; padding: .55rem .85rem; border-radius: 1.1rem; font-size: .9rem; line-height: 1.35; word-wrap: break-word; }
.fw-msg-bubble.is-mine { align-self: flex-end; background-image: var(--fw-gradient); color: #fff; border-bottom-right-radius: .3rem; }
.fw-msg-bubble.is-theirs { align-self: flex-start; background: var(--fw-muted); color: var(--fw-fg); border-bottom-left-radius: .3rem; }
.fw-msg-empty, .fw-msg-placeholder { color: var(--fw-muted-fg); font-size: .9rem; text-align: center; margin: auto; padding: 2rem 1rem; }
.fw-thread-form { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--fw-border); }
.fw-thread-form input { flex: 1; min-width: 0; border: 1px solid var(--fw-border); border-radius: 999px; padding: .6rem 1rem; font-family: inherit; background: var(--fw-bg); color: var(--fw-fg); outline: none; }
.fw-thread-form button { display: grid; place-items: center; border: 0; border-radius: 999px; width: 2.6rem; height: 2.6rem; flex-shrink: 0; background-image: var(--fw-gradient); color: #fff; cursor: pointer; }
.fw-thread-form .fw-attach-btn { background: var(--fw-muted); color: var(--fw-fg); }
.fw-user-search { position: relative; margin-bottom: .5rem; }
.fw-user-search > svg { position: absolute; left: .8rem; top: .8rem; color: var(--fw-muted-fg); }
.fw-user-search input { width: 100%; border: 1px solid var(--fw-border); border-radius: 999px; padding: .62rem .8rem .62rem 2.35rem; font-family: inherit; background: var(--fw-card); color: var(--fw-fg); outline: none; }
.fw-user-results { display: flex; flex-direction: column; gap: .25rem; margin-top: .4rem; }
.fw-user-result { display: flex; align-items: center; gap: .6rem; border: 0; background: var(--fw-card); color: var(--fw-fg); border-radius: .85rem; padding: .55rem; cursor: pointer; text-align: left; font-family: inherit; }
.fw-user-result img { width: 2.1rem; height: 2.1rem; border-radius: 999px; object-fit: cover; }
.fw-user-result span { display: flex; flex-direction: column; min-width: 0; }
.fw-user-result strong { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-user-result em { font-style: normal; color: var(--fw-muted-fg); font-size: .72rem; }
.fw-msg-file { display: block; margin-top: .35rem; color: inherit; font-weight: 700; text-decoration: underline; }
.fw-msg-file--image { text-decoration: none; }
.fw-msg-file--image img { display: block; max-width: 12rem; border-radius: .7rem; margin-bottom: .25rem; }
@media (max-width: 767px) {
  .fw-msg-layout.show-thread .fw-msg-side { display: none; }
  .fw-msg-layout:not(.show-thread) .fw-msg-thread { display: none; }
  .fw-thread-back { display: inline-grid; place-items: center; }
}

/* ---------- notifications ---------- */
.fw-notif-list { display: flex; flex-direction: column; }
.fw-notif { display: flex; align-items: center; gap: .75rem; padding: .85rem .5rem; border-bottom: 1px solid var(--fw-border); text-decoration: none; color: var(--fw-fg); }
.fw-notif:last-child { border-bottom: 0; }
.fw-notif:hover { background: var(--fw-muted); border-radius: .85rem; }
.fw-notif.is-unread { background: color-mix(in oklab, var(--fw-primary) 8%, transparent); border-radius: .85rem; }
.fw-notif-av { width: 2.6rem; height: 2.6rem; border-radius: 999px; object-fit: cover; flex-shrink: 0; }
.fw-notif-body p { margin: 0; font-size: .9rem; }
.fw-notif-time { font-size: .75rem; color: var(--fw-muted-fg); }

/* =========================================================
   v1.3 — single post view + Blog Studio (editor + analytics)
   ========================================================= */

/* ---------- single post engagement view ---------- */
.fw-single-panel { max-width: 640px; margin: 0 auto; }
.fw-single-back {
  display: inline-flex; align-items: center; gap: .35rem; margin-bottom: 1rem;
  font-size: .85rem; font-weight: 600; color: var(--fw-muted-fg); text-decoration: none;
}
.fw-single-back:hover { color: var(--fw-primary); }
.fw-single-feed .fw-post { box-shadow: var(--fw-shadow-card); }
.fw-single-feed .fw-post > img, .fw-single-feed .fw-post-media { height: 30rem; }
.fw-single-feed .fw-comments { display: block; }

/* ---------- blog: header + tabs ---------- */
.fw-blog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.fw-blog-head h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.fw-blog-sub { margin: .25rem 0 0; color: var(--fw-muted-fg); font-size: .875rem; }
.fw-blog .fw-tabpanel { padding: 1.25rem 0 0; }

/* ---------- blog editor ---------- */
.fw-blog-editor { max-width: 720px; }
.fw-blog-title {
  width: 100%; border: 0; background: none; outline: none; color: var(--fw-fg);
  font-family: inherit; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em;
  padding: .25rem 0 .5rem; border-bottom: 2px solid var(--fw-border); margin-bottom: 1rem;
}
.fw-blog-title:focus { border-color: var(--fw-primary); }
.fw-blog-cover { margin-bottom: 1rem; }

.fw-blog-palette {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .85rem;
  background: var(--fw-muted); border-radius: 1rem; margin-bottom: 1rem;
}
.fw-blog-palette-label { font-size: .78rem; font-weight: 600; color: var(--fw-muted-fg); margin-right: .25rem; }
.fw-blockchip {
  display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--fw-border);
  background: var(--fw-card); color: var(--fw-fg); border-radius: 999px; padding: .45rem .8rem;
  font-family: inherit; font-size: .8rem; font-weight: 600; cursor: grab; transition: transform .12s, border-color .12s;
}
.fw-blockchip:hover { border-color: var(--fw-primary); color: var(--fw-primary); transform: translateY(-1px); }
.fw-blockchip:active { cursor: grabbing; }
.fw-blockchip svg { width: .95rem; height: .95rem; }

.fw-blog-canvas { display: flex; flex-direction: column; gap: .65rem; min-height: 8rem; }
.fw-blog-canvas:empty::before {
  content: attr(data-empty); display: grid; place-items: center; min-height: 8rem; text-align: center;
  border: 2px dashed var(--fw-border); border-radius: 1rem; color: var(--fw-muted-fg); font-size: .85rem; padding: 1rem;
}
.fw-blog-canvas.is-dropping { outline: 2px dashed var(--fw-primary); outline-offset: 4px; border-radius: 1rem; }

.fw-block {
  position: relative; border: 1px solid var(--fw-border); border-radius: 1rem; background: var(--fw-card);
  padding: .85rem .85rem .85rem 2.5rem; transition: border-color .12s, box-shadow .12s;
}
.fw-block.is-drag { opacity: .5; }
.fw-block.drag-over { border-color: var(--fw-primary); box-shadow: 0 0 0 2px color-mix(in oklab, var(--fw-primary) 25%, transparent); }
.fw-block-handle {
  position: absolute; left: .4rem; top: .55rem; display: grid; place-items: center; width: 1.5rem; height: 1.5rem;
  color: var(--fw-muted-fg); cursor: grab; border: 0; background: none;
}
.fw-block-handle:active { cursor: grabbing; }
.fw-block-tools { position: absolute; right: .5rem; top: .5rem; display: flex; gap: .25rem; }
.fw-block-tool {
  display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 999px; border: 0;
  background: var(--fw-muted); color: var(--fw-fg); cursor: pointer;
}
.fw-block-tool:hover { background: var(--fw-accent); color: var(--fw-accent-fg); }
.fw-block-tool.is-danger:hover { background: color-mix(in oklab, var(--fw-destructive) 15%, transparent); color: var(--fw-destructive); }
.fw-block-tool svg { width: .85rem; height: .85rem; }
.fw-block-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--fw-muted-fg); margin-bottom: .35rem; }
.fw-block-input {
  width: 100%; border: 0; outline: none; resize: vertical; background: none; color: var(--fw-fg);
  font-family: inherit; font-size: .95rem; line-height: 1.5;
}
.fw-block-input.is-heading { font-size: 1.25rem; font-weight: 700; }
.fw-block-input.is-quote { font-style: italic; border-left: 3px solid var(--fw-primary); padding-left: .75rem; }
.fw-block-select { width: 100%; border: 1px solid var(--fw-border); border-radius: .75rem; padding: .55rem .75rem; margin: .5rem 0; background: var(--fw-bg); color: var(--fw-fg); font-family: inherit; }
.fw-block-options { display: grid; gap: .45rem; margin-top: .6rem; }
.fw-block-options label { display: grid; grid-template-columns: 1.6rem minmax(0,1fr); align-items: center; gap: .35rem; padding: .35rem .5rem; border-radius: .75rem; background: var(--fw-muted); }
.fw-block-filelabel { font-size: .78rem; font-weight: 600; color: var(--fw-primary); min-height: 1rem; word-break: break-word; }
.fw-block-imgwrap { display: flex; flex-direction: column; gap: .5rem; }
.fw-block-img { width: 100%; max-height: 18rem; object-fit: cover; border-radius: .75rem; display: none; }
.fw-block-img.is-set { display: block; }
.fw-block-uploadbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; align-self: flex-start;
  border: 1px dashed var(--fw-border); border-radius: .75rem; padding: .55rem .9rem; cursor: pointer;
  background: var(--fw-muted); color: var(--fw-muted-fg); font-family: inherit; font-size: .82rem; font-weight: 600;
}
.fw-block-uploadbtn:hover { border-color: var(--fw-primary); color: var(--fw-primary); }
.fw-block-divider { height: 0; border-top: 2px dashed var(--fw-border); margin: .25rem 0; }

.fw-blog-actions { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1.25rem; }
.fw-blog-meta { display: flex; gap: 1rem; margin-top: 1.25rem; flex-wrap: wrap; }
.fw-blog-meta .fw-field { flex: 1; min-width: 180px; }
.fw-blog-meta .fw-field label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .35rem; color: var(--fw-muted-fg); }

/* ---------- blog analytics ---------- */
.fw-analytics { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1.5rem; }
@media (min-width: 720px) { .fw-analytics { grid-template-columns: repeat(4, 1fr); } }
.fw-metric {
  display: flex; align-items: center; gap: .75rem; padding: 1rem; border-radius: 1rem;
  background: var(--fw-muted);
}
.fw-metric-ico {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .85rem; flex-shrink: 0;
  background-image: var(--fw-gradient); color: #fff;
}
.fw-metric-ico svg { width: 1.1rem; height: 1.1rem; }
.fw-metric-v { font-size: 1.35rem; font-weight: 800; line-height: 1; }
.fw-metric-l { font-size: .72rem; color: var(--fw-muted-fg); margin-top: .2rem; }

.fw-blog-manage-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 .75rem; }
.fw-postlist { display: flex; flex-direction: column; gap: .5rem; }
.fw-postrow {
  display: flex; align-items: center; gap: .85rem; padding: .6rem .85rem .6rem .6rem; border-radius: 1.1rem;
  border: 1px solid var(--fw-border); background: var(--fw-card);
  transition: box-shadow .2s,transform .15s;
}
.fw-postrow:hover { box-shadow: 0 4px 16px rgba(0,0,0,.06); transform:translateY(-1px); }
.fw-postrow-thumb { width: 3.4rem; height: 3.4rem; border-radius: .85rem; overflow: hidden; flex-shrink: 0; background: var(--fw-muted); }
.fw-postrow-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fw-postrow-thumb-placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: var(--fw-muted-fg); opacity: .5; }
.fw-postrow-main { min-width: 0; flex: 1; }
.fw-postrow-title { font-weight: 700; font-size: .95rem; color: var(--fw-fg); text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-postrow-title:hover { color: var(--fw-primary); }
.fw-postrow-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .25rem; font-size: .72rem; color: var(--fw-muted-fg); }
.fw-postrow-meta svg { width: .85rem; height: .85rem; vertical-align: -2px; }
.fw-status { font-size: .68rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; text-transform: capitalize; }
.fw-status--publish { background: color-mix(in oklab, var(--fw-primary) 15%, transparent); color: var(--fw-primary); }
.fw-status--pending, .fw-status--draft { background: color-mix(in oklab, oklch(0.7 0.16 70) 22%, transparent); color: oklch(0.5 0.16 70); }
.fw-postrow-actions { display: flex; gap: .4rem; flex-shrink: 0; }
.fw-iconaction {
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--fw-muted); color: var(--fw-fg);
}
.fw-iconaction:hover { background: var(--fw-accent); color: var(--fw-accent-fg); }
.fw-iconaction--danger:hover { background: color-mix(in oklab, var(--fw-destructive) 15%, transparent); color: var(--fw-destructive); }
.fw-iconaction svg { width: 1rem; height: 1rem; }
a.fw-iconaction { text-decoration: none; }

/* blog content rendered on the public single post (theme) */
.fw-embed { position: relative; aspect-ratio: 16/9; margin: 1rem 0; }
.fw-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: .75rem; }
.fw-blog-video, .fw-blog-audio { width: 100%; margin: 1rem 0; border-radius: .75rem; }
.fw-blog-doc { display: inline-flex; align-items: center; padding: .7rem 1rem; border-radius: .9rem; background: var(--fw-muted); font-weight: 700; }
.fw-poll, .fw-quiz, .fw-slides { display: grid; gap: .6rem; margin: 1rem 0; padding: 1rem; border-radius: 1rem; background: var(--fw-muted); }
.fw-poll button, .fw-quiz button { border: 1px solid var(--fw-border); border-radius: .85rem; padding: .65rem .8rem; background: var(--fw-card); color: var(--fw-fg); text-align: left; }
.fw-poll button.is-picked { border-color: var(--fw-primary); box-shadow: inset 3rem 0 color-mix(in oklab, var(--fw-primary) 16%, transparent); }
.fw-quiz button.is-correct { border-color: oklch(0.62 0.18 145); background: color-mix(in oklab, oklch(0.62 0.18 145) 16%, var(--fw-card)); }
.fw-quiz button.is-wrong { border-color: var(--fw-destructive); background: color-mix(in oklab, var(--fw-destructive) 12%, var(--fw-card)); }
.fw-slides { grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; }
.fw-slides section { scroll-snap-align: start; min-height: 9rem; border-radius: .9rem; background: var(--fw-card); padding: 1rem; box-shadow: var(--fw-shadow-card); }

/* ---------- v1.5: Discover mobile layout, cover inbox, vendor ---------- */
@media (max-width: 640px) {
  .fw-feed.fw-feed--m-single { grid-template-columns: minmax(0,1fr) !important; }
  .fw-feed.fw-feed--m-single .fw-post { width: 100%; max-width: 100%; }
  .fw-feed.fw-feed--m-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: .5rem; }
}

.fw-cover-inbox { position: absolute; top: .75rem; right: .75rem; display: flex; gap: .5rem; z-index: 4; }
.fw-cover-inbox a { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; backdrop-filter: blur(6px); }
.fw-cover-inbox .fw-badge { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; font-size: .62rem; }

.fw-store-head { margin-bottom: 1rem; }
.fw-store-name { margin: 0 0 .25rem; font-size: 1.15rem; }
.fw-store-desc { margin: 0; color: var(--fw-muted); }
.fw-store-manage { margin-bottom: 1rem; }

/* Vendor dashboard */
.fw-vendor-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.fw-vendor-head h1 { margin: 0; font-size: 1.4rem; }
.fw-vendor-sub { margin: .25rem 0 0; color: var(--fw-muted); }
.fw-vendor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.fw-vendor-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.fw-vendor-actions { display: flex; gap: .5rem; margin-top: 1rem; }
.fw-vendor-drop { cursor: pointer; }
.fw-vendor-analytics { margin-bottom: 1.25rem; }
.fw-productrow { align-items: center; }
.fw-productrow-img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; }
.fw-price { font-weight: 600; }
.fw-b-duration-row { display: flex; gap: .35rem; align-items: center; }
.fw-b-duration-row .fw-input { flex: 1; }
.fw-b-duration-unit { flex: 0 0 auto; min-width: 85px; }
.fw-badge--type { display: inline-block; font-size: .72rem; padding: .15em .6em; border-radius: 999px; background: var(--fw-primary); color: #fff; }
@media (max-width: 720px) { .fw-vendor-grid { grid-template-columns: 1fr; } }

/* ======================= Vendor dashboard 2.0 ======================= */
.fw-vendor2 { padding: 0; overflow: hidden; }
.fw-vlayout { display: grid; grid-template-columns: 232px minmax(0, 1fr); }
.fw-vbody { min-width: 0; padding: 1.25rem 1.35rem 1.75rem; }

/* Sidebar */
.fw-vside {
  background: var(--fw-muted);
  border-right: 1px solid var(--fw-border);
  padding: 1.1rem .9rem;
  display: flex; flex-direction: column; gap: .35rem;
}
.fw-vside-brand { display: flex; align-items: center; gap: .6rem; padding: .35rem .4rem 1rem; }
.fw-vside-logo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background-image: var(--fw-gradient); color: #fff; flex: 0 0 auto; }
.fw-vside-brand-txt { display: flex; flex-direction: column; min-width: 0; }
.fw-vside-brand-txt strong { font-size: .92rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-vside-brand-txt small { font-size: .72rem; color: var(--fw-muted-fg); }
.fw-vside-nav { display: flex; flex-direction: column; gap: .2rem; }
.fw-vside-item {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  padding: .68rem .8rem; border: 0; border-radius: .8rem; cursor: pointer;
  background: none; color: var(--fw-fg); font-family: inherit; font-size: .9rem; font-weight: 600; text-align: left;
  transition: background .15s, color .15s;
}
.fw-vside-item svg { flex: 0 0 auto; }
.fw-vside-item:hover { background: var(--fw-accent); color: var(--fw-accent-fg); }
.fw-vside-item.is-active { background-image: var(--fw-gradient); color: var(--fw-primary-fg); box-shadow: var(--fw-shadow-soft); }
.fw-vside-view { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; padding: .6rem .8rem; border-radius: .8rem; font-size: .82rem; font-weight: 600; color: var(--fw-muted-fg); text-decoration: none; }
.fw-vside-view:hover { background: var(--fw-accent); color: var(--fw-accent-fg); }
.fw-vside-help { margin-top: auto; padding: .9rem; border-radius: 1rem; background: var(--fw-card); box-shadow: var(--fw-shadow-card); }
.fw-vside-help strong { display: block; font-size: .85rem; }
.fw-vside-help p { margin: .3rem 0 0; font-size: .74rem; color: var(--fw-muted-fg); }

/* Top bar */
.fw-vtop { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.fw-vtop-hi span { font-size: .82rem; color: var(--fw-muted-fg); }
.fw-vtop-hi h1 { margin: .1rem 0 0; font-size: 1.45rem; display: flex; align-items: center; gap: .4rem; }
.fw-vtop-hi h1 svg { color: var(--fw-primary); }
.fw-vtop-tools { display: flex; align-items: center; gap: .7rem; }
.fw-vtop-search { min-width: 220px; }
.fw-vtop-user { display: flex; align-items: center; gap: .55rem; }
.fw-vtop-user img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.fw-vtop-user span { display: flex; flex-direction: column; line-height: 1.15; }
.fw-vtop-user strong { font-size: .85rem; }
.fw-vtop-user small { font-size: .72rem; color: var(--fw-muted-fg); }

/* Stat cards */
.fw-vstats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .9rem; margin-bottom: 1rem; }
.fw-vstat { background: var(--fw-card); border: 1px solid var(--fw-border); border-radius: 1.1rem; padding: 1rem; box-shadow: var(--fw-shadow-card); }
.fw-vstat-top { display: flex; justify-content: flex-end; }
.fw-vstat-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--fw-accent); color: var(--fw-primary); }
.fw-vstat-l { margin: .6rem 0 .1rem; font-size: .78rem; color: var(--fw-muted-fg); }
.fw-vstat-v { margin: 0; font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; }
.fw-vstat-chip { display: inline-flex; align-items: center; gap: .3rem; margin-top: .5rem; font-size: .72rem; font-weight: 600; opacity: .85; }
.fw-vstat--hero { background-image: var(--fw-gradient); color: #fff; border: 0; }
.fw-vstat--hero .fw-vstat-ico { background: rgba(255,255,255,.22); color: #fff; }
.fw-vstat--hero .fw-vstat-l { color: rgba(255,255,255,.85); }
.fw-vstat--pink { background-image: linear-gradient(135deg, oklch(0.62 0.25 350), oklch(0.66 0.24 20)); color: #fff; border: 0; }
.fw-vstat--pink .fw-vstat-ico { background: rgba(255,255,255,.22); color: #fff; }
.fw-vstat--pink .fw-vstat-l { color: rgba(255,255,255,.9); }

/* Quick actions (mobile-friendly) */
.fw-vquick { display: none; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-bottom: 1rem; }
.fw-vquick-btn {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: .8rem .3rem; border: 1px solid var(--fw-border); border-radius: 1rem;
  background: var(--fw-card); color: var(--fw-fg); font-family: inherit; font-size: .68rem; font-weight: 600; cursor: pointer;
}
.fw-vquick-btn svg { color: var(--fw-primary); }

/* Rows */
.fw-vrow2 { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 1rem; margin-bottom: 1rem; }
.fw-vrow3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.fw-vcard { background: var(--fw-card); border: 1px solid var(--fw-border); border-radius: 1.1rem; padding: 1.1rem; box-shadow: var(--fw-shadow-card); }
.fw-vcard-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .85rem; }
.fw-vcard-head h3 { margin: 0; font-size: 1rem; }
.fw-vchip { font-size: .72rem; font-weight: 600; color: var(--fw-muted-fg); background: var(--fw-muted); border-radius: 999px; padding: .3rem .7rem; }
.fw-vlink { border: 0; background: none; color: var(--fw-primary); font-family: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }

/* Chart */
.fw-vchart-total { margin: .2rem 0 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.fw-vchart-wrap { color: var(--fw-primary); }
.fw-vchart-svg { width: 100%; height: 190px; display: block; }
.fw-vchart-dot { fill: var(--fw-card); stroke: currentColor; stroke-width: 3; }

/* Promo cards */
.fw-vpromos { display: flex; flex-direction: column; gap: 1rem; }
.fw-vpromo { display: flex; align-items: center; gap: .85rem; flex: 1; text-align: left; border: 0; border-radius: 1.1rem; padding: 1.15rem; color: #fff; cursor: pointer; font-family: inherit; box-shadow: var(--fw-shadow-soft); }
.fw-vpromo-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.22); flex: 0 0 auto; }
.fw-vpromo-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fw-vpromo-txt strong { font-size: .98rem; }
.fw-vpromo-txt small { font-size: .78rem; opacity: .9; }
.fw-vpromo-plus { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.25); flex: 0 0 auto; }
.fw-vpromo--purple { background-image: var(--fw-gradient); }
.fw-vpromo--blue { background-image: linear-gradient(135deg, oklch(0.55 0.18 260), oklch(0.62 0.2 240)); }
.fw-vpromo--pink { background-image: linear-gradient(135deg, oklch(0.62 0.25 350), oklch(0.66 0.24 20)); }

/* Lists */
.fw-vlist { display: flex; flex-direction: column; gap: .55rem; }
.fw-vorder { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .6rem; }
.fw-vorder-img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; }
.fw-vorder-main { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.fw-vorder-main strong { font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-vorder-main small { font-size: .74rem; color: var(--fw-muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-vorder-amt { font-size: .84rem; font-weight: 700; white-space: nowrap; }
.fw-vbadge { grid-column: 3; font-size: .68rem; font-weight: 700; padding: .22rem .55rem; border-radius: 999px; white-space: nowrap; justify-self: end; }
.fw-vorder:has(.fw-vbadge) { grid-template-columns: auto minmax(0,1fr) auto auto; }
.fw-vbadge--processing, .fw-vbadge--pending { background: color-mix(in oklab, #f59e0b 22%, transparent); color: #b45309; }
.fw-vbadge--completed { background: color-mix(in oklab, #22c55e 22%, transparent); color: #15803d; }
.fw-vbadge--on-hold { background: color-mix(in oklab, #6366f1 22%, transparent); color: #4338ca; }
.fw-vbadge--cancelled, .fw-vbadge--refunded, .fw-vbadge--failed { background: color-mix(in oklab, #ef4444 22%, transparent); color: #b91c1c; }

/* Performance gauge */
.fw-vperf { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.fw-vgauge { position: relative; width: 92px; height: 92px; flex: 0 0 auto; }
.fw-vgauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fw-vgauge-bg { fill: none; stroke: var(--fw-muted); stroke-width: 9; }
.fw-vgauge-fg { fill: none; stroke: var(--fw-primary); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.fw-vgauge-num { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 1.05rem; }
.fw-vperf-txt { display: flex; flex-direction: column; }
.fw-vperf-txt strong { font-size: .92rem; }
.fw-vperf-txt small { font-size: .76rem; color: var(--fw-muted-fg); }
.fw-vbar { margin-top: .7rem; }
.fw-vbar-l { display: flex; justify-content: space-between; font-size: .76rem; color: var(--fw-muted-fg); margin-bottom: .3rem; }
.fw-vbar-track { height: 7px; border-radius: 999px; background: var(--fw-muted); overflow: hidden; }
.fw-vbar-fill { height: 100%; border-radius: 999px; background-image: var(--fw-gradient); }
.fw-empty--sm { padding: 1.5rem 1rem; font-size: .85rem; }

/* ---------- Enhanced product form ---------- */
.fw-vendor-form { background: var(--fw-card); border: 1px solid var(--fw-border); border-radius: 1.1rem; padding: 1.25rem 1.5rem 1.5rem; box-shadow: var(--fw-shadow-card); }
.fw-form-head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--fw-border); }
.fw-form-head-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background-image: var(--fw-gradient); color: #fff; flex: 0 0 auto; }
.fw-form-head h3 { margin: 0; font-size: 1.1rem; }
.fw-form-head span { font-size: .78rem; color: var(--fw-muted-fg); }
.fw-p-section { display: block; padding: .75rem 0; margin: .35rem 0; border-top: 1px solid var(--fw-border); }
.fw-p-section:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.fw-vendor-actions { padding-top: .5rem; }
@media (max-width: 720px) {
  .fw-vendor-form { padding: 1rem; }
  .fw-vendor-grid .fw-vendor-col:first-child .fw-p-section:last-child { margin-bottom: .5rem; }
}
@media (max-width: 520px) {
  .fw-vendor-form { padding: .75rem; }
}
.fw-dim-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: .3rem; }
.fw-dim-row .fw-input { text-align: center; min-width: 0; }
.fw-dim-x { color: var(--fw-muted-fg); font-size: .85rem; font-weight: 600; }
.fw-field--dimensions label { margin-bottom: .35rem; display: block; }
.fw-gallery-thumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.fw-gal-thumb { position: relative; width: 66px; height: 66px; border-radius: .65rem; overflow: hidden; flex: 0 0 auto; }
.fw-gal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fw-gal-x { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; border: 0; cursor: pointer; display: grid; place-items: center; font-size: 12px; line-height: 1; padding: 0; }
.fw-gallery-drop { display: flex; align-items: center; justify-content: center; gap: .4rem; width: 66px; height: 66px; border: 1.5px dashed var(--fw-border); border-radius: .65rem; cursor: pointer; color: var(--fw-muted-fg); font-size: .7rem; }
.fw-gallery-drop:hover { border-color: var(--fw-primary); color: var(--fw-primary); }
.fw-dl-file { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; border-radius: .7rem; background: var(--fw-accent); font-size: .82rem; font-weight: 500; }
.fw-dl-file span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-check-row { margin: .3rem 0 .5rem; }
.fw-toggle-label { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; font-size: .85rem; -webkit-user-select: none; user-select: none; }
.fw-toggle-label input { position: absolute; opacity: 0; pointer-events: none; }
.fw-toggle-track { position: relative; width: 36px; height: 20px; border-radius: 999px; background: var(--fw-muted); transition: background .2s; flex: 0 0 auto; }
.fw-toggle-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.fw-toggle-label input:checked + .fw-toggle-track { background: var(--fw-primary); }
.fw-toggle-label input:checked + .fw-toggle-track::after { transform: translateX(16px); }

/* ---- Manage stock (create/edit product) ---- */
.fw-stock-row { margin-bottom: 1rem; }
.fw-stock-head { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .45rem; }
.fw-stock-toggle {
  display: flex; align-items: center; gap: .65rem; width: 100%;
  background: var(--fw-accent, #f0f2ff); border: 1px solid var(--fw-border, #e2e8f0);
  border-radius: 12px; padding: .65rem .85rem; cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.fw-stock-toggle:hover { border-color: var(--fw-primary); background: color-mix(in oklab, var(--fw-accent, #f0f2ff) 60%, var(--fw-primary, #7c3aed)); }
.fw-stock-toggle:has(input:checked) { border-color: var(--fw-primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--fw-ring, oklch(0.55 0.27 300)) 20%, transparent); }
.fw-stock-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.fw-stock-switch {
  position: relative; width: 40px; height: 22px; border-radius: 999px; flex: 0 0 auto;
  background: var(--fw-muted, #e2e8f0); transition: background .2s;
}
.fw-stock-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .2s;
}
.fw-stock-toggle input:checked + .fw-stock-switch { background: var(--fw-primary); }
.fw-stock-toggle input:checked + .fw-stock-switch::after { transform: translateX(18px); }
.fw-stock-toggle-text { flex: 1; text-align: left; font-size: .88rem; font-weight: 600; color: var(--fw-fg, #1e293b); -webkit-user-select: none; user-select: none; }
.fw-stock-qty { display: flex; align-items: flex-end; gap: .7rem; margin-top: .7rem; }
.fw-stock-qty-label { font-size: .8rem; font-weight: 600; color: var(--fw-muted-fg, #64748b); padding-bottom: .6rem; white-space: nowrap; }
.fw-stock-qty-input { flex: 1; }
.fw-stock-qty-input .fw-input { width: 100%; padding: .7rem 1rem; }
@media (max-width: 480px) {
  .fw-stock-qty { flex-direction: column; align-items: stretch; gap: .35rem; }
  .fw-stock-qty-label { padding-bottom: 0; }
}

/* ======================= Boast (featured) ======================= */
.fw-boast-toggle {
  display: flex; align-items: center; gap: .65rem;
  background: var(--fw-accent, #f0f2ff); border: 1px solid var(--fw-border, #e2e8f0);
  border-radius: 12px; padding: .65rem .85rem; cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s; margin-right: auto;
}
.fw-boast-toggle:hover { border-color: var(--fw-primary); }
.fw-boast-toggle:has(input:checked) { border-color: #f59e0b; box-shadow: 0 0 0 3px color-mix(in oklab, #f59e0b 25%, transparent); }
.fw-boast-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.fw-boast-switch {
  position: relative; width: 40px; height: 22px; border-radius: 999px; flex: 0 0 auto;
  background: var(--fw-muted, #e2e8f0); transition: background .2s;
}
.fw-boast-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .2s;
}
.fw-boast-toggle input:checked + .fw-boast-switch { background: #f59e0b; }
.fw-boast-toggle input:checked + .fw-boast-switch::after { transform: translateX(18px); }
.fw-boast-toggle-text { flex: 1; text-align: left; font-size: .88rem; font-weight: 600; color: var(--fw-fg, #1e293b); display: inline-flex; align-items: center; gap: .4rem; -webkit-user-select: none; user-select: none; }
.fw-boast-toggle-text svg { color: #f59e0b; }

/* ----- Premium Boost (paid featured placement) button ----- */
.fw-boost-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .42rem .85rem; border-radius: 999px; cursor: pointer;
  font-size: .76rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--fw-fg, #1e293b); background: var(--fw-card, #fff);
  border: 1px solid var(--fw-border, #e2e8f0);
  box-shadow: 0 1px 2px rgba(16,24,40,.06);
  transition: border-color .2s, color .2s, background .2s, box-shadow .2s, transform .15s;
  font-family: inherit; line-height: 1.2; white-space: nowrap;
}
.fw-boost-btn svg { width: .95rem; height: .95rem; color: #f59e0b; }
.fw-boost-btn:hover { border-color: #f59e0b; color: #b45309; background: #fffbeb; }
.fw-boost-btn:active { transform: translateY(1px); }
.fw-boost-btn.is-boasted {
  color: #fff; background: linear-gradient(135deg, #f59e0b, #d97706);
  border-color: #d97706; box-shadow: 0 4px 14px rgba(245,158,11,.35);
}
.fw-boost-btn.is-boasted svg { color: #fff; }
.fw-boost-btn.is-boasted:hover { color: #fff; background: linear-gradient(135deg, #d97706, #b45309); box-shadow: 0 6px 18px rgba(245,158,11,.4); }

/* ----- Boost purchase modal ----- */
.fw-boost-modal { max-width: 30rem; width: min(94vw, 30rem); }
.fw-boost-modal-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.05rem; }
.fw-boost-modal-badge {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; flex: 0 0 auto;
  background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff;
  box-shadow: 0 6px 18px rgba(245,158,11,.35);
}
.fw-boost-modal-head h3 { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--fw-fg, #1e293b); }
.fw-boost-modal-head p { margin: .15rem 0 0; color: var(--fw-muted-fg); font-size: .85rem; }
.fw-boost-opt {
  display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items: center;
  padding: .85rem 1rem; border: 1px solid var(--fw-border, #e2e8f0); border-radius: 14px;
  margin-bottom: .7rem; background: var(--fw-bg-soft, #fafafa);
  transition: border-color .2s, box-shadow .2s;
}
.fw-boost-opt:hover { border-color: #f59e0b; box-shadow: 0 4px 16px rgba(245,158,11,.14); }
.fw-boost-opt-info strong { display: block; font-size: .9rem; color: var(--fw-fg, #1e293b); }
.fw-boost-opt-info span { font-size: .78rem; color: var(--fw-muted-fg); }
.fw-boost-opt-price { font-weight: 800; font-size: 1rem; color: #b45309; grid-row: span 2; align-self: center; }
.fw-boost-opt-btn {
  grid-column: 1 / -1; display: block; width: 100%; text-align: center;
  padding: .6rem 1rem; border-radius: 10px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff;
  font-weight: 700; font-size: .84rem; text-decoration: none; font-family: inherit;
  box-shadow: 0 4px 12px rgba(245,158,11,.3); transition: transform .15s, box-shadow .2s;
}
.fw-boost-opt-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(245,158,11,.4); color: #fff; }
.fw-boost-opt-btn:disabled { opacity: .6; cursor: wait; transform: none; box-shadow: none; }
.fw-boost-empty { color: var(--fw-muted-fg); font-size: .85rem; text-align: center; padding: .5rem 0; }
@media (max-width: 480px) {
  .fw-vendor-actions { flex-wrap: wrap; }
  .fw-boast-toggle { width: 100%; margin-right: 0; }
}

.fw-tag-select { min-height: 100px; }
.fw-tag-add { display: flex; gap: .4rem; margin-top: .35rem; }
.fw-tag-add input { flex: 1; }
.fw-field-note { margin: .2rem 0 0; font-size: .75rem; color: var(--fw-muted-fg); }
.fw-sched-toggle { margin: 1rem 0 .35rem; }
.fw-blog-sched { margin: 1rem 0 .35rem; }
.fw-sched-fields { display: flex; gap: .75rem; margin-bottom: 1rem; }
.fw-sched-fields.fw-hidden { display: none; }
.fw-sched-fields .fw-field { flex: 1; margin: 0; }
.fw-btn-sm { padding: .4rem .7rem; font-size: .78rem; }
.fw-dropzone.is-loading { opacity: .6; pointer-events: none; }

/* ---------- Vendor coupon management table ---------- */
.fw-vendor-manage-coupons .fw-settings-title { margin-bottom:.5rem; }
.fw-vtable-wrap { overflow-x:auto; border:1px solid var(--fw-border); border-radius:1rem; background:var(--fw-card); }
.fw-vtable { width:100%; border-collapse:collapse; font-size:.84rem; }
.fw-vtable th { text-align:left; padding:.65rem .8rem; font-weight:700; font-size:.78rem; color:var(--fw-muted-fg); border-bottom:1px solid var(--fw-border); white-space:nowrap; }
.fw-vtable td { padding:.65rem .8rem; border-bottom:1px solid var(--fw-border); vertical-align:middle; }
.fw-vtable tr:last-child td { border-bottom:0; }
.fw-vtable tr:hover td { background:var(--fw-accent); }

/* ---------- Vendor wallet ---------- */
.fw-wallet { max-width:42rem; }
.fw-wallet-balance { text-align:center; padding:1.5rem; border-radius:1.25rem; background:var(--fw-gradient); color:#fff; margin-bottom:1.25rem; }
.fw-wallet-balance .fw-wallet-label { display:block; font-size:.85rem; opacity:.8; font-weight:500; margin-bottom:.2rem; }
.fw-wallet-balance .fw-wallet-amount { display:block; font-size:2rem; font-weight:800; letter-spacing:-.02em; }
.fw-wallet-balance small { display:block; font-size:.75rem; opacity:.65; margin-top:.15rem; }
.fw-wallet-section { margin-bottom:1.5rem; }
.fw-wallet-section .fw-settings-title { margin-bottom:.5rem; }
.fw-wallet-txn-credit { color:#16a34a; font-weight:600; }
@media (max-width:639px) {
  .fw-wallet-balance .fw-wallet-amount { font-size:2.4rem; font-weight:900; }
  .fw-wallet-balance .fw-wallet-label { font-size:.95rem; opacity:.9; }
}
.fw-wallet-txn-debit { color:#dc2626; font-weight:600; }
.fw-wallet #fw-payout-form { margin-top:.5rem; }
.fw-status-badge { display:inline-block; padding:.15rem .55rem; border-radius:999px; font-size:.75rem; font-weight:600; text-transform:capitalize; }
.fw-status-badge--pending { background:#fef3c7; color:#92400e; }
.fw-status-badge--approved { background:#dbeafe; color:#1e40af; }
.fw-status-badge--paid { background:#d1fae5; color:#065f46; }
.fw-status-badge--rejected { background:#fee2e2; color:#991b1b; }

/* Responsive */
@media (max-width: 980px) {
  .fw-vrow2, .fw-vrow3 { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .fw-vlayout { grid-template-columns: 1fr; }
  .fw-vside {
    flex-direction: row; align-items: center; gap: .5rem; overflow-x: auto;
    border-right: 0; border-bottom: 1px solid var(--fw-border); padding: .6rem .8rem;
  }
  .fw-vside-brand { display: none; }
  .fw-vside-nav { flex-direction: row; gap: .3rem; }
  .fw-vside-item { padding: .5rem .7rem; white-space: nowrap; }
  .fw-vside-item span { font-size: .82rem; }
  .fw-vside-view, .fw-vside-help { display: none; }
  .fw-vbody { padding: 1rem 1rem 1.4rem; }
  .fw-vtop { grid-template-columns: 1fr; }
  .fw-vtop-tools { justify-content: space-between; }
  .fw-vtop-search { flex: 1; min-width: 0; }
  .fw-vstats { grid-template-columns: 1fr 1fr; }
  .fw-vstat--hero { grid-column: 1 / -1; }
  .fw-vquick { display: grid; }
}
@media (max-width: 520px) {
  .fw-vbody { padding: .75rem .65rem 1rem; }
  .fw-vendor-grid { gap: .75rem; }
  .fw-vendor-row { gap: .5rem; }
}
@media (max-width: 420px) {
  .fw-vbody { padding: .6rem .5rem .85rem; }
  .fw-vendor-form { padding: .6rem; }
  .fw-tabpanel { padding: .4rem; }
}
@media (max-width: 520px) {
  .fw-vtop-user span { display: none; }
  .fw-vstat-v { font-size: 1.2rem; }
  .fw-vchart-svg { height: 150px; }
}

/* ---------- newsletter opt-in shortcode ---------- */
.fw-optin { max-width: 520px; margin: 1rem auto; padding: 1.25rem; border: 1px solid var(--fw-border); border-radius: 16px; background: var(--fw-card); color: var(--fw-fg); }
.fw-optin-title { margin: 0 0 .3rem; font-size: 1.25rem; }
.fw-optin-text { margin: 0 0 .8rem; color: var(--fw-muted-fg); font-size: .9rem; }
.fw-optin-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.fw-optin-row input { flex: 1; min-width: 140px; padding: .6rem .8rem; border: 1px solid var(--fw-border); border-radius: .7rem; background: var(--fw-bg); color: var(--fw-fg); }
.fw-optin-msg { margin-top: .5rem; font-size: .85rem; }
.fw-optin-msg.is-ok { color: #16a34a; }
.fw-optin-msg.is-err { color: #dc2626; }

/* ---------- Product page contact bar ---------- */
.fw-contact-bar { display: flex; gap: .5rem; margin: 1rem 0; flex-wrap: wrap; }
.fw-contact-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1rem; border-radius: 999px; font-size: .85rem; font-weight: 600; text-decoration: none; transition: all .2s; border: 0; cursor: pointer; }
.fw-contact-btn--call { background: #22c55e; color: #fff; }
.fw-contact-btn--call:hover { background: #16a34a; color: #fff; }
.fw-contact-btn--wa { background: #25d366; color: #fff; }
.fw-contact-btn--wa:hover { background: #1da851; color: #fff; }

/* product heart / save button */
.fw-product-heart {
  position: absolute; top: .5rem; right: .5rem; z-index: 3;
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.7); backdrop-filter: blur(6px);
  display: grid; place-items: center; cursor: pointer;
  color: rgba(255,255,255,.8); transition: all .25s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.fw-product-heart:hover { background: rgba(255,255,255,.95); color: #ef4444; transform: scale(1.1); }
.fw-product-heart.is-saved { color: #ef4444; background: rgba(255,255,255,.95); }
.fw-product-heart.is-saved svg { fill: #ef4444; }
.fw-product-heart svg { width: 16px; height: 16px; transition: all .25s ease; }

/* saved subtabs */
.fw-saved-subtabs {
  display: flex; gap: .5rem; margin-bottom: 1.2rem;
}
.fw-saved-subtab {
  padding: .5rem 1.2rem; border-radius: 999px; border: none;
  background: var(--fw-primary); color: var(--fw-primary-fg);
  font-size: .78rem; font-weight: 600; cursor: pointer;
  transition: all .2s ease; box-shadow: 0 2px 8px rgba(122,82,204,.25);
}
.fw-saved-subtab:hover { opacity: .85; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(122,82,204,.35); }
.fw-saved-subtab.active { box-shadow: 0 2px 12px rgba(122,82,204,.4); }

/* saved product grid item price overlay */
.fw-grid-product { position: relative; }
.fw-product-price-overlay {
  position: absolute; bottom: .4rem; left: .4rem;
  background: rgba(122,82,204,.9); color: #fff;
  font-size: .65rem; font-weight: 700; padding: .2rem .5rem;
  border-radius: 999px; backdrop-filter: blur(4px);
}

@media (max-width: 520px) {
  .fw-price-badge { font-size: .68rem; padding: .25rem .55rem; bottom: .5rem; left: .5rem; }
  .fw-price-badge del { font-size: .55rem; }
  .fw-product-img { padding: .3rem; }
  .fw-product-img img { border-radius: .7rem; }
  .fw-saved-subtabs { gap: .4rem; margin-bottom: 1rem; }
  .fw-saved-subtab { padding: .45rem 1rem; font-size: .75rem; }
  .fw-product-heart { width: 28px; height: 28px; top: .4rem; right: .4rem; }
  .fw-product-heart svg { width: 14px; height: 14px; }
}

/* ---------- Booking Calendar Widget ---------- */
.ftsp-booking { margin-top: 1.5rem; background: var(--fw-card); border: 1px solid var(--fw-border); border-radius: 1.25rem; padding: 1.25rem; }
.ftsp-booking-head { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1rem; margin-bottom: 1rem; color: var(--fw-fg); }
.ftsp-booking-icon { color: var(--fw-primary); }
.ftsp-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.ftsp-cal-nav { background: var(--fw-muted); border: 0; width: 2rem; height: 2rem; border-radius: 999px; cursor: pointer; font-size: 1rem; color: var(--fw-fg); display: grid; place-items: center; transition: background .2s; }
.ftsp-cal-nav:hover { background: var(--fw-accent); }
.ftsp-cal-month { font-weight: 700; font-size: .95rem; }
.ftsp-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 2px; }
.ftsp-cal-days span { text-align: center; font-size: .7rem; font-weight: 600; color: var(--fw-muted-fg); padding: .3rem 0; text-transform: uppercase; }
.ftsp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ftsp-cal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: .6rem; font-size: .82rem; font-weight: 500; cursor: default; color: var(--fw-muted-fg); background: var(--fw-muted); transition: all .15s; position: relative; }
.ftsp-cal-day.is-available { background: color-mix(in oklab, var(--fw-primary) 10%, transparent); color: var(--fw-primary); cursor: pointer; font-weight: 600; }
.ftsp-cal-day.is-available:hover { background: color-mix(in oklab, var(--fw-primary) 20%, transparent); transform: scale(1.08); }
.ftsp-cal-day.is-selected { background-image: var(--fw-gradient); color: #fff; transform: scale(1.08); box-shadow: 0 4px 14px -4px color-mix(in oklab, var(--fw-primary) 40%, transparent); }
.ftsp-cal-day.is-today { font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--fw-primary); }
.ftsp-cal-day.is-past { opacity: .4; }
.ftsp-booking-slots { margin-top: 1rem; }
.ftsp-slots-head { font-size: .85rem; font-weight: 600; color: var(--fw-muted-fg); margin-bottom: .5rem; }
.ftsp-slots-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.ftsp-slot { padding: .45rem 1rem; border-radius: 999px; background: var(--fw-card); border: 1.5px solid var(--fw-border); font-size: .82rem; font-weight: 600; cursor: pointer; transition: all .15s; color: var(--fw-fg); }
.ftsp-slot:hover { border-color: var(--fw-primary); color: var(--fw-primary); }
.ftsp-slot.is-selected { background-image: var(--fw-gradient); color: #fff; border-color: transparent; box-shadow: 0 3px 10px -3px color-mix(in oklab, var(--fw-primary) 35%, transparent); }
.ftsp-slot.is-full { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.ftsp-booking-form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--fw-border); animation: fw-auth-fade .25s ease; }
.ftsp-bf-head { display: flex; gap: .75rem; font-size: .9rem; font-weight: 700; margin-bottom: 1rem; }
.ftsp-bf-date { color: var(--fw-primary); }
.ftsp-bf-time { color: var(--fw-fg); }
.ftsp-bf-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .75rem; }
.ftsp-booking-msg { margin-top: .75rem; }

/* ---------- Vendor Booking Received ---------- */
.fw-vbookings { display: flex; flex-direction: column; gap: .75rem; }
.fw-vbooking { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: var(--fw-card); border: 1px solid var(--fw-border); border-radius: 1rem; }
.fw-vbooking-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--fw-muted); }
.fw-vbooking-body { flex: 1; min-width: 0; }
.fw-vbooking-body strong { display: block; font-size: .9rem; }
.fw-vbooking-body small { display: block; font-size: .78rem; color: var(--fw-muted-fg); margin-top: 2px; }
.fw-vbooking-meta { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .78rem; color: var(--fw-muted-fg); margin-top: 4px; }
.fw-vbooking-actions { display: flex; gap: .35rem; flex-shrink: 0; }
.fw-vbooking-actions .fw-btn { padding: .4rem .75rem; font-size: .78rem; border-radius: 999px; }
.fw-vbadge--pending { background: color-mix(in oklab, #f59e0b 12%, transparent); color: #b45309; }
.fw-vbadge--confirmed { background: color-mix(in oklab, #10b981 12%, transparent); color: #047857; }
.fw-vbadge--cancelled { background: color-mix(in oklab, #ef4444 12%, transparent); color: #b91c1c; }
.fw-vbadge--completed { background: color-mix(in oklab, var(--fw-primary) 12%, transparent); color: var(--fw-primary); }

/* ---------- Booking Type-specific Fields ---------- */
.fw-b-type-fields { margin-bottom: 1rem; }
.fw-b-type-block { display: none; padding: .85rem; background: var(--fw-muted); border-radius: 1rem; margin-bottom: .75rem; border: 1px solid var(--fw-border); }
.fw-b-type-block .fw-vendor-row { margin-bottom: 0; }
.fw-b-type-block .fw-field { margin-bottom: .65rem; }
.fw-b-type-block .fw-field:last-child { margin-bottom: 0; }
.fw-b-type-block .fw-field label { font-size: .8rem; }
.fw-b-check-group { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
.fw-b-check { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--fw-fg); cursor: pointer; }
.fw-b-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--fw-primary); }

/* ---------- Booking Calendar Day-Picker (Vendor) ---------- */
.fw-b-cal-wrap { background: var(--fw-card); border: 1px solid var(--fw-border); border-radius: 1rem; padding: .85rem; max-width: 300px; }
.fw-b-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.fw-b-cal-nav { background: var(--fw-muted); border: 0; width: 1.8rem; height: 1.8rem; border-radius: 999px; cursor: pointer; font-size: .85rem; color: var(--fw-fg); display: grid; place-items: center; transition: background .15s; }
.fw-b-cal-nav:hover { background: var(--fw-accent); }
.fw-b-cal-month { font-weight: 700; font-size: .85rem; }
.fw-b-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; margin-bottom: 1px; }
.fw-b-cal-days span { text-align: center; font-size: .65rem; font-weight: 600; color: var(--fw-muted-fg); padding: .2rem 0; text-transform: uppercase; }
.fw-b-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.fw-b-cal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: .5rem; font-size: .78rem; font-weight: 500; cursor: pointer; color: var(--fw-fg); background: var(--fw-muted); transition: all .12s; }
.fw-b-cal-day:hover { background: color-mix(in oklab, var(--fw-primary) 12%, transparent); color: var(--fw-primary); }
.fw-b-cal-day.is-selected { background-image: var(--fw-gradient); color: #fff; transform: scale(1.06); box-shadow: 0 3px 10px -3px color-mix(in oklab, var(--fw-primary) 35%, transparent); }
.fw-b-cal-day.is-past { opacity: .3; cursor: default; }
.fw-b-cal-info { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .6rem; font-size: .75rem; color: var(--fw-muted-fg); }
.fw-b-cal-info .fw-btn-sm { font-size: .7rem; padding: .25rem .6rem; }
.fw-field-desc { font-size: .75rem; color: var(--fw-muted-fg); margin: .35rem 0 0; }

/* ---------- Mobile Calendar Trigger Buttons ---------- */
.fw-b-cal-trigger,
.ftsp-booking-trigger {
	display: none;
	width: 100%;
	padding: .8rem 1rem;
	background: var(--fw-card);
	border: 1.5px dashed var(--fw-border);
	border-radius: .85rem;
	color: var(--fw-fg);
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
	transition: all .2s;
	text-align: center;
	align-items: center;
	justify-content: center;
	gap: .5rem;
}
.fw-b-cal-trigger:hover,
.ftsp-booking-trigger:hover {
	border-color: var(--fw-primary);
	color: var(--fw-primary);
}
.fw-b-cal-trigger-icon,
.ftsp-booking-trigger-icon {
	color: var(--fw-primary);
	display: inline-flex;
}
.fw-b-cal-trigger-badge,
.ftsp-booking-trigger-badge {
	margin-left: auto;
	font-size: .75rem;
	font-weight: 500;
	color: var(--fw-muted-fg);
	background: var(--fw-muted);
	padding: .15rem .55rem;
	border-radius: 999px;
	white-space: nowrap;
}

/* ---------- Calendar Popup Overlay ---------- */
.fw-cal-overlay {
	position: static;
	display: block;
	background: none;
	backdrop-filter: none;
	z-index: auto;
}
.fw-cal-popup {
	padding: 0;
	background: none;
	border-radius: 0;
	max-width: none;
	max-height: none;
	animation: none;
	overflow: visible;
	width: auto;
	box-shadow: none;
}
.fw-cal-popup-head {
	display: none;
}
.fw-cal-popup-title {
	display: none;
}
.fw-cal-popup-close {
	display: none;
}
.fw-cal-popup-done {
	display: none;
}

/* ---------- Booking Bar (product page) ---------- */
.ftsp-booking-bar {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-top: .85rem;
	padding: .65rem .85rem;
	background: color-mix(in oklab, var(--fw-primary) 7%, transparent);
	border: 1px solid color-mix(in oklab, var(--fw-primary) 18%, transparent);
	border-radius: .85rem;
}
.ftsp-bbar-label {
	font-size: .85rem;
	font-weight: 600;
	color: var(--fw-fg);
}
.ftsp-bbar-label em {
	font-style: normal;
	color: var(--fw-primary);
}
#ftsp-bbar-book {
	font-size: .82rem;
	padding: .45rem 1rem;
}

@keyframes fw-cal-slide-up {
	from { transform: translateY(100%); }
	to { transform: translateY(0); }
}

/* ---------- Mobile Responsive (popup mode) ---------- */
@media (max-width: 768px) {
	/* Hide inline calendars on mobile, show trigger */
	.fw-b-cal-wrap {
		display: none;
	}
	.fw-b-cal-trigger {
		display: flex;
	}
	.ftsp-booking-cal {
		display: none !important;
	}
	.ftsp-booking-trigger {
		display: flex;
	}

	/* Overlay becomes fixed popup */
	.fw-cal-overlay {
		position: fixed;
		inset: 0;
		z-index: 99999;
		background: rgba(0,0,0,.45);
		backdrop-filter: blur(4px);
		align-items: flex-end;
		justify-content: center;
		display: none;
	}
	.fw-cal-overlay.is-open {
		display: flex;
	}
	.fw-cal-popup {
		background: var(--fw-card);
		border-radius: 1.25rem 1.25rem 0 0;
		width: 100%;
		max-width: 480px;
		max-height: 85vh;
		padding: 1.25rem 1.25rem 1.5rem;
		animation: fw-cal-slide-up .3s ease;
		overflow-y: auto;
		box-shadow: 0 -8px 40px rgba(0,0,0,.15);
	}
	.fw-cal-popup-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 1rem;
	}
	.fw-cal-popup-title {
		display: block;
		font-weight: 700;
		font-size: 1.05rem;
		color: var(--fw-fg);
	}
	.fw-cal-popup-close {
		display: grid;
		place-items: center;
		width: 2rem;
		height: 2rem;
		border: 0;
		background: var(--fw-muted);
		border-radius: 999px;
		cursor: pointer;
		color: var(--fw-fg);
		font-size: 1.2rem;
		transition: background .2s;
		line-height: 1;
	}
	.fw-cal-popup-close:hover {
		background: var(--fw-accent);
	}
	.fw-cal-popup-done {
		display: block;
		width: 100%;
		margin-top: 1rem;
		padding: .7rem;
		font-size: .95rem;
		font-weight: 700;
		text-align: center;
	}

	/* On mobile popup, restore calendar wrap display inside */
	.fw-cal-overlay .fw-b-cal-wrap {
		display: block;
		max-width: none;
	}
	.fw-cal-overlay .ftsp-booking-cal {
		display: block !important;
	}

	/* Product page: booking bar inside popup context */
	.ftsp-booking-bar {
		margin-top: .75rem;
		padding: .6rem .75rem;
	}
	.ftsp-bbar-label {
		font-size: .8rem;
	}
}

/* ---------- Small screens fine-tune ---------- */
@media (max-width: 420px) {
	.fw-cal-popup {
		padding: 1rem 1rem 1.25rem;
		max-height: 90vh;
	}
	.fw-b-cal-day,
	.ftsp-cal-day {
		font-size: .72rem;
	}
	.fw-b-cal-days span,
	.ftsp-cal-days span {
		font-size: .6rem;
	}
}

/* ---------- Booking Product: Hide Quantity & Adjust Buttons ---------- */
/* Hide WooCommerce quantity input on booking products */
.ftsp-booking .quantity,
.ftsp-booking .qty,
.ftsp-booking .quantity input,
.ftsp-booking .quantity button {
	display: none !important;
}

/* Adjust button layout for booking products */
.ftsp-booking .ftsp-actions--booking {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-top: .75rem;
}

/* Make "Add to Cart" button full-width for booking products */
.ftsp-booking .ftsp-actions--booking .single_add_to_cart_button {
	flex: 1;
	width: 100%;
}

/* Adjust booking bar for desktop (no popup) */
@media (min-width: 769px) {
	.ftsp-booking-bar {
		margin-top: 1rem;
	}
}

/* =========================================================
   AI Studio — Component Styles
   ========================================================= */

.fw-ai-top { background: linear-gradient(135deg, #7c3aed, #a855f7) !important; padding: 20px 24px !important; border-radius: 14px !important; margin-bottom: 20px !important; }
.fw-ai-top .fw-ai-top-title { display: block; margin: 0 0 .1rem; font-size: 1.45rem; font-weight: 700; color: #fff !important; }
.fw-ai-top h1 { color: #fff !important; margin: 0 !important; }
.fw-ai-top h1 svg { color: #fff !important; }
.fw-ai-top span { color: rgba(255,255,255,0.85) !important; }
.fw-ai-top .fw-vtop-user img { border-color: rgba(255,255,255,.3) !important; }
.fw-ai-top .fw-vtop-user span strong { color: #fff !important; }
.fw-ai-top .fw-vtop-user span small { color: rgba(255,255,255,.75) !important; }

/* Card */
.fw-ai-card { background: var(--fw-card); border: 1px solid var(--fw-border); border-radius: 1.1rem; padding: 1.25rem; box-shadow: var(--fw-shadow-card); margin-bottom: 1rem; }
.fw-ai-card-title { margin: 0 0 0.25rem; font-size: 1.05rem; font-weight: 700; color: var(--fw-fg); }
.fw-ai-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; }
.fw-ai-card-head .fw-ai-card-title { margin-bottom: 0; }
.fw-ai-card-desc { margin: 0 0 1rem; font-size: 0.85rem; color: var(--fw-muted-fg); }

/* Fields */
.fw-ai-field { margin-bottom: 1rem; }
.fw-ai-field:last-child { margin-bottom: 0; }
.fw-ai-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--fw-fg); margin-bottom: 0.4rem; }
.fw-ai-select {
	width: 100%; padding: 0.65rem 0.85rem; border: 1px solid var(--fw-border); border-radius: 0.75rem;
	background: var(--fw-bg); color: var(--fw-fg); font-family: inherit; font-size: 0.88rem; outline: none;
	transition: border-color 0.2s, box-shadow 0.2s; appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2rem;
}
.fw-ai-select:focus { border-color: var(--fw-primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--fw-ring) 20%, transparent); }
.fw-ai-textarea {
	width: 100%; padding: 0.75rem 0.85rem; border: 1px solid var(--fw-border); border-radius: 0.75rem;
	background: var(--fw-bg); color: var(--fw-fg); font-family: inherit; font-size: 0.88rem; line-height: 1.5;
	resize: vertical; outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.fw-ai-textarea:focus { border-color: var(--fw-primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--fw-ring) 20%, transparent); }
.fw-ai-textarea::placeholder { color: var(--fw-muted-fg); }
.fw-ai-textarea-wrap { position: relative; }
.fw-ai-charcount { position: absolute; bottom: 0.6rem; right: 0.75rem; font-size: 0.7rem; font-weight: 600; color: var(--fw-muted-fg); pointer-events: none; }

/* Toggle group */
.fw-ai-toggle-group { display: flex; gap: 0.35rem; padding: 0.25rem; background: var(--fw-muted); border-radius: 999px; width: fit-content; }
.fw-ai-toggle-btn { padding: 0.5rem 1rem; border: 0; border-radius: 999px; background: none; color: var(--fw-muted-fg); font-family: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; white-space: nowrap; }
.fw-ai-toggle-btn.is-active { background: var(--fw-card); color: var(--fw-primary); box-shadow: var(--fw-shadow-card); }
.fw-ai-toggle-btn:hover:not(.is-active) { color: var(--fw-fg); }

/* Buttons */
.fw-ai-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; border: 0; border-radius: 999px; font-family: inherit; font-weight: 600; cursor: pointer; transition: transform 0.15s, background 0.15s, box-shadow 0.15s; white-space: nowrap; }
.fw-ai-btn:hover { transform: translateY(-1px); }
.fw-ai-btn:active { transform: scale(0.98); }
.fw-ai-btn-primary { background-image: var(--fw-gradient); color: var(--fw-primary-fg); box-shadow: var(--fw-shadow-soft); padding: 0.75rem 1.75rem; font-size: 0.9rem; width: 100%; }
.fw-ai-btn-primary:hover { box-shadow: 0 8px 24px -6px color-mix(in oklab, var(--fw-primary) 40%, transparent); }
.fw-ai-btn-sm { background: var(--fw-muted); color: var(--fw-fg); padding: 0.4rem 0.85rem; font-size: 0.78rem; }
.fw-ai-btn-sm:hover { background: var(--fw-accent); color: var(--fw-accent-fg); transform: none; }
.fw-ai-btn.is-disabled, .fw-ai-btn:disabled { opacity: 0.5; pointer-events: none; }

/* Spinner */
.fw-ai-btn-spinner { width: 18px; height: 18px; border: 2.5px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: fw-ai-spin 0.7s linear infinite; }
@keyframes fw-ai-spin { to { transform: rotate(360deg); } }

/* Output */
.fw-ai-output-card { border-color: color-mix(in oklab, var(--fw-primary) 18%, var(--fw-border)); }
.fw-ai-output-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.fw-ai-output-actions { display: flex; gap: 0.4rem; }
.fw-ai-output-content { padding: 1rem; background: var(--fw-muted); border-radius: 0.85rem; font-size: 0.88rem; line-height: 1.7; color: var(--fw-fg); max-height: 400px; overflow-y: auto; white-space: pre-wrap; word-wrap: break-word; }
.fw-ai-output-content h1, .fw-ai-output-content h2, .fw-ai-output-content h3 { margin: 1rem 0 0.5rem; font-weight: 700; }
.fw-ai-output-content h1 { font-size: 1.2rem; }
.fw-ai-output-content h2 { font-size: 1.05rem; }
.fw-ai-output-content h3 { font-size: 0.95rem; }
.fw-ai-output-content p { margin: 0.5rem 0; }
.fw-ai-output-content ul, .fw-ai-output-content ol { padding-left: 1.5rem; margin: 0.5rem 0; }
.fw-ai-output-content strong { font-weight: 700; }
.fw-ai-output-content em { font-style: italic; }

/* Image Output */
.fw-ai-img-output { position: relative; border-radius: 0.85rem; overflow: hidden; background: var(--fw-muted); }
.fw-ai-img-output img { width: 100%; display: block; object-fit: contain; max-height: 500px; }
.fw-ai-img-loading { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; background: var(--fw-card); color: var(--fw-muted-fg); font-size: 0.82rem; font-weight: 600; animation: fw-ai-img-pulse 1.2s ease-in-out infinite alternate; }
.fw-ai-img-loading svg { color: var(--fw-primary); }
@keyframes fw-ai-img-pulse { from { opacity: 0.6; } to { opacity: 1; } }

/* Gallery lightbox */
.fw-ai-lightbox { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 2rem; background: rgba(0, 0, 0, 0.82); }
.fw-ai-lightbox.is-open { display: flex; }
.fw-ai-lightbox img { max-width: 92%; max-height: 84vh; border-radius: 0.6rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.fw-ai-lightbox-download { position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%); padding: 0.6rem 1.4rem; border-radius: 2rem; background: var(--fw-accent, #6366f1); color: var(--fw-accent-fg, #fff); font-family: inherit; font-size: 0.85rem; font-weight: 600; text-decoration: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); transition: background 0.15s, transform 0.15s; }
.fw-ai-lightbox-download:hover { background: var(--fw-accent-hover, #4f46e5); transform: translateX(-50%) translateY(-2px); }
.fw-ai-lightbox-close { position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 1.4rem; cursor: pointer; line-height: 1; display: grid; place-items: center; z-index: 2; }
.fw-ai-lightbox-close:hover { background: rgba(255, 255, 255, 0.3); }

/* Dropzone */
.fw-ai-dropzone-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 1.5rem; border: 2px dashed var(--fw-border); border-radius: 0.85rem; cursor: pointer; color: var(--fw-muted-fg); transition: border-color 0.2s, color 0.2s; text-align: center; }
.fw-ai-dropzone-inner:hover, .fw-ai-dropzone-inner.is-drag { border-color: var(--fw-primary); color: var(--fw-primary); }
.fw-ai-dropzone-inner p { margin: 0; font-size: 0.82rem; }
.fw-ai-dropzone-preview { position: relative; width: 100%; max-width: 200px; margin-top: 0.5rem; }
.fw-ai-dropzone-preview img { width: 100%; border-radius: 0.6rem; display: block; }
.fw-ai-dropzone-remove { position: absolute; top: -6px; right: -6px; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid var(--fw-card); background: var(--fw-destructive); color: #fff; font-size: 0.85rem; display: grid; place-items: center; cursor: pointer; line-height: 1; }

/* History List */
.fw-ai-history-list { display: flex; flex-direction: column; gap: 0.65rem; }
.fw-ai-history-item { padding: 0.85rem; background: var(--fw-muted); border-radius: 0.85rem; border: 1px solid var(--fw-border); }
.fw-ai-history-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; font-size: 0.72rem; color: var(--fw-muted-fg); }
.fw-ai-history-category { display: inline-block; padding: 0.15rem 0.5rem; background: color-mix(in oklab, var(--fw-primary) 12%, transparent); color: var(--fw-primary); border-radius: 999px; font-weight: 600; }
.fw-ai-history-prompt { font-size: 0.82rem; font-weight: 600; color: var(--fw-fg); margin-bottom: 0.35rem; }
.fw-ai-history-result { font-size: 0.8rem; color: var(--fw-muted-fg); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.fw-ai-history-result.is-expanded { display: block; -webkit-line-clamp: unset; overflow: visible; }
.fw-ai-history-result.is-expanded h1, .fw-ai-history-result.is-expanded h2, .fw-ai-history-result.is-expanded h3 { font-size: 1.05em; margin: 0.6em 0 0.3em; color: var(--fw-fg); }
.fw-ai-history-result.is-expanded ul, .fw-ai-history-result.is-expanded ol { margin: 0.4em 0 0.4em 1.2em; }
.fw-ai-history-result.is-expanded p { margin: 0.35em 0; }
.fw-ai-history-actions { display: flex; gap: 0.35rem; margin-top: 0.5rem; }

/* Gallery Grid */
.fw-ai-gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
@media (min-width: 640px) { .fw-ai-gallery-grid { grid-template-columns: repeat(3, 1fr); } }
.fw-ai-gallery-item { position: relative; border-radius: 0.85rem; overflow: hidden; background: var(--fw-muted); border: 1px solid var(--fw-border); transition: transform 0.2s, box-shadow 0.2s; }
.fw-ai-gallery-item:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); }
.fw-ai-gallery-item img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.fw-ai-gallery-bar { display: flex; gap: 0.3rem; padding: 0.4rem; background: var(--fw-card); }
.fw-ai-gallery-bar button, .fw-ai-gallery-bar a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; padding: 0.35rem 0.4rem; border: 0; border-radius: 0.5rem; background: var(--fw-muted); color: var(--fw-fg); font-family: inherit; font-size: 0.68rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: background 0.15s; text-align: center; }
.fw-ai-gallery-bar button:hover, .fw-ai-gallery-bar a:hover { background: var(--fw-accent); color: var(--fw-accent-fg); }

/* Empty states */
.fw-ai-history-empty, .fw-ai-gallery-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 3rem 1rem; color: var(--fw-muted-fg); text-align: center; }
.fw-ai-history-empty p, .fw-ai-gallery-empty p { margin: 0; font-size: 0.88rem; }

/* Toast messages */
.fw-ai-toast { position: fixed; bottom: 5rem; left: 50%; transform: translateX(-50%); z-index: 200; padding: 0.6rem 1.2rem; border-radius: 999px; background: var(--fw-card); color: var(--fw-fg); border: 1px solid var(--fw-border); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); font-size: 0.85rem; font-weight: 600; animation: fw-ai-toast-in 0.25s ease; white-space: nowrap; }
.fw-ai-toast.is-error { border-color: var(--fw-destructive); color: var(--fw-destructive); }
.fw-ai-toast.is-success { border-color: #22c55e; color: #16a34a; }
@keyframes fw-ai-toast-in { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* =========================================================================
   AI STUDIO — MOBILE (≤820px)
   Sleek, premium look for all form elements on phones & tablets
   ========================================================================= */
@media (max-width: 820px) {

  /* --- Cards --- */
  .fw-ai-card { padding: 0.85rem; border-radius: 0.9rem; margin-bottom: 0.75rem; }
  .fw-ai-card-title { font-size: 0.95rem; }

  /* --- Fields --- */
  .fw-ai-field { margin-bottom: 0.85rem; }

  /* --- Labels --- */
  .fw-ai-label { font-size: 0.75rem; margin-bottom: 0.3rem; }

  /* --- Select dropdowns --- */
  .fw-ai-select {
    width: 100%;
    padding: 0.7rem 2.2rem 0.7rem 0.8rem;
    border: 1.5px solid var(--fw-border);
    border-radius: 0.85rem;
    background-color: var(--fw-bg);
    color: var(--fw-fg);
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.4;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .fw-ai-select:focus {
    border-color: var(--fw-primary);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--fw-primary) 18%, transparent);
  }

  /* --- Textareas --- */
  .fw-ai-textarea {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1.5px solid var(--fw-border);
    border-radius: 0.85rem;
    background-color: var(--fw-bg);
    color: var(--fw-fg);
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.55;
    resize: vertical;
    outline: none;
    min-height: 110px;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .fw-ai-textarea:focus {
    border-color: var(--fw-primary);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--fw-primary) 18%, transparent);
  }
  .fw-ai-textarea::placeholder { color: var(--fw-muted-fg); opacity: 0.7; }
  .fw-ai-charcount { font-size: 0.65rem; bottom: 0.5rem; right: 0.65rem; }

  /* --- Toggle group (Text-to-Image / Image-to-Image) --- */
  .fw-ai-toggle-group {
    width: 100%;
    display: flex;
    gap: 0;
    padding: 0.2rem;
    background: var(--fw-muted);
    border-radius: 0.85rem;
  }
  .fw-ai-toggle-btn {
    flex: 1;
    padding: 0.55rem 0.5rem;
    border: 0;
    border-radius: 0.7rem;
    background: none;
    color: var(--fw-muted-fg);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    white-space: nowrap;
    text-align: center;
  }
  .fw-ai-toggle-btn.is-active {
    background: var(--fw-card);
    color: var(--fw-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }

  /* --- Primary button --- */
  .fw-ai-btn-primary {
    width: 100%;
    padding: 0.8rem 1.5rem;
    font-size: 0.88rem;
    border-radius: 0.85rem;
    margin-top: 0.15rem;
  }

  /* --- Small / utility buttons --- */
  .fw-ai-btn-sm { padding: 0.45rem 0.7rem; font-size: 0.72rem; border-radius: 0.6rem; }

  /* --- Output card --- */
  .fw-ai-output-card { margin-top: 0.75rem; }
  .fw-ai-output-head { margin-bottom: 0.5rem; }
  .fw-ai-output-content {
    padding: 0.8rem;
    border-radius: 0.75rem;
    font-size: 0.82rem;
    max-height: 320px;
  }

  /* --- Dropzone (img2img) --- */
  .fw-ai-dropzone-inner { padding: 1.2rem 0.8rem; border-radius: 0.75rem; }
  .fw-ai-dropzone-inner svg { width: 28px; height: 28px; }
  .fw-ai-dropzone-inner p { font-size: 0.75rem; }
  .fw-ai-dropzone-preview { max-width: 160px; }
  .fw-ai-dropzone-remove { width: 1.3rem; height: 1.3rem; font-size: 0.8rem; }

  /* --- Image output --- */
  .fw-ai-img-output { border-radius: 0.75rem; }
  .fw-ai-img-output img { max-height: 350px; }
  .fw-ai-output-actions { flex-wrap: wrap; }
  .fw-ai-output-actions .fw-ai-btn-sm { flex: 1; justify-content: center; min-width: 0; }

  /* --- History list --- */
  .fw-ai-history-item { padding: 0.7rem; border-radius: 0.75rem; }
  .fw-ai-history-meta { font-size: 0.65rem; }
  .fw-ai-history-prompt { font-size: 0.78rem; }
  .fw-ai-history-result { font-size: 0.72rem; -webkit-line-clamp: 2; }
  .fw-ai-history-actions { flex-wrap: wrap; }
  .fw-ai-history-actions .fw-ai-btn-sm { flex: 1; justify-content: center; }

  /* --- Gallery grid --- */
  .fw-ai-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .fw-ai-gallery-bar button, .fw-ai-gallery-bar a { padding: 0.3rem; font-size: 0.62rem; }

  /* --- Empty states --- */
  .fw-ai-history-empty, .fw-ai-gallery-empty { padding: 2rem 0.75rem; }
  .fw-ai-history-empty p, .fw-ai-gallery-empty p { font-size: 0.8rem; }

  /* --- Toast --- */
  .fw-ai-toast { bottom: 4.5rem; font-size: 0.78rem; padding: 0.5rem 1rem; }
}

/* Tighten further on very small phones (≤400px) */
@media (max-width: 400px) {
  .fw-ai-card { padding: 0.6rem; }
  .fw-ai-select, .fw-ai-textarea { font-size: 0.85rem; padding-left: 0.7rem; padding-right: 2rem; }
  .fw-ai-btn-primary { padding: 0.7rem 1rem; font-size: 0.82rem; }
  .fw-ai-toggle-btn { font-size: 0.72rem; padding: 0.45rem 0.35rem; }
  .fw-ai-gallery-grid { gap: 0.45rem; }
}

/* =========================================================
   Premium Typography Overhaul
   ========================================================= */

/* --- Gradient text utility --- */
.fw-gradient-text {
  background-image: var(--fw-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.flowear--dark .fw-gradient-text {
  background-image: linear-gradient(135deg, oklch(0.78 0.22 305), oklch(0.72 0.2 335));
  -webkit-background-clip: text;
  background-clip: text;
}

/* --- Large bold headings — gradient + refined --- */
.fw-vside-brand-txt strong {
  background-image: var(--fw-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
}
.flowear--dark .fw-vside-brand-txt strong {
  background-image: linear-gradient(135deg, oklch(0.88 0.14 305), oklch(0.82 0.16 335));
  -webkit-background-clip: text;
  background-clip: text;
}
.fw-vtop-hi h1 {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.fw-ai-top-title,
.fw-vtop-hi h1 {
  letter-spacing: -0.02em;
}

/* --- Page / section headings --- */
.fw-tabs .fw-tab,
.fw-vsub .fw-tab {
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: color 0.2s, font-weight 0.2s;
}
.fw-tab.is-active {
  font-weight: 700;
}
.fw-vsub .fw-tab.is-active {
  background-image: none;
  -webkit-text-fill-color: initial;
  color: var(--fw-primary);
}
.fw-blog-manage-title,
.fw-ai-card-title {
  font-weight: 800;
  letter-spacing: -0.02em;
  background-image: var(--fw-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.flowear--dark .fw-blog-manage-title,
.flowear--dark .fw-ai-card-title {
  background-image: linear-gradient(135deg, oklch(0.88 0.14 305), oklch(0.82 0.16 335));
  -webkit-background-clip: text;
  background-clip: text;
}

/* --- Card / post body text --- */
.fw-post-content p,
.fw-modal-card p,
.fw-ai-card p {
  line-height: 1.65;
  letter-spacing: 0.005em;
}
.fw-post-caption {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--fw-fg);
  letter-spacing: 0.005em;
}

/* --- Shop & product cards --- */
.ftsp-shop-name {
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--fw-fg);
  transition: color 0.15s;
}
.ftsp-shop-card:hover .ftsp-shop-name {
  background-image: var(--fw-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ftsp-shop-vendor {
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fw-muted-fg);
}
.ftsp-shop-price-abs {
  font-weight: 800;
  letter-spacing: -0.02em;
}
.ftsp-shop-badge {
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.62rem;
}
.flowear--dark .ftsp-shop-name {
  color: var(--fw-fg);
}
.flowear--dark .ftsp-shop-card:hover .ftsp-shop-name {
  background-image: linear-gradient(135deg, oklch(0.88 0.14 305), oklch(0.82 0.16 335));
  -webkit-background-clip: text;
  background-clip: text;
}

/* --- Vendor product rows --- */
.fw-productrow-title {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.fw-productrow-meta .fw-price {
  font-weight: 700;
  letter-spacing: -0.02em;
}
.fw-status--publish {
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* --- Metrics / analytics --- */
.fw-metric-v {
  font-weight: 800;
  letter-spacing: -0.03em;
  background-image: var(--fw-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.flowear--dark .fw-metric-v {
  background-image: linear-gradient(135deg, oklch(0.88 0.14 305), oklch(0.82 0.16 335));
  -webkit-background-clip: text;
  background-clip: text;
}
.fw-metric-l {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.68rem;
  color: var(--fw-muted-fg);
}

/* --- Form labels --- */
label,
.fw-ai-label,
.fw-label,
.fw-field label {
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--fw-fg);
}

/* --- Form inputs, selects, textareas --- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
textarea,
select,
.fw-ai-input,
.fw-ai-select,
.fw-ai-textarea {
  font-weight: 500;
  letter-spacing: 0.005em;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus,
textarea:focus,
select:focus,
.fw-ai-input:focus,
.fw-ai-select:focus,
.fw-ai-textarea:focus {
  border-color: var(--fw-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--fw-primary) 15%, transparent);
}

/* --- Buttons — refined text --- */
.fw-btn,
.fw-btn-primary,
.fw-btn-muted,
.fw-btn-xs,
.fw-btn-sm,
.fw-ai-btn-primary {
  font-weight: 650;
  letter-spacing: 0.01em;
}
.fw-btn-primary,
.fw-btn-primary.fw-btn-block {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* --- Sidebar nav items --- */
.fw-vside-item {
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: font-weight 0.15s, letter-spacing 0.15s;
}
.fw-vside-item:hover {
  font-weight: 700;
}
.fw-vside-item.is-active {
  font-weight: 700;
  letter-spacing: 0.015em;
}
.fw-vside-item span {
  font-size: 0.82rem;
}
.fw-vside-item.is-active span {
  font-weight: 700;
}

/* --- Modals / popups --- */
.fw-modal-card h2 {
  font-weight: 800;
  letter-spacing: -0.02em;
  background-image: var(--fw-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.flowear--dark .fw-modal-card h2 {
  background-image: linear-gradient(135deg, oklch(0.88 0.14 305), oklch(0.82 0.16 335));
  -webkit-background-clip: text;
  background-clip: text;
}
.fw-modal-card .fw-modal-sub {
  font-weight: 500;
  letter-spacing: 0.005em;
}

/* --- Empty states --- */
.fw-empty {
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--fw-muted-fg);
}

/* --- Status badges --- */
.fw-status-badge {
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* --- AI Studio headings --- */
.fw-ai-top-title {
  font-weight: 800;
  letter-spacing: -0.02em;
  background-image: linear-gradient(135deg, #fff 20%, rgba(255,255,255,0.8));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.fw-vtop.fw-ai-top h1 {
  font-weight: 800;
  letter-spacing: -0.02em;
  -webkit-text-fill-color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.fw-ai-card-title {
  font-size: 1.15rem;
}
.fw-ai-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fw-muted-fg);
}
.fw-ai-select,
.fw-ai-textarea {
  border-radius: 0.65rem;
  border: 1.5px solid var(--fw-border);
}

/* --- AI history / gallery items --- */
.fw-ai-history-prompt {
  font-weight: 600;
  letter-spacing: -0.005em;
}
.fw-ai-history-result {
  color: var(--fw-muted-fg);
  line-height: 1.5;
}
.fw-ai-gallery-bar a,
.fw-ai-gallery-bar button {
  font-weight: 650;
  letter-spacing: 0.01em;
}

/* --- Support ticket rows --- */
.fw-tk-row strong {
  font-weight: 700;
  letter-spacing: -0.01em;
}
.fw-tk-badge {
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.65rem;
}
.fw-tk-prio {
  font-weight: 600;
  font-size: 0.7rem;
}

/* --- Affiliate --- */
.fw-aff-package-info h3,
.fw-aff-stat-num {
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* --- Shop hero --- */
.ftsp-shop-title {
  font-weight: 800;
  letter-spacing: -0.03em;
  background-image: linear-gradient(135deg, #fff 10%, rgba(255,255,255,0.85));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.ftsp-shop-sub {
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* --- Category filter chips --- */
.fw-store-cat {
  font-weight: 600;
  letter-spacing: 0.01em;
}
.fw-store-cat.is-active {
  font-weight: 700;
  background-image: var(--fw-gradient);
  color: var(--fw-primary-fg);
}

/* --- Post actions / reactions --- */
.fw-post-action {
  font-weight: 600;
  letter-spacing: 0.005em;
}

/* --- Profile / user card --- */
.fw-profile-name {
  font-weight: 800;
  letter-spacing: -0.02em;
}
.fw-profile-bio {
  line-height: 1.6;
  color: var(--fw-muted-fg);
}

/* --- Settings / preferences text --- */
.fw-pref-sub {
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--fw-muted-fg);
}

/* --- Pagination --- */
.fw-pagination a,
.fw-pagination span {
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* --- PWA install popup --- */
.fw-pwa-prompt-title {
  font-weight: 800;
  letter-spacing: -0.02em;
}
.fw-pwa-prompt-desc {
  font-weight: 500;
  letter-spacing: 0.005em;
}

/* --- Story viewer --- */
.fw-storyview-name {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* --- Thread / messaging --- */
.fw-thread-name {
  font-weight: 700;
  letter-spacing: -0.01em;
}
.fw-thread-msg {
  line-height: 1.55;
  letter-spacing: 0.005em;
}

/* --- Dark mode refinements --- */
.flowear--dark .fw-tab {
  color: var(--fw-muted-fg);
}
.flowear--dark .fw-tab.is-active {
  color: var(--fw-primary);
}
.flowear--dark .fw-modal-card p {
  color: var(--fw-muted-fg);
}
.flowear--dark .fw-empty {
  color: var(--fw-muted-fg);
}
.flowear--dark .fw-store-cat.is-active {
  background-image: linear-gradient(135deg, oklch(0.62 0.26 305), oklch(0.65 0.24 335));
  color: #fff;
}
.flowear--dark .fw-productrow-title {
  color: var(--fw-fg);
}

/* --- Heading hierarchy refinement --- */
.fw-vside-brand-txt small {
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.62rem;
  color: var(--fw-muted-fg);
}

/* --- Login / auth forms --- */
.fw-auth-card h2 {
  font-weight: 800;
  letter-spacing: -0.02em;
}
.fw-auth-card label {
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* =========================================================
   Theme compatibility — neutralize the Flowear theme's
   .ft-article wrapper so the plugin shell renders correctly
   regardless of which page template is assigned.
   ========================================================= */

/* Remove the article card wrapper styling when it contains the plugin shell */
.ft-article:has(.flowear) {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
.ft-article:has(.flowear) > .ft-article-body {
  padding: 0;
}
.ft-article:has(.flowear) > .ft-article-body.ft-single {
  padding: 0;
}

/* Full-width breakout on mobile so the shell spans the viewport */
@media (max-width: 639px) {
  .ft-site-main > .ft-container > .ft-layout > .ft-content > .ft-article:has(.flowear) {
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
    border-radius: 0;
  }
  .ft-article:has(.flowear) .flowear {
    border-radius: 0;
  }
}

/* For templates without ft-article (template-no-title, template-full-width),
   let the entry-content children break out on mobile */
@media (max-width: 639px) {
  .ft-content > .entry-content > .flowear {
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
    border-radius: 0;
  }
}

/* ── Discover feed: Instagram-style single column (ID beats cached grid classes) ── */
#fw-feed { grid-template-columns: minmax(0,1fr) !important; gap: 1.25rem !important; }
#fw-feed .fw-post { width: 100% !important; max-width: 100% !important; }
/* ══════════ Discover: narrow centered feed (Instagram) ══════════ */
#fw-feed { max-width: 38rem !important; margin-left: auto !important; margin-right: auto !important; }

/* ══════════ Premium WooCommerce Cart ══════════ */
.woocommerce-cart .woocommerce { max-width: 62rem; margin: 0 auto; }
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-cart div.woocommerce-info { border: 0; border-radius: 14px; background: var(--fw-card,#fff); color: var(--fw-fg,#1e293b); box-shadow: var(--fw-ring,0 0 0 1px rgba(124,58,237,.15)), 0 8px 24px -12px rgba(15,23,42,.15); border-left: 4px solid var(--fw-primary,#7c3aed); padding: 1rem 1.25rem !important; }
.woocommerce-cart form.woocommerce-cart-form { background: var(--fw-card,#fff); border: 1px solid var(--fw-border,#e2e8f0); border-radius: 20px; padding: 1.25rem; box-shadow: 0 10px 40px -18px rgba(15,23,42,.18); }
.woocommerce-cart table.shop_table { border: 0 !important; border-collapse: separate; border-spacing: 0; }
.woocommerce-cart table.shop_table thead th { border: 0; background: transparent; color: var(--fw-muted-fg,#64748b); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; padding: .6rem .75rem; }
.woocommerce-cart table.shop_table td { border-top: 1px solid var(--fw-border,#eef1f6) !important; border-left: 0; border-right: 0; border-bottom: 0; padding: 1rem .75rem; vertical-align: middle; }
.woocommerce-cart table.shop_table img { width: 72px !important; height: 72px; object-fit: cover; border-radius: 14px; margin: 0 !important; box-shadow: 0 4px 14px -6px rgba(15,23,42,.25); }
.woocommerce-cart .product-name a { color: var(--fw-fg,#1e293b); font-weight: 700; text-decoration: none; }
.woocommerce-cart .product-name a:hover { color: var(--fw-primary,#7c3aed); }
.woocommerce-cart td.product-price, .woocommerce-cart td.product-subtotal { font-weight: 800; color: var(--fw-fg,#1e293b); }
.woocommerce-cart td.product-price .amount, .woocommerce-cart td.product-subtotal .amount { color: var(--fw-primary,#7c3aed); }
.woocommerce-cart .product-remove a { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: rgba(239,68,68,.1); color: #dc2626 !important; font-size: 1rem; transition: .2s; }
.woocommerce-cart .product-remove a:hover { background: #ef4444; color: #fff !important; }
.woocommerce-cart .quantity .qty { border: 1.5px solid var(--fw-border,#e2e8f0); border-radius: 10px; padding: .5rem .6rem; width: 4.2rem; text-align: center; font-weight: 700; background: var(--fw-muted,#f8fafc); }
.woocommerce-cart .coupon { display: flex; gap: .5rem; align-items: center; }
.woocommerce-cart .coupon .input-text { border: 1.5px solid var(--fw-border,#e2e8f0) !important; border-radius: 999px !important; padding: .6rem 1rem !important; background: var(--fw-muted,#f8fafc); box-shadow: none !important; }
.woocommerce-cart .coupon button, .woocommerce-cart button[name="update_cart"] { background: var(--fw-muted,#f1f5f9) !important; color: var(--fw-fg,#1e293b) !important; border-radius: 999px !important; border: 0 !important; padding: .65rem 1.3rem !important; font-weight: 700 !important; transition: .2s; }
.woocommerce-cart .coupon button:hover, .woocommerce-cart button[name="update_cart"]:hover { filter: brightness(.95); transform: translateY(-1px); }
.woocommerce-cart .cart-collaterals .cart_totals { background: var(--fw-card,#fff); border: 1px solid var(--fw-border,#e2e8f0); border-radius: 20px; padding: 1.4rem; box-shadow: 0 14px 44px -20px rgba(15,23,42,.25); }
.woocommerce-cart .cart-collaterals h2 { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; margin-top: 0; }
.woocommerce-cart .cart-collaterals .shop_table { border: 0 !important; }
.woocommerce-cart .cart-collaterals td, .woocommerce-cart .cart-collaterals th { border: 0 !important; padding: .45rem 0; }
.woocommerce-cart .cart-collaterals .order-total .amount { font-size: 1.35rem; font-weight: 800; color: var(--fw-primary,#7c3aed); }
.woocommerce-cart a.checkout-button, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  background: var(--fw-gradient,linear-gradient(135deg,#7c3aed,#a855f7)) !important;
  color: #fff !important; border-radius: 999px !important; font-weight: 800 !important;
  padding: 1rem !important; letter-spacing: .01em; border: 0 !important;
  box-shadow: 0 10px 26px -8px rgba(124,58,237,.55) !important; transition: .2s;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(124,58,237,.6) !important; }
@media (max-width: 767px) {
  .woocommerce-cart form.woocommerce-cart-form { padding: .75rem; border-radius: 16px; }
  .woocommerce-cart table.shop_table thead { display: none; }
  .woocommerce-cart table.shop_table, .woocommerce-cart table.shop_table tbody,
  .woocommerce-cart table.shop_table tr, .woocommerce-cart table.shop_table td { display: block; width: 100%; box-sizing: border-box; }
  .woocommerce-cart table.shop_table tr { position: relative; border: 1px solid var(--fw-border,#eef1f6); border-radius: 16px; margin-bottom: .8rem; padding: .75rem; }
  .woocommerce-cart table.shop_table td { border: 0 !important; padding: .35rem .5rem; }
  .woocommerce-cart td.product-thumbnail { position: absolute; top: .75rem; left: .75rem; width: 56px; }
  .woocommerce-cart td.product-thumbnail img { width: 56px !important; height: 56px; }
  .woocommerce-cart td.product-name { padding-left: 4.6rem !important; }
  .woocommerce-cart td.product-remove { position: absolute; top: .75rem; right: .75rem; width: auto; }
}

/* ══════════ Premium Pricing Page ══════════ */
.fw-pricing { max-width: 68rem; margin: 0 auto; }
.fw-pricing-hero { text-align: center; padding: 2.2rem 1rem 1.6rem; position: relative; overflow: hidden; border-radius: 24px; margin-bottom: 2rem; }
.fw-pricing-hero::before { content: ""; position: absolute; inset: 0; background: var(--fw-gradient,linear-gradient(135deg,#7c3aed,#a855f7)); opacity: .92; }
.fw-pricing-hero > * { position: relative; z-index: 1; }
.fw-pricing-hero h1 { color: #fff; font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 .4rem; }
.fw-pricing-hero p { color: rgba(255,255,255,.85); font-size: .95rem; margin: 0; }
.fw-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.4rem; align-items: stretch; padding: 0 .25rem 2rem; }
.fw-price-card { position: relative; background: var(--fw-card,#fff); border: 1px solid var(--fw-border,#e2e8f0); border-radius: 22px; padding: 1.9rem 1.5rem 1.7rem; display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s, border-color .25s; }
.fw-price-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -20px rgba(15,23,42,.28); border-color: color-mix(in oklab, var(--fw-primary,#7c3aed) 30%, var(--fw-border,#e2e8f0)); }
.fw-price-card.is-popular { border: 2px solid transparent; background:
  linear-gradient(var(--fw-card,#fff), var(--fw-card,#fff)) padding-box,
  var(--fw-gradient,linear-gradient(135deg,#7c3aed,#a855f7)) border-box;
  box-shadow: 0 24px 60px -22px rgba(124,58,237,.5); }
.fw-price-card.is-popular:hover { transform: translateY(-8px) scale(1.015); }
.fw-price-flag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--fw-gradient,linear-gradient(135deg,#7c3aed,#a855f7)); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .32rem .9rem; border-radius: 999px; white-space: nowrap; box-shadow: 0 6px 16px -4px rgba(124,58,237,.5); }
.fw-price-name { font-size: 1.02rem; font-weight: 800; color: var(--fw-fg,#1e293b); margin: 0 0 .2rem; }
.fw-price-amount { font-size: 2.15rem; font-weight: 800; letter-spacing: -.03em; color: var(--fw-fg,#1e293b); line-height: 1.1; margin: .35rem 0 .1rem; }
.fw-price-amount .amount { color: var(--fw-primary,#7c3aed); }
.fw-price-amount del { font-size: 1rem; opacity: .5; font-weight: 600; }
.fw-price-sub { font-size: .78rem; color: var(--fw-muted-fg,#64748b); margin: 0 0 1.1rem; }
.fw-price-feats { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.fw-price-feats li { display: flex; gap: .55rem; align-items: flex-start; font-size: .86rem; color: var(--fw-fg,#1e293b); line-height: 1.45; }
.fw-price-feats li::before { content: "✓"; flex: none; width: 18px; height: 18px; border-radius: 999px; background: color-mix(in oklab, var(--fw-primary,#7c3aed) 14%, transparent); color: var(--fw-primary,#7c3aed); font-size: .7rem; font-weight: 800; display: inline-grid; place-items: center; margin-top: .1rem; }
.fw-price-cta { display: block; text-align: center; padding: .85rem; border-radius: 999px; font-weight: 800; font-size: .9rem; text-decoration: none !important; background: var(--fw-muted,#f1f5f9); color: var(--fw-fg,#1e293b); border: 0; transition: .2s; }
.fw-price-cta:hover { transform: translateY(-2px); filter: brightness(.97); }
.fw-price-card.is-popular .fw-price-cta, .fw-price-card .fw-price-cta.is-primary { background: var(--fw-gradient,linear-gradient(135deg,#7c3aed,#a855f7)); color: #fff; box-shadow: 0 10px 26px -8px rgba(124,58,237,.55); }
.fw-price-card.is-popular .fw-price-cta:hover, .fw-price-card .fw-price-cta.is-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(124,58,237,.6); }
.fw-price-empty { text-align: center; color: var(--fw-muted-fg,#64748b); padding: 3rem 1rem; }
/* ══════════ Premium post cards + single view ══════════ */
.fw-post--premium { border-radius: 20px !important; border: 1px solid var(--fw-border,#e9ecf3); background: var(--fw-card,#fff); box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 32px -18px rgba(15,23,42,.18); overflow: hidden; transition: box-shadow .25s, transform .25s; }
.fw-post--premium:hover { box-shadow: 0 4px 10px rgba(15,23,42,.05), 0 22px 48px -20px rgba(15,23,42,.24); transform: translateY(-2px); }

.fw-post-head { display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem .75rem; }
.fw-post-ava { position: relative; flex: none; width: 42px; height: 42px; border-radius: 999px; padding: 2.5px; background: var(--fw-gradient,linear-gradient(135deg,#7c3aed,#a855f7)); display: block; }
.fw-post-ava img { width: 100%; height: 100%; border-radius: 999px; object-fit: cover; display: block; border: 2px solid var(--fw-card,#fff); }
.fw-post-id { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.fw-post-id .fw-post-author { display: inline-flex; align-items: center; gap: .3rem; text-decoration: none; }
.fw-post-id .fw-name { font-weight: 800; font-size: .92rem; color: var(--fw-fg,#1e293b); letter-spacing: -.01em; }
.fw-post-id .fw-post-author svg { color: var(--fw-primary,#7c3aed); }
.fw-post-time { font-size: .74rem; color: var(--fw-muted-fg,#94a3b8); font-weight: 600; }
.fw-post-head .fw-post-more { margin-left: auto; }

/* Post header follow pill */
.fw-post-name-row { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.fw-post-name-row .fw-post-author { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.fw-post-name-row .fw-post-author .fw-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-post-name-row .fw-post-author svg { flex: none; }
.fw-follow-pill {
  flex: none; margin-left: auto;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .32rem .78rem;
  border-radius: 999px;
  border: 1px solid rgba(124,58,237,.35);
  background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(217,70,239,.12));
  color: var(--fw-primary,#7c3aed);
  font-family: inherit; font-size: .72rem; font-weight: 800; letter-spacing: .01em;
  line-height: 1; cursor: pointer; user-select: none; white-space: nowrap;
  transition: all .2s ease;
}
.fw-follow-pill svg { width: .8rem; height: .8rem; }
.fw-follow-pill:hover { transform: translateY(-1px); border-color: transparent; background: linear-gradient(135deg,#7c3aed,#a855f7); color: #fff; box-shadow: 0 6px 16px -6px rgba(124,58,237,.5); }
.fw-follow-pill:active { transform: scale(.94); }
.fw-follow-pill .fw-follow-ico-check, .fw-follow-pill .fw-follow-txt-following { display: none; }
.fw-follow-pill.is-following { border-color: rgba(22,163,74,.4); background: rgba(22,163,74,.1); color: #16a34a; }
.fw-follow-pill.is-following .fw-follow-ico-check, .fw-follow-pill.is-following .fw-follow-txt-following { display: inline-flex; }
.fw-follow-pill.is-following .fw-follow-ico-plus, .fw-follow-pill.is-following .fw-follow-txt-follow { display: none; }
.fw-follow-pill.is-following:hover { background: #16a34a; color: #fff; box-shadow: 0 6px 16px -6px rgba(22,163,74,.55); }
.fw-storyview-follow[hidden] { display: none; }
.fw-storyview-follow { margin-left: auto; }

.fw-post--premium .fw-post-stage { position: relative; }
.fw-post--premium .fw-post-stage > img,
.fw-post--premium .fw-post-media { width: 100%; height: auto; max-height: 30rem; object-fit: cover; display: block; }
.fw-post-open { position: absolute; inset: 0; z-index: 1; }

.fw-actbar { display: flex; align-items: center; gap: .25rem; padding: .55rem .7rem .2rem; position: relative; z-index: 2; }
.fw-act { appearance: none; background: transparent; border: 0; display: inline-flex; align-items: center; gap: .38rem; padding: .5rem .7rem; margin: 0; border-radius: 999px; cursor: pointer; color: var(--fw-muted-fg,#64748b); font-family: inherit; font-size: .84rem; font-weight: 700; line-height: 1; transition: background .18s, color .18s, transform .12s; text-decoration: none; }
.fw-act svg { width: 1.32rem; height: 1.32rem; transition: transform .18s; }
.fw-act:hover { background: var(--fw-muted,#f4f5fa); color: var(--fw-fg,#1e293b); }
.fw-act:active svg { transform: scale(.86); }
.fw-act .fw-count { font-variant-numeric: tabular-nums; }
.fw-act--like:hover { color: #e11d48; }
.fw-act--like.is-liked { color: #e11d48; }
.fw-act--like.is-liked svg { fill: #e11d48; transform: scale(1.08); }
.fw-act--comment:hover { color: var(--fw-primary,#7c3aed); }
.fw-act--share:hover { color: #0284c7; }
.fw-act--save:hover { color: #d97706; }
.fw-act--save.is-saved { color: #d97706; }
.fw-act--save.is-saved svg { fill: #d97706; }
.fw-act--buy { margin-left: auto; background: rgba(16,185,129,.1); color: #059669 !important; padding-inline: .85rem; }
.fw-act--buy:hover { background: rgba(16,185,129,.18); color: #047857 !important; }
.fw-act--buy svg { fill: none; }

.fw-post-body { padding: .35rem 1rem .95rem; }
.fw-post--premium .fw-post-cap { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--fw-fg,#1e293b); max-width: 100%; }
.fw-post--premium .fw-cap-author { font-weight: 800; margin-right: .15rem; }
.fw-tagchip { display: inline-flex; margin-top: .5rem; padding: .28rem .75rem; border-radius: 999px; font-size: .74rem; font-weight: 700; background: color-mix(in oklab, var(--fw-primary,#7c3aed) 10%, transparent); color: color-mix(in srgb, var(--fw-primary,#7c3aed) 72%, #111827); }

/* single post view */
.fw-single-panel { max-width: 39rem; margin: 0 auto; }
.fw-single-back { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 1rem; padding: .5rem 1.05rem; border-radius: 999px; background: var(--fw-card,#fff); border: 1px solid var(--fw-border,#e2e8f0); color: var(--fw-fg,#1e293b); font-size: .82rem; font-weight: 700; text-decoration: none; transition: .2s; }
.fw-single-back:hover { border-color: var(--fw-primary,#7c3aed); color: var(--fw-primary,#7c3aed); transform: translateX(-2px); }
.fw-single-feed .fw-post--premium { border-radius: 24px; }
.fw-single-feed .fw-comments.is-open { display: block; border-top: 1px solid var(--fw-border,#eef1f6); margin-top: .4rem; padding: 1rem 1rem 1.1rem; }
.fw-single-feed .fw-comment-head { font-weight: 800; font-size: .95rem; margin-bottom: .75rem; color: var(--fw-fg,#1e293b); }
.fw-single-feed .fw-comment-form input { flex: 1; border: 1.5px solid var(--fw-border,#e2e8f0); border-radius: 999px; padding: .6rem 1rem; font-size: .86rem; background: var(--fw-muted,#f8fafc); }
.fw-single-feed .fw-comment-form { display: flex; gap: .5rem; margin-top: .8rem; }
.fw-single-feed .fw-comment-form button { width: 42px; height: 42px; border-radius: 999px; border: 0; background: var(--fw-gradient,linear-gradient(135deg,#7c3aed,#a855f7)); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
/* ══════════ Vertical rail (frosted underlay) + portrait cards ══════════ */
.fw-post--premium { border-radius: 26px !important; }
.fw-post--premium .fw-post-stage { overflow: hidden; }
.fw-post--premium .fw-post-stage > img,
.fw-post--premium .fw-post-media {
  aspect-ratio: 4 / 5 !important;
  height: auto !important;
  max-height: none !important;
  object-fit: cover !important;
}
.fw-post--premium .fw-post-yt { aspect-ratio: 9 / 14; max-height: none; }

/* frosted vertical rail, floating over the media */
.fw-actbar {
  position: absolute !important;
  right: .8rem;
  bottom: 1rem;
  z-index: 3;
  flex-direction: column !important;
  gap: .15rem !important;
  padding: .55rem .3rem !important;
  background: rgba(255,255,255,.16) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255,255,255,.32) !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.fw-act { flex-direction: column !important; gap: .1rem !important; padding: .42rem .5rem !important; color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.fw-act svg { width: 1.45rem !important; height: 1.45rem !important; fill: rgba(255,255,255,.55); filter: drop-shadow(0 1px 3px rgba(0,0,0,.45)); }
.fw-act .fw-count { font-size: .72rem !important; color: #fff !important; }
.fw-act:hover { background: rgba(255,255,255,.22) !important; color: #fff !important; transform: scale(1.06); }
.fw-act--like:hover { color: #fb7185 !important; }
.fw-act--like.is-liked { color: #fb7185 !important; }
.fw-act--like.is-liked svg { fill: #fb7185 !important; transform: scale(1.12); }
.fw-act--comment:hover { color: #c4b5fd !important; }
.fw-act--share:hover { color: #7dd3fc !important; }
.fw-act--save:hover { color: #fcd34d !important; }
.fw-act--save.is-saved { color: #fcd34d !important; }
.fw-act--save.is-saved svg { fill: #fcd34d !important; }
.fw-act--buy { background: rgba(16,185,129,.35) !important; color: #fff !important; margin: .25rem 0 0 !important; }
.fw-act--buy:hover { background: rgba(16,185,129,.55) !important; }
.fw-act--buy svg { fill: none !important; }

/* body sits flush under media now that the rail overlays it */
.fw-post-body { padding-top: .8rem !important; }

/* single post view — extra-large premium radius */
.fw-single-feed .fw-post--premium { border-radius: 32px !important; }
.fw-single-panel { max-width: 37rem; }
/* ══════════ Rail polish: footer-nav purple + subtle glass + white icons ══════════ */
.fw-actbar {
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.05)), linear-gradient(145deg, #7a52cc, #9333ea) !important;
  border-color: rgba(216,180,254,.4) !important;
  box-shadow: 0 8px 26px -8px rgba(91,33,182,.55), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
.fw-act { color: #fff !important; }
.fw-act svg {
  color: #fff !important;
  fill: #fff !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)) !important;
}
.fw-act .fw-count { color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.fw-act:hover { background: rgba(255,255,255,.28) !important; color: #fff !important; }
.fw-act--like:hover { color: #ff8fa3 !important; }
.fw-act--like:hover svg { fill: #ff8fa3 !important; }
/* clicked like = bright red (shadow + scale preserved) */
.fw-act--like.is-liked { color: #ff2d55 !important; }
.fw-act--like.is-liked svg { fill: #ff2d55 !important; color: #ff2d55 !important; filter: drop-shadow(0 2px 6px rgba(255,45,85,.55)) !important; }
/* ══════════ YouTube: play first, open-while-playing ══════════ */
.fw-post-open--yt { display: none !important; }
.fw-post-yt.is-playing ~ .fw-post-open--yt {
  display: block !important;
  cursor: pointer;
}
/* ══════════ Premium: light-purple glass surfaces (site-wide) ══════════ */
/* Mirrors the Subscription tab "Current plan" hero so every page, tab and
   sub-tab carries the same soft glass feel. Applied over --fw-card surfaces
   (background-image only — the base color stays from the theme variable). */
.flowear .fw-sidebar,
.flowear .fw-panel,
.flowear .fw-vside,
.flowear .fw-vcard,
.flowear .fw-vstat,
.flowear .fw-ai-card,
.flowear .fw-aff-dash,
.flowear .fw-aff-card,
.flowear .fw-tk-stat,
.flowear .fw-tk-row,
.flowear .fw-kb-hero,
.flowear .fw-kb-cat,
.flowear .fw-kb-arow,
.flowear .fw-modal-card,
.flowear .fw-upgrade-panel,
.flowear .fw-sub-stat {
  background-image:
    radial-gradient(130% 160% at 0% 0%, rgba(124,58,237,.08), transparent 52%),
    radial-gradient(130% 160% at 100% 100%, rgba(168,85,247,.07), transparent 52%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(249,246,255,.98));
}
.flowear--dark .fw-sidebar,
.flowear--dark .fw-panel,
.flowear--dark .fw-vside,
.flowear--dark .fw-vcard,
.flowear--dark .fw-vstat,
.flowear--dark .fw-ai-card,
.flowear--dark .fw-aff-dash,
.flowear--dark .fw-aff-card,
.flowear--dark .fw-tk-stat,
.flowear--dark .fw-tk-row,
.flowear--dark .fw-kb-hero,
.flowear--dark .fw-kb-cat,
.flowear--dark .fw-kb-arow,
.flowear--dark .fw-modal-card,
.flowear--dark .fw-upgrade-panel,
.flowear--dark .fw-sub-stat {
  background-image:
    radial-gradient(130% 160% at 0% 0%, rgba(139,92,246,.16), transparent 52%),
    radial-gradient(130% 160% at 100% 100%, rgba(168,85,247,.12), transparent 52%);
}
/* ══════════ Premium body text vocabulary══════════ */
/* Sleek treatments from the Current Plan widget spread across all body content */

/* Card headings → gradient purple text */
.flowear .fw-aff-card h3,
.flowear .fw-vcard h3,
.flowear .fw-vcard-head h3,
.flowear .fw-ai-card-title {
  font-weight: 800;
  letter-spacing: -.02em;
  background-image: linear-gradient(135deg, #7c3aed, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Stat values → bold gradient purple */
.flowear .fw-vstat-v,
.flowear .fw-tk-stat strong {
  background-image: linear-gradient(135deg, #7c3aed, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Hero/pink variants → restore crisp white */
.flowear .fw-vstat--hero .fw-vstat-v,
.flowear .fw-vstat--pink .fw-vstat-v {
  background-image: none;
  -webkit-text-fill-color: #fff;
}

/* Stat labels → uppercase, tight tracking */
.flowear .fw-vstat-l,
.flowear .fw-tk-stat small {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--fw-muted-fg, #6b7280);
}
/* Hero/pink variants → restore soft white labels */
.flowear .fw-vstat--hero .fw-vstat-l { text-transform: none; font-size: .78rem; font-weight: 400; color: rgba(255,255,255,.85); }
.flowear .fw-vstat--pink .fw-vstat-l { text-transform: none; font-size: .78rem; font-weight: 400; color: rgba(255,255,255,.9); }

/* Stat chips → refined spacing */
.flowear .fw-vstat-chip { letter-spacing: .03em; }

/* Stat icon chips → frosted purple glass (Current Plan style) */
.flowear .fw-vstat-ico,
.flowear .fw-tk-stat-ico {
  background: color-mix(in oklab, var(--fw-primary, #7c3aed) 12%, transparent);
  color: var(--fw-primary, #7c3aed);
}
.flowear .fw-vstat--hero .fw-vstat-ico,
.flowear .fw-vstat--pink .fw-vstat-ico {
  background: rgba(255,255,255,.22);
  color: #fff;
}

/* Dark mode */
.flowear--dark .fw-aff-card h3,
.flowear--dark .fw-vcard h3,
.flowear--dark .fw-vcard-head h3,
.flowear--dark .fw-ai-card-title {
  background-image: linear-gradient(135deg, #c4b5fd, #d8b4fe);
}
.flowear--dark .fw-vstat-v,
.flowear--dark .fw-tk-stat strong {
  background-image: linear-gradient(135deg, #c4b5fd, #d8b4fe);
}
.flowear--dark .fw-vstat-ico,
.flowear--dark .fw-tk-stat-ico {
  background: color-mix(in oklab, var(--fw-primary, #7c3aed) 18%, transparent);
}

/* ══════════ Hero/signed stat cards keep their signature look ══════════ */
/* The glass surfaces block above must NOT flatten the gradient-bg stat
   variants — restore their signature gradient + white text. */
.flowear .fw-vstat.fw-vstat--hero { background-image: var(--fw-gradient); color: #fff; border: 0; box-shadow: 0 10px 30px -14px rgba(124,58,237,.5); }
.flowear .fw-vstat.fw-vstat--pink { background-image: linear-gradient(135deg, oklch(0.62 0.25 350), oklch(0.66 0.24 20)); color: #fff; border: 0; box-shadow: 0 10px 30px -14px rgba(236,72,153,.5); }
.flowear .fw-vstat.fw-vstat--hero .fw-vstat-chip,
.flowear .fw-vstat.fw-vstat--pink .fw-vstat-chip { color: rgba(255,255,255,.9); }

/* ══════════ Premium form surfaces══════════ */
/* Same sleek light-purple glass + colored text on every create/edit form,
   editor and modal across the site (vendor, events, booking, coupons,
   payout, store, blog, AI studio, auth, groups, support…). */

.flowear .fw-vendor-form,
.flowear .fw-settings-form,
.flowear .fw-blog-editor,
.flowear .fwg-panelcard,
.flowear .fwg-modal-overlay.open .fwg-modal {
  background-image:
    radial-gradient(130% 160% at 0% 0%, rgba(124,58,237,.08), transparent 52%),
    radial-gradient(130% 160% at 100% 100%, rgba(168,85,247,.07), transparent 52%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(249,246,255,.98));
  border-color: rgba(124,58,237,.18);
  box-shadow: 0 10px 30px -14px rgba(124,58,237,.35), inset 0 1px 0 rgba(255,255,255,.55);
}
/* Auth card keeps its own signature purple glow, just gains the glass wash */
.flowear .fw-auth-card {
  background-image:
    radial-gradient(130% 160% at 0% 0%, rgba(124,58,237,.1), transparent 52%),
    radial-gradient(130% 160% at 100% 100%, rgba(168,85,247,.08), transparent 52%),
    linear-gradient(135deg, rgba(255,255,255,.97), rgba(249,246,255,.99));
  border: 1px solid rgba(124,58,237,.16);
}

/* Form-card headings → gradient purple text */
.flowear .fw-form-head h3,
.flowear .fw-modal-title,
.flowear .fw-modal-card h2,
.flowear .fw-settings-title,
.flowear .fwg-panelhead h3,
.flowear .fwg-modal h3 {
  font-weight: 800;
  letter-spacing: -.02em;
  background-image: linear-gradient(135deg, #7c3aed, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Form-card sub-descriptions stay readable */
.flowear .fw-form-head span,
.flowear .fw-modal-card .fw-modal-sub {
  background-image: none;
  -webkit-text-fill-color: var(--fw-muted-fg, #64748b);
  color: var(--fw-muted-fg, #64748b);
}

/* Field labels → sleek uppercase micro-labels (Current Plan tag style) */
.flowear .fw-vendor-form label,
.flowear .fw-settings-form label,
.flowear .fw-blog-editor label,
.flowear .fw-auth-form label,
.flowear .fw-field > span,
.flowear .fw-field label,
.flowear .fwg-label,
.flowear .fw-ai-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(109,40,217,.92);
}
/* Checkbox/toggle/switch companion labels stay readable */
.flowear .fw-auth-remember,
.flowear .fw-toggle-label,
.flowear .fw-check,
.flowear .fw-b-check,
.flowear .fw-stock-toggle,
.flowear .fw-stock-qty-label,
.flowear .fw-stock-head,
.flowear .fw-boast-toggle,
.flowear .fw-switch,
.flowear .fwg-check,
/* parent-scoped, to beat the high-specificity micro-label rules above */
.flowear .fw-vendor-form label.fw-toggle-label,
.flowear .fw-vendor-form label.fw-b-check,
.flowear .fw-vendor-form label.fw-stock-toggle,
.flowear .fw-vendor-form label.fw-stock-qty-label,
.flowear .fw-vendor-form label.fw-stock-head,
.flowear .fw-vendor-form label.fw-boast-toggle,
.flowear .fw-vendor-form label.fw-switch,
.flowear .fw-settings-form label.fw-switch,
.flowear .fw-auth-form label.fw-auth-remember,
.flowear .fw-blog-editor label.fw-toggle-label {
  font-size: inherit;
  font-weight: 500;
  text-transform: none;
  letter-spacing: .01em;
  color: var(--fw-fg, #1e293b);
}

/* Inputs → frosted purple-tint (scoped, background-color only so the
   select chevron background-image is never clobbered) */
.flowear .fw-vendor-form .fw-input,
.flowear .fw-vendor-form .fw-textarea,
.flowear .fw-vendor-form select,
.flowear .fw-settings-form .fw-input,
.flowear .fw-settings-form .fw-textarea,
.flowear .fw-settings-form select,
.flowear .fw-blog-editor .fw-input,
.flowear .fw-blog-editor select,
.flowear .fw-auth-form .fw-input,
.flowear .fw-ai-select,
.flowear .fw-ai-textarea,
.flowear .fwg-input,
.flowear .fwg-textarea,
.flowear .fwg-select,
.flowear .fwg-modal input,
.flowear .fwg-modal textarea,
.flowear .fwg-modal select {
  background-color: color-mix(in oklab, var(--fw-primary, #7c3aed) 4%, var(--fw-muted, #f3f5fa));
  border-color: color-mix(in oklab, var(--fw-primary, #7c3aed) 22%, var(--fw-border, #e2e8f0));
}

/* Blog editor accents */
.flowear .fw-blog-editor { max-width: 760px; padding: 1.75rem 2rem; border-radius: 1.25rem; border: 1px solid rgba(124,58,237,.18); box-shadow: 0 10px 30px -14px rgba(124,58,237,.35), inset 0 1px 0 rgba(255,255,255,.55); }
.flowear .fw-blog-title { border-bottom-color: color-mix(in oklab, var(--fw-primary, #7c3aed) 25%, transparent); }
.flowear .fw-blog-palette {
  background: color-mix(in oklab, var(--fw-primary, #7c3aed) 4%, var(--fw-muted, #f3f5fa));
  border: 1px solid color-mix(in oklab, var(--fw-primary, #7c3aed) 16%, transparent);
}
.flowear .fw-blog-palette-label {
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  font-size: .7rem;
  color: rgba(109,40,217,.9);
}
.flowear .fw-blockchip {
  border-color: color-mix(in oklab, var(--fw-primary, #7c3aed) 20%, transparent);
  background: color-mix(in oklab, var(--fw-primary, #7c3aed) 4%, #fff);
}
/* Dropzones → frosted purple dashed */
.flowear .fw-dropzone {
  background: color-mix(in oklab, var(--fw-primary, #7c3aed) 4%, var(--fw-muted, #f3f5fa));
  border: 1.5px dashed color-mix(in oklab, var(--fw-primary, #7c3aed) 32%, transparent);
}

/* Dark mode */
.flowear--dark .fw-vendor-form,
.flowear--dark .fw-settings-form,
.flowear--dark .fw-blog-editor,
.flowear--dark .fw-auth-card,
.flowear--dark .fwg-panelcard,
.flowear--dark .fwg-modal-overlay.open .fwg-modal {
  background-image:
    radial-gradient(130% 160% at 0% 0%, rgba(139,92,246,.16), transparent 52%),
    radial-gradient(130% 160% at 100% 100%, rgba(168,85,247,.12), transparent 52%);
  border-color: rgba(139,92,246,.24);
  box-shadow: 0 10px 30px -16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
.flowear--dark .fw-form-head h3,
.flowear--dark .fw-modal-title,
.flowear--dark .fw-modal-card h2,
.flowear--dark .fw-settings-title,
.flowear--dark .fwg-panelhead h3,
.flowear--dark .fwg-modal h3 {
  background-image: linear-gradient(135deg, #c4b5fd, #d8b4fe);
}
.flowear--dark .fw-vendor-form label,
.flowear--dark .fw-settings-form label,
.flowear--dark .fw-blog-editor label,
.flowear--dark .fw-auth-form label,
.flowear--dark .fw-field > span,
.flowear--dark .fw-field label,
.flowear--dark .fwg-label,
.flowear--dark .fw-ai-label {
  color: #c4b5fd;
}
.flowear--dark .fw-vendor-form .fw-input,
.flowear--dark .fw-vendor-form .fw-textarea,
.flowear--dark .fw-vendor-form select,
.flowear--dark .fw-settings-form .fw-input,
.flowear--dark .fw-settings-form .fw-textarea,
.flowear--dark .fw-settings-form select,
.flowear--dark .fw-blog-editor .fw-input,
.flowear--dark .fw-blog-editor select,
.flowear--dark .fw-auth-form .fw-input,
.flowear--dark .fw-ai-select,
.flowear--dark .fw-ai-textarea,
.flowear--dark .fwg-input,
.flowear--dark .fwg-textarea,
.flowear--dark .fwg-select,
.flowear--dark .fwg-modal input,
.flowear--dark .fwg-modal textarea,
.flowear--dark .fwg-modal select {
  background-color: color-mix(in oklab, var(--fw-primary, #7c3aed) 12%, transparent);
  border-color: color-mix(in oklab, var(--fw-primary, #7c3aed) 34%, var(--fw-border, #334155));
}
.flowear--dark .fw-blog-palette {
  background: color-mix(in oklab, var(--fw-primary, #7c3aed) 8%, transparent);
  border-color: color-mix(in oklab, var(--fw-primary, #7c3aed) 22%, transparent);
}
.flowear--dark .fw-blockchip { background: color-mix(in oklab, var(--fw-primary, #7c3aed) 8%, transparent); }
.flowear--dark .fw-dropzone {
  background: color-mix(in oklab, var(--fw-primary, #7c3aed) 8%, transparent);
  border-color: color-mix(in oklab, var(--fw-primary, #7c3aed) 34%, transparent);
}

/* ══════════ Dashboards: nav always on top + content clearance ══════════ */
/* nav z-index stays 40 — FAB panel (51) must stay above it */
@media (max-width: 1023px) {
  .fw-vendor2, .fw-events-dash { padding-bottom: 5.75rem !important; }
}
/* Nav: force-visible on mobile no matter what (last word) */
@media (max-width: 1023px) {
  body .fw-mobnav {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateX(-50%) !important;
  }
}
/* Nav gradient fallback (nav may be relocated to <body>, outside .flowear vars) */
.fw-mobnav { background: var(--fw-gradient, linear-gradient(135deg, #7c3aed, #a855f7)) !important; }
/* ══════════ App canvas body (vendor/events standalone template) ══════════ */
body.fw-canvas-body { margin: 0; background: #f7f5fb; }
body.fw-canvas-body .flowear { min-height: 100vh; padding: 1rem .9rem 5.5rem; }
@media (min-width: 1024px) { body.fw-canvas-body .flowear { padding: 1.5rem 2rem; } }

/* ══════════ Auth page is ALWAYS light ══════════ */
/* The login/sign-up page must never render dark, even if a stale cached
   theme script (or an OS-preference detector) adds the dark class after
   load. Re-point the design tokens back to their light values and undo the
   auth-specific dark overrides. Higher-specificity selectors win. */
.fw-auth-page.flowear--dark,
.fw-auth-page.flowear--dark .fw-auth-card {
  --fw-bg: oklch(0.985 0.004 280);
  --fw-fg: oklch(0.22 0.03 285);
  --fw-card: oklch(1 0 0);
  --fw-muted: oklch(0.965 0.008 285);
  --fw-muted-fg: oklch(0.55 0.03 285);
  --fw-accent: oklch(0.95 0.04 305);
  --fw-accent-fg: oklch(0.4 0.12 300);
  --fw-border: oklch(0.92 0.01 290);
  --fw-primary: oklch(0.55 0.27 300);
  --fw-primary-fg: oklch(0.99 0 0);
  --fw-primary-glow: oklch(0.62 0.25 330);
  --fw-destructive: oklch(0.62 0.24 18);
  --fw-ring: oklch(0.55 0.27 300);
  --fw-gradient: linear-gradient(135deg, var(--fw-primary), var(--fw-primary-glow));
  --fw-gradient-page: linear-gradient(150deg, oklch(0.97 0.03 300), oklch(0.97 0.02 250), oklch(0.98 0.025 30));
}
.fw-auth-page.flowear--dark {
  background: linear-gradient(135deg, #f5f0ff 0%, #ede5ff 50%, #f0e8ff 100%) !important;
}
.fw-auth-page.flowear--dark .fw-auth-card {
  background-image: none;
  background-color: var(--fw-card);
  border-color: var(--fw-border);
  box-shadow: 0 25px 70px -16px color-mix(in oklab, var(--fw-primary) 30%, transparent), 0 0 0 1px var(--fw-border), 0 0 80px -20px color-mix(in oklab, var(--fw-primary) 12%, transparent);
}
.fw-auth-page.flowear--dark .fw-auth-form label { color: var(--fw-fg); }
.fw-auth-page.flowear--dark .fw-auth-form .fw-input { background-color: var(--fw-card); border-color: var(--fw-border); }