@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{--primary:#1769ff;--primary2:#0f55d9;--navy:#0d1728;--bg:#f4f7fb;--text:#101828;--muted:#667085;--line:#e6ebf2;--success:#20b26b;--radius:18px}
*{box-sizing:border-box} body{font-family:Inter,system-ui,sans-serif;color:var(--text);background:#fff} a{text-decoration:none}.text-muted{color:var(--muted)!important}
.navbar{min-height:72px}.navbar-brand{font-weight:800}.btn-primary{background:var(--primary);border-color:var(--primary);border-radius:12px;font-weight:700}.btn-outline-primary{border-radius:12px;font-weight:700}.badge-soft{background:#eaf2ff;color:var(--primary);padding:.45rem .7rem;border-radius:999px;font-weight:700}
.hero{background:linear-gradient(135deg,#f7fbff,#edf4ff);padding:72px 0}.hero h1{font-size:clamp(2.2rem,5vw,4.6rem);font-weight:800;letter-spacing:-.04em;line-height:1.02}.hero-card,.course-card,.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 14px 40px rgba(16,24,40,.07)}.hero-card{padding:28px}.progress{height:10px;border-radius:99px;background:#e9eef6}.progress-bar{background:linear-gradient(90deg,var(--primary),#4d8cff)}
.section{padding:64px 0}.section-title{font-weight:800;letter-spacing:-.03em}.course-card{height:100%;overflow:hidden;transition:.2s}.course-card:hover{transform:translateY(-4px);box-shadow:0 18px 50px rgba(16,24,40,.1)}.course-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;background:#eef2f7}.course-body{padding:20px}.feature-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#eaf2ff;color:var(--primary);font-size:1.2rem}
.auth-page{min-height:100vh;background:linear-gradient(135deg,#edf4ff,#fff);display:grid;place-items:center;padding:30px}.auth-card{width:min(460px,100%);background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:0 20px 60px rgba(16,24,40,.10)}
.dashboard{min-height:100vh;background:var(--bg)}.sidebar{width:250px;background:var(--navy);color:#fff;position:fixed;top:0;bottom:0;left:0;padding:24px 18px;z-index:1000}.sidebar-brand{font-weight:800;font-size:1.15rem;padding:10px 12px 24px}.sidebar a{display:flex;gap:12px;align-items:center;color:#cdd7e8;padding:12px 14px;border-radius:12px;margin:5px 0}.sidebar a:hover,.sidebar a.active{background:#17243a;color:#fff}.main{margin-left:250px;min-height:100vh}.topbar{height:82px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:900}.content{padding:28px}.stat-card,.lesson-card,.list-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}.lesson-layout{display:grid;grid-template-columns:330px 1fr;gap:24px}.lesson-nav{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}.lesson-nav .module{padding:14px 16px;background:#f8faff;font-weight:800;border-top:1px solid var(--line)}.lesson-nav a{display:block;padding:13px 16px;color:var(--text);border-top:1px solid #f0f2f6}.lesson-nav a.active{background:#edf3ff;color:var(--primary);font-weight:700}.lesson-content{background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px;min-height:420px}.lesson-content h1{font-weight:800;letter-spacing:-.035em}.auto-link{display:inline-flex;align-items:flex-start;max-width:100%;gap:.2rem;color:var(--primary);font-weight:700;overflow-wrap:anywhere;word-break:break-word}.auto-link-text{min-width:0;overflow-wrap:anywhere;word-break:break-word}.auto-link:hover{text-decoration:underline}.video-wrap{position:relative;padding-top:56.25%;border-radius:16px;overflow:hidden;background:#000}.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.certificate{background:#fff;border:10px solid #eaf2ff;border-radius:10px;padding:50px;text-align:center}.table-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}.form-control,.form-select{border-radius:11px;padding:.7rem .85rem;border-color:#d8dee8}.form-control:focus,.form-select:focus{box-shadow:0 0 0 .2rem rgba(23,105,255,.12);border-color:#8bb2ff}
@media(max-width:991px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.show{transform:translateX(0)}.main{margin-left:0}.lesson-layout{grid-template-columns:1fr}.topbar{padding:0 18px}.content{padding:18px}.hero{padding:48px 0}.lesson-content{padding:22px}}
@media print{.sidebar,.topbar,.no-print{display:none!important}.main{margin:0}.content{padding:0}.certificate{margin:0;border-color:#ddd}}

.price-badge{position:absolute;top:14px;left:14px;padding:.45rem .7rem;border-radius:999px;font-size:.75rem;font-weight:800;box-shadow:0 4px 18px rgba(0,0,0,.08)}.price-badge.free{background:#dcfce7;color:#15803d}.price-badge.paid{background:#fff7ed;color:#c2410c}.captcha-box{padding:14px;border:1px dashed #9bbcff;background:#f5f9ff;border-radius:14px}.captcha-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:#1769ff;font-weight:800;margin-bottom:8px}.menu-badge{margin-left:auto;background:#ef4444;color:#fff;border-radius:999px;min-width:22px;height:22px;display:inline-grid;place-items:center;font-size:.72rem;font-weight:800;padding:0 6px}.notif-dot{position:absolute;top:-10px;right:-13px;background:#ef4444;color:#fff;border:2px solid #fff;border-radius:999px;min-width:20px;height:20px;display:grid;place-items:center;font-size:.68rem;font-weight:800}.notif-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;border-bottom:1px solid var(--line)}.notif-row:last-child{border-bottom:0}.notif-row.unread{background:#eef5ff}.payment-summary{background:#f8fbff;border:1px solid #dce9ff;border-radius:16px;padding:18px}

/* V2.4 - Public registration guide */
.registration-guide{background:#fff}.guide-heading{max-width:720px}.guide-step{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:0 10px 30px rgba(16,24,40,.045);transition:.2s}.guide-step:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(16,24,40,.08);border-color:#cfe0ff}.guide-step-top{display:flex;align-items:center;justify-content:space-between}.guide-icon{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:#eaf2ff;color:var(--primary);font-size:1.15rem}.guide-number{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font-size:.8rem;font-weight:800}.guide-step p{line-height:1.7}.guide-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(135deg,#f5f9ff,#fff);border:1px solid #dce9ff;border-radius:18px;padding:22px 24px}

/* V2.4 - Member learning guide */
.member-guide{background:linear-gradient(135deg,#ffffff,#f5f9ff);border:1px solid #dce9ff;border-radius:20px;padding:24px;box-shadow:0 12px 35px rgba(16,24,40,.045)}.member-guide-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.member-guide-kicker{display:inline-flex;align-items:center;color:var(--primary);font-size:.78rem;font-weight:800;letter-spacing:.035em}.member-guide-step{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;transition:.2s}.member-guide-step:hover{border-color:#c9dcff;box-shadow:0 10px 28px rgba(16,24,40,.055)}.member-guide-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#eaf2ff;color:var(--primary)}.member-guide-no{font-size:.7rem;font-weight:800;color:#7a8aa3;letter-spacing:.05em}.member-guide-step p{line-height:1.65}
@media(max-width:767px){.guide-cta,.member-guide-head{align-items:stretch;flex-direction:column}.guide-cta .btn,.member-guide-head .btn{width:100%}.registration-guide{padding-top:48px}.member-guide{padding:18px}}

.certificate-mini{background:linear-gradient(135deg,#fff,#f7faff);border:1px solid #dfe8f6;border-radius:20px;box-shadow:0 14px 40px rgba(16,24,40,.06)}
.certificate-pro{padding:14px;background:linear-gradient(135deg,#eef4ff,#ffffff);border:0;box-shadow:0 20px 70px rgba(16,24,40,.12)}
.certificate-frame{border:2px solid #b8c9e5;border-radius:12px;padding:50px 60px;position:relative;overflow:hidden;background:#fff;min-height:720px;display:flex;flex-direction:column;align-items:center;text-align:center}
.certificate-frame:before,.certificate-frame:after{content:"";position:absolute;width:180px;height:180px;border:1px solid #d8e4f4;border-radius:50%;opacity:.6}.certificate-frame:before{top:-90px;left:-90px}.certificate-frame:after{bottom:-90px;right:-90px}
.certificate-top{width:100%;display:flex;flex-direction:column;align-items:center;min-height:92px}.certificate-logo{max-height:56px;max-width:180px;object-fit:contain;margin-bottom:14px}.certificate-kicker{font-size:.8rem;letter-spacing:.16em;font-weight:800;color:#60708a}.certificate-mark{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#edf4ff;color:var(--primary);font-size:1.45rem;margin-top:14px}.letterspace{letter-spacing:.14em;color:#6b7890}.certificate-title{font-weight:800;font-size:clamp(2.4rem,5vw,4rem);letter-spacing:-.04em;margin:12px 0}.certificate-lead{color:#667085;font-size:1.05rem}.certificate-name{font-family:Georgia,serif;font-size:clamp(2rem,5vw,3.3rem);font-weight:700;color:#16233b;padding:12px 24px;border-bottom:2px solid #d7e2f0}.certificate-course{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;color:var(--primary);max-width:820px}.certificate-copy{max-width:680px;color:#667085;line-height:1.7}.certificate-bottom{margin-top:auto;width:100%;display:flex;justify-content:space-between;gap:40px;align-items:flex-end;padding-top:50px}.certificate-bottom>div{min-width:220px}.signature-space{height:38px;border-bottom:1px solid #aebbcf;margin-bottom:8px}.certificate-meta{display:flex;flex-direction:column;gap:4px;text-align:right;color:#667085;font-size:.86rem}.certificate-meta b{color:#1c2a42;font-size:.95rem}.certificate-meta a{color:var(--primary);font-weight:700}
.verify-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#dde6f2;border:1px solid #dde6f2;border-radius:16px;overflow:hidden}.verify-grid>div{background:#fff;padding:16px}.verify-grid .full{grid-column:1/-1}.verify-grid span{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;color:#7a889e;margin-bottom:5px}.verify-grid b{display:block;font-size:1rem}
@media(max-width:767px){.certificate-frame{padding:32px 22px;min-height:640px}.certificate-bottom{flex-direction:column;align-items:center}.certificate-meta{text-align:center}.verify-grid{grid-template-columns:1fr}.verify-grid .full{grid-column:auto}}
@media print{body{background:#fff}.certificate-pro{box-shadow:none;padding:0}.certificate-frame{min-height:0;height:100vh;border-color:#bbb;padding:35mm 20mm 25mm}.certificate-bottom{padding-top:25mm}}

/* ===== JagoSkill UI refresh + accessible theme system ===== */
:root{
  --surface:#ffffff;--surface-2:#f8fafc;--surface-3:#eef4ff;--text:#101828;--text-strong:#0b1220;--muted:#667085;
  --line:#e4e9f1;--shadow:0 16px 50px rgba(16,24,40,.08);--hero-overlay:rgba(255,255,255,.90);--input-bg:#fff;
  --primary:#1769ff;--primary-2:#0f55d9;--focus:rgba(23,105,255,.18);--soft:#eaf2ff;
}
html[data-theme="dark"]{
  color-scheme:dark;
  --surface:#111827;--surface-2:#0b1220;--surface-3:#17233a;--text:#e5e7eb;--text-strong:#f8fafc;--muted:#aeb9ca;
  --line:#263246;--shadow:0 16px 50px rgba(0,0,0,.28);--hero-overlay:rgba(11,18,32,.84);--input-bg:#0f172a;
  --soft:#182a4a;--primary-2:#5e9bff;--focus:rgba(94,155,255,.22);
}
html,body{background:var(--surface);color:var(--text)}
body{transition:background-color .2s ease,color .2s ease}
body.dashboard{background:var(--surface-2)}
body, .main, .content, .auth-page, .hero, footer, .section{color:var(--text)}
a{color:var(--primary)} a:hover{color:var(--primary-2)}
.text-muted,.text-secondary{color:var(--muted)!important}
.text-dark{color:var(--text)!important}
.bg-light{background:var(--surface-2)!important;color:var(--text)!important}
.bg-white,.navbar,.panel,.hero-card,.course-card,.stat-card,.lesson-card,.list-card,.lesson-nav,.lesson-content,.auth-card,.table-card,.registration-guide,.guide-step,.member-guide,.member-guide-step,.certificate,.verify-grid>div{background-color:var(--surface)!important;color:var(--text)}
.border,.border-top,.border-bottom,.border-start,.border-end{border-color:var(--line)!important}
.border-top,.border-bottom{border-color:var(--line)!important}
.form-control,.form-select{background-color:var(--input-bg);color:var(--text);border-color:#cfd7e4}
.form-control::placeholder{color:#8793a6;opacity:1}
.form-control:focus,.form-select:focus{background-color:var(--input-bg);color:var(--text);border-color:var(--primary-2);box-shadow:0 0 0 .2rem var(--focus)}
.form-text{color:var(--muted)!important}
.form-check-input{background-color:var(--input-bg);border-color:#8a97aa}.form-check-input:checked{background-color:var(--primary);border-color:var(--primary)}
.table{--bs-table-bg:transparent;--bs-table-color:var(--text);--bs-table-border-color:var(--line);color:var(--text)}
.table thead th{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
.alert{border-color:var(--line)}
.alert-info{background:#0b3550;color:#d9f0ff;border-color:#1d607e}.alert-success{background:#0c3324;color:#d8f7e8;border-color:#1b6e4c}.alert-danger{background:#441b21;color:#ffdfe3;border-color:#7c2c38}.alert-warning{background:#453512;color:#fff0bc;border-color:#7d6125}
html[data-theme="dark"] .alert-info{background:#102f43;color:#d8efff} html[data-theme="dark"] .alert-success{background:#0d3b29;color:#dcfbe9} html[data-theme="dark"] .alert-danger{background:#3e1920;color:#ffe0e4} html[data-theme="dark"] .alert-warning{background:#493610;color:#fff1bd}
.navbar.site-navbar{background:rgba(255,255,255,.92)!important;backdrop-filter:blur(16px);border-color:var(--line)!important}
html[data-theme="dark"] .navbar.site-navbar{background:rgba(11,18,32,.92)!important}
.navbar .navbar-brand,.navbar .nav-link{color:var(--text-strong)!important}.navbar .nav-link:hover{color:var(--primary)!important}
.navbar-toggler{border-color:var(--line)!important}.navbar-toggler-icon{filter:var(--toggler-filter,none)}
html[data-theme="dark"] .navbar-toggler-icon{filter:invert(1) grayscale(1) brightness(2)}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-width:42px;height:42px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:12px;font-weight:700}
.theme-toggle:hover{background:var(--surface-3);color:var(--text)}
.hero{background-color:var(--surface-2)}
.hero[style]{background-image:linear-gradient(var(--hero-overlay),var(--hero-overlay)),var(--hero-image)!important}
.hero h1,.section-title,.lesson-content h1,h1,h2,h3,h4,h5,h6,.fw-bold,.fw-semibold{color:var(--text-strong)}
.hero .lead{color:var(--muted)!important}
.course-card,.panel,.stat-card,.list-card,.auth-card,.lesson-nav,.lesson-content{border-color:var(--line);box-shadow:var(--shadow)}
.course-body{color:var(--text)}
.course-thumb{background:var(--surface-3)}
.badge-soft{background:var(--soft);color:var(--primary-2)}
.feature-icon,.guide-icon,.member-guide-icon{background:var(--soft);color:var(--primary-2)}
.price-badge.free{background:#dcfce7;color:#166534}.price-badge.paid{background:#fff0df;color:#a63f0b}
html[data-theme="dark"] .price-badge.free{background:#133523;color:#a7f3c8} html[data-theme="dark"] .price-badge.paid{background:#4a2a16;color:#ffd7b0}
.progress{background:#dfe6f0}.progress-bar{background:linear-gradient(90deg,var(--primary),#6ea4ff)}
html[data-theme="dark"] .progress{background:#29364a}
.sidebar{background:#0a1120!important;border-right:1px solid rgba(255,255,255,.08)}.sidebar a{color:#b9c5d7}.sidebar a:hover,.sidebar a.active{background:#17243a;color:#fff}.sidebar-brand{color:#fff}
.topbar{background:var(--surface)!important;border-color:var(--line)!important}.topbar .text-dark{color:var(--text)!important}
.lesson-nav .module{background:var(--surface-2);color:var(--text-strong);border-color:var(--line)}.lesson-nav a{color:var(--text);border-color:var(--line)}.lesson-nav a.active{background:var(--soft);color:var(--primary-2)}
.lesson-content hr{border-color:var(--line);opacity:1}
.payment-summary{background:var(--surface-2);border-color:var(--line)}
.member-guide,.guide-cta{background:var(--surface-2)}
.verify-grid{background:var(--line);border-color:var(--line)}.verify-grid span{color:var(--muted)}.verify-grid b{color:var(--text-strong)}
.certificate-pro,.certificate-frame{background:var(--surface)!important;color:var(--text)}
.auth-page{background:radial-gradient(circle at top left,var(--surface-3),var(--surface-2) 45%,var(--surface));padding:24px}
.auth-card{max-width:480px;padding:34px}
.auth-logo{display:flex;align-items:center;gap:10px;color:var(--text-strong);font-weight:800}.auth-logo img{height:38px;width:38px;border-radius:12px;object-fit:cover}
.auth-card .btn{min-height:48px}.auth-card .form-label{font-weight:700}
.auth-side-note{color:var(--muted);font-size:.9rem}
.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:999}
.mobile-menu-open .mobile-overlay{display:block}
@media(max-width:991px){.sidebar{z-index:1100}.sidebar.show~.mobile-overlay{display:block}.topbar{height:70px}.content{padding:20px 16px}.lesson-layout{gap:16px}}
@media(max-width:767px){
  .auth-page{padding:16px;place-items:center;min-height:100svh}.auth-card{width:100%;max-width:420px;padding:24px 18px;border-radius:18px}.auth-card h2{font-size:1.65rem}.auth-card .lead,.auth-card p{font-size:.92rem;line-height:1.6}
  .hero{padding:42px 0}.hero h1{font-size:clamp(2rem,10vw,3.2rem)}.section{padding:48px 0}
  .course-body{padding:18px}.course-card:hover{transform:none}
  .topbar{padding:0 14px}.topbar>div:last-child .fw-semibold{font-size:.9rem;max-width:125px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar .badge{padding:.6rem!important}
  .theme-toggle .theme-label{display:none}.theme-toggle{width:42px;padding:0}
  .table-responsive{border-radius:14px}.table{font-size:.88rem}
  .guide-cta,.member-guide-head{align-items:stretch;flex-direction:column}.guide-cta .btn{width:100%}
  .lesson-content{padding:20px}.lesson-layout{grid-template-columns:1fr}.lesson-nav{max-height:260px;overflow:auto}
}
@media(min-width:768px){.auth-card{padding:38px}.auth-page:before{content:"";position:fixed;inset:auto auto 0 0;width:280px;height:280px;background:radial-gradient(circle,var(--soft),transparent 70%);pointer-events:none;opacity:.65}}
.auth-wrap{width:min(520px,100%);position:relative;z-index:1}.auth-kicker{display:inline-flex;align-items:center;gap:.4rem;color:var(--primary);font-size:.75rem;letter-spacing:.12em;font-weight:800}.auth-title{font-size:clamp(1.8rem,5vw,2.35rem);font-weight:800;letter-spacing:-.035em;margin:.65rem 0}.auth-divider{display:flex;align-items:center;gap:14px;color:var(--muted);margin:22px 0}.auth-divider:before,.auth-divider:after{content:"";height:1px;background:var(--line);flex:1}.auth-divider span{font-size:.8rem}.catalog-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:30px}.catalog-count{min-width:150px;padding:18px 20px;border:1px solid var(--line);background:var(--surface-2);border-radius:16px;text-align:center}.catalog-count strong{display:block;font-size:1.7rem;color:var(--text-strong)}.catalog-count span{font-size:.8rem;color:var(--muted)}.filter-panel{padding:18px;border:1px solid var(--line);background:var(--surface);border-radius:18px;box-shadow:0 10px 30px rgba(16,24,40,.05)}.input-group-text{background:var(--surface-2);color:var(--muted);border-color:#cfd7e4}.soft-chip{display:inline-flex;align-items:center;padding:.45rem .7rem;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);font-size:.78rem;font-weight:700}.empty-state{padding:64px 24px;text-align:center;border:1px dashed var(--line);background:var(--surface);border-radius:18px}.empty-inline{padding:20px;text-align:center;color:var(--muted)}.hero-course-card{overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:0 24px 70px rgba(16,24,40,.12)}.hero-course-thumb{width:100%;aspect-ratio:16/9;display:block;object-fit:cover}.hero-copy{max-width:650px}.section-kicker{font-size:.76rem;letter-spacing:.11em;color:var(--primary);font-weight:800}.section-heading-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.ui-step{border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:24px;box-shadow:0 10px 30px rgba(16,24,40,.04)}.ui-step-top{display:flex;align-items:center;justify-content:space-between}.ui-step-top>span{font-size:.85rem;font-weight:800;color:var(--muted)}.cta-banner{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:28px 30px;border-radius:22px;background:linear-gradient(135deg,var(--surface-3),var(--surface));border:1px solid var(--line)}.course-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:34px;align-items:start}.course-detail-image{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}.checkout-sticky{position:sticky;top:96px}.course-offer-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--shadow)}.offer-points{display:grid;gap:12px;color:var(--text)}.curriculum-item{display:flex;align-items:flex-start;gap:14px;padding:17px 0;border-top:1px solid var(--line)}.curriculum-no{width:38px;height:38px;border-radius:12px;background:var(--soft);color:var(--primary);display:grid;place-items:center;font-size:.76rem;font-weight:800;flex:none}.course-stat-strip{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface)}.course-stat-strip>div{padding:16px;text-align:center;border-right:1px solid var(--line)}.course-stat-strip>div:last-child{border-right:0}.course-stat-strip strong{display:block;font-size:1.15rem;color:var(--text-strong)}.course-stat-strip span{display:block;color:var(--muted);font-size:.78rem;margin-top:3px}
@media(max-width:991px){.catalog-hero,.section-heading-row,.cta-banner{align-items:flex-start;flex-direction:column}.catalog-count{min-width:0;width:100%;text-align:left}.course-detail-grid{grid-template-columns:1fr}.checkout-sticky{position:static}}
@media(max-width:767px){.auth-wrap{width:100%}.section-heading-row .btn,.cta-banner .btn{width:100%}.cta-banner{padding:22px}.course-stat-strip{grid-template-columns:1fr 1fr 1fr}.course-stat-strip>div{padding:13px 8px}.course-detail-grid{gap:22px}}
.dashboard-welcome{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}.dashboard-title{font-size:clamp(1.75rem,3vw,2.35rem);font-weight:800;letter-spacing:-.035em}.continue-card{overflow:hidden;border:1px solid var(--line);background:var(--surface);border-radius:22px;box-shadow:var(--shadow)}.continue-thumb{width:100%;height:100%;min-height:250px;display:block;object-fit:cover}.learn-top{display:flex;justify-content:space-between;align-items:end;gap:24px}.learn-title{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;letter-spacing:-.035em}.learn-progress-box{width:min(320px,100%);padding:16px;border:1px solid var(--line);background:var(--surface);border-radius:16px}.learn-progress-box strong{float:right;color:var(--text-strong)}.lesson-nav-head{display:flex;justify-content:space-between;gap:10px;padding:18px 16px;background:var(--surface-2);border-bottom:1px solid var(--line)}.lesson-nav-head span{color:var(--primary);font-weight:800;font-size:.85rem}.lesson-nav a{display:flex;gap:8px;align-items:flex-start}.lesson-nav a>span{width:18px;flex:none}.lesson-meta{display:flex;justify-content:space-between;align-items:center;gap:14px}.resource-card{display:flex;align-items:flex-start;gap:14px;padding:17px;border:1px solid var(--line);background:var(--surface-2);border-radius:14px}.resource-card>i{font-size:1.2rem;color:var(--primary);margin-top:3px}.lesson-copy{font-size:1.02rem;line-height:1.85}.lesson-copy p{margin-bottom:1rem}.lesson-pager{display:flex;justify-content:space-between;align-items:center;gap:14px}.completion-note{color:var(--muted);font-size:.88rem}
@media(max-width:767px){.dashboard-welcome,.learn-top{align-items:stretch;flex-direction:column}.continue-thumb{min-height:190px}.learn-progress-box{width:100%}.lesson-meta{align-items:flex-start;flex-direction:column}.lesson-pager{align-items:stretch;flex-direction:column}.lesson-pager .btn{width:100%}}
.order-list{display:grid;gap:18px}.order-card{padding:22px;border:1px solid var(--line);background:var(--surface);border-radius:18px;box-shadow:0 10px 30px rgba(16,24,40,.045)}.order-timeline{display:grid;grid-template-columns:repeat(3,1fr);margin-top:22px;border:1px solid var(--line);border-radius:16px;overflow:hidden}.order-step{display:flex;gap:10px;padding:16px;background:var(--surface-2);border-right:1px solid var(--line);opacity:.72}.order-step:last-child{border-right:0}.order-step.done{opacity:1;background:var(--soft)}.order-step>span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--muted);font-size:.76rem;font-weight:800;flex:none}.order-step.done>span{background:var(--primary);border-color:var(--primary);color:#fff}.order-step small{display:block;color:var(--muted);margin-top:3px}@media(max-width:767px){.order-timeline{grid-template-columns:1fr}.order-step{border-right:0;border-bottom:1px solid var(--line)}.order-step:last-child{border-bottom:0}}
html[data-theme="dark"] .btn-light{background:#1b2638;border-color:#304056;color:#f3f4f6}.btn-outline-dark{color:var(--text)!important;border-color:var(--line)!important}.btn-outline-dark:hover{background:var(--text-strong);color:var(--surface)!important}
html[data-theme="dark"] .certificate-pro{background:var(--surface-2)!important}.certificate-frame{box-shadow:0 12px 36px rgba(0,0,0,.12)}html[data-theme="dark"] .certificate-frame{background:#111827!important;border-color:#50627c}.certificate-name{color:var(--text-strong)}.certificate-copy{color:var(--muted)}.certificate-meta{color:var(--muted)}.certificate-meta b{color:var(--text-strong)}.certificate-kicker{color:#a9b6c9}.letterspace{color:#aeb9ca}.certificate-lead{color:var(--muted)}
html[data-theme="dark"] .guide-step,.member-guide-step,.ui-step{box-shadow:0 10px 30px rgba(0,0,0,.18)}html[data-theme="dark"] .guide-step:hover,.member-guide-step:hover{border-color:#3a5b87}html[data-theme="dark"] .course-card:hover{box-shadow:0 18px 50px rgba(0,0,0,.3)}
html[data-theme="dark"] .nav-tabs .nav-link{color:var(--muted)}html[data-theme="dark"] .nav-tabs .nav-link.active{background:var(--surface);color:var(--text-strong);border-color:var(--line)}
html[data-theme="dark"] .modal-content{background:var(--surface);color:var(--text);border-color:var(--line)}html[data-theme="dark"] .dropdown-menu{background:var(--surface);border-color:var(--line)}html[data-theme="dark"] .dropdown-item{color:var(--text)}html[data-theme="dark"] .dropdown-item:hover{background:var(--surface-2);color:var(--text-strong)}
html,body{max-width:100%;overflow-x:hidden}.container{width:100%}

/* V3.9 - Accessible theme system + polished theme switch */
:root{
  --page-bg:#ffffff;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --surface-3:#eef4ff;
  --input-bg:#ffffff;
  --text:#1f2937;
  --text-strong:#0b1220;
  --muted:#566274;
  --line:#d8e0ea;
  --link:#145bd7;
  --soft:#eaf2ff;
  --code-bg:#f3f6fa;
  --table-head:#f6f8fb;
  --focus:rgba(23,105,255,.20);
  --shadow:0 16px 50px rgba(16,24,40,.08);
  --hero-overlay:rgba(255,255,255,.92);
}
html[data-theme="dark"]{
  color-scheme:dark;
  --page-bg:#0b1220;
  --surface:#111827;
  --surface-2:#0f172a;
  --surface-3:#17233a;
  --input-bg:#0f172a;
  --text:#f1f5f9;
  --text-strong:#ffffff;
  --muted:#c2ccda;
  --line:#334155;
  --link:#8db7ff;
  --soft:#18335f;
  --code-bg:#0b1220;
  --table-head:#162033;
  --focus:rgba(141,183,255,.28);
  --shadow:0 18px 55px rgba(0,0,0,.32);
  --hero-overlay:rgba(11,18,32,.90);
}

html{background:var(--page-bg);color-scheme:light}
html[data-theme="dark"]{background:var(--page-bg);color-scheme:dark}
body{background:var(--page-bg)!important;color:var(--text)!important}
body,.main,.content,.section,footer,header,main,aside,article,section,nav{color:var(--text)}

/* Typography: force semantic text to follow the selected theme. */
body p, body li, body dt, body dd, body label, body legend, body figcaption,
body small, body .small, body .form-text, body .form-label,
body .card-text, body .list-group-item, body td, body th,
body caption, body blockquote{color:inherit}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{color:var(--text-strong)!important}
p,li,dt,dd,legend,figcaption{color:var(--text)}
a{color:var(--link)}
a:hover{color:var(--link)}
.text-primary,.link-primary{color:var(--link)!important}
.text-success{color:#16794a!important}.text-danger{color:#b42318!important}.text-warning{color:#8a5a00!important}.text-info{color:#116a8c!important}
html[data-theme="dark"] .text-success{color:#7ee2ad!important}html[data-theme="dark"] .text-danger{color:#ff9ea8!important}html[data-theme="dark"] .text-warning{color:#ffd66b!important}html[data-theme="dark"] .text-info{color:#86d8f5!important}
.text-body,.text-body-emphasis{color:var(--text)!important}
.text-dark,.text-black,.link-dark{color:var(--text-strong)!important}
.text-secondary,.text-muted,.form-text,.text-body-secondary{color:var(--muted)!important}
.border,.border-top,.border-end,.border-bottom,.border-start{border-color:var(--line)!important}
hr{border-color:var(--line)!important;opacity:1}

/* Bootstrap surfaces and common components. */
.bg-body,.bg-body-secondary,.bg-body-tertiary,.bg-white{background-color:var(--surface)!important;color:var(--text)!important}
.card,.card-body,.list-card,.stat-card,.lesson-card,.panel,.table-card,
.modal-content,.offcanvas,.popover,.toast,.dropdown-menu,.accordion-item,
.list-group-item,.pagination .page-link{background-color:var(--surface)!important;color:var(--text)!important;border-color:var(--line)!important}
.card-title,.card-header,.card-footer,.modal-title,.popover-header,.offcanvas-title{color:var(--text-strong)!important}
.card-subtitle{color:var(--muted)!important}

.form-control,.form-select,.form-control:disabled,.form-control[readonly],textarea,
.input-group-text{
  background-color:var(--input-bg)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}
.form-control::placeholder{color:var(--muted)!important;opacity:1}
.form-select option{background:var(--surface);color:var(--text)}
.form-control:focus,.form-select:focus,textarea:focus{
  color:var(--text)!important;
  background-color:var(--input-bg)!important;
  border-color:var(--primary)!important;
  box-shadow:0 0 0 .2rem var(--focus)!important;
}
.input-group-text{color:var(--muted)!important}

.dropdown-item,.nav-link,.navbar-text{color:var(--text)!important}
.dropdown-item:hover,.dropdown-item:focus{background:var(--surface-2)!important;color:var(--text-strong)!important}
.dropdown-divider{border-color:var(--line)!important}

.table{--bs-table-color:var(--text);--bs-table-bg:var(--surface);--bs-table-border-color:var(--line);color:var(--text)!important;border-color:var(--line)!important}
.table>:not(caption)>*>*{background-color:var(--surface)!important;color:var(--text)!important;border-bottom-color:var(--line)!important}
.table thead th,.table>:not(caption)>tr>th{background:var(--table-head)!important;color:var(--text-strong)!important}
.table-hover>tbody>tr:hover>*{background:var(--surface-2)!important;color:var(--text-strong)!important}

.list-group-item-action:hover,.list-group-item-action:focus{background:var(--surface-2)!important;color:var(--text-strong)!important}
.nav-tabs{border-color:var(--line)!important}
.nav-tabs .nav-link{color:var(--muted)!important}
.nav-tabs .nav-link:hover{color:var(--text-strong)!important;border-color:var(--line)!important}
.nav-tabs .nav-link.active{background:var(--surface)!important;color:var(--text-strong)!important;border-color:var(--line) var(--line) var(--surface)!important}
.nav-pills .nav-link{color:var(--text)!important}
.breadcrumb{--bs-breadcrumb-divider-color:var(--muted);--bs-breadcrumb-item-active-color:var(--muted)}
.breadcrumb-item a{color:var(--link)!important}
.breadcrumb-item.active{color:var(--muted)!important}

.accordion{--bs-accordion-color:var(--text);--bs-accordion-bg:var(--surface);--bs-accordion-border-color:var(--line);--bs-accordion-btn-color:var(--text-strong);--bs-accordion-btn-bg:var(--surface-2);--bs-accordion-active-color:var(--text-strong);--bs-accordion-active-bg:var(--surface-3)}
.accordion-button{color:var(--text-strong)!important;background:var(--surface-2)!important}
.accordion-button:not(.collapsed){color:var(--text-strong)!important;background:var(--surface-3)!important;box-shadow:none}
.accordion-button::after{filter:none}
html[data-theme="dark"] .accordion-button::after{filter:invert(1) brightness(1.6)}

.modal-header,.modal-footer,.offcanvas-header{border-color:var(--line)!important}
.modal-backdrop.show{opacity:.65}
.btn-light{background:var(--surface-2)!important;border-color:var(--line)!important;color:var(--text-strong)!important}
.btn-light:hover{background:var(--surface-3)!important;color:var(--text-strong)!important}
.btn-outline-secondary{--bs-btn-color:var(--text);--bs-btn-border-color:var(--line);--bs-btn-hover-bg:var(--surface-2);--bs-btn-hover-color:var(--text-strong);--bs-btn-hover-border-color:var(--line)}
.btn-outline-primary{--bs-btn-color:var(--link);--bs-btn-border-color:var(--primary)}
.btn-outline-primary:hover{color:#fff!important;background:var(--primary)!important;border-color:var(--primary)!important}
.btn-outline-dark{color:var(--text-strong)!important;border-color:var(--line)!important}
.btn-outline-dark:hover{background:var(--text-strong)!important;color:var(--surface)!important}

/* Status/alert readability in both themes. */
.alert{border-width:1px!important;color:var(--text)!important}
.alert-success{background:#ecfdf3!important;color:#166534!important;border-color:#bbf7d0!important}
.alert-danger{background:#fef2f2!important;color:#991b1b!important;border-color:#fecaca!important}
.alert-warning{background:#fffbeb!important;color:#854d0e!important;border-color:#fde68a!important}
.alert-info{background:#eff8ff!important;color:#155e8c!important;border-color:#bfdbfe!important}
html[data-theme="dark"] .alert-success{background:#0d2e22!important;color:#d9fbe9!important;border-color:#1d6b4d!important}
html[data-theme="dark"] .alert-danger{background:#3a171d!important;color:#ffe3e7!important;border-color:#7f2b38!important}
html[data-theme="dark"] .alert-warning{background:#3d2b08!important;color:#fff0b8!important;border-color:#7a5a13!important}
html[data-theme="dark"] .alert-info{background:#0d2b43!important;color:#dff3ff!important;border-color:#225a82!important}

/* Common muted/surface helper classes used throughout the LMS. */
.soft-chip,.catalog-count,.filter-panel,.empty-state,.resource-card,.payment-summary,
.lesson-nav-head,.lesson-nav .module,.ui-step,.order-step,.course-stat-strip,
.member-guide-step,.guide-step,.member-guide,.registration-guide{color:var(--text);background:var(--surface)!important;border-color:var(--line)!important}
.lesson-nav .module,.lesson-nav-head,.order-step{background:var(--surface-2)!important}
.notif-row.unread{background:var(--soft)!important}
.feature-icon,.guide-icon,.member-guide-icon,.curriculum-no,.certificate-mark{background:var(--soft)!important;color:var(--link)!important}

/* Navigation / header contrast. */
.site-navbar{background:var(--surface)!important;border-color:var(--line)!important}
.site-navbar .navbar-brand,.site-navbar .nav-link{color:var(--text-strong)!important}
.site-navbar .nav-link:hover,.site-navbar .nav-link.active{color:var(--link)!important}
.navbar-toggler{background:var(--surface-2)!important;border-color:var(--line)!important}
.navbar-toggler-icon{filter:none}
html[data-theme="dark"] .navbar-toggler-icon{filter:invert(1) brightness(1.4)}

/* Dashboard surfaces. */
.dashboard{background:var(--page-bg)!important}
.topbar{background:var(--surface)!important;color:var(--text)!important;border-color:var(--line)!important}
.sidebar{background:#0b1322!important;color:#f8fafc!important}
.sidebar a{color:#cfdae9!important}
.sidebar a:hover,.sidebar a.active{background:#17243a!important;color:#fff!important}
html[data-theme="dark"] .topbar .text-dark{color:var(--text-strong)!important}
html[data-theme="dark"] .topbar .btn-light{background:#1a2537!important;border-color:#334155!important;color:#f8fafc!important}

/* Theme toggle: compact pill on desktop, clean icon button on mobile. */
.theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:9px;
  min-width:116px;
  height:42px;
  padding:4px 13px 4px 5px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text-strong);
  box-shadow:0 5px 18px rgba(15,23,42,.08);
  font:inherit;
  font-size:.78rem;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.theme-toggle:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(15,23,42,.13);background:var(--surface-3)}
.theme-toggle:active{transform:translateY(0) scale(.98)}
.theme-toggle:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus),0 8px 24px rgba(15,23,42,.12)}
.theme-toggle i[data-theme-icon]{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  flex:0 0 32px;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  font-size:.82rem;
  box-shadow:0 3px 10px rgba(23,105,255,.28);
}
html[data-theme="dark"] .theme-toggle i[data-theme-icon]{background:#f8fafc;color:#18233a;box-shadow:0 3px 10px rgba(255,255,255,.09)}
.theme-toggle .theme-label{color:var(--text-strong);white-space:nowrap}

/* Auth pages: keep the entire card and controls readable. */
.auth-page{background:radial-gradient(circle at top right,var(--soft),transparent 42%),var(--page-bg)!important;color:var(--text)!important}
.auth-card{background:var(--surface)!important;border-color:var(--line)!important;color:var(--text)!important;box-shadow:var(--shadow)!important}
.auth-logo{color:var(--text-strong)!important}
.auth-title{color:var(--text-strong)!important}
.auth-divider{color:var(--muted)!important}

/* Course/hero surfaces. */
.hero{background:linear-gradient(135deg,var(--surface-3),var(--surface))!important;color:var(--text)!important}
.hero h1,.hero h2,.hero h3,.section-title,.dashboard-title,.learn-title{color:var(--text-strong)!important}
.hero-card,.course-card,.panel,.hero-course-card,.course-offer-card,.continue-card,.order-card,.certificate-mini,
.certificate-pro{background:var(--surface)!important;border-color:var(--line)!important;box-shadow:var(--shadow)!important;color:var(--text)!important}
.course-thumb{background:var(--surface-2)!important}
.price-badge.free{background:#dcfce7!important;color:#166534!important}
.price-badge.paid{background:#fff0df!important;color:#9a3412!important}
html[data-theme="dark"] .price-badge.free{background:#123a2b!important;color:#c7f8dc!important}
html[data-theme="dark"] .price-badge.paid{background:#3d2412!important;color:#ffd8af!important}

/* Progress bars and code/content areas. */
.progress{background:var(--surface-3)!important}
.progress-bar{background:linear-gradient(90deg,var(--primary),#5d9cff)!important}
pre,code,kbd,samp{background:var(--code-bg)!important;color:var(--text)!important;border-color:var(--line)!important}
blockquote{color:var(--text)!important;border-color:var(--line)!important}

/* Certificate readability. */
html[data-theme="dark"] .certificate-frame{background:#0f172a!important;border-color:#50627c!important}
.certificate-name,.certificate-course,.certificate-title{color:var(--text-strong)!important}
.certificate-copy,.certificate-lead,.certificate-meta,.certificate-meta b,.certificate-kicker,.letterspace{color:var(--muted)!important}
.certificate-meta b{color:var(--text-strong)!important}
.certificate-name{border-color:var(--line)!important}

/* Responsive toggle and small-screen readability. */
@media(max-width:767px){
  .theme-toggle{min-width:42px;width:42px;height:42px;padding:4px;justify-content:center;gap:0}
  .theme-toggle .theme-label{display:none}
  .theme-toggle i[data-theme-icon]{width:32px;height:32px;flex-basis:32px}
  .auth-page{padding:16px;min-height:100svh}
  .auth-card{padding:24px 18px}
  .topbar{min-height:68px;height:auto;padding:12px 14px}
  .topbar>div:last-child{gap:8px!important}
}

/* CAPTCHA / Verifikasi Keamanan - explicit accessible contrast in both themes */
.captcha-box{
  color:var(--text)!important;
  background:var(--surface-3)!important;
  border-color:#9bbcff!important;
}
.captcha-box .captcha-label{
  color:var(--primary)!important;
}
.captcha-box .form-label,
.captcha-box .form-label b,
.captcha-box label,
.captcha-box label b{
  color:var(--text-strong)!important;
}
.captcha-box .form-control{
  color:var(--text-strong)!important;
  -webkit-text-fill-color:var(--text-strong)!important;
  background:var(--input-bg)!important;
  border-color:var(--line)!important;
}
.captcha-box .form-control::placeholder{
  color:var(--muted)!important;
  opacity:1;
}
html[data-theme="dark"] .captcha-box{
  background:#18243a!important;
  border-color:#4f79c5!important;
}
html[data-theme="dark"] .captcha-box .captcha-label{
  color:#8db7ff!important;
}
html[data-theme="dark"] .captcha-box .form-label,
html[data-theme="dark"] .captcha-box .form-label b,
html[data-theme="dark"] .captcha-box label,
html[data-theme="dark"] .captcha-box label b{
  color:#f8fafc!important;
}
html[data-theme="dark"] .captcha-box .form-control{
  color:#f8fafc!important;
  -webkit-text-fill-color:#f8fafc!important;
  background:#0f172a!important;
  border-color:#46546b!important;
}
html[data-theme="dark"] .captcha-box .form-control::placeholder{color:#aeb9ca!important;}


/* V3.14 - Existing order payment center (scoped; preserves v3.9 UI) */
.order-payment-page{max-width:1180px;margin:0 auto}.order-payment-main{overflow:hidden}.order-code-large{font-size:1.15rem;font-weight:800;letter-spacing:.04em;color:var(--text-strong)}.order-course-box{display:flex;gap:18px;align-items:center;padding:16px;background:var(--surface-2);border:1px solid var(--line);border-radius:18px}.order-course-box img{width:112px;height:76px;object-fit:cover;border-radius:14px;background:#eef2f7;flex:none}.order-course-box h3{color:var(--text-strong)}.order-amount-card{display:flex;justify-content:space-between;gap:20px;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}.order-amount{font-size:2rem;font-weight:800;color:var(--link);margin-top:3px}.payment-steps{display:grid;gap:10px}.payment-step{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);color:var(--text)}.payment-step>span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#dfe7f2;color:var(--text-strong);font-weight:800;flex:none}.payment-step.is-done>span{background:#dff7eb;color:#137448}.payment-step.is-current{border-color:rgba(23,105,255,.35);box-shadow:0 0 0 3px rgba(23,105,255,.07)}.payment-step.is-current>span{background:var(--primary);color:#fff}.payment-step b{display:block;color:var(--text-strong)}.payment-step small{display:block;color:var(--muted);margin-top:3px;line-height:1.5}.payment-method-card{position:sticky;top:105px}.bank-box{padding:20px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,var(--surface-2),var(--surface))}.bank-name{font-size:1.45rem;font-weight:800;color:var(--text-strong)}.bank-account{font-size:1.3rem;font-weight:800;letter-spacing:.04em;color:var(--link);overflow-wrap:anywhere}.payment-instruction{padding:15px 16px;border:1px dashed var(--line);border-radius:14px;color:var(--text);line-height:1.65;background:var(--surface-2)}
@media(max-width:767px){.order-payment-page{max-width:none}.order-course-box{align-items:flex-start}.order-course-box img{width:92px;height:64px}.order-amount-card{align-items:flex-start;flex-direction:column}.order-amount-card .text-end{text-align:left!important}.payment-method-card{position:static}.order-code-large{font-size:1rem}.order-payment-main{padding:20px!important}}
html[data-theme="dark"] .order-course-box img{background:#0b1220}


/* Compact payment status filters */
.payments-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.payments-filter{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;padding:4px;border:1px solid var(--line);background:var(--surface-2);border-radius:14px}
.payments-filter-btn{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:8px 13px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--muted)!important;text-decoration:none!important;font-size:.78rem;font-weight:800;line-height:1.1;white-space:nowrap;transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease}
.payments-filter-btn:hover{background:var(--surface);color:var(--text-strong)!important;border-color:var(--line);transform:translateY(-1px)}
.payments-filter-btn.is-active{background:var(--primary);color:#fff!important;border-color:var(--primary);box-shadow:0 4px 12px rgba(23,105,255,.2)}
@media (max-width:767px){.payments-page-head{align-items:stretch}.payments-filter{width:100%;overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;padding:4px}.payments-filter-btn{flex:0 0 auto}}


/* V5.5 - WhatsApp floating button */
.wa-float{position:fixed;right:20px;bottom:20px;width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.65rem;box-shadow:0 10px 24px rgba(37,211,102,.4);z-index:1050;transition:transform .18s ease,box-shadow .18s ease}
.wa-float:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 14px 30px rgba(37,211,102,.5);color:#fff}
@media(max-width:767px){.wa-float{right:14px;bottom:14px;width:52px;height:52px;font-size:1.45rem}}

/* V5.5 - FAQ accordion (public home) */
.faq-accordion .accordion-item{border:1px solid var(--line);border-radius:14px!important;overflow:hidden;margin-bottom:12px;background:var(--surface)}
.faq-accordion .accordion-button{font-weight:700;color:var(--text-strong);background:var(--surface);padding:18px 20px}
.faq-accordion .accordion-button:not(.collapsed){color:var(--primary);background:var(--surface-2);box-shadow:none}
.faq-accordion .accordion-button:focus{box-shadow:none;border-color:var(--line)}
.faq-accordion .accordion-body{color:var(--muted);padding:0 20px 20px;line-height:1.7}