:root {
    --qp-primary: #2563eb;
    --qp-primary-dark: #1d4ed8;
    --qp-gray-50: #f8fafc;
    --qp-gray-100: #f1f5f9;
    --qp-gray-600: #475569;
    --qp-gray-900: #0f172a;
    --qp-sidebar-width: 260px;
}

* { box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; color: var(--qp-gray-900); background: #fff; }

.auth-body { background: var(--qp-gray-50); min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.auth-wrapper { width: 100%; max-width: 420px; padding: 1rem; }
.auth-card { background: #fff; border-radius: 16px; padding: 2rem; box-shadow: 0 4px 24px rgba(0,0,0,.06); }
.auth-logo { font-size: 1.5rem; font-weight: 700; color: var(--qp-primary); text-decoration: none; }

.btn-primary { background: var(--qp-primary); border-color: var(--qp-primary); }
.btn-primary:hover { background: var(--qp-primary-dark); border-color: var(--qp-primary-dark); }

/* Admin Layout */
.admin-wrapper { display: flex; min-height: 100vh; }
.admin-sidebar { width: var(--qp-sidebar-width); background: #fff; border-right: 1px solid var(--qp-gray-100); position: fixed; height: 100vh; overflow-y: auto; z-index: 100; }
.admin-main { margin-left: var(--qp-sidebar-width); flex: 1; background: var(--qp-gray-50); min-height: 100vh; }
.admin-header { background: #fff; padding: 1rem 1.5rem; border-bottom: 1px solid var(--qp-gray-100); display: flex; justify-content: space-between; align-items: center; }
.admin-content { padding: 1.5rem; }

.sidebar-brand { padding: 1.25rem 1.5rem; font-weight: 700; font-size: 1.25rem; color: var(--qp-primary); border-bottom: 1px solid var(--qp-gray-100); }
.sidebar-nav { padding: 1rem 0; }
.sidebar-nav .nav-link { color: var(--qp-gray-600); padding: .6rem 1.5rem; font-size: .9rem; display: flex; align-items: center; gap: .5rem; }
.sidebar-nav .nav-link:hover, .sidebar-nav .nav-link.active { color: var(--qp-primary); background: var(--qp-gray-50); }
.sidebar-nav .nav-section { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; padding: .75rem 1.5rem .25rem; font-weight: 600; }

.stat-card { background: #fff; border-radius: 12px; padding: 1.25rem; border: 1px solid var(--qp-gray-100); }
.stat-card .stat-value { font-size: 1.75rem; font-weight: 700; color: var(--qp-gray-900); }
.stat-card .stat-label { color: var(--qp-gray-600); font-size: .85rem; }

.chart-card { background: #fff; border-radius: 12px; padding: 1.25rem; border: 1px solid var(--qp-gray-100); }

.admin-content .card { border-radius: 12px; }
.admin-content .table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--qp-gray-600); font-weight: 600; }
.admin-content .table td { vertical-align: middle; font-size: .9rem; }

/* Front layout */
.front-navbar { background: #fff; border-bottom: 1px solid var(--qp-gray-100); padding: .75rem 0; }
.hero-section { background: linear-gradient(135deg, #eff6ff 0%, #fff 100%); padding: 4rem 0; }
.service-card { border: 1px solid var(--qp-gray-100); border-radius: 12px; padding: 1.5rem; transition: box-shadow .2s; }
.service-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.partner-card { background: #fff; border-radius: 12px; border: 1px solid var(--qp-gray-100); overflow: hidden; transition: transform .2s; }
.partner-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.partner-card img { width: 100%; height: 200px; object-fit: cover; }

/* Partner Layout */
.partner-wrapper { display: flex; min-height: 100vh; }
.partner-sidebar { width: var(--qp-sidebar-width); background: #fff; border-right: 1px solid var(--qp-gray-100); position: fixed; height: 100vh; overflow-y: auto; z-index: 100; }
.partner-main { margin-left: var(--qp-sidebar-width); flex: 1; background: var(--qp-gray-50); min-height: 100vh; }
.partner-header { background: #fff; padding: 1rem 1.5rem; border-bottom: 1px solid var(--qp-gray-100); display: flex; justify-content: space-between; align-items: center; }
.partner-content { padding: 1.5rem; }

/* Front layout extras */
.front-logo { font-size: 1.35rem; font-weight: 700; color: var(--qp-primary); text-decoration: none; }
.front-nav .nav-link { color: var(--qp-gray-600); font-size: .9rem; font-weight: 500; }
.front-nav .nav-link:hover, .front-nav .nav-link.active { color: var(--qp-primary); }
.hero-badge { display: inline-block; background: #eff6ff; color: var(--qp-primary); font-size: .8rem; font-weight: 600; padding: .35rem .75rem; border-radius: 20px; margin-bottom: 1rem; }
.hero-title { font-size: 2.5rem; font-weight: 700; line-height: 1.2; margin-bottom: 1rem; }
.hero-subtitle { color: var(--qp-gray-600); font-size: 1.1rem; max-width: 540px; }
.hero-card { background: #fff; border-radius: 16px; border: 1px solid var(--qp-gray-100); box-shadow: 0 4px 24px rgba(0,0,0,.04); }
.hero-features li { padding: .4rem 0; color: var(--qp-gray-600); font-size: .95rem; }
.section-title { font-weight: 700; font-size: 1.75rem; }
.banner-img { max-height: 360px; object-fit: cover; }
.testimonial-card { background: #fff; border-radius: 12px; padding: 1.5rem; border: 1px solid var(--qp-gray-100); }
.blog-card { background: #fff; border-radius: 12px; padding: 1.5rem; border: 1px solid var(--qp-gray-100); }
.blog-card-img { width: 100%; height: 160px; object-fit: cover; border-radius: 8px; }
.front-accordion .accordion-item { border: 1px solid var(--qp-gray-100); border-radius: 8px !important; margin-bottom: .5rem; overflow: hidden; }
.cta-section { background: linear-gradient(135deg, var(--qp-primary) 0%, var(--qp-primary-dark) 100%); }
.contact-form-card { background: #fff; border-radius: 16px; padding: 2rem; border: 1px solid var(--qp-gray-100); box-shadow: 0 4px 24px rgba(0,0,0,.04); }
.front-footer { background: var(--qp-gray-50); border-top: 1px solid var(--qp-gray-100); padding: 3rem 0 1.5rem; margin-top: 3rem; }
.front-footer-title { font-weight: 600; margin-bottom: 1rem; }
.front-footer-links a { color: var(--qp-gray-600); text-decoration: none; font-size: .9rem; display: block; padding: .2rem 0; }
.front-footer-links a:hover { color: var(--qp-primary); }
.front-footer-bottom { border-top: 1px solid var(--qp-gray-100); padding-top: 1.5rem; margin-top: 2rem; }
.smaller { font-size: .8rem; }

/* Partner & Customer panels */
.panel-body { background: var(--qp-gray-50); min-height: 100vh; }
.panel-navbar { background: #fff; border-bottom: 1px solid var(--qp-gray-100); padding: .75rem 0; }
.panel-logo { font-weight: 700; color: var(--qp-primary); text-decoration: none; }
.panel-nav-link { color: var(--qp-gray-600); text-decoration: none; font-size: .9rem; }
.panel-nav-link:hover, .panel-nav-link.active { color: var(--qp-primary); }
.panel-content { min-height: calc(100vh - 60px); }

@media (max-width: 768px) {
    .admin-sidebar { transform: translateX(-100%); }
    .admin-sidebar.show { transform: translateX(0); }
    .admin-main { margin-left: 0; }
    .partner-sidebar { transform: translateX(-100%); }
    .partner-main { margin-left: 0; }
    .hero-title { font-size: 1.75rem; }
}