.qnt-app{--qnt-primary:#143c68;--qnt-heading-color:#173a62;--qnt-card-radius:13px;font:inherit;color:#18324b;line-height:1.55;max-width:1440px;margin:20px auto 60px}.qnt-app *{box-sizing:border-box}.qnt-app a{text-decoration:none}.qnt-app h1,.qnt-app h2,.qnt-app h3{line-height:1.3;color:var(--qnt-heading-color)}.qnt-app .qnt-layout{display:grid;grid-template-columns:238px minmax(0,1fr);gap:0;min-height:650px;background:#f5f8fc;border:1px solid #e4eaf0;border-radius:18px;overflow:hidden}.qnt-side{padding:26px 16px;background:#12375e;display:flex;flex-direction:column;gap:8px}.qnt-brand{display:flex;gap:10px;align-items:center;font-weight:800;line-height:1.35}.qnt-side .qnt-brand{color:#fff;padding:6px 8px 26px}.qnt-logo{width:42px;height:42px;object-fit:contain}.qnt-brand-icon{font-size:30px;color:#ddbd7f}.qnt-side>a{display:flex;gap:12px;align-items:center;color:#e8f2fd;padding:11px 14px;border-radius:9px;font-size:14px}.qnt-side>a:hover,.qnt-side>a.qnt-active{background:#2b5987;color:white}.qnt-main{padding:30px;min-width:0}.qnt-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}.qnt-head h2{margin:2px 0;font-size:25px}.qnt-head small{color:#66809c}.qnt-user{background:white;border:1px solid #e1e8f0;border-radius:30px;padding:8px 13px;font-size:13px}.qnt-welcome{background:linear-gradient(110deg,#133963,#205b92);border-radius:14px;padding:28px;color:white}.qnt-welcome h3{color:white;font-size:24px;margin:6px 0}.qnt-welcome p{margin:8px 0 0;color:#e4effb}.qnt-welcome small{letter-spacing:1.2px;color:#c2e0fc}.qnt-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0 28px}.qnt-metrics>div{background:white;border:1px solid #e5ebf1;border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:4px}.qnt-metrics strong{font-size:27px;color:#163d69}.qnt-metrics span,.qnt-app small{font-size:12px;color:#66809a}.qnt-courses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.qnt-card,.qnt-panel{background:#fff;border:1px solid #e2eaf1;border-radius:var(--qnt-card-radius);padding:23px;min-width:0;box-shadow:0 4px 20px rgba(12,42,72,.035)}.qnt-card h3{margin:10px 0;font-size:19px}.qnt-card p{color:#63758a;font-size:14px}.qnt-card .qnt-btn{display:inline-block;margin-top:15px}.qnt-btn,.qnt-app input[type=submit]{display:inline-block;background:var(--qnt-primary);border:0;border-radius:9px;color:#fff!important;padding:11px 17px;font-size:14px;font-weight:700;cursor:pointer}.qnt-btn:hover,.qnt-app input[type=submit]:hover{opacity:.88}.qnt-tag{background:#e9f5ef;color:#16724e;padding:5px 10px;border-radius:20px;font-size:12px;font-weight:700}.qnt-progress-label{display:flex;justify-content:space-between;gap:10px;margin:20px 0 7px;font-size:13px}.qnt-progressbar{height:8px;background:#e9eef4;border-radius:30px;overflow:hidden}.qnt-progressbar>span{display:block;height:100%;background:#2784d4;border-radius:30px}.qnt-back{display:inline-block;margin:0 0 20px;color:#1f659d}.qnt-lesson-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px;align-items:start}.qnt-lesson-body h2{margin-top:0}.qnt-lesson-text{margin:20px 0}.qnt-video{aspect-ratio:16/9;position:relative;background:#121b25;border-radius:10px;overflow:hidden}.qnt-video iframe{width:100%;height:100%;border:0}.qnt-lesson-item{display:block;padding:12px;border-bottom:1px solid #e9eef5;color:#325470!important;font-size:14px}.qnt-lesson-item.selected{background:#eaf2f9;color:#163e6c!important;font-weight:700}.qnt-done{padding:13px;border-radius:9px;background:#e8f7ed;color:#146a3e}.qnt-completion{margin-top:20px}.qnt-auth{max-width:440px;background:#fff;padding:34px;margin:40px auto;border:1px solid #e2eaf1;border-radius:16px;box-shadow:0 10px 35px rgba(16,54,90,.08)}.qnt-auth .qnt-brand{color:#143c68;margin-bottom:26px}.qnt-auth h2{margin-bottom:8px}.qnt-auth p{color:#5d7186}.qnt-auth label{display:block;font-size:14px;font-weight:600}.qnt-auth input[type=text],.qnt-auth input[type=password]{width:100%;padding:12px;border:1px solid #d4e0ec;border-radius:9px;margin-top:5px;background:white;color:#152b44}.qnt-auth .login-submit{margin-bottom:8px}.qnt-public{padding:30px}.qnt-public-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:35px;gap:15px}.qnt-public-head .qnt-brand{color:#143c68}.qnt-certificate{background:#fffdf6;border:8px double #c8aa68;text-align:center;min-height:530px;padding:55px 20px;margin:16px auto;max-width:850px;box-shadow:0 5px 22px rgba(30,45,60,.06)}.qnt-certificate h2{letter-spacing:2px;font-size:clamp(21px,3vw,34px)}.qnt-certificate h1{font-size:clamp(27px,4vw,43px);border-bottom:1px solid #cba96a;display:inline-block;padding-bottom:9px}.qnt-certificate h3{font-size:23px}.qnt-certificate p{color:#536577}.qnt-seal{font-size:50px;color:#b18a42}.qnt-mobile-nav{display:none}.qnt-print-help{display:flex;gap:12px;align-items:center;justify-content:center}.qnt-app .qnt-panel a:not(.qnt-btn){color:#2468ab}@media(max-width:1024px){.qnt-app .qnt-layout{grid-template-columns:185px minmax(0,1fr)}.qnt-main{padding:22px}.qnt-lesson-grid{grid-template-columns:minmax(0,1fr)}.qnt-lesson-list{order:-1}}@media(max-width:767px){.qnt-app{margin:0 auto 25px}.qnt-app .qnt-layout{display:block;border-radius:0;min-height:70vh}.qnt-side{display:none}.qnt-main{padding:17px 14px 95px}.qnt-head h2{font-size:21px}.qnt-user{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qnt-welcome{padding:21px}.qnt-welcome h3{font-size:20px}.qnt-metrics{gap:8px}.qnt-metrics>div{padding:12px 8px}.qnt-metrics strong{font-size:24px}.qnt-metrics span{font-size:11px}.qnt-courses{grid-template-columns:1fr;gap:12px}.qnt-card,.qnt-panel{padding:17px}.qnt-mobile-nav{display:flex;justify-content:space-around;align-items:center;position:sticky;bottom:0;background:white;border-top:1px solid #e2eaf1;z-index:5;box-shadow:0 -4px 20px rgba(20,45,80,.05);padding:10px 4px max(10px,env(safe-area-inset-bottom))}.qnt-mobile-nav a{display:flex;flex-direction:column;align-items:center;gap:2px;color:#27547b;font-size:20px;min-width:62px}.qnt-mobile-nav span{font-size:11px}.qnt-public{padding:18px}.qnt-auth{margin:20px 12px;padding:24px}.qnt-certificate{padding:28px 13px;min-height:430px}}@media print{body *{visibility:hidden!important}.qnt-certificate,.qnt-certificate *{visibility:visible!important}.qnt-certificate{position:absolute!important;top:0;left:0;width:100%!important;max-width:none!important;min-height:0;margin:0;box-shadow:none;break-inside:avoid}.qnt-app .qnt-layout,.qnt-main{display:block!important;background:white!important;border:0!important;padding:0!important}@page{size:landscape;margin:12mm}}

/* Variabel gaya khusus Bricks; tetap kompatibel dengan shortcode yang tidak memakai Bricks */
.qnt-bricks-element .qnt-app{font-family:inherit;max-width:100%}
.qnt-bricks-element .qnt-app .qnt-head h2,.qnt-bricks-element .qnt-app .qnt-card h3,.qnt-bricks-element .qnt-app .qnt-panel h3{color:var(--qnt-heading-color)}

/* Elemen progres mandiri untuk Bricks */
.qnt-progress-widget{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px}.qnt-progress-widget>h2{grid-column:1/-1;margin:0 0 6px}.qnt-progress-widget .qnt-card{min-width:0}.qnt-progress-widget .qnt-card h3{margin:0}

.qnt-quiz{padding:12px 0}.qnt-choice{display:flex;align-items:start;gap:12px;padding:13px 14px;border:1px solid #dce6ef;border-radius:10px;margin:10px 0;cursor:pointer;background:#fff}.qnt-choice:hover{border-color:var(--qnt-primary);background:#f4f8fc}.qnt-choice input{margin-top:5px;flex:none}.qnt-quiz-error{padding:12px 14px;color:#9a2e2e;background:#fff0ef;border-radius:9px}.qnt-app :focus-visible{outline:3px solid #e0aa4b;outline-offset:2px}

/* QNT 1.6: pilihan desain global dan elemen Bricks; hanya mengubah komponen QNT */
.qnt-app .qnt-courses{grid-template-columns:repeat(var(--qnt-card-columns,2),minmax(0,1fr))}
.qnt-app .qnt-card,.qnt-app .qnt-panel{background:var(--qnt-element-card-bg,#fff);border-color:var(--qnt-element-card-border,#e2eaf1);padding:var(--qnt-element-card-padding,23px)}
.qnt-app .qnt-btn,.qnt-app input[type=submit]{border-radius:var(--qnt-element-button-radius,9px)}
.qnt-app.qnt-card-style-border .qnt-card,.qnt-app.qnt-card-style-border .qnt-panel{box-shadow:none;border-width:2px}
.qnt-app.qnt-card-style-flat .qnt-card,.qnt-app.qnt-card-style-flat .qnt-panel{box-shadow:none}
.qnt-app .qnt-card{overflow-wrap:anywhere;transition:box-shadow .16s ease,transform .16s ease}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.qnt-app .qnt-card:hover{box-shadow:0 9px 26px rgba(12,42,72,.09);transform:translateY(-2px)}}
@media(max-width:767px){.qnt-app .qnt-courses{grid-template-columns:minmax(0,1fr)}.qnt-app .qnt-card,.qnt-app .qnt-panel{padding:min(var(--qnt-element-card-padding,17px),19px)}.qnt-app .qnt-mobile-nav{position:sticky;bottom:0;max-width:100%;overflow-x:auto}.qnt-app .qnt-head{flex-wrap:wrap}.qnt-app .qnt-lesson-body,.qnt-app .qnt-panel{min-width:0}}
@media(prefers-reduced-motion:reduce){.qnt-app .qnt-card{transition:none!important}}
/* QNT Academy 1.7 — premium responsive refinements, isolated inside LMS */
.qnt-app{font-family:var(--qnt-font,system-ui,sans-serif);font-size:var(--qnt-font-size,16px);color:#21344a;line-height:1.65;max-width:100%;min-width:0}
.qnt-app *{box-sizing:border-box}.qnt-app h1,.qnt-app h2,.qnt-app h3,.qnt-app h4{color:var(--qnt-heading-color,#143c68);line-height:1.32;letter-spacing:-.025em}.qnt-app a{text-underline-offset:3px}.qnt-app a:focus-visible,.qnt-app button:focus-visible,.qnt-app input:focus-visible{outline:3px solid #e0a945;outline-offset:3px}
.qnt-app .qnt-card{padding:var(--qnt-element-card-padding,22px);transition:box-shadow .18s ease,transform .18s ease}.qnt-app .qnt-card:hover{box-shadow:0 13px 30px rgba(17,51,87,.09);transform:translateY(-2px)}.qnt-app .qnt-card-cover{margin:calc(-1 * var(--qnt-element-card-padding,22px)) calc(-1 * var(--qnt-element-card-padding,22px)) 18px;overflow:hidden;border-radius:var(--qnt-card-radius,14px) var(--qnt-card-radius,14px) 0 0;aspect-ratio:16/9;background:#dceaf5}.qnt-app .qnt-cover{width:100%;height:100%;object-fit:cover;display:block}
.qnt-app .qnt-btn,.qnt-app button.qnt-btn{border-radius:var(--qnt-element-button-radius,11px);min-height:44px;display:inline-flex;justify-content:center;align-items:center;text-align:center;gap:8px;padding:10px 17px;font-weight:700;cursor:pointer}.qnt-app .qnt-btn:hover{filter:brightness(1.07)}
.qnt-app .qnt-progressbar{overflow:hidden;border-radius:50px}.qnt-app .qnt-progressbar span{border-radius:inherit}.qnt-app .qnt-welcome{border-radius:18px;padding:clamp(19px,3vw,30px)}.qnt-app .qnt-welcome h3{color:#fff}.qnt-app .qnt-metrics>div{border-radius:14px}.qnt-app .qnt-panel{border-radius:15px}.qnt-app .qnt-auth{max-width:460px;margin-inline:auto;border-radius:18px}.qnt-app input[type=text],.qnt-app input[type=password],.qnt-app input[type=email]{max-width:100%;min-height:43px;border-radius:9px}.qnt-app .qnt-video iframe{width:100%;max-width:100%;aspect-ratio:16/9}.qnt-app .qnt-lesson-item{border-radius:9px}
@media(max-width:767px){.qnt-app{font-size:max(15px,var(--qnt-font-size,16px))}.qnt-app .qnt-layout{min-width:0}.qnt-app .qnt-main{min-width:0;padding-bottom:75px}.qnt-app .qnt-courses{grid-template-columns:minmax(0,1fr)!important}.qnt-app .qnt-lesson-grid{grid-template-columns:minmax(0,1fr)!important}.qnt-app .qnt-head{gap:12px;flex-wrap:wrap}.qnt-app .qnt-mobile-nav{z-index:999;bottom:0;max-width:100%;padding-bottom:env(safe-area-inset-bottom,0px)}.qnt-app .qnt-card{padding:18px}.qnt-app .qnt-card-cover{margin:-18px -18px 15px}.qnt-app .qnt-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.qnt-app .qnt-metrics>div{min-width:0;padding:10px 5px}.qnt-app .qnt-metrics span{font-size:11px}.qnt-app .qnt-lesson-text img{height:auto;max-width:100%}.qnt-app .qnt-print-help{padding-bottom:95px}}
@media(prefers-reduced-motion:reduce){.qnt-app *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* QNT Bricks 1.8 controls: vars scoped to each independent element instance. */
.qnt-bricks-element{min-width:0;max-width:100%;}
.qnt-bricks-element .qnt-app{font-family:var(--qnt-font,system-ui,sans-serif);font-size:var(--qnt-font-size,16px);line-height:1.65;max-width:100%;}
.qnt-bricks-element .qnt-app .qnt-card,.qnt-bricks-element .qnt-app .qnt-panel{background:var(--qnt-element-card-bg,#fff);border-color:var(--qnt-element-card-border,#e2eaf1);border-radius:var(--qnt-card-radius,14px);padding:var(--qnt-element-card-padding,22px);box-shadow:var(--qnt-element-card-shadow,0 4px 20px rgba(12,42,72,.035));}
.qnt-bricks-element .qnt-app .qnt-btn,.qnt-bricks-element .qnt-app button.qnt-btn{border-radius:var(--qnt-element-button-radius,11px);}
.qnt-bricks-element .qnt-app .qnt-courses{grid-template-columns:repeat(var(--qnt-card-columns,2),minmax(0,1fr));}
.qnt-bricks-element .qnt-app h1,.qnt-bricks-element .qnt-app h2,.qnt-bricks-element .qnt-app h3{color:var(--qnt-heading-color,#143c68)}
.qnt-bricks-element .qnt-app .qnt-welcome h3{color:#fff;}
.qnt-bricks-element .qnt-app .qnt-card h3{font-size:var(--qnt-element-card-heading-size,19px)}
@media(max-width:767px){.qnt-bricks-element .qnt-app .qnt-courses{grid-template-columns:minmax(0,1fr)!important}.qnt-bricks-element .qnt-app .qnt-card,.qnt-bricks-element .qnt-app .qnt-panel{padding:min(var(--qnt-element-card-padding,18px),24px)}}