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

:root {
    --scheduli-primary: #8B5CF6;
    --scheduli-secondary: #EC4899;
    --scheduli-accent: #22D3EE;
    --scheduli-lime: #A3E635;
    --scheduli-bg: #080A14;
    --scheduli-soft: #101426;
    --scheduli-card: #111827;
    --scheduli-card-2: #151A2E;
    --scheduli-text: #F8FAFC;
    --scheduli-text-light: #CBD5E1;
    --scheduli-muted: #94A3B8;
    --scheduli-border: rgba(255, 255, 255, 0.10);
    --scheduli-border-bright: rgba(139, 92, 246, 0.45);
    --scheduli-success: #22C55E;
    --scheduli-warning: #FACC15;
    --scheduli-danger: #FB7185;
    --scheduli-radius-md: 18px;
    --scheduli-radius-lg: 26px;
    --scheduli-radius-xl: 36px;
    --scheduli-shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.28);
    --scheduli-shadow-card: 0 28px 75px rgba(0, 0, 0, 0.38);
    --scheduli-shadow-glow: 0 0 35px rgba(139, 92, 246, 0.35);
    --scheduli-shadow-cyan: 0 0 35px rgba(34, 211, 238, 0.25);
    --scheduli-gradient: linear-gradient(135deg, #8B5CF6, #EC4899, #22D3EE);
    --scheduli-gradient-alt: linear-gradient(135deg, #22D3EE, #8B5CF6, #A3E635);
    --scheduli-gradient-soft:
        radial-gradient(circle at top left, rgba(139,92,246,0.28), transparent 32%),
        radial-gradient(circle at top right, rgba(34,211,238,0.22), transparent 30%),
        #080A14;

    --primary: var(--scheduli-primary);
    --primary-dark: #6D28D9;
    --blue: var(--scheduli-primary);
    --navy: var(--scheduli-bg);
    --dark: var(--scheduli-text);
    --muted: var(--scheduli-muted);
    --soft: var(--scheduli-bg);
    --light: var(--scheduli-bg);
    --white: var(--scheduli-card);
    --line: var(--scheduli-border);
    --border: var(--scheduli-border);
    --success: var(--scheduli-success);
    --warning: var(--scheduli-warning);
    --danger: var(--scheduli-danger);
    --shadow: var(--scheduli-shadow-card);
    --shadow-soft: var(--scheduli-shadow-soft);
    --radius: var(--scheduli-radius-lg);
}

html {
    background: var(--scheduli-bg);
}

body {
    font-family: 'Poppins', Arial, sans-serif !important;
    background: var(--scheduli-gradient-soft) !important;
    color: var(--scheduli-text) !important;
}

a {
    color: inherit;
}

.scheduli-wordmark,
.brand-name {
    font-weight: 900;
    letter-spacing: -0.04em;
}

.scheduli-mark,
.brand-icon,
.brand-mark,
.logo-badge {
    background: var(--scheduli-gradient) !important;
    color: #fff !important;
    box-shadow: var(--scheduli-shadow-glow) !important;
}

.rj-public-header,
.topbar,
.admin-shell .topbar {
    background: rgba(17, 24, 39, 0.72) !important;
    border-bottom: 1px solid var(--scheduli-border) !important;
    box-shadow: var(--scheduli-shadow-soft);
    backdrop-filter: blur(18px);
}

.rj-public-nav,
.topbar-inner {
    color: var(--scheduli-text);
}

.rj-public-logo,
.scheduli-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--scheduli-text) !important;
    text-decoration: none;
}

.rj-public-logo img {
    display: none !important;
}

.rj-public-logo::before,
.scheduli-brand-link::before {
    content: "S";
    width: 48px;
    height: 48px;
    border-radius: 18px;
    background: var(--scheduli-gradient);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    font-weight: 900;
    box-shadow: var(--scheduli-shadow-glow);
}

.rj-public-logo::after {
    content: "Scheduli";
    font-size: 25px;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.rj-public-links a,
.brand-text span,
.topbar p,
.hero-copy,
.section-heading p,
.card p,
.booking-meta,
.detail-box span,
.summary-card span,
.empty-card p,
.panel-header p,
.action-card p,
.mini-item span {
    color: var(--scheduli-muted) !important;
}

.rj-public-links a:hover,
.action-link,
.section-heading span,
.eyebrow,
.stat-number,
.summary-card strong,
.mini-value,
.price {
    color: var(--scheduli-accent) !important;
}

.rj-public-btn,
.btn-primary,
.book-btn,
.cta-btn,
button[type="submit"],
.nav-btn,
.submit-btn,
.admin-btn.primary,
.primary-action {
    background: var(--scheduli-gradient) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: var(--scheduli-shadow-glow) !important;
}

.btn-light,
.btn-secondary,
.view-btn,
.pill-link,
.admin-btn.light,
.admin-btn.dark,
.logout,
.secondary-link,
.return-btn {
    background: rgba(255,255,255,0.06) !important;
    color: var(--scheduli-text) !important;
    border: 1px solid var(--scheduli-border) !important;
}

.hero,
.welcome-card,
.status-card,
.panel,
.stat-card,
.action-card,
.auth-card,
.booking-card,
.summary-card,
.empty-card,
.business-card,
.search-panel,
.stats-strip,
.cta-section,
.card,
.profile-card,
.review-card,
.form-card,
.table-card,
.calendar-card,
.settings-card {
    background: rgba(17, 24, 39, 0.78) !important;
    border: 1px solid var(--scheduli-border) !important;
    box-shadow: var(--scheduli-shadow-soft) !important;
    color: var(--scheduli-text) !important;
    backdrop-filter: blur(14px);
}

.hero,
.cta-section,
.security-note {
    background:
        radial-gradient(circle at top right, rgba(236,72,153,0.20), transparent 32%),
        radial-gradient(circle at bottom left, rgba(34,211,238,0.16), transparent 30%),
        linear-gradient(145deg, rgba(17,24,39,0.94), rgba(21,26,46,0.88)) !important;
    border-radius: var(--scheduli-radius-xl) !important;
}

.hero h1,
.section-heading h2,
.card-title-row h3,
.empty-state h3,
h1,
h2,
h3,
.brand-text strong {
    color: var(--scheduli-text) !important;
}

.hero h1 span,
.gradient-text {
    background: var(--scheduli-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

.search-field,
.detail-box,
.mini-item,
.stat,
.summary-box,
.form-section,
.booking-item,
.industry-card,
input,
select,
textarea {
    background: rgba(255,255,255,0.055) !important;
    border: 1px solid var(--scheduli-border) !important;
    color: var(--scheduli-text) !important;
}

input::placeholder,
textarea::placeholder {
    color: rgba(203,213,225,0.7);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--scheduli-accent) !important;
    box-shadow: 0 0 0 4px rgba(34,211,238,0.15) !important;
    outline: none;
}

.category-pill,
.card-tags span,
.badge,
.status-pill,
.title-badge {
    background: rgba(139,92,246,0.16) !important;
    color: #DDD6FE !important;
    border: 1px solid rgba(139,92,246,0.35) !important;
}

.category-pill:hover,
.category-pill.active,
.business-card:hover,
.action-card:hover,
.stat-card:hover,
.card:hover {
    border-color: var(--scheduli-border-bright) !important;
    box-shadow: var(--scheduli-shadow-glow) !important;
}

.rj-public-footer {
    background: rgba(8, 10, 20, 0.94) !important;
    color: var(--scheduli-text) !important;
    border-top: 1px solid var(--scheduli-border);
}

.rj-footer-brand img {
    display: none !important;
}

.rj-footer-brand::before {
    content: "Scheduli";
    display: block;
    margin-bottom: 16px;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.register-hero img {
    display: none !important;
}

.register-hero-inner::before {
    content: "S";
    width: 58px;
    height: 58px;
    border-radius: 20px;
    background: var(--scheduli-gradient);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 900;
    box-shadow: var(--scheduli-shadow-glow);
    margin-bottom: 18px;
}

.login-brand,
.register-hero,
.login-panel,
.register-form-wrap {
    background: transparent !important;
}

@media (max-width: 900px) {
    .rj-public-header.menu-open .rj-public-links {
        background: rgba(17, 24, 39, 0.96) !important;
        border: 1px solid var(--scheduli-border) !important;
    }

    .rj-menu-toggle {
        background: rgba(255,255,255,0.06) !important;
        border: 1px solid var(--scheduli-border) !important;
    }

    .rj-menu-toggle span {
        background: var(--scheduli-text) !important;
    }
}