*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--xa-bg);color:var(--xa-text);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--xa-primary);text-decoration:none}
a:hover{opacity:.85}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0 0 .5rem;font-weight:700;color:var(--xa-dark)}
h1{font-size:2.25rem}h2{font-size:1.75rem}h3{font-size:1.25rem}
p{margin:0 0 1rem;color:var(--xa-muted)}
.xa-container{max-width:1240px;margin:0 auto;padding:0 24px}
.grad{background:var(--xa-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.glass{background:var(--xa-glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--xa-glass-border);border-radius:var(--xa-radius-lg);box-shadow:var(--xa-shadow-lg)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.4rem;font-weight:600;border-radius:12px;border:0;cursor:pointer;font-family:inherit;font-size:.95rem;transition:transform .2s,box-shadow .2s,opacity .2s}
.btn-primary{background:var(--xa-grad);color:#fff;box-shadow:var(--xa-shadow)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(108,62,244,.5)}
.btn-ghost{background:rgba(108,62,244,.08);color:var(--xa-primary)}
.btn-ghost:hover{background:rgba(108,62,244,.15)}
.btn-danger{background:var(--xa-danger);color:#fff}
.btn-block{width:100%}
.card{background:#fff;border-radius:var(--xa-radius);padding:1.25rem;box-shadow:0 4px 16px -8px rgba(15,23,42,.1);border:1px solid var(--xa-border)}
.card--hover{transition:transform .25s,box-shadow .25s}
.card--hover:hover{transform:translateY(-4px);box-shadow:var(--xa-shadow-lg)}
.badge{display:inline-block;padding:.25rem .65rem;border-radius:999px;font-size:.75rem;font-weight:600;background:rgba(108,62,244,.12);color:var(--xa-primary)}
.badge-success{background:rgba(34,197,94,.12);color:var(--xa-success)}
.badge-warning{background:rgba(245,158,11,.15);color:var(--xa-warning)}
.badge-danger{background:rgba(239,68,68,.12);color:var(--xa-danger)}
.progress{height:8px;background:rgba(15,23,42,.06);border-radius:999px;overflow:hidden}
.progress__bar{height:100%;background:var(--xa-grad);border-radius:999px;transition:width .6s ease}
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--xa-radius);overflow:hidden;box-shadow:0 4px 16px -8px rgba(15,23,42,.1)}
.table th,.table td{padding:.9rem 1rem;text-align:left;border-bottom:1px solid var(--xa-border)}
.table th{background:#F1F5F9;font-weight:600;color:var(--xa-dark);font-size:.85rem;text-transform:uppercase;letter-spacing:.03em}
.alert{padding:1rem 1.2rem;border-radius:12px;margin-bottom:1rem;font-weight:500}
.alert-success{background:rgba(34,197,94,.1);color:#166534}
.alert-danger{background:rgba(239,68,68,.1);color:#991B1B}
.alert-warning{background:rgba(245,158,11,.12);color:#92400E}
.tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--xa-border);margin-bottom:1.5rem}
.tab{padding:.75rem 1.25rem;background:none;border:0;cursor:pointer;font-weight:600;color:var(--xa-muted);border-bottom:2px solid transparent;font-family:inherit}
.tab.is-active{color:var(--xa-primary);border-color:var(--xa-primary)}
.breadcrumb{display:flex;gap:.5rem;font-size:.85rem;color:var(--xa-muted);margin-bottom:1rem}
.breadcrumb a{color:var(--xa-muted)}
.pagination{display:flex;gap:.35rem;justify-content:center;margin-top:2rem}
.pagination a,.pagination span{padding:.5rem .9rem;border-radius:8px;background:#fff;border:1px solid var(--xa-border);color:var(--xa-dark)}
.pagination .is-active{background:var(--xa-grad);color:#fff;border-color:transparent}
.dropdown{position:relative;display:inline-block}
.dropdown__menu{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border-radius:12px;box-shadow:var(--xa-shadow-lg);padding:.5rem;min-width:200px;display:none;z-index:20}
.dropdown.is-open .dropdown__menu{display:block}
.dropdown__menu a{display:block;padding:.55rem .8rem;border-radius:8px;color:var(--xa-dark)}
.dropdown__menu a:hover{background:#F1F5F9}
.accordion__item{background:#fff;border-radius:12px;margin-bottom:.5rem;border:1px solid var(--xa-border);overflow:hidden}
.accordion__header{padding:1rem 1.2rem;cursor:pointer;font-weight:600;display:flex;justify-content:space-between;align-items:center}
.accordion__body{padding:0 1.2rem 1rem;display:none;color:var(--xa-muted)}
.accordion__item.is-open .accordion__body{display:block}
.modal{position:fixed;inset:0;background:rgba(15,23,42,.55);display:none;align-items:center;justify-content:center;z-index:100;padding:1rem}
.modal.is-open{display:flex}
.modal__box{background:#fff;border-radius:var(--xa-radius-lg);max-width:520px;width:100%;padding:2rem;box-shadow:var(--xa-shadow-lg);animation:xaSlideUp .3s ease}
.toast{position:fixed;top:24px;right:24px;background:var(--xa-dark);color:#fff;padding:.85rem 1.2rem;border-radius:12px;box-shadow:var(--xa-shadow-lg);z-index:200;animation:xaSlideDown .3s ease}
.skeleton{background:linear-gradient(90deg,#E2E8F0 25%,#F1F5F9 50%,#E2E8F0 75%);background-size:200% 100%;animation:xaShimmer 1.4s infinite;border-radius:8px}
@keyframes xaShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes xaSlideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes xaSlideDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes xaFadeIn{from{opacity:0}to{opacity:1}}
.fade-in{animation:xaFadeIn .5s ease}
.xa-main{padding:3rem 0;min-height:60vh}
.xa-hero{padding:4rem 3rem;text-align:center;margin-top:3rem}
.xa-hero__title{font-size:3rem;margin-bottom:1rem}
.xa-hero__subtitle{font-size:1.15rem;margin-bottom:2rem}
.xa-hero__actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.xa-site-header{background:#fff;border-bottom:1px solid var(--xa-border);padding:1rem 0;position:sticky;top:0;z-index:30}
.xa-site-header__inner{display:flex;justify-content:space-between;align-items:center}
.xa-logo{font-weight:800;font-size:1.35rem;color:var(--xa-dark)}
.xa-nav{display:flex;gap:1.5rem;align-items:center}
.xa-nav a{color:var(--xa-dark);font-weight:500}
.xa-site-footer{background:var(--xa-dark);color:#CBD5E1;padding:3rem 0;margin-top:4rem}
.xa-site-footer a{color:#fff}
.grid{display:grid;gap:1.25rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.stat-card{padding:1.5rem;background:#fff;border-radius:var(--xa-radius);box-shadow:0 4px 20px -10px rgba(15,23,42,.1);border:1px solid var(--xa-border);position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:var(--xa-grad)}
.stat-card__label{color:var(--xa-muted);font-size:.85rem;font-weight:500;margin-bottom:.5rem}
.stat-card__value{font-size:2rem;font-weight:700;color:var(--xa-dark)}
.stat-card__delta{font-size:.8rem;color:var(--xa-success);margin-top:.35rem}
.course-card__thumb{aspect-ratio:16/9;background:var(--xa-grad);border-radius:12px;margin-bottom:1rem;position:relative;overflow:hidden}
.course-card__level{position:absolute;top:.75rem;right:.75rem}
.lesson-card{display:flex;gap:1rem;align-items:center;padding:1rem;background:#fff;border-radius:12px;border:1px solid var(--xa-border);margin-bottom:.75rem}
.lesson-card__icon{width:44px;height:44px;border-radius:12px;background:rgba(108,62,244,.1);display:flex;align-items:center;justify-content:center;color:var(--xa-primary);font-weight:700}
.certificate{background:linear-gradient(135deg,#fff 0%,#F1F5F9 100%);padding:4rem 3rem;border-radius:var(--xa-radius-lg);border:12px double var(--xa-primary);text-align:center;position:relative}
.certificate__title{font-size:2.5rem;color:var(--xa-primary);letter-spacing:.08em;text-transform:uppercase}
.certificate__name{font-size:2rem;margin:1.5rem 0;color:var(--xa-dark);font-family:Georgia,serif;font-style:italic}
.form-group{margin-bottom:1.2rem}
.form-group label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.4rem;color:var(--xa-dark)}
.form-control{width:100%;padding:.75rem 1rem;border-radius:12px;border:1px solid var(--xa-border);background:#fff;font-family:inherit;font-size:.95rem;transition:border-color .2s,box-shadow .2s}
.form-control:focus{outline:0;border-color:var(--xa-primary);box-shadow:0 0 0 4px rgba(108,62,244,.12)}
.form-check{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--xa-muted)}