/* One Trillion Smiles - Main Stylesheet */
/* Matches Figma Make prototype exactly */

/* ========================================
   FONTS - Matching prototype
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap');

/* ========================================
   CSS VARIABLES - Matching prototype
   ======================================== */
:root {
    /* Brand Colors - Orange to Pink (Tailwind orange-500, pink-500) */
    --orange-400: #fb923c;
    --orange-500: #f97316;
    --orange-600: #ea580c;
    --pink-500: #ec4899;
    --pink-600: #db2777;

    /* Gradient */
    --gradient: linear-gradient(to right, #f97316, #ec4899, #f97316);
    --gradient-simple: linear-gradient(to right, #f97316, #ec4899);
    --gradient-button: linear-gradient(to right, #f97316, #ec4899);

    /* Background gradients for sections */
    --bg-section-gradient: linear-gradient(to bottom right, #fff7ed, #fdf2f8, #fefce8);

    /* Light tints for badges/items */
    --orange-50: #fff7ed;
    --orange-100: #ffedd5;
    --pink-50: #fdf2f8;
    --pink-100: #fce7f3;
    --yellow-50: #fefce8;

    /* Backgrounds */
    --bg-light: #fdf2f8;
    --bg-white: #ffffff;

    /* Text - matching prototype */
    --text-dark: #111827;
    --text-gray: #4b5563;
    --text-light: #9ca3af;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-900: #111827;
    --orange-900: #7c2d12;

    /* Border Radius - matching prototype (rounded-3xl = 1.5rem) */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.25rem;
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;

    /* Shadows - matching prototype */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

/* ========================================
   CSS RESET & BASE STYLES
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--text-dark);
    line-height: 1.5;
    background: var(--bg-white);
}

/* ========================================
   FONT FAMILY UTILITIES
   ======================================== */
.font-poppins {
    font-family: 'Poppins', sans-serif;
}

.font-lora {
    font-family: 'Lora', serif;
}

.font-inter {
    font-family: 'Inter', sans-serif;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    line-height: 1.2;
}

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }

/* ========================================
   LAYOUT
   ======================================== */
.container {
    width: 100%;
    max-width: 72rem; /* max-w-6xl = 1152px */
    margin: 0 auto;
    padding: 0 1.5rem;
}

.container-narrow {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Page gradient background - matching prototype bg-gradient-to-br from-orange-50 via-pink-50 to-yellow-50 */
.page-gradient-bg {
    background: linear-gradient(to bottom right, var(--orange-50), var(--pink-50), var(--yellow-50));
    min-height: calc(100vh - 64px);
    padding: 2rem 0;
}

/* Dashboard container - max-w-5xl = 64rem = 1024px matching prototype */
.dashboard-container {
    width: 100%;
    max-width: 64rem; /* max-w-5xl = 1024px */
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Message page container */
.message-page-container {
    width: 100%;
    max-width: 64rem; /* Match dashboard-container width */
    margin: 0 auto;
    padding: 0 1.5rem;
    padding-bottom: 8rem; /* Space for floating smile button */
}

/* ========================================
   GRADIENT HEADER BAR
   ======================================== */
.gradient-header {
    background: linear-gradient(to right, var(--orange-500), var(--pink-500), var(--orange-500)); /* from-orange-500 via-pink-500 to-orange-500 */
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-lg);
}

.gradient-header-content {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ========================================
   LOGO - Matching prototype
   ======================================== */
.logo {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.125rem; /* text-lg on mobile */
    text-decoration: none;
    position: relative;
    display: inline-block;
    padding-bottom: 0.75rem; /* pb-3 */
    transform: scale(0.75); /* scale-75 on mobile */
    transform-origin: left center;
    color: white;
}

.logo-underline {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%; /* Match width of logo text */
    display: flex;
    align-items: center;
    gap: 0.25rem; /* gap-1 */
}

.logo-underline-line {
    flex: 1;
    height: 0.125rem; /* h-0.5 = 2px */
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.6), rgba(255,255,255,0));
    border-radius: 9999px;
}

.logo-sparkle {
    color: white;
    font-size: 0.75rem; /* text-xs */
}

.header-stats {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-stat {
    background: none;
    border: none;
    display: none; /* hidden on mobile */
    align-items: center;
    gap: 0.5rem; /* gap-2 */
    color: rgba(255, 255, 255, 0.9); /* text-white/90 */
    font-size: 0.875rem; /* text-sm */
    font-family: 'Lora', serif;
    cursor: pointer;
    transition: color 0.2s;
}

@media (min-width: 640px) {
    .header-stat {
        display: flex; /* sm:flex */
    }
}

.header-stat:hover {
    color: white; /* hover:text-white */
}

.header-stat svg {
    flex-shrink: 0;
    width: 1rem; /* w-4 */
    height: 1rem; /* h-4 */
}

.header-stat strong {
    font-weight: 700; /* font-bold */
}

@media (min-width: 768px) {
    .logo {
        font-size: 1.5rem; /* text-2xl on desktop */
        transform: scale(1); /* md:scale-100 */
    }
}

/* ========================================
   HERO SECTION - Matching prototype exactly
   ======================================== */
.hero-section {
    background: linear-gradient(to right, #f97316, #ec4899, #f97316);
    padding: 3rem 1.5rem; /* py-12 px-6 on mobile */
    position: relative;
    overflow: hidden;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr; /* Single column on mobile */
    gap: 3rem; /* gap-12 */
    align-items: center;
    max-width: 72rem; /* max-w-6xl */
    margin: 0 auto;
    width: 100%; /* Ensure it doesn't exceed viewport */
}

.hero-content {
    color: white;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Prevent children from stretching */
    gap: 1.5rem; /* space-y-6 */
    word-wrap: break-word; /* Ensure long words wrap */
    overflow-wrap: break-word;
    min-width: 0; /* Allow flex item to shrink below content size */
}

.hero-content .logo {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    margin-bottom: 0; /* Remove margin, using space-y-6 from parent */
    display: inline-block;
    padding-bottom: 0.75rem; /* Keep pb-3 for underline spacing */
    transform: none; /* Reset the scale transform from global .logo */
    transform-origin: initial;
    position: relative;
    /* Yellow to orange gradient text - matching prototype */
    background: linear-gradient(to bottom right, #fde047, #fdba74); /* from-yellow-300 to-orange-300 */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* Fallback for non-webkit browsers */
}

/* Underline container - reset text effects */
.hero-content .logo-underline {
    /* Reset gradient text effects for underline elements */
    -webkit-text-fill-color: initial;
    color: initial;
}

/* Sparkle and lines should be white on homepage */
.hero-content .logo-sparkle {
    -webkit-text-fill-color: white;
    color: white;
}

.hero-content .logo-underline-line {
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.6), rgba(255,255,255,0));
}

.hero-content h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 2.25rem; /* text-4xl = 36px */
    font-weight: 700;
    color: white;
    line-height: 1.1;
    margin-bottom: 0; /* Remove margin, using space-y-6 from parent */
}

.hero-content > p {
    margin-bottom: 0; /* Remove margin, using space-y-6 from parent */
}

@media (min-width: 768px) {
    .hero-section {
        padding: 4rem 1.5rem; /* md:py-16 */
    }

    .hero-grid {
        grid-template-columns: repeat(2, 1fr); /* md:grid-cols-2 */
    }

    .hero-content h1 {
        font-size: 3rem; /* md:text-5xl = 48px */
    }
}

@media (min-width: 1024px) {
    .hero-content h1 {
        font-size: 3.75rem; /* lg:text-6xl = 60px */
    }
}

.hero-content > p {
    font-family: 'Lora', serif;
    font-size: 1.125rem;
    color: white;
    margin-bottom: 1.5rem;
    opacity: 0.9;
    line-height: 1.6;
}

@media (min-width: 768px) {
    .hero-content > p {
        font-size: 1.25rem;
    }
}

.hero-stats {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 1rem;
}

.hero-stat-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.875rem;
    transition: color 0.2s;
    cursor: pointer;
}

.hero-stat-item:hover {
    color: white;
}

.hero-stat-item strong {
    font-weight: 700;
}

.hero-stat-icon {
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-stat-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* ========================================
   SIGNUP CARD - Matching prototype exactly
   ======================================== */
.signup-card {
    background: white;
    border-radius: var(--radius-3xl);
    padding: 2rem;
    box-shadow: var(--shadow-2xl);
    width: 100%; /* Ensure it doesn't exceed grid column */
    min-width: 0; /* Allow it to shrink below content size */
}

.signup-card h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--gray-900);
}

.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    font-family: 'Lora', serif;
    font-size: 0.875rem;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.form-input {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-family: 'Lora', serif;
    font-size: 1rem;
    background: var(--bg-white);
    transition: border-color 0.2s, box-shadow 0.2s;
    color: var(--gray-900);
}

/* Homepage signup card inputs have gray background - matching prototype */
.signup-card .form-input {
    background: #f3f3f5; /* bg-input-background from prototype theme.css */
}

.form-input:focus {
    outline: none;
    border-color: var(--orange-400);
    box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.2);
}

.form-input::placeholder {
    color: var(--text-light);
}

/* ========================================
   AVATAR PICKER - Matching prototype
   ======================================== */
.avatar-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
}

.avatar-option {
    width: 100%;
    aspect-ratio: 1;
    border: none;
    border-radius: var(--radius-xl);
    background: var(--gray-50);
    font-size: 1.875rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
}

.avatar-option:hover {
    background: var(--gray-100);
}

.avatar-option.selected {
    background: linear-gradient(to bottom right, var(--orange-400), var(--pink-500));
    transform: scale(1.1);
    box-shadow: var(--shadow-lg);
}

/* ========================================
   BUTTONS - Matching prototype
   ======================================== */
.btn {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-full);
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
}

.btn-primary {
    background: linear-gradient(to right, var(--orange-500), var(--pink-500));
    color: white;
}

.btn-primary:hover {
    background: linear-gradient(to right, var(--orange-600), var(--pink-600));
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-white {
    background: white;
    color: var(--orange-500);
}

.btn-white:hover {
    background: var(--gray-50);
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

/* Floating smile button container - stays visible at bottom */
.smile-button-floating {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem 1.5rem 1.5rem;
    background: linear-gradient(to top, rgba(255, 247, 237, 1) 0%, rgba(255, 247, 237, 0.95) 70%, rgba(255, 247, 237, 0) 100%);
    text-align: center;
    z-index: 50;
}

@media (min-width: 768px) {
    .smile-button-floating {
        padding: 1.5rem 1.5rem 2rem;
    }
}

/* Message quote container - stacked on mobile, side-by-side on desktop */
.message-quote-container {
    display: flex;
    flex-direction: column; /* Stacked on mobile */
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 0.75rem; /* Reduced from 1.5rem */
    margin-bottom: 2rem;
}

.message-quote-heart {
    font-size: 2.5rem; /* Match compose-emoji size */
    line-height: 1;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .message-quote-heart {
        font-size: 3rem;
    }
}

@media (min-width: 768px) {
    .message-quote-container {
        flex-direction: row; /* Side-by-side on desktop */
        align-items: flex-start;
        gap: 1rem;
    }
}

/* Message quote text - responsive sizing for mobile readability */
.message-quote-text {
    font-family: 'Lora', serif;
    font-size: 1.25rem; /* Smaller on mobile for readability */
    line-height: 1.5;
    color: var(--gray-900);
    flex: 1;
    margin: 0;
    text-align: left;
}

@media (min-width: 768px) {
    .message-quote-text {
        font-size: 2.25rem; /* Original size on desktop */
        line-height: 1.35;
    }
}

/* Celebration box - compact on mobile */
.celebration-box {
    background: linear-gradient(to right, #fefce8, #fff7ed);
    border: 2px solid #fde047;
    border-radius: 1.5rem;
    padding: 1.25rem; /* Smaller padding on mobile */
    text-align: center;
    margin-bottom: 1.5rem;
}

.celebration-emoji {
    font-size: 2.5rem; /* Smaller on mobile */
    margin-bottom: 0.5rem;
    animation: rotate-smile 0.5s ease-in-out 2;
}

.celebration-heading {
    font-family: 'Poppins', sans-serif;
    font-size: 1.125rem; /* Smaller on mobile */
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 0.75rem;
}

.celebration-count {
    font-size: 2.25rem; /* Smaller on mobile */
    font-weight: 700;
    background: linear-gradient(to right, #ea580c, #db2777);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 0.5rem;
}

.celebration-text {
    font-family: 'Lora', serif;
    font-size: 0.875rem; /* Smaller on mobile */
    color: var(--gray-700);
    margin: 0;
}

@media (min-width: 768px) {
    .celebration-box {
        padding: 2rem;
        margin-bottom: 2rem;
    }

    .celebration-emoji {
        font-size: 4.5rem;
        margin-bottom: 1rem;
    }

    .celebration-heading {
        font-size: 1.875rem;
        margin-bottom: 1.5rem;
    }

    .celebration-count {
        font-size: 3.75rem;
        margin-bottom: 1rem;
    }

    .celebration-text {
        font-size: 1.25rem;
    }
}

/* Smile button - large CTA matching prototype (mobile-first) */
.btn-smile {
    padding: 1.5rem 3rem; /* py-6 px-12 on mobile */
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem; /* text-xl on mobile */
    font-weight: 700; /* font-bold */
    border-radius: var(--radius-full); /* rounded-full */
    background: linear-gradient(to right, var(--orange-500), var(--pink-500));
    color: white;
    box-shadow: var(--shadow-2xl); /* shadow-2xl */
    transition: all 0.3s; /* transition-all */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* gap-2 from base Button */
    border: none;
    cursor: pointer;
}

.btn-smile-emoji {
    font-size: 1.5rem; /* text-2xl on mobile */
    margin-right: 0.5rem; /* mr-2 on mobile */
}

@media (min-width: 768px) {
    .btn-smile {
        padding: 2rem 4rem; /* md:py-8 md:px-16 */
        font-size: 1.5rem; /* md:text-2xl */
    }

    .btn-smile-emoji {
        font-size: 1.875rem; /* md:text-3xl */
        margin-right: 0.75rem; /* md:mr-3 */
    }
}

.btn-smile:hover {
    background: linear-gradient(to right, var(--orange-600), var(--pink-600));
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5);
    transform: scale(1.1);
}

.btn-smile:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* ========================================
   CONTENT SECTIONS - Matching prototype
   ======================================== */
.content-section {
    padding: 4rem 0 5rem;
}

.content-section.bg-gradient {
    background: linear-gradient(to bottom right, var(--orange-50), var(--pink-50), var(--yellow-50));
}

/* Inner spacing for combined sections - matches prototype space-y-20 */
.section-inner-spacing {
    display: flex;
    flex-direction: column;
    gap: 5rem; /* space-y-20 = 80px */
}

.subsection {
    /* No additional styling needed, just a container */
}

.section-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.875rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--gray-900);
    text-align: left;
}

@media (min-width: 768px) {
    .section-title {
        font-size: 2.25rem;
    }
}

.section-subtitle {
    font-family: 'Lora', serif;
    font-size: 1.25rem;
    color: var(--gray-600);
    margin-bottom: 2rem;
    /* No max-width - flows naturally within container like prototype */
}

/* ========================================
   MESSAGE CARDS (Examples) - Matching prototype
   ======================================== */
.message-example-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .message-example-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.message-example-card {
    background: white;
    border-radius: var(--radius-3xl);
    padding: 2rem;
    box-shadow: var(--shadow-lg);
}

@media (min-width: 768px) {
    .message-example-card {
        padding: 3rem;
    }
}

.message-example-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(to right, var(--orange-100), var(--pink-100));
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    margin-bottom: 1.5rem;
}

.message-example-badge svg {
    width: 1rem;
    height: 1rem;
    color: var(--orange-600);
}

.message-example-badge span {
    font-size: 0.875rem;
    font-weight: 600;
    color: #7c2d12; /* orange-900 */
}

.message-example-content {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
}

.message-example-emoji {
    font-size: 2.5rem;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.message-example-text {
    font-family: 'Lora', serif;
    font-size: 1.5rem;
    line-height: 1.4;
    color: var(--gray-900);
}

@media (min-width: 768px) {
    .message-example-text {
        font-size: 1.875rem;
    }
}

.message-example-sender {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
}

.message-example-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full);
    background: linear-gradient(to bottom right, var(--orange-400), var(--pink-500));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.message-example-sender-info {
    display: flex;
    flex-direction: column;
}

.message-example-sender-name {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--gray-900);
}

.message-example-sender-count {
    font-family: 'Lora', serif;
    font-size: 0.875rem;
    color: var(--gray-600);
}

/* ========================================
   STAT CARDS - Matching prototype
   ======================================== */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 72rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.stat-card {
    background: white;
    border-radius: var(--radius-3xl);
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    transition: box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}

.stat-card:hover {
    box-shadow: var(--shadow-xl);
}

.stat-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.stat-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    background: linear-gradient(to bottom right, var(--orange-400), var(--pink-500));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-card-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    stroke: white;
}

.stat-card-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
}

.stat-card-subtitle {
    font-size: 0.875rem;
    color: var(--gray-600);
}

.stat-card-number {
    font-family: 'Poppins', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(to right, var(--orange-600), var(--pink-600));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
}

.stat-card-label {
    font-size: 0.875rem;
    color: var(--gray-600);
    margin-bottom: 1rem;
}

.stat-card-progress {
    height: 1rem;
    background: var(--gray-100);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.stat-card-progress-bar {
    height: 100%;
    background: linear-gradient(to right, var(--orange-400), var(--pink-500));
    border-radius: var(--radius-full);
    transition: width 0.3s;
}

/* ========================================
   LEADERBOARD - Matching prototype
   ======================================== */
.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--radius-xl);
    background: linear-gradient(to right, var(--orange-50), var(--pink-50));
    margin-bottom: 0.5rem;
}

.leaderboard-item:last-child {
    margin-bottom: 0;
}

.leaderboard-rank {
    font-family: 'Poppins', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--orange-400);
    min-width: 1.5rem;
}

.leaderboard-avatar {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.leaderboard-avatar svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--gray-600);
}

.leaderboard-info {
    flex: 1;
    min-width: 0;
}

.leaderboard-name {
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leaderboard-count {
    font-size: 0.75rem;
    color: var(--gray-600);
}

/* ========================================
   BANNER - matching prototype
   ======================================== */
.banner {
    border-radius: var(--radius-3xl); /* rounded-3xl */
    padding: 1.5rem; /* p-6 = 24px */
    margin-bottom: 2rem; /* mb-8 = 32px */
    position: relative;
}

.banner-success {
    background: linear-gradient(to right, #dcfce7, #d1fae5); /* from-green-50 to-emerald-50 */
    border: 2px solid #86efac; /* border-green-300 */
}

.banner-warning {
    background: linear-gradient(to right, #fef9c3, #fef3c7); /* from-yellow-50 to-amber-50 */
    border: 2px solid #fcd34d; /* border-amber-300 */
}

.banner-info {
    background: linear-gradient(to right, #dbeafe, #e0e7ff); /* from-blue-50 to-indigo-50 */
    border: 2px solid #93c5fd; /* border-blue-300 */
}

.banner-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    color: var(--gray-400);
    transition: color 0.2s;
}

.banner-close:hover {
    color: var(--gray-600);
}

/* Banner with icon layout - matching prototype */
.banner-with-icon {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-right: 2rem; /* space for close button */
}

.banner-icon {
    width: 3rem; /* w-12 = 48px */
    height: 3rem; /* h-12 = 48px */
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.banner-icon.green {
    background: #22c55e; /* bg-green-500 */
}

.banner-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: white;
    stroke: white;
}

.banner h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem; /* text-xl */
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
}

.banner p {
    font-family: 'Lora', serif;
    font-size: 1rem;
    color: var(--gray-700);
    line-height: 1.6;
}

/* ========================================
   MASTHEAD - Two Section Layout (matching prototype exactly)
   ======================================== */
.masthead {
    background: white;
    border-radius: var(--radius-3xl);
    box-shadow: var(--shadow-lg);
    margin-bottom: 2rem;
    overflow: hidden;
}

/* Top Section - Smiles Count (gray background, centered) */
.masthead-stats {
    background: var(--gray-50); /* bg-gray-50 */
    padding: 1.5rem 0; /* py-6 */
    text-align: center;
    border-bottom: 1px solid var(--gray-100); /* border-b border-gray-100 */
}

.masthead-stats-number {
    font-family: 'Poppins', sans-serif;
    font-size: 3rem; /* text-5xl on mobile */
    font-weight: 700; /* font-bold */
    background: linear-gradient(to right, var(--orange-600), var(--pink-600));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.masthead-stats-label {
    font-family: 'Lora', serif;
    font-size: 1rem; /* text-base on mobile */
    color: var(--gray-600);
    margin-top: 0.25rem; /* mt-1 */
}

/* Bottom Section - Profile Info (white background, flex layout) */
.masthead-profile {
    padding: 1.5rem; /* p-6 on mobile */
    display: flex;
    align-items: flex-start; /* items-start */
    gap: 1rem; /* gap-4 on mobile */
}

.masthead-avatar {
    width: 4rem; /* w-16 on mobile */
    height: 4rem; /* h-16 on mobile */
    border-radius: var(--radius-full);
    background: linear-gradient(to bottom right, var(--orange-400), var(--pink-500));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.25rem; /* text-4xl on mobile */
    flex-shrink: 0;
}

.masthead-info {
    flex: 1;
    min-width: 0; /* min-w-0 */
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* space-y-2 */
}

.masthead-name {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem; /* text-2xl on mobile */
    font-weight: 700; /* font-bold */
    color: var(--gray-900);
    line-height: 1.2;
    margin: 0;
}

.masthead-email {
    font-family: 'Lora', serif;
    font-size: 0.875rem; /* text-sm */
    color: var(--gray-600);
    display: block;
}

.masthead-url {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* gap-2 */
    font-family: 'Lora', serif;
    font-size: 0.75rem; /* text-xs on mobile */
    color: var(--gray-600);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color 0.2s;
}

.masthead-url:hover {
    color: var(--gray-900);
}

.masthead-url-text {
    font-family: monospace;
    background: var(--gray-100);
    padding: 0.25rem 0.5rem; /* px-2 py-1 on mobile */
    border-radius: var(--radius-full);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px; /* max-w-[180px] on mobile */
    font-size: 0.75rem; /* text-xs on mobile */
}

.masthead-url-icon {
    flex-shrink: 0;
    width: 0.875rem; /* w-3.5 on mobile */
    height: 0.875rem; /* h-3.5 on mobile */
}

.masthead-url:hover .masthead-url-icon {
    color: var(--orange-500);
}

/* ========================================
   SECTION TITLES - matching prototype
   ======================================== */
.section-heading {
    font-family: 'Poppins', sans-serif;
    font-size: 1.875rem; /* text-3xl = 30px */
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 1.5rem;
}

/* ========================================
   MESSAGE FORM
   ======================================== */
.message-form-card {
    background: white;
    border-radius: var(--radius-3xl);
    padding: 2rem; /* p-8 = 32px */
    margin-bottom: 2rem;
    box-shadow: var(--shadow-lg);
}

/* Large submit button for forms - matching prototype py-6 */
.btn-submit-lg {
    padding: 1.5rem 2rem; /* py-6 = 24px */
    font-size: 1.125rem; /* text-lg */
}

.form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-family: 'Lora', serif;
    font-size: 1rem;
    resize: vertical;
    min-height: 7.5rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-textarea:focus {
    outline: none;
    border-color: var(--orange-400);
    box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.2);
}

.form-textarea::placeholder {
    color: var(--text-light);
}

/* ========================================
   MESSAGE CARDS / SENT SMILES SECTION
   ======================================== */
/* Messages section is just the container - no background */
.messages-section {
    margin-top: 2rem;
}

.messages-section h3,
.messages-section h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.875rem; /* text-3xl = 30px */
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 1.5rem;
}

/* Individual message cards have backgrounds */
.messages-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* space-y-6 = 24px */
}

/* Sent message cards - matching prototype MessageCard */
.message-item {
    position: relative;
    background: white;
    border-radius: var(--radius-3xl); /* rounded-3xl */
    padding: 2rem; /* p-8 = 32px */
    box-shadow: var(--shadow-lg);
}

.message-item + .message-item {
    margin-top: 1.5rem; /* space-y-6 = 24px */
}

/* Desktop actions - Top right, hidden on mobile */
.message-actions-desktop {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: none; /* hidden on mobile */
    align-items: center;
    gap: 0.5rem;
}

/* Mobile actions - Bottom with border, hidden on desktop */
.message-actions-mobile {
    display: flex; /* flex on mobile */
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-top: 1rem; /* pt-4 */
    margin-top: 1rem;
    border-top: 1px solid var(--gray-200); /* border-t border-gray-200 */
}

.message-text {
    font-family: 'Lora', serif;
    font-size: 1.5rem; /* text-2xl on mobile */
    line-height: 1.4;
    color: var(--gray-900);
    flex: 1;
    margin: 0;
}

.message-emoji {
    font-size: 2.25rem; /* text-4xl - consistent */
    line-height: 1;
    flex-shrink: 0;
    margin-top: 0.5rem;
}

@media (min-width: 768px) {
    .message-item {
        padding: 3rem; /* md:p-12 = 48px */
    }

    .message-text {
        font-size: 2.25rem !important; /* md:text-4xl */
    }

    .message-actions-desktop {
        display: flex; /* md:flex - show on desktop */
    }

    .message-actions-mobile {
        display: none; /* md:hidden - hide on desktop */
    }

    /* Masthead desktop sizes */
    .masthead-stats-number {
        font-size: 3.75rem; /* md:text-6xl */
    }

    .masthead-stats-label {
        font-size: 1.125rem; /* md:text-lg */
    }

    .masthead-profile {
        padding: 2.5rem; /* md:p-10 */
        gap: 1.5rem; /* md:gap-6 */
    }

    .masthead-avatar {
        width: 5rem; /* md:w-20 */
        height: 5rem; /* md:h-20 */
        font-size: 3rem; /* md:text-5xl */
    }

    .masthead-name {
        font-size: 2.25rem; /* md:text-4xl */
    }

    .masthead-url {
        font-size: 0.875rem; /* md:text-sm */
    }

    .masthead-url-text {
        padding: 0.25rem 0.75rem; /* md:px-3 py-1 */
        max-width: none; /* md:max-w-none */
        font-size: 0.875rem; /* md:text-sm */
    }

    .masthead-url-icon {
        width: 1rem; /* md:w-4 */
        height: 1rem; /* md:h-4 */
    }
}

.message-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.message-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: linear-gradient(to right, var(--orange-500), var(--pink-500));
    color: white;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
}

.message-actions {
    display: flex;
    gap: 0.5rem;
}

.message-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: var(--gray-400);
    transition: all 0.2s;
    border-radius: 0.375rem;
}

.message-action-btn.preview:hover {
    color: var(--orange-500);
    background: var(--orange-50);
}

.message-action-btn.delete:hover {
    color: #ef4444;
    background: #fef2f2;
}

.message-text {
    font-family: 'Lora', serif;
    font-size: 1rem;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

.message-date {
    font-size: 0.75rem;
    color: var(--text-light);
}

.message-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-gray);
    margin-left: 0.75rem;
}

/* ========================================
   MESSAGE PAGE
   ======================================== */
/* Message Card Component - reusable across pages, matching prototype */
.message-card {
    background: white;
    border-radius: var(--radius-3xl);
    padding: 2rem; /* p-8 = 32px */
    box-shadow: var(--shadow-lg);
}

@media (min-width: 768px) {
    .message-card {
        padding: 3rem; /* md:p-12 = 48px */
    }
}

.message-hero {
    background: white;
    border-radius: var(--radius-3xl);
    padding: 2rem; /* p-8 = 32px */
    margin-bottom: 2rem;
    box-shadow: var(--shadow-lg);
}

@media (min-width: 768px) {
    .message-hero {
        padding: 3rem; /* md:p-12 = 48px */
    }
}

.message-badge-large {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(to right, var(--orange-100), var(--pink-100));
    color: #7c2d12;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem; /* Reduced from 1.5rem */
}

.message-badge-large svg {
    width: 1rem;
    height: 1rem;
    color: var(--orange-600);
    stroke: var(--orange-600);
}

.message-emoji {
    font-size: 4rem;
    margin-bottom: 1.5rem;
}

.message-content {
    font-family: 'Lora', serif;
    font-size: 1.875rem; /* text-3xl = 30px */
    color: var(--gray-900);
    line-height: 1.625; /* leading-relaxed */
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .message-content {
        font-size: 2.25rem; /* text-4xl = 36px */
    }
}

.message-sender-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
}

.message-sender-avatar {
    width: 3.75rem;
    height: 3.75rem;
    border-radius: var(--radius-full);
    background: linear-gradient(to bottom right, var(--orange-400), var(--pink-500));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.message-sender-info h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.message-sender-info p {
    font-family: 'Lora', serif;
    font-size: 0.875rem;
    color: var(--text-gray);
}

/* ========================================
   TREASURE HUNT SECTION
   ======================================== */
.treasure-hunt-card {
    background: white;
    border-radius: var(--radius-3xl);
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-lg);
}

.treasure-hunt-card h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.treasure-hunt-card p {
    font-family: 'Lora', serif;
    font-size: 1rem;
    color: var(--text-gray);
    margin-bottom: 1.25rem;
}

.lookup-form {
    display: flex;
    gap: 0.75rem;
}

.lookup-result {
    margin-top: 1.25rem;
    padding: 1.25rem;
    background: linear-gradient(to right, var(--orange-50), var(--pink-50));
    border-radius: var(--radius-lg);
    border: 2px solid var(--orange-400);
}

/* ========================================
   CTA CARD
   ======================================== */
.cta-card {
    background: linear-gradient(to right, var(--orange-500), var(--pink-500));
    border-radius: var(--radius-3xl);
    padding: 3rem;
    text-align: center;
    color: white;
}

.cta-card h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: white;
}

.cta-card p {
    font-family: 'Lora', serif;
    font-size: 1.125rem;
    margin-bottom: 2rem;
    opacity: 0.95;
}

/* ========================================
   MODALS - Matching prototype
   ======================================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    padding: 1.5rem;
    overflow-y: auto;
}

.modal-overlay.hidden {
    display: none;
}

.modal {
    background: white;
    border-radius: var(--radius-3xl);
    padding: 2rem; /* p-8 = 32px */
    max-width: 28rem; /* max-w-md = 448px */
    width: 100%;
    position: relative;
    box-shadow: var(--shadow-2xl);
}

/* Large modal variant */
.modal.modal-lg {
    max-width: 48rem; /* max-w-3xl = 768px */
}

/* Gradient background modal (for send confirm) */
.modal.modal-gradient {
    background: linear-gradient(to bottom right, var(--orange-50), var(--pink-50), var(--yellow-50));
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    color: var(--gray-400);
    transition: color 0.2s;
    z-index: 10;
}

.modal-close:hover {
    color: var(--gray-600);
}

.modal-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.modal-header.centered {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.modal-icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full);
    background: linear-gradient(to bottom right, var(--orange-400), var(--pink-500));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.modal-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    stroke: white;
}

.modal-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem; /* text-2xl = 24px */
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
}

.modal-subtitle {
    font-family: 'Lora', serif;
    font-size: 1rem;
    color: var(--gray-600);
    line-height: 1.6;
}

/* Modal buttons row */
.modal-buttons {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.modal-buttons .btn {
    flex: 1;
}

/* Confirmation modal content */
.modal-content {
    margin-bottom: 1.5rem;
}

.modal-content p {
    font-family: 'Lora', serif;
    font-size: 1rem;
    color: var(--gray-600);
    line-height: 1.6;
}

.modal-content strong {
    color: var(--gray-900);
}

/* ========================================
   ANIMATIONS & TRANSITIONS
   ======================================== */
/* Smooth transitions for interactive elements */
.transition-all {
    transition: all 0.2s ease;
}

.transition-colors {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.transition-transform {
    transition: transform 0.2s ease;
}

/* Hover scale effect */
.hover-scale:hover {
    transform: scale(1.02);
}

/* Card hover effect */
.card-hover {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card-hover:hover {
    box-shadow: var(--shadow-xl);
}

/* Fade in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeIn {
    animation: fadeIn 0.3s ease forwards;
}

/* ========================================
   EMPTY STATES - matching prototype
   ======================================== */
.empty-state {
    background: white;
    border-radius: var(--radius-3xl);
    padding: 3rem; /* p-12 = 48px */
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.empty-state p {
    font-family: 'Lora', serif;
    color: var(--gray-500);
    font-size: 1rem;
}

.empty-state-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    background: linear-gradient(to bottom right, var(--orange-100), var(--pink-100));
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state-icon svg {
    width: 2rem;
    height: 2rem;
    color: var(--orange-500);
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.hidden {
    display: none !important;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* Font utilities */
.font-poppins {
    font-family: 'Poppins', sans-serif;
}

.font-lora {
    font-family: 'Lora', serif;
}

/* Spacing utilities */
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 4rem; }

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }

/* Flex utilities */
.flex { display: flex; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }

/* ========================================
   ADMIN DASHBOARD - matching prototype
   ======================================== */
.admin-header {
    background: linear-gradient(to right, var(--orange-500), var(--pink-500), var(--orange-500));
    padding: 1rem 0;
    color: white;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: var(--shadow-lg);
}

.admin-header-content {
    max-width: 80rem; /* max-w-7xl = 1280px */
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.admin-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700;
    color: white;
}

.admin-stats {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.admin-stat {
    text-align: center;
}

.admin-stat-icon {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 0.25rem;
}

.admin-stat-icon svg {
    width: 1rem;
    height: 1rem;
    color: rgba(255, 255, 255, 0.8);
}

.admin-stat-icon span {
    font-family: 'Lora', serif;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
}

.admin-stat-number {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700;
    line-height: 1;
}

.admin-stat-label {
    font-family: 'Lora', serif;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Stat divider */
.admin-stat-divider {
    height: 2rem;
    width: 1px;
    background: rgba(255, 255, 255, 0.3);
}

.admin-content {
    background: linear-gradient(to bottom right, var(--orange-50), var(--pink-50), var(--yellow-50));
    min-height: calc(100vh - 7.5rem);
    padding: 2rem 0;
}

.admin-container {
    max-width: 87.5rem;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Admin Filters - matching prototype */
.filters-card {
    background: white;
    border-radius: var(--radius-3xl);
    padding: 1.5rem; /* p-6 = 24px */
    margin-bottom: 1.5rem; /* mb-6 = 24px */
    box-shadow: var(--shadow-lg);
}

.filters-card h3,
.filters-card h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem; /* text-xl */
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 1rem;
}

.filter-row {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .filter-row {
        flex-direction: row;
    }
}

.filter-group {
    flex: 1;
}

.filter-label {
    font-family: 'Lora', serif;
    font-size: 0.875rem;
    color: var(--gray-600);
    margin-bottom: 0.5rem;
    display: block;
}

.filter-buttons {
    display: flex;
    gap: 0.5rem;
}

.filter-btn {
    flex: 1;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--gray-100);
    color: var(--gray-700);
}

.filter-btn:hover {
    background: var(--gray-200);
}

.filter-btn.active {
    background: linear-gradient(to right, var(--orange-500), var(--pink-500));
    color: white;
}

.filter-select {
    width: 100%;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--gray-200);
    font-family: 'Lora', serif;
    font-size: 0.875rem;
    background: white;
    cursor: pointer;
    transition: border-color 0.2s;
}

.filter-select:focus {
    outline: none;
    border-color: var(--orange-400);
    box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.2);
}

.filter-results {
    font-family: 'Lora', serif;
    font-size: 0.875rem;
    color: var(--gray-600);
    margin-top: 1rem;
}

.filter-results .highlight {
    font-weight: 700;
    color: var(--orange-600);
}

/* Admin Users Table - matching prototype */
.users-table-card {
    background: white;
    border-radius: var(--radius-3xl);
    box-shadow: var(--shadow-lg);
    overflow: visible; /* Allow dropdown to overflow table */
}

.users-table {
    width: 100%;
    border-collapse: collapse;
}

/* Table header with gradient background */
.users-table thead {
    background: linear-gradient(to right, var(--orange-50), var(--pink-50));
}

.users-table th {
    text-align: left;
    padding: 1rem 1.5rem;
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--gray-700);
}

.users-table th.text-center {
    text-align: center;
}

.users-table tbody {
    /* Divide rows with gray-100 */
}

.users-table tbody tr {
    border-bottom: 1px solid var(--gray-100);
    transition: background 0.2s;
}

.users-table tbody tr:hover {
    background: rgba(249, 115, 22, 0.05); /* hover:bg-orange-50/50 */
}

.users-table td {
    padding: 1rem 1.5rem;
    font-size: 0.875rem;
    color: var(--gray-900);
}

.users-table .email-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Lora', serif;
}

.users-table .email-cell svg {
    width: 1rem;
    height: 1rem;
    color: var(--gray-400);
}

/* Confirmed badge - larger circle */
.confirmed-badge {
    width: 2rem; /* w-8 = 32px */
    height: 2rem; /* h-8 = 32px */
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.confirmed-badge.yes {
    background: #dcfce7; /* bg-green-100 */
}

.confirmed-badge.yes svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #16a34a; /* text-green-600 */
}

.confirmed-badge.no {
    background: #fee2e2; /* bg-red-100 */
}

.confirmed-badge.no svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #dc2626; /* text-red-600 */
}

/* Smiles count badge */
.smiles-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    background: linear-gradient(to right, var(--orange-100), var(--pink-100));
    color: #7c2d12; /* text-orange-900 */
    font-weight: 700;
    font-size: 0.875rem;
}

.dashboard-url {
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    color: var(--text-light);
}

.actions-menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    color: var(--text-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.actions-menu-btn:hover {
    color: var(--text-dark);
    background: var(--gray-100);
}

/* Actions dropdown - matching prototype */
.actions-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.25rem;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 1rem; /* rounded-2xl */
    box-shadow: var(--shadow-xl);
    min-width: 14rem; /* w-56 = 224px */
    z-index: 1000; /* High z-index to ensure it appears above table rows */
    padding: 0.5rem 0;
}

.actions-dropdown button {
    width: 100%;
    padding: 0.5rem 1rem;
    border: none;
    background: white;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Lora', serif;
    font-size: 0.875rem;
    color: var(--gray-700);
    transition: background 0.2s;
}

.actions-dropdown button:hover {
    background: var(--orange-50);
}

.actions-dropdown button svg {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    color: var(--orange-600);
}

.actions-dropdown button.danger {
    color: #dc2626; /* text-red-600 */
}

.actions-dropdown button.danger:hover {
    background: #fef2f2; /* bg-red-50 */
}

.actions-dropdown button.danger svg {
    color: #dc2626;
}

.actions-dropdown .divider {
    height: 1px;
    background: var(--gray-200);
    margin: 0.25rem 0;
}

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes rotate-smile {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(10deg); }
    50% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
    100% { transform: rotate(0deg); }
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .avatar-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .section-title {
        font-size: 1.5rem;
    }
}