/*
Theme Name: SaasLauncher Child
Theme URI: https://cozythemes.com/saaslauncher-wordpress-theme/
Template: saaslauncher
Author: CozyThemes
Author URI: https://cozythemes.com/
Description: SaasLauncher is a modern, block-based WordPress theme crafted specifically for SaaS products, startups, agencies, and businesses. Built with Full Site Editing (FSE), it gives you complete control to fully customize every corner of your site—from headers and footers to every page template. With 70+ ready-to-use pre-built sections and 50+ professionally designed starter templates, you can launch your site effortlessly and tailor it to your brand in minutes. Whether you're building a product landing page, SaaS landing page, agency portfolio, or corporate website, SaasLauncher offers a seamless, flexible, and fast design experience. It's WooCommerce-ready, responsive, and compatible with popular plugins like Contact Form 7, Rankmath, WPForms, Yoast SEO and more. Plus, it comes with Cozy Blocks’ 50+ advanced Gutenberg blocks, giving you all the tools you need to build stunning websites—your way. Explore features and demos at https://cozythemes.com/saaslauncher-wordpress-theme/.
Tags: blog,one-column,custom-background,custom-colors,custom-logo,custom-menu,editor-style,style-variations,featured-images,portfolio,e-commerce,full-site-editing,block-patterns,full-width-template,rtl-language-support,threaded-comments,translation-ready,block-styles,wide-blocks
Version: 1.3.3.1780498666
Updated: 2026-06-03 16:57:46

*/

/**
 * Quintessia Custom Auth System - Styling
 * Matches Quintessia Systems brand: Purple (#7C3AED), dark background
 */

/* ============================================================================
   VARIABLES & ROOT
   ============================================================================ */

:root {
    --qs-primary: #7C3AED;
    --qs-primary-dark: #6D28D9;
    --qs-primary-light: #A78BFA;
    --qs-secondary: #10B981;
    --qs-danger: #EF4444;
    --qs-warning: #F59E0B;
    --qs-info: #3B82F6;
    
    --qs-bg-dark: #0F172A;
    --qs-bg-darker: #020617;
    --qs-bg-card: #1E293B;
    --qs-bg-hover: #334155;
    
    --qs-text-primary: #F1F5F9;
    --qs-text-secondary: #CBD5E1;
    --qs-text-muted: #94A3B8;
    
    --qs-border: #334155;
    --qs-border-light: #475569;
    
    --qs-success: #10B981;
    --qs-error: #EF4444;
    
    --qs-radius: 8px;
    --qs-radius-lg: 12px;
    --qs-radius-xl: 16px;
    
    --qs-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    --qs-shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.4);
    
    --qs-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   GLOBAL STYLES
   ============================================================================ */

.quintessia-auth-wrapper,
.quintessia-dashboard-wrapper {
    background: linear-gradient(135deg, var(--qs-bg-dark) 0%, var(--qs-bg-darker) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    color: var(--qs-text-primary);
}

.quintessia-dashboard-wrapper {
    align-items: flex-start;
    padding-top: 40px;
    padding-bottom: 40px;
}

/* ============================================================================
   AUTH PAGES
   ============================================================================ */

.quintessia-auth-container {
    width: 100%;
    max-width: 420px;
    background: var(--qs-bg-card);
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius-xl);
    padding: 40px;
    box-shadow: var(--qs-shadow-lg);
    animation: slideIn 0.4s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.quintessia-auth-header {
    margin-bottom: 30px;
    text-align: center;
}

.quintessia-auth-header h1 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--qs-text-primary);
}

.quintessia-auth-header p {
    font-size: 14px;
    color: var(--qs-text-secondary);
    margin: 0;
}

/* ============================================================================
   MESSAGES
   ============================================================================ */

.quintessia-message {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--qs-radius);
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.6;
    align-items: flex-start;
}

.quintessia-message svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.quintessia-message.quintessia-success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #86EFAC;
}

.quintessia-message.quintessia-success svg {
    color: var(--qs-success);
}

.quintessia-message.quintessia-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #FCA5A5;
}

.quintessia-message.quintessia-error svg {
    color: var(--qs-error);
}

.quintessia-message a {
    color: var(--qs-primary-light);
    text-decoration: none;
    font-weight: 600;
}

.quintessia-message a:hover {
    text-decoration: underline;
}

/* ============================================================================
   FORMS
   ============================================================================ */

.quintessia-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.quintessia-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.quintessia-form-row.quintessia-form-double {
    grid-template-columns: 1fr 1fr;
}

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

.quintessia-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.quintessia-form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--qs-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.quintessia-form-group input,
.quintessia-form-group textarea {
    padding: 12px 14px;
    background: var(--qs-bg-dark);
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius);
    color: var(--qs-text-primary);
    font-size: 14px;
    transition: var(--qs-transition);
    font-family: inherit;
}

.quintessia-form-group input::placeholder {
    color: var(--qs-text-muted);
}

.quintessia-form-group input:focus,
.quintessia-form-group textarea:focus {
    outline: none;
    border-color: var(--qs-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
    background: rgba(124, 58, 237, 0.02);
}

.quintessia-form-group input:disabled {
    background: var(--qs-bg-hover);
    cursor: not-allowed;
    opacity: 0.6;
}

.quintessia-form-group small,
.quintessia-form-group .quintessia-form-help {
    font-size: 12px;
    color: var(--qs-text-muted);
    line-height: 1.5;
}

.quintessia-password-requirements {
    background: rgba(124, 58, 237, 0.08);
    padding: 10px 12px;
    border-radius: 6px;
    border-left: 3px solid var(--qs-primary);
}

.quintessia-password-requirements ul {
    margin: 6px 0 0;
    padding-left: 18px;
    list-style: none;
}

.quintessia-password-requirements li {
    position: relative;
    padding-left: 12px;
}

.quintessia-password-requirements li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--qs-success);
    font-weight: bold;
}

.quintessia-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.quintessia-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
}

.quintessia-checkbox input {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--qs-primary);
}

.quintessia-link-secondary {
    color: var(--qs-primary-light);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: var(--qs-transition);
}

.quintessia-link-secondary:hover {
    color: var(--qs-primary);
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

.quintessia-btn {
    padding: 12px 20px;
    border: none;
    border-radius: var(--qs-radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--qs-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    white-space: nowrap;
    font-family: inherit;
}

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

.quintessia-btn-primary {
    background: linear-gradient(135deg, var(--qs-primary) 0%, var(--qs-primary-dark) 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}

.quintessia-btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
    background: linear-gradient(135deg, var(--qs-primary-dark) 0%, #5B21B6 100%);
}

.quintessia-btn-primary:active:not(:disabled) {
    transform: translateY(0);
}

.quintessia-btn-google {
    background: var(--qs-bg-dark);
    color: var(--qs-text-primary);
    border: 1px solid var(--qs-border-light);
}

.quintessia-btn-google:hover:not(:disabled) {
    background: var(--qs-bg-hover);
    border-color: var(--qs-primary);
}

.quintessia-btn-large {
    padding: 14px 20px;
    font-size: 15px;
    width: 100%;
}

.quintessia-btn-outline {
    background: transparent;
    color: var(--qs-text-primary);
    border: 1px solid var(--qs-border-light);
}

.quintessia-btn-outline:hover:not(:disabled) {
    background: var(--qs-bg-hover);
    border-color: var(--qs-primary);
}

.quintessia-btn-danger {
    background: var(--qs-error);
    color: white;
}

.quintessia-btn-danger:hover:not(:disabled) {
    background: #DC2626;
}

/* ============================================================================
   DIVIDERS & SEPARATORS
   ============================================================================ */

.quintessia-divider {
    text-align: center;
    color: var(--qs-text-muted);
    font-size: 13px;
    margin: 20px 0;
    position: relative;
}

.quintessia-divider:before,
.quintessia-divider:after {
    content: '';
    position: absolute;
    top: 50%;
    width: 48%;
    height: 1px;
    background: var(--qs-border);
}

.quintessia-divider:before {
    left: 0;
}

.quintessia-divider:after {
    right: 0;
}

/* ============================================================================
   AUTH FOOTER
   ============================================================================ */

.quintessia-auth-footer {
    text-align: center;
    margin-top: 24px;
    font-size: 14px;
    color: var(--qs-text-muted);
}

.quintessia-auth-footer p {
    margin: 0;
}

.quintessia-auth-footer a {
    color: var(--qs-primary-light);
    text-decoration: none;
    font-weight: 600;
}

.quintessia-auth-footer a:hover {
    color: var(--qs-primary);
}

/* ============================================================================
   INFO BOXES
   ============================================================================ */

.quintessia-info-box {
    text-align: center;
    padding: 40px 20px;
}

.quintessia-info-box svg {
    margin: 0 auto 20px;
    color: var(--qs-primary);
}

.quintessia-info-box h2 {
    font-size: 20px;
    margin: 0 0 12px;
    color: var(--qs-text-primary);
}

.quintessia-info-box p {
    color: var(--qs-text-secondary);
    margin: 0 0 12px;
    line-height: 1.6;
}

.quintessia-info-box a {
    color: var(--qs-primary-light);
    text-decoration: none;
}

.quintessia-info-box a:hover {
    text-decoration: underline;
}

.quintessia-success-box {
    background: rgba(16, 185, 129, 0.05);
    border-radius: var(--qs-radius-lg);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

/* ============================================================================
   DASHBOARD
   ============================================================================ */

.quintessia-dashboard-container {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .quintessia-dashboard-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.quintessia-dashboard-sidebar {
    position: sticky;
    top: 20px;
    height: fit-content;
}

@media (max-width: 768px) {
    .quintessia-dashboard-sidebar {
        position: static;
    }
}

.quintessia-user-card {
    background: var(--qs-bg-card);
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius-lg);
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.quintessia-avatar {
    margin-bottom: 12px;
}

.quintessia-avatar img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid var(--qs-primary);
}

.quintessia-user-card h3 {
    font-size: 16px;
    margin: 0 0 4px;
    color: var(--qs-text-primary);
}

.quintessia-user-card p {
    font-size: 13px;
    margin: 0;
    color: var(--qs-text-muted);
}

.quintessia-dashboard-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.quintessia-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    color: var(--qs-text-secondary);
    text-decoration: none;
    border-radius: var(--qs-radius);
    transition: var(--qs-transition);
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 500;
}

.quintessia-nav-item:hover {
    background: var(--qs-bg-hover);
    color: var(--qs-text-primary);
}

.quintessia-nav-item.active {
    background: rgba(124, 58, 237, 0.15);
    color: var(--qs-primary);
    border-color: var(--qs-primary);
}

.quintessia-nav-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.quintessia-nav-logout {
    color: var(--qs-error);
}

.quintessia-nav-logout:hover {
    background: rgba(239, 68, 68, 0.1);
}

.quintessia-dashboard-main {
    background: var(--qs-bg-card);
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius-xl);
    padding: 40px;
}

.quintessia-dashboard-section h2 {
    font-size: 24px;
    margin: 0 0 30px;
    color: var(--qs-text-primary);
}

.quintessia-section-card {
    background: var(--qs-bg-dark);
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius-lg);
    padding: 24px;
    margin-bottom: 24px;
}

.quintessia-section-card h3 {
    font-size: 16px;
    margin: 0 0 16px;
    color: var(--qs-text-primary);
}

.quintessia-section-card p {
    color: var(--qs-text-secondary);
    margin: 0 0 16px;
    line-height: 1.6;
}

.quintessia-form-info {
    background: rgba(124, 58, 237, 0.08);
    padding: 16px;
    border-radius: var(--qs-radius);
    border-left: 3px solid var(--qs-primary);
    margin: 16px 0;
}

.quintessia-form-info p {
    font-size: 13px;
    margin: 0;
    color: var(--qs-text-secondary);
}

.quintessia-form-info p + p {
    margin-top: 8px;
}

.quintessia-form-info strong {
    color: var(--qs-text-primary);
}

/* ============================================================================
   CONNECTED ACCOUNTS
   ============================================================================ */

.quintessia-connected-account {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: var(--qs-bg-dark);
    border-radius: var(--qs-radius);
    gap: 20px;
}

.quintessia-account-info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.quintessia-account-info svg {
    width: 40px;
    height: 40px;
    color: var(--qs-primary);
}

.quintessia-account-info h3 {
    font-size: 15px;
    margin: 0;
    color: var(--qs-text-primary);
}

.quintessia-connected-status,
.quintessia-disconnected-status {
    font-size: 12px;
    margin: 4px 0 0;
}

.quintessia-connected-status {
    color: var(--qs-success);
}

.quintessia-disconnected-status {
    color: var(--qs-text-muted);
}

/* ============================================================================
   LOGIN HISTORY
   ============================================================================ */

.quintessia-login-history table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.quintessia-login-history thead {
    background: var(--qs-bg-dark);
}

.quintessia-login-history th {
    padding: 12px;
    text-align: left;
    color: var(--qs-text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--qs-border);
}

.quintessia-login-history td {
    padding: 12px;
    color: var(--qs-text-secondary);
    border-bottom: 1px solid var(--qs-border);
}

.quintessia-login-history tbody tr:hover {
    background: var(--qs-bg-dark);
}

.quintessia-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.quintessia-badge-google {
    background: rgba(66, 133, 244, 0.15);
    color: #64B5F6;
}

.quintessia-badge-email {
    background: rgba(124, 58, 237, 0.15);
    color: var(--qs-primary-light);
}

/* ============================================================================
   DANGER ZONE
   ============================================================================ */

.quintessia-danger-zone {
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.quintessia-danger-description {
    color: var(--qs-text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
    .quintessia-auth-container {
        padding: 30px;
        max-width: 100%;
    }
    
    .quintessia-dashboard-main {
        padding: 24px;
    }
    
    .quintessia-form-row.quintessia-form-double {
        grid-template-columns: 1fr;
    }
    
    .quintessia-connected-account {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    .quintessia-auth-wrapper,
    .quintessia-dashboard-wrapper {
        background: white;
    }
    
    .quintessia-auth-container,
    .quintessia-dashboard-main {
        background: white;
        border: 1px solid #ccc;
        box-shadow: none;
    }
}