@ansiversa/components 0.0.21 → 0.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ansiversa/components",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "description": "Shared UI components and layouts for the Ansiversa ecosystem",
   "type": "module",
   "exports": {

package/src/AvPageHeader.astro

@@ -2,10 +2,12 @@
 import AvButton from "./AvButton.astro";
 import AvContainer from "./AvContainer.astro";
 
+type ButtonVariant = "primary" | "ghost" | "outline";
+
 interface Action {
   label: string;
   href: string;
-  variant?: string;
+  variant?: ButtonVariant;
 }
 
 interface Props {
@@ -21,22 +23,26 @@ const { title, description, primaryAction, secondaryAction } = Astro.props as Pr
 <section class="av-page-header">
   <AvContainer className="av-page-header__container">
     <div class="av-page-header__body">
-      <h1 class="av-page-header__title">{title}</h1>
+      <div class="av-page-header__top">
+        <h1 class="av-page-header__title">{title}</h1>
+
+        {(primaryAction || secondaryAction) && (
+          <div class="av-page-header__actions">
+            {primaryAction && (
+              <AvButton href={primaryAction.href} variant={primaryAction.variant ?? "primary"}>
+                {primaryAction.label}
+              </AvButton>
+            )}
+            {secondaryAction && (
+              <AvButton href={secondaryAction.href} variant={secondaryAction.variant ?? "ghost"}>
+                {secondaryAction.label}
+              </AvButton>
+            )}
+          </div>
+        )}
+      </div>
+
       {description && <p class="av-page-header__description">{description}</p>}
-      {(primaryAction || secondaryAction) && (
-        <div class="av-page-header__actions">
-          {primaryAction && (
-            <AvButton href={primaryAction.href} variant={primaryAction.variant ?? "primary"}>
-              {primaryAction.label}
-            </AvButton>
-          )}
-          {secondaryAction && (
-            <AvButton href={secondaryAction.href} variant={secondaryAction.variant ?? "ghost"}>
-              {secondaryAction.label}
-            </AvButton>
-          )}
-        </div>
-      )}
     </div>
   </AvContainer>
 </section>

package/src/styles/global.css

@@ -30,10 +30,9 @@
   --av-text-soft: #6b7280;
   --av-text-strong: #f9fafb;
 
-  --ans-primary: hsl(260, 100%, 70%); /* example */
-
---ans-primary-rgb: 140, 100, 255; /* MUST match your primary color */
-
+  /* Ansiversa highlight (used by a few legacy utilities) */
+  --ans-primary: hsl(260, 100%, 70%);
+  --ans-primary-rgb: 140, 100, 255; /* MUST match --ans-primary */
 
   /* Layout & Radius */
   --av-radius-xs: 0.375rem;
@@ -195,7 +194,7 @@
    ========================================= */
 
 @layer components {
-  /* Layout / Grid  ---------------------------------- */
+  /* Layout ------------------------------------------------ */
 
   .av-page {
     @apply min-h-screen flex flex-col;
@@ -221,7 +220,7 @@
     @apply flex-1;
   }
 
-  /* Brand / Logo ------------------------------------ */
+  /* Brand / Logo ----------------------------------------- */
 
   .av-navbar-brand {
     @apply flex items-center gap-3 text-slate-100 no-underline;
@@ -267,7 +266,7 @@
     @apply hidden md:inline;
   }
 
-  /* Hero / Sections / Grid -------------------------- */
+  /* Hero / Sections -------------------------------------- */
 
   .av-hero {
     @apply py-16 md:py-24;
@@ -317,27 +316,7 @@
     @apply grid gap-5 md:gap-6 md:grid-cols-3;
   }
 
-  .av-row {
-    @apply flex flex-wrap -mx-3;
-  }
-
-  .av-col {
-    @apply px-3;
-  }
-
-  .av-col-6 {
-    @apply px-3 w-full md:w-1/2;
-  }
-
-  .av-col-4 {
-    @apply px-3 w-full md:w-1/3;
-  }
-
-  .av-col-3 {
-    @apply px-3 w-full md:w-1/4;
-  }
-
-  /* Steps / Timeline-ish ---------------------------- */
+  /* Steps / Timeline-ish --------------------------------- */
 
   .av-card-heading {
     @apply text-sm font-semibold text-slate-100 mb-2;
@@ -359,111 +338,14 @@
     @apply text-sm text-slate-400;
   }
 
-  /* Pricing Grid ------------------------------------ */
-
-  .av-pricing-grid {
-    @apply grid gap-7 md:grid-cols-3;
-  }
-
-  .av-pricing-section {
-    @apply py-16 border-t border-slate-800/80;
-  }
-
-  .av-pricing-table-wrapper {
-    @apply overflow-x-auto mt-10;
-  }
-
-  .av-pricing-table {
-    width: 100%;
-    border-collapse: collapse;
-    min-width: 720px;
-    font-size: 0.9rem;
-  }
-
-  .av-pricing-table th,
-  .av-pricing-table td {
-    @apply border border-slate-800/80 p-3 text-left align-top;
-  }
-
-  .av-pricing-table th {
-    @apply bg-slate-900/80 text-slate-200;
-  }
-
-  .av-pricing-table tbody tr:nth-child(even) {
-    @apply bg-slate-900/40;
-  }
-
-  .av-pricing-chip {
-    @apply inline-flex items-center rounded-full bg-slate-900/80 px-3 py-1 text-[0.7rem] uppercase tracking-[0.18em] text-slate-400;
-  }
-
-  /* Founder / About Layout -------------------------- */
-
-  .av-founder-layout {
-    @apply flex flex-col gap-6 md:flex-row md:items-start;
-  }
-
-  .av-founder-photo-wrap {
-    @apply w-full md:w-1/3;
-  }
-
-  .av-founder-photo {
-    @apply w-full rounded-2xl object-cover;
-    box-shadow: var(--av-shadow-soft);
-  }
-
-  .av-founder-copy {
-    @apply w-full md:w-2/3 space-y-4;
-  }
-
-  .av-quote {
-    @apply border-l-4 pl-4 pr-4 py-3 rounded-xl text-base leading-relaxed;
-
-    /* Background + border */
-    background-color: rgba(255, 255, 255, 0.08);
-    border-color: var(--av-primary);
-
-    /* Contrast-safe text */
-    color: var(--av-text);
-  }
-
-  /* Typography helpers ------------------------------ */
-
-  .av-gradient-text {
-    /* Fallback */
-    color: var(--av-text-strong);
-
-    /* Gradient text for modern browsers */
-    background-image: linear-gradient(to right, #22d3ee, #a855f7);
-    background-clip: text;
-    -webkit-background-clip: text;
-    color: transparent;
-    -webkit-text-fill-color: transparent;
-  }
-
-  .av-caption {
-    @apply text-[0.78rem] text-slate-500;
-  }
-
-  .av-kicker {
-    @apply inline-flex items-center gap-2 rounded-full border border-slate-700/80
-      bg-slate-900/80 px-3 py-1 text-[0.7rem] uppercase tracking-[0.18em] text-slate-400;
-  }
-
-  .av-mono {
-    font-family: var(--av-font-mono);
-  }
-
-  /* Card (like Bootstrap .card) --------------------- */
+  /* Card -------------------------------------------------- */
 
   .av-card {
-    @apply relative rounded-2xl border border-slate-800/70
-      bg-slate-950/80 p-6 md:p-7 shadow-xl backdrop-blur-xl;
+    @apply relative rounded-2xl border border-slate-800/70 bg-slate-950/80 p-6 md:p-7 shadow-xl backdrop-blur-xl;
   }
 
   .av-card-soft {
-    @apply rounded-xl border border-slate-800/60
-      bg-slate-950/60 p-4 md:p-5;
+    @apply rounded-xl border border-slate-800/60 bg-slate-950/60 p-4 md:p-5;
   }
 
   .av-card-header {
@@ -482,20 +364,14 @@
     @apply text-sm text-slate-300;
   }
 
-  /* Buttons (Bootstrap-ish) ------------------------- */
+  /* Buttons ---------------------------------------------- */
 
   .av-btn {
-    @apply inline-flex items-center justify-center gap-2 rounded-full px-4 py-2
-      text-xs md:text-sm font-medium transition-all duration-150 ease-out;
+    @apply inline-flex items-center justify-center gap-2 rounded-full px-4 py-2 text-xs md:text-sm font-medium transition-all duration-150 ease-out;
   }
 
   .av-btn-primary {
-    @apply inline-flex items-center justify-center gap-2 rounded-full px-4 py-2
-      text-xs md:text-sm font-medium transition-all duration-150 ease-out
-      border border-cyan-400/80
-      bg-cyan-500/20
-      text-slate-50
-      shadow-[0_0_30px_rgba(34,211,238,0.35)];
+    @apply inline-flex items-center justify-center gap-2 rounded-full px-4 py-2 text-xs md:text-sm font-medium transition-all duration-150 ease-out border border-cyan-400/80 bg-cyan-500/20 text-slate-50 shadow-[0_0_30px_rgba(34,211,238,0.35)];
   }
 
   .av-btn-primary:hover {
@@ -504,11 +380,7 @@
   }
 
   .av-btn-ghost {
-    @apply inline-flex items-center justify-center gap-2 rounded-full px-4 py-2
-      text-xs md:text-sm font-medium transition-all duration-150 ease-out
-      border border-slate-700/70
-      bg-slate-900/70
-      text-slate-300;
+    @apply inline-flex items-center justify-center gap-2 rounded-full px-4 py-2 text-xs md:text-sm font-medium transition-all duration-150 ease-out border border-slate-700/70 bg-slate-900/70 text-slate-300;
   }
 
   .av-btn-ghost:hover {
@@ -516,11 +388,7 @@
   }
 
   .av-btn-outline {
-    @apply inline-flex items-center justify-center gap-2 rounded-full px-4 py-2
-      text-xs md:text-sm font-medium transition-all duration-150 ease-out
-      border border-cyan-400/70
-      bg-transparent
-      text-cyan-300;
+    @apply inline-flex items-center justify-center gap-2 rounded-full px-4 py-2 text-xs md:text-sm font-medium transition-all duration-150 ease-out border border-cyan-400/70 bg-transparent text-cyan-300;
   }
 
   .av-btn-outline:hover {
@@ -539,7 +407,7 @@
     @apply w-full justify-center;
   }
 
-  /* Forms ------------------------------------------- */
+  /* Forms ------------------------------------------------- */
 
   .av-form-group {
     @apply space-y-1.5;
@@ -556,11 +424,7 @@
   .av-input,
   .av-select,
   .av-textarea {
-    @apply w-full rounded-lg border border-slate-700
-      bg-slate-950/60 px-3 py-2.5 text-sm text-slate-100
-      placeholder:text-slate-500
-      focus-visible:outline-none
-      focus-visible:ring-2 focus-visible:ring-cyan-400/80;
+    @apply w-full rounded-lg border border-slate-700 bg-slate-950/60 px-3 py-2.5 text-sm text-slate-100 placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400/80;
   }
 
   .av-input-sm {
@@ -573,9 +437,7 @@
 
   .av-checkbox,
   .av-radio {
-    @apply h-3.5 w-3.5 rounded border border-slate-600 bg-slate-950/60
-      text-cyan-400
-      focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/70;
+    @apply h-3.5 w-3.5 rounded border border-slate-600 bg-slate-950/60 text-cyan-400 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/70;
   }
 
   .av-inline-check {
@@ -590,7 +452,7 @@
     @apply text-xs text-slate-400;
   }
 
-  /* Navbar / Nav ------------------------------------ */
+  /* Navbar / Nav ----------------------------------------- */
 
   .av-navbar {
     @apply border-b border-slate-800/60 bg-slate-950/60 backdrop-blur-xl;
@@ -612,55 +474,47 @@
     @apply text-slate-50;
   }
 
-  /* Badges / Pills ---------------------------------- */
+  /* Badges / Pills --------------------------------------- */
 
   .av-badge {
-    @apply inline-flex items-center rounded-full border border-slate-700/70
-      bg-slate-900/80 px-2.5 py-0.5 text-[0.7rem] text-slate-300;
+    @apply inline-flex items-center rounded-full border border-slate-700/70 bg-slate-900/80 px-2.5 py-0.5 text-[0.7rem] text-slate-300;
   }
 
   .av-badge-primary {
-    @apply inline-flex items-center rounded-full border border-cyan-400/80
-      bg-cyan-500/15 px-2.5 py-0.5 text-[0.7rem] text-cyan-100;
+    @apply inline-flex items-center rounded-full border border-cyan-400/80 bg-cyan-500/15 px-2.5 py-0.5 text-[0.7rem] text-cyan-100;
   }
 
   .av-badge-secondary {
-    @apply inline-flex items-center rounded-full border border-purple-500/80
-      bg-purple-500/15 px-2.5 py-0.5 text-[0.7rem] text-purple-100;
+    @apply inline-flex items-center rounded-full border border-purple-500/80 bg-purple-500/15 px-2.5 py-0.5 text-[0.7rem] text-purple-100;
   }
 
   .av-badge-soft {
-    @apply inline-flex items-center rounded-full border border-slate-700/50
-      bg-slate-900/70 px-2.5 py-0.5 text-[0.7rem] text-slate-300;
+    @apply inline-flex items-center rounded-full border border-slate-700/50 bg-slate-900/70 px-2.5 py-0.5 text-[0.7rem] text-slate-300;
   }
 
-  /* Alerts ------------------------------------------ */
+  /* Alerts ----------------------------------------------- */
 
   .av-alert {
     @apply rounded-lg border px-3.5 py-2.5 text-xs md:text-sm flex items-start gap-3;
   }
 
   .av-alert-info {
-    @apply rounded-lg border px-3.5 py-2.5 text-xs md:text-sm flex items-start gap-3
-      border-cyan-400/40 bg-cyan-500/10 text-cyan-50;
+    @apply rounded-lg border px-3.5 py-2.5 text-xs md:text-sm flex items-start gap-3 border-cyan-400/40 bg-cyan-500/10 text-cyan-50;
   }
 
   .av-alert-success {
-    @apply rounded-lg border px-3.5 py-2.5 text-xs md:text-sm flex items-start gap-3
-      border-emerald-400/40 bg-emerald-500/10 text-emerald-50;
+    @apply rounded-lg border px-3.5 py-2.5 text-xs md:text-sm flex items-start gap-3 border-emerald-400/40 bg-emerald-500/10 text-emerald-50;
   }
 
   .av-alert-warning {
-    @apply rounded-lg border px-3.5 py-2.5 text-xs md:text-sm flex items-start gap-3
-      border-amber-400/50 bg-amber-500/10 text-amber-50;
+    @apply rounded-lg border px-3.5 py-2.5 text-xs md:text-sm flex items-start gap-3 border-amber-400/50 bg-amber-500/10 text-amber-50;
   }
 
   .av-alert-danger {
-    @apply rounded-lg border px-3.5 py-2.5 text-xs md:text-sm flex items-start gap-3
-      border-rose-500/60 bg-rose-500/10 text-rose-50;
+    @apply rounded-lg border px-3.5 py-2.5 text-xs md:text-sm flex items-start gap-3 border-rose-500/60 bg-rose-500/10 text-rose-50;
   }
 
-  /* Tables ------------------------------------------ */
+  /* Tables ----------------------------------------------- */
 
   .av-table {
     @apply w-full border-collapse text-sm text-left text-slate-300;
@@ -687,20 +541,13 @@
     @apply bg-slate-900/60;
   }
 
-  /* Divider / Lines --------------------------------- */
+  /* Divider ---------------------------------------------- */
 
   .av-divider {
     @apply w-full h-px bg-gradient-to-r from-transparent via-slate-700 to-transparent my-7;
   }
 
-  /* Hero overlay card option ------------------------ */
-
-  .av-hero-card {
-    @apply relative rounded-2xl border border-slate-800/70
-      bg-slate-950/80 p-6 md:p-7 shadow-xl backdrop-blur-xl max-w-2xl;
-  }
-
-  /* Auth layouts ------------------------------------ */
+  /* Auth layouts ----------------------------------------- */
 
   .av-card-auth {
     @apply max-w-md w-full mx-auto;
@@ -714,25 +561,11 @@
     @apply text-sm;
   }
 
-  .av-auth-stack-xs {
-    @apply space-y-1;
-  }
-
-  .av-auth-stack-sm {
-    @apply space-y-2;
-  }
-
-  .av-auth-stack-md {
-    @apply space-y-3;
-  }
-
-  .av-auth-stack-lg {
-    @apply space-y-4;
-  }
-
-  .av-auth-stack-xl {
-    @apply space-y-6;
-  }
+  .av-auth-stack-xs { @apply space-y-1; }
+  .av-auth-stack-sm { @apply space-y-2; }
+  .av-auth-stack-md { @apply space-y-3; }
+  .av-auth-stack-lg { @apply space-y-4; }
+  .av-auth-stack-xl { @apply space-y-6; }
 
   .av-auth-title {
     @apply text-xl font-semibold tracking-tight text-slate-100;
@@ -746,128 +579,92 @@
     @apply grid gap-3 sm:grid-cols-2;
   }
 
-  .av-feature-list {
-    @apply grid gap-3 text-sm text-slate-400;
-  }
-
-  .av-feature-item {
-    @apply flex items-center gap-2;
-  }
-
-  .av-feature-dot {
-    @apply h-1 w-1 rounded-full;
-  }
-
-  .av-feature-dot--primary {
-    @apply bg-cyan-400/80;
-  }
-
-  .av-feature-dot--secondary {
-    @apply bg-purple-500/80;
-  }
-
-  .av-muted-link {
-    @apply text-cyan-300 hover:text-cyan-100;
-  }
-
-  /* Signout specifics ------------------------------- */
-
-  .av-auth-signout {
-    @apply flex justify-center;
-  }
-
-  .av-auth-signout__card {
-    @apply w-full max-w-2xl space-y-6;
-  }
-
-  .av-auth-signout__header {
-    @apply flex items-center gap-3;
-  }
-
-  .av-auth-signout__logo {
-    @apply h-12 w-12 rounded-xl bg-white/10 p-2 flex items-center justify-center shadow-lg;
-  }
+  /* Footer ----------------------------------------------- */
 
-  .av-auth-signout__brand {
-    @apply flex flex-col;
-  }
-
-  .av-auth-signout__brand-title {
-    @apply uppercase tracking-[0.18em] text-sm font-semibold text-slate-100;
-  }
-
-  .av-auth-signout__brand-subtitle {
-    @apply text-xs text-slate-400;
-  }
-
-  .av-auth-signout__status {
-    @apply ml-auto inline-flex items-center gap-2 text-xs text-slate-400;
-  }
-
-  .av-auth-signout__status-dot {
-    @apply h-2 w-2 rounded-full bg-green-400 animate-pulse;
-  }
-
-  .av-auth-signout__badge {
-    @apply inline-flex items-center gap-2 px-4 py-2 rounded-full border border-white/10 bg-white/5 text-sm;
-  }
-
-  .av-auth-signout__heading {
-    @apply text-3xl font-semibold text-slate-100;
-  }
-
-  .av-auth-signout__copy {
-    @apply text-slate-400 leading-relaxed;
+  .av-footer {
+    @apply mt-10 border-t border-slate-800/70;
   }
 
-  .av-auth-signout__actions {
-    @apply flex flex-wrap gap-3 pt-2;
+  .av-footer-inner {
+    @apply w-full max-w-5xl mx-auto px-5 py-6 flex flex-col sm:flex-row items-center justify-between gap-3;
   }
 
-  .av-auth-signout__primary-action {
-    @apply text-black;
+  .av-footer-meta {
+    @apply flex items-center gap-4 text-[0.78rem] text-slate-500;
   }
 
-  .av-auth-signout__status-grid {
-    @apply grid grid-cols-1 sm:grid-cols-2 gap-3 pt-4;
+  .av-footer-separator {
+    @apply text-slate-600 hidden sm:inline;
   }
 
-  .av-auth-signout__status-card {
-    @apply flex items-start gap-3 p-3 rounded-xl border border-white/5 bg-white/5;
+  .av-footer-quote {
+    @apply text-[0.78rem] text-slate-500 hidden sm:inline;
   }
 
-  .av-auth-signout__status-indicator {
-    @apply h-2.5 w-2.5 rounded-full bg-[var(--ans-primary)] shadow;
-  }
+  /* User menu / avatar ----------------------------------- */
 
-  .av-auth-signout__status-title {
-    @apply block text-sm text-white;
+  .av-user-menu-wrapper {
+    @apply relative;
   }
 
-  .av-auth-signout__status-description {
-    @apply block text-xs text-slate-400;
+  .av-user-avatar-button {
+    @apply inline-flex h-9 w-9 items-center justify-center rounded-full border border-slate-700 bg-slate-900 text-slate-100 shadow-sm hover:border-slate-500 transition;
+    position: relative;
+    cursor: pointer;
+    background: transparent;
+    border: none;
   }
 
-  .av-auth-signout__footer {
-    @apply pt-2 text-xs text-slate-400 flex justify-between;
+  .av-user-avatar-circle {
+    @apply text-sm font-medium;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.12);
+    backdrop-filter: blur(8px);
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-size: 0.9rem;
+    transition: all 0.3s ease;
+    position: relative;
+  }
+
+  .av-user-avatar-button::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    background: radial-gradient(
+      circle at center,
+      rgba(var(--ans-primary-rgb), 0.6),
+      rgba(var(--ans-primary-rgb), 0.15) 40%,
+      transparent 70%
+    );
+    opacity: 0;
+    transform: scale(0.7);
+    transition: all 0.35s ease;
+    pointer-events: none;
   }
 
-  .av-auth-signout__footer-links {
-    @apply space-x-3;
+  .av-user-avatar-button:hover::before {
+    opacity: 1;
+    transform: scale(1);
   }
 
-  /* User menu / avatar ------------------------------ */
-
-  .av-user-menu-wrapper {
-    @apply relative;
+  .av-user-avatar-button:hover .av-user-avatar-circle {
+    background: rgba(255, 255, 255, 0.18);
+    border-color: rgba(255, 255, 255, 0.35);
   }
 
-  .av-user-avatar-button {
-    @apply inline-flex h-9 w-9 items-center justify-center rounded-full border border-slate-700 bg-slate-900 text-slate-100 shadow-sm hover:border-slate-500 transition;
+  .av-user-avatar-button:active::before {
+    transform: scale(0.9);
   }
 
-  .av-user-avatar-circle {
-    @apply text-sm font-medium;
+  .av-user-avatar-button:active .av-user-avatar-circle {
+    transform: scale(0.96);
   }
 
   .av-user-menu {
@@ -912,237 +709,157 @@
     @apply text-red-400 hover:bg-red-950/40;
   }
 
-  /* Auth brand tweaks ------------------------------- */
+  /* Password input helper (used in auth) ----------------- */
 
-  .av-auth-brand--center {
-    justify-content: center;
-    text-align: center;
-  }
+  .av-input-wrapper { position: relative; }
+  .av-input-password-container { position: relative; }
 
-  .av-auth-brand img {
-    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.25))
-      drop-shadow(0 0 24px rgba(255, 255, 255, 0.15));
-    transition: transform 0.25s ease, filter 0.25s ease;
+  .av-password-toggle {
+    position: absolute;
+    right: 0.75rem;
+    top: 50%;
+    transform: translateY(-50%);
+    background: transparent;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    color: var(--av-text-soft);
   }
 
-  .av-auth-brand:hover img {
-    transform: scale(1.05);
-    filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.35))
-      drop-shadow(0 0 28px rgba(255, 255, 255, 0.25));
+  .av-password-toggle:hover {
+    color: var(--av-text);
   }
 
-  /* Footer ------------------------------------------ */
-
-  .av-footer {
-    @apply mt-10 border-t border-slate-800/70;
+  .av-password-icon {
+    width: 20px;
+    height: 20px;
+    stroke-width: 1.75;
   }
 
-  .av-footer-inner {
-    @apply w-full max-w-5xl mx-auto px-5 py-6 flex flex-col sm:flex-row items-center justify-between gap-3;
-  }
+  /* AvPageHeader (NEW) ----------------------------------- */
 
-  .av-footer-meta {
-    @apply flex items-center gap-4 text-[0.78rem] text-slate-500;
+  .av-page-header {
+    @apply border-b border-slate-800/60;
   }
 
-  .av-footer-separator {
-    @apply text-slate-600 hidden sm:inline;
+  .av-page-header__container {
+    @apply py-6 md:py-8;
   }
 
-  .av-footer-quote {
-    @apply text-[0.78rem] text-slate-500 hidden sm:inline;
-  }
-}
-
-/* =========================================
-   Utilities Layer
-   ========================================= */
-
-@layer utilities {
-  .av-shadow-soft {
-    box-shadow: var(--av-shadow-soft);
-  }
-
-  .av-shadow-glow {
-    box-shadow: var(--av-shadow-glow);
+  .av-page-header__body {
+    @apply space-y-3;
   }
 
-  .av-text-soft {
-    color: var(--av-text-soft);
+  .av-page-header__title {
+    @apply text-2xl md:text-3xl font-semibold text-slate-100;
   }
 
-  .av-text-muted {
-    color: var(--av-text-muted);
+  .av-page-header__description {
+    @apply text-sm md:text-base text-slate-400 max-w-3xl;
   }
 
-  .av-text-strong {
-    color: var(--av-text-strong);
+  /* Mobile-first: stacked */
+  .av-page-header__top {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
   }
 
-  .av-bg-surface {
-    background-color: var(--av-surface);
+  .av-page-header__actions {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    width: 100%;
   }
 
-  .av-bg-surface-soft {
-    background-color: var(--av-surface-soft);
+  .av-page-header__actions .av-btn {
+    width: 100%;
   }
 
-  .av-border-subtle {
-    border-color: var(--av-border-subtle);
-  }
+  /* Desktop: title left, actions right */
+  @media (min-width: 640px) {
+    .av-page-header__top {
+      flex-direction: row;
+      align-items: flex-start;
+      justify-content: space-between;
+    }
 
-  .av-border-strong {
-    border-color: var(--av-border-strong);
-  }
+    .av-page-header__actions {
+      flex-direction: row;
+      width: auto;
+      justify-content: flex-end;
+      flex-wrap: wrap;
+    }
 
-  .av-text-center {
-    @apply text-center;
+    .av-page-header__actions .av-btn {
+      width: auto;
+    }
   }
-
-  .av-nowrap {
-    @apply whitespace-nowrap;
-  }
-
-  /* --- USER AVATAR BUTTON --- */
-.av-user-avatar-button {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 38px;
-  height: 38px;
-  border-radius: 50%;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  transition: all 0.25s ease;
-}
-
-/* Avatar circle */
-.av-user-avatar-circle {
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.12);
-  backdrop-filter: blur(8px);
-  border: 1px solid rgba(255,255,255,0.25);
-  
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-  color: #fff;
-  font-size: 0.9rem;
-
-  transition: all 0.3s ease;
-  position: relative;
 }
 
-/* Glow ring */
-.av-user-avatar-button::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: 50%;
-  background: radial-gradient(
-    circle at center,
-    rgba(var(--ans-primary-rgb), 0.6),
-    rgba(var(--ans-primary-rgb), 0.15) 40%,
-    transparent 70%
-  );
-  opacity: 0;
-  transform: scale(0.7);
-  transition: all 0.35s ease;
-  pointer-events: none;
-}
-
-/* Hover state */
-.av-user-avatar-button:hover::before {
-  opacity: 1;
-  transform: scale(1);
-}
-
-.av-user-avatar-button:hover .av-user-avatar-circle {
-  background: rgba(255, 255, 255, 0.18);
-  border-color: rgba(255,255,255,0.35);
-}
-
-/* Active (click) */
-.av-user-avatar-button:active::before {
-  transform: scale(0.9);
-}
-
-.av-user-avatar-button:active .av-user-avatar-circle {
-  transform: scale(0.96);
-}
+/* =========================================
+   Utilities Layer
+   ========================================= */
 
+@layer utilities {
+  .av-shadow-soft { box-shadow: var(--av-shadow-soft); }
+  .av-shadow-glow { box-shadow: var(--av-shadow-glow); }
 
-.av-input-wrapper {
-  position: relative;
-}
+  .av-text-soft { color: var(--av-text-soft); }
+  .av-text-muted { color: var(--av-text-muted); }
+  .av-text-strong { color: var(--av-text-strong); }
 
-.av-input-password-container {
-  position: relative;
-}
+  .av-bg-surface { background-color: var(--av-surface); }
+  .av-bg-surface-soft { background-color: var(--av-surface-soft); }
 
-.av-password-toggle {
-  position: absolute;
-  right: 0.75rem;
-  top: 50%;
-  transform: translateY(-50%);
-  background: transparent;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  color: var(--av-text-soft);
-}
+  .av-border-subtle { border-color: var(--av-border-subtle); }
+  .av-border-strong { border-color: var(--av-border-strong); }
 
-.av-password-toggle:hover {
-  color: var(--av-text);
-}
+  .av-text-center { @apply text-center; }
+  .av-nowrap { @apply whitespace-nowrap; }
 
-.av-password-icon {
-  width: 20px;
-  height: 20px;
-  stroke-width: 1.75;
-}
+  /* Vertical list utility */
+  .av-stack {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
 
-/* Grid utility */
-.av-card-grid {
-  display: grid;
-  gap: 1rem;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-}
-/* Status pill utility */
-.av-status-pill {
-  padding: 0.25rem 0.6rem;
-  border-radius: 999px;
-  background: rgba(148, 163, 184, 0.15);
-  color: var(--av-fg, #e2e8f0);
-  font-size: 0.85rem;
-  white-space: nowrap;
-}
+  /* Grid utility (for galleries/dashboards) */
+  .av-card-grid {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  }
 
-.av-status-pill--primary {
-  background: rgba(34, 211, 238, 0.18);
-  color: var(--av-fg, #e2e8f0);
-}
+  /* Status pill utility */
+  .av-status-pill {
+    padding: 0.25rem 0.6rem;
+    border-radius: 999px;
+    background: rgba(148, 163, 184, 0.15);
+    color: var(--av-text);
+    font-size: 0.85rem;
+    white-space: nowrap;
+  }
 
-/* Loading bar utility */
-.av-loading-bar {
-  height: 4px;
-  width: 100%;
-  background: linear-gradient(90deg, #22d3ee, #6366f1);
-  animation: av-shimmer 1.6s linear infinite;
-  margin-bottom: 1rem;
-  background-size: 200% 100%;
-}
+  .av-status-pill--primary {
+    background: rgba(34, 211, 238, 0.18);
+    color: var(--av-text);
+  }
 
-@keyframes av-shimmer {
-  0% { background-position: 0 0; }
-  100% { background-position: 200% 0; }
-}
+  /* Loading bar utility */
+  .av-loading-bar {
+    height: 4px;
+    width: 100%;
+    background: linear-gradient(90deg, #22d3ee, #6366f1);
+    animation: av-shimmer 1.6s linear infinite;
+    margin-bottom: 1rem;
+    background-size: 200% 100%;
+  }
 
+  @keyframes av-shimmer {
+    0% { background-position: 0 0; }
+    100% { background-position: 200% 0; }
+  }
 }
-
-