/* --- GLOBAL DESIGN TOKENS --- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    /* Brand Colors */
    --brand-primary: #0284c7;
    --brand-primary-hover: #0369a1;
    --brand-gradient: linear-gradient(135deg, #0ea5e9, #0284c7);

    /* Light Theme (Landing Page & Portal) */
    --bg-light: #ffffff;
    --bg-app: #f8fafc;
    --surface-light: #ffffff;
    --text-dark: #0f172a;
    --text-muted: #475569;
    --border-light: #e2e8f0;

    /* Dark Theme (Super Admin & Footer) */
    --bg-dark: #0b1528;
    --surface-dark: #1e293b;
    --text-light: #f8fafc;
    --text-muted-dark: #94a3b8;
    --border-dark: #334155;

    /* Geometry & Shadows */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 99px;
    
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.05);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Plus Jakarta Sans', sans-serif; }

/* --- SHARED COMPONENTS --- */
.h1-display { font-size: 56px; font-weight: 800; line-height: 1.15; letter-spacing: -1.5px; }
.h2-title { font-size: 38px; font-weight: 800; }
.h3-subtitle { font-size: 19px; font-weight: 700; }

.btn { border: none; font-weight: 600; cursor: pointer; text-decoration: none; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; }
.btn-primary { background: var(--brand-primary); color: #fff; padding: 12px 24px; border-radius: var(--radius-md); }
.btn-primary:hover { background: var(--brand-primary-hover); }
.btn-pill { background: var(--brand-primary); color: #fff; padding: 14px 32px; border-radius: var(--radius-pill); font-size: 16px; }
.btn-pill:hover { background: var(--brand-primary-hover); transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(2, 132, 199, 0.4); }
.btn-danger { background: #ef4444; color: white; padding: 6px 12px; border-radius: var(--radius-sm); font-size: 13px; }
.btn-danger:hover { background: #dc2626; }

.logo-container { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.logo-badge { width: 40px; height: 40px; background: var(--brand-gradient); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 22px; }
.logo-text { font-size: 22px; font-weight: 800; }
.logo-text span { color: var(--brand-primary); }

.input-field { width: 100%; padding: 12px; border: 1px solid var(--border-light); border-radius: var(--radius-md); font-size: 14px; background: var(--surface-light); color: var(--text-dark); outline: none; transition: border-color 0.2s; }
.input-field:focus { border-color: var(--brand-primary); }

.status-badge { padding: 4px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; display: inline-block; }
.status-pro { background: rgba(5, 150, 105, 0.15); color: #10b981; }
.status-free { background: rgba(2, 132, 199, 0.15); color: #0284c7; }