:root{
--primary:#016364;--primary-dark:#1e40af;--primary-soft:#e8f4f4;
--ink:#0f172a;--muted:#64748b;--line:#e2e8f0;--bg:#f5f7fb;--card:#fff;
--success:#016364;--warning:#d97706;--danger:#dc2626;--shadow:0 10px 28px rgba(15,23,42,.06);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55}
a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}button{cursor:pointer}
.app-shell{min-height:100vh;display:flex}.sidebar{position:fixed;inset:0 auto 0 0;width:260px;background:#0f172a;color:#fff;z-index:100;display:flex;flex-direction:column;padding:18px 14px;overflow-y:auto}
.sidebar-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 6px 16px}.sidebar .brand{color:#fff;display:flex;align-items:center;gap:10px}.brand-logo{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,#016364,#48d884);font-weight:800}.brand-text{display:flex;flex-direction:column;line-height:1.15}.brand-text small{font-size:11px;color:#94a3b8;margin-top:3px}.sidebar-close{display:none;border:0;background:transparent;color:#fff;font-size:18px}
.user-card{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:11px;margin:4px 2px 18px}.profile-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#d7efeb;color:#016364;font-weight:800}.user-card strong{display:block;font-size:13px}.user-card small{display:block;color:#94a3b8;font-size:11px;margin-top:2px}
.sidebar-nav{display:flex;flex-direction:column;gap:4px}.nav-section{font-size:10px;font-weight:800;letter-spacing:.12em;color:#64748b;margin:13px 9px 5px}.sidebar-nav a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;color:#cbd5e1;font-size:14px;font-weight:600}.sidebar-nav a.active{background:rgba(0,119,168,.16);color:#fff}.sidebar-nav .nav-logout{margin-top:6px;color:#fca5a5}.sidebar-nav .nav-logout:hover{background:rgba(220,38,38,.15);color:#fff}
.sidebar-profile{margin:18px 2px 2px; margin-top:auto; flex-shrink:0}
.main-shell{margin-left:260px;min-width:0;flex:1;min-height:100vh}.mobile-topbar{display:none}.page{max-width:1280px;margin:0 auto;padding:30px 28px 70px;min-height:calc(100vh - 50px)}.page-public{margin-left:auto;margin-right:auto}
.site-footer{text-align:center;padding:24px 16px;color:var(--muted);border-top:1px solid var(--line);background:#fff}.site-footer.with-sidebar{margin-left:260px}
.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#016364 0%,#016364 55%,#48d884 100%);color:#fff;border-radius:24px;padding:34px;margin-bottom:24px;box-shadow:0 18px 40px rgba(0,119,168,.18)}.hero h1{margin:0 0 8px;font-size:clamp(26px,4vw,38px);letter-spacing:-.02em}.hero p{margin:0;max-width:780px;opacity:.92}
.page-title{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}.page-title h1{margin:0}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow)}.card h2,.card h3{margin-top:0}
.kpi-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.kpi{background:#fff;border:1px solid var(--line);border-radius:16px;padding:17px;box-shadow:var(--shadow)}.kpi strong{display:block;font-size:28px;margin-top:4px}
.muted{color:var(--muted)}.small-note{font-size:13px;color:var(--muted)}
.actions{display:flex;gap:8px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--primary);color:#fff!important;border:0;border-radius:11px;padding:10px 14px;font-weight:700;transition:.18s}.btn:hover{background:var(--primary-dark);transform:translateY(-1px)}.btn.secondary{background:#eaf0f7;color:var(--ink)!important}.btn.success{background:var(--success)}.btn.danger{background:var(--danger)}.btn.small{padding:7px 10px;font-size:13px}
.form-group{margin-bottom:14px}.form-group label{display:block;font-weight:700;margin-bottom:6px}.form-group input,.form-group select,.form-group textarea{width:100%;border:1px solid #cbd5e1;border-radius:11px;padding:11px 12px;background:#fff;outline:none}.form-group textarea{min-height:120px;resize:vertical}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,119,168,.12)}
.alert{padding:12px 14px;border-radius:11px;margin-bottom:18px}.alert.success{background:#e3f3f3;color:#166534}.alert.error{background:#fee2e2;color:#991b1b}.alert.warning{background:#fef3c7;color:#92400e}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px}.table{width:100%;min-width:760px;border-collapse:collapse;background:#fff}.table th,.table td{padding:12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.table th{background:#f8fafc;color:#475569;font-size:13px}
.badge{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:800;background:#e2e8f0;color:#334155}.badge.success{background:#e3f3f3;color:#166534}.badge.warning{background:#fef3c7;color:#92400e}.badge.neutral{background:#e2e8f0;color:#334155}
.progres{height:10px;background:#e5e7eb;border-radius:999px;overflow:hidden}.progres>span{display:block;height:100%;background:linear-gradient(90deg,#016364,#48d884)}
.class-card{display:flex;flex-direction:column;gap:10px;min-height:245px}.class-card .btn{margin-top:auto}
.auth-shell{min-height:78vh;display:grid;place-items:center}.auth-card{width:min(480px,100%);background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:0 18px 50px rgba(15,23,42,.09)}
.section-label{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);margin-bottom:8px}
.lesson-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px}.lesson-sidebar{position:sticky;top:25px;height:max-content}.lesson-nav{display:grid;gap:8px}.lesson-link{border:1px solid var(--line);background:#fff;border-radius:13px;padding:12px;display:flex;gap:10px;align-items:flex-start}.lesson-link.current{background:#edf7f7;border-color:#63c7b5}.lesson-link .num{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#e2e8f0;font-size:12px;font-weight:800;flex:0 0 auto}
.stage-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow);margin-bottom:14px}.stage-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.stage-icon{width:42px;height:42px;border-radius:12px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;font-weight:800}.video-frame{width:100%;aspect-ratio:16/9;border:0;border-radius:14px;background:#0b1220}.question{border:1px solid var(--line);border-radius:14px;padding:17px;margin-bottom:14px;background:#fff}.option{display:flex;gap:9px;align-items:flex-start;padding:10px;border:1px solid var(--line);border-radius:10px;margin-top:8px}.option:hover{background:#f8fafc}.result-box{background:linear-gradient(135deg,#edf7f7,#f8fbff);border:1px solid #a8ddd3;border-radius:16px;padding:18px}.topic{border:1px solid var(--line);border-radius:13px;padding:14px;background:#fff}.empty{text-align:center;padding:36px;color:var(--muted)}.score-ring{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:var(--line);position:relative}.divider{height:1px;background:var(--line);margin:18px 0}.inline{display:inline}.right{margin-left:auto}
@media(max-width:1100px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){
  .sidebar{width:275px;transform:translateX(-102%);transition:transform .25s ease;box-shadow:15px 0 35px rgba(0,0,0,.18)}
  .sidebar.open{transform:translateX(0)}.sidebar-close{display:block}.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(2,6,23,.48);z-index:90}.sidebar-overlay.open{display:block}
  .main-shell{margin-left:0}.mobile-topbar{height:58px;display:flex;align-items:center;gap:12px;padding:0 14px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:70}
  .mobile-menu-btn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 10px}.mobile-title{font-weight:800}
  .site-footer.with-sidebar{margin-left:0}.page{padding:20px 14px 48px}
  .lesson-layout{grid-template-columns:1fr}.lesson-sidebar{position:static}
}
@media(max-width:700px){.grid,.grid-2{grid-template-columns:1fr}.hero{padding:25px;border-radius:20px}.card,.stage-card{padding:16px}}
@media(max-width:480px){.kpi-strip{grid-template-columns:1fr}.actions{display:grid;grid-template-columns:1fr}.actions .btn,.btn{width:100%}.hero h1{font-size:25px}}

.dashboard-stat{font-size:13px;color:var(--muted)}
.topic strong{letter-spacing:-.01em}

.payment-instructions code{background:#f1f5f9;padding:2px 5px;border-radius:5px;font-size:12px}
.payment-instructions .card{min-height:100%}

/* Payment pages */
.payment-page .page-title{margin-bottom:22px}.payment-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}.payment-summary .kpi{min-height:104px}.payment-info{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:18px;margin-bottom:20px}.payment-account{background:linear-gradient(135deg,#edf7f7,#f8fbff);border:1px solid #a8ddd3;border-radius:18px;padding:22px}.payment-account .account-number{font-size:clamp(24px,3vw,32px);font-weight:850;letter-spacing:.03em;word-break:break-word}.payment-account .account-name{font-size:18px;font-weight:800}.payment-steps{border:1px solid var(--line);border-radius:18px;padding:22px;background:#fff}.payment-steps ol{margin:12px 0 0;padding-left:22px}.payment-steps li{padding:7px 0}.payment-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.payment-card{display:flex;flex-direction:column;gap:14px}.payment-card .payment-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.payment-card .payment-amount{font-size:25px;font-weight:850}.payment-card .payment-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px}.payment-meta-box{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:11px}.payment-meta-box span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:800}.payment-admin-table .table{min-width:900px}.payment-admin-table .table td,.payment-admin-table .table th{vertical-align:middle}.payment-actions{display:flex;gap:7px;flex-wrap:wrap}.payment-form{border-top:1px solid var(--line);padding-top:16px}.payment-form .btn{width:auto}.payment-instructions code{word-break:break-word}
@media(max-width:1050px){.payment-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.payment-info,.payment-list{grid-template-columns:1fr}}
@media(max-width:700px){.bar-row{grid-template-columns:1fr 55px;gap:7px}.bar-label{grid-column:1/-1}.bar-track{grid-column:1}.bar-row strong{grid-column:2;grid-row:2}.payment-summary{grid-template-columns:1fr}.payment-account,.payment-steps{padding:17px}.payment-card .payment-meta{grid-template-columns:1fr}.payment-form .btn{width:100%}}
.profile-link{color:#fff!important;cursor:pointer;transition:.18s}.profile-link:hover{background:rgba(0,119,168,.18);transform:translateY(-1px)}
.profile-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;align-items:start}.profile-preview{text-align:center;position:sticky;top:25px}.profile-preview .divider{margin:18px 0}.profile-avatar-lg{width:82px;height:82px;margin:0 auto 14px;font-size:28px}.profile-preview h2{margin:0 0 8px;font-size:21px}
@media(max-width:820px){.profile-layout{grid-template-columns:1fr}.profile-preview{position:static}}

/* Dashboard visual style inspired by modern analytics cards */
.dashboard-hero{display:flex;align-items:center;justify-content:space-between;gap:20px}.hero-action{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;background:#fff;color:#016364;padding:11px 15px;border-radius:12px;font-weight:800;box-shadow:0 8px 20px rgba(15,23,42,.12)}
.dashboard-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.dashboard-kpi{background:#fff;border:1px solid var(--line);border-radius:17px;padding:16px;box-shadow:var(--shadow);display:flex;align-items:center;gap:12px}.dashboard-kpi .kpi-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-weight:900;font-size:17px;flex:0 0 auto}.dashboard-kpi span:not(.kpi-icon){display:block;color:var(--muted);font-size:12px;font-weight:700}.dashboard-kpi strong{display:block;font-size:26px;line-height:1.1;margin:3px 0}.dashboard-kpi small{color:var(--muted);font-size:11px}
.dashboard-mosaic{display:grid;grid-template-columns:1fr 1.45fr;gap:18px}.dash-panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow);min-width:0}.wide-panel{min-height:310px}.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}.panel-head h2{margin:0;font-size:18px}.panel-caption{font-size:11px;color:var(--muted);background:#f8fafc;border:1px solid var(--line);padding:5px 8px;border-radius:999px}.donut-wrap{display:flex;align-items:center;justify-content:center;gap:24px;min-height:245px}.donut{width:170px;height:170px;border-radius:50%;background:conic-gradient(var(--c1) 0 calc(var(--p1)*1%),var(--c2) calc(var(--p1)*1%) calc(var(--p2)*1%),var(--c3,#e2e8f0) calc(var(--p2)*1%) 100%);display:grid;place-items:center;position:relative;flex:0 0 auto}.donut:after{content:"";position:absolute;inset:25px;background:#fff;border-radius:50%}.donut>div{position:relative;z-index:1;text-align:center}.donut strong{display:block;font-size:25px}.donut small{display:block;color:var(--muted);font-size:11px}.legend{display:grid;gap:10px;min-width:145px}.legend span{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}.legend i{width:9px;height:9px;border-radius:50%;display:block}.legend b{margin-left:auto;color:var(--ink)}
.horizontal-chart{display:grid;gap:15px;padding:10px 4px}.hbar-item{display:grid;gap:6px}.hbar-label{display:flex;justify-content:space-between;gap:12px;font-size:12px;font-weight:700}.hbar-label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hbar-label strong{color:var(--primary)}.hbar-track{height:13px;background:#eef2f7;border-radius:99px;overflow:hidden}.hbar-track span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#48d884,#016364)}
.vertical-chart{height:220px;display:flex;align-items:flex-end;justify-content:space-around;gap:12px;padding:8px 6px 0;border-bottom:1px solid var(--line);overflow-x:auto}.vbar-item{height:100%;min-width:58px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px}.vbar-item strong{font-size:12px;color:var(--ink)}.vbar-track{height:160px;width:40px;background:#eef2f7;border-radius:12px 12px 5px 5px;display:flex;align-items:flex-end;overflow:hidden}.vbar-track span{width:100%;display:block;border-radius:12px 12px 5px 5px;background:linear-gradient(180deg,#48d884,#016364);min-height:2px}.vbar-item small{font-size:10px;color:var(--muted);max-width:100px;text-align:center;line-height:1.2;overflow-wrap:anywhere}.mini-stat{display:flex;align-items:baseline;justify-content:space-between;border:1px solid var(--line);border-radius:13px;padding:13px;margin-top:10px;background:#f8fafc}.mini-stat strong{font-size:27px}.mini-stat span{font-size:12px;color:var(--muted)}.activity-list{display:grid;gap:9px;max-height:230px;overflow:auto}.activity-list>div{display:flex;gap:9px;padding:9px;border-bottom:1px solid #f1f5f9}.activity-dot{width:8px;height:8px;border-radius:50%;background:#48d884;margin-top:6px;flex:0 0 auto}.activity-list strong{font-size:12px}.activity-list p{margin:2px 0;font-size:12px}.activity-list small{font-size:10px;color:var(--muted)}.quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.quick-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:16px;box-shadow:var(--shadow);display:grid;grid-template-columns:34px 1fr auto;column-gap:9px;align-items:center}.quick-card b{grid-row:span 2;width:34px;height:34px;border-radius:10px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center}.quick-card span{font-weight:800;font-size:13px}.quick-card small{font-size:11px;color:var(--muted)}.quick-card{color:var(--ink)}.quick-card::after{content:attr(data-arrow)}.quick-inline{display:grid;gap:8px}.quick-inline a{display:flex;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:11px;font-weight:700;font-size:13px}.score-line{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid #f1f5f9;font-size:12px}.score-line strong{font-size:17px;color:var(--primary)}.continue-box{background:#f8fafc;border:1px solid var(--line);border-radius:14px;padding:14px}.continue-box strong{display:block;margin-bottom:4px}.continue-box>span{display:block;color:var(--muted);font-size:12px;margin-bottom:10px}.continue-box .btn{margin-top:12px;width:100%}
@media(max-width:1050px){.dashboard-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-mosaic{grid-template-columns:1fr}.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.dashboard-hero{align-items:flex-start;flex-direction:column}.hero-action{width:100%}.dashboard-kpi-grid{grid-template-columns:1fr}.quick-grid{grid-template-columns:1fr}.donut-wrap{flex-direction:column}.vertical-chart{justify-content:flex-start}.wide-panel{min-height:280px}.dash-panel{padding:16px}}

/* Modern participant payment page */
.payment-modern-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:22px}.payment-modern-head h1{margin:3px 0 5px;font-size:32px;letter-spacing:-.03em}.payment-modern-head p{margin:0;color:var(--muted)}.payment-head-badge{padding:9px 13px;border:1px solid #a8ddd3;background:#edf7f7;color:#016364;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}
.payment-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:20px}.payment-stat-card{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px;box-shadow:var(--shadow)}.payment-stat-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#edf7f7;color:#016364;font-weight:900}.payment-stat-icon.success{background:#e3f3f3;color:#005758}.payment-stat-icon.warning{background:#fef3c7;color:#b45309}.payment-stat-icon.danger{background:#fee2e2;color:#b91c1c}.payment-stat-card small{display:block;color:var(--muted);font-size:11px;font-weight:700}.payment-stat-card strong{display:block;font-size:24px;line-height:1.1;margin-top:2px}
.payment-modern-info{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;margin-bottom:18px}.modern-bank-card{position:relative;overflow:hidden;min-height:270px;padding:25px;border-radius:22px;background:linear-gradient(135deg,#073b4c 0%,#1e3a8a 58%,#016364 100%);color:#fff;box-shadow:0 18px 38px rgba(30,64,175,.22)}.modern-bank-card:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-55px;top:-65px;background:rgba(255,255,255,.09)}.bank-card-top,.bank-card-bottom{display:flex;justify-content:space-between;gap:15px;position:relative;z-index:1}.bank-chip{font-size:10px;font-weight:900;letter-spacing:.12em;opacity:.8}.bank-secure{font-size:11px;font-weight:700;opacity:.9}.bank-name{font-size:27px;font-weight:850;margin-top:35px}.bank-account-label{font-size:10px;letter-spacing:.12em;opacity:.7;margin-top:20px}.bank-account-number{font-size:clamp(24px,3vw,34px);font-weight:850;letter-spacing:.07em;margin-top:2px;word-break:break-word}.bank-card-bottom{margin-top:25px}.bank-card-bottom small{display:block;font-size:9px;letter-spacing:.1em;opacity:.65}.bank-card-bottom strong{display:block;font-size:12px;margin-top:3px;word-break:break-word}.modern-steps-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:23px;box-shadow:var(--shadow)}.modern-card-title{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.modern-card-title h2{margin:3px 0 0;font-size:19px}.step-count{font-size:11px;color:var(--muted);background:#f8fafc;border:1px solid var(--line);padding:5px 8px;border-radius:999px}.modern-steps{margin-top:17px;display:grid;gap:11px}.modern-step{display:flex;gap:11px;align-items:flex-start}.modern-step>span{width:25px;height:25px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:#edf7f7;color:#016364;font-size:11px;font-weight:900}.modern-step p{margin:2px 0 0;font-size:12px;color:#475569;line-height:1.45}
.modern-payment-note{display:flex;gap:11px;align-items:flex-start;background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:14px;padding:13px 15px;margin-bottom:25px}.modern-payment-note>span{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#fef3c7;font-weight:900;flex:0 0 auto}.modern-payment-note strong{font-size:12px}.modern-payment-note p{margin:2px 0 0;font-size:11px;line-height:1.45}.modern-payment-note code{background:#fef3c7;padding:2px 5px;border-radius:5px}
.payment-section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:12px}.payment-section-heading h2{margin:3px 0 0;font-size:21px}.payment-modern-list{display:grid;gap:15px}.modern-payment-card{background:#fff;border:1px solid var(--line);border-radius:19px;padding:19px;box-shadow:var(--shadow)}.modern-payment-card.needs-payment{border-color:#fed7aa}.modern-payment-card-top{display:flex;align-items:center;gap:11px}.class-avatar{width:43px;height:43px;display:grid;place-items:center;border-radius:13px;background:#edf7f7;color:#016364;font-weight:900}.class-title{min-width:0;flex:1}.class-title h3{margin:0;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.class-title span{display:block;color:var(--muted);font-size:11px;margin-top:2px}.modern-status{padding:6px 10px;border-radius:999px;font-size:10px;font-weight:850;white-space:nowrap;background:#e2e8f0;color:#475569}.status-aktif{background:#e3f3f3;color:#166534}.status-menunggu-verifikasi{background:#fef3c7;color:#92400e}.status-belum-bayar{background:#fee2e2;color:#991b1b}.status-ditolak{background:#fee2e2;color:#991b1b}.modern-payment-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}.modern-payment-meta>div{background:#f8fafc;border:1px solid #eef2f7;border-radius:12px;padding:11px 12px}.modern-payment-meta small{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:800}.modern-payment-meta strong{display:block;margin-top:3px;font-size:15px}.modern-action-box{background:#fffaf5;border:1px solid #fed7aa;border-radius:14px;padding:14px}.action-message strong{display:block;font-size:13px}.action-message span{display:block;color:var(--muted);font-size:11px;margin-top:2px}.modern-payment-form{border-top:1px solid #fed7aa;margin-top:12px;padding-top:14px}.modern-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.modern-form-grid .form-group{margin-bottom:8px}.modern-form-grid label{font-size:12px}.modern-form-grid label span{font-weight:500;color:var(--muted)}.modern-form-grid input,.modern-form-grid textarea{border-radius:10px;padding:10px 11px;font-size:12px}.modern-form-grid textarea{min-height:90px}.modern-form-grid small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.modern-submit{margin-top:5px;width:auto}.modern-submit span{font-size:16px}.modern-status-box{display:flex;align-items:center;gap:11px;background:#f8fafc;border:1px solid var(--line);border-radius:13px;padding:12px}.modern-status-box>span{width:31px;height:31px;border-radius:10px;display:grid;place-items:center;background:#e2e8f0;color:#475569;font-weight:900;flex:0 0 auto}.modern-status-box strong{display:block;font-size:12px}.modern-status-box p{margin:2px 0 0;color:var(--muted);font-size:10px}.modern-status-box.waiting{background:#fffbeb;border-color:#fde68a}.modern-status-box.waiting>span{background:#fef3c7;color:#b45309}.modern-status-box.active{background:#f0fdf4;border-color:#bbf7d0}.modern-status-box.active>span{background:#e3f3f3;color:#005758}.modern-status-box.active .btn{margin-left:auto}.modern-empty{text-align:center;background:#fff;border:1px dashed #cbd5e1;border-radius:20px;padding:42px 20px}.modern-empty>div{width:52px;height:52px;margin:0 auto 12px;border-radius:16px;background:#edf7f7;color:#016364;display:grid;place-items:center;font-weight:900}.modern-empty h3{margin:0 0 5px}.modern-empty p{margin:0 auto 15px;color:var(--muted);font-size:12px;max-width:430px}
@media(max-width:1050px){.payment-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.payment-modern-info{grid-template-columns:1fr}}
@media(max-width:700px){.payment-modern-head{align-items:flex-start;flex-direction:column}.payment-modern-head h1{font-size:27px}.payment-head-badge{white-space:normal}.payment-stat-grid{grid-template-columns:1fr}.modern-payment-meta,.modern-form-grid{grid-template-columns:1fr}.modern-status-box.active{align-items:flex-start;flex-wrap:wrap}.modern-status-box.active .btn{width:100%;margin-left:42px}.modern-bank-card{min-height:245px;padding:20px}.bank-name{margin-top:28px}.bank-card-bottom{flex-direction:column;gap:10px}.payment-section-heading{align-items:flex-start;flex-direction:column}.modern-payment-card{padding:15px}.modern-status{font-size:9px;padding:5px 8px}}

/* ===== Modern UI refresh v27 ===== */
:root{
  --primary:#016364;--primary-dark:#005758;--primary-soft:#e8f4f4;
  --ink:#0f172a;--muted:#64748b;--line:#e7edf5;--bg:#f6f8fc;--card:#ffffff;
  --shadow:0 8px 30px rgba(15,23,42,.055);--shadow-lg:0 18px 45px rgba(15,23,42,.09)
}
body{background:radial-gradient(circle at 80% -10%,rgba(0,119,168,.07),transparent 30%),var(--bg)}
.sidebar{background:linear-gradient(180deg,#0b1220 0%,#111827 100%);border-right:1px solid rgba(255,255,255,.05);padding:16px 12px}
.sidebar-top{padding:4px 7px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand-logo{box-shadow:0 8px 20px rgba(0,119,168,.25)}
.user-card{margin:14px 2px 12px;border-radius:16px;background:rgba(255,255,255,.06);transition:.2s}
.user-card:hover{background:rgba(255,255,255,.1);transform:translateY(-1px)}
.sidebar-nav{gap:3px}.nav-section{margin:14px 9px 6px;color:#64748b;font-size:9px}
.sidebar-nav a{position:relative;border:1px solid transparent;border-radius:12px;padding:11px 12px;transition:.18s}
.sidebar-nav a:hover{background:rgba(255,255,255,.06);color:#fff;transform:translateX(2px)}
.sidebar-nav a.active{background:linear-gradient(90deg,rgba(0,119,168,.24),rgba(0,119,168,.08));border-color:rgba(69,166,197,.12);color:#fff}
.sidebar-nav a.active:before{content:"";position:absolute;left:-1px;top:9px;bottom:9px;width:3px;border-radius:99px;background:#48d884}
.main-shell{background:transparent}.page{padding-top:28px}
.mobile-topbar{box-shadow:0 3px 15px rgba(15,23,42,.05)}
.hero{border-radius:26px;box-shadow:var(--shadow-lg);padding:32px}
.hero:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-80px;top:-110px;background:rgba(255,255,255,.09)}
.hero>*{position:relative;z-index:1}
.page-title{margin-bottom:20px}.page-title h1{font-size:28px;letter-spacing:-.025em}.page-title h2{letter-spacing:-.02em}
.card,.kpi,.stage-card,.topic,.question,.modern-payment-card,.modern-steps-card{box-shadow:var(--shadow);border-color:var(--line);transition:box-shadow .2s,transform .2s,border-color .2s}
.card:hover,.kpi:hover,.topic:hover,.quick-card:hover{box-shadow:0 14px 36px rgba(15,23,42,.08)}
.grid .card.class-card{min-height:255px}.class-card h3{font-size:18px;letter-spacing:-.015em}
.kpi{position:relative;overflow:hidden}.kpi:after{content:"";position:absolute;width:80px;height:80px;border-radius:50%;right:-28px;bottom:-34px;background:rgba(0,119,168,.05)}
.kpi strong{letter-spacing:-.03em}.btn{border-radius:12px;box-shadow:0 5px 14px rgba(0,119,168,.14)}.btn.secondary{box-shadow:none}.btn:hover{box-shadow:0 8px 18px rgba(0,119,168,.18)}
.form-group input,.form-group select,.form-group textarea{border-color:#d7dfeb;background:#fbfcfe;transition:.18s}.form-group input:hover,.form-group select:hover,.form-group textarea:hover{border-color:#b8c5d8}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{background:#fff}
.table-wrap{box-shadow:var(--shadow);background:#fff}.table{background:#fff}.table th{background:#f8fafc;padding:14px 13px}.table td{padding:14px 13px}.table tbody tr{transition:.15s}.table tbody tr:hover{background:#f8fbff}
.badge{border:1px solid rgba(148,163,184,.12)}
.alert{border:1px solid transparent;box-shadow:0 4px 14px rgba(15,23,42,.04)}
.progres{height:9px;background:#edf1f7}.progres>span{box-shadow:0 0 8px rgba(0,119,168,.2)}
.empty{background:rgba(255,255,255,.75);border:1px dashed #cbd5e1;border-radius:18px}
.auth-shell{padding:30px 0}.auth-card{border-radius:24px;box-shadow:var(--shadow-lg);padding:32px}
.lesson-sidebar .card{top:20px}.lesson-link{transition:.18s}.lesson-link:hover{border-color:#a8ddd3;background:#f8fbff;transform:translateY(-1px)}
.stage-card{border-radius:20px}.stage-icon{box-shadow:inset 0 0 0 1px rgba(0,119,168,.08)}
.video-frame{box-shadow:0 12px 28px rgba(2,6,23,.12)}
.quick-card{border:1px solid var(--line);border-radius:18px;background:#fff;padding:18px;box-shadow:var(--shadow);transition:.2s}
.quick-card:hover{transform:translateY(-2px)}
.panel-head,.report-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dashboard-kpi-grid,.dashboard-mosaic{gap:16px}
.stat-panel,.dash-panel,.wide-panel,.donut-panel{border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow)}
.vertical-chart,.horizontal-chart{border-radius:16px}
.site-footer{background:rgba(255,255,255,.78);backdrop-filter:blur(10px)}

@media(max-width:820px){.sidebar{padding:14px 12px}.page{padding-top:20px}.hero{padding:26px}.page-title h1{font-size:25px}}
@media(max-width:480px){.hero{border-radius:20px}.auth-card{padding:24px}.card,.kpi,.stage-card{border-radius:16px}}

/* ===== Per-page modern content refresh v28 ===== */
.page-admin-kelas .page-title,
.page-admin-pengajar .page-title,
.page-admin-peserta .page-title,
.page-admin-laporan .page-title,
.page-pengajar-kelas .page-title,
.page-pengajar-penilaian .page-title,
.page-pengajar-murid .page-title,
.page-peserta-kelas .page-title,
.page-peserta-nilai .page-title,
.page-peserta-diskusi .page-title,
.page-profile-profile .page-title,
.page-profile .page-title{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:22px;
  padding:22px 24px; box-shadow:var(--shadow); overflow:hidden;
}
.page-admin-kelas .page-title:before,
.page-admin-pengajar .page-title:before,
.page-admin-peserta .page-title:before,
.page-admin-laporan .page-title:before,
.page-pengajar-kelas .page-title:before,
.page-pengajar-penilaian .page-title:before,
.page-pengajar-murid .page-title:before,
.page-peserta-kelas .page-title:before,
.page-peserta-nilai .page-title:before,
.page-peserta-diskusi .page-title:before,
.page-profile-profile .page-title:before,
.page-profile .page-title:before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg,#016364,#48d884); border-radius:0 5px 5px 0;
}
.page-admin-kelas .grid-2 > .card,
.page-admin-pengajar .grid-2 > .card,
.page-pengajar-kelas .grid-2 > .card,
.page-pengajar-penilaian .card,
.page-pengajar-murid .card,
.page-admin-peserta > .card,
.page-admin-laporan > .card,
.page-peserta-nilai > .card,
.page-peserta-diskusi .grid-2 > .card,
.page-profile .grid-2 > .card{
  border-radius:20px; box-shadow:var(--shadow); background:rgba(255,255,255,.96);
}
.page-admin-kelas .grid-2 > .card:first-child,
.page-admin-pengajar .grid-2 > .card:first-child,
.page-pengajar-kelas .grid-2 > .card:first-child,
.page-peserta-diskusi .grid-2 > .card:first-child{
  background:linear-gradient(180deg,#ffffff,#f8fbff);
}
.page-admin-kelas .grid-2 > .card h2,
.page-admin-pengajar .grid-2 > .card h2,
.page-pengajar-kelas .grid-2 > .card h2,
.page-peserta-diskusi .grid-2 > .card h2{
  display:flex; align-items:center; gap:10px; font-size:18px; margin-bottom:18px;
}
.page-admin-kelas .grid-2 > .card h2:before,
.page-admin-pengajar .grid-2 > .card h2:before,
.page-pengajar-kelas .grid-2 > .card h2:before,
.page-peserta-diskusi .grid-2 > .card h2:before{
  content:""; width:34px; height:34px; border-radius:10px; background:var(--primary-soft);
  box-shadow:inset 0 0 0 1px #d7efeb;
}
.page-admin-kelas .table-wrap,
.page-admin-pengajar .table-wrap,
.page-admin-peserta .table-wrap,
.page-admin-pembayaran .table-wrap,
.page-pengajar-penilaian .table-wrap,
.page-pengajar-murid .table-wrap,
.page-peserta-nilai .table-wrap{border-radius:16px;}

/* Admin detail/list pages */
.page-admin-peserta .card{padding:22px;}
.page-admin-peserta .table th:first-child,.page-admin-pengajar .table th:first-child{border-radius:12px 0 0 0;}
.page-admin-laporan .class-report-name{font-size:20px;letter-spacing:-.02em;}
.page-admin-laporan .card{overflow:hidden;}
.page-admin-laporan .class-report-name:before{content:none;display:none;background:none;}

/* Teacher pages */
.page-pengajar-penilaian .card[style], .page-pengajar-murid .card[style]{background:linear-gradient(180deg,#f8fbff,#fff);border-color:#d7efeb;}
.page-pengajar-penilaian .table tbody tr:hover,.page-pengajar-murid .table tbody tr:hover{transform:translateX(1px);}
.page-pengajar-penilaian .page-title + .card,.page-pengajar-murid .page-title + .card{margin-top:2px;}

/* Participant pages */
.page-peserta-kelas .class-card{position:relative;overflow:hidden;border-radius:22px;min-height:270px;background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);}
.page-peserta-kelas .class-card:before{content:"";height:5px;position:absolute;left:0;right:0;top:0;background:linear-gradient(90deg,#016364,#48d884);}
.page-peserta-kelas .class-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(0,119,168,.11);}
.page-peserta-nilai .card{overflow:hidden;}
.page-peserta-nilai .card > .page-title{background:linear-gradient(135deg,#f8fbff,#fff);border:0;box-shadow:none;padding:2px 0 12px;}
.page-peserta-nilai .table td:last-child{font-weight:800;}
.page-peserta-diskusi .topic{background:linear-gradient(180deg,#fff,#fbfdff);padding:16px;border-radius:15px;transition:.18s;}
.page-peserta-diskusi .topic:hover{border-color:#a8ddd3;transform:translateY(-1px);}
.page-peserta-belajar .lesson-sidebar{border-radius:20px;box-shadow:var(--shadow);}
.page-peserta-belajar .stage-card{background:linear-gradient(180deg,#fff,#fcfdff);border-radius:22px;padding:24px;}
.page-peserta-belajar .stage-card:hover{box-shadow:0 16px 38px rgba(15,23,42,.075);}
.page-peserta-belajar .question{border-radius:16px;background:#fbfdff;}
.page-peserta-belajar .option{transition:.15s;background:#fff;}
.page-peserta-belajar .option:hover{border-color:#63c7b5;background:#edf7f7;}

/* Payment */
.page-peserta-pembayaran .page-title{margin-bottom:22px;}
.page-peserta-pembayaran .modern-payment-card:hover{transform:translateY(-2px);}
.page-admin-pembayaran .payment-admin-table{border-radius:22px;overflow:hidden;}
.page-admin-pembayaran .table th{white-space:nowrap;}

/* Profile */
.page-profile .profile-hero,.page-profile-profile .profile-hero{border-radius:22px;box-shadow:var(--shadow);}
.page-profile .card,.page-profile-profile .card{border-radius:20px;}
.page-profile .form-group input:focus,.page-profile .form-group select:focus{transform:translateY(-1px);}

/* Public auth */
.page-public-login .auth-card,.page-public-register .auth-card{position:relative;overflow:hidden;}
.page-public-login .auth-card:before,.page-public-register .auth-card:before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,#016364,#48d884);}

@media(max-width:700px){
  .page-admin-kelas .page-title,.page-admin-pengajar .page-title,.page-admin-peserta .page-title,
  .page-admin-laporan .page-title,.page-pengajar-kelas .page-title,.page-pengajar-penilaian .page-title,
  .page-pengajar-murid .page-title,.page-peserta-kelas .page-title,.page-peserta-nilai .page-title,
  .page-peserta-diskusi .page-title,.page-profile .page-title,.page-profile-profile .page-title{padding:18px 18px; border-radius:18px;}
  .page-peserta-belajar .stage-card{padding:18px;border-radius:18px;}
}

/* ===== v29: daftar guru & siswa per kelas ===== */
.page-admin-murid_perkelas .grid-2 > .card,
.teacher-student-card{border-radius:20px;box-shadow:var(--shadow);background:rgba(255,255,255,.96);}
.page-admin-murid_perkelas .topic{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--line);padding:15px;border-radius:15px;margin-bottom:10px;background:#fff;transition:.18s;}
.page-admin-murid_perkelas .topic:hover,.page-admin-murid_perkelas .topic.active{border-color:#63c7b5;background:#f8fbff;transform:translateY(-1px);}
.teacher-student-card{overflow:hidden;}
.teacher-student-card .student-mini-list{display:grid;gap:2px;margin:0 -4px 14px;max-height:310px;overflow:auto;}
.student-mini-row{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;padding:10px 8px;border-radius:12px;}
.student-mini-row:hover{background:#f8fafc;}
.student-mini-row strong{display:block;font-size:14px;}
.student-mini-row small{display:block;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.profile-avatar.small{width:34px;height:34px;font-size:12px;}
@media(max-width:700px){.page-admin-murid_perkelas .grid-2{grid-template-columns:1fr}.page-admin-murid_perkelas .topic{align-items:flex-start}.student-mini-row{grid-template-columns:34px 1fr auto}.student-mini-row small{max-width:180px}}


/* ===== v32: perbaikan nilai peserta & Kelas Saya ===== */
.page-peserta-nilai .nilai-class-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 14px;padding:4px 0 14px;border-bottom:1px solid var(--line);min-width:0;}
.page-peserta-nilai .nilai-class-title{min-width:0;flex:1;}
.page-peserta-nilai .nilai-class-title h2{margin:3px 0 3px;line-height:1.25;overflow-wrap:anywhere;word-break:break-word;}
.page-peserta-nilai .nilai-average{flex:0 0 auto;min-width:150px;padding:12px 16px;border-radius:16px;background:linear-gradient(135deg,#edf7f7,#f8fbff);border:1px solid #d7efeb;text-align:center;}
.page-peserta-nilai .nilai-average span{display:block;font-size:12px;color:var(--muted);font-weight:700;margin-bottom:2px;}
.page-peserta-nilai .nilai-average strong{display:block;font-size:28px;line-height:1.1;color:var(--primary);}
.page-peserta-nilai .table th,.page-peserta-nilai .table td{vertical-align:middle;}
.page-peserta-nilai .table td:first-child{min-width:230px;white-space:normal;overflow-wrap:anywhere;}
.kelas-saya-header{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:28px;margin-bottom:16px;padding:20px 22px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(135deg,#f8fbff,#fff);box-shadow:var(--shadow);}
.kelas-saya-header h2{margin:3px 0 3px;}
.kelas-saya-header p{margin:0;}
@media(max-width:700px){
 .page-peserta-nilai .nilai-class-head{align-items:flex-start;flex-direction:column;}
 .page-peserta-nilai .nilai-average{width:100%;text-align:left;min-width:0;}
 .page-peserta-nilai .nilai-average strong{font-size:26px;}
 .kelas-saya-header{align-items:flex-start;flex-direction:column;padding:18px;}
 .kelas-saya-header .btn{width:100%;text-align:center;}
}

.forum-topic{padding:18px;border:1px solid #e7edf5;border-radius:16px;margin-bottom:14px;background:#fff;}
.forum-reply{margin:12px 0 0 18px;padding:12px 14px;border-left:3px solid #dbe7f5;background:#f8fafc;border-radius:0 12px 12px 0;}
.forum-reply .badge{display:inline-block;font-size:11px;padding:3px 7px;border-radius:999px;background:#e8f0ff;margin-left:5px;}
.forum-reply-form{margin:12px 0 0 18px;display:flex;gap:8px;align-items:flex-end;}
.forum-reply-form textarea{min-height:48px;flex:1;}
@media(max-width:700px){.forum-reply-form{margin-left:0;display:block}.forum-reply-form .btn{margin-top:8px}}

/* legacy note removed: class selection is now direct */
.wave-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.wave-card{display:block;text-decoration:none;color:inherit;position:relative;overflow:hidden;border-radius:22px;background:linear-gradient(180deg,#fff,#f8fbff);transition:.18s;}
.wave-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(0,119,168,.11);border-color:#a8ddd3;}
.wave-card h2{margin:5px 0 8px;}
.wave-card .wave-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:#016364;font-size:0;margin-bottom:18px;background:transparent;border:0;box-shadow:none}
.wave-meta{display:flex;gap:8px;align-items:center;margin-top:16px;}
.wave-card .btn{color:#fff;}

/* ===== v45: unified modern UI ===== */
:root{--primary:#016364;--primary-dark:#005758;--primary-soft:#e8f4f4;--bg:#f6f7fb;--line:#e7e9f0;--shadow:0 14px 40px rgba(15,23,42,.07)}
body{background:radial-gradient(circle at top right,rgba(99,241,158,.07),transparent 28%),var(--bg);letter-spacing:-.01em}
.sidebar{background:linear-gradient(180deg,#111827 0%,#0f172a 100%);box-shadow:8px 0 28px rgba(15,23,42,.08)}
.sidebar-nav a{border:1px solid transparent;transition:.2s ease}.sidebar-nav a:hover{transform:translateX(2px);color:#e2e8f0}.sidebar-nav a.active{background:linear-gradient(90deg,rgba(0,119,168,.28),rgba(0,119,168,.08));border-color:rgba(69,166,197,.18);box-shadow:inset 3px 0 0 #35b8a8}
.brand-logo{background:linear-gradient(135deg,#016364,#35b8a8);box-shadow:0 8px 20px rgba(0,119,168,.25)}
.page{padding-top:32px}.hero{background:linear-gradient(135deg,#005758 0%,#016364 52%,#35b8a8 100%);box-shadow:0 20px 45px rgba(0,119,168,.18)}
.card,.kpi,.stage-card,.topic,.auth-card{border-color:rgba(226,232,240,.9);box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.card:hover,.kpi:hover{box-shadow:0 18px 42px rgba(15,23,42,.09)}
.page-title{gap:18px}.page-title h1{font-weight:850;letter-spacing:-.035em}.page-title h2,.page-title h3{letter-spacing:-.025em}
.btn{background:linear-gradient(135deg,#016364,#0088b8);box-shadow:0 7px 16px rgba(0,119,168,.16)}.btn:hover{background:linear-gradient(135deg,#005758,#016364);box-shadow:0 10px 22px rgba(0,119,168,.2)}.btn.secondary{background:#e8f4f4;color:#005758!important;box-shadow:none}.btn.success{background:linear-gradient(135deg,#016364,#016364)}.btn.danger{background:linear-gradient(135deg,#dc2626,#ef4444)}
.form-group input,.form-group select,.form-group textarea{border-color:#d9deea;box-shadow:0 2px 5px rgba(15,23,42,.025);transition:.18s}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#35b8a8;box-shadow:0 0 0 4px rgba(99,241,158,.12)}
.table-wrap{box-shadow:0 8px 25px rgba(15,23,42,.045);background:#fff}.table th{background:linear-gradient(180deg,#fafbff,#f5f7fb);font-weight:800}.table tbody tr{transition:.16s}.table tbody tr:hover{background:#fafaff}
.badge{border:1px solid rgba(148,163,184,.16)}.badge.success{border-color:#bbf7d0}.badge.warning{border-color:#fde68a}
.progres{background:#e9ecf3}.progres>span{background:linear-gradient(90deg,#016364,#35b8a8)}
.class-card{border-radius:20px;background:linear-gradient(180deg,#fff,#fafbff)}
.section-label{color:#016364}.site-footer{border-top-color:#e7e9f0}
.dashboard-kpi,.dash-panel{border-color:#e7e9f0!important;box-shadow:var(--shadow)!important;border-radius:20px!important}
.dashboard-kpi:hover,.dash-panel:hover{transform:translateY(-2px)}
.kpi-icon{background:#e8f4f4!important;color:#016364!important}
.score-line,.continue-box,.quick-inline a{border-color:#e7e9f0!important;border-radius:14px!important}
.score-line:hover,.quick-inline a:hover{background:#fafaff!important;border-color:#c7d2fe!important}
.lesson-link{transition:.18s}.lesson-link:hover{transform:translateX(2px);border-color:#c7d2fe;box-shadow:0 8px 20px rgba(15,23,42,.05)}
.question{box-shadow:0 8px 22px rgba(15,23,42,.035)}.option{transition:.16s}.option:hover{border-color:#a5b4fc;background:#f3fff8}
.mobile-topbar{box-shadow:0 4px 18px rgba(15,23,42,.04)}
.empty{background:linear-gradient(180deg,#fff,#fafbff);border-radius:16px}
@media(max-width:820px){.sidebar{box-shadow:18px 0 40px rgba(15,23,42,.2)}.page{padding-top:22px}}

/* Professional dashboard icons */
.dash-icon{width:22px;height:22px;display:inline-block;flex:0 0 22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dashboard-kpi .dash-icon{width:24px;height:24px;flex-basis:24px}
.quick-card .dash-icon{width:24px;height:24px;flex-basis:24px}
.hero-action .dash-icon{width:18px;height:18px;flex-basis:18px}
.quick-inline .dash-icon{width:17px;height:17px;flex-basis:17px;vertical-align:-4px}

.wave-card .wave-svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.simple-wave-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#016364;margin-bottom:6px}.simple-wave-icon .ui-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* V26 - consistent inline SVG icons */
.ui-icon{
  width:18px !important;
  height:18px !important;
  display:inline-block !important;
  flex:0 0 18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  vertical-align:-3px;
}
.btn .ui-icon,
.actions .ui-icon{
  width:16px !important;
  height:16px !important;
  flex-basis:16px;
  vertical-align:-2px;
}

/* Admin Kelola Kelas: remove old empty decorative squares before headings */
.page-admin-kelas .grid-2 > .card h2:before{
  display:none !important;
  content:none !important;
}
.page-admin-kelas .grid-2 > .card h2{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
}
.page-admin-kelas .actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.page-admin-kelas .actions .inline{
  margin:0;
}
.page-admin-kelas .topic .btn{
  min-height:38px;
}
.page-admin-kelas .topic{
  padding:16px;
}
.page-admin-kelas .grid-2{
  align-items:start;
}
.page-admin-kelas .grid-2 > .card:first-child{
  min-width:0;
}
.page-admin-kelas .grid-2 > .card:last-child{
  min-width:0;
}
@media(max-width:900px){
  .page-admin-kelas .grid-2{
    grid-template-columns:1fr;
  }
}

/* V26 - wave identity is icon-only, never a gray placeholder */
.page-admin-kelas .wave-card-icon{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* V27 - consistent icons across the application */
.ui-icon{
  width:18px!important;height:18px!important;display:inline-block!important;
  flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px
}
.btn .ui-icon,.actions .ui-icon{width:16px!important;height:16px!important;flex-basis:16px;vertical-align:-2px}
.page-title .ui-icon,.panel-head .ui-icon{width:20px!important;height:20px!important;flex-basis:20px}
.page-admin-kelas .grid-2>.card h2:before,
.page-admin-pengajar .grid-2>.card h2:before,
.page-pengajar-kelas .grid-2>.card h2:before,
.page-peserta-diskusi .grid-2>.card h2:before{
  content:none!important;display:none!important;background:none!important
}
.icon-heading{display:flex;align-items:center;gap:8px}
.icon-heading .ui-icon{color:#016364}
.button-icon{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.empty-icon{display:flex;align-items:center;justify-content:center;color:#64748b;margin-bottom:8px}

/* V28 - application-wide icon consistency */
.ui-icon{width:18px!important;height:18px!important;display:inline-block!important;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
h1 .ui-icon{width:22px!important;height:22px!important;flex-basis:22px}
h2 .ui-icon{width:20px!important;height:20px!important;flex-basis:20px}
.btn .ui-icon,.actions .ui-icon{width:16px!important;height:16px!important;flex-basis:16px;vertical-align:-2px}
.icon-heading{display:flex;align-items:center;gap:8px}
.icon-heading .ui-icon{color:#016364}
.page-admin-kelas .grid-2>.card h2:before,
.page-admin-pengajar .grid-2>.card h2:before,
.page-pengajar-kelas .grid-2>.card h2:before,
.page-peserta-diskusi .grid-2>.card h2:before{display:none!important;content:none!important;background:none!important;box-shadow:none!important}
.simple-icon{display:inline-flex;align-items:center;justify-content:center;color:#016364}

/* V29 - final icon consistency */
.ui-icon{width:18px!important;height:18px!important;display:inline-block!important;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
h1 .ui-icon{width:22px!important;height:22px!important;flex-basis:22px}
h2 .ui-icon{width:20px!important;height:20px!important;flex-basis:20px}
.btn .ui-icon,.actions .ui-icon{width:16px!important;height:16px!important;flex-basis:16px;vertical-align:-2px}
.icon-heading{display:flex;align-items:center;gap:8px}
.icon-heading .ui-icon{color:#016364}
.page-admin-kelas .grid-2>.card h2:before,
.page-admin-pengajar .grid-2>.card h2:before,
.page-pengajar-kelas .grid-2>.card h2:before,
.page-peserta-diskusi .grid-2>.card h2:before{display:none!important;content:none!important;background:none!important;box-shadow:none!important}

/* =========================================================
   V46 - Mobile Responsive
   ========================================================= */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, svg, video, iframe {
  max-width: 100%;
}

.table-wrap,
.table-responsive,
.data-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px) {
  .app-layout,
  .layout,
  .dashboard-layout {
    display: block !important;
  }

  .sidebar,
  .app-sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(82vw, 300px) !important;
    max-width: 300px !important;
    transform: translateX(-105%);
    transition: transform .25s ease;
    z-index: 1200 !important;
    overflow-y: auto;
  }

  .sidebar.open,
  .app-sidebar.open,
  body.sidebar-open .sidebar,
  body.sidebar-open .app-sidebar {
    transform: translateX(0) !important;
  }

  .main-content,
  .content,
  .page-content {
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }

  .mobile-menu-btn,
  .sidebar-toggle,
  .menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  .page,
  .container,
  .content-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box;
  }

  .page-header {
    gap: 12px !important;
    flex-wrap: wrap !important;
  }

  .page-header h1 {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }

  .card,
  .panel,
  .modal-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .grid,
  .cards-grid,
  .dashboard-grid,
  .stats-grid,
  .two-col,
  .three-col {
    grid-template-columns: 1fr !important;
  }

  .row,
  .form-row,
  .filters,
  .button-row,
  .actions,
  .toolbar {
    flex-wrap: wrap !important;
  }

  .form-group,
  .field,
  input,
  select,
  textarea {
    max-width: 100%;
    box-sizing: border-box;
  }

  input,
  select,
  textarea {
    width: 100% !important;
  }

  button,
  .btn {
    max-width: 100%;
  }

  table {
    min-width: 680px;
  }

  .table-wrap,
  .table-responsive {
    margin-left: 0;
    margin-right: 0;
  }

  .modal {
    padding: 12px !important;
    box-sizing: border-box;
  }

  .modal-content,
  .modal-dialog {
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px auto !important;
  }

  .chat-box {
    max-height: 52vh !important;
  }

  .chat-box + form,
  form[style*="display:flex"] {
    flex-wrap: wrap !important;
  }

  .chat-box + form input,
  form[style*="display:flex"] input {
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }

  .chat-box + form button,
  form[style*="display:flex"] button {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .topbar,
  .navbar,
  .header-bar {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .page {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .card {
    padding: 14px !important;
  }

  .stat-card,
  .feature-card,
  .class-card {
    padding: 14px !important;
  }

  .btn,
  button {
    font-size: 14px !important;
    min-height: 42px;
  }

  .nav-link {
    padding: 11px 13px !important;
  }

  .breadcrumb {
    overflow-x: auto;
    white-space: nowrap;
  }

  .profile,
  .user-menu {
    max-width: 100%;
  }
}

@media (min-width: 901px) {
  .mobile-menu-btn,
  .sidebar-toggle,
  .menu-toggle {
    display: none !important;
  }
}

/* =========================================================
   V48 - App-like Web UI Refresh
   Keep PHP/MySQL architecture unchanged; refresh presentation only.
   ========================================================= */
:root{
  --primary:#087ea4;
  --primary-dark:#06627f;
  --primary-2:#24a0c2;
  --primary-soft:#e9f7fb;
  --ink:#15202b;
  --muted:#708090;
  --line:#e7edf2;
  --bg:#f4f7f9;
  --card:#ffffff;
  --radius:18px;
  --shadow-soft:0 8px 28px rgba(16,43,56,.06);
  --shadow-app:0 14px 34px rgba(16,43,56,.08);
}
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-size:15px}
body.no-sidebar{background:linear-gradient(180deg,#f5fbfd 0%,#f4f7f9 42%)}
.app-shell{min-height:100vh}
.sidebar{width:248px;padding:12px 10px;background:#0f1d24;box-shadow:8px 0 28px rgba(15,29,36,.10);border-right:1px solid rgba(255,255,255,.06)}
.sidebar-top{padding:8px 8px 14px}
.brand-logo{width:40px;height:40px;border-radius:13px;background:linear-gradient(135deg,var(--primary),#56c7df);font-size:13px}
.brand-text strong{font-size:14px}.brand-text small{font-size:10px;color:#9db1bd}
.user-card{border-radius:15px;background:rgba(255,255,255,.055);padding:10px;margin:14px 4px 10px}
.profile-avatar{background:linear-gradient(135deg,#d8f1f7,#b9e4ef);color:#075b77}
.sidebar-nav{gap:3px}.nav-section{margin:16px 9px 6px;color:#768995;font-size:9px;letter-spacing:.14em}
.sidebar-nav a{padding:10px 11px;border-radius:13px;color:#c9d7de;font-size:13px}
.sidebar-nav a.active{background:linear-gradient(90deg,rgba(8,126,164,.30),rgba(8,126,164,.09));box-shadow:inset 3px 0 0 #4db6d2}
.main-shell{margin-left:248px}.page{max-width:1320px;padding:24px 24px 74px}
.mobile-topbar{height:62px;padding:0 14px;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);box-shadow:0 3px 18px rgba(16,43,56,.05);gap:11px}
.mobile-menu-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);font-size:0}
.mobile-menu-btn:before{content:'☰';font-size:20px;line-height:1}
.mobile-title{font-size:16px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-title,.page-admin-kelas .page-title,.page-admin-pengajar .page-title,.page-admin-peserta .page-title,.page-admin-laporan .page-title,.page-pengajar-kelas .page-title,.page-pengajar-penilaian .page-title,.page-pengajar-murid .page-title,.page-peserta-kelas .page-title,.page-peserta-nilai .page-title,.page-peserta-diskusi .page-title,.page-profile .page-title{background:transparent;border:0;box-shadow:none;border-radius:0;padding:0 0 8px;margin-bottom:18px}
.page-title:before,.page-admin-kelas .page-title:before,.page-admin-pengajar .page-title:before,.page-admin-peserta .page-title:before,.page-admin-laporan .page-title:before,.page-pengajar-kelas .page-title:before,.page-pengajar-penilaian .page-title:before,.page-pengajar-murid .page-title:before,.page-peserta-kelas .page-title:before,.page-peserta-nilai .page-title:before,.page-peserta-diskusi .page-title:before,.page-profile .page-title:before{display:none}
.page-title h1{font-size:27px!important;font-weight:850;letter-spacing:-.04em}
.card,.kpi,.stage-card,.topic,.question,.modern-payment-card,.modern-steps-card,.quick-card,.stat-panel,.dash-panel,.wide-panel,.donut-panel{border-radius:var(--radius);box-shadow:var(--shadow-soft);border:1px solid var(--line);background:var(--card)}
.card{padding:18px}
.card:hover,.kpi:hover,.quick-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-app)}
.hero{border-radius:24px;padding:28px;background:linear-gradient(135deg,#075a73 0%,#087ea4 55%,#48bdd7 100%);box-shadow:0 18px 42px rgba(8,126,164,.16)}
.hero h1{font-size:clamp(25px,4vw,36px)}
.grid{gap:16px}.grid-2{gap:16px}.kpi-strip{gap:12px}
.kpi{padding:16px}.kpi strong{font-size:26px}.kpi .kpi-icon,.kpi-icon{width:40px!important;height:40px!important;border-radius:13px!important;background:var(--primary-soft)!important;color:var(--primary)!important}
.btn{min-height:42px;padding:9px 14px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--primary-2));font-size:14px;box-shadow:0 5px 14px rgba(8,126,164,.12)}
.btn:hover{background:linear-gradient(135deg,var(--primary-dark),var(--primary));transform:translateY(-1px)}
.btn.secondary{background:#edf4f6;color:#31505d!important}.btn.small{min-height:36px;border-radius:10px}
.form-group input,.form-group select,.form-group textarea,input,select,textarea{border-radius:12px;border-color:#dbe4ea;background:#fbfdfe}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus,input:focus,select:focus,textarea:focus{border-color:#6cc1d7;box-shadow:0 0 0 4px rgba(36,160,194,.12);background:#fff}
.table-wrap{border-radius:16px;overflow:auto}.table th{font-size:12px;letter-spacing:.02em;color:#5d6f79}.table td{font-size:14px}
.badge{border-radius:999px;padding:5px 9px;font-size:11px;font-weight:800}.alert{border-radius:14px}
.progres{height:8px;border-radius:99px}.progres>span{border-radius:99px;background:linear-gradient(90deg,var(--primary),var(--primary-2))}
.lesson-layout{grid-template-columns:270px minmax(0,1fr)}
.lesson-link{border-radius:14px;padding:11px;background:#fff}.lesson-link.current{background:var(--primary-soft);border-color:#a9dce9}
.stage-card{padding:20px}.stage-card h2{font-size:20px}
.class-card{min-height:230px;border-radius:20px!important}.class-card:before{height:4px!important;background:linear-gradient(90deg,var(--primary),var(--primary-2))!important}
.site-footer{margin-top:0;padding:18px 16px;background:#fff;border-top:1px solid var(--line)}
.auth-shell{min-height:100vh;display:grid;place-items:center;padding:24px}.auth-card{width:min(460px,100%);border-radius:24px;padding:28px;box-shadow:0 20px 55px rgba(16,43,56,.12);border:1px solid var(--line)}
.auth-card h1{font-size:28px;letter-spacing:-.04em}.auth-card .btn{width:100%}
.quick-card,.student-mini-row,.score-line,.continue-box,.topic{border-radius:16px}
.empty{border-radius:18px}

/* Mobile as a Play-Store-style app shell. */
@media(max-width:820px){
  .sidebar{width:min(86vw,300px)}
  .main-shell{margin-left:0}
  .page{padding:16px 14px 86px;min-height:calc(100vh - 62px)}
  .page-title{padding-bottom:2px;margin-bottom:14px}
  .page-title h1{font-size:23px!important}
  .hero{padding:22px;border-radius:20px;margin-bottom:18px}
  .hero h1{font-size:26px}
  .grid,.grid-2,.kpi-strip{grid-template-columns:1fr!important;gap:12px}
  .card,.kpi,.stage-card{padding:15px;border-radius:16px}
  .actions{gap:7px}.actions .btn{flex:1 1 auto}
  .table-wrap{margin-left:-1px;margin-right:-1px}
  .lesson-layout{grid-template-columns:1fr;gap:12px}
  .lesson-sidebar{position:static}
  .auth-card{padding:22px;border-radius:20px}
  .site-footer.with-sidebar{margin-left:0}
}
@media(max-width:560px){
  body{font-size:14px}
  .mobile-topbar{height:58px}
  .page{padding:14px 11px 90px}
  .page-title h1{font-size:21px!important}
  .hero{padding:19px;border-radius:18px}
  .hero h1{font-size:23px}
  .hero p{font-size:13px}
  .btn{min-height:42px;font-size:13px}
  .page-header,.panel-head,.report-heading,.kelas-saya-header{align-items:flex-start!important;flex-direction:column!important}
  .page-header .btn,.panel-head .btn,.report-heading .btn,.kelas-saya-header .btn{width:100%}
  .form-group{margin-bottom:11px}
  .form-group label{font-size:13px}
  .card h2{font-size:18px}
  .card h3{font-size:16px}
}
.mobile-user-dot{margin-left:auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-weight:900;font-size:13px}
.mobile-bottom-nav{display:none}
@media(max-width:820px){
  .mobile-bottom-nav{position:fixed;left:10px;right:10px;bottom:10px;height:64px;z-index:1300;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;background:rgba(255,255,255,.96);backdrop-filter:blur(18px);border:1px solid rgba(220,230,235,.95);border-radius:20px;box-shadow:0 14px 38px rgba(16,43,56,.16);padding:5px}
  .mobile-bottom-nav a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:54px;border-radius:15px;color:#74848e;font-size:10px;font-weight:800}
  .mobile-bottom-nav a .nav-icon{width:20px;height:20px;margin:0;stroke-width:2}
  .mobile-bottom-nav a.active{background:var(--primary-soft);color:var(--primary)}
  .mobile-bottom-nav b{position:absolute;top:2px;right:22%;min-width:16px;height:16px;border-radius:999px;background:#ef4444;color:#fff;font-size:9px;display:grid;place-items:center}
}


/* =========================================================
   V49 APP-STYLE UI
   Visual direction: mobile learning app / Play Store style
   Content + PHP/MySQL functionality remain unchanged.
   ========================================================= */
:root{
  --app-primary:#016364;
  --app-primary-2:#016364;
  --app-primary-dark:#004f50;
  --app-cyan:#20b8f2;
  --app-bg:#f7f8fc;
  --app-surface:#ffffff;
  --app-ink:#203a2b;
  --app-muted:#7b8099;
  --app-line:#eceef6;
  --app-shadow:0 10px 28px rgba(42,89,62,.09);
  --primary:var(--app-primary);
  --primary-dark:var(--app-primary-dark);
  --primary-soft:#edf7f7;
  --bg:var(--app-bg);
  --ink:var(--app-ink);
  --muted:var(--app-muted);
  --line:var(--app-line);
  --card:var(--app-surface);
}

/* Base */
body{background:var(--app-bg);color:var(--app-ink)}
body:before{content:"";position:fixed;top:0;left:0;right:0;height:180px;background:linear-gradient(135deg,var(--app-primary),var(--app-primary-2));z-index:-2}
.app-shell{position:relative}
.sidebar{background:linear-gradient(180deg,#4ce48b 0%,#46d280 55%,#3ab96f 100%);border-right:0;box-shadow:8px 0 30px rgba(47,154,92,.14)}
.sidebar .brand{padding:5px 4px 2px}
.brand-logo{background:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.brand-text small{color:rgba(255,255,255,.7)}
.user-card{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.12);border-radius:18px}
.profile-avatar{background:#fff;color:var(--app-primary)}
.nav-section{color:rgba(255,255,255,.55)}
.sidebar-nav a{color:rgba(255,255,255,.76);border-radius:14px;padding:12px 13px}
.sidebar-nav a.active{background:rgba(255,255,255,.17)!important;border-color:rgba(255,255,255,.09)!important;color:#fff!important;box-shadow:inset 3px 0 0 rgba(255,255,255,.8)}
.sidebar-nav a:hover{background:rgba(255,255,255,.1)!important}
.sidebar-nav .nav-logout{color:#ffd3d3}

.main-shell{background:transparent}
.mobile-topbar{background:linear-gradient(135deg,var(--app-primary),var(--app-primary-2));color:#fff;border-bottom:0;height:64px;box-shadow:0 6px 20px rgba(48,177,102,.18)}
.mobile-menu-btn{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:12px}
.mobile-title{color:#fff;font-size:16px}
.mobile-user-dot{width:34px;height:34px;border-radius:50%;background:#fff;color:var(--app-primary);display:grid;place-items:center;font-weight:800;margin-left:auto}

.page{padding-top:30px}
.page-title{margin-bottom:22px}
.page-title h1{color:var(--app-ink);font-weight:800}
.section-label{color:var(--app-primary)}

.card,.stage-card,.dash-panel,.kpi,.dashboard-kpi,.quick-card,.auth-card,.payment-steps,.payment-account{
  border:0!important;
  border-radius:22px!important;
  box-shadow:var(--app-shadow)!important;
}
.card{background:#fff}
.hero{
  background:linear-gradient(135deg,var(--app-primary),#78ffb0 72%,#84ffb7)!important;
  border-radius:28px!important;
  padding:30px!important;
  box-shadow:0 18px 42px rgba(70,222,133,.24)!important;
}
.hero:after{
  content:"";position:absolute;width:230px;height:230px;border-radius:50%;
  right:-70px;top:-85px;background:rgba(255,255,255,.1)
}
.hero:before{
  content:"";position:absolute;width:170px;height:170px;border-radius:50%;
  right:90px;bottom:-100px;background:rgba(255,255,255,.07)
}
.hero h1{color:#fff}
.hero p{color:rgba(255,255,255,.88)}
.hero-action{color:var(--app-primary)!important}

.dashboard-hero{
  background:linear-gradient(135deg,var(--app-primary),var(--app-primary-2))!important;
  border-radius:28px!important;
  padding:26px!important;
  color:#fff;
  box-shadow:0 18px 42px rgba(70,222,133,.24)!important;
}
.dashboard-hero h1,.dashboard-hero .muted{color:#fff!important}
.dashboard-hero .muted{opacity:.86}

.dashboard-kpi .kpi-icon,.quick-card b,.stage-icon,.wave-icon{
  background:linear-gradient(135deg,#e8f4f4,#f7fffa)!important;
  color:var(--app-primary)!important;
}
.dashboard-kpi strong{color:var(--app-ink)}

.class-card,.wave-card{position:relative;overflow:hidden}
.class-card:before,.wave-card:before{
  content:"";position:absolute;left:0;right:0;top:0;height:5px;
  background:linear-gradient(90deg,var(--app-primary),var(--app-cyan));
}
.class-card:hover,.wave-card:hover,.quick-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(42,89,62,.12)!important;
}

.btn{
  background:linear-gradient(135deg,var(--app-primary),var(--app-primary-2))!important;
  border-radius:14px!important;
  box-shadow:0 7px 16px rgba(88,237,150,.2)
}
.btn:hover{background:linear-gradient(135deg,var(--app-primary-dark),var(--app-primary))!important}
.btn.secondary{background:#edf7f7!important;color:var(--app-primary)!important;box-shadow:none}
.btn.success{background:linear-gradient(135deg,#016364,#016364)!important}
.btn.danger{background:linear-gradient(135deg,#dc2626,#ef4444)!important}

.badge{border-radius:999px}
.progres>span{background:linear-gradient(90deg,var(--app-primary),var(--app-cyan))}
.progres{background:#eeeff6}

.form-group input,.form-group select,.form-group textarea{
  border:1px solid #e4e6f0;
  border-radius:14px;
  background:#fbfbfe;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  border-color:#88f7b6;
  box-shadow:0 0 0 4px rgba(88,237,150,.11)
}

.table-wrap{border:0;border-radius:18px;box-shadow:var(--app-shadow);background:#fff}
.table{background:#fff;border-collapse:separate;border-spacing:0}
.table th{background:#f7f7fc;color:#646a82}
.table th:first-child{border-top-left-radius:16px}.table th:last-child{border-top-right-radius:16px}

.lesson-link.current{
  background:#f0fff6;border-color:#b2ffd2;box-shadow:0 8px 18px rgba(88,237,150,.08)
}
.lesson-link .num{background:#ebfff3;color:var(--app-primary)}

.result-box{background:linear-gradient(135deg,#f2fff7,#f9fbff);border-color:#d9ffe9}

.mobile-bottom-nav{
  background:rgba(255,255,255,.96)!important;
  backdrop-filter:blur(16px);
  border-top:1px solid #e6e7f0!important;
  box-shadow:0 -8px 30px rgba(33,70,48,.1);
}
.mobile-bottom-nav a{color:#9ab3a4!important}
.mobile-bottom-nav a:has(.nav-icon){font-weight:700}
.mobile-bottom-nav a.active,.mobile-bottom-nav a:hover{color:var(--app-primary)!important}
.mobile-bottom-nav .nav-icon{stroke-width:2.2}

.auth-shell{min-height:80vh}
.auth-card{position:relative;overflow:hidden;padding:30px}
.auth-card:before{
  content:"";display:block;height:8px;margin:-30px -30px 24px;
  background:linear-gradient(90deg,var(--app-primary),var(--app-cyan),var(--app-primary-2))
}

.payment-account{background:linear-gradient(135deg,#edf7f7,#f8fbff);border:0}
.site-footer{background:rgba(255,255,255,.94);border-top:1px solid #ecf4ef}

@media(max-width:820px){
  body:before{height:112px}
  .page{padding:18px 12px 96px}
  .page-title{align-items:flex-start}
  .page-title h1{font-size:24px}
  .hero,.dashboard-hero{border-radius:24px!important;padding:22px!important}
  .card,.stage-card{border-radius:19px!important}
  .sidebar{border-top-right-radius:0;border-bottom-right-radius:0}
}
@media(max-width:520px){
  .page{padding-left:10px;padding-right:10px}
  .mobile-bottom-nav{display:grid!important;grid-template-columns:repeat(4,1fr);height:70px;padding-bottom:env(safe-area-inset-bottom)}
  .mobile-bottom-nav a{font-size:10px}
  .mobile-bottom-nav .nav-icon{width:21px;height:21px;margin:0 0 2px}
  .mobile-bottom-nav a b{top:5px}
  .hero h1{font-size:25px}
  .dashboard-kpi-grid{gap:10px}
  .dashboard-kpi{border-radius:17px!important}
}


/* =========================================================
   V50 - TOTAL UI REMAKE
   New information architecture: application workspace.
   PHP/MySQL/business logic untouched.
   ========================================================= */
:root{
  --navy:#111827;
  --navy-2:#182235;
  --primary:#016364;
  --primary-2:#016364;
  --sky:#3cb8ff;
  --mint:#27c89a;
  --orange:#ffad55;
  --red:#ff6678;
  --surface:#ffffff;
  --canvas:#f4f6fb;
  --ink:#20253a;
  --muted:#7b8298;
  --line:#e9ebf3;
  --shadow-1:0 8px 24px rgba(24,31,52,.06);
  --shadow-2:0 18px 44px rgba(24,31,52,.10);
  --radius-xl:26px;
  --radius-lg:20px;
  --radius-md:14px;
  --primary:var(--primary);
  --primary-dark:#005758;
  --primary-soft:#e8f4f4;
  --bg:var(--canvas);
  --card:var(--surface);
  --line:var(--line);
  --ink:var(--ink);
  --muted:var(--muted);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 85% -5%,rgba(91,255,159,.09),transparent 25%),
    linear-gradient(180deg,#f8f9fd 0%,var(--canvas) 35%);
  color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  line-height:1.55;
}
body:before{display:none!important}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}

/* Desktop workspace */
.app-shell{min-height:100vh;display:flex}
.sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:236px;
  padding:16px 12px;
  background:linear-gradient(180deg,var(--navy) 0%,#0f172a 100%);
  color:#fff;
  border:0;
  box-shadow:16px 0 42px rgba(15,23,42,.10);
  z-index:100;
  overflow-y:auto;
}
.sidebar-top{
  padding:6px 6px 18px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.sidebar .brand{gap:11px}
.brand-logo{
  width:40px;height:40px;border-radius:13px;
  background:linear-gradient(135deg,var(--primary),var(--sky));
  box-shadow:0 8px 20px rgba(91,255,159,.24);
}
.brand-text strong{font-size:14px}
.brand-text small{color:#94a3b8}
.user-card{
  margin:15px 2px 14px;
  padding:10px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
}
.profile-avatar{background:#fff;color:var(--primary)}
.sidebar-nav{gap:2px}
.nav-section{
  margin:16px 9px 7px;
  font-size:10px;
  color:#64748b;
  letter-spacing:.15em;
}
.sidebar-nav a{
  min-height:43px;
  border-radius:13px;
  padding:10px 11px;
  color:#b9c3d4;
  font-size:13px;
  font-weight:650;
  transition:.18s ease;
}
.sidebar-nav a.active{
  background:linear-gradient(90deg,rgba(91,255,159,.30),rgba(91,255,159,.12))!important;
  color:#fff!important;
  box-shadow:inset 3px 0 0 var(--primary);
}
.sidebar-nav a:not(.active):hover{
  background:rgba(255,255,255,.06)!important;
  color:#fff!important;
  transform:translateX(2px);
}
.main-shell{margin-left:236px;min-width:0;flex:1;min-height:100vh}
.main-shell:before{
  content:"";
  position:fixed;left:236px;right:0;top:0;height:74px;
  background:rgba(248,249,253,.86);
  border-bottom:1px solid rgba(233,235,243,.86);
  backdrop-filter:blur(14px);
  z-index:30;
  pointer-events:none;
}
.mobile-topbar{display:none}

/* Main page */
.page{
  max-width:1440px;
  margin:0 auto;
  padding:98px 30px 80px;
  min-height:calc(100vh - 50px);
}
.page-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:26px;
}
.page-title h1{
  margin:0;
  font-size:30px;
  line-height:1.15;
  font-weight:850;
  letter-spacing:-.03em;
}
.page-title .muted{font-size:13px}
.section-label{
  color:var(--primary);
  font-size:10px;
  font-weight:850;
  letter-spacing:.15em;
}
.icon-heading{display:flex;gap:9px;align-items:center}
.ui-icon{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* universal cards */
.card,.stage-card,.dash-panel,.kpi,.dashboard-kpi,.quick-card,.auth-card,.payment-steps,.payment-account{
  background:var(--surface);
  border:1px solid rgba(226,228,237,.72)!important;
  border-radius:var(--radius-lg)!important;
  box-shadow:var(--shadow-1)!important;
}
.card{
  padding:21px;
  transition:.18s ease;
}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)!important}
.card h2,.card h3{letter-spacing:-.02em}
.grid{gap:20px}
.grid-2{gap:20px}
.class-card,.wave-card{
  min-height:260px;
  padding:22px;
}
.class-card:before,.wave-card:before{
  height:4px;
  background:linear-gradient(90deg,var(--primary),var(--sky));
}
.wave-card{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.wave-icon{
  width:52px!important;height:52px!important;
  display:grid;place-items:center;
  border-radius:16px!important;
  background:linear-gradient(135deg,#edf7f7,#ecf8ff)!important;
  margin-bottom:15px;
}
.wave-svg{width:25px;height:25px}

/* Buttons */
.btn{
  min-height:42px;
  padding:10px 16px;
  border-radius:12px!important;
  background:linear-gradient(135deg,var(--primary),var(--primary-2))!important;
  box-shadow:0 7px 18px rgba(91,255,159,.18);
  font-size:13px;
  font-weight:800;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(91,255,159,.22)}
.btn.secondary{background:#f1f2f8!important;color:#434960!important;box-shadow:none}
.btn.success{background:linear-gradient(135deg,#20b486,#35d0a5)!important}
.btn.danger{background:linear-gradient(135deg,#ef5264,#ff7b8a)!important}
.btn.small{min-height:36px;padding:8px 12px;font-size:12px}

/* Forms */
.form-group{margin-bottom:16px}
.form-group label{font-size:12px;font-weight:800;color:#4f566d}
.form-group input,.form-group select,.form-group textarea,
input,select,textarea{
  border:1px solid #dfe3ed;
  border-radius:13px;
  padding:12px 13px;
  background:#fbfcff;
  color:var(--ink);
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus,
input:focus,select:focus,textarea:focus{
  border-color:#96ffc2;
  box-shadow:0 0 0 4px rgba(91,255,159,.10);
  outline:none;
}
.alert{border-radius:13px;padding:13px 15px}

/* Tables */
.table-wrap{
  border:0;
  border-radius:18px;
  box-shadow:var(--shadow-1);
  background:#fff;
}
.table{min-width:720px}
.table th{
  background:#f7f8fc;
  color:#6e7589;
  font-size:11px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.table td{font-size:13px}

/* Dashboard */
.hero,.dashboard-hero{
  position:relative;
  overflow:hidden;
  border:0!important;
  border-radius:28px!important;
  min-height:220px;
  padding:30px!important;
  background:
    radial-gradient(circle at 92% 18%,rgba(255,255,255,.22),transparent 16%),
    radial-gradient(circle at 85% 95%,rgba(255,255,255,.12),transparent 20%),
    linear-gradient(135deg,#52e891 0%,#64f5a0 42%,#35b8ff 100%)!important;
  box-shadow:0 20px 45px rgba(78,226,140,.20)!important;
}
.hero:after,.dashboard-hero:after{
  content:"";position:absolute;width:240px;height:240px;border-radius:50%;
  right:-75px;top:-90px;background:rgba(255,255,255,.08);
}
.hero:before,.dashboard-hero:before{
  content:"";position:absolute;width:140px;height:140px;border-radius:50%;
  right:90px;bottom:-85px;background:rgba(255,255,255,.07);
}
.hero h1,.dashboard-hero h1{font-size:34px;color:#fff;margin:8px 0}
.hero p,.dashboard-hero p{color:rgba(255,255,255,.86);max-width:760px}
.dashboard-kpi-grid{gap:14px;margin:20px 0}
.dashboard-kpi{
  min-height:112px;
  padding:18px;
  border-radius:18px!important;
}
.dashboard-kpi .kpi-icon{
  width:46px;height:46px;border-radius:15px;
  background:#edf7f7!important;color:var(--primary)!important;
}
.dashboard-kpi strong{font-size:28px;font-weight:850}
.dashboard-mosaic{gap:20px}
.dash-panel{padding:20px}
.panel-head h2{font-size:18px}
.kpi-strip{gap:14px}
.quick-grid{gap:14px}

/* Learning */
.lesson-layout{grid-template-columns:285px minmax(0,1fr);gap:20px}
.lesson-sidebar{top:92px}
.lesson-link{border:1px solid #e6e8f1;border-radius:14px;background:#fff;padding:12px}
.lesson-link.current{background:#f1fff7;border-color:#b8ffd6}
.stage-card{padding:23px}
.stage-icon{
  width:44px;height:44px;border-radius:14px;
  background:#edf7f7;color:var(--primary)
}
.question{border:1px solid #e6e8f1;border-radius:15px;background:#fff;padding:18px}
.option{border:1px solid #e8eaf1;border-radius:12px}
.video-frame{border-radius:18px}

/* Mobile */
.mobile-bottom-nav{
  display:none!important;
}
@media(max-width:1100px){
  .sidebar{width:218px}
  .main-shell{margin-left:218px}
  .main-shell:before{left:218px}
  .page{padding-left:22px;padding-right:22px}
  .dashboard-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .sidebar{
    width:292px;
    transform:translateX(-104%);
    transition:transform .25s ease;
    box-shadow:20px 0 50px rgba(15,23,42,.20);
  }
  .sidebar.open{transform:translateX(0)}
  .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.48);z-index:90}
  .sidebar-overlay.open{display:block}
  .main-shell{margin-left:0}
  .main-shell:before{display:none}
  .mobile-topbar{
    display:flex;
    position:sticky;top:0;z-index:70;
    align-items:center;gap:10px;
    height:64px;padding:0 14px;
    color:#fff;
    background:linear-gradient(135deg,#52e891,#6cffa9);
    box-shadow:0 8px 25px rgba(68,198,122,.18);
  }
  .mobile-menu-btn{
    border:1px solid rgba(255,255,255,.2);
    background:rgba(255,255,255,.12);
    color:#fff;border-radius:12px;padding:8px 10px;
  }
  .mobile-title{font-weight:850;font-size:15px}
  .mobile-user-dot{margin-left:auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--primary);font-weight:900}
  .page{padding:18px 12px 100px}
  .page-title h1{font-size:25px}
  .hero,.dashboard-hero{min-height:190px;padding:22px!important;border-radius:23px!important}
  .hero h1,.dashboard-hero h1{font-size:27px}
  .grid,.grid-2,.lesson-layout,.dashboard-mosaic,.payment-info,.payment-list{grid-template-columns:1fr}
  .dashboard-kpi-grid{grid-template-columns:1fr 1fr}
  .lesson-sidebar{position:static}
  .card,.stage-card{border-radius:19px!important}
  .site-footer.with-sidebar{margin-left:0}
  .mobile-bottom-nav{
    position:fixed;left:0;right:0;bottom:0;z-index:1100;
    height:74px!important;
    display:grid!important;
    grid-template-columns:repeat(4,1fr);
    align-items:center;
    padding:7px 7px env(safe-area-inset-bottom);
    background:rgba(255,255,255,.96)!important;
    border-top:1px solid #e5e7f0!important;
    backdrop-filter:blur(16px);
    box-shadow:0 -10px 30px rgba(34,39,67,.10);
  }
  .mobile-bottom-nav a{
    position:relative;
    min-width:0;
    display:flex!important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    color:#9aa1b5!important;
    font-size:10px;
    font-weight:800;
  }
  .mobile-bottom-nav a:hover,.mobile-bottom-nav a.active{color:var(--primary)!important}
  .mobile-bottom-nav .nav-icon{width:22px;height:22px;margin:0}
  .mobile-bottom-nav a b{
    position:absolute;top:1px;right:calc(50% - 18px);
    background:#ff5268;color:#fff;border-radius:99px;
    min-width:17px;height:17px;padding:0 4px;
    display:grid;place-items:center;font-size:9px;
  }
}
@media(max-width:520px){
  .dashboard-kpi-grid{grid-template-columns:1fr 1fr}
  .dashboard-kpi{min-height:100px;padding:14px}
  .dashboard-kpi .kpi-icon{width:40px;height:40px}
  .dashboard-kpi strong{font-size:23px}
  .hero-action{width:100%;margin-top:14px}
  .actions{display:grid;grid-template-columns:1fr}
  .actions .btn,.btn{width:100%}
  .table-wrap{margin-inline:-2px}
}

/* Auth becomes a real app entry screen */
.no-sidebar{
  background:
    radial-gradient(circle at 10% 10%,rgba(91,255,159,.12),transparent 20%),
    radial-gradient(circle at 95% 15%,rgba(60,184,255,.10),transparent 22%),
    #f4f6fb;
}
.no-sidebar .page{max-width:1180px;padding-top:44px}
.auth-shell{min-height:78vh;display:grid;place-items:center}
.auth-card{
  width:min(960px,100%);
  min-height:580px;
  padding:0!important;
  overflow:hidden;
  display:grid;
  grid-template-columns:42% 58%;
}
.auth-card:before{display:none}
.auth-card > h1,.auth-card > p,.auth-card > .alert,.auth-card > form,.auth-card > hr,.auth-card > .small-note{
  grid-column:2;
  margin-left:42px;margin-right:42px;
}
.auth-card:before{
  content:"";
  display:block;
  grid-column:1;
  grid-row:1/20;
  width:auto;height:auto;margin:0;
  background:
    radial-gradient(circle at 78% 18%,rgba(255,255,255,.18),transparent 15%),
    radial-gradient(circle at 20% 80%,rgba(255,255,255,.13),transparent 20%),
    linear-gradient(145deg,#54e992,#69f5a3 50%,#30b9ff);
}
.auth-card h1{padding-top:52px;font-size:29px}
.auth-card p{margin-top:-8px}
.auth-card form{padding-bottom:18px}
.auth-card hr{border:0;border-top:1px solid var(--line)}
@media(max-width:700px){
  .auth-card{grid-template-columns:1fr;min-height:auto}
  .auth-card:before{height:145px;grid-column:1;grid-row:1}
  .auth-card > h1,.auth-card > p,.auth-card > .alert,.auth-card > form,.auth-card > hr,.auth-card > .small-note{
    grid-column:1;margin-left:22px;margin-right:22px
  }
  .auth-card h1{padding-top:18px}
}

/* Utility */
.site-footer{background:transparent;border:0;padding:18px 16px;color:#8a91a4}
.empty{padding:42px 18px}
.badge{padding:6px 10px}

.desktop-appbar{
  position:fixed;left:236px;right:0;top:0;height:74px;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 30px;
  color:#4c5368;font-size:12px;
  pointer-events:none;
}
.desktop-appbar-left{display:flex;align-items:center;gap:8px}
.desktop-appbar-dot{width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,#016364,#3cb8ff);box-shadow:0 0 0 5px rgba(91,255,159,.08)}
.desktop-appbar-right{padding:7px 11px;border-radius:999px;background:#fff;border:1px solid #e9ebf3;color:#6d7488}
@media(max-width:1100px){.desktop-appbar{left:218px}}
@media(max-width:820px){.desktop-appbar{display:none}}

/* =========================================================
   V51 - BEGINNER-FIRST INFORMATION ARCHITECTURE
   ========================================================= */
.welcome-kicker{display:inline-block;font-size:11px;font-weight:900;letter-spacing:.14em;color:#5ef19b}
.welcome-kicker.light{color:rgba(255,255,255,.72)}
.public-home{max-width:1180px;margin:auto;padding:35px 0 50px}
.welcome-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center;padding:34px;border-radius:32px;background:linear-gradient(135deg,#ffffff,#f2fff7);box-shadow:0 24px 60px rgba(35,39,80,.10);border:1px solid #e9eaf4}
.welcome-copy h1{font-size:clamp(32px,5vw,52px);line-height:1.05;letter-spacing:-.045em;margin:15px 0}
.welcome-copy h1 strong{color:#016364}
.welcome-copy p{font-size:16px;color:#697087;max-width:610px}
.welcome-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.welcome-primary{width:auto!important}.welcome-secondary{width:auto!important}
.welcome-visual{display:flex;justify-content:center}
.phone-card{width:min(320px,100%);padding:22px;border-radius:30px;background:linear-gradient(160deg,#005758 0%,#016364 100%);color:#fff;box-shadow:0 22px 42px rgba(1,99,100,.22);transform:rotate(1.5deg)}
.phone-top{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:#fff;padding-bottom:19px;border-bottom:1px solid rgba(255,255,255,.22)}
.phone-top>span{color:#fff}.phone-top .dot{width:9px;height:9px;border-radius:50%;background:#9adbd7}.phone-top b{margin-left:auto;color:#fff}
.phone-greeting{font-size:23px;font-weight:850;color:#fff;margin:22px 0}
.phone-course{display:flex;gap:11px;align-items:center;background:#fff;color:#29304b;padding:13px;border-radius:17px;margin-top:10px;box-shadow:0 8px 18px rgba(15,23,42,.10)}
.phone-course-icon{width:41px;height:41px;border-radius:13px;display:grid;place-items:center;background:#e8f4f4;font-size:20px}
.phone-course strong{display:block;font-size:12px;color:#1f2937}.phone-course span{display:block;font-size:10px;color:#64748b;margin-top:2px}
.muted-course{background:rgba(255,255,255,.13);color:#fff;border:1px solid rgba(255,255,255,.12)}.muted-course strong,.muted-course span{color:#fff}.muted-course span{opacity:.9}.muted-course .phone-course-icon{background:rgba(255,255,255,.14)}
.active-course{background:#e8f4f4;color:#163f40}.active-course strong{color:#164e4d}.active-course span{color:#466c6d}.active-course .phone-course-icon{background:#cfe9e4;color:#016364}
.how-section{padding:45px 10px}.section-head-center{text-align:center;max-width:700px;margin:auto}.section-head-center h2{font-size:30px;margin:7px 0}.section-head-center p{color:#7b8298}
.easy-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:25px}.easy-step{background:#fff;border:1px solid #e9ebf3;border-radius:20px;padding:18px;display:flex;gap:13px;box-shadow:var(--shadow-1)}.easy-step>span{width:36px;height:36px;border-radius:12px;background:#e8f4f4;color:#016364;display:grid;place-items:center;font-weight:900;flex:0 0 auto}.easy-step h3{font-size:14px;margin:0 0 5px}.easy-step p{font-size:12px;color:#7b8298;margin:0}.help-box{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:19px 22px;background:#fff;border:1px solid #e9ebf3;border-radius:20px;box-shadow:var(--shadow-1)}.help-box strong{display:block}.help-box span{display:block;color:#7b8298;font-size:12px;margin-top:3px}

.guided-page{display:grid;gap:18px}.learner-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 28px;border-radius:28px;color:#fff;background:linear-gradient(135deg,#55e892,#66f3a1 55%,#39baff);box-shadow:0 20px 46px rgba(78,226,140,.20)}.learner-hero h1{margin:8px 0 7px;font-size:32px;letter-spacing:-.03em}.learner-hero p{margin:0;color:rgba(255,255,255,.84)}.learner-avatar{width:62px;height:62px;border-radius:20px;background:#fff;color:#016364;display:grid;place-items:center;font-size:25px;font-weight:900}
.journey-card{padding:21px;background:#fff;border:1px solid #e8eaf1;border-radius:22px;box-shadow:var(--shadow-1)}.journey-title{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.journey-title h2{margin:3px 0 0;font-size:20px}.journey-tip{padding:7px 10px;background:#f5f6fa;border-radius:99px;color:#7c8397;font-size:11px;font-weight:800}.journey-steps{display:grid;grid-template-columns:1fr 35px 1fr 35px 1fr 35px 1fr;align-items:center;gap:8px;margin-top:20px}.journey-step{display:grid;grid-template-columns:34px 1fr;gap:8px;align-items:center;min-width:0}.journey-step>span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#edf0f5;color:#7a8194;font-weight:900}.journey-step strong{font-size:12px}.journey-step small{display:block;color:#959bb0;font-size:10px}.journey-step.current>span{background:#016364;color:#fff;box-shadow:0 0 0 5px #e8f4f4}.journey-step.done>span{background:#016364;color:#fff}.journey-steps>i{height:2px;background:#e7e9f0}
.next-action{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:16px;padding:20px 22px;border-radius:22px;background:#fff;border:1px solid #e7e8ef;box-shadow:var(--shadow-1)}.next-action .next-icon{width:52px;height:52px;border-radius:17px;background:#e8f4f4;color:#016364;display:grid;place-items:center}.next-copy h2{margin:2px 0 2px;font-size:20px}.next-copy p{margin:0;color:#7c8296;font-size:13px}.next-action.pay{border-color:#eadbce;background:#fffaf5}.next-action.waiting{border-color:#dbe6f3;background:#f7fbff}.next-action.learn{border-color:#d9eee7;background:#f5fcf9}
.simple-section-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-end;margin-top:4px}.simple-section-head h2{margin:5px 0 0;font-size:21px}.text-link{font-size:12px;color:#016364;font-weight:800}
.learner-course-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.learner-course-card{background:#fff;border:1px solid #e8eaf1;border-radius:21px;overflow:hidden;box-shadow:var(--shadow-1)}.course-cover{height:92px;background:linear-gradient(135deg,#59e995,#3eb8f4);display:flex;align-items:center;justify-content:space-between;padding:16px;color:#fff}.course-cover span{width:48px;height:48px;border-radius:15px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:22px;font-weight:900}.course-cover small{align-self:flex-start;font-size:10px;padding:7px 9px;border-radius:99px;background:rgba(255,255,255,.15)}.course-content{padding:17px}.course-content h3{font-size:18px;margin:8px 0 2px}.course-content p{margin:0;color:#7c8296;font-size:12px}.course-progres{margin:14px 0 15px}.course-progres-head{display:flex;justify-content:space-between;color:#7b8298;font-size:11px;margin-bottom:6px}.course-progres-head strong{color:#016364}.course-content .btn.small{width:auto}
.first-time-card{display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:15px;padding:20px 22px;background:#fff;border:1px solid #e8eaf1;border-radius:21px;box-shadow:var(--shadow-1)}.first-time-icon{width:58px;height:58px;border-radius:18px;background:#e8f4f4;display:grid;place-items:center;font-size:24px}.first-time-card h2{font-size:19px;margin:3px 0}.first-time-card p{margin:0;color:#7b8298;font-size:12px}.mini-help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.mini-help-grid a{display:grid;grid-template-columns:35px 1fr auto;gap:10px;align-items:center;padding:14px;background:#fff;border:1px solid #e8eaf1;border-radius:17px}.mini-help-grid a>span{width:35px;height:35px;border-radius:11px;background:#f2f3f8;display:grid;place-items:center}.mini-help-grid strong{display:block;font-size:12px}.mini-help-grid small{display:block;color:#8b91a5;font-size:10px}.mini-help-grid b{color:#016364}

.simple-page-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 25px;margin-bottom:18px;border-radius:24px;background:#fff;border:1px solid #e8eaf1;box-shadow:var(--shadow-1)}.simple-page-hero h1{margin:4px 0 3px;font-size:27px}.simple-page-hero p{margin:0;color:#7c8296;font-size:13px}.simple-page-hero.compact{padding:19px 22px}.simple-step-pill{display:flex;align-items:center;gap:7px;padding:9px 12px;border-radius:99px;background:#e8f4f4;color:#016364;font-size:11px;font-weight:900}.simple-step-pill span{width:22px;height:22px;border-radius:50%;background:#016364;color:#fff;display:grid;place-items:center}
.class-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.class-letter{width:45px;height:45px;border-radius:14px;background:linear-gradient(135deg,#e8f4f4,#edf8ff);color:#016364;display:grid;place-items:center;font-size:18px;font-weight:900}

.payment-hero{background:linear-gradient(135deg,#fff,#f5fff9)}.payment-guide-badge{padding:10px 12px;border-radius:12px;background:#e8f4f4;color:#016364;font-size:12px;font-weight:900}.payment-flow{display:grid;grid-template-columns:1fr 30px 1fr 30px 1fr 30px 1fr;align-items:center;gap:6px;padding:14px 18px;background:#fff;border:1px solid #e8eaf1;border-radius:18px}.payment-flow>i{height:2px;background:#e6e8ef}.payment-flow-step{display:flex;align-items:center;gap:9px}.payment-flow-step span{width:31px;height:31px;border-radius:50%;background:#eff0f5;color:#7a8194;display:grid;place-items:center;font-size:12px;font-weight:900}.payment-flow-step.active span{background:#016364;color:#fff}.payment-flow-step strong{font-size:11px;display:block}.payment-flow-step small{color:#8a91a5;font-size:9px;display:block}
.pay-main-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.pay-bank-panel,.pay-how-panel{padding:22px;background:#fff;border:1px solid #e8eaf1;border-radius:21px;box-shadow:var(--shadow-1)}.pay-panel-head{display:flex;justify-content:space-between;gap:12px}.pay-panel-head h2{margin:4px 0 16px;font-size:20px}.safe-chip{padding:6px 9px;background:#e9fbf5;color:#159a71;border-radius:99px;font-size:10px;font-weight:900;height:max-content}.pay-bank-name{font-size:13px;color:#7b8297}.pay-account-label{font-size:10px;letter-spacing:.1em;color:#9299ab;font-weight:900;margin-top:15px}.pay-account-row{display:flex;align-items:center;gap:8px;margin-top:4px}.pay-account-row strong{font-size:28px;letter-spacing:.02em}.copy-btn{border:0;border-radius:10px;background:#e8f4f4;color:#016364;padding:8px 10px;font-size:11px;font-weight:900}.pay-owner{display:flex;justify-content:space-between;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid #eef0f5;font-size:11px}.pay-owner span{color:#8c93a7}.pay-contact{margin-top:14px;padding:11px 12px;background:#f7f8fb;border-radius:12px;color:#777e93;font-size:11px}.plain-steps{padding:0;margin:10px 0 0;display:grid;gap:10px;list-style:none}.plain-steps li{display:grid;grid-template-columns:30px 1fr;gap:9px;align-items:center}.plain-steps li>span{width:30px;height:30px;border-radius:10px;background:#e8f4f4;color:#016364;display:grid;place-items:center;font-weight:900;font-size:11px}.plain-steps strong{display:block;font-size:12px}.plain-steps small{display:block;color:#8c93a6;font-size:10px}
.pay-order-card{padding:22px;background:#fff;border:1px solid #e8eaf1;border-radius:22px;box-shadow:var(--shadow-1)}.pay-order-card.needs-action{border:2px solid #d4ffe6}.pay-order-head{display:grid;grid-template-columns:48px 1fr auto;gap:13px;align-items:center}.pay-class-mark{width:48px;height:48px;border-radius:15px;background:linear-gradient(135deg,#5bf099,#63bdf0);color:#fff;display:grid;place-items:center;font-size:19px;font-weight:900}.pay-order-title h2{margin:3px 0 2px;font-size:19px}.pay-order-title small{color:#888fa3;font-size:11px}.pay-order-status{padding:7px 10px;border-radius:99px;font-size:10px;font-weight:900;background:#eef0f5;color:#677087}.pay-order-status.status-belum-bayar{background:#fff3df;color:#aa6a0a}.pay-order-status.status-ditolak{background:#ffe8ea;color:#c63e4e}.pay-order-status.status-menunggu-verifikasi{background:#eaf3fb;color:#3e6e9c}.pay-order-status.status-aktif{background:#e7fbf3;color:#158962}
.pay-amount-box{display:flex;justify-content:space-between;gap:15px;margin:17px 0;padding:16px;border-radius:15px;background:#f8f9fc}.pay-amount-box span{display:block;color:#8990a3;font-size:10px}.pay-amount-box strong{display:block;font-size:21px;margin-top:3px}
.pay-action{padding:18px;border-radius:17px;background:#f5fff9}.pay-action-title{display:flex;gap:10px;align-items:flex-start}.action-number{width:30px;height:30px;border-radius:50%;background:#016364;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:900;flex:0 0 auto}.pay-action-title h3{margin:2px 0 3px;font-size:16px}.pay-action-title p{margin:0;color:#7b8298;font-size:11px}.pay-proof-form{margin-top:14px;display:grid;gap:5px}.pay-proof-form .form-group{margin-bottom:7px}.pay-send-btn{width:auto!important}.pay-state{display:flex;align-items:center;gap:13px;padding:16px;border-radius:17px;background:#f8f9fc}.pay-state.active{background:#eefbf6}.pay-state.waiting{background:#eff7fd}.pay-state .state-icon{width:40px;height:40px;border-radius:13px;background:#fff;display:grid;place-items:center;font-weight:900}.pay-state h3{margin:3px 0;font-size:15px}.pay-state p{margin:0;color:#7b8298;font-size:11px}.pay-state .btn{margin-left:auto;width:auto}.payment-help-box{display:flex;align-items:center;gap:10px;padding:13px 15px;background:#fff8ec;border:1px solid #f0e2c4;border-radius:15px;color:#806c4c;font-size:11px}.payment-help-box strong{font-size:12px}.payment-help-box span{margin-right:auto}.payment-help-box a{font-weight:900;color:#016364}

@media(max-width:900px){
  .public-home{padding:18px 0 30px}.welcome-hero{grid-template-columns:1fr;padding:22px;border-radius:25px}.welcome-visual{order:-1}.phone-card{transform:none;width:min(360px,100%)}.easy-steps{grid-template-columns:1fr 1fr}.learner-hero{padding:21px;border-radius:23px}.learner-hero h1{font-size:27px}.journey-steps{grid-template-columns:1fr 16px 1fr 16px 1fr 16px 1fr;gap:4px}.journey-step{grid-template-columns:30px 1fr}.journey-step strong{font-size:10px}.journey-step small{font-size:8px}.next-action{grid-template-columns:45px 1fr}.next-action .btn{grid-column:2;width:100%}.learner-course-grid{grid-template-columns:1fr}.mini-help-grid{grid-template-columns:1fr}.first-time-card{grid-template-columns:50px 1fr}.first-time-card .btn{grid-column:2;width:100%}.pay-main-grid{grid-template-columns:1fr}.payment-flow{grid-template-columns:1fr 18px 1fr 18px 1fr 18px 1fr;padding:12px}.payment-flow-step{gap:5px}.payment-flow-step strong{font-size:9px}.payment-flow-step small{font-size:7px}.payment-flow-step span{width:27px;height:27px}.pay-order-head{grid-template-columns:44px 1fr}.pay-order-status{grid-column:2;justify-self:start}.pay-state{align-items:flex-start;flex-wrap:wrap}.pay-state .btn{margin-left:53px}.payment-help-box{align-items:flex-start;flex-wrap:wrap}.payment-help-box span{width:100%}}
@media(max-width:600px){
  .easy-steps{grid-template-columns:1fr}.help-box{display:grid}.simple-page-hero{align-items:flex-start;flex-direction:column;padding:18px}.simple-page-hero h1{font-size:22px}.journey-card{padding:16px}.journey-title{display:block}.journey-tip{display:inline-block;margin-top:9px}.journey-steps{grid-template-columns:repeat(4,1fr);gap:4px}.journey-steps>i{display:none}.journey-step{display:block;text-align:center}.journey-step>span{margin:0 auto 5px}.journey-step strong{font-size:9px}.journey-step small{font-size:8px}.next-action{grid-template-columns:42px 1fr;padding:16px}.next-copy h2{font-size:17px}.next-copy p{font-size:11px}.next-action .btn{grid-column:1/-1}.learner-course-card{border-radius:18px}.payment-flow{display:flex;overflow-x:auto;gap:7px}.payment-flow>i{min-width:14px}.payment-flow-step{min-width:110px}.pay-account-row{align-items:flex-start;flex-direction:column}.pay-account-row strong{font-size:24px}.pay-amount-box{display:block}.pay-amount-box>div+div{margin-top:10px}.pay-order-card{padding:17px}.pay-send-btn{width:100%!important}.welcome-actions .btn{width:100%!important}.public-home .welcome-copy h1{font-size:34px}}

/* V52 progresive payment */
.payment-one-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 26px;margin-bottom:18px;border-radius:24px;background:linear-gradient(135deg,#fff,#f2fff7);border:1px solid #e7e8f2;box-shadow:0 12px 28px rgba(33,37,67,.06)}.payment-one-hero h1{margin:5px 0;font-size:27px;letter-spacing:-.03em}.payment-one-hero p{margin:0;color:#7b8297;font-size:13px}.payment-one-icon{width:58px;height:58px;border-radius:18px;background:#e8f4f4;display:grid;place-items:center;font-size:27px}.payment-current-card{display:grid;gap:14px}.payment-current-top{display:grid;grid-template-columns:48px 1fr auto;gap:14px;align-items:center;padding:20px 22px;background:#fff;border:1px solid #e6e8f1;border-radius:21px;box-shadow:0 8px 24px rgba(29,35,56,.06)}.payment-current-top h2{margin:3px 0 1px;font-size:20px}.payment-current-top small{color:#8a91a5;font-size:11px}.payment-step-card{display:grid;grid-template-columns:42px 1fr;gap:14px;padding:20px 22px;background:#fff;border:1px solid #e6e8f1;border-radius:20px;box-shadow:0 8px 24px rgba(29,35,56,.05)}.step-number{width:42px;height:42px;border-radius:14px;background:#e8f4f4;color:#016364;display:grid;place-items:center;font-weight:900}.step-body h3{margin:4px 0 4px;font-size:17px}.step-body p{margin:0 0 10px;color:#7b8297;font-size:12px}.payment-amount-big{font-size:30px;font-weight:900;color:#48d884;margin:6px 0 4px}.proof-form-card{border:2px solid #c6ffde!important;background:#fbfaff!important}.payment-account-modal[hidden]{display:none}.payment-account-modal{position:fixed;inset:0;z-index:2000}.payment-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.58);backdrop-filter:blur(4px)}.payment-modal-card{position:relative;width:min(520px,calc(100% - 28px));margin:6vh auto;background:#fff;border-radius:24px;padding:24px;box-shadow:0 28px 70px rgba(15,23,42,.25);animation:payModalIn .18s ease}.payment-modal-close{position:absolute;right:12px;top:10px;width:36px;height:36px;border:0;border-radius:11px;background:#f1f2f7;font-size:24px;color:#697087}.modal-bank-box{display:grid;gap:10px;padding:15px;background:#f7f7fc;border:1px solid #e9eaf2;border-radius:16px;margin:15px 0}.modal-bank-box span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#8c93a6;font-weight:850}.modal-bank-box strong{display:block;font-size:15px}.modal-bank-box div:nth-child(2) strong{font-size:24px;letter-spacing:.02em;color:#48d884}.modal-instructions{padding:13px 14px;background:#f5fbff;border:1px solid #dcecf5;border-radius:14px;color:#5f6c7d;font-size:11px}.modal-instructions ol{margin:8px 0 0;padding-left:20px}.modal-instructions li{padding:3px 0}.modal-instructions b{color:#48d884}.modal-open{overflow:hidden}@keyframes payModalIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}@media(max-width:650px){.payment-one-hero{padding:19px;align-items:flex-start}.payment-one-hero h1{font-size:22px}.payment-one-icon{width:50px;height:50px;font-size:22px}.payment-current-top{grid-template-columns:42px 1fr;padding:17px}.payment-current-top .pay-order-status{grid-column:2;justify-self:start}.payment-step-card{padding:17px;grid-template-columns:36px 1fr}.step-number{width:36px;height:36px}.payment-amount-big{font-size:26px}.payment-modal-card{margin:3vh auto;padding:19px}}

/* V53: progresive disclosure - only one payment action is visible at a time */
.payment-only-card{padding:28px;background:#fff;border:1px solid #e6e8f1;border-radius:23px;box-shadow:0 12px 30px rgba(29,35,56,.06);text-align:center;max-width:760px;margin:0 auto}
.payment-only-icon{width:58px;height:58px;border-radius:19px;display:grid;place-items:center;background:#e8f4f4;color:#016364;font-size:22px;font-weight:900;margin:0 auto 13px}
.payment-only-icon.done{background:#e8faf3;color:#16966f}
.payment-only-card h2{margin:4px 0 8px;font-size:24px;letter-spacing:-.03em}
.payment-only-card p{margin:0 auto 18px;color:#7b8297;font-size:13px;max-width:590px}
.payment-big-btn{min-width:280px}
.proof-open-card{text-align:left}
.proof-open-card .payment-only-icon{margin:0 0 13px}
.proof-open-card .form-group{margin-bottom:14px}
.proof-open-card .actions{margin-top:8px}
.success-card{background:linear-gradient(135deg,#fff,#f2fcf8);border-color:#d5efe5}
@media(max-width:650px){
 .payment-only-card{padding:22px 17px}
 .payment-only-card h2{font-size:20px}
 .payment-big-btn{min-width:0;width:100%}
 .proof-open-card .actions{display:grid;grid-template-columns:1fr}
 .proof-open-card .actions .btn{width:100%}
}

/* V54 - no-wave information architecture */
.class-catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.catalog-card{overflow:hidden;background:#fff;border:1px solid #e8eaf1;border-radius:22px;box-shadow:0 8px 24px rgba(29,35,56,.06);transition:.18s}
.catalog-card:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(29,35,56,.11)}
.catalog-cover{position:relative;height:180px;min-height:180px;overflow:hidden;display:flex;align-items:flex-start;justify-content:space-between;color:#fff;background:#e9edf4}
.catalog-cover img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.catalog-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,23,42,.08) 15%,rgba(15,23,42,.58) 100%);pointer-events:none}
.catalog-cover .catalog-category{position:relative;z-index:2;margin:14px 15px 0 auto;padding:7px 10px;border-radius:99px;background:rgba(15,23,42,.48);font-size:10px;font-weight:800;line-height:1;backdrop-filter:blur(5px)}
.teacher-cover{background:#e9edf4}.admin-cover{background:#e9edf4}
.catalog-body{padding:18px}.catalog-body h2{margin:0 0 5px;font-size:19px}.catalog-body p{color:#7b8297;font-size:12px;min-height:40px}.catalog-info{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #f0f1f5;font-size:11px}.catalog-info span{color:#8990a4}.catalog-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.catalog-stats span{padding:10px;background:#f7f8fb;border-radius:12px}.catalog-stats b{display:block;font-size:19px}.catalog-stats small{color:#8a91a5}.catalog-action{display:flex;align-items:center;gap:8px;justify-content:space-between;margin-top:12px}.class-pick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.pick-card{display:grid!important;grid-template-columns:46px 1fr auto;gap:12px;align-items:center;padding:17px!important}.pick-card h2{margin:0 0 3px;font-size:16px}.pick-card small{color:#858ca0}.pick-card>b{color:#016364}.class-letter{width:46px;height:46px;border-radius:14px;background:#e8f4f4;color:#016364;display:grid;place-items:center;font-weight:900}
.app-modal[hidden]{display:none}.app-modal{position:fixed;inset:0;z-index:1800}.app-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.58);backdrop-filter:blur(4px)}.app-modal-card{position:relative;width:min(600px,calc(100% - 26px));max-height:88vh;overflow:auto;margin:5vh auto;background:#fff;border-radius:24px;padding:25px;box-shadow:0 30px 75px rgba(15,23,42,.25)}.app-modal-close{position:absolute;right:12px;top:11px;width:35px;height:35px;border:0;border-radius:11px;background:#f0f1f6;font-size:23px;color:#697087}
@media(max-width:1000px){.class-catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  .class-catalog-grid,.class-pick-grid{grid-template-columns:1fr}
  .catalog-card{border-radius:19px}
  .catalog-cover{height:160px;min-height:160px}
  .catalog-body{padding:16px}
  .catalog-body h2{font-size:18px}
  .catalog-action{flex-wrap:wrap}
  .catalog-action .btn{max-width:100%}
  .simple-page-hero{margin-bottom:14px}
  .app-modal-card{margin:2vh auto;padding:19px}
}

/* V63 - Mobile-only right drawer. Desktop/laptop styles are untouched. */
@media (max-width: 768px) {
  body.has-sidebar .sidebar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: min(84vw, 340px) !important;
    max-width: 340px !important;
    height: 100vh !important;
    margin: 0 !important;
    transform: translateX(110%) !important;
    transition: transform .28s ease !important;
    z-index: 10001 !important;
    overflow-y: auto !important;
    visibility: hidden !important;
  }
  body.has-sidebar .sidebar.mobile-open {
    transform: translateX(0) !important;
    visibility: visible !important;
  }
  body.has-sidebar .sidebar-close {
    display: flex !important;
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    z-index: 10003 !important;
  }
  body.has-sidebar .sidebar-overlay {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.45) !important;
    z-index: 10000 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .2s ease !important;
  }
  body.has-sidebar .sidebar-overlay.mobile-show {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  body.has-sidebar .mobile-menu-btn {
    margin-left: auto !important;
    display: inline-flex !important;
  }
}
@media (min-width: 769px) {
  /* No desktop layout overrides in V63. */
  .sidebar-overlay.mobile-show { display: none !important; }
}

/* V64: hamburger button pinned to the RIGHT on mobile only */
@media (max-width: 768px) {
  body.has-sidebar .mobile-menu-btn {
    position: absolute !important;
    right: 14px !important;
    left: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1100 !important;
  }
}

/* V65: mobile hamburger = 3 horizontal lines */
@media (max-width: 768px) {
  body.has-sidebar .mobile-menu-btn {
    position: absolute !important;
    right: 14px !important;
    left: auto !important;
    margin: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  body.has-sidebar .mobile-menu-btn::before {
    content: "☰" !important;
    font-family: Arial, sans-serif !important;
    font-size: 24px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }
}

/* V66 - guaranteed 3-line hamburger on mobile; desktop untouched */
@media (max-width: 768px) {
  body.has-sidebar .mobile-menu-btn {
    position: fixed !important;
    top: 14px !important;
    right: 14px !important;
    left: auto !important;
    margin: 0 !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.12) !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 15000 !important;
  }

  body.has-sidebar .mobile-menu-btn::before {
    content: "" !important;
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    border-radius: 2px !important;
    background: #fff !important;
    box-shadow: 0 -7px 0 #fff, 0 7px 0 #fff !important;
  }
}

/* V67: profile remains visible and distinct inside mobile drawer */
@media (max-width: 768px) {
  body.has-sidebar .sidebar-profile {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 10px 10px 16px !important;
    padding: 12px !important;
    border-top: 1px solid rgba(255,255,255,.12) !important;
  }
}

/* V68 FINAL: mobile-only right drawer; desktop remains unchanged */
@media (max-width: 768px) {
  body.has-sidebar .sidebar.open,
  body.has-sidebar .sidebar.mobile-open {
    transform: translateX(0) !important;
    visibility: visible !important;
  }
  body.has-sidebar .sidebar-overlay.open,
  body.has-sidebar .sidebar-overlay.mobile-show {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  body.has-sidebar .mobile-topbar {
    position: relative !important;
    z-index: 1100 !important;
  }
}



@media (max-width: 768px) {
  body.has-sidebar .desktop-appbar { display: none !important; }
}

/* V69: prevent profile/avatar from overlapping the mobile hamburger */
@media (max-width: 768px) {
  body.has-sidebar .mobile-topbar {
    position: relative !important;
    padding-right: 68px !important;
    box-sizing: border-box !important;
  }

  body.has-sidebar .mobile-user-dot {
    margin-left: 0 !important;
    margin-right: 54px !important;
    flex: 0 0 36px !important;
    position: relative !important;
    z-index: 1000 !important;
  }

  body.has-sidebar .mobile-menu-btn {
    right: 14px !important;
    z-index: 15000 !important;
  }
}

/* V70: deterministic separation between profile avatar and hamburger on HP */
@media (max-width: 768px) {
  body.has-sidebar .mobile-topbar {
    position: relative !important;
    box-sizing: border-box !important;
    padding-left: 14px !important;
    padding-right: 118px !important;
  }

  body.has-sidebar .mobile-user-dot {
    position: absolute !important;
    right: 66px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    z-index: 1200 !important;
  }

  body.has-sidebar .mobile-menu-btn {
    position: absolute !important;
    right: 14px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 15000 !important;
  }

  body.has-sidebar .mobile-title {
    max-width: calc(100% - 8px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* V71: hide mobile topbar avatar only; sidebar profile remains available in the menu */
@media (max-width: 768px) {
  body.has-sidebar .mobile-user-dot { display: none !important; }
  body.has-sidebar .mobile-topbar { padding-right: 72px !important; }
  body.has-sidebar .mobile-menu-btn {
    right: 14px !important;
    left: auto !important;
  }
}

/* V72: mobile header scrolls with page; it does not stay fixed */
@media (max-width: 768px) {
  body.has-sidebar .mobile-topbar {
    position: relative !important;
    top: auto !important;
    z-index: 70 !important;
  }
}

/* V73: mobile header stays fixed while page scrolls */
@media (max-width: 768px) {
  body.has-sidebar .mobile-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1100 !important;
  }

  body.has-sidebar .main-shell {
    padding-top: 64px !important;
  }
}
@media (max-width: 560px) {
  body.has-sidebar .main-shell {
    padding-top: 58px !important;
  }
}

/* V76: payment added to participant mobile bottom navigation */
@media (max-width: 820px) {
  .mobile-bottom-nav {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}
/* V76: 5-item participant mobile bottom navigation */
@media (max-width: 820px) {
  .mobile-bottom-nav { grid-template-columns: repeat(5, 1fr) !important; }
}

/* V80: Admin Pesan Masuk - one clean view on mobile */
.admin-chat-layout{
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:16px;
}
.admin-chat-contact{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 10px;
  padding:12px;
  border-bottom:1px solid var(--line);
  text-decoration:none;
  color:inherit;
}
.admin-chat-contact .small-note{width:100%}
.admin-chat-pane-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding-bottom:10px;
  margin-bottom:4px;
  border-bottom:1px solid var(--line);
}
.admin-chat-conversation-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:10px;
  margin-bottom:6px;
  border-bottom:1px solid var(--line);
}
.admin-chat-box{
  max-height:480px;
  overflow:auto;
  padding:16px;
}
.admin-chat-row{
  display:flex;
  margin:8px 0;
}
.admin-chat-bubble{
  max-width:75%;
  padding:10px 14px;
  border-radius:14px;
}
.admin-chat-form{
  display:flex;
  gap:8px;
  margin-top:12px;
}
.admin-chat-form input[type="text"]{flex:1;min-width:0}

@media (max-width: 768px){
  .admin-chat-layout{
    display:block;
  }
  .admin-chat-layout.has-conversation .admin-chat-contacts{
    display:none !important;
  }
  .admin-chat-layout:not(.has-conversation) .admin-chat-conversation{
    display:none !important;
  }
  .admin-chat-conversation{
    min-height:calc(100vh - 150px);
  }
  .admin-chat-box{
    max-height:none;
    height:calc(100vh - 300px);
    min-height:260px;
  }
  .admin-chat-bubble{
    max-width:85%;
  }
  .admin-chat-form{
    position:sticky;
    bottom:0;
    padding:10px 0 4px;
    background:var(--bg, #f7f8fc);
  }
  .admin-chat-back{flex-shrink:0}
}

/* V82: dashboard peserta fokus grafik, tanpa informasi pembayaran */
.dashboard-stat-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-bottom:18px;
}
.dashboard-chart-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-bottom:24px;
}
.dashboard-chart-card{min-width:0}
.chart-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:20px;
}
.chart-head h2{margin:4px 0 0}
.bar-chart{
  display:flex;
  align-items:flex-end;
  gap:18px;
  min-height:250px;
  padding:18px 8px 0;
  overflow-x:auto;
}
.bar-item{
  min-width:58px;
  flex:1 0 58px;
  height:220px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
}
.bar-value{font-size:12px;font-weight:800;margin-bottom:7px;color:var(--app-primary,#016364)}
.bar-track{
  width:34px;
  height:170px;
  border-radius:12px;
  background:#eceef6;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.bar-track span{
  display:block;
  width:100%;
  background:linear-gradient(180deg,var(--app-primary,#016364),var(--app-primary-2,#016364));
  border-radius:12px;
  min-height:2px;
}
.bar-label{
  width:70px;
  margin-top:9px;
  font-size:10px;
  font-weight:700;
  text-align:center;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.horizontal-chart{display:grid;gap:16px;padding-top:10px}
.horizontal-bar-item{min-width:0}
.horizontal-bar-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:7px;
  font-size:13px;
}
.horizontal-bar-head strong{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.horizontal-track{
  width:100%;
  height:10px;
  border-radius:999px;
  background:#eceef6;
  overflow:hidden;
}
.horizontal-track span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--app-primary,#016364),var(--app-cyan,#20b8f2));
}

@media(max-width:900px){
  .dashboard-stat-grid{grid-template-columns:1fr 1fr}
  .dashboard-chart-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .dashboard-stat-grid{grid-template-columns:1fr}
  .bar-chart{min-height:225px}
}

/* V83: vector icons instead of emoji + teacher discussion in bottom nav */
.mini-help-icon{
  width:38px;
  height:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  flex:0 0 38px;
  background:var(--primary-soft,#edf7f7);
  color:var(--primary,#016364);
}
.mini-help-icon .ui-icon{width:20px;height:20px}
.first-time-icon .ui-icon{width:30px;height:30px}
@media (max-width: 820px) {
  body.page-pengajar-dashboard .mobile-bottom-nav,
  body.page-pengajar-kelas .mobile-bottom-nav,
  body.page-pengajar-penilaian .mobile-bottom-nav,
  body.page-pengajar-diskusi .mobile-bottom-nav,
  body.page-pengajar-chat_admin .mobile-bottom-nav,
  body.page-pengajar-murid .mobile-bottom-nav {
    grid-template-columns: repeat(5,1fr) !important;
  }
}

/* V85: admin chat mobile - no horizontal overflow and responsive names */
@media (max-width: 768px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden !important;
  }

  body.has-sidebar .main-shell,
  body.has-sidebar .page,
  body.has-sidebar .admin-chat-layout {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .admin-chat-layout {
    display: block !important;
    overflow: visible !important;
  }

  .admin-chat-layout.has-conversation .admin-chat-contacts,
  .admin-chat-layout:not(.has-conversation) .admin-chat-conversation {
    display: none !important;
  }

  .admin-chat-conversation {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  .admin-chat-conversation-head {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }

  .admin-chat-conversation-head > div {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .admin-chat-conversation-head > div strong,
  .admin-chat-conversation-head > div .small-note {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .admin-chat-box {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .admin-chat-row {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .admin-chat-bubble {
    min-width: 0 !important;
    max-width: 84% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .admin-chat-form {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .admin-chat-form input[type="text"] {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .admin-chat-form .btn {
    flex: 0 0 auto !important;
  }

  .admin-chat-back {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
}

/* V86: Daftar Guru responsive on mobile */
.guru-layout{align-items:start}
.guru-actions{display:flex;flex-wrap:wrap;gap:8px}
.guru-actions form{margin:0}
@media (max-width: 768px){
  .guru-layout{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .guru-layout > .card{
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  .guru-page-title{
    flex-wrap:wrap !important;
  }
  .guru-table-wrap{
    width:100%;
    overflow:visible !important;
  }
  .guru-table{
    width:100% !important;
    min-width:0 !important;
    border-collapse:separate !important;
    border-spacing:0 10px !important;
  }
  .guru-table .guru-table-head{
    display:none !important;
  }
  .guru-table,
  .guru-table tbody,
  .guru-table tr,
  .guru-table td{
    display:block !important;
    box-sizing:border-box !important;
  }
  .guru-table tr:not(.guru-table-head){
    background:#fff !important;
    border:1px solid var(--line) !important;
    border-radius:16px !important;
    padding:10px 12px !important;
    box-shadow:0 6px 18px rgba(30,41,59,.05) !important;
    margin-bottom:10px !important;
  }
  .guru-table td{
    width:100% !important;
    border:0 !important;
    padding:7px 0 !important;
    word-break:break-word !important;
  }
  .guru-table td::before{
    content:attr(data-label);
    display:block !important;
    margin-bottom:3px !important;
    font-size:10px !important;
    font-weight:800 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
    color:var(--muted) !important;
  }
  .guru-table .guru-actions{
    width:100% !important;
    margin-top:3px !important;
  }
  .guru-table .guru-actions form,
  .guru-table .guru-actions a,
  .guru-table .guru-actions .btn{
    flex:1 1 120px !important;
  }
}

/* V87: clean Forum Diskusi empty state + responsive layout */
.forum-empty-card{
  max-width:760px;
  margin:24px auto;
  text-align:center;
  padding:42px 26px;
}
.forum-empty-icon{
  width:64px;
  height:64px;
  margin:0 auto 16px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:var(--primary-soft,#edf7f7);
  color:var(--primary,#016364);
}
.forum-empty-icon .ui-icon{width:32px;height:32px}
.forum-page-empty{padding-top:8px}
.forum-class-switch{display:flex;align-items:flex-end;gap:8px}
.forum-class-switch label{font-size:11px;font-weight:800;color:var(--muted)}
.forum-class-switch select{min-width:240px}
.forum-teacher-grid{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:18px}
.forum-section-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}
.forum-empty-inline{
  min-height:220px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
}
.forum-empty-inline .ui-icon{width:34px;height:34px;color:var(--primary,#016364)}
@media(max-width:768px){
  .forum-class-switch{
    width:100%;
    display:grid;
    gap:5px;
  }
  .forum-class-switch select{width:100%;min-width:0}
  .forum-teacher-grid{grid-template-columns:1fr;gap:14px}
  .forum-empty-card{margin:10px 0;padding:32px 18px}
  .forum-page-title{align-items:flex-start}
  .forum-section-head{align-items:flex-start}
}

/* V88: Participant Forum - clean no-active-class state */
.forum-no-class-page{
  width:100%;
  max-width:820px;
  margin:0 auto;
  padding:8px 0 24px;
  box-sizing:border-box;
}
.forum-no-class-card{
  width:100%;
  box-sizing:border-box;
  padding:42px 28px;
  text-align:center;
  border-radius:24px;
}
.forum-no-class-icon{
  width:72px;
  height:72px;
  margin:0 auto 18px;
  display:grid;
  place-items:center;
  border-radius:20px;
  background:var(--primary-soft,#edf7f7);
  color:var(--primary,#016364);
}
.forum-no-class-icon .ui-icon{
  width:34px !important;
  height:34px !important;
}
.forum-no-class-card h1{
  margin:8px 0 10px;
  font-size:28px;
  line-height:1.2;
}
.forum-no-class-card p{
  max-width:540px;
  margin:0 auto 22px;
}
.forum-no-class-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
@media(max-width:768px){
  .forum-no-class-page{
    max-width:none;
    padding:4px 0 18px;
  }
  .forum-no-class-card{
    padding:34px 18px;
    border-radius:20px;
  }
  .forum-no-class-card h1{
    font-size:23px;
    margin-top:7px;
  }
  .forum-no-class-card p{
    font-size:13px;
    line-height:1.55;
    margin-bottom:20px;
  }
  .forum-no-class-btn{
    width:100%;
    min-height:44px;
  }
}

/* V89: Kelas Saya - cleaner learner cards */
.kelas-saya-title{
  align-items:center !important;
}
.kelas-saya-all-btn{
  flex:0 0 auto;
}
.kelas-saya-summary{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-bottom:18px;
  max-width:720px;
}
.kelas-saya-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.kelas-saya-card{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  box-shadow:var(--shadow-soft,0 8px 28px rgba(16,43,56,.06));
}
.kelas-saya-cover{
  position:relative;
  min-height:180px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  color:#fff;
  background:#e9edf4;
}
.kelas-saya-cover-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}
.kelas-saya-cover-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(15,23,42,.08) 10%,rgba(15,23,42,.72) 100%);
  pointer-events:none;
}
.kelas-saya-cover-content{
  position:relative;
  z-index:2;
  width:100%;
  display:grid;
  grid-template-columns:56px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:18px;
}
.kelas-saya-initial{
  width:56px;
  height:56px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.17);
  border:1px solid rgba(255,255,255,.2);
  font-size:24px;
  font-weight:900;
  backdrop-filter:blur(5px);
}
.kelas-saya-cover-content > div:nth-child(2){
  min-width:0;
}
.kelas-saya-category{
  display:block;
  font-size:11px;
  font-weight:800;
  opacity:.95;
  margin-bottom:5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.kelas-saya-cover small{
  font-size:11px;
  opacity:.82;
}
.kelas-saya-cover .badge{
  background:rgba(255,255,255,.18);
  color:#fff;
  border-color:rgba(255,255,255,.2);
}
.kelas-saya-body{
  padding:18px;
}
.kelas-saya-heading h2{
  margin:0 0 6px;
  font-size:20px;
  line-height:1.2;
}
.kelas-saya-teacher{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
  color:var(--muted);
  font-size:13px;
}
.kelas-saya-teacher .ui-icon{
  width:16px !important;
  height:16px !important;
  flex-basis:16px !important;
}
.kelas-saya-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  margin:16px 0;
  padding:12px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
}
.kelas-saya-meta span{
  display:flex;
  align-items:center;
  gap:5px;
}
.kelas-saya-meta .ui-icon{
  width:15px !important;
  height:15px !important;
  flex-basis:15px !important;
}
.kelas-saya-progres-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:7px;
  font-size:12px;
}
.kelas-saya-progres-head span{
  color:var(--muted);
}
.kelas-saya-progresbar{
  height:9px;
  border-radius:999px;
  overflow:hidden;
}
.kelas-saya-progresbar span{
  border-radius:999px;
}
.kelas-saya-action{
  margin-top:16px;
}
.kelas-saya-action .btn{
  width:100%;
  justify-content:center;
}
.kelas-saya-empty{
  max-width:760px;
  margin:10px auto 0;
  padding:44px 26px;
  text-align:center;
  border-radius:24px;
}
.kelas-saya-empty-icon{
  width:72px;
  height:72px;
  margin:0 auto 16px;
  border-radius:20px;
  display:grid;
  place-items:center;
  background:var(--primary-soft,#edf7f7);
  color:var(--primary,#016364);
}
.kelas-saya-empty-icon .ui-icon{
  width:34px !important;
  height:34px !important;
}
.kelas-saya-empty h2{
  margin:6px 0 10px;
}
.kelas-saya-empty p{
  max-width:540px;
  margin:0 auto 22px;
}
@media(max-width:900px){
  .kelas-saya-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .kelas-saya-title{
    align-items:flex-start !important;
  }
  .kelas-saya-all-btn{
    width:100%;
  }
  .kelas-saya-summary{
    grid-template-columns:1fr 1fr;
    max-width:none;
  }
  .kelas-saya-card{
    border-radius:19px;
  }
  .kelas-saya-cover{
    min-height:160px;
  }
  .kelas-saya-cover-content{
    grid-template-columns:50px minmax(0,1fr) auto;
    padding:15px;
  }
  .kelas-saya-initial{
    width:50px;height:50px;font-size:21px;border-radius:14px;
  }
  .kelas-saya-cover .badge{
    font-size:10px;
  }
  .kelas-saya-body{
    padding:16px;
  }
  .kelas-saya-heading h2{
    font-size:18px;
  }
  .kelas-saya-empty{
    padding:34px 18px;
  }
}
@media(max-width:480px){
  .kelas-saya-summary{
    grid-template-columns:1fr;
  }
  .kelas-saya-cover{
    min-height:150px;
  }
  .kelas-saya-cover-content{
    grid-template-columns:46px minmax(0,1fr);
    padding:14px;
  }
  .kelas-saya-cover-content .badge{
    grid-column:1 / -1;
    justify-self:start;
  }
  .kelas-saya-initial{
    width:46px;height:46px;
  }
}



/* V92 - Login split branding panel */
.no-sidebar .page-public{max-width:1180px}
.page-public-login .auth-shell{min-height:calc(100vh - 110px);padding:18px 0 26px}
.page-public-login .auth-card.login-screen{
  width:min(1040px,100%);
  min-height:620px;
  padding:0!important;
  display:grid;
  grid-template-columns:47% 53%;
  overflow:hidden;
  border-radius:26px;
  border:1px solid rgba(226,232,240,.9);
  box-shadow:0 24px 70px rgba(38,64,112,.13);
  background:#fff;
}
.page-public-login .login-brand{min-width:0;position:relative;overflow:hidden;background:linear-gradient(145deg,#3157b7 0%,#5ae996 54%,#72aef4 100%)}
.page-public-login .login-brand-image{position:absolute;inset:0;background-image:url('/kelas_online/assets/login-illustration.png');background-size:cover;background-position:center}
.page-public-login .login-brand:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(37,62,145,.02),rgba(37,62,145,.10));pointer-events:none}
.page-public-login .login-form-panel{display:flex;flex-direction:column;justify-content:center;padding:58px clamp(36px,6vw,70px);min-width:0}
.page-public-login .login-form-panel h1{margin:0;font-size:30px;line-height:1.2;letter-spacing:-.035em;text-align:center}
.page-public-login .login-form-panel>p{margin:12px 0 40px;text-align:center}
.page-public-login .login-form-panel form{padding:0}
.page-public-login .login-form-panel .form-group{margin-bottom:18px}
.page-public-login .login-form-panel label{display:block;margin-bottom:8px;font-size:12px;font-weight:800;color:#374151}
.page-public-login .login-form-panel input{width:100%;min-height:46px;border-radius:12px;padding:12px 14px;border:1px solid #dbe3ef;background:#fbfcff;box-sizing:border-box}
.page-public-login .login-form-panel input:focus{outline:none;border-color:#5dee99;box-shadow:0 0 0 4px rgba(93,238,153,.10)}
.page-public-login .login-form-panel .actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:8px}
.page-public-login .login-form-panel .actions .btn{width:100%;min-height:44px}
.page-public-login .login-form-panel .alert{margin:0 0 18px}
@media(max-width:780px){
  .page-public-login .auth-shell{min-height:auto;padding:16px 0 24px}
  .page-public-login .auth-card.login-screen{grid-template-columns:1fr;min-height:auto;width:min(560px,100%)}
  .page-public-login .login-brand{height:205px}
  .page-public-login .login-brand-image{background-position:center 43%}
  .page-public-login .login-form-panel{padding:30px 24px 28px}
  .page-public-login .login-form-panel h1{font-size:25px}
  .page-public-login .login-form-panel>p{margin-bottom:26px}
}
@media(max-width:420px){
  .page-public-login .login-brand{height:160px}
  .page-public-login .login-form-panel{padding:24px 18px 22px}
  .page-public-login .login-form-panel h1{font-size:22px}
}


/* V93 - Register split branding panel (desktop) */
.page-public-register .auth-shell{min-height:calc(100vh - 110px);padding:18px 0 26px}
.page-public-register .auth-card.register-screen{
  width:min(1040px,100%);
  min-height:620px;
  padding:0!important;
  display:grid;
  grid-template-columns:53% 47%;
  overflow:hidden;
  border-radius:26px;
  border:1px solid rgba(226,232,240,.9);
  box-shadow:0 24px 70px rgba(38,64,112,.13);
  background:#fff;
}
.page-public-register .register-brand{min-width:0;position:relative;overflow:hidden;background:linear-gradient(145deg,#3157b7 0%,#5ae996 54%,#72aef4 100%)}
.page-public-register .register-brand-image{position:absolute;inset:0;background-image:url('/kelas_online/assets/login-illustration.png');background-size:cover;background-position:center}
.page-public-register .register-brand:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(37,62,145,.02),rgba(37,62,145,.10));pointer-events:none}
.page-public-register .register-form-panel{display:flex;flex-direction:column;justify-content:center;padding:48px clamp(36px,5vw,64px);min-width:0}
.page-public-register .register-form-panel h1{margin:0;font-size:30px;line-height:1.2;letter-spacing:-.035em;text-align:center}
.page-public-register .register-form-panel>p{margin:12px 0 28px;text-align:center}
.page-public-register .register-form-panel form{padding:0}
.page-public-register .register-form-panel .form-group{margin-bottom:14px}
.page-public-register .register-form-panel label{display:block;margin-bottom:7px;font-size:12px;font-weight:800;color:#374151}
.page-public-register .register-form-panel input{width:100%;min-height:44px;border-radius:12px;padding:11px 14px;border:1px solid #dbe3ef;background:#fbfcff;box-sizing:border-box}
.page-public-register .register-form-panel input:focus{outline:none;border-color:#5dee99;box-shadow:0 0 0 4px rgba(93,238,153,.10)}
.page-public-register .register-form-panel .actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:8px}
.page-public-register .register-form-panel .actions .btn{width:100%;min-height:44px}
.page-public-register .register-form-panel .alert{margin:0 0 16px}

/* V97 - Register illustration full frame tanpa crop */
.page-public-register .auth-card.register-screen{
  width:min(1040px,100%);
  min-height:0;
  height:auto;
  grid-template-columns:52% 48%;
  align-items:stretch;
}
.page-public-register .register-form-panel{
  padding:40px clamp(34px,4.4vw,58px);
}
.page-public-register .register-form-panel>p{margin:10px 0 22px}
.page-public-register .register-form-panel .form-group{margin-bottom:12px}
.page-public-register .register-form-panel input{min-height:42px;padding:10px 14px}
.page-public-register .register-form-panel .actions{margin-top:6px}
.page-public-register .register-form-panel .actions .btn{min-height:42px}
.page-public-register .register-brand-image{
  position:absolute;
  inset:0;
  background-image:url('/kelas_online/assets/register-illustration.png');
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-position:left top;
}
.page-public-register .register-brand{background:#dff3ef;}

/* V99 - Mobile login/register tanpa ilustrasi */
@media (max-width: 780px){
  .page-public-login .auth-card.login-screen,
  .page-public-register .auth-card.register-screen{
    width:min(560px,100%);
    grid-template-columns:1fr;
    min-height:0;
    height:auto;
  }

  .page-public-login .login-brand,
  .page-public-register .register-brand{
    display:none;
  }

  .page-public-login .login-form-panel,
  .page-public-register .register-form-panel{
    width:100%;
    box-sizing:border-box;
  }
}

/* V100 - Mobile login/register centered */
@media (max-width:780px){
  .page-public-login .auth-shell,
  .page-public-register .auth-shell{
    width:100%;
    min-height:calc(100vh - 70px);
    padding:24px 16px 28px;
    box-sizing:border-box;
    display:grid;
    place-items:center;
  }

  .page-public-login .auth-card.login-screen,
  .page-public-register .auth-card.register-screen{
    width:min(520px,100%);
    max-width:520px;
    margin:0 auto;
    grid-template-columns:1fr;
    min-height:0;
    height:auto;
  }

  .page-public-login .login-brand,
  .page-public-register .register-brand{
    display:none !important;
  }

  .page-public-login .login-form-panel,
  .page-public-register .register-form-panel{
    width:100%;
    max-width:none;
    box-sizing:border-box;
  }
}

@media (max-width:420px){
  .page-public-login .auth-shell,
  .page-public-register .auth-shell{
    padding:20px 14px 24px;
  }

  .page-public-login .auth-card.login-screen,
  .page-public-register .auth-card.register-screen{
    width:100%;
  }
}


/* V101: toast feedback for canceled/no-change actions */
.toast-wrap{
  position:fixed;
  top:18px;
  right:18px;
  z-index:2500;
  display:flex;
  flex-direction:column;
  gap:10px;
  width:min(360px,calc(100vw - 36px));
  pointer-events:none;
}
.toast{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:1px solid #dbe3ef;
  background:#fff;
  color:#1f2937;
  border-radius:12px;
  box-shadow:0 14px 34px rgba(15,23,42,.12);
  font-size:14px;
  line-height:1.4;
  opacity:0;
  transform:translateY(-8px);
  transition:opacity .2s ease,transform .2s ease;
}
.toast.show{opacity:1;transform:translateY(0)}
.toast-info .toast-icon{
  width:24px;height:24px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#eef4ff;color:#3b5ccc;font-weight:700;flex:0 0 24px;
}
@media (max-width:768px){
  .toast-wrap{top:12px;right:12px;width:min(340px,calc(100vw - 24px));}
}


/* V103 notification: canceled action feedback */
.toast-wrap{
  position:fixed;
  top:18px;
  right:18px;
  z-index:99999;
  display:flex;
  flex-direction:column;
  gap:10px;
  width:min(380px,calc(100vw - 36px));
  pointer-events:none;
}
.toast{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:12px 15px;
  border:1px solid #cbd5e1;
  background:#ffffff;
  color:#0f172a;
  border-radius:12px;
  box-shadow:0 16px 40px rgba(15,23,42,.22);
  font-size:14px;
  font-weight:600;
  line-height:1.35;
  opacity:0;
  transform:translateY(-10px);
  transition:opacity .18s ease,transform .18s ease;
}
.toast.show{opacity:1;transform:translateY(0)}
.toast-info .toast-icon{
  width:26px;height:26px;flex:0 0 26px;
  border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#e0f2fe;color:#0369a1;
  font-weight:800;
}
@media(max-width:768px){
  .toast-wrap{
    top:70px;
    right:12px;
    width:min(360px,calc(100vw - 24px));
  }
}

/* V104 universal flash notification colors */
.toast-success .toast-icon{background:#e3f3f3;color:#166534}
.toast-error .toast-icon{background:#fee2e2;color:#991b1b}
.toast-warning .toast-icon{background:#fef3c7;color:#92400e}

/* V106 download actions */
@media(max-width:700px){
  .page-title>.actions{width:100%}
  .page-title>.actions .btn{width:100%}
}

/* V107 peserta per kelas download */
@media(max-width:700px){
  .page-title>.actions{gap:8px}
}

/* =========================================================
   V123 - Modern Learning / LMS experience
   ========================================================= */
.learning-page{max-width:1320px;margin:0 auto}
.learning-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.learning-back{display:inline-flex;align-items:center;gap:7px;color:#016364;font-weight:750;font-size:14px}
.learning-status{display:inline-flex;align-items:center;gap:7px;background:#ecfdf3;color:#005758;border:1px solid #bbf7d0;border-radius:999px;padding:7px 11px;font-size:12px;font-weight:800}
.status-dot{width:7px;height:7px;border-radius:50%;background:#016364;box-shadow:0 0 0 4px rgba(34,197,94,.12)}
.course-overview{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);gap:28px;align-items:center;background:linear-gradient(135deg,#ffffff 0%,#f8fbff 100%);border:1px solid #dbe7f2;border-radius:22px;padding:22px 24px;margin-bottom:18px;box-shadow:0 12px 32px rgba(15,23,42,.055)}
.course-overview-main{display:flex;align-items:center;gap:16px;min-width:0}.course-icon{width:76px;height:76px;border-radius:20px;display:grid;place-items:center;flex:0 0 auto;color:#fff;background:linear-gradient(135deg,#016364,#016364);box-shadow:0 10px 24px rgba(29,78,216,.2)}.course-icon .ui-icon{width:34px;height:34px}.course-overview h1{font-size:27px;letter-spacing:-.035em;margin:2px 0 8px;line-height:1.15}.course-meta{display:flex;flex-wrap:wrap;gap:8px 18px;color:#64748b;font-size:12px}.course-meta span{display:inline-flex;align-items:center;gap:5px}.course-meta .ui-icon{width:15px;height:15px}.course-progres{border-left:1px solid #e2e8f0;padding-left:28px}.course-progres-head{display:flex;justify-content:space-between;gap:10px;font-size:13px;margin-bottom:9px}.course-progres-head strong:last-child{font-size:18px;color:#016364}.learning-progres{height:11px;background:#e6edf5;border-radius:99px;overflow:hidden}.learning-progres span{height:100%;display:block;border-radius:99px;background:linear-gradient(90deg,#016364,#0ea5e9);transition:width .3s}.course-progres-note{font-size:11px;color:#64748b;margin-top:8px}
.learning-layout{display:grid;grid-template-columns:310px minmax(0,1fr);gap:18px;align-items:start}.learning-outline{position:sticky;top:22px;padding:17px}.outline-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 3px 13px;border-bottom:1px solid #edf2f7}.outline-head h2{font-size:17px;margin:0}.outline-count{min-width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:#edf7f7;color:#016364;font-size:12px;font-weight:850}.outline-list{display:grid;gap:4px;margin-top:9px}.outline-item{position:relative;display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:13px;border:1px solid transparent;transition:.18s}.outline-item:hover{background:#f8fafc}.outline-item.active{background:#edf7f7;border-color:#bfdbfe}.outline-item.completed:not(.active) .outline-number{background:#e3f3f3;color:#005758}.outline-number{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#f1f5f9;color:#64748b;font-size:11px;font-weight:850;flex:0 0 auto}.outline-number .ui-icon{width:15px;height:15px}.outline-copy{min-width:0;display:flex;flex-direction:column;line-height:1.25}.outline-copy strong{font-size:12px;color:#0f172a}.outline-copy span{font-size:11px;color:#475569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.outline-copy small{font-size:9px;color:#94a3b8;margin-top:4px}.outline-item.active .outline-copy strong,.outline-item.active .outline-copy small{color:#016364}.outline-current{width:3px;height:28px;background:#016364;border-radius:99px;margin-left:auto}
.learning-content{min-width:0}.lesson-heading{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 22px;margin-bottom:15px;box-shadow:var(--shadow)}.lesson-kicker{font-size:11px;font-weight:850;letter-spacing:.1em;color:#016364;margin-bottom:4px}.lesson-heading h2{margin:0 0 5px;font-size:24px;letter-spacing:-.025em}.lesson-heading p{margin:0;color:#64748b;font-size:13px;max-width:720px}.lesson-navigation{display:flex;gap:8px;flex:0 0 auto}
.learning-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:15px;align-items:start}.learning-main-column{min-width:0}.learning-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:19px;box-shadow:var(--shadow);margin-bottom:15px}.learning-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.stage-label{display:flex;gap:11px;align-items:center}.stage-label>div:last-child>span{font-size:9px;font-weight:850;letter-spacing:.1em;color:#016364}.stage-label h3{margin:1px 0 0;font-size:18px;letter-spacing:-.015em}.stage-number{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#edf7f7;color:#016364;font-size:12px;font-weight:900}.stage-number.quiz-stage{background:#e8fff2;color:#3aed85}
.material-resource{display:flex;align-items:center;gap:12px;border:1px solid #e2e8f0;background:#f8fafc;border-radius:14px;padding:12px;margin:16px 0 10px}.resource-icon{width:42px;height:42px;border-radius:11px;background:#fff;color:#016364;display:grid;place-items:center;box-shadow:0 2px 8px rgba(15,23,42,.06);flex:0 0 auto}.resource-copy{display:flex;flex-direction:column;min-width:0;flex:1}.resource-copy strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.resource-copy span{font-size:11px;color:#64748b;margin-top:2px}.resource-description{font-size:12px;color:#64748b;margin:10px 0 13px}.completed-note{display:flex;align-items:center;gap:10px;background:#ecfdf3;border:1px solid #bbf7d0;color:#166534;border-radius:12px;padding:11px 13px;margin-top:11px}.completed-note .ui-icon{width:19px;height:19px;background:#016364;color:#fff;border-radius:50%;padding:3px;flex:0 0 auto}.completed-note div{display:flex;flex-direction:column}.completed-note span{font-size:11px;color:#4d7c5a}.completed-note.compact{margin:0;padding:8px 10px;font-size:11px;white-space:nowrap}.completed-note.compact .ui-icon{width:17px;height:17px}
.video-wrapper{margin-top:16px;border-radius:15px;overflow:hidden;background:#07111f;box-shadow:0 12px 26px rgba(2,6,23,.14)}.video-wrapper .video-frame{display:block;border:0;border-radius:0;min-height:390px}.video-footer{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 0 0}.video-footer>div:first-child{display:flex;flex-direction:column;min-width:0}.video-footer strong{font-size:13px}.video-footer span{font-size:11px;color:#64748b;margin-top:2px}.locked-panel{display:flex;align-items:center;gap:12px;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:13px;padding:15px;margin-top:15px}.locked-icon{width:36px;height:36px;display:grid;place-items:center;background:#e2e8f0;border-radius:10px;flex:0 0 auto}.locked-panel div:last-child{display:flex;flex-direction:column}.locked-panel strong{font-size:13px}.locked-panel span{font-size:11px;color:#64748b;margin-top:2px}
.learning-side-column{min-width:0}.checklist-card{padding:17px}.checklist-title h3{margin:0;font-size:16px}.learning-step{display:flex;align-items:center;gap:10px;padding:11px 0}.step-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#f1f5f9;color:#64748b;font-size:11px;font-weight:900;flex:0 0 auto}.learning-step.done .step-icon{background:#e3f3f3;color:#005758}.learning-step>div{display:flex;flex-direction:column}.learning-step strong{font-size:12px}.learning-step span:not(.step-icon){font-size:10px;color:#94a3b8;margin-top:2px}.learning-step.done span:not(.step-icon){color:#005758}.step-line{height:13px;border-left:1px dashed #cbd5e1;margin-left:15px}
.quiz-card{padding:17px}.quiz-info{display:flex;flex-wrap:wrap;gap:5px;margin:15px 0 12px}.quiz-info span{font-size:9px;font-weight:800;color:#475569;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:99px;padding:5px 7px}.quiz-start{width:100%;margin-top:2px}.quiz-locked{display:flex;align-items:center;gap:9px;background:#f8fafc;border-radius:12px;padding:11px;margin-top:13px}.quiz-locked>span{font-size:18px}.quiz-locked div{display:flex;flex-direction:column}.quiz-locked strong{font-size:11px}.quiz-locked small{font-size:10px;color:#64748b;margin-top:2px}.quiz-result{display:flex;flex-direction:column;align-items:center;text-align:center;background:linear-gradient(135deg,#edf7f7,#f3fff8);border:1px solid #dff3ef;border-radius:14px;padding:17px;margin-top:13px}.quiz-result span{font-size:10px;color:#64748b;font-weight:700}.quiz-result strong{font-size:35px;line-height:1.1;color:#016364;margin:4px 0}.quiz-result small{font-size:10px;color:#64748b}.learning-tip{display:flex;gap:10px;background:#fffaf0;border:1px solid #fde68a;border-radius:15px;padding:13px}.tip-icon{width:30px;height:30px;display:grid;place-items:center;background:#fef3c7;border-radius:9px;flex:0 0 auto}.learning-tip div:last-child{display:flex;flex-direction:column}.learning-tip strong{font-size:11px;color:#92400e}.learning-tip span{font-size:10px;color:#a16207;margin-top:2px}
.quiz-area{background:#fff;border:1px solid var(--line);border-radius:20px;padding:21px;margin-top:15px;box-shadow:var(--shadow)}.quiz-area-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:14px}.quiz-area-head h2{margin:1px 0 3px;font-size:20px}.quiz-area-head p{margin:0;color:#64748b;font-size:12px}.quiz-count{background:#edf7f7;color:#016364;border-radius:99px;padding:7px 10px;font-size:11px;font-weight:850}.modern-question{border:1px solid #e2e8f0;border-radius:15px;padding:16px;margin-bottom:12px}.question-number{font-size:10px;font-weight:850;color:#016364;margin-bottom:5px}.question-text{font-size:14px;display:block;line-height:1.5}.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.modern-option{display:flex;align-items:flex-start;gap:9px;border:1px solid #e2e8f0;border-radius:11px;padding:10px;cursor:pointer;font-size:12px;transition:.15s}.modern-option:hover{border-color:#93c5fd;background:#f8fbff}.modern-option input{margin-top:3px;accent-color:#016364}.option-letter{width:23px;height:23px;display:grid;place-items:center;border-radius:7px;background:#f1f5f9;color:#475569;font-size:10px;font-weight:900;flex:0 0 auto}.modern-option:has(input:checked){border-color:#60a5fa;background:#edf7f7}.modern-option:has(input:checked) .option-letter{background:#016364;color:#fff}.quiz-submit{margin-top:4px}.next-lesson{display:flex;justify-content:space-between;align-items:center;gap:15px;background:linear-gradient(135deg,#edf7f7,#f8fbff);border:1px solid #bfdbfe;border-radius:17px;padding:18px 20px;margin-top:15px}.next-lesson h3{margin:2px 0 3px;font-size:16px}.next-lesson p{margin:0;color:#64748b;font-size:11px}
@media(max-width:1150px){.learning-grid{grid-template-columns:minmax(0,1fr) 270px}.learning-layout{grid-template-columns:270px minmax(0,1fr)}.video-wrapper .video-frame{min-height:330px}}
@media(max-width:950px){.course-overview{grid-template-columns:1fr}.course-progres{border-left:0;border-top:1px solid #e2e8f0;padding:17px 0 0}.learning-layout{grid-template-columns:1fr}.learning-outline{position:static}.outline-list{grid-template-columns:1fr 1fr}.learning-grid{grid-template-columns:1fr 290px}}
@media(max-width:760px){.learning-grid{grid-template-columns:1fr}.learning-side-column{display:grid;grid-template-columns:1fr 1fr;gap:12px}.learning-side-column .learning-card{margin-bottom:0}.learning-tip{grid-column:1/-1}.lesson-heading{flex-direction:column}.lesson-navigation{width:100%;justify-content:flex-start}.course-overview-main{align-items:flex-start}.course-overview h1{font-size:23px}.video-wrapper .video-frame{min-height:250px}.next-lesson{flex-direction:column;align-items:flex-start}.next-lesson .btn{width:100%}}
@media(max-width:560px){.learning-topbar{align-items:flex-start}.learning-status{font-size:10px}.course-overview{padding:17px}.course-icon{width:58px;height:58px;border-radius:15px}.course-icon .ui-icon{width:27px;height:27px}.course-overview h1{font-size:20px}.course-meta{gap:5px 10px}.course-meta span{font-size:10px}.outline-list{grid-template-columns:1fr}.lesson-heading{padding:16px}.lesson-heading h2{font-size:20px}.lesson-navigation{display:grid;grid-template-columns:1fr 1fr}.lesson-navigation .btn{width:100%}.learning-card{padding:15px}.material-resource{align-items:flex-start;flex-wrap:wrap}.material-resource .btn{margin-left:54px;margin-top:-4px}.video-footer{align-items:flex-start;flex-direction:column}.video-footer .btn{width:100%}.learning-side-column{grid-template-columns:1fr}.options-grid{grid-template-columns:1fr}.quiz-area{padding:15px}.quiz-area-head{flex-direction:column}.quiz-count{align-self:flex-start}}

/* ===== Belajar V124 - simplified learning flow ===== */
.clean-learning{max-width:1280px}
.clean-course-overview{grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);padding:20px 22px;border-radius:18px;margin-bottom:16px}
.clean-course-overview .course-icon{width:64px;height:64px;border-radius:17px}
.clean-course-overview .course-overview-main{gap:14px}
.clean-course-overview h1{font-size:24px;margin-bottom:6px}
.clean-course-overview .course-progres{padding-left:22px}
.clean-course-overview .course-progres-head span{font-size:12px;color:var(--muted);font-weight:700}
.clean-course-overview .course-progres-note{margin-top:6px}
.clean-learning-layout{grid-template-columns:285px minmax(0,1fr);gap:16px}
.clean-learning-layout .learning-outline{top:18px;padding:15px;border-radius:17px}
.clean-learning-layout .outline-head{padding-bottom:11px}
.clean-learning-layout .outline-list{gap:2px}
.clean-learning-layout .outline-item{padding:8px 7px;border-radius:10px}
.clean-learning-layout .outline-number{width:27px;height:27px}
.clean-learning-layout .outline-copy strong{font-size:11px}
.clean-learning-layout .outline-copy span{font-size:10px}
.clean-learning-content{min-width:0}
.clean-lesson-heading{padding:17px 19px;margin-bottom:10px;border-radius:16px}
.clean-lesson-heading h2{font-size:21px}
.clean-lesson-heading p{font-size:12px;max-width:700px}
.clean-lesson-heading .lesson-navigation{gap:6px}
.clean-lesson-heading .btn{padding:8px 11px;font-size:12px}
.learning-steps-bar{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 13px;margin-bottom:12px;box-shadow:var(--shadow)}
.step-bar-item{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.step-bar-item>span{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:#f1f5f9;color:#64748b;font-size:10px;font-weight:900;flex:0 0 auto}
.step-bar-item.done>span{background:#e3f3f3;color:#005758}
.step-bar-item div{display:flex;flex-direction:column;min-width:0}
.step-bar-item strong{font-size:10px;white-space:nowrap}
.step-bar-item small{font-size:9px;color:#94a3b8;margin-top:1px;white-space:nowrap}
.step-bar-item.done small{color:#005758}
.step-bar-line{height:1px;background:#e2e8f0;flex:0 0 28px}.step-bar-line.passed{background:#86efac}
.clean-stage-card{padding:17px 18px;margin-bottom:12px;border-radius:16px}
.clean-stage-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.clean-stage-head .stage-label{gap:9px}
.clean-stage-head .stage-number{width:34px;height:34px;border-radius:10px}
.clean-stage-head .stage-label>div:last-child>span{font-size:8px}
.clean-stage-head .stage-label h3{font-size:16px}
.clean-resource{margin:0 0 10px;padding:10px;border-radius:12px}
.clean-resource .resource-icon{width:38px;height:38px}
.clean-stage-card .resource-description{margin:7px 0 10px;font-size:11px}
.clean-stage-card .completed-note{margin-top:9px;padding:9px 11px}
.clean-stage-card .locked-panel{margin-top:0;padding:12px}
.clean-video{margin-top:0;border-radius:13px;box-shadow:none}
.clean-video .video-frame{min-height:350px}
.clean-video-footer{padding-top:10px}
.clean-video-footer .btn{padding:8px 11px;font-size:11px}
.clean-quiz-stage{margin-bottom:12px}
.quiz-intro{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px 14px;background:#f8fbff;border:1px solid #dff3ef;border-radius:12px}
.quiz-intro strong{font-size:12px}.quiz-intro p{margin:2px 0 0;color:var(--muted);font-size:10px}.quiz-intro .btn{flex:0 0 auto;padding:8px 12px;font-size:11px}
.clean-result{margin-top:0;padding:14px}
.clean-quiz-area{margin-top:0;padding:18px;border-radius:16px}
.clean-quiz-area .modern-question{padding:14px;margin-bottom:10px}
.clean-next-lesson{margin-top:12px;padding:15px 17px;border-radius:15px}
.clean-next-lesson h3{font-size:14px}.clean-next-lesson p{font-size:10px}
@media(max-width:950px){.clean-course-overview{grid-template-columns:1fr}.clean-course-overview .course-progres{border-left:0;border-top:1px solid #e2e8f0;padding:14px 0 0}.clean-learning-layout{grid-template-columns:1fr}.clean-learning-layout .learning-outline{position:static}.clean-learning-layout .outline-list{grid-template-columns:1fr 1fr}.clean-video .video-frame{min-height:320px}}
@media(max-width:650px){.learning-steps-bar{gap:5px;padding:9px}.step-bar-line{flex-basis:10px}.step-bar-item{gap:5px}.step-bar-item>span{width:24px;height:24px}.step-bar-item strong{font-size:9px}.step-bar-item small{font-size:8px}.clean-learning-layout .outline-list{grid-template-columns:1fr}.clean-lesson-heading{flex-direction:column}.clean-lesson-heading .lesson-navigation{width:100%}.clean-lesson-heading .lesson-navigation .btn{flex:1}.clean-resource{align-items:flex-start;flex-wrap:wrap}.clean-resource .btn{margin-left:48px;margin-top:-3px}.clean-video .video-frame{min-height:240px}.clean-video-footer{flex-direction:column;align-items:flex-start}.clean-video-footer .btn{width:100%}.quiz-intro{align-items:flex-start;flex-direction:column}.quiz-intro .btn{width:100%}}

/* ===== V125 - sequential learning stage flow ===== */
.stage-navigation-card{display:flex;align-items:center;justify-content:space-between;gap:18px;background:#fff;border:1px solid var(--line);border-radius:15px;padding:11px 14px;margin-bottom:12px;box-shadow:var(--shadow)}
.stage-nav-left{display:flex;align-items:center;gap:9px;white-space:nowrap}.stage-nav-kicker{font-size:8px;font-weight:900;letter-spacing:.1em;color:#64748b}.stage-nav-left strong{font-size:11px;color:#0f172a}
.stage-nav-track{display:flex;align-items:center;gap:7px}.stage-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;background:#f1f5f9;color:#64748b;font-size:9px;font-weight:800}.stage-pill b{width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:#e2e8f0;color:#64748b;font-size:8px}.stage-pill.active{background:#edf7f7;color:#016364}.stage-pill.active b{background:#016364;color:#fff}.stage-pill.done{background:#ecfdf3;color:#005758}.stage-pill.done b{background:#016364;color:#fff}
.focus-stage-card{padding:20px;border-radius:17px;margin-bottom:12px}.focus-stage-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:17px}.focus-stage-title{display:flex;gap:12px;min-width:0}.focus-number{width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;border-radius:12px;background:#edf7f7;color:#016364;font-size:12px;font-weight:950}.focus-number.quiz-number{background:#e8fff2;color:#3aed85}.focus-stage-title .section-label{font-size:8px}.focus-stage-title h3{margin:2px 0 3px;font-size:19px;letter-spacing:-.02em}.focus-stage-title p{margin:0;color:#64748b;font-size:11px;line-height:1.5;max-width:700px}
.stage-back-row{margin:-3px 0 12px}.stage-back-btn{display:inline-flex;align-items:center;gap:6px;color:#475569;font-size:11px;font-weight:800;padding:6px 8px;border-radius:8px}.stage-back-btn:hover{background:#f8fafc;color:#016364}.stage-back-btn .ui-icon{width:14px;height:14px}
.download-material-card{display:flex;align-items:center;gap:13px;border:1px solid #dbe7f2;background:linear-gradient(135deg,#f8fbff,#fff);border-radius:15px;padding:16px}.download-icon{width:48px;height:48px;display:grid;place-items:center;flex:0 0 auto;border-radius:13px;background:#edf7f7;color:#016364}.download-icon .ui-icon{width:24px;height:24px}.download-copy{display:flex;flex-direction:column;min-width:0;flex:1}.download-copy strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.download-copy span{font-size:10px;color:#64748b;margin-top:3px}.download-copy small{font-size:10px;color:#94a3b8;margin-top:5px;line-height:1.4}.download-btn{flex:0 0 auto}.stage-help{margin-top:10px;padding:9px 11px;border-radius:10px;background:#f8fafc;color:#64748b;font-size:10px}.stage-help strong{color:#334155}.hidden-form{display:none}
.focus-video{margin-top:0;border-radius:14px;overflow:hidden;background:#020617;box-shadow:0 10px 24px rgba(2,6,23,.12)}.focus-video .video-frame{width:100%;min-height:430px;border:0;display:block}.focus-video-footer{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:11px}.focus-video-footer>div{display:flex;flex-direction:column;min-width:0}.focus-video-footer strong{font-size:13px}.focus-video-footer span{font-size:10px;color:#64748b;margin-top:3px}.focus-video-footer form{margin:0}
.focus-quiz-card{margin-bottom:10px}.quiz-intro{min-height:62px}.focus-quiz-card .clean-result{margin-top:0}.clean-quiz-area{margin-top:0}
@media(max-width:850px){.stage-navigation-card{align-items:flex-start;flex-direction:column}.stage-nav-track{width:100%;justify-content:space-between}.stage-pill{flex:1;justify-content:center}.focus-video .video-frame{min-height:330px}}
@media(max-width:600px){.focus-stage-card{padding:16px}.focus-stage-head{align-items:flex-start;flex-direction:column}.download-material-card{align-items:flex-start;flex-wrap:wrap}.download-btn{width:100%}.focus-video .video-frame{min-height:230px}.focus-video-footer{align-items:stretch;flex-direction:column}.focus-video-footer .btn{width:100%}.stage-nav-left{width:100%;justify-content:space-between}.stage-nav-track{gap:4px}.stage-pill{padding:5px 4px;font-size:8px}.stage-pill b{width:16px;height:16px}.focus-stage-title h3{font-size:17px}}

/* V126: Pembayaran menyatu dengan kartu kelas dan mendukung banyak pendaftaran */
.payment-v126-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 26px;margin-bottom:16px;border-radius:22px;background:linear-gradient(135deg,#fff,#f4f7ff);border:1px solid #e5e9f2;box-shadow:0 10px 26px rgba(29,35,56,.05)}
.payment-v126-hero h1{margin:5px 0 5px;font-size:26px;letter-spacing:-.03em}.payment-v126-hero p{margin:0;max-width:720px;color:#737b90;font-size:12px;line-height:1.6}.payment-v126-count{min-width:112px;padding:14px 17px;border-radius:17px;background:#fff;border:1px solid #e5e9f2;text-align:center}.payment-v126-count strong{display:block;font-size:25px;color:#48d884}.payment-v126-count span{font-size:10px;color:#7c8498;font-weight:700}
.payment-v126-bank{display:grid;grid-template-columns:50px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 18px;margin-bottom:16px;border:1px solid #dce5f1;border-radius:18px;background:#f8fbff}.payment-v126-bank-icon{width:50px;height:50px;border-radius:14px;background:#e9f2ff;display:grid;place-items:center;font-size:23px}.payment-v126-bank-main h2{margin:3px 0;font-size:17px}.payment-v126-bank-main p{margin:0;color:#7a8397;font-size:10px}.payment-v126-bank-note{display:flex;flex-direction:column;gap:3px;padding-left:18px;border-left:1px solid #dce5f1}.payment-v126-bank-note strong{font-size:11px}.payment-v126-bank-note span{font-size:10px;color:#7a8397}
.payment-v126-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.payment-v126-card{background:#fff;border:1px solid #e3e6ef;border-radius:20px;box-shadow:0 8px 24px rgba(29,35,56,.05);overflow:hidden}.payment-v126-card-head{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;padding:18px 18px 15px;border-bottom:1px solid #edf0f5}.payment-v126-class-mark{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#016364,#016364);color:#fff;display:grid;place-items:center;font-weight:900;font-size:17px}.payment-v126-class-title{min-width:0}.payment-v126-class-title h2{margin:3px 0 2px;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.payment-v126-class-title>span:last-child{font-size:10px;color:#8a91a5}.payment-v126-status{padding:6px 9px;border-radius:99px;font-size:9px;font-weight:850;white-space:nowrap}.payment-v126-price-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:15px 18px 13px}.payment-v126-price-row>div:first-child span,.payment-v126-registration span{display:block;font-size:9px;color:#8a91a5;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.payment-v126-price-row strong{display:block;margin-top:3px;font-size:21px;color:#39b96e}.payment-v126-registration{text-align:right}.payment-v126-registration b{display:block;margin-top:3px;font-size:11px;color:#4c5568}
.payment-v126-instruction{margin:0 18px 10px;padding:11px 12px;background:#f7f8fc;border:1px solid #e9ebf2;border-radius:13px}.payment-v126-instruction-title{display:flex;align-items:center;gap:8px}.payment-v126-instruction-title span{width:23px;height:23px;border-radius:50%;background:#016364;color:#fff;display:grid;place-items:center;font-size:9px;font-weight:900}.payment-v126-instruction-title strong{font-size:11px}.payment-v126-instruction p{margin:7px 0 0 31px;color:#697287;font-size:10px;line-height:1.5}.payment-v126-upload{margin:0 18px 18px;padding:13px;border:1px dashed #cfd5e2;border-radius:15px;background:#fcfdff}.payment-v126-upload .payment-v126-instruction-title{margin-bottom:10px}.payment-v126-upload .payment-v126-instruction-title span{background:#eef0f7;color:#555f73}.payment-v126-file{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:11px;border:1px solid #e0e4ed;border-radius:11px;background:#fff;cursor:pointer}.payment-v126-file input{max-width:100%;font-size:10px}.payment-v126-file span{font-size:10px;font-weight:800;color:#4c5568}.payment-v126-file small{font-size:9px;color:#9199aa}.payment-v126-upload textarea{width:100%;margin-top:8px;border:1px solid #e0e4ed;border-radius:11px;padding:9px 10px;font:inherit;font-size:10px;resize:vertical;box-sizing:border-box}.payment-v126-submit{width:100%;margin-top:8px;justify-content:center}.payment-v126-alert{display:flex;flex-direction:column;gap:2px;margin:0 18px 10px;padding:10px 12px;border-radius:12px;font-size:10px}.payment-v126-alert.reject{background:#fff5f5;border:1px solid #f5d1d1;color:#a13c3c}.payment-v126-state{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;margin:0 18px 18px;padding:13px;border-radius:14px}.payment-v126-state.waiting{background:#f2f8ff;border:1px solid #d9e9fb}.payment-v126-state.active{background:#effbf6;border:1px solid #d2f0e2}.payment-v126-state-icon{width:40px;height:40px;border-radius:12px;background:#fff;display:grid;place-items:center;font-weight:900}.payment-v126-state strong{display:block;font-size:11px}.payment-v126-state span{display:block;margin-top:3px;color:#748095;font-size:9px}.payment-v126-state .btn{white-space:nowrap}.payment-v126-empty{text-align:center;padding:45px 20px;background:#fff;border:1px solid #e5e8f0;border-radius:20px}.payment-v126-empty-icon{font-size:34px}.payment-v126-empty h2{margin:10px 0 5px;font-size:20px}.payment-v126-empty p{max-width:520px;margin:0 auto 16px;color:#7b8297;font-size:11px;line-height:1.6}.payment-v126-help{display:flex;align-items:center;gap:10px;margin-top:16px;padding:12px 14px;background:#fffaf0;border:1px solid #f1e3c8;border-radius:14px;color:#806c4c;font-size:10px}.payment-v126-help strong{font-size:11px}.payment-v126-help span{margin-right:auto}.payment-v126-help a{font-weight:900;color:#016364}
@media(max-width:900px){.payment-v126-grid{grid-template-columns:1fr}.payment-v126-bank{grid-template-columns:50px 1fr}.payment-v126-bank-note{grid-column:2;border-left:0;border-top:1px solid #dce5f1;padding:10px 0 0}.payment-v126-hero{align-items:flex-start}}
@media(max-width:600px){.payment-v126-hero{padding:18px;align-items:flex-start}.payment-v126-hero h1{font-size:21px}.payment-v126-count{min-width:76px;padding:10px}.payment-v126-count strong{font-size:20px}.payment-v126-bank{grid-template-columns:42px 1fr;padding:14px}.payment-v126-bank-icon{width:42px;height:42px}.payment-v126-bank-note{grid-column:1/-1}.payment-v126-card-head{grid-template-columns:42px 1fr}.payment-v126-class-mark{width:42px;height:42px}.payment-v126-status{grid-column:2;justify-self:start}.payment-v126-price-row{align-items:flex-start;flex-direction:column}.payment-v126-registration{text-align:left}.payment-v126-state{grid-template-columns:40px 1fr}.payment-v126-state .btn{grid-column:2;width:100%}.payment-v126-help{align-items:flex-start;flex-wrap:wrap}.payment-v126-help span{width:100%}}

/* V127: Batalkan pendaftaran sebelum pembayaran */
.payment-v126-cancel-form{margin:0 18px 18px;text-align:right}.payment-v126-cancel-btn{border:0;background:transparent;color:#b45353;font:inherit;font-size:10px;font-weight:800;cursor:pointer;padding:5px 2px}.payment-v126-cancel-btn:hover{text-decoration:underline;color:#991b1b}
@media(max-width:600px){.payment-v126-cancel-form{text-align:center}.payment-v126-cancel-btn{width:100%;padding:8px}}

/* ===== V128: Official Sanad Media logo + course catalog images ===== */
.brand-logo{width:52px;height:52px;display:grid;place-items:center;background:rgba(255,255,255,.96);border-radius:14px;padding:5px;overflow:hidden;flex:0 0 52px;box-shadow:0 4px 14px rgba(0,0,0,.08)}
.brand-logo img{width:100%;height:100%;object-fit:contain;display:block}
.brand-text strong{display:block}.brand-text small{display:block}
.appbar-logo{width:30px;height:30px;object-fit:contain;background:#fff;border-radius:8px;padding:2px;box-shadow:0 2px 8px rgba(15,23,42,.08)}
.desktop-appbar-left{display:flex;align-items:center;gap:9px}
.page-peserta-kelas .simple-page-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#ffffff 0%,#f0fbf8 55%,#eef8ff 100%)}
.page-peserta-kelas .simple-page-hero:after{content:"";position:absolute;width:180px;height:180px;right:-50px;top:-70px;border-radius:50%;background:rgba(15,118,110,.08)}
.page-peserta-kelas .simple-page-hero > div{position:relative;z-index:1}
.catalog-cover{height:172px!important;padding:0!important;position:relative;overflow:hidden;background:#eaf4f2!important}
.catalog-cover img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .35s ease}
.catalog-card:hover .catalog-cover img{transform:scale(1.045)}
.catalog-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02) 30%,rgba(0,0,0,.48) 100%);pointer-events:none}
.catalog-category{position:absolute;z-index:2;left:14px;bottom:13px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.92);color:#0f766e;font-size:10px;font-weight:800;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.catalog-body h2{font-size:18px;line-height:1.3}
.catalog-action .btn{background:#0f766e;border-color:#0f766e}.catalog-action .btn:hover{background:#0b5f59;border-color:#0b5f59}
@media(max-width:700px){.brand-logo{width:46px;height:46px;flex-basis:46px}.catalog-cover{height:185px!important}}

.phone-brand-logo{width:30px;height:30px;object-fit:contain;background:#fff;border-radius:8px;padding:2px}

/* FINAL: catalog images already contain the class name; hide duplicate overlay labels. */
.catalog-cover .catalog-category,.catalog-cover .catalog-category{display:none!important}

/* FINAL: banner Peserta saja — warna hijau-teal kalem, tanpa mengubah menu/layout lain */
.learner-hero{
  background:linear-gradient(135deg,#075b5d 0%,#086769 52%,#0d7775 100%) !important;
  box-shadow:0 20px 46px rgba(7,91,93,.16) !important;
}
.learner-hero p{color:rgba(255,255,255,.88) !important}

/* Final mobile header: clean white theme */
@media (max-width:820px){
  .mobile-topbar{
    background:#fff !important;
    background-image:none !important;
    color:#0f172a !important;
    border-bottom:1px solid #e2e8f0 !important;
    box-shadow:0 3px 14px rgba(15,23,42,.06) !important;
    backdrop-filter:none !important;
  }
  .mobile-topbar .mobile-title,
  .mobile-topbar .mobile-title *{
    color:#0f172a !important;
  }
  .mobile-topbar .mobile-menu-btn{
    background:#fff !important;
    color:#0f172a !important;
    border:1px solid #e2e8f0 !important;
    box-shadow:none !important;
  }
  .mobile-topbar .mobile-user-dot{
    background:#fff !important;
    color:#016364 !important;
    border:1px solid #e2e8f0 !important;
  }
  .mobile-topbar a,
  .mobile-topbar button,
  .mobile-topbar svg{
    color:#0f172a !important;
  }
}


/* V129: tingkatkan keterbacaan teks tanpa mengubah layout */
.nav-section{
  color:#aebfc4 !important;
}
.sidebar-nav a,
.sidebar-nav a:not(.active){
  color:#d7e3e6 !important;
}
.sidebar-nav a .nav-icon,
.sidebar-nav a svg{
  color:#c6d5d9 !important;
  stroke:currentColor !important;
}
.sidebar-nav a:hover,
.sidebar-nav a:not(.active):hover{
  color:#ffffff !important;
}
.sidebar-nav a:hover .nav-icon,
.sidebar-nav a:hover svg{
  color:#ffffff !important;
  stroke:currentColor !important;
}
.sidebar-nav a.active,
.sidebar-nav a.active:hover{
  color:#ffffff !important;
}
.sidebar-nav a.active .nav-icon,
.sidebar-nav a.active svg{
  color:#ffffff !important;
  stroke:currentColor !important;
}
.mobile-bottom-nav a{
  color:#5f7078 !important;
}
.mobile-bottom-nav a .nav-icon{
  color:#5f7078 !important;
  stroke:currentColor !important;
}
.mobile-bottom-nav a.active,
.mobile-bottom-nav a:hover{
  color:#016364 !important;
}
.mobile-bottom-nav a.active .nav-icon,
.mobile-bottom-nav a:hover .nav-icon{
  color:#016364 !important;
  stroke:currentColor !important;
}


/* V130 FINAL: contrast safety — text must remain visible without hover. */
:root{
  --ink:#1f2937;
  --muted:#596575;
  --line:#e2e8f0;
}
body{color:#1f2937;}

/* Light content surfaces: force a readable base text color. */
.card,
.kpi,
.stage-card,
.topic,
.question,
.dash-panel,
.quick-card,
.continue-box,
.payment-card,
.payment-steps,
.modern-payment-card,
.modern-steps-card,
.modern-empty,
.payment-v126-card,
.payment-v126-upload,
.payment-v126-empty,
.profile-preview,
.table-wrap,
.simple-page-hero,
.lesson-link{
  color:#1f2937;
}

.card h1,.card h2,.card h3,.card h4,
.kpi h1,.kpi h2,.kpi h3,.kpi h4,
.stage-card h1,.stage-card h2,.stage-card h3,.stage-card h4,
.topic h1,.topic h2,.topic h3,.topic h4,
.question h1,.question h2,.question h3,.question h4,
.dash-panel h1,.dash-panel h2,.dash-panel h3,.dash-panel h4,
.quick-card span,.quick-card strong,
.payment-card h1,.payment-card h2,.payment-card h3,
.payment-steps h1,.payment-steps h2,.payment-steps h3,
.modern-payment-card h1,.modern-payment-card h2,.modern-payment-card h3,
.modern-steps-card h1,.modern-steps-card h2,.modern-steps-card h3,
.payment-v126-card h1,.payment-v126-card h2,.payment-v126-card h3,
.profile-preview h1,.profile-preview h2,.profile-preview h3,
.simple-page-hero h1,.simple-page-hero h2,.simple-page-hero h3{
  color:#1f2937;
}

.card p,.card label,.card td,.card th,
.kpi p,.kpi label,.kpi td,.kpi th,
.stage-card p,.stage-card label,.stage-card td,.stage-card th,
.topic p,.topic label,
.question p,.question label,
.dash-panel p,.dash-panel label,
.quick-card small,
.payment-card p,.payment-card label,
.payment-steps p,.payment-steps li,
.modern-payment-card p,.modern-payment-card label,
.modern-steps-card p,
.payment-v126-card p,.payment-v126-card label,
.profile-preview p,
.simple-page-hero p{
  color:#43505f;
}

.card small,.card .muted,
.kpi small,.kpi .muted,
.stage-card small,.stage-card .muted,
.topic small,.topic .muted,
.question small,.question .muted,
.dash-panel small,.dash-panel .muted,
.payment-card small,.payment-card .muted,
.payment-steps small,.payment-steps .muted,
.modern-payment-card small,.modern-payment-card .muted,
.modern-steps-card small,.modern-steps-card .muted,
.payment-v126-card small,.payment-v126-card .muted,
.profile-preview small{
  color:#64748b !important;
  opacity:1 !important;
}

/* Links should be identifiable before hover. */
.card a:not(.btn):not(.badge),
.kpi a:not(.btn):not(.badge),
.stage-card a:not(.btn):not(.badge),
.topic a:not(.btn):not(.badge),
.question a:not(.btn):not(.badge),
.dash-panel a:not(.btn):not(.badge),
.payment-card a:not(.btn):not(.badge),
.payment-steps a:not(.btn):not(.badge),
.modern-payment-card a:not(.btn):not(.badge),
.modern-steps-card a:not(.btn):not(.badge),
.simple-page-hero a:not(.btn):not(.badge){
  color:#016364;
}

/* Sidebar: readable at rest; hover only changes background, not legibility. */
.nav-section{color:#b8c7cc !important;opacity:1 !important;}
.sidebar-nav a,
.sidebar-nav a:not(.active){color:#d7e3e6 !important;opacity:1 !important;}
.sidebar-nav a .nav-icon,
.sidebar-nav a svg{color:#c6d5d9 !important;stroke:currentColor !important;opacity:1 !important;}
.sidebar-nav a.active,
.sidebar-nav a.active .nav-icon,
.sidebar-nav a.active svg{color:#fff !important;opacity:1 !important;}
.sidebar-nav .nav-logout{color:#ffb4b4 !important;opacity:1 !important;}
.sidebar-nav a:not(.active):hover{color:#fff !important;}

/* Mobile header remains white, with dark readable text. */
@media (max-width:820px){
  .mobile-topbar,
  .mobile-topbar .mobile-title,
  .mobile-topbar .mobile-title *{
    color:#0f172a !important;
  }
  .mobile-topbar a,.mobile-topbar button,.mobile-topbar svg{color:#0f172a !important;}
  .mobile-bottom-nav a{color:#596575 !important;opacity:1 !important;}
  .mobile-bottom-nav a .nav-icon{color:#596575 !important;stroke:currentColor !important;opacity:1 !important;}
  .mobile-bottom-nav a.active{color:#016364 !important;}
  .mobile-bottom-nav a.active .nav-icon{color:#016364 !important;stroke:currentColor !important;}
}

/* Never let normal text become hidden by an accidental zero opacity. */
.card p,.card small,.kpi p,.kpi small,.stage-card p,.stage-card small,
.topic p,.topic small,.question p,.question small,.dash-panel p,.dash-panel small,
.payment-card p,.payment-card small,.payment-steps p,.payment-steps li,
.modern-payment-card p,.modern-payment-card small,.modern-steps-card p,
.profile-preview p,.simple-page-hero p{
  opacity:1;
}

/* V65 - final text visibility fix */
.btn,
.btn:visited,
.btn:hover,
.btn:focus,
.btn:active{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  text-shadow:none !important;
  opacity:1 !important;
}
.btn .ui-icon,
.btn svg,
.btn span,
.btn strong,
.btn small{
  color:inherit !important;
  -webkit-text-fill-color:inherit !important;
  opacity:1 !important;
}
.btn.secondary,
.btn.secondary:visited,
.btn.secondary:hover,
.btn.secondary:focus,
.btn.secondary:active{
  color:#016364 !important;
  -webkit-text-fill-color:#016364 !important;
}
.btn.secondary .ui-icon,
.btn.secondary svg,
.btn.secondary span,
.btn.secondary strong,
.btn.secondary small{
  color:#016364 !important;
  -webkit-text-fill-color:#016364 !important;
}
.btn.success,
.btn.success:visited,
.btn.success:hover,
.btn.success:focus,
.btn.success:active,
.btn.danger,
.btn.danger:visited,
.btn.danger:hover,
.btn.danger:focus,
.btn.danger:active{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

/* Standalone action controls that are not .btn */
.stage-back-btn,
.stage-back-btn:visited,
.stage-back-btn:hover,
.stage-back-btn:focus{
  color:#475569 !important;
  -webkit-text-fill-color:#475569 !important;
  opacity:1 !important;
}
.stage-back-btn .ui-icon{color:inherit !important;stroke:currentColor !important;}
.payment-v126-cancel-btn,
.payment-v126-cancel-btn:visited,
.payment-v126-cancel-btn:hover,
.payment-v126-cancel-btn:focus{
  color:#b45353 !important;
  -webkit-text-fill-color:#b45353 !important;
  opacity:1 !important;
}

/* Sidebar profile/user identity must always be readable */
.sidebar-profile,
.sidebar-profile:visited,
.sidebar-profile:hover,
.sidebar-profile:focus{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  opacity:1 !important;
}
.sidebar-profile strong{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  opacity:1 !important;
}
.sidebar-profile small{
  color:#d6e3e6 !important;
  -webkit-text-fill-color:#d6e3e6 !important;
  opacity:1 !important;
}
.sidebar-profile .profile-avatar{
  color:#016364 !important;
  -webkit-text-fill-color:#016364 !important;
  opacity:1 !important;
}

/* Profile page identity text */
.profile-preview h1,
.profile-preview h2,
.profile-preview h3,
.profile-preview p,
.profile-preview small,
.profile-preview label,
.profile-preview .muted{
  opacity:1 !important;
}

/* FINAL BUTTON HOVER CONTRAST FIX: when a secondary/custom button turns logo-green,
   its label and icon must remain visible without requiring click/focus. */
.btn.secondary:hover,
.btn.secondary:focus,
.btn.secondary:active,
.btn.secondary:hover:visited{
  background:#005758 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  text-shadow:none !important;
  opacity:1 !important;
}
.btn.secondary:hover .ui-icon,
.btn.secondary:hover svg,
.btn.secondary:hover span,
.btn.secondary:hover strong,
.btn.secondary:hover small,
.btn.secondary:focus .ui-icon,
.btn.secondary:focus svg,
.btn.secondary:focus span,
.btn.secondary:focus strong,
.btn.secondary:focus small,
.btn.secondary:active .ui-icon,
.btn.secondary:active svg,
.btn.secondary:active span,
.btn.secondary:active strong,
.btn.secondary:active small{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  stroke:currentColor !important;
  opacity:1 !important;
}


/* FINAL LOGIN BUTTON CONTRAST FIX */
.page-public-login .login-form-panel .actions .btn:not(.secondary),
.page-public-login .login-form-panel .actions .btn:not(.secondary):visited,
.page-public-login .login-form-panel .actions .btn:not(.secondary):hover,
.page-public-login .login-form-panel .actions .btn:not(.secondary):focus,
.page-public-login .login-form-panel .actions .btn:not(.secondary):active {
  background:#016364 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  opacity:1 !important;
  visibility:visible !important;
  text-shadow:none !important;
}
.page-public-login .login-form-panel .actions .btn:not(.secondary) .ui-icon,
.page-public-login .login-form-panel .actions .btn:not(.secondary) svg,
.page-public-login .login-form-panel .actions .btn:not(.secondary) span,
.page-public-login .login-form-panel .actions .btn:not(.secondary) strong,
.page-public-login .login-form-panel .actions .btn:not(.secondary) small {
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  stroke:currentColor !important;
  opacity:1 !important;
  visibility:visible !important;
}
.page-public-login .login-form-panel .actions .btn.secondary,
.page-public-login .login-form-panel .actions .btn.secondary:visited,
.page-public-login .login-form-panel .actions .btn.secondary:focus {
  background:#e8f4f4 !important;
  color:#016364 !important;
  -webkit-text-fill-color:#016364 !important;
  opacity:1 !important;
  visibility:visible !important;
}
.page-public-login .login-form-panel .actions .btn.secondary:hover,
.page-public-login .login-form-panel .actions .btn.secondary:active {
  background:#005758 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
.page-public-login .login-form-panel .actions .btn.secondary .ui-icon,
.page-public-login .login-form-panel .actions .btn.secondary svg {
  stroke:currentColor !important;
}

/* =========================================================
   FINAL GLOBAL BUTTON VISIBILITY FIX
   Semua tombol harus terbaca pada kondisi normal, hover,
   focus, active, visited. Tidak ada teks tombol yang menunggu click.
   ========================================================= */
.btn,
.btn:visited,
.btn:hover,
.btn:focus,
.btn:focus-visible,
.btn:active {
  background: #016364 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: none !important;
  border-color: #016364 !important;
}

.btn:hover,
.btn:focus,
.btn:focus-visible,
.btn:active {
  background: #005758 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: #005758 !important;
}

.btn .ui-icon,
.btn svg,
.btn span,
.btn strong,
.btn small,
.btn label,
.btn i,
.btn b,
.btn .icon {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Secondary buttons: readable light state, readable green hover state. */
.btn.secondary,
.btn.secondary:visited {
  background: #e8f4f4 !important;
  color: #016364 !important;
  -webkit-text-fill-color: #016364 !important;
  border-color: #c6e4e2 !important;
}

.btn.secondary:hover,
.btn.secondary:focus,
.btn.secondary:focus-visible,
.btn.secondary:active {
  background: #005758 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: #005758 !important;
}

.btn.secondary .ui-icon,
.btn.secondary svg,
.btn.secondary span,
.btn.secondary strong,
.btn.secondary small,
.btn.secondary label,
.btn.secondary i,
.btn.secondary b,
.btn.secondary .icon {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  stroke: currentColor !important;
}

/* Status buttons keep their semantic colors while retaining readable text. */
.btn.success,
.btn.success:visited,
.btn.success:hover,
.btn.success:focus,
.btn.success:focus-visible,
.btn.success:active {
  background: #167a62 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: #167a62 !important;
}

.btn.danger,
.btn.danger:visited,
.btn.danger:hover,
.btn.danger:focus,
.btn.danger:focus-visible,
.btn.danger:active {
  background: #c83b3b !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: #c83b3b !important;
}

/* Common standalone submit controls without .btn. */
button[type="submit"]:not(.btn),
input[type="submit"]:not(.btn) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Keep the mobile header white, but do not change button text visibility. */
@media (max-width:820px) {
  .mobile-topbar .mobile-menu-btn,
  .mobile-topbar .mobile-menu-btn:hover,
  .mobile-topbar .mobile-menu-btn:focus,
  .mobile-topbar .mobile-menu-btn:active {
    background: #ffffff !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    border-color: #dbe3e8 !important;
  }
}

/* Admin dashboard hero: muted Sanad teal, no bright green endpoint */
.admin-dashboard-hero{
  background:linear-gradient(135deg,#005758 0%,#016364 100%) !important;
  box-shadow:0 18px 40px rgba(0,87,88,.14) !important;
}
.admin-dashboard-hero:after{background:rgba(255,255,255,.045) !important;}
.admin-dashboard-hero .section-label{color:#d7efeb !important;}
.admin-dashboard-hero .hero-action{color:#016364 !important;background:#fff !important;}
.admin-dashboard-hero .hero-action:hover{background:#f2f8f8 !important;color:#005758 !important;}

/* Pengajar dashboard hero: samakan dengan teal Sanad yang lebih gelap, tanpa hijau terang */
.page-pengajar-dashboard .hero,
.page-pengajar-dashboard .dashboard-hero{
  background:linear-gradient(135deg,#005758 0%,#016364 100%) !important;
  box-shadow:0 18px 40px rgba(0,87,88,.14) !important;
}
.page-pengajar-dashboard .hero:after,
.page-pengajar-dashboard .dashboard-hero:after{
  background:rgba(255,255,255,.045) !important;
}
.page-pengajar-dashboard .hero:before,
.page-pengajar-dashboard .dashboard-hero:before{
  background:rgba(255,255,255,.025) !important;
}
.page-pengajar-dashboard .hero .section-label,
.page-pengajar-dashboard .dashboard-hero .section-label{
  color:#d7efeb !important;
}
.page-pengajar-dashboard .hero-action,
.page-pengajar-dashboard .dashboard-hero .hero-action{
  background:#fff !important;
  color:#016364 !important;
}
.page-pengajar-dashboard .hero-action:hover,
.page-pengajar-dashboard .dashboard-hero .hero-action:hover{
  background:#f2f8f8 !important;
  color:#005758 !important;
}

/* FINAL MOBILE HAMBURGER VISIBILITY FIX */
@media (max-width: 820px) {
  .mobile-topbar .mobile-menu-btn,
  body.has-sidebar .mobile-menu-btn {
    background: #ffffff !important;
    color: #016364 !important;
    -webkit-text-fill-color: #016364 !important;
    border: 1px solid #d7e1e5 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
  }

  .mobile-topbar .mobile-menu-btn::before,
  body.has-sidebar .mobile-menu-btn::before {
    content: "" !important;
    display: block !important;
    width: 21px !important;
    height: 2px !important;
    border-radius: 2px !important;
    background: #016364 !important;
    box-shadow: 0 -7px 0 #016364, 0 7px 0 #016364 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .mobile-topbar .mobile-menu-btn:hover,
  .mobile-topbar .mobile-menu-btn:focus,
  .mobile-topbar .mobile-menu-btn:active,
  body.has-sidebar .mobile-menu-btn:hover,
  body.has-sidebar .mobile-menu-btn:focus,
  body.has-sidebar .mobile-menu-btn:active {
    background: #ffffff !important;
    color: #016364 !important;
    -webkit-text-fill-color: #016364 !important;
    border-color: #c8d7dc !important;
  }

  .mobile-topbar .mobile-menu-btn:hover::before,
  .mobile-topbar .mobile-menu-btn:focus::before,
  .mobile-topbar .mobile-menu-btn:active::before,
  body.has-sidebar .mobile-menu-btn:hover::before,
  body.has-sidebar .mobile-menu-btn:focus::before,
  body.has-sidebar .mobile-menu-btn:active::before {
    background: #016364 !important;
    box-shadow: 0 -7px 0 #016364, 0 7px 0 #016364 !important;
  }
}

/* FINAL - Login/Register without illustration */

.page-public-login .auth-card.login-screen,
.page-public-register .auth-card.register-screen{
  width:min(560px,100%);
  min-height:0;
  height:auto;
  padding:40px clamp(28px,5vw,52px)!important;
  display:block;
  overflow:hidden;
  box-sizing:border-box;
  background:#fff;
}

.page-public-login .login-brand,
.page-public-register .register-brand,
.page-public-login .login-brand-image,
.page-public-register .register-brand-image{
  display:none!important;
  background:none!important;
  background-image:none!important;
}

.page-public-login .login-form-panel,
.page-public-register .register-form-panel{
  width:100%;
  max-width:none;
  min-width:0;
  padding:0!important;
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-sizing:border-box;
}

.page-public-login .login-form-panel h1,
.page-public-register .register-form-panel h1{
  padding-top:0!important;
  margin-top:0;
}

.page-public-login .login-form-panel>p,
.page-public-register .register-form-panel>p{
  margin-left:0!important;
  margin-right:0!important;
}

@media(max-width:780px){
  .page-public-login .auth-shell,
  .page-public-register .auth-shell{
    min-height:calc(100vh - 70px);
    padding:20px 14px 28px;
  }
  .page-public-login .auth-card.login-screen,
  .page-public-register .auth-card.register-screen{
    width:100%;
    max-width:560px;
    padding:28px 22px!important;
  }
}

@media(max-width:420px){
  .page-public-login .auth-card.login-screen,
  .page-public-register .auth-card.register-screen{
    padding:24px 18px!important;
  }
}


/* FINAL - Password eye toggle for Login & Register */
.page-public-login .password-input-wrap,
.page-public-register .password-input-wrap{
  position:relative;
  width:100%;
}
.page-public-login .password-input-wrap > input,
.page-public-register .password-input-wrap > input{
  width:100% !important;
  padding-right:46px !important;
}
.page-public-login .password-toggle,
.page-public-register .password-toggle{
  position:absolute;
  top:50%;
  right:8px;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  padding:0;
  margin:0;
  border:0;
  border-radius:9px;
  background:transparent !important;
  color:#016364 !important;
  box-shadow:none !important;
  cursor:pointer;
  z-index:3;
  line-height:1;
}
.page-public-login .password-toggle:hover,
.page-public-login .password-toggle:focus,
.page-public-login .password-toggle:active,
.page-public-register .password-toggle:hover,
.page-public-register .password-toggle:focus,
.page-public-register .password-toggle:active{
  background:#eef7f6 !important;
  color:#005758 !important;
  outline:none;
  box-shadow:none !important;
}
.page-public-login .password-toggle .ui-icon,
.page-public-register .password-toggle .ui-icon{
  width:18px !important;
  height:18px !important;
  color:currentColor !important;
  fill:none !important;
  stroke:currentColor !important;
  pointer-events:none;
}
.page-public-login .password-toggle svg,
.page-public-register .password-toggle svg{
  stroke:currentColor !important;
}

/* V129 - Rapikan card menu Kelas Peserta tanpa mengubah struktur/fungsi */
.class-catalog-grid{
  align-items:stretch;
}
.class-catalog-grid .catalog-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:100%;
}
.class-catalog-grid .catalog-cover{
  flex:0 0 auto;
  aspect-ratio:1.68;
  height:auto;
  min-height:0;
}
.class-catalog-grid .catalog-body{
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0;
  padding:18px;
}
.class-catalog-grid .catalog-body > p{
  margin:0 0 12px;
  min-height:42px;
  line-height:1.55;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.class-catalog-grid .catalog-info{
  min-height:36px;
  align-items:center;
  padding:8px 0;
}
.class-catalog-grid .catalog-info span{
  flex:0 0 auto;
  white-space:nowrap;
}
.class-catalog-grid .catalog-info strong{
  min-width:0;
  text-align:right;
  overflow-wrap:anywhere;
}
.class-catalog-grid .catalog-action{
  margin-top:auto;
  padding-top:14px;
  align-items:center;
  min-height:44px;
}
.class-catalog-grid .catalog-action .btn{
  min-height:42px;
  padding:10px 14px;
  white-space:nowrap;
}
.class-catalog-grid .catalog-action .badge{
  max-width:58%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width:700px){
  .class-catalog-grid{gap:14px}
  .class-catalog-grid .catalog-cover{aspect-ratio:1.68}
  .class-catalog-grid .catalog-body{padding:16px}
  .class-catalog-grid .catalog-body > p{min-height:0;margin-bottom:10px}
  .class-catalog-grid .catalog-info{font-size:11px}
  .class-catalog-grid .catalog-action{padding-top:12px}
  .class-catalog-grid .catalog-action .btn{flex:1 1 100%;width:100%;justify-content:center}
  .class-catalog-grid .catalog-action .badge{max-width:100%}
}

/* ===== FINAL: Kelas Saya card polish ===== */
.page-peserta-kelas_saya .kelas-saya-grid,
.kelas-saya-grid{
  align-items:stretch;
}
.kelas-saya-card{
  display:flex;
  flex-direction:column;
  height:100%;
  min-width:0;
}
.kelas-saya-cover{
  min-height:0;
  height:auto;
  aspect-ratio:1200 / 680;
  align-items:flex-end;
}
.kelas-saya-cover-image{
  object-fit:cover;
  object-position:center center;
}
.kelas-saya-cover-content{
  grid-template-columns:minmax(0,1fr) auto;
  padding:16px 18px;
  gap:12px;
}
.kelas-saya-initial{display:none;}
.kelas-saya-cover-content > div:nth-child(2){
  min-width:0;
  grid-column:1;
}
.kelas-saya-cover .badge{
  grid-column:2;
  grid-row:1;
  justify-self:end;
  white-space:nowrap;
}
.kelas-saya-category{
  margin-bottom:3px;
}
.kelas-saya-body{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
}
.kelas-saya-heading{min-height:22px;}
.kelas-saya-action{
  margin-top:auto;
  padding-top:2px;
}
@supports selector(:has(*)){
  .kelas-saya-grid:has(> .kelas-saya-card:only-child){
    grid-template-columns:minmax(0,720px);
  }
}
@media(max-width:768px){
  .kelas-saya-cover{aspect-ratio:1200 / 680;}
  .kelas-saya-cover-content{
    grid-template-columns:minmax(0,1fr) auto;
    padding:14px;
  }
  .kelas-saya-cover .badge{
    grid-column:2;
    grid-row:1;
    align-self:end;
  }
}
@media(max-width:480px){
  .kelas-saya-cover-content{
    grid-template-columns:1fr;
  }
  .kelas-saya-cover .badge{
    grid-column:1;
    grid-row:2;
    justify-self:start;
    margin-top:4px;
  }
}