/**
 * Numerology Pro - Frontend Styles
 * Modern, Mystical & Elegant Design
 * 
 * @package Numerology_Pro
 * @author Saysix - Fernando Camargo Candido
 */

/* =================================================================
   Google Fonts Import
   ================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* =================================================================
   CSS Variables
   ================================================================= */
:root {
    /* Primary Palette - Mystical Purple */
    --np-primary: #7C3AED;
    --np-primary-dark: #5B21B6;
    --np-primary-light: #A78BFA;
    --np-primary-soft: rgba(124, 58, 237, 0.1);
    --np-primary-glow: rgba(124, 58, 237, 0.4);
    
    /* Secondary - Mystical Indigo */
    --np-secondary: #4F46E5;
    --np-secondary-dark: #3730A3;
    --np-secondary-light: #818CF8;
    
    /* Accent Colors */
    --np-gold: #F59E0B;
    --np-gold-dark: #D97706;
    --np-gold-light: #FCD34D;
    --np-teal: #14B8A6;
    --np-rose: #EC4899;
    
    /* Status */
    --np-success: #10B981;
    --np-warning: #F59E0B;
    --np-danger: #EF4444;
    
    /* Neutrals */
    --np-dark: #0F0A1E;
    --np-dark-soft: #1A1428;
    --np-gray-900: #1E1B2E;
    --np-gray-800: #2D2A3E;
    --np-gray-700: #4A4662;
    --np-gray-600: #6B6785;
    --np-gray-500: #9390A8;
    --np-gray-400: #C4C2D4;
    --np-gray-300: #E2E0EE;
    --np-gray-200: #F0EFF5;
    --np-gray-100: #F8F7FC;
    --np-white: #FFFFFF;
    
    /* Gradients */
    --np-gradient-primary: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
    --np-gradient-gold: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    --np-gradient-mystical: linear-gradient(135deg, #1E1B4B 0%, #312E81 50%, #4C1D95 100%);
    --np-gradient-cosmic: linear-gradient(180deg, #0F0A1E 0%, #1A1428 50%, #2D1B4E 100%);
    --np-gradient-aurora: linear-gradient(135deg, #7C3AED 0%, #EC4899 50%, #F59E0B 100%);
    
    /* Shadows */
    --np-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --np-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --np-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
    --np-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.2);
    --np-shadow-glow: 0 0 40px rgba(124, 58, 237, 0.25);
    --np-shadow-gold: 0 0 30px rgba(245, 158, 11, 0.25);
    --np-shadow-inner: inset 0 2px 8px rgba(0, 0, 0, 0.1);
    
    /* Typography */
    --np-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --np-font-display: 'Playfair Display', Georgia, serif;
    --np-font-numbers: 'Cinzel', serif;
    
    /* Borders */
    --np-radius-sm: 8px;
    --np-radius-md: 12px;
    --np-radius-lg: 16px;
    --np-radius-xl: 24px;
    --np-radius-2xl: 32px;
    --np-radius-full: 9999px;
    
    /* Transitions */
    --np-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --np-transition-fast: all 0.15s ease;
    --np-transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =================================================================
   Base Container
   ================================================================= */
.np-container {
    font-family: var(--np-font-body);
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
    color: var(--np-gray-800);
    line-height: 1.6;
}

.np-container * {
    box-sizing: border-box;
}

/* =================================================================
   Main Card Component
   ================================================================= */
.np-card {
    background: var(--np-white);
    border-radius: var(--np-radius-2xl);
    box-shadow: var(--np-shadow-xl);
    overflow: hidden;
    position: relative;
}

.np-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--np-gradient-aurora);
}

/* Card Header */
.np-card-header {
    background: var(--np-gradient-mystical);
    color: var(--np-white);
    padding: 48px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.np-card-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 50m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0' fill='%23ffffff' fill-opacity='0.1'/%3E%3C/svg%3E");
    opacity: 0.3;
}

.np-card-header::after {
    content: '✧';
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 2rem;
    opacity: 0.2;
    animation: np-twinkle 4s ease-in-out infinite;
}

@keyframes np-twinkle {
    0%, 100% { opacity: 0.2; transform: scale(1) rotate(0deg); }
    50% { opacity: 0.4; transform: scale(1.2) rotate(20deg); }
}

.np-card-header h2 {
    font-family: var(--np-font-display);
    font-size: 2.2rem;
    font-weight: 600;
    margin: 0 0 12px;
    position: relative;
    z-index: 1;
    letter-spacing: -0.02em;
}

.np-card-header p {
    font-size: 1.1rem;
    margin: 0;
    opacity: 0.9;
    position: relative;
    z-index: 1;
}

.np-card-header .np-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

/* Card Body */
.np-card-body {
    padding: 40px;
    background: var(--np-white);
}

/* =================================================================
   Form Styles
   ================================================================= */
.np-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.np-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.np-form-group label {
    font-weight: 600;
    color: var(--np-gray-800);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.np-form-group label .np-label-icon {
    font-size: 1.1rem;
}

.np-form-group input,
.np-form-group select,
.np-form-group textarea {
    padding: 16px 20px;
    border: 2px solid var(--np-gray-300);
    border-radius: var(--np-radius-lg);
    font-size: 1rem;
    font-family: var(--np-font-body);
    transition: var(--np-transition);
    background: var(--np-gray-100);
    color: var(--np-gray-800);
}

.np-form-group input:hover,
.np-form-group select:hover {
    border-color: var(--np-gray-400);
    background: var(--np-white);
}

.np-form-group input:focus,
.np-form-group select:focus,
.np-form-group textarea:focus {
    outline: none;
    border-color: var(--np-primary);
    background: var(--np-white);
    box-shadow: 0 0 0 4px var(--np-primary-soft), var(--np-shadow-md);
}

.np-form-group input::placeholder {
    color: var(--np-gray-500);
}

/* Form Row - Side by Side */
.np-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 600px) {
    .np-form-row {
        grid-template-columns: 1fr;
    }
}

/* Date Input Special Styling */
.np-form-group input[type="date"] {
    cursor: pointer;
}

/* =================================================================
   Button Styles
   ================================================================= */
.np-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    border: none;
    border-radius: var(--np-radius-lg);
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--np-font-body);
    cursor: pointer;
    transition: var(--np-transition);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.np-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.np-btn:hover::before {
    left: 100%;
}

.np-btn-primary {
    background: var(--np-gradient-primary);
    color: var(--np-white);
    box-shadow: var(--np-shadow-md);
}

.np-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: var(--np-shadow-lg), var(--np-shadow-glow);
}

.np-btn-secondary {
    background: transparent;
    color: var(--np-primary);
    border: 2px solid var(--np-primary);
}

.np-btn-secondary:hover {
    background: var(--np-primary);
    color: var(--np-white);
    transform: translateY(-2px);
}

.np-btn-gold {
    background: var(--np-gradient-gold);
    color: var(--np-white);
    box-shadow: var(--np-shadow-md);
}

.np-btn-gold:hover {
    transform: translateY(-3px);
    box-shadow: var(--np-shadow-lg), var(--np-shadow-gold);
}

.np-btn-block {
    width: 100%;
}

.np-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.np-btn .np-btn-icon {
    font-size: 1.2em;
}

/* =================================================================
   Loading States
   ================================================================= */
.np-loading {
    display: none;
    text-align: center;
    padding: 60px 40px;
}

.np-loading.active {
    display: block;
}

.np-spinner-container {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
}

.np-spinner {
    width: 80px;
    height: 80px;
    border: 4px solid var(--np-gray-200);
    border-top-color: var(--np-primary);
    border-right-color: var(--np-primary-light);
    border-radius: 50%;
    animation: np-spin 1s linear infinite;
}

.np-spinner-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    animation: np-pulse 1.5s ease-in-out infinite;
}

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

@keyframes np-pulse {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.9); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

.np-loading-text {
    color: var(--np-gray-600);
    font-size: 1.1rem;
    font-style: italic;
}

.np-loading-dots::after {
    content: '';
    animation: np-dots 1.5s infinite;
}

@keyframes np-dots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}

/* =================================================================
   Results Section
   ================================================================= */
.np-results {
    display: none;
    margin-top: 32px;
}

.np-results.active {
    display: block;
    animation: np-fadeSlideUp 0.6s ease;
}

@keyframes np-fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =================================================================
   Main Number Display - Hero Style
   ================================================================= */
.np-number-hero {
    background: var(--np-gradient-cosmic);
    border-radius: var(--np-radius-2xl);
    padding: 48px;
    text-align: center;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--np-shadow-xl), var(--np-shadow-glow);
}

.np-number-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.15) 0%, transparent 70%);
    animation: np-rotate 20s linear infinite;
}

@keyframes np-rotate {
    to {
        transform: rotate(360deg);
    }
}

.np-number-value {
    font-family: var(--np-font-numbers);
    font-size: 6rem;
    font-weight: 700;
    background: linear-gradient(180deg, var(--np-white) 0%, var(--np-primary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    position: relative;
    z-index: 1;
    text-shadow: 0 0 60px rgba(124, 58, 237, 0.5);
    margin-bottom: 16px;
}

.np-number-value.master {
    background: linear-gradient(180deg, var(--np-gold-light) 0%, var(--np-gold) 50%, var(--np-gold-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 0 60px rgba(245, 158, 11, 0.5);
}

.np-number-title {
    font-family: var(--np-font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--np-white);
    margin: 0 0 8px;
    position: relative;
    z-index: 1;
}

.np-number-keywords {
    color: var(--np-gray-400);
    font-style: italic;
    font-size: 1.05rem;
    position: relative;
    z-index: 1;
}

.np-master-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--np-gradient-gold);
    color: var(--np-dark);
    padding: 8px 20px;
    border-radius: var(--np-radius-full);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 16px;
    position: relative;
    z-index: 1;
    box-shadow: var(--np-shadow-gold);
}

/* =================================================================
   Number Grid Display
   ================================================================= */
.np-numbers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.np-number-card {
    background: var(--np-white);
    border-radius: var(--np-radius-xl);
    padding: 28px 24px;
    text-align: center;
    border: 2px solid var(--np-gray-200);
    transition: var(--np-transition);
    position: relative;
    overflow: hidden;
}

.np-number-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--np-gradient-primary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.np-number-card:hover {
    transform: translateY(-6px);
    border-color: var(--np-primary-light);
    box-shadow: var(--np-shadow-lg);
}

.np-number-card:hover::before {
    transform: scaleX(1);
}

.np-number-card.master {
    border-color: var(--np-gold);
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.05) 0%, var(--np-white) 100%);
}

.np-number-card.master::before {
    background: var(--np-gradient-gold);
    transform: scaleX(1);
}

.np-number-card .np-number-small {
    font-family: var(--np-font-numbers);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--np-primary);
    line-height: 1;
    margin-bottom: 12px;
}

.np-number-card.master .np-number-small {
    color: var(--np-gold);
}

.np-number-card .np-number-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--np-gray-700);
    margin-bottom: 8px;
}

.np-number-card .np-number-meaning {
    font-size: 0.85rem;
    color: var(--np-gray-500);
    font-style: italic;
}

/* =================================================================
   Interpretation Sections
   ================================================================= */
.np-interpretation {
    background: var(--np-white);
    border-radius: var(--np-radius-xl);
    border: 1px solid var(--np-gray-200);
    padding: 32px;
    margin-bottom: 24px;
    transition: var(--np-transition);
}

.np-interpretation:hover {
    box-shadow: var(--np-shadow-md);
}

.np-interpretation-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--np-gray-200);
}

.np-interpretation-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--np-radius-md);
    background: var(--np-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.np-interpretation h3 {
    font-family: var(--np-font-display);
    color: var(--np-gray-900);
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
}

.np-interpretation p {
    color: var(--np-gray-700);
    line-height: 1.8;
    margin: 0;
    font-size: 1.02rem;
}

/* =================================================================
   Traits Grid
   ================================================================= */
.np-traits-section {
    margin-bottom: 32px;
}

.np-traits-title {
    font-family: var(--np-font-display);
    font-size: 1.2rem;
    color: var(--np-gray-800);
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.np-traits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 600px) {
    .np-traits-grid {
        grid-template-columns: 1fr;
    }
}

.np-trait-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: var(--np-gray-100);
    border-radius: var(--np-radius-lg);
    transition: var(--np-transition);
}

.np-trait-card:hover {
    background: var(--np-white);
    box-shadow: var(--np-shadow-md);
    transform: translateX(4px);
}

.np-trait-card.positive {
    border-left: 4px solid var(--np-success);
}

.np-trait-card.negative {
    border-left: 4px solid var(--np-warning);
}

.np-trait-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
}

.np-trait-content h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--np-gray-800);
    margin: 0 0 6px;
}

.np-trait-content p {
    font-size: 0.9rem;
    color: var(--np-gray-600);
    margin: 0;
}

/* =================================================================
   Compatibility Section
   ================================================================= */
.np-compatibility-result {
    text-align: center;
    padding: 40px;
    background: var(--np-gradient-mystical);
    border-radius: var(--np-radius-2xl);
    color: var(--np-white);
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
}

.np-compatibility-score {
    font-family: var(--np-font-numbers);
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.np-compatibility-label {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 20px;
}

.np-compatibility-bar {
    width: 100%;
    max-width: 400px;
    height: 12px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--np-radius-full);
    margin: 0 auto;
    overflow: hidden;
}

.np-compatibility-fill {
    height: 100%;
    background: var(--np-gradient-aurora);
    border-radius: var(--np-radius-full);
    transition: width 1s ease;
}

.np-compatibility-persons {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 32px;
}

.np-person-card {
    background: var(--np-white);
    border-radius: var(--np-radius-xl);
    padding: 24px 32px;
    text-align: center;
    box-shadow: var(--np-shadow-md);
    min-width: 180px;
}

.np-person-number {
    font-family: var(--np-font-numbers);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--np-primary);
    margin-bottom: 8px;
}

.np-person-name {
    font-weight: 600;
    color: var(--np-gray-800);
}

/* =================================================================
   Predictions / Cycles
   ================================================================= */
.np-cycle-card {
    background: var(--np-white);
    border-radius: var(--np-radius-xl);
    overflow: hidden;
    margin-bottom: 24px;
    box-shadow: var(--np-shadow-md);
}

.np-cycle-header {
    background: var(--np-gradient-primary);
    color: var(--np-white);
    padding: 20px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.np-cycle-title {
    font-family: var(--np-font-display);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

.np-cycle-period {
    font-size: 0.9rem;
    opacity: 0.9;
}

.np-cycle-number {
    font-family: var(--np-font-numbers);
    font-size: 2rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.2);
    width: 56px;
    height: 56px;
    border-radius: var(--np-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.np-cycle-body {
    padding: 28px;
}

.np-cycle-description {
    color: var(--np-gray-700);
    line-height: 1.8;
    margin: 0;
}

/* =================================================================
   Daily Number Widget
   ================================================================= */
.np-daily-widget {
    background: var(--np-gradient-cosmic);
    border-radius: var(--np-radius-2xl);
    padding: 40px;
    text-align: center;
    color: var(--np-white);
    position: relative;
    overflow: hidden;
}

.np-daily-widget::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.np-daily-date {
    font-size: 1.1rem;
    opacity: 0.8;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.np-daily-number {
    font-family: var(--np-font-numbers);
    font-size: 5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
    text-shadow: 0 0 40px rgba(124, 58, 237, 0.5);
}

.np-daily-energy {
    font-family: var(--np-font-display);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.np-daily-description {
    max-width: 500px;
    margin: 0 auto;
    opacity: 0.9;
    line-height: 1.7;
    position: relative;
    z-index: 1;
}

/* =================================================================
   Map Full Display
   ================================================================= */
.np-map-container {
    background: var(--np-white);
    border-radius: var(--np-radius-2xl);
    overflow: hidden;
    box-shadow: var(--np-shadow-xl);
}

.np-map-header {
    background: var(--np-gradient-mystical);
    color: var(--np-white);
    padding: 48px 40px;
    text-align: center;
}

.np-map-name {
    font-family: var(--np-font-display);
    font-size: 2rem;
    font-weight: 600;
    margin: 0 0 8px;
}

.np-map-birthdate {
    font-size: 1.1rem;
    opacity: 0.9;
}

.np-map-body {
    padding: 40px;
}

.np-map-section {
    margin-bottom: 40px;
}

.np-map-section:last-child {
    margin-bottom: 0;
}

.np-section-title {
    font-family: var(--np-font-display);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--np-gray-900);
    margin: 0 0 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--np-gray-200);
    display: flex;
    align-items: center;
    gap: 12px;
}

.np-section-title::before {
    content: '◈';
    color: var(--np-primary);
}

/* =================================================================
   Tabs Component
   ================================================================= */
.np-tabs {
    margin-bottom: 32px;
}

.np-tabs-nav {
    display: flex;
    gap: 4px;
    background: var(--np-gray-100);
    padding: 6px;
    border-radius: var(--np-radius-lg);
    overflow-x: auto;
}

.np-tab-btn {
    flex: 1;
    padding: 14px 24px;
    border: none;
    background: transparent;
    border-radius: var(--np-radius-md);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--np-gray-600);
    cursor: pointer;
    transition: var(--np-transition);
    white-space: nowrap;
}

.np-tab-btn:hover {
    color: var(--np-gray-800);
    background: rgba(255, 255, 255, 0.5);
}

.np-tab-btn.active {
    background: var(--np-white);
    color: var(--np-primary);
    box-shadow: var(--np-shadow-sm);
}

.np-tab-content {
    display: none;
    animation: np-fadeIn 0.3s ease;
}

.np-tab-content.active {
    display: block;
}

@keyframes np-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* =================================================================
   Actions / Buttons Section
   ================================================================= */
.np-actions {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.np-actions-center {
    justify-content: center;
}

/* =================================================================
   PDF Export Button
   ================================================================= */
.np-btn-pdf {
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
    color: var(--np-white);
}

.np-btn-pdf:hover {
    transform: translateY(-3px);
    box-shadow: var(--np-shadow-lg), 0 0 30px rgba(220, 38, 38, 0.3);
}

/* =================================================================
   Credits Footer
   ================================================================= */
.np-credits {
    text-align: center;
    padding: 24px;
    margin-top: 32px;
    color: var(--np-gray-500);
    font-size: 0.9rem;
    border-top: 1px solid var(--np-gray-200);
}

.np-credits a {
    color: var(--np-primary);
    text-decoration: none;
    font-weight: 500;
}

.np-credits a:hover {
    text-decoration: underline;
}

/* =================================================================
   Error States
   ================================================================= */
.np-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #DC2626;
    padding: 20px 24px;
    border-radius: var(--np-radius-lg);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.np-error-icon {
    font-size: 1.5rem;
}

/* =================================================================
   Tooltips
   ================================================================= */
[data-tooltip] {
    position: relative;
    cursor: help;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: var(--np-dark);
    color: var(--np-white);
    padding: 8px 12px;
    border-radius: var(--np-radius-sm);
    font-size: 0.85rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: var(--np-transition);
    z-index: 100;
}

[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-4px);
}

/* =================================================================
   Responsive Design
   ================================================================= */
@media (max-width: 768px) {
    .np-container {
        padding: 16px;
    }
    
    .np-card-header {
        padding: 32px 24px;
    }
    
    .np-card-header h2 {
        font-size: 1.75rem;
    }
    
    .np-card-body {
        padding: 24px;
    }
    
    .np-number-hero {
        padding: 32px 24px;
    }
    
    .np-number-value {
        font-size: 4rem;
    }
    
    .np-numbers-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .np-interpretation {
        padding: 24px;
    }
    
    .np-compatibility-persons {
        flex-direction: column;
        gap: 16px;
    }
    
    .np-actions {
        flex-direction: column;
    }
    
    .np-btn-block-mobile {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .np-numbers-grid {
        grid-template-columns: 1fr;
    }
    
    .np-traits-grid {
        grid-template-columns: 1fr;
    }
    
    .np-tabs-nav {
        flex-direction: column;
    }
    
    .np-tab-btn {
        text-align: center;
    }
}

/* =================================================================
   SHORTCODE WIDGETS - Professional Styles
   ================================================================= */

/* =================================================================
   Compatibility Widget
   ================================================================= */
.mnp-compatibility {
    font-family: var(--np-font-body);
    color: var(--np-gray-800);
    max-width: 900px;
    margin: 40px auto;
    background: var(--np-white);
    border-radius: var(--np-radius-2xl);
    box-shadow: var(--np-shadow-xl);
    overflow: hidden;
    position: relative;
}

.mnp-compatibility::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--np-gradient-aurora);
}

.mnp-compatibility-header {
    background: var(--np-gradient-mystical);
    padding: 50px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.mnp-compatibility-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 80%, rgba(124, 58, 237, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(236, 72, 153, 0.2) 0%, transparent 50%);
}

.mnp-hearts-animation {
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.mnp-hearts-animation .mnp-heart {
    font-size: 2rem;
    display: inline-block;
    animation: np-heartbeat 1.5s ease-in-out infinite;
    margin: 0 5px;
}

.mnp-hearts-animation .mnp-heart:nth-child(2) {
    animation-delay: 0.3s;
}

@keyframes np-heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.mnp-compatibility-header .mnp-title {
    font-family: var(--np-font-display);
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--np-white);
    margin: 0 0 12px;
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.mnp-compatibility-header .mnp-subtitle {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    position: relative;
    z-index: 1;
}

.mnp-compatibility-form {
    padding: 40px;
    background: var(--np-white);
}

.mnp-compatibility-columns {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 30px;
    align-items: start;
    margin-bottom: 35px;
}

.mnp-person-column {
    background: linear-gradient(145deg, var(--np-gray-100) 0%, var(--np-white) 100%);
    border: 2px solid var(--np-gray-200);
    border-radius: var(--np-radius-xl);
    padding: 30px;
    transition: var(--np-transition);
}

.mnp-person-column:hover {
    border-color: var(--np-primary-light);
    box-shadow: var(--np-shadow-md), 0 0 20px rgba(124, 58, 237, 0.1);
}

.mnp-person-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--np-gray-200);
}

.mnp-person-header .mnp-person-icon {
    font-size: 2rem;
    background: var(--np-gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mnp-person-header h3 {
    font-family: var(--np-font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--np-gray-900);
    margin: 0;
}

.mnp-connection-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 60px;
}

.mnp-connection-symbol .mnp-symbol {
    font-size: 3rem;
    color: var(--np-primary);
    text-shadow: 0 0 20px rgba(124, 58, 237, 0.4);
    animation: np-rotate-pulse 3s ease-in-out infinite;
}

@keyframes np-rotate-pulse {
    0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.8; }
    50% { transform: rotate(180deg) scale(1.1); opacity: 1; }
}

.mnp-form-group {
    margin-bottom: 20px;
}

.mnp-form-group:last-child {
    margin-bottom: 0;
}

.mnp-form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--np-gray-700);
    margin-bottom: 10px;
}

.mnp-form-group .mnp-input,
.mnp-form-group input[type="text"],
.mnp-form-group input[type="date"],
.mnp-form-group input[type="email"],
.mnp-compatibility input,
.mnp-daily input,
.mnp-calculator input,
.mnp-map input {
    width: 100%;
    padding: 16px 20px;
    border: 2px solid var(--np-gray-300);
    border-radius: var(--np-radius-lg);
    font-size: 1rem;
    font-family: var(--np-font-body);
    transition: var(--np-transition);
    background: var(--np-white);
    color: var(--np-gray-800);
    box-sizing: border-box;
}

.mnp-form-group .mnp-input:hover,
.mnp-compatibility input:hover,
.mnp-daily input:hover {
    border-color: var(--np-gray-400);
}

.mnp-form-group .mnp-input:focus,
.mnp-compatibility input:focus,
.mnp-daily input:focus {
    outline: none;
    border-color: var(--np-primary);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.15), var(--np-shadow-sm);
}

.mnp-form-group .mnp-input::placeholder {
    color: var(--np-gray-500);
}

/* Compatibility Type Selection */
.mnp-compatibility-type {
    margin-bottom: 35px;
}

.mnp-compatibility-type > label {
    display: block;
    font-weight: 600;
    font-size: 1rem;
    color: var(--np-gray-700);
    margin-bottom: 16px;
    text-align: center;
}

.mnp-type-options {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.mnp-type-option {
    cursor: pointer;
    margin: 0;
}

.mnp-type-option input {
    display: none;
}

.mnp-type-option .mnp-option-content {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    background: var(--np-gray-100);
    border: 2px solid var(--np-gray-300);
    border-radius: var(--np-radius-full);
    transition: var(--np-transition);
}

.mnp-type-option:hover .mnp-option-content {
    border-color: var(--np-primary-light);
    background: var(--np-white);
}

.mnp-type-option input:checked + .mnp-option-content {
    background: var(--np-gradient-primary);
    border-color: var(--np-primary);
    color: var(--np-white);
    box-shadow: var(--np-shadow-md), 0 0 20px rgba(124, 58, 237, 0.3);
}

.mnp-option-icon {
    font-size: 1.3rem;
}

.mnp-option-label {
    font-weight: 600;
    font-size: 0.95rem;
}

/* Submit Button */
.mnp-submit-btn,
.mnp-compatibility button[type="submit"],
.mnp-daily button[type="submit"],
.mnp-calculator button[type="submit"],
.mnp-map button[type="submit"] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 20px 40px;
    background: var(--np-gradient-primary);
    color: var(--np-white);
    border: none;
    border-radius: var(--np-radius-xl);
    font-size: 1.15rem;
    font-weight: 600;
    font-family: var(--np-font-body);
    cursor: pointer;
    transition: var(--np-transition);
    box-shadow: var(--np-shadow-md);
    position: relative;
    overflow: hidden;
}

.mnp-submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s ease;
}

.mnp-submit-btn:hover::before {
    left: 100%;
}

.mnp-submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--np-shadow-xl), 0 0 40px rgba(124, 58, 237, 0.4);
}

.mnp-submit-btn:active {
    transform: translateY(-1px);
}

.mnp-btn-icon {
    font-size: 1.3rem;
}

/* Spinner */
.mnp-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--np-white);
    border-radius: 50%;
    animation: np-spin 0.8s linear infinite;
}

/* =================================================================
   Daily Number Widget
   ================================================================= */
.mnp-daily {
    font-family: var(--np-font-body);
    color: var(--np-gray-800);
    max-width: 600px;
    margin: 40px auto;
    background: var(--np-white);
    border-radius: var(--np-radius-2xl);
    box-shadow: var(--np-shadow-xl);
    overflow: hidden;
    position: relative;
}

.mnp-daily::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--np-gradient-gold);
}

.mnp-daily-header {
    background: var(--np-gradient-mystical);
    padding: 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.mnp-daily-header::before {
    content: '☀';
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 2.5rem;
    opacity: 0.15;
    animation: np-float 4s ease-in-out infinite;
}

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

.mnp-daily-header .mnp-title {
    font-family: var(--np-font-display);
    font-size: 2rem;
    font-weight: 600;
    color: var(--np-white);
    margin: 0 0 10px;
}

.mnp-daily-header .mnp-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.mnp-daily-form {
    padding: 35px;
}

.mnp-daily-number-display {
    text-align: center;
    padding: 50px 40px;
    background: linear-gradient(135deg, var(--np-gray-100) 0%, var(--np-white) 100%);
}

.mnp-daily-number {
    font-family: var(--np-font-numbers);
    font-size: 6rem;
    font-weight: 700;
    background: var(--np-gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 20px;
    text-shadow: 0 4px 30px rgba(245, 158, 11, 0.3);
}

.mnp-daily-name {
    font-family: var(--np-font-display);
    font-size: 1.8rem;
    color: var(--np-gray-800);
    margin: 0 0 10px;
}

.mnp-daily-date {
    font-size: 1rem;
    color: var(--np-gray-600);
}

.mnp-daily-meaning {
    padding: 35px;
    background: var(--np-white);
    border-top: 1px solid var(--np-gray-200);
}

.mnp-daily-meaning h4 {
    font-family: var(--np-font-display);
    font-size: 1.3rem;
    color: var(--np-gray-800);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mnp-daily-meaning p {
    color: var(--np-gray-700);
    line-height: 1.7;
    margin: 0;
}

.mnp-daily-activities {
    padding: 35px;
    background: var(--np-gray-100);
}

.mnp-daily-activities h4 {
    font-family: var(--np-font-display);
    font-size: 1.2rem;
    color: var(--np-gray-800);
    margin: 0 0 20px;
    text-align: center;
}

.mnp-activities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
}

.mnp-activity-item {
    background: var(--np-white);
    padding: 20px 16px;
    border-radius: var(--np-radius-lg);
    text-align: center;
    transition: var(--np-transition);
    border: 2px solid transparent;
}

.mnp-activity-item:hover {
    border-color: var(--np-primary-light);
    transform: translateY(-3px);
    box-shadow: var(--np-shadow-md);
}

.mnp-activity-item.favorable {
    border-left: 4px solid var(--np-success);
}

.mnp-activity-item.unfavorable {
    border-left: 4px solid var(--np-danger);
}

.mnp-activity-icon {
    font-size: 2rem;
    margin-bottom: 10px;
    display: block;
}

.mnp-activity-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--np-gray-700);
}

/* =================================================================
   Calculator Widget
   ================================================================= */
.mnp-calculator {
    font-family: var(--np-font-body);
    max-width: 700px;
    margin: 40px auto;
    background: var(--np-white);
    border-radius: var(--np-radius-2xl);
    box-shadow: var(--np-shadow-xl);
    overflow: hidden;
    position: relative;
    color: var(--np-gray-800);
}

.mnp-calculator-form {
    padding: 40px;
    color: var(--np-gray-800);
}

.mnp-calculator::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--np-gradient-primary);
}

.mnp-calculator-header {
    background: var(--np-gradient-mystical);
    padding: 45px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.mnp-calculator-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 60%);
    animation: np-rotate-slow 20s linear infinite;
}

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

.mnp-calculator-header .mnp-icon {
    font-size: 3.5rem;
    margin-bottom: 16px;
    display: block;
    filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.3));
    position: relative;
    z-index: 1;
}

.mnp-calculator-header .mnp-title {
    font-family: var(--np-font-display);
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--np-white);
    margin: 0 0 10px;
    position: relative;
    z-index: 1;
}

.mnp-calculator-header .mnp-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    position: relative;
    z-index: 1;
}

/* Credit Cost Badge */
.mnp-credit-cost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 20px;
    margin-top: 15px;
    position: relative;
    z-index: 1;
}

.mnp-credit-cost .mnp-cost-icon {
    font-size: 1rem;
}

.mnp-credit-cost .mnp-cost-text {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--np-gold);
}

.mnp-calculator-form .mnp-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.mnp-calculator-result {
    display: none;
    padding: 40px;
    background: linear-gradient(135deg, var(--np-gray-100) 0%, var(--np-white) 100%);
    border-top: 1px solid var(--np-gray-200);
    color: var(--np-gray-800);
}

/* Classe genérica de resultado (usada em calculator, etc.) */
.mnp-result {
    padding: 40px;
    background: linear-gradient(135deg, var(--np-gray-100) 0%, var(--np-white) 100%);
    border-top: 1px solid var(--np-gray-200);
    color: var(--np-gray-800) !important;
}

/* Títulos dentro do resultado */
.mnp-result h2,
.mnp-result h3,
.mnp-result h4,
.mnp-result h5,
.mnp-result-title,
.mnp-result-description h4,
.mnp-result-details h5,
.mnp-calculation-breakdown h4 {
    color: var(--np-gray-800) !important;
}

.mnp-result p,
.mnp-result li,
.mnp-result span:not(.mnp-number-value),
.mnp-description-text,
.mnp-interpretation-text {
    color: var(--np-gray-700) !important;
}

/* Área de resultado - garantir cores */
.mnp-result .mnp-result-header h3 {
    color: var(--np-primary-dark) !important;
    font-size: 1.5rem;
    margin-top: 10px;
}

.mnp-result .mnp-result-keywords {
    color: var(--np-gray-600) !important;
}

.mnp-result .mnp-detail-item h5 {
    color: var(--np-gray-800) !important;
    font-size: 1rem;
    margin-bottom: 12px;
}

.mnp-result .mnp-detail-item ul {
    color: var(--np-gray-700) !important;
}

.mnp-result .mnp-detail-item li {
    color: var(--np-gray-700) !important;
    padding: 6px 0;
}

.mnp-result .mnp-breakdown-content {
    color: var(--np-gray-700) !important;
}

.mnp-calculator-result.active {
    display: block;
    animation: np-fadeIn 0.4s ease;
}

@keyframes np-fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.mnp-result-number-hero {
    text-align: center;
    padding: 40px;
    background: var(--np-gradient-mystical);
    border-radius: var(--np-radius-xl);
    margin-bottom: 30px;
}

.mnp-result-number {
    font-family: var(--np-font-numbers);
    font-size: 5rem;
    font-weight: 700;
    color: var(--np-white);
    line-height: 1;
    margin-bottom: 10px;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.mnp-result-label {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--np-font-display);
}

/* =================================================================
   Map Widget
   ================================================================= */
.mnp-map {
    font-family: var(--np-font-body);
    max-width: 900px;
    margin: 40px auto;
    background: var(--np-white);
    border-radius: var(--np-radius-2xl);
    box-shadow: var(--np-shadow-xl);
    overflow: hidden;
    position: relative;
    color: var(--np-gray-800);
}

.mnp-map::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--np-primary), var(--np-gold), var(--np-teal), var(--np-rose));
}

.mnp-map-header {
    background: var(--np-gradient-mystical);
    padding: 50px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.mnp-map-header .mnp-icon {
    font-size: 3.5rem;
    margin-bottom: 16px;
    display: block;
}

.mnp-map-header .mnp-title {
    font-family: var(--np-font-display);
    font-size: 2.3rem;
    font-weight: 600;
    color: var(--np-white);
    margin: 0 0 12px;
}

.mnp-map-header .mnp-subtitle {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.mnp-map-form {
    padding: 40px;
}

.mnp-map-result {
    display: none;
    padding: 40px;
}

.mnp-map-result.active {
    display: block;
}

.mnp-numbers-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.mnp-number-card {
    background: var(--np-gradient-mystical);
    border-radius: var(--np-radius-xl);
    padding: 25px 20px;
    text-align: center;
    transition: var(--np-transition);
}

.mnp-number-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--np-shadow-lg), 0 0 30px rgba(124, 58, 237, 0.3);
}

.mnp-number-card .mnp-number {
    font-family: var(--np-font-numbers);
    font-size: 3rem;
    font-weight: 700;
    color: var(--np-gold-light);
    line-height: 1;
    margin-bottom: 8px;
}

.mnp-number-card .mnp-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* =================================================================
   Compatibility Result Styles
   ================================================================= */
.mnp-compatibility-result {
    padding: 40px;
    background: linear-gradient(180deg, var(--np-gray-100) 0%, var(--np-white) 100%);
    border-radius: var(--np-radius-xl);
    margin-top: 20px;
}

.mnp-score-section {
    text-align: center;
    padding: 40px;
    background: var(--np-white);
    border-radius: var(--np-radius-xl);
    box-shadow: var(--np-shadow-md);
    margin-bottom: 40px;
}

.mnp-score-circle {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto 25px;
}

.mnp-score-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.mnp-score-circle .mnp-score-bg {
    fill: none;
    stroke: var(--np-gray-200);
    stroke-width: 8;
}

.mnp-score-circle .mnp-score-progress {
    fill: none;
    stroke: #7C3AED;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    transition: stroke-dashoffset 1.5s ease;
}

.mnp-score-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.mnp-score-number {
    font-family: var(--np-font-numbers);
    font-size: 3.5rem;
    font-weight: 700;
    background: var(--np-gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.mnp-score-label {
    font-size: 1.2rem;
    color: var(--np-gray-600);
}

.mnp-score-rating {
    font-family: var(--np-font-display);
    font-size: 1.8rem;
    color: var(--np-gray-800);
    margin: 0 0 12px;
}

.mnp-score-description {
    color: var(--np-gray-600);
    font-size: 1.05rem;
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Comparison Grid */
.mnp-comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 40px;
}

.mnp-comparison-card {
    background: var(--np-white);
    border-radius: var(--np-radius-xl);
    padding: 30px;
    box-shadow: var(--np-shadow-sm);
    border: 2px solid var(--np-gray-200);
}

.mnp-comparison-card h4 {
    font-family: var(--np-font-display);
    font-size: 1.3rem;
    color: var(--np-gray-800);
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mnp-comparison-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--np-gray-200);
}

.mnp-comparison-item:last-child {
    border-bottom: none;
}

.mnp-comparison-item .mnp-aspect {
    font-weight: 500;
    color: var(--np-gray-700);
}

.mnp-comparison-item .mnp-numbers {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mnp-comparison-item .mnp-number {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--np-gradient-primary);
    color: var(--np-white);
    border-radius: var(--np-radius-md);
    font-weight: 700;
    font-size: 0.95rem;
}

.mnp-comparison-item .mnp-match-icon {
    font-size: 1.2rem;
}

/* New Comparison Grid Styles */
#mnp-comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

#mnp-comparison-grid .mnp-comparison-item {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: var(--np-white);
    border-radius: var(--np-radius-lg);
    border: 1px solid var(--np-gray-200);
    box-shadow: var(--np-shadow-sm);
    transition: var(--np-transition);
}

#mnp-comparison-grid .mnp-comparison-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--np-shadow-md);
}

.mnp-comp-type {
    font-family: var(--np-font-display);
    font-size: 1.1rem;
    color: var(--np-primary);
    margin-bottom: 12px;
    font-weight: 600;
}

.mnp-comp-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
}

.mnp-comp-numbers .mnp-num {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--np-gradient-primary);
    color: var(--np-white);
    border-radius: var(--np-radius-md);
    font-family: var(--np-font-numbers);
    font-size: 1.5rem;
    font-weight: 700;
}

.mnp-comp-numbers .mnp-vs {
    color: var(--np-gray-500);
    font-size: 1.2rem;
}

.mnp-comp-score {
    text-align: center;
    font-family: var(--np-font-numbers);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--np-primary);
    margin-bottom: 8px;
}

.mnp-comp-rating {
    text-align: center;
    font-size: 0.9rem;
    color: var(--np-gold);
    font-weight: 600;
    margin-bottom: 10px;
}

.mnp-comp-desc {
    font-size: 0.9rem;
    color: var(--np-gray-600);
    line-height: 1.5;
    text-align: center;
}

/* Strengths, Challenges, Advice Lists */
.mnp-strengths-section,
.mnp-challenges-section,
.mnp-advice-section {
    background: var(--np-white);
    border-radius: var(--np-radius-xl);
    padding: 30px;
    margin-bottom: 25px;
    box-shadow: var(--np-shadow-sm);
}

.mnp-section-title {
    font-family: var(--np-font-display);
    font-size: 1.3rem;
    color: var(--np-gray-800);
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mnp-section-icon {
    font-size: 1.4rem;
}

.mnp-strength-item,
.mnp-challenge-item,
.mnp-advice-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--np-gray-100);
}

.mnp-strength-item:last-child,
.mnp-challenge-item:last-child,
.mnp-advice-item:last-child {
    border-bottom: none;
}

.mnp-strength-item .mnp-icon,
.mnp-challenge-item .mnp-icon,
.mnp-advice-item .mnp-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.mnp-strength-content,
.mnp-challenge-content,
.mnp-advice-content {
    flex: 1;
    color: var(--np-gray-700);
    line-height: 1.5;
}

.mnp-strength-content strong,
.mnp-challenge-content strong,
.mnp-advice-content strong {
    color: var(--np-gray-800);
}

.mnp-strength-item span:last-child,
.mnp-challenge-item span:last-child,
.mnp-advice-item span:last-child {
    color: var(--np-gray-700);
    line-height: 1.5;
}

/* Result Actions */
.mnp-result-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    padding: 20px 0;
}

.mnp-result-actions .mnp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--np-radius-full);
    font-weight: 600;
    cursor: pointer;
    transition: var(--np-transition);
}

.mnp-result-actions .mnp-btn-secondary {
    background: var(--np-gray-100);
    color: var(--np-gray-700);
    border: 2px solid var(--np-gray-200);
}

.mnp-result-actions .mnp-btn-secondary:hover {
    background: var(--np-gray-200);
    border-color: var(--np-gray-300);
}

/* =================================================================
   Responsive Styles for Shortcodes
   ================================================================= */
@media (max-width: 768px) {
    .mnp-compatibility-columns {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .mnp-connection-symbol {
        padding: 20px 0;
    }
    
    .mnp-connection-symbol .mnp-symbol {
        transform: rotate(90deg);
    }
    
    .mnp-type-options {
        flex-direction: column;
        align-items: stretch;
    }
    
    .mnp-type-option .mnp-option-content {
        justify-content: center;
    }
    
    .mnp-compatibility-header .mnp-title,
    .mnp-daily-header .mnp-title,
    .mnp-calculator-header .mnp-title,
    .mnp-map-header .mnp-title {
        font-size: 1.8rem;
    }
    
    .mnp-comparison-grid {
        grid-template-columns: 1fr;
    }
    
    .mnp-calculator-form .mnp-form-row {
        grid-template-columns: 1fr;
    }
    
    .mnp-numbers-overview {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .mnp-compatibility-form,
    .mnp-daily-form,
    .mnp-calculator-form,
    .mnp-map-form {
        padding: 25px;
    }
    
    .mnp-person-column {
        padding: 20px;
    }
    
    .mnp-submit-btn {
        padding: 16px 30px;
        font-size: 1rem;
    }
    
    .mnp-daily-number {
        font-size: 4.5rem;
    }
    
    .mnp-result-number {
        font-size: 4rem;
    }
    
    .mnp-activities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mnp-numbers-overview {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    
    .mnp-number-card .mnp-number {
        font-size: 2.2rem;
    }
}

/* =================================================================
   Print Styles
   ================================================================= */
@media print {
    .np-container {
        max-width: 100%;
        padding: 0;
    }
    
    .np-card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
    
    .np-btn,
    .np-actions {
        display: none !important;
    }
    
    .np-number-hero,
    .np-card-header {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* =================================================================
   Authentication Styles - Login & Register
   ================================================================= */

/* Auth Container */
.np-auth-container {
    max-width: 450px;
    margin: 40px auto;
    padding: 0 20px;
}

.np-auth-box {
    background: linear-gradient(145deg, var(--np-gray-900), var(--np-dark-soft));
    border-radius: 24px;
    padding: 40px;
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(124, 58, 237, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.np-auth-box::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 30%, var(--np-primary-soft), transparent 40%);
    pointer-events: none;
}

/* Auth Header */
.np-auth-header {
    text-align: center;
    margin-bottom: 35px;
    position: relative;
    z-index: 1;
}

.np-auth-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, var(--np-primary), var(--np-secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: white;
    box-shadow: 0 10px 30px var(--np-primary-glow);
}

.np-auth-header h2 {
    font-family: var(--np-font-display);
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--np-white);
    margin: 0 0 8px 0;
}

.np-auth-header p {
    color: var(--np-gray-500);
    font-size: 0.95rem;
    margin: 0;
}

/* Auth Form */
.np-auth-form {
    position: relative;
    z-index: 1;
}

.np-form-group {
    margin-bottom: 20px;
}

.np-form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--np-gray-400);
    margin-bottom: 8px;
}

.np-form-group label .required {
    color: var(--np-danger);
}

.np-form-input {
    width: 100%;
    padding: 14px 16px;
    background: var(--np-gray-800);
    border: 1px solid var(--np-gray-700);
    border-radius: 12px;
    color: var(--np-white);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.np-form-input:focus {
    outline: none;
    border-color: var(--np-primary);
    box-shadow: 0 0 0 3px var(--np-primary-soft);
}

.np-form-input::placeholder {
    color: var(--np-gray-600);
}

.np-form-input.locked {
    background: var(--np-gray-900);
    border-color: var(--np-gray-700);
    color: var(--np-gray-500);
    cursor: not-allowed;
}

/* Locked Field Warning */
.np-field-locked-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 10px;
    margin-top: 8px;
}

.np-field-locked-warning .warning-icon {
    color: var(--np-warning);
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.np-field-locked-warning span {
    font-size: 0.85rem;
    color: var(--np-warning);
    line-height: 1.4;
}

/* Input Locked State */
.mnp-input.locked,
input.locked,
.np-auth-input.locked {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(79, 70, 229, 0.05) 100%);
    border: 2px solid var(--np-primary-light);
    color: var(--np-primary-dark);
    font-weight: 600;
    cursor: not-allowed;
    opacity: 1;
}

.mnp-input.locked:focus,
input.locked:focus,
.np-auth-input.locked:focus {
    box-shadow: none;
    border-color: var(--np-primary-light);
}

/* Locked Badge */
.np-locked-badge {
/* Locked Badge - Elegante */
.np-locked-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border: 1px solid #F59E0B;
    border-radius: var(--np-radius-full);
    font-size: 0.8rem;
    color: #92400E;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

.np-locked-badge .badge-icon {
    font-size: 1rem;
    filter: none;
}

.np-locked-badge .badge-text {
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}

/* User Data Info Bar (when data is locked) */
.mnp-calculator-form .np-user-data-info,
.mnp-map-form .np-user-data-info,
.mnp-daily-form .np-user-data-info,
.np-user-data-info {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 18px 24px !important;
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%) !important;
    border: 2px solid #F59E0B !important;
    border-radius: 16px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.15) !important;
}

.np-user-data-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35) !important;
    font-size: 0 !important;
}

.np-user-data-icon::before {
    content: "🔒" !important;
    font-size: 1.4rem !important;
    filter: grayscale(100%) brightness(10) !important;
}

.np-user-data-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.np-user-data-content strong {
    color: #78350F !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

.np-user-data-content span {
    color: #92400E !important;
    font-size: 0.95rem !important;
    opacity: 0.9 !important;
}

/* Locked Badge - Elegante */
.np-locked-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 18px !important;
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%) !important;
    border: 2px solid #F59E0B !important;
    border-radius: 30px !important;
    font-size: 0.85rem !important;
    color: #92400E !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25) !important;
    margin-left: auto !important;
}

.np-locked-badge .badge-icon {
    font-size: 1rem !important;
    font-weight: bold !important;
    color: #059669 !important;
}

.np-locked-badge .badge-text {
    font-size: 0.85rem !important;
    letter-spacing: 0.02em !important;
}

@media (max-width: 500px) {
    .np-user-data-info {
        flex-wrap: wrap;
    }
    
    .np-user-data-info .np-locked-badge {
        width: 100%;
        justify-content: center;
        margin-top: 8px;
        margin-left: 0;
    }
}

/* User Data Info - Compact version (for compatibility form) */
.np-user-data-info.np-compact {
    padding: 12px 16px;
    margin-bottom: 12px;
    border-radius: var(--np-radius-md);
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    border: 1px solid #FCD34D;
}

.np-user-data-info.np-compact .np-user-data-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.np-user-data-info.np-compact .np-user-data-icon::before {
    font-size: 1rem;
}

.np-user-data-info.np-compact .np-user-data-content {
    flex-direction: row;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.np-user-data-info.np-compact .np-user-data-content strong {
    font-size: 0.9rem;
    color: #78350F;
}

.np-user-data-info.np-compact .np-user-data-content span {
    font-size: 0.8rem;
    color: #92400E;
}

.np-user-data-info.np-compact .np-user-data-content span::before {
    content: "•";
    margin-right: 10px;
    color: var(--np-primary-light);
}

/* First use info message */
.np-field-first-use-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(20, 184, 166, 0.08) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--np-radius-sm);
    font-size: 0.8rem;
    color: var(--np-success);
}

.np-field-first-use-info .info-icon {
    flex-shrink: 0;
}

/* Submit Button */
.np-auth-submit {
    width: 100%;
    padding: 16px 24px;
    margin-top: 10px;
    background: linear-gradient(135deg, var(--np-primary), var(--np-secondary));
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.np-auth-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px var(--np-primary-glow);
}

.np-auth-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.np-auth-submit .spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: np-spin 0.8s linear infinite;
}

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

/* Auth Messages */
.np-auth-message {
    padding: 14px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}

.np-auth-message.success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: var(--np-success);
}

.np-auth-message.error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--np-danger);
}

/* Auth Footer / Switch */
.np-auth-footer {
    text-align: center;
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid var(--np-gray-800);
    position: relative;
    z-index: 1;
}

.np-auth-footer p {
    color: var(--np-gray-500);
    font-size: 0.9rem;
    margin: 0;
}

.np-auth-switch {
    color: var(--np-primary-light);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.np-auth-switch:hover {
    color: var(--np-primary);
    text-decoration: underline;
}

/* =================================================================
   User Dashboard Styles
   ================================================================= */

.np-user-dashboard {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
}

/* Welcome Section */
.np-dashboard-welcome {
    background: linear-gradient(135deg, var(--np-primary-dark), var(--np-secondary-dark));
    border-radius: 24px;
    padding: 35px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

.np-dashboard-welcome::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 60%);
    pointer-events: none;
}

.np-welcome-content {
    display: flex;
    align-items: center;
    gap: 25px;
    position: relative;
    z-index: 1;
}

.np-welcome-avatar {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0;
}

.np-welcome-info h2 {
    font-family: var(--np-font-display);
    font-size: 1.6rem;
    color: white;
    margin: 0 0 5px 0;
}

.np-welcome-info p {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    font-size: 0.95rem;
}

/* Dashboard Stats */
.np-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.np-stat-card {
    background: linear-gradient(145deg, var(--np-gray-900), var(--np-dark-soft));
    border-radius: 16px;
    padding: 25px;
    border: 1px solid var(--np-gray-800);
    display: flex;
    align-items: center;
    gap: 15px;
}

.np-stat-icon {
    width: 55px;
    height: 55px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.np-stat-icon.credits {
    background: linear-gradient(135deg, var(--np-gold), var(--np-gold-dark));
}

.np-stat-icon.destiny {
    background: linear-gradient(135deg, var(--np-primary), var(--np-secondary));
}

.np-stat-icon.birth {
    background: linear-gradient(135deg, var(--np-teal), #0D9488);
}

.np-stat-info h4 {
    font-size: 0.85rem;
    color: var(--np-gray-500);
    margin: 0 0 5px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.np-stat-info .value {
    font-family: var(--np-font-display);
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--np-white);
}

/* User Info Card */
.np-dashboard-info {
    background: linear-gradient(145deg, var(--np-gray-900), var(--np-dark-soft));
    border-radius: 20px;
    padding: 30px;
    border: 1px solid var(--np-gray-800);
    margin-bottom: 30px;
}

.np-dashboard-info h3 {
    font-family: var(--np-font-display);
    font-size: 1.2rem;
    color: var(--np-white);
    margin: 0 0 25px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.np-dashboard-info h3 i {
    color: var(--np-primary-light);
}

.np-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.np-info-item {
    padding: 15px;
    background: var(--np-gray-800);
    border-radius: 12px;
}

.np-info-item label {
    display: block;
    font-size: 0.8rem;
    color: var(--np-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.np-info-item span {
    font-size: 1rem;
    color: var(--np-white);
    font-weight: 500;
}

.np-info-item .locked-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: var(--np-warning);
    margin-left: 10px;
}

/* Dashboard Actions */
.np-dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.np-dashboard-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.np-dashboard-btn.primary {
    background: linear-gradient(135deg, var(--np-primary), var(--np-secondary));
    color: white;
}

.np-dashboard-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px var(--np-primary-glow);
}

.np-dashboard-btn.secondary {
    background: var(--np-gray-800);
    color: var(--np-gray-300);
    border: 1px solid var(--np-gray-700);
}

.np-dashboard-btn.secondary:hover {
    background: var(--np-gray-700);
    color: var(--np-white);
}

/* =================================================================
   Credits Balance Widget
   ================================================================= */

.np-credits-balance {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.1));
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 12px;
}

.np-credits-balance .credit-icon {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--np-gold), var(--np-gold-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: white;
}

.np-credits-balance .credit-amount {
    font-family: var(--np-font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--np-gold);
}

.np-credits-balance .credit-label {
    font-size: 0.85rem;
    color: var(--np-gray-500);
}

/* =================================================================
   Credit Packages Page - New Layout
   ================================================================= */

.np-credits-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 60px;
}

/* Header */
.np-credits-header {
    position: relative;
    text-align: center;
    padding: 60px 20px;
    margin: -20px -20px 40px;
    background: var(--np-gradient-mystical);
    border-radius: 0 0 30px 30px;
    overflow: hidden;
}

.np-credits-header-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.np-floating-gems {
    position: absolute;
    width: 100%;
    height: 100%;
}

.np-gem {
    position: absolute;
    font-size: 24px;
    animation: floatGem 6s ease-in-out infinite;
    opacity: 0.6;
}

.np-gem-1 { top: 20%; left: 10%; animation-delay: 0s; }
.np-gem-2 { top: 60%; left: 85%; animation-delay: 1.5s; }
.np-gem-3 { top: 30%; left: 75%; animation-delay: 3s; }
.np-gem-4 { top: 70%; left: 20%; animation-delay: 4.5s; }

@keyframes floatGem {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(10deg); }
}

.np-credits-header-content {
    position: relative;
    z-index: 1;
}

.np-credits-title {
    font-family: var(--np-font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin: 0 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.np-title-icon {
    font-size: 2.5rem;
}

.np-credits-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    max-width: 500px;
    margin: 0 auto;
}

/* Balance Card */
.np-balance-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, var(--np-gray-900), var(--np-dark-soft));
    border: 2px solid var(--np-primary);
    border-radius: 20px;
    padding: 25px 35px;
    margin: -50px auto 40px;
    max-width: 400px;
    position: relative;
    z-index: 10;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.np-balance-icon-wrap {
    width: 70px;
    height: 70px;
    background: var(--np-gradient-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.np-balance-icon {
    font-size: 32px;
}

.np-balance-info {
    display: flex;
    flex-direction: column;
}

.np-balance-label {
    font-size: 0.85rem;
    color: var(--np-gray-500);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.np-balance-amount {
    font-family: var(--np-font-numbers);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--np-gold);
    line-height: 1.1;
}

.np-balance-unit {
    font-size: 0.9rem;
    color: var(--np-gray-400);
}

.np-balance-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--np-primary-glow) 0%, transparent 70%);
    opacity: 0.3;
    pointer-events: none;
    z-index: -1;
}

/* Section Header */
.np-packages-section-header {
    text-align: center;
    margin-bottom: 40px;
}

.np-packages-title {
    font-family: var(--np-font-display);
    font-size: 1.8rem;
    color: var(--np-white);
    margin: 0 0 10px;
}

.np-packages-description {
    color: var(--np-gray-500);
    font-size: 1rem;
    margin: 0;
}

/* Packages Grid */
.np-packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 50px;
}

.np-packages-grid.np-columns-1 { grid-template-columns: 1fr; max-width: 350px; margin-left: auto; margin-right: auto; }
.np-packages-grid.np-columns-2 { grid-template-columns: repeat(2, 1fr); }
.np-packages-grid.np-columns-3 { grid-template-columns: repeat(3, 1fr); }
.np-packages-grid.np-columns-4 { grid-template-columns: repeat(4, 1fr); }

/* Package Card */
.np-package-card {
    background: linear-gradient(145deg, var(--np-gray-900), var(--np-dark-soft));
    border: 2px solid var(--np-gray-800);
    border-radius: 24px;
    padding: 30px;
    text-align: center;
    position: relative;
    transition: all 0.4s ease;
    overflow: hidden;
}

.np-package-card:hover {
    transform: translateY(-8px);
    border-color: var(--np-primary);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

.np-package-card.np-popular {
    border-color: var(--np-gold);
    transform: scale(1.05);
}

.np-package-card.np-popular:hover {
    transform: scale(1.05) translateY(-8px);
}

.np-package-card.np-best-value {
    border-color: var(--np-success);
}

/* Ribbons */
.np-package-ribbon {
    position: absolute;
    top: 20px;
    right: -35px;
    transform: rotate(45deg);
    padding: 8px 40px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 5;
}

.np-ribbon-popular {
    background: var(--np-gradient-gold);
    color: white;
}

.np-ribbon-best {
    background: linear-gradient(135deg, var(--np-success), #059669);
    color: white;
}

.np-ribbon-sale {
    background: linear-gradient(135deg, var(--np-danger), #dc2626);
    color: white;
}

/* Package Header */
.np-package-card .np-package-header {
    margin-bottom: 25px;
}

.np-package-card .np-package-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    background: var(--np-gradient-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.np-package-card .np-package-credits {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.np-credits-number {
    font-family: var(--np-font-numbers);
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--np-gold);
    line-height: 1;
}

.np-credits-label {
    font-size: 1rem;
    color: var(--np-gray-400);
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Package Body */
.np-package-card .np-package-body {
    margin-bottom: 25px;
}

.np-package-pricing {
    margin-bottom: 10px;
}

.np-price-original {
    font-size: 1rem;
    color: var(--np-gray-600);
    text-decoration: line-through;
    display: block;
    margin-bottom: 5px;
}

.np-price-current {
    font-size: 2rem;
    font-weight: 700;
    color: var(--np-white);
}

.np-package-per-credit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: 15px;
}

.np-per-credit-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--np-primary-light);
}

.np-per-credit-label {
    font-size: 0.85rem;
    color: var(--np-gray-500);
}

.np-package-savings {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(16, 185, 129, 0.15);
    padding: 6px 14px;
    border-radius: 20px;
}

.np-savings-badge {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--np-success);
}

.np-savings-text {
    font-size: 0.8rem;
    color: var(--np-success);
}

/* Package Button */
.np-package-card .np-package-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    background: var(--np-gradient-gold);
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.np-package-card .np-package-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(245, 158, 11, 0.35);
    color: white;
}

.np-package-card .np-package-btn .np-btn-icon {
    font-size: 1.1rem;
}

.np-package-glow {
    position: absolute;
    bottom: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 150%;
    height: 100%;
    background: radial-gradient(ellipse, var(--np-primary-glow) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.np-package-card:hover .np-package-glow {
    opacity: 0.5;
}

/* Benefits Section */
.np-credits-benefits {
    background: linear-gradient(145deg, var(--np-gray-900), var(--np-dark-soft));
    border: 1px solid var(--np-gray-800);
    border-radius: 24px;
    padding: 40px;
    margin-bottom: 30px;
}

.np-benefits-title {
    font-family: var(--np-font-display);
    font-size: 1.4rem;
    color: var(--np-white);
    text-align: center;
    margin: 0 0 30px;
}

.np-benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
}

.np-benefit-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    background: rgba(124, 58, 237, 0.08);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.np-benefit-item:hover {
    background: rgba(124, 58, 237, 0.15);
    transform: translateX(5px);
}

.np-benefit-icon {
    font-size: 1.5rem;
}

.np-benefit-text {
    font-size: 0.95rem;
    color: var(--np-gray-300);
}

/* Guarantee Section */
.np-credits-guarantee {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 16px;
    padding: 25px 30px;
}

.np-guarantee-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.np-guarantee-content h4 {
    font-size: 1.1rem;
    color: var(--np-success);
    margin: 0 0 5px;
}

.np-guarantee-content p {
    font-size: 0.9rem;
    color: var(--np-gray-400);
    margin: 0;
}

/* No Packages */
.np-no-packages {
    text-align: center;
    padding: 60px 30px;
    background: linear-gradient(145deg, var(--np-gray-900), var(--np-dark-soft));
    border-radius: 20px;
    border: 1px solid var(--np-gray-800);
}

.np-no-packages-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 15px;
}

.np-no-packages p {
    color: var(--np-gray-500);
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .np-credits-title {
        font-size: 1.8rem;
        flex-direction: column;
        gap: 10px;
    }
    
    .np-balance-card {
        flex-direction: column;
        text-align: center;
        margin-top: -30px;
    }
    
    .np-packages-grid.np-columns-3,
    .np-packages-grid.np-columns-4 {
        grid-template-columns: 1fr;
    }
    
    .np-package-card.np-popular {
        transform: none;
    }
    
    .np-package-card.np-popular:hover {
        transform: translateY(-8px);
    }
    
    .np-benefits-grid {
        grid-template-columns: 1fr;
    }
    
    .np-credits-guarantee {
        flex-direction: column;
        text-align: center;
    }
}

/* Legacy support - old classes */
.np-credit-packages {
    padding: 40px 20px;
}

.np-credit-packages h2 {
    font-family: var(--np-font-display);
    font-size: 2rem;
    text-align: center;
    color: var(--np-white);
    margin: 0 0 10px 0;
}

.np-credit-packages > p {
    text-align: center;
    color: var(--np-gray-500);
    margin: 0 0 40px 0;
}

.np-packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
}

.np-package-card {
    background: linear-gradient(145deg, var(--np-gray-900), var(--np-dark-soft));
    border-radius: 20px;
    padding: 35px;
    border: 1px solid var(--np-gray-800);
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
}

.np-package-card:hover {
    transform: translateY(-5px);
    border-color: var(--np-primary);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.np-package-card.featured {
    border-color: var(--np-gold);
    background: linear-gradient(145deg, var(--np-gray-800), var(--np-gray-900));
}

.np-package-card.featured::before {
    content: 'Mais Popular';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--np-gold), var(--np-gold-dark));
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.np-package-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, var(--np-gold), var(--np-gold-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
}

.np-package-card h3 {
    font-family: var(--np-font-display);
    font-size: 1.4rem;
    color: var(--np-white);
    margin: 0 0 10px 0;
}

.np-package-credits {
    font-size: 3rem;
    font-weight: 700;
    color: var(--np-gold);
    line-height: 1;
    margin-bottom: 5px;
}

.np-package-credits span {
    font-size: 1rem;
    color: var(--np-gray-500);
    font-weight: 400;
}

.np-package-price {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--np-white);
    margin: 15px 0 20px;
}

.np-package-price small {
    font-size: 0.85rem;
    color: var(--np-gray-500);
    font-weight: 400;
}

.np-package-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--np-primary), var(--np-secondary));
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.np-package-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px var(--np-primary-glow);
    color: white;
}

/* =================================================================
   Login Required Message
   ================================================================= */

.np-login-required {
    text-align: center;
    padding: 60px 30px;
    background: linear-gradient(145deg, var(--np-gray-900), var(--np-dark-soft));
    border-radius: 20px;
    border: 1px solid var(--np-gray-800);
    max-width: 500px;
    margin: 40px auto;
}

.np-login-required-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    background: linear-gradient(135deg, var(--np-primary-soft), rgba(79, 70, 229, 0.1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: var(--np-primary-light);
}

.np-login-required h3 {
    font-family: var(--np-font-display);
    font-size: 1.5rem;
    color: var(--np-white);
    margin: 0 0 12px 0;
}

.np-login-required p {
    color: var(--np-gray-500);
    margin: 0 0 25px 0;
    line-height: 1.6;
}

.np-login-required-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--np-primary), var(--np-secondary));
    color: white;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.np-login-required-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px var(--np-primary-glow);
    color: white;
}

/* =================================================================
   Insufficient Credits Message
   ================================================================= */

.np-insufficient-credits {
    text-align: center;
    padding: 50px 30px;
    background: linear-gradient(145deg, rgba(245, 158, 11, 0.05), rgba(217, 119, 6, 0.03));
    border-radius: 20px;
    border: 1px solid rgba(245, 158, 11, 0.2);
    max-width: 500px;
    margin: 40px auto;
}

.np-insufficient-credits-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: var(--np-gold);
}

.np-insufficient-credits h3 {
    font-family: var(--np-font-display);
    font-size: 1.5rem;
    color: var(--np-white);
    margin: 0 0 12px 0;
}

.np-insufficient-credits p {
    color: var(--np-gray-500);
    margin: 0 0 20px 0;
}

.np-credits-needed {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 30px;
    margin-bottom: 20px;
}

.np-credits-needed span {
    color: var(--np-gold);
    font-weight: 600;
}

.np-buy-credits-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--np-gold), var(--np-gold-dark));
    color: white;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.np-buy-credits-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(245, 158, 11, 0.4);
    color: white;
}

/* =================================================================
   Auth Responsive
   ================================================================= */

@media (max-width: 576px) {
    .np-auth-box {
        padding: 30px 25px;
    }
    
    .np-auth-header h2 {
        font-size: 1.5rem;
    }
    
    .np-welcome-content {
        flex-direction: column;
        text-align: center;
    }
    
    .np-dashboard-stats {
        grid-template-columns: 1fr;
    }
    
    .np-info-grid {
        grid-template-columns: 1fr;
    }
    
    .np-dashboard-actions {
        flex-direction: column;
    }
    
    .np-dashboard-btn {
        justify-content: center;
    }
}

/* =================================================================
   Alert Messages
   ================================================================= */
.mnp-alert {
    padding: 16px 20px;
    border-radius: var(--np-radius-md);
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideDown 0.3s ease;
}

.mnp-alert::before {
    font-size: 18px;
}

.mnp-alert-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #DC2626;
}

.mnp-alert-error::before {
    content: '⚠️';
}

.mnp-alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #D97706;
}

.mnp-alert-warning::before {
    content: '⚡';
}

.mnp-alert-success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #059669;
}

.mnp-alert-success::before {
    content: '✓';
}

.mnp-alert-info {
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.3);
    color: var(--np-primary);
}

.mnp-alert-info::before {
    content: 'ℹ️';
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =================================================================
   Loading Spinner
   ================================================================= */
.mnp-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.8s linear infinite;
    margin-right: 8px;
}

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

.mnp-btn-loading {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =================================================================
   Botão Bloqueado (Sem Créditos)
   ================================================================= */
.mnp-no-credits-container {
    text-align: center;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.mnp-submit-btn.mnp-btn-locked {
    background: linear-gradient(135deg, #6B6785 0%, #4A4662 100%);
    cursor: not-allowed;
    opacity: 0.85;
    position: relative;
}

.mnp-submit-btn.mnp-btn-locked:hover {
    transform: none;
    box-shadow: none;
}

.mnp-submit-btn.mnp-btn-locked .mnp-btn-icon {
    font-size: 1.2em;
    margin-right: 8px;
}

.mnp-credits-needed-text {
    font-size: 13px;
    color: var(--np-gray-600);
    background: rgba(124, 58, 237, 0.08);
    padding: 8px 16px;
    border-radius: var(--np-radius-sm);
    border: 1px solid rgba(124, 58, 237, 0.15);
    margin: 0;
}

/* Botão de Comprar Créditos - Grande e Visível */
.mnp-submit-btn.mnp-btn-buy-credits {
    background: var(--np-gradient-gold);
    color: #fff !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
    margin-top: 4px;
}

.mnp-submit-btn.mnp-btn-buy-credits:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.5);
}

.mnp-submit-btn.mnp-btn-buy-credits .mnp-btn-icon {
    font-size: 1.3em;
}

/* Animação suave de cadeado */
.mnp-btn-locked .mnp-btn-icon {
    animation: lockPulse 2s ease-in-out infinite;
}

@keyframes lockPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Animação do botão de comprar */
.mnp-btn-buy-credits .mnp-btn-icon {
    animation: cartBounce 1.5s ease-in-out infinite;
}

@keyframes cartBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

/* =================================================================
   Modal de Compra de Créditos
   ================================================================= */
.np-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.np-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 10, 30, 0.85);
    backdrop-filter: blur(8px);
}

.np-modal-container {
    position: relative;
    background: var(--np-white);
    border-radius: var(--np-radius-xl);
    box-shadow: var(--np-shadow-xl), 0 0 60px rgba(124, 58, 237, 0.3);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.np-modal-header {
    padding: 24px 28px;
    background: var(--np-gradient-mystical);
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.np-modal-header h2 {
    margin: 0;
    font-family: var(--np-font-display);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 12px;
}

.np-modal-icon {
    font-size: 1.8rem;
}

.np-modal-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    transition: var(--np-transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.np-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.np-modal-body {
    padding: 28px;
    max-height: 50vh;
    overflow-y: auto;
}

.np-modal-loading {
    text-align: center;
    padding: 40px;
}

.np-spinner-large {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(124, 58, 237, 0.2);
    border-top-color: var(--np-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 16px;
}

.np-packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.np-package-card {
    background: var(--np-gray-100);
    border: 2px solid transparent;
    border-radius: var(--np-radius-lg);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: var(--np-transition);
    position: relative;
}

.np-package-card:hover {
    border-color: var(--np-primary-light);
    transform: translateY(-4px);
    box-shadow: var(--np-shadow-md);
}

.np-package-card.selected {
    border-color: var(--np-primary);
    background: var(--np-primary-soft);
    box-shadow: var(--np-shadow-glow);
}

.np-package-card.popular::before {
    content: '⭐ Popular';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--np-gradient-gold);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: var(--np-radius-full);
}

.np-package-credits {
    font-family: var(--np-font-numbers);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--np-primary);
    line-height: 1;
}

.np-package-credits-label {
    font-size: 12px;
    color: var(--np-gray-600);
    margin-bottom: 8px;
}

.np-package-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--np-gray-800);
}

.np-package-price del {
    color: var(--np-gray-500);
    font-size: 0.9rem;
    font-weight: 400;
}

.np-package-price ins {
    text-decoration: none;
    color: var(--np-success);
}

.np-package-badge {
    display: inline-block;
    background: var(--np-success);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--np-radius-full);
    margin-top: 8px;
}

.np-coupon-section {
    background: var(--np-gray-100);
    border-radius: var(--np-radius-md);
    padding: 16px;
}

.np-coupon-section label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--np-gray-700);
}

.np-coupon-input-group {
    display: flex;
    gap: 8px;
}

.np-coupon-input-group input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--np-gray-300);
    border-radius: var(--np-radius-sm);
    font-size: 14px;
}

.np-coupon-input-group input:focus {
    outline: none;
    border-color: var(--np-primary);
    box-shadow: 0 0 0 3px var(--np-primary-soft);
}

.np-btn-secondary {
    padding: 10px 16px;
    background: var(--np-gray-200);
    color: var(--np-gray-700);
    border: none;
    border-radius: var(--np-radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: var(--np-transition);
}

.np-btn-secondary:hover {
    background: var(--np-gray-300);
}

.np-coupon-message {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: var(--np-radius-sm);
    font-size: 13px;
}

.np-coupon-message.success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--np-success);
}

.np-coupon-message.error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--np-danger);
}

.np-modal-footer {
    padding: 20px 28px;
    background: var(--np-gray-100);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.np-btn-cancel {
    padding: 12px 24px;
    background: transparent;
    color: var(--np-gray-600);
    border: 1px solid var(--np-gray-300);
    border-radius: var(--np-radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: var(--np-transition);
}

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

.np-btn-primary {
    padding: 12px 28px;
    background: var(--np-gradient-gold);
    color: white;
    border: none;
    border-radius: var(--np-radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: var(--np-transition);
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.np-btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

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

/* Seletor de Quantidade de Créditos */
.np-credits-selector {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.05), rgba(167, 139, 250, 0.08));
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: var(--np-radius-lg);
    padding: 24px;
    margin-bottom: 24px;
    text-align: center;
}

.np-credits-selector label {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--np-gray-800);
    margin-bottom: 16px;
}

.np-credits-selector label .np-icon {
    margin-right: 8px;
}

.np-credits-input-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 16px;
}

.np-qty-btn {
    width: 48px;
    height: 48px;
    border: 2px solid var(--np-primary);
    background: white;
    color: var(--np-primary);
    font-size: 1.5rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--np-transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.np-qty-btn.np-qty-minus {
    border-radius: var(--np-radius-md) 0 0 var(--np-radius-md);
    border-right: none;
}

.np-qty-btn.np-qty-plus {
    border-radius: 0 var(--np-radius-md) var(--np-radius-md) 0;
    border-left: none;
}

.np-qty-btn:hover {
    background: var(--np-primary);
    color: white;
}

.np-credits-input-group input {
    width: 100px;
    height: 48px;
    border: 2px solid var(--np-primary);
    border-left: none;
    border-right: none;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--np-font-numbers);
    color: var(--np-primary);
    -moz-appearance: textfield;
}

.np-credits-input-group input::-webkit-outer-spin-button,
.np-credits-input-group input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.np-credits-input-group input:focus {
    outline: none;
    background: rgba(124, 58, 237, 0.05);
}

.np-credits-price-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
}

.np-price-label {
    font-size: 1rem;
    color: var(--np-gray-600);
}

.np-price-value {
    font-size: 1.75rem;
    font-weight: 700;
    font-family: var(--np-font-numbers);
    color: var(--np-success);
    background: linear-gradient(135deg, #059669, #10b981);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.np-credits-help {
    font-size: 0.85rem;
    color: var(--np-gray-500);
    margin: 0;
}

.np-credits-help strong {
    color: var(--np-primary);
}

/* Seção de Pacotes */
.np-packages-section {
    margin-bottom: 20px;
}

.np-packages-label {
    font-size: 0.9rem;
    color: var(--np-gray-600);
    margin-bottom: 12px;
    text-align: center;
}

.np-packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}

.np-no-packages {
    text-align: center;
    color: var(--np-gray-500);
    padding: 20px;
    font-size: 0.9rem;
}

/* =================================================================
   Seção de Histórico
   ================================================================= */
.mnp-history-section {
    margin-top: 30px;
    background: var(--np-gray-100);
    border-radius: var(--np-radius-lg);
    overflow: hidden;
}

.mnp-history-header {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: var(--np-transition);
}

.mnp-history-header:hover {
    background: rgba(124, 58, 237, 0.05);
}

.mnp-history-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--np-gray-700);
    display: flex;
    align-items: center;
    gap: 8px;
}

.mnp-history-toggle {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--np-gray-500);
    transition: var(--np-transition);
}

.mnp-history-toggle[aria-expanded="true"] .mnp-toggle-icon {
    transform: rotate(180deg);
}

.mnp-history-content {
    padding: 0 20px 20px;
}

.mnp-history-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mnp-history-item {
    background: white;
    border-radius: var(--np-radius-md);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: var(--np-transition);
    border: 1px solid var(--np-gray-200);
}

.mnp-history-item:hover {
    border-color: var(--np-primary-light);
    box-shadow: var(--np-shadow-sm);
}

.mnp-history-item-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 100px;
}

.mnp-history-date {
    font-size: 11px;
    color: var(--np-gray-500);
}

.mnp-history-number {
    font-family: var(--np-font-numbers);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--np-primary);
}

.mnp-history-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mnp-history-label {
    font-size: 12px;
    color: var(--np-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mnp-history-name {
    font-weight: 600;
    color: var(--np-gray-700);
}

.mnp-history-compatibility {
    font-weight: 600;
    color: var(--np-gray-700);
}

.mnp-history-score {
    font-weight: 700;
    color: var(--np-success);
}

.mnp-history-item-actions {
    display: flex;
    gap: 8px;
}

.mnp-history-view {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    font-size: 1.2rem;
    opacity: 0.6;
    transition: var(--np-transition);
}

.mnp-history-view:hover {
    opacity: 1;
    transform: scale(1.1);
}

.mnp-history-footer {
    margin-top: 16px;
    text-align: center;
}

.mnp-view-all-history {
    color: var(--np-primary);
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
    transition: var(--np-transition);
}

.mnp-view-all-history:hover {
    color: var(--np-primary-dark);
}

/* =================================================================
   User Bar Styles
   ================================================================= */

/* Barra de Usuário - Completa */
.np-user-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    background: var(--np-white);
    border-radius: var(--np-radius-full);
    box-shadow: var(--np-shadow-md);
    font-family: var(--np-font-body);
}

.np-user-bar-guest {
    justify-content: center;
}

.np-user-bar-login {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: var(--np-gradient-primary);
    color: var(--np-white);
    border-radius: var(--np-radius-full);
    text-decoration: none;
    font-weight: 600;
    transition: var(--np-transition);
}

.np-user-bar-login:hover {
    transform: translateY(-2px);
    box-shadow: var(--np-shadow-glow);
    color: var(--np-white);
}

.np-user-bar-logged {
    justify-content: space-between;
    flex-wrap: wrap;
}

.np-user-bar-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.np-user-bar-avatar img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--np-primary-light);
}

.np-user-bar-name {
    font-weight: 600;
    color: var(--np-gray-800);
}

.np-user-bar-credits {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--np-gradient-gold);
    border-radius: var(--np-radius-full);
    color: var(--np-white);
    font-weight: 700;
}

.np-user-bar-credits .np-credits-icon {
    font-size: 1.1rem;
}

.np-user-bar-credits .np-credits-value {
    font-family: var(--np-font-numbers);
}

.np-user-bar-buy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: var(--np-white);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: var(--np-transition);
}

.np-user-bar-buy:hover {
    background: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

.np-user-bar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.np-user-bar-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--np-gray-100);
    color: var(--np-gray-700);
    border-radius: var(--np-radius-full);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: var(--np-transition);
}

.np-user-bar-btn:hover {
    background: var(--np-gray-200);
    color: var(--np-gray-800);
}

.np-user-bar-dashboard:hover {
    background: var(--np-primary-soft);
    color: var(--np-primary);
}

.np-user-bar-logout:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--np-danger);
}

/* Versão Compacta */
.np-user-bar-compact {
    padding: 8px 12px;
    gap: 10px;
}

.np-user-bar-compact .np-user-bar-btn {
    padding: 8px;
}

.np-user-bar-compact .np-user-bar-credits {
    padding: 6px 12px;
}

/* Barra de Usuário Inline (para dentro dos módulos) */
.np-inline-user-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--np-gray-100) 0%, var(--np-white) 100%);
    border-radius: var(--np-radius-lg);
    border: 1px solid var(--np-gray-200);
    margin-bottom: 20px;
    font-family: var(--np-font-body);
}

.np-inline-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.np-inline-user-info img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--np-primary-light);
}

.np-inline-user-name {
    font-weight: 600;
    color: var(--np-gray-800);
    font-size: 0.95rem;
}

.np-inline-user-credits {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--np-gradient-gold);
    border-radius: var(--np-radius-full);
    color: var(--np-white);
    font-weight: 700;
    font-size: 0.85rem;
}

.np-inline-user-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.np-inline-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--np-white);
    border: 1px solid var(--np-gray-200);
    border-radius: var(--np-radius-md);
    text-decoration: none;
    font-size: 1rem;
    transition: var(--np-transition);
}

.np-inline-btn:hover {
    background: var(--np-gray-100);
    border-color: var(--np-gray-300);
    transform: translateY(-1px);
}

.np-inline-btn-buy:hover {
    background: var(--np-gold);
    border-color: var(--np-gold);
}

.np-inline-btn-logout:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--np-danger);
}

/* Responsivo */
@media (max-width: 600px) {
    .np-user-bar {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }

    .np-user-bar-logged {
        justify-content: center;
    }

    .np-inline-user-bar {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .np-inline-user-info {
        justify-content: center;
    }

    .np-inline-user-actions {
        justify-content: center;
    }
}

/* =================================================================
   Mapa Numerológico - Resultado Completo
   ================================================================= */
.mnp-map-generator {
    font-family: var(--np-font-body);
    max-width: 900px;
    margin: 40px auto;
}

.mnp-map-result {
    background: linear-gradient(180deg, #1E1B4B 0%, #312E81 50%, #1E1B4B 100%);
    border-radius: var(--np-radius-2xl);
    overflow: hidden;
    box-shadow: var(--np-shadow-xl);
    position: relative;
}

/* Efeito de estrelas */
.mnp-map-result::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 160px 120px, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(2px 2px at 200px 50px, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 250px 90px, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(2px 2px at 300px 30px, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 350px 100px, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(2px 2px at 400px 60px, rgba(245, 158, 11, 0.6), transparent),
        radial-gradient(2px 2px at 450px 140px, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 500px 80px, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(2px 2px at 550px 40px, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 600px 120px, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(2px 2px at 650px 70px, rgba(245, 158, 11, 0.5), transparent),
        radial-gradient(2px 2px at 700px 150px, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 750px 50px, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(2px 2px at 800px 100px, rgba(255, 255, 255, 0.3), transparent);
    pointer-events: none;
}

.mnp-map-result .mnp-map-header {
    padding: 50px 40px 30px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.mnp-map-result .mnp-map-header h2 {
    font-family: var(--np-font-display);
    font-size: 2.2rem;
    font-weight: 600;
    color: #FFFFFF;
    margin: 0 0 12px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.mnp-map-result .mnp-map-header p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.mnp-map-result .mnp-map-header p strong {
    color: #FFFFFF;
    font-weight: 700;
}

/* Seções do Mapa */
.mnp-map-section {
    padding: 30px 40px;
    position: relative;
    z-index: 1;
}

.mnp-map-section .mnp-section-title {
    font-family: var(--np-font-display);
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 25px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
}

/* Números Centrais */
.mnp-core-numbers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 20px;
}

.mnp-core-number {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 24px 16px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.mnp-core-number::before {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: white;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

.mnp-core-number:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(124, 58, 237, 0.2);
}

.mnp-core-number .number {
    font-family: var(--np-font-numbers);
    font-size: 2.8rem;
    font-weight: 700;
    color: #FCD34D;
    line-height: 1;
    margin-bottom: 10px;
    text-shadow: 0 2px 10px rgba(252, 211, 77, 0.3);
}

.mnp-core-number .number.master {
    background: linear-gradient(135deg, #F59E0B 0%, #DC2626 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: np-pulse-glow 2s infinite;
}

@keyframes np-pulse-glow {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.4)); }
    50% { filter: drop-shadow(0 0 15px rgba(245, 158, 11, 0.8)); }
}

.mnp-core-number .label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Grade de Inclusão */
.mnp-inclusion-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 350px;
    margin: 0 auto;
}

.mnp-inclusion-cell {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 20px 15px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
}

.mnp-inclusion-cell::before {
    content: '✓';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: white;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4);
}

.mnp-inclusion-cell .number {
    font-family: var(--np-font-numbers);
    font-size: 1.6rem;
    font-weight: 700;
    color: #FFFFFF;
    display: block;
    margin-bottom: 4px;
}

.mnp-inclusion-cell .count {
    font-size: 0.9rem;
    color: #A78BFA;
    font-weight: 600;
    display: block;
}

.mnp-inclusion-cell.missing {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
}

.mnp-inclusion-cell.missing::before {
    content: '!';
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
}

.mnp-inclusion-cell.missing .count {
    color: #F87171;
}

.mnp-inclusion-cell.abundant {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
}

.mnp-inclusion-cell.abundant .count {
    color: #34D399;
}

/* Timeline (Pináculos e Desafios) */
.mnp-timeline {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.mnp-timeline-item {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 20px 25px;
    text-align: center;
    min-width: 100px;
    transition: all 0.3s ease;
    position: relative;
}

.mnp-timeline-item::before {
    content: '✓';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: white;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4);
}

.mnp-timeline-item:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.12);
}

.mnp-timeline-item .number {
    font-family: var(--np-font-numbers);
    font-size: 2rem;
    font-weight: 700;
    color: #FCD34D;
    line-height: 1;
    margin-bottom: 8px;
}

.mnp-timeline-item .period {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Ações do Mapa */
.mnp-map-actions {
    padding: 30px 40px 40px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.mnp-map-actions .mnp-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    text-decoration: none;
}

.mnp-map-actions .mnp-btn-gold {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.mnp-map-actions .mnp-btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.5);
}

/* Responsivo do Mapa */
@media (max-width: 768px) {
    .mnp-map-result .mnp-map-header {
        padding: 40px 25px 25px;
    }
    
    .mnp-map-result .mnp-map-header h2 {
        font-size: 1.8rem;
    }
    
    .mnp-map-section {
        padding: 25px 20px;
    }
    
    .mnp-core-numbers {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .mnp-core-number {
        padding: 20px 12px;
    }
    
    .mnp-core-number .number {
        font-size: 2.2rem;
    }
    
    .mnp-inclusion-grid {
        max-width: 280px;
    }
    
    .mnp-timeline {
        gap: 10px;
    }
    
    .mnp-timeline-item {
        padding: 15px 18px;
        min-width: 80px;
    }
    
    .mnp-timeline-item .number {
        font-size: 1.6rem;
    }
}

/* =================================================================
   Numerologia do Nome - Comparador de Nomes
   ================================================================= */
.mnp-name-numerology {
    font-family: var(--np-font-body);
    max-width: 900px;
    margin: 40px auto;
    background: var(--np-white);
    border-radius: var(--np-radius-2xl);
    box-shadow: var(--np-shadow-xl);
    overflow: hidden;
    position: relative;
}

.mnp-name-numerology::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #7C3AED, #F59E0B, #10B981);
}

.mnp-name-header {
    background: linear-gradient(135deg, #1E1B4B 0%, #4C1D95 100%);
    padding: 50px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.mnp-name-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(2px 2px at 50px 30px, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 150px 60px, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(2px 2px at 250px 40px, rgba(245, 158, 11, 0.5), transparent),
        radial-gradient(1px 1px at 350px 80px, rgba(255, 255, 255, 0.4), transparent);
    pointer-events: none;
}

.mnp-name-header .mnp-mystical-icon {
    font-size: 3.5rem;
    margin-bottom: 16px;
    display: block;
    position: relative;
    z-index: 1;
}

.mnp-name-header h2 {
    font-family: var(--np-font-display);
    font-size: 2.2rem;
    font-weight: 600;
    color: #FFFFFF;
    margin: 0 0 12px;
    position: relative;
    z-index: 1;
}

.mnp-name-header p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    position: relative;
    z-index: 1;
}

.mnp-name-form {
    padding: 40px;
}

.mnp-name-input-group {
    margin-bottom: 25px;
}

.mnp-name-input-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--np-gray-700);
    margin-bottom: 10px;
}

.mnp-name-input-group input {
    width: 100%;
    padding: 16px 20px;
    font-size: 1rem;
    border: 2px solid var(--np-gray-200);
    border-radius: var(--np-radius-lg);
    background: var(--np-gray-50);
    color: var(--np-gray-800);
    transition: var(--np-transition);
}

.mnp-name-input-group input:focus {
    border-color: var(--np-primary);
    background: #FFFFFF;
    outline: none;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.1);
}

.mnp-name-input-group .mnp-input-hint {
    font-size: 0.85rem;
    color: var(--np-gray-500);
    margin-top: 8px;
}

.mnp-name-separator {
    text-align: center;
    padding: 20px 0;
    position: relative;
}

.mnp-name-separator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--np-gray-200);
}

.mnp-name-separator span {
    position: relative;
    background: var(--np-white);
    padding: 0 20px;
    font-size: 1.2rem;
    color: var(--np-gray-400);
}

.mnp-name-compare-btn {
    width: 100%;
    padding: 18px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #FFFFFF;
    background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
    border: none;
    border-radius: var(--np-radius-lg);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.mnp-name-compare-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(124, 58, 237, 0.4);
}

.mnp-name-compare-btn:disabled {
    background: var(--np-gray-300);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Resultado da Comparação de Nomes */
.mnp-name-result {
    display: none;
    padding: 0 40px 40px;
}

.mnp-name-result.active {
    display: block;
}

.mnp-name-comparison {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    align-items: start;
    margin-bottom: 40px;
}

.mnp-name-card {
    background: var(--np-gray-50);
    border: 2px solid var(--np-gray-200);
    border-radius: var(--np-radius-xl);
    padding: 30px 25px;
    text-align: center;
    transition: all 0.3s ease;
}

.mnp-name-card.winner {
    background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
    border-color: #10B981;
    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.2);
}

.mnp-name-card.winner::before {
    content: '👑 Recomendado';
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #059669;
    margin-bottom: 15px;
    padding: 6px 16px;
    background: rgba(16, 185, 129, 0.15);
    border-radius: 20px;
}

.mnp-name-card .mnp-name-title {
    font-family: var(--np-font-display);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--np-gray-800);
    margin: 0 0 20px;
    word-break: break-word;
}

.mnp-name-card .mnp-name-numbers {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mnp-name-number-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
}

.mnp-name-number-row .label {
    font-size: 0.9rem;
    color: var(--np-gray-600);
}

.mnp-name-number-row .value {
    font-family: var(--np-font-numbers);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--np-primary);
}

.mnp-name-score {
    margin-top: 25px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(124, 58, 237, 0.05) 100%);
    border-radius: 15px;
}

.mnp-name-score .score-label {
    font-size: 0.85rem;
    color: var(--np-gray-600);
    margin-bottom: 5px;
}

.mnp-name-score .score-value {
    font-family: var(--np-font-numbers);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--np-primary);
}

.mnp-name-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

.mnp-name-vs span {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--np-gradient-primary);
    border-radius: 50%;
    color: #FFFFFF;
    font-weight: 800;
    font-size: 1rem;
}

/* Análise Detalhada */
.mnp-name-analysis {
    background: var(--np-gray-50);
    border-radius: var(--np-radius-xl);
    padding: 30px;
}

.mnp-name-analysis h3 {
    font-family: var(--np-font-display);
    font-size: 1.3rem;
    color: var(--np-gray-800);
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mnp-name-analysis-content {
    color: var(--np-gray-700);
    line-height: 1.7;
}

.mnp-name-analysis-content p {
    margin: 0 0 15px;
}

.mnp-name-analysis-content ul {
    margin: 0;
    padding-left: 20px;
}

.mnp-name-analysis-content li {
    margin-bottom: 8px;
}

/* Responsivo */
@media (max-width: 768px) {
    .mnp-name-header {
        padding: 40px 25px;
    }
    
    .mnp-name-header h2 {
        font-size: 1.8rem;
    }
    
    .mnp-name-form {
        padding: 30px 20px;
    }
    
    .mnp-name-result {
        padding: 0 20px 30px;
    }
    
    .mnp-name-comparison {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .mnp-name-vs {
        transform: rotate(90deg);
        padding: 10px 0;
    }
    
    .mnp-name-card {
        padding: 25px 20px;
    }
}

/* =================================================================
   Custom Authentication (Login & Register)
   ================================================================= */

/* Container Principal */
.np-auth-container {
    max-width: 480px;
    margin: 0 auto;
    padding: 20px;
    background: linear-gradient(180deg, rgba(30, 27, 75, 0.98) 0%, rgba(15, 10, 30, 0.98) 100%);
    border-radius: var(--np-radius-xl);
    border: 1px solid rgba(139, 92, 246, 0.2);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 80px rgba(139, 92, 246, 0.15);
}

/* Cabeçalho */
.np-auth-header {
    text-align: center;
    padding: 30px 20px;
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.1) 0%, transparent 100%);
    border-radius: var(--np-radius-lg) var(--np-radius-lg) 0 0;
    margin: -20px -20px 0 -20px;
}

.np-auth-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.5));
}

.np-auth-header h2 {
    font-family: var(--np-font-display);
    font-size: 1.8rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 10px;
    text-shadow: 0 2px 10px rgba(139, 92, 246, 0.3);
}

.np-auth-header p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

/* Tabs */
.np-auth-tabs {
    display: flex;
    gap: 8px;
    padding: 20px 20px 0;
    margin: 0 -20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.np-auth-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: -1px;
}

.np-auth-tab:hover {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(139, 92, 246, 0.05);
}

.np-auth-tab.active {
    color: #C4B5FD;
    border-bottom-color: #8B5CF6;
    background: rgba(139, 92, 246, 0.1);
}

.np-auth-tab span {
    font-size: 1.1rem;
}

/* Formulários */
.np-auth-form {
    display: none;
    padding: 25px 0;
}

.np-auth-form.active {
    display: block;
}

/* Aviso de dados permanentes */
.np-auth-warning {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(217, 119, 6, 0.08) 100%);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: var(--np-radius-md);
    margin-bottom: 24px;
}

.np-warning-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.np-warning-content strong {
    display: block;
    color: #FCD34D;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.np-warning-content p {
    color: rgba(252, 211, 77, 0.85);
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.5;
}

/* Campos */
.np-auth-field {
    margin-bottom: 20px;
}

.np-auth-field label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.np-field-icon {
    font-size: 1rem;
}

.np-required {
    color: #F87171;
    font-size: 1rem;
}

.np-auth-field input {
    width: 100%;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--np-radius-md);
    color: #FFFFFF;
    font-size: 1rem;
    font-family: var(--np-font-body);
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.np-auth-field input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.np-auth-field input:focus {
    outline: none;
    border-color: #8B5CF6;
    background: rgba(139, 92, 246, 0.08);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
}

.np-field-help {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    margin: 8px 0 0;
    padding-left: 2px;
}

/* Lembrar-me e Esqueci senha */
.np-auth-remember {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 10px;
}

.np-auth-remember label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    cursor: pointer;
}

.np-auth-remember input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #8B5CF6;
    cursor: pointer;
}

.np-forgot-password {
    color: #A78BFA;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.3s ease;
}

.np-forgot-password:hover {
    color: #C4B5FD;
    text-decoration: underline;
}

/* Termos */
.np-auth-terms {
    margin-bottom: 24px;
}

.np-auth-terms label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    cursor: pointer;
    line-height: 1.5;
}

.np-auth-terms input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #8B5CF6;
    cursor: pointer;
    margin-top: 2px;
    flex-shrink: 0;
}

.np-auth-terms a {
    color: #A78BFA;
    text-decoration: none;
}

.np-auth-terms a:hover {
    text-decoration: underline;
}

/* Botão de submit */
.np-auth-submit {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
    border: none;
    border-radius: var(--np-radius-md);
    color: #FFFFFF;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.35);
    position: relative;
    overflow: hidden;
}

.np-auth-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(139, 92, 246, 0.5);
    background: linear-gradient(135deg, #9D7AFF 0%, #8B5CF6 100%);
}

.np-auth-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.np-auth-submit .np-btn-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.np-auth-submit .np-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: np-spin 0.8s linear infinite;
}

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

/* Botão de registro (verde) */
.np-register-submit {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.35);
}

.np-register-submit:hover:not(:disabled) {
    background: linear-gradient(135deg, #34D399 0%, #10B981 100%);
    box-shadow: 0 6px 30px rgba(16, 185, 129, 0.5);
}

/* Informação de dados permanentes */
.np-auth-permanent-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding: 12px;
    background: rgba(139, 92, 246, 0.08);
    border-radius: var(--np-radius-md);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
}

.np-permanent-icon {
    font-size: 1rem;
}

/* Erro */
.np-auth-error {
    display: none;
    align-items: center;
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--np-radius-md);
    color: #F87171;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

/* Responsivo */
@media (max-width: 520px) {
    .np-auth-container {
        margin: 10px;
        padding: 15px;
        border-radius: var(--np-radius-lg);
    }
    
    .np-auth-header {
        padding: 25px 15px;
        margin: -15px -15px 0 -15px;
    }
    
    .np-auth-header h2 {
        font-size: 1.5rem;
    }
    
    .np-auth-tabs {
        margin: 0 -15px;
        padding: 15px 15px 0;
    }
    
    .np-auth-tab {
        padding: 12px 15px;
        font-size: 0.9rem;
    }
    
    .np-auth-form {
        padding: 20px 0;
    }
    
    .np-auth-field input {
        padding: 12px 14px;
        font-size: 0.95rem;
    }
    
    .np-auth-submit {
        padding: 14px 20px;
        font-size: 1rem;
    }
    
    .np-auth-remember {
        flex-direction: column;
        align-items: flex-start;
    }
}