:root{
      --bg:#08111F;
      --surface:#0D1A2C;
      --surface-2:#102038;
      --text:#F5F7FB;
      --muted:#8796AB;
      --line:rgba(135,155,190,.12);
      --nav-h:64px;
    }

    *{
      box-sizing:border-box;
      -webkit-tap-highlight-color:transparent;
    }
    html{scroll-behavior:smooth}
    html,body{
      margin:0;
      min-height:100%;
      background:#08111F;
      overflow-x:hidden;
    }

    body{
      min-height:100dvh;
      color:var(--text);
      font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    }

    button,input{font:inherit}

    button,
    a{
      outline:none;
    }

    button:focus-visible,
    a:focus-visible{
      outline:2px solid rgba(255,255,255,.45);
      outline-offset:2px;
    }
    main{margin:0}

    .app{
      width:min(100%,480px);
      min-height:100vh;
      margin:0 auto;
      padding:0 18px calc(var(--nav-h) + 10px);
    }

    .page{display:none}
    .page.active{display:block}

    .header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:22px 0 18px;
    }

    .brand{
      font-size:20px;
      font-weight:850;
      letter-spacing:-.5px;
      color:#fff;
    }

    .brand span{
      background:linear-gradient(180deg,#fff,#c7d8ea);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }

    .header-actions{
      display:flex;
      align-items:center;
      gap:10px;
    }

    .icon-btn,.avatar{
      width:42px;
      height:42px;
      border:1px solid rgba(255,255,255,.08);
      background:#0E1D31;
      color:#DCE9F6;
      border-radius:14px;
      display:grid;
      place-items:center;
      position:relative;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
      cursor:pointer;
    }

    .avatar{overflow:hidden;cursor:pointer;font-size:13px;font-weight:850}
    .avatar img,.profile-topavatar img{width:100%;height:100%;object-fit:cover}
    .profile-topavatar{overflow:hidden}

    .notification-badge{
      position:absolute;
      top:5px;
      right:5px;
      width:8px;
      height:8px;
      border-radius:50%;
      background:#ff4d72;
      border:2px solid #0b1b2d;
    }

    .cart-count{
      position:absolute;
      top:2px;
      right:2px;
      min-width:17px;
      height:17px;
      padding:0 4px;
      border:2px solid #08111F;
      border-radius:999px;
      display:grid;
      place-items:center;
      color:#fff;
      background:#EF4444;
      font-size:9px;
      font-weight:850;
      line-height:1;
    }

    .purchase-home-section{margin-top:18px}
    .purchase-list{display:grid;gap:9px}
    .purchase-card{
      display:grid;
      grid-template-columns:42px minmax(0,1fr) auto;
      gap:10px;
      align-items:center;
      padding:11px;
      border:1px solid rgba(135,155,190,.10);
      border-radius:16px;
      background:#0D1A2C;
    }
    .purchase-icon{
      width:42px;
      height:42px;
      display:grid;
      place-items:center;
      border-radius:13px;
      color:#EAC886;
      background:#2A2111;
    }
    .purchase-card.paid .purchase-icon{color:#69C69D;background:rgba(26,118,81,.14)}
    .purchase-card.failed .purchase-icon,
    .purchase-card.cancelled .purchase-icon{color:#FF9FB0;background:#2B1518}
    .purchase-icon svg{width:18px;height:18px}
    .purchase-copy{min-width:0}
    .purchase-copy strong,
    .purchase-copy span,
    .purchase-side strong,
    .purchase-side span{display:block}
    .purchase-copy strong{
      overflow:hidden;
      color:#F5F7FB;
      font-size:12px;
      white-space:nowrap;
      text-overflow:ellipsis;
    }
    .purchase-copy span{margin-top:3px;color:#7F93A8;font-size:10px}
    .purchase-side{text-align:right}
    .purchase-side strong{color:#fff;font-size:11px}
    .purchase-side span{margin-top:3px;color:#6E8298;font-size:10px}
    .purchase-empty-home{
      display:flex;
      gap:11px;
      align-items:center;
      padding:13px;
      border:1px dashed rgba(135,155,190,.16);
      border-radius:16px;
      background:#0D1A2C;
    }
    .purchase-empty-home > span{
      width:42px;
      height:42px;
      display:grid;
      place-items:center;
      flex:0 0 auto;
      border-radius:13px;
      color:#75AEE8;
      background:#122640;
    }
    .purchase-empty-home svg{width:18px;height:18px}
    .purchase-empty-home strong{display:block;color:#F5F7FB;font-size:12px}
    .purchase-empty-home p{margin:3px 0 0;color:#7F93A8;font-size:10px;line-height:1.45}

    .purchase-page{padding-bottom:28px}
    .purchase-history-list{display:grid;gap:12px}
    .purchase-history-card{
      padding:14px;
      border:1px solid rgba(135,155,190,.10);
      border-radius:18px;
      background:#0D1A2C;
    }
    .purchase-history-head{
      display:grid;
      grid-template-columns:38px minmax(0,1fr);
      gap:10px;
      align-items:start;
    }
    .purchase-history-head > div{min-width:0}
    .purchase-history-head strong,
    .purchase-history-head span{display:block}
    .purchase-history-head strong{color:#F5F7FB;font-size:12px}
    .purchase-history-head span{margin-top:3px;color:#71869C;font-size:10px}
    .purchase-history-head b{
      grid-column:2;
      width:max-content;
      max-width:100%;
      padding:6px 8px;
      border-radius:999px;
      color:#EAC886;
      background:#2A2111;
      font-size:9px;
      white-space:nowrap;
      margin-top:7px;
    }
    .purchase-history-card.paid .purchase-history-head b{color:#69C69D;background:rgba(26,118,81,.14)}
    .purchase-history-card.failed .purchase-history-head b,
    .purchase-history-card.cancelled .purchase-history-head b{color:#FF9FB0;background:#2B1518}
    .purchase-history-card h2{margin:13px 0 0;color:#fff;font-size:15px;line-height:1.35}
    .purchase-history-detail{
      display:grid;
      gap:8px;
      margin-top:13px;
      padding-top:12px;
      border-top:1px solid rgba(255,255,255,.07);
    }
    .purchase-history-detail > div{
      display:flex;
      justify-content:space-between;
      gap:14px;
      color:#8094AA;
      font-size:12px;
    }
    .purchase-history-detail strong{color:#DCE8F5}
    .purchase-history-detail .total strong{color:#fff}
    .purchase-history-payment{
      margin-top:12px;
      padding:10px;
      border-radius:14px;
      color:#8094AA;
      background:#091525;
      font-size:11px;
    }
    .purchase-history-payment span,
    .purchase-history-payment strong,
    .purchase-history-payment small{display:block}
    .purchase-history-payment strong{margin-top:3px;color:#F5F7FB}
    .purchase-history-payment small{margin-top:3px;color:#72889E}
    .purchase-history-card .purchase-icon{
      width:38px;
      height:38px;
      border-radius:12px;
      align-self:start;
    }
    .purchase-history-card .purchase-icon svg{width:17px;height:17px}
    .purchase-admin-button{
      display:flex;
      min-height:42px;
      align-items:center;
      justify-content:center;
      gap:7px;
      margin-top:12px;
      border:1px solid rgba(56,189,128,.20);
      border-radius:13px;
      color:#D9FFEA;
      background:#168C55;
      text-decoration:none;
      font-size:12px;
      font-weight:850;
    }
    .purchase-admin-button svg{width:16px;height:16px}
    .purchase-payment-button{height:43px;margin-top:12px;padding:0 13px;border:1px solid rgba(63,145,226,.28);border-radius:11px;display:flex;align-items:center;justify-content:space-between;color:#C6E2FC;background:#102E4B;font-size:11px;font-weight:800;text-decoration:none}.purchase-payment-button>span{display:flex;align-items:center;gap:7px}.purchase-payment-button svg{width:15px;height:15px}.purchase-payment-button:hover{border-color:#398DE0;background:#153C61}

    .edit-profile-page{padding-bottom:28px}
    .profile-edit-form{
      display:grid;
      gap:14px;
      padding:16px;
    }
    .profile-edit-form label:not(.profile-avatar-edit){
      display:grid;
      gap:7px;
    }
    .profile-edit-form label > span{
      color:#AFC0D2;
      font-size:11px;
      font-weight:800;
    }
    .profile-edit-form input{
      width:100%;
      height:46px;
      padding:0 13px;
      border:1px solid rgba(135,155,190,.14);
      border-radius:13px;
      outline:0;
      color:#F5F7FB;
      background:#091525;
      font:inherit;
      font-size:13px;
    }
    .profile-edit-form input:focus{
      border-color:rgba(85,153,225,.55);
      box-shadow:0 0 0 3px rgba(85,153,225,.10);
    }
    .profile-avatar-edit{
      position:relative;
      display:grid;
      justify-items:center;
      gap:6px;
      padding:18px 12px;
      border:1px dashed rgba(135,155,190,.22);
      border-radius:16px;
      background:#091525;
      cursor:pointer;
      text-align:center;
    }
    .profile-avatar-preview{
      width:82px;
      height:82px;
      display:grid;
      place-items:center;
      overflow:hidden;
      border-radius:26px;
      color:#fff;
      background:linear-gradient(145deg,#1c72ff,#124cb3);
      font-size:28px;
      font-weight:900;
    }
    .profile-avatar-preview img{
      width:100%;
      height:100%;
      object-fit:cover;
    }
    .profile-avatar-edit strong{
      margin-top:4px;
      color:#F5F7FB;
      font-size:13px;
      max-width:100%;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .profile-avatar-edit small{
      color:#71869C;
      font-size:10px;
    }
    .profile-avatar-edit input{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      opacity:0;
      cursor:pointer;
    }
    .profile-form-message{margin:0 0 12px}
    .security-summary{
      display:flex;
      align-items:center;
      gap:12px;
      margin-bottom:14px;
      padding:14px;
    }
    .security-summary > span{
      width:44px;
      height:44px;
      display:grid;
      place-items:center;
      flex:0 0 auto;
      border-radius:14px;
      color:#69C69D;
      background:rgba(26,118,81,.14);
    }
    .security-summary svg{width:19px;height:19px}
    .security-summary strong,
    .security-summary small{display:block}
    .security-summary strong{color:#F5F7FB;font-size:13px}
    .security-summary small{margin-top:3px;color:#71869C;font-size:10px}

    body.notification-open{overflow:hidden}
    .notification-layer{
      position:fixed;
      inset:0;
      z-index:90;
      display:flex;
      align-items:flex-start;
      justify-content:center;
      padding:78px 18px 18px;
      background:rgba(0,0,0,.52);
      opacity:0;
      pointer-events:none;
      transition:.2s ease;
    }
    .notification-layer.open{
      opacity:1;
      pointer-events:auto;
    }
    .notification-modal{
      width:min(100%,420px);
      max-height:min(72vh,560px);
      overflow:hidden;
      border:1px solid rgba(135,155,190,.13);
      border-radius:18px;
      background:#0D1A2C;
      box-shadow:0 24px 55px rgba(0,0,0,.38);
      transform:translateY(-10px);
      transition:.2s ease;
    }
    .notification-layer.open .notification-modal{transform:translateY(0)}
    .notification-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:15px;
      border-bottom:1px solid rgba(255,255,255,.07);
    }
    .notification-head strong,
    .notification-head span{display:block}
    .notification-head strong{color:#fff;font-size:15px}
    .notification-head span{margin-top:3px;color:#7F93A8;font-size:11px}
    .notification-head button{
      width:34px;
      height:34px;
      display:grid;
      place-items:center;
      border:1px solid rgba(135,155,190,.12);
      border-radius:11px;
      color:#C7D8EA;
      background:#102038;
      cursor:pointer;
    }
    .notification-head svg{width:16px;height:16px}
    .notification-list{
      display:grid;
      gap:9px;
      max-height:390px;
      overflow:auto;
      padding:12px;
    }
    .notification-item{
      display:grid;
      grid-template-columns:38px minmax(0,1fr);
      gap:10px;
      padding:11px;
      border:1px solid rgba(135,155,190,.09);
      border-radius:14px;
      background:#091525;
      color:inherit;
      text-decoration:none;
      cursor:pointer;
    }
    .notification-item:hover{border-color:rgba(117,174,232,.22);background:#0B1728}
    .notification-item > span{
      width:38px;
      height:38px;
      display:grid;
      place-items:center;
      border-radius:12px;
      color:#EAC886;
      background:#2A2111;
    }
    .notification-item.paid > span{color:#69C69D;background:rgba(26,118,81,.14)}
    .notification-item.failed > span,
    .notification-item.cancelled > span{color:#FF9FB0;background:#2B1518}
    .notification-item svg{width:17px;height:17px}
    .notification-item strong{display:block;color:#F5F7FB;font-size:12px}
    .notification-item p{margin:4px 0 0;color:#9AB0C6;font-size:11px;line-height:1.45}
    .notification-item small{display:block;margin-top:5px;color:#6F849A;font-size:10px}
    .notification-empty{
      display:grid;
      justify-items:center;
      padding:24px 12px;
      color:#7F93A8;
      text-align:center;
    }
    .notification-empty > span{
      width:44px;
      height:44px;
      display:grid;
      place-items:center;
      border-radius:14px;
      color:#75AEE8;
      background:#122640;
    }
    .notification-empty strong{margin-top:10px;color:#F5F7FB;font-size:13px}
    .notification-empty p{margin:4px 0 0;font-size:11px}
    .notification-history-link{
      display:flex;
      min-height:44px;
      align-items:center;
      justify-content:center;
      border-top:1px solid rgba(255,255,255,.07);
      color:#8FC4FF;
      text-decoration:none;
      font-size:12px;
      font-weight:800;
    }

    .hero-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:9px;
      margin-bottom:22px;
    }

    .hero-card{
      position:relative;
      overflow:hidden;
      min-height:108px;
      padding:10px 8px;
      border-radius:16px;
      box-shadow:0 14px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.16);
    }

    .hero-card:nth-child(1){background:linear-gradient(145deg,#0b63f6,#27b7ff)}
    .hero-card:nth-child(2){background:linear-gradient(145deg,#6d47ff,#a56cff)}
    .hero-card:nth-child(3){background:linear-gradient(145deg,#00a6a6,#20d3c2)}

    .hero-icon{
      width:30px;
      height:30px;
      display:grid;
      place-items:center;
      background:transparent;
      border:0;
      border-radius:0;
      position:relative;
      z-index:2;
    }

    .hero-icon i{width:16px;height:16px}

    .hero-title{
      margin:11px 0 7px;
      font-size:14px;
      font-weight:800;
      line-height:1.15;
      position:relative;
      z-index:2;
    }

    .open-btn{
      position:relative;
      z-index:2;
      border:1px solid rgba(255,255,255,.32);
      color:#fff;
      background:rgba(255,255,255,.08);
      padding:6px 9px;
      border-radius:999px;
      font-size:14px;
      font-weight:800;
    }

    .art-icon{
      position:absolute;
      right:-14px;
      bottom:-17px;
      width:62px;
      height:62px;
      color:#fff;
      opacity:.12;
      transform:rotate(-18deg);
      stroke-width:1.5;
    }

    .search-wrap{
      position:relative;
      margin:6px 0 28px;
    }

    .search-icon{
      position:absolute;
      left:16px;
      top:50%;
      width:19px;
      height:19px;
      transform:translateY(-50%);
      color:#7ea0c9;
      z-index:2;
      pointer-events:none;
    }

    .search{
      width:100%;
      height:54px;
      border-radius:16px;
      border:1px solid rgba(121,170,235,.12);
      background:#0D1A2C;
      color:#fff;
      outline:none;
      padding:0 56px 0 48px;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 12px 30px rgba(0,0,0,.16);
    }

    .search::placeholder{color:#667b99}

    .filter-btn{
      position:absolute;
      right:7px;
      top:50%;
      transform:translateY(-50%);
      width:40px;
      height:40px;
      border:1px solid rgba(102,172,255,.16);
      border-radius:13px;
      color:#e4edf7;
      background:linear-gradient(145deg,#173A5E,#28547D);
      display:grid;
      place-items:center;
      box-shadow:0 8px 18px rgba(0,40,90,.18),inset 0 1px 0 rgba(255,255,255,.10);
    }

    .section{margin-top:24px}
    .section-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:13px;
    }

    .section-title{
      margin:0;
      font-size:18px;
      font-weight:850;
      letter-spacing:-.25px;
    }

    .see-all{
      color:#8FA9C2;
      font-size:14px;
      font-weight:500;
      text-decoration:none;
    }

    .course-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:13px;
    }

    .course-grid.course-scroll{
      grid-template-columns:none;
      grid-template-rows:1fr;
      grid-auto-flow:column;
      grid-auto-columns:calc((100% - 13px) / 2);
      overflow-x:auto;
      padding:2px 2px 8px;
      scrollbar-width:none;
      scroll-snap-type:x proximity;
    }

    .course-grid.course-scroll .course-card{
      scroll-snap-align:start;
    }

    .course-grid.course-scroll::-webkit-scrollbar{display:none}

    /* Kursus pilihan: kartu compact dengan identitas visual tersendiri. */
    .course-grid.course-scroll{
      gap:10px;
      margin-left:-2px;
      margin-right:-2px;
      padding:2px 2px 5px;
      grid-auto-columns:44%;
    }

    .course-grid.course-scroll .course-card{
      position:relative;
      padding:5px;
      border:1px solid rgba(75,151,230,.13);
      border-radius:17px;
      background:linear-gradient(155deg,rgba(17,43,72,.72),rgba(10,24,41,.55));
      box-shadow:0 10px 24px rgba(0,0,0,.13);
      transition:transform .18s ease,border-color .18s ease;
    }

    .course-grid.course-scroll .course-card:hover{
      transform:translateY(-2px);
      border-color:rgba(75,158,244,.35);
    }

    .course-grid.course-scroll .course-cover{
      aspect-ratio:1/1.16;
      border-radius:13px;
      box-shadow:none;
    }

    .course-grid.course-scroll .course-cover::after{
      height:48%;
      background:linear-gradient(180deg,transparent,rgba(2,8,20,.9));
    }

    .course-grid.course-scroll .course-badge{
      top:7px;
      right:7px;
      padding:4px 7px;
      border-radius:8px;
      font-size:8px;
    }

    .course-grid.course-scroll .course-overlay{
      left:8px;
      right:8px;
      bottom:8px;
    }

    .course-grid.course-scroll .course-price{font-size:11px}

    .course-grid.course-scroll .course-card-body{
      min-height:37px;
      padding:8px 4px 3px;
      display:flex;
      align-items:flex-start;
    }

    .course-grid.course-scroll .course-card-body h3{
      display:-webkit-box;
      overflow:hidden;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:2;
      font-size:11px;
      line-height:1.35;
    }

    .course-empty-state{
      grid-column:1/-1;
      padding:24px 16px;
      border:1px dashed rgba(135,155,190,.2);
      border-radius:16px;
      color:#71869C;
      background:#0D1A2C;
      font-size:12px;
      line-height:1.5;
      text-align:center;
    }

    .course-card{
      cursor:pointer;
    }

    .course-cover{
      position:relative;
      aspect-ratio:1/1.34;
      overflow:hidden;
      border-radius:18px;
      background:#0A1B31;
      box-shadow:0 12px 26px rgba(0,0,0,.18);
      border:1px solid rgba(255,255,255,.07);
    }

    .course-cover img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      cursor:pointer;
    }

    .course-cover::after{
      content:"";
      position:absolute;
      inset:auto 0 0 0;
      height:55%;
      background:linear-gradient(180deg,transparent,rgba(2,8,20,.84));
    }

    .course-badge{
      position:absolute;
      top:9px;
      right:9px;
      z-index:3;
      padding:6px 9px;
      border-radius:999px;
      font-size:10px;
      font-weight:800;
      color:#DFF3FF;
      background:rgba(11,86,173,.72);
      border:1px solid rgba(150,205,255,.25);
      backdrop-filter:blur(8px);
    }

    .course-badge.free{
      color:#DFFCF4;
      background:rgba(12,132,105,.72);
      border-color:rgba(125,243,211,.22);
    }

    .course-overlay{
      position:absolute;
      left:11px;
      right:11px;
      bottom:11px;
      z-index:2;
    }

    .course-title{
      margin:0;
      font-size:14px;
      font-weight:850;
      line-height:1.28;
      color:#fff;
    }

    .course-price{
      font-size:15px;
      font-weight:900;
      color:#fff;
    }

    .course-card-body{
      padding:9px 2px 0;
    }

    .course-card-body h3{
      margin:0;
      font-size:14px;
      line-height:1.3;
      font-weight:850;
      color:#F5F7FB;
    }

    .owned-section{margin-top:8px}

    .course-tabs{
      position:sticky;
      top:0;
      z-index:8;
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:5px;
      margin:0 0 18px;
      padding:5px;
      border:1px solid rgba(135,155,190,.11);
      border-radius:15px;
      background:rgba(10,24,41,.94);
      box-shadow:0 9px 26px rgba(0,0,0,.18);
      backdrop-filter:blur(14px);
    }

    .course-tab{
      min-width:0;
      height:40px;
      padding:0 7px;
      border:0;
      border-radius:11px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:6px;
      color:#7890A7;
      background:transparent;
      font-size:11px;
      font-weight:800;
      cursor:pointer;
      transition:color .18s ease,background .18s ease,box-shadow .18s ease;
    }

    .course-tab span{
      min-width:18px;
      height:18px;
      padding:0 5px;
      border-radius:999px;
      display:grid;
      place-items:center;
      color:#7890A7;
      background:#14263A;
      font-size:9px;
    }

    .course-tab.active{
      color:#fff;
      background:linear-gradient(145deg,#176ECC,#1558AF);
      box-shadow:0 7px 18px rgba(16,91,181,.27),inset 0 1px rgba(255,255,255,.12);
    }

    .course-tab.active span{color:#DCEEFF;background:rgba(5,38,78,.42)}
    .owned-subsection[hidden]{display:none!important}

    .owned-subsection{
      margin-top:22px;
    }

    .owned-subsection:first-of-type{
      margin-top:0;
    }

    .owned-subhead{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:12px;
      margin-bottom:12px;
    }

    .owned-subhead h3{
      margin:0;
      font-size:16px;
      font-weight:850;
      color:#F5F7FB;
    }

    .owned-subhead span{
      font-size:12px;
      color:#72869C;
    }

    .owned-card.completed{
      position:relative;
      display:block;
      padding:0;
      overflow:hidden;
      border-radius:20px;
      background:#0D1A2C;
      border:1px solid rgba(244,199,91,.13);
      box-shadow:0 14px 30px rgba(0,0,0,.16);
    }

    .completed-cover{
      position:relative;
      height:150px;
      overflow:hidden;
      background:#102038;
    }

    .completed-cover img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    .completed-cover::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg,rgba(0,0,0,.04) 30%,rgba(4,10,20,.82) 100%);
    }

    .completed-topbadge{
      position:absolute;
      top:12px;
      left:12px;
      z-index:2;
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 9px;
      border-radius:999px;
      font-size:12px;
      font-weight:800;
      color:#FFE39A;
      background:rgba(88,64,13,.48);
      border:1px solid rgba(244,199,91,.18);
      backdrop-filter:blur(10px);
    }

    .completed-topbadge i{
      width:14px;
      height:14px;
      color:#F4C75B;
    }

    .completed-title-wrap{
      position:absolute;
      left:14px;
      right:14px;
      bottom:13px;
      z-index:2;
    }

    .completed-title{
      margin:0 0 4px;
      font-size:16px;
      font-weight:900;
      line-height:1.25;
      color:#fff;
      letter-spacing:-.2px;
    }

    .completed-sub{
      font-size:12px;
      color:#C0CEDB;
    }

    .completed-body{
      padding:13px 14px 14px;
    }

    .completed-meta{
      display:flex;
      align-items:center;
      gap:12px;
      margin-bottom:12px;
      color:#8295AA;
      font-size:12px;
    }

    .completed-meta span{
      display:inline-flex;
      align-items:center;
      gap:5px;
    }

    .completed-meta i{
      width:14px;
      height:14px;
    }

    .completed-cert{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding-top:12px;
      border-top:1px solid rgba(255,255,255,.06);
    }

    .completed-cert-copy{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
      flex:1;
    }

    .completed-cert-icon{
      width:40px;
      height:40px;
      border-radius:12px;
      display:grid;
      place-items:center;
      color:#F4C75B;
      background:rgba(120,91,24,.14);
      border:1px solid rgba(244,199,91,.10);
      flex:0 0 auto;
      align-self:center;
    }

    .completed-cert-icon i{
      width:18px;
      height:18px;
      display:block;
    }

    .completed-cert-copy strong{
      display:block;
      margin:0 0 2px;
      font-size:13px;
      line-height:1.2;
      color:#F5F7FB;
    }

    .completed-cert-copy > div > span{
      display:block;
      font-size:12px;
      line-height:1.2;
      color:#7F93A8;
    }

    .completed-cert-copy > div{
      display:flex;
      flex-direction:column;
      justify-content:center;
      min-height:40px;
    }

    .completed-cert-btn{
      height:38px;
      padding:0 12px;
      border-radius:12px;
      border:1px solid rgba(244,199,91,.14);
      background:linear-gradient(145deg,#7B5E19,#A37C21);
      color:#FFF4CB;
      font-size:12px;
      font-weight:850;
      display:inline-flex;
      align-items:center;
      gap:6px;
      cursor:pointer;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
      flex:0 0 auto;
      text-decoration:none;
    }

    .completed-cert-btn i{
      width:15px;
      height:15px;
    }

    .owned-list{
      display:flex;
      flex-direction:column;
      gap:14px;
    }


    .owned-empty-state{
      display:flex;
      min-height:190px;
      align-items:center;
      justify-content:center;
      flex-direction:column;
      padding:26px 20px;
      border:1px dashed rgba(135,155,190,.2);
      border-radius:20px;
      color:#7F93A8;
      background:#0D1A2C;
      text-align:center;
    }

    .owned-empty-state.compact{min-height:165px}
    .owned-empty-state > span{display:grid;width:48px;height:48px;margin-bottom:12px;place-items:center;border-radius:15px;color:#75AEE8;background:#122640}
    .owned-empty-state > span svg{width:21px;height:21px}
    .owned-empty-state strong{color:#F5F7FB;font-size:14px}
    .owned-empty-state p{max-width:270px;margin:6px 0 0;font-size:12px;line-height:1.5}
    .owned-empty-state button{margin-top:16px;padding:9px 13px;border:1px solid rgba(117,174,232,.2);border-radius:11px;color:#DDEEFF;background:#12467D;font-size:11px;font-weight:800;cursor:pointer}

    .owned-card{
      display:grid;
      grid-template-columns:105px minmax(0,1fr);
      gap:12px;
      padding:10px;
      border-radius:20px;
      background:#0D1A2C;
      border:1px solid rgba(135,155,190,.10);
      box-shadow:0 12px 28px rgba(0,0,0,.14);
    }

    .owned-thumb{
      position:relative;
      width:105px;
      height:118px;
      border-radius:15px;
      overflow:hidden;
    }

    .owned-thumb img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    .owned-play{
      position:absolute;
      right:8px;
      bottom:8px;
      width:32px;
      height:32px;
      border-radius:50%;
      display:grid;
      place-items:center;
      color:#fff;
      background:
        linear-gradient(180deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.07) 20%,rgba(255,255,255,0) 32%),
        linear-gradient(145deg,#0B4FAF,#1670D8 52%,#0D4E9B 100%);
      border:1px solid rgba(255,255,255,.22);
    }

    .owned-play i{width:14px;height:14px}

    .owned-content{
      min-width:0;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }

    .owned-badge{
      display:inline-flex;
      align-self:flex-start;
      padding:6px 9px;
      border-radius:999px;
      margin-bottom:7px;
      font-size:12px;
      font-weight:800;
      color:#AFC4DC;
      background:rgba(54,91,133,.14);
      border:1px solid rgba(105,143,187,.15);
    }

    .owned-title{
      margin:0 0 8px;
      font-size:14px;
      line-height:1.32;
      font-weight:850;
    }

    .owned-meta{
      display:flex;
      gap:10px;
      margin-bottom:10px;
      color:#8396AD;
      font-size:14px;
    }

    .owned-meta span{
      display:inline-flex;
      align-items:center;
      gap:4px;
    }

    .owned-meta i{width:12px;height:12px}

    .owned-progress{
      height:5px;
      border-radius:999px;
      overflow:hidden;
      background:#16263B;
      margin-bottom:6px;
    }

    .owned-progress span{
      display:block;
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg,#1D4C7E,#3972A8);
    }

    .owned-progress-text{
      display:flex;
      justify-content:space-between;
      font-size:14px;
      color:#71859C;
    }



    .mentor-section{margin-top:6px}

    .mentor-search-wrap{width:100%;margin:0 0 14px}
    .mentor-search-wrap input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
    .mentor-search-clear{position:absolute;right:8px;top:50%;width:34px;height:34px;padding:0;border:0;border-radius:10px;display:grid;place-items:center;color:#8DA3BA;background:#132844;transform:translateY(-50%);cursor:pointer}
    .mentor-search-clear svg{width:15px;height:15px}
    .mentor-search-empty{grid-column:1/-1;margin-top:8px}
    .mentor-search-wrap[hidden],
    .mentor-search-clear[hidden],
    .mentor-search-empty[hidden],
    .mentor-card[hidden]{display:none!important}

    .mentor-head{
      margin-bottom:18px;
    }

    .mentor-head h2{
      margin:0 0 5px;
      font-size:19px;
      font-weight:850;
      letter-spacing:-.3px;
    }

    .mentor-head p{
      margin:0;
      color:var(--muted);
      font-size:14px;
      line-height:1.45;
    }

    .mentor-list{
      display:flex;
      flex-direction:column;
      gap:16px;
    }

    .mentor-card{
      padding:14px;
      border-radius:22px;
      background:#0D1A2C;
      border:1px solid rgba(135,155,190,.10);
      box-shadow:
        0 14px 30px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.025);
    }

    .mentor-main{
      display:grid;
      grid-template-columns:64px minmax(0,1fr) 42px;
      gap:12px;
      align-items:center;
    }

    .mentor-avatar{
      width:64px;
      height:64px;
      border-radius:18px;
      overflow:hidden;
      background:#102038;
      border:1px solid rgba(255,255,255,.08);
      box-shadow:0 8px 18px rgba(0,0,0,.16);
      display:grid;
      place-items:center;
      color:#DCEBFA;
      font-size:18px;
      font-weight:850;
    }

    .mentor-avatar img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    .mentor-info{min-width:0}

    .mentor-name{
      margin:0 0 3px;
      font-size:15px;
      font-weight:850;
      color:#fff;
      letter-spacing:-.15px;
    }

    .mentor-role{
      margin:0 0 8px;
      font-size:14px;
      line-height:1.35;
      color:#8FA5BC;
    }

    .mentor-rating{
      display:flex;
      align-items:center;
      gap:5px;
      color:#CBD8E5;
      font-size:14px;
      font-weight:750;
    }

    .mentor-star{
      width:15px;
      height:15px;
      color:#F5C451;
      fill:#F5C451;
      stroke:#F5C451;
      stroke-width:1.8;
      flex:0 0 auto;
    }

    .mentor-chat{
      width:42px;
      height:42px;
      border-radius:0;
      border:0;
      color:#fff;
      background:transparent;
      display:grid;
      place-items:center;
      box-shadow:none;
      cursor:pointer;
      text-decoration:none;
    }

    .mentor-chat i{
      width:18px;
      height:18px;
    }

    .mentor-chat img{
      width:40px;
      height:40px;
      display:block;
      object-fit:contain;
    }


    .mentor-course{
      margin-top:14px;
      padding-top:2px;
      position:relative;
    }

    .mentor-course::before{
      content:"";
      position:absolute;
      left:15px;
      top:10px;
      bottom:10px;
      width:1.5px;
      background:linear-gradient(180deg,#2D5B8A,#1C3552);
      opacity:.9;
    }

    .mentor-step{
      position:relative;
      display:grid;
      grid-template-columns:32px minmax(0,1fr) 34px;
      gap:10px;
      align-items:center;
      padding:8px 0;
    }

    .mentor-step-dot{
      width:12px;
      height:12px;
      margin-left:9px;
      border-radius:50%;
      background:#2C5F93;
      border:3px solid #0D1A2C;
      box-shadow:0 0 0 1px rgba(114,158,204,.28);
      z-index:2;
    }

    .mentor-step-copy{
      min-width:0;
    }

    .mentor-course-kicker{
      margin-bottom:3px;
      font-size:12px;
      font-weight:800;
      letter-spacing:.45px;
      text-transform:uppercase;
      color:#6F89A5;
    }

    .mentor-course-title{
      margin:0 0 3px;
      font-size:14px;
      font-weight:800;
      line-height:1.28;
      color:#F2F6FB;
    }

    .mentor-course-meta{
      font-size:14px;
      color:#7F93AA;
    }

    .mentor-detail{
      width:34px;
      height:34px;
      padding:0;
      border-radius:11px;
      border:1px solid rgba(117,151,188,.14);
      color:#B9C9D9;
      background:#14263C;
      display:grid;
      place-items:center;
      cursor:pointer;
      text-decoration:none;
    }

    .mentor-detail i{
      width:16px;
      height:16px;
    }

    .mentor-course-empty{
      position:relative;
      z-index:1;
      margin-top:10px;
      padding:14px;
      border:1px dashed rgba(135,155,190,.16);
      border-radius:14px;
      color:#71869C;
      background:#0B1728;
      font-size:11px;
      text-align:center;
    }

    .content-empty-state{
      display:flex;
      min-height:180px;
      align-items:center;
      justify-content:center;
      flex-direction:column;
      padding:24px 18px;
      border:1px dashed rgba(135,155,190,.18);
      border-radius:20px;
      color:#7F93A8;
      background:#0D1A2C;
      text-align:center;
    }

    .content-empty-state > span{display:grid;width:48px;height:48px;margin-bottom:12px;place-items:center;border-radius:15px;color:#75AEE8;background:#122640}
    .content-empty-state > span svg{width:21px;height:21px}
    .content-empty-state strong{color:#F5F7FB;font-size:14px}
    .content-empty-state p{max-width:280px;margin:6px 0 0;font-size:12px;line-height:1.5}




    .profile-section{margin-top:2px}

    .mentor-upgrade{border-color:rgba(70,151,235,.15);background:linear-gradient(135deg,rgba(20,77,139,.18),#0D1A2C 60%)}
    .mentor-upgrade .profile-action-icon{color:#8AC4FF;background:#15365B}
    .mentor-apply-app{padding:0 18px 34px}
    .mentor-apply-header{min-height:72px;display:flex;align-items:center;gap:11px;border-bottom:1px solid rgba(255,255,255,.07)}
    .mentor-apply-header>a{width:40px;height:40px;flex:0 0 40px;border:1px solid rgba(135,155,190,.12);border-radius:12px;display:grid;place-items:center;color:#BFD0E1;background:#102038;text-decoration:none}.mentor-apply-header>a svg{width:19px;height:19px}
    .mentor-apply-header>div{min-width:0;display:grid;gap:3px}.mentor-apply-header strong{color:#F4F8FC;font-size:15px;line-height:1.2}.mentor-apply-header div span{color:#71869C;font-size:9px}
    .mentor-apply-header-icon{width:36px;height:36px;margin-left:auto;flex:0 0 36px;border-radius:11px;display:grid;place-items:center;color:#6FE0A2;background:rgba(26,118,81,.14)}.mentor-apply-header-icon svg{width:17px;height:17px}
    .mentor-apply-hero{margin:16px 0;padding:18px;border:1px solid rgba(80,159,240,.15);border-radius:16px;display:flex;align-items:center;gap:14px;text-align:left;background:linear-gradient(135deg,#123354,#0D1A2C 72%)}
    .mentor-apply-hero>span{width:48px;height:48px;flex:0 0 48px;border-radius:14px;display:grid;place-items:center;color:#9CCEFF;background:#174577}.mentor-apply-hero>span svg{width:22px;height:22px}.mentor-apply-hero>div{min-width:0}.mentor-apply-hero small{color:#64ADFA;font-size:8px;font-weight:850;letter-spacing:.1em}.mentor-apply-hero h1{margin:4px 0;color:#F4F8FC;font-size:18px;line-height:1.2}.mentor-apply-hero p{margin:0;color:#8DA2B8;font-size:10px;line-height:1.5}
    .mentor-apply-form{display:grid;gap:15px;padding:18px;border-radius:16px}.mentor-apply-form textarea{width:100%;min-height:128px;padding:13px;border:1px solid rgba(135,155,190,.14);border-radius:13px;resize:vertical;outline:0;color:#F5F7FB;background:#091525;font:inherit;font-size:12px;line-height:1.55}.mentor-apply-form textarea:focus{border-color:rgba(85,153,225,.55);box-shadow:0 0 0 3px rgba(85,153,225,.10)}
    .mentor-apply-form .profile-save-button{width:100%;height:48px;border:0;border-radius:13px;display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;background:linear-gradient(145deg,#0B4FAF,#1670D8 52%,#0D4E9B);box-shadow:0 10px 24px rgba(7,61,127,.22);font-size:12px;font-weight:850;cursor:pointer}.mentor-apply-form .profile-save-button svg{width:16px;height:16px}
    .mentor-field-hint{margin-top:-2px;color:#617A93;font-size:9px;line-height:1.35}
    .mentor-apply-terms{display:flex;align-items:flex-start;gap:9px;padding:12px;border-radius:12px;color:#8EA5BC;background:#102038;font-size:10px;line-height:1.45}.mentor-apply-terms svg{width:17px;height:17px;flex:0 0 auto;color:#68B2FF}
    .mentor-application-status{margin:0 0 14px;padding:13px;border-radius:13px;display:flex;align-items:center;gap:10px}.mentor-application-status.pending{color:#F2D17B;background:rgba(109,77,14,.17);border:1px solid rgba(236,193,75,.14)}.mentor-application-status svg{width:19px;height:19px}.mentor-application-status div{display:grid;gap:2px}.mentor-application-status strong{font-size:11px}.mentor-application-status span{font-size:9px;opacity:.75}

    .profile-topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:18px 0 14px;
    }

    .profile-topuser{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }

    .profile-topavatar{
      width:41px;
      height:41px;
      border-radius:13px;
      flex:0 0 auto;
      display:grid;
      place-items:center;
      color:#fff;
      font-size:18px;
      font-weight:800;
      background:linear-gradient(145deg,#244B7C,#17345D);
      border:1px solid rgba(255,255,255,.08);
    }

    .profile-topcopy{
      min-width:0;
    }

    .profile-topname{
      margin:0 0 2px;
      font-size:14px;
      font-weight:850;
      color:#fff;
      line-height:1.2;
    }

    .profile-topemail{
      margin:0;
      font-size:14px;
      color:#7F93AA;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width:220px;
    }

    .profile-edit{
      width:41px;
      height:41px;
      border-radius:13px;
      border:1px solid rgba(255,255,255,.08);
      background:#0E1D31;
      color:#D6E3F0;
      display:grid;
      place-items:center;
      flex:0 0 auto;
    }

    .profile-edit i{
      width:17px;
      height:17px;
    }

    .membership-card{
      position:relative;
      overflow:hidden;
      min-height:150px;
      padding:16px;
      border-radius:22px;
      background:
        linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.03) 18%,rgba(255,255,255,0) 34%),
        linear-gradient(145deg,#0C4DA8 0%,#176CC8 50%,#123D77 100%);
      border:1px solid rgba(255,255,255,.14);
      box-shadow:
        0 16px 34px rgba(4,34,79,.28),
        inset 0 1px 0 rgba(255,255,255,.18);
      margin-bottom:18px;
    }

    .membership-card::after{
      content:"";
      position:absolute;
      width:150px;
      height:150px;
      right:-52px;
      bottom:-62px;
      border-radius:50%;
      background:rgba(255,255,255,.07);
      box-shadow:-44px -28px 0 rgba(255,255,255,.035);
    }

    .membership-head{
      position:relative;
      z-index:2;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
    }

    .membership-kicker{
      margin:0 0 5px;
      font-size:12px;
      font-weight:800;
      letter-spacing:.55px;
      text-transform:uppercase;
      color:rgba(255,255,255,.70);
    }

    .membership-title{
      margin:0;
      font-size:18px;
      font-weight:900;
      color:#fff;
      letter-spacing:-.3px;
    }

    .membership-icon{
      width:38px;
      height:38px;
      border-radius:13px;
      display:grid;
      place-items:center;
      color:#fff;
      background:rgba(255,255,255,.10);
      border:1px solid rgba(255,255,255,.14);
      backdrop-filter:blur(8px);
    }

    .membership-icon i{
      width:18px;
      height:18px;
    }

    .membership-foot{
      position:absolute;
      left:16px;
      right:16px;
      bottom:15px;
      z-index:2;
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:12px;
    }

    .membership-meta strong{
      display:block;
      margin-bottom:3px;
      font-size:14px;
      color:#fff;
    }

    .membership-meta span{
      font-size:14px;
      color:rgba(255,255,255,.66);
    }

    .membership-chip{
      padding:6px 9px;
      border-radius:999px;
      font-size:12px;
      font-weight:800;
      color:#fff;
      background:rgba(6,23,50,.26);
      border:1px solid rgba(255,255,255,.13);
      backdrop-filter:blur(8px);
    }

    .membership-stats{
      position:absolute;
      left:16px;
      right:16px;
      bottom:14px;
      z-index:2;
      display:grid;
      grid-template-columns:repeat(3,1fr);
      padding-top:12px;
      border-top:1px solid rgba(255,255,255,.14);
    }

    .membership-stat{
      text-align:center;
      position:relative;
    }

    .membership-stat:not(:last-child)::after{
      content:"";
      position:absolute;
      right:0;
      top:2px;
      bottom:2px;
      width:1px;
      background:rgba(255,255,255,.12);
    }

    .membership-stat strong{
      display:block;
      margin-bottom:2px;
      font-size:15px;
      font-weight:900;
      color:#fff;
    }

    .membership-stat span{
      font-size:14px;
      color:rgba(255,255,255,.68);
    }

    .membership-card{
      min-height:196px;
      padding:17px 17px 72px;
    }

    .membership-foot{
      position:relative;
      left:auto;
      right:auto;
      bottom:auto;
      margin-top:28px;
      z-index:2;
      padding-right:2px;
    }

    .profile-user{
      display:flex;
      align-items:center;
      gap:14px;
      padding:8px 0 18px;
      border-bottom:1px solid rgba(255,255,255,.07);
    }

    .profile-user-avatar{
      width:70px;
      height:70px;
      border-radius:22px;
      overflow:hidden;
      flex:0 0 auto;
      background:#102038;
      border:1px solid rgba(255,255,255,.08);
      box-shadow:0 10px 22px rgba(0,0,0,.18);
    }

    .profile-user-avatar img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    .profile-user-copy{min-width:0;flex:1}

    .profile-user-name{
      margin:0 0 3px;
      font-size:18px;
      font-weight:900;
      color:#fff;
      letter-spacing:-.3px;
    }

    .profile-user-email{
      margin:0 0 8px;
      font-size:14px;
      color:#8194AA;
    }

    .profile-user-meta{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
    }

    .profile-user-badge{
      display:inline-flex;
      align-items:center;
      gap:5px;
      padding:6px 9px;
      border-radius:999px;
      font-size:12px;
      font-weight:800;
      color:#E8F1FA;
      background:
        linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0)),
        linear-gradient(145deg,#173A5E,#28547D);
      border:1px solid rgba(135,170,207,.16);
    }

    .profile-user-badge i{width:12px;height:12px}

    .profile-edit{
      width:36px;
      height:36px;
      border-radius:12px;
      border:1px solid rgba(117,151,188,.14);
      background:#102038;
      color:#C7D6E5;
      display:grid;
      place-items:center;
      flex:0 0 auto;
    }

    .profile-edit i{width:16px;height:16px}

    .profile-overview{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      padding:16px 0;
      border-bottom:1px solid rgba(255,255,255,.07);
    }

    .profile-overview-item{
      position:relative;
      text-align:center;
    }

    .profile-overview-item:not(:last-child)::after{
      content:"";
      position:absolute;
      right:0;
      top:4px;
      bottom:4px;
      width:1px;
      background:rgba(255,255,255,.07);
    }

    .profile-overview-item strong{
      display:block;
      margin-bottom:3px;
      font-size:17px;
      font-weight:900;
      color:#fff;
    }

    .profile-overview-item span{
      font-size:14px;
      color:#74899F;
    }

    .profile-group{
      margin-top:24px;
    }

    .profile-group-title{
      margin:0 0 8px;
      font-size:14px;
      font-weight:850;
      letter-spacing:.45px;
      text-transform:uppercase;
      color:#60778F;
    }

    .profile-action{
      width:100%;
      min-height:60px;
      padding:9px 0;
      border:0;
      border-bottom:1px solid rgba(255,255,255,.055);
      background:transparent;
      color:#EEF4FA;
      display:grid;
      grid-template-columns:42px minmax(0,1fr) auto;
      gap:11px;
      align-items:center;
      text-align:left;
      cursor:pointer;
      text-decoration:none;
      font:inherit;
    }

    .profile-action-icon{
      width:42px;
      height:42px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:#102038;
      color:#C9D8E7;
      border:1px solid rgba(255,255,255,.05);
    }

    .profile-action-icon i{
      width:18px;
      height:18px;
    }

    .profile-action-copy strong{
      display:block;
      margin-bottom:3px;
      font-size:14px;
      font-weight:850;
    }

    .profile-action-copy span{
      display:block;
      font-size:14px;
      color:#788CA2;
      line-height:1.35;
    }

    .profile-action-side{
      display:flex;
      align-items:center;
      gap:7px;
      color:#63788E;
    }

    .profile-action-count{
      min-width:25px;
      height:22px;
      padding:0 7px;
      border-radius:999px;
      display:grid;
      place-items:center;
      font-size:12px;
      font-weight:800;
      color:#BFD1E3;
      background:#112239;
      border:1px solid rgba(255,255,255,.05);
    }

    .profile-action-side i{
      width:16px;
      height:16px;
    }

    .profile-action.certificate .profile-action-icon{
      color:#F4C75B;
      background:rgba(120,91,24,.14);
      border-color:rgba(244,199,91,.09);
    }

    .profile-action.logout{
      color:#FFB3BC;
      border-bottom:0;
    }

    .profile-action.logout .profile-action-icon{
      color:#FF9FAA;
      background:rgba(148,42,54,.11);
      border-color:rgba(255,110,123,.08);
    }

    .profile-footer{
      margin-top:18px;
      text-align:center;
      font-size:14px;
      color:#50657A;
    }


    .page{
      display:none;
      opacity:0;
      transform:translateX(0);
    }

    .page.active{
      display:block;
      opacity:1;
    }

    .page.page-enter-right{
      display:block;
      animation:pageEnterRight .34s cubic-bezier(.22,.9,.28,1) both;
    }

    .page.page-enter-left{
      display:block;
      animation:pageEnterLeft .34s cubic-bezier(.22,.9,.28,1) both;
    }

    .page.page-exit-left{
      display:block;
      position:absolute;
      width:calc(100% - 36px);
      animation:pageExitLeft .26s cubic-bezier(.4,0,.6,1) both;
      pointer-events:none;
    }

    .page.page-exit-right{
      display:block;
      position:absolute;
      width:calc(100% - 36px);
      animation:pageExitRight .26s cubic-bezier(.4,0,.6,1) both;
      pointer-events:none;
    }

    @keyframes pageEnterRight{
      from{opacity:0;transform:translateX(10px)}
      to{opacity:1;transform:translateX(0)}
    }

    @keyframes pageEnterLeft{
      from{opacity:0;transform:translateX(-10px)}
      to{opacity:1;transform:translateX(0)}
    }

    @keyframes pageExitLeft{
      from{opacity:1;transform:translateX(0)}
      to{opacity:0;transform:translateX(-6px)}
    }

    @keyframes pageExitRight{
      from{opacity:1;transform:translateX(0)}
      to{opacity:0;transform:translateX(6px)}
    }

    .nav-item{
      position:relative;
      transition:color .22s ease;
    }

    .nav-item .nav-icon{
      transition:
        box-shadow .24s ease,
        background .24s ease,
        opacity .24s ease;
    }

    .nav-item.active{
      transform:none;
    }

    .nav-item.active .nav-icon{
      transform:none;
      animation:none;
    }


    @media (prefers-reduced-motion: reduce){
      .page.page-enter-right,
      .page.page-enter-left,
      .page.page-exit-left,
      .page.page-exit-right{
        animation:none !important;
      }

      .nav-item,
      .nav-item .nav-icon{
        transition:none !important;
      }
    }


    .community-section{
      margin-top:4px;
    }

    .community-hero{
      position:relative;
      overflow:hidden;
      padding:18px;
      border-radius:22px;
      background:
        linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.03) 20%,rgba(255,255,255,0) 38%),
        linear-gradient(145deg,#0B4FAF,#1670D8 55%,#0D4E9B 100%);
      border:1px solid rgba(255,255,255,.13);
      box-shadow:0 16px 34px rgba(4,34,79,.26), inset 0 1px 0 rgba(255,255,255,.16);
      margin-bottom:20px;
    }

    .community-hero::after{
      content:"";
      position:absolute;
      width:150px;
      height:150px;
      right:-55px;
      bottom:-65px;
      border-radius:50%;
      background:rgba(255,255,255,.08);
      box-shadow:-42px -24px 0 rgba(255,255,255,.035);
    }

    .community-hero-icon{
      width:42px;
      height:42px;
      border-radius:14px;
      display:grid;
      place-items:center;
      color:#fff;
      background:rgba(255,255,255,.10);
      border:1px solid rgba(255,255,255,.14);
      margin-bottom:16px;
      position:relative;
      z-index:2;
    }

    .community-hero-icon i{
      width:20px;
      height:20px;
    }

    .community-hero h2{
      position:relative;
      z-index:2;
      margin:0 0 7px;
      font-size:19px;
      font-weight:900;
      letter-spacing:-.3px;
      color:#fff;
    }

    .community-hero p{
      position:relative;
      z-index:2;
      margin:0;
      max-width:310px;
      font-size:14px;
      line-height:1.45;
      color:rgba(255,255,255,.76);
    }

    .community-title-row{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:12px;
      margin-bottom:12px;
    }

    .community-title-row h3{
      margin:0;
      font-size:16px;
      font-weight:850;
      color:#F5F7FB;
    }

    .community-title-row span{
      font-size:12px;
      color:#71869C;
    }

    .social-list{
      display:flex;
      flex-direction:column;
      gap:10px;
    }

    .social-item{
      min-height:72px;
      padding:12px;
      border-radius:18px;
      background:#0D1A2C;
      border:1px solid rgba(135,155,190,.09);
      display:grid;
      grid-template-columns:46px minmax(0,1fr) auto;
      gap:12px;
      align-items:center;
      box-shadow:0 10px 24px rgba(0,0,0,.12);
    }

    .social-icon{
      width:46px;
      height:46px;
      border-radius:14px;
      display:grid;
      place-items:center;
      color:#fff;
      border:1px solid rgba(255,255,255,.09);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
    }

    .social-icon i{
      width:20px;
      height:20px;
    }

    .social-icon.instagram{
      background:linear-gradient(145deg,#5B3D95,#8A4F9F);
    }

    .social-icon.telegram{
      background:linear-gradient(145deg,#1A5C8E,#2B7DAE);
    }

    .social-icon.discord{
      background:linear-gradient(145deg,#404E93,#5966AE);
    }

    .social-icon.youtube{
      background:linear-gradient(145deg,#8E2C35,#B43C47);
    }

    .social-icon.whatsapp{
      background:linear-gradient(145deg,#166548,#23855F);
    }

    .social-copy{
      min-width:0;
    }

    .social-copy strong{
      display:block;
      margin-bottom:4px;
      font-size:14px;
      font-weight:850;
      color:#F4F7FB;
    }

    .social-copy span{
      display:block;
      font-size:12px;
      line-height:1.35;
      color:#8195AA;
    }

    .social-open{
      width:36px;
      height:36px;
      border-radius:12px;
      border:1px solid rgba(117,151,188,.13);
      background:#102038;
      color:#BFD0DF;
      display:grid;
      place-items:center;
      cursor:pointer;
      text-decoration:none;
      text-decoration:none;
    }

    .social-open i{
      width:16px;
      height:16px;
    }

    .community-note{
      margin-top:18px;
      padding:13px 14px;
      border-radius:16px;
      background:#0B1728;
      border:1px solid rgba(135,155,190,.07);
      display:flex;
      align-items:flex-start;
      gap:10px;
    }

    .community-note i{
      width:17px;
      height:17px;
      color:#8DA7C2;
      flex:0 0 auto;
      margin-top:1px;
    }

    .community-note p{
      margin:0;
      font-size:12px;
      line-height:1.45;
      color:#7D91A6;
    }


    .course-detail{
      margin-top:2px;
    }

    .course-detail-app{
      --detail-card-radius:16px;
      --detail-card-bg:#0D1A2C;
      --detail-card-border:1px solid rgba(135,155,190,.09);
      padding-bottom:96px;
    }

    .owned-play,
    .course-back{
      color:inherit;
      text-decoration:none;
    }

    .course-detail-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:18px 0 14px;
    }

    .course-back{
      width:41px;
      height:41px;
      border-radius:13px;
      border:1px solid rgba(255,255,255,.08);
      background:#0E1D31;
      color:#DCE8F5;
      display:grid;
      place-items:center;
      cursor:pointer;
      flex:0 0 auto;
    }

    .course-back i{
      width:18px;
      height:18px;
    }

    .course-detail-titlebar{
      flex:1;
      min-width:0;
    }

    .course-detail-titlebar strong{
      display:block;
      font-size:14px;
      font-weight:850;
      color:#F5F7FB;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .course-detail-titlebar span{
      display:block;
      margin-top:2px;
      font-size:12px;
      color:#74899F;
    }

    .course-more{
      width:41px;
      height:41px;
      padding:0;
      border-radius:13px;
      border:1px solid rgba(255,255,255,.08);
      background:#0E1D31;
      color:#DCE8F5;
      display:grid;
      place-items:center;
      cursor:pointer;
      flex:0 0 auto;
    }

    .course-more i,
    .course-more svg{
      width:18px;
      height:18px;
    }

    .video-shell{
      overflow:hidden;
      border-radius:var(--detail-card-radius);
      background:var(--detail-card-bg);
      border:var(--detail-card-border);
    }

    .video-frame{
      position:relative;
      aspect-ratio:16/9;
      background:#050B13;
    }

    .video-frame:fullscreen,
    .video-frame:-webkit-full-screen{
      width:100vw;
      height:100vh;
      aspect-ratio:auto;
      background:#000;
    }

    .video-frame iframe,
    .video-frame video{
      position:relative;
      z-index:1;
      width:100%;
      height:100%;
      display:block;
      border:0;
      object-fit:contain;
      pointer-events:auto;
    }

    .video-frame[data-video-type="youtube"] iframe{
      pointer-events:none;
      user-select:none;
    }

    .video-unavailable{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      flex-direction:column;
      gap:9px;
      color:#71869C;
      font-size:12px;
    }

    .video-unavailable svg{width:30px;height:30px}

    .video-play-overlay{
      position:absolute;
      inset:0;
      z-index:3;
      width:100%;
      height:100%;
      padding:0;
      border:0;
      display:grid;
      place-items:center;
      color:#fff;
      background:rgba(3,10,22,.18);
      cursor:pointer;
    }

    .video-play-overlay i,
    .video-play-overlay svg{
      width:64px;
      height:64px;
      padding:19px;
      border-radius:50%;
      fill:currentColor;
      background:linear-gradient(145deg,#0B4FAF,#1670D8);
    }

    .video-play-overlay[hidden]{
      display:none !important;
      pointer-events:none !important;
    }

    .video-tap-toggle{
      position:absolute;
      top:46px;
      right:0;
      bottom:46px;
      left:0;
      z-index:2;
      padding:0;
      border:0;
      background:transparent;
      cursor:pointer;
    }

    .video-fullscreen-toggle{
      position:absolute;
      top:max(10px,env(safe-area-inset-top));
      right:max(10px,env(safe-area-inset-right));
      z-index:4;
      width:44px;
      height:44px;
      padding:0;
      border:1px solid rgba(255,255,255,.18);
      border-radius:14px;
      display:grid;
      place-items:center;
      color:#fff;
      background:rgba(8,17,31,.8);
      backdrop-filter:blur(10px);
      cursor:pointer;
    }

    .fullscreen-collapse-icon{
      display:none;
    }

    .video-frame:fullscreen .fullscreen-expand-icon,
    .video-frame:-webkit-full-screen .fullscreen-expand-icon,
    .video-frame.is-fullscreen .fullscreen-expand-icon{
      display:none;
    }

    .video-frame:fullscreen .fullscreen-collapse-icon,
    .video-frame:-webkit-full-screen .fullscreen-collapse-icon,
    .video-frame.is-fullscreen .fullscreen-collapse-icon{
      display:block;
    }

    .video-fullscreen-toggle i,
    .video-fullscreen-toggle svg{
      width:20px;
      height:20px;
    }

    .video-caption{
      padding:14px;
      background:var(--detail-card-bg);
    }

    .video-caption h2{
      margin:0 0 6px;
      font-size:18px;
      line-height:1.3;
      font-weight:900;
      color:#fff;
      letter-spacing:-.2px;
    }

    .video-meta{
      display:flex;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
      color:#8093A9;
      font-size:12px;
    }

    .video-meta span{
      display:inline-flex;
      align-items:center;
      gap:5px;
    }

    .video-meta i{
      width:14px;
      height:14px;
    }

    .learning-progress{
      margin-top:16px;
      padding:14px;
      border-radius:var(--detail-card-radius);
      background:var(--detail-card-bg);
      border:var(--detail-card-border);
    }

    .learning-progress-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:10px;
    }

    .learning-progress-top strong{
      font-size:14px;
      color:#F5F7FB;
    }

    .learning-progress-top span{
      font-size:12px;
      color:#8DA0B5;
    }

    .learning-progress-bar{
      height:7px;
      border-radius:999px;
      overflow:hidden;
      background:#15263B;
    }

    .learning-progress-bar span{
      display:block;
      height:100%;
      width:0;
      border-radius:inherit;
      background:
        linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0)),
        linear-gradient(90deg,#0B4FAF,#1670D8);
    }

    .course-section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:12px;
      margin:22px 0 12px;
    }

    .course-section-head h3{
      margin:0;
      font-size:16px;
      font-weight:850;
      color:#F5F7FB;
    }

    .course-section-head span{
      font-size:12px;
      color:#71869C;
    }

    .lesson-list{
      display:flex;
      flex-direction:column;
      gap:8px;
    }

    .lesson-item{
      min-height:68px;
      padding:10px 11px;
      border-radius:var(--detail-card-radius);
      background:var(--detail-card-bg);
      border:var(--detail-card-border);
      display:grid;
      grid-template-columns:38px minmax(0,1fr) auto;
      gap:10px;
      align-items:center;
      cursor:pointer;
      color:inherit;
      text-decoration:none;
    }

    .lesson-index{
      width:38px;
      height:38px;
      border-radius:12px;
      display:grid;
      place-items:center;
      color:#9BB0C5;
      background:#102038;
      border:1px solid rgba(255,255,255,.05);
      font-size:12px;
      font-weight:800;
    }

    .lesson-item.active{
      border-color:rgba(75,140,207,.18);
      background:#0E1D31;
    }

    .lesson-item.active .lesson-index{
      color:#fff;
      background:
        linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0)),
        linear-gradient(145deg,#0B4FAF,#1670D8 55%,#0D4E9B);
    }

    .lesson-copy{
      min-width:0;
    }

    .lesson-copy strong{
      display:block;
      margin-bottom:4px;
      font-size:14px;
      line-height:1.3;
      color:#F2F6FB;
    }

    .lesson-copy span{
      display:block;
      font-size:12px;
      color:#74889E;
    }

    .lesson-state{
      width:32px;
      height:32px;
      border-radius:11px;
      display:grid;
      place-items:center;
      color:#6F8399;
      background:#102038;
      border:1px solid rgba(255,255,255,.05);
    }

    .lesson-state i{
      width:15px;
      height:15px;
    }

    .lesson-item.done .lesson-state{
      color:#69C69D;
      background:rgba(26,118,81,.12);
      border-color:rgba(105,198,157,.08);
    }

    .continue-learning{
      position:fixed;
      left:50%;
      bottom:0;
      transform:translateX(-50%);
      z-index:30;
      width:min(calc(100% - 36px),444px);
      margin:0;
      padding:12px 0 calc(12px + env(safe-area-inset-bottom));
      background:linear-gradient(180deg,rgba(8,17,31,0),#08111F 24%);
    }

    .continue-btn{
      width:100%;
      height:48px;
      border:1px solid rgba(255,255,255,.16);
      border-radius:var(--detail-card-radius);
      color:#fff;
      background:
        linear-gradient(180deg,rgba(255,255,255,.23) 0%,rgba(255,255,255,.06) 20%,rgba(255,255,255,0) 34%),
        linear-gradient(145deg,#0B4FAF,#1670D8 52%,#0D4E9B 100%);
      font-size:14px;
      font-weight:850;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      cursor:pointer;
      box-shadow:0 10px 22px rgba(8,56,122,.22),inset 0 1px 0 rgba(255,255,255,.22);
      text-decoration:none;
    }

    .continue-btn i{
      width:17px;
      height:17px;
    }

    .lesson-empty-state{margin-top:4px}
    .detail-error-state{margin-top:18vh}
    .detail-error-state .continue-btn{width:auto;height:42px;margin-top:16px;padding:0 16px}

    /* Flat lesson watch page */
    .lesson-watch-page{background:#08111F}
    .lesson-watch-app{padding:0 0 86px;background:#08111F}
    .lesson-watch-app .course-detail{padding:0}
    .lesson-watch-app .course-detail-header{display:none}
    .lesson-watch-app .video-shell{margin:0;border:0;border-radius:0;background:transparent;overflow:visible}
    .lesson-watch-app .video-frame{width:100%;aspect-ratio:16/9;border-radius:0;background:#000}
    .lesson-watch-app .video-frame iframe,
    .lesson-watch-app .video-frame video{width:100%;height:100%;display:block;border:0;object-fit:contain}
    .lesson-watch-app .video-caption{padding:15px 16px 13px;border-bottom:1px solid rgba(255,255,255,.08);background:transparent}

    @media(max-width:899px){
      .lesson-watch-app .video-frame.is-scroll-pinned{
        position:fixed;
        z-index:28;
        top:0;
        left:var(--video-pinned-left);
        width:var(--video-pinned-width);
        box-shadow:0 8px 22px rgba(0,0,0,.38);
      }
      .lesson-video-placeholder{display:none;width:100%;aspect-ratio:16/9}
      .lesson-video-placeholder.is-active{display:block}
    }
    .lesson-watch-app .video-caption h1{margin:0 0 7px;color:#F6F8FB;font-size:18px;line-height:1.35;font-weight:800}
    .lesson-watch-app .video-meta{display:flex;gap:7px;color:#91A2B5;font-size:11px}
    .lesson-watch-app .video-meta span+span:before{content:'•';margin-right:7px;color:#586B80}
    .lesson-course-channel{display:flex;align-items:center;gap:10px;margin-top:14px}
    .lesson-course-channel>span{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;color:#fff;background:#176AC7}
    .lesson-course-channel>span{overflow:hidden}
    .lesson-course-channel>span img{width:100%;height:100%;display:block;object-fit:cover}
    .lesson-course-channel svg{width:19px;height:19px}
    .lesson-course-channel div{min-width:0;flex:1;display:grid;gap:2px}
    .lesson-course-channel strong{overflow:hidden;color:#EAF0F7;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
    .lesson-course-channel small{color:#7D90A5;font-size:10px}
    .lesson-mentor-whatsapp{height:34px;padding:0 11px;flex:0 0 auto;border:1px solid rgba(77,221,142,.22);border-radius:8px;display:flex;align-items:center;gap:6px;color:#70E6A4;background:rgba(26,127,76,.13);text-decoration:none;font-size:10px;font-weight:800}
    .lesson-mentor-whatsapp svg{width:15px;height:15px}
    .lesson-watch-app .learning-progress{margin:0;padding:15px 16px;border:0;border-bottom:1px solid rgba(255,255,255,.08);border-radius:0;background:transparent}
    .lesson-watch-app .learning-progress-top{margin-bottom:9px}
    .lesson-watch-app .course-section-head{margin:0;padding:17px 16px 10px}
    .lesson-watch-app .course-section-head h2{margin:0;color:#F3F6FA;font-size:16px}
    .lesson-watch-app .lesson-list{display:block;padding:0}
    .lesson-watch-app .lesson-item{min-height:72px;margin:0;padding:10px 16px;border:0;border-top:1px solid rgba(255,255,255,.065);border-radius:0;background:transparent;box-shadow:none}
    .lesson-watch-app .lesson-item{display:flex;align-items:center;gap:9px}
    .lesson-item-main{min-width:0;flex:1;display:grid;grid-template-columns:42px minmax(0,1fr);gap:11px;align-items:center;color:inherit;text-decoration:none}
    .lesson-watch-app .lesson-item:last-child{border-bottom:1px solid rgba(255,255,255,.065)}
    .lesson-watch-app .lesson-item.active{background:#102238;border-color:rgba(71,155,239,.2)}
    .lesson-watch-app .lesson-item.locked{cursor:not-allowed;opacity:.48}
    .lesson-watch-app .lesson-item.locked .lesson-state{color:#8293A5;background:#111D2C}
    .lesson-inline-complete{margin:0;flex:0 0 auto}
    .lesson-inline-complete button{height:34px;padding:0 10px;border:1px solid rgba(91,164,239,.25);border-radius:8px;display:flex;align-items:center;gap:5px;color:#8CC8FF;background:#102A47;font-size:10px;font-weight:800;cursor:pointer}
    .lesson-inline-complete button svg{width:14px;height:14px}
    .lesson-earned-certificate{position:relative;margin:18px 16px 8px;padding:18px 46px 16px 16px;display:block;overflow:hidden;border:1px solid rgba(237,190,78,.26);border-radius:12px;background:linear-gradient(135deg,rgba(114,77,15,.18),rgba(13,26,44,.96) 55%)}
    .lesson-certificate-copy{min-width:0}.lesson-certificate-copy>span{color:#DDBB65;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.lesson-certificate-copy h2{margin:4px 0;color:#FFF7DD;font-size:14px;line-height:1.3}.lesson-certificate-copy p{margin:0;color:#9CA9B8;font-size:9px;line-height:1.45}.lesson-certificate-copy small{display:block;margin-top:6px;color:#C3A85F;font-size:9px}
    .lesson-certificate-check{position:absolute;top:12px;right:12px;color:#EAC45D}.lesson-certificate-check svg{width:21px;height:21px}
    .lesson-earned-certificate>button{height:34px;margin-top:13px;padding:0 12px;border:1px solid rgba(234,196,93,.28);border-radius:8px;display:flex;align-items:center;gap:6px;color:#F2CF70;background:rgba(167,117,14,.13);font-size:10px;font-weight:850;cursor:pointer}.lesson-earned-certificate>button svg{width:14px;height:14px}
    .lesson-watch-app .lesson-index{width:42px;height:42px;border-radius:7px;color:#A9BDD2;background:#14243A}
    .lesson-watch-app .lesson-item.active .lesson-index{color:#fff;background:#176AC7}
    .lesson-watch-app .lesson-copy strong{font-size:12px}
    .lesson-watch-app .lesson-copy span{margin-top:5px;font-size:10px}
    .lesson-watch-app .continue-learning{position:static;width:auto;margin:0;padding:14px 16px;transform:none;background:none}
    .lesson-watch-app .continue-learning form{margin:0}
    .lesson-watch-app .continue-btn{border-radius:8px}
    .lesson-watch-app button.continue-btn{width:100%;border:0;cursor:pointer}
    .bottom-nav.lesson-course-nav{z-index:100;grid-template-columns:repeat(5,1fr);padding-top:5px}
    .lesson-course-nav .nav-item{height:53px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
    .lesson-course-nav .nav-icon{width:31px;height:31px;border-radius:10px}
    .lesson-course-nav .nav-label{display:block;color:#718BA5;font-size:8px;font-weight:750;line-height:1}
    .lesson-course-nav .nav-item.active .nav-label{color:#8FC6FF}
    body.lesson-tool-open{overflow:hidden}
    .lesson-tool-layer{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;visibility:hidden;pointer-events:none;background:rgba(2,8,18,0);transition:.24s ease}
    .lesson-tool-layer.open{visibility:visible;pointer-events:auto;background:rgba(2,8,18,.72)}
    .lesson-tool-sheet{position:relative;width:min(100%,480px);max-height:86vh;padding:12px 18px calc(22px + env(safe-area-inset-bottom));overflow-y:auto;border:1px solid rgba(135,155,190,.12);border-bottom:0;border-radius:22px 22px 0 0;color:#EDF4FB;background:#091526;transform:translateY(100%);transition:transform .3s cubic-bezier(.22,.9,.28,1)}
    .lesson-tool-layer.open .lesson-tool-sheet{transform:translateY(0)}
    .lesson-tool-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border:1px solid rgba(135,155,190,.12);border-radius:11px;display:grid;place-items:center;color:#AFC0D2;background:#102038;cursor:pointer}
    .lesson-tool-close svg{width:17px;height:17px}
    .lesson-zoom-page{align-items:stretch;background:#08111F}
    .lesson-zoom-page.open{background:#08111F}
    .lesson-zoom-page .lesson-tool-sheet{width:min(100%,480px);height:100%;max-height:none;padding:78px 18px calc(90px + env(safe-area-inset-bottom));border:0;border-radius:0;background:#08111F;transform:translateX(100%);transition:transform .3s cubic-bezier(.22,.9,.28,1)}
    .lesson-zoom-page.open .lesson-tool-sheet{transform:translateX(0)}
    .lesson-zoom-page .course-sheet-handle{display:none}
    .lesson-zoom-page .lesson-tool-close{top:20px;left:18px;right:auto;width:42px;height:42px;border-radius:13px}
    .lesson-zoom-page .lesson-tool-kicker{margin-top:0}
    .lesson-zoom-page .lesson-tool-sheet>h2{font-size:24px;margin-top:6px}
    .lesson-zoom-page .lesson-tool-course{margin-bottom:24px}
    .lesson-zoom-page .lesson-zoom-card{padding:18px;border-radius:16px}
    .lesson-zoom-page .lesson-attendance-demo{margin-top:18px;padding:16px 2px}
    .lesson-tool-kicker{display:block;margin-top:5px;color:#55A9FF;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}
    .lesson-tool-sheet>h2{margin:5px 45px 3px 0;font-size:20px}
    .lesson-tool-course{margin:0 0 18px;color:#7890A8;font-size:11px}
    .lesson-zoom-card{padding:16px;border:1px solid rgba(91,164,239,.14);border-radius:14px;background:#0D1A2C}
    .lesson-zoom-status{display:flex;align-items:center;gap:7px;color:#6DDA9F;font-size:10px;font-weight:750}
    .lesson-zoom-status span{width:7px;height:7px;border-radius:50%;background:#32D583;box-shadow:0 0 0 4px rgba(50,213,131,.1)}
    .lesson-zoom-card h3{margin:12px 0 10px;font-size:15px}
    .lesson-zoom-meta{display:flex;flex-wrap:wrap;gap:8px 15px;color:#8196AC;font-size:10px}
    .lesson-zoom-meta span{display:flex;align-items:center;gap:5px}.lesson-zoom-meta svg{width:13px;height:13px}
    .lesson-zoom-card>button{width:100%;height:43px;margin-top:16px;border:0;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:7px;color:#fff;background:#176AC7;font-size:11px;font-weight:850;cursor:pointer}
    .lesson-zoom-card>button svg{width:16px;height:16px}
    .lesson-attendance-demo{margin-top:12px;padding:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid rgba(255,255,255,.08)}
    .lesson-attendance-demo div{display:grid;gap:3px}.lesson-attendance-demo strong{font-size:12px}.lesson-attendance-demo span{color:#7890A8;font-size:9px}
    .lesson-attendance-demo button{height:34px;padding:0 11px;border:1px solid rgba(85,210,143,.24);border-radius:8px;color:#72DFA4;background:rgba(27,132,79,.12);font-size:9px;font-weight:800;cursor:pointer}.lesson-attendance-demo button:disabled{opacity:.65}
    .lesson-certificate-demo{margin-top:18px;padding:25px 18px;border:1px solid rgba(135,155,190,.12);border-radius:15px;text-align:center;background:#0D1A2C}
    .lesson-certificate-demo>span{width:62px;height:62px;margin:0 auto 13px;border-radius:50%;display:grid;place-items:center;color:#7D91A7;background:#14243A}.lesson-certificate-demo.available>span{color:#FFD66B;background:rgba(184,133,20,.14)}
    .lesson-certificate-demo>span svg{width:29px;height:29px}.lesson-certificate-demo strong{display:block;font-size:15px}.lesson-certificate-demo p{margin:7px auto 16px;max-width:280px;color:#8094A9;font-size:10px;line-height:1.5}
    .certificate-progress{height:5px;overflow:hidden;border-radius:999px;background:#17273A}.certificate-progress span{height:100%;display:block;border-radius:inherit;background:#2788EA}.lesson-certificate-demo small{display:block;margin-top:7px;color:#7890A8;font-size:9px}
    .lesson-certificate-demo button{width:100%;height:42px;margin-top:16px;border:0;border-radius:10px;color:#fff;background:#176AC7;font-size:11px;font-weight:850}.lesson-certificate-demo button:disabled{color:#687D92;background:#152438}

    body.course-sheet-open{
      overflow:hidden;
    }

    .course-sheet-layer{
      position:fixed;
      inset:0;
      z-index:60;
      display:flex;
      align-items:flex-end;
      justify-content:center;
      padding:0;
      visibility:hidden;
      pointer-events:none;
      background:rgba(2,8,18,0);
      transition:background .24s ease,visibility .24s ease;
    }

    .course-sheet-layer.open{
      visibility:visible;
      pointer-events:auto;
      background:rgba(2,8,18,.7);
    }

    .course-sheet{
      position:relative;
      width:min(100%,480px);
      max-height:92vh;
      overflow-y:auto;
      padding:12px 18px calc(18px + env(safe-area-inset-bottom));
      border-radius:22px 22px 0 0;
      color:#F5F7FB;
      background:#0A1626;
      border:1px solid rgba(135,155,190,.12);
      border-bottom:0;
      transform:translateY(100%);
      transition:transform .3s cubic-bezier(.22,.9,.28,1);
    }

    .course-sheet-layer.open .course-sheet{
      transform:translateY(0);
    }

    .course-sheet-handle{
      width:42px;
      height:4px;
      margin:0 auto 14px;
      border-radius:999px;
      background:#31445A;
    }

    .course-sheet-close{
      position:absolute;
      top:14px;
      right:16px;
      width:36px;
      height:36px;
      padding:0;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.08);
      display:grid;
      place-items:center;
      color:#B8C8D8;
      background:#102038;
      cursor:pointer;
    }

    .course-sheet-close i,
    .course-sheet-close svg{
      width:17px;
      height:17px;
    }

    .course-sheet-main{
      display:grid;
      grid-template-columns:86px minmax(0,1fr);
      gap:13px;
      align-items:center;
      padding-right:38px;
    }

    .course-sheet-main > img{
      width:86px;
      height:108px;
      border-radius:14px;
      object-fit:cover;
      display:block;
      background:#102038;
    }

    .course-sheet-copy{
      min-width:0;
    }

    .course-badge.sheet-badge{
      position:static;
      display:inline-flex;
      margin-bottom:7px;
      padding:5px 8px;
    }

    .course-sheet-copy h2{
      margin:0 0 7px;
      font-size:17px;
      line-height:1.25;
      color:#fff;
    }

    .course-sheet-meta{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:7px;
      margin-top:14px;
    }

    .course-sheet-meta > span{
      min-width:0;
      padding:9px 7px;
      border-radius:12px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:5px;
      color:#88A0B8;
      background:#0D1A2C;
      border:1px solid rgba(135,155,190,.08);
      font-size:11px;
      white-space:nowrap;
    }

    .course-sheet-meta i,
    .course-sheet-meta svg{
      width:14px;
      height:14px;
      flex:0 0 auto;
    }

    .course-sheet-description{
      margin:13px 0 15px;
      color:#8CA0B5;
      font-size:12px;
      line-height:1.55;
      white-space:pre-line;
    }

    .course-sheet-materials{
      margin:0 0 15px;
      padding:12px;
      border-radius:14px;
      background:#0D1A2C;
      border:1px solid rgba(135,155,190,.08);
    }

    .course-sheet-materials-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:9px;
    }

    .course-sheet-materials-head strong{
      color:#DCE8F5;
      font-size:12px;
    }

    .course-sheet-materials-head span{
      color:#698099;
      font-size:10px;
    }

    .course-sheet-materials ol{
      margin:0;
      padding:0;
      display:grid;
      gap:7px;
      list-style:none;
    }

    .course-sheet-materials li{
      min-width:0;
      display:grid;
      grid-template-columns:24px minmax(0,1fr) auto;
      gap:8px;
      align-items:center;
    }

    .course-sheet-materials li > span{
      width:24px;
      height:24px;
      display:grid;
      place-items:center;
      border-radius:8px;
      color:#8FC4FF;
      background:#132844;
      font-size:10px;
      font-weight:800;
    }

    .course-sheet-materials li strong{
      overflow:hidden;
      color:#B9CADB;
      font-size:11px;
      font-weight:650;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

    .course-sheet-materials li small,
    .course-sheet-materials > p{
      margin:0;
      color:#698099;
      font-size:10px;
    }

    .course-sheet-footer{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
    }

    .course-sheet-price{
      min-width:0;
      margin-right:auto;
      display:flex;
      flex-direction:column;
      gap:3px;
    }

    .course-sheet-price span{
      color:#7890A8;
      font-size:11px;
    }

    .course-sheet-price strong{
      color:#F4F8FC;
      font-size:17px;
      line-height:1.15;
      white-space:nowrap;
    }

    .course-sheet-cart,
    .course-sheet-action{
      width:auto;
      height:48px;
      border-radius:16px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      color:#fff;
      text-decoration:none;
      background:linear-gradient(145deg,#0B4FAF,#1670D8 52%,#0D4E9B);
      font-size:13px;
      font-weight:850;
    }

    .course-sheet-cart{
      width:48px;
      flex:0 0 48px;
      padding:0;
      border:1px solid rgba(91,164,239,.3);
      color:#7EC0FF;
      background:#102A47;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
      cursor:pointer;
      transition:transform .18s ease,background .18s ease;
    }

    .cart-toast{position:fixed;left:50%;bottom:92px;z-index:130;width:max-content;max-width:calc(min(100%,480px) - 32px);padding:11px 14px;border:1px solid rgba(95,222,160,.2);border-radius:12px;display:flex;align-items:center;gap:8px;color:#C8F7DC;background:rgba(13,50,40,.96);box-shadow:0 14px 34px rgba(0,0,0,.3);opacity:0;pointer-events:none;transform:translate(-50%,14px);transition:opacity .2s ease,transform .2s ease;font-size:11px;font-weight:750}.cart-toast.show{opacity:1;transform:translate(-50%,0)}.cart-toast.notice{color:#FFE7A3;border-color:rgba(235,190,77,.2);background:rgba(65,48,15,.97)}.cart-toast svg{width:16px;height:16px;flex:0 0 auto}

    .course-sheet-action{
      min-width:104px;
      padding:0 22px;
    }

    .course-sheet-cart i,
    .course-sheet-cart svg,
    .course-sheet-action i,
    .course-sheet-action svg{
      width:17px;
      height:17px;
    }

    body.cart-drawer-open{overflow:hidden}

    .cart-drawer-layer{
      position:fixed;
      inset:0;
      z-index:90;
      visibility:hidden;
      pointer-events:none;
      background:rgba(2,8,18,0);
      transition:background .25s ease,visibility .25s ease;
    }

    .cart-drawer-layer.open{
      visibility:visible;
      pointer-events:auto;
      background:rgba(2,8,18,.72);
    }

    .cart-drawer{
      position:absolute;
      top:0;
      right:0;
      width:min(88%,390px);
      height:100%;
      padding:20px 16px calc(20px + env(safe-area-inset-bottom));
      overflow-y:auto;
      color:#F5F8FC;
      background:#091526;
      border-left:1px solid rgba(135,155,190,.12);
      box-shadow:-24px 0 55px rgba(0,0,0,.4);
      transform:translateX(100%);
      transition:transform .3s cubic-bezier(.22,.9,.28,1);
    }

    .cart-drawer-layer.open .cart-drawer{transform:translateX(0)}

    .cart-drawer-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:20px;
    }

    .cart-drawer-head span{color:#4FA3FF;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
    .cart-drawer-head h2{margin:3px 0 0;font-size:19px}
    .cart-drawer-head button{width:40px;height:40px;border:1px solid rgba(135,155,190,.12);border-radius:13px;display:grid;place-items:center;color:#B9CADB;background:#102038;cursor:pointer}
    .cart-drawer-head button svg{width:18px;height:18px}
    .cart-drawer-list{display:grid;gap:11px}
    .catalog-cart-footer{position:sticky;bottom:0;margin-top:auto;padding:16px 0 max(10px,env(safe-area-inset-bottom));background:#091625}
    .catalog-cart-footer button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;border:0;border-radius:10px;background:#1764ba;color:#fff;font-weight:800;cursor:pointer}
    .catalog-cart-footer button:disabled{opacity:.5;cursor:not-allowed}.catalog-cart-footer svg{width:17px;height:17px}
    .payment-items-summary{margin:15px 0;padding:18px;border:1px solid #ffffff1a;border-radius:15px;background:#0d1a2c}.payment-items-summary h2{margin:0 0 13px;font-size:14px}.payment-items-summary>div{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid #ffffff12;font-size:12px}.payment-items-summary>div span{flex:1;min-width:0}.payment-items-summary>div strong{white-space:nowrap}.payment-items-summary>div a{color:#74b7f7;font-weight:800}

    .cart-drawer-item{
      display:grid;
      grid-template-columns:62px minmax(0,1fr);
      gap:11px;
      padding:11px;
      border:1px solid rgba(135,155,190,.1);
      border-radius:16px;
      background:#0D1A2C;
    }

    .cart-drawer-item > img{width:62px;height:76px;border-radius:11px;object-fit:cover;background:#102038}
    .cart-drawer-copy{min-width:0;padding-top:2px}
    .cart-drawer-copy h3{margin:0 0 8px;font-size:13px;line-height:1.35;color:#F5F8FC}
    .cart-drawer-copy strong{font-size:13px;color:#76B8FF}
    .cart-drawer-actions{grid-column:1/-1;display:grid;grid-template-columns:40px 1fr;gap:8px}
    .cart-item-remove,.cart-item-checkout{height:40px;border-radius:12px;display:grid;place-items:center;text-decoration:none;cursor:pointer}
    .cart-item-remove{border:1px solid rgba(255,103,124,.18);color:#FF7890;background:rgba(179,38,62,.1)}
    .cart-item-remove svg{width:16px;height:16px}
    .cart-item-checkout{color:#fff;background:linear-gradient(145deg,#0B4FAF,#1670D8 52%,#0D4E9B);font-size:12px;font-weight:850}

    .cart-drawer-empty{min-height:58vh;place-items:center;align-content:center;text-align:center;color:#7890A8}
    .cart-drawer-empty:not([hidden]){display:grid}
    .cart-drawer-empty > span{width:64px;height:64px;margin-bottom:14px;border-radius:20px;display:grid;place-items:center;color:#69B2FF;background:#102440}
    .cart-drawer-empty svg{width:28px;height:28px}
    .cart-drawer-empty strong{color:#DCE8F5;font-size:14px}
    .cart-drawer-empty p{margin:6px 0 0;font-size:11px}

    .bottom-nav{
      position:fixed;
      left:50%;
      bottom:0;
      transform:translateX(-50%);
      z-index:30;
      width:min(100%,480px);
      min-height:var(--nav-h);
      padding:8px 8px calc(8px + env(safe-area-inset-bottom));
      display:grid;
      grid-template-columns:repeat(4,1fr);
      align-items:center;
      justify-items:center;
      background:rgba(8,17,31,.96);
      border-top:1px solid rgba(255,255,255,.07);
      backdrop-filter:blur(18px);
      box-shadow:0 -12px 35px rgba(0,0,0,.24);
    }

    .nav-item{
      width:48px;
      height:48px;
      border:0;
      background:transparent;
      color:#718BA5;
      display:grid;
      place-items:center;
      border-radius:15px;
      cursor:pointer;
    }

    .nav-icon{
      width:40px;
      height:40px;
      border-radius:13px;
      display:grid;
      place-items:center;
    }

    .nav-item i{width:20px;height:20px}

    .nav-item.active{color:#9AAFC4}

    .nav-item.active .nav-icon{
      color:#fff;
      background:
        linear-gradient(180deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.07) 20%,rgba(255,255,255,0) 34%),
        linear-gradient(145deg,#0B4FAF,#1670D8 52%,#0D4E9B 100%);
      box-shadow:
        0 8px 18px rgba(8,56,122,.24),
        inset 0 1px 0 rgba(255,255,255,.26);
    }

    .checkout-app{
      padding-bottom:112px;
    }

    .checkout-surface,
    .payment-option{
      border:1px solid rgba(135,155,190,.09);
      border-radius:16px;
      background:#0D1A2C;
    }

    .checkout-secure{
      width:41px;
      height:41px;
      border-radius:13px;
      display:grid;
      place-items:center;
      color:#69C69D;
      background:rgba(26,118,81,.12);
      border:1px solid rgba(105,198,157,.1);
      flex:0 0 auto;
    }

    .checkout-secure i,
    .checkout-secure svg{
      width:18px;
      height:18px;
    }

    .checkout-course{
      display:grid;
      grid-template-columns:88px minmax(0,1fr);
      gap:13px;
      padding:12px;
    }

    .checkout-course > img{
      width:88px;
      height:112px;
      border-radius:12px;
      object-fit:cover;
      display:block;
      background:#102038;
    }

    .checkout-course-copy{
      min-width:0;
      align-self:center;
    }

    .course-badge.checkout-badge{
      position:static;
      display:inline-flex;
      margin-bottom:7px;
      padding:5px 8px;
    }

    .checkout-course h1{
      margin:0 0 7px;
      font-size:15px;
      line-height:1.3;
      color:#F5F7FB;
    }

    .checkout-meta{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-bottom:9px;
      color:#7F93A8;
      font-size:11px;
    }

    .checkout-meta > span{
      display:inline-flex;
      align-items:center;
      gap:4px;
    }

    .checkout-meta i,
    .checkout-meta svg{
      width:13px;
      height:13px;
    }

    .checkout-course-price{
      font-size:15px;
      color:#fff;
    }

    .checkout-note{
      display:flex;
      align-items:flex-start;
      gap:8px;
      margin-top:10px;
      padding:10px 12px;
      color:#83A0BC;
      font-size:12px;
      line-height:1.4;
    }

    .checkout-note i,
    .checkout-note svg{
      width:16px;
      height:16px;
      color:#69C69D;
      flex:0 0 auto;
    }

    .checkout-section{
      margin-top:20px;
    }

    .checkout-section .course-section-head{
      margin:0 0 10px;
    }

    .checkout-section .course-section-head h2,
    .checkout-summary h2{
      margin:0;
      font-size:15px;
      color:#F5F7FB;
    }

    .payment-options{
      display:flex;
      flex-direction:column;
      gap:8px;
    }

    .payment-option{
      position:relative;
      min-height:66px;
      padding:10px 11px;
      display:grid;
      grid-template-columns:38px minmax(0,1fr) 28px;
      gap:10px;
      align-items:center;
      cursor:pointer;
    }

    .payment-option:has(input:checked){
      border-color:rgba(77,151,230,.42);
      background:#0E1D31;
    }

    .payment-option.payment-loading{
      pointer-events:none;
      opacity:.48;
      transition:opacity .18s ease,border-color .18s ease;
    }

    .payment-option.payment-changing{
      opacity:1;
      border-color:#287DD8;
    }

    .payment-option input{
      position:absolute;
      opacity:0;
      pointer-events:none;
    }

    .payment-icon{
      width:38px;
      height:38px;
      min-width:38px;
      overflow:hidden;
      border-radius:12px;
      display:grid;
      place-items:center;
      color:#9AB5D0;
      background:#102038;
      border:1px solid rgba(255,255,255,.05);
    }

    .payment-icon i,
    .payment-icon svg{
      width:17px;
      height:17px;
    }

    .payment-icon img{
      display:block;
      width:27px!important;
      height:27px!important;
      max-width:27px!important;
      max-height:27px!important;
      object-fit:contain;
    }

    .payment-copy{
      min-width:0;
    }

    .payment-copy strong,
    .payment-copy > span{
      display:block;
    }

    .payment-copy strong{
      margin-bottom:3px;
      font-size:13px;
      color:#F5F7FB;
    }

    .payment-copy > span,
    .payment-copy em{
      overflow:hidden;
      color:#74899F;
      font-size:11px;
      white-space:nowrap;
      text-overflow:ellipsis;
    }

    .payment-copy em{
      display:block;
      margin-top:3px;
      color:#91A7BD;
      font-style:normal;
    }

    .payment-empty{
      padding:14px;
      color:#8094AA;
      font-size:12px;
      text-align:center;
    }

    .payment-check{
      width:27px;
      height:27px;
      border-radius:50%;
      display:grid;
      place-items:center;
      color:transparent;
      border:1px solid rgba(135,155,190,.18);
    }

    .payment-option:has(input:checked) .payment-check{
      color:#fff;
      background:#1266C3;
      border-color:#287DD8;
    }

    .payment-check i,
    .payment-check svg{
      width:14px;
      height:14px;
    }

    .promo-form{
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      gap:8px;
      padding:8px;
    }

    .promo-form input{
      min-width:0;
      height:40px;
      padding:0 10px;
      border:0;
      outline:0;
      color:#F5F7FB;
      background:transparent;
    }

    .promo-form input::placeholder{color:#60758B}

    .promo-form button{
      padding:0 13px;
      border:1px solid rgba(75,140,207,.18);
      border-radius:11px;
      color:#BFD8F1;
      background:#102038;
      font-size:12px;
      font-weight:800;
      cursor:pointer;
    }

    .checkout-summary{
      padding:14px;
    }

    .checkout-summary h2{
      margin-bottom:13px;
    }

    .checkout-summary > div{
      display:flex;
      justify-content:space-between;
      gap:16px;
      margin-top:9px;
      color:#8094AA;
      font-size:12px;
    }

    .checkout-summary > div strong{
      color:#DCE8F5;
    }

    .checkout-summary .checkout-total{
      margin-top:13px;
      padding-top:12px;
      border-top:1px solid rgba(255,255,255,.07);
      color:#F5F7FB;
      font-weight:800;
    }

    .checkout-summary .checkout-total strong{
      color:#fff;
      font-size:15px;
    }

    .checkout-paybar{
      position:fixed;
      left:50%;
      bottom:0;
      z-index:30;
      transform:translateX(-50%);
      width:min(100%,480px);
      min-height:82px;
      padding:10px 18px calc(10px + env(safe-area-inset-bottom));
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      background:rgba(8,17,31,.97);
      border-top:1px solid rgba(255,255,255,.07);
      backdrop-filter:blur(18px);
    }

    .checkout-paybar > div{
      min-width:0;
    }

    .checkout-paybar span,
    .checkout-paybar strong{
      display:block;
    }

    .checkout-paybar span{
      margin-bottom:3px;
      color:#71869C;
      font-size:10px;
    }

    .checkout-paybar strong{
      color:#fff;
      font-size:15px;
    }

    .checkout-paybar button,
    .checkout-paybar a{
      height:46px;
      padding:0 15px;
      border:1px solid rgba(255,255,255,.16);
      border-radius:14px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:7px;
      color:#fff;
      background:linear-gradient(145deg,#0B4FAF,#1670D8 52%,#0D4E9B);
      font-size:12px;
      font-weight:850;
      cursor:pointer;
      text-decoration:none;
    }

    .checkout-paybar a.disabled,
    .checkout-paybar button.disabled{
      opacity:.45;
      pointer-events:none;
      cursor:not-allowed;
    }

    .checkout-paybar button i,
    .checkout-paybar button svg,
    .checkout-paybar a i,
    .checkout-paybar a svg{
      width:16px;
      height:16px;
    }

    .manual-checkout-app{padding-bottom:30px}

    /* Standalone payment screen */
    .payment-page{min-height:100vh;color:#EEF5FC;background:#07111F;font-family:Inter,system-ui,sans-serif}.payment-shell{width:min(100%,480px);min-height:100vh;margin:auto;padding:18px 18px 42px;background:#081321}.payment-header{height:54px;display:flex;align-items:center;gap:12px}.payment-header>a{width:42px;height:42px;display:grid;place-items:center;border:1px solid #ffffff12;border-radius:13px;color:#BBD0E4;background:#102238}.payment-header>a svg{width:19px}.payment-header>div{flex:1;display:grid;gap:3px}.payment-header strong{font-size:16px}.payment-header span{color:#7790A8;font-size:10px}.payment-header>svg{width:20px;color:#5ED5A0}.payment-hero{margin-top:16px;padding:22px;border:1px solid #ffffff12;border-radius:22px;background:linear-gradient(145deg,#10253D,#0B1A2C);text-align:center}.payment-state{width:max-content;margin:0 auto 18px;padding:7px 10px;display:flex;align-items:center;gap:6px;border-radius:9px;color:#FFD782;background:#4B3A172e;font-size:10px;font-weight:800}.payment-state svg{width:14px}.payment-state.paid{color:#9CE6BD;background:#123B27}.payment-hero>small{color:#7890A8;font-size:10px}.payment-hero h1{margin:5px 0 8px;font-size:32px;letter-spacing:-.03em}.payment-hero>p{margin:0;color:#A7BACB;font-size:12px}.payment-hero>div{margin-top:18px;padding-top:14px;border-top:1px solid #ffffff10;display:flex;justify-content:space-between;gap:12px;color:#7890A8;font-size:10px}.payment-hero>div b{color:#C8DAEA;text-align:right}.payment-action-card{margin-top:14px;padding:20px;border:1px solid #ffffff12;border-radius:20px;background:#0C1B2D}.payment-qr{display:grid;justify-items:center;text-align:center}.payment-qr>span,.payment-number>span,.payment-guide>div>span{color:#5BAAF5;font-size:9px;font-weight:850;letter-spacing:.1em}.payment-qr img{width:220px;height:220px;margin:14px 0 10px;padding:12px;border-radius:16px;object-fit:contain;background:#fff}.payment-qr p{margin:0;color:#7890A8;font-size:10px}.payment-number{text-align:center}.payment-number strong{display:block;margin:13px 0;font-size:25px;letter-spacing:.04em;overflow-wrap:anywhere}.payment-number button{height:42px;padding:0 16px;border:1px solid #368DE34d;border-radius:12px;display:inline-flex;align-items:center;gap:7px;color:#B9DDFF;background:#12365A;font-size:11px;font-weight:800}.payment-number button svg{width:15px}.payment-expiry{margin-top:18px;padding:12px;display:flex;align-items:center;gap:10px;border-radius:12px;color:#E7BE68;background:#3B2B101f}.payment-expiry>svg{width:19px}.payment-expiry div{display:grid;gap:2px}.payment-expiry span{color:#9B8761;font-size:9px}.payment-expiry strong{font-size:11px}.payment-guide{margin-top:14px;padding:20px;border:1px solid #ffffff10;border-radius:20px;background:#0A1828}.payment-guide h2{margin:5px 0 0;font-size:16px}.payment-guide ol{margin:18px 0 0;padding:0;display:grid;gap:13px;list-style:none}.payment-guide li{display:flex;align-items:flex-start;gap:11px;color:#8FA5B8;font-size:11px;line-height:1.55}.payment-guide li>b{width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:8px;color:#8DC8FF;background:#112F4D;font-size:9px}.payment-shell>footer{margin-top:18px;padding:15px 3px;display:grid;justify-items:center;gap:4px;color:#698096;font-size:9px}.payment-shell>footer strong{color:#AFC3D6;font-size:11px}.payment-finished{height:50px;margin-top:14px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:14px;color:#fff;background:#1769C7;font-size:11px;font-weight:850;text-decoration:none}.payment-finished svg{width:16px}#payment-toast{position:fixed;left:50%;bottom:24px;z-index:50;padding:11px 15px;border-radius:10px;color:#D9F8E6;background:#143825;font-size:10px;opacity:0;pointer-events:none;transform:translate(-50%,10px);transition:.2s}#payment-toast.show{opacity:1;transform:translate(-50%,0)}
    @media(max-width:520px){.payment-shell{padding:14px 14px 34px}.payment-hero{padding:20px 16px}.payment-qr img{width:min(220px,72vw);height:min(220px,72vw)}}

    /* Payment page refinement */
    .payment-page{background:#050D18}.payment-shell{width:min(100%,430px);padding:14px 16px 40px;background:#071321}.payment-header{height:64px;padding:0 2px;border-bottom:1px solid rgba(255,255,255,.055)}.payment-header>a{width:40px;height:40px;border-radius:12px;background:#0D2035}.payment-header strong{font-size:15px;letter-spacing:-.01em}.payment-header span{font-size:9px}.payment-header>svg{width:19px;height:19px;margin-right:6px}.payment-hero{margin-top:14px;padding:18px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:0 12px;border-color:rgba(106,148,191,.15);border-radius:18px;background:linear-gradient(145deg,#0E2137,#0A192A);text-align:left;box-shadow:0 14px 34px rgba(0,0,0,.12)}.payment-state{grid-column:2;grid-row:1/4;align-self:start;margin:0;padding:6px 8px;border-radius:8px;font-size:9px}.payment-state svg{width:13px;height:13px}.payment-hero>small{grid-column:1;margin-top:1px;font-size:9px}.payment-hero h1{grid-column:1;margin:4px 0 5px;font-size:28px;line-height:1}.payment-hero>p{grid-column:1;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.payment-hero>div{grid-column:1/-1;margin-top:16px;padding-top:12px;font-size:9px}.payment-hero>div b{max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.payment-action-card{margin-top:12px;padding:18px;border-color:rgba(106,148,191,.14);border-radius:18px;background:#0A1A2C;box-shadow:0 14px 34px rgba(0,0,0,.1)}.payment-qr>span,.payment-number>span,.payment-guide>div>span{font-size:8px;letter-spacing:.12em}.payment-qr img{width:184px;height:184px;margin:12px 0 9px;padding:10px;border-radius:13px;box-shadow:0 8px 24px rgba(0,0,0,.2)}.payment-qr p{font-size:9px}.payment-expiry{margin-top:15px;padding:11px 12px;border:1px solid rgba(225,181,86,.08);border-radius:11px;background:rgba(61,43,14,.28)}.payment-expiry>svg{width:17px;height:17px}.payment-expiry span{font-size:8px}.payment-expiry strong{font-size:10px}.payment-number strong{font-size:22px}.payment-guide{margin-top:12px;padding:18px;border-radius:18px}.payment-guide h2{font-size:15px}.payment-guide ol{margin-top:15px;gap:11px}.payment-shell>footer{margin-top:12px;padding:13px 3px}.payment-finished{border-radius:12px}
    @media(max-width:390px){.payment-shell{padding:10px 12px 32px}.payment-hero{padding:16px}.payment-qr img{width:174px;height:174px}}@media(max-width:330px){.payment-state{grid-column:1/-1;grid-row:auto;width:max-content;margin-bottom:14px}.payment-hero>small,.payment-hero h1,.payment-hero>p{grid-column:1/-1}}

    /* Edit profile refinement */
    .edit-profile-page{width:min(100%,430px);padding:0 16px 36px}.edit-profile-page .course-detail-header{height:70px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.055)}.edit-profile-page .course-back{width:40px;height:40px;border-radius:12px;background:#0D2035}.edit-profile-page .checkout-secure{width:40px;height:40px;border-radius:12px}.edit-profile-page .course-detail-titlebar strong{font-size:15px}.edit-profile-page .course-detail-titlebar span{margin-top:3px;color:#7890A8;font-size:10px}.profile-edit-form{margin-top:14px;padding:18px;gap:16px;border-color:rgba(106,148,191,.14);border-radius:18px;background:#0A192A;box-shadow:0 16px 38px rgba(0,0,0,.12)}.profile-avatar-edit{grid-template-columns:64px minmax(0,1fr) auto;justify-items:stretch;align-items:center;gap:12px;padding:14px;border:1px solid rgba(117,159,201,.14);border-radius:14px;background:#0D2034;text-align:left}.profile-avatar-preview{width:64px;height:64px;border-radius:20px;font-size:21px;box-shadow:0 8px 20px rgba(17,95,207,.2)}.profile-avatar-copy{min-width:0;display:grid;gap:4px}.profile-avatar-edit .profile-avatar-copy strong{margin:0;overflow:hidden;color:#EDF5FC;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.profile-avatar-edit .profile-avatar-copy small{color:#7189A0;font-size:9px;line-height:1.4}.profile-avatar-action{height:34px;padding:0 10px;display:flex;align-items:center;gap:6px;border:1px solid rgba(67,146,224,.25);border-radius:10px;color:#9DCDFA!important;background:#123252;font-size:9px!important;font-weight:850!important}.profile-avatar-action svg{width:13px;height:13px}.profile-fields-title{padding:3px 0 0}.profile-fields-title span{color:#58A9F3;font-size:8px;font-weight:850;letter-spacing:.1em}.profile-fields-title p{margin:5px 0 0;color:#70869B;font-size:9px;line-height:1.5}.profile-edit-form label:not(.profile-avatar-edit){gap:7px}.profile-edit-form label:not(.profile-avatar-edit)>span:first-child{padding-left:2px;color:#9FB4C8;font-size:10px}.profile-input-wrap{position:relative;display:block!important}.profile-input-wrap>svg{position:absolute;left:14px;top:50%;z-index:1;width:16px;height:16px;color:#64809B;transform:translateY(-50%);pointer-events:none}.profile-edit-form .profile-input-wrap input{height:49px;padding:0 14px 0 42px;border-color:rgba(117,151,188,.14);border-radius:12px;color:#F2F7FC;background:#081522;font-size:12px;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.profile-edit-form .profile-input-wrap input:hover{border-color:rgba(117,151,188,.25)}.profile-edit-form .profile-input-wrap input:focus{border-color:#347FD0;background:#091929;box-shadow:0 0 0 3px rgba(52,127,208,.1)}.profile-input-wrap:focus-within>svg{color:#72B6F5}.profile-edit-form .manual-submit-button{height:49px;margin-top:2px;border:1px solid rgba(94,170,247,.22);border-radius:12px;background:linear-gradient(135deg,#2178D9,#155EB7);box-shadow:0 10px 24px rgba(16,91,178,.22);font-size:11px}.profile-edit-form .manual-submit-button:hover{filter:brightness(1.08)}.profile-form-message{margin:12px 0 0!important}
    @media(max-width:380px){.edit-profile-page{padding-inline:12px}.profile-edit-form{padding:15px}.profile-avatar-edit{grid-template-columns:56px minmax(0,1fr) auto;padding:12px;gap:10px}.profile-avatar-preview{width:56px;height:56px;border-radius:17px}.profile-avatar-action{width:34px;padding:0;justify-content:center}.profile-avatar-action{font-size:0!important}.profile-avatar-action svg{width:15px;height:15px}}

    /* Flat profile form: controls provide structure without nested cards. */
    .profile-edit-form{margin-top:0;padding:18px 0 0;border:0;border-radius:0;background:transparent;box-shadow:none}.profile-avatar-edit{padding:4px 2px 18px;border:0;border-bottom:1px solid rgba(255,255,255,.07);border-radius:0;background:transparent}.profile-fields-title{padding-top:2px}.profile-edit-form .manual-submit-button{margin-top:6px}@media(max-width:380px){.profile-edit-form{padding:15px 0 0}.profile-avatar-edit{padding:2px 0 16px}}

    /* Minimal account fields */
    .profile-edit-form{gap:14px}.profile-avatar-preview{width:58px;height:58px;border-radius:17px;font-size:18px}.profile-avatar-edit{grid-template-columns:58px minmax(0,1fr) auto;gap:11px}.profile-avatar-action{height:32px;padding:0 9px;border:0;color:#87BFF3!important;background:#0E2943}.profile-avatar-edit .profile-avatar-copy strong{font-size:11px}.profile-avatar-edit .profile-avatar-copy small{font-size:8px}.profile-fields-title{margin-top:1px}.profile-fields-title span{font-size:8px}.profile-fields-title p{margin-top:4px}.profile-edit-form label:not(.profile-avatar-edit){gap:5px}.profile-edit-form label:not(.profile-avatar-edit)>span:first-child{color:#8FA6BA;font-size:9px;font-weight:700}.profile-edit-form .profile-input-wrap input{height:44px;padding:0 8px 0 34px;border:0;border-bottom:1px solid rgba(117,151,188,.18);border-radius:0;color:#EAF2FA;background:transparent;font-size:12px;font-weight:500;box-shadow:none}.profile-input-wrap>svg{left:7px;width:15px;height:15px}.profile-edit-form .profile-input-wrap input:hover{border-color:rgba(113,174,230,.38)}.profile-edit-form .profile-input-wrap input:focus{border-color:#3E91DE;background:rgba(12,31,50,.42);box-shadow:0 2px 0 rgba(62,145,222,.15)}.profile-edit-form .manual-submit-button{height:46px;margin-top:9px;border-radius:11px;font-weight:800;box-shadow:0 8px 20px rgba(16,91,178,.17)}@media(max-width:380px){.profile-avatar-edit{grid-template-columns:54px minmax(0,1fr) 32px}.profile-avatar-preview{width:54px;height:54px}.profile-edit-form{gap:13px}}

    /* WhatsApp-inspired profile layout */
    .edit-profile-page{width:min(100%,420px);background:#07131F}.edit-profile-page .course-detail-header{border-bottom:0}.edit-profile-page .course-back{border:0;background:transparent}.edit-profile-page .checkout-secure{border:0;color:#22C98B;background:transparent}.profile-edit-form{padding-top:8px;gap:0}.profile-avatar-edit{position:relative;grid-template-columns:1fr;justify-items:center;gap:7px;padding:8px 0 24px;border-bottom:1px solid rgba(255,255,255,.065);text-align:center}.profile-avatar-preview{width:94px;height:94px;border-radius:50%;font-size:28px;background:linear-gradient(145deg,#21C995,#118866);box-shadow:none}.profile-avatar-copy{justify-items:center}.profile-avatar-edit .profile-avatar-copy strong{font-size:11px}.profile-avatar-edit .profile-avatar-copy small{font-size:8px}.profile-avatar-action{position:absolute;left:calc(50% + 25px);top:67px;width:31px;height:31px;padding:0;display:grid;place-items:center;border:3px solid #07131F;border-radius:50%;color:#fff!important;background:#20B987}.profile-avatar-action svg{width:14px;height:14px}.profile-fields-title{padding:18px 5px 9px}.profile-fields-title span{color:#20C98B}.profile-fields-title p{display:none}.profile-edit-form label:not(.profile-avatar-edit){position:relative;padding:0 4px 0 38px;gap:0}.profile-edit-form label:not(.profile-avatar-edit)>span:first-child{padding:13px 0 0;color:#20B987;font-size:8px}.profile-input-wrap{position:static}.profile-input-wrap>svg{left:7px;top:29px;width:18px;height:18px;color:#7890A5}.profile-edit-form .profile-input-wrap input{height:42px;padding:0 4px;border-bottom-color:rgba(255,255,255,.075);font-size:12px}.profile-edit-form .profile-input-wrap input:focus{border-color:#20B987;background:transparent;box-shadow:none}.profile-input-wrap:focus-within>svg{color:#20C98B}.profile-edit-form .manual-submit-button{height:46px;margin:22px 4px 0;border:0;border-radius:23px;background:#20B987;box-shadow:none;color:#042017}.profile-edit-form .manual-submit-button:hover{background:#25C493;filter:none}@media(max-width:380px){.profile-avatar-edit{grid-template-columns:1fr}.profile-avatar-preview{width:88px;height:88px}.profile-avatar-action{left:calc(50% + 22px);top:63px}.profile-edit-form{gap:0}}

    /* RoboEdutrade colors and readable profile type scale */
    .edit-profile-page .checkout-secure{color:#67B8FF}.edit-profile-page .course-detail-titlebar strong{font-size:17px}.edit-profile-page .course-detail-titlebar span{font-size:12px}.profile-avatar-preview{background:linear-gradient(145deg,#2588EE,#1763C5)}.profile-avatar-action{background:#2583E8}.profile-avatar-edit .profile-avatar-copy strong{font-size:14px}.profile-avatar-edit .profile-avatar-copy small{font-size:10px}.profile-fields-title{padding-top:20px}.profile-fields-title span{color:#65B2F8;font-size:10px}.profile-edit-form label:not(.profile-avatar-edit)>span:first-child{padding-top:15px;color:#9FB5C9;font-size:11px}.profile-input-wrap>svg{top:35px;color:#728DA7}.profile-edit-form .profile-input-wrap input{height:46px;font-size:14px}.profile-edit-form .profile-input-wrap input:focus{border-color:#378FE5}.profile-input-wrap:focus-within>svg{color:#66B7FA}.profile-edit-form .manual-submit-button{height:48px;background:linear-gradient(135deg,#2688ED,#1766C2);color:#fff;font-size:13px}.profile-edit-form .manual-submit-button:hover{background:linear-gradient(135deg,#3295F5,#1B70CE)}

    .manual-payment-warning,
    .manual-payment-error{
      margin-top:12px;
      padding:11px 12px;
      display:flex;
      align-items:flex-start;
      gap:8px;
      border-radius:13px;
      font-size:11px;
      line-height:1.45;
    }

    .manual-payment-warning{color:#EAC886;background:#2A2111;border:1px solid rgba(234,200,134,.12)}
    .manual-payment-error{color:#FFC1C1;background:#2B1518;border:1px solid rgba(255,120,120,.13)}
    .manual-payment-warning svg,
    .manual-payment-error svg{width:16px;height:16px;flex:0 0 auto}

    .manual-account{
      padding:13px;
      display:grid;
      grid-template-columns:42px minmax(0,1fr) 38px;
      gap:11px;
      align-items:center;
    }

    .manual-payment-methods{display:grid;gap:10px}
    label.manual-account{cursor:pointer}
    .manual-account.active{border-color:rgba(74,154,255,.55);box-shadow:0 0 0 3px rgba(74,154,255,.08)}
    .manual-account > input[type="radio"]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

    .manual-account-icon,
    .manual-account > button{
      width:40px;
      height:40px;
      display:grid;
      place-items:center;
      border-radius:12px;
      color:#8FC4FF;
      background:#10243D;
      border:1px solid rgba(135,155,190,.1);
    }

    .manual-account > button{width:38px;height:38px;padding:0;cursor:pointer}
    .manual-account svg{width:17px;height:17px}
    .manual-account > div{min-width:0}
    .manual-account small,
    .manual-account strong,
    .manual-account b{display:block}
    .manual-account small{color:#72889E;font-size:10px}
    .manual-account strong{margin:2px 0;color:#DCE8F5;font-size:12px}
    .manual-account b{margin:4px 0;color:#fff;font-size:18px;letter-spacing:.4px;overflow-wrap:anywhere}
    .manual-account em{display:block;margin-top:7px;color:#91A7BD;font-style:normal;font-size:10px;line-height:1.45}

    .manual-payment-form{padding:13px}
    .manual-proof-upload{
      min-height:112px;
      padding:14px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:5px;
      text-align:center;
      border:1px dashed rgba(85,153,225,.35);
      border-radius:14px;
      color:#AFC7DE;
      background:#0B1728;
      cursor:pointer;
    }

    .manual-proof-upload > span{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;color:#76B7FA;background:#112A47}
    .manual-proof-upload svg{width:17px;height:17px}
    .manual-proof-upload strong{font-size:12px;overflow-wrap:anywhere}
    .manual-proof-upload small{color:#687F96;font-size:10px}
    .manual-proof-upload input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

    .manual-note{display:block;margin-top:13px}
    .manual-note > span{display:block;margin-bottom:6px;color:#AFC0D2;font-size:11px;font-weight:700}
    .manual-note > span small{color:#667D94;font-weight:500}
    .manual-note textarea{width:100%;padding:10px 11px;resize:vertical;outline:0;border:1px solid rgba(135,155,190,.12);border-radius:12px;color:#EAF2FB;background:#091525;font:inherit;font-size:11px;line-height:1.5}
    .manual-note textarea:focus{border-color:rgba(68,143,221,.5)}

    .manual-submit-button,
    .manual-whatsapp-button,
    .manual-back-button{
      width:100%;
      min-height:46px;
      margin-top:13px;
      padding:0 14px;
      border:0;
      border-radius:14px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:7px;
      color:#fff;
      background:linear-gradient(145deg,#0B4FAF,#1670D8 52%,#0D4E9B);
      text-decoration:none;
      font:inherit;
      font-size:12px;
      font-weight:850;
      cursor:pointer;
    }

    .manual-submit-button:disabled{opacity:.45;cursor:not-allowed}
    .manual-submit-button svg,
    .manual-whatsapp-button svg{width:16px;height:16px}

    .manual-payment-success{margin-top:18px;padding:26px 18px;text-align:center}
    .manual-payment-success > span{width:52px;height:52px;margin:0 auto 13px;display:grid;place-items:center;border-radius:17px;color:#EAC886;background:#2A2111}
    .manual-payment-success > span svg{width:23px;height:23px}
    .manual-payment-success h1{margin:0 0 8px;color:#fff;font-size:18px}
    .manual-payment-success p{margin:0;color:#8298AE;font-size:11px;line-height:1.6}
    .manual-payment-success > div{margin-top:16px;padding:11px;border-radius:12px;background:#091525}
    .manual-payment-success > div small,
    .manual-payment-success > div strong{display:block}
    .manual-payment-success > div small{margin-bottom:3px;color:#6C8298;font-size:10px}
    .manual-payment-success > div strong{color:#DCE8F5;font-size:13px}
    .manual-whatsapp-button{background:#168C55}
    .manual-back-button{min-height:40px;margin-top:8px;color:#92A8BD;background:transparent;border:1px solid rgba(135,155,190,.1)}

    .manual-copy-toast{
      position:fixed;
      left:50%;
      bottom:20px;
      z-index:80;
      padding:10px 13px;
      border-radius:12px;
      color:#BCEAD5;
      background:#10271F;
      font-size:11px;
      opacity:0;
      pointer-events:none;
      transform:translate(-50%,10px);
      transition:opacity .2s ease,transform .2s ease;
    }

    .manual-copy-toast.show{opacity:1;transform:translate(-50%,0)}
    .compact-button{min-height:34px!important;padding:0 10px!important;font-size:11px!important;white-space:nowrap}

    .auth-app{
      width:min(100%,440px);
      padding:26px 20px 32px;
    }

    .auth-panel{
      margin-top:0;
    }

    .auth-panel[hidden]{
      display:none;
    }

    .auth-panel.active{
      animation:authPanelIn .24s ease both;
    }

    .login-brand{
      margin-bottom:28px;
      font-size:20px;
      font-weight:900;
      letter-spacing:-.5px;
      color:#fff;
      background:linear-gradient(180deg,#fff,#AFC9E3);
      -webkit-background-clip:text;
      background-clip:text;
      -webkit-text-fill-color:transparent;
    }

    @keyframes authPanelIn{
      from{opacity:0;transform:translateY(5px)}
      to{opacity:1;transform:translateY(0)}
    }

    .auth-heading{
      margin-bottom:24px;
    }

    .auth-heading h1{
      margin:0 0 8px;
      color:#fff;
      font-size:26px;
      line-height:1.18;
      letter-spacing:-.55px;
    }

    .auth-heading p{
      max-width:360px;
      margin:0;
      color:#8195AA;
      font-size:13px;
      line-height:1.55;
    }

    .auth-form{
      display:flex;
      flex-direction:column;
      gap:15px;
    }

    .auth-message{
      display:flex;
      align-items:flex-start;
      gap:9px;
      margin:0 0 16px;
      padding:11px 13px;
      border:1px solid;
      border-radius:13px;
      font-size:11px;
      line-height:1.45;
    }

    .auth-message svg{width:15px;height:15px;flex:0 0 auto;margin-top:1px}
    .auth-message.error{color:#FFC2CB;border-color:rgba(244,100,121,.24);background:rgba(108,27,42,.32)}
    .auth-message.success{color:#BCEAD5;border-color:rgba(105,198,157,.2);background:#10271F}

    .auth-field{
      display:block;
    }

    .auth-field > span:first-child{
      display:flex;
      align-items:center;
      gap:6px;
      margin-bottom:7px;
      color:#DCE7F2;
      font-size:12px;
      font-weight:750;
    }

    .auth-field small{
      color:#657B91;
      font-size:10px;
      font-weight:600;
    }

    .auth-input-wrap{
      min-height:50px;
      padding:0 13px;
      border:1px solid rgba(135,155,190,.12);
      border-radius:15px;
      display:grid;
      grid-template-columns:19px minmax(0,1fr);
      gap:10px;
      align-items:center;
      color:#6F849A;
      background:#0D1A2C;
      transition:border-color .18s ease,background .18s ease;
    }

    .auth-password-wrap{
      grid-template-columns:19px minmax(0,1fr) 36px;
      padding-right:7px;
    }

    .auth-input-wrap:focus-within{
      color:#8DBDEB;
      background:#0E1D31;
      border-color:rgba(58,135,213,.48);
    }

    .auth-input-wrap > i,
    .auth-input-wrap > svg{
      width:18px;
      height:18px;
    }

    .auth-input-wrap input{
      width:100%;
      min-width:0;
      height:48px;
      padding:0;
      border:0;
      outline:0;
      color:#F5F7FB;
      background:transparent;
      font-size:13px;
    }

    .auth-input-wrap input::placeholder{
      color:#586E84;
    }

    .password-toggle{
      width:36px;
      height:36px;
      padding:0;
      border:0;
      border-radius:11px;
      display:grid;
      place-items:center;
      color:#8197AD;
      background:transparent;
      cursor:pointer;
    }

    .password-toggle:hover{
      color:#D7E6F5;
      background:#14263C;
    }

    .password-toggle i,
    .password-toggle svg{
      width:17px;
      height:17px;
      grid-area:1/1;
    }

    .password-toggle .eye-closed{
      display:none;
    }

    .password-toggle.showing .eye-open{
      display:none;
    }

    .password-toggle.showing .eye-closed{
      display:block;
    }

    .auth-submit{
      width:100%;
      height:50px;
      margin-top:3px;
      padding:0 16px;
      border:1px solid rgba(255,255,255,.16);
      border-radius:15px;
      color:#fff;
      background:linear-gradient(145deg,#0B4FAF,#1670D8 52%,#0D4E9B);
      font-size:13px;
      font-weight:850;
      cursor:pointer;
    }

    .auth-reset{
      margin-top:-5px;
      text-align:left;
      color:#71869C;
      font-size:11px;
    }

    .auth-reset a,
    .auth-switch a{
      color:#74B7F7;
      font-weight:750;
      text-decoration:none;
    }

    .auth-switch{
      margin:20px 0 0;
      text-align:center;
      color:#71869C;
      font-size:12px;
    }

    .auth-toast{
      position:fixed;
      left:50%;
      bottom:20px;
      z-index:80;
      width:min(calc(100% - 36px),404px);
      padding:12px 14px;
      border:1px solid rgba(105,198,157,.14);
      border-radius:14px;
      color:#BCEAD5;
      background:#10271F;
      font-size:12px;
      line-height:1.4;
      text-align:center;
      opacity:0;
      pointer-events:none;
      transform:translate(-50%,12px);
      transition:opacity .2s ease,transform .2s ease;
    }

    .auth-toast.show{
      opacity:1;
      transform:translate(-50%,0);
    }


    /* Card typography: maximum 12px */
    .hero-card,
    .course-card,
    .owned-card,
    .mentor-card,
    .membership-card{
      font-size:10px;
    }

    .hero-card *,
    .course-card *,
    .owned-card *,
    .mentor-card *,
    .membership-card *{
      font-size:min(10px, 1em);
    }

    .hero-title,
    .course-card-body h3,
    .course-price,
    .owned-title,
    .owned-badge,
    .owned-meta,
    .owned-progress-text,
    .mentor-name,
    .mentor-role,
    .mentor-rating,
    .mentor-course-kicker,
    .mentor-course-title,
    .mentor-course-meta,
    .membership-kicker,
    .membership-title,
    .membership-meta strong,
    .membership-meta span,
    .membership-chip,
    .membership-stat strong,
    .membership-stat span{
      font-size:12px !important;
    }

    .open-btn{
      font-size:11px !important;
    }

    @media (max-width:350px){
      .app{padding-left:12px;padding-right:12px}
      .hero-grid{gap:6px}
      .hero-card{min-height:102px;padding:9px 6px}
      .hero-title{font-size:14px}
      .open-btn{padding:4px 6px;font-size:14px}
    }

/* Katalog kursus dan produk digital */
.referral-data-section{
  margin-top:24px;
}

.referral-list-heading{
  align-items:center;
  margin-bottom:12px;
}

.referral-count-badge{
  min-width:32px;
  height:32px;
  padding:0 10px;
  border:1px solid rgba(75,160,255,.24);
  border-radius:11px;
  display:grid;
  place-items:center;
  background:#0e2239;
  color:#65b5ff;
  font-size:14px;
  font-weight:800;
}

.referral-user-list,
.referral-history-list{
  overflow:hidden;
  border:1px solid #1b344e;
  border-radius:18px;
  background:#0b1b2d;
}

.referral-user-row,
.referral-history-row{
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
}

.referral-user-row + .referral-user-row,
.referral-history-row + .referral-history-row{
  border-top:1px solid rgba(130,167,204,.12);
}

.referral-user-avatar{
  width:44px;
  height:44px;
  flex:0 0 44px;
  overflow:hidden;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#1769c8,#104487);
  color:#fff;
  font-size:16px;
  font-weight:900;
}

.referral-user-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.referral-user-copy,
.referral-history-copy{
  min-width:0;
  flex:1;
}

.referral-user-copy strong,
.referral-history-copy strong{
  display:block;
  overflow:hidden;
  color:#f4f8fc;
  font-size:14px;
  font-weight:800;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.referral-user-copy span,
.referral-history-copy span{
  display:block;
  margin-top:3px;
  overflow:hidden;
  color:#86a2bf;
  font-size:12px;
  line-height:1.4;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.referral-user-result,
.referral-history-amount{
  flex:0 0 auto;
  text-align:right;
}

.referral-user-result > strong,
.referral-history-amount > strong{
  display:block;
  color:#55d99c;
  font-size:13px;
  font-weight:900;
}

.referral-reward-status,
.referral-history-amount span{
  display:block;
  margin-top:4px;
  color:#8da7c2;
  font-size:11px;
  font-weight:700;
}

.referral-reward-status.status-approved{color:#55d99c}
.referral-reward-status.status-pending{color:#ffc85a}
.referral-reward-status.status-cancelled{color:#ff7c84}

.referral-history-icon{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  color:#55d99c;
  background:rgba(51,194,132,.11);
}

.referral-history-icon svg{width:18px;height:18px}

.referral-empty{
  padding:26px 18px;
  border:1px dashed #203c58;
  border-radius:18px;
  background:rgba(11,27,45,.66);
  text-align:center;
}

.referral-empty.compact{padding:22px 18px}
.referral-empty > span{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 10px;border-radius:14px;background:#102943;color:#64b5ff}
.referral-empty svg{width:20px;height:20px}
.referral-empty strong{display:block;color:#f4f8fc;font-size:15px}
.referral-empty p{max-width:290px;margin:6px auto 0;color:#88a4c0;font-size:13px;line-height:1.5}

.profile-balance-card{
  min-height:220px;
  padding:18px 18px 78px;
}

.profile-balance-card .membership-title{
  font-size:27px !important;
  letter-spacing:-.7px;
}

.profile-balance-card .membership-kicker{
  font-size:13px !important;
}

.profile-balance-card .membership-foot{
  margin-top:22px;
}

.profile-balance-card .membership-meta strong,
.profile-balance-card .membership-meta span{
  font-size:13px !important;
}

.profile-balance-card .membership-history-link{
  cursor:pointer;
  font-family:inherit;
  font-size:12px !important;
}

.profile-balance-card .membership-stat strong{
  font-size:13px !important;
}

.profile-balance-card .membership-stat span{
  font-size:12px !important;
}

@media (max-width:370px){
  .referral-user-row,.referral-history-row{padding:12px 11px;gap:9px}
  .referral-user-avatar{width:40px;height:40px;flex-basis:40px}
  .referral-history-icon{display:none}
  .referral-user-copy strong,.referral-history-copy strong{font-size:13px}
  .profile-balance-card{padding-left:15px;padding-right:15px}
  .profile-balance-card .membership-stat strong{font-size:12px !important}
}

.catalog-body{
  min-height:100vh;
  margin:0;
  background:#06111f;
  color:#f5f9ff;
  font-family:"Inter",sans-serif;
}

.catalog-page{
  width:min(100%,960px);
  min-height:100vh;
  margin:0 auto;
  padding:0 22px 48px;
  box-sizing:border-box;
}

.catalog-header{
  position:sticky;
  z-index:20;
  top:0;
  display:flex;
  align-items:center;
  gap:14px;
  padding:22px 0 18px;
  background:linear-gradient(180deg,#06111f 78%,rgba(6,17,31,0));
}

.catalog-header h1{margin:0}
.catalog-header h1{font-size:21px;line-height:1.25;font-weight:800;letter-spacing:-.02em}
.catalog-header>div{min-width:0;flex:1}
.catalog-cart{position:relative;width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;border:1px solid #1b3652;border-radius:14px;background:#0d2238;color:#d8eaff;cursor:pointer}
.catalog-cart>svg{width:20px;height:20px}

.catalog-back{
  width:44px;
  height:44px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border:1px solid #1b3652;
  border-radius:14px;
  background:#0d2238;
  color:#d8eaff;
}

.catalog-back svg,
.catalog-search svg,
.catalog-card-footer svg,
.catalog-empty svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.catalog-toolbar{
  padding:6px 0 22px;
  border-bottom:1px solid #14283d;
}

.catalog-search{
  height:52px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 16px;
  border:1px solid #1a3857;
  border-radius:15px;
  background:#0b1d30;
  color:#7592af;
  transition:border-color .2s,box-shadow .2s;
}

.catalog-search:focus-within{border-color:#2c85e6;box-shadow:0 0 0 3px rgba(44,133,230,.12)}
.catalog-search svg{width:20px;height:20px;flex:0 0 auto}
.catalog-search input{width:100%;border:0;outline:0;background:transparent;color:#f5f9ff;font:500 14px/1.4 "Inter",sans-serif}
.catalog-search input::placeholder{color:#6f849d}
.catalog-search input::-webkit-search-cancel-button{filter:invert(1);opacity:.55}

.catalog-filters{display:flex;gap:9px;margin-top:14px;overflow-x:auto;scrollbar-width:none}
.catalog-filters::-webkit-scrollbar{display:none}
.catalog-filter{height:38px;padding:0 14px;border:1px solid #1a3652;border-radius:999px;background:#0b1c2e;color:#9eb2c9;font:700 12px/1 "Inter",sans-serif;white-space:nowrap;cursor:pointer}
.catalog-filter span{margin-left:5px;color:#718aa4}
.catalog-filter.is-active{border-color:#2785ed;background:#1973d5;color:#fff;box-shadow:0 7px 18px rgba(20,112,215,.22)}
.catalog-filter.is-active span{color:#d9ecff}

.catalog-result-head{display:flex;align-items:center;justify-content:space-between;padding:24px 1px 15px}
.catalog-result-head h2{margin:0;font-size:16px;font-weight:800}
.catalog-result-head span{color:#829bb8;font-size:12px;font-weight:600}

.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.catalog-card{min-width:0;overflow:hidden;border:1px solid #172f48;border-radius:18px;background:#0b1c2e;color:inherit;transition:transform .2s,border-color .2s,box-shadow .2s}
.catalog-card:hover{transform:translateY(-3px);border-color:#285781;box-shadow:0 16px 35px rgba(0,0,0,.24)}
.catalog-card[hidden]{display:none}
.catalog-cover{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#102841;color:inherit;text-decoration:none}
.catalog-cover img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .3s}
.catalog-card:hover .catalog-cover img{transform:scale(1.035)}
.catalog-type{position:absolute;top:11px;left:11px;padding:6px 9px;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:rgba(5,18,32,.84);color:#e8f3ff;font-size:10px;font-weight:800;line-height:1;backdrop-filter:blur(8px)}
.catalog-type--digital{background:rgba(18,78,65,.9);color:#73f3cb}
.catalog-card-body{padding:15px}
.catalog-card-copy{display:block;color:inherit;text-decoration:none}
.catalog-mentor{display:block;overflow:hidden;color:#4c9df2;font-size:11px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.catalog-card h3{min-height:40px;margin:7px 0 6px;font-size:15px;line-height:1.35;font-weight:800;letter-spacing:-.01em}
.catalog-card p{display:-webkit-box;min-height:36px;margin:0;overflow:hidden;color:#849bb5;font-size:12px;line-height:1.5;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.catalog-meta{display:block;margin-top:11px;color:#a9bed5;font-size:11px;font-weight:600}
.catalog-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:13px;border-top:1px solid #162d44}
.catalog-card-footer strong{color:#fff;font-size:15px;font-weight:800}
.catalog-add-cart{width:36px;height:36px;display:grid;place-items:center;border:1px solid #28577f;border-radius:11px;background:#12385e;color:#66b3ff;cursor:pointer;transition:.18s ease}
.catalog-add-cart:hover{border-color:#3f8bd1;background:#18508a;color:#fff}
.catalog-add-cart svg{width:17px;height:17px}

.catalog-empty{padding:55px 20px;text-align:center;color:#839bb5}
.catalog-empty span{width:54px;height:54px;display:grid;place-items:center;margin:0 auto 15px;border-radius:17px;background:#0e263e;color:#61aefb}
.catalog-empty h2{margin:0 0 7px;color:#edf6ff;font-size:17px}
.catalog-empty p{margin:0;font-size:13px}

@media (max-width:720px){
  .catalog-grid{grid-template-columns:1fr;gap:14px}
}

@media (max-width:430px){
  .catalog-page{padding:0 16px 38px}
  .catalog-header{padding-top:17px}
  .catalog-header h1{font-size:19px}
  .catalog-back{width:42px;height:42px;border-radius:13px}
  .catalog-toolbar{padding-top:3px;padding-bottom:18px}
  .catalog-search{height:49px}
  .catalog-result-head{padding-top:20px}
  .catalog-card{border-radius:16px}
  .catalog-card-body{padding:12px}
  .catalog-card h3{min-height:38px;font-size:14px}
  .catalog-card p{font-size:11px}
  .catalog-meta{font-size:10px}
  .catalog-card-footer strong{font-size:14px}
}

@media (max-width:430px){.catalog-cover{aspect-ratio:16/8}.catalog-cart{width:42px;height:42px;border-radius:13px}}

/* Digital market pada beranda */
.digital-market-section{margin-top:28px}
.digital-kicker{display:block;margin-bottom:5px;color:#58adff;font-size:11px;font-weight:850;letter-spacing:.09em}
.digital-product-scroll{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.digital-product-card{min-width:0;color:#eef5fb;text-decoration:none}
.digital-cover{position:relative;aspect-ratio:1/1;overflow:hidden;border:1px solid rgba(100,170,236,.12);border-radius:15px;display:grid;place-items:center;color:#75baff;background:linear-gradient(145deg,#102b49,#0d1d31)}
.digital-cover img{width:100%;height:100%;object-fit:cover}
.digital-cover>svg{width:31px}
.digital-cover>span{position:absolute;left:9px;top:9px;padding:5px 8px;border-radius:7px;color:#cce9ff;background:rgba(7,27,46,.92);font-size:10px;font-weight:850}
.digital-product-card>div:last-child{padding:11px 2px 2px}
.digital-product-card small{display:block;overflow:hidden;color:#8299b0;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.digital-product-card h3{margin:5px 0 8px;overflow:hidden;color:#f4f8fc;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:1.35}
.digital-product-card strong{color:#7dc0ff;font-size:14px}
@media(max-width:620px){.digital-product-scroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.digital-product-scroll::-webkit-scrollbar{display:none}.digital-product-card{width:150px;flex:0 0 150px}.digital-cover{border-radius:13px}}

/* Readability halaman utama pengguna */
#page-home .course-grid.course-scroll .course-badge{font-size:10px}
#page-home .course-grid.course-scroll .course-price{font-size:14px}
#page-home .course-grid.course-scroll .course-card-body{min-height:47px;padding-top:10px}
#page-home .course-grid.course-scroll .course-card-body h3{font-size:14px;line-height:1.4}
.purchase-copy span,.purchase-side span,.purchase-empty-home p,.purchase-history-head span{font-size:12px}
.purchase-side strong,.purchase-payment-button{font-size:13px}
.purchase-empty-home strong,.purchase-history-head strong{font-size:14px}
.purchase-status,.purchase-history-status,.nav-count,.notification-badge{font-size:10px}
.security-summary small,.notification-item small{font-size:12px}
.notification-head span,.notification-item p,.notification-empty p{font-size:13px}
.notification-item strong{font-size:14px}
.course-tab{font-size:13px}.course-tab span{font-size:11px}
.owned-empty-state button{font-size:13px}
.mentor-course-empty{font-size:13px}

/* Mentoring: kartu ringkas agar lebih banyak mentor terlihat */
#page-mentoring .header{margin-bottom:12px}
#page-mentoring .mentor-section{margin-top:0;padding-bottom:24px}
#page-mentoring .mentor-head{margin-bottom:12px}
#page-mentoring .mentor-head p{max-width:330px;font-size:14px;line-height:1.5}
#page-mentoring .mentor-list{gap:10px}
#page-mentoring .mentor-card{padding:12px;border:1px solid rgba(114,151,190,.15);border-radius:17px;background:linear-gradient(145deg,#0d1c2f,#0a1728);box-shadow:0 8px 22px rgba(0,0,0,.12)}
#page-mentoring .mentor-main{grid-template-columns:52px minmax(0,1fr) auto;gap:11px;padding:0;border:0}
#page-mentoring .mentor-avatar{width:52px;height:52px;border-radius:14px;font-size:16px;box-shadow:none}
#page-mentoring .mentor-name{margin:0 0 2px;font-size:15px!important;line-height:1.25}
#page-mentoring .mentor-role{display:-webkit-box;overflow:hidden;margin:0 0 5px;font-size:12px!important;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:1}
#page-mentoring .mentor-rating{gap:4px;font-size:12px!important;line-height:1.2}
#page-mentoring .mentor-rating span{font-size:12px!important}
#page-mentoring .mentor-star{width:14px;height:14px}
#page-mentoring .mentor-actions{display:flex;align-items:center;gap:6px}
#page-mentoring .mentor-profile-link{height:35px;padding:0 10px;border:1px solid rgba(88,161,231,.24);border-radius:10px;display:flex;align-items:center;gap:5px;color:#8fc8ff;background:#102a45;text-decoration:none;font-size:11px!important;font-weight:800}
#page-mentoring .mentor-profile-link span{font-size:11px!important}
#page-mentoring .mentor-profile-link svg{width:14px;height:14px}
#page-mentoring .mentor-chat{width:38px;height:38px;border-radius:11px;background:rgba(37,211,102,.09)}
#page-mentoring .mentor-chat img{width:31px;height:31px}
#page-mentoring .mentor-course{display:grid;gap:2px;margin-top:7px;padding-top:0}
#page-mentoring .mentor-course::before{display:none}
#page-mentoring .mentor-step{grid-template-columns:28px minmax(0,1fr) 31px;gap:8px;min-height:47px;padding:5px 0;border-bottom:1px solid rgba(134,164,194,.075)}
#page-mentoring .mentor-step:last-child{border-bottom:0}
#page-mentoring .mentor-step-dot{width:24px;height:24px;margin:0;border:1px solid rgba(88,161,231,.2);border-radius:8px;display:grid;place-items:center;color:#67b4ff;background:#102a45;box-shadow:none}
#page-mentoring .mentor-step-dot::after{content:counter(mentor-step);font-size:10px;font-weight:850}
#page-mentoring .mentor-step{counter-increment:mentor-step}
#page-mentoring .mentor-course{counter-reset:mentor-step}
#page-mentoring .mentor-course-kicker{margin:0 0 1px;font-size:9px!important;line-height:1.1;letter-spacing:.07em;color:#5fa8eb}
#page-mentoring .mentor-course-title{overflow:hidden;margin:0 0 2px;font-size:13px!important;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
#page-mentoring .mentor-course-meta{font-size:11px!important;line-height:1.2;color:#8198ae}
#page-mentoring .mentor-detail{width:31px;height:31px;border-radius:9px}
#page-mentoring .mentor-detail svg{width:15px;height:15px}
#page-mentoring .mentor-course-empty{margin-top:4px;padding:11px;border-radius:11px;font-size:12px}
#page-mentoring .mentor-search-wrap{margin-bottom:12px}
@media(max-width:390px){#page-mentoring .mentor-profile-link{width:35px;padding:0;justify-content:center}#page-mentoring .mentor-profile-link span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
@media(max-width:370px){#page-mentoring .mentor-card{padding:11px}#page-mentoring .mentor-main{grid-template-columns:48px minmax(0,1fr) auto;gap:9px}#page-mentoring .mentor-avatar{width:48px;height:48px}#page-mentoring .mentor-chat{width:35px;height:35px}#page-mentoring .mentor-chat img{width:29px;height:29px}}

/* Susunan final kartu daftar mentor */
#page-mentoring .header{padding:14px 0 10px;margin:0}
#page-mentoring .mentor-head{margin:4px 0 12px}
#page-mentoring .mentor-head p{max-width:none}
#page-mentoring .mentor-card{padding:14px 14px 12px}
#page-mentoring .mentor-main{grid-template-columns:54px minmax(0,1fr) 40px;gap:11px;padding:0 0 13px;border-bottom:1px solid rgba(134,164,194,.12)}
#page-mentoring .mentor-avatar{width:54px;height:54px;border-radius:14px}
#page-mentoring .mentor-name{display:-webkit-box;overflow:hidden;margin:0 0 7px;line-height:1.25;-webkit-box-orient:vertical;-webkit-line-clamp:2}
#page-mentoring .mentor-name-row{display:flex;min-width:0;align-items:flex-start;gap:5px}
#page-mentoring .mentor-name-row .mentor-name{min-width:0}
#page-mentoring .mentor-verified-icon{width:16px;height:16px;flex:0 0 auto;margin-top:1px;object-fit:contain}
#page-mentoring .mentor-rating{margin:0}
#page-mentoring .mentor-chat{width:40px;height:40px;border:0;background:transparent;box-shadow:none}
#page-mentoring .mentor-chat img{width:33px;height:33px}
#page-mentoring .mentor-description{display:-webkit-box;overflow:hidden;margin:12px 0;padding:0;color:#91a7bb;font-size:13px!important;line-height:1.5;-webkit-box-orient:vertical;-webkit-line-clamp:3}
#page-mentoring .mentor-card-footer{padding-top:11px;border-top:1px solid rgba(134,164,194,.12);display:flex;align-items:center;justify-content:space-between}
#page-mentoring .mentor-card-footer>div{display:grid;gap:2px}
#page-mentoring .mentor-card-footer span{color:#7f96aa;font-size:11px!important}
#page-mentoring .mentor-card-footer strong{color:#f0f6fc;font-size:17px!important}
#page-mentoring .mentor-profile-link{height:36px;padding:0 12px;border:0;border-radius:9px;color:#72baff;background:#102a45;font-size:11px!important;letter-spacing:.05em}
#page-mentoring .mentor-profile-link svg{width:15px;height:15px}
@media(max-width:390px){#page-mentoring .mentor-profile-link{width:auto;padding:0 11px}#page-mentoring .mentor-profile-link span{position:static;width:auto;height:auto;overflow:visible;clip-path:none}}
@media(max-width:370px){#page-mentoring .mentor-main{grid-template-columns:48px minmax(0,1fr) 36px}#page-mentoring .mentor-avatar{width:48px;height:48px}#page-mentoring .mentor-description{font-size:12px!important}}
.referral-kicker{font-size:12px}.referral-hero p{font-size:13px}.referral-rate span,.referral-rate small{font-size:11px}.referral-card-head span{font-size:12px}.referral-card-head strong{font-size:14px}.referral-link-box>span{font-size:13px}.referral-link-box button{font-size:12px}.referral-title-row p{font-size:12px}.tier-copy strong{font-size:14px}.tier-copy span{font-size:12px}.referral-step>span{font-size:12px}.referral-step strong{font-size:13px}.referral-step small{font-size:12px}.referral-note{font-size:11px}

    /* Ajak Teman */
    .referral-section{
      padding-bottom:22px;
    }

    .referral-hero{
      position:relative;
      min-height:230px;
      padding:24px 20px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.13);
      border-radius:24px;
      background:
        radial-gradient(circle at 88% 18%,rgba(255,213,102,.34),transparent 30%),
        linear-gradient(145deg,#0B4FAF 0%,#126FCF 52%,#0A315F 100%);
      box-shadow:0 18px 40px rgba(0,49,112,.3),inset 0 1px 0 rgba(255,255,255,.18);
    }

    .referral-hero-copy{
      position:relative;
      z-index:2;
      max-width:68%;
    }

    .referral-kicker{
      display:inline-flex;
      align-items:center;
      gap:6px;
      margin-bottom:13px;
      padding:6px 9px;
      border:1px solid rgba(255,255,255,.16);
      border-radius:999px;
      background:rgba(255,255,255,.1);
      color:#DCEEFF;
      font-size:10px;
      font-weight:800;
      letter-spacing:.25px;
    }

    .referral-kicker i,
    .referral-kicker svg{
      width:13px;
      height:13px;
      color:#FFE08A;
    }

    .referral-hero h2{
      margin:0;
      font-size:27px;
      line-height:1.07;
      letter-spacing:-1px;
    }

    .referral-hero p{
      margin:13px 0 0;
      color:#D7E8F9;
      font-size:11px;
      line-height:1.55;
    }

    .referral-rate{
      position:absolute;
      z-index:2;
      top:58px;
      right:17px;
      width:108px;
      height:108px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      border:1px solid rgba(255,255,255,.24);
      border-radius:50%;
      background:linear-gradient(145deg,#FFD76A,#F5A623);
      color:#102038;
      box-shadow:0 15px 32px rgba(2,30,66,.35),inset 0 2px 0 rgba(255,255,255,.5);
      transform:rotate(4deg);
    }

    .referral-rate span,
    .referral-rate small{
      font-size:9px;
      font-weight:800;
    }

    .referral-rate strong{
      margin:1px 0;
      font-size:23px;
      line-height:1;
      letter-spacing:-1px;
    }

    .referral-hero-art{
      position:absolute;
      right:-25px;
      bottom:-32px;
      width:145px;
      height:145px;
      color:rgba(255,255,255,.07);
      transform:rotate(-12deg);
    }

    .referral-link-card,
    .referral-how{
      margin-top:14px;
      padding:16px;
      border:1px solid rgba(135,155,190,.11);
      border-radius:20px;
      background:linear-gradient(145deg,rgba(16,32,56,.98),rgba(11,25,43,.98));
      box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
    }

    .referral-card-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      margin-bottom:13px;
    }

    .referral-card-head > div{
      display:flex;
      flex-direction:column;
      gap:3px;
    }

    .referral-card-head span{
      color:#8796AB;
      font-size:10px;
    }

    .referral-card-head strong{
      font-size:12px;
      line-height:1.35;
    }

    .referral-card-head .referral-status{
      display:inline-flex;
      align-items:center;
      gap:4px;
      flex:0 0 auto;
      padding:5px 7px;
      border-radius:999px;
      background:rgba(52,211,153,.1);
      color:#65E6B5;
      font-weight:800;
    }

    .referral-status i,
    .referral-status svg{
      width:12px;
      height:12px;
    }

    .referral-link-box{
      display:flex;
      align-items:center;
      gap:8px;
      min-height:48px;
      padding:5px 5px 5px 12px;
      border:1px solid rgba(62,139,223,.22);
      border-radius:13px;
      background:#091728;
    }

    .referral-link-box > span{
      min-width:0;
      flex:1;
      overflow:hidden;
      color:#BFD5EA;
      font-size:11px;
      font-weight:650;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

    .referral-link-box button{
      height:37px;
      padding:0 11px;
      display:inline-flex;
      align-items:center;
      gap:6px;
      border:0;
      border-radius:10px;
      background:#173A61;
      color:#ECF6FF;
      font-size:10px;
      font-weight:850;
      cursor:pointer;
    }

    .referral-link-box button.copied{
      background:#147A5A;
    }

    .referral-link-box button i,
    .referral-link-box button svg{
      width:14px;
      height:14px;
    }

    .referral-share-btn{
      width:100%;
      height:47px;
      margin-top:10px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      border:0;
      border-radius:13px;
      background:linear-gradient(135deg,#1478E4,#0B5CB8);
      color:#fff;
      font-size:12px;
      font-weight:850;
      box-shadow:0 9px 20px rgba(9,87,177,.22),inset 0 1px 0 rgba(255,255,255,.2);
      cursor:pointer;
    }

    .referral-share-btn i,
    .referral-share-btn svg{
      width:16px;
      height:16px;
    }

    .referral-title-row{
      margin:23px 2px 11px;
    }

    .referral-title-row h3,
    .referral-how h3{
      margin:0;
      font-size:14px;
    }

    .referral-title-row p{
      margin:4px 0 0;
      color:#7F91A8;
      font-size:10px;
    }

    .commission-tiers{
      display:flex;
      flex-direction:column;
      gap:8px;
    }

    .commission-tier{
      min-height:68px;
      padding:11px 13px;
      display:flex;
      align-items:center;
      gap:11px;
      border:1px solid rgba(135,155,190,.1);
      border-radius:16px;
      background:#0D1B2E;
    }

    .commission-tier.active{
      border-color:rgba(43,142,255,.35);
      background:linear-gradient(100deg,rgba(20,112,214,.15),#0D1B2E 60%);
    }

    .commission-tier.featured{
      border-color:rgba(255,199,68,.2);
    }

    .tier-icon{
      width:40px;
      height:40px;
      flex:0 0 auto;
      display:grid;
      place-items:center;
      border-radius:12px;
      background:#132A47;
      color:#61AFFF;
    }

    .featured .tier-icon{
      background:rgba(255,192,58,.1);
      color:#FFD05C;
    }

    .tier-icon i,
    .tier-icon svg{
      width:18px;
      height:18px;
    }

    .tier-copy{
      min-width:0;
      flex:1;
      display:flex;
      flex-direction:column;
      gap:3px;
    }

    .tier-copy strong{
      font-size:12px;
    }

    .tier-copy span{
      color:#8192A8;
      font-size:10px;
    }

    .commission-tier b{
      color:#75BBFF;
      font-size:18px;
      letter-spacing:-.5px;
    }

    .commission-tier.featured b{
      color:#FFD05C;
    }

    .referral-how h3{
      margin-bottom:15px;
    }

    .referral-steps{
      display:flex;
      flex-direction:column;
      gap:15px;
    }

    .referral-step{
      position:relative;
      display:flex;
      align-items:flex-start;
      gap:11px;
    }

    .referral-step:not(:last-child)::after{
      content:"";
      position:absolute;
      top:28px;
      left:13px;
      width:1px;
      height:17px;
      background:rgba(81,157,239,.3);
    }

    .referral-step > span{
      width:27px;
      height:27px;
      flex:0 0 auto;
      display:grid;
      place-items:center;
      border-radius:9px;
      background:#143B66;
      color:#A9D5FF;
      font-size:10px;
      font-weight:900;
    }

    .referral-step div{
      display:flex;
      flex-direction:column;
      gap:3px;
    }

    .referral-step strong{
      font-size:11px;
    }

    .referral-step small{
      color:#8192A8;
      font-size:10px;
      line-height:1.4;
    }

    .referral-note{
      margin:13px 4px 0;
      display:flex;
      align-items:flex-start;
      gap:7px;
      color:#71849B;
      font-size:9px;
      line-height:1.5;
    }

    .referral-note i,
    .referral-note svg{
      width:13px;
      height:13px;
      flex:0 0 auto;
      margin-top:1px;
    }

    .bottom-nav{
      grid-template-columns:repeat(5,1fr);
    }

    @media (max-width:350px){
      .referral-hero{padding:20px 16px}
      .referral-hero h2{font-size:24px}
      .referral-rate{right:11px;width:96px;height:96px}
      .referral-rate strong{font-size:21px}
      .nav-item{width:44px;height:44px}
    }

/* Final readability overrides untuk seluruh halaman index.php */
.referral-kicker{font-size:12px}
.referral-hero p{font-size:13px}
.referral-rate span,.referral-rate small{font-size:11px}
.referral-card-head span{font-size:12px}
.referral-card-head strong{font-size:14px}
.referral-link-box>span{font-size:13px}
.referral-link-box button{font-size:12px}
.referral-title-row p{font-size:12px}
.tier-copy strong{font-size:14px}
.tier-copy span{font-size:12px}
.referral-step>span{font-size:12px}
.referral-step strong{font-size:13px}
.referral-step small{font-size:12px}
.referral-note{font-size:11px}
.mentor-apply-header div span{font-size:11px}
.mentor-apply-hero small{font-size:11px}
.mentor-apply-hero p{font-size:12px}
.mentor-field-hint{font-size:11px}
.mentor-apply-terms{font-size:12px}
.mentor-application-status strong{font-size:13px}
.mentor-application-status span{font-size:11px}
.mentor-apply-form textarea,.mentor-apply-form .profile-save-button{font-size:13px}

/* Mentor application: compact, readable form with clear action hierarchy */
.mentor-apply-app{width:min(100%,460px);padding:0 20px 40px}
.mentor-apply-header{min-height:78px}
.mentor-apply-header strong{font-size:17px}
.mentor-apply-header div span{font-size:12px}
.mentor-apply-hero{margin:18px 0;padding:20px;border-radius:18px;align-items:flex-start;background:linear-gradient(135deg,#12385f,#0d2035 72%)}
.mentor-apply-hero>span{width:52px;height:52px;flex-basis:52px}
.mentor-apply-hero small{font-size:10px}
.mentor-apply-hero h1{margin:5px 0 4px;font-size:20px}
.mentor-apply-hero p{font-size:12px;line-height:1.55}
.mentor-apply-form{margin:0;padding:20px;gap:18px;border-color:rgba(112,163,214,.16);border-radius:18px;background:#0b192a}
.mentor-apply-form label:not(.profile-avatar-edit){gap:8px}
.mentor-apply-form label>span{padding-left:1px;font-size:12px}
.mentor-apply-form input{height:50px;padding:0 15px;border-color:rgba(120,163,204,.18);background:#081523;font-size:14px}
.mentor-apply-form textarea{min-height:132px;padding:15px;border-color:rgba(120,163,204,.18);background:#081523;font-size:14px}
.mentor-apply-form .mentor-field-hint{display:block;margin:0;padding:0 2px;color:#718ba4;font-size:11px;line-height:1.45}
.mentor-apply-terms{margin-top:2px;padding:14px;border:1px solid rgba(83,151,219,.12);border-radius:13px;font-size:12px;line-height:1.5}
.mentor-apply-form .profile-save-button{height:52px;margin-top:-2px;border-radius:14px;font-size:14px}
@media(min-width:768px){.mentor-apply-app{width:min(100%,760px);padding-bottom:56px}.mentor-apply-hero{padding:24px}.mentor-apply-form{padding:26px}}
@media(max-width:380px){.mentor-apply-app{padding-inline:14px}.mentor-apply-hero{padding:16px}.mentor-apply-form{padding:16px;gap:16px}}
.payment-resume-note{max-width:340px;margin:-2px auto 0;color:#8098ae;font-size:11px;line-height:1.55}
@media(min-width:900px){
  .payment-page{min-height:100vh;padding:38px 42px 120px;background:radial-gradient(circle at 78% 12%,rgba(28,105,181,.13),transparent 34%),#050d18}
  .payment-shell{width:min(100%,1120px);min-height:auto;margin:0 auto;padding:0;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);gap:22px;background:transparent}
  .payment-header{grid-column:1/-1;height:74px;padding:0 4px 18px;border-bottom:1px solid rgba(125,164,201,.13)}
  .payment-header>a{width:46px;height:46px;border-radius:14px}
  .payment-header strong{font-size:20px}.payment-header span{font-size:12px}.payment-header>svg{width:23px;height:23px}
  .payment-hero{grid-column:1;margin:0;padding:32px;border-radius:24px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;min-height:330px;text-align:left;background:linear-gradient(145deg,#102a46,#0b1b2e)}
  .payment-state{grid-column:2;grid-row:1/4;margin:0;font-size:11px}
  .payment-hero>small{grid-column:1;font-size:12px}.payment-hero h1{grid-column:1;margin:10px 0 8px;font-size:48px}.payment-hero>p{grid-column:1;font-size:15px}
  .payment-hero>div{grid-column:1/-1;align-self:end;margin-top:38px;padding-top:20px;font-size:12px}
  .payment-action-card{grid-column:2;margin:0;padding:30px;border-radius:24px;display:flex;flex-direction:column;justify-content:center;background:#0b1c30}
  .payment-number>span{font-size:10px}.payment-number strong{margin:16px auto 10px;font-size:24px;line-height:1.35;letter-spacing:-.02em}
  .payment-resume-note{font-size:12px}.payment-finished{height:54px;margin-top:22px;border-radius:14px;font-size:13px}
  .payment-expiry{margin-top:20px;padding:14px 16px}.payment-expiry span{font-size:9px}.payment-expiry strong{font-size:12px}
  .payment-success-actions{grid-column:2;margin:0;align-self:stretch;padding:28px;border:1px solid rgba(125,164,201,.13);border-radius:24px;background:#0b1c30}
  .payment-shell>footer{grid-column:1/-1;margin:0;padding:20px;border-top:1px solid rgba(125,164,201,.1);grid-template-columns:auto auto 1fr;justify-items:start;align-items:center;gap:10px 18px;text-align:left}
  .payment-shell>footer small{justify-self:end}.payment-shell>footer strong{font-size:12px}
  .payment-checkbar{left:auto;right:42px;bottom:30px;width:340px;padding:0;background:transparent;border:0}
  .payment-checkbar button{height:56px;border:1px solid rgba(111,180,247,.25);border-radius:16px;box-shadow:0 14px 34px rgba(0,0,0,.28)}
}
@media(min-width:900px){
  .checkout-page{min-height:100vh;padding:34px 42px 124px;background:radial-gradient(circle at 82% 8%,rgba(30,108,185,.12),transparent 32%),#050d18}
  .checkout-page .checkout-app{width:min(100%,1120px);max-width:none;margin:0 auto;padding:0;display:grid;grid-template-columns:minmax(0,.88fr) minmax(480px,1.12fr);grid-template-areas:"header header" "product methods" "note promo" "summary promo";gap:18px 24px;align-items:start;background:transparent}
  .checkout-page .course-detail-header{grid-area:header;height:72px;margin:0 0 4px;padding:0 4px 18px;border-bottom:1px solid rgba(125,164,201,.13)}
  .checkout-page .course-back{width:46px;height:46px;border-radius:14px}.checkout-page .course-detail-titlebar strong{font-size:20px}.checkout-page .course-detail-titlebar span{font-size:12px}.checkout-page .checkout-secure{width:46px;height:46px}
  .checkout-page .checkout-course{grid-area:product;grid-template-columns:150px minmax(0,1fr);gap:22px;padding:20px;border-radius:22px;background:linear-gradient(145deg,#102a46,#0b1b2e)}
  .checkout-page .checkout-course>img{width:150px;height:190px;border-radius:16px}.checkout-page .checkout-course h1{margin-bottom:12px;font-size:23px}.checkout-page .checkout-meta{margin-bottom:18px;font-size:12px}.checkout-page .checkout-course-price{font-size:25px}
  .checkout-page .checkout-app>.checkout-note{grid-area:note;margin:0;padding:14px 16px;border:1px solid rgba(73,188,139,.13);border-radius:14px;background:rgba(20,74,56,.17);font-size:12px}
  .checkout-page .checkout-method-section{grid-area:methods;margin:0;padding:24px;border:1px solid rgba(125,164,201,.13);border-radius:22px;background:#0b1c30}
  .checkout-page .checkout-method-section .course-section-head{margin-bottom:16px}.checkout-page .checkout-method-section .course-section-head h2{font-size:18px}
  .checkout-page .payment-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .checkout-page .payment-option{min-height:76px;padding:13px;grid-template-columns:42px minmax(0,1fr) 28px;border-radius:15px}.checkout-page .payment-icon{width:42px;height:42px}.checkout-page .payment-copy strong{font-size:13px}.checkout-page .payment-copy>span{font-size:11px}
  .checkout-page .checkout-promo-section{grid-area:promo;align-self:start;margin:0;padding:20px 22px;border:1px solid rgba(125,164,201,.13);border-radius:20px;background:#0b1c30}.checkout-page .checkout-promo-section .course-section-head{margin-bottom:12px}.checkout-page .checkout-promo-section .course-section-head h2{font-size:16px}.checkout-page .promo-form{padding:7px 8px;border-radius:14px}.checkout-page .promo-form input{height:44px;font-size:13px}.checkout-page .promo-form button{min-width:112px;padding-inline:20px}
  .checkout-page .checkout-summary{grid-area:summary;margin:0;padding:22px;border-radius:20px}.checkout-page .checkout-summary h2{font-size:17px}.checkout-page .checkout-summary>div{margin-top:13px;font-size:13px}.checkout-page .checkout-summary .checkout-total{margin-top:17px;padding-top:16px}.checkout-page .checkout-summary .checkout-total strong{font-size:20px}
  .checkout-page .manual-payment-warning,.checkout-page .manual-payment-error{grid-column:1/-1;margin:0}
  .checkout-page>.checkout-paybar{width:min(calc(100% - 84px),1120px);min-height:82px;bottom:22px;padding:12px 16px 12px 22px;border:1px solid rgba(125,164,201,.16);border-radius:18px;background:rgba(9,22,38,.94);box-shadow:0 18px 48px rgba(0,0,0,.34)}
  .checkout-page>.checkout-paybar span{font-size:11px}.checkout-page>.checkout-paybar strong{font-size:20px}.checkout-page>.checkout-paybar button{min-width:230px;height:54px;padding-inline:24px;font-size:13px}
}

/* Referral data: ringkas, rata, dan mudah dipindai */
#page-ajak-teman .referral-data-section{margin:24px 0 0}
#page-ajak-teman .referral-data-section+.referral-data-section{margin-top:24px;padding-top:22px;border-top:1px solid rgba(137,169,201,.14)}
#page-ajak-teman .referral-list-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 2px 12px}
#page-ajak-teman .referral-list-heading>div{min-width:0;flex:1}
#page-ajak-teman .referral-list-heading h3{margin:0;color:#f4f8fc;font-size:16px;line-height:1.3}
#page-ajak-teman .referral-list-heading p{margin:4px 0 0;color:#819bb5;font-size:13px;line-height:1.4}
#page-ajak-teman .referral-count-badge{width:auto;min-width:36px;height:30px;padding:0 10px;flex:0 0 auto;display:grid;place-items:center;border:1px solid rgba(82,164,245,.24);border-radius:10px;background:#102945;color:#72bdff;font-size:14px;font-weight:900}
#page-ajak-teman .referral-user-list,#page-ajak-teman .referral-history-list{border:1px solid rgba(104,151,197,.2);border-radius:16px;background:#0c1d30;box-shadow:none}
#page-ajak-teman .referral-user-row,#page-ajak-teman .referral-history-row{padding:13px 12px}
#page-ajak-teman .referral-user-copy strong,#page-ajak-teman .referral-history-copy strong{font-size:14px}
#page-ajak-teman .referral-user-copy span,#page-ajak-teman .referral-history-copy span{font-size:12px}
#page-ajak-teman .referral-user-result>strong,#page-ajak-teman .referral-history-amount>strong{font-size:14px}
#page-ajak-teman .referral-reward-status,#page-ajak-teman .referral-history-amount span{font-size:12px}
#page-ajak-teman .referral-note{margin:16px 3px 0;padding:0;font-size:12px;line-height:1.5}
@media(max-width:370px){#page-ajak-teman .referral-list-heading{align-items:center}#page-ajak-teman .referral-list-heading h3{font-size:15px}#page-ajak-teman .referral-list-heading p{font-size:12px}#page-ajak-teman .referral-history-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}#page-ajak-teman .referral-history-icon{display:none}#page-ajak-teman .referral-history-copy span{max-width:185px}}

/* Saldo referral dan pencairan */
.profile-balance-card{min-height:0;padding:19px;border-radius:22px}
.profile-balance-card::after{opacity:.45;pointer-events:none}
.profile-balance-card .membership-head{align-items:center}
.profile-balance-card .membership-icon{width:42px;height:42px;border-radius:13px}
.profile-balance-card .membership-title{font-size:29px!important;line-height:1.08}
.profile-balance-card .membership-foot{position:relative;inset:auto;margin:22px 0 0;align-items:center}
.profile-balance-card .membership-meta{min-width:0}
.profile-balance-card .membership-meta strong{font-size:14px!important}
.profile-balance-card .membership-meta span{font-size:13px!important}
.profile-balance-actions{position:relative;z-index:3;display:flex;align-items:center;gap:7px;flex:0 0 auto}
.profile-balance-actions .membership-chip{height:35px;padding:0 11px;border-radius:10px;display:flex;align-items:center;border:1px solid rgba(255,255,255,.15);font-weight:850;white-space:nowrap}
.profile-balance-actions .membership-history-link{background:rgba(7,45,91,.32)}
.profile-balance-actions .membership-withdraw-link{color:#0c4f9d;background:#fff;border-color:#fff}
.profile-balance-actions .membership-withdraw-link:disabled{cursor:not-allowed;opacity:.5}
.profile-balance-card .membership-stats{position:relative;inset:auto;margin-top:19px;padding-top:15px}
.profile-balance-card .membership-stat strong{font-size:14px!important}
.profile-balance-card .membership-stat span{font-size:12px!important}
.profile-balance-flash{position:relative;z-index:2;margin:12px 0 0;padding:9px 11px;border-radius:10px;color:rgba(255,255,255,.78);background:rgba(5,39,79,.28);font-size:12px;line-height:1.4}
.profile-balance-flash.success{color:#d9ffec;background:rgba(14,109,67,.35)}
.profile-balance-flash.error{color:#ffe0e3;background:rgba(141,35,47,.35)}

body.referral-withdraw-open{overflow:hidden}
.referral-withdraw-layer{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center;visibility:hidden;pointer-events:none;background:rgba(2,8,18,0);transition:.22s}
.referral-withdraw-layer.open{visibility:visible;pointer-events:auto;background:rgba(2,8,18,.76)}
.referral-withdraw-modal{width:min(100%,430px);max-height:92vh;overflow:auto;padding:20px 18px calc(22px + env(safe-area-inset-bottom));border:1px solid rgba(123,161,199,.18);border-bottom:0;border-radius:22px 22px 0 0;color:#eef6fe;background:#091728;transform:translateY(100%);transition:transform .26s ease}
.referral-withdraw-layer.open .referral-withdraw-modal{transform:translateY(0)}
.referral-withdraw-modal>header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.referral-withdraw-modal>header span{color:#68b6fa;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.referral-withdraw-modal>header h2{margin:4px 0 0;font-size:21px}
.referral-withdraw-modal>header button{width:40px;height:40px;border:1px solid rgba(118,158,198,.18);border-radius:12px;display:grid;place-items:center;color:#b6cadc;background:#10243a}
.referral-withdraw-modal>header button svg{width:19px;height:19px}
.referral-withdraw-balance{margin-top:18px;padding:15px 16px;border:1px solid rgba(72,151,231,.22);border-radius:14px;display:flex;align-items:center;justify-content:space-between;background:#0d2540}
.referral-withdraw-balance span{color:#8ca9c4;font-size:13px}.referral-withdraw-balance strong{font-size:20px}
.referral-withdraw-form{margin-top:17px;display:grid;gap:14px}
.referral-withdraw-form label{display:grid;gap:7px}.referral-withdraw-form label>span{color:#a8bdd0;font-size:13px;font-weight:750}
.referral-withdraw-form input,.referral-withdraw-form select{width:100%;height:48px;padding:0 13px;border:1px solid rgba(117,157,197,.19);border-radius:12px;outline:0;color:#eef6fe;background:#071321;font:500 14px Inter,sans-serif;box-sizing:border-box}
.referral-withdraw-form input:focus,.referral-withdraw-form select:focus{border-color:#3b91e8;box-shadow:0 0 0 3px rgba(59,145,232,.1)}
.referral-withdraw-form p{margin:0;color:#7891a8;font-size:12px;line-height:1.5}
.referral-withdraw-form>button{height:49px;border:0;border-radius:13px;display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;background:linear-gradient(135deg,#2487eb,#1765c2);font-size:14px;font-weight:850}.referral-withdraw-form>button svg{width:17px;height:17px}
@media(max-width:390px){.profile-balance-card{padding:17px}.profile-balance-card .membership-foot{align-items:flex-start;flex-direction:column}.profile-balance-actions{width:100%}.profile-balance-actions .membership-chip{flex:1;justify-content:center}.profile-balance-card .membership-title{font-size:27px!important}}

.referral-inline-history{display:none!important}
.referral-history-entry{min-height:62px;margin-top:20px;padding:11px 12px;border:1px solid rgba(104,151,197,.2);border-radius:15px;display:flex;align-items:center;gap:11px;color:#eef6fe;background:#0c1d30;text-decoration:none}
.referral-history-entry>span{width:40px;height:40px;flex:0 0 40px;border-radius:12px;display:grid;place-items:center;color:#6bb8fb;background:#112d49}
.referral-history-entry>span svg{width:19px;height:19px}.referral-history-entry>div{min-width:0;flex:1;display:grid;gap:3px}.referral-history-entry strong{font-size:14px}.referral-history-entry small{overflow:hidden;color:#819bb5;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.referral-history-entry>svg{width:18px;height:18px;color:#7894ae}
.profile-balance-actions .membership-history-link{text-decoration:none}

.referral-history-page{min-height:100vh;margin:0;color:#eef6fe;background:#050d18;font-family:Inter,system-ui,sans-serif}
.referral-history-shell{width:min(100%,430px);min-height:100vh;margin:0 auto;padding:0 18px 42px;box-sizing:border-box;background:#071321}
.referral-history-header{height:76px;display:flex;align-items:center;gap:13px;border-bottom:1px solid rgba(255,255,255,.06)}
.referral-history-header>a{width:42px;height:42px;flex:0 0 42px;border:1px solid rgba(117,158,198,.17);border-radius:13px;display:grid;place-items:center;color:#bdd1e3;background:#0e2237}
.referral-history-header>a svg{width:20px;height:20px}.referral-history-header h1{margin:0;font-size:18px;letter-spacing:-.02em}
.referral-history-filters{margin-top:18px;padding:4px;border:1px solid rgba(103,149,194,.16);border-radius:13px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:#0a192a}
.referral-history-filters a{height:38px;padding:0 8px;border-radius:9px;display:flex;align-items:center;justify-content:center;gap:6px;color:#829bb3;font-size:12px;font-weight:750;text-decoration:none}.referral-history-filters a.active{color:#fff;background:#1769c7;box-shadow:0 5px 14px rgba(12,83,160,.22)}.referral-history-filters a span{min-width:19px;height:19px;padding:0 5px;border-radius:7px;display:grid;place-items:center;color:inherit;background:rgba(255,255,255,.08);font-size:10px;box-sizing:border-box}.referral-history-filters a.active span{background:rgba(255,255,255,.16)}
.referral-history-summary{position:relative;overflow:hidden;margin-top:17px;padding:19px;border:1px solid rgba(91,166,239,.27);border-radius:19px;background:linear-gradient(145deg,#176fd0,#12549d)}
.referral-history-summary>div>span{display:block;color:#d0e7fb;font-size:12px;font-weight:700}.referral-history-summary>div>strong{display:block;margin-top:5px;color:#fff;font-size:27px;line-height:1.1}
.referral-history-summary-icon{position:absolute;top:18px;right:18px;width:42px;height:42px;border:1px solid rgba(255,255,255,.16);border-radius:13px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.1)}.referral-history-summary-icon svg{width:20px;height:20px}
.referral-history-summary footer{margin-top:19px;padding-top:14px;border-top:1px solid rgba(255,255,255,.15);display:grid;grid-template-columns:1fr 1fr}
.referral-history-summary footer>div{display:grid;gap:3px}.referral-history-summary footer>div+div{padding-left:18px;border-left:1px solid rgba(255,255,255,.15)}.referral-history-summary footer strong{font-size:14px}.referral-history-summary footer span{color:#c5ddf3;font-size:12px}
.referral-history-title{margin:25px 1px 12px;display:flex;align-items:end;justify-content:space-between;gap:12px}.referral-history-title h2{margin:0;font-size:16px}.referral-history-title p{margin:4px 0 0;color:#8199b1;font-size:12px}.referral-history-title>span{min-width:31px;height:28px;padding:0 8px;border-radius:9px;display:grid;place-items:center;color:#72bdff;background:#102a45;font-size:13px;font-weight:850;box-sizing:border-box}
.referral-history-page-list{overflow:hidden;border:1px solid rgba(106,151,194,.19);border-radius:17px;background:#0b1b2d}
.referral-history-page-list article{min-width:0;padding:14px 13px;display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:11px}.referral-history-page-list article+article{border-top:1px solid rgba(134,169,203,.11)}
.referral-history-page-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#55d99c;background:rgba(48,190,128,.1)}.referral-history-page-icon svg{width:18px;height:18px}
.referral-history-page-copy{min-width:0;display:grid;gap:3px}.referral-history-page-copy strong,.referral-history-page-copy span,.referral-history-page-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.referral-history-page-copy strong{font-size:13px}.referral-history-page-copy span{color:#8ca6bf;font-size:11px}.referral-history-page-copy small{color:#667f98;font-size:11px}
.referral-history-page-amount{text-align:right}.referral-history-page-amount>strong{display:block;color:#55d99c;font-size:13px}.referral-history-page-amount>span{display:block;margin-top:5px;color:#8ca5bd;font-size:11px;font-weight:750}.referral-history-page-amount .status-approved{color:#55d99c}.referral-history-page-amount .status-pending{color:#ffc85a}.referral-history-page-amount .status-cancelled{color:#ff8189}
.referral-history-empty{margin-top:12px;padding:42px 22px;border:1px dashed #203c58;border-radius:17px;text-align:center;background:#0a1929}.referral-history-empty>span{width:48px;height:48px;margin:0 auto 12px;border-radius:14px;display:grid;place-items:center;color:#67b5fa;background:#102a45}.referral-history-empty>span svg{width:22px;height:22px}.referral-history-empty strong{display:block;font-size:15px}.referral-history-empty p{max-width:280px;margin:7px auto 0;color:#8199b1;font-size:12px;line-height:1.55}
@media(max-width:370px){.referral-history-shell{padding-inline:14px}.referral-history-page-list article{grid-template-columns:minmax(0,1fr) auto}.referral-history-page-icon{display:none}.referral-history-page-copy{max-width:185px}}

/* Aksi kelulusan, rating, dan resource pada lesson */
.lesson-completion-actions{margin:16px 16px 0;padding:14px;display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:11px;border:1px solid rgba(244,201,77,.22);border-radius:14px;background:linear-gradient(135deg,rgba(117,81,15,.18),#0c1b2d 70%)}
.lesson-completion-actions>span{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#f4ca57;background:rgba(188,137,28,.13)}.lesson-completion-actions>span svg{width:19px;height:19px;fill:currentColor}
.lesson-completion-actions>div{min-width:0}.lesson-completion-actions strong{display:block;color:#fff4d5;font-size:13px;line-height:1.35}.lesson-completion-actions p{margin:4px 0 0;color:#8fa1b2;font-size:11px;line-height:1.45}
.lesson-completion-actions>a{height:36px;padding:0 11px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#071321;background:#f2c84f;font-size:11px;font-weight:900;white-space:nowrap;text-decoration:none}
.lesson-resource-section{margin-top:18px;padding:18px 16px;border-top:1px solid rgba(255,255,255,.07)}
.lesson-resource-heading{margin-bottom:12px;display:flex;align-items:end;justify-content:space-between;gap:12px}.lesson-resource-heading span{color:#60aff7;font-size:9px;font-weight:850;letter-spacing:.1em}.lesson-resource-heading h2{margin:5px 0 0;color:#f1f6fb;font-size:16px}.lesson-resource-heading>b{color:#7890a7;font-size:11px}
.lesson-resource-list{overflow:hidden;border:1px solid rgba(112,151,190,.16);border-radius:14px;background:#0b1a2c}.lesson-resource-list article{min-width:0;padding:12px;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px}.lesson-resource-list article+article{border-top:1px solid rgba(255,255,255,.07)}
.lesson-resource-list article>span{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#71b9f8;background:#112d49}.lesson-resource-list article>span svg{width:17px;height:17px}.lesson-resource-list article>div{min-width:0}.lesson-resource-list strong,.lesson-resource-list small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lesson-resource-list strong{color:#edf5fc;font-size:12px}.lesson-resource-list small{margin-top:4px;color:#718aa2;font-size:10px}
.lesson-resource-list article>a{height:34px;padding:0 10px;border-radius:9px;display:flex;align-items:center;gap:5px;color:#cce8ff;background:#12375a;font-size:10px;font-weight:850;text-decoration:none}.lesson-resource-list article>a svg{width:14px;height:14px}
@media(max-width:370px){.lesson-completion-actions{grid-template-columns:36px minmax(0,1fr);margin-inline:12px}.lesson-completion-actions>span{width:36px;height:36px}.lesson-completion-actions>a{grid-column:1/-1;width:100%}.lesson-resource-section{padding-inline:12px}.lesson-resource-list article{grid-template-columns:34px minmax(0,1fr) auto;padding:10px}.lesson-resource-list article>span{width:34px;height:34px}.lesson-resource-list article>a span{display:none}.lesson-resource-list article>a{width:34px;padding:0;justify-content:center}}

/* Preview menggunakan tampilan lesson; materi non-preview tetap terkunci */
.preview-watch-page .lesson-watch-app{padding-bottom:96px}.preview-mode-banner{margin:12px 0;padding:11px 13px;border:1px solid #28639a66;border-radius:12px;display:flex;align-items:center;gap:10px;color:#8cc8ff;background:#0d2944}.preview-mode-banner>svg{width:19px}.preview-mode-banner>div{min-width:0;flex:1;display:grid;gap:2px}.preview-mode-banner strong{font-size:13px}.preview-mode-banner span{color:#8ca4ba;font-size:11px}.preview-mode-banner a{height:34px;padding:0 10px;border-radius:8px;display:flex;align-items:center;color:#fff;background:#1c70ca;text-decoration:none;font-size:11px;font-weight:800}.preview-watch-page .lesson-item.locked{opacity:.58}.preview-watch-page .lesson-item.locked .lesson-item-main{cursor:not-allowed}.preview-buy{position:fixed;z-index:40;left:0;right:0;bottom:0;min-height:68px;padding:9px max(14px,calc((100% - 450px)/2));border-top:1px solid #ffffff14;display:flex;align-items:center;gap:12px;background:#081321f7;backdrop-filter:blur(14px)}.preview-buy>div{min-width:0;flex:1;display:grid;gap:2px}.preview-buy small{color:#7891a8;font-size:11px}.preview-buy strong{overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.preview-buy>a{height:43px;padding:0 14px;border-radius:10px;display:flex;align-items:center;gap:7px;color:#fff;background:#2079da;text-decoration:none;font-size:12px;font-weight:800}.preview-buy>a svg{width:16px}@media(max-width:520px){.preview-mode-banner{margin:8px 14px}.preview-mode-banner span{display:none}.preview-mode-banner a{font-size:10px}.preview-buy{padding-left:14px;padding-right:14px}}
.manual-payment-error[hidden]{display:none!important}
.completed-actions{padding-top:13px;border-top:1px solid rgba(255,255,255,.07)}
.completed-action{width:100%;min-height:58px;padding:9px 11px;border:1px solid rgba(244,199,91,.22);border-radius:13px;display:grid;grid-template-columns:38px minmax(0,1fr) 18px;align-items:center;gap:10px;color:#fff;background:linear-gradient(135deg,rgba(122,91,20,.28),rgba(30,48,66,.75));text-align:left;cursor:pointer}
.completed-action>span{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#f4c75b;background:rgba(244,199,91,.12)}
.completed-action>span svg{width:19px;height:19px}.completed-action>div{min-width:0}.completed-action strong,.completed-secondary-actions strong{display:block;color:#f7f9fc;font-size:13px;line-height:1.25}.completed-action small,.completed-secondary-actions small{display:block;margin-top:3px;color:#93a6b9;font-size:11px}.completed-action>svg{width:16px;height:16px;color:#f4c75b}
.completed-secondary-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
.completed-secondary-actions>a{min-width:0;min-height:52px;padding:9px 10px;border:1px solid rgba(123,158,194,.13);border-radius:12px;display:flex;align-items:center;gap:8px;color:inherit;background:#101f32;text-decoration:none}
.completed-secondary-actions>a>svg{width:17px;height:17px;flex:0 0 auto;color:#68aff5}.completed-secondary-actions>a:last-child>svg{color:#f4c75b}.completed-secondary-actions>a>span{min-width:0}.completed-secondary-actions strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.completed-action:hover,.completed-secondary-actions>a:hover{border-color:rgba(74,151,228,.38);filter:brightness(1.06)}
@media(max-width:360px){.completed-secondary-actions{grid-template-columns:1fr}}
.owned-card[data-owned-course-url]{cursor:pointer;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.owned-card[data-owned-course-url]:hover{border-color:rgba(65,145,224,.35);transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,0,0,.2)}
.owned-card[data-owned-course-url]:focus-visible{outline:2px solid #2d8be8;outline-offset:3px}
.payment-page{padding-bottom:92px}.payment-checkbar{position:fixed;right:0;bottom:0;left:0;z-index:35;padding:12px max(16px,calc((100vw - 430px)/2 + 16px)) calc(12px + env(safe-area-inset-bottom));border-top:1px solid rgba(111,145,181,.15);background:rgba(6,17,31,.94);backdrop-filter:blur(16px)}.payment-checkbar button{width:100%;max-width:398px;min-height:50px;margin:0 auto;border:0;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:9px;color:#fff;background:linear-gradient(135deg,#2586ed,#1265c7);box-shadow:0 10px 24px rgba(13,100,198,.3);font-size:13px;font-weight:850;cursor:pointer}.payment-checkbar button>svg{width:18px;height:18px}.payment-checkbar button.loading>svg{animation:payment-status-spin .8s linear infinite}.payment-checkbar button:disabled{cursor:wait;opacity:.85}@keyframes payment-status-spin{to{transform:rotate(360deg)}}
@media(min-width:900px){.payment-page .payment-checkbar{right:42px;bottom:30px;left:auto;width:340px;padding:0;border:0;background:transparent;backdrop-filter:none}.payment-page .payment-checkbar button{width:100%;max-width:none;min-height:56px;margin:0;border:1px solid rgba(111,180,247,.25);border-radius:16px;box-shadow:0 14px 34px rgba(0,0,0,.28)}}

/* Tujuan setelah pembayaran dan koleksi produk digital pengguna */
.payment-success-actions{margin:16px 0 4px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.payment-success-actions.single{grid-template-columns:1fr}
.payment-success-actions a{min-height:48px;padding:0 12px;border:1px solid rgba(106,157,207,.2);border-radius:13px;display:flex;align-items:center;justify-content:center;gap:8px;color:#c9dcee;background:#102238;text-align:center;text-decoration:none;font-size:12px;font-weight:850}
.payment-success-actions a.primary{border-color:#2686e8;color:#fff;background:linear-gradient(135deg,#2789ed,#1769c9);box-shadow:0 9px 22px rgba(20,107,201,.22)}
.payment-success-actions a svg{width:17px;height:17px;flex:0 0 auto}
.purchase-payment-button.paid-action{border-color:rgba(49,202,139,.23);color:#5be0a5;background:rgba(28,143,96,.12)}
.purchase-payment-button.paid-action:hover{border-color:rgba(49,202,139,.42);background:rgba(28,143,96,.2)}
.owned-products-page{min-height:100vh;padding-bottom:32px;background:#071321}
.owned-product-list{padding:16px;display:grid;gap:12px}
.owned-product-card{overflow:hidden;padding:12px;border:1px solid rgba(105,151,197,.18);border-radius:17px;display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;background:#0c1d30}
.owned-product-card>img{width:92px;height:112px;border-radius:12px;object-fit:cover;background:#102945}
.owned-product-card>div:nth-child(2){min-width:0;padding-top:2px}
.owned-product-card>div:nth-child(2)>span{color:#57affb;font-size:10px;font-weight:850;letter-spacing:.04em;text-transform:uppercase}
.owned-product-card h2{margin:6px 0 0;color:#f3f7fb;font-size:15px;line-height:1.35}
.owned-product-card p{display:-webkit-box;overflow:hidden;margin:7px 0 0;color:#91a9c0;font-size:12px;line-height:1.5;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.owned-product-card small{display:block;margin-top:8px;color:#667f98;font-size:10px}
.owned-product-actions{grid-column:1/-1;padding-top:11px;border-top:1px solid rgba(255,255,255,.07);display:grid;grid-template-columns:1fr 1.35fr;gap:8px}
.owned-product-actions a{min-height:40px;border:1px solid rgba(105,151,197,.2);border-radius:10px;display:flex;align-items:center;justify-content:center;gap:7px;color:#b9cee1;background:#10243a;text-decoration:none;font-size:12px;font-weight:800}
.owned-product-actions a.download{border-color:#237dd8;color:#fff;background:#1971ce}
.owned-product-actions svg{width:16px;height:16px}
@media(max-width:350px){.payment-success-actions{grid-template-columns:1fr}.owned-product-list{padding-inline:12px}.owned-product-card{grid-template-columns:78px minmax(0,1fr);padding:10px;gap:10px}.owned-product-card>img{width:78px;height:100px}}

/* Layout desktop index.php. Mobile tetap menggunakan layout aplikasi semula. */
@media(min-width:99999px){
  body:has(>.app>.page){background:radial-gradient(circle at 75% -15%,rgba(31,111,194,.16),transparent 34%),#07111f}
  body>.app:has(>.page){width:min(100%,1440px);min-height:100vh;margin:0 auto;padding:0 42px 64px 142px}
  body>.app:has(>.page)::before{content:"";position:fixed;z-index:29;top:0;bottom:0;left:max(0px,calc(50% - 720px));width:100px;border-right:1px solid rgba(125,160,196,.12);background:rgba(6,15,27,.91);backdrop-filter:blur(20px)}
  body>.app:has(>.page)>.page{min-height:100vh}
  body>.app:has(>.page)>.page.active{animation:desktop-page-in .2s ease both}
  @keyframes desktop-page-in{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:none}}

  body>.app:has(>.page) .header{min-height:88px;margin-bottom:22px;padding:0;border-bottom:1px solid rgba(125,160,196,.11)}
  body>.app:has(>.page) .brand{font-size:25px;letter-spacing:-.7px}
  body>.app:has(>.page) .header-actions{gap:12px}
  body>.app:has(>.page) .icon-btn{width:44px;height:44px;border-radius:13px;background:#102239}

  body>.app:has(>.page)>.bottom-nav{top:0;bottom:auto;left:max(0px,calc(50% - 720px));width:100px;height:100vh;min-height:0;padding:24px 10px;transform:none;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;border-top:0;border-right:1px solid rgba(255,255,255,.04);background:transparent;box-shadow:none;backdrop-filter:none}
  body>.app:has(>.page)>.bottom-nav::before{content:"R";width:48px;height:48px;margin-bottom:28px;border-radius:15px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#2688ee,#155eb7);box-shadow:0 12px 28px rgba(22,104,190,.3);font-size:20px;font-weight:900}
  body>.app:has(>.page) .nav-item{position:relative;width:72px;height:60px;border-radius:14px;display:flex;align-items:center;gap:9px;padding:0 11px;color:#728aa2}
  body>.app:has(>.page) .nav-item::after{content:attr(title);position:absolute;left:78px;padding:8px 10px;border:1px solid rgba(124,159,194,.15);border-radius:9px;color:#dce9f6;background:#0d2034;box-shadow:0 8px 22px rgba(0,0,0,.25);font-size:11px;font-weight:750;white-space:nowrap;opacity:0;pointer-events:none;transform:translateX(-5px);transition:.16s}
  body>.app:has(>.page) .nav-item:hover::after{opacity:1;transform:none}
  body>.app:has(>.page) .nav-item:hover{color:#bcd4e9;background:rgba(34,86,137,.16)}
  body>.app:has(>.page) .nav-icon{width:42px;height:42px;flex:0 0 42px}
  body>.app:has(>.page) .nav-item.active{background:rgba(29,102,177,.12)}

  #page-home .hero-grid{gap:18px;margin-bottom:28px}
  #page-home .hero-card{min-height:180px;padding:24px;border-radius:22px}
  #page-home .hero-icon{width:46px;height:46px;border:1px solid rgba(255,255,255,.2);border-radius:14px;background:rgba(255,255,255,.12)}
  #page-home .hero-icon svg{width:22px;height:22px}
  #page-home .hero-title{margin:25px 0 14px;font-size:21px}
  #page-home .open-btn{padding:8px 15px;font-size:12px;cursor:pointer}
  #page-home .art-icon{right:12px;bottom:-28px;width:140px;height:140px;opacity:.1}
  #page-home .search-wrap{max-width:760px;margin:0 0 38px}
  #page-home .search{height:58px;border-radius:17px;font-size:14px}
  #page-home .section{margin-top:38px}
  #page-home .section-head{margin-bottom:18px}
  #page-home .section-title{font-size:22px}
  #page-home .see-all{font-size:13px}
  #page-home .course-grid,#page-home .course-grid.course-scroll{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:none;grid-auto-flow:row;grid-auto-columns:auto;gap:16px;margin:0;padding:0;overflow:visible}
  #page-home .course-grid.course-scroll .course-card{padding:7px;border-radius:19px}
  #page-home .course-grid.course-scroll .course-cover{aspect-ratio:1/1.17;border-radius:14px}
  #page-home .course-grid.course-scroll .course-card-body{min-height:55px;padding:11px 6px 4px}
  #page-home .course-grid.course-scroll .course-card-body h3{font-size:14px}
  #page-home .course-cover{aspect-ratio:1/1.22;border-radius:18px}
  #page-home .course-card-body h3{font-size:14px}
  #page-home .digital-product-scroll{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
  #page-home .digital-cover{border-radius:18px}

  #page-kursus .owned-section{margin-top:0}
  #page-kursus .course-tabs{max-width:580px}
  #page-kursus .owned-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  #page-kursus .owned-card{margin:0}
  #page-mentoring .mentor-head{max-width:720px}
  #page-mentoring .mentor-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  #page-mentoring .mentor-card{margin:0}
  #page-komunitas .community-section,#page-ajak-teman>section,#page-profile .profile-section{max-width:860px;margin-left:auto;margin-right:auto}
  #page-profile .profile-group{border:1px solid rgba(126,159,192,.11);border-radius:18px;overflow:hidden;background:#0b192a}
  #page-profile .profile-action{padding-left:18px;padding-right:18px}

  body>.app:has(>.page) .notification-layer{padding-top:90px;padding-left:120px}
  body>.app:has(>.page) .notification-modal{width:min(100%,460px)}
  body>.app:has(>.page) .cart-drawer{width:430px}
}

@media(min-width:99999px) and (max-width:1120px){
  body>.app:has(>.page){padding-right:28px;padding-left:124px}
  #page-home .course-grid,#page-home .course-grid.course-scroll,#page-home .digital-product-scroll{grid-template-columns:repeat(4,minmax(0,1fr))}
}

.desktop-home-hero{display:none}

/* Desktop landing experience */
@media(min-width:99999px){
  body>.app:has(>.page){max-width:1600px;padding:0 54px 72px 270px}
  body>.app:has(>.page)::before{left:max(0px,calc(50% - 800px));width:222px}
  body>.app:has(>.page)>.bottom-nav{left:max(0px,calc(50% - 800px));width:222px;padding:30px 20px;align-items:stretch;justify-content:flex-start}
  body>.app:has(>.page)>.bottom-nav::before{content:"ROBOEDUTRADE";width:auto;height:50px;margin:0 4px 42px;display:flex;justify-content:flex-start;color:#edf6ff;background:none;box-shadow:none;font-size:14px;letter-spacing:.06em}
  body>.app:has(>.page) .nav-item{width:100%;height:52px;padding:0 13px;gap:12px}
  body>.app:has(>.page) .nav-item::after{content:attr(title);position:static;padding:0;border:0;color:inherit;background:none;box-shadow:none;font-size:13px;opacity:1;transform:none}
  body>.app:has(>.page) .nav-item.active{color:#fff;background:linear-gradient(135deg,rgba(31,121,215,.34),rgba(22,77,137,.2));box-shadow:inset 3px 0 #3598fa}
  body>.app:has(>.page) .nav-item.active .nav-icon{background:transparent;box-shadow:none}
  body>.app:has(>.page) .nav-icon{width:28px;height:38px;flex-basis:28px}
  body>.app:has(>.page) .header{min-height:82px;margin-bottom:26px}
  #page-home>.header .brand span::after{content:"  /  Dashboard";color:#71879d;-webkit-text-fill-color:#71879d;font-size:13px;font-weight:600;letter-spacing:0}

  .desktop-home-hero{min-height:390px;padding:48px 48px 38px;border:1px solid rgba(101,161,222,.16);border-radius:28px;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(330px,.82fr);gap:48px;overflow:hidden;background:radial-gradient(circle at 80% 10%,rgba(41,137,230,.2),transparent 34%),linear-gradient(135deg,#0d2340,#091727 68%);box-shadow:0 24px 70px rgba(0,0,0,.23)}
  .desktop-hero-copy{align-self:center}
  .desktop-eyebrow{display:flex;align-items:center;gap:8px;color:#62b6ff;font-size:11px;font-weight:850;letter-spacing:.12em}
  .desktop-eyebrow svg{width:15px;height:15px}
  .desktop-hero-copy h1{margin:18px 0 14px;color:#f6f9fc;font-size:clamp(35px,3.15vw,52px);line-height:1.09;letter-spacing:-.045em}
  .desktop-hero-copy h1 em{color:#67b7ff;font-style:normal}
  .desktop-hero-copy>p{max-width:650px;margin:0;color:#91a9bf;font-size:14px;line-height:1.75}
  .desktop-hero-actions{margin-top:26px;display:flex;gap:10px}
  .desktop-hero-actions a,.desktop-hero-actions button{height:48px;padding:0 18px;border-radius:13px;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-size:12px;font-weight:850;cursor:pointer}
  .desktop-hero-actions a{border:0;color:#fff;background:linear-gradient(135deg,#278bed,#1767c4);box-shadow:0 12px 25px rgba(23,104,196,.28)}
  .desktop-hero-actions button{border:1px solid rgba(129,169,208,.2);color:#c1d5e7;background:#10263e}
  .desktop-hero-actions svg{width:17px;height:17px}
  .desktop-hero-stats{margin-top:34px;display:flex;gap:0}
  .desktop-hero-stats>div{min-width:135px;display:grid;gap:3px}
  .desktop-hero-stats>div+div{margin-left:24px;padding-left:24px;border-left:1px solid rgba(255,255,255,.1)}
  .desktop-hero-stats strong{font-size:21px}.desktop-hero-stats span{color:#718ba4;font-size:11px}
  .desktop-feature-panel{position:relative;min-height:294px;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:#10253d;box-shadow:0 22px 45px rgba(0,0,0,.28)}
  .desktop-feature-panel>img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
  .desktop-feature-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,9,18,.05),rgba(2,9,18,.9) 83%)}
  .desktop-feature-label{position:absolute;top:16px;left:16px;padding:7px 10px;border:1px solid rgba(255,255,255,.16);border-radius:9px;display:flex;align-items:center;gap:6px;color:#f5df91;background:rgba(28,30,23,.68);backdrop-filter:blur(10px);font-size:10px;font-weight:800}.desktop-feature-label svg{width:14px}
  .desktop-feature-copy{position:absolute;right:20px;bottom:20px;left:20px}.desktop-feature-copy small{color:#6db9fc;font-size:10px;font-weight:800}.desktop-feature-copy h2{margin:7px 0 13px;font-size:20px;line-height:1.25}.desktop-feature-copy a{display:inline-flex;align-items:center;gap:5px;color:#dceeff;font-size:11px;font-weight:800;text-decoration:none}.desktop-feature-copy a svg{width:14px}
  .desktop-feature-empty{height:100%;display:grid;place-items:center;align-content:center;gap:10px;color:#7895ae}.desktop-feature-empty svg{width:40px;height:40px}

  #page-home>.hero-grid{margin-top:34px;grid-template-columns:repeat(3,1fr)}
  #page-home>.hero-grid .hero-card{min-height:126px;padding:20px;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:14px;border:1px solid rgba(255,255,255,.1);background:#0d1d31!important;box-shadow:none}
  #page-home>.hero-grid .hero-title{margin:0;font-size:17px}
  #page-home>.hero-grid .open-btn{padding:8px 13px;color:#8fc8ff;border-color:rgba(75,155,234,.25);background:#102d4a}
  #page-home>.hero-grid .art-icon{display:none}
}

@media(min-width:99999px) and (max-width:1180px){
  body>.app:has(>.page){padding-left:222px;padding-right:28px}
  body>.app:has(>.page)::before,body>.app:has(>.page)>.bottom-nav{width:190px}
  .desktop-home-hero{padding:34px;grid-template-columns:1fr 320px;gap:28px}
  .desktop-hero-copy h1{font-size:36px}
  .desktop-hero-stats>div{min-width:100px}
}

.owned-search-wrap{margin:0 0 14px;padding:14px;border:1px solid #253b51;border-radius:14px;background:#0c1b2e}.owned-search-wrap>label{display:block;margin-bottom:8px;color:#a7bfd5;font-size:12px}.owned-search-wrap>div{display:flex;gap:8px}.owned-search-wrap input{width:100%;min-width:0;flex:1;padding:11px 12px;border:1px solid #2c4865;border-radius:10px;color:#edf4fb;background:#071524;font:inherit;font-size:13px}.owned-search-wrap button{padding:0 12px;border:0;border-radius:9px;color:#badaf8;background:#173553;cursor:pointer}.owned-search-empty{padding:22px 16px;border:1px solid #253b51;border-radius:12px;color:#9fb4c9;background:#0c1b2e;font-size:13px;text-align:center}.owned-search-wrap[hidden],.owned-search-empty[hidden],#page-kursus .owned-card[hidden],#page-kursus .owned-empty-state[hidden]{display:none!important}

/* Comfortable mentor application fields on mobile. */
.mentor-apply-app .mentor-apply-form{display:grid;width:100%;max-width:none;margin:0;padding:20px;gap:20px}.mentor-apply-app .mentor-apply-form>label{display:grid;width:100%;min-width:0;margin:0;padding:0;gap:9px}.mentor-apply-app .mentor-apply-form>label>span{padding:0;font-size:14px;font-weight:700;color:#dceaf7}.mentor-apply-app .mentor-apply-form input,.mentor-apply-app .mentor-apply-form textarea{width:100%;max-width:none;min-width:0;margin:0;border:1px solid #294057;border-radius:12px;background:#081523;color:#eef5fc;font-size:16px;line-height:1.5}.mentor-apply-app .mentor-apply-form input{height:52px;padding:0 13px}.mentor-apply-app .mentor-apply-form textarea{min-height:150px;padding:13px;resize:vertical}.mentor-apply-app .mentor-apply-form input:focus,.mentor-apply-app .mentor-apply-form textarea:focus{outline:2px solid #348ee0;outline-offset:2px}.mentor-apply-app .mentor-apply-form .mentor-field-hint{font-size:12px;line-height:1.6}.mentor-apply-app .mentor-apply-terms{margin:0;padding:12px;font-size:12px;line-height:1.6}.mentor-apply-app .profile-save-button{width:100%;min-height:52px;margin:0;font-size:15px}.mentor-apply-app .mentor-apply-hero{gap:12px;padding:18px}.mentor-apply-app .mentor-apply-hero>div{min-width:0}.mentor-apply-app .mentor-apply-hero p{font-size:13px;line-height:1.6}@media(max-width:767px){main.mentor-apply-app{width:100%;padding:0 16px calc(24px + env(safe-area-inset-bottom))}.mentor-apply-app .mentor-apply-header{min-height:74px}.mentor-apply-app .mentor-apply-hero{margin:16px 0}.mentor-apply-app .mentor-apply-hero>span{width:42px;height:42px;flex-basis:42px}.mentor-apply-app .mentor-apply-hero h1{font-size:19px}.mentor-apply-app .mentor-apply-form{padding:18px;gap:20px}.mentor-apply-app .mentor-apply-form textarea{min-height:145px}.mentor-apply-app .mentor-apply-header strong{font-size:16px}}

/* Digital product covers 16:9 */
.digital-cover{height:auto!important;aspect-ratio:16/9!important}.digital-cover>img{width:100%;height:100%;object-fit:cover}.owned-product-card>img{height:auto!important;aspect-ratio:16/9;object-fit:cover}

/* Wider mobile digital product cards */
@media(max-width:620px){.digital-product-scroll .digital-product-card{width:280px;flex:0 0 min(280px,88%)}.digital-product-card h3{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.45;min-height:2.9em}.digital-product-card>div:last-child{padding-top:12px}}

/* Desktop sidebar digital products */
.desktop-product-nav{display:none!important}@media(min-width:900px){body>.app:has(>.page) .desktop-product-nav{display:flex!important}}