:root {
    --em-green: #16c163;
    --em-green-dark: #0e9a4d;
    --em-green-light: #d7f7e4;
    --em-red: #ef4444;
    --em-red-dark: #dc2626;
    --em-red-light: #fee2e2;
    --em-black: #0a0b0d;
    --em-dark: #16181c;
    --em-grey: #1f2329;
    --em-grey-light: #6b7280;
    --em-border: #e5e7eb;
    --em-white: #ffffff;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
    background: #f7f8fa;
    color: var(--em-dark);
}

.font-display { font-family: 'Plus Jakarta Sans', sans-serif; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    cursor: pointer;
    border: 2px solid transparent;
}
.btn-primary {
    background: var(--em-green);
    color: var(--em-black);
}
.btn-primary:hover {
    background: var(--em-green-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -8px rgba(22, 193, 99, 0.6);
}
.btn-outline {
    background: transparent;
    border-color: var(--em-border);
    color: var(--em-dark);
}
.btn-outline:hover {
    background: var(--em-black);
    border-color: var(--em-black);
    color: #fff;
    transform: translateY(-2px);
}
.btn-dark {
    background: var(--em-black);
    color: #fff;
}
.btn-dark:hover {
    background: var(--em-green);
    color: var(--em-black);
    transform: translateY(-2px);
}
.btn-sm { padding: 0.45rem 1rem; font-size: 0.825rem; }
.btn-danger { background: #fee2e2; color: #b91c1c; }
.btn-danger:hover { background: #dc2626; color: #fff; }

/* ---------- Cards ---------- */
.card {
    background: #fff;
    border-radius: 1.25rem;
    border: 1px solid var(--em-border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.influencer-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -15px rgba(22, 193, 99, 0.35);
    border-color: var(--em-green);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--em-green-light);
    color: var(--em-green-dark);
}
.chip-dark { background: var(--em-grey); color: #fff; }

.badge { display: inline-block; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.badge-green { background: #d7f7e4; color: #0e9a4d; }
.badge-red { background: #fee2e2; color: #b91c1c; }
.badge-grey { background: #e5e7eb; color: #4b5563; }
.badge-yellow { background: #fef3c7; color: #92400e; }
.badge-blue { background: #dbeafe; color: #1d4ed8; }

/* ---------- Nav ---------- */
.site-header { background: rgba(255, 255, 255, 0.9); box-shadow: 0 1px 3px rgba(0,0,0,0.03); }

.nav-link {
    position: relative;
    font-weight: 600;
    color: #4b5563;
    transition: color 0.2s;
}
.nav-link:hover, .nav-link.active { color: var(--em-red); }

/* ---------- Hero: white base with an animated, drifting blend of the logo's green + red ---------- */
.hero-gradient, .profile-cover {
    position: relative;
    overflow: hidden;
    background: #fff;
    isolation: isolate;
}
.hero-gradient::before, .profile-cover::before {
    content: '';
    position: absolute;
    inset: -25%;
    z-index: 0;
    background:
        radial-gradient(circle at 20% 25%, rgba(22,193,99,0.30), transparent 45%),
        radial-gradient(circle at 80% 15%, rgba(239,68,68,0.22), transparent 45%),
        radial-gradient(circle at 30% 85%, rgba(239,68,68,0.14), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(22,193,99,0.20), transparent 45%);
    filter: blur(10px);
    animation: heroDrift 16s ease-in-out infinite alternate;
}
.hero-gradient > *, .profile-cover > * { position: relative; z-index: 1; }

@keyframes heroDrift {
    0%   { transform: translate(0%, 0%) scale(1) rotate(0deg); }
    50%  { transform: translate(-4%, 3%) scale(1.12) rotate(6deg); }
    100% { transform: translate(3%, -4%) scale(1.05) rotate(-4deg); }
}

.text-gradient-green {
    background: linear-gradient(90deg, #16c163, #7CF2AE);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- Animations ---------- */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fadeUp 0.6s ease both; }
.delay-1 { animation-delay: .08s; }
.delay-2 { animation-delay: .16s; }
.delay-3 { animation-delay: .24s; }

@keyframes pulseSoft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}
.animate-pulse-soft { animation: pulseSoft 2.4s ease-in-out infinite; }

/* ---------- Forms ---------- */
.form-label { display:block; font-size:0.85rem; font-weight:600; color: var(--em-grey); margin-bottom: 0.35rem; }
.form-input, .form-select, .form-textarea {
    width: 100%;
    border: 1.5px solid var(--em-border);
    border-radius: 0.75rem;
    padding: 0.65rem 0.9rem;
    font-size: 0.9rem;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none;
    border-color: var(--em-green);
    box-shadow: 0 0 0 3px rgba(22,193,99,0.15);
}
.form-hint { font-size: 0.78rem; color: var(--em-grey-light); margin-top: 0.25rem; }
.section-card { background:#fff; border:1px solid var(--em-border); border-radius: 1.25rem; padding: 1.75rem; }

/* ---------- Misc ---------- */
.scrollbar-thin::-webkit-scrollbar { height: 6px; width: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: var(--em-border); border-radius: 999px; }

.dropzone {
    border: 2px dashed var(--em-border);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
    cursor: pointer;
}
.dropzone.dragover, .dropzone:hover { border-color: var(--em-green); background: var(--em-green-light); }

.table-wrap { overflow-x: auto; }
table.admin-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
table.admin-table th { text-align: left; padding: 0.75rem 1rem; background: #f3f4f6; color: #4b5563; font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
table.admin-table td { padding: 0.75rem 1rem; border-top: 1px solid var(--em-border); vertical-align: middle; }
table.admin-table tr:hover td { background: #fafafa; }