/*
 * WAF redesign layer — hand-authored, loaded after the compiled Tailwind
 * bundles. Everything in here is additive: existing classes are never
 * removed from markup, only supplemented with `wf-*` classes for the new
 * visual skin. See /home/sonamap/.claude/plans/validated-baking-kernighan.md
 */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
  /* Navy scale (brand background) */
  --wf-navy-950: #05070d;
  --wf-navy-900: #0a0e1a;
  --wf-navy-800: #0f1420;
  --wf-navy-700: #141a2b;
  --wf-navy-600: #1b2338;
  --wf-navy-500: #2a3350;
  --wf-navy-400: #3d4767;
  --wf-navy-300: #5b6690;
  --wf-navy-200: #8891b5;
  --wf-navy-100: #c3c8dd;
  --wf-navy-50: #eef0f8;

  /* Brand gradient anchors (from the WAF logo) */
  --wf-purple-600: #7c3aed;
  --wf-purple-500: #9061f9;
  --wf-blue-600: #3b82f6;
  --wf-blue-500: #38bdf8;
  --wf-gradient-brand: linear-gradient(135deg, #7c3aed 0%, #6366f1 45%, #38bdf8 100%);
  --wf-gradient-brand-soft: linear-gradient(135deg, rgba(124, 58, 237, 0.16) 0%, rgba(59, 130, 246, 0.16) 100%);
  --wf-accent: #6d5ef8;
  --wf-accent-rgb: 109, 94, 248;

  /* Semantic */
  --wf-success: #22c55e;
  --wf-danger: #ef4444;
  --wf-warning: #f59e0b;
  --wf-info: #38bdf8;

  /* Surfaces — light theme defaults */
  --wf-bg-canvas: #f5f6fb;
  --wf-bg-surface: #ffffff;
  --wf-bg-surface-raised: #f8f9fd;
  --wf-border-subtle: #e4e7f2;
  --wf-border-strong: #d3d8ea;
  --wf-text-primary: #1a1f36;
  --wf-text-muted: #6b7290;
  --wf-shadow-color: 222deg 40% 55%;

  /* Glass */
  --wf-glass-bg: rgba(255, 255, 255, 0.6);
  --wf-glass-border: rgba(124, 58, 237, 0.12);
  --wf-glass-blur: 16px;

  --wf-radius-sm: 10px;
  --wf-radius-md: 14px;
  --wf-radius-lg: 20px;
  --wf-ease: cubic-bezier(0.22, 1, 0.36, 1);

}

/* Sidebar layout: the old label panel is retired on the rail redesign; the
   rail (--main-sidebar-width, set inline on #root) is now its single sidebar
   surface and toggles its own width between icon-only/labeled. The compiled
   app.css still adds --sidebar-panel-width on top of that in its
   .is-sidebar-open offset rules, so it's zeroed here — scoped to .wf-shell
   only, since admin still runs the original two-panel sidebar and needs
   --sidebar-panel-width to keep working for its own (unscoped) calc()s. */
.wf-shell {
  --sidebar-panel-width: 0px;
}

/* The rules in this block assume the single-rail sidebar redesign, where
   --main-sidebar-width (set inline on #root) is the only offset main-content
   ever needs. Admin still runs the vendor theme's original two-panel
   sidebar (fixed-width icon rail + a separate sliding label panel whose
   width the compiled app.css adds on top via --sidebar-panel-width when
   .is-sidebar-open is set) — forcing these overrides there would pin
   main-content's margin to just the rail width and stop it making room
   for the panel, so they're scoped to .wf-shell (added only on #root in
   app.blade.php, the layout that actually has the redesigned rail). */
@media (min-width: 1280px) {
  /* Deliberately NOT gated behind .is-sidebar-open: that class is driven
     by the vendor theme's own toggle handler, which the rail redesign
     bypasses (see initSidebarPersistence in wf-app.js), so the class can
     drift out of sync with the actual rail width — and it also happens to
     reactivate the retired .sidebar-panel overlay (see below), which then
     swallows clicks meant for the rail. --main-sidebar-width itself always
     reflects the current rail width already, so the offset below is
     applied unconditionally on desktop: the rail is always docked/fixed
     there, never an overlay, so it should always push content over. */
  .wf-shell .main-content {
    margin-left: var(--main-sidebar-width) !important;
  }
  .wf-shell nav.header {
    width: calc(100% - var(--main-sidebar-width)) !important;
  }
}
.wf-shell .main-content,
.wf-shell nav.header {
  /* The compiled app.css animates margin-left/width via transition, but
     that transition gets permanently stuck once --main-sidebar-width
     itself changes value dynamically (not just the class toggling which
     rule applies) — so it's disabled here rather than fought. */
  transition: none !important;
}
.wf-shell .main-sidebar {
  transition: none !important;
}
.wf-sidebar-rail {
  transition: none !important;
}
/* navigation.blade.php keeps an empty .sidebar-panel in the DOM purely as
   a layout placeholder (marked aria-hidden) now that the rail above is the
   real sidebar. But the compiled app.css still gives .sidebar-panel a
   fixed, full-height, z-index:30 box that slides on-screen whenever
   .is-sidebar-open is set — which silently sits on top of the rail's nav
   links and swallows every click while the sidebar is expanded. Scope by
   the aria-hidden marker so admin's real (non-empty) .sidebar-panel, which
   still needs to be clickable, is untouched. */
.sidebar-panel[aria-hidden="true"] {
  pointer-events: none !important;
  width: 0 !important;
}
/* navigation.blade.php's mobile sidebar backdrop (and its "close menu"
   button) rely on the `md:hidden` utility to disappear on desktop, but the
   compiled app.css was never rebuilt after that markup was added — `.sm:hidden`,
   `.lg:hidden` and `.xl:hidden` all exist in it, but `.md\:hidden` does not.
   Without it the backdrop falls back to its default block display at every
   width, covering the full viewport (fixed inset-0) and closing the sidebar
   the instant you click anywhere on the page. Define the missing utility
   here rather than depending on a rebuild. */
@media (min-width: 768px) {
  .md\:hidden {
    display: none !important;
  }
}

html.dark {
  --wf-bg-canvas: var(--wf-navy-900);
  --wf-bg-surface: var(--wf-navy-700);
  --wf-bg-surface-raised: var(--wf-navy-600);
  --wf-border-subtle: rgba(255, 255, 255, 0.08);
  --wf-border-strong: rgba(255, 255, 255, 0.16);
  --wf-text-primary: #f3f4fb;
  --wf-text-muted: #9aa2c3;
  --wf-accent: #8f83ff;
  --wf-glass-bg: rgba(13, 17, 28, 0.55);
  --wf-glass-border: rgba(139, 113, 246, 0.25);
  --wf-shadow-color: 240deg 60% 3%;
}

@media (prefers-reduced-motion: reduce) {
  .wf-reveal,
  .wf-glow-pulse,
  .wf-gradient-shift,
  .wf-skeleton,
  .wf-btn,
  .wf-card--hover {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   2. Keyframes
   ========================================================================== */
@keyframes wf-fade-slide-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes wf-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--wf-accent-rgb), 0.35), 0 8px 24px -8px rgba(var(--wf-accent-rgb), 0.45); }
  50% { box-shadow: 0 0 0 8px rgba(var(--wf-accent-rgb), 0), 0 8px 32px -6px rgba(var(--wf-accent-rgb), 0.6); }
}

@keyframes wf-gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes wf-shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

@keyframes wf-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes wf-spin-slow {
  to { transform: rotate(360deg); }
}

.wf-reveal {
  opacity: 0;
  transform: translateY(18px);
}
.wf-reveal.wf-revealed {
  animation: wf-fade-slide-up 0.7s var(--wf-ease) forwards;
}

.wf-countup {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ==========================================================================
   3. Surfaces: card / glass
   ========================================================================== */
.wf-card {
  background: var(--wf-bg-surface);
  border: 1px solid var(--wf-border-subtle);
  border-radius: var(--wf-radius-md);
  box-shadow: 0 1px 2px hsl(var(--wf-shadow-color) / 0.06), 0 12px 28px -18px hsl(var(--wf-shadow-color) / 0.35);
  transition: box-shadow 0.35s var(--wf-ease), transform 0.35s var(--wf-ease), border-color 0.35s var(--wf-ease);
}

.wf-card--hover:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--wf-accent-rgb), 0.35);
  box-shadow: 0 1px 2px hsl(var(--wf-shadow-color) / 0.08), 0 20px 40px -18px rgba(var(--wf-accent-rgb), 0.35);
}

.wf-glass {
  background: var(--wf-glass-bg);
  border: 1px solid var(--wf-glass-border);
  backdrop-filter: blur(var(--wf-glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--wf-glass-blur)) saturate(140%);
}

.wf-gradient-text {
  background: var(--wf-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.wf-gradient-border {
  position: relative;
  border-radius: var(--wf-radius-md);
}
.wf-gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--wf-gradient-brand);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */
.wf-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.15s var(--wf-ease), box-shadow 0.25s var(--wf-ease), filter 0.25s var(--wf-ease), background-color 0.25s var(--wf-ease);
  user-select: none;
}
.wf-btn:active,
.wf-btn.wf-btn--pressed {
  transform: scale(0.96);
}

.wf-btn:disabled,
.wf-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.2);
  box-shadow: none;
}

.wf-btn--primary {
  background: var(--wf-gradient-brand);
  background-size: 160% 160%;
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(var(--wf-accent-rgb), 0.65);
}
.wf-btn--primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 14px 30px -10px rgba(var(--wf-accent-rgb), 0.75);
}

.wf-btn--secondary {
  background: transparent;
  color: var(--wf-text-primary);
  border: 1px solid var(--wf-border-strong);
}
.wf-btn--secondary:hover {
  border-color: var(--wf-accent);
  color: var(--wf-accent);
  background: rgba(var(--wf-accent-rgb), 0.06);
}

.wf-btn--ghost {
  background: transparent;
  color: var(--wf-text-muted);
}
.wf-btn--ghost:hover {
  background: rgba(var(--wf-accent-rgb), 0.08);
  color: var(--wf-accent);
}

.wf-btn--danger {
  background: var(--wf-danger);
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(239, 68, 68, 0.55);
}
.wf-btn--danger:hover { filter: brightness(1.08); }

.wf-btn--glow {
  animation: wf-glow-pulse 3s ease-in-out infinite;
}

/* ==========================================================================
   5. Badges
   ========================================================================== */
.wf-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.wf-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}
.wf-badge--success { background: rgba(34, 197, 94, 0.12); color: var(--wf-success); }
.wf-badge--warning { background: rgba(245, 158, 11, 0.12); color: var(--wf-warning); }
.wf-badge--danger { background: rgba(239, 68, 68, 0.12); color: var(--wf-danger); }
.wf-badge--info { background: rgba(56, 189, 248, 0.12); color: var(--wf-info); }
.wf-badge--neutral { background: var(--wf-bg-surface-raised); color: var(--wf-text-muted); }
.wf-badge--icon::before { display: none; }
.wf-badge--icon svg { width: 12px; height: 12px; }

/* Hover tooltip, e.g. for the 24h cooldown badge on PTC cards */
.wf-tooltip { position: relative; display: inline-flex; }
.wf-tooltip__bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--wf-text-primary);
  color: var(--wf-bg-surface, #fff);
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 30;
}
.wf-tooltip__bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--wf-text-primary);
}
.wf-tooltip:hover .wf-tooltip__bubble,
.wf-tooltip:focus-within .wf-tooltip__bubble {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
   6. Stat widgets
   ========================================================================== */
.wf-stat {
  position: relative;
  overflow: hidden;
  border-radius: var(--wf-radius-md);
  padding: 1.1rem 1.25rem;
  color: #fff;
  background: var(--wf-gradient-brand);
  background-size: 180% 180%;
  isolation: isolate;
}
.wf-stat::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120px 120px at 100% 0%, rgba(255, 255, 255, 0.25), transparent 70%);
  pointer-events: none;
}
.wf-stat--purple { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.wf-stat--blue { background: linear-gradient(135deg, #2563eb, #38bdf8); }
.wf-stat--success { background: linear-gradient(135deg, #059669, #22c55e); }
.wf-stat--warning { background: linear-gradient(135deg, #d97706, #f59e0b); }

.wf-stat__label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.8);
}
.wf-stat__value {
  margin-top: 0.5rem;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.1;
}
.wf-stat__icon {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  z-index: 1;
}
.wf-stat__link {
  margin-top: 0.4rem;
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  border-bottom: 1px dotted rgba(255, 255, 255, 0.6);
}
.wf-stat__link:hover { color: #fff; }

/* ==========================================================================
   7. Tables
   ========================================================================== */
.wf-table-wrap {
  border-radius: var(--wf-radius-md);
  border: 1px solid var(--wf-border-subtle);
  overflow: hidden;
}
.wf-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.wf-table thead th {
  background: var(--wf-bg-surface-raised);
  color: var(--wf-text-muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  padding: 0.85rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--wf-border-subtle);
}
.wf-table tbody td {
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--wf-border-subtle);
  color: var(--wf-text-primary);
}
.wf-table tbody tr:last-child td { border-bottom: none; }
.wf-table__row,
.wf-table tbody tr {
  transition: background-color 0.2s var(--wf-ease);
}
.wf-table__row:hover,
.wf-table tbody tr:hover {
  background: rgba(var(--wf-accent-rgb), 0.05);
}
.wf-table--zebra tbody tr:nth-child(even) {
  background: var(--wf-bg-surface-raised);
}

/* ==========================================================================
   8. Forms
   ========================================================================== */
.wf-input {
  width: 100%;
  border-radius: var(--wf-radius-sm);
  border: 1px solid var(--wf-border-strong);
  background: var(--wf-bg-surface);
  color: var(--wf-text-primary);
  padding: 0.6rem 0.9rem;
  transition: border-color 0.2s var(--wf-ease), box-shadow 0.2s var(--wf-ease);
}
.wf-input::placeholder { color: var(--wf-text-muted); opacity: 0.8; }
.wf-input:hover { border-color: var(--wf-accent); }
.wf-input:focus {
  outline: none;
  border-color: var(--wf-accent);
  box-shadow: 0 0 0 4px rgba(var(--wf-accent-rgb), 0.16);
}

.wf-input-group {
  position: relative;
}
.wf-input-group .wf-input { padding-left: 2.6rem; }
.wf-input-group__icon {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--wf-text-muted);
  pointer-events: none;
}

/* ==========================================================================
   9. Alerts
   ========================================================================== */
.wf-alert {
  position: relative;
  border-radius: var(--wf-radius-sm);
  padding: 0.9rem 1.1rem 0.9rem 1.4rem;
  background: var(--wf-bg-surface-raised);
  color: var(--wf-text-primary);
}
.wf-alert::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 3px;
  border-radius: 999px;
  background: var(--wf-info);
}
.wf-alert--success::before { background: var(--wf-success); }
.wf-alert--warning::before { background: var(--wf-warning); }
.wf-alert--danger::before { background: var(--wf-danger); }
.wf-alert--info::before { background: var(--wf-info); }

/* ==========================================================================
   10. Tabs
   ========================================================================== */
.wf-tabs__list {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: var(--wf-bg-surface-raised);
  border: 1px solid var(--wf-border-subtle);
}
.wf-tabs__tab {
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--wf-text-muted);
  transition: all 0.25s var(--wf-ease);
  cursor: pointer;
}
.wf-tabs__tab:hover { color: var(--wf-text-primary); }
.wf-tabs__tab[data-active="true"] {
  background: var(--wf-gradient-brand);
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(var(--wf-accent-rgb), 0.6);
}

/* ==========================================================================
   11. Pagination
   ========================================================================== */
.wf-pagination {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.wf-pagination__btn {
  min-width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--wf-text-muted);
  border: 1px solid var(--wf-border-subtle);
  background: var(--wf-bg-surface);
  transition: all 0.2s var(--wf-ease);
}
.wf-pagination__btn:hover {
  border-color: var(--wf-accent);
  color: var(--wf-accent);
}
.wf-pagination__btn[data-active="true"] {
  background: var(--wf-gradient-brand);
  border-color: transparent;
  color: #fff;
}
.wf-pagination__btn[disabled] {
  opacity: 0.4;
  pointer-events: none;
}

/* ==========================================================================
   12. Skeleton
   ========================================================================== */
.wf-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--wf-bg-surface-raised);
}
.wf-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(var(--wf-accent-rgb), 0.15), transparent);
  animation: wf-shimmer 1.6s infinite;
}

/* ==========================================================================
   13. Sections / hero (landing)
   ========================================================================== */
.wf-section {
  position: relative;
  padding: clamp(3rem, 6vw, 6rem) 0;
}

.wf-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.wf-hero::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  z-index: -1;
  background:
    radial-gradient(45% 55% at 15% 20%, rgba(124, 58, 237, 0.28), transparent 65%),
    radial-gradient(40% 50% at 85% 15%, rgba(56, 189, 248, 0.24), transparent 65%),
    radial-gradient(60% 60% at 50% 100%, rgba(99, 102, 241, 0.18), transparent 70%);
  background-size: 200% 200%;
  animation: wf-gradient-shift 18s ease-in-out infinite;
}
html.dark .wf-hero::before { opacity: 0.9; }

.wf-hero-float {
  animation: wf-float 6s ease-in-out infinite;
}

/* ==========================================================================
   14. Sidebar / topbar chrome
   ========================================================================== */
.wf-sidebar-rail {
  background: var(--wf-bg-surface);
}
.wf-sidebar-panel {
  background: var(--wf-bg-surface);
  border-right: 1px solid var(--wf-border-subtle);
}

.wf-nav-item {
  position: relative;
  border-radius: var(--wf-radius-sm);
  transition: color 0.2s var(--wf-ease), background-color 0.2s var(--wf-ease), padding-left 0.2s var(--wf-ease);
}
.wf-nav-item:hover {
  background: rgba(var(--wf-accent-rgb), 0.06);
}
.wf-nav-item[data-active="true"] {
  color: var(--wf-accent) !important;
  background: rgba(var(--wf-accent-rgb), 0.1);
  font-weight: 600;
}
.wf-nav-item[data-active="true"]::before {
  content: "";
  position: absolute;
  left: -0.9rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: 999px;
  background: var(--wf-gradient-brand);
}

.wf-rail-icon {
  border-radius: var(--wf-radius-sm);
  transition: all 0.25s var(--wf-ease);
}
.wf-rail-icon:hover {
  background: rgba(var(--wf-accent-rgb), 0.12);
  color: var(--wf-accent);
  transform: translateY(-1px);
}
.wf-rail-icon[data-active="true"] {
  background: var(--wf-gradient-brand);
  color: #fff !important;
  box-shadow: 0 8px 18px -8px rgba(var(--wf-accent-rgb), 0.6);
}

.wf-topbar {
  background: var(--wf-glass-bg);
  backdrop-filter: blur(var(--wf-glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--wf-glass-blur)) saturate(140%);
  border-bottom: 1px solid var(--wf-border-subtle);
  transition: box-shadow 0.3s var(--wf-ease), background-color 0.3s var(--wf-ease);
}
.wf-topbar--scrolled,
.wf-header--scrolled {
  box-shadow: 0 8px 24px -16px hsl(var(--wf-shadow-color) / 0.5);
}

/* ==========================================================================
   15. Toast
   ========================================================================== */
#wf-toast-region {
  position: fixed;
  z-index: 9999;
  bottom: 1.25rem;
  right: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}
.wf-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  border-radius: var(--wf-radius-sm);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  background: var(--wf-navy-800);
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.45);
  transform: translateY(8px);
  opacity: 0;
  transition: all 0.3s var(--wf-ease);
}
.wf-toast--visible { transform: translateY(0); opacity: 1; }
.wf-toast--success { background: linear-gradient(135deg, #059669, #22c55e); }
.wf-toast--error { background: linear-gradient(135deg, #b91c1c, #ef4444); }
.wf-toast--info { background: var(--wf-gradient-brand); }

/* ==========================================================================
   16. Task cards (PTC / shortlink / offerwall earn tiles)
   ========================================================================== */
.wf-task-card {
  position: relative;
  overflow: hidden;
  padding: 1.1rem 1.25rem;
}
.wf-task-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--wf-gradient-brand);
}
.wf-task-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: var(--wf-radius-sm);
  background: var(--wf-gradient-brand-soft);
  color: var(--wf-accent);
}
.wf-task-title { color: var(--wf-text-primary); }
.wf-task-meta { color: var(--wf-text-muted); }

/* ==========================================================================
   17. Daily check-in streak grid
   ========================================================================== */
.wf-streak-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 640px) {
  .wf-streak-grid { grid-template-columns: repeat(4, 1fr); }
}

.wf-streak-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem 0.75rem 1.1rem;
  border-radius: var(--wf-radius-md);
  border: 1px solid var(--wf-border-subtle);
  background: var(--wf-bg-surface);
  transition: transform 0.25s var(--wf-ease), border-color 0.25s var(--wf-ease);
}

.wf-streak-day--today {
  border-color: var(--wf-accent);
  box-shadow: 0 0 0 2px rgba(var(--wf-accent-rgb), 0.35);
}

.wf-streak-day--locked {
  opacity: 0.55;
}

.wf-streak-day__ribbon {
  position: absolute;
  top: -0.65rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--wf-gradient-brand);
  color: #fff;
  white-space: nowrap;
}

.wf-streak-day__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  margin-bottom: 0.65rem;
  background: var(--wf-gradient-brand-soft);
  color: var(--wf-accent);
}
.wf-streak-day--locked .wf-streak-day__icon {
  background: var(--wf-bg-surface-raised);
  color: var(--wf-text-muted);
}
.wf-streak-day--completed .wf-streak-day__icon {
  background: rgba(34, 197, 94, 0.14);
  color: var(--wf-success);
}

.wf-streak-day__label {
  font-weight: 600;
  color: var(--wf-text-primary);
}

.wf-streak-day__reward {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--wf-success);
}
.wf-streak-day--locked .wf-streak-day__reward {
  color: var(--wf-text-muted);
}

.wf-streak-big {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--wf-radius-md);
  border: 1px solid var(--wf-border-subtle);
  background: var(--wf-gradient-brand-soft);
}
.wf-streak-big--today {
  border-color: var(--wf-accent);
  box-shadow: 0 0 0 2px rgba(var(--wf-accent-rgb), 0.35);
}
.wf-streak-big--locked {
  opacity: 0.55;
}

/* ==========================================================================
   18. Misc utilities
   ========================================================================== */
.wf-divider {
  height: 1px;
  background: var(--wf-border-subtle);
}
.wf-avatar-ring {
  box-shadow: 0 0 0 2px var(--wf-bg-surface), 0 0 0 4px rgba(var(--wf-accent-rgb), 0.5);
}
::selection {
  background: rgba(var(--wf-accent-rgb), 0.3);
}
body.wf-scroll-lock {
  overflow: hidden;
}

/* ==========================================================================
   19. Level / EXP progress widget
   ========================================================================== */
.wf-level-ring {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: conic-gradient(var(--wf-warning) calc(var(--wf-level-percent, 0) * 1%), var(--wf-border-subtle) 0);
}
.wf-level-ring::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 999px;
  background: var(--wf-bg-surface);
}
.wf-level-ring span {
  position: relative;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--wf-warning);
}

.wf-progress-track {
  height: 8px;
  border-radius: 999px;
  background: var(--wf-bg-surface-raised);
  overflow: hidden;
}
.wf-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(135deg, #d97706, #f59e0b);
  transition: width 0.4s var(--wf-ease);
}
.wf-level-percent {
  color: var(--wf-warning);
}

.wf-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 17, 26, 0.6);
}
.wf-modal {
  width: 100%;
  max-width: 30rem;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: var(--wf-radius-md);
  border: 1px solid var(--wf-border-subtle);
  background: var(--wf-bg-surface);
  color: var(--wf-text-primary);
}
.wf-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--wf-border-subtle);
}
.wf-exp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--wf-radius-sm);
  border: 1px solid var(--wf-border-subtle);
}
.wf-perk-card {
  padding: 0.9rem 1rem;
  border-radius: var(--wf-radius-sm);
  border: 1px solid var(--wf-border-subtle);
  background: var(--wf-bg-surface-raised);
}