:root{
 --design-primary: #6447ee;
 --design-secondary: #8b5cf6;
 --design-accent: #20a76a;
 --design-bg: #f7f8fc;
 --design-surface: #ffffff;
 --design-text: #171b2d;
 --design-muted: #747b8d;
 --design-line: #e9e9f2;
 --design-radius: 16px;
 --design-shadow: 0 14px 40px rgba(25,22,70,.08);
 --design-space: 18px;
 --design-base: 16px;
 --design-heading-scale: 1;
 --site-logo: url("uploads/logo/site-logo-20260917174925-64e8ed78.jpg");
}
html{font-size:var(--design-base)!important}
body{background:var(--design-bg)!important;color:var(--design-text)!important;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important}
.navbar,.home-nav,.topbar{border-radius:0!important}
.navbar,.home-nav{border-bottom-color:var(--design-line)!important}
.card,.course-card,.course-hero,.lessons-box,.form-box,.form-card,.table-card,.info-box,.course-header,.account-box,.home-course,.cat,.why,.step,.review,.faq,.section-card,.admin-card{border-radius:var(--design-radius)!important;box-shadow:var(--design-shadow)!important}
input,select,textarea,.form-control{border-color:var(--design-line)!important;border-radius:calc(var(--design-radius) * .55)!important;color:var(--design-text)!important;background:var(--design-surface)!important}
button,.btn,.primary-btn,.btn-primary,.add-btn,.add-button,.save-btn,.start-btn,.enroll-btn,.watch-btn,.nav-login{border-radius:calc(var(--design-radius) * .55)!important}
.logo-icon,.brand-icon,.home-logo{position:relative;overflow:hidden;background-image:var(--site-logo),linear-gradient(135deg,var(--design-primary),var(--design-secondary))!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}
.logo-icon,.brand-icon,.home-logo{font-size:0!important}
.logo-icon::after,.brand-icon::after,.home-logo::after{content:"";display:block;width:100%;height:100%;background-image:var(--site-logo);background-size:contain;background-position:center;background-repeat:no-repeat}
.nav-login,.view-btn,.primary-btn,.btn-primary,.add-btn,.add-button,.save-btn,.start-btn,.enroll-btn,.watch-btn{background:linear-gradient(135deg,var(--design-primary),var(--design-secondary))!important}
.hero-badge,.category,.thumbnail-badge,.category-badge,.theme-btn,.lesson-order,.course-icon{background:color-mix(in srgb,var(--design-primary) 10%,white)!important;color:var(--design-primary)!important;border-color:color-mix(in srgb,var(--design-primary) 20%,white)!important}
.free{color:var(--design-accent)!important}


/* 12 selectable layout/design presets */

/* Global spacing and typography controls */
.section,.hero-home{padding-left:max(5%,var(--design-space))!important;padding-right:max(5%,var(--design-space))!important}
.section-head h2,.about-copy h2,.faq-left h2{transform:scaleY(var(--design-heading-scale));transform-origin:center}